# 新表创建功能设计 **设计日期**：2025-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` - **高度**：跟随结果面板高度（可调整，默认 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（扩展） ```typescript interface Props { // ... 现有 props createInfo?: { connectionId: number database: string dbType: 'mysql' | 'mongo' | 'redis' } | null // 创建信息，null 表示不显示创建Tab } ``` #### 新增 Composable: useCreateState.ts ```typescript 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 调用 ```typescript // 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 触发创建 1. **从连接树触发**： - 右键菜单 → "新建表"/"新建集合"/"新建Key" - 或点击数据库节点操作按钮 2. **参数传递**： - 从节点数据获取 `connectionId`、`database`、`dbType` - 通过事件传递给 `index.vue` - `index.vue` 调用 `useCreateState.startCreate()` 3. **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.ts` composable 管理创建数据状态 ### 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（必须实现） 1. 在 ResultPanel 中添加"创建"Tab 2. useCreateState composable 实现 3. MySQL 表创建表单（基本信息、字段列表） 4. MySQL 字段添加/删除功能 5. MySQL 创建API调用 6. 连接树右键菜单添加"新建表"选项 ### P0.5（核心功能完成后实现） 1. MySQL 索引编辑功能 2. MySQL SQL预览模式 3. MongoDB 集合创建表单 4. MongoDB 索引编辑功能 5. Redis Key创建表单（支持主要类型） 6. 创建成功后自动切换到结构Tab ### P1（重要功能） 1. 表单验证和错误提示 2. 字段类型选择器（带说明） 3. 字段上移/下移功能 4. 创建成功/失败消息提示 5. 清空表单数据逻辑 ### P2（优化功能） 1. SQL预览模式可编辑并同步回表单 2. 字段模板（常用字段组合） 3. 表名/集合名重复检查 4. 创建历史记录（可选） 5. 批量创建字段（从CSV导入） --- ## 十一、总结 新表创建功能设计遵循以下原则： 1. **体验协调**：与表结构查看功能使用相同的展示区域和交互方式 2. **统一接口**：不同数据库类型使用相同的触发方式和展示框架 3. **差异化表单**：根据数据库类型展示对应的创建表单 4. **集成设计**：在结果面板中展示，无需弹出窗口，界面更简洁 5. **流程连贯**：创建完成后自动查看结构，操作流畅 6. **可扩展性**：组件化设计，便于后续添加新功能 ### 设计优势 - ✅ **无需弹出窗口**：在结果面板中展示，界面更简洁 - ✅ **操作连贯**：与查询结果、消息、结构在同一区域，切换方便 - ✅ **符合现有架构**：扩展 ResultPanel 组件，无需新增复杂组件 - ✅ **状态管理清晰**：使用 composable 管理创建数据，易于维护 - ✅ **体验协调**：与表结构查看功能使用相同的设计模式 - ✅ **流程顺畅**：创建 → 查看结构，无缝衔接 通过以上设计，可以实现一个功能完善、用户体验良好、与现有功能协调的新表创建功能。