绝尘
a5d30684ed
- 拆分 FileSystem.vue 为模块化组件架构 - 新增 Markdown Mermaid 图表渲染支持 - 新增 180+ 编程语言代码高亮 - 修复编辑/预览模式切换渲染问题 - 优化亮色/暗色模式主题适配 - 新增 TypeScript 类型定义
77 KiB
77 KiB
新表创建功能设计
设计日期：2026-01-28
设计范围：MySQL、MongoDB、Redis 新表/集合/Key创建功能设计
状态：设计阶段
设计概览
新表创建功能提供统一的界面创建不同数据库类型的表/集合，支持：
- MySQL：创建表（字段定义、索引定义）
- MongoDB：创建集合（可选索引定义）
- Redis：创建Key（键值对设置）
核心特性：
- 与表结构查看功能体验协调
- 在结果面板中展示，无需弹出窗口
- 根据数据库类型自动适配创建表单
- 支持可视化表单和SQL预览两种模式
- 响应式设计，适配不同屏幕尺寸
一、功能概述
新表创建功能允许用户通过可视化界面创建不同数据库类型的表/集合：
- MySQL：创建表，定义字段、索引、约束
- MongoDB：创建集合，可选定义索引
- Redis：创建Key，设置键值对
与表结构查看功能的关系：
- 创建完成后，自动切换到"结构"Tab查看新创建的表结构
- 使用相同的展示区域（ResultPanel）
- 使用相同的组件风格和交互方式
二、界面设计
2.1 触发方式
方式一：连接树右键菜单（推荐）
- 在连接树中，右键点击数据库节点
- 显示上下文菜单，包含"新建表"选项（根据数据库类型显示不同文本）
- MySQL: "新建表"
- MongoDB: "新建集合"
- Redis: "新建Key"
- 点击后在结果面板的"创建"Tab中展示创建表单
方式二：连接树节点操作按钮
- 在数据库节点上悬停显示操作按钮
- 点击"新建"图标按钮，在结果面板展示
推荐实现方式一，与表结构查看功能保持一致。
2.2 展示位置设计
在结果面板中展示
新表创建表单展示在现有的 ResultPanel 组件中，作为第四个 Tab：
┌─────────────────────────────────────────────────────────┐
│ 结果面板 │
├─────────────────────────────────────────────────────────┤
│ [结果] [消息] [结构] [创建] │
├─────────────────────────────────────────────────────────┤
│ [表单模式] [SQL预览] [创建] [取消] │
├─────────────────────────────────────────────────────────┤
│ │
│ [创建 Tab 内容区域] │
│ ┌─────────────────────────────────────┐ │
│ │ 表名: [输入框] │ │
│ │ 字段列表: │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ 字段名 │ 类型 │ NULL │ 默认值 │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │ [添加字段] │ │
│ └─────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
模式切换
- 表单模式（默认）：可视化表单，通过输入框和下拉框定义表结构
- SQL预览模式：显示将要执行的SQL语句，可编辑（MySQL）
展示区域属性
- 位置：结果面板（
ResultPanel）的第四个 Tab - Tab 标题：根据数据库类型显示
- MySQL:
创建表 - MongoDB:
创建集合 - Redis:
创建Key
- MySQL:
- 高度：跟随结果面板高度（可调整，默认 300px）
- 滚动：内容超出时自动滚动
优势
- ✅ 无需弹出窗口，界面更简洁
- ✅ 与查询结果、消息、结构在同一区域，操作连贯
- ✅ 符合现有架构，扩展 ResultPanel 组件
- ✅ 创建完成后可直接查看结构，无需切换窗口
2.3 内容展示设计
MySQL 表创建
表单模式：
┌─────────────────────────────────────────────────────────────┐
│ 创建表 │
├─────────────────────────────────────────────────────────────┤
│ 数据库: test (不可编辑) │
│ 表名: [users________________] │
│ 字符集: [utf8mb4▼] │
│ 排序规则: [utf8mb4_general_ci▼] │
├─────────────────────────────────────────────────────────────┤
│ 字段列表 │
│ ┌──────┬──────────────┬──────┬──────────┬──────────────┐ │
│ │ 字段名│ 类型 │ NULL │ 默认值 │ 操作 │ │
│ ├──────┼──────────────┼──────┼──────────┼──────────────┤ │
│ │ id │ int(11) │ NO │ │ [↑][↓][删除] │ │
│ │ name │ varchar(50) │ YES │ NULL │ [↑][↓][删除] │ │
│ │ email│ varchar(100)│ NO │ │ [↑][↓][删除] │ │
│ └──────┴──────────────┴──────┴──────────┴──────────────┘ │
│ [添加字段] │
├─────────────────────────────────────────────────────────────┤
│ 索引列表 │
│ ┌──────────┬──────┬──────────┬──────────┐ │
│ │ 索引名 │ 唯一 │ 字段 │ 操作 │ │
│ ├──────────┼──────┼──────────┼──────────┤ │
│ │ PRIMARY │ 是 │ id │ [删除] │ │
│ │ idx_email│ 是 │ email │ [删除] │ │
│ └──────────┴──────┴──────────┴──────────┘ │
│ [添加索引] │
├─────────────────────────────────────────────────────────────┤
│ [表单模式] [SQL预览] [创建] [取消] │
└─────────────────────────────────────────────────────────────┘
字段定义表单（点击"添加字段"弹出）：
┌─────────────────────────────────────┐
│ 添加字段 │
├─────────────────────────────────────┤
│ 字段名: [________________] │
│ 类型: [varchar(50)▼] │
│ 长度: [50______] (可选) │
│ 允许NULL: [✓] │
│ 默认值: [________________] (可选) │
│ 主键: [ ] │
│ 自增: [ ] │
│ 注释: [________________] (可选) │
│ [确定] [取消] │
└─────────────────────────────────────┘
SQL预览模式：
┌─────────────────────────────────────────────────────────────┐
│ SQL预览 │
├─────────────────────────────────────────────────────────────┤
│ CREATE TABLE `test`.`users` ( │
│ `id` int(11) NOT NULL AUTO_INCREMENT, │
│ `name` varchar(50) DEFAULT NULL, │
│ `email` varchar(100) NOT NULL, │
│ PRIMARY KEY (`id`), │
│ UNIQUE KEY `idx_email` (`email`) │
│ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 │
│ COLLATE=utf8mb4_general_ci; │
├─────────────────────────────────────────────────────────────┤
│ [表单模式] [SQL预览] [创建] [取消] │
└─────────────────────────────────────────────────────────────┘
MongoDB 集合创建
表单模式：
┌─────────────────────────────────────────────────────────────┐
│ 创建集合 │
├─────────────────────────────────────────────────────────────┤
│ 数据库: test (不可编辑) │
│ 集合名: [users________________] │
├─────────────────────────────────────────────────────────────┤
│ 索引列表（可选） │
│ ┌──────────┬──────┬──────────┬──────────┐ │
│ │ 索引名 │ 唯一 │ 键定义 │ 操作 │ │
│ ├──────────┼──────┼──────────┼──────────┤ │
│ │ idx_email│ 是 │ {email:1}│ [删除] │ │
│ └──────────┴──────┴──────────┴──────────┘ │
│ [添加索引] │
├─────────────────────────────────────────────────────────────┤
│ 说明：MongoDB 集合是动态的，字段在插入文档时自动创建。 │
│ 可以预先创建索引以提高查询性能。 │
├─────────────────────────────────────────────────────────────┤
│ [创建] [取消] │
└─────────────────────────────────────────────────────────────┘
索引定义表单（点击"添加索引"弹出）：
┌─────────────────────────────────────┐
│ 添加索引 │
├─────────────────────────────────────┤
│ 索引名: [idx_email________] │
│ 唯一: [✓] │
│ 键定义: [{"email": 1}________] │
│ 说明：JSON格式，如 {"email": 1} │
│ [确定] [取消] │
└─────────────────────────────────────┘
Redis Key 创建
表单模式：
┌─────────────────────────────────────────────────────────────┐
│ 创建Key │
├─────────────────────────────────────────────────────────────┤
│ 数据库: DB 0 (不可编辑) │
│ Key名: [user:1001____________] │
│ 类型: [hash▼] │
│ TTL(秒): [3600______] (可选，-1表示永不过期) │
├─────────────────────────────────────────────────────────────┤
│ 值设置（根据类型显示不同表单） │
│ │
│ Hash类型: │
│ ┌──────────┬──────────┬──────────┐ │
│ │ 字段名 │ 值 │ 操作 │ │
│ ├──────────┼──────────┼──────────┤ │
│ │ name │ John │ [删除] │ │
│ │ email │ john@... │ [删除] │ │
│ └──────────┴──────────┴──────────┘ │
│ [添加字段] │
│ │
│ String类型: │
│ 值: [________________] │
│ │
│ List类型: │
│ ┌──────────┬──────────┐ │
│ │ 值 │ 操作 │ │
│ ├──────────┼──────────┤ │
│ │ item1 │ [删除] │ │
│ └──────────┴──────────┘ │
│ [添加项] │
├─────────────────────────────────────────────────────────────┤
│ [创建] [取消] │
└─────────────────────────────────────────────────────────────┘
三、功能线框图
3.1 整体界面布局
┌─────────────────────────────────────────────────────────────────────────────┐
│ GO-DESK-2 数据库客户端 │
├──────────────┬──────────────────────────────────────────────────────────────┤
│ │ │
│ 连接树 │ SQL编辑器 / 结果面板 │
│ │ │
│ ┌────────┐ │ ┌─────────────────────────────────────────────────────────┐ │
│ │ MySQL │ │ │ [结果] [消息] [结构] [创建] ← 新增Tab │ │
│ │ └─test│ │ ├─────────────────────────────────────────────────────────┤ │
│ │ │ │ │ │ │
│ │ Mongo │ │ │ 创建表 (MySQL) / 创建集合 (MongoDB) / 创建Key (Redis) │ │
│ │ └─test│ │ │ │ │
│ │ │ │ │ [表单模式] [SQL预览] [创建] [取消] │ │
│ │ Redis │ │ │ │ │
│ │ └─DB 0│ │ │ ┌───────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │ 创建表单内容区域 │ │ │
│ │ │ │ │ │ (根据数据库类型显示不同表单) │ │ │
│ │ │ │ │ └───────────────────────────────────────────────────┘ │ │
│ │ │ │ │ │ │
│ └────────┘ │ └─────────────────────────────────────────────────────────┘ │
│ │ │
└──────────────┴──────────────────────────────────────────────────────────────┘
说明：
- 左侧：连接树，显示数据库连接和数据库节点
- 右侧：结果面板，包含多个Tab（结果、消息、结构、创建）
- 创建功能在结果面板的"创建"Tab中展示
3.2 触发流程线框图
┌─────────────────────────────────────────────────────────────────┐
│ 步骤1: 用户在连接树中右键点击数据库节点 │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ 步骤2: 显示右键菜单 │
│ ┌──────────────────────────────┐ │
│ │ 刷新 │ │
│ │ 新建表 (MySQL) / 新建集合... │ ← 新增菜单项 │
│ │ 查看结构 │ │
│ └──────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ 步骤3: 点击"新建表"后，结果面板自动切换到"创建"Tab │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ [结果] [消息] [结构] [创建] ← 自动激活 │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ 步骤4: 显示创建表单（根据数据库类型） │
└─────────────────────────────────────────────────────────────────┘
3.3 MySQL 表创建线框图
3.3.1 表单模式完整界面
┌─────────────────────────────────────────────────────────────────────────────┐
│ [结果] [消息] [结构] [创建表] ← 当前Tab │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 创建表 │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 基本信息 │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ 数据库: test (只读) │ │
│ │ 表名: [users________________________] │ │
│ │ 字符集: [utf8mb4 ▼] │ │
│ │ 排序规则: [utf8mb4_general_ci ▼] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 字段列表 │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ ┌──────┬──────────────┬──────┬──────────┬──────────┬──────────────┐ │ │
│ │ │ 字段名│ 类型 │ NULL │ 默认值 │ 主键 │ 操作 │ │ │
│ │ ├──────┼──────────────┼──────┼──────────┼──────────┼──────────────┤ │ │
│ │ │ id │ int(11) │ NO │ │ ✓ │ [↑][↓][删除] │ │ │
│ │ │ name │ varchar(50) │ YES │ NULL │ │ [↑][↓][删除] │ │ │
│ │ │ email│ varchar(100)│ NO │ │ │ [↑][↓][删除] │ │ │
│ │ └──────┴──────────────┴──────┴──────────┴──────────┴──────────────┘ │ │
│ │ │ │
│ │ [添加字段] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 索引列表 │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ ┌──────────┬──────┬──────────┬──────────┐ │ │
│ │ │ 索引名 │ 唯一 │ 字段 │ 操作 │ │ │
│ │ ├──────────┼──────┼──────────┼──────────┤ │ │
│ │ │ PRIMARY │ 是 │ id │ [删除] │ │ │
│ │ │ idx_email│ 是 │ email │ [删除] │ │ │
│ │ └──────────┴──────┴──────────┴──────────┘ │ │
│ │ │ │
│ │ [添加索引] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 操作按钮 │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ [表单模式] [SQL预览] [创建] [取消] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
3.3.2 字段定义对话框
┌─────────────────────────────────────────────────────────────┐
│ 添加字段 [×] │
├─────────────────────────────────────────────────────────────┤
│ │
│ 字段名: [username________________] │
│ │
│ 类型: [varchar(50) ▼] │
│ 整数类型: TINYINT, SMALLINT, INT, BIGINT... │
│ 字符串类型: CHAR, VARCHAR, TEXT... │
│ 日期时间: DATE, DATETIME, TIMESTAMP... │
│ │
│ 长度: [50______] (可选，仅部分类型需要) │
│ │
│ 允许NULL: [✓] │
│ │
│ 默认值: [________________] (可选) │
│ │
│ 主键: [ ] │
│ │
│ 自增: [ ] (仅整数类型) │
│ │
│ 注释: [________________] (可选) │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ [确定] [取消] │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
3.3.3 SQL预览模式
┌─────────────────────────────────────────────────────────────────────────────┐
│ [结果] [消息] [结构] [创建表] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ SQL预览 │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ CREATE TABLE `test`.`users` ( │ │
│ │ `id` int(11) NOT NULL AUTO_INCREMENT, │ │
│ │ `name` varchar(50) DEFAULT NULL, │ │
│ │ `email` varchar(100) NOT NULL, │ │
│ │ PRIMARY KEY (`id`), │ │
│ │ UNIQUE KEY `idx_email` (`email`) │ │
│ │ ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 │ │
│ │ COLLATE=utf8mb4_general_ci; │ │
│ │ │ │
│ │ (SQL可编辑，带语法高亮) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ [表单模式] [SQL预览] [创建] [取消] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
3.4 MongoDB 集合创建线框图
┌─────────────────────────────────────────────────────────────────────────────┐
│ [结果] [消息] [结构] [创建集合] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 创建集合 │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 基本信息 │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ 数据库: test (只读) │ │
│ │ 集合名: [users________________________] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 索引列表（可选） │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ ┌──────────┬──────┬──────────────┬──────────┐ │ │
│ │ │ 索引名 │ 唯一 │ 键定义 │ 操作 │ │ │
│ │ ├──────────┼──────┼──────────────┼──────────┤ │ │
│ │ │ idx_email│ 是 │ {email: 1} │ [删除] │ │ │
│ │ │ idx_name │ 否 │ {name: 1} │ [删除] │ │ │
│ │ └──────────┴──────┴──────────────┴──────────┘ │ │
│ │ │ │
│ │ [添加索引] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 说明 │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ ℹ️ MongoDB 集合是动态的，字段在插入文档时自动创建。 │ │
│ │ 可以预先创建索引以提高查询性能。 │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ [创建] [取消] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
索引定义对话框
┌─────────────────────────────────────────────────────────────┐
│ 添加索引 [×] │
├─────────────────────────────────────────────────────────────┤
│ │
│ 索引名: [idx_email________________] │
│ │
│ 唯一: [✓] │
│ │
│ 键定义: [{"email": 1}________________] │
│ │
│ 说明: JSON格式，如 {"email": 1, "name": -1} │
│ 1 表示升序，-1 表示降序 │
│ │
│ 示例: │
│ { │
│ "email": 1, │
│ "name": -1 │
│ } │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ [确定] [取消] │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
3.5 Redis Key 创建线框图
┌─────────────────────────────────────────────────────────────────────────────┐
│ [结果] [消息] [结构] [创建Key] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 创建Key │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 基本信息 │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ 数据库: DB 0 (只读) │ │
│ │ Key名: [user:1001________________________] │ │
│ │ 类型: [hash ▼] │ │
│ │ string, hash, list, set, zset │ │
│ │ TTL(秒): [3600______] (可选，-1表示永不过期) │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 值设置（根据类型动态显示） │ │
│ ├────────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Hash类型: │ │
│ │ ┌──────────┬──────────────┬──────────┐ │ │
│ │ │ 字段名 │ 值 │ 操作 │ │ │
│ │ ├──────────┼──────────────┼──────────┤ │ │
│ │ │ name │ John │ [删除] │ │ │
│ │ │ email │ john@ex.com │ [删除] │ │ │
│ │ │ age │ 25 │ [删除] │ │ │
│ │ └──────────┴──────────────┴──────────┘ │ │
│ │ [添加字段] │ │
│ │ │ │
│ │ String类型: │ │
│ │ 值: [________________________] │ │
│ │ │ │
│ │ List类型: │ │
│ │ ┌──────────────┬──────────┐ │ │
│ │ │ 值 │ 操作 │ │ │
│ │ ├──────────────┼──────────┤ │ │
│ │ │ item1 │ [删除] │ │ │
│ │ │ item2 │ [删除] │ │ │
│ │ └──────────────┴──────────┘ │ │
│ │ [添加项] │ │
│ │ │ │
│ │ Set类型: │ │
│ │ ┌──────────────┬──────────┐ │ │
│ │ │ 值 │ 操作 │ │ │
│ │ ├──────────────┼──────────┤ │ │
│ │ │ value1 │ [删除] │ │ │
│ │ │ value2 │ [删除] │ │ │
│ │ └──────────────┴──────────┘ │ │
│ │ [添加项] │ │
│ │ │ │
│ │ ZSet类型: │ │
│ │ ┌──────────────┬──────────┬──────────┐ │ │
│ │ │ 值 │ 分数 │ 操作 │ │ │
│ │ ├──────────────┼──────────┼──────────┤ │ │
│ │ │ member1 │ 10.5 │ [删除] │ │ │
│ │ │ member2 │ 20.0 │ [删除] │ │ │
│ │ └──────────────┴──────────┴──────────┘ │ │
│ │ [添加项] │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ [创建] [取消] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
3.6 创建成功流程线框图
┌─────────────────────────────────────────────────────────────────┐
│ 步骤1: 用户填写表单并点击"创建" │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ 步骤2: 显示加载状态 │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ [创建中...] ⏳ │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ 步骤3: 创建成功 │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ✓ 表 'users' 创建成功 │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ 步骤4: 自动切换到"结构"Tab │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ [结果] [消息] [结构] ← 自动激活 │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ 步骤5: 自动加载新创建的表结构 │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 表结构: users │ │
│ │ ┌──────┬──────────────┬──────┬──────────┐ │ │
│ │ │ 字段名│ 类型 │ NULL │ 默认值 │ │ │
│ │ ├──────┼──────────────┼──────┼──────────┤ │ │
│ │ │ id │ int(11) │ NO │ │ │ │
│ │ │ name │ varchar(50) │ YES │ NULL │ │ │
│ │ │ email│ varchar(100)│ NO │ │ │ │
│ │ └──────┴──────────────┴──────┴──────────┘ │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
3.7 错误处理线框图
┌─────────────────────────────────────────────────────────────────────────────┐
│ [结果] [消息] [结构] [创建表] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 创建表 │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ ❌ 创建失败 │ │
│ │ │ │
│ │ 错误信息: │ │
│ │ Table 'test.users' already exists │ │
│ │ │ │
│ │ 请检查表名是否重复，或修改表名后重试。 │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ (表单数据保留，允许修改后重试) │ │
│ │ │ │
│ │ 表名: [users________________] ← 可修改 │ │
│ │ ... │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ [表单模式] [SQL预览] [创建] [取消] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
3.8 右键菜单线框图
┌─────────────────────────────────────────────────────────────────┐
│ 连接树 │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 📁 MySQL │ │
│ │ └─ 📁 test ← 右键点击此处 │ │
│ │ 📁 MongoDB │ │
│ │ └─ 📁 test │ │
│ │ 📁 Redis │ │
│ │ └─ 📁 DB 0 │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ 右键菜单（MySQL数据库节点） │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 🔄 刷新 │ │
│ │ ───────────────────────────────── │ │
│ │ ➕ 新建表 ← 新增菜单项 │ │
│ │ 👁️ 查看结构 │ │
│ │ ───────────────────────────────── │ │
│ │ ⚙️ 数据库设置 │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ 右键菜单（MongoDB数据库节点） │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 🔄 刷新 │ │
│ │ ───────────────────────────────── │ │
│ │ ➕ 新建集合 ← 新增菜单项 │ │
│ │ 👁️ 查看结构 │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ 右键菜单（Redis数据库节点） │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 🔄 刷新 │ │
│ │ ───────────────────────────────── │ │
│ │ ➕ 新建Key ← 新增菜单项 │ │
│ │ 👁️ 查看结构 │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
四、组件设计
3.1 组件结构
ResultPanel.vue (现有组件，扩展)
└── 新增 "创建" Tab
├── CreateContent.vue (创建内容组件)
│ ├── 模式切换（表单/SQL预览）
│ ├── MySQLCreate.vue (MySQL 专用)
│ │ ├── FormMode.vue (表单模式)
│ │ │ ├── BasicInfoForm.vue (基本信息表单)
│ │ │ ├── FieldsEditor.vue (字段编辑表格)
│ │ │ ├── IndexesEditor.vue (索引编辑表格)
│ │ │ └── FieldDialog.vue (字段定义对话框)
│ │ └── SQLPreviewMode.vue (SQL预览模式)
│ ├── MongoCreate.vue (MongoDB 专用)
│ │ ├── BasicInfoForm.vue (基本信息表单)
│ │ ├── IndexesEditor.vue (索引编辑表格)
│ │ └── IndexDialog.vue (索引定义对话框)
│ └── RedisCreate.vue (Redis 专用)
│ ├── BasicInfoForm.vue (基本信息表单)
│ └── ValueEditor.vue (值编辑组件，根据类型切换)
└── 状态管理（通过 composable）
3.2 组件接口
ResultPanel.vue Props（扩展）
interface Props {
// ... 现有 props
createInfo?: {
connectionId: number
database: string
dbType: 'mysql' | 'mongo' | 'redis'
} | null // 创建信息，null 表示不显示创建Tab
}
新增 Composable: useCreateState.ts
export function useCreateState() {
const createLoading = ref(false)
const createError = ref('')
const createInfo = ref<{
connectionId: number
database: string
dbType: 'mysql' | 'mongo' | 'redis'
} | null>(null)
// MySQL 创建数据
const mysqlCreateData = ref({
tableName: '',
charset: 'utf8mb4',
collation: 'utf8mb4_general_ci',
fields: [] as FieldDefinition[],
indexes: [] as IndexDefinition[]
})
// MongoDB 创建数据
const mongoCreateData = ref({
collectionName: '',
indexes: [] as IndexDefinition[]
})
// Redis 创建数据
const redisCreateData = ref({
keyName: '',
keyType: 'string' as 'string' | 'hash' | 'list' | 'set' | 'zset',
ttl: -1,
value: any
})
// 模式切换
const createMode = ref<'form' | 'sql'>('form')
const startCreate = (connectionId: number, database: string, dbType: 'mysql' | 'mongo' | 'redis') => {
createInfo.value = { connectionId, database, dbType }
// 重置创建数据
resetCreateData()
}
const resetCreateData = () => {
// 根据 dbType 重置对应数据
}
const cancelCreate = () => {
createInfo.value = null
resetCreateData()
}
const createTable = async () => {
// 根据 dbType 调用不同的创建API
// 创建成功后，自动切换到结构Tab查看新创建的表
}
return {
createLoading,
createError,
createInfo,
mysqlCreateData,
mongoCreateData,
redisCreateData,
createMode,
startCreate,
cancelCreate,
createTable
}
}
五、数据流程
5.1 创建流程
用户触发创建（右键菜单/操作按钮）
↓
ConnectionTree 触发 'create-table' 事件
↓
index.vue 接收事件，调用 useCreateState.startCreate()
↓
根据 connectionId 获取连接信息（确定 dbType）
↓
更新 createInfo，ResultPanel 显示"创建"Tab
↓
用户填写创建表单
↓
点击"创建"按钮
↓
调用 CreateTable API
↓
后端根据 dbType 分发：
- MySQL → CreateTable (执行 CREATE TABLE)
- MongoDB → CreateCollection (创建集合，可选创建索引)
- Redis → CreateKey (执行 SET/HSET 等命令)
↓
返回创建结果
↓
创建成功：
- 清空创建数据
- 切换到"结构"Tab
- 自动加载新创建的表结构
5.2 API 调用
// MySQL 创建表
const result = await window.go.main.App.CreateTable(
connectionId,
database,
tableName,
{
charset: 'utf8mb4',
collation: 'utf8mb4_general_ci',
fields: [...],
indexes: [...]
}
)
// MongoDB 创建集合
const result = await window.go.main.App.CreateCollection(
connectionId,
database,
collectionName,
{
indexes: [...] // 可选
}
)
// Redis 创建Key
const result = await window.go.main.App.CreateKey(
connectionId,
database, // DB编号
keyName,
{
type: 'hash',
ttl: 3600,
value: {...}
}
)
六、实现细节
6.1 表单验证
MySQL 表创建验证
- 表名：必填，符合MySQL命名规范，不能与现有表重复
- 字段列表：至少一个字段
- 字段名：必填，符合MySQL命名规范，不能重复
- 类型：必选，从预设类型列表选择
- 主键：如果设置了自增，必须设置主键
- 索引：索引字段必须在字段列表中存在
MongoDB 集合创建验证
- 集合名：必填，符合MongoDB命名规范，不能与现有集合重复
- 索引：索引键定义必须是有效的JSON格式
Redis Key 创建验证
- Key名：必填，不能与现有Key重复（可选检查）
- 类型：必选
- 值：根据类型验证值格式
- String: 任意值
- Hash: 键值对对象
- List: 数组
- Set: 数组（去重）
- ZSet: 带分数的数组
6.2 SQL预览（MySQL）
- 实时生成：表单修改时实时生成SQL预览
- 可编辑：SQL预览模式下可以直接编辑SQL
- 同步表单：编辑SQL后可以同步回表单（可选，P2功能）
- 语法高亮：使用CodeMirror显示SQL，支持语法高亮
6.3 字段类型选择
MySQL 字段类型
- 整数类型：TINYINT, SMALLINT, MEDIUMINT, INT, BIGINT
- 浮点类型：FLOAT, DOUBLE, DECIMAL
- 字符串类型：CHAR, VARCHAR, TEXT, TINYTEXT, MEDIUMTEXT, LONGTEXT
- 日期时间类型：DATE, TIME, DATETIME, TIMESTAMP, YEAR
- 其他类型：BLOB, JSON, ENUM, SET
类型选择器：
- 下拉框选择类型
- 选择后显示长度输入框（如需要）
- 显示类型说明和示例
6.4 索引编辑
MySQL 索引
- 索引类型：PRIMARY KEY, UNIQUE, INDEX, FULLTEXT
- 字段选择：从字段列表中选择，支持多字段
- 排序方式：ASC, DESC（每个字段独立设置）
MongoDB 索引
- 索引名：可选，不提供时自动生成
- 唯一性：是否唯一索引
- 键定义：JSON格式，如
{"email": 1, "name": -1}
七、交互设计
7.1 触发创建
-
从连接树触发：
- 右键菜单 → "新建表"/"新建集合"/"新建Key"
- 或点击数据库节点操作按钮
-
参数传递：
- 从节点数据获取
connectionId、database、dbType - 通过事件传递给
index.vue index.vue调用useCreateState.startCreate()
- 从节点数据获取
-
Tab 切换：
- 自动切换到结果面板的"创建"Tab
- 如果结果面板隐藏，自动显示
7.2 创建Tab操作
- 切换Tab：点击"创建"Tab填写表单，点击其他Tab返回
- 模式切换：表单模式 ↔ SQL预览模式（仅MySQL）
- 创建：验证表单，执行创建，成功后切换到结构Tab
- 取消：清空表单，关闭创建Tab
- 字段操作：添加、删除、上移、下移字段
- 索引操作：添加、删除索引
7.3 创建完成
-
成功：
- 显示成功消息
- 自动切换到"结构"Tab
- 自动加载新创建的表结构
- 清空创建表单数据
- 关闭创建Tab（可选，或保留以便继续创建）
-
失败：
- 显示错误提示
- 保留表单数据，允许修改后重试
- 提供错误详情（如SQL错误信息）
八、技术实现要点
8.1 组件拆分
- 扩展组件：
ResultPanel.vue添加"创建"Tab - 内容组件：
CreateContent.vue负责根据dbType路由到对应组件 - 专用组件：
MySQLCreate.vue、MongoCreate.vue、RedisCreate.vue - 复用组件：
IndexesEditor.vue可被 MySQL 和 MongoDB 复用（需适配数据格式） - 状态管理：
useCreateState.tscomposable 管理创建数据状态
8.2 数据格式化
- MySQL SQL生成：根据表单数据生成 CREATE TABLE 语句
- MongoDB 命令：生成创建集合和索引的命令
- Redis 命令：根据类型生成对应的 SET/HSET 等命令
8.3 性能优化
- 懒加载：创建Tab切换时才加载对应内容（使用
v-if） - 表单验证：实时验证，避免无效提交
- SQL预览：防抖更新，避免频繁生成SQL
九、与表结构查看功能的协调
9.1 界面协调
- 相同位置：都在 ResultPanel 中展示
- 相同风格：使用相同的组件风格和布局
- Tab切换：创建完成后自动切换到结构Tab
9.2 交互协调
- 触发方式：都通过连接树右键菜单触发
- 操作流程：创建 → 查看结构，流程连贯
- 状态管理：使用类似的 composable 模式管理状态
9.3 数据协调
- 数据复用：创建成功后，直接使用表结构查看功能加载新表结构
- API统一：创建和查看使用统一的连接和数据库信息
十、实现优先级
P0（必须实现）
- 在 ResultPanel 中添加"创建"Tab
- useCreateState composable 实现
- MySQL 表创建表单（基本信息、字段列表）
- MySQL 字段添加/删除功能
- MySQL 创建API调用
- 连接树右键菜单添加"新建表"选项
P0.5（核心功能完成后实现）
- MySQL 索引编辑功能
- MySQL SQL预览模式
- MongoDB 集合创建表单
- MongoDB 索引编辑功能
- Redis Key创建表单（支持主要类型）
- 创建成功后自动切换到结构Tab
P1（重要功能）
- 表单验证和错误提示
- 字段类型选择器（带说明）
- 字段上移/下移功能
- 创建成功/失败消息提示
- 清空表单数据逻辑
P2（优化功能）
- SQL预览模式可编辑并同步回表单
- 字段模板（常用字段组合）
- 表名/集合名重复检查
- 创建历史记录（可选）
- 批量创建字段（从CSV导入）
十一、总结
新表创建功能设计遵循以下原则：
- 体验协调：与表结构查看功能使用相同的展示区域和交互方式
- 统一接口：不同数据库类型使用相同的触发方式和展示框架
- 差异化表单：根据数据库类型展示对应的创建表单
- 集成设计：在结果面板中展示，无需弹出窗口，界面更简洁
- 流程连贯：创建完成后自动查看结构，操作流畅
- 可扩展性：组件化设计，便于后续添加新功能
设计优势
- ✅ 无需弹出窗口：在结果面板中展示，界面更简洁
- ✅ 操作连贯：与查询结果、消息、结构在同一区域，切换方便
- ✅ 符合现有架构：扩展 ResultPanel 组件，无需新增复杂组件
- ✅ 状态管理清晰：使用 composable 管理创建数据，易于维护
- ✅ 体验协调：与表结构查看功能使用相同的设计模式
- ✅ 流程顺畅：创建 → 查看结构，无缝衔接
通过以上设计，可以实现一个功能完善、用户体验良好、与现有功能协调的新表创建功能。