Add admin-frontend and user-frontend standalone projects, certification/invoice/discovery features, fix auth header and theme consistency

2026-05-22 18:35:30 +08:00
parent 18c6cf5406
commit 52dba37f22
79 changed files with 10333 additions and 248 deletions
@@ -0,0 +1,109 @@
+<template>
+  <div class="user-layout">
+    <aside class="sidebar" :class="{ collapsed }">
+      <div class="sidebar-header">
+        <span class="logo">{{ collapsed ? 'TM' : 'TradeMate' }}</span>
+      </div>
+      <el-menu
+        :default-active="route.path"
+        :collapse="collapsed"
+        router
+        :collapse-transition="false"
+      >
+        <el-menu-item index="/"><el-icon><Odometer /></el-icon><span>工作台</span></el-menu-item>
+        <el-menu-item index="/translate"><el-icon><ChatLineSquare /></el-icon><span>智能翻译</span></el-menu-item>
+        <el-menu-item index="/customers"><el-icon><User /></el-icon><span>客户管理</span></el-menu-item>
+        <el-menu-item index="/products"><el-icon><Goods /></el-icon><span>产品库</span></el-menu-item>
+        <el-menu-item index="/quotations"><el-icon><DocumentCopy /></el-icon><span>报价单</span></el-menu-item>
+        <el-menu-item index="/marketing"><el-icon><Promotion /></el-icon><span>营销素材</span></el-menu-item>
+        <el-menu-item index="/discovery"><el-icon><Search /></el-icon><span>挖掘新客</span></el-menu-item>
+        <el-menu-item index="/followup"><el-icon><Message /></el-icon><span>智能跟进</span></el-menu-item>
+        <el-menu-item index="/analytics"><el-icon><DataAnalysis /></el-icon><span>数据分析</span></el-menu-item>
+        <el-menu-item index="/team"><el-icon><UserFilled /></el-icon><span>团队协作</span></el-menu-item>
+      </el-menu>
+    </aside>
+
+    <div class="main-area">
+      <header class="topbar">
+        <el-button text @click="collapsed = !collapsed" style="font-size:18px;margin-right:12px">
+          <el-icon><Fold v-if="!collapsed" /><Expand v-else /></el-icon>
+        </el-button>
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="'/'">工作台</el-breadcrumb-item>
+          <el-breadcrumb-item v-if="route.meta?.title" :to="route.path">{{ route.meta.title }}</el-breadcrumb-item>
+        </el-breadcrumb>
+        <div class="topbar-right">
+          <el-badge :value="unread" :hidden="!unread" class="notif-badge">
+            <el-button text style="font-size:18px" @click="$router.push('/notifications')">
+              <el-icon><Bell /></el-icon>
+            </el-button>
+          </el-badge>
+          <el-dropdown trigger="click">
+            <el-button text style="display:flex;align-items:center;gap:6px">
+              <el-icon><User /></el-icon>
+              <span>{{ auth.user?.username || '用户' }}</span>
+              <el-icon><ArrowDown /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="$router.push('/profile')">个人中心</el-dropdown-item>
+                <el-dropdown-item @click="$router.push('/notifications')">通知中心</el-dropdown-item>
+                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </header>
+
+      <main class="content">
+        <router-view />
+      </main>
+
+      <footer class="footer">
+        <span>TradeMate 外贸小助手 &copy; {{ new Date().getFullYear() }}</span>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { getUnreadCount } from '@/api'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const collapsed = ref(false)
+const unread = ref(0)
+
+onMounted(async () => {
+  await auth.fetchUser()
+  try {
+    const res = await getUnreadCount()
+    unread.value = res.count || res || 0
+  } catch { /* ignore */ }
+})
+
+function handleLogout() {
+  auth.logout()
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.user-layout { display: flex; height: 100vh; overflow: hidden; }
+.sidebar { width: 220px; background: #fff; border-right: 1px solid #e8e8e8; transition: width 0.25s; flex-shrink: 0; display: flex; flex-direction: column; }
+.sidebar.collapsed { width: 64px; }
+.sidebar-header { height: 60px; display: flex; align-items: center; justify-content: center; color: #1890ff; font-size: 18px; font-weight: 700; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
+.sidebar :deep(.el-menu) { border-right: none; flex: 1; }
+.sidebar :deep(.el-menu-item) { margin: 2px 8px; border-radius: 8px; }
+.sidebar :deep(.el-menu-item.is-active) { background: #e6f7ff; color: #1890ff !important; font-weight: 500; }
+.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.topbar { height: 60px; background: #fff; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; padding: 0 24px; flex-shrink: 0; }
+.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+.notif-badge :deep(.el-badge__content) { top: 8px; right: 4px; }
+.content { flex: 1; padding: 24px; overflow-y: auto; background: #f5f5f5; }
+.footer { text-align: center; padding: 12px; color: #999; font-size: 12px; border-top: 1px solid #e8e8e8; background: #fff; flex-shrink: 0; }
+</style>