From 55e133852ef8b7c5fee5997221521fcafe161c51 Mon Sep 17 00:00:00 2001
From: wintsa <770775984@qq.com>
Date: Wed, 18 Mar 2026 10:42:42 +0800
Subject: [PATCH] fix toast Style issue

---
 .claude/settings.local.json |  5 ++-
 src/components/ht/Ht.vue    | 10 +++---
 src/layout/tab.vue          | 71 +++++++++++++++++++++++++++++++++++--
 src/sql.ts                  |  7 ++--
 4 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 134968b..566cfe0 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -11,7 +11,10 @@
       "Bash(bun run:*)",
       "Bash(grep:*)",
       "mcp__context7__resolve-library-id",
-      "mcp__context7__query-docs"
+      "mcp__context7__query-docs",
+      "mcp__ag-mcp__detect_version",
+      "WebSearch",
+      "WebFetch(domain:reka-ui.com)"
     ]
   }
 }
diff --git a/src/components/ht/Ht.vue b/src/components/ht/Ht.vue
index 7023568..6cf83b7 100644
--- a/src/components/ht/Ht.vue
+++ b/src/components/ht/Ht.vue
@@ -1756,21 +1756,21 @@ watch(budgetRefreshSignature, (next, prev) => {
   <ToastRoot
     v-model:open="toastOpen"
     :duration="1800"
-    class="group pointer-events-auto flex items-center gap-3 rounded-xl border border-slate-800/90 bg-slate-900 px-4 py-3 text-white shadow-xl"
+    class="group pointer-events-auto flex items-center gap-3 rounded-xl border border-border bg-card px-4 py-3 text-foreground shadow-lg"
   >
     <div class="grid gap-1">
-      <ToastTitle class="text-sm font-semibold text-white">{{ toastTitle }}</ToastTitle>
-      <ToastDescription class="text-xs text-slate-100">{{ toastText }}</ToastDescription>
+      <ToastTitle class="text-sm font-semibold text-foreground">{{ toastTitle }}</ToastTitle>
+      <ToastDescription class="text-xs text-muted-foreground">{{ toastText }}</ToastDescription>
     </div>
     <ToastAction
       alt-text="知道了"
-      class="ml-auto inline-flex h-7 items-center rounded-md border border-white/30 bg-white/10 px-2 text-xs text-white hover:bg-white/20"
+      class="ml-auto cursor-pointer inline-flex h-7 items-center rounded-md border border-border bg-muted px-2 text-xs text-foreground hover:bg-muted/80"
       @click="toastOpen = false"
     >
       知道了
     </ToastAction>
   </ToastRoot>
-  <ToastViewport class="fixed bottom-5 right-5 z-[80] flex w-[380px] max-w-[92vw] flex-col gap-2 outline-none" />
+  <ToastViewport class="fixed bottom-5 right-5 z-[85] flex w-[380px] max-w-[92vw] flex-col gap-2 outline-none" />
   </TooltipProvider>
   </ToastProvider>
 </template>
diff --git a/src/layout/tab.vue b/src/layout/tab.vue
index 56250f2..e749627 100644
--- a/src/layout/tab.vue
+++ b/src/layout/tab.vue
@@ -20,6 +20,11 @@ import {
   AlertDialogRoot,
   AlertDialogTitle,
   AlertDialogTrigger,
+  ToastDescription,
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  ToastViewport
 } from 'reka-ui'
 import { decodeZwArchive, encodeZwArchive, ZW_FILE_EXTENSION } from '@/lib/zwArchive'
 import { PROJECT_TAB_ID, QUICK_TAB_ID, readWorkspaceMode } from '@/lib/workspace'
@@ -470,6 +475,37 @@ const tabTitleOverflowMap = ref<Record<string, boolean>>({})
 let tabStripViewportEl: HTMLElement | null = null
 let tabTitleOverflowRafId: number | null = null
 
+const reportExportToastOpen = ref(false)
+const reportExportProgress = ref(0)
+const reportExportStatus = ref<'running' | 'success' | 'error'>('running')
+const reportExportText = ref('')
+let reportExportToastTimer: ReturnType<typeof setTimeout> | null = null
+
+const clearReportExportToastTimer = () => {
+  if (!reportExportToastTimer) return
+  clearTimeout(reportExportToastTimer)
+  reportExportToastTimer = null
+}
+
+const showReportExportProgress = (progress: number, text: string) => {
+  clearReportExportToastTimer()
+  reportExportStatus.value = 'running'
+  reportExportProgress.value = Math.max(0, Math.min(100, progress))
+  reportExportText.value = text
+  reportExportToastOpen.value = true
+}
+
+const finishReportExportProgress = (success: boolean, text: string) => {
+  clearReportExportToastTimer()
+  reportExportStatus.value = success ? 'success' : 'error'
+  reportExportProgress.value = 100
+  reportExportText.value = text
+  reportExportToastOpen.value = true
+  reportExportToastTimer = setTimeout(() => {
+    reportExportToastOpen.value = false
+  }, success ? 1200 : 1800)
+}
+
 const tabsModel = computed({
   get: () => tabStore.tabs,
   set: (value) => {
@@ -1575,11 +1611,15 @@ const exportReport = async () => {
     const now = new Date()
     const payload = await buildExportReportPayload()
     const fileName = `${sanitizeFileNamePart(payload.name)}-报表-${formatExportTimestamp(now)}`
-    console.log(payload)
-    await exportFile(fileName, payload)
+    await exportFile(fileName, payload, () => {
+      showReportExportProgress(30, '正在生成报表文件...')
+    })
+    finishReportExportProgress(true, '报表导出完成')
   } catch (error) {
     console.error('export report failed:', error)
-    // window.alert('导出报表失败，请重试。')
+    if (reportExportToastOpen.value) {
+      finishReportExportProgress(false, '报表导出失败，请重试')
+    }
   } finally {
     dataMenuOpen.value = false
   }
@@ -1760,6 +1800,7 @@ watch(
 </script>
 
 <template>
+  <ToastProvider>
   <TooltipProvider>
     <div class="flex flex-col w-full h-screen bg-background overflow-hidden">
       <div class="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2 border-b bg-muted/30 px-2 pt-1 h-15 flex-none">
@@ -1967,7 +2008,31 @@ watch(
         </div>
       </div>
     </div>
+    <ToastRoot
+      v-model:open="reportExportToastOpen"
+      :duration="0"
+      class="pointer-events-auto rounded-xl border border-border bg-card px-4 py-3 text-foreground shadow-lg"
+    >
+      <ToastTitle class="text-sm font-semibold text-foreground">
+        {{ reportExportStatus === 'running' ? '导出报表' : (reportExportStatus === 'success' ? '导出成功' : '导出失败') }}
+      </ToastTitle>
+      <ToastDescription class="mt-1 text-xs text-muted-foreground">{{ reportExportText }}</ToastDescription>
+      <div class="mt-2 flex items-center gap-2">
+        <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
+          <div
+            class="h-full transition-all duration-300"
+            :class="reportExportStatus === 'error'
+              ? 'bg-red-500'
+              : (reportExportStatus === 'success' ? 'bg-foreground/70' : 'bg-foreground')"
+            :style="{ width: `${reportExportProgress}%` }"
+          />
+        </div>
+        <span class="shrink-0 text-[11px] tabular-nums text-muted-foreground">{{ reportExportProgress }}%</span>
+      </div>
+    </ToastRoot>
+    <ToastViewport class="fixed bottom-5 right-5 z-[85] flex w-[380px] max-w-[92vw] flex-col gap-2 outline-none" />
   </TooltipProvider>
+  </ToastProvider>
 </template>
 
 <style scoped>
diff --git a/src/sql.ts b/src/sql.ts
index 1ea742e..2a658c7 100644
--- a/src/sql.ts
+++ b/src/sql.ts
@@ -688,7 +688,7 @@ export function getBasicFeeFromScale(
  * 导出入口：生成 Excel 并触发保存（优先使用 File System Access API）。
  * @returns 导出流程完成后的 Promise
  */
-export async function exportFile(fileName: string, data: any): Promise<void> {
+export async function exportFile(fileName: string, data: any, onSaveConfirmed?: () => void): Promise<void> {
     if (window.showSaveFilePicker) {
         const handle = await window.showSaveFilePicker({
             suggestedName: fileName,
@@ -697,10 +697,9 @@ export async function exportFile(fileName: string, data: any): Promise<void> {
                 accept: { "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"] }
             }]
         });
-        // ecCom.WeaLoadingGlobal.start({
-        //     tip: "下载中，结束前请勿打开文件...",
-        // });
         try {
+                    onSaveConfirmed?.()
+
             const workbook = await generateTemplate(data);
             const buffer = await workbook.xlsx.writeBuffer();
             const writable = await handle.createWritable();