refactor(styles): 建立统一的生产级样式体系 (#4)

## 变更内容

- 将全局样式拆分为设计令牌、基础规则和语义组件层
- 集中管理 Naive UI 主题配置
- 迁移页面容器、表单、信息面板和按钮等重复样式
- 增加样式体系文档与自动契约检查

## 验证

- `npm run check:styles`
- `npm run build`Reviewed-on: #4
This commit was merged in pull request #4.
This commit is contained in:
2026-07-23 02:41:04 +08:00
parent 51743645e2
commit 16b3dd4aaa
27 changed files with 828 additions and 480 deletions
+5 -69
View File
@@ -1,85 +1,21 @@
<script setup lang="ts">
import { NConfigProvider, NDialogProvider, NGlobalStyle, NMessageProvider, NNotificationProvider, type GlobalThemeOverrides } from 'naive-ui'
import { NConfigProvider, NDialogProvider, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui'
import AppHeader from '@/components/layout/AppHeader.vue'
import { openCloudThemeOverrides } from '@/lib/theme'
import { Analytics } from "@vercel/analytics/vue"
import { SpeedInsights } from "@vercel/speed-insights/vue"
const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#0f766e',
primaryColorHover: '#115e59',
primaryColorPressed: '#134e4a',
primaryColorSuppl: '#0f766e',
infoColor: '#0369a1',
successColor: '#0f766e',
warningColor: '#d97706',
errorColor: '#dc2626',
borderRadius: '0px',
borderRadiusSmall: '0px',
fontFamily: '"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif',
fontFamilyMono: '"IBM Plex Mono", "SFMono-Regular", monospace',
bodyColor: '#f3f7fb',
cardColor: '#ffffff',
modalColor: '#ffffff',
popoverColor: '#ffffff',
tableColor: '#ffffff',
textColorBase: '#0f172a',
textColor1: '#0f172a',
textColor2: '#334155',
textColor3: '#64748b',
textColorDisabled: '#94a3b8',
dividerColor: '#d9e3ee',
borderColor: '#d9e3ee',
inputColor: '#ffffff',
},
Button: {
borderRadiusTiny: '0px',
borderRadiusSmall: '0px',
borderRadiusMedium: '0px',
borderRadiusLarge: '0px',
textColorPrimary: '#0f172a',
textColorHoverPrimary: '#0f172a',
},
Card: {
borderRadius: '0px',
borderRadiusEmbedded: '0px',
paddingMedium: '24px',
},
Input: {
borderRadius: '0px',
},
Select: {
peers: {
InternalSelection: {
borderRadius: '0px',
},
},
},
Tabs: {
tabBorderRadius: '0px',
},
Tag: {
borderRadius: '0px',
},
Alert: {
borderRadius: '0px',
},
Modal: {
borderRadius: '0px',
},
}
</script>
<template>
<NConfigProvider :theme-overrides="themeOverrides">
<NConfigProvider :theme-overrides="openCloudThemeOverrides">
<NGlobalStyle />
<NDialogProvider>
<NNotificationProvider>
<NMessageProvider>
<div class="min-h-screen flex flex-col bg-[radial-gradient(circle_at_top_left,_rgba(12,148,136,0.12),_transparent_28%),linear-gradient(180deg,#f8fbfd_0%,#eef4f8_100%)]">
<div class="oc-app-shell">
<AppHeader />
<main class="relative flex-1">
<div class="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(15,23,42,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(15,23,42,0.03)_1px,transparent_1px)] bg-[size:32px_32px] opacity-35"></div>
<div class="oc-app-grid"></div>
<div class="relative">
<RouterView />
</div>