From 022c18c6be6f2b8cac79431372ad37b427e878b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8?= <frankyang0820@outlook.com>
Date: Mon, 11 May 2026 11:00:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A1=A8=E6=A0=BC=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/element.scss             |   8 +
 src/assets/styles/global.scss              |   1 +
 src/components/common/Table.vue            |   4 +-
 src/components/layout/Header.vue           |  11 +-
 src/stores/modules/user.ts                 |  16 +-
 src/views/agent/user/options.ts            |   6 +-
 src/views/profile/business/index.vue       | 247 ++++++++++-----------
 src/views/profile/personalCenter/index.vue |   2 +
 8 files changed, 155 insertions(+), 140 deletions(-)
 create mode 100644 src/assets/styles/element.scss

diff --git a/src/assets/styles/element.scss b/src/assets/styles/element.scss
new file mode 100644
index 0000000..7a47181
--- /dev/null
+++ b/src/assets/styles/element.scss
@@ -0,0 +1,8 @@
+.el-drawer__body {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  overflow: hidden;
+  height: 100%;
+  max-height: 100%;
+}
\ No newline at end of file
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 301b604..cd314a3 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -1,5 +1,6 @@
 @use './user.scss';
 @use './system.scss';
+@use './element.scss';
 
 * {
     margin: 0;
diff --git a/src/components/common/Table.vue b/src/components/common/Table.vue
index cd9a87e..7b2147f 100644
--- a/src/components/common/Table.vue
+++ b/src/components/common/Table.vue
@@ -142,7 +142,7 @@ defineExpose({
 <style scoped lang="scss">
 .table-container {
   width: 100%;
-  height: calc(100vh - 180px);
-  overflow: hidden;
+  height: 100%;
+  // overflow: hidden;
 }
 </style>
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 1d79f70..84d2add 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -21,8 +21,8 @@
       <!-- 用户信息下拉菜单 -->
       <el-dropdown @command="handleCommand" class="user-dropdown">
         <div class="user-info">
-          <el-avatar :size="32" :src="userAvatar" class="user-avatar">
-            <el-icon><User /></el-icon>
+          <el-avatar :size="32" class="user-avatar">
+            <el-icon  :size="20"><User /></el-icon>
           </el-avatar>
           <span class="username">{{ activeUserName }}</span>
           <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
@@ -49,6 +49,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import {
   Bell,
   Sunny,
@@ -69,10 +70,8 @@ const router = useRouter()
 const userStore = useUserStore()
 const languageStore = useLanguageStore()
 
-// 用户信息
-const userInfo = getStorage<any>('userInfo')
-const activeUserName = ref(userInfo?.username || 'Admin')
-const userAvatar = ref(userInfo?.avatar || '')
+// 用户信息 - 使用 userStore 的响应式数据
+const activeUserName = computed(() => userStore.userInfo?.username || '-')
 const unreadCount = ref(3) // 未读消息数量
 
 // 全屏相关
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
index 29cc06c..21dce0c 100644
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@@ -165,6 +165,19 @@ const switchAccount = async () => {
   clearUserInfo();
   router.push('/user/login');
 };
+
+/**
+ * 更新用户信息
+ * @param data 要更新的用户信息
+ */
+const updateUserInfo = (data: Partial<UserInfo>) => {
+  if (userInfo.value) {
+    // 合并更新用户信息
+    userInfo.value = { ...userInfo.value, ...data };
+    // 更新本地存储
+    setStorage('userInfo', userInfo.value);
+  }
+};
 return {
   // 状态
   token,
@@ -182,6 +195,7 @@ return {
   forgotPassword,
   changePassword,
   sendCode,
-  switchAccount
+  switchAccount,
+  updateUserInfo
 };
 });
diff --git a/src/views/agent/user/options.ts b/src/views/agent/user/options.ts
index febbbc2..a364b8c 100644
--- a/src/views/agent/user/options.ts
+++ b/src/views/agent/user/options.ts
@@ -27,13 +27,13 @@ export const tableColumns = [
     // 账号数量
     { prop: 'accountQty', label: '账号数量', width: 100 },
     // 点差分配比例
-    { prop: 'marginRatio', label: '点差分配比例', slotName: 'marginRatio' , minWidth: 140},
+    { prop: 'marginRatio', label: '点差分配比例', slotName: 'marginRatio' , width: 140},
     // 手续费分成比例
-    { prop: 'commissionRatio', label: '手续费分成比例', slotName: 'commissionRatio' , minWidth: 140},
+    { prop: 'commissionRatio', label: '手续费分成比例', slotName: 'commissionRatio' , width: 140},
     // 注册时间
     { prop: 'createTime', label: '注册时间', sortable: true , minWidth: 180},
     // 操作
-    { label: '操作', slotName: 'action', minWidth: 200}
+    { label: '操作', slotName: 'action', width: 200}
 ]
 
 // 点差表格配置
diff --git a/src/views/profile/business/index.vue b/src/views/profile/business/index.vue
index 4203d35..d563a1d 100644
--- a/src/views/profile/business/index.vue
+++ b/src/views/profile/business/index.vue
@@ -1,35 +1,21 @@
 <template>
   <div class="market">
     <!-- 搜索 -->
-    <MarketSearch
-      :search-form="marketSearchForm"
-      :search-options="marketSearchOptions"
-      @search="handleSearch"
-      @reset="handleReset"
-    >
+    <MarketSearch :search-form="marketSearchForm" :search-options="marketSearchOptions" @search="handleSearch"
+      @reset="handleReset">
       <template #button="{ form }">
         <el-button type="primary" @click="handleAddMarket()" v-auth="'agent_createAgent'">
           添加
         </el-button>
-        <el-button
-          type="primary"
-          :disabled="!selectedRow"
-          v-auth="'agent_editAgent'"
-          @click="handleEditMarket()"
-        >
+        <el-button type="primary" :disabled="!selectedRow" v-auth="'agent_editAgent'" @click="handleEditMarket()">
           编辑
         </el-button>
       </template>
     </MarketSearch>
 
     <!-- 表格 -->
-    <MarketTable
-      :table-data="marketTree"
-      :columns="marketTableColumnsOptions"
-      row-key="id"
-      @row-click="handleRowClick"
-      @row-contextmenu="handleRowContextMenu"
-    >
+    <MarketTable :table-data="marketTree" :columns="marketTableColumnsOptions" row-key="id" @row-click="handleRowClick"
+      @row-contextmenu="handleRowContextMenu">
       <template #pointSpread="{ row }">
         <el-button type="primary" size="small" @click="handleViewPointDiff(row)"> 查看 </el-button>
       </template>
@@ -44,107 +30,80 @@
     </context-menu>
 
     <!-- 分页 -->
-    <MarketPagination
-      v-model="currentPage"
-      v-model:pageSizeValue="pageSize"
-      :total="total"
-      @pagination-change="handlePaginationChange"
-    />
+    <MarketPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
+      @pagination-change="handlePaginationChange" />
   </div>
 
-  <!-- dialog -->
-  <MarketDialog
-    :visible="dialogVisible"
-    :title="dialogTitle"
-    :type="dialogType"
-    :fullscreen="dialogFullscreen"
-    :show-footer="dialogType !== 'view'"
-    @confirm="handleSubmit"
-    @cancel="handleCancel"
-    @close="handleClose"
-  >
+  <!-- 抽屉 -->
+  <el-drawer class="my-drawer" :append-to-body="false" v-model="dialogVisible" :title="dialogTitle"
+    :size="dialogType === 'view' ? '60%' : '50%'" :destroy-on-close="true">
     <!-- 表单 -->
-    <MarketForm
-      :form-data="marketForm"
-      :form-rules="marketFormRules"
-      :form-items="marketFormItemOptions"
-      :options-map="marketFormOptionsMap"
-      ref="marketFormRef"
-      v-if="dialogType !== 'view'"
-    >
-      <template #phoneOrEmail="{ formData }" v-if="dialogType === 'add'">
-        <div class="phone-email">
-          <div class="tab-btn">
-            <el-button
-              :type="activeTab === 'email' ? 'primary' : 'default'"
-              size="small"
-              @click="activeTab = 'email'"
-            >
-              邮箱
-            </el-button>
-            <el-button
-              :type="activeTab === 'phone' ? 'primary' : 'default'"
-              size="small"
-              @click="activeTab = 'phone'"
-            >
-              手机号
-            </el-button>
+    <div v-if="dialogType !== 'view'" class="drawer-form">
+      <MarketForm :form-data="marketForm" :form-rules="marketFormRules" :form-items="marketFormItemOptions"
+        :options-map="marketFormOptionsMap" ref="marketFormRef">
+        <template #phoneOrEmail="{ formData }" v-if="dialogType === 'add'">
+          <div class="phone-email">
+            <div class="tab-btn">
+              <el-button :type="activeTab === 'email' ? 'primary' : 'default'" size="small"
+                @click="activeTab = 'email'">
+                邮箱
+              </el-button>
+              <el-button :type="activeTab === 'phone' ? 'primary' : 'default'" size="small"
+                @click="activeTab = 'phone'">
+                手机号
+              </el-button>
+            </div>
+            <div class="group">
+              <el-form-item prop="email" v-if="activeTab === 'email'">
+                <el-input v-model="marketForm.email" placeholder="请输入邮箱" />
+              </el-form-item>
+              <el-form-item prop="phone" class="phone-item" v-if="activeTab === 'phone'">
+                <el-select v-model="marketForm.countryCode" placeholder="请选择国家区号">
+                  <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="marketForm.phone" placeholder="请输入手机号" />
+              </el-form-item>
+            </div>
           </div>
-          <div class="group">
-            <el-form-item prop="email" v-if="activeTab === 'email'">
-              <el-input v-model="marketForm.email" placeholder="请输入邮箱" />
-            </el-form-item>
-            <el-form-item prop="phone" class="phone-item" v-if="activeTab === 'phone'">
-              <el-select v-model="marketForm.countryCode" placeholder="请选择国家区号">
-                <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="marketForm.phone" placeholder="请输入手机号" />
-            </el-form-item>
-          </div>
-        </div>
-      </template>
-    </MarketForm>
+        </template>
+      </MarketForm>
+    </div>
 
     <!-- 点差表格 -->
-    <MarketTable
-      :table-data="marketPointTree"
-      :columns="marketPointTableColumnsOptions"
-      row-key="id"
-      style="height: 300px"
-    >
-      <template #assignedPointDiff="{ row }">
-        <el-form :model="row" :rules="rules(marketForm, row)">
-          <el-form-item prop="pointDifference">
-            <el-input v-model="row.pointDifference" size="small" placeholder="请输入点差" />
-          </el-form-item>
-        </el-form>
-      </template>
-    </MarketTable>
-  </MarketDialog>
+    <div class="drawer-table">
+      <div class="table-header" v-if="dialogType !== 'view'">点差配置</div>
+      <div class="table-wrapper">
+        <MarketTable :table-data="marketPointTree" :columns="marketPointTableColumnsOptions" row-key="id">
+          <template #assignedPointDiff="{ row }">
+            <el-form :model="row" :rules="rules(marketForm, row)">
+              <el-form-item prop="pointDifference">
+                <el-input v-model="row.pointDifference" size="small" placeholder="请输入点差" />
+              </el-form-item>
+            </el-form>
+          </template>
+        </MarketTable>
+      </div>
+    </div>
 
-  <MarketDialog
-    :visible="rightClickDialogVisible"
-    :title="rightClickDialogTitleEnum[rightClickDialogType]"
-    @confirm="handleRightClickDialogSubmit"
-    @cancel="handleRightClickDialogCancel"
-    @close="handleRightClickDialogClose"
-  >
+    <!-- 底部按钮 -->
+    <template #footer v-if="dialogType !== 'view'">
+      <div class="drawer-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <MarketDialog :visible="rightClickDialogVisible" :title="rightClickDialogTitleEnum[rightClickDialogType]"
+    @confirm="handleRightClickDialogSubmit" @cancel="handleRightClickDialogCancel" @close="handleRightClickDialogClose">
     <!--   'account' | 'acceptOrders' | 'transfer' | 'deposit' | 'withdraw'   -->
-    <MarketForm
-      :marketForm="rightClickMarketForm"
-      :form-rules="rightClickMarketFormRules"
-      :form-items="rightClickMarketFormItemOptions"
-    ></MarketForm>
+    <MarketForm :marketForm="rightClickMarketForm" :form-rules="rightClickMarketFormRules"
+      :form-items="rightClickMarketFormItemOptions"></MarketForm>
   </MarketDialog>
 </template>
 
@@ -157,7 +116,6 @@ defineOptions({
 import MarketSearch from '@/components/common/Search.vue'
 import MarketTable from '@/components/common/Table.vue'
 import MarketPagination from '@/components/common/Pagination.vue'
-import MarketDialog from '@/components/common/Dialog.vue'
 import MarketForm from '@/components/common/Form.vue'
 //配置选项和表单验证
 import {
@@ -168,7 +126,7 @@ import {
   countryOptions,
   viewMarketPointTableColumns,
 } from './options'
-import {useUserStore} from '@/stores/modules/user.ts'
+import { useUserStore } from '@/stores/modules/user.ts'
 import { rules } from './rules'
 
 //接口
@@ -211,7 +169,6 @@ const currentPage = ref(1)
 const dialogVisible = ref<boolean>(false)
 const dialogTitle = ref<string>('')
 const dialogType = ref<string>('add')
-const dialogFullscreen = ref(false)
 
 /**
  * @description 定义dialog表单数据
@@ -318,7 +275,7 @@ const handleAction = (key: 'account' | 'acceptOrders' | 'transfer' | 'deposit' |
   rightClickDialogVisible.value = true
 }
 
-const handleRightClickDialogSubmit = () => {}
+const handleRightClickDialogSubmit = () => { }
 
 const handleRightClickDialogCancel = () => {
   rightClickDialogVisible.value = false
@@ -533,7 +490,6 @@ const handleAddMarket = async () => {
   dialogType.value = 'add'
   // 2. 重置表单数据
   marketForm.value = { ...initMarketForm }
-  dialogFullscreen.value = false
 }
 
 // 编辑做市商
@@ -585,11 +541,10 @@ const handleEditMarket = async () => {
       }))
     }
 
-    // 所有数据加载完成后，再打开弹窗
+    // 所有数据加载完成后，再打开抽屉
     dialogVisible.value = true
     dialogTitle.value = '编辑'
     dialogType.value = 'edit'
-    dialogFullscreen.value = false
   } catch (error) {
     console.error('编辑数据加载失败:', error)
   }
@@ -610,11 +565,10 @@ const handleViewPointDiff = async (row: any) => {
       assignedPointDifference: item.target_point_diff || '',
     }))
 
-    // 数据加载完成后再打开弹窗
+    // 数据加载完成后再打开抽屉
     dialogVisible.value = true
     dialogTitle.value = '查看点差'
     dialogType.value = 'view'
-    dialogFullscreen.value = true
   } catch (error) {
     console.error('加载点差数据失败:', error)
   }
@@ -721,13 +675,7 @@ const handleSubmit = async () => {
 // 取消
 const handleCancel = async () => {
   dialogVisible.value = false
-  // 重置点差数据和dialog类型
-}
-
-// 关闭
-const handleClose = async () => {
-  dialogVisible.value = false
-  // 重置点差数据和dialog类型
+  // 重置点差数据和drawer类型
 }
 </script>
 
@@ -735,6 +683,7 @@ const handleClose = async () => {
 :deep(.el-form-item__content) {
   margin-left: 0 !important;
 }
+
 .market {
   .search-container {
     :deep(.el-form) {
@@ -778,7 +727,49 @@ const handleClose = async () => {
     }
   }
 }
+
 .table-container {
   max-width: 100%;
 }
+
+// 抽屉样式
+.drawer-form {
+  flex-shrink: 0;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.drawer-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  max-height: 100%;
+
+  .table-header {
+    flex-shrink: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #303133;
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  .table-wrapper {
+    flex: 1;
+    min-height: 0; 
+  }
+}
+
+.drawer-footer {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 20px;
+  border-top: 1px solid #ebeef5;
+}
 </style>
diff --git a/src/views/profile/personalCenter/index.vue b/src/views/profile/personalCenter/index.vue
index 3ab914b..653c241 100644
--- a/src/views/profile/personalCenter/index.vue
+++ b/src/views/profile/personalCenter/index.vue
@@ -377,6 +377,8 @@ const handleEditConfirm = async () => {
       const params: EditUsernameParams = { username: editForm.value };
       await editUsernameApi(params);
       userInfo.username = editForm.value;
+      // 更新全局用户信息
+      userStore.updateUserInfo({ username: editForm.value });
     }
     if (editField.value === 'mobile') {
       const mobile = editForm.countryCode + editForm.value;