diff --git a/backend/data/alone/cache/plugin-resources/webside/default/favicon.ico b/backend/data/alone/cache/plugin-resources/webside/default/favicon.ico
new file mode 100644
index 000000000..280094d5d
Binary files /dev/null and b/backend/data/alone/cache/plugin-resources/webside/default/favicon.ico differ
diff --git a/frontend/AGENTS.md b/frontend/AGENTS.md
new file mode 100644
index 000000000..92d77b7ed
--- /dev/null
+++ b/frontend/AGENTS.md
@@ -0,0 +1,238 @@
+# AGENTS.md
+
+本文件为 AI 编码代理在 open-cdm 前端工程（`frontend/`）内工作时的规则说明。内容按 CloudDM Web 前端的实际工程组织和团队规则调整。
+
+## 作用范围
+
+- 本文件适用于以 `frontend/` 为工作根目录的前端开发任务。
+- 仓库根目录的 `AGENTS.md` 提供全仓通用规则；本文件在其基础上补充前端专属约束。
+- 若子目录存在更深层 `AGENTS.md`，则该子目录及其后代以内层文件为准。
+- 本文件约束源码、配置、脚本和测试变更；默认不要修改生成产物和依赖目录，例如 `node_modules/`、`dist/`。
+
+## 项目定位
+
+- `frontend/` 是 CloudDM 的 Web 前端工程，npm 包名为 `clouddm-web`，同时作为后端 Gradle 模块 `cgdm-web` 被打包进安装包。
+- 面向团队数据库管理，覆盖 SQL 查询、数据源管理、权限控制、脱敏、工单协作、系统配置等能力。
+- 主要技术栈：
+  - Vue 3、Vue CLI 5、Vue Router 4、Vuex 4。
+  - JavaScript 为主，局部 TypeScript；Node.js 22.22.1。
+  - UI：View UI Plus（主）、Ant Design Vue（局部）、Tailwind CSS、Less。
+  - 编辑器：Monaco Editor；图表/监控：Highcharts、自研 monitor 面板。
+  - 国际化：vue-i18n；HTTP：axios；实时：reconnecting-websocket。
+
+## 项目结构
+
+- `src/main.js`：应用入口，注册插件、全局组件、主题和 i18n。
+- `src/App.vue`：根组件。
+- `src/router/`：路由定义；`index.js` 为主路由，`system.js` 为系统管理子路由。
+- `src/store/`：Vuex 全局状态（用户、权限、主题等）。
+- `src/views/`：页面视图，按业务域划分：
+  - `sql/`：SQL 工作台
+  - `system/`：系统管理（数据源、权限、脱敏、子账号等）
+  - `ticket/`：工单
+  - `project/`：项目 / 变更
+  - `login/`、`initialization/`：登录与初始化
+  - `consoleJob/`、`worker/`、`devops/` 等运维相关页面
+- `src/components/`：可复用组件：
+  - `ui/`、`widgets/`：基础 UI 与业务小组件
+  - `function/`：功能型组件（数据源、监控、编辑器等）
+  - `layout/`：布局（侧边栏、品牌等）
+  - `modal/`、`form/`、`editor/`：弹窗、表单、编辑器
+- `src/services/`：接口与通信层：
+  - `http/`：面向 DM Console 的 REST API（`request.js` 为 axios 封装）
+  - `cc/`：面向 RDP / CloudCanal 相关 API
+  - `socket.js`：WebSocket 连接
+- `src/locales/`：国际化文案（`en.json`、`zh.json`）。
+- `src/i18n.js`：i18n 初始化与语言切换。
+- `src/styles/`：全局样式、主题（`themes/`）、Less 变量与 mixin。
+- `DESIGN.md`：UI 设计风格规范（色彩、字体、间距、圆角、组件形态）；新增或改版页面/组件时以此为准。
+- `src/utils/`：通用工具函数。
+- `src/mixins/`：Vue mixin（鉴权、数据源、弹窗等）。
+- `src/directives/`：自定义指令。
+- `src/const/`：常量与枚举。
+- `public/`：静态资源与 HTML 模板。
+- `vue.config.js`：Vue CLI / Webpack 配置；开发代理默认指向 `http://localhost:8222`。
+- `scripts/check-i18n.js`：国际化 key 一致性检查脚本。
+
+## 工作方式
+
+- 以最小且正确的改动解决问题。
+- 优先选择直接、清晰、可读的实现，不追求花哨抽象。
+- 当多条规则冲突时，优先保证行为正确、状态一致、契约清晰。
+- 不乱猜业务语义；拿不到明确数据时，不要擅自补业务对象、状态、内容或其他业务含义。
+- 不胡乱兼容旧逻辑；已经明确删除的字段、分支、路径要清干净。
+- 先阅读相关模块的现有实现，再决定改法；优先沿用本仓库已有模式、命名、工具类和基础设施。
+- 工作区可能存在用户未提交改动；不要回滚、覆盖或重排与当前任务无关的改动。
+
+## 构建与验证命令
+
+### 环境要求
+
+- Node.js 22.22.1
+- 本地联调需后端单机模式运行于 `http://localhost:8222`（`DmAloneLauncher`）
+
+### 常用命令
+
+```bash
+cd frontend && npm install
+cd frontend && npm run serve:dm
+cd frontend && npm run build:dm
+cd frontend && npm run lint
+cd frontend && npm run lint-fix
+cd frontend && npm run test:unit
+cd frontend && npm run check-i18n
+```
+
+- 使用 `package-lock.json`，默认使用 `npm`，不要擅自切换到其他包管理器。
+- 构建产物输出到 `dist/templates/`，由后端 Gradle `cgdm-web` 模块打包。
+- 全量构建前端资源也可通过 `cd package && ./all_build.sh web` 触发。
+
+### 本地联调
+
+- `npm run serve:dm` 启动开发服务器，`vue.config.js` 中 `devServer.proxy` 将 API 代理到后端。
+- 后端未启动时，页面接口调用会失败；优先确认 `localhost:8222` 可访问。
+
+## 编码规则
+
+- 不过度防御，不为了极低概率场景写复杂兜底逻辑。
+- 允许基于模块边界、配置约束和框架契约建立合理信任；不要不看上下文就把所有值都当成任意脏输入。
+- 不要为实际不可能出现的 `null`、空值或非法状态写复杂防御分支；防御逻辑只放在真实边界和不可信输入处。
+- 避免长条件和层层 `if` 堆叠导致代码难读；如果必须校验，优先让边界、契约和数据结构保持清晰。
+- 代码要干净直接，好读优先，不要为了抽象而抽象。
+- 尽量不写三元表达式，能用 `if` 表达清楚的逻辑，优先使用 `if`。
+- 不写没必要的小 helper，只有复用明显且能降低理解成本时才抽。
+- 没用到的字段、方法、分支、返回值要删掉。
+- 注释只解释不明显的业务约束、协议边界或复杂流程，不写重复代码字面含义的注释。
+
+## 前端规则
+
+### 架构与目录约定
+
+- 以 Vue 3 + Vue CLI 为主，沿用 `components/`、`services/`、`store/`、`router/`、`views/` 的既有分层。
+- 新增页面：在 `views/` 对应业务目录下创建，并在 `router/` 注册路由与 `meta.requiredAuth` 权限。
+- 新增接口：在 `services/http/api/` 或 `services/cc/api/` 下按现有模块拆分，通过 `services/http/index.js` 聚合导出。
+- 全局状态放 Vuex；页面局部状态用组件 `data` / `setup`；跨组件通信用 `eventBus`（`utils/eventBus.js`）或 Vuex。
+- 不要擅自引入新的 UI 框架、状态管理库或构建工具。
+
+### 设计风格
+
+完整规范见 `DESIGN.md`；以下为代理落地时必须遵守的摘要。
+
+**设计基调**
+
+- 编辑型工作流界面：白底画布（`#ffffff`）+ 深墨文字（`#181d26`），留白充足，不靠渐变或背景装饰抢注意力。
+- 品牌张力来自**全幅签名色块**（coral `#aa2d00`、forest `#0a2e0e`、dark navy `#181d26`、cream `#f5e9d4` 等），用于阶段性强调，不作为小元素点缀色。
+- 深度优先靠**色块对比**，阴影极少；输入框、次级按钮用 1px 发丝线边框（`#dddddd`）。
+
+**色彩角色**
+
+| 角色 | Token | 用途 |
+|------|-------|------|
+| 主色 / 墨字 | `primary` / `ink` `#181d26` | 主按钮背景、标题、强调文字 |
+| 正文 | `body` `#333840` | 默认段落 |
+| 弱化 | `muted` `#41454d` | 页脚、面包屑、说明 |
+| 画布 | `canvas` `#ffffff` | 页面默认背景 |
+| 浅表面 | `surface-soft` `#f8fafc` | 卡片、选中层 |
+| 链接 | `link` `#1b61c9` | 行内链接；**不是**主按钮色 |
+| 语义 | `info` / `success` 等 | 提示、成功态 |
+
+- 主按钮用近黑（`primary`），不是链接蓝。链接蓝仅用于 `text-link`。
+- 签名色（coral、forest、peach、mint 等）只用于整块表面，不拆成小 badge 或 icon 底色。
+
+**字体**
+
+- 主系统：Haas / Haas Groot Disp；无授权字体时用 Inter Display 或 `system-ui` 替代。
+- 展示标题（h1/h2）用 400–500 字重，**不靠加粗强调**；强调靠字号和色块对比。
+- 正文固定 14px / 400；按钮与标签 16px / 500。
+- 定价子系统单独用 Inter Display + `rounded.pill` 药丸按钮，不与主编辑系统混用。
+
+**间距与圆角**
+
+- 间距以 4px 为基准：`xs` 8 · `md` 16 · `lg` 24 · `xl` 32 · `xxl` 48 · `section` 96。
+- 大区块上下内边距优先 `section`（96px）；卡片内边距 24–48px 按层级选用。
+- 圆角层级：`sm` 6px 输入框 · `md` 10px 内容卡片 · `lg` 12px 主按钮与签名卡片 · `pill` 仅定价页。
+
+**组件形态（对照 `DESIGN.md` components 节）**
+
+- **主按钮** `button-primary`：近黑底、白字、12px 圆角、16×24px 内边距；每视口仅一个主 CTA。
+- **次按钮** `button-secondary`：白底、墨字、发丝线描边；与主按钮成对出现。
+- **输入框** `text-input`：高 44px、6px 圆角、发丝线边框；聚焦用 `info-border`。
+- **签名卡片** `signature-coral-card` / `hero-card-dark`：全幅色块 + 48px 内边距 + 12px 圆角。
+- **功能卡片** `feature-card-tabbed` / `demo-grid-card`：浅底或 pastel 底，网格内高度可刻意错落。
+
+**Do / Don't（来自 DESIGN.md）**
+
+- Do：主按钮保持近黑；hero 区信任留白、不加渐变；签名色块打断长页面单调节奏；间距对齐 4px 网格。
+- Don't：把链接蓝当主按钮色；展示标题加粗到 600/700；hero 加渐变/光晕背景；在定价子系统外使用 pill 圆角；连续两个相同表面模式（如两段纯白无变化）；自行发明签名色以外的 accent 色。
+- 状态只文档化 Default 与 Active/Pressed，不额外设计 hover 变体。
+
+**与现有代码的关系**
+
+- 样式实现落在 `styles/variables.less`、`styles/themes/` 和组件 Less 中；新 UI 应以 `DESIGN.md` token 为目标，逐步对齐，不沿用与规范冲突的旧色值（如把链接绿当主色）。
+- 暗色主题遵循 `styles/themes/dark-theme.less`，语义角色与亮色一致，色相按主题映射。
+
+**响应式**
+
+- 断点：Mobile `<768` · Tablet `768–1024` · Desktop `1024–1440` · Wide `>1440`（内容最大宽约 1280px 居中）。
+- 触控目标：主按钮最小 48×48px；输入框高 44px。
+- 窄屏优先减列数而非缩小卡片；表格改为横向滚动。
+
+### 组件与样式
+
+- 复用 `components/ui/`、`components/widgets/` 中已有基础组件；功能型复用看 `components/function/`。
+- 只有现有组件无法表达真实交互或可访问性需求时，才新增组件。
+- 样式优先用 Less，全局变量和 mixin 在 `styles/variables.less`、`styles/mixins.less`；主题通过 `store` 的 `initTheme` 和 `styles/themes/` 管理。
+- 新增或改版 UI 前先读 `DESIGN.md`，颜色、字号、间距、圆角、按钮层级按设计 token 落地。
+- 已混用 View UI Plus、Ant Design Vue、Tailwind；新增 UI 优先与当前页面所在模块保持一致，避免同一区域混用多套组件库；覆盖组件库默认样式时对齐 `DESIGN.md` 而非组件库原生色。
+- 修改样式时检查移动端和常见桌面宽度，避免文案溢出、控件遮挡和布局跳动。
+
+### 国际化
+
+- 用户可见文案必须维护在 `src/locales/`，不要在组件、服务或 store 中硬编码展示文案。
+- 新增 key 时同步维护 `en.json` 和 `zh.json`；提交前运行 `npm run check-i18n`。
+- 路由 `meta.title`、表格列名、按钮、提示、错误展示均走 i18n。
+
+### API 与数据契约
+
+- 修改接口字段、枚举、状态或错误码时，同步检查后端 VO / API、前端 service、页面逻辑和测试。
+- 后端已删除的字段，前端不要继续保留 fallback 行为。
+- 在增加兼容逻辑前，先确认后端真实协议。
+- 接口响应、状态机、权限判断、国际化 key 和错误码以当前真实实现为准，不要凭命名猜业务含义。
+- HTTP 错误统一走 `services/formatError.js` 和 `utils/errorQueueModal` 机制，不要各页面自行弹窗处理同类错误。
+
+### 权限与路由
+
+- 路由 `meta.requiredAuth` 声明页面所需权限码；侧边栏菜单通过 `utils/buildSidebarMenu.js` 按权限过滤。
+- 按钮级权限参考现有页面的 `v-if` / mixin 模式（如 `authMixin`），保持与后端权限码一致。
+
+## 前后端契约
+
+- 前后端契约必须保持一致。
+- 字段删除时，要同时删除后端、前端和测试中的对应逻辑。
+- 前端不要为后端已删除字段继续保留 fallback 行为。
+- DM Console API 通常走 `/console/api/` 或 `/rdp/console/api/` 前缀；具体路径以 `services/http/request.js` 和现有 api 文件为准。
+
+## 实时连接与异步
+
+- WebSocket 使用 `services/socket.js`（reconnecting-websocket）；关注重连、终态和资源释放。
+- SQL 执行、结果导出、异步任务等长连接场景，明确 loading、取消、失败恢复和组件卸载时的清理。
+- 不要把阻塞操作放在主线程导致页面卡顿；大列表注意分页或虚拟滚动。
+
+## 测试要求
+
+- 默认不要新增无用测试；除非用户明确要求补测试，否则不要新增测试类。
+- 前端改动优先运行 `npm run lint`、`npm run check-i18n` 和相关单测（`npm run test:unit`）。
+- 用户可见流程变更要做浏览器级检查。
+- 测试覆盖真实风险路径：权限边界、接口异常、WebSocket 断开重连、表单校验与状态一致性。
+
+## Review 规则
+
+- Review 只提真实 bug 和明确 concern。
+- 不要堆风格噪音，除非它确实影响正确性、可维护性或契约清晰度。
+- 优先关注状态一致性、协议破坏、权限绕过、前后端字段不一致、i18n 遗漏、样式回归和偏离 `DESIGN.md` 的色彩/字重/圆角。
+
+## PR 与提交
+
+- PR 说明要清楚描述改了什么、为什么改、如何验证。
+- 提交信息使用 Conventional Commits，例如 `feat(frontend): add SSO settings page` 或 `fix(sql): fix operator panel overflow`。
+- 提交前确认没有把 `node_modules/`、`dist/`、日志、临时文件或无关格式化改动带入 diff。
diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
new file mode 100644
index 000000000..eef4bd20c
--- /dev/null
+++ b/frontend/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
\ No newline at end of file
diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
new file mode 100644
index 000000000..d885f4984
--- /dev/null
+++ b/frontend/DESIGN.md
@@ -0,0 +1,554 @@
+---
+version: alpha
+name: Airtable-design-analysis
+description: A sober, editorial workflow-software interface anchored on white canvas and dark-ink type, where brand voltage comes from full-bleed signature cards in coral, dark green, peach, and dark navy that punctuate long-scroll explainer pages. Primary actions use a near-black pill CTA; secondary actions sit in a white outlined button. Type runs Haas Grotesk in modest weights — never bold for its own sake.
+
+colors:
+  primary: "#181d26"
+  primary-active: "#0d1218"
+  ink: "#181d26"
+  body: "#333840"
+  muted: "#41454d"
+  hairline: "#dddddd"
+  border-strong: "#9297a0"
+  canvas: "#ffffff"
+  surface-soft: "#f8fafc"
+  surface-strong: "#e0e2e6"
+  surface-dark: "#181d26"
+  surface-dark-elevated: "#1d1f25"
+  signature-coral: "#aa2d00"
+  signature-forest: "#0a2e0e"
+  signature-cream: "#f5e9d4"
+  signature-peach: "#fcab79"
+  signature-mint: "#a8d8c4"
+  signature-yellow: "#f4d35e"
+  signature-mustard: "#d9a441"
+  on-primary: "#ffffff"
+  on-dark: "#ffffff"
+  link: "#1b61c9"
+  link-active: "#1a3866"
+  info: "#254fad"
+  info-border: "#458fff"
+  success: "#006400"
+  success-border: "#39bf45"
+  pricing-ink: "#1d1f25"
+
+typography:
+  display-xl:
+    fontFamily: "Haas Groot Disp, Haas, sans-serif"
+    fontSize: 48px
+    fontWeight: 500
+    lineHeight: 1.1
+    letterSpacing: 0
+  display-lg:
+    fontFamily: "Haas Groot Disp, Haas, sans-serif"
+    fontSize: 40px
+    fontWeight: 400
+    lineHeight: 1.2
+    letterSpacing: 0
+  display-md:
+    fontFamily: "Haas Groot Disp, Haas, sans-serif"
+    fontSize: 32px
+    fontWeight: 400
+    lineHeight: 1.2
+    letterSpacing: 0
+  title-lg:
+    fontFamily: "Haas, sans-serif"
+    fontSize: 24px
+    fontWeight: 400
+    lineHeight: 1.35
+    letterSpacing: 0.12px
+  title-md:
+    fontFamily: "Haas Groot Disp, Haas, sans-serif"
+    fontSize: 20px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  title-sm:
+    fontFamily: "Haas, sans-serif"
+    fontSize: 18px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  label-md:
+    fontFamily: "Haas, sans-serif"
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  button:
+    fontFamily: "Haas, sans-serif"
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  body-md:
+    fontFamily: "Haas, sans-serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.25
+    letterSpacing: 0
+  caption:
+    fontFamily: "Haas, sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.35
+    letterSpacing: 0.16px
+  legal:
+    fontFamily: "Haas, sans-serif"
+    fontSize: 13.12px
+    fontWeight: 600
+    lineHeight: 1.2
+    letterSpacing: 0
+  pricing-display:
+    fontFamily: "Inter Display, system-ui, sans-serif"
+    fontSize: 44.8px
+    fontWeight: 475
+    lineHeight: 1.1
+    letterSpacing: 0
+  pricing-section:
+    fontFamily: "Inter Display, system-ui, sans-serif"
+    fontSize: 28px
+    fontWeight: 475
+    lineHeight: 1.2
+    letterSpacing: 0
+  pricing-card-title:
+    fontFamily: "Inter Display, system-ui, sans-serif"
+    fontSize: 20px
+    fontWeight: 475
+    lineHeight: 1.3
+    letterSpacing: 0
+
+rounded:
+  xs: 2px
+  sm: 6px
+  md: 10px
+  lg: 12px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+  section: 96px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.lg}"
+    padding: 16px 24px
+  button-primary-active:
+    backgroundColor: "{colors.primary-active}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.lg}"
+  button-secondary:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.lg}"
+    padding: 16px 24px
+  button-secondary-on-dark:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.lg}"
+    padding: 16px 24px
+  button-legal:
+    backgroundColor: "{colors.link}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.legal}"
+    rounded: "{rounded.xs}"
+    padding: 12px 10px
+  button-icon-circular:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.full}"
+    size: 40px
+  button-pricing-pill:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.pricing-ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.pill}"
+    padding: 12px 24px
+  text-link:
+    backgroundColor: transparent
+    textColor: "{colors.link}"
+    typography: "{typography.body-md}"
+  top-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    height: 64px
+  hero-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-lg}"
+    padding: 96px
+  signature-coral-card:
+    backgroundColor: "{colors.signature-coral}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.display-md}"
+    rounded: "{rounded.lg}"
+    padding: 48px
+  signature-forest-card:
+    backgroundColor: "{colors.signature-forest}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.display-md}"
+    rounded: "{rounded.lg}"
+    padding: 48px
+  hero-card-dark:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.display-md}"
+    rounded: "{rounded.lg}"
+    padding: 48px
+  feature-card-tabbed:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-lg}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  cream-callout-card:
+    backgroundColor: "{colors.signature-cream}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-lg}"
+    rounded: "{rounded.md}"
+    padding: 24px
+  demo-grid-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.md}"
+    padding: 16px
+  logo-strip:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.muted}"
+    typography: "{typography.body-md}"
+    padding: 32px
+  article-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-sm}"
+    rounded: "{rounded.md}"
+    padding: 16px
+  topic-filter-rail:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-md}"
+    width: 240px
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 12px 16px
+    height: 44px
+  text-input-focus:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.sm}"
+  pricing-tier-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.pricing-ink}"
+    typography: "{typography.pricing-card-title}"
+    rounded: "{rounded.md}"
+    padding: 32px
+  pricing-tier-card-featured:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.pricing-ink}"
+    typography: "{typography.pricing-card-title}"
+    rounded: "{rounded.md}"
+    padding: 32px
+  pricing-comparison-row:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-md}"
+    padding: 12px
+  cta-band-light:
+    backgroundColor: "{colors.surface-strong}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-md}"
+    rounded: "{rounded.lg}"
+    padding: 48px
+  footer:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-md}"
+    padding: 64px
+---
+
+## Overview
+
+Airtable's marketing surfaces are quietly editorial. The base atmosphere is white canvas, dark ink type, generous whitespace, and a near-black pill CTA — nothing is fighting for attention until a section needs to. The brand voltage doesn't come from gradient washes or accent walls; it comes from **full-bleed signature cards** in `{colors.signature-coral}`, `{colors.signature-forest}`, and `{colors.surface-dark}` that punctuate long-scroll explainer pages every two or three screens. Between those signature bands, the page reads like a print magazine: a headline, supporting copy, a small image cluster, then breathing room.
+
+Type voice is Haas Grotesk at modest weights (400 for display, 500 for sub-titles and buttons). Display headlines never go bolder than 500 — emphasis comes from size and color contrast, not from weight. Body copy stays at 14px / 400 throughout. The pricing surface runs its own dialect: **Inter Display** at unusual mid-weights (475 / 575) and **pill-shaped buttons** (`{rounded.pill}`) that don't appear on any other page — a deliberate sub-system signaling "this page is about commercial precision."
+
+**Key Characteristics:**
+- Primary CTA is `{colors.primary}` (near-black ink) with white text and a `{rounded.lg}` (12px) corner — it reads as confident and final, never decorative.
+- Secondary CTA is a `{colors.canvas}` button with `{colors.ink}` text and a hairline outline. The two together form Airtable's signature button pair.
+- Hero is white canvas. There is no atmospheric gradient, no mesh, no background flourish. The brand strength comes from the type and the buttons sitting in clean whitespace.
+- Brand voltage lives in **signature surface cards**: `{colors.signature-coral}`, `{colors.signature-forest}`, and `{colors.surface-dark}` carry full-bleed product callouts every few screens.
+- Demo-card grids carry product UI fragments on `{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-cream}` and other warm pastel surfaces.
+- Section rhythm: white canvas → coral signature card → white body → cream callout band → dark navy CTA → light gray CTA banner → footer. The canvas resets between every signature surface.
+- Border radius is hierarchical: `{rounded.lg}` (12px) for primary CTAs and large signature cards, `{rounded.md}` (10px) for content cards and demo grids, `{rounded.sm}` (6px) for inputs, `{rounded.full}` for icon buttons. Pricing buttons jump to `{rounded.pill}` to mark themselves as a separate dialect.
+- Vertical rhythm is `{spacing.section}` (96px) between major bands — universal across every page.
+
+## Colors
+
+### Brand & Accent
+- **Primary** (`{colors.primary}` — #181d26): The dominant brand color. Used for the primary CTA background, h1/h2 display type, and the `{component.surface-dark}` band. Not "blue, then black" — black IS the primary throughout the marketing system.
+- **Primary Active** (`{colors.primary-active}` — #0d1218): The press state on primary buttons.
+
+### Surface
+- **Canvas** (`{colors.canvas}` — #ffffff): The default page surface; the floor of every editorial body.
+- **Surface Soft** (`{colors.surface-soft}` — #f8fafc): Tabbed feature cards and the featured pricing tier.
+- **Surface Strong** (`{colors.surface-strong}` — #e0e2e6): The light gray "Start building with Airtable" CTA banner near the footer.
+- **Surface Dark** (`{colors.surface-dark}` — #181d26): The dark navy CTA cards used mid-page (for example "The path to 10× every person in your organization").
+- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1d1f25): The articles-page hero base behind the rainbow-stripe overlay.
+- **Hairline** (`{colors.hairline}` — #dddddd): The 1px border tone for input outlines, table dividers, secondary-button outlines.
+
+### Text
+- **Ink** (`{colors.ink}` — #181d26): The strongest text — h1/h2 display type and primary button text-on-light. Same hex as `{colors.primary}` because they are the same role expressed at type and button layers.
+- **Body** (`{colors.body}` — #333840): The default running-text color.
+- **Muted** (`{colors.muted}` — #41454d): Footer links, breadcrumbs, captions.
+- **Border Strong** (`{colors.border-strong}` — #9297a0): The 1px outline color on disabled secondary buttons.
+- **On Primary / On Dark** (`{colors.on-primary}` — #ffffff): The text color on primary buttons and dark surfaces.
+
+### Signature Card Surfaces
+These are the colors that carry Airtable's brand voltage. They appear as full-bleed, full-card surfaces — never as accents on a small element.
+- **Coral** (`{colors.signature-coral}` — #aa2d00): The largest signature card on the homepage ("Production apps in prototype speed"). Full-bleed dark coral with white type.
+- **Forest** (`{colors.signature-forest}` — #0a2e0e): A deep-green signature card used in the homepage demo-grid cluster.
+- **Cream** (`{colors.signature-cream}` — #f5e9d4): The cream callout band ("The path to 10× every person in your organization") — a soft beige surface holding dark type and product UI fragments.
+- **Peach** (`{colors.signature-peach}` — #fcab79), **Mint** (`{colors.signature-mint}` — #a8d8c4), **Yellow** (`{colors.signature-yellow}` — #f4d35e), **Mustard** (`{colors.signature-mustard}` — #d9a441): Demo-card surfaces that carry small product UI fragments inside the multi-card grid sections.
+
+### Semantic
+- **Link** (`{colors.link}` — #1b61c9): Inline body links and anchor text. Darker on press to `{colors.link-active}` (#1a3866). Despite the `--theme_button-background-primary` CSS-variable name, this color is **not** the primary button color — it is the link color.
+- **Info** (`{colors.info}` — #254fad) and **Info Border** (`{colors.info-border}` — #458fff): Inline info badges and focused-input outline.
+- **Success** (`{colors.success}` — #006400) and **Success Border** (`{colors.success-border}` — #39bf45): Confirmation states.
+
+## Typography
+
+### Font Family
+The system runs **Haas / Haas Groot Disp** (Airtable's licensed display + text type). Haas Groot Disp covers display sizes (h1 / h2); Haas Grotesk covers everything 24px and below. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`.
+
+The pricing surface runs a separate **Inter Display** stack at mid-weights (475 / 575) — a deliberate sub-system signaling commercial precision.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-xl}` | 48px | 500 | 1.1 | 0 | Articles page h2 — second-tier editorial headline |
+| `{typography.display-lg}` | 40px | 400 | 1.2 | 0 | Homepage h1 hero |
+| `{typography.display-md}` | 32px | 400 | 1.2 | 0 | Platform-page h2 — feature-section headlines |
+| `{typography.title-lg}` | 24px | 400 | 1.35 | 0.12px | Section titles |
+| `{typography.title-md}` | 20px | 400 | 1.5 | 0 | Sub-section titles in tabbed feature cards |
+| `{typography.title-sm}` | 18px | 500 | 1.4 | 0 | Article-card titles |
+| `{typography.label-md}` | 16px | 500 | 1.4 | 0 | Demo-card titles, list labels |
+| `{typography.button}` | 16px | 500 | 1.4 | 0 | Standard CTA button labels |
+| `{typography.body-md}` | 14px | 400 | 1.25 | 0 | Body copy, footer links, top-nav items |
+| `{typography.caption}` | 14px | 500 | 1.35 | 0.16px | Light captions and meta text |
+| `{typography.legal}` | 13.12px | 600 | 1.2 | 0 | Cookie/legal CTA buttons |
+| `{typography.pricing-display}` | 44.8px | 475 | 1.1 | 0 | Pricing-page h1 |
+| `{typography.pricing-section}` | 28px | 475 | 1.2 | 0 | Pricing-page section heads |
+| `{typography.pricing-card-title}` | 20px | 475 | 1.3 | 0 | Pricing tier card plan name |
+
+### Principles
+The Haas system prefers weight 400 for display sizes — a 40px h1 is **not** bold. Visual emphasis is delegated to size, color contrast, and the signature surface cards. Where the system does want weight, it pivots to 500 (sub-titles, buttons, article titles), never 600 or 700 in the editorial body. The only true bold (600) lives in `{typography.legal}` — a sign that boldness is reserved for terms-of-service surfaces, not marketing.
+
+The pricing-page sub-system uses Inter Display at `font-weight: 475` — a custom mid-weight between regular (400) and medium (500), shipped as a variable font.
+
+### Note on Font Substitutes
+If Haas Groot Disp and Haas Grotesk are unavailable, **Inter Display** (variable) is the closest open-source substitute for both — adjust line-height down by ~5% to match Haas's tighter cap-height. For the pricing sub-system, use Inter Display directly. On macOS / iOS, **system-ui** is sufficient; on Windows, the chain falls through to Segoe UI, which is a usable but slightly cooler substitute.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 4px (all spacing snaps to 4-multiples).
+- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
+- **Section padding (vertical):** `{spacing.section}` (96px) is the universal vertical rhythm constant — every major editorial band on every page uses 96px top + 96px bottom internal padding.
+- **Card internal padding:** `{spacing.xl}` (32px) for tabbed feature cards and pricing tier cards; `{spacing.xxl}` (48px) inside signature coral / forest / dark cards; `{spacing.lg}` (24px) for cream callouts and demo-grid cards.
+- **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside denser logo strips and footer column gutters.
+
+### Grid & Container
+- **Max content width:** ~1280px centered, with `{spacing.xxl}` (48px) horizontal breathing room.
+- **Editorial body:** Single 8/12-column at large breakpoints, collapsing to single-column on mobile.
+- **Demo-card grids:** 3 or 4 columns at desktop, 2 at tablet, 1 at mobile. Card sizes are deliberately uneven within the grid to dodge a uniform "spec sheet" feel.
+- **Logo strip:** 6 monochrome partner logos in a single row at desktop; wraps to 3-up on mobile.
+
+### Whitespace Philosophy
+Airtable uses whitespace as the dominant atmospheric tool. Hero sections sit in 96px+ of pure whitespace above and below the headline + sub-headline pair, with no decoration in that whitespace. The hero is intentionally calm — there is no gradient, no aurora, no atmospheric mesh behind the type. The system trusts whitespace alone to do the framing.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat | No shadow, no border | Body sections, top nav, footer |
+| Soft hairline | 1px `{colors.hairline}` border | Inputs, sub-nav rails, comparison-table dividers, secondary buttons |
+| Button rest | Soft drop with subtle blue-tinted glow at low alpha | Primary CTA buttons (the blue tint is a holdover from the link color and reads as a faint accent under the dark button) |
+| Button focus | Outer 2px blue ring at higher alpha | Keyboard focus state on primary buttons |
+| Card flat | No shadow; relies on color contrast against the surface band | Signature coral / forest / dark cards, cream callouts, demo-grid cards |
+
+The elevation philosophy is **color-block first, shadow second**. Shadows are minimal; depth is delegated to the contrast between white canvas and signature surface cards. There is no soft-glow / atmospheric-shadow / heavy-elevation language anywhere in the marketing system.
+
+### Decorative Depth
+- **Vertical rainbow stripes** appear on the articles hero only — multi-color vertical bands sitting on `{colors.surface-dark-elevated}`. This is a single-page treatment, not a system-wide signature.
+- **Photography-as-depth** in the demo-card grid: every card carries a real product UI screenshot or mockup, contributing depth through legible artifact density rather than decorative effects.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.xs}` | 2px | Cookie-consent and legal CTA buttons — system-required surfaces |
+| `{rounded.sm}` | 6px | Text inputs, small inline buttons |
+| `{rounded.md}` | 10px | Secondary content cards, article cards, cream callouts |
+| `{rounded.lg}` | 12px | Primary CTA buttons, signature surface cards, tabbed feature cards |
+| `{rounded.pill}` | 9999px | Pricing-page CTA buttons (sub-system only) |
+| `{rounded.full}` | 9999px / 50% | Circular icon buttons, avatar surfaces |
+
+### Photography Geometry
+Product UI screenshots inside demo-card grids retain native aspect ratios (typically 4:3 or 16:10) and crop into `{rounded.md}` containers. Hero illustrations bleed full-width with no rounding. Article-card thumbnails use 16:9 with `{rounded.md}` corners. Avatars in testimonials use `{rounded.full}` (perfect circles). Pricing comparison table images stay rectangular with no rounding.
+
+## Components
+
+> **No hover states documented.** Per the global no-hover policy (Step 6), every component spec below documents only Default and Active/Pressed states. Variants live as separate entries in the `components:` front matter.
+
+**`top-nav`** — A 64px-tall white bar pinned to the top of every page. Airtable wordmark sits at left; primary horizontal menu (Platform, Solutions, Resources, Enterprise, Pricing) sits center-left in `{typography.body-md}`; the right cluster carries a "Book Demo" outline link, "Sign up for free" `{component.button-primary}`, and "Log In" text link. The nav stays light on every page — Airtable does not invert the nav over dark sections.
+
+### Buttons
+
+**`button-primary`** — The signature primary CTA. Background `{colors.primary}` (near-black), text `{colors.on-primary}`, type `{typography.button}`, padding 16px × 24px, rounded `{rounded.lg}` (12px). This is the "Get started for free" / "Sign up for free" button visible on every hero. It reads as confident and final — not decorative — which is why the system uses it sparingly (one per viewport).
+- Active state: `button-primary-active` darkens to `{colors.primary-active}` (#0d1218).
+
+**`button-secondary`** — White outline button (e.g. "Book demo"). Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.lg}` (12px), 1px hairline outline. Sits next to `{component.button-primary}` as the "less-committed" choice.
+
+**`button-secondary-on-dark`** — Same shape as `{component.button-secondary}` but used on signature coral / forest / dark surfaces. Background `{colors.canvas}`, text `{colors.ink}` — the white button stays white over dark surfaces because the system never inverts to a translucent on-dark style on the marketing site.
+
+**`button-pricing-pill`** — The pricing-page CTA family. Background `{colors.canvas}`, text `{colors.pricing-ink}`, rounded `{rounded.pill}` (9999px), padding 12px × 24px. The only place pill-shape appears in the marketing system. Treat it as part of the pricing sub-system signaling.
+
+**`button-legal`** — Cookie-consent and legal-banner CTAs. Background `{colors.link}`, text `{colors.on-primary}`, type `{typography.legal}` (13.12px / 600), rounded `{rounded.xs}` (2px), padding 12px × 10px. The 2px corner radius and 600 weight signal "this is a required system surface," not a designed brand surface.
+
+**`button-icon-circular`** — 40px × 40px circular button with `{colors.canvas}` background, hairline border, and `{colors.ink}` icon. Used for carousel controls, "share", and "back" affordances.
+
+**`text-link`** — Inline body links in `{colors.link}` (#1b61c9, the actual link blue). No underline by default. Type inherits `{typography.body-md}`.
+
+### Cards & Containers
+
+**`hero-band`** — The full-page-width white-canvas hero. No surface card, no border, no shadow, no atmospheric gradient — just the headline, sub-headline, and primary + secondary button pair sitting in 96px of whitespace. Vertical padding `{spacing.section}` (96px).
+
+**`signature-coral-card`** — The large full-bleed coral card on the homepage ("Production apps in prototype speed"). Background `{colors.signature-coral}` (#aa2d00, a dark coral / oxide red), text `{colors.on-primary}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-md}`, supporting copy in `{typography.body-md}`, and `{component.button-secondary-on-dark}` as the CTA.
+
+**`signature-forest-card`** — A deep green signature card (`{colors.signature-forest}` — #0a2e0e) used as a demo-grid sibling to the coral card on the homepage.
+
+**`hero-card-dark`** — The dark navy mid-page CTA card (e.g. "The path to 10× every person in your organization"). Background `{colors.surface-dark}` (#181d26), text `{colors.on-dark}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xxl}` (48px). The same color as `{colors.primary}` because the system uses ink as both type color and signature dark surface.
+
+**`feature-card-tabbed`** — Light-cream cards (e.g. the "Coke / Pelosi / Conde Nast / Time Inc" tabbed feature card on the homepage). Background `{colors.surface-soft}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Left rail carries vertically-stacked tab labels in `{typography.title-md}`; right pane shows the active tab's content (illustration + body copy + small CTA).
+
+**`cream-callout-card`** — Beige callout cards (`{colors.signature-cream}`). Rounded `{rounded.md}` (10px), internal padding `{spacing.lg}` (24px). Carry product UI fragments or stat callouts — softer than the dark/coral signature cards but still a deliberate brand surface.
+
+**`demo-grid-card`** — Used in multi-card grids that punctuate every page. Background `{colors.canvas}` or one of the demo-grid surfaces (`{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-yellow}`, `{colors.signature-mustard}`), rounded `{rounded.md}` (10px), internal padding `{spacing.md}` (16px). Each card frames a product UI fragment. Card heights vary deliberately to dodge a uniform "spec sheet" feel.
+
+**`logo-strip`** — Horizontal monochrome partner-logo row (HBO, Netflix, Amazon, Time, Conde Nast). Logos render in `{colors.muted}`, surface is `{colors.canvas}`, vertical padding `{spacing.xl}` (32px). 6 logos at desktop, 3 at mobile.
+
+**`article-card`** — The trending-stories grid on the articles page. Background `{colors.canvas}`, rounded `{rounded.md}` (10px), internal padding `{spacing.md}` (16px). Each card carries a colorful illustrated thumbnail (16:9), a small uppercase category tag, an `{typography.title-sm}` title, and a meta line. 3-up at desktop.
+
+**`topic-filter-rail`** — The left rail on the articles page. 240px wide, `{colors.canvas}` background, `{typography.body-md}`, vertically grouped category headings ("Marketing", "Product", "Project management", "Operations") with sub-bullets. Active item carries a small numeric count badge.
+
+### Inputs & Forms
+
+**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.sm}` (6px), padding 12px × 16px, height 44px. 1px hairline border in `{colors.hairline}`.
+
+**`text-input-focus`** — Focus state. Border thickens or recolors to `{colors.info-border}`.
+
+### Pricing Sub-System
+
+**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}`, text `{colors.pricing-ink}`, type `{typography.pricing-card-title}` for the plan name, rounded `{rounded.md}` (10px), internal padding `{spacing.xl}` (32px). Carries the plan name, a price block in `{typography.pricing-display}` (44.8px / 475), feature checklist, and a `{component.button-pricing-pill}` at the bottom.
+
+**`pricing-tier-card-featured`** — The featured tier (typically "Team" or "Business"). Background shifts to `{colors.surface-soft}`. No accent border, no badge — the background tone shift is the only signal.
+
+**`pricing-comparison-row`** — Each row of the long comparison table at the bottom of the pricing page. Labels in the left column; checkmarks or values across 4 plan columns. 12px vertical padding per row, hairline divider between rows.
+
+### Navigation Variants
+
+**`footer`** — Light surface (`{colors.canvas}`), 6-column link list at desktop covering Platform / Solutions / Resources / Learn / Company sub-trees. Vertical padding `{spacing.section}` divided across upper link block and lower legal row. Type `{typography.body-md}`.
+
+**`cta-band-light`** — The light gray "Start building with Airtable" CTA strip near the footer. Background `{colors.surface-strong}` (#e0e2e6), text `{colors.ink}`, rounded `{rounded.lg}` (12px), padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-md}` and a `{component.button-primary}`.
+
+### Signature Components
+
+**Articles Vertical Rainbow Stripe Hero** — The articles-page hero treatment. Multi-color vertical bands at varying widths sitting on `{colors.surface-dark-elevated}`. The h1 + sub-head + CTA cluster sits center-left on top of the stripes. This is a single-page hero treatment, not a system-wide signature — do not promote it to a multi-page pattern.
+
+## Do's and Don'ts
+
+### Do
+- Keep `{component.button-primary}` near-black. The brand's primary CTA is `{colors.primary}`, not the link blue. Mixing them up turns a confident hero into a confused one.
+- Reserve `{component.button-primary}` for one primary action per viewport. The system is designed for scarcity at the brand-action layer.
+- Use `{component.button-secondary}` (white with hairline outline) as the natural pair with `{component.button-primary}`. The two together form Airtable's signature button row.
+- Trust whitespace as the hero atmosphere. Hero bands are intentionally calm — no gradient, no mesh, no atmospheric backdrop. Going against this reads as off-brand.
+- Use `{component.signature-coral-card}`, `{component.signature-forest-card}`, and `{component.hero-card-dark}` to break editorial monotony. These are the brand's voltage moments.
+- Keep `{component.demo-grid-card}` heights uneven within a grid. Uniform heights feel like a spec sheet.
+- Treat the pricing surface as its own dialect: keep `{typography.pricing-display}`, `{typography.pricing-card-title}`, and `{component.button-pricing-pill}` together. Mixing them with Haas Grotesk button type breaks the sub-system's voice.
+- Anchor every editorial band with `{spacing.section}` (96px) vertical padding.
+
+### Don't
+- Don't make `{colors.link}` (#1b61c9) the primary button color. It is the link color. The primary button is `{colors.primary}` (#181d26, near-black). Treating link-blue as the brand action is the most common mistake when reading Airtable's CSS variables.
+- Don't add a gradient backdrop to the hero. Airtable's hero is white, full stop. Mesh, aurora, spotlight gradients all read as "another SaaS template" — not Airtable.
+- Don't bold display-weight type. `{typography.display-xl}` and `{typography.display-lg}` are intentionally weight 400 / 500 — going to 700 reads as marketing-page-template.
+- Don't use `{rounded.pill}` outside the pricing surface. It's a sub-system signal, not a general radius option.
+- Don't repeat the same surface mode in two consecutive bands. The editorial pacing depends on rhythm: white → signature card → white → cream → dark → white. Two whites in a row read as a typography blog.
+- Don't add hover state styling beyond what the system already encodes. The system documents Default and Active/Pressed only.
+- Don't introduce additional accent colors beyond the documented signature card palette. The system's voltage already uses coral, forest, dark navy, cream, peach, mint, yellow, and mustard.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 768px | Single-column body; top nav collapses to hamburger; demo-grid drops to 1-up; signature cards stay full-bleed; logo strip wraps to 2 rows; footer collapses to single-column |
+| Tablet | 768–1024px | 2-up demo-grid; top nav stays horizontal but tightens; cream-callout cards stack 2-up; pricing comparison table becomes horizontally scrollable |
+| Desktop | 1024–1440px | 3-up demo-grid (and 4-up for tighter content); full top-nav with all menu items visible; pricing tier cards render 4-across |
+| Wide | > 1440px | Same as Desktop with more outer breathing room; max content width caps at ~1280px and the page adds outer margin rather than scaling type up |
+
+### Touch Targets
+- `{component.button-primary}` and siblings render at 48 × 48px minimum (16px vertical padding + 16px line-height) — comfortably above WCAG AAA's 44 × 44.
+- `{component.button-icon-circular}` is exactly 40 × 40px — slightly under WCAG's recommended 44, but the centered icon and dot-radius compensate visually.
+- `{component.text-input}` height is 44px.
+
+### Collapsing Strategy
+- Top nav collapses to a hamburger at < 768px; the menu opens as a full-screen sheet rather than a dropdown.
+- Card grids reduce columns rather than scaling cards down.
+- The `{component.feature-card-tabbed}` re-stacks the tab rail above the content pane on mobile.
+- The pricing comparison table converts to horizontally-scrollable swipe at < 1024px; the four plan headers stay visible while body rows scroll.
+
+### Image Behavior
+- Demo-card UI screenshots crop to fit their container rather than scaling up.
+- Hero illustrations bleed full-width on mobile, losing horizontal margin.
+- Signature card images (inside coral / forest / dark cards) compress to their card width without cropping.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time. Reference its YAML key directly (`{component.button-primary}`, `{component.signature-coral-card}`).
+2. When adding a new component, decide first which sub-system it belongs to: the main editorial system (Haas, `{rounded.lg}`/`{rounded.md}`) or the pricing sub-system (Inter Display, `{rounded.pill}`).
+3. Variants of an existing component (`-active`, `-disabled`, `-focus`) live as separate entries in `components:` — never as nested state objects.
+4. Use `{token.refs}` everywhere prose mentions a color, a radius, a typography role, or a spacing value. Hex codes appear at most once next to the reference.
+5. Never document hover. The system documents Default and Active/Pressed states only.
+6. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.
+7. When in doubt about emphasis: bigger type before bolder type, signature surface card before solid accent.
+
+## Known Gaps
+
+- The exact hex values of pastel demo-grid surfaces (`{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-yellow}`, `{colors.signature-mustard}`) are inferred from screenshot pixel sampling. Some product launches may swap these surfaces seasonally.
+- Hover behavior across all components is not documented (per global no-hover policy).
+- Animation and transition timings are not in scope.
+- Form validation states beyond `text-input-focus` are not extracted — error and success states for inputs would need a dedicated form page to confirm.
+- The pricing comparison table's checkmark glyph and column-divider widths are described structurally but not formalized as tokens.
+- The CSS variable `--theme_button-background-primary: #1b61c9` exists at `:root` but is not used as the primary CTA color anywhere on the marketing site. It maps to the link/info color role instead. Documented here so future extractions don't re-trip over the misleading variable name.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index adbf68404..91746ce18 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-config-provider :locale="locale">
+  <a-config-provider :locale="locale" :theme="antdTheme">
     <div id="app">
       <div id="google_translate_element" class="google-translate-element" aria-hidden="true"></div>
       <router-view v-if="showChild" />
@@ -35,6 +35,39 @@ export default {
       startupDisplayMode: 'page',
       startupPollTimer: null,
       locale: zhCN,
+      antdTheme: {
+        token: {
+          colorPrimary: '#3ecf8e',
+          colorLink: '#00c573',
+          colorSuccess: '#22c55e',
+          colorWarning: '#f59e0b',
+          colorError: '#ef4444',
+          borderRadius: 8,
+          borderRadiusSM: 6,
+          borderRadiusLG: 12,
+          fontSize: 14,
+          colorBgContainer: '#ffffff',
+          colorBorder: '#dfdfdf',
+          colorText: '#171717',
+          colorTextSecondary: '#707070',
+          controlHeight: 32,
+          controlHeightSM: 28
+        },
+        components: {
+          Table: {
+            headerBg: '#fafafa',
+            headerColor: '#707070',
+            rowHoverBg: '#f0f0f0',
+            borderColor: '#efefef',
+            cellPaddingBlockSM: 8,
+            cellPaddingInlineSM: 12
+          },
+          Button: {
+            primaryShadow: 'none',
+            defaultShadow: 'none'
+          }
+        }
+      },
       position: {
         ele: null,
         canResize: false
diff --git a/frontend/src/assets/logo-clouddm.svg b/frontend/src/assets/logo-clouddm.svg
new file mode 100644
index 000000000..e60581be4
--- /dev/null
+++ b/frontend/src/assets/logo-clouddm.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 5897 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M5718.945185 18.962963l13.425778 0.455111v-0.417185H5897.481481V1024h-165.110518V371.332741l-315.828148 514.085926h-100.010667l-315.828148-514.085926V1024H4835.555556V19.000889h165.148444v0.417185l13.425778-0.455111 352.426666 604.027259L5718.945185 18.962963zM491.045926 18.962963c132.342519 0 204.363852 32.085333 223.307852 41.965037l6.238815 3.223704-33.640297 113.493333-9.102222-4.399407c-49.929481-24.082963-114.801778-37.394963-182.689185-37.394963-217.088 0-351.914667 142.336-351.914667 371.427555 0 226.607407 129.517037 361.908148 346.434371 361.908148 70.106074 0 143.265185-14.298074 190.881185-37.394963l9.443555-4.570074 29.05126 111.104-6.219852 3.109926C669.544296 963.015111 581.707852 986.074074 465.009778 986.074074 182.518519 986.074074 0 799.744 0 511.412148 0 216.860444 197.328593 18.962963 491.045926 18.962963zM3413.333333 18.962963v944.943407h-124.965926V881.777778C3215.872 950.97363 3132.302222 986.074074 3039.762963 986.074074c-100.920889 0-188.112593-36.370963-259.128889-107.975111-70.883556-71.49037-106.856296-158.53037-106.856296-258.654815 0-100.124444 36.389926-186.993778 108.183703-258.161778 71.831704-71.186963 160.692148-107.254519 264.116149-107.254518 94.151111 0 175.521185 34.190222 242.289777 101.679407V18.962963H3413.333333zM967.111111 37.925926v948.148148h-132.740741V37.925926h132.740741z m1092.133926 246.518518v394.012445c0 101.527704 88.500148 184.206222 197.347556 184.206222 108.809481 0 197.347556-82.678519 197.347555-184.206222V284.444444H2578.962963v679.822223h-125.022815v-43.102815A330.391704 330.391704 0 0 1 2256.592593 986.074074c-177.758815 0-322.37037-137.993481-322.370371-307.617185V284.444444h125.022815zM4336.924444 0C4528.545185 0 4683.851852 151.343407 4683.851852 338.071704V647.964444C4683.851852 834.74963 4528.545185 986.074074 4336.924444 986.074074H3830.518519V0zM1452.088889 265.481481c102.4 0 190.615704 35.726222 262.219852 106.268445 62.558815 61.591704 98.133333 134.902519 106.059852 218.320593H1664.758519c-7.585185-41.908148-27.97037-79.511704-61.212445-111.99526-42.81837-41.870222-94.189037-63.070815-152.651852-63.070815-58.424889 0-109.624889 21.200593-152.082963 63.032889-42.571852 42.040889-64.170667 92.672-64.170666 150.376297 0 57.799111 20.821333 107.52 61.895111 147.721481 40.903111 40.12563 93.051259 60.453926 154.927407 60.453926 59.695407 0 111.274667-20.536889 153.27763-61.022815 33.697185-32.426667 53.892741-70.731852 60.681481-114.119111h57.723259v57.078519h66.294519v-57.078519H1820.444444c-7.604148 83.911111-42.704593 157.392593-104.846222 218.94637C1644.86637 950.518519 1556.233481 986.074074 1452.107852 986.074074c-104.144593 0-192.986074-35.555556-264.135111-105.680593C1116.899556 810.477037 1080.888889 724.992 1080.888889 626.403556c0-98.550519 36.219259-184.263111 107.747555-254.672593C1260.202667 301.226667 1348.835556 265.481481 1452.107852 265.481481z m1596.548741 108.942223c-70.200889 0-129.517037 24.689778-176.412445 73.443555-47.085037 48.96237-70.959407 107.254519-70.959407 173.416297 0 66.085926 24.500148 124.60563 72.779852 173.909333 48.165926 49.246815 106.666667 74.164148 173.947259 74.164148 63.29837 0 120.64237-23.419259 170.533926-69.594074 49.682963-46.042074 74.903704-105.28237 74.903704-176.033185 0-70.997333-23.438222-130.977185-69.613038-178.270815-46.08-47.122963-105.054815-71.035259-175.179851-71.035259z m1288.286814-219.477334h-347.363555v676.143408h347.363555c103.61363 0 187.922963-82.147556 187.922963-183.125334V338.071704c0-100.977778-84.309333-183.125333-187.922963-183.125334zM1355.719111 587.851852c12.762074 0 24.026074 4.778667 33.374815 14.184296 9.386667 9.462519 14.165333 20.783407 14.165333 33.716148 0 12.913778-4.683852 24.064-13.899852 33.204148A46.08 46.08 0 0 1 1355.851852 682.666667c-13.539556 0-24.936296-4.570074-33.905778-13.596445A45.605926 45.605926 0 0 1 1308.444444 635.828148c0-12.951704 4.702815-24.348444 14.032593-33.810963 9.291852-9.40563 20.442074-14.184296 33.242074-14.184296zM4238.222222 360.296296c47.141926 0 85.333333 37.736296 85.333334 84.309334 0 33.242074-19.683556 61.724444-47.99526 75.434666V644.740741h-74.676148v-124.700445C4172.572444 506.311111 4152.888889 477.847704 4152.888889 444.60563c0-46.554074 38.191407-84.309333 85.333333-84.309334z" fill="#222222"/>
+</svg>
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index d926fea53..aa183bd09 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-menu v-model:selectedKeys="currentMenu" mode="horizontal" theme="dark">
+  <a-menu v-model:selectedKeys="currentMenu" mode="horizontal" class="app-shell-menu">
     <!--    <a-menu-item key="ticket" v-if="!isDesktop && includesDM && myCatLog.includes('CAT_RDP_WORKER_ORDER')"><a href="/#/ticket" >{{ $t('gong-dan') }}</a></a-menu-item>-->
     <a-menu-item key="sql" v-if="includesDM && myCatLog.includes('CAT_DM_CONSOLE')">
       <a href="/#/sql">{{ $t('sql-cha-xun') }}</a>
@@ -10,9 +10,6 @@
     <a-menu-item key="ticket" v-if="includesDM && myCatLog.includes('CAT_RDP_WORKER_ORDER') && !isDesktop">
       <a href="/#/ticket">{{ $t('gong-dan') }}</a>
     </a-menu-item>
-    <a-menu-item key="system" class="system-menu-item" v-if="canShowSystemMenu">
-      <a :href="getDefaultSystemPath">{{ $t('pei-zhi') }}</a>
-    </a-menu-item>
   </a-menu>
 </template>
 
@@ -31,24 +28,18 @@ export default {
   },
   computed: {
     ...mapGetters(['includesCC', 'includesDM']),
-    ...mapState(['myCatLog', 'userInfo', 'globalSetting', 'mySystemMenuItems']),
-    ...mapGetters(['isDesktop']),
-    canShowSystemMenu() {
-      return this.mySystemMenuItems.length || !!this.userInfo?.uid || !!this.userInfo?.username;
-    },
-    getDefaultSystemPath() {
-      return '/#/system/profile';
-    }
+    ...mapState(['myCatLog', 'userInfo', 'globalSetting']),
+    ...mapGetters(['isDesktop'])
   },
   methods: {
     handlePath() {
       const path = this.$route.path;
       if (path.indexOf('/system/sql_log') > -1) {
-        this.currentMenu = ['system'];
+        this.currentMenu = [];
       } else if (path.indexOf('/sql') > -1) {
         this.currentMenu = ['sql'];
       } else if (path.indexOf('/system') > -1) {
-        this.currentMenu = ['system'];
+        this.currentMenu = [];
       } else if (path.indexOf('/project') > -1) {
         this.currentMenu = ['project'];
       } else if (path.indexOf('/ticket') > -1) {
@@ -70,14 +61,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-:deep(.ant-menu-horizontal) {
-  display: flex;
-  align-items: center;
-}
-
-:deep(.ant-menu-horizontal > .system-menu-item) {
-  margin-left: auto !important;
-}
-</style>
diff --git a/frontend/src/components/function/addDataSource/DataSourceHeader.vue b/frontend/src/components/function/addDataSource/DataSourceHeader.vue
index 49e0bc2e5..e710e6b0e 100644
--- a/frontend/src/components/function/addDataSource/DataSourceHeader.vue
+++ b/frontend/src/components/function/addDataSource/DataSourceHeader.vue
@@ -59,14 +59,13 @@
         />
       </FormItem>
       <FormItem>
-        <Button :loading="refreshLoading" type="primary" @click="_handleSearch">
+        <Button :loading="refreshLoading" type="primary" ghost @click="_handleSearch">
           {{ $t('cha-xun') }}
         </Button>
       </FormItem>
     </Form>
     <div class="page-header-function">
-      <Button v-if="supportAdd" type="primary" ghost @click="handleShowAddDataSource">
-        <Icon type="md-add" />
+      <Button v-if="supportAdd" type="primary" @click="handleShowAddDataSource">
         {{ $t('xin-zeng-shu-ju-yuan') }}
       </Button>
       <Button type="default" style="margin-left: 6px" @click="_handleSearch" :loading="refreshLoading">
diff --git a/frontend/src/components/function/cluster/ClusterHeader.vue b/frontend/src/components/function/cluster/ClusterHeader.vue
index 82a8c7aaf..1ac6fa616 100644
--- a/frontend/src/components/function/cluster/ClusterHeader.vue
+++ b/frontend/src/components/function/cluster/ClusterHeader.vue
@@ -38,13 +38,13 @@
         </Select>
       </FormItem>
       <FormItem>
-        <Button :loading="refreshLoading" type="primary" @click="_handleSearch(searchType, searchData)">
+        <Button :loading="refreshLoading" type="primary" ghost @click="_handleSearch(searchType, searchData)">
           {{ $t('cha-xun') }}
         </Button>
       </FormItem>
     </Form>
     <div class="page-header-function">
-      <Button v-if="hasManageAuth" type="primary" ghost @click="handleAddCluster">
+      <Button v-if="hasManageAuth" type="primary" @click="handleAddCluster">
         <Icon type="md-add" />
         {{ $t('xin-zeng-ji-qun') }}
       </Button>
diff --git a/frontend/src/components/layout/AppBrandLogo.vue b/frontend/src/components/layout/AppBrandLogo.vue
new file mode 100644
index 000000000..7f0d75254
--- /dev/null
+++ b/frontend/src/components/layout/AppBrandLogo.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="app-brand-logo" :class="{ 'app-brand-logo--compact': compact }">
+    <img :src="logoClouddm" class="app-brand-logo__img" alt="CloudDM" />
+  </div>
+</template>
+
+<script>
+import logoClouddm from '@/assets/logo-clouddm.svg';
+
+export default {
+  name: 'AppBrandLogo',
+  props: {
+    compact: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      logoClouddm
+    };
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.app-brand-logo {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  color: #222222;
+
+  &__img {
+    height: 22px;
+    width: auto;
+    max-width: 130px;
+    display: block;
+    object-fit: contain;
+    object-position: left center;
+  }
+
+  &--compact {
+    color: #222222;
+
+    .app-brand-logo__img {
+      height: 18px;
+      max-width: 110px;
+    }
+  }
+}
+
+[data-theme='dark'] .app-brand-logo {
+  color: #fafafa;
+
+  .app-brand-logo__img {
+    filter: brightness(0) invert(1);
+  }
+}
+</style>
diff --git a/frontend/src/components/layout/AppContentHeader.vue b/frontend/src/components/layout/AppContentHeader.vue
new file mode 100644
index 000000000..4bdb633d4
--- /dev/null
+++ b/frontend/src/components/layout/AppContentHeader.vue
@@ -0,0 +1,80 @@
+<template>
+  <header class="app-content-header">
+    <div class="app-content-header__left">
+      <h1 class="app-content-header__title">{{ pageTitle }}</h1>
+    </div>
+    <div class="app-content-header__right">
+      <a v-if="showSqlLink" href="/#/sql" class="app-content-header__link">
+        <CustomIcon type="icon-v2-SqlLog" size="14px" />
+        <span>{{ $t('sql-cha-xun') }}</span>
+      </a>
+      <AppUserActions compact @check-version="$emit('check-version')" />
+    </div>
+  </header>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex';
+import AppUserActions from '@/components/layout/AppUserActions';
+
+export default {
+  name: 'AppContentHeader',
+  components: { AppUserActions },
+  emits: ['check-version'],
+  computed: {
+    ...mapGetters(['includesDM', 'isDesktop']),
+    ...mapState(['myCatLog', 'mySystemMenuItems', 'sidebarMenu']),
+    showSqlLink() {
+      return this.includesDM && this.myCatLog.includes('CAT_DM_CONSOLE') && this.$route.path.indexOf('/sql') === -1;
+    },
+    pageTitle() {
+      const path = this.$route.path;
+
+      if (path === '/project' || path === '/project/') {
+        return this.$t('nav-ci-cd');
+      }
+      if (path.indexOf('/project') === 0) {
+        return this.$t('nav-ci-cd');
+      }
+      if (path === '/ticket' || path === '/ticket/') {
+        return this.$t('gong-dan');
+      }
+      if (path.indexOf('/ticket') === 0) {
+        return this.$t('gong-dan');
+      }
+      if (path.indexOf('/system/profile') > -1) {
+        return this.$t('ge-ren-zi-liao');
+      }
+      if (path.indexOf('/system/permission') > -1) {
+        return this.$t('my-permissions');
+      }
+      if (path.indexOf('/system/ccdatasource') > -1) {
+        return this.$t('nav-shu-ju-ku-guan-li');
+      }
+      if (path.indexOf('/system/env') > -1) {
+        return this.$t('huan-jing');
+      }
+      if (path.indexOf('/system/management/accounts') > -1 || path.indexOf('/system/account') > -1 || path.indexOf('/system/role') > -1) {
+        return this.$t('nav-zhang-hu');
+      }
+      if (path.indexOf('/system/management/logs') > -1 || path.indexOf('/system/operation_log') > -1 || path.indexOf('/system/sql_log') > -1) {
+        return this.$t('nav-ri-zhi');
+      }
+
+      const parts = path.split('/').filter(Boolean);
+      if (parts[0] === 'system' && parts.length >= 2) {
+        const key = `/${parts[0]}/${parts[1]}`;
+        const menuItem = this.mySystemMenuItems.find((item) => item.key === key);
+        if (menuItem) {
+          return menuItem.label;
+        }
+      }
+      if (parts[0] === 'project') {
+        return this.$t('nav-ci-cd');
+      }
+
+      return this.$t('pei-zhi');
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/layout/AppSidebar.vue b/frontend/src/components/layout/AppSidebar.vue
new file mode 100644
index 000000000..c4c261f1c
--- /dev/null
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -0,0 +1,164 @@
+<template>
+  <aside class="app-sidebar">
+    <div class="app-sidebar-brand" @click="handleGoHome">
+      <AppBrandLogo />
+    </div>
+
+    <nav class="app-sidebar-nav">
+      <div v-if="sidebarMenu.primary.length" class="app-sidebar-section">
+        <a
+          v-for="item in sidebarMenu.primary"
+          :key="item.key"
+          :href="item.href"
+          class="app-sidebar-item"
+          :class="{ 'is-active': activeKey === item.key }"
+        >
+          <CustomIcon :type="item.iconName" size="16px" />
+          <span>{{ item.label }}</span>
+        </a>
+      </div>
+
+      <template v-if="sidebarMenu.groups.length">
+        <div class="app-sidebar-divider" />
+        <div class="app-sidebar-section">
+          <div v-for="groupItem in sidebarMenu.groups" :key="groupItem.key" class="app-sidebar-group">
+            <button
+              type="button"
+              class="app-sidebar-group-toggle"
+              :class="{ 'is-expanded': isGroupExpanded(groupItem.key) }"
+              @click="toggleGroup(groupItem.key)"
+            >
+              <CustomIcon :type="groupItem.iconName" size="16px" />
+              <span class="app-sidebar-group-toggle__label">{{ groupItem.label }}</span>
+              <span class="app-sidebar-group-toggle__chevron" :class="{ 'is-expanded': isGroupExpanded(groupItem.key) }" />
+            </button>
+            <div v-show="isGroupExpanded(groupItem.key)" class="app-sidebar-group-body">
+              <a
+                v-for="child in groupItem.children"
+                :key="child.key"
+                :href="child.href"
+                class="app-sidebar-item app-sidebar-item--depth-1"
+                :class="{ 'is-active': activeKey === child.key }"
+              >
+                <CustomIcon v-if="child.iconName" :type="child.iconName" size="16px" />
+                <span>{{ child.label }}</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div v-if="userInfo.accountType !== 'PRIMARY_ACCOUNT' && includesDM" class="app-sidebar-divider" />
+      <div v-if="userInfo.accountType !== 'PRIMARY_ACCOUNT' && includesDM" class="app-sidebar-section">
+        <div class="app-sidebar-group-title">{{ $t('zhang-hao') }}</div>
+        <a href="/#/system/permission" class="app-sidebar-item" :class="{ 'is-active': activeKey === '/system/permission' }">
+          <CustomIcon type="icon-v2-MyAuth" size="16px" />
+          <span>{{ $t('my-permissions') }}</span>
+        </a>
+      </div>
+    </nav>
+  </aside>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex';
+import AppBrandLogo from '@/components/layout/AppBrandLogo';
+import { findSidebarParentKeys } from '@/utils/buildSidebarMenu';
+
+export default {
+  name: 'AppSidebar',
+  components: { AppBrandLogo },
+  emits: ['check-version'],
+  data() {
+    return {
+      expandedGroups: {}
+    };
+  },
+  computed: {
+    ...mapGetters(['includesDM', 'isDesktop']),
+    ...mapState(['myCatLog', 'userInfo', 'sidebarMenu', 'defaultRedirectUrl']),
+    activeKey() {
+      const path = this.$route.path;
+      if (path.indexOf('/sql') > -1) {
+        return 'sql';
+      }
+      if (path === '/project' || path === '/project/') {
+        return 'project';
+      }
+      if (path.indexOf('/project') > -1) {
+        return 'project';
+      }
+      if (path === '/ticket' || path === '/ticket/') {
+        return 'ticket';
+      }
+      if (path.indexOf('/ticket') > -1) {
+        return 'ticket';
+      }
+      if (path.indexOf('/system/permission') > -1) {
+        return '/system/permission';
+      }
+      if (path.indexOf('/system/management/accounts') > -1 || path.indexOf('/system/account') > -1 || path.indexOf('/system/role') > -1) {
+        return '/system/management/accounts';
+      }
+      if (path.indexOf('/system/management/logs') > -1 || path.indexOf('/system/operation_log') > -1 || path.indexOf('/system/sql_log') > -1) {
+        return '/system/management/logs';
+      }
+      if (path.indexOf('/system/profile') > -1) {
+        return '/system/profile';
+      }
+      if (path.indexOf('/system') > -1) {
+        const parts = path.split('/').filter(Boolean);
+        if (parts.length >= 2) {
+          return `/${parts[0]}/${parts[1]}`;
+        }
+      }
+      return '';
+    }
+  },
+  watch: {
+    activeKey: {
+      handler() {
+        this.syncExpandedGroups();
+      },
+      immediate: true
+    },
+    sidebarMenu: {
+      handler() {
+        this.syncExpandedGroups();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleGoHome() {
+      const target = this.defaultRedirectUrl || '/project';
+      if (this.$route.path !== target) {
+        this.$router.push({ path: target });
+      }
+    },
+    isGroupExpanded(key) {
+      return !!this.expandedGroups[key];
+    },
+    toggleGroup(key) {
+      this.expandedGroups = {
+        ...this.expandedGroups,
+        [key]: !this.isGroupExpanded(key)
+      };
+    },
+    syncExpandedGroups() {
+      if (!this.sidebarMenu || !this.activeKey) {
+        return;
+      }
+      const parentKeys = findSidebarParentKeys(this.sidebarMenu, this.activeKey);
+      if (!parentKeys.length) {
+        return;
+      }
+      const next = { ...this.expandedGroups };
+      parentKeys.forEach((key) => {
+        next[key] = true;
+      });
+      this.expandedGroups = next;
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/layout/AppUserActions.vue b/frontend/src/components/layout/AppUserActions.vue
new file mode 100644
index 000000000..d8175fb33
--- /dev/null
+++ b/frontend/src/components/layout/AppUserActions.vue
@@ -0,0 +1,348 @@
+<template>
+  <div class="app-user-actions" :class="[`app-user-actions--${placement}`, { 'app-user-actions--compact': compact }]">
+    <template v-if="!isDesktop">
+      <Tooltip v-if="placement === 'header'" :content="$t('wen-dang')" transfer placement="bottom">
+        <button type="button" class="header-action-icon" @click="handleGoHelp('document')">
+          <CustomIcon type="icon-v2-ic_document" hoverStyle size="18px" />
+        </button>
+      </Tooltip>
+      <Tooltip v-if="placement === 'header'" :content="$t('lian-xi-wo-men')" transfer placement="bottom">
+        <button type="button" class="header-action-icon" @click="handleGoHelp('contact')">
+          <CustomIcon type="icon-v2-icon_contact" hoverStyle size="18px" />
+        </button>
+      </Tooltip>
+      <a-dropdown v-if="userInfo.menuItems && userInfo.menuItems.includes('/ccsystem/console_job')" :trigger="['click']">
+        <span class="message-icon">
+          <cc-iconfont :size="20" name="message" />
+          <span v-if="messageList.length > 0" class="message-point"></span>
+        </span>
+        <template #overlay>
+          <p class="title">{{ $t('xiao-xi-zhong-xin') }}</p>
+          <div v-for="message in messageList" :key="message.id" class="message-item" @click="handleGoMessageDetail(message.id)">
+            <p>{{ CONSOLE_JOB_NAME[message.label] }}{{ $t('shi-bai') }}</p>
+            <p class="time">{{ message.gmtModified }}</p>
+          </div>
+          <div class="message-footer" @click="handleGoMessage">
+            {{ $t('cha-kan-geng-duo') }}
+          </div>
+        </template>
+      </a-dropdown>
+      <LangSwitcher>
+        <template #trigger>
+          <CustomIcon hover-style type="icon-v2-yuyanqiehuan" size="20px" />
+        </template>
+      </LangSwitcher>
+      <div v-if="!compact && placement === 'header'" class="domain" translate="no">{{ userInfo.username }}</div>
+      <div v-click-out-hide="hideMenu" class="avatar" @click="showMenu = !showMenu">
+        <img :alt="$t('useravatar')" src="../../assets/head.png" />
+      </div>
+      <div v-if="placement === 'sidebar' && !compact" class="sidebar-user-label" translate="no">{{ userInfo.username }}</div>
+      <div v-show="showMenu" class="menu" :class="{ 'menu--sidebar': placement === 'sidebar' }">
+        <div class="one">
+          <div class="avatar">
+            <img :alt="$t('useravatar')" src="../../assets/head.png" width="28" height="28" />
+          </div>
+          <div class="domain">
+            <div>{{ userInfo.username }}</div>
+            <div v-if="!isInternalUser" class="provider-wrap">{{ $t('lai-yuan') }}: {{ userInfo.bindType }}</div>
+            <div class="uid-wrap" @click.stop="handleCopyApplyCode(userInfo.uid)">
+              <span>{{ `UID: ${userInfo.uid}` }}</span>
+              <CustomIcon type="icon-v2-CopyOutline" size="12px" hoverStyle leftMargin />
+            </div>
+          </div>
+        </div>
+        <div class="two">
+          <div v-if="userInfo.account">{{ $t('zhang-hao') }}: {{ userInfo.account }}</div>
+          <div v-if="!isInternalUser">{{ $t('lai-yuan') }}: {{ userInfo.bindType }}</div>
+          <div v-if="userInfo.phone">{{ $t('dian-hua') }}: {{ userInfo.phone }}</div>
+          <div>{{ $t('you-xiang') }}: {{ userInfo.email }}</div>
+        </div>
+        <a v-if="isOidcLogout" class="four block" href="logout" @click="closeWebSocket">
+          {{ $t('tui-chu-zhang-hao') }}
+        </a>
+        <a v-if="!isOidcLogout" class="four block" @click="logout">
+          {{ $t('tui-chu-zhang-hao') }}
+        </a>
+      </div>
+    </template>
+    <template v-else>
+      <div class="desktop-actions">
+        <Tooltip :content="$t('wen-dang')" transfer placement="bottom">
+          <button type="button" class="header-action-icon" @click="handleGoHelp('document')">
+            <CustomIcon type="icon-v2-ic_document" hoverStyle size="18px" />
+          </button>
+        </Tooltip>
+        <Tooltip :content="$t('lian-xi-wo-men')" transfer placement="bottom">
+          <button type="button" class="header-action-icon" @click="handleGoHelp('contact')">
+            <CustomIcon type="icon-v2-icon_contact" hoverStyle size="18px" />
+          </button>
+        </Tooltip>
+        <a-tooltip trigger="hover">
+          <cc-iconfont :size="18" name="help" />
+          <template #title>
+            <div style="display: flex; flex-direction: column; align-items: center">
+              <div style="margin-bottom: 5px">{{ $t('jia-ru-wei-xin-jiao-liu-qun') }}</div>
+              <img src="../../assets/wechat-clouddm.png" :width="100" :height="100" />
+            </div>
+          </template>
+        </a-tooltip>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex';
+import LangSwitcher from '@/components/LangSwitcher';
+import { CONSOLE_JOB_NAME, LOGIN_TYPE } from '@/const';
+import { handleCopy } from '@/utils/clipboard';
+import { UPDATE_USERINFO } from '@/store/mutationTypes';
+import { hasWebSocketInstance, webSocketClose } from '@/services/socket';
+
+export default {
+  name: 'AppUserActions',
+  components: { LangSwitcher },
+  props: {
+    placement: {
+      type: String,
+      default: 'header'
+    },
+    compact: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['check-version'],
+  data() {
+    return {
+      showMenu: false,
+      messageList: [],
+      CONSOLE_JOB_NAME
+    };
+  },
+  computed: {
+    ...mapGetters(['isDesktop', 'isInternalUser']),
+    ...mapState(['userInfo']),
+    isOidcLogout() {
+      return this.userInfo.bindType === LOGIN_TYPE.OIDC && this.userInfo.loginType === LOGIN_TYPE.OIDC;
+    }
+  },
+  watch: {
+    userInfo(val) {
+      if (val.showMessage) {
+        this.listLastFiveFailedJob();
+      }
+    }
+  },
+  methods: {
+    hideMenu() {
+      this.showMenu = false;
+    },
+    closeWebSocket() {
+      if (hasWebSocketInstance()) {
+        webSocketClose();
+      }
+    },
+    async logout() {
+      const res = await this.$services.logout();
+
+      if (res.success) {
+        this.closeWebSocket();
+        await this.$store.commit(UPDATE_USERINFO);
+        await this.$router.push({ name: 'Login' });
+      }
+    },
+    handleGoHelp(data) {
+      if (data === 'document') {
+        let url = `${this.$store.state.dmDocUrlPrefix}/intro/product_intro`;
+        if (this.isDesktop) {
+          url = `${this.$store.state.dmDocUrlPrefix}/dmp-doc/releaseinfo/desktop_latest`;
+        }
+        window.open(url);
+      } else if (data === 'contact') {
+        window.open(this.$store.state.contactUsUrl);
+      }
+    },
+    handleGoMessage() {
+      this.$router.push({ path: '/system/info_center' }).catch(() => {});
+    },
+    handleGoMessageDetail(id) {
+      this.$router.push({ path: `/system/console_job/${id}` });
+    },
+    handleCopyApplyCode(data) {
+      handleCopy(data);
+      this.$Message.success(this.$t('fu-zhi-cheng-gong'));
+    },
+    async listLastFiveFailedJob() {
+      const res = await this.$services.dmConsoleJobListLastFiveFailedJob();
+
+      if (res.success && res.data.length > 0) {
+        this.messageList = res.data;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.app-user-actions {
+  display: flex;
+  align-items: center;
+  position: relative;
+  gap: 12px;
+
+  &--header {
+    flex-shrink: 0;
+  }
+
+  &--sidebar {
+    width: 100%;
+    padding: 12px 12px 16px;
+    gap: 10px;
+    border-top: 1px solid var(--sidebar-border);
+    cursor: pointer;
+
+    .avatar {
+      flex-shrink: 0;
+    }
+
+    .sidebar-user-label {
+      flex: 1;
+      min-width: 0;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--text-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .menu {
+      left: 12px;
+      right: auto;
+      bottom: calc(100% + 8px);
+      top: auto;
+    }
+  }
+
+  &--compact {
+    gap: 8px;
+  }
+
+  .domain {
+    font-size: 13px;
+    color: var(--text-secondary);
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .avatar {
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--border-primary);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .header-action-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition:
+      background-color 0.12s ease,
+      color 0.12s ease;
+
+    &:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+  }
+
+  .message-icon {
+    position: relative;
+    cursor: pointer;
+    color: var(--text-secondary);
+
+    .message-point {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--error-color);
+    }
+  }
+
+  .menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    width: 280px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-primary);
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    z-index: 1000;
+    overflow: hidden;
+
+    .one {
+      display: flex;
+      padding: 16px;
+      gap: 12px;
+      border-bottom: 1px solid var(--border-secondary);
+
+      .domain {
+        max-width: none;
+      }
+
+      .provider-wrap {
+        color: var(--text-tertiary);
+        font-size: 12px;
+        margin-top: 2px;
+      }
+    }
+
+    .two {
+      padding: 16px 20px;
+      line-height: 22px;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .four {
+      height: 44px;
+      line-height: 44px;
+      text-align: center;
+      background: var(--bg-tertiary);
+      color: var(--error-color);
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+    }
+  }
+
+  .desktop-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+}
+</style>
diff --git a/frontend/src/components/ui/DmButton.vue b/frontend/src/components/ui/DmButton.vue
new file mode 100644
index 000000000..2e81fdfe2
--- /dev/null
+++ b/frontend/src/components/ui/DmButton.vue
@@ -0,0 +1,81 @@
+<template>
+  <a-button
+    class="dm-button"
+    :type="antdType"
+    :ghost="isGhost"
+    :danger="isDanger"
+    :loading="loading"
+    :disabled="disabled"
+    :size="antdSize"
+    @click="handleClick"
+  >
+    <CustomIcon v-if="icon && !$slots.default" :type="iconType" size="14px" />
+    <slot />
+  </a-button>
+</template>
+
+<script>
+const ICON_MAP = {
+  'md-add': 'icon-v2-add',
+  'md-refresh': 'icon-v2-Refresh'
+};
+
+export default {
+  name: 'DmButton',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    ghost: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    size: String,
+    icon: String
+  },
+  emits: ['click'],
+  computed: {
+    isGhost() {
+      return this.ghost || this.type === 'ghost' || this.type === 'dashed';
+    },
+    isDanger() {
+      return this.type === 'error';
+    },
+    antdType() {
+      if (this.type === 'primary' || this.type === 'ghost') {
+        return 'primary';
+      }
+      if (this.type === 'text') {
+        return 'link';
+      }
+      if (this.type === 'error') {
+        return 'primary';
+      }
+      return 'default';
+    },
+    antdSize() {
+      if (this.size === 'small') {
+        return 'small';
+      }
+      if (this.size === 'large') {
+        return 'large';
+      }
+      return 'middle';
+    },
+    iconType() {
+      if (!this.icon) {
+        return '';
+      }
+      if (this.icon.startsWith('icon-')) {
+        return this.icon;
+      }
+      return ICON_MAP[this.icon] || 'icon-v2-add';
+    }
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/ui/DmInput.vue b/frontend/src/components/ui/DmInput.vue
new file mode 100644
index 000000000..5acb3e8ff
--- /dev/null
+++ b/frontend/src/components/ui/DmInput.vue
@@ -0,0 +1,59 @@
+<template>
+  <a-input class="dm-input" v-bind="inputAttrs" :value="innerValue" :allow-clear="clearable" @update:value="handleInput" @pressEnter="handleEnter" />
+</template>
+
+<script>
+export default {
+  name: 'DmInput',
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: undefined
+    },
+    value: {
+      type: [String, Number],
+      default: undefined
+    },
+    clearable: Boolean,
+    type: {
+      type: String,
+      default: 'text'
+    }
+  },
+  emits: ['update:modelValue', 'update:value', 'input', 'on-enter', 'on-clear'],
+  computed: {
+    innerValue() {
+      if (this.modelValue !== undefined && this.modelValue !== null) {
+        return this.modelValue;
+      }
+      if (this.value !== undefined && this.value !== null) {
+        return this.value;
+      }
+      return '';
+    },
+    inputAttrs() {
+      const attrs = { ...this.$attrs };
+      if (this.type === 'textarea') {
+        attrs.type = 'text';
+      } else if (this.type) {
+        attrs.type = this.type;
+      }
+      return attrs;
+    }
+  },
+  methods: {
+    handleInput(val) {
+      this.$emit('update:modelValue', val);
+      this.$emit('update:value', val);
+      this.$emit('input', val);
+      if (this.clearable && (val === '' || val === null || val === undefined)) {
+        this.$emit('on-clear');
+      }
+    },
+    handleEnter() {
+      this.$emit('on-enter');
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/ui/DmPage.vue b/frontend/src/components/ui/DmPage.vue
new file mode 100644
index 000000000..ee05d31b8
--- /dev/null
+++ b/frontend/src/components/ui/DmPage.vue
@@ -0,0 +1,89 @@
+<template>
+  <a-pagination
+    class="list-page-pagination"
+    :current="currentPage"
+    :page-size="currentPageSize"
+    :total="total"
+    :show-size-changer="showSizer"
+    :show-quick-jumper="showElevator"
+    :show-total="showTotalFn"
+    :page-size-options="pageSizeOptions"
+    @change="handleChange"
+    @showSizeChange="handleSizeChange"
+  />
+</template>
+
+<script>
+export default {
+  name: 'DmPage',
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    current: {
+      type: Number,
+      default: undefined
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    showTotal: {
+      type: Boolean,
+      default: false
+    },
+    showElevator: {
+      type: Boolean,
+      default: false
+    },
+    showSizer: {
+      type: Boolean,
+      default: false
+    },
+    pageSizeOpts: {
+      type: Array,
+      default: () => [10, 20, 40, 50, 100]
+    }
+  },
+  emits: ['update:modelValue', 'on-change', 'on-page-size-change'],
+  computed: {
+    currentPage() {
+      if (this.current !== undefined) {
+        return this.current;
+      }
+      return this.modelValue;
+    },
+    currentPageSize() {
+      return this.pageSize;
+    },
+    pageSizeOptions() {
+      return this.pageSizeOpts.map(String);
+    },
+    showTotalFn() {
+      if (!this.showTotal) {
+        return undefined;
+      }
+      return (total) => `${this.$t('gong')} ${total} ${this.$t('tiao')}`;
+    }
+  },
+  methods: {
+    handleChange(page, pageSize) {
+      this.$emit('update:modelValue', page);
+      this.$emit('on-change', page);
+      if (pageSize !== this.pageSize) {
+        this.$emit('on-page-size-change', pageSize);
+      }
+    },
+    handleSizeChange(page, pageSize) {
+      this.$emit('update:modelValue', page);
+      this.$emit('on-page-size-change', pageSize);
+      this.$emit('on-change', page);
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/ui/DmTable.vue b/frontend/src/components/ui/DmTable.vue
new file mode 100644
index 000000000..e1909f192
--- /dev/null
+++ b/frontend/src/components/ui/DmTable.vue
@@ -0,0 +1,90 @@
+<template>
+  <a-table
+    class="dm-table"
+    :class="{ 'dm-table--stripe': stripe }"
+    :columns="antdColumns"
+    :data-source="dataSource"
+    :loading="loading"
+    :size="tableSize"
+    :bordered="border"
+    :pagination="false"
+    :scroll="scroll"
+    :row-key="rowKey"
+    :locale="tableLocale"
+  >
+    <template #bodyCell="{ column, record, index }">
+      <slot v-if="column.__slot" :name="column.__slot" :row="record" :index="index" />
+      <template v-else-if="column.dataIndex !== undefined && column.dataIndex !== null">
+        {{ record[column.dataIndex] }}
+      </template>
+    </template>
+    <template v-if="$slots.empty" #emptyText>
+      <slot name="empty" />
+    </template>
+  </a-table>
+</template>
+
+<script>
+import { convertTableColumns } from '@/utils/convertTableColumns';
+
+export default {
+  name: 'DmTable',
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    stripe: {
+      type: Boolean,
+      default: false
+    },
+    locale: {
+      type: Object,
+      default: () => ({})
+    },
+    scroll: {
+      type: Object,
+      default: undefined
+    },
+    rowKey: {
+      type: [String, Function],
+      default: (_, index) => index
+    }
+  },
+  computed: {
+    antdColumns() {
+      return convertTableColumns(this.columns);
+    },
+    dataSource() {
+      return this.data;
+    },
+    tableSize() {
+      if (this.size === 'large') {
+        return 'middle';
+      }
+      return this.size === 'small' ? 'small' : 'middle';
+    },
+    tableLocale() {
+      return {
+        emptyText: this.locale?.emptyText || this.$t('zan-wu-shu-ju')
+      };
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/ui/registerUiOverrides.js b/frontend/src/components/ui/registerUiOverrides.js
new file mode 100644
index 000000000..896439cd1
--- /dev/null
+++ b/frontend/src/components/ui/registerUiOverrides.js
@@ -0,0 +1,14 @@
+/* eslint-disable vue/no-reserved-component-names -- override ViewUI with Ant Design adapters */
+import DmTable from '@/components/ui/DmTable.vue';
+import DmButton from '@/components/ui/DmButton.vue';
+import DmInput from '@/components/ui/DmInput.vue';
+import DmPage from '@/components/ui/DmPage.vue';
+
+export default {
+  install(app) {
+    app.component('Table', DmTable);
+    app.component('Button', DmButton);
+    app.component('Input', DmInput);
+    app.component('Page', DmPage);
+  }
+};
diff --git a/frontend/src/layout/TableListLayout.vue b/frontend/src/layout/TableListLayout.vue
index dd42a3c01..af3fa5eaa 100644
--- a/frontend/src/layout/TableListLayout.vue
+++ b/frontend/src/layout/TableListLayout.vue
@@ -32,9 +32,9 @@ export default {
 <template>
   <div class="table-list-layout">
     <div class="table-list">
-      <div class="header" v-if="$slots.header || breadcrumbList">
+      <div class="header" v-if="$slots.header || (breadcrumbList && breadcrumbList.length)">
         <slot name="header" />
-        <Breadcrumb v-if="!$slots.header && breadcrumbList">
+        <Breadcrumb v-if="!$slots.header && breadcrumbList && breadcrumbList.length">
           <BreadcrumbItem v-for="breadcrumb in breadcrumbList" :to="breadcrumb.to" :key="breadcrumb.label">
             {{ breadcrumb.label }}
           </BreadcrumbItem>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index cdca76ea6..4f51c5136 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -3002,6 +3002,25 @@
   "dang-qian-pei-zhi-shang-wei-wan-cheng-guan-bi-jiang-hui-diu-shi-yi-bian-ji-ji-lu-shi-fou-yao-ji-xu": "The current configuration is not complete. Closing will discard the edited records. Do you want to continue?",
   "ci-cd": "CI/CD",
   "im": "IM Messager",
+  "nav-shu-ju-ku-guan-li": "Instances",
+  "nav-ci-cd": "CI/CD",
+  "nav-guan-li": "Management",
+  "nav-zhang-hu": "Accounts",
+  "nav-ri-zhi": "Logs",
+  "nav-yong-hu": "Users",
+  "nav-shen-ji-ri-zhi": "Audit Logs",
+  "nav-shu-ju-fang-wen": "Data Access",
+  "nav-cha-xun-ji-qi-lie-biao": "Query Machines",
+  "nav-ji-cheng": "Integration",
+  "nav-webhook": "IM Config",
+  "nav-git-ops": "Git Ops",
+  "nav-sso": "SSO",
+  "nav-sso-placeholder": "SSO configuration is coming soon",
+  "nav-she-zhi": "Settings",
+  "nav-tong-yong": "Preferences",
+  "nav-scm-provider": "Code Repository",
+  "nav-ri-zhi-shen-ji": "Log Audit",
+  "fan-hui-gong-zuo-tai": "Back to Workspace",
   "fu-wu-di-zhi": "Service",
   "mi-yao": "Secret",
   "im-web-hook": "WebHook",
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
index e6b045ae6..38c3c0131 100644
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -3033,6 +3033,25 @@
   "dang-qian-pei-zhi-shang-wei-wan-cheng-guan-bi-jiang-hui-diu-shi-yi-bian-ji-ji-lu-shi-fou-yao-ji-xu": "当前配置尚未完成, 关闭将会丢失已编辑记录, 是否要继续？",
   "ci-cd": "CI/CD",
   "im": "IM 消息服务",
+  "nav-shu-ju-ku-guan-li": "实例",
+  "nav-ci-cd": "CI/CD",
+  "nav-guan-li": "管理",
+  "nav-zhang-hu": "账户",
+  "nav-ri-zhi": "日志",
+  "nav-yong-hu": "用户",
+  "nav-shen-ji-ri-zhi": "审计日志",
+  "nav-shu-ju-fang-wen": "数据访问",
+  "nav-cha-xun-ji-qi-lie-biao": "查询机器列表",
+  "nav-ji-cheng": "集成",
+  "nav-webhook": "IM 配置",
+  "nav-git-ops": "Git Ops",
+  "nav-sso": "SSO",
+  "nav-sso-placeholder": "SSO 配置即将上线",
+  "nav-she-zhi": "设置",
+  "nav-tong-yong": "偏好设置",
+  "nav-scm-provider": "代码仓库",
+  "nav-ri-zhi-shen-ji": "日志审计",
+  "fan-hui-gong-zuo-tai": "返回工作台",
   "fu-wu-di-zhi": "服务地址",
   "mi-yao": "Secret",
   "im-web-hook": "WebHook",
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 348115872..52646be18 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -13,6 +13,7 @@ import CommonMixin from '@/components/function/mixin/commonMixin';
 import CCModal from '@/components/ui/CCModal';
 import CCPasswordInput from '@/components/widgets/CCPasswordInput';
 import CCIconfont from '@/components/widgets/CCIconfont';
+import registerUiOverrides from '@/components/ui/registerUiOverrides';
 import App from './App';
 import router from './router';
 import store from './store';
@@ -66,6 +67,8 @@ app.use(ViewUIPlus, {
   },
   i18n
 });
+
+app.use(registerUiOverrides);
 app.use(router);
 app.use(store);
 app.use(vResize);
diff --git a/frontend/src/router/system.js b/frontend/src/router/system.js
index efeebb36e..fbccda95f 100644
--- a/frontend/src/router/system.js
+++ b/frontend/src/router/system.js
@@ -4,6 +4,11 @@ export default [
     name: 'DMDevops',
     component: () => import(/* webpackChunkName: "ccsystem-datasource" */ '@/views/devops')
   },
+  {
+    path: 'sso',
+    name: 'DMSso',
+    component: () => import(/* webpackChunkName: "ccsystem-sso" */ '@/views/system/sso/index')
+  },
   {
     path: 'im',
     name: 'DMIm',
@@ -31,25 +36,60 @@ export default [
   },
   {
     path: 'role',
-    name: 'System_Role',
-    component: () => import(/* webpackChunkName: "ccsystem-role" */ '@/views/system/role/index'),
-    meta: { requiredAuth: 'RDP_ROLE_READ' }
+    redirect: '/system/management/accounts/role'
   },
   {
     path: 'authdm',
     name: 'System_Auth',
     component: () => import(/* webpackChunkName: "ccsystem-auth" */ '@/views/system/subaccount/auth/authDm')
   },
-  {
-    path: 'account',
-    name: 'System_Sub_Account',
-    component: () => import(/* webpackChunkName: "ccsystem-subaccount" */ '@/views/system/subaccount/index')
-  },
   {
     path: 'account/authdm/:uid',
     name: 'System_Sub_Account_AuthDm',
     component: () => import(/* webpackChunkName: "ccsystem-subaccount-auth" */ '@/views/system/subaccount/auth/authDm')
   },
+  {
+    path: 'account',
+    redirect: '/system/management/accounts/account'
+  },
+  {
+    path: 'management/accounts',
+    component: () => import(/* webpackChunkName: "ccsystem-management-accounts" */ '@/views/system/management/ManagementAccountsLayout'),
+    redirect: '/system/management/accounts/account',
+    children: [
+      {
+        path: 'account',
+        name: 'Management_Accounts_Account',
+        component: () => import(/* webpackChunkName: "ccsystem-subaccount" */ '@/views/system/subaccount/index'),
+        meta: { managementTab: 'account' }
+      },
+      {
+        path: 'role',
+        name: 'Management_Accounts_Role',
+        component: () => import(/* webpackChunkName: "ccsystem-role" */ '@/views/system/role/index'),
+        meta: { requiredAuth: 'RDP_ROLE_READ', managementTab: 'role' }
+      }
+    ]
+  },
+  {
+    path: 'management/logs',
+    component: () => import(/* webpackChunkName: "ccsystem-management-logs" */ '@/views/system/management/ManagementLogsLayout'),
+    redirect: '/system/management/logs/operation',
+    children: [
+      {
+        path: 'operation',
+        name: 'Management_Logs_Operation',
+        component: () => import(/* webpackChunkName: "ccsystem-env" */ '@/views/system/OperationLog'),
+        meta: { managementTab: 'operation' }
+      },
+      {
+        path: 'sql',
+        name: 'Management_Logs_Sql',
+        component: () => import(/* webpackChunkName: "ccsystem-env" */ '@/views/system/SqlLog'),
+        meta: { managementTab: 'sql' }
+      }
+    ]
+  },
   {
     path: 'env',
     name: 'System_Env',
@@ -140,13 +180,11 @@ export default [
   },
   {
     path: 'operation_log',
-    name: 'rdpOperationLog',
-    component: () => import(/* webpackChunkName: "ccsystem-env" */ '@/views/system/OperationLog')
+    redirect: '/system/management/logs/operation'
   },
   {
     path: 'sql_log',
-    name: 'sqlLog',
-    component: () => import(/* webpackChunkName: "ccsystem-env" */ '@/views/system/SqlLog')
+    redirect: '/system/management/logs/sql'
   },
   {
     path: 'profile',
diff --git a/frontend/src/services/cc/api/user.js b/frontend/src/services/cc/api/user.js
index 511f25fa0..526720f80 100644
--- a/frontend/src/services/cc/api/user.js
+++ b/frontend/src/services/cc/api/user.js
@@ -8,7 +8,6 @@
 
 // export const updatePassword = (param) => instance.post('user/updatepassword', param);
 
-
 // export const takeoverUserRes = (param) => instance.post('user/takeoveruserres', param);
 
 // export const updateUserInfo = (param) => instance.post('user/updateuserinfo', param);
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 6bc523e36..4b755a93a 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -21,112 +21,24 @@ import {
   SET_MENU_ITEMS,
   SET_THEME
 } from '@/store/mutationTypes';
-import i18n from '@/i18n';
 import router from '@/router';
+import { buildSidebarMenu, flattenSidebarMenu } from '@/utils/buildSidebarMenu';
 import { supportsCloudCanalBuild, supportsCloudDMBuild } from '@/utils/product';
 
 const URL_AUTH_MAPPING = {};
 
 function applyMenuItems(state, myCatLog = state.myCatLog, globalSetting = state.globalSetting, myAuth = state.myAuth) {
-  const systemMenuItems = [];
-  if (myCatLog.includes('CAT_RDP_USER')) {
-    systemMenuItems.push({
-      key: '/system/account',
-      href: '/#/system/account',
-      label: i18n.global.t('zi-zhang-hao-guan-li'),
-      iconName: 'icon-v2-sub_account'
-    });
-  }
-  if (myCatLog.includes('CAT_RDP_ROLE')) {
-    systemMenuItems.push({
-      key: '/system/role',
-      href: '/#/system/role',
-      label: i18n.global.t('jiao-se-guan-li'),
-      iconName: 'icon-v2-role'
-    });
-  }
-  if (myCatLog.includes('CAT_RDP_ENV')) {
-    systemMenuItems.push({
-      key: '/system/env',
-      href: '/#/system/env',
-      label: i18n.global.t('huan-jing-guan-li'),
-      iconName: 'icon-v2-env'
-    });
-  }
-  if (myCatLog.includes('CAT_RDP_DS')) {
-    systemMenuItems.push({
-      key: '/system/ccdatasource',
-      href: '/#/system/ccdatasource',
-      label: i18n.global.t('shu-ju-yuan-guan-li'),
-      iconName: 'icon-v2-peizhishujuyuan'
-    });
-  }
-  if (myCatLog.includes('CAT_DM_SYS') && myCatLog.includes('CAT_DM_WORKER')) {
-    systemMenuItems.push({
-      key: '/system/dmmachine',
-      href: '/#/system/dmmachine',
-      label: i18n.global.t('cha-xun-ji-qi'),
-      iconName: 'icon-v2-cluster'
-    });
-  }
-  if (myCatLog.includes('CAT_DM_SYS') && myCatLog.includes('CAT_DM_SECRULES')) {
-    systemMenuItems.push({
-      key: '/system/dmrulelist',
-      href: '/#/system/dmrulelist',
-      label: i18n.global.t('an-quan-gui-ze'),
-      iconName: 'icon-v2-audit'
-    });
-    systemMenuItems.push({
-      key: '/system/dmspeclist',
-      href: '/#/system/dmspeclist',
-      label: i18n.global.t('an-quan-gui-fan'),
-      iconName: 'icon-v2-role'
-    });
-  }
-  if (myCatLog.includes('CAT_RDP_OP_AUDIT')) {
-    systemMenuItems.push({
-      key: '/system/operation_log',
-      href: '/#/system/operation_log',
-      label: i18n.global.t('cao-zuo-shen-ji'),
-      iconName: 'icon-v2-audit'
-    });
-  }
-  if (myCatLog.includes('CAT_DM_SQL_AUDIT')) {
-    systemMenuItems.push({
-      key: '/system/sql_log',
-      href: '/#/system/sql_log',
-      label: i18n.global.t('sql-shen-ji'),
-      iconName: 'icon-v2-SqlLog'
-    });
-  }
-  if (myCatLog.includes('CAT_RDP_PRI_PREFERENCE_CONF') && myAuth.includes('RDP_PRI_USER_KV_CONF_R')) {
-    systemMenuItems.push({
-      key: '/system/preference',
-      href: '/#/system/preference',
-      label: i18n.global.t('ge-ren-pian-hao'),
-      iconName: 'icon-v2-preference'
-    });
-  }
-
-  if (myCatLog.includes('CAT_DM_CICD')) {
-    systemMenuItems.push({
-      key: '/system/devops',
-      href: '/#/system/devops',
-      label: 'CI/CD',
-      iconName: 'icon-v2-sub_account'
-    });
-  }
-
-  if (myCatLog.includes('CAT_DM_IM')) {
-    systemMenuItems.push({
-      key: '/system/im',
-      href: '/#/system/im',
-      label: i18n.global.t('im'),
-      iconName: 'icon-v2-sub_account'
-    });
-  }
+  const includesDM = supportsCloudDMBuild;
+  const isDesktop = !!state.dmGlobalSetting.personal;
+  const sidebarMenu = buildSidebarMenu({
+    myCatLog,
+    myAuth,
+    includesDM,
+    isDesktop
+  });
 
-  state.mySystemMenuItems = systemMenuItems;
+  state.sidebarMenu = sidebarMenu;
+  state.mySystemMenuItems = flattenSidebarMenu(sidebarMenu);
 }
 
 export default {
diff --git a/frontend/src/store/state.js b/frontend/src/store/state.js
index 3df392245..0126b1345 100644
--- a/frontend/src/store/state.js
+++ b/frontend/src/store/state.js
@@ -96,6 +96,10 @@ export default {
   bladePipeApply: 'https://www.clougence.com/dm-doc/clouddm',
   myCatLog: [],
   mySystemMenuItems: [],
+  sidebarMenu: {
+    primary: [],
+    groups: []
+  },
   myAuth: [],
   defaultRedirectUrl: '',
   publicKey: '',
diff --git a/frontend/src/styles/antdv.less b/frontend/src/styles/antdv.less
index 66601f5d2..c54295c4b 100644
--- a/frontend/src/styles/antdv.less
+++ b/frontend/src/styles/antdv.less
@@ -73,28 +73,26 @@
 }
 
 .ant-btn-primary {
-  background: @primary-color;
-  border-color: @primary-color;
-  color: #ffffff;
+  background: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  color: #171717 !important;
 
   &:hover {
-    background-color: @hover-color;
-    border-color: @hover-color;
-    background-image: none;
-    color: #ffffff;
+    background-color: @hover-color !important;
+    border-color: @hover-color !important;
+    color: #171717 !important;
   }
 
   &:active {
-    background-color: @active-color;
-    border-color: @active-color;
-    background-image: none;
-    color: #ffffff;
+    background-color: @active-color !important;
+    border-color: @active-color !important;
+    color: #171717 !important;
   }
 
   &:focus {
-    background: @primary-color;
-    border-color: @primary-color;
-    color: #ffffff;
+    background: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+    color: #171717 !important;
   }
 }
 
@@ -192,7 +190,9 @@
 }
 
 .ant-table {
-  border-color: #eaeaea;
+  border-color: var(--border-light);
+  border-radius: 8px;
+  overflow: hidden;
 
   &.ant-table-empty {
     .ant-table-container,
@@ -207,13 +207,14 @@
   }
 
   .ant-table-thead {
-    background: #f3f3f3;
+    background: var(--bg-secondary);
 
     tr {
-      border-color: #eaeaea;
+      border-color: var(--border-light);
 
       th {
-        color: rgba(0, 0, 0, 0.88);
+        color: var(--text-secondary);
+        font-weight: 600;
       }
     }
   }
@@ -221,18 +222,17 @@
   .ant-table-tbody {
     tr {
       &:nth-child(2n) {
-        background-color: #fbfbfb;
+        background-color: var(--bg-secondary);
       }
 
       td {
-        padding: 6px !important;
+        padding: 10px 12px !important;
       }
     }
 
     .ant-table-row-hover {
       td {
-        background-color: #f3f3f3 !important;
-        //cursor: pointer;
+        background-color: var(--bg-hover) !important;
       }
     }
   }
diff --git a/frontend/src/styles/app-shell.less b/frontend/src/styles/app-shell.less
new file mode 100644
index 000000000..d52b5eb06
--- /dev/null
+++ b/frontend/src/styles/app-shell.less
@@ -0,0 +1,930 @@
+@import './themes/supabase-tokens.less';
+
+// ─── App layout: left sidebar + card main (Bytebase-style) ───────────────────
+
+.app-layout {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--shell-bg);
+}
+
+.app-sidebar {
+  width: @shell-sidebar-width;
+  flex-shrink: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+  z-index: 1;
+
+  .app-sidebar-brand {
+    flex-shrink: 0;
+    padding: 20px 16px 16px;
+    cursor: pointer;
+  }
+
+  .app-sidebar-nav {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 4px 0 16px;
+  }
+
+  .app-sidebar-section {
+    padding: 0 10px;
+  }
+
+  .app-sidebar-divider {
+    height: 1px;
+    margin: 10px 20px;
+    background: var(--border-light);
+    opacity: 0.45;
+  }
+
+  .app-sidebar-group-title {
+    padding: 14px 12px 6px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+    line-height: 1.2;
+  }
+
+  .app-sidebar-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 34px;
+    padding: 0 12px;
+    margin: 1px 0;
+    border-radius: @shell-radius-sm;
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.4;
+    text-decoration: none;
+    transition: background-color 0.12s ease, color 0.12s ease;
+
+    span {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    &.is-active {
+      background: var(--sidebar-active-bg);
+      color: var(--text-primary);
+      font-weight: 500;
+    }
+
+    &--depth-1 {
+      min-height: 32px;
+      padding-left: 28px;
+      font-size: 13px;
+    }
+
+    &--depth-2 {
+      min-height: 30px;
+      padding-left: 16px;
+      margin-left: 28px;
+      font-size: 12px;
+      color: var(--text-tertiary);
+
+      &:hover {
+        color: var(--text-primary);
+      }
+
+      &.is-active {
+        color: var(--text-primary);
+        font-weight: 500;
+      }
+    }
+  }
+
+  .app-sidebar-section:first-child {
+    .app-sidebar-item {
+      color: var(--text-primary);
+      font-weight: 500;
+
+      &.is-active {
+        font-weight: 600;
+      }
+    }
+  }
+
+  .app-sidebar-group {
+    margin-bottom: 4px;
+  }
+
+  .app-sidebar-group-toggle,
+  .app-sidebar-subgroup-toggle {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    border: none;
+    border-radius: @shell-radius-sm;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.12s ease, color 0.12s ease;
+
+    &:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    &__label {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__chevron {
+      flex-shrink: 0;
+      width: 5px;
+      height: 5px;
+      margin-right: 2px;
+      border-right: 1.5px solid currentColor;
+      border-bottom: 1.5px solid currentColor;
+      opacity: 0.55;
+      transform: rotate(-45deg);
+      transition: transform 0.15s ease, opacity 0.12s ease;
+
+      &.is-expanded {
+        transform: rotate(45deg);
+        opacity: 0.85;
+      }
+    }
+  }
+
+  .app-sidebar-group-toggle {
+    min-height: 34px;
+    padding: 0 12px;
+    margin: 1px 0;
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 400;
+
+    &.is-expanded {
+      color: var(--text-primary);
+      font-weight: 500;
+    }
+  }
+
+  .app-sidebar-subgroup-toggle {
+    min-height: 32px;
+    padding: 0 12px 0 28px;
+    margin: 1px 0;
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 400;
+
+    &.is-expanded,
+    &.is-active {
+      color: var(--text-primary);
+      font-weight: 500;
+    }
+  }
+
+  .app-sidebar-group-body {
+    margin: 2px 0 6px 22px;
+    padding: 2px 0 2px 10px;
+    border-left: 1px solid var(--border-light);
+  }
+
+  .app-sidebar-subgroup {
+    margin-bottom: 2px;
+  }
+
+  .app-sidebar-subgroup-body {
+    margin: 0 0 4px 14px;
+    padding: 2px 0;
+    border-left: 1px solid var(--border-light);
+  }
+}
+
+.app-main {
+  flex: 1;
+  min-width: 0;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+}
+
+.app-content-header {
+  flex-shrink: 0;
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  background: var(--content-header-bg);
+  border-bottom: 1px solid var(--content-header-border);
+
+  &__left {
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+  }
+
+  &__version {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-tertiary);
+    padding: 2px 8px;
+    border-radius: @shell-radius-sm;
+    background: var(--bg-tertiary);
+    white-space: nowrap;
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: @shell-radius-sm;
+    border: 1px solid var(--border-primary);
+    background: var(--bg-card);
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+    text-decoration: none;
+    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+
+    &:hover {
+      color: var(--text-primary);
+      border-color: var(--border-secondary);
+      background: var(--bg-hover);
+    }
+  }
+}
+
+.app-main-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 16px 16px 16px 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-main-card {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-card);
+  border: 1px solid var(--border-light);
+  border-radius: @shell-radius-lg;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// ─── SQL fullscreen layout ─────────────────────────────────────────────────────
+
+.sql-layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+
+.sql-compact-header {
+  flex-shrink: 0;
+  height: @shell-compact-header-height;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-primary);
+
+  &__brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    min-width: 0;
+  }
+
+  &__logo {
+    height: 20px;
+    width: auto;
+    max-width: 100px;
+    object-fit: contain;
+  }
+
+  &__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+    white-space: nowrap;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+  }
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 12px;
+    border: 1px solid var(--border-primary);
+    border-radius: @shell-radius-sm;
+    background: var(--bg-card);
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+
+    &:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+      border-color: var(--border-secondary);
+    }
+  }
+}
+
+.sql-layout-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.home--sql {
+  height: 100vh;
+  overflow: hidden;
+}
+
+// ─── Legacy top header (kept for reference / modals) ─────────────────────────
+
+.app-shell-header {
+  background: var(--header-bg);
+  color: var(--header-text);
+  height: @shell-header-height;
+  line-height: @shell-header-height;
+  border-bottom: 1px solid var(--header-border, var(--border-primary));
+  box-shadow: var(--header-shadow);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  gap: 0;
+
+  .header-main {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .brand-container {
+    padding: 0 16px 0 20px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    .product-title-frame {
+      width: 120px;
+      height: 24px;
+      flex: 0 0 120px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-start;
+      overflow: hidden;
+    }
+
+    .product-title {
+      width: 120px;
+      height: 24px;
+      display: block;
+      object-fit: contain;
+      object-position: left center;
+    }
+  }
+
+  .app-shell-nav {
+    flex: 1;
+    min-width: 0;
+    height: @shell-header-height;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-right: 16px;
+    gap: 4px;
+  }
+
+  .header-config-link {
+    display: inline-flex;
+    align-items: center;
+    height: 32px;
+    padding: 0 12px;
+    margin-right: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.55);
+    border-radius: @shell-radius-sm;
+    transition: color 0.15s ease, background-color 0.15s ease;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+      background: rgba(255, 255, 255, 0.06);
+    }
+
+    &.is-active {
+      color: var(--primary-color);
+    }
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    position: relative;
+    flex-shrink: 0;
+    padding-right: 4px;
+
+    & > *:not(:last-child) {
+      margin-right: 16px;
+      font-size: 13px;
+    }
+
+    .app-version-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 56px;
+      height: 22px;
+      padding: 0 10px;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: @shell-radius-sm;
+      background: rgba(255, 255, 255, 0.06);
+      color: rgba(255, 255, 255, 0.65);
+      font-size: 11px;
+      font-weight: 500;
+      line-height: 20px;
+      letter-spacing: 0.02em;
+      white-space: nowrap;
+    }
+
+    .domain {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.65);
+      max-width: 140px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .avatar {
+      cursor: pointer;
+      width: 28px;
+      height: 28px;
+      border-radius: @shell-radius-sm;
+      overflow: hidden;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .message-icon {
+      position: relative;
+      cursor: pointer;
+      color: rgba(255, 255, 255, 0.65);
+
+      .message-point {
+        position: absolute;
+        background: @supabase-emerald;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        right: -2px;
+        top: 4px;
+      }
+    }
+
+    .menu {
+      z-index: 1000;
+      position: absolute;
+      width: 280px;
+      top: calc(@shell-header-height - 8px);
+      right: 0;
+      color: var(--text-primary);
+      border: 1px solid var(--border-primary);
+      border-radius: @shell-radius-md;
+      background: var(--bg-card);
+      box-shadow: var(--shadow-lg);
+      overflow: hidden;
+
+      & > div:not(:last-child) {
+        border-bottom: 1px solid var(--border-secondary);
+      }
+
+      .one {
+        display: flex;
+        align-items: center;
+        padding: 16px 20px;
+        gap: 12px;
+
+        .avatar {
+          width: 40px;
+          height: 40px;
+          flex-shrink: 0;
+        }
+
+        .domain {
+          font-size: 14px;
+          color: var(--text-primary);
+          max-width: none;
+        }
+
+        .provider-wrap {
+          color: var(--text-tertiary);
+          font-size: 12px;
+          margin-top: 2px;
+        }
+      }
+
+      .two {
+        padding: 16px 20px;
+        line-height: 22px;
+        font-size: 13px;
+        color: var(--text-secondary);
+      }
+
+      .four {
+        height: 44px;
+        line-height: 44px;
+        text-align: center;
+        background: var(--bg-tertiary);
+        color: var(--error-color);
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.content-container {
+  padding-top: @shell-header-height;
+  height: 100%;
+  overflow-y: auto;
+  background: var(--bg-primary);
+}
+
+// ─── Horizontal top nav (Navbar) ─────────────────────────────────────────────
+
+.app-shell-menu {
+  background: transparent !important;
+  border-bottom: none !important;
+  line-height: @shell-header-height - 2px !important;
+  height: @shell-header-height;
+
+  &.ant-menu-horizontal {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .ant-menu-item {
+    top: 0 !important;
+    margin: 0 2px !important;
+    padding: 0 4px !important;
+    border-bottom: 2px solid transparent !important;
+    transition: color 0.15s ease, border-color 0.15s ease;
+
+    &::after {
+      display: none !important;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      height: @shell-header-height - 2px;
+      padding: 0 14px;
+      color: rgba(255, 255, 255, 0.55) !important;
+      font-size: 13px;
+      font-weight: 500;
+      letter-spacing: 0.01em;
+      opacity: 1 !important;
+    }
+
+    &:hover a {
+      color: rgba(255, 255, 255, 0.9) !important;
+    }
+
+    &.ant-menu-item-selected {
+      border-bottom-color: var(--primary-color) !important;
+      background: transparent !important;
+
+      a {
+        color: #fafafa !important;
+      }
+    }
+  }
+}
+
+// ─── System sidebar ──────────────────────────────────────────────────────────
+
+.system-side-nav {
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border);
+  position: fixed;
+  top: @shell-header-height;
+  width: @shell-sidebar-width;
+  height: calc(100vh - @shell-header-height);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 100;
+
+  .side-nav-user-info {
+    padding: 20px 16px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--sidebar-border);
+    background: var(--sidebar-bg) !important;
+    background-image: none !important;
+
+    img {
+      width: 40px;
+      height: 40px;
+      border-radius: @shell-radius-md;
+      border: 1px solid var(--border-primary);
+      margin: 0 0 10px 0 !important;
+      display: block;
+    }
+
+    .domain {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--text-primary);
+      line-height: 1.4;
+      word-break: break-all;
+    }
+  }
+
+  .ivu-menu {
+    background: transparent !important;
+    width: 100% !important;
+    padding: 8px 0 24px;
+  }
+
+  .ivu-menu-item-group-title {
+    padding: 16px 16px 6px !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-tertiary) !important;
+    line-height: 1.2 !important;
+  }
+
+  .ivu-menu-item {
+    margin: 1px 8px !important;
+    padding: 0 !important;
+    height: auto !important;
+    min-height: 36px !important;
+    line-height: 36px !important;
+    border-radius: @shell-radius-sm;
+    border-left: 2px solid transparent;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    a {
+      display: flex !important;
+      align-items: center;
+      min-height: 36px;
+      padding: 0 10px;
+      color: var(--text-secondary) !important;
+      font-size: 13px;
+      font-weight: 400;
+      gap: 8px;
+    }
+
+    &:hover {
+      background: var(--bg-hover) !important;
+
+      a {
+        color: var(--text-primary) !important;
+      }
+    }
+
+    &.ivu-menu-item-active,
+    &.ivu-menu-item-selected {
+      background: var(--sidebar-active-bg) !important;
+      border-left-color: var(--sidebar-active-border) !important;
+      font-weight: 500;
+
+      a {
+        color: var(--text-primary) !important;
+      }
+    }
+  }
+}
+
+.system-layout {
+  width: 100%;
+  min-height: 100%;
+  background: transparent;
+}
+
+.system-page {
+  width: 100%;
+  min-height: 100%;
+}
+
+// ─── Profile / settings page shell ───────────────────────────────────────────
+
+.profile-page {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 0 24px 24px;
+
+  .profile-card {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    overflow: visible;
+
+    .ivu-tabs-bar {
+      margin-bottom: 0;
+      border-bottom: 1px solid var(--border-primary);
+      background: var(--bg-secondary);
+      padding: 0 8px;
+    }
+
+    .ivu-tabs-nav .ivu-tabs-tab {
+      padding: 12px 16px;
+      font-size: 13px;
+      color: var(--text-secondary);
+
+      &.ivu-tabs-tab-active {
+        color: var(--primary-color);
+        font-weight: 500;
+      }
+    }
+
+    .ivu-tabs-content {
+      padding: 8px 24px 24px;
+    }
+  }
+
+  .profile-field-list {
+    margin: 0;
+    padding: 0;
+
+    .profile-field-row {
+      display: grid;
+      grid-template-columns: 160px 1fr;
+      gap: 16px;
+      align-items: start;
+      padding: 16px 0;
+      border-bottom: 1px solid var(--border-secondary);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      dt {
+        margin: 0;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--text-secondary);
+        line-height: 32px;
+      }
+
+      dd {
+        margin: 0;
+        font-size: 14px;
+        color: var(--text-primary);
+        line-height: 32px;
+        min-width: 0;
+      }
+    }
+  }
+
+  .profile-section-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin: 0 0 12px;
+    padding-top: 8px;
+  }
+
+  .profile-section-desc {
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.55;
+    max-width: 560px;
+    margin: 0 0 16px;
+  }
+
+  .profile-security-block {
+    padding: 20px 0;
+    border-top: 1px solid var(--border-secondary);
+
+    &:first-child {
+      border-top: none;
+      padding-top: 8px;
+    }
+  }
+}
+
+// ─── SQL workspace ───────────────────────────────────────────────────────────
+
+.sql-workspace {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+}
+
+// ─── Global primary actions (emerald) ───────────────────────────────────────
+
+.ivu-btn-primary:not([disabled]),
+.ant-btn-primary:not([disabled]) {
+  background: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  color: #171717 !important;
+
+  span {
+    color: #171717 !important;
+  }
+
+  &:hover,
+  &:focus {
+    opacity: 0.92;
+    background: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+    color: #171717 !important;
+  }
+}
+
+.app-shell-header .desktop-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 16px;
+}
diff --git a/frontend/src/styles/cloudCanal.less b/frontend/src/styles/cloudCanal.less
index 7d43f4a6c..186910521 100644
--- a/frontend/src/styles/cloudCanal.less
+++ b/frontend/src/styles/cloudCanal.less
@@ -3,9 +3,9 @@
 @font-color: rgba(0, 0, 0, 0.88) 3;
 @basicFontSize: 14px;
 
-// Color
-@primary-color: #0bb9f8;
-@info-color: #0087c7;
+// Color — Supabase emerald (aligned with variables.less)
+@primary-color: #3ecf8e;
+@info-color: #00c573;
 @success-color: #52c41a;
 @processing-color: @primary-color;
 @warning-color: #ffa30e;
@@ -25,8 +25,8 @@
 @white: #fff;
 @black: #000;
 
-@hover-color: #2ac6ff;
-@active-color: #009bd4;
+@hover-color: #4ade80;
+@active-color: #24b47e;
 @background-grey: #f4f4f4;
 
 body {
@@ -102,16 +102,20 @@ a {
 }
 
 .ivu-btn-primary {
-  color: #fff;
+  color: #171717;
   background-color: @primary-color;
   border-color: @primary-color;
+
+  span {
+    color: #171717;
+  }
 }
 
 .ivu-btn-primary:hover {
-  background-color: #57a3f3;
-  border-color: #57a3f3;
+  background-color: @hover-color;
+  border-color: @hover-color;
   background-image: none;
-  color: #fff;
+  color: #171717;
 }
 
 .ivu-btn-dashed {
diff --git a/frontend/src/styles/dm-design-system.less b/frontend/src/styles/dm-design-system.less
new file mode 100644
index 000000000..02f3de99b
--- /dev/null
+++ b/frontend/src/styles/dm-design-system.less
@@ -0,0 +1,394 @@
+@import './themes/supabase-tokens.less';
+
+// CloudDM unified UI — Ant Design visual language + design tokens
+
+@dm-radius-sm: @shell-radius-sm;
+@dm-radius-md: @shell-radius-md;
+@dm-radius-lg: @shell-radius-lg;
+
+// ─── List page layout ────────────────────────────────────────────────────────
+
+.table-list-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  .table-list {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 20px 0;
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+
+    .option {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      min-height: 56px;
+      height: auto;
+      border: 1px solid var(--border-light);
+      border-radius: @dm-radius-md;
+      padding: 12px 14px;
+      margin-bottom: 14px;
+      background: var(--bg-secondary);
+      gap: 12px;
+      flex-shrink: 0;
+
+      .left {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .right {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-left: auto;
+        flex-wrap: nowrap;
+        gap: 8px;
+      }
+    }
+
+    .table-container {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      border: 1px solid var(--border-light);
+      border-radius: @dm-radius-md;
+      background: var(--bg-card);
+    }
+  }
+
+  .footer {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 52px;
+    padding: 10px 20px;
+    background: var(--bg-card);
+    box-shadow: none;
+  }
+}
+
+.list-page-pagination.ant-pagination {
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px 12px;
+
+  .ant-pagination-total-text {
+    margin-right: auto;
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+
+  .ant-pagination-options {
+    margin-left: 8px;
+  }
+}
+
+.list-page-footer-nav {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.content-wrapper,
+.cluster-container,
+.console-job-wrapper,
+.table-list-layout,
+.ticket-container,
+.project-account,
+.operation-log {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.content-wrapper {
+  padding: 16px;
+
+  .data-source-container {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+}
+
+.cluster-container {
+  padding: 16px;
+  overflow: hidden;
+}
+
+.page-footer-container {
+  flex-shrink: 0;
+  width: 100%;
+  margin-top: auto;
+  background: var(--bg-card);
+  box-shadow: none;
+  position: static;
+  z-index: 1;
+
+  .page-footer-paging {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 52px;
+    padding: 10px 20px;
+    background: transparent;
+    line-height: normal;
+    height: auto;
+  }
+}
+
+// ─── DmTable / Ant Table ─────────────────────────────────────────────────────
+
+.dm-table,
+.ant-table-wrapper.dm-table {
+  .ant-table {
+    border-radius: @dm-radius-md;
+    color: var(--text-primary);
+    background: var(--bg-card);
+  }
+
+  .ant-table-container {
+    border-radius: @dm-radius-md;
+  }
+
+  .ant-table-thead > tr > th {
+    background: var(--bg-secondary) !important;
+    color: var(--text-secondary) !important;
+    font-weight: 600;
+    font-size: 12px;
+    border-bottom: 1px solid var(--border-light) !important;
+    padding: 10px 12px !important;
+  }
+
+  .ant-table-tbody > tr > td {
+    border-bottom: 1px solid var(--border-light) !important;
+    padding: 10px 12px !important;
+    font-size: 13px;
+    color: var(--text-primary);
+    transition: background-color 0.12s ease;
+  }
+
+  .ant-table-tbody > tr:hover > td {
+    background: var(--bg-hover) !important;
+  }
+}
+
+.dm-table--stripe {
+  .ant-table-tbody > tr:nth-child(even) > td {
+    background: var(--bg-secondary);
+  }
+
+  .ant-table-tbody > tr:nth-child(even):hover > td {
+    background: var(--bg-hover) !important;
+  }
+}
+
+// ─── Buttons / Inputs (Ant) ──────────────────────────────────────────────────
+
+.ant-btn {
+  border-radius: @dm-radius-sm;
+  font-weight: 500;
+  box-shadow: none;
+}
+
+.ant-btn-primary:not(:disabled) {
+  background: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  color: #171717 !important;
+
+  span {
+    color: #171717 !important;
+  }
+}
+
+.ant-btn-primary.ant-btn-background-ghost:not(:disabled) {
+  background: transparent !important;
+  color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+
+  span {
+    color: var(--primary-color) !important;
+  }
+
+  &:hover {
+    background: rgba(62, 207, 142, 0.08) !important;
+  }
+}
+
+.ant-input,
+.ant-input-affix-wrapper,
+.ant-select-selector,
+.ant-picker {
+  border-radius: @dm-radius-sm !important;
+  border-color: var(--border-primary) !important;
+  background: var(--bg-card) !important;
+  color: var(--text-primary) !important;
+}
+
+.ant-input-affix-wrapper:hover,
+.ant-input:hover,
+.ant-select-selector:hover,
+.ant-picker:hover {
+  border-color: var(--border-secondary) !important;
+}
+
+.ant-input-affix-wrapper-focused,
+.ant-input-affix-wrapper:focus,
+.ant-input:focus,
+.ant-select-focused .ant-select-selector,
+.ant-picker-focused {
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.15) !important;
+}
+
+.ant-pagination {
+  .ant-pagination-item,
+  .ant-pagination-prev,
+  .ant-pagination-next,
+  .ant-pagination-jump-prev,
+  .ant-pagination-jump-next {
+    border-radius: @dm-radius-sm;
+    border-color: var(--border-primary);
+  }
+
+  .ant-pagination-item {
+    a {
+      color: var(--text-secondary);
+    }
+
+    &-active {
+      border-color: var(--primary-color);
+      background: rgba(62, 207, 142, 0.1);
+
+      a {
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  .ant-pagination-options-quick-jumper input,
+  .ant-select-selector {
+    border-radius: @dm-radius-sm !important;
+  }
+}
+
+// ─── iView bridge (Select / Tabs / DatePicker until fully migrated) ───────────
+
+.ivu-tabs-bar {
+  border-bottom: 1px solid var(--border-light);
+  margin-bottom: 12px;
+}
+
+.ivu-tabs-nav .ivu-tabs-tab {
+  border-radius: @dm-radius-sm @dm-radius-sm 0 0;
+  color: var(--text-secondary);
+  padding: 8px 16px;
+  margin-right: 4px;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+
+  &-active {
+    color: var(--primary-color) !important;
+    font-weight: 500;
+  }
+}
+
+.ivu-tabs-ink-bar {
+  background-color: var(--primary-color) !important;
+  height: 2px !important;
+}
+
+.ivu-select-selection,
+.ivu-input,
+.ivu-date-picker .ivu-input {
+  border-radius: @dm-radius-sm !important;
+  border-color: var(--border-primary) !important;
+  background: var(--bg-card) !important;
+  color: var(--text-primary) !important;
+}
+
+.ivu-select-selection:hover,
+.ivu-input:hover {
+  border-color: var(--border-secondary) !important;
+}
+
+.ivu-select-visible .ivu-select-selection,
+.ivu-input:focus {
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.15);
+}
+
+.ivu-table-wrapper {
+  border: 1px solid var(--border-light);
+  border-radius: @dm-radius-md;
+  overflow: hidden;
+}
+
+.ivu-table th {
+  background: var(--bg-secondary) !important;
+  color: var(--text-secondary) !important;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.ivu-table td {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.ivu-page-item-active {
+  border-color: var(--primary-color) !important;
+  background: rgba(62, 207, 142, 0.1) !important;
+
+  a {
+    color: var(--primary-color) !important;
+  }
+}
+
+.ivu-btn-primary {
+  background: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  color: #171717 !important;
+  border-radius: @dm-radius-sm;
+}
+
+.ivu-btn-ghost.ivu-btn-primary {
+  color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  background: transparent !important;
+}
+
+.ivu-breadcrumb {
+  color: var(--text-tertiary);
+  font-size: 13px;
+}
diff --git a/frontend/src/styles/global.less b/frontend/src/styles/global.less
index b55c3f05a..ff106f23a 100644
--- a/frontend/src/styles/global.less
+++ b/frontend/src/styles/global.less
@@ -6,6 +6,8 @@
 @import 'variables.less';
 @import 'mixins.less';
 @import 'modal.less';
+@import 'app-shell.less';
+@import 'dm-design-system.less';
 //@import '~@wsfe/ctree/src/styles/index.less';
 * {
   box-sizing: border-box;
@@ -14,12 +16,18 @@
 html {
   font-size: 14px;
   box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', Helvetica, Arial, sans-serif;
   color: @default-color;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  background: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 a {
-  color: #0bb9f8;
+  color: @link-color;
 }
 
 a[disabled] {
@@ -144,58 +152,14 @@ a[disabled] {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
 
   .table-list {
-    padding: 16px;
     flex: 1;
     display: flex;
     flex-direction: column;
     min-height: 0;
     height: 100%;
-
-    .header {
-      margin-bottom: 12px;
-    }
-
-    .content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      height: 100%;
-      overflow: auto;
-
-      .option {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 60px;
-        border: 1px solid #ededed;
-        padding: 12px;
-        margin-bottom: 12px;
-
-        .left {
-          display: flex;
-        }
-
-        .right {
-        }
-      }
-
-      .table-container {
-        flex: 1;
-        min-height: 0;
-        overflow: auto;
-      }
-    }
-  }
-
-  .footer {
-    box-shadow: 6px 2px 23px 0 rgba(197, 197, 197, 0.5);
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 }
 
@@ -259,7 +223,9 @@ a,
 .ivu-dropdown a,
 .dropdown-content,
 .key-link-a,
-.ivu-menu-item a {
+.ivu-menu-item a,
+.app-sidebar-item,
+.management-section-tabs__item {
   &:hover {
     border-bottom: none;
   }
diff --git a/frontend/src/styles/themes/dark-theme.less b/frontend/src/styles/themes/dark-theme.less
index e78f2b528..36f1ec8b6 100644
--- a/frontend/src/styles/themes/dark-theme.less
+++ b/frontend/src/styles/themes/dark-theme.less
@@ -297,32 +297,38 @@
     }
 
     &-primary {
-      background-color: #0087c7 !important;
-      border-color: var(--border-radio) !important;
-      color: #ffffff !important;
+      background-color: var(--primary-color) !important;
+      border-color: var(--primary-color) !important;
+      color: #171717 !important;
+
+      span {
+        color: #171717 !important;
+      }
 
       &.ivu-btn-ghost {
-        border-color: #0bb9f9 !important;
-        color: #0bb9f9 !important;
+        border-color: var(--primary-color) !important;
+        color: var(--primary-color) !important;
+        background: transparent !important;
 
         span {
-          color: #0bb9f9 !important;
+          color: var(--primary-color) !important;
         }
 
         &:hover {
-          border-color: #0087c7 !important;
-          color: #0087c7 !important;
+          border-color: var(--primary-color) !important;
+          color: #171717 !important;
+          background-color: var(--primary-color) !important;
 
           span {
-            color: #0087c7 !important;
+            color: #171717 !important;
           }
         }
       }
 
       &:hover {
-        opacity: 0.8;
-        border-color: #ffffff !important;
-        color: #ffffff !important;
+        opacity: 0.92;
+        border-color: var(--primary-color) !important;
+        color: #171717 !important;
       }
     }
 
diff --git a/frontend/src/styles/themes/supabase-tokens.less b/frontend/src/styles/themes/supabase-tokens.less
new file mode 100644
index 000000000..6d5f728f2
--- /dev/null
+++ b/frontend/src/styles/themes/supabase-tokens.less
@@ -0,0 +1,145 @@
+// Supabase-inspired design tokens (light + dark)
+// Reference: frontend/supabase/DESIGN.md
+
+@supabase-emerald: #3ecf8e;
+@supabase-emerald-deep: #24b47e;
+@supabase-emerald-link: #00c573;
+@supabase-ink: #171717;
+@supabase-canvas: #ffffff;
+@supabase-canvas-soft: #fafafa;
+@supabase-hairline: #dfdfdf;
+@supabase-muted: #707070;
+
+@supabase-night: #0f0f0f;
+@supabase-night-elevated: #171717;
+@supabase-night-panel: #1c1c1c;
+@supabase-border-1: #242424;
+@supabase-border-2: #2e2e2e;
+@supabase-border-3: #363636;
+
+@shell-header-height: 52px;
+@shell-compact-header-height: 44px;
+@shell-sidebar-width: 240px;
+@shell-radius-sm: 6px;
+@shell-radius-md: 8px;
+@shell-radius-lg: 12px;
+
+@light-theme: {
+  bg-primary: @supabase-canvas;
+  bg-secondary: @supabase-canvas-soft;
+  bg-tertiary: #f5f5f5;
+  bg-hover: #f0f0f0;
+  bg-card: @supabase-canvas;
+  bg-radio: @supabase-canvas-soft;
+  bg-select: #f3f4f6;
+
+  text-primary: @supabase-ink;
+  text-secondary: @supabase-muted;
+  text-tertiary: #9a9a9a;
+  text-disabled: #b2b2b2;
+  text-inverse: @supabase-canvas;
+
+  border-primary: @supabase-hairline;
+  border-secondary: #ededed;
+  border-light: #efefef;
+  border-radio: #d4d4d4;
+
+  primary-color: @supabase-emerald;
+  info-color: @supabase-emerald-link;
+  success-color: #22c55e;
+  warning-color: #f59e0b;
+  error-color: #ef4444;
+
+  success-bg: #ecfdf5;
+  error-bg: #fef2f2;
+  warning-bg: #fffbeb;
+  info-bg: #ecfdf5;
+  disabled-bg: #f5f5f5;
+
+  progress-normal: #f59e0b;
+  progress-success: #22c55e;
+  progress-error: #ef4444;
+  progress-disabled: #d4d4d4;
+  progress-delay-normal: #22c55e;
+  progress-delay-warning: #f59e0b;
+  progress-delay-error: #ef4444;
+
+  header-bg: @supabase-night-elevated;
+  header-text: #fafafa;
+  header-border: @supabase-border-1;
+  header-shadow: none;
+
+  sidebar-bg: transparent;
+  sidebar-border: transparent;
+  sidebar-active-bg: rgba(62, 207, 142, 0.12);
+  sidebar-active-border: @supabase-emerald;
+
+  shell-bg: #f7f8fa;
+  main-bg: #f7f8fa;
+  content-header-bg: transparent;
+  content-header-border: #efefef;
+
+  shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+};
+
+@dark-theme: {
+  bg-primary: @supabase-night;
+  bg-secondary: @supabase-night-elevated;
+  bg-tertiary: @supabase-night-panel;
+  bg-hover: #1f1f1f;
+  bg-card: @supabase-night-elevated;
+  bg-radio: #202020;
+  bg-select: #1f1f1f;
+
+  text-primary: #fafafa;
+  text-secondary: #898989;
+  text-tertiary: #6b6b6b;
+  text-disabled: #525252;
+  text-inverse: @supabase-ink;
+
+  border-primary: @supabase-border-2;
+  border-secondary: @supabase-border-1;
+  border-light: @supabase-border-3;
+  border-radio: @supabase-border-3;
+
+  primary-color: @supabase-emerald;
+  info-color: @supabase-emerald-link;
+  success-color: #22c55e;
+  warning-color: #f59e0b;
+  error-color: #ef4444;
+
+  success-bg: #052e16;
+  error-bg: #450a0a;
+  warning-bg: #451a03;
+  info-bg: #052e16;
+  disabled-bg: #262626;
+
+  progress-normal: #b45309;
+  progress-success: #15803d;
+  progress-error: #991b1b;
+  progress-disabled: #404040;
+  progress-delay-normal: #15803d;
+  progress-delay-warning: #b45309;
+  progress-delay-error: #991b1b;
+
+  header-bg: @supabase-night-elevated;
+  header-text: #fafafa;
+  header-border: @supabase-border-1;
+  header-shadow: none;
+
+  sidebar-bg: transparent;
+  sidebar-border: transparent;
+  sidebar-active-bg: rgba(62, 207, 142, 0.08);
+  sidebar-active-border: @supabase-emerald;
+
+  shell-bg: @supabase-night;
+  main-bg: @supabase-night;
+  content-header-bg: transparent;
+  content-header-border: @supabase-border-1;
+
+  shadow-sm: 0 0 0 1px @supabase-border-1;
+  shadow-md: 0 0 0 1px @supabase-border-2;
+  shadow-lg: 0 0 0 1px @supabase-border-3;
+};
diff --git a/frontend/src/styles/themes/theme.less b/frontend/src/styles/themes/theme.less
index a2fca05cf..7657d3100 100644
--- a/frontend/src/styles/themes/theme.less
+++ b/frontend/src/styles/themes/theme.less
@@ -44,8 +44,21 @@
   // Header 颜色
   --header-bg: @theme-map[header-bg];
   --header-text: @theme-map[header-text];
+  --header-border: @theme-map[header-border];
   --header-shadow: @theme-map[header-shadow];
 
+  // Sidebar
+  --sidebar-bg: @theme-map[sidebar-bg];
+  --sidebar-border: @theme-map[sidebar-border];
+  --sidebar-active-bg: @theme-map[sidebar-active-bg];
+  --sidebar-active-border: @theme-map[sidebar-active-border];
+
+  // Main content area
+  --shell-bg: @theme-map[shell-bg];
+  --main-bg: @theme-map[main-bg];
+  --content-header-bg: @theme-map[content-header-bg];
+  --content-header-border: @theme-map[content-header-border];
+
   // 阴影
   --shadow-sm: @theme-map[shadow-sm];
   --shadow-md: @theme-map[shadow-md];
diff --git a/frontend/src/styles/themes/variables.less b/frontend/src/styles/themes/variables.less
index 000382e6d..37e15dedd 100644
--- a/frontend/src/styles/themes/variables.less
+++ b/frontend/src/styles/themes/variables.less
@@ -1,115 +1 @@
-// 亮色主题变量
-@light-theme: {
-  // 背景色
-  bg-primary: #ffffff;
-  bg-secondary: #f4f4f4;
-  bg-tertiary: #fafafa;
-  bg-hover: #f0f0f0;
-  bg-card: #ffffff;
-  bg-radio: #ffffff;
-  bg-select: #f3f8ff;
-
-  // 文字颜色
-  text-primary: rgba(0, 0, 0, 0.88);
-  text-secondary: #555555;
-  text-tertiary: #888888;
-  text-disabled: #bbbbbb;
-  text-inverse: #ffffff;
-
-  // 边框颜色
-  border-primary: #dadada;
-  border-secondary: #ececec;
-  border-light: #f0f0f0;
-  border-radio: #dcdee2;
-
-  // 业务颜色
-  primary-color: #0bb9f8;
-  info-color: #0087c7;
-  success-color: #52c41a;
-  warning-color: #ffa30e;
-  error-color: #ff1815;
-
-  // 状态背景色
-  success-bg: #f6ffed;
-  error-bg: #fff2f0;
-  warning-bg: #fffbe6;
-  info-bg: #e6f7ff;
-  disabled-bg: #f5f5f5;
-
-  // 进度条颜色
-  progress-normal: #ffbe56;
-  progress-success: #9ee6aa;
-  progress-error: #ff7674;
-  progress-disabled: #d5d5d5;
-  progress-delay-normal: #19be6b;
-  progress-delay-warning: #ff9900;
-  progress-delay-error: #ed4014;
-
-  // Header 颜色
-  header-bg: #0087c7;
-  header-text: #ffffff;
-  header-shadow: none;
-
-  // 阴影
-  shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
-  shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
-  shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.16);
-};
-
-// 暗色主题变量（基于设计稿）
-@dark-theme: {
-  // 背景色 - 深色系
-  bg-primary: #101318;
-  bg-secondary: #171a21;
-  bg-tertiary: #2e3137;
-  bg-hover: #333333;
-  bg-card: #171a21;
-  bg-radio: #22252e;
-  bg-select: #22252E;
-
-  // 文字颜色
-  text-primary: rgba(255, 255, 255, 0.95);
-  text-secondary: rgba(255, 255, 255, 0.65);
-  text-tertiary: rgba(255, 255, 255, 0.45);
-  text-disabled: rgba(255, 255, 255, 0.5);
-  text-inverse: rgba(0, 0, 0, 0.88);
-
-  // 边框颜色
-  border-primary: rgba(255, 255, 255, 0.3);
-  border-secondary: #303030;
-  border-light: #2a2a2a;
-  border-radio: rgba(255, 255, 255, 0.65);
-
-  // 业务主题色
-  primary-color: #0087c7;
-  info-color: #0087c7;
-  success-color: #52c41a;
-  warning-color: #F27B31;
-  error-color: #ff4d4f;
-
-  // 状态背景色
-  success-bg: #162312;
-  error-bg: #2a1215;
-  warning-bg: #2b2111;
-  info-bg: #111b26;
-  disabled-bg: #262626;
-
-  // 进度条颜色
-  progress-normal: #b05e2c;
-  progress-success: #39801d;
-  progress-error: #7f2c29;
-  progress-disabled: #343232;
-  progress-delay-normal: #39801d;
-  progress-delay-warning: #b05e2c;
-  progress-delay-error: #7f2c29;
-
-  // Header 颜色
-  header-bg: #22252e;
-  header-text: rgba(255, 255, 255, 0.85);
-  header-shadow: 0 6px 6px 0 #1b1d25;
-
-  // 阴影
-  shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
-  shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
-  shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.65);
-};
+@import './supabase-tokens.less';
diff --git a/frontend/src/styles/variables.less b/frontend/src/styles/variables.less
index f74e58ac2..53f4a1a6b 100644
--- a/frontend/src/styles/variables.less
+++ b/frontend/src/styles/variables.less
@@ -2,9 +2,9 @@
 @font-color: rgba(0, 0, 0, 0.88);
 @basicFontSize: 14px;
 
-// Color
-@primary-color: #0bb9f8;
-@info-color: #0087c7;
+// Color — Supabase emerald palette
+@primary-color: #3ecf8e;
+@info-color: #00c573;
 @success-color: #52c41a;
 @processing-color: @primary-color;
 @warning-color: #ffa30e;
@@ -18,14 +18,14 @@
 @tip-background-color: #ececec;
 @body-color: #fafafa;
 
-@link-color: rgba(0, 0, 0, 0.88);
-@link-hover-color: @primary-color;
-@link-active-color: #0087c7;
+@link-color: #00c573;
+@link-hover-color: #3ecf8e;
+@link-active-color: #24b47e;
 @white: #fff;
 @black: #000;
 
-@hover-color: #2ac6ff;
-@active-color: #009bd4;
+@hover-color: #4ade80;
+@active-color: #24b47e;
 @background-grey: #f4f4f4;
 
 //size
diff --git a/frontend/src/utils/buildSidebarMenu.js b/frontend/src/utils/buildSidebarMenu.js
new file mode 100644
index 000000000..25aa0c8b7
--- /dev/null
+++ b/frontend/src/utils/buildSidebarMenu.js
@@ -0,0 +1,163 @@
+import i18n from '@/i18n';
+
+function linkItem(key, href, labelKey, iconName) {
+  return {
+    type: 'link',
+    key,
+    href,
+    label: i18n.global.t(labelKey),
+    iconName
+  };
+}
+
+function group(key, labelKey, iconName, children) {
+  return {
+    type: 'group',
+    key,
+    label: i18n.global.t(labelKey),
+    iconName,
+    children
+  };
+}
+
+export function buildSidebarMenu({ myCatLog, myAuth, includesDM, isDesktop }) {
+  const primary = [];
+
+  if (myCatLog.includes('CAT_RDP_DS')) {
+    primary.push(linkItem('/system/ccdatasource', '/#/system/ccdatasource', 'nav-shu-ju-ku-guan-li', 'icon-v2-peizhishujuyuan'));
+  }
+  if (includesDM && myCatLog.includes('CAT_DM_PROJECT') && !isDesktop) {
+    primary.push(linkItem('project', '/#/project', 'nav-ci-cd', 'icon-v2-DataBase2'));
+  }
+  if (myCatLog.includes('CAT_RDP_ENV')) {
+    primary.push(linkItem('/system/env', '/#/system/env', 'huan-jing', 'icon-v2-env'));
+  }
+  if (includesDM && myCatLog.includes('CAT_RDP_WORKER_ORDER') && !isDesktop) {
+    primary.push(linkItem('ticket', '/#/ticket', 'gong-dan', 'icon-v2-TicketAuth'));
+  }
+
+  const groups = [];
+
+  const managementChildren = [];
+  const hasAccountSection = myCatLog.includes('CAT_RDP_USER') || myCatLog.includes('CAT_RDP_ROLE');
+  const hasLogSection = myCatLog.includes('CAT_RDP_OP_AUDIT') || myCatLog.includes('CAT_DM_SQL_AUDIT');
+
+  if (hasAccountSection) {
+    managementChildren.push(linkItem('/system/management/accounts', '/#/system/management/accounts/account', 'nav-zhang-hu', 'icon-v2-sub_account'));
+  }
+  if (hasLogSection) {
+    managementChildren.push(linkItem('/system/management/logs', '/#/system/management/logs/operation', 'nav-ri-zhi', 'icon-v2-audit'));
+  }
+  if (managementChildren.length) {
+    groups.push(group('management', 'nav-guan-li', 'icon-v2-role', managementChildren));
+  }
+
+  const dataAccessChildren = [];
+  if (myCatLog.includes('CAT_DM_SYS') && myCatLog.includes('CAT_DM_WORKER')) {
+    dataAccessChildren.push(linkItem('/system/dmmachine', '/#/system/dmmachine', 'nav-cha-xun-ji-qi-lie-biao', 'icon-v2-cluster'));
+  }
+  if (myCatLog.includes('CAT_DM_SYS') && myCatLog.includes('CAT_DM_SECRULES')) {
+    dataAccessChildren.push(linkItem('/system/dmrulelist', '/#/system/dmrulelist', 'an-quan-gui-ze', 'icon-v2-audit'));
+    dataAccessChildren.push(linkItem('/system/dmspeclist', '/#/system/dmspeclist', 'an-quan-gui-fan', 'icon-v2-role'));
+  }
+  if (dataAccessChildren.length) {
+    groups.push(group('data-access', 'nav-shu-ju-fang-wen', 'icon-v2-MyAuth', dataAccessChildren));
+  }
+
+  const integrationChildren = [];
+  if (myCatLog.includes('CAT_DM_IM')) {
+    integrationChildren.push(linkItem('/system/im', '/#/system/im', 'nav-webhook', 'icon-v2-sub_account'));
+  }
+  if (myCatLog.includes('CAT_DM_CICD')) {
+    integrationChildren.push(linkItem('/system/devops', '/#/system/devops', 'nav-git-ops', 'icon-v2-sub_account'));
+  }
+  if (includesDM) {
+    integrationChildren.push(linkItem('/system/sso', '/#/system/sso', 'nav-sso', 'icon-v2-sub_account'));
+  }
+  if (integrationChildren.length) {
+    groups.push(group('integration', 'nav-ji-cheng', 'icon-v2-sub_account', integrationChildren));
+  }
+
+  const settingsChildren = [];
+  settingsChildren.push(linkItem('/system/profile', '/#/system/profile', 'ge-ren-zi-liao', 'profile'));
+  if (myCatLog.includes('CAT_RDP_PRI_PREFERENCE_CONF') && myAuth.includes('RDP_PRI_USER_KV_CONF_R')) {
+    settingsChildren.push(linkItem('/system/preference', '/#/system/preference', 'nav-tong-yong', 'icon-v2-preference'));
+  }
+  if (settingsChildren.length) {
+    groups.push(group('settings', 'nav-she-zhi', 'icon-v2-preference', settingsChildren));
+  }
+
+  return { primary, groups };
+}
+
+export function flattenSidebarMenu(menu) {
+  const flat = [];
+
+  function walk(nodes) {
+    nodes.forEach((node) => {
+      if (node.type === 'link') {
+        flat.push(node);
+        return;
+      }
+      if (node.children) {
+        walk(node.children);
+      }
+    });
+  }
+
+  walk(menu.primary || []);
+  (menu.groups || []).forEach((groupItem) => {
+    walk(groupItem.children || []);
+  });
+
+  return flat;
+}
+
+export function collectSidebarKeys(menu) {
+  const keys = [];
+
+  function walk(nodes) {
+    nodes.forEach((node) => {
+      if (node.type === 'link') {
+        keys.push(node.key);
+        return;
+      }
+      if (node.type === 'subgroup' || node.type === 'group') {
+        keys.push(node.key);
+      }
+      if (node.children) {
+        walk(node.children);
+      }
+    });
+  }
+
+  walk(menu.primary || []);
+  (menu.groups || []).forEach((groupItem) => {
+    walk(groupItem.children || []);
+  });
+
+  return keys;
+}
+
+export function findSidebarParentKeys(menu, activeKey) {
+  const parents = [];
+
+  function walk(nodes, ancestors) {
+    nodes.forEach((node) => {
+      const nextAncestors = [...ancestors, node.key];
+      if (node.type === 'link' && node.key === activeKey) {
+        parents.push(...ancestors);
+        return;
+      }
+      if (node.children) {
+        walk(node.children, nextAncestors);
+      }
+    });
+  }
+
+  (menu.groups || []).forEach((groupItem) => {
+    walk(groupItem.children || [], [groupItem.key]);
+  });
+
+  return parents;
+}
diff --git a/frontend/src/utils/convertTableColumns.js b/frontend/src/utils/convertTableColumns.js
new file mode 100644
index 000000000..ce652d3f7
--- /dev/null
+++ b/frontend/src/utils/convertTableColumns.js
@@ -0,0 +1,16 @@
+export function convertTableColumns(columns = []) {
+  return columns.map((col, index) => {
+    const key = col.key || col.dataIndex || col.slot || `col-${index}`;
+    return {
+      title: col.title,
+      dataIndex: col.key || col.dataIndex,
+      key,
+      width: col.width,
+      minWidth: col.minWidth,
+      align: col.align,
+      fixed: col.fixed,
+      ellipsis: col.ellipsis,
+      __slot: col.slot
+    };
+  });
+}
diff --git a/frontend/src/views/consoleJob/index.vue b/frontend/src/views/consoleJob/index.vue
index 8dab024de..3f1f1d0f3 100644
--- a/frontend/src/views/consoleJob/index.vue
+++ b/frontend/src/views/consoleJob/index.vue
@@ -32,7 +32,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <a-button type="primary" @click="getConsoleJobList">{{ $t('cha-xun') }}</a-button>
+          <a-button type="primary" ghost @click="getConsoleJobList">{{ $t('cha-xun') }}</a-button>
         </a-form-item>
       </a-form>
       <div class="page-header-function">
@@ -82,15 +82,15 @@
       </template>
     </a-table>
     <div class="page-footer-container">
-      <div class="page-footer-paging">
-        <Button :disabled="page === 1" style="font-size: 16px; padding: 0 16px 0 10px" @click="handlePre">
-          <Icon type="ios-arrow-back" style="font-size: 16px" />
+      <div class="page-footer-paging list-page-footer-nav">
+        <Button :disabled="page === 1" @click="handlePre">
+          <Icon type="ios-arrow-back" />
           {{ $t('shang-yi-ye') }}
         </Button>
-        <span style="margin: 0 10px">{{ $t('di-page-ye', [page]) }}</span>
-        <Button :disabled="noMoreData" style="font-size: 16px; padding: 0 16px 0 10px; margin-left: 5px" @click="handleNext">
-          <Icon type="ios-arrow-forward" style="font-size: 16px" />
+        <span>{{ $t('di-page-ye', [page]) }}</span>
+        <Button :disabled="noMoreData" @click="handleNext">
           {{ $t('xia-yi-ye') }}
+          <Icon type="ios-arrow-forward" />
         </Button>
       </div>
     </div>
diff --git a/frontend/src/views/devops/index.vue b/frontend/src/views/devops/index.vue
index 0183f956e..bc41ab6ed 100644
--- a/frontend/src/views/devops/index.vue
+++ b/frontend/src/views/devops/index.vue
@@ -2,11 +2,6 @@
   <div class="devops">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem>{{ $t('ci-cd') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <div class="content">
           <div class="option">
             <div class="left">
@@ -18,10 +13,10 @@
                 @on-clear="handleQueryClear"
                 clearable
               />
-              <Button type="primary" @click="handleQuery">{{ $t('cha-xun') }}</Button>
+              <Button type="primary" ghost @click="handleQuery">{{ $t('cha-xun') }}</Button>
             </div>
             <div class="right">
-              <Button @click="handleAdd" type="primary" ghost style="margin-right: 10px" icon="md-add">
+              <Button @click="handleAdd" type="primary" style="margin-right: 10px" icon="md-add">
                 {{ $t('ti-gong-zhe') }}
               </Button>
               <Button @click="init" :loading="loading">
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 566b5c17e..bb4128ab9 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -1,131 +1,46 @@
 <template>
-  <div class="home">
+  <div class="home" :class="{ 'home--sql': isSqlRoute }">
     <dm-water-mark :input-text="watermarkStr" ref="watermark" v-if="!isDesktop && globalSetting.enableWaterMark" />
-    <div class="header">
-      <div class="brand-container" @click="handleGoBackHome">
-        <span class="product-title-frame">
-          <img class="product-title" :src="headerTitleUrl" alt="CloudDM" />
-        </span>
-      </div>
-      <navbar style="flex: 1" />
-      <div class="user-info" v-if="!isDesktop">
-        <span v-if="displayVersion" class="app-version-badge" translate="no">{{ displayVersion }}</span>
-        <Dropdown @on-click="handleGoHelp" transfer>
-          <CustomIcon type="icon-v2-help" hoverStyle size="18px" />
-          <template #list>
-            <DropdownItem name="document">
-              <CustomIcon type="icon-v2-ic_document" hoverStyle size="14px" />
-              {{ $t('wen-dang') }}
-            </DropdownItem>
-            <DropdownItem name="contact">
-              <CustomIcon type="icon-v2-icon_contact" hoverStyle size="14px" />
-              {{ $t('lian-xi-wo-men') }}
-            </DropdownItem>
-          </template>
-        </Dropdown>
-        <!-- 主题切换按钮 -->
-        <a-dropdown v-if="userInfo.menuItems && userInfo.menuItems.includes('/ccsystem/console_job')" :trigger="['click']">
-          <span class="message-icon">
-            <cc-iconfont :size="20" name="message" />
-            <span v-if="messageList.length > 0" class="message-point"></span>
-          </span>
-          <template #overlay>
-            <p class="title">{{ $t('xiao-xi-zhong-xin') }}</p>
-            <div v-for="message in messageList" :key="message.id" class="message-item" @click="handleGoMessageDetail(message.id)">
-              <p>{{ CONSOLE_JOB_NAME[message.label] }}{{ $t('shi-bai') }}</p>
-              <p class="time">{{ message.gmtModified || formatTime('YYYY-MM-DD HH:mm:ss') }}</p>
-            </div>
-            <div class="message-footer" @click="handleGoMessage">
-              {{ $t('cha-kan-geng-duo') }}
-            </div>
-          </template>
-        </a-dropdown>
-        <!--        语言切换-->
-        <LangSwitcher>
-          <template #trigger>
-            <CustomIcon hover-style type="icon-v2-yuyanqiehuan" size="20px" />
-          </template>
-        </LangSwitcher>
-        <div class="domain" translate="no">{{ userInfo.username }}</div>
-        <div v-click-out-hide="hideMenu" class="avatar" @click="showMenu = !showMenu">
-          <img :alt="$t('useravatar')" src="../../assets/head.png" />
-        </div>
-        <div v-show="showMenu" class="menu">
-          <div class="one">
-            <div class="avatar">
-              <img :alt="$t('useravatar')" src="../../assets/head.png" width="28" height="28" />
-            </div>
-            <div class="domain">
-              <div>
-                {{ userInfo.username }}
-              </div>
-              <div v-if="!isInternalUser" class="provider-wrap">{{ $t('lai-yuan') }}: {{ userInfo.bindType }}</div>
-              <div class="uid-wrap" @click.stop="handleCopyApplyCode(userInfo.uid)">
-                <span>{{ `UID: ${userInfo.uid}` }}</span>
-                <CustomIcon type="icon-v2-CopyOutline" size="12px" hoverStyle leftMargin />
-              </div>
-            </div>
-            <!--            <span v-if="userInfo.accountType!=='PRIMARY_ACCOUNT'">-->
-            <!--              <a-popover v-model="showAccount" placement="left" trigger="hover">-->
-            <!--              <p slot="content">-->
-            <!--                {{ userInfo.loginAccount }}-->
-            <!--              </p>-->
-            <!--              <cc-iconfont style="margin-left: 10px;margin-right: 6px" name="account"-->
-            <!--                           color="#555555"-->
-            <!--                           :size="20"></cc-iconfont>-->
-            <!--            </a-popover>-->
-            <!--            <a @click="handleCopy(userInfo.loginAccount)">{{ $t('fu-zhi-zhang-hao') }}</a>-->
-            <!--            </span>-->
+
+    <template v-if="isSqlRoute && showChild">
+      <div class="sql-layout">
+        <header class="sql-compact-header">
+          <div class="sql-compact-header__brand" @click="handleGoAppHome">
+            <AppBrandLogo compact />
+            <span class="sql-compact-header__title">{{ $t('sql-cha-xun') }}</span>
           </div>
-          <div class="two">
-            <div v-if="userInfo.account">{{ $t('zhang-hao') }}: {{ userInfo.account }}</div>
-            <div v-if="!isInternalUser">{{ $t('lai-yuan') }}: {{ userInfo.bindType }}</div>
-            <div v-if="userInfo.phone">{{ $t('dian-hua') }}: {{ userInfo.phone }}</div>
-            <div>{{ $t('you-xiang') }}: {{ userInfo.email }}</div>
-            <!--            <div v-if="userInfo.accountType!=='PRIMARY_ACCOUNT'">{{$t('suo-shu-zhu-zhang-hao')}}: {{ userInfo.pusername }}({{userInfo.pemail}})</div>-->
+          <div class="sql-compact-header__actions">
+            <button type="button" class="sql-compact-header__back" @click="handleGoAppHome">
+              <span>{{ $t('fan-hui-gong-zuo-tai') }}</span>
+            </button>
+            <AppUserActions compact @check-version="checkVersion(true)" />
           </div>
-          <!--          <div class="three" v-if="isAsia">-->
-          <!--            <div @click="goUserCenter">-->
-          <!--              <a-icon style="font-size:12px;color:#555555" type="user" />-->
-          <!--              {{ $t('zhang-hu-zhong-xin') }}-->
-          <!--            </div>-->
-          <!--            <div @click="goMyAuth" v-if="userInfo.accountType !== 'PRIMARY_ACCOUNT'">-->
-          <!--              <a-icon style="font-size:12px;color:#555555" type="crown" />-->
-          <!--              {{ $t('wo-de-quan-xian') }}-->
-          <!--            </div>-->
-          <!--          </div>-->
-          <a v-if="isOidcLogout" class="four block" href="logout" @click="closeWebSocket">
-            {{ $t('tui-chu-zhang-hao') }}
-          </a>
-          <a v-if="!isOidcLogout" class="four block" @click="logout">
-            {{ $t('tui-chu-zhang-hao') }}
-          </a>
+        </header>
+        <div class="sql-layout-body">
+          <router-view />
         </div>
       </div>
-      <div v-else style="display: flex">
-        <div class="version" style="display: flex; align-items: center; position: relative" v-if="displayVersion">
-          <a-button class="deemph-button" type="link" size="large" @click="checkVersion(true)" style="font-weight: bold">
-            {{ displayVersion }}
-            <span style="color: red" v-if="version.newVersion">{{ $t('new') }}</span>
-          </a-button>
-        </div>
-        <a-tooltip trigger="hover">
-          <cc-iconfont :size="20" name="help" style="margin-right: 30px" />
-          <template #title>
-            <div style="display: flex; flex-direction: column; align-items: center">
-              <div style="margin-bottom: 5px">{{ $t('jia-ru-wei-xin-jiao-liu-qun') }}</div>
-              <img src="../../assets/wechat-clouddm.png" :width="100" :height="100" />
+    </template>
+
+    <template v-else-if="showChild">
+      <div class="app-layout">
+        <AppSidebar />
+        <main class="app-main">
+          <div class="app-main-body">
+            <div class="app-main-card">
+              <AppContentHeader @check-version="checkVersion(true)" />
+              <div class="app-main-card__body">
+                <router-view />
+              </div>
             </div>
-          </template>
-        </a-tooltip>
+          </div>
+        </main>
       </div>
-    </div>
+    </template>
+
     <div class="user-expr-tip" v-if="userInfo.subAccountPwdValidDays !== null && userInfo.subAccountPwdValidDays < limitDays">
       {{ $t('gen-ju-zhu-zhang-hao-she-zhi-de-mi-ma-shi-xiao-ce-lue', [userInfo.subAccountPwdValidDays + 1]) }}
     </div>
-    <div class="content-container" v-if="showChild">
-      <router-view />
-    </div>
     <CCModal v-model="showDetailModal" :title="selectedCellDetail.column.property" v-if="showDetailModal" key="showDetailModal" :width="800">
       <div class="cell-detail">
         <a-textarea v-model:value="cellDetailContent" :rows="15" readonly style="font-family: monospace; font-size: 12px" />
@@ -172,29 +87,27 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex';
-import Navbar from '@/components/Navbar';
-import LangSwitcher from '@/components/LangSwitcher';
+import AppSidebar from '@/components/layout/AppSidebar';
+import AppBrandLogo from '@/components/layout/AppBrandLogo';
+import AppContentHeader from '@/components/layout/AppContentHeader';
+import AppUserActions from '@/components/layout/AppUserActions';
 import { setApprovalProcessMixin, setOpPasswordMixin } from '@/mixins/modal';
 import enterOpPwdMixin from '@/mixins/modal/enterOpPwdMixin';
-import { CONSOLE_JOB_NAME, LOGIN_TYPE } from '@/const';
 import XEClipboard from 'xe-clipboard';
 import DmWaterMark from '@/components/widgets/DmWaterMark';
 import store from '@/store';
 import dayjs from 'dayjs';
-import { handleCopy } from '@/utils/clipboard';
 import fecha from 'fecha';
-import { UPDATE_USERINFO } from '@/store/mutationTypes';
-import { hasWebSocketInstance, webSocketClose } from '@/services/socket';
 import { EVENT_BUS_NAME_LIST } from '@/utils/eventBusName';
-import { setAppLanguage } from '@/i18n';
-import { WEBSIDE_LOGO_HEADER } from '@/utils/pluginResource';
 
 export default {
   name: 'Home',
   components: {
     DmWaterMark,
-    Navbar,
-    LangSwitcher
+    AppSidebar,
+    AppBrandLogo,
+    AppContentHeader,
+    AppUserActions
   },
   data() {
     return {
@@ -227,12 +140,7 @@ export default {
       cellDetailContent: '',
       cellDetailLoading: false,
       hasMoreData: false,
-      showMenu: false,
-      showAccount: false,
-      hasMessage: false,
-      messageList: [],
       limitDays: 6,
-      CONSOLE_JOB_NAME,
       watermarkStr: '',
       store,
       fecha,
@@ -244,14 +152,8 @@ export default {
     ...mapGetters(['isDesktop', 'displayVersion', 'includesDM', 'isInternalUser']),
     ...mapState(['userInfo', 'myAuth', 'globalSetting', 'defaultRedirectUrl', 'dmGlobalSetting', 'remainTrialDay']),
     ...mapGetters(['isSaas']),
-    headerTitleUrl() {
-      return WEBSIDE_LOGO_HEADER;
-    },
-    isOidcLogout() {
-      return this.userInfo.bindType === LOGIN_TYPE.OIDC && this.userInfo.loginType === LOGIN_TYPE.OIDC;
-    },
-    getDmProductClusterList() {
-      return [];
+    isSqlRoute() {
+      return this.$route.path === '/sql' || this.$route.path.startsWith('/sql/');
     }
   },
   async created() {
@@ -463,18 +365,17 @@ export default {
         this.$router.push({ path: this.defaultRedirectUrl });
       }
     },
+    handleGoAppHome() {
+      if (this.isSqlRoute) {
+        const target = this.defaultRedirectUrl && this.defaultRedirectUrl !== '/sql' ? this.defaultRedirectUrl : '/project';
+        this.$router.push({ path: target }).catch(() => {});
+        return;
+      }
+      this.handleGoBackHome();
+    },
     goAsyncJobList() {
       this.$router.push({ name: 'ASYNC_JOB_LIST' });
     },
-    async listLastFiveFailedJob() {
-      const res = await this.$services.dmConsoleJobListLastFiveFailedJob();
-
-      if (res.success) {
-        if (res.data.length > 0) {
-          this.messageList = res.data;
-        }
-      }
-    },
     _setApprovalProcessModal() {
       this.$store.dispatch('getUserInfo');
       this.setApprovalProcessModal();
@@ -486,61 +387,9 @@ export default {
     goUserConfig() {
       this.$router.push({ name: 'User_Config' });
     },
-    hideMenu() {
-      this.showMenu = false;
-    },
-    closeWebSocket() {
-      if (hasWebSocketInstance()) {
-        webSocketClose();
-      }
-    },
-    async logout() {
-      const res = await this.$services.logout();
-
-      if (res.success) {
-        this.closeWebSocket();
-        await this.$store.commit(UPDATE_USERINFO);
-        // this.$refs.watermark.removeMaskDiv();
-        await this.$router.push({ name: 'Login' });
-      }
-    },
-    handleGoHelp(data) {
-      if (data === 'document') {
-        let url = `${store.state.dmDocUrlPrefix}/intro/product_intro`;
-        if (this.isDesktop) {
-          url = `${store.state.dmDocUrlPrefix}/dmp-doc/releaseinfo/desktop_latest`;
-        }
-        window.open(url);
-      } else if (data === 'contact') {
-        window.open(store.state.contactUsUrl);
-      }
-    },
-    handleGoMessage() {
-      this.$router.push({ path: '/system/info_center' }).catch(() => {});
-    },
-    handleGoMessageDetail(id) {
-      this.$router.push({ path: `/system/console_job/${id}` });
-    },
-    goUserCenter() {
-      this.$router.push({ path: '/userCenter' });
-    },
-    goMyAuth() {
-      this.$router.push({ path: '/system/permission' });
-    },
 
     handleCloseModal() {
       this.showInactiveModal = false;
-    },
-    handleCopyApplyCode(data) {
-      handleCopy(data);
-      this.$Message.success(this.$t('fu-zhi-cheng-gong'));
-    }
-  },
-  watch: {
-    userInfo(val) {
-      if (val.showMessage) {
-        this.listLastFiveFailedJob();
-      }
     }
   }
 };
@@ -556,200 +405,18 @@ export default {
     width: 100%;
     height: 16px;
     line-height: 16px;
-    background: rgba(255, 24, 21, 0.3);
-    position: absolute;
-    margin-top: 48px;
-    text-align: center;
-  }
-
-  //overflow: hidden;
-  .header {
-    background: var(--header-bg);
-    display: flex;
-    justify-content: space-between;
-    color: var(--header-text);
-    height: 49px;
-    line-height: 48px;
-    background-position: left;
-    background-size: 200px 49px;
-    background-repeat: no-repeat;
+    background: rgba(239, 68, 68, 0.15);
     position: fixed;
-    left: 0;
     top: 0;
-    width: 100%;
-    z-index: 999;
-    box-shadow: var(--header-shadow);
-
-    .ant-menu-dark {
-      background: none;
-    }
-
-    .brand-container {
-      padding: 0 15px;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      .product-title-frame {
-        width: 184px;
-        height: 32px;
-        flex: 0 0 184px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-      }
-
-      .product-title {
-        width: 184px;
-        height: 32px;
-        display: block;
-        object-fit: contain;
-        object-position: center;
-      }
-    }
-
-    .ant-menu-horizontal {
-      line-height: 48px;
-    }
-
-    .user-info {
-      display: flex;
-      align-items: center;
-      position: relative;
-
-      & > i {
-        opacity: 0.7;
-        cursor: pointer;
-      }
-
-      & > *:not(:last-child) {
-        margin-right: 20px;
-        font-size: 14px;
-      }
-
-      .icon-help {
-        font-size: 20px;
-      }
-
-      .app-version-badge {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 62px;
-        height: 24px;
-        padding: 0 12px;
-        border: 1px solid rgba(255, 255, 255, 0.28);
-        border-radius: 12px;
-        background: rgba(255, 255, 255, 0.1);
-        color: #fff;
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 22px;
-        letter-spacing: 0;
-        white-space: nowrap;
-      }
-
-      .avatar {
-        cursor: pointer;
-        width: 28px;
-        height: 28px;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      .message-icon {
-        position: relative;
-        cursor: pointer;
-
-        i {
-          opacity: 0.7;
-        }
-
-        .message-point {
-          position: absolute;
-          background: #ff6e0d;
-          width: 6px;
-          height: 6px;
-          display: block;
-          border-radius: 50%;
-          right: -2px;
-          top: 6px;
-        }
-      }
-
-      .menu {
-        z-index: 999;
-        position: absolute;
-        width: 300px;
-        top: 40px;
-        right: 0;
-        color: rgba(0, 0, 0, 0.88);
-        box-shadow: 1px 1px 6px 0px rgba(164, 164, 164, 0.66);
-        background: white;
-
-        .avatar {
-          width: 42px;
-          height: 42px;
-        }
-
-        & > div:not(:last-child) {
-          border-bottom: 1px solid rgba(223, 223, 223, 1);
-        }
-
-        .one {
-          display: flex;
-          align-items: center;
-          padding: 20px;
-
-          .domain {
-            margin-left: 10px;
-            font-size: 14px;
-          }
-
-          .provider-wrap {
-            color: #8c8c8c;
-            font-size: 12px;
-            margin-top: 4px;
-          }
-        }
-
-        .two {
-          padding: 20px;
-          line-height: 22px;
-
-          div {
-            margin-left: 0;
-          }
-        }
-
-        .three {
-          padding: 15px 24px;
-
-          div {
-            cursor: pointer;
-            height: 22px;
-            line-height: 22px;
-
-            i {
-              margin-right: 15px;
-            }
-          }
-        }
+    left: 0;
+    z-index: 1001;
+    text-align: center;
+    font-size: 12px;
+    color: var(--error-color);
+  }
 
-        .four {
-          height: 40px;
-          line-height: 40px;
-          text-align: center;
-          background: #ececec;
-          color: #ff6e0d;
-          cursor: pointer;
-        }
-      }
-    }
+  &--sql .user-expr-tip {
+    top: 44px;
   }
 
   .footer {
@@ -827,10 +494,9 @@ export default {
   }
 
   .content-container {
-    padding-top: 48px;
+    // padding-top defined in app-shell.less
     height: 100%;
     overflow-y: auto;
-    height: 100%;
   }
 }
 
diff --git a/frontend/src/views/im/index.vue b/frontend/src/views/im/index.vue
index 4ad9520d2..b4bf25f23 100644
--- a/frontend/src/views/im/index.vue
+++ b/frontend/src/views/im/index.vue
@@ -2,19 +2,14 @@
   <div class="devops">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem>{{ $t('im') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <div class="content">
           <div class="option">
             <div class="left">
               <Input v-model="searchText" style="width: 280px; margin-right: 10px" clearable :placeholder="$t('shu-ru-ming-cheng-cha-zhao')" />
-              <Button type="primary">{{ $t('cha-xun') }}</Button>
+              <Button type="primary" ghost>{{ $t('cha-xun') }}</Button>
             </div>
             <div class="right">
-              <Button @click="handleImCreateDrawer" type="primary" ghost style="margin-right: 10px" icon="md-add">
+              <Button @click="handleImCreateDrawer" type="primary" style="margin-right: 10px" icon="md-add">
                 {{ $t('ti-gong-zhe') }}
               </Button>
               <Button @click="init" :loading="loading">
diff --git a/frontend/src/views/project/index.vue b/frontend/src/views/project/index.vue
index 626611891..e9a7ac267 100644
--- a/frontend/src/views/project/index.vue
+++ b/frontend/src/views/project/index.vue
@@ -2,11 +2,6 @@
   <div class="project-account">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem to="/project">{{ $t('xiang-mu-lie-biao') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <div class="content">
           <div class="option">
             <div class="left">
@@ -17,13 +12,12 @@
                 @on-enter="handleQuery"
                 @on-clear="handleQueryClear"
               />
-              <Button type="primary" @click="handleQuery">{{ $t('cha-xun') }}</Button>
+              <Button type="primary" ghost @click="handleQuery">{{ $t('cha-xun') }}</Button>
             </div>
             <div class="right">
               <Button
                 @click="handleShowAddProjectModal"
                 type="primary"
-                ghost
                 style="margin-right: 10px"
                 icon="md-add"
                 v-if="myAuth.includes('DM_PROJECT_MANAGE')"
@@ -57,20 +51,20 @@
               </template>
             </Table>
           </div>
-          <div class="footer">
-            <Page
-              :total="pageTotal"
-              show-total
-              show-elevator
-              @on-change="handlePageChange"
-              show-sizer
-              v-model="pageNum"
-              :page-size="pageSize"
-              @on-page-size-change="handlePageSizeChange"
-            />
-          </div>
         </div>
       </div>
+      <div class="footer">
+        <Page
+          :total="pageTotal"
+          show-total
+          show-elevator
+          @on-change="handlePageChange"
+          show-sizer
+          v-model="pageNum"
+          :page-size="pageSize"
+          @on-page-size-change="handlePageSizeChange"
+        />
+      </div>
     </div>
     <CCModal :title="getModalTitle" v-model="projectDialogShow" @on-cancel="handleCloseModal" :autoClean="false" :width="projectDialogWidth">
       <!-- Step BASIC1 -->
@@ -1074,6 +1068,9 @@ export default {
 <style lang="less" scoped>
 .project-account {
   height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .project {
diff --git a/frontend/src/views/project/projectDetail.vue b/frontend/src/views/project/projectDetail.vue
index d58462009..5019f37c0 100644
--- a/frontend/src/views/project/projectDetail.vue
+++ b/frontend/src/views/project/projectDetail.vue
@@ -86,7 +86,7 @@
               </div>
             </div>
             <div class="right">
-              <Button class="btn-wrap" type="primary" ghost icon="md-add" @click="handleGitOpsAdd" v-if="projectInfo.status === 'NORMAL'">
+              <Button class="btn-wrap" type="primary" icon="md-add" @click="handleGitOpsAdd" v-if="projectInfo.status === 'NORMAL'">
                 {{ $t('tian-jia-git-ops') }}
               </Button>
               <Button class="btn-wrap" @click="handleOperate('delate')" v-if="projectInfo.status === 'ARCHIVE'">
@@ -196,7 +196,7 @@
         <div class="option">
           <div class="left">
             <Input style="width: 280px; margin-right: 10px" clearable v-model="keyword" @on-enter="handleQuery" @on-clear="handleQueryClear" />
-            <Button @click="handleQuery" type="primary">{{ $t('cha-xun') }}</Button>
+            <Button @click="handleQuery" type="primary" ghost>{{ $t('cha-xun') }}</Button>
           </div>
         </div>
         <div class="table-container">
diff --git a/frontend/src/views/security/rule/index.vue b/frontend/src/views/security/rule/index.vue
index 99ab8c33f..82520fa3b 100644
--- a/frontend/src/views/security/rule/index.vue
+++ b/frontend/src/views/security/rule/index.vue
@@ -2,13 +2,6 @@
   <div class="rule-list-container">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb v-if="breadcrumbList.length">
-            <BreadcrumbItem v-for="breadcrumb in breadcrumbList" :to="breadcrumb.to" :key="breadcrumb.label">
-              {{ breadcrumb.label }}
-            </BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <Tabs v-model="activeTab" @on-click="handleTabClick">
           <TabPane :label="$t('cha-xun-gui-ze')" name="QUERY"></TabPane>
           <TabPane :label="$t('tuo-min-gui-ze')" name="SENSITIVE"></TabPane>
@@ -17,17 +10,10 @@
           <div class="option">
             <div class="left">
               <Input v-model="QUERY.search" style="width: 280px; margin-right: 10px" clearable></Input>
-              <Button @click="getRuleSearch" type="primary">{{ $t('cha-xun') }}</Button>
+              <Button @click="getRuleSearch" type="primary" ghost>{{ $t('cha-xun') }}</Button>
             </div>
             <div class="right">
-              <Button
-                @click="handleAddRule"
-                type="primary"
-                ghost
-                style="margin-right: 10px"
-                icon="md-add"
-                v-if="myAuth.includes('DM_SECRULES_MANAGE')"
-              >
+              <Button @click="handleAddRule" type="primary" style="margin-right: 10px" icon="md-add" v-if="myAuth.includes('DM_SECRULES_MANAGE')">
                 {{ $t('xin-jian-gui-ze') }}
               </Button>
               <Button @click="getRuleList">
@@ -78,17 +64,10 @@
           <div class="option">
             <div class="left">
               <Input v-model="SENSITIVE.search" style="width: 280px; margin-right: 10px" clearable></Input>
-              <Button @click="getRuleSearch" type="primary">{{ $t('cha-xun') }}</Button>
+              <Button @click="getRuleSearch" type="primary" ghost>{{ $t('cha-xun') }}</Button>
             </div>
             <div class="right">
-              <Button
-                @click="handleAddRule"
-                type="primary"
-                ghost
-                style="margin-right: 10px"
-                icon="md-add"
-                v-if="myAuth.includes('DM_SECRULES_MANAGE')"
-              >
+              <Button @click="handleAddRule" type="primary" style="margin-right: 10px" icon="md-add" v-if="myAuth.includes('DM_SECRULES_MANAGE')">
                 {{ $t('xin-jian-gui-ze') }}
               </Button>
               <Button @click="getRuleList">
@@ -177,7 +156,6 @@ export default {
       forceEvent: null,
       supportTypeList: ['int', 'integer', 'float', 'decimal', 'bool', 'string', 'date', 'time', 'datetime'],
       isEdit: false,
-      breadcrumbList: [{ label: this.$t('gui-ze-lie-biao') }],
       showForceRuleModal: false,
       forceRuleModalTitle: '',
       forceRuleModalText: '',
diff --git a/frontend/src/views/security/spec/index.vue b/frontend/src/views/security/spec/index.vue
index 68587aa5a..d711ae36e 100644
--- a/frontend/src/views/security/spec/index.vue
+++ b/frontend/src/views/security/spec/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="spec-list-container">
-    <table-list-layout :breadcrumb-list="breadcrumbList" :tableData="specList" :set-show-data="setShowData" ref="layout">
+    <table-list-layout :tableData="specList" :set-show-data="setShowData" ref="layout">
       <template v-slot:left>
         <Input v-model="search" style="width: 280px; margin-right: 10px"></Input>
-        <Button @click="getSpecList" type="primary">{{ $t('cha-xun') }}</Button>
+        <Button @click="getSpecList" type="primary" ghost>{{ $t('cha-xun') }}</Button>
       </template>
       <template v-slot:right>
-        <Button @click="handleAddSpec" type="primary" ghost style="margin-right: 10px" icon="md-add">
+        <Button @click="handleAddSpec" type="primary" style="margin-right: 10px" icon="md-add">
           {{ $t('xin-jian-gui-fan') }}
         </Button>
         <Button @click="getSpecList">
@@ -101,7 +101,6 @@ export default {
     return {
       showEditSpecNameModal: false,
       showEditSpecDescModal: false,
-      breadcrumbList: [{ label: this.$t('gui-fan-lie-biao') }],
       forceEvent: {
         type: '',
         data: {}
diff --git a/frontend/src/views/security/spec/ruleRange.vue b/frontend/src/views/security/spec/ruleRange.vue
index 30da5fa29..f3ab80080 100644
--- a/frontend/src/views/security/spec/ruleRange.vue
+++ b/frontend/src/views/security/spec/ruleRange.vue
@@ -877,13 +877,12 @@ export default {
           <div class="option">
             <div class="left">
               <Input v-model="search" style="width: 280px; margin-right: 10px"></Input>
-              <Button @click="getSpecRuleRange" type="primary">{{ $t('cha-xun') }}</Button>
+              <Button @click="getSpecRuleRange" type="primary" ghost>{{ $t('cha-xun') }}</Button>
             </div>
             <div class="right">
               <Button
                 @click="handleShowAddRangeModal(false)"
                 type="primary"
-                ghost
                 style="margin-right: 10px"
                 icon="md-add"
                 v-if="myAuth.includes('DM_SECRULES_MANAGE')"
diff --git a/frontend/src/views/security/spec/specDetail.vue b/frontend/src/views/security/spec/specDetail.vue
index 1d35bc52d..a84cbc6e8 100644
--- a/frontend/src/views/security/spec/specDetail.vue
+++ b/frontend/src/views/security/spec/specDetail.vue
@@ -17,7 +17,7 @@
           <div class="option">
             <div class="left">
               <Input v-model="QUERY.search" style="width: 280px; margin-right: 10px" clearable></Input>
-              <Button @click="handleRuleSearch('search')" type="primary">
+              <Button @click="handleRuleSearch('search')" type="primary" ghost>
                 {{ $t('cha-xun') }}
               </Button>
             </div>
@@ -80,7 +80,7 @@
           <div class="option">
             <div class="left">
               <Input v-model="SENSITIVE.search" style="width: 280px; margin-right: 10px" clearable></Input>
-              <Button @click="handleRuleSearch" type="primary">{{ $t('cha-xun') }}</Button>
+              <Button @click="handleRuleSearch" type="primary" ghost>{{ $t('cha-xun') }}</Button>
             </div>
             <div class="right">
               <Button @click="getSpecDetail">
diff --git a/frontend/src/views/sql/components/DataSourceIcon.vue b/frontend/src/views/sql/components/DataSourceIcon.vue
index eefeb29ce..c52db897b 100644
--- a/frontend/src/views/sql/components/DataSourceIcon.vue
+++ b/frontend/src/views/sql/components/DataSourceIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="display: inline-block" class="datasource-icon">
-    <cc-data-source-icon color="#ffffff" background="#0087c7" :size="12" :type="type" :instance-type="instanceType" />
+    <cc-data-source-icon color="#171717" background="#3ecf8e" :size="12" :type="type" :instance-type="instanceType" />
   </div>
 </template>
 <script>
@@ -14,7 +14,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .datasource-icon {
-  background: #0071af;
+  background: #24b47e;
   width: 16px;
   height: 16px;
   line-height: 16px;
diff --git a/frontend/src/views/sql/components/DataSourceTree.vue b/frontend/src/views/sql/components/DataSourceTree.vue
index ade8d72ec..89926dc58 100644
--- a/frontend/src/views/sql/components/DataSourceTree.vue
+++ b/frontend/src/views/sql/components/DataSourceTree.vue
@@ -1255,13 +1255,13 @@ export default {
 }
 
 .data-source-container {
-  background: #ffffff;
+  background: var(--bg-secondary);
   height: 100%;
   float: left;
   display: flex;
   flex-direction: column;
   position: relative;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid var(--border-primary);
 
   .tree-resize {
     height: 100%;
@@ -1280,7 +1280,7 @@ export default {
     right: -28px;
     z-index: 9;
     top: 7px;
-    background: #fff;
+    background: var(--bg-card);
     padding: 2px 5px;
     cursor: pointer;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 2px;
diff --git a/frontend/src/views/sql/components/Operators.vue b/frontend/src/views/sql/components/Operators.vue
index 80ad16d66..d10013f58 100644
--- a/frontend/src/views/sql/components/Operators.vue
+++ b/frontend/src/views/sql/components/Operators.vue
@@ -4,19 +4,19 @@
       <div class="left">
         <ButtonGroup class="operator-btn-group">
           <Button size="small" type="primary" :disabled="isRunning" :loading="tab.running" @click="handleRun('run')">
-            <div style="display: flex; align-items: center; padding-top: 2px">
+            <div class="operator-btn-content">
               <CustomIcon v-if="!tab.running" type="icon-v2-ConsoleRun" :color="tab.running ? '#999' : '#fff'" size="14px" right-margin="4px" />
               <span>{{ $t('zhi-hang') }}</span>
             </div>
           </Button>
           <Button size="small" v-if="isSupportExplain" :disabled="isRunning" @click="handlePlan('plan')">
-            <div style="display: flex; align-items: center; padding-top: 2px">
+            <div class="operator-btn-content">
               <CustomIcon type="icon-v2-ConsolePlan" :color="tab.running ? '#999' : isDark ? '#fff' : '#000'" size="14px" right-margin="4px" />
               <span>{{ $t('ji-hua') }}</span>
             </div>
           </Button>
           <Button size="small" v-if="isSupportCancel" :disabled="isStoping" :loading="tab.stopping" @click="handleStop">
-            <div style="display: flex; align-items: center; padding-top: 2px">
+            <div class="operator-btn-content">
               <CustomIcon
                 v-if="!tab.stopping"
                 type="icon-v2-ConsoleStop"
@@ -28,7 +28,7 @@
             </div>
           </Button>
           <Button size="small" v-if="isSupportFormat" @click="formatSql">
-            <div style="display: flex; align-items: center; padding-top: 2px">
+            <div class="operator-btn-content">
               <CustomIcon type="icon-v2-ConsoleFormat" size="12px" right-margin="2px" />
               <span>{{ $t('ge-shi') }}</span>
             </div>
@@ -217,5 +217,19 @@ export default {
   overflow: hidden;
   white-space: nowrap;
   display: inline-flex;
+
+  :deep(.ivu-btn) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.operator-btn-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding-top: 1px;
+  line-height: 1.2;
 }
 </style>
diff --git a/frontend/src/views/sql/components/SqlEmptyState.vue b/frontend/src/views/sql/components/SqlEmptyState.vue
index dbedcdc8e..4d8779d08 100644
--- a/frontend/src/views/sql/components/SqlEmptyState.vue
+++ b/frontend/src/views/sql/components/SqlEmptyState.vue
@@ -11,7 +11,7 @@
       <div class="empty-actions">
         <div class="action-step">
           <div class="action-icon">
-            <CustomIcon type="icon-v2-tianjiashujuyuan1" size="56" />
+            <CustomIcon type="icon-v2-tianjiashujuyuan1" size="48" />
           </div>
           <div class="action-text">{{ $t('sql-empty-add-datasource') }}</div>
           <Button type="primary" :disabled="!myAuth.includes('RDP_DS_MANAGE')" @click="handleAddDataSource">
@@ -20,12 +20,12 @@
         </div>
 
         <div class="flow-arrow">
-          <CustomIcon type="icon-v2-right-circle-fill" size="28" />
+          <CustomIcon type="icon-v2-right-circle-fill" size="24" />
         </div>
 
         <div class="action-step">
           <div class="action-icon">
-            <CustomIcon type="icon-v2-peizhishujuyuan" size="56" />
+            <CustomIcon type="icon-v2-peizhishujuyuan" size="48" />
           </div>
           <div class="action-text">{{ $t('sql-empty-config-datasource') }}</div>
           <Button type="primary" :disabled="!myAuth.includes('DM_DS_MANAGE')" @click="handleConfigDataSource">
@@ -35,7 +35,7 @@
 
         <div class="action-step" v-if="!myAuth.includes('DM_DS_MANAGE')">
           <div class="action-icon">
-            <CustomIcon type="icon-v2-TicketAuth" size="56" color="#000" />
+            <CustomIcon type="icon-v2-TicketAuth" size="48" />
           </div>
           <div class="action-text">{{ $t('shen-qing-quan-xian') }}</div>
           <Tooltip :content="rootAccountUnsupportedTip" :disabled="!isRootAccount" transfer placement="top">
@@ -48,12 +48,12 @@
         </div>
 
         <div class="flow-arrow" v-if="!myAuth.includes('DM_DS_MANAGE')">
-          <CustomIcon type="icon-v2-right-circle-fill" size="28" />
+          <CustomIcon type="icon-v2-right-circle-fill" size="24" />
         </div>
 
         <div class="action-step">
           <div class="action-icon">
-            <CustomIcon type="icon-v2-zhihangSQLchaxun" size="56" />
+            <CustomIcon type="icon-v2-zhihangSQLchaxun" size="48" />
           </div>
           <div class="action-text">{{ $t('sql-empty-start-query') }}</div>
           <div class="action-button-placeholder" aria-hidden="true"></div>
@@ -98,7 +98,6 @@ export default {
         this.$Message.warning(this.rootAccountUnsupportedTip);
         return;
       }
-      console.log('handleAuthDataSource');
       this.$router.push({ path: '/system/permission', query: { type: 'apply' } });
     },
     handleAddDataSource() {
@@ -116,40 +115,41 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 60vh;
-  padding: 40px 20px;
-  background: #ffffff;
+  min-height: calc(100vh - 120px);
+  padding: 48px 24px;
+  background: var(--bg-primary);
 }
 
 .empty-content {
   text-align: center;
-  max-width: 1100px;
+  max-width: 960px;
   width: 100%;
 }
 
 .empty-title {
-  margin-bottom: 56px;
+  margin-bottom: 48px;
 
   h3 {
-    font-size: 28px;
+    font-size: 24px;
     font-weight: 500;
-    color: #262626;
-    margin: 0 0 14px 0;
+    color: var(--text-primary);
+    margin: 0 0 10px;
+    letter-spacing: -0.02em;
   }
 
   .empty-description {
-    font-size: 15px;
-    color: #8c8c8c;
+    font-size: 14px;
+    color: var(--text-secondary);
     margin: 0;
-    line-height: 1.5;
+    line-height: 1.55;
   }
 }
 
 .empty-actions {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  gap: 56px;
+  gap: 40px;
   flex-wrap: wrap;
 }
 
@@ -157,79 +157,40 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 18px;
+  gap: 14px;
+  width: 160px;
 }
 
 .action-icon {
-  color: #1890ff;
+  color: var(--primary-color);
+  opacity: 0.9;
 }
 
 .action-text {
-  font-size: 15px;
-  color: #262626;
+  font-size: 13px;
+  color: var(--text-primary);
   font-weight: 500;
 }
 
 .flow-arrow {
-  color: #1890ff;
+  color: var(--text-tertiary);
+  margin-top: 12px;
 }
 
 .action-button-placeholder {
   height: 32px;
 }
 
-// 响应式设计
 @media (max-width: 768px) {
-  .sql-empty-state {
-    min-height: 50vh;
-    padding: 20px 16px;
-  }
-
-  .empty-title {
-    margin-bottom: 44px;
-  }
-
-  .empty-title h3 {
-    font-size: 22px;
-  }
-
-  .empty-description {
-    font-size: 14px;
-  }
-
   .empty-actions {
     flex-direction: column;
-    gap: 44px;
+    gap: 32px;
+    align-items: center;
   }
 
   .flow-arrow {
     transform: rotate(90deg);
-  }
-
-  .action-step {
-    gap: 15px;
-  }
-}
-
-@media (max-width: 480px) {
-  .empty-title {
-    margin-bottom: 36px;
-  }
-
-  .empty-title h3 {
-    font-size: 18px;
-  }
-
-  .empty-description {
-    font-size: 13px;
-  }
-
-  .empty-actions {
-    gap: 36px;
-  }
-
-  .action-step {
-    gap: 13px;
+    margin-top: 0;
   }
 }
 </style>
diff --git a/frontend/src/views/sql/index.vue b/frontend/src/views/sql/index.vue
index 4dcd425e8..d299ca7e9 100644
--- a/frontend/src/views/sql/index.vue
+++ b/frontend/src/views/sql/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sql-home-container">
+  <div class="sql-home-container sql-workspace">
     <div class="content">
       <data-source-tree
         ref="dataSourceTree"
@@ -25,7 +25,7 @@
                     <div @contextmenu.prevent.stop="onContextmenu($event, tab)">
                       <div
                         v-if="tab.isEditing"
-                        style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: green; left: 13px"
+                        style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); left: 13px"
                       />
                       <cc-svg-icon name="TABLE" v-if="tab.icon === 'Table'" style="display: inline-block" />
                       <CustomIcon :type="tab.icon" v-else />
@@ -1658,37 +1658,29 @@ export default {
     :deep(.ant-tabs-extra-content) {
       height: 40px;
       line-height: 40px;
-      border-bottom: 1px solid #ccc;
-      padding-right: 5px;
+      border-bottom: 1px solid var(--border-primary);
+      padding-right: 8px;
     }
 
-    // 修改tab下边框颜色，使其更深
     :deep(.ant-tabs-nav-wrap) {
-      border-bottom: 1px solid #ccc !important;
-    }
-
-    :deep(.ant-tabs > .ant-tabs-nav .ant-tabs-nav-list) {
-      height: 90%;
-      top: 3px;
+      border-bottom: 1px solid var(--border-primary) !important;
     }
 
-    // 修改未被选中的tab颜色，使其更深
     :deep(.ant-tabs-tab) {
-      background-color: #f5f5f5 !important;
-      border-color: #d9d9d9 !important;
-      color: #666666 !important;
+      background-color: var(--bg-tertiary) !important;
+      border-color: var(--border-primary) !important;
+      color: var(--text-secondary) !important;
+      border-radius: 6px 6px 0 0 !important;
 
-      // hover 时不再加深背景色，只让文字变为主题色
       &:hover {
         color: var(--primary-color) !important;
       }
     }
 
-    // 修改被选中的tab颜色
     :deep(.ant-tabs-tab-active) {
-      background-color: #ffffff !important;
-      border-bottom-color: #666666 !important;
-      color: #333333 !important;
+      background-color: var(--bg-primary) !important;
+      border-bottom-color: var(--bg-primary) !important;
+      color: var(--text-primary) !important;
     }
 
     .tab-menus {
diff --git a/frontend/src/views/sql/style/index.less b/frontend/src/views/sql/style/index.less
index 2a0b712e0..e4fa078d3 100644
--- a/frontend/src/views/sql/style/index.less
+++ b/frontend/src/views/sql/style/index.less
@@ -1,9 +1,12 @@
+@import './workspace-ui.less';
+
 .sql-home-container {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: var(--bg-primary);
 
   .content {
     flex: 1;
@@ -11,22 +14,22 @@
     display: flex;
 
     .data-source-container {
-      //background: #323232;
-      background: #ffffff;
+      background: var(--bg-secondary);
       height: 100%;
       float: left;
       display: flex;
       flex-direction: column;
       position: relative;
-      border-right: 1px solid #ccc;
+      border-right: 1px solid var(--border-primary);
 
       .data-source-filter {
         width: 100%;
-        padding: 0 8px;
-        height: 40px;
-        border-bottom: 1px solid #ccc;
+        padding: 0 10px;
+        height: 44px;
+        border-bottom: 1px solid var(--border-primary);
         display: flex;
         align-items: center;
+        background: var(--bg-secondary);
 
         .filter-input {
           flex: 1;
@@ -37,12 +40,7 @@
           font-size: 14px;
           margin: 0 6px;
           cursor: pointer;
-        }
-
-        .ant-input {
-          background-color: #f1f1f1 !important;
-          border: none;
-          color: rgba(0, 0, 0, 0.88);
+          color: var(--text-secondary);
         }
       }
 
@@ -99,10 +97,11 @@
       left: 0;
       z-index: 9;
       top: 10px;
-      background: #fff;
+      background: var(--bg-card);
       padding: 2px 5px;
       cursor: pointer;
-      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+      border: 1px solid var(--border-primary);
+      border-radius: 6px;
     }
 
     .query-container {
@@ -111,6 +110,7 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      background: var(--bg-primary);
 
       .content {
         display: flex;
@@ -137,13 +137,16 @@
           flex-direction: column;
 
           .query-schema-select {
-            height: 30px;
+            height: 36px;
             display: flex;
             width: 100%;
             align-items: center;
             justify-content: space-between;
-            padding: 2px 6px;
-            border-bottom: 1px solid #ccc;
+            padding: 4px 12px;
+            border-bottom: 1px solid var(--border-primary);
+            background: var(--bg-secondary);
+            font-size: 12px;
+            color: var(--text-secondary);
           }
 
           .query {
@@ -154,8 +157,8 @@
             .table-list-container {
               position: relative;
               width: 200px;
-              background: #fafafa;
-              border-right: 1px solid #ccc;
+              background: var(--bg-secondary);
+              border-right: 1px solid var(--border-primary);
               display: flex;
               flex-direction: column;
 
@@ -186,11 +189,12 @@
                   .table-query-item {
                     padding: 0 12px;
                     cursor: pointer;
-                    color: rgba(0, 0, 0, 0.88);
+                    color: var(--text-primary);
                     align-items: center;
-                    height: 26px;
-                    line-height: 26px;
-                    //display: inline-block;
+                    height: 28px;
+                    line-height: 28px;
+                    border-radius: 4px;
+                    margin: 0 4px;
 
                     .text {
                       width: 130px;
@@ -201,22 +205,22 @@
                   }
 
                   .table-query-item-selected {
-                    background: #0087c7;
-                    color: #ffffff;
+                    background: rgba(62, 207, 142, 0.12);
+                    color: var(--primary-color);
 
                     .cc-iconfont {
-                      color: #ffffff;
+                      color: var(--primary-color);
                     }
                   }
                 }
 
                 .table-list-pagination {
-                  height: 32px;
+                  height: 36px;
                   width: 100%;
                   text-align: center;
                   padding: 4px 8px;
-                  border-top: 1px solid #dddddd;
-                  background: #f0f0f0;
+                  border-top: 1px solid var(--border-primary);
+                  background: var(--bg-tertiary);
                 }
               }
             }
@@ -371,24 +375,21 @@
       }
 
       .ivu-tree-title-container-selected {
-        background-image: -webkit-gradient(linear, left top, right top, from(#c1e7ff), to(rgba(204, 241, 255, 0)));
-        color: #ffffff;
+        background: rgba(62, 207, 142, 0.1);
+        color: var(--text-primary);
 
         .cc-iconfont,
         span {
-          color: #0070cc !important;
-        }
-
-        &:hover {
-          //background-color: #0087C7 !important;
+          color: var(--primary-color) !important;
         }
       }
 
       .ivu-tree-title-container {
         padding: 7px 0;
+        border-radius: 4px;
 
         &:hover {
-          background-color: #e6f1fa;
+          background-color: var(--bg-hover);
           cursor: pointer;
         }
       }
@@ -396,12 +397,13 @@
   }
 
   .footer {
-    height: 24px;
+    height: 28px;
     width: 100%;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid var(--border-primary);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background: var(--bg-secondary);
 
     .right {
       display: flex;
diff --git a/frontend/src/views/sql/style/workspace-ui.less b/frontend/src/views/sql/style/workspace-ui.less
new file mode 100644
index 000000000..bbaa4719f
--- /dev/null
+++ b/frontend/src/views/sql/style/workspace-ui.less
@@ -0,0 +1,193 @@
+// SQL workspace UI overrides — Supabase emerald theme
+
+.sql-workspace {
+  // ── VTree / CTree 选中 / hover（覆盖 @wsfe/vue-tree 默认蓝色）──
+  .datasource-tree,
+  .table-list-tree {
+    .vtree-tree-node__title,
+    .ctree-tree-node__title {
+      border-radius: 4px;
+      font-size: 12px;
+      transition: background-color 0.12s ease;
+
+      &:hover {
+        background-color: var(--bg-hover) !important;
+      }
+
+      &_selected {
+        background-color: rgba(62, 207, 142, 0.14) !important;
+        color: var(--text-primary);
+
+        &:hover {
+          background-color: rgba(62, 207, 142, 0.18) !important;
+        }
+      }
+    }
+
+    .ctree-tree-node__title_selected,
+    .vtree-tree-node__title_selected {
+      background-color: rgba(62, 207, 142, 0.14) !important;
+      color: var(--text-primary) !important;
+
+      &:hover {
+        background-color: rgba(62, 207, 142, 0.18) !important;
+      }
+    }
+
+    .vtree-tree-node__expand i::after,
+    .ctree-tree-node__expand i::after {
+      border-left-color: var(--text-tertiary) !important;
+    }
+  }
+
+  // ── 数据源面板 ──
+  .data-source-container {
+    background: var(--bg-secondary) !important;
+    border-right: 1px solid var(--border-primary) !important;
+
+    .data-source-filter {
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border-primary);
+
+      .filter-input {
+        .ivu-input-wrapper {
+          background: var(--bg-tertiary) !important;
+          border: 1px solid var(--border-primary) !important;
+          border-radius: 6px;
+          box-shadow: none;
+
+          .ivu-input {
+            background: transparent !important;
+            border: none !important;
+            box-shadow: none !important;
+          }
+
+          .ivu-input-icon {
+            color: var(--text-tertiary);
+          }
+        }
+      }
+    }
+
+    .hide-icon {
+      background: var(--bg-card) !important;
+      border: 1px solid var(--border-primary);
+      border-radius: 4px;
+      box-shadow: var(--shadow-sm);
+    }
+  }
+
+  // ── 表结构树 / 搜索栏 ──
+  .table-list-container {
+    background: var(--bg-secondary) !important;
+    border-right: 1px solid var(--border-primary) !important;
+  }
+
+  .search-header {
+    background: var(--bg-secondary) !important;
+    border-bottom: 1px solid var(--border-primary) !important;
+    height: 36px;
+    padding: 4px 6px;
+
+    .search-border {
+      border: 1px solid var(--border-primary) !important;
+      border-radius: 6px;
+      background: var(--bg-tertiary);
+    }
+  }
+
+  // ── SQL 工具栏 ──
+  .operators {
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border-primary);
+    background: var(--bg-secondary);
+
+    .ivu-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ivu-btn-primary {
+      background: var(--primary-color) !important;
+      border-color: var(--primary-color) !important;
+      color: #171717 !important;
+      font-weight: 500;
+
+      span {
+        color: #171717 !important;
+      }
+
+      &[disabled] {
+        opacity: 0.45;
+      }
+    }
+
+    .ivu-btn-default {
+      background: var(--bg-tertiary) !important;
+      border-color: var(--border-primary) !important;
+      color: var(--text-primary) !important;
+    }
+  }
+
+  .sql-viewer {
+    :deep(.editor) {
+      border-bottom: 1px solid var(--border-primary) !important;
+    }
+  }
+
+  // ── 连接信息栏 ──
+  .query-schema-select {
+    background: var(--bg-secondary) !important;
+    border-bottom: 1px solid var(--border-primary) !important;
+    color: var(--text-secondary);
+    font-size: 12px;
+  }
+
+  // ── Tab 栏 ──
+  .tab-wrap .sql-tabs-style {
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-primary);
+
+    :deep(.ant-tabs-nav) {
+      margin: 0;
+      background: var(--bg-secondary);
+    }
+
+    :deep(.ant-tabs-tab) {
+      background: transparent !important;
+      border: none !important;
+      border-bottom: 2px solid transparent !important;
+      border-radius: 0 !important;
+      color: var(--text-secondary) !important;
+      padding: 8px 12px !important;
+      margin: 0 !important;
+      transition: color 0.12s ease, border-color 0.12s ease;
+
+      &:hover {
+        color: var(--text-primary) !important;
+      }
+    }
+
+    :deep(.ant-tabs-tab-active) {
+      background: transparent !important;
+      border-bottom-color: var(--primary-color) !important;
+      color: var(--text-primary) !important;
+    }
+
+    :deep(.ant-tabs-nav-wrap) {
+      border-bottom: 1px solid var(--border-primary) !important;
+    }
+
+    :deep(.ant-tabs-extra-content) {
+      border-bottom: 1px solid var(--border-primary);
+      background: var(--bg-secondary);
+    }
+  }
+
+  // ── 结果面板 ──
+  .result-wrapper {
+    border-top: 1px solid var(--border-primary);
+    background: var(--bg-primary);
+  }
+}
diff --git a/frontend/src/views/system/OperationLog.vue b/frontend/src/views/system/OperationLog.vue
index 3fd38c76d..74093da06 100644
--- a/frontend/src/views/system/OperationLog.vue
+++ b/frontend/src/views/system/OperationLog.vue
@@ -2,11 +2,6 @@
   <div class="operation-log">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem>{{ $t('cao-zuo-shen-ji') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <div class="content">
           <div class="option border-radius-card">
             <div class="left" style="align-items: center">
@@ -97,15 +92,15 @@
           </div>
         </div>
       </div>
-      <div class="footer">
-        <Button :disabled="page === 1" style="font-size: 16px; padding: 0 16px 0 10px" @click="handlePre">
-          <Icon type="ios-arrow-back" style="font-size: 16px" />
+      <div class="footer list-page-footer-nav">
+        <Button :disabled="page === 1" @click="handlePre">
+          <Icon type="ios-arrow-back" />
           {{ $t('shang-yi-ye') }}
         </Button>
-        <span style="margin: 0 10px">{{ $t('di-page-ye', [page]) }}</span>
-        <Button :disabled="noMoreData" style="font-size: 16px; padding: 0 16px 0 10px; margin-left: 5px" @click="handleNext">
-          <Icon type="ios-arrow-forward" style="font-size: 16px" />
+        <span>{{ $t('di-page-ye', [page]) }}</span>
+        <Button :disabled="noMoreData" @click="handleNext">
           {{ $t('xia-yi-ye') }}
+          <Icon type="ios-arrow-forward" />
         </Button>
       </div>
     </div>
@@ -337,7 +332,7 @@ export default {
     ...mapState(['globalSetting'])
   },
   created() {
-    if (this.$route.name === 'rdpOperationLog') {
+    if (this.$route.name === 'Management_Logs_Operation' || this.$route.name === 'rdpOperationLog') {
       this.type = 'rdp';
       this.rdpQueryOperationListCondition();
     } else if (this.$route.name === 'operationLog') {
diff --git a/frontend/src/views/system/Permission.vue b/frontend/src/views/system/Permission.vue
index 27696f867..ca43dde41 100644
--- a/frontend/src/views/system/Permission.vue
+++ b/frontend/src/views/system/Permission.vue
@@ -3,11 +3,11 @@
     <div v-if="pageLoading" class="page-loading-mask">
       <a-spin size="large" :tip="$t('zheng-zai-jia-zai')" />
     </div>
-    <div class="header">
+    <div v-if="!isView" class="header">
       <div class="left">
         <Breadcrumb>
-          <BreadcrumbItem>{{ $t('wo-de-quan-xian') }}</BreadcrumbItem>
-          <BreadcrumbItem v-if="!isView">{{ $t('shen-qing-quan-xian') }}</BreadcrumbItem>
+          <BreadcrumbItem to="/system/permission">{{ $t('wo-de-quan-xian') }}</BreadcrumbItem>
+          <BreadcrumbItem>{{ $t('shen-qing-quan-xian') }}</BreadcrumbItem>
         </Breadcrumb>
       </div>
     </div>
@@ -668,7 +668,7 @@ export default {
       });
       if (res?.data) {
         this.$message.success(this.$t('shu-ju-ku-shou-quan-cheng-gong'));
-        this.$router.push({ path: '/system/account' });
+        this.$router.push({ path: '/system/management/accounts/account' });
       }
     },
     renderNode(node) {
@@ -1694,7 +1694,7 @@ export default {
       // this.batchMode = true;
     },
     goSubAccountPage() {
-      this.$router.push({ name: 'System_Sub_Account' });
+      this.$router.push({ name: 'Management_Accounts_Account' });
     },
     handleGoAuth() {
       this.$router.push({
diff --git a/frontend/src/views/system/SqlLog.vue b/frontend/src/views/system/SqlLog.vue
index 7777ab661..81fe88001 100644
--- a/frontend/src/views/system/SqlLog.vue
+++ b/frontend/src/views/system/SqlLog.vue
@@ -2,11 +2,6 @@
   <div class="sql-log">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem>{{ $t('sql-shen-ji') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <div class="content">
           <div class="option border-radius-card">
             <div class="left" style="align-items: center">
@@ -126,15 +121,15 @@
           </div>
         </div>
       </div>
-      <div class="footer">
-        <Button :disabled="page === 1" style="font-size: 16px" @click="handlePre">
-          <Icon type="ios-arrow-back" style="font-size: 16px" />
+      <div class="footer list-page-footer-nav">
+        <Button :disabled="page === 1" @click="handlePre">
+          <Icon type="ios-arrow-back" />
           {{ $t('shang-yi-ye') }}
         </Button>
-        <span style="margin: 0 10px">{{ $t('di-page-ye', [page]) }}</span>
-        <Button :disabled="noMoreData" style="font-size: 16px" @click="handleNext">
-          <Icon type="ios-arrow-forward" style="font-size: 16px" />
+        <span>{{ $t('di-page-ye', [page]) }}</span>
+        <Button :disabled="noMoreData" @click="handleNext">
           {{ $t('xia-yi-ye') }}
+          <Icon type="ios-arrow-forward" />
         </Button>
       </div>
     </div>
diff --git a/frontend/src/views/system/UserCenter.vue b/frontend/src/views/system/UserCenter.vue
index b813f7dc9..5fa31e12b 100644
--- a/frontend/src/views/system/UserCenter.vue
+++ b/frontend/src/views/system/UserCenter.vue
@@ -1,37 +1,29 @@
 <template>
-  <div class="user-center" style="padding: 16px">
-    <Breadcrumb style="margin-bottom: 14px">
-      <BreadcrumbItem>{{ $t('ge-ren-zi-liao') }}</BreadcrumbItem>
-    </Breadcrumb>
-    <Tabs v-model="activeTab" :animated="false">
-      <TabPane :label="$t('zhang-hu-xin-xi')" name="profile">
-        <!-- 个人信息tab内容：原账户信息栏目 -->
-        <div>
-          <div class="mt-6 border-t border-gray-100">
-            <dl class="divide divide-gray-100">
-              <div v-if="userInfo.account" class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm/6 font-medium text-gray-900">{{ $t('zhang-hao') }}</dt>
-                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ userInfo.account }}
-                </dd>
+  <div class="profile-page user-center">
+    <div class="profile-card">
+      <Tabs v-model="activeTab" :animated="false">
+        <TabPane :label="$t('zhang-hu-xin-xi')" name="profile">
+          <div>
+            <dl class="profile-field-list">
+              <div v-if="userInfo.account" class="profile-field-row">
+                <dt>{{ $t('zhang-hao') }}</dt>
+                <dd>{{ userInfo.account }}</dd>
               </div>
-              <div v-if="!isInternalUser" class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm/6 font-medium text-gray-900">{{ $t('lai-yuan') }}</dt>
-                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ userInfo.bindType }}
-                </dd>
+              <div v-if="!isInternalUser" class="profile-field-row">
+                <dt>{{ $t('lai-yuan') }}</dt>
+                <dd>{{ userInfo.bindType }}</dd>
               </div>
-              <div v-if="!isInternalUser" class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm/6 font-medium text-gray-900">{{ $t('guan-lian-zhang-hao') }}</dt>
-                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+              <div v-if="!isInternalUser" class="profile-field-row">
+                <dt>{{ $t('guan-lian-zhang-hao') }}</dt>
+                <dd>
                   <span :class="{ 'empty-value': !userInfo.bindAccount }">
                     {{ userInfo.bindAccount || $t('initialization.emptyValue') }}
                   </span>
                 </dd>
               </div>
-              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm/6 font-medium text-gray-900">{{ $t('yong-hu-ming') }}</dt>
-                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+              <div class="profile-field-row">
+                <dt>{{ $t('yong-hu-ming') }}</dt>
+                <dd>
                   <template v-if="editingField === 'username'">
                     <div class="inline-edit-row">
                       <Input v-model="inlineForm.username" @on-enter="confirmInlineEdit('username')" />
@@ -51,9 +43,9 @@
                   </span>
                 </dd>
               </div>
-              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm/6 font-medium text-gray-900">{{ $t('shou-ji') }}</dt>
-                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+              <div class="profile-field-row">
+                <dt>{{ $t('shou-ji') }}</dt>
+                <dd>
                   <template v-if="editingField === 'phone'">
                     <div class="inline-edit-row">
                       <Input v-model="inlineForm.phone" @on-blur="checkInlineDuplicate('phone')" @on-enter="confirmInlineEdit('phone')" />
@@ -69,9 +61,9 @@
                   </template>
                 </dd>
               </div>
-              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm/6 font-medium text-gray-900">{{ $t('you-xiang') }}</dt>
-                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+              <div class="profile-field-row">
+                <dt>{{ $t('you-xiang') }}</dt>
+                <dd>
                   <template v-if="editingField === 'email'">
                     <div class="inline-edit-row">
                       <Input v-model="inlineForm.email" @on-blur="checkInlineDuplicate('email')" @on-enter="confirmInlineEdit('email')" />
@@ -87,9 +79,9 @@
                   </template>
                 </dd>
               </div>
-              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm/6 font-medium text-gray-900">{{ $t('deng-lu-mi-ma') }}</dt>
-                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+              <div class="profile-field-row">
+                <dt>{{ $t('deng-lu-mi-ma') }}</dt>
+                <dd>
                   <template v-if="editingField === 'password'">
                     <div class="inline-edit-row password-edit-row">
                       <Input v-model="inlineForm.originPassword" type="password" password :placeholder="$t('qing-shu-ru-lao-mi-ma')" />
@@ -110,26 +102,24 @@
                   </template>
                 </dd>
               </div>
-              <div v-if="userInfo.marketplaceType && userInfo.marketplaceType !== 'NONE'" class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm/6 font-medium text-gray-900">{{ $t('yun-shi-chang-lei-xing') }}</dt>
-                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+              <div v-if="userInfo.marketplaceType && userInfo.marketplaceType !== 'NONE'" class="profile-field-row">
+                <dt>{{ $t('yun-shi-chang-lei-xing') }}</dt>
+                <dd>
                   {{ userInfo.marketplaceType === 'NONE' ? '' : userInfo.marketplaceType }}
                 </dd>
               </div>
             </dl>
           </div>
-        </div>
-      </TabPane>
-      <TabPane :label="$t('an-quan')" name="security">
-        <div class="mt-8">
+        </TabPane>
+        <TabPane :label="$t('an-quan')" name="security">
           <div>
-            <div class="mb-4" style="font-size: 14px; font-weight: bold">
-              {{ $t('duo-yin-zi-ren-zheng') }}
-              <span v-if="!userInfo.useMfa">{{ $t('wei-kai-qi') }}</span>
-              <span v-else-if="mfaInvalid">{{ $t('yi-shi-xiao') }}</span>
-              <span v-else>{{ $t('yi-kai-qi') }}</span>
-            </div>
-            <div>
+            <div class="profile-security-block">
+              <h3 class="profile-section-title">
+                {{ $t('duo-yin-zi-ren-zheng') }}
+                <span v-if="!userInfo.useMfa">{{ $t('wei-kai-qi') }}</span>
+                <span v-else-if="mfaInvalid">{{ $t('yi-shi-xiao') }}</span>
+                <span v-else>{{ $t('yi-kai-qi') }}</span>
+              </h3>
               <div>
                 <Button v-if="!userInfo.useMfa || mfaInvalid" style="margin-right: 12px" @click="handleOpenMfaSetting">
                   {{ mfaInvalid ? $t('chong-xin-qi-yong') : $t('kai-qi-1') }}
@@ -139,7 +129,7 @@
                 </Button>
                 <Button @click="handleShowCloseMf" v-if="userInfo.useMfa" type="error" ghost>{{ $t('guan-bi') }}</Button>
               </div>
-              <p class="mt-4 max-w-xl">
+              <p class="profile-section-desc">
                 {{
                   $t(
                     'wei-nin-de-zhang-hao-zeng-jia-yi-ceng-bao-zhang-kai-qi-hou-nin-xu-yao-zai-deng-lu-shi-ti-gong-zhang-hao-mi-ma-yi-ji-mfa-yan-zheng-ma'
@@ -147,24 +137,23 @@
                 }}
               </p>
             </div>
-          </div>
-          <!-- aksk管理栏目 -->
-          <div v-if="userInfo.accountType === 'PRIMARY_ACCOUNT'">
-            <div class="mt-12 mb-4" style="font-size: 14px; font-weight: bold">
-              {{ $t('aksk-guan-li') }}
-            </div>
-            <div style="margin-bottom: 24px">
-              <Button style="font-size: 14px; margin-right: 16px" @click="handleShowFetchAKSK">
-                {{ $t('huo-qu-aksk') }}
-              </Button>
-              <Button type="error" ghost style="font-size: 14px; margin-right: 16px" @click="handleShowResetAKSK">
-                {{ $t('chong-zhi-aksk') }}
-              </Button>
+            <div v-if="userInfo.accountType === 'PRIMARY_ACCOUNT'" class="profile-security-block">
+              <h3 class="profile-section-title">
+                {{ $t('aksk-guan-li') }}
+              </h3>
+              <div style="margin-bottom: 8px">
+                <Button style="font-size: 14px; margin-right: 16px" @click="handleShowFetchAKSK">
+                  {{ $t('huo-qu-aksk') }}
+                </Button>
+                <Button type="error" ghost style="font-size: 14px; margin-right: 16px" @click="handleShowResetAKSK">
+                  {{ $t('chong-zhi-aksk') }}
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
-      </TabPane>
-    </Tabs>
+        </TabPane>
+      </Tabs>
+    </div>
     <CCModal v-model="showMfaModal" :title="$t('duo-yin-zi-ren-zheng')" width="480px">
       <div v-if="mfaModalLoading" style="text-align: center; padding: 40px 0">
         <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" style="font-size: 32px"></i>
@@ -884,15 +873,14 @@ export default {
 
 .user-center {
   position: relative;
-  padding: 16px;
+  padding: 0;
 
   .ivu-tabs-nav .ivu-tabs-tab-active {
-    color: #0bb9f8;
-    font-family: PingFangSC-Semibold, serif;
+    color: var(--primary-color);
   }
 
   .ivu-table th {
-    background-color: #f5f5f5;
+    background-color: var(--bg-secondary);
   }
 }
 
diff --git a/frontend/src/views/system/cluster/index.vue b/frontend/src/views/system/cluster/index.vue
index bf98026df..a02ccd0fa 100644
--- a/frontend/src/views/system/cluster/index.vue
+++ b/frontend/src/views/system/cluster/index.vue
@@ -1,8 +1,5 @@
 <template>
   <div class="machine">
-    <Breadcrumb style="margin-bottom: 14px">
-      <BreadcrumbItem>{{ $t('ji-qi-guan-li') }}</BreadcrumbItem>
-    </Breadcrumb>
     <!--    <query-header :handle-click-add-btn="handleClickAddBtn" :handle-query="handleQuery"-->
     <!--                  :handle-refresh="handleRefresh"-->
     <!--                  :query="queryForm" :select-options="Object.values(deployEnvListMap)"-->
diff --git a/frontend/src/views/system/cluster/workerList.vue b/frontend/src/views/system/cluster/workerList.vue
index 6bdbfd538..6c1f907f2 100644
--- a/frontend/src/views/system/cluster/workerList.vue
+++ b/frontend/src/views/system/cluster/workerList.vue
@@ -34,20 +34,13 @@
                   style="width: 280px; margin-right: 10px"
                   clearable
                 />
-                <Button class="search-btn" type="primary" @click="handleQuery">
+                <Button class="search-btn" type="primary" ghost @click="handleQuery">
                   {{ $t('cha-xun') }}
                 </Button>
               </div>
             </div>
             <div class="right">
-              <Button
-                v-if="myAuth.includes('DM_WORKER_MANAGE')"
-                ghost
-                icon="md-add"
-                style="margin-right: 10px"
-                type="primary"
-                @click="handleClickAddBtn"
-              >
+              <Button v-if="myAuth.includes('DM_WORKER_MANAGE')" icon="md-add" style="margin-right: 10px" type="primary" @click="handleClickAddBtn">
                 {{ $t('tian-jia-ji-qi') }}
               </Button>
               <Button class="refresh" @click="getWorkerList">
diff --git a/frontend/src/views/system/components/Query.vue b/frontend/src/views/system/components/Query.vue
index 6785c616e..fe72f91a1 100644
--- a/frontend/src/views/system/components/Query.vue
+++ b/frontend/src/views/system/components/Query.vue
@@ -10,7 +10,7 @@
       </a-select-option>
     </a-select>
     <a-input v-model="query.text" class="text" :placeholder="placeholder" style="width: 280px" />
-    <a-button class="search-btn" type="primary" @click="handleQuery(query)">
+    <a-button class="search-btn" type="primary" ghost @click="handleQuery(query)">
       {{ $t('cha-xun') }}
     </a-button>
   </div>
diff --git a/frontend/src/views/system/components/QueryHeader.vue b/frontend/src/views/system/components/QueryHeader.vue
index eefb825cf..39c37da57 100644
--- a/frontend/src/views/system/components/QueryHeader.vue
+++ b/frontend/src/views/system/components/QueryHeader.vue
@@ -9,7 +9,7 @@
       :placeholder="placeholder"
     />
     <div class="op">
-      <a-button ghost type="primary" @click="handleClickAddBtn" v-if="showAddBtn" icon="plus">
+      <a-button type="primary" @click="handleClickAddBtn" v-if="showAddBtn" icon="plus">
         {{ addBtnText }}
       </a-button>
       <slot></slot>
diff --git a/frontend/src/views/system/components/SideNav.vue b/frontend/src/views/system/components/SideNav.vue
index f71279123..38066a51f 100644
--- a/frontend/src/views/system/components/SideNav.vue
+++ b/frontend/src/views/system/components/SideNav.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="system-side-nav overflow-y-auto">
-    <div class="side-nav-user-info pt-12 pb-10" :style="{ backgroundImage: `url(${bgImageUrl})` }">
+  <div class="system-side-nav">
+    <div class="side-nav-user-info">
       <img class="mx-auto" :alt="$t('tou-xiang')" src="../../../assets/head2.png" />
       <p class="domain">{{ userInfo.username }}</p>
     </div>
-    <Menu class="mt-3" :active-name="currentKey" style="width: 100%">
+    <Menu class="side-nav-menu" :active-name="currentKey" style="width: 100%">
       <MenuGroup :title="$t('xi-tong-she-zhi')" v-if="mySystemMenuItems?.length">
         <MenuItem v-for="item in mySystemMenuItems" :key="item.key" :name="item.key">
           <a :href="item.href" class="flex items-center">
@@ -20,7 +20,6 @@
             {{ $t('ge-ren-zi-liao') }}
           </a>
         </MenuItem>
-        <!-- 仅账号下的dm，开放我的权限 -->
         <MenuItem name="permission" key="/system/permission" v-if="this.userInfo.accountType !== 'PRIMARY_ACCOUNT' && this.includesDM">
           <a href="/#/system/permission">
             <CustomIcon type="icon-v2-MyAuth" rightMargin />
@@ -45,7 +44,6 @@ export default {
   },
   created() {
     this.$bus.on('changeSidebar', (name) => {
-      console.log('changeSidebar');
       this.currentKey = name;
     });
   },
@@ -61,244 +59,23 @@ export default {
             this.currentKey = `/${pathArr[1]}/${pathArr[2]}`;
           }
         }
-        console.log('this.currentKey', newVal, oldVal, this.currentKey, this.mySystemMenuItems);
       },
       deep: true,
       immediate: true
     }
   },
-  // mounted() {
-  //   const pathArr = this.$route.path.split('/');
-  //   const length = pathArr.length;
-  //   if (length === 2) {
-  //     this.currentKey = [`/${pathArr[1]}`];
-  //   } else if (length >= 3) {
-  //     this.currentKey = [`/${pathArr[1]}/${pathArr[2]}`];
-  //   }
-  // },
   unmounted() {
     this.$bus.off('changeSidebar');
   },
   computed: {
     ...mapGetters(['includesDM']),
-    ...mapState(['myCatLog', 'userInfo', 'globalSetting', 'mySystemMenuItems', 'theme']),
-    bgImageUrl() {
-      return this.theme === 'dark' ? require('../../../assets/bg-img-dark.png') : require('../../../assets/bg-img.png');
-    }
+    ...mapState(['myCatLog', 'userInfo', 'globalSetting', 'mySystemMenuItems', 'theme'])
   }
 };
 </script>
 
 <style lang="less" scoped>
-.system-side-nav {
-  background: #f4f4f4;
-  //min-width: 160px;
-  //max-width: 160px;
-  position: fixed;
-  top: 48px; /* 菜单栏下方 */
-  width: 240px;
-  height: calc(100vh - 48px);
-  transition: background-color 0.2s ease;
-
-  .side-nav-user-info {
-    text-align: center;
-
-    img {
-      width: 60px;
-      height: 60px;
-    }
-
-    .domain {
-      margin-top: 15px;
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.88);
-      transition: color 0.2s ease;
-    }
-  }
-
-  .ant-menu {
-    background: #f4f4f4;
-    transition: background-color 0.2s ease;
-
-    :deep(.ant-menu-item),
-    :deep(.ant-menu-item-only-child) {
-      min-height: 28px;
-      height: 28px;
-      line-height: 28px;
-      margin-top: 0;
-      margin-bottom: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    :deep(.ant-menu-item-group-title) {
-      padding-top: 8px;
-      padding-bottom: 4px;
-    }
-
-    .ant-menu-item-selected {
-      background: #dddddd;
-      font-weight: 500;
-      font-family: PingFangSC-Semibold;
-      position: relative;
-      transition: background-color 0.2s ease;
-
-      &::before {
-        content: '';
-        height: 100%;
-        width: 3px;
-        background: rgba(0, 0, 0, 0.88);
-        position: absolute;
-        left: 0;
-        top: 0;
-        transition: background-color 0.2s ease;
-      }
-
-      a {
-        color: rgba(0, 0, 0, 0.88);
-        transition: color 0.2s ease;
-      }
-    }
-
-    .ant-menu-item > a {
-      color: rgba(0, 0, 0, 0.88);
-      transition: color 0.2s ease;
-    }
-  }
-
-  :deep(.ivu-menu-item) {
-    min-height: 28px;
-    height: 28px;
-    line-height: 28px;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    a {
-      display: flex;
-      align-items: center;
-      min-height: 28px;
-      line-height: 28px;
-    }
-  }
-
-  :deep(.ivu-menu-item-group-title) {
-    padding-top: 8px;
-    padding-bottom: 4px;
-  }
-}
-</style>
-
-<style lang="less">
-// 暗色模式适配 - 全局样式
-[data-theme='dark'] .system-side-nav {
-  background: var(--bg-secondary, #1f1f1f);
-
-  .side-nav-user-info {
-    .domain {
-      color: var(--text-primary, #ffffff);
-    }
-  }
-
-  // iview Menu 组件适配
-  .ivu-menu {
-    background: var(--bg-secondary, #1f1f1f);
-
-    // MenuGroup 标题颜色
-    .ivu-menu-group-title {
-      color: var(--text-secondary, rgba(255, 255, 255, 0.65)) !important;
-    }
-
-    // MenuItem 基础样式
-    .ivu-menu-item {
-      color: var(--text-primary, #ffffff) !important;
-      transition: all 0.2s ease;
-
-      // hover 状态
-      &:hover {
-        color: var(--primary-color) !important;
-
-        a {
-          color: var(--primary-color) !important;
-        }
-      }
-
-      // 选中状态
-      &.ivu-menu-item-active,
-      &.ivu-menu-item-selected {
-        background-color: var(--bg-select, #2d2d2d) !important;
-        color: var(--text-primary, #ffffff) !important;
-        font-weight: 500;
-        font-family: PingFangSC-Semibold;
-        position: relative;
-
-        &::before {
-          content: '';
-          height: 100%;
-          width: 3px;
-          background: var(--primary-color, #1890ff) !important;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-
-        a {
-          color: var(--text-primary, #ffffff) !important;
-        }
-      }
-
-      // 链接文字颜色
-      a {
-        color: var(--text-primary, #ffffff) !important;
-        transition: color 0.2s ease;
-      }
-    }
-  }
-
-  // Ant Design Menu 组件适配
-  .ant-menu {
-    background: var(--bg-secondary, #1f1f1f);
-
-    // MenuGroup 标题颜色
-    .ant-menu-item-group-title {
-      color: var(--text-secondary, rgba(255, 255, 255, 0.65)) !important;
-    }
-
-    // MenuItem 基础样式
-    .ant-menu-item {
-      color: var(--text-primary, #ffffff) !important;
-      transition: all 0.2s ease;
-
-      // hover 状态
-      &:hover {
-        background-color: var(--bg-hover, #333333) !important;
-        color: var(--text-primary, #ffffff) !important;
-
-        a {
-          color: var(--text-primary, #ffffff) !important;
-        }
-      }
-
-      // 选中状态
-      &.ant-menu-item-selected {
-        background: var(--bg-select, #2d2d2d) !important;
-
-        &::before {
-          background: var(--primary-color, #1890ff) !important;
-        }
-
-        a {
-          color: var(--text-primary, #ffffff) !important;
-        }
-      }
-
-      // 链接文字颜色
-      > a {
-        color: var(--text-primary, #ffffff) !important;
-        transition: color 0.2s ease;
-      }
-    }
-  }
+.side-nav-menu {
+  margin-top: 0;
 }
 </style>
diff --git a/frontend/src/views/system/datasource/components/DmDsParamsPanel.vue b/frontend/src/views/system/datasource/components/DmDsParamsPanel.vue
index 5722f1bc2..981fe0654 100644
--- a/frontend/src/views/system/datasource/components/DmDsParamsPanel.vue
+++ b/frontend/src/views/system/datasource/components/DmDsParamsPanel.vue
@@ -12,7 +12,7 @@
                 clearable
                 @on-clear="handleQuery"
               />
-              <Button @click="handleQuery" type="primary">{{ $t('cha-xun') }}</Button>
+              <Button @click="handleQuery" type="primary" ghost>{{ $t('cha-xun') }}</Button>
             </div>
             <div class="right">
               <Button type="primary" @click="handleShowConfirmEditParams" style="margin-right: 10px">
diff --git a/frontend/src/views/system/env.vue b/frontend/src/views/system/env.vue
index 1e33842c3..5db4d4497 100644
--- a/frontend/src/views/system/env.vue
+++ b/frontend/src/views/system/env.vue
@@ -2,11 +2,6 @@
   <div class="env">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem>{{ $t('huan-jing-guan-li') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <div class="content">
           <div class="option border-radius-card">
             <div class="left">
@@ -17,19 +12,12 @@
                 :placeholder="$t('qing-shu-ru-huan-jing-ming-cheng-cha-xun')"
                 @on-keydown="handleEnterSearch"
               ></Input>
-              <Button :loading="loading" @click="listEnv('init')" type="primary">
+              <Button :loading="loading" @click="listEnv('init')" type="primary" ghost>
                 {{ $t('cha-xun') }}
               </Button>
             </div>
             <div class="right">
-              <Button
-                @click="handleShowAddEnv"
-                type="primary"
-                ghost
-                style="margin-right: 10px"
-                icon="md-add"
-                v-if="myAuth.includes('RDP_ENV_MANAGE')"
-              >
+              <Button @click="handleShowAddEnv" type="primary" style="margin-right: 10px" icon="md-add" v-if="myAuth.includes('RDP_ENV_MANAGE')">
                 {{ $t('xin-jian-huan-jing') }}
               </Button>
               <Button @click="listEnv('init')">
diff --git a/frontend/src/views/system/home.vue b/frontend/src/views/system/home.vue
index 6e3fdd69a..aacea5ae6 100644
--- a/frontend/src/views/system/home.vue
+++ b/frontend/src/views/system/home.vue
@@ -45,14 +45,14 @@
           router-name="/system/ccdatasource"
         />
         <card
-          :handleClickBtn="() => handleClickAddBtn('/system/account')"
+          :handleClickBtn="() => handleClickAddBtn('/system/management/accounts/account')"
           :num="summary.subAccountCounts"
-          :show-btn="userInfo.menuItems.includes('/system/account')"
+          :show-btn="userInfo.menuItems.includes('/system/account') || userInfo.menuItems.includes('/system/management/accounts')"
           :btn-text="$t('chuang-jian')"
           name="subaccount"
           :quantifier="$t('ge')"
           :title="$t('zi-zhang-hao')"
-          router-name="/system/account"
+          router-name="/system/management/accounts/account"
         />
       </div>
     </div>
diff --git a/frontend/src/views/system/index.vue b/frontend/src/views/system/index.vue
index f1006feb8..93bd201af 100644
--- a/frontend/src/views/system/index.vue
+++ b/frontend/src/views/system/index.vue
@@ -1,74 +1,19 @@
 <template>
-  <div class="system">
-    <side-nav :menu-items="userInfo.menuItems" />
-    <div class="content" :style="`padding: ${noPadding ? '0' : '16px'}`">
-      <router-view />
-    </div>
+  <div class="system-page">
+    <router-view />
   </div>
 </template>
 
 <script>
-import SideNav from '@/views/system/components/SideNav';
-import { mapState } from 'vuex';
-
 export default {
-  name: 'System',
-  components: { SideNav },
-  computed: {
-    ...mapState({
-      userInfo: (state) => state.userInfo
-    })
-  },
-  watch: {
-    '$route.name': {
-      handler(newVal) {
-        // 用来辅助layout，全部重构完成后移除
-        this.noPadding = [
-          'System_Env',
-          'rdpOperationLog',
-          'System_Role',
-          'System_Sub_Account',
-          'Permission',
-          'System_Sub_Account_AuthDm',
-          'Invoice',
-          'Payment',
-          'Billing',
-          'Profile',
-          'BillingDetail',
-          'Credits',
-          'License',
-          'Order',
-          'Measurement',
-          'sqlLog',
-          'InvoiceApplyList',
-          'InvoiceApply',
-          'Prepay',
-          'Balance'
-        ].includes(newVal);
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  data() {
-    return {
-      noPadding: false
-    };
-  }
+  name: 'System'
 };
 </script>
 
 <style lang="less" scoped>
-.system {
+.system-page {
   width: 100%;
-  display: flex;
-  flex: 1;
-
-  .content {
-    flex: 1;
-    margin-left: 240px; /* 与目录宽度相同 */
-    height: calc(100vh - 48px); /* 视口高度减去菜单栏高度 */
-    overflow-y: auto; /* 超出内容滚动 */
-  }
+  height: 100%;
+  min-height: 0;
 }
 </style>
diff --git a/frontend/src/views/system/management/ManagementAccountsLayout.vue b/frontend/src/views/system/management/ManagementAccountsLayout.vue
new file mode 100644
index 000000000..189aba581
--- /dev/null
+++ b/frontend/src/views/system/management/ManagementAccountsLayout.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="management-layout">
+    <ManagementSectionTabs :tabs="visibleTabs" />
+    <div class="management-layout__body">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import ManagementSectionTabs from '@/views/system/management/ManagementSectionTabs';
+
+export default {
+  name: 'ManagementAccountsLayout',
+  components: { ManagementSectionTabs },
+  computed: {
+    ...mapState(['myCatLog']),
+    visibleTabs() {
+      const tabs = [];
+
+      if (this.myCatLog.includes('CAT_RDP_USER')) {
+        tabs.push({
+          name: 'account',
+          label: this.$t('zhang-hao'),
+          to: '/system/management/accounts/account'
+        });
+      }
+      if (this.myCatLog.includes('CAT_RDP_ROLE')) {
+        tabs.push({
+          name: 'role',
+          label: this.$t('jiao-se'),
+          to: '/system/management/accounts/role'
+        });
+      }
+
+      return tabs;
+    }
+  },
+  watch: {
+    visibleTabs: {
+      handler(tabs) {
+        this.ensureValidTab(tabs);
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    ensureValidTab(tabs) {
+      if (!tabs.length) {
+        return;
+      }
+      const currentTab = this.$route.meta.managementTab;
+      if (tabs.some((tab) => tab.name === currentTab)) {
+        return;
+      }
+      this.$router.replace(tabs[0].to);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.management-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/management/ManagementLogsLayout.vue b/frontend/src/views/system/management/ManagementLogsLayout.vue
new file mode 100644
index 000000000..e4c769fe5
--- /dev/null
+++ b/frontend/src/views/system/management/ManagementLogsLayout.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="management-layout">
+    <ManagementSectionTabs :tabs="visibleTabs" />
+    <div class="management-layout__body">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import ManagementSectionTabs from '@/views/system/management/ManagementSectionTabs';
+
+export default {
+  name: 'ManagementLogsLayout',
+  components: { ManagementSectionTabs },
+  computed: {
+    ...mapState(['myCatLog']),
+    visibleTabs() {
+      const tabs = [];
+
+      if (this.myCatLog.includes('CAT_RDP_OP_AUDIT')) {
+        tabs.push({
+          name: 'operation',
+          label: this.$t('cao-zuo-shen-ji'),
+          to: '/system/management/logs/operation'
+        });
+      }
+      if (this.myCatLog.includes('CAT_DM_SQL_AUDIT')) {
+        tabs.push({
+          name: 'sql',
+          label: this.$t('nav-ri-zhi-shen-ji'),
+          to: '/system/management/logs/sql'
+        });
+      }
+
+      return tabs;
+    }
+  },
+  watch: {
+    visibleTabs: {
+      handler(tabs) {
+        this.ensureValidTab(tabs);
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    ensureValidTab(tabs) {
+      if (!tabs.length) {
+        return;
+      }
+      const currentTab = this.$route.meta.managementTab;
+      if (tabs.some((tab) => tab.name === currentTab)) {
+        return;
+      }
+      this.$router.replace(tabs[0].to);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.management-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/management/ManagementSectionTabs.vue b/frontend/src/views/system/management/ManagementSectionTabs.vue
new file mode 100644
index 000000000..d1b39c0f8
--- /dev/null
+++ b/frontend/src/views/system/management/ManagementSectionTabs.vue
@@ -0,0 +1,78 @@
+<template>
+  <nav class="management-section-tabs">
+    <router-link
+      v-for="tab in tabs"
+      :key="tab.name"
+      :to="tab.to"
+      class="management-section-tabs__item"
+      :class="{ 'is-active': activeName === tab.name }"
+    >
+      {{ tab.label }}
+    </router-link>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'ManagementSectionTabs',
+  props: {
+    tabs: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    activeName() {
+      const matched = this.$route.matched.find((record) => record.meta && record.meta.managementTab);
+      if (matched) {
+        return matched.meta.managementTab;
+      }
+      return this.tabs[0] ? this.tabs[0].name : '';
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.management-section-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 0 20px;
+  background: var(--bg-card);
+
+  &__item {
+    position: relative;
+    padding: 12px 14px 10px;
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.4;
+    text-decoration: none;
+    border-bottom: none;
+    transition: color 0.12s ease;
+
+    &:hover {
+      color: var(--text-primary);
+      border-bottom: none;
+    }
+
+    &.is-active {
+      color: var(--text-primary);
+      font-weight: 500;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 14px;
+        right: 14px;
+        bottom: 0;
+        height: 2px;
+        border-radius: 2px 2px 0 0;
+        background: var(--primary-color);
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
index 7dd095bb6..79674eae9 100644
--- a/frontend/src/views/system/role/index.vue
+++ b/frontend/src/views/system/role/index.vue
@@ -2,23 +2,11 @@
   <div class="role">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem>{{ $t('jiao-se-guan-li') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <div class="content">
           <div class="option border-radius-card">
             <div class="left"></div>
             <div class="right">
-              <Button
-                v-if="myAuth.includes('RDP_ROLE_MANAGE')"
-                ghost
-                type="primary"
-                @click="handleClickAddBtn"
-                icon="md-add"
-                style="margin-right: 10px"
-              >
+              <Button v-if="myAuth.includes('RDP_ROLE_MANAGE')" type="primary" @click="handleClickAddBtn" icon="md-add" style="margin-right: 10px">
                 {{ $t('chuang-jian-jiao-se') }}
               </Button>
               <Button class="refresh" @click="getRoleList('init')" :loading="loading">
diff --git a/frontend/src/views/system/sso/index.vue b/frontend/src/views/system/sso/index.vue
new file mode 100644
index 000000000..11b213448
--- /dev/null
+++ b/frontend/src/views/system/sso/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="sso-page">
+    <div class="sso-page__placeholder">{{ $t('nav-sso-placeholder') }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SsoPage'
+};
+</script>
+
+<style lang="less" scoped>
+.sso-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 240px;
+  padding: 24px;
+
+  &__placeholder {
+    color: var(--text-secondary);
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/subaccount/auth/authDm.vue b/frontend/src/views/system/subaccount/auth/authDm.vue
index c4e76a361..3498f7780 100644
--- a/frontend/src/views/system/subaccount/auth/authDm.vue
+++ b/frontend/src/views/system/subaccount/auth/authDm.vue
@@ -6,7 +6,7 @@
     <div class="header">
       <div class="left">
         <Breadcrumb v-if="isEdit">
-          <BreadcrumbItem @click="goSubAccountPage" to="/system/account">
+          <BreadcrumbItem @click="goSubAccountPage" to="/system/management/accounts/account">
             {{ $t('zi-zhang-hao-guan-li') }}
           </BreadcrumbItem>
           <BreadcrumbItem>
@@ -2152,7 +2152,7 @@ export default {
       }
     },
     goSubAccountPage() {
-      this.$router.push({ name: 'System_Sub_Account' });
+      this.$router.push({ name: 'Management_Accounts_Account' });
     },
     handleGoAuth() {
       this.$router.push({
diff --git a/frontend/src/views/system/subaccount/components/AddSubaccountModal.vue b/frontend/src/views/system/subaccount/components/AddSubaccountModal.vue
index fe2dedd4d..b52d7c57e 100644
--- a/frontend/src/views/system/subaccount/components/AddSubaccountModal.vue
+++ b/frontend/src/views/system/subaccount/components/AddSubaccountModal.vue
@@ -22,7 +22,7 @@
               {{ role.name }}
             </Option>
           </Select>
-          <Button type="text" to="/system/role">{{ $t('chuang-jian-jiao-se') }}</Button>
+          <Button type="text" to="/system/management/accounts/role">{{ $t('chuang-jian-jiao-se') }}</Button>
         </div>
       </FormItem>
       <h4 class="mb-4">{{ $t('tong-zhi-jie-shou-she-zhi') }}</h4>
diff --git a/frontend/src/views/system/subaccount/index.vue b/frontend/src/views/system/subaccount/index.vue
index 522174ce5..183399b6f 100644
--- a/frontend/src/views/system/subaccount/index.vue
+++ b/frontend/src/views/system/subaccount/index.vue
@@ -2,11 +2,6 @@
   <div class="sub-account">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem>{{ $t('zi-zhang-hao-guan-li') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <div class="content">
           <div class="option border-radius-card">
             <div class="left">
@@ -22,12 +17,12 @@
                 @on-keydown="handleEnterSearch"
                 clearable
               />
-              <Button :loading="subAccountListLoading" type="primary" @click="getSubAccountList('init')">
+              <Button :loading="subAccountListLoading" type="primary" ghost @click="getSubAccountList('init')">
                 {{ $t('cha-xun') }}
               </Button>
             </div>
             <div class="right">
-              <Button @click="handleClickAddBtn" type="primary" ghost style="margin-right: 10px" icon="md-add">
+              <Button @click="handleClickAddBtn" type="primary" style="margin-right: 10px" icon="md-add">
                 {{ $t('tian-jia-zi-zhang-hao') }}
               </Button>
               <Button @click="getSubAccountList('init')">
diff --git a/frontend/src/views/ticket/index.vue b/frontend/src/views/ticket/index.vue
index b0784a0ca..296af3570 100644
--- a/frontend/src/views/ticket/index.vue
+++ b/frontend/src/views/ticket/index.vue
@@ -2,11 +2,6 @@
   <div class="ticket-container">
     <div class="table-list-layout">
       <div class="table-list">
-        <div class="header">
-          <Breadcrumb>
-            <BreadcrumbItem>{{ $t('gong-dan') }}</BreadcrumbItem>
-          </Breadcrumb>
-        </div>
         <Tabs v-model="ticketListType" @on-click="handleChangeTicketListType">
           <TabPane name="WAIT_SELF_PROCESS" :label="$t('dai-ban')" />
           <TabPane name="SELF_CREATE" :label="$t('wo-fa-qi-de')" />
@@ -34,7 +29,7 @@
                 style="width: 280px; margin-right: 4px"
                 clearable
               />
-              <Button type="primary" class="ticket-search-btn" @click="listTickets">
+              <Button type="primary" ghost class="ticket-search-btn" @click="listTickets">
                 {{ $t('cha-xun') }}
               </Button>
             </div>
@@ -43,7 +38,6 @@
                 @click="handleShowTicketCreateModal"
                 style="margin-right: 10px"
                 type="primary"
-                ghost
                 icon="md-add"
                 v-if="myAuth.includes('RDP_WORKER_ORDER_REQUEST')"
               >
@@ -298,6 +292,7 @@ export default {
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: auto;
+  min-height: 0;
+  overflow: hidden;
 }
 </style>
diff --git a/frontend/src/views/worker/Cluster.vue b/frontend/src/views/worker/Cluster.vue
index a116eaafa..5a2698074 100644
--- a/frontend/src/views/worker/Cluster.vue
+++ b/frontend/src/views/worker/Cluster.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="cluster-container" style="padding: 16px">
+  <div class="cluster-container">
     <Breadcrumb style="margin-bottom: 14px">
       <BreadcrumbItem>
         {{ type === 'dm' ? $t('cha-xun-ji-qi') : $t('tong-bu-ji-qi') }}
@@ -11,14 +11,7 @@
       :handleAddCluster="handleAddCluster"
       :params="searchData"
     ></ClusterHeader>
-    <Table
-      border
-      :columns="displayResourceColumns"
-      :data="showData"
-      size="small"
-      :loading="refreshLoading"
-      style="margin-top: 12px; margin-bottom: 64px"
-    >
+    <Table border :columns="displayResourceColumns" :data="showData" size="small" :loading="refreshLoading" style="margin-top: 12px">
       <template #cluster="{ row }">
         <div>
           <a @click="handleCluster(row)">{{ row.clusterName }}</a>
diff --git a/frontend/src/views/worker/Worker.vue b/frontend/src/views/worker/Worker.vue
index 630e4a996..6fbd1c958 100644
--- a/frontend/src/views/worker/Worker.vue
+++ b/frontend/src/views/worker/Worker.vue
@@ -79,7 +79,7 @@
           <a style="display:inline-block;cursor: pointer;margin-right: 12px" v-if="showSearch" @click="handleShowSearch(false)">
             {{ $t('he-shang') }}
           </a> -->
-          <Button v-if="myAuth.includes('CC_WORKER_MANAGE')" type="primary" style="margin-right: 6px" @click="handleAddWorker" ghost>
+          <Button v-if="myAuth.includes('CC_WORKER_MANAGE')" type="primary" style="margin-right: 6px" @click="handleAddWorker">
             <Icon type="md-add" />
             {{ $t('xin-zeng-ji-qi') }}
           </Button>
diff --git a/frontend/supabase/DESIGN.md b/frontend/supabase/DESIGN.md
new file mode 100644
index 000000000..c784b1b7a
--- /dev/null
+++ b/frontend/supabase/DESIGN.md
@@ -0,0 +1,462 @@
+---
+version: alpha
+name: Supabaze-design-analysis
+description: An inspired interpretation of Supabaze's design language — an open-source database platform built on a clean white-and-near-black system with a single signature emerald-green CTA, a custom humanist sans display tier, and dense product UI mockups composited above the hero. The brand reads as quietly technical: minimal chrome, a near-monochrome palette, and the green primary acting as the only chromatic event on the page.
+
+colors:
+  primary: "#3ecf8e"
+  primary-deep: "#24b47e"
+  primary-soft: "#4ade80"
+  ink: "#171717"
+  ink-secondary: "#212121"
+  ink-mute: "#707070"
+  ink-mute-2: "#9a9a9a"
+  ink-faint: "#b2b2b2"
+  on-primary: "#171717"
+  on-dark: "#ffffff"
+  canvas: "#ffffff"
+  canvas-soft: "#fafafa"
+  canvas-night: "#1c1c1c"
+  canvas-night-soft: "#202020"
+  hairline: "#dfdfdf"
+  hairline-strong: "#c7c7c7"
+  hairline-cool: "#ededed"
+  hairline-cool-2: "#efefef"
+  hairline-cool-3: "#d4d4d4"
+  accent-purple: "#6b01c2"
+  accent-violet: "#644fc1"
+  accent-purple-soft: "#eddbf9"
+  accent-yellow: "#ffdb13"
+  accent-tomato: "#ff2201"
+  accent-pink: "#c7007e"
+  accent-indigo: "#054cff"
+  accent-crimson: "#e2005a"
+
+typography:
+  display-xxl:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 64px
+    fontWeight: 500
+    lineHeight: 1.1
+    letterSpacing: -1.92px
+  display-xl:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 48px
+    fontWeight: 500
+    lineHeight: 1.1
+    letterSpacing: -1.44px
+  display-lg:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 36px
+    fontWeight: 500
+    lineHeight: 1.15
+    letterSpacing: -0.72px
+  display-md:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 28px
+    fontWeight: 500
+    lineHeight: 1.2
+    letterSpacing: -0.42px
+  heading-lg:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 22px
+    fontWeight: 500
+    lineHeight: 1.2
+    letterSpacing: 0
+  heading-md:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 18px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  body-lg:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 1.55
+    letterSpacing: 0
+  body-md:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  button-md:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  caption:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.45
+    letterSpacing: 0
+  micro:
+    fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.45
+    letterSpacing: 0
+  code:
+    fontFamily: "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  full: 9999px
+
+spacing:
+  xxs: 2px
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 24px
+  xxl: 32px
+  huge: 64px
+
+components:
+  button-primary-green:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.sm}"
+    padding: 8px 16px
+  button-primary-green-pressed:
+    backgroundColor: "{colors.primary-deep}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.sm}"
+    padding: 8px 16px
+  button-secondary-outline:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.sm}"
+    padding: 8px 16px
+  button-on-dark:
+    backgroundColor: "{colors.canvas-night}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.sm}"
+    padding: 8px 16px
+  button-link:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.xs}"
+    padding: 0px
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 8px 12px
+  card-feature-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-pricing:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-pricing-featured:
+    backgroundColor: "{colors.canvas-night}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-feature-dark:
+    backgroundColor: "{colors.canvas-night}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  code-block:
+    backgroundColor: "{colors.canvas-night}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.code}"
+    rounded: "{rounded.sm}"
+    padding: 16px
+  pill-tag-green:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.micro}"
+    rounded: "{rounded.full}"
+    padding: 2px 8px
+  pill-tag-soft:
+    backgroundColor: "{colors.canvas-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.micro}"
+    rounded: "{rounded.full}"
+    padding: 2px 8px
+  nav-bar-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 16px 24px
+  link-on-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 0px
+  footer-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink-mute}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.xs}"
+    padding: 64px 24px
+---
+
+## Overview
+
+Supabaze's design language is engineered for clarity above all else. The marketing surfaces sit on `{colors.canvas}` (pure white), with text rendered in `{colors.ink}` (`#171717` — near-black, never pure black). Across the entire system the only consistent chromatic event is the **emerald green primary** (`{colors.primary}` — `#3ecf8e`) — used as the filled CTA, occasional accent dot, and the signature highlight color in the wordmark. Everything else is a calibrated grey ladder from `#ededed` hairline-cool to `#171717` ink, with thin black-on-white typography doing most of the visual work.
+
+Typography runs **Circular** at weight 500 for display and 400 for body. The display tier uses tight negative letter-spacing (-1.92px at 64px) to pull the rounded humanist letterforms into editorial density. There's no atmospheric gradient, no full-bleed photography, no dark-canvas marketing track — the brand commits to white.
+
+The product itself appears as composited UI screenshots on every page: dashboard tables, SQL editors, query builders, log streams. These screenshots are the brand's argument. They sit inside `{rounded.lg}` 12px containers with subtle 1px hairlines, often arranged 2-up or in a floating "stacked panes" composition above the hero band.
+
+**Key Characteristics:**
+- Single emerald primary (`{colors.primary}` `#3ecf8e`) as the only chromatic event; everything else is monochrome.
+- White canvas marketing track with greyscale hierarchy from `{colors.hairline-cool}` to `{colors.ink}`.
+- Custom humanist sans display tier at weight 500 with negative letter-spacing of -1.92px to -0.42px.
+- Composited product UI screenshots (dashboard, SQL editor, log stream) are the dominant decorative element — never photography, never illustrations.
+- Tight 6px / 8px button radii — square-ish, technical, never pill-shaped.
+- Code blocks rendered in deep `{colors.canvas-night}` (`#1c1c1c`) with monospace inline code; the brand's developer DNA is visible in every snippet.
+- Pricing tiers use a dark inverted `{colors.canvas-night}` featured tier, not a green one — the green is reserved for buttons and dot accents.
+
+## Colors
+
+> **Source pages:** home (`/`), `/database`, `/partners/integrations`, `/partners/integrations/powersync`, `/solutions/ai-builders`, `/pricing`.
+
+### Brand & Accent
+- **Emerald** (`{colors.primary}` — `#3ecf8e`): The signature CTA color. Filled-button background, brand wordmark accent, dot indicator.
+- **Emerald Deep** (`{colors.primary-deep}` — `#24b47e`): Pressed-state lift of the primary.
+- **Emerald Soft** (`{colors.primary-soft}` — `#4ade80`): Lighter emerald used in chart accents and product UI.
+- **Accent Purple** (`{colors.accent-purple}` — `#6b01c2`): Rare accent used in integration logos and chart points; never a button.
+- **Accent Violet** (`{colors.accent-violet}` — `#644fc1`): Secondary accent in the same role as accent purple.
+- **Accent Yellow** (`{colors.accent-yellow}` — `#ffdb13`): Chart accent / status indicator only.
+- **Accent Pink / Crimson / Indigo / Tomato**: Reserved for integration logos and rare chart highlights, never as system colors.
+
+### Surface
+- **Canvas** (`{colors.canvas}` — `#ffffff`): Default page background.
+- **Canvas Soft** (`{colors.canvas-soft}` — `#fafafa`): Barely-tinted off-white for alternating section bands.
+- **Canvas Night** (`{colors.canvas-night}` — `#1c1c1c`): Deep near-black used in code blocks, dashboard mockups, featured pricing tier.
+- **Canvas Night Soft** (`{colors.canvas-night-soft}` — `#202020`): Slightly lifted dark for nested chrome.
+- **Hairline** (`{colors.hairline}` — `#dfdfdf`): 1px borders on cards and tables.
+- **Hairline Strong** (`{colors.hairline-strong}` — `#c7c7c7`): Slightly darker border for emphasis.
+- **Hairline Cool** (`{colors.hairline-cool}` — `#ededed`) / **Hairline Cool 2** (`#efefef`) / **Hairline Cool 3** (`#d4d4d4`): The brand's grey ladder for fine chrome work.
+
+### Text
+- **Ink** (`{colors.ink}` — `#171717`): Default body text. Near-black, never pure.
+- **Ink Secondary** (`{colors.ink-secondary}` — `#212121`): Slightly cooler near-black for body emphasis.
+- **Ink Mute** (`{colors.ink-mute}` — `#707070`): Secondary text and helper copy.
+- **Ink Mute 2** (`{colors.ink-mute-2}` — `#9a9a9a`): Tertiary text.
+- **Ink Faint** (`{colors.ink-faint}` — `#b2b2b2`): Disabled / placeholder text.
+- **On Primary** (`{colors.on-primary}` — `#171717`): Text on the emerald primary fill — near-black, not white. The button reads as a "lit" surface with dark type, not a colored chip.
+- **On Dark** (`{colors.on-dark}` — `#ffffff`): Text on canvas-night surfaces.
+
+## Typography
+
+### Font Family
+
+The display and UI tier is **Circular** — a proprietary geometric humanist sans by Lineto. Fallback chain: `'Helvetica Neue', Helvetica, Arial`.
+
+For maximum brand fidelity when Circular isn't licensed, use **Inter** (open-source via Google Fonts) at weight 500 for display with `letter-spacing: -1.92px` at 64px. Inter is the closest open-source analogue to Circular's geometric humanist character.
+
+Code blocks use **system mono** (`ui-monospace`, with Menlo / Monaco / Consolas fallbacks).
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-xxl}` | 64px | 500 | 1.1 | -1.92px | Hero headline |
+| `{typography.display-xl}` | 48px | 500 | 1.1 | -1.44px | Section opener |
+| `{typography.display-lg}` | 36px | 500 | 1.15 | -0.72px | Sub-section / pricing tier |
+| `{typography.display-md}` | 28px | 500 | 1.2 | -0.42px | Card title |
+| `{typography.heading-lg}` | 22px | 500 | 1.2 | 0 | Compact heading |
+| `{typography.heading-md}` | 18px | 500 | 1.4 | 0 | Section sub-heading |
+| `{typography.body-lg}` | 18px | 400 | 1.55 | 0 | Marketing body lead |
+| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default UI body |
+| `{typography.button-md}` | 14px | 500 | 1.0 | 0 | Button label |
+| `{typography.caption}` | 13px | 400 | 1.45 | 0 | Helper, footnote |
+| `{typography.micro}` | 12px | 400 | 1.45 | 0 | Pill label, fine print |
+| `{typography.code}` | 14px | 400 | 1.5 | 0 | Code block content |
+
+### Principles
+- **Weight 500 across display.** Mid-weight reads as engineered, not decorative.
+- **Negative tracking on display.** -1.92px at 64px scaling proportionally down — tightens the rounded humanist letterforms into editorial density.
+- **Mono for code.** System mono families (Menlo / Monaco) — no proprietary mono webfont.
+
+### Note on Font Substitutes
+Circular is proprietary. Use **Inter** at weight 500 with `letter-spacing: -1.92px` for display tiers. **Geist Sans** (open-source from Vercel) is another close alternative for both display and body. Avoid Helvetica defaults — they're heavier and lack the geometric warmth.
+
+## Layout
+
+### Spacing System
+- **Base unit**: 8px (with 2 / 4 / 12 sub-tokens for fine work).
+- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px.
+- **Section padding**: 64–96px on marketing surfaces.
+- **Card internal padding**: 32px on feature/pricing cards.
+
+### Grid & Container
+- Marketing pages center in a ~1280px container with no edge-bleed; the brand keeps content inside the box.
+- Pricing collapses 4-up → 2-up → 1-up at 1024 / 768 breakpoints.
+- Product UI mockups stack 2-up or render as overlapping panes inside the same container.
+
+### Whitespace Philosophy
+The brand uses generous 64–96px section padding without atmospheric gradients filling the space — the white canvas is the design. The composited product UI mockups break up sections without requiring decoration.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 | Flat, 1px hairline | Default cards |
+| 1 | `box-shadow: 0 1px 3px rgba(0,0,0,0.06)` | Subtle card lift |
+| 2 | `box-shadow: 0 8px 24px rgba(0,0,0,0.08)` | Floating composited UI mockups |
+| 3 | `box-shadow: 0 16px 48px rgba(0,0,0,0.12)` | Modal overlays, deep elevation |
+
+### Decorative Depth
+The brand's depth is **product UI mockups** rather than gradients. Stacked dashboard / SQL editor / log panes composite together with subtle Level 2 shadows to suggest spatial hierarchy.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.xs}` | 4px | Form inputs, hairline tags |
+| `{rounded.sm}` | 6px | Buttons (the brand's signature button radius), code blocks |
+| `{rounded.md}` | 8px | Compact cards, alerts |
+| `{rounded.lg}` | 12px | Pricing cards, feature cards, product mockups |
+| `{rounded.xl}` | 16px | Modal dialogs, large container chrome |
+| `{rounded.full}` | 9999px | Pill tags, avatars |
+
+### Photography Geometry
+The brand uses minimal photography. Customer logo strips display wordmarks at uniform height (~24–32px) in greyscale; case-study cards (rare) use 4:3 photos inset in `{rounded.lg}` containers.
+
+## Components
+
+### Buttons
+
+**`button-primary-green`** — the signature CTA.
+- Background `{colors.primary}`, text `{colors.on-primary}` (near-black, NOT white), type `{typography.button-md}`, padding `{spacing.sm} {spacing.lg}` (8px 16px), rounded `{rounded.sm}` 6px.
+- Pressed state `button-primary-green-pressed` shifts to `{colors.primary-deep}`.
+
+**`button-secondary-outline`** — outline alternative on white.
+- Background `{colors.canvas}`, text `{colors.ink}`, 1px solid `{colors.hairline-strong}` border, same shape.
+
+**`button-on-dark`** — used on dark surfaces / code-block CTAs.
+- Background `{colors.canvas-night}`, text `{colors.on-dark}`, same shape.
+
+**`button-link`** — text-only inline button.
+- Transparent background, text `{colors.ink}` rendered in `{typography.button-md}`, no padding, with a subtle underline on hover.
+
+### Cards & Containers
+
+**`card-feature-light`** — feature card on white.
+- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}` 12px, 1px `{colors.hairline}` border.
+
+**`card-pricing`** — standard pricing tier.
+- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border. Title in `{typography.heading-lg}`, price in `{typography.display-md}`, body in `{typography.body-md}`, CTA `button-primary-green` pinned bottom.
+
+**`card-pricing-featured`** — inverted dark featured tier.
+- Background `{colors.canvas-night}`, text `{colors.on-dark}`, otherwise identical structure.
+
+**`card-feature-dark`** — feature card with deep dark fill.
+- Background `{colors.canvas-night}`, text `{colors.on-dark}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`. Used for code-heavy feature explanations.
+
+**`code-block`** — code snippet container.
+- Background `{colors.canvas-night}`, text `{colors.on-dark}` rendered in `{typography.code}`. Padding `{spacing.lg}` 16px, rounded `{rounded.sm}` 6px.
+
+### Inputs & Forms
+
+**`text-input`** — standard form input.
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm} {spacing.md}` (8px 12px), rounded `{rounded.sm}` 6px, 1px `{colors.hairline}` border.
+
+### Navigation
+
+**`nav-bar-light`** — top nav across the site.
+- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg} {spacing.xl}`. Logo on the left, primary nav center, "Sign In" link + filled `button-primary-green` on the right.
+
+### Pills, Tags, and Chips
+
+**`pill-tag-green`** — small green pill used for "new" or featured indicators.
+- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.micro}`, padding `{spacing.xxs} {spacing.sm}`, rounded `{rounded.full}`.
+
+**`pill-tag-soft`** — neutral pill on light surfaces.
+- Background `{colors.canvas-soft}`, text `{colors.ink}`, otherwise same shape.
+
+### Signature Components
+
+**Composited Product UI Mockups** — multi-layer dashboard / SQL editor / log pane composites with subtle Level 2 shadows. The product is the brand's argument; mockups always sit on white canvas with no surrounding decoration.
+
+**`link-on-light`** — inline links in body copy.
+- Text `{colors.ink}` rendered in `{typography.body-md}` with a persistent underline.
+
+**`footer-light`** — site-wide footer.
+- Background `{colors.canvas}`, text `{colors.ink-mute}`, type `{typography.caption}`, padding `{spacing.huge} {spacing.xl}` (64px 24px). Holds 4–5 columns of link groups, social icons, and a small legal row.
+
+## Do's and Don'ts
+
+### Do
+- Reserve `{colors.primary}` emerald for filled CTAs and the wordmark accent — it should appear sparingly.
+- Render display tiers at weight 500 with negative letter-spacing — the engineered tightness is part of the brand.
+- Use `{rounded.sm}` 6px for buttons — square-ish radii, never pill-shaped.
+- Composite product UI mockups inside `{rounded.lg}` containers with subtle Level 2 shadows.
+- Use near-black `{colors.ink}` on the emerald button (not white) — the green reads as "lit" with dark type, which is the brand's idiosyncratic choice.
+- Apply system mono for every code block.
+
+### Don't
+- Don't introduce additional accent colors as system colors — purples, yellows, and pinks belong inside chart points and integration logos only.
+- Don't bump display weight above 500 — the brand's calibrated mid-weight breaks at 600+.
+- Don't use pill-shaped buttons; the brand's button radius is square-ish 6px.
+- Don't use white text on the emerald button — the brand specifically uses near-black on green.
+- Don't add atmospheric gradients to hero bands — the white canvas is the design.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Wide | ≥ 1440px | Full container width; product mockups at full scale |
+| Desktop | 1024–1440px | Default content max-width; pricing 4-up |
+| Tablet | 768–1023px | Pricing 2-up; mockups simplify to single panel |
+| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 64 → 36px |
+
+### Touch Targets
+- Buttons hit ≥ 36×36px on mobile; vertical padding scales up to maintain WCAG AA minimum.
+- Form fields stay at 36px minimum height.
+
+### Collapsing Strategy
+- Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
+- Product UI mockups simplify to a single primary panel on mobile.
+- Pricing tiers stair-step 4-up → 2-up → 1-up; dark featured tier always distinguished.
+
+### Image Behavior
+Product UI mockups use `srcset` with desktop / mobile crops; mobile crops focus on the most actionable inner panel.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time.
+2. Reference component names and tokens directly.
+3. Run `npx @google/design.md lint DESIGN.md` after edits.
+4. Default body to `{typography.body-md}`; use `{typography.code}` for any developer-facing snippet.
+5. Keep emerald scarce; one filled green button per viewport.
+6. The white-canvas commitment is non-negotiable — adding atmospheric backdrops breaks the brand.