fix: 设计系统 CSS 内联到项目目录（修复 Docker 构建）
This commit is contained in:
aiyimickey
parent
2682232d85
commit
3504837405
|
|
@ -78,10 +78,10 @@ package_source() {
|
||||||
COPYFILE_DISABLE=1 tar czf /tmp/monitor-ai.tar.gz \
|
COPYFILE_DISABLE=1 tar czf /tmp/monitor-ai.tar.gz \
|
||||||
-C "$LOCAL_DIR" \
|
-C "$LOCAL_DIR" \
|
||||||
--exclude='node_modules' --exclude='.next' --exclude='out' \
|
--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='.env' --exclude='.env.local' --exclude='.env.development' --exclude='.env.production' \
|
||||||
--exclude='.git' --exclude='._*' \
|
--exclude='.git' --exclude='._*' \
|
||||||
shared/ monitor-ai/ || {
|
shared/ monitor-ai/ docs/design/design-system/tlyq-design-system.css || {
|
||||||
error "打包失败"
|
error "打包失败"
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
|
|
@ -221,7 +221,10 @@ build_on_server() {
|
||||||
rsync -a --delete \
|
rsync -a --delete \
|
||||||
--exclude='node_modules' --exclude='.git' \
|
--exclude='node_modules' --exclude='.git' \
|
||||||
/tmp/deploy_monitor/shared/ /root/docker/shared/ && \
|
/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"
|
rm -rf /tmp/deploy_monitor"
|
||||||
|
|
||||||
# 5. 首次部署：上传 docker-compose.yml 和 Dockerfile
|
# 5. 首次部署：上传 docker-compose.yml 和 Dockerfile
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
@source "../../shared";
|
@source "../../shared";
|
||||||
@source "../../src";
|
@source "../../src";
|
||||||
/* TLYQ 设计系统 CSS 变量 */
|
/* TLYQ 设计系统 CSS 变量 */
|
||||||
@import '../../../docs/design/design-system/tlyq-design-system.css' layer(base);
|
@import './tlyq-design-system.css' layer(base);
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -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 色彩空间（感知均匀，更现代的色域表现），
|
||||||
|
* 需评估所有现有站点的色彩迁移成本，暂记录为未来视觉升级项。
|
||||||
|
*/
|
||||||
Loading…
Reference in New Issue