diff --git a/backend/.env.example b/backend/.env.example
index 0f92e76..c8bbd47 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -1,12 +1,20 @@
-# DataGuard Backend Configuration
-ENV=development
-DEBUG=true
-SECRET_KEY=change-me-to-a-secure-random-string
-ACCESS_TOKEN_EXPIRE_MINUTES=30
+# ── SQL-Platform 生产环境配置 ──
+# 复制此文件为 .env 并修改为实际值
 
-# Platform Database (SQLite)
+# 环境: development / production
+ENV=production
+DEBUG=false
+
+# JWT 密钥（生产环境必须更换为随机强密钥）
+# 生成方式: python -c "import secrets; print(secrets.token_urlsafe(32))"
+SECRET_KEY=dev-secret-key-change-in-production
+
+# 管理员初始密码（首次启动创建 admin 用户时使用）
+ADMIN_PASSWORD=123456
+
+# 数据库
 DATABASE_URL=sqlite+aiosqlite:///./sqlite3.db
 
-# Default Admin
-ADMIN_USERNAME=admin
-ADMIN_PASSWORD=123456
+# CORS 允许的前端域名（生产环境必填，逗号分隔）
+# CORS_ORIGINS=https://sql.example.com,https://sql2.example.com
+CORS_ORIGINS=
diff --git a/backend/app/api/v1/endpoints/query.py b/backend/app/api/v1/endpoints/query.py
index c70a039..89ceacc 100644
--- a/backend/app/api/v1/endpoints/query.py
+++ b/backend/app/api/v1/endpoints/query.py
@@ -65,6 +65,30 @@ async def execute_query(
     if current_user.role == "guest":
         raise HTTPException(status_code=403, detail="访客无权执行查询，请联系管理员申请权限")
 
+    # ── 系统设置集成 ──
+    from app.api.v1.endpoints.settings import get_setting_value
+    require_approval = await get_setting_value(db, "query_require_approval", False)
+    max_limit = await get_setting_value(db, "query_max_limit", 10000)
+    query_timeout = await get_setting_value(db, "query_timeout", 30)
+    max_length = await get_setting_value(db, "query_max_length", 10000)
+    auto_limit = await get_setting_value(db, "query_auto_limit", True)
+    enable_masking = await get_setting_value(db, "query_enable_masking", True)
+    save_hist = await get_setting_value(db, "query_save_history", True)
+
+    # 查询审批检查
+    if require_approval and current_user.role not in ("admin", "dba"):
+        raise HTTPException(
+            status_code=403,
+            detail="当前系统已开启查询审批，请通过工单提交查询申请"
+        )
+
+    # 查询语句长度检查
+    if len(req.sql) > max_length:
+        raise HTTPException(
+            status_code=400,
+            detail=f"查询语句过长（{len(req.sql)} 字符），上限 {max_length} 字符"
+        )
+
     # 查询实例信息
     result = await db.execute(select(Instance).where(Instance.id == req.instance_id))
     instance = result.scalar_one_or_none()
diff --git a/backend/app/api/v1/endpoints/settings.py b/backend/app/api/v1/endpoints/settings.py
new file mode 100644
index 0000000..b13dcd9
--- /dev/null
+++ b/backend/app/api/v1/endpoints/settings.py
@@ -0,0 +1,162 @@
+"""系统设置 API — GET/PUT 分组设置，自动初始化种子数据。"""
+
+from typing import List, Dict
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy import select
+from pydantic import BaseModel
+
+from app.core.database import get_db
+from app.core.security import require_role
+from app.models.user import User
+from app.models.system_setting import SystemSetting
+from app.schemas.system_setting import SettingItem, SettingUpdateItem
+from app.services.settings_seeds import SEED_SETTINGS, SETTING_GROUPS
+
+router = APIRouter()
+
+
+async def _ensure_settings(db: AsyncSession) -> None:
+    """确保所有种子设置项存在（缺失的自动插入）。"""
+    result = await db.execute(select(SystemSetting.key))
+    existing = {row[0] for row in result.all()}
+    missing = [s for s in SEED_SETTINGS if s["key"] not in existing]
+    if missing:
+        for s in missing:
+            db.add(SystemSetting(**s))
+        await db.commit()
+
+
+@router.get("", response_model=Dict[str, List[SettingItem]])
+async def get_settings(
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(require_role("admin")),
+):
+    """获取所有系统设置，按分组返回。"""
+    await _ensure_settings(db)
+    result = await db.execute(
+        select(SystemSetting).order_by(SystemSetting.group, SystemSetting.sort_order)
+    )
+    settings = result.scalars().all()
+
+    grouped: Dict[str, List[SettingItem]] = {}
+    for s in settings:
+        group = s.group
+        if group not in grouped:
+            grouped[group] = []
+        grouped[group].append(SettingItem(
+            key=s.key,
+            value=s.value,
+            value_type=s.value_type,
+            group=s.group,
+            label=s.label,
+            description=s.description,
+            default_value=s.default_value,
+            sort_order=s.sort_order,
+        ))
+    return grouped
+
+
+@router.get("/groups")
+async def get_setting_groups(
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(require_role("admin")),
+):
+    """获取设置分组信息。"""
+    await _ensure_settings(db)
+    return SETTING_GROUPS
+
+
+@router.put("")
+async def update_settings(
+    items: List[SettingUpdateItem],
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(require_role("admin")),
+):
+    """批量更新系统设置。"""
+    await _ensure_settings(db)
+
+    updated = []
+    for item in items:
+        result = await db.execute(
+            select(SystemSetting).where(SystemSetting.key == item.key)
+        )
+        setting = result.scalar_one_or_none()
+        if not setting:
+            continue
+
+        # 类型校验
+        if setting.value_type == "boolean" and item.value not in ("true", "false"):
+            raise HTTPException(400, f"设置 '{setting.label}' 需要布尔值 (true/false)")
+        if setting.value_type == "integer":
+            try:
+                int(item.value)
+            except ValueError:
+                raise HTTPException(400, f"设置 '{setting.label}' 需要数字")
+
+        # 范围校验
+        if setting.key == "query_max_limit":
+            v = int(item.value)
+            if v < 100 or v > 100000:
+                raise HTTPException(400, "查询 LIMIT 上限范围: 100~100000")
+        if setting.key == "query_timeout":
+            v = int(item.value)
+            if v < 5 or v > 300:
+                raise HTTPException(400, "查询超时范围: 5~300 秒")
+        if setting.key == "query_max_length":
+            v = int(item.value)
+            if v < 500 or v > 50000:
+                raise HTTPException(400, "查询语句长度范围: 500~50000")
+        if setting.key == "security_password_min_length":
+            v = int(item.value)
+            if v < 4 or v > 32:
+                raise HTTPException(400, "密码最小长度范围: 4~32")
+        if setting.key == "security_max_login_attempts":
+            v = int(item.value)
+            if v < 0 or v > 20:
+                raise HTTPException(400, "最大登录失败次数范围: 0~20")
+
+        setting.value = item.value
+        updated.append(setting.key)
+
+    await db.commit()
+    return {"updated": updated}
+
+
+# ── 供其他模块调用的工具函数 ──
+
+async def get_setting_value(db: AsyncSession, key: str, fallback=None):
+    """获取设置值的实际类型（给其他模块用）。"""
+    result = await db.execute(
+        select(SystemSetting).where(SystemSetting.key == key)
+    )
+    setting = result.scalar_one_or_none()
+    if setting:
+        return setting.get_typed_value()
+    # fallback 到种子数据默认值
+    for s in SEED_SETTINGS:
+        if s["key"] == key:
+            if s["value_type"] == "boolean":
+                return s["default_value"].lower() in ("true", "1", "yes")
+            if s["value_type"] == "integer":
+                return int(s["default_value"])
+            return s["default_value"]
+    return fallback
+
+
+@router.get("/public/query")
+async def get_public_query_settings(
+    db: AsyncSession = Depends(get_db),
+):
+    """前端查询页面获取查询相关设置（无需鉴权，只读）。"""
+    await _ensure_settings(db)
+    keys = [
+        "query_require_approval", "query_max_limit", "query_timeout",
+        "query_max_length", "query_auto_limit", "query_enable_masking",
+        "query_save_history",
+    ]
+    result = await db.execute(
+        select(SystemSetting).where(SystemSetting.key.in_(keys))
+    )
+    settings = result.scalars().all()
+    return {s.key: s.get_typed_value() for s in settings}
diff --git a/backend/app/api/v1/router.py b/backend/app/api/v1/router.py
index 4b99413..200b230 100644
--- a/backend/app/api/v1/router.py
+++ b/backend/app/api/v1/router.py
@@ -7,6 +7,7 @@ from app.api.v1.endpoints import (
     instance_group, masking_rule, rollback,
     workflow, impact, schema_drift, slow_log, pool,
     mongo, query_history, sql_assistant, db_types,
+    settings,
 )
 
 api_router = APIRouter(prefix="/api/v1")
@@ -39,3 +40,4 @@ api_router.include_router(query_history.router)
 api_router.include_router(sql_assistant.router)
 
 api_router.include_router(db_types.router)
+api_router.include_router(settings.router, prefix="/settings", tags=["系统设置"])
diff --git a/backend/app/core/config.py b/backend/app/core/config.py
index 7d0ea42..00726e6 100644
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -15,6 +15,9 @@ class Settings(BaseSettings):
     ADMIN_USERNAME: str = "admin"
     ADMIN_PASSWORD: str = "123456"
 
+    # CORS: production comma-separated origins (e.g. "https://sql.example.com,https://sql2.example.com")
+    CORS_ORIGINS: str = ""
+
     model_config = SettingsConfigDict(env_file=".env", env_file_encoding="utf-8")
 
 
diff --git a/backend/app/main.py b/backend/app/main.py
index f91e500..2c78e03 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -29,23 +29,16 @@ async def seed_workflows():
 
 
 async def seed_data():
-    """Create default admin user and seed data."""
+    """Create default admin user from environment config."""
     async with async_session() as db:
         result = await db.execute(select(User).where(User.username == settings.ADMIN_USERNAME))
         if not result.scalar_one_or_none():
-            users = [
-                User(username="admin", display_name="管理员", role="admin",
-                     hashed_password=hash_password("123456")),
-                User(username="dba", display_name="DBA 张三", role="dba",
-                     hashed_password=hash_password("123456")),
-                User(username="dev1", display_name="开发者 李四", role="developer",
-                     hashed_password=hash_password("123456")),
-                User(username="dev2", display_name="开发者 王五", role="developer",
-                     hashed_password=hash_password("123456")),
-                User(username="auditor", display_name="审计员 赵六", role="developer",
-                     email="auditor@example.com", hashed_password=hash_password("123456")),
-            ]
-            db.add_all(users)
+            db.add(User(
+                username=settings.ADMIN_USERNAME,
+                display_name="管理员",
+                role="admin",
+                hashed_password=hash_password(settings.ADMIN_PASSWORD),
+            ))
             await db.commit()
 
 
@@ -85,9 +78,13 @@ app = FastAPI(
     docs_url="/docs" if settings.DEBUG else None,
 )
 
+# CORS: development allows *, production uses CORS_ORIGINS env var
+_cors_origins = ["*"] if settings.DEBUG else [
+    o.strip() for o in settings.CORS_ORIGINS.split(",") if o.strip()
+]
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"] if settings.DEBUG else [],
+    allow_origins=_cors_origins,
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
diff --git a/backend/app/models/__init__.py b/backend/app/models/__init__.py
index bf05c9a..45c0bbb 100644
--- a/backend/app/models/__init__.py
+++ b/backend/app/models/__init__.py
@@ -1 +1,2 @@
 from app.models.instance_group import InstanceGroup, user_groups  # noqa: F401
+from app.models.system_setting import SystemSetting  # noqa: F401
diff --git a/backend/app/models/system_setting.py b/backend/app/models/system_setting.py
new file mode 100644
index 0000000..e593723
--- /dev/null
+++ b/backend/app/models/system_setting.py
@@ -0,0 +1,36 @@
+"""系统设置模型 — 键值对存储，支持分组。"""
+
+from datetime import datetime, timezone
+from sqlalchemy import Column, Integer, String, Text, DateTime, Boolean
+from app.core.database import Base
+
+
+class SystemSetting(Base):
+    """系统设置表 — key-value 存储。
+
+    每个设置项包含: key, value, value_type, group, description, default_value。
+    value_type 用于前端控件渲染 (boolean → 开关, integer → 数字输入, string → 文本)。
+    """
+    __tablename__ = "system_settings"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    key = Column(String(100), unique=True, nullable=False, index=True, comment="设置键名")
+    value = Column(Text, nullable=False, comment="设置值（字符串存储）")
+    value_type = Column(String(20), nullable=False, default="string", comment="值类型: boolean/integer/string")
+    group = Column(String(50), nullable=False, default="general", comment="分组: query/security/general")
+    label = Column(String(100), nullable=False, comment="显示名称")
+    description = Column(Text, nullable=True, comment="说明")
+    default_value = Column(Text, nullable=True, comment="默认值")
+    sort_order = Column(Integer, nullable=False, default=0, comment="排序权重")
+    updated_at = Column(DateTime, default=lambda: datetime.now(timezone.utc), onupdate=lambda: datetime.now(timezone.utc))
+
+    def get_typed_value(self):
+        """将字符串值转为实际类型。"""
+        if self.value_type == "boolean":
+            return self.value.lower() in ("true", "1", "yes")
+        if self.value_type == "integer":
+            try:
+                return int(self.value)
+            except (ValueError, TypeError):
+                return int(self.default_value or 0)
+        return self.value
diff --git a/backend/app/schemas/system_setting.py b/backend/app/schemas/system_setting.py
new file mode 100644
index 0000000..86de60e
--- /dev/null
+++ b/backend/app/schemas/system_setting.py
@@ -0,0 +1,39 @@
+"""系统设置 Schema。"""
+
+from typing import Optional, List
+from pydantic import BaseModel, Field
+
+
+class SettingItem(BaseModel):
+    """单个设置项。"""
+    key: str
+    value: str
+    value_type: str = "string"  # boolean / integer / string
+    group: str = "general"
+    label: str
+    description: Optional[str] = None
+    default_value: Optional[str] = None
+    sort_order: int = 0
+
+    class Config:
+        from_attributes = True
+
+
+class SettingUpdateItem(BaseModel):
+    """单个更新项。"""
+    key: str
+    value: str
+
+
+class SettingBulkUpdate(BaseModel):
+    """批量更新设置项。"""
+    settings: List[SettingUpdateItem] = Field(..., min_length=1)
+
+
+class SettingGroupResponse(BaseModel):
+    """分组设置响应。"""
+    group: str
+    label: str
+    icon: str = ""
+    description: str = ""
+    settings: List[SettingItem]
diff --git a/backend/app/services/settings_seeds.py b/backend/app/services/settings_seeds.py
new file mode 100644
index 0000000..9d661ca
--- /dev/null
+++ b/backend/app/services/settings_seeds.py
@@ -0,0 +1,136 @@
+"""系统设置种子数据 — 首次启动自动初始化。"""
+
+SEED_SETTINGS = [
+    # ── 查询控制 ──
+    {
+        "key": "query_require_approval",
+        "value": "false",
+        "value_type": "boolean",
+        "group": "query",
+        "label": "查询需要审批",
+        "description": "开启后，所有查询操作需要经过管理员或 DBA 审批才能执行",
+        "default_value": "false",
+        "sort_order": 1,
+    },
+    {
+        "key": "query_max_limit",
+        "value": "10000",
+        "value_type": "integer",
+        "group": "query",
+        "label": "查询 LIMIT 上限",
+        "description": "SELECT 查询返回的最大行数，超出的行会被截断。范围: 100~100000",
+        "default_value": "10000",
+        "sort_order": 2,
+    },
+    {
+        "key": "query_timeout",
+        "value": "30",
+        "value_type": "integer",
+        "group": "query",
+        "label": "查询超时（秒）",
+        "description": "单次查询最大执行时间，超时自动终止。范围: 5~300",
+        "default_value": "30",
+        "sort_order": 3,
+    },
+    {
+        "key": "query_max_length",
+        "value": "10000",
+        "value_type": "integer",
+        "group": "query",
+        "label": "查询语句最大长度",
+        "description": "查询语句允许的最大字符数。范围: 500~50000",
+        "default_value": "10000",
+        "sort_order": 4,
+    },
+    {
+        "key": "query_auto_limit",
+        "value": "true",
+        "value_type": "boolean",
+        "group": "query",
+        "label": "自动添加 LIMIT",
+        "description": "当 SELECT 语句没有 LIMIT 时自动追加，防止返回海量数据",
+        "default_value": "true",
+        "sort_order": 5,
+    },
+    {
+        "key": "query_enable_masking",
+        "value": "true",
+        "value_type": "boolean",
+        "group": "query",
+        "label": "启用数据脱敏",
+        "description": "自动对手机号、身份证、邮箱等敏感字段进行脱敏处理",
+        "default_value": "true",
+        "sort_order": 6,
+    },
+    {
+        "key": "query_save_history",
+        "value": "true",
+        "value_type": "boolean",
+        "group": "query",
+        "label": "保存查询历史",
+        "description": "自动记录每次查询内容，方便后续复用和审计",
+        "default_value": "true",
+        "sort_order": 7,
+    },
+
+    # ── 安全控制 ──
+    {
+        "key": "security_max_login_attempts",
+        "value": "5",
+        "value_type": "integer",
+        "group": "security",
+        "label": "最大登录失败次数",
+        "description": "连续登录失败达到次数后锁定账号（0 表示不限制）",
+        "default_value": "5",
+        "sort_order": 10,
+    },
+    {
+        "key": "security_password_min_length",
+        "value": "6",
+        "value_type": "integer",
+        "group": "security",
+        "label": "密码最小长度",
+        "description": "用户密码的最小字符数",
+        "default_value": "6",
+        "sort_order": 11,
+    },
+    {
+        "key": "security_enable_audit_log",
+        "value": "true",
+        "value_type": "boolean",
+        "group": "security",
+        "label": "启用审计日志",
+        "description": "记录所有关键操作（查询、工单、权限变更等）",
+        "default_value": "true",
+        "sort_order": 12,
+    },
+
+    # ── 工单控制 ──
+    {
+        "key": "ticket_default_workflow",
+        "value": "standard",
+        "value_type": "string",
+        "group": "ticket",
+        "label": "默认审批流程",
+        "description": "新建工单使用的默认审批流程: standard(标准三级) / simple(简单一级) / urgent(紧急快速)",
+        "default_value": "standard",
+        "sort_order": 20,
+    },
+    {
+        "key": "ticket_allow_rollback",
+        "value": "true",
+        "value_type": "boolean",
+        "group": "ticket",
+        "label": "允许工单回滚",
+        "description": "执行失败的工单是否允许重新执行（回到 approved 状态）",
+        "default_value": "true",
+        "sort_order": 21,
+    },
+]
+
+# 分组元信息
+SETTING_GROUPS = {
+    "query": {"label": "查询控制", "icon": "🔍", "description": "控制查询行为、LIMIT、超时和脱敏策略"},
+    "security": {"label": "安全设置", "icon": "🔒", "description": "登录安全、密码策略、审计日志"},
+    "ticket": {"label": "工单设置", "icon": "📋", "description": "审批流程、回滚策略"},
+}
diff --git a/backend/tests/test_system_settings.py b/backend/tests/test_system_settings.py
new file mode 100644
index 0000000..98d1641
--- /dev/null
+++ b/backend/tests/test_system_settings.py
@@ -0,0 +1,243 @@
+"""系统设置 API 测试 — GET/PUT 设置 + 公共查询设置 + 查询集成。"""
+
+import pytest
+from httpx import AsyncClient, ASGITransport
+from app.main import app
+
+
+@pytest.fixture
+async def client():
+    transport = ASGITransport(app=app)
+    async with AsyncClient(transport=transport, base_url="http://test") as c:
+        yield c
+
+
+async def _admin_token(client: AsyncClient) -> str:
+    resp = await client.post("/api/v1/auth/login", json={
+        "username": "admin", "password": "123456"
+    })
+    assert resp.status_code == 200
+    return resp.json()["access_token"]
+
+
+def _auth_header(token: str) -> dict:
+    return {"Authorization": f"Bearer {token}"}
+
+
+async def _ensure_user(client: AsyncClient, admin_token: str, username: str, role: str = "developer") -> str:
+    """确保用户存在并返回 token。"""
+    resp = await client.post("/api/v1/auth/login", json={"username": username, "password": "123456"})
+    if resp.status_code == 200:
+        return resp.json()["access_token"]
+    # 创建
+    await client.post("/api/v1/users", headers=_auth_header(admin_token), json={
+        "username": username, "password": "123456",
+        "display_name": username, "role": role
+    })
+    resp = await client.post("/api/v1/auth/login", json={"username": username, "password": "123456"})
+    assert resp.status_code == 200
+    return resp.json()["access_token"]
+
+
+# ── 1. GET /settings ──
+
+@pytest.mark.asyncio
+async def test_get_settings(client):
+    """管理员可以获取所有系统设置。"""
+    token = await _admin_token(client)
+    resp = await client.get("/api/v1/settings", headers=_auth_header(token))
+    assert resp.status_code == 200
+    data = resp.json()
+    assert "query" in data
+    assert "security" in data
+    assert "ticket" in data
+    # 查询控制至少 7 项
+    assert len(data["query"]) >= 7
+
+
+@pytest.mark.asyncio
+async def test_get_settings_non_admin(client):
+    """非管理员不能获取设置。"""
+    admin_token = await _admin_token(client)
+    user_token = await _ensure_user(client, admin_token, "testuser_settings")
+
+    resp = await client.get("/api/v1/settings", headers=_auth_header(user_token))
+    # require_role("admin") 应该返回 403
+    assert resp.status_code == 403
+
+
+# ── 2. PUT /settings ──
+
+@pytest.mark.asyncio
+async def test_update_settings_boolean(client):
+    """更新布尔设置项。"""
+    token = await _admin_token(client)
+    resp = await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_require_approval", "value": "true"}
+    ])
+    assert resp.status_code == 200
+    assert "query_require_approval" in resp.json()["updated"]
+
+    # 验证
+    resp = await client.get("/api/v1/settings", headers=_auth_header(token))
+    items = resp.json()["query"]
+    approval = next(i for i in items if i["key"] == "query_require_approval")
+    assert approval["value"] == "true"
+
+    # 恢复
+    await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_require_approval", "value": "false"}
+    ])
+
+
+@pytest.mark.asyncio
+async def test_update_settings_integer(client):
+    """更新整数设置项。"""
+    token = await _admin_token(client)
+    resp = await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_max_limit", "value": "5000"}
+    ])
+    assert resp.status_code == 200
+
+    # 恢复
+    await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_max_limit", "value": "10000"}
+    ])
+
+
+@pytest.mark.asyncio
+async def test_update_settings_validation(client):
+    """设置值校验。"""
+    token = await _admin_token(client)
+
+    # 布尔值错误
+    resp = await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_require_approval", "value": "yes"}
+    ])
+    assert resp.status_code == 400
+
+    # 整数范围错误
+    resp = await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_max_limit", "value": "10"}
+    ])
+    assert resp.status_code == 400
+
+    # 超时范围错误
+    resp = await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_timeout", "value": "1"}
+    ])
+    assert resp.status_code == 400
+
+
+# ── 3. GET /settings/public/query ──
+
+@pytest.mark.asyncio
+async def test_public_query_settings(client):
+    """公共查询设置无需鉴权。"""
+    resp = await client.get("/api/v1/settings/public/query")
+    assert resp.status_code == 200
+    data = resp.json()
+    assert "query_require_approval" in data
+    assert "query_max_limit" in data
+    assert "query_timeout" in data
+    assert isinstance(data["query_require_approval"], bool)
+    assert isinstance(data["query_max_limit"], int)
+
+
+# ── 4. 查询集成 — 审批开关 ──
+
+@pytest.mark.asyncio
+async def test_query_require_approval(client):
+    """开启查询审批后普通用户无法直接查询。"""
+    admin_token = await _admin_token(client)
+    user_token = await _ensure_user(client, admin_token, "testuser_approval")
+
+    # 开启查询审批
+    await client.put("/api/v1/settings", headers=_auth_header(admin_token), json=[
+        {"key": "query_require_approval", "value": "true"}
+    ])
+
+    # 普通用户查询应被拦截
+    resp = await client.post("/api/v1/query", headers=_auth_header(user_token), json={
+        "instance_id": 1, "database": "test", "sql": "SELECT 1"
+    })
+    assert resp.status_code == 403
+    assert "审批" in resp.json()["detail"]
+
+    # 管理员仍然可以查询（不被审批限制拦截，可能因连接报其他错）
+    resp = await client.post("/api/v1/query", headers=_auth_header(admin_token), json={
+        "instance_id": 1, "database": "test", "sql": "SELECT 1"
+    })
+    assert resp.status_code != 403, "管理员不应被审批限制拦截"
+
+    # 恢复
+    await client.put("/api/v1/settings", headers=_auth_header(admin_token), json=[
+        {"key": "query_require_approval", "value": "false"}
+    ])
+
+
+# ── 5. 查询集成 — 语句长度检查 ──
+
+@pytest.mark.asyncio
+async def test_query_max_length(client):
+    """超长查询语句被拦截。"""
+    admin_token = await _admin_token(client)
+
+    # 设置较短限制（在合法范围 500~50000 内）
+    await client.put("/api/v1/settings", headers=_auth_header(admin_token), json=[
+        {"key": "query_max_length", "value": "500"}
+    ])
+
+    # 超长 SQL（> 500 字符）
+    long_sql = "SELECT * FROM users WHERE id = " + "1" * 600
+    resp = await client.post("/api/v1/query", headers=_auth_header(admin_token), json={
+        "instance_id": 1, "database": "test", "sql": long_sql
+    })
+    assert resp.status_code == 400, f"Expected 400, got {resp.status_code}: {resp.text}"
+    assert "过长" in resp.json()["detail"]
+
+    # 正常长度 SQL 不被拦截（可能因连接失败但不应是400长度错误）
+    short_sql = "SELECT 1"
+    resp = await client.post("/api/v1/query", headers=_auth_header(admin_token), json={
+        "instance_id": 1, "database": "test", "sql": short_sql
+    })
+    assert resp.status_code != 400 or "过长" not in resp.text
+
+    # 恢复
+    await client.put("/api/v1/settings", headers=_auth_header(admin_token), json=[
+        {"key": "query_max_length", "value": "50000"}
+    ])
+
+
+# ── 6. 批量更新 ──
+
+@pytest.mark.asyncio
+async def test_bulk_update(client):
+    """批量更新多个设置。"""
+    token = await _admin_token(client)
+    resp = await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_timeout", "value": "60"},
+        {"key": "query_max_limit", "value": "2000"},
+    ])
+    assert resp.status_code == 200
+    assert len(resp.json()["updated"]) == 2
+
+    # 恢复
+    await client.put("/api/v1/settings", headers=_auth_header(token), json=[
+        {"key": "query_timeout", "value": "30"},
+        {"key": "query_max_limit", "value": "10000"},
+    ])
+
+
+# ── 7. 设置种子数据自动初始化 ──
+
+@pytest.mark.asyncio
+async def test_settings_auto_seed(client):
+    """设置接口自动初始化种子数据。"""
+    token = await _admin_token(client)
+    resp = await client.get("/api/v1/settings", headers=_auth_header(token))
+    assert resp.status_code == 200
+    data = resp.json()
+    # 确认至少 12 个设置项
+    total = sum(len(v) for v in data.values())
+    assert total >= 12
diff --git a/frontend/src/api/notification.ts b/frontend/src/api/notification.ts
new file mode 100644
index 0000000..36918f5
--- /dev/null
+++ b/frontend/src/api/notification.ts
@@ -0,0 +1,9 @@
+import request from './request';
+
+export const notificationApi = {
+  list: () => request.get<any, any[]>('/notifications'),
+  create: (data: any) => request.post<any, any>('/notifications', data),
+  update: (id: number, data: any) => request.put<any, any>(`/notifications/${id}`, data),
+  delete: (id: number) => request.delete(`/notifications/${id}`),
+  test: (id: number) => request.post<any, any>(`/notifications/${id}/test`),
+};
diff --git a/frontend/src/api/workflow.ts b/frontend/src/api/workflow.ts
new file mode 100644
index 0000000..1b5b830
--- /dev/null
+++ b/frontend/src/api/workflow.ts
@@ -0,0 +1,11 @@
+import request from './request';
+
+export const workflowApi = {
+  list: () => request.get<any, any[]>('/workflows'),
+  get: (id: number) => request.get<any, any>(`/workflows/${id}`),
+  create: (data: any) => request.post<any, any>('/workflows', data),
+  update: (id: number, data: any) => request.put<any, any>(`/workflows/${id}`, data),
+  delete: (id: number) => request.delete(`/workflows/${id}`),
+  setDefault: (id: number) => request.post<any, any>(`/workflows/${id}/set-default`),
+  clone: (id: number) => request.post<any, any>(`/workflows/${id}/clone`),
+};
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..a9fdf8b
--- /dev/null
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -0,0 +1,59 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+interface Props {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  title?: string;
+  description?: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'default';
+}
+
+export function ConfirmDialog({
+  open,
+  onConfirm,
+  onCancel,
+  title = '确认操作',
+  description,
+  confirmText = '确认',
+  cancelText = '取消',
+  variant = 'default',
+}: Props) {
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onCancel(); }}>
+      <DialogContent
+        showCloseButton={false}
+        className="border-0 sm:max-w-[400px]"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <DialogTitle className="text-base">{title}</DialogTitle>
+        {description && (
+          <DialogDescription className="text-sm text-[var(--dg-text-secondary)]">
+            {description}
+          </DialogDescription>
+        )}
+        <div className="flex justify-end gap-2 pt-2">
+          <Button variant="ghost" size="sm" onClick={onCancel}>
+            {cancelText}
+          </Button>
+          <Button
+            size="sm"
+            variant={variant === 'danger' ? 'destructive' : 'default'}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/FormDialog.tsx b/frontend/src/components/FormDialog.tsx
new file mode 100644
index 0000000..94a8464
--- /dev/null
+++ b/frontend/src/components/FormDialog.tsx
@@ -0,0 +1,53 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { XIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  width?: string;
+  footer?: ReactNode;
+}
+
+export function FormDialog({
+  open,
+  onClose,
+  title,
+  children,
+  width = 'max-w-lg',
+  footer,
+}: Props) {
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
+      <DialogContent
+        showCloseButton={false}
+        className={`border-0 ${width} flex max-h-[85vh] flex-col`}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <DialogTitle className="text-base font-semibold">{title}</DialogTitle>
+          <button
+            onClick={onClose}
+            className="rounded-xs p-1 text-[var(--dg-text-muted)] transition-opacity hover:opacity-70"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Scrollable content */}
+        <div className="flex-1 overflow-y-auto pr-1">{children}</div>
+
+        {/* Optional footer */}
+        {footer && <div className="flex justify-end gap-2 pt-2">{footer}</div>}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 603f60f..b43c683 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -4,7 +4,7 @@ import {
   ClipboardList, Search, UserCog, Users, Lock, Shield, GitBranch, Bell,
   LogOut, Settings, Clock, Megaphone, Sun, Moon, BookOpen
 } from 'lucide-react';
-import { menuSections } from '@/lib/mock';
+import { menuSections } from '@/constants/menu';
 import { useAuth } from '@/hooks/useAuth';
 import { useTheme } from '@/hooks/useTheme';
 
diff --git a/frontend/src/constants/menu.ts b/frontend/src/constants/menu.ts
new file mode 100644
index 0000000..2e4c7b2
--- /dev/null
+++ b/frontend/src/constants/menu.ts
@@ -0,0 +1,22 @@
+export const menuSections = [
+  { id: 'overview', label: '概览' },
+  { id: 'datasource', label: '数据源' },
+  { id: 'ticket', label: '工单管理' },
+  { id: 'permission', label: '权限管理' },
+  { id: 'system', label: '系统配置' },
+  { id: 'config', label: '配置平台' },
+];
+
+export const menuItems = [
+  { id: 'dashboard', label: '仪表盘', icon: 'LayoutDashboard', section: 'overview', roles: ['admin', 'dba', 'developer', 'guest'] },
+  { id: 'instances', label: '数据源', icon: 'Database', section: 'datasource', roles: ['admin', 'dba'] },
+  { id: 'instance-groups', label: '权限管理', icon: 'Lock', section: 'permission', roles: ['admin'] },
+  { id: 'tickets', label: '数据变更', icon: 'ClipboardList', section: 'ticket', roles: ['admin', 'dba', 'developer'] },
+  { id: 'queries', label: '查询数据', icon: 'Search', section: 'ticket', roles: ['admin', 'dba', 'developer', 'guest'] },
+  { id: 'roles', label: '角色权限', icon: 'UserCog', section: 'permission', roles: ['admin'] },
+  { id: 'users', label: '用户管理', icon: 'Users', section: 'permission', roles: ['admin'] },
+  { id: 'audit-logs', label: '审计日志', icon: 'FileText', section: 'system', roles: ['admin', 'dba'] },
+  { id: 'workflow', label: '审批流程', icon: 'GitBranch', section: 'system', roles: ['admin', 'dba'] },
+  { id: 'auto-task', label: '自动任务', icon: 'Clock', section: 'system', roles: ['admin'] },
+  { id: 'settings', label: '系统设置', icon: 'Settings', section: 'config', roles: ['admin'] },
+];
diff --git a/frontend/src/hooks/useAuth.tsx b/frontend/src/hooks/useAuth.tsx
index 0b46756..a330448 100644
--- a/frontend/src/hooks/useAuth.tsx
+++ b/frontend/src/hooks/useAuth.tsx
@@ -1,5 +1,14 @@
 import { createContext, useContext, useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import { menuItems, currentUser as defaultUser } from '@/lib/mock';
+import { menuItems } from '@/constants/menu';
+
+const defaultUser = {
+  id: 0,
+  username: 'guest',
+  email: '',
+  role: 'guest' as const,
+  roleName: '访客',
+  avatar: 'G',
+};
 import { authApi } from '@/api/auth';
 
 export type UserRole = 'admin' | 'dba' | 'developer' | 'guest';
diff --git a/frontend/src/hooks/useFetchList.ts b/frontend/src/hooks/useFetchList.ts
new file mode 100644
index 0000000..4862fc6
--- /dev/null
+++ b/frontend/src/hooks/useFetchList.ts
@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+export function useFetchList<T>(fetchFn: () => Promise<T[]>, deps: unknown[] = []) {
+  const [data, setData] = useState<T[]>([]);
+  const [loading, setLoading] = useState(true);
+  const fetchFnRef = useRef(fetchFn);
+  fetchFnRef.current = fetchFn;
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    fetchFnRef
+      .current()
+      .then((res) => setData(res))
+      .catch(() => setData([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return { data, loading, refresh };
+}
diff --git a/frontend/src/hooks/useToast.ts b/frontend/src/hooks/useToast.ts
new file mode 100644
index 0000000..29da11f
--- /dev/null
+++ b/frontend/src/hooks/useToast.ts
@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from 'react';
+import { CheckCircle, XCircle, X } from 'lucide-react';
+
+export interface Toast {
+  message: string;
+  type: 'success' | 'error';
+}
+
+export function useToast() {
+  const [toast, setToast] = useState<Toast | null>(null);
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 3000);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  const showToast = useCallback((message: string, type: 'success' | 'error' = 'success') => {
+    setToast({ message, type });
+  }, []);
+
+  const ToastComponent = () => {
+    if (!toast) return null;
+    const isSuccess = toast.type === 'success';
+    return (
+      <div
+        className={`fixed bottom-6 right-6 z-[100] flex items-center gap-2 rounded-lg px-4 py-3 text-sm shadow-lg
+          animate-[fadeInUp_0.25s_ease-out] ${isSuccess ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}
+      >
+        {isSuccess ? <CheckCircle className="h-4 w-4 shrink-0" /> : <XCircle className="h-4 w-4 shrink-0" />}
+        <span>{toast.message}</span>
+        <button onClick={() => setToast(null)} className="ml-1 hover:opacity-70">
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+    );
+  };
+
+  return { toast, showToast, ToastComponent };
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fd22345..71c5f52 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -186,3 +186,14 @@
     background: #9ca3af;
   }
 }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/frontend/src/lib/mock.ts b/frontend/src/lib/mock.ts
index 178252b..e61112c 100644
--- a/frontend/src/lib/mock.ts
+++ b/frontend/src/lib/mock.ts
@@ -1,181 +1,4 @@
-import type { Ticket, DBInstance, QueryAudit, AuditRule, Workflow, NotificationChannel, Role, User, PermissionNode, DashboardStats } from '@/types';
-
-export const dashboardStats: DashboardStats = {
-  ticket_total: 128,
-  ticket_pending: 23,
-  ticket_month: 342,
-  ticket_executing: 3,
-  instance_total: 11,
-  instance_online: 8,
-  user_total: 7,
-  queries_today: 15234,
-};
-
-export const menuSections = [
-  { id: 'overview', label: '概览' },
-  { id: 'datasource', label: '数据源' },
-  { id: 'ticket', label: '工单管理' },
-  { id: 'permission', label: '权限管理' },
-  { id: 'system', label: '系统配置' },
-  { id: 'config', label: '配置平台' },
-];
-
-export const menuItems = [
-  { id: 'dashboard', label: '仪表盘', icon: 'LayoutDashboard', section: 'overview', roles: ['admin', 'dba', 'developer', 'guest'] },
-  { id: 'instances', label: '数据源', icon: 'Database', section: 'datasource', roles: ['admin', 'dba'] },
-  { id: 'instance-groups', label: '权限管理', icon: 'Lock', section: 'permission', roles: ['admin'] },
-  { id: 'tickets', label: '数据变更', icon: 'ClipboardList', section: 'ticket', roles: ['admin', 'dba', 'developer'] },
-  { id: 'queries', label: '查询数据', icon: 'Search', section: 'ticket', roles: ['admin', 'dba', 'developer', 'guest'] },
-  { id: 'roles', label: '角色权限', icon: 'UserCog', section: 'permission', roles: ['admin'] },
-  { id: 'users', label: '用户管理', icon: 'Users', section: 'permission', roles: ['admin'] },
-  { id: 'audit-logs', label: '审计日志', icon: 'FileText', section: 'system', roles: ['admin', 'dba'] },
-  { id: 'workflow', label: '审批流程', icon: 'GitBranch', section: 'system', roles: ['admin', 'dba'] },
-  { id: 'auto-task', label: '自动任务', icon: 'Clock', section: 'system', roles: ['admin'] },
-  { id: 'settings', label: '系统设置', icon: 'Settings', section: 'config', roles: ['admin'] },
-];
-
-export const currentUser = {
-  id: 1,
-  username: 'admin',
-  email: 'admin@company.com',
-  role: 'admin' as 'admin' | 'dba' | 'developer' | 'guest',
-  roleName: '超级管理员',
-  avatar: 'A',
-  permissions: menuItems.map(m => m.id),
-};
-
-export const dbInstances: DBInstance[] = [
-  { id: 1, name: '生产主库', host: '192.168.1.10', port: 3306, status: 'online', dbType: 'mysql', version: '8.0.35', env: 'prod', connections: 245, qps: 3250, latency: 2.5, cpu: 45, memory: 68, disk: 72, uptime: '120天', tags: ['主库', '核心'] },
-  { id: 2, name: '生产从库-01', host: '192.168.1.11', port: 3306, status: 'online', dbType: 'mysql', version: '8.0.35', env: 'prod', connections: 189, qps: 2800, latency: 3.1, cpu: 38, memory: 55, disk: 65, uptime: '120天', tags: ['从库'] },
-  { id: 3, name: '生产从库-02', host: '192.168.1.12', port: 3306, status: 'online', dbType: 'mysql', version: '8.0.35', env: 'prod', connections: 192, qps: 2750, latency: 2.8, cpu: 40, memory: 58, disk: 68, uptime: '120天', tags: ['从库'] },
-  { id: 4, name: '测试库', host: '192.168.2.10', port: 3306, status: 'warning', dbType: 'mysql', version: '8.0.33', env: 'test', connections: 45, qps: 120, latency: 15.2, cpu: 82, memory: 90, disk: 45, uptime: '30天', tags: ['测试'] },
-  { id: 5, name: '开发库', host: '192.168.3.10', port: 3306, status: 'online', dbType: 'mysql', version: '8.0.33', env: 'dev', connections: 23, qps: 80, latency: 1.2, cpu: 15, memory: 30, disk: 25, uptime: '15天', tags: ['开发'] },
-  { id: 6, name: '归档库', host: '192.168.1.50', port: 3306, status: 'offline', dbType: 'mysql', version: '8.0.30', env: 'prod', connections: 0, qps: 0, latency: 0, cpu: 0, memory: 0, disk: 88, uptime: '-', tags: ['归档'] },
-  { id: 7, name: 'PG 主库', host: '192.168.1.20', port: 5432, status: 'online', dbType: 'postgres', version: '15.4', env: 'prod', connections: 156, qps: 2100, latency: 1.8, cpu: 35, memory: 60, disk: 55, uptime: '200天', tags: ['主库'] },
-  { id: 8, name: 'PG 分析库', host: '192.168.1.21', port: 5432, status: 'warning', dbType: 'postgres', version: '15.4', env: 'prod', connections: 89, qps: 980, latency: 8.5, cpu: 78, memory: 85, disk: 70, uptime: '200天', tags: ['分析'] },
-  { id: 9, name: 'Redis 集群-01', host: '192.168.1.30', port: 6379, status: 'online', dbType: 'redis', version: '7.2.3', env: 'prod', connections: 1200, qps: 45000, latency: 0.5, cpu: 25, memory: 75, disk: 10, uptime: '90天', tags: ['集群'] },
-  { id: 10, name: 'Redis 集群-02', host: '192.168.1.31', port: 6379, status: 'online', dbType: 'redis', version: '7.2.3', env: 'prod', connections: 1150, qps: 42000, latency: 0.6, cpu: 28, memory: 72, disk: 10, uptime: '90天', tags: ['集群'] },
-  { id: 11, name: 'MongoDB 分片-01', host: '192.168.1.40', port: 27017, status: 'online', dbType: 'mongo', version: '7.0.4', env: 'prod', connections: 340, qps: 1800, latency: 3.2, cpu: 42, memory: 65, disk: 60, uptime: '60天', tags: ['分片'] },
-];
-
-export const tickets: Ticket[] = [
-  {
-    id: 'TK-20240115-001', title: '更新用户状态字段', dbType: 'mysql', instance: '生产主库', applicant: '张三', status: 'pending', priority: 'high',
-    sql: 'UPDATE users SET status = \'active\', updated_at = NOW() WHERE id IN (1001, 1002, 1003) AND status != \'active\';',
-    rollbackSql: "-- 基于 Binlog ROW 格式逆向生成的回滚语句\n-- 使用主键精确定位恢复旧值\nUPDATE users SET status = 'inactive', updated_at = NOW() WHERE id IN (1001, 1002, 1003);\n\n-- 备选：从备份库恢复\n-- UPDATE users u JOIN $_$Inception_backup_information$_$ b ON u.id = b.pk_value\n-- SET u.status = b.old_status WHERE b.opid_time = '20240115093025';",
-    reason: '批量激活过期用户账号', createTime: '2024-01-15 09:30:00', updateTime: '2024-01-15 09:30:00',
-    auditScore: 92, auditResults: [
-      { rule: '禁止无 WHERE 条件的 UPDATE/DELETE', level: 'success', description: 'WHERE 条件存在，符合规范' },
-      { rule: '大表变更警告', level: 'warning', description: '目标表 users 数据量超过 100 万行', suggestion: '建议分批执行，每次不超过 1000 条' },
-      { rule: 'SQL 语法检查', level: 'success', description: '语法正确' },
-    ],
-    workflowSteps: [
-      { name: '提交', status: 'completed', time: '09:30', assignee: '张三' },
-      { name: '一级审批', status: 'completed', time: '10:15', assignee: '李四' },
-      { name: '二级审批', status: 'active', assignee: '王五' },
-      { name: '执行', status: 'pending' },
-    ],
-    approvalRecords: [
-      { step: 1, approver: '张三', action: 'approve', comment: '提交工单', time: '2024-01-15 09:30:25' },
-      { step: 2, approver: '李四', action: 'approve', comment: 'SQL 符合规范，影响范围可控，同意执行', time: '2024-01-15 10:15:38' },
-    ],
-  },
-  {
-    id: 'TK-20240115-002', title: '清理过期日志数据', dbType: 'postgres', instance: '日志库', applicant: '李四', status: 'reviewing', priority: 'medium',
-    sql: 'DELETE FROM system_logs WHERE created_at < DATE_TRUNC(\'month\', NOW() - INTERVAL \'3 months\');',
-    rollbackSql: '-- DDL 回滚支持有限，建议先备份再执行\n-- 已从备份库 system_logs_bak 恢复数据\n-- INSERT INTO system_logs SELECT * FROM system_logs_bak WHERE created_at < DATE_TRUNC(\'month\', NOW() - INTERVAL \'3 months\');',
-    reason: '清理3个月前的系统日志，释放磁盘空间', createTime: '2024-01-15 10:15:00', updateTime: '2024-01-15 10:15:00',
-    auditScore: 85, auditResults: [
-      { rule: 'DELETE 操作检查', level: 'warning', description: 'DELETE 操作影响行数可能较大', suggestion: '建议先 SELECT COUNT(*) 确认影响范围' },
-      { rule: '备份检查', level: 'success', description: '已确认数据已备份' },
-    ],
-    workflowSteps: [
-      { name: '提交', status: 'completed', time: '10:15', assignee: '李四' },
-      { name: '一级审批', status: 'active', assignee: '张三' },
-      { name: '执行', status: 'pending' },
-    ],
-    approvalRecords: [
-      { step: 1, approver: '李四', action: 'approve', comment: '提交工单', time: '2024-01-15 10:15:00' },
-    ],
-  },
-  {
-    id: 'TK-20240115-003', title: 'Redis 缓存预热', dbType: 'redis', instance: 'Redis集群', applicant: '王五', status: 'pending', priority: 'low',
-    sql: 'MSET user:1001:profile \'{"name":"张三","level":5}\' user:1002:profile \'{"name":"李四","level":3}\'',
-    reason: '大促前预热用户缓存数据', createTime: '2024-01-15 11:00:00', updateTime: '2024-01-15 11:00:00',
-    auditScore: 98, auditResults: [
-      { rule: 'Redis 命令检查', level: 'success', description: 'MSET 命令安全' },
-      { rule: '数据大小检查', level: 'success', description: '单条数据小于 1MB' },
-    ],
-  },
-  { id: 'TK-20240114-005', title: '用户表添加索引', dbType: 'mysql', instance: '生产主库', applicant: '赵六', status: 'approved', priority: 'high', sql: 'ALTER TABLE users ADD INDEX idx_phone (phone);', reason: '优化手机号查询性能', createTime: '2024-01-14 14:20:00', updateTime: '2024-01-14 16:30:00' },
-  { id: 'TK-20240114-006', title: '订单数据归档', dbType: 'mysql', instance: '归档库', applicant: '钱七', status: 'executing', priority: 'medium', sql: 'INSERT INTO orders_archive SELECT * FROM orders WHERE created_at < "2023-06-01";', rollbackSql: '-- 从归档表删除已归档的数据\nDELETE FROM orders_archive WHERE created_at < "2023-06-01";', reason: '归档半年前的订单数据', createTime: '2024-01-14 15:30:00', updateTime: '2024-01-15 09:00:00' },
-  { id: 'TK-20240114-007', title: '配置表更新', dbType: 'redis', instance: 'Redis集群', applicant: '孙八', status: 'success', priority: 'low', sql: 'HSET app:config feature_flag new_feature enabled', reason: '开启新功能开关', createTime: '2024-01-14 16:00:00', updateTime: '2024-01-14 16:05:00' },
-  { id: 'TK-20240114-008', title: '订单表索引优化', dbType: 'mysql', instance: '生产主库', applicant: '周九', status: 'failed', priority: 'high', sql: 'ALTER TABLE orders ADD INDEX idx_created_at (created_at, status);', reason: '优化订单查询', createTime: '2024-01-14 16:45:00', updateTime: '2024-01-14 17:00:00' },
-  { id: 'TK-20240113-001', title: '用户权限调整', dbType: 'postgres', instance: '权限库', applicant: '吴十', status: 'rejected', priority: 'medium', sql: 'UPDATE user_roles SET role = \'admin\' WHERE user_id = 456;', reason: '调整用户权限', createTime: '2024-01-13 09:00:00', updateTime: '2024-01-13 11:30:00' },
-];
-
-export const queryAudits: QueryAudit[] = [
-  { id: 'Q-20240115-001', sql: 'SELECT u.id, u.name, u.email, u.phone, u.status, u.created_at FROM users u WHERE u.status = "active" ORDER BY u.created_at DESC LIMIT 100', sqlPreview: 'SELECT u.id, u.name, u.email...', dbType: 'mysql', instance: '生产主库', user: '张三', executeTime: 125, rowCount: 100, scanRows: 50000, affectedRows: 0, status: 'success', hasSensitive: true, timestamp: '2024-01-15 10:30:25', clientIp: '192.168.10.50', source: 'Web Console', resultColumns: [{ prop: 'id', label: 'ID' }, { prop: 'name', label: '姓名' }, { prop: 'email', label: '邮箱', sensitive: true }, { prop: 'phone', label: '电话', sensitive: true }, { prop: 'status', label: '状态' }, { prop: 'created_at', label: '创建时间' }], resultSet: [{ id: 1001, name: '张三', email: 'zhang***@email.com', phone: '138****8888', status: 'active', created_at: '2024-01-15' }, { id: 1002, name: '李四', email: 'li***@email.com', phone: '139****9999', status: 'active', created_at: '2024-01-14' }, { id: 1003, name: '王五', email: 'wang***@email.com', phone: '137****7777', status: 'active', created_at: '2024-01-13' }] },
-  { id: 'Q-20240115-002', sql: 'SELECT COUNT(*) as total, DATE(created_at) as date FROM orders WHERE created_at > "2024-01-01" GROUP BY DATE(created_at)', sqlPreview: 'SELECT COUNT(*) as total...', dbType: 'mysql', instance: '生产主库', user: '李四', executeTime: 2500, rowCount: 15, scanRows: 1000000, affectedRows: 0, status: 'slow', hasSensitive: false, timestamp: '2024-01-15 10:28:15', clientIp: '192.168.10.51', source: 'API' },
-  { id: 'Q-20240115-003', sql: 'UPDATE users SET last_login = NOW(), login_ip = "192.168.10.50" WHERE id = 123', sqlPreview: 'UPDATE users SET...', dbType: 'mysql', instance: '生产主库', user: '系统', executeTime: 45, rowCount: 0, scanRows: 1, affectedRows: 1, status: 'success', hasSensitive: false, timestamp: '2024-01-15 10:25:08', clientIp: '192.168.1.100', source: 'Application' },
-  { id: 'Q-20240115-004', sql: 'SELECT * FROM user_profiles WHERE user_id = 456', sqlPreview: 'SELECT * FROM user_profiles...', dbType: 'postgres', instance: 'PG 分析库', user: '赵六', executeTime: 89, rowCount: 5, scanRows: 100, affectedRows: 0, status: 'success', hasSensitive: true, timestamp: '2024-01-15 10:20:33', clientIp: '192.168.10.52', source: 'Web Console', resultColumns: [{ prop: 'user_id', label: '用户ID' }, { prop: 'id_card', label: '身份证号', sensitive: true }, { prop: 'address', label: '地址', sensitive: true }], resultSet: [{ user_id: 456, id_card: '310***********1234', address: '上海市***区***路***号' }] },
-  { id: 'Q-20240115-005', sql: 'DELETE FROM temp_logs WHERE created_at < "2024-01-01"', sqlPreview: 'DELETE FROM temp_logs...', dbType: 'mysql', instance: '测试库', user: '钱七', executeTime: 5000, rowCount: 0, scanRows: 500000, affectedRows: 0, status: 'failed', hasSensitive: false, timestamp: '2024-01-15 10:15:42', clientIp: '192.168.10.53', source: 'CLI' },
-  { id: 'Q-20240115-006', sql: 'GET user:session:123', sqlPreview: 'GET user:session:123', dbType: 'redis', instance: 'Redis集群-01', user: '孙八', executeTime: 2, rowCount: 1, scanRows: 1, affectedRows: 0, status: 'success', hasSensitive: false, timestamp: '2024-01-15 10:10:18', clientIp: '192.168.10.54', source: 'Application' },
-  { id: 'Q-20240115-007', sql: 'SELECT o.id, o.order_no, u.name, o.amount, o.status, o.created_at FROM orders o JOIN users u ON o.user_id = u.id WHERE o.created_at > DATE_SUB(NOW(), INTERVAL 7 DAY) ORDER BY o.created_at DESC LIMIT 50', sqlPreview: 'SELECT o.id, o.order_no, u.name...', dbType: 'mysql', instance: '生产主库', user: '周九', executeTime: 3200, rowCount: 50, scanRows: 800000, affectedRows: 0, status: 'slow', hasSensitive: true, timestamp: '2024-01-15 10:05:22', clientIp: '192.168.10.55', source: 'Web Console', resultColumns: [{ prop: 'id', label: 'ID' }, { prop: 'order_no', label: '订单号' }, { prop: 'name', label: '用户名' }, { prop: 'amount', label: '金额' }, { prop: 'status', label: '状态' }], resultSet: [{ id: 50001, order_no: 'ORD-20240115-001', name: '张三', amount: '¥1,299.00', status: '已支付' }, { id: 50002, order_no: 'ORD-20240115-002', name: '李四', amount: '¥2,599.00', status: '待发货' }] },
-  { id: 'Q-20240115-008', sql: 'db.collection("logs").find({ created_at: { $gte: new Date("2024-01-01") } }).limit(100)', sqlPreview: 'db.collection("logs").find...', dbType: 'mongo', instance: 'MongoDB 分片-01', user: '吴十', executeTime: 156, rowCount: 100, scanRows: 50000, affectedRows: 0, status: 'success', hasSensitive: false, timestamp: '2024-01-15 09:55:10', clientIp: '192.168.10.56', source: 'DataGrip' },
-];
-
-export const auditRules: AuditRule[] = [
-  { id: 'R000', name: '表必须有主键（回滚依赖）', level: 'error', dbTypes: ['mysql'], description: '操作的表必须包含主键，否则无法生成精确的回滚语句。回滚依赖主键定位修改的行。', enabled: true, category: '回滚' },
-  { id: 'R001', name: '禁止无 WHERE 条件的 UPDATE/DELETE', level: 'error', dbTypes: ['mysql', 'postgres'], description: 'UPDATE 和 DELETE 语句必须包含 WHERE 条件，防止误操作全表数据', enabled: true, category: '安全性' },
-  { id: 'R002', name: '禁止 SELECT * 查询', level: 'warning', dbTypes: ['mysql', 'postgres'], description: 'SELECT 语句应明确指定字段名，避免不必要的数据传输', enabled: true, category: '性能' },
-  { id: 'R003', name: '大表变更警告（>100万行）', level: 'warning', dbTypes: ['mysql', 'postgres'], description: '影响超过 100 万行的变更需要额外审批，建议使用 pt-online-schema-change', enabled: true, category: '性能' },
-  { id: 'R004', name: '禁止 DROP TABLE/DATABASE', level: 'error', dbTypes: ['mysql', 'postgres', 'mongo'], description: '禁止执行 DROP TABLE/DATABASE 操作，防止数据丢失', enabled: true, category: '安全性' },
-  { id: 'R005', name: 'SQL 注入风险检测', level: 'error', dbTypes: ['mysql', 'postgres', 'redis'], description: '检测潜在的 SQL 注入风险，包括拼接字符串等', enabled: true, category: '安全性' },
-  { id: 'R006', name: '索引使用检查', level: 'info', dbTypes: ['mysql', 'postgres'], description: '检查查询是否使用了索引，避免全表扫描', enabled: false, category: '性能' },
-  { id: 'R007', name: '禁止 TRUNCATE TABLE', level: 'error', dbTypes: ['mysql', 'postgres'], description: 'TRUNCATE 操作会清空整表数据且无法回滚', enabled: true, category: '安全性' },
-  { id: 'R008', name: '字段类型变更警告', level: 'warning', dbTypes: ['mysql', 'postgres'], description: 'ALTER TABLE 修改字段类型可能导致数据截断', enabled: true, category: '数据完整性' },
-  { id: 'R009', name: '外键约束检查', level: 'info', dbTypes: ['mysql', 'postgres'], description: '建议重要关联表添加外键约束保证数据一致性', enabled: false, category: '数据完整性' },
-  { id: 'R010', name: 'Redis 大键检测（>1MB）', level: 'warning', dbTypes: ['redis'], description: '检测到 Redis 大键，可能影响性能', enabled: true, category: '性能' },
-  { id: 'R011', name: 'Binlog ROW 格式检查', level: 'error', dbTypes: ['mysql'], description: 'MySQL 必须开启 Binlog 且格式为 ROW，否则无法生成回滚语句', enabled: true, category: '回滚' },
-  { id: 'R012', name: '禁止 DML 与 DDL 混合操作', level: 'error', dbTypes: ['mysql'], description: '同一工单中不能同时包含 DML 和 DDL 语句，避免表结构变化导致备份解析出错', enabled: true, category: '回滚' },
-  { id: 'R013', name: '回滚权限检查', level: 'error', dbTypes: ['mysql'], description: '执行回滚的数据库账号需有 REPLICATION SLAVE 和 REPLICATION CLIENT 权限', enabled: true, category: '回滚' },
-  { id: 'R014', name: 'DDL 回滚限制警告', level: 'warning', dbTypes: ['mysql'], description: 'DROP/TRUNCATE 等 DDL 操作回滚仅能重建表结构，无法恢复原有数据', enabled: true, category: '回滚' },
-  { id: 'R015', name: '影响行数限制（<10000）', level: 'warning', dbTypes: ['mysql', 'postgres'], description: '单次操作影响行数建议不超过 10000 行，过大的事务可能导致回滚困难和性能问题', enabled: true, category: '回滚' },
-];
-
-export const workflows: Workflow[] = [
-  { id: 1, name: '生产环境变更流程', dbTypes: ['mysql', 'postgres', 'redis'], steps: 3, mode: 'all', description: '需要 DBA 和架构师双重审批，适用于所有生产环境变更', enabled: true, conditions: ['影响行数>1000', '执行时间>1s'] },
-  { id: 2, name: '测试环境变更流程', dbTypes: ['mysql', 'postgres', 'redis', 'mongo'], steps: 1, mode: 'any', description: '仅需一级审批，适用于测试环境', enabled: true },
-  { id: 3, name: '紧急变更流程', dbTypes: ['mysql', 'postgres'], steps: 2, mode: 'any', description: 'P0/P1 故障时的快速审批通道，30分钟内完成', enabled: true, conditions: ['故障等级>P1'] },
-  { id: 4, name: '数据查询流程', dbTypes: ['mysql', 'postgres'], steps: 1, mode: 'any', description: '敏感数据查询审批，需数据负责人审批', enabled: false },
-  { id: 5, name: 'DDL 变更流程', dbTypes: ['mysql', 'postgres'], steps: 2, mode: 'all', description: '表结构变更专用流程，需架构师评审', enabled: true, conditions: ['涉及DDL操作'] },
-];
-
-export const notificationChannels: NotificationChannel[] = [
-  { id: 1, name: '飞书', type: 'feishu', icon: 'Send', description: '通过飞书自定义机器人发送通知', enabled: true, webhook: 'https://open.feishu.cn/open-apis/bot/v2/hook/xxx', events: ['ticket_created', 'ticket_approved', 'ticket_rejected', 'ticket_executed', 'ticket_failed'] },
-  { id: 2, name: '钉钉', type: 'dingtalk', icon: 'Bell', description: '通过钉钉群机器人发送通知', enabled: true, webhook: 'https://oapi.dingtalk.com/robot/send?access_token=xxx', events: ['ticket_created', 'ticket_approved', 'ticket_failed'] },
-  { id: 3, name: '企业微信', type: 'wechat', icon: 'MessageSquare', description: '通过企业微信Webhook发送通知', enabled: false, webhook: '', events: ['ticket_created', 'ticket_executed'] },
-  { id: 4, name: 'Telegram', type: 'telegram', icon: 'Navigation', description: '通过 Telegram Bot 发送通知', enabled: false, webhook: '', events: ['ticket_failed'] },
-  { id: 5, name: '邮件通知', type: 'email', icon: 'Mail', description: '通过 SMTP 邮件发送通知', enabled: true, events: ['ticket_created', 'ticket_approved', 'ticket_rejected', 'ticket_executed'] },
-];
-
-export const roles: Role[] = [
-  { id: 'admin', name: '超级管理员', description: '拥有系统的所有权限，包括用户管理、系统配置等', icon: 'Crown', iconClass: 'text-purple-400 bg-purple-400/10', userCount: 2, permissionCount: 56, permissions: ['dashboard', 'mysql', 'postgres', 'redis', 'mongo', 'tickets', 'queries', 'roles', 'users', 'audit-rules', 'audit-logs', 'workflow', 'auto-task', 'announcement', 'config-platform', 'notifications'] },
-  { id: 'dba', name: '数据库管理员', description: '负责数据库运维、工单审批和 SQL 审核', icon: 'Database', iconClass: 'text-blue-400 bg-blue-400/10', userCount: 5, permissionCount: 32, permissions: ['dashboard', 'mysql', 'postgres', 'redis', 'tickets', 'queries', 'audit-rules', 'audit-logs', 'workflow'] },
-  { id: 'developer', name: '开发人员', description: '可以提交变更工单和执行数据查询', icon: 'Code', iconClass: 'text-green-400 bg-green-400/10', userCount: 28, permissionCount: 12, permissions: ['dashboard', 'tickets', 'queries'] },
-  { id: 'guest', name: '访客', description: '仅可查看，无法执行任何操作', icon: 'Eye', iconClass: 'text-gray-400 bg-gray-400/10', userCount: 8, permissionCount: 4, permissions: ['dashboard', 'queries'] },
-];
-
-export const users: User[] = [
-  { id: 1, username: 'admin', email: 'admin@company.com', role: 'admin', roleName: '超级管理员', department: '运维部', lastLogin: '2024-01-15 09:30:00', status: 'active', avatar: 'A' },
-  { id: 2, username: 'zhangsan', email: 'zhangsan@company.com', role: 'dba', roleName: '数据库管理员', department: 'DBA组', lastLogin: '2024-01-15 08:45:00', status: 'active', avatar: '张' },
-  { id: 3, username: 'lisi', email: 'lisi@company.com', role: 'dba', roleName: '数据库管理员', department: 'DBA组', lastLogin: '2024-01-14 18:20:00', status: 'active', avatar: '李' },
-  { id: 4, username: 'wangwu', email: 'wangwu@company.com', role: 'developer', roleName: '开发人员', department: '研发部', lastLogin: '2024-01-15 10:15:00', status: 'active', avatar: '王' },
-  { id: 5, username: 'zhaoliu', email: 'zhaoliu@company.com', role: 'developer', roleName: '开发人员', department: '研发部', lastLogin: '2024-01-14 16:30:00', status: 'disabled', avatar: '赵' },
-  { id: 6, username: 'qianqi', email: 'qianqi@company.com', role: 'developer', roleName: '开发人员', department: '产品部', lastLogin: '2024-01-14 14:20:00', status: 'active', avatar: '钱' },
-  { id: 7, username: 'sunba', email: 'sunba@company.com', role: 'guest', roleName: '访客', department: '测试部', lastLogin: '2024-01-13 11:00:00', status: 'active', avatar: '孙' },
-];
+import type { PermissionNode } from '@/types';
 
 export const permissionTreeData: PermissionNode[] = [
   { id: 'dashboard', label: '仪表盘（查看统计、图表）' },
@@ -240,62 +63,3 @@ export const dbTypeColorMap: Record<string, string> = {
   redis: 'bg-[rgba(220,50,32,0.15)] text-[#ef5350]',
   mongo: 'bg-[rgba(71,162,72,0.15)] text-[#66bb6a]',
 };
-
-export interface Announcement {
-  id: string;
-  title: string;
-  content: string;
-  priority: 'urgent' | 'high' | 'normal' | 'low';
-  pinned: boolean;
-  enabled: boolean;
-  author: string;
-  publishTime: string;
-  expireTime: string;
-  readCount: number;
-  targetRoles: string[];
-}
-
-export const announcements: Announcement[] = [
-  {
-    id: 'ann-1', title: '【系统维护】本周日凌晨 2:00-4:00 数据库升级维护',
-    content: '计划于本周日（2024年1月21日）凌晨 2:00-4:00 进行数据库版本升级，期间以下服务将不可用：\n1. 数据变更工单提交和审批\n2. 在线 SQL 查询\n3. 数据导出功能\n\n请提前安排工作，避免在维护时段提交重要工单。如有紧急情况，请联系 DBA 团队。',
-    priority: 'urgent', pinned: true, enabled: true, author: 'admin',
-    publishTime: '2024-01-15 10:00:00', expireTime: '2024-01-22 00:00:00',
-    readCount: 156, targetRoles: ['admin', 'dba', 'developer', 'guest'],
-  },
-  {
-    id: 'ann-2', title: '【安全提醒】禁止使用 SELECT * 查询生产数据库',
-    content: '为加强数据安全，即日起严禁使用 SELECT * 查询生产环境数据库。所有查询必须明确指定所需字段名。\n\n审核规则已更新（规则编号 R002），违规查询将被自动拦截并记录审计日志。',
-    priority: 'high', pinned: true, enabled: true, author: 'admin',
-    publishTime: '2024-01-14 09:00:00', expireTime: '2024-02-14 00:00:00',
-    readCount: 234, targetRoles: ['admin', 'dba', 'developer'],
-  },
-  {
-    id: 'ann-3', title: '【新功能】SQL 变更自动回滚功能已上线',
-    content: 'SQL 变更工单现已支持自动回滚功能。对于 UPDATE 和 DELETE 操作，系统会自动：\n1. 基于 Binlog ROW 格式生成逆向回滚语句\n2. 执行前备份受影响数据\n3. 提供一键回滚入口（执行后 72 小时内有效）\n\n使用要求：\n- MySQL 必须开启 Binlog ROW 格式\n- 操作表必须有主键\n- 单次操作影响行数不超过 10,000 行',
-    priority: 'normal', pinned: false, enabled: true, author: 'zhangsan',
-    publishTime: '2024-01-13 14:00:00', expireTime: '2024-04-13 00:00:00',
-    readCount: 89, targetRoles: ['admin', 'dba', 'developer'],
-  },
-  {
-    id: 'ann-4', title: '【培训通知】SQL 审核规范培训 - 1月25日',
-    content: '时间：2024年1月25日 14:00-16:00\n地点：会议室 A\n讲师：DBA 团队负责人\n\n培训内容：\n1. SQL 变更工单提交流程\n2. 审核规则详解\n3. 回滚操作最佳实践\n4. 常见问题排查\n\n请相关人员准时参加。',
-    priority: 'normal', pinned: false, enabled: true, author: 'lisi',
-    publishTime: '2024-01-12 10:00:00', expireTime: '2024-01-26 00:00:00',
-    readCount: 67, targetRoles: ['developer'],
-  },
-  {
-    id: 'ann-sql-1', title: '【规范】SQL 变更工单提交流程',
-    content: '1. 登录 SQL-Platform 平台，进入「数据变更」页面\n2. 点击「新建工单」，填写标题和变更原因\n3. 选择目标数据库类型和实例\n4. 在 SQL 编辑器中输入变更语句\n5. 系统自动审核并评分，确认无误后提交\n6. 等待 DBA 审批通过后执行\n\n注意：生产环境变更必须提供回滚 SQL！',
-    priority: 'high', pinned: true, enabled: true, author: 'admin',
-    publishTime: '2024-01-10 08:00:00', expireTime: '2025-12-31 00:00:00',
-    readCount: 512, targetRoles: ['admin', 'dba', 'developer'],
-  },
-  {
-    id: 'ann-sql-2', title: '【注意事项】SQL 操作安全规范',
-    content: '禁止事项：\n- 禁止不带 WHERE 条件的 UPDATE/DELETE\n- 禁止在生产环境执行 DROP/TRUNCATE\n- 禁止在业务高峰期（10:00-12:00, 14:00-16:00）执行大表变更\n\n必须遵守：\n- 所有变更必须通过工单审批\n- 影响超过 10,000 行的变更需额外审批\n- DDL 和 DML 不可混在同一工单中\n- 执行前确认备份和回滚方案',
-    priority: 'urgent', pinned: true, enabled: true, author: 'admin',
-    publishTime: '2024-01-08 08:00:00', expireTime: '2025-12-31 00:00:00',
-    readCount: 689, targetRoles: ['admin', 'dba', 'developer', 'guest'],
-  },
-];
diff --git a/frontend/src/pages/AuditLogsPage.tsx b/frontend/src/pages/AuditLogsPage.tsx
index 51ab4a1..58f4182 100644
--- a/frontend/src/pages/AuditLogsPage.tsx
+++ b/frontend/src/pages/AuditLogsPage.tsx
@@ -76,37 +76,6 @@ const TARGET_ICONS: Record<string, React.ElementType> = {
 
 const CHART_COLORS = ['#6366f1', '#a855f7', '#ec4899', '#f43f5e', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6'];
 
-/* ───────── Mock Data Generator ───────── */
-
-function generateMockLogs(): AuditLog[] {
-  const actions = Object.keys(ACTION_LABELS);
-  const targets: Record<string, string> = {
-    CREATE_TICKET: 'ticket', REVIEW_TICKET: 'ticket', EXECUTE_TICKET: 'ticket',
-    CREATE_INSTANCE: 'instance', DELETE_INSTANCE: 'instance',
-    CREATE_USER: 'user', DELETE_USER: 'user',
-    QUERY: 'query', LOGIN: 'system', LOGOUT: 'system',
-  };
-  const users = ['admin', 'zhangsan', 'lisi', 'wangwu', 'zhaoliu', 'qianqi', 'sunba'];
-  const ips = ['192.168.10.50', '192.168.10.51', '192.168.10.52', '10.0.0.15', '10.0.0.22'];
-
-  return Array.from({ length: 45 }, (_, i) => {
-    const action = actions[i % actions.length];
-    const resultOptions: ('success' | 'failed' | 'warning')[] = ['success', 'success', 'success', 'failed', 'warning'];
-    return {
-      id: i + 1,
-      user_id: (i % 7) + 1,
-      username: users[i % users.length],
-      action,
-      target_type: targets[action] || 'system',
-      target_id: action === 'LOGIN' || action === 'LOGOUT' ? null : i + 100,
-      detail: `${ACTION_LABELS[action]}操作，目标ID: ${i + 100}`,
-      ip_address: ips[i % ips.length],
-      result_status: resultOptions[i % resultOptions.length],
-      created_at: new Date(Date.now() - i * 3600000 * 3).toISOString(),
-    };
-  });
-}
-
 /* ───────── CSV Export Helper ───────── */
 
 function exportLogsToCSV(logs: AuditLog[]) {
@@ -156,15 +125,12 @@ export default function AuditLogsPage() {
       if (filterAction) params.set('action', filterAction);
       const res = await request.get(`/audit/logs?${params}`);
       const data = (res?.data ?? res ?? {}) as AuditLogResponse;
-      // Merge with mock data for enhanced fields
-      const mockData = generateMockLogs();
-      const items = data.items || mockData;
+      const items = data.items || [];
       setLogs(items);
-      setTotal(data.total || items.length);
+      setTotal(data.total || 0);
     } catch {
-      const mockData = generateMockLogs();
-      setLogs(mockData);
-      setTotal(mockData.length);
+      setLogs([]);
+      setTotal(0);
     } finally {
       setLoading(false);
     }
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 70597f7..0f5c52b 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -7,7 +7,8 @@ import {
   Filter, Eye, BarChart3,
 } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { dbInstances, statusMap, statusColorMap, dbTypeColorMap, tickets, announcements } from '@/lib/mock';
+import { statusMap, statusColorMap, dbTypeColorMap } from '@/lib/mock';
+import type { DBInstance } from '@/types';
 import { useTheme } from '@/hooks/useTheme';
 import { useAuth } from '@/hooks/useAuth';
 import { dashboardApi } from '@/api/dashboard';
@@ -64,7 +65,7 @@ const trendDatasets: Record<TrendRange, TrendDataset> = {
 /* ------------------------------------------------------------------ */
 /*  Helpers                                                            */
 /* ------------------------------------------------------------------ */
-function calcHealthScore(inst: typeof dbInstances[0]): number {
+function calcHealthScore(inst: DBInstance): number {
   if (inst.status === 'offline') return 0;
   let score = 100;
   if (inst.cpu > 80) score -= 25;
diff --git a/frontend/src/pages/DataDictionaryPage.tsx b/frontend/src/pages/DataDictionaryPage.tsx
index 5572827..09d167b 100644
--- a/frontend/src/pages/DataDictionaryPage.tsx
+++ b/frontend/src/pages/DataDictionaryPage.tsx
@@ -97,28 +97,6 @@ function highlightDDL(ddl: string): string {
   return highlighted;
 }
 
-function generateMockRelations(tableName: string): TableRelation[] {
-  const relations: TableRelation[] = [];
-  if (tableName.includes('order')) {
-    relations.push(
-      { from_table: tableName, from_column: 'user_id', to_table: 'users', to_column: 'id', constraint_name: `${tableName}_user_id_fk` },
-      { from_table: tableName, from_column: 'product_id', to_table: 'products', to_column: 'id', constraint_name: `${tableName}_product_id_fk` },
-    );
-  }
-  if (tableName.includes('user')) {
-    relations.push(
-      { from_table: 'orders', from_column: 'user_id', to_table: tableName, to_column: 'id', constraint_name: `orders_${tableName}_user_id_fk` },
-      { from_table: 'comments', from_column: 'user_id', to_table: tableName, to_column: 'id', constraint_name: `comments_${tableName}_user_id_fk` },
-    );
-  }
-  if (tableName.includes('comment')) {
-    relations.push(
-      { from_table: tableName, from_column: 'post_id', to_table: 'posts', to_column: 'id', constraint_name: `${tableName}_post_id_fk` },
-    );
-  }
-  return relations;
-}
-
 /* ───────── Tree Component ───────── */
 
 function DbTreeNode({
@@ -265,7 +243,7 @@ export default function DataDictionaryPage() {
 
   const relations = useMemo(() => {
     if (!selectedTable) return [];
-    return generateMockRelations(selectedTable);
+    return [];
   }, [selectedTable]);
 
   const handleExport = () => {
diff --git a/frontend/src/pages/InstanceGroupPage.tsx b/frontend/src/pages/InstanceGroupPage.tsx
index 398bace..111fd20 100644
--- a/frontend/src/pages/InstanceGroupPage.tsx
+++ b/frontend/src/pages/InstanceGroupPage.tsx
@@ -103,25 +103,6 @@ const DEFAULT_QUOTA: ResourceQuota = {
   max_queries_per_day: 10000,
 };
 
-/* ───────── Mock Change Logs ───────── */
-
-function generateMockChangeLogs(groupId: number): ChangeLogEntry[] {
-  const actions = [
-    { action: '修改权限配置', target: 'query:select, query:insert' },
-    { action: '添加关联实例', target: '生产主库' },
-    { action: '移除关联用户', target: 'wangwu' },
-    { action: '更新资源配额', target: 'max_qps: 1000 -> 2000' },
-    { action: '启用权限组', target: '-' },
-  ];
-  return actions.map((a, i) => ({
-    id: `cl-${groupId}-${i}`,
-    user: ['admin', 'zhangsan', 'lisi'][i % 3],
-    action: a.action,
-    target: a.target,
-    created_at: new Date(Date.now() - i * 86400000).toISOString(),
-  }));
-}
-
 /* ───────── Main Component ───────── */
 
 export default function InstanceGroupPage() {
@@ -196,7 +177,7 @@ export default function InstanceGroupPage() {
 
   const changeLogs = useMemo(() => {
     if (!selectedId) return [];
-    return generateMockChangeLogs(selectedId);
+    return [];
   }, [selectedId]);
 
   const resetForm = () => {
diff --git a/frontend/src/pages/InstancePage.tsx b/frontend/src/pages/InstancePage.tsx
index 35c62b5..df9e44b 100644
--- a/frontend/src/pages/InstancePage.tsx
+++ b/frontend/src/pages/InstancePage.tsx
@@ -154,17 +154,7 @@ export default function InstancePage() {
     try {
       const res = await instanceApi.list({});
       const data = Array.isArray(res) ? res : [];
-      /* Enrich with mock metrics for display */
-      const enriched = data.map((inst: InstanceItem, idx: number) => ({
-        ...inst,
-        connections: [245, 189, 192, 45, 23, 0, 156, 89, 1200, 1150, 340][idx] ?? 100,
-        qps: [3250, 2800, 2750, 120, 80, 0, 2100, 980, 45000, 42000, 1800][idx] ?? 500,
-        latency: [2.5, 3.1, 2.8, 15.2, 1.2, 0, 1.8, 8.5, 0.5, 0.6, 3.2][idx] ?? 5,
-        cpu: [45, 38, 40, 82, 15, 0, 35, 78, 25, 28, 42][idx] ?? 30,
-        memory: [68, 55, 58, 90, 30, 0, 60, 85, 75, 72, 65][idx] ?? 50,
-        disk: [72, 65, 68, 45, 25, 88, 55, 70, 10, 10, 60][idx] ?? 50,
-      }));
-      setInstances(enriched);
+      setInstances(data);
     } catch {
       /* keep existing */
     } finally {
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index c0b008a..addd678 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -1,165 +1,179 @@
-import { useState } from 'react';
-import { Send, Bell, MessageSquare, Navigation, Mail, Check, ToggleLeft, ToggleRight, Webhook, Settings, TestTube } from 'lucide-react';
+import { useState, useEffect, useCallback } from 'react';
+import { Bell, Webhook, Check, Settings, TestTube, ToggleLeft, ToggleRight, Loader2, AlertCircle, Plus, Trash2 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
-import { notificationChannels } from '@/lib/mock';
+import { notificationApi } from '@/api/notification';
 
-const iconMap: Record<string, React.ElementType> = {
-  Send, Bell, MessageSquare, Navigation, Mail,
+interface NotificationChannel {
+  id: number;
+  name: string;
+  channel_type: string;
+  config: Record<string, any>;
+  is_enabled: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+const channelStyle: Record<string, { bg: string; color: string; label: string }> = {
+  webhook_feishu: { bg: 'bg-[rgba(0,150,255,0.15)]', color: 'text-[#00a8ff]', label: '飞书' },
+  dingtalk: { bg: 'bg-[rgba(0,160,255,0.15)]', color: 'text-[#0089ff]', label: '钉钉' },
+  email: { bg: 'bg-[rgba(220,50,32,0.15)]', color: 'text-[#ef5350]', label: '邮件' },
 };
 
-const channelStyle: Record<string, { bg: string; color: string }> = {
-  feishu: { bg: 'bg-[rgba(0,150,255,0.15)]', color: 'text-[#00a8ff]' },
-  dingtalk: { bg: 'bg-[rgba(0,160,255,0.15)]', color: 'text-[#0089ff]' },
-  wechat: { bg: 'bg-[rgba(7,193,96,0.15)]', color: 'text-[#07c160]' },
-  telegram: { bg: 'bg-[rgba(0,136,204,0.15)]', color: 'text-[#0088cc]' },
-  email: { bg: 'bg-[rgba(220,50,32,0.15)]', color: 'text-[#ef5350]' },
-};
-
-const allEvents = [
-  { key: 'ticket_created', label: '工单创建' },
-  { key: 'ticket_approved', label: '审批通过' },
-  { key: 'ticket_rejected', label: '审批拒绝' },
-  { key: 'ticket_executed', label: '执行完成' },
-  { key: 'ticket_failed', label: '执行失败' },
-  { key: 'ticket_rollback', label: '工单回滚' },
-];
-
 export default function NotificationsPage() {
-  const [channels, setChannels] = useState(notificationChannels);
-  const [editChannel, setEditChannel] = useState<typeof notificationChannels[0] | null>(null);
+  const [channels, setChannels] = useState<NotificationChannel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [testingId, setTestingId] = useState<number | null>(null);
+  const [testResult, setTestResult] = useState<{ id: number; success: boolean; message: string } | null>(null);
 
-  const toggleChannel = (id: number) => {
-    setChannels(prev => prev.map(c => c.id === id ? { ...c, enabled: !c.enabled } : c));
-  };
+  const fetchChannels = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await notificationApi.list();
+      setChannels(data);
+    } catch (err: any) {
+      setError(err?.response?.data?.detail || '获取通知渠道失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchChannels();
+  }, [fetchChannels]);
+
+  const toggleChannel = useCallback(async (id: number) => {
+    const ch = channels.find(c => c.id === id);
+    if (!ch) return;
+    try {
+      await notificationApi.update(id, { is_enabled: !ch.is_enabled });
+      setChannels(prev => prev.map(c => c.id === id ? { ...c, is_enabled: !c.is_enabled } : c));
+    } catch {}
+  }, [channels]);
+
+  const handleTest = useCallback(async (id: number) => {
+    setTestingId(id);
+    setTestResult(null);
+    try {
+      const res = await notificationApi.test(id);
+      setTestResult({ id, success: res.success, message: res.message });
+    } catch (err: any) {
+      setTestResult({ id, success: false, message: err?.response?.data?.detail || '测试失败' });
+    } finally {
+      setTestingId(null);
+      setTimeout(() => setTestResult(null), 5000);
+    }
+  }, []);
+
+  const handleDelete = useCallback(async (id: number) => {
+    if (!confirm('确认删除该通知渠道？')) return;
+    try {
+      await notificationApi.delete(id);
+      setChannels(prev => prev.filter(c => c.id !== id));
+    } catch {}
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-400" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
+        <AlertCircle className="w-12 h-12 mb-3 text-red-400" />
+        <p className="text-sm">{error}</p>
+        <button onClick={fetchChannels} className="mt-3 px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors">
+          重试
+        </button>
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-5">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-semibold">通知渠道配置</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多渠道通知，支持飞书、钉钉、企业微信、Telegram</p>
+          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多渠道通知，支持飞书、钉钉、邮件</p>
         </div>
-        <button className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium hover:bg-[var(--dg-bg-hover)] hover:border-[var(--dg-text-muted)] transition-all">
-          <Settings className="w-4 h-4" /> 全局设置
-        </button>
       </div>
 
-      <div className="grid grid-cols-5 gap-4">
-        {[
-          { label: '渠道总数', value: channels.length, icon: Webhook, color: 'text-blue-400', bg: 'bg-blue-400/10' },
-          { label: '已启用', value: channels.filter(c => c.enabled).length, icon: Check, color: 'text-green-400', bg: 'bg-green-400/10' },
-          { label: '未启用', value: channels.filter(c => !c.enabled).length, icon: Bell, color: 'text-gray-400', bg: 'bg-gray-400/10' },
-        ].map((s, i) => (
-          <Card key={i} className="dg-card">
-            <CardContent className="p-4 flex items-center gap-3">
-              <div className={`w-10 h-10 rounded-lg ${s.bg} flex items-center justify-center`}><s.icon className={`w-5 h-5 ${s.color}`} /></div>
-              <div><div className="text-2xl font-bold">{s.value}</div><div className="text-xs text-[var(--dg-text-muted)]">{s.label}</div></div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <div className="grid grid-cols-2 gap-4">
-        {channels.map(channel => {
-          const Icon = iconMap[channel.icon] || Bell;
-          const style = channelStyle[channel.type] || channelStyle.email;
-          return (
-            <div
-              key={channel.id}
-              className={`dg-card p-5 cursor-pointer transition-all ${channel.enabled ? 'border-green-500/30 bg-green-500/5' : 'dg-card-hover'}`}
-              onClick={() => setEditChannel(channel)}
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-4">
-                  <div className={`w-12 h-12 rounded-xl ${style.bg} flex items-center justify-center`}>
-                    <Icon className={`w-6 h-6 ${style.color}`} />
-                  </div>
-                  <div>
-                    <div className="text-base font-semibold">{channel.name}</div>
-                    <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">{channel.description}</div>
-                    {channel.enabled && channel.events && (
-                      <div className="flex flex-wrap gap-1 mt-2">
-                        {channel.events.slice(0, 3).map(e => (
-                          <span key={e} className="px-1.5 py-0.5 bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] text-[10px] rounded">{allEvents.find(a => a.key === e)?.label || e}</span>
-                        ))}
-                        {channel.events.length > 3 && <span className="px-1.5 py-0.5 text-[var(--dg-text-muted)] text-[10px]">+{channel.events.length - 3}</span>}
-                      </div>
-                    )}
-                  </div>
-                </div>
-                <div className="flex flex-col items-end gap-2">
-                  <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${channel.enabled ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
-                    {channel.enabled ? '已启用' : '未启用'}
-                  </span>
-                  <button
-                    onClick={e => { e.stopPropagation(); toggleChannel(channel.id); }}
-                    className="transition-colors"
-                  >
-                    {channel.enabled ? <ToggleRight className="w-7 h-7 text-green-400" /> : <ToggleLeft className="w-7 h-7 text-[var(--dg-text-muted)]" />}
-                  </button>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* 编辑弹窗 */}
-      {editChannel && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setEditChannel(null)}>
-          <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-lg w-full mx-4" onClick={e => e.stopPropagation()}>
-            <h3 className="text-xl font-semibold mb-5">配置 {editChannel.name}</h3>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium mb-2">Webhook URL</label>
-                <input
-                  className="w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
-                  defaultValue={editChannel.webhook || ''}
-                  placeholder={`请输入 ${editChannel.name} Webhook 地址`}
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2">密钥 (Secret)</label>
-                <input
-                  type="password"
-                  className="w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
-                  placeholder="请输入密钥"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-3">通知事件</label>
-                <div className="grid grid-cols-2 gap-2">
-                  {allEvents.map(evt => (
-                    <label key={evt.key} className="flex items-center gap-2 p-2.5 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] cursor-pointer hover:border-[var(--dg-text-muted)] transition-colors">
-                      <input type="checkbox" defaultChecked={editChannel.events?.includes(evt.key)} className="w-4 h-4 rounded border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] text-blue-500 focus:ring-blue-500/20" />
-                      <span className="text-sm">{evt.label}</span>
-                    </label>
-                  ))}
-                </div>
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2">@ 提醒用户</label>
-                <select className="w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none">
-                  <option>审批人</option>
-                  <option>申请人</option>
-                  <option>执行人</option>
-                  <option>全部相关人员</option>
-                </select>
-              </div>
-            </div>
-            <div className="flex justify-end gap-3 mt-6">
-              <button onClick={() => setEditChannel(null)} className="px-5 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
-                取消
-              </button>
-              <button className="flex items-center gap-2 px-5 py-2.5 bg-green-500/15 border border-green-500/30 rounded-lg text-sm font-medium text-green-400 hover:bg-green-500/25 transition-all">
-                <TestTube className="w-4 h-4" /> 测试
-              </button>
-              <button onClick={() => setEditChannel(null)} className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity">
-                保存
-              </button>
-            </div>
+      {channels.length === 0 ? (
+        <div className="dg-card p-12 text-center">
+          <Bell className="w-12 h-12 mx-auto mb-3 opacity-50 text-[var(--dg-text-muted)]" />
+          <p className="text-sm text-[var(--dg-text-muted)]">暂无通知渠道，请联系管理员配置</p>
+        </div>
+      ) : (
+        <>
+          <div className="grid grid-cols-5 gap-4">
+            {[
+              { label: '渠道总数', value: channels.length, icon: Webhook, color: 'text-blue-400', bg: 'bg-blue-400/10' },
+              { label: '已启用', value: channels.filter(c => c.is_enabled).length, icon: Check, color: 'text-green-400', bg: 'bg-green-400/10' },
+              { label: '未启用', value: channels.filter(c => !c.is_enabled).length, icon: Bell, color: 'text-gray-400', bg: 'bg-gray-400/10' },
+            ].map((s, i) => (
+              <Card key={i} className="dg-card">
+                <CardContent className="p-4 flex items-center gap-3">
+                  <div className={`w-10 h-10 rounded-lg ${s.bg} flex items-center justify-center`}><s.icon className={`w-5 h-5 ${s.color}`} /></div>
+                  <div><div className="text-2xl font-bold">{s.value}</div><div className="text-xs text-[var(--dg-text-muted)]">{s.label}</div></div>
+                </CardContent>
+              </Card>
+            ))}
           </div>
-        </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            {channels.map(channel => {
+              const style = channelStyle[channel.channel_type] || { bg: 'bg-gray-400/10', color: 'text-gray-400', label: channel.channel_type };
+              return (
+                <div key={channel.id} className={`dg-card p-5 transition-all ${channel.is_enabled ? 'border-green-500/30 bg-green-500/5' : 'dg-card-hover'}`}>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <div className={`w-12 h-12 rounded-xl ${style.bg} flex items-center justify-center`}>
+                        <Webhook className={`w-6 h-6 ${style.color}`} />
+                      </div>
+                      <div>
+                        <div className="text-base font-semibold">{channel.name}</div>
+                        <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">
+                          {style.label}
+                          {channel.config?.webhook_url && <span className="ml-2 opacity-60">{channel.config.webhook_url.substring(0, 40)}...</span>}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() => handleTest(channel.id)}
+                        disabled={testingId === channel.id}
+                        className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-blue-500/10 hover:text-blue-400 transition-colors disabled:opacity-50"
+                        title="测试"
+                      >
+                        {testingId === channel.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <TestTube className="w-4 h-4" />}
+                      </button>
+                      <button
+                        onClick={() => handleDelete(channel.id)}
+                        className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-red-500/10 hover:text-red-400 transition-colors"
+                        title="删除"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                      <button onClick={() => toggleChannel(channel.id)} className="transition-colors">
+                        {channel.is_enabled ? <ToggleRight className="w-7 h-7 text-green-400" /> : <ToggleLeft className="w-7 h-7 text-[var(--dg-text-muted)]" />}
+                      </button>
+                    </div>
+                  </div>
+                  {testResult && testResult.id === channel.id && (
+                    <div className={`mt-3 px-3 py-2 rounded-lg text-xs ${testResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
+                      {testResult.message}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </>
       )}
     </div>
   );
diff --git a/frontend/src/pages/PlatformConfigPage.tsx b/frontend/src/pages/PlatformConfigPage.tsx
new file mode 100644
index 0000000..3f08834
--- /dev/null
+++ b/frontend/src/pages/PlatformConfigPage.tsx
@@ -0,0 +1,209 @@
+import { useState, useEffect, useCallback } from 'react';
+import api from '../api/request';
+
+/* ── 类型 ── */
+interface SettingItem {
+  key: string;
+  value: string;
+  value_type: string;
+  group: string;
+  label: string;
+  description: string | null;
+  default_value: string | null;
+  sort_order: number;
+}
+
+type SettingsMap = Record<string, SettingItem[]>;
+
+/* ── 分组元信息 ── */
+const GROUP_META: Record<string, { label: string; icon: string; desc: string }> = {
+  query: { label: '查询控制', icon: '🔍', desc: '查询权限、LIMIT 上限、超时设置' },
+  security: { label: '安全策略', icon: '🔒', desc: '登录安全、密码策略、审计日志' },
+  ticket: { label: '工单流程', icon: '📋', desc: '审批流程、回滚控制' },
+};
+
+export default function PlatformConfigPage() {
+  const [settings, setSettings] = useState<SettingsMap>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [changed, setChanged] = useState<Record<string, string>>({});
+  const [toast, setToast] = useState('');
+
+  const fetchSettings = useCallback(async () => {
+    try {
+      const res = await api.get('/settings');
+      setSettings(res as SettingsMap);
+    } catch {
+      setToast('加载设置失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchSettings(); }, [fetchSettings]);
+
+  const handleChange = (key: string, value: string) => {
+    setChanged(prev => ({ ...prev, [key]: value }));
+  };
+
+  const handleSave = async () => {
+    if (Object.keys(changed).length === 0) return;
+    setSaving(true);
+    try {
+      const items = Object.entries(changed).map(([key, value]) => ({ key, value }));
+      await api.put('/settings', items);
+      setChanged({});
+      setToast('保存成功');
+      await fetchSettings();
+    } catch (e: any) {
+      setToast(e?.response?.data?.detail || '保存失败');
+    } finally {
+      setSaving(false);
+      setTimeout(() => setToast(''), 3000);
+    }
+  };
+
+  const handleReset = (key: string, defaultValue: string | null) => {
+    if (defaultValue) handleChange(key, defaultValue);
+  };
+
+  const displayValue = (item: SettingItem) => changed[item.key] ?? item.value;
+
+  if (loading) {
+    return <div className="text-center py-20 text-[var(--dg-text-muted)]">加载中...</div>;
+  }
+
+  const groupKeys = Object.keys(settings);
+  const hasChanges = Object.keys(changed).length > 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Toast */}
+      {toast && (
+        <div className={`fixed top-6 right-6 z-50 px-4 py-3 rounded-lg text-sm font-medium shadow-lg ${
+          toast === '保存成功'
+            ? 'bg-emerald-500/90 text-white'
+            : 'bg-red-500/90 text-white'
+        }`}>
+          {toast}
+        </div>
+      )}
+
+      {/* 各分组 */}
+      {groupKeys.map(group => {
+        const meta = GROUP_META[group] || { label: group, icon: '⚙️', desc: '' };
+        const items = settings[group] || [];
+
+        return (
+          <div key={group} className="bg-[var(--dg-bg-secondary)] rounded-xl overflow-hidden">
+            {/* 分组头 */}
+            <div className="px-5 py-3 flex items-center gap-3">
+              <span className="text-lg">{meta.icon}</span>
+              <div>
+                <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">{meta.label}</h3>
+                <p className="text-xs text-[var(--dg-text-muted)]">{meta.desc}</p>
+              </div>
+            </div>
+
+            {/* 设置项列表 */}
+            <div className="px-5 pb-4 space-y-3">
+              {items.map(item => {
+                const val = displayValue(item);
+                const isChanged = changed[item.key] !== undefined;
+
+                return (
+                  <div key={item.key} className="flex items-center justify-between gap-4 py-2">
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm text-[var(--dg-text-primary)]">{item.label}</div>
+                      {item.description && (
+                        <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">{item.description}</div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-2 shrink-0">
+                      {/* 重置按钮 */}
+                      {isChanged && item.default_value && (
+                        <button
+                          onClick={() => handleReset(item.key, item.default_value)}
+                          className="text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]"
+                          title="恢复默认值"
+                        >
+                          ↩
+                        </button>
+                      )}
+
+                      {/* 布尔 → 开关 */}
+                      {item.value_type === 'boolean' && (
+                        <button
+                          onClick={() => handleChange(item.key, val === 'true' ? 'false' : 'true')}
+                          className={`relative w-10 h-[22px] rounded-full transition-colors ${
+                            val === 'true' ? 'bg-emerald-500' : 'bg-[var(--dg-bg-tertiary)]'
+                          }`}
+                        >
+                          <span className={`absolute top-[2px] w-[18px] h-[18px] bg-white rounded-full shadow transition-transform ${
+                            val === 'true' ? 'translate-x-[20px]' : 'translate-x-[2px]'
+                          }`} />
+                        </button>
+                      )}
+
+                      {/* 整数 → 数字输入 */}
+                      {item.value_type === 'integer' && (
+                        <input
+                          type="number"
+                          value={parseInt(val) || 0}
+                          onChange={e => handleChange(item.key, e.target.value)}
+                          className={`w-24 px-2 py-1 rounded-lg text-sm text-right bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] outline-none ${
+                            isChanged ? 'ring-1 ring-emerald-500/50' : ''
+                          }`}
+                        />
+                      )}
+
+                      {/* 字符串 → 文本 */}
+                      {item.value_type === 'string' && (
+                        <input
+                          type="text"
+                          value={val}
+                          onChange={e => handleChange(item.key, e.target.value)}
+                          className={`w-48 px-2 py-1 rounded-lg text-sm bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] outline-none ${
+                            isChanged ? 'ring-1 ring-emerald-500/50' : ''
+                          }`}
+                        />
+                      )}
+
+                      {/* 变更指示 */}
+                      {isChanged && (
+                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* 保存按钮 */}
+      {hasChanges && (
+        <div className="flex items-center gap-3 pt-2">
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-5 py-2 rounded-lg text-sm font-medium bg-emerald-500 hover:bg-emerald-600 text-white disabled:opacity-50 transition-colors"
+          >
+            {saving ? '保存中...' : '保存更改'}
+          </button>
+          <button
+            onClick={() => setChanged({})}
+            className="px-4 py-2 rounded-lg text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]"
+          >
+            取消
+          </button>
+          <span className="text-xs text-[var(--dg-text-muted)]">
+            已修改 {Object.keys(changed).length} 项
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/RolesPage.tsx b/frontend/src/pages/RolesPage.tsx
index fa4a464..9523af8 100644
--- a/frontend/src/pages/RolesPage.tsx
+++ b/frontend/src/pages/RolesPage.tsx
@@ -1,15 +1,25 @@
 import { useState, useMemo, useCallback } from 'react';
 import {
-  Crown, Database, Code, Eye, Shield, ChevronRight, Check, Save,
-  Search, X, Copy, GitCompare, Users, Lock, BarChart3, XCircle,
+  Crown, Database, Code, Eye, ChevronRight, Check, Save,
+  Search, X, Copy, Users, Lock, BarChart3, XCircle,
   CheckCircle2, MinusCircle, Sparkles, ChevronDown,
 } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { roles as mockRoles, permissionTreeData, users as mockUsers } from '@/lib/mock';
-import type { Role } from '@/types';
+import { permissionTreeData } from '@/lib/mock';
 
 /* ───────── Types ───────── */
 
+interface Role {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  iconClass: string;
+  permissions: string[];
+  userCount: number;
+  permissionCount: number;
+}
+
 interface PermissionChange {
   id: string;
   label: string;
@@ -86,38 +96,14 @@ function searchTree(nodes: typeof permissionTreeData, query: string): typeof per
   }, []);
 }
 
-function computeChanges(original: Set<string>, current: Set<string>): PermissionChange[] {
-  const allIds = collectAllIds(permissionTreeData);
-  const idToLabel: Record<string, string> = {};
-  const buildLabelMap = (nodes: typeof permissionTreeData) => {
-    nodes.forEach(n => {
-      idToLabel[n.id] = n.label;
-      if (n.children) buildLabelMap(n.children);
-    });
-  };
-  buildLabelMap(permissionTreeData);
-  const changes: PermissionChange[] = [];
-  allIds.forEach(id => {
-    if (current.has(id) && !original.has(id)) {
-      changes.push({ id, label: idToLabel[id] || id, action: 'added' });
-    } else if (!current.has(id) && original.has(id)) {
-      changes.push({ id, label: idToLabel[id] || id, action: 'removed' });
-    }
-  });
-  return changes;
-}
-
 /* ───────── Main Component ───────── */
 
 export default function RolesPage() {
-  const [selectedRole, setSelectedRole] = useState<Role | null>(mockRoles[0]);
-  const [checkedKeys, setCheckedKeys] = useState<Set<string>>(new Set(mockRoles[0]?.permissions || []));
-  const [originalKeys, setOriginalKeys] = useState<Set<string>>(new Set(mockRoles[0]?.permissions || []));
+  const [checkedKeys, setCheckedKeys] = useState<Set<string>>(new Set());
+  const [originalKeys, setOriginalKeys] = useState<Set<string>>(new Set());
   const [searchQuery, setSearchQuery] = useState('');
   const [showDiff, setShowDiff] = useState(false);
   const [showPresets, setShowPresets] = useState(false);
-  const [showCloneModal, setShowCloneModal] = useState<Role | null>(null);
-  const [showStats, setShowStats] = useState(false);
   const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
 
   const hasChanges = useMemo(() => {
@@ -125,18 +111,29 @@ export default function RolesPage() {
     return allIds.some(id => checkedKeys.has(id) !== originalKeys.has(id));
   }, [checkedKeys, originalKeys]);
 
-  const changes = useMemo(() => computeChanges(originalKeys, checkedKeys), [originalKeys, checkedKeys]);
+  const changes = useMemo(() => {
+    const allIds = collectAllIds(permissionTreeData);
+    const idToLabel: Record<string, string> = {};
+    const buildLabelMap = (nodes: typeof permissionTreeData) => {
+      nodes.forEach(n => {
+        idToLabel[n.id] = n.label;
+        if (n.children) buildLabelMap(n.children);
+      });
+    };
+    buildLabelMap(permissionTreeData);
+    const result: PermissionChange[] = [];
+    allIds.forEach(id => {
+      if (checkedKeys.has(id) && !originalKeys.has(id)) {
+        result.push({ id, label: idToLabel[id] || id, action: 'added' });
+      } else if (!checkedKeys.has(id) && originalKeys.has(id)) {
+        result.push({ id, label: idToLabel[id] || id, action: 'removed' });
+      }
+    });
+    return result;
+  }, [originalKeys, checkedKeys]);
 
   const filteredTree = useMemo(() => searchTree(permissionTreeData, searchQuery), [searchQuery]);
 
-  const handleRoleSelect = useCallback((role: Role) => {
-    setSelectedRole(role);
-    const newSet = new Set(role.permissions);
-    setCheckedKeys(newSet);
-    setOriginalKeys(newSet);
-    setShowDiff(false);
-  }, []);
-
   const togglePermission = useCallback((id: string) => {
     setCheckedKeys(prev => {
       const next = new Set(prev);
@@ -161,15 +158,15 @@ export default function RolesPage() {
 
   const applyPreset = (preset: PermissionPreset) => {
     setCheckedKeys(new Set(preset.permissions));
+    setOriginalKeys(new Set(preset.permissions));
     setShowPresets(false);
-    setToast({ message: `已应用「${preset.name}」`, type: 'success' });
+    setToast({ message: `已应用「${preset.name}」预设`, type: 'success' });
     setTimeout(() => setToast(null), 2000);
   };
 
   const handleSave = () => {
-    if (!selectedRole) return;
     setOriginalKeys(new Set(checkedKeys));
-    setToast({ message: '权限已保存', type: 'success' });
+    setToast({ message: '权限配置已保存（演示模式）', type: 'success' });
     setTimeout(() => setToast(null), 2000);
   };
 
@@ -180,19 +177,6 @@ export default function RolesPage() {
     setTimeout(() => setToast(null), 2000);
   };
 
-  // Role statistics
-  const roleStats = useMemo(() => {
-    return mockRoles.map(role => {
-      const roleUsers = mockUsers.filter(u => u.role === role.id);
-      return {
-        role,
-        userCount: roleUsers.length,
-        permissionCount: role.permissions.length,
-        onlineUsers: roleUsers.filter(u => u.status === 'active').length,
-      };
-    });
-  }, []);
-
   return (
     <div className="space-y-5">
       {/* Toast */}
@@ -212,258 +196,158 @@ export default function RolesPage() {
           <h1 className="text-2xl font-semibold">角色权限管理</h1>
           <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置 RBAC 角色权限，控制用户对系统功能和数据的访问</p>
         </div>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => setShowStats(!showStats)}
-            className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all"
-          >
-            <BarChart3 className="w-4 h-4" /> 统计
-          </button>
-          <button className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity">
-            <Shield className="w-4 h-4" /> 新建角色
-          </button>
-        </div>
       </div>
 
-      {/* Stats Panel */}
-      {showStats && (
-        <div className="grid grid-cols-4 gap-4">
-          {roleStats.map(({ role, userCount, permissionCount, onlineUsers }) => {
-            const Icon = iconMap[role.icon] || Eye;
-            return (
-              <Card key={role.id} className="dg-card">
-                <CardContent className="p-4">
-                  <div className="flex items-center gap-3 mb-3">
-                    <div className={`w-9 h-9 rounded-lg flex items-center justify-center ${role.iconClass}`}>
-                      <Icon className="w-4 h-4" />
-                    </div>
-                    <div>
-                      <div className="text-sm font-semibold">{role.name}</div>
-                      <div className="text-xs text-[var(--dg-text-muted)]">{role.userCount} 用户</div>
-                    </div>
-                  </div>
-                  <div className="grid grid-cols-3 gap-2 text-center">
-                    <div className="p-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
-                      <div className="text-lg font-bold text-blue-400">{userCount}</div>
-                      <div className="text-[10px] text-[var(--dg-text-muted)]">用户</div>
-                    </div>
-                    <div className="p-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
-                      <div className="text-lg font-bold text-purple-400">{permissionCount}</div>
-                      <div className="text-[10px] text-[var(--dg-text-muted)]">权限</div>
-                    </div>
-                    <div className="p-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
-                      <div className="text-lg font-bold text-green-400">{onlineUsers}</div>
-                      <div className="text-[10px] text-[var(--dg-text-muted)]">在线</div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            );
-          })}
+      {/* Empty state info */}
+      <div className="dg-card p-5 flex items-start gap-3 bg-blue-500/5 border-blue-500/20">
+        <Users className="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" />
+        <div>
+          <p className="text-sm text-[var(--dg-text-secondary)]">
+            角色数据暂未接入后端 API，当前为权限配置演示模式。您可以使用下方的权限树和预设模板来规划角色权限方案。
+          </p>
         </div>
-      )}
-
-      {/* Role Cards */}
-      <div className="grid grid-cols-4 gap-4">
-        {mockRoles.map(role => {
-          const Icon = iconMap[role.icon] || Eye;
-          return (
-            <div
-              key={role.id}
-              onClick={() => handleRoleSelect(role)}
-              className={`dg-card p-5 cursor-pointer transition-all ${selectedRole?.id === role.id ? 'border-blue-500/50 bg-blue-500/5' : 'dg-card-hover'}`}
-            >
-              <div className="flex items-center gap-3 mb-3">
-                <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${role.iconClass}`}>
-                  <Icon className="w-5 h-5" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="text-base font-semibold truncate">{role.name}</div>
-                  <div className="text-xs text-[var(--dg-text-muted)] truncate">{role.description}</div>
-                </div>
-              </div>
-              <div className="flex gap-4 pt-3 border-t border-[var(--dg-border)]">
-                <div className="text-xs text-[var(--dg-text-secondary)]">
-                  <Users className="w-3 h-3 inline mr-1" />
-                  <span className="text-[var(--dg-text-primary)] font-semibold">{role.userCount}</span> 用户
-                </div>
-                <div className="text-xs text-[var(--dg-text-secondary)]">
-                  <Lock className="w-3 h-3 inline mr-1" />
-                  <span className="text-[var(--dg-text-primary)] font-semibold">{role.permissionCount}</span> 权限
-                </div>
-              </div>
-              {/* Clone button */}
-              <button
-                onClick={(e) => { e.stopPropagation(); setShowCloneModal(role); }}
-                className="mt-3 flex items-center gap-1 text-xs text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors"
-              >
-                <Copy className="w-3 h-3" /> 克隆角色
-              </button>
-            </div>
-          );
-        })}
       </div>
 
       {/* Permission Config */}
-      {selectedRole && (
-        <Card className="dg-card">
-          <CardHeader className="border-b border-[var(--dg-border)] flex flex-row items-center justify-between flex-wrap gap-3">
-            <div className="flex items-center gap-3">
-              <CardTitle className="text-[15px] font-semibold">{selectedRole.name} - 权限配置</CardTitle>
-              {hasChanges && (
-                <span className="px-2 py-0.5 rounded-full bg-yellow-500/15 text-yellow-400 text-xs font-medium">
-                  有未保存的更改 ({changes.length})
-                </span>
+      <Card className="dg-card">
+        <CardHeader className="border-b border-[var(--dg-border)] flex flex-row items-center justify-between flex-wrap gap-3">
+          <CardTitle className="text-[15px] font-semibold">权限配置</CardTitle>
+          <div className="flex items-center gap-2">
+            {/* Presets */}
+            <div className="relative">
+              <button
+                onClick={() => setShowPresets(!showPresets)}
+                className="flex items-center gap-2 px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-colors"
+              >
+                <Sparkles className="w-4 h-4" /> 预设模板 <ChevronDown className="w-3 h-3" />
+              </button>
+              {showPresets && (
+                <>
+                  <div className="fixed inset-0 z-40" onClick={() => setShowPresets(false)} />
+                  <div className="absolute right-0 top-full mt-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl z-50 py-1 min-w-[260px]">
+                    {PERMISSION_PRESETS.map(preset => {
+                      const Icon = preset.icon;
+                      return (
+                        <button
+                          key={preset.key}
+                          onClick={() => applyPreset(preset)}
+                          className="w-full flex items-start gap-3 px-4 py-3 text-left hover:bg-[var(--dg-bg-hover)] transition-colors border-b border-[var(--dg-border-light)] last:border-0"
+                        >
+                          <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center flex-shrink-0 mt-0.5">
+                            <Icon className="w-4 h-4 text-blue-400" />
+                          </div>
+                          <div>
+                            <div className="text-sm font-medium">{preset.name}</div>
+                            <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">{preset.description}</div>
+                            <div className="text-xs text-blue-400 mt-1">{preset.permissions.length} 个权限</div>
+                          </div>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </>
               )}
             </div>
-            <div className="flex items-center gap-2">
-              {/* Presets */}
-              <div className="relative">
-                <button
-                  onClick={() => setShowPresets(!showPresets)}
-                  className="flex items-center gap-2 px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-colors"
-                >
-                  <Sparkles className="w-4 h-4" /> 预设模板 <ChevronDown className="w-3 h-3" />
-                </button>
-                {showPresets && (
-                  <>
-                    <div className="fixed inset-0 z-40" onClick={() => setShowPresets(false)} />
-                    <div className="absolute right-0 top-full mt-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl z-50 py-1 min-w-[260px]">
-                      {PERMISSION_PRESETS.map(preset => {
-                        const Icon = preset.icon;
-                        return (
-                          <button
-                            key={preset.key}
-                            onClick={() => applyPreset(preset)}
-                            className="w-full flex items-start gap-3 px-4 py-3 text-left hover:bg-[var(--dg-bg-hover)] transition-colors border-b border-[var(--dg-border-light)] last:border-0"
-                          >
-                            <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center flex-shrink-0 mt-0.5">
-                              <Icon className="w-4 h-4 text-blue-400" />
-                            </div>
-                            <div>
-                              <div className="text-sm font-medium">{preset.name}</div>
-                              <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">{preset.description}</div>
-                              <div className="text-xs text-blue-400 mt-1">{preset.permissions.length} 个权限</div>
-                            </div>
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </>
+
+            {/* Diff Toggle */}
+            {hasChanges && (
+              <button
+                onClick={() => setShowDiff(!showDiff)}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+                  showDiff ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30' : 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]'
+                }`}
+              >
+                变更对比
+              </button>
+            )}
+
+            {/* Discard */}
+            {hasChanges && (
+              <button
+                onClick={handleDiscard}
+                className="flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-400 hover:bg-red-500/20 transition-colors"
+              >
+                <X className="w-4 h-4" /> 撤销
+              </button>
+            )}
+
+            {/* Save */}
+            <button
+              onClick={handleSave}
+              className="flex items-center gap-2 px-4 py-2 bg-blue-500/15 border border-blue-500/30 rounded-lg text-sm font-medium text-blue-400 hover:bg-blue-500/25 transition-all"
+            >
+              <Save className="w-4 h-4" /> 保存权限
+            </button>
+          </div>
+        </CardHeader>
+
+        <CardContent className="p-5">
+          <div className="flex gap-5">
+            {/* Permission Tree */}
+            <div className="flex-1 min-w-0">
+              {/* Search */}
+              <div className="relative mb-4">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
+                <input
+                  value={searchQuery}
+                  onChange={e => setSearchQuery(e.target.value)}
+                  placeholder="搜索权限名称..."
+                  className="w-full pl-10 pr-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm placeholder:text-[var(--dg-text-muted)] focus:border-blue-400 focus:outline-none"
+                />
+                {searchQuery && (
+                  <button onClick={() => setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
+                    <X className="w-3.5 h-3.5" />
+                  </button>
                 )}
               </div>
 
-              {/* Diff Toggle */}
-              {hasChanges && (
-                <button
-                  onClick={() => setShowDiff(!showDiff)}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
-                    showDiff ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30' : 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]'
-                  }`}
-                >
-                  <GitCompare className="w-4 h-4" /> 变更对比
-                </button>
-              )}
-
-              {/* Discard */}
-              {hasChanges && (
-                <button
-                  onClick={handleDiscard}
-                  className="flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-400 hover:bg-red-500/20 transition-colors"
-                >
-                  <X className="w-4 h-4" /> 撤销
-                </button>
-              )}
-
-              {/* Save */}
-              <button
-                onClick={handleSave}
-                className="flex items-center gap-2 px-4 py-2 bg-blue-500/15 border border-blue-500/30 rounded-lg text-sm font-medium text-blue-400 hover:bg-blue-500/25 transition-all"
-              >
-                <Save className="w-4 h-4" /> 保存权限
-              </button>
-            </div>
-          </CardHeader>
-
-          <CardContent className="p-5">
-            <div className="flex gap-5">
-              {/* Permission Tree */}
-              <div className="flex-1 min-w-0">
-                {/* Search */}
-                <div className="relative mb-4">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
-                  <input
-                    value={searchQuery}
-                    onChange={e => setSearchQuery(e.target.value)}
-                    placeholder="搜索权限名称..."
-                    className="w-full pl-10 pr-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm placeholder:text-[var(--dg-text-muted)] focus:border-blue-400 focus:outline-none"
+              {/* Tree */}
+              <div className="space-y-1">
+                {filteredTree.map(node => (
+                  <PermissionNodeComponent
+                    key={node.id}
+                    node={node}
+                    checkedKeys={checkedKeys}
+                    onToggle={togglePermission}
+                    onToggleChildren={toggleChildren}
+                    depth={0}
                   />
-                  {searchQuery && (
-                    <button onClick={() => setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
-                      <X className="w-3.5 h-3.5" />
-                    </button>
-                  )}
-                </div>
+                ))}
+                {filteredTree.length === 0 && (
+                  <div className="text-center py-8 text-[var(--dg-text-muted)] text-sm">
+                    <Search className="w-8 h-8 mx-auto mb-2 opacity-30" />
+                    未找到匹配的权限
+                  </div>
+                )}
+              </div>
+            </div>
 
-                {/* Tree */}
-                <div className="space-y-1">
-                  {filteredTree.map(node => (
-                    <PermissionNodeComponent
-                      key={node.id}
-                      node={node}
-                      checkedKeys={checkedKeys}
-                      onToggle={togglePermission}
-                      onToggleChildren={toggleChildren}
-                      depth={0}
-                    />
-                  ))}
-                  {filteredTree.length === 0 && (
-                    <div className="text-center py-8 text-[var(--dg-text-muted)] text-sm">
-                      <Search className="w-8 h-8 mx-auto mb-2 opacity-30" />
-                      未找到匹配的权限
+            {/* Diff Panel */}
+            {showDiff && hasChanges && (
+              <div className="w-72 border-l border-[var(--dg-border)] pl-5 flex-shrink-0">
+                <h3 className="text-sm font-semibold mb-3">变更详情</h3>
+                <div className="space-y-2 max-h-[500px] overflow-y-auto">
+                  {changes.map(change => (
+                    <div
+                      key={change.id}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs ${
+                        change.action === 'added' ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'
+                      }`}
+                    >
+                      {change.action === 'added' ? <CheckCircle2 className="w-3.5 h-3.5 flex-shrink-0" /> : <MinusCircle className="w-3.5 h-3.5 flex-shrink-0" />}
+                      <span className="flex-1 min-w-0 truncate">{change.label}</span>
                     </div>
-                  )}
+                  ))}
+                </div>
+                <div className="mt-3 pt-3 border-t border-[var(--dg-border)] flex items-center gap-3 text-xs text-[var(--dg-text-muted)]">
+                  <span className="flex items-center gap-1"><CheckCircle2 className="w-3 h-3 text-green-400" /> 新增 {changes.filter(c => c.action === 'added').length}</span>
+                  <span className="flex items-center gap-1"><MinusCircle className="w-3 h-3 text-red-400" /> 移除 {changes.filter(c => c.action === 'removed').length}</span>
                 </div>
               </div>
-
-              {/* Diff Panel */}
-              {showDiff && hasChanges && (
-                <div className="w-72 border-l border-[var(--dg-border)] pl-5 flex-shrink-0">
-                  <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
-                    <GitCompare className="w-4 h-4 text-[var(--dg-text-muted)]" />
-                    变更详情
-                  </h3>
-                  <div className="space-y-2 max-h-[500px] overflow-y-auto">
-                    {changes.map(change => (
-                      <div
-                        key={change.id}
-                        className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs ${
-                          change.action === 'added' ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'
-                        }`}
-                      >
-                        {change.action === 'added' ? <CheckCircle2 className="w-3.5 h-3.5 flex-shrink-0" /> : <MinusCircle className="w-3.5 h-3.5 flex-shrink-0" />}
-                        <span className="flex-1 min-w-0 truncate">{change.label}</span>
-                      </div>
-                    ))}
-                  </div>
-                  <div className="mt-3 pt-3 border-t border-[var(--dg-border)] flex items-center gap-3 text-xs text-[var(--dg-text-muted)]">
-                    <span className="flex items-center gap-1"><CheckCircle2 className="w-3 h-3 text-green-400" /> 新增 {changes.filter(c => c.action === 'added').length}</span>
-                    <span className="flex items-center gap-1"><MinusCircle className="w-3 h-3 text-red-400" /> 移除 {changes.filter(c => c.action === 'removed').length}</span>
-                  </div>
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Clone Modal */}
-      {showCloneModal && (
-        <CloneRoleModal
-          sourceRole={showCloneModal}
-          onClose={() => setShowCloneModal(null)}
-        />
-      )}
+            )}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 }
@@ -531,54 +415,3 @@ function PermissionNodeComponent({
     </div>
   );
 }
-
-/* ───────── Clone Role Modal ───────── */
-
-function CloneRoleModal({ sourceRole, onClose }: { sourceRole: Role; onClose: () => void }) {
-  const [name, setName] = useState(`${sourceRole.name} (副本)`);
-  const [description, setDescription] = useState(sourceRole.description);
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleClone = async () => {
-    setSubmitting(true);
-    try {
-      // In real implementation, call API
-      await new Promise(r => setTimeout(r, 500));
-      onClose();
-    } catch {
-      // handle error
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="w-full max-w-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
-        <div className="flex items-center justify-between mb-5">
-          <h2 className="text-lg font-semibold flex items-center gap-2"><Copy className="w-5 h-5 text-blue-400" /> 克隆角色</h2>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]"><XCircle className="w-5 h-5" /></button>
-        </div>
-        <div className="p-3 bg-blue-500/5 border border-blue-500/15 rounded-lg mb-4">
-          <p className="text-sm text-[var(--dg-text-secondary)]">基于 <strong className="text-[var(--dg-text-primary)]">{sourceRole.name}</strong> 创建副本，包含 {sourceRole.permissions.length} 个权限</p>
-        </div>
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium mb-1">角色名称 *</label>
-            <input value={name} onChange={e => setName(e.target.value)} className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" />
-          </div>
-          <div>
-            <label className="block text-sm font-medium mb-1">描述</label>
-            <textarea value={description} onChange={e => setDescription(e.target.value)} className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none resize-none" rows={2} />
-          </div>
-          <div className="flex justify-end gap-3 pt-2">
-            <button onClick={onClose} className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">取消</button>
-            <button onClick={handleClone} disabled={submitting || !name.trim()} className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:opacity-90 disabled:opacity-50 transition-opacity">
-              {submitting ? '克隆中...' : '确认克隆'}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index a9cae99..20467ff 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -1,10 +1,12 @@
 import { useState } from 'react';
+import PlatformConfigPage from './PlatformConfigPage';
+import AuditRulesPage from './AuditRulesPage';
 import AnnouncementPage from './AnnouncementPage';
 import NotificationPage from './NotificationPage';
 import LdapConfigPage from './LdapConfigPage';
-import AuditRulesPage from './AuditRulesPage';
 
 const tabs = [
+  { id: 'platform', label: '平台配置', icon: '⚙️' },
   { id: 'rules', label: '审核规则', icon: '🛡️' },
   { id: 'announcement', label: '公告管理', icon: '📢' },
   { id: 'notification', label: '消息推送', icon: '🔔' },
@@ -14,7 +16,7 @@ const tabs = [
 type TabId = typeof tabs[number]['id'];
 
 export default function SettingsPage() {
-  const [activeTab, setActiveTab] = useState<TabId>('rules');
+  const [activeTab, setActiveTab] = useState<TabId>('platform');
 
   return (
     <div className="space-y-5">
@@ -43,6 +45,7 @@ export default function SettingsPage() {
 
       {/* 内容区 */}
       <div>
+        {activeTab === 'platform' && <PlatformConfigPage />}
         {activeTab === 'rules' && <AuditRulesPage />}
         {activeTab === 'announcement' && <AnnouncementPage />}
         {activeTab === 'notification' && <NotificationPage />}
diff --git a/frontend/src/pages/UsersPage.tsx b/frontend/src/pages/UsersPage.tsx
index 4a84aae..e4d7951 100644
--- a/frontend/src/pages/UsersPage.tsx
+++ b/frontend/src/pages/UsersPage.tsx
@@ -5,7 +5,6 @@ import {
   UserCheck, UserX, Filter,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
-import { users as mockUsers } from '@/lib/mock';
 import { userApi } from '@/api/user';
 
 /* ───────── Types ───────── */
@@ -91,26 +90,6 @@ function validateUserForm(data: { username: string; password: string; email: str
   return errors;
 }
 
-/* ───────── Mock Activities ───────── */
-
-function generateMockActivities(userId: number): UserActivity[] {
-  const actions = [
-    { action: '登录系统', target: 'Web Console' },
-    { action: '执行查询', target: 'users 表' },
-    { action: '提交工单', target: 'TK-20240115-001' },
-    { action: '审批工单', target: 'TK-20240115-002' },
-    { action: '导出数据', target: 'orders 表' },
-    { action: '修改密码', target: '账户安全' },
-  ];
-  return actions.map((a, i) => ({
-    id: `act-${userId}-${i}`,
-    action: a.action,
-    target: a.target,
-    created_at: new Date(Date.now() - i * 3600000 * 2).toISOString(),
-    status: Math.random() > 0.2 ? 'success' : 'failed',
-  }));
-}
-
 /* ───────── CSV Export Helper ───────── */
 
 function exportUsersToCSV(users: UserItem[]) {
@@ -155,12 +134,7 @@ export default function UsersPage() {
     try {
       const res = await userApi.list();
       const data = (res as any)?.items || res;
-      // Merge with mock user data to enrich with last_login
-      const merged = (Array.isArray(data) ? data : []).map((u: UserItem) => {
-        const mockU = mockUsers.find(m => m.id === u.id);
-        return { ...u, last_login: mockU?.lastLogin || u.created_at };
-      });
-      setUsers(merged);
+      setUsers(Array.isArray(data) ? data : []);
     } catch {
       setToast({ message: '获取用户列表失败', type: 'error' });
     } finally {
@@ -792,7 +766,6 @@ function ResetPasswordModal({ user, onClose, setToast }: { user: UserItem; onClo
 /* ───────── User Detail Modal ───────── */
 
 function UserDetailModal({ user, onClose }: { user: UserItem; onClose: () => void }) {
-  const activities = useMemo(() => generateMockActivities(user.id), [user.id]);
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
@@ -847,19 +820,8 @@ function UserDetailModal({ user, onClose }: { user: UserItem; onClose: () => voi
             <Clock className="w-4 h-4 text-[var(--dg-text-muted)]" />
             最近活动
           </h3>
-          <div className="space-y-2 max-h-[300px] overflow-y-auto">
-            {activities.map(act => (
-              <div key={act.id} className="flex items-center gap-3 p-2.5 rounded-lg hover:bg-[var(--dg-bg-hover)] transition-colors">
-                <div className={`w-2 h-2 rounded-full ${act.status === 'success' ? 'bg-green-400' : 'bg-red-400'}`} />
-                <div className="flex-1 min-w-0">
-                  <div className="text-sm">{act.action}</div>
-                  <div className="text-xs text-[var(--dg-text-muted)]">{act.target}</div>
-                </div>
-                <div className="text-xs text-[var(--dg-text-muted)] whitespace-nowrap">
-                  {new Date(act.created_at).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
-                </div>
-              </div>
-            ))}
+          <div className="text-sm text-[var(--dg-text-muted)] text-center py-6">
+            暂无活动记录
           </div>
         </div>
       </div>
diff --git a/frontend/src/pages/WorkflowPage.tsx b/frontend/src/pages/WorkflowPage.tsx
index a6b88ba..a925212 100644
--- a/frontend/src/pages/WorkflowPage.tsx
+++ b/frontend/src/pages/WorkflowPage.tsx
@@ -1,613 +1,140 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import {
   Plus, Edit2, Eye, ToggleLeft, ToggleRight, GitBranch, Users, CheckCircle,
   ArrowRight, Shield, Trash2, X, ChevronDown, ChevronUp,
   Save, Play, Copy, History, TestTube, AlertTriangle,
-  Loader2, Check, XCircle,
+  Loader2, Check, XCircle, Star,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
-import { workflows as initialWorkflows, dbTypeColorMap } from '@/lib/mock';
+import { dbTypeColorMap } from '@/lib/mock';
+import { workflowApi } from '@/api/workflow';
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                               */
 /* ------------------------------------------------------------------ */
 
-type StepType = 'submit' | 'audit' | 'execute';
-
-interface FlowStep {
-  id: string;
+interface WorkflowStep {
+  id: number;
+  workflow_id: number;
+  step_number: number;
   name: string;
-  type: StepType;
-  assignees: string[];
-  assigneeGroups?: string[];
-  mode?: 'any' | 'all';
-  description?: string;
-  conditions?: StepCondition[];
-}
-
-interface StepCondition {
-  id: string;
-  field: string;
-  operator: '>' | '<' | '>=' | '<=' | '=' | '!=' | 'contains' | 'in';
-  value: string;
-  description?: string;
-}
-
-interface FlowVersion {
-  version: number;
-  createdAt: string;
-  author: string;
-  changes: string;
+  step_type: string;
+  approver_role: string | null;
+  approver_ids: string | null;
+  is_required: boolean;
+  timeout_hours: number;
+  auto_approve_on_timeout: boolean;
 }
 
 interface WorkflowDetail {
   id: number;
   name: string;
-  dbTypes: string[];
-  steps: FlowStep[];
-  description: string;
-  enabled: boolean;
-  conditions?: string[];
-  versions?: FlowVersion[];
-  isTemplate?: boolean;
+  description: string | null;
+  is_default: boolean;
+  is_active: boolean;
+  created_at: string | null;
+  steps: WorkflowStep[];
 }
 
-interface SimulationResult {
-  stepId: string;
-  stepName: string;
-  passed: boolean;
-  reason: string;
-  assignees: string[];
-}
-
-/* ------------------------------------------------------------------ */
-/*  Constants                                                           */
-/* ------------------------------------------------------------------ */
-
-const STEP_TYPE_LABELS: Record<StepType, string> = {
+const STEP_TYPE_LABELS: Record<string, string> = {
   submit: '提交阶段',
+  serial: '串行审批',
+  parallel: '并行审批',
+  any_one: '任一审批',
   audit: '审核阶段',
   execute: '执行阶段',
 };
 
-const STEP_TYPE_COLORS: Record<StepType, string> = {
+const STEP_TYPE_COLORS: Record<string, string> = {
   submit: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
+  serial: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
+  parallel: 'bg-orange-500/15 text-orange-400 border-orange-500/30',
+  any_one: 'bg-green-500/15 text-green-400 border-green-500/30',
   audit: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
   execute: 'bg-green-500/15 text-green-400 border-green-500/30',
 };
 
-const STEP_TYPE_ICONS: Record<StepType, React.ElementType> = {
+const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
   submit: Users,
+  serial: Shield,
+  parallel: Users,
+  any_one: CheckCircle,
   audit: Shield,
   execute: Play,
 };
 
-const CONDITION_FIELDS = [
-  { value: 'affected_rows', label: '影响行数' },
-  { value: 'duration_ms', label: '执行耗时(ms)' },
-  { value: 'table_size', label: '表大小(行)' },
-  { value: 'sql_type', label: 'SQL 类型' },
-  { value: 'db_type', label: '数据库类型' },
-  { value: 'priority', label: '优先级' },
-  { value: 'time_of_day', label: '执行时段' },
-];
-
-const CONDITION_OPERATORS: { value: StepCondition['operator']; label: string }[] = [
-  { value: '>', label: '大于' },
-  { value: '<', label: '小于' },
-  { value: '>=', label: '大于等于' },
-  { value: '<=', label: '小于等于' },
-  { value: '=', label: '等于' },
-  { value: '!=', label: '不等于' },
-  { value: 'contains', label: '包含' },
-];
-
-const DEFAULT_STEPS: FlowStep[] = [
-  { id: 'step-1', name: '提交阶段', type: 'submit', assignees: ['工单提交人'], description: '申请人提交 SQL 变更工单' },
-  { id: 'step-2', name: '一级审批', type: 'audit', assignees: ['部门负责人'], mode: 'any', description: '部门负责人进行一级审批' },
-  { id: 'step-3', name: '二级审批', type: 'audit', assignees: ['DBA 团队'], mode: 'any', description: 'DBA 进行二级审批' },
-  { id: 'step-4', name: 'SQL 执行', type: 'execute', assignees: ['DBA 执行人'], description: '审批通过后执行 SQL 变更' },
-];
-
-const TEMPLATES: WorkflowDetail[] = [
-  {
-    id: -1,
-    name: '标准三级审批',
-    dbTypes: ['mysql', 'postgres'],
-    description: '适用于生产环境的标准 SQL 变更流程，包含提交、一级审批、二级审批和执行四个阶段',
-    enabled: false,
-    isTemplate: true,
-    steps: [
-      { id: 't-s1', name: '提交阶段', type: 'submit', assignees: ['工单提交人'], description: '申请人提交 SQL 变更工单' },
-      { id: 't-s2', name: '一级审批', type: 'audit', assignees: ['部门负责人'], mode: 'any', description: '部门负责人审批' },
-      { id: 't-s3', name: '二级审批', type: 'audit', assignees: ['DBA 团队'], mode: 'any', description: 'DBA 审批' },
-      { id: 't-s4', name: 'SQL 执行', type: 'execute', assignees: ['DBA 执行人'], description: '执行 SQL 变更' },
-    ],
-  },
-  {
-    id: -2,
-    name: '紧急变更（简化）',
-    dbTypes: ['mysql', 'postgres', 'redis'],
-    description: '适用于紧急故障修复的快速通道，仅需要一级审批即可执行',
-    enabled: false,
-    isTemplate: true,
-    steps: [
-      { id: 't-e1', name: '提交阶段', type: 'submit', assignees: ['工单提交人'], description: '提交紧急变更工单' },
-      { id: 't-e2', name: '紧急审批', type: 'audit', assignees: ['值班 DBA'], mode: 'any', description: '值班 DBA 快速审批' },
-      { id: 't-e3', name: 'SQL 执行', type: 'execute', assignees: ['值班 DBA'], description: '立即执行' },
-    ],
-  },
-  {
-    id: -3,
-    name: '数据查询审批',
-    dbTypes: ['mysql', 'postgres', 'mongo'],
-    description: '适用于敏感数据查询的审批流程，需要数据负责人审批',
-    enabled: false,
-    isTemplate: true,
-    steps: [
-      { id: 't-q1', name: '提交阶段', type: 'submit', assignees: ['查询申请人'], description: '提交数据查询申请' },
-      { id: 't-q2', name: '数据负责人审批', type: 'audit', assignees: ['数据负责人'], mode: 'any', description: '数据owner审批查询请求' },
-    ],
-  },
-  {
-    id: -4,
-    name: 'DDL 变更审批',
-    dbTypes: ['mysql', 'postgres'],
-    description: '专用于表结构变更的审批流程，包含架构师评审',
-    enabled: false,
-    isTemplate: true,
-    steps: [
-      { id: 't-d1', name: '提交阶段', type: 'submit', assignees: ['工单提交人'], description: '提交 DDL 变更工单' },
-      { id: 't-d2', name: '架构师评审', type: 'audit', assignees: ['架构师'], mode: 'any', description: '架构师评审表结构变更' },
-      { id: 't-d3', name: 'DBA 审批', type: 'audit', assignees: ['DBA 团队'], mode: 'any', description: 'DBA 审批执行方案' },
-      { id: 't-d4', name: 'SQL 执行', type: 'execute', assignees: ['DBA 执行人'], description: '使用 pt-osc/gh-ost 执行' },
-    ],
-  },
-];
-
-const DB_TYPES = ['mysql', 'postgres', 'redis', 'mongo'];
-
-const ASSIGNEE_GROUPS = ['工单提交人', '部门负责人', 'DBA 团队', '值班 DBA', '架构师', '数据负责人', '安全团队'];
-
-/* ------------------------------------------------------------------ */
-/*  Component                                                           */
-/* ------------------------------------------------------------------ */
-
 export default function WorkflowPage() {
-  const [items, setItems] = useState<WorkflowDetail[]>(
-    initialWorkflows.map((w) => ({
-      ...w,
-      steps: DEFAULT_STEPS.slice(0, Math.min((w as { steps?: number }).steps ? (w.steps as number) + 2 : 4, DEFAULT_STEPS.length)),
-      versions: [
-        { version: 1, createdAt: '2024-01-01', author: 'admin', changes: '初始版本' },
-      ],
-    }))
-  );
-
-  // -- Modal states --
-  const [previewWorkflow, setPreviewWorkflow] = useState<WorkflowDetail | null>(null);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [editingWorkflow, setEditingWorkflow] = useState<WorkflowDetail | null>(null);
+  const [items, setItems] = useState<WorkflowDetail[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const [expandedId, setExpandedId] = useState<number | null>(null);
-  const [showTemplates, setShowTemplates] = useState(false);
-  const [showSimulation, setShowSimulation] = useState(false);
-  const [simWorkflow, setSimWorkflow] = useState<WorkflowDetail | null>(null);
-  const [simResults, setSimResults] = useState<SimulationResult[] | null>(null);
-  const [simRunning, setSimRunning] = useState(false);
+  const [previewWorkflow, setPreviewWorkflow] = useState<WorkflowDetail | null>(null);
 
-  // -- Form states --
-  const [formName, setFormName] = useState('');
-  const [formDesc, setFormDesc] = useState('');
-  const [formDbTypes, setFormDbTypes] = useState<string[]>(['mysql']);
-  const [formSteps, setFormSteps] = useState<FlowStep[]>([DEFAULT_STEPS[0]]);
-  const [formConditions, setFormConditions] = useState('');
-  const [activeTab, setActiveTab] = useState<'steps' | 'conditions' | 'versions'>('steps');
-
-  // -- Delete confirmation --
-  const [deleteConfirmId, setDeleteConfirmId] = useState<number | null>(null);
-
-  /* ---------------------------------------------------------------- */
-  /*  Helpers                                                           */
-  /* ---------------------------------------------------------------- */
-
-  const resetForm = useCallback(() => {
-    setFormName('');
-    setFormDesc('');
-    setFormDbTypes(['mysql']);
-    setFormSteps([{ ...DEFAULT_STEPS[0] }]);
-    setFormConditions('');
-    setActiveTab('steps');
-  }, []);
-
-  const openCreate = useCallback(() => {
-    resetForm();
-    setEditingWorkflow(null);
-    setShowCreateModal(true);
-  }, [resetForm]);
-
-  const openEdit = useCallback((wf: WorkflowDetail) => {
-    setFormName(wf.name);
-    setFormDesc(wf.description);
-    setFormDbTypes(wf.dbTypes);
-    setFormSteps(wf.steps.map((s) => ({ ...s })));
-    setFormConditions(wf.conditions?.join(', ') || '');
-    setEditingWorkflow(wf);
-    setShowCreateModal(true);
-  }, []);
-
-  const useTemplate = useCallback((tmpl: WorkflowDetail) => {
-    setFormName(`${tmpl.name} 副本`);
-    setFormDesc(tmpl.description);
-    setFormDbTypes([...tmpl.dbTypes]);
-    setFormSteps(tmpl.steps.map((s) => ({ ...s, id: `step-${Date.now()}-${Math.random().toString(36).slice(2, 6)}` })));
-    setFormConditions('');
-    setEditingWorkflow(null);
-    setShowTemplates(false);
-    setShowCreateModal(true);
-  }, []);
-
-  const toggleWorkflow = useCallback((id: number) => {
-    setItems((prev) => prev.map((w) => (w.id === id ? { ...w, enabled: !w.enabled } : w)));
-  }, []);
-
-  const deleteWorkflow = useCallback((id: number) => {
-    setItems((prev) => prev.filter((w) => w.id !== id));
-    setDeleteConfirmId(null);
-  }, []);
-
-  /* ---------------------------------------------------------------- */
-  /*  Step operations                                                   */
-  /* ---------------------------------------------------------------- */
-
-  const addStep = useCallback(() => {
-    const types: StepType[] = ['audit', 'execute'];
-    const nextType = types[Math.min(formSteps.length - 1, types.length - 1)];
-    setFormSteps((prev) => [
-      ...prev,
-      {
-        id: `step-${Date.now()}`,
-        name: nextType === 'audit' ? `第 ${prev.filter((s) => s.type === 'audit').length + 1} 级审批` : '执行阶段',
-        type: nextType,
-        assignees: nextType === 'audit' ? ['审批人'] : ['DBA 执行人'],
-        mode: 'any',
-        description: '',
-      },
-    ]);
-  }, [formSteps.length]);
-
-  const removeStep = useCallback((stepId: string) => {
-    setFormSteps((prev) => (prev.length <= 1 ? prev : prev.filter((s) => s.id !== stepId)));
-  }, []);
-
-  const updateStep = useCallback((stepId: string, updates: Partial<FlowStep>) => {
-    setFormSteps((prev) => prev.map((s) => (s.id === stepId ? { ...s, ...updates } : s)));
-  }, []);
-
-  const moveStep = useCallback((index: number, direction: 'up' | 'down') => {
-    if (direction === 'up' && index === 0) return;
-    if (direction === 'down' && index === formSteps.length - 1) return;
-    const newIndex = direction === 'up' ? index - 1 : index + 1;
-    setFormSteps((prev) => {
-      const arr = [...prev];
-      [arr[index], arr[newIndex]] = [arr[newIndex], arr[index]];
-      return arr;
-    });
-  }, [formSteps.length]);
-
-  /* ---------------------------------------------------------------- */
-  /*  Condition operations                                              */
-  /* ---------------------------------------------------------------- */
-
-  const addCondition = useCallback((stepId: string) => {
-    setFormSteps((prev) =>
-      prev.map((s) =>
-        s.id === stepId
-          ? {
-              ...s,
-              conditions: [
-                ...(s.conditions || []),
-                { id: `cond-${Date.now()}`, field: 'affected_rows', operator: '>', value: '1000' },
-              ],
-            }
-          : s
-      )
-    );
-  }, []);
-
-  const updateCondition = useCallback((stepId: string, condId: string, updates: Partial<StepCondition>) => {
-    setFormSteps((prev) =>
-      prev.map((s) =>
-        s.id === stepId
-          ? {
-              ...s,
-              conditions: s.conditions?.map((c) => (c.id === condId ? { ...c, ...updates } : c)),
-            }
-          : s
-      )
-    );
-  }, []);
-
-  const removeCondition = useCallback((stepId: string, condId: string) => {
-    setFormSteps((prev) =>
-      prev.map((s) =>
-        s.id === stepId
-          ? { ...s, conditions: s.conditions?.filter((c) => c.id !== condId) }
-          : s
-      )
-    );
-  }, []);
-
-  /* ---------------------------------------------------------------- */
-  /*  Save workflow                                                     */
-  /* ---------------------------------------------------------------- */
-
-  const saveWorkflow = useCallback(() => {
-    if (!formName.trim()) return;
-    const conditions = formConditions
-      ? formConditions.split(',').map((s) => s.trim()).filter(Boolean)
-      : [];
-
-    if (editingWorkflow) {
-      setItems((prev) =>
-        prev.map((w) =>
-          w.id === editingWorkflow.id
-            ? {
-                ...w,
-                name: formName,
-                description: formDesc,
-                dbTypes: formDbTypes,
-                steps: [...formSteps],
-                conditions: conditions.length > 0 ? conditions : undefined,
-                versions: [
-                  {
-                    version: (w.versions?.length || 0) + 1,
-                    createdAt: new Date().toISOString().slice(0, 10),
-                    author: 'admin',
-                    changes: '修改流程配置',
-                  },
-                  ...(w.versions || []),
-                ],
-              }
-            : w
-        )
-      );
-    } else {
-      const newWf: WorkflowDetail = {
-        id: Date.now(),
-        name: formName,
-        description: formDesc,
-        dbTypes: formDbTypes,
-        steps: [...formSteps],
-        enabled: true,
-        conditions: conditions.length > 0 ? conditions : undefined,
-        versions: [
-          {
-            version: 1,
-            createdAt: new Date().toISOString().slice(0, 10),
-            author: 'admin',
-            changes: '初始版本',
-          },
-        ],
-      };
-      setItems((prev) => [...prev, newWf]);
+  const fetchWorkflows = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await workflowApi.list();
+      setItems(data);
+    } catch (err: any) {
+      setError(err?.response?.data?.detail || '获取审批流程失败');
+    } finally {
+      setLoading(false);
     }
-    setShowCreateModal(false);
-  }, [formName, formDesc, formDbTypes, formSteps, formConditions, editingWorkflow]);
-
-  const toggleDbType = useCallback((dt: string) => {
-    setFormDbTypes((prev) =>
-      prev.includes(dt) ? prev.filter((d) => d !== dt) : [...prev, dt]
-    );
   }, []);
 
-  /* ---------------------------------------------------------------- */
-  /*  Simulation                                                        */
-  /* ---------------------------------------------------------------- */
+  useEffect(() => {
+    fetchWorkflows();
+  }, [fetchWorkflows]);
 
-  const runSimulation = useCallback(async (wf: WorkflowDetail) => {
-    setSimRunning(true);
-    setSimWorkflow(wf);
-    setSimResults(null);
-
-    // Simulate async processing
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-
-    const results: SimulationResult[] = wf.steps.map((step) => {
-      let passed = true;
-      let reason = '条件满足，流程通过';
-
-      if (step.conditions && step.conditions.length > 0) {
-        const failedCond = step.conditions[0];
-        passed = false;
-        reason = `未满足条件: ${CONDITION_FIELDS.find((f) => f.value === failedCond.field)?.label || failedCond.field} ${failedCond.operator} ${failedCond.value}`;
-      }
-
-      return {
-        stepId: step.id,
-        stepName: step.name,
-        passed,
-        reason,
-        assignees: step.assignees,
-      };
-    });
-
-    setSimResults(results);
-    setSimRunning(false);
+  const toggleWorkflow = useCallback(async (wf: WorkflowDetail) => {
+    try {
+      await workflowApi.update(wf.id, { is_active: !wf.is_active });
+      setItems(prev => prev.map(w => w.id === wf.id ? { ...w, is_active: !w.is_active } : w));
+    } catch {}
   }, []);
 
-  /* ---------------------------------------------------------------- */
-  /*  Derived                                                           */
-  /* ---------------------------------------------------------------- */
+  const handleDelete = useCallback(async (id: number) => {
+    if (!confirm('确认删除该审批流程？')) return;
+    try {
+      await workflowApi.delete(id);
+      setItems(prev => prev.filter(w => w.id !== id));
+    } catch {}
+  }, []);
 
-  const stats = useMemo(
-    () => ({
-      total: items.length,
-      enabled: items.filter((w) => w.enabled).length,
-      multiAudit: items.filter((w) => w.steps.filter((s) => s.type === 'audit').length > 1).length,
-      singleAudit: items.filter((w) => w.steps.filter((s) => s.type === 'audit').length === 1).length,
-    }),
-    [items]
-  );
+  const setDefault = useCallback(async (id: number) => {
+    try {
+      await workflowApi.setDefault(id);
+      setItems(prev => prev.map(w => ({ ...w, is_default: w.id === id })));
+    } catch {}
+  }, []);
 
-  /* ---------------------------------------------------------------- */
-  /*  Render: Simulation Modal                                          */
-  /* ---------------------------------------------------------------- */
-
-  const renderSimulationModal = () => {
-    if (!showSimulation) return null;
+  const handleClone = useCallback(async (id: number) => {
+    try {
+      await workflowApi.clone(id);
+      await fetchWorkflows();
+    } catch {}
+  }, [fetchWorkflows]);
 
+  if (loading) {
     return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => { setShowSimulation(false); setSimResults(null); }}>
-        <div
-          className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-lg w-full mx-4"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-xl font-semibold flex items-center gap-2">
-              <TestTube className="w-5 h-5 text-blue-400" />
-              流程模拟测试
-            </h3>
-            <button
-              onClick={() => { setShowSimulation(false); setSimResults(null); }}
-              className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)] transition-colors"
-            >
-              <X className="w-5 h-5" />
-            </button>
-          </div>
-
-          <p className="text-sm text-[var(--dg-text-secondary)] mb-4">
-            模拟工单在不同条件下经过审批流程的路径。系统将自动验证每个步骤的条件配置。
-          </p>
-
-          <div className="space-y-2 max-h-[300px] overflow-y-auto">
-            {items.map((wf) => (
-              <button
-                key={wf.id}
-                onClick={() => runSimulation(wf)}
-                disabled={simRunning}
-                className="w-full flex items-center justify-between p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)] hover:border-blue-500/30 hover:bg-blue-500/5 transition-all text-left disabled:opacity-50"
-              >
-                <div>
-                  <div className="text-sm font-medium">{wf.name}</div>
-                  <div className="text-xs text-[var(--dg-text-muted)]">{wf.steps.length} 个阶段</div>
-                </div>
-                {simRunning && simWorkflow?.id === wf.id ? (
-                  <Loader2 className="w-4 h-4 animate-spin text-blue-400" />
-                ) : (
-                  <Play className="w-4 h-4 text-[var(--dg-text-muted)]" />
-                )}
-              </button>
-            ))}
-          </div>
-
-          {/* Results */}
-          {simResults && simWorkflow && (
-            <div className="mt-4 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
-              <h4 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <CheckCircle className="w-4 h-4 text-green-400" />
-                模拟结果: {simWorkflow.name}
-              </h4>
-              <div className="space-y-2">
-                {simResults.map((r, idx) => (
-                  <div key={idx} className="flex items-start gap-2 text-sm">
-                    {r.passed ? (
-                      <Check className="w-4 h-4 text-green-400 mt-0.5 shrink-0" />
-                    ) : (
-                      <XCircle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
-                    )}
-                    <div>
-                      <span className="font-medium">{r.stepName}</span>
-                      <span className="text-xs text-[var(--dg-text-muted)] ml-1.5">
-                        ({r.assignees.join(' / ')})
-                      </span>
-                      <p className={`text-xs ${r.passed ? 'text-green-400' : 'text-red-400'}`}>
-                        {r.reason}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
+      <div className="flex items-center justify-center h-64">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-400" />
       </div>
     );
-  };
-
-  /* ---------------------------------------------------------------- */
-  /*  Render: Templates Modal                                           */
-  /* ---------------------------------------------------------------- */
-
-  const renderTemplatesModal = () => {
-    if (!showTemplates) return null;
+  }
 
+  if (error) {
     return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setShowTemplates(false)}>
-        <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
-          <div className="flex items-center justify-between mb-6">
-            <div>
-              <h3 className="text-xl font-semibold flex items-center gap-2">
-                <Copy className="w-5 h-5 text-blue-400" />
-                流程模板
-              </h3>
-              <p className="text-sm text-[var(--dg-text-secondary)] mt-1">选择一个预置模板快速创建审批流程</p>
-            </div>
-            <button onClick={() => setShowTemplates(false)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)] transition-colors">
-              <X className="w-5 h-5" />
-            </button>
-          </div>
-
-          <div className="space-y-3">
-            {TEMPLATES.map((tmpl) => (
-              <Card key={tmpl.id} className="dg-card hover:border-blue-500/30 transition-all">
-                <CardContent className="p-4">
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <h4 className="text-base font-semibold mb-1">{tmpl.name}</h4>
-                      <p className="text-sm text-[var(--dg-text-secondary)] mb-2">{tmpl.description}</p>
-                      <div className="flex items-center gap-2 mb-2">
-                        <span className="text-xs text-[var(--dg-text-muted)]">适用数据库:</span>
-                        {tmpl.dbTypes.map((dt) => (
-                          <span key={dt} className={`inline-flex px-2 py-0.5 rounded text-[11px] font-medium ${dbTypeColorMap[dt] || ''}`}>
-                            {dt.toUpperCase()}
-                          </span>
-                        ))}
-                      </div>
-                      {/* Mini flow */}
-                      <div className="flex items-center gap-1 mt-2">
-                        {tmpl.steps.map((step, i) => {
-                          const StepIcon = STEP_TYPE_ICONS[step.type];
-                          return (
-                            <div key={step.id} className="flex items-center gap-1">
-                              <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] ${STEP_TYPE_COLORS[step.type]}`}>
-                                <StepIcon className="w-3 h-3" />
-                                {step.name}
-                              </span>
-                              {i < tmpl.steps.length - 1 && <ArrowRight className="w-3 h-3 text-[var(--dg-text-muted)]" />}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                    <button
-                      onClick={() => useTemplate(tmpl)}
-                      className="ml-4 px-3 py-1.5 bg-blue-500/15 text-blue-400 rounded-lg text-xs hover:bg-blue-500/25 transition-colors shrink-0"
-                    >
-                      使用模板
-                    </button>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
+      <div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
+        <AlertCircle className="w-12 h-12 mb-3 text-red-400" />
+        <p className="text-sm">{error}</p>
+        <button onClick={fetchWorkflows} className="mt-3 px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors">
+          重试
+        </button>
       </div>
     );
-  };
-
-  /* ---------------------------------------------------------------- */
-  /*  Main render                                                       */
-  /* ---------------------------------------------------------------- */
+  }
 
   return (
     <div className="space-y-5">
@@ -615,286 +142,210 @@ export default function WorkflowPage() {
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
         <div>
           <h1 className="text-2xl font-semibold">审批流程配置</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程模板，支持条件分支、版本管理和模拟测试</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => setShowTemplates(true)}
-            className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all"
-          >
-            <Copy className="w-4 h-4" /> 模板库
-          </button>
-          <button
-            onClick={() => setShowSimulation(true)}
-            className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all"
-          >
-            <TestTube className="w-4 h-4" /> 模拟测试
-          </button>
-          <button
-            onClick={openCreate}
-            className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity"
-          >
-            <Plus className="w-4 h-4" /> 新建流程
-          </button>
+          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程模板，支持串行/并行审批模式</p>
         </div>
       </div>
 
-      {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        {[
-          { label: '流程总数', value: stats.total, icon: GitBranch, color: 'text-blue-400', bg: 'bg-blue-400/10' },
-          { label: '已启用', value: stats.enabled, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
-          { label: '多级审批', value: stats.multiAudit, icon: Users, color: 'text-purple-400', bg: 'bg-purple-400/10' },
-          { label: '单级审批', value: stats.singleAudit, icon: Shield, color: 'text-orange-400', bg: 'bg-orange-400/10' },
-        ].map((s, i) => (
-          <Card key={i} className="dg-card">
-            <CardContent className="p-4 flex items-center gap-3">
-              <div className={`w-10 h-10 rounded-lg ${s.bg} flex items-center justify-center`}>
-                <s.icon className={`w-5 h-5 ${s.color}`} />
-              </div>
-              <div>
-                <div className="text-2xl font-bold">{s.value}</div>
-                <div className="text-xs text-[var(--dg-text-muted)]">{s.label}</div>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+      {items.length === 0 ? (
+        <div className="dg-card p-12 text-center">
+          <GitBranch className="w-12 h-12 mx-auto mb-3 opacity-50 text-[var(--dg-text-muted)]" />
+          <p className="text-sm text-[var(--dg-text-muted)]">暂无审批流程，请联系管理员配置</p>
+        </div>
+      ) : (
+        <>
+          {/* Stats */}
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            {[
+              { label: '流程总数', value: items.length, icon: GitBranch, color: 'text-blue-400', bg: 'bg-blue-400/10' },
+              { label: '已启用', value: items.filter(w => w.is_active).length, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
+              { label: '默认流程', value: items.filter(w => w.is_default).length, icon: Star, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
+              { label: '总步骤数', value: items.reduce((acc, w) => acc + w.steps.length, 0), icon: Users, color: 'text-purple-400', bg: 'bg-purple-400/10' },
+            ].map((s, i) => (
+              <Card key={i} className="dg-card">
+                <CardContent className="p-4 flex items-center gap-3">
+                  <div className={`w-10 h-10 rounded-lg ${s.bg} flex items-center justify-center`}>
+                    <s.icon className={`w-5 h-5 ${s.color}`} />
+                  </div>
+                  <div>
+                    <div className="text-2xl font-bold">{s.value}</div>
+                    <div className="text-xs text-[var(--dg-text-muted)]">{s.label}</div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
 
-      {/* Workflow list */}
-      <div className="space-y-4">
-        {items.map((wf) => {
-          const isExpanded = expandedId === wf.id;
-          return (
-            <Card key={wf.id} className={`dg-card overflow-hidden ${!wf.enabled ? 'opacity-50' : ''}`}>
-              <CardContent className="p-5">
-                <div className="flex items-start justify-between">
-                  <div className="flex-1 min-w-0">
-                    {/* Title row */}
-                    <div className="flex items-center gap-3 mb-2 flex-wrap">
-                      <h3 className="text-lg font-semibold">{wf.name}</h3>
-                      <span className={`px-2 py-0.5 rounded text-xs font-medium ${wf.enabled ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
-                        {wf.enabled ? '已启用' : '已禁用'}
-                      </span>
-                      {wf.versions && wf.versions.length > 1 && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-500/10 text-blue-400 text-xs rounded">
-                          <History className="w-3 h-3" />
-                          v{wf.versions.length}
-                        </span>
-                      )}
-                      <span className="px-2 py-0.5 bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] text-xs rounded">
-                        {wf.steps.length} 个阶段
-                      </span>
-                    </div>
+          {/* Workflow list */}
+          <div className="space-y-4">
+            {items.map((wf) => {
+              const isExpanded = expandedId === wf.id;
+              return (
+                <Card key={wf.id} className={`dg-card overflow-hidden ${!wf.is_active ? 'opacity-50' : ''}`}>
+                  <CardContent className="p-5">
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-3 mb-2 flex-wrap">
+                          <h3 className="text-lg font-semibold">{wf.name}</h3>
+                          {wf.is_default && (
+                            <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">
+                              <Star className="w-3 h-3" /> 默认
+                            </span>
+                          )}
+                          <span className={`px-2 py-0.5 rounded text-xs font-medium ${wf.is_active ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
+                            {wf.is_active ? '已启用' : '已禁用'}
+                          </span>
+                          <span className="px-2 py-0.5 bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] text-xs rounded">
+                            {wf.steps.length} 个阶段
+                          </span>
+                        </div>
 
-                    <p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>
-
-                    <div className="flex items-center gap-2 mb-3 flex-wrap">
-                      <span className="text-xs text-[var(--dg-text-muted)]">适用数据库:</span>
-                      {wf.dbTypes.map((dt) => (
-                        <span key={dt} className={`inline-flex px-2 py-0.5 rounded text-[11px] font-medium ${dbTypeColorMap[dt] || ''}`}>
-                          {dt.toUpperCase()}
-                        </span>
-                      ))}
-                    </div>
-
-                    {/* Flow visualization */}
-                    <div className="flex items-center gap-1 mt-4 p-4 bg-[var(--dg-bg-tertiary)] rounded-lg overflow-x-auto">
-                      {wf.steps.map((step, i) => {
-                        const StepIcon = STEP_TYPE_ICONS[step.type];
-                        return (
-                          <div key={step.id} className="flex items-center gap-1 flex-shrink-0">
-                            <div className={`px-3 py-2 rounded-lg border ${STEP_TYPE_COLORS[step.type]} flex items-center gap-2`}>
-                              <StepIcon className="w-4 h-4" />
-                              <div>
-                                <div className="text-xs font-medium whitespace-nowrap">{step.name}</div>
-                                <div className="text-[10px] opacity-80 whitespace-nowrap">{step.assignees.join(' / ')}</div>
-                              </div>
-                            </div>
-                            {i < wf.steps.length - 1 && <ArrowRight className="w-4 h-4 text-[var(--dg-text-muted)] flex-shrink-0" />}
-                          </div>
-                        );
-                      })}
-                    </div>
-
-                    {/* Expanded details */}
-                    {isExpanded && (
-                      <div className="mt-4 space-y-3 pt-4 border-t border-[var(--dg-border)]">
-                        {/* Step details */}
-                        <h4 className="text-sm font-semibold flex items-center gap-1.5">
-                          <GitBranch className="w-4 h-4 text-[var(--dg-text-muted)]" />
-                          流程步骤详情
-                        </h4>
-                        {wf.steps.map((step) => {
-                          const StepIcon = STEP_TYPE_ICONS[step.type];
-                          return (
-                            <div key={step.id} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
-                              <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${STEP_TYPE_COLORS[step.type].split(' ')[0]}`}>
-                                <StepIcon className={`w-4 h-4 ${STEP_TYPE_COLORS[step.type].split(' ')[1]}`} />
-                              </div>
-                              <div className="flex-1">
-                                <div className="flex items-center gap-2 mb-1 flex-wrap">
-                                  <span className="text-sm font-medium">{step.name}</span>
-                                  <span className={`text-[11px] px-2 py-0.5 rounded ${STEP_TYPE_COLORS[step.type]}`}>
-                                    {STEP_TYPE_LABELS[step.type]}
-                                  </span>
-                                  {step.mode && (
-                                    <span className="text-[11px] px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]">
-                                      {step.mode === 'any' ? '或签（任一人）' : '会签（全部人）'}
-                                    </span>
-                                  )}
-                                </div>
-                                <p className="text-xs text-[var(--dg-text-secondary)]">{step.description}</p>
-                                <div className="flex items-center gap-1 mt-1 flex-wrap">
-                                  <span className="text-xs text-[var(--dg-text-muted)]">执行人:</span>
-                                  {step.assignees.map((a, j) => (
-                                    <span key={j} className="text-xs text-blue-400 bg-blue-500/10 px-1.5 py-0.5 rounded">
-                                      {a}
-                                    </span>
-                                  ))}
-                                </div>
-                                {/* Step conditions */}
-                                {step.conditions && step.conditions.length > 0 && (
-                                  <div className="mt-2 flex items-center gap-2 flex-wrap">
-                                    <span className="text-xs text-[var(--dg-text-muted)] flex items-center gap-1">
-                                      <AlertTriangle className="w-3 h-3" />
-                                      条件:
-                                    </span>
-                                    {step.conditions.map((c) => (
-                                      <span key={c.id} className="px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">
-                                        {CONDITION_FIELDS.find((f) => f.value === c.field)?.label || c.field} {c.operator} {c.value}
-                                      </span>
-                                    ))}
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          );
-                        })}
-
-                        {/* Global conditions */}
-                        {wf.conditions && (
-                          <div className="flex items-center gap-2 flex-wrap">
-                            <span className="text-xs text-[var(--dg-text-muted)]">触发条件:</span>
-                            {wf.conditions.map((c) => (
-                              <span key={c} className="px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">
-                                {c}
-                              </span>
-                            ))}
-                          </div>
+                        {wf.description && (
+                          <p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>
                         )}
 
-                        {/* Version history */}
-                        {wf.versions && wf.versions.length > 0 && (
-                          <div className="pt-2">
-                            <h4 className="text-sm font-semibold flex items-center gap-1.5 mb-2">
-                              <History className="w-4 h-4 text-[var(--dg-text-muted)]" />
-                              版本历史
-                            </h4>
-                            <div className="space-y-1.5">
-                              {wf.versions.map((v) => (
-                                <div key={v.version} className="flex items-center gap-3 text-sm px-2 py-1">
-                                  <span className="text-xs font-mono text-[var(--dg-text-muted)]">v{v.version}</span>
-                                  <span className="text-xs text-[var(--dg-text-secondary)]">{v.changes}</span>
-                                  <span className="text-xs text-[var(--dg-text-muted)] ml-auto">{v.createdAt} by {v.author}</span>
+                        {/* Flow visualization */}
+                        <div className="flex items-center gap-1 mt-4 p-4 bg-[var(--dg-bg-tertiary)] rounded-lg overflow-x-auto">
+                          {wf.steps.map((step, i) => {
+                            const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
+                            return (
+                              <div key={step.id} className="flex items-center gap-1 flex-shrink-0">
+                                <div className={`px-3 py-2 rounded-lg border ${STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial} flex items-center gap-2`}>
+                                  <StepIcon className="w-4 h-4" />
+                                  <div>
+                                    <div className="text-xs font-medium whitespace-nowrap">{step.name}</div>
+                                    {step.approver_role && (
+                                      <div className="text-[10px] opacity-80 whitespace-nowrap">{step.approver_role}</div>
+                                    )}
+                                  </div>
                                 </div>
-                              ))}
-                            </div>
+                                {i < wf.steps.length - 1 && <ArrowRight className="w-4 h-4 text-[var(--dg-text-muted)] flex-shrink-0" />}
+                              </div>
+                            );
+                          })}
+                        </div>
+
+                        {/* Expanded details */}
+                        {isExpanded && (
+                          <div className="mt-4 space-y-3 pt-4 border-t border-[var(--dg-border)]">
+                            <h4 className="text-sm font-semibold flex items-center gap-1.5">
+                              <GitBranch className="w-4 h-4 text-[var(--dg-text-muted)]" />
+                              流程步骤详情
+                            </h4>
+                            {wf.steps.map((step) => {
+                              const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
+                              const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
+                              return (
+                                <div key={step.id} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
+                                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
+                                    <StepIcon className={`w-4 h-4 ${colorClass.split(' ')[1]}`} />
+                                  </div>
+                                  <div className="flex-1">
+                                    <div className="flex items-center gap-2 mb-1 flex-wrap">
+                                      <span className="text-sm font-medium">{step.name}</span>
+                                      <span className={`text-[11px] px-2 py-0.5 rounded ${colorClass}`}>
+                                        {STEP_TYPE_LABELS[step.step_type] || step.step_type}
+                                      </span>
+                                      {step.timeout_hours !== 24 && (
+                                        <span className="text-[11px] px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]">
+                                          超时 {step.timeout_hours}h
+                                        </span>
+                                      )}
+                                      {step.auto_approve_on_timeout && (
+                                        <span className="text-[11px] px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-400">
+                                          超时自动通过
+                                        </span>
+                                      )}
+                                    </div>
+                                    {step.approver_role && (
+                                      <div className="flex items-center gap-1 mt-1 flex-wrap">
+                                        <span className="text-xs text-[var(--dg-text-muted)]">审批角色:</span>
+                                        <span className="text-xs text-blue-400 bg-blue-500/10 px-1.5 py-0.5 rounded">
+                                          {step.approver_role}
+                                        </span>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })}
                           </div>
                         )}
                       </div>
-                    )}
-                  </div>
 
-                  {/* Actions */}
-                  <div className="flex items-center gap-1 ml-4 shrink-0">
-                    <button onClick={() => runSimulation(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)] transition-colors" title="模拟测试">
-                      <TestTube className="w-4 h-4" />
-                    </button>
-                    <button onClick={() => setPreviewWorkflow(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)] transition-colors" title="预览">
-                      <Eye className="w-4 h-4" />
-                    </button>
-                    <button onClick={() => openEdit(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)] transition-colors" title="编辑">
-                      <Edit2 className="w-4 h-4" />
-                    </button>
-                    <button onClick={() => toggleWorkflow(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" title={wf.enabled ? '禁用' : '启用'}>
-                      {wf.enabled ? <ToggleRight className="w-5 h-5 text-green-400" /> : <ToggleLeft className="w-5 h-5 text-[var(--dg-text-muted)]" />}
-                    </button>
-                    <button onClick={() => setDeleteConfirmId(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-red-500/15 hover:text-red-400 transition-colors" title="删除">
-                      <Trash2 className="w-4 h-4" />
-                    </button>
-                    <button onClick={() => setExpandedId(isExpanded ? null : wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] transition-colors" title="展开">
-                      {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
-                    </button>
-                  </div>
-                </div>
-
-                {/* Delete confirmation inline */}
-                {deleteConfirmId === wf.id && (
-                  <div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg flex items-center gap-3">
-                    <AlertTriangle className="w-5 h-5 text-red-400 shrink-0" />
-                    <div className="flex-1 text-sm">
-                      <span className="font-medium text-red-300">确认删除流程 &quot;{wf.name}&quot;？</span>
-                      <span className="text-red-300/70 ml-1">此操作不可撤销。</span>
+                      {/* Actions */}
+                      <div className="flex items-center gap-1 ml-4 shrink-0">
+                        {!wf.is_default && (
+                          <button onClick={() => setDefault(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-yellow-500/10 hover:text-yellow-400 transition-colors" title="设为默认">
+                            <Star className="w-4 h-4" />
+                          </button>
+                        )}
+                        <button onClick={() => setPreviewWorkflow(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)] transition-colors" title="预览">
+                          <Eye className="w-4 h-4" />
+                        </button>
+                        <button onClick={() => handleClone(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-blue-500/10 hover:text-blue-400 transition-colors" title="克隆">
+                          <Copy className="w-4 h-4" />
+                        </button>
+                        <button onClick={() => toggleWorkflow(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" title={wf.is_active ? '禁用' : '启用'}>
+                          {wf.is_active ? <ToggleRight className="w-5 h-5 text-green-400" /> : <ToggleLeft className="w-5 h-5 text-[var(--dg-text-muted)]" />}
+                        </button>
+                        <button onClick={() => handleDelete(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-red-500/15 hover:text-red-400 transition-colors" title="删除">
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                        <button onClick={() => setExpandedId(isExpanded ? null : wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] transition-colors" title="展开">
+                          {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                        </button>
+                      </div>
                     </div>
-                    <button onClick={() => deleteWorkflow(wf.id)} className="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded-md text-sm transition-colors">
-                      确认删除
-                    </button>
-                    <button onClick={() => setDeleteConfirmId(null)} className="px-3 py-1.5 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">
-                      取消
-                    </button>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          );
-        })}
-
-        {items.length === 0 && (
-          <div className="dg-card p-8 text-center text-[var(--dg-text-muted)]">
-            <GitBranch className="w-12 h-12 mx-auto mb-3 opacity-50" />
-            <p className="text-sm">暂无审批流程，点击「新建流程」或从「模板库」选择创建</p>
+                  </CardContent>
+                </Card>
+              );
+            })}
           </div>
-        )}
-      </div>
+        </>
+      )}
 
       {/* Preview Modal */}
       {previewWorkflow && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setPreviewWorkflow(null)}>
-          <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-2xl w-full mx-4" onClick={(e) => e.stopPropagation()}>
+          <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
-              <h3 className="text-xl font-semibold">{previewWorkflow.name} - 流程预览</h3>
+              <div className="flex items-center gap-2">
+                <h3 className="text-xl font-semibold">{previewWorkflow.name}</h3>
+                {previewWorkflow.is_default && (
+                  <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">
+                    <Star className="w-3 h-3" /> 默认
+                  </span>
+                )}
+              </div>
               <button onClick={() => setPreviewWorkflow(null)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)] transition-colors">
                 <X className="w-5 h-5" />
               </button>
             </div>
+            {previewWorkflow.description && (
+              <p className="text-sm text-[var(--dg-text-secondary)] mb-4">{previewWorkflow.description}</p>
+            )}
             <div className="space-y-4">
               {previewWorkflow.steps.map((step, i) => {
-                const StepIcon = STEP_TYPE_ICONS[step.type];
+                const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
+                const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
                 return (
                   <div key={step.id} className="flex items-start gap-4">
-                    <div className={`w-10 h-10 rounded-full flex items-center justify-center ${STEP_TYPE_COLORS[step.type].split(' ')[0]}`}>
-                      <StepIcon className={`w-5 h-5 ${STEP_TYPE_COLORS[step.type].split(' ')[1]}`} />
+                    <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
+                      <StepIcon className={`w-5 h-5 ${colorClass.split(' ')[1]}`} />
                     </div>
                     <div className="flex-1">
                       <div className="flex items-center gap-2 mb-1">
                         <span className="font-medium">{step.name}</span>
-                        <span className={`text-[11px] px-2 py-0.5 rounded ${STEP_TYPE_COLORS[step.type]}`}>{STEP_TYPE_LABELS[step.type]}</span>
-                      </div>
-                      <p className="text-sm text-[var(--dg-text-secondary)]">{step.description || '该阶段暂无详细描述'}</p>
-                      <div className="flex items-center gap-2 mt-1 flex-wrap">
-                        <span className="text-xs text-[var(--dg-text-muted)]">负责人:</span>
-                        {step.assignees.map((a, j) => (
-                          <span key={j} className="text-xs text-blue-400">
-                            {a}{j < step.assignees.length - 1 ? ' / ' : ''}
-                          </span>
-                        ))}
-                        {step.mode && (
-                          <span className="text-[11px] px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] ml-2">
-                            {step.mode === 'any' ? '或签' : '会签'}
-                          </span>
-                        )}
+                        <span className={`text-[11px] px-2 py-0.5 rounded ${colorClass}`}>
+                          {STEP_TYPE_LABELS[step.step_type] || step.step_type}
+                        </span>
                       </div>
+                      {step.approver_role && (
+                        <div className="flex items-center gap-2 mt-1">
+                          <span className="text-xs text-[var(--dg-text-muted)]">审批角色:</span>
+                          <span className="text-xs text-blue-400">{step.approver_role}</span>
+                        </div>
+                      )}
                     </div>
                     {i < previewWorkflow.steps.length - 1 && <ArrowRight className="w-5 h-5 text-[var(--dg-text-muted)] mt-2" />}
                   </div>
@@ -909,319 +360,6 @@ export default function WorkflowPage() {
           </div>
         </div>
       )}
-
-      {/* Create/Edit Modal */}
-      {showCreateModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setShowCreateModal(false)}>
-          <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-4xl w-full mx-4 max-h-[92vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
-            <div className="flex items-center justify-between mb-6">
-              <h3 className="text-xl font-semibold">{editingWorkflow ? '编辑流程' : '新建流程'}</h3>
-              <button onClick={() => setShowCreateModal(false)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)] transition-colors">
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            <div className="space-y-5">
-              {/* Basic info */}
-              <div className="space-y-4">
-                <h4 className="text-sm font-semibold text-[var(--dg-text-secondary)] uppercase tracking-wider">基本信息</h4>
-                <div>
-                  <label className="text-xs text-[var(--dg-text-muted)] mb-1.5 block">流程名称 <span className="text-red-400">*</span></label>
-                  <input
-                    type="text"
-                    value={formName}
-                    onChange={(e) => setFormName(e.target.value)}
-                    className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors"
-                    placeholder="例如：钱包平台 SQL 变更流程"
-                  />
-                </div>
-                <div>
-                  <label className="text-xs text-[var(--dg-text-muted)] mb-1.5 block">流程描述</label>
-                  <textarea
-                    value={formDesc}
-                    onChange={(e) => setFormDesc(e.target.value)}
-                    className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 resize-none transition-colors"
-                    rows={2}
-                    placeholder="描述该流程的用途和适用范围"
-                  />
-                </div>
-                <div>
-                  <label className="text-xs text-[var(--dg-text-muted)] mb-2 block">适用数据库</label>
-                  <div className="flex flex-wrap gap-2">
-                    {DB_TYPES.map((dt) => (
-                      <button
-                        key={dt}
-                        onClick={() => toggleDbType(dt)}
-                        className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
-                          formDbTypes.includes(dt)
-                            ? 'bg-blue-500/15 text-blue-400 border-blue-500/30'
-                            : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] border-[var(--dg-border)] hover:border-[var(--dg-text-secondary)]'
-                        }`}
-                      >
-                        {dt.toUpperCase()}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-                <div>
-                  <label className="text-xs text-[var(--dg-text-muted)] mb-1.5 block">触发条件（用逗号分隔）</label>
-                  <input
-                    type="text"
-                    value={formConditions}
-                    onChange={(e) => setFormConditions(e.target.value)}
-                    className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors"
-                    placeholder="例如：影响行数>1000, 执行时间>1s"
-                  />
-                </div>
-              </div>
-
-              {/* Tabs */}
-              <div className="flex gap-1 p-1 bg-[var(--dg-bg-tertiary)] rounded-lg">
-                {[
-                  { key: 'steps' as const, label: '流程步骤', icon: GitBranch },
-                  { key: 'conditions' as const, label: '条件配置', icon: AlertTriangle },
-                  { key: 'versions' as const, label: '版本历史', icon: History },
-                ].map((tab) => (
-                  <button
-                    key={tab.key}
-                    onClick={() => setActiveTab(tab.key)}
-                    className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
-                      activeTab === tab.key
-                        ? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] shadow-sm'
-                        : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]'
-                    }`}
-                  >
-                    <tab.icon className="w-3.5 h-3.5" />
-                    {tab.label}
-                  </button>
-                ))}
-              </div>
-
-              {/* Steps tab */}
-              {activeTab === 'steps' && (
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <h4 className="text-sm font-semibold text-[var(--dg-text-secondary)] uppercase tracking-wider">流程步骤</h4>
-                    <button
-                      onClick={addStep}
-                      className="flex items-center gap-1 px-3 py-1.5 bg-blue-500/15 text-blue-400 rounded-lg text-xs hover:bg-blue-500/25 transition-colors"
-                    >
-                      <Plus className="w-3.5 h-3.5" /> 添加步骤
-                    </button>
-                  </div>
-
-                  {formSteps.map((step, index) => (
-                    <Card key={step.id} className="dg-card border-l-2 border-l-blue-500">
-                      <CardContent className="p-4">
-                        <div className="flex items-start gap-3">
-                          <div className="flex flex-col gap-1 pt-1">
-                            <button onClick={() => moveStep(index, 'up')} disabled={index === 0} className="w-6 h-6 rounded flex items-center justify-center hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-colors">
-                              <ChevronUp className="w-3.5 h-3.5" />
-                            </button>
-                            <button onClick={() => moveStep(index, 'down')} disabled={index === formSteps.length - 1} className="w-6 h-6 rounded flex items-center justify-center hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-colors">
-                              <ChevronDown className="w-3.5 h-3.5" />
-                            </button>
-                          </div>
-                          <div className="flex-1 space-y-3">
-                            <div className="grid grid-cols-2 gap-3">
-                              <div>
-                                <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">步骤名称</label>
-                                <input
-                                  type="text"
-                                  value={step.name}
-                                  onChange={(e) => updateStep(step.id, { name: e.target.value })}
-                                  className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors"
-                                />
-                              </div>
-                              <div>
-                                <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">步骤类型</label>
-                                <select
-                                  value={step.type}
-                                  onChange={(e) => updateStep(step.id, { type: e.target.value as StepType })}
-                                  className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors"
-                                >
-                                  <option value="submit">提交阶段</option>
-                                  <option value="audit">审核阶段</option>
-                                  <option value="execute">执行阶段</option>
-                                </select>
-                              </div>
-                            </div>
-                            <div className="grid grid-cols-2 gap-3">
-                              <div>
-                                <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">负责人</label>
-                                <select
-                                  value={step.assignees[0] || ''}
-                                  onChange={(e) => updateStep(step.id, { assignees: e.target.value ? [e.target.value] : [] })}
-                                  className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors"
-                                >
-                                  <option value="">选择审批人</option>
-                                  {ASSIGNEE_GROUPS.map((g) => (
-                                    <option key={g} value={g}>{g}</option>
-                                  ))}
-                                </select>
-                              </div>
-                              {step.type === 'audit' && (
-                                <div>
-                                  <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">审批模式</label>
-                                  <select
-                                    value={step.mode || 'any'}
-                                    onChange={(e) => updateStep(step.id, { mode: e.target.value as 'any' | 'all' })}
-                                    className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors"
-                                  >
-                                    <option value="any">或签（任一人通过）</option>
-                                    <option value="all">会签（全部人通过）</option>
-                                  </select>
-                                </div>
-                              )}
-                            </div>
-                            <div>
-                              <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">步骤描述</label>
-                              <input
-                                type="text"
-                                value={step.description || ''}
-                                onChange={(e) => updateStep(step.id, { description: e.target.value })}
-                                className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors"
-                                placeholder="描述该步骤的具体操作..."
-                              />
-                            </div>
-                          </div>
-                          {formSteps.length > 1 && (
-                            <button
-                              onClick={() => removeStep(step.id)}
-                              className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--dg-text-muted)] hover:bg-red-500/15 hover:text-red-400 transition-colors"
-                            >
-                              <Trash2 className="w-4 h-4" />
-                            </button>
-                          )}
-                        </div>
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
-              )}
-
-              {/* Conditions tab */}
-              {activeTab === 'conditions' && (
-                <div className="space-y-4">
-                  <p className="text-xs text-[var(--dg-text-muted)]">
-                    为审批步骤添加条件配置。当条件满足时，工单将进入该审批步骤。适用于根据影响行数、表大小等动态调整审批路径的场景。
-                  </p>
-                  {formSteps
-                    .filter((s) => s.type === 'audit')
-                    .map((step) => (
-                      <div key={step.id} className="p-4 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
-                        <div className="flex items-center justify-between mb-3">
-                          <h5 className="text-sm font-medium flex items-center gap-1.5">
-                            <Shield className="w-3.5 h-3.5 text-purple-400" />
-                            {step.name}
-                          </h5>
-                          <button
-                            onClick={() => addCondition(step.id)}
-                            className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 bg-blue-500/10 rounded hover:bg-blue-500/20 transition-colors"
-                          >
-                            <Plus className="w-3 h-3" /> 添加条件
-                          </button>
-                        </div>
-                        {step.conditions && step.conditions.length > 0 ? (
-                          <div className="space-y-2">
-                            {step.conditions.map((cond) => (
-                              <div key={cond.id} className="flex items-center gap-2">
-                                <select
-                                  value={cond.field}
-                                  onChange={(e) => updateCondition(step.id, cond.id, { field: e.target.value })}
-                                  className="px-2 py-1.5 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded text-xs focus:outline-none focus:border-blue-500"
-                                >
-                                  {CONDITION_FIELDS.map((f) => (
-                                    <option key={f.value} value={f.value}>{f.label}</option>
-                                  ))}
-                                </select>
-                                <select
-                                  value={cond.operator}
-                                  onChange={(e) => updateCondition(step.id, cond.id, { operator: e.target.value as StepCondition['operator'] })}
-                                  className="px-2 py-1.5 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded text-xs focus:outline-none focus:border-blue-500"
-                                >
-                                  {CONDITION_OPERATORS.map((op) => (
-                                    <option key={op.value} value={op.value}>{op.label}</option>
-                                  ))}
-                                </select>
-                                <input
-                                  type="text"
-                                  value={cond.value}
-                                  onChange={(e) => updateCondition(step.id, cond.id, { value: e.target.value })}
-                                  className="flex-1 px-2 py-1.5 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded text-xs focus:outline-none focus:border-blue-500"
-                                  placeholder="阈值"
-                                />
-                                <button
-                                  onClick={() => removeCondition(step.id, cond.id)}
-                                  className="w-6 h-6 rounded flex items-center justify-center text-[var(--dg-text-muted)] hover:bg-red-500/15 hover:text-red-400 transition-colors"
-                                >
-                                  <X className="w-3 h-3" />
-                                </button>
-                              </div>
-                            ))}
-                          </div>
-                        ) : (
-                          <p className="text-xs text-[var(--dg-text-muted)]">暂无条件，点击「添加条件」配置</p>
-                        )}
-                      </div>
-                    ))}
-                  {formSteps.filter((s) => s.type === 'audit').length === 0 && (
-                    <div className="text-center py-6 text-sm text-[var(--dg-text-muted)]">
-                      <AlertTriangle className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                      <p>当前流程中没有审核阶段，无需配置条件</p>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Versions tab */}
-              {activeTab === 'versions' && (
-                <div className="space-y-3">
-                  {editingWorkflow?.versions ? (
-                    editingWorkflow.versions.map((v) => (
-                      <div key={v.version} className="flex items-center gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
-                        <span className="text-sm font-mono font-medium text-blue-400">v{v.version}</span>
-                        <div className="flex-1">
-                          <p className="text-sm">{v.changes}</p>
-                          <p className="text-xs text-[var(--dg-text-muted)] mt-0.5">{v.createdAt} by {v.author}</p>
-                        </div>
-                        {v.version === 1 && (
-                          <span className="text-[11px] px-2 py-0.5 bg-green-500/10 text-green-400 rounded">初始版本</span>
-                        )}
-                      </div>
-                    ))
-                  ) : (
-                    <div className="text-center py-6 text-sm text-[var(--dg-text-muted)]">
-                      <History className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                      <p>新建流程将在保存后创建首个版本</p>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-
-            {/* Footer */}
-            <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-[var(--dg-border)]">
-              <button onClick={() => setShowCreateModal(false)} className="px-5 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
-                取消
-              </button>
-              <button
-                onClick={saveWorkflow}
-                disabled={!formName.trim() || formDbTypes.length === 0}
-                className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                <Save className="w-4 h-4" /> {editingWorkflow ? '保存修改' : '创建流程'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Templates Modal */}
-      {renderTemplatesModal()}
-
-      {/* Simulation Modal */}
-      {renderSimulationModal()}
     </div>
   );
 }