From fe641618e1fb27ca7d6934c6bc3b2c53144cc913 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=BF=9C?= <2970639877@qq.com>
Date: Mon, 23 Mar 2026 18:07:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/funding/fundDetail.ts         |   6 +
 src/api/modules/trade/historyTrade.ts         |   6 +
 src/assets/styles/global.scss                 |   1 +
 src/components/common/Form.vue                |   2 +-
 src/components/layout/Header.vue              |   2 +-
 src/components/layout/Sidebar.vue             | 120 ++++++----
 src/router/index.ts                           |  94 +++++++-
 src/views/account/accountDetail/index.vue     | 194 +++++++++++++++++
 src/views/account/archives/index.vue          | 206 ++++++++++++++++++
 src/views/account/archives/options.ts         |  14 ++
 src/views/funding/fundDetail/index.vue        | 128 +++++++++++
 src/views/funding/fundDetail/options.ts       |  55 +++++
 src/views/personalized/followRecord/index.vue |   5 +
 src/views/personalized/leadRecord/index.vue   |   5 +
 src/views/trade/historyTrade/index.vue        | 131 +++++++++++
 src/views/trade/historyTrade/options.ts       |  38 ++++
 src/views/trade/positionStat/index.vue        |  88 ++++++++
 src/views/trade/positionStat/options.ts       |  36 +++
 src/views/trade/tradeSoftware/index.vue       | 113 ++++++++++
 src/views/user/bindEmail.vue                  | 140 ++++++++++++
 src/views/user/bindPhone.vue                  | 187 ++++++++++++++++
 21 files changed, 1529 insertions(+), 42 deletions(-)
 create mode 100644 src/api/modules/funding/fundDetail.ts
 create mode 100644 src/api/modules/trade/historyTrade.ts
 create mode 100644 src/views/account/accountDetail/index.vue
 create mode 100644 src/views/account/archives/index.vue
 create mode 100644 src/views/account/archives/options.ts
 create mode 100644 src/views/funding/fundDetail/index.vue
 create mode 100644 src/views/funding/fundDetail/options.ts
 create mode 100644 src/views/personalized/followRecord/index.vue
 create mode 100644 src/views/personalized/leadRecord/index.vue
 create mode 100644 src/views/trade/historyTrade/index.vue
 create mode 100644 src/views/trade/historyTrade/options.ts
 create mode 100644 src/views/trade/positionStat/index.vue
 create mode 100644 src/views/trade/positionStat/options.ts
 create mode 100644 src/views/trade/tradeSoftware/index.vue
 create mode 100644 src/views/user/bindEmail.vue
 create mode 100644 src/views/user/bindPhone.vue

diff --git a/src/api/modules/funding/fundDetail.ts b/src/api/modules/funding/fundDetail.ts
new file mode 100644
index 0000000..bd83a59
--- /dev/null
+++ b/src/api/modules/funding/fundDetail.ts
@@ -0,0 +1,6 @@
+import { request } from '@/api';
+
+//获取资金明细列表
+export const getFundDetailListApi = (params: any) => {
+    return request.get('/user/FundFlowRecords', {...params})
+}
\ No newline at end of file
diff --git a/src/api/modules/trade/historyTrade.ts b/src/api/modules/trade/historyTrade.ts
new file mode 100644
index 0000000..22b7d43
--- /dev/null
+++ b/src/api/modules/trade/historyTrade.ts
@@ -0,0 +1,6 @@
+import { request } from '@/api';
+
+//获取历史交易列表
+export const getHistoryTradeListApi = (params: any) => {
+    return request.get('orderRecords/getList', {...params})
+}
\ No newline at end of file
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index bf65490..b3acf66 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -38,6 +38,7 @@ body,
         padding: 20px;
         overflow: auto;
         max-height: calc(1080px - 200px);
+        height: 100%;
       }
     }
   }
diff --git a/src/components/common/Form.vue b/src/components/common/Form.vue
index 426eec7..873bb77 100644
--- a/src/components/common/Form.vue
+++ b/src/components/common/Form.vue
@@ -78,7 +78,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import type { Component } from 'vue'
 
 interface FormItem {
-    type: 'input' | 'select' | 'number' | 'radio' | 'slot' | 'checkbox' | 'date' | 'switch' | 'edit' | 'password' | 'time'
+    type: 'input' | 'select' | 'number' | 'radio' | 'slot' | 'checkbox' | 'date' | 'switch' | 'edit' | 'password' | 'time' | 'upload'
     label: string
     prop: string
     placeholder?: string
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 6799f21..930991c 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -60,7 +60,7 @@ const handleChangePassword = () => {
 const handleLogout = () => {
     // 示例：退出登录逻辑
     const deviceNo = getStorage('device_no') as string
-    userStore.logout({ device_no: deviceNo })
+    userStore.logout({ device_no: String(deviceNo) })
 }
 
 // 处理菜单项点击
diff --git a/src/components/layout/Sidebar.vue b/src/components/layout/Sidebar.vue
index fa8f1dc..748f146 100644
--- a/src/components/layout/Sidebar.vue
+++ b/src/components/layout/Sidebar.vue
@@ -123,7 +123,19 @@ const staticMenuList = ref<ElMenuItem[]>(
                     label: '做市商管理',
                     path: '/account/market-maker', // index="3-3"
                     icon: ''
-                }
+                },
+                {
+                    id: 34,
+                    label: '档案管理',
+                    path: '/account/archives', // index="3-4"
+                    icon: ''
+                },
+                {
+                    id: 35,
+                    label: '账号管理',
+                    path: '/account/accountDetail', // index="3-5"
+                    icon: ''
+                },
             ]
         },
         // 交易管理（子菜单）
@@ -145,6 +157,24 @@ const staticMenuList = ref<ElMenuItem[]>(
                     path: '/trade/group', // index="4-2"
                     icon: ''
                 },
+                {
+                    id: 43,
+                    label: '持仓统计',
+                    path: '/trade/positionStat', // index="4-3"
+                    icon: ''
+                },
+                {
+                    id: 44,
+                    label: '历史交易',
+                    path: '/trade/historyTrade', // index="4-4"
+                    icon: ''
+                },
+                {
+                    id: 45,
+                    label: '交易软件',
+                    path: '/trade/tradeSoftware', // index="4-5"
+                    icon: ''
+                },
                 // {
                 //     id: 43,
                 //     label: '交易时间',
@@ -197,6 +227,12 @@ const staticMenuList = ref<ElMenuItem[]>(
                     path: '/funding/transferDetail', // index="6-5"
                     icon: ''
                 },
+                {
+                    id: 66,
+                    label: '资金明细',
+                    path: '/funding/fundDetail', // index="6-6"
+                    icon: ''
+                },
                 // {
                 //     id: 66,
                 //     label: '资金流水',
@@ -248,52 +284,62 @@ const staticMenuList = ref<ElMenuItem[]>(
 
 
          // 资金管理（子菜单）
-        {
-            id: 9,
-            label: '资金管理',
-            path: 'funding', // index="funding"
-            icon: 'GoodsFilled', // 对应 <GoodsFilled /> 图标
-            children: [
-                //存款/取款暂时没有
-                //资金明细
-                // 审核记录
-                // 提现记录
-                // 充值记录
-            ]
-        },
+        // {
+        //     id: 9,
+        //     label: '资金管理',
+        //     path: 'funding', // index="funding"
+        //     icon: 'GoodsFilled', // 对应 <GoodsFilled /> 图标
+        //     children: [
+        //         //存款/取款/审核记录/ 提现记录/ 充值记录暂时没有
+        //         //资金明细
+               
+        //     ]
+        // },
         // 交易统计（子菜单）
-        {
-            id: 10,
-            label: '交易统计',
-            path: 'trade', // index="trade"
-            icon: 'ChartBarFilled', // 对应 <ChartBarFilled /> 图标
-            children: [
-                // 持仓统计
-                //历史交易
-                //交易软件
-            ]
-        },
+        // {
+        //     id: 10,
+        //     label: '交易统计归交易管理',
+        //     path: 'trade', // index="trade"
+        //     icon: 'ChartBarFilled', // 对应 <ChartBarFilled /> 图标
+        //     children: [
+        //         // 持仓统计是辉哥
+        //         //历史交易
+        //         //交易软件
+        //     ]
+        // },
         // 账户管理（子菜单）
-        {
-            id: 11,
-            label: '账户管理',
-            path: 'account', // index="account"
-            icon: 'UserFilled', // 对应 <UserFilled /> 图标
-            children: [
-                // 档案管理
-                // 账户管理
-            ]
-        },
+        // {
+        //     id: 11,
+        //     label: '账户管理',
+        //     path: 'account', // index="account"
+        //     icon: 'UserFilled', // 对应 <UserFilled /> 图标
+        //     children: [
+        //         // 档案管理
+        //         // 账户管理
+        //     ]
+        // },
         // 个性化交易（子菜单）
         {
             id: 12,
             label: '个性化交易',
-            path: 'customTrade', // index="customTrade"
+            path: 'personalized', // index="personalized"
             icon: 'SettingFilled', // 对应 <SettingFilled /> 图标
             children: [
-                // 排行榜
+                // 排行榜放在了app中
                 // 跟单记录
+                {
+                    id: 121,
+                    label: '跟单记录',
+                    path: '/personalized/followRecord', // index="12-1"
+                    icon: ''
+                },
                 // 带单记录
+                {
+                    id: 122,
+                    label: '带单记录',
+                    path: '/personalized/leadRecord', // index="12-2"
+                    icon: ''
+                },
             ]
         },
         // 代理管理（子菜单）
diff --git a/src/router/index.ts b/src/router/index.ts
index d296003..fe44008 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -33,6 +33,18 @@ const routes = [
         name: 'ChangePassword',
         component: () => import('@/views/user/ChangePassword.vue'),
         meta: { requiresAuth: true, title: '修改密码' }
+      },
+      {
+        path: 'bind-email',
+        name: 'BindEmail',
+        component: () => import('@/views/user/bindEmail.vue'),
+        meta: { requiresAuth: true, title: '绑定邮箱' }
+      },
+      {
+        path: 'bind-phone',
+        name: 'BindPhone',
+        component: () => import('@/views/user/bindPhone.vue'),
+        meta: { requiresAuth: true, title: '绑定手机号' }
       }
     ]
   },
@@ -118,7 +130,23 @@ const routes = [
             meta: {
               title: '做市商管理', // 左侧菜单显示的标题
             }
-          }
+          },
+          {
+            path: 'archives',
+            name: 'Archives',
+            component: () => import('@/views/account/archives/index.vue'),
+            meta: {
+              title: '档案管理', // 左侧菜单显示的标题
+            }
+          },
+          {
+            path: 'accountDetail',
+            name: 'AccountDetail',
+            component: () => import('@/views/account/accountDetail/index.vue'),
+            meta: {
+              title: '账号管理', // 左侧菜单显示的标题
+            }
+          },
         ]
       },
       //交易管理
@@ -152,7 +180,31 @@ const routes = [
           //   meta: {
           //     title: '交易时间', // 左侧菜单显示的标题
           //   }
-          // }
+          // },
+          {
+            path: 'positionStat',
+            name: 'PositionStat',
+            component: () => import('@/views/trade/positionStat/index.vue'),
+            meta: {
+              title: '持仓统计', // 左侧菜单显示的标题
+            }
+          },
+          {
+            path: 'historyTrade',
+            name: 'HistoryTrade',
+            component: () => import('@/views/trade/historyTrade/index.vue'),
+            meta: {
+              title: '历史交易', // 左侧菜单显示的标题
+            }
+          },
+          {
+            path: 'tradeSoftware',
+            name: 'TradeSoftware',
+            component: () => import('@/views/trade/tradeSoftware/index.vue'),
+            meta: {
+              title: '交易软件', // 左侧菜单显示的标题
+            }
+          },
         ]
       },
       //公告管理
@@ -236,6 +288,14 @@ const routes = [
               title: '存款渠道列表', // 左侧菜单显示的标题
             }
           },
+          {
+            path: 'fundDetail',
+            name: 'FundDetail',
+            component: () => import('@/views/funding/fundDetail/index.vue'),
+            meta: {
+              title: '资金明细', // 左侧菜单显示的标题
+            }
+          },
         ]
       },
       {
@@ -245,7 +305,35 @@ const routes = [
           title: '风控管理', // 左侧菜单显示的标题
         },
         component: () => import('@/views/risk/index.vue'),
-      }
+      },
+      // 个性化交易
+      {
+        path: 'personalized',
+        name: 'Personalized',
+        meta: {
+          title: '个性化交易', // 左侧菜单显示的标题
+        },
+        children: [
+        //  跟单记录
+        {
+          path: 'followRecord',
+          name: 'FollowRecord',
+          component: () => import('@/views/personalized/followRecord/index.vue'),
+          meta: {
+            title: '跟单记录', // 左侧菜单显示的标题
+          }
+        },
+        //  带单记录
+        {
+          path: 'leadRecord',
+          name: 'LeadRecord',
+          component: () => import('@/views/personalized/leadRecord/index.vue'),
+          meta: {
+            title: '带单记录', // 左侧菜单显示的标题
+          }
+        },
+        ]
+      },
     ]
   },
   {
diff --git a/src/views/account/accountDetail/index.vue b/src/views/account/accountDetail/index.vue
new file mode 100644
index 0000000..85dffcc
--- /dev/null
+++ b/src/views/account/accountDetail/index.vue
@@ -0,0 +1,194 @@
+<template>
+    <div class="account-detail">
+        <h4>账户信息</h4>
+        <el-card class="account-info">
+            <el-icon>
+                <UserFilled />
+            </el-icon>
+            <div class="item">
+                <div class="item-content">
+                    <div class="item-label" v-if="!isChangeName">
+                        <span>账号名称:</span>
+                        <span>{{ accountName }}</span>
+                    </div>
+                    <div class="item-changeName" v-else>
+                        <span>账号名称:</span>
+                        <el-input v-model="newAccountName" placeholder="请输入新账号名称" size="small" ref="inputRef" @blur="handleSave" @keyup.enter="handleSave"/>
+                    </div>
+                    <el-button type="default" @click="changeName" size="small">修改名称</el-button>
+                </div>
+                <span>用户最后登录时间:2026.02.02 07:00:00</span>
+            </div>
+        </el-card>
+        <div class="security">
+            <h4>安全信息</h4>
+            <div class="card-group">
+                <el-card>
+                    <span>邮箱</span>
+                    <span>已绑定邮箱:{{ userInfo?.email || '未绑定' }}</span>
+                    <el-button :type="accountStatus === true ? 'primary' : 'danger'" @click="handleEmail">{{ accountStatus === true ? '已验证' :
+                        '未验证' }}</el-button>
+                </el-card>
+                <el-card>
+                    <span>手机号</span>
+                    <span>已绑定手机号:{{ userInfo?.phone || '未绑定' }}</span>
+                    <el-button :type="phoneStatus === true ? 'primary' : 'danger'" @click="handlePhone">{{ phoneStatus === true ? '已绑定' :
+                        '未绑定' }}</el-button>
+                </el-card>
+                <el-card>
+                    <span>密码</span>
+                    <span>************</span>
+                    <el-button type="primary" @click="changePassword">修改</el-button>
+                </el-card>
+                <el-card>
+                    <span>默认语言</span>
+                    <span>选择您的语言偏好</span>
+                    <LanguageSelect v-model="languageStore.lang" @change="languageStore.changeLang" />
+                </el-card>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { UserFilled } from '@element-plus/icons-vue'
+
+//组件
+import LanguageSelect from '@/components/LanguageSelect/index.vue'
+
+// 导入Pinia状态
+import { useLanguageStore } from '@/stores/modules/language'
+import { getStorage, setStorage } from '@/utils/storage'
+
+//接口
+import { editAgentNameApi } from '@/api/modules/agent'
+
+// 语言选择配置
+const router = useRouter()
+const languageStore = useLanguageStore()
+
+// 账户状态
+const accountStatus = ref(true)
+// 手机号状态
+const phoneStatus = ref(true)
+
+/**
+ * @description 账户信息数据
+ */
+
+// 从本地存储获取账户名称
+const userInfo = getStorage<any>('userInfo')
+const accountName = ref(userInfo?.username || '')
+const newAccountName = ref(accountName.value)
+//判断是否修改名称
+const isChangeName = ref(false)
+// 输入框引用
+const inputRef = ref<HTMLInputElement>()
+
+/**
+ * @description 绑定邮箱
+ */
+const handleEmail = ()=>{
+    accountStatus.value === false ? router.push('/user/bind-email') : ''
+}
+   
+/**
+ * @description 绑定手机号
+ */
+const handlePhone = ()=>{
+    phoneStatus.value === false ? router.push('/user/bind-phone') : ''
+}
+
+/**
+ * @description 修改密码
+ */
+const changePassword = () => {
+    router.push('/user/change-password')
+}
+
+
+// 修改用户名
+const changeName = async () => {
+    isChangeName.value = true
+    // 等待 DOM 更新后自动聚焦输入框
+    await nextTick()
+    inputRef.value?.focus()
+}
+
+//修改用户名提交
+const handleSave = async () => {
+    if (newAccountName.value.trim()) {
+        await editAgentNameApi({
+            account_id: userInfo?.id || '',
+            account_name: newAccountName.value
+        })
+        accountName.value = newAccountName.value.trim()
+        setStorage('userInfo', {
+            ...userInfo,
+            username: accountName.value
+        })
+    } else {
+        newAccountName.value = accountName.value // 若为空则恢复原值
+    }
+    isChangeName.value = false
+}
+</script>
+<style scoped lang="scss">
+.account-detail {
+    h4 {
+        margin-bottom: 10px;
+        font-weight: 400;
+    }
+
+    .account-info {
+        box-shadow: none;
+
+        :deep(.el-card__body) {
+            display: flex;
+            padding: 10px;
+
+            .el-icon {
+                font-size: 48px;
+            }
+        }
+
+        .item {
+            .item-content {
+                display: flex;
+                align-items: center;
+
+                .item-changeName {
+                    display: flex;
+
+                    span {
+                        width: 70px;
+                    }
+
+                    .el-input {
+                        margin-right: 10px;
+                        width: 140px;
+                    }
+                }
+            }
+        }
+    }
+
+    .security {
+        margin-top: 20px;
+
+        .card-group {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+
+            .el-card {
+                :deep(.el-card__body) {
+                    padding: 20px 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/account/archives/index.vue b/src/views/account/archives/index.vue
new file mode 100644
index 0000000..7480538
--- /dev/null
+++ b/src/views/account/archives/index.vue
@@ -0,0 +1,206 @@
+<template>
+    <div class="archives">
+        <div class="bar">
+            <h4>档案管理</h4>
+            <span :class="['status', isActive === true ? 'active' : '']">未认证</span>
+            <span class="info">资料审核包含身份信息/联络信息/实名认证/合规文件，需要管理员审核</span>
+        </div>
+        <div class="content">
+            <div class="tab">
+                <div class="tab-item">
+                    <el-button :type="tabType === 'identity' ? 'primary' : 'default'" @click="tabType = 'identity'">身份信息</el-button>
+                </div>
+                <div class="tab-item">
+                    <el-button :type="tabType === 'contact' ? 'primary' : 'default'" @click="tabType = 'contact'">联系信息</el-button>
+                </div>
+            </div>
+            <article>
+                <p class="warn">
+                    <el-icon>
+                        <WarnTriangleFilled />
+                    </el-icon>
+                    请填写正确的个人身份信息，以确保所有功能正常使用
+                </p>
+                <ArchivesForm ref="archivesFormRef" :form-data="archivesForm" :form-rules="archivesFormRules"
+                    :form-items="formOptions" :options-map="archivesFormOptionsMap" :row-gutter="rowGutter"
+                    :col-span="colSpan">
+                    <template #upload>
+                        <div class="upload">
+                            <div>
+                                <p class="warn">请上传证件正面</p>
+                                <el-upload class="avatar-uploader" action="" :show-file-list="true"
+                                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                                    <el-icon v-else class="avatar-uploader-icon">
+                                        <Plus />
+                                    </el-icon>
+                                </el-upload>
+                            </div>
+                            <div>
+                                <p class="warn">请上传证件反面</p>
+                                <el-upload class="avatar-uploader" action="" :show-file-list="true"
+                                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                                    <el-icon v-else class="avatar-uploader-icon">
+                                        <Plus />
+                                    </el-icon>
+                                </el-upload>
+                            </div>
+                        </div>
+                    </template>
+                </ArchivesForm>
+            </article>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { UploadProps } from 'element-plus'
+import { WarnTriangleFilled, Plus } from '@element-plus/icons-vue'
+
+//组件
+import ArchivesForm from '@/components/common/Form.vue'
+
+// 表单配置
+import { identityFormItems, contactFormItems } from './options'
+import { ref } from 'vue'
+// 判断是否认证
+const isActive = ref(false)
+// 判断信息类型
+const tabType = ref('identity')
+
+/**
+ * @description: 档案管理表单
+ */
+const archivesForm = ref({
+    nationality: 'CN',
+    idType: 'ID',
+    idNumber: '',
+    phone: '',
+    email: '',
+    address: '',
+})
+const archivesFormRules = ref()
+const archivesFormOptionsMap = ref({
+    nationality: [
+        { label: '中国', value: 'CN' },
+        { label: '美国', value: 'US' },
+        { label: '英国', value: 'GB' },
+        { label: '法国', value: 'FR' },
+    ],
+    idType: [
+        { label: '身份证', value: 'ID' },
+        { label: '护照', value: 'PASSPORT' },
+        { label: '其他', value: 'OTHER' },
+    ]
+})
+const formOptions = computed(() => tabType.value === 'identity' ? identityFormItems : contactFormItems)
+const rowGutter = ref(20)
+const colSpan = ref(12)
+
+
+const imageUrl = ref('')
+
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+    response,
+    uploadFile
+) => {
+    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+}
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+    if (rawFile.type !== 'image/jpeg') {
+        ElMessage.error('Avatar picture must be JPG format!')
+        return false
+    } else if (rawFile.size / 1024 / 1024 > 2) {
+        ElMessage.error('Avatar picture size can not exceed 2MB!')
+        return false
+    }
+    return true
+}
+</script>
+
+<style scoped lang="scss">
+.archives {
+    height: 100%;
+
+    .bar {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+
+        .status {
+            background: #f56c6c;
+            border-radius: 5px;
+            padding: 4px;
+            margin: 0 10px;
+        }
+
+        .active {
+            background: var(--el-color-primary);
+        }
+
+        .info {
+            background: var(--el-color-primary-light-5);
+            padding: 4px;
+            border-radius: 5px;
+        }
+    }
+
+    .content {
+        display: flex;
+        gap: 20px;
+        height: calc(100% - 55px);
+
+        .tab {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        article {
+            flex: 1;
+            height: 100%;
+            border: 1px solid #e4e7ed;
+            border-radius: 5px;
+            padding: 20px;
+
+            .warn {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                margin-bottom: 10px;
+
+                .el-icon {
+                    font-size: 20px;
+                    color: #f56c6c;
+                }
+            }
+
+            .el-form {
+                .upload {
+                    display: flex;
+                    gap: 20px;
+
+                    .avatar-uploader {
+                        width: 178px;
+                        height: 178px;
+                        border: 1px dashed var(--el-border-color);
+                        border-radius: 6px;
+
+                        :deep(.el-upload) {
+                            width: 100%;
+                            height: 100%;
+
+                            .el-icon {
+                                font-size: 20px;
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+}
+</style>
diff --git a/src/views/account/archives/options.ts b/src/views/account/archives/options.ts
new file mode 100644
index 0000000..f80122c
--- /dev/null
+++ b/src/views/account/archives/options.ts
@@ -0,0 +1,14 @@
+export const identityFormItems = [
+    // 国籍
+    { prop: 'nationality', label: '国籍', type: 'select' as const ,width: "200px"},
+    // 证件类型
+    { prop: 'idType', label: '证件类型', type: 'select' as const ,width: "200px"},
+    // 上传证件
+    { prop: 'idCard', slotName: 'upload', label: '上传证件' ,type: 'upload' as const},
+   ]
+
+export const contactFormItems = [
+    // 联系电话
+    { prop: 'phone', label: '联系电话', type: 'input' as const ,width: "200px"},
+]
+  
diff --git a/src/views/funding/fundDetail/index.vue b/src/views/funding/fundDetail/index.vue
new file mode 100644
index 0000000..800de92
--- /dev/null
+++ b/src/views/funding/fundDetail/index.vue
@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <!-- 搜索 -->
+        <FundDetailSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
+            @reset="handleReset">
+            <template #button="{ form }">
+                <el-button type="primary" @click="handleExport()">
+                    导出
+                </el-button>
+            </template>
+        </FundDetailSearch>
+        <!-- 表格 -->
+        <FundDetailTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" />
+        <!-- 分页 -->
+        <FundDetailPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
+            @pagination-change="handlePaginationChange" />
+    </div>
+</template>
+
+<script setup lang="ts">
+// 组件
+import FundDetailSearch from '@/components/common/Search.vue'
+import FundDetailTable from '@/components/common/Table.vue'
+import FundDetailPagination from '@/components/common/Pagination.vue'
+// 配置以及表单验证
+import { search, tableColumns } from './options'
+// 接口
+import { getFundDetailListApi } from '@/api/modules/funding/fundDetail'
+
+// 导出表格
+import {exportToExcel} from '@/utils/exportToExcel'
+/**
+ * @description: 定义搜索数据
+ */
+const searchOptions = ref(search)
+const searchForm = ref({
+    username: '',
+    subAccountId: '',
+    startTime: '',
+    endTime: '',
+})
+/**
+ * @description: 定义表格数据
+ */
+const tableTree = ref([])
+const tableColumnsOptions = ref(tableColumns)
+/**
+ * @description: 定义分页数据
+ */
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+/**
+ * @description: 定义公共请求数据方法
+ */
+//获取资金明细列表
+const getFundDetailList = async () => {
+    const params = {
+        page: currentPage.value,
+        page_size: pageSize.value,
+        start_time: searchForm.value.startTime.length > 0 ? `${searchForm.value.startTime} 0:00:00` : '2026-01-01 0:00:00',
+        end_time: searchForm.value.endTime.length > 0 ? `${searchForm.value.endTime} 23:59:59` : '2026-03-15 23:59:59',
+        user_name: searchForm.value.username,
+        account_id: searchForm.value.subAccountId,
+    }
+    // 调用接口获取数据
+    const data: any = await getFundDetailListApi(params)
+    console.log(data)
+    tableTree.value = data.data.map((item: any) => ({
+        // 用户名
+        username: item.user.username,
+        //单号
+        orderNo: item.trade_id,
+        //操作类型
+        type: item.enum_dic.value,
+        //原有金额
+        originalAmount: item.amount,
+        //余额变动
+        balanceChange: item.balance,
+        //创建时间
+        createTime: item.created_at,
+        //钱包类型
+        walletType: item.wallet_type === "1" ? '主钱包' : '子钱包',
+    }))
+    //分页数据
+    total.value = data.total
+    currentPage.value = data.current_page
+    pageSize.value = Number(data.per_page)
+}
+
+/**
+ * @description: 页面加载完成需要请求的数据
+ */
+onMounted(() => {
+    getFundDetailList()
+})
+/**
+ * @description: 定义搜索方法
+ */
+const handleSearch = () => {
+    getFundDetailList()
+}
+const handleReset = () => {
+    searchForm.value = {
+        username: '',
+        subAccountId: '',
+        startTime: '',
+        endTime: '',
+    }
+    getFundDetailList()
+}
+const handleExport = () => {
+    exportToExcel({
+        tableData: tableTree.value,
+        columns: tableColumnsOptions.value,
+        title: '导出资金明细',
+        defaultFileNamePrefix: '资金明细',
+    })
+}
+/**
+ * @description: 定义分页方法
+ */
+const handlePaginationChange = (page: any) => {
+    currentPage.value = page.currentPage
+    getFundDetailList()
+}
+</script>
diff --git a/src/views/funding/fundDetail/options.ts b/src/views/funding/fundDetail/options.ts
new file mode 100644
index 0000000..da227c6
--- /dev/null
+++ b/src/views/funding/fundDetail/options.ts
@@ -0,0 +1,55 @@
+/**
+ * @description: 搜索配置
+ */
+export const search = [
+    //单号
+    // { prop: 'orderNo', label: '单号', type: 'input' as const, placeholder: '请输入流水单号', width: '140px' },
+    //用户名
+    { prop: 'username', label: '用户名', type: 'input' as const, placeholder: '请输入用户名', width: '140px' },
+    // 子账号
+    { prop: 'subAccountId', label: '子账号ID', type: 'input' as const, placeholder: '请输入子账号ID', width: '140px' },
+    //操作类型
+    // { prop: 'type', label: '操作类型', type: 'select' as const, placeholder: '请选择操作类型', width: '140px', options: [
+    //     {label:"充值",value:"1"},
+    //     {label:"提现",value:"2"},
+    // ] },
+    //钱包
+    // { prop: 'wallet', label: '钱包', type: 'select' as const, placeholder: '请选择钱包', width: '140px', options: [
+    //     {label:"主钱包",value:"1"},
+    //     {label:"子钱包",value:"2"},
+    // ] },
+    //开始时间
+    {
+        prop: 'startTime', label: '开始时间', type: 'date' as const, dateType: 'date' as const, // 时间范围选择器
+        valueFormat: 'YYYY-MM-DD', placeholder: '请选择开始时间', width: '150px'
+    },
+    //结束时间
+    {
+        prop: 'endTime', label: '结束时间', type: 'date' as const, dateType: 'date' as const, // 时间范围选择器
+        valueFormat: 'YYYY-MM-DD', placeholder: '请选择结束时间', width: '150px'
+    },
+
+
+]
+export const tableColumns = [
+    // 用户名
+    { prop: 'username', label: '用户名' },
+    //单号
+    { prop: 'orderNo', label: '单号' },
+    //操作类型
+    { prop: 'type', label: '操作类型' },
+    //资金流向
+    // { prop: 'fundDirection', label: '资金流向' },
+    //原有金额
+    { prop: 'originalAmount', label: '原有金额' },
+    //余额变动
+    { prop: 'balanceChange', label: '余额变动' },
+    //现有余额
+    // { prop: 'currentBalance', label: '现有余额' },
+    //状态
+    // { prop: 'status', label: '状态' },
+    //创建时间
+    { prop: 'createTime', label: '创建时间' },
+    //钱包类型
+    { prop: 'walletType', label: '钱包类型' },
+]
\ No newline at end of file
diff --git a/src/views/personalized/followRecord/index.vue b/src/views/personalized/followRecord/index.vue
new file mode 100644
index 0000000..c3aa100
--- /dev/null
+++ b/src/views/personalized/followRecord/index.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        跟单记录
+    </div>
+</template>
diff --git a/src/views/personalized/leadRecord/index.vue b/src/views/personalized/leadRecord/index.vue
new file mode 100644
index 0000000..c00d6d2
--- /dev/null
+++ b/src/views/personalized/leadRecord/index.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        带单记录
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/views/trade/historyTrade/index.vue b/src/views/trade/historyTrade/index.vue
new file mode 100644
index 0000000..a18ccf5
--- /dev/null
+++ b/src/views/trade/historyTrade/index.vue
@@ -0,0 +1,131 @@
+<template>
+    <div class="history-trade">
+        <HistoryTradeSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
+            @reset="handleReset">
+
+            <template #button="{ form }">
+                <el-button type="primary" @click="handleExport()">
+                    导出
+                </el-button>
+            </template>
+        </HistoryTradeSearch>
+        <!-- 表格 -->
+        <HistoryTradeTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" />
+        <!-- 分页 -->
+        <HistoryTradePagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
+            @pagination-change="handlePaginationChange" />
+    </div>
+</template>
+
+<script setup lang="ts">
+// 组件
+import HistoryTradeSearch from '@/components/common/Search.vue'
+import HistoryTradeTable from '@/components/common/Table.vue'
+import HistoryTradePagination from '@/components/common/Pagination.vue'
+// 配置以及表单验证
+import { search, tableColumns } from './options'
+// 接口
+import { getHistoryTradeListApi } from '@/api/modules/trade/historyTrade'
+
+// 调用接口
+// 导出表格
+import { exportToExcel } from '@/utils/exportToExcel'
+/**
+ * @description: 定义搜索数据
+ */
+const searchOptions = ref(search)
+const searchForm = ref({
+    username: '',
+    orderNo: '',
+    subAccountId: '',
+    tradeType: '',
+    startTime: '',
+    endTime: '',
+})
+/**
+ * @description: 定义表格数据
+ */
+const tableTree = ref([])
+const tableColumnsOptions = ref(tableColumns)
+/**
+ * @description: 定义分页数据
+ */
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+/**
+ * @description: 定义公共请求数据方法
+ */
+const getHistoryTradeList = async () => {
+    const params = {
+        page: currentPage.value,
+        page_size: pageSize.value,
+        user_name: searchForm.value.username,
+        account_id: searchForm.value.subAccountId,
+        order_no: searchForm.value.orderNo,
+        type: searchForm.value.tradeType,
+        start_time: searchForm.value.startTime.length > 0 ? `${searchForm.value.startTime} 0:00:00` : '2026-01-01 0:00:00',
+        end_time: searchForm.value.endTime.length > 0 ? `${searchForm.value.endTime} 23:59:59` : '2026-03-01 23:59:59',
+    }
+    const data: any = await getHistoryTradeListApi(params)
+    tableTree.value = data.data.map((item: any) => ({
+        orderNo: item.order_id,
+        tradeType: item.type === '1' ? '买入' : '卖出',
+        amount: item.amount,
+        tradeQty: item.num,
+        tradeTime: item.created_at,
+        floatProfit: '后续添加'
+    }))
+
+    //分页数据
+    total.value = data.total
+    currentPage.value = data.current_page
+    pageSize.value = Number(data.per_page)
+}
+/**
+ * @description: 页面加载完成需要请求的数据
+ */
+onMounted(() => {
+    getHistoryTradeList()
+})
+
+/**
+ * @description: 定义搜索方法
+ */
+const handleSearch = () => {
+    getHistoryTradeList()
+}
+/**
+ * @description: 定义重置方法
+ */
+const handleReset = () => {
+    searchForm.value = {
+        username: '',
+        orderNo: '',
+        subAccountId: '',
+        tradeType: '',
+        startTime: '',
+        endTime: '',
+    }
+    getHistoryTradeList()
+}
+/**
+ * @description: 定义导出方法
+ */
+const handleExport = () => {
+    exportToExcel({
+        tableData: tableTree.value,
+        columns: tableColumnsOptions.value,
+        title: '导出交易记录',
+        defaultFileNamePrefix: '交易记录',
+    })
+}
+/**
+ * @description: 定义分页方法
+ */
+const handlePaginationChange = (page: any) => {
+    currentPage.value = page.currentPage
+    getHistoryTradeList()
+}
+</script>
diff --git a/src/views/trade/historyTrade/options.ts b/src/views/trade/historyTrade/options.ts
new file mode 100644
index 0000000..7521aab
--- /dev/null
+++ b/src/views/trade/historyTrade/options.ts
@@ -0,0 +1,38 @@
+export const search = [
+    // 用户名
+    { prop: 'username', label: '用户名', type: 'input' as const, placeholder: '请输入用户名',width: '150px' },
+    // 订单号
+    { prop: 'orderNo', label: '订单号', type: 'input' as const, placeholder: '请输入订单号',width: '150px' },
+      // 交易账户ID
+    { prop: 'subAccountId', label: '交易账户ID', type: 'input' as const, placeholder: '请输入交易账户ID',width: '150px' },
+    // 交易类型
+    { prop: 'tradeType', label: '交易类型', type: 'select' as const, placeholder: '请选择交易类型',width: '140px', options: [
+        { label: '买入', value: '1' },
+        { label: '卖出', value: '2' },
+    ] },
+    //开始时间
+    {
+        prop: 'startTime', label: '开始时间', type: 'date' as const, dateType: 'date' as const, // 时间范围选择器
+        valueFormat: 'YYYY-MM-DD', placeholder: '请选择开始时间', width: '150px'
+    },
+    //结束时间
+    {
+        prop: 'endTime', label: '结束时间', type: 'date' as const, dateType: 'date' as const, // 时间范围选择器
+        valueFormat: 'YYYY-MM-DD', placeholder: '请选择结束时间', width: '150px'
+    },
+]
+
+export const tableColumns = [
+    // 订单号
+    { prop: 'orderNo', label: '订单号' },
+    // 操作类型
+    { prop: 'tradeType', label: '操作类型' },
+    // 金额
+    { prop: 'amount', label: '金额' },
+    // 交易数量
+    { prop: 'tradeQty', label: '交易数量' },
+    // 交易时间
+    { prop: 'tradeTime', label: '交易时间' },
+    // 浮动盈亏
+    { prop: 'floatProfit', label: '浮动盈亏' },
+]
\ No newline at end of file
diff --git a/src/views/trade/positionStat/index.vue b/src/views/trade/positionStat/index.vue
new file mode 100644
index 0000000..ff9fd2c
--- /dev/null
+++ b/src/views/trade/positionStat/index.vue
@@ -0,0 +1,88 @@
+<template>
+   <div class="position-stat">
+     <!-- 搜索 -->
+       <PositionStatSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
+            @reset="handleReset">
+            <template #button="{ form }">
+                <el-button type="primary" @click="handleExport()">
+                    导出
+                </el-button>
+            </template>
+        </PositionStatSearch>
+    <!-- 表格 -->
+    <PositionStatTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" />
+
+    <!-- 分页 -->
+     <PositionStatPagination :current-page="currentPage" :page-size="pageSize" :total="total" @change="handleChange" />
+   </div>
+</template>
+
+<script setup lang="ts">
+// 组件
+import PositionStatSearch from '@/components/common/Search.vue'
+import PositionStatTable from '@/components/common/Table.vue'
+import PositionStatPagination from '@/components/common/Pagination.vue'
+// 配置以及表单验证
+import { search, tableColumns } from './options'
+
+// 接口
+
+
+// 导出表格
+import {exportToExcel} from '@/utils/exportToExcel'
+/**
+ * @description: 定义搜索数据
+ */
+const searchOptions = ref(search)
+const searchForm = ref({
+    orderNo: '',
+    tradeType: '',
+    account: '',
+    startTime: '',
+    endTime: '',
+})
+/**
+ * @description: 定义表格数据
+ */
+const tableTree = ref([])
+const tableColumnsOptions = ref(tableColumns)
+/**
+ * @description: 定义分页数据
+ */
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+/**
+ * @description: 定义公共数据处理方法
+ */
+/**
+ * @description: 定义公共请求数据方法
+ */
+/**
+ * @description: 页面加载完成需要请求的数据
+ */
+/**
+ * @description: 定义搜索方法
+ */
+const handleSearch = async () => {
+   console.log("搜索");
+   
+}
+const handleReset = () => {
+   console.log('重置搜索')
+}
+const handleExport = () => {
+    exportToExcel({
+        tableData: tableTree.value,
+        columns: tableColumnsOptions.value,
+        title: '导出资金明细',
+        defaultFileNamePrefix: '资金明细',
+    })
+}
+/**
+ * @description: 定义分页方法
+ */
+const handleChange = (page: {currentPage: number, size: number})  => {
+    currentPage.value = page.currentPage
+}
+</script>
diff --git a/src/views/trade/positionStat/options.ts b/src/views/trade/positionStat/options.ts
new file mode 100644
index 0000000..2464a50
--- /dev/null
+++ b/src/views/trade/positionStat/options.ts
@@ -0,0 +1,36 @@
+export const search = [
+    // 订单号
+    { prop: 'orderNo', label: '订单号', type: 'input' as const, placeholder: '请输入订单号',width: '200px' },
+    // 交易类型
+    { prop: 'tradeType', label: '交易类型', type: 'select' as const, placeholder: '请选择交易类型',width: '150px', options: [
+        { label: '买入', value: '1' },
+        { label: '卖出', value: '2' },
+    ] },
+    //账号
+    { prop: 'account', label: '账号', type: 'select' as const, placeholder: '请选择账号',width: '150px' },
+    //开始时间
+    {
+        prop: 'startTime', label: '开始时间', type: 'date' as const, dateType: 'date' as const, // 时间范围选择器
+        valueFormat: 'YYYY-MM-DD', placeholder: '请选择开始时间', width: '150px'
+    },
+    //结束时间
+    {
+        prop: 'endTime', label: '结束时间', type: 'date' as const, dateType: 'date' as const, // 时间范围选择器
+        valueFormat: 'YYYY-MM-DD', placeholder: '请选择结束时间', width: '150px'
+    },
+]
+
+export const tableColumns = [
+    // 订单号
+    { prop: 'orderNo', label: '订单号' },
+    // 操作类型
+    { prop: 'tradeType', label: '操作类型' },
+    // 金额
+    { prop: 'amount', label: '金额' },
+    // 交易数量
+    { prop: 'tradeQty', label: '交易数量' },
+    // 交易时间
+    { prop: 'tradeTime', label: '交易时间' },
+    // 浮动盈亏
+    { prop: 'floatProfit', label: '浮动盈亏' },
+]
\ No newline at end of file
diff --git a/src/views/trade/tradeSoftware/index.vue b/src/views/trade/tradeSoftware/index.vue
new file mode 100644
index 0000000..4a93896
--- /dev/null
+++ b/src/views/trade/tradeSoftware/index.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="trade-software">
+        <el-card>
+            <div class="left">
+                <el-icon>
+                    <Monitor />
+                </el-icon>
+                <span class="title">PC端</span>
+                <el-icon class="download">
+                    <Bottom />
+                </el-icon>
+            </div>
+            <div class="right">
+                <span class="text">系统要求:适用于windows 2008/7/8/10操作系统，网络速度为56kbps或更高</span>
+            </div>
+        </el-card>
+        <el-card>
+            <div class="left">
+                <el-icon>
+                    <svg t="1774244659320" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="2548" width="200" height="200">
+                        <path
+                            d="M839.562 344.72c-30.082 0-54.476 24.771-54.476 55.326l0 216.209c0 30.558 24.393 55.328 54.476 55.328 30.087 0 54.476-24.771 54.476-55.328l0-216.209c0.001-30.555-24.387-55.326-54.476-55.326zM182.482 344.72c-30.085 0-54.476 24.771-54.476 55.326l0 216.209c0 30.558 24.391 55.328 54.476 55.328s54.476-24.771 54.476-55.328l0-216.209c0-30.555-24.391-55.326-54.476-55.326zM269.74 346.395l0 395.014c0 23.462 19.02 42.481 42.483 42.481l48.533 0 0 120.293c0 30.558 24.391 55.328 54.476 55.328 30.087 0 54.478-24.771 54.478-55.328l0-120.294 84.786 0 0 120.293c0 30.558 24.393 55.328 54.476 55.328 30.087 0 54.481-24.771 54.481-55.328l0-120.293 48.528 0c23.467 0 42.485-19.018 42.485-42.481l0-395.013-484.725 0zM625.92 141.706l44.777-64.999c2.657-3.861 1.997-8.932-1.478-11.326-3.475-2.392-8.447-1.204-11.104 2.659l-46.512 67.518c-30.65-12.075-64.707-18.805-100.581-18.805-35.874 0-69.929 6.729-100.579 18.805l-46.512-67.518c-2.659-3.863-7.631-5.05-11.106-2.659-3.475 2.395-4.134 7.466-1.476 11.326l44.777 64.999c-71.188 33.117-121.113 96.042-127.467 169.487l484.727 0c-6.355-73.445-56.28-136.37-127.466-169.487zM408.772 244.144c-14.811 0-26.819-12.005-26.819-26.819 0-14.811 12.007-26.819 26.819-26.819 14.813 0 26.819 12.007 26.819 26.819 0 14.813-12.005 26.819-26.819 26.819zM616.625 244.144c-14.811 0-26.816-12.005-26.816-26.819 0-14.811 12.004-26.819 26.816-26.819 14.816 0 26.821 12.007 26.821 26.819 0 14.813-12.004 26.819-26.821 26.819z"
+                            fill="#272636" p-id="2549"></path>
+                    </svg>
+                </el-icon>
+                <span class="title">Android APK</span>
+                <el-icon class="download">
+                    <Bottom />
+                </el-icon>
+            </div>
+            <div class="right">
+                <span class="text">下载说明:下载后可以通过手机安装APK</span>
+            </div>
+        </el-card>
+        <el-card>
+            <div class="left">
+                <el-icon>
+                    <svg t="1774244690948" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="3750" width="200" height="200">
+                        <path
+                            d="M836.608 675.84q41.984 59.392 96.256 76.8-23.552 72.704-74.752 151.552-78.848 118.784-155.648 118.784-28.672 0-84.992-19.456-52.224-19.456-91.136-19.456t-86.016 20.48q-49.152 19.456-80.896 19.456-92.16 0-181.248-156.672-89.088-154.624-89.088-304.128 0-138.24 67.584-226.304 69.632-88.064 172.032-88.064 22.528 0 50.176 5.632t57.344 20.992q31.744 17.408 52.224 24.064t31.744 6.656q13.312 0 40.96-6.144t55.296-22.528q29.696-16.384 51.2-24.576t44.032-8.192q71.68 0 129.024 38.912 30.72 20.48 62.464 60.416-47.104 40.96-68.608 71.68-39.936 57.344-39.936 124.928 0 74.752 41.984 135.168z m-205.824-478.208q-35.84 33.792-65.536 44.032-10.24 3.072-26.112 5.632t-36.352 4.608q1.024-90.112 47.104-155.648T701.44 6.144q2.048 10.24 3.072 14.336v11.264q0 36.864-17.408 82.944-18.432 45.056-56.32 82.944z"
+                            fill="#272636" p-id="3751"></path>
+                    </svg>
+                </el-icon>
+                <span class="title">IOS</span>
+                <el-icon class="download">
+                    <Bottom />
+                </el-icon>
+            </div>
+            <div class="right">
+                <span class="text">下载说明:iPhone和iPad用户可以通过 Apple App Store搜索InTrade安装</span>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Monitor, Bottom } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+.trade-software {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .el-card {
+        :deep(.el-card__body) {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .left {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+
+            .title {
+                font-weight: 500;
+            }
+        }
+
+        .right {
+            .text {
+                font-size: 14px;
+            }
+        }
+
+        .left,
+        .right {
+            .el-icon{
+                font-size: 30px;
+            }
+            .download {
+                font-size: 20px;
+                cursor: pointer;
+
+                &:before {
+                    content: "";
+                    display: block;
+                    height: 2px;
+                    width: 16px;
+                    background: var(--el-text-color-primary);
+                    position: absolute;
+                    bottom: 0;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/user/bindEmail.vue b/src/views/user/bindEmail.vue
new file mode 100644
index 0000000..6cfd65e
--- /dev/null
+++ b/src/views/user/bindEmail.vue
@@ -0,0 +1,140 @@
+<template>
+    <div class="user-card">
+        <UserHeader />
+        <UserText :user-text="userText" @back="handleBack" />
+        <el-form class="user-form" ref="bindEmailFormRef" :model="bindEmailForm" :rules="bindEmailRules">
+            <el-form-item prop="email">
+                <el-input v-model="bindEmailForm.email" placeholder="请输入邮箱" type="email" clearable
+                    size="large" />
+            </el-form-item>
+            <UserCaptcha v-model="bindEmailForm.code" @sendCode="handleSendCode" :show-send-button="showSendButton"
+                :send-state="sendState" />
+            <el-form-item class="form-submit">
+                <el-button type="primary" @click="handleSubmit">确认绑定</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+// alert('绑定邮箱')
+// type类型
+import type { FormInstance, FormRules } from 'element-plus'
+// 组件
+import UserHeader from './components/Header.vue'
+import UserText from './components/Text.vue'
+import UserCaptcha from './components/Captcha.vue'
+//用户校验规则
+import { emailRules, codeRules } from './config/rules'
+import { useUserStore } from '@/stores/modules/user'
+import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCaptcha'
+
+const userStore = useUserStore()
+const router = useRouter()
+
+//userText 实例
+const userText = ref({
+    backText: '返回',
+    account: ''
+})
+
+// bindEmail 表单实例
+const bindEmailFormRef = ref<FormInstance>()
+const bindEmailForm = ref({
+    email: '',
+    code: '',
+})
+const bindEmailRules = ref<FormRules>({
+    email: emailRules().email,
+    code: codeRules().code,
+})
+
+
+// 验证码实例
+const showSendButton = ref<boolean>(true)
+const sendState = ref<object>({
+    isCounting: false,
+    countdown: 0,
+})
+//初始化验证码倒计时状态
+const emailCaptchaState = initCaptchaState('email');
+// 邮箱验证码状态
+const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState
+
+//方法
+// 统一更新sendState的方法
+const updateSendState = (type: string) => {
+    sendState.value = {
+        isCounting: emailIsCounting,
+        countdown: emailCountdown
+    }
+}
+// 初始化时根据当前activeTab更新sendState（避免刷新后丢失）
+const initSendState = () => {
+    const currentType = 'email'
+    updateSendState(currentType)
+}
+onMounted(() => {
+    // 页面加载时立即执行，恢复倒计时
+    initSendState()
+})
+
+
+// 定义发送验证码接口
+const sendCodeApi = async () => {
+  // 发送验证码参数
+  const sendParams = {
+    email: bindEmailForm.value.email,
+    reg_type: 1,
+    type:'resetPass_code'
+  }
+  return userStore.sendCode(sendParams)
+}
+
+//发送验证码
+const handleSendCode = async () => {
+  const currentType = 'email'
+  // 第二步：确定类型、接收方、对应的倒计时状态和发送函数
+  const type: string = currentType || 'email'
+  const receiver = bindEmailForm.value.email;
+  const currentCaptchaState = emailCaptchaState;
+  
+  // 第三步：调用封装的发送函数（传正确的函数，而非字符串）
+  await sendCaptcha(
+    type,
+    receiver,
+    currentCaptchaState, // 只更新当前类型的倒计时状态
+    () => sendCodeApi() // 传入返回Promise的函数
+  );
+
+  //把状态同步给子组件
+  updateSendState(type)
+}
+// 组件卸载时清除定时器（关键：防止内存泄漏）
+onUnmounted(() => {
+  clearCaptchaTimer(emailCaptchaState);
+});
+
+
+
+
+/**
+ * @description: 返回
+ */
+const handleBack = () => {
+    router.back()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!bindEmailFormRef.value) return;
+  await bindEmailFormRef.value.validate();
+}
+</script>
+<style scoped lang="scss">
+.user-card{
+    .user-text{
+        margin-bottom: 0;
+    }
+}
+</style>
diff --git a/src/views/user/bindPhone.vue b/src/views/user/bindPhone.vue
new file mode 100644
index 0000000..4b676ad
--- /dev/null
+++ b/src/views/user/bindPhone.vue
@@ -0,0 +1,187 @@
+<template>
+    <div class="user-card">
+        <UserHeader />
+        <UserText :user-text="userText" @back="handleBack" />
+        <el-form class="user-form" ref="bindPhoneFormRef" :model="bindPhoneForm" :rules="bindPhoneRules">
+            <el-form-item class="phone-item" prop="phone">
+                <el-select v-model="bindPhoneForm.countryCode" :teleported="false" value-key="code" placeholder="国家"
+                    size="large">
+                    <el-option v-for="item in countryOptions" :key="item.code" :label="item.code" :value="item.code">
+                        <div class="country-option">
+                            <span class="country-name">{{ item.name }}</span>
+                            <span class="country-code">{{ item.code }}</span>
+                        </div>
+                    </el-option>
+                </el-select>
+                <el-input v-model="bindPhoneForm.phone" placeholder="请输入手机号" clearable size="large" />
+            </el-form-item>
+            <UserCaptcha v-model="bindPhoneForm.code" @sendCode="handleSendCode" :show-send-button="showSendButton"
+                :send-state="sendState" />
+            <el-form-item class="form-submit">
+                <el-button type="primary" @click="handleSubmit">确认绑定</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+// alert('绑定邮箱')
+// type类型
+import type { FormInstance, FormRules } from 'element-plus'
+// 组件
+import UserHeader from './components/Header.vue'
+import UserText from './components/Text.vue'
+import UserCaptcha from './components/Captcha.vue'
+//用户校验规则
+import { emailRules, codeRules } from './config/rules'
+import { useUserStore } from '@/stores/modules/user'
+import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCaptcha'
+import { countryOptions } from '@/views/user/config/mock'
+
+const userStore = useUserStore()
+const router = useRouter()
+
+//userText 实例
+const userText = ref({
+    backText: '返回',
+    account: ''
+})
+
+// bindPhone 表单实例
+const bindPhoneFormRef = ref<FormInstance>()
+const bindPhoneForm = ref({
+    phone: '',
+    code: '',
+    countryCode: '+86',
+})
+const bindPhoneRules = ref<FormRules>({
+    phone: emailRules().phone,
+    code: codeRules().code,
+})
+
+
+// 验证码实例
+const showSendButton = ref<boolean>(true)
+const sendState = ref<object>({
+    isCounting: false,
+    countdown: 0,
+})
+//初始化验证码倒计时状态
+const phoneCaptchaState = initCaptchaState('phone');
+// 邮箱验证码状态
+const { isCounting: phoneIsCounting, countdown: phoneCountdown } = phoneCaptchaState
+
+//方法
+// 统一更新sendState的方法
+const updateSendState = (type: string) => {
+    sendState.value = {
+        isCounting: phoneIsCounting,
+        countdown: phoneCountdown
+    }
+}
+// 初始化时根据当前activeTab更新sendState（避免刷新后丢失）
+const initSendState = () => {
+    const currentType = 'phone'
+    updateSendState(currentType)
+}
+onMounted(() => {
+    // 页面加载时立即执行，恢复倒计时
+    initSendState()
+})
+
+
+// 定义发送验证码接口
+const sendCodeApi = async () => {
+    // 发送验证码参数
+    const sendParams = {
+        mobile: bindPhoneForm.value.phone,
+        reg_type: 2,
+        type: 'resetPass_code'
+    }
+    return userStore.sendCode(sendParams)
+}
+
+//发送验证码
+const handleSendCode = async () => {
+    const currentType = 'phone'
+    // 第二步：确定类型、接收方、对应的倒计时状态和发送函数
+    const type: string = currentType || 'phone'
+    const receiver = bindPhoneForm.value.phone;
+    const currentCaptchaState = phoneCaptchaState;
+
+    // 第三步：调用封装的发送函数（传正确的函数，而非字符串）
+    await sendCaptcha(
+        type,
+        receiver,
+        currentCaptchaState, // 只更新当前类型的倒计时状态
+        () => sendCodeApi() // 传入返回Promise的函数
+    );
+
+    //把状态同步给子组件
+    updateSendState(type)
+}
+// 组件卸载时清除定时器（关键：防止内存泄漏）
+onUnmounted(() => {
+    clearCaptchaTimer(phoneCaptchaState);
+});
+
+
+
+
+/**
+ * @description: 返回
+ */
+const handleBack = () => {
+    router.back()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+    if (!bindPhoneFormRef.value) return;
+    await bindPhoneFormRef.value.validate();
+}
+</script>
+
+<style scoped lang="scss">
+.user-card{
+    .user-text{
+        margin-bottom: 0;
+    }
+}
+.user-form {
+  .phone-item {
+    :deep(.el-form-item__content) {
+      flex-wrap: nowrap;
+    }
+
+    .el-select {
+      width: 120px;
+      margin-right: 10px;
+
+      .country-option {
+        width: 120px;
+        display: flex;
+        justify-content: space-between;
+      }
+
+      :deep(.el-select-dropdown__item) {
+        padding: 0 16px 0 16px;
+      }
+    }
+  }
+
+  .forgot-password {
+    font-size: 14px;
+    color: #409eff;
+    text-decoration: none;
+  }
+
+  .form-submit {
+    margin-top: 18px;
+
+    :deep(.el-form-item__content) {
+      width: 100%;
+    }
+  }
+}
+</style>