处理加载

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()
-    showLoading()
-  }
   // 添加token到请求头
   const token = getStorage('token')
   if (token) {

src/components/common/Table.vue

@@ -8,6 +8,7 @@
       :tree-props="treeProps"
       :border="border"
       :highlight-current-row="highlightCurrentRow"
+      v-loading="loading"
       v-bind="$attrs"
       @row-click="handleRowClick"
       @row-contextmenu="handleRowContextmenu"
@@ -71,11 +72,13 @@ interface Props {
   columns?: TableColumn[]
   border?: boolean // 是否显示边框
   highlightCurrentRow?: boolean // 是否高亮当前行
+  loading?: boolean // 是否显示加载状态
 }
 
 const props = withDefaults(defineProps<Props>(), {
   border: true,
   highlightCurrentRow: true,
+  loading: false,
 })
 
 // 定义组件抛出的事件

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">

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/views/agent/user/index.vue

@@ -6,7 +6,7 @@
 
     <!-- 表格 -->
     <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)">
           修改
@@ -126,6 +126,7 @@ defineOptions({
 // 组件
 import CustomerListSearch from '@/components/common/Search.vue'
 import CustomerListTable from '@/components/common/Table.vue'
+import { usePageLoading } 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,7 @@ const searchForm = ref({
 const searchOptions = ref(search)
 const tableColumnsOptions = ref(tableColumns)
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
  * @description: 定义表格数据
  */
@@ -323,6 +325,7 @@ const roleMap: any = {
  */
 // 获取客户列表
 const getCustomerList = async (id: string) => {
+  startLoading()
   const params = {
     user_id: id,
     page: currentPage.value,
@@ -360,6 +363,7 @@ const getCustomerList = async (id: string) => {
   }))
   console.log('tableTree', tableTree.value)
   //分页数据
+  stopLoading()
   total.value = data.total
   currentPage.value = data.current_page
   pageSize.value = Number(data.per_page)

src/views/capital/currency/index.vue

@@ -4,7 +4,7 @@
     <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" :loading="loading" />
     <FundDetailDialog :visible="visible" :title="dialogTitle" @close="visible = false" @cancel="visible = false"
       @confirm="handleConfirm">
       <FundDetailForm :formData="formData" :formItems="formItems" :formRules="formRules" :optionsMap="optionsMap">
@@ -20,6 +20,7 @@ defineOptions({
 })
 import FundDetailHeader from '@/components/common/header.vue'
 import FundDetailTable from '@/components/common/Table.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import FundDetailDialog from '@/components/common/Dialog.vue'
 import FundDetailForm from '@/components/common/Form.vue'
 import type { ButtonProps } from 'element-plus'
@@ -41,6 +42,7 @@ interface HeaderButton {
   key?: string | number // 可选的唯一标识
 }
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 const buttonsOptions = ref(buttons)
 const formItems = ref(form)
 const tableData = ref([])
@@ -70,7 +72,9 @@ let rowData: any = {}
 const visible = ref<boolean>(false)
 
 const getTableList = async () => {
+  startLoading()
   const data = await getCurrencyList()
+  stopLoading()
   tableData.value = (data || []).map((item: any) => {
     return {
       ...item,

src/views/capital/fundFlow/index.vue

@@ -12,7 +12,7 @@
       </template>
     </FundDetailSearch>
     <!-- 表格 -->
-    <FundDetailTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" />
+    <FundDetailTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" :loading="loading" />
     <!-- 分页 -->
     <FundDetailPagination
       v-model="currentPage"
@@ -32,6 +32,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 +52,7 @@ const searchForm = ref({
   startTime: initTime.start,
   endTime: initTime.end,
 })
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
  * @description: 定义表格数据
  */
@@ -68,6 +70,7 @@ const total = ref(0)
  */
 //获取资金明细列表
 const getFundDetailList = async () => {
+  startLoading()
   const params = {
     page: currentPage.value,
     page_size: pageSize.value,
@@ -84,6 +87,7 @@ const getFundDetailList = async () => {
   }
   // 调用接口获取数据
   const data: any = await getFundDetailListApi(params)
+  stopLoading()
   console.log(data)
   tableTree.value = data.data.map((item: any) => ({
       ...item,

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/rechangeChanl/index.vue

@@ -10,6 +10,7 @@
       :table-data="tableData"
       :columns="tableColumnsOptions"
       row-key="id"
+      :loading="loading"
       @rowClick="handleRowClick"
     />
     <el-dialog
@@ -40,6 +41,7 @@ defineOptions({
 //组件
 import DepositChannelTable from '@/components/common/Table.vue'
 import Form from '@/components/common/Form.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import { tableColumns, formItemsData, formRulesData, optionsMapData } from './options'
 import {
   getChannelList,
@@ -65,8 +67,11 @@ const getStatusText = (status: number | string) => {
   return ['', '正常', '禁用'][status]
 }
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 const initData = async () => {
+  startLoading()
   const res = await getChannelList()
+  stopLoading()
   console.log(res)
   tableData.value = res.map((item: ChannelType) => ({
     ...item,

src/views/capital/rechangeCheck/index.vue

@@ -68,6 +68,7 @@ defineOptions({
 import { ElMessage } from 'element-plus'
 import { onMounted, ref } from 'vue'
 import RechangeSearch from '@/components/common/Search.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 +102,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 +138,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 +176,7 @@ const getList = async () => {
     total.value = 0
     console.error('获取充值审核列表失败', error)
   } finally {
-    loading.value = false
+    stopLoading()
   }
 }
 

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/withdrawChanl/index.vue

@@ -10,6 +10,7 @@
       :table-data="tableData"
       :columns="tableColumnsOptions"
       row-key="id"
+      :loading="loading"
       @rowClick="handleRowClick"
     />
     <el-dialog
@@ -39,6 +40,7 @@ defineOptions({
 //组件
 import Table from '@/components/common/Table.vue'
 import Form from '@/components/common/Form.vue'
+import { usePageLoading } from '@/composables/useLoading'
 import { tableColumns, formItemsData, formRulesData, optionsMapData } from './options'
 import {
   getChannelWithdrawList,
@@ -65,8 +67,11 @@ const getStatusText = (status: number | string) => {
   return ['', '正常', '禁用'][status]
 }
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 const initData = async () => {
+  startLoading()
   const res = await getChannelWithdrawList()
+  stopLoading()
   console.log(res)
   tableData.value = res.map((item: ChannelType) => ({
     ...item,

src/views/capital/withdrawCheck/index.vue

@@ -43,6 +43,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
 import dayjs from 'dayjs'
 import WithdrawSearch from '@/components/common/Search.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 +118,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 +173,7 @@ interface ListResponse {
 
 // 获取列表数据
 const getList = async () => {
-    loading.value = true
+    startLoading()
     selectedRows.value = []
     
     const [start_time, end_time] = searchForm.value.timeRange || []
@@ -192,7 +193,7 @@ const getList = async () => {
         console.error('获取提现审核列表失败:', error)
         ElMessage.error('获取列表失败')
     } finally {
-        loading.value = false
+        stopLoading()
     }
 }
 

src/views/mould/handleFee/index.vue

@@ -28,6 +28,7 @@
           highlight-current-row
           border
           @current-change="handleCurrentChange"
+          :loading="loading"
         >
           <el-table-column type="index" width="55" />
           <el-table-column
@@ -39,7 +40,7 @@
         </el-table>
       </div>
       <div class="table-container-right">
-        <el-table height="100%" :data="tableDataDetail">
+        <el-table height="100%" :data="tableDataDetail" :loading="loading">
           <el-table-column
             v-for="column in tableColumnsDetail"
             :key="column.prop"
@@ -94,6 +95,9 @@ defineOptions({
   name: 'HandleFee'
 })
 import { ref, onMounted } from 'vue'
+import { usePageLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+
 import {
   getFeeSettingList,
   getFeeSettingDetail,
@@ -146,19 +150,24 @@ const tableColumnsDetail = ref([
 ])
 
 const getTableData = async () => {
-  const res = await getFeeSettingList()
+  startLoading()
-  const savedId = currentRow.value?.id
+  try {
-  tableData.value = res
+    const res = await getFeeSettingList()
-  console.log(res)
+    const savedId = currentRow.value?.id
-  if (res && res.length > 0) {
+    tableData.value = res
-    const targetRow = savedId ? res.find((item: any) => item.id === savedId) : null
+    console.log(res)
-    if (targetRow) {
+    if (res && res.length > 0) {
-      setCurrent(targetRow)
+      const targetRow = savedId ? res.find((item: any) => item.id === savedId) : null
-      handleCurrentChange(targetRow)
+      if (targetRow) {
-    } else {
+        setCurrent(targetRow)
-      setCurrent(res[0])
+        handleCurrentChange(targetRow)
-      handleCurrentChange(res[0])
+      } else {
+        setCurrent(res[0])
+        handleCurrentChange(res[0])
+      }
     }
+  } finally {
+    stopLoading()
   }
 }
 

src/views/mould/risk/index.vue

@@ -34,6 +34,7 @@
         row-key="id"
         highlight-current-row
         :current-row-key="selectedRowId"
+        :loading="loading"
       >
         <template #status="{ row }">
           <span>{{ row.status === 1 ? '启用' : '停用' }}</span>
@@ -44,6 +45,7 @@
         :table-data="currentContent"
         class="table-content"
         row-key="id"
+        :loading="loading"
       >
       </RiskTableContent>
     </div>
@@ -75,6 +77,9 @@ defineOptions({
   name: 'Risk'
 })
 // 组件
+import { usePageLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+
 import RiskTableSwitch from '@/components/common/Table.vue'
 import RiskTableContent from '@/components/common/Table.vue'
 import RiskDialog from '@/components/common/Dialog.vue'
@@ -165,39 +170,41 @@ const colSpan = ref(12)
  * @description: 定义请求数据方法
  */
 const getRiskList = async () => {
-  const data: any = await getRiskListApi()
+    startLoading() 
-  // 保存原始数据
+    const data: any = await getRiskListApi()
-  riskOriginData.value = data
+    stopLoading()
-  // 处理数据
+    // 保存原始数据
-  tableTreeSwitch.value = data.map((item: any) => ({
+    riskOriginData.value = data
-    id: item.id,
+    // 处理数据
-    name: item.name,
+    tableTreeSwitch.value = data.map((item: any) => ({
-    status: item.status,
+      id: item.id,
-  }))
+      name: item.name,
-  tableTreeContent.value = data.map((item: any) => ({
+      status: item.status,
-    id: item.id,
+    }))
-    isDefault: item.is_default,
+    tableTreeContent.value = data.map((item: any) => ({
-    // 单笔开仓最大数量
+      id: item.id,
-    maxOpenPosition: item.max_opening_quantity_per_transaction,
+      isDefault: item.is_default,
-    // 单品种最大持仓数量
+      // 单笔开仓最大数量
-    maxPositionPerSymbol: item.max_holding_quantity_per_variety,
+      maxOpenPosition: item.max_opening_quantity_per_transaction,
-    // 总品种最大持仓数量
+      // 单品种最大持仓数量
-    maxTotalPosition: item.max_holding_quantity_per_transaction,
+      maxPositionPerSymbol: item.max_holding_quantity_per_variety,
-    // 强平比例
+      // 总品种最大持仓数量
-    strongCloseRatio: item.strong_to_average_ratio,
+      maxTotalPosition: item.max_holding_quantity_per_transaction,
-    // 每次出金最大金额
+      // 强平比例
-    maxWithdrawalAmount: item.max_withdrawal_amount_per_transaction,
+      strongCloseRatio: item.strong_to_average_ratio,
-    // 是否允许出金
+      // 每次出金最大金额
-    isWithdrawalAllowed: item.withdraw_status === 1 ? '是' : '否',
+      maxWithdrawalAmount: item.max_withdrawal_amount_per_transaction,
-    // 出金时间设置
+      // 是否允许出金
-    withdrawalTimeSetting: item.withdraw_time,
+      isWithdrawalAllowed: item.withdraw_status === 1 ? '是' : '否',
-    // 是否需要出金审核
+      // 出金时间设置
-    isWithdrawalAuditRequired: item.withdraw_is_check === 1 ? '是' : '否',
+      withdrawalTimeSetting: item.withdraw_time,
-    // 建仓多少秒不能平仓
+      // 是否需要出金审核
-    buildCloseTime: item.open_close_time,
+      isWithdrawalAuditRequired: item.withdraw_is_check === 1 ? '是' : '否',
-    // 每次出金最小金额
+      // 建仓多少秒不能平仓
-    minWithdrawalAmount: item.min_withdrawal_amount_per_transaction,
+      buildCloseTime: item.open_close_time,
-    // 滑点
+      // 每次出金最小金额
+      minWithdrawalAmount: item.min_withdrawal_amount_per_transaction,
+      // 滑点 
     slippage: item.slippage,
     // 每次入金最小金额
     minDepositAmount: item.min_recharge_amount_per_transaction,

src/views/order/history/index.vue

@@ -10,7 +10,7 @@
             <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 +27,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 +64,7 @@ const subAccountOptions = ref([])
 //获取用户数据，用来判断当前查询的是不是自己的账号
 const userInfo: any = getStorage('userInfo')
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
  * @description: 定义表格数据
  */
@@ -80,6 +82,7 @@ const total = ref(0)
  * @description: 定义公共请求数据方法
  */
 const getCustomerTradeOrderList = async () => {
+    startLoading()
     const params = {
         page: currentPage.value,
         page_size: pageSize.value,
@@ -92,7 +95,7 @@ const getCustomerTradeOrderList = async () => {
     }
     console.log(params)
     const data: any = await getCustomTradeOrderListApi(params)
-
+    stopLoading()
     //表格数据
     // table数据映射
     tableTree.value = data.data.map((item: any) => ({

src/views/order/rechange/index.vue

@@ -13,6 +13,7 @@
       :table-data="tableTree"
       :columns="tableColumnsOptions"
       :highlight-current-row="false"
+      :loading="loading"
     >
       <!-- 操作列插槽 -->
 <!--      <template #operation="{ row }">-->
@@ -43,6 +44,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 +88,7 @@ const createDefaultSearchForm = (): SearchFormData => ({
 
 const searchForm = ref<SearchFormData>(createDefaultSearchForm())
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 // 表格数据与列配置。
 const tableTree = ref<RechangeOrderItem[]>([])
 const tableColumnsOptions = ref(tableColumns)
@@ -109,6 +112,7 @@ const getRechargeStatusText = (status: string | number | null | undefined) => {
 
 // 获取充值订单列表：把接口返回字段统一映射成页面表格结构。
 const getRechargeOrderList = async () => {
+  startLoading()
   const params = {
     page: currentPage.value,
     page_size: pageSize.value,
@@ -150,6 +154,8 @@ const getRechargeOrderList = async () => {
     tableTree.value = []
     total.value = 0
     console.error('获取充值订单列表失败', error)
+  } finally {
+    stopLoading()
   }
 }
 

src/views/order/transfer/index.vue

@@ -16,6 +16,7 @@
       :table-data="tableTree"
       :columns="tableColumnsOptions"
       row-key="id"
+      :loading="loading"
       ref="tableRef"
     >
     </TransferTable>
@@ -37,6 +38,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'
@@ -60,6 +62,7 @@ const searchForm = ref({
   transferTime: [initTime.start, initTime.end],
 })
 const searchOptions = ref(search)
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
  * @description: 定义表格数据
  */
@@ -77,6 +80,7 @@ const total = ref(0)
  */
 
 const getTransferDetailList = async () => {
+  startLoading()
   const params = {
     page: currentPage.value,
     page_size: pageSize.value,
@@ -108,6 +112,8 @@ const getTransferDetailList = async () => {
   }))
   // 分页数据
   total.value = data.total
+
+  stopLoading()
   currentPage.value = data.current_page
   pageSize.value = Number(data.per_page)
 }

src/views/profile/agent/index.vue

@@ -5,7 +5,7 @@
       @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)">
@@ -112,6 +112,7 @@ defineOptions({
 // 组件
 import CustomerListSearch from '@/components/common/Search.vue'
 import CustomerListTable from '@/components/common/Table.vue'
+import { usePageLoading } 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,7 @@ const searchForm = ref({
 const searchOptions = ref(search)
 const tableColumnsOptions = ref(tableColumns)
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
  * @description: 定义表格数据
  */
@@ -291,6 +293,7 @@ const roleMap: any = {
  */
 // 获取客户列表
 const getCustomerList = async () => {
+  startLoading()
   const params = {
     page: currentPage.value,
     page_size: pageSize.value,
@@ -315,6 +318,8 @@ const getCustomerList = async () => {
 
   //分页数据
   total.value = data.total
+
+  stopLoading()
   currentPage.value = data.current_page
   pageSize.value = Number(data.per_page)
 }

src/views/profile/business/index.vue

@@ -27,6 +27,7 @@
       :table-data="marketTree"
       :columns="marketTableColumnsOptions"
       row-key="id"
+      :loading="loading"
       @row-click="handleRowClick"
       @row-contextmenu="handleRowContextMenu"
     >
@@ -195,6 +196,7 @@ defineOptions({
 // 组件
 import MarketSearch from '@/components/common/Search.vue'
 import MarketTable from '@/components/common/Table.vue'
+import { usePageLoading } 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 +241,7 @@ const marketSearchForm = ref({
 })
 const marketSearchOptions = ref(marketSearch)
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
  * @description 定义表格数据
  */
@@ -565,6 +568,7 @@ const handleMarketFormLinkage = async (type: 'level' | 'parentAccountName', valu
  */
 //获取做市商列表
 const getMarketList = async () => {
+  startLoading()
   const params = {
     page: currentPage.value,
     page_size: pageSize.value,
@@ -573,8 +577,10 @@ const getMarketList = async () => {
   const data = await getMarketListApi(params)
   // 表格数据
   marketTree.value = mapMarketTree(data.data)
+    total.value = data.total
+
   //分页数据
-  total.value = data.total
+  stopLoading()
   currentPage.value = data.current_page
   pageSize.value = Number(data.per_page)
 }

src/views/profile/user/index.vue

@@ -15,7 +15,7 @@
     </ClientSearch>
 
     <!-- 表格组件 -->
-    <ClientTable :table-data="clientTree" :columns="clientTableColumns">
+    <ClientTable :table-data="clientTree" :columns="clientTableColumns" :loading="loading">
       <template #status="{ row }">
         {{ row.status === 1 ? '正常' : '禁用' }}
       </template>
@@ -137,6 +137,7 @@ defineOptions({
 // 组件
 import ClientSearch from '@/components/common/Search.vue'
 import ClientTable from '@/components/common/Table.vue'
+import { usePageLoading } 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 +173,7 @@ const clientSearchForm = ref({
   endDateTime: '',
 })
 
+const { loading, startLoading, stopLoading } = usePageLoading()
 /**
  * @description 定义表格数据
  */
@@ -281,6 +283,7 @@ const mapObjectToOptions = (obj: Record<string, string>) => {
  * @description 统一获取数据方法
  */
 const getClientList = async () => {
+  startLoading()
   const params = {
     page: currentPage.value,
     page_size: pageSize.value,
@@ -304,8 +307,9 @@ const getClientList = async () => {
     // 映射所属代理用户名
     agentUsername: item.par_uid === item.parent?.id ? item.parent?.username : '',
   }))
-  //分页数据
   total.value = Number(data.total)
+  //分页数据
+  stopLoading()
   currentPage.value = Number(data.current_page)
   pageSize.value = Number(data.per_page)
 }

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

@@ -14,7 +14,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 ? '草稿' : '已发布' }}
@@ -99,6 +99,9 @@
 defineOptions({
   name: 'Notice'
 })
+import { usePageLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+
 // 组件
 import NoticeSearch from '@/components/common/Search.vue'
 import NoticeTable from '@/components/common/Table.vue'
@@ -223,6 +226,7 @@ const noticeFormOptionsMap = ref({
  */
 //获取公告列表
 const getNoticeList = async () => {
+  startLoading()
   const params = {
     page: currentPage.value,
     page_size: pageSize.value,
@@ -231,19 +235,23 @@ const getNoticeList = async () => {
     publish_start_time: searchForm.value.startDateTime,
     publish_end_time: searchForm.value.endDateTime,
   }
-  const data: any = await getNoticeListApi(params)
+  try {
-  // 表格数据
+    const data: any = await getNoticeListApi(params)
-  noticeTree.value = data.data.map((item: any) => ({
+    // 表格数据
-    id: item.id,
+    noticeTree.value = data.data.map((item: any) => ({
-    noticeName: item.name,
+      id: item.id,
-    noticeContent: item.content,
+      noticeName: item.name,
-    publishTime: item.publish_time,
+      noticeContent: item.content,
-    status: item.status,
+      publishTime: item.publish_time,
-  }))
+      status: item.status,
-  // 分页数据
+    }))
-  total.value = data.total
+    // 分页数据
-  currentPage.value = data.current_page
+    total.value = data.total
-  pageSize.value = Number(data.per_page)
+    currentPage.value = data.current_page
+    pageSize.value = Number(data.per_page)
+  } finally {
+    stopLoading()
+  }
 }
 
 /**

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="禁用" />
@@ -54,6 +54,8 @@ defineOptions({
 })
 import type { FormInstance, TreeInstance } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
+import { usePageLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
 
 // 组件配置
 import RoleTable from '@/components/common/Table.vue'
@@ -140,11 +142,14 @@ const filterRoles = (roleList: any[]) => {
 
 // 获取角色列表
 const fetchRoleList = async () => {
+  startLoading()
   try {
     const data = await getRoleApi()
     roleTree.value = data
   } catch (err) {
     console.error('获取角色列表失败', err)
+  } finally {
+    stopLoading()
   }
 }
 

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/variety/index.vue

@@ -28,6 +28,7 @@
       :columns="varietyTableColumnsOptions"
       row-key="id"
       @row-click="handleRowClick"
+      :loading="loading"
     >
       <template #onlineStatus="{ row }">
         {{ ['', '上线', '下线'][row.onlineStatus] }}
@@ -94,6 +95,9 @@ defineOptions({
   name: 'Variety'
 })
 // 组件
+import { usePageLoading } from '@/composables/useLoading'
+const { loading, startLoading, stopLoading } = usePageLoading()
+
 import VarietySearch from '@/components/common/Search.vue'
 import VarietyTable from '@/components/common/Table.vue'
 import VarietyDialog from '@/components/common/Dialog.vue'
@@ -233,31 +237,36 @@ const typeMap: any = {
 
 //获取品种列表
 const getVarietyList = async () => {
+  startLoading()
   const params = {
     name: searchForm.value.varietyName,
   }
-  const data = await getVarietyListApi(params)
+  try {
-  console.log('data', data)
+    const data = await getVarietyListApi(params)
-  //格式化表格数据
+    console.log('data', data)
-  varietyTree.value = data.map((item: any) => ({
+    //格式化表格数据
-    ...item,
+    varietyTree.value = data.map((item: any) => ({
-    id: item.id,
+      ...item,
-    varietyName: item.name,
+      id: item.id,
-    varietyCode: item.code,
+      varietyName: item.name,
-    onlineStatus: item.online_status,
+      varietyCode: item.code,
-    tradeStatus: item.status,
+      onlineStatus: item.online_status,
-    minPoint: item.point_diff,
+      tradeStatus: item.status,
-    maxPoint: item.point_diff_max,
+      minPoint: item.point_diff,
-    contractSize: item.multiplier,
+      maxPoint: item.point_diff_max,
-    minFlux: item.undulate_min,
+      contractSize: item.multiplier,
-    unit: item.unit,
+      minFlux: item.undulate_min,
-    tradeGroup: item.group.name,
+      unit: item.unit,
-    longStockFee: item.fee_inventory_long,
+      tradeGroup: item.group.name,
-    shortStockFee: item.fee_inventory_short,
+      longStockFee: item.fee_inventory_long,
-    profitLevel: item.stop_loss_level,
+      shortStockFee: item.fee_inventory_short,
-    type: typeMap[item.type],
+      profitLevel: item.stop_loss_level,
-    image: item.image,
+      type: typeMap[item.type],
-  }))
+      image: item.image,
+    }))
+  } finally {
+    stopLoading()
+  }
 }
 
 // 获取合约品种分组列表