# uzdb 布局设计文档

## Overview

本文档详细描述 uzdb 数据库管理工具的整体布局设计，包括左侧连接面板、右侧功能区域的界面设计和交互规范。

---

## 整体布局架构

### 经典两栏布局

```
┌─────────────────────────────────────────────────────────────────────┐
│  ☰ File    Edit    View    Query    Tools    Help                   │ ← 菜单栏
├─────────────────────────────────────────────────────────────────────┤
│  [▶ Run] [💾 Save] [📤 Export] [🔍 Find]      [🗄️ MySQL @ localhost ▼] │ ← 工具栏
├──────────────────┬──────────────────────────────────────────────────┤
│                  │  ┌─ 📑 query_1.sql ─────────────────────────┐   │
│  🗄️ Connections  │  │                                           │   │
│  ├─ ⚫ MySQL     │  │  SELECT * FROM users                     │   │
│  │  ├─ 🔵 public │  │  WHERE active = true;                    │   │
│  │  │  ├─ 📋 users                      │                       │   │
│  │  │  ├─ 📋 products                   │                       │   │
│  │  │  └─ 📋 orders                     │                       │   │
│  │  └─ 📊 information_schema            │                       │   │
│  ├─ ⚫ PostgreSQL│  └───────────────────────────────────────────┘   │
│  │  └─ 🔵 public │  ┌─ Results ────────────────────────────────┐   │
│  └─ ⚫ SQLite    │  │ id │ name  │ email           │ active   │   │
│                  │  ├────┼───────┼─────────────────┼──────────┤   │
│  [+ New Conn]    │  │ 1  │ Alice │ alice@mail.com  │ ✓        │   │
│                  │  │ 2  │ Bob   │ bob@mail.com    │ ✓        │   │
│                  │  │ 3  │ Carol │ carol@mail.com  │ ✗        │   │
│                  │  └───────────────────────────────────────────┘   │
│                  │  [◀] [1] [2] [3] [▶]  Per page: [25▼]  127 rows  │
├──────────────────┴──────────────────────────────────────────────────┤
│  ✓ Connected to MySQL@localhost:3306    │  UTF-8  │  LF  │  ins   │ ← 状态栏
└─────────────────────────────────────────────────────────────────────┘
```

### 布局尺寸规范

| 区域 | 默认宽度/高度 | 可调节范围 | 说明 |
|------|--------------|-----------|------|
| 左侧面板 | 240px | 180px - 400px | 可拖拽调节，支持折叠 |
| 菜单栏 | 32px (高) | 固定 | 标准菜单高度 |
| 工具栏 | 40px (高) | 固定 | 包含快捷操作 |
| 状态栏 | 28px (高) | 固定 | 显示连接和信息状态 |
| Tab 标签栏 | 36px (高) | 固定 | 每个标签页高度 |

---

## 左侧连接面板设计

### 1. 面板结构

```
┌─────────────────────────────┐
│  🗄️ Connections       [⚙️]  │ ← 面板标题 + 设置按钮
├─────────────────────────────┤
│  🔵 Active Connection       │ ← 当前活跃连接（高亮）
│  ├─ 🗄️ database_name       │
│  │  ├─ 📊 schema_name      │
│  │  │  ├─ 📋 table1       │
│  │  │  ├─ 📋 table2       │
│  │  │  └─ 📋 table3       │
│  │  └─ 📊 another_schema   │
│  ├─ 📋 views (5)           │
│  ├─ ⚡ functions (12)      │
│  └─ 📝 procedures (3)      │
├─────────────────────────────┤
│  ⚫ saved_connection_1      │ ← 已保存但未连接
│  ⚫ saved_connection_2      │
│  ⚪ saved_connection_3      │ ← 连接错误
├─────────────────────────────┤
│  [+ New Connection]         │ ← 新建连接按钮
└─────────────────────────────┘
```

### 2. 连接状态指示器

#### 状态类型与视觉表现

| 状态 | 图标 | 颜色 | 说明 | 交互 |
|------|------|------|------|------|
| **已连接** | `🔵` / `●` | `#10b981` (绿色) | 连接成功且可用 | 可展开查看结构 |
| **使用中** | `🟢` / `◉` | `#3b82f6` (蓝色) | 当前正在使用的连接 | 高亮显示，带光晕效果 |
| **未连接** | `⚫` / `○` | `#94a3b8` (灰色) | 已保存但未建立连接 | 双击或点击展开连接 |
| **连接中** | `⟳` / `⌛` | `#f59e0b` (橙色) | 正在建立连接 | 旋转动画，不可交互 |
| **错误** | `⚪` / `✕` | `#ef4444` (红色) | 连接失败 | 悬停显示错误信息 |

#### CSS 实现示例

```css
/* 状态指示器基础样式 */
.connection-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  transition: all 0.15s ease-in-out;
}

/* 各状态样式 */
.status-connected {
  background-color: var(--success);
  box-shadow: 0 0 4px var(--success);
}

.status-active {
  background-color: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  animation: pulse 2s infinite;
}

.status-disconnected {
  background-color: var(--text-muted);
  border: 1px solid var(--border);
}

.status-connecting {
  border: 2px solid var(--warning);
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

.status-error {
  background-color: var(--error);
  cursor: help;
}

/* 动画定义 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
```

### 3. 数据库类型图标

| 数据库类型 | 图标 | 颜色 | 使用场景 |
|-----------|------|------|----------|
| MySQL | `🗄️` / `🐬` | `#00758f` | MySQL 连接 |
| PostgreSQL | `🐘` / `🗄️` | `#336791` | PostgreSQL 连接 |
| SQLite | `◪` / `🗄️` | `#003b57` | SQLite 连接 |
| MariaDB | `🗄️` | `#003541` | MariaDB 连接 |

### 4. 交互方式

#### 单击交互
- **单击连接名**: 选中连接，如果未连接则尝试连接
- **单击展开箭头**: 展开/折叠数据库结构树
- **单击状态图标**: 显示连接详情 tooltip

#### 双击交互
- **双击连接**: 快速连接/断开连接
- **双击数据库/表**: 在新标签页打开数据浏览或结构查看

#### 右键菜单

```
┌─────────────────────────────┐
│  🗄️ MySQL @ localhost       │
├─────────────────────────────┤
│  ▶ Connect                  │
│  ▶ Disconnect               │
│  ├───────────────────────── │
│  ▶ Edit Connection...       │
│  ▶ Duplicate Connection     │
│  ▶ Refresh Schema           │
│  ├───────────────────────── │
│  ▶ Test Connection          │
│  ▶ Copy Connection String   │
│  ├───────────────────────── │
│  ▶ Delete Connection        │
└─────────────────────────────┘
```

#### 键盘导航
| 快捷键 | 功能 |
|--------|------|
| `↑` / `↓` | 上下移动选择 |
| `→` | 展开节点 / 连接数据库 |
| `←` | 折叠节点 |
| `Enter` | 确认操作 / 连接 |
| `Space` | 切换展开/折叠 |
| `F2` | 重命名连接 |
| `Delete` | 删除连接（需确认） |
| `Ctrl+R` | 刷新 Schema |
| `Context Menu` | 显示右键菜单 |

### 5. 新建连接按钮区域

```
┌─────────────────────────────┐
│                             │
│  ┌───────────────────────┐  │
│  │  + New Connection     │  │ ← 主按钮
│  └───────────────────────┘  │
│                             │
│  Recent:                    │
│  • MySQL @ localhost       │
│  • PG @ prod-db            │
│                             │
└─────────────────────────────┘
```

---

## 右侧功能区域设计

### 1. SQL 编辑器模块

```
┌─ 📑 unsaved_query.sql ───────────────────────────────────────────┐
│  [×]                                                              │
├──────────────────────────────────────────────────────────────────┤
│  1 │ -- Get active users with their orders                       │
│  2 │ SELECT                                                       │
│  3 │   u.id,                                                      │
│  4 │   u.name,                                                    │
│  5 │   u.email,                                                   │
│  6 │   COUNT(o.id) as order_count                                 │
│  7 │ FROM users u                                                 │
│  8 │ LEFT JOIN orders o ON u.id = o.user_id                       │
│  9 │ WHERE u.active = true                                        │
│ 10 │   AND u.created_at >= '2024-01-01'                           │
│ 11 │ GROUP BY u.id, u.name, u.email                               │
│ 12 │ HAVING COUNT(o.id) > 0                                       │
│ 13 │ ORDER BY order_count DESC                                    │
│ 14 │ LIMIT 100;                                                   │
└──────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────┐
│  ▶ Run (Ctrl+Enter)  │  ▶ Explain  │  ✨ Format  │  📜 History  │
│  💾 Save  │  📤 Export Results  │  🔍 Find in Query              │
└──────────────────────────────────────────────────────────────────┘
```

#### SQL 编辑器特性

| 功能 | 描述 | 实现建议 |
|------|------|----------|
| **语法高亮** | SQL 关键字、字符串、注释、函数等 | Monaco Editor / CodeMirror |
| **智能提示** | 表名、列名、函数自动补全 | 基于当前连接 schema |
| **代码格式化** | 美化 SQL 格式 | sql-formatter 库 |
| **多标签支持** | 同时编辑多个查询 | Tab 组件管理 |
| **查询历史** | 记录执行过的 SQL | 本地存储 + 搜索 |
| **代码片段** | 常用 SQL 模板快速插入 | 预定义 snippets |

#### 执行结果展示区

```
┌─ Results ────────────────────────────────────────────────────────┐
│  Query executed successfully in 0.045s (127 rows affected)       │
├──────────────────────────────────────────────────────────────────┤
│  [Filters ▼]  [Sort ▼]  [Group By ▼]  [🔄 Refresh]  [📤 Export] │
├──────────────────────────────────────────────────────────────────┤
│  id  │ name    │ email           │ created_at  │ active │ ...   │
├─────┼─────────┼─────────────────┼─────────────┼────────┼───────┤
│  1  │ Alice   │ alice@mail.com  │ 2024-01-15  │   ✓    │  ...  │
│  2  │ Bob     │ bob@mail.com    │ 2024-01-16  │   ✓    │  ...  │
│  3  │ Charlie │ carol@mail.com  │ 2024-01-17  │   ✗    │  ...  │
│  4  │ Diana   │ diana@mail.com  │ 2024-01-18  │   ✓    │  ...  │
│  5  │ Eve     │ eve@mail.com    │ 2024-01-19  │   ✓    │  ...  │
└──────────────────────────────────────────────────────────────────┘
│  Showing 1-25 of 127 rows    [◀◀] [◀] [1] [2] [3] [...] [▶] [▶▶] │
│                              Per page: [25 ▼]  [📋 Copy Row]     │
└──────────────────────────────────────────────────────────────────┘
```

### 2. 数据浏览模块

```
┌─ 📋 public.users ────────────────────────────────────────────────┐
│  [×]                                                              │
├──────────────────────────────────────────────────────────────────┤
│  Table: users  │  Database: public  │  Connection: MySQL@local  │
├──────────────────────────────────────────────────────────────────┤
│  [Data]  [Structure]  [Indexes]  [Foreign Keys]  [Triggers]     │
├──────────────────────────────────────────────────────────────────┤
│  [✏️ Add Row]  [🗑️ Delete]  [🔍 Filter]  [🔄 Refresh]  [📤 Export]│
├──────────────────────────────────────────────────────────────────┤
│  ☐ │ id  │ name    │ email           │ created_at  │ active │ ✎ │
├────┼─────┼─────────┼─────────────────┼─────────────┼────────┼───┤
│  ☐ │  1  │ Alice   │ alice@mail.com  │ 2024-01-15  │   ✓    │ ✎ │
│  ☐ │  2  │ Bob     │ bob@mail.com    │ 2024-01-16  │   ✓    │ ✎ │
│  ☐ │  3  │ Charlie │ carol@mail.com  │ 2024-01-17  │   ✗    │ ✎ │
│  ☐ │  4  │ Diana   │ diana@mail.com  │ 2024-01-18  │   ✓    │ ✎ │
└──────────────────────────────────────────────────────────────────┘
│  Selected: 0 rows    Total: 1,247 rows                          │
│  [◀◀] [◀] [1] [2] [3] [...] [▶] [▶▶]  Per page: [50 ▼]          │
└──────────────────────────────────────────────────────────────────┘
```

#### 数据编辑功能

| 操作 | 交互方式 | 说明 |
|------|----------|------|
| **单元格编辑** | 双击单元格 | 根据数据类型弹出相应编辑器 |
| **行选择** | 点击复选框 | 支持多选批量操作 |
| **添加行** | 点击"Add Row" | 在表格末尾添加新行 |
| **删除行** | 选择后点删除 | 需要确认对话框 |
| **撤销/重做** | Ctrl+Z / Ctrl+Y | 支持多级撤销 |

#### 单元格编辑器类型

| 数据类型 | 编辑器 | 说明 |
|----------|--------|------|
| VARCHAR/TEXT | 文本输入框 | 支持多行编辑 |
| INT/BIGINT | 数字输入框 | 整数验证 |
| DECIMAL/FLOAT | 数字输入框 | 小数精度控制 |
| DATE | 日期选择器 | 日历控件 |
| DATETIME/TIMESTAMP | 日期时间选择器 | 包含时间 |
| BOOLEAN | 复选框 | 勾选/取消 |
| ENUM | 下拉选择框 | 预定义选项 |
| JSON | JSON 编辑器 | 语法高亮 |
| BLOB | 文件上传/预览 | 二进制数据处理 |

### 3. 表结构查看模块

```
┌─ 📋 Table Structure: users ──────────────────────────────────────┐
│  [×]                                                              │
├──────────────────────────────────────────────────────────────────┤
│  [Data]  [Structure]  [Indexes]  [Foreign Keys]  [Triggers]     │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌─ Columns (5) ─────────────────────────────────────────────┐  │
│  │  Name        │ Type         │ Null │ Key │ Default │ Extra │  │
│  ├────────────────────────────────────────────────────────────┤  │
│  │  id          │ INT          │  ❌  │ PK  │         │ auto_inc│ │
│  │  name        │ VARCHAR(100) │  ❌  │     │         │        │  │
│  │  email       │ VARCHAR(255) │  ❌  │ UK  │         │        │  │
│  │  created_at  │ TIMESTAMP    │  ✓  │     │ NOW()   │        │  │
│  │  active      │ BOOLEAN      │  ❌  │     │ TRUE    │        │  │
│  └────────────────────────────────────────────────────────────┘  │
│                                                                  │
│  ┌─ Indexes (2) ──────────────────────────────────────────────┐  │
│  │  Name           │ Type   │ Columns    │ Unique │ Method   │  │
│  ├────────────────────────────────────────────────────────────┤  │
│  │  PRIMARY        │ BTREE  │ id         │   ✓    │ BTREE    │  │
│  │  idx_email      │ BTREE  │ email      │   ✓    │ BTREE    │  │
│  └────────────────────────────────────────────────────────────┘  │
│                                                                  │
│  ┌─ Foreign Keys (1) ─────────────────────────────────────────┐  │
│  │  Name           │ Column    │ References   │ On Update │ On Delete││
│  ├────────────────────────────────────────────────────────────┤  │
│  │  fk_user_role   │ role_id   │ roles(id)    │ CASCADE   │ SET NULL ││
│  └────────────────────────────────────────────────────────────┘  │
│                                                                  │
│  ┌─ Table Info ───────────────────────────────────────────────┐  │
│  │  Engine: InnoDB  │  Collation: utf8mb4_unicode_ci          │  │
│  │  Rows: 1,247     │  Size: 256 KB                           │  │
│  │  Auto Increment: 1248                                       │  │
│  └────────────────────────────────────────────────────────────┘  │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘
```

### 4. 其他功能模块

#### 4.1 查询历史

```
┌─ 📜 Query History ───────────────────────────────────────────────┐
│  [×]                                                              │
├──────────────────────────────────────────────────────────────────┤
│  🔍 Search history...                         [🗑️ Clear All]    │
├──────────────────────────────────────────────────────────────────┤
│  Today                                                          │
│  ├─ SELECT * FROM users WHERE active = true... (10:45 AM)       │
│  ├─ UPDATE products SET price = price * 1.1... (10:32 AM)       │
│  └─ DELETE FROM temp_data WHERE created_at < ... (09:15 AM)     │
│                                                                  │
│  Yesterday                                                      │
│  ├─ CREATE INDEX idx_email ON users(email)... (03:22 PM)        │
│  └─ SELECT COUNT(*) FROM orders... (02:10 PM)                   │
│                                                                  │
│  Last 7 Days                                                    │
│  └─ ...                                                         │
└──────────────────────────────────────────────────────────────────┘
```

#### 4.2 导出向导

```
┌─ Export Data ────────────────────────────────────────────────────┐
│                                                              [×] │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  Source: [✓ users (entire table)                     ▼]         │
│                                                                  │
│  Format: [CSV Comma-separated (,)                    ▼]         │
│                                                                  │
│  ┌─ Options ─────────────────────────────────────────────────┐  │
│  │  ☑ Include column headers                                 │  │
│  │  ☐ Quote all fields                                       │  │
│  │  Delimiter: [, ▼]  Quote: [" ▼]  Escape: [\ ▼]           │  │
│  │  Encoding: [UTF-8                              ]          │  │
│  │  Line endings: [Unix (LF)                      ▼]         │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                  │
│  Output: (○) Copy to clipboard                                  │
│          (●) Save to file                                       │
│          [ /home/user/exports/users.csv             ]  [Browse] │
│                                                                  │
│  Preview (first 5 rows):                                        │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ id,name,email,created_at,active                          │  │
│  │ 1,Alice,alice@mail.com,2024-01-15,true                  │  │
│  │ 2,Bob,bob@mail.com,2024-01-16,true                      │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                  │
│              [Cancel]          [Export]                         │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘
```

---

## 状态栏设计规范

### 状态栏布局

```
┌─────────────────────────────────────────────────────────────────┐
│  [状态]  [连接信息]           │  [编码]  │  [换行]  │  [模式]  │
└─────────────────────────────────────────────────────────────────┘
```

### 状态指示

| 区域 | 内容 | 示例 |
|------|------|------|
| **连接状态** | 当前连接状态和详情 | `✓ Connected to MySQL@localhost:3306` |
| **查询信息** | 执行时间和影响行数 | `✓ 127 rows in 0.045s` |
| **错误信息** | 错误描述 | `✕ Error: Connection timeout` |
| **编码格式** | 文件/连接编码 | `UTF-8` |
| **换行符** | 行结束符类型 | `LF` / `CRLF` |
| **编辑模式** | 编辑器模式 | `ins` (插入) / `ovr` (覆盖) |

### 状态栏颜色

| 状态 | 背景色 | 文字色 | 图标 |
|------|--------|--------|------|
| 正常 | `#f8fafc` | `#64748b` | - |
| 成功 | `#d1fae5` | `#065f46` | `✓` |
| 警告 | `#fef3c7` | `#92400e` | `⚠` |
| 错误 | `#fee2e2` | `#991b1b` | `✕` |
| 信息 | `#dbeafe` | `#1e40af` | `ℹ` |

---

## 响应式设计

### 断点定义

| 断点 | 宽度范围 | 布局调整 |
|------|----------|----------|
| **Small** | < 768px | 侧边栏隐藏为抽屉，单栏布局 |
| **Medium** | 768px - 1024px | 侧边栏可折叠，双栏布局 |
| **Large** | > 1024px | 完整双栏布局，所有功能可见 |

### 小屏幕适配

```
┌─────────────────────────────────────┐
│  ☰  uzdb                      [⚙️] │ ← 汉堡菜单
├─────────────────────────────────────┤
│  [▶] [💾] [📤] [🔍]           [▼]  │ ← 简化 toolbar
├─────────────────────────────────────┤
│                                     │
│  [全屏编辑器/数据网格]              │
│                                     │
│                                     │
├─────────────────────────────────────┤
│  ✓ Connected    │  UTF-8  │  ins   │
└─────────────────────────────────────┘
```

---

## 主题与配色

### 浅色主题（默认）

参考 `/root/codes/project/self/uzdb/doc/design-system.md` 中的颜色定义：

| 元素 | 颜色值 | 用途 |
|------|--------|------|
| 主背景 | `#ffffff` | 主内容区域 |
| 次级背景 | `#f8fafc` | 侧边栏、面板 |
| 第三背景 | `#f1f5f9` | 卡片、分组 |
| 边框 | `#e2e8f0` | 分隔线、边框 |
| 主文字 | `#0f172a` | 标题、正文 |
| 次级文字 | `#64748b` | 标签、说明 |
| 强调色 | `#3b82f6` | 链接、按钮、激活状态 |

### 深色主题（未来扩展）

预留深色主题支持，使用 CSS 变量实现主题切换。

---

## 交互细节规范

### 1. 悬停效果

| 元素 | 悬停效果 | 过渡时间 |
|------|----------|----------|
| 按钮 | 背景变深 10% | 150ms |
| 链接 | 下划线 + 强调色 | 150ms |
| 表格行 | 背景色 `#f1f5f9` | 100ms |
| 树节点 | 背景色 `#f1f5f9` | 100ms |

### 2. 焦点状态

所有可交互元素必须具有可见的焦点环：

```css
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
```

### 3. 加载状态

| 场景 | 加载指示 | 说明 |
|------|----------|------|
| 连接建立 | 旋转 Spinner | 状态变为"连接中" |
| 查询执行 | 进度条 + Spinner | 显示执行进度 |
| 数据加载 | Skeleton 骨架屏 | 渐进式加载 |
| 大数据导出 | 进度百分比 | 可取消操作 |

### 4. 空状态

```
┌─────────────────────────────────────┐
│                                     │
│           🗄️                        │
│                                     │
│     No Database Connections         │
│                                     │
│  Get started by connecting to your  │
│         first database              │
│                                     │
│      [+ New Connection]             │
│                                     │
│  Supported: MySQL, PostgreSQL,      │
│           SQLite, MariaDB           │
│                                     │
└─────────────────────────────────────┘
```

### 5. 错误提示

- **Inline 错误**: 表单字段下方红色文字
- **Toast 通知**: 右上角弹出提示，3 秒自动消失
- **模态对话框**: 严重错误需要用户确认

---

## 无障碍设计 (Accessibility)

### WCAG 2.1 AA 合规

- ✅ 对比度至少 4.5:1
- ✅ 键盘导航支持
- ✅ 屏幕阅读器标签
- ✅ 焦点指示器可见
- ✅ 可调整字体大小（最高 200%）

### 键盘快捷键总览

| 快捷键 | 功能 | 作用域 |
|--------|------|--------|
| `Ctrl+Enter` | 执行查询 | SQL 编辑器 |
| `Ctrl+S` | 保存 | 全局 |
| `Ctrl+N` | 新建连接 | 全局 |
| `Ctrl+F` | 查找 | 编辑器/数据网格 |
| `Ctrl+Z` | 撤销 | 编辑器 |
| `Ctrl+Y` | 重做 | 编辑器 |
| `Ctrl+W` | 关闭标签 | 标签页 |
| `F2` | 重命名 | 树节点 |
| `F5` | 刷新 | 全局 |
| `Delete` | 删除 | 选中项 |
| `Esc` | 取消/关闭 | 模态框 |

---

## 性能优化建议

### 1. 虚拟滚动

对于大数据集（>100 行），使用虚拟滚动技术：
- 只渲染可见区域的数据
- 滚动时动态加载数据块
- 保持滚动条总长度正确

### 2. 懒加载

- 树形结构按需加载子节点
- 图片/图标延迟加载
- 非关键组件异步加载

### 3. 缓存策略

- 查询结果短期缓存（5 分钟）
- Schema 信息中期缓存（30 分钟）
- 连接信息长期缓存（直到断开）

---

## 开发实现建议

### 推荐组件库

| 组件类型 | 推荐库 | 说明 |
|----------|--------|------|
| UI 组件 | Radix UI / Headless UI | 无样式组件，灵活定制 |
| 数据网格 | TanStack Table / AG Grid | 高性能表格 |
| 代码编辑 | Monaco Editor / CodeMirror | SQL 语法支持 |
| 图表 | Recharts / Chart.js | 数据统计展示 |
| 图标 | Lucide Icons / Heroicons | 一致风格 |

### Wails 集成要点

1. **前后端通信**: 使用 Wails Events 实现实时通知
2. **状态管理**: Zustand / Jotai 轻量级方案
3. **路由**: 单页应用，基于状态的视图切换
4. **样式**: TailwindCSS + CSS Variables 主题系统

---

## 附录：组件层级结构

```
App
├── MenuBar
├── ToolBar
├── MainContent
│   ├── Sidebar
│   │   ├── ConnectionPanel
│   │   │   ├── ConnectionHeader
│   │   │   ├── ConnectionList
│   │   │   │   └── ConnectionItem
│   │   │   │       ├── StatusIndicator
│   │   │   │       ├── ConnectionName
│   │   │   │       └── ContextMenu
│   │   │   └── NewConnectionButton
│   │   └── SchemaExplorer
│   │       └── SchemaTree
│   └── Workspace
│       ├── TabBar
│       └── TabContent
│           ├── SQLEditor
│           │   ├── EditorToolbar
│           │   ├── CodeEditor
│           │   └── ResultsPanel
│           ├── DataTable
│           │   ├── TableToolbar
│           │   ├── DataGrid
│           │   └── Pagination
│           └── TableStructure
│               ├── StructureTabs
│               └── StructureContent
└── StatusBar
```

---

## 版本历史

| 版本 | 日期 | 作者 | 变更说明 |
|------|------|------|----------|
| 1.0 | 2026-03-29 | Design Team | 初始版本，完整布局设计 |

---

## 参考文档

- [Design System](./design-system.md) - 视觉设计规范
- [Wireframes](./wireframes.md) - 原始线框图
- [Features](./features.md) - 功能规格说明
- [User Flows](./user-flows.md) - 用户流程