feat(v3): Web 界面视觉升级（全局设计令牌 + 深色侧边栏壳 + 页面细节打磨）
- style.css 重写为设计系统：色板/圆角/阴影/统一滚动条/焦点环/卡片质感，main.ts 引入 - App.vue：深色渐变侧边栏替换顶部条（品牌区/图标导航/激活高亮/网关状态脚注） - 六个视图页面背景令牌化，卡片统一阴影；index.html 标题与语言修正 - 功能零改动，纯视觉层
This commit is contained in:
tzt
+123
-52
@@ -1,85 +1,156 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="topbar">
|
||||
<span class="brand">🤖 端云协同 LLM 系统</span>
|
||||
<div class="nav-links">
|
||||
<router-link to="/chat">💬 对话</router-link>
|
||||
<router-link to="/collaboration">🔄 协作</router-link>
|
||||
<router-link to="/agent">🤖 智能体</router-link>
|
||||
<router-link to="/review">🔍 检验</router-link>
|
||||
<router-link to="/metrics">📊 指标</router-link>
|
||||
<router-link to="/settings">⚙️ 设置</router-link>
|
||||
<!-- 深色侧边导航 -->
|
||||
<aside class="side">
|
||||
<div class="brand">
|
||||
<div class="brand-logo">🤖</div>
|
||||
<div class="brand-text">
|
||||
<b>端云协同</b>
|
||||
<span>LLM 协作系统</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 路由视图 -->
|
||||
<router-view class="content" />
|
||||
<nav class="nav">
|
||||
<router-link v-for="item in NAV" :key="item.to" :to="item.to" class="nav-item">
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span class="nav-label">{{ item.label }}</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<div class="side-foot">
|
||||
<div class="foot-dot" />
|
||||
<span>本地网关 · :8000</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="main-col">
|
||||
<router-view class="content" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// App.vue — 根布局，导航栏 + 路由出口
|
||||
// App.vue — 深色侧边栏壳 + 路由出口
|
||||
const NAV = [
|
||||
{ to: '/chat', icon: '💬', label: '对话' },
|
||||
{ to: '/collaboration', icon: '🔄', label: '协作过程' },
|
||||
{ to: '/agent', icon: '🤖', label: '智能体' },
|
||||
{ to: '/review', icon: '🔍', label: '人工检验' },
|
||||
{ to: '/metrics', icon: '📊', label: '指标' },
|
||||
{ to: '/settings', icon: '⚙️', label: '设置' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #111;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding: 0 24px;
|
||||
height: 52px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: #fff;
|
||||
/* ---------- 侧边栏 ---------- */
|
||||
.side {
|
||||
width: 208px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, var(--c-side-bg) 0%, var(--c-side-bg-2) 100%);
|
||||
color: var(--c-side-text);
|
||||
padding: 18px 12px 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e40af;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 4px 8px 18px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.brand-logo {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 20px;
|
||||
background: linear-gradient(135deg, #4f6ef7, #7c5cf5);
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 4px 14px rgba(79, 110, 247, 0.45);
|
||||
}
|
||||
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
|
||||
.brand-text b { color: #fff; font-size: 15px; letter-spacing: 0.5px; }
|
||||
.brand-text span { font-size: 11px; color: var(--c-side-text); }
|
||||
|
||||
.nav-links a {
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 9px;
|
||||
text-decoration: none;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
color: var(--c-side-text);
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
transition: background 0.15s;
|
||||
position: relative;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.nav-links a:hover { background: #f3f4f6; }
|
||||
.nav-links a.router-link-active {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
.nav-item:hover { background: rgba(255, 255, 255, 0.055); color: #e6eaf4; }
|
||||
.nav-item.router-link-active {
|
||||
background: var(--c-side-active);
|
||||
color: var(--c-side-text-active);
|
||||
}
|
||||
.nav-item.router-link-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 3px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: var(--c-primary);
|
||||
}
|
||||
.nav-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 15px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 7px;
|
||||
}
|
||||
.nav-item.router-link-active .nav-icon { background: rgba(79, 110, 247, 0.35); }
|
||||
|
||||
.side-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 10px 8px 2px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.07);
|
||||
font-size: 11px;
|
||||
color: #7d879e;
|
||||
}
|
||||
.foot-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 6px #34d399;
|
||||
}
|
||||
|
||||
/* ---------- 内容区 ---------- */
|
||||
.main-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow: hidden; /* 限制自己高度，不被子内容撑开 */
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
|
||||
Reference in New Issue
Block a user