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,115 @@
+<template>
+  <el-container class="layout-container">
+    <el-aside :width="collapsed ? '64px' : '220px'" class="sidebar">
+      <div class="sidebar-header">
+        <span v-show="!collapsed" class="logo-text">TradeMate</span>
+        <span v-show="collapsed" class="logo-text logo-sm">TM</span>
+      </div>
+      <el-menu
+        :default-active="route.path"
+        :collapse="collapsed"
+        router
+      >
+        <el-menu-item index="/dashboard">
+          <el-icon><Odometer /></el-icon>
+          <span>概览</span>
+        </el-menu-item>
+        <el-menu-item index="/users">
+          <el-icon><User /></el-icon>
+          <span>用户</span>
+        </el-menu-item>
+        <el-menu-item index="/stats">
+          <el-icon><DataAnalysis /></el-icon>
+          <span>统计</span>
+        </el-menu-item>
+        <el-menu-item index="/logs">
+          <el-icon><Document /></el-icon>
+          <span>日志</span>
+        </el-menu-item>
+        <el-menu-item index="/config">
+          <el-icon><Setting /></el-icon>
+          <span>配置</span>
+        </el-menu-item>
+        <el-menu-item index="/quota">
+          <el-icon><Coin /></el-icon>
+          <span>翻译配额</span>
+        </el-menu-item>
+        <el-menu-item index="/certifications">
+          <el-icon><Stamp /></el-icon>
+          <span>认证审核</span>
+        </el-menu-item>
+        <el-menu-item index="/invoices">
+          <el-icon><List /></el-icon>
+          <span>发票管理</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <el-container>
+      <el-header class="header">
+        <div class="header-left">
+          <el-icon class="collapse-btn" @click="collapsed = !collapsed">
+            <Fold v-if="!collapsed" />
+            <Expand v-else />
+          </el-icon>
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item>{{ route.meta?.title }}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+        <div class="header-right">
+          <el-dropdown trigger="click">
+            <span class="user-info">
+              <el-avatar :size="32" icon="UserFilled" style="background:#1890ff" />
+              <span class="user-name">{{ auth.user?.username || '管理员' }}</span>
+              <el-icon><ArrowDown /></el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-item @click="auth.logout(); router.push('/login')">
+                <el-icon><SwitchButton /></el-icon>退出登录
+              </el-dropdown-item>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-header>
+
+      <el-main class="main-content">
+        <router-view />
+      </el-main>
+
+      <el-footer class="footer">
+        <span>TradeMate 外贸小助手 &copy; {{ new Date().getFullYear() }}</span>
+      </el-footer>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const collapsed = ref(false)
+</script>
+
+<style scoped>
+.layout-container { height: 100vh; }
+.sidebar { background: #fff; border-right: 1px solid #e8e8e8; transition: width 0.3s; overflow: hidden; }
+.sidebar-header { height: 60px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f0f0f0; }
+.logo-text { color: #1890ff; font-size: 18px; font-weight: 700; white-space: nowrap; }
+.logo-sm { font-size: 16px; }
+.sidebar :deep(.el-menu) { border-right: none; }
+.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; }
+.header { display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e8e8e8; padding: 0 20px; height: 60px; }
+.header-left { display: flex; align-items: center; gap: 16px; }
+.collapse-btn { font-size: 20px; cursor: pointer; color: #666; }
+.header-right { display: flex; align-items: center; }
+.user-info { display: flex; align-items: center; gap: 8px; cursor: pointer; }
+.user-name { font-size: 14px; color: #333; }
+.main-content { background: #f5f5f5; padding: 20px; overflow-y: auto; }
+.footer { display: flex; align-items: center; justify-content: center; height: 48px; background: #fff; border-top: 1px solid #e8e8e8; color: #999; font-size: 12px; }
+</style>