绝尘
a5d30684ed
- 拆分 FileSystem.vue 为模块化组件架构 - 新增 Markdown Mermaid 图表渲染支持 - 新增 180+ 编程语言代码高亮 - 修复编辑/预览模式切换渲染问题 - 优化亮色/暗色模式主题适配 - 新增 TypeScript 类型定义
1109 lines
77 KiB
Markdown
1109 lines
77 KiB
Markdown
# 新表创建功能设计
|
||
|
||
**设计日期**：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`
|
||
- **高度**：跟随结果面板高度（可调整，默认 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 管理创建数据，易于维护
|
||
- ✅ **体验协调**：与表结构查看功能使用相同的设计模式
|
||
- ✅ **流程顺畅**：创建 → 查看结构，无缝衔接
|
||
|
||
通过以上设计，可以实现一个功能完善、用户体验良好、与现有功能协调的新表创建功能。
|