101 lines
4.7 KiB
Vue
101 lines
4.7 KiB
Vue
<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>
|