Merge branch 'yueyixin'

2026-05-21 17:01:06 +08:00 · 2026-05-21 17:01:06 +08:00 · 609764b39c
parent 41199e6ea8 3e49edfba4
commit 609764b39c
55 changed files with 1533 additions and 1133 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,8 +1,21 @@
 <template>
  <div class="app-container">
+    <TopLoading ref="topLoadingRef" />
    <KeepAlive>
      <router-view></router-view>
    </KeepAlive>
  </div>
 </template>

+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import TopLoading from '@/components/common/TopLoading.vue'
+
+const topLoadingRef = ref<InstanceType<typeof TopLoading>>()
+
+onMounted(() => {
+  // 将 TopLoading 实例挂载到 window 上，供 api 模块调用
+  // @ts-ignore
+  window.__topLoading__ = topLoadingRef.value
+})
+</script>
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -1,35 +1,33 @@
 import axios from 'axios'
 import type { AxiosResponse, AxiosError, InternalAxiosRequestConfig } from 'axios'
 import type { ApiResponse } from '@/api/types'
-import { ElLoading, ElNotification } from 'element-plus'
+import { ElNotification } from 'element-plus'
 import { getStorage, setStorage, removeStorage } from '@/utils/storage'
 import router from '../router'

-// 定义loading实例类型，用于控制loading的显示和关闭
-let loadingInstance: ReturnType<typeof ElLoading.service> | null = null
-// 记录当前请求数量，防止多个请求重复显示/关闭loading
+// 记录当前请求数量，用于控制顶部进度条
 let requestCount = 0

-// 显示loading的方法
+// 获取 TopLoading 实例
+const getTopLoading = () => {
+  // @ts-ignore
+  return window.__topLoading__
+}
+
+// 显示顶部进度条
 const showLoading = () => {
-  if (requestCount === 0 && !loadingInstance) {
-    loadingInstance = ElLoading.service({
-      lock: true, // 锁定屏幕滚动
-      fullscreen: true, // 全屏显示
-    })
+  if (requestCount === 0) {
+    getTopLoading()?.start()
  }
  requestCount++
 }

-// 关闭loading的方法
+// 关闭顶部进度条
 const hideLoading = () => {
  requestCount--
  if (requestCount <= 0) {
-    if (loadingInstance) {
-      loadingInstance.close()
-      loadingInstance = null
-    }
-    requestCount = 0 // 重置计数，防止负数
+    getTopLoading()?.complete()
+    requestCount = 0
  }
 }

@ -49,10 +47,8 @@ const service = axios.create({
 const requestInterceptor = (config: InternalAxiosRequestConfig) => {
  console.log('请求配置', config)

-  // 显示loading（可通过config配置项控制是否显示，比如某些请求不需要loading）
-  if (config.headers?.showLoading !== false) {
+  // 显示顶部进度条
  showLoading()
-  }
  // 添加token到请求头
  const token = getStorage('token')
  if (token) {
--- a/src/api/modules/agent/customerList.ts
+++ b/src/api/modules/agent/customerList.ts
@ -14,3 +14,8 @@ export const getSelfVarietyPointDiffConfigApi = (params: any) => {
 export const editCustomerApi = (params: any) => {
    return request.post('/agent/editAgent', {...params})
 }
+
+//编辑代理客户接口
+export const updateToAgent = (params: any) => {
+    return request.post('/agent/updateToAgent', {...params})
+}
--- a/src/components/common/Dialog.vue
+++ b/src/components/common/Dialog.vue
@ -16,7 +16,7 @@
    <template #footer v-if="showFooter">
      <slot name="footer">
        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleConfirm">确定</el-button>
+        <el-button type="primary" :loading="buttonLoading" @click="handleConfirm">确定</el-button>
      </slot>
    </template>
  </el-dialog>
@ -31,6 +31,7 @@ interface Props {
  type?: string
  showFooter?: boolean
  fullscreen?: boolean
+  buttonLoading?: boolean
 }

 interface Emits {
@ -45,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
  destroyOnClose: true,
  showFooter: true,
  fullscreen: false,
+  buttonLoading: false,
 })

 const emit = defineEmits<Emits>()
--- a/src/components/common/Search.vue
+++ b/src/components/common/Search.vue
@ -44,10 +44,10 @@

      <!-- 操作按钮 -->
      <el-form-item>
-        <el-button type="primary" @click="$emit('search')">
+        <el-button type="primary" :loading="buttonLoading" @click="$emit('search')">
          {{ buttonConfig.searchText || '搜索' }}
        </el-button>
-        <el-button @click="$emit('reset')">
+        <el-button :loading="buttonLoading" @click="$emit('reset')">
          {{ buttonConfig.resetText || '重置' }}
        </el-button>
        <!-- 按钮区插槽 -->
@ -99,6 +99,10 @@ const props = defineProps({
    type: Object as () => ButtonConfig,
    default: () => ({}),
  },
+  buttonLoading: {
+    type: Boolean,
+    default: false,
+  },
 })

 // 暴露事件
--- a/src/components/common/Table.vue
+++ b/src/components/common/Table.vue
@ -8,10 +8,16 @@
      :tree-props="treeProps"
      :border="border"
      :highlight-current-row="highlightCurrentRow"
+      v-loading="loading"
      v-bind="$attrs"
      @row-click="handleRowClick"
      @row-contextmenu="handleRowContextmenu"
+      @selection-change="handleSelectionChange"
+      @current-change="handleCurrentChange"
    >
+      <!-- 勾选列 -->
+      <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
+
      <!-- 动态表头列 -->
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column
@ -28,7 +34,11 @@
          :width="column.width"
          :align="column.align || 'left'"
          :sortable="column.sortable"
-        />
+        >
+          <template v-if="column.isNumber" #default="{ row }">
+            <span>{{ formatDecimalTruncate(row[column.prop]) }}</span>
+          </template>
+        </el-table-column>

        <!-- 具名插槽列 -->
        <el-table-column
@ -49,6 +59,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import type { TableInstance } from 'element-plus'
+import { formatDecimalTruncate } from '@/utils/formatDecimal'

 // 定义表格列配置接口
 interface TableColumn {
@ -59,6 +70,7 @@ interface TableColumn {
  align?: 'left' | 'center' | 'right'
  slotName?: string // 具名插槽名称
  sortable?: boolean // 是否可排序
+  isNumber?: boolean // 是否为数字类型（自动截取小数位）
 }

 // 定义表格组件属性接口
@ -71,19 +83,39 @@ interface Props {
  columns?: TableColumn[]
  border?: boolean // 是否显示边框
  highlightCurrentRow?: boolean // 是否高亮当前行
+  loading?: boolean // 是否显示加载状态
+  showSelection?: boolean // 是否显示勾选列
 }

 const props = withDefaults(defineProps<Props>(), {
  border: true,
  highlightCurrentRow: true,
+  loading: false,
+  showSelection: false,
 })

 // 定义组件抛出的事件
 const emit = defineEmits<{
  (e: 'row-click', row: any): void // 保留原有行点击事件
  (e: 'row-contextmenu', row: any, column: any, event: MouseEvent): void
+  (e: 'selection-change', rows: any[]): void // 勾选变化事件
+  (e: 'current-change', row: any): void // 当前行变化事件
 }>()

+// 处理勾选变化
+const handleSelectionChange = (rows: any[]) => {
+  emit('selection-change', rows)
+}
+
+// 处理当前行变化
+const handleCurrentChange = (row: any) => {
+  // 添加空值保护，避免传递 null 导致 Vue 响应式系统报错
+  if (row === null || row === undefined) {
+    return
+  }
+  emit('current-change', row)
+}
+
 const tableRef = ref<TableInstance>()

 // 维护当前选中行状态，用于二次点击取消选中
@ -100,7 +132,7 @@ const handleRowClick = (row: any) => {
  if (selectedRow.value && selectedRow.value === row) {
    // 二次点击：取消选中
    selectedRow.value = null
-    tableRef.value?.setCurrentRow() // 不传参即清除选中 [^14^]
+    tableRef.value?.setCurrentRow(null) // 传 null 清除选中
  } else {
    // 首次点击或点击不同行：选中该行
    selectedRow.value = row
@ -124,16 +156,29 @@ watch(
  () => {
    // 数据更新时，清除选中状态
    selectedRow.value = null
-    tableRef.value?.setCurrentRow() // 不传参即清除选中 [^14^]
+    tableRef.value?.setCurrentRow(null)
  },
  { deep: true }, // 深度监听，防止数组元素变化未触发
 )

+// 监听 loading 属性变化，确保状态同步
+watch(
+  () => props.loading,
+  (newVal) => {
+    // loading 状态变化时可以执行额外的处理
+    console.log('Table loading status changed:', newVal)
+  },
+  { flush: 'sync' }, // 使用 sync 模式确保即时响应
+)
+
 // 暴露清除当前选中行的方法
 defineExpose({
  clearCurrentRow: () => {
    selectedRow.value = null
-    tableRef.value?.setCurrentRow()
+    tableRef.value?.setCurrentRow(null)
+  },
+  setCurrentRow: (row: any) => {
+    tableRef.value?.setCurrentRow(row)
  },
 })
 </script>
--- a/src/components/common/TopLoading.vue
+++ b/src/components/common/TopLoading.vue
@ -0,0 +1,62 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="top-loading-bar">
+      <div class="loading-progress" :style="{ width: progress + '%' }"></div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const progress = ref(0)
+let timer: ReturnType<typeof setInterval> | null = null
+
+const start = () => {
+  visible.value = true
+  progress.value = 0
+  // 模拟进度条动画，最多到 90%
+  timer = setInterval(() => {
+    if (progress.value < 90) {
+      progress.value += Math.random() * 15 + 5
+    }
+  }, 150)
+}
+
+const complete = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+  progress.value = 100
+  setTimeout(() => {
+    visible.value = false
+    progress.value = 0
+  }, 200)
+}
+
+// 暴露方法给外部调用
+defineExpose({
+  start,
+  complete,
+})
+</script>
+
+<style scoped lang="scss">
+.top-loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 9999;
+  background: transparent;
+}
+
+.loading-progress {
+  height: 100%;
+  background: #409eff; // Element Plus 主色调
+  transition: width 0.15s linear;
+}
+</style>
--- a/src/components/layout/Layout.vue
+++ b/src/components/layout/Layout.vue
@ -11,7 +11,7 @@
      <!-- 右侧内容区：页签 + 主体内容 -->
      <section class="content-container">
        <!-- 页签标签栏 -->
-        <!-- <Tabs /> -->
+        <Tabs />

        <!-- 主体内容区 -->
        <main class="main-content">
@ -22,9 +22,9 @@
          >
            <router-view v-slot="{ Component }">
              <KeepAlive v-if="route.meta.keepAlive">
-                <component :is="Component" :key="route.path" />
+                <component :is="Component" :key="refreshKey" />
              </KeepAlive>
-              <component v-else :is="Component" :key="route.path" />
+              <component v-else :is="Component" :key="refreshKey" />
            </router-view>
          </transition>
        </main>
@ -40,8 +40,19 @@ defineOptions({
 import Header from './Header.vue'
 import Sidebar from './Sidebar.vue'
 import Tabs from './Tabs.vue'
+import { useTabsStore } from '@/stores/modules/tabs'

 const route = useRoute()
+const tabsStore = useTabsStore()
+
+// 用于组件重新渲染的 key
+const refreshKey = computed(() => {
+  // 当 refreshKey 包含当前路由时，重新渲染组件
+  if (tabsStore.refreshKey.startsWith(route.path)) {
+    return tabsStore.refreshKey
+  }
+  return route.path
+})

 // 侧边栏收缩状态
 const sidebarCollapsed = ref(false)
--- a/src/components/layout/Tabs.vue
+++ b/src/components/layout/Tabs.vue
@ -82,7 +82,11 @@
        :style="contextMenuStyle"
        @click.stop
      >
-        <div class="context-menu-item" @click="handleContextMenuCommand('refresh')">
+        <div
+          class="context-menu-item"
+          :class="{ 'is-disabled': !canRefresh }"
+          @click="canRefresh && handleContextMenuCommand('refresh')"
+        >
          <el-icon><Refresh /></el-icon>
          <span>刷新当前页</span>
        </div>
@ -140,6 +144,12 @@ const canCloseCurrent = computed(() => {
  return !isFixedTab(path)
 })

+// 能否刷新（右键点击的 tab 是当前打开的页面）
+const canRefresh = computed(() => {
+  const path = contextMenuPath.value || ''
+  return path === route.path
+})
+
 // 能否关闭其他（除了固定标签和右键点击的标签外还有其他标签）
 const canCloseOther = computed(() => {
  const path = contextMenuPath.value || tabsStore.activeTab || ''
@ -393,11 +403,32 @@ const handleDragEnd = () => {
 const handleContextMenuCommand = (command: string) => {
  // 使用右键选中的路径，如果没有则用当前激活的标签
  const currentPath = contextMenuPath.value || tabsStore.activeTab
+  
+  // 保存右键点击的路径（在关闭菜单前保存）
+  const rightClickedPath = contextMenuPath.value
+  
  closeContextMenu()

  switch (command) {
    case 'refresh':
-      router.go(0)
+      // 获取当前右键点击的 tab 或当前激活的 tab
+      const refreshPath = rightClickedPath || tabsStore.activeTab
+      if (refreshPath) {
+        const targetTab = tabsStore.tabs.find(item => item.path === refreshPath)
+        // 如果不是当前页面，先跳转过去并更新 activeTab
+        if (refreshPath !== route.path) {
+          tabsStore.setActiveTab(refreshPath)
+          router.push({ path: refreshPath, query: targetTab?.query }).then(() => {
+            // 等待路由切换完成后再刷新
+            nextTick(() => {
+              tabsStore.refreshTab(refreshPath)
+            })
+          })
+        } else {
+          // 当前页面直接刷新
+          tabsStore.refreshTab(refreshPath)
+        }
+      }
      break
    case 'close':
      if (currentPath) {
--- a/src/composables/useLoading.ts
+++ b/src/composables/useLoading.ts
@ -0,0 +1,44 @@
+import { ref } from 'vue'
+
+/**
+ * 页面级加载状态管理
+ * @param initialLoading 初始 loading 状态，默认 false
+ */
+export function usePageLoading(initialLoading = false) {
+  const loading = ref(initialLoading)
+
+  const startLoading = () => {
+    loading.value = true
+  }
+
+  const stopLoading = () => {
+    loading.value = false
+  }
+
+  return {
+    loading,
+    startLoading,
+    stopLoading,
+  }
+}
+
+/**
+ * 按钮级别加载状态管理
+ */
+export function useButtonLoading() {
+  const buttonLoading = ref(false)
+
+  const startButtonLoading = () => {
+    buttonLoading.value = true
+  }
+
+  const stopButtonLoading = () => {
+    buttonLoading.value = false
+  }
+
+  return {
+    buttonLoading,
+    startButtonLoading,
+    stopButtonLoading,
+  }
+}
--- a/src/stores/modules/tabs.ts
+++ b/src/stores/modules/tabs.ts
@ -241,6 +241,14 @@ export const useTabsStore = defineStore('tabs', () => {
    saveTabs()
  }

+  // 刷新指定 tab 的 key（用于触发组件刷新）
+  const refreshKey = ref<string>('')
+  
+  // 刷新指定路径的 tab
+  const refreshTab = (path: string) => {
+    refreshKey.value = path + '-' + Date.now()
+  }
+
  // 保存到本地存储
  const saveTabs = () => {
    setStorage('tabs', tabs.value)
@ -283,6 +291,8 @@ export const useTabsStore = defineStore('tabs', () => {
    closeRightTabs,
    setActiveTab,
    clearTabs,
-    setTabs
+    setTabs,
+    refreshKey,
+    refreshTab
  }
 })
--- a/src/utils/formatDecimal.ts
+++ b/src/utils/formatDecimal.ts
@ -0,0 +1,46 @@
+/**
+ * @description: 金额格式化工具函数
+ */
+
+/**
+ * @description: 截取数字到小数点后指定位数（不四舍五入）
+ * @param value 需要格式化的值
+ * @param decimals 保留的小数位数，默认2位
+ * @returns 格式化后的字符串或数字
+ */
+export function formatDecimalTruncate(value: string | number | null | undefined, decimals: number = 2): string | number {
+  // 处理空值
+  if (value === null || value === undefined || value === '') {
+    return value ?? ''
+  }
+
+  // 转换为字符串检查原始格式
+  const originalStr = String(value)
+  
+  // 转换为数字检查是否有效
+  const num = Number(value)
+  
+  // 如果不是有效数字，返回原值
+  if (isNaN(num)) {
+    return value
+  }
+
+  // 分割整数和小数部分
+  const dotIndex = originalStr.indexOf('.')
+  
+  // 如果没有小数点，添加小数位后返回
+  if (dotIndex === -1) {
+    return `${originalStr}.${'0'.repeat(decimals)}`
+  }
+  
+  const integerPart = originalStr.substring(0, dotIndex)
+  const decimalPart = originalStr.substring(dotIndex + 1)
+  
+  // 截取到指定小数位（不四舍五入）
+  const truncatedDecimal = decimalPart.substring(0, decimals)
+  
+  // 补齐小数位到指定位数
+  const paddedDecimal = truncatedDecimal.padEnd(decimals, '0')
+  
+  return `${integerPart}.${paddedDecimal}`
+}
--- a/src/utils/handleTime.ts
+++ b/src/utils/handleTime.ts
@ -1,3 +1,6 @@
+
+import dayjs from 'dayjs'
+
 /**
 * 获取近七天的开始和结束时间
 * @param format 日期格式，默认 'YYYY-MM-DD HH:mm:ss'
@ -37,22 +40,22 @@ export const getRecentSevenDays = (format = 'YYYY-MM-DD HH:mm:ss'):{ start: stri
 * @returns {string} UTC+8 时间字符串，格式：YYYY-MM-DD HH:mm:ss
 */
 export function utcToUtc8(utcStr: string): string {
-  // 将字符串解析为 UTC 时间
-  const utcDate = new Date(utcStr.replace(' ', 'T') + 'Z')
+  // // 将字符串解析为 UTC 时间
+  // const utcDate = new Date(utcStr.replace(' ', 'T') + 'Z')

-  // 转换为 UTC+8（东八区）
-  const utc8Date = new Date(utcDate.getTime() + 8 * 60 * 60 * 1000)
+  // // 转换为 UTC+8（东八区）
+  // const utc8Date = new Date(utcDate.getTime() + 8 * 60 * 60 * 1000)

-  // 格式化为 YYYY-MM-DD HH:mm:ss
-  const pad = (n) => String(n).padStart(2, '0')
+  // // 格式化为 YYYY-MM-DD HH:mm:ss
+  // const pad = (n) => String(n).padStart(2, '0')

-  const year = utc8Date.getUTCFullYear()
-  const month = pad(utc8Date.getUTCMonth() + 1)
-  const day = pad(utc8Date.getUTCDate())
-  const hour = pad(utc8Date.getUTCHours())
-  const minute = pad(utc8Date.getUTCMinutes())
-  const second = pad(utc8Date.getUTCSeconds())
+  // const year = utc8Date.getUTCFullYear()
+  // const month = pad(utc8Date.getUTCMonth() + 1)
+  // const day = pad(utc8Date.getUTCDate())
+  // const hour = pad(utc8Date.getUTCHours())
+  // const minute = pad(utc8Date.getUTCMinutes())
+  // const second = pad(utc8Date.getUTCSeconds())

-  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
+  return dayjs(utcStr).format('YYYY-MM-DD HH:mm:ss')
 }

--- a/src/views/agent/user/index.vue
+++ b/src/views/agent/user/index.vue
@ -1,12 +1,12 @@
 <template>
  <div class="table_form-container">
    <!-- 搜索 -->
-    <CustomerListSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
+    <CustomerListSearch :search-form="searchForm" :search-options="searchOptions" :button-loading="searchLoading" @search="handleSearch"
      @reset="handleReset"></CustomerListSearch>

    <!-- 表格 -->
    <CustomerListTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="userId" :tree-props="treeProps"
-      :default-sort="{ prop: 'createTime', order: 'descending' }" @expand-change="handleGetSubList">
+      :default-sort="{ prop: 'createTime', order: 'descending' }" :loading="loading" @expand-change="handleGetSubList">
      <template #marginRatio="{ row }">
        <el-button v-if="row.role_id === 5" type="primary" size="small" @click="handleMarginRatio(row)">
          修改
@ -40,7 +40,7 @@

    <!-- dialog -->
    <CustomerListDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" :fullscreen="dialogFullscreen"
-      :show-footer="dialogType !== 'view'" @confirm="handleSubmit" @cancel="handleCancel" @close="handleClose">
+      :show-footer="dialogType !== 'view'" :button-loading="submitLoading" @confirm="handleSubmit" @cancel="handleCancel" @close="handleClose">
      <CustomerListTable :table-data="marginRatioTree" :columns="marginRatioTableColumnsOptions" row-key="id"
        v-if="dialogType === 'editMarginRatio'" style="height: 600px">
        <template #assignedPointDiff="{ row }">
@ -57,7 +57,7 @@
    </CustomerListDialog>

    <!-- 调整金额弹窗 -->
-    <CustomerListDialog :visible="adjustAmountVisible" title="调整金额" type="adjust" @confirm="handleAdjustAmountSubmit"
+    <CustomerListDialog :visible="adjustAmountVisible" title="调整金额" type="adjust" :button-loading="adjustAmountLoading" @confirm="handleAdjustAmountSubmit"
      @cancel="handleAdjustAmountCancel" @close="handleAdjustAmountClose">
      <el-form :model="adjustAmountForm" :rules="adjustAmountRules" ref="adjustAmountFormRef" label-width="120px">
        <el-form-item label="账号名" prop="username">
@ -81,7 +81,7 @@

    <!-- 修改客户弹窗 -->
    <CustomerListDialog :visible="editCustomerVisible" title="" type="editCustomer"
-      @confirm="handleEditCustomerSubmit" @cancel="handleEditCustomerCancel" @close="handleEditCustomerClose">
+      :button-loading="editCustomerLoading" @confirm="handleEditCustomerSubmit" @cancel="handleEditCustomerCancel" @close="handleEditCustomerClose">
      <el-form :model="editCustomerForm" :rules="editCustomerRules" ref="editCustomerFormRef" label-width="140px">
        <!-- <el-form-item label="手续费模板" prop="feeSettingId">
          <el-select v-model="editCustomerForm.feeSettingId" placeholder="请选择手续费模板" style="width: 100%">
@ -126,6 +126,7 @@ defineOptions({
 // 组件
 import CustomerListSearch from '@/components/common/Search.vue'
 import CustomerListTable from '@/components/common/Table.vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
 import CustomerListPagination from '@/components/common/Pagination.vue'
 import CustomerListDialog from '@/components/common/Dialog.vue'
 import CustomerListForm from '@/components/common/Form.vue'
@ -170,6 +171,11 @@ const searchForm = ref({
 const searchOptions = ref(search)
 const tableColumnsOptions = ref(tableColumns)

+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: searchLoading, startButtonLoading: startSearchLoading, stopButtonLoading: stopSearchLoading } = useButtonLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
+const { buttonLoading: adjustAmountLoading, startButtonLoading: startAdjustAmountLoading, stopButtonLoading: stopAdjustAmountLoading } = useButtonLoading()
+const { buttonLoading: editCustomerLoading, startButtonLoading: startEditCustomerLoading, stopButtonLoading: stopEditCustomerLoading } = useButtonLoading()
 /**
 * @description: 定义表格数据
 */
@ -323,6 +329,8 @@ const roleMap: any = {
 */
 // 获取客户列表
 const getCustomerList = async (id: string) => {
+  startLoading()
+  try {
    const params = {
      user_id: id,
      page: currentPage.value,
@ -363,10 +371,16 @@ const getCustomerList = async (id: string) => {
    total.value = data.total
    currentPage.value = data.current_page
    pageSize.value = Number(data.per_page)
+  } catch (err) {
+    console.error('获取客户列表失败：', err)
+  } finally {
+    stopLoading()
+  }
 }

 //获取代理点差数据
 const getSelfVarietyPointDiffConfig = async (id: string) => {
+  try {
    const params = {
      user_id: id,
    }
@ -381,6 +395,9 @@ const getSelfVarietyPointDiffConfig = async (id: string) => {
      }
    })
    console.log('marginRatioTree', marginRatioTree.value)
+  } catch (err) {
+    console.error('获取代理点差数据失败：', err)
+  }
 }

 /**
@ -394,7 +411,15 @@ onMounted(() => {
 * @description: 定义搜索方法
 */
 const handleSearch = async () => {
-  getCustomerList(userId.value)
+  currentPage.value = 1
+  startSearchLoading()
+  try {
+    await getCustomerList(userId.value)
+  } catch (err) {
+    console.error('搜索失败：', err)
+  } finally {
+    stopSearchLoading()
+  }
 }
 const handleReset = () => {
  searchForm.value = {
@ -403,7 +428,7 @@ const handleReset = () => {
    endTime: '',
    status: '',
  }
-  getCustomerList(userId.value)
+  handleSearch()
 }

 /**
@ -444,6 +469,7 @@ const handleCommissionRatio = (row: any) => {

 // 获取子列表
 const handleGetSubList = async (row: any) => {
+  try {
    const params = {
      user_name: '',
      user_id: row.userId,
@ -480,6 +506,9 @@ const handleGetSubList = async (row: any) => {
          ]
          : undefined,
    }))
+  } catch (err) {
+    console.error('获取子列表失败：', err)
+  }
 }

 /**
@ -496,6 +525,8 @@ const handlePaginationChange = (page: { currentPage: number; pageSize: number })
 */
 //提交
 const handleSubmit = async () => {
+  startSubmitLoading()
+  try {
    const params = {
      user_id: selectId.value,
      toucun_percent: '',
@ -528,7 +559,7 @@ const handleSubmit = async () => {
        dialogVisible.value = false
        await getCustomerList(userId.value)
      } catch (err) {
-      console.log('提交失败：', err)
+        console.error('提交失败：', err)
      }
    }
    if (dialogType.value === 'editCommissionRatio') {
@ -541,9 +572,12 @@ const handleSubmit = async () => {
        dialogVisible.value = false
        await getCustomerList(userId.value)
      } catch (err) {
-      console.log('提交失败：', err)
+        console.error('提交失败：', err)
      }
    }
+  } finally {
+    stopSubmitLoading()
+  }
 }
 // 取消
 const handleCancel = () => {
@ -583,6 +617,7 @@ const handleAdjustAmountInput = () => {

 // 提交调整金额
 const handleAdjustAmountSubmit = async () => {
+  startAdjustAmountLoading()
  try {
    await adjustAmountFormRef.value?.validate()
    await updateCapitalApi({
@ -593,6 +628,8 @@ const handleAdjustAmountSubmit = async () => {
    adjustAmountVisible.value = false
  } catch (err) {
    console.error('调整金额表单验证失败', err)
+  } finally {
+    stopAdjustAmountLoading()
  }
 }

@ -655,6 +692,7 @@ const handleEditCustomer = async (row: any) => {

 // 提交修改客户
 const handleEditCustomerSubmit = async () => {
+  startEditCustomerLoading()
  try {
    await editCustomerFormRef.value?.validate()
    await editUserApi({
@ -669,6 +707,8 @@ const handleEditCustomerSubmit = async () => {
    editCustomerVisible.value = false
  } catch (err) {
    console.error('修改客户表单验证失败', err)
+  } finally {
+    stopEditCustomerLoading()
  }
 }

--- a/src/views/capital/currency/index.vue
+++ b/src/views/capital/currency/index.vue
@ -4,10 +4,12 @@
    <FundDetailHeader title="入金货币" :buttons="buttonsOptions" @button-click="handleButtonClick">
    </FundDetailHeader>
    <!-- 表格 -->
-    <FundDetailTable :table-data="tableData" :columns="tableColumnsOptions" @row-click="handleRowClick" row-key="id" />
-    <FundDetailDialog :visible="visible" :title="dialogTitle" @close="visible = false" @cancel="visible = false"
-      @confirm="handleConfirm">
-      <FundDetailForm :formData="formData" :formItems="formItems" :formRules="formRules" :optionsMap="optionsMap">
+    <FundDetailTable :table-data="tableData" :columns="tableColumnsOptions" @row-click="handleRowClick" row-key="id"
+      :loading="loading" />
+    <FundDetailDialog :visible="visible" :title="dialogTitle" :button-loading="buttonLoading" @close="visible = false"
+      @cancel="visible = false" @confirm="handleConfirm">
+      <FundDetailForm :formData="formData" ref="commissionRatioFormRef" :formItems="formItems" :formRules="formRules"
+        :optionsMap="optionsMap">
      </FundDetailForm>
    </FundDetailDialog>
  </div>
@ -20,6 +22,7 @@ defineOptions({
 })
 import FundDetailHeader from '@/components/common/header.vue'
 import FundDetailTable from '@/components/common/Table.vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
 import FundDetailDialog from '@/components/common/Dialog.vue'
 import FundDetailForm from '@/components/common/Form.vue'
 import type { ButtonProps } from 'element-plus'
@ -41,11 +44,14 @@ interface HeaderButton {
  key?: string | number // 可选的唯一标识
 }

+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading, startButtonLoading, stopButtonLoading } = useButtonLoading()
 const buttonsOptions = ref(buttons)
 const formItems = ref(form)
 const tableData = ref([])
 const tableColumnsOptions = ref(tableColumns)
 const dialogTitle = ref('')
+const commissionRatioFormRef = ref()
 const formRules = ref(rules)
 const formData = ref({
  name: '',
@ -70,7 +76,11 @@ let rowData: any = {}
 const visible = ref<boolean>(false)

 const getTableList = async () => {
+  try {
+
+    startLoading()
    const data = await getCurrencyList()
+
    tableData.value = (data || []).map((item: any) => {
      return {
        ...item,
@ -79,6 +89,9 @@ const getTableList = async () => {
      }
    })
    console.log('tableData.value', tableData.value)
+  } finally {
+    stopLoading()
+  }
 }

 const handleRowClick = (row: any) => {
@ -136,6 +149,9 @@ const handleEdit = () => {
 }

 const handleConfirm = async () => {
+  await commissionRatioFormRef.value.validate()
+  startButtonLoading()
+  try {
    if (dialogTitle.value === '添加') {
      await createCurrency(formData.value)
    } else {
@ -144,6 +160,9 @@ const handleConfirm = async () => {
    visible.value = false
    resetForm()
    await getTableList()
+  } finally {
+    stopButtonLoading()
+  }
 }

 onMounted(() => {
--- a/src/views/capital/fundFlow/index.vue
+++ b/src/views/capital/fundFlow/index.vue
@ -1,25 +1,17 @@
 <template>
  <div class="table_form-container">
    <!-- 搜索 -->
-    <FundDetailSearch
-      :search-form="searchForm"
-      :search-options="searchOptions"
-      @search="handleSearch"
-      @reset="handleReset"
-    >
+    <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" />
+    <FundDetailTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" :loading="loading" />
    <!-- 分页 -->
-    <FundDetailPagination
-      v-model="currentPage"
-      v-model:pageSizeValue="pageSize"
-      :total="total"
-      @pagination-change="handlePaginationChange"
-    />
+    <FundDetailPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
+      @pagination-change="handlePaginationChange" />
  </div>
 </template>

@ -32,6 +24,7 @@ defineOptions({
 import FundDetailSearch from '@/components/common/Search.vue'
 import FundDetailTable from '@/components/common/Table.vue'
 import FundDetailPagination from '@/components/common/Pagination.vue'
+import { usePageLoading } from '@/composables/useLoading'
 // 配置以及表单验证
 import { search, tableColumns } from './options'
 // 接口
@ -51,6 +44,7 @@ const searchForm = ref({
  startTime: initTime.start,
  endTime: initTime.end,
 })
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
 * @description: 定义表格数据
 */
@ -68,6 +62,8 @@ const total = ref(0)
 */
 //获取资金明细列表
 const getFundDetailList = async () => {
+  startLoading()
+  try {
    const params = {
      page: currentPage.value,
      page_size: pageSize.value,
@ -102,6 +98,9 @@ const getFundDetailList = async () => {
    total.value = data.total
    currentPage.value = data.current_page
    pageSize.value = Number(data.per_page)
+  } finally {
+    stopLoading()
+  }
 }

 /**
--- a/src/views/capital/fundFlow/options.ts
+++ b/src/views/capital/fundFlow/options.ts
@ -62,9 +62,9 @@ export const tableColumns = [
  //资金流向
  // { prop: 'fundDirection', label: '资金流向' },
  //原有金额
-  { prop: 'amount', label: '变动金额' },
+  { prop: 'amount', label: '变动金额', isNumber: true },
  //余额变动
-  { prop: 'balance', label: '变动后余额' },
+  { prop: 'balance', label: '变动后余额' , isNumber: true},
  //现有余额
  // { prop: 'currentBalance', label: '现有余额' },
  //状态
--- a/src/views/capital/rechange/index.vue
+++ b/src/views/capital/rechange/index.vue
@ -4,7 +4,7 @@
        <div class="page-title">存款</div>

        <!-- 存款渠道列表：每行提供一个"存款"按钮 -->
-        <RechangeTable :table-data="channelList" :columns="tableColumns" :highlight-current-row="false">
+        <RechangeTable :table-data="channelList" :columns="tableColumns" :highlight-current-row="false" :loading="loading">
            <template #action="{ row }">
                <el-button type="primary" size="small" @click="handleOpenDialog(row)">
                    存款
@ -113,6 +113,7 @@ import { ElMessage } from 'element-plus'
 import { nextTick, onMounted, ref } from 'vue'
 import RechangeTable from '@/components/common/Table.vue'
 import RechangeDialog from '@/components/common/Dialog.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import { rechangeTableColumns } from './options'
 import { uploadImageApi } from '@/api/modules/upload'
 import { getRechargeChannelList, rechargeApi } from '@/api/modules/capital/rechangeChanl'
@ -151,6 +152,7 @@ const submitLoading = ref(false)
 const voucherUrl = ref('')
 const uploadLoading = ref(false)

+const { loading, startLoading, stopLoading } = usePageLoading()
 // 渠道列表数据
 const channelList = ref<ChannelRow[]>([])

@ -202,10 +204,13 @@ const rechangeFormRules = ref<FormRules<RechangeFormData>>({

 // 获取渠道列表
 const fetchChannelList = async () => {
+    startLoading()
    try {
        const res = await getRechargeChannelList() as ChannelRow[]
+        stopLoading()
        channelList.value = res || []
    } catch (error) {
+        stopLoading()
        console.error('获取充值渠道列表失败', error)
    }
 }
--- a/src/views/capital/rechange/options.ts
+++ b/src/views/capital/rechange/options.ts
@ -6,6 +6,6 @@ export const rechangeTableColumns = [
        label: '支持货币',
        align: 'center' as const
    },
-    { prop: 'channel_fee', label: '渠道费用', align: 'center' as const },
+    { prop: 'channel_fee', label: '渠道费用', align: 'center' as const , isNumber: true },
    { label: '操作', slotName: 'action', align: 'center' as const, width: 120 },
 ]
--- a/src/views/capital/rechangeChanl/index.vue
+++ b/src/views/capital/rechangeChanl/index.vue
@ -5,28 +5,14 @@
      <el-button type="primary" @click="handleEdit" v-auth="'channel_editChannel'">编辑</el-button>
      <el-button type="danger" @click="handleDelete" v-auth="'channel_delChannel'">删除</el-button>
    </div>
-    <DepositChannelTable
-      ref="tableRef"
-      :table-data="tableData"
-      :columns="tableColumnsOptions"
-      row-key="id"
-      @rowClick="handleRowClick"
-    />
-    <el-dialog
-      v-model="dialogVisible"
-      :title="dialogTitleType === 1 ? '添加充值渠道' : '编辑充值渠道'"
-      width="700"
-    >
-      <Form
-        :formItems="formItems"
-        :formRules="formRules"
-        :formData="formData"
-        :optionsMap="optionsMap"
-      />
+    <DepositChannelTable ref="tableRef" :table-data="tableData" :columns="tableColumnsOptions" row-key="id"
+      :loading="loading" @rowClick="handleRowClick" />
+    <el-dialog v-model="dialogVisible" :title="dialogTitleType === 1 ? '添加充值渠道' : '编辑充值渠道'" width="700">
+      <Form :formItems="formItems" ref="formRef" :formRules="formRules" :formData="formData" :optionsMap="optionsMap" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="submitDetail">确认</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitDetail">确认</el-button>
        </div>
      </template>
    </el-dialog>
@ -40,6 +26,7 @@ defineOptions({
 //组件
 import DepositChannelTable from '@/components/common/Table.vue'
 import Form from '@/components/common/Form.vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
 import { tableColumns, formItemsData, formRulesData, optionsMapData } from './options'
 import {
  getChannelList,
@ -65,7 +52,12 @@ const getStatusText = (status: number | string) => {
  return ['', '正常', '禁用'][status]
 }

+const formRef = ref()
+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
 const initData = async () => {
+  try {
+    startLoading()
    const res = await getChannelList()
    console.log(res)
    tableData.value = res.map((item: ChannelType) => ({
@ -73,6 +65,9 @@ const initData = async () => {
      statusStr: getStatusText(item.status),
    })) as ChannelType[]
    clearSelection()
+  } finally {
+    stopLoading()
+  }
 }

 //表格数据
@ -102,12 +97,18 @@ const formItems = ref(formItemsData)
 const formRules = ref(formRulesData)
 const optionsMap = ref(optionsMapData)
 const submitDetail = async () => {
-  dialogVisible.value = false
+  await formRef.value.validate()
+  startSubmitLoading();
+  try {
    if (dialogTitleType.value === 1) {
      await createChannel(formData.value)
    } else {
      await editChannel(formData.value)
    }
+  } finally {
+    dialogVisible.value = false
+    stopSubmitLoading();
+  }
  await initData()
 }

@ -199,4 +200,3 @@ onMounted(() => {
  }
 }
 </style>
-
--- a/src/views/capital/rechangeChanl/options.ts
+++ b/src/views/capital/rechangeChanl/options.ts
@ -4,7 +4,7 @@ export const tableColumns = [
  //存款渠道名称
  { label: '渠道名称', prop: 'name' },
  //存款渠道费用
-  { label: '渠道费用', prop: 'channel_fee' },
+  { label: '渠道费用', prop: 'channel_fee', isNumber: true },
  //存款渠道类型
  { label: '入金货币', prop: 'currency.symbol' },
  // 接口地址
--- a/src/views/capital/rechangeCheck/index.vue
+++ b/src/views/capital/rechangeCheck/index.vue
@ -19,36 +19,16 @@
      </template>
    </RechangeSearch>

-    <!-- 列表区域：改为真实接口数据，仍保留勾选列供后续审核动作使用 -->
-    <div class="table-wrapper">
-      <el-table
+    <!-- 列表区域：使用公共 Table 组件 -->
+    <Table
      ref="tableRef"
-        v-loading="loading"
-        :data="tableData"
-        border
-        height="100%"
+      :table-data="tableData"
+      :columns="tableColumns"
      row-key="id"
+      :loading="loading"
+      :show-selection="true"
      @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="55" align="center" />
-
-        <el-table-column label="序号" width="70" align="center">
-          <template #default="scope">
-            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
-          </template>
-        </el-table-column>
-
-        <el-table-column
-          v-for="column in tableColumns"
-          :key="column.prop"
-          :prop="column.prop"
-          :label="column.label"
-          :min-width="column.width"
-          :align="column.align || 'center'"
-          show-overflow-tooltip
    />
-      </el-table>
-    </div>

    <!-- 分页区域：使用接口返回的 total / current_page / per_page -->
    <RechangePagination
@ -65,9 +45,11 @@ defineOptions({
  name: 'RechangeCheck',
 })

-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, ref } from 'vue'
 import RechangeSearch from '@/components/common/Search.vue'
+import Table from '@/components/common/Table.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import RechangePagination from '@/components/common/Pagination.vue'
 import { exportToExcel } from '@/utils/exportToExcel'
 import { getRechargeCheckListApi, reviewRechargeOrder } from '@/api/modules/capital/rechargeCheck'
@ -101,10 +83,10 @@ interface SearchFormData {
 const searchOptions = ref(rechangeCheckSearch)
 const tableColumns = ref(rechangeCheckTableColumns)

+const { loading, startLoading, stopLoading } = usePageLoading()
 // 表格、勾选状态和 loading 状态。
 const tableData = ref<TableRow[]>([])
 const selectedRows = ref<TableRow[]>([])
-const loading = ref(false)

 // 分页状态。
 const total = ref(0)
@ -137,7 +119,7 @@ const getRechargeStatusText = (status: string | number | null | undefined) => {

 // 获取审核列表：page / page_size / start_time / end_time 必传，其余空值统一传 null。
 const getList = async () => {
-  loading.value = true
+  startLoading()
  selectedRows.value = []

  const params = {
@ -175,7 +157,7 @@ const getList = async () => {
    total.value = 0
    console.error('获取充值审核列表失败', error)
  } finally {
-    loading.value = false
+    stopLoading()
  }
 }

@ -220,10 +202,23 @@ const handleApprove = async () => {
    ElMessage.warning('请先选择要通过的记录')
    return
  }
-  console.log(selectedRows.value)
+  try {
+    await ElMessageBox.confirm(`是否确认通过该审核？订单号：${selectedRows.value[0].orderNo}`, '审核确认', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+
+  startLoading()
+  try {
    await reviewRechargeOrder({ id: selectedRows.value[0].id, status: '3' })
-  ElMessage.success('审核通过')
    await getList()
+  } finally {
+    stopLoading()
+  }
 }

 // 审核驳回：当前保留前端提示，等待后续接接口。
@ -232,10 +227,24 @@ const handleReject = async () => {
    ElMessage.warning('请先选择要驳回的记录')
    return
  }
+  try {
+    await ElMessageBox.confirm(`是否确认驳回该审核？订单号：${selectedRows.value[0].orderNo}`, '审核确认', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+
  //充值状态:1未审核,2未付款,3已付款,4驳回
+  startLoading()
+  try {
    await reviewRechargeOrder({ id: selectedRows.value[0].id, status: '4' })
-  ElMessage.success('审核驳回')
    await getList()
+  } finally {
+    stopLoading()
+  }
 }

 // 导出：先导出当前页接口数据，后续如需全量导出可切成独立导出接口。
--- a/src/views/capital/rechangeCheck/options.ts
+++ b/src/views/capital/rechangeCheck/options.ts
@ -39,12 +39,12 @@ export const rechangeCheckSearch = [
 // 表格列配置：返回数据与 `rechargeOrder` 一致，因此按同一份结构展示。
 export const rechangeCheckTableColumns = [
    { prop: 'orderNo', label: '订单号', align: 'center' as const, width: 220 },
-    { prop: 'userName', label: '用户名', align: 'center' as const, width: 160 },
+    { prop: 'userName', label: '用户名', align: 'center' as const },
    { prop: 'currency', label: '充值币种', align: 'center' as const, width: 120 },
-    { prop: 'amount', label: '充值金额', align: 'center' as const, width: 120 },
+    { prop: 'amount', label: '充值金额', align: 'center' as const, width: 120, isNumber: true },
    { prop: 'realCurrency', label: '实际币种', align: 'center' as const, width: 120 },
-    { prop: 'realAmount', label: '实际金额', align: 'center' as const, width: 120 },
+    { prop: 'realAmount', label: '实际金额', align: 'center' as const, width: 120, isNumber: true },
    { prop: 'rate', label: '汇率', align: 'center' as const, width: 100 },
    { prop: 'statusText', label: '状态', align: 'center' as const, width: 100 },
-    { prop: 'rechangeTime', label: '充值时间', align: 'center' as const, width: 180 },
+    { prop: 'rechangeTime', label: '充值时间', align: 'center' as const },
 ]
--- a/src/views/capital/withdraw/index.vue
+++ b/src/views/capital/withdraw/index.vue
@ -5,7 +5,7 @@
      :table-data="tableData"
      :columns="tableColumnsOptions"
      row-key="id"
-      v-loading="tableLoading"
+      :loading="loading"
      @rowClick="handleRowClick"
    >
      <template #action="{ row }">
@ -33,6 +33,7 @@ import { ref, reactive, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import Table from '@/components/common/Table.vue'
 import Pagination from '@/components/common/Pagination.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import WithdrawDialog from './components/WithdrawDialog.vue'
 import { tableColumns } from './options'
 import { getWithdrawChannel } from '@/api/modules/capital/withdraw'
@ -54,7 +55,7 @@ interface TableRow {

 const tableRef = ref()
 const tableData = ref<TableRow[]>([])
-const tableLoading = ref(false)
+const { loading, startLoading, stopLoading } = usePageLoading()
 const total = ref(0)
 const withdrawDialogVisible = ref(false)
 const currentChannelId = ref<number>()
@ -70,7 +71,7 @@ const tableColumnsOptions = tableColumns

 // 获取列表数据
 const getList = async () => {
-  tableLoading.value = true
+  startLoading()
  try {
    const res: any = await getWithdrawChannel()
    if (res) {
@ -83,7 +84,7 @@ const getList = async () => {
  } catch (error) {
    console.error('获取列表失败', error)
  } finally {
-    tableLoading.value = false
+    stopLoading()
  }
 }

--- a/src/views/capital/withdraw/options.ts
+++ b/src/views/capital/withdraw/options.ts
@ -5,7 +5,7 @@ export const tableColumns = [
  // 渠道名称
  { label: '渠道名称', prop: 'name' },
  // 渠道费用
-  { label: '渠道费用', prop: 'channel_fee' },
+  { label: '渠道费用', prop: 'channel_fee', isNumber: true },
  {
    label: '出金货币',
    prop: 'currency.symbol',
--- a/src/views/capital/withdrawChanl/index.vue
+++ b/src/views/capital/withdrawChanl/index.vue
@ -10,6 +10,7 @@
      :table-data="tableData"
      :columns="tableColumnsOptions"
      row-key="id"
+      :loading="loading"
      @rowClick="handleRowClick"
    />
    <el-dialog
@ -18,6 +19,7 @@
      width="700"
    >
      <Form
+        ref="formRef" 
        :formItems="formItems"
        :formRules="formRules"
        :formData="formData"
@ -26,7 +28,7 @@
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="submitDetail">确认</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitDetail">确认</el-button>
        </div>
      </template>
    </el-dialog>
@ -39,6 +41,7 @@ defineOptions({
 //组件
 import Table from '@/components/common/Table.vue'
 import Form from '@/components/common/Form.vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
 import { tableColumns, formItemsData, formRulesData, optionsMapData } from './options'
 import {
  getChannelWithdrawList,
@ -65,8 +68,13 @@ const getStatusText = (status: number | string) => {
  return ['', '正常', '禁用'][status]
 }

+const formRef = ref()
+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
 const initData = async () => {
+  startLoading()
  const res = await getChannelWithdrawList()
+  stopLoading()
  console.log(res)
  tableData.value = res.map((item: ChannelType) => ({
    ...item,
@ -96,6 +104,9 @@ const formItems = ref(formItemsData)
 const formRules = ref(formRulesData)
 const optionsMap = ref(optionsMapData)
 const submitDetail = async () => {
+  await formRef.value.validate()
+  startSubmitLoading();
+  try {
    dialogVisible.value = false
    if (dialogTitleType.value === 1) {
      await createChannelWithdraw(formData.value)
@ -103,6 +114,9 @@ const submitDetail = async () => {
      await editChannelWithdraw(formData.value)
    }
    await initData()
+  } finally {
+    stopSubmitLoading();
+  }
 }

 let currentRow: any = {}
--- a/src/views/capital/withdrawChanl/options.ts
+++ b/src/views/capital/withdrawChanl/options.ts
@ -4,7 +4,7 @@ export const tableColumns = [
  //渠道名称
  { label: '渠道名称', prop: 'name' },
  //渠道费用
-  { label: '渠道费用', prop: 'channel_fee' },
+  { label: '渠道费用', prop: 'channel_fee', isNumber: true },
  //货币类型
  // { label: '入金货币', prop: 'currency.name' },
  // 接口地址
--- a/src/views/capital/withdrawCheck/index.vue
+++ b/src/views/capital/withdrawCheck/index.vue
@ -8,25 +8,16 @@
            </template>
        </WithdrawSearch>

-        <!-- 列表区域：当前使用页面内表格，避免改动公共 Table 组件 -->
-        <div class="table-wrapper">
-            <el-table v-loading="loading" :data="tableData" border height="100%" row-key="id"
-                @selection-change="handleSelectionChange">
-                <!-- 勾选列：用于后续审核通过/驳回 -->
-                <el-table-column type="selection" width="55" align="center" />
-
-                <!-- 序号列：根据当前分页动态计算 -->
-                <el-table-column label="序号" width="70" align="center">
-                    <template #default="scope">
-                        {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
-                    </template>
-                </el-table-column>
-
-                <!-- 业务字段列：通过配置项统一渲染 -->
-                <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"
-                    :width="column.width" :align="column.align || 'center'" show-overflow-tooltip />
-            </el-table>
-        </div>
+        <!-- 列表区域：使用公共 Table 组件 -->
+        <Table
+            ref="tableRef"
+            :table-data="tableData"
+            :columns="tableColumns"
+            row-key="id"
+            :loading="loading"
+            :show-selection="true"
+            @selection-change="handleSelectionChange"
+        />

        <!-- 分页区域：复用项目内分页组件 -->
        <WithdrawPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
@ -43,6 +34,8 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
 import dayjs from 'dayjs'
 import WithdrawSearch from '@/components/common/Search.vue'
+import Table from '@/components/common/Table.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import WithdrawPagination from '@/components/common/Pagination.vue'
 import { withdrawCheckSearch, withdrawCheckTableColumns } from './options'
 import { getWithdrawReviewList, withdrawReviewOrder } from '@/api/modules/capital/withdraw'
@ -117,11 +110,11 @@ const searchForm = ref({
    timeRange: [] as string[]
 })

+const { loading, startLoading, stopLoading } = usePageLoading()
 // 表格、勾选状态和 loading 状态
 const tableColumns = computed(() => withdrawCheckTableColumns)
 const tableData = ref<TransformedTableRow[]>([])
 const selectedRows = ref<TableRow[]>([])
-const loading = ref(false)

 // 审核操作 loading 状态
 const approveLoading = ref(false)
@ -172,7 +165,7 @@ interface ListResponse {

 // 获取列表数据
 const getList = async () => {
-    loading.value = true
+    startLoading()
    selectedRows.value = []
    
    const [start_time, end_time] = searchForm.value.timeRange || []
@ -192,7 +185,7 @@ const getList = async () => {
        console.error('获取提现审核列表失败:', error)
        ElMessage.error('获取列表失败')
    } finally {
-        loading.value = false
+        stopLoading()
    }
 }

--- a/src/views/capital/withdrawCheck/options.ts
+++ b/src/views/capital/withdrawCheck/options.ts
@ -25,18 +25,18 @@ export const withdrawCheckSearch = [
 // 表格列配置
 export const withdrawCheckTableColumns = [
    { prop: 'trade_id', label: '订单号', align: 'center' as const, width: 200 },
-    { prop: 'user_name', label: '账户持有人', align: 'center' as const, width: 120 },
+    { prop: 'user_name', label: '账户持有人', align: 'center' as const},
    { prop: 'withdraw_currency_symbol', label: '取款币种', align: 'center' as const, width: 100 },
-    { prop: 'withdraw_amount', label: '取款金额', align: 'center' as const, width: 120 },
+    { prop: 'withdraw_amount', label: '取款金额', align: 'center' as const, width: 120, isNumber: true },
    { prop: 'real_currency_symbol', label: '到账币种', align: 'center' as const, width: 100 },
-    { prop: 'real_amount', label: '到账金额', align: 'center' as const, width: 120 },
+    { prop: 'real_amount', label: '到账金额', align: 'center' as const, width: 120, isNumber: true },
    { prop: 'rate', label: '汇率', align: 'center' as const, width: 100 },
    { prop: 'channel_name', label: '渠道', align: 'center' as const, width: 140 },
-    { prop: 'withdraw_service_fee', label: '服务费', align: 'center' as const, width: 100 },
-    { prop: 'withdraw_head_fee', label: '总部手续费', align: 'center' as const, width: 120 },
-    { prop: 'withdraw_fee_handle', label: '代理手续费', align: 'center' as const, width: 120 },
-    { prop: 'withdraw_point_diff', label: '点差', align: 'center' as const, width: 100 },
-    { prop: 'withdraw_risk_fee', label: '风控费', align: 'center' as const, width: 100 },
-    { prop: 'withdraw_address', label: '提现地址', align: 'center' as const, width: 180 },
-    { prop: 'created_at', label: '申请时间', align: 'center' as const, width: 180 }
+    { prop: 'withdraw_service_fee', label: '服务费', align: 'center' as const, width: 100, isNumber: true },
+    { prop: 'withdraw_head_fee', label: '总部手续费', align: 'center' as const, width: 120, isNumber: true },
+    { prop: 'withdraw_fee_handle', label: '代理手续费', align: 'center' as const, width: 120, isNumber: true },
+    { prop: 'withdraw_point_diff', label: '点差', align: 'center' as const, width: 100, isNumber: true },
+    { prop: 'withdraw_risk_fee', label: '风控费', align: 'center' as const, isNumber: true },
+    { prop: 'withdraw_address', label: '提现地址', align: 'center' as const},
+    { prop: 'created_at', label: '申请时间', align: 'center' as const}
 ]
--- a/src/views/mould/handleFee/index.vue
+++ b/src/views/mould/handleFee/index.vue
@ -2,63 +2,28 @@
  <div class="mould-fee table_form-container">
    <header>
      <div class="header-actions">
-        <el-button type="primary" @click="addFee" v-auth="'feeHandl_createFeeSetting'"
-          >添加模板</el-button
-        >
-        <el-button type="primary" @click="editFee" v-auth="'feeHandl_editFeeSetting'"
-          >编辑模板</el-button
-        >
-        <el-button type="primary" @click="changeStatus(1)" v-auth="'feeHandl_editFeeSetting'"
-          >启用模板</el-button
-        >
-        <el-button type="danger" @click="changeStatus(2)" v-auth="'feeHandl_editFeeSetting'"
-          >禁用模板</el-button
-        >
-        <el-button type="primary" @click="editFeeDetail" v-auth="'feeHandl_setFeeSettingDetail'"
-          >编辑模板详情</el-button
-        >
+        <el-button type="primary" @click="addFee" v-auth="'feeHandl_createFeeSetting'">添加模板</el-button>
+        <el-button type="primary" @click="editFee" v-auth="'feeHandl_editFeeSetting'">编辑模板</el-button>
+        <el-button type="primary" @click="changeStatus(1)" v-auth="'feeHandl_editFeeSetting'">启用模板</el-button>
+        <el-button type="danger" @click="changeStatus(2)" v-auth="'feeHandl_editFeeSetting'">禁用模板</el-button>
+        <el-button type="primary" @click="editFeeDetail" v-auth="'feeHandl_setFeeSettingDetail'">编辑模板详情</el-button>
      </div>
    </header>
    <div class="table-container">
      <div class="table-container-left">
-        <el-table
-          ref="singleTableRef"
-          height="100%"
-          :data="tableData"
-          highlight-current-row
-          border
-          @current-change="handleCurrentChange"
-        >
-          <el-table-column type="index" width="55" />
-          <el-table-column
-            v-for="column in tableColumns"
-            :key="column.prop"
-            :prop="column.prop"
-            :label="column.label"
-          />
-        </el-table>
+        <Table ref="singleTableRef" :table-data="tableData"  :columns="tableColumns" row-key="id" :loading="loading"
+          :highlight-current-row="true" @current-change="handleCurrentChange" />
      </div>
      <div class="table-container-right">
-        <el-table height="100%" :data="tableDataDetail">
-          <el-table-column
-            v-for="column in tableColumnsDetail"
-            :key="column.prop"
-            :prop="column.prop"
-            :label="column.label"
-          />
-        </el-table>
+        <Table row-key="id" :table-data="tableDataDetail" :columns="tableColumnsDetail" :loading="detailLoading" />
      </div>
    </div>
-    <el-dialog
-      v-model="dialogVisible"
-      :title="dialogTitleType === 1 ? '添加手续费模板' : '编辑手续费模板'"
-      width="500"
-    >
+    <el-dialog v-model="dialogVisible" :title="dialogTitleType === 1 ? '添加手续费模板' : '编辑手续费模板'" width="500">
      <Form :formItems="formItems" :formRules="formRules" :formData="formData" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="submit">确认</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submit">确认</el-button>
        </div>
      </template>
    </el-dialog>
@ -67,12 +32,7 @@
        <template v-for="column in tableColumnsDetail" :key="column.prop">
          <el-table-column v-if="column.prop === 'fee'" :prop="column.prop" :label="column.label">
            <template #default="scope">
-              <el-input-number
-                :min="0"
-                :max="999999999"
-                :controls="false"
-                v-model="scope.row.fee"
-              />
+              <el-input-number :min="0" :max="999999999" :controls="false" v-model="scope.row.fee" />
            </template>
          </el-table-column>
          <el-table-column v-else :prop="column.prop" :label="column.label" />
@ -81,7 +41,7 @@
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detaildialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="submitDetail">确认</el-button>
+          <el-button type="primary" :loading="submitDetailLoading" @click="submitDetail">确认</el-button>
        </div>
      </template>
    </el-dialog>
@ -93,7 +53,9 @@
 defineOptions({
  name: 'HandleFee'
 })
+
 import { ref, onMounted } from 'vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
 import {
  getFeeSettingList,
  getFeeSettingDetail,
@ -102,18 +64,42 @@ import {
  setFeeSettingDetail,
 } from '@/api/modules/mould/handleFee.ts'
 import Form from '@/components/common/Form.vue'
+import Table from '@/components/common/Table.vue'
 import { formDataList, formRulesList } from './option.ts'

+// 弹窗相关
 const dialogVisible = ref(false)
 const dialogTitleType = ref(1)
+
+// 表单相关
 const formData = ref({
  name: '',
  status: 1,
  type: 2,
  description: '',
 })
-const formItems = ref(formDataList)
-const formRules = ref(formRulesList)
+const formItems = formDataList
+const formRules = formRulesList
+
+// 详情弹窗相关
+const detaildialogVisible = ref(false)
+
+// 加载状态
+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: detailLoading, startButtonLoading: startDetailLoading, stopButtonLoading: stopDetailLoading } = useButtonLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
+const { buttonLoading: submitDetailLoading, startButtonLoading: startSubmitDetailLoading, stopButtonLoading: stopSubmitDetailLoading } = useButtonLoading()
+
+// 主表格相关
+const tableData = ref<any[]>([])
+const tableColumns = [
+  { prop: 'name', label: '名称' },
+  { prop: 'type', label: '状态' },
+]
+const currentRow = ref<Record<string, any>>({})
+const singleTableRef = ref()
+
+// 重置表单数据
 const resetFormData = () => {
  formData.value = {
    name: '',
@ -123,56 +109,72 @@ const resetFormData = () => {
  }
 }

-const tableData = ref([])
-const tableColumns = ref([
-  { prop: 'name', label: '名称' },
-  { prop: 'type', label: '状态' },
-])
-const currentRow = ref({})
-const singleTableRef = ref()
-const setCurrent = (row) => {
-  singleTableRef.value.setCurrentRow(row)
-}
-const handleCurrentChange = (row: any) => {
-  currentRow.value = row
-  getItemDetail(row.id)
+// 设置当前选中行
+const setCurrent = (row: any) => {
+  singleTableRef.value?.setCurrentRow(row)
 }

-const tableDataDetail = ref([])
-const tableColumnsDetail = ref([
+// 主表格行选中变化
+const handleCurrentChange = (row: any) => {
+  currentRow.value = row
+  fetchItemDetail(row.id)
+}
+
+// 详情表格相关
+const tableDataDetail = ref<any[]>([])
+const tableColumnsDetail = [
  { prop: 'name', label: '品种' },
  { prop: 'code', label: '编号' },
  { prop: 'fee', label: '开仓手续费' },
-])
+]

+// 获取主表格数据
 const getTableData = async () => {
+  startLoading()
+  try {
    const res = await getFeeSettingList()
+    tableData.value = Array.isArray(res) ? res : []
+    handleTableDataAfterLoad()
+  } finally {
+    stopLoading()
+  }
+}
+
+// 处理表格数据加载后的逻辑
+const handleTableDataAfterLoad = () => {
  const savedId = currentRow.value?.id
-  tableData.value = res
-  console.log(res)
-  if (res && res.length > 0) {
-    const targetRow = savedId ? res.find((item: any) => item.id === savedId) : null
-    if (targetRow) {
-      setCurrent(targetRow)
-      handleCurrentChange(targetRow)
-    } else {
-      setCurrent(res[0])
-      handleCurrentChange(res[0])
-    }
+
+  if (tableData.value.length === 0) {
+    tableDataDetail.value = []
+    return
  }
+
+  const targetRow = savedId ? tableData.value.find((item) => item.id === savedId) : null
+  const rowToSelect = targetRow || tableData.value[0]
+
+  setCurrent(rowToSelect)
+  handleCurrentChange(rowToSelect)
 }

-const getItemDetail = async (id: number) => {
+// 获取详情数据
+const fetchItemDetail = async (id: number) => {
+  startDetailLoading();
+  try {
    const res = await getFeeSettingDetail({ id })
-  tableDataDetail.value = res
+    tableDataDetail.value = res || []
+  } finally {
+    stopDetailLoading();
+  }
 }

+// 打开添加弹窗
 const addFee = () => {
  dialogVisible.value = true
  dialogTitleType.value = 1
  resetFormData()
 }

+// 打开编辑弹窗
 const editFee = () => {
  dialogVisible.value = true
  dialogTitleType.value = 2
@ -184,6 +186,7 @@ const editFee = () => {
  }
 }

+// 切换模板状态
 const changeStatus = (status: number) => {
  dialogTitleType.value = 2
  formData.value = {
@ -196,8 +199,10 @@ const changeStatus = (status: number) => {
  submit()
 }

+// 提交主表单
 const submit = async () => {
-  console.log(formData.value)
+  startSubmitLoading();
+  try {
    if (dialogTitleType.value === 1) {
      await createFeeSetting(formData.value)
    } else {
@ -206,25 +211,36 @@ const submit = async () => {
    resetFormData()
    dialogVisible.value = false
    getTableData()
+  } finally {
+    stopSubmitLoading();
+  }
 }

-const detaildialogVisible = ref(false)
+// 打开编辑详情弹窗
 const editFeeDetail = () => {
  detaildialogVisible.value = true
-  console.log(tableDataDetail.value)
 }

+// 提交详情表单
 const submitDetail = async () => {
-  let contents_json = {}
+  startSubmitDetailLoading();
+  try {
+    const contentsJson: Record<string, any> = {}
+
    tableDataDetail.value.forEach((item) => {
-    contents_json[item.variety_id] = item.fee
+      contentsJson[item.variety_id] = item.fee
    })
+
    await setFeeSettingDetail({
      id: currentRow.value.id,
-    contents_json: JSON.stringify(contents_json),
+      contents_json: JSON.stringify(contentsJson),
    })
+
    detaildialogVisible.value = false
    getTableData()
+  } finally {
+    stopSubmitDetailLoading();
+  }
 }

 onMounted(() => {
@ -237,19 +253,23 @@ onMounted(() => {
  // height: 100%;
  // overflow: hidden;
 }
+
 header {
  margin-bottom: 8px;
 }
+
 .table-container {
  display: flex;
  column-gap: 20px;
  height: calc(100% - 40px);
+
  .table-container-left {
    width: 300px;
    height: 100%;
    flex: 0 0 auto;
    overflow: hidden;
  }
+
  .table-container-right {
    flex: 1;
    height: 100%;
@ -257,3 +277,4 @@ header {
  }
 }
 </style>
+
--- a/src/views/mould/risk/index.vue
+++ b/src/views/mould/risk/index.vue
@ -2,69 +2,31 @@
  <div class="risk table_form-container">
    <div class="bar">
      <span>风控管理</span>
-      <el-button type="primary" @click="handleAddRisk" v-auth="'riskControl_createRiskControl'"
-        >添加</el-button
-      >
-      <el-button
-        type="primary"
-        @click="handleModifyRisk"
-        v-auth="'riskControl_editRiskControlSetting'"
-        >修改</el-button
-      >
-      <el-button
-        type="danger"
-        @click="handleChangeStatus(2)"
-        v-auth="'riskControl_editRiskControlSetting'"
-        >停用</el-button
-      >
-      <el-button
-        type="primary"
-        @click="handleChangeStatus(1)"
-        v-auth="'riskControl_editRiskControlSetting'"
-        >启用</el-button
-      >
+      <el-button type="primary" @click="handleAddRisk" v-auth="'riskControl_createRiskControl'">添加</el-button>
+      <el-button type="primary" @click="handleModifyRisk" v-auth="'riskControl_editRiskControlSetting'">修改</el-button>
+      <el-button type="danger" @click="handleChangeStatus(2)"
+        v-auth="'riskControl_editRiskControlSetting'">停用</el-button>
+      <el-button type="primary" @click="handleChangeStatus(1)"
+        v-auth="'riskControl_editRiskControlSetting'">启用</el-button>
    </div>
    <!-- 表格 -->
    <div class="risk-table-content">
-      <RiskTableSwitch
-        :columns="tableColumnsSwitch"
-        :table-data="tableTreeSwitch"
-        class="table-switch"
-        @row-click="handleRowClick"
-        row-key="id"
-        highlight-current-row
-        :current-row-key="selectedRowId"
-      >
+      <RiskTableSwitch :columns="tableColumnsSwitch" :table-data="tableTreeSwitch" class="table-switch"
+        @row-click="handleRowClick" row-key="id" highlight-current-row :current-row-key="selectedRowId"
+        :loading="loading">
        <template #status="{ row }">
          <span>{{ row.status === 1 ? '启用' : '停用' }}</span>
        </template>
      </RiskTableSwitch>
-      <RiskTableContent
-        :columns="tableColumnsContent"
-        :table-data="currentContent"
-        class="table-content"
-        row-key="id"
-      >
+      <RiskTableContent :columns="tableColumnsContent" :table-data="currentContent" class="table-content" row-key="id"
+        :loading="detailLoading">
      </RiskTableContent>
    </div>
    <!-- dialog -->
-    <RiskDialog
-      :visible="dialogVisible"
-      :title="dialogTitle"
-      :type="dialogType"
-      @confirm="handleSubmit"
-      @cancel="handleCancel"
-      @close="handleClose"
-    >
-      <RiskForm
-        :form-data="dialogForm"
-        :form-rules="riskRules"
-        :form-items="RiskFormItems"
-        :options-map="riskFormOptionsMap"
-        :row-gutter="rowGutter"
-        :col-span="colSpan"
-        ref="riskFormRef"
-      />
+    <RiskDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" :button-loading="submitLoading" @confirm="handleSubmit"
+      @cancel="handleCancel" @close="handleClose">
+      <RiskForm :form-data="dialogForm" :form-rules="riskRules" :form-items="RiskFormItems"
+        :options-map="riskFormOptionsMap" :row-gutter="rowGutter" :col-span="colSpan" ref="riskFormRef" />
    </RiskDialog>
  </div>
 </template>
@ -75,6 +37,10 @@ defineOptions({
  name: 'Risk'
 })
 // 组件
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
+
 import RiskTableSwitch from '@/components/common/Table.vue'
 import RiskTableContent from '@/components/common/Table.vue'
 import RiskDialog from '@/components/common/Dialog.vue'
@ -132,6 +98,8 @@ const dialogForm = ref({
 })
 const riskRules = ref(rules())
 const riskFormRef = ref()
+const detailLoading = ref(false)
+

 const RiskFormItems = ref(formItem)
 const riskFormOptionsMap = ref({
@ -165,7 +133,9 @@ const colSpan = ref(12)
 * @description: 定义请求数据方法
 */
 const getRiskList = async () => {
+  startLoading()
  const data: any = await getRiskListApi()
+  stopLoading()
  // 保存原始数据
  riskOriginData.value = data
  // 处理数据
@ -265,7 +235,7 @@ const handleModifyRisk = () => {
  } as any
 }

-const handleChangeStatus = async (status) => {
+const handleChangeStatus = async (status:any) => {
  dialogTitle.value = '停用'
  dialogType.value = 'status'
  await editRiskApi({ ...selectedRow.value, status: status })
@ -276,6 +246,7 @@ const handleChangeStatus = async (status) => {
 * @description: 定义表格方法
 */
 const handleRowClick = (row: any) => {
+  detailLoading.value = true
  // 从原始数据中匹配完整的行信息
  const originRow = riskOriginData.value.find((item) => item.id === row.id)
  if (originRow) {
@ -285,7 +256,7 @@ const handleRowClick = (row: any) => {
  }
  selectedRowId.value = row.id
  // 找到对应的数据并更新右侧内容
-  const targetItem = tableTreeContent.value.find((item: any) => item.id === row.id)
+  const targetItem:any = tableTreeContent.value.find((item: any) => item.id === row.id)

  const fields = [
    { text: '单笔开仓最大数量' + targetItem.maxOpenPosition },
@ -305,12 +276,16 @@ const handleRowClick = (row: any) => {
  if (targetItem) {
    currentContent.value = fields
  }
+
+  detailLoading.value = false
 }

 /**
 * @description: 定义弹窗方法
 */
 const handleSubmit = async () => {
+  startSubmitLoading()
+  try {
    await riskFormRef.value?.validate()
    const params = {
      name: dialogForm.value.name,
@ -358,6 +333,9 @@ const handleSubmit = async () => {
      dialogTitle.value = '编辑'
      dialogType.value = 'edit'
    }
+  } finally {
+    stopSubmitLoading()
+  }
 }
 const handleCancel = () => {
  dialogVisible.value = false
--- a/src/views/order/history/index.vue
+++ b/src/views/order/history/index.vue
@ -1,8 +1,8 @@
 <template>
    <div class="table_form-container">
        <!-- 搜索 -->
-        <CustomerTradeOrderSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
-            @reset="handleReset"  @blur-input="getSubAccountList">
+        <CustomerTradeOrderSearch :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions"
+            @search="handleSearch" @reset="handleReset" @blur-input="getSubAccountList">
        </CustomerTradeOrderSearch>
        <div class="bar" v-if="searchForm.orderId === '1'">
            <div>持仓量:0</div>
@ -10,7 +10,8 @@
            <div>交易盈亏:0.00 USD</div>
        </div>
        <!-- 表格 -->
-        <CustomerTradeOrderTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" />
+        <CustomerTradeOrderTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id"
+            :loading="loading" />

        <!-- 分页 -->
        <CustomerTradeOrderPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
@ -27,6 +28,7 @@ defineOptions({
 // 组件
 import CustomerTradeOrderSearch from '@/components/common/Search.vue'
 import CustomerTradeOrderTable from '@/components/common/Table.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import CustomerTradeOrderPagination from '@/components/common/Pagination.vue'
 // 配置以及表单验证
 import { search, tradeOrderTableColumns, positionOrderTableColumns } from './options'
@ -63,6 +65,7 @@ const subAccountOptions = ref([])
 //获取用户数据，用来判断当前查询的是不是自己的账号
 const userInfo: any = getStorage('userInfo')

+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
 * @description: 定义表格数据
 */
@ -80,6 +83,8 @@ const total = ref(0)
 * @description: 定义公共请求数据方法
 */
 const getCustomerTradeOrderList = async () => {
+    try {
+        startLoading()
        const params = {
            page: currentPage.value,
            page_size: pageSize.value,
@ -92,7 +97,6 @@ const getCustomerTradeOrderList = async () => {
        }
        console.log(params)
        const data: any = await getCustomTradeOrderListApi(params)
-
        //表格数据
        // table数据映射
        tableTree.value = data.data.map((item: any) => ({
@ -112,6 +116,10 @@ const getCustomerTradeOrderList = async () => {
        total.value = data.total
        currentPage.value = data.current_page
        pageSize.value = Number(data.per_page)
+    } finally {
+
+        stopLoading()
+    }
 }

 const getSubAccountList = async () => {
--- a/src/views/order/position/index.vue
+++ b/src/views/order/position/index.vue
@ -2,11 +2,8 @@
  <div class="position-stat table_form-container">
    <!-- 搜索 -->
    <PositionStatSearch 
-      :search-form="searchForm"
-      :search-options="searchOptions"
-      @search="handleSearch"
-      @reset="handleReset"
-    >
+      :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
+      @reset="handleReset">
      <!--            <template #button="{ form }">-->
      <!--                <el-button type="primary" @click="handleExport()">-->
      <!--                    导出-->
@ -14,11 +11,8 @@
      <!--            </template>-->
    </PositionStatSearch>
    <!-- 表格 -->
-    <PositionStatTable
-      :table-data="orderPositionStore.positionOrderList"
-      :columns="tableColumnsOptions"
-      row-key="id"
-    />
+    <PositionStatTable :table-data="orderPositionStore.positionOrderList" :columns="tableColumnsOptions"
+      :loading="loading" row-key="id" />
  </div>
 </template>

@ -35,6 +29,10 @@ import { search, tableColumns } from './options'

 import { useTransactionStore } from '@/stores/modules/transaction.ts'
 import { useOrderPositionStore } from '@/stores/modules/orderPosition.ts'
+import { usePageLoading } from '@/composables/useLoading'
+
+// 按钮 loading
+const { loading, startLoading, stopLoading } = usePageLoading()

 // 导出表格
 import { exportToExcel } from '@/utils/exportToExcel'
@ -57,11 +55,15 @@ const tableColumnsOptions = ref(tableColumns)
 * @description: 定义搜索方法
 */
 const handleSearch = async () => {
+  try {
+    startLoading()
    const data = await checkAccountIdIsSonForUser({ account_id: searchForm.value.account_id })
+
    if (!data.flag) {
      return ElMessage.warning('请输入下级ID')
    }
    transactionStore.getPositionList(searchForm.value.account_id)
+  } finally { stopLoading() }
 }
 const handleReset = () => {
  console.log('重置搜索')
--- a/src/views/order/position/options.ts
+++ b/src/views/order/position/options.ts
@ -14,9 +14,9 @@ export const tableColumns = [
    // 操作类型
    { prop: 'tradeType', label: '操作类型' },
    // 金额
-    { prop: 'amount', label: '金额' },
+    { prop: 'amount', label: '金额', isNumber: true },
    // 交易数量
-    { prop: 'tradeQty', label: '交易数量' },
+    { prop: 'tradeQty', label: '交易数量'},
    // 交易时间
    { prop: 'tradeTime', label: '交易时间' },
    // 浮动盈亏
--- a/src/views/order/rechange/index.vue
+++ b/src/views/order/rechange/index.vue
@ -2,6 +2,7 @@
  <div class="order-rechange-page table_form-container">
    <!-- 搜索区域：按接口参数保留订单号、用户名称、状态、开始/结束时间 -->
    <OrderRechangeSearch
+      :buttonLoading="loading"
      :search-form="searchForm"
      :search-options="searchOptions"
      @search="handleSearch"
@ -13,6 +14,7 @@
      :table-data="tableTree"
      :columns="tableColumnsOptions"
      :highlight-current-row="false"
+      :loading="loading"
    >
      <!-- 操作列插槽 -->
 <!--      <template #operation="{ row }">-->
@ -43,6 +45,7 @@ defineOptions({
 import { onMounted, ref } from 'vue'
 import OrderRechangeSearch from '@/components/common/Search.vue'
 import OrderRechangeTable from '@/components/common/Table.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import OrderRechangePagination from '@/components/common/Pagination.vue'
 import { getRechargeOrderListApi, reviewRechargeOrder } from '@/api/modules/order/rechange.ts'
 import { search, tableColumns } from './options'
@ -86,6 +89,7 @@ const createDefaultSearchForm = (): SearchFormData => ({

 const searchForm = ref<SearchFormData>(createDefaultSearchForm())

+const { loading, startLoading, stopLoading } = usePageLoading()
 // 表格数据与列配置。
 const tableTree = ref<RechangeOrderItem[]>([])
 const tableColumnsOptions = ref(tableColumns)
@ -109,6 +113,7 @@ const getRechargeStatusText = (status: string | number | null | undefined) => {

 // 获取充值订单列表：把接口返回字段统一映射成页面表格结构。
 const getRechargeOrderList = async () => {
+  startLoading()
  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
@ -150,6 +155,8 @@ const getRechargeOrderList = async () => {
    tableTree.value = []
    total.value = 0
    console.error('获取充值订单列表失败', error)
+  } finally {
+    stopLoading()
  }
 }

--- a/src/views/order/rechange/options.ts
+++ b/src/views/order/rechange/options.ts
@ -51,7 +51,7 @@ export const search = [
 export const tableColumns = [
  { prop: 'orderNo', label: '订单号', align: 'center' as const },
  { prop: 'currency', label: '充值币种', align: 'center' as const },
-  { prop: 'amount', label: '金额', align: 'center' as const },
+  { prop: 'amount', label: '金额', align: 'center' as const, isNumber: true },
  { prop: 'statusText', label: '状态', align: 'center' as const },
  { prop: 'rechangeTime', label: '充值时间', align: 'center' as const },
  { prop: 'rechangeAccount', label: '充值账号', align: 'center' as const },
--- a/src/views/order/transfer/index.vue
+++ b/src/views/order/transfer/index.vue
@ -2,6 +2,7 @@
  <div class="table_form-container">
    <!-- 搜索 -->
    <TransferSearch
+      :buttonLoading="loading" 
      :search-form="searchForm"
      :search-options="searchOptions"
      @search="handleSearch"
@ -16,6 +17,7 @@
      :table-data="tableTree"
      :columns="tableColumnsOptions"
      row-key="id"
+      :loading="loading"
      ref="tableRef"
    >
    </TransferTable>
@ -37,6 +39,7 @@ defineOptions({
 // 组件
 import TransferSearch from '@/components/common/Search.vue'
 import TransferTable from '@/components/common/Table.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import TransferPagination from '@/components/common/Pagination.vue'
 // 配置以及表单验证
 import { search, tableColumns } from './options'
@ -54,12 +57,13 @@ const initTime = getRecentSevenDays()
 /**
 * @description: 定义搜索数据
 */
-const searchForm = ref({
+const searchForm = ref<any>({
  transferAccount: '',
  type: '',
  transferTime: [initTime.start, initTime.end],
 })
 const searchOptions = ref(search)
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
 * @description: 定义表格数据
 */
@ -77,6 +81,7 @@ const total = ref(0)
 */

 const getTransferDetailList = async () => {
+  startLoading()
  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
@ -108,6 +113,8 @@ const getTransferDetailList = async () => {
  }))
  // 分页数据
  total.value = data.total
+
+  stopLoading()
  currentPage.value = data.current_page
  pageSize.value = Number(data.per_page)
 }
--- a/src/views/order/withdraw/options.ts
+++ b/src/views/order/withdraw/options.ts
@ -31,7 +31,7 @@ export const search = [
 export const tableColumns = [
    { prop: 'orderNo', label: '订单号', align: 'center' as const },
    { prop: 'currency', label: '提现币种', align: 'center' as const },
-    { prop: 'amount', label: '金额', align: 'center' as const },
+    { prop: 'amount', label: '金额', align: 'center' as const, isNumber: true },
    { prop: 'statusText', label: '状态', align: 'center' as const },
    { prop: 'withdrawTime', label: '提现时间', align: 'center' as const },
    { prop: 'withdrawAccount', label: '提现账号', align: 'center' as const },
--- a/src/views/profile/agent/index.vue
+++ b/src/views/profile/agent/index.vue
@ -1,11 +1,11 @@
 <template>
  <div class="table_form-container">
    <!-- 搜索 -->
-    <CustomerListSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
+    <CustomerListSearch :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
      @reset="handleReset"></CustomerListSearch>
    <!-- 表格 --> 
      <CustomerListTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="userId"
-        :default-sort="{ prop: 'createTime', order: 'descending' }" @expand-change="handleGetSubList">
+        :default-sort="{ prop: 'createTime', order: 'descending' }" :loading="loading" @expand-change="handleGetSubList">
        <template #marginRatio="{ row }">
          <el-button v-if="row.role_id === 5" type="primary" size="small" v-auth="'agent_getSelfVarietyPointDiffConfig'"
            @click="handleMarginRatio(row)">
@ -37,7 +37,7 @@
      @pagination-change="handlePaginationChange" />
    <!-- dialog -->
    <CustomerListDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" :fullscreen="dialogFullscreen"
-      :show-footer="dialogType !== 'view'" @confirm="handleSubmit" @cancel="handleCancel" @close="handleClose">
+      :show-footer="dialogType !== 'view'" :button-loading="submitLoading" @confirm="handleSubmit" @cancel="handleCancel" @close="handleClose">
      <CustomerListTable :table-data="marginRatioTree" :columns="marginRatioTableColumnsOptions" row-key="id"
        v-if="dialogType === 'editMarginRatio'" style="height: 500px">
        <template #assignedPointDiff="{ row }">
@ -54,7 +54,7 @@
    </CustomerListDialog>

    <!-- 调整金额弹窗 -->
-    <CustomerListDialog :visible="adjustAmountVisible" title="调整金额" type="adjust" @confirm="handleAdjustAmountSubmit"
+    <CustomerListDialog :visible="adjustAmountVisible" title="调整金额" type="adjust" :button-loading="adjustAmountLoading" @confirm="handleAdjustAmountSubmit"
      @cancel="handleAdjustAmountCancel" @close="handleAdjustAmountClose">
      <el-form :model="adjustAmountForm" :rules="adjustAmountRules" ref="adjustAmountFormRef" label-width="120px">
        <el-form-item label="账号名" prop="username">
@ -78,7 +78,7 @@

    <!-- 修改客户弹窗 -->
    <CustomerListDialog :visible="editCustomerVisible" title="修改客户" type="editCustomer"
-      @confirm="handleEditCustomerSubmit" @cancel="handleEditCustomerCancel" @close="handleEditCustomerClose">
+      :button-loading="editCustomerLoading" @confirm="handleEditCustomerSubmit" @cancel="handleEditCustomerCancel" @close="handleEditCustomerClose">
      <el-form :model="editCustomerForm" :rules="editCustomerRules" ref="editCustomerFormRef" label-width="140px">
        <el-form-item label="手续费模板" prop="feeSettingId">
          <el-select v-model="editCustomerForm.feeSettingId" placeholder="请选择手续费模板" style="width: 100%">
@ -112,6 +112,7 @@ defineOptions({
 // 组件
 import CustomerListSearch from '@/components/common/Search.vue'
 import CustomerListTable from '@/components/common/Table.vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
 import CustomerListPagination from '@/components/common/Pagination.vue'
 import CustomerListDialog from '@/components/common/Dialog.vue'
 import CustomerListForm from '@/components/common/Form.vue'
@ -145,6 +146,10 @@ const searchForm = ref({
 const searchOptions = ref(search)
 const tableColumnsOptions = ref(tableColumns)

+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
+const { buttonLoading: adjustAmountLoading, startButtonLoading: startAdjustAmountLoading, stopButtonLoading: stopAdjustAmountLoading } = useButtonLoading()
+const { buttonLoading: editCustomerLoading, startButtonLoading: startEditCustomerLoading, stopButtonLoading: stopEditCustomerLoading } = useButtonLoading()
 /**
 * @description: 定义表格数据
 */
@ -291,6 +296,7 @@ const roleMap: any = {
 */
 // 获取客户列表
 const getCustomerList = async () => {
+  startLoading()
  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
@ -315,6 +321,8 @@ const getCustomerList = async () => {

  //分页数据
  total.value = data.total
+
+  stopLoading()
  currentPage.value = data.current_page
  pageSize.value = Number(data.per_page)
 }
@ -437,8 +445,9 @@ const handlePaginationChange = (page: { currentPage: number; pageSize: number })
 /**
 * @description: 定义弹窗方法
 */
-//提交
 const handleSubmit = async () => {
+  startSubmitLoading()
+  try {
    const params = {
      user_id: selectId.value,
      toucun_percent: '',
@ -486,6 +495,9 @@ const handleSubmit = async () => {
        console.log('提交失败：', err)
      }
    }
+  } finally {
+    stopSubmitLoading()
+  }
 }
 // 取消
 const handleCancel = () => {
@ -526,6 +538,7 @@ const handleAdjustAmountInput = () => {

 // 提交调整金额
 const handleAdjustAmountSubmit = async () => {
+  startAdjustAmountLoading()
  try {
    await adjustAmountFormRef.value?.validate()
    await updateCapitalApi({
@ -536,6 +549,8 @@ const handleAdjustAmountSubmit = async () => {
    adjustAmountVisible.value = false
  } catch (err) {
    console.error('调整金额表单验证失败', err)
+  } finally {
+    stopAdjustAmountLoading()
  }
 }

@ -597,6 +612,7 @@ const handleEditCustomer = async (row: any) => {

 // 提交修改客户
 const handleEditCustomerSubmit = async () => {
+  startEditCustomerLoading()
  try {
    await editCustomerFormRef.value?.validate()
    await editUserApi({
@ -611,6 +627,8 @@ const handleEditCustomerSubmit = async () => {
    editCustomerVisible.value = false
  } catch (err) {
    console.error('修改客户表单验证失败', err)
+  } finally {
+    stopEditCustomerLoading()
  }
 }

--- a/src/views/profile/agent/options.ts
+++ b/src/views/profile/agent/options.ts
@ -38,7 +38,7 @@ export const tableColumns = [
  { prop: 'role', label: '账号角色' },
  // 账号数量
  { prop: 'accountQty', label: '账号数量' },
-  { prop: 'wallet_capital.amount', label: '资金', align: 'center' as const },
+  { prop: 'wallet_capital.amount', label: '资金', align: 'center' as const, isNumber: true },
  // 点差分配比例
  { prop: 'marginRatio', label: '点差分配比例', slotName: 'marginRatio' },
  // 手续费分成比例
--- a/src/views/profile/business/index.vue
+++ b/src/views/profile/business/index.vue
@ -3,6 +3,7 @@
    <!-- 搜索 -->
    <MarketSearch
      :search-form="marketSearchForm"
+      :buttonLoading="loading"
      :search-options="marketSearchOptions"
      @search="handleSearch"
      @reset="handleReset"
@ -27,6 +28,7 @@
      :table-data="marketTree"
      :columns="marketTableColumnsOptions"
      row-key="id"
+      :loading="loading"
      @row-click="handleRowClick"
      @row-contextmenu="handleRowContextMenu"
    >
@ -167,7 +169,7 @@
    <template #footer v-if="dialogType !== 'view'">
      <div class="drawer-footer">
        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-drawer>
@ -195,6 +197,7 @@ defineOptions({
 // 组件
 import MarketSearch from '@/components/common/Search.vue'
 import MarketTable from '@/components/common/Table.vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
 import MarketPagination from '@/components/common/Pagination.vue'
 import MarketDialog from '@/components/common/Dialog.vue'
 import MarketForm from '@/components/common/Form.vue'
@ -239,6 +242,8 @@ const marketSearchForm = ref({
 })
 const marketSearchOptions = ref(marketSearch)

+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
 /**
 * @description 定义表格数据
 */
@ -565,6 +570,7 @@ const handleMarketFormLinkage = async (type: 'level' | 'parentAccountName', valu
 */
 //获取做市商列表
 const getMarketList = async () => {
+  startLoading()
  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
@ -573,8 +579,10 @@ const getMarketList = async () => {
  const data = await getMarketListApi(params)
  // 表格数据
  marketTree.value = mapMarketTree(data.data)
-  //分页数据
    total.value = data.total
+
+  //分页数据
+  stopLoading()
  currentPage.value = data.current_page
  pageSize.value = Number(data.per_page)
 }
@ -795,6 +803,8 @@ const formatPointDiffToObject = () => {

 //提交
 const handleSubmit = async () => {
+  startSubmitLoading()
+  try {
    // console.log('提交', marketPointTree.value);
    await marketFormRef.value?.validate()
    const pointDiffObj = formatPointDiffToObject()
@ -845,6 +855,9 @@ const handleSubmit = async () => {
      dialogVisible.value = false
      marketForm.value = { ...initMarketForm }
    }
+  } finally {
+    stopSubmitLoading()
+  }
 }

 // 取消
--- a/src/views/profile/business/options.ts
+++ b/src/views/profile/business/options.ts
@ -25,34 +25,35 @@ export const marketTableColumns = [
  //基本账户
  { label: '基本账户', prop: 'basicAccount', align: 'center' as const, width: '200px' },
  //保证金
-  { label: '保证金', prop: 'margin', align: 'center' as const, width: '200px' },
+  { label: '保证金', prop: 'margin', align: 'center' as const, width: '200px', isNumber: true },
  //停止接单保证金
-  { label: '停止接单保证金', prop: 'stopOrderMargin', align: 'center' as const, width: '200px' },
+  { label: '停止接单保证金', prop: 'stopOrderMargin', align: 'center' as const, width: '200px', isNumber: true },
  //持仓转移保证金
  {
    label: '持仓转移保证金',
    prop: 'positionTransferMargin',
    align: 'center' as const,
    width: '200px',
+    isNumber: true,
  },
  //头寸比率
-  { label: '头寸比率', prop: 'positionRatio', align: 'center' as const, width: '150px' },
+  { label: '头寸比率', prop: 'positionRatio', align: 'center' as const, width: '150px', isNumber: true },
  //点差返佣
-  { label: '点差返佣', prop: 'pointSpreadCommission', align: 'center' as const, width: '200px' },
+  { label: '点差返佣', prop: 'pointSpreadCommission', align: 'center' as const, width: '200px', isNumber: true },
  //点差
  { label: '点差', slotName: 'pointSpread', align: 'center' as const, width: '150px' },
  //手续费比例
-  { label: '手续费比例', prop: 'commissionRatio', align: 'center' as const, width: '150px' },
+  { label: '手续费比例', prop: 'commissionRatio', align: 'center' as const, width: '150px', isNumber: true },
  //手续费返佣
-  { label: '手续费返佣', prop: 'commissionReturn', align: 'center' as const, width: '150px' },
+  { label: '手续费返佣', prop: 'commissionReturn', align: 'center' as const, width: '150px', isNumber: true },
  //浮动盈亏
-  { label: '浮动盈亏', prop: 'floatProfitLoss', align: 'center' as const, width: '100px' },
+  { label: '浮动盈亏', prop: 'floatProfitLoss', align: 'center' as const, width: '100px', isNumber: true },
  //平仓盈亏
-  { label: '平仓盈亏', prop: 'closeProfitLoss', align: 'center' as const, width: '150px' },
+  { label: '平仓盈亏', prop: 'closeProfitLoss', align: 'center' as const, width: '150px', isNumber: true },
  //风险金
-  { label: '风险金', prop: 'riskMargin', align: 'center' as const, width: '150px' },
+  { label: '风险金', prop: 'riskMargin', align: 'center' as const, width: '150px', isNumber: true },
  //服务费
-  { label: '服务费', prop: 'serviceFee', align: 'center' as const, width: '150px' },
+  { label: '服务费', prop: 'serviceFee', align: 'center' as const, width: '150px', isNumber: true },
 ]

 //做市商添加配置
--- a/src/views/profile/personalCenter/index.vue
+++ b/src/views/profile/personalCenter/index.vue
@ -69,7 +69,7 @@
    </div>

    <!-- 编辑弹窗 -->
-    <Dialog :visible="dialogVisible" :title="dialogTitle" width="500px" @confirm="handleEditConfirm"
+    <Dialog :visible="dialogVisible" :title="dialogTitle" width="500px" :button-loading="editLoading" @confirm="handleEditConfirm"
      @cancel="handleEditDialogReset" @close="handleEditDialogReset">
      <el-form ref="editFormRef" :model="editForm" :rules="getEditRules()" label-width="80px" label-position="top">
        <el-form-item v-if="editField === 'mobile'" :label="editForm.label" prop="value" class="phone-item">
@ -96,7 +96,7 @@

    <!-- 密码修改弹窗 → 验证码模式 -->
    <Dialog :visible="passwordDialogVisible" :title="t('personalCenter.modifyPassword')" width="500px"
-      @confirm="handlePasswordConfirm" @cancel="handlePasswordDialogReset" @close="handlePasswordDialogReset">
+      :button-loading="passwordLoading" @confirm="handlePasswordConfirm" @cancel="handlePasswordDialogReset" @close="handlePasswordDialogReset">
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordFormRules" label-width="100px"
        label-position="top">
        <!-- 选择验证方式 -->
@ -174,6 +174,8 @@ import {
  updatePwdByCaptchaApi
 } from '@/api/modules/profile/personalCenter';

+import { useButtonLoading } from '@/composables/useLoading';
+
 const userInfo = reactive<UserInfo>({
  id: 0,
  username: '',
@ -186,6 +188,8 @@ const userInfo = reactive<UserInfo>({

 const dialogVisible = ref(false);
 const passwordDialogVisible = ref(false);
+const { buttonLoading: editLoading, startButtonLoading: startEditLoading, stopButtonLoading: stopEditLoading } = useButtonLoading();
+const { buttonLoading: passwordLoading, startButtonLoading: startPasswordLoading, stopButtonLoading: stopPasswordLoading } = useButtonLoading();
 const editFormRef = ref<FormInstance>();
 const passwordFormRef = ref<FormInstance>();
 const editField = ref<string>('');
@ -399,6 +403,7 @@ const handleLanguageChange = async (val: number) => {
 // 提交修改
 const handleEditConfirm = async () => {
  if (!editFormRef.value) return;
+  startEditLoading();
  try {
    await editFormRef.value.validate();

@ -425,6 +430,8 @@ const handleEditConfirm = async () => {
  } catch (err) {
    // 表单验证失败或API调用失败时，不显示错误消息，因为ElMessage已经在其他地方处理
    console.error('操作失败:', err);
+  } finally {
+    stopEditLoading();
  }
 };

@ -512,6 +519,7 @@ watch(
 // 提交修改密码
 const handlePasswordConfirm = async () => {
  if (!passwordFormRef.value) return;
+  startPasswordLoading();
  try {
    await passwordFormRef.value.validate();

@ -536,6 +544,8 @@ const handlePasswordConfirm = async () => {
  } catch (err) {
    // 表单验证失败或API调用失败时，不显示错误消息，因为ElMessage已经在其他地方处理
    console.error('密码修改失败:', err);
+  } finally {
+    stopPasswordLoading();
  }
 };

--- a/src/views/profile/user/index.vue
+++ b/src/views/profile/user/index.vue
@ -1,12 +1,8 @@
 <template>
  <div class="client table_form-container">
    <!-- 搜索组件 -->
-    <ClientSearch
-      :search-form="clientSearchForm"
-      :search-options="clientSearchOptions"
-      @search="handleSearch"
-      @reset="handleReset"
-    >
+    <ClientSearch :search-form="clientSearchForm" :search-options="clientSearchOptions" :buttonLoading="loading"
+      @search="handleSearch" @reset="handleReset">
      <template #button="{ form }">
        <el-button type="primary" @click="handleAdd()" v-auth="'user_createUser'">
          添加客户
@ -15,7 +11,7 @@
    </ClientSearch>

    <!-- 表格组件 -->
-    <ClientTable :table-data="clientTree" :columns="clientTableColumns">
+    <ClientTable :table-data="clientTree" :columns="clientTableColumns" :loading="loading">
      <template #status="{ row }">
        {{ row.status === 1 ? '正常' : '禁用' }}
      </template>
@ -29,44 +25,21 @@
      </template>
    </ClientTable>
    <!-- 分页组件 -->
-    <ClientPagination
-      v-model="currentPage"
-      v-model:pageSizeValue="pageSize"
-      :total="total"
-      @pagination-change="handlePaginationChange"
-    />
+    <ClientPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
+      @pagination-change="handlePaginationChange" />
  </div>
  <!-- 客户弹窗 -->
-  <ClientDialog
-    :visible="dialogVisible"
-    :title="dialogTitle"
-    :type="dialogType"
-    @confirm="handleSubmit"
-    @cancel="handleCancel"
-    @close="handleClose"
-  >
-    <ClientForm
-      :form-data="clientForm"
-      :form-rules="clientFormRules"
-      :form-items="clientFormOptions"
-      :options-map="clientFormOptionsMap"
-      ref="clientFormRef"
-    >
+  <ClientDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" :button-loading="submitLoading"
+    @confirm="handleSubmit" @cancel="handleCancel" @close="handleClose">
+    <ClientForm :form-data="clientForm" :form-rules="clientFormRules" :form-items="clientFormOptions"
+      :options-map="clientFormOptionsMap" ref="clientFormRef">
      <template #phoneOrEmail="{ formData }" style="margin-left: 0">
        <div class="phone-email">
          <div class="tab-btn">
-            <el-button
-              :type="activeTab === 'email' ? 'primary' : 'default'"
-              size="small"
-              @click="activeTab = 'email'"
-            >
+            <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 :type="activeTab === 'phone' ? 'primary' : 'default'" size="small" @click="activeTab = 'phone'">
              手机号
            </el-button>
          </div>
@ -76,12 +49,7 @@
            </el-form-item>
            <el-form-item prop="phone" class="phone-item" v-if="activeTab === 'phone'">
              <el-select v-model="clientForm.countryCode" placeholder="请选择国家区号">
-                <el-option
-                  v-for="item in countryOptions"
-                  :key="item.code"
-                  :label="item.code"
-                  :value="item.code"
-                >
+                <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>
@ -97,14 +65,8 @@
  </ClientDialog>

  <!-- 调整金额弹窗 -->
-  <ClientDialog
-    :visible="adjustAmountVisible"
-    title="调整金额"
-    type="adjust"
-    @confirm="handleAdjustAmountSubmit"
-    @cancel="handleAdjustAmountCancel"
-    @close="handleAdjustAmountClose"
-  >
+  <ClientDialog :visible="adjustAmountVisible" title="调整金额" type="adjust" :button-loading="adjustAmountLoading"
+    @confirm="handleAdjustAmountSubmit" @cancel="handleAdjustAmountCancel" @close="handleAdjustAmountClose">
    <el-form :model="adjustAmountForm" :rules="adjustAmountRules" ref="adjustAmountFormRef" label-width="120px">
      <el-form-item label="账号名" prop="username">
        <el-input v-model="adjustAmountForm.username" disabled />
@ -116,11 +78,8 @@
        <el-input v-model="adjustAmountForm.currentBalance" disabled />
      </el-form-item>
      <el-form-item label="调整金额" prop="adjustAmount">
-        <el-input
-          v-model="adjustAmountForm.adjustAmount"
-          placeholder="请输入调整金额（可为负数）"
-          @input="handleAdjustAmountInput"
-        />
+        <el-input v-model="adjustAmountForm.adjustAmount" placeholder="请输入调整金额（可为负数）"
+          @input="handleAdjustAmountInput" />
      </el-form-item>
      <el-form-item label="调整后余额" prop="afterBalance">
        <el-input v-model="adjustAmountForm.afterBalance" disabled />
@ -137,6 +96,7 @@ defineOptions({
 // 组件
 import ClientSearch from '@/components/common/Search.vue'
 import ClientTable from '@/components/common/Table.vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
 import ClientPagination from '@/components/common/Pagination.vue'
 import ClientDialog from '@/components/common/Dialog.vue'
 import ClientForm from '@/components/common/Form.vue'
@ -172,6 +132,9 @@ const clientSearchForm = ref({
  endDateTime: '',
 })

+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
+const { buttonLoading: adjustAmountLoading, startButtonLoading: startAdjustAmountLoading, stopButtonLoading: stopAdjustAmountLoading } = useButtonLoading()
 /**
 * @description 定义表格数据
 */
@ -281,6 +244,8 @@ const mapObjectToOptions = (obj: Record<string, string>) => {
 * @description 统一获取数据方法
 */
 const getClientList = async () => {
+  try {
+    startLoading()
    const params = {
      page: currentPage.value,
      page_size: pageSize.value,
@ -304,10 +269,13 @@ const getClientList = async () => {
      // 映射所属代理用户名
      agentUsername: item.par_uid === item.parent?.id ? item.parent?.username : '',
    }))
-  //分页数据
    total.value = Number(data.total)
+    //分页数据
    currentPage.value = Number(data.current_page)
    pageSize.value = Number(data.per_page)
+  } finally {
+    stopLoading()
+  }
 }

 // 获取客户表单选项
@ -352,11 +320,8 @@ onMounted(async () => {
 * @description 搜索方法
 */
 const handleSearch = async () => {
-  try {
+
  await getClientList()
-  } catch (err) {
-    console.error('获取客户列表失败', err)
-  }
 }
 const handleReset = async () => {
  // 重置搜索表单
@ -366,11 +331,7 @@ const handleReset = async () => {
    startDateTime: '',
    endDateTime: '',
  }
-  try {
  await getClientList()
-  } catch (err) {
-    console.error('获取客户列表失败', err)
-  }
 }
 // 添加客户
 const handleAdd = () => {
@ -431,8 +392,9 @@ const handlePaginationChange = (page: { currentPage: number; pageSize: number })
 * @description 客户弹窗方法
 */
 const handleSubmit = async () => {
-  try {
  await clientFormRef.value?.validate()
+  startSubmitLoading()
+  try {
    if (dialogType.value === 'add') {
      const params = {
        reg_type: activeTab.value === 'email' ? 1 : 2,
@ -460,6 +422,8 @@ const handleSubmit = async () => {
    }
  } catch (err) {
    console.error('客户表单验证失败', err)
+  } finally {
+    stopSubmitLoading()
  }
 }
 const handleCancel = () => {
@ -497,16 +461,19 @@ const handleAdjustAmountInput = () => {

 // 提交调整金额
 const handleAdjustAmountSubmit = async () => {
-  try {
  await adjustAmountFormRef.value?.validate()
+  startAdjustAmountLoading()
+  try {
    await updateCapitalApi({
      target_user_id: adjustUserId.value,
      amount: adjustAmountForm.value.adjustAmount,
    })
    await getClientList()
-    adjustAmountVisible.value = false
  } catch (err) {
    console.error('调整金额表单验证失败', err)
+  } finally {
+    adjustAmountVisible.value = false
+    stopAdjustAmountLoading()
  }
 }

@ -522,8 +489,8 @@ const handleAdjustAmountClose = () => {
 </script>

 <style scoped lang="scss">
-.client{ 
-}
+.client {}
+
 :deep(.el-form-item__content) {
  margin-left: 0 !important;
 }
--- a/src/views/profile/user/options.ts
+++ b/src/views/profile/user/options.ts
@ -54,7 +54,7 @@ export const clientTableColumns = [
  { prop: 'username', label: '用户名', align: 'center' as const },
  { prop: 'createdTime', label: '注册时间', align: 'center' as const },
  { prop: 'agentUsername', label: '所属代理', align: 'center' as const },
-  { prop: 'wallet_capital.amount', label: '资金', align: 'center' as const },
+  { prop: 'wallet_capital.amount', label: '资金', align: 'center' as const, isNumber: true },
  { label: '状态', slotName: 'status', align: 'center' as const },
  { label: '操作', slotName: 'action', align: 'center' as const },
 ]
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@ -11,6 +11,7 @@
      :columns="menuTableColumns"
      row-key="id"
      :tree-props="treeProps"
+      :loading="loading"
    >
      <template #icon="{ row }">
        <el-icon v-if="row.icon && menuiconMap[row.icon]">
@ -71,6 +72,9 @@ defineOptions({
 })
 import type { FormInstance } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
+import { usePageLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+
 // 组件配置
 import MenuTable from '@/components/common/Table.vue'
 import MenuDialog from '@/components/common/Dialog.vue'
@ -137,6 +141,7 @@ const handleAddMenu = () => {

 // 获取菜单列表
 const fetchMenuList = async () => {
+  startLoading()
  try {
    const data = await getMenuApi()
    menuTree.value = data
@ -148,6 +153,8 @@ const fetchMenuList = async () => {
    menuFormOptionsMap.value.parent_id = [{ label: '一级菜单', value: '0' }, ...parentNameOptions]
  } catch (err) {
    console.error('获取菜单列表失败', err)
+  } finally {
+    stopLoading()
  }
 }
 // 页面加载时获取菜单列表
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@ -3,6 +3,7 @@
    <!-- 搜索 -->
    <NoticeSearch
      :search-form="searchForm"
+      :buttonLoading="loading"
      :search-options="searchOptions"
      @search="handleSearch"
      @reset="handleReset"
@ -14,7 +15,7 @@
      </template>
    </NoticeSearch>
    <!-- 表格 -->
-    <NoticeTable :table-data="noticeTree" :columns="noticeTableColumnsOptions" row-key="id">
+    <NoticeTable :table-data="noticeTree" :columns="noticeTableColumnsOptions" row-key="id" :loading="loading">
      <template #status="{ row }">
        <!-- 修正状态显示：1=草稿，2=已发布 -->
        {{ row.status === 1 ? '草稿' : '已发布' }}
@ -55,6 +56,7 @@
      :title="dialogTitle"
      :type="dialogType"
      :show-footer="dialogType !== 'view'"
+      :button-loading="submitLoading"
      @confirm="handleSubmit"
      @cancel="handleCancel"
      @close="handleClose"
@ -99,6 +101,10 @@
 defineOptions({
  name: 'Notice'
 })
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
+
 // 组件
 import NoticeSearch from '@/components/common/Search.vue'
 import NoticeTable from '@/components/common/Table.vue'
@ -223,6 +229,7 @@ const noticeFormOptionsMap = ref({
 */
 //获取公告列表
 const getNoticeList = async () => {
+  startLoading()
  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
@ -231,6 +238,7 @@ const getNoticeList = async () => {
    publish_start_time: searchForm.value.startDateTime,
    publish_end_time: searchForm.value.endDateTime,
  }
+  try {
    const data: any = await getNoticeListApi(params)
    // 表格数据
    noticeTree.value = data.data.map((item: any) => ({
@ -244,6 +252,9 @@ const getNoticeList = async () => {
    total.value = data.total
    currentPage.value = data.current_page
    pageSize.value = Number(data.per_page)
+  } finally {
+    stopLoading()
+  }
 }

 /**
@ -337,6 +348,8 @@ const handlePaginationChange = async (page: { currentPage: number; pageSize: num
 * @description: 定义弹窗方法
 */
 const handleSubmit = async () => {
+  startSubmitLoading()
+  try {
    await noticeFormRef.value.validate()
    if (dialogType.value === 'create') {
      noticeForm.value.noticeContent = valueHtml.value
@ -360,6 +373,9 @@ const handleSubmit = async () => {
      dialogVisible.value = false
      getNoticeList()
    }
+  } finally {
+    stopSubmitLoading()
+  }
 }

 const handleCancel = () => {
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@ -6,7 +6,7 @@
      <el-button type="primary" @click="handleAddRole" v-auth="'roles_create'">新增角色</el-button>
    </div>
    <!-- 角色列表表格 -->
-    <RoleTable :table-data="roleTree" :columns="roleTableColumns" row-key="id">
+    <RoleTable :table-data="roleTree" :columns="roleTableColumns" row-key="id" :loading="loading">
      <template #status="{ row }">
        <el-switch :model-value="row.status === 1" :active-value="true" :inactive-value="false" active-text="启用"
          inactive-text="禁用" />
@ -32,16 +32,15 @@
    <RoleForm :form-data="roleForm" :form-rules="roleFormRules" :form-items="roleFormItemOptions" ref="roleFormRef"
      :options-map="roleFormOptionsMap" :dialog-type="dialogType">
      <template #permissions="{ formData }">
-        <el-tree ref="permissionTreeRef" :data="permissionTreeData" :props="treeProps" show-checkbox node-key="id"
-          :default-expand-all="true" :check-strictly="false"
-          class="permission-tree" />
+        <el-tree v-loading="treeLoading" ref="permissionTreeRef" :data="permissionTreeData" :props="treeProps"
+          show-checkbox node-key="id" :default-expand-all="true" :check-strictly="false" class="permission-tree" />
      </template>
    </RoleForm>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button type="primary" :loading="buttonLoading" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-drawer>
@ -54,6 +53,11 @@ defineOptions({
 })
 import type { FormInstance, TreeInstance } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
+
+const { loading, startLoading, stopLoading } = usePageLoading()
+const { loading: treeLoading, startLoading: treeStartLoading, stopLoading: treeStopLoading } = usePageLoading()
+const { buttonLoading, startButtonLoading, stopButtonLoading } = useButtonLoading()

 // 组件配置
 import RoleTable from '@/components/common/Table.vue'
@ -140,11 +144,14 @@ const filterRoles = (roleList: any[]) => {

 // 获取角色列表
 const fetchRoleList = async () => {
+  startLoading()
  try {
    const data = await getRoleApi()
    roleTree.value = data
  } catch (err) {
    console.error('获取角色列表失败', err)
+  } finally {
+    stopLoading()
  }
 }

@ -265,7 +272,9 @@ const getParentNodeIds = (checkedKeys: number[], treeData: any[]): number[] => {
 const handlePermission = async (row: any) => {
  dialogVisible.value = true
  dialogTitle.value = '设置角色权限'
+  permissionTreeData.value = []
  dialogType.value = 'permissions'
+  treeStartLoading()
  handleDialogType(dialogType.value)
  permissionIds.value = row.id
  try {
@ -286,6 +295,8 @@ const handlePermission = async (row: any) => {
    permissionTreeRef.value?.setCheckedKeys(childPermissionIds, false)
  } catch (err) {
    console.error('获取角色权限失败', err)
+  } finally { 
+    treeStopLoading()
  }
 }

@ -293,6 +304,7 @@ const handlePermission = async (row: any) => {
@description: 处理弹窗提交/取消/关闭事件
 **/
 const handleSubmit = async () => {
+  startButtonLoading()
  console.log('提交菜单表单', roleForm.value.permissions, allPermissions.value)
  try {
    await roleFormRef.value?.validate()
@ -328,6 +340,8 @@ const handleSubmit = async () => {
  } catch (err) {
    console.log('表单验证失败')
    return
+  } finally {
+    stopButtonLoading()
  }
 }

--- a/src/views/system/setting/index.vue
+++ b/src/views/system/setting/index.vue
@ -3,7 +3,7 @@
    <!-- 菜单列表头 -->
    <MenuHeader :title="menuTitle" :buttons="menuHeaderButtons" @click="handleAddMenu" />
    <!-- 菜单列表表格 -->
-    <MenuTable :table-data="menuTree" :columns="menuTableColumns" row-key="id">
+    <MenuTable :table-data="menuTree" :columns="menuTableColumns" row-key="id" :loading="loading">
      <template #action="{ row }">
        <el-button link type="primary" size="small" @click="handleEditMenu(row)"> 编辑 </el-button>
      </template>
@ -33,6 +33,9 @@ defineOptions({
 })
 import type { FormInstance } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
+import { usePageLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+
 // 组件配置
 import MenuHeader from '@/components/common/Header.vue'
 import MenuTable from '@/components/common/Table.vue'
@ -88,11 +91,14 @@ const handleAddMenu = () => {

 // 获取菜单列表
 const fetchSettingList = async () => {
+  startLoading()
  try {
    const data = await getSettingApi()
    menuTree.value = data
  } catch (err) {
    console.error('获取菜单列表失败', err)
+  } finally {
+    stopLoading()
  }
 }
 // 页面加载时获取菜单列表
--- a/src/views/trade/holidays/index.vue
+++ b/src/views/trade/holidays/index.vue
@ -1,24 +1,14 @@
 <template>
  <div class="trade-group table_form-container">
    <el-form-item label="交易节假日时间设置">
-      <el-button
-        style="margin-left: 18px"
-        type="primary"
-        v-auth="'contractVariety_addHoliday'"
-        @click="handleAdd"
-        >添加</el-button
-      >
-      <el-button
-        style="margin-left: 18px"
-        type="danger"
-        v-auth="'contractVariety_addHoliday'"
-        @click="handleDel"
-        >删除</el-button
-      >
+      <el-button style="margin-left: 18px" type="primary" v-auth="'contractVariety_addHoliday'"
+        @click="handleAdd">添加</el-button>
+      <el-button style="margin-left: 18px" type="danger" v-auth="'contractVariety_addHoliday'"
+        @click="handleDel">删除</el-button>
    </el-form-item>
    <!-- 表格 -->
    <div class="table-box">
-      <table>
+      <table v-loading="loading">
        <thead>
          <tr>
            <th>名称</th>
@ -36,33 +26,16 @@
              <span v-else>{{ item.name }}</span>
            </td>
            <td>
-              <el-date-picker
-                v-if="item.editStatus"
-                v-model="item.datePicker"
-                type="datetimerange"
-                start-placeholder="休市开始时间"
-                end-placeholder="休市结束时间"
-                format="YYYY-MM-DD HH:mm:ss"
-                date-format="YYYY-MM-DD HH:mm:ss"
-                time-format="YYYY-MM-DD HH:mm:ss"
-                value-format="YYYY-MM-DD HH:mm:ss"
-              />
+              <el-date-picker v-if="item.editStatus" v-model="item.datePicker" type="datetimerange"
+                start-placeholder="休市开始时间" end-placeholder="休市结束时间" format="YYYY-MM-DD HH:mm:ss"
+                date-format="YYYY-MM-DD HH:mm:ss" time-format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss" />
              <span v-else>{{ item.datePicker[0] }} - {{ item.datePicker[1] }}</span>
            </td>
            <td>
-              <el-select
-                multiple
-                placeholder="请选择休市市场"
-                style="width: 240px"
-                v-model="item.groupId"
-                v-if="item.editStatus"
-              >
-                <el-option
-                  v-for="item in marketList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
+              <el-select multiple placeholder="请选择休市市场" style="width: 240px" v-model="item.groupId"
+                v-if="item.editStatus">
+                <el-option v-for="item in marketList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <span>{{
                (item?.groupId || [])
@ -78,34 +51,14 @@
              <span v-else>{{ item.description }}</span>
            </td>
            <td>
-              <el-button
-                type="primary"
-                v-if="!item.editStatus"
-                @click="item.editStatus = true"
-                v-auth="'contractVariety_addHoliday'"
-                >编辑</el-button
-              >
-              <el-button
-                type="danger"
-                v-if="!item.editStatus"
-                @click="handleDel(item.id, index)"
-                v-auth="'contractVariety_addHoliday'"
-                >删除</el-button
-              >
-              <el-button
-                type="primary"
-                v-if="item.editStatus"
-                @click="submitItem(index)"
-                v-auth="'contractVariety_addHoliday'"
-                >确认</el-button
-              >
-              <el-button
-                type="danger"
-                v-if="item.editStatus"
-                @click="item.editStatus = false"
-                v-auth="'contractVariety_addHoliday'"
-                >取消</el-button
-              >
+              <el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
+                v-auth="'contractVariety_addHoliday'">编辑</el-button>
+              <el-button type="danger" v-if="!item.editStatus" @click="handleDel(item.id, index)"
+                v-auth="'contractVariety_addHoliday'">删除</el-button>
+              <el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
+                v-auth="'contractVariety_addHoliday'">确认</el-button>
+              <el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
+                v-auth="'contractVariety_addHoliday'">取消</el-button>
            </td>
          </tr>
        </tbody>
@ -123,6 +76,10 @@ import { ref, onMounted } from 'vue'
 import { getGroupListApi } from '@/api/modules/trade/group'
 import { getHolidayList, addHoliday, editHoliday, delHoliday } from '@/api/modules/trade/time'
 import { ElMessageBox } from 'element-plus'
+import { usePageLoading } from '@/composables/useLoading'
+
+// 按钮 loading
+const { loading, startLoading, stopLoading } = usePageLoading()

 type DataItem = {
  id?: number | string
@ -150,6 +107,8 @@ const getMarketList = async () => {
 }

 const initDate = () => {
+  startLoading()
+  try {
    getHolidayList().then((res) => {
      dataList.value = res.map((item: any) => ({
        id: item.id + '',
@ -162,6 +121,7 @@ const initDate = () => {
        editStatus: false,
      }))
    })
+  } finally { stopLoading() }
 }

 const handleAdd = () => {
@ -223,6 +183,7 @@ onMounted(() => {
 .trade-group {
  overflow-y: scroll;
 }
+
 /* 给 table 及所有 td 加边框 */
 table {
  border-collapse: collapse;
--- a/src/views/trade/times/index.vue
+++ b/src/views/trade/times/index.vue
@ -1,13 +1,11 @@
 <template>
  <div class="trade-group table_form-container">
    <el-form-item label="交易组时间设置">
-      <el-button type="primary" @click="addTableItem" v-auth="'contractVariety_createGroup'"
-        >添加</el-button
-      >
+      <el-button type="primary" @click="addTableItem" v-auth="'contractVariety_createGroup'">添加</el-button>
    </el-form-item>
    <!-- 表格 -->
    <div class="table-box">
-      <table>
+      <table v-loading="loading">
        <template v-for="(item, index) in tradeGroupTree" :key="item.id">
          <tr>
            <td style="width: 50px">顺序</td>
@ -35,23 +33,13 @@
            <td class="time-picker-box">
              <template v-if="item.editStatus">
                <template v-if="item?.x_time_list">
-                  <el-time-picker
-                    v-for="(time, timeIndex) in item?.x_time_list"
-                    :key="timeIndex"
-                    v-model="item.x_time_list[timeIndex]"
-                    style="width: 180px; flex: 0 0 auto"
-                    format="HH:mm:ss"
-                    value-format="HH:mm:ss"
-                    :picker-options="{
+                  <el-time-picker v-for="(time, timeIndex) in item?.x_time_list" :key="timeIndex"
+                    v-model="item.x_time_list[timeIndex]" style="width: 180px; flex: 0 0 auto" format="HH:mm:ss"
+                    value-format="HH:mm:ss" :picker-options="{
                      selectableRange: '09:00:00 - 18:00:00',
-                    }"
-                    is-range
-                  />
+                    }" is-range />
                </template>
-                <img
-                  src="@/assets/images/trade/group/add.png"
-                  @click="addTime(index, 'x_time_list')"
-                />
+                <img src="@/assets/images/trade/group/add.png" @click="addTime(index, 'x_time_list')" />
              </template>
              <template v-else>
                <template v-if="item?.x_time_list">
@ -62,34 +50,14 @@
              </template>
            </td>
            <td rowspan="2" style="width: 140px">
-              <el-button
-                type="primary"
-                v-if="!item.editStatus"
-                @click="item.editStatus = true"
-                v-auth="'contractVariety_editGroup'"
-                >编辑</el-button
-              >
-              <el-button
-                type="danger"
-                v-if="!item.editStatus"
-                @click="deleteGroup(item.id, index)"
-                v-auth="'contractVariety_delGroup'"
-                >删除</el-button
-              >
-              <el-button
-                type="primary"
-                v-if="item.editStatus"
-                @click="submitItem(index)"
-                v-auth="'contractVariety_editGroup'"
-                >确认</el-button
-              >
-              <el-button
-                type="danger"
-                v-if="item.editStatus"
-                @click="item.editStatus = false"
-                v-auth="'contractVariety_editGroup'"
-                >取消</el-button
-              >
+              <el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
+                v-auth="'contractVariety_editGroup'">编辑</el-button>
+              <el-button type="danger" v-if="!item.editStatus" @click="deleteGroup(item.id, index)"
+                v-auth="'contractVariety_delGroup'">删除</el-button>
+              <el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
+                v-auth="'contractVariety_editGroup'">确认</el-button>
+              <el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
+                v-auth="'contractVariety_editGroup'">取消</el-button>
            </td>
          </tr>
          <tr>
@ -114,23 +82,13 @@
            <td class="time-picker-box">
              <template v-if="item.editStatus">
                <template v-if="item?.d_time_list">
-                  <el-time-picker
-                    v-for="(time, timeIndex) in item?.d_time_list"
-                    :key="timeIndex"
-                    v-model="item.d_time_list[timeIndex]"
-                    style="width: 180px; flex: 0 0 auto"
-                    format="HH:mm:ss"
-                    value-format="HH:mm:ss"
-                    :picker-options="{
+                  <el-time-picker v-for="(time, timeIndex) in item?.d_time_list" :key="timeIndex"
+                    v-model="item.d_time_list[timeIndex]" style="width: 180px; flex: 0 0 auto" format="HH:mm:ss"
+                    value-format="HH:mm:ss" :picker-options="{
                      selectableRange: '09:00:00 - 18:00:00',
-                    }"
-                    is-range
-                  />
+                    }" is-range />
                </template>
-                <img
-                  src="@/assets/images/trade/group/add.png"
-                  @click="addTime(index, 'd_time_list')"
-                />
+                <img src="@/assets/images/trade/group/add.png" @click="addTime(index, 'd_time_list')" />
              </template>
              <template v-else>
                <template v-if="item?.d_time_list">
@ -148,7 +106,10 @@
 </template>

 <script setup lang="ts">
+import { usePageLoading } from '@/composables/useLoading'

+// 按钮 loading
+const { loading, startLoading, stopLoading } = usePageLoading()
 defineOptions({
  name: 'Times'
 })
@ -246,6 +207,7 @@ const deleteGroup = (id: number, idx: number) => {
 * @description: 定义公共请求数据方法
 */
 const getGroupList = async () => {
+  startLoading()
  try {
    const data = await getGroupListApi()
    data.forEach((item: any) => {
@ -283,6 +245,8 @@ const getGroupList = async () => {
  } catch (e: any) {
    console.log(e)
    ElMessage.error(e.msg)
+  } finally {
+    stopLoading()
  }
 }

@ -298,40 +262,50 @@ onMounted(() => {
 .trade-group {
  overflow-y: scroll;
 }
+
 /* 给 table 及所有 td 加边框 */
 table {
  border-collapse: collapse;
  width: 100%;
-  table-layout: auto; /* 宽度自适应内容 */
+  table-layout: auto;
+  /* 宽度自适应内容 */

  .time-picker-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
+
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
+
  td {
    height: 59px;
    border: 1px solid #dcdfe6;
-    padding: 4px 8px; /* 内边距缩小 */
+    padding: 4px 8px;
+    /* 内边距缩小 */
    text-align: center;
-    font-size: 12px; /* 文字变小 */
-    white-space: nowrap; /* 文字不换行 */
-    vertical-align: middle; /* 垂直居中 */
+    font-size: 12px;
+    /* 文字变小 */
+    white-space: nowrap;
+    /* 文字不换行 */
+    vertical-align: middle;
+    /* 垂直居中 */

    /* 时间选择器容器：两个选择器横排不换行 */
    :deep(.el-time-picker) {
      display: inline-block;

      .el-range-editor {
-        width: 100px; /* 缩小时间选择器宽度 */
+        width: 100px;
+        /* 缩小时间选择器宽度 */
        font-size: 12px;
      }
+
      .el-range-input {
        font-size: 12px;
      }
--- a/src/views/trade/variety/index.vue
+++ b/src/views/trade/variety/index.vue
@ -3,6 +3,7 @@
    <!-- 搜索 -->
    <VarietySearch
      :search-form="searchForm"
+      :buttonLoading="loading"
      :search-options="searchOptions"
      @search="handleSearch"
      @reset="handleReset"
@ -28,6 +29,7 @@
      :columns="varietyTableColumnsOptions"
      row-key="id"
      @row-click="handleRowClick"
+      :loading="loading"
    >
      <template #onlineStatus="{ row }">
        {{ ['', '上线', '下线'][row.onlineStatus] }}
@ -42,6 +44,7 @@
    :visible="dialogVisible"
    :title="dialogTitle"
    :type="dialogType"
+    :button-loading="submitLoading"
    @confirm="handleSubmit"
    @cancel="handleCancel"
    @close="handleClose"
@ -94,6 +97,10 @@ defineOptions({
  name: 'Variety'
 })
 // 组件
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
+
 import VarietySearch from '@/components/common/Search.vue'
 import VarietyTable from '@/components/common/Table.vue'
 import VarietyDialog from '@/components/common/Dialog.vue'
@ -233,9 +240,11 @@ const typeMap: any = {

 //获取品种列表
 const getVarietyList = async () => {
+  startLoading()
  const params = {
    name: searchForm.value.varietyName,
  }
+  try {
    const data = await getVarietyListApi(params)
    console.log('data', data)
    //格式化表格数据
@ -258,6 +267,9 @@ const getVarietyList = async () => {
      type: typeMap[item.type],
      image: item.image,
    }))
+  } finally {
+    stopLoading()
+  }
 }

 // 获取合约品种分组列表
@ -434,6 +446,8 @@ const beforeUpload = (file: File) => {
 * @description: 定义弹窗方法
 */
 const handleSubmit = async () => {
+  startSubmitLoading()
+  try {
    await varietyFormRef.value?.validate()
    console.log(varietyForm.value)
    const params = {
@ -475,6 +489,9 @@ const handleSubmit = async () => {
      await getVarietyList()
    }
    dialogVisible.value = false
+  } finally {
+    stopSubmitLoading()
+  }
 }
 const handleCancel = () => {
  dialogVisible.value = false
--- a/src/views/trade/variety/options.ts
+++ b/src/views/trade/variety/options.ts
@ -33,9 +33,9 @@ export const tableColumns = [
  // 交易分组
  { prop: 'tradeGroup', label: '交易分组', align: 'center' as const },
  // 多头库存费
-  { prop: 'longStockFee', label: '多头库存费', align: 'center' as const },
+  { prop: 'longStockFee', label: '多头库存费', align: 'center' as const, isNumber: true },
  // 空头库存费
-  { prop: 'shortStockFee', label: '空头库存费', align: 'center' as const },
+  { prop: 'shortStockFee', label: '空头库存费', align: 'center' as const, isNumber: true },
  // 类型
  { prop: 'type', label: '类型', align: 'center' as const },
  // 止盈水平
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@ -52,7 +52,7 @@
        </el-form-item>
      </Transition>
      <el-form-item class="form-submit">
-        <el-button type="primary" @click="handleLogin">登录</el-button>
+        <el-button type="primary" @click="handleLogin" :loading="activeTab === 'password' && buttonLoading">登录</el-button>
      </el-form-item>
      <router-link to="/user/register" class="to-register">没有账号？去注册</router-link>
    </el-form>
@ -74,6 +74,7 @@ import UserTabs from './components/Tabs.vue'

 //公共方法/store/配置文件
 import { useUserStore } from '@/stores/modules/user'
+import { useButtonLoading } from '@/composables/useLoading'
 import { setStorage, getStorage } from '@/utils/storage'
 import { md5Encrypt } from '@/utils/crypto'

@ -83,6 +84,9 @@ import { passwordRules, emailRules, phoneRules, codeRules } from './config/rules

 const router = useRouter()

+// 按钮 loading
+const { buttonLoading, startButtonLoading, stopButtonLoading } = useButtonLoading()
+
 //userText 实例
 const userText = ref({
  backText: '',
@ -179,6 +183,9 @@ const handleLogin = async () => {
    else if (currentTab === 'password') {
      // 校验密码+验证码
      await loginFormRef.value.validateField(['password', 'code'])
+      // 开启 loading
+      startButtonLoading()
+      try {
        // 生成device_no并保存到变量（关键修改1）
        const deviceNo = generateTimestampWithRandomNum()
        // 登录参数
@ -192,6 +199,10 @@ const handleLogin = async () => {
        }
        await userStore.login(loginParams)
        setStorage('device_no', deviceNo)
+      } finally {
+        // 关闭 loading
+        stopButtonLoading()
+      }
    }
  } catch (error) {
    console.error('表单校验失败：', error)
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@ -94,7 +94,7 @@
        >
      </el-form-item>
      <el-form-item class="form-submit">
-        <el-button type="primary" class="form-btn" @click="handleRegister">注册</el-button>
+        <el-button type="primary" class="form-btn" @click="handleRegister" :loading="buttonLoading">注册</el-button>
      </el-form-item>
      <router-link to="/user/login" class="to-login">已有账号？立即登录</router-link>
    </el-form>
@ -118,6 +118,7 @@ import UserCaptcha from './components/Captcha.vue'
 import { useUserStore } from '@/stores/modules/user'
 import { md5Encrypt } from '@/utils/crypto'
 import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCaptcha'
+import { useButtonLoading } from '@/composables/useLoading'

 //用户校验规则
 import { countryOptions } from '@/views/user/config/mock'
@ -128,6 +129,9 @@ import { useRoute } from 'vue-router'
 const userStore = useUserStore()
 const route = useRoute()

+// 按钮 loading
+const { buttonLoading, startButtonLoading, stopButtonLoading } = useButtonLoading()
+
 // UserText 实例
 const userText = ref({
  backText: '',
@ -215,7 +219,9 @@ const handleRegister = async () => {
  try {
    // 提交时再次验证（显示错误提示）
    await registerFormRef.value.validate()
-
+    // 开启 loading
+    startButtonLoading()
+    try {
      // 注册参数
      const registerParams = {
        email: registerForm.value.email,
@ -228,6 +234,10 @@ const handleRegister = async () => {

      // 注册逻辑
      await userStore.register(registerParams)
+    } finally {
+      // 关闭 loading
+      stopButtonLoading()
+    }
  } catch (error) {
    console.error('表单校验失败：', error)
  }
@ -239,7 +249,7 @@ onUnmounted(() => {
 })

 onMounted(() => {
-  registerForm.value.inviteCode = route.query.invite_code
+  registerForm.value.inviteCode = route.query.invite_code || ''
 })
 </script>