gaoxiaopei
/
monitor-ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 设计系统 CSS 内联到项目目录（修复 Docker 构建）

This commit is contained in:
aiyimickey 2026-07-01 19:04:20 +08:00
parent 2682232d85
commit 3504837405
3 changed files with 366 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
scripts/deploy-monitor.sh
View File

@ -78,10 +78,10 @@ package_source() {
COPYFILE_DISABLE=1 tar czf /tmp/monitor-ai.tar.gz \
-C "$LOCAL_DIR" \
--exclude='node_modules' --exclude='.next' --exclude='out' \
--exclude='data' --exclude='docs' \
--exclude='data' \
--exclude='.env' --exclude='.env.local' --exclude='.env.development' --exclude='.env.production' \
--exclude='.git' --exclude='._*' \
shared/ monitor-ai/ || {
shared/ monitor-ai/ docs/design/design-system/tlyq-design-system.css || {
error "打包失败"
return 1
}
@ -221,7 +221,10 @@ build_on_server() {
rsync -a --delete \
--exclude='node_modules' --exclude='.git' \
/tmp/deploy_monitor/shared/ /root/docker/shared/ && \
ln -sf /root/docker/shared $REMOTE_DIR/shared && \
rm -rf $REMOTE_DIR/shared && \
cp -r /root/docker/shared $REMOTE_DIR/shared && \
mkdir -p $REMOTE_DIR/docs/design/design-system && \
cp /tmp/deploy_monitor/docs/design/design-system/tlyq-design-system.css $REMOTE_DIR/docs/design/design-system/ 2>/dev/null || true && \
rm -rf /tmp/deploy_monitor"
# 5. 首次部署：上传 docker-compose.yml 和 Dockerfile

2
src/app/globals.css
View File

@ -3,7 +3,7 @@
@source "../../shared";
@source "../../src";
/* TLYQ 设计系统 CSS 变量 */
@import '../../../docs/design/design-system/tlyq-design-system.css' layer(base);
@import './tlyq-design-system.css' layer(base);
@layer base {
body {

359
src/app/tlyq-design-system.css Normal file
View File

@ -0,0 +1,359 @@
/*
* TLYQ 统一设计系统 — 基于 Tailwind Slate 色板
* 适用于 OA/assets/issue 及后续新增站点
*
* 使用方式：
* - CSS 变量：import './reference/tlyq-design-system.css'
* - Tailwind：颜色类已映射（见下方说明）
*/
/* ==================== 设计令牌（CSS 变量） ==================== */
:root {
/* 背景色 */
--bg: #f8fafc; /* slate-50 */
--bg-subtle: #f1f5f9; /* slate-100 */
--surface: #ffffff; /* white */
--surface-raised: #ffffff; /* white */
--surface-overlay: rgba(255, 255, 255, 0.95);
/* 文本色 */
--fg: #0f172a; /* slate-900 */
--fg-subtle: #334155; /* slate-700 */
--muted: #475569; /* slate-600 */
--muted-subtle: #94a3b8; /* slate-400 */
/* 边框 */
--border: #e2e8f0; /* slate-200 */
--border-subtle: #f1f5f9; /* slate-100 */
/* 主色调 — 蓝色系 */
--accent: #2563eb; /* blue-600 */
--accent-hover: #1d4ed8; /* blue-700 */
--accent-active: #1e40af; /* blue-800 */
--accent-subtle: #eff6ff; /* blue-50 */
--accent-text: #ffffff;
/* 状态色 */
--success: #059669; /* emerald-600 */
--success-subtle: #ecfdf5; /* emerald-50 */
--warning: #d97706; /* amber-600 */
--warning-subtle: #fffbeb; /* amber-50 */
--danger: #dc2626; /* red-600 */
--danger-subtle: #fef2f2; /* red-50 */
--info: #2563eb; /* blue-600 */
--info-subtle: #eff6ff; /* blue-50 */
/* 字体 */
--font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
--font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
--font-sans: var(--font-body);
--font-mono: ui-monospace, "JetBrains Mono", "IBM Plex Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* 字体大小 */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
/* 行高 */
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
/* 字间距 */
--tracking-tighter: -0.05em;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* 间距 */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* 圆角 */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* 阴影 */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
/* 过渡 */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* 层级系统 */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 700;
/* 布局 */
--sidebar-width: 240px;
--sidebar-width-collapsed: 64px;
--header-height: 56px;
--content-max-width: 1440px;
--content-padding: var(--space-6);
}
/* ==================== 深色模式 ==================== */
:root.dark {
/* 背景色 */
--bg: #020617; /* slate-950 */
--bg-subtle: #0f172a; /* slate-900 */
--surface: #0f172a; /* slate-900 */
--surface-raised: #1e293b; /* slate-800 */
--surface-overlay: rgba(15, 23, 42, 0.95);
/* 文本色 */
--fg: #f8fafc; /* slate-50 */
--fg-subtle: #cbd5e1; /* slate-300 */
--muted: #94a3b8; /* slate-400 */
--muted-subtle: #64748b; /* slate-500 */
/* 边框 */
--border: #1e293b; /* slate-800 */
--border-subtle: #0f172a; /* slate-900 */
/* 主色调 */
--accent: #3b82f6; /* blue-500 */
--accent-hover: #60a5fa; /* blue-400 */
--accent-active: #93c5fd; /* blue-300 */
--accent-subtle: rgba(59, 130, 246, 0.1);
--accent-text: #0f172a;
/* 状态色 */
--success: #34d399; /* emerald-400 */
--success-subtle: rgba(52, 211, 153, 0.1);
--warning: #fbbf24; /* amber-400 */
--warning-subtle: rgba(251, 191, 36, 0.1);
--danger: #f87171; /* red-400 */
--danger-subtle: rgba(248, 113, 113, 0.1);
--info: #60a5fa; /* blue-400 */
--info-subtle: rgba(96, 165, 250, 0.1);
/* 阴影 */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}
/* ==================== Tailwind 暗色模式映射 ==================== */
/*
* 以下 Tailwind 类名可直接使用：
* 页面背景: bg-slate-50 dark:bg-slate-950
* 卡片背景: bg-white dark:bg-slate-900
* 边框: border-slate-200 dark:border-slate-800
* 正文: text-slate-900 dark:text-slate-50
* 次要文本: text-slate-700 dark:text-slate-300
* 弱文本: text-slate-500 dark:text-slate-400
* 主按钮: bg-blue-600 hover:bg-blue-700 text-white
* 成功: text-emerald-600 dark:text-emerald-400
* 警告: text-amber-600 dark:text-amber-400
* 危险: text-red-600 dark:text-red-400
*/
/* ==================== 全局重置 ==================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
color: var(--fg);
background-color: var(--bg);
}
/* ==================== 组件规范 ==================== */
/* 按钮规范
* 主按钮: bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm
* 次按钮: bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-lg
* 幽灵按钮: hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg
* 尺寸: sm(px-3 py-1.5 text-xs) / md(px-4 py-2 text-sm) / lg(px-6 py-2.5 text-base)
*/
/* 输入框规范
* 边框: border border-slate-300 dark:border-slate-600
* 聚焦: focus:ring-2 focus:ring-blue-500 focus:border-transparent
* 圆角: rounded-lg
* 尺寸: h-10(px-3 text-sm)
*/
/* 卡片规范
* 基础: bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm
* 悬停: hover:border-blue-200 dark:hover:border-blue-800
*/
/* 表格规范
* 头部: bg-slate-50 dark:bg-slate-800 text-slate-500 text-xs font-medium uppercase
* 行: border-b border-slate-200 dark:border-slate-700
* 悬停: hover:bg-slate-50 dark:hover:bg-slate-800/50
*/
/* 徽标规范
* 默认: bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300
* 成功: bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400
* 警告: bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400
* 危险: bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400
* 信息: bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400
* 圆角: rounded-full
* 尺寸: px-2.5 py-0.5 text-xs font-medium
*/
/* 弹窗规范
* 背景: bg-white dark:bg-slate-900
* 边框: border border-slate-200 dark:border-slate-800
* 圆角: rounded-xl
* 阴影: shadow-xl
* 标题: text-lg font-semibold
*/
/* 侧边栏规范
* 宽度: w-60 (240px)
* 定位: fixed left-0 top-0 bottom-0
* 背景: bg-white dark:bg-slate-900
* 边框: border-r border-slate-200 dark:border-slate-800
* 品牌区: h-14 flex items-center
* 导航项: px-3 py-2.5 rounded-lg text-sm font-medium
* 激活态: bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400
*/
/* 顶栏规范
* 高度: h-14 (56px)
* 定位: fixed top-0
* 背景: bg-white dark:bg-slate-900
* 边框: border-b border-slate-200 dark:border-slate-800
* z-index: z-30
*/
/* 主内容区规范
* 边距: ml-60 pt-14 p-6 (侧边栏+顶栏)
* 门户布局: max-w-5xl mx-auto px-6 py-8
*/
/* ==================== 统计卡片 ==================== */
/*
* 用于仪表盘/概览页的统计数据展示
* 容器: bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-6
* 悬停: hover:border-blue-200 dark:hover:border-blue-800 hover:shadow-md transition-all
* 图标区: w-10 h-10 rounded-lg bg-blue-50 dark:bg-blue-500/10 flex items-center justify-center
* 数值: text-2xl font-semibold text-slate-900 dark:text-white font-display
* 标签: text-sm text-slate-500 dark:text-slate-400
* 变化趋势: text-xs font-medium (positive=text-emerald-600, negative=text-red-600)
*/
/* ==================== 骨架屏加载 ==================== */
/*
* 用于数据加载时的占位效果
* <div className="animate-pulse bg-slate-200 dark:bg-slate-700 rounded-lg [height]" />
* 文本行: h-4 w-full / w-3/4
* 标题: h-6 w-1/3
* 卡片: h-32 w-full rounded-xl
*/
/* 无缝统计条 ==================== */
/*
* 仪表盘顶部关键指标展示，分段之间仅 1px 间隙
* 容器: flex gap-px bg-slate-200 dark:bg-slate-800 rounded-xl overflow-hidden
* 段: flex-1 bg-white dark:bg-slate-900 px-6 py-4 flex flex-col gap-1
* 标签: text-xs font-medium text-slate-500 uppercase tracking-widest
* 数值: text-2xl font-semibold font-[family-name:var(--font-display)]
*/
/* 服务状态卡片 ==================== */
/*
* 仪表盘中展示被监控服务实时状态
* 正常: bg-white dark:bg-slate-900 border rounded-xl p-5
* 悬停: hover:shadow-sm hover:-translate-y-px transition-all cursor-pointer
* 异常: bg-red-50 dark:bg-red-500/10 border-red-600 dark:border-red-400
* 红底红框，突出显示
* 状态圆点: w-2.5 h-2.5 rounded-full
* ok: bg-emerald-600 dark:bg-emerald-400 shadow-[0_0_8px_var(--success)]
* err: bg-red-600 dark:bg-red-400 shadow-[0_0_12px_var(--danger)] animate-pulse
* 持续时长: text-lg font-semibold font-mono text-red-600 dark:text-red-400
* 展开区: border-t mt-3 pt-3
*/
/* ==================== 图表容器 ==================== */
/*
* 用于包裹图表组件
* <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-6">
* <div className="flex items-center justify-between mb-6">
* <h3 className="text-lg font-semibold text-slate-900 dark:text-white">标题</h3>
* <div className="flex items-center gap-4 text-sm text-slate-500">图例</div>
* </div>
* [图表内容]
* </div>
*/
/* ==================== 下拉菜单 ==================== */
/*
* 用于用户菜单、操作菜单
* 容器: absolute right-0 top-full mt-1
* bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700
* rounded-lg shadow-lg py-1 min-w-[200px] z-[--z-dropdown]
* 菜单项: px-4 py-2.5 text-sm flex items-center gap-3
* hover:bg-slate-50 dark:hover:bg-slate-700
* text-slate-700 dark:text-slate-300
* 危险项: text-red-600 dark:text-red-400
* 分隔线: border-t border-slate-200 dark:border-slate-700 my-1
*/
/* ==================== 站点标识色 ==================== */
/*
* OA: blue-600 (#2563eb)
* assets: blue-600 (#2563eb)
* issue: blue-600 (#2563eb)
* monitor: indigo-600 (#4f46e5)
*
* 站点卡片标识色（门户首页）：
* 资产管理: blue-600 (#2563eb) tag: CMDB
* 工单跟踪: violet-600 (#7c3aed) tag: ITS
* 监控中心: indigo-600 (#4f46e5) tag: MONITOR
* 官网: emerald-600 (#059669) tag: WWW
* 云平台: amber-600 (#d97706) tag: CLOUD
* Token: rose-600 (#e11d48) tag: TOKEN
* 代码仓库: pink-600 (#db2777) tag: GIT
*
* 未来考虑：迁移至 OKLCh 色彩空间（感知均匀，更现代的色域表现），
* 需评估所有现有站点的色彩迁移成本，暂记录为未来视觉升级项。
*/