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
228
doc/wireframes.md
Normal file
228
doc/wireframes.md
Normal file
@@ -0,0 +1,228 @@
|
||||
# uzdb UI Wireframes
|
||||
|
||||
## Main Application Window
|
||||
|
||||
### 1. Connection Manager (Startup Screen)
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ uzdb - Connect │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────────────────────┐ │
|
||||
│ │ + New Connection │ │
|
||||
│ ├──────────────────────────────────────────────────────┤ │
|
||||
│ │ 🗄️ Local MySQL │ │
|
||||
│ │ localhost:3306 • mysql │ │
|
||||
│ ├──────────────────────────────────────────────────────┤ │
|
||||
│ │ 🐘 Production PostgreSQL │ │
|
||||
│ │ prod-db.example.com:5432 • postgres │ │
|
||||
│ ├──────────────────────────────────────────────────────┤ │
|
||||
│ │ ◪ Local SQLite │ │
|
||||
│ │ ~/data/app.db │ │
|
||||
│ └──────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [New Connection] [Edit] [Delete] [Connect] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 2. Main Application Layout
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────┐
|
||||
│ File Edit View Query Tools Help │
|
||||
├────────────────────────────────────────────────────────────────────┤
|
||||
│ [▶ Run] [💾 Save] [📤 Export] [🔍 Find] [Connection: ▼] │
|
||||
├─────────────┬──────────────────────────────────────────────────────┤
|
||||
│ │ ┌─ Query Editor ──────────────────────────────┐ │
|
||||
│ 🗄️ Database │ │ │ │
|
||||
│ ├─ 🗄️ MySQL │ │ SELECT * FROM users │ │
|
||||
│ │ ├─ 📊 public │ WHERE active = 1; │ │
|
||||
│ │ │ ├─ 📋 users │ │ │
|
||||
│ │ │ ├─ 📋 products │ │ │
|
||||
│ │ │ └─ 📋 orders │ │ │
|
||||
│ │ └─ 📊 information_schema │ │ │
|
||||
│ ├─ 🐘 PostgreSQL│ └─────────────────────────────────────────┘ │
|
||||
│ │ └─ 📊 public │ 127 rows │ 0.045s │
|
||||
│ └─ ◪ SQLite ├──────────────────────────────────────────────────┤
|
||||
│ │ Results │
|
||||
│ Connections │ ┌─────────────────────────────────────────────┐ │
|
||||
│ (drag to add) │ │ id │ name │ email │ active │ │
|
||||
│ │ ├────┼──────────┼────────────────┼───────────┤ │
|
||||
│ │ │ 1 │ Alice │ alice@mail.com │ ✓ │ │
|
||||
│ │ │ 2 │ Bob │ bob@mail.com │ ✓ │ │
|
||||
│ │ │ 3 │ Charlie │ charlie@mail.c │ ✗ │ │
|
||||
│ │ └─────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ [<] [1] [2] [3] [...] [10] [>] Per page: [25▼] │
|
||||
├─────────────┴───────────────────────────────────────────────────┤
|
||||
│ ✓ Connected to MySQL@localhost:3306 │ UTF-8 │ LF │ ins │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3. Query Editor Tab
|
||||
```
|
||||
┌─ Untitled.sql ───────────────────────────────────────────────────┐
|
||||
│ 1 │ SELECT u.id, u.name, COUNT(o.id) as order_count │
|
||||
│ 2 │ FROM users u │
|
||||
│ 3 │ LEFT JOIN orders o ON u.id = o.user_id │
|
||||
│ 4 │ WHERE u.created_at > '2024-01-01' │
|
||||
│ 5 │ GROUP BY u.id, u.name │
|
||||
│ 6 │ HAVING COUNT(o.id) > 5 │
|
||||
│ 7 │ ORDER BY order_count DESC │
|
||||
│ 8 │ LIMIT 100; │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
▶ Run (Ctrl+Enter) │ Explain │ Format │ History │ Snippets
|
||||
```
|
||||
|
||||
### 4. Table Data View
|
||||
```
|
||||
┌─ public.users ───────────────────────────────────────────────────┐
|
||||
│ [Filters] [Sort] [Group By] [Refresh] [Export] [Import] │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ ☑ │ id │ name │ email │ created_at │ [actions] │
|
||||
├───┼─────┼─────────┼─────────────────┼─────────────┼───────────┤
|
||||
│ ✓ │ 1 │ Alice │ alice@mail.com │ 2024-01-15 │ ✏️ 🗑️ │
|
||||
│ ✓ │ 2 │ Bob │ bob@mail.com │ 2024-01-16 │ ✏️ 🗑️ │
|
||||
│ ✓ │ 3 │ Charlie │ charlie@mail.co │ 2024-01-17 │ ✏️ 🗑️ │
|
||||
│ ✓ │ 4 │ Diana │ diana@mail.com │ 2024-01-18 │ ✏️ 🗑️ │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
│ Showing 1-25 of 1,247 rows [First] [Prev] [1] [2] [Next] [Last]│
|
||||
└───────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5. Table Details Panel (Right Sidebar)
|
||||
```
|
||||
┌─ Table Info ─────────────────────────────────┐
|
||||
│ 📋 users │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ Columns (5) │
|
||||
│ ┌──────────────────────────────────────────┐ │
|
||||
│ │ name │ type │ null │ key │ │
|
||||
│ ├──────────────────────────────────────────┤ │
|
||||
│ │ id │ int │ ❌ │ PK │ │
|
||||
│ │ name │ varchar │ ❌ │ │ │
|
||||
│ │ email │ varchar │ ❌ │ UK │ │
|
||||
│ │ created_at │ timestamp │ ✓ │ │ │
|
||||
│ │ active │ boolean │ ❌ │ │ │
|
||||
│ └──────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Indexes (2) │
|
||||
│ ├─ PRIMARY (id) │
|
||||
│ └─ idx_email (email) │
|
||||
│ │
|
||||
│ Foreign Keys (0) │
|
||||
│ │
|
||||
│ Triggers (1) │
|
||||
│ └─ update_timestamp │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 6. New Connection Dialog
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ New Connection [✕] │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Database Type: [MySQL ▼] │
|
||||
│ │
|
||||
│ ┌─ Connection ──────────────────────────────────────────┐ │
|
||||
│ │ Name: [Local Development ] │ │
|
||||
│ │ Host: [localhost ] │ │
|
||||
│ │ Port: [3306 ] │ │
|
||||
│ │ Username: [root ] │ │
|
||||
│ │ Password: [••••••••••••••••• ] 👁 │ │
|
||||
│ │ Database: [ ] │ │
|
||||
│ └───────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ Advanced ────────────────────────────────────────────┐ │
|
||||
│ │ SSL: [▼] │ │
|
||||
│ │ Timeout: [30] seconds │ │
|
||||
│ │ Max connections: [10] │ │
|
||||
│ └───────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [Test Connection] [Cancel] [Save & Connect] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 7. Export Data Dialog
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Export Data [✕] │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Source: [✓ users (entire table) ▼] │
|
||||
│ │
|
||||
│ Format: [CSV Comma-separated (.) ▼] │
|
||||
│ │
|
||||
│ ┌─ Options ────────────────────────────────────────────┐ │
|
||||
│ │ ☑ Include column headers │ │
|
||||
│ │ ☐ Quote all fields │ │
|
||||
│ │ Encoding: [UTF-8 ] │ │
|
||||
│ │ Line endings: [Unix (LF) ▼] │ │
|
||||
│ └──────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Output: (○) Copy to clipboard │
|
||||
│ (●) Save to file │
|
||||
│ [ /home/user/exports/users.csv ] [...] │
|
||||
│ │
|
||||
│ [Cancel] [Export] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 8. Empty State - No Connections
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ │
|
||||
│ 🗄️ │
|
||||
│ │
|
||||
│ No Database Connections │
|
||||
│ │
|
||||
│ Get started by connecting to your first database │
|
||||
│ │
|
||||
│ │
|
||||
│ [+ New Connection] │
|
||||
│ │
|
||||
│ Supported: MySQL, PostgreSQL, SQLite, MariaDB │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Responsive Considerations
|
||||
|
||||
### Small Screens (< 768px)
|
||||
- Sidebar becomes collapsible drawer
|
||||
- Tabs stack vertically
|
||||
- Toolbar items move to overflow menu
|
||||
- Data grid shows horizontal scroll
|
||||
|
||||
### Medium Screens (768px - 1024px)
|
||||
- Sidebar can be collapsed
|
||||
- Single query editor tab visible
|
||||
- Reduced panel padding
|
||||
|
||||
---
|
||||
|
||||
## Component States
|
||||
|
||||
### Button States
|
||||
- **Default**: Primary color background
|
||||
- **Hover**: Darken 10%
|
||||
- **Active**: Darken 20%, slight inset shadow
|
||||
- **Disabled**: 50% opacity, not clickable
|
||||
- **Loading**: Spinner replaces icon/text
|
||||
|
||||
### Input States
|
||||
- **Default**: Light border
|
||||
- **Focus**: Primary color ring
|
||||
- **Error**: Red border + error message
|
||||
- **Disabled**: Gray background, not editable
|
||||
- **Read-only**: Subtle background, copyable
|
||||
|
||||
### Connection Status
|
||||
- **Connected**: Green dot + "Connected"
|
||||
- **Connecting**: Spinning loader
|
||||
- **Disconnected**: Gray dot + "Disconnected"
|
||||
- **Error**: Red dot + error tooltip
|
||||
Reference in New Issue
Block a user