From bc6c7076fec44fd5f078824e916a3d54c20f4751 Mon Sep 17 00:00:00 2001
From: v6ole <voole@vip.qq.com>
Date: Sun, 12 Jul 2026 19:58:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E9=87=8D=E6=9E=84=20=E2=80=94=204=20Tab=20+=20?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E4=B8=AD=E5=BF=83=20+=20=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/components/MobileLayout.vue    | 25 +++---
 frontend/src/router/index.ts                |  4 +
 frontend/src/views/mobile/Home.vue          | 32 -------
 frontend/src/views/mobile/KeyVisitsList.vue | 94 +++++++++++++++++++++
 frontend/src/views/mobile/MiniBizList.vue   | 94 +++++++++++++++++++++
 frontend/src/views/mobile/PlansList.vue     | 92 ++++++++++++++++++++
 frontend/src/views/mobile/WorkCenter.vue    | 78 +++++++++++++++++
 7 files changed, 372 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/views/mobile/KeyVisitsList.vue
 create mode 100644 frontend/src/views/mobile/MiniBizList.vue
 create mode 100644 frontend/src/views/mobile/PlansList.vue
 create mode 100644 frontend/src/views/mobile/WorkCenter.vue

diff --git a/frontend/src/components/MobileLayout.vue b/frontend/src/components/MobileLayout.vue
index 944d253..70f91f0 100644
--- a/frontend/src/components/MobileLayout.vue
+++ b/frontend/src/components/MobileLayout.vue
@@ -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>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d6807f8..f3893cc 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -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') },
diff --git a/frontend/src/views/mobile/Home.vue b/frontend/src/views/mobile/Home.vue
index f7d4bb8..0fbcd6e 100644
--- a/frontend/src/views/mobile/Home.vue
+++ b/frontend/src/views/mobile/Home.vue
@@ -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>
diff --git a/frontend/src/views/mobile/KeyVisitsList.vue b/frontend/src/views/mobile/KeyVisitsList.vue
new file mode 100644
index 0000000..b026e7e
--- /dev/null
+++ b/frontend/src/views/mobile/KeyVisitsList.vue
@@ -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>
diff --git a/frontend/src/views/mobile/MiniBizList.vue b/frontend/src/views/mobile/MiniBizList.vue
new file mode 100644
index 0000000..ca87c9a
--- /dev/null
+++ b/frontend/src/views/mobile/MiniBizList.vue
@@ -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>
diff --git a/frontend/src/views/mobile/PlansList.vue b/frontend/src/views/mobile/PlansList.vue
new file mode 100644
index 0000000..477efcd
--- /dev/null
+++ b/frontend/src/views/mobile/PlansList.vue
@@ -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>
diff --git a/frontend/src/views/mobile/WorkCenter.vue b/frontend/src/views/mobile/WorkCenter.vue
new file mode 100644
index 0000000..441780b
--- /dev/null
+++ b/frontend/src/views/mobile/WorkCenter.vue
@@ -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>