fix: 重写打包逻辑为全异步，新增等待动画和实时进度流

src/components/PackProgress.vue

@@ -1,14 +1,23 @@
 <template>
   <div class="pack-progress card">
-    <h3>打包进度</h3>
+    <div class="progress-header">
+      <div class="spinner" :class="{ active: !result }">
+        <div class="spinner-ring"></div>
+      </div>
+      <h3>打包进度</h3>
+    </div>
 
     <div class="progress-bar-container">
-      <div class="progress-bar" :style="{ width: progress.percent + '%' }"></div>
+      <div
+        class="progress-bar"
+        :class="{ indeterminate: isIndeterminate }"
+        :style="barStyle"
+      ></div>
     </div>
 
     <div v-if="progress.stage" class="progress-info">
       <span class="progress-label">{{ stageLabel }}</span>
-      <span class="progress-percent">{{ Math.round(progress.percent) }}%</span>
+      <span class="progress-percent">{{ displayPercent }}</span>
     </div>
 
     <div v-if="progress.message" class="progress-message">
@@ -46,10 +55,12 @@ const emit = defineEmits(['cancel'])
 
 const stageLabel = computed(() => {
   const labels = {
+    'starting': '准备开始',
     'prepare': '准备中',
     'copy-files': '复制文件',
     'configure': '配置应用',
     'install': '安装依赖',
+    'download': '下载中',
     'build': '打包中',
     'sign': '签名中',
     'complete': '打包完成',
@@ -57,6 +68,20 @@ const stageLabel = computed(() => {
   }
   return labels[props.progress.stage] || props.progress.stage
 })
+
+const isIndeterminate = computed(() => {
+  return ['install', 'download'].includes(props.progress.stage)
+})
+
+const barStyle = computed(() => {
+  if (isIndeterminate.value) return {}
+  return { width: Math.round(props.progress.percent) + '%' }
+})
+
+const displayPercent = computed(() => {
+  if (isIndeterminate.value) return '进行中...'
+  return Math.round(props.progress.percent) + '%'
+})
 </script>
 
 <style scoped>
@@ -64,10 +89,37 @@ const stageLabel = computed(() => {
   padding: 20px;
 }
 
-.pack-progress h3 {
+.progress-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.progress-header h3 {
   font-size: 15px;
   font-weight: 600;
-  margin-bottom: 16px;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner.active .spinner-ring {
+  width: 16px;
+  height: 16px;
+  border: 2.5px solid var(--border);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
 .progress-bar-container {
@@ -83,6 +135,18 @@ const stageLabel = computed(() => {
   background: var(--primary);
   border-radius: 4px;
   transition: width 0.3s ease;
+  width: 0%;
+}
+
+.progress-bar.indeterminate {
+  width: 30%;
+  animation: indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes indeterminate {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(200%); }
+  100% { transform: translateX(400%); }
 }
 
 .progress-info {
@@ -115,6 +179,8 @@ const stageLabel = computed(() => {
   overflow-y: auto;
   font-size: 11px;
   line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 .progress-actions {