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

- TabBar 新增「工作」标签（首页/工作/拜访/纪要） - 新增工作中心页（/m/work），四卡片入口显示各模块记录数 - 新增三个列表页：工作计划/商机跟单/要客拜访（卡片流+删除） - 首页精简：移除快捷 chip，入口统一到工作中心 - 路由新增: /m/work, /m/plans, /m/mini-biz, /m/key-visits Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-12 19:58:01 +08:00
parent e06574df38
commit bc6c7076fe
7 changed files with 372 additions and 47 deletions
@@ -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>