M0-M4: 推倒重来基线(基建+用户/密钥/核心代理+前端+管理后台+三协议互转)

- 后端 Go+Gin+GORM: 配置(OT_ env)/SQLite/Postgres 双驱动、用户体系(argon2id+JWT access/refresh)、
  API Key(sk- 48位, 仅存 SHA-256 哈希)
- 代理网关: /v1/chat/completions、/v1/responses、/v1/messages、/v1/models;错误按客户端协议返回
- 三协议互转(convert 包): Chat↔Messages↔Responses 请求/响应 + 流式 SSE 逐事件转换(直通优先)
- 用量计费: 异步批量记账、余额扣减、balance_logs、usage_daily 日聚合
- 管理 API: 用户/渠道 CRUD+测试+模型导入/模型定价+绑定/统计/系统配置
- 前端 Vue3+TS+Tailwind(taste-skill 设计 tokens): Landing/登录注册/控制台/管理后台,
  自建组件+Phosphor 图标+自建 SVG 趋势图, 已过 web-design-guidelines 复查
- mock 上游: OpenAI+Anthropic 双协议模拟(含流式)

Co-Authored-By: Claude <noreply@anthropic.com>

web/src/views/console/ConsoleLayout.vue

@@ -1,85 +1,38 @@
 <script setup lang="ts">
-import { useAuthStore } from '../../stores/auth'
-import { useRouter } from 'vue-router'
 import { computed } from 'vue'
-import Toast from '../../components/ui/Toast.vue'
+import { useAuthStore } from '@/stores/auth'
+import ShellLayout from '@/components/layout/ShellLayout.vue'
 
 const auth = useAuthStore()
-const router = useRouter()
-
-const nav = [
-  { to: '/console/dashboard', label: '仪表盘', icon: 'M3 12l9-9 9 9M5 10v10h5v-6h4v6h5V10' },
-  { to: '/console/keys', label: 'API 密钥', icon: 'M15 7a4 4 0 11-8 0 4 4 0 018 0zM3 21v-1a6 6 0 0112 0v1' },
-  { to: '/console/usage', label: '用量明细', icon: 'M4 20V10M10 20V4M16 20v-7M22 20H2' },
-]
-
-const balanceFmt = computed(() => {
-  if (!auth.user) return '—'
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 4 }).format(auth.user.balance)
+const sections = computed(() => {
+  const s: { title: string; items: { to: string; label: string }[] }[] = [
+    {
+      title: '控制台',
+      items: [
+        { to: '/console/dashboard', label: '仪表盘' },
+        { to: '/console/keys', label: 'API Keys' },
+        { to: '/console/usage', label: '用量' },
+      ],
+    },
+  ]
+  if (auth.isAdmin) {
+    s.push({
+      title: '管理',
+      items: [
+        { to: '/admin/overview', label: '运营总览' },
+        { to: '/admin/channels', label: '渠道' },
+        { to: '/admin/models', label: '模型与定价' },
+        { to: '/admin/users', label: '用户' },
+        { to: '/admin/config', label: '系统配置' },
+      ],
+    })
+  }
+  return s
 })
-
-async function logout() {
-  await auth.logout()
-  router.push('/')
-}
 </script>
 
 <template>
-  <div class="min-h-[100dvh] bg-ink-950 text-paper-100">
-    <!-- 无障碍：跳过导航 -->
-    <a
-      href="#main-content"
-      class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[70] focus:rounded-md focus:bg-signal-400 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-ink-950"
-    >跳到主内容</a>
-
-    <!-- 侧边栏 -->
-    <aside aria-label="主导航" class="fixed inset-y-0 left-0 z-30 flex w-56 flex-col border-r border-ink-800 bg-ink-900/60">
-      <div class="flex h-16 items-center gap-2.5 border-b border-ink-800 px-5">
-        <span class="flex h-7 w-7 items-center justify-center rounded-md bg-signal-400" aria-hidden="true">
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8h3l2-5 3 10 2-5h2" stroke="#0c0d0f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        </span>
-        <span class="text-[15px] font-semibold tracking-tight" translate="no">openteam</span>
-      </div>
-
-      <nav class="flex-1 space-y-0.5 px-3 py-4" aria-label="控制台">
-        <router-link
-          v-for="item in nav"
-          :key="item.to"
-          :to="item.to"
-          class="flex items-center gap-3 rounded-md px-3 py-2 text-[13.5px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-paper-100 focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none"
-          active-class="bg-ink-800 text-signal-300! font-medium"
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path :d="item.icon" /></svg>
-          {{ item.label }}
-        </router-link>
-      </nav>
-
-      <div class="border-t border-ink-800 px-3 py-4">
-        <div class="flex items-center justify-between rounded-md bg-ink-850 px-3 py-2.5">
-          <div class="min-w-0">
-            <p class="truncate text-[13px] font-medium text-paper-100">{{ auth.user?.username }}</p>
-            <p class="text-xs text-paper-600">{{ auth.isAdmin ? 'admin' : 'user' }}</p>
-          </div>
-          <span class="num text-[13px] font-medium text-mint-400" translate="no">{{ balanceFmt }}</span>
-        </div>
-        <button
-          class="mt-2 flex w-full touch-manipulation items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-ember-300 focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none cursor-pointer"
-          @click="logout"
-        >
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" /></svg>
-          退出登录
-        </button>
-      </div>
-    </aside>
-
-    <!-- 主区域 -->
-    <div class="ml-56 flex-1">
-      <main id="main-content" class="mx-auto max-w-6xl scroll-mt-4 px-8 py-8" tabindex="-1">
-        <router-view />
-      </main>
-    </div>
-
-    <!-- 全局通知 -->
-    <Toast />
-  </div>
+  <ShellLayout :sections="sections">
+    <router-view />
+  </ShellLayout>
 </template>