+
+ {/* 公共路由 - 两种角色都可访问 */}
+
+
+ My New Page
;
+};
+
+export default MyPage;
+```
+
+### 添加 API 接口
+
+在 `src/api/` 目录下封装 API 调用：
+
+```typescript
+// src/api/myApi.ts
+import axios from 'axios';
+
+export const getMyData = async () => {
+ const response = await axios.get('/api/v1/my-endpoint');
+ return response.data;
+};
+```
+
+## 常用命令
+
+| 命令 | 说明 |
+|------|------|
+| `npm run dev` | 启动开发服务器（热更新） |
+| `npm run build` | 构建生产版本 |
+| `npm run preview` | 预览构建结果 |
+| `npm run type-check` | TypeScript 类型检查 |
+
+## Docker 开发
+
+使用 Docker Compose 启动（推荐）：
+
+```bash
+# 在项目根目录执行
+docker-compose up -d frontend
+
+# 查看日志
+docker-compose logs -f frontend
+```
+
+前端服务将在 http://localhost:3000 启动。
+
+## 常见问题
+
+### Q: npm install 很慢或失败
+
+配置国内镜像源：
+
+```bash
+npm config set registry https://registry.npmmirror.com/
+```
+
+### Q: 修改代码后页面没有更新
+
+1. 确保开发服务器正在运行
+2. 检查浏览器控制台是否有错误
+3. 尝试清除浏览器缓存或强制刷新（Ctrl+Shift+R）
+
+### Q: API 请求失败
+
+1. 确保后端服务正在运行（http://localhost:8000）
+2. 检查 Vite 代理配置是否正确
+3. 检查浏览器网络面板查看具体错误
+
+### Q: Docker 环境下文件修改不触发热更新
+
+Docker 中使用轮询方式监听文件变化，已在 `vite.config.ts` 中配置：
+
+```typescript
+watch: {
+ usePolling: true,
+}
+```
+
+## 相关文档
+
+- [后端 README](../backend/README.md)
+- [部署启动文档](../../部署启动文档.md)
+- [API 文档](http://localhost:8000/docs)
diff --git a/src/frontend/index.html b/src/frontend/index.html
new file mode 100644
index 0000000..ecb3a2e
--- /dev/null
+++ b/src/frontend/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+ );
+ }
+
+ // 2. 如果未认证，只显示登录页
+ if (!isAuthenticated) {
+ return (
+ <>
+
+
+ 正在恢复会话...
+
+ setIsSidebarOpen(false)}
+ onLogout={handleLogout}
+ onNavigate={handleNavigate}
+ />
+
+ setIsSidebarOpen(!isSidebarOpen)} />
+
+
+ );
+};
+
+export default App;
diff --git a/src/frontend/src/api/admin.ts b/src/frontend/src/api/admin.ts
new file mode 100644
index 0000000..9ce5a58
--- /dev/null
+++ b/src/frontend/src/api/admin.ts
@@ -0,0 +1,235 @@
+/**
+ * @file admin.ts
+ * @module API/Admin
+ * @description 系统管理员专用 API 服务模块。
+ * 本模块深度集成于“基于大模型多智能体框架的数据库自动部署与库表生成系统”的管理后台，
+ * 负责处理高权限等级的操作指令，包括但不限于全局状态监控、用户生命周期管理、
+ * 资源配额动态调整以及底层 AI 代理模型的参数化配置。
+ * @author Wang Lirong (王利蓉)
+ * @version 2.1.0
+ * @date 2026-01-02
+ */
+
+import client from './client.ts';
+import {
+ AdminStats,
+ AdminUserDetailResponse,
+ PageData,
+ ViolationLogListItem,
+ AdminUserListItem,
+ AdminListItem,
+ AIModelConfigResponse,
+ AIModelConfigListResponse,
+ AIModelConfigDetailResponse,
+ AIModelConfigCreate,
+ AIModelConfigUpdate,
+ AIModelTestConnectionRequest,
+ AIModelTestConnectionResponse
+} from '../types.ts';
+
+/**
+ * 更新用户状态时的请求参数接口定义
+ * @interface UpdateUserStatusParams
+ * @property {string} status - 目标状态，可选值：正常(normal)、封禁(banned)、挂起(suspended)
+ * @property {string} reason - 变更状态的操作原因说明，用于审计日志记录
+ */
+interface UpdateUserStatusParams {
+ status: 'normal' | 'banned' | 'suspended';
+ reason: string;
+}
+
+/**
+ * 调整用户资源额度时的请求参数接口定义
+ * @interface UpdateUserQuotaParams
+ * [cite_start]@property {number} max_databases - 允许该用户创建的最大数据库项目上限 [cite: 518]
+ */
+interface UpdateUserQuotaParams {
+ max_databases: number;
+}
+
+/**
+ * 管理员 API 核心调用对象
+ * [cite_start]封装了所有涉及系统治理与运维的 RESTful 交互逻辑 [cite: 170-173, 218-219]
+ */
+export const adminApi = {
+ /**
+ * 1.1 获取系统统计看板数据
+ * 从后端 APM 监控模块调取实时数据，包含系统健康度、活跃用户及高危拦截统计。
+ * [cite_start]对应业务目标 BO-4 的系统监控需求 [cite: 55-60, 253]。
+ * @method getDashboardStats
+ * @returns {Promise
+
+ {/* 对话框主体容器：具备自适应宽度及进入动画 (animate-in) */}
+
+ );
+};
\ No newline at end of file
diff --git a/src/frontend/src/components/Header.tsx b/src/frontend/src/components/Header.tsx
new file mode 100644
index 0000000..7175bf8
--- /dev/null
+++ b/src/frontend/src/components/Header.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Menu } from 'lucide-react';
+
+/**
+ * 顶部导航栏属性接口
+ */
+interface HeaderProps {
+ /** 切换侧边栏显示状态 */
+ onToggleSidebar: () => void;
+}
+
+/**
+ * 全局顶部导航栏组件
+ * * 包含用户头像、名称展示以及下拉菜单（个人设置、退出登录）。
+ * 实现了点击外部区域自动关闭下拉菜单的逻辑。
+ *
+ * @param {HeaderProps} props - 组件属性
+ * @returns {JSX.Element} 顶部栏元素
+ */
+export const Header: React.FC
+
+ {/* 对话框头部 (Header Section) */}
+
+
+ {/* 标题区域：包含可选的警告图标与截断保护文本 */}
+
+ {/* 条件渲染：显示警示图标以提示操作风险 */}
+ {showWarningIcon &&
+
+ {/* 交互控件：右上角关闭图标，提供圆角悬停反馈 */}
+
+
+
+ {/* 内容主体区域 (Content Section) */}
+
+ {/* 条件渲染：显示警示图标以提示操作风险 */}
+ {showWarningIcon &&
+
+ {/* 交互控件：右上角关闭图标，提供圆角悬停反馈 */}
+
+
+ {/* 渲染业务描述文本，使用宽松的行高 (leading-relaxed) 以提升阅读舒适度 */}
+
+
+ {/* 底部操作栏 (Footer Section) */}
+ {message}
+
+ {/* 取消动作：默认变体按钮 */}
+
+
+ {/* 确认动作：根据 isDangerous 参数动态切换按钮视觉语义 (Danger vs Primary) */}
+
+
+
+
+
+
+
+ `;
+ }
+ setIsLoading(false);
+ } finally {
+ // 资源回收：销毁临时的离屏容器
+ if (offscreenContainer.parentNode) {
+ offscreenContainer.parentNode.removeChild(offscreenContainer);
+ }
+ }
+ };
+
+ renderER();
+ }, [chart]); // 当图表定义变更时，触发完整的重绘管线
+
+ /**
+ * 执行物理矩阵变换
+ * 将逻辑层级的 scale 和 position 映射为 CSS 渲染层的 2D 变换。
+ * @param {SVGElement} svg - 目标图形节点
+ * @param {number} newScale - 计算后的目标缩放比
+ * @param {Object} newPosition - 目标位移向量
+ */
+ const updateTransform = useCallback((svg: SVGElement, newScale: number, newPosition: { x: number, y: number }) => {
+ // 采用 translate + scale 的复合变换
+ svg.style.transform = `translate(${newPosition.x}px, ${newPosition.y}px) scale(${newScale})`;
+ // 设置变换锚点为中心，符合用户直觉
+ svg.style.transformOrigin = 'center center';
+ }, []);
+
+ /**
+ * 滚轮事件监听效应
+ * 实现基于鼠标滚轮的动态无损缩放。
+ */
+ useEffect(() => {
+ const container = svgContainerRef.current;
+ if (!container) return;
+
+ /**
+ * 滚轮交互核心逻辑
+ * @param {WheelEvent} e - 原生浏览器滚轮事件
+ */
+ const handleWheel = (e: WheelEvent) => {
+ // 准入条件：必须同时存在 SVG 实例及父容器
+ if (!svgRef.current || !svgContainerRef.current) return;
+
+ // 步骤 1：坐标空间判定
+ const containerRect = svgContainerRef.current.getBoundingClientRect();
+ const mouseX = e.clientX;
+ const mouseY = e.clientY;
+
+ // 判定鼠标是否在 ER 渲染有效负载区内
+ const isMouseInContainer = (
+ mouseX >= containerRect.left &&
+ mouseX <= containerRect.right &&
+ mouseY >= containerRect.top &&
+ mouseY <= containerRect.bottom
+ );
+
+ // 逻辑分流：若鼠标不在容器内，释放控制权，允许父级页面正常滚动
+ if (!isMouseInContainer) {
+ return;
+ }
+
+ /**
+ * 步骤 2：事件拦截
+ * 使用 non-passive 模式调用 preventDefault，防止缩放过程中页面整体产生偏移。
+ */
+ e.preventDefault();
+ e.stopPropagation();
+
+ /**
+ * 步骤 3：缩放因子计算
+ * 采用 0.9/1.1 的几何级数系数，确保缩放过程在视觉上具备线性感受。
+ */
+ const delta = e.deltaY > 0 ? 0.9 : 1.1;
+ // 从 ref 中读取最新几何参数，避免闭包失效
+ const currentScale = scaleRef.current;
+ const currentPosition = positionRef.current;
+
+ // 步骤 4：范围约束检查 (Clamping)
+ // 限制最小 0.2 倍（概览模式），最大 3 倍（微观模式）
+ const newScale = Math.max(0.2, Math.min(3, currentScale * delta));
+
+ // 步骤 5：触发状态同步与视图变换
+ setScale(newScale);
+ updateTransform(svgRef.current, newScale, currentPosition);
+ };
+
+ /**
+ * 关键优化点：
+ * 手动绑定并声明 passive: false，以绕过 Chrome 的高性能滚动默认拦截。
+ */
+ container.addEventListener('wheel', handleWheel, { passive: false });
+
+ return () => {
+ container.removeEventListener('wheel', handleWheel);
+ };
+ }, [updateTransform]);
+
+ /**
+ * 开始拖动交互流程
+ * @param {React.MouseEvent} e - React 封装的鼠标事件
+ */
+ const handleMouseDown = (e: React.MouseEvent) => {
+ if (!svgRef.current || !svgContainerRef.current) return;
+
+ // 步骤 1：热区点击判定
+ const containerRect = svgContainerRef.current.getBoundingClientRect();
+ const mouseX = e.clientX;
+ const mouseY = e.clientY;
+
+ const isMouseInContainer = (
+ mouseX >= containerRect.left &&
+ mouseX <= containerRect.right &&
+ mouseY >= containerRect.top &&
+ mouseY <= containerRect.bottom
+ );
+
+ if (!isMouseInContainer) {
+ return;
+ }
+
+ // 步骤 2：阻止父级组件感知此交互（如侧边栏收起等）
+ e.stopPropagation();
+
+ // 步骤 3：开启位移捕捉模式
+ setIsDragging(true);
+ // 记录初始位移偏移量，公式：dragStart = mousePos - currentPos
+ setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+ // 切换视觉指针样式
+ svgRef.current.style.cursor = 'grabbing';
+ };
+
+ /**
+ * 位移跟踪逻辑
+ * @param {React.MouseEvent} e
+ */
+ const handleMouseMove = (e: React.MouseEvent) => {
+ // 若未处于拖拽状态或 SVG 未加载，立即短路返回
+ if (!isDragging || !svgRef.current) return;
+
+ // 阻止浏览器默认文本选择干扰
+ e.stopPropagation();
+
+ // 步骤 1：计算目标位移向量
+ const newPosition = {
+ x: e.clientX - dragStart.x,
+ y: e.clientY - dragStart.y
+ };
+
+ // 步骤 2：实时刷新状态与视图
+ setPosition(newPosition);
+ updateTransform(svgRef.current, scale, newPosition);
+ };
+
+ /**
+ * 终止拖动交互流
+ * @param {React.MouseEvent} [e] - 可选的事件对象
+ */
+ const handleMouseUp = (e?: React.MouseEvent) => {
+ if (!svgRef.current) return;
+
+ if (e) {
+ e.stopPropagation();
+ }
+
+ // 重置交互标志位
+ setIsDragging(false);
+ // 恢复抓取状态指针
+ svgRef.current.style.cursor = 'grab';
+ };
+
+ /**
+ * 全局视图复位器
+ * 一键回归原始 1.0 比例及 (0,0) 原点坐标。
+ */
+ const resetView = () => {
+ if (!svgRef.current) return;
+
+ const newScale = 1;
+ const newPosition = { x: 0, y: 0 };
+
+ setScale(newScale);
+ setPosition(newPosition);
+ updateTransform(svgRef.current, newScale, newPosition);
+ };
+
+ /**
+ * 渲染 JSX 结构
+ * 对应项目前端架构中的可视化面板。
+ */
+ return (
+ 渲染失败
+${error}
+
+
+ {/* 浮动控制工具栏 (HUD):
+ 包含放大、缩小及复位功能，常驻于图表右上角。
+ */}
+ = ({
+ current,
+ total,
+ pageSize,
+ onChange,
+ showTotal = true,
+ showQuickJumper = false,
+ simple = false,
+ className = '',
+ disabled = false,
+}) => {
+ /** * 步骤 1：基础分页元数据计算
+ * 基于向上取整算法计算总页数，确保即使只有一条数据也能显示第一页。
+ */
+ const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+ /** 计算当前页面起始条目的绝对序号 */
+ const startItem = total === 0 ? 0 : (current - 1) * pageSize + 1;
+
+ /** 计算当前页面结束条目的绝对序号（取 pageSize 与 total 的最小值，防止溢出） */
+ const endItem = Math.min(current * pageSize, total);
+
+ /**
+ * 步骤 2：核心算法 - 生成页码按钮序列
+ * @description
+ * 实现“滑动窗口”分页算法。当总页数过多时，自动在中间插入省略号（ellipsis），
+ * 保持组件在 UI 上的固定宽度，提升视觉稳定性。
+ * @returns {(number | 'ellipsis')[]} 包含页码数字和省略号占位符的混合数组
+ */
+ const getPageNumbers = (): (number | 'ellipsis')[] => {
+ const pages: (number | 'ellipsis')[] = [];
+ const maxVisible = 5; // 窗口内最多展示的连续数字按钮数
+
+ // 分支 A：总页数较少时，直接平铺展示所有页码
+ if (totalPages <= maxVisible + 2) {
+ for (let i = 1; i <= totalPages; i++) {
+ pages.push(i);
+ }
+ } else {
+ // 分支 B：总页数较多，执行复杂的省略号计算逻辑
+ pages.push(1); // 始终保留首页
+
+ if (current <= 3) {
+ // 子分支 B1：当前页靠近序列开头
+ for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
+ pages.push(i);
+ }
+ // 在尾部之前插入省略号
+ if (totalPages > 5) pages.push('ellipsis');
+ } else if (current >= totalPages - 2) {
+ // 子分支 B2：当前页靠近序列结尾
+ // 在首部之后插入省略号
+ if (totalPages > 5) pages.push('ellipsis');
+ for (let i = Math.max(totalPages - 3, 2); i < totalPages; i++) {
+ pages.push(i);
+ }
+ } else {
+ // 子分支 B3：当前页处于中间区域
+ // 双向插入省略号，仅保留当前页及其前后相邻页
+ pages.push('ellipsis');
+ for (let i = current - 1; i <= current + 1; i++) {
+ pages.push(i);
+ }
+ pages.push('ellipsis');
+ }
+
+ pages.push(totalPages); // 始终保留末页
+ }
+
+ return pages;
+ };
+
+ /**
+ * 步骤 3：页码变更事件处理器
+ * 包含前置守卫：拦截非法页码、禁用状态以及冗余的重复跳转。
+ * @param {number} page - 目标页码
+ */
+ const handlePageChange = (page: number) => {
+ if (disabled || page < 1 || page > totalPages || page === current) return;
+ onChange(page);
+ };
+
+ /**
+ * 渲染分支 A：简洁模式 (Simple Mode)
+ * 适用于侧边栏、移动端或空间受限的局部容器。
+ */
+ if (simple) {
+ return (
+ = ({
+ isOpen,
+ onToggle,
+ position,
+ title
+}) => {
+ /**
+ * 图标路由算法
+ * @description 基于“方位”与“状态”的二元判定，从 Lucide 图标库中检索最优视觉符号。
+ * * 逻辑分支：
+ * 1. 左侧面板展开：显示 PanelLeftClose（折叠暗示）；
+ * 2. 左侧面板折叠：显示 PanelLeftOpen（展开暗示）；
+ * 3. 右侧面板同理镜像处理。
+ * @returns {JSX.Element} 对应的 SVG 矢量图标节点
+ */
+ const getIcon = () => {
+ // 处理左侧锚点逻辑
+ if (position === 'left') {
+ return isOpen ? = ({ projectId, onComplete, onClose, viewOnly = false, renderFooter }) => {
+ // --- 核心业务状态 ---
+ const [project, setProject] = useState(null);
+ const [error, setError] = useState(null);
+
+ // --- 编辑态缓冲区 (Draft Buffer) ---
+ /** 存储用户在 Schema 编辑区输入的文本，支持在确认前进行多轮微调 */
+ const [editedSchema, setEditedSchema] = useState('');
+ /** 存储 AI 生成的 DDL 语句快照，作为最终部署前的审查底稿 */
+ const [editedDDL, setEditedDDL] = useState('');
+ /** 存储向导执行过程中的额外增量需求 */
+ const [requirements] = useState('');
+ /** 控制完成阶段视图下的 Tab 切换（概览/Schema/DDL） */
+ const [activeTab, setActiveTab] = useState('概览');
+
+ // --- 异步渲染状态监控 ---
+ /** 标识 ER 图是否正处于 AI 重新生成的处理队列中 */
+ const [isRegeneratingER, setIsRegeneratingER] = useState(false);
+ /** 缓存本地已渲染的 ER 图代码，用于执行 DOM 局部刷新 */
+ const [localERCode, setLocalERCode] = useState('');
+ /** 记录上一次成功的 ER 图快照，用于检测后端推送的数据是否产生实质变化 */
+ const previousERCodeRef = useRef('');
+
+ // --- 策略控制状态 ---
+ /** 控制 HTTP 轮询器的激活状态，在需要用户交互或操作已完成时进入休眠 */
+ const [shouldPoll, setShouldPoll] = useState(true);
+
+ // --- 视觉表现层状态 (UX Progress Engine) ---
+ /** * @description 核心 UX 设计：
+ * 实际的 AI 生成任务在后端执行，前端无法获取精确的百分比。
+ * visualProgress 采用渐进式函数模拟“工作正在进行”的视觉反馈。
+ */
+ const [visualProgress, setVisualProgress] = useState(0);
+
+ /** 持久化引用快照：用于在 Effect 销毁时将当前进度离线保存 */
+ const progressSnapshotRef = useRef<{ stage: CreationStageEnum | null; progress: number }>({
+ stage: null,
+ progress: 0,
+ });
+ /** 恢复引用快照：记录从 localStorage 加载回来的历史进度 */
+ const restoredSnapshotRef = useRef<{ stage: CreationStageEnum | null; progress: number } | null>(null);
+
+ /** * @description 状态防护锁：
+ * 存储最近一次感知到的阶段索引，防止轮询请求由于延迟导致的“状态倒流”。
+ */
+ const latestStageRef = useRef(-1);
+
+ /**
+ * 业务轮询调度 Effect
+ * 负责监控后端阶段转换，驱动向导界面的自动步进。
+ */
+ useEffect(() => {
+ let intervalId: NodeJS.Timeout | null = null;
+
+ const fetchProject = async () => {
+ try {
+ const data = await getProjectDetail(projectId);
+
+ /**
+ * 逻辑守卫：检测状态回退。
+ * 如果当前获取的阶段在 STAGE_ORDER 中低于最新已确认阶段，则判定为过期请求并丢弃。
+ */
+ const currentStageIndex = getStageIndex(data.creation_stage);
+ if (currentStageIndex < latestStageRef.current) {
+ return;
+ }
+
+ // 更新最新阶段索引记录
+ latestStageRef.current = currentStageIndex;
+ setProject(data);
+
+ /**
+ * 步骤：状态缓冲区初始化。
+ * 在数据到达且本地缓冲区为空时，将后端数据填充至编辑器。
+ */
+ if (!editedSchema && data.schema_definition) {
+ setEditedSchema(extractSchemaText(data.schema_definition));
+ }
+ if (!editedDDL && data.ddl_statement) {
+ setEditedDDL(formatDisplayContent(data.ddl_statement));
+ }
+
+ /**
+ * 步骤：轮询状态机控制。
+ * 判定当前阶段是否需要暂停轮询。
+ * 情况 1：需要用户手动点击确认（SCHEMA_GENERATED/DDL_GENERATED）；
+ * 情况 2：项目已完全激活（ACTIVE）。
+ */
+ const stage = data.creation_stage;
+ if (!isRegeneratingER && (
+ (stage === CreationStageEnum.SCHEMA_GENERATED && !!data.er_diagram_code) ||
+ stage === CreationStageEnum.DDL_GENERATED ||
+ stage === CreationStageEnum.COMPLETED ||
+ data.project_status === ProjectStatusEnum.ACTIVE)) {
+ setShouldPoll(false);
+ }
+ } catch (err) {
+ console.error("Failed to fetch project:", err);
+ setError("无法加载项目详情。");
+ }
+ };
+
+ fetchProject();
+
+ // 执行异步轮询逻辑
+ if (!viewOnly && shouldPoll) {
+ // 策略分支：常规任务 3s 一次，高频图形重绘 5s 一次以减轻服务器压力
+ const pollInterval = isRegeneratingER ? 5000 : 3000;
+ intervalId = setInterval(fetchProject, pollInterval);
+ }
+
+ // 清理逻辑：防止内存泄漏
+ return () => {
+ if (intervalId) clearInterval(intervalId);
+ };
+ }, [projectId, viewOnly, shouldPoll, isRegeneratingER]);
+
+ /** 状态快照实时同步 Effect */
+ useEffect(() => {
+ progressSnapshotRef.current = {
+ stage: (project?.creation_stage ?? null) as CreationStageEnum | null,
+ progress: visualProgress,
+ };
+ }, [project?.creation_stage, visualProgress]);
+
+ /** * 离线进度恢复 Effect
+ * 实现“刷新不丢失进度”的 UX 承诺。
+ */
+ useEffect(() => {
+ if (viewOnly) return;
+
+ const storageKey = `projectWizard.visualProgress.${projectId}`;
+ try {
+ const raw = localStorage.getItem(storageKey);
+ if (raw) {
+ const parsed = JSON.parse(raw) as { stage?: string; progress?: number };
+ const stage = (parsed.stage ?? null) as CreationStageEnum | null;
+ const progress = Number(parsed.progress);
+
+ // 校验历史数据的有效性
+ if (Number.isFinite(progress) && progress > 0) {
+ const clamped = Math.max(0, Math.min(100, progress));
+ restoredSnapshotRef.current = { stage, progress: clamped };
+ setVisualProgress(clamped);
+ }
+ }
+ } catch {
+ // 静默处理存储异常
+ }
+
+ // 销毁前执行序列化存储
+ return () => {
+ try {
+ const snapshot = progressSnapshotRef.current;
+ if (!snapshot.stage) return;
+ localStorage.setItem(storageKey, JSON.stringify({ stage: snapshot.stage, progress: snapshot.progress }));
+ } catch {
+ // ignore
+ }
+ };
+ }, [projectId, viewOnly]);
+
+ /**
+ * 视觉进度模拟算法引擎 (Visual Progress Engine)
+ * @description
+ * 该算法基于 Asymptotic Growth (渐近增长) 逻辑：
+ * 进度越接近目标阈值，单次增长步长越小。
+ * 公式定义为：$$ \Delta P = \max(0.1, (P_{target} - P_{current}) \times 0.05) $$
+ */
+ useEffect(() => {
+ if (!project || viewOnly) return;
+
+ const stage = project.creation_stage || CreationStageEnum.INITIALIZING;
+ let target = 0;
+
+ // 分支判定：根据当前物理阶段设置视觉目标阈值
+ switch (stage) {
+ case CreationStageEnum.INITIALIZING:
+ case CreationStageEnum.GENERATING_SCHEMA:
+ target = 90; // 在后端生成期间，最高停留在 90%
+ break;
+ case CreationStageEnum.SCHEMA_GENERATED:
+ target = 100; // 后端反馈生成完毕，视觉立即拉满
+ break;
+ case CreationStageEnum.GENERATING_DDL:
+ target = 90;
+ break;
+ case CreationStageEnum.DDL_GENERATED:
+ target = 100;
+ break;
+ case CreationStageEnum.EXECUTING_DDL:
+ target = 95; // 物理执行阶段，由于涉及网络 IO 波动，最大设定为 95%
+ break;
+ case CreationStageEnum.COMPLETED:
+ target = 100;
+ break;
+ default:
+ target = 0;
+ }
+
+ // 断点续传优化：若当前阶段与缓存一致，则从缓存点继续动画
+ const restored = restoredSnapshotRef.current;
+ if (restored && restored.stage === stage && visualProgress < restored.progress) {
+ setVisualProgress(restored.progress);
+ return;
+ }
+
+ // 完成类阶段的即时响应逻辑
+ const isCompletedStage = stage === CreationStageEnum.SCHEMA_GENERATED ||
+ stage === CreationStageEnum.DDL_GENERATED ||
+ stage === CreationStageEnum.COMPLETED;
+
+ if (visualProgress === 0 && isCompletedStage && !restored) {
+ setVisualProgress(100);
+ return;
+ }
+
+ if (visualProgress >= target) return;
+
+ /** 核心定时器：驱动进度条平滑增长 */
+ const timer = setInterval(() => {
+ setVisualProgress(prev => {
+ if (prev >= target) return prev;
+ const remaining = target - prev;
+ const increment = Math.max(0.1, remaining * 0.05);
+ return Math.min(target, prev + increment);
+ });
+ }, 100);
+
+ return () => clearInterval(timer);
+ }, [project?.creation_stage, viewOnly]);
+
+ /** 进度重置策略 Effect */
+ useEffect(() => {
+ const currentStage = project?.creation_stage || CreationStageEnum.INITIALIZING;
+
+ // 当跨入新的“生成类”阶段时，重置物理进度条
+ if (currentStage === CreationStageEnum.GENERATING_SCHEMA ||
+ currentStage === CreationStageEnum.GENERATING_DDL ||
+ currentStage === CreationStageEnum.EXECUTING_DDL) {
+ const restored = restoredSnapshotRef.current;
+ if (restored && restored.stage === currentStage && restored.progress > 0) return;
+ setVisualProgress(0);
+ }
+
+ // 流程完结，清理存储占用的资源
+ if (currentStage === CreationStageEnum.COMPLETED) {
+ restoredSnapshotRef.current = null;
+ if (!viewOnly) {
+ try {
+ localStorage.removeItem(`projectWizard.visualProgress.${projectId}`);
+ } catch {
+ // ignore
+ }
+ }
+ }
+ }, [project?.creation_stage]);
+
+ /**
+ * 业务动作：确认并提交 Schema
+ * 触发从逻辑架构到 DDL 物理翻译的跃迁。
+ */
+ const handleConfirmSchema = useCallback(async () => {
+ if (!project) return;
+ try {
+ restoredSnapshotRef.current = null;
+ setShouldPoll(true);
+
+ /**
+ * 乐观更新 (Optimistic UI Update):
+ * 在网络请求完成前，先行将 UI 切换至下一阶段的生成状态。
+ */
+ const nextStage = CreationStageEnum.GENERATING_DDL;
+ latestStageRef.current = getStageIndex(nextStage);
+
+ setProject(prev => prev ? { ...prev, creation_stage: nextStage } : null);
+ setVisualProgress(0);
+
+ // 发起异步业务请求
+ await generateDDL(project.project_id, editedSchema, requirements);
+ } catch (err) {
+ console.error("Failed to confirm schema:", err);
+ setError("确认 Schema 失败。");
+ }
+ }, [project, editedSchema, requirements]);
+
+ /**
+ * 业务动作：确认 DDL 并发起部署
+ * 对应 SF1 自动化部署的核心触发点。
+ */
+ const handleConfirmDDL = useCallback(async () => {
+ if (!project) return;
+ try {
+ restoredSnapshotRef.current = null;
+
+ // 关键步骤：在部署这一敏感事务期间暂停背景轮询，防止乐观状态被服务器旧缓存覆盖
+ setShouldPoll(false);
+
+ const nextStage = CreationStageEnum.EXECUTING_DDL;
+ latestStageRef.current = getStageIndex(nextStage);
+
+ setProject(prev => prev ? { ...prev, creation_stage: nextStage } : null);
+ setVisualProgress(0);
+
+ // 执行物理部署
+ const updatedProject = await deployProject(project.project_id, editedDDL);
+
+ if (updatedProject) {
+ const newStageIndex = getStageIndex(updatedProject.creation_stage);
+ if (newStageIndex >= latestStageRef.current) {
+ latestStageRef.current = newStageIndex;
+ setProject(updatedProject);
+ }
+ }
+
+ setShouldPoll(true);
+ } catch (err) {
+ console.error("Failed to deploy project:", err);
+ setError("部署项目失败。");
+ setShouldPoll(true);
+ }
+ }, [project, editedDDL]);
+
+ /**
+ * 业务动作：重新生成 ER 图可视化
+ * 对应 SF5 可视化更新逻辑。
+ */
+ const handleRegenerateER = useCallback(async () => {
+ if (!project || !editedSchema.trim()) return;
+
+ // 保存前一个状态的副本
+ previousERCodeRef.current = localERCode;
+
+ setIsRegeneratingER(true);
+ setError(null);
+ setShouldPoll(true);
+
+ try {
+ await regenerateER(project.project_id, editedSchema);
+ } catch (err) {
+ console.error("Failed to regenerate ER:", err);
+ setError("重新生成 ER 图失败。");
+ setIsRegeneratingER(false);
+ }
+ }, [project, editedSchema, localERCode]);
+
+ /**
+ * ER 图数据感知 Effect
+ * 监听后端推送的可视化 DSL 变化，并自动解除生成状态锁。
+ */
+ useEffect(() => {
+ const newERCode = project?.er_diagram_code;
+ if (!newERCode || newERCode === localERCode) return;
+
+ // 若新代码已抵达且与旧代码不符，则判定重绘任务完成
+ if (isRegeneratingER && newERCode !== previousERCodeRef.current) {
+ setIsRegeneratingER(false);
+ setShouldPoll(false);
+ }
+
+ setLocalERCode(newERCode);
+ previousERCodeRef.current = newERCode;
+ }, [project?.er_diagram_code]);
+
+ /**
+ * 底部操作栏渲染 Effect
+ * @description 采用了“向下投影”模式：
+ * 本组件将当前上下文的操作按钮实时回传给父级容器（通常是全局 Modal）。
+ */
+ useEffect(() => {
+ if (!renderFooter || !project) {
+ renderFooter?.(null);
+ return;
+ }
+
+ const stage = viewOnly ? CreationStageEnum.COMPLETED : (project.creation_stage || CreationStageEnum.INITIALIZING);
+
+ switch (stage) {
+ case CreationStageEnum.SCHEMA_GENERATED:
+ // 场景 A：Schema 已生成，提供修改与确认两个维度的动作
+ renderFooter(
+ (null);
+ const [admins, setAdmins] = useState([]);
+ const [violations, setViolations] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+
+ // 分页状态
+ const [violationPage, setViolationPage] = useState(1);
+ const [violationTotal, setViolationTotal] = useState(0);
+ const violationPageSize = 10;
+
+ // --- 数据获取 ---
+ useEffect(() => {
+ const fetchAllData = async () => {
+ setIsLoading(true);
+ try {
+ // 并发请求 Dashboard Stats 和 Admin List
+ const [statsRes, adminsRes] = await Promise.all([
+ adminApi.getDashboardStats(),
+ adminApi.getAdmins(1, 100), // 获取更多在线管理员
+ ]);
+
+ setStats(statsRes);
+ setAdmins(adminsRes.items);
+ } catch (error) {
+ console.error("Failed to load admin status data", error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchAllData();
+ }, []);
+
+ // 独立获取违规日志以支持分页
+ useEffect(() => {
+ const fetchViolations = async () => {
+ try {
+ const res = await adminApi.getViolations(violationPage, violationPageSize);
+ setViolations(res.items);
+ setViolationTotal(res.total);
+ } catch (error) {
+ console.error("Failed to load violations", error);
+ }
+ };
+ fetchViolations();
+ }, [violationPage]);
+
+ return (
+ ([]);
+ const [selected, setSelected] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+
+ // 分页状态
+ const [currentPage, setCurrentPage] = useState(1);
+ const totalAnnouncements = announcements.length;
+ const paginatedAnnouncements = announcements.slice(
+ (currentPage - 1) * PAGE_SIZE,
+ currentPage * PAGE_SIZE
+ );
+
+ // --- 数据获取 ---
+ const fetchPublishedAnnouncements = async () => {
+ setIsLoading(true);
+ try {
+ // 用户端仅展示 published 状态的公告
+ const res = await announcementApi.getList(1, 50, 'published');
+ // 按时间倒序排列
+ const sorted = res.items.sort((a, b) =>
+ new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+ );
+ setAnnouncements(sorted);
+ } catch (error) {
+ console.error("Failed to fetch announcements", error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchPublishedAnnouncements();
+ }, []);
+
+ return (
+ = ({ onProjectSelect }) => {
+ const [projects, setProjects] = useState([]);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ // 部署状态管理
+ const [isDeploying, setIsDeploying] = useState(false);
+ const [isCreating, setIsCreating] = useState(false);
+ const [currentProjectId, setCurrentProjectId] = useState(null);
+ const [wizardFooter, setWizardFooter] = useState(null);
+
+ // 创建表单状态
+ const [newProjectName, setNewProjectName] = useState('');
+ const [newProjectType, setNewProjectType] = useState<'MySQL' | 'PostgreSQL' | 'SQLite'>('MySQL');
+ const [newProjectDesc, setNewProjectDesc] = useState('');
+
+ // --- 项目管理状态 (编辑/删除) ---
+ const [projectToDelete, setProjectToDelete] = useState(null);
+ const [deleteConfirmation, setDeleteConfirmation] = useState('');
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+ const [projectToEdit, setProjectToEdit] = useState(null);
+ const [editName, setEditName] = useState('');
+ const [editDesc, setEditDesc] = useState('');
+ const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+ // 1. 初始化加载
+ const loadProjects = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const data = await fetchProjects();
+ setProjects(data.items);
+ } catch (error) {
+ console.error("Failed to load projects:", error);
+ setError("项目列表加载失败，请稍后重试。");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadProjects();
+ }, []);
+
+ // 创建项目 (POST)
+ const handleCreateProject = async () => {
+ if (!newProjectName.trim()) {
+ message.error('请输入项目名称');
+ return;
+ }
+ if (!newProjectDesc.trim()) {
+ message.error('请输入业务场景描述');
+ return;
+ }
+ if (isCreating) return;
+
+ setIsCreating(true);
+ setIsDeploying(true);
+
+ try {
+ const res = await createProject({
+ name: newProjectName,
+ type: newProjectType,
+ description: newProjectDesc
+ });
+ setCurrentProjectId(res.project_id);
+ } catch (e) {
+ console.error("Failed to create project:", e);
+ setIsDeploying(false);
+ setIsCreating(false);
+ setCurrentProjectId(null);
+ message.error("创建失败，请检查网络或重试");
+ }
+ };
+
+ const handleCloseModal = () => {
+ setIsModalOpen(false);
+ setTimeout(() => {
+ setNewProjectName('');
+ setNewProjectDesc('');
+ setIsDeploying(false);
+ setIsCreating(false);
+ setCurrentProjectId(null);
+ setWizardFooter(null);
+ }, 300);
+ loadProjects();
+ };
+
+ const handleWizardComplete = async () => {
+ if (currentProjectId) {
+ try {
+ // 获取最新项目详情以确保状态正确
+ const project = await getProjectDetail(currentProjectId);
+
+ // 关闭模态框并重置状态
+ setIsModalOpen(false);
+ setTimeout(() => {
+ setNewProjectName('');
+ setNewProjectDesc('');
+ setIsDeploying(false);
+ setIsCreating(false);
+ setCurrentProjectId(null);
+ setWizardFooter(null);
+ }, 300);
+
+ // 刷新列表
+ loadProjects();
+
+ // 跳转到工作台
+ if (onProjectSelect) {
+ onProjectSelect(project);
+ }
+ } catch (e) {
+ console.error("Failed to navigate to workspace:", e);
+ handleCloseModal();
+ }
+ } else {
+ handleCloseModal();
+ }
+ };
+
+ // --- 项目管理操作 ---
+ const handleCardClick = (projectId: number) => {
+ const project = projects.find(p => p.project_id === projectId);
+ if (project) {
+ if (project.project_status === ProjectStatusEnum.ACTIVE) {
+ onProjectSelect?.(project);
+ } else {
+ // Resume deployment
+ setCurrentProjectId(project.project_id);
+ setIsDeploying(true);
+ setIsModalOpen(true);
+ }
+ }
+ };
+
+ const handleDeleteClick = (projectId: number) => {
+ const project = projects.find(p => p.project_id === projectId);
+ if (project) {
+ setProjectToDelete(project);
+ setDeleteConfirmation('');
+ setIsDeleteModalOpen(true);
+ }
+ };
+
+ const handleConfirmDelete = async () => {
+ if (!projectToDelete) return;
+ if (!deleteConfirmation.trim()) {
+ message.error('请输入DELETE以确认删除');
+ return;
+ }
+ try {
+ const { confirmation_token } = await confirmDeleteProject(projectToDelete.project_id, deleteConfirmation);
+ await deleteProject(projectToDelete.project_id, confirmation_token);
+ setIsDeleteModalOpen(false);
+ setProjectToDelete(null);
+ loadProjects();
+ } catch (err) {
+ console.error("Delete failed", err);
+ message.error("删除失败，请确认输入的验证信息正确");
+ }
+ };
+
+ const handleEditClick = (projectId: number) => {
+ const project = projects.find(p => p.project_id === projectId);
+ if (project) {
+ setProjectToEdit(project);
+ setEditName(project.project_name);
+ setEditDesc(project.description);
+ setIsEditModalOpen(true);
+ }
+ };
+
+ const handleSaveEdit = async () => {
+ if (!projectToEdit) return;
+ if (!editName.trim()) {
+ message.error('请输入项目名称');
+ return;
+ }
+ if (!editDesc.trim()) {
+ message.error('请输入项目描述');
+ return;
+ }
+ try {
+ await updateProject(projectToEdit.project_id, {
+ project_name: editName,
+ description: editDesc
+ });
+ setIsEditModalOpen(false);
+ setProjectToEdit(null);
+ loadProjects();
+ } catch (err) {
+ console.error("Update failed", err);
+ message.error("更新项目信息失败");
+ }
+ };
+
+ const showProgressView = isDeploying && !!currentProjectId;
+
+ return (
+ // 优化响应式间距和布局
+ = ({ sessionId, projectId, className }) => {
+ const [tables, setTables] = useState([]);
+ const [selectedTable, setSelectedTable] = useState(null);
+ const [columns, setColumns] = useState([]);
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [expanded, setExpanded] = useState<{ [key: string]: boolean }>({
+ database: true,
+ tables: true
+ });
+ const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+ const [isManuallyCollapsed, setIsManuallyCollapsed] = useState(false);
+ const [isManuallyExpanded, setIsManuallyExpanded] = useState(false);
+
+ const rootRef = useRef(null);
+ const [explorerWidth, setExplorerWidth] = useState(256);
+ const explorerWidthRef = useRef(256);
+ const pendingExplorerWidthRef = useRef(256);
+ const resizeStartXRef = useRef(0);
+ const resizeStartWidthRef = useRef(256);
+ const resizeRafIdRef = useRef(null);
+ const [isResizingExplorer, setIsResizingExplorer] = useState(false);
+ const resizeObserverRef = useRef(null);
+
+ useEffect(() => {
+ try {
+ const raw = localStorage.getItem('databaseViewer.explorerWidth');
+ const parsed = raw ? Number(raw) : NaN;
+ if (Number.isFinite(parsed)) {
+ const clamped = Math.max(200, Math.min(520, parsed));
+ setExplorerWidth(clamped);
+ }
+ } catch {
+ // ignore
+ }
+ }, []);
+
+ useEffect(() => {
+ explorerWidthRef.current = explorerWidth;
+ pendingExplorerWidthRef.current = explorerWidth;
+ rootRef.current?.style.setProperty('--dbv-explorer-width', `${explorerWidth}px`);
+ try {
+ localStorage.setItem('databaseViewer.explorerWidth', String(explorerWidth));
+ } catch {
+ // ignore
+ }
+ }, [explorerWidth]);
+
+ // ResizeObserver 监听 DataViewer 宽度变化，自动折叠侧边栏
+ useEffect(() => {
+ const rootElement = rootRef.current;
+ if (!rootElement) return;
+
+ // 创建 ResizeObserver 监听容器宽度变化
+ resizeObserverRef.current = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const { width } = entry.contentRect;
+
+ // 当 DataViewer 宽度 < 400px 时自动折叠侧边栏，但不覆盖手动展开操作
+ if (width < 400 && !isSidebarCollapsed && !isManuallyExpanded) {
+ setIsSidebarCollapsed(true);
+ // 自动折叠时不设置手动折叠标记
+ }
+ // 当宽度 >= 500px 时，只有在非手动折叠的情况下才自动展开
+ else if (width >= 500 && isSidebarCollapsed && !isManuallyCollapsed) {
+ setIsSidebarCollapsed(false);
+ setIsManuallyExpanded(false); // 清除手动展开标记
+ }
+ }
+ });
+
+ resizeObserverRef.current.observe(rootElement);
+
+ return () => {
+ if (resizeObserverRef.current) {
+ resizeObserverRef.current.disconnect();
+ resizeObserverRef.current = null;
+ }
+ };
+ }, [isSidebarCollapsed, isManuallyCollapsed, isManuallyExpanded]); // 添加 isManuallyExpanded 依赖
+
+ useEffect(() => {
+ if (!isResizingExplorer) return;
+
+ const prevUserSelect = document.body.style.userSelect;
+ const prevCursor = document.body.style.cursor;
+ document.body.style.userSelect = 'none';
+ document.body.style.cursor = 'col-resize';
+
+ const applyWidth = (width: number) => {
+ rootRef.current?.style.setProperty('--dbv-explorer-width', `${width}px`);
+ };
+
+ const handleMouseMove = (e: MouseEvent) => {
+ const dx = e.clientX - resizeStartXRef.current;
+ const nextWidth = resizeStartWidthRef.current + dx;
+ const clamped = Math.max(200, Math.min(520, nextWidth));
+ pendingExplorerWidthRef.current = clamped;
+
+ if (resizeRafIdRef.current != null) return;
+ resizeRafIdRef.current = window.requestAnimationFrame(() => {
+ resizeRafIdRef.current = null;
+ applyWidth(pendingExplorerWidthRef.current);
+ });
+ };
+
+ const handleMouseUp = () => {
+ if (resizeRafIdRef.current != null) {
+ window.cancelAnimationFrame(resizeRafIdRef.current);
+ resizeRafIdRef.current = null;
+ }
+
+ document.body.style.userSelect = prevUserSelect;
+ document.body.style.cursor = prevCursor;
+ setExplorerWidth(pendingExplorerWidthRef.current);
+ setIsResizingExplorer(false);
+ };
+
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+ return () => {
+ if (resizeRafIdRef.current != null) {
+ window.cancelAnimationFrame(resizeRafIdRef.current);
+ resizeRafIdRef.current = null;
+ }
+ document.body.style.userSelect = prevUserSelect;
+ document.body.style.cursor = prevCursor;
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mouseup', handleMouseUp);
+ };
+ }, [isResizingExplorer]);
+
+ useEffect(() => {
+ loadTables();
+ }, [sessionId, projectId]);
+
+ const loadTables = async () => {
+ try {
+ setLoading(true);
+ let result: TableInfo[];
+ if (projectId) {
+ result = await fetchDatabaseStructureByProject(projectId);
+ } else if (sessionId) {
+ result = await fetchDatabaseStructure(sessionId);
+ } else {
+ result = [];
+ }
+ setTables(result);
+ } catch (error) {
+ console.error('Failed to load tables:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleTableSelect = async (tableName: string) => {
+ try {
+ setLoading(true);
+ setSelectedTable(tableName);
+ // Clear previous data to avoid showing stale data if fetch fails or returns empty
+ setColumns([]);
+ setData([]);
+
+ let schemaData: ColumnInfo[];
+ let tableData: any[];
+
+ if (projectId) {
+ [schemaData, tableData] = await Promise.all([
+ fetchTableSchemaByProject(projectId, tableName),
+ fetchTableDataByProject(projectId, tableName)
+ ]);
+ } else if (sessionId) {
+ [schemaData, tableData] = await Promise.all([
+ fetchTableSchema(sessionId, tableName),
+ fetchTableData(sessionId, tableName)
+ ]);
+ } else {
+ schemaData = [];
+ tableData = [];
+ }
+
+ setColumns(schemaData);
+ setData(tableData);
+ } catch (error) {
+ console.error('Failed to load table data:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const toggleExpand = (key: string) => {
+ setExpanded(prev => ({ ...prev, [key]: !prev[key] }));
+ };
+
+ const handleRefresh = () => {
+ if (selectedTable) {
+ handleTableSelect(selectedTable);
+ } else {
+ loadTables();
+ }
+ };
+
+ return (
+
+ {/* 缩小触发器 */}
+
+ {/* 复位首页触发器 */}
+
+ {/* 放大触发器 */}
+
+
+
+ {/* HUD - 状态信息栏:
+ 实时显示当前的物理缩放百分比。
+ */}
+
+ {Math.round(scale * 100)}%
+
+
+ {/* 核心画布容器 (Main Canvas):
+ 采用高阴影、圆角化设计，符合现代分析仪表盘视觉规范。
+ */}
+
+ {/* 加载蒙层逻辑:
+ 在异步渲染期间提供平滑的等待反馈。
+ */}
+
+ );
+};
+
+export default InteractiveERRenderer;
\ No newline at end of file
diff --git a/src/frontend/src/components/Pagination.tsx b/src/frontend/src/components/Pagination.tsx
new file mode 100644
index 0000000..5a0fead
--- /dev/null
+++ b/src/frontend/src/components/Pagination.tsx
@@ -0,0 +1,306 @@
+/**
+ * @file Pagination.tsx
+ * @module Components/Navigation/Pagination
+ * @description 通用数据分页组件。
+ * 本组件作为系统“数据密集型”界面的核心导航工具，负责驱动长列表的按需加载逻辑。
+ * * 核心设计目标：
+ * 1. 性能优化 (Performance-1): 通过分页机制减轻单次 API 请求的数据载荷，降低首屏渲染耗时；
+ * 2. 响应式布局: 支持“简洁模式”与“完整模式”自动切换，适配从移动端到桌面端的不同屏幕宽度；
+ * 3. 交互友好 (Usability-1): 提供页码跳转、首末页快速锚定及省略号（Ellipsis）智能计算；
+ * 4. 状态受控: 严格遵循 React 受控组件模式，通过 onChange 回调同步外部状态。
+ * * 对应需求点：
+ * - SF2: 项目列表的分页展示；
+ * - SF9: 历史查询记录的翻页溯源。
+ * * @author Wang Lirong (王利蓉)
+ * @version 2.1.0
+ * @date 2026-01-02
+ */
+
+import React from 'react';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+
+/**
+ * 分页组件属性接口定义
+ * @interface PaginationProps
+ */
+interface PaginationProps {
+ /** 当前活跃页码（基于 1 的索引） */
+ current: number;
+ /** 系统中符合过滤条件的条目总数 */
+ total: number;
+ /** 每页预设的显示数据行数 */
+ pageSize: number;
+ /** 页码发生变更时的回调函数，参数为目标页码 */
+ onChange: (page: number) => void;
+ /** 是否在组件左侧展示“显示第 X 到 Y 条”的汇总信息 */
+ showTotal?: boolean;
+ /** 是否展示快速跳转至特定页码的输入框 */
+ showQuickJumper?: boolean;
+ /** 是否启用极简模式（仅保留“当前/总计”及翻页箭头） */
+ simple?: boolean;
+ /** 允许外部注入的自定义 CSS 类名 */
+ className?: string;
+ /** 禁用状态标识：为 true 时禁止所有点击交互 */
+ disabled?: boolean;
+}
+
+/**
+ * 响应式通用分页组件实体
+ * @component Pagination
+ */
+export const Pagination: React.FC
+
+
+ {/* SVG 挂载宿主容器:
+ 渲染完成后，通过透明度渐变实现平滑入场。
+ 绑定原生鼠标交互监听器，接管 Canvas 级别的所有操作。
+ */}
+
+ {/* CSS 纯代码驱动的加载动画旋转体 */}
+
+ 正在渲染交互式 ER 图...
+
+ handleMouseUp(e)}
+ onMouseLeave={() => handleMouseUp()}
+ style={{
+ position: 'absolute',
+ inset: 0,
+ touchAction: 'none', // 禁用系统默认触摸手势，由组件接管控制
+ opacity: isLoading ? 0 : 1,
+ visibility: isLoading ? 'hidden' : 'visible',
+ transition: 'opacity 0.2s ease-in-out'
+ }}
+ />
+
+ {/* 局部样式定义:
+ 定义全局公用的 Loading Keyframe 帧动画。
+ */}
+
+
+
+ {/* 数据摘要展示 */}
+ {showTotal && (
+
+ {total > 0 ? `${startItem}-${endItem} / ${total}` : '暂无数据'}
+
+ )}
+
+ {/* 简洁导航控件组 */}
+
+ );
+ }
+
+ /**
+ * 渲染分支 B：完整模式 (Standard Mode)
+ * 包含完整的数字页码选择器、首末页快速锚定及总数详细描述。
+ */
+ return (
+
+ {/* 上一页触发器 */}
+
+
+ {/* 当前进度的文本描述（例：2 / 10） */}
+
+ {current} / {totalPages}
+
+
+ {/* 下一页触发器 */}
+
+
+
+
+ {/* 步骤 4.1：总数详细统计信息 (Total Summary) */}
+ {showTotal && (
+
+ );
+};
+
+export default Pagination;
\ No newline at end of file
diff --git a/src/frontend/src/components/PanelToggleButton.tsx b/src/frontend/src/components/PanelToggleButton.tsx
new file mode 100644
index 0000000..3fd1e65
--- /dev/null
+++ b/src/frontend/src/components/PanelToggleButton.tsx
@@ -0,0 +1,120 @@
+/**
+ * @file PanelToggleButton.tsx
+ * @module Components/Layout/Panel-Toggle
+ * @description 布局面板切换控制器组件。
+ * 本组件是系统“工作台（Workspace）”响应式布局的核心交互组件，负责管理左右功能面板的可视化切换。
+ * * 核心设计原则：
+ * 1. 易用性适配 (Usability-1): 针对非技术用户，提供明确的视觉反馈与交互手势指引；
+ * 2. 无障碍合规 (A11y): 严格执行 WCAG 2.1 AA 标准，确保在极端缩放环境下仍具备 44x44px 的最小可点击区域；
+ * 3. 语义化提示: 动态生成中文标题（Tooltip），辅助用户识别面板的具体业务职能。
+ * * 对应需求点：
+ * - Requirement 6.1: 侧边栏折叠与展开动效；
+ * - Requirement 6.2: 布局空间动态分配逻辑；
+ * - Requirement 6.4/6.5: 视口宽度监听下的自动收缩策略。
+ * * @author Wang Lirong (王利蓉)
+ * @version 1.3.0
+ * @date 2026-01-02
+ */
+
+import React from 'react';
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react';
+
+/**
+ * 面板切换按钮组件属性接口
+ * @interface PanelToggleButtonProps
+ * @description 封装了面板控制器的状态锁及展示配置。
+ */
+interface PanelToggleButtonProps {
+ /** 标识当前受控面板是否处于“物理展开”状态 */
+ isOpen: boolean;
+ /** 触发面板状态反转的业务回调函数，通常由上层状态机驱动 */
+ onToggle: () => void;
+ /** * 指定按钮在视口中的逻辑方位：
+ * - 'left': 对应数据库架构面板；
+ * - 'right': 对应会话记录与 AI 交互面板。
+ */
+ position: 'left' | 'right';
+ /** 可选的自定义提示文本，若缺省则由组件根据语义自动生成 */
+ title?: string;
+}
+
+/**
+ * @component PanelToggleButton
+ * @description
+ * 采用 React 函数式组件构建。该组件通过封装位操作逻辑，实现了在单一按钮上展示四种状态图标的能力。
+ * 样式层基于 Tailwind CSS，确保了在 500% 缩放比例下依然保持像素级的对齐精度。
+ */
+export const PanelToggleButton: React.FC
+ {total > 0 ? (
+ <>
+ 显示 {startItem} 到{' '}
+ {endItem} 条，共{' '}
+ {total} 条
+
+ ) : (
+ '暂无数据'
+ )}
+
+ )}
+
+ {/* 步骤 4.2：分页控制按钮群 (Pagination Control Group) */}
+
+
+ {/* 首页快捷键：在移动端自动隐藏以节省空间 */}
+
+
+ {/* 上一页按钮 */}
+
+
+ {/* 核心：动态页码渲染区域 */}
+
+
+ {/* 步骤 4.3：快速跳转模块 (Quick Jumper)
+ 允许用户通过键盘输入直接定位至目标页面，提升在海量数据下的导航效率。
+ */}
+ {showQuickJumper && totalPages > 5 && (
+
+ {getPageNumbers().map((page, index) =>
+ // 渲染省略号占位符
+ page === 'ellipsis' ? (
+
+ ···
+
+ ) : (
+ // 渲染具体的页码数字按钮
+
+ )
+ )}
+
+
+ {/* 下一页按钮 */}
+
+
+ {/* 末页快捷键 */}
+
+
+ 跳至
+ {
+ // 监听回车键，执行跳转逻辑
+ if (e.key === 'Enter') {
+ const value = parseInt((e.target as HTMLInputElement).value);
+ if (!isNaN(value)) {
+ // 执行带边界约束的页码跳转
+ handlePageChange(Math.min(Math.max(1, value), totalPages));
+ // 执行完成后清空输入框，优化交互流
+ (e.target as HTMLInputElement).value = '';
+ }
+ }
+ }}
+ aria-label="跳转到指定页"
+ />
+ 页
+
+ )}
+
+ :
+ );
+ break;
+ case CreationStageEnum.DDL_GENERATED:
+ // 场景 B：DDL 已准备就绪，仅提供最终部署确认
+ renderFooter(
+ <>
+
+
+
+ );
+ break;
+ case CreationStageEnum.COMPLETED:
+ // 场景 C：流程完结，提供应用入口
+ if (!viewOnly) {
+ renderFooter(
+
+ );
+ } else {
+ renderFooter(null);
+ }
+ break;
+ default:
+ renderFooter(null);
+ break;
+ }
+ }, [project?.creation_stage, viewOnly, isRegeneratingER, handleRegenerateER, handleConfirmSchema, handleConfirmDDL]);
+
+ // --- 加载守卫 ---
+ if (!project) return
+
+
+
+
+
+ );
+
+ /** 审计态：左右分布展示编辑器与可视化图形 */
+ case CreationStageEnum.SCHEMA_GENERATED:
+ return (
+ 正在生成 Schema...
+AI 正在分析您的需求并设计数据库 Schema。
+
+
+
+ setIsDeleteConfirmOpen(false)}
+ onConfirm={confirmDelete}
+ title="删除公告"
+ message="确定要删除这条公告吗？删除后无法恢复。"
+ confirmText="删除"
+ cancelText="取消"
+ isDangerous={true}
+ showWarningIcon={true}
+ />
+
+ );
+};
\ No newline at end of file
diff --git a/src/frontend/src/pages/AdminStatus.tsx b/src/frontend/src/pages/AdminStatus.tsx
new file mode 100644
index 0000000..666b715
--- /dev/null
+++ b/src/frontend/src/pages/AdminStatus.tsx
@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Tag } from '../components/UI.tsx';
+import { Pagination } from '../components/Pagination.tsx';
+import { LayoutDashboard, Users, AlertTriangle, Zap, ShieldAlert, Folder } from 'lucide-react';
+import { AdminStats, AdminListItem, ViolationLogListItem } from '../types.ts';
+import { adminApi } from '../api/admin.ts';
+
+/**
+ * 管理员系统监控面板
+ * * 严格对接真实 API: Dashboard Stats, Admin List, Violations
+ * * 移除所有无后端接口支持的图表和模拟数据
+ */
+export const AdminStatus: React.FC = () => {
+ // --- 状态管理 ---
+ const [stats, setStats] = useState
+
+
+ 请审查并在需要时修改生成的 Schema，点击"修改"更新 ER 图。
+
+
+ {/* 编辑与预览分屏布局 */}
+
+
+ 请审查并在需要时修改生成的 Schema，点击"修改"更新 ER 图。
+
+ {/* 源码编辑区：支持手动干预 AI 逻辑偏差 */}
+
+
+
+ {/* 删除公告确认对话框 */}
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/frontend/src/pages/Announcements.tsx b/src/frontend/src/pages/Announcements.tsx
new file mode 100644
index 0000000..abf847b
--- /dev/null
+++ b/src/frontend/src/pages/Announcements.tsx
@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from 'react';
+import { Announcement } from '../types.ts';
+import { Card, Button, Modal, Tag } from '../components/UI.tsx';
+import { Pagination } from '../components/Pagination.tsx';
+import { Megaphone, Bell, Calendar, Loader2 } from 'lucide-react';
+import { announcementApi } from '../api/announcement.ts';
+
+// 分页配置
+const PAGE_SIZE = 8;
+
+/**
+ * 用户端系统公告页面
+ * 用于展示管理员发布的系统维护通知和功能更新。
+ */
+export const Announcements: React.FC = () => {
+ // --- 状态管理 ---
+ const [announcements, setAnnouncements] = useState
+
+
+
+
+ {/* 1. 核心指标卡片 (Real API Data: GET /dashboard/stats) */}
+
+
+
+
+ 数据最后更新: {new Date().toLocaleTimeString()}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 2. 数据列表区域 */}
+
+
+ {stats?.active_users_today ?? 0}
+ Active Users Today
+
+
+ {stats?.query_count_today ?? 0}
+ Queries Processed
+
+
+ {stats?.total_projects ?? 0}
+ Total Projects
+
+ {/* 违规审计日志 (Real API Data: GET /violations) */}
+
+
+
+
+
+
+ {/* 管理员列表 (Real API Data: GET /admins) */}
+
+
+
+
+
+ {/* 分页器 */}
+ {violationTotal > 0 && (
+ | 风险等级 | +违规类型 | +用户 | +时间 | +
|---|---|---|---|
|
+
+ {log.risk_level === 'CRITICAL' || log.risk_level === 'HIGH' ? (
+
+ |
+
+
+
+ {log.event_type === 'excessive_api_usage' && 'API频率超限'}
+ {log.event_type === 'sql_injection_attempt' && 'SQL注入尝试'}
+ {log.event_type === 'suspicious_query' && '可疑查询'}
+ {log.event_type === 'unauthorized_access_attempt' && '未授权访问'}
+ {log.event_type === 'ai_violation_content' && 'AI内容违规'}
+ {log.event_type === 'frequent_remote_login' && 'IP频繁变更'}
+ {log.event_type === 'multiple_failed_logins' && '多次登录失败'}
+ {!['excessive_api_usage', 'sql_injection_attempt', 'suspicious_query', 'unauthorized_access_attempt', 'ai_violation_content', 'frequent_remote_login', 'multiple_failed_logins'].includes(log.event_type) && log.event_type}
+
+
+ |
+ + {log.username} (ID:{log.user_id}) + | ++ {new Date(log.created_at).toLocaleString()} + | +
| 暂无违规记录 |
+
+ )}
+
+
+
+
+
+ {admins.map(admin => (
+
+
+
+ ))}
+ {admins.length === 0 && (
+
+
+
+ {admin.avatar_url ? (
+ 
+ ) : (
+
+
+ {admin.username.charAt(0).toUpperCase()}
+
+ )}
+
+
+
+ {admin.username}
+ {admin.email}
+
+
+ {admin.is_online ? '在线' : '离线'}
+
+
+
+ ID: {admin.user_id}
+
+ 暂无管理员信息
+ )}
+
+ {/* 页面头部：标题与图标 - 固定在顶部 */}
+ setSelected(null)}
+ title="公告详情"
+ maxWidth="max-w-5xl"
+ footer={}
+ >
+ {selected && (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/frontend/src/pages/Dashboard.tsx b/src/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..9778886
--- /dev/null
+++ b/src/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,411 @@
+import React, { useState, useEffect } from 'react';
+import { ProjectDTO, fetchProjects, createProject, updateProject, confirmDeleteProject, deleteProject, getProjectDetail } from '../api/project';
+import { ProjectStatusEnum } from '../types';
+import { Button, Modal, Input, message } from '../components/UI';
+import { Plus, PlayCircle, Sparkles, AlertTriangle, LayoutDashboard, Loader2 } from 'lucide-react';
+import { ProjectWizard } from '../components/ProjectWizard';
+import { ProjectOverview } from '../project-overview-optimization/ProjectOverview';
+import { ProjectData } from '../types/project-overview';
+import DatabaseIcon from '../project-overview-optimization/DatabaseIcon';
+
+// 数据转换函数：将 ProjectDTO 转换为 ProjectData
+const convertProjectDTOToProjectData = (dto: ProjectDTO): ProjectData => {
+ // 状态映射
+ let projectStatus: 'initializing' | 'active' | 'inactive';
+ switch (dto.project_status) {
+ case ProjectStatusEnum.INITIALIZING:
+ projectStatus = 'initializing';
+ break;
+ case ProjectStatusEnum.ACTIVE:
+ projectStatus = 'active';
+ break;
+ default:
+ projectStatus = 'inactive';
+ break;
+ }
+
+ return {
+ project_id: dto.project_id,
+ project_name: dto.project_name,
+ description: dto.description,
+ project_status: projectStatus,
+ updated_at: dto.updated_at || dto.created_at,
+ db_type: dto.db_type
+ };
+};
+
+interface DashboardProps {
+ onProjectSelect?: (project: ProjectDTO) => void;
+}
+
+export const Dashboard: React.FC
+
+
+ {/* 公告列表区域 - 可滚动 */}
+
+
+
+
+ 系统公告
+查看最新的系统维护通知与功能更新
+
+ {isLoading ? (
+
+
+ {/* 分页控件 - 固定在底部，始终显示 */}
+ {totalAnnouncements > 0 && (
+
+
+ ) : (
+
+ {paginatedAnnouncements.map(item => (
+
+
+ ))}
+
+ {/* 空状态展示 */}
+ {announcements.length === 0 && (
+
+ )}
+ setSelected(item)} className="p-1">
+
+
+
+
+ {/* 标题行：包含红点指示器、标题和 NEW 标签 */}
+
+
+
+
+
+ {/* 内容摘要：限制显示 2 行 */}
+ {item.title}
+{item.content}
+ + {/* 底部元数据：发布日期 */} +
+
+
+
+ )}
+ 暂无已发布的系统公告
+
+
+ )}
+
+ {/* 公告详情模态框 */}
+
+
+
+
+ )}
+ {selected.title}
+
+
+ {/* 这里的 whitespace-pre-wrap 保证了公告内容的换行符能被正确渲染 */}
+
+ {selected.content}
+
+
+ {/* 项目概览标题区域 - 使用与系统公告一致的样式 */}
+
+
+ :
+
+ {/* 删除确认模态框 */}
+ setIsDeleteModalOpen(false)}
+ title="确认删除项目"
+ maxWidth="max-w-md"
+ footer={
+ <>
+
+
+
+ }
+ >
+
+
+ {/* 编辑项目模态框 */}
+ setIsEditModalOpen(false)}
+ title="编辑项目信息"
+ maxWidth="max-w-md"
+ footer={
+ <>
+
+
+
+ }
+ >
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/frontend/src/pages/DatabaseViewer.tsx b/src/frontend/src/pages/DatabaseViewer.tsx
new file mode 100644
index 0000000..a20ed21
--- /dev/null
+++ b/src/frontend/src/pages/DatabaseViewer.tsx
@@ -0,0 +1,417 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+ RefreshCw,
+ Database,
+ Table,
+ ChevronRight,
+ ChevronDown,
+ HardDrive,
+ ChevronLeft
+} from 'lucide-react';
+import {
+ fetchDatabaseStructure,
+ fetchTableData,
+ fetchTableSchema,
+ fetchDatabaseStructureByProject,
+ fetchTableDataByProject,
+ fetchTableSchemaByProject,
+ TableInfo,
+ ColumnInfo
+} from '../api/database';
+
+interface DatabaseViewerProps {
+ sessionId?: number;
+ projectId?: number;
+ className?: string;
+}
+
+const DatabaseViewer: React.FC
+
+
+ {/* 使用优化后的项目概览组件 */}
+
+
+
+
+ 项目概览
+管理您的 AI 驱动数据库实例
+
+ } onClick={() => setIsModalOpen(true)} className="shrink-0 w-full sm:w-auto">
+ 新建项目
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+ AI 智能部署
+基于大模型。只需用自然语言描述业务场景，系统将自动完成数据库部署。
+
+ setNewProjectName(e.target.value)} required />
+
+
+
+
+
+ {/* 更新：增加 SQLite 选项 */}
+ {(['MySQL', 'PostgreSQL', 'SQLite'] as const).map(type => {
+ // 将显示名称映射为 DatabaseIcon 需要的 dbType
+ const dbTypeMap = {
+ MySQL: 'mysql',
+ PostgreSQL: 'postgresql',
+ SQLite: 'sqlite'
+ } as const;
+ return (
+
+ setNewProjectType(type)} className={`cursor-pointer px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg border flex items-center gap-2 sm:gap-3 transition-all ${newProjectType === type ? 'border-primary bg-blue-50 text-primary ring-1 ring-primary' : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'}`}>
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+ 高风险操作
+此操作将永久删除项目 {projectToDelete?.project_name} 及其所有关联的数据（表结构、数据、Schema）。此操作无法撤销！
+
+
+ setDeleteConfirmation(e.target.value)}
+ placeholder=""
+ className="border-red-300 focus:border-red-500 focus:ring-red-100"
+ />
+
+
+ setEditName(e.target.value)}
+ placeholder="项目名称"
+ required
+ />
+
+
+
+
+
+
+ {/* Sidebar */}
+ = ({ selectedProject }) => {
+ // --- 状态管理 ---
+
+ // 项目列表 (从真实 API 获取)
+ const [projectList, setProjectList] = useState([]);
+ const [loadingProjects, setLoadingProjects] = useState(false);
+
+ // 当前选中的项目 ID
+ const [selectedProjectId, setSelectedProjectId] = useState('');
+
+ // 术语数据列表
+ const [terms, setTerms] = useState([]);
+ const [total, setTotal] = useState(0);
+ const [loadingTerms, setLoadingTerms] = useState(false);
+
+ // 筛选与分页
+ const [searchQuery, setSearchQuery] = useState("");
+ const [page, setPage] = useState(1);
+ const pageSize = 9; // 每页 9 条
+ const [hasMore, setHasMore] = useState(false);
+
+ // 选中项 (用于批量删除)
+ const [selectedIds, setSelectedIds] = useState>(new Set());
+
+ // 确认删除对话框状态
+ const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
+
+ // 模态框与表单
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [editingTerm, setEditingTerm] = useState(null);
+ const [formData, setFormData] = useState({
+ term: "",
+ definition: "",
+ examples: ""
+ });
+ const [isSaving, setIsSaving] = useState(false);
+
+ // 文件导入相关状态
+ const fileInputRef = useRef(null);
+ const [isImporting, setIsImporting] = useState(false);
+ const [importResult, setImportResult] = useState(null);
+ const [isImportResultModalOpen, setIsImportResultModalOpen] = useState(false);
+
+ // --- 初始化: 获取真实项目列表 ---
+ useEffect(() => {
+ const loadProjects = async () => {
+ setLoadingProjects(true);
+ try {
+ const data = await fetchProjects();
+ setProjectList(data.items);
+ // 优先使用工作区选中的项目，否则使用列表第一个
+ if (data.items.length > 0 && !selectedProjectId) {
+ if (selectedProject?.id) {
+ // 如果有工作区选中的项目，使用该项目
+ setSelectedProjectId(selectedProject.id);
+ } else {
+ // 否则使用列表第一个
+ setSelectedProjectId(String(data.items[0].project_id));
+ }
+ }
+ } catch (error) {
+ console.error("Failed to fetch projects", error);
+ } finally {
+ setLoadingProjects(false);
+ }
+ };
+ loadProjects();
+ }, [selectedProject]);
+
+ // --- 获取术语列表 (依赖 selectedProjectId) ---
+ useEffect(() => {
+ if (selectedProjectId) {
+ fetchTerms();
+ setSelectedIds(new Set()); // 切换项目时清空选中
+ } else {
+ setTerms([]); // 无项目时清空列表
+ }
+ }, [selectedProjectId, page, searchQuery]);
+
+ const fetchTerms = async () => {
+ if (!selectedProjectId) return;
+ setLoadingTerms(true);
+ try {
+ const res = await glossaryApi.getList(selectedProjectId, page, pageSize, searchQuery || undefined);
+ setTerms(res.items);
+ setTotal(res.total);
+ setHasMore(page * pageSize < res.total);
+ } catch (error) {
+ console.error("Failed to fetch terms", error);
+ } finally {
+ setLoadingTerms(false);
+ }
+ };
+
+ // --- 交互处理 ---
+
+ const handleInputChange = (e: React.ChangeEvent, field: keyof CreateTermParams) => {
+ setFormData(prev => ({ ...prev, [field]: e.target.value }));
+ };
+
+ const openModal = (termToEdit?: KnowledgeTerm) => {
+ if (termToEdit) {
+ setEditingTerm(termToEdit);
+ setFormData({
+ term: termToEdit.term,
+ definition: termToEdit.definition,
+ examples: termToEdit.examples || ""
+ });
+ } else {
+ setEditingTerm(null);
+ setFormData({ term: "", definition: "", examples: "" });
+ }
+ setIsModalOpen(true);
+ };
+
+ const handleSave = async () => {
+ if (!selectedProjectId) {
+ message.error("请先选择一个项目");
+ return;
+ }
+ if (!formData.term.trim() || !formData.definition.trim()) {
+ message.error("术语名称和定义不能为空");
+ return;
+ }
+
+ setIsSaving(true);
+ try {
+ if (editingTerm) {
+ // 更新
+ await glossaryApi.update(selectedProjectId, editingTerm.knowledge_id, formData);
+ } else {
+ // 创建
+ await glossaryApi.create(selectedProjectId, formData);
+ }
+ setIsModalOpen(false);
+ fetchTerms(); // 刷新列表
+ } catch (error: any) {
+ // 错误已由响应拦截器自动处理并显示，这里只需记录日志
+ console.error("Save failed", error);
+ } finally {
+ setIsSaving(false);
+ }
+ };
+
+ const handleBatchDelete = async () => {
+ if (selectedIds.size === 0) return;
+ setIsDeleteConfirmOpen(true);
+ };
+
+ const confirmBatchDelete = async () => {
+ try {
+ const idsArray = Array.from(selectedIds);
+ const res = await glossaryApi.deleteBatch(selectedProjectId, idsArray);
+
+ message.success(`删除成功。成功: ${res.imported_count || selectedIds.size}, 失败: ${res.failed_count || 0}`);
+ setSelectedIds(new Set());
+ fetchTerms();
+ } catch (error: any) {
+ message.error("删除失败");
+ }
+ };
+
+ const toggleSelection = (id: number) => {
+ setSelectedIds(prev => {
+ const next = new Set(prev);
+ if (next.has(id)) next.delete(id);
+ else next.add(id);
+ return next;
+ });
+ };
+
+ const toggleAll = () => {
+ if (selectedIds.size === terms.length && terms.length > 0) {
+ setSelectedIds(new Set());
+ } else {
+ setSelectedIds(new Set(terms.map(t => t.knowledge_id)));
+ }
+ };
+
+ // --- 导入导出 ---
+
+ const handleExport = () => {
+ if (!selectedProjectId) return;
+
+ // 根据选中状态决定导出哪些数据
+ const termsToExport = selectedIds.size > 0
+ ? terms.filter(t => selectedIds.has(t.knowledge_id))
+ : terms;
+
+ if (termsToExport.length === 0) {
+ message.warning("没有可导出的术语数据");
+ return;
+ }
+
+ // 转换数据格式
+ const exportData = termsToExport.map((term: KnowledgeTerm) => ({
+ '术语': term.term,
+ '定义': term.definition,
+ '示例': term.examples || '',
+ '创建时间': term.created_at ? new Date(term.created_at).toLocaleDateString('zh-CN') : ''
+ }));
+
+ // 创建工作簿和工作表
+ const worksheet = XLSX.utils.json_to_sheet(exportData);
+ const workbook = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(workbook, worksheet, '业务术语');
+
+ // 设置列宽
+ worksheet['!cols'] = [
+ { wch: 20 }, // 术语
+ { wch: 50 }, // 定义
+ { wch: 30 }, // 示例
+ { wch: 15 } // 创建时间
+ ];
+
+ // 生成文件名
+ const projectName = projectList.find(p => String(p.project_id) === selectedProjectId)?.project_name || 'project';
+ const timestamp = new Date().toISOString().slice(0, 10);
+ const filename = `业务术语_${projectName}_${timestamp}.xlsx`;
+
+ // 下载文件
+ XLSX.writeFile(workbook, filename);
+ message.success(`成功导出 ${termsToExport.length} 条术语`);
+ };
+
+ const handleFileChange = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ const fileName = file.name.toLowerCase();
+ const validExtensions = ['.csv', '.xlsx', '.xls'];
+ if (!validExtensions.some(ext => fileName.endsWith(ext))) {
+ message.error("文件格式不支持：请上传 Excel (.xlsx/.xls) 或 CSV 文件");
+ if (fileInputRef.current) fileInputRef.current.value = '';
+ return;
+ }
+
+ if (!selectedProjectId) {
+ message.error("请先选择项目");
+ return;
+ }
+
+ setIsImporting(true);
+ try {
+ const res = await glossaryApi.importTerms(selectedProjectId, file);
+ // 设置导入结果并打开结果模态框，替代 alert
+ setImportResult(res);
+ setIsImportResultModalOpen(true);
+
+ if (res.imported_count > 0) {
+ fetchTerms();
+ }
+ } catch (error: any) {
+ // 错误已由响应拦截器自动处理并显示，这里只需记录日志
+ console.error("Import failed", error);
+ } finally {
+ setIsImporting(false);
+ if (fileInputRef.current) fileInputRef.current.value = ''; // 重置 input
+ }
+ };
+
+ // --- 渲染 ---
+
+ if (loadingProjects && projectList.length === 0) {
+ return (
+
+
+
+ {/* 拖拽条：调整 Explorer 宽度 */}
+ {!isSidebarCollapsed && (
+
+ {!isSidebarCollapsed && (
+
+
+
+ 资源管理器
+
+ )}
+ {!isSidebarCollapsed && (
+
+ )}
+ {isSidebarCollapsed && (
+
+ )}
+
+ {!isSidebarCollapsed ? (
+
+
+ {/* Database Node */}
+
+ ) : null}
+ toggleExpand('database')}
+ >
+ {expanded.database ?
+
+ {expanded.database && (
+
+ {/* Tables Node */}
+
+ )}
+ toggleExpand('tables')}
+ >
+ {expanded.tables ?
+ 表
+
+
+ {expanded.tables && (
+
+ {tables.map((table) => (
+
+ )}
+ handleTableSelect(table.name)}
+ >
+
+ {table.name}
+
+ ))}
+ {
+ resizeStartXRef.current = e.clientX;
+ resizeStartWidthRef.current = explorerWidthRef.current;
+ setIsResizingExplorer(true);
+ }}
+ onDoubleClick={() => setExplorerWidth(256)}
+ title="拖拽调整 Explorer 宽度（双击重置）"
+ />
+ )}
+
+ {/* Main Pane */}
+
+ );
+};
+
+export default DatabaseViewer;
\ No newline at end of file
diff --git a/src/frontend/src/pages/Glossary.tsx b/src/frontend/src/pages/Glossary.tsx
new file mode 100644
index 0000000..cdc3b3e
--- /dev/null
+++ b/src/frontend/src/pages/Glossary.tsx
@@ -0,0 +1,602 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+ Plus,
+ Search,
+ Trash2,
+ Download,
+ Upload,
+ Edit2,
+ Book,
+ CheckSquare,
+ Square,
+ Filter,
+ Loader2,
+ FileText,
+ AlertCircle,
+ CheckCircle2,
+ Database
+} from 'lucide-react';
+import * as XLSX from 'xlsx';
+import { KnowledgeTerm, KnowledgeImportResponse, Project } from '../types.ts';
+import { glossaryApi, CreateTermParams } from '../api/glossary.ts';
+import { fetchProjects, ProjectDTO } from '../api/project.ts';
+import { Button, Input, Modal, Card, message, ConfirmDialog, Select } from '../components/UI.tsx';
+import { Pagination } from '../components/Pagination.tsx';
+
+interface GlossaryProps {
+ /** 当前工作区选中的项目（从 App 传入） */
+ selectedProject?: Project | null;
+}
+
+export const Glossary: React.FC
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+
+
+ + {selectedTable || '选择一个表'} +
+
+
+
+
+ {selectedTable ? (
+
+
+ {/* 确保表格容器有正确的水平滚动 */}
+
+ ) : (
+
+
+ {/* 确保列头 sticky 定位正常工作 */}
+
+
+
+ |
+
+ {col.field}
+ {col.type}
+
+ |
+ ))}
+
|---|
| + {row[col.field]?.toString() ?? null} + | + ))} +
| + 暂无数据 + | +
+
+ )}
+ 选择一个表
+
+
+ );
+ }
+
+ if (projectList.length === 0) {
+ return 您暂无数据库项目，请先在项目概览中创建。
;
+ }
+
+ const totalPages = Math.ceil(total / pageSize);
+
+ return (
+
+ {/* 头部与操作栏 - 固定在顶部 */}
+ setIsModalOpen(false)}
+ title={editingTerm ? "编辑业务术语" : "新增业务术语"}
+ footer={
+ <>
+
+
+
+ }
+ >
+
+ {/* 业务术语标题区域 - 使用与系统公告一致的样式 */}
+
+
+ {/* 列表内容区 - 可滚动 */}
+
+
+
+
+
+
+
+ 业务术语
+管理项目相关的业务术语定义
+
+ {/* 项目选择器 */}
+
+
+
+ {/* 新增术语按钮 */}
+
+
+
+
+
+
+
+
+ setSearchQuery(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && setPage(1)}
+ />
+
+ {selectedIds.size > 0 && (
+ }
+ className="h-9 text-xs"
+ >
+ 删除 ({selectedIds.size})
+
+ )}
+
+
+ }
+ className="h-9 text-xs hidden md:flex"
+ >
+ {selectedIds.size > 0 ? `导出 (${selectedIds.size})` : '导出本页'}
+
+
+
+
+
+
+ {loadingTerms && terms.length === 0 ? (
+
+
+ {/* 分页控制栏 - 固定在底部，始终显示 */}
+ {total > 0 && (
+
+
+ ) : terms.length === 0 ? (
+
+
+ ) : (
+ 暂无业务术语
+当前项目下还没有定义任何业务术语。
+
+ {/* 全选控制 */}
+
+
+ ))}
+
+ )}
+
+
+ 共 {total} 条记录
+
+
+ {terms.map((term) => (
+
+
+
+
+
+
+
+
+
+
+
+
+ + {term.term} +
++ 定义 + {term.definition} +
+ {term.examples && ( +
+
+ )}
+
+ 示例：
+ {term.examples}
+
+
+
+
+
+
+ )}
+
+ {/* 1. 新增/编辑 模态框 */}
+
+
+
+ handleInputChange(e, 'term')}
+ placeholder="例如：GMV"
+ required
+ />
+
+
+