zhouwentao/doc-forge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

按原型图重构核心页面并完善生成链路

Browse Source
This commit is contained in:
zwt13703
2026-07-02 16:09:34 +08:00
parent 5a43cc70d5
commit a8716aa3c6
10 changed files with 1228 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.vue
+157 -36
View File
@@ -1,51 +1,172 @@
<template>
<a-config-provider :theme="{ token: { colorPrimary: '#5b5bd6', borderRadius: 8 } }">
<a-layout style="min-height:100vh">
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible theme="light" :width="220">
<div class="logo">{{ collapsed ? "A" : "AI 文档模板" }}</div>
<a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="onMenuClick">
<a-menu-item key="/templates"><folder-outlined /> 模板管理</a-menu-item>
<a-menu-item key="/models"><api-outlined /> 模型管理</a-menu-item>
<a-menu-item key="/generate"><thunderbolt-outlined /> 执行生成</a-menu-item>
<a-menu-item key="/history"><clock-circle-outlined /> 生成记录</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background:#fff;padding:0 24px;display:flex;align-items:center;border-bottom:1px solid #f0f0f0">
<menu-unfold-outlined v-if="collapsed" @click="collapsed=false" style="font-size:18px;cursor:pointer" />
<menu-fold-outlined v-else @click="collapsed=true" style="font-size:18px;cursor:pointer" />
<div style="flex:1" />
<a-badge :count="0" :overflow-count="99"><bell-outlined style="font-size:18px;color:#999" /></a-badge>
<span style="margin-left:16px;font-size:13px;color:#666">周文涛</span>
</a-layout-header>
<a-layout-content style="margin:0;background:#f5f6f8;overflow:auto">
<router-view />
</a-layout-content>
</a-layout>
</a-layout>
<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('/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 { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
FolderOutlined, ApiOutlined, ThunderboltOutlined, ClockCircleOutlined,
MenuUnfoldOutlined, MenuFoldOutlined, BellOutlined
} from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { FolderOutlined, ApiOutlined, ThunderboltOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
const router = useRouter()
const route = useRoute()
const collapsed = ref(false)
const selectedKeys = ref([route.path])
watch(() => route.path, p => { selectedKeys.value = [p] })
function onMenuClick(info: any) {
router.push(info.key)
function isActive(path: string) {
return route.path.startsWith(path)
}
</script>
<style scoped>
.logo { height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #5b5bd6; border-bottom: 1px solid #f0f0f0; }
.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>