v6ole/qiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端导航重构 — 4 Tab + 工作中心 + 模块列表

Browse Source 
- TabBar 新增「工作」标签（首页/工作/拜访/纪要）
- 新增工作中心页（/m/work），四卡片入口显示各模块记录数
- 新增三个列表页：工作计划/商机跟单/要客拜访（卡片流+删除）
- 首页精简：移除快捷 chip，入口统一到工作中心
- 路由新增: /m/work, /m/plans, /m/mini-biz, /m/key-visits

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
v6ole
2026-07-12 19:58:01 +08:00
parent e06574df38
commit bc6c7076fe
7 changed files with 372 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/MobileLayout.vue
+10 -15
View File
@@ -8,25 +8,15 @@ const router = useRouter()
const auth = useAuthStore()
const tabs = [
{
path: '/m',
label: '首页',
icon: 'home',
},
{
path: '/m/visit/new',
label: '拜访',
icon: 'visit',
},
{
path: '/m/note/new',
label: '纪要',
icon: 'note',
},
{ path: '/m', label: '首页', icon: 'home' },
{ path: '/m/work', label: '工作', icon: 'work' },
{ path: '/m/visit/new', label: '拜访', icon: 'visit' },
{ path: '/m/note/new', label: '纪要', icon: 'note' },
]
const activeTab = computed(() => {
if (route.path === '/m') return '/m'
if (route.path === '/m/work' || route.path.startsWith('/m/plans') || route.path.startsWith('/m/mini-biz') || route.path.startsWith('/m/key-visits') || route.path.startsWith('/m/leaves') || route.path.startsWith('/m/leave')) return '/m/work'
if (route.path.includes('/visit')) return '/m/visit/new'
if (route.path.includes('/note')) return '/m/note/new'
return route.path
@@ -76,6 +66,11 @@ const activeTab = computed(() => {
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
<!-- Work icon -->
<svg v-else-if="tab.icon === 'work'" class="tab-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg>
<!-- Visit icon -->
<svg v-else-if="tab.icon === 'visit'" class="tab-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
frontend/src/router/index.ts
+4
View File
@@ -35,6 +35,7 @@ const router = createRouter({
component: () => import('@/components/MobileLayout.vue'),
children: [
{ path: '', name: 'MobileHome', component: () => import('@/views/mobile/Home.vue') },
{ path: 'work', name: 'WorkCenter', component: () => import('@/views/mobile/WorkCenter.vue') },
{ path: 'visit/new', name: 'VisitForm', component: () => import('@/views/mobile/VisitForm.vue') },
{ path: 'visit/:id/edit', name: 'VisitEdit', component: () => import('@/views/mobile/VisitForm.vue') },
{ path: 'work-plan/new', name: 'WorkPlanForm', component: () => import('@/views/mobile/WorkPlanForm.vue') },
@@ -42,6 +43,9 @@ const router = createRouter({
{ path: 'key-visit/new', name: 'KeyVisitForm', component: () => import('@/views/mobile/KeyVisitForm.vue') },
{ path: 'note/new', name: 'DailyNoteForm', component: () => import('@/views/mobile/DailyNoteForm.vue') },
{ path: 'note/:id/edit', name: 'DailyNoteEdit', component: () => import('@/views/mobile/DailyNoteForm.vue') },
{ path: 'plans', name: 'PlansList', component: () => import('@/views/mobile/PlansList.vue') },
{ path: 'mini-biz', name: 'MiniBizList', component: () => import('@/views/mobile/MiniBizList.vue') },
{ path: 'key-visits', name: 'KeyVisitsList', component: () => import('@/views/mobile/KeyVisitsList.vue') },
{ path: 'leaves', name: 'LeavesList', component: () => import('@/views/mobile/LeavesList.vue') },
{ path: 'leave/new', name: 'LeaveForm', component: () => import('@/views/mobile/LeaveForm.vue') },
{ path: 'leave/:id/edit', name: 'LeaveEdit', component: () => import('@/views/mobile/LeaveForm.vue') },
frontend/src/views/mobile/Home.vue
-32
View File
@@ -99,38 +99,6 @@ onMounted(loadToday)
</button>
</div>
<!-- ═══ Secondary Quick Links ═══ -->
<div class="quick-links">
<button class="link-chip" @click="router.push('/m/work-plan/new')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
工作计划
</button>
<button class="link-chip" @click="router.push('/m/mini-biz/new')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
商机跟单
</button>
<button class="link-chip" @click="router.push('/m/key-visit/new')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
要客拜访
</button>
<button class="link-chip" @click="router.push('/m/leaves')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
请假
</button>
</div>
<!-- ═══ Section Divider ═══ -->
<div class="section-head" v-if="dailyNotes.length || visits.length">
<span class="section-title">今日记录</span>
frontend/src/views/mobile/KeyVisitsList.vue
+94
View File
@@ -0,0 +1,94 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { keyVisitsApi } from '@/api/keyVisits'
const router = useRouter()
const loading = ref(false)
const items = ref<any[]>([])
onMounted(loadItems)
async function loadItems() {
loading.value = true
try { const res = await keyVisitsApi.list(); items.value = Array.isArray(res.data) ? res.data : (res.data.items || []) }
catch (_) {}
finally { loading.value = false }
}
const urgencyColors: Record<string, string> = { '一般': '#5B7FA5', '重要': '#C4934A', '紧急': '#B8472E' }
async function handleDelete(id: string) {
try {
await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
await keyVisitsApi.delete(id)
ElMessage.success('已删除')
await loadItems()
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
}
</script>
<template>
<div class="list-page">
<header class="form-editorial-header">
<button type="button" class="form-back-btn" @click="router.back()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
</button>
<div class="form-title-group"><h2 class="form-title">要客拜访</h2><span class="form-subtitle">KEY VISITS</span></div>
<div class="form-rule"></div>
</header>
<button class="new-btn" @click="router.push('/m/key-visit/new')">+ 新建要客</button>
<div v-loading="loading" class="cards">
<div v-if="items.length === 0 && !loading" class="empty-state"><div class="empty-glyph">—</div><p class="empty-text">暂不要客记录</p></div>
<article v-for="item in items" :key="item.id" class="card">
<div class="card-accent" :style="{ background: urgencyColors[item.urgency_level] || '#5B7FA5' }"></div>
<div class="card-body">
<div class="card-header">
<span class="card-urgency" :style="{ color: urgencyColors[item.urgency_level] || '#5B7FA5' }">{{ item.urgency_level }}</span>
<span class="card-status">{{ item.progress_status }}</span>
</div>
<div class="card-content">{{ item.description }}</div>
<div class="card-footer">
<span class="card-customer">{{ item.customer_name }}</span>
<button class="card-delete" @click.stop="handleDelete(item.id)">🗑</button>
</div>
</div>
</article>
</div>
</div>
</template>
<style scoped>
.list-page { max-width: 100%; padding-bottom: 20px; }
.form-editorial-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.form-back-btn { background: var(--surface); border: 1px solid var(--warm-border); padding: 8px 10px; cursor: pointer; color: var(--warm-gray); display: flex; align-items: center; transition: all var(--transition); flex-shrink: 0; margin-top: 2px; }
.form-back-btn:hover { color: var(--ink); border-color: var(--ink); }
.form-title-group { display: flex; flex-direction: column; gap: 0; flex: 1; }
.form-title { margin: 0; font-family: var(--font-heading); font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; line-height: 1.3; }
.form-subtitle { font-family: var(--font-mono); font-size: 9px; color: var(--gold); letter-spacing: 0.2em; }
.form-rule { width: 100%; height: 2px; background: var(--warm-border); margin-top: 6px; position: relative; }
.form-rule::after { content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--gold); }
.new-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: var(--ink); color: #fff; border: none; font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.06em; cursor: pointer; transition: all 0.25s; margin-bottom: 18px; }
.new-btn:hover { background: var(--ink-light); }
.new-btn:active { transform: scale(0.98); }
.cards { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--warm-border); display: flex; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.card:active { transform: scale(0.99); }
.card:hover { box-shadow: 0 4px 12px rgba(28,55,56,0.06); }
.card-accent { width: 4px; flex-shrink: 0; }
.card-body { flex: 1; padding: 14px 16px; min-width: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-urgency { font-family: var(--font-heading); font-size: 13px; }
.card-status { font-family: var(--font-mono); font-size: 12px; color: var(--warm-gray); }
.card-content { font-family: var(--font-body); font-size: 14px; color: var(--ink); margin-bottom: 6px; line-height: 1.5; }
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-customer { font-size: 12px; color: var(--warm-gray); }
.card-delete { background: none; border: none; cursor: pointer; opacity: 0.5; font-size: 14px; }
.card-delete:hover { opacity: 1; }
.empty-state { text-align: center; padding: 48px 0; }
.empty-glyph { font-family: var(--font-heading); font-size: 40px; color: var(--gold); opacity: 0.4; margin-bottom: 8px; }
.empty-text { font-family: var(--font-body); font-size: 15px; color: var(--warm-gray); margin: 0; }
</style>
frontend/src/views/mobile/MiniBizList.vue
+94
View File
@@ -0,0 +1,94 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { miniBusinessApi } from '@/api/miniBusiness'
const router = useRouter()
const loading = ref(false)
const items = ref<any[]>([])
onMounted(loadItems)
async function loadItems() {
loading.value = true
try { const res = await miniBusinessApi.list(); items.value = Array.isArray(res.data) ? res.data : (res.data.items || []) }
catch (_) {}
finally { loading.value = false }
}
const statusColors: Record<string, string> = { '跟进中': '#C4934A', '已签约': '#4A6741', '已流失': '#B8472E' }
async function handleDelete(id: string) {
try {
await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
await miniBusinessApi.delete(id)
ElMessage.success('已删除')
await loadItems()
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
}
</script>
<template>
<div class="list-page">
<header class="form-editorial-header">
<button type="button" class="form-back-btn" @click="router.back()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
</button>
<div class="form-title-group"><h2 class="form-title">商机跟单</h2><span class="form-subtitle">MINI BUSINESS</span></div>
<div class="form-rule"></div>
</header>
<button class="new-btn" @click="router.push('/m/mini-biz/new')">+ 新建商机</button>
<div v-loading="loading" class="cards">
<div v-if="items.length === 0 && !loading" class="empty-state"><div class="empty-glyph">—</div><p class="empty-text">暂无商机记录</p></div>
<article v-for="item in items" :key="item.id" class="card">
<div class="card-accent" :style="{ background: statusColors[item.status] || '#C4934A' }"></div>
<div class="card-body">
<div class="card-header">
<span class="card-status" :style="{ color: statusColors[item.status] || '#C4934A' }">{{ item.status }}</span>
<span class="card-amount">{{ item.amount }}</span>
</div>
<div class="card-content">{{ item.product_type }}</div>
<div class="card-footer">
<span class="card-customer">{{ item.customer_name }}</span>
<button class="card-delete" @click.stop="handleDelete(item.id)">🗑</button>
</div>
</div>
</article>
</div>
</div>
</template>
<style scoped>
.list-page { max-width: 100%; padding-bottom: 20px; }
.form-editorial-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.form-back-btn { background: var(--surface); border: 1px solid var(--warm-border); padding: 8px 10px; cursor: pointer; color: var(--warm-gray); display: flex; align-items: center; transition: all var(--transition); flex-shrink: 0; margin-top: 2px; }
.form-back-btn:hover { color: var(--ink); border-color: var(--ink); }
.form-title-group { display: flex; flex-direction: column; gap: 0; flex: 1; }
.form-title { margin: 0; font-family: var(--font-heading); font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; line-height: 1.3; }
.form-subtitle { font-family: var(--font-mono); font-size: 9px; color: var(--gold); letter-spacing: 0.2em; }
.form-rule { width: 100%; height: 2px; background: var(--warm-border); margin-top: 6px; position: relative; }
.form-rule::after { content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--gold); }
.new-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: var(--ink); color: #fff; border: none; font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.06em; cursor: pointer; transition: all 0.25s; margin-bottom: 18px; }
.new-btn:hover { background: var(--ink-light); }
.new-btn:active { transform: scale(0.98); }
.cards { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--warm-border); display: flex; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.card:active { transform: scale(0.99); }
.card:hover { box-shadow: 0 4px 12px rgba(28,55,56,0.06); }
.card-accent { width: 4px; flex-shrink: 0; }
.card-body { flex: 1; padding: 14px 16px; min-width: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-status { font-family: var(--font-heading); font-size: 13px; }
.card-amount { font-family: var(--font-mono); font-size: 12px; color: var(--warm-gray); }
.card-content { font-family: var(--font-body); font-size: 14px; color: var(--ink); margin-bottom: 6px; line-height: 1.5; }
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-customer { font-size: 12px; color: var(--warm-gray); }
.card-delete { background: none; border: none; cursor: pointer; opacity: 0.5; font-size: 14px; }
.card-delete:hover { opacity: 1; }
.empty-state { text-align: center; padding: 48px 0; }
.empty-glyph { font-family: var(--font-heading); font-size: 40px; color: var(--gold); opacity: 0.4; margin-bottom: 8px; }
.empty-text { font-family: var(--font-body); font-size: 15px; color: var(--warm-gray); margin: 0; }
</style>
frontend/src/views/mobile/PlansList.vue
+92
View File
@@ -0,0 +1,92 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api/index'
const router = useRouter()
const loading = ref(false)
const items = ref<any[]>([])
onMounted(loadItems)
async function loadItems() {
loading.value = true
try { const res = await api.get('/work-plans/'); items.value = Array.isArray(res.data) ? res.data : (res.data.items || []) }
catch (_) {}
finally { loading.value = false }
}
async function handleDelete(id: string) {
try {
await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
await api.delete(`/work-plans/${id}`)
ElMessage.success('已删除')
await loadItems()
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
}
</script>
<template>
<div class="list-page">
<header class="form-editorial-header">
<button type="button" class="form-back-btn" @click="router.back()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
</button>
<div class="form-title-group"><h2 class="form-title">工作计划</h2><span class="form-subtitle">WORK PLANS</span></div>
<div class="form-rule"></div>
</header>
<button class="new-btn" @click="router.push('/m/work-plan/new')">+ 新建计划</button>
<div v-loading="loading" class="cards">
<div v-if="items.length === 0 && !loading" class="empty-state"><div class="empty-glyph">—</div><p class="empty-text">暂无工作计划</p></div>
<article v-for="item in items" :key="item.id" class="card">
<div class="card-accent" style="background:#4A6741"></div>
<div class="card-body">
<div class="card-header">
<span class="card-status" :style="{ color: item.status === '已完成' ? '#4A6741' : item.status === '已取消' ? '#B8472E' : '#C4934A' }">{{ item.status }}</span>
<span class="card-date">{{ item.plan_date }}</span>
</div>
<div class="card-content">{{ item.plan_content }}</div>
<div class="card-footer">
<span class="card-customer">{{ item.customer_name }}</span>
<button class="card-delete" @click.stop="handleDelete(item.id)">🗑</button>
</div>
</div>
</article>
</div>
</div>
</template>
<style scoped>
.list-page { max-width: 100%; padding-bottom: 20px; }
.form-editorial-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.form-back-btn { background: var(--surface); border: 1px solid var(--warm-border); padding: 8px 10px; cursor: pointer; color: var(--warm-gray); display: flex; align-items: center; transition: all var(--transition); flex-shrink: 0; margin-top: 2px; }
.form-back-btn:hover { color: var(--ink); border-color: var(--ink); }
.form-title-group { display: flex; flex-direction: column; gap: 0; flex: 1; }
.form-title { margin: 0; font-family: var(--font-heading); font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; line-height: 1.3; }
.form-subtitle { font-family: var(--font-mono); font-size: 9px; color: var(--gold); letter-spacing: 0.2em; }
.form-rule { width: 100%; height: 2px; background: var(--warm-border); margin-top: 6px; position: relative; }
.form-rule::after { content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--gold); }
.new-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: var(--ink); color: #fff; border: none; font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.06em; cursor: pointer; transition: all 0.25s; margin-bottom: 18px; }
.new-btn:hover { background: var(--ink-light); }
.new-btn:active { transform: scale(0.98); }
.cards { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--warm-border); display: flex; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.card:active { transform: scale(0.99); }
.card:hover { box-shadow: 0 4px 12px rgba(28,55,56,0.06); }
.card-accent { width: 4px; flex-shrink: 0; }
.card-body { flex: 1; padding: 14px 16px; min-width: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-status { font-family: var(--font-heading); font-size: 13px; }
.card-date { font-family: var(--font-mono); font-size: 12px; color: var(--warm-gray); }
.card-content { font-family: var(--font-body); font-size: 14px; color: var(--ink); margin-bottom: 6px; line-height: 1.5; }
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-customer { font-size: 12px; color: var(--warm-gray); }
.card-delete { background: none; border: none; cursor: pointer; opacity: 0.5; font-size: 14px; }
.card-delete:hover { opacity: 1; }
.empty-state { text-align: center; padding: 48px 0; }
.empty-glyph { font-family: var(--font-heading); font-size: 40px; color: var(--gold); opacity: 0.4; margin-bottom: 8px; }
.empty-text { font-family: var(--font-body); font-size: 15px; color: var(--warm-gray); margin: 0; }
</style>
frontend/src/views/mobile/WorkCenter.vue
+78
View File
@@ -0,0 +1,78 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '@/api/index'
const router = useRouter()
const counts = ref({ plans: 0, miniBiz: 0, keyVisits: 0, leaves: 0 })
onMounted(async () => {
try {
const [plans, mini, key, leaves] = await Promise.all([
api.get('/work-plans/'),
api.get('/mini-business/'),
api.get('/key-visits/'),
api.get('/leaves/', { params: { page_size: 1 } }),
])
counts.value.plans = Array.isArray(plans.data) ? plans.data.length : (plans.data.items || []).length
counts.value.miniBiz = Array.isArray(mini.data) ? mini.data.length : (mini.data.items || []).length
counts.value.keyVisits = Array.isArray(key.data) ? key.data.length : (key.data.items || []).length
counts.value.leaves = leaves.data.total || 0
} catch (_) {}
})
const modules = [
{ path: '/m/plans', label: '工作计划', icon: '📅', count: () => counts.value.plans, color: '#4A6741' },
{ path: '/m/mini-biz', label: '商机跟单', icon: '💰', count: () => counts.value.miniBiz, color: '#C4934A' },
{ path: '/m/key-visits', label: '要客拜访', icon: '⭐', count: () => counts.value.keyVisits, color: '#5B7FA5' },
{ path: '/m/leaves', label: '请假管理', icon: '📋', count: () => counts.value.leaves, color: '#9CA3AF' },
]
</script>
<template>
<div class="work-center">
<header class="form-editorial-header">
<div class="form-title-group">
<h2 class="form-title">工作中心</h2>
<span class="form-subtitle">WORK CENTER</span>
</div>
<div class="form-rule"></div>
</header>
<div class="module-grid">
<div
v-for="m in modules" :key="m.path"
class="module-card"
:style="{ borderTop: '3px solid ' + m.color }"
@click="router.push(m.path)"
>
<span class="module-icon">{{ m.icon }}</span>
<span class="module-label">{{ m.label }}</span>
<span class="module-count" :style="{ color: m.color }">{{ m.count() }} 条</span>
</div>
</div>
</div>
</template>
<style scoped>
.work-center { padding-bottom: 24px; }
.form-editorial-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.form-title-group { display: flex; flex-direction: column; gap: 0; flex: 1; }
.form-title { margin: 0; font-family: var(--font-heading); font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; line-height: 1.3; }
.form-subtitle { font-family: var(--font-mono); font-size: 9px; color: var(--gold); letter-spacing: 0.2em; }
.form-rule { width: 100%; height: 2px; background: var(--warm-border); margin-top: 6px; position: relative; }
.form-rule::after { content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--gold); }
.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.module-card {
background: var(--surface); border: 1px solid var(--warm-border);
padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px;
cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.module-card:active { transform: scale(0.97); }
.module-card:hover { box-shadow: 0 4px 12px rgba(28,55,56,0.06); }
.module-icon { font-size: 28px; }
.module-label { font-family: var(--font-heading); font-size: 15px; color: var(--ink); letter-spacing: 0.04em; }
.module-count { font-family: var(--font-mono); font-size: 12px; }
</style>