5a83e86bc9
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
229 lines
17 KiB
Markdown
229 lines
17 KiB
Markdown
# 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
|