diff --git a/.env.example b/.env.example
index 627d6d2..9b33f39 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
 # ============================================================
-# LokiDeploy - Environment Variables Example
+# opsx-loki - Environment Variables Example
 # ============================================================
 # Copy this file to .env and fill in your values:
 #   cp .env.example .env
diff --git a/.gitignore b/.gitignore
index 27172e9..d713647 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,6 @@ secrets/
 
 # OS
 Thumbs.db
+
+# ZCode 会话目录
+.zcode/
diff --git a/AGENTS.md b/AGENTS.md
index fa90510..f76865b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -5,7 +5,7 @@
 
 ## 项目概览
 
-LokiDeploy 是一个基于 **Gin (Go) + React/TypeScript + JSON 文件存储** 的平台,用于把 Grafana
+opsx-loki 是一个基于 **Gin (Go) + React/TypeScript + JSON 文件存储** 的平台,用于把 Grafana
 Loki 日志聚合系统部署到 Kubernetes 集群(通过 `kubectl`/`helm`)或裸金属 Linux 主机(通过 SSH)。
 Go 二进制同时提供 REST API 服务和已构建的前端(SPA)静态资源。
 
@@ -57,7 +57,7 @@ docker compose -f docker-compose.prod.yml up -d   # 生产环境(读取 ./secret
 
 ## 架构
 
-### 后端分层(`backend/`,模块路径 `lokideploy`,Go 1.24)
+### 后端分层(`backend/`,模块路径 `opsxloki`,Go 1.24)
 请求流转:**router → middleware(JWT)→ controller → service → repository(JsonDB)**。
 
 - `config/` — `GetConfig()` 单例。读取环境变量;密钥缺失或长度不足时直接 `log.Fatal`。
@@ -71,12 +71,16 @@ docker compose -f docker-compose.prod.yml up -d   # 生产环境(读取 ./secret
   (`k8s-helm` / `k8s-yaml` / `host-binary`)分发,实际通过 shell 调用 `kubectl`/`helm` 或 SSH。
   其它 service:`K8sClient`、`ssh`(+ `ssh_errors`)、`storage`、`cluster_info`,
   以及较新的 **collector(日志采集器)** 模块(`collector*.go` — 部署客户端日志采集器)。
-- `middleware/jwt.go` — `JWTAuth()`(`/authorized` 路由组必用)、`AdminAuth()`。
+- `middleware/jwt.go` — `JWTAuth()`(解析后对照 JsonDB 校验 `TokenVersion`,并以数据库最新
+  role 为准)、`AdminAuth()`;`ratelimit.go` — 登录接口 IP 滑动窗口限流(20 次/分钟)。
+- 用户管理(简单两级,无 RBAC):`GET/POST /users`、`DELETE /users/:id`、
+  `POST /users/:id/reset-password`,全部仅 admin。改密/重置密码会递增用户 `TokenVersion`,
+  旧 access+refresh token 立即失效(会话吊销)。
 - `utils/` — `response.go`(响应封装助手)、`crypto.go`(Argon2 + AES-GCM)、`jwt.go`。
 - `seed/` — 数据库为空时写入默认 admin 用户。
 
 ### 数据层 — JSON 文件数据库(唯一数据源)
-持久化是 **单个 JSON 文件**,位于 `$DATA_DIR/lokideploy.json`(默认 `./data/`)。
+持久化是 **单个 JSON 文件**,位于 `$DATA_DIR/opsxloki.json(兼容加载旧 lokideploy.json)`(默认 `./data/`)。
 **没有 SQL 数据库**。`repository.JsonDB` 是一个与文件对应的内存结构:
 
 - **并发模型**(重要):写操作由 `Lock()/RLock()` 保护,随后 `RequestSave()` 会通过一个
@@ -109,14 +113,42 @@ docker compose -f docker-compose.prod.yml up -d   # 生产环境(读取 ./secret
 
 ## 前端(`frontend/`,React 19 + Vite 7 + TypeScript)
 
-- 技术栈:Tailwind、**shadcn/ui**(Radix 基础组件在 `src/components/ui/`)、react-router 7、
-  react-hook-form + zod、recharts、sonner(通知)。
-- `src/api/` 是 **当前在用** 的 API 客户端(取代了已删除的 `src/srv/api/`)。`http.ts` 是
-  fetch 封装:注入 `Authorization: Bearer`、30s 超时、401 → 清除 token 并跳转 `/login`、可选重试。
-  每个资源一个模块(`auth`、`cluster` ……)。
-- `src/App.tsx` — 路由通过 `React.lazy` 懒加载,`RequireAuth` 守卫在 localStorage 无 `token`
-  时重定向到 `/login`。`@` → `src/` 别名(tsconfig + vite)。
-- 开发服务器跑在 `:3000`,把 `/api` 代理到 `:8080`;生产环境下由 Go 二进制直接提供 `dist/` 静态服务。
+> 前端开发标准:`docs/web-ui-guide/`(9 章,含分章 AI 检查清单)。编码、Review、重构
+> 时以该标准为基准;与标准冲突的既有代码即为待改进项。
+
+- 技术栈:Tailwind、**shadcn/ui**(Radix 基础组件在 `src/components/ui/`,只保留实际
+  使用的,需要新组件 `npx shadcn add <name>`)、react-router 7、react-hook-form + zod、
+  sonner(通知)、next-themes(暗色)。
+- **页面按域组织**(`src/pages/<domain>/`):`index.tsx` 编排(≤400 行)+
+  `components/`(表单弹窗/卡片/详情)+ `hooks/`(私有数据逻辑)。跨页复用第三次才晋升
+  到 `src/components/`。
+- `src/api/` — API 客户端,一域一模块。`http.ts` 提供:结构化 `ApiError`(status/code)、
+  30s 超时、`silent` 请求选项、**401 单飞刷新 + 队列重放**(refreshToken 走裸 fetch,
+  登录/轮询接口静默)、`buildQuery` 编码 query。组件**禁止**绕过 api 层直接 fetch。
+- 凭证存取统一走 `src/lib/auth-storage.ts`,key 带命名空间(`lokideploy.auth.*`);
+  redirect 回跳校验在 `src/lib/redirect.ts`(防开放重定向)。
+- 路由单源:`src/router/routes.tsx`(meta: title/icon/order)驱动菜单、顶栏标题与
+  `document.title`;守卫 `RequireAuth` 带来源路径回跳;404 走 `pages/not-found`。
+- 部署向导(`/wizard`):状态推导式步骤地图(preflight 端点聚合各资源状态),四步:环境与
+  目标 → 存储 → Loki(+Grafana)→ 采集;k8s 资源统一默认 `log` 命名空间(可改)。
+  Grafana 为**可选**(默认关闭):k8s 用 NodePort(自动分配)+数据源 ConfigMap,主机用 tarball+systemd;平台已内置日志查询,通常无需 Grafana。
+- **LDAP 接入**(参照 opsx-web-lite):设置页配置(SystemSetting 表 JSON,Bind 密码 AES 加密、
+  对外只回 `hasPassword`);启用后 ①登录支持 LDAP 用户验证并自动建号(authSource=ldap)②用户页
+  出现「从 LDAP 导入」(已导入置灰;本地同名转 LDAP);`/settings/ldap/{test,users}` 端点。
+- **日志查询**(`/logs`):数据源 `LogSources`(cluster-svc=经 kubectl --raw service proxy 查集群内
+  Loki,不依赖 ClusterIP/DNS;url=直连;部署成功自动注册);`/logs/{query,labels,label/*/values,histogram}`
+  代理端点(cursor 翻页);前端 LogQL 高亮补全 + 直方图 + 标签点击过滤 + Live Tail(3s 轮询)。
+- 用户管理页(`/users`,meta `adminOnly: true` — 菜单按角色过滤,后端 AdminAuth 兜底);
+  部署表单的 Loki 版本下拉来自 `GET /deployments/versions`(失败回退兜底列表)。
+- 列表数据一律 `useListQuery`(AbortController 取消 + 版本号防错序 + 分页);反馈分级:
+  成功静默(禁 toast.success)、失败 toast.error、危险操作 ConfirmDialog、加载失败渲染
+  ErrorState + 重试(与空态严格区分)。
+- 主题:语义 Token 单源(`src/index.css`,品牌色 = `--primary`,状态色 =
+  success/warning/destructive/info);暗色 `.dark` class 由 next-themes 驱动
+  (key `lokideploy.theme.mode`),禁止硬编码调色板类(如 `bg-emerald-600`)。
+- 开发服务器跑在 `:3000`(strictPort),把 `/api` 代理到 `:8080`;生产环境下由 Go
+  二进制直接提供 `dist/` 静态服务。构建指纹(`__APP_VERSION__`/`__COMMIT_HASH__`)
+  在 Settings「关于」展示。
 
 ## Loki 部署相关细节
 - 合法的部署模式:`k8s-helm`、`k8s-yaml`、`host-binary`。K8s 模式需要一个 Cluster(kubeconfig);
diff --git a/CLAUDE.md b/CLAUDE.md
index 5d78a39..280840d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## 项目概览
 
-LokiDeploy 是一个基于 **Gin (Go) + React/TypeScript + JSON 文件存储** 的平台,用于把 Grafana
+opsx-loki 是一个基于 **Gin (Go) + React/TypeScript + JSON 文件存储** 的平台,用于把 Grafana
 Loki 日志聚合系统部署到 Kubernetes 集群(通过 `kubectl`/`helm`)或裸金属 Linux 主机(通过 SSH)。
 Go 二进制同时提供 REST API 服务和已构建的前端(SPA)静态资源。
 
@@ -56,7 +56,7 @@ docker compose -f docker-compose.prod.yml up -d   # 生产环境(读取 ./secret
 
 ## 架构
 
-### 后端分层(`backend/`,模块路径 `lokideploy`,Go 1.24)
+### 后端分层(`backend/`,模块路径 `opsxloki`,Go 1.24)
 请求流转:**router → middleware(JWT)→ controller → service → repository(JsonDB)**。
 
 - `config/` — `GetConfig()` 单例。读取环境变量;密钥缺失或长度不足时直接 `log.Fatal`。
@@ -70,12 +70,17 @@ docker compose -f docker-compose.prod.yml up -d   # 生产环境(读取 ./secret
   (`k8s-helm` / `k8s-yaml` / `host-binary`)分发,实际通过 shell 调用 `kubectl`/`helm` 或 SSH。
   其它 service:`K8sClient`、`ssh`(+ `ssh_errors`)、`storage`、`cluster_info`,
   以及较新的 **collector(日志采集器)** 模块(`collector*.go` — 部署客户端日志采集器)。
-- `middleware/jwt.go` — `JWTAuth()`(`/authorized` 路由组必用)、`AdminAuth()`。
+- `middleware/jwt.go` — `JWTAuth()`(解析后对照 JsonDB 校验 `TokenVersion`,并以数据库最新
+  role 为准)、`AdminAuth()`;`ratelimit.go` — 登录接口 IP 滑动窗口限流(20 次/分钟)。
+- 用户管理(简单两级,无 RBAC):`GET/POST /users`、`DELETE /users/:id`、
+  `POST /users/:id/reset-password`,全部仅 admin。改密/重置密码会递增用户 `TokenVersion`,
+  旧 access+refresh token 立即失效(会话吊销)。
+
 - `utils/` — `response.go`(响应封装助手)、`crypto.go`(Argon2 + AES-GCM)、`jwt.go`。
 - `seed/` — 数据库为空时写入默认 admin 用户。
 
 ### 数据层 — JSON 文件数据库(唯一数据源)
-持久化是 **单个 JSON 文件**,位于 `$DATA_DIR/lokideploy.json`(默认 `./data/`)。
+持久化是 **单个 JSON 文件**,位于 `$DATA_DIR/opsxloki.json(兼容加载旧 lokideploy.json)`(默认 `./data/`)。
 **没有 SQL 数据库**。`repository.JsonDB` 是一个与文件对应的内存结构:
 
 - **并发模型**(重要):写操作由 `Lock()/RLock()` 保护,随后 `RequestSave()` 会通过一个
@@ -108,14 +113,38 @@ docker compose -f docker-compose.prod.yml up -d   # 生产环境(读取 ./secret
 
 ## 前端(`frontend/`,React 19 + Vite 7 + TypeScript)
 
-- 技术栈:Tailwind、**shadcn/ui**(Radix 基础组件在 `src/components/ui/`)、react-router 7、
-  react-hook-form + zod、recharts、sonner(通知)。
-- `src/api/` 是 **当前在用** 的 API 客户端(取代了已删除的 `src/srv/api/`)。`http.ts` 是
-  fetch 封装:注入 `Authorization: Bearer`、30s 超时、401 → 清除 token 并跳转 `/login`、可选重试。
-  每个资源一个模块(`auth`、`cluster` ……)。
-- `src/App.tsx` — 路由通过 `React.lazy` 懒加载,`RequireAuth` 守卫在 localStorage 无 `token`
-  时重定向到 `/login`。`@` → `src/` 别名(tsconfig + vite)。
-- 开发服务器跑在 `:3000`,把 `/api` 代理到 `:8080`;生产环境下由 Go 二进制直接提供 `dist/` 静态服务。
+> 前端开发标准:`docs/web-ui-guide/`(9 章,含分章 AI 检查清单)。编码、Review、重构
+> 时以该标准为基准;与标准冲突的既有代码即为待改进项。
+
+- 技术栈:Tailwind、**shadcn/ui**(Radix 基础组件在 `src/components/ui/`,只保留实际
+  使用的,需要新组件 `npx shadcn add <name>`)、react-router 7、react-hook-form + zod、
+  sonner(通知)、next-themes(暗色)。
+- **页面按域组织**(`src/pages/<domain>/`):`index.tsx` 编排(≤400 行)+
+  `components/`(表单弹窗/卡片/详情)+ `hooks/`(私有数据逻辑)。跨页复用第三次才晋升
+  到 `src/components/`。
+- `src/api/` — API 客户端,一域一模块。`http.ts` 提供:结构化 `ApiError`(status/code)、
+  30s 超时、`silent` 请求选项、**401 单飞刷新 + 队列重放**(refreshToken 走裸 fetch,
+  登录/轮询接口静默)、`buildQuery` 编码 query。组件**禁止**绕过 api 层直接 fetch。
+- 凭证存取统一走 `src/lib/auth-storage.ts`,key 带命名空间(`lokideploy.auth.*`);
+  redirect 回跳校验在 `src/lib/redirect.ts`(防开放重定向)。
+- 路由单源:`src/router/routes.tsx`(meta: title/icon/order)驱动菜单、顶栏标题与
+  `document.title`;守卫 `RequireAuth` 带来源路径回跳;404 走 `pages/not-found`。
+- 部署向导 `/wizard`(preflight 状态推导 + Grafana 同环境部署 + 统一 log 命名空间)。
+- LDAP 接入(`/settings` 配置+`/users` 批量导入+LDAP 登录)与日志查询(`/logs`,数据源自动注册+kube proxy)。
+- 用户管理页(`/users`,meta `adminOnly: true` — 菜单按角色过滤,后端 AdminAuth 兜底);
+  部署表单的 Loki 版本下拉来自 `GET /deployments/versions`(失败回退兜底列表)。
+- 列表数据一律 `useListQuery`(AbortController 取消 + 版本号防错序 + 分页);反馈分级:
+  成功静默(禁 toast.success)、失败 toast.error、危险操作 ConfirmDialog、加载失败渲染
+  ErrorState + 重试(与空态严格区分)。
+- 列表数据一律 `useListQuery`(AbortController 取消 + 版本号防错序 + 分页);反馈分级:
+  成功静默(禁 toast.success)、失败 toast.error、危险操作 ConfirmDialog、加载失败渲染
+  ErrorState + 重试(与空态严格区分)。
+- 主题:语义 Token 单源(`src/index.css`,品牌色 = `--primary`,状态色 =
+  success/warning/destructive/info);暗色 `.dark` class 由 next-themes 驱动
+  (key `lokideploy.theme.mode`),禁止硬编码调色板类(如 `bg-emerald-600`)。
+- 开发服务器跑在 `:3000`(strictPort),把 `/api` 代理到 `:8080`;生产环境下由 Go
+  二进制直接提供 `dist/` 静态服务。构建指纹(`__APP_VERSION__`/`__COMMIT_HASH__`)
+  在 Settings「关于」展示。
 
 ## Loki 部署相关细节
 - 合法的部署模式:`k8s-helm`、`k8s-yaml`、`host-binary`。K8s 模式需要一个 Cluster(kubeconfig);
diff --git a/Dockerfile b/Dockerfile
index f9fb274..3de2197 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,8 +1,8 @@
 # ============================================================
-# LokiDeploy - Secure Multi-Stage Dockerfile
+# opsx-loki - Secure Multi-Stage Dockerfile
 # ============================================================
 # P0 Fixes:
-#   - Non-root user (lokideploy:1000)
+#   - Non-root user (opsxloki:1000)
 #   - No hardcoded JWT_SECRET (validated at runtime)
 #   - HEALTHCHECK instruction added
 #   - Binary installation verification
@@ -45,7 +45,7 @@ COPY backend/ ./
 RUN CGO_ENABLED=0 GOOS=linux go build \
     -a -installsuffix cgo \
     -ldflags="-s -w -extldflags '-static'" \
-    -o bin/lokideploy .
+    -o bin/opsxloki .
 
 # ---------------------------------------------------------------
 # Stage 3: Final Runtime Image
@@ -119,26 +119,26 @@ RUN set -eux; \
 # ---------------------------------------------------------------
 # P0: Create non-root user and group
 # ---------------------------------------------------------------
-RUN addgroup -g 1000 lokideploy && \
-    adduser -u 1000 -G lokideploy -s /bin/sh -D lokideploy
+RUN addgroup -g 1000 opsxloki && \
+    adduser -u 1000 -G opsxloki -s /bin/sh -D opsxloki
 
 # ---------------------------------------------------------------
 # Working directory with proper ownership
 # ---------------------------------------------------------------
 WORKDIR /app
-RUN chown lokideploy:lokideploy /app
+RUN chown opsxloki:opsxloki /app
 
 # ---- Copy application files with correct ownership (P1) ----
-COPY --from=frontend-builder --chown=lokideploy:lokideploy /app/frontend/dist ./dist
-COPY --from=backend-builder --chown=lokideploy:lokideploy /app/backend/bin/lokideploy ./lokideploy
+COPY --from=frontend-builder --chown=opsxloki:opsxloki /app/frontend/dist ./dist
+COPY --from=backend-builder --chown=opsxloki:opsxloki /app/backend/bin/opsxloki ./opsxloki
 
 # Create data directory with non-root ownership
-RUN mkdir -p /app/data && chown -R lokideploy:lokideploy /app/data
+RUN mkdir -p /app/data && chown -R opsxloki:opsxloki /app/data
 
 # Create .kube directory for non-root user (P0: not /root/.kube)
-RUN mkdir -p /home/lokideploy/.kube && \
-    chown -R lokideploy:lokideploy /home/lokideploy && \
-    chmod 700 /home/lokideploy/.kube
+RUN mkdir -p /home/opsxloki/.kube && \
+    chown -R opsxloki:opsxloki /home/opsxloki && \
+    chmod 700 /home/opsxloki/.kube
 
 # ---- Security hardening: remove unnecessary tools ----
 RUN rm -rf /tmp/* /var/cache/apk/*
@@ -148,16 +148,16 @@ RUN rm -rf /tmp/* /var/cache/apk/*
 # ---------------------------------------------------------------
 ENV DATA_DIR=/app/data
 ENV SERVER_PORT=8080
-ENV KUBECONFIG=/home/lokideploy/.kube/config
+ENV KUBECONFIG=/home/opsxloki/.kube/config
 # HOME must be set for kubectl/helm to find config
-ENV HOME=/home/lokideploy
+ENV HOME=/home/opsxloki
 
 # NOTE: JWT_SECRET and ENCRYPTION_KEY are NOT set here.
 # They MUST be provided at runtime via docker-compose env or secrets.
 # The entrypoint script will enforce this requirement.
 
 # ---- Copy and configure entrypoint script ----
-COPY --chown=lokideploy:lokideploy docker-entrypoint.sh /usr/local/bin/
+COPY --chown=opsxloki:opsxloki docker-entrypoint.sh /usr/local/bin/
 RUN chmod +x /usr/local/bin/docker-entrypoint.sh
 
 EXPOSE 8080
@@ -172,7 +172,7 @@ HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
 # ---------------------------------------------------------------
 # P0: Switch to non-root user
 # ---------------------------------------------------------------
-USER lokideploy
+USER opsxloki
 
 ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]
-CMD ["./lokideploy"]
+CMD ["./opsxloki"]
diff --git a/Makefile b/Makefile
index 9eff6c3..f5e174f 100644
--- a/Makefile
+++ b/Makefile
@@ -1,5 +1,5 @@
 # ============================================================
-# LokiDeploy - Makefile
+# opsx-loki - Makefile
 # Convenient shortcuts for common operations
 # ============================================================
 
@@ -7,7 +7,7 @@
 
 # Default target
 help:
-	@echo "LokiDeploy v2 - Available Commands:"
+	@echo "opsx-loki v2 - Available Commands:"
 	@echo ""
 	@echo "  make build       - Build Docker image"
 	@echo "  make start       - Start with docker-compose (dev)"
@@ -24,12 +24,12 @@ help:
 
 # Build Docker image
 build:
-	@echo "Building LokiDeploy v2 image..."
+	@echo "Building opsx-loki v2 image..."
 	@docker compose build --no-cache
 
 # Development
 start:
-	@echo "Starting LokiDeploy (dev mode)..."
+	@echo "Starting opsx-loki (dev mode)..."
 	@echo ""
 	@if [ -z "$${JWT_SECRET:-}" ]; then \
 		echo "WARNING: JWT_SECRET not set!"; \
@@ -41,12 +41,12 @@ start:
 	fi
 	@docker compose up -d
 	@echo ""
-	@echo "LokiDeploy started!"
+	@echo "opsx-loki started!"
 	@echo "  URL: http://localhost:$${SERVER_PORT:-8080}"
 	@echo "  Check status: make status"
 
 stop:
-	@echo "Stopping LokiDeploy..."
+	@echo "Stopping opsx-loki..."
 	@docker compose down --timeout 15
 
 status:
@@ -54,10 +54,10 @@ status:
 	@docker compose ps
 	@echo ""
 	@echo "=== Health Checks ==="
-	@docker inspect --format='{{.Name}}: {{.State.Health.Status}}' lokideploy 2>/dev/null || echo "lokideploy: container not found"
+	@docker inspect --format='{{.Name}}: {{.State.Health.Status}}' opsxloki 2>/dev/null || echo "opsxloki: container not found"
 	@echo ""
 	@echo "=== Resource Usage ==="
-	@docker stats --no-stream --format "table {{.Name}}\t{{.CPUPerc}}\t{{.MemUsage}}\t{{.NetIO}}\t{{.BlockIO}}" lokideploy 2>/dev/null || true
+	@docker stats --no-stream --format "table {{.Name}}\t{{.CPUPerc}}\t{{.MemUsage}}\t{{.NetIO}}\t{{.BlockIO}}" opsxloki 2>/dev/null || true
 
 logs:
 	@docker compose logs -f --tail=50
@@ -69,7 +69,7 @@ prod-setup: secrets
 	@echo "Production secrets created in ./secrets/"
 
 prod:
-	@echo "Starting LokiDeploy (production mode)..."
+	@echo "Starting opsx-loki (production mode)..."
 	@if [ ! -f secrets/jwt_secret.txt ] || [ ! -f secrets/encryption_key.txt ]; then \
 		echo "ERROR: Secrets not found. Run 'make secrets' first."; \
 		exit 1; \
@@ -99,7 +99,7 @@ secrets:
 
 # Maintenance
 shell:
-	@docker compose exec lokideploy /bin/sh
+	@docker compose exec opsxloki /bin/sh
 
 clean:
 	@echo "Cleaning up..."
diff --git a/README.md b/README.md
index 29cf963..65cb18d 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# LokiDeploy v2 — 安全的 K8s Loki 部署平台
+# opsx-loki v2 — 安全的 K8s Loki 部署平台
 
 一个轻量级的 **Gin + React + JSON 文件存储** 平台,用于通过 SSH 或 kubeconfig 把 Grafana Loki
 日志聚合系统部署到 Kubernetes 集群或裸金属主机上。
@@ -50,8 +50,8 @@ echo "export ENCRYPTION_KEY=$ENCRYPTION_KEY" >> ~/.bashrc
 ### 第 2 步:用 Docker Compose 启动(推荐)
 
 ```bash
-git clone https://github.com/your/lokideploy.git
-cd lokideploy
+git clone https://github.com/your/opsx-loki.git
+cd opsx-loki
 
 # 设置密钥(见第 1 步)
 export JWT_SECRET=$(openssl rand -hex 32)
@@ -72,7 +72,7 @@ docker compose logs -f
 
 ```bash
 # 容器级健康检查(内部)
-docker inspect --format='{{.State.Health.Status}}' lokideploy
+docker inspect --format='{{.State.Health.Status}}' opsxloki
 
 # 期望输出:"healthy"
 
@@ -104,11 +104,11 @@ docker compose -f docker-compose.prod.yml up -d
 docker swarm init
 
 # 创建 secrets
-echo "$(openssl rand -hex 32)" | docker secret create lokideploy_jwt -
-echo "$(openssl rand -hex 32)" | docker secret create lokideploy_key -
+echo "$(openssl rand -hex 32)" | docker secret create opsxloki_jwt -
+echo "$(openssl rand -hex 32)" | docker secret create opsxloki_key -
 
 # 部署
-docker stack deploy -c docker-compose.prod.yml lokideploy
+docker stack deploy -c docker-compose.prod.yml opsxloki
 ```
 
 ### 安全清单
@@ -171,7 +171,7 @@ cd frontend && npm run lint                      # ESLint
     v
 后端(Go + Gin)                            [:8080]
     |
-    +---> JSON 文件数据库(data/lokideploy.json)
+    +---> JSON 文件数据库(data/opsxloki.json(兼容加载旧 lokideploy.json))
     +---> K8s CLI(kubectl / helm)
     +---> SSH 客户端(golang.org/x/crypto/ssh)
     +---> Loki 部署器(Helm Chart / YAML / Binary)
@@ -196,7 +196,7 @@ cd frontend && npm run lint                      # ESLint
 
 ### 数据层 — JSON 文件数据库
 
-持久化是 **单个 JSON 文件** `$DATA_DIR/lokideploy.json`(默认 `./data/`),**没有 SQL 数据库**。
+持久化是 **单个 JSON 文件** `$DATA_DIR/opsxloki.json(兼容加载旧 lokideploy.json)`(默认 `./data/`),**没有 SQL 数据库**。
 `repository.JsonDB` 是与文件对应的内存结构:
 
 - 写操作由 `Lock()/RLock()` 保护,`RequestSave()` 触发 **防抖(500ms)原子写**(临时文件 →
@@ -228,7 +228,7 @@ cd frontend && npm run lint                      # ESLint
 |                   |     |  ~/.kube (只读)     |
 |  +-------------+  |     |  ~/.ssh (只读)      |
 |  | 容器        |  |     |  ./data (读写)      |
-|  | (lokideploy |  |     +---------------------+
+|  | (opsxloki |  |     +---------------------+
 |  |  UID:1000)  |  |
 |  | no-new-privs|  |
 |  | cap_drop:ALL|  |
@@ -270,7 +270,7 @@ wget --spider http://localhost:8080/index.html
 curl http://localhost:8080/index.html
 
 # Docker inspect
-docker inspect --format='{{.State.Health}}' lokideploy
+docker inspect --format='{{.State.Health}}' opsxloki
 ```
 
 健康检查参数:
@@ -423,7 +423,7 @@ docker compose up -d
 
 ```bash
 # 查看容器状态
-docker inspect --format='{{.State.Health}}' lokideploy
+docker inspect --format='{{.State.Health}}' opsxloki
 
 # 查看日志
 docker compose logs --tail=50
diff --git a/backend/config/config.go b/backend/config/config.go
index 39250cb..0e35d86 100644
--- a/backend/config/config.go
+++ b/backend/config/config.go
@@ -46,7 +46,7 @@ func GetConfig() *Config {
 
 		instance = &Config{
 			ServerPort:    getEnv("SERVER_PORT", "8080"),
-			DatabasePath:  filepath.Join(dataDir, "lokideploy.json"),
+			DatabasePath:  databasePath(dataDir),
 			JWTSecret:     jwtSecret,
 			EncryptionKey: encKey,
 			DataDir:       dataDir,
@@ -67,3 +67,16 @@ func getEnv(key, defaultVal string) string {
 	}
 	return defaultVal
 }
+
+// databasePath 新名优先;旧 lokideploy.json 存在且新文件不存在时沿用旧文件(数据平滑迁移)
+func databasePath(dataDir string) string {
+	newPath := filepath.Join(dataDir, "opsxloki.json")
+	if _, err := os.Stat(newPath); err == nil {
+		return newPath
+	}
+	oldPath := filepath.Join(dataDir, "lokideploy.json")
+	if _, err := os.Stat(oldPath); err == nil {
+		return oldPath
+	}
+	return newPath
+}
diff --git a/backend/controllers/auth.go b/backend/controllers/auth.go
index 5b976f9..596760e 100644
--- a/backend/controllers/auth.go
+++ b/backend/controllers/auth.go
@@ -1,11 +1,11 @@
 package controllers
 
 import (
-	"lokideploy/dto"
-	"lokideploy/models"
-	"lokideploy/pkg/jwt"
-	"lokideploy/services"
-	"lokideploy/utils"
+	"opsxloki/dto"
+	"opsxloki/models"
+	"opsxloki/pkg/jwt"
+	"opsxloki/services"
+	"opsxloki/utils"
 
 	"github.com/gin-gonic/gin"
 )
@@ -41,11 +41,27 @@ func (ctrl *AuthController) RefreshToken(c *gin.Context) {
 	if !utils.BindAndValidate(c, &req) {
 		return
 	}
-	tokenPair, err := jwt.RefreshAccessToken(req.RefreshToken)
+	claims, err := jwt.ParseRefreshToken(req.RefreshToken)
 	if err != nil {
 		utils.Unauthorized(c, "invalid or expired refresh token")
 		return
 	}
+	// 对照数据库校验用户存在性与会话版本：改密/重置密码后旧 refresh token 立即失效
+	user, err := ctrl.service.GetUserByID(claims.UserID)
+	if err != nil {
+		utils.Unauthorized(c, "user no longer exists")
+		return
+	}
+	if claims.TokenVersion != user.TokenVersion {
+		utils.Unauthorized(c, "session revoked, please login again")
+		return
+	}
+	// 以用户当前 role 与版本签发，角色变更在刷新时即时生效
+	tokenPair, err := jwt.GenerateTokenPair(user.ID, user.Username, user.Role, user.TokenVersion)
+	if err != nil {
+		utils.Error(c, 500, err.Error())
+		return
+	}
 	utils.Success(c, gin.H{
 		"accessToken":  tokenPair.AccessToken,
 		"refreshToken": tokenPair.RefreshToken,
@@ -53,22 +69,6 @@ func (ctrl *AuthController) RefreshToken(c *gin.Context) {
 	})
 }
 
-func (ctrl *AuthController) Register(c *gin.Context) {
-	var req dto.RegisterRequest
-	if !utils.BindAndValidate(c, &req) {
-		return
-	}
-	if req.Role == "" {
-		req.Role = "user"
-	}
-	user, err := ctrl.service.Register(req.Username, req.Password, req.Nickname, req.Role)
-	if err != nil {
-		utils.Error(c, 400, err.Error())
-		return
-	}
-	utils.Success(c, models.SanitizedJSON(user))
-}
-
 func (ctrl *AuthController) GetUser(c *gin.Context) {
 	claims, ok := jwt.GetUserFromContext(c)
 	if !ok {
diff --git a/backend/controllers/cluster.go b/backend/controllers/cluster.go
index e19fbb5..d3853bf 100644
--- a/backend/controllers/cluster.go
+++ b/backend/controllers/cluster.go
@@ -1,10 +1,10 @@
 package controllers
 
 import (
-	"lokideploy/dto"
-	"lokideploy/models"
-	"lokideploy/services"
-	"lokideploy/utils"
+	"opsxloki/dto"
+	"opsxloki/models"
+	"opsxloki/services"
+	"opsxloki/utils"
 
 	"github.com/gin-gonic/gin"
 )
diff --git a/backend/controllers/collector.go b/backend/controllers/collector.go
index 714de27..0cfd812 100644
--- a/backend/controllers/collector.go
+++ b/backend/controllers/collector.go
@@ -1,10 +1,10 @@
 package controllers
 
 import (
-	"lokideploy/dto"
-	"lokideploy/models"
-	"lokideploy/services"
-	"lokideploy/utils"
+	"opsxloki/dto"
+	"opsxloki/models"
+	"opsxloki/services"
+	"opsxloki/utils"
 
 	"github.com/gin-gonic/gin"
 )
diff --git a/backend/controllers/deployment.go b/backend/controllers/deployment.go
index 36e0777..6e808dd 100644
--- a/backend/controllers/deployment.go
+++ b/backend/controllers/deployment.go
@@ -1,10 +1,12 @@
 package controllers
 
 import (
-	"lokideploy/dto"
-	"lokideploy/models"
-	"lokideploy/services"
-	"lokideploy/utils"
+	"context"
+	"time"
+	"opsxloki/dto"
+	"opsxloki/models"
+	"opsxloki/services"
+	"opsxloki/utils"
 
 	"github.com/gin-gonic/gin"
 )
@@ -37,6 +39,8 @@ func (ctrl *DeploymentController) Create(c *gin.Context) {
 		ResourcesCPU:    req.ResourcesCPU,
 		ResourcesMem:    req.ResourcesMem,
 		StorageSize:     req.StorageSize,
+		GrafanaEnabled:  req.GrafanaEnabled,
+		GrafanaVersion:  req.GrafanaVersion,
 	})
 	if err != nil {
 		utils.Error(c, 400, err.Error())
@@ -59,6 +63,34 @@ func (ctrl *DeploymentController) Get(c *gin.Context) {
 	utils.Success(c, models.SanitizedJSON(deployment))
 }
 
+// Ready 部署就绪探测(经自动注册的数据源访问 Loki /ready)
+func (ctrl *DeploymentController) Ready(c *gin.Context) {
+	id, err := utils.IntParam(c, "id")
+	if err != nil {
+		utils.BadRequest(c, "ID 无效")
+		return
+	}
+	d, err := ctrl.service.Get(uint(id))
+	if err != nil {
+		utils.NotFound(c, "部署不存在")
+		return
+	}
+	ctx, cancel := context.WithTimeout(c.Request.Context(), 15*time.Second)
+	defer cancel()
+	ready, msg := services.DeploymentReady(ctx, d.Name)
+	utils.Success(c, gin.H{"ready": ready, "message": msg})
+}
+
+// Preflight 向导预检:聚合存储/集群/主机/Loki/采集器状态
+func (ctrl *DeploymentController) Preflight(c *gin.Context) {
+	utils.Success(c, ctrl.service.Preflight())
+}
+
+// GetVersions 返回支持的 Loki 版本列表（前端部署表单版本下拉数据源）
+func (ctrl *DeploymentController) GetVersions(c *gin.Context) {
+	utils.Success(c, gin.H{"versions": services.LokiVersionList})
+}
+
 func (ctrl *DeploymentController) List(c *gin.Context) {
 	page, pageSize := utils.Pagination(c)
 	deployments, total, err := ctrl.service.List(page, pageSize)
diff --git a/backend/controllers/host.go b/backend/controllers/host.go
index 1238d25..c6162e7 100644
--- a/backend/controllers/host.go
+++ b/backend/controllers/host.go
@@ -1,11 +1,10 @@
 package controllers
 
 import (
-	"lokideploy/dto"
-	"lokideploy/models"
-	"lokideploy/pkg/crypto"
-	"lokideploy/services"
-	"lokideploy/utils"
+	"opsxloki/dto"
+	"opsxloki/models"
+	"opsxloki/services"
+	"opsxloki/utils"
 
 	"github.com/gin-gonic/gin"
 )
@@ -111,12 +110,7 @@ func (ctrl *HostController) GetInfo(c *gin.Context) {
 		return
 	}
 
-	password := host.Password
-	if len(password) > 4 && password[:4] == "ENC:" {
-		password, _ = crypto.Decrypt(password[4:])
-	}
-
-	client, err := services.NewSSHClient(host.HostIP, host.Port, host.User, password)
+	client, err := services.NewSSHClientWithAuth(services.HostSSHAuth(host))
 	if err != nil {
 		utils.Error(c, 500, err.Error())
 		return
diff --git a/backend/controllers/ldap.go b/backend/controllers/ldap.go
new file mode 100644
index 0000000..a1802d8
--- /dev/null
+++ b/backend/controllers/ldap.go
@@ -0,0 +1,81 @@
+package controllers
+
+import (
+	"opsxloki/dto"
+	"opsxloki/services"
+	"opsxloki/utils"
+
+	"github.com/gin-gonic/gin"
+)
+
+// LdapController LDAP 配置与用户导入(配置读写仅 admin)
+type LdapController struct{}
+
+func NewLdapController() *LdapController {
+	return &LdapController{}
+}
+
+// GetConfig LDAP 配置(密码剔除,附 hasPassword/configured)
+func (ctrl *LdapController) GetConfig(c *gin.Context) {
+	utils.Success(c, services.GetLDAPPublicConfig())
+}
+
+// UpdateConfig 保存配置(bindPassword 空则保留旧值)
+func (ctrl *LdapController) UpdateConfig(c *gin.Context) {
+	var req dto.LdapConfigRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	cfg := &services.LDAPConfig{
+		Enabled: req.Enabled, Host: req.Host, Port: req.Port, UseSSL: req.UseSSL,
+		BindDN: req.BindDN, BindPassword: req.BindPassword, BaseDN: req.BaseDN,
+		UserFilter: req.UserFilter, UsernameAttr: req.UsernameAttr,
+		NameAttr: req.NameAttr, EmailAttr: req.EmailAttr,
+	}
+	if err := services.SaveLDAPConfig(cfg); err != nil {
+		utils.Error(c, 400, err.Error())
+		return
+	}
+	utils.Success(c, services.GetLDAPPublicConfig())
+}
+
+// TestConnection 用表单参数测试(未保存也可测;密码空回退已存;可选用户级验证)
+func (ctrl *LdapController) TestConnection(c *gin.Context) {
+	var req dto.LdapConfigRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	cfg := &services.LDAPConfig{
+		Enabled: req.Enabled, Host: req.Host, Port: req.Port, UseSSL: req.UseSSL,
+		BindDN: req.BindDN, BindPassword: req.BindPassword, BaseDN: req.BaseDN,
+		UserFilter: req.UserFilter, UsernameAttr: req.UsernameAttr,
+		NameAttr: req.NameAttr, EmailAttr: req.EmailAttr,
+	}
+	if cfg.Port == 0 {
+		cfg.Port = 389
+	}
+	result := services.TestLDAPConnection(cfg, req.TestUsername, req.TestPassword)
+	utils.Success(c, result)
+}
+
+// ListUsers 导入预览:按 ouDN(空用 baseDN)搜索用户
+func (ctrl *LdapController) ListUsers(c *gin.Context) {
+	var req dto.LdapUsersRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	cfg := services.GetLDAPConfig()
+	if !cfg.Enabled || cfg.Host == "" {
+		utils.Error(c, 400, "LDAP 未启用或未配置")
+		return
+	}
+	if req.BindPassword != "" {
+		cfg.BindPassword = req.BindPassword
+	}
+	users, err := services.SearchLDAPUsersForImport(cfg, req.OUDN)
+	if err != nil {
+		utils.Error(c, 400, err.Error())
+		return
+	}
+	utils.Success(c, users)
+}
diff --git a/backend/controllers/log_policy.go b/backend/controllers/log_policy.go
new file mode 100644
index 0000000..a665f5b
--- /dev/null
+++ b/backend/controllers/log_policy.go
@@ -0,0 +1,59 @@
+package controllers
+
+import (
+	"strconv"
+
+	"opsxloki/models"
+	"opsxloki/services"
+	"opsxloki/utils"
+
+	"github.com/gin-gonic/gin"
+)
+
+func (ctrl *LogsController) ListPolicyGroups(c *gin.Context) {
+	utils.Success(c, models.SanitizedJSON(services.ListLogPolicyGroups()))
+}
+
+func (ctrl *LogsController) CreatePolicyGroup(c *gin.Context) {
+	var group models.LogPolicyGroup
+	if !utils.BindAndValidate(c, &group) {
+		return
+	}
+	created, err := services.CreateLogPolicyGroup(group)
+	if err != nil {
+		utils.BadRequest(c, err.Error())
+		return
+	}
+	utils.Success(c, models.SanitizedJSON(created))
+}
+
+func (ctrl *LogsController) UpdatePolicyGroup(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		utils.BadRequest(c, "无效的策略组 ID")
+		return
+	}
+	var group models.LogPolicyGroup
+	if !utils.BindAndValidate(c, &group) {
+		return
+	}
+	updated, err := services.UpdateLogPolicyGroup(uint(id), group)
+	if err != nil {
+		utils.BadRequest(c, err.Error())
+		return
+	}
+	utils.Success(c, models.SanitizedJSON(updated))
+}
+
+func (ctrl *LogsController) DeletePolicyGroup(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		utils.BadRequest(c, "无效的策略组 ID")
+		return
+	}
+	if err := services.DeleteLogPolicyGroup(uint(id)); err != nil {
+		utils.BadRequest(c, err.Error())
+		return
+	}
+	utils.Success(c, gin.H{"message": "deleted"})
+}
diff --git a/backend/controllers/logs.go b/backend/controllers/logs.go
new file mode 100644
index 0000000..6b58607
--- /dev/null
+++ b/backend/controllers/logs.go
@@ -0,0 +1,280 @@
+package controllers
+
+import (
+	"context"
+	"encoding/json"
+	"strconv"
+	"strings"
+	"time"
+
+	"opsxloki/dto"
+	"opsxloki/models"
+	"opsxloki/services"
+	"opsxloki/utils"
+
+	"github.com/gin-gonic/gin"
+)
+
+func (ctrl *LogsController) Context(c *gin.Context) {
+	var req dto.LogContextRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	src := services.GetLogSource(req.SourceID)
+	if src == nil {
+		utils.BadRequest(c, "数据源不存在")
+		return
+	}
+	ts, err := strconv.ParseInt(req.TimestampNs, 10, 64)
+	if err != nil || ts < 1 {
+		utils.BadRequest(c, "时间戳无效")
+		return
+	}
+	parts := make([]string, 0, len(req.Labels))
+	for key, value := range req.Labels {
+		if !services.ValidLogLabelName(key) {
+			utils.BadRequest(c, "标签名无效")
+			return
+		}
+		encoded, _ := json.Marshal(value)
+		parts = append(parts, key+"="+string(encoded))
+	}
+	query, err := services.AuthorizedLogQuery(src, c.GetUint("userId"), c.GetString("role") == "admin", "{"+strings.Join(parts, ",")+"}")
+	if err != nil {
+		utils.Forbidden(c, err.Error())
+		return
+	}
+	span := int64(5 * time.Minute)
+	before, err := services.QueryLokiLogs(c.Request.Context(), src, query, ts-span, ts-1, 1, "backward", "")
+	if err != nil {
+		utils.Error(c, 502, err.Error())
+		return
+	}
+	after, err := services.QueryLokiLogs(c.Request.Context(), src, query, ts+1, ts+span, 1, "forward", "")
+	if err != nil {
+		utils.Error(c, 502, err.Error())
+		return
+	}
+	utils.Success(c, gin.H{"before": before.Entries, "after": after.Entries})
+}
+
+// LogsController 日志查询代理 + 数据源管理
+type LogsController struct{}
+
+func NewLogsController() *LogsController {
+	return &LogsController{}
+}
+
+// ==================== 数据源 ====================
+
+func (ctrl *LogsController) ListSources(c *gin.Context) {
+	list := services.ListVisibleLogSources(c.GetUint("userId"), c.GetString("role") == "admin")
+	utils.Success(c, utils.PageData{List: list, Total: int64(len(list)), Page: 1, PageSize: 100})
+}
+
+func (ctrl *LogsController) CreateSource(c *gin.Context) {
+	var req dto.LogSourceRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	if req.Name == "" || req.TargetType == "" {
+		utils.BadRequest(c, "名称与类型必填")
+		return
+	}
+	if err := services.ValidateSourceAccess(req.Access); err != nil {
+		utils.BadRequest(c, err.Error())
+		return
+	}
+	src := &models.LogSource{
+		Name: req.Name, TargetType: req.TargetType,
+		Namespace: req.Namespace, Service: req.Service, Port: req.Port,
+		URL: req.URL, AuthType: req.AuthType, BasicUser: req.BasicUser,
+		BasicPass: req.BasicPass, BearerToken: req.BearerToken, Headers: req.Headers, SkipTLSVerify: req.SkipTLSVerify, IsDefault: req.IsDefault, Access: req.Access,
+	}
+	if req.TargetType == "cluster-svc" {
+		if req.ClusterID > 0 {
+			id := req.ClusterID
+			src.ClusterID = &id
+		} else {
+			utils.BadRequest(c, "cluster-svc 类型必须选择集群")
+			return
+		}
+	}
+	created, err := services.CreateLogSource(src)
+	if err != nil {
+		utils.Error(c, 400, err.Error())
+		return
+	}
+	utils.Success(c, created.Sanitized())
+}
+
+func (ctrl *LogsController) UpdateSource(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		utils.BadRequest(c, "ID 无效")
+		return
+	}
+	var updates map[string]interface{}
+	if !utils.BindAndValidate(c, &updates) {
+		return
+	}
+	if err := services.UpdateLogSource(uint(id), updates); err != nil {
+		utils.Error(c, 400, err.Error())
+		return
+	}
+	utils.Success(c, gin.H{"message": "updated"})
+}
+
+func (ctrl *LogsController) DeleteSource(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		utils.BadRequest(c, "ID 无效")
+		return
+	}
+	if err := services.DeleteLogSource(uint(id)); err != nil {
+		utils.Error(c, 400, err.Error())
+		return
+	}
+	utils.Success(c, gin.H{"message": "deleted"})
+}
+
+// TestSource 数据源连通性测试(按 id 或表单参数)
+func (ctrl *LogsController) TestSource(c *gin.Context) {
+	var req dto.LogSourceRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	var src *models.LogSource
+	if req.ID > 0 {
+		src = services.GetLogSource(req.ID)
+		if src == nil {
+			utils.NotFound(c, "数据源不存在")
+			return
+		}
+	} else {
+		src = &models.LogSource{
+			TargetType: req.TargetType, Namespace: req.Namespace, Service: req.Service,
+			Port: req.Port, URL: req.URL, AuthType: req.AuthType,
+			BasicUser: req.BasicUser, BasicPass: req.BasicPass, BearerToken: req.BearerToken, Headers: req.Headers, SkipTLSVerify: req.SkipTLSVerify,
+		}
+		if req.TargetType == "cluster-svc" && req.ClusterID > 0 {
+			id := req.ClusterID
+			src.ClusterID = &id
+		}
+	}
+	utils.Success(c, services.TestLogSource(c.Request.Context(), src))
+}
+
+// ==================== 查询代理 ====================
+
+func (ctrl *LogsController) Query(c *gin.Context) {
+	var req dto.LogQueryRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	src := services.GetLogSource(req.SourceID)
+	if src == nil {
+		utils.BadRequest(c, "数据源不存在")
+		return
+	}
+	query, err := services.AuthorizedLogQuery(src, c.GetUint("userId"), c.GetString("role") == "admin", req.Query)
+	if err != nil {
+		utils.Forbidden(c, err.Error())
+		return
+	}
+	result, err := services.QueryLokiLogs(c.Request.Context(), src, query,
+		req.Start, req.End, req.Limit, req.Direction, req.Cursor)
+	if err != nil {
+		utils.Error(c, 502, err.Error())
+		return
+	}
+	utils.Success(c, result)
+}
+
+func (ctrl *LogsController) Labels(c *gin.Context) {
+	id, _ := strconv.ParseUint(c.Query("sourceId"), 10, 64)
+	src := services.GetLogSource(uint(id))
+	if src == nil {
+		utils.BadRequest(c, "数据源不存在")
+		return
+	}
+	if _, err := services.AuthorizedLogQuery(src, c.GetUint("userId"), c.GetString("role") == "admin", "{}"); err != nil {
+		utils.Forbidden(c, err.Error())
+		return
+	}
+	start, _ := strconv.ParseInt(c.Query("start"), 10, 64)
+	end, _ := strconv.ParseInt(c.Query("end"), 10, 64)
+	labels, err := services.LokiLabels(c.Request.Context(), src, start, end)
+	if err != nil {
+		utils.Error(c, 502, err.Error())
+		return
+	}
+	utils.Success(c, labels)
+}
+
+func (ctrl *LogsController) LabelValues(c *gin.Context) {
+	id, _ := strconv.ParseUint(c.Query("sourceId"), 10, 64)
+	src := services.GetLogSource(uint(id))
+	if src == nil {
+		utils.BadRequest(c, "数据源不存在")
+		return
+	}
+	start, _ := strconv.ParseInt(c.Query("start"), 10, 64)
+	end, _ := strconv.ParseInt(c.Query("end"), 10, 64)
+	requestedQuery := c.Query("query")
+	if strings.TrimSpace(requestedQuery) == "" {
+		requestedQuery = "{}"
+	}
+	query, err := services.AuthorizedLogQuery(src, c.GetUint("userId"), c.GetString("role") == "admin", requestedQuery)
+	if err != nil {
+		utils.Forbidden(c, err.Error())
+		return
+	}
+	values, err := services.LokiLabelValues(c.Request.Context(), src,
+		c.Param("name"), query, start, end)
+	if err != nil {
+		utils.Error(c, 502, err.Error())
+		return
+	}
+	utils.Success(c, values)
+}
+
+// Health Loki /ready 探活(查询页状态点)
+func (ctrl *LogsController) Health(c *gin.Context) {
+	id, _ := strconv.ParseUint(c.Query("sourceId"), 10, 64)
+	src := services.GetLogSource(uint(id))
+	if src == nil {
+		utils.BadRequest(c, "数据源不存在")
+		return
+	}
+	if _, err := services.AuthorizedLogQuery(src, c.GetUint("userId"), c.GetString("role") == "admin", "{}"); err != nil {
+		utils.Forbidden(c, err.Error())
+		return
+	}
+	ctx, cancel := context.WithTimeout(c.Request.Context(), 15*time.Second)
+	defer cancel()
+	utils.Success(c, gin.H{"ready": services.LokiReady(ctx, src)})
+}
+
+func (ctrl *LogsController) Histogram(c *gin.Context) {
+	var req dto.LogQueryRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	src := services.GetLogSource(req.SourceID)
+	if src == nil {
+		utils.BadRequest(c, "数据源不存在")
+		return
+	}
+	query, err := services.AuthorizedLogQuery(src, c.GetUint("userId"), c.GetString("role") == "admin", req.Query)
+	if err != nil {
+		utils.Forbidden(c, err.Error())
+		return
+	}
+	buckets, err := services.LokiHistogram(c.Request.Context(), src, query, req.Start, req.End)
+	if err != nil {
+		utils.Error(c, 502, err.Error())
+		return
+	}
+	utils.Success(c, buckets)
+}
diff --git a/backend/controllers/storage.go b/backend/controllers/storage.go
index 8028512..afcce7c 100644
--- a/backend/controllers/storage.go
+++ b/backend/controllers/storage.go
@@ -1,10 +1,10 @@
 package controllers
 
 import (
-	"lokideploy/dto"
-	"lokideploy/models"
-	"lokideploy/services"
-	"lokideploy/utils"
+	"opsxloki/dto"
+	"opsxloki/models"
+	"opsxloki/services"
+	"opsxloki/utils"
 
 	"github.com/gin-gonic/gin"
 )
@@ -96,3 +96,22 @@ func (ctrl *StorageController) GetDefault(c *gin.Context) {
 	}
 	utils.Success(c, models.SanitizedJSON(storage))
 }
+
+// TestConnection 测试对象存储连接(凭证 + 桶存在性,可选自动创建;不落库)
+func (ctrl *StorageController) TestConnection(c *gin.Context) {
+	var req dto.StorageTestRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	result := services.TestStorageConnection(services.StorageTestParams{
+		StorageType:    req.StorageType,
+		Endpoint:       req.Endpoint,
+		Bucket:         req.Bucket,
+		Region:         req.Region,
+		AccessKey:      req.AccessKey,
+		SecretKey:      req.SecretKey,
+		Insecure:       req.Insecure,
+		CreateIfMissing: req.CreateIfMissing,
+	})
+	utils.Success(c, result)
+}
diff --git a/backend/controllers/user.go b/backend/controllers/user.go
new file mode 100644
index 0000000..c791437
--- /dev/null
+++ b/backend/controllers/user.go
@@ -0,0 +1,110 @@
+package controllers
+
+import (
+	"strconv"
+
+	"opsxloki/dto"
+	"opsxloki/models"
+	"opsxloki/pkg/jwt"
+	"opsxloki/services"
+	"opsxloki/utils"
+
+	"github.com/gin-gonic/gin"
+)
+
+// UserController 用户管理（全部端点仅 admin 可用，无 RBAC）
+type UserController struct {
+	service *services.AuthService
+}
+
+func NewUserController() *UserController {
+	return &UserController{service: services.NewAuthService()}
+}
+
+// List 分页返回用户列表（Sanitized 输出，密码哈希不出库）
+func (ctrl *UserController) List(c *gin.Context) {
+	page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
+	pageSize, _ := strconv.Atoi(c.DefaultQuery("pageSize", "20"))
+	if page < 1 {
+		page = 1
+	}
+	if pageSize < 1 || pageSize > 100 {
+		pageSize = 20
+	}
+
+	users, total := ctrl.service.ListUsers(page, pageSize)
+	list := make([]map[string]interface{}, len(users))
+	for i := range users {
+		list[i] = users[i].Sanitized()
+	}
+	utils.Success(c, utils.PageData{List: list, Total: total, Page: page, PageSize: pageSize})
+}
+
+// Create 创建用户（原 /auth/register 逻辑收编至此）
+func (ctrl *UserController) Create(c *gin.Context) {
+	var req dto.UserCreateRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	role := req.Role
+	if role == "" {
+		role = "user"
+	}
+	user, err := ctrl.service.Register(req.Username, req.Password, req.Nickname, role)
+	if err != nil {
+		utils.Error(c, 400, err.Error())
+		return
+	}
+	utils.Success(c, models.SanitizedJSON(user))
+}
+
+// Delete 删除用户（守卫：不能删自己 / 最后一个 admin）
+func (ctrl *UserController) Delete(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		utils.BadRequest(c, "无效的用户 ID")
+		return
+	}
+	claims, ok := jwt.GetUserFromContext(c)
+	if !ok {
+		utils.Unauthorized(c, "")
+		return
+	}
+	if err := ctrl.service.DeleteUser(uint(id), claims.UserID); err != nil {
+		utils.Error(c, 400, err.Error())
+		return
+	}
+	utils.Success(c, gin.H{"message": "user deleted"})
+}
+
+// ResetPassword 管理员重置密码（递增 TokenVersion，目标用户旧会话全部失效）
+func (ctrl *UserController) ResetPassword(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		utils.BadRequest(c, "无效的用户 ID")
+		return
+	}
+	var req dto.ResetPasswordRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	if err := ctrl.service.ResetPassword(uint(id), req.NewPassword); err != nil {
+		utils.Error(c, 400, err.Error())
+		return
+	}
+	utils.Success(c, gin.H{"message": "password reset"})
+}
+
+// BatchImportLDAP 从 LDAP 批量导入用户(冲突策略见 services.BatchImportLDAPUsers)
+func (ctrl *UserController) BatchImportLDAP(c *gin.Context) {
+	var req dto.LdapImportRequest
+	if !utils.BindAndValidate(c, &req) {
+		return
+	}
+	users := make([]services.LDAPImportUser, 0, len(req.Users))
+	for _, u := range req.Users {
+		users = append(users, services.LDAPImportUser{DN: u.DN, Username: u.Username, Nickname: u.Nickname, Email: u.Email})
+	}
+	result := services.BatchImportLDAPUsers(users)
+	utils.Success(c, result)
+}
diff --git a/backend/dto/deployment.go b/backend/dto/deployment.go
index 6c1c695..f6dff96 100644
--- a/backend/dto/deployment.go
+++ b/backend/dto/deployment.go
@@ -16,4 +16,6 @@ type CreateDeploymentRequest struct {
 	ResourcesCPU    string `json:"resourcesCPU"`
 	ResourcesMem    string `json:"resourcesMem"`
 	StorageSize     string `json:"storageSize"`
+	GrafanaEnabled  bool   `json:"grafanaEnabled"`
+	GrafanaVersion  string `json:"grafanaVersion"`
 }
diff --git a/backend/dto/ldap.go b/backend/dto/ldap.go
new file mode 100644
index 0000000..ec5848b
--- /dev/null
+++ b/backend/dto/ldap.go
@@ -0,0 +1,34 @@
+package dto
+
+// LDAP 域
+type LdapConfigRequest struct {
+	Enabled        bool   `json:"enabled"`
+	Host           string `json:"host"`
+	Port           int    `json:"port"`
+	UseSSL         bool   `json:"useSSL"`
+	BindDN         string `json:"bindDN"`
+	BindPassword   string `json:"bindPassword"`
+	BaseDN         string `json:"baseDN"`
+	UserFilter     string `json:"userFilter"`
+	UsernameAttr   string `json:"usernameAttr"`
+	NameAttr       string `json:"nameAttr"`
+	EmailAttr      string `json:"emailAttr"`
+	TestUsername   string `json:"testUsername"`
+	TestPassword   string `json:"testPassword"`
+}
+
+type LdapUsersRequest struct {
+	OUDN         string `json:"ouDN"`
+	BindPassword string `json:"bindPassword"`
+}
+
+type LdapImportRequest struct {
+	Users []LdapImportUser `json:"users" binding:"required,min=1"`
+}
+
+type LdapImportUser struct {
+	DN       string `json:"dn"`
+	Username string `json:"username" binding:"required"`
+	Nickname string `json:"nickname"`
+	Email    string `json:"email"`
+}
diff --git a/backend/dto/logs.go b/backend/dto/logs.go
new file mode 100644
index 0000000..99bd3f0
--- /dev/null
+++ b/backend/dto/logs.go
@@ -0,0 +1,39 @@
+package dto
+
+import "opsxloki/models"
+
+// 日志查询域
+type LogSourceRequest struct {
+	ID            uint                     `json:"id"`
+	Name          string                   `json:"name"`
+	TargetType    string                   `json:"targetType" binding:"omitempty,oneof=cluster-svc url"`
+	ClusterID     uint                     `json:"clusterID"`
+	Namespace     string                   `json:"namespace"`
+	Service       string                   `json:"service"`
+	Port          int                      `json:"port"`
+	URL           string                   `json:"url"`
+	AuthType      string                   `json:"authType"`
+	BasicUser     string                   `json:"basicUser"`
+	BasicPass     string                   `json:"basicPass"`
+	BearerToken   string                   `json:"bearerToken"`
+	Headers       map[string]string        `json:"headers"`
+	SkipTLSVerify bool                     `json:"skipTLSVerify"`
+	IsDefault     bool                     `json:"isDefault"`
+	Access        []models.LogSourceAccess `json:"access"`
+}
+
+type LogQueryRequest struct {
+	SourceID  uint   `json:"sourceId" binding:"required"`
+	Query     string `json:"query" binding:"required"`
+	Start     int64  `json:"start"` // epoch 纳秒
+	End       int64  `json:"end"`
+	Limit     int    `json:"limit"`
+	Direction string `json:"direction"`
+	Cursor    string `json:"cursor"`
+}
+
+type LogContextRequest struct {
+	SourceID    uint              `json:"sourceId" binding:"required"`
+	TimestampNs string            `json:"timestampNs" binding:"required"`
+	Labels      map[string]string `json:"labels" binding:"required"`
+}
diff --git a/backend/dto/storage.go b/backend/dto/storage.go
index 52de35d..4411082 100644
--- a/backend/dto/storage.go
+++ b/backend/dto/storage.go
@@ -13,3 +13,15 @@ type CreateStorageRequest struct {
 	Insecure    bool   `json:"insecure"`
 	IsDefault   bool   `json:"isDefault"`
 }
+
+// StorageTestRequest 测试连接(不落库;createIfMissing 时桶不存在则自动创建)
+type StorageTestRequest struct {
+	StorageType     string `json:"storageType" binding:"required,oneof=s3 oss minio rustfs"`
+	Endpoint        string `json:"endpoint" binding:"required"`
+	Bucket          string `json:"bucket" binding:"required"`
+	Region          string `json:"region"`
+	AccessKey       string `json:"accessKey" binding:"required"`
+	SecretKey       string `json:"secretKey" binding:"required"`
+	Insecure        bool   `json:"insecure"`
+	CreateIfMissing bool   `json:"createIfMissing"`
+}
diff --git a/backend/dto/user.go b/backend/dto/user.go
new file mode 100644
index 0000000..c8bfee7
--- /dev/null
+++ b/backend/dto/user.go
@@ -0,0 +1,13 @@
+package dto
+
+// 用户管理域（admin 专用）
+type UserCreateRequest struct {
+	Username string `json:"username" binding:"required,min=2,max=32"`
+	Password string `json:"password" binding:"required,min=6"`
+	Nickname string `json:"nickname"`
+	Role     string `json:"role" binding:"omitempty,oneof=admin user"`
+}
+
+type ResetPasswordRequest struct {
+	NewPassword string `json:"newPassword" binding:"required,min=6"`
+}
diff --git a/backend/go.mod b/backend/go.mod
index a820ac2..c0e4843 100644
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -1,4 +1,4 @@
-module lokideploy
+module opsxloki
 
 go 1.24.0
 
@@ -7,12 +7,14 @@ toolchain go1.24.3
 require (
 	github.com/gin-contrib/cors v1.7.3
 	github.com/gin-gonic/gin v1.10.0
+	github.com/go-ldap/ldap/v3 v3.4.12
 	github.com/golang-jwt/jwt/v5 v5.2.1
 	github.com/google/uuid v1.6.0
 	golang.org/x/crypto v0.47.0
 )
 
 require (
+	github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358 // indirect
 	github.com/bytedance/sonic v1.12.6 // indirect
 	github.com/bytedance/sonic/loader v0.2.1 // indirect
 	github.com/cloudwego/base64x v0.1.4 // indirect
@@ -20,6 +22,7 @@ require (
 	github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc // indirect
 	github.com/gabriel-vasile/mimetype v1.4.7 // indirect
 	github.com/gin-contrib/sse v0.1.0 // indirect
+	github.com/go-asn1-ber/asn1-ber v1.5.8-0.20250403174932-29230038a667 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/go-playground/validator/v10 v10.23.0 // indirect
diff --git a/backend/go.sum b/backend/go.sum
index 69cc5f0..aebc5e7 100644
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -1,3 +1,7 @@
+github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358 h1:mFRzDkZVAjdal+s7s0MwaRv9igoPqLRdzOLzw/8Xvq8=
+github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358/go.mod h1:chxPXzSsl7ZWRAuOIE23GDNzjWuZquvFlgA8xmpunjU=
+github.com/alexbrainman/sspi v0.0.0-20250919150558-7d374ff0d59e h1:4dAU9FXIyQktpoUAgOJK3OTFc/xug0PCXYCqU0FgDKI=
+github.com/alexbrainman/sspi v0.0.0-20250919150558-7d374ff0d59e/go.mod h1:cEWa1LVoE5KvSD9ONXsZrj0z6KqySlCCNKHlLzbqAt4=
 github.com/bytedance/sonic v1.12.6 h1:/isNmCUF2x3Sh8RAp/4mh4ZGkcFAX/hLrzrK3AvpRzk=
 github.com/bytedance/sonic v1.12.6/go.mod h1:B8Gt/XvtZ3Fqj+iSKMypzymZxw/FVwgIGKzMzT9r/rk=
 github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
@@ -20,6 +24,10 @@ github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE
 github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
 github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
 github.com/gin-gonic/gin v1.10.0/go.mod h1:4PMNQiOhvDRa013RKVbsiNwoyezlm2rm0uX/T7kzp5Y=
+github.com/go-asn1-ber/asn1-ber v1.5.8-0.20250403174932-29230038a667 h1:BP4M0CvQ4S3TGls2FvczZtj5Re/2ZzkV9VwqPHH/3Bo=
+github.com/go-asn1-ber/asn1-ber v1.5.8-0.20250403174932-29230038a667/go.mod h1:hEBeB/ic+5LoWskz+yKT7vGhhPYkProFKoKdwZRWMe0=
+github.com/go-ldap/ldap/v3 v3.4.12 h1:1b81mv7MagXZ7+1r7cLTWmyuTqVqdwbtJSjC0DAp9s4=
+github.com/go-ldap/ldap/v3 v3.4.12/go.mod h1:+SPAGcTtOfmGsCb3h1RFiq4xpp4N636G75OEace8lNo=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
 github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
 github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
@@ -37,6 +45,20 @@ github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/hashicorp/go-uuid v1.0.3 h1:2gKiV6YVmrJ1i2CKKa9obLvRieoRGviZFL26PcT/Co8=
+github.com/hashicorp/go-uuid v1.0.3/go.mod h1:6SBZvOh/SIDV7/2o3Jml5SYk/TvGqwFJ/bN7x4byOro=
+github.com/jcmturner/aescts/v2 v2.0.0 h1:9YKLH6ey7H4eDBXW8khjYslgyqG2xZikXP0EQFKrle8=
+github.com/jcmturner/aescts/v2 v2.0.0/go.mod h1:AiaICIRyfYg35RUkr8yESTqvSy7csK90qZ5xfvvsoNs=
+github.com/jcmturner/dnsutils/v2 v2.0.0 h1:lltnkeZGL0wILNvrNiVCR6Ro5PGU/SeBvVO/8c/iPbo=
+github.com/jcmturner/dnsutils/v2 v2.0.0/go.mod h1:b0TnjGOvI/n42bZa+hmXL+kFJZsFT7G4t3HTlQ184QM=
+github.com/jcmturner/gofork v1.7.6 h1:QH0l3hzAU1tfT3rZCnW5zXl+orbkNMMRGJfdJjHVETg=
+github.com/jcmturner/gofork v1.7.6/go.mod h1:1622LH6i/EZqLloHfE7IeZ0uEJwMSUyQ/nDd82IeqRo=
+github.com/jcmturner/goidentity/v6 v6.0.1 h1:VKnZd2oEIMorCTsFBnJWbExfNN7yZr3EhJAxwOkZg6o=
+github.com/jcmturner/goidentity/v6 v6.0.1/go.mod h1:X1YW3bgtvwAXju7V3LCIMpY0Gbxyjn/mY9zx4tFonSg=
+github.com/jcmturner/gokrb5/v8 v8.4.4 h1:x1Sv4HaTpepFkXbt2IkL29DXRf8sOfZXo8eRKh687T8=
+github.com/jcmturner/gokrb5/v8 v8.4.4/go.mod h1:1btQEpgT6k+unzCwX1KdWMEwPPkkgBtP+F6aCACiMrs=
+github.com/jcmturner/rpc/v2 v2.0.3 h1:7FXXj8Ti1IaVFpSAziCZWNzbNuZmnvw/i6CqLNdWfZY=
+github.com/jcmturner/rpc/v2 v2.0.3/go.mod h1:VUJYCIDm3PVOEHw8sgt091/20OJjskO/YJki3ELg/Hc=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
diff --git a/backend/main.go b/backend/main.go
index 5edd4a6..3c98e82 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -9,10 +9,10 @@ import (
 	"syscall"
 	"time"
 
-	"lokideploy/config"
-	"lokideploy/repository"
-	"lokideploy/routers"
-	"lokideploy/seed"
+	"opsxloki/config"
+	"opsxloki/repository"
+	"opsxloki/routers"
+	"opsxloki/seed"
 )
 
 func main() {
@@ -26,6 +26,10 @@ func main() {
 	log.Println("Seeding default data...")
 	seed.Seed()
 
+	// 孤儿部署状态恢复:进程重启会杀掉进行中的部署 goroutine,
+	// 残留的 "deploying" 状态将永远卡住(UI 无停止入口),启动时统一标记为失败。
+	repository.GetDB().RecoverOrphanDeployments()
+
 	r := routers.SetupRouter()
 	srv := &http.Server{
 		Addr:         ":" + cfg.ServerPort,
@@ -41,7 +45,7 @@ func main() {
 	defer stop()
 
 	go func() {
-		log.Printf("LokiDeploy starting on port %s", cfg.ServerPort)
+		log.Printf("opsx-loki starting on port %s", cfg.ServerPort)
 		log.Printf("API: http://localhost:%s/api/v1", cfg.ServerPort)
 		log.Printf("Default login: admin / admin123")
 		if err := srv.ListenAndServe(); err != nil && !errors.Is(err, http.ErrServerClosed) {
diff --git a/backend/middleware/jwt.go b/backend/middleware/jwt.go
index d489402..961fa48 100644
--- a/backend/middleware/jwt.go
+++ b/backend/middleware/jwt.go
@@ -3,8 +3,10 @@ package middleware
 import (
 	"strings"
 
-	"lokideploy/pkg/jwt"
-	"lokideploy/utils"
+	"opsxloki/models"
+	"opsxloki/pkg/jwt"
+	"opsxloki/repository"
+	"opsxloki/utils"
 
 	"github.com/gin-gonic/gin"
 )
@@ -39,10 +41,34 @@ func JWTAuth() gin.HandlerFunc {
 			return
 		}
 
+		// 会话版本校验：改密/重置密码后 TokenVersion 递增，旧 token 立即失效；
+		// 同时以数据库中的最新 role 为准（角色变更即时生效，不依赖旧 claims）。
+		db := repository.GetDB()
+		db.RLock()
+		var current *models.User
+		for i := range db.Users {
+			if db.Users[i].ID == claims.UserID {
+				u := db.Users[i]
+				current = &u
+				break
+			}
+		}
+		db.RUnlock()
+		if current == nil {
+			utils.Unauthorized(c, "user no longer exists")
+			c.Abort()
+			return
+		}
+		if claims.TokenVersion != current.TokenVersion {
+			utils.Unauthorized(c, "session revoked, please login again")
+			c.Abort()
+			return
+		}
+
 		c.Set("user", claims)
-		c.Set("userId", claims.UserID)
-		c.Set("username", claims.Username)
-		c.Set("role", claims.Role)
+		c.Set("userId", current.ID)
+		c.Set("username", current.Username)
+		c.Set("role", current.Role)
 		c.Next()
 	}
 }
diff --git a/backend/middleware/ratelimit.go b/backend/middleware/ratelimit.go
new file mode 100644
index 0000000..23d652c
--- /dev/null
+++ b/backend/middleware/ratelimit.go
@@ -0,0 +1,84 @@
+package middleware
+
+import (
+	"net/http"
+	"sync"
+	"time"
+
+	"opsxloki/utils"
+
+	"github.com/gin-gonic/gin"
+)
+
+// ipLimiter 内存滑动窗口 IP 限流（借鉴 opsx-web-lite rate_limit.go 的简化版）。
+// 用于登录防爆破：超限返回 429。单实例部署下内存实现即可，无需外部存储。
+type ipLimiter struct {
+	mu      sync.Mutex
+	window  time.Duration
+	max     int
+	hits    map[string][]time.Time
+	lastSweep time.Time
+}
+
+func newIPLimiter(max int, window time.Duration) *ipLimiter {
+	return &ipLimiter{
+		window:  window,
+		max:     max,
+		hits:    make(map[string][]time.Time),
+	}
+}
+
+// Allow 记录一次命中并判断是否放行
+func (l *ipLimiter) Allow(ip string) bool {
+	l.mu.Lock()
+	defer l.mu.Unlock()
+
+	now := time.Now()
+	// 惰性清理过期记录，防止 map 无限增长
+	if now.Sub(l.lastSweep) > time.Minute {
+		for k, v := range l.hits {
+			kept := v[:0]
+			for _, t := range v {
+				if now.Sub(t) < l.window {
+					kept = append(kept, t)
+				}
+			}
+			if len(kept) == 0 {
+				delete(l.hits, k)
+			} else {
+				l.hits[k] = kept
+			}
+		}
+		l.lastSweep = now
+	}
+
+	history := l.hits[ip]
+	kept := history[:0]
+	for _, t := range history {
+		if now.Sub(t) < l.window {
+			kept = append(kept, t)
+		}
+	}
+	if len(kept) >= l.max {
+		l.hits[ip] = kept
+		return false
+	}
+	l.hits[ip] = append(kept, now)
+	return true
+}
+
+// LoginRateLimit 登录接口 IP 限流：max 次 / window 时长
+func LoginRateLimit(max int, window time.Duration) gin.HandlerFunc {
+	limiter := newIPLimiter(max, window)
+	return func(c *gin.Context) {
+		if !limiter.Allow(c.ClientIP()) {
+			c.JSON(http.StatusTooManyRequests, utils.Response{
+				Code:    http.StatusTooManyRequests,
+				Message: "登录尝试过于频繁，请稍后再试",
+			})
+			c.Abort()
+			return
+		}
+		c.Next()
+	}
+}
diff --git a/backend/models/cluster.go b/backend/models/cluster.go
index 6d2694a..537eafc 100644
--- a/backend/models/cluster.go
+++ b/backend/models/cluster.go
@@ -3,7 +3,7 @@ package models
 import (
 	"time"
 
-	"lokideploy/pkg/crypto"
+	"opsxloki/pkg/crypto"
 )
 
 type Cluster struct {
diff --git a/backend/models/deployment.go b/backend/models/deployment.go
index d54c007..bf57c6a 100644
--- a/backend/models/deployment.go
+++ b/backend/models/deployment.go
@@ -26,6 +26,10 @@ type LokiDeployment struct {
 	ResourcesCPU    string         `json:"resourcesCPU"`
 	ResourcesMem    string         `json:"resourcesMem"`
 	StorageSize     string         `json:"storageSize"`
+	GrafanaEnabled  bool           `json:"grafanaEnabled"`
+	GrafanaVersion  string         `json:"grafanaVersion"`
+	GrafanaPort     int            `json:"grafanaPort"`
+	GrafanaEndpoint string         `json:"grafanaEndpoint"`
 	Status          string         `json:"status"`
 	StatusMessage   string         `json:"statusMessage"`
 	HelmValues      string         `json:"helmValues"`
@@ -62,6 +66,10 @@ func (d *LokiDeployment) Sanitized() map[string]interface{} {
 		"resourcesCPU":    d.ResourcesCPU,
 		"resourcesMem":    d.ResourcesMem,
 		"storageSize":     d.StorageSize,
+		"grafanaEnabled":  d.GrafanaEnabled,
+		"grafanaVersion":  d.GrafanaVersion,
+		"grafanaPort":     d.GrafanaPort,
+		"grafanaEndpoint": d.GrafanaEndpoint,
 		"status":          d.Status,
 		"statusMessage":   d.StatusMessage,
 		"helmValues":      d.HelmValues,
diff --git a/backend/models/host.go b/backend/models/host.go
index bee615b..d365e26 100644
--- a/backend/models/host.go
+++ b/backend/models/host.go
@@ -3,7 +3,7 @@ package models
 import (
 	"time"
 
-	"lokideploy/pkg/crypto"
+	"opsxloki/pkg/crypto"
 )
 
 // SSHAuthConfig SSH认证配置（定义在models包避免循环导入）
@@ -19,37 +19,39 @@ type SSHAuthConfig struct {
 // Host 主机模型，敏感字段（Password/PrivateKey/KeyPhrase）加密存储
 // 加密格式: ENC:<base64(AES-GCM(ciphertext))>
 type Host struct {
-	ID         uint      `json:"id"`
-	Name       string    `json:"name"`
-	HostIP     string    `json:"hostIP"`
-	Port       int       `json:"port"`
-	User       string    `json:"user"`
-	AuthType   string    `json:"authType"`
-	Password   string    `json:"password"`   // 加密存储（ENC:前缀）
-	PrivateKey string    `json:"privateKey"` // 加密存储（ENC:前缀）
-	KeyPhrase  string    `json:"keyPhrase"`  // 加密存储（ENC:前缀）
-	OS         string    `json:"os"`
-	Arch       string    `json:"arch"`
-	Status     string    `json:"status"`
-	Labels     string    `json:"labels"`
-	CreatedAt  time.Time `json:"createdAt"`
-	UpdatedAt  time.Time `json:"updatedAt"`
+	ID            uint      `json:"id"`
+	Name          string    `json:"name"`
+	HostIP        string    `json:"hostIP"`
+	Port          int       `json:"port"`
+	User          string    `json:"user"`
+	AuthType      string    `json:"authType"`
+	Password      string    `json:"password"`   // 加密存储（ENC:前缀）
+	PrivateKey    string    `json:"privateKey"` // 加密存储（ENC:前缀）
+	KeyPhrase     string    `json:"keyPhrase"`  // 加密存储（ENC:前缀）
+	OS            string    `json:"os"`
+	Arch          string    `json:"arch"`
+	Status        string    `json:"status"`
+	StatusMessage string    `json:"statusMessage,omitempty"`
+	Labels        string    `json:"labels"`
+	CreatedAt     time.Time `json:"createdAt"`
+	UpdatedAt     time.Time `json:"updatedAt"`
 }
 
 func (h *Host) Sanitized() map[string]interface{} {
 	return map[string]interface{}{
-		"id":        h.ID,
-		"name":      h.Name,
-		"hostIP":    h.HostIP,
-		"port":      h.Port,
-		"user":      h.User,
-		"authType":  h.AuthType,
-		"os":        h.OS,
-		"arch":      h.Arch,
-		"status":    h.Status,
-		"labels":    h.Labels,
-		"createdAt": h.CreatedAt,
-		"updatedAt": h.UpdatedAt,
+		"id":            h.ID,
+		"name":          h.Name,
+		"hostIP":        h.HostIP,
+		"port":          h.Port,
+		"user":          h.User,
+		"authType":      h.AuthType,
+		"os":            h.OS,
+		"arch":          h.Arch,
+		"status":        h.Status,
+		"statusMessage": h.StatusMessage,
+		"labels":        h.Labels,
+		"createdAt":     h.CreatedAt,
+		"updatedAt":     h.UpdatedAt,
 	}
 }
 
diff --git a/backend/models/log_policy.go b/backend/models/log_policy.go
new file mode 100644
index 0000000..d741fde
--- /dev/null
+++ b/backend/models/log_policy.go
@@ -0,0 +1,22 @@
+package models
+
+import "time"
+
+// LogPolicyGroup grants one exact stream-label scope on one source to multiple users.
+type LogPolicyGroup struct {
+	ID        uint              `json:"id"`
+	Name      string            `json:"name"`
+	SourceID  uint              `json:"sourceId"`
+	Labels    map[string]string `json:"labels"`
+	UserIDs   []uint            `json:"userIds"`
+	CreatedAt time.Time         `json:"createdAt"`
+	UpdatedAt time.Time         `json:"updatedAt"`
+}
+
+func (g *LogPolicyGroup) Sanitized() map[string]interface{} {
+	return map[string]interface{}{
+		"id": g.ID, "name": g.Name, "sourceId": g.SourceID,
+		"labels": g.Labels, "userIds": g.UserIDs,
+		"createdAt": g.CreatedAt, "updatedAt": g.UpdatedAt,
+	}
+}
diff --git a/backend/models/log_source.go b/backend/models/log_source.go
new file mode 100644
index 0000000..76e835b
--- /dev/null
+++ b/backend/models/log_source.go
@@ -0,0 +1,56 @@
+package models
+
+import "time"
+
+// LogSource 日志查询数据源。
+// cluster-svc: 经目标集群 kube-apiserver 的 service proxy 访问(无需直通 ClusterIP/DNS),
+//
+//	覆盖「本平台部署的 Loki」与「接入集群中已有的外部 Loki」两类场景;
+//
+// url: 直连地址(host-binary 部署或网络可达的 Loki)。
+type LogSource struct {
+	ID            uint              `json:"id"`
+	Name          string            `json:"name"`
+	TargetType    string            `json:"targetType"` // cluster-svc | url
+	ClusterID     *uint             `json:"clusterID,omitempty"`
+	Namespace     string            `json:"namespace"`
+	Service       string            `json:"service"`
+	Port          int               `json:"port"`
+	URL           string            `json:"url"`
+	AuthType      string            `json:"authType"` // none | basic | bearer
+	BasicUser     string            `json:"basicUser"`
+	BasicPass     string            `json:"basicPass"` // ENC: 加密存储,不外发
+	BearerToken   string            `json:"bearerToken"`
+	Headers       map[string]string `json:"headers,omitempty"`
+	SkipTLSVerify bool              `json:"skipTLSVerify"`
+	IsDefault     bool              `json:"isDefault"`
+	Access        []LogSourceAccess `json:"access,omitempty"`
+	CreatedAt     time.Time         `json:"createdAt"`
+	UpdatedAt     time.Time         `json:"updatedAt"`
+}
+
+func (s *LogSource) Sanitized() map[string]interface{} {
+	return map[string]interface{}{
+		"id": s.ID, "name": s.Name, "targetType": s.TargetType,
+		"clusterID": s.ClusterID, "namespace": s.Namespace, "service": s.Service, "port": s.Port,
+		"url": s.URL, "authType": s.AuthType, "basicUser": s.BasicUser,
+		"hasBasicPass": s.BasicPass != "", "isDefault": s.IsDefault,
+		"hasBearerToken": s.BearerToken != "", "headerNames": headerNames(s.Headers), "skipTLSVerify": s.SkipTLSVerify,
+		"access":    s.Access,
+		"createdAt": s.CreatedAt, "updatedAt": s.UpdatedAt,
+	}
+}
+
+func headerNames(headers map[string]string) []string {
+	names := make([]string, 0, len(headers))
+	for name := range headers {
+		names = append(names, name)
+	}
+	return names
+}
+
+// LogSourceAccess grants one user access to a source, optionally restricted to exact stream labels.
+type LogSourceAccess struct {
+	UserID uint              `json:"userId"`
+	Labels map[string]string `json:"labels,omitempty"`
+}
diff --git a/backend/models/sanitizer.go b/backend/models/sanitizer.go
index 5152a4b..8d67200 100644
--- a/backend/models/sanitizer.go
+++ b/backend/models/sanitizer.go
@@ -80,6 +80,12 @@ func SanitizedJSON(v any) any {
 			result[i] = item.Sanitized()
 		}
 		return result
+	case []LogPolicyGroup:
+		result := make([]map[string]interface{}, len(val))
+		for i := range val {
+			result[i] = val[i].Sanitized()
+		}
+		return result
 	case []Sanitizer:
 		result := make([]map[string]interface{}, len(val))
 		for i, item := range val {
diff --git a/backend/models/user.go b/backend/models/user.go
index ee193b2..04ed929 100644
--- a/backend/models/user.go
+++ b/backend/models/user.go
@@ -2,14 +2,18 @@ package models
 
 import "time"
 
+// User TokenVersion 用于服务端会话吊销：改密/管理员重置密码时递增，
+// 旧 token（access 与 refresh）随版本不匹配立即失效（借鉴 opsx-web-lite）。
 type User struct {
-	ID        uint      `json:"id"`
-	Username  string    `json:"username"`
-	Password  string    `json:"password"`
-	Nickname  string    `json:"nickname"`
-	Role      string    `json:"role"`
-	CreatedAt time.Time `json:"createdAt"`
-	UpdatedAt time.Time `json:"updatedAt"`
+	ID           uint      `json:"id"`
+	Username     string    `json:"username"`
+	Password     string    `json:"password"`
+	Nickname     string    `json:"nickname"`
+	Role         string    `json:"role"`
+	AuthSource   string    `json:"authSource"` // local | ldap
+	TokenVersion int       `json:"tokenVersion"`
+	CreatedAt    time.Time `json:"createdAt"`
+	UpdatedAt    time.Time `json:"updatedAt"`
 }
 
 func (u *User) Sanitized() map[string]interface{} {
@@ -18,6 +22,7 @@ func (u *User) Sanitized() map[string]interface{} {
 		"username":  u.Username,
 		"nickname":  u.Nickname,
 		"role":      u.Role,
+		"authSource": u.AuthSource,
 		"createdAt": u.CreatedAt,
 		"updatedAt": u.UpdatedAt,
 	}
diff --git a/backend/pkg/crypto/crypto.go b/backend/pkg/crypto/crypto.go
index b9b81d3..d272af7 100644
--- a/backend/pkg/crypto/crypto.go
+++ b/backend/pkg/crypto/crypto.go
@@ -14,7 +14,7 @@ import (
 	"io"
 	"strings"
 
-	"lokideploy/config"
+	"opsxloki/config"
 
 	"golang.org/x/crypto/argon2"
 	"golang.org/x/crypto/hkdf"
diff --git a/backend/pkg/crypto/main_test.go b/backend/pkg/crypto/main_test.go
index a9b556c..563c77b 100644
--- a/backend/pkg/crypto/main_test.go
+++ b/backend/pkg/crypto/main_test.go
@@ -10,6 +10,6 @@ import (
 func TestMain(m *testing.M) {
 	os.Setenv("JWT_SECRET", "crypto-pkg-test-secret-32chars!!")
 	os.Setenv("ENCRYPTION_KEY", "crypto-pkg-test-encryption-32ch!!")
-	os.Setenv("DATA_DIR", os.TempDir()+"/lokideploy-crypto-pkg-test")
+	os.Setenv("DATA_DIR", os.TempDir()+"/opsxloki-crypto-pkg-test")
 	os.Exit(m.Run())
 }
diff --git a/backend/pkg/jwt/jwt.go b/backend/pkg/jwt/jwt.go
index 5552ccb..43cf5ec 100644
--- a/backend/pkg/jwt/jwt.go
+++ b/backend/pkg/jwt/jwt.go
@@ -8,7 +8,7 @@ import (
 	"strconv"
 	"time"
 
-	"lokideploy/config"
+	"opsxloki/config"
 
 	"github.com/gin-gonic/gin"
 	jwtv5 "github.com/golang-jwt/jwt/v5"
@@ -26,6 +26,8 @@ type Claims struct {
 	Username  string `json:"username"`
 	Role      string `json:"role"`
 	TokenType string `json:"tokenType"` // access | refresh
+	// TokenVersion 签发时的用户会话版本；改密/重置密码后递增，旧 token 立即失效
+	TokenVersion int `json:"ver,omitempty"`
 	jwtv5.RegisteredClaims
 }
 
@@ -36,16 +38,17 @@ type TokenPair struct {
 	ExpiresAt    time.Time `json:"expiresAt"`
 }
 
-func GenerateTokenPair(userID uint, username, role string) (*TokenPair, error) {
+func GenerateTokenPair(userID uint, username, role string, tokenVersion int) (*TokenPair, error) {
 	cfg := config.GetConfig()
 	now := time.Now()
 
 	// Access Token
 	accessClaims := Claims{
-		UserID:    userID,
-		Username:  username,
-		Role:      role,
-		TokenType: "access",
+		UserID:       userID,
+		Username:     username,
+		Role:         role,
+		TokenType:    "access",
+		TokenVersion: tokenVersion,
 		RegisteredClaims: jwtv5.RegisteredClaims{
 			ExpiresAt: jwtv5.NewNumericDate(now.Add(accessTokenExpiry)),
 			IssuedAt:  jwtv5.NewNumericDate(now),
@@ -61,10 +64,11 @@ func GenerateTokenPair(userID uint, username, role string) (*TokenPair, error) {
 
 	// Refresh Token
 	refreshClaims := Claims{
-		UserID:    userID,
-		Username:  username,
-		Role:      role,
-		TokenType: "refresh",
+		UserID:       userID,
+		Username:     username,
+		Role:         role,
+		TokenType:    "refresh",
+		TokenVersion: tokenVersion,
 		RegisteredClaims: jwtv5.RegisteredClaims{
 			ExpiresAt: jwtv5.NewNumericDate(now.Add(refreshTokenExpiry)),
 			IssuedAt:  jwtv5.NewNumericDate(now),
@@ -85,19 +89,18 @@ func GenerateTokenPair(userID uint, username, role string) (*TokenPair, error) {
 	}, nil
 }
 
-// RefreshAccessToken 使用refresh token换取新的access token
-func RefreshAccessToken(refreshTokenString string) (*TokenPair, error) {
+// ParseRefreshToken 解析并校验 refresh token，返回 claims。
+// 用户存在性与 TokenVersion 校验由调用方（controller）对照数据库完成，
+// 通过后用用户当前 role/版本调 GenerateTokenPair 签发新 token 对。
+func ParseRefreshToken(refreshTokenString string) (*Claims, error) {
 	claims, err := ParseToken(refreshTokenString)
 	if err != nil {
 		return nil, err
 	}
-
-	// 验证token类型必须是refresh
 	if claims.TokenType != "refresh" {
 		return nil, errors.New("invalid token type")
 	}
-
-	return GenerateTokenPair(claims.UserID, claims.Username, claims.Role)
+	return claims, nil
 }
 
 func ParseToken(tokenString string) (*Claims, error) {
diff --git a/backend/pkg/jwt/jwt_test.go b/backend/pkg/jwt/jwt_test.go
index 1324cf5..3ccb81c 100644
--- a/backend/pkg/jwt/jwt_test.go
+++ b/backend/pkg/jwt/jwt_test.go
@@ -8,7 +8,7 @@ import (
 
 // TestTokenPairRoundTrip 覆盖签发 + 解析，并校验 access token 类型。
 func TestTokenPairRoundTrip(t *testing.T) {
-	pair, err := GenerateTokenPair(42, "alice", "admin")
+	pair, err := GenerateTokenPair(42, "alice", "admin", 3)
 	if err != nil {
 		t.Fatalf("GenerateTokenPair: %v", err)
 	}
@@ -25,22 +25,25 @@ func TestTokenPairRoundTrip(t *testing.T) {
 	if claims.TokenType != "access" {
 		t.Fatalf("access token should have tokenType=access, got %q", claims.TokenType)
 	}
+	if claims.TokenVersion != 3 {
+		t.Fatalf("access token should carry tokenVersion=3, got %d", claims.TokenVersion)
+	}
 }
 
 // TestRefreshRequiresRefreshToken 覆盖 token 类型强制：
-// 用 access token 刷新必须被拒；用 refresh token 刷新应成功。
+// 用 access token 刷新必须被拒；refresh token 应解析成功并携带版本。
 func TestRefreshRequiresRefreshToken(t *testing.T) {
-	pair, _ := GenerateTokenPair(1, "bob", "user")
+	pair, _ := GenerateTokenPair(1, "bob", "user", 0)
 
-	if _, err := RefreshAccessToken(pair.AccessToken); err == nil {
-		t.Fatal("RefreshAccessToken must reject access tokens")
+	if _, err := ParseRefreshToken(pair.AccessToken); err == nil {
+		t.Fatal("ParseRefreshToken must reject access tokens")
 	}
-	newPair, err := RefreshAccessToken(pair.RefreshToken)
+	claims, err := ParseRefreshToken(pair.RefreshToken)
 	if err != nil {
-		t.Fatalf("RefreshAccessToken(refresh): %v", err)
+		t.Fatalf("ParseRefreshToken(refresh): %v", err)
 	}
-	if newPair.AccessToken == "" {
-		t.Fatal("new access token must not be empty")
+	if claims.UserID != 1 || claims.TokenType != "refresh" {
+		t.Fatalf("unexpected refresh claims: %+v", claims)
 	}
 }
 
diff --git a/backend/repository/db.go b/backend/repository/db.go
index adfdd4d..41b6eb7 100644
--- a/backend/repository/db.go
+++ b/backend/repository/db.go
@@ -8,8 +8,8 @@ import (
 	"sync"
 	"time"
 
-	"lokideploy/config"
-	"lokideploy/models"
+	"opsxloki/config"
+	"opsxloki/models"
 )
 
 // saveRequest 表示一个保存请求，通过channel序列化
@@ -20,17 +20,19 @@ type saveRequest struct {
 // JsonDB 使用基于channel的序列化保存机制，防止并发数据丢失。
 // 该包只负责持久化（落盘 + 并发安全），领域实体定义在 models 包。
 type JsonDB struct {
-	mu          sync.RWMutex
-	dataFile    string
-	Users       []models.User           `json:"users"`
-	Clusters    []models.Cluster        `json:"clusters"`
-	Hosts       []models.Host           `json:"hosts"`
-	Storages    []models.StorageConfig  `json:"storages"`
-	Deployments []models.LokiDeployment `json:"deployments"`
-	Collectors  []models.Collector      `json:"collectors"`
-	Logs        []models.DeploymentLog  `json:"logs"`
-	Settings    []models.SystemSetting  `json:"settings"`
-	sequences   map[string]uint
+	mu              sync.RWMutex
+	dataFile        string
+	Users           []models.User           `json:"users"`
+	Clusters        []models.Cluster        `json:"clusters"`
+	Hosts           []models.Host           `json:"hosts"`
+	Storages        []models.StorageConfig  `json:"storages"`
+	Deployments     []models.LokiDeployment `json:"deployments"`
+	Collectors      []models.Collector      `json:"collectors"`
+	Logs            []models.DeploymentLog  `json:"logs"`
+	Settings        []models.SystemSetting  `json:"settings"`
+	LogSources      []models.LogSource      `json:"logSources"`
+	LogPolicyGroups []models.LogPolicyGroup `json:"logPolicyGroups"`
+	sequences       map[string]uint
 
 	// 防抖保存机制
 	saveTimer *time.Timer
@@ -51,23 +53,26 @@ func InitDB() error {
 	_ = os.MkdirAll(cfg.DataDir, 0755)
 
 	d := &JsonDB{
-		dataFile:    cfg.DatabasePath,
-		Users:       []models.User{},
-		Clusters:    []models.Cluster{},
-		Hosts:       []models.Host{},
-		Storages:    []models.StorageConfig{},
-		Deployments: []models.LokiDeployment{},
-		Collectors:  []models.Collector{},
-		Logs:        []models.DeploymentLog{},
-		Settings:    []models.SystemSetting{},
+		dataFile:        cfg.DatabasePath,
+		Users:           []models.User{},
+		Clusters:        []models.Cluster{},
+		Hosts:           []models.Host{},
+		Storages:        []models.StorageConfig{},
+		Deployments:     []models.LokiDeployment{},
+		Collectors:      []models.Collector{},
+		Logs:            []models.DeploymentLog{},
+		Settings:        []models.SystemSetting{},
+		LogSources:      []models.LogSource{},
+		LogPolicyGroups: []models.LogPolicyGroup{},
 		sequences: map[string]uint{
-			"users":       0,
-			"clusters":    0,
-			"hosts":       0,
-			"storages":    0,
-			"deployments": 0,
-			"collectors":  0,
-			"logs":        0,
+			"users":           0,
+			"clusters":        0,
+			"hosts":           0,
+			"storages":        0,
+			"deployments":     0,
+			"collectors":      0,
+			"logs":            0,
+			"logPolicyGroups": 0,
 		},
 		saveChan: make(chan saveRequest, 10),
 		stopChan: make(chan struct{}),
@@ -111,17 +116,81 @@ func InitDB() error {
 					d.sequences["logs"] = l.ID
 				}
 			}
+			for _, group := range d.LogPolicyGroups {
+				if group.ID > d.sequences["logPolicyGroups"] {
+					d.sequences["logPolicyGroups"] = group.ID
+				}
+			}
 		}
 	}
 
+	migratedLogAccess := migrateLogAccessToGroups(d)
 	// 启动序列化保存goroutine
 	d.wg.Add(1)
 	go d.saveWorker()
 
 	db = d
+	if migratedLogAccess {
+		d.RequestSave()
+	}
 	return nil
 }
 
+// Legacy per-user grants are grouped by identical source and label scope.
+func migrateLogAccessToGroups(d *JsonDB) bool {
+	changed := false
+	for i := range d.LogSources {
+		source := &d.LogSources[i]
+		if len(source.Access) == 0 {
+			continue
+		}
+		byLabels := map[string]*models.LogPolicyGroup{}
+		for _, rule := range source.Access {
+			validUser := false
+			for _, user := range d.Users {
+				if user.ID == rule.UserID && user.Role != "admin" {
+					validUser = true
+					break
+				}
+			}
+			if !validUser {
+				continue
+			}
+			alreadyGrouped := false
+			for _, group := range d.LogPolicyGroups {
+				if group.SourceID != source.ID {
+					continue
+				}
+				for _, id := range group.UserIDs {
+					if id == rule.UserID {
+						alreadyGrouped = true
+						break
+					}
+				}
+			}
+			if alreadyGrouped {
+				continue
+			}
+			keyBytes, _ := json.Marshal(rule.Labels)
+			key := string(keyBytes)
+			group := byLabels[key]
+			if group == nil {
+				d.sequences["logPolicyGroups"]++
+				id := d.sequences["logPolicyGroups"]
+				group = &models.LogPolicyGroup{ID: id, Name: fmt.Sprintf("旧授权 · %s · %d", source.Name, id), SourceID: source.ID, Labels: rule.Labels, CreatedAt: time.Now(), UpdatedAt: time.Now()}
+				byLabels[key] = group
+			}
+			group.UserIDs = append(group.UserIDs, rule.UserID)
+		}
+		for _, group := range byLabels {
+			d.LogPolicyGroups = append(d.LogPolicyGroups, *group)
+		}
+		source.Access = nil
+		changed = true
+	}
+	return changed
+}
+
 // Shutdown 优雅关闭数据库，确保所有数据已落盘。
 // 顺序很关键：先停防抖定时器（不再产生新请求）→ 关闭 worker 并等其退出
 // （worker 可能正在处理已入队的请求）→ 此时已无并发，做最后一次 doSave 把
@@ -181,7 +250,7 @@ func (d *JsonDB) doSave() error {
 
 	// 原子写入：先写入临时文件，再重命名
 	dir := filepath.Dir(d.dataFile)
-	tmpFile := filepath.Join(dir, fmt.Sprintf(".lokideploy-%d.tmp", time.Now().UnixNano()))
+	tmpFile := filepath.Join(dir, fmt.Sprintf(".opsxloki-%d.tmp", time.Now().UnixNano()))
 
 	if err := os.WriteFile(tmpFile, data, 0644); err != nil {
 		return err
@@ -275,7 +344,31 @@ func (d *JsonDB) CreateUser(user *models.User) error {
 		user.ID = d.sequences["users"] + 1
 		d.sequences["users"] = user.ID
 	}
+	if user.CreatedAt.IsZero() {
+		now := time.Now()
+		user.CreatedAt = now
+		user.UpdatedAt = now
+	}
 	d.Users = append(d.Users, *user)
 	d.RequestSave()
 	return nil
 }
+
+// RecoverOrphanDeployments 启动时把残留的 deploying 状态部署标记为失败:
+// 部署 goroutine 随进程消亡,不恢复会永久卡在「部署中」(UI 无停止入口)。
+func (d *JsonDB) RecoverOrphanDeployments() {
+	d.Lock()
+	defer d.Unlock()
+	recovered := 0
+	for i := range d.Deployments {
+		if d.Deployments[i].Status == "deploying" {
+			d.Deployments[i].Status = "failed"
+			d.Deployments[i].StatusMessage = "服务重启导致部署中断，请重新部署"
+			d.Deployments[i].UpdatedAt = time.Now()
+			recovered++
+		}
+	}
+	if recovered > 0 {
+		d.RequestSave()
+	}
+}
diff --git a/backend/repository/db_test.go b/backend/repository/db_test.go
index 28667c0..c0143f9 100644
--- a/backend/repository/db_test.go
+++ b/backend/repository/db_test.go
@@ -6,7 +6,7 @@ import (
 	"sync"
 	"testing"
 
-	"lokideploy/models"
+	"opsxloki/models"
 )
 
 // TestConcurrentSaveNoDataLoss 是并发写安全（B1/B2）的回归测试：
diff --git a/backend/repository/log_policy_test.go b/backend/repository/log_policy_test.go
new file mode 100644
index 0000000..9700f94
--- /dev/null
+++ b/backend/repository/log_policy_test.go
@@ -0,0 +1,26 @@
+package repository
+
+import (
+	"opsxloki/models"
+	"testing"
+)
+
+func TestMigrateLogAccessToGroups(t *testing.T) {
+	d := &JsonDB{
+		Users: []models.User{{ID: 1, Role: "user"}, {ID: 2, Role: "user"}},
+		LogSources: []models.LogSource{{ID: 9, Name: "loki", Access: []models.LogSourceAccess{
+			{UserID: 1, Labels: map[string]string{"namespace": "log"}},
+			{UserID: 2, Labels: map[string]string{"namespace": "log"}},
+		}}},
+		sequences: map[string]uint{"logPolicyGroups": 0},
+	}
+	if !migrateLogAccessToGroups(d) {
+		t.Fatal("expected migration")
+	}
+	if len(d.LogSources[0].Access) != 0 {
+		t.Fatal("legacy grants remain")
+	}
+	if len(d.LogPolicyGroups) != 1 || len(d.LogPolicyGroups[0].UserIDs) != 2 {
+		t.Fatalf("expected one shared group, got %#v", d.LogPolicyGroups)
+	}
+}
diff --git a/backend/repository/main_test.go b/backend/repository/main_test.go
index 509be08..72bb981 100644
--- a/backend/repository/main_test.go
+++ b/backend/repository/main_test.go
@@ -4,13 +4,13 @@ import (
 	"os"
 	"testing"
 
-	"lokideploy/config"
+	"opsxloki/config"
 )
 
 // TestMain 为 repository 包预置安全环境变量与临时 DATA_DIR，并管理 JsonDB 生命周期。
 // config.GetConfig() 在 JWT_SECRET/ENCRYPTION_KEY 缺失时会 log.Fatal，故须先设置。
 func TestMain(m *testing.M) {
-	dir, err := os.MkdirTemp("", "lokideploy-repository-test")
+	dir, err := os.MkdirTemp("", "opsxloki-repository-test")
 	if err != nil {
 		panic(err)
 	}
diff --git a/backend/routers/router.go b/backend/routers/router.go
index 4e87aef..d750da2 100644
--- a/backend/routers/router.go
+++ b/backend/routers/router.go
@@ -7,8 +7,8 @@ import (
 	"strings"
 	"time"
 
-	"lokideploy/controllers"
-	"lokideploy/middleware"
+	"opsxloki/controllers"
+	"opsxloki/middleware"
 
 	"github.com/gin-contrib/cors"
 	"github.com/gin-gonic/gin"
@@ -31,6 +31,9 @@ func SetupRouter() *gin.Engine {
 	storageCtrl := controllers.NewStorageController()
 	deploymentCtrl := controllers.NewDeploymentController()
 	collectorCtrl := controllers.NewCollectorController()
+	userCtrl := controllers.NewUserController()
+	ldapCtrl := controllers.NewLdapController()
+	logsCtrl := controllers.NewLogsController()
 
 	// API v1
 	api := r.Group("/api/v1")
@@ -51,8 +54,8 @@ func SetupRouter() *gin.Engine {
 		c.String(http.StatusOK, "# LokiDeploy Metrics\n")
 	})
 
-	// Public
-	api.POST("/auth/login", authCtrl.Login)
+	// Public（登录接口挂 IP 限流防爆破：20 次/分钟）
+	api.POST("/auth/login", middleware.LoginRateLimit(20, time.Minute), authCtrl.Login)
 	api.POST("/auth/refresh", authCtrl.RefreshToken)
 
 	// Auth required
@@ -62,7 +65,45 @@ func SetupRouter() *gin.Engine {
 	// Auth routes
 	authorized.GET("/auth/user", authCtrl.GetUser)
 	authorized.POST("/auth/password", authCtrl.ChangePassword)
-	authorized.POST("/auth/register", middleware.AdminAuth(), authCtrl.Register)
+
+	// 日志查询:数据源管理 + Loki 代理查询
+	logs := authorized.Group("/logs")
+	{
+		logs.GET("/sources", logsCtrl.ListSources)
+		logs.POST("/sources", middleware.AdminAuth(), logsCtrl.CreateSource)
+		logs.PUT("/sources/:id", middleware.AdminAuth(), logsCtrl.UpdateSource)
+		logs.DELETE("/sources/:id", middleware.AdminAuth(), logsCtrl.DeleteSource)
+		logs.POST("/sources/test", middleware.AdminAuth(), logsCtrl.TestSource)
+		logs.GET("/policy-groups", middleware.AdminAuth(), logsCtrl.ListPolicyGroups)
+		logs.POST("/policy-groups", middleware.AdminAuth(), logsCtrl.CreatePolicyGroup)
+		logs.PUT("/policy-groups/:id", middleware.AdminAuth(), logsCtrl.UpdatePolicyGroup)
+		logs.DELETE("/policy-groups/:id", middleware.AdminAuth(), logsCtrl.DeletePolicyGroup)
+		logs.POST("/query", logsCtrl.Query)
+		logs.POST("/context", logsCtrl.Context)
+		logs.GET("/labels", logsCtrl.Labels)
+		logs.GET("/label/:name/values", logsCtrl.LabelValues)
+		logs.POST("/histogram", logsCtrl.Histogram)
+		logs.GET("/health", logsCtrl.Health)
+	}
+
+	// LDAP 配置(admin 读写;查询供用户页判断导入按钮显隐,登录用户即可读)
+	authorized.GET("/settings/ldap", middleware.AdminAuth(), ldapCtrl.GetConfig)
+	authorized.PUT("/settings/ldap", middleware.AdminAuth(), ldapCtrl.UpdateConfig)
+	authorized.POST("/settings/ldap/test", middleware.AdminAuth(), ldapCtrl.TestConnection)
+	authorized.POST("/settings/ldap/users", middleware.AdminAuth(), ldapCtrl.ListUsers)
+
+	// Users（admin 专用）
+	users := authorized.Group("/users")
+	users.Use(middleware.AdminAuth())
+	{
+		users.GET("", userCtrl.List)
+		users.POST("", userCtrl.Create)
+		users.DELETE("/:id", userCtrl.Delete)
+		users.POST("/:id/reset-password", userCtrl.ResetPassword)
+		users.POST("/batch-import-ldap", userCtrl.BatchImportLDAP)
+	}
+	// 普通用户仅可访问日志查询及自己的账号接口；管理资源统一在服务端保护。
+	authorized.Use(middleware.AdminAuth())
 
 	// Clusters
 	authorized.GET("/clusters", clusterCtrl.List)
@@ -87,6 +128,7 @@ func SetupRouter() *gin.Engine {
 	authorized.GET("/storages", storageCtrl.List)
 	authorized.GET("/storages/:id", storageCtrl.Get)
 	authorized.POST("/storages", storageCtrl.Create)
+	authorized.POST("/storages/test", storageCtrl.TestConnection)
 	authorized.PUT("/storages/:id", storageCtrl.Update)
 	authorized.DELETE("/storages/:id", storageCtrl.Delete)
 	authorized.GET("/storages/default", storageCtrl.GetDefault)
@@ -102,6 +144,9 @@ func SetupRouter() *gin.Engine {
 	authorized.POST("/deployments/:id/restart", deploymentCtrl.Restart)
 	authorized.GET("/deployments/:id/logs", deploymentCtrl.GetLogs)
 	authorized.GET("/deployments/stats", deploymentCtrl.GetStats)
+	authorized.GET("/deployments/preflight", deploymentCtrl.Preflight)
+	authorized.GET("/deployments/:id/ready", deploymentCtrl.Ready)
+	authorized.GET("/deployments/versions", deploymentCtrl.GetVersions)
 
 	// Collectors
 	authorized.GET("/collectors", collectorCtrl.List)
diff --git a/backend/seed/seed.go b/backend/seed/seed.go
index c604612..920d35b 100644
--- a/backend/seed/seed.go
+++ b/backend/seed/seed.go
@@ -1,9 +1,9 @@
 package seed
 
 import (
-	"lokideploy/models"
-	"lokideploy/pkg/crypto"
-	"lokideploy/repository"
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
+	"opsxloki/repository"
 )
 
 func Seed() {
diff --git a/backend/services/auth.go b/backend/services/auth.go
index c7dbccf..70c3253 100644
--- a/backend/services/auth.go
+++ b/backend/services/auth.go
@@ -1,11 +1,12 @@
 package services
 
 import (
-	"lokideploy/models"
-	"lokideploy/pkg/crypto"
-	"lokideploy/pkg/jwt"
-	"lokideploy/repository"
-	"lokideploy/utils"
+	"fmt"
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
+	"opsxloki/pkg/jwt"
+	"opsxloki/repository"
+	"opsxloki/utils"
 )
 
 type AuthService struct{}
@@ -17,23 +18,89 @@ func NewAuthService() *AuthService {
 func (s *AuthService) Login(username, password string) (*models.User, *jwt.TokenPair, error) {
 	db := repository.GetDB()
 	db.RLock()
-	defer db.RUnlock()
+	var local *models.User
 	for i := range db.Users {
 		if db.Users[i].Username == username {
-			if !crypto.VerifyPassword(password, db.Users[i].Password) {
-				return nil, nil, utils.ErrInvalidCredentials
-			}
-			tokenPair, err := jwt.GenerateTokenPair(db.Users[i].ID, db.Users[i].Username, db.Users[i].Role)
+			u := db.Users[i]
+			local = &u
+			break
+		}
+	}
+	db.RUnlock()
+
+	// 本地用户密码校验(普通本地用户唯一路径;LDAP 用户不使用本地密码)
+	if local != nil && local.AuthSource != "ldap" {
+		if !crypto.VerifyPassword(password, local.Password) {
+			return nil, nil, utils.ErrInvalidCredentials
+		}
+		return s.issueTokenPair(local)
+	}
+
+	// LDAP 用户(本地已导入或首次登录自动创建);enabled=false 或验证失败返回统一错误
+	if ldapCfg := GetLDAPConfig(); ldapCfg.Enabled && ldapCfg.Host != "" {
+		if entry, err := verifyLDAPPassword(ldapCfg, username, password); err == nil {
+			user, err := s.syncLDAPUser(entry)
 			if err != nil {
 				return nil, nil, err
 			}
-			return &db.Users[i], tokenPair, nil
+			return s.issueTokenPair(user)
 		}
 	}
 	return nil, nil, utils.ErrInvalidCredentials
 }
 
+func (s *AuthService) issueTokenPair(u *models.User) (*models.User, *jwt.TokenPair, error) {
+	pair, err := jwt.GenerateTokenPair(u.ID, u.Username, u.Role, u.TokenVersion)
+	if err != nil {
+		return nil, nil, err
+	}
+	return u, pair, nil
+}
+
+// syncLDAPUser LDAP 验证通过后同步本地记录:不存在则创建(user 角色,密码占位不可本地登录),
+// 存在则同步昵称/邮箱
+func (s *AuthService) syncLDAPUser(entry *ldapUserEntry) (*models.User, error) {
+	db := repository.GetDB()
+	// 已存在 → 同步昵称并标记 LDAP 来源
+	db.Lock()
+	for i := range db.Users {
+		if db.Users[i].Username == entry.Username {
+			db.Users[i].Nickname = entry.DisplayName
+			db.Users[i].AuthSource = "ldap"
+			db.RequestSave()
+			u := db.Users[i]
+			db.Unlock()
+			return &u, nil
+		}
+	}
+	db.Unlock()
+
+	// 不存在 → 创建(CreateUser 自管锁与 ID 分配)
+	hash, _ := crypto.HashPassword("ldap-user-" + entry.Username + "-no-local-login")
+	user := &models.User{
+		Username:   entry.Username,
+		Password:   hash,
+		Nickname:   entry.DisplayName,
+		Role:       "user",
+		AuthSource: "ldap",
+	}
+	if err := db.CreateUser(user); err != nil {
+		return nil, err
+	}
+	return user, nil
+}
+
 func (s *AuthService) Register(username, password, nickname, role string) (*models.User, error) {
+	db := repository.GetDB()
+	db.RLock()
+	for i := range db.Users {
+		if db.Users[i].Username == username {
+			db.RUnlock()
+			return nil, utils.ErrUsernameExists
+		}
+	}
+	db.RUnlock()
+
 	hash, err := crypto.HashPassword(password)
 	if err != nil {
 		return nil, err
@@ -70,6 +137,9 @@ func (s *AuthService) ChangePassword(userID uint, oldPassword, newPassword strin
 	defer db.Unlock()
 	for i := range db.Users {
 		if db.Users[i].ID == userID {
+			if db.Users[i].AuthSource == "ldap" {
+				return fmt.Errorf("LDAP 用户请在 LDAP 目录中修改密码")
+			}
 			if !crypto.VerifyPassword(oldPassword, db.Users[i].Password) {
 				return utils.ErrInvalidCredentials
 			}
@@ -78,6 +148,111 @@ func (s *AuthService) ChangePassword(userID uint, oldPassword, newPassword strin
 				return err
 			}
 			db.Users[i].Password = hash
+			db.Users[i].TokenVersion++
+			db.RequestSave()
+			return nil
+		}
+	}
+	return utils.ErrNotFound
+}
+
+// ListUsers 分页返回用户列表（按 ID 升序），pageSize 上限 100
+func (s *AuthService) ListUsers(page, pageSize int) ([]models.User, int64) {
+	db := repository.GetDB()
+	db.RLock()
+	defer db.RUnlock()
+
+	total := int64(len(db.Users))
+	if page < 1 {
+		page = 1
+	}
+	if pageSize < 1 || pageSize > 100 {
+		pageSize = 20
+	}
+	start := (page - 1) * pageSize
+	if start >= int(total) {
+		return []models.User{}, total
+	}
+	end := start + pageSize
+	if end > int(total) {
+		end = int(total)
+	}
+	users := make([]models.User, end-start)
+	copy(users, db.Users[start:end])
+	return users, total
+}
+
+// DeleteUser 删除用户；不能删除自己，不能删除最后一个管理员
+func (s *AuthService) DeleteUser(id, requesterID uint) error {
+	db := repository.GetDB()
+	db.Lock()
+	defer db.Unlock()
+
+	idx := -1
+	adminCount := 0
+	for i := range db.Users {
+		if db.Users[i].ID == id {
+			idx = i
+		}
+		if db.Users[i].Role == "admin" {
+			adminCount++
+		}
+	}
+	if idx == -1 {
+		return utils.ErrNotFound
+	}
+	if id == requesterID {
+		return utils.ErrCannotDeleteSelf
+	}
+	if db.Users[idx].Role == "admin" && adminCount <= 1 {
+		return utils.ErrLastAdmin
+	}
+
+	db.Users = append(db.Users[:idx], db.Users[idx+1:]...)
+	for i := range db.LogSources {
+		kept := db.LogSources[i].Access[:0]
+		for _, rule := range db.LogSources[i].Access {
+			if rule.UserID != id {
+				kept = append(kept, rule)
+			}
+		}
+		db.LogSources[i].Access = kept
+	}
+	groups := db.LogPolicyGroups[:0]
+	for _, group := range db.LogPolicyGroups {
+		members := group.UserIDs[:0]
+		for _, member := range group.UserIDs {
+			if member != id {
+				members = append(members, member)
+			}
+		}
+		group.UserIDs = members
+		if len(members) > 0 {
+			groups = append(groups, group)
+		}
+	}
+	db.LogPolicyGroups = groups
+	db.RequestSave()
+	return nil
+}
+
+// ResetPassword 管理员重置用户密码，并递增 TokenVersion 吊销其全部旧会话
+func (s *AuthService) ResetPassword(userID uint, newPassword string) error {
+	db := repository.GetDB()
+	db.Lock()
+	defer db.Unlock()
+
+	for i := range db.Users {
+		if db.Users[i].ID == userID {
+			if db.Users[i].AuthSource == "ldap" {
+				return fmt.Errorf("LDAP 用户密码由目录服务管理，不能在此重置")
+			}
+			hash, err := crypto.HashPassword(newPassword)
+			if err != nil {
+				return err
+			}
+			db.Users[i].Password = hash
+			db.Users[i].TokenVersion++
 			db.RequestSave()
 			return nil
 		}
diff --git a/backend/services/cluster.go b/backend/services/cluster.go
index 2720b8c..3929d76 100644
--- a/backend/services/cluster.go
+++ b/backend/services/cluster.go
@@ -7,10 +7,10 @@ import (
 	"path/filepath"
 	"time"
 
-	"lokideploy/config"
-	"lokideploy/models"
-	"lokideploy/repository"
-	"lokideploy/utils"
+	"opsxloki/config"
+	"opsxloki/models"
+	"opsxloki/repository"
+	"opsxloki/utils"
 )
 
 type ClusterService struct{}
diff --git a/backend/services/cluster_info.go b/backend/services/cluster_info.go
index 79fed94..0aaddcb 100644
--- a/backend/services/cluster_info.go
+++ b/backend/services/cluster_info.go
@@ -8,7 +8,7 @@ import (
 	"os/exec"
 	"strings"
 
-	"lokideploy/models"
+	"opsxloki/models"
 )
 
 type ClusterInfo struct {
diff --git a/backend/services/collector.go b/backend/services/collector.go
index 932e95d..2c4631e 100644
--- a/backend/services/collector.go
+++ b/backend/services/collector.go
@@ -5,9 +5,9 @@ import (
 	"fmt"
 	"time"
 
-	"lokideploy/models"
-	"lokideploy/repository"
-	"lokideploy/utils"
+	"opsxloki/models"
+	"opsxloki/repository"
+	"opsxloki/utils"
 )
 
 type CollectorService struct{}
@@ -66,11 +66,15 @@ func (s *CollectorService) generateConfigSnapshot(c *models.Collector) string {
 	if c.LokiDeployment != nil {
 		endpoint = c.LokiDeployment.Endpoint
 	}
+	clusterName := "host"
+	if c.Cluster != nil && c.Cluster.Name != "" {
+		clusterName = c.Cluster.Name
+	}
 	switch c.Type {
 	case "host-promtail":
-		return PromtailConfig(endpoint, c.LogPath)
+		return PromtailConfig(endpoint, c.LogPath, "host", c.Labels)
 	case "k8s-daemonset":
-		return PromtailHelmValues(endpoint)
+		return PromtailHelmValues(endpoint, clusterName, c.Labels)
 	case "k8s-fluentbit-sidecar":
 		host, port := parseLokiURL(endpoint)
 		app := c.TargetDeployment
diff --git a/backend/services/collector_deployer.go b/backend/services/collector_deployer.go
index 4713f10..5930603 100644
--- a/backend/services/collector_deployer.go
+++ b/backend/services/collector_deployer.go
@@ -7,7 +7,7 @@ import (
 	"os/exec"
 	"strings"
 
-	"lokideploy/models"
+	"opsxloki/models"
 )
 
 // CollectorDeployer 采集器部署器，按 type 分发到三种安装/卸载流程
@@ -97,11 +97,7 @@ func (d *CollectorDeployer) installHost(ctx context.Context, endpoint string) er
 	if host == nil {
 		return fmt.Errorf("主机采集器缺少目标主机")
 	}
-	password, err := DecryptCred(host.Password)
-	if err != nil {
-		return err
-	}
-	client, err := NewSSHClient(host.HostIP, host.Port, host.User, password)
+	client, err := NewSSHClientWithAuth(HostSSHAuth(host))
 	if err != nil {
 		return err
 	}
@@ -145,7 +141,7 @@ func (d *CollectorDeployer) installHost(ctx context.Context, endpoint string) er
 	if logPath == "" {
 		logPath = "/var/log/*.log"
 	}
-	conf := PromtailConfig(endpoint, logPath)
+	conf := PromtailConfig(endpoint, logPath, "host", d.collector.Labels)
 	d.log("info", "上传 Promtail 配置", "")
 	if _, _, err := client.Execute(ctx, fmt.Sprintf("cat > /etc/promtail/promtail.yaml << 'EOF'\n%s\nEOF", conf)); err != nil {
 		return fmt.Errorf("上传配置失败: %w", err)
@@ -191,8 +187,7 @@ func (d *CollectorDeployer) uninstallHost(ctx context.Context) error {
 	if host == nil {
 		return nil
 	}
-	password, _ := DecryptCred(host.Password)
-	client, err := NewSSHClient(host.HostIP, host.Port, host.User, password)
+	client, err := NewSSHClientWithAuth(HostSSHAuth(host))
 	if err != nil {
 		return err
 	}
@@ -209,7 +204,7 @@ func (d *CollectorDeployer) uninstallHost(ctx context.Context) error {
 func (d *CollectorDeployer) installDaemonset(ctx context.Context, endpoint string) error {
 	cluster := d.collector.Cluster
 	if cluster == nil {
-		return fmt.Errorf("DaemonSet 采集器缺少目标集群")
+		return fmt.Errorf("集群采集器缺少目标集群")
 	}
 	env, cleanup, err := kubeconfigEnv(cluster)
 	if err != nil {
@@ -217,37 +212,106 @@ func (d *CollectorDeployer) installDaemonset(ctx context.Context, endpoint strin
 	}
 	defer cleanup()
 
+	// 默认部署到关联 Loki 的命名空间(统一 log 命名空间策略)
 	ns := d.collector.Namespace
+	if ns == "" && d.loki != nil {
+		ns = d.loki.Namespace
+	}
 	if ns == "" {
-		ns = "logging"
+		ns = "log"
 	}
 
-	values := PromtailHelmValues(endpoint)
-	valuesFile, valuesCleanup, err := writeTempFile("promtail-values-*.yaml", values, 0600)
+	clusterName := "unknown"
+	if cluster.Name != "" {
+		clusterName = cluster.Name
+	}
+
+	// 幂等:先清掉同名残留(如历史失败安装留下的无注解资源)
+	del := exec.CommandContext(ctx, "kubectl", "delete",
+		"daemonset/promtail", "configmap/promtail", "serviceaccount/promtail",
+		"-n", ns, "--ignore-not-found=true", "--wait=false")
+	del.Env = env
+	del.CombinedOutput()
+
+	// 纯 YAML 安装(SA/RBAC/ConfigMap/DaemonSet),不依赖后端安装 helm
+	manifest := PromtailDaemonsetYAML(ns, endpoint, clusterName, d.collector.Labels)
+	if err := d.applyYAML(ctx, env, manifest, "promtail"); err != nil {
+		return err
+	}
+
+	d.log("info", fmt.Sprintf("等待 DaemonSet promtail 就绪(命名空间 %s)...", ns), "")
+	waitCmd := exec.CommandContext(ctx, "kubectl", "rollout", "status", "daemonset/promtail",
+		"-n", ns, "--timeout=5m")
+	waitCmd.Env = env
+	waitOut, _ := waitCmd.CombinedOutput()
+	d.log("info", string(waitOut), "")
+
+	// DNS 自愈:CoreDNS 异常的集群上服务名不可解析,回退 Loki ClusterIP 重建配置
+	svcURL := endpoint
+	if strings.Contains(endpoint, ".svc") {
+		probe := exec.CommandContext(ctx, "kubectl", "exec", "-n", ns,
+			"daemonset/promtail", "--", "wget", "-q", "-O", "/dev/null", "-T", "5", endpoint+"/ready")
+		probe.Env = env
+		if pout, perr := probe.CombinedOutput(); perr != nil {
+			d.log("warn", fmt.Sprintf("promtail 无法解析 Loki 服务名(%s),回退 ClusterIP...", strings.TrimSpace(string(pout))), "")
+			ip := d.lokiClusterIP(ctx, env, endpoint)
+			if ip != "" {
+				// 只替换 host 部分,保留 scheme/port/path: http://loki.ns.svc:3100/... → http://IP:3100/...
+				afterScheme := strings.SplitN(endpoint, "//", 2)
+				if len(afterScheme) == 2 {
+					rest := afterScheme[1]
+					host := rest
+					if i := strings.IndexAny(rest, ":/"); i >= 0 {
+						host = rest[:i]
+					}
+					fallback := afterScheme[0] + "//" + strings.Replace(rest, host, ip, 1)
+					if err := d.applyYAML(ctx, env, PromtailDaemonsetYAML(ns, fallback, clusterName, d.collector.Labels), "promtail"); err == nil {
+						rs := exec.CommandContext(ctx, "kubectl", "rollout", "restart", "daemonset/promtail", "-n", ns)
+						rs.Env = env
+						rs.CombinedOutput()
+						d.log("info", fmt.Sprintf("promtail 推送地址已回退为 ClusterIP: %s", fallback), "")
+						svcURL = fallback
+					}
+				}
+			}
+		}
+	}
+
+	d.collector.Config = svcURL
+	d.log("success", fmt.Sprintf("Promtail DaemonSet 已部署到 %s(推送至 %s)", ns, svcURL), "")
+	return nil
+}
+
+// applyYAML kubectl apply 一个 manifest(临时文件)
+func (d *CollectorDeployer) applyYAML(ctx context.Context, env []string, manifest, label string) error {
+	f, cleanup, err := writeTempFile("collector-*.yaml", manifest, 0600)
 	if err != nil {
 		return err
 	}
-	defer valuesCleanup()
-
-	d.log("info", fmt.Sprintf("helm install promtail（命名空间 %s）", ns), "")
-	// 添加 grafana repo（幂等）
-	repo := exec.CommandContext(ctx, "helm", "repo", "add", "grafana", "https://grafana.github.io/helm-charts")
-	repo.Env = env
-	repo.CombinedOutput()
-	upd := exec.CommandContext(ctx, "helm", "repo", "update")
-	upd.Env = env
-	upd.CombinedOutput()
-
-	cmd := exec.CommandContext(ctx, "helm", "upgrade", "--install", "promtail", "grafana/promtail",
-		"-f", valuesFile, "--namespace", ns, "--create-namespace", "--wait", "--timeout", "5m")
+	defer cleanup()
+	cmd := exec.CommandContext(ctx, "kubectl", "apply", "-f", f)
 	cmd.Env = env
 	out, err := cmd.CombinedOutput()
 	if err != nil {
-		return fmt.Errorf("helm 安装 Promtail 失败: %w\n%s", err, string(out))
+		d.log("error", fmt.Sprintf("kubectl apply %s failed: %v", label, err), string(out))
+		return fmt.Errorf("kubectl apply %s failed: %w\n%s", label, err, string(out))
 	}
 	return nil
 }
 
+// lokiClusterIP 从 endpoint 的命名空间取 loki Service 的 ClusterIP(不经 DNS)
+func (d *CollectorDeployer) lokiClusterIP(ctx context.Context, env []string, endpoint string) string {
+	ns := "log"
+	if d.loki != nil && d.loki.Namespace != "" {
+		ns = d.loki.Namespace
+	}
+	cmd := exec.CommandContext(ctx, "kubectl", "get", "svc", "loki", "-n", ns,
+		"-o", "jsonpath={.spec.clusterIP}")
+	cmd.Env = env
+	out, _ := cmd.CombinedOutput()
+	return strings.TrimSpace(string(out))
+}
+
 func (d *CollectorDeployer) uninstallDaemonset(ctx context.Context) error {
 	cluster := d.collector.Cluster
 	if cluster == nil {
@@ -259,10 +323,16 @@ func (d *CollectorDeployer) uninstallDaemonset(ctx context.Context) error {
 	}
 	defer cleanup()
 	ns := d.collector.Namespace
-	if ns == "" {
-		ns = "logging"
+	if ns == "" && d.loki != nil {
+		ns = d.loki.Namespace
 	}
-	cmd := exec.CommandContext(ctx, "helm", "uninstall", "promtail", "--namespace", ns)
+	if ns == "" {
+		ns = "log"
+	}
+	cmd := exec.CommandContext(ctx, "kubectl", "delete",
+		"daemonset/promtail", "configmap/promtail", "serviceaccount/promtail",
+		"clusterrole/opsxloki-promtail", "clusterrolebinding/opsxloki-promtail",
+		"-n", ns, "--ignore-not-found=true")
 	cmd.Env = env
 	cmd.CombinedOutput()
 	return nil
diff --git a/backend/services/collector_templates.go b/backend/services/collector_templates.go
index 5f39212..46b73b9 100644
--- a/backend/services/collector_templates.go
+++ b/backend/services/collector_templates.go
@@ -1,14 +1,35 @@
 package services
 
 import (
+	"encoding/json"
 	"fmt"
+	"sort"
 	"strings"
 )
 
 // PromtailConfig 主机 Promtail 配置（推送至 lokiEndpoint，采集 logPath）
 // 生产级配置：持久化位置文件、批处理、重试、CRI日志格式解析
-func PromtailConfig(lokiEndpoint, logPath string) string {
-	return fmt.Sprintf(`server:
+// promtailExternalLabels 组并 cluster 标识与用户自定义标签(JSON)为 external_labels YAML 行
+func promtailExternalLabels(cluster string, labelsJSON string) string {
+	lines := []string{fmt.Sprintf("        cluster: %q", cluster)}
+	if labelsJSON != "" {
+		var m map[string]string
+		if err := json.Unmarshal([]byte(labelsJSON), &m); err == nil {
+			keys := make([]string, 0, len(m))
+			for k := range m {
+				keys = append(keys, k)
+			}
+			sort.Strings(keys)
+			for _, k := range keys {
+				lines = append(lines, fmt.Sprintf("        %s: %q", k, m[k]))
+			}
+		}
+	}
+	return strings.Join(lines, "\n")
+}
+
+func PromtailConfig(lokiEndpoint, logPath, cluster, labelsJSON string) string {
+	conf := fmt.Sprintf(`server:
   http_listen_port: 9080
   grpc_listen_port: 0
   log_level: info
@@ -29,6 +50,7 @@ clients:
       max_retries: 10
     external_labels:
       job: host-logs
+__EXT_LABELS__
 
 limits_config:
   readline_rate_enabled: false
@@ -57,12 +79,13 @@ scrape_configs:
           burst: 10000
           drop: true
 `, lokiEndpoint, logPath)
+	return strings.Replace(conf, "__EXT_LABELS__", promtailExternalLabels(cluster, labelsJSON), 1)
 }
 
 // PromtailHelmValues DaemonSet 模式 Promtail Helm values（生产级）
 // 包含：cri解析、kubernetes标签、批处理配置、资源限制
-func PromtailHelmValues(lokiEndpoint string) string {
-	return fmt.Sprintf(`config:
+func PromtailHelmValues(lokiEndpoint, cluster, labelsJSON string) string {
+	values := fmt.Sprintf(`config:
   clients:
     - url: %s/loki/api/v1/push
       batchwait: 1s
@@ -73,7 +96,7 @@ func PromtailHelmValues(lokiEndpoint string) string {
         max_period: 5m
         max_retries: 10
       external_labels:
-        cluster: ${CLUSTER_NAME:-unknown}
+__EXT_LABELS__
   positions:
     filename: /run/promtail/positions.yaml
   scrape_configs:
@@ -164,6 +187,160 @@ extraVolumeMounts:
   - name: promtail-run
     mountPath: /run/promtail
 `, lokiEndpoint)
+	return strings.Replace(values, "__EXT_LABELS__", promtailExternalLabels(cluster, labelsJSON), 1)
+}
+
+// PromtailDaemonsetYAML DaemonSet 模式纯 YAML 安装(SA/RBAC/ConfigMap/DaemonSet),
+// 取代 helm 安装 —— 后端无需安装 helm 二进制。
+// relabel 体系与主流 helm chart 对齐:namespace/pod/container/node_name + __path__ 按 pod uid 精确匹配。
+func PromtailDaemonsetYAML(ns, lokiURL, clusterName, labelsJSON string) string {
+	extLabels := promtailExternalLabels(clusterName, labelsJSON)
+	return fmt.Sprintf(`apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: promtail
+  namespace: %s
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRole
+metadata:
+  name: opsxloki-promtail
+rules:
+- apiGroups: [""]
+  resources: ["pods", "nodes"]
+  verbs: ["get", "list", "watch"]
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: opsxloki-promtail
+roleRef:
+  apiGroup: rbac.authorization.k8s.io
+  kind: ClusterRole
+  name: opsxloki-promtail
+subjects:
+- kind: ServiceAccount
+  name: promtail
+  namespace: %s
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: promtail
+  namespace: %s
+data:
+  promtail.yaml: |
+    server:
+      http_listen_port: 3101
+      grpc_listen_port: 0
+    positions:
+      filename: /run/promtail/positions.yaml
+    clients:
+    - url: %s/loki/api/v1/push
+      batchwait: 1s
+      batchsize: 1048576
+      backoff_config:
+        min_period: 500ms
+        max_period: 5m
+        max_retries: 10
+      external_labels:
+        job: promtail
+%s
+    scrape_configs:
+    - job_name: kubernetes-pods
+      kubernetes_sd_configs:
+      - role: pod
+      relabel_configs:
+      - source_labels: [__meta_kubernetes_namespace]
+        target_label: namespace
+      - source_labels: [__meta_kubernetes_pod_name]
+        target_label: pod
+      - source_labels: [__meta_kubernetes_pod_container_name]
+        target_label: container
+      - source_labels: [__meta_kubernetes_pod_node_name]
+        target_label: node_name
+      - source_labels: [__meta_kubernetes_pod_label_app_kubernetes_io_name, __meta_kubernetes_pod_label_app]
+        regex: ^;*([^;]+)(;.*)?$
+        target_label: app
+      - separator: /
+        source_labels: [__meta_kubernetes_namespace, __meta_kubernetes_pod_label_app_kubernetes_io_name]
+        target_label: job
+      - source_labels: [__meta_kubernetes_pod_uid, __meta_kubernetes_pod_container_name]
+        separator: /
+        target_label: __path__
+        replacement: /var/log/pods/*$1/*.log
+---
+apiVersion: apps/v1
+kind: DaemonSet
+metadata:
+  name: promtail
+  namespace: %s
+  labels:
+    app: promtail
+spec:
+  selector:
+    matchLabels:
+      app: promtail
+  template:
+    metadata:
+      labels:
+        app: promtail
+    spec:
+      serviceAccountName: promtail
+      tolerations:
+      - effect: NoSchedule
+        operator: Exists
+      containers:
+      - name: promtail
+        image: grafana/promtail:3.4.0
+        imagePullPolicy: IfNotPresent
+        args: ["-config.file=/etc/promtail/promtail.yaml"]
+        env:
+        - name: HOSTNAME
+          valueFrom:
+            fieldRef:
+              fieldPath: spec.nodeName
+        ports:
+        - name: http-metrics
+          containerPort: 3101
+        readinessProbe:
+          httpGet:
+            path: /ready
+            port: http-metrics
+          initialDelaySeconds: 10
+          periodSeconds: 10
+        resources:
+          requests:
+            cpu: 50m
+            memory: 64Mi
+          limits:
+            cpu: 200m
+            memory: 256Mi
+        volumeMounts:
+        - name: config
+          mountPath: /etc/promtail
+        - name: run
+          mountPath: /run/promtail
+        - name: pods
+          mountPath: /var/log/pods
+          readOnly: true
+        - name: containers
+          mountPath: /var/lib/docker/containers
+          readOnly: true
+      volumes:
+      - name: config
+        configMap:
+          name: promtail
+      - name: run
+        hostPath:
+          path: /run/promtail
+      - name: pods
+        hostPath:
+          path: /var/log/pods
+      - name: containers
+        hostPath:
+          path: /var/lib/docker/containers
+`, ns, ns, ns, lokiURL, extLabels, ns)
 }
 
 // FluentbitConfig Sidecar 模式 Fluent Bit 配置（采集 logPath，推送至 lokiHost:lokiPort）
diff --git a/backend/services/deployment.go b/backend/services/deployment.go
index 15f45a9..341cdf7 100644
--- a/backend/services/deployment.go
+++ b/backend/services/deployment.go
@@ -1,6 +1,7 @@
 package services
 
 import (
+	"os/exec"
 	"context"
 	"fmt"
 	"strconv"
@@ -8,9 +9,9 @@ import (
 	"sync"
 	"time"
 
-	"lokideploy/models"
-	"lokideploy/repository"
-	"lokideploy/utils"
+	"opsxloki/models"
+	"opsxloki/repository"
+	"opsxloki/utils"
 )
 
 // LokiVersionList 支持的 Loki 版本列表（按推荐程度排序）
@@ -50,6 +51,8 @@ type CreateDeploymentRequest struct {
 	ResourcesCPU    string `json:"resourcesCPU"`
 	ResourcesMem    string `json:"resourcesMem"`
 	StorageSize     string `json:"storageSize"`
+	GrafanaEnabled  bool   `json:"grafanaEnabled"`
+	GrafanaVersion  string `json:"grafanaVersion"`
 }
 
 func (s *DeploymentService) Create(req *CreateDeploymentRequest) (*models.LokiDeployment, error) {
@@ -77,6 +80,8 @@ func (s *DeploymentService) Create(req *CreateDeploymentRequest) (*models.LokiDe
 		ResourcesCPU:    req.ResourcesCPU,
 		ResourcesMem:    req.ResourcesMem,
 		StorageSize:     req.StorageSize,
+		GrafanaEnabled:  req.GrafanaEnabled,
+		GrafanaVersion:  req.GrafanaVersion,
 		Status:          "pending",
 		CreatedAt:       time.Now(),
 		UpdatedAt:       time.Now(),
@@ -106,6 +111,13 @@ func (s *DeploymentService) Create(req *CreateDeploymentRequest) (*models.LokiDe
 		for i := range db.Storages {
 			if db.Storages[i].ID == d.StorageConfigID {
 				st := db.Storages[i]
+				// 模型内为 ENC: 密文,生成 Loki 配置前解密(否则密文进 ConfigMap 且无法通过对象存储认证)
+				if ak, err := DecryptCred(st.AccessKey); err == nil && ak != "" {
+					st.AccessKey = ak
+				}
+				if sk, err := DecryptCred(st.SecretKey); err == nil && sk != "" {
+					st.SecretKey = sk
+				}
 				d.StorageConfig = &st
 				break
 			}
@@ -171,6 +183,57 @@ func (s *DeploymentService) Update(id uint, updates map[string]interface{}) erro
 			if v, ok := updates["endpoint"].(string); ok {
 				db.Deployments[i].Endpoint = v
 			}
+			// 业务字段(来自 PUT /deployments/:id;JSON 数字解码为 float64)
+			if v, ok := updates["name"].(string); ok && v != "" {
+				db.Deployments[i].Name = v
+			}
+			if v, ok := updates["description"].(string); ok {
+				db.Deployments[i].Description = v
+			}
+			if v, ok := updates["version"].(string); ok && v != "" {
+				db.Deployments[i].Version = v
+			}
+			if v, ok := updates["namespace"].(string); ok && v != "" {
+				db.Deployments[i].Namespace = v
+			}
+			if v, ok := updates["resourcesCPU"].(string); ok {
+				db.Deployments[i].ResourcesCPU = v
+			}
+			if v, ok := updates["resourcesMem"].(string); ok {
+				db.Deployments[i].ResourcesMem = v
+			}
+			if v, ok := updates["storageSize"].(string); ok && v != "" {
+				db.Deployments[i].StorageSize = v
+			}
+			if v, ok := updates["authEnabled"].(bool); ok {
+				db.Deployments[i].AuthEnabled = v
+			}
+			if v, ok := updates["grafanaEnabled"].(bool); ok {
+				db.Deployments[i].GrafanaEnabled = v
+			}
+			if v, ok := updates["grafanaVersion"].(string); ok && v != "" {
+				db.Deployments[i].GrafanaVersion = v
+			}
+			if v, ok := updates["grafanaEndpoint"].(string); ok {
+				db.Deployments[i].GrafanaEndpoint = v
+			}
+			if v, ok := updates["storageConfigID"].(float64); ok && v > 0 {
+				db.Deployments[i].StorageConfigID = uint(v)
+			}
+			if v, ok := updates["clusterID"].(float64); ok && v > 0 {
+				id := uint(v)
+				db.Deployments[i].ClusterID = &id
+			}
+			if v, ok := updates["hostID"].(float64); ok && v > 0 {
+				id := uint(v)
+				db.Deployments[i].HostID = &id
+			}
+			if v, ok := updates["retentionDays"].(float64); ok && v > 0 {
+				db.Deployments[i].RetentionDays = int(v)
+			}
+			if v, ok := updates["replicas"].(float64); ok && v > 0 {
+				db.Deployments[i].Replicas = int(v)
+			}
 			db.Deployments[i].UpdatedAt = time.Now()
 			db.RequestSave()
 			return nil
@@ -260,6 +323,11 @@ func (s *DeploymentService) StartDeploy(id uint) error {
 				"statusMessage": "Deployment completed successfully",
 				"endpoint":      s.getEndpoint(deployment),
 			})
+			// 部署成功自动注册日志查询数据源 + 记录 Grafana 访问地址
+			if fresh, gerr := s.Get(id); gerr == nil {
+				EnsureLogSourceForDeployment(fresh)
+				go s.recordGrafanaEndpoint(fresh)
+			}
 			s.AddLog(id, "success", "Deployment completed successfully", "")
 		}
 	}()
@@ -398,6 +466,13 @@ func (s *DeploymentService) loadRelations(d *models.LokiDeployment) {
 		for i := range db.Storages {
 			if db.Storages[i].ID == d.StorageConfigID {
 				st := db.Storages[i]
+				// 模型内为 ENC: 密文,生成 Loki 配置前解密(否则密文进 ConfigMap 且无法通过对象存储认证)
+				if ak, err := DecryptCred(st.AccessKey); err == nil && ak != "" {
+					st.AccessKey = ak
+				}
+				if sk, err := DecryptCred(st.SecretKey); err == nil && sk != "" {
+					st.SecretKey = sk
+				}
 				d.StorageConfig = &st
 				break
 			}
@@ -472,3 +547,126 @@ func GetRecommendedVersions() []string {
 	copy(result, LokiVersionList)
 	return result
 }
+
+// Preflight 向导预检:聚合各资源真实状态,前端据此推导步骤完成态(状态推导式向导)
+func (s *DeploymentService) Preflight() map[string]interface{} {
+	db := repository.GetDB()
+	db.RLock()
+	defer db.RUnlock()
+
+	result := map[string]interface{}{
+		"hasStorage":       len(db.Storages) > 0,
+		"hasActiveCluster": false,
+		"clusterNames":     []string{},
+		"hasActiveHost":    false,
+		"hostNames":        []string{},
+		"runningLoki":      nil,
+		"activeCollectors": 0,
+		"grafanaReady":     false,
+	}
+
+	var defaultStorage string
+	for i := range db.Storages {
+		if db.Storages[i].IsDefault {
+			defaultStorage = db.Storages[i].Name
+			break
+		}
+	}
+	if defaultStorage == "" && len(db.Storages) > 0 {
+		defaultStorage = db.Storages[0].Name
+	}
+	result["defaultStorage"] = defaultStorage
+
+	clusters := []string{}
+	for i := range db.Clusters {
+		clusters = append(clusters, db.Clusters[i].Name)
+		if db.Clusters[i].Status == "active" || db.Clusters[i].Status == "running" {
+			result["hasActiveCluster"] = true
+		}
+	}
+	result["clusterNames"] = clusters
+
+	hosts := []string{}
+	for i := range db.Hosts {
+		hosts = append(hosts, db.Hosts[i].Name)
+		if db.Hosts[i].Status == "active" {
+			result["hasActiveHost"] = true
+		}
+	}
+	result["hostNames"] = hosts
+
+	for i := range db.Deployments {
+		d := &db.Deployments[i]
+		if d.Status == "running" {
+			loki := map[string]interface{}{
+				"id":             d.ID,
+				"name":           d.Name,
+				"mode":           d.Mode,
+				"endpoint":       d.Endpoint,
+				"namespace":      d.Namespace,
+				"grafana":        d.GrafanaEnabled,
+				"grafanaEndpoint": d.GrafanaEndpoint,
+			}
+			result["runningLoki"] = loki
+			if d.GrafanaEnabled {
+				result["grafanaReady"] = true
+			}
+			break
+		}
+	}
+
+	for i := range db.Collectors {
+		if db.Collectors[i].Status == "active" {
+			result["activeCollectors"] = result["activeCollectors"].(int) + 1
+		}
+	}
+	return result
+}
+
+// recordGrafanaEndpoint 记录 Grafana 可点击访问地址(k8s: 首节点 IP + NodePort;host: 主机 IP:3000),
+// 供部署卡片/向导直接展示,用户不用翻日志找端口。
+func (s *DeploymentService) recordGrafanaEndpoint(d *models.LokiDeployment) {
+	if d == nil || !d.GrafanaEnabled {
+		return
+	}
+	var endpoint string
+	switch d.Mode {
+	case "k8s-helm", "k8s-yaml":
+		if d.Cluster == nil {
+			s.AddLog(d.ID, "warn", "Grafana 地址记录跳过:未关联集群", "")
+			return
+		}
+		ctx, cancel := context.WithTimeout(context.Background(), 30*time.Second)
+		defer cancel()
+		env, cleanup, err := kubeconfigEnv(d.Cluster)
+		if err != nil {
+			return
+		}
+		defer cleanup()
+		ns := d.Namespace
+		if ns == "" {
+			ns = "log"
+		}
+		ipCmd := exec.CommandContext(ctx, "kubectl", "get", "nodes",
+			"-o", "jsonpath={.items[0].status.addresses[0].address}")
+		ipCmd.Env = env
+		ipOut, _ := ipCmd.CombinedOutput()
+		portCmd := exec.CommandContext(ctx, "kubectl", "get", "svc", "grafana", "-n", ns,
+			"-o", "jsonpath={.spec.ports[0].nodePort}")
+		portCmd.Env = env
+		portOut, _ := portCmd.CombinedOutput()
+		ip := strings.TrimSpace(string(ipOut))
+		port := strings.TrimSpace(string(portOut))
+		s.AddLog(d.ID, "info", fmt.Sprintf("Grafana 地址探测: node=%s port=%s", ip, port), "")
+		if ip != "" && port != "" {
+			endpoint = fmt.Sprintf("http://%s:%s", ip, port)
+		}
+	case "host-binary":
+		if d.Host != nil {
+			endpoint = fmt.Sprintf("http://%s:3000", d.Host.HostIP)
+		}
+	}
+	if endpoint != "" {
+		_ = s.Update(d.ID, map[string]interface{}{"grafanaEndpoint": endpoint})
+	}
+}
diff --git a/backend/services/grafana_deployer.go b/backend/services/grafana_deployer.go
new file mode 100644
index 0000000..a93ed8a
--- /dev/null
+++ b/backend/services/grafana_deployer.go
@@ -0,0 +1,438 @@
+package services
+
+import (
+	"context"
+	"encoding/base64"
+	"fmt"
+	"io"
+	"net/http"
+	"os/exec"
+	"strings"
+	"time"
+
+	"opsxloki/models"
+)
+
+// GrafanaDeployer 与 Loki 同环境部署 Grafana 并自动配置 Loki 数据源。
+// k8s 模式:manifest(Deployment + NodePort Service + 数据源 ConfigMap),与 Loki 同 namespace;
+// host-binary 模式:tarball + systemd,与 Loki 同机。
+type GrafanaDeployer struct {
+	deployment *models.LokiDeployment
+	log        func(level, message, detail string)
+}
+
+const defaultGrafanaVersion = "11.3.0"
+
+func (d *GrafanaDeployer) version() string {
+	if d.deployment.GrafanaVersion != "" {
+		return d.deployment.GrafanaVersion
+	}
+	return defaultGrafanaVersion
+}
+
+// lokiPushURL 数据源指向的 Loki 地址(k8s 走集群内服务名,主机走本机)
+func (d *GrafanaDeployer) lokiPushURL() string {
+	if d.deployment.Mode == "host-binary" {
+		return "http://127.0.0.1:3100"
+	}
+	ns := d.deployment.Namespace
+	if ns == "" {
+		ns = "log"
+	}
+	return fmt.Sprintf("http://loki.%s.svc.cluster.local:3100", ns)
+}
+
+// Deploy 部署入口:按模式分发
+func (d *GrafanaDeployer) Deploy(ctx context.Context) error {
+	d.log("info", fmt.Sprintf("Deploying Grafana %s (mode: %s)...", d.version(), d.deployment.Mode), "")
+	switch d.deployment.Mode {
+	case "k8s-helm", "k8s-yaml":
+		return d.deployK8s(ctx)
+	case "host-binary":
+		return d.deployHost(ctx)
+	default:
+		return fmt.Errorf("unsupported mode for grafana: %s", d.deployment.Mode)
+	}
+}
+
+// ==================== K8s manifest 部署 ====================
+
+// grafanaManifest 生成 Grafana 资源;lokiURL 显式传入(默认服务名,DNS 异常的集群可回退 ClusterIP)。
+// 数据卷用 emptyDir:数据源/配置由 ConfigMap 供给,重启即恢复;避免无默认
+// StorageClass 的集群上 PVC Pending 阻塞(UI 内自建的面板需重新导入,见已知限制)。
+func (d *GrafanaDeployer) grafanaManifest(ns, lokiURL string) string {
+	version := d.version()
+
+	datasources := fmt.Sprintf(`apiVersion: 1
+datasources:
+- name: Loki
+  type: loki
+  uid: loki-ds
+  access: proxy
+  url: %s
+  isDefault: true
+  editable: false`, lokiURL)
+
+	return fmt.Sprintf(`apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: grafana-datasources
+  namespace: %s
+data:
+  datasources.yaml: |
+%s
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: grafana
+  namespace: %s
+  labels:
+    app: grafana
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: grafana
+  template:
+    metadata:
+      labels:
+        app: grafana
+    spec:
+      containers:
+      - name: grafana
+        image: grafana/grafana:%s
+        imagePullPolicy: IfNotPresent
+        ports:
+        - name: http
+          containerPort: 3000
+        env:
+        - name: GF_SECURITY_ADMIN_USER
+          value: admin
+        - name: GF_SECURITY_ADMIN_PASSWORD
+          value: admin
+        readinessProbe:
+          httpGet:
+            path: /api/health
+            port: http
+          initialDelaySeconds: 10
+          periodSeconds: 10
+        resources:
+          requests:
+            cpu: 100m
+            memory: 128Mi
+          limits:
+            cpu: 500m
+            memory: 512Mi
+        volumeMounts:
+        - name: datasources
+          mountPath: /etc/grafana/provisioning/datasources
+      volumes:
+      - name: datasources
+        configMap:
+          name: grafana-datasources
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: grafana
+  namespace: %s
+  labels:
+    app: grafana
+spec:
+  # NodePort 便于集群外直接访问(端口由集群自动分配,实际端口见部署日志)
+  type: NodePort
+  ports:
+  - name: http
+    port: 3000
+    targetPort: 3000
+  selector:
+    app: grafana
+`, ns, indentBlock(datasources, "    "), ns, version, ns)
+}
+
+func (d *GrafanaDeployer) deployK8s(ctx context.Context) error {
+	if d.deployment.Cluster == nil {
+		return fmt.Errorf("please select target cluster")
+	}
+	env, cleanup, err := kubeconfigEnv(d.deployment.Cluster)
+	if err != nil {
+		return err
+	}
+	defer cleanup()
+
+	ns := d.deployment.Namespace
+	if ns == "" {
+		ns = "log"
+	}
+
+	lokiURL := d.lokiPushURL()
+	manifestFile, manifestCleanup, err := writeTempFile("grafana-*.yaml", d.grafanaManifest(ns, lokiURL), 0600)
+	if err != nil {
+		return err
+	}
+	defer manifestCleanup()
+
+	d.log("info", "Applying Grafana manifest (Deployment + NodePort Service + datasource ConfigMap)...", "")
+	cmd := exec.CommandContext(ctx, "kubectl", "apply", "-f", manifestFile)
+	cmd.Env = env
+	out, err := cmd.CombinedOutput()
+	if err != nil {
+		d.log("error", fmt.Sprintf("kubectl apply grafana failed: %v", err), string(out))
+		return fmt.Errorf("kubectl apply grafana failed: %w\n%s", err, string(out))
+	}
+
+	waitCmd := exec.CommandContext(ctx, "kubectl", "rollout", "status", "deployment/grafana",
+		"-n", ns, "--timeout=5m")
+	waitCmd.Env = env
+	waitOut, _ := waitCmd.CombinedOutput()
+	d.log("info", string(waitOut), "")
+
+	// DNS 自愈:部分集群 CoreDNS 对 Service 记录异常(如 watch 失效),
+	// 经 grafana 容器探测 Loki 服务名,不通则回退 ClusterIP 并热更新数据源。
+	dnsProbe := exec.CommandContext(ctx, "kubectl", "exec", "-n", ns, "deploy/grafana", "--",
+		"wget", "-q", "-O", "/dev/null", "-T", "5", lokiURL+"/ready")
+	dnsProbe.Env = env
+	if probeOut, probeErr := dnsProbe.CombinedOutput(); probeErr != nil {
+		d.log("warn", fmt.Sprintf("Grafana 无法解析 Loki 服务名(%s),回退 ClusterIP…", strings.TrimSpace(string(probeOut))), "")
+		ipCmd := exec.CommandContext(ctx, "kubectl", "get", "svc", "loki", "-n", ns,
+			"-o", "jsonpath={.spec.clusterIP}")
+		ipCmd.Env = env
+		ipOut, ipErr := ipCmd.CombinedOutput()
+		clusterIP := strings.TrimSpace(string(ipOut))
+		if ipErr != nil || clusterIP == "" {
+			d.log("error", "获取 Loki ClusterIP 失败,数据源保持服务名形式", "")
+		} else {
+			fallbackURL := fmt.Sprintf("http://%s:3100", clusterIP)
+			fbFile, fbCleanup, ferr := writeTempFile("grafana-fb-*.yaml", d.grafanaManifest(ns, fallbackURL), 0600)
+			if ferr == nil {
+				fbApply := exec.CommandContext(ctx, "kubectl", "apply", "-f", fbFile)
+				fbApply.Env = env
+				fbApply.CombinedOutput()
+				fbCleanup()
+				restart := exec.CommandContext(ctx, "kubectl", "rollout", "restart", "deployment/grafana", "-n", ns)
+				restart.Env = env
+				restart.CombinedOutput()
+				wait2 := exec.CommandContext(ctx, "kubectl", "rollout", "status", "deployment/grafana",
+					"-n", ns, "--timeout=5m")
+				wait2.Env = env
+				w2, _ := wait2.CombinedOutput()
+				d.log("info", string(w2), "")
+				d.log("info", fmt.Sprintf("数据源已回退为 ClusterIP: %s", fallbackURL), "")
+			}
+		}
+	}
+
+	// 回读实际分配的 NodePort(固定端口易与集群已有服务冲突)
+	portCmd := exec.CommandContext(ctx, "kubectl", "get", "svc", "grafana", "-n", ns,
+		"-o", "jsonpath={.spec.ports[0].nodePort}")
+	portCmd.Env = env
+	portOut, _ := portCmd.CombinedOutput()
+	nodePort := strings.TrimSpace(string(portOut))
+	access := fmt.Sprintf("http://<节点IP>:%s", nodePort)
+	if nodePort == "" {
+		access = "kubectl get svc grafana -n " + ns + " 查看访问端口"
+	}
+
+	d.log("success", fmt.Sprintf("Grafana deployed. 访问: %s (NodePort, 账号 admin/admin), 数据源已指向 %s", access, d.lokiPushURL()), "")
+
+	// 自动导入 Loki 日志面板(打开即可看图;密码被用户修改过则跳过并提示)
+	if err := d.importDashboard(ctx, env, ns); err != nil {
+		d.log("warn", fmt.Sprintf("面板自动导入跳过: %v", err), "")
+	} else {
+		d.log("info", "已导入「Loki 日志」面板(Explore 可用,默认账号 admin/admin)", "")
+	}
+	return nil
+}
+
+// importDashboard 通过 Grafana API 导入预置的 Loki 日志面板
+func (d *GrafanaDeployer) importDashboard(ctx context.Context, env []string, ns string) error {
+	payload := grafanaDashboardPayload()
+
+	postDashboard := func(baseURL string) error {
+		req, err := http.NewRequestWithContext(ctx, http.MethodPost,
+			strings.TrimSuffix(baseURL, "/")+"/api/dashboards/db", strings.NewReader(payload))
+		if err != nil {
+			return err
+		}
+		req.Header.Set("Content-Type", "application/json")
+		req.Header.Set("Authorization", "Basic "+base64.StdEncoding.EncodeToString([]byte("admin:admin")))
+		resp, err := (&http.Client{Timeout: 15 * time.Second}).Do(req)
+		if err != nil {
+			return err
+		}
+		defer resp.Body.Close()
+		if resp.StatusCode >= 400 {
+			body, _ := io.ReadAll(io.LimitReader(resp.Body, 300))
+			return fmt.Errorf("HTTP %d: %s", resp.StatusCode, string(body))
+		}
+		return nil
+	}
+
+	switch d.deployment.Mode {
+	case "k8s-helm", "k8s-yaml":
+		// 经 NodePort 直连(kube service proxy 的 POST 需额外 RBAC,直连最稳)
+		ipCmd := exec.CommandContext(ctx, "kubectl", "get", "nodes",
+			"-o", "jsonpath={.items[0].status.addresses[0].address}")
+		ipCmd.Env = env
+		ipOut, _ := ipCmd.CombinedOutput()
+		portCmd := exec.CommandContext(ctx, "kubectl", "get", "svc", "grafana", "-n", ns,
+			"-o", "jsonpath={.spec.ports[0].nodePort}")
+		portCmd.Env = env
+		portOut, _ := portCmd.CombinedOutput()
+		ip, port := strings.TrimSpace(string(ipOut)), strings.TrimSpace(string(portOut))
+		if ip == "" || port == "" {
+			return fmt.Errorf("获取 NodePort 失败")
+		}
+		return postDashboard(fmt.Sprintf("http://%s:%s", ip, port))
+	case "host-binary":
+		if d.deployment.Host == nil {
+			return fmt.Errorf("no host")
+		}
+		return postDashboard(fmt.Sprintf("http://%s:3000", d.deployment.Host.HostIP))
+	}
+	return fmt.Errorf("unsupported mode")
+}
+
+// ==================== 主机 tarball 部署 ====================
+
+func (d *GrafanaDeployer) deployHost(ctx context.Context) error {
+	host := d.deployment.Host
+	if host == nil {
+		return fmt.Errorf("please select target host")
+	}
+	client, err := NewSSHClientWithAuth(HostSSHAuth(host))
+	if err != nil {
+		return err
+	}
+	defer client.Close()
+
+	arch, _, _ := client.Execute(ctx, "uname -m")
+	grafanaArch := "amd64"
+	if strings.Contains(arch, "aarch64") || strings.Contains(arch, "arm64") {
+		grafanaArch = "arm64"
+	}
+	version := d.version()
+
+	d.log("info", fmt.Sprintf("Downloading Grafana %s (%s)...", version, grafanaArch), "")
+	url := fmt.Sprintf("https://dl.grafana.com/oss/release/grafana-%s.linux-%s.tar.gz", version, grafanaArch)
+	dl := fmt.Sprintf("curl -fsSL -o /tmp/grafana.tar.gz %s && tar -xzf /tmp/grafana.tar.gz -C /opt/ && rm -rf /opt/grafana && ln -sfn /opt/grafana-v%s /opt/grafana && rm -f /tmp/grafana.tar.gz", url, version)
+	if out, _, err := client.Execute(ctx, dl); err != nil {
+		return fmt.Errorf("download grafana failed: %w\n%s", err, out)
+	}
+
+	// 数据源 provisioning(指向同机 Loki)
+	dsYAML := fmt.Sprintf(`apiVersion: 1
+datasources:
+- name: Loki
+  type: loki
+  access: proxy
+  url: %s
+  isDefault: true
+`, d.lokiPushURL())
+	client.Execute(ctx, "mkdir -p /etc/grafana/provisioning/datasources /var/lib/grafana /var/log/grafana")
+	writeCmd := fmt.Sprintf("cat > /etc/grafana/provisioning/datasources/loki.yaml <<'EOF'\n%s\nEOF", dsYAML)
+	if out, _, err := client.Execute(ctx, writeCmd); err != nil {
+		return fmt.Errorf("write datasource config failed: %w\n%s", err, out)
+	}
+
+	unit := `[Unit]
+Description=Grafana
+After=network.target
+
+[Service]
+Type=simple
+User=root
+WorkingDirectory=/opt/grafana
+ExecStart=/opt/grafana/bin/grafana server --homepath /opt/grafana --config /opt/grafana/conf/defaults.ini
+Restart=always
+LimitNOFILE=65536
+
+[Install]
+WantedBy=multi-user.target`
+	writeUnit := fmt.Sprintf("cat > /etc/systemd/system/grafana.service <<'EOF'\n%s\nEOF", unit)
+	if out, _, err := client.Execute(ctx, writeUnit); err != nil {
+		return fmt.Errorf("write systemd unit failed: %w\n%s", err, out)
+	}
+	if out, _, err := client.Execute(ctx, "systemctl daemon-reload && systemctl enable grafana && systemctl restart grafana"); err != nil {
+		return fmt.Errorf("start grafana failed: %w\n%s", err, out)
+	}
+
+	// 健康检查(最多 10 次)
+	for i := 0; i < 10; i++ {
+		out, _, _ := client.Execute(ctx, "curl -fsSL http://localhost:3000/api/health")
+		if strings.Contains(out, "\"version\"") {
+			d.log("success", fmt.Sprintf("Grafana running on %s:3000 (admin/admin), 数据源已指向本机 Loki", host.HostIP), "")
+			return nil
+		}
+		select {
+		case <-ctx.Done():
+			return ctx.Err()
+		case <-time.After(2 * time.Second):
+		}
+	}
+	d.log("warn", "Grafana 服务已启动但健康检查未通过,请稍后确认 http://<主机IP>:3000", "")
+	return nil
+}
+
+// CleanupGrafana 卸载 Grafana(停止部署时同步调用)
+func CleanupGrafana(ctx context.Context, deployment *models.LokiDeployment) {
+	if deployment == nil {
+		return
+	}
+	switch deployment.Mode {
+	case "k8s-helm", "k8s-yaml":
+		if deployment.Cluster == nil {
+			return
+		}
+		env, cleanup, err := kubeconfigEnv(deployment.Cluster)
+		if err != nil {
+			return
+		}
+		defer cleanup()
+		ns := deployment.Namespace
+		if ns == "" {
+			ns = "log"
+		}
+		cmd := exec.CommandContext(ctx, "kubectl", "delete",
+			"deployment/grafana", "service/grafana", "configmap/grafana-datasources",
+			"-n", ns, "--ignore-not-found=true")
+		cmd.Env = env
+		cmd.CombinedOutput()
+	case "host-binary":
+		if deployment.Host == nil {
+			return
+		}
+		client, err := NewSSHClientWithAuth(HostSSHAuth(deployment.Host))
+		if err != nil {
+			return
+		}
+		defer client.Close()
+		client.Execute(ctx, "systemctl stop grafana 2>/dev/null; systemctl disable grafana 2>/dev/null; rm -f /etc/systemd/system/grafana.service; systemctl daemon-reload")
+	}
+}
+
+// grafanaDashboardPayload 预置「Loki 日志」面板:日志量(按命名空间)/错误日志/最近日志
+func grafanaDashboardPayload() string {
+	return `{"dashboard":{
+		"uid":"loki-logs","title":"Loki 日志","tags":["lokideploy"],
+		"timezone":"browser","schemaVersion":39,"refresh":"30s","version":1,
+		"time":{"from":"now-1h","to":"now"},
+		"panels":[
+			{"id":1,"type":"timeseries","title":"日志量(按命名空间)",
+			 "datasource":{"type":"loki","uid":"loki-ds"},
+			 "gridPos":{"h":8,"w":12,"x":0,"y":0},
+			 "fieldConfig":{"defaults":{"unit":"short"},"overrides":[]},
+			 "targets":[{"refId":"A","expr":"sum by (namespace) (count_over_time({namespace=\".+\"}[5m]))","queryType":"range"}]},
+			{"id":2,"type":"timeseries","title":"错误日志",
+			 "datasource":{"type":"loki","uid":"loki-ds"},
+			 "gridPos":{"h":8,"w":12,"x":12,"y":0},
+			 "fieldConfig":{"defaults":{"unit":"short","color":{"mode":"palette-classic"}},"overrides":[]},
+			 "targets":[{"refId":"A","expr":"sum(count_over_time({namespace=\".+\"} |~ \"(?i)error\" [5m]))","queryType":"range"}]},
+			{"id":3,"type":"logs","title":"最近日志",
+			 "datasource":{"type":"loki","uid":"loki-ds"},
+			 "gridPos":{"h":10,"w":24,"x":0,"y":8},
+			 "targets":[{"refId":"A","expr":"{namespace=\".+\"}","queryType":"range"}]}
+		]
+	},"overwrite":true}`
+}
diff --git a/backend/services/host.go b/backend/services/host.go
index 389fb3b..1a31a11 100644
--- a/backend/services/host.go
+++ b/backend/services/host.go
@@ -3,13 +3,12 @@ package services
 import (
 	"context"
 	"fmt"
-	"strings"
 	"time"
 
-	"lokideploy/models"
-	"lokideploy/pkg/crypto"
-	"lokideploy/repository"
-	"lokideploy/utils"
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
+	"opsxloki/repository"
+	"opsxloki/utils"
 )
 
 type HostService struct{}
@@ -112,6 +111,9 @@ func (s *HostService) Update(id uint, updates map[string]interface{}) error {
 			if v, ok := updates["status"].(string); ok {
 				db.Hosts[i].Status = v
 			}
+			if v, ok := updates["statusMessage"].(string); ok {
+				db.Hosts[i].StatusMessage = v
+			}
 			if v, ok := updates["os"].(string); ok {
 				db.Hosts[i].OS = v
 			}
@@ -148,14 +150,9 @@ func (s *HostService) Validate(id uint) {
 	ctx, cancel := context.WithTimeout(context.Background(), 15*time.Second)
 	defer cancel()
 
-	password := host.Password
-	if strings.HasPrefix(password, "ENC:") {
-		password, _ = crypto.Decrypt(password[4:])
-	}
-
-	client, err := NewSSHClient(host.HostIP, host.Port, host.User, password)
+	client, err := NewSSHClientWithAuth(HostSSHAuth(host))
 	if err != nil {
-		s.Update(id, map[string]interface{}{"status": "error"})
+		s.Update(id, map[string]interface{}{"status": "error", "statusMessage": err.Error()})
 		return
 	}
 	defer client.Close()
@@ -175,12 +172,7 @@ func (s *HostService) ExecuteCommand(id uint, command string) (string, string, e
 	ctx, cancel := context.WithTimeout(context.Background(), 60*time.Second)
 	defer cancel()
 
-	password := host.Password
-	if strings.HasPrefix(password, "ENC:") {
-		password, _ = crypto.Decrypt(password[4:])
-	}
-
-	client, err := NewSSHClient(host.HostIP, host.Port, host.User, password)
+	client, err := NewSSHClientWithAuth(HostSSHAuth(host))
 	if err != nil {
 		return "", "", err
 	}
diff --git a/backend/services/k8s_client.go b/backend/services/k8s_client.go
index 24c707b..cd2b8c5 100644
--- a/backend/services/k8s_client.go
+++ b/backend/services/k8s_client.go
@@ -6,7 +6,7 @@ import (
 	"os"
 	"regexp"
 
-	"lokideploy/models"
+	"opsxloki/models"
 )
 
 // resolveKubeconfig 取集群最终的 kubeconfig 文本（优先内存字段，其次磁盘文件）
diff --git a/backend/services/ldap.go b/backend/services/ldap.go
new file mode 100644
index 0000000..c470519
--- /dev/null
+++ b/backend/services/ldap.go
@@ -0,0 +1,330 @@
+// Package services — LDAP 接入:配置存储(SystemSetting 表 JSON)、连接测试、
+// 用户搜索预览、批量导入与登录验证共用同一套连接/搜索代码。
+// 设计参照 opsx-web-lite(has_password 脱敏/空密码保留旧值/批量导入冲突策略)。
+package services
+
+import (
+	"encoding/json"
+	"fmt"
+	"net"
+	"strings"
+	"time"
+
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
+	"opsxloki/repository"
+	"opsxloki/utils"
+
+	ldap "github.com/go-ldap/ldap/v3"
+)
+
+const ldapSettingKey = "ldap_settings"
+
+// netDialer LDAP 拨号器(5s 超时,参照 aiops 的超时处理,避免连接挂起)
+func netDialer() *net.Dialer {
+	return &net.Dialer{Timeout: 5 * time.Second}
+}
+
+// LDAPConfig LDAP 配置(存储形态;BindPassword 以 ENC: 前缀 AES-GCM 加密落库)
+type LDAPConfig struct {
+	Enabled         bool   `json:"enabled"`
+	Host            string `json:"host"`
+	Port            int    `json:"port"`
+	UseSSL          bool   `json:"useSSL"`
+	BindDN          string `json:"bindDN"`
+	BindPassword    string `json:"bindPassword"` // 存储为 ENC:密文;对外输出时剔除
+	BaseDN          string `json:"baseDN"`
+	UserFilter      string `json:"userFilter"`
+	UsernameAttr    string `json:"usernameAttr"`
+	NameAttr        string `json:"nameAttr"`
+	EmailAttr       string `json:"emailAttr"`
+}
+
+// LDAPPublicConfig 对外输出形态(密码剔除,附 hasPassword)
+type LDAPPublicConfig struct {
+	LDAPConfig
+	BindPassword string `json:"bindPassword"` // 恒为空
+	HasPassword  bool   `json:"hasPassword"`
+	Configured   bool   `json:"configured"` // host+bindDN+baseDN 齐备(控制用户页导入按钮显隐)
+}
+
+func defaultLDAPConfig() *LDAPConfig {
+	return &LDAPConfig{
+		Port:         389,
+		UserFilter:   "(objectClass=inetOrgPerson)",
+		UsernameAttr: "uid",
+		NameAttr:     "displayName",
+		EmailAttr:    "mail",
+	}
+}
+
+// GetLDAPConfig 读取配置(解密密码);未配置时返回默认值
+func GetLDAPConfig() *LDAPConfig {
+	db := repository.GetDB()
+	db.RLock()
+	var raw string
+	for i := range db.Settings {
+		if db.Settings[i].Key == ldapSettingKey {
+			raw = db.Settings[i].Value
+			break
+		}
+	}
+	db.RUnlock()
+
+	cfg := defaultLDAPConfig()
+	if raw != "" {
+		_ = json.Unmarshal([]byte(raw), cfg)
+	}
+	if cfg.Port == 0 {
+		cfg.Port = 389
+	}
+	if cfg.BindPassword != "" {
+		if plain, err := DecryptCred(cfg.BindPassword); err == nil {
+			cfg.BindPassword = plain
+		}
+	}
+	return cfg
+}
+
+func GetLDAPPublicConfig() *LDAPPublicConfig {
+	cfg := GetLDAPConfig()
+	hasPwd := cfg.BindPassword != ""
+	return &LDAPPublicConfig{
+		LDAPConfig: LDAPConfig{
+			Enabled:      cfg.Enabled,
+			Host:         cfg.Host,
+			Port:         cfg.Port,
+			UseSSL:       cfg.UseSSL,
+			BindDN:       cfg.BindDN,
+			BaseDN:       cfg.BaseDN,
+			UserFilter:   cfg.UserFilter,
+			UsernameAttr: cfg.UsernameAttr,
+			NameAttr:     cfg.NameAttr,
+			EmailAttr:    cfg.EmailAttr,
+		},
+		HasPassword: hasPwd,
+		Configured:  cfg.Host != "" && cfg.BindDN != "" && cfg.BaseDN != "",
+	}
+}
+
+// SaveLDAPConfig 保存;bindPassword 为空且已有存量 → 保留旧密文
+func SaveLDAPConfig(in *LDAPConfig) error {
+	old := GetLDAPConfig()
+	if in.Port == 0 {
+		in.Port = 389
+	}
+	if in.UserFilter == "" {
+		in.UserFilter = old.UserFilter
+	}
+	if in.UsernameAttr == "" {
+		in.UsernameAttr = "uid"
+	}
+	if in.NameAttr == "" {
+		in.NameAttr = "displayName"
+	}
+	if in.EmailAttr == "" {
+		in.EmailAttr = "mail"
+	}
+	if in.BindPassword == "" {
+		in.BindPassword = old.BindPassword // 已是明文(GetLDAPConfig 解密过)
+	} else if enc, err := crypto.EncryptField(in.BindPassword); err == nil {
+		in.BindPassword = enc
+	}
+
+	data, _ := json.Marshal(in)
+	db := repository.GetDB()
+	// NextID/CreateUser 均自拿锁,禁止在持有 db.Lock() 时调用(JsonDB 锁不可重入)
+	newID := db.NextID("settings")
+	db.Lock()
+	defer db.Unlock()
+	for i := range db.Settings {
+		if db.Settings[i].Key == ldapSettingKey {
+			db.Settings[i].Value = string(data)
+			db.RequestSave()
+			return nil
+		}
+	}
+	db.Settings = append(db.Settings, models.SystemSetting{
+		ID: newID, Key: ldapSettingKey, Value: string(data),
+	})
+	db.RequestSave()
+	return nil
+}
+
+// ==================== 连接与搜索 ====================
+
+// dialLDAP 建立连接(5s 拨号超时,防参照项目无超时挂起的问题)
+func dialLDAP(cfg *LDAPConfig) (*ldap.Conn, error) {
+	scheme := "ldap"
+	if cfg.UseSSL {
+		scheme = "ldaps"
+	}
+	url := fmt.Sprintf("%s://%s:%d", scheme, cfg.Host, cfg.Port)
+	conn, err := ldap.DialURL(url, ldap.DialWithDialer(netDialer()))
+	if err != nil {
+		return nil, fmt.Errorf("无法连接 LDAP 服务器 %s: %w", url, err)
+	}
+	conn.SetTimeout(10 * time.Second)
+	if err := conn.Bind(cfg.BindDN, cfg.BindPassword); err != nil {
+		conn.Close()
+		return nil, fmt.Errorf("管理员绑定失败(检查 Bind DN / 密码): %w", err)
+	}
+	return conn, nil
+}
+
+// ldapUserEntry LDAP 用户条目(导入预览与登录共用)
+type ldapUserEntry struct {
+	DN          string
+	Username    string
+	DisplayName string
+	Email       string
+}
+
+// searchLDAPUsers 按 ouDN(空用 baseDN)WholeSubtree 搜索用户,sizeLimit 上限
+func searchLDAPUsers(cfg *LDAPConfig, ouDN string, sizeLimit int) ([]ldapUserEntry, error) {
+	if ouDN == "" {
+		ouDN = cfg.BaseDN
+	}
+	conn, err := dialLDAP(cfg)
+	if err != nil {
+		return nil, err
+	}
+	defer conn.Close()
+
+	filter := cfg.UserFilter
+	if !strings.HasPrefix(filter, "(") {
+		filter = "(" + filter + ")"
+	}
+	req := ldap.NewSearchRequest(ouDN, ldap.ScopeWholeSubtree, ldap.NeverDerefAliases,
+		sizeLimit, 0, false, filter,
+		[]string{"dn", cfg.UsernameAttr, cfg.NameAttr, "cn", cfg.EmailAttr}, nil)
+	res, err := conn.Search(req)
+	if err != nil {
+		return nil, fmt.Errorf("搜索失败(BaseDN/过滤器可能有误): %w", err)
+	}
+
+	users := make([]ldapUserEntry, 0, len(res.Entries))
+	seen := map[string]bool{}
+	for _, e := range res.Entries {
+		u := ldapUserEntry{
+			DN:          e.DN,
+			Username:    e.GetAttributeValue(cfg.UsernameAttr),
+			DisplayName: e.GetAttributeValue(cfg.NameAttr),
+			Email:       e.GetAttributeValue(cfg.EmailAttr),
+		}
+		if u.DisplayName == "" {
+			u.DisplayName = e.GetAttributeValue("cn")
+		}
+		if u.Username == "" || seen[u.DN] {
+			continue // 无用户名属性的条目(如 ou 本身)跳过
+		}
+		seen[u.DN] = true
+		users = append(users, u)
+	}
+	return users, nil
+}
+
+// searchLDAPUserByUsername 登录用:按用户名搜索单个条目
+func searchLDAPUserByUsername(cfg *LDAPConfig, username string) (*ldapUserEntry, error) {
+	conn, err := dialLDAP(cfg)
+	if err != nil {
+		return nil, err
+	}
+	defer conn.Close()
+
+	filter := fmt.Sprintf("(&%s(%s=%s))", normalizeFilter(cfg.UserFilter),
+		cfg.UsernameAttr, ldap.EscapeFilter(username))
+	req := ldap.NewSearchRequest(cfg.BaseDN, ldap.ScopeWholeSubtree, ldap.NeverDerefAliases,
+		2, 0, false, filter,
+		[]string{"dn", cfg.UsernameAttr, cfg.NameAttr, "cn", cfg.EmailAttr}, nil)
+	res, err := conn.Search(req)
+	if err != nil {
+		return nil, err
+	}
+	if len(res.Entries) == 0 {
+		return nil, utils.ErrInvalidCredentials
+	}
+	if len(res.Entries) > 1 {
+		return nil, fmt.Errorf("LDAP 中存在多个匹配 %s 的用户", username)
+	}
+	e := res.Entries[0]
+	return &ldapUserEntry{
+		DN:          e.DN,
+		Username:    e.GetAttributeValue(cfg.UsernameAttr),
+		DisplayName: e.GetAttributeValue(cfg.NameAttr),
+		Email:       e.GetAttributeValue(cfg.EmailAttr),
+	}, nil
+}
+
+// verifyLDAPPassword 用户级验证:bind 到用户 DN 校验密码
+func verifyLDAPPassword(cfg *LDAPConfig, username, password string) (*ldapUserEntry, error) {
+	entry, err := searchLDAPUserByUsername(cfg, username)
+	if err != nil {
+		return nil, err
+	}
+	scheme := "ldap"
+	if cfg.UseSSL {
+		scheme = "ldaps"
+	}
+	conn, err := ldap.DialURL(fmt.Sprintf("%s://%s:%d", scheme, cfg.Host, cfg.Port),
+		ldap.DialWithDialer(netDialer()))
+	if err != nil {
+		return nil, err
+	}
+	defer conn.Close()
+	if err := conn.Bind(entry.DN, password); err != nil {
+		return nil, utils.ErrInvalidCredentials
+	}
+	return entry, nil
+}
+
+func normalizeFilter(f string) string {
+	if !strings.HasPrefix(f, "(") {
+		return "(" + f + ")"
+	}
+	return f
+}
+
+// TestLDAPConnection 测试连接:管理 bind + baseDN 校验 + 可选用户级验证
+func TestLDAPConnection(cfg *LDAPConfig, testUsername, testPassword string) map[string]interface{} {
+	if cfg.Host == "" || cfg.BindDN == "" || cfg.BaseDN == "" {
+		return map[string]interface{}{"success": false, "message": "请先填写服务器地址 / Bind DN / Base DN"}
+	}
+	// 表单密码为空回退已存密码
+	if cfg.BindPassword == "" {
+		cfg.BindPassword = GetLDAPConfig().BindPassword
+	}
+
+	conn, err := dialLDAP(cfg)
+	if err != nil {
+		return map[string]interface{}{"success": false, "message": err.Error()}
+	}
+	defer conn.Close()
+
+	// baseDN 可读性校验
+	req := ldap.NewSearchRequest(cfg.BaseDN, ldap.ScopeBaseObject, ldap.NeverDerefAliases,
+		1, 0, false, "(objectClass=*)", []string{"dn"}, nil)
+	if _, err := conn.Search(req); err != nil {
+		return map[string]interface{}{"success": false, "message": fmt.Sprintf("服务器连通,但 Base DN 搜索失败: %v", err)}
+	}
+
+	result := map[string]interface{}{
+		"success": true,
+		"message": fmt.Sprintf("连接成功:服务器可达,管理员绑定与 Base DN 校验通过 (%s)", cfg.BaseDN),
+	}
+	if testUsername != "" {
+		if testPassword == "" {
+			return map[string]interface{}{"success": false, "message": "请填写测试账号的密码"}
+		}
+		entry, err := verifyLDAPPassword(cfg, testUsername, testPassword)
+		if err != nil {
+			return map[string]interface{}{"success": false, "message": fmt.Sprintf("服务器连接正常,但用户「%s」验证失败: %v", testUsername, err)}
+		}
+		result["message"] = fmt.Sprintf("连接成功,用户「%s」验证通过 (DN: %s)", testUsername, entry.DN)
+		result["userInfo"] = map[string]string{
+			"dn": entry.DN, "username": entry.Username,
+			"displayName": entry.DisplayName, "email": entry.Email,
+		}
+	}
+	return result
+}
diff --git a/backend/services/ldap_import.go b/backend/services/ldap_import.go
new file mode 100644
index 0000000..9a6c13c
--- /dev/null
+++ b/backend/services/ldap_import.go
@@ -0,0 +1,108 @@
+package services
+
+import (
+	"time"
+
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
+	"opsxloki/repository"
+)
+
+// LDAPImportUser 批量导入请求中的用户条目(数据来自预览接口)
+type LDAPImportUser struct {
+	DN       string `json:"dn"`
+	Username string `json:"username" binding:"required"`
+	Nickname string `json:"nickname"`
+	Email    string `json:"email"`
+}
+
+// LDAPImportResult 导入结果(对齐 opsx-web-lite 契约)
+type LDAPImportResult struct {
+	SuccessCount int                      `json:"successCount"`
+	SkippedCount int                      `json:"skippedCount"`
+	UpdatedCount int                      `json:"updatedCount"`
+	FailedCount  int                      `json:"failedCount"`
+	FailedUsers  []map[string]interface{} `json:"failedUsers"`
+}
+
+// BatchImportLDAPUsers 批量导入 LDAP 用户:
+// 已存在且 LDAP 用户 → 跳过;本地同名 → 更新昵称并转 LDAP;否则新建(user 角色,密码占位)。
+func BatchImportLDAPUsers(users []LDAPImportUser) *LDAPImportResult {
+	result := &LDAPImportResult{FailedUsers: []map[string]interface{}{}}
+	db := repository.GetDB()
+
+	for _, in := range users {
+		if in.Username == "" {
+			continue
+		}
+		// 查找本地同名用户(读锁短持有;NextID/CreateUser 不可在持锁时调用)
+		db.RLock()
+		idx := -1
+		for i := range db.Users {
+			if db.Users[i].Username == in.Username {
+				idx = i
+				break
+			}
+		}
+		db.RUnlock()
+
+		if idx >= 0 {
+			db.Lock()
+			if db.Users[idx].AuthSource == "ldap" {
+				db.Unlock()
+				result.SkippedCount++
+				continue
+			}
+			db.Users[idx].AuthSource = "ldap" // 本地同名 → 转 LDAP 并同步昵称
+			if in.Nickname != "" {
+				db.Users[idx].Nickname = in.Nickname
+			}
+			db.Users[idx].UpdatedAt = time.Now()
+			db.RequestSave()
+			db.Unlock()
+			result.UpdatedCount++
+			continue
+		}
+
+		hash, err := crypto.HashPassword("ldap-user-" + in.Username + "-no-local-login")
+		if err != nil {
+			result.FailedCount++
+			result.FailedUsers = append(result.FailedUsers, map[string]interface{}{
+				"username": in.Username, "error": err.Error(),
+			})
+			continue
+		}
+		u := &models.User{
+			Username:   in.Username,
+			Password:   hash,
+			Nickname:   in.Nickname,
+			Role:       "user",
+			AuthSource: "ldap",
+		}
+		if err := db.CreateUser(u); err != nil {
+			result.FailedCount++
+			result.FailedUsers = append(result.FailedUsers, map[string]interface{}{
+				"username": in.Username, "error": err.Error(),
+			})
+			continue
+		}
+		result.SuccessCount++
+	}
+	return result
+}
+
+// SearchLDAPUsersForImport 预览入口(服务层薄封装,便于 controller 调用)
+func SearchLDAPUsersForImport(cfg *LDAPConfig, ouDN string) ([]map[string]interface{}, error) {
+	users, err := searchLDAPUsers(cfg, ouDN, 500)
+	if err != nil {
+		return nil, err
+	}
+	out := make([]map[string]interface{}, 0, len(users))
+	for _, u := range users {
+		out = append(out, map[string]interface{}{
+			"dn": u.DN, "username": u.Username,
+			"displayName": u.DisplayName, "email": u.Email,
+		})
+	}
+	return out, nil
+}
diff --git a/backend/services/log_policy.go b/backend/services/log_policy.go
new file mode 100644
index 0000000..9362d95
--- /dev/null
+++ b/backend/services/log_policy.go
@@ -0,0 +1,173 @@
+package services
+
+import (
+	"fmt"
+	"strings"
+	"time"
+
+	"opsxloki/models"
+	"opsxloki/repository"
+)
+
+func ListLogPolicyGroups() []models.LogPolicyGroup {
+	db := repository.GetDB()
+	db.RLock()
+	defer db.RUnlock()
+	groups := make([]models.LogPolicyGroup, len(db.LogPolicyGroups))
+	for i, group := range db.LogPolicyGroups {
+		groups[i] = group
+		groups[i].UserIDs = append([]uint(nil), group.UserIDs...)
+		groups[i].Labels = make(map[string]string, len(group.Labels))
+		for key, value := range group.Labels { groups[i].Labels[key] = value }
+	}
+	return groups
+}
+
+func validatePolicyGroup(db *repository.JsonDB, group models.LogPolicyGroup, excludeID uint) error {
+	group.Name = strings.TrimSpace(group.Name)
+	if group.Name == "" {
+		return fmt.Errorf("策略组名称必填")
+	}
+	if group.SourceID == 0 {
+		return fmt.Errorf("请选择数据源")
+	}
+	foundSource := false
+	for _, source := range db.LogSources {
+		if source.ID == group.SourceID {
+			foundSource = true
+			break
+		}
+	}
+	if !foundSource {
+		return fmt.Errorf("数据源不存在")
+	}
+	if len(group.UserIDs) == 0 {
+		return fmt.Errorf("请选择至少一个用户")
+	}
+	for key := range group.Labels {
+		if !ValidLogLabelName(key) {
+			return fmt.Errorf("无效标签名: %s", key)
+		}
+	}
+	seen := map[uint]bool{}
+	for _, id := range group.UserIDs {
+		if id == 0 || seen[id] {
+			return fmt.Errorf("用户 ID 无效或重复")
+		}
+		seen[id] = true
+		found := false
+		for _, user := range db.Users {
+			if user.ID == id && user.Role != "admin" {
+				found = true
+				break
+			}
+		}
+		if !found {
+			return fmt.Errorf("用户 %d 不存在或不是普通用户", id)
+		}
+	}
+	for _, other := range db.LogPolicyGroups {
+		if other.ID == excludeID || other.SourceID != group.SourceID {
+			continue
+		}
+		if other.Name == group.Name {
+			return fmt.Errorf("此数据源已有同名策略组")
+		}
+		for _, id := range other.UserIDs {
+			if seen[id] {
+				return fmt.Errorf("用户 %d 已属于此数据源的另一个策略组", id)
+			}
+		}
+	}
+	return nil
+}
+
+// Group membership replaces legacy per-user grants for the same source.
+func removeDirectGrants(db *repository.JsonDB, sourceID uint, userIDs []uint) {
+	members := map[uint]bool{}
+	for _, id := range userIDs {
+		members[id] = true
+	}
+	for i := range db.LogSources {
+		if db.LogSources[i].ID != sourceID {
+			continue
+		}
+		kept := db.LogSources[i].Access[:0]
+		for _, rule := range db.LogSources[i].Access {
+			if !members[rule.UserID] {
+				kept = append(kept, rule)
+			}
+		}
+		db.LogSources[i].Access = kept
+		return
+	}
+}
+
+func CreateLogPolicyGroup(group models.LogPolicyGroup) (*models.LogPolicyGroup, error) {
+	db := repository.GetDB()
+	id := db.NextID("logPolicyGroups")
+	db.Lock()
+	defer db.Unlock()
+	if err := validatePolicyGroup(db, group, 0); err != nil {
+		return nil, err
+	}
+	group.ID = id
+	group.Name = strings.TrimSpace(group.Name)
+	group.CreatedAt = time.Now()
+	group.UpdatedAt = group.CreatedAt
+	removeDirectGrants(db, group.SourceID, group.UserIDs)
+	db.LogPolicyGroups = append(db.LogPolicyGroups, group)
+	db.RequestSave()
+	return &group, nil
+}
+
+func UpdateLogPolicyGroup(id uint, group models.LogPolicyGroup) (*models.LogPolicyGroup, error) {
+	db := repository.GetDB()
+	db.Lock()
+	defer db.Unlock()
+	for i := range db.LogPolicyGroups {
+		if db.LogPolicyGroups[i].ID != id {
+			continue
+		}
+		if err := validatePolicyGroup(db, group, id); err != nil {
+			return nil, err
+		}
+		group.ID = id
+		group.Name = strings.TrimSpace(group.Name)
+		group.CreatedAt = db.LogPolicyGroups[i].CreatedAt
+		group.UpdatedAt = time.Now()
+		removeDirectGrants(db, group.SourceID, group.UserIDs)
+		db.LogPolicyGroups[i] = group
+		db.RequestSave()
+		return &group, nil
+	}
+	return nil, fmt.Errorf("策略组不存在")
+}
+
+func DeleteLogPolicyGroup(id uint) error {
+	db := repository.GetDB()
+	db.Lock()
+	defer db.Unlock()
+	for i := range db.LogPolicyGroups {
+		if db.LogPolicyGroups[i].ID == id {
+			db.LogPolicyGroups = append(db.LogPolicyGroups[:i], db.LogPolicyGroups[i+1:]...)
+			db.RequestSave()
+			return nil
+		}
+	}
+	return fmt.Errorf("策略组不存在")
+}
+
+func policyGroupAccess(groups []models.LogPolicyGroup, sourceID, userID uint) *models.LogSourceAccess {
+	for _, group := range groups {
+		if group.SourceID != sourceID {
+			continue
+		}
+		for _, id := range group.UserIDs {
+			if id == userID {
+				return &models.LogSourceAccess{UserID: userID, Labels: group.Labels}
+			}
+		}
+	}
+	return nil
+}
diff --git a/backend/services/log_query.go b/backend/services/log_query.go
new file mode 100644
index 0000000..b05005c
--- /dev/null
+++ b/backend/services/log_query.go
@@ -0,0 +1,780 @@
+package services
+
+// 日志查询代理 — 后端代表前端访问 Loki HTTP API。
+// cluster-svc 型经 kube-apiserver service proxy(不依赖 ClusterIP 直通与集群 DNS);
+// url 型直连。契约参照 aiops 日志中心(query/labels/values/histogram + cursor 翻页)。
+import (
+	"context"
+	"crypto/tls"
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"os/exec"
+	"regexp"
+	"sort"
+	"strconv"
+	"strings"
+	"time"
+
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
+	"opsxloki/repository"
+)
+
+const maxLogQueryLimit = 1000
+
+// ==================== 数据源 CRUD ====================
+
+func GetLogSource(id uint) *models.LogSource {
+	db := repository.GetDB()
+	db.RLock()
+	defer db.RUnlock()
+	for i := range db.LogSources {
+		if db.LogSources[i].ID == id {
+			s := db.LogSources[i]
+			return &s
+		}
+	}
+	return nil
+}
+
+func ListLogSources() []map[string]interface{} {
+	db := repository.GetDB()
+	db.RLock()
+	defer db.RUnlock()
+	out := make([]map[string]interface{}, 0, len(db.LogSources))
+	for i := range db.LogSources {
+		out = append(out, db.LogSources[i].Sanitized())
+	}
+	return out
+}
+
+func ListVisibleLogSources(userID uint, admin bool) []map[string]interface{} {
+	db := repository.GetDB()
+	db.RLock()
+	defer db.RUnlock()
+	out := make([]map[string]interface{}, 0)
+	for i := range db.LogSources {
+		s := &db.LogSources[i]
+		if admin || policyGroupAccess(db.LogPolicyGroups, s.ID, userID) != nil || sourceAccess(s, userID) != nil {
+			item := s.Sanitized()
+			if !admin {
+				item = map[string]interface{}{"id": s.ID, "name": s.Name, "isDefault": s.IsDefault}
+			}
+			out = append(out, item)
+		}
+	}
+	return out
+}
+
+func sourceAccess(src *models.LogSource, userID uint) *models.LogSourceAccess {
+	for i := range src.Access {
+		if src.Access[i].UserID == userID {
+			return &src.Access[i]
+		}
+	}
+	return nil
+}
+
+var labelNamePattern = regexp.MustCompile(`^[a-zA-Z_][a-zA-Z0-9_]*$`)
+
+func ValidLogLabelName(name string) bool { return labelNamePattern.MatchString(name) }
+
+// AuthorizedLogQuery constrains the Loki stream selector server-side. Non-admins must be explicitly granted access.
+func AuthorizedLogQuery(src *models.LogSource, userID uint, admin bool, query string) (string, error) {
+	if admin {
+		return query, nil
+	}
+	db := repository.GetDB()
+	var access *models.LogSourceAccess
+	if db != nil {
+		db.RLock()
+		access = policyGroupAccess(db.LogPolicyGroups, src.ID, userID)
+		db.RUnlock()
+	}
+	if access == nil {
+		access = sourceAccess(src, userID)
+	}
+	if access == nil {
+		return "", fmt.Errorf("无权查询此数据源")
+	}
+	q := strings.TrimSpace(query)
+	if !strings.HasPrefix(q, "{") {
+		return "", fmt.Errorf("普通用户查询必须以日志流选择器开头")
+	}
+	close := strings.IndexByte(q, '}')
+	if close < 0 || strings.Contains(q[close+1:], "{") {
+		return "", fmt.Errorf("查询只能包含一个日志流选择器")
+	}
+	if len(access.Labels) == 0 {
+		return q, nil
+	}
+	keys := make([]string, 0, len(access.Labels))
+	for k := range access.Labels {
+		if !labelNamePattern.MatchString(k) {
+			return "", fmt.Errorf("访问策略包含无效标签名")
+		}
+		keys = append(keys, k)
+	}
+	sort.Strings(keys)
+	matchers := make([]string, 0, len(keys))
+	for _, k := range keys {
+		v, _ := json.Marshal(access.Labels[k])
+		matchers = append(matchers, k+"="+string(v))
+	}
+	inner := strings.TrimSpace(q[1:close])
+	if inner != "" {
+		inner += ","
+	}
+	return "{" + inner + strings.Join(matchers, ",") + "}" + q[close+1:], nil
+}
+
+func CreateLogSource(s *models.LogSource) (*models.LogSource, error) {
+	if err := encryptSourceCredentials(s); err != nil {
+		return nil, err
+	}
+	db := repository.GetDB()
+	newID := db.NextID("logSources")
+	db.Lock()
+	defer db.Unlock()
+	s.ID = newID
+	if s.IsDefault {
+		for i := range db.LogSources {
+			db.LogSources[i].IsDefault = false
+		}
+	}
+	// 首个数据源自动设默认
+	if len(db.LogSources) == 0 {
+		s.IsDefault = true
+	}
+	db.LogSources = append(db.LogSources, *s)
+	db.RequestSave()
+	return s, nil
+}
+
+func encryptSourceCredentials(s *models.LogSource) error {
+	if s.BasicPass != "" {
+		v, err := crypto.EncryptField(s.BasicPass)
+		if err != nil {
+			return err
+		}
+		s.BasicPass = v
+	}
+	if s.BearerToken != "" {
+		v, err := crypto.EncryptField(s.BearerToken)
+		if err != nil {
+			return err
+		}
+		s.BearerToken = v
+	}
+	for name, value := range s.Headers {
+		if !validSourceHeader(name) {
+			return fmt.Errorf("自定义 Header 名称无效: %s", name)
+		}
+		v, err := crypto.EncryptField(value)
+		if err != nil {
+			return err
+		}
+		s.Headers[name] = v
+	}
+	return nil
+}
+
+func validSourceHeader(name string) bool {
+	if name == "" || strings.EqualFold(name, "Host") || strings.EqualFold(name, "Authorization") {
+		return false
+	}
+	for _, c := range name {
+		if !(c >= 'a' && c <= 'z' || c >= 'A' && c <= 'Z' || c >= '0' && c <= '9' || c == '-') {
+			return false
+		}
+	}
+	return true
+}
+
+func UpdateLogSource(id uint, patch map[string]interface{}) error {
+	db := repository.GetDB()
+	db.Lock()
+	defer db.Unlock()
+	for i := range db.LogSources {
+		if db.LogSources[i].ID != id {
+			continue
+		}
+		if v, ok := patch["name"].(string); ok && v != "" {
+			db.LogSources[i].Name = v
+		}
+		if v, ok := patch["namespace"].(string); ok {
+			db.LogSources[i].Namespace = v
+		}
+		if v, ok := patch["service"].(string); ok {
+			db.LogSources[i].Service = v
+		}
+		if v, ok := patch["port"].(float64); ok {
+			db.LogSources[i].Port = int(v)
+		}
+		if v, ok := patch["url"].(string); ok {
+			db.LogSources[i].URL = v
+		}
+		if v, ok := patch["authType"].(string); ok {
+			db.LogSources[i].AuthType = v
+		}
+		if v, ok := patch["basicUser"].(string); ok {
+			db.LogSources[i].BasicUser = v
+		}
+		if v, ok := patch["bearerToken"].(string); ok {
+			if v != "" {
+				enc, err := crypto.EncryptField(v)
+				if err != nil {
+					return err
+				}
+				db.LogSources[i].BearerToken = enc
+			}
+		}
+		if v, ok := patch["skipTLSVerify"].(bool); ok {
+			db.LogSources[i].SkipTLSVerify = v
+		}
+		if raw, ok := patch["headers"]; ok {
+			data, err := json.Marshal(raw)
+			if err != nil {
+				return err
+			}
+			var headers map[string]string
+			if err := json.Unmarshal(data, &headers); err != nil {
+				return err
+			}
+			for name, value := range headers {
+				if !validSourceHeader(name) {
+					return fmt.Errorf("自定义 Header 名称无效: %s", name)
+				}
+				if value == "" {
+					if old, ok := db.LogSources[i].Headers[name]; ok {
+						headers[name] = old
+					}
+					continue
+				}
+				enc, err := crypto.EncryptField(value)
+				if err != nil {
+					return err
+				}
+				headers[name] = enc
+			}
+			db.LogSources[i].Headers = headers
+		}
+		if v, ok := patch["basicPass"].(string); ok && v != "" {
+			if enc, err := crypto.EncryptField(v); err == nil {
+				db.LogSources[i].BasicPass = enc
+			}
+		}
+		if v, ok := patch["isDefault"].(bool); ok && v {
+			for j := range db.LogSources {
+				db.LogSources[j].IsDefault = db.LogSources[j].ID == id
+			}
+		}
+		if raw, ok := patch["access"]; ok {
+			data, err := json.Marshal(raw)
+			if err != nil {
+				return err
+			}
+			var access []models.LogSourceAccess
+			if err := json.Unmarshal(data, &access); err != nil {
+				return err
+			}
+			if err := ValidateSourceAccess(access); err != nil {
+				return err
+			}
+			db.LogSources[i].Access = access
+		}
+		db.LogSources[i].UpdatedAt = time.Now()
+		db.RequestSave()
+		return nil
+	}
+	return fmt.Errorf("数据源不存在")
+}
+
+func ValidateSourceAccess(access []models.LogSourceAccess) error {
+	seen := map[uint]bool{}
+	for _, rule := range access {
+		if rule.UserID == 0 || seen[rule.UserID] {
+			return fmt.Errorf("访问策略的用户 ID 无效或重复")
+		}
+		seen[rule.UserID] = true
+		for k := range rule.Labels {
+			if !labelNamePattern.MatchString(k) {
+				return fmt.Errorf("访问策略包含无效标签名: %s", k)
+			}
+		}
+	}
+	return nil
+}
+
+func DeleteLogSource(id uint) error {
+	db := repository.GetDB()
+	db.Lock()
+	defer db.Unlock()
+	for i := range db.LogSources {
+		if db.LogSources[i].ID == id {
+			db.LogSources = append(db.LogSources[:i], db.LogSources[i+1:]...)
+			groups := db.LogPolicyGroups[:0]
+			for _, group := range db.LogPolicyGroups {
+				if group.SourceID != id {
+					groups = append(groups, group)
+				}
+			}
+			db.LogPolicyGroups = groups
+			db.RequestSave()
+			return nil
+		}
+	}
+	return fmt.Errorf("数据源不存在")
+}
+
+// EnsureLogSourceForDeployment 部署成功后自动注册查询数据源(host-binary→url;k8s→cluster-svc)
+func EnsureLogSourceForDeployment(d *models.LokiDeployment) {
+	if d == nil || d.Endpoint == "" {
+		return
+	}
+	db := repository.GetDB()
+	db.RLock()
+	for i := range db.LogSources {
+		if db.LogSources[i].Name == d.Name {
+			db.RUnlock()
+			return
+		}
+	}
+	db.RUnlock()
+
+	svc := "loki"
+	port := 3100
+	src := &models.LogSource{
+		Name: d.Name, TargetType: "cluster-svc",
+		ClusterID: d.ClusterID, Namespace: d.Namespace, Service: svc, Port: port,
+		AuthType: "none",
+	}
+	if d.Mode == "host-binary" {
+		src.TargetType = "url"
+		src.URL = d.Endpoint
+		src.ClusterID = nil
+	}
+	_, _ = CreateLogSource(src)
+}
+
+// ==================== Loki HTTP 访问 ====================
+
+// lokiProxyGET 对数据源执行 GET;cluster-svc 走 kubectl --raw service proxy。
+func lokiProxyGET(ctx context.Context, src *models.LogSource, path string, query url.Values) ([]byte, int, error) {
+	// cluster-svc:kubectl get --raw /api/v1/namespaces/{ns}/services/{svc}:{port}/proxy{path}?q
+	if src.TargetType == "cluster-svc" {
+		db := repository.GetDB()
+		db.RLock()
+		var cluster *models.Cluster
+		for i := range db.Clusters {
+			if src.ClusterID != nil && db.Clusters[i].ID == *src.ClusterID {
+				c := db.Clusters[i]
+				cluster = &c
+				break
+			}
+		}
+		db.RUnlock()
+		if cluster == nil {
+			return nil, 500, fmt.Errorf("数据源关联的集群不存在")
+		}
+		env, cleanup, err := kubeconfigEnv(cluster)
+		if err != nil {
+			return nil, 500, err
+		}
+		defer cleanup()
+
+		proxyPath := fmt.Sprintf("/api/v1/namespaces/%s/services/%s:%d/proxy%s",
+			src.Namespace, src.Service, src.Port, path)
+		full := proxyPath
+		if qs := query.Encode(); qs != "" {
+			full += "?" + qs
+		}
+		cmd := exec.CommandContext(ctx, "kubectl", "get", "--raw", full)
+		cmd.Env = env
+		out, err := cmd.CombinedOutput()
+		if err != nil {
+			return nil, 502, fmt.Errorf("kubectl 代理查询失败: %v\n%s", err, truncateStr(string(out), 300))
+		}
+		return out, 200, nil
+	}
+
+	// url 直连
+	if src.URL == "" {
+		return nil, 500, fmt.Errorf("数据源未配置访问地址")
+	}
+	full := strings.TrimSuffix(src.URL, "/") + path
+	if qs := query.Encode(); qs != "" {
+		full += "?" + qs
+	}
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet, full, nil)
+	if err != nil {
+		return nil, 500, err
+	}
+	applyLokiAuth(req, src)
+	client := &http.Client{Timeout: 60 * time.Second, Transport: &http.Transport{
+		TLSClientConfig: &tls.Config{InsecureSkipVerify: src.SkipTLSVerify},
+	}}
+	resp, err := client.Do(req)
+	if err != nil {
+		return nil, 502, err
+	}
+	defer resp.Body.Close()
+	body, err := io.ReadAll(io.LimitReader(resp.Body, 32<<20))
+	if err != nil {
+		return nil, 502, err
+	}
+	if resp.StatusCode >= 400 {
+		return body, resp.StatusCode, fmt.Errorf("Loki 返回 HTTP %d: %s", resp.StatusCode, truncateStr(string(body), 300))
+	}
+	return body, resp.StatusCode, nil
+}
+
+func applyLokiAuth(req *http.Request, src *models.LogSource) {
+	switch src.AuthType {
+	case "basic":
+		if pass, err := DecryptCred(src.BasicPass); err == nil {
+			req.Header.Set("Authorization", "Basic "+
+				base64.StdEncoding.EncodeToString([]byte(src.BasicUser+":"+pass)))
+		}
+	case "bearer":
+		if token, err := DecryptCred(src.BearerToken); err == nil {
+			req.Header.Set("Authorization", "Bearer "+token)
+		}
+	}
+	for name, encrypted := range src.Headers {
+		if validSourceHeader(name) {
+			if value, err := DecryptCred(encrypted); err == nil {
+				req.Header.Set(name, value)
+			}
+		}
+	}
+}
+
+func truncateStr(s string, n int) string {
+	if len(s) <= n {
+		return s
+	}
+	return s[:n] + "..."
+}
+
+// ==================== 查询实现(契约对齐 aiops) ====================
+
+type LogEntryRow struct {
+	Timestamp   string            `json:"timestamp"`
+	TimestampNs string            `json:"timestampNs"`
+	Level       string            `json:"level"`
+	Message     string            `json:"message"`
+	Labels      map[string]string `json:"labels"`
+}
+
+type LogQueryResult struct {
+	Entries    []LogEntryRow `json:"entries"`
+	HasMore    bool          `json:"hasMore"`
+	NextCursor string        `json:"nextCursor"`
+}
+
+// QueryLokiLogs 日志查询:flatten streams → 统一行;cursor(最后一条纳秒时间戳)向后翻页
+func QueryLokiLogs(ctx context.Context, src *models.LogSource, query string, start, end int64, limit int, direction, cursor string) (*LogQueryResult, error) {
+	if limit <= 0 {
+		limit = 200
+	}
+	if limit > maxLogQueryLimit {
+		limit = maxLogQueryLimit
+	}
+	if direction == "" {
+		direction = "backward"
+	}
+	if end <= 0 {
+		end = time.Now().UnixNano()
+	}
+	if start <= 0 {
+		start = end - int64(time.Hour) // 默认最近 1 小时
+	}
+	if cursor != "" {
+		if c, err := strconv.ParseInt(cursor, 10, 64); err == nil {
+			if direction == "forward" {
+				start = c + 1
+			} else {
+				end = c - 1
+			}
+		}
+	}
+
+	q := url.Values{}
+	q.Set("query", query)
+	q.Set("start", strconv.FormatInt(start, 10))
+	q.Set("end", strconv.FormatInt(end, 10))
+	q.Set("limit", strconv.Itoa(limit))
+	q.Set("direction", direction)
+
+	body, _, err := lokiProxyGET(ctx, src, "/loki/api/v1/query_range", q)
+	if err != nil {
+		return nil, err
+	}
+	var resp struct {
+		Status string `json:"status"`
+		Data   struct {
+			ResultType string `json:"resultType"`
+			Result     []struct {
+				Stream map[string]string `json:"stream"`
+				Values [][2]string       `json:"values"`
+			} `json:"result"`
+		} `json:"data"`
+	}
+	if err := json.Unmarshal(body, &resp); err != nil {
+		return nil, fmt.Errorf("解析 Loki 响应失败: %w", err)
+	}
+
+	entries := make([]LogEntryRow, 0, limit)
+	var lastTs string
+	for _, stream := range resp.Data.Result {
+		for _, v := range stream.Values {
+			entries = append(entries, LogEntryRow{
+				Timestamp:   formatLokiTimestamp(v[0]),
+				TimestampNs: v[0],
+				Level:       detectLevel(stream.Stream, v[1]),
+				Message:     v[1],
+				Labels:      stream.Stream,
+			})
+		}
+	}
+	sort.SliceStable(entries, func(i, j int) bool {
+		a, _ := strconv.ParseInt(entries[i].TimestampNs, 10, 64)
+		b, _ := strconv.ParseInt(entries[j].TimestampNs, 10, 64)
+		if direction == "forward" {
+			return a < b
+		}
+		return a > b
+	})
+	if len(entries) > limit {
+		entries = entries[:limit]
+	}
+	if len(entries) > 0 {
+		lastTs = entries[len(entries)-1].TimestampNs
+	}
+
+	nextCursor := ""
+	if len(entries) >= limit && lastTs != "" {
+		if ts, err := strconv.ParseInt(strings.Split(lastTs, ".")[0], 10, 64); err == nil {
+			nextCursor = strconv.FormatInt(ts, 10)
+		}
+	}
+	return &LogQueryResult{Entries: entries, HasMore: nextCursor != "", NextCursor: nextCursor}, nil
+}
+
+// formatLokiTimestamp Loki 时间串(纳秒字符串/科学计数法)→ RFC3339
+func formatLokiTimestamp(ts string) string {
+	if i := strings.IndexAny(ts, ".eE"); i > 0 {
+		ts = ts[:i]
+	}
+	n, err := strconv.ParseInt(ts, 10, 64)
+	if err != nil {
+		return ts
+	}
+	// 自适应纳秒/微秒/毫秒/秒
+	switch {
+	case n > 1e18:
+		return time.Unix(0, n).Format(time.RFC3339)
+	case n > 1e15:
+		return time.Unix(0, n*1e3).Format(time.RFC3339)
+	case n > 1e12:
+		return time.Unix(0, n*1e6).Format(time.RFC3339)
+	case n > 1e9:
+		return time.Unix(0, n*1e9).Format(time.RFC3339)
+	default:
+		return time.Unix(n, 0).Format(time.RFC3339)
+	}
+}
+
+// detectLevel 优先取 level 标签;否则按行内容推断
+func detectLevel(labels map[string]string, line string) string {
+	if lv, ok := labels["level"]; ok && lv != "" {
+		return strings.ToLower(lv)
+	}
+	l := strings.ToLower(line)
+	for _, p := range []string{"error", "err", "fatal", "panic"} {
+		if strings.Contains(l, p) {
+			return "error"
+		}
+	}
+	if strings.Contains(l, "warn") {
+		return "warn"
+	}
+	return "info"
+}
+
+// LokiLabels 标签名列表
+func LokiLabels(ctx context.Context, src *models.LogSource, start, end int64) ([]string, error) {
+	q := url.Values{}
+	if end > 0 {
+		q.Set("end", strconv.FormatInt(end, 10))
+	}
+	if start > 0 {
+		q.Set("start", strconv.FormatInt(start, 10))
+	}
+	body, _, err := lokiProxyGET(ctx, src, "/loki/api/v1/labels", q)
+	if err != nil {
+		return nil, err
+	}
+	var resp struct {
+		Data []string `json:"data"`
+	}
+	if err := json.Unmarshal(body, &resp); err != nil {
+		return nil, err
+	}
+	return resp.Data, nil
+}
+
+// LokiLabelValues 标签值列表(query 只取 {...} selector 部分)
+func LokiLabelValues(ctx context.Context, src *models.LogSource, name, selector string, start, end int64) ([]string, error) {
+	q := url.Values{}
+	if s := extractStreamSelector(selector); s != "" && s != "{}" {
+		q.Set("query", s)
+	}
+	if end > 0 {
+		q.Set("end", strconv.FormatInt(end, 10))
+	}
+	if start > 0 {
+		q.Set("start", strconv.FormatInt(start, 10))
+	}
+	body, _, err := lokiProxyGET(ctx, src, "/loki/api/v1/label/"+url.PathEscape(name)+"/values", q)
+	if err != nil {
+		return nil, err
+	}
+	var resp struct {
+		Data []string `json:"data"`
+	}
+	if err := json.Unmarshal(body, &resp); err != nil {
+		return nil, err
+	}
+	return resp.Data, nil
+}
+
+// extractStreamSelector 从 LogQL 中提取 {...} 部分(labels API 仅接受 stream selector)
+func extractStreamSelector(query string) string {
+	i := strings.Index(query, "{")
+	if i < 0 {
+		return ""
+	}
+	j := strings.Index(query[i:], "}")
+	if j < 0 {
+		return ""
+	}
+	return query[i : i+j+1]
+}
+
+// LokiHistogram 日志量直方图:服务端包 sum(count_over_time(q[step]))
+func LokiHistogram(ctx context.Context, src *models.LogSource, query string, start, end int64) ([]map[string]interface{}, error) {
+	if end <= 0 {
+		end = time.Now().UnixNano()
+	}
+	if start <= 0 {
+		start = end - int64(time.Hour)
+	}
+	span := end - start
+	step := pickHistogramStep(span)
+	wrapped := fmt.Sprintf("sum(count_over_time(%s[%s]))", query, step)
+
+	q := url.Values{}
+	q.Set("query", wrapped)
+	q.Set("start", strconv.FormatInt(start, 10))
+	q.Set("end", strconv.FormatInt(end, 10))
+	q.Set("step", step)
+	body, _, err := lokiProxyGET(ctx, src, "/loki/api/v1/query_range", q)
+	if err != nil {
+		return nil, err
+	}
+	var resp struct {
+		Data struct {
+			Result []struct {
+				Values [][2]interface{} `json:"values"`
+			} `json:"result"`
+		} `json:"data"`
+	}
+	if err := json.Unmarshal(body, &resp); err != nil {
+		return nil, err
+	}
+	buckets := []map[string]interface{}{}
+	if len(resp.Data.Result) > 0 {
+		for _, v := range resp.Data.Result[0].Values {
+			// metric API 的 ts 为秒级浮点数(如 1.79e+09),query 日志的才是纳秒字符串
+			tsf, _ := strconv.ParseFloat(fmt.Sprintf("%v", v[0]), 64)
+			cnt, _ := strconv.ParseFloat(fmt.Sprintf("%v", v[1]), 64)
+			buckets = append(buckets, map[string]interface{}{
+				"timestamp": time.Unix(int64(tsf), 0).Format(time.RFC3339),
+				"count":     int64(cnt),
+			})
+		}
+	}
+	return buckets, nil
+}
+
+// pickHistogramStep 按时间跨度自适应步长(aiops 同款)
+func pickHistogramStep(spanNano int64) string {
+	span := time.Duration(spanNano)
+	switch {
+	case span <= 15*time.Minute:
+		return "30s"
+	case span <= time.Hour:
+		return "1m"
+	case span <= 6*time.Hour:
+		return "5m"
+	case span <= 24*time.Hour:
+		return "15m"
+	case span <= 7*24*time.Hour:
+		return "1h"
+	default:
+		return "6h"
+	}
+}
+
+// DeploymentReady 部署级就绪探测:按部署名匹配自动注册的数据源,经其访问 Loki /ready
+func DeploymentReady(ctx context.Context, deploymentName string) (bool, string) {
+	if deploymentName == "" {
+		return false, ""
+	}
+	db := repository.GetDB()
+	db.RLock()
+	var src *models.LogSource
+	for i := range db.LogSources {
+		if db.LogSources[i].Name == deploymentName {
+			s := db.LogSources[i]
+			src = &s
+			break
+		}
+	}
+	db.RUnlock()
+	if src == nil {
+		return false, "未注册数据源"
+	}
+	if LokiReady(ctx, src) {
+		return true, ""
+	}
+	return false, "Loki 未就绪"
+}
+
+// LokiReady Loki /ready 探活(部署卡片/查询页状态点)
+func LokiReady(ctx context.Context, src *models.LogSource) bool {
+	body, code, err := lokiProxyGET(ctx, src, "/ready", nil)
+	if err != nil || code != 200 {
+		return false
+	}
+	return strings.Contains(strings.ToLower(string(body)), "ready")
+}
+
+// TestLogSource 数据源连通性(/loki/api/v1/labels 探活)
+func TestLogSource(ctx context.Context, src *models.LogSource) map[string]interface{} {
+	labels, err := LokiLabels(ctx, src, 0, 0)
+	if err != nil {
+		return map[string]interface{}{"success": false, "message": err.Error()}
+	}
+	return map[string]interface{}{
+		"success": true,
+		"message": fmt.Sprintf("连接成功,发现 %d 个标签", len(labels)),
+		"labels":  labels,
+	}
+}
diff --git a/backend/services/log_query_test.go b/backend/services/log_query_test.go
new file mode 100644
index 0000000..3fee85b
--- /dev/null
+++ b/backend/services/log_query_test.go
@@ -0,0 +1,42 @@
+package services
+
+import (
+	"opsxloki/models"
+	"strings"
+	"testing"
+)
+
+func TestAuthorizedLogQuery(t *testing.T) {
+	src := &models.LogSource{Access: []models.LogSourceAccess{{UserID: 7, Labels: map[string]string{"namespace": "prod", "pod": "loki-0"}}}}
+	if _, err := AuthorizedLogQuery(src, 8, false, `{app="api"}`); err == nil {
+		t.Fatal("ungranted user queried source")
+	}
+	q, err := AuthorizedLogQuery(src, 7, false, `{app="api"} |= "error"`)
+	if err != nil {
+		t.Fatal(err)
+	}
+	for _, part := range []string{`app="api"`, `namespace="prod"`, `pod="loki-0"`, `|= "error"`} {
+		if !strings.Contains(q, part) {
+			t.Fatalf("missing %q in %q", part, q)
+		}
+	}
+	if _, err := AuthorizedLogQuery(src, 7, false, `sum(count_over_time({app="api"}[1m]))`); err == nil {
+		t.Fatal("metric query bypassed stream restriction")
+	}
+	if _, err := AuthorizedLogQuery(src, 7, false, `{app="api"} or {app="other"}`); err == nil {
+		t.Fatal("second selector bypassed stream restriction")
+	}
+}
+
+func TestPolicyGroupAccess(t *testing.T) {
+	groups := []models.LogPolicyGroup{{SourceID: 2, Labels: map[string]string{"namespace": "log", "app": "api"}, UserIDs: []uint{7, 8}}}
+	if got := policyGroupAccess(groups, 2, 8); got == nil || got.Labels["app"] != "api" {
+		t.Fatal("group member should inherit exact label scope")
+	}
+	if got := policyGroupAccess(groups, 3, 8); got != nil {
+		t.Fatal("group must not grant access to another source")
+	}
+	if got := policyGroupAccess(groups, 2, 9); got != nil {
+		t.Fatal("nonmember gained access")
+	}
+}
diff --git a/backend/services/loki_deployer.go b/backend/services/loki_deployer.go
index 66ad316..0aed55c 100644
--- a/backend/services/loki_deployer.go
+++ b/backend/services/loki_deployer.go
@@ -10,8 +10,8 @@ import (
 	"strings"
 	"text/template"
 
-	"lokideploy/models"
-	"lokideploy/pkg/crypto"
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
 )
 
 // LokiDeployer 负责 Loki 的三种部署模式：k8s-helm / k8s-yaml / host-binary
@@ -34,16 +34,30 @@ func (d *LokiDeployer) Deploy(ctx context.Context) error {
 		d.log("warn", err.Error(), "")
 	}
 
+	var err error
 	switch d.deployment.Mode {
 	case "k8s-helm":
-		return d.deployHelm(ctx)
+		err = d.deployHelm(ctx)
 	case "k8s-yaml":
-		return d.deployYaml(ctx)
+		err = d.deployYaml(ctx)
 	case "host-binary":
-		return d.deployBinary(ctx)
+		err = d.deployBinary(ctx)
 	default:
 		return fmt.Errorf("unsupported deployment mode: %s", d.deployment.Mode)
 	}
+	if err != nil {
+		return err
+	}
+
+	// Loki 就绪后,按需同环境部署 Grafana(数据源自动指向本 Loki)
+	if d.deployment.GrafanaEnabled {
+		g := &GrafanaDeployer{deployment: d.deployment, log: d.log}
+		if gerr := g.Deploy(ctx); gerr != nil {
+			d.log("error", fmt.Sprintf("Grafana deployment failed: %v", gerr), "")
+			return fmt.Errorf("grafana deployment failed: %w", gerr)
+		}
+	}
+	return nil
 }
 
 // ==================== Helm 部署 (grafana/loki v6+) ====================
@@ -169,12 +183,7 @@ func (d *LokiDeployer) deployBinary(ctx context.Context) error {
 		return fmt.Errorf("please select target host")
 	}
 	host := d.deployment.Host
-	password := host.Password
-	if strings.HasPrefix(password, "ENC:") {
-		password, _ = DecryptCred(password)
-	}
-
-	client, err := NewSSHClient(host.HostIP, host.Port, host.User, password)
+	client, err := NewSSHClientWithAuth(HostSSHAuth(host))
 	if err != nil {
 		return err
 	}
@@ -696,7 +705,6 @@ common:
     filesystem:
       chunks_directory: /var/lib/loki/chunks
       rules_directory: /var/lib/loki/rules
-      admin_api_directory: /var/lib/loki/admin
   replication_factor: {{ .ReplicationFactor }}
   ring:
     instance_addr: {{ .RingInstanceAddr }}
@@ -730,20 +738,11 @@ ingester:
   chunk_target_size: 1048576
   chunk_encoding: snappy
   max_chunk_age: 2h
-  max_transfer_retries: 0
   autoforget_unhealthy: true
 
 querier:
   max_concurrent: 10
   query_ingesters_within: 2h
-  engine:
-    timeout: 3m
-    max_look_back_period: 30s
-
-query_frontend:
-  max_outstanding_per_tenant: 4096
-  compress_responses: true
-  scheduler_address: ""
 
 query_scheduler:
   max_outstanding_requests_per_tenant: 4096
@@ -786,6 +785,9 @@ schema_config:
 ruler:
   storage:
     type: {{ .RulerStoreType }}
+{{- if .RulerStorageBlock }}
+{{ .RulerStorageBlock }}
+{{- end }}
 {{- if eq .RulerStoreType "local" }}
     local:
       directory: /var/lib/loki/rules
@@ -802,12 +804,7 @@ frontend:
   max_outstanding_per_tenant: 4096
   compress_responses: true
 
-frontend_worker:
-  parallelism: 10
-
-table_manager:
-  retention_deletes_enabled: true
-  retention_period: {{ .RetentionPeriod }}h
+frontend_worker: {}
 
 chunk_store_config:
   chunk_cache_config:
@@ -831,6 +828,7 @@ type lokiConfigData struct {
 	RingInstanceAddr   string // 单副本 127.0.0.1；多副本 0.0.0.0（须可被对端寻址）
 	RingKVStore        string // 单副本 inmemory；多副本 memberlist
 	MemberlistBlock    string // 多副本时非空，注入 memberlist 顶级配置
+	RulerStorageBlock  string // 对象存储时非空，注入 ruler.storage.s3/gcs/azure 嵌套配置
 }
 
 func (d *LokiDeployer) generateLokiConfig() string {
@@ -870,7 +868,7 @@ func (d *LokiDeployer) generateLokiConfig() string {
 		ringStore = "memberlist"
 		ns := d.deployment.Namespace
 		if ns == "" {
-			ns = "loki"
+			ns = "log"
 		}
 		memberlistBlock = fmt.Sprintf(`memberlist:
   join_members:
@@ -892,6 +890,7 @@ func (d *LokiDeployer) generateLokiConfig() string {
 		RingInstanceAddr:   ringAddr,
 		RingKVStore:        ringStore,
 		MemberlistBlock:    memberlistBlock,
+		RulerStorageBlock:  d.buildRulerStorageBlock(),
 	}
 
 	tmpl, err := template.New("loki-config").Parse(lokiConfigTemplate)
@@ -962,6 +961,63 @@ func (d *LokiDeployer) buildStorageConfigBlock() string {
 	}
 }
 
+// buildRulerStorageBlock 生成 ruler.storage 下与存储类型同名的嵌套配置
+// (Loki 3.x 的 ruler 存储客户端不回退读取 storage_config,缺少此块会以空 bucket 启动失败)
+func (d *LokiDeployer) buildRulerStorageBlock() string {
+	if d.deployment.StorageConfig == nil {
+		return ""
+	}
+	sc := d.deployment.StorageConfig
+	switch sc.StorageType {
+	case "s3":
+		endpoint := sc.Endpoint
+		if endpoint == "" {
+			endpoint = fmt.Sprintf("s3.%s.amazonaws.com", sc.Region)
+		}
+		insecure := "false"
+		if sc.Insecure {
+			insecure = "true"
+		}
+		return fmt.Sprintf(`    s3:
+      s3: s3://%s/%s
+      endpoint: %s
+      region: %s
+      access_key_id: %s
+      secret_access_key: %s
+      insecure: %s
+      s3forcepathstyle: true`, sc.Bucket, sc.PathPrefix, endpoint, sc.Region, sc.AccessKey, sc.SecretKey, insecure)
+	case "oss":
+		return fmt.Sprintf(`    s3:
+      s3: s3://%s/%s
+      endpoint: %s
+      access_key_id: %s
+      secret_access_key: %s
+      s3forcepathstyle: true`, sc.Bucket, sc.PathPrefix, sc.Endpoint, sc.AccessKey, sc.SecretKey)
+	case "minio":
+		insecure := "false"
+		if sc.Insecure {
+			insecure = "true"
+		}
+		return fmt.Sprintf(`    s3:
+      s3: s3://%s/%s
+      endpoint: %s
+      access_key_id: %s
+      secret_access_key: %s
+      insecure: %s
+      s3forcepathstyle: true`, sc.Bucket, sc.PathPrefix, sc.Endpoint, sc.AccessKey, sc.SecretKey, insecure)
+	case "gcs":
+		return fmt.Sprintf(`    gcs:
+      bucket_name: %s`, sc.Bucket)
+	case "azure":
+		return fmt.Sprintf(`    azure:
+      container_name: %s
+      account_name: %s
+      account_key: %s`, sc.Bucket, sc.AccessKey, sc.SecretKey)
+	default:
+		return ""
+	}
+}
+
 // generateLokiConfigFallback 当模板解析失败时的降级配置
 func (d *LokiDeployer) generateLokiConfigFallback(retentionHours int) string {
 	return fmt.Sprintf(`auth_enabled: %v
@@ -996,8 +1052,6 @@ ingester:
   max_chunk_age: 2h
 querier:
   max_concurrent: 10
-query_frontend:
-  max_outstanding_per_tenant: 4096
 compactor:
   working_directory: /var/lib/loki/compactor
   retention_enabled: true
@@ -1033,7 +1087,7 @@ func (d *LokiDeployer) effectiveNamespace() string {
 	if d.deployment.Namespace != "" {
 		return d.deployment.Namespace
 	}
-	return "loki"
+	return "log"
 }
 
 func (d *LokiDeployer) effectiveReleaseName() string {
@@ -1075,6 +1129,11 @@ func (d *LokiDeployer) log(level, message, detail string) {
 // ==================== 清理 / 卸载 ====================
 
 func CleanupLoki(ctx context.Context, deployment *models.LokiDeployment) {
+	// 同环境部署的 Grafana 一并清理
+	if deployment.GrafanaEnabled {
+		CleanupGrafana(ctx, deployment)
+	}
+
 	if deployment.Mode == "k8s-helm" && deployment.Cluster != nil {
 		kubeconfig, err := resolveKubeconfig(deployment.Cluster)
 		if err != nil {
@@ -1089,7 +1148,7 @@ func CleanupLoki(ctx context.Context, deployment *models.LokiDeployment) {
 		env := append(os.Environ(), fmt.Sprintf("KUBECONFIG=%s", kubeFile))
 		ns := deployment.Namespace
 		if ns == "" {
-			ns = "loki"
+			ns = "log"
 		}
 		name := deployment.Name
 		if name == "" {
@@ -1121,7 +1180,7 @@ func CleanupLoki(ctx context.Context, deployment *models.LokiDeployment) {
 		env := append(os.Environ(), fmt.Sprintf("KUBECONFIG=%s", kubeFile))
 		ns := deployment.Namespace
 		if ns == "" {
-			ns = "loki"
+			ns = "log"
 		}
 
 		// 删除所有相关资源
@@ -1140,11 +1199,7 @@ func CleanupLoki(ctx context.Context, deployment *models.LokiDeployment) {
 
 	if deployment.Mode == "host-binary" && deployment.Host != nil {
 		host := deployment.Host
-		password := host.Password
-		if strings.HasPrefix(password, "ENC:") {
-			password, _ = DecryptCred(password)
-		}
-		client, _ := NewSSHClient(host.HostIP, host.Port, host.User, password)
+		client, _ := NewSSHClientWithAuth(HostSSHAuth(host))
 		if client != nil {
 			defer client.Close()
 			client.Execute(ctx, "systemctl stop loki 2>/dev/null || true")
diff --git a/backend/services/ssh.go b/backend/services/ssh.go
index 89fb7d0..a2e75f7 100644
--- a/backend/services/ssh.go
+++ b/backend/services/ssh.go
@@ -14,9 +14,9 @@ import (
 	"strings"
 	"time"
 
-	"lokideploy/config"
-	"lokideploy/models"
-	"lokideploy/pkg/crypto"
+	"opsxloki/config"
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
 
 	"golang.org/x/crypto/ssh"
 )
@@ -160,6 +160,19 @@ func buildAuthMethods(auth *models.SSHAuthConfig) []ssh.AuthMethod {
 	return methods
 }
 
+// HostSSHAuth 从 Host 模型构建完整 SSH 认证配置（密钥优先、密码后备）。
+// 凭证保持 ENC: 原样传入，由 buildAuthMethods 统一解密。
+func HostSSHAuth(host *models.Host) *models.SSHAuthConfig {
+	return &models.SSHAuthConfig{
+		Host:       host.HostIP,
+		Port:       host.Port,
+		User:       host.User,
+		Password:   host.Password,
+		PrivateKey: host.PrivateKey,
+		KeyPhrase:  host.KeyPhrase,
+	}
+}
+
 // NewSSHClient 创建SSH客户端（支持密钥+密码认证，TOFU主机密钥验证）
 func NewSSHClient(host string, port int, user, password string) (*SSHClient, error) {
 	auth := &SSHAuthConfig{
diff --git a/backend/services/storage.go b/backend/services/storage.go
index 9925040..8c3045f 100644
--- a/backend/services/storage.go
+++ b/backend/services/storage.go
@@ -4,10 +4,10 @@ import (
 	"fmt"
 	"time"
 
-	"lokideploy/models"
-	"lokideploy/pkg/crypto"
-	"lokideploy/repository"
-	"lokideploy/utils"
+	"opsxloki/models"
+	"opsxloki/pkg/crypto"
+	"opsxloki/repository"
+	"opsxloki/utils"
 )
 
 type StorageService struct{}
diff --git a/backend/services/storage_check.go b/backend/services/storage_check.go
new file mode 100644
index 0000000..8d2a050
--- /dev/null
+++ b/backend/services/storage_check.go
@@ -0,0 +1,216 @@
+package services
+
+import (
+	"crypto/hmac"
+	"crypto/sha256"
+	"encoding/hex"
+	"encoding/xml"
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"strings"
+	"time"
+)
+
+// StorageTestResult 存储连接测试结果(逐级:可达 → 认证 → 桶)
+type StorageTestResult struct {
+	Reachable     bool   `json:"reachable"`
+	Authenticated bool   `json:"authenticated"`
+	BucketExists  bool   `json:"bucketExists"`
+	BucketCreated bool   `json:"bucketCreated"`
+	Message       string `json:"message"`
+}
+
+// StorageTestParams 测试参数(与创建存储配置一致,额外支持自动建桶)
+type StorageTestParams struct {
+	StorageType string
+	Endpoint    string
+	Bucket      string
+	Region      string
+	AccessKey   string
+	SecretKey   string
+	Insecure    bool
+	CreateIfMissing bool
+}
+
+// ==================== S3 SigV4(零依赖实现,兼容 MinIO/RustFS/S3/OSS S3 兼容端点) ====================
+
+func hmacSHA256(key []byte, data string) []byte {
+	h := hmac.New(sha256.New, key)
+	h.Write([]byte(data))
+	return h.Sum(nil)
+}
+
+func sha256Hex(s string) string {
+	sum := sha256.Sum256([]byte(s))
+	return hex.EncodeToString(sum[:])
+}
+
+// s3Request 发起一次 SigV4 签名的 S3 请求(路径风格),path 为 "/" 或 "/<bucket>"
+func s3Request(method, endpoint, region, accessKey, secretKey, path string, insecure bool) (*http.Response, error) {
+	// endpoint 解析:带 scheme 用之;裸主机名默认 https,insecure 时 http
+	base := strings.TrimSpace(endpoint)
+	scheme := ""
+	if strings.HasPrefix(base, "http://") {
+		scheme, base = "http", strings.TrimPrefix(base, "http://")
+	} else if strings.HasPrefix(base, "https://") {
+		scheme, base = "https", strings.TrimPrefix(base, "https://")
+	} else {
+		if insecure {
+			scheme = "http"
+		} else {
+			scheme = "https"
+		}
+	}
+	base = strings.TrimSuffix(base, "/")
+	if region == "" {
+		region = "us-east-1"
+	}
+
+	now := time.Now().UTC()
+	amzDate := now.Format("20060102T150405Z")
+	dateStamp := now.Format("20060102")
+	payloadHash := sha256Hex("") // 空 body
+
+	// 规范请求(SigV4: host/x-amz-content-sha256/x-amz-date 参与签名)
+	canonicalURI := path
+	if canonicalURI == "" {
+		canonicalURI = "/"
+	}
+	canonicalRequest := strings.Join([]string{
+		method,
+		canonicalURI,
+		"", // query
+		"host:" + base + "\n" +
+			"x-amz-content-sha256:" + payloadHash + "\n" +
+			"x-amz-date:" + amzDate + "\n",
+		"host;x-amz-content-sha256;x-amz-date",
+		payloadHash,
+	}, "\n")
+
+	scope := dateStamp + "/" + region + "/s3/aws4_request"
+	stringToSign := strings.Join([]string{
+		"AWS4-HMAC-SHA256",
+		amzDate,
+		scope,
+		sha256Hex(canonicalRequest),
+	}, "\n")
+
+	kDate := hmacSHA256([]byte("AWS4"+secretKey), dateStamp)
+	kRegion := hmacSHA256(kDate, region)
+	kService := hmacSHA256(kRegion, "s3")
+	kSigning := hmacSHA256(kService, "aws4_request")
+	signature := hex.EncodeToString(hmacSHA256(kSigning, stringToSign))
+
+	req, err := http.NewRequest(method, scheme+"://"+base+canonicalURI, nil)
+	if err != nil {
+		return nil, err
+	}
+	req.Host = base
+	req.Header.Set("x-amz-date", amzDate)
+	req.Header.Set("x-amz-content-sha256", payloadHash)
+	req.Header.Set("Authorization", fmt.Sprintf(
+		"AWS4-HMAC-SHA256 Credential=%s/%s, SignedHeaders=host;x-amz-content-sha256;x-amz-date, Signature=%s",
+		accessKey, scope, signature))
+
+	client := &http.Client{Timeout: 10 * time.Second}
+	return client.Do(req)
+}
+
+// s3ErrBrief 从 S3 错误响应 XML 中提取 Code/Message,避免把整段 XML 暴露给用户
+func s3ErrBrief(body []byte) string {
+	var e struct {
+		Code    string `xml:"Code"`
+		Message string `xml:"Message"`
+	}
+	if err := xml.Unmarshal(body, &e); err == nil && (e.Code != "" || e.Message != "") {
+		if e.Code != "" && e.Message != "" {
+			return e.Code + ": " + e.Message
+		}
+		return e.Code + e.Message
+	}
+	brief := strings.TrimSpace(string(body))
+	if len(brief) > 120 {
+		brief = brief[:120] + "..."
+	}
+	return brief
+}
+
+// ==================== 测试连接 ====================
+
+// TestStorageConnection 逐级测试对象存储:可达性 → 凭证 → 桶存在性(可选自动创建)。
+// OSS 走其 S3 兼容端点;不覆盖 OSS 原生协议的独有能力。
+func TestStorageConnection(p StorageTestParams) StorageTestResult {
+	// ① ListBuckets:同时验证 网络可达 + AK/SK 有效
+	resp, err := s3Request("GET", p.Endpoint, p.Region, p.AccessKey, p.SecretKey, "/", p.Insecure)
+	if err != nil {
+		return StorageTestResult{Message: fmt.Sprintf("无法连接对象存储:%v", err)}
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode == http.StatusForbidden || resp.StatusCode == http.StatusUnauthorized {
+		body, _ := io.ReadAll(io.LimitReader(resp.Body, 512))
+		return StorageTestResult{
+			Reachable: true,
+			Message:   fmt.Sprintf("连接成功但认证失败(HTTP %d),请检查 Access Key / Secret Key。%s", resp.StatusCode, s3ErrBrief(body)),
+		}
+	}
+	if resp.StatusCode != http.StatusOK {
+		body, _ := io.ReadAll(io.LimitReader(resp.Body, 512))
+		return StorageTestResult{
+			Reachable: true,
+			Message:   fmt.Sprintf("对象存储返回异常(HTTP %d):%s", resp.StatusCode, s3ErrBrief(body)),
+		}
+	}
+
+	// 解析 ListBuckets,顺带确认目标桶是否在列表中
+	body, _ := io.ReadAll(io.LimitReader(resp.Body, 1<<20))
+	var listResp struct {
+		Buckets struct {
+			Bucket []struct {
+				Name string `xml:"Name"`
+			} `xml:"Bucket"`
+		} `xml:"Buckets"`
+	}
+	_ = xml.Unmarshal(body, &listResp)
+	found := false
+	for _, b := range listResp.Buckets.Bucket {
+		if b.Name == p.Bucket {
+			found = true
+			break
+		}
+	}
+
+	result := StorageTestResult{Reachable: true, Authenticated: true, BucketExists: found}
+
+	if found {
+		result.Message = "连接成功,凭证有效,桶已存在"
+		return result
+	}
+
+	// ② 桶不存在:按需创建
+	if !p.CreateIfMissing {
+		result.Message = fmt.Sprintf("连接成功,凭证有效,但桶「%s」不存在;勾选「不存在时自动创建」可一键创建", p.Bucket)
+		return result
+	}
+
+	putResp, err := s3Request("PUT", p.Endpoint, p.Region, p.AccessKey, p.SecretKey, "/"+url.PathEscape(p.Bucket), p.Insecure)
+	if err != nil {
+		result.Message = fmt.Sprintf("创建桶失败:%v", err)
+		return result
+	}
+	defer putResp.Body.Close()
+
+	// 200=创建成功;409 BucketAlreadyOwnedByYou 视为已存在
+	if putResp.StatusCode == http.StatusOK || putResp.StatusCode == http.StatusConflict {
+		result.BucketExists = true
+		result.BucketCreated = true
+		result.Message = fmt.Sprintf("连接成功,桶「%s」不存在,已自动创建 ✓", p.Bucket)
+		return result
+	}
+
+	putBody, _ := io.ReadAll(io.LimitReader(putResp.Body, 512))
+	result.Message = fmt.Sprintf("凭证有效,但创建桶失败(HTTP %d):%s", putResp.StatusCode, s3ErrBrief(putBody))
+	return result
+}
diff --git a/backend/utils/errors.go b/backend/utils/errors.go
index 5d294a3..7086533 100644
--- a/backend/utils/errors.go
+++ b/backend/utils/errors.go
@@ -12,6 +12,9 @@ var (
 
 	// 资源相关错误
 	ErrNotFound         = errors.New("资源不存在")
+	ErrUsernameExists   = errors.New("用户名已存在")
+	ErrCannotDeleteSelf = errors.New("不能删除当前登录的账号")
+	ErrLastAdmin        = errors.New("不能删除最后一个管理员账号")
 	ErrAlreadyExists    = errors.New("资源已存在")
 	ErrUnauthorized     = errors.New("未登录或登录已过期")
 	ErrForbidden        = errors.New("没有操作权限")
diff --git a/build.sh b/build.sh
index 63f119f..2422b24 100755
--- a/build.sh
+++ b/build.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 # ============================================================
-# LokiDeploy Build Script v2
+# opsx-loki Build Script v2
 # ============================================================
 # Builds frontend and backend into a single deployable package
 # with security hardening and integrity checks.
@@ -16,7 +16,7 @@ set -euo pipefail
 
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 echo "========================================"
-echo "  LokiDeploy Build Script v2"
+echo "  opsx-loki Build Script v2"
 echo "  Security-hardened build pipeline"
 echo "========================================"
 
@@ -104,10 +104,10 @@ GIT_COMMIT=$(git -C "$SCRIPT_DIR" rev-parse --short HEAD 2>/dev/null || echo "un
 
 $GO_CMD build \
     -ldflags="-s -w -X main.buildTime=${BUILD_TIME} -X main.gitCommit=${GIT_COMMIT} -extldflags '-static'" \
-    -o bin/lokideploy .
+    -o bin/opsxloki .
 
-echo "  Backend built: backend/bin/lokideploy"
-echo "  Binary size: $(du -h bin/lokideploy | cut -f1)"
+echo "  Backend built: backend/bin/opsxloki"
+echo "  Binary size: $(du -h bin/opsxloki | cut -f1)"
 echo "  Build time: $BUILD_TIME"
 echo "  Git commit: $GIT_COMMIT"
 
@@ -124,8 +124,8 @@ echo "========================================"
 echo "  Build Complete!"
 echo "========================================"
 echo "  Frontend: backend/dist/"
-echo "  Backend:  backend/bin/lokideploy"
-echo "  Size:     $(du -h backend/bin/lokideploy | cut -f1)"
+echo "  Backend:  backend/bin/opsxloki"
+echo "  Size:     $(du -h backend/bin/opsxloki | cut -f1)"
 echo ""
 echo "========================================"
 echo "  SECURITY REMINDERS"
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index b133a40..3c55938 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -1,5 +1,5 @@
 # ============================================================
-# LokiDeploy - Production Docker Compose Configuration
+# opsx-loki - Production Docker Compose Configuration
 # ============================================================
 # Features:
 #   - Multi-instance deployment with load balancing
@@ -15,14 +15,14 @@ services:
   # ---- Nginx Load Balancer ----
   nginx:
     image: nginx:1.27-alpine
-    container_name: lokideploy-lb
+    container_name: opsxloki-lb
     restart: unless-stopped
     ports:
       - "8080:8080"
     volumes:
       - ./nginx.conf:/etc/nginx/nginx.conf:ro
     networks:
-      - lokideploy-net
+      - opsxloki-net
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8080/health"]
       interval: 30s
@@ -52,21 +52,21 @@ services:
       - /var/cache/nginx:noexec,nosuid,size=10m
       - /var/run:noexec,nosuid,size=5m
     depends_on:
-      lokideploy-1:
+      opsxloki-1:
         condition: service_healthy
-      lokideploy-2:
+      opsxloki-2:
         condition: service_healthy
 
   # ---- Application Instance 1 ----
-  lokideploy-1:
+  opsxloki-1:
     build:
       context: .
       dockerfile: Dockerfile
       args:
         TARGETARCH: ${TARGETARCH:-amd64}
-    image: lokideploy:v2
-    container_name: lokideploy-1
-    hostname: lokideploy-1
+    image: opsxloki:v2
+    container_name: opsxloki-1
+    hostname: opsxloki-1
     restart: unless-stopped
 
     security_opt:
@@ -85,16 +85,16 @@ services:
 
     volumes:
       # Named volume for data persistence
-      - lokideploy-data-1:/app/data
+      - opsxloki-data-1:/app/data
       # kubeconfig read-only (P0: non-root path)
-      - ${KUBECONFIG_PATH:-~/.kube}:/home/lokideploy/.kube:ro
+      - ${KUBECONFIG_PATH:-~/.kube}:/home/opsxloki/.kube:ro
       # SSH keys read-only
-      - ${SSH_KEY_PATH:-~/.ssh}:/home/lokideploy/.ssh:ro
+      - ${SSH_KEY_PATH:-~/.ssh}:/home/opsxloki/.ssh:ro
 
     environment:
       - SERVER_PORT=8080
       - DATA_DIR=/app/data
-      - KUBECONFIG=/home/lokideploy/.kube/config
+      - KUBECONFIG=/home/opsxloki/.kube/config
       # Secrets via Docker Secrets file injection
       - JWT_SECRET_FILE=${JWT_SECRET_FILE:-/run/secrets/jwt_secret}
       - ENCRYPTION_KEY_FILE=${ENCRYPTION_KEY_FILE:-/run/secrets/encryption_key}
@@ -136,18 +136,18 @@ services:
 
     stop_grace_period: 30s
     networks:
-      - lokideploy-net
+      - opsxloki-net
 
   # ---- Application Instance 2 ----
-  lokideploy-2:
+  opsxloki-2:
     build:
       context: .
       dockerfile: Dockerfile
       args:
         TARGETARCH: ${TARGETARCH:-amd64}
-    image: lokideploy:v2
-    container_name: lokideploy-2
-    hostname: lokideploy-2
+    image: opsxloki:v2
+    container_name: opsxloki-2
+    hostname: opsxloki-2
     restart: unless-stopped
 
     security_opt:
@@ -163,14 +163,14 @@ services:
       - /tmp:noexec,nosuid,size=50m,uid=1000,gid=1000
 
     volumes:
-      - lokideploy-data-2:/app/data
-      - ${KUBECONFIG_PATH:-~/.kube}:/home/lokideploy/.kube:ro
-      - ${SSH_KEY_PATH:-~/.ssh}:/home/lokideploy/.ssh:ro
+      - opsxloki-data-2:/app/data
+      - ${KUBECONFIG_PATH:-~/.kube}:/home/opsxloki/.kube:ro
+      - ${SSH_KEY_PATH:-~/.ssh}:/home/opsxloki/.ssh:ro
 
     environment:
       - SERVER_PORT=8080
       - DATA_DIR=/app/data
-      - KUBECONFIG=/home/lokideploy/.kube/config
+      - KUBECONFIG=/home/opsxloki/.kube/config
       - JWT_SECRET_FILE=${JWT_SECRET_FILE:-/run/secrets/jwt_secret}
       - ENCRYPTION_KEY_FILE=${ENCRYPTION_KEY_FILE:-/run/secrets/encryption_key}
 
@@ -209,13 +209,13 @@ services:
 
     stop_grace_period: 30s
     networks:
-      - lokideploy-net
+      - opsxloki-net
 
 # ---- Named Volumes ----
 volumes:
-  lokideploy-data-1:
+  opsxloki-data-1:
     driver: local
-  lokideploy-data-2:
+  opsxloki-data-2:
     driver: local
 
 # ---- Docker Secrets ----
@@ -227,7 +227,7 @@ secrets:
 
 # ---- Network ----
 networks:
-  lokideploy-net:
+  opsxloki-net:
     driver: bridge
     ipam:
       config:
diff --git a/docker-compose.yml b/docker-compose.yml
index 8f44371..a221195 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,8 +1,8 @@
 # ============================================================
-# LokiDeploy - Development Docker Compose Configuration
+# opsx-loki - Development Docker Compose Configuration
 # ============================================================
 # P0 Fixes:
-#   - Non-root kubeconfig mount (/home/lokideploy/.kube)
+#   - Non-root kubeconfig mount (/home/opsxloki/.kube)
 #   - Healthcheck for orchestration visibility
 #   - Resource limits to prevent noisy-neighbor
 #   - security_opt: no-new-privileges
@@ -14,15 +14,15 @@
 # ============================================================
 
 services:
-  lokideploy:
+  opsxloki:
     build:
       context: .
       dockerfile: Dockerfile
       args:
         TARGETARCH: ${TARGETARCH:-amd64}
-    image: lokideploy:v2
-    container_name: lokideploy
-    hostname: lokideploy
+    image: opsxloki:v2
+    container_name: opsxloki
+    hostname: opsxloki
 
     # ---- P0: Security options ----
     security_opt:
@@ -43,11 +43,11 @@ services:
 
     # ---- P0: Named volumes for data persistence ----
     volumes:
-      - lokideploy-data:/app/data
+      - opsxloki-data:/app/data
       # P0: Mount kubeconfig to non-root user directory
-      - ${KUBECONFIG_PATH:-${HOME}/.kube}:/home/lokideploy/.kube:ro
+      - ${KUBECONFIG_PATH:-${HOME}/.kube}:/home/opsxloki/.kube:ro
       # SSH keys for host-based deployments
-      - ${SSH_KEY_PATH:-${HOME}/.ssh}:/home/lokideploy/.ssh:ro
+      - ${SSH_KEY_PATH:-${HOME}/.ssh}:/home/opsxloki/.ssh:ro
 
     # ---- P0: Environment variables (no default secrets) ----
     environment:
@@ -60,7 +60,7 @@ services:
       # P0: ENCRYPTION_KEY must be provided externally (AES-256, >=32 字符)
       - "ENCRYPTION_KEY=${ENCRYPTION_KEY:?ENCRYPTION_KEY is required. Generate: openssl rand -hex 32, then: export ENCRYPTION_KEY=<value>}"
       # KUBECONFIG points to non-root user's .kube directory
-      - KUBECONFIG=/home/lokideploy/.kube/config
+      - KUBECONFIG=/home/opsxloki/.kube/config
 
     # ---- P0: Healthcheck ----
     healthcheck:
@@ -95,21 +95,21 @@ services:
     stop_grace_period: 15s
 
     networks:
-      - lokideploy-net
+      - opsxloki-net
 
 # ---- Named volumes ----
 volumes:
-  lokideploy-data:
+  opsxloki-data:
     driver: local
     labels:
-      - "com.lokideploy.description=LokiDeploy data directory"
+      - "com.opsxloki.description=opsx-loki data directory"
 
 # ---- Network isolation ----
 networks:
-  lokideploy-net:
+  opsxloki-net:
     driver: bridge
     ipam:
       config:
         - subnet: 172.28.0.0/16
     labels:
-      - "com.lokideploy.description=LokiDeploy internal network"
+      - "com.opsxloki.description=opsx-loki internal network"
diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
index 9e5f7a1..895dd1b 100755
--- a/docker-entrypoint.sh
+++ b/docker-entrypoint.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 # ============================================================
-# LokiDeploy Secure Entrypoint
+# opsx-loki Secure Entrypoint
 # ============================================================
 # Enforces required secrets at container startup
 # Supports Docker Secrets file-based injection
@@ -43,7 +43,7 @@ if [ ${#MISSING_VARS[@]} -ne 0 ]; then
     echo "" >&2
     echo "These MUST be provided at runtime. Examples:" >&2
     echo "" >&2
-    echo '  docker run -e JWT_SECRET="$(openssl rand -hex 32)" -e ENCRYPTION_KEY="$(openssl rand -hex 32)" lokideploy' >&2
+    echo '  docker run -e JWT_SECRET="$(openssl rand -hex 32)" -e ENCRYPTION_KEY="$(openssl rand -hex 32)" opsxloki' >&2
     echo "" >&2
     echo "Or via docker-compose secrets (recommended for production):" >&2
     echo '  secrets:' >&2
@@ -85,7 +85,7 @@ shutdown() {
 }
 trap shutdown SIGTERM SIGINT
 
-echo "LokiDeploy starting with security configuration OK"
+echo "opsx-loki starting with security configuration OK"
 echo "Data directory: ${DATA_DIR}"
 echo "Server port: ${SERVER_PORT}"
 
diff --git a/docs/web-ui-guide/00-目录与概览.md b/docs/web-ui-guide/00-目录与概览.md
new file mode 100644
index 0000000..236d517
--- /dev/null
+++ b/docs/web-ui-guide/00-目录与概览.md
@@ -0,0 +1,169 @@
+# 打造高质量 Web 管理端前端 — 开发标准
+
+> 基于 vue-vben-admin（v5，★★★★★ Vue 标准标杆）、ant-design-pro（v6，★★★★★ React 标准标杆）、  
+> soybean-admin（v2.3，★★★★☆ 强烈推荐）、vue-pure-admin（v7，★★★★☆ 推荐）四大纯前端标杆提炼，  
+> gin-vue-admin（★★☆☆☆ 仅作全栈功能对照）。
+>
+> 生成时间：2026-10-22 ｜ 修订：2026-10-22 定位为通用开发标准（去项目化）
+
+---
+
+## 📖 文档定位（先读这一段）
+
+本文件是一份**前端开发标准**（Standard），不是教程：
+
+1. **用途**：放入新项目仓库（如 `docs/`，并被 AGENTS.md / CLAUDE.md 引用），供 **AI 编程助手与开发者**阅读——AI 在编码、Review、重构时以此为基准**对比并优化**目标代码；与本文冲突的既有代码即为待改进项。
+2. **范围**：Vue 3 与 React 的管理端 / 中后台 Web 前端（新项目优先）；后端为 Gin / FastAPI 等任意 REST 服务均可——本标准只约定前端结构与 HTTP 契约，不绑定后端框架。
+3. **效力**：条款分「必须 / 禁止」「推荐 / 避免」「可选」三级（见规范用语约定）。
+4. **证据**：所有规范条目均标注出处（五项目的具体文件路径），不是凭空偏好。
+5. **用法**：每章末尾有「AI 检查清单」——对比目标工程时逐项核对，不合格项即为优化任务。
+
+---
+
+## 📚 文档目录
+
+| 序号 | 文件名               | 主题   | 核心内容                                         |
+| -- | ----------------- | ---- | -------------------------------------------- |
+| 01 | `01-框架选型与技术栈.md`  | 框架选型 | 默认技术栈、UI 库对比、TS 采用策略、何时允许偏离                  |
+| 02 | `02-项目架构与目录结构.md` | 项目架构 | 按功能域组织、页面 co-location、可裁剪分层、命名规范             |
+| 03 | `03-请求层与数据流.md`   | 通信架构 | 统一响应契约、拦截器链、refresh 单飞队列、401 三范式、状态分层        |
+| 04 | `04-路由与权限控制.md`   | 路由权限 | meta 规范、动态路由三模式、守卫链、RBAC 三粒度、菜单生成            |
+| 05 | `05-布局系统与导航设计.md` | 布局导航 | 布局分层、侧栏/标签页/面包屑、Keep-Alive 链路、页面模板           |
+| 06 | `06-主题系统与视觉设计.md` | 主题视觉 | 设计 Token、暗色模式、CSS 变量换肤、品牌定制、死 CSS 治理         |
+| 07 | `07-组件设计与交互反馈.md` | 组件交互 | 组件分层与晋升、命令式弹层、表单/表格范式、反馈分级、巨型文件拆分            |
+| 08 | `08-工程化与质量保障.md`  | 工程实践 | Vite 配置、env 分层、lint 流水线、测试金字塔、性能、双端一致性、CI/CD |
+
+---
+
+## 🏆 核心结论速览
+
+### 默认技术栈（新项目从这里开始）
+
+| 端         | 默认栈                                                                                                   | 参照                                             |
+| --------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| **Vue 3** | Vue 3 + Vite + TypeScript（允许渐进）+ Element Plus + Pinia + Vue Router                                    | 同栈实操对照 vue-pure-admin；架构对照 vben；规范写法对照 soybean |
+| **React** | React + Vite + TypeScript strict + antd（重 CRUD 加 ProComponents）或 shadcn/ui + Zustand + TanStack Query | 工程与组件对照 ant-design-pro                         |
+
+包管理器一律 **pnpm**（`preinstall: only-allow pnpm`）。偏离默认栈的条件与程序见 01 章 1.4。
+
+### 单栈优先与双栈迁移策略
+
+```
+新项目 ──▶ 必须单栈（Vue 或 React 二选一）
+
+迁移期（存量重构）──▶ 允许双栈并存，但必须遵守三条纪律：
+  1. 功能以主端为准，副端只做「对齐」同步，不抢先实现新功能
+  2. 契约先统一命名：token key / 主题 key / 权限码 / 响应格式，两端同名
+     （推荐命名空间：<app>.auth.token / <app>.theme.mode）
+  3. 不共享代码，只共享一份契约文档——不为双栈引入 monorepo
+```
+
+（monorepo 的适用性判断见 01 章 1.3；双端一致性细则见 08 章第五节）
+
+### 参考项目定位（五项目三级）
+
+**首选参考 ★★★★★ —— Vue 看 vben，React 看 adp**
+
+| 项目                 | 技术栈                                          | 定位             | 主要借鉴点                                                                                                        |
+| ------------------ | -------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------ |
+| **vue-vben-admin** | Vue 3 + TS monorepo（pnpm + Turbo）            | **Vue 标准标杆**   | RequestClient + 预设拦截器、refresh 单飞队列、HSL Token + Tailwind 桥接、Preferences 偏好系统、三层布局架构、Vite 配置工厂、VITE_GLOB 运行时配置 |
+| **ant-design-pro** | Umi Max + React 19 + antd v6 + ProComponents | **React 标准标杆** | 响应契约与错误分级（ErrorShowType）、access 权限纯函数、页面 co-location 五件套、React Query 数据流、Biome + commitlint 工程底线、测试范式        |
+
+**强烈推荐 / 推荐 ★★★★☆ —— Vue 侧第二、第三参考**
+
+| 项目                 | 技术栈                                             | 定位                      | 主要借鉴点                                                                                                                   |
+| ------------------ | ----------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| **soybean-admin**  | Vue 3.5 + Naive UI + UnoCSS + Vite（轻 workspace） | 强烈推荐：**代码规范与架构清晰**      | @elegant-router 文件路由（目录即路由、类型即生成物）、请求五钩子契约 + flat 返回、store「index + shared」纯函数分离、hasAuth 极简权限、主题三端同步、最严格的 Lint/Commit 体系 |
+| **vue-pure-admin** | Vue 3.5 + Element Plus + Tailwind v4（单包）        | 推荐：**干净轻量，有官方精简版 thin** | 页面内聚五件套（index + form + utils/hook）、PureHttp 196 行请求类、ReDialog 命令式弹窗、EP↔Tailwind 变量桥接、两级按钮权限（v-auth/v-perms）、中文注释密度极高    |
+
+**仅作对照 ★★☆☆☆ —— 功能参考，不作前端标准**
+
+| 项目                | 技术栈                                         | 定位                | 可借鉴的模式                                                                          |
+| ----------------- | ------------------------------------------- | ----------------- | ------------------------------------------------------------------------------- |
+| **gin-vue-admin** | Vue 3 + Element Plus + Pinia + Vite（Gin 全栈） | Gin 全栈闭环 / 后端对接示例 | 后端菜单→`import.meta.glob` 动态路由、`defineOptions name` 与 keep-alive 链路、loading 防抖计数器 |
+
+> gva 的价值在于「Gin 后端 + Vue 前端」同仓配套的全栈闭环，适合做整体功能对照；  
+> 其前端工程化、代码规范整体弱于上面 4 个纯前端项目（拦截器 `return error` 未 reject、EP 全量引入、无测试）。  
+> **前端实现分歧时以 vben（架构）/ soybean（规范）/ pure（同栈 EP 实操）为准，gva 只当功能实现方式对照，前端写法不照搬。**
+
+### 按维度查哪个项目
+
+| 维度               | 优先看                   | 说明                                                                      |
+| ---------------- | --------------------- | ----------------------------------------------------------------------- |
+| 目录结构与分层          | vben > soybean > pure | vben monorepo 分层最值得学；soybean 文件路由清晰；pure 传统但干净                          |
+| 请求封装             | vben / soybean / pure | 错误处理、Token 刷新、类型定义三家都成熟，见 03 章对照                                        |
+| 权限系统             | vben > soybean > pure | vben 动态路由 + 细粒度最完整；soybean 静态/动态一键切换；pure 两级按钮权限                        |
+| Lint / Commit 规范 | vben / soybean        | 配置最严格完整，直接抄它们的配置文件                                                      |
+| 组件二次封装           | vben / pure / adp     | vben schema 驱动且多 UI；pure hook + 命令式弹窗实用；adp ProTable/ProForm 是 React 标杆 |
+| TypeScript 类型组织  | vben / soybean / adp  | 类型集中、接口返回类型完整；soybean 的全局 namespace + 键级类型最易迁移到 JS 工程                   |
+
+### 管理端前端十大黄金法则
+
+```
+┌────────────────────────────────────────────────────────────────┐
+│ 01. 一切 IO 走统一请求层     —— 组件不直接碰 axios/fetch       │
+│ 02. 响应契约全局唯一         —— code/data/msg + 错误分级       │
+│ 03. 401 只有一个入口         —— 单飞刷新 + 队列重放，不竞态    │
+│ 04. meta 驱动一切 UI 行为    —— 菜单/缓存/权限/标题单源维护    │
+│ 05. 权限三态                 —— 不可见 / 可见但 403 / 放行     │
+│ 06. 页面私有代码不出页面目录 —— 复用第三次才晋升公共组件       │
+│ 07. 反馈分级、少弹框         —— 成功静默、失败必现、危险确认   │
+│ 08. 换肤只改 CSS 变量        —— 不重编译、不引第二套样式系统   │
+│ 09. 列表/表单/详情有模板     —— 新页面从模板起步，不自由发挥   │
+│ 10. 双栈契约优先             —— 同产品双端实现时 key、权限码、  │
+│                                响应格式两端同名                │
+└────────────────────────────────────────────────────────────────┘
+```
+
+### 质量红线（违反即技术债）
+
+- 单文件组件 ≤ **400 行**（视图）/ ≤ **300 行**（工具、请求层），超限必须拆分
+- 样式必须有唯一入口引用链，**无入口的 CSS 一律删除**（存量工程常见 2000+ 行死 CSS 的考古层）
+- 生产构建**零 console.log**，尤其禁止打印 token 片段
+- 组件不绕过 API 层直接调用请求实例
+- 文档与实现同 PR 更新，禁止「描述已删除组件」的漂移文档
+
+### 规范用语约定（必须遵守 vs 推荐）
+
+| 标记          | 含义                                   | 违反后果                  |
+| ----------- | ------------------------------------ | --------------------- |
+| **必须 / 禁止** | 强制规范（MUST / MUST NOT）                | Code review 拒绝，视同 bug |
+| **推荐 / 避免** | 默认采纳（SHOULD / SHOULD NOT），允许有充分理由的例外 | 例外需在 PR 描述中说明原因       |
+| **可选**      | 按需采用（MAY）                            | 无                     |
+
+正文中加粗的「必须 / 禁止」条款为强制项；各章「AI 检查清单」是带优先级（P0/P1/P2）的对比执行队列。
+
+### 文档维护与更新规则
+
+1. 实现与文档不一致 = 文档 bug，同一 PR 修复（详见 08 章文档治理）
+2. 参考项目大版本升级（vben / soybean / pure / adp）后，复核对应章节引用的证据文件路径
+3. 新增规范先以「推荐」落地，被 ≥2 个模块实际验证后再升级为「必须」
+4. 修订历史以 git commit 为准
+
+---
+
+## 🎯 适用场景
+
+- 🏗️ **可裁剪底座 / 脚手架** — 壳 / 系统 / 示例三层，fork 即用
+- 🖥️ **管理后台 / 中台** — 用户、RBAC、审计、系统设置等系统级页面
+- 📊 **运维监控平台** — 仪表盘、指标图表、实时日志（WebSocket/SSE）
+- ⏰ **任务调度控制台** — 定时任务 CRUD、执行历史、手动触发
+- 🔄 **双栈迁移工程** — Vue→React 或反向迁移期间的对照参照
+
+---
+
+## 📐 与兄弟指南的关系
+
+| 指南                      | 领域                   | 分界                     |
+| ----------------------- | -------------------- | ---------------------- |
+| `GUI-Development-Guide` | Electron/Tauri 桌面端   | 窗口、标题栏、IPC、自动更新        |
+| `CLI-Development-Guide` | Go 命令行 / TUI / Agent | Cobra、Bubble Tea、审批流   |
+| **本指南**                 | **浏览器 Web 管理端**      | **请求层、路由权限、布局主题、组件工程** |
+
+三份指南共享同一套写作范式：每个专题按「原理 → 标杆代码 → 最佳实践 → AI 检查清单」四层展开。
+
+---
+
+> 💡 **阅读建议**：开发者先通读本文件，写新页面前读 05（页面模板）和 07（组件规范）；搭新模块前读 02（架构）和 04（路由权限）；排查线上问题读 03（请求层）和 08（工程化）。  
+> **AI 助手**：编码前读 02/04/05/07；Review 与重构时按各章末「AI 检查清单」逐项对比目标代码，不合格项即输出为优化建议。  
+> 查阅标杆实现时：**Vue 架构问题对照 vben、规范写法对照 soybean、同栈（Element Plus）实操对照 pure、React 问题对照 adp，gva 仅作功能对照。**
diff --git a/docs/web-ui-guide/01-框架选型与技术栈.md b/docs/web-ui-guide/01-框架选型与技术栈.md
new file mode 100644
index 0000000..9c84a5c
--- /dev/null
+++ b/docs/web-ui-guide/01-框架选型与技术栈.md
@@ -0,0 +1,217 @@
+# 01 — 框架选型与技术栈
+
+> 参考：vue-vben-admin（★★★★★ Vue 标准标杆）、ant-design-pro（★★★★★ React 标准标杆）、soybean-admin（★★★★☆ 强烈推荐）、vue-pure-admin（★★★★☆ 推荐）；对照：gin-vue-admin（★★☆☆☆ Gin 全栈）
+
+---
+
+## 一、选型的第一性问题：单栈还是双栈
+
+### 1.1 标杆项目的单栈现实
+
+| 项目 | 框架 | 为什么不双栈 |
+|------|------|--------------|
+| ant-design-pro | React 19 | 生态深度绑定 Umi Max 运行时（约定式路由、运行时配置、插件体系） |
+| gin-vue-admin | Vue 3 | Element Plus + 国内管理端生态，Go 后端配套脚手架默认 Vue（★★☆ 仅对照） |
+| vue-vben-admin | Vue 3 | 用 monorepo + adapter 层支持 5 个 UI 库，但**框架始终只有 Vue** |
+| soybean-admin | Vue 3 | 文件路由 + 生成物策略，规范优先（★★★★☆ 强烈推荐） |
+| vue-pure-admin | Vue 3 | 单包直出、轻量实用，官方精简版 thin（★★★★☆ 推荐） |
+
+> **结论**：标杆项目全部单栈。多 UI 库共存靠的是「适配器层」（vben 的 `effects/*` adapter），而不是多框架。**框架级双栈的成本（请求层、状态、权限、构建、测试全部 ×2）只有迁移期才值得付。**
+>
+> 参考优先级：**Vue 架构看 vben、规范写法看 soybean、同栈 EP 实操看 pure、React 看 adp**；gva 仅作 Gin 全栈视角补充，不作前端代码质量的首选参考。
+
+### 1.2 双栈只在迁移期
+
+```
+        ┌─────────────────────────────────────┐
+        │   后端 REST API（Gin / FastAPI ...） │
+        │   单一契约：/api/*                   │
+        └───────────┬─────────────┬───────────┘
+                    │             │
+        ┌───────────▼────┐  ┌─────▼──────────────┐
+        │ 主端（功能源）  │  │ 副端（迁移参照）    │
+        │ 承接全部新功能  │  │ 只对齐、不抢先      │
+        │ 进入产物       │  │ 迁移完成即退役      │
+        └────────────────┘  └────────────────────┘
+```
+
+迁移期三条纪律（**必须**）：
+
+1. **功能以主端为准**：副端只做「对齐」同步，不抢先实现。
+2. **契约以两端共同名为准**：token key、主题 key、模块开关键、权限码、响应格式——迁移开始前就统一命名（推荐命名空间 `<app>.auth.token` / `<app>.theme.mode`），而不是迁移后再改。
+3. **不共享代码，只共享约定**：两端各自实现同一份「契约文档」（见 08 章），不引入 monorepo 这种为双栈兜底的重型方案。
+
+### 1.3 何时值得上 monorepo（vben 模式）
+
+vben 用 pnpm workspace + Turbo 支撑 5 个 UI 库 app + 30+ 框架包，代价是：
+
+- `pnpm-workspace.yaml` 维护 300+ 依赖 catalog，`overrides` 强制统一版本
+- 循环依赖检查（`check:circular`）、依赖合规检查（`check:dep`）成为必跑任务
+- 构建配置收敛为内部包 `internal/vite-config`，app 配置才能薄到 15 行
+
+**判断标准**：当「框架层代码」（布局引擎、请求客户端、权限系统）需要被 ≥3 个应用复用时，才值得付 monorepo 成本。普通单产品工程（1-2 个前端）——**不值得**，独立 Vite 工程 + 统一 Makefile 编排即可。soybean 的「轻 workspace」（单应用 + 8 个工具包）是中间形态，适合工具链需要沉淀的团队。
+
+### 1.4 何时允许偏离默认栈
+
+**必须**：新项目 / 新模块使用本章默认栈（见 00 章「默认技术栈」）；存量代码**不因「不合推荐」而大规模重写**——渐进迁移：新文件执行新标准，旧文件随功能迭代就近升级。
+
+**允许偏离**的场景（需在 PR / ADR 中说明理由）：组件库确缺关键能力（虚拟表格、复杂甘特等）；性能热点需要更轻方案；与后端生态强绑定（如脚手架生成的默认产物）。
+
+**禁止**：同一工程内并存两套 UI 库、两套状态库、两种 CSS 方案——偏离只允许发生在「整工程」粒度。
+
+---
+
+## 二、UI 组件库选型
+
+### 2.1 三种流派对照
+
+| 维度 | Element Plus（本标准 Vue 主推；gva 补充） | Ant Design + ProComponents（adp） | shadcn/ui（React 品牌差异化） |
+|------|--------------------------|-----------------------------------|-----------------------------|
+| 形态 | 传统全量组件库 | 组件库 + 中后台增强层 | 源码复制型（Radix + Tailwind） |
+| 中后台生产力 | 高（表格/表单/弹层齐全） | **极高**（ProTable/ProForm 声明式 CRUD） | 中（原子件全，业务件自建） |
+| 主题定制 | CSS 变量 + SCSS 双通道 | Design Token（configProvider） | **完全可控**（Token 就是你的 CSS 变量） |
+| 暗色模式 | `dark/css-vars.css` 一行接入 | `data-theme="dark"` + token | `.dark` class 天然支持 |
+| TS 支持 | 一般（类型宽松） | 好 | 极好（TSX 源码进仓库） |
+| 体积 | 全量较大，靠 unplugin 按需 | 较大 | 用多少复制多少 |
+| 适合谁 | Vue 主栈、快速交付 | React 中后台重 CRUD | React、要品牌差异化 |
+
+### 2.2 选型决策树
+
+```
+需要管理端全家桶、快速交付？
+├─ Vue 栈 ──────────▶ Element Plus（+ unplugin 按需引入）
+├─ React 栈、CRUD 为主 ▶ Ant Design + ProComponents
+└─ React 栈、要品牌感 ─▶ shadcn/ui + Tailwind
+
+双栈迁移期？
+└─▶ 主端选全量组件库保效率（EP），
+    副端选 shadcn 保可读性 —— 常见组合
+```
+
+两个 ★★★★☆ 参考的选型启示：soybean-admin（Naive UI + UnoCSS）证明「hook 优先 + 组件薄壳」也能撑起完整中后台；vue-pure-admin 证明了 **Tailwind v4 `@theme` 把 `--el-*` 变量桥接为原子色 token** 是 EP 工程引入原子类的最短路径（详见 06 章）。
+
+### 2.3 图标体系（易被忽视的选型）
+
+- **glob 注册模式（gva，补充）**：`import.meta.glob` 自动收集 `assets/icons/**/*.svg` 注册为全局组件，菜单存 icon 字符串即可 `<component :is>` 渲染；插件图标加 `插件名-` 前缀防冲突。适合「菜单图标由后端配置下发」的场景。
+- **路由声明模式（adp）**：路由 `icon: 'crown'` 字符串 + 图标映射表，与路由集中声明天然契合。
+- **按需编译模式（pure/soybean）**：unplugin-icons 虚拟模块（`import Upload from '~icons/ri/upload-line'`）+ Iconify 离线/在线双模式。
+- **通用规则**：**图标名是数据（存在菜单表里），渲染是前端映射**——不要把图标组件硬编码进菜单模板。
+
+---
+
+## 三、构建工具与运行时
+
+### 3.1 Vite 是唯一现实选择（2026）
+
+| 能力 | 说明 | 标杆用法 |
+|------|------|----------|
+| 按需引入 | `unplugin-auto-import` + `unplugin-vue-components` | EP 组件零 import（vben/soybean 系均如此） |
+| `import.meta.glob` | 动态路由的组件映射基石 | gva/vben/pure 的 backend 菜单模式 |
+| env 分层 | `.env.development` / `.env.production` + `import.meta.env` | 全部项目；vben 另分 `VITE_GLOB_*` 运行时可改（见 08 章） |
+| proxy | dev 反代 `/api` 到后端端口，避免 CORS 配置漂移 | `'/api' → 后端端口`（含 `ws: true` 供 WebSocket） |
+| 构建指纹 | `define` 注入版本/commit hash | adp：`__APP_VERSION__` + git rev-parse 兜底 |
+
+**必须**按需引入，**禁止**全量 `app.use(组件库)` + 全量 CSS（gva 全量引入是反面教材，首屏体积大）。
+
+### 3.2 路由库
+
+- Vue：`vue-router@4`，`createWebHistory`（hash 模式是历史包袱，新工程用 history）
+- React：`react-router@7`，用**路由配置数组 + `<Route>` 声明式**或 `createBrowserRouter`；**禁止**用 `Object.entries().map` + 三元链选页面渲染
+
+### 3.3 HTTP 客户端
+
+| 库 | 使用方 | 要点 |
+|----|--------|------|
+| axios | vben / soybean / pure / gva | 拦截器、取消（AbortController）生态成熟 |
+| umi-request / axios | adp | 错误契约挂载在 request config 上（skipErrorHandler 等） |
+| fetch | — | 零依赖，但拦截器/超时/取消需自建，**不推荐**作为管理端基础 |
+
+> **必须**统一 axios：拦截器结构、错误对象形态在全员脑中保持一致，排障不用切换心智模型。
+
+---
+
+## 四、TypeScript 采用策略
+
+### 4.1 三档策略
+
+| 档位 | 适用 | 做法 | 标杆 |
+|------|------|------|------|
+| **纯 JS + JSDoc** | 快速交付的存量 Vue 主端 | 关键模块（request/permission/stores）写 JSDoc 类型注释 | gva |
+| **渐进 TS** | 存量 JS 工程演进 | 新文件 `.ts`，老文件不动；`allowJs: true`；先建 `typings/` 写 `.d.ts` | soybean 路线 |
+| **TS strict** | 新工程（**默认**） | `strict: true`，类型即文档 | adp、vben、soybean、pure |
+
+**新项目必须 TS strict**；存量工程按上表渐进，但接口函数**不允许**「既无类型注释也无类型定义」。
+
+### 4.2 类型放哪里（adp/soybean 范式）
+
+- 全局契约类型集中声明：`declare namespace API { interface RuleListItem {...} }`，服务层函数签名 `request<API.RuleList>(...)` 收口
+- 页面私有类型随页面 co-location（`data.d.ts` / `utils/types.ts`）
+- 路由 meta 用 `vue-router.d.ts` 模块扩充强类型化（vben 30+ 字段全 JSDoc；soybean 17 字段同款）
+- soybean 补充：全局类型按 namespace 组织（`typings/` 下 Api/App/Storage/Env 四区，storage 与 env 均有**键级类型**，i18n key 递归派生）——**JS 工程渐进 TS 的最低成本路径**：先建 `typings/` 写 `.d.ts`，不动业务代码
+
+---
+
+## 五、状态管理选型
+
+### 5.1 先分类再选库
+
+```
+状态三类：
+├─ 客户端全局状态（token、用户信息、菜单、UI 偏好）→ Pinia / Zustand
+├─ 服务端状态（列表、详情、缓存失效）          → TanStack Query / ProTable request / 自研 usePagedQuery
+└─ URL 状态（筛选、分页、Tab）                 → 路由 query，永远不要复制进 store
+```
+
+### 5.2 三种落法
+
+| 落法 | 出处 | 说明 |
+|------|------|------|
+| adp 三层 | initialState（useModel）+ React Query + ProTable request | 服务端状态交给 Query：`queryKey` 按资源命名，mutation 成功后 `invalidateQueries` |
+| vben 分域 store | Pinia setup 风格，按域拆 modules（gva 同构，补充参考） | token/user/router/app/dictionary 各一，持久化手动分层 |
+| pure StoreHook | `useXxxStoreHook()` 包装 store + pinia 实例 | 在 setup 外（拦截器、守卫、工具函数）也能安全取 store |
+| soybean 模块化 | 每模块一目录 `index.ts`（状态编排）+ `shared.ts`（可单测纯函数） | 纯逻辑与响应式状态强制分离 |
+
+**经验值**：列表页优先「组件内管理 + 请求取消」（AbortController + 版本号方案，见 03 章），只有跨页面共享的数据才进 store。**不要为了「规范」把每个列表都塞进全局 store。**
+
+---
+
+## 六、技术栈对照总表
+
+| 维度 | ant-design-pro | vue-vben-admin | soybean-admin | vue-pure-admin | gin-vue-admin | 本标准推荐值 |
+| ---- | -------------- | -------------- | ------------- | -------------- | ------------- | ------------------ |
+| 框架 | React 19 | Vue 3 | Vue 3.5 | Vue 3.5 | Vue 3 | Vue 3 或 React（单栈） |
+| 语言 | TS strict | TS strict | TS strict（namespace 组织） | TS（strict 关闭） | JS | 新项目 TS strict；存量渐进 |
+| UI 库 | antd v6 + Pro | antd-vue/EP/naive 适配 | Naive UI + UnoCSS | Element Plus + TW v4 | Element Plus | Vue: EP；React: antd 或 shadcn |
+| 构建 | Umi Max(utoopack) | Vite + Turbo monorepo | Vite（轻 workspace） | Vite 8/rolldown 单包 | Vite | Vite + pnpm |
+| 状态 | useModel + RQ | Pinia + 持久化插件 | Pinia（index+shared） | Pinia（StoreHook 模式） | Pinia 分域 | Pinia（Vue）/ Zustand+RQ（React） |
+| 请求 | umi-request + 错误契约 | RequestClient 类 | 五钩子工厂 + flat 返回 | PureHttp 类（196 行） | axios 单例 | axios 封装（见 03 章） |
+| 样式 | Tailwind v4 + antd-style | HSL Token + TW v4 | ThemeSetting 三端同步 | EP↔TW v4 变量桥接 | SCSS + UnoCSS + EP 变量 | 语义 Token 单源（见 06 章） |
+| 规范 | Biome + commitlint | oxlint + eslint + lefthook | soybeanjs/eslint-config + sa CLI | eslint + stylelint + husky | ESLint flat + Prettier | ESLint flat + Prettier + commitlint |
+| 测试 | Vitest + Playwright | Vitest（内核组件全覆盖） | —（未见体系化） | —（未见体系化） | 无（短板） | Vitest + Playwright（见 08 章） |
+
+---
+
+## 七、AI 检查清单（对比目标工程逐项核对）
+
+**P0（结构性的，立即改）**
+
+1. 工程是否单栈？若双栈并存，是否有明确的「主端/副端 + 退役计划」与统一契约命名？
+2. 是否存在同工程两套 UI 库 / 两套状态库 / 两种 CSS 方案？
+3. 组件库是否按需引入（unplugin 或手动）？全量 `app.use()` 即不合格
+4. 包管理器是否 pnpm？`preinstall: only-allow pnpm` 是否配置？
+
+**P1（质量项，排期改）**
+
+5. 新文件是否 TS / 存量是否补 JSDoc？接口函数是否存在「无类型也无注释」
+6. 路由渲染是否声明式（禁止 entries+三元链）？
+7. HTTP 客户端是否统一 axios？
+8. 状态三分法是否被遵守（URL 状态不进 store、列表不进全局 store）？
+
+**P2（演进项）**
+
+9. 是否需要 `typings/` 目录承接全局契约类型（soybean 四区范式）？
+10. 构建指纹（版本/commit 注入）是否配置？
+
+---
+
+> 下一篇：[02-项目架构与目录结构](02-项目架构与目录结构.md) —— 目录是架构的最后陈述。
diff --git a/docs/web-ui-guide/02-项目架构与目录结构.md b/docs/web-ui-guide/02-项目架构与目录结构.md
new file mode 100644
index 0000000..0795ee8
--- /dev/null
+++ b/docs/web-ui-guide/02-项目架构与目录结构.md
@@ -0,0 +1,231 @@
+# 02 — 项目架构与目录结构
+
+> 参考：vue-vben-admin（三层包划分）、soybean-admin（文件路由 + store 纯函数分离）、ant-design-pro（页面 co-location）、vue-pure-admin（页面内聚五件套）；补充：gin-vue-admin（分域 api/view）
+
+---
+
+## 一、组织目录的三种流派
+
+### 1.1 流派对照
+
+| 流派 | 代表 | 结构 | 优点 | 代价 |
+|------|------|------|------|------|
+| **按层分**（layer-first） | 早期中台 | `components/ views/ api/ stores/` 每层内平铺全部业务 | 上手简单 | 业务散在 5 个目录，删模块要全局找 |
+| **按域分**（domain-first） | **本标准（Vue 单包）/ gva** | 层目录保留，但 `api/user/`、`views/user/`、`stores/` 域内聚合 | 删域=删目录，心智清晰 | 需要约定维持层内域目录一致 |
+| **按功能分包**（feature-first） | adp 页面级、vben 包级 | 页面目录自带 service/mock/类型/样式；框架能力独立成包 | 高内聚，可整体搬移 | 需要晋升机制防止复制泛滥 |
+
+**结论：中小工程用「按域分 + 页面 co-location」混合式**——全局按域（api/views 域目录对齐），页面私有代码留在页面目录内。
+
+### 1.2 四标杆的目录精髓
+
+```
+vue-vben-admin（依赖方向三层，分层标杆）
+apps/* ──▶ packages/effects/* ──▶ packages/@core/*
+（app 是唯一允许直接依赖具体 UI 库的层；
+ @core 零 UI 依赖零业务；effects 通过 adapter 适配 UI 生态）
+
+ant-design-pro（页面五件套 co-location）
+src/pages/table-list/
+├── index.tsx          # 页面（ProTable 声明式列配置）
+├── service.ts         # 本页接口（手写层）
+├── data.d.ts          # 本页类型
+├── _mock.ts           # 本页 mock（config 显式 include）
+└── components/
+    ├── CreateForm.tsx # 新建弹窗（trigger 模式）
+    └── UpdateForm.tsx # 编辑弹窗（StepsForm 进 Modal）
+
+soybean-admin（生成物 + store 纯函数分离，★★★★☆）
+src/
+├── router/elegant/        # 文件路由生成物（routes/transform/imports + RouteKey 类型 d.ts）
+├── service/{api,request}/ # api=纯请求函数、request=实例拦截器，两层分离
+├── store/modules/<mod>/   # 每模块 index.ts(状态编排) + shared.ts(可单测纯函数)
+├── typings/{api,...}      # 全局 namespace 类型（Api/App/Storage/Env）
+└── views/_builtin/        # 403/404/500/login 内置页统一收纳，业务页平级
+
+vue-pure-admin（页面内聚五件套，★★★★☆）
+src/views/system/user/
+├── index.vue              # 纯模板（零逻辑，只解构 hook）
+├── form/index.vue         # 弹窗表单
+├── tree.vue               # 左树
+└── utils/{hook.tsx,rule.ts,types.ts}  # 逻辑/校验/类型全在本域
+
+gin-vue-admin（补充：全局分域 + 指令/钩子独立）
+src/
+├── api/            # 一域一文件：user.js menu.js ...
+├── pinia/modules/  # 一域一 store
+├── view/superAdmin/  view/example/   # 按业务分组
+├── directive/auth.js                  # v-auth 指令独立目录
+├── hooks/responsive.js                # 组合式函数独立目录
+└── plugin/<name>/                    # 业务插件 = 自带 view/api/assets 的小应用
+```
+
+---
+
+## 二、标准目录结构（Vue 工程）
+
+### 2.1 目标结构
+
+```
+src/
+├── main.js                  # 入口：仅装配（EP按需、pinia、router、指令、全局组件）
+├── App.vue
+├── api/                     # ★ 按功能域分目录，与 views 域目录同名
+│   ├── auth/                #   captcha.js mfa.js
+│   ├── user/                #   users.js roles.js permissions.js
+│   ├── rbac/                #   域小可单文件，大了再拆
+│   ├── system/              #   menu.js modules.js logs.js ...
+│   └── <domain>/            #   业务域
+├── views/                   # ★ 域目录与 api/ 一一对应
+│   ├── user/                #   Users.vue + components/XxxFormDialog.vue ...
+│   ├── <domain>/
+│   └── _builtin/            #   403/404/500/login 内置页统一收纳（soybean 范式）
+├── stores/                  # Pinia：一域一文件（auth.js menu.js site.js ...）
+├── composables/             # useXxx（依赖业务上下文的钩子）
+├── components/              # ★ 全局组件（需晋升，见第四章）
+├── layout/                  # 布局骨架（业务页只挂内容区，禁止重写布局）
+├── router/                  # index.js（含守卫） modules/（路由分文件）
+├── config/                  # theme.js modules.js（纯配置，无副作用导入）
+├── typings/                 # 全局契约类型（TS 渐进路线，soybean 四区）
+├── utils/                   # request.js permission.js（无状态工具）
+└── styles/                  # 全部文件必须有入口引用链
+```
+
+React 工程同构映射：`views→pages`、`composables→hooks`、`stores→store`（zustand slices）、`components→components`（含 barrel 出口）。
+
+### 2.2 层内规则（必须）
+
+1. **api 域目录与 views 域目录强制同名**（`api/cron/` ↔ `views/cron/`）；**禁止**在 api 根级别放散文件
+2. **store 文件名 = 导出名**（`stores/auth.js` → `useAuthStore`）；单 store ≤300 行；推荐 soybean 的「index + shared」目录式（状态编排与纯函数分离）
+3. **layout/ 是禁改区**：业务页通过页面容器组件的 header/slot 定制，不碰布局骨架（可裁剪底座的前提）
+4. **components/ 只放「晋升组件」**（见第四章晋升机制），新页面私有组件一律 `views/<域>/components/`
+
+### 2.3 可裁剪分层与模块开关（底座/脚手架推荐）
+
+```
+┌─────────────────────────────────────────────────────┐
+│ 壳层 shell      登录/MFA/403/500 —— 不挂主布局       │
+├─────────────────────────────────────────────────────┤
+│ 系统层 system   用户/RBAC/审计/设置 —— 底座自带      │
+├─────────────────────────────────────────────────────┤
+│ 示例层 examples 演示模块 —— fork 后可整层删除        │
+└─────────────────────────────────────────────────────┘
+```
+
+- 路由 `meta.layer: 'shell' | 'system' | 'examples'` 声明归属
+- 运行时开关：**源真相在后端**（如 `GET/PUT /api/system/modules`），localStorage 仅作缓存——**禁止**把 localStorage 当源真相
+- 构建期裁剪：环境变量（如 `VITE_ENABLE_EXAMPLES=false`）+ 路由中字面量比较，保证打包器 tree-shake 掉示例 chunk
+- 示例层代码**不得 import 系统层**内聚单元，保证整层可摘除；示例域附删除指引文档（EXAMPLES.md 惯例）
+
+**分层是目录结构之外的第二根轴**：每个新模块必须先回答「我在哪一层」。
+
+### 2.4 命名规范与类型目录
+
+| 对象 | 规范 | 示例 |
+|------|------|------|
+| 组件文件 | PascalCase | `UserFormDialog.vue` |
+| 工具 / composable | camelCase，composable 带 use 前缀 | `request.js`、`usePagedQuery.js` |
+| 目录 | kebab-case（views 域目录用业务域名） | `user-management/`、`cron/` |
+| store 文件 | 文件名与导出同名 | `stores/auth.js` → `useAuthStore` |
+| API 文件 | 资源名复数 | `api/user/users.js` |
+| 常量 | UPPER_SNAKE_CASE | `SYSTEM_ORDER` |
+
+类型目录（TS 渐进路线，soybean 范式）：全局契约类型集中 `typings/`（Api / App / Storage / Env 四区 namespace，storage 与 env 均键级类型）；页面私有类型随页面（`data.d.ts` / `utils/types.ts`）；**禁止**同一类型定义在多个组件内重复出现。
+
+---
+
+## 三、页面 co-location（adp 五件套）
+
+### 3.1 什么时候页面自带 service
+
+```
+全局 api/<域>/xxx.js     # 多页面复用、域级语义（users.js 的 list/create/delete）
+页面内 service.ts        # 只服务本页的接口（dashboard 聚合、报表导出）
+```
+
+判定：**接口第二个消费者出现时**，从页面 `service.ts` 提升到 `api/<域>/`。反向不成立——不要预防性提升。
+
+### 3.2 页面目录模板
+
+```
+views/<domain>/<Page>.vue          # 页面骨架：容器 + 列表组件 + 子组件编排（≤400 行）
+views/<domain>/components/         # 本页私有组件（表单弹窗、详情抽屉、单元格渲染器）
+views/<domain>/composables/        # 本页私有逻辑（可选，超过 2 个页面组件共享时建）
+views/<domain>/utils/              # 本页 hook/rule/types（pure 范式，可选）
+views/<domain>/EXAMPLES.md         # 仅示例层：删除指引
+```
+
+---
+
+## 四、公共组件晋升机制
+
+```
+第 1 次使用：写在页面 components/ 里
+第 2 次使用：复制一份，页面内注明来源        ← 允许的重复
+第 3 次使用：晋升 src/components/，删除两份复制 ← 必须执行
+```
+
+晋升时同步做三件事：
+
+1. **去业务化**：props 收口（`fetcher`/`permissions` 进来，具体 API 调用出去）
+2. **注册出口**：Vue 端全局组件在 `main.js` 注册；React 端进 `components/index.ts` barrel（adp：按「布局组件 / 业务组件」分组导出）
+3. **写使用说明**：组件头部注释 3 行（用途/必需 props/已知限制）
+
+必备的两个全局页面组件（详见 05/07 章）：**PageContainer**（页面容器：页头/面包屑/slot）与 **ListPage**（分页列表：fetcher + 筛选 slot + 表格透传 + 分页）。
+
+---
+
+## 五、架构守护：让目录约定不被腐蚀
+
+| 守护手段 | 出处 | 可落地做法 |
+|----------|------|------------|
+| 循环依赖扫描 | vben `check:circular` | `npx madge --circular src/` 进 CI |
+| 依赖方向检查 | vben `check:dep`（@core 禁依赖 UI 库） | 示例层禁 import 系统层：ESLint `no-restricted-imports` 按路径分组 |
+| 死代码检测 | adp coverage 排除生成物 | CI 跑 `knip`/`depcheck`，styles 无入口文件直接报错 |
+| 生成物隔离 | adp `services/ant-design-pro/`（OpenAPI 生成，禁手改） | 生成物独立目录 + lint ignore |
+| 路由自动收集 | pure `router/modules/` + `import.meta.glob` | 新增路由文件零注册代码 |
+
+---
+
+## 六、最佳实践清单
+
+✅ **要做**
+
+1. api 域目录与 views 域目录同名；新域从脚手架起步（自动生成五处对照：菜单/路由/页面/API/权限码）
+2. 页面私有组件不出页面目录；晋升走「三次法则」
+3. 每个新模块先声明 `meta.layer`，示例层保持可整层摘除
+4. store 按域拆分、文件名=导出名、单 store ≤300 行
+5. 目录结构变化（新增域/晋升组件/删示例）在同一 PR 内更新架构文档
+
+❌ **不要**
+
+1. 不要在 api 根级别放散文件
+2. 不要把页面私有组件直接丢进 `src/components/`
+3. 不要让业务页 import layout 内部组件（只准用 slot 协议）
+4. 不要建「future/」「temp/」「new/」这类无语义目录
+5. 不要保留无入口引用的样式文件和空目录
+
+---
+
+## 七、AI 检查清单（对比目标工程逐项核对）
+
+**P0**
+
+1. api 与 views 域目录是否同名对齐？有无 api 根级散文件？
+2. store 文件名与导出名是否一致？有无超 300 行的 store？
+3. 有无空目录、无引用样式、描述已不存在目录的文档残留？
+
+**P1**
+
+4. 页面骨架是否 ≤400 行？超 400 行的视图列出拆分建议（参照 07 章）
+5. 私有组件是否越界进全局 components/？全局组件是否都有注册出口与头注释？
+6. 若为可裁剪底座：meta.layer 是否全覆盖？模块开关源真相是否在后端？
+7. CI 是否有循环依赖与死代码检查？
+
+**P2**
+
+8. 是否值得引入路由文件自动收集（`router/modules/` + glob）或文件路由（soybean @elegant-router）？
+9. `typings/` 全局类型目录是否建立（Api/App/Storage/Env 四区）？
+
+---
+
+> 下一篇：[03-请求层与数据流](03-请求层与数据流.md) —— 前端工程的血管系统。
diff --git a/docs/web-ui-guide/03-请求层与数据流.md b/docs/web-ui-guide/03-请求层与数据流.md
new file mode 100644
index 0000000..8b2f807
--- /dev/null
+++ b/docs/web-ui-guide/03-请求层与数据流.md
@@ -0,0 +1,284 @@
+# 03 — 请求层与数据流
+
+> 参考：vue-vben-admin（RequestClient + refresh 队列）、soybean-admin（五钩子契约 + flat 返回）、vue-pure-admin（PureHttp 请求类）、ant-design-pro（ErrorShowType 契约）；补充：gin-vue-admin（loading 防抖、401 事件总线）
+
+---
+
+## 一、统一响应契约
+
+### 1.1 契约即协议
+
+请求层的第一件事不是封装 axios，而是**和后端签一份响应契约**。两种主流格式：
+
+```js
+// 格式 A：Go Gin / 多数国内后端惯例（gva 等）
+{ code: 0, data: {...}, msg: 'success' }        // code === 0 成功
+// 细分扩展：0 成功 / 200 成功 / 2 MFA 待验证 / 3 强制改密
+
+// 格式 B：adp（含错误展示声明）
+{ success: true, data: {...},
+  errorCode?: number, errorMessage?: string, showType?: ErrorShowType }
+```
+
+### 1.2 adp 的杀手锏：错误展示分级
+
+```ts
+// ant-design-pro: src/requestErrorConfig.ts
+enum ErrorShowType {
+  SILENT = 0,        // 静默：调用方自行处理
+  WARN_MESSAGE = 1,  // 轻提示 message.warning
+  ERROR_MESSAGE = 2, // 错误提示 message.error
+  NOTIFICATION = 3,  // 通知栏 notification
+  REDIRECT = 9,      // 重定向到错误页
+}
+```
+
+- 后端在响应里**声明这个错误该怎么展示**，前端按枚举分发——错误处理策略从「前端猜」变成「契约说」
+- 前端保留逃生口：`request(url, { skipErrorHandler: true })` 单请求关闭全局处理
+
+> **推荐**：在 `{code, data, msg}` 上加可选字段 `show_type`，前端默认 `ERROR_MESSAGE`，登录页/轮询接口传 `SILENT`。改动只在请求层一处。
+
+---
+
+## 二、请求层结构：从单例到客户端类
+
+### 2.1 三档演进
+
+```
+档1 单例 + 双拦截器（gva，230 行单文件）
+    适合：单应用、单一鉴权方式
+档2 工厂五钩子（soybean：RequestOption 契约 + createFlatRequest）
+    适合：错误契约复杂、想要扁平返回与错误码 env 化
+档3 客户端类 + 预设拦截器（vben RequestClient / pure PureHttp）
+    适合：多实例（业务 client / 裸 client）、上传下载 SSE 一等公民
+```
+
+### 2.2 vben 的 RequestClient 精髓
+
+```ts
+// vben: packages/effects/request/src/request-client/request-client.ts
+class RequestClient {
+  private instance: AxiosInstance
+  addRequestInterceptor / addResponseInterceptor   // 拦截器不写死，外部组装
+  upload / download / postSSE                      // 传输形态一等公民
+}
+
+// 预设拦截器（preset-interceptors.ts）按需装配：
+defaultResponseInterceptor({ codeField, dataField, successCode })  // 解包策略可配置
+authenticateResponseInterceptor                                    // 401 + refresh
+errorMessageResponseInterceptor                                    // status→文案
+```
+
+应用组装处（`apps/web-antd/src/api/request.ts`）导出两个实例：
+
+- `requestClient`：`responseReturn: 'data'`，业务用（自动剥壳）
+- `baseRequestClient`：`responseReturn: 'raw'`，刷新 token 等裸接口用（**刷新接口自己不能被自己的拦截器拦**）
+
+### 2.3 soybean 的五钩子契约与 flat 返回（★★★★☆ 工厂化范式）
+
+soybean 把请求协议下沉为 workspace 包 `packages/axios`，业务侧只实现五个钩子：
+
+```ts
+interface RequestOption<ResponseData, ApiData> {
+  transform: (res) => ApiData                          // 解包
+  onRequest: (config) => config                        // 注入 token
+  isBackendSuccess: (res) => boolean                   // 业务 code 判定
+  onBackendFail: (res, instance) => Promise<AxiosResponse | null> // 失败处理（可重发）
+  onError: (error) => void                             // 错误提示
+}
+// createRequest：失败抛异常（传统风格）
+// createFlatRequest：返回 { data, error, response }，业务层 if (!error) —— Rust 风格扁平返回
+```
+
+另两条可迁移细节：**错误码策略 env 化**（`VITE_SERVICE_LOGOUT_CODES` 直接登出 / `MODAL_LOGOUT_CODES` 模态登出 / `EXPIRED_TOKEN_CODES` 刷新重发，三级以配置区分）；**错误消息栈去重**（errMsgStack 防并发轰炸）。pure 的 `PureHttp` 类（196 行单文件）则是轻量级范本：qs 序列化数组参数、请求前本地判断 expires **提前刷新**（而非 401 后补救）、per-request 回调可覆盖全局拦截器。
+
+---
+
+## 三、Token 与 401：单飞刷新是铁律
+
+### 3.1 问题：并发 401 的竞态
+
+```
+请求A ──401──▶ 刷新token(旧1) ──▶ 重放A ✔
+请求B ──401──▶ 刷新token(旧1) ──▶ 后端拒（旧1已消费）──▶ B 被踢出登录 ✘
+```
+
+### 3.2 正确姿势：单飞标志 + 等待队列（vben）
+
+```ts
+// vben: authenticateResponseInterceptor
+if (client.isRefreshing) {
+  return new Promise((resolve) => client.refreshTokenQueue.push((token) => {
+    config.headers.Authorization = `Bearer ${token}`
+    resolve(client.instance.request(config))       // 拿新 token 后重放
+  }))
+}
+client.isRefreshing = true
+try { const newToken = await doRefresh(...) } finally { client.isRefreshing = false }
+config.__isRetryRequest = true                      // 防无限循环
+```
+
+pure 用同构的静态成员实现（`isRefreshing` + `requests[]` 队列，刷新成功 `requests.forEach(cb => cb(token))` 重放）；soybean 用共享 Promise 单飞（`state.refreshTokenPromise`，1 秒后置 null）。**三家殊途同归：并发 N 个过期请求只触发一次刷新。**
+
+pure 的补充思路：**提前刷新**——token 三元组（accessToken/expires/refreshToken）存 Cookie，请求前本地判断 `expires - now <= 0` 主动刷新，把过期处理从「响应后补救」变成「请求前预防」（白名单短路 `/refresh-token`、`/login` 防死循环）。
+
+### 3.3 刷新失败后的三种落法
+
+| 落法 | 出处 | 适用 |
+|------|------|------|
+| 全局错误对话框确认后清 token 跳登录（事件总线单例防重复弹） | gva `emitter.emit('show-error')` | 多请求并发过期时体验最好（只弹一个框） |
+| 登录过期 Modal（原页面保留，重登后继续） | vben `loginExpiredMode: 'modal'` | 长表单场景，避免填一半全丢 |
+| 防抖单次跳转（最简可靠） | 常见轻实现 | 跳转加防抖标志；错误救援页（500/403）只清不跳，防按钮失效 |
+
+> 共同底线：**并发 N 个 401 只产生一次副作用**（一个弹窗/一次跳转）；登录页与轮询接口静默（`SILENT`）。
+
+---
+
+## 四、全局 loading 防抖（补充模式：gva）
+
+```js
+// gva: utils/request.js（要点提炼）
+let activeAxios = 0            // 并发计数器
+let timer = null
+const showLoading = (persist) => {
+  if (timer) clearTimeout(timer)
+  activeAxios++
+  if (persist) { ... return }                    // 长任务：立即显示且不自动关
+  timer = setTimeout(() => showFullScreenLoading(), 400)  // 400ms 防闪烁
+}
+const closeLoading = () => {
+  activeAxios--
+  if (activeAxios <= 0) { clearTimeout(timer); hide(); } // 全部结束才隐藏
+}
+// 兜底：30s 强制关闭；beforeunload 重置；单请求 donNotShowLoading 关闭
+```
+
+三个数字都是经验值：**400ms**（快请求不闪 loading）、**30s**（loading 不可能永远转）、**计数器**（并发请求只显示一个 loading）。若引入全局 loading，按此方案。
+
+---
+
+## 五、取消与防错序
+
+### 5.1 为什么列表页必须取消旧请求
+
+```
+用户输入 "a" → 请求1发出
+用户补输入 "ab" → 请求2发出
+请求2先回 → 渲染 "ab" 结果 ✔
+请求1后回 → 覆盖渲染 "a" 结果 ✘   ← 错序覆盖（stale response）
+```
+
+### 5.2 双重防护（列表页标准实现）
+
+```js
+// composables/usePagedQuery.js —— 取消 + 版本号双保险
+let abortController = null
+let requestVersion = 0
+
+const fetchList = async () => {
+  abortController?.abort()               // ① AbortController 取消旧请求
+  const currentVersion = ++requestVersion // ② 版本号令牌
+  const res = await fetcher(params)
+  if (currentVersion !== requestVersion) return  // 过期响应直接丢弃
+  tableData.value = res.results
+}
+```
+
+这是列表页的**强制标准**：所有带筛选/分页的列表页必须走「AbortController + 版本号」双重防护，**禁止**页面手写裸请求循环。
+
+注：vben v5 并未内置请求去重（取消能力委托 axios 原生 config，`axios.isCancel` 静默透传）——**不要假设大而全的框架替你解决了这个问题**。soybean 另有 `cancelAllRequest`（nanoid 请求 ID + AbortControllerMap）作页面级批量取消。
+
+### 5.3 重试与缓存策略
+
+- **重试**：仅幂等 GET 且网络类错误（timeout / network error）自动重试，1-2 次指数退避（soybean 内置 axios-retry；需要时引入 axios-retry，**禁止**手写循环重试）。**禁止**对 POST / PUT / DELETE 自动重试
+- **缓存**：字典 / 枚举类走缓存型 store（gva `dictionary.js` 范式：缓存 key 生成 + 参数校验，避免重复请求）；列表页交给组件态 + 取消，不做全局缓存；React 端用 React Query 的 `queryKey` 失效模型（adp 范式：mutation 成功 → `invalidateQueries`）
+- **判定**：同一数据被两个页面重复请求同一接口 = 该进缓存层，或该提升到全局 store 了
+
+---
+
+## 六、状态分层：什么数据进 store
+
+### 6.1 判定表
+
+| 数据 | 归属 | 标杆范式 |
+|------|------|----------|
+| token / 用户信息 / 权限码 | 全局 store，**持久化 pick 白名单**（只挑必要字段） | vben `persist.pick`；pure Cookie 三元组 + localStorage 用户信息 |
+| 服务端菜单 / 动态路由表 | store（内存），**不落盘**（重登重拉，防止旧菜单闪现） | vben access store；pure 可选缓存需显式配置 |
+| 列表数据 / 详情 | **不进全局 store**：组件内 usePagedQuery / React Query | adp：`queryKey:[资源名]`，mutation 成功 `invalidateQueries` |
+| 字典 / 短枚举 | 缓存型 store，带缓存 key 去重请求 | gva `dictionary.js`、soybean dict |
+| 主题 / UI 偏好 | 独立于业务 store 的偏好系统 | vben PreferenceManager（见 06 章） |
+| 筛选 / 分页 / Tab 状态 | **URL query**，永远不复制进 store | 通用 |
+
+### 6.2 登录编排（vben 范式）
+
+```ts
+// store/auth.ts —— 登录是一个编排函数，不是散落的事件
+async function authLogin(params) {
+  const { accessToken } = await loginApi(params)
+  setAccessToken(accessToken)
+  const [userInfo, accessCodes] = await Promise.all([fetchUserInfo(), getAccessCodesApi()])
+  router.push(homePath)
+}
+```
+
+配套要求：**禁止**在生产日志打印 token 片段；`isLoggedIn` 以内存态 + token 存在性为准，不依赖 localStorage 残留字段。pure 的 `useXxxStoreHook()` 模式保证拦截器/守卫等 setup 外代码也能安全取 store。
+
+---
+
+## 七、双端一致性要求（迁移期）
+
+同产品双栈并存时，请求层**必须**满足：
+
+| 项 | 要求 |
+|----|------|
+| token key | 两端同名（推荐 `<app>.auth.token`；迁移期「读旧写新」一个版本） |
+| refresh 机制 | 两端同构（单飞 + 队列重放），副端不允许退化成「401 直接跳登录」 |
+| 响应契约 | 同一份 code/data/msg 约定与错误分级 |
+| mock | **显式模式**（dev 开关/页面级声明），**禁止**运行时因网络错误静默回退假数据（adp：mock 是构建模式不是运行时兜底） |
+
+---
+
+## 八、最佳实践清单
+
+✅ **要做**
+
+1. 组件永远 import `api/<域>` 函数，不直接碰 axios 实例（**禁止** store 绕过 API 层裸调）
+2. 每个请求函数带注释（用途/参数/返回）+ 类型（`request<Api.Xxx>` 或 JSDoc）
+3. 刷新 token 的请求用裸 client，绕过业务拦截器
+4. 401 副作用全局单例（一个弹窗/一次跳转），登录页与轮询接口静默
+5. 列表请求一律可取消（AbortController）+ 版本号防错序
+
+❌ **不要**
+
+1. 不要在拦截器里 `return error` 而非 `Promise.reject(error)`（gva 现存 bug，调用方 catch 不到）
+2. 不要在组件里 try/catch 后吞错不提示（错误要么展示要么显式静默）
+3. 不要把 token 存两套 key
+4. 不要在请求层 import 具体页面组件（保持依赖单向）
+5. 不要对同一资源做无缓存的重复并发请求
+
+---
+
+## 九、AI 检查清单（对比目标工程逐项核对）
+
+**P0**
+
+1. 是否存在组件/store 绕过 API 层直接调 axios 实例的代码？
+2. 401 刷新是否单飞（isRefreshing/队列/共享 Promise 任一实现）？并发过期是否只产生一次副作用？
+3. 是否有「网络错误静默回退 mock」类逻辑在生产路径上？
+4. 拦截器错误分支是否 `Promise.reject`？是否有 token 打印类调试日志残留？
+
+**P1**
+
+5. 列表页是否全部走「取消 + 版本号」方案？手写裸请求循环的页面列出迁移清单
+6. 错误提示是否分级（showType / silent 逃生口）？登录页与轮询是否静默？
+7. token/用户信息持久化是否 pick 白名单？菜单/路由是否落盘（不应落盘）？
+8. 字典/枚举是否有缓存层？重复并发请求同一资源的情况列出
+
+**P2**
+
+9. 是否值得升级到档 2/3（五钩子工厂 / RequestClient 类）？判断标准：多实例需求或错误契约复杂度
+10. 是否引入 axios-retry（幂等 GET）与错误码 env 化？
+
+---
+
+> 下一篇：[04-路由与权限控制](04-路由与权限控制.md) —— meta 是路由的灵魂。
diff --git a/docs/web-ui-guide/04-路由与权限控制.md b/docs/web-ui-guide/04-路由与权限控制.md
new file mode 100644
index 0000000..fbb6ce8
--- /dev/null
+++ b/docs/web-ui-guide/04-路由与权限控制.md
@@ -0,0 +1,236 @@
+# 04 — 路由与权限控制
+
+> 参考：vue-vben-admin（RouteMeta 30+ 字段、三种 access 模式）、soybean-admin（文件路由 + static/dynamic 一键切换）、ant-design-pro（access 纯函数）、vue-pure-admin（两级按钮权限）；补充：gin-vue-admin（动态路由链路）
+
+---
+
+## 一、路由组织：静态、动态与混合
+
+### 1.1 三种模式
+
+```
+frontend 模式：前端静态全量路由 + 按角色过滤
+  优点 简单、无接口依赖      缺点 菜单改动要发版
+backend 模式：后端下发菜单树 + import.meta.glob 组件映射（vben / pure / gva）
+  优点 运营可配菜单          缺点 链路长、需处理守卫竞态
+mixed 模式：本地静态路由 + 按 name 合并后端菜单（vben mergeRoutesByName）
+  优点 开发体验与可配置性兼得 缺点 命名纪律要求高
+```
+
+soybean 的成熟做法：用 `.env` 的 `VITE_AUTH_ROUTE_MODE=static|dynamic` **一键切换**两种模式（静态按 `meta.roles` 过滤本地路由 / 动态接收后端下发 ElegantConstRoute），两态殊途同归后统一装配菜单——**模式切换是配置而非代码**，底座工程的成熟标志。
+
+**推荐**（多数中后台）：「**路由静态、菜单动态**」的轻混合——路由决定 chunk 划分与守卫行为，宜稳；菜单决定导航展示，宜活。需要运营完全可配时再上 backend 模式。
+
+### 1.2 backend 模式的实现链路（补充：gva 全链路；vben generateAccessible 同类实现更工程化）
+
+```
+POST /menu/getMenu（菜单树，component 为字符串路径 'view/layout/index.vue'）
+  → import.meta.glob('../view/**/*.vue') 按路径字符串匹配懒加载组件（pure 同款）
+  → 守卫 addRoute（asyncRouterFlag 防重复注册）
+  → 多级菜单递归扁平化为「layout + 二级路由」（pure：keep-alive 只支持二级）
+  → routeMap（name→route）支撑菜单/keep-alive/参数查询
+```
+
+三个易踩坑，标杆都给了答案：
+
+1. **守卫竞态**：动态 addRoute 后当前导航拿不到新路由 → 注册后需 `return to.fullPath` 重新 resolve 一次（vben：`generateAccess` 后 re-resolve）
+2. **防重复注册**：`asyncRouterFlag` / `isAccessChecked` 标志位（pure：刷新时 `wholeMenus.length === 0` 才重建）
+3. **对象冻结**：`to.meta.matched = [...to.matched]` 浅拷贝进 meta 供面包屑使用（直接引用会被冻结）
+
+soybean 的差异化：**文件路由自动化**（@elegant-router）——`src/views` 目录即路由，生成物含 `RouteKey`/`RouteMap` 字面量联合类型，`routerPush({ name: 'user-center' })` 全程类型安全。开发者不写路由文件，新增页面自动获得路由与菜单。
+
+---
+
+## 二、RouteMeta 规范：meta 驱动一切 UI 行为
+
+### 2.1 vben 的启示
+
+vben 给 RouteMeta 定义了 30+ 强类型字段（全 JSDoc 注释），菜单/标签页/面包屑/缓存/权限行为**全部由 meta 声明**，布局组件只消费 meta 不写死逻辑：
+
+```ts
+authority?: string[]        // 允许的角色
+ignoreAccess?: boolean      // 免鉴权（如关于页）
+menuVisibleWithForbidden?: boolean  // 菜单可见但访问 403（三态权限关键）
+hideInMenu / hideInTab / hideInBreadcrumb / hideChildrenInMenu
+keepAlive?: boolean         // 组件缓存
+order?: number              // 菜单排序
+affixTab?: boolean          // 标签页固定
+iframeSrc / link / activePath / noBasicLayout
+```
+
+soybean 同款（17 字段强类型扩展 `declare module 'vue-router'`），pure 用 `CustomizeRouteMeta` + 逐字段中文注释。
+
+### 2.2 标准 meta 集（必须的最小集）
+
+```js
+// 每条路由必须声明的能力面
+{
+  path: '/users',
+  component: () => import('@/views/user/Users.vue'),
+  meta: {
+    title: '用户管理',          // document.title 与面包屑用
+    layer: 'system',           // shell | system | examples（可裁剪分层归属，底座工程必须）
+    icon: 'user',              // 菜单图标（图标名是数据）
+    permissions: ['user.view'],// 命中任一即放行；'*'/admin/超管角色 短路
+    roles: ['admin'],          // 可选，角色级收紧
+    keepAlive: false,          // 需要缓存的页面必须同时写 defineOptions name
+    hideInMenu: false,
+  }
+}
+```
+
+**纪律**：meta 是路由的**唯一**能力声明处，且**必须有类型契约**（`router.d.ts` 模块扩充）。**禁止**「路由里一个 permission、菜单表里又一个 permission」双源人工同步。
+
+---
+
+## 三、守卫链设计
+
+### 3.1 标准守卫流水线
+
+```
+① 白名单直通（login/mfa/403/500 等 shell 路由）
+② token 检查（无 token → login?redirect=encodeURIComponent(fullPath)）
+③ 已登录访问 login → 重定向首页
+④ 权限检查（meta.permissions 任一命中 / meta.roles）
+⑤ NProgress + document.title + 主区滚动复位
+⑥ onError：chunk 加载失败 → reload 一次（防发版后旧 chunk 404）
+```
+
+第 ⑥ 条与 adp 的 `ErrorBoundary 识别 ChunkLoadError → retryCount 作 key 强制重挂载 lazy` 异曲同工（一个在路由层救，一个在组件层救）——发版后旧 hash chunk 404 是必现事故，**必须**有恢复机制。
+
+### 3.2 防开放重定向（安全底线，必须）
+
+```ts
+// adp: src/pages/user/login —— redirect 只允许同源相对路径
+function getSafeRedirectUrl(redirect?: string) {
+  if (!redirect || /^https?:\/\//i.test(redirect)) return '/'
+  return redirect.startsWith('/') ? redirect : `/${redirect}`
+}
+```
+
+redirect 参数编码传输 + 回跳侧**协议黑名单校验**（禁止 `//evil.com`、`https://evil.com`）。
+
+### 3.3 React 端对照
+
+- `RequireAuth`（未登录跳转 + 403 渲染）结构正确即可
+- 路由渲染**必须**声明式（配置数组 + `<Route>`），权限字段语义与 Vue 端 meta 同名对齐
+
+---
+
+## 四、权限三粒度
+
+### 4.1 粒度模型
+
+```
+路由级（页面能否访问）
+  meta.permissions / meta.roles —— 守卫拦截，403 兜底页
+菜单级（导航显不显示）
+  服务端菜单 + 前端模块开关兜底过滤
+按钮级（操作能不能点）
+  指令 / 组件 / 函数 —— 至少支持一种，语义全站统一
+```
+
+### 4.2 权限三态（vben 的关键设计）
+
+| 态 | 行为 | meta |
+|----|------|------|
+| 不可见 | 菜单过滤 + 路由拒绝 | 默认（authority 不命中） |
+| 可见但禁止 | 菜单显示，点进去 403 | `menuVisibleWithForbidden: true` |
+| 放行 | 全通过 | authority 命中 / `ignoreAccess` |
+
+无权限但想让用户知道功能存在的运营场景，用态 2（前端只需 403 页 + 菜单过滤豁免，成本低）。
+
+### 4.3 按钮级实现对照
+
+| 实现 | 出处 | 语义 | 失败行为 |
+|------|------|------|----------|
+| 指令 `v-auth` | gva `directive/auth.js` | 角色串比对，`.not` 修饰符 | `el.remove()`（DOM 摘除） |
+| 指令 `v-access:code` | vben | 权限码/角色双模式 | `el.remove()` |
+| 函数 `hasAuth()` | soybean | 权限码，一个 hook 覆盖 90% 场景（不造指令/组件） | `v-if` 不渲染（纯函数可单测） |
+| 双轨 `v-auth`/`v-perms` | pure | 路由 meta.auths（功能级）与登录 permissions（接口级）两级，`*:*:*` 超管通配 | `el.remove()` |
+| 组件 `<AccessControl>` | vben | 包裹式 | 插槽不渲染（可配 fallback） |
+
+**规范**：指令用于「无权就不存在」；需要「无权置灰 + tooltip 解释」时用组件包裹。**禁止**用 `v-if + 手写权限字符串比较` 绕开统一入口（权限字符串散落是审计灾难）。soybean 的取向值得参考：**权限判断优先做成可组合函数**（逻辑可单测、不依赖模板编译），指令只是函数的语法糖。
+
+### 4.4 权限计算要纯函数化（adp）
+
+```ts
+// src/access.ts —— 权限是 initialState 的纯函数，可单测穷举
+export default function access(initialState) {
+  const { currentUser } = initialState ?? {}
+  return {
+    canAdmin: currentUser && currentUser.access === 'admin',
+    canUser: (code: string) => currentUser?.permissions?.includes(code),
+  }
+}
+```
+
+**禁止**在前端硬编码「角色→权限」映射表——后端 RBAC 是唯一源真相，前端硬编码映射必然脱节，属死代码。
+
+---
+
+## 五、菜单生成
+
+### 5.1 两种数据流
+
+```
+A. 路由驱动（adp）：config/routes.ts 集中声明 → ProLayout 自动生成菜单
+   name 字段即 i18n key（menu.xxx），菜单名与路由单源
+B. 接口驱动（vben/pure/gva）：GET /auth/menu → 前端自建树 → 递归渲染
+   后端可配（hidden/icon/order/外链），前端兜底过滤
+```
+
+### 5.2 菜单组件规范（必须）
+
+- 前端按**分组规则**（如 workspace→business→system 三段）建树，`SYSTEM_ORDER` 类常量定序
+- **模块开关兜底过滤**：菜单接口没过滤掉的，前端再筛一次（后端是源真相，前端是最后防线）
+- **加载失败显示重试按钮**，不留空白侧栏（菜单是导航生命线）
+- 高亮：外链/iframe 路由用 `meta.activePath` 指回正确菜单项
+- 菜单数据不持久化（重登重拉，防旧菜单闪现）
+
+---
+
+## 六、最佳实践清单
+
+✅ **要做**
+
+1. 新路由必须写全 meta 最低三件：title / layer（底座工程）/ permissions
+2. keepAlive 路由的页面组件**必须** `defineOptions({ name })`（keep-alive include 按组件名匹配；pure/gva 以 vite 插件扫描校验）
+3. redirect 参数编码传输 + 回跳侧同源校验
+4. 权限判断统一走 permission 工具层，语义双端同名
+5. 路由 meta 有类型契约（`router.d.ts` 模块扩充）
+
+❌ **不要**
+
+1. 不要在前端硬编码角色→权限映射（后端 RBAC 是唯一源真相）
+2. 不要用 v-if 手写权限字符串比较
+3. 不要在守卫里做异步重活（拉菜单/用户信息放登录编排或首屏初始化，守卫只做检查）
+4. 不要让示例层路由 import 系统层组件（破坏可裁剪性）
+5. 不要权限配置文件双份并存（漂移源头）
+
+---
+
+## 七、AI 检查清单（对比目标工程逐项核对）
+
+**P0**
+
+1. 路由 meta 是否有类型契约？是否存在「路由权限 + 菜单权限」双源人工同步？
+2. redirect 回跳是否有同源校验（防开放重定向）？
+3. 是否存在前端硬编码「角色→权限」映射（应删）？
+4. chunk 加载失败是否有恢复机制（onError reload / ErrorBoundary）？
+
+**P1**
+
+5. keepAlive 链路是否完整（meta.keepAlive + defineOptions name + include 匹配）？缺 name 的缓存页面列出
+6. 按钮权限是否统一入口（指令/组件/函数三选一，禁止散落 v-if 比较字符串）？
+7. 菜单失败是否有重试 UI？菜单是否被错误地持久化？
+8. 路由渲染（React 端）是否声明式？
+
+**P2**
+
+9. 是否值得引入文件路由自动化（soybean @elegant-router / pure `router/modules/` glob 收集）？
+10. 是否需要权限三态中的「可见但 403」（运营诉求）？
+
+---
+
+> 下一篇：[05-布局系统与导航设计](05-布局系统与导航设计.md) —— 布局是业务的舞台，不是业务本身。
diff --git a/docs/web-ui-guide/05-布局系统与导航设计.md b/docs/web-ui-guide/05-布局系统与导航设计.md
new file mode 100644
index 0000000..b4e25fe
--- /dev/null
+++ b/docs/web-ui-guide/05-布局系统与导航设计.md
@@ -0,0 +1,234 @@
+# 05 — 布局系统与导航设计
+
+> 参考：vue-vben-admin（三层布局架构）、soybean-admin（layouts/modules 按功能拆分）、ant-design-pro（ProLayout 运行时配置）、vue-pure-admin（布局三模式）；补充：gin-vue-admin（侧栏模式/标签页/水印）
+
+---
+
+## 一、布局的分层架构
+
+### 1.1 vben 三层模型（理解布局复杂度的标尺）
+
+```
+┌─ 内核层 @core/ui-kit/layout-ui ──────────────────────┐
+│  headless 布局引擎：40 个 props + defineModel        │
+│  （布局模式/头部模式/侧栏宽度折叠悬停），不认识 store   │
+├─ 业务层 effects/layouts ─────────────────────────────┤
+│  把 preferences 逐项映射为内核 props；               │
+│  组装 15 个可插拔部件（面包屑/主题切换/搜索/锁屏…）    │
+├─ App 层 layouts/basic.vue ───────────────────────────┤
+│  只用插槽填内容（#user-dropdown #notification …）     │
+└──────────────────────────────────────────────────────┘
+```
+
+soybean 的同构做法：布局引擎抽成 `packages/materials`（AdminLayout/PageTab/SimpleScrollbar），`src/layouts/base-layout/` 只是配置消费者，`layouts/modules/global-*` 按功能拆分（header/sider/tab/breadcrumb/search/footer/theme-drawer）。pure 提供 vertical/horizontal/mix 三种布局模式运行时可切。
+
+**设计要义**：布局引擎与业务解耦（内核不依赖状态库），布局模式是**运行时偏好**而非构建期选择。
+
+### 1.2 单文件 Layout 的取舍（中小工程）
+
+300 行左右的单文件 Layout（el-container 侧栏 + 顶栏 + main）对单布局产品是**正确选择**——不要为了架构美引入三层。分层触发条件：
+
+- 出现第 2 种布局模式（如「无侧栏全屏监控大屏」）
+- 布局配置需要用户可调（折叠宽度/头部固定/水印）
+- 布局代码超过 500 行开始挤压可读性
+
+无论哪种形态：**业务页挂在内容区（页面容器组件协议），禁止重写布局层**。
+
+---
+
+## 二、布局骨架与尺寸规范
+
+### 2.1 管理端标准骨架
+
+```
+┌──────────────────────────────────────────────────────┐
+│ Topbar 48px │ 页标题 · 面包屑 │ 暗色切换 · 用户下拉   │
+├──────────┬───────────────────────────────────────────┤
+│ Sidebar  │                                           │
+│ 220px    │              main                          │
+│ (折叠64) │         <router-view>                      │
+│          │         PageContainer                      │
+│ 分组：    │                                           │
+│ 按层定序  │   页头（标题/描述/操作按钮）                │
+│          │   内容卡片（24px 内边距）                   │
+└──────────┴───────────────────────────────────────────┘
+```
+
+### 2.2 尺寸规范表（推荐值）
+
+```
+侧栏宽度        220px（折叠 64px，<1200px 自动折叠）
+顶栏高度        48-56px
+页面内边距       24px（紧凑模式 16px）
+卡片间距         16px
+卡片圆角         8px（--el-border-radius-base 级）
+按钮/输入高度    32px（default size）
+图标            16px 主图标 / 12px 辅助
+正文字号        14px；辅助 12px；页面标题 18-20px
+移动端断点       <768px 侧栏变覆盖式抽屉 + backdrop
+```
+
+### 2.3 卡片构成规范（视觉一致性的最小单位）
+
+页面 = 卡片的组合，卡片写法全站统一：
+
+```
+构成      背景 bg-card + 描边 border-base 或 阴影 shadow-1（全站二选一，禁止混用）
+内边距     20-24px；卡片内区块间距 16px；卡片之间间距 16px
+标题区    卡片标题 16px/600 + 右侧操作区（同一基线对齐）
+页头      页面标题 18-20px/600 + 副标题 13px 次要色；页头与内容区间距 16px
+指标卡    数字 24-28px/600 + tabular-nums + 环比箭头（涨跌语义色，方向全站统一）
+```
+
+---
+
+## 三、侧栏与导航
+
+### 3.1 侧栏必备能力清单
+
+| 能力 | 实现要点 | 出处 |
+|------|----------|------|
+| 折叠 | 图标态切换；`<1200px` 自动折叠；移动端强制抽屉 | gva/pure |
+| 高亮 | 路由激活态；外链/iframe 用 `meta.activePath` 指回 | vben `activePath` |
+| 分组 | 前端按 layer 分组 + 常量定序，服务端菜单为准 | 常见底座实现 |
+| 图标 | icon 名是数据（菜单表字段），前端映射渲染 | gva/pure/soybean |
+| 失败重试 | 菜单接口失败显示重试入口，不留空白 | 通行要求 |
+| 外链 | `window.open` 新窗；不注册路由 | gva `link` |
+
+### 3.2 可选演进：标签页（tabs）
+
+功能完整参照（gva 280 行 / pure multiTags / vben tabs-ui）：sessionStorage 持久化、tab key = `name + query + params`（同路由不同参数多开）、右键菜单（关左/关右/关其他）、中键关闭、首页不可关、`meta.closeTab` 不留痕；vben 再加 affixTab 固定、maxNumOfOpenTab 上限、拖拽排序。
+
+**引入判断**：运维/排障类平台（多工位切换频繁）收益大；配置型后台收益小。做了标签页**必须**解决 keep-alive 联动（否则切 tab 丢状态）。
+
+---
+
+## 四、Keep-Alive 链路（做对了很隐形，做错了很诡异）
+
+```
+路由 meta.keepAlive: true
+  → 页面组件 defineOptions({ name: 'UserList' })   ← 强约定！
+  → layout 中 <keep-alive :include="cachedNames">
+  → 刷新：keepAlive 页销毁重建 toggle；非缓存页跳隐藏 Reload 路由（gva 双轨）
+```
+
+**为什么必须 defineOptions name**：keep-alive 的 include 匹配的是**组件名**而非路由名。script setup 组件默认匿名，不写 name 缓存必然失效。gva/pure 以 Vite 插件扫描生成「路径→组件名」映射做校验——**推荐**「组件 name 与路由 name 同名」并用 lint 守住（`vue/name` 规则）。
+
+pure 的补充经验：**三级以上路由拍平成二级**再注册（keep-alive 只对二级稳定生效，社区已知问题）。
+
+---
+
+## 五、页面模板（新页面从这里复制起步）
+
+### 5.1 列表页（最高频模板）
+
+```
+┌─────────────────────────────────────────────────┐
+│ PageContainer #header                            │
+│   批量删除 · 导入 · [+ 新增]        ← 按钮级权限  │
+├─────────────────────────────────────────────────┤
+│ ListPage                                         │
+│  ├ filters slot：关键字/状态/日期筛选 [查询][重置] │
+│  ├ el-table（操作列 fixed right，状态列 tag 化）  │
+│  └ el-pagination（10/30/50/100）                 │
+├─────────────────────────────────────────────────┤
+│ 对话框子组件：XxxFormDialog / ResetDialog / …     │
+└─────────────────────────────────────────────────┘
+```
+
+范式要点：
+
+1. 页面只做「编排」：容器 + 列表组件 + 子组件组合，本身 ≤400 行
+2. 数据获取走列表组件的 fetcher（内嵌「取消 + 版本号」双重防护，见 03 章）
+3. 表单弹窗独立成 `components/XxxFormDialog.vue`，通过 props/emit 通信
+4. 操作按钮逐个挂权限控制
+
+### 5.2 详情/编辑页
+
+```
+┌─────────────────────────────────────────────┐
+│ ← 返回    编辑用户          [保存]           │
+├─────────────────────────────────────────────┤
+│ ┌─ 基本信息 ────────────────────────────┐   │
+│ │ 分组卡片：descriptions 只读态          │   │
+│ └───────────────────────────────────────┘   │
+│ ┌─ 高级设置 ────────────────────────────┐   │
+│ │ 表单区：危险操作独立分区（红色警示卡）    │   │
+│ └───────────────────────────────────────┘   │
+└─────────────────────────────────────────────┘
+```
+
+### 5.3 仪表盘页
+
+```
+┌─────────────────────────────────────────────┐
+│ 4-6 张指标卡（数字 + 环比箭头）               │
+├──────────────────┬──────────────────────────┤
+│ 折线图（趋势）     │ 饼图/柱状（分布）         │
+├──────────────────┴──────────────────────────┤
+│ 最近活动列表 / 快捷入口                       │
+└─────────────────────────────────────────────┘
+```
+
+图表规范：ECharts **按需引入**（`echarts/core` + 按需 register，**禁止**全量 import echarts）；图表区懒加载 + loading 占位；WebSocket 实时图必须处理「组件卸载断开连接 + 重连退避」；图表色板从主题变量读取（见 06 章）。
+
+### 5.4 空态页
+
+图标 + 一句话 + 引导动作（如「模块未启用 → 查看启用步骤」）是「功能未开启」的统一形态。
+
+---
+
+## 六、响应式策略
+
+| 断点 | 行为 |
+|------|------|
+| ≥1200px | 完整布局 |
+| 768-1200px | 侧栏自动折叠为图标态 |
+| <768px | 侧栏变覆盖式抽屉 + backdrop；表格横向滚动；弹窗宽度 90% |
+
+实现参照（gva `hooks/responsive.js`、soybean 断点写回 store）：resize 监听 + **100ms debounce** 写入全局 device 状态（`desktop | mobile`），布局组件只读状态不各自监听。弹窗移动端宽度走全局配置统一控制。
+
+---
+
+## 七、最佳实践清单
+
+✅ **要做**
+
+1. 业务页挂内容区（页面容器协议），**禁止重写 layout/**
+2. 页面标题来自 `route.meta.title`，不硬编码
+3. 可访问性：折叠钮/菜单项带 aria-label
+4. 布局状态（折叠）持久化，key 纳入全局命名空间（见 08 章双端一致）
+5. 路由切换动画统一一种（fade 150ms），`transition` 包 `router-view`
+
+❌ **不要**
+
+1. 不要在业务页写 fixed 定位的伪头部（与 Topbar 层级打架）
+2. 不要侧栏菜单硬编码（数据源走菜单 store）
+3. 不要绕过页面容器自造页面容器（内边距/面包屑/页头规范会失控）
+4. 不要在移动端保留 hover-only 交互（用点击展开兜底）
+5. 不要保留空目录和过期布局文档
+
+---
+
+## 八、AI 检查清单（对比目标工程逐项核对）
+
+**P0**
+
+1. 业务页面是否有绕过页面容器、直接改写布局层的代码？
+2. 页面标题是否单源（meta.title）？硬编码标题清单列出
+
+**P1**
+
+3. 超过 500 行的 Layout / 超过 400 行的视图页面列出，并给拆分建议（参照 07 章）
+4. keepAlive 链路是否完整（meta + defineOptions name + include）？
+5. 响应式三断点行为是否齐全？弹窗移动端宽度是否有适配？
+6. ECharts 是否按需引入？WebSocket 是否有卸载断开与重连退避？
+
+**P2**
+
+7. 是否值得引入标签页（多工位场景）？若引入，keep-alive 联动方案确认
+8. 是否值得布局引擎化（出现第二种布局模式时）
+
+---
+
+> 下一篇：[06-主题系统与视觉设计](06-主题系统与视觉设计.md) —— 换肤只改变量，不引第二套样式。
diff --git a/docs/web-ui-guide/06-主题系统与视觉设计.md b/docs/web-ui-guide/06-主题系统与视觉设计.md
new file mode 100644
index 0000000..d74a4b8
--- /dev/null
+++ b/docs/web-ui-guide/06-主题系统与视觉设计.md
@@ -0,0 +1,316 @@
+# 06 — 主题系统与视觉设计
+
+> 参考：vue-vben-admin（HSL Token + Tailwind 桥接 + CSS layer + EP 适配器）、soybean-admin（单一 ThemeSetting 类型 + 三端同步）、vue-pure-admin（EP↔Tailwind v4 变量桥接）、ant-design-pro（antd token + data-theme）；补充：gin-vue-admin（EP SCSS 定制三层法）
+
+---
+
+## 一、设计 Token：单一事实源
+
+### 1.1 Token 分层模型
+
+```
+语义层（唯一手写处）
+  --background --foreground --primary --card --border --radius ...
+     ↓ 派生（工具类桥接）
+Tailwind 层    bg-background text-foreground（@theme 映射）
+     ↓ 派生（适配器）
+组件库层       --el-color-primary / antd token —— 从语义层变量计算得出
+     ↓ 派生（算法）
+色阶层         primary-50 … primary-950 / light-3 … light-9
+```
+
+**铁律：语义 Token 是唯一手写源，其余全部派生。** 任何地方再出现硬编码色值（`#409eff`、`rgb(64,158,255)`）都是违规。
+
+### 1.2 vben 的 Token 定义（shadcn 范式）
+
+```css
+/* vben: packages/@core/base/design/src/design-tokens/default.css */
+:root {
+  --background: 0 0% 100%;      /* HSL 三元组，不带 hsl() 包装 */
+  --primary: 211 91% 39%;
+  --border: 214 32% 91%;
+  --radius: 0.5rem;
+}
+.dark {                          /* 整组覆盖，暗色即换一套值 */
+  --background: 224 71% 4%;
+  --primary: 210 98% 56%;
+}
+```
+
+两个细节值千金：
+
+1. **裸 HSL 值不带 `hsl()` 包装**——这样 `hsl(var(--primary) / 0.5)` 可直接拼透明度（soybean 同款：RGB 拆三段 `r g b` 供 `rgb(var(--x) / 0.5)`）
+2. **暗色 = `.dark` class 整组覆盖**，而非媒体查询——用户偏好优先于系统
+
+### 1.3 Tailwind v4 桥接（vben）
+
+```css
+/* internal/tailwind-config/src/theme.css */
+@custom-variant dark (&:is(.dark *));            /* class 策略暗色 */
+@theme inline {
+  --color-background: hsl(var(--background));    /* 语义 Token → 工具类 */
+  --color-primary: hsl(var(--primary));
+}
+@layer properties, theme, base, components, utilities;  /* 级联层声明 */
+```
+
+**CSS layer 声明是组件库共存的关键**：把组件库样式压在低层，工具类天然可覆盖，避免 `!important` 军备竞赛。
+
+### 1.4 pure 的 EP↔Tailwind 桥接与 soybean 的三端同步（★★★★☆）
+
+**EP 工程引入原子类的最短路径（pure）：**
+
+```css
+/* vue-pure-admin: src/style/tailwind.css —— Tailwind v4 CSS-first 写法 */
+@custom-variant dark (&:is(.dark *));        /* class 策略暗色 */
+@theme {
+  --color-bg_color: var(--el-bg-color);      /* EP 变量 → 原子色 token */
+  --color-primary: var(--el-color-primary);  /* 于是 bg-bg_color / text-primary 与组件库同色 */
+}
+```
+
+soybean 则是「单一强类型配置对象」路线：`themeSettings`（`App.Theme.ThemeSetting` 一份 schema 即文档）驱动 **CSS 变量 + NaiveUI GlobalThemeOverrides + UnoCSS theme 三端同步**，且用 `BUILD_TIME` 作覆盖标志——**发版自动淘汰用户本地旧主题缓存**（防「新版本旧皮肤」）。两案共同点：换肤 = 改上游变量，组件库与原子类自动跟随。
+
+---
+
+## 二、暗色模式
+
+### 2.1 实现要点（三标杆殊途同归）
+
+| 环节 | 做法 | 反面 |
+|------|------|------|
+| 切换机制 | html 挂 class（vben/pure `.dark`）或 `data-theme="dark"`（adp） | `prefers-color-scheme` 媒体查询直连（用户无法覆盖系统） |
+| 跟随系统 | watch `prefers-color-scheme` 作为 **auto 模式初值**，用户手动选择后以用户为准 | — |
+| 持久化 | localStorage 单 key；**读取要在 app 挂载前**（防白闪，必要时内联脚本） | 挂载后再初始化（首屏闪白） |
+| 组件库 | EP：引 `dark/css-vars.css` 一行；antd：token 切换 | 自写暗色样式覆盖组件库 |
+
+三态标准：`light | dark | auto`（auto 跟随系统）。附加无障碍模式（可选）：灰度 / 色弱滤镜（`html-grey` / `html-weakness`，一行 filter + class 切换；值班大屏场景有真实需求）。
+
+**暗色的分层策略与浅色不同**：阴影在深底上几乎不可见——暗色模式靠**边框 + 表面亮度差**分层（卡片 = 页面底色提亮一档），不要只调阴影。
+
+### 2.2 双端 key 一致（迁移期，必须）
+
+同产品双栈并存的工程，暗色 key **必须**两端同名（推荐 `<app>.theme.mode`），切换机制统一（class + data-theme 双挂成本最低）。key 不一致 = 同浏览器两端口偏好不互通 + 迁移时暗色选择器要全量改。
+
+---
+
+## 三、组件库主题定制（Element Plus）
+
+标杆做法（vben）：语义 Token **派生**组件库变量——`useElementPlusDesignTokens` 监听主题变化，把语义 Token 实时映射为 `--el-color-primary` 全系（暗色下自动反转色阶方向）。**换肤不碰组件库，只改上游 Token。**
+
+补充范式（gva 的 EP 专属三层法）：
+
+```
+第 1 层 编译期：SCSS 定制色板
+  @forward 'element-plus/theme-chalk/src/common/var.scss'
+    with ($colors: ('primary': ('base': #409EFF), ...));
+
+第 2 层 运行时：JS 生成 --el-color-primary 及 light-1..10 / dark-1..2 / -bg
+  色阶写入 documentElement —— 换主色不重新编译
+  （gva setBodyPrimaryColor：light/dark 两套明度算法）
+
+第 3 层 暗色变量：element-plus/theme-chalk/dark/css-vars.css
+  + html.dark { --el-bg-color: ... } 局部覆盖
+```
+
+pure 的 `setEpThemeColor()`（`useDataThemeChange.ts`）是第 2 层的更简实现：`documentElement.style.setProperty` + 循环生成 light-1~9/dark-1~2，且暗色下**色阶方向反转**。品牌主色运行时换肤（站点名/Logo/主色/favicon 联动）是底座「品牌可配」能力的核心——主色、圆角（`--el-border-radius-base`）、基础字号纳入同一变量体系。
+
+---
+
+## 四、视觉执行规范（写出好看代码的数值层）
+
+> 本章前三节解决「主题怎么搭」，本节解决「页面怎么写才好看」。所有数值**必须**落为 CSS 变量后使用——AI/开发者写页面时只允许引用变量，不允许现场发明数值。
+
+### 4.1 品牌可配项
+
+| 配置项 | 生效点 | 存储 |
+|--------|--------|------|
+| 站点名称 | 侧栏 logo 文案 / document.title 后缀 | 后端配置 |
+| Logo | 侧栏 + favicon | 后端配置 |
+| 主色 | `--el-color-primary` 系列运行时混色 | 后端配置或用户偏好 |
+| 暗色 | 用户偏好 | localStorage（统一命名空间） |
+
+pure 的补充范式：**运行时平台配置**（`public/platform-config.json`，Title/Layout/Theme/DarkMode 等 30+ 项，启动拉取注入）——改配置不发版（详见 08 章 env 分层）。
+
+### 4.2 基础 Token 全表（新工程第一天就建）
+
+```css
+:root {
+  /* —— 背景层次（浅色值示例；暗色整组覆盖，靠亮度差分层） —— */
+  --bg-page:  #f5f6f8;             /* 页面底 */
+  --bg-card:  #ffffff;             /* 卡片 / 弹层 */
+  --bg-hover: rgba(0, 0, 0, 0.04); /* 行/项 hover */
+  --bg-muted: #f5f7fa;             /* 次级区块 / 代码块 */
+
+  /* —— 文字层次（四档灰，禁用两档灰打天下） —— */
+  --text-primary:     rgba(0, 0, 0, 0.88);  /* 正文 */
+  --text-secondary:   rgba(0, 0, 0, 0.65);  /* 次要说明、表头 */
+  --text-placeholder: rgba(0, 0, 0, 0.38);  /* 占位、禁用标签 */
+  --text-disabled:    rgba(0, 0, 0, 0.25);
+  --text-inverse:     #ffffff;              /* 深底上的文字 */
+
+  /* —— 边框（三级） —— */
+  --border-strong: rgba(0, 0, 0, 0.26);  /* 输入框 */
+  --border-base:   rgba(0, 0, 0, 0.15);  /* 卡片描边 */
+  --border-light:  rgba(0, 0, 0, 0.08);  /* 分割线 */
+
+  /* —— 语义色（对齐组件库 success/warning/danger/info） —— */
+
+  /* —— 间距（4px 基数，全站只用这六档） —— */
+  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
+  --space-4: 16px; --space-6: 24px; --space-8: 32px;
+
+  /* —— 圆角（三档） —— */
+  --radius-sm: 4px;   /* 标签、小按钮 */
+  --radius:    8px;   /* 卡片、按钮、输入框（主值） */
+  --radius-lg: 12px;  /* 弹窗、大图 */
+
+  /* —— 阴影（卡片最多 2 级；弹层用组件库默认） —— */
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+  /* —— 层级（防 z-index 军备竞赛） —— */
+  --z-dropdown: 100;  --z-drawer: 200;
+  --z-modal: 300;     --z-message: 400;
+}
+```
+
+项目可从组件库变量派生（EP：`--bg-card: var(--el-bg-color)`），重点是**层次齐全、命名统一**。卡片风格全站二选一：**描边（border-base）或阴影（shadow-1）**，不许混用。
+
+### 4.3 字体与排版
+
+| 用途 | 字号 / 行高 | 字重 |
+|------|------------|------|
+| 页面标题 | 18-20 / 28 | 600 |
+| 卡片标题 | 16 / 24 | 600 |
+| 正文 / 表格 | 14 / 22 | 400 |
+| 次要说明 | 13 / 20 | 400 |
+| 辅助 / 标签 | 12 / 20 | 400 |
+
+规则：**正文最小 12px**（再小不可读）；同一页面标题层级 ≤2 级；数字用 `font-variant-numeric: tabular-nums`；中英文与数字混排加空格（「共 12 条」）；长文本省略必须带 title 提示；字体栈取系统栈 + 组件库默认，**禁止**引入额外 webfont 除非品牌需要。
+
+### 4.4 图标规范
+
+- **一套图标集**（线性或面性统一，**禁止**混搭两套风格；推荐 Iconify 单集或组件库图标）
+- 尺寸四档：12（辅助）/ 16（按钮、菜单、表格行内 **主值**）/ 20（页头）/ 24（空态插图位）
+- 图标与文字并排间距 6px；按钮内图标与文字同色同级
+- 纯图标按钮**必须**带 tooltip 与 aria-label
+
+### 4.5 过渡与微交互
+
+| 场景 | 时长 / 缓动 |
+|------|-------------|
+| 颜色 / hover 变化 | 150ms ease |
+| 展开 / 抽屉 / 弹层 | 200-300ms `cubic-bezier(0.4, 0, 0.2, 1)` |
+| 页面切换 | fade 150ms |
+
+规则：同类交互全站**同时长同缓动**；**禁止**超过 400ms 的阻塞动画；按钮提交必须有 loading 态（防重复触发）；自定义交互组件四态齐全——**hover / active / focus-visible / disabled** 缺一不可（focus 可见性是可访问性底线）。
+
+### 4.6 对齐与栅格
+
+- 表格：数字列右对齐 + tabular-nums，文本列左对齐，**居中对齐只用于状态标签/操作列**（全列居中是典型反模式）
+- 表单：标签右对齐或上对齐全站统一一档；输入宽度按内容语义定（手机号 11 位就别 100% 宽）
+- 卡片间距统一 `--space-4`（16px）；页面内边距 `--space-6`（24px）
+
+---
+
+## 五、好看反模式清单（出现即改）
+
+1. 硬编码色值（`#333`、`rgba(0,0,0,.5)` 散落模板）——不走 Token
+2. 一页混用多种圆角 / 多种阴影 / 非 4px 基数间距（8 和 10 混用）
+3. 全列居中对齐的表格（数字该右对齐、文本该左对齐）
+4. 图标混用两套风格（线性 + 面性、单色 + 彩色）
+5. 一页多个 primary 按钮（主操作**只能有一个**，其余 default/text）
+6. 只有两种灰的文字层次（该用四档文字 Token）
+7. 弹窗套弹窗再套抽屉（层级超过两层改抽屉分流）
+8. 满屏成功 toast（见 07 章反馈分级：成功静默）
+9. 骨架屏与真实内容尺寸不符（loading 结束页面跳动）
+10. 表格列被挤压换行（缺 min-width / 未开横向滚动）
+11. 危险操作无确认且无 danger 语义色
+12. 空页面白板（empty 必须带引导动作）
+13. 阴影当装饰乱叠（卡片最多 shadow-2，层级感来自留白而非阴影堆叠）
+14. 暗色模式直接套浅色阴影（暗色靠边框 + 亮度差分层）
+
+---
+
+## 六、死 CSS 治理
+
+存量工程常见病灶：styles/ 下积累多代无入口引用的样式文件（曾有工程沉淀约 2000 行死 CSS，且「设计系统」存在 v1/v2 两代并存——换了两茬样式系统、旧的没删的考古层）。
+
+### 6.1 治理方案（四步）
+
+```
+第 1 步 验死：对每个文件跑全仓引用检查（import/@import/url()），
+        确认零引用后直接删除（git 里有历史，不建备份目录）
+第 2 步 收敛：保留三件套 = variables（语义 Token）+ 栅格 + 基础元素；
+        组件样式回归 scoped / 组件库
+第 3 步 立规：CI 检查 styles/ 下每个 .css 必须被入口链引用，
+        新文件无引用直接 fail
+第 4 步 单源：设计规范类文档只留一份（docs），代码里不留第二套实现
+```
+
+**规则**：CSS 文件必须有入口引用链，如同 JS 文件必须有 import——「无引用样式」=「无主代码」，删除是唯一正确处理。
+
+---
+
+## 七、样式写法优先级（adp 明文范式，直接抄用）
+
+```
+1. 组件库自带能力（EP 的 type/size/token props）      ← 优先
+2. 语义工具类 / Tailwind 原子类（布局、间距）          ← 其次
+3. scoped 样式 + CSS 变量（主题相关）                  ← 业务组件
+4. 深度选择器 :deep()（覆盖组件库，须注释原因）         ← 最后手段
+5. 全局覆盖（唯一收口文件，如 element 覆盖表）          ← 禁散落
+```
+
+gva 的补充范式：语义化页面类（`gva-search-box / gva-table-box / gva-btn-list`）。与「页面容器 + 列表组件」的组件路线二选一——**推荐组件路线**（类型提示与 props 约束更强），不要并行引入两套体系。
+
+---
+
+## 八、最佳实践清单
+
+✅ **要做**
+
+1. 新颜色/间距/圆角一律引用 Token 变量，组件里禁止现场发明数值
+2. 透明度拼接用 `hsl(var(--x) / 0.5)` 裸值模式
+3. 暗色切换在 app 挂载前完成（必要时 index.html 内联首帧脚本）
+4. 图表颜色从主题变量读取（初始化注入当前主题色板，暗色切换重建实例）
+5. 新全局覆盖样式集中一个文件并注释原因
+
+❌ **不要**
+
+1. 不要保留 v1/v2 并存的设计系统文件
+2. 不要用 `!important` 解决覆盖问题（用 CSS layer 或提高选择器语义）
+3. 不要在组件里写 `@media (prefers-color-scheme)` 直连暗色（绕过用户选择）
+4. 不要硬编码暗色背景色值（读组件库 bg 变量）
+5. 不要双端各存一套主题 key（迁移期统一命名）
+
+---
+
+## 九、AI 检查清单（对比目标工程逐项核对）
+
+**P0（结构）**
+
+1. styles/ 下是否有零入口引用的样式文件？列出并标记删除（统计行数）
+2. 是否存在硬编码色值 / 非 Token 间距圆角出现在模板与 scoped 样式？抽样列出
+3. 是否有多套并行样式系统 / 两代设计系统文件并存？
+
+**P1（视觉执行）**
+
+4. 基础 Token 全表（背景四档/文字四档/边框三级/间距六档/圆角三档）是否建立且被引用？
+5. 排版抽检：正文 <12px？数字列未右对齐/未 tabular-nums？长文本省略无 title？
+6. 图标抽检：是否混用两套风格？纯图标按钮是否缺 tooltip/aria-label？
+7. 过渡抽检：同类交互时长是否统一？提交按钮是否都有 loading？四态是否齐全？
+8. 对照「好看反模式清单」14 条逐条扫描，命中项列出
+9. 暗色抽检：分层是否靠边框/亮度差？图表色板是否随主题重建？
+
+**P2（体验升级）**
+
+10. 对比度达标：正文 ≥ 4.5:1、大字 ≥ 3:1（WCAG AA）——用工具抽查文字层次 Token
+11. Tailwind 是否与组件库变量打通（pure `@theme` 桥接）？
+12. 是否需要 BUILD_TIME 发版覆盖用户旧主题缓存（soybean 方案）？
+13. 灰度/色弱无障碍模式是否值得启用（值班场景）？
+
+---
+
+> 下一篇：[07-组件设计与交互反馈](07-组件设计与交互反馈.md) —— 组件是设计的词汇表。
diff --git a/docs/web-ui-guide/07-组件设计与交互反馈.md b/docs/web-ui-guide/07-组件设计与交互反馈.md
new file mode 100644
index 0000000..186fb85
--- /dev/null
+++ b/docs/web-ui-guide/07-组件设计与交互反馈.md
@@ -0,0 +1,253 @@
+# 07 — 组件设计与交互反馈
+
+> 参考：vue-vben-admin（Api 类命令式组件）、soybean-admin（hook 优先 + 组件薄壳）、vue-pure-admin（页面内聚五件套 + ReDialog）、ant-design-pro（trigger 弹窗 + ProTable 声明式）
+
+---
+
+## 一、组件分层与词汇表
+
+```
+┌─ 全局组件 src/components/ ──────────────────────┐
+│  PageContainer  页面容器（页头/面包屑/slot）      │
+│  ListPage       分页列表（fetcher+筛选slot+表格） │
+│  权限组件 / 图标选择 / 主题切换 / 动态菜单        │
+├─ 域组件 views/<domain>/components/ ─────────────┤
+│  XxxFormDialog  表单弹窗                         │
+│  XxxDetail      详情抽屉                         │
+│  单元格渲染器（状态 tag、操作按钮组）              │
+├─ 页面骨架 views/<domain>/<Page>.vue ────────────┤
+│  只做编排：组合上面两层，≤400 行                  │
+└─────────────────────────────────────────────────┘
+```
+
+**页面骨架的行数上限是硬约束**（400 行）。pure 的同构落地是「页面内聚五件套」：`index.vue`（纯模板，只解构 hook）+ `form/index.vue`（弹窗表单）+ 左树/右表子组件 + `utils/{hook.tsx, rule.ts, types.ts}`（逻辑/校验/类型全在本域）——`index.vue` 零逻辑。
+
+两种封装哲学（按团队选择，**不混用**）：
+
+| 哲学 | 代表 | 做法 |
+|------|------|------|
+| schema 驱动重封装 | vben | FormApi/ModalApi 类 + schema 数据生成表单/弹层 |
+| hook 优先薄壳 | soybean | 逻辑进 UI 无关 hook（useTable/useFormRules），组件只是组件库薄壳 |
+
+---
+
+## 二、弹层设计：trigger 模式与命令式 Api
+
+### 2.1 trigger 模式（adp，声明式首选）
+
+```tsx
+// UpdateForm.tsx —— 调用方零状态
+<UpdateForm
+  trigger={<Button type="link">编辑</Button>}   // 传入触发器
+  onFinished={async.value => { actionRef.current?.reload() }}
+/>
+// 内部 cloneElement(trigger, { onClick: onOpen }) 注入打开事件
+// 表单本体 StepsForm + render 进 Modal（destroyOnHidden）
+```
+
+Vue 对应写法：dialog 组件接 `trigger` slot，或保持「页面持 visible + 子组件 emit close」的朴素方案（够用）。**关键是弹窗组件自包含表单逻辑**，页面只传初始数据和回调。
+
+### 2.2 命令式 Api 类（vben，复杂弹层）
+
+```ts
+// useVbenModal 返回 [Modal, api]；ModalApi 持有独立响应式 store
+const [Modal, modalApi] = useVbenModal({ connectedComponent: MyModal })
+modalApi.open({ payload: { userId: 1 } })   // 命令式打开并传参
+modalApi.onConfirm(async () => { ... })     // 生命周期钩子
+```
+
+适用：全局单例弹层（登录过期框、错误确认框——gva 的 ErrorPreview 是此模式的事件总线版）。普通 CRUD 弹窗**不必上这套**，props/emit 足矣。
+
+Vue 侧最易落地的命令式弹窗是 pure 的 **ReDialog**：模块级 `dialogStore` + `addDialog({ title, contentRenderer, beforeSure: done => {...} })`，`done()` 关闭——无 provide/inject、无工厂，App.vue 挂载一次全局可用。表单弹窗若要从 props/emit 升级命令式，ReDialog 是阻力最小路线。
+
+---
+
+## 三、表单范式：手写、配置驱动与 schema 驱动
+
+| 范式 | 适用 | 代表 | 成本 |
+|------|------|------|------|
+| 手写 el-form + rules | 表单结构常变、交互复杂（联动/自定义校验） | 常见 Vue 工程 | 低门槛高纪律 |
+| hook 优先（不封表单组件） | 逻辑可测、UI 薄壳 | soybean `useFormRules`（`satisfies` 约束规则表） | 中 |
+| 表单 SFC + 弹窗 contentRenderer | 弹窗内容即组件 | pure `form/index.vue` | 低 |
+| 配置驱动 columns | 「一列三态」：同一份列配置生成表格列+搜索项+表单项 | adp ProTable（`valueType/valueEnum/hideInForm/formItemRender`） | 学习成本中，CRUD 提速极高 |
+| schema 驱动 FormApi | 表单完全由 schema 数据生成，动态增删字段 | vben useVbenForm（zod 校验、响应式 schema） | 高，适合平台型产品 |
+| RHF + zod | React 端 | react-hook-form + zod（schema 即校验源） | 中 |
+
+**表单通用规则（必须）**：
+
+1. 提交按钮 loading 态（防双击重复提交）
+2. 校验消息中文、具体（「请输入用户名」而非「username 不能为空」）
+3. 编辑态回填后 reset 时机明确（打开时回填，关闭时重置）
+4. 危险输入（密码）用 `show-password`；密钥类只写不读（placeholder 提示「留空则不修改」）
+
+---
+
+## 四、表格范式：列表组件是资产
+
+### 4.1 标准列表组件协议（强制走它）
+
+```
+<ListPage
+  :fetcher="fetchUsers"          ← 函数：params → {results, count}
+  v-model:loading                ← 内部管理
+  #filters（筛选 slot：关键字/状态/日期）
+  #default（el-table 列定义）
+/>
+内部：「取消 + 版本号」双重防护（见 03 章）+ 分页三件套
+```
+
+pure 的三层表格范式同构，可作演进对照：`@pureadmin/table`（全局表格组件，列用 tsx cellRenderer）+ `RePureTableBar`（刷新/列设置拖拽排序/密度/全屏工具条，作用域插槽透传 columns）+ 业务 `useUser()` hook（form/dataList/pagination/CRUD 全收编）——`index.vue` 只剩模板解构，**页面零逻辑**。
+
+### 4.2 表格规范
+
+```
+列设计   操作列 fixed right；状态列 tag 化；时间列统一格式化函数
+宽表     超 6 列启用横向滚动而非挤压；关键列 min-width 而非 width
+空数据   empty 占位 + 「新增第一条」引导（不是裸的「暂无数据」）
+加载     表格 v-loading（不用全局遮罩）
+批量     多选 + 批量操作按钮常驻 disabled（选中方可点，视觉自说明）
+行操作   ≤3 个平铺；>3 个收进更多下拉
+数字列   右对齐 + tabular-nums
+密度     行高全站统一一档（default 48px 或 compact 40px，不混用）
+图标     行内图标按钮 16px，与文字间距 6px，风格全站统一（见 06 章 4.4）
+```
+
+### 4.3 详情复用列配置（adp 思路）
+
+ProTable 的 columns 同时喂给 `ProDescriptions`（详情抽屉）——**列定义是数据**，表格、搜索、详情三处消费同一份。Vue 端可低成本借鉴：列数组中带 `formatter/render` 的描述导出给详情组件。
+
+---
+
+## 五、交互反馈分级（全站强制）
+
+### 5.1 反馈决策表
+
+| 场景 | 反馈 | 理由 |
+|------|------|------|
+| 操作成功（删除/保存） | ❌ 不弹框——界面已更新 | 降噪 |
+| 操作失败 | ✅ 错误提示（原因必带） | 用户要知情 |
+| 危险操作（删除/批量/不可逆） | ✅ 确认框（对象名进文案） | 防误操作 |
+| 恢复默认/静默保存 | ❌ 不弹框 | 降噪 |
+| 按钮已禁用 | ❌ 不弹框，视觉已说明 | 降噪 |
+| 长任务（>1s） | ✅ 按钮 loading；>3s 进度条 | 可感知 |
+| 登录/MFA 失败 | ✅ 表单内联错误（不 toast） | 上下文相关 |
+| 401 过期 | ✅ 单例弹窗/单次跳转 | 防并发轰炸 |
+
+```js
+// ❌ 冗余 —— 成功也弹
+await deleteMenu(id); ElMessage.success('删除成功')
+// ✅ 专业 —— 静默，界面即反馈
+await deleteMenu(id); loadMenus()
+```
+
+### 5.2 三态完整性检查清单
+
+每个数据展示组件必须显式处理三态，缺一即 bug：
+
+```
+加载态  skeleton（首屏）/ loading（刷新）
+空态    empty + 引导动作
+错误态  错误占位 + 重试按钮（不是 console.error 完事）
+```
+
+---
+
+## 六、Composables / Hooks 规范
+
+### 6.1 命名与分层
+
+```
+composables/hooks    依赖业务上下文（store/请求层）：usePagedQuery、useTable
+utils                纯函数无依赖：confirm、格式化函数
+```
+
+规则：**composable 内禁止直接操作 DOM**（返回响应式状态）；一个 composable 只做一件事；返回值用对象而非数组（追加字段不破坏调用方）。
+
+soybean 分层补充：框架无关的 hook（useTable 泛型四参）与 UI 适配 hook（useNaiveTable）分层——换 UI 库只动适配层。
+
+### 6.2 props 与事件命名规范
+
+- props 用名词（`fetcher`、`initialData`、`permissions`），事件用动词（`@close`、`@submit`、`@success`）
+- 双向绑定统一 `v-model:xxx` 约定（如 `v-model:visible`），**禁止**拆成 `visible` + `visibleChange` 两个接口
+- 布尔 props 必须显式声明默认值；透传型组件（ListPage）用 `attrs` 透传 UI 库 props，并在组件头注释列出可透传项
+- **避免过度封装**：props + slots 能解决的扩展，不引入 render 函数 / schema；封装层数超过两层时先考虑是否该拆组件
+
+---
+
+## 七、巨型单文件拆分实战
+
+### 7.1 典型场景：定时任务管理页（约 1400 行单文件）
+
+```
+views/cron/
+├── Cron.vue                # ~120 行：页面容器 + 子组件编排
+├── components/
+│   ├── TaskTable.vue       # 任务列表（列定义 + 批量选择）
+│   ├── TaskFormDialog.vue  # 新建/编辑任务（cron 表达式编辑器独立）
+│   ├── CronExprInput.vue   # cron 表达式输入 + 下次执行时间预览
+│   ├── ExecutionHistory.vue# 执行记录（独立 tab/抽屉）
+│   └── ExecutionLogDrawer.vue # 日志查看（自动刷新控制）
+└── composables/
+    └── useCronTasks.js     # CRUD 编排（复用列表 hook）
+```
+
+### 7.2 典型场景：监控大屏页（约 900 行单文件）
+
+```
+views/monitor/
+├── Monitor.vue             # ~100 行：单机/集群切换 + 布局
+├── components/
+│   ├── MetricCard.vue      # 指标卡（CPU/内存/磁盘/网络 通用）
+│   ├── TrendChart.vue      # 趋势图（echarts 按需引入收口在此）
+│   └── HostSelector.vue    # 主机选择
+└── composables/
+    └── useMetricsStream.js # WebSocket 连接/重连退避/卸载断开
+```
+
+拆分判据：**一个文件出现 ≥3 个「功能岛」**（各自的数据/状态/UI 块）即拆；拆出的单元可在测试里独立渲染。组织法参照 pure 页面内聚模式（index 纯模板 + form/ 子组件 + utils/hook 收编逻辑）。
+
+---
+
+## 八、最佳实践清单
+
+✅ **要做**
+
+1. 新列表页一律「页面容器 + 列表组件」起步（模板见 05 章）
+2. 表单弹窗独立组件，页面只传数据与回调
+3. 每个数据组件三态齐全（加载/空/错误）
+4. composable 返回对象、单职责、无直接 DOM 操作
+5. 组件 props 加类型与默认值；emit 声明 events
+
+❌ **不要**
+
+1. 不要在页面里写第二个 `<el-table>`（复用列配置或拆子组件）
+2. 不要跨层 emit 链超过两级（改用 provide/inject 或提升状态）
+3. 不要在组件内散落成功类 toast（见反馈决策表）
+4. 不要用 index 作 v-for key（列表刷新错位之源）
+5. 不要复制粘贴超过两次的 UI 块不抽组件（三次法则）
+
+---
+
+## 九、AI 检查清单（对比目标工程逐项核对）
+
+**P0**
+
+1. 超过 400 行的视图文件全部列出，按第七节方案给出拆分目录树
+2. 成功类 toast 违反反馈决策表的调用点列出（应删）
+3. v-for 是否有用 index 作 key 的列表（存在动态增删即不合格）
+
+**P1**
+
+4. 列表页是否统一走列表组件协议？手写分页/裸请求的页面列出迁移清单
+5. 表单弹窗自查三件套：提交 loading、校验消息中文、关闭重置
+6. 数据组件三态是否齐全（抽检空态与错误态渲染）
+7. 权限控制是否逐按钮挂载（对照权限码清单）
+
+**P2**
+
+8. 是否值得引入列配置「一列三态」复用（adp 思路）
+9. 弹窗是否需要升级命令式（全局单例场景用 ReDialog/ModalApi）
+
+---
+
+> 下一篇：[08-工程化与质量保障](08-工程化与质量保障.md) —— 让规范自动执行。
diff --git a/docs/web-ui-guide/08-工程化与质量保障.md b/docs/web-ui-guide/08-工程化与质量保障.md
new file mode 100644
index 0000000..8572359
--- /dev/null
+++ b/docs/web-ui-guide/08-工程化与质量保障.md
@@ -0,0 +1,256 @@
+# 08 — 工程化与质量保障
+
+> 参考：vue-vben-admin（Vite 配置工厂 + lefthook 流水线）、soybean-admin（eslint-config 工厂 + sa CLI）、vue-pure-admin（build/ 拆分 + env 开关能力）、ant-design-pro（Biome + 测试范式 + CI 矩阵）
+
+---
+
+## 一、构建配置组织
+
+### 1.1 配置组织范式
+
+```
+vben：配置即内部包
+internal/vite-config/ 提供 defineConfig({ application | library }) 工厂，
+app 的 vite.config.ts 只剩 15 行（proxy 声明）
+
+pure：根目录 build/ 拆分
+build/{plugins,cdn,compress,optimize,utils,info}.ts，vite.config.ts 只做组装
+（env 用 wrapperEnv 类型化读取）
+
+soybean：build/plugins/ 按域拆文件
+{router,unplugin,html,unocss,devtools}.ts 一文件一插件域
+```
+
+单工程标准：**必须**把 vite 配置按职责拆文件（plugins/env/proxy/compress），主配置只做组装；双栈工程的两个 vite 配置**结构镜像**（插件列表、alias、产物命名、proxy 规则逐项对齐）。
+
+### 1.2 env 分层（三层结构）
+
+| 层 | 形态 | 语义 | 说明 |
+|----|------|------|------|
+| 构建期烧录 | `VITE_*` | 打进产物，改了要重新构建 | API 前缀、功能开关 |
+| 运行时可改 | `VITE_GLOB_*`（vben） | 构建时抽成 `_app-config-{hash}.js` 挂 window | **改 API 地址无需重构建** |
+| 运行时 JSON | `public/platform-config.json`（pure） | 构建产物旁的配置文件，启动拉取注入 | 免重构建、免 window 挂载 |
+| 纯 dev | proxy 端口等 | 只在 dev server 用 | — |
+
+env 类型契约：每个 `VITE_*` 变量在 `vite-env.d.ts` 有类型与注释（soybean：联合类型直接收窄如 `'static' | 'dynamic'`）。
+
+### 1.3 dev server 要点（必须）
+
+```
+strictPort: true            # 端口被占直接报错，不悄悄漂移
+proxy '/api' → 后端端口
+  ws: true                  # 供 WebSocket（必须显式开）
+  changeOrigin: true
+```
+
+### 1.4 产物与指纹
+
+- 构建注入版本：`define: { __APP_VERSION__, __COMMIT_HASH__ }`（adp 用 git rev-parse 兜底）——设置页「关于」直接展示，排障救命
+- 手工分包保留（radix/icons/charts/motion 等）；新大依赖（图表/编辑器）**必须**评估独立 chunk + 懒加载
+- 可选：构建压缩 env 开关（pure `VITE_COMPRESSION = none|gzip|brotli|both`）、CDN 开关（`VITE_CDN`）、构建时间戳 banner
+
+---
+
+## 二、代码规范流水线
+
+### 2.1 分层流水线（vben lefthook 范式）
+
+```
+pre-commit（仅 staged 文件）：
+  快修复：oxlint --fix → oxfmt → eslint --fix → stylelint --fix
+          （stage_fixed 回填暂存区）
+commit-msg：commitlint（conventional）
+push/CI：慢检查全量 vue-tsc/tsc --noEmit + lint + madge 循环依赖
+```
+
+原则：**快的在本地 pre-commit 自动修，慢的在 CI 卡**。
+
+soybean 的同构版本：`@soybeanjs/eslint-config-vue` 工厂（eslint.config.mjs 仅 14 行）+ `vp lint`（oxc 快扫）→ `eslint`（精修）双层；commit 由自研 `sa` CLI 交互生成并校验，scope 白名单单一数据源。pure 再补两块：stylelint（recess-order 属性排序）与 eslint-plugin-better-tailwindcss（校验 class 书写）。
+
+### 2.2 必配清单（必须）
+
+| 工具 | 要求 |
+|------|------|
+| ESLint（flat）+ Prettier | 双端同大版本、规则集可复制 |
+| Stylelint | standard-scss + recommended-vue + 属性排序 |
+| commitlint + husky + lint-staged | pre-commit 快修复、commit-msg 校验 |
+| `preinstall: only-allow pnpm` | 锁包管理器 |
+
+**Conventional Commits 类型集**（commitlint type-enum，统一）：`feat / fix / docs / style / refactor / perf / test / chore / revert`；scope 用功能域（`user`、`rbac`、`cron`、`react`……）。
+
+**any 管控**：TS strict 端**禁止裸 any**——`as any` 需同行注释原因与消除计划；JS 端以 JSDoc `@param/@returns` 过渡，**不允许**出现「既无类型注释也无类型定义」的接口函数。
+
+### 2.3 项目级 lint 增强（把各章规则自动化）
+
+```js
+// eslint 配置片段（示意）
+'no-console': ['warn', { allow: ['warn', 'error'] }]   // 生产禁 console.log
+'no-restricted-imports': // 示例层禁 import 系统层内聚单元
+  { patterns: [{ group: ['@/views/system/*'], message: '示例层不得依赖系统层' }] }
+vue/name: 'error'            // 页面组件必须 defineOptions name（keep-alive 前置）
+import/no-cycle: 'error'     // 循环依赖
+```
+
+---
+
+## 三、测试策略
+
+### 3.1 管理端测试金字塔（务实版）
+
+```
+        ▲  E2E 冒烟（Playwright）
+        │   登录→进列表→CRUD→登出 3-5 条主线，别贪多
+        ├─ 组件/页面测试（Vitest + Testing Library）
+        │   列表组件三态、表单弹窗校验与提交、菜单失败重试
+        ├─ 组合函数测试（重点投入区，性价比最高）
+        │   usePagedQuery（取消/错序/分页边界）
+        │   permission 纯函数穷举
+        │   请求层拦截器分支（401刷新/重放/静默）
+        └─ 纯函数单测
+            格式化、confirm、色阶算法
+```
+
+### 3.2 adp 测试范式（直接照抄）
+
+```ts
+// 重依赖 mock + 动态 import（vi.mock 提升到顶部，import 在 test 内）
+vi.mock('@/services/user', () => ({ queryCurrentUser: vi.fn() }))
+
+test('未登录访问受保护页重定向 login 并保留 redirect', async () => {
+  queryCurrentUser.mockRejectedValueOnce({ /* 401 */ })
+  const { getInitialState } = await import('@/app')
+  const redirect = await getInitialState()
+  expect(redirect).toContain('/user/login?redirect=')
+})
+```
+
+关键点：**纯函数穷举测试**（permission/access 这类零成本高回报）、**拦截器分支测试**（请求层是事故高发区，mock adapter 驱动各分支）。
+
+### 3.3 覆盖要求
+
+- coverage 阈值必须配置（如 lines 70 / statements 70 / functions 60 / branches 70），排除生成代码
+- E2E 至少覆盖：登录主线、一条 CRUD 主线、模块开关生效（若为底座）
+- vben 是组件测试深度的标杆：连 Modal 的 keep-alive 场景都有单测
+
+---
+
+## 四、性能优化清单
+
+| 手段 | 做法 | 出处 |
+|------|------|------|
+| 路由懒加载 | 全部页面 `() => import()`；示例层可构建期 tree-shake | 通行 |
+| 首屏占位 | index.html 注入 loading HTML（#root 空时先渲染骨架） | adp |
+| 路由预取 | 菜单 hover prefetch / vite `server.warmup` 预热核心目录 | adp/vben/pure |
+| 图表懒加载 | Suspense/条件 import 包裹 ECharts 区块 | 通行 |
+| chunk 失效恢复 | ChunkLoadError → 提示/自动 reload 一次（发版后旧 hash 404） | adp + 路由 onError |
+| 请求防抖取消 | 列表页「取消 + 版本号」（见 03 章） | 本标准 |
+| 大日期库治理 | moment→dayjs / 按需 locale | adp |
+| WebSocket | 卸载断开 + 重连指数退避 + 心跳 | 监控类页面 |
+| 长列表 | 虚拟滚动（日志类页面 >1000 行时） | 按需 |
+
+**度量先行**：CI 加 `rollup-plugin-visualizer` 产物报告，chunk 超阈值（如 500KB）报警。
+
+---
+
+## 五、双端一致性规范（迁移期）
+
+### 5.1 契约清单（迁移开始前统一，不等迁移完成）
+
+| 项 | 统一值（推荐） | 说明 |
+|----|----------------|------|
+| token key | `<app>.auth.token` | 迁移期「读旧写新」一个版本 |
+| 暗色 key | `<app>.theme.mode` | 同上 |
+| 模块开关键 | `<app>.modules.<name>.enabled` | 常量两端同名，注释指向后端 API |
+| 会话存储结构 | 字段名一致 | localStorage 布局对齐 |
+| 响应契约 | 同一份 code/data/msg + 错误分级 | 见 03 章 |
+| 权限语义 | 权限码清单同源（单一文档维护） | 见 04 章 |
+| 路由路径 | 两端一致 | 互通书签 |
+| ESLint / Prettier | 同大版本、同规则 | 配置可复制 |
+
+**执行方式**：契约清单进 `docs/`（一页表），双端各引用；改任何一项 = 双端 PR 同步。副端纪律：不抢先实现主端没有的功能；mock 显式开关、生产禁用；每对齐一个域删除对应 mock（向真实收敛）。
+
+---
+
+## 六、CI/CD
+
+### 6.1 标准流水线（adp 范式裁剪）
+
+```
+PR 触发：
+  job lint     eslint + prettier --check + vue-tsc/tsc
+  job test     vitest --coverage（阈值卡点）
+  job build    vite build
+  job e2e      主分支 PR：playwright（webServer 自动拉起前后端）
+main 合并：
+  构建产物部署（嵌入后端二进制 / 静态托管）
+```
+
+CI 增强项：madge 循环依赖检查、styles 入口引用检查、产物体积报告。**CI 与本地命令同源**（CI 里跑 make 目标，不另写一套脚本）。
+
+---
+
+## 七、文档与可观测性
+
+### 7.1 文档治理（制度）
+
+| 文档 | 责任 |
+|------|------|
+| 新模块指南 | 新模块五列表（菜单/路由/页面/API/权限码）同步 |
+| 信息架构文档 | 分组/菜单行为描述与实现同步 |
+| 删除性重构 | 过期段落归档，不留「描述已删除组件」的漂移文档 |
+| CHANGELOG | 只描述现存功能 |
+
+**规则**：实现与文档不一致 = 文档 bug，同一 PR 修复。
+
+### 7.2 版本可观测
+
+- 设置页「关于」展示 `__APP_VERSION__` / commit hash / 构建时间（构建指纹注入）
+- 全局错误上报预留钩子（gva `core/error-handel.js` 式），先 console.error 收口，接 Sentry 留接口
+- 可选：页面版本更新提示（pure 的 version-rocket：新版本发布后提醒用户刷新）
+
+---
+
+## 八、最佳实践清单
+
+✅ **要做**
+
+1. pre-commit 快修复 + CI 慢检查的分层流水线
+2. 请求层与权限纯函数优先补测试
+3. 双端 vite 配置结构镜像；契约清单一页表维护
+4. CI 与本地同源（make 目标）
+5. 每次构建带版本指纹，关于页可见
+
+❌ **不要**
+
+1. 不要双份 e2e/eslint 配置文件并存（配置漂移源头）
+2. 不要 CI 跑本地跑不通的命令（或反之）
+3. 不要 console.log 进生产（尤其 token 片段）
+4. 不要在 mock 数据里放真实用户名/密钥样式的假数据
+5. 不要为「以后可能用到」保留死配置、死样式、空目录
+
+---
+
+## 九、AI 检查清单（对比目标工程逐项核对）
+
+**P0（安全与一致性）**
+
+1. 生产路径上是否有 console.log（尤其 token 片段打印）？
+2. 双端（若有）token/主题 key 是否同名？配置文件是否双份并存？
+3. mock 是否显式开关（是否存在网络错误静默回退假数据）？
+
+**P1（质量基建）**
+
+4. lint 流水线是否分层（pre-commit 快修 + CI 慢查）？stylelint/commitlint 是否齐配？
+5. 请求层与权限纯函数是否有测试？coverage 阈值是否配置？
+6. CI 是否有循环依赖检查、产物体积报告？
+7. 构建指纹是否注入并在关于页展示？
+
+**P2（体验与治理）**
+
+8. 文档漂移清单（描述已不存在实现的文档段落）列出并归档
+9. 运行时配置（VITE_GLOB / platform-config.json）是否值得引入
+10. 错误上报钩子是否预留
+
+---
+
+> 至此八章完毕。回到 [00-目录与概览](00-目录与概览.md) 复查十大黄金法则，或按各章「AI 检查清单」逐项对比目标工程输出优化任务。
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 5e6b472..399c021 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -19,5 +19,16 @@ export default defineConfig([
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      // 生产禁 console.log（错误收口走 console.error / 上报钩子，见开发标准 08 章）
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    },
+  },
+  {
+    // shadcn/ui 生成组件（buttonVariants 等具名导出是官方模式），放宽 fast-refresh 规则
+    files: ['src/components/ui/**'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
   },
 ])
diff --git a/frontend/index.html b/frontend/index.html
index d2e66e2..00352bb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,11 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN" suppressHydrationWarning>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="alternate icon" href="/favicon.ico" />
-    <title>LokiDeploy</title>
+    <title>opsx-loki</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9da042c..5b3e8ee 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "my-app",
-  "version": "0.0.0",
+  "name": "lokideploy-frontend",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "my-app",
-      "version": "0.0.0",
+      "name": "lokideploy-frontend",
+      "version": "1.0.0",
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-accordion": "^1.2.12",
@@ -301,7 +301,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.4",
+      "version": "7.29.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.10.tgz",
+      "integrity": "sha512-NpugTzbKgGrNe45Ui32cN8vCFFMxVtP/9rtfwv0nP5FRDAjvYBxJcLVpYA9mr1jxP6cnIT7x9LUzuDTbWYYNRA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -2951,18 +2953,26 @@
     },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "license": "MIT"
     },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
       "license": "MIT"
     },
     "node_modules/@types/d3-ease": {
       "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
       "license": "MIT"
     },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
       "license": "MIT",
       "dependencies": {
         "@types/d3-color": "*"
@@ -2970,17 +2980,23 @@
     },
     "node_modules/@types/d3-path": {
       "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
       "license": "MIT"
     },
     "node_modules/@types/d3-scale": {
       "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
       "license": "MIT",
       "dependencies": {
         "@types/d3-time": "*"
       }
     },
     "node_modules/@types/d3-shape": {
-      "version": "3.1.7",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==",
       "license": "MIT",
       "dependencies": {
         "@types/d3-path": "*"
@@ -2988,10 +3004,14 @@
     },
     "node_modules/@types/d3-time": {
       "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
       "license": "MIT"
     },
     "node_modules/@types/d3-timer": {
       "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
     "node_modules/@types/estree": {
@@ -3685,6 +3705,8 @@
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
       "license": "ISC",
       "dependencies": {
         "internmap": "1 - 2"
@@ -3695,6 +3717,8 @@
     },
     "node_modules/d3-color": {
       "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
       "license": "ISC",
       "engines": {
         "node": ">=12"
@@ -3702,13 +3726,17 @@
     },
     "node_modules/d3-ease": {
       "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/d3-format": {
-      "version": "3.1.0",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
       "license": "ISC",
       "engines": {
         "node": ">=12"
@@ -3716,6 +3744,8 @@
     },
     "node_modules/d3-interpolate": {
       "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
       "license": "ISC",
       "dependencies": {
         "d3-color": "1 - 3"
@@ -3726,6 +3756,8 @@
     },
     "node_modules/d3-path": {
       "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
       "license": "ISC",
       "engines": {
         "node": ">=12"
@@ -3733,6 +3765,8 @@
     },
     "node_modules/d3-scale": {
       "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
       "license": "ISC",
       "dependencies": {
         "d3-array": "2.10.0 - 3",
@@ -3747,6 +3781,8 @@
     },
     "node_modules/d3-shape": {
       "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
       "license": "ISC",
       "dependencies": {
         "d3-path": "^3.1.0"
@@ -3757,6 +3793,8 @@
     },
     "node_modules/d3-time": {
       "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
       "license": "ISC",
       "dependencies": {
         "d3-array": "2 - 3"
@@ -3767,6 +3805,8 @@
     },
     "node_modules/d3-time-format": {
       "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
       "license": "ISC",
       "dependencies": {
         "d3-time": "1 - 3"
@@ -3777,6 +3817,8 @@
     },
     "node_modules/d3-timer": {
       "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
       "license": "ISC",
       "engines": {
         "node": ">=12"
@@ -3812,6 +3854,8 @@
     },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
       "license": "MIT"
     },
     "node_modules/deep-is": {
@@ -3835,6 +3879,8 @@
     },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.7",
@@ -4093,6 +4139,8 @@
     },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
     "node_modules/fast-deep-equal": {
@@ -4101,7 +4149,9 @@
       "license": "MIT"
     },
     "node_modules/fast-equals": {
-      "version": "5.4.0",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.5.tgz",
+      "integrity": "sha512-yKEpcFuRPu/pTQL2VB8YKE2yFldrLlIsoWtJeBnAdqEhvu21OgkFT0C8njf/xYc2LSZGEr3K9JGjthHJxnVLvQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -4363,6 +4413,8 @@
     },
     "node_modules/internmap": {
       "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
       "license": "ISC",
       "engines": {
         "node": ">=12"
@@ -4536,7 +4588,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "license": "MIT"
     },
     "node_modules/lodash.merge": {
@@ -4546,6 +4600,8 @@
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -4951,6 +5007,8 @@
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -4960,6 +5018,8 @@
     },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
     "node_modules/punycode": {
@@ -5041,6 +5101,8 @@
     },
     "node_modules/react-is": {
       "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
     "node_modules/react-refresh": {
@@ -5126,6 +5188,8 @@
     },
     "node_modules/react-smooth": {
       "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
       "license": "MIT",
       "dependencies": {
         "fast-equals": "^5.0.1",
@@ -5159,6 +5223,8 @@
     },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/runtime": "^7.5.5",
@@ -5203,6 +5269,9 @@
     },
     "node_modules/recharts": {
       "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+      "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
+      "deprecated": "1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide",
       "license": "MIT",
       "dependencies": {
         "clsx": "^2.0.0",
@@ -5224,6 +5293,8 @@
     },
     "node_modules/recharts-scale": {
       "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
       "license": "MIT",
       "dependencies": {
         "decimal.js-light": "^2.4.1"
@@ -5508,6 +5579,8 @@
     },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
@@ -5715,6 +5788,8 @@
     },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
       "license": "MIT AND ISC",
       "dependencies": {
         "@types/d3-array": "^3.0.3",
diff --git a/frontend/package.json b/frontend/package.json
index 869ab4c..1dbb0a5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "my-app",
+  "name": "opsx-loki-frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/App.css b/frontend/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/frontend/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d2a0ba9..b23182d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,75 +1,58 @@
-import { lazy, Suspense, memo } from 'react'
-import { Routes, Route, Navigate } from 'react-router'
+import { lazy, Suspense, memo, useEffect } from 'react'
+import { Routes, Route, Navigate, useLocation } from 'react-router'
 import { Toaster } from '@/components/ui/sonner'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { isLoggedIn, getUser } from '@/lib/auth-storage'
+import { routes, findRouteMeta } from '@/router/routes'
 
-// 路由守卫组件 - 独立定义，便于复用
+const Layout = lazy(() => import('@/components/Layout'))
+
+// 路由守卫 - 未登录跳登录页并携带来源路径（登录成功后回跳，见 lib/redirect.ts）
 const RequireAuth = memo(function RequireAuth({ children }: { children: React.ReactNode }) {
-  const token = localStorage.getItem('token')
-  if (!token) {
-    return <Navigate to="/login" replace />
+  const location = useLocation()
+  if (!isLoggedIn()) {
+    const from = location.pathname + location.search
+    return <Navigate to={`/login?redirect=${encodeURIComponent(from)}`} replace />
   }
+	if (getUser()?.role !== 'admin' && location.pathname !== '/logs') return <Navigate to="/logs" replace />
   // 动态导入Layout以避免在登录页面加载它
   return <LazyLayout>{children}</LazyLayout>
 })
 
-// 懒加载页面组件 - 实现代码分割
-const Login = lazy(() => import('@/pages/Login'))
-const Dashboard = lazy(() => import('@/pages/Dashboard'))
-const Clusters = lazy(() => import('@/pages/Clusters'))
-const Hosts = lazy(() => import('@/pages/Hosts'))
-const Storage = lazy(() => import('@/pages/Storage'))
-const Deployments = lazy(() => import('@/pages/Deployments'))
-const Collectors = lazy(() => import('@/pages/Collectors'))
-const Settings = lazy(() => import('@/pages/Settings'))
-const Layout = lazy(() => import('@/components/Layout'))
-
-// 懒加载布局包装器
+// 懒加载布局包装器（Layout chunk 加载期间的整屏占位）
 function LazyLayout({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense fallback={<PageLoadingFallback />}>
+    <Suspense fallback={<AppLoadingFallback />}>
       <Layout>{children}</Layout>
     </Suspense>
   )
 }
 
-// 页面加载中占位
-function PageLoadingFallback() {
+// 整屏加载占位
+function AppLoadingFallback() {
   return (
-    <div className="h-screen w-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950">
-      <LoadingSpinner size="lg" text="页面加载中..." />
+    <div className="h-screen w-screen flex items-center justify-center bg-muted dark:bg-slate-950">
+      <div className="w-6 h-6 border-2 border-slate-300 border-t-primary rounded-full animate-spin" />
     </div>
   )
 }
 
-// 路由配置 - 集中管理路由定义
-interface RouteConfig {
-  path: string
-  element: React.ReactNode
-  auth?: boolean
+// document.title 由路由 meta 单源驱动
+function useDocumentTitle() {
+  const location = useLocation()
+  useEffect(() => {
+    const title = findRouteMeta(location.pathname)?.title
+    document.title = title && location.pathname !== '/login' ? `${title} · opsx-loki` : 'opsx-loki'
+  }, [location.pathname])
 }
 
-const routes: RouteConfig[] = [
-  { path: '/login', element: <Login />, auth: false },
-  { path: '/', element: <Dashboard />, auth: true },
-  { path: '/clusters', element: <Clusters />, auth: true },
-  { path: '/hosts', element: <Hosts />, auth: true },
-  { path: '/storage', element: <Storage />, auth: true },
-  { path: '/deployments', element: <Deployments />, auth: true },
-  { path: '/collectors', element: <Collectors />, auth: true },
-  { path: '/settings', element: <Settings />, auth: true },
-]
-
 /**
  * App 根组件
- * 
- * 优化点：
- * 1. 所有页面使用 React.lazy 懒加载，实现代码分割
- * 2. 路由守卫独立为 memo 组件
- * 3. Suspense 统一处理加载状态
- * 4. 路由配置集中管理
+ * - 路由配置集中在 router/routes.tsx（meta 驱动标题/菜单）
+ * - 页面全部 React.lazy 懒加载实现代码分割
+ * - 页面级 Suspense 在 Layout 的内容区，切换页面时布局不闪
  */
 const App = memo(function App() {
+  useDocumentTitle()
   return (
     <>
       <Routes>
@@ -79,16 +62,15 @@ const App = memo(function App() {
             path={route.path}
             element={
               route.auth ? (
-                <RequireAuth>{route.element}</RequireAuth>
+                <RequireAuth>{<route.component />}</RequireAuth>
               ) : (
-                <Suspense fallback={<PageLoadingFallback />}>
-                  {route.element}
+                <Suspense fallback={<AppLoadingFallback />}>
+                  <route.component />
                 </Suspense>
               )
             }
           />
         ))}
-        <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
       <Toaster />
     </>
diff --git a/frontend/src/api/auth/index.ts b/frontend/src/api/auth/index.ts
index 9598e03..f137348 100644
--- a/frontend/src/api/auth/index.ts
+++ b/frontend/src/api/auth/index.ts
@@ -11,19 +11,16 @@ export interface LoginResponse {
 }
 
 export const authApi = {
+  // silent：错误密码返回 401 时不触发全局清凭证/跳登录
   login: (username: string, password: string) =>
-    http.post<LoginResponse>('/auth/login', { username, password }),
-
-  register: (username: string, password: string, nickname: string, role?: string) =>
-    http.post<User>('/auth/register', {
-      username,
-      password,
-      nickname,
-      role: role || 'user',
-    }),
+    http.post<LoginResponse>('/auth/login', { username, password }, { silent: true }),
 
   getCurrentUser: () => http.get<User>('/auth/user'),
 
   changePassword: (oldPassword: string, newPassword: string) =>
     http.post<{ message: string }>('/auth/password', { oldPassword, newPassword }),
+
+  // 后端探活（登录页检测 API 服务是否可达）；short timeout + silent
+  health: () =>
+    http.get<{ status: string }>('/health', { timeout: 3000, silent: true }),
 };
diff --git a/frontend/src/api/cluster/index.ts b/frontend/src/api/cluster/index.ts
index 766a329..af57b51 100644
--- a/frontend/src/api/cluster/index.ts
+++ b/frontend/src/api/cluster/index.ts
@@ -1,19 +1,28 @@
 // 集群域 API
-import { http } from '../http';
+import { http, buildQuery, type ListParams, type RequestOptions } from '../http';
 import type { PageData, Cluster, ClusterInfo } from '@/types';
 
+export interface ClusterCreateInput {
+  name: string;
+  description?: string;
+  configType?: string;
+  apiServer?: string;
+  kubeconfig?: string;
+  token?: string;
+  context?: string;
+}
+
+export type ClusterUpdateInput = Partial<ClusterCreateInput>;
+
 export const clusterApi = {
-  list: (page = 1, pageSize = 10) =>
-    http.get<PageData<Cluster>>(`/clusters?page=${page}&pageSize=${pageSize}`),
+  list: (params: ListParams = {}, options?: RequestOptions) =>
+    http.get<PageData<Cluster>>(`/clusters${buildQuery(params)}`, options),
 
   get: (id: number) => http.get<Cluster>(`/clusters/${id}`),
 
-  create: (data: {
-    name: string; description?: string; configType?: string;
-    apiServer?: string; kubeconfig?: string; token?: string; context?: string;
-  }) => http.post<Cluster>('/clusters', data),
+  create: (data: ClusterCreateInput) => http.post<Cluster>('/clusters', data),
 
-  update: (id: number, data: Record<string, unknown>) =>
+  update: (id: number, data: ClusterUpdateInput) =>
     http.put<{ message: string }>(`/clusters/${id}`, data),
 
   remove: (id: number) => http.delete<{ message: string }>(`/clusters/${id}`),
diff --git a/frontend/src/api/collector/index.ts b/frontend/src/api/collector/index.ts
index f125122..1abab56 100644
--- a/frontend/src/api/collector/index.ts
+++ b/frontend/src/api/collector/index.ts
@@ -1,10 +1,10 @@
 // 采集器域 API
-import { http } from '../http';
+import { http, buildQuery, type ListParams, type RequestOptions } from '../http';
 import type { PageData, Collector, CreateCollectorRequest } from '@/types';
 
 export const collectorApi = {
-  list: (page = 1, pageSize = 100) =>
-    http.get<PageData<Collector>>(`/collectors?page=${page}&pageSize=${pageSize}`),
+  list: (params: ListParams = {}, options?: RequestOptions) =>
+    http.get<PageData<Collector>>(`/collectors${buildQuery(params)}`, options),
 
   get: (id: number) => http.get<Collector>(`/collectors/${id}`),
 
diff --git a/frontend/src/api/deployment/index.ts b/frontend/src/api/deployment/index.ts
index 09f37cf..3c9f75c 100644
--- a/frontend/src/api/deployment/index.ts
+++ b/frontend/src/api/deployment/index.ts
@@ -1,5 +1,5 @@
 // Loki 部署域 API
-import { http } from '../http';
+import { http, buildQuery, type ListParams, type RequestOptions } from '../http';
 import type {
   PageData,
   LokiDeployment,
@@ -8,15 +8,17 @@ import type {
   CreateDeploymentRequest,
 } from '@/types';
 
+export type DeploymentUpdateInput = Partial<CreateDeploymentRequest>;
+
 export const deploymentApi = {
-  list: (page = 1, pageSize = 10) =>
-    http.get<PageData<LokiDeployment>>(`/deployments?page=${page}&pageSize=${pageSize}`),
+  list: (params: ListParams = {}, options?: RequestOptions) =>
+    http.get<PageData<LokiDeployment>>(`/deployments${buildQuery(params)}`, options),
 
   get: (id: number) => http.get<LokiDeployment>(`/deployments/${id}`),
 
   create: (data: CreateDeploymentRequest) => http.post<LokiDeployment>('/deployments', data),
 
-  update: (id: number, data: Record<string, unknown>) =>
+  update: (id: number, data: DeploymentUpdateInput) =>
     http.put<{ message: string }>(`/deployments/${id}`, data),
 
   remove: (id: number) => http.delete<{ message: string }>(`/deployments/${id}`),
@@ -27,10 +29,37 @@ export const deploymentApi = {
 
   restart: (id: number) => http.post<{ message: string }>(`/deployments/${id}/restart`),
 
-  logs: (id: number, page = 1, pageSize = 50) =>
+  logs: (id: number, params: ListParams = {}) =>
     http.get<PageData<DeploymentLog>>(
-      `/deployments/${id}/logs?page=${page}&pageSize=${pageSize}`
+      `/deployments/${id}/logs${buildQuery({ page: 1, pageSize: 50, ...params })}`
     ),
 
   stats: () => http.get<DashboardStats>('/deployments/stats'),
+
+  // 部署就绪探测(经自动注册数据源访问 Loki /ready)
+  ready: (id: number) => http.get<{ ready: boolean; message: string }>(`/deployments/${id}/ready`),
+
+  // 支持的 Loki 版本列表(部署表单版本下拉数据源)
+  versions: () => http.get<{ versions: string[] }>('/deployments/versions'),
+
+  // 向导预检:聚合存储/集群/主机/Loki/采集器状态(状态推导式向导数据源)
+  preflight: () =>
+    http.get<{
+      hasStorage: boolean
+      defaultStorage: string
+      hasActiveCluster: boolean
+      clusterNames: string[]
+      hasActiveHost: boolean
+      hostNames: string[]
+      runningLoki: null | {
+        id: number
+        name: string
+        mode: string
+        endpoint: string
+        namespace: string
+        grafana: boolean
+      }
+      activeCollectors: number
+      grafanaReady: boolean
+    }>('/deployments/preflight'),
 };
diff --git a/frontend/src/api/host/index.ts b/frontend/src/api/host/index.ts
index d8f6c11..011f523 100644
--- a/frontend/src/api/host/index.ts
+++ b/frontend/src/api/host/index.ts
@@ -1,20 +1,32 @@
 // 主机域 API
-import { http } from '../http';
+import { http, buildQuery, type ListParams, type RequestOptions } from '../http';
 import type { PageData, Host, HostInfo } from '@/types';
 
+export interface HostCreateInput {
+  name: string;
+  hostIP: string;
+  port?: number;
+  user: string;
+  authType: 'password' | 'key';
+  password?: string;
+  privateKey?: string;
+  keyPhrase?: string;
+  os?: string;
+  arch?: string;
+  labels?: string;
+}
+
+export type HostUpdateInput = Partial<HostCreateInput>;
+
 export const hostApi = {
-  list: (page = 1, pageSize = 10) =>
-    http.get<PageData<Host>>(`/hosts?page=${page}&pageSize=${pageSize}`),
+  list: (params: ListParams = {}, options?: RequestOptions) =>
+    http.get<PageData<Host>>(`/hosts${buildQuery(params)}`, options),
 
   get: (id: number) => http.get<Host>(`/hosts/${id}`),
 
-  create: (data: {
-    name: string; hostIP: string; port?: number; user: string;
-    authType: 'password' | 'key'; password?: string; privateKey?: string;
-    keyPhrase?: string; os?: string; arch?: string; labels?: string;
-  }) => http.post<Host>('/hosts', data),
+  create: (data: HostCreateInput) => http.post<Host>('/hosts', data),
 
-  update: (id: number, data: Record<string, unknown>) =>
+  update: (id: number, data: HostUpdateInput) =>
     http.put<{ message: string }>(`/hosts/${id}`, data),
 
   remove: (id: number) => http.delete<{ message: string }>(`/hosts/${id}`),
diff --git a/frontend/src/api/http.ts b/frontend/src/api/http.ts
index 6867dea..c972f85 100644
--- a/frontend/src/api/http.ts
+++ b/frontend/src/api/http.ts
@@ -1,51 +1,108 @@
-// HTTP 请求引擎 — 统一的 fetch 封装，提供 request<T> 与 http.get/post/put/delete 两种用法。
-// 参考 aiops 的 @/utils/request 模式：超时/取消、token 注入、401 自动登出、统一错误处理。
+// HTTP 请求引擎 — 统一 fetch 封装：超时/取消、token 注入、结构化错误、
+// 401 单飞刷新 + 队列重放（见开发标准 03 章）。组件一律通过 api 层调用，禁止直接 fetch。
 import type { ApiResponse } from '@/types';
+import {
+  getAccessToken,
+  getRefreshToken,
+  saveTokenPair,
+  clearAuth,
+} from '@/lib/auth-storage';
 
 const API_BASE = import.meta.env.VITE_API_URL || '';
-const DEFAULT_TIMEOUT = 30000; // 30秒默认超时
+const DEFAULT_TIMEOUT = 30000; // 30 秒默认超时
+const REFRESH_TIMEOUT = 10000; // 刷新 token 接口独立超时
 
-function getToken(): string | null {
-  return localStorage.getItem('token');
+/** 结构化 API 错误：status 为 HTTP 状态码（网络/超时等非 HTTP 错误为 0），code 为后端业务码 */
+export class ApiError extends Error {
+  readonly status: number;
+  readonly code?: number;
+
+  constructor(message: string, status = 0, code?: number) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.code = code;
+  }
 }
 
-interface RequestOptions extends RequestInit {
+export interface RequestOptions extends RequestInit {
   timeout?: number;
-  signal?: AbortSignal;
+  /** 静默模式：401 失效不触发清凭证/跳登录的全局副作用，仅抛错（登录、轮询接口用） */
+  silent?: boolean;
+  /** 内部标记：刷新 token 后的重放请求，防止 401 无限循环 */
+  retried?: boolean;
 }
 
-/**
- * 核心请求函数：带超时与取消支持，自动注入 Authorization，统一处理 401。
- */
-export async function request<T>(
-  url: string,
-  options: RequestOptions = {}
-): Promise<T> {
+// —— 401 单飞刷新状态 ——
+// 并发 N 个 401 只触发一次刷新；刷新期间的请求进入队列，拿到新 token 后统一重放。
+let isRefreshing = false;
+let refreshQueue: Array<(token: string | null) => void> = [];
+
+// 这些端点自身的 401 不触发登出跳转（错误密码、refresh 失效等场景）
+const AUTH_ENDPOINTS = ['/auth/login', '/auth/refresh'];
+
+async function doRefresh(): Promise<string | null> {
+  const refreshToken = getRefreshToken();
+  if (!refreshToken) return null;
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), REFRESH_TIMEOUT);
+    const response = await fetch(`${API_BASE}/api/v1/auth/refresh`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refreshToken }),
+      signal: controller.signal,
+    });
+    clearTimeout(timer);
+    if (!response.ok) return null;
+    const body = (await response.json()) as ApiResponse<{
+      accessToken: string;
+      refreshToken: string;
+      expiresAt: number;
+    }>;
+    if (body.code !== 0 || !body.data?.accessToken) return null;
+    saveTokenPair(body.data);
+    return body.data.accessToken;
+  } catch {
+    return null;
+  }
+}
+
+let redirecting = false;
+
+/** 清凭证并防抖跳转登录（并发失效只产生一次跳转，携带当前路径供回跳） */
+function redirectToLogin(): void {
+  clearAuth();
+  if (redirecting) return;
+  redirecting = true;
+  const current = window.location.pathname + window.location.search;
+  const target =
+    current.startsWith('/login')
+      ? '/login'
+      : `/login?redirect=${encodeURIComponent(current)}`;
+  window.location.href = target;
+}
+
+/** 单次 HTTP 往返：组头、超时、取消、解包。401 以 ApiError(status=401) 抛出，由上层统一处理 */
+async function doRequest<T>(url: string, options: RequestOptions): Promise<T> {
   const { timeout = DEFAULT_TIMEOUT, signal, ...fetchOptions } = options;
 
-  const token = getToken();
+  const token = getAccessToken();
   const headers: Record<string, string> = {
     'Content-Type': 'application/json',
     ...((fetchOptions.headers as Record<string, string>) || {}),
   };
-
   if (token) {
     headers['Authorization'] = `Bearer ${token}`;
   }
 
   const fullUrl = `${API_BASE}/api/v1${url}`;
 
-  // 超时控制
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), timeout);
-
-  // 外部 signal 联动
-  const externalSignal = signal;
-  const onExternalAbort = () => {
-    controller.abort();
-  };
-  if (externalSignal) {
-    externalSignal.addEventListener('abort', onExternalAbort);
+  const onExternalAbort = () => controller.abort();
+  if (signal) {
+    signal.addEventListener('abort', onExternalAbort);
   }
 
   try {
@@ -55,53 +112,109 @@ export async function request<T>(
       signal: controller.signal,
     });
 
-    clearTimeout(timeoutId);
-
     if (response.status === 401) {
-      localStorage.removeItem('token');
-      localStorage.removeItem('refreshToken');
-      localStorage.removeItem('user');
-      window.location.href = '/login';
-      throw new Error('Unauthorized');
+      throw new ApiError('未授权或登录已过期', 401);
     }
 
     const contentType = response.headers.get('content-type');
     if (!contentType || !contentType.includes('application/json')) {
       const text = await response.text();
-      throw new Error(
-        `Server returned non-JSON (${response.status}): ${text.substring(0, 200)}`
+      throw new ApiError(
+        `服务端返回了非 JSON 响应（${response.status}）：${text.substring(0, 200)}`,
+        response.status
       );
     }
 
-    const data = (await response.json()) as ApiResponse<T>;
-    if (data.code !== 0) {
-      throw new Error(data.message || 'Request failed');
+    const body: unknown = await response.json();
+    // 多数接口走 {code, data, message} 包装；/health 等基础端点直接返回裸 JSON
+    if (
+      body !== null &&
+      typeof body === 'object' &&
+      'code' in body &&
+      typeof (body as ApiResponse<T>).code === 'number'
+    ) {
+      const data = body as ApiResponse<T>;
+      if (data.code !== 0) {
+        throw new ApiError(data.message || '请求失败', response.status, data.code);
+      }
+      return data.data;
     }
-    return data.data;
+    return body as T;
   } catch (err) {
-    clearTimeout(timeoutId);
-
-    if (err instanceof Error) {
-      if (err.name === 'AbortError') {
-        if (controller.signal.aborted && !externalSignal?.aborted) {
-          throw new Error(`Request timeout after ${timeout}ms`);
-        }
-        throw new Error('Request was cancelled');
-      }
-      if (err instanceof TypeError && err.message.includes('fetch')) {
-        throw new Error(
-          'Cannot connect to backend server. Please ensure the API server is running.'
-        );
+    if (err instanceof ApiError) throw err;
+    if (err instanceof Error && err.name === 'AbortError') {
+      if (controller.signal.aborted && !signal?.aborted) {
+        throw new ApiError(`请求超时（${timeout}ms）`);
       }
+      throw new ApiError('请求已取消');
     }
-    throw err;
+    if (err instanceof TypeError) {
+      throw new ApiError('无法连接到后端服务，请确认 API 服务已启动');
+    }
+    throw err instanceof Error ? new ApiError(err.message) : new ApiError(String(err));
   } finally {
-    if (externalSignal) {
-      externalSignal.removeEventListener('abort', onExternalAbort);
+    clearTimeout(timeoutId);
+    if (signal) {
+      signal.removeEventListener('abort', onExternalAbort);
     }
   }
 }
 
+/**
+ * 核心请求函数：在 doRequest 之上处理 401 —— 有 refreshToken 时单飞刷新并重放；
+ * 刷新失败或无 refreshToken 时清凭证跳登录（silent 请求除外）。
+ */
+export async function request<T>(
+  url: string,
+  options: RequestOptions = {}
+): Promise<T> {
+  try {
+    return await doRequest<T>(url, options);
+  } catch (err) {
+    if (!(err instanceof ApiError) || err.status !== 401) throw err;
+
+    // 静默请求 / 鉴权端点自身 / 已重放过：不再刷新、不再跳转，直接失败
+    if (options.silent || options.retried || AUTH_ENDPOINTS.some((p) => url.startsWith(p))) {
+      throw err;
+    }
+
+    if (!getRefreshToken()) {
+      redirectToLogin();
+      throw new ApiError('登录已过期，请重新登录', 401);
+    }
+
+    // 已有刷新在进行中：挂入队列，等新 token 下发后重放本请求
+    if (isRefreshing) {
+      return new Promise<T>((resolve, reject) => {
+        refreshQueue.push((token) => {
+          if (!token) {
+            reject(new ApiError('登录已过期，请重新登录', 401));
+            return;
+          }
+          request<T>(url, { ...options, retried: true }).then(resolve, reject);
+        });
+      });
+    }
+
+    isRefreshing = true;
+    let newToken: string | null = null;
+    try {
+      newToken = await doRefresh();
+    } finally {
+      isRefreshing = false;
+      const queue = refreshQueue;
+      refreshQueue = [];
+      queue.forEach((cb) => cb(newToken));
+    }
+
+    if (!newToken) {
+      redirectToLogin();
+      throw new ApiError('登录已过期，请重新登录', 401);
+    }
+    return request<T>(url, { ...options, retried: true });
+  }
+}
+
 /**
  * 语义化 HTTP 助手：自动处理 method 与 JSON 序列化，减少调用样板。
  * @example
@@ -129,57 +242,20 @@ export const http = {
     request<T>(url, { ...options, method: 'DELETE' }),
 };
 
-/**
- * 创建可取消的请求辅助函数
- */
-export function createCancelableRequest() {
-  const controller = new AbortController();
-
-  return {
-    request: async <T>(url: string, options: Omit<RequestOptions, 'signal'> = {}) => {
-      return request<T>(url, { ...options, signal: controller.signal });
-    },
-    cancel: () => controller.abort(),
-    get signal() {
-      return controller.signal;
-    },
-  };
+/** 列表查询参数（分页） */
+export interface ListParams {
+  page?: number;
+  pageSize?: number;
 }
 
-/**
- * 带自动重试的请求函数（不重试 401/取消/超时）
- */
-export async function requestWithRetry<T>(
-  url: string,
-  options: RequestOptions = {},
-  retries = 3,
-  delay = 1000
-): Promise<T> {
-  let lastError: Error | unknown;
-
-  for (let i = 0; i < retries; i++) {
-    try {
-      return await request<T>(url, options);
-    } catch (err) {
-      lastError = err;
-
-      if (err instanceof Error) {
-        if (
-          err.message === 'Unauthorized' ||
-          err.message === 'Request was cancelled' ||
-          err.message.startsWith('Request timeout')
-        ) {
-          throw err;
-        }
-      }
-
-      if (i === retries - 1) {
-        throw err;
-      }
-
-      await new Promise((resolve) => setTimeout(resolve, delay * (i + 1)));
+/** 列表查询参数：统一编码拼接，避免模板字符串拼 query 无转义 */
+export function buildQuery(params: ListParams): string {
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined && value !== '') {
+      search.set(key, String(value));
     }
   }
-
-  throw lastError;
+  const qs = search.toString();
+  return qs ? `?${qs}` : '';
 }
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 66366c1..1cde07e 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -7,3 +7,4 @@ export * from './host';
 export * from './storage';
 export * from './deployment';
 export * from './collector';
+export * from './user';
diff --git a/frontend/src/api/ldap/index.ts b/frontend/src/api/ldap/index.ts
new file mode 100644
index 0000000..e090b87
--- /dev/null
+++ b/frontend/src/api/ldap/index.ts
@@ -0,0 +1,55 @@
+// LDAP 域 API — 配置(密码脱敏)/测试/用户预览/批量导入
+import { http } from '../http';
+
+export interface LdapConfig {
+  enabled: boolean
+  host: string
+  port: number
+  useSSL: boolean
+  bindDN: string
+  bindPassword: string // 提交时传空 = 保留已存密码;响应恒为空
+  baseDN: string
+  userFilter: string
+  usernameAttr: string
+  nameAttr: string
+  emailAttr: string
+  // 仅响应
+  hasPassword?: boolean
+  configured?: boolean
+}
+
+export interface LdapTestResult {
+  success: boolean
+  message: string
+  userInfo?: { dn: string; username: string; displayName: string; email: string }
+}
+
+export interface LdapUserPreview {
+  dn: string
+  username: string
+  displayName: string
+  email: string
+}
+
+export interface LdapImportResult {
+  successCount: number
+  skippedCount: number
+  updatedCount: number
+  failedCount: number
+  failedUsers: Array<{ username: string; error: string }>
+}
+
+export const ldapApi = {
+  getConfig: () => http.get<LdapConfig>('/settings/ldap'),
+
+  saveConfig: (data: LdapConfig) => http.put<LdapConfig>('/settings/ldap', data),
+
+  // 用表单参数测试(未保存也可测;密码空回退已存)
+  test: (data: LdapConfig & { testUsername?: string; testPassword?: string }) =>
+    http.post<LdapTestResult>('/settings/ldap/test', data),
+
+  listUsers: (ouDN?: string) => http.post<LdapUserPreview[]>('/settings/ldap/users', { ouDN: ouDN || '' }),
+
+  batchImport: (users: Array<{ dn: string; username: string; nickname: string; email: string }>) =>
+    http.post<LdapImportResult>('/users/batch-import-ldap', { users }),
+}
diff --git a/frontend/src/api/storage/index.ts b/frontend/src/api/storage/index.ts
index 97fa55f..d9ec422 100644
--- a/frontend/src/api/storage/index.ts
+++ b/frontend/src/api/storage/index.ts
@@ -1,24 +1,55 @@
 // 存储域 API
-import { http } from '../http';
+import { http, buildQuery, type ListParams, type RequestOptions } from '../http';
 import type { PageData, StorageConfig } from '@/types';
 
+export interface StorageCreateInput {
+  name: string;
+  storageType: 's3' | 'oss' | 'minio' | 'rustfs';
+  endpoint?: string;
+  bucket: string;
+  region?: string;
+  accessKey?: string;
+  secretKey?: string;
+  pathPrefix?: string;
+  insecure?: boolean;
+  isDefault?: boolean;
+}
+
+export type StorageUpdateInput = Partial<StorageCreateInput>;
+
 export const storageApi = {
-  list: (page = 1, pageSize = 10) =>
-    http.get<PageData<StorageConfig>>(`/storages?page=${page}&pageSize=${pageSize}`),
+  list: (params: ListParams = {}, options?: RequestOptions) =>
+    http.get<PageData<StorageConfig>>(`/storages${buildQuery(params)}`, options),
 
   get: (id: number) => http.get<StorageConfig>(`/storages/${id}`),
 
-  create: (data: {
-    name: string; storageType: 's3' | 'oss' | 'minio' | 'rustfs';
-    endpoint?: string; bucket: string; region?: string;
-    accessKey?: string; secretKey?: string; pathPrefix?: string;
-    insecure?: boolean; isDefault?: boolean;
-  }) => http.post<StorageConfig>('/storages', data),
+  create: (data: StorageCreateInput) => http.post<StorageConfig>('/storages', data),
 
-  update: (id: number, data: Record<string, unknown>) =>
+  update: (id: number, data: StorageUpdateInput) =>
     http.put<{ message: string }>(`/storages/${id}`, data),
 
   remove: (id: number) => http.delete<{ message: string }>(`/storages/${id}`),
 
   getDefault: () => http.get<StorageConfig>('/storages/default'),
+
+  // 测试连接(不落库):可达性/凭证/桶存在性,createIfMissing 时自动建桶
+  test: (data: {
+    storageType: StorageCreateInput['storageType'];
+    endpoint?: string;
+    bucket: string;
+    region?: string;
+    accessKey?: string;
+    secretKey?: string;
+    insecure?: boolean;
+    createIfMissing?: boolean;
+  }) =>
+    http.post<StorageTestResult>('/storages/test', data),
 };
+
+export interface StorageTestResult {
+  reachable: boolean;
+  authenticated: boolean;
+  bucketExists: boolean;
+  bucketCreated: boolean;
+  message: string;
+}
diff --git a/frontend/src/api/user/index.ts b/frontend/src/api/user/index.ts
new file mode 100644
index 0000000..f34c998
--- /dev/null
+++ b/frontend/src/api/user/index.ts
@@ -0,0 +1,23 @@
+// 用户管理域 API（全部端点仅 admin 可用，后端 AdminAuth 兜底）
+import { http, buildQuery, type ListParams, type RequestOptions } from '../http';
+import type { PageData, User } from '@/types';
+
+export interface UserCreateInput {
+  username: string;
+  password: string;
+  nickname?: string;
+  role?: 'admin' | 'user';
+}
+
+export const userApi = {
+  list: (params: ListParams = {}, options?: RequestOptions) =>
+    http.get<PageData<User>>(`/users${buildQuery(params)}`, options),
+
+  create: (data: UserCreateInput) => http.post<User>('/users', data),
+
+  remove: (id: number) => http.delete<{ message: string }>(`/users/${id}`),
+
+  // 管理员重置密码（后端会吊销目标用户全部旧会话）
+  resetPassword: (id: number, newPassword: string) =>
+    http.post<{ message: string }>(`/users/${id}/reset-password`, { newPassword }),
+};
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..e25cfe5
--- /dev/null
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -0,0 +1,71 @@
+import { memo } from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+
+interface ConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 危险操作对象名进文案（如集群名），防误删 */
+  name?: string
+  title?: string
+  description?: string
+  confirmText?: string
+  /** 确认中（提交 loading 态防双击） */
+  loading?: boolean
+  onConfirm: () => void
+}
+
+/**
+ * 危险操作确认弹窗 — 替代原生 window.confirm()（阻塞主线程且样式与组件体系脱节）。
+ * 默认为删除语义（红色确认钮）；文案必须带操作对象名。
+ */
+export const ConfirmDialog = memo(function ConfirmDialog({
+  open,
+  onOpenChange,
+  name,
+  title = '确认删除',
+  description,
+  confirmText = '删除',
+  loading = false,
+  onConfirm,
+}: ConfirmDialogProps) {
+  const desc =
+    description ??
+    (name
+      ? `确定要删除「${name}」吗？此操作不可恢复。`
+      : '确定要执行该操作吗？此操作不可恢复。')
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{desc}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
+          <AlertDialogAction
+            disabled={loading}
+            onClick={(e) => {
+              // 阻止默认关闭，等异步完成由调用方控制
+              e.preventDefault()
+              onConfirm()
+            }}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {loading ? '处理中...' : confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+})
+
+export default ConfirmDialog
diff --git a/frontend/src/components/EmptyState.tsx b/frontend/src/components/EmptyState.tsx
index 5251650..774c927 100644
--- a/frontend/src/components/EmptyState.tsx
+++ b/frontend/src/components/EmptyState.tsx
@@ -24,12 +24,12 @@ export const EmptyState = memo(function EmptyState({
   className,
 }: EmptyStateProps) {
   return (
-    <Card className={cn('border-dashed border-slate-300 dark:border-slate-700', className)}>
+    <Card className={cn('border-dashed border-border', className)}>
       <CardContent className="p-12 text-center">
-        <Icon className="w-12 h-12 text-slate-300 mx-auto mb-4" />
-        <p className="text-slate-500 font-medium">{title}</p>
+        <Icon className="w-12 h-12 text-muted-foreground/60 mx-auto mb-4" />
+        <p className="text-muted-foreground font-medium">{title}</p>
         {description && (
-          <p className="text-sm text-slate-400 mt-1">{description}</p>
+          <p className="text-sm text-muted-foreground mt-1">{description}</p>
         )}
         {action && <div className="mt-4">{action}</div>}
       </CardContent>
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index 083b702..5ab5c0b 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -2,49 +2,69 @@ import { Component, type ReactNode } from 'react'
 
 interface State {
   hasError: boolean
-  error?: Error
+  message?: string
 }
 
-// 捕获子树渲染错误，避免整页白屏；显示错误信息便于排查
+// 动态 import / chunk 加载失败特征（发版后旧 hash chunk 404 是最常见场景）
+function isChunkLoadError(error: Error): boolean {
+  const msg = error.message || ''
+  return (
+    msg.includes('Failed to fetch dynamically imported module') ||
+    msg.includes('Importing a module script failed') ||
+    msg.includes('Loading chunk') ||
+    msg.includes('Loading CSS chunk')
+  )
+}
+
+const CHUNK_RELOADED_FLAG = 'opsxloki.chunk-reloaded'
+
+/**
+ * 全局错误边界
+ * - chunk 加载失败自动刷新一次（每个会话最多一次，防循环），二次失败才显示错误卡片
+ * - 不向用户暴露原始堆栈，仅显示错误消息摘要
+ */
 export default class ErrorBoundary extends Component<{ children: ReactNode }, State> {
   state: State = { hasError: false }
 
   static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error }
+    if (isChunkLoadError(error) && !sessionStorage.getItem(CHUNK_RELOADED_FLAG)) {
+      sessionStorage.setItem(CHUNK_RELOADED_FLAG, '1')
+      window.location.reload()
+    }
+    return { hasError: true, message: error.message }
   }
 
   componentDidCatch(error: Error, info: { componentStack: string }) {
+    // 错误上报收口：先 console，后续可接 Sentry 等远端上报
     console.error('页面渲染错误:', error, info)
   }
 
   handleReset = () => {
-    this.setState({ hasError: false, error: undefined })
+    this.setState({ hasError: false, message: undefined })
   }
 
   render() {
     if (this.state.hasError) {
       return (
-        <div className="min-h-screen flex items-center justify-center bg-slate-50 p-4">
-          <div className="max-w-lg w-full bg-white rounded-2xl shadow-lg border border-red-200 p-6">
-            <h2 className="text-lg font-semibold text-red-600 mb-2">页面渲染出错</h2>
-            <p className="text-sm text-slate-600 mb-3">
-              请把下方错误信息反馈给开发者，或尝试刷新页面：
+        <div className="min-h-screen flex items-center justify-center bg-muted dark:bg-slate-950 p-4">
+          <div className="max-w-lg w-full bg-card rounded-2xl shadow-lg border border-destructive/30 p-6">
+            <h2 className="text-lg font-semibold text-destructive mb-2">页面渲染出错</h2>
+            <p className="text-sm text-muted-foreground mb-3">
+              页面遇到异常，可尝试刷新；若持续出现请把下方信息反馈给开发者。
             </p>
-            <pre className="text-xs bg-slate-900 text-red-300 p-3 rounded-lg overflow-auto max-h-60 font-mono whitespace-pre-wrap">
-              {this.state.error?.message || '未知错误'}
-              {'\n\n'}
-              {this.state.error?.stack}
+            <pre className="text-xs bg-muted font-mono text-destructive p-3 rounded-lg overflow-auto max-h-40 font-mono whitespace-pre-wrap">
+              {this.state.message || '未知错误'}
             </pre>
             <div className="flex gap-2 mt-4">
               <button
                 onClick={() => window.location.reload()}
-                className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm hover:bg-emerald-700"
+                className="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90"
               >
                 刷新页面
               </button>
               <button
                 onClick={this.handleReset}
-                className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg text-sm hover:bg-slate-200"
+                className="px-4 py-2 bg-muted text-muted-foreground rounded-lg text-sm hover:bg-muted"
               >
                 重置组件
               </button>
diff --git a/frontend/src/components/ErrorState.tsx b/frontend/src/components/ErrorState.tsx
new file mode 100644
index 0000000..f6fb2c3
--- /dev/null
+++ b/frontend/src/components/ErrorState.tsx
@@ -0,0 +1,41 @@
+import { memo } from 'react'
+import { AlertCircle, RotateCw } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+
+interface ErrorStateProps {
+  /** 错误消息（原因必带，用户要知情） */
+  message?: string
+  onRetry?: () => void
+  className?: string
+}
+
+/**
+ * 错误占位态 — 与空态（EmptyState）严格区分：加载失败必须可见且可重试，
+ * 禁止把失败吞掉后渲染成「暂无数据」（数据组件三态之一，见开发标准 07 章）。
+ */
+export const ErrorState = memo(function ErrorState({
+  message = '加载失败',
+  onRetry,
+  className,
+}: ErrorStateProps) {
+  return (
+    <Card className="border-destructive/30 border-dashed">
+      <CardContent className={className ?? 'p-12 text-center'}>
+        <AlertCircle className="w-12 h-12 text-destructive mx-auto mb-4" />
+        <p className="text-muted-foreground font-medium">{message}</p>
+        <p className="text-sm text-muted-foreground mt-1">请检查网络或后端服务状态后重试</p>
+        {onRetry && (
+          <div className="mt-4">
+            <Button variant="outline" size="sm" onClick={onRetry}>
+              <RotateCw className="w-3.5 h-3.5 mr-1" />
+              重试
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+})
+
+export default ErrorState
diff --git a/frontend/src/components/InfoRow.tsx b/frontend/src/components/InfoRow.tsx
new file mode 100644
index 0000000..891d337
--- /dev/null
+++ b/frontend/src/components/InfoRow.tsx
@@ -0,0 +1,27 @@
+import { memo } from 'react'
+import { cn } from '@/lib/utils'
+
+interface InfoRowProps {
+  label: string
+  value: string
+  /** 追加到 value 上的类（如截断宽度） */
+  valueClass?: string
+}
+
+/**
+ * 信息行 — 标签/值 两栏展示。
+ * 原先在 Clusters/Hosts/Deployments/Collectors/Storage 五个页面各复制一份，
+ * 第三次复用时晋升为全局组件（三次法则，见开发标准 02 章）。
+ */
+export const InfoRow = memo(function InfoRow({ label, value, valueClass }: InfoRowProps) {
+  return (
+    <div className="flex justify-between">
+      <span>{label}</span>
+      <span className={cn('font-medium text-foreground', valueClass)}>
+        {value}
+      </span>
+    </div>
+  )
+})
+
+export default InfoRow
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 9681f10..74c4bf2 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -3,198 +3,249 @@ import {
   useState,
   useEffect,
   useCallback,
-  useMemo,
+  Suspense,
 } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router'
 import {
-  LayoutDashboard,
-  Server,
-  Monitor,
-  HardDrive,
-  Rocket,
-  RadioTower,
-  Settings,
   LogOut,
   PanelLeftClose,
   PanelLeftOpen,
   Shield,
   ChevronRight,
   Activity,
+  Menu,
+  Sun,
+  Moon,
+  Monitor,
 } from 'lucide-react'
+import { useTheme } from 'next-themes'
 import { cn } from '@/lib/utils'
 import { useIsMobile } from '@/hooks/use-mobile'
+import { menuItems, findRouteMeta } from '@/router/routes'
+import { getUser, clearAuth } from '@/lib/auth-storage'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
 
-interface MenuItem {
-  path: string
-  icon: typeof LayoutDashboard
-  label: string
+// 侧栏折叠状态持久化 key（命名空间见开发标准 08 章）
+const LAYOUT_COLLAPSED_KEY = 'opsxloki.layout.collapsed'
+
+// 侧栏导航 — 桌面 aside 与移动端抽屉共用；菜单数据来自路由配置单源派生
+function SidebarNav({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: () => void }) {
+  const location = useLocation()
+  const isAdmin = getUser()?.role === 'admin'
+  // adminOnly 项（用户管理）仅管理员可见；后端 AdminAuth 兜底
+  const visibleItems = menuItems.filter((item) => !item.adminOnly || isAdmin)
+  return (
+    <nav className="flex-1 py-4 px-2 space-y-1 overflow-y-auto" aria-label="主导航">
+      {visibleItems.map((item) => {
+        const isActive = location.pathname === item.path
+        return (
+          <Link
+            key={item.path}
+            to={item.path}
+            onClick={onNavigate}
+            aria-label={item.label}
+            className={cn(
+              'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all',
+              isActive
+                ? 'bg-primary text-primary-foreground'
+                : 'text-slate-400 hover:bg-slate-800 hover:text-white'
+            )}
+            title={!collapsed ? item.label : undefined}
+          >
+            {item.icon && <item.icon className="w-5 h-5 flex-shrink-0" />}
+            {!collapsed && <span className="text-sm font-medium">{item.label}</span>}
+            {!collapsed && isActive && (
+              <ChevronRight className="w-4 h-4 ml-auto flex-shrink-0" />
+            )}
+          </Link>
+        )
+      })}
+    </nav>
+  )
 }
 
-const MENU_ITEMS: MenuItem[] = [
-  { path: '/', icon: LayoutDashboard, label: '仪表盘' },
-  { path: '/clusters', icon: Server, label: '集群管理' },
-  { path: '/hosts', icon: Monitor, label: '主机管理' },
-  { path: '/storage', icon: HardDrive, label: '存储配置' },
-  { path: '/deployments', icon: Rocket, label: '部署Loki' },
-  { path: '/collectors', icon: RadioTower, label: '部署客户端' },
-  { path: '/settings', icon: Settings, label: '系统设置' },
-]
+// 侧栏 Logo 区
+function SidebarLogo({ collapsed }: { collapsed: boolean }) {
+  return (
+    <div className="h-16 flex items-center px-4 border-b border-slate-700 flex-shrink-0">
+      {collapsed ? (
+        <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center mx-auto">
+          <Activity className="w-5 h-5 text-white" />
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
+            <Activity className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-lg tracking-tight">opsx-loki</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// 主题三态切换：浅色 → 深色 → 跟随系统（key: opsxloki.theme.mode）
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light'
+  const label = next === 'light' ? '切换为浅色' : next === 'dark' ? '切换为深色' : '切换为跟随系统'
+  return (
+    <button
+      onClick={() => setTheme(next)}
+      aria-label={label}
+      title={label}
+      className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+    >
+      {theme === 'light' ? (
+        <Sun className="w-4 h-4" />
+      ) : theme === 'dark' ? (
+        <Moon className="w-4 h-4" />
+      ) : (
+        <Monitor className="w-4 h-4" />
+      )}
+    </button>
+  )
+}
+
+// 页面级加载骨架（挂在 main 内，切页时布局不闪）
+function PageSkeleton() {
+  return (
+    <div className="space-y-6" aria-busy="true" aria-label="页面加载中">
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-40 rounded-xl" />
+        ))}
+      </div>
+    </div>
+  )
+}
 
 /**
- * Layout 组件（React.memo优化）
- * 
- * 优化点：
- * 1. 使用 React.memo 避免不必要的重渲染
- * 2. menuItems 使用 useMemo 缓存
- * 3. handleLogout 使用 useCallback 缓存
- * 4. sidebar 状态使用 useIsMobile 自动适配移动端
- * 5. 导航链接使用 useMemo 缓存避免重复计算
+ * Layout 组件 — 布局骨架，业务页只挂在内容区
+ * - 菜单/顶栏标题来自路由 meta 单源（router/routes.tsx）
+ * - 桌面端折叠状态持久化；移动端（<768px）侧栏为抽屉 + 遮罩
+ * - 页面懒加载的 Suspense 边界在 main 内部
  */
 const Layout = memo(function Layout({ children }: { children: React.ReactNode }) {
   const isMobile = useIsMobile()
-  const [sidebarOpen, setSidebarOpen] = useState(!isMobile)
-  const [user, setUser] = useState<{ username: string; role: string } | null>(null)
+  const [collapsed, setCollapsed] = useState(() => localStorage.getItem(LAYOUT_COLLAPSED_KEY) === '1')
+  const [mobileOpen, setMobileOpen] = useState(false)
   const location = useLocation()
   const navigate = useNavigate()
+  const user = getUser()
 
-  // 当移动端状态变化时，自动调整侧边栏
-  useEffect(() => {
-    setSidebarOpen(!isMobile)
-  }, [isMobile])
+  // 顶栏标题来自路由 meta
+  const pageTitle = findRouteMeta(location.pathname)?.title || 'opsx-loki'
 
-  // 从localStorage加载用户信息
+  // 折叠状态持久化（仅桌面端语义）
   useEffect(() => {
-    const stored = localStorage.getItem('user')
-    if (stored) {
-      try {
-        setUser(JSON.parse(stored))
-      } catch {
-        // 解析失败静默处理
-      }
-    }
+    localStorage.setItem(LAYOUT_COLLAPSED_KEY, collapsed ? '1' : '0')
+  }, [collapsed])
+
+  const toggleSidebar = useCallback(() => {
+    setCollapsed((prev) => !prev)
   }, [])
 
-  // 缓存当前页面标题
-  const pageTitle = useMemo(
-    () => MENU_ITEMS.find((item) => item.path === location.pathname)?.label || '仪表盘',
-    [location.pathname]
-  )
-
-  // 缓存登出处理函数
   const handleLogout = useCallback(() => {
-    localStorage.removeItem('token')
-    localStorage.removeItem('refreshToken')
-    localStorage.removeItem('user')
-    navigate('/login')
+    clearAuth()
+    navigate('/login', { replace: true })
   }, [navigate])
 
-  // 缓存侧边栏切换函数
-  const toggleSidebar = useCallback(() => {
-    setSidebarOpen((prev) => !prev)
-  }, [])
-
   return (
-    <div className="flex h-screen bg-slate-50 dark:bg-slate-950">
-      {/* Sidebar */}
-      <aside
-        className={cn(
-          'bg-slate-900 text-white transition-all duration-300 flex flex-col flex-shrink-0',
-          sidebarOpen ? 'w-64' : 'w-16'
-        )}
-      >
-        {/* Logo */}
-        <div className="h-16 flex items-center px-4 border-b border-slate-700 flex-shrink-0">
-          {sidebarOpen ? (
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-8 rounded-lg bg-emerald-500 flex items-center justify-center">
-                <Activity className="w-5 h-5 text-white" />
-              </div>
-              <span className="font-bold text-lg tracking-tight">LokiDeploy</span>
-            </div>
-          ) : (
-            <div className="w-8 h-8 rounded-lg bg-emerald-500 flex items-center justify-center mx-auto">
-              <Activity className="w-5 h-5 text-white" />
-            </div>
+    <div className="flex h-screen bg-background">
+      {/* 桌面侧栏 */}
+      {!isMobile && (
+        <aside
+          className={cn(
+            'bg-slate-900 text-white transition-all duration-300 flex flex-col flex-shrink-0',
+            collapsed ? 'w-16' : 'w-64'
           )}
-        </div>
+        >
+          <SidebarLogo collapsed={collapsed} />
+          <SidebarNav collapsed={collapsed} />
+          <div className="p-2 border-t border-slate-700 flex-shrink-0">
+            <button
+              onClick={toggleSidebar}
+              aria-label={collapsed ? '展开菜单' : '收起菜单'}
+              title={collapsed ? '展开菜单' : '收起菜单'}
+              className="flex items-center justify-center w-full py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white transition-all"
+            >
+              {collapsed ? (
+                <PanelLeftOpen className="w-5 h-5" />
+              ) : (
+                <PanelLeftClose className="w-5 h-5" />
+              )}
+            </button>
+          </div>
+        </aside>
+      )}
 
-        {/* Navigation */}
-        <nav className="flex-1 py-4 px-2 space-y-1 overflow-y-auto">
-          {MENU_ITEMS.map((item) => {
-            const isActive = location.pathname === item.path
-            return (
-              <Link
-                key={item.path}
-                to={item.path}
-                className={cn(
-                  'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all',
-                  isActive
-                    ? 'bg-emerald-600 text-white'
-                    : 'text-slate-400 hover:bg-slate-800 hover:text-white'
-                )}
-                title={!sidebarOpen ? item.label : undefined}
-              >
-                <item.icon className="w-5 h-5 flex-shrink-0" />
-                {sidebarOpen && (
-                  <span className="text-sm font-medium">{item.label}</span>
-                )}
-                {sidebarOpen && isActive && (
-                  <ChevronRight className="w-4 h-4 ml-auto flex-shrink-0" />
-                )}
-              </Link>
-            )
-          })}
-        </nav>
-
-        {/* Bottom Actions */}
-        <div className="p-2 border-t border-slate-700 flex-shrink-0">
-          <button
-            onClick={toggleSidebar}
-            title={sidebarOpen ? '收起菜单' : '展开菜单'}
-            className="flex items-center justify-center w-full py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white transition-all"
-          >
-            {sidebarOpen ? (
-              <PanelLeftClose className="w-5 h-5" />
-            ) : (
-              <PanelLeftOpen className="w-5 h-5" />
-            )}
-          </button>
-        </div>
-      </aside>
+      {/* 移动端抽屉侧栏 */}
+      {isMobile && (
+        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+          <SheetContent side="left" className="bg-slate-900 text-white border-none p-0 w-72">
+            <SheetHeader className="sr-only">
+              <SheetTitle className="text-white">opsx-loki 导航</SheetTitle>
+            </SheetHeader>
+            <div className="flex flex-col h-full">
+              <SidebarLogo collapsed={false} />
+              <SidebarNav collapsed={false} onNavigate={() => setMobileOpen(false)} />
+            </div>
+          </SheetContent>
+        </Sheet>
+      )}
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col overflow-hidden min-w-0">
         {/* Top Bar */}
-        <header className="h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between px-6 flex-shrink-0">
-          <h1 className="text-xl font-semibold text-slate-800 dark:text-white truncate">
-            {pageTitle}
-          </h1>
+        <header className="h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between px-4 md:px-6 flex-shrink-0 gap-3">
+          <div className="flex items-center gap-3 min-w-0">
+            {isMobile && (
+              <button
+                onClick={() => setMobileOpen(true)}
+                aria-label="打开导航菜单"
+                className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+              >
+                <Menu className="w-5 h-5" />
+              </button>
+            )}
+            <h1 className="text-lg md:text-xl font-semibold text-slate-800 dark:text-white truncate">
+              {pageTitle}
+            </h1>
+          </div>
           <div className="flex items-center gap-4 flex-shrink-0">
+            <ThemeToggle />
             {user && (
               <div className="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300">
                 <div className="flex items-center gap-2">
                   <Shield className="w-4 h-4" />
                   <span>{user.username}</span>
-                  <span className="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium">
+                  <span className="px-2 py-0.5 rounded-full bg-success/10 text-success text-xs font-medium">
                     {user.role === 'admin' ? '管理员' : user.role}
                   </span>
                 </div>
                 <button
                   onClick={handleLogout}
                   title="退出登录"
-                  className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-slate-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/30 transition-all"
+                  aria-label="退出登录"
+                  className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-all"
                 >
                   <LogOut className="w-4 h-4" />
-                  <span>退出</span>
+                  <span className="hidden md:inline">退出</span>
                 </button>
               </div>
             )}
           </div>
         </header>
 
-        {/* Page Content */}
-        <main className="flex-1 overflow-auto p-6">
-          {children}
+        {/* Page Content — 页面级 Suspense 边界，懒加载时不闪布局 */}
+        <main className="flex-1 overflow-auto p-4 md:p-6">
+          <Suspense fallback={<PageSkeleton />}>{children}</Suspense>
         </main>
       </div>
     </div>
diff --git a/frontend/src/components/LoadingSpinner.tsx b/frontend/src/components/LoadingSpinner.tsx
index 35ab11b..f572733 100644
--- a/frontend/src/components/LoadingSpinner.tsx
+++ b/frontend/src/components/LoadingSpinner.tsx
@@ -26,9 +26,9 @@ export const LoadingSpinner = memo(function LoadingSpinner({
   return (
     <div className={cn('flex flex-col items-center justify-center gap-3', className)}>
       <Activity
-        className={cn('text-emerald-500 animate-spin', SIZE_MAP[size])}
+        className={cn('text-primary animate-spin', SIZE_MAP[size])}
       />
-      {text && <p className="text-sm text-slate-500">{text}</p>}
+      {text && <p className="text-sm text-muted-foreground">{text}</p>}
     </div>
   )
 })
diff --git a/frontend/src/components/PageContainer.tsx b/frontend/src/components/PageContainer.tsx
new file mode 100644
index 0000000..8c7f0ad
--- /dev/null
+++ b/frontend/src/components/PageContainer.tsx
@@ -0,0 +1,34 @@
+import { memo } from 'react'
+import { cn } from '@/lib/utils'
+import { PageHeader } from '@/components/PageHeader'
+
+interface PageContainerProps {
+  /** 页头标题；缺省则不渲染页头（如仪表盘总览页） */
+  title?: string
+  description?: string
+  /** 页头右侧操作区（主按钮等） */
+  action?: React.ReactNode
+  className?: string
+  children: React.ReactNode
+}
+
+/**
+ * 页面容器 — 统一页面骨架（页头 + 内容区间距）。
+ * 业务页一律以此为容器，不自行手写布局外壳（见开发标准 05 章）。
+ */
+export const PageContainer = memo(function PageContainer({
+  title,
+  description,
+  action,
+  className,
+  children,
+}: PageContainerProps) {
+  return (
+    <div className={cn('space-y-6', className)}>
+      {title && <PageHeader title={title} description={description} action={action} />}
+      {children}
+    </div>
+  )
+})
+
+export default PageContainer
diff --git a/frontend/src/components/PageHeader.tsx b/frontend/src/components/PageHeader.tsx
index d985dfd..64bb34c 100644
--- a/frontend/src/components/PageHeader.tsx
+++ b/frontend/src/components/PageHeader.tsx
@@ -22,11 +22,11 @@ export const PageHeader = memo(function PageHeader({
   return (
     <div className={cn('flex items-center justify-between', className)}>
       <div>
-        <h2 className="text-lg font-semibold text-slate-800 dark:text-white">
+        <h2 className="text-lg font-semibold text-foreground">
           {title}
         </h2>
         {description && (
-          <p className="text-sm text-slate-500 mt-0.5">{description}</p>
+          <p className="text-sm text-muted-foreground mt-0.5">{description}</p>
         )}
       </div>
       {action && <div className="flex-shrink-0">{action}</div>}
diff --git a/frontend/src/components/PaginationBar.tsx b/frontend/src/components/PaginationBar.tsx
new file mode 100644
index 0000000..f18668c
--- /dev/null
+++ b/frontend/src/components/PaginationBar.tsx
@@ -0,0 +1,111 @@
+import { memo, useMemo } from 'react'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationEllipsis,
+} from '@/components/ui/pagination'
+
+interface PaginationBarProps {
+  page: number
+  pageSize: number
+  total: number
+  onPageChange: (page: number) => void
+  className?: string
+}
+
+/** 计算要展示的页码（当前页居中，最多 5 个，超界用省略号） */
+function pageNumbers(current: number, totalPages: number): Array<number | 'ellipsis-l' | 'ellipsis-r'> {
+  if (totalPages <= 5) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1)
+  }
+  if (current <= 3) {
+    return [1, 2, 3, 4, 'ellipsis-r', totalPages]
+  }
+  if (current >= totalPages - 2) {
+    return [1, 'ellipsis-l', totalPages - 3, totalPages - 2, totalPages - 1, totalPages]
+  }
+  return [1, 'ellipsis-l', current - 1, current, current + 1, 'ellipsis-r', totalPages]
+}
+
+/**
+ * 分页条 — 列表页统一分页 UI，消费后端 PageData.total。
+ * （此前各页固定拉 100 条且丢弃 total，超量数据被静默截断。）
+ */
+export const PaginationBar = memo(function PaginationBar({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  className,
+}: PaginationBarProps) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+  const pages = useMemo(() => pageNumbers(page, totalPages), [page, totalPages])
+
+  if (total <= pageSize) {
+    return (
+      <div className={className}>
+        <p className="text-xs text-muted-foreground text-center">共 {total} 条</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              aria-disabled={page <= 1}
+              className={page <= 1 ? 'pointer-events-none opacity-50' : ''}
+              onClick={(e) => {
+                e.preventDefault()
+                if (page > 1) onPageChange(page - 1)
+              }}
+            />
+          </PaginationItem>
+          {pages.map((p, idx) =>
+            typeof p === 'number' ? (
+              <PaginationItem key={p}>
+                <PaginationLink
+                  href="#"
+                  isActive={p === page}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    onPageChange(p)
+                  }}
+                >
+                  {p}
+                </PaginationLink>
+              </PaginationItem>
+            ) : (
+              <PaginationItem key={`${p}-${idx}`}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            )
+          )}
+          <PaginationItem>
+            <PaginationNext
+              href="#"
+              aria-disabled={page >= totalPages}
+              className={page >= totalPages ? 'pointer-events-none opacity-50' : ''}
+              onClick={(e) => {
+                e.preventDefault()
+                if (page < totalPages) onPageChange(page + 1)
+              }}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+      <p className="text-xs text-muted-foreground text-center mt-1">
+        共 {total} 条 · 第 {page}/{totalPages} 页
+      </p>
+    </div>
+  )
+})
+
+export default PaginationBar
diff --git a/frontend/src/components/PasswordInput.tsx b/frontend/src/components/PasswordInput.tsx
new file mode 100644
index 0000000..a14c994
--- /dev/null
+++ b/frontend/src/components/PasswordInput.tsx
@@ -0,0 +1,38 @@
+import { memo, useState } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+
+interface PasswordInputProps extends Omit<React.ComponentProps<typeof Input>, 'type'> {
+  /** 明文切换按钮（密钥类字段默认开启） */
+  toggleable?: boolean
+}
+
+/**
+ * 密码/密钥输入框 — 带明文切换。
+ * 供 Hosts（SSH 密码/密钥口令）、Storage（secretKey）等敏感字段复用。
+ */
+export const PasswordInput = memo(function PasswordInput({
+  toggleable = true,
+  className,
+  ...props
+}: PasswordInputProps) {
+  const [visible, setVisible] = useState(false)
+  return (
+    <div className="relative">
+      <Input type={visible ? 'text' : 'password'} className={`${className ?? ''} pr-10`} {...props} />
+      {toggleable && (
+        <button
+          type="button"
+          tabIndex={-1}
+          aria-label={visible ? '隐藏密码' : '显示密码'}
+          onClick={() => setVisible((prev) => !prev)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-slate-600"
+        >
+          {visible ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+        </button>
+      )}
+    </div>
+  )
+})
+
+export default PasswordInput
diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
index 55b6389..65c7ec0 100644
--- a/frontend/src/components/StatusBadge.tsx
+++ b/frontend/src/components/StatusBadge.tsx
@@ -1,14 +1,8 @@
 import { memo, useMemo } from 'react'
-import {
-  CheckCircle,
-  AlertTriangle,
-  Clock,
-  PauseCircle,
-  Activity,
-  type LucideIcon,
-} from 'lucide-react'
+import { Clock } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { statusLabel } from '@/lib/utils'
+import { STATUS_CONFIG } from './status-config'
 
 export type StatusSize = 'sm' | 'md'
 
@@ -19,61 +13,11 @@ interface StatusBadgeProps {
   className?: string
 }
 
-interface StatusConfig {
-  icon: LucideIcon
-  color: string
-  bg: string
-  label: string
-}
-
-const STATUS_CONFIG: Record<string, Omit<StatusConfig, 'label'>> = {
-  running: {
-    icon: CheckCircle,
-    color: 'text-emerald-500',
-    bg: 'bg-emerald-100 text-emerald-700',
-  },
-  active: {
-    icon: CheckCircle,
-    color: 'text-emerald-500',
-    bg: 'bg-emerald-100 text-emerald-700',
-  },
-  failed: {
-    icon: AlertTriangle,
-    color: 'text-red-500',
-    bg: 'bg-red-100 text-red-700',
-  },
-  error: {
-    icon: AlertTriangle,
-    color: 'text-red-500',
-    bg: 'bg-red-100 text-red-700',
-  },
-  pending: {
-    icon: Clock,
-    color: 'text-amber-500',
-    bg: 'bg-amber-100 text-amber-700',
-  },
-  stopped: {
-    icon: PauseCircle,
-    color: 'text-slate-400',
-    bg: 'bg-slate-100 text-slate-600',
-  },
-  inactive: {
-    icon: PauseCircle,
-    color: 'text-slate-400',
-    bg: 'bg-slate-100 text-slate-600',
-  },
-  deploying: {
-    icon: Activity,
-    color: 'text-blue-500',
-    bg: 'bg-blue-100 text-blue-700',
-  },
-}
-
-function getStatusConfig(status: string): StatusConfig {
+function getStatusConfig(status: string): { icon: typeof Clock; color: string; bg: string; label: string } {
   const config = STATUS_CONFIG[status] || {
     icon: Clock,
-    color: 'text-slate-400',
-    bg: 'bg-slate-100 text-slate-600',
+    color: 'text-muted-foreground',
+    bg: 'bg-muted text-muted-foreground',
   }
   return {
     ...config,
@@ -144,9 +88,4 @@ export const StatusIcon = memo(function StatusIcon({
   )
 })
 
-/** 独立状态颜色工具函数（用于需要className的场景） */
-export function getStatusColorClass(status: string): string {
-  return STATUS_CONFIG[status]?.bg || 'bg-slate-100 text-slate-600'
-}
-
 export default StatusBadge
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
new file mode 100644
index 0000000..2347855
--- /dev/null
+++ b/frontend/src/components/index.ts
@@ -0,0 +1,14 @@
+// 全局组件出口（barrel）— 页面统一从这里 import 共享组件。
+// 页面私有组件放各自 pages/<domain>/components/，晋升三次后再进这里。
+export { default as PageContainer } from './PageContainer';
+export { default as PageHeader } from './PageHeader';
+export { default as InfoRow } from './InfoRow';
+export { default as ConfirmDialog } from './ConfirmDialog';
+export { default as ErrorState } from './ErrorState';
+export { default as EmptyState } from './EmptyState';
+export { default as LoadingSpinner, FullScreenLoader } from './LoadingSpinner';
+export { default as PaginationBar } from './PaginationBar';
+export { default as PasswordInput } from './PasswordInput';
+export { default as StatusBadge, StatusIcon } from './StatusBadge';
+export { getStatusColorClass } from './status-config';
+export { default as ErrorBoundary } from './ErrorBoundary';
diff --git a/frontend/src/components/status-config.ts b/frontend/src/components/status-config.ts
new file mode 100644
index 0000000..c5a7c3f
--- /dev/null
+++ b/frontend/src/components/status-config.ts
@@ -0,0 +1,64 @@
+import {
+  CheckCircle,
+  AlertTriangle,
+  Clock,
+  PauseCircle,
+  Activity,
+  type LucideIcon,
+} from 'lucide-react'
+
+export interface StatusConfig {
+  icon: LucideIcon
+  color: string
+  bg: string
+  label: string
+}
+
+// 状态色全部走语义 Token（success/warning/destructive/info/muted），禁止硬编码调色板
+export const STATUS_CONFIG: Record<string, Omit<StatusConfig, 'label'>> = {
+  running: {
+    icon: CheckCircle,
+    color: 'text-success',
+    bg: 'bg-success/10 text-success',
+  },
+  active: {
+    icon: CheckCircle,
+    color: 'text-success',
+    bg: 'bg-success/10 text-success',
+  },
+  failed: {
+    icon: AlertTriangle,
+    color: 'text-destructive',
+    bg: 'bg-destructive/10 text-destructive',
+  },
+  error: {
+    icon: AlertTriangle,
+    color: 'text-destructive',
+    bg: 'bg-destructive/10 text-destructive',
+  },
+  pending: {
+    icon: Clock,
+    color: 'text-warning',
+    bg: 'bg-warning/10 text-warning',
+  },
+  stopped: {
+    icon: PauseCircle,
+    color: 'text-muted-foreground',
+    bg: 'bg-muted text-muted-foreground',
+  },
+  inactive: {
+    icon: PauseCircle,
+    color: 'text-muted-foreground',
+    bg: 'bg-muted text-muted-foreground',
+  },
+  deploying: {
+    icon: Activity,
+    color: 'text-info',
+    bg: 'bg-info/10 text-info',
+  },
+}
+
+/** 状态颜色工具（用于需要 className 的场景，与 StatusBadge 同源） */
+export function getStatusColorClass(status: string): string {
+  return STATUS_CONFIG[status]?.bg || 'bg-muted text-muted-foreground'
+}
diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx
deleted file mode 100644
index d21b65f..0000000
--- a/frontend/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
deleted file mode 100644
index 1421354..0000000
--- a/frontend/src/components/ui/alert.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }
diff --git a/frontend/src/components/ui/aspect-ratio.tsx b/frontend/src/components/ui/aspect-ratio.tsx
deleted file mode 100644
index 3df3fd0..0000000
--- a/frontend/src/components/ui/aspect-ratio.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
deleted file mode 100644
index b7224f0..0000000
--- a/frontend/src/components/ui/avatar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
deleted file mode 100644
index fd3a406..0000000
--- a/frontend/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }
diff --git a/frontend/src/components/ui/breadcrumb.tsx b/frontend/src/components/ui/breadcrumb.tsx
deleted file mode 100644
index eb88f32..0000000
--- a/frontend/src/components/ui/breadcrumb.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("text-foreground font-normal", className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
-      {children ?? <ChevronRight />}
-    </li>
-  )
-}
-
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  )
-}
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}
diff --git a/frontend/src/components/ui/button-group.tsx b/frontend/src/components/ui/button-group.tsx
deleted file mode 100644
index 8600af0..0000000
--- a/frontend/src/components/ui/button-group.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Separator } from "@/components/ui/separator"
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  }
-)
-
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <Comp
-      className={cn(
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn(
-        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
-}
diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
deleted file mode 100644
index 9fb18ca..0000000
--- a/frontend/src/components/ui/calendar.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-} from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
-        ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-md bg-accent",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }
diff --git a/frontend/src/components/ui/carousel.tsx b/frontend/src/components/ui/carousel.tsx
deleted file mode 100644
index 71cff4c..0000000
--- a/frontend/src/components/ui/carousel.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
-      }
-    },
-    [scrollPrev, scrollNext]
-  )
-
-  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
-
-  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
-
-    return () => {
-      api?.off("select", onSelect)
-    }
-  }, [api, onSelect])
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  )
-}
-
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-}
-
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-}
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
diff --git a/frontend/src/components/ui/chart.tsx b/frontend/src/components/ui/chart.tsx
deleted file mode 100644
index 8b42f21..0000000
--- a/frontend/src/components/ui/chart.tsx
+++ /dev/null
@@ -1,357 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-}) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  }) {
-  const { config } = useChart()
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
-
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
-
-    if (!value) {
-      return null
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
-
-  if (!active || !payload?.length) {
-    return null
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot"
-
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
-}
-
-const ChartLegend = RechartsPrimitive.Legend
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
-  }) {
-  const { config } = useChart()
-
-  if (!payload?.length) {
-    return null
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-    </div>
-  )
-}
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
index cb0b07b..90b71e4 100644
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -1,32 +1,28 @@
-"use client"
-
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("grid place-content-center text-current")}
     >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export { Checkbox }
diff --git a/frontend/src/components/ui/collapsible.tsx b/frontend/src/components/ui/collapsible.tsx
deleted file mode 100644
index 77f86be..0000000
--- a/frontend/src/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/frontend/src/components/ui/command.tsx b/frontend/src/components/ui/command.tsx
deleted file mode 100644
index e5bd56b..0000000
--- a/frontend/src/components/ui/command.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
diff --git a/frontend/src/components/ui/context-menu.tsx b/frontend/src/components/ui/context-menu.tsx
deleted file mode 100644
index f024a9c..0000000
--- a/frontend/src/components/ui/context-menu.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
-}
-
-function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
-}
-
-function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
-}
-
-function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
-}
-
-function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
-}
-
-function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-slot="context-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
-  )
-}
-
-function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  )
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  )
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  )
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}
diff --git a/frontend/src/components/ui/drawer.tsx b/frontend/src/components/ui/drawer.tsx
deleted file mode 100644
index 8aa6923..0000000
--- a/frontend/src/components/ui/drawer.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
-}
-
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
-}
-
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
-}
-
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}
-
-function DrawerOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  return (
-    <DrawerPrimitive.Overlay
-      data-slot="drawer-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
-  return (
-    <DrawerPortal data-slot="drawer-portal">
-      <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className
-        )}
-        {...props}
-      >
-        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  )
-}
-
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
deleted file mode 100644
index eaed9ba..0000000
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}
diff --git a/frontend/src/components/ui/empty.tsx b/frontend/src/components/ui/empty.tsx
deleted file mode 100644
index df91e9d..0000000
--- a/frontend/src/components/ui/empty.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-function Empty({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty"
-      className={cn(
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-header"
-      className={cn(
-        "flex max-w-sm flex-col items-center gap-2 text-center",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const emptyMediaVariants = cva(
-  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function EmptyMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
-  return (
-    <div
-      data-slot="empty-icon"
-      data-variant={variant}
-      className={cn(emptyMediaVariants({ variant, className }))}
-      {...props}
-    />
-  )
-}
-
-function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-title"
-      className={cn("text-lg font-medium tracking-tight", className)}
-      {...props}
-    />
-  )
-}
-
-function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <div
-      data-slot="empty-description"
-      className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-content"
-      className={cn(
-        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-}
diff --git a/frontend/src/components/ui/field.tsx b/frontend/src/components/ui/field.tsx
deleted file mode 100644
index db0dc12..0000000
--- a/frontend/src/components/ui/field.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
-
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-group"
-      className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const fieldVariants = cva(
-  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
-  {
-    variants: {
-      orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-        responsive: [
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-content"
-      className={cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
-}) {
-  return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      )}
-      {...props}
-    >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  )
-}
-
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children
-    }
-
-    if (!errors?.length) {
-      return null
-    }
-
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
-
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
-    }
-
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
-      </ul>
-    )
-  }, [children, errors])
-
-  if (!content) {
-    return null
-  }
-
-  return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
-      {...props}
-    >
-      {content}
-    </div>
-  )
-}
-
-export {
-  Field,
-  FieldLabel,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
-}
diff --git a/frontend/src/components/ui/hover-card.tsx b/frontend/src/components/ui/hover-card.tsx
deleted file mode 100644
index e754186..0000000
--- a/frontend/src/components/ui/hover-card.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
-}
-
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
-}
-
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  )
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/frontend/src/components/ui/input-group.tsx b/frontend/src/components/ui/input-group.tsx
deleted file mode 100644
index 3d1f9d9..0000000
--- a/frontend/src/components/ui/input-group.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
-        "h-9 min-w-0 has-[>textarea]:h-auto",
-
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
-
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start":
-          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end":
-          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  }
-)
-
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
-      }}
-      {...props}
-    />
-  )
-}
-
-const inputGroupButtonVariants = cva(
-  "text-sm shadow-none flex gap-2 items-center",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  }
-)
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  )
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-}
diff --git a/frontend/src/components/ui/input-otp.tsx b/frontend/src/components/ui/input-otp.tsx
deleted file mode 100644
index 3101752..0000000
--- a/frontend/src/components/ui/input-otp.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
-      )}
-      className={cn("disabled:cursor-not-allowed", className)}
-      {...props}
-    />
-  )
-}
-
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-otp-group"
-      className={cn("flex items-center", className)}
-      {...props}
-    />
-  )
-}
-
-function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  index: number
-}) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
-
-  return (
-    <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
-      className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  )
-}
-
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
-    </div>
-  )
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/frontend/src/components/ui/item.tsx b/frontend/src/components/ui/item.tsx
deleted file mode 100644
index d97de21..0000000
--- a/frontend/src/components/ui/item.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Separator } from "@/components/ui/separator"
-
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      role="list"
-      data-slot="item-group"
-      className={cn("group/item-group flex flex-col", className)}
-      {...props}
-    />
-  )
-}
-
-function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="item-separator"
-      orientation="horizontal"
-      className={cn("my-0", className)}
-      {...props}
-    />
-  )
-}
-
-const itemVariants = cva(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50",
-      },
-      size: {
-        default: "p-4 gap-4 ",
-        sm: "py-3 px-4 gap-2.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Item({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
-  return (
-    <Comp
-      data-slot="item"
-      data-variant={variant}
-      data-size={size}
-      className={cn(itemVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-        image:
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function ItemMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
-  return (
-    <div
-      data-slot="item-media"
-      data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
-      {...props}
-    />
-  )
-}
-
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-content"
-      className={cn(
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-title"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="item-description"
-      className={cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-actions"
-      className={cn("flex items-center gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-header"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-footer"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemActions,
-  ItemGroup,
-  ItemSeparator,
-  ItemTitle,
-  ItemDescription,
-  ItemHeader,
-  ItemFooter,
-}
diff --git a/frontend/src/components/ui/kbd.tsx b/frontend/src/components/ui/kbd.tsx
deleted file mode 100644
index 253c69f..0000000
--- a/frontend/src/components/ui/kbd.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("inline-flex items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-export { Kbd, KbdGroup }
diff --git a/frontend/src/components/ui/menubar.tsx b/frontend/src/components/ui/menubar.tsx
deleted file mode 100644
index cb45a86..0000000
--- a/frontend/src/components/ui/menubar.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Menubar({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn(
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
-}
-
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
-}
-
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
-}
-
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  )
-}
-
-function MenubarTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarContent({
-  className,
-  align = "start",
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  )
-}
-
-function MenubarItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  )
-}
-
-function MenubarRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  )
-}
-
-function MenubarLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function MenubarShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
-}
-
-function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  )
-}
-
-function MenubarSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Menubar,
-  MenubarPortal,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarGroup,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarItem,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-}
diff --git a/frontend/src/components/ui/navigation-menu.tsx b/frontend/src/components/ui/navigation-menu.tsx
deleted file mode 100644
index 1199945..0000000
--- a/frontend/src/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      data-viewport={viewport}
-      className={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  )
-}
-
-function NavigationMenuList({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
-      {...props}
-    />
-  )
-}
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
-)
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
-      {...props}
-    >
-      {children}{" "}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  )
-}
-
-function NavigationMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
-      )}
-    >
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function NavigationMenuLink({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  )
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-}
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
deleted file mode 100644
index 01e468b..0000000
--- a/frontend/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
deleted file mode 100644
index 10af7e6..0000000
--- a/frontend/src/components/ui/progress.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-
-import { cn } from "@/lib/utils"
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-}
-
-export { Progress }
diff --git a/frontend/src/components/ui/radio-group.tsx b/frontend/src/components/ui/radio-group.tsx
deleted file mode 100644
index 5e6778c..0000000
--- a/frontend/src/components/ui/radio-group.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn("grid gap-3", className)}
-      {...props}
-    />
-  )
-}
-
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-}
-
-export { RadioGroup, RadioGroupItem }
diff --git a/frontend/src/components/ui/resizable.tsx b/frontend/src/components/ui/resizable.tsx
deleted file mode 100644
index b9432bd..0000000
--- a/frontend/src/components/ui/resizable.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Group>) {
-  return (
-    <ResizablePrimitive.Group
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
-  withHandle?: boolean
-}) {
-  return (
-    <ResizablePrimitive.Separator
-      data-slot="resizable-handle"
-      className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.Separator>
-  )
-}
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/frontend/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
index 8e4fa13..0b4a48d 100644
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -5,54 +5,44 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-}
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
-}
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
 
 export { ScrollArea, ScrollBar }
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
deleted file mode 100644
index 275381c..0000000
--- a/frontend/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
deleted file mode 100644
index 30638ac..0000000
--- a/frontend/src/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,726 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
-
-  return context
-}
-
-function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-    },
-    [setOpenProp, open]
-  )
-
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
-
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar()
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
-
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
-
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot="sidebar-wrapper"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  )
-}
-
-function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-  if (collapsible === "none") {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar="sidebar"
-          data-slot="sidebar"
-          data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    )
-  }
-
-  return (
-    <div
-      className="group peer text-sidebar-foreground hidden md:block"
-      data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar"
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-        )}
-      />
-      <div
-        data-slot="sidebar-container"
-        className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("size-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-}
-
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <button
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="sidebar-separator"
-      data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="sidebar-group-action"
-      data-sidebar="group-action"
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
-      {...props}
-    />
-  )
-}
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = "default",
-  size = "default",
-  tooltip,
-  className,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button"
-  const { isMobile, state } = useSidebar()
-
-  const button = (
-    <Comp
-      data-slot="sidebar-menu-button"
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
-
-  if (!tooltip) {
-    return button
-  }
-
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    }
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
-    </Tooltip>
-  )
-}
-
-function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  showOnHover?: boolean
-}) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-action"
-      data-sidebar="menu-action"
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      className={cn(
-        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showIcon?: boolean
-}) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
-
-  return (
-    <div
-      data-slot="sidebar-menu-skeleton"
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
-}
-
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      data-sidebar="menu-sub"
-      className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSubButton({
-  asChild = false,
-  size = "md",
-  isActive = false,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean
-  size?: "sm" | "md"
-  isActive?: boolean
-}) {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-sub-button"
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
diff --git a/frontend/src/components/ui/slider.tsx b/frontend/src/components/ui/slider.tsx
deleted file mode 100644
index 1a1bd73..0000000
--- a/frontend/src/components/ui/slider.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
-
-import { cn } from "@/lib/utils"
-
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max]
-  )
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
-          )}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  )
-}
-
-export { Slider }
diff --git a/frontend/src/components/ui/spinner.tsx b/frontend/src/components/ui/spinner.tsx
deleted file mode 100644
index a70e713..0000000
--- a/frontend/src/components/ui/spinner.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Loader2Icon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  )
-}
-
-export { Spinner }
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
deleted file mode 100644
index 5513a5c..0000000
--- a/frontend/src/components/ui/table.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
diff --git a/frontend/src/components/ui/toggle-group.tsx b/frontend/src/components/ui/toggle-group.tsx
deleted file mode 100644
index 063a293..0000000
--- a/frontend/src/components/ui/toggle-group.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }
->({
-  size: "default",
-  variant: "default",
-  spacing: 0,
-})
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  spacing = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      style={{ "--gap": spacing } as React.CSSProperties}
-      className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
-        className
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  )
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
-}
-
-export { ToggleGroup, ToggleGroupItem }
diff --git a/frontend/src/components/ui/toggle.tsx b/frontend/src/components/ui/toggle.tsx
deleted file mode 100644
index b966221..0000000
--- a/frontend/src/components/ui/toggle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Toggle, toggleVariants }
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
deleted file mode 100644
index a4e90d4..0000000
--- a/frontend/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/frontend/src/hooks/useListQuery.ts b/frontend/src/hooks/useListQuery.ts
new file mode 100644
index 0000000..84f4720
--- /dev/null
+++ b/frontend/src/hooks/useListQuery.ts
@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { PageData } from '@/types'
+import type { ListParams } from '@/api'
+
+export type ListFetcher<T> = (params: ListParams, signal: AbortSignal) => Promise<PageData<T>>
+
+interface UseListQueryOptions {
+  /** 每页条数（默认 12，卡片网格 3 列 × 4 行） */
+  pageSize?: number
+}
+
+export interface ListQueryResult<T> {
+  list: T[]
+  total: number
+  page: number
+  pageSize: number
+  /** 加载中（首屏与翻页） */
+  loading: boolean
+  /** 加载失败消息（非 null 时渲染 ErrorState，与空态严格区分） */
+  error: string | null
+  setPage: (page: number) => void
+  /** 重拉当前页（操作完成/错误重试后调用） */
+  refresh: () => void
+  /** 回到第 1 页重拉（新建成功后调用） */
+  reload: () => void
+}
+
+/**
+ * 分页列表数据 hook — 「AbortController 取消 + 版本号令牌」双重防护（见开发标准 03 章）：
+ * 快速翻页/连续刷新时旧响应被取消或按版本丢弃，杜绝错序覆盖；
+ * StrictMode 双执行、组件卸载时在途请求一并取消。
+ *
+ * @example
+ *   const query = useListQuery<Cluster>(
+ *     (params, signal) => clusterApi.list(params, { signal })
+ *   )
+ */
+export function useListQuery<T>(
+  fetcher: ListFetcher<T>,
+  options: UseListQueryOptions = {}
+): ListQueryResult<T> {
+  const { pageSize = 12 } = options
+
+  const [list, setList] = useState<T[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const abortRef = useRef<AbortController | null>(null)
+  const versionRef = useRef(0)
+  // fetcher 透传到 ref，调用方内联箭头函数不会触发重复请求
+  const fetcherRef = useRef(fetcher)
+  fetcherRef.current = fetcher
+
+  const fetchData = useCallback(
+    async (targetPage: number) => {
+      // ① 取消旧请求
+      abortRef.current?.abort()
+      const controller = new AbortController()
+      abortRef.current = controller
+      // ② 版本号令牌：过期响应直接丢弃
+      const currentVersion = ++versionRef.current
+
+      setLoading(true)
+      setError(null)
+      try {
+        const res = await fetcherRef.current({ page: targetPage, pageSize }, controller.signal)
+        if (currentVersion !== versionRef.current) return
+        setList(res.list ?? [])
+        setTotal(res.total ?? 0)
+      } catch (err) {
+        if (currentVersion !== versionRef.current) return
+        setError(err instanceof Error ? err.message : '加载失败')
+      } finally {
+        if (currentVersion === versionRef.current) {
+          setLoading(false)
+        }
+      }
+    },
+    [pageSize]
+  )
+
+  useEffect(() => {
+    void fetchData(page)
+  }, [page, fetchData])
+
+  // 卸载：取消在途请求并作废版本
+  useEffect(() => {
+    return () => {
+      // 写入而非读取:递增使在途响应按版本号判过期(exhaustive-deps 误报)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      versionRef.current++
+      abortRef.current?.abort()
+    }
+  }, [])
+
+  const refresh = useCallback(() => {
+    void fetchData(page)
+  }, [fetchData, page])
+
+  const reload = useCallback(() => {
+    if (page === 1) {
+      void fetchData(1)
+    } else {
+      setPage(1)
+    }
+  }, [fetchData, page])
+
+  return { list, total, page, pageSize, loading, error, setPage, refresh, reload }
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0056c43..a3a03be 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,66 +2,84 @@
 @tailwind components;
 @tailwind utilities;
 
+/*
+ * 语义 Token 单源（开发标准 06 章）：
+ * - 品牌主色 = emerald（原散落各页的 bg-emerald-600 收敛为 --primary）
+ * - 中性色 = slate 色阶；暗色卡片比页面底色亮一档（靠亮度差分层）
+ * - 语义色 success/warning/info 对齐状态语义，StatusBadge 等统一引用
+ */
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --background: 210 40% 98%;
+    --foreground: 222 47% 11%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 222 47% 11%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 161 94% 30%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222 47% 11%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215 16% 47%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
+    --success: 161 74% 30%;
+    --success-foreground: 0 0% 100%;
+    --warning: 32 95% 44%;
+    --warning-foreground: 0 0% 100%;
+    --info: 221 83% 53%;
+    --info-foreground: 0 0% 100%;
+    --border: 214 32% 91%;
+    --input: 214 25% 84%;
+    --ring: 161 94% 30%;
     --radius: 0.625rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-background: 222 47% 11%;
+    --sidebar-foreground: 215 20% 65%;
+    --sidebar-primary: 161 94% 30%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 217 33% 17%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217 33% 20%;
+    --sidebar-ring: 161 94% 30%;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --background: 222 47% 5%;
+    --foreground: 210 40% 98%;
+    --card: 222 47% 11%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222 47% 11%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 160 84% 39%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 217 33% 17%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217 33% 17%;
+    --muted-foreground: 215 20% 65%;
+    --accent: 217 33% 17%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 72% 51%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
+    --success: 160 84% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+    --info: 217 91% 60%;
+    --info-foreground: 0 0% 100%;
+    --border: 217 33% 20%;
+    --input: 217 26% 28%;
+    --ring: 160 84% 39%;
+    --sidebar-background: 222 47% 8%;
+    --sidebar-foreground: 215 20% 65%;
+    --sidebar-primary: 160 84% 39%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-accent: 217 33% 17%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217 33% 20%;
+    --sidebar-ring: 160 84% 39%;
   }
 }
 
@@ -72,4 +90,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/lib/auth-storage.ts b/frontend/src/lib/auth-storage.ts
new file mode 100644
index 0000000..04e8966
--- /dev/null
+++ b/frontend/src/lib/auth-storage.ts
@@ -0,0 +1,53 @@
+// 凭证存储统一出口 — 全项目对 token / 用户信息的读写必须经过这里，
+// 禁止组件直接操作 localStorage（避免 key 散落与多处重复实现）。
+// key 采用命名空间 opsxloki.auth.*（双端一致性约定，见开发标准 08 章）。
+import type { User } from '@/types';
+
+const TOKEN_KEY = 'opsxloki.auth.token';
+const REFRESH_TOKEN_KEY = 'opsxloki.auth.refresh-token';
+const USER_KEY = 'opsxloki.auth.user';
+
+export interface TokenPair {
+  accessToken: string;
+  refreshToken: string;
+  expiresAt: number;
+}
+
+export function getAccessToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function getRefreshToken(): string | null {
+  return localStorage.getItem(REFRESH_TOKEN_KEY);
+}
+
+export function getUser(): User | null {
+  const raw = localStorage.getItem(USER_KEY);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as User;
+  } catch {
+    return null;
+  }
+}
+
+export function saveAuth(pair: TokenPair, user: User): void {
+  localStorage.setItem(TOKEN_KEY, pair.accessToken);
+  localStorage.setItem(REFRESH_TOKEN_KEY, pair.refreshToken);
+  localStorage.setItem(USER_KEY, JSON.stringify(user));
+}
+
+export function saveTokenPair(pair: TokenPair): void {
+  localStorage.setItem(TOKEN_KEY, pair.accessToken);
+  localStorage.setItem(REFRESH_TOKEN_KEY, pair.refreshToken);
+}
+
+export function clearAuth(): void {
+  localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(REFRESH_TOKEN_KEY);
+  localStorage.removeItem(USER_KEY);
+}
+
+export function isLoggedIn(): boolean {
+  return getAccessToken() !== null;
+}
diff --git a/frontend/src/lib/redirect.ts b/frontend/src/lib/redirect.ts
new file mode 100644
index 0000000..fc143ed
--- /dev/null
+++ b/frontend/src/lib/redirect.ts
@@ -0,0 +1,12 @@
+// redirect 回跳安全校验 — 仅允许同源相对路径，防开放重定向（开发标准 04 章）。
+export function getSafeRedirectUrl(redirect: string | null | undefined): string {
+  if (!redirect) return '/';
+  // 禁止协议绝对地址与协议相对地址（//evil.com、https://evil.com）
+  if (/^https?:\/\//i.test(redirect) || redirect.startsWith('//')) return '/';
+  return redirect.startsWith('/') ? redirect : `/${redirect}`;
+}
+
+/** 从 location.search 中提取并校验 redirect 参数 */
+export function readRedirectParam(search: string): string {
+  return getSafeRedirectUrl(new URLSearchParams(search).get('redirect'));
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index a101f45..5261a89 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,16 +1,47 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router'
+import { ThemeProvider } from 'next-themes'
 import './index.css'
+
+// 一次性迁移旧 LokiDeploy 时代的 localStorage key → opsxloki.*(保留登录态/主题/折叠/查询历史)
+function migrateStorage() {
+  const pairs: Array<[string, string]> = [
+    ['lokideploy.auth.token', 'opsxloki.auth.token'],
+    ['lokideploy.auth.refresh-token', 'opsxloki.auth.refresh-token'],
+    ['lokideploy.auth.user', 'opsxloki.auth.user'],
+    ['lokideploy.theme.mode', 'opsxloki.theme.mode'],
+    ['lokideploy.layout.collapsed', 'opsxloki.layout.collapsed'],
+    ['lokideploy_log_query_history', 'opsxloki_log_query_history'],
+  ]
+  for (const [oldKey, newKey] of pairs) {
+    const v = localStorage.getItem(oldKey)
+    if (v !== null && localStorage.getItem(newKey) === null) {
+      localStorage.setItem(newKey, v)
+      localStorage.removeItem(oldKey)
+    }
+  }
+}
+migrateStorage()
 import App from './App.tsx'
 import ErrorBoundary from '@/components/ErrorBoundary'
 
+// 主题：class 策略（.dark），三态 light/dark/system，key 带命名空间；
+// next-themes 会在挂载前注入主题脚本，避免暗色首帧白闪
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ErrorBoundary>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        storageKey="opsxloki.theme.mode"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ThemeProvider>
     </ErrorBoundary>
   </StrictMode>,
 )
diff --git a/frontend/src/pages/Clusters.tsx b/frontend/src/pages/Clusters.tsx
deleted file mode 100644
index 8b7302e..0000000
--- a/frontend/src/pages/Clusters.tsx
+++ /dev/null
@@ -1,543 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import {
-  Server,
-  Plus,
-  RefreshCw,
-  Trash2,
-  Eye,
-  Key,
-  FileKey,
-} from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { Card, CardContent } from '@/components/ui/card'
-import { clusterApi } from '@/api'
-import { StatusBadge } from '@/components/StatusBadge'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { EmptyState } from '@/components/EmptyState'
-import { PageHeader } from '@/components/PageHeader'
-import { toast } from 'sonner'
-import type { Cluster, ClusterInfo } from '@/types'
-
-// 从 kubeconfig 文本自动提取 server 地址
-const parseApiServer = (kubeconfig: string): string => {
-  const m = kubeconfig.match(/^\s*server:\s*(\S+)/m)
-  return m ? m[1] : ''
-}
-
-/**
- * Clusters 页面 - 优化版本
- * 
- * 优化点：
- * 1. React.memo 包裹组件
- * 2. 所有操作函数使用 useCallback 缓存
- * 3. alert() 替换为 sonner toast
- * 4. setTimeout 使用 ref 管理，添加清理函数
- * 5. 使用 StatusBadge 公共组件
- * 6. 使用 PageHeader、EmptyState、LoadingSpinner 公共组件
- */
-const Clusters = memo(function Clusters() {
-  const [clusters, setClusters] = useState<Cluster[]>([])
-  const [loading, setLoading] = useState(true)
-  const [open, setOpen] = useState(false)
-  const [detailOpen, setDetailOpen] = useState(false)
-  const [selectedCluster, setSelectedCluster] = useState<Cluster | null>(null)
-  const [clusterInfo, setClusterInfo] = useState<ClusterInfo | null>(null)
-  const [validating, setValidating] = useState<number | null>(null)
-
-  // Form state
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [configType, setConfigType] = useState<'kubeconfig' | 'token'>('kubeconfig')
-  const [kubeconfig, setKubeconfig] = useState('')
-  const [apiServer, setApiServer] = useState('')
-  const [token, setToken] = useState('')
-  const [context, setContext] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-
-  // 定时器管理ref
-  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
-
-  useEffect(() => {
-    return () => {
-      timeoutsRef.current.forEach((id) => clearTimeout(id))
-    }
-  }, [])
-
-  const addTimeout = useCallback((cb: () => void, delay: number) => {
-    const id = setTimeout(cb, delay)
-    timeoutsRef.current.push(id)
-    return id
-  }, [])
-
-  const loadClusters = useCallback(async () => {
-    try {
-      const res = await clusterApi.list(1, 100)
-      setClusters(res.list)
-    } catch (err) {
-      console.error('Failed to load clusters:', err)
-      toast.error('加载集群数据失败')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    loadClusters()
-  }, [loadClusters])
-
-  const resetForm = useCallback(() => {
-    setName('')
-    setDescription('')
-    setConfigType('kubeconfig')
-    setKubeconfig('')
-    setApiServer('')
-    setToken('')
-    setContext('')
-  }, [])
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      // 校验
-      if (configType === 'kubeconfig' && !kubeconfig.trim()) {
-        toast.error('请填写 kubeconfig 内容')
-        return
-      }
-      if (configType === 'token' && (!apiServer.trim() || !token.trim())) {
-        toast.error('Token 接入方式需要填写 API Server 和 Token')
-        return
-      }
-      setSubmitting(true)
-      try {
-        await clusterApi.create({
-          name,
-          description,
-          configType,
-          apiServer: configType === 'token' ? apiServer : undefined,
-          kubeconfig: configType === 'kubeconfig' ? kubeconfig : undefined,
-          token: configType === 'token' ? token : undefined,
-          context,
-        })
-        setOpen(false)
-        resetForm()
-        loadClusters()
-        toast.success('集群添加成功')
-      } catch (err: unknown) {
-        const message = err instanceof Error ? err.message : '创建集群失败'
-        toast.error(message)
-      } finally {
-        setSubmitting(false)
-      }
-    },
-    [name, description, configType, kubeconfig, apiServer, token, context, resetForm, loadClusters]
-  )
-
-  const handleDelete = useCallback(
-    async (id: number) => {
-      if (!confirm('确定删除此集群？')) return
-      try {
-        await clusterApi.remove(id)
-        loadClusters()
-        toast.success('集群已删除')
-      } catch (err) {
-        console.error('Failed to delete cluster:', err)
-        toast.error('删除集群失败')
-      }
-    },
-    [loadClusters]
-  )
-
-  const handleValidate = useCallback(
-    async (id: number) => {
-      setValidating(id)
-      try {
-        await clusterApi.validate(id)
-        addTimeout(loadClusters, 3000)
-        toast.success('验证指令已发送')
-      } catch (err) {
-        console.error('Failed to validate cluster:', err)
-        toast.error('验证失败')
-      } finally {
-        addTimeout(() => setValidating(null), 3000)
-      }
-    },
-    [loadClusters, addTimeout]
-  )
-
-  const viewClusterInfo = useCallback(async (cluster: Cluster) => {
-    setSelectedCluster(cluster)
-    setClusterInfo(null)
-    setDetailOpen(true)
-    try {
-      const info = await clusterApi.getInfo(cluster.id)
-      setClusterInfo(info)
-    } catch (err) {
-      console.error('Failed to get cluster info:', err)
-      toast.error('加载集群详情失败')
-    }
-  }, [])
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <PageHeader
-        title="集群管理"
-        description="管理用于 Loki 部署的 Kubernetes 集群"
-        action={
-          <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-              <Button className="bg-emerald-600 hover:bg-emerald-700">
-                <Plus className="w-4 h-4 mr-1" />
-                添加集群
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>添加 Kubernetes 集群</DialogTitle>
-              </DialogHeader>
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="name">集群名称 *</Label>
-                  <Input
-                    id="name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    placeholder="production-cluster"
-                    required
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="description">描述</Label>
-                  <Input
-                    id="description"
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    placeholder="生产环境日志集群"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label>接入方式</Label>
-                  <Tabs
-                    value={configType}
-                    onValueChange={(v) => setConfigType(v as 'kubeconfig' | 'token')}
-                  >
-                    <TabsList>
-                      <TabsTrigger value="kubeconfig">
-                        <FileKey className="w-3.5 h-3.5 mr-1" /> Kubeconfig
-                      </TabsTrigger>
-                      <TabsTrigger value="token">
-                        <Key className="w-3.5 h-3.5 mr-1" /> Token
-                      </TabsTrigger>
-                    </TabsList>
-                    <TabsContent value="kubeconfig" className="space-y-2 pt-2">
-                      <Label htmlFor="kubeconfig">Kubeconfig 内容 *</Label>
-                      <Textarea
-                        id="kubeconfig"
-                        value={kubeconfig}
-                        onChange={(e) => setKubeconfig(e.target.value)}
-                        placeholder="粘贴 kubeconfig YAML（自动识别 API Server）..."
-                        className="min-h-[200px] font-mono text-xs"
-                      />
-                      {kubeconfig && parseApiServer(kubeconfig) && (
-                        <p className="text-xs text-emerald-600">
-                          已识别 API Server：{parseApiServer(kubeconfig)}
-                        </p>
-                      )}
-                    </TabsContent>
-                    <TabsContent value="token" className="space-y-2 pt-2">
-                      <div className="space-y-2">
-                        <Label htmlFor="apiServer">API Server *</Label>
-                        <Input
-                          id="apiServer"
-                          value={apiServer}
-                          onChange={(e) => setApiServer(e.target.value)}
-                          placeholder="https://10.0.0.1:6443"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label htmlFor="token">Token *</Label>
-                        <Textarea
-                          id="token"
-                          value={token}
-                          onChange={(e) => setToken(e.target.value)}
-                          placeholder="粘贴 Service Account Token..."
-                          className="min-h-[120px] font-mono text-xs"
-                        />
-                        <p className="text-xs text-slate-400">
-                          采用 insecure 模式，便于内网/自签证书集群接入
-                        </p>
-                      </div>
-                    </TabsContent>
-                  </Tabs>
-                </div>
-
-                {configType === 'kubeconfig' && (
-                  <div className="space-y-2">
-                    <Label htmlFor="context">上下文（可选）</Label>
-                    <Input
-                      id="context"
-                      value={context}
-                      onChange={(e) => setContext(e.target.value)}
-                      placeholder="留空则使用默认上下文"
-                    />
-                  </div>
-                )}
-
-                <Button
-                  type="submit"
-                  className="w-full bg-emerald-600 hover:bg-emerald-700"
-                  disabled={submitting}
-                >
-                  {submitting ? '添加中...' : '添加集群'}
-                </Button>
-              </form>
-            </DialogContent>
-          </Dialog>
-        }
-      />
-
-      {/* Clusters Grid */}
-      {loading ? (
-        <LoadingSpinner className="h-64" />
-      ) : clusters.length === 0 ? (
-        <EmptyState
-          icon={Server}
-          title="暂无集群"
-          description="添加第一个 Kubernetes 集群开始使用"
-        />
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {clusters.map((cluster) => (
-            <ClusterCard
-              key={cluster.id}
-              cluster={cluster}
-              validating={validating}
-              onViewInfo={viewClusterInfo}
-              onValidate={handleValidate}
-              onDelete={handleDelete}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Cluster Detail Dialog */}
-      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
-        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Server className="w-5 h-5 text-blue-500" />
-              {selectedCluster?.name}
-            </DialogTitle>
-          </DialogHeader>
-
-          {clusterInfo ? (
-            <ClusterDetail info={clusterInfo} />
-          ) : (
-            <LoadingSpinner className="h-32" />
-          )}
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-})
-
-// 子组件：集群卡片
-interface ClusterCardProps {
-  cluster: Cluster
-  validating: number | null
-  onViewInfo: (c: Cluster) => void
-  onValidate: (id: number) => void
-  onDelete: (id: number) => void
-}
-
-const ClusterCard = memo(function ClusterCard({
-  cluster,
-  validating,
-  onViewInfo,
-  onValidate,
-  onDelete,
-}: ClusterCardProps) {
-  return (
-    <Card className="border-slate-200 dark:border-slate-800 hover:shadow-md transition-shadow">
-      <CardContent className="p-5">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex items-center gap-2 min-w-0">
-            <Server className="w-5 h-5 text-blue-500 flex-shrink-0" />
-            <h3 className="font-semibold text-slate-800 dark:text-white truncate">
-              {cluster.name}
-            </h3>
-          </div>
-          <StatusBadge status={cluster.status} />
-        </div>
-
-        <p className="text-sm text-slate-500 mb-3 line-clamp-2">
-          {cluster.description || '无描述'}
-        </p>
-
-        <div className="space-y-1.5 text-xs text-slate-500 mb-4">
-          <InfoRow
-            label="接入方式"
-            value={cluster.configType === 'token' ? 'Token' : 'Kubeconfig'}
-          />
-          {cluster.apiServer && (
-            <InfoRow
-              label="API Server"
-              value={cluster.apiServer}
-              valueClass="truncate max-w-[150px]"
-            />
-          )}
-          <InfoRow label="版本" value={cluster.version || '未知'} />
-          <InfoRow label="节点数" value={String(cluster.nodesCount || 0)} />
-          <InfoRow
-            label="最后连接"
-            value={
-              cluster.lastConnected
-                ? new Date(cluster.lastConnected).toLocaleString()
-                : '从未'
-            }
-          />
-        </div>
-
-        <div className="flex gap-2 pt-3 border-t border-slate-100 dark:border-slate-800">
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onViewInfo(cluster)}
-          >
-            <Eye className="w-3 h-3 mr-1" />
-            详情
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onValidate(cluster.id)}
-            disabled={validating === cluster.id}
-          >
-            <RefreshCw
-              className={`w-3 h-3 mr-1 ${validating === cluster.id ? 'animate-spin' : ''}`}
-            />
-            验证
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="text-red-500 hover:text-red-600 hover:bg-red-50"
-            onClick={() => onDelete(cluster.id)}
-          >
-            <Trash2 className="w-3 h-3" />
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-})
-
-// 子组件：信息行
-const InfoRow = memo(function InfoRow({
-  label,
-  value,
-  valueClass,
-}: {
-  label: string
-  value: string
-  valueClass?: string
-}) {
-  return (
-    <div className="flex justify-between">
-      <span>{label}</span>
-      <span className={`font-medium text-slate-700 dark:text-slate-300 ${valueClass || ''}`}>
-        {value}
-      </span>
-    </div>
-  )
-})
-
-// 子组件：集群详情
-const ClusterDetail = memo(function ClusterDetail({ info }: { info: ClusterInfo }) {
-  return (
-    <div className="space-y-6">
-      <div className="grid grid-cols-2 gap-4">
-        <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
-          <p className="text-xs text-slate-500">版本</p>
-          <p className="text-sm font-medium">{info.version || '未知'}</p>
-        </div>
-        <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
-          <p className="text-xs text-slate-500">当前上下文</p>
-          <p className="text-sm font-medium">{info.currentContext || '默认'}</p>
-        </div>
-      </div>
-
-      <div>
-        <h4 className="text-sm font-semibold mb-2">节点（{info.nodes.length}）</h4>
-        <div className="space-y-2">
-          {info.nodes.map((node, idx) => (
-            <div
-              key={idx}
-              className="p-3 border border-slate-200 dark:border-slate-700 rounded-lg"
-            >
-              <div className="flex items-center justify-between">
-                <span className="font-medium text-sm">{node.name}</span>
-                <span
-                  className={`px-2 py-0.5 rounded-full text-xs ${
-                    node.status === 'Ready'
-                      ? 'bg-emerald-100 text-emerald-700'
-                      : 'bg-red-100 text-red-700'
-                  }`}
-                >
-                  {node.status === 'Ready' ? '就绪' : '未就绪'}
-                </span>
-              </div>
-              <div className="grid grid-cols-3 gap-2 mt-2 text-xs text-slate-500">
-                <span>IP：{node.internalIP}</span>
-                <span>系统：{node.os}/{node.arch}</span>
-                <span>版本：{node.version}</span>
-              </div>
-              {node.roles.length > 0 && (
-                <div className="flex gap-1 mt-2">
-                  {node.roles.map((role, ridx) => (
-                    <span
-                      key={ridx}
-                      className="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded text-xs"
-                    >
-                      {role}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        <h4 className="text-sm font-semibold mb-2">命名空间</h4>
-        <div className="flex flex-wrap gap-1">
-          {info.namespaces.map((ns, idx) => (
-            <span
-              key={idx}
-              className="px-2 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-xs"
-            >
-              {ns}
-            </span>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-})
-
-export default Clusters
diff --git a/frontend/src/pages/Collectors.tsx b/frontend/src/pages/Collectors.tsx
deleted file mode 100644
index 066f65b..0000000
--- a/frontend/src/pages/Collectors.tsx
+++ /dev/null
@@ -1,503 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import {
-  RadioTower,
-  Plus,
-  Trash2,
-  Upload,
-  Download,
-  Server,
-  Monitor,
-  Cloud,
-} from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { Card, CardContent } from '@/components/ui/card'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { collectorApi, deploymentApi, clusterApi, hostApi } from '@/api'
-import { statusLabel } from '@/lib/utils'
-import { StatusBadge } from '@/components/StatusBadge'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { EmptyState } from '@/components/EmptyState'
-import { PageHeader } from '@/components/PageHeader'
-import { toast } from 'sonner'
-import type { Collector, LokiDeployment, Cluster, Host } from '@/types'
-
-// 采集器类型元数据 - 常量提取
-const COLLECTOR_TYPE_META: Record<string, { label: string; icon: typeof Server; color: string }> = {
-  'host-promtail': { label: '主机 Promtail', icon: Monitor, color: 'bg-purple-100 text-purple-700' },
-  'k8s-daemonset': { label: 'K8s DaemonSet', icon: Cloud, color: 'bg-blue-100 text-blue-700' },
-  'k8s-fluentbit-sidecar': { label: 'K8s Sidecar', icon: Server, color: 'bg-cyan-100 text-cyan-700' },
-}
-
-const COLLECTOR_TYPES = [
-  { value: 'host-promtail' as const, label: '主机 Promtail（SSH）' },
-  { value: 'k8s-daemonset' as const, label: 'K8s Promtail DaemonSet' },
-  { value: 'k8s-fluentbit-sidecar' as const, label: 'K8s Fluent Bit Sidecar' },
-]
-
-/**
- * Collectors 页面 - 优化版本
- * 
- * 优化点：
- * 1. React.memo 包裹组件
- * 2. 所有操作函数使用 useCallback 缓存
- * 3. alert() 替换为 sonner toast
- * 4. setTimeout 使用 ref 管理，添加清理
- * 5. 使用公共组件替代重复代码
- * 6. 常量映射提取到组件外部
- */
-const Collectors = memo(function Collectors() {
-  const [collectors, setCollectors] = useState<Collector[]>([])
-  const [deployments, setDeployments] = useState<LokiDeployment[]>([])
-  const [clusters, setClusters] = useState<Cluster[]>([])
-  const [hosts, setHosts] = useState<Host[]>([])
-  const [loading, setLoading] = useState(true)
-  const [open, setOpen] = useState(false)
-  const [busy, setBusy] = useState<number | null>(null)
-
-  // Form state
-  const [name, setName] = useState('')
-  const [collectorType, setCollectorType] = useState<'host-promtail' | 'k8s-daemonset' | 'k8s-fluentbit-sidecar'>('host-promtail')
-  const [lokiID, setLokiID] = useState('')
-  const [hostID, setHostID] = useState('')
-  const [clusterID, setClusterID] = useState('')
-  const [targetDeployment, setTargetDeployment] = useState('')
-  const [namespace, setNamespace] = useState('')
-  const [logPath, setLogPath] = useState('')
-  const [labels, setLabels] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-
-  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
-
-  useEffect(() => {
-    return () => {
-      timeoutsRef.current.forEach((id) => clearTimeout(id))
-    }
-  }, [])
-
-  const addTimeout = useCallback((cb: () => void, delay: number) => {
-    const id = setTimeout(cb, delay)
-    timeoutsRef.current.push(id)
-    return id
-  }, [])
-
-  const loadAll = useCallback(async () => {
-    try {
-      const [cRes, dRes, clRes, hRes] = await Promise.all([
-        collectorApi.list(1, 100),
-        deploymentApi.list(1, 100),
-        clusterApi.list(1, 100),
-        hostApi.list(1, 100),
-      ])
-      setCollectors(cRes.list)
-      setDeployments(dRes.list)
-      setClusters(clRes.list)
-      setHosts(hRes.list)
-    } catch (err) {
-      console.error('Failed to load collectors:', err)
-      toast.error('加载采集器数据失败')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    loadAll()
-  }, [loadAll])
-
-  const resetForm = useCallback(() => {
-    setName('')
-    setCollectorType('host-promtail')
-    setLokiID('')
-    setHostID('')
-    setClusterID('')
-    setTargetDeployment('')
-    setNamespace('')
-    setLogPath('')
-    setLabels('')
-  }, [])
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      if (!lokiID) {
-        toast.error('请选择关联的 Loki 部署')
-        return
-      }
-      setSubmitting(true)
-      try {
-        await collectorApi.create({
-          name,
-          type: collectorType,
-          lokiDeploymentID: Number(lokiID),
-          hostID: collectorType === 'host-promtail' && hostID ? Number(hostID) : undefined,
-          clusterID: collectorType !== 'host-promtail' && clusterID ? Number(clusterID) : undefined,
-          targetDeployment: collectorType === 'k8s-fluentbit-sidecar' ? targetDeployment : undefined,
-          namespace: collectorType !== 'host-promtail' ? namespace : undefined,
-          logPath,
-          labels,
-        })
-        setOpen(false)
-        resetForm()
-        loadAll()
-        toast.success('采集器创建成功')
-      } catch (err: unknown) {
-        const message = err instanceof Error ? err.message : '创建采集器失败'
-        toast.error(message)
-      } finally {
-        setSubmitting(false)
-      }
-    },
-    [name, collectorType, lokiID, hostID, clusterID, targetDeployment, namespace, logPath, labels, resetForm, loadAll]
-  )
-
-  const handleDelete = useCallback(
-    async (id: number) => {
-      if (!confirm('确定删除此采集器？（将自动卸载）')) return
-      try {
-        await collectorApi.remove(id)
-        loadAll()
-        toast.success('采集器已删除')
-      } catch (err) {
-        console.error('Failed to delete collector:', err)
-        toast.error('删除采集器失败')
-      }
-    },
-    [loadAll]
-  )
-
-  const handleAction = useCallback(
-    async (id: number, action: 'install' | 'uninstall') => {
-      setBusy(id)
-      try {
-        await collectorApi[action](id)
-        addTimeout(loadAll, 3000)
-        toast.success(action === 'install' ? '部署指令已发送' : '卸载指令已发送')
-      } catch (err) {
-        console.error('Collector action failed:', err)
-        toast.error(action === 'install' ? '部署失败' : '卸载失败')
-      } finally {
-        addTimeout(() => setBusy(null), 3000)
-      }
-    },
-    [loadAll, addTimeout]
-  )
-
-  const isHostType = collectorType === 'host-promtail'
-  const isK8sType = collectorType !== 'host-promtail'
-  const isSidecarType = collectorType === 'k8s-fluentbit-sidecar'
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="部署客户端"
-        description="部署日志采集器，将日志推送到关联的 Loki"
-        action={
-          <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-              <Button className="bg-emerald-600 hover:bg-emerald-700">
-                <Plus className="w-4 h-4 mr-1" />
-                新建采集器
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>新建日志采集器</DialogTitle>
-              </DialogHeader>
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="c-name">名称 *</Label>
-                    <Input
-                      id="c-name"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      placeholder="app-logs-collector"
-                      required
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label>采集器类型</Label>
-                    <Select
-                      value={collectorType}
-                      onValueChange={(v) =>
-                        setCollectorType(v as 'host-promtail' | 'k8s-daemonset' | 'k8s-fluentbit-sidecar')
-                      }
-                    >
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {COLLECTOR_TYPES.map((t) => (
-                          <SelectItem key={t.value} value={t.value}>
-                            {t.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label>关联 Loki 部署 *</Label>
-                  <Select value={lokiID} onValueChange={setLokiID}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="选择已部署的 Loki（推送目标）" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {deployments.map((d) => (
-                        <SelectItem key={d.id} value={String(d.id)}>
-                          {d.name}（{statusLabel(d.status)}）
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {isHostType && (
-                  <div className="space-y-2">
-                    <Label>目标主机 *</Label>
-                    <Select value={hostID} onValueChange={setHostID}>
-                      <SelectTrigger>
-                        <SelectValue placeholder="选择主机" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {hosts.map((h) => (
-                          <SelectItem key={h.id} value={String(h.id)}>
-                            {h.name}（{h.hostIP}）
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                )}
-
-                {isK8sType && (
-                  <>
-                    <div className="space-y-2">
-                      <Label>目标集群 *</Label>
-                      <Select value={clusterID} onValueChange={setClusterID}>
-                        <SelectTrigger>
-                          <SelectValue placeholder="选择集群" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {clusters.map((c) => (
-                            <SelectItem key={c.id} value={String(c.id)}>
-                              {c.name}（{statusLabel(c.status)}）
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <Label htmlFor="c-ns">命名空间</Label>
-                        <Input
-                          id="c-ns"
-                          value={namespace}
-                          onChange={(e) => setNamespace(e.target.value)}
-                          placeholder={collectorType === 'k8s-daemonset' ? 'logging' : 'default'}
-                        />
-                      </div>
-                      {isSidecarType && (
-                        <div className="space-y-2">
-                          <Label htmlFor="c-deploy">目标 Deployment *</Label>
-                          <Input
-                            id="c-deploy"
-                            value={targetDeployment}
-                            onChange={(e) => setTargetDeployment(e.target.value)}
-                            placeholder="my-app"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </>
-                )}
-
-                <div className="space-y-2">
-                  <Label htmlFor="c-log">采集日志路径</Label>
-                  <Input
-                    id="c-log"
-                    value={logPath}
-                    onChange={(e) => setLogPath(e.target.value)}
-                    placeholder={isHostType ? '/var/log/*.log' : '/var/log/app/*.log'}
-                  />
-                </div>
-
-                <Button
-                  type="submit"
-                  className="w-full bg-emerald-600 hover:bg-emerald-700"
-                  disabled={submitting}
-                >
-                  {submitting ? '创建中...' : '创建并部署'}
-                </Button>
-              </form>
-            </DialogContent>
-          </Dialog>
-        }
-      />
-
-      {/* Collectors List */}
-      {loading ? (
-        <LoadingSpinner className="h-64" />
-      ) : collectors.length === 0 ? (
-        <EmptyState
-          icon={RadioTower}
-          title="暂无采集器"
-          description="新建一个日志采集器，关联已部署的 Loki"
-        />
-      ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          {collectors.map((c) => (
-            <CollectorCard
-              key={c.id}
-              collector={c}
-              busy={busy}
-              onInstall={(id) => handleAction(id, 'install')}
-              onUninstall={(id) => handleAction(id, 'uninstall')}
-              onDelete={handleDelete}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-})
-
-// 子组件：采集器卡片
-interface CollectorCardProps {
-  collector: Collector
-  busy: number | null
-  onInstall: (id: number) => void
-  onUninstall: (id: number) => void
-  onDelete: (id: number) => void
-}
-
-const CollectorCard = memo(function CollectorCard({
-  collector,
-  busy,
-  onInstall,
-  onUninstall,
-  onDelete,
-}: CollectorCardProps) {
-  const meta = COLLECTOR_TYPE_META[collector.type] || {
-    label: collector.type,
-    icon: RadioTower,
-    color: 'bg-slate-100 text-slate-600',
-  }
-  const Icon = meta.icon
-  const isBusy = busy === collector.id
-
-  return (
-    <Card className="border-slate-200 dark:border-slate-800 hover:shadow-md transition-shadow">
-      <CardContent className="p-5">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex items-center gap-2 min-w-0">
-            <Icon className="w-5 h-5 text-emerald-600 flex-shrink-0" />
-            <div className="min-w-0">
-              <h3 className="font-semibold text-slate-800 dark:text-white truncate">
-                {collector.name}
-              </h3>
-              <p className="text-xs text-slate-500">
-                关联 Loki：{collector.lokiDeployment?.name || '未知'}
-              </p>
-            </div>
-          </div>
-          <StatusBadge status={collector.status} />
-        </div>
-
-        <div className="space-y-1.5 text-xs text-slate-500 mb-3">
-          <div className="flex justify-between">
-            <span>类型</span>
-            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${meta.color}`}>
-              {meta.label}
-            </span>
-          </div>
-          {collector.host && (
-            <InfoRow label="主机" value={`${collector.host.name}（${collector.host.hostIP}）`} />
-          )}
-          {collector.cluster && (
-            <InfoRow label="集群" value={collector.cluster.name} />
-          )}
-          {collector.targetDeployment && (
-            <InfoRow label="目标 Deployment" value={collector.targetDeployment} />
-          )}
-          {collector.namespace && <InfoRow label="命名空间" value={collector.namespace} />}
-          {collector.logPath && (
-            <InfoRow label="日志路径" value={collector.logPath} />
-          )}
-          {collector.statusMessage && (
-            <div className="p-2 bg-slate-50 dark:bg-slate-800 rounded text-xs mt-1">
-              {collector.statusMessage}
-            </div>
-          )}
-        </div>
-
-        <div className="flex gap-2 pt-3 border-t border-slate-100 dark:border-slate-800">
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onInstall(collector.id)}
-            disabled={isBusy}
-          >
-            <Upload className="w-3 h-3 mr-1" />
-            {isBusy ? '处理中...' : '部署'}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onUninstall(collector.id)}
-            disabled={isBusy}
-          >
-            <Download className="w-3 h-3 mr-1" />
-            卸载
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="text-red-500 hover:text-red-600 hover:bg-red-50"
-            onClick={() => onDelete(collector.id)}
-          >
-            <Trash2 className="w-3 h-3" />
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-})
-
-// 子组件：信息行
-const InfoRow = memo(function InfoRow({
-  label,
-  value,
-}: {
-  label: string
-  value: string
-}) {
-  return (
-    <div className="flex justify-between">
-      <span>{label}</span>
-      <span className="font-medium text-slate-700 dark:text-slate-300 truncate max-w-[200px]">
-        {value}
-      </span>
-    </div>
-  )
-})
-
-export default Collectors
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
deleted file mode 100644
index aae20c1..0000000
--- a/frontend/src/pages/Dashboard.tsx
+++ /dev/null
@@ -1,404 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useNavigate } from 'react-router'
-import {
-  Rocket,
-  Server,
-  Monitor,
-  Activity,
-  TrendingUp,
-  CheckCircle,
-} from 'lucide-react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { deploymentApi, clusterApi, hostApi } from '@/api'
-import { statusLabel } from '@/lib/utils'
-import { StatusIcon, getStatusColorClass } from '@/components/StatusBadge'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { EmptyState } from '@/components/EmptyState'
-import type { DashboardStats, LokiDeployment, Cluster, Host } from '@/types'
-
-// 统计卡片数据常量
-const STATS_CONFIG = [
-  {
-    key: 'deployments' as const,
-    label: '部署总数',
-    icon: Rocket,
-    iconColor: 'text-emerald-600',
-    iconBg: 'bg-emerald-100 dark:bg-emerald-900/30',
-    getValue: (s: DashboardStats | null) => s?.totalDeployments || 0,
-    subLabel: (s: DashboardStats | null) => `${s?.running || 0} 个运行中`,
-    subIcon: TrendingUp,
-    subColor: 'text-emerald-500',
-    subTextColor: 'text-emerald-600',
-  },
-  {
-    key: 'clusters' as const,
-    label: '集群',
-    icon: Server,
-    iconColor: 'text-blue-600',
-    iconBg: 'bg-blue-100 dark:bg-blue-900/30',
-    getValue: (s: DashboardStats | null) => s?.clusterCount || 0,
-    subLabel: () => '已接入',
-    subIcon: CheckCircle,
-    subColor: 'text-emerald-500',
-    subTextColor: 'text-slate-500',
-  },
-  {
-    key: 'hosts' as const,
-    label: '主机',
-    icon: Monitor,
-    iconColor: 'text-purple-600',
-    iconBg: 'bg-purple-100 dark:bg-purple-900/30',
-    getValue: (s: DashboardStats | null) => s?.hostCount || 0,
-    subLabel: () => 'SSH 就绪',
-    subIcon: CheckCircle,
-    subColor: 'text-emerald-500',
-    subTextColor: 'text-slate-500',
-  },
-  {
-    key: 'status' as const,
-    label: '状态',
-    icon: Activity,
-    iconColor: 'text-orange-600',
-    iconBg: 'bg-orange-100 dark:bg-orange-900/30',
-    getValue: () => 0, // 状态卡片使用特殊渲染
-    isStatusCard: true,
-  },
-]
-
-const STATUS_ITEMS = [
-  { key: 'running', label: '运行中', colorClass: 'text-emerald-600' },
-  { key: 'failed', label: '失败', colorClass: 'text-red-600' },
-  { key: 'pending', label: '等待中', colorClass: 'text-amber-600' },
-] as const
-
-const REFRESH_INTERVAL = 10000 // 10秒自动刷新
-
-/**
- * Dashboard 页面 - 全面优化版本
- * 
- * 优化点：
- * 1. 使用 React.memo 包裹组件，避免不必要的重渲染
- * 2. 状态函数使用 useMemo 缓存（替代原来的getStatusIcon/getStatusColor）
- * 3. 数据加载使用 useCallback 缓存引用
- * 4. 自动刷新定时器添加清理函数，防止内存泄漏
- * 5. 使用 StatusBadge/StatusIcon 公共组件替代重复的状态渲染逻辑
- * 6. 提取常量配置避免重复创建
- */
-const Dashboard = memo(function Dashboard() {
-  const [stats, setStats] = useState<DashboardStats | null>(null)
-  const [deployments, setDeployments] = useState<LokiDeployment[]>([])
-  const [clusters, setClusters] = useState<Cluster[]>([])
-  const [hosts, setHosts] = useState<Host[]>([])
-  const [loading, setLoading] = useState(true)
-  const navigate = useNavigate()
-
-  // 使用ref追踪组件是否已卸载，防止内存泄漏
-  const isMountedRef = useRef(true)
-  // 使用ref存储定时器ID以便清理
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
-
-  // 数据加载函数 - useCallback缓存引用
-  const loadDashboard = useCallback(async () => {
-    // 如果组件已卸载，不执行状态更新
-    if (!isMountedRef.current) return
-
-    try {
-      const [statsRes, deployRes, clusterRes, hostRes] = await Promise.all([
-        deploymentApi.stats(),
-        deploymentApi.list(1, 5),
-        clusterApi.list(1, 5),
-        hostApi.list(1, 5),
-      ])
-
-      // 再次检查组件是否仍挂载
-      if (isMountedRef.current) {
-        setStats(statsRes)
-        setDeployments(deployRes.list)
-        setClusters(clusterRes.list)
-        setHosts(hostRes.list)
-      }
-    } catch (err) {
-      console.error('Failed to load dashboard:', err)
-    } finally {
-      if (isMountedRef.current) {
-        setLoading(false)
-      }
-    }
-  }, [])
-
-  // 初始化加载 + 自动刷新定时器
-  useEffect(() => {
-    isMountedRef.current = true
-
-    // 立即加载数据
-    loadDashboard()
-
-    // 设置自动刷新定时器
-    intervalRef.current = setInterval(loadDashboard, REFRESH_INTERVAL)
-
-    // 清理函数：组件卸载时清除定时器和标记
-    return () => {
-      isMountedRef.current = false
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
-        intervalRef.current = null
-      }
-    }
-  }, [loadDashboard])
-
-  // 缓存导航处理函数
-  const navigateTo = useCallback(
-    (path: string) => () => navigate(path),
-    [navigate]
-  )
-
-  // 渲染状态概览数值
-  const statusSummary = useMemo(() => {
-    if (!stats) return null
-    return STATUS_ITEMS.map((item) => (
-      <div key={item.key} className="text-center">
-        <p className={`text-lg font-bold ${item.colorClass}`}>
-          {(stats[item.key as keyof DashboardStats] as number) || 0}
-        </p>
-        <p className="text-[10px] text-slate-400">{item.label}</p>
-      </div>
-    ))
-  }, [stats])
-
-  if (loading) {
-    return <LoadingSpinner className="h-64" />
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        {STATS_CONFIG.slice(0, 3).map((config) => {
-          const Icon = config.icon
-          const SubIcon = config.subIcon
-          return (
-            <Card key={config.key} className="border-slate-200 dark:border-slate-800">
-              <CardContent className="p-6">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm text-slate-500">{config.label}</p>
-                    <p className="text-3xl font-bold text-slate-900 dark:text-white mt-1">
-                      {config.getValue(stats)}
-                    </p>
-                  </div>
-                  <div
-                    className={`w-12 h-12 rounded-xl ${config.iconBg} flex items-center justify-center`}
-                  >
-                    <Icon className={`w-6 h-6 ${config.iconColor}`} />
-                  </div>
-                </div>
-                <div className="flex items-center gap-2 mt-4">
-                  {SubIcon && <SubIcon className={`w-4 h-4 ${config.subColor}`} />}
-                  <span className={`text-xs ${config.subTextColor}`}>
-                    {config.subLabel?.(stats)}
-                  </span>
-                </div>
-              </CardContent>
-            </Card>
-          )
-        })}
-
-        {/* Status Overview Card */}
-        <Card className="border-slate-200 dark:border-slate-800">
-          <CardContent className="p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">状态</p>
-                <div className="flex gap-3 mt-1">{statusSummary}</div>
-              </div>
-              <div className="w-12 h-12 rounded-xl bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
-                <Activity className="w-6 h-6 text-orange-600" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Recent Deployments & Quick Resources */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Recent Deployments */}
-        <RecentDeploymentsCard
-          deployments={deployments}
-          onViewAll={navigateTo('/deployments')}
-        />
-
-        {/* Quick Resources */}
-        <div className="space-y-4">
-          <ResourceListCard
-            title="集群"
-            icon={<Server className="w-4 h-4 text-blue-500" />}
-            items={clusters.slice(0, 3)}
-            onManage={navigateTo('/clusters')}
-            getItemIcon={() => <Server className="w-4 h-4 text-blue-500" />}
-            getItemLabel={(c) => c.name}
-            getItemStatus={(c) => c.status}
-          />
-          <ResourceListCard
-            title="主机"
-            icon={<Monitor className="w-4 h-4 text-purple-500" />}
-            items={hosts.slice(0, 3)}
-            onManage={navigateTo('/hosts')}
-            getItemIcon={() => <Monitor className="w-4 h-4 text-purple-500" />}
-            getItemLabel={(h) => h.name}
-            getItemStatus={(h) => h.status}
-            getItemExtra={(h) => h.hostIP}
-          />
-        </div>
-      </div>
-    </div>
-  )
-})
-
-// 子组件：最近部署卡片 - 独立memo优化
-const RecentDeploymentsCard = memo(function RecentDeploymentsCard({
-  deployments,
-  onViewAll,
-}: {
-  deployments: LokiDeployment[]
-  onViewAll: () => void
-}) {
-  const navigate = useNavigate()
-
-  return (
-    <Card className="border-slate-200 dark:border-slate-800">
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-base">最近部署</CardTitle>
-          <button
-            onClick={onViewAll}
-            className="text-xs text-emerald-600 hover:text-emerald-700 font-medium"
-          >
-            查看全部
-          </button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-3">
-          {deployments.length === 0 ? (
-            <EmptyState
-              icon={Rocket}
-              title="暂无部署"
-              description="创建你的第一个 Loki 部署"
-            />
-          ) : (
-            deployments.map((d) => (
-              <div
-                key={d.id}
-                className="flex items-center justify-between p-3 rounded-lg bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer"
-                onClick={() => navigate('/deployments')}
-              >
-                <div className="flex items-center gap-3 min-w-0">
-                  <StatusIcon status={d.status} size="sm" />
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">
-                      {d.name}
-                    </p>
-                    <p className="text-xs text-slate-500">
-                      {d.mode} &middot; {d.namespace || 'loki'}
-                    </p>
-                  </div>
-                </div>
-                <span
-                  className={`px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${getStatusColorClass(
-                    d.status
-                  )}`}
-                >
-                  {statusLabel(d.status)}
-                </span>
-              </div>
-            ))
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  )
-})
-
-// 子组件：资源列表卡片 - 独立memo优化
-// 用具体结构类型而非泛型：memo 包裹泛型组件会导致 TS 无法从 props 推断 T，
-// 退化为约束类型 {id:number}，使 getItemLabel/Status 中访问 name/status 报错。
-interface ResourceItem {
-  id: number
-  name: string
-  status: string
-  hostIP?: string
-}
-
-interface ResourceListCardProps {
-  title: string
-  icon: React.ReactNode
-  items: ResourceItem[]
-  onManage: () => void
-  getItemIcon: (item: ResourceItem) => React.ReactNode
-  getItemLabel: (item: ResourceItem) => string
-  getItemStatus: (item: ResourceItem) => string
-  getItemExtra?: (item: ResourceItem) => string | undefined
-}
-
-const ResourceListCard = memo(function ResourceListCard({
-  title,
-  icon,
-  items,
-  onManage,
-  getItemIcon,
-  getItemLabel,
-  getItemStatus,
-  getItemExtra,
-}: ResourceListCardProps) {
-  return (
-    <Card className="border-slate-200 dark:border-slate-800">
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-base flex items-center gap-2">
-            {icon}
-            {title}
-          </CardTitle>
-          <button
-            onClick={onManage}
-            className="text-xs text-emerald-600 hover:text-emerald-700 font-medium"
-          >
-            管理
-          </button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-2">
-          {items.length === 0 ? (
-            <p className="text-sm text-slate-400 text-center py-4">暂无{title}</p>
-          ) : (
-            items.map((item) => (
-              <div
-                key={item.id}
-                className="flex items-center justify-between p-2 rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
-              >
-                <div className="flex items-center gap-2 min-w-0">
-                  {getItemIcon(item)}
-                  <span className="text-sm truncate">{getItemLabel(item)}</span>
-                  {getItemExtra?.(item) && (
-                    <span className="text-xs text-slate-400 flex-shrink-0">
-                      {getItemExtra(item)}
-                    </span>
-                  )}
-                </div>
-                <span
-                  className={`px-2 py-0.5 rounded-full text-xs flex-shrink-0 ${getStatusColorClass(
-                    getItemStatus(item)
-                  )}`}
-                >
-                  {statusLabel(getItemStatus(item))}
-                </span>
-              </div>
-            ))
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  )
-})
-
-export default Dashboard
diff --git a/frontend/src/pages/Deployments.tsx b/frontend/src/pages/Deployments.tsx
deleted file mode 100644
index 4170eeb..0000000
--- a/frontend/src/pages/Deployments.tsx
+++ /dev/null
@@ -1,743 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  Rocket,
-  Plus,
-  Play,
-  Square,
-  RotateCw,
-  Trash2,
-  Terminal,
-  ExternalLink,
-} from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-import { Textarea } from '@/components/ui/textarea'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { Card, CardContent } from '@/components/ui/card'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { deploymentApi, clusterApi, hostApi, storageApi } from '@/api'
-import { statusLabel } from '@/lib/utils'
-import { StatusBadge, StatusIcon } from '@/components/StatusBadge'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { EmptyState } from '@/components/EmptyState'
-import { PageHeader } from '@/components/PageHeader'
-import { toast } from 'sonner'
-import type { LokiDeployment, Cluster, Host, StorageConfig, DeploymentLog } from '@/types'
-
-// 表单默认值常量 - 避免重复创建
-const FORM_DEFAULTS = {
-  name: '',
-  description: '',
-  version: '3.0.0',
-  mode: 'k8s-helm' as 'k8s-helm' | 'k8s-yaml' | 'host-binary',
-  clusterID: '',
-  hostID: '',
-  namespace: 'loki',
-  storageConfigID: '',
-  authEnabled: false,
-  retentionDays: 30,
-  replicas: 1,
-  resourcesCPU: '500m',
-  resourcesMem: '512Mi',
-  storageSize: '10Gi',
-}
-
-/**
- * Deployments 页面 - 全面优化版本
- * 
- * 优化点：
- * 1. React.memo 包裹整个组件
- * 2. 使用 useReducer 简化大量 useState（替代原始15+个 useState）
- * 3. 所有操作函数使用 useCallback 缓存
- * 4. 部署卡片列表使用 useMemo 优化渲染
- * 5. setTimeout 添加清理函数，修复内存泄漏
- * 6. alert() 替换为 sonner toast 错误提示
- * 7. 使用 StatusBadge 公共组件替代重复状态函数
- * 8. 定时器使用 ref 存储以便清理
- */
-const Deployments = memo(function Deployments() {
-  // === State ===
-  const [deployments, setDeployments] = useState<LokiDeployment[]>([])
-  const [clusters, setClusters] = useState<Cluster[]>([])
-  const [hosts, setHosts] = useState<Host[]>([])
-  const [storages, setStorages] = useState<StorageConfig[]>([])
-  const [loading, setLoading] = useState(true)
-  const [open, setOpen] = useState(false)
-  const [logsOpen, setLogsOpen] = useState(false)
-  const [selectedDeployment, setSelectedDeployment] = useState<LokiDeployment | null>(null)
-  const [logs, setLogs] = useState<DeploymentLog[]>([])
-  const [deploying, setDeploying] = useState<number | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-
-  // 表单状态 - 合并为一个对象减少state数量
-  const [form, setForm] = useState({ ...FORM_DEFAULTS })
-
-  // 使用ref存储所有定时器ID以便清理
-  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
-
-  // 组件卸载时清理所有定时器
-  useEffect(() => {
-    return () => {
-      timeoutsRef.current.forEach((id) => clearTimeout(id))
-      timeoutsRef.current = []
-    }
-  }, [])
-
-  // 添加定时器的辅助函数
-  const addTimeout = useCallback((cb: () => void, delay: number) => {
-    const id = setTimeout(cb, delay)
-    timeoutsRef.current.push(id)
-    return id
-  }, [])
-
-  // === 数据加载 ===
-  const loadAll = useCallback(async () => {
-    try {
-      const [deployRes, clusterRes, hostRes, storageRes] = await Promise.all([
-        deploymentApi.list(1, 100),
-        clusterApi.list(1, 100),
-        hostApi.list(1, 100),
-        storageApi.list(1, 100),
-      ])
-      setDeployments(deployRes.list)
-      setClusters(clusterRes.list)
-      setHosts(hostRes.list)
-      setStorages(storageRes.list)
-    } catch (err) {
-      console.error('Failed to load deployments:', err)
-      toast.error('加载部署数据失败')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    loadAll()
-  }, [loadAll])
-
-  // === 表单处理 ===
-  const resetForm = useCallback(() => {
-    setForm({ ...FORM_DEFAULTS })
-  }, [])
-
-  const handleFormChange = useCallback(
-    <K extends keyof typeof FORM_DEFAULTS>(key: K, value: (typeof FORM_DEFAULTS)[K]) => {
-      setForm((prev) => ({ ...prev, [key]: value }))
-    },
-    []
-  )
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      setSubmitting(true)
-      try {
-        const clusterIDNum = form.clusterID ? Number(form.clusterID) : undefined
-        const hostIDNum = form.hostID ? Number(form.hostID) : undefined
-        const storageIDNum = form.storageConfigID ? Number(form.storageConfigID) : 0
-
-        await deploymentApi.create({
-          name: form.name,
-          description: form.description,
-          version: form.version,
-          mode: form.mode,
-          clusterID: clusterIDNum,
-          hostID: hostIDNum,
-          namespace: form.namespace,
-          storageConfigID: storageIDNum,
-          authEnabled: form.authEnabled,
-          retentionDays: form.retentionDays,
-          replicas: form.replicas,
-          resourcesCPU: form.resourcesCPU,
-          resourcesMem: form.resourcesMem,
-          storageSize: form.storageSize,
-        })
-        setOpen(false)
-        resetForm()
-        loadAll()
-        toast.success('部署创建成功')
-      } catch (err: unknown) {
-        const message = err instanceof Error ? err.message : '创建部署失败'
-        toast.error(message)
-      } finally {
-        setSubmitting(false)
-      }
-    },
-    [form, resetForm, loadAll]
-  )
-
-  // === 操作函数 - useCallback 缓存 ===
-  const handleDeploy = useCallback(
-    async (id: number) => {
-      setDeploying(id)
-      try {
-        await deploymentApi.deploy(id)
-        addTimeout(loadAll, 2000)
-      } catch (err) {
-        console.error('Failed to deploy:', err)
-        toast.error('部署失败')
-      } finally {
-        addTimeout(() => setDeploying(null), 5000)
-      }
-    },
-    [loadAll, addTimeout]
-  )
-
-  const handleStop = useCallback(
-    async (id: number) => {
-      try {
-        await deploymentApi.stop(id)
-        loadAll()
-        toast.success('服务已停止')
-      } catch (err) {
-        console.error('Failed to stop:', err)
-        toast.error('停止失败')
-      }
-    },
-    [loadAll]
-  )
-
-  const handleRestart = useCallback(
-    async (id: number) => {
-      setDeploying(id)
-      try {
-        await deploymentApi.restart(id)
-        addTimeout(loadAll, 3000)
-        toast.success('重启指令已发送')
-      } catch (err) {
-        console.error('Failed to restart:', err)
-        toast.error('重启失败')
-      } finally {
-        addTimeout(() => setDeploying(null), 5000)
-      }
-    },
-    [loadAll, addTimeout]
-  )
-
-  const handleDelete = useCallback(
-    async (id: number) => {
-      if (!confirm('确定删除此部署？')) return
-      try {
-        await deploymentApi.remove(id)
-        loadAll()
-        toast.success('部署已删除')
-      } catch (err) {
-        console.error('Failed to delete:', err)
-        toast.error('删除失败')
-      }
-    },
-    [loadAll]
-  )
-
-  const viewLogs = useCallback(
-    async (deployment: LokiDeployment) => {
-      setSelectedDeployment(deployment)
-      setLogsOpen(true)
-      try {
-        const res = await deploymentApi.logs(deployment.id, 1, 100)
-        setLogs(res.list)
-      } catch (err) {
-        console.error('Failed to load logs:', err)
-        toast.error('加载日志失败')
-      }
-    },
-    []
-  )
-
-  // === 辅助函数 ===
-  const getTargetLabel = useCallback((d: LokiDeployment) => {
-    if (d.cluster) return `集群：${d.cluster.name}`
-    if (d.host) return `主机：${d.host.name}`
-    return '未知'
-  }, [])
-
-  // === 渲染优化 ===
-  const deploymentCards = useMemo(
-    () =>
-      deployments.map((d) => (
-        <DeploymentCard
-          key={d.id}
-          deployment={d}
-          deploying={deploying}
-          onDeploy={handleDeploy}
-          onStop={handleStop}
-          onRestart={handleRestart}
-          onDelete={handleDelete}
-          onViewLogs={viewLogs}
-          getTargetLabel={getTargetLabel}
-        />
-      )),
-    [deployments, deploying, handleDeploy, handleStop, handleRestart, handleDelete, viewLogs, getTargetLabel]
-  )
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <PageHeader
-        title="部署Loki"
-        description="部署与管理 Grafana Loki 日志聚合服务"
-        action={
-          <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-              <Button className="bg-emerald-600 hover:bg-emerald-700">
-                <Plus className="w-4 h-4 mr-1" />
-                新建部署
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>创建 Loki 部署</DialogTitle>
-              </DialogHeader>
-              <DeploymentForm
-                form={form}
-                onChange={handleFormChange}
-                onSubmit={handleSubmit}
-                submitting={submitting}
-                clusters={clusters}
-                hosts={hosts}
-                storages={storages}
-              />
-            </DialogContent>
-          </Dialog>
-        }
-      />
-
-      {/* Deployments Grid */}
-      {loading ? (
-        <LoadingSpinner className="h-64" />
-      ) : deployments.length === 0 ? (
-        <EmptyState
-          icon={Rocket}
-          title="暂无部署"
-          description="创建你的第一个 Loki 部署"
-        />
-      ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">{deploymentCards}</div>
-      )}
-
-      {/* Logs Dialog */}
-      <Dialog open={logsOpen} onOpenChange={setLogsOpen}>
-        <DialogContent className="max-w-4xl max-h-[80vh]">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Terminal className="w-5 h-5 text-emerald-500" />
-              部署日志 - {selectedDeployment?.name}
-            </DialogTitle>
-          </DialogHeader>
-          <LogViewer logs={logs} />
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-})
-
-// 子组件：部署卡片 - 独立memo优化
-interface DeploymentCardProps {
-  deployment: LokiDeployment
-  deploying: number | null
-  onDeploy: (id: number) => void
-  onStop: (id: number) => void
-  onRestart: (id: number) => void
-  onDelete: (id: number) => void
-  onViewLogs: (d: LokiDeployment) => void
-  getTargetLabel: (d: LokiDeployment) => string
-}
-
-const DeploymentCard = memo(function DeploymentCard({
-  deployment: d,
-  deploying,
-  onDeploy,
-  onStop,
-  onRestart,
-  onDelete,
-  onViewLogs,
-  getTargetLabel,
-}: DeploymentCardProps) {
-  const isDeploying = d.status === 'deploying'
-  const isBusy = deploying === d.id
-  const canDeploy = d.status === 'pending' || d.status === 'failed' || d.status === 'stopped'
-
-  return (
-    <Card className="border-slate-200 dark:border-slate-800 hover:shadow-md transition-shadow">
-      <CardContent className="p-5">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex items-center gap-2 min-w-0">
-            <StatusIcon status={d.status} size="md" />
-            <div className="min-w-0">
-              <h3 className="font-semibold text-slate-800 dark:text-white truncate">
-                {d.name}
-              </h3>
-              <p className="text-xs text-slate-500">{d.uuid}</p>
-            </div>
-          </div>
-          <StatusBadge status={d.status} />
-        </div>
-
-        <p className="text-sm text-slate-500 mb-3">{d.description || '无描述'}</p>
-
-        <div className="space-y-1.5 text-xs text-slate-500 mb-4">
-          <InfoRow label="方式" value={d.mode} />
-          <InfoRow label="版本" value={d.version} />
-          <InfoRow label="目标" value={getTargetLabel(d)} />
-          <InfoRow label="命名空间" value={d.namespace || 'loki'} />
-          <InfoRow label="副本数" value={String(d.replicas)} />
-          <InfoRow label="存储" value={d.storageConfig?.name || '本地'} />
-          {d.endpoint && (
-            <InfoRow label="访问地址" value={d.endpoint} valueClass="text-emerald-600 truncate max-w-[200px]" />
-          )}
-          {d.statusMessage && (
-            <div className="p-2 bg-slate-50 dark:bg-slate-800 rounded text-xs">
-              {d.statusMessage}
-            </div>
-          )}
-        </div>
-
-        <div className="flex gap-1 pt-3 border-t border-slate-100 dark:border-slate-800">
-          {canDeploy ? (
-            <Button
-              variant="outline"
-              size="sm"
-              className="flex-1 text-xs bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border-emerald-200"
-              onClick={() => onDeploy(d.id)}
-              disabled={isBusy}
-            >
-              <Play className="w-3 h-3 mr-1" />
-              {isBusy ? '部署中...' : '部署'}
-            </Button>
-          ) : isDeploying ? (
-            <Button variant="outline" size="sm" className="flex-1 text-xs" disabled>
-              <RotateCw className="w-3 h-3 mr-1 animate-spin" />
-              部署中...
-            </Button>
-          ) : (
-            <>
-              <Button variant="outline" size="sm" className="text-xs" onClick={() => onStop(d.id)}>
-                <Square className="w-3 h-3 mr-1" />
-                停止
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                className="text-xs"
-                onClick={() => onRestart(d.id)}
-                disabled={isBusy}
-              >
-                <RotateCw className={`w-3 h-3 mr-1 ${isBusy ? 'animate-spin' : ''}`} />
-                重启
-              </Button>
-            </>
-          )}
-          <Button variant="outline" size="sm" className="text-xs" onClick={() => onViewLogs(d)}>
-            <Terminal className="w-3 h-3 mr-1" />
-            日志
-          </Button>
-          {d.endpoint && (
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs text-emerald-600 hover:text-emerald-700"
-              onClick={() => window.open(d.endpoint, '_blank')}
-              title="浏览器访问"
-            >
-              <ExternalLink className="w-3 h-3 mr-1" />
-              访问
-            </Button>
-          )}
-          <Button
-            variant="outline"
-            size="sm"
-            className="text-red-500 hover:text-red-600 hover:bg-red-50"
-            onClick={() => onDelete(d.id)}
-          >
-            <Trash2 className="w-3 h-3" />
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-})
-
-// 子组件：信息行
-const InfoRow = memo(function InfoRow({
-  label,
-  value,
-  valueClass,
-}: {
-  label: string
-  value: string
-  valueClass?: string
-}) {
-  return (
-    <div className="flex justify-between">
-      <span>{label}</span>
-      <span className={`font-medium text-slate-700 dark:text-slate-300 ${valueClass || ''}`}>
-        {value}
-      </span>
-    </div>
-  )
-})
-
-// 子组件：日志查看器
-const LogViewer = memo(function LogViewer({ logs }: { logs: DeploymentLog[] }) {
-  return (
-    <div className="bg-slate-900 text-green-400 font-mono text-xs p-4 rounded-lg h-96 overflow-auto">
-      {logs.length === 0 ? (
-        <p className="text-slate-500">暂无日志...</p>
-      ) : (
-        logs.map((log) => (
-          <div
-            key={log.id}
-            className={`mb-1 ${
-              log.level === 'error'
-                ? 'text-red-400'
-                : log.level === 'warn'
-                ? 'text-amber-400'
-                : log.level === 'success'
-                ? 'text-emerald-400'
-                : 'text-green-400'
-            }`}
-          >
-            <span className="text-slate-500">
-              [{new Date(log.createdAt).toLocaleTimeString()}]
-            </span>{' '}
-            <span className="font-bold uppercase">{log.level}</span> {log.message}
-          </div>
-        ))
-      )}
-    </div>
-  )
-})
-
-// 子组件：部署表单
-interface DeploymentFormProps {
-  form: typeof FORM_DEFAULTS
-  onChange: <K extends keyof typeof FORM_DEFAULTS>(key: K, value: (typeof FORM_DEFAULTS)[K]) => void
-  onSubmit: (e: React.FormEvent) => void
-  submitting: boolean
-  clusters: Cluster[]
-  hosts: Host[]
-  storages: StorageConfig[]
-}
-
-const DeploymentForm = memo(function DeploymentForm({
-  form,
-  onChange,
-  onSubmit,
-  submitting,
-  clusters,
-  hosts,
-  storages,
-}: DeploymentFormProps) {
-  const isK8s = form.mode === 'k8s-helm' || form.mode === 'k8s-yaml'
-  const isHost = form.mode === 'host-binary'
-
-  return (
-    <form onSubmit={onSubmit} className="space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="d-name">部署名称 *</Label>
-        <Input
-          id="d-name"
-          value={form.name}
-          onChange={(e) => onChange('name', e.target.value)}
-          placeholder="production-loki"
-          required
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="d-desc">描述</Label>
-        <Textarea
-          id="d-desc"
-          value={form.description}
-          onChange={(e) => onChange('description', e.target.value)}
-          placeholder="生产环境 Loki 日志服务"
-        />
-      </div>
-
-      <div className="grid grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label>版本</Label>
-          <Select value={form.version} onValueChange={(v) => onChange('version', v)}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="3.0.0">3.0.0</SelectItem>
-              <SelectItem value="2.9.8">2.9.8</SelectItem>
-              <SelectItem value="2.9.7">2.9.7</SelectItem>
-              <SelectItem value="2.9.6">2.9.6</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-2">
-          <Label>部署方式</Label>
-          <Select
-            value={form.mode}
-            onValueChange={(v) =>
-              onChange('mode', v as 'k8s-helm' | 'k8s-yaml' | 'host-binary')
-            }
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="k8s-helm">K8s Helm 部署</SelectItem>
-              <SelectItem value="k8s-yaml">K8s YAML 部署</SelectItem>
-              <SelectItem value="host-binary">主机二进制部署</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      {isK8s && (
-        <>
-          <div className="space-y-2">
-            <Label>目标集群 *</Label>
-            <Select value={form.clusterID} onValueChange={(v) => onChange('clusterID', v)}>
-              <SelectTrigger>
-                <SelectValue placeholder="请选择集群" />
-              </SelectTrigger>
-              <SelectContent>
-                {clusters.map((c) => (
-                  <SelectItem key={c.id} value={String(c.id)}>
-                    {c.name}（{statusLabel(c.status)}）
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="d-ns">命名空间</Label>
-            <Input
-              id="d-ns"
-              value={form.namespace}
-              onChange={(e) => onChange('namespace', e.target.value)}
-              placeholder="loki"
-            />
-          </div>
-        </>
-      )}
-
-      {isHost && (
-        <div className="space-y-2">
-          <Label>目标主机 *</Label>
-          <Select value={form.hostID} onValueChange={(v) => onChange('hostID', v)}>
-            <SelectTrigger>
-              <SelectValue placeholder="请选择主机" />
-            </SelectTrigger>
-            <SelectContent>
-              {hosts.map((h) => (
-                <SelectItem key={h.id} value={String(h.id)}>
-                  {h.name}（{h.hostIP}）
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      )}
-
-      <div className="space-y-2">
-        <Label>存储配置</Label>
-        <Select value={form.storageConfigID} onValueChange={(v) => onChange('storageConfigID', v)}>
-          <SelectTrigger>
-            <SelectValue placeholder="请选择存储（可选）" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="0">本地存储（默认）</SelectItem>
-            {storages.map((s) => (
-              <SelectItem key={s.id} value={String(s.id)}>
-                {s.name}（{s.storageType}）
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="grid grid-cols-3 gap-4">
-        <div className="space-y-2">
-          <Label htmlFor="d-replicas">副本数</Label>
-          <Input
-            id="d-replicas"
-            type="number"
-            min={1}
-            max={10}
-            value={form.replicas}
-            onChange={(e) => onChange('replicas', Number(e.target.value))}
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="d-retention">保留天数</Label>
-          <Input
-            id="d-retention"
-            type="number"
-            min={1}
-            value={form.retentionDays}
-            onChange={(e) => onChange('retentionDays', Number(e.target.value))}
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="d-size">存储容量</Label>
-          <Input
-            id="d-size"
-            value={form.storageSize}
-            onChange={(e) => onChange('storageSize', e.target.value)}
-            placeholder="10Gi"
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label htmlFor="d-cpu">CPU</Label>
-          <Input
-            id="d-cpu"
-            value={form.resourcesCPU}
-            onChange={(e) => onChange('resourcesCPU', e.target.value)}
-            placeholder="500m"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="d-mem">内存</Label>
-          <Input
-            id="d-mem"
-            value={form.resourcesMem}
-            onChange={(e) => onChange('resourcesMem', e.target.value)}
-            placeholder="512Mi"
-          />
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <Switch
-          id="d-auth"
-          checked={form.authEnabled}
-          onCheckedChange={(v) => onChange('authEnabled', v)}
-        />
-        <Label htmlFor="d-auth">启用多租户鉴权</Label>
-      </div>
-
-      <Button
-        type="submit"
-        className="w-full bg-emerald-600 hover:bg-emerald-700"
-        disabled={submitting}
-      >
-        {submitting ? '创建中...' : '创建部署'}
-      </Button>
-    </form>
-  )
-})
-
-export default Deployments
diff --git a/frontend/src/pages/Hosts.tsx b/frontend/src/pages/Hosts.tsx
deleted file mode 100644
index 33e1081..0000000
--- a/frontend/src/pages/Hosts.tsx
+++ /dev/null
@@ -1,633 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import {
-  Monitor,
-  Plus,
-  RefreshCw,
-  Trash2,
-  Eye,
-  Terminal,
-  Key,
-  Lock,
-} from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { Card, CardContent } from '@/components/ui/card'
-import { hostApi } from '@/api'
-import { StatusBadge } from '@/components/StatusBadge'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { EmptyState } from '@/components/EmptyState'
-import { PageHeader } from '@/components/PageHeader'
-import { toast } from 'sonner'
-import type { Host, HostInfo } from '@/types'
-
-// 使用率颜色阈值 - 常量提取
-const usageColor = (v: number) =>
-  v >= 90 ? 'bg-red-500' : v >= 70 ? 'bg-amber-500' : 'bg-emerald-500'
-
-/**
- * Hosts 页面 - 优化版本
- * 
- * 优化点：
- * 1. React.memo 包裹组件
- * 2. 所有操作函数使用 useCallback 缓存
- * 3. alert() 替换为 sonner toast
- * 4. setTimeout 使用 ref 管理
- * 5. 使用公共组件替代重复代码
- */
-const Hosts = memo(function Hosts() {
-  const [hosts, setHosts] = useState<Host[]>([])
-  const [loading, setLoading] = useState(true)
-  const [open, setOpen] = useState(false)
-  const [detailOpen, setDetailOpen] = useState(false)
-  const [terminalOpen, setTerminalOpen] = useState(false)
-  const [selectedHost, setSelectedHost] = useState<Host | null>(null)
-  const [hostInfo, setHostInfo] = useState<HostInfo | null>(null)
-  const [validating, setValidating] = useState<number | null>(null)
-
-  // Terminal state
-  const [command, setCommand] = useState('')
-  const [terminalOutput, setTerminalOutput] = useState('')
-  const [executing, setExecuting] = useState(false)
-
-  // Form state
-  const [name, setName] = useState('')
-  const [hostIP, setHostIP] = useState('')
-  const [port, setPort] = useState(22)
-  const [user, setUser] = useState('root')
-  const [authType, setAuthType] = useState<'password' | 'key'>('password')
-  const [password, setPassword] = useState('')
-  const [privateKey, setPrivateKey] = useState('')
-  const [keyPhrase, setKeyPhrase] = useState('')
-  const [labels, setLabels] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-
-  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
-
-  useEffect(() => {
-    return () => {
-      timeoutsRef.current.forEach((id) => clearTimeout(id))
-    }
-  }, [])
-
-  const addTimeout = useCallback((cb: () => void, delay: number) => {
-    const id = setTimeout(cb, delay)
-    timeoutsRef.current.push(id)
-    return id
-  }, [])
-
-  const loadHosts = useCallback(async () => {
-    try {
-      const res = await hostApi.list(1, 100)
-      setHosts(res.list)
-    } catch (err) {
-      console.error('Failed to load hosts:', err)
-      toast.error('加载主机数据失败')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    loadHosts()
-  }, [loadHosts])
-
-  const resetForm = useCallback(() => {
-    setName('')
-    setHostIP('')
-    setPort(22)
-    setUser('root')
-    setAuthType('password')
-    setPassword('')
-    setPrivateKey('')
-    setKeyPhrase('')
-    setLabels('')
-  }, [])
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      setSubmitting(true)
-      try {
-        await hostApi.create({
-          name,
-          hostIP,
-          port,
-          user,
-          authType,
-          password: authType === 'password' ? password : undefined,
-          privateKey: authType === 'key' ? privateKey : undefined,
-          keyPhrase: authType === 'key' ? keyPhrase : undefined,
-          labels,
-        })
-        setOpen(false)
-        resetForm()
-        loadHosts()
-        toast.success('主机添加成功')
-      } catch (err: unknown) {
-        const message = err instanceof Error ? err.message : '添加主机失败'
-        toast.error(message)
-      } finally {
-        setSubmitting(false)
-      }
-    },
-    [name, hostIP, port, user, authType, password, privateKey, keyPhrase, labels, resetForm, loadHosts]
-  )
-
-  const handleDelete = useCallback(
-    async (id: number) => {
-      if (!confirm('确定删除此主机？')) return
-      try {
-        await hostApi.remove(id)
-        loadHosts()
-        toast.success('主机已删除')
-      } catch (err) {
-        console.error('Failed to delete host:', err)
-        toast.error('删除主机失败')
-      }
-    },
-    [loadHosts]
-  )
-
-  const handleValidate = useCallback(
-    async (id: number) => {
-      setValidating(id)
-      try {
-        await hostApi.validate(id)
-        addTimeout(loadHosts, 3000)
-        toast.success('验证指令已发送')
-      } catch (err) {
-        console.error('Failed to validate host:', err)
-        toast.error('验证失败')
-      } finally {
-        addTimeout(() => setValidating(null), 3000)
-      }
-    },
-    [loadHosts, addTimeout]
-  )
-
-  const viewHostInfo = useCallback(
-    async (host: Host) => {
-      setSelectedHost(host)
-      setHostInfo(null)
-      setDetailOpen(true)
-      try {
-        const info = await hostApi.getInfo(host.id)
-        setHostInfo(info)
-      } catch (err) {
-        console.error('Failed to get host info:', err)
-        toast.error('加载主机详情失败')
-      }
-    },
-    []
-  )
-
-  const openTerminal = useCallback((host: Host) => {
-    setSelectedHost(host)
-    setTerminalOpen(true)
-    setTerminalOutput(`已连接到 ${host.name} (${host.hostIP})\n输入命令后按"执行"...\n`)
-    setCommand('')
-  }, [])
-
-  const executeCommand = useCallback(async () => {
-    if (!selectedHost || !command.trim()) return
-    setExecuting(true)
-    setTerminalOutput((prev) => prev + `\n$ ${command}\n`)
-    try {
-      const res = await hostApi.execute(selectedHost.id, command)
-      setTerminalOutput((prev) => prev + (res.stdout || '') + (res.stderr || '') + '\n')
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : '命令执行失败'
-      setTerminalOutput((prev) => prev + `错误：${message}\n`)
-    } finally {
-      setExecuting(false)
-      setCommand('')
-    }
-  }, [selectedHost, command])
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="主机管理"
-        description="管理用于二进制方式部署 Loki 的 SSH 主机"
-        action={
-          <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-              <Button className="bg-emerald-600 hover:bg-emerald-700">
-                <Plus className="w-4 h-4 mr-1" />
-                添加主机
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>添加 SSH 主机</DialogTitle>
-              </DialogHeader>
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="h-name">名称 *</Label>
-                    <Input
-                      id="h-name"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      placeholder="loki-server-1"
-                      required
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="h-ip">主机 IP *</Label>
-                    <Input
-                      id="h-ip"
-                      value={hostIP}
-                      onChange={(e) => setHostIP(e.target.value)}
-                      placeholder="192.168.1.100"
-                      required
-                    />
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="h-port">端口</Label>
-                    <Input
-                      id="h-port"
-                      type="number"
-                      value={port}
-                      onChange={(e) => setPort(Number(e.target.value))}
-                      placeholder="22"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="h-user">用户名 *</Label>
-                    <Input
-                      id="h-user"
-                      value={user}
-                      onChange={(e) => setUser(e.target.value)}
-                      placeholder="root"
-                      required
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label>认证方式</Label>
-                  <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
-                      <input
-                        type="radio"
-                        name="authType"
-                        value="password"
-                        checked={authType === 'password'}
-                        onChange={() => setAuthType('password')}
-                      />
-                      <Lock className="w-4 h-4" />
-                      <span className="text-sm">密码</span>
-                    </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
-                      <input
-                        type="radio"
-                        name="authType"
-                        value="key"
-                        checked={authType === 'key'}
-                        onChange={() => setAuthType('key')}
-                      />
-                      <Key className="w-4 h-4" />
-                      <span className="text-sm">SSH 密钥</span>
-                    </label>
-                  </div>
-                </div>
-
-                {authType === 'password' ? (
-                  <div className="space-y-2">
-                    <Label htmlFor="h-password">密码 *</Label>
-                    <Input
-                      id="h-password"
-                      type="password"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      placeholder="SSH 登录密码"
-                      required
-                    />
-                  </div>
-                ) : (
-                  <>
-                    <div className="space-y-2">
-                      <Label htmlFor="h-key">私钥 *</Label>
-                      <Textarea
-                        id="h-key"
-                        value={privateKey}
-                        onChange={(e) => setPrivateKey(e.target.value)}
-                        placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
-                        required
-                        className="min-h-[120px] font-mono text-xs"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="h-phrase">密钥口令（可选）</Label>
-                      <Input
-                        id="h-phrase"
-                        type="password"
-                        value={keyPhrase}
-                        onChange={(e) => setKeyPhrase(e.target.value)}
-                        placeholder="无口令则留空"
-                      />
-                    </div>
-                  </>
-                )}
-
-                <div className="space-y-2">
-                  <Label htmlFor="h-labels">标签（JSON）</Label>
-                  <Input
-                    id="h-labels"
-                    value={labels}
-                    onChange={(e) => setLabels(e.target.value)}
-                    placeholder='["loki", "logging"]'
-                  />
-                </div>
-
-                <Button
-                  type="submit"
-                  className="w-full bg-emerald-600 hover:bg-emerald-700"
-                  disabled={submitting}
-                >
-                  {submitting ? '添加中...' : '添加主机'}
-                </Button>
-              </form>
-            </DialogContent>
-          </Dialog>
-        }
-      />
-
-      {/* Hosts Grid */}
-      {loading ? (
-        <LoadingSpinner className="h-64" />
-      ) : hosts.length === 0 ? (
-        <EmptyState
-          icon={Monitor}
-          title="暂无主机"
-          description="添加第一台 SSH 主机开始使用"
-        />
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {hosts.map((host) => (
-            <HostCard
-              key={host.id}
-              host={host}
-              validating={validating}
-              onViewInfo={viewHostInfo}
-              onOpenTerminal={openTerminal}
-              onValidate={handleValidate}
-              onDelete={handleDelete}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Host Detail Dialog */}
-      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
-        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Monitor className="w-5 h-5 text-purple-500" />
-              {selectedHost?.name}
-            </DialogTitle>
-          </DialogHeader>
-          {hostInfo ? (
-            <HostDetail info={hostInfo} />
-          ) : (
-            <LoadingSpinner className="h-32" />
-          )}
-        </DialogContent>
-      </Dialog>
-
-      {/* Terminal Dialog */}
-      <Dialog open={terminalOpen} onOpenChange={setTerminalOpen}>
-        <DialogContent className="max-w-4xl">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Terminal className="w-5 h-5 text-emerald-500" />
-              终端 - {selectedHost?.name}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="bg-slate-900 text-green-400 font-mono text-xs p-4 rounded-lg h-80 overflow-auto whitespace-pre-wrap">
-              {terminalOutput}
-            </div>
-            <div className="flex gap-2">
-              <Input
-                value={command}
-                onChange={(e) => setCommand(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && executeCommand()}
-                placeholder="输入命令..."
-                className="flex-1 font-mono text-sm"
-                disabled={executing}
-              />
-              <Button
-                onClick={executeCommand}
-                disabled={executing || !command.trim()}
-                className="bg-emerald-600 hover:bg-emerald-700"
-              >
-                {executing ? '执行中...' : '执行'}
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-})
-
-// 子组件：主机卡片
-interface HostCardProps {
-  host: Host
-  validating: number | null
-  onViewInfo: (h: Host) => void
-  onOpenTerminal: (h: Host) => void
-  onValidate: (id: number) => void
-  onDelete: (id: number) => void
-}
-
-const HostCard = memo(function HostCard({
-  host,
-  validating,
-  onViewInfo,
-  onOpenTerminal,
-  onValidate,
-  onDelete,
-}: HostCardProps) {
-  return (
-    <Card className="border-slate-200 dark:border-slate-800 hover:shadow-md transition-shadow">
-      <CardContent className="p-5">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex items-center gap-2 min-w-0">
-            <Monitor className="w-5 h-5 text-purple-500 flex-shrink-0" />
-            <h3 className="font-semibold text-slate-800 dark:text-white truncate">
-              {host.name}
-            </h3>
-          </div>
-          <StatusBadge status={host.status} />
-        </div>
-
-        <div className="space-y-1.5 text-xs text-slate-500 mb-4">
-          <InfoRow label="IP 地址" value={`${host.hostIP}:${host.port}`} />
-          <InfoRow label="用户名" value={host.user} />
-          <InfoRow
-            label="认证方式"
-            value={host.authType === 'key' ? 'SSH 密钥' : '密码'}
-          />
-          <InfoRow
-            label="系统"
-            value={`${host.os || '未知'} (${host.arch || '未知'})`}
-          />
-        </div>
-
-        <div className="flex gap-2 pt-3 border-t border-slate-100 dark:border-slate-800">
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onViewInfo(host)}
-          >
-            <Eye className="w-3 h-3 mr-1" />
-            详情
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onOpenTerminal(host)}
-          >
-            <Terminal className="w-3 h-3 mr-1" />
-            终端
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="text-xs"
-            onClick={() => onValidate(host.id)}
-            disabled={validating === host.id}
-          >
-            <RefreshCw
-              className={`w-3 h-3 ${validating === host.id ? 'animate-spin' : ''}`}
-            />
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="text-red-500 hover:text-red-600 hover:bg-red-50"
-            onClick={() => onDelete(host.id)}
-          >
-            <Trash2 className="w-3 h-3" />
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-})
-
-// 子组件：信息行
-const InfoRow = memo(function InfoRow({
-  label,
-  value,
-}: {
-  label: string
-  value: string
-}) {
-  return (
-    <div className="flex justify-between">
-      <span>{label}</span>
-      <span className="font-medium text-slate-700 dark:text-slate-300">{value}</span>
-    </div>
-  )
-})
-
-// 子组件：主机详情
-const HostDetail = memo(function HostDetail({ info }: { info: HostInfo }) {
-  return (
-    <div className="space-y-5">
-      {/* 资源使用率 */}
-      <div>
-        <h4 className="text-sm font-semibold mb-3">资源使用率</h4>
-        <div className="space-y-3">
-          <UsageBar label="CPU" value={info.cpuUsage} />
-          <UsageBar
-            label="内存"
-            value={info.memUsage}
-            detail={`${info.memUsed} / ${info.memTotal}`}
-          />
-          <UsageBar
-            label="磁盘"
-            value={info.diskUsage}
-            detail={`${info.diskUsed} / ${info.diskTotal}`}
-          />
-        </div>
-      </div>
-
-      {/* 基本信息 */}
-      <div>
-        <h4 className="text-sm font-semibold mb-3">基本信息</h4>
-        <div className="grid grid-cols-2 gap-3">
-          <InfoCard label="主机名" value={info.hostname || '未知'} />
-          <InfoCard label="系统" value={`${info.os || '未知'} ${info.version}`} />
-          <InfoCard label="架构" value={info.arch || '未知'} />
-          <InfoCard label="内核" value={info.kernel || '未知'} />
-          <InfoCard label="CPU 核数" value={info.cpu || '未知'} />
-          <InfoCard label="运行时长" value={info.uptime || '未知'} />
-        </div>
-      </div>
-    </div>
-  )
-})
-
-// 使用率进度条
-const UsageBar = memo(function UsageBar({
-  label,
-  value,
-  detail,
-}: {
-  label: string
-  value: number
-  detail?: string
-}) {
-  return (
-    <div>
-      <div className="flex justify-between text-xs mb-1">
-        <span className="text-slate-500">{label}</span>
-        <span className="font-medium">
-          {value.toFixed(1)}% {detail && `（${detail}）`}
-        </span>
-      </div>
-      <div className="h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
-        <div
-          className={`h-full ${usageColor(value)} rounded-full transition-all`}
-          style={{ width: `${Math.min(value, 100)}%` }}
-        />
-      </div>
-    </div>
-  )
-})
-
-// 信息卡片
-const InfoCard = memo(function InfoCard({
-  label,
-  value,
-}: {
-  label: string
-  value: string
-}) {
-  return (
-    <div className="p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg">
-      <p className="text-xs text-slate-500">{label}</p>
-      <p className="text-sm font-medium truncate">{value}</p>
-    </div>
-  )
-})
-
-export default Hosts
diff --git a/frontend/src/pages/Storage.tsx b/frontend/src/pages/Storage.tsx
deleted file mode 100644
index d7b8537..0000000
--- a/frontend/src/pages/Storage.tsx
+++ /dev/null
@@ -1,438 +0,0 @@
-import { memo, useCallback, useEffect, useState } from 'react'
-import {
-  HardDrive,
-  Plus,
-  Trash2,
-  Star,
-  Cloud,
-  Database,
-  Package,
-} from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { Card, CardContent } from '@/components/ui/card'
-import { storageApi } from '@/api'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { EmptyState } from '@/components/EmptyState'
-import { PageHeader } from '@/components/PageHeader'
-import { toast } from 'sonner'
-import type { StorageConfig } from '@/types'
-
-// 存储类型图标映射 - 常量提取
-const STORAGE_TYPE_ICONS: Record<string, React.ReactNode> = {
-  s3: <Cloud className="w-5 h-5 text-orange-500" />,
-  oss: <Cloud className="w-5 h-5 text-red-500" />,
-  minio: <Database className="w-5 h-5 text-blue-500" />,
-  rustfs: <Package className="w-5 h-5 text-cyan-500" />,
-}
-
-// 存储类型颜色
-const STORAGE_TYPE_COLORS: Record<string, string> = {
-  s3: 'bg-orange-100 text-orange-700',
-  oss: 'bg-red-100 text-red-700',
-  minio: 'bg-blue-100 text-blue-700',
-  rustfs: 'bg-cyan-100 text-cyan-700',
-}
-
-const STORAGE_TYPES = ['s3', 'oss', 'minio', 'rustfs'] as const
-
-/**
- * Storage 页面 - 优化版本
- * 
- * 优化点：
- * 1. React.memo 包裹组件
- * 2. 所有操作函数使用 useCallback 缓存
- * 3. alert() 替换为 sonner toast
- * 4. 使用公共组件替代重复代码
- * 5. 常量图标和颜色映射提取
- */
-const Storage = memo(function Storage() {
-  const [storages, setStorages] = useState<StorageConfig[]>([])
-  const [loading, setLoading] = useState(true)
-  const [open, setOpen] = useState(false)
-
-  // Form state
-  const [name, setName] = useState('')
-  const [storageType, setStorageType] = useState<'s3' | 'oss' | 'minio' | 'rustfs'>('minio')
-  const [endpoint, setEndpoint] = useState('')
-  const [bucket, setBucket] = useState('')
-  const [region, setRegion] = useState('')
-  const [accessKey, setAccessKey] = useState('')
-  const [secretKey, setSecretKey] = useState('')
-  const [pathPrefix, setPathPrefix] = useState('loki')
-  const [insecure, setInsecure] = useState(false)
-  const [isDefault, setIsDefault] = useState(false)
-  const [submitting, setSubmitting] = useState(false)
-
-  const loadStorages = useCallback(async () => {
-    try {
-      const res = await storageApi.list(1, 100)
-      setStorages(res.list)
-    } catch (err) {
-      console.error('Failed to load storages:', err)
-      toast.error('加载存储配置失败')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    loadStorages()
-  }, [loadStorages])
-
-  const resetForm = useCallback(() => {
-    setName('')
-    setStorageType('minio')
-    setEndpoint('')
-    setBucket('')
-    setRegion('')
-    setAccessKey('')
-    setSecretKey('')
-    setPathPrefix('loki')
-    setInsecure(false)
-    setIsDefault(false)
-  }, [])
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      setSubmitting(true)
-      try {
-        await storageApi.create({
-          name,
-          storageType,
-          endpoint,
-          bucket,
-          region,
-          accessKey,
-          secretKey,
-          pathPrefix,
-          insecure,
-          isDefault,
-        })
-        setOpen(false)
-        resetForm()
-        loadStorages()
-        toast.success('存储配置添加成功')
-      } catch (err: unknown) {
-        const message = err instanceof Error ? err.message : '创建存储配置失败'
-        toast.error(message)
-      } finally {
-        setSubmitting(false)
-      }
-    },
-    [name, storageType, endpoint, bucket, region, accessKey, secretKey, pathPrefix, insecure, isDefault, resetForm, loadStorages]
-  )
-
-  const handleDelete = useCallback(
-    async (id: number) => {
-      if (!confirm('确定删除此存储配置？')) return
-      try {
-        await storageApi.remove(id)
-        loadStorages()
-        toast.success('存储配置已删除')
-      } catch (err) {
-        console.error('Failed to delete storage:', err)
-        toast.error('删除存储配置失败')
-      }
-    },
-    [loadStorages]
-  )
-
-  const handleSetDefault = useCallback(
-    async (id: number) => {
-      try {
-        await storageApi.update(id, { isDefault: true })
-        loadStorages()
-        toast.success('已设为默认存储')
-      } catch (err) {
-        console.error('Failed to set default storage:', err)
-        toast.error('设置默认存储失败')
-      }
-    },
-    [loadStorages]
-  )
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="存储配置"
-        description="为 Loki 配置对象存储后端"
-        action={
-          <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-              <Button className="bg-emerald-600 hover:bg-emerald-700">
-                <Plus className="w-4 h-4 mr-1" />
-                添加存储
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>添加存储配置</DialogTitle>
-              </DialogHeader>
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="s-name">名称 *</Label>
-                  <Input
-                    id="s-name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    placeholder="production-minio"
-                    required
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label>存储类型</Label>
-                  <div className="grid grid-cols-4 gap-2">
-                    {STORAGE_TYPES.map((type) => (
-                      <button
-                        key={type}
-                        type="button"
-                        onClick={() => setStorageType(type)}
-                        className={`flex flex-col items-center gap-1 p-3 rounded-lg border transition-all ${
-                          storageType === type
-                            ? 'border-emerald-500 bg-emerald-50 text-emerald-700'
-                            : 'border-slate-200 hover:border-slate-300 text-slate-600'
-                        }`}
-                      >
-                        {STORAGE_TYPE_ICONS[type]}
-                        <span className="text-xs font-medium uppercase">{type}</span>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="s-endpoint">访问地址</Label>
-                  <Input
-                    id="s-endpoint"
-                    value={endpoint}
-                    onChange={(e) => setEndpoint(e.target.value)}
-                    placeholder={
-                      storageType === 's3'
-                        ? 's3.amazonaws.com'
-                        : storageType === 'minio'
-                        ? 'http://minio.example.com:9000'
-                        : ''
-                    }
-                  />
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="s-bucket">Bucket *</Label>
-                    <Input
-                      id="s-bucket"
-                      value={bucket}
-                      onChange={(e) => setBucket(e.target.value)}
-                      placeholder="loki-logs"
-                      required
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="s-region">区域</Label>
-                    <Input
-                      id="s-region"
-                      value={region}
-                      onChange={(e) => setRegion(e.target.value)}
-                      placeholder="us-east-1"
-                    />
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="s-access">Access Key</Label>
-                    <Input
-                      id="s-access"
-                      value={accessKey}
-                      onChange={(e) => setAccessKey(e.target.value)}
-                      placeholder="minioadmin"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="s-secret">Secret Key</Label>
-                    <Input
-                      id="s-secret"
-                      type="password"
-                      value={secretKey}
-                      onChange={(e) => setSecretKey(e.target.value)}
-                      placeholder="minioadmin"
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="s-prefix">路径前缀</Label>
-                  <Input
-                    id="s-prefix"
-                    value={pathPrefix}
-                    onChange={(e) => setPathPrefix(e.target.value)}
-                    placeholder="loki"
-                  />
-                </div>
-
-                <div className="flex gap-6">
-                  <div className="flex items-center gap-2">
-                    <Switch
-                      id="s-insecure"
-                      checked={insecure}
-                      onCheckedChange={setInsecure}
-                    />
-                    <Label htmlFor="s-insecure">不加密 (HTTP)</Label>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Switch
-                      id="s-default"
-                      checked={isDefault}
-                      onCheckedChange={setIsDefault}
-                    />
-                    <Label htmlFor="s-default">设为默认</Label>
-                  </div>
-                </div>
-
-                <Button
-                  type="submit"
-                  className="w-full bg-emerald-600 hover:bg-emerald-700"
-                  disabled={submitting}
-                >
-                  {submitting ? '添加中...' : '添加存储'}
-                </Button>
-              </form>
-            </DialogContent>
-          </Dialog>
-        }
-      />
-
-      {/* Storage Grid */}
-      {loading ? (
-        <LoadingSpinner className="h-64" />
-      ) : storages.length === 0 ? (
-        <EmptyState
-          icon={HardDrive}
-          title="暂无存储配置"
-          description="添加第一个 Loki 存储后端"
-        />
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {storages.map((storage) => (
-            <StorageCard
-              key={storage.id}
-              storage={storage}
-              onSetDefault={handleSetDefault}
-              onDelete={handleDelete}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-})
-
-// 子组件：存储卡片
-interface StorageCardProps {
-  storage: StorageConfig
-  onSetDefault: (id: number) => void
-  onDelete: (id: number) => void
-}
-
-const StorageCard = memo(function StorageCard({
-  storage,
-  onSetDefault,
-  onDelete,
-}: StorageCardProps) {
-  return (
-    <Card
-      className={`border-slate-200 dark:border-slate-800 hover:shadow-md transition-shadow ${
-        storage.isDefault ? 'ring-1 ring-emerald-500' : ''
-      }`}
-    >
-      <CardContent className="p-5">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex items-center gap-2 min-w-0">
-            {STORAGE_TYPE_ICONS[storage.storageType] || (
-              <HardDrive className="w-5 h-5 text-slate-400" />
-            )}
-            <h3 className="font-semibold text-slate-800 dark:text-white truncate">
-              {storage.name}
-            </h3>
-          </div>
-          <div className="flex items-center gap-1 flex-shrink-0">
-            {storage.isDefault && (
-              <span className="px-1.5 py-0.5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium flex items-center gap-0.5">
-                <Star className="w-3 h-3" />
-                默认
-              </span>
-            )}
-            <span
-              className={`px-2 py-0.5 rounded-full text-xs font-medium uppercase ${
-                STORAGE_TYPE_COLORS[storage.storageType] || 'bg-slate-100 text-slate-600'
-              }`}
-            >
-              {storage.storageType}
-            </span>
-          </div>
-        </div>
-
-        <div className="space-y-1.5 text-xs text-slate-500 mb-4">
-          <InfoRow label="访问地址" value={storage.endpoint || '默认'} />
-          <InfoRow label="Bucket" value={storage.bucket} />
-          <InfoRow label="区域" value={storage.region || '无'} />
-          <InfoRow label="路径前缀" value={storage.pathPrefix || '无'} />
-          <InfoRow label="不加密" value={storage.insecure ? '是' : '否'} />
-        </div>
-
-        <div className="flex gap-2 pt-3 border-t border-slate-100 dark:border-slate-800">
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onSetDefault(storage.id)}
-            disabled={storage.isDefault}
-          >
-            <Star className="w-3 h-3 mr-1" />
-            {storage.isDefault ? '默认' : '设为默认'}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="text-red-500 hover:text-red-600 hover:bg-red-50"
-            onClick={() => onDelete(storage.id)}
-          >
-            <Trash2 className="w-3 h-3" />
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-})
-
-// 子组件：信息行
-const InfoRow = memo(function InfoRow({
-  label,
-  value,
-}: {
-  label: string
-  value: string
-}) {
-  return (
-    <div className="flex justify-between">
-      <span>{label}</span>
-      <span className="font-medium text-slate-700 dark:text-slate-300 truncate max-w-[150px]">
-        {value}
-      </span>
-    </div>
-  )
-})
-
-export default Storage
diff --git a/frontend/src/pages/clusters/components/ClusterCard.tsx b/frontend/src/pages/clusters/components/ClusterCard.tsx
new file mode 100644
index 0000000..00f05a8
--- /dev/null
+++ b/frontend/src/pages/clusters/components/ClusterCard.tsx
@@ -0,0 +1,101 @@
+import { memo } from 'react'
+import { Server, RefreshCw, Trash2, Eye } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { StatusBadge } from '@/components/StatusBadge'
+import { InfoRow } from '@/components/InfoRow'
+import type { Cluster } from '@/types'
+
+interface ClusterCardProps {
+  cluster: Cluster
+  validating: number | null
+  onViewInfo: (c: Cluster) => void
+  onValidate: (id: number) => void
+  onDelete: (c: Cluster) => void
+}
+
+/** 集群卡片 — 列表项展示与操作入口 */
+export const ClusterCard = memo(function ClusterCard({
+  cluster,
+  validating,
+  onViewInfo,
+  onValidate,
+  onDelete,
+}: ClusterCardProps) {
+  return (
+    <Card className="border-border hover:shadow-md transition-shadow">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <Server className="w-5 h-5 text-info flex-shrink-0" />
+            <h3 className="font-semibold text-foreground truncate">
+              {cluster.name}
+            </h3>
+          </div>
+          <StatusBadge status={cluster.status} />
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+          {cluster.description || '无描述'}
+        </p>
+
+        <div className="space-y-1.5 text-xs text-muted-foreground mb-4">
+          <InfoRow
+            label="接入方式"
+            value={cluster.configType === 'token' ? 'Token' : 'Kubeconfig'}
+          />
+          {cluster.apiServer && (
+            <InfoRow
+              label="API Server"
+              value={cluster.apiServer}
+              valueClass="truncate max-w-[150px]"
+            />
+          )}
+          <InfoRow label="版本" value={cluster.version || '未知'} />
+          <InfoRow label="节点数" value={String(cluster.nodesCount || 0)} />
+          <InfoRow
+            label="最后连接"
+            value={
+              cluster.lastConnected
+                ? new Date(cluster.lastConnected).toLocaleString()
+                : '从未'
+            }
+          />
+        </div>
+
+        <div className="flex gap-2 pt-3 border-t border-border">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onViewInfo(cluster)}
+          >
+            <Eye className="w-3 h-3 mr-1" />
+            详情
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onValidate(cluster.id)}
+            disabled={validating === cluster.id}
+          >
+            <RefreshCw
+              className={`w-3 h-3 mr-1 ${validating === cluster.id ? 'animate-spin' : ''}`}
+            />
+            验证
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={`删除集群 ${cluster.name}`}
+            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            onClick={() => onDelete(cluster)}
+          >
+            <Trash2 className="w-3 h-3" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/clusters/components/ClusterDetailDialog.tsx b/frontend/src/pages/clusters/components/ClusterDetailDialog.tsx
new file mode 100644
index 0000000..312d80c
--- /dev/null
+++ b/frontend/src/pages/clusters/components/ClusterDetailDialog.tsx
@@ -0,0 +1,137 @@
+import { memo, useEffect, useState } from 'react'
+import { Server } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { clusterApi } from '@/api'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { ErrorState } from '@/components/ErrorState'
+import type { Cluster, ClusterInfo } from '@/types'
+
+interface ClusterDetailDialogProps {
+  cluster: Cluster | null
+  onClose: () => void
+}
+
+/** 集群详情弹窗 — 自负责拉取集群信息（打开即加载，卸载取消语义由加载态覆盖） */
+export const ClusterDetailDialog = memo(function ClusterDetailDialog({
+  cluster,
+  onClose,
+}: ClusterDetailDialogProps) {
+  const [info, setInfo] = useState<ClusterInfo | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!cluster) return
+    let cancelled = false
+    clusterApi
+      .getInfo(cluster.id)
+      .then((data) => {
+        if (!cancelled) setInfo(data)
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : '加载集群详情失败')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [cluster])
+
+  return (
+    <Dialog open={cluster !== null} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Server className="w-5 h-5 text-info" />
+            {cluster?.name}
+          </DialogTitle>
+        </DialogHeader>
+
+        {error ? (
+          <ErrorState message={error} />
+        ) : info ? (
+          <ClusterDetail info={info} />
+        ) : (
+          <LoadingSpinner className="h-32" />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+/** 集群详情内容：版本/上下文/节点/命名空间 */
+const ClusterDetail = memo(function ClusterDetail({ info }: { info: ClusterInfo }) {
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="p-3 bg-muted rounded-lg">
+          <p className="text-xs text-muted-foreground">版本</p>
+          <p className="text-sm font-medium">{info.version || '未知'}</p>
+        </div>
+        <div className="p-3 bg-muted rounded-lg">
+          <p className="text-xs text-muted-foreground">当前上下文</p>
+          <p className="text-sm font-medium">{info.currentContext || '默认'}</p>
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-semibold mb-2">节点（{info.nodes.length}）</h4>
+        <div className="space-y-2">
+          {info.nodes.map((node) => (
+            <div
+              key={node.name}
+              className="p-3 border border-border rounded-lg"
+            >
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-sm">{node.name}</span>
+                <span
+                  className={`px-2 py-0.5 rounded-full text-xs ${
+                    node.status === 'Ready'
+                      ? 'bg-success/10 text-primary'
+                      : 'bg-destructive/10 text-destructive'
+                  }`}
+                >
+                  {node.status === 'Ready' ? '就绪' : '未就绪'}
+                </span>
+              </div>
+              <div className="grid grid-cols-3 gap-2 mt-2 text-xs text-muted-foreground">
+                <span>IP：{node.internalIP}</span>
+                <span>系统：{node.os}/{node.arch}</span>
+                <span>版本：{node.version}</span>
+              </div>
+              {node.roles.length > 0 && (
+                <div className="flex gap-1 mt-2">
+                  {node.roles.map((role) => (
+                    <span
+                      key={role}
+                      className="px-1.5 py-0.5 bg-info/10 text-info rounded text-xs"
+                    >
+                      {role}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-semibold mb-2">命名空间</h4>
+        <div className="flex flex-wrap gap-1">
+          {info.namespaces.map((ns) => (
+            <span
+              key={ns}
+              className="px-2 py-0.5 bg-muted rounded text-xs"
+            >
+              {ns}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+})
diff --git a/frontend/src/pages/clusters/components/ClusterFormDialog.tsx b/frontend/src/pages/clusters/components/ClusterFormDialog.tsx
new file mode 100644
index 0000000..762c30f
--- /dev/null
+++ b/frontend/src/pages/clusters/components/ClusterFormDialog.tsx
@@ -0,0 +1,263 @@
+import { memo, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Key, FileKey } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { clusterApi } from '@/api'
+import { toast } from 'sonner'
+
+// 从 kubeconfig 文本自动提取 server 地址
+const parseApiServer = (kubeconfig: string): string => {
+  const m = kubeconfig.match(/^\s*server:\s*(\S+)/m)
+  return m ? m[1] : ''
+}
+
+// 表单 schema：zod 为唯一校验源，消息中文且具体
+const clusterFormSchema = z
+  .object({
+    name: z.string().min(1, '请输入集群名称'),
+    description: z.string().optional(),
+    configType: z.enum(['kubeconfig', 'token']),
+    kubeconfig: z.string().optional(),
+    apiServer: z.string().optional(),
+    token: z.string().optional(),
+    context: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.configType === 'kubeconfig' && !data.kubeconfig?.trim()) {
+      ctx.addIssue({ code: 'custom', path: ['kubeconfig'], message: '请填写 kubeconfig 内容' })
+    }
+    if (data.configType === 'token') {
+      if (!data.apiServer?.trim()) {
+        ctx.addIssue({ code: 'custom', path: ['apiServer'], message: '请填写 API Server 地址' })
+      }
+      if (!data.token?.trim()) {
+        ctx.addIssue({ code: 'custom', path: ['token'], message: '请填写 Token' })
+      }
+    }
+  })
+
+type ClusterFormValues = z.infer<typeof clusterFormSchema>
+
+const DEFAULT_VALUES: ClusterFormValues = {
+  name: '',
+  description: '',
+  configType: 'kubeconfig',
+  kubeconfig: '',
+  apiServer: '',
+  token: '',
+  context: '',
+}
+
+interface ClusterFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 创建成功回调（父级刷新列表并关闭弹窗） */
+  onCreated: () => void
+}
+
+/** 添加集群弹窗 — react-hook-form + zod，自包含表单逻辑，页面只传开关与回调 */
+export const ClusterFormDialog = memo(function ClusterFormDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: ClusterFormDialogProps) {
+  const [submitting, setSubmitting] = useState(false)
+
+  const form = useForm<ClusterFormValues>({
+    resolver: zodResolver(clusterFormSchema),
+    defaultValues: DEFAULT_VALUES,
+  })
+  const configType = form.watch('configType')
+  const kubeconfig = form.watch('kubeconfig')
+
+  // 打开时重置（编辑回填/关闭重置时机明确）
+  useEffect(() => {
+    if (open) {
+      form.reset(DEFAULT_VALUES)
+    }
+  }, [open, form])
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    setSubmitting(true)
+    try {
+      await clusterApi.create({
+        name: values.name,
+        description: values.description,
+        configType: values.configType,
+        apiServer: values.configType === 'token' ? values.apiServer : undefined,
+        kubeconfig: values.configType === 'kubeconfig' ? values.kubeconfig : undefined,
+        token: values.configType === 'token' ? values.token : undefined,
+        context: values.context,
+      })
+      onOpenChange(false)
+      onCreated()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '创建集群失败')
+    } finally {
+      setSubmitting(false)
+    }
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>添加 Kubernetes 集群</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>集群名称 *</FormLabel>
+                  <FormControl>
+                    <Input placeholder="production-cluster" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>描述</FormLabel>
+                  <FormControl>
+                    <Input placeholder="生产环境日志集群" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormItem>
+              <FormLabel>接入方式</FormLabel>
+              <FormControl>
+                <Tabs
+                  value={configType}
+                  onValueChange={(v) =>
+                    form.setValue('configType', v as ClusterFormValues['configType'])
+                  }
+                >
+                  <TabsList>
+                    <TabsTrigger value="kubeconfig">
+                      <FileKey className="w-3.5 h-3.5 mr-1" /> Kubeconfig
+                    </TabsTrigger>
+                    <TabsTrigger value="token">
+                      <Key className="w-3.5 h-3.5 mr-1" /> Token
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="kubeconfig" className="space-y-2 pt-2">
+                    <FormField
+                      control={form.control}
+                      name="kubeconfig"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Kubeconfig 内容 *</FormLabel>
+                          <FormControl>
+                            <Textarea
+                              placeholder="粘贴 kubeconfig YAML（自动识别 API Server）..."
+                              className="min-h-[200px] font-mono text-xs"
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    {kubeconfig && parseApiServer(kubeconfig) && (
+                      <p className="text-xs text-primary">
+                        已识别 API Server：{parseApiServer(kubeconfig)}
+                      </p>
+                    )}
+                  </TabsContent>
+                  <TabsContent value="token" className="space-y-2 pt-2">
+                    <FormField
+                      control={form.control}
+                      name="apiServer"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>API Server *</FormLabel>
+                          <FormControl>
+                            <Input placeholder="https://10.0.0.1:6443" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="token"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Token *</FormLabel>
+                          <FormControl>
+                            <Textarea
+                              placeholder="粘贴 Service Account Token..."
+                              className="min-h-[120px] font-mono text-xs"
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                          <p className="text-xs text-muted-foreground">
+                            采用 insecure 模式，便于内网/自签证书集群接入
+                          </p>
+                        </FormItem>
+                      )}
+                    />
+                  </TabsContent>
+                </Tabs>
+              </FormControl>
+            </FormItem>
+
+            {configType === 'kubeconfig' && (
+              <FormField
+                control={form.control}
+                name="context"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>上下文（可选）</FormLabel>
+                    <FormControl>
+                      <Input placeholder="留空则使用默认上下文" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <Button
+              type="submit"
+              className="w-full bg-primary hover:bg-primary/90"
+              disabled={submitting}
+            >
+              {submitting ? '添加中...' : '添加集群'}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/clusters/index.tsx b/frontend/src/pages/clusters/index.tsx
new file mode 100644
index 0000000..1065c63
--- /dev/null
+++ b/frontend/src/pages/clusters/index.tsx
@@ -0,0 +1,164 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { Server, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { clusterApi, deploymentApi, collectorApi } from '@/api'
+import { PageContainer } from '@/components/PageContainer'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { EmptyState } from '@/components/EmptyState'
+import { ErrorState } from '@/components/ErrorState'
+import { PaginationBar } from '@/components/PaginationBar'
+import { ConfirmDialog } from '@/components/ConfirmDialog'
+import { toast } from 'sonner'
+import { useListQuery } from '@/hooks/useListQuery'
+import type { Cluster } from '@/types'
+import { ClusterCard } from './components/ClusterCard'
+import { ClusterFormDialog } from './components/ClusterFormDialog'
+import { ClusterDetailDialog } from './components/ClusterDetailDialog'
+
+/**
+ * 集群管理页 — 只做编排：数据走 useListQuery（取消+版本号），
+ * 卡片/表单/详情/删除确认均为域内子组件。成功操作静默（列表刷新即反馈）。
+ */
+const ClustersPage = memo(function ClustersPage() {
+  const query = useListQuery<Cluster>((params, signal) =>
+    clusterApi.list(params, { signal })
+  )
+
+  const [formOpen, setFormOpen] = useState(false)
+  const [detailCluster, setDetailCluster] = useState<Cluster | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<Cluster | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [validating, setValidating] = useState<number | null>(null)
+
+  // 验证后延时刷新列表的定时器（卸载清理）
+  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
+  useEffect(() => {
+    const timers = timeoutsRef.current
+    return () => {
+      timers.forEach((id) => clearTimeout(id))
+    }
+  }, [])
+
+  // 删除保护:引用检查(部署/采集器仍指向该集群时警告)
+  const [refCount, setRefCount] = useState<{ dep: number; col: number }>({ dep: 0, col: 0 })
+  useEffect(() => {
+    if (!deleteTarget) return
+    Promise.all([
+      deploymentApi.list({ page: 1, pageSize: 100 }),
+      collectorApi.list({ page: 1, pageSize: 100 }),
+    ]).then(([d, c]) => {
+      setRefCount({
+        dep: d.list.filter((x) => x.clusterID === deleteTarget.id).length,
+        col: c.list.filter((x) => x.clusterID === deleteTarget.id).length,
+      })
+    }).catch(() => setRefCount({ dep: 0, col: 0 }))
+  }, [deleteTarget])
+
+  const handleDelete = useCallback(async () => {
+    const id = deleteTarget?.id
+    if (!id) return
+    setDeleting(true)
+    try {
+      await clusterApi.remove(id)
+      setDeleteTarget(null)
+      query.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '删除集群失败')
+    } finally {
+      setDeleting(false)
+    }
+  }, [deleteTarget, query])
+
+  const handleValidate = useCallback(
+    async (id: number) => {
+      setValidating(id)
+      try {
+        await clusterApi.validate(id)
+        timeoutsRef.current.push(setTimeout(() => query.refresh(), 3000))
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : '验证失败')
+      } finally {
+        timeoutsRef.current.push(setTimeout(() => setValidating(null), 3000))
+      }
+    },
+    [query]
+  )
+
+  return (
+    <PageContainer
+      title="集群管理"
+      description="管理用于 Loki 部署的 Kubernetes 集群"
+      action={
+        <Button
+          className="bg-primary hover:bg-primary/90"
+          onClick={() => setFormOpen(true)}
+        >
+          <Plus className="w-4 h-4 mr-1" />
+          添加集群
+        </Button>
+      }
+    >
+      {query.loading ? (
+        <LoadingSpinner className="h-64" />
+      ) : query.error ? (
+        <ErrorState message={query.error} onRetry={query.refresh} />
+      ) : query.list.length === 0 ? (
+        <EmptyState
+          icon={Server}
+          title="暂无集群"
+          description="添加第一个 Kubernetes 集群开始使用"
+        />
+      ) : (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {query.list.map((cluster) => (
+              <ClusterCard
+                key={cluster.id}
+                cluster={cluster}
+                validating={validating}
+                onViewInfo={setDetailCluster}
+                onValidate={handleValidate}
+                onDelete={setDeleteTarget}
+              />
+            ))}
+          </div>
+          <PaginationBar
+            page={query.page}
+            pageSize={query.pageSize}
+            total={query.total}
+            onPageChange={query.setPage}
+          />
+        </>
+      )}
+
+      <ClusterFormDialog
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        onCreated={query.reload}
+      />
+
+      <ClusterDetailDialog
+        key={detailCluster?.id ?? 'none'}
+        cluster={detailCluster}
+        onClose={() => setDetailCluster(null)}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        name={deleteTarget?.name}
+        loading={deleting}
+        description={
+          refCount.dep + refCount.col > 0
+            ? `确定要删除「${deleteTarget?.name}」吗?警告:仍有 ${refCount.dep} 个部署、${refCount.col} 个采集策略引用该集群,删除后它们将无法工作。`
+            : undefined
+        }
+        onConfirm={handleDelete}
+      />
+    </PageContainer>
+  )
+})
+
+export default ClustersPage
diff --git a/frontend/src/pages/collectors/components/CollectorCard.tsx b/frontend/src/pages/collectors/components/CollectorCard.tsx
new file mode 100644
index 0000000..63b32ca
--- /dev/null
+++ b/frontend/src/pages/collectors/components/CollectorCard.tsx
@@ -0,0 +1,144 @@
+import { memo } from 'react'
+import {
+  RadioTower,
+  Trash2,
+  Upload,
+  Download,
+  Server,
+  Monitor,
+  Cloud,
+  type LucideIcon,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { StatusBadge } from '@/components/StatusBadge'
+import { InfoRow } from '@/components/InfoRow'
+import type { Collector } from '@/types'
+
+// 采集器类型元数据（图标 + 类型徽章配色）
+const COLLECTOR_TYPE_META: Record<string, { label: string; icon: LucideIcon; color: string }> = {
+  'host-promtail': { label: '主机 Promtail', icon: Monitor, color: 'bg-purple-100 text-purple-700' },
+  'k8s-daemonset': { label: 'K8s DaemonSet', icon: Cloud, color: 'bg-info/10 text-info' },
+  'k8s-fluentbit-sidecar': { label: 'K8s Sidecar', icon: Server, color: 'bg-cyan-100 text-cyan-700' },
+}
+
+const FALLBACK_META = { label: '', icon: RadioTower, color: 'bg-muted text-slate-600' }
+
+interface CollectorCardProps {
+  collector: Collector
+  /** 部署/卸载进行中的采集器 ID（按钮 loading 态） */
+  operating: number | null
+  onInstall: (id: number) => void
+  onUninstall: (id: number) => void
+  onDelete: (c: Collector) => void
+}
+
+/** 采集器卡片 — 列表项展示与操作入口（部署/卸载/删除） */
+export const CollectorCard = memo(function CollectorCard({
+  collector,
+  operating,
+  onInstall,
+  onUninstall,
+  onDelete,
+}: CollectorCardProps) {
+  const meta = COLLECTOR_TYPE_META[collector.type] ?? {
+    ...FALLBACK_META,
+    label: collector.type,
+  }
+  const Icon = meta.icon
+  const isBusy = operating === collector.id
+
+  return (
+    <Card className="border-border hover:shadow-md transition-shadow">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <Icon className="w-5 h-5 text-primary flex-shrink-0" />
+            <div className="min-w-0">
+              <h3 className="font-semibold text-foreground truncate">
+                {collector.name}
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                关联 Loki：{collector.lokiDeployment?.name || '未知'}
+              </p>
+            </div>
+          </div>
+          <StatusBadge status={collector.status} />
+        </div>
+
+        <div className="space-y-1.5 text-xs text-muted-foreground mb-3">
+          <div className="flex justify-between">
+            <span>类型</span>
+            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${meta.color}`}>
+              {meta.label}
+            </span>
+          </div>
+          {collector.host && (
+            <InfoRow
+              label="主机"
+              value={`${collector.host.name}（${collector.host.hostIP}）`}
+              valueClass="truncate max-w-[200px]"
+            />
+          )}
+          {collector.cluster && (
+            <InfoRow
+              label="集群"
+              value={collector.cluster.name}
+              valueClass="truncate max-w-[200px]"
+            />
+          )}
+          {collector.targetDeployment && (
+            <InfoRow
+              label="目标 Deployment"
+              value={collector.targetDeployment}
+              valueClass="truncate max-w-[200px]"
+            />
+          )}
+          {collector.namespace && (
+            <InfoRow label="命名空间" value={collector.namespace} valueClass="truncate max-w-[200px]" />
+          )}
+          {collector.logPath && (
+            <InfoRow label="日志路径" value={collector.logPath} valueClass="truncate max-w-[200px]" />
+          )}
+          {collector.statusMessage && (
+            <div className="p-2 bg-muted rounded text-xs mt-1">
+              {collector.statusMessage}
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-2 pt-3 border-t border-border">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onInstall(collector.id)}
+            disabled={isBusy}
+          >
+            <Upload className="w-3 h-3 mr-1" />
+            {isBusy ? '处理中...' : '部署'}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onUninstall(collector.id)}
+            disabled={isBusy}
+          >
+            <Download className="w-3 h-3 mr-1" />
+            卸载
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={`删除采集器 ${collector.name}`}
+            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            onClick={() => onDelete(collector)}
+          >
+            <Trash2 className="w-3 h-3" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/collectors/components/CollectorFormDialog.tsx b/frontend/src/pages/collectors/components/CollectorFormDialog.tsx
new file mode 100644
index 0000000..a46e8ef
--- /dev/null
+++ b/frontend/src/pages/collectors/components/CollectorFormDialog.tsx
@@ -0,0 +1,369 @@
+import { memo, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { collectorApi } from '@/api'
+import { statusLabel } from '@/lib/utils'
+import { toast } from 'sonner'
+import type { Cluster, Host, LokiDeployment } from '@/types'
+
+type CollectorType = 'host-promtail' | 'k8s-daemonset' | 'k8s-fluentbit-sidecar'
+
+const COLLECTOR_TYPES: Array<{ value: CollectorType; label: string }> = [
+  { value: 'host-promtail', label: '主机 Promtail（SSH）' },
+  { value: 'k8s-daemonset', label: 'K8s Promtail DaemonSet' },
+  { value: 'k8s-fluentbit-sidecar', label: 'K8s Fluent Bit Sidecar' },
+]
+
+// 表单 schema：zod 为唯一校验源，消息中文且具体
+const collectorFormSchema = z
+  .object({
+    name: z.string().min(1, '请输入采集器名称'),
+    type: z.enum(['host-promtail', 'k8s-daemonset', 'k8s-fluentbit-sidecar']),
+    lokiDeploymentID: z.string().min(1, '请选择关联的 Loki 部署'),
+    hostID: z.string(),
+    clusterID: z.string(),
+    targetDeployment: z.string(),
+    namespace: z.string(),
+    logPath: z.string(),
+    /** 旧版表单即无录入入口，仅透传（默认空串） */
+    labels: z.string(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.type === 'host-promtail' && !data.hostID) {
+      ctx.addIssue({ code: 'custom', path: ['hostID'], message: '请选择目标主机' })
+    }
+    if (data.type !== 'host-promtail' && !data.clusterID) {
+      ctx.addIssue({ code: 'custom', path: ['clusterID'], message: '请选择目标集群' })
+    }
+    if (
+      data.type === 'k8s-fluentbit-sidecar' &&
+      !data.targetDeployment.trim()
+    ) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['targetDeployment'],
+        message: '请填写目标 Deployment 名称',
+      })
+    }
+  })
+
+type CollectorFormValues = z.infer<typeof collectorFormSchema>
+
+const DEFAULT_VALUES: CollectorFormValues = {
+  name: '',
+  type: 'host-promtail',
+  lokiDeploymentID: '',
+  hostID: '',
+  clusterID: '',
+  targetDeployment: '',
+  namespace: '',
+  logPath: '',
+  labels: '',
+}
+
+interface CollectorFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 创建成功回调（父级刷新列表并回到第 1 页） */
+  onCreated: () => void
+  deployments: LokiDeployment[]
+  clusters: Cluster[]
+  hosts: Host[]
+}
+
+/** 新建采集器弹窗 — react-hook-form + zod；类型切换条件显示主机/集群选择与字段 */
+export const CollectorFormDialog = memo(function CollectorFormDialog({
+  open,
+  onOpenChange,
+  onCreated,
+  deployments,
+  clusters,
+  hosts,
+}: CollectorFormDialogProps) {
+  const [submitting, setSubmitting] = useState(false)
+
+  const form = useForm<CollectorFormValues>({
+    resolver: zodResolver(collectorFormSchema),
+    defaultValues: DEFAULT_VALUES,
+  })
+  const collectorType = form.watch('type')
+
+  // 打开时重置（关闭重置时机明确）
+  useEffect(() => {
+    if (open) {
+      form.reset(DEFAULT_VALUES)
+    }
+  }, [open, form])
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    setSubmitting(true)
+    try {
+      await collectorApi.create({
+        name: values.name,
+        type: values.type,
+        lokiDeploymentID: Number(values.lokiDeploymentID),
+        hostID:
+          values.type === 'host-promtail' && values.hostID
+            ? Number(values.hostID)
+            : undefined,
+        clusterID:
+          values.type !== 'host-promtail' && values.clusterID
+            ? Number(values.clusterID)
+            : undefined,
+        targetDeployment:
+          values.type === 'k8s-fluentbit-sidecar' ? values.targetDeployment : undefined,
+        namespace: values.type !== 'host-promtail' ? values.namespace : undefined,
+        logPath: values.logPath,
+        labels: values.labels,
+      })
+      onOpenChange(false)
+      onCreated()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '创建采集器失败')
+    } finally {
+      setSubmitting(false)
+    }
+  })
+
+  const isHostType = collectorType === 'host-promtail'
+  const isK8sType = collectorType !== 'host-promtail'
+  const isSidecarType = collectorType === 'k8s-fluentbit-sidecar'
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>添加采集策略</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>名称 *</FormLabel>
+                    <FormControl>
+                      <Input placeholder="app-logs-collector" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>采集器类型</FormLabel>
+                    <FormControl>
+                      <Select value={field.value} onValueChange={field.onChange}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {COLLECTOR_TYPES.map((t) => (
+                            <SelectItem key={t.value} value={t.value}>
+                              {t.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="lokiDeploymentID"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>关联 Loki 部署 *</FormLabel>
+                  <FormControl>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="选择已部署的 Loki（推送目标）" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {deployments.map((d) => (
+                          <SelectItem key={d.id} value={String(d.id)}>
+                            {d.name}（{statusLabel(d.status)}）
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {isHostType && (
+              <FormField
+                control={form.control}
+                name="hostID"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>目标主机 *</FormLabel>
+                    <FormControl>
+                      <Select value={field.value} onValueChange={field.onChange}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择主机" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {hosts.map((h) => (
+                            <SelectItem key={h.id} value={String(h.id)}>
+                              {h.name}（{h.hostIP}）
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {isK8sType && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="clusterID"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>目标集群 *</FormLabel>
+                      <FormControl>
+                        <Select value={field.value} onValueChange={field.onChange}>
+                          <SelectTrigger>
+                            <SelectValue placeholder="选择集群" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {clusters.map((c) => (
+                              <SelectItem key={c.id} value={String(c.id)}>
+                                {c.name}（{statusLabel(c.status)}）
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={form.control}
+                    name="namespace"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>命名空间</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={collectorType === 'k8s-daemonset' ? 'logging' : 'default'}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  {isSidecarType && (
+                    <FormField
+                      control={form.control}
+                      name="targetDeployment"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>目标 Deployment *</FormLabel>
+                          <FormControl>
+                            <Input placeholder="my-app" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+
+            <FormField
+              control={form.control}
+              name="logPath"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>采集日志路径</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={isHostType ? '/var/log/*.log' : '/var/log/app/*.log'}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                  {isHostType && (
+                    <p className="text-xs text-muted-foreground">
+                      支持 glob 通配(如 /var/log/*.log /var/log/syslog);多个路径用逗号分隔
+                    </p>
+                  )}
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="labels"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>自定义标签（JSON,可选）</FormLabel>
+                  <FormControl>
+                    <Input placeholder='{"env": "prod", "team": "ops"}' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                  <p className="text-xs text-muted-foreground">
+                    合法 JSON 时将附加到每条日志的标签,便于在 Loki/Grafana 中筛选;留空则不加
+                  </p>
+                </FormItem>
+              )}
+            />
+
+            <Button
+              type="submit"
+              className="w-full bg-primary hover:bg-primary/90"
+              disabled={submitting}
+            >
+              {submitting ? '创建中...' : '创建并部署'}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/collectors/index.tsx b/frontend/src/pages/collectors/index.tsx
new file mode 100644
index 0000000..da37e54
--- /dev/null
+++ b/frontend/src/pages/collectors/index.tsx
@@ -0,0 +1,179 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { RadioTower, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { clusterApi, collectorApi, deploymentApi, hostApi } from '@/api'
+import { PageContainer } from '@/components/PageContainer'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { EmptyState } from '@/components/EmptyState'
+import { ErrorState } from '@/components/ErrorState'
+import { PaginationBar } from '@/components/PaginationBar'
+import { ConfirmDialog } from '@/components/ConfirmDialog'
+import { toast } from 'sonner'
+import { useListQuery } from '@/hooks/useListQuery'
+import type { Cluster, Collector, Host, LokiDeployment } from '@/types'
+import { CollectorCard } from './components/CollectorCard'
+import { CollectorFormDialog } from './components/CollectorFormDialog'
+
+/**
+ * 日志采集页 — 采集策略编排：列表走 useListQuery（取消+版本号），
+ * Loki 部署/集群/主机下拉数据为页面局部加载（与列表分页解耦）。
+ * 部署(install)/卸载(uninstall)/删除保留；成功操作静默（列表刷新即反馈）。
+ */
+const CollectorsPage = memo(function CollectorsPage() {
+  const query = useListQuery<Collector>((params, signal) =>
+    collectorApi.list(params, { signal })
+  )
+
+  // 表单下拉数据：一次性局部加载
+  const [deployments, setDeployments] = useState<LokiDeployment[]>([])
+  const [clusters, setClusters] = useState<Cluster[]>([])
+  const [hosts, setHosts] = useState<Host[]>([])
+
+  const [formOpen, setFormOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<Collector | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  /** 部署/卸载指令进行中的采集器 ID（按钮 loading + 防重复点击） */
+  const [operating, setOperating] = useState<number | null>(null)
+
+  // 操作后延时刷新列表/清除按钮态的定时器（卸载清理）
+  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
+  useEffect(() => {
+    return () => {
+      timeoutsRef.current.forEach((id) => clearTimeout(id))
+      timeoutsRef.current = []
+    }
+  }, [])
+
+  const addTimeout = useCallback((cb: () => void, delay: number) => {
+    timeoutsRef.current.push(setTimeout(cb, delay))
+  }, [])
+
+  // 下拉数据加载（失败仅提示，不阻塞列表）
+  useEffect(() => {
+    let cancelled = false
+    Promise.all([
+      deploymentApi.list({ page: 1, pageSize: 100 }),
+      clusterApi.list({ page: 1, pageSize: 100 }),
+      hostApi.list({ page: 1, pageSize: 100 }),
+    ])
+      .then(([deployRes, clusterRes, hostRes]) => {
+        if (cancelled) return
+        setDeployments(deployRes.list)
+        setClusters(clusterRes.list)
+        setHosts(hostRes.list)
+      })
+      .catch((err) => {
+        toast.error(err instanceof Error ? err.message : '加载 Loki 部署/集群/主机数据失败')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const handleAction = useCallback(
+    async (id: number, action: 'install' | 'uninstall') => {
+      setOperating(id)
+      try {
+        await collectorApi[action](id)
+        addTimeout(query.refresh, 3000)
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : action === 'install' ? '部署采集器失败' : '卸载采集器失败'
+        )
+      } finally {
+        addTimeout(() => setOperating(null), 3000)
+      }
+    },
+    [query, addTimeout]
+  )
+
+  const handleDelete = useCallback(async () => {
+    const id = deleteTarget?.id
+    if (!id) return
+    setDeleting(true)
+    try {
+      await collectorApi.remove(id)
+      setDeleteTarget(null)
+      query.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '删除采集器失败')
+    } finally {
+      setDeleting(false)
+    }
+  }, [deleteTarget, query])
+
+  return (
+    <PageContainer
+      title="日志采集"
+      description="为主机与集群配置日志采集策略，日志将推送到关联的 Loki"
+      action={
+        <Button
+          className="bg-primary hover:bg-primary/90"
+          onClick={() => setFormOpen(true)}
+        >
+          <Plus className="w-4 h-4 mr-1" />
+          添加采集策略
+        </Button>
+      }
+    >
+      {query.loading ? (
+        <LoadingSpinner className="h-64" />
+      ) : query.error ? (
+        <ErrorState message={query.error} onRetry={query.refresh} />
+      ) : query.list.length === 0 ? (
+        <EmptyState
+          icon={RadioTower}
+          title='暂无采集策略'
+          description="新建一个日志采集器，关联已部署的 Loki"
+        />
+      ) : (
+        <>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {query.list.map((collector) => (
+              <CollectorCard
+                key={collector.id}
+                collector={collector}
+                operating={operating}
+                onInstall={(id) => handleAction(id, 'install')}
+                onUninstall={(id) => handleAction(id, 'uninstall')}
+                onDelete={setDeleteTarget}
+              />
+            ))}
+          </div>
+          <PaginationBar
+            page={query.page}
+            pageSize={query.pageSize}
+            total={query.total}
+            onPageChange={query.setPage}
+          />
+        </>
+      )}
+
+      <CollectorFormDialog
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        onCreated={query.reload}
+        deployments={deployments}
+        clusters={clusters}
+        hosts={hosts}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        name={deleteTarget?.name}
+        description={
+          deleteTarget
+            ? `确定要删除「${deleteTarget.name}」吗？删除时将自动卸载采集端，此操作不可恢复。`
+            : undefined
+        }
+        loading={deleting}
+        onConfirm={handleDelete}
+      />
+    </PageContainer>
+  )
+})
+
+export default CollectorsPage
diff --git a/frontend/src/pages/dashboard/components/RecentDeploymentsCard.tsx b/frontend/src/pages/dashboard/components/RecentDeploymentsCard.tsx
new file mode 100644
index 0000000..ce8d58e
--- /dev/null
+++ b/frontend/src/pages/dashboard/components/RecentDeploymentsCard.tsx
@@ -0,0 +1,74 @@
+import { memo } from 'react'
+import { useNavigate } from 'react-router'
+import { Rocket } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { EmptyState } from '@/components/EmptyState'
+import { StatusIcon } from '@/components/StatusBadge'
+import { getStatusColorClass } from '@/components/status-config'
+import { statusLabel } from '@/lib/utils'
+import type { LokiDeployment } from '@/types'
+
+/** 最近部署卡片 — 展示最近 5 条部署，点击跳转部署页 */
+export const RecentDeploymentsCard = memo(function RecentDeploymentsCard({
+  deployments,
+  onViewAll,
+}: {
+  deployments: LokiDeployment[]
+  onViewAll: () => void
+}) {
+  const navigate = useNavigate()
+
+  return (
+    <Card className="border-border">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">最近部署</CardTitle>
+          <button
+            onClick={onViewAll}
+            className="text-xs text-primary hover:text-primary/80 font-medium"
+          >
+            查看全部
+          </button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {deployments.length === 0 ? (
+            <EmptyState
+              icon={Rocket}
+              title="暂无部署"
+              description="创建你的第一个 Loki 部署"
+            />
+          ) : (
+            deployments.map((d) => (
+              <div
+                key={d.id}
+                className="flex items-center justify-between p-3 rounded-lg bg-muted/50 hover:bg-muted dark:hover:bg-slate-800 transition-colors cursor-pointer"
+                onClick={() => navigate('/deployments')}
+              >
+                <div className="flex items-center gap-3 min-w-0">
+                  <StatusIcon status={d.status} size="sm" />
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium text-foreground truncate">
+                      {d.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {d.mode} &middot; {d.namespace || 'loki'}
+                    </p>
+                  </div>
+                </div>
+                <span
+                  className={`px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${getStatusColorClass(
+                    d.status
+                  )}`}
+                >
+                  {statusLabel(d.status)}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/dashboard/components/ResourceListCard.tsx b/frontend/src/pages/dashboard/components/ResourceListCard.tsx
new file mode 100644
index 0000000..ff25649
--- /dev/null
+++ b/frontend/src/pages/dashboard/components/ResourceListCard.tsx
@@ -0,0 +1,85 @@
+import { memo } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { getStatusColorClass } from '@/components/status-config'
+import { statusLabel } from '@/lib/utils'
+
+// 用具体结构类型而非泛型：memo 包裹泛型组件会导致 TS 无法从 props 推断 T
+interface ResourceItem {
+  id: number
+  name: string
+  status: string
+  hostIP?: string
+}
+
+interface ResourceListCardProps {
+  title: string
+  icon: React.ReactNode
+  items: ResourceItem[]
+  onManage: () => void
+  getItemIcon: (item: ResourceItem) => React.ReactNode
+  getItemLabel: (item: ResourceItem) => string
+  getItemStatus: (item: ResourceItem) => string
+  getItemExtra?: (item: ResourceItem) => string | undefined
+}
+
+/** 资源列表卡片 — 集群/主机快捷列表（仪表盘） */
+export const ResourceListCard = memo(function ResourceListCard({
+  title,
+  icon,
+  items,
+  onManage,
+  getItemIcon,
+  getItemLabel,
+  getItemStatus,
+  getItemExtra,
+}: ResourceListCardProps) {
+  return (
+    <Card className="border-border">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base flex items-center gap-2">
+            {icon}
+            {title}
+          </CardTitle>
+          <button
+            onClick={onManage}
+            className="text-xs text-primary hover:text-primary/80 font-medium"
+          >
+            管理
+          </button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          {items.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-4">暂无{title}</p>
+          ) : (
+            items.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-center justify-between p-2 rounded-md hover:bg-muted dark:hover:bg-slate-800 transition-colors"
+              >
+                <div className="flex items-center gap-2 min-w-0">
+                  {getItemIcon(item)}
+                  <span className="text-sm truncate">{getItemLabel(item)}</span>
+                  {getItemExtra?.(item) && (
+                    <span className="text-xs text-muted-foreground flex-shrink-0">
+                      {getItemExtra(item)}
+                    </span>
+                  )}
+                </div>
+                <span
+                  className={`px-2 py-0.5 rounded-full text-xs flex-shrink-0 ${getStatusColorClass(
+                    getItemStatus(item)
+                  )}`}
+                >
+                  {statusLabel(getItemStatus(item))}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/dashboard/components/StatCard.tsx b/frontend/src/pages/dashboard/components/StatCard.tsx
new file mode 100644
index 0000000..1f3e06a
--- /dev/null
+++ b/frontend/src/pages/dashboard/components/StatCard.tsx
@@ -0,0 +1,52 @@
+import { memo } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+
+interface StatCardProps {
+  label: string
+  value: string | number
+  icon: LucideIcon
+  iconColor: string
+  iconBg: string
+  sub?: {
+    icon: LucideIcon
+    color: string
+    textColor: string
+    text: string
+  }
+}
+
+/** 指标卡 — 数字 + 图标 + 副指标（仪表盘通用件） */
+export const StatCard = memo(function StatCard({
+  label,
+  value,
+  icon: Icon,
+  iconColor,
+  iconBg,
+  sub,
+}: StatCardProps) {
+  const SubIcon = sub?.icon
+  return (
+    <Card className="border-border">
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-muted-foreground">{label}</p>
+            <p className="text-3xl font-bold text-foreground mt-1 tabular-nums">
+              {value}
+            </p>
+          </div>
+          <div className={`w-12 h-12 rounded-xl ${iconBg} flex items-center justify-center`}>
+            <Icon className={`w-6 h-6 ${iconColor}`} />
+          </div>
+        </div>
+        {sub && SubIcon && (
+          <div className="flex items-center gap-2 mt-4">
+            <SubIcon className={`w-4 h-4 ${sub.color}`} />
+            <span className={`text-xs ${sub.textColor}`}>{sub.text}</span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/dashboard/hooks/useDashboardStats.ts b/frontend/src/pages/dashboard/hooks/useDashboardStats.ts
new file mode 100644
index 0000000..5008cd3
--- /dev/null
+++ b/frontend/src/pages/dashboard/hooks/useDashboardStats.ts
@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { clusterApi, deploymentApi, hostApi } from '@/api'
+import type { Cluster, DashboardStats, Host, LokiDeployment } from '@/types'
+
+export interface DashboardData {
+  stats: DashboardStats
+  deployments: LokiDeployment[]
+  clusters: Cluster[]
+  hosts: Host[]
+}
+
+const REFRESH_INTERVAL = 10000 // 10 秒自动刷新
+
+/**
+ * 仪表盘数据 hook — 轮询 + AbortController/版本号双重防护。
+ * - 页面隐藏（document.hidden）时暂停轮询，重新可见立即刷新
+ * - 首次加载失败暴露 error（由页面渲染 ErrorState，不再吞错）
+ */
+export function useDashboardStats(intervalMs: number = REFRESH_INTERVAL) {
+  const [data, setData] = useState<DashboardData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const abortRef = useRef<AbortController | null>(null)
+  const versionRef = useRef(0)
+
+  const load = useCallback(async () => {
+    abortRef.current?.abort()
+    const controller = new AbortController()
+    abortRef.current = controller
+    const version = ++versionRef.current
+
+    try {
+      const [stats, deployRes, clusterRes, hostRes] = await Promise.all([
+        deploymentApi.stats(),
+        deploymentApi.list({ page: 1, pageSize: 5 }, { signal: controller.signal }),
+        clusterApi.list({ page: 1, pageSize: 5 }, { signal: controller.signal }),
+        hostApi.list({ page: 1, pageSize: 5 }, { signal: controller.signal }),
+      ])
+      if (version !== versionRef.current) return
+      setData({
+        stats,
+        deployments: deployRes.list,
+        clusters: clusterRes.list,
+        hosts: hostRes.list,
+      })
+      setError(null)
+    } catch (err) {
+      if (version !== versionRef.current) return
+      setError(err instanceof Error ? err.message : '加载仪表盘数据失败')
+    } finally {
+      if (version === versionRef.current) {
+        setLoading(false)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+
+    const intervalId = setInterval(() => {
+      if (!document.hidden) void load()
+    }, intervalMs)
+
+    // 重新可见时立即刷新一次
+    const onVisibilityChange = () => {
+      if (!document.hidden) void load()
+    }
+    document.addEventListener('visibilitychange', onVisibilityChange)
+
+    return () => {
+      clearInterval(intervalId)
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+      // 写入而非读取:递增使在途响应按版本号判过期(exhaustive-deps 误报)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      versionRef.current++
+      abortRef.current?.abort()
+    }
+  }, [load, intervalMs])
+
+  return { data, loading, error, refresh: load }
+}
diff --git a/frontend/src/pages/dashboard/index.tsx b/frontend/src/pages/dashboard/index.tsx
new file mode 100644
index 0000000..5e15411
--- /dev/null
+++ b/frontend/src/pages/dashboard/index.tsx
@@ -0,0 +1,183 @@
+import { memo, useCallback, useMemo } from 'react'
+import { useNavigate } from 'react-router'
+import { Server, Monitor, Activity, TrendingUp, CheckCircle, Rocket, Wand2 } from 'lucide-react'
+import { Link } from 'react-router'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { PageContainer } from '@/components/PageContainer'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { ErrorState } from '@/components/ErrorState'
+import { useDashboardStats } from './hooks/useDashboardStats'
+import { StatCard } from './components/StatCard'
+import { RecentDeploymentsCard } from './components/RecentDeploymentsCard'
+import { ResourceListCard } from './components/ResourceListCard'
+import type { DashboardStats } from '@/types'
+
+const STATUS_ITEMS = [
+  { key: 'running', label: '运行中', colorClass: 'text-primary' },
+  { key: 'failed', label: '失败', colorClass: 'text-destructive' },
+  { key: 'pending', label: '等待中', colorClass: 'text-warning' },
+] as const
+
+/**
+ * 仪表盘 — 指标卡 + 最近部署 + 资源快捷列表。
+ * 数据由 useDashboardStats 轮询（页面隐藏暂停）；首次失败渲染错误态而非空数据。
+ */
+const DashboardPage = memo(function DashboardPage() {
+  const { data, loading, error, refresh } = useDashboardStats()
+  const navigate = useNavigate()
+
+  const navigateTo = useCallback(
+    (path: string) => () => navigate(path),
+    [navigate]
+  )
+
+  const stats = data?.stats ?? null
+
+  const statCards = useMemo(() => {
+    if (!stats) return null
+    const cards: Array<React.ReactNode> = [
+      <StatCard
+        key="deployments"
+        label="部署总数"
+        value={stats.totalDeployments}
+        icon={Rocket}
+        iconColor="text-primary"
+        iconBg="bg-success/10"
+        sub={{
+          icon: TrendingUp,
+          color: 'text-primary',
+          textColor: 'text-primary',
+          text: `${stats.running} 个运行中`,
+        }}
+      />,
+      <StatCard
+        key="clusters"
+        label="集群"
+        value={stats.clusterCount}
+        icon={Server}
+        iconColor="text-info"
+        iconBg="bg-info/10"
+        sub={{
+          icon: CheckCircle,
+          color: 'text-primary',
+          textColor: 'text-muted-foreground',
+          text: '已接入',
+        }}
+      />,
+      <StatCard
+        key="hosts"
+        label="主机"
+        value={stats.hostCount}
+        icon={Monitor}
+        iconColor="text-purple-600"
+        iconBg="bg-purple-100 dark:bg-purple-900/30"
+        sub={{
+          icon: CheckCircle,
+          color: 'text-primary',
+          textColor: 'text-muted-foreground',
+          text: 'SSH 就绪',
+        }}
+      />,
+    ]
+    return cards
+  }, [stats])
+
+  if (loading) {
+    return <LoadingSpinner className="h-64" />
+  }
+
+  if (error && !data) {
+    return <ErrorState message={error} onRetry={refresh} />
+  }
+
+  return (
+    <PageContainer>
+      {/* 快速开始引导:尚无任何部署时置顶(状态推导引导,opsx-sec 范式) */}
+      {(data?.stats.totalDeployments ?? 0) === 0 && (
+        <Card className="border-primary/30 bg-primary/5">
+          <CardContent className="p-5 flex items-center justify-between flex-wrap gap-3">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
+                <Wand2 className="w-5 h-5 text-primary" />
+              </div>
+              <div>
+                <p className="font-medium">三步开始收集日志</p>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  环境与目标 → 存储 → 部署 Loki 与 Grafana,最后添加采集策略
+                </p>
+              </div>
+            </div>
+            <Button asChild className="bg-primary hover:bg-primary/90">
+              <Link to="/wizard">
+                进入部署向导
+                <Wand2 className="w-4 h-4 ml-1" />
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {statCards}
+
+        {/* 状态概览卡 */}
+        <Card className="border-border">
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">状态</p>
+                <div className="flex gap-3 mt-1">
+                  {STATUS_ITEMS.map((item) => (
+                    <div key={item.key} className="text-center">
+                      <p className={`text-lg font-bold tabular-nums ${item.colorClass}`}>
+                        {(stats?.[item.key as keyof DashboardStats] as number) || 0}
+                      </p>
+                      <p className="text-xs text-muted-foreground">{item.label}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="w-12 h-12 rounded-xl bg-warning/10 flex items-center justify-center">
+                <Activity className="w-6 h-6 text-warning" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Recent Deployments & Quick Resources */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <RecentDeploymentsCard
+          deployments={data?.deployments ?? []}
+          onViewAll={navigateTo('/deployments')}
+        />
+
+        <div className="space-y-4">
+          <ResourceListCard
+            title="集群"
+            icon={<Server className="w-4 h-4 text-info" />}
+            items={(data?.clusters ?? []).slice(0, 3)}
+            onManage={navigateTo('/clusters')}
+            getItemIcon={() => <Server className="w-4 h-4 text-info" />}
+            getItemLabel={(c) => c.name}
+            getItemStatus={(c) => c.status}
+          />
+          <ResourceListCard
+            title="主机"
+            icon={<Monitor className="w-4 h-4 text-purple-500" />}
+            items={(data?.hosts ?? []).slice(0, 3)}
+            onManage={navigateTo('/hosts')}
+            getItemIcon={() => <Monitor className="w-4 h-4 text-purple-500" />}
+            getItemLabel={(h) => h.name}
+            getItemStatus={(h) => h.status}
+            getItemExtra={(h) => h.hostIP}
+          />
+        </div>
+      </div>
+    </PageContainer>
+  )
+})
+
+export default DashboardPage
diff --git a/frontend/src/pages/deployments/components/DeploymentCard.tsx b/frontend/src/pages/deployments/components/DeploymentCard.tsx
new file mode 100644
index 0000000..06242cc
--- /dev/null
+++ b/frontend/src/pages/deployments/components/DeploymentCard.tsx
@@ -0,0 +1,179 @@
+import { memo, useEffect, useState } from 'react'
+import { Play, Square, RotateCw, Trash2, Terminal, ExternalLink } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { StatusBadge, StatusIcon } from '@/components/StatusBadge'
+import { InfoRow } from '@/components/InfoRow'
+import { deploymentApi } from '@/api'
+import type { LokiDeployment } from '@/types'
+
+/** 部署目标展示：优先集群，其次主机 */
+const getTargetLabel = (d: LokiDeployment) => {
+  if (d.cluster) return `集群：${d.cluster.name}`
+  if (d.host) return `主机：${d.host.name}`
+  return '未知'
+}
+
+interface DeploymentCardProps {
+  deployment: LokiDeployment
+  /** 部署/重启进行中的部署 ID（按钮 loading 态） */
+  operating: number | null
+  onDeploy: (id: number) => void
+  onStop: (id: number) => void
+  onRestart: (id: number) => void
+  onDelete: (d: LokiDeployment) => void
+  onViewLogs: (d: LokiDeployment) => void
+}
+
+/** 部署卡片 — 列表项展示与操作入口（部署/停止/重启/日志/访问/删除） */
+export const DeploymentCard = memo(function DeploymentCard({
+  deployment: d,
+  operating,
+  onDeploy,
+  onStop,
+  onRestart,
+  onDelete,
+  onViewLogs,
+}: DeploymentCardProps) {
+  // Loki 就绪探测(运行中时经数据源代理 /ready)
+  const [ready, setReady] = useState<boolean | null>(null)
+  useEffect(() => {
+    if (d.status !== 'running') return
+    let cancelled = false
+    deploymentApi
+      .ready(d.id)
+      .then((r) => {
+        if (!cancelled) setReady(r.ready)
+      })
+      .catch(() => {
+        if (!cancelled) setReady(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [d.id, d.status])
+
+  const isDeploying = d.status === 'deploying'
+  const isBusy = operating === d.id
+  const canDeploy = d.status === 'pending' || d.status === 'failed' || d.status === 'stopped'
+
+  return (
+    <Card className="border-border hover:shadow-md transition-shadow">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <StatusIcon status={d.status} size="md" />
+            <div className="min-w-0">
+              <h3 className="font-semibold text-foreground truncate">
+                {d.name}
+              </h3>
+              <p className="text-xs text-muted-foreground">{d.uuid}</p>
+            </div>
+          </div>
+          <StatusBadge status={d.status} />
+          {d.status === 'running' && ready !== null && (
+            <span
+              className={`w-2 h-2 rounded-full ${ready ? 'bg-success' : 'bg-destructive'}`}
+              title={ready ? 'Loki 就绪' : 'Loki 未就绪'}
+            />
+          )}
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-3">{d.description || '无描述'}</p>
+
+        <div className="space-y-1.5 text-xs text-muted-foreground mb-4">
+          <InfoRow label="方式" value={d.mode} />
+          <InfoRow label="版本" value={d.version} />
+          <InfoRow label="目标" value={getTargetLabel(d)} />
+          <InfoRow label="命名空间" value={d.namespace || 'loki'} />
+          <InfoRow label="副本数" value={String(d.replicas)} />
+          <InfoRow label="存储" value={d.storageConfig?.name || '本地'} />
+          {d.endpoint && (
+            <InfoRow label="访问地址" value={d.endpoint} valueClass="text-primary truncate max-w-[200px]" />
+          )}
+          {d.grafanaEnabled && d.grafanaEndpoint && (
+            <div className="flex justify-between items-center gap-2">
+              <span>Grafana</span>
+              <a
+                href={d.grafanaEndpoint}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium text-primary hover:underline truncate max-w-[200px]"
+                title={`${d.grafanaEndpoint}（admin/admin）`}
+              >
+                {d.grafanaEndpoint.replace(/^https?:\/\//, '')}
+              </a>
+            </div>
+          )}
+          {d.statusMessage && (
+            <div className="p-2 bg-muted rounded text-xs">
+              {d.statusMessage}
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-1 pt-3 border-t border-border">
+          {canDeploy ? (
+            <Button
+              variant="outline"
+              size="sm"
+              className="flex-1 text-xs bg-success/10 text-primary hover:bg-success/20 border-success/30"
+              onClick={() => onDeploy(d.id)}
+              disabled={isBusy}
+            >
+              <Play className="w-3 h-3 mr-1" />
+              {isBusy ? '部署中...' : '部署'}
+            </Button>
+          ) : isDeploying ? (
+            <Button variant="outline" size="sm" className="flex-1 text-xs" disabled>
+              <RotateCw className="w-3 h-3 mr-1 animate-spin" />
+              部署中...
+            </Button>
+          ) : (
+            <>
+              <Button variant="outline" size="sm" className="text-xs" onClick={() => onStop(d.id)}>
+                <Square className="w-3 h-3 mr-1" />
+                停止
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="text-xs"
+                onClick={() => onRestart(d.id)}
+                disabled={isBusy}
+              >
+                <RotateCw className={`w-3 h-3 mr-1 ${isBusy ? 'animate-spin' : ''}`} />
+                重启
+              </Button>
+            </>
+          )}
+          <Button variant="outline" size="sm" className="text-xs" onClick={() => onViewLogs(d)}>
+            <Terminal className="w-3 h-3 mr-1" />
+            日志
+          </Button>
+          {d.endpoint && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-xs text-primary hover:text-primary/80"
+              onClick={() => window.open(d.endpoint, '_blank', 'noopener,noreferrer')}
+              title="浏览器访问"
+            >
+              <ExternalLink className="w-3 h-3 mr-1" />
+              访问
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={`删除部署 ${d.name}`}
+            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            onClick={() => onDelete(d)}
+          >
+            <Trash2 className="w-3 h-3" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/deployments/components/DeploymentFormDialog.tsx b/frontend/src/pages/deployments/components/DeploymentFormDialog.tsx
new file mode 100644
index 0000000..0f25b6e
--- /dev/null
+++ b/frontend/src/pages/deployments/components/DeploymentFormDialog.tsx
@@ -0,0 +1,442 @@
+import { memo, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { deploymentApi } from '@/api'
+import { statusLabel } from '@/lib/utils'
+import { toast } from 'sonner'
+import type { Cluster, Host, StorageConfig } from '@/types'
+import {
+  FALLBACK_VERSIONS,
+  isK8sMode,
+  deploymentFormSchema,
+  DEFAULT_VALUES,
+  type DeploymentFormValues,
+} from '../form-schema'
+
+interface DeploymentFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 创建成功回调（父级刷新列表并回到第 1 页） */
+  onCreated: () => void
+  clusters: Cluster[]
+  hosts: Host[]
+  storages: StorageConfig[]
+}
+
+/** 创建 Loki 部署弹窗 — react-hook-form + zod；部署方式切换条件显示集群/主机选择 */
+export const DeploymentFormDialog = memo(function DeploymentFormDialog({
+  open,
+  onOpenChange,
+  onCreated,
+  clusters,
+  hosts,
+  storages,
+}: DeploymentFormDialogProps) {
+  const [submitting, setSubmitting] = useState(false)
+  // 版本列表来自后端 LokiVersionList,失败回退兜底
+  const [versions, setVersions] = useState<string[]>(FALLBACK_VERSIONS)
+
+  useEffect(() => {
+    let cancelled = false
+    deploymentApi
+      .versions()
+      .then((res) => {
+        if (!cancelled && res.versions?.length) setVersions(res.versions)
+      })
+      .catch(() => {
+        // 静默:保留兜底列表
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const form = useForm<DeploymentFormValues>({
+    resolver: zodResolver(deploymentFormSchema),
+    defaultValues: DEFAULT_VALUES,
+  })
+  const mode = form.watch('mode')
+  const grafanaEnabled = form.watch('grafanaEnabled')
+
+  // 打开时重置（关闭重置时机明确）
+  useEffect(() => {
+    if (open) {
+      form.reset(DEFAULT_VALUES)
+    }
+  }, [open, form])
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    setSubmitting(true)
+    try {
+      await deploymentApi.create({
+        name: values.name,
+        description: values.description,
+        version: values.version,
+        mode: values.mode,
+        clusterID: values.clusterID ? Number(values.clusterID) : undefined,
+        hostID: values.hostID ? Number(values.hostID) : undefined,
+        namespace: values.namespace,
+        storageConfigID: values.storageConfigID ? Number(values.storageConfigID) : 0,
+        authEnabled: values.authEnabled,
+        retentionDays: Number(values.retentionDays),
+        replicas: Number(values.replicas),
+        resourcesCPU: values.resourcesCPU,
+        resourcesMem: values.resourcesMem,
+        storageSize: values.storageSize,
+        grafanaEnabled: values.grafanaEnabled,
+        grafanaVersion: values.grafanaEnabled ? values.grafanaVersion || undefined : undefined,
+      })
+      onOpenChange(false)
+      onCreated()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '创建部署失败')
+    } finally {
+      setSubmitting(false)
+    }
+  })
+
+  const showK8s = isK8sMode(mode)
+  const showHost = mode === 'host-binary'
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>创建 Loki 部署</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>部署名称 *</FormLabel>
+                  <FormControl>
+                    <Input placeholder="production-loki" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>描述</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="生产环境 Loki 日志服务" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="version"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>版本</FormLabel>
+                    <FormControl>
+                      <Select value={field.value} onValueChange={field.onChange}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {versions.map((v) => (
+                            <SelectItem key={v} value={v}>
+                              {v}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="mode"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>部署方式</FormLabel>
+                    <FormControl>
+                      <Select value={field.value} onValueChange={field.onChange}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="k8s-helm">K8s Helm 部署</SelectItem>
+                          <SelectItem value="k8s-yaml">K8s YAML 部署</SelectItem>
+                          <SelectItem value="host-binary">主机二进制部署</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {showK8s && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="clusterID"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>目标集群 *</FormLabel>
+                      <FormControl>
+                        <Select value={field.value} onValueChange={field.onChange}>
+                          <SelectTrigger>
+                            <SelectValue placeholder="请选择集群" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {clusters.map((c) => (
+                              <SelectItem key={c.id} value={String(c.id)}>
+                                {c.name}（{statusLabel(c.status)}）
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="namespace"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>命名空间 *</FormLabel>
+                      <FormControl>
+                        <Input placeholder="loki" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            )}
+
+            {showHost && (
+              <FormField
+                control={form.control}
+                name="hostID"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>目标主机 *</FormLabel>
+                    <FormControl>
+                      <Select value={field.value} onValueChange={field.onChange}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="请选择主机" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {hosts.map((h) => (
+                            <SelectItem key={h.id} value={String(h.id)}>
+                              {h.name}（{h.hostIP}）
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <FormField
+              control={form.control}
+              name="storageConfigID"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>存储配置</FormLabel>
+                  <FormControl>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="请选择存储（可选）" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="0">本地存储（默认）</SelectItem>
+                        {storages.map((s) => (
+                          <SelectItem key={s.id} value={String(s.id)}>
+                            {s.name}（{s.storageType}）
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-3 gap-4">
+              <FormField
+                control={form.control}
+                name="replicas"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>副本数</FormLabel>
+                    <FormControl>
+                      <Input type="number" min={1} max={10} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="retentionDays"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>保留天数</FormLabel>
+                    <FormControl>
+                      <Input type="number" min={1} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="storageSize"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>存储容量</FormLabel>
+                    <FormControl>
+                      <Input placeholder="10Gi" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="resourcesCPU"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>CPU</FormLabel>
+                    <FormControl>
+                      <Input placeholder="500m" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="resourcesMem"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>内存</FormLabel>
+                    <FormControl>
+                      <Input placeholder="512Mi" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="authEnabled"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                      <FormLabel>启用多租户鉴权</FormLabel>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="grafanaEnabled"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                      <FormLabel>同时部署 Grafana（可选 — 平台已内置日志查询，通常无需 Grafana）</FormLabel>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {grafanaEnabled && (
+              <FormField
+                control={form.control}
+                name="grafanaVersion"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Grafana 版本</FormLabel>
+                    <FormControl>
+                      <Input placeholder="11.3.0" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <Button
+              type="submit"
+              className="w-full bg-primary hover:bg-primary/90"
+              disabled={submitting}
+            >
+              {submitting ? '创建中...' : '创建部署'}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/deployments/components/LogViewerDialog.tsx b/frontend/src/pages/deployments/components/LogViewerDialog.tsx
new file mode 100644
index 0000000..10a89da
--- /dev/null
+++ b/frontend/src/pages/deployments/components/LogViewerDialog.tsx
@@ -0,0 +1,109 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { Terminal } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { deploymentApi } from '@/api'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { ErrorState } from '@/components/ErrorState'
+import type { DeploymentLog, LokiDeployment } from '@/types'
+
+interface LogViewerDialogProps {
+  deployment: LokiDeployment | null
+  onClose: () => void
+}
+
+/** 部署日志弹窗 — 自负责拉取日志（打开即加载，版本号丢弃过期响应，失败可重试） */
+export const LogViewerDialog = memo(function LogViewerDialog({
+  deployment,
+  onClose,
+}: LogViewerDialogProps) {
+  const [logs, setLogs] = useState<DeploymentLog[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  // 版本号令牌：快速重开/切换部署时丢弃过期响应
+  const versionRef = useRef(0)
+
+  const loadLogs = useCallback(async (id: number) => {
+    const current = ++versionRef.current
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await deploymentApi.logs(id, { page: 1, pageSize: 100 })
+      if (current !== versionRef.current) return
+      setLogs(res.list ?? [])
+    } catch (err) {
+      if (current !== versionRef.current) return
+      setError(err instanceof Error ? err.message : '加载部署日志失败')
+    } finally {
+      if (current === versionRef.current) {
+        setLoading(false)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!deployment) return
+    setLogs([])
+    setError(null)
+    void loadLogs(deployment.id)
+  }, [deployment, loadLogs])
+
+  return (
+    <Dialog open={deployment !== null} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-4xl max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Terminal className="w-5 h-5 text-primary" />
+            部署日志 - {deployment?.name}
+          </DialogTitle>
+        </DialogHeader>
+
+        {error ? (
+          <ErrorState
+            message={error}
+            onRetry={() => deployment && loadLogs(deployment.id)}
+          />
+        ) : loading ? (
+          <LoadingSpinner className="h-64" />
+        ) : (
+          <LogView logs={logs} />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+/** 终端风格日志列表 */
+const LogView = memo(function LogView({ logs }: { logs: DeploymentLog[] }) {
+  return (
+    <div className="bg-card dark:bg-card text-green-400 font-mono text-xs p-4 rounded-lg h-96 overflow-auto">
+      {logs.length === 0 ? (
+        <p className="text-muted-foreground">暂无日志...</p>
+      ) : (
+        logs.map((log) => (
+          <div
+            key={log.id}
+            className={`mb-1 ${
+              log.level === 'error'
+                ? 'text-destructive'
+                : log.level === 'warn'
+                ? 'text-warning'
+                : log.level === 'success'
+                ? 'text-success'
+                : 'text-green-400'
+            }`}
+          >
+            <span className="text-muted-foreground">
+              [{new Date(log.createdAt).toLocaleTimeString()}]
+            </span>{' '}
+            <span className="font-bold uppercase">{log.level}</span> {log.message}
+          </div>
+        ))
+      )}
+    </div>
+  )
+})
diff --git a/frontend/src/pages/deployments/form-schema.ts b/frontend/src/pages/deployments/form-schema.ts
new file mode 100644
index 0000000..8604859
--- /dev/null
+++ b/frontend/src/pages/deployments/form-schema.ts
@@ -0,0 +1,73 @@
+import { z } from 'zod'
+
+// 部署表单 schema 与常量 — zod 为唯一校验源，消息中文且具体
+// （纯数据/纯逻辑抽离，见开发标准 07 章页面内聚 utils 范式）
+// 版本下拉兜底值;实际列表运行时从 GET /deployments/versions 拉取
+export const FALLBACK_VERSIONS = ['3.0.0', '2.9.8', '2.9.7', '2.9.6']
+
+export type DeploymentMode = 'k8s-helm' | 'k8s-yaml' | 'host-binary'
+
+export const isK8sMode = (mode: DeploymentMode) =>
+  mode === 'k8s-helm' || mode === 'k8s-yaml'
+
+// 整数字段校验（输入框 type=number 产出字符串，提交前统一转换）
+const isPositiveInt = (v: string, min: number, max?: number) => {
+  const n = Number(v)
+  return Number.isInteger(n) && n >= min && (max === undefined || n <= max)
+}
+
+export const deploymentFormSchema = z
+  .object({
+    name: z.string().min(1, '请输入部署名称'),
+    description: z.string(),
+    version: z.string().min(1, '请选择 Loki 版本'),
+    mode: z.enum(['k8s-helm', 'k8s-yaml', 'host-binary']),
+    clusterID: z.string(),
+    hostID: z.string(),
+    namespace: z.string(),
+    grafanaEnabled: z.boolean(),
+    grafanaVersion: z.string().optional(),
+    storageConfigID: z.string(),
+    authEnabled: z.boolean(),
+    retentionDays: z
+      .string()
+      .refine((v) => isPositiveInt(v, 1), '保留天数需为不小于 1 的整数'),
+    replicas: z
+      .string()
+      .refine((v) => isPositiveInt(v, 1, 10), '副本数需为 1-10 之间的整数'),
+    resourcesCPU: z.string().min(1, '请填写 CPU 配额（如 500m）'),
+    resourcesMem: z.string().min(1, '请填写内存配额（如 512Mi）'),
+    storageSize: z.string().min(1, '请填写存储容量（如 10Gi）'),
+  })
+  .superRefine((data, ctx) => {
+    if (isK8sMode(data.mode) && !data.clusterID) {
+      ctx.addIssue({ code: 'custom', path: ['clusterID'], message: '请选择目标集群' })
+    }
+    if (data.mode === 'host-binary' && !data.hostID) {
+      ctx.addIssue({ code: 'custom', path: ['hostID'], message: '请选择目标主机' })
+    }
+    if (isK8sMode(data.mode) && !data.namespace.trim()) {
+      ctx.addIssue({ code: 'custom', path: ['namespace'], message: '请填写命名空间' })
+    }
+  })
+
+export type DeploymentFormValues = z.infer<typeof deploymentFormSchema>
+
+export const DEFAULT_VALUES: DeploymentFormValues = {
+  name: '',
+  description: '',
+  version: '3.0.0',
+  mode: 'k8s-helm',
+  clusterID: '',
+  hostID: '',
+  namespace: 'log',
+  grafanaEnabled: false,
+  grafanaVersion: '11.3.0',
+  storageConfigID: '',
+  authEnabled: false,
+  retentionDays: '30',
+  replicas: '1',
+  resourcesCPU: '500m',
+  resourcesMem: '512Mi',
+  storageSize: '10Gi',
+}
diff --git a/frontend/src/pages/deployments/index.tsx b/frontend/src/pages/deployments/index.tsx
new file mode 100644
index 0000000..895c403
--- /dev/null
+++ b/frontend/src/pages/deployments/index.tsx
@@ -0,0 +1,208 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { Rocket, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { clusterApi, deploymentApi, hostApi, storageApi } from '@/api'
+import { PageContainer } from '@/components/PageContainer'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { EmptyState } from '@/components/EmptyState'
+import { ErrorState } from '@/components/ErrorState'
+import { PaginationBar } from '@/components/PaginationBar'
+import { ConfirmDialog } from '@/components/ConfirmDialog'
+import { toast } from 'sonner'
+import { useListQuery } from '@/hooks/useListQuery'
+import type { Cluster, Host, LokiDeployment, StorageConfig } from '@/types'
+import { DeploymentCard } from './components/DeploymentCard'
+import { DeploymentFormDialog } from './components/DeploymentFormDialog'
+import { LogViewerDialog } from './components/LogViewerDialog'
+
+/**
+ * Loki 部署页 — 只做编排：部署列表走 useListQuery（取消+版本号），
+ * 集群/主机/存储下拉数据为页面局部加载（与列表分页解耦）；
+ * 卡片/表单/日志查看均为域内子组件。成功操作静默（列表刷新即反馈）。
+ */
+const DeploymentsPage = memo(function DeploymentsPage() {
+  const query = useListQuery<LokiDeployment>((params, signal) =>
+    deploymentApi.list(params, { signal })
+  )
+
+  // 表单下拉数据：一次性局部加载，创建部署不依赖其刷新
+  const [clusters, setClusters] = useState<Cluster[]>([])
+  const [hosts, setHosts] = useState<Host[]>([])
+  const [storages, setStorages] = useState<StorageConfig[]>([])
+
+  const [formOpen, setFormOpen] = useState(false)
+  const [logsDeployment, setLogsDeployment] = useState<LokiDeployment | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<LokiDeployment | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  /** 部署/重启进行中的部署 ID（按钮 loading + 防重复点击） */
+  const [operating, setOperating] = useState<number | null>(null)
+
+  // 操作后延时刷新列表/清除按钮态的定时器（卸载清理）
+  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
+  useEffect(() => {
+    return () => {
+      timeoutsRef.current.forEach((id) => clearTimeout(id))
+      timeoutsRef.current = []
+    }
+  }, [])
+
+  const addTimeout = useCallback((cb: () => void, delay: number) => {
+    timeoutsRef.current.push(setTimeout(cb, delay))
+  }, [])
+
+  // 下拉数据加载（失败仅提示，不阻塞列表）
+  useEffect(() => {
+    let cancelled = false
+    Promise.all([
+      clusterApi.list({ page: 1, pageSize: 100 }),
+      hostApi.list({ page: 1, pageSize: 100 }),
+      storageApi.list({ page: 1, pageSize: 100 }),
+    ])
+      .then(([clusterRes, hostRes, storageRes]) => {
+        if (cancelled) return
+        setClusters(clusterRes.list)
+        setHosts(hostRes.list)
+        setStorages(storageRes.list)
+      })
+      .catch((err) => {
+        toast.error(err instanceof Error ? err.message : '加载集群/主机/存储数据失败')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const handleDeploy = useCallback(
+    async (id: number) => {
+      setOperating(id)
+      try {
+        await deploymentApi.deploy(id)
+        addTimeout(query.refresh, 2000)
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : '部署失败')
+      } finally {
+        addTimeout(() => setOperating(null), 5000)
+      }
+    },
+    [query, addTimeout]
+  )
+
+  const handleStop = useCallback(
+    async (id: number) => {
+      try {
+        await deploymentApi.stop(id)
+        query.refresh()
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : '停止失败')
+      }
+    },
+    [query]
+  )
+
+  const handleRestart = useCallback(
+    async (id: number) => {
+      setOperating(id)
+      try {
+        await deploymentApi.restart(id)
+        addTimeout(query.refresh, 3000)
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : '重启失败')
+      } finally {
+        addTimeout(() => setOperating(null), 5000)
+      }
+    },
+    [query, addTimeout]
+  )
+
+  const handleDelete = useCallback(async () => {
+    const id = deleteTarget?.id
+    if (!id) return
+    setDeleting(true)
+    try {
+      await deploymentApi.remove(id)
+      setDeleteTarget(null)
+      query.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '删除部署失败')
+    } finally {
+      setDeleting(false)
+    }
+  }, [deleteTarget, query])
+
+  return (
+    <PageContainer
+      title="部署Loki"
+      description="部署与管理 Grafana Loki 日志聚合服务"
+      action={
+        <Button
+          className="bg-primary hover:bg-primary/90"
+          onClick={() => setFormOpen(true)}
+        >
+          <Plus className="w-4 h-4 mr-1" />
+          新建部署
+        </Button>
+      }
+    >
+      {query.loading ? (
+        <LoadingSpinner className="h-64" />
+      ) : query.error ? (
+        <ErrorState message={query.error} onRetry={query.refresh} />
+      ) : query.list.length === 0 ? (
+        <EmptyState
+          icon={Rocket}
+          title="暂无部署"
+          description="创建你的第一个 Loki 部署"
+        />
+      ) : (
+        <>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {query.list.map((deployment) => (
+              <DeploymentCard
+                key={deployment.id}
+                deployment={deployment}
+                operating={operating}
+                onDeploy={handleDeploy}
+                onStop={handleStop}
+                onRestart={handleRestart}
+                onDelete={setDeleteTarget}
+                onViewLogs={setLogsDeployment}
+              />
+            ))}
+          </div>
+          <PaginationBar
+            page={query.page}
+            pageSize={query.pageSize}
+            total={query.total}
+            onPageChange={query.setPage}
+          />
+        </>
+      )}
+
+      <DeploymentFormDialog
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        onCreated={query.reload}
+        clusters={clusters}
+        hosts={hosts}
+        storages={storages}
+      />
+
+      <LogViewerDialog
+        deployment={logsDeployment}
+        onClose={() => setLogsDeployment(null)}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        name={deleteTarget?.name}
+        loading={deleting}
+        onConfirm={handleDelete}
+      />
+    </PageContainer>
+  )
+})
+
+export default DeploymentsPage
diff --git a/frontend/src/pages/hosts/components/HostCard.tsx b/frontend/src/pages/hosts/components/HostCard.tsx
new file mode 100644
index 0000000..6abb384
--- /dev/null
+++ b/frontend/src/pages/hosts/components/HostCard.tsx
@@ -0,0 +1,97 @@
+import { memo } from 'react'
+import { Monitor, RefreshCw, Trash2, Eye, Terminal } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { StatusBadge } from '@/components/StatusBadge'
+import { InfoRow } from '@/components/InfoRow'
+import type { Host } from '@/types'
+
+interface HostCardProps {
+  host: Host
+  validating: number | null
+  onViewInfo: (h: Host) => void
+  onOpenTerminal: (h: Host) => void
+  onValidate: (id: number) => void
+  onDelete: (h: Host) => void
+}
+
+/** 主机卡片 — 列表项展示与操作入口（删除传整个对象，供确认弹窗展示名称） */
+export const HostCard = memo(function HostCard({
+  host,
+  validating,
+  onViewInfo,
+  onOpenTerminal,
+  onValidate,
+  onDelete,
+}: HostCardProps) {
+  return (
+    <Card className="border-border hover:shadow-md transition-shadow">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <Monitor className="w-5 h-5 text-purple-500 flex-shrink-0" />
+            <h3 className="font-semibold text-foreground truncate">
+              {host.name}
+            </h3>
+          </div>
+          <StatusBadge status={host.status} />
+        </div>
+
+        <div className="space-y-1.5 text-xs text-muted-foreground mb-4">
+          <InfoRow label="IP 地址" value={`${host.hostIP}:${host.port}`} />
+          <InfoRow label="用户名" value={host.user} />
+          <InfoRow
+            label="认证方式"
+            value={host.authType === 'key' ? 'SSH 密钥' : '密码'}
+          />
+          <InfoRow
+            label="系统"
+            value={`${host.os || '未知'} (${host.arch || '未知'})`}
+          />
+        </div>
+
+        <div className="flex gap-2 pt-3 border-t border-border">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onViewInfo(host)}
+          >
+            <Eye className="w-3 h-3 mr-1" />
+            详情
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onOpenTerminal(host)}
+          >
+            <Terminal className="w-3 h-3 mr-1" />
+            终端
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={`验证主机 ${host.name}`}
+            className="text-xs"
+            onClick={() => onValidate(host.id)}
+            disabled={validating === host.id}
+          >
+            <RefreshCw
+              className={`w-3 h-3 ${validating === host.id ? 'animate-spin' : ''}`}
+            />
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={`删除主机 ${host.name}`}
+            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            onClick={() => onDelete(host)}
+          >
+            <Trash2 className="w-3 h-3" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/hosts/components/HostDetailDialog.tsx b/frontend/src/pages/hosts/components/HostDetailDialog.tsx
new file mode 100644
index 0000000..f0b3950
--- /dev/null
+++ b/frontend/src/pages/hosts/components/HostDetailDialog.tsx
@@ -0,0 +1,149 @@
+import { memo, useEffect, useState } from 'react'
+import { Monitor } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { hostApi } from '@/api'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { ErrorState } from '@/components/ErrorState'
+import type { Host, HostInfo } from '@/types'
+
+// 使用率颜色阈值
+const usageColor = (v: number) =>
+  v >= 90 ? 'bg-destructive' : v >= 70 ? 'bg-warning' : 'bg-success'
+
+interface HostDetailDialogProps {
+  host: Host | null
+  onClose: () => void
+}
+
+/** 主机详情弹窗 — 自负责拉取主机信息（打开即加载，失败渲染 ErrorState 可重开重试） */
+export const HostDetailDialog = memo(function HostDetailDialog({
+  host,
+  onClose,
+}: HostDetailDialogProps) {
+  const [info, setInfo] = useState<HostInfo | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!host) return
+    let cancelled = false
+    hostApi
+      .getInfo(host.id)
+      .then((data) => {
+        if (!cancelled) setInfo(data)
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : '加载主机详情失败')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [host])
+
+  return (
+    <Dialog open={host !== null} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Monitor className="w-5 h-5 text-purple-500" />
+            {host?.name}
+          </DialogTitle>
+        </DialogHeader>
+
+        {error ? (
+          <ErrorState message={error} />
+        ) : info ? (
+          <HostDetail info={info} />
+        ) : (
+          <LoadingSpinner className="h-32" />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+/** 主机详情内容：资源使用率 + 基本信息 */
+const HostDetail = memo(function HostDetail({ info }: { info: HostInfo }) {
+  return (
+    <div className="space-y-5">
+      {/* 资源使用率 */}
+      <div>
+        <h4 className="text-sm font-semibold mb-3">资源使用率</h4>
+        <div className="space-y-3">
+          <UsageBar label="CPU" value={info.cpuUsage} />
+          <UsageBar
+            label="内存"
+            value={info.memUsage}
+            detail={`${info.memUsed} / ${info.memTotal}`}
+          />
+          <UsageBar
+            label="磁盘"
+            value={info.diskUsage}
+            detail={`${info.diskUsed} / ${info.diskTotal}`}
+          />
+        </div>
+      </div>
+
+      {/* 基本信息 */}
+      <div>
+        <h4 className="text-sm font-semibold mb-3">基本信息</h4>
+        <div className="grid grid-cols-2 gap-3">
+          <InfoCard label="主机名" value={info.hostname || '未知'} />
+          <InfoCard label="系统" value={`${info.os || '未知'} ${info.version}`} />
+          <InfoCard label="架构" value={info.arch || '未知'} />
+          <InfoCard label="内核" value={info.kernel || '未知'} />
+          <InfoCard label="CPU 核数" value={info.cpu || '未知'} />
+          <InfoCard label="运行时长" value={info.uptime || '未知'} />
+        </div>
+      </div>
+    </div>
+  )
+})
+
+// 使用率进度条
+const UsageBar = memo(function UsageBar({
+  label,
+  value,
+  detail,
+}: {
+  label: string
+  value: number
+  detail?: string
+}) {
+  return (
+    <div>
+      <div className="flex justify-between text-xs mb-1">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="font-medium">
+          {value.toFixed(1)}% {detail && `（${detail}）`}
+        </span>
+      </div>
+      <div className="h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
+        <div
+          className={`h-full ${usageColor(value)} rounded-full transition-all`}
+          style={{ width: `${Math.min(value, 100)}%` }}
+        />
+      </div>
+    </div>
+  )
+})
+
+// 信息卡片
+const InfoCard = memo(function InfoCard({
+  label,
+  value,
+}: {
+  label: string
+  value: string
+}) {
+  return (
+    <div className="p-2.5 bg-muted rounded-lg">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="text-sm font-medium truncate">{value}</p>
+    </div>
+  )
+})
diff --git a/frontend/src/pages/hosts/components/HostFormDialog.tsx b/frontend/src/pages/hosts/components/HostFormDialog.tsx
new file mode 100644
index 0000000..9fb7791
--- /dev/null
+++ b/frontend/src/pages/hosts/components/HostFormDialog.tsx
@@ -0,0 +1,304 @@
+import { memo, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Key, Lock } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { hostApi } from '@/api'
+import { PasswordInput } from '@/components/PasswordInput'
+import { toast } from 'sonner'
+
+// 表单 schema：zod 为唯一校验源，消息中文且具体
+// （port 在表单内为字符串、提交时转数字，避免 z.coerce 输入/输出类型分叉导致 RHF 泛型不兼容）
+const hostFormSchema = z
+  .object({
+    name: z.string().min(1, '请输入主机名称'),
+    hostIP: z.string().min(1, '请输入主机 IP'),
+    port: z
+      .string()
+      .min(1, '请输入端口')
+      .regex(/^\d+$/, '端口必须为数字')
+      .refine((v) => Number(v) >= 1 && Number(v) <= 65535, '端口必须在 1-65535 之间'),
+    user: z.string().min(1, '请输入用户名'),
+    authType: z.enum(['password', 'key']),
+    password: z.string().optional(),
+    privateKey: z.string().optional(),
+    keyPhrase: z.string().optional(),
+    labels: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.authType === 'password' && !data.password?.trim()) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['password'],
+        message: '请填写 SSH 登录密码',
+      })
+    }
+    if (data.authType === 'key' && !data.privateKey?.trim()) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['privateKey'],
+        message: '请粘贴 SSH 私钥内容',
+      })
+    }
+  })
+
+type HostFormValues = z.infer<typeof hostFormSchema>
+
+const DEFAULT_VALUES: HostFormValues = {
+  name: '',
+  hostIP: '',
+  port: '22',
+  user: 'root',
+  authType: 'password',
+  password: '',
+  privateKey: '',
+  keyPhrase: '',
+  labels: '',
+}
+
+interface HostFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 创建成功回调（父级刷新列表并关闭弹窗） */
+  onCreated: () => void
+}
+
+/** 添加 SSH 主机弹窗 — react-hook-form + zod，自包含表单逻辑，页面只传开关与回调 */
+export const HostFormDialog = memo(function HostFormDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: HostFormDialogProps) {
+  const [submitting, setSubmitting] = useState(false)
+
+  const form = useForm<HostFormValues>({
+    resolver: zodResolver(hostFormSchema),
+    defaultValues: DEFAULT_VALUES,
+  })
+  const authType = form.watch('authType')
+
+  // 打开时重置（默认值），关闭/重开时机明确
+  useEffect(() => {
+    if (open) {
+      form.reset(DEFAULT_VALUES)
+    }
+  }, [open, form])
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    setSubmitting(true)
+    try {
+      await hostApi.create({
+        name: values.name,
+        hostIP: values.hostIP,
+        port: Number(values.port),
+        user: values.user,
+        authType: values.authType,
+        password: values.authType === 'password' ? values.password : undefined,
+        privateKey: values.authType === 'key' ? values.privateKey : undefined,
+        keyPhrase: values.authType === 'key' ? values.keyPhrase : undefined,
+        labels: values.labels,
+      })
+      onOpenChange(false)
+      onCreated()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '添加主机失败')
+    } finally {
+      setSubmitting(false)
+    }
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>添加 SSH 主机</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>名称 *</FormLabel>
+                    <FormControl>
+                      <Input placeholder="loki-server-1" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="hostIP"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>主机 IP *</FormLabel>
+                    <FormControl>
+                      <Input placeholder="192.168.1.100" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="port"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>端口</FormLabel>
+                    <FormControl>
+                      <Input type="number" placeholder="22" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="user"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>用户名 *</FormLabel>
+                    <FormControl>
+                      <Input placeholder="root" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="authType"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>认证方式</FormLabel>
+                  <FormControl>
+                    <div className="flex gap-4">
+                      <label className="flex items-center gap-2 cursor-pointer">
+                        <input
+                          type="radio"
+                          name="authType"
+                          value="password"
+                          checked={field.value === 'password'}
+                          onChange={() => field.onChange('password')}
+                        />
+                        <Lock className="w-4 h-4" />
+                        <span className="text-sm">密码</span>
+                      </label>
+                      <label className="flex items-center gap-2 cursor-pointer">
+                        <input
+                          type="radio"
+                          name="authType"
+                          value="key"
+                          checked={field.value === 'key'}
+                          onChange={() => field.onChange('key')}
+                        />
+                        <Key className="w-4 h-4" />
+                        <span className="text-sm">SSH 密钥</span>
+                      </label>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {authType === 'password' ? (
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>密码 *</FormLabel>
+                    <FormControl>
+                      <PasswordInput placeholder="SSH 登录密码" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ) : (
+              <>
+                <FormField
+                  control={form.control}
+                  name="privateKey"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>私钥 *</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
+                          className="min-h-[120px] font-mono text-xs"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="keyPhrase"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>密钥口令（可选）</FormLabel>
+                      <FormControl>
+                        <PasswordInput placeholder="无口令则留空" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </>
+            )}
+
+            <FormField
+              control={form.control}
+              name="labels"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>标签（JSON）</FormLabel>
+                  <FormControl>
+                    <Input placeholder='["loki", "logging"]' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button
+              type="submit"
+              className="w-full bg-primary hover:bg-primary/90"
+              disabled={submitting}
+            >
+              {submitting ? '添加中...' : '添加主机'}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/hosts/components/TerminalDialog.tsx b/frontend/src/pages/hosts/components/TerminalDialog.tsx
new file mode 100644
index 0000000..8dac19c
--- /dev/null
+++ b/frontend/src/pages/hosts/components/TerminalDialog.tsx
@@ -0,0 +1,86 @@
+import { memo, useEffect, useState } from 'react'
+import { Terminal } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { hostApi } from '@/api'
+import type { Host } from '@/types'
+
+interface TerminalDialogProps {
+  host: Host | null
+  onClose: () => void
+}
+
+/** 命令执行终端弹窗 — 打开即初始化欢迎输出，命令执行与输出渲染自包含 */
+export const TerminalDialog = memo(function TerminalDialog({
+  host,
+  onClose,
+}: TerminalDialogProps) {
+  const [command, setCommand] = useState('')
+  const [output, setOutput] = useState('')
+  const [executing, setExecuting] = useState(false)
+
+  // 切换主机/重新打开时重置终端
+  useEffect(() => {
+    if (host) {
+      setCommand('')
+      setOutput(`已连接到 ${host.name} (${host.hostIP})\n输入命令后按"执行"...\n`)
+    }
+  }, [host])
+
+  const executeCommand = async () => {
+    if (!host || !command.trim() || executing) return
+    setExecuting(true)
+    setOutput((prev) => prev + `\n$ ${command}\n`)
+    try {
+      const res = await hostApi.execute(host.id, command)
+      setOutput((prev) => prev + (res.stdout || '') + (res.stderr || '') + '\n')
+    } catch (err) {
+      const message = err instanceof Error ? err.message : '命令执行失败'
+      setOutput((prev) => prev + `错误：${message}\n`)
+    } finally {
+      setExecuting(false)
+      setCommand('')
+    }
+  }
+
+  return (
+    <Dialog open={host !== null} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Terminal className="w-5 h-5 text-primary" />
+            终端 - {host?.name}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="bg-card dark:bg-card text-green-400 font-mono text-xs p-4 rounded-lg h-80 overflow-auto whitespace-pre-wrap">
+            {output}
+          </div>
+          <div className="flex gap-2">
+            <Input
+              value={command}
+              onChange={(e) => setCommand(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && executeCommand()}
+              placeholder="输入命令..."
+              className="flex-1 font-mono text-sm"
+              disabled={executing}
+            />
+            <Button
+              onClick={executeCommand}
+              disabled={executing || !command.trim()}
+              className="bg-primary hover:bg-primary/90"
+            >
+              {executing ? '执行中...' : '执行'}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/hosts/index.tsx b/frontend/src/pages/hosts/index.tsx
new file mode 100644
index 0000000..49d3bc0
--- /dev/null
+++ b/frontend/src/pages/hosts/index.tsx
@@ -0,0 +1,171 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { Monitor, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { hostApi, deploymentApi, collectorApi } from '@/api'
+import { PageContainer } from '@/components/PageContainer'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { EmptyState } from '@/components/EmptyState'
+import { ErrorState } from '@/components/ErrorState'
+import { PaginationBar } from '@/components/PaginationBar'
+import { ConfirmDialog } from '@/components/ConfirmDialog'
+import { toast } from 'sonner'
+import { useListQuery } from '@/hooks/useListQuery'
+import type { Host } from '@/types'
+import { HostCard } from './components/HostCard'
+import { HostFormDialog } from './components/HostFormDialog'
+import { HostDetailDialog } from './components/HostDetailDialog'
+import { TerminalDialog } from './components/TerminalDialog'
+
+/**
+ * 主机管理页 — 只做编排：数据走 useListQuery（取消+版本号），
+ * 卡片/表单/详情/终端/删除确认均为域内子组件。成功操作静默（列表刷新即反馈）。
+ */
+const HostsPage = memo(function HostsPage() {
+  const query = useListQuery<Host>((params, signal) =>
+    hostApi.list(params, { signal })
+  )
+
+  const [formOpen, setFormOpen] = useState(false)
+  const [detailHost, setDetailHost] = useState<Host | null>(null)
+  const [terminalHost, setTerminalHost] = useState<Host | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<Host | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [validating, setValidating] = useState<number | null>(null)
+
+  // 验证后延时刷新列表的定时器（卸载清理）
+  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
+  useEffect(() => {
+    const timers = timeoutsRef.current
+    return () => {
+      timers.forEach((id) => clearTimeout(id))
+    }
+  }, [])
+
+  const [refCount, setRefCount] = useState<{ dep: number; col: number }>({ dep: 0, col: 0 })
+  useEffect(() => {
+    if (!deleteTarget) return
+    Promise.all([
+      deploymentApi.list({ page: 1, pageSize: 100 }),
+      collectorApi.list({ page: 1, pageSize: 100 }),
+    ]).then(([d, c]) => {
+      setRefCount({
+        dep: d.list.filter((x) => x.hostID === deleteTarget.id).length,
+        col: c.list.filter((x) => x.hostID === deleteTarget.id).length,
+      })
+    }).catch(() => setRefCount({ dep: 0, col: 0 }))
+  }, [deleteTarget])
+
+  const handleDelete = useCallback(async () => {
+    const id = deleteTarget?.id
+    if (!id) return
+    setDeleting(true)
+    try {
+      await hostApi.remove(id)
+      setDeleteTarget(null)
+      query.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '删除主机失败')
+    } finally {
+      setDeleting(false)
+    }
+  }, [deleteTarget, query])
+
+  const handleValidate = useCallback(
+    async (id: number) => {
+      setValidating(id)
+      try {
+        await hostApi.validate(id)
+        timeoutsRef.current.push(setTimeout(() => query.refresh(), 3000))
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : '验证失败')
+      } finally {
+        timeoutsRef.current.push(setTimeout(() => setValidating(null), 3000))
+      }
+    },
+    [query]
+  )
+
+  return (
+    <PageContainer
+      title="主机管理"
+      description="管理用于二进制方式部署 Loki 的 SSH 主机"
+      action={
+        <Button
+          className="bg-primary hover:bg-primary/90"
+          onClick={() => setFormOpen(true)}
+        >
+          <Plus className="w-4 h-4 mr-1" />
+          添加主机
+        </Button>
+      }
+    >
+      {query.loading ? (
+        <LoadingSpinner className="h-64" />
+      ) : query.error ? (
+        <ErrorState message={query.error} onRetry={query.refresh} />
+      ) : query.list.length === 0 ? (
+        <EmptyState
+          icon={Monitor}
+          title="暂无主机"
+          description="添加第一台 SSH 主机开始使用"
+        />
+      ) : (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {query.list.map((host) => (
+              <HostCard
+                key={host.id}
+                host={host}
+                validating={validating}
+                onViewInfo={setDetailHost}
+                onOpenTerminal={setTerminalHost}
+                onValidate={handleValidate}
+                onDelete={setDeleteTarget}
+              />
+            ))}
+          </div>
+          <PaginationBar
+            page={query.page}
+            pageSize={query.pageSize}
+            total={query.total}
+            onPageChange={query.setPage}
+          />
+        </>
+      )}
+
+      <HostFormDialog
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        onCreated={query.reload}
+      />
+
+      <HostDetailDialog
+        key={detailHost?.id ?? 'none'}
+        host={detailHost}
+        onClose={() => setDetailHost(null)}
+      />
+
+      <TerminalDialog
+        host={terminalHost}
+        onClose={() => setTerminalHost(null)}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        name={deleteTarget?.name}
+        loading={deleting}
+        description={
+          refCount.dep + refCount.col > 0
+            ? `确定要删除「${deleteTarget?.name}」吗?警告:仍有 ${refCount.dep} 个部署、${refCount.col} 个采集策略引用该主机,删除后它们将无法工作。`
+            : undefined
+        }
+        onConfirm={handleDelete}
+      />
+    </PageContainer>
+  )
+})
+
+export default HostsPage
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/login/index.tsx
similarity index 54%
rename from frontend/src/pages/Login.tsx
rename to frontend/src/pages/login/index.tsx
index 42178a6..14ea83b 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/login/index.tsx
@@ -1,38 +1,34 @@
 import { memo, useCallback, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router'
+import { useLocation, useNavigate } from 'react-router'
 import { Activity, Eye, EyeOff, Shield, ServerOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { authApi } from '@/api'
-import { toast } from 'sonner'
+import { authApi, ApiError } from '@/api'
+import { saveAuth, isLoggedIn, getUser } from '@/lib/auth-storage'
+import { readRedirectParam } from '@/lib/redirect'
 
 /**
- * Login 页面 - 优化版本
- * 
- * 优化点：
- * 1. React.memo 包裹组件
- * 2. 表单处理使用 useCallback 缓存
- * 3. 错误处理使用 sonner toast 替代 alert
- * 4. 清理 useEffect 中的未使用变量
+ * Login 页面
+ * - 登录接口 silent（错误密码 401 不触发全局跳转）
+ * - 登录成功按 redirect 参数回跳来源页（同源校验）
+ * - 后端探活走 api 层（authApi.health）
  */
 const Login = memo(function Login() {
-  const [username, setUsername] = useState('admin')
-  const [password, setPassword] = useState('admin123')
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [backendStatus, setBackendStatus] = useState<'checking' | 'online' | 'offline'>('checking')
   const navigate = useNavigate()
+  const location = useLocation()
 
   useEffect(() => {
-    // Check if already logged in
-    const token = localStorage.getItem('token')
-    if (token) {
-      navigate('/')
+    if (isLoggedIn()) {
+      navigate(getUser()?.role === 'admin' ? '/' : '/logs', { replace: true })
       return
     }
-    // Quick backend check
     checkBackend()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navigate])
@@ -40,16 +36,10 @@ const Login = memo(function Login() {
   // 后端状态检查 - useCallback缓存
   const checkBackend = useCallback(async () => {
     try {
-      const controller = new AbortController()
-      const timeoutId = setTimeout(() => controller.abort(), 3000)
       // 用公开的健康检查端点探活；避免打 /auth/login（生产环境被 nginx 限流 5r/m，
       // 反复刷新登录页会触发限流并锁死真正的登录请求）
-      const res = await fetch('/api/v1/health', {
-        method: 'GET',
-        signal: controller.signal,
-      })
-      clearTimeout(timeoutId)
-      setBackendStatus(res.ok ? 'online' : 'offline')
+      await authApi.health()
+      setBackendStatus('online')
     } catch {
       setBackendStatus('offline')
     }
@@ -64,31 +54,27 @@ const Login = memo(function Login() {
 
       try {
         const result = await authApi.login(username, password)
-        localStorage.setItem('token', result.accessToken)
-        localStorage.setItem('refreshToken', result.refreshToken)
-        localStorage.setItem('user', JSON.stringify(result.user))
-        toast.success('登录成功')
-        navigate('/')
+        saveAuth(result, result.user)
+        navigate(result.user.role === 'admin' ? readRedirectParam(location.search) : '/logs', { replace: true })
       } catch (err: unknown) {
-        const message = err instanceof Error ? err.message : '登录失败'
-        if (message.includes('Cannot connect')) {
-          setError('无法连接后端服务，请确认后端已启动（端口 8080）。')
-          setBackendStatus('offline')
-        } else if (
-          message.includes('invalid') ||
-          message.includes('password') ||
-          message.includes('密码') ||
-          message.includes('Unauthorized')
-        ) {
-          setError('用户名或密码错误')
+        if (err instanceof ApiError) {
+          if (err.status === 0) {
+            // 网络/超时类错误
+            setError('无法连接后端服务，请确认后端已启动（端口 8080）。')
+            setBackendStatus('offline')
+          } else if (err.status === 401) {
+            setError('用户名或密码错误')
+          } else {
+            setError(err.message || '登录失败')
+          }
         } else {
-          setError(message)
+          setError(err instanceof Error ? err.message : '登录失败')
         }
       } finally {
         setLoading(false)
       }
     },
-    [username, password, navigate]
+    [username, password, navigate, location.search]
   )
 
   // 密码显示切换 - useCallback缓存
@@ -97,27 +83,27 @@ const Login = memo(function Login() {
   }, [])
 
   return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-background flex justify-center px-4 pt-[8vh] md:pt-[14vh] pb-8">
       <div className="w-full max-w-md">
         {/* Logo */}
-        <div className="text-center mb-8">
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-emerald-500 mb-4">
-            <Activity className="w-9 h-9 text-white" />
+        <div className="text-center mb-6">
+          <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary mb-3">
+            <Activity className="w-8 h-8 text-primary-foreground" />
           </div>
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">LokiDeploy</h1>
-          <p className="text-sm text-slate-500 mt-1">Kubernetes Loki 日志部署平台</p>
+          <h1 className="text-2xl font-bold text-foreground">opsx-loki</h1>
+          <p className="text-sm text-muted-foreground mt-1">Kubernetes Loki 日志部署平台</p>
         </div>
 
         {/* Backend Status */}
         {backendStatus === 'offline' && (
-          <div className="mb-4 p-4 rounded-xl bg-amber-50 border border-amber-200 flex items-start gap-3">
-            <ServerOff className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
+          <div className="mb-4 p-4 rounded-xl bg-warning/10 border border-warning/30 flex items-start gap-3">
+            <ServerOff className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />
             <div>
-              <p className="text-sm font-medium text-amber-800">后端服务未启动</p>
-              <p className="text-xs text-amber-700 mt-1">
+              <p className="text-sm font-medium text-warning">后端服务未启动</p>
+              <p className="text-xs text-warning mt-1">
                 无法连接 API 服务，请先启动后端：
               </p>
-              <code className="block mt-2 px-3 py-2 bg-amber-100 rounded text-xs font-mono text-amber-900">
+              <code className="block mt-2 px-3 py-2 bg-warning/20 rounded text-xs font-mono text-warning">
                 ./run.sh
               </code>
             </div>
@@ -125,14 +111,14 @@ const Login = memo(function Login() {
         )}
 
         {/* Login Card */}
-        <div className="bg-white dark:bg-slate-900 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-800 p-8">
+        <div className="bg-card rounded-2xl shadow-lg border border-border p-8">
           <div className="flex items-center gap-2 mb-6">
-            <Shield className="w-5 h-5 text-emerald-500" />
-            <h2 className="text-lg font-semibold text-slate-800 dark:text-white">登录</h2>
+            <Shield className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold text-foreground">登录</h2>
           </div>
 
           {error && (
-            <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
+            <div className="mb-4 p-3 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive text-sm">
               {error}
             </div>
           )}
@@ -167,7 +153,7 @@ const Login = memo(function Login() {
                 <button
                   type="button"
                   onClick={togglePassword}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                   tabIndex={-1}
                 >
                   {showPassword ? (
@@ -181,18 +167,12 @@ const Login = memo(function Login() {
 
             <Button
               type="submit"
-              className="w-full h-10 bg-emerald-600 hover:bg-emerald-700 text-white"
+              className="w-full h-10 bg-primary hover:bg-primary/90 text-primary-foreground"
               disabled={loading}
             >
               {loading ? '登录中...' : '登录'}
             </Button>
           </form>
-
-          <div className="mt-6 pt-4 border-t border-slate-100 dark:border-slate-800">
-            <p className="text-xs text-center text-slate-500">
-              默认账号：admin / admin123
-            </p>
-          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/not-found/index.tsx b/frontend/src/pages/not-found/index.tsx
new file mode 100644
index 0000000..b0d2db7
--- /dev/null
+++ b/frontend/src/pages/not-found/index.tsx
@@ -0,0 +1,24 @@
+import { FileQuestion, Home } from 'lucide-react'
+import { Link } from 'react-router'
+import { Button } from '@/components/ui/button'
+
+/** 404 页面 — 通配路由的显式落点，不静默跳首页 */
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-muted dark:bg-slate-950 flex items-center justify-center p-6">
+      <div className="max-w-md w-full text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-muted mb-6">
+          <FileQuestion className="w-8 h-8 text-muted-foreground" />
+        </div>
+        <h1 className="text-5xl font-bold text-foreground mb-2">404</h1>
+        <p className="text-muted-foreground mb-8">页面不存在或已被移除</p>
+        <Button asChild className="bg-primary hover:bg-primary/90 text-primary-foreground">
+          <Link to="/">
+            <Home className="w-4 h-4 mr-2" />
+            返回首页
+          </Link>
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/settings/components/LdapSection.tsx b/frontend/src/pages/settings/components/LdapSection.tsx
new file mode 100644
index 0000000..ff56955
--- /dev/null
+++ b/frontend/src/pages/settings/components/LdapSection.tsx
@@ -0,0 +1,203 @@
+import { memo, useCallback, useEffect, useState } from 'react'
+import { Building2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { PasswordInput } from '@/components/PasswordInput'
+import { ldapApi, type LdapConfig, type LdapTestResult } from '@/api/ldap'
+import { toast } from 'sonner'
+
+const EMPTY: LdapConfig = {
+  enabled: false,
+  host: '',
+  port: 389,
+  useSSL: false,
+  bindDN: '',
+  bindPassword: '',
+  baseDN: '',
+  userFilter: '(objectClass=inetOrgPerson)',
+  usernameAttr: 'uid',
+  nameAttr: 'displayName',
+  emailAttr: 'mail',
+}
+
+/**
+ * LDAP 配置卡片 — 启用开关 + 表单 + 表单参数直测(未保存也可测);
+ * 密码已保存时占位提示,留空提交即保留旧值。启用且配置齐全后,
+ * 用户管理页才会出现「从 LDAP 导入」。
+ */
+export const LdapSection = memo(function LdapSection() {
+  const [cfg, setCfg] = useState<LdapConfig>(EMPTY)
+  const [loaded, setLoaded] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [testing, setTesting] = useState(false)
+  const [testResult, setTestResult] = useState<LdapTestResult | null>(null)
+
+  useEffect(() => {
+    ldapApi
+      .getConfig()
+      .then((c) => {
+        setCfg({ ...EMPTY, ...c, bindPassword: '' })
+        setLoaded(true)
+      })
+      .catch(() => toast.error('加载 LDAP 配置失败'))
+  }, [])
+
+  const set = useCallback(<K extends keyof LdapConfig>(k: K, v: LdapConfig[K]) => {
+    setCfg((prev) => ({ ...prev, [k]: v }))
+  }, [])
+
+  const handleTest = async () => {
+    if (!cfg.host || !cfg.bindDN || !cfg.baseDN) {
+      toast.error('请先填写服务器地址 / Bind DN / Base DN')
+      return
+    }
+    setTesting(true)
+    setTestResult(null)
+    try {
+      const result = await ldapApi.test(cfg)
+      setTestResult(result)
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '测试失败')
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const saved = await ldapApi.saveConfig(cfg)
+      setCfg({ ...EMPTY, ...saved, bindPassword: '' })
+      toast.success('LDAP 配置已保存')
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '保存失败')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Card className="border-border">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base flex items-center justify-between">
+          <span className="flex items-center gap-2">
+            <Building2 className="w-4 h-4" />
+            LDAP 接入
+          </span>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">启用后支持 LDAP 登录与批量导入</span>
+            <Switch checked={cfg.enabled} onCheckedChange={(v) => set('enabled', v)} />
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {loaded && !cfg.enabled ? (
+          <p className="text-sm text-muted-foreground py-2 text-center">
+            LDAP 未启用 —— 打开开关填写目录服务信息(服务器 / Bind DN / Base DN),
+            保存后用户管理页将出现「从 LDAP 导入」
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>服务器地址 *</Label>
+              <Input
+                placeholder="8.217.205.92"
+                value={cfg.host}
+                onChange={(e) => set('host', e.target.value)}
+              />
+            </div>
+            <div className="grid grid-cols-3 gap-3">
+              <div className="space-y-2 col-span-2">
+                <Label>端口</Label>
+                <Input
+                  type="number"
+                  value={cfg.port || 389}
+                  onChange={(e) => set('port', Number(e.target.value))}
+                />
+              </div>
+              <div className="space-y-2 flex flex-col">
+                <Label>LDAPS</Label>
+                <div className="pt-2">
+                  <Switch checked={cfg.useSSL} onCheckedChange={(v) => set('useSSL', v)} />
+                </div>
+              </div>
+            </div>
+            <div className="space-y-2 md:col-span-2">
+              <Label>Bind DN *</Label>
+              <Input
+                placeholder="cn=admin,dc=example,dc=com"
+                value={cfg.bindDN}
+                onChange={(e) => set('bindDN', e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Bind 密码 *</Label>
+              <PasswordInput
+                placeholder={cfg.hasPassword ? '已保存,输入新密码以修改' : '管理员密码'}
+                value={cfg.bindPassword}
+                onChange={(e) => set('bindPassword', e.target.value)}
+                autoComplete="new-password"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Base DN *</Label>
+              <Input
+                placeholder="dc=example,dc=com"
+                value={cfg.baseDN}
+                onChange={(e) => set('baseDN', e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>用户过滤器</Label>
+              <Input value={cfg.userFilter} onChange={(e) => set('userFilter', e.target.value)} />
+            </div>
+            <div className="grid grid-cols-3 gap-3">
+              <div className="space-y-2">
+                <Label>用户名</Label>
+                <Input value={cfg.usernameAttr} onChange={(e) => set('usernameAttr', e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label>姓名</Label>
+                <Input value={cfg.nameAttr} onChange={(e) => set('nameAttr', e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label>邮箱</Label>
+                <Input value={cfg.emailAttr} onChange={(e) => set('emailAttr', e.target.value)} />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {testResult && (
+          <div
+            role="status"
+            className={`p-3 rounded-lg border text-sm ${
+              testResult.success
+                ? 'bg-success/10 border-success/30 text-success'
+                : 'bg-destructive/10 border-destructive/30 text-destructive'
+            }`}
+          >
+            {testResult.message}
+            {testResult.userInfo && (
+              <span className="block text-xs mt-1 opacity-80">
+                {testResult.userInfo.displayName} · {testResult.userInfo.email || '无邮箱'}
+              </span>
+            )}
+          </div>
+        )}
+
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={handleTest} disabled={testing || !cfg.enabled}>
+            {testing ? '测试中...' : '测试连接'}
+          </Button>
+          <Button onClick={handleSave} disabled={saving || !cfg.enabled}>
+            {saving ? '保存中...' : '保存配置'}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/settings/index.tsx
similarity index 68%
rename from frontend/src/pages/Settings.tsx
rename to frontend/src/pages/settings/index.tsx
index 0dfc0da..90f168b 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/settings/index.tsx
@@ -1,33 +1,35 @@
 import { memo, useCallback, useState } from 'react'
+import { useNavigate } from 'react-router'
 import { KeyRound, Settings as SettingsIcon } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { PasswordInput } from '@/components/PasswordInput'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { authApi } from '@/api'
+import { clearAuth } from '@/lib/auth-storage'
 import { toast } from 'sonner'
-import { PageHeader } from '@/components/PageHeader'
+import { PageContainer } from '@/components/PageContainer'
+import { LdapSection } from './components/LdapSection'
+
+// 构建指纹由 vite define 注入；本地 tsc/预览时回退
+const APP_VERSION = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'dev'
+const COMMIT_HASH = typeof __COMMIT_HASH__ !== 'undefined' ? __COMMIT_HASH__ : '-'
 
 // 系统信息常量
 const SYSTEM_INFO = [
-  { label: '版本', value: 'v1.0.0' },
+  { label: '版本', value: `${APP_VERSION} (${COMMIT_HASH})` },
   { label: '后端', value: 'Go + Gin + JSON 文件存储' },
   { label: '前端', value: 'React 19 + TypeScript + Tailwind CSS' },
   { label: '部署工具', value: 'kubectl + helm（镜像内置）' },
-  { label: '简介', value: '轻量级 K8s Loki 部署平台', align: 'right' as const },
+  { label: '简介', value: '轻量级 K8s Loki 部署平台' },
 ]
 
 /**
- * Settings 页面 - 优化版本
- * 
- * 优化点：
- * 1. React.memo 包裹组件
- * 2. 表单处理使用 useCallback 缓存
- * 3. alert() 替换为 sonner toast
- * 4. 使用 PageHeader 公共组件
- * 5. 提取常量避免重复创建
+ * 系统设置 — 修改密码 + 关于。
+ * 表单保持手写（字段少、校验已达标准）；成功后清空表单即反馈（成功静默）。
  */
-const Settings = memo(function Settings() {
+const SettingsPage = memo(function SettingsPage() {
+  const navigate = useNavigate()
   const [oldPassword, setOldPassword] = useState('')
   const [newPassword, setNewPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
@@ -47,10 +49,9 @@ const Settings = memo(function Settings() {
       setChanging(true)
       try {
         await authApi.changePassword(oldPassword, newPassword)
-        toast.success('密码修改成功')
-        setOldPassword('')
-        setNewPassword('')
-        setConfirmPassword('')
+        // 改密后后端已吊销当前会话(TokenVersion+1),主动登出回登录页
+        clearAuth()
+        navigate('/login', { replace: true })
       } catch (err: unknown) {
         const message = err instanceof Error ? err.message : '密码修改失败'
         toast.error(message)
@@ -58,16 +59,16 @@ const Settings = memo(function Settings() {
         setChanging(false)
       }
     },
-    [oldPassword, newPassword, confirmPassword]
+    [oldPassword, newPassword, confirmPassword, navigate]
   )
 
   return (
-    <div className="space-y-6">
-      <PageHeader title="系统设置" description="修改登录密码与查看系统信息" />
+    <PageContainer title="系统设置" description="修改登录密码、LDAP 接入与系统信息">
+      <LdapSection />
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* 修改密码 */}
-        <Card className="border-slate-200 dark:border-slate-800">
+        <Card className="border-border">
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <KeyRound className="w-4 h-4" />
@@ -78,41 +79,41 @@ const Settings = memo(function Settings() {
             <form onSubmit={handleChangePassword} className="space-y-4">
               <div className="space-y-2">
                 <Label htmlFor="old-pwd">当前密码</Label>
-                <Input
+                <PasswordInput
                   id="old-pwd"
-                  type="password"
                   value={oldPassword}
                   onChange={(e) => setOldPassword(e.target.value)}
                   placeholder="请输入当前密码"
                   required
+                  autoComplete="current-password"
                 />
               </div>
               <div className="space-y-2">
                 <Label htmlFor="new-pwd">新密码</Label>
-                <Input
+                <PasswordInput
                   id="new-pwd"
-                  type="password"
                   value={newPassword}
                   onChange={(e) => setNewPassword(e.target.value)}
                   placeholder="请输入新密码（至少 6 位）"
                   required
                   minLength={6}
+                  autoComplete="new-password"
                 />
               </div>
               <div className="space-y-2">
                 <Label htmlFor="confirm-pwd">确认新密码</Label>
-                <Input
+                <PasswordInput
                   id="confirm-pwd"
-                  type="password"
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   placeholder="请再次输入新密码"
                   required
+                  autoComplete="new-password"
                 />
               </div>
               <Button
                 type="submit"
-                className="bg-emerald-600 hover:bg-emerald-700"
+                className="bg-primary hover:bg-primary/90"
                 disabled={changing}
               >
                 {changing ? '修改中...' : '修改密码'}
@@ -122,11 +123,11 @@ const Settings = memo(function Settings() {
         </Card>
 
         {/* 关于 */}
-        <Card className="border-slate-200 dark:border-slate-800">
+        <Card className="border-border">
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <SettingsIcon className="w-4 h-4" />
-              关于 LokiDeploy
+              关于 opsx-loki
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -136,26 +137,20 @@ const Settings = memo(function Settings() {
                   key={item.label}
                   className={`flex justify-between py-2.5 ${
                     index < SYSTEM_INFO.length - 1
-                      ? 'border-b border-slate-100 dark:border-slate-800'
+                      ? 'border-b border-border'
                       : ''
                   }`}
                 >
-                  <span className="text-sm text-slate-500">{item.label}</span>
-                  <span
-                    className={`text-sm font-medium ${
-                      item.align === 'right' ? 'text-right' : ''
-                    }`}
-                  >
-                    {item.value}
-                  </span>
+                  <span className="text-sm text-muted-foreground">{item.label}</span>
+                  <span className="text-sm font-medium">{item.value}</span>
                 </div>
               ))}
             </div>
           </CardContent>
         </Card>
       </div>
-    </div>
+    </PageContainer>
   )
 })
 
-export default Settings
+export default SettingsPage
diff --git a/frontend/src/pages/storage/components/StorageCard.tsx b/frontend/src/pages/storage/components/StorageCard.tsx
new file mode 100644
index 0000000..7328d56
--- /dev/null
+++ b/frontend/src/pages/storage/components/StorageCard.tsx
@@ -0,0 +1,91 @@
+import { memo } from 'react'
+import { HardDrive, Star, Trash2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { InfoRow } from '@/components/InfoRow'
+import type { StorageConfig } from '@/types'
+import { STORAGE_TYPE_ICONS, STORAGE_TYPE_ICON_CLASS, STORAGE_TYPE_COLORS } from '../constants'
+
+interface StorageCardProps {
+  storage: StorageConfig
+  onSetDefault: (id: number) => void
+  onDelete: (s: StorageConfig) => void
+}
+
+/** 存储配置卡片 — 列表项展示与操作入口（删除传整个对象，供确认弹窗展示名称） */
+export const StorageCard = memo(function StorageCard({
+  storage,
+  onSetDefault,
+  onDelete,
+}: StorageCardProps) {
+  return (
+    <Card
+      className={`border-border hover:shadow-md transition-shadow ${
+        storage.isDefault ? 'ring-1 ring-primary' : ''
+      }`}
+    >
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2 min-w-0">
+            {(() => {
+              const Icon = STORAGE_TYPE_ICONS[storage.storageType] || HardDrive
+              const cls =
+                STORAGE_TYPE_ICON_CLASS[storage.storageType] || 'text-muted-foreground'
+              return <Icon className={`w-5 h-5 ${cls}`} />
+            })()}
+            <h3 className="font-semibold text-foreground truncate">
+              {storage.name}
+            </h3>
+          </div>
+          <div className="flex items-center gap-1 flex-shrink-0">
+            {storage.isDefault && (
+              <span className="px-1.5 py-0.5 rounded-full bg-success/10 text-primary text-xs font-medium flex items-center gap-0.5">
+                <Star className="w-3 h-3" />
+                默认
+              </span>
+            )}
+            <span
+              className={`px-2 py-0.5 rounded-full text-xs font-medium uppercase ${
+                STORAGE_TYPE_COLORS[storage.storageType] || 'bg-muted text-slate-600'
+              }`}
+            >
+              {storage.storageType}
+            </span>
+          </div>
+        </div>
+
+        <div className="space-y-1.5 text-xs text-muted-foreground mb-4">
+          <InfoRow label="访问地址" value={storage.endpoint || '默认'} valueClass="truncate max-w-[150px]" />
+          <InfoRow label="Bucket" value={storage.bucket} valueClass="truncate max-w-[150px]" />
+          {(storage.storageType === 's3' || storage.storageType === 'oss') && (
+            <InfoRow label="区域" value={storage.region || '无'} valueClass="truncate max-w-[150px]" />
+          )}
+          <InfoRow label="路径前缀" value={storage.pathPrefix || '无'} valueClass="truncate max-w-[150px]" />
+          <InfoRow label="不加密" value={storage.insecure ? '是' : '否'} />
+        </div>
+
+        <div className="flex gap-2 pt-3 border-t border-border">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onSetDefault(storage.id)}
+            disabled={storage.isDefault}
+          >
+            <Star className="w-3 h-3 mr-1" />
+            {storage.isDefault ? '默认' : '设为默认'}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={`删除存储配置 ${storage.name}`}
+            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            onClick={() => onDelete(storage)}
+          >
+            <Trash2 className="w-3 h-3" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/storage/components/StorageFormDialog.tsx b/frontend/src/pages/storage/components/StorageFormDialog.tsx
new file mode 100644
index 0000000..ee8718c
--- /dev/null
+++ b/frontend/src/pages/storage/components/StorageFormDialog.tsx
@@ -0,0 +1,369 @@
+import { memo, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { HardDrive, PlugZap } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { storageApi, type StorageTestResult } from '@/api'
+import { PasswordInput } from '@/components/PasswordInput'
+import { toast } from 'sonner'
+import { STORAGE_TYPE_ICONS, STORAGE_TYPE_ICON_CLASS, STORAGE_TYPES } from '../constants'
+
+// 表单 schema：zod 为唯一校验源，消息中文且具体
+const storageFormSchema = z.object({
+  name: z.string().min(1, '请输入存储配置名称'),
+  storageType: z.enum(['s3', 'oss', 'minio', 'rustfs']),
+  endpoint: z.string().optional(),
+  bucket: z.string().min(1, '请填写 Bucket 名称'),
+  region: z.string().optional(),
+  accessKey: z.string().optional(),
+  secretKey: z.string().optional(),
+  pathPrefix: z.string().optional(),
+  insecure: z.boolean(),
+  isDefault: z.boolean(),
+})
+
+type StorageFormValues = z.infer<typeof storageFormSchema>
+
+const DEFAULT_VALUES: StorageFormValues = {
+  name: '',
+  storageType: 'minio',
+  endpoint: '',
+  bucket: '',
+  region: '',
+  accessKey: '',
+  secretKey: '',
+  pathPrefix: 'loki',
+  insecure: false,
+  isDefault: false,
+}
+
+interface StorageFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 创建成功回调（父级刷新列表并关闭弹窗） */
+  onCreated: () => void
+}
+
+/** 添加存储配置弹窗 — react-hook-form + zod，自包含表单逻辑，页面只传开关与回调 */
+export const StorageFormDialog = memo(function StorageFormDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: StorageFormDialogProps) {
+  const [submitting, setSubmitting] = useState(false)
+  const [testing, setTesting] = useState(false)
+  const [testResult, setTestResult] = useState<StorageTestResult | null>(null)
+  const [createIfMissing, setCreateIfMissing] = useState(true)
+
+  const form = useForm<StorageFormValues>({
+    resolver: zodResolver(storageFormSchema),
+    defaultValues: DEFAULT_VALUES,
+  })
+  const storageType = form.watch('storageType')
+  // 区域仅对公有云(s3/oss)有意义;minio/rustfs 为本地部署不显示、不提交
+  const isCloudStorage = storageType === 's3' || storageType === 'oss'
+
+  // 打开时重置（默认值），关闭/重开时机明确
+  useEffect(() => {
+    if (open) {
+      form.reset(DEFAULT_VALUES)
+      setTestResult(null)
+    }
+  }, [open, form])
+
+  // 测试连接:用当前表单值(未保存)直连对象存储验证
+  const handleTest = async () => {
+    const values = form.getValues()
+    if (!values.bucket.trim() || !values.accessKey?.trim() || !values.secretKey?.trim()) {
+      toast.error('请先填写 Bucket 与 Access Key / Secret Key')
+      return
+    }
+    setTesting(true)
+    setTestResult(null)
+    try {
+      const result = await storageApi.test({
+        storageType: values.storageType,
+        endpoint: values.endpoint,
+        bucket: values.bucket,
+        region: isCloudStorage ? values.region : undefined,
+        accessKey: values.accessKey,
+        secretKey: values.secretKey,
+        insecure: values.insecure,
+        createIfMissing,
+      })
+      setTestResult(result)
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '测试连接失败')
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    if (!isCloudStorage) {
+      values.region = ''
+    }
+    setSubmitting(true)
+    try {
+      await storageApi.create(values)
+      onOpenChange(false)
+      onCreated()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '创建存储配置失败')
+    } finally {
+      setSubmitting(false)
+    }
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>添加存储配置</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>名称 *</FormLabel>
+                  <FormControl>
+                    <Input placeholder="production-minio" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="storageType"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>存储类型</FormLabel>
+                  <FormControl>
+                    <div className="grid grid-cols-4 gap-2">
+                      {STORAGE_TYPES.map((type) => (
+                        <button
+                          key={type}
+                          type="button"
+                          onClick={() => field.onChange(type)}
+                          className={`flex flex-col items-center gap-1 p-3 rounded-lg border transition-all ${
+                            field.value === type
+                              ? 'border-primary bg-primary/10 text-primary'
+                              : 'border-border hover:border-input text-slate-600'
+                          }`}
+                        >
+                          {(() => {
+                            const Icon = STORAGE_TYPE_ICONS[type] || HardDrive
+                            return <Icon className={`w-5 h-5 ${STORAGE_TYPE_ICON_CLASS[type] || ''}`} />
+                          })()}
+                          <span className="text-xs font-medium uppercase">{type}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="endpoint"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>访问地址</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={
+                        storageType === 's3'
+                          ? 's3.amazonaws.com'
+                          : storageType === 'oss'
+                            ? 'oss-cn-hangzhou.aliyuncs.com'
+                            : 'http://10.0.0.8:9000'
+                      }
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className={isCloudStorage ? 'grid grid-cols-2 gap-4' : ''}>
+              <FormField
+                control={form.control}
+                name="bucket"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Bucket *</FormLabel>
+                    <FormControl>
+                      <Input placeholder="loki-logs" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {isCloudStorage && (
+                <FormField
+                  control={form.control}
+                  name="region"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>区域</FormLabel>
+                      <FormControl>
+                        <Input placeholder="us-east-1" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="accessKey"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Access Key</FormLabel>
+                    <FormControl>
+                      <Input placeholder="minioadmin" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="secretKey"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Secret Key</FormLabel>
+                    <FormControl>
+                      <PasswordInput placeholder="minioadmin" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="pathPrefix"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>路径前缀</FormLabel>
+                  <FormControl>
+                    <Input placeholder="loki" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex flex-wrap items-center gap-6">
+              <FormField
+                control={form.control}
+                name="insecure"
+                render={({ field }) => (
+                  <FormItem className="flex items-center gap-2 space-y-0">
+                    <FormControl>
+                      <Switch
+                        id="s-insecure"
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <Label htmlFor="s-insecure">不加密 (HTTP)</Label>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="isDefault"
+                render={({ field }) => (
+                  <FormItem className="flex items-center gap-2 space-y-0">
+                    <FormControl>
+                      <Switch
+                        id="s-default"
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <Label htmlFor="s-default">设为默认</Label>
+                  </FormItem>
+                )}
+              />
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="s-autocreate"
+                  checked={createIfMissing}
+                  onCheckedChange={setCreateIfMissing}
+                />
+                <Label htmlFor="s-autocreate">测试时桶不存在则自动创建</Label>
+              </div>
+            </div>
+
+            {testResult && (
+              <div
+                className={`p-3 rounded-lg border text-sm ${
+                  testResult.authenticated && testResult.bucketExists
+                    ? 'bg-success/10 border-success/30 text-success'
+                    : 'bg-destructive/10 border-destructive/30 text-destructive'
+                }`}
+                role="status"
+              >
+                {testResult.message}
+              </div>
+            )}
+
+            <div className="flex gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                className="flex-1"
+                disabled={testing || submitting}
+                onClick={handleTest}
+              >
+                <PlugZap className="w-4 h-4 mr-1" />
+                {testing ? '测试中...' : '测试连接'}
+              </Button>
+              <Button
+                type="submit"
+                className="flex-1 bg-primary hover:bg-primary/90"
+                disabled={submitting}
+              >
+                {submitting ? '添加中...' : '添加存储'}
+              </Button>
+            </div>
+
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/storage/constants.ts b/frontend/src/pages/storage/constants.ts
new file mode 100644
index 0000000..39dc16d
--- /dev/null
+++ b/frontend/src/pages/storage/constants.ts
@@ -0,0 +1,25 @@
+import { Cloud, Database, Package, type LucideIcon } from 'lucide-react'
+
+// 存储类型展示常量（卡片与表单共用）— 图标存组件引用，渲染由消费方完成
+export const STORAGE_TYPE_ICONS: Record<string, LucideIcon> = {
+  s3: Cloud,
+  oss: Cloud,
+  minio: Database,
+  rustfs: Package,
+}
+
+export const STORAGE_TYPE_ICON_CLASS: Record<string, string> = {
+  s3: 'text-warning',
+  oss: 'text-destructive',
+  minio: 'text-info',
+  rustfs: 'text-info',
+}
+
+export const STORAGE_TYPE_COLORS: Record<string, string> = {
+  s3: 'bg-warning/10 text-warning',
+  oss: 'bg-destructive/10 text-destructive',
+  minio: 'bg-info/10 text-info',
+  rustfs: 'bg-info/10 text-info',
+}
+
+export const STORAGE_TYPES = ['s3', 'oss', 'minio', 'rustfs'] as const
diff --git a/frontend/src/pages/storage/index.tsx b/frontend/src/pages/storage/index.tsx
new file mode 100644
index 0000000..40b8611
--- /dev/null
+++ b/frontend/src/pages/storage/index.tsx
@@ -0,0 +1,136 @@
+import { useEffect, memo, useCallback, useState } from 'react'
+import { HardDrive, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { storageApi, deploymentApi } from '@/api'
+import { PageContainer } from '@/components/PageContainer'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { EmptyState } from '@/components/EmptyState'
+import { ErrorState } from '@/components/ErrorState'
+import { PaginationBar } from '@/components/PaginationBar'
+import { ConfirmDialog } from '@/components/ConfirmDialog'
+import { toast } from 'sonner'
+import { useListQuery } from '@/hooks/useListQuery'
+import type { StorageConfig } from '@/types'
+import { StorageCard } from './components/StorageCard'
+import { StorageFormDialog } from './components/StorageFormDialog'
+
+/**
+ * 存储配置页 — 只做编排：数据走 useListQuery（取消+版本号），
+ * 卡片/表单/删除确认为域内子组件。成功操作静默（列表刷新即反馈）。
+ */
+const StoragePage = memo(function StoragePage() {
+  const query = useListQuery<StorageConfig>((params, signal) =>
+    storageApi.list(params, { signal })
+  )
+
+  const [formOpen, setFormOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<StorageConfig | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const [depRefCount, setDepRefCount] = useState(0)
+  useEffect(() => {
+    if (!deleteTarget) return
+    deploymentApi
+      .list({ page: 1, pageSize: 100 })
+      .then((d) => setDepRefCount(d.list.filter((x) => x.storageConfigID === deleteTarget.id).length))
+      .catch(() => setDepRefCount(0))
+  }, [deleteTarget])
+
+  const handleDelete = useCallback(async () => {
+    const id = deleteTarget?.id
+    if (!id) return
+    setDeleting(true)
+    try {
+      await storageApi.remove(id)
+      setDeleteTarget(null)
+      query.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '删除存储配置失败')
+    } finally {
+      setDeleting(false)
+    }
+  }, [deleteTarget, query])
+
+  // 设为默认存储（后端保证唯一默认：置新默认会取消旧默认）
+  const handleSetDefault = useCallback(
+    async (id: number) => {
+      try {
+        await storageApi.update(id, { isDefault: true })
+        query.refresh()
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : '设置默认存储失败')
+      }
+    },
+    [query]
+  )
+
+  return (
+    <PageContainer
+      title="存储配置"
+      description="为 Loki 配置对象存储后端"
+      action={
+        <Button
+          className="bg-primary hover:bg-primary/90"
+          onClick={() => setFormOpen(true)}
+        >
+          <Plus className="w-4 h-4 mr-1" />
+          添加存储
+        </Button>
+      }
+    >
+      {query.loading ? (
+        <LoadingSpinner className="h-64" />
+      ) : query.error ? (
+        <ErrorState message={query.error} onRetry={query.refresh} />
+      ) : query.list.length === 0 ? (
+        <EmptyState
+          icon={HardDrive}
+          title="暂无存储配置"
+          description="添加第一个 Loki 存储后端"
+        />
+      ) : (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {query.list.map((storage) => (
+              <StorageCard
+                key={storage.id}
+                storage={storage}
+                onSetDefault={handleSetDefault}
+                onDelete={setDeleteTarget}
+              />
+            ))}
+          </div>
+          <PaginationBar
+            page={query.page}
+            pageSize={query.pageSize}
+            total={query.total}
+            onPageChange={query.setPage}
+          />
+        </>
+      )}
+
+      <StorageFormDialog
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        onCreated={query.reload}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        name={deleteTarget?.name}
+        loading={deleting}
+        description={
+          depRefCount > 0
+            ? `确定要删除「${deleteTarget?.name}」吗?警告:仍有 ${depRefCount} 个部署使用该存储,删除后这些部署的对象存储配置将失效。`
+            : undefined
+        }
+        onConfirm={handleDelete}
+      />
+    </PageContainer>
+  )
+})
+
+export default StoragePage
diff --git a/frontend/src/pages/users/components/LdapImportDialog.tsx b/frontend/src/pages/users/components/LdapImportDialog.tsx
new file mode 100644
index 0000000..73eef95
--- /dev/null
+++ b/frontend/src/pages/users/components/LdapImportDialog.tsx
@@ -0,0 +1,203 @@
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router'
+import { Users, RefreshCw } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { ldapApi, type LdapUserPreview, type LdapImportResult } from '@/api/ldap'
+import { toast } from 'sonner'
+import type { User } from '@/types'
+
+interface LdapImportDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 本地用户列表(用于标记已导入,禁选) */
+  localUsers: User[]
+  onImported: () => void
+}
+
+/**
+ * 从 LDAP 导入用户弹窗 — 打开即拉取 LDAP 用户列表;
+ * 已导入(LDAP 来源)置灰禁选;本地同名用户标注「将转为 LDAP」。
+ */
+export const LdapImportDialog = memo(function LdapImportDialog({
+  open,
+  onOpenChange,
+  localUsers,
+  onImported,
+}: LdapImportDialogProps) {
+  const [loading, setLoading] = useState(false)
+  const [importing, setImporting] = useState(false)
+  const [users, setUsers] = useState<LdapUserPreview[]>([])
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [result, setResult] = useState<LdapImportResult | null>(null)
+  const [error, setError] = useState('')
+
+  const localMap = useMemo(() => {
+    const m = new Map<string, User>()
+    localUsers.forEach((u) => m.set(u.username, u))
+    return m
+  }, [localUsers])
+
+  const loadUsers = useCallback(async () => {
+    setLoading(true)
+    setError('')
+    setResult(null)
+    try {
+      const list = await ldapApi.listUsers()
+      setUsers(list)
+      setSelected(new Set())
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '加载 LDAP 用户失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (open) void loadUsers()
+  }, [open, loadUsers])
+
+  const toggle = (username: string, disabled: boolean) => {
+    if (disabled) return
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(username)) next.delete(username)
+      else next.add(username)
+      return next
+    })
+  }
+
+  const handleImport = async () => {
+    const picked = users.filter((u) => selected.has(u.username))
+    if (picked.length === 0) return
+    setImporting(true)
+    try {
+      const r = await ldapApi.batchImport(
+        picked.map((u) => ({
+          dn: u.dn, username: u.username, nickname: u.displayName, email: u.email,
+        }))
+      )
+      setResult(r)
+      onImported()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '导入失败')
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>从 LDAP 导入用户</DialogTitle>
+          <DialogDescription>
+            来自 LDAP 目录的用户;导入后使用 LDAP 密码登录,角色为普通用户
+          </DialogDescription>
+        </DialogHeader>
+
+        {result ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-4 text-sm">
+              {result.successCount > 0 && (
+                <span className="text-success">新增 {result.successCount}</span>
+              )}
+              {result.updatedCount > 0 && <span className="text-info">转为 LDAP {result.updatedCount}</span>}
+              {result.skippedCount > 0 && <span className="text-muted-foreground">跳过 {result.skippedCount}</span>}
+              {result.failedCount > 0 && <span className="text-destructive">失败 {result.failedCount}</span>}
+            </div>
+            {result.failedUsers.length > 0 && (
+              <div className="text-xs text-destructive space-y-1 max-h-32 overflow-y-auto">
+                {result.failedUsers.map((f) => (
+                  <p key={f.username}>{f.username}:{f.error}</p>
+                ))}
+              </div>
+            )}
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => void loadUsers()}>继续导入</Button>
+              <Button onClick={() => onOpenChange(false)}>完成</Button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-center justify-between">
+              <p className="text-xs text-muted-foreground">
+                {loading ? '加载 LDAP 用户…' : `共 ${users.length} 个用户,已选 ${selected.size} 个`}
+              </p>
+              <Button variant="ghost" size="sm" onClick={() => void loadUsers()} disabled={loading}>
+                <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
+              </Button>
+            </div>
+            {error ? (
+              <div className="space-y-3">
+                <p className="text-sm text-destructive">{error}</p>
+                <p className="text-xs text-muted-foreground">
+                  请到
+                  <Link to="/settings" className="text-primary mx-1">系统设置</Link>
+                  检查 LDAP 配置与启用状态
+                </p>
+              </div>
+            ) : (
+              <ScrollArea className="h-72 rounded-lg border border-border">
+                <div className="divide-y divide-border">
+                  {users.map((u) => {
+                    const local = localMap.get(u.username)
+                    const isLdapAlready = local?.['authSource'] === 'ldap'
+                    const willConvert = !!local && !isLdapAlready
+                    const disabled = isLdapAlready
+                    const checked = selected.has(u.username)
+                    return (
+                      <label
+                        key={u.dn}
+                        className={`flex items-center gap-3 px-3 py-2.5 ${disabled ? 'opacity-50' : 'cursor-pointer hover:bg-muted/50'}`}
+                      >
+                        <Checkbox
+                          checked={checked}
+                          disabled={disabled}
+                          onCheckedChange={() => toggle(u.username, disabled)}
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium">{u.username}</span>
+                            {isLdapAlready && (
+                              <span className="text-xs text-muted-foreground">已导入</span>
+                            )}
+                            {willConvert && (
+                              <span className="text-xs text-info">本地同名,将转为 LDAP</span>
+                            )}
+                          </div>
+                          <p className="text-xs text-muted-foreground truncate">
+                            {u.displayName || '无姓名'} · {u.email || '无邮箱'}
+                          </p>
+                        </div>
+                      </label>
+                    )
+                  })}
+                  {!loading && users.length === 0 && (
+                    <div className="flex items-center justify-center gap-2 py-10 text-muted-foreground text-sm">
+                      <Users className="w-4 h-4" /> 目录下没有用户
+                    </div>
+                  )}
+                </div>
+              </ScrollArea>
+            )}
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+              <Button onClick={handleImport} disabled={importing || selected.size === 0}>
+                {importing ? '导入中...' : `导入 ${selected.size} 个用户`}
+              </Button>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/users/components/ResetPasswordDialog.tsx b/frontend/src/pages/users/components/ResetPasswordDialog.tsx
new file mode 100644
index 0000000..a2bf0da
--- /dev/null
+++ b/frontend/src/pages/users/components/ResetPasswordDialog.tsx
@@ -0,0 +1,124 @@
+import { memo, useEffect, useState } from 'react'
+import { Dice5 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Label } from '@/components/ui/label'
+import { PasswordInput } from '@/components/PasswordInput'
+import { userApi } from '@/api'
+import { toast } from 'sonner'
+import type { User } from '@/types'
+
+// 随机密码：12 位，大小写字母 + 数字，满足后端 min=6
+function randomPassword(): string {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789'
+  let pwd = ''
+  const array = new Uint32Array(12)
+  crypto.getRandomValues(array)
+  for (let i = 0; i < 12; i++) {
+    pwd += chars[array[i] % chars.length]
+  }
+  return pwd
+}
+
+interface ResetPasswordDialogProps {
+  user: User | null
+  onClose: () => void
+  /** 重置成功回调（提示信息由调用方决定） */
+  onReset: () => void
+}
+
+/** 管理员重置密码弹窗 — 重置后目标用户全部旧会话立即失效（后端递增 TokenVersion） */
+export const ResetPasswordDialog = memo(function ResetPasswordDialog({
+  user,
+  onClose,
+  onReset,
+}: ResetPasswordDialogProps) {
+  const [password, setPassword] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (user) {
+      setPassword('')
+      setError('')
+    }
+  }, [user])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (password.length < 6) {
+      setError('密码至少需要 6 位')
+      return
+    }
+    if (!user) return
+    setSubmitting(true)
+    try {
+      await userApi.resetPassword(user.id, password)
+      onClose()
+      onReset()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '重置密码失败')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <Dialog open={user !== null} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>重置密码</DialogTitle>
+          <DialogDescription>
+            重置「{user?.username}」的密码后，该用户的所有登录会话将立即失效。
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="reset-password">新密码 *</Label>
+            <div className="flex gap-2">
+              <PasswordInput
+                id="reset-password"
+                className="flex-1"
+                placeholder="至少 6 位"
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.target.value)
+                  setError('')
+                }}
+                autoComplete="new-password"
+                required
+              />
+              <Button
+                type="button"
+                variant="outline"
+                aria-label="随机生成密码"
+                title="随机生成密码"
+                onClick={() => {
+                  setPassword(randomPassword())
+                  setError('')
+                }}
+              >
+                <Dice5 className="w-4 h-4" />
+              </Button>
+            </div>
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={onClose} disabled={submitting}>
+              取消
+            </Button>
+            <Button type="submit" disabled={submitting || password.length < 6}>
+              {submitting ? '重置中...' : '重置密码'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/users/components/UserFormDialog.tsx b/frontend/src/pages/users/components/UserFormDialog.tsx
new file mode 100644
index 0000000..5d7ae08
--- /dev/null
+++ b/frontend/src/pages/users/components/UserFormDialog.tsx
@@ -0,0 +1,174 @@
+import { memo, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { PasswordInput } from '@/components/PasswordInput'
+import { userApi } from '@/api'
+import { toast } from 'sonner'
+
+const userFormSchema = z.object({
+  username: z
+    .string()
+    .min(2, '用户名至少 2 个字符')
+    .max(32, '用户名最多 32 个字符'),
+  nickname: z.string().optional(),
+  password: z.string().min(6, '密码至少需要 6 位'),
+  role: z.enum(['admin', 'user']),
+})
+
+export type UserFormValues = z.infer<typeof userFormSchema>
+
+const DEFAULT_VALUES: UserFormValues = {
+  username: '',
+  nickname: '',
+  password: '',
+  role: 'user',
+}
+
+interface UserFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onCreated: () => void
+}
+
+/** 创建用户弹窗 — admin 专用，RHF + zod */
+export const UserFormDialog = memo(function UserFormDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: UserFormDialogProps) {
+  const [submitting, setSubmitting] = useState(false)
+
+  const form = useForm<UserFormValues>({
+    resolver: zodResolver(userFormSchema),
+    defaultValues: DEFAULT_VALUES,
+  })
+
+  useEffect(() => {
+    if (open) {
+      form.reset(DEFAULT_VALUES)
+    }
+  }, [open, form])
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    setSubmitting(true)
+    try {
+      await userApi.create({
+        username: values.username,
+        nickname: values.nickname || undefined,
+        password: values.password,
+        role: values.role,
+      })
+      onOpenChange(false)
+      onCreated()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '创建用户失败')
+    } finally {
+      setSubmitting(false)
+    }
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>创建用户</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>用户名 *</FormLabel>
+                  <FormControl>
+                    <Input placeholder="登录用户名" autoComplete="off" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="nickname"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>昵称</FormLabel>
+                  <FormControl>
+                    <Input placeholder="显示昵称（可选）" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>初始密码 *</FormLabel>
+                  <FormControl>
+                    <PasswordInput
+                      placeholder="至少 6 位"
+                      autoComplete="new-password"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="role"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>角色 *</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="选择角色" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="user">普通用户</SelectItem>
+                      <SelectItem value="admin">管理员</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" className="w-full" disabled={submitting}>
+              {submitting ? '创建中...' : '创建用户'}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+})
diff --git a/frontend/src/pages/users/index.tsx b/frontend/src/pages/users/index.tsx
new file mode 100644
index 0000000..7f617ac
--- /dev/null
+++ b/frontend/src/pages/users/index.tsx
@@ -0,0 +1,223 @@
+import { memo, useCallback, useEffect, useState } from 'react'
+import { Users, UserRound, UsersRound, Plus, KeyRound, Trash2, ShieldCheck } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { userApi } from '@/api'
+import { PageContainer } from '@/components/PageContainer'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { EmptyState } from '@/components/EmptyState'
+import { ErrorState } from '@/components/ErrorState'
+import { ConfirmDialog } from '@/components/ConfirmDialog'
+import { useListQuery } from '@/hooks/useListQuery'
+import { ldapApi, type LdapConfig } from '@/api/ldap'
+import { LdapImportDialog } from './components/LdapImportDialog'
+import { getUser } from '@/lib/auth-storage'
+import { toast } from 'sonner'
+import type { User } from '@/types'
+import { UserFormDialog } from './components/UserFormDialog'
+import { ResetPasswordDialog } from './components/ResetPasswordDialog'
+
+/** 角色徽章 */
+function SourceBadge({ source }: { source?: string }) {
+  return (
+	<span className="inline-flex items-center px-2 py-0.5 rounded-full bg-info/10 text-info text-xs font-medium">
+		{source === 'ldap' ? 'LDAP 导入' : '本地账号'}
+    </span>
+  )
+}
+
+function RoleBadge({ role }: { role: string }) {
+  return role === 'admin' ? (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-success/10 text-success text-xs font-medium">
+      <ShieldCheck className="w-3 h-3" />
+      管理员
+    </span>
+  ) : (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-muted text-muted-foreground text-xs font-medium">
+      普通用户
+    </span>
+  )
+}
+
+/**
+ * 用户管理页（admin 专用，无 RBAC — 用户仅 admin/user 两级）
+ * - 非 admin 直访时显示权限提示空态（后端 AdminAuth 403 兜底）
+ * - 单卡片行列表 + 创建/重置密码/删除；成功操作静默（反馈分级）
+ */
+const UsersPage = memo(function UsersPage() {
+  const currentUser = getUser()
+  const isAdmin = currentUser?.role === 'admin'
+
+  const query = useListQuery<User>((params, signal) =>
+    userApi.list(params, { signal })
+  )
+
+  const [formOpen, setFormOpen] = useState(false)
+  const [ldapImportOpen, setLdapImportOpen] = useState(false)
+  // LDAP 已启用且配置齐全才显示「从 LDAP 导入」(用户要求的联动)
+  const [ldapReady, setLdapReady] = useState(false)
+
+  useEffect(() => {
+    ldapApi
+      .getConfig()
+      .then((c: LdapConfig) => setLdapReady(!!(c.enabled && c.configured)))
+      .catch(() => setLdapReady(false))
+  }, [])
+  const [resetTarget, setResetTarget] = useState<User | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<User | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const handleDelete = useCallback(async () => {
+    const id = deleteTarget?.id
+    if (!id) return
+    setDeleting(true)
+    try {
+      await userApi.remove(id)
+      setDeleteTarget(null)
+      query.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '删除用户失败')
+    } finally {
+      setDeleting(false)
+    }
+  }, [deleteTarget, query])
+
+  // 非管理员:菜单不可见,直访时给明确提示
+  if (!isAdmin) {
+    return (
+      <PageContainer title="用户管理">
+        <EmptyState
+          icon={UserRound}
+          title="需要管理员权限"
+          description="用户管理仅管理员可用，请联系管理员处理账号事宜"
+        />
+      </PageContainer>
+    )
+  }
+
+  return (
+    <PageContainer
+      title="用户管理"
+      description="管理平台登录账号（仅管理员）"
+      action={
+        <div className="flex items-center gap-2">
+          {ldapReady && (
+            <Button variant="outline" onClick={() => setLdapImportOpen(true)}>
+              <UsersRound className="w-4 h-4 mr-1" />
+              从 LDAP 导入
+            </Button>
+          )}
+          <Button onClick={() => setFormOpen(true)}>
+            <Plus className="w-4 h-4 mr-1" />
+            创建用户
+          </Button>
+        </div>
+      }
+    >
+      {query.loading ? (
+        <LoadingSpinner className="h-64" />
+      ) : query.error ? (
+        <ErrorState message={query.error} onRetry={query.refresh} />
+      ) : query.list.length === 0 ? (
+        <EmptyState icon={Users} title="暂无用户" description="创建第一个用户账号" />
+      ) : (
+        <Card className="border-border">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base flex items-center gap-2">
+              <Users className="w-4 h-4" />
+              用户列表（共 {query.total} 个）
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-0">
+            <div className="divide-y divide-border">
+              {query.list.map((user) => (
+                <div
+                  key={user.id}
+                  className="flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className="w-9 h-9 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+                      <UserRound className="w-4 h-4 text-muted-foreground" />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium truncate">{user.username}</span>
+                        <RoleBadge role={user.role} />
+                        <SourceBadge source={user.authSource} />
+                        {user.id === currentUser?.id && (
+                          <span className="text-xs text-muted-foreground">（当前登录）</span>
+                        )}
+                      </div>
+                      <p className="text-xs text-muted-foreground truncate mt-0.5">
+                        {user.nickname || '未设置昵称'}
+                        {user.createdAt &&
+                          ` · 创建于 ${new Date(user.createdAt).toLocaleDateString()}`}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                    {user.authSource !== 'ldap' && (
+                      <Button variant="outline" size="sm" onClick={() => setResetTarget(user)}>
+                        <KeyRound className="w-3.5 h-3.5 mr-1" />
+                        重置密码
+                      </Button>
+                    )}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      aria-label={`删除用户 ${user.username}`}
+                      className="text-destructive hover:bg-destructive/10"
+                      disabled={user.id === currentUser?.id}
+                      title={
+                        user.id === currentUser?.id ? '不能删除当前登录账号' : undefined
+                      }
+                      onClick={() => setDeleteTarget(user)}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <UserFormDialog
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        onCreated={query.reload}
+      />
+
+      <LdapImportDialog
+        open={ldapImportOpen}
+        onOpenChange={setLdapImportOpen}
+        localUsers={query.list}
+        onImported={query.refresh}
+      />
+
+      <ResetPasswordDialog
+        key={resetTarget?.id ?? 'none'}
+        user={resetTarget}
+        onClose={() => setResetTarget(null)}
+        onReset={() => {
+          toast.info(`已重置「${resetTarget?.username}」的密码，其所有会话已失效`)
+          setResetTarget(null)
+        }}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        name={deleteTarget?.username}
+        title="确认删除用户"
+        onConfirm={handleDelete}
+        loading={deleting}
+      />
+    </PageContainer>
+  )
+})
+
+export default UsersPage
diff --git a/frontend/src/pages/wizard/components/StepDeploy.tsx b/frontend/src/pages/wizard/components/StepDeploy.tsx
new file mode 100644
index 0000000..0a946ee
--- /dev/null
+++ b/frontend/src/pages/wizard/components/StepDeploy.tsx
@@ -0,0 +1,143 @@
+import { memo, useState } from 'react'
+import { Plus, Rocket, ExternalLink } from 'lucide-react'
+import { Link } from 'react-router'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { StatusBadge } from '@/components/StatusBadge'
+import { deploymentApi } from '@/api'
+import { toast } from 'sonner'
+import { DeploymentFormDialog } from '@/pages/deployments/components/DeploymentFormDialog'
+import type { Cluster, Host, StorageConfig } from '@/types'
+
+interface StepDeployProps {
+  runningLoki: {
+    id: number
+    name: string
+    mode: string
+    endpoint: string
+    namespace: string
+    grafana: boolean
+    grafanaEndpoint?: string
+  } | null
+  clusters: Cluster[]
+  hosts: Host[]
+  storages: StorageConfig[]
+  onChanged: () => void
+}
+
+/**
+ * 步骤③ 部署 Loki(与 Grafana)— 创建后自动触发部署;
+ * 已有运行实例则展示状态卡(无需重复部署,可直接进入下一步)。
+ */
+export const StepDeploy = memo(function StepDeploy({
+  runningLoki,
+  clusters,
+  hosts,
+  storages,
+  onChanged,
+}: StepDeployProps) {
+  const [open, setOpen] = useState(false)
+  const [deploying, setDeploying] = useState<number | null>(null)
+
+  const handleCreated = async () => {
+    onChanged()
+    // 创建成功即自动触发部署,向导内完成闭环
+    try {
+      const list = await deploymentApi.list({ page: 1, pageSize: 5 })
+      const latest = list.list[0]
+      if (latest && latest.status === 'pending') {
+        setDeploying(latest.id)
+        await deploymentApi.deploy(latest.id)
+        toast.info(`已触发「${latest.name}」部署,可在部署页查看日志与进度`)
+      }
+    } catch {
+      // 列表/触发失败不打断向导,用户可到部署页手动触发
+    } finally {
+      setDeploying(null)
+    }
+  }
+
+  return (
+    <Card className="border-border">
+      <CardContent className="p-5 space-y-3">
+        {runningLoki ? (
+          <div className="flex items-center justify-between gap-3 flex-wrap">
+            <div className="flex items-center gap-3 min-w-0">
+              <Rocket className="w-5 h-5 text-success flex-shrink-0" />
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium truncate">{runningLoki.name}</span>
+                  <StatusBadge status="running" />
+                  {runningLoki.grafana && (
+                    <span className="px-2 py-0.5 rounded-full bg-info/10 text-info text-xs">
+                      Grafana ✓
+                    </span>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground truncate mt-0.5">
+                  {runningLoki.mode} · 命名空间 {runningLoki.namespace || '-'} ·{' '}
+                  {runningLoki.endpoint || 'endpoint 待部署完成生成'}
+                </p>
+                {runningLoki.grafanaEndpoint && (
+                  <a
+                    href={runningLoki.grafanaEndpoint}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-primary hover:underline inline-flex items-center gap-1 mt-1"
+                  >
+                    <ExternalLink className="w-3 h-3" />
+                    打开 Grafana（{runningLoki.grafanaEndpoint.replace(/^https?:\/\//, '')} · admin/admin）
+                  </a>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {runningLoki.endpoint && (
+                <Button variant="outline" size="sm" asChild>
+                  <a
+                    href={runningLoki.mode === 'host-binary' ? runningLoki.endpoint : undefined}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={
+                      runningLoki.mode === 'k8s-helm' || runningLoki.mode === 'k8s-yaml'
+                        ? 'pointer-events-none opacity-50'
+                        : undefined
+                    }
+                  >
+                    <ExternalLink className="w-3.5 h-3.5 mr-1" />
+                    打开 Loki
+                  </a>
+                </Button>
+              )}
+              <Button variant="outline" size="sm" asChild>
+                <Link to="/deployments">部署详情</Link>
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center justify-between">
+            <p className="text-sm text-muted-foreground">
+              尚无运行中的 Loki —— 选择目标与模式(k8s 副本 / 主机二进制),可同时部署 Grafana
+            </p>
+            <Button size="sm" onClick={() => setOpen(true)}>
+              <Plus className="w-4 h-4 mr-1" />
+              创建部署
+            </Button>
+          </div>
+        )}
+        {deploying !== null && (
+          <p className="text-xs text-info">正在触发部署…</p>
+        )}
+
+        <DeploymentFormDialog
+          open={open}
+          onOpenChange={setOpen}
+          onCreated={handleCreated}
+          clusters={clusters}
+          hosts={hosts}
+          storages={storages}
+        />
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/wizard/components/StepEnv.tsx b/frontend/src/pages/wizard/components/StepEnv.tsx
new file mode 100644
index 0000000..cb8beb3
--- /dev/null
+++ b/frontend/src/pages/wizard/components/StepEnv.tsx
@@ -0,0 +1,136 @@
+import { memo, useState } from 'react'
+import { Boxes, Server, Plus, CheckCircle2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+import { ClusterFormDialog } from '@/pages/clusters/components/ClusterFormDialog'
+import { HostFormDialog } from '@/pages/hosts/components/HostFormDialog'
+
+type EnvKind = 'k8s' | 'host'
+
+interface StepEnvProps {
+  hasActiveCluster: boolean
+  hasActiveHost: boolean
+  clusterNames: string[]
+  hostNames: string[]
+  onChanged: () => void
+}
+
+/**
+ * 步骤① 选择部署环境与接入目标 —— 首步先定形态(K8s 集群 / 裸金属主机),
+ * 该选择分支决定后续所有步骤(Loki 模式、采集类型、Grafana 形态)。
+ */
+export const StepEnv = memo(function StepEnv({
+  hasActiveCluster,
+  hasActiveHost,
+  clusterNames,
+  hostNames,
+  onChanged,
+}: StepEnvProps) {
+  const [selected, setSelected] = useState<EnvKind | null>(null)
+  const [clusterOpen, setClusterOpen] = useState(false)
+  const [hostOpen, setHostOpen] = useState(false)
+
+  const envs: Array<{
+    kind: EnvKind
+    icon: typeof Boxes
+    title: string
+    desc: string
+    ready: boolean
+    names: string[]
+  }> = [
+    {
+      kind: 'k8s',
+      icon: Boxes,
+      title: 'Kubernetes 集群',
+      desc: '以 StatefulSet/Helm 部署 Loki 与 Grafana 副本,DaemonSet 采集容器日志',
+      ready: hasActiveCluster,
+      names: clusterNames,
+    },
+    {
+      kind: 'host',
+      icon: Server,
+      title: '裸金属主机',
+      desc: '以二进制 + systemd 部署 Loki 与 Grafana,采集指定日志文件',
+      ready: hasActiveHost,
+      names: hostNames,
+    },
+  ]
+
+  return (
+    <Card className="border-border">
+      <CardContent className="p-5 space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {envs.map((env) => {
+            const Icon = env.icon
+            const isSel = selected === env.kind
+            return (
+              <button
+                key={env.kind}
+                type="button"
+                onClick={() => setSelected(env.kind)}
+                className={cn(
+                  'text-left p-4 rounded-xl border-2 transition-all',
+                  isSel
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border hover:border-input bg-card'
+                )}
+                aria-pressed={isSel}
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    <Icon className={cn('w-5 h-5', isSel ? 'text-primary' : 'text-muted-foreground')} />
+                    <span className="font-semibold">{env.title}</span>
+                  </div>
+                  {env.ready && (
+                    <span className="inline-flex items-center gap-1 text-xs text-success">
+                      <CheckCircle2 className="w-3.5 h-3.5" />
+                      已就绪
+                    </span>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground leading-4">{env.desc}</p>
+                {env.names.length > 0 && (
+                  <p className="text-xs text-muted-foreground mt-2 truncate">
+                    已接入:{env.names.join('、')}
+                  </p>
+                )}
+              </button>
+            )
+          })}
+        </div>
+
+        {selected === 'k8s' && (
+          <div className="flex items-center justify-between rounded-lg bg-muted/50 p-3">
+            <p className="text-sm text-muted-foreground">
+              通过 kubeconfig 或 ServiceAccount Token 接入集群,创建后自动验证连通性
+            </p>
+            <Button size="sm" onClick={() => setClusterOpen(true)}>
+              <Plus className="w-4 h-4 mr-1" />
+              添加集群
+            </Button>
+          </div>
+        )}
+        {selected === 'host' && (
+          <div className="flex items-center justify-between rounded-lg bg-muted/50 p-3">
+            <p className="text-sm text-muted-foreground">
+              SSH 密钥或密码接入主机(用于部署与后续采集器安装)
+            </p>
+            <Button size="sm" onClick={() => setHostOpen(true)}>
+              <Plus className="w-4 h-4 mr-1" />
+              添加主机
+            </Button>
+          </div>
+        )}
+        {!selected && (
+          <p className="text-sm text-muted-foreground text-center py-1">
+            ↑ 选择部署环境后,此处提供对应的目标接入表单
+          </p>
+        )}
+
+        <ClusterFormDialog open={clusterOpen} onOpenChange={setClusterOpen} onCreated={onChanged} />
+        <HostFormDialog open={hostOpen} onOpenChange={setHostOpen} onCreated={onChanged} />
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/wizard/components/StepStorage.tsx b/frontend/src/pages/wizard/components/StepStorage.tsx
new file mode 100644
index 0000000..80a7221
--- /dev/null
+++ b/frontend/src/pages/wizard/components/StepStorage.tsx
@@ -0,0 +1,66 @@
+import { memo, useState } from 'react'
+import { Plus, CheckCircle2, Database } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { StorageFormDialog } from '@/pages/storage/components/StorageFormDialog'
+import { Link } from 'react-router'
+
+interface StepStorageProps {
+  hasStorage: boolean
+  defaultStorage: string
+  onChanged: () => void
+}
+
+/**
+ * 步骤② 准备存储 —— k8s 多副本强烈建议对象存储(本地磁盘亦可运行);
+ * 表单内置连接测试与「桶不存在自动创建」。
+ */
+export const StepStorage = memo(function StepStorage({
+  hasStorage,
+  defaultStorage,
+  onChanged,
+}: StepStorageProps) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Card className="border-border">
+      <CardContent className="p-5 space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm">
+            <Database className="w-4 h-4 text-muted-foreground" />
+            {hasStorage ? (
+              <span>
+                默认存储:<span className="font-medium text-foreground">{defaultStorage}</span>
+              </span>
+            ) : (
+              <span className="text-muted-foreground">
+                尚未配置存储 —— 可选本地 MinIO / RustFS,或 AWS / 阿里云对象存储
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {hasStorage && (
+              <Button variant="outline" size="sm" asChild>
+                <Link to="/storage">管理存储</Link>
+              </Button>
+            )}
+            <Button size="sm" onClick={() => setOpen(true)}>
+              <Plus className="w-4 h-4 mr-1" />
+              {hasStorage ? '添加存储' : '配置存储'}
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-start gap-2 rounded-lg bg-muted/50 p-3 text-xs text-muted-foreground leading-5">
+          <CheckCircle2 className="w-4 h-4 mt-0.5 text-success flex-shrink-0" />
+          <p>
+            推荐对象存储(MinIO / RustFS / S3 / OSS):多副本与数据保留更可靠。
+            添加时可用「测试连接」验证凭证,并自动创建不存在的桶;跳过则使用本地磁盘。
+          </p>
+        </div>
+
+        <StorageFormDialog open={open} onOpenChange={setOpen} onCreated={onChanged} />
+      </CardContent>
+    </Card>
+  )
+})
diff --git a/frontend/src/pages/wizard/components/WizardSteps.tsx b/frontend/src/pages/wizard/components/WizardSteps.tsx
new file mode 100644
index 0000000..16b8c60
--- /dev/null
+++ b/frontend/src/pages/wizard/components/WizardSteps.tsx
@@ -0,0 +1,62 @@
+import { memo } from 'react'
+import { Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export interface WizardStepInfo {
+  title: string
+  desc: string
+  done: boolean
+}
+
+/**
+ * 向导步骤地图 — 状态推导式(opsx-sec 范式):完成态由真实数据计算,
+ * 非用户点击;active = 第一个未完成步骤。可任意顺序操作,刷新不丢。
+ */
+export const WizardSteps = memo(function WizardSteps({ steps }: { steps: WizardStepInfo[] }) {
+  const activeIndex = steps.findIndex((s) => !s.done)
+
+  return (
+    <div className="flex items-start gap-0 overflow-x-auto pb-2" aria-label="部署流程">
+      {steps.map((step, i) => {
+        const isActive = i === activeIndex
+        const isDone = step.done
+        return (
+          <div key={step.title} className="flex items-start min-w-[150px] flex-1">
+            <div className="flex flex-col items-center gap-1.5 flex-1">
+              <div
+                className={cn(
+                  'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 border-2 transition-colors',
+                  isDone && 'bg-success border-success text-success-foreground',
+                  isActive && !isDone && 'bg-primary/10 border-primary text-primary animate-pulse',
+                  !isActive && !isDone && 'bg-muted border-border text-muted-foreground'
+                )}
+                aria-label={isDone ? `${step.title} 已完成` : `${step.title} 待完成`}
+              >
+                {isDone ? <Check className="w-4 h-4" /> : <span className="text-sm font-semibold">{i + 1}</span>}
+              </div>
+              <p
+                className={cn(
+                  'text-sm font-medium text-center',
+                  isDone && 'text-success',
+                  isActive && !isDone && 'text-primary',
+                  !isActive && !isDone && 'text-muted-foreground'
+                )}
+              >
+                {step.title}
+              </p>
+              <p className="text-xs text-muted-foreground text-center leading-4">{step.desc}</p>
+            </div>
+            {i < steps.length - 1 && (
+              <div
+                className={cn(
+                  'h-0.5 mt-[18px] -ml-1 -mr-1 flex-1 rounded min-w-[16px]',
+                  steps[i].done ? 'bg-success' : 'bg-border'
+                )}
+              />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+})
diff --git a/frontend/src/pages/wizard/index.tsx b/frontend/src/pages/wizard/index.tsx
new file mode 100644
index 0000000..355b6c2
--- /dev/null
+++ b/frontend/src/pages/wizard/index.tsx
@@ -0,0 +1,195 @@
+import { memo, useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router'
+import { RadioTower, ArrowRight, Plus } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { ErrorState } from '@/components/ErrorState'
+import { PageContainer } from '@/components/PageContainer'
+import { deploymentApi, clusterApi, hostApi, storageApi } from '@/api'
+import { Button } from '@/components/ui/button'
+import type { Cluster, Host, StorageConfig, LokiDeployment } from '@/types'
+import { WizardSteps, type WizardStepInfo } from './components/WizardSteps'
+import { StepEnv } from './components/StepEnv'
+import { StepStorage } from './components/StepStorage'
+import { StepDeploy } from './components/StepDeploy'
+import { CollectorFormDialog } from '@/pages/collectors/components/CollectorFormDialog'
+
+interface Preflight {
+  hasStorage: boolean
+  defaultStorage: string
+  hasActiveCluster: boolean
+  clusterNames: string[]
+  hasActiveHost: boolean
+  hostNames: string[]
+  runningLoki: null | {
+    id: number
+    name: string
+    mode: string
+    endpoint: string
+    namespace: string
+    grafana: boolean
+    grafanaEndpoint?: string
+  }
+  activeCollectors: number
+  grafanaReady: boolean
+}
+
+/**
+ * 部署向导 — 状态推导式流程地图(步骤完成态由真实数据计算,可任意顺序/中断续走):
+ * ①环境与目标 → ②存储 → ③Loki(+Grafana)→ ④采集
+ */
+const WizardPage = memo(function WizardPage() {
+  const [pre, setPre] = useState<Preflight | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [clusters, setClusters] = useState<Cluster[]>([])
+  const [hosts, setHosts] = useState<Host[]>([])
+  const [storages, setStorages] = useState<StorageConfig[]>([])
+  const [runningDeployments, setRunningDeployments] = useState<LokiDeployment[]>([])
+  const [collectorOpen, setCollectorOpen] = useState(false)
+
+  const refresh = useCallback(async () => {
+    try {
+      const [p, c, h, s, ds] = await Promise.all([
+        deploymentApi.preflight(),
+        clusterApi.list({ page: 1, pageSize: 50 }),
+        hostApi.list({ page: 1, pageSize: 50 }),
+        storageApi.list({ page: 1, pageSize: 50 }),
+        deploymentApi.list({ page: 1, pageSize: 50 }),
+      ])
+      setPre(p)
+      setClusters(c.list)
+      setHosts(h.list)
+      setStorages(s.list)
+      setRunningDeployments(ds.list.filter((x) => x.status === 'running'))
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '加载向导状态失败')
+    }
+  }, [])
+
+  useEffect(() => {
+    // refresh 为 async,setState 均发生在 await 之后(规则静态分析无法推断)
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    void refresh()
+  }, [refresh])
+
+  if (error) {
+    return (
+      <PageContainer title="部署向导">
+        <ErrorState message={error} onRetry={refresh} />
+      </PageContainer>
+    )
+  }
+  if (!pre) {
+    return <LoadingSpinner className="h-64" />
+  }
+
+  const steps: WizardStepInfo[] = [
+    {
+      title: '环境与目标',
+      desc: 'K8s 集群或裸金属主机',
+      done: pre.hasActiveCluster || pre.hasActiveHost,
+    },
+    { title: '准备存储', desc: '对象存储或本地磁盘', done: pre.hasStorage },
+    { title: '部署 Loki', desc: '日志查询平台内置', done: pre.runningLoki !== null },
+    { title: '配置采集', desc: '主机文件 / 集群 DaemonSet', done: pre.activeCollectors > 0 },
+  ]
+
+  const firstUndone = steps.findIndex((s) => !s.done)
+  const hints: string[] = []
+  if (firstUndone === 0) hints.push('先选择部署环境并接入集群或主机')
+  if (firstUndone === 1) hints.push('环境已就绪,建议先配置对象存储')
+  if (firstUndone === 2) hints.push('目标与存储已就绪,创建 Loki 部署吧')
+  if (firstUndone === 3) hints.push('Loki 已运行,添加采集策略开始收集日志')
+  if (firstUndone === -1) hints.push('全部就绪:日志正在收集,可到部署页查看与 Grafana 分析')
+
+  return (
+    <PageContainer
+      title="部署向导"
+      description="四步完成日志平台:环境 → 存储 → 部署 → 采集(步骤可按任意顺序完成)"
+    >
+      <Card className="border-border">
+        <CardContent className="p-5">
+          <WizardSteps steps={steps} />
+          <p className="text-sm text-muted-foreground text-center mt-3">
+            {hints.join(' · ')}
+          </p>
+        </CardContent>
+      </Card>
+
+      <StepEnv
+        hasActiveCluster={pre.hasActiveCluster}
+        hasActiveHost={pre.hasActiveHost}
+        clusterNames={pre.clusterNames}
+        hostNames={pre.hostNames}
+        onChanged={refresh}
+      />
+
+      <StepStorage
+        hasStorage={pre.hasStorage}
+        defaultStorage={pre.defaultStorage}
+        onChanged={refresh}
+      />
+
+      <StepDeploy
+        runningLoki={pre.runningLoki}
+        clusters={clusters}
+        hosts={hosts}
+        storages={storages}
+        onChanged={refresh}
+      />
+
+      {/* 步骤④ 采集引导 */}
+      <Card className="border-border">
+        <CardContent className="p-5">
+          <div className="flex items-center justify-between flex-wrap gap-3">
+            <div className="flex items-center gap-3">
+              <RadioTower className="w-5 h-5 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">
+                  日志采集策略
+                  {pre.activeCollectors > 0 && (
+                    <span className="ml-2 text-xs text-success">
+                      {pre.activeCollectors} 个采集中
+                    </span>
+                  )}
+                </p>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  主机:指定日志文件路径 · 集群:DaemonSet 全量容器日志(部署到关联 Loki 的命名空间)
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {runningDeployments.length > 0 && (
+                <Button
+                  variant={pre.activeCollectors > 0 ? 'outline' : 'default'}
+                  size="sm"
+                  onClick={() => setCollectorOpen(true)}
+                >
+                  <Plus className="w-3.5 h-3.5 mr-1" />
+                  添加采集策略
+                </Button>
+              )}
+              <Button variant="outline" size="sm" asChild>
+                <Link to="/collectors">
+                  管理采集
+                  <ArrowRight className="w-3.5 h-3.5 ml-1" />
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+        <CollectorFormDialog
+          open={collectorOpen}
+          onOpenChange={setCollectorOpen}
+          onCreated={refresh}
+          deployments={runningDeployments}
+          clusters={clusters}
+          hosts={hosts}
+        />
+    </PageContainer>
+  )
+})
+
+export default WizardPage
diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx
new file mode 100644
index 0000000..a1f6ff4
--- /dev/null
+++ b/frontend/src/router/routes.tsx
@@ -0,0 +1,61 @@
+// 路由配置 — 全站唯一路由声明处。
+// 页面组件一律 React.lazy 懒加载；菜单（menuItems）与页面标题（findRouteMeta）
+// 均由本文件派生，新增页面只需在这里加一条配置。
+import { lazy } from 'react';
+import {
+  LayoutDashboard,
+  Server,
+  Monitor,
+  HardDrive,
+  Rocket,
+  RadioTower,
+  Settings,
+  UsersRound,
+  Wand2,
+  ScrollText,
+} from 'lucide-react';
+import type { AppRoute, MenuItem, RouteMeta } from '@/types/router';
+
+const Login = lazy(() => import('@/pages/login'));
+const Dashboard = lazy(() => import('@/pages/dashboard'));
+const Clusters = lazy(() => import('@/pages/clusters'));
+const Hosts = lazy(() => import('@/pages/hosts'));
+const Storage = lazy(() => import('@/pages/storage'));
+const Deployments = lazy(() => import('@/pages/deployments'));
+const Collectors = lazy(() => import('@/pages/collectors'));
+const SettingsPage = lazy(() => import('@/pages/settings'));
+const NotFound = lazy(() => import('@/pages/not-found'));
+const WizardPage = lazy(() => import('@/pages/wizard'));
+const LogsPage = lazy(() => import('@/pages/logs'));
+const UsersPage = lazy(() => import('@/pages/users'));
+
+export const routes: AppRoute[] = [
+  { path: '/login', component: Login, auth: false, meta: { title: '登录', hideInMenu: true } },
+  { path: '/', component: Dashboard, auth: true, meta: { title: '仪表盘', icon: LayoutDashboard, order: 1, adminOnly: true } },
+  { path: '/wizard', component: WizardPage, auth: true, meta: { title: '部署向导', icon: Wand2, order: 2, adminOnly: true } },
+  { path: '/clusters', component: Clusters, auth: true, meta: { title: '集群管理', icon: Server, order: 3, adminOnly: true } },
+  { path: '/hosts', component: Hosts, auth: true, meta: { title: '主机管理', icon: Monitor, order: 4, adminOnly: true } },
+  { path: '/storage', component: Storage, auth: true, meta: { title: '存储配置', icon: HardDrive, order: 5, adminOnly: true } },
+  { path: '/deployments', component: Deployments, auth: true, meta: { title: '部署 Loki', icon: Rocket, order: 6, adminOnly: true } },
+  { path: '/collectors', component: Collectors, auth: true, meta: { title: '日志采集', icon: RadioTower, order: 7, adminOnly: true } },
+  { path: '/logs', component: LogsPage, auth: true, meta: { title: '日志查询', icon: ScrollText, order: 8 } },
+  { path: '/settings', component: SettingsPage, auth: true, meta: { title: '系统设置', icon: Settings, order: 9, adminOnly: true } },
+  { path: '/users', component: UsersPage, auth: true, meta: { title: '用户管理', icon: UsersRound, order: 10, adminOnly: true } },
+  { path: '*', component: NotFound, auth: false, meta: { title: '页面不存在', hideInMenu: true } },
+];
+
+/** 侧栏菜单：登录后可见的路由，按 order 排序 */
+export const menuItems: MenuItem[] = routes
+  .filter((route) => route.auth && !route.meta.hideInMenu)
+  .sort((a, b) => (a.meta.order ?? 0) - (b.meta.order ?? 0))
+  .map((route) => ({
+    path: route.path,
+    icon: route.meta.icon,
+    label: route.meta.title,
+    adminOnly: route.meta.adminOnly,
+  }));
+
+/** 按路径查 meta（通配/未匹配返回 undefined，调用方自行兜底） */
+export function findRouteMeta(pathname: string): RouteMeta | undefined {
+  return routes.find((route) => route.path === pathname)?.meta;
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 2785bc9..6b800a9 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -11,6 +11,9 @@ export interface User {
   username: string;
   nickname: string;
   role: string;
+  authSource?: 'local' | 'ldap';
+  createdAt?: string;
+  updatedAt?: string;
 }
 
 // Cluster
@@ -123,6 +126,10 @@ export interface LokiDeployment {
   resourcesCPU: string;
   resourcesMem: string;
   storageSize: string;
+  grafanaEnabled?: boolean;
+  grafanaVersion?: string;
+  grafanaPort?: number;
+  grafanaEndpoint?: string;
   status: string;
   statusMessage: string;
   helmValues: string;
@@ -156,6 +163,8 @@ export interface CreateDeploymentRequest {
   resourcesCPU?: string;
   resourcesMem?: string;
   storageSize?: string;
+  grafanaEnabled?: boolean;
+  grafanaVersion?: string;
 }
 
 // Page Data
diff --git a/frontend/src/types/router.ts b/frontend/src/types/router.ts
new file mode 100644
index 0000000..936cc07
--- /dev/null
+++ b/frontend/src/types/router.ts
@@ -0,0 +1,34 @@
+// 路由 meta 类型契约 — 路由是 title/icon/菜单/排序的唯一声明处（开发标准 04 章），
+// 菜单、顶栏标题、document.title 全部由此派生，禁止另立第二份数据源。
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentType, LazyExoticComponent } from 'react';
+
+export interface RouteMeta {
+  /** 页面标题：document.title / 顶栏 / 菜单共用 */
+  title: string;
+  /** 菜单图标（图标名是数据，渲染走映射） */
+  icon?: LucideIcon;
+  /** 菜单排序，小的在前 */
+  order?: number;
+  /** 不出现在菜单中（登录页、404 等） */
+  hideInMenu?: boolean;
+  /** 仅管理员可见/可访问（菜单过滤 + 页面内守卫，后端 AdminAuth 兜底） */
+  adminOnly?: boolean;
+}
+
+export interface AppRoute {
+  path: string;
+  component: LazyExoticComponent<ComponentType>;
+  /** 是否需要登录 */
+  auth: boolean;
+  meta: RouteMeta;
+}
+
+/** 侧栏菜单项：由路由配置派生 */
+export interface MenuItem {
+  path: string;
+  icon?: LucideIcon;
+  label: string;
+  /** 仅管理员可见（Layout 按 getUser().role 过滤） */
+  adminOnly?: boolean;
+}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..a1f6ce2
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /** 后端 API 基础地址（空 = 同源代理模式，由 vite proxy / Go 静态服务接管） */
+  readonly VITE_API_URL?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+/** 构建指纹：vite.config.ts define 注入（git rev-parse 兜底），Settings「关于」展示 */
+declare const __APP_VERSION__: string | undefined
+declare const __COMMIT_HASH__: string | undefined
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index cb8a316..48ef30f 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -22,6 +22,18 @@ module.exports = {
           DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
           foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
         },
+        success: {
+          DEFAULT: "hsl(var(--success) / <alpha-value>)",
+          foreground: "hsl(var(--success-foreground) / <alpha-value>)",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning) / <alpha-value>)",
+          foreground: "hsl(var(--warning-foreground) / <alpha-value>)",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info) / <alpha-value>)",
+          foreground: "hsl(var(--info-foreground) / <alpha-value>)",
+        },
         muted: {
           DEFAULT: "hsl(var(--muted))",
           foreground: "hsl(var(--muted-foreground))",
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 44589b0..1ef3b35 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,13 +1,30 @@
 import path from "path"
+import { execSync } from "child_process"
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
+import pkg from "./package.json" with { type: "json" }
+
+// 构建指纹：版本来自 package.json，commit 用 git rev-parse 兜底（Settings「关于」展示）
+function gitCommit(): string {
+  try {
+    return execSync("git rev-parse --short HEAD").toString().trim()
+  } catch {
+    return "unknown"
+  }
+}
 
 // https://vite.dev/config/
 export default defineConfig({
   base: './',
   plugins: [react()],
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+    __COMMIT_HASH__: JSON.stringify(gitCommit()),
+  },
   server: {
     port: 3000,
+    // 端口被占直接报错，不悄悄漂移到其他端口
+    strictPort: true,
     proxy: {
       '/api': {
         target: 'http://localhost:8080',
@@ -20,4 +37,22 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
-});
+  build: {
+    rollupOptions: {
+      output: {
+        // 显式分包：框架与 UI 基础库独立成 chunk，页面懒加载 chunk 更小
+        manualChunks: {
+          'react-vendor': ['react', 'react-dom', 'react-router'],
+          'radix-vendor': [
+            '@radix-ui/react-dialog',
+            '@radix-ui/react-label',
+            '@radix-ui/react-select',
+            '@radix-ui/react-slot',
+            '@radix-ui/react-switch',
+            '@radix-ui/react-tabs',
+          ],
+        },
+      },
+    },
+  },
+})
diff --git a/nginx.conf b/nginx.conf
index 526666e..c000ce5 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -1,4 +1,4 @@
-# Nginx Load Balancer Configuration for LokiDeploy Production
+# Nginx Load Balancer Configuration for opsx-loki Production
 # Simple round-robin load balancing between two app instances
 
 events {
@@ -6,10 +6,10 @@ events {
 }
 
 http {
-    # Upstream for LokiDeploy app instances
-    upstream lokideploy_backend {
-        server lokideploy-1:8080 weight=5;
-        server lokideploy-2:8080 weight=5;
+    # Upstream for opsx-loki app instances
+    upstream opsxloki_backend {
+        server opsxloki-1:8080 weight=5;
+        server opsxloki-2:8080 weight=5;
 
         # Health check for upstream servers (nginx-plus) or passive checks
         keepalive 32;
@@ -51,7 +51,7 @@ http {
         # Stricter rate limit for authentication
         location /api/v1/auth/login {
             limit_req zone=auth_limit burst=3 nodelay;
-            proxy_pass http://lokideploy_backend;
+            proxy_pass http://opsxloki_backend;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
@@ -64,7 +64,7 @@ http {
         # General API rate limiting
         location /api/ {
             limit_req zone=api_limit burst=20 nodelay;
-            proxy_pass http://lokideploy_backend;
+            proxy_pass http://opsxloki_backend;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
@@ -76,7 +76,7 @@ http {
 
         # Static files and all other routes
         location / {
-            proxy_pass http://lokideploy_backend;
+            proxy_pass http://opsxloki_backend;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
diff --git a/run.sh b/run.sh
index cc28019..5212a20 100755
--- a/run.sh
+++ b/run.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
-# LokiDeploy 启动脚本
+# opsx-loki 启动脚本
 # 一键启动前后端服务，支持日志轮转
 # 用法: ./run.sh [start|stop|restart|status|frontend|backend|help]
 
@@ -8,12 +8,12 @@ set -e
 # ============================================================
 # 配置区
 # ============================================================
-PROJECT_NAME="LokiDeploy"
+PROJECT_NAME="opsx-loki"
 BACKEND_PORT=8080
 FRONTEND_PORT=3000
 BACKEND_DIR="backend"
 FRONTEND_DIR="frontend"
-BACKEND_BIN="bin/lokideploy"
+BACKEND_BIN="bin/opsxloki"
 
 # 日志配置
 MAX_LOG_FILES=3
@@ -104,7 +104,13 @@ start_backend() {
     fi
 
     # 编译二进制（若不存在或源码更新）
+    local NEED_BUILD=0
     if [ ! -f "$BACKEND_BIN" ]; then
+        NEED_BUILD=1
+    elif [ -n "$(find . -name '*.go' -newer "$BACKEND_BIN" -not -path './bin/*' 2>/dev/null | head -1)" ]; then
+        NEED_BUILD=1
+    fi
+    if [ "$NEED_BUILD" = "1" ]; then
         warning "编译后端二进制..."
         CGO_ENABLED=0 GOPROXY=https://goproxy.cn,direct $GO_CMD build -ldflags="-s -w" -o "$BACKEND_BIN" . || {
             error "后端编译失败"
@@ -115,12 +121,12 @@ start_backend() {
     # 启动（后台）
     export SERVER_PORT=$BACKEND_PORT
     export DATA_DIR="$SCRIPT_DIR/data"
-    export JWT_SECRET="${JWT_SECRET:-lokideploy-secret-key-change-in-production}"
+    export JWT_SECRET="${JWT_SECRET:-opsxloki-secret-key-change-in-production}"
     # v2 安全模型：AES 加密需要独立密钥（用于主机密码/私钥/kubeconfig 等敏感字段）。
     # config.go 在 ENCRYPTION_KEY 缺失或 <32 字符时会 log.Fatal 拒绝启动，故此处提供开发默认值。
     if [ -z "${ENCRYPTION_KEY:-}" ]; then
         warning "未设置 ENCRYPTION_KEY，使用开发默认值。生产环境请通过 .env 或环境变量提供独立随机密钥！"
-        export ENCRYPTION_KEY="lokideploy-dev-encryption-key-change-me!!"
+        export ENCRYPTION_KEY="opsxloki-dev-encryption-key-change-me!!"
     fi
     nohup "./$BACKEND_BIN" >> logs/backend.log 2>&1 &
     echo $! > "$BACKEND_PID_FILE"