From 5e890108a1030331b552e266a94a53ecc3dbdd99 Mon Sep 17 00:00:00 2001
From: gmh01 <gmh01@qq.com>
Date: Thu, 23 Jul 2026 21:12:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC=E5=99=A8=E6=B3=84=E9=9C=B2=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=20nextTick=20=E7=A1=AE=E4=BF=9D?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=85=88=E4=BA=8E=20IPC=20=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PackProgress.vue | 38 ++++++++++++++-------------------
 src/stores/packaging.js         | 27 ++++++++++++++++-------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/components/PackProgress.vue b/src/components/PackProgress.vue
index 940ec8d..a6bd741 100644
--- a/src/components/PackProgress.vue
+++ b/src/components/PackProgress.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="pack-progress card">
     <div class="progress-header">
-      <div class="spinner" :class="{ active: !result }">
-        <div class="spinner-ring"></div>
-      </div>
+      <span class="spinner" v-if="!result"><span class="spinner-dot"></span></span>
       <h3>打包进度</h3>
     </div>
 
@@ -11,11 +9,11 @@
       <div
         class="progress-bar"
         :class="{ indeterminate: isIndeterminate }"
-        :style="barStyle"
+        :style="!isIndeterminate ? { width: displayPercent } : {}"
       ></div>
     </div>
 
-    <div v-if="progress.stage" class="progress-info">
+    <div class="progress-info">
       <span class="progress-label">{{ stageLabel }}</span>
       <span class="progress-percent">{{ displayPercent }}</span>
     </div>
@@ -70,12 +68,7 @@ const stageLabel = computed(() => {
 })
 
 const isIndeterminate = computed(() => {
-  return ['install', 'download'].includes(props.progress.stage)
-})
-
-const barStyle = computed(() => {
-  if (isIndeterminate.value) return {}
-  return { width: Math.round(props.progress.percent) + '%' }
+  return ['starting', 'install', 'download'].includes(props.progress.stage)
 })
 
 const displayPercent = computed(() => {
@@ -102,23 +95,24 @@ const displayPercent = computed(() => {
 }
 
 .spinner {
-  width: 20px;
-  height: 20px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 20px;
+  height: 20px;
 }
 
-.spinner.active .spinner-ring {
-  width: 16px;
-  height: 16px;
+.spinner-dot {
+  width: 14px;
+  height: 14px;
   border: 2.5px solid var(--border);
   border-top-color: var(--primary);
   border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+  animation: spin 0.7s linear infinite;
 }
 
 @keyframes spin {
+  from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
 
@@ -132,18 +126,18 @@ const displayPercent = computed(() => {
 
 .progress-bar {
   height: 100%;
-  background: var(--primary);
+  background: linear-gradient(90deg, var(--primary), #818cf8);
   border-radius: 4px;
   transition: width 0.3s ease;
-  width: 0%;
+  min-width: 0%;
 }
 
 .progress-bar.indeterminate {
   width: 30%;
-  animation: indeterminate 1.5s ease-in-out infinite;
+  animation: slide 1.2s ease-in-out infinite;
 }
 
-@keyframes indeterminate {
+@keyframes slide {
   0% { transform: translateX(-100%); }
   50% { transform: translateX(200%); }
   100% { transform: translateX(400%); }
diff --git a/src/stores/packaging.js b/src/stores/packaging.js
index 4e1b6b0..2314325 100644
--- a/src/stores/packaging.js
+++ b/src/stores/packaging.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { nextTick } from 'vue'
 
 export const usePackagingStore = defineStore('packaging', {
   state: () => ({
@@ -8,39 +9,49 @@ export const usePackagingStore = defineStore('packaging', {
       message: '',
       percent: 0
     },
-    result: null
+    result: null,
+    _cleanup: null
   }),
 
   actions: {
-    startPacking(projectPath, outputPath) {
+    async startPacking(projectPath, outputPath) {
+      this._cleanup?.()
+
       this.isPacking = true
       this.progress = { stage: 'starting', message: '准备开始...', percent: 0 }
       this.result = null
 
-      const cleanup = window.api.pack.onProgress((progress) => {
+      this._cleanup = window.api.pack.onProgress((progress) => {
         this.progress = progress
       })
 
-      window.api.pack.start(projectPath, outputPath).then((result) => {
+      await nextTick()
+
+      try {
+        const result = await window.api.pack.start(projectPath, outputPath)
         this.isPacking = false
         this.result = result
-        cleanup()
-      }).catch((err) => {
+      } catch (err) {
         this.isPacking = false
         this.result = { success: false, error: err.message }
-        cleanup()
-      })
+      }
+      this._cleanup?.()
+      this._cleanup = null
     },
 
     cancelPacking() {
       window.api.pack.cancel()
       this.isPacking = false
+      this._cleanup?.()
+      this._cleanup = null
     },
 
     reset() {
       this.isPacking = false
       this.progress = { stage: '', message: '', percent: 0 }
       this.result = null
+      this._cleanup?.()
+      this._cleanup = null
     }
   }
 })