Merge branch 'yueyixin'

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>

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) {
+  if (requestCount === 0) {
-    loadingInstance = ElLoading.service({
+    getTopLoading()?.start()
-      lock: true, // 锁定屏幕滚动
-      fullscreen: true, // 全屏显示
-    })
   }
   requestCount++
 }
 
-// 关闭loading的方法
+// 关闭顶部进度条
 const hideLoading = () => {
   requestCount--
   if (requestCount <= 0) {
-    if (loadingInstance) {
+    getTopLoading()?.complete()
-      loadingInstance.close()
+    requestCount = 0
-      loadingInstance = null
-    }
-    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) {

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})
+}

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>()

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,
+  },
 })
 
 // 暴露事件

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>

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>

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)

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) {

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,
+  }
+}

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
   }
 })

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}`
+}

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 时间
+  // // 将字符串解析为 UTC 时间
-  const utcDate = new Date(utcStr.replace(' ', 'T') + 'Z')
+  // const utcDate = new Date(utcStr.replace(' ', 'T') + 'Z')
 
-  // 转换为 UTC+8（东八区）
+  // // 转换为 UTC+8（东八区）
-  const utc8Date = new Date(utcDate.getTime() + 8 * 60 * 60 * 1000)
+  // const utc8Date = new Date(utcDate.getTime() + 8 * 60 * 60 * 1000)
 
-  // 格式化为 YYYY-MM-DD HH:mm:ss
+  // // 格式化为 YYYY-MM-DD HH:mm:ss
-  const pad = (n) => String(n).padStart(2, '0')
+  // const pad = (n) => String(n).padStart(2, '0')
 
-  const year = utc8Date.getUTCFullYear()
+  // const year = utc8Date.getUTCFullYear()
-  const month = pad(utc8Date.getUTCMonth() + 1)
+  // const month = pad(utc8Date.getUTCMonth() + 1)
-  const day = pad(utc8Date.getUTCDate())
+  // const day = pad(utc8Date.getUTCDate())
-  const hour = pad(utc8Date.getUTCHours())
+  // const hour = pad(utc8Date.getUTCHours())
-  const minute = pad(utc8Date.getUTCMinutes())
+  // const minute = pad(utc8Date.getUTCMinutes())
-  const second = pad(utc8Date.getUTCSeconds())
+  // const second = pad(utc8Date.getUTCSeconds())
 
-  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
+  return dayjs(utcStr).format('YYYY-MM-DD HH:mm:ss')
 }
 

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()
   }
 }
 

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" />
+    <FundDetailTable :table-data="tableData" :columns="tableColumnsOptions" @row-click="handleRowClick" row-key="id"
-    <FundDetailDialog :visible="visible" :title="dialogTitle" @close="visible = false" @cancel="visible = false"
+      :loading="loading" />
-      @confirm="handleConfirm">
+    <FundDetailDialog :visible="visible" :title="dialogTitle" :button-loading="buttonLoading" @close="visible = false"
-      <FundDetailForm :formData="formData" :formItems="formItems" :formRules="formRules" :optionsMap="optionsMap">
+      @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(() => {

src/views/capital/fundFlow/index.vue

@@ -1,25 +1,17 @@
 <template>
   <div class="table_form-container">
     <!-- 搜索 -->
-    <FundDetailSearch
+    <FundDetailSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
-      :search-form="searchForm"
+      @reset="handleReset">
-      :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
+    <FundDetailPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
-      v-model="currentPage"
+      @pagination-change="handlePaginationChange" />
-      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()
+  }
 }
 
 /**

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: '现有余额' },
   //状态

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)
     }
 }

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 },
 ]

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
+    <DepositChannelTable ref="tableRef" :table-data="tableData" :columns="tableColumnsOptions" row-key="id"
-      ref="tableRef"
+      :loading="loading" @rowClick="handleRowClick" />
-      :table-data="tableData"
+    <el-dialog v-model="dialogVisible" :title="dialogTitleType === 1 ? '添加充值渠道' : '编辑充值渠道'" width="700">
-      :columns="tableColumnsOptions"
+      <Form :formItems="formItems" ref="formRef" :formRules="formRules" :formData="formData" :optionsMap="optionsMap" />
-      row-key="id"
-      @rowClick="handleRowClick"
-    />
-    <el-dialog
-      v-model="dialogVisible"
-      :title="dialogTitleType === 1 ? '添加充值渠道' : '编辑充值渠道'"
-      width="700"
-    >
-      <Form
-        :formItems="formItems"
-        :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>
-

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' },
   // 接口地址

src/views/capital/rechangeCheck/index.vue

@@ -19,36 +19,16 @@
       </template>
     </RechangeSearch>
 
-    <!-- 列表区域：改为真实接口数据，仍保留勾选列供后续审核动作使用 -->
+    <!-- 列表区域：使用公共 Table 组件 -->
-    <div class="table-wrapper">
+    <Table
-      <el-table
       ref="tableRef"
-        v-loading="loading"
+      :table-data="tableData"
-        :data="tableData"
+      :columns="tableColumns"
-        border
-        height="100%"
       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()
+  }
 }
 
 // 导出：先导出当前页接口数据，后续如需全量导出可切成独立导出接口。

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 },
 ]

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()
   }
 }
 

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',

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 = {}

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' },
   // 接口地址

src/views/capital/withdrawCheck/index.vue

@@ -8,25 +8,16 @@
             </template>
         </WithdrawSearch>
 
-        <!-- 列表区域：当前使用页面内表格，避免改动公共 Table 组件 -->
+        <!-- 列表区域：使用公共 Table 组件 -->
-        <div class="table-wrapper">
+        <Table
-            <el-table v-loading="loading" :data="tableData" border height="100%" row-key="id"
+            ref="tableRef"
-                @selection-change="handleSelectionChange">
+            :table-data="tableData"
-                <!-- 勾选列：用于后续审核通过/驳回 -->
+            :columns="tableColumns"
-                <el-table-column type="selection" width="55" align="center" />
+            row-key="id"
-
+            :loading="loading"
-                <!-- 序号列：根据当前分页动态计算 -->
+            :show-selection="true"
-                <el-table-column label="序号" width="70" align="center">
+            @selection-change="handleSelectionChange"
-                    <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>
 
         <!-- 分页区域：复用项目内分页组件 -->
         <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()
     }
 }
 

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_service_fee', label: '服务费', align: 'center' as const, width: 100, isNumber: true },
-    { prop: 'withdraw_head_fee', label: '总部手续费', align: 'center' as const, width: 120 },
+    { prop: 'withdraw_head_fee', label: '总部手续费', align: 'center' as const, width: 120, isNumber: true },
-    { prop: 'withdraw_fee_handle', label: '代理手续费', align: 'center' as const, width: 120 },
+    { prop: 'withdraw_fee_handle', label: '代理手续费', align: 'center' as const, width: 120, isNumber: true },
-    { prop: 'withdraw_point_diff', label: '点差', align: 'center' as const, width: 100 },
+    { prop: 'withdraw_point_diff', label: '点差', align: 'center' as const, width: 100, isNumber: true },
-    { prop: 'withdraw_risk_fee', label: '风控费', align: 'center' as const, width: 100 },
+    { prop: 'withdraw_risk_fee', label: '风控费', align: 'center' as const, isNumber: true },
-    { prop: 'withdraw_address', label: '提现地址', align: 'center' as const, width: 180 },
+    { prop: 'withdraw_address', label: '提现地址', align: 'center' as const},
-    { prop: 'created_at', label: '申请时间', align: 'center' as const, width: 180 }
+    { prop: 'created_at', label: '申请时间', align: 'center' as const}
 ]

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 type="primary" @click="addFee" v-auth="'feeHandl_createFeeSetting'">添加模板</el-button>
-          >添加模板</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="primary" @click="editFee" v-auth="'feeHandl_editFeeSetting'"
+        <el-button type="danger" @click="changeStatus(2)" v-auth="'feeHandl_editFeeSetting'">禁用模板</el-button>
-          >编辑模板</el-button
+        <el-button type="primary" @click="editFeeDetail" v-auth="'feeHandl_setFeeSettingDetail'">编辑模板详情</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
+        <Table ref="singleTableRef" :table-data="tableData"  :columns="tableColumns" row-key="id" :loading="loading"
-          ref="singleTableRef"
+          :highlight-current-row="true" @current-change="handleCurrentChange" />
-          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>
       </div>
       <div class="table-container-right">
-        <el-table height="100%" :data="tableDataDetail">
+        <Table row-key="id" :table-data="tableDataDetail" :columns="tableColumnsDetail" :loading="detailLoading" />
-          <el-table-column
-            v-for="column in tableColumnsDetail"
-            :key="column.prop"
-            :prop="column.prop"
-            :label="column.label"
-          />
-        </el-table>
       </div>
     </div>
-    <el-dialog
+    <el-dialog v-model="dialogVisible" :title="dialogTitleType === 1 ? '添加手续费模板' : '编辑手续费模板'" width="500">
-      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
+              <el-input-number :min="0" :max="999999999" :controls="false" v-model="scope.row.fee" />
-                :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 formItems = formDataList
-const formRules = ref(formRulesList)
+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([
+const setCurrent = (row: any) => {
-  { prop: 'name', label: '名称' },
+  singleTableRef.value?.setCurrentRow(row)
-  { 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 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 (tableData.value.length === 0) {
-  if (res && res.length > 0) {
+    tableDataDetail.value = []
-    const targetRow = savedId ? res.find((item: any) => item.id === savedId) : null
+    return
-    if (targetRow) {
-      setCurrent(targetRow)
-      handleCurrentChange(targetRow)
-    } else {
-      setCurrent(res[0])
-      handleCurrentChange(res[0])
-    }
-  }
   }
 
-const getItemDetail = async (id: number) => {
+  const targetRow = savedId ? tableData.value.find((item) => item.id === savedId) : null
+  const rowToSelect = targetRow || tableData.value[0]
+
+  setCurrent(rowToSelect)
+  handleCurrentChange(rowToSelect)
+}
+
+// 获取详情数据
+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>
+

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 type="primary" @click="handleAddRisk" v-auth="'riskControl_createRiskControl'">添加</el-button>
-        >添加</el-button
+      <el-button type="primary" @click="handleModifyRisk" v-auth="'riskControl_editRiskControlSetting'">修改</el-button>
-      >
+      <el-button type="danger" @click="handleChangeStatus(2)"
-      <el-button
+        v-auth="'riskControl_editRiskControlSetting'">停用</el-button>
-        type="primary"
+      <el-button type="primary" @click="handleChangeStatus(1)"
-        @click="handleModifyRisk"
+        v-auth="'riskControl_editRiskControlSetting'">启用</el-button>
-        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
+      <RiskTableSwitch :columns="tableColumnsSwitch" :table-data="tableTreeSwitch" class="table-switch"
-        :columns="tableColumnsSwitch"
+        @row-click="handleRowClick" row-key="id" highlight-current-row :current-row-key="selectedRowId"
-        :table-data="tableTreeSwitch"
+        :loading="loading">
-        class="table-switch"
-        @row-click="handleRowClick"
-        row-key="id"
-        highlight-current-row
-        :current-row-key="selectedRowId"
-      >
         <template #status="{ row }">
           <span>{{ row.status === 1 ? '启用' : '停用' }}</span>
         </template>
       </RiskTableSwitch>
-      <RiskTableContent
+      <RiskTableContent :columns="tableColumnsContent" :table-data="currentContent" class="table-content" row-key="id"
-        :columns="tableColumnsContent"
+        :loading="detailLoading">
-        :table-data="currentContent"
-        class="table-content"
-        row-key="id"
-      >
       </RiskTableContent>
     </div>
     <!-- dialog -->
-    <RiskDialog
+    <RiskDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" :button-loading="submitLoading" @confirm="handleSubmit"
-      :visible="dialogVisible"
+      @cancel="handleCancel" @close="handleClose">
-      :title="dialogTitle"
+      <RiskForm :form-data="dialogForm" :form-rules="riskRules" :form-items="RiskFormItems"
-      :type="dialogType"
+        :options-map="riskFormOptionsMap" :row-gutter="rowGutter" :col-span="colSpan" ref="riskFormRef" />
-      @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

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"
+        <CustomerTradeOrderSearch :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions"
-            @reset="handleReset"  @blur-input="getSubAccountList">
+            @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 () => {

src/views/order/position/index.vue

@@ -2,11 +2,8 @@
   <div class="position-stat table_form-container">
     <!-- 搜索 -->
     <PositionStatSearch 
-      :search-form="searchForm"
+      :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
-      :search-options="searchOptions"
+      @reset="handleReset">
-      @search="handleSearch"
-      @reset="handleReset"
-    >
       <!--            <template #button="{ form }">-->
       <!--                <el-button type="primary" @click="handleExport()">-->
       <!--                    导出-->
@@ -14,11 +11,8 @@
       <!--            </template>-->
     </PositionStatSearch>
     <!-- 表格 -->
-    <PositionStatTable
+    <PositionStatTable :table-data="orderPositionStore.positionOrderList" :columns="tableColumnsOptions"
-      :table-data="orderPositionStore.positionOrderList"
+      :loading="loading" row-key="id" />
-      :columns="tableColumnsOptions"
-      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('重置搜索')

src/views/order/position/options.ts

@@ -14,7 +14,7 @@ export const tableColumns = [
     // 操作类型
     { prop: 'tradeType', label: '操作类型' },
     // 金额
-    { prop: 'amount', label: '金额' },
+    { prop: 'amount', label: '金额', isNumber: true },
     // 交易数量
     { prop: 'tradeQty', label: '交易数量'},
     // 交易时间

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()
   }
 }
 

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 },

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)
 }

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 },

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()
   }
 }
 

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' },
   // 手续费分成比例

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()
+  }
 }
 
 // 取消

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 },
 ]
 
 //做市商添加配置

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();
   }
 };
 

src/views/profile/user/index.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="client table_form-container">
     <!-- 搜索组件 -->
-    <ClientSearch
+    <ClientSearch :search-form="clientSearchForm" :search-options="clientSearchOptions" :buttonLoading="loading"
-      :search-form="clientSearchForm"
+      @search="handleSearch" @reset="handleReset">
-      :search-options="clientSearchOptions"
-      @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
+    <ClientPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
-      v-model="currentPage"
+      @pagination-change="handlePaginationChange" />
-      v-model:pageSizeValue="pageSize"
-      :total="total"
-      @pagination-change="handlePaginationChange"
-    />
   </div>
   <!-- 客户弹窗 -->
-  <ClientDialog
+  <ClientDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" :button-loading="submitLoading"
-    :visible="dialogVisible"
+    @confirm="handleSubmit" @cancel="handleCancel" @close="handleClose">
-    :title="dialogTitle"
+    <ClientForm :form-data="clientForm" :form-rules="clientFormRules" :form-items="clientFormOptions"
-    :type="dialogType"
+      :options-map="clientFormOptionsMap" ref="clientFormRef">
-    @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
+            <el-button :type="activeTab === 'email' ? 'primary' : 'default'" size="small" @click="activeTab = 'email'">
-              :type="activeTab === 'email' ? 'primary' : 'default'"
-              size="small"
-              @click="activeTab = 'email'"
-            >
               邮箱
             </el-button>
-            <el-button
+            <el-button :type="activeTab === 'phone' ? 'primary' : 'default'" size="small" @click="activeTab = 'phone'">
-              :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
+                <el-option v-for="item in countryOptions" :key="item.code" :label="item.code" :value="item.code">
-                  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
+  <ClientDialog :visible="adjustAmountVisible" title="调整金额" type="adjust" :button-loading="adjustAmountLoading"
-    :visible="adjustAmountVisible"
+    @confirm="handleAdjustAmountSubmit" @cancel="handleAdjustAmountCancel" @close="handleAdjustAmountClose">
-    title="调整金额"
-    type="adjust"
-    @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
+        <el-input v-model="adjustAmountForm.adjustAmount" placeholder="请输入调整金额（可为负数）"
-          v-model="adjustAmountForm.adjustAmount"
+          @input="handleAdjustAmountInput" />
-          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;
 }

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 },
 ]

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()
   }
 }
 // 页面加载时获取菜单列表

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 = () => {

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"
+        <el-tree v-loading="treeLoading" ref="permissionTreeRef" :data="permissionTreeData" :props="treeProps"
-          :default-expand-all="true" :check-strictly="false"
+          show-checkbox node-key="id" :default-expand-all="true" :check-strictly="false" class="permission-tree" />
-          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()
   }
 }
 

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()
   }
 }
 // 页面加载时获取菜单列表

src/views/trade/holidays/index.vue

@@ -1,24 +1,14 @@
 <template>
   <div class="trade-group table_form-container">
     <el-form-item label="交易节假日时间设置">
-      <el-button
+      <el-button style="margin-left: 18px" type="primary" v-auth="'contractVariety_addHoliday'"
-        style="margin-left: 18px"
+        @click="handleAdd">添加</el-button>
-        type="primary"
+      <el-button style="margin-left: 18px" type="danger" v-auth="'contractVariety_addHoliday'"
-        v-auth="'contractVariety_addHoliday'"
+        @click="handleDel">删除</el-button>
-        @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
+              <el-date-picker v-if="item.editStatus" v-model="item.datePicker" type="datetimerange"
-                v-if="item.editStatus"
+                start-placeholder="休市开始时间" end-placeholder="休市结束时间" format="YYYY-MM-DD HH:mm:ss"
-                v-model="item.datePicker"
+                date-format="YYYY-MM-DD HH:mm:ss" time-format="YYYY-MM-DD HH:mm:ss"
-                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss" />
-                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
+              <el-select multiple placeholder="请选择休市市场" style="width: 240px" v-model="item.groupId"
-                multiple
+                v-if="item.editStatus">
-                placeholder="请选择休市市场"
+                <el-option v-for="item in marketList" :key="item.value" :label="item.label" :value="item.value" />
-                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
+              <el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
-                type="primary"
+                v-auth="'contractVariety_addHoliday'">编辑</el-button>
-                v-if="!item.editStatus"
+              <el-button type="danger" v-if="!item.editStatus" @click="handleDel(item.id, index)"
-                @click="item.editStatus = true"
+                v-auth="'contractVariety_addHoliday'">删除</el-button>
-                v-auth="'contractVariety_addHoliday'"
+              <el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
-                >编辑</el-button
+                v-auth="'contractVariety_addHoliday'">确认</el-button>
-              >
+              <el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
-              <el-button
+                v-auth="'contractVariety_addHoliday'">取消</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;

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 type="primary" @click="addTableItem" v-auth="'contractVariety_createGroup'">添加</el-button>
-        >添加</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
+                  <el-time-picker v-for="(time, timeIndex) in item?.x_time_list" :key="timeIndex"
-                    v-for="(time, timeIndex) in item?.x_time_list"
+                    v-model="item.x_time_list[timeIndex]" style="width: 180px; flex: 0 0 auto" format="HH:mm:ss"
-                    :key="timeIndex"
+                    value-format="HH:mm:ss" :picker-options="{
-                    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
+                <img src="@/assets/images/trade/group/add.png" @click="addTime(index, 'x_time_list')" />
-                  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
+              <el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
-                type="primary"
+                v-auth="'contractVariety_editGroup'">编辑</el-button>
-                v-if="!item.editStatus"
+              <el-button type="danger" v-if="!item.editStatus" @click="deleteGroup(item.id, index)"
-                @click="item.editStatus = true"
+                v-auth="'contractVariety_delGroup'">删除</el-button>
-                v-auth="'contractVariety_editGroup'"
+              <el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
-                >编辑</el-button
+                v-auth="'contractVariety_editGroup'">确认</el-button>
-              >
+              <el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
-              <el-button
+                v-auth="'contractVariety_editGroup'">取消</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
+                  <el-time-picker v-for="(time, timeIndex) in item?.d_time_list" :key="timeIndex"
-                    v-for="(time, timeIndex) in item?.d_time_list"
+                    v-model="item.d_time_list[timeIndex]" style="width: 180px; flex: 0 0 auto" format="HH:mm:ss"
-                    :key="timeIndex"
+                    value-format="HH:mm:ss" :picker-options="{
-                    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
+                <img src="@/assets/images/trade/group/add.png" @click="addTime(index, 'd_time_list')" />
-                  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; /* 文字变小 */
+    font-size: 12px;
-    white-space: nowrap; /* 文字不换行 */
+    /* 文字变小 */
-    vertical-align: middle; /* 垂直居中 */
+    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;
       }

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

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 },
   // 止盈水平

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)

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>