feat: 完成 Web2App 核心功能实现

- Electron 主进程：窗口管理、IPC、项目读写、打包引擎 - Vue 3 前端：4 个视图页面、3 个组件、Pinia 状态管理 - 生成应用模板：Express 后端 + Electron 窗口 - 支持资源导入、应用配置、跨平台打包
2026-07-23 18:25:35 +08:00
parent b67e27beb1
commit 2f3ec636e0
26 changed files with 8455 additions and 0 deletions
--- a/src/components/PackProgress.vue
+++ b/src/components/PackProgress.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="pack-progress card">
+    <h3>打包进度</h3>
+
+    <div class="progress-bar-container">
+      <div class="progress-bar" :style="{ width: progress.percent + '%' }"></div>
+    </div>
+
+    <div v-if="progress.percent > 0" class="progress-info">
+      <span class="progress-label">{{ stageLabel }}</span>
+      <span class="progress-percent">{{ Math.round(progress.percent) }}%</span>
+    </div>
+
+    <div v-if="progress.message" class="progress-message">
+      <pre>{{ progress.message }}</pre>
+    </div>
+
+    <div v-if="!result" class="progress-actions">
+      <button class="btn btn-danger btn-sm" @click="emit('cancel')">
+        取消打包
+      </button>
+    </div>
+
+    <div v-if="result && result.error" class="progress-error">
+      <p>错误详情：</p>
+      <pre>{{ result.error }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  progress: {
+    type: Object,
+    default: () => ({ stage: '', message: '', percent: 0 })
+  },
+  result: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['cancel'])
+
+const stageLabel = computed(() => {
+  const labels = {
+    'prepare': '准备中',
+    'copy-files': '复制文件',
+    'configure': '配置应用',
+    'install': '安装依赖',
+    'build': '打包中',
+    'sign': '签名中',
+    'complete': '打包完成',
+    'error': '出错了'
+  }
+  return labels[props.progress.stage] || props.progress.stage
+})
+</script>
+
+<style scoped>
+.pack-progress {
+  padding: 20px;
+}
+
+.pack-progress h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.progress-bar-container {
+  width: 100%;
+  height: 8px;
+  background: var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 13px;
+}
+
+.progress-label {
+  color: var(--text-secondary);
+}
+
+.progress-percent {
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.progress-message {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+.progress-message pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 12px;
+  border-radius: var(--radius);
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.progress-actions {
+  margin-top: 16px;
+}
+
+.progress-error {
+  margin-top: 12px;
+  padding: 12px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius);
+}
+
+.progress-error p {
+  font-size: 13px;
+  color: var(--danger);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.progress-error pre {
+  font-size: 12px;
+  color: #991b1b;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>