feat: Initial project setup - uzdb database client
Initialize complete Wails (Go + React) database management tool
## Project Structure
- Frontend: React 18 + TypeScript + Vite
- Backend: Go 1.23 + Gin + GORM + SQLite + Zap
- Desktop: Wails v2
## Features Implemented
### UI/UX Design
- Complete design system with colors, typography, spacing
- Wireframes for all major screens
- User flows and interaction specifications
- Layout design with 3-panel architecture
### Frontend Components
- ConnectionPanel: Database connection sidebar with status indicators
- AppLayout: Resizable main layout framework
- MenuBar & ToolBar: Navigation and quick actions
- QueryEditor: SQL editor with syntax highlighting support
- DataGrid: Sortable, filterable, editable data table
- TableStructure: Table metadata viewer
- StatusBar: Connection info and query statistics
- StatusIndicator: Animated connection status component
### Backend Services
- Wails bindings: 15+ methods exposed to frontend
- Connection management: CRUD operations with connection pooling
- Query execution: SQL execution with result handling
- Table metadata: Schema introspection
- Encryption service: AES-256-GCM password encryption
- HTTP API: RESTful endpoints for debugging/integration
### Documentation
- Design system specification
- Feature requirements document
- Wireframes and user flows
- API testing guide
- Project README
## Technical Details
- Password encryption using AES-256-GCM
- Thread-safe connection manager with sync.RWMutex
- Unified error handling and logging
- Clean architecture with dependency injection
- SQLite for storing user data (connections, history)
🤖 Generated with Qoder
This commit is contained in:
loveuer
691
doc/layout-design.md
Normal file
691
doc/layout-design.md
Normal file
@@ -0,0 +1,691 @@
|
||||
# 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) - 用户流程
|
||||
Reference in New Issue
Block a user