diff --git a/scripts/deploy-monitor.sh b/scripts/deploy-monitor.sh
index 56a41bf..9181b17 100755
--- a/scripts/deploy-monitor.sh
+++ b/scripts/deploy-monitor.sh
@@ -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
diff --git a/src/app/globals.css b/src/app/globals.css
index 48e31d5..5ecfed2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -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 {
diff --git a/src/app/tlyq-design-system.css b/src/app/tlyq-design-system.css
new file mode 100644
index 0000000..ffb6924
--- /dev/null
+++ b/src/app/tlyq-design-system.css
@@ -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 色彩空间（感知均匀，更现代的色域表现），
+ * 需评估所有现有站点的色彩迁移成本，暂记录为未来视觉升级项。
+ */