feat: complete huihui square avatar workflows

2026-07-24 14:04:21 +08:00
parent 2ef58a44b8
commit e3bda469bb
68 changed files with 8062 additions and 132 deletions
@@ -0,0 +1,100 @@
+<template>
+  <div class="projects-page">
+    <!-- 顶部导航 -->
+    <header class="page-header">
+      <div class="header-left">
+        <button class="back-btn" @click="goBack">‹</button>
+        <h1 class="page-title">我的项目</h1>
+      </div>
+      <span class="count-badge">{{ projects.length }}</span>
+    </header>
+
+    <!-- 项目列表 -->
+    <section class="projects-section">
+      <div class="project-list" v-if="projects.length > 0">
+        <div class="project-card" v-for="p in projects" :key="p.id">
+          <div class="project-top">
+            <div class="project-emoji">{{ p.emoji }}</div>
+            <div class="project-head">
+              <h2 class="project-name">{{ p.name }}</h2>
+              <span class="role-badge" :class="p.role">{{ roleText(p.role) }}</span>
+            </div>
+            <span class="status-dot" :class="p.status"></span>
+          </div>
+          <p class="project-desc">{{ p.desc }}</p>
+          <div class="project-progress">
+            <div class="progress-bar">
+              <div class="progress-fill" :style="{ width: p.progress + '%' }"></div>
+            </div>
+            <span class="progress-text">{{ p.progress }}%</span>
+          </div>
+        </div>
+      </div>
+      <div class="empty-state" v-else>
+        <span class="empty-icon">📁</span>
+        <p class="empty-text">分身暂未参与任何项目</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+interface Project { id: string; emoji: string; name: string; role: string; desc: string; status: string; progress: number }
+const projects = ref<Project[]>([
+  { id: '1', emoji: '🚀', name: '会会增长计划', role: 'owner', desc: '负责品牌分身的对话策略与内容生成', status: 'active', progress: 72 },
+  { id: '2', emoji: '📊', name: '用户访谈分析', role: 'member', desc: '协助整理 200 份访谈记录并提炼洞察', status: 'active', progress: 45 },
+  { id: '3', emoji: '🎯', name: '私域运营 SOP', role: 'viewer', desc: '只读权限，跟进流程文档', status: 'paused', progress: 20 }
+])
+
+const roleText = (r: string) => ({ owner: '负责人', member: '成员', viewer: '访客' }[r] || '成员')
+
+const goBack = () => router.back()
+</script>
+
+<style scoped>
+.projects-page { min-height: 100vh; background: #F8F9FA; padding-bottom: 40px; }
+
+.page-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; background: linear-gradient(135deg, #F97316 0%, #FB923C 100%); color: white;
+}
+.header-left { display: flex; align-items: center; gap: 12px; }
+.back-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 4px; }
+.page-title { font-size: 18px; font-weight: 600; margin: 0; }
+.count-badge { background: rgba(255,255,255,0.2); padding: 2px 12px; border-radius: 20px; font-size: 14px; }
+
+.projects-section { padding: 16px 20px; }
+.project-list { display: flex; flex-direction: column; gap: 12px; }
+.project-card { background: white; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
+.project-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
+.project-emoji {
+  width: 44px; height: 44px; border-radius: 12px; background: #FFF0E6;
+  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
+}
+.project-head { flex: 1; min-width: 0; }
+.project-name { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: #18191C; }
+.role-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
+.role-badge.owner { background: #FFF0E6; color: #F97316; }
+.role-badge.member { background: #EFF6FF; color: #3B82F6; }
+.role-badge.viewer { background: #F3F4F6; color: #6B7280; }
+.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
+.status-dot.active { background: #22C55E; }
+.status-dot.paused { background: #F59E0B; }
+.project-desc { font-size: 13px; color: #6B7280; line-height: 1.5; margin: 0 0 12px; }
+.project-progress { display: flex; align-items: center; gap: 10px; }
+.progress-bar { flex: 1; height: 6px; background: #F3F4F6; border-radius: 3px; overflow: hidden; }
+.progress-fill { height: 100%; background: linear-gradient(90deg, #F97316, #FB923C); border-radius: 3px; transition: width 0.4s ease; }
+.progress-text { font-size: 12px; color: #9398AE; flex-shrink: 0; }
+
+.empty-state {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 40px 20px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+.empty-icon { font-size: 48px; margin-bottom: 12px; }
+.empty-text { font-size: 14px; color: #9398AE; margin: 0; }
+</style>