doc-forge/web/src/App.vue

<template>
  <a-config-provider :theme="{ token: { colorPrimary: '#5b5bd6', borderRadius: 8 } }">
    <div class="app-shell">
      <header class="topbar">
        <div class="topbar-logo">
          <div class="logo-icon">A</div>
          <span>AI 文档模板</span>
        </div>

        <nav class="topbar-nav">
          <button :class="['topbar-tab', { active: isActive('/templates') }]" @click="router.push('/templates')">
            <folder-outlined />
            模板管理
          </button>
          <button :class="['topbar-tab', { active: isActive('/models') }]" @click="router.push('/models')">
            <api-outlined />
            模型管理
          </button>
          <button :class="['topbar-tab', { active: isActive('/generate') }]" @click="router.push('/generate')">
            <thunderbolt-outlined />
            执行生成
          </button>
          <button :class="['topbar-tab', { active: isActive('/attachments') }]" @click="router.push('/attachments')">
            <paper-clip-outlined />
            附件历史
          </button>
          <button :class="['topbar-tab', { active: isActive('/history') }]" @click="router.push('/history')">
            <clock-circle-outlined />
            生成记录
          </button>
        </nav>

        <div class="topbar-right">
          <span class="version-text">v3.0</span>
          <div class="user-badge">
            <span class="user-name">周文涛</span>
            <div class="user-avatar-sm">周</div>
          </div>
        </div>
      </header>

      <main class="page-main">
        <router-view />
      </main>
    </div>
  </a-config-provider>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { FolderOutlined, ApiOutlined, ThunderboltOutlined, ClockCircleOutlined, PaperClipOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()

function isActive(path: string) {
  return route.path.startsWith(path)
}
</script>

<style scoped>
.app-shell {
  min-height: 100vh;
  background: #f5f6f8;
  color: #1a1d24;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}

.topbar {
  height: 52px;
  background: #fff;
  border-bottom: 1px solid #e0e2e6;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  margin-right: 16px;
  flex-shrink: 0;
}

.logo-icon {
  width: 28px;
  height: 28px;
  background: #5b5bd6;
  border-radius: 6px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-tab {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: #5b626e;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.12s;
}

.topbar-tab:hover {
  background: #f0f1f3;
  color: #1a1d24;
}

.topbar-tab.active {
  background: #eeeefb;
  color: #5b5bd6;
  font-weight: 500;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.version-text {
  font-size: 12px;
  color: #9aa1ad;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 12px;
  background: #f0f1f3;
  border-radius: 20px;
}

.user-name {
  font-size: 12px;
  font-weight: 500;
}

.user-avatar-sm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eeeefb;
  color: #5b5bd6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.page-main {
  height: calc(100vh - 52px);
  overflow: auto;
}
</style>