页签导航栏

src/components/layout/Layout.vue

@@ -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/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/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/capital/fundFlow/index.vue

@@ -1,12 +1,8 @@
 <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>
@@ -14,12 +10,8 @@
     <!-- 表格 -->
     <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>
 
@@ -71,6 +63,7 @@ const total = ref(0)
 //获取资金明细列表
 const getFundDetailList = async () => {
   startLoading()
+  try {
     const params = {
       page: currentPage.value,
       page_size: pageSize.value,
@@ -87,7 +80,6 @@ const getFundDetailList = async () => {
     }
     // 调用接口获取数据
     const data: any = await getFundDetailListApi(params)
-  stopLoading()
     console.log(data)
     tableTree.value = data.data.map((item: any) => ({
       ...item,
@@ -106,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/order/history/index.vue

@@ -10,7 +10,8 @@
             <div>交易盈亏:0.00 USD</div>
         </div>
         <!-- 表格 -->
-        <CustomerTradeOrderTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" :loading="loading" />
+        <CustomerTradeOrderTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id"
+            :loading="loading" />
 
         <!-- 分页 -->
         <CustomerTradeOrderPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
@@ -82,6 +83,7 @@ const total = ref(0)
  * @description: 定义公共请求数据方法
  */
 const getCustomerTradeOrderList = async () => {
+    try {
         startLoading()
         const params = {
             page: currentPage.value,
@@ -95,7 +97,6 @@ const getCustomerTradeOrderList = async () => {
         }
         console.log(params)
         const data: any = await getCustomTradeOrderListApi(params)
-    stopLoading()
         //表格数据
         // table数据映射
         tableTree.value = data.data.map((item: any) => ({
@@ -115,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 () => {