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,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>