diff --git a/src/assets/v3/NTI4MWU5.ico b/src/assets/v3/NTI4MWU5.ico
new file mode 100644
index 0000000..ea93e01
Binary files /dev/null and b/src/assets/v3/NTI4MWU5.ico differ
diff --git a/src/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg b/src/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg
new file mode 100644
index 0000000..d6cf07c
--- /dev/null
+++ b/src/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg
@@ -0,0 +1,3 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16">
+  <path d="M10.476 9.115a78.809 78.809 0 006.061 2.084c1.121.46 0 3.07-1.184 2.531-1.34-.577-4.035-1.757-6.085-2.766C8.128 12.289 6.338 14 3.788 14 1.522 14 0 12.682 0 10.719c0-1.654 1.157-3.324 3.74-3.324 1.48 0 3 .415 4.818 1.04.336-.666.616-1.361.838-2.078l-6.57-.003V5.353l3.379.008V4.05H2.088v-.986l4.117.003V1.604c0-.383.208-.604.571-.604H8.5v2.073l4.08.003v.977H8.5V5.37l3.339.009s-.413 2.115-1.361 3.736zm-9.549 1.52v-.001c0 .94.741 1.89 2.545 1.89 1.393 0 2.757-.824 4.062-2.45-1.744-.862-2.679-1.277-4.03-1.277-1.312 0-2.577.631-2.577 1.839z" fill="#1C9FE5"/>
+</svg>
diff --git a/src/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg b/src/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg
new file mode 100644
index 0000000..d81974d
--- /dev/null
+++ b/src/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg
@@ -0,0 +1,3 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16 4H0v-.75C0 2.56.448 2 1 2h14c.552 0 1 .56 1 1.25V4zm0 2.5V13a1 1 0 01-1 1H1a1 1 0 01-1-1V6.5h16zM4 10a1 1 0 100 2h1a1 1 0 100-2H4z" fill="#000"/>
+</svg>
diff --git a/src/components/Discussion/Module/Detail/components/CommentItem/index.vue b/src/components/Discussion/Module/Detail/components/CommentItem/index.vue
index 3f795c0..bfc3d59 100644
--- a/src/components/Discussion/Module/Detail/components/CommentItem/index.vue
+++ b/src/components/Discussion/Module/Detail/components/CommentItem/index.vue
@@ -152,7 +152,7 @@ const refReplyMd = ref();
 const focusReplyMdEditor = async() => {
   await nextTick();
   const lastLineNumber = refReplyMd.value.instance.lastLine();
-  refReplyMd.value.instance.setCursor(lastLineNumber, 0);
+  refReplyMd.value.instance.set金银湖大模型(lastLineNumber, 0);
   refReplyMd.value.instance.scrollIntoView(null, refReplyMd.value.instance.getScrollInfo().clientHeight - 10);
   refReplyMd.value.instance.focus();
 };
diff --git a/src/components/Discussion/Module/Detail/components/NewComment/index.vue b/src/components/Discussion/Module/Detail/components/NewComment/index.vue
index bce81e9..66bc652 100644
--- a/src/components/Discussion/Module/Detail/components/NewComment/index.vue
+++ b/src/components/Discussion/Module/Detail/components/NewComment/index.vue
@@ -156,7 +156,7 @@ defineExpose({
   async focusMdEditor() {
     await nextTick();
     const lastLineNumber = refMd.value.instance.lastLine();
-    refMd.value.instance.setCursor(lastLineNumber, 0);
+    refMd.value.instance.set金银湖大模型(lastLineNumber, 0);
     refMd.value.instance.focus();
   },
   setReply(blo:boolean = true) {
diff --git a/src/router/config/home.ts b/src/router/config/home.ts
index 382707c..7f66577 100644
--- a/src/router/config/home.ts
+++ b/src/router/config/home.ts
@@ -293,6 +293,32 @@ export default [
       asideMenu: 'drawer' // 左侧菜单抽屉模式
     }
   },
+  {
+    path: '/CheckoutPage',
+    name: 'CheckoutPage',
+    component: () => import('@/views/Jyh/Payment/CheckoutPage.vue'),
+    meta: {
+      title: 'CheckoutPage',
+      reportTitle: 'CheckoutPage',
+      className: 'w-full min-w-full',
+      hiddenFooter: true,
+      hasMobile: true,
+      asideMenu: 'drawer' // 左侧菜单抽屉模式
+    }
+  },
+  {
+    path: '/CheckoutPayPage',
+    name: 'CheckoutPayPage',
+    component: () => import('@/views/Jyh/Payment/CheckoutPayPage.vue'),
+    meta: {
+      title: 'CheckoutPage',
+      reportTitle: 'CheckoutPage',
+      className: 'w-full min-w-full',
+      hiddenFooter: true,
+      hasMobile: true,
+      asideMenu: 'drawer' // 左侧菜单抽屉模式
+    }
+  },
   {
     path: '/ai',
     redirect: '/ai/home',
diff --git a/src/views/Jyh/Dashboard/Header.vue b/src/views/Jyh/Dashboard/Header.vue
index 980d788..f1907c9 100644
--- a/src/views/Jyh/Dashboard/Header.vue
+++ b/src/views/Jyh/Dashboard/Header.vue
@@ -9,7 +9,7 @@
     </div>
 
     <div class="header-right">
-      <div class="agent-text"><router-link to="/ai/home">AI大模型</router-link></div>
+      <div class="agent-text"><router-link to="/ai/home">金银湖大模型</router-link></div>
 
       <button class="user-avatar-btn" @click="toggleDropdown" aria-label="User Account">
         用
diff --git a/src/views/Jyh/Dashboard/Integration.vue b/src/views/Jyh/Dashboard/Integration.vue
index 639bd0b..0b339ad 100644
--- a/src/views/Jyh/Dashboard/Integration.vue
+++ b/src/views/Jyh/Dashboard/Integration.vue
@@ -55,7 +55,7 @@
       <div class="api-section">
         <div class="api-header">用户 API 密钥</div>
         <p class="api-description">
-          用户 API 密钥提供对您的 **Cursor 账户**的安全、程序化访问权限，包括 **Cursor Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
+          用户 API 密钥提供对您的 **金银湖大模型 账户**的安全、程序化访问权限，包括 **金银湖大模型 Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
         </p>
 
         <div class="api-card">
diff --git a/src/views/Jyh/Dashboard/overview/TeamSetupModal.vue b/src/views/Jyh/Dashboard/overview/TeamSetupModal.vue
index 2dd48be..da25c8d 100644
--- a/src/views/Jyh/Dashboard/overview/TeamSetupModal.vue
+++ b/src/views/Jyh/Dashboard/overview/TeamSetupModal.vue
@@ -33,7 +33,7 @@
       <div class="checkbox-group">
         <label>
           <input type="checkbox" v-model="agreeToTerms">
-          我的团队的代码和使用数据将用于改进 Cursor。
+          我的团队的代码和使用数据将用于改进 金银湖大模型。
         </label>
         <span class="link-text">改变</span>
       </div>
diff --git a/src/views/Jyh/Dashboard/overview/index.vue b/src/views/Jyh/Dashboard/overview/index.vue
index efa254d..95533a8 100644
--- a/src/views/Jyh/Dashboard/overview/index.vue
+++ b/src/views/Jyh/Dashboard/overview/index.vue
@@ -5,19 +5,25 @@
       <d-card class="plan-card">
         <div class="card-title">专业版 <span class="price">20美元/月</span></div>
         <div class="card-desc">入门级套餐，可访问高级模型、无限次 Tab 键自动补全等功能。</div>
-        <d-button class="card-btn white-btn">免费试用7天</d-button>
+        <d-button class="card-btn white-btn">
+          <router-link to="/CheckoutPage">免费试用7天</router-link>
+        </d-button>
       </d-card>
 
       <d-card class="plan-card">
         <div class="card-title">专业+ <span class="price">60美元/月</span></div>
         <div class="card-desc">使用量是专业版的 3 倍，解锁代理程序更高的限制等等。</div>
-        <d-button class="card-btn white-btn">升级到专业版+</d-button>
+        <d-button class="card-btn white-btn">
+          <router-link to="/CheckoutPayPage">升级到专业版+</router-link>
+        </d-button>
       </d-card>
 
       <d-card class="plan-card">
         <div class="card-title">超级版 <span class="price">200美元/月</span></div>
         <div class="card-desc">并行运行代理，享受 20 倍使用限制，并获得高级功能的优先使用权，从而获得最大价值。</div>
-        <d-button class="card-btn white-btn">升级到超级版</d-button>
+        <d-button class="card-btn white-btn">
+          <router-link to="/CheckoutPayPage">升级到超级版</router-link>
+        </d-button>
       </d-card>
     </div>
 
diff --git a/src/views/Jyh/Dashboard/proxy.vue b/src/views/Jyh/Dashboard/proxy.vue
index 94ad958..7eab8ba 100644
--- a/src/views/Jyh/Dashboard/proxy.vue
+++ b/src/views/Jyh/Dashboard/proxy.vue
@@ -67,7 +67,7 @@
       <div class="api-section">
         <div class="section-title">用户 API 密钥</div>
         <p class="api-description">
-          用户 API 密钥提供对您的 Cursor 账户的安全、程序化访问权限，包括 **Cursor Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
+          用户 API 密钥提供对您的 金银湖大模型 账户的安全、程序化访问权限，包括 **金银湖大模型 Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
         </p>
 
         <div class="api-card">
diff --git a/src/views/Jyh/Dashboard/setting.vue b/src/views/Jyh/Dashboard/setting.vue
index d4dd518..f4b4af4 100644
--- a/src/views/Jyh/Dashboard/setting.vue
+++ b/src/views/Jyh/Dashboard/setting.vue
@@ -13,7 +13,7 @@
               <span class="item-title">共享数据</span>
               <span class="status-tag">1小时后激活</span>
             </div>
-            <p class="item-description">您的代码库、提示、编辑和其他使用数据将被 Cursor 存储和训练，以改进产品。</p>
+            <p class="item-description">您的代码库、提示、编辑和其他使用数据将被 金银湖大模型 存储和训练，以改进产品。</p>
           </div>
           <d-button class="action-btn edit-btn">编辑</d-button>
         </div>
diff --git a/src/views/Jyh/Payment/CheckoutPage.vue b/src/views/Jyh/Payment/CheckoutPage.vue
new file mode 100644
index 0000000..eaa4e80
--- /dev/null
+++ b/src/views/Jyh/Payment/CheckoutPage.vue
@@ -0,0 +1,530 @@
+<template>
+  <div class="checkout-page">
+
+    <div class="summary-panel">
+      <div class="summary-content">
+        <div class="back-button-placeholder">
+          <button class="back-btn" @click="goBack">
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+          </button>
+        </div>
+
+        <h1 class="panel-title">试用 金银湖大模型 Pro</h1>
+        <div class="trial-info">
+          <span class="trial-days">7 天免费</span>
+          <p class="trial-note">随后 US$20.00/月 (从 2025年12月17日开始)</p>
+        </div>
+
+        <div class="plan-card">
+          <div class="card-details">
+            <div class="card-header">
+              <span class="card-title">金银湖大模型 Pro</span>
+              <span class="card-tag">7 天免费</span>
+            </div>
+            <div class="card-features">
+              金银湖大模型 Pro unlocks unlimited tab completion, extended agent limits, and access to most features.
+            </div>
+            <div class="card-price">US$20.00 / 月度</div>
+          </div>
+        </div>
+
+        <div class="toggle-row">
+          <span class="toggle-label">采用年费计划</span>
+          <div class="toggle-switch">
+            <input type="checkbox" id="annual" v-model="isAnnual">
+            <label for="annual"></label>
+          </div>
+          <span class="toggle-discount">节省 US$4.00</span>
+        </div>
+
+        <div class="spacer"></div>
+
+        <div class="price-detail">
+          <div class="detail-row">
+            <span>小计</span>
+            <span>US$20.00</span>
+          </div>
+          <div class="detail-row">
+            <span>税 <i class="icon-info"></i></span>
+            <span>US$0.00</span>
+          </div>
+          <div class="detail-row total-row">
+            <span>试用后总额</span>
+            <span>US$20.00</span>
+          </div>
+          <div class="detail-row today-total">
+            <span>今日合计</span>
+            <span>US$0.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-panel">
+      <h2 class="form-title">输入付款详情</h2>
+
+      <div class="form-group email-group">
+        <label>邮箱</label>
+        <d-input
+          size="lg"
+          placeholder="fukang10032@gmail.com"
+          v-model="formData.email"
+          class="email-input-custom"
+        ></d-input>
+      </div>
+
+      <div class="form-group payment-group">
+        <label>支付方式</label>
+
+        <div class="payment-option">
+          <d-radio name="payment" value="card" v-model="formData.paymentMethod">
+            <img class="wechart-icon" src="@/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg">
+            <span class="radio-label">银行卡</span>
+          </d-radio>
+<!--          <div v-if="formData.paymentMethod === 'card'" class="card-input-placeholder">-->
+<!--            [Card Element Input Placeholder]-->
+<!--          </div>-->
+        </div>
+
+        <div class="payment-option">
+          <d-radio name="payment" value="wechat" v-model="formData.paymentMethod">
+            <img class="wechart-icon" src="@/assets/v3/NTI4MWU5.ico">
+            <span class="radio-label">微信支付</span>
+          </d-radio>
+        </div>
+
+        <div class="payment-option">
+          <d-radio name="payment" value="alipay" v-model="formData.paymentMethod">
+            <img class="alipay-icon" src="@/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg">
+            <span class="radio-label">支付宝</span>
+          </d-radio>
+        </div>
+
+      </div>
+
+      <div class="save-info-text">
+        保存您的信息，以便更快地在 金银湖大模型 和支持 Stripe 的地方安全地支付。
+      </div>
+
+      <d-button class="start-trial-btn" @click="startTrial">开始试用</d-button>
+
+      <p class="terms-text">
+        订阅即表示您同意 金银湖大模型 服务条款，并且理解您的订阅将自动续订，直到您在 Stripe 客户门户上取消。
+      </p>
+      <div class="powered-by">
+        Powered by <span class="stripe-link">stripe</span> | 条款 | 隐私
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import {useRouter} from "vue-router";
+const router = useRouter();
+const formData = ref({
+  email: 'fukang10032@gmail.com',
+  paymentMethod: 'card', // 默认选中银行卡
+});
+
+const isAnnual = ref(false); // 控制年费月费切换
+
+const startTrial = () => {
+  alert('开始试用按钮被点击！');
+};
+
+const goBack = () => {
+  router.go(-1);
+};
+</script>
+
+<style lang="scss" scoped>
+.checkout-page {
+  display: flex;
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  box-sizing: border-box;
+}
+
+.summary-panel {
+  flex: 1.1;
+  background-color: #000;
+  color: #fff;
+  padding: 0 40px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.summary-content {
+  width: 100%;
+  max-width: 600px;
+  padding: 60px 0;
+}
+
+.form-panel {
+  flex: 1;
+  background-color: #fff;
+  color: #333;
+  padding: 60px 40px;
+}
+
+/* ------------------- 左侧摘要样式 ------------------- */
+/* 优化点 3: 返回按钮样式 */
+.back-button-placeholder {
+  margin-bottom: 50px;
+}
+.back-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: #fff;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+.back-btn:hover {
+  opacity: 1;
+}
+
+
+.panel-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.trial-info {
+  margin-bottom: 50px;
+}
+
+.trial-days {
+  font-size: 44px;
+  font-weight: 700;
+  display: block;
+}
+
+.trial-note {
+  font-size: 14px;
+  color: #777;
+  margin-top: 5px;
+}
+
+/* 计划卡片 */
+.plan-card {
+  background-color: #1e1e1e;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  position: relative;
+  margin-bottom: 30px;
+  border: 1px solid #333;
+}
+
+.card-details {
+  flex-grow: 1;
+  padding: 4px 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #fff;
+}
+
+.card-features {
+  font-size: 12px;
+  color: #888;
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+
+.card-price {
+  font-size: 12px;
+  color: #aaa;
+  font-weight: 500;
+}
+
+.card-tag {
+  background-color: transparent;
+  color: #4CAF50;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 0;
+}
+
+/* 年月切换 */
+.toggle-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+  background-color: #111;
+  border-radius: 4px;
+  padding: 8px 12px;
+  justify-content: space-between;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #ccc;
+  font-weight: 500;
+}
+
+.toggle-discount {
+  font-size: 12px;
+  color: #4CAF50;
+  font-weight: 500;
+}
+
+/* 简化开关样式 (Toggle Switch) */
+.toggle-switch {
+  margin: 0 15px;
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+.toggle-switch input[type="checkbox"] {
+  display: none;
+}
+.toggle-switch label {
+  cursor: pointer;
+  width: 40px;
+  height: 20px;
+  background-color: #444;
+  border-radius: 10px;
+  position: relative;
+  display: block;
+  transition: background-color 0.3s;
+}
+.toggle-switch label:after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background-color: #ccc;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+.toggle-switch input:checked + label {
+  background-color: #58a6ff;
+}
+.toggle-switch input:checked + label:after {
+  left: calc(100% - 18px);
+  background-color: white;
+}
+
+.spacer {
+  border-top: 1px solid #333;
+  margin: 20px 0;
+}
+
+/* 价格明细 */
+.price-detail {
+  font-size: 14px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  color: #aaa;
+}
+
+.detail-row span:last-child {
+  font-weight: 500;
+  color: #fff;
+}
+
+.detail-row.total-row {
+  border-top: 1px solid #333;
+  padding-top: 20px;
+  margin-top: 15px;
+  color: #fff;
+}
+
+.detail-row.today-total {
+  font-size: 16px;
+  font-weight: 700;
+  color: #4CAF50;
+}
+.detail-row.today-total span:last-child {
+  color: #4CAF50;
+}
+
+
+/* ------------------- 右侧表单样式 ------------------- */
+.form-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 40px;
+  color: #333;
+}
+
+.form-group {
+  margin-bottom: 30px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+/* 优化点 1: 邮箱输入框美化 (参考 image_15239f.png) */
+.email-input-custom :deep(.devui-input-wrapper) {
+  border: 1px solid #ddd;
+  border-radius: 4px; /* 略微减少圆角，更符合 image_15239f.png */
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.email-input-custom :deep(.devui-input-wrapper.focus) {
+  border-color: #58a6ff;
+  box-shadow: 0 0 0 1px #58a6ff; /* 增加细微的聚焦阴影 */
+}
+
+.email-input-custom :deep(.devui-input) {
+  padding: 10px 12px;
+  font-size: 14px;
+  height: auto;
+}
+
+/* 支付方式 */
+.payment-group {
+  margin-bottom: 40px;
+}
+.payment-group label {
+  margin-bottom: 12px;
+}
+
+/* 支付选项容器 */
+.payment-option {
+  margin-bottom: 15px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 10px 15px;
+  /* 确保 Radio 按钮在未选中的 payment-option 中也能看到 */
+}
+.payment-option:hover {
+  border-color: #ccc;
+}
+
+/* DevUI Radio 样式定制 */
+.payment-option :deep(.devui-radio-list) {
+  display: block;
+}
+.payment-option :deep(.devui-radio) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.payment-option :deep(.devui-radio-input) {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #999;
+}
+.payment-option :deep(.devui-radio-input.checked) {
+  background-color: #000;
+  border-color: #000;
+}
+
+.payment-option :deep(.devui-radio-label) {
+  flex-grow: 1;
+  font-size: 14px;
+  font-weight: 500;
+  padding-left: 10px;
+}
+
+/* 银行卡图标组 */
+.card-icons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+/* 银行卡具体颜色 */
+.visa-icon { background-color: #1a1f71; content: "V"; }
+.master-icon { background-color: #ff5f00; content: "M"; }
+.amex-icon { background-color: #007bc1; content: "A"; }
+
+.card-input-placeholder {
+  height: 44px;
+  background-color: #f7f7f7;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin: 15px 0 0 0;
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+  font-size: 14px;
+  color: #999;
+}
+
+/* 底部文本和按钮 */
+.save-info-text {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 25px;
+}
+
+.start-trial-btn {
+  width: 100%;
+  height: 48px;
+  background-color: #000 !important;
+  color: #fff !important;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  border: none !important;
+}
+
+.terms-text {
+  font-size: 10px;
+  color: #888;
+  text-align: center;
+  line-height: 1.4;
+  max-width: 400px;
+  margin: 0 auto 15px;
+}
+
+.powered-by {
+  font-size: 10px;
+  color: #aaa;
+  text-align: center;
+}
+
+.stripe-link {
+  font-weight: bold;
+  color: #666;
+}
+
+::v-deep(.devui-radio__label) {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  img {
+    height: 16px;
+    text-align: center;
+    width: 24px;
+    margin-inline-end:8px;
+    border-radius: 2px;
+    max-width: 24px;
+  }
+  .wechart-icon {
+    width: 16px;
+    margin-right: 12px;
+  }
+}
+</style>
diff --git a/src/views/Jyh/Payment/CheckoutPayPage.vue b/src/views/Jyh/Payment/CheckoutPayPage.vue
new file mode 100644
index 0000000..21b6319
--- /dev/null
+++ b/src/views/Jyh/Payment/CheckoutPayPage.vue
@@ -0,0 +1,530 @@
+<template>
+  <div class="checkout-page">
+
+    <div class="summary-panel">
+      <div class="summary-content">
+        <div class="back-button-placeholder">
+          <button class="back-btn" @click="goBack">
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+          </button>
+        </div>
+
+        <h1 class="panel-title">订阅 金银湖大模型 Pro</h1>
+        <div class="trial-info">
+          <span class="trial-days">US$60.00</span>
+          <p class="trial-note">每个月</p>
+        </div>
+
+        <div class="plan-card">
+          <div class="card-details">
+            <div class="card-header">
+              <span class="card-title">金银湖大模型 Pro</span>
+              <span class="card-tag">7 天免费</span>
+            </div>
+            <div class="card-features">
+              金银湖大模型 Pro unlocks unlimited tab completion, extended agent limits, and access to most features.
+            </div>
+            <div class="card-price">US$20.00 / 月度</div>
+          </div>
+        </div>
+
+        <div class="toggle-row">
+          <span class="toggle-label">采用年费计划</span>
+          <div class="toggle-switch">
+            <input type="checkbox" id="annual" v-model="isAnnual">
+            <label for="annual"></label>
+          </div>
+          <span class="toggle-discount">节省 US$4.00</span>
+        </div>
+
+        <div class="spacer"></div>
+
+        <div class="price-detail">
+          <div class="detail-row">
+            <span>小计</span>
+            <span>US$20.00</span>
+          </div>
+          <div class="detail-row">
+            <span>税 <i class="icon-info"></i></span>
+            <span>US$0.00</span>
+          </div>
+          <div class="detail-row total-row">
+            <span>试用后总额</span>
+            <span>US$20.00</span>
+          </div>
+          <div class="detail-row today-total">
+            <span>今日合计</span>
+            <span>US$0.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-panel">
+      <h2 class="form-title">输入付款详情</h2>
+
+      <div class="form-group email-group">
+        <label>邮箱</label>
+        <d-input
+          size="lg"
+          placeholder="fukang10032@gmail.com"
+          v-model="formData.email"
+          class="email-input-custom"
+        ></d-input>
+      </div>
+
+      <div class="form-group payment-group">
+        <label>支付方式</label>
+
+        <div class="payment-option">
+          <d-radio name="payment" value="card" v-model="formData.paymentMethod">
+            <img class="wechart-icon" src="@/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg">
+            <span class="radio-label">银行卡</span>
+          </d-radio>
+<!--          <div v-if="formData.paymentMethod === 'card'" class="card-input-placeholder">-->
+<!--            [Card Element Input Placeholder]-->
+<!--          </div>-->
+        </div>
+
+        <div class="payment-option">
+          <d-radio name="payment" value="wechat" v-model="formData.paymentMethod">
+            <img class="wechart-icon" src="@/assets/v3/NTI4MWU5.ico">
+            <span class="radio-label">微信支付</span>
+          </d-radio>
+        </div>
+
+        <div class="payment-option">
+          <d-radio name="payment" value="alipay" v-model="formData.paymentMethod">
+            <img class="alipay-icon" src="@/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg">
+            <span class="radio-label">支付宝</span>
+          </d-radio>
+        </div>
+
+      </div>
+
+      <div class="save-info-text">
+        保存您的信息，以便更快地在 金银湖大模型 和支持 Stripe 的地方安全地支付。
+      </div>
+
+      <d-button class="start-trial-btn" @click="startTrial">订阅</d-button>
+
+      <p class="terms-text">
+        订阅即表示您同意 金银湖大模型 服务条款，并且理解您的订阅将自动续订，直到您在 Stripe 客户门户上取消。
+      </p>
+      <div class="powered-by">
+        Powered by <span class="stripe-link">stripe</span> | 条款 | 隐私
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import {useRouter} from "vue-router";
+const router = useRouter();
+const formData = ref({
+  email: 'fukang10032@gmail.com',
+  paymentMethod: 'card', // 默认选中银行卡
+});
+
+const isAnnual = ref(false); // 控制年费月费切换
+
+const startTrial = () => {
+  alert('订阅按钮被点击！');
+};
+
+const goBack = () => {
+  router.go(-1);
+};
+</script>
+
+<style lang="scss" scoped>
+.checkout-page {
+  display: flex;
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  box-sizing: border-box;
+}
+
+.summary-panel {
+  flex: 1.1;
+  background-color: #000;
+  color: #fff;
+  padding: 0 40px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.summary-content {
+  width: 100%;
+  max-width: 600px;
+  padding: 60px 0;
+}
+
+.form-panel {
+  flex: 1;
+  background-color: #fff;
+  color: #333;
+  padding: 60px 40px;
+}
+
+/* ------------------- 左侧摘要样式 ------------------- */
+/* 优化点 3: 返回按钮样式 */
+.back-button-placeholder {
+  margin-bottom: 50px;
+}
+.back-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: #fff;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+.back-btn:hover {
+  opacity: 1;
+}
+
+
+.panel-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.trial-info {
+  margin-bottom: 50px;
+}
+
+.trial-days {
+  font-size: 44px;
+  font-weight: 700;
+  display: block;
+}
+
+.trial-note {
+  font-size: 14px;
+  color: #777;
+  margin-top: 5px;
+}
+
+/* 计划卡片 */
+.plan-card {
+  background-color: #1e1e1e;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  position: relative;
+  margin-bottom: 30px;
+  border: 1px solid #333;
+}
+
+.card-details {
+  flex-grow: 1;
+  padding: 4px 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #fff;
+}
+
+.card-features {
+  font-size: 12px;
+  color: #888;
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+
+.card-price {
+  font-size: 12px;
+  color: #aaa;
+  font-weight: 500;
+}
+
+.card-tag {
+  background-color: transparent;
+  color: #4CAF50;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 0;
+}
+
+/* 年月切换 */
+.toggle-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+  background-color: #111;
+  border-radius: 4px;
+  padding: 8px 12px;
+  justify-content: space-between;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #ccc;
+  font-weight: 500;
+}
+
+.toggle-discount {
+  font-size: 12px;
+  color: #4CAF50;
+  font-weight: 500;
+}
+
+/* 简化开关样式 (Toggle Switch) */
+.toggle-switch {
+  margin: 0 15px;
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+.toggle-switch input[type="checkbox"] {
+  display: none;
+}
+.toggle-switch label {
+  cursor: pointer;
+  width: 40px;
+  height: 20px;
+  background-color: #444;
+  border-radius: 10px;
+  position: relative;
+  display: block;
+  transition: background-color 0.3s;
+}
+.toggle-switch label:after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background-color: #ccc;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+.toggle-switch input:checked + label {
+  background-color: #58a6ff;
+}
+.toggle-switch input:checked + label:after {
+  left: calc(100% - 18px);
+  background-color: white;
+}
+
+.spacer {
+  border-top: 1px solid #333;
+  margin: 20px 0;
+}
+
+/* 价格明细 */
+.price-detail {
+  font-size: 14px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  color: #aaa;
+}
+
+.detail-row span:last-child {
+  font-weight: 500;
+  color: #fff;
+}
+
+.detail-row.total-row {
+  border-top: 1px solid #333;
+  padding-top: 20px;
+  margin-top: 15px;
+  color: #fff;
+}
+
+.detail-row.today-total {
+  font-size: 16px;
+  font-weight: 700;
+  color: #4CAF50;
+}
+.detail-row.today-total span:last-child {
+  color: #4CAF50;
+}
+
+
+/* ------------------- 右侧表单样式 ------------------- */
+.form-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 40px;
+  color: #333;
+}
+
+.form-group {
+  margin-bottom: 30px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+/* 优化点 1: 邮箱输入框美化 (参考 image_15239f.png) */
+.email-input-custom :deep(.devui-input-wrapper) {
+  border: 1px solid #ddd;
+  border-radius: 4px; /* 略微减少圆角，更符合 image_15239f.png */
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.email-input-custom :deep(.devui-input-wrapper.focus) {
+  border-color: #58a6ff;
+  box-shadow: 0 0 0 1px #58a6ff; /* 增加细微的聚焦阴影 */
+}
+
+.email-input-custom :deep(.devui-input) {
+  padding: 10px 12px;
+  font-size: 14px;
+  height: auto;
+}
+
+/* 支付方式 */
+.payment-group {
+  margin-bottom: 40px;
+}
+.payment-group label {
+  margin-bottom: 12px;
+}
+
+/* 支付选项容器 */
+.payment-option {
+  margin-bottom: 15px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 10px 15px;
+  /* 确保 Radio 按钮在未选中的 payment-option 中也能看到 */
+}
+.payment-option:hover {
+  border-color: #ccc;
+}
+
+/* DevUI Radio 样式定制 */
+.payment-option :deep(.devui-radio-list) {
+  display: block;
+}
+.payment-option :deep(.devui-radio) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.payment-option :deep(.devui-radio-input) {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #999;
+}
+.payment-option :deep(.devui-radio-input.checked) {
+  background-color: #000;
+  border-color: #000;
+}
+
+.payment-option :deep(.devui-radio-label) {
+  flex-grow: 1;
+  font-size: 14px;
+  font-weight: 500;
+  padding-left: 10px;
+}
+
+/* 银行卡图标组 */
+.card-icons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+/* 银行卡具体颜色 */
+.visa-icon { background-color: #1a1f71; content: "V"; }
+.master-icon { background-color: #ff5f00; content: "M"; }
+.amex-icon { background-color: #007bc1; content: "A"; }
+
+.card-input-placeholder {
+  height: 44px;
+  background-color: #f7f7f7;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin: 15px 0 0 0;
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+  font-size: 14px;
+  color: #999;
+}
+
+/* 底部文本和按钮 */
+.save-info-text {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 25px;
+}
+
+.start-trial-btn {
+  width: 100%;
+  height: 48px;
+  background-color: #000 !important;
+  color: #fff !important;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  border: none !important;
+}
+
+.terms-text {
+  font-size: 10px;
+  color: #888;
+  text-align: center;
+  line-height: 1.4;
+  max-width: 400px;
+  margin: 0 auto 15px;
+}
+
+.powered-by {
+  font-size: 10px;
+  color: #aaa;
+  text-align: center;
+}
+
+.stripe-link {
+  font-weight: bold;
+  color: #666;
+}
+
+::v-deep(.devui-radio__label) {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  img {
+    height: 16px;
+    text-align: center;
+    width: 24px;
+    margin-inline-end:8px;
+    border-radius: 2px;
+    max-width: 24px;
+  }
+  .wechart-icon {
+    width: 16px;
+    margin-right: 12px;
+  }
+}
+</style>