调整表格滚动条

2026-05-11 11:00:24 +08:00 · 2026-05-11 11:00:24 +08:00 · 022c18c6be
parent f76e890ab2
commit 022c18c6be
8 changed files with 155 additions and 140 deletions
--- a/src/assets/styles/element.scss
+++ 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%;
+}
--- 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;
--- 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>
--- 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) // 未读消息数量

 // 全屏相关
--- 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
 };
 });
--- 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}
 ]

 // 点差表格配置
--- 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>
--- 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;