前端

frontend/app/web-gold/src/App.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { RouterView } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import SidebarNav from './components/SidebarNav.vue'
+import TopNav from './components/TopNav.vue'
+import { theme } from 'ant-design-vue'
+import SvgSprite from '@/components/icons/SvgSprite.vue'
+
+function readCssVar(name) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || undefined
+}
+
+const themeToken = ref({
+  algorithm: theme.darkAlgorithm,
+  token: {
+    colorPrimary: '#3B82F6',
+    colorInfo: '#1A66E0',
+    colorBgBase: '#0D0D0D',
+    colorBgContainer: '#1A1A1A',
+    colorTextBase: '#F2F2F2',
+    colorTextSecondary: '#CCCCCC',
+    colorBorder: '#333333',
+    borderRadius: 6,
+  }
+})
+
+onMounted(() => {
+  // 运行时从 :root 读取，若存在则覆盖默认值
+  const next = { ...themeToken.value.token }
+  next.colorPrimary = readCssVar('--color-primary') || next.colorPrimary
+  next.colorInfo = readCssVar('--color-blue') || next.colorInfo
+  next.colorBgBase = readCssVar('--color-bg') || next.colorBgBase
+  next.colorBgContainer = readCssVar('--color-surface') || next.colorBgContainer
+  next.colorTextBase = readCssVar('--color-text') || next.colorTextBase
+  next.colorTextSecondary = readCssVar('--color-text-secondary') || next.colorTextSecondary
+  next.colorBorder = readCssVar('--color-border') || next.colorBorder
+  themeToken.value = { algorithm: theme.darkAlgorithm, token: next }
+})
+</script>
+
+<template>
+  <a-config-provider :theme="themeToken">
+    <div class="app-shell">
+      <SvgSprite />
+      <TopNav />
+      <div class="app-body">
+        <SidebarNav />
+        <div class="app-content">
+          <main class="content-scroll">
+           <keep-alive>
+              <RouterView />
+           </keep-alive>
+          </main>
+          <footer class="py-6 text-xs text-center text-gray-500">
+            v0.1 · API 正常 · © 2025 金牌内容大师
+          </footer>
+        </div>
+      </div>
+    </div>
+  </a-config-provider>
+  
+</template>
+
+<style scoped>
+.app-shell {
+  min-height: 100vh;
+  background: var(--color-bg);
+}
+
+/* 顶部固定，下面主体需要留出空间 */
+.app-body {
+  padding-top: 70px; /* 与 TopNav 高度对齐 */
+  display: grid;
+  grid-template-columns: 220px 1fr; /* 左侧固定宽度侧边栏 */
+}
+
+.app-content {
+  min-height: calc(100vh - 70px);
+  display: flex;
+  flex-direction: column;
+}
+
+.content-scroll {
+  flex: 1 1 auto;
+  overflow: auto; /* 右侧内容区域滚动 */
+  padding: 0 16px 0 16px;
+}
+</style>