chore: bootstrap independent git workflow
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Paperclip CTO
40
gui/README.md
Normal file
40
gui/README.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# GUI Foundation Artifacts
|
||||
|
||||
本目录用于存放 `CMP-9` 的未来桌面端 GUI 基线产物，而不是正式应用代码。
|
||||
|
||||
## 当前产物
|
||||
|
||||
- `desktop-foundation.md`：信息架构、布局方向、组件清单、契约要求和 UI/UX 建议
|
||||
- `prototype/index.html`：最小可见工作台原型
|
||||
- `prototype/styles.css`：原型样式
|
||||
- `prototype/app.js`：原型内交互
|
||||
- `preview-server.mjs`：零依赖本地预览服务
|
||||
|
||||
## 查看方式
|
||||
|
||||
### 方式一：直接打开
|
||||
|
||||
直接用浏览器打开 `gui/prototype/index.html`。
|
||||
|
||||
### 方式二：启动本地预览
|
||||
|
||||
在项目根目录执行：
|
||||
|
||||
```bash
|
||||
node gui/preview-server.mjs
|
||||
```
|
||||
|
||||
然后访问：
|
||||
|
||||
```text
|
||||
http://127.0.0.1:4173
|
||||
```
|
||||
|
||||
## 界面验收
|
||||
|
||||
验收人应重点确认：
|
||||
|
||||
1. 是否能看出连接管理、schema browser、query editor、results table、export feedback 的稳定分区
|
||||
2. 布局是否体现“工作台”而不是通用 dashboard
|
||||
3. 状态、错误、执行反馈是否一眼可见
|
||||
4. 文档中的后端契约需求是否能映射到 CLI 已定义产品概念
|
||||
291
gui/desktop-foundation.md
Normal file
291
gui/desktop-foundation.md
Normal file
@@ -0,0 +1,291 @@
|
||||
# dbtool-cli-v1 Future Desktop GUI Foundation
|
||||
|
||||
日期：2026-03-25
|
||||
作者：Senior Frontend Engineer
|
||||
对应 issue：`CMP-9`
|
||||
|
||||
## 1. 当前前端基线评估
|
||||
|
||||
### 真实现状
|
||||
|
||||
- 当前仓库没有前端入口，也没有任何展示层基础。
|
||||
- 当前不存在 `package.json`、React 工程、桌面壳、页面路由、组件目录或样式系统。
|
||||
- 当前项目仍以 CLI V1 为主路径，GUI 只允许做未来方向基线，不进入本期交付主链路。
|
||||
|
||||
### 结论
|
||||
|
||||
- GUI 第一轮最合理的交付形态应是“信息架构 + 组件边界 + 契约清单 + 静态原型”。
|
||||
- 不应在本 issue 中直接引入 Electron、Tauri、React 或完整桌面工程。
|
||||
- 后续 GUI 项目启动时，推荐使用 React + shadcn/ui + Tailwind CSS，并以本文件作为产品层输入。
|
||||
|
||||
## 2. 首版 UI/UX 范围建议
|
||||
|
||||
首版未来桌面端 GUI 建议仅覆盖一个高价值工作台，而不是多页面堆叠：
|
||||
|
||||
1. **Connection Manager**
|
||||
- 展示已保存连接、最近连接、驱动类型与连接健康状态
|
||||
- 支持新建连接、测试连接、进入工作台
|
||||
2. **Database Workspace**
|
||||
- 左侧 schema browser
|
||||
- 中间 query editor + execution toolbar
|
||||
- 下方 results / history / export 分页区
|
||||
- 右侧 inspector 展示连接、对象和执行详情
|
||||
3. **Execution Feedback**
|
||||
- 展示执行中、成功、失败、空结果、已导出等状态
|
||||
4. **Export Flow**
|
||||
- 选择格式、目标路径、覆盖提醒、导出结果提示
|
||||
|
||||
### 当前刻意不做
|
||||
|
||||
- dashboard 首页
|
||||
- 图表和 BI 视图
|
||||
- AI 助手面板
|
||||
- migration / schema editing
|
||||
- 多窗口复杂工作流
|
||||
|
||||
## 3. 信息架构
|
||||
|
||||
```text
|
||||
Desktop GUI
|
||||
├─ Connection Manager
|
||||
│ ├─ Saved Connections
|
||||
│ ├─ New Connection
|
||||
│ └─ Test / Open Workspace
|
||||
└─ Workspace
|
||||
├─ Schema Browser
|
||||
│ ├─ Schemas
|
||||
│ ├─ Tables / Views
|
||||
│ └─ Columns
|
||||
├─ Query Workbench
|
||||
│ ├─ Query Tabs
|
||||
│ ├─ Execution Toolbar
|
||||
│ └─ SQL Editor
|
||||
├─ Result Region
|
||||
│ ├─ Results Table
|
||||
│ ├─ Query History
|
||||
│ └─ Export Status
|
||||
└─ Inspector
|
||||
├─ Connection Summary
|
||||
├─ Object Metadata
|
||||
└─ Execution Detail / Error
|
||||
```
|
||||
|
||||
## 4. 主工作区布局方向
|
||||
|
||||
### Layout Principle
|
||||
|
||||
- 使用“三栏 + 底部结果区”的桌面工作台布局。
|
||||
- 结构重于装饰，让 schema、SQL、结果和状态成为主视觉主体。
|
||||
- 避免通用 SaaS 卡片拼贴，不引入噪音型 dashboard 模块。
|
||||
|
||||
### 推荐布局
|
||||
|
||||
```text
|
||||
┌────────────────────────────────────────────────────────────────────┐
|
||||
│ App Header / Connection Switcher / Global Actions │
|
||||
├──────────────┬─────────────────────────────────────┬───────────────┤
|
||||
│ Schema Tree │ Query Toolbar + SQL Editor │ Inspector │
|
||||
│ │ │ │
|
||||
│ │ │ │
|
||||
├──────────────┴─────────────────────────────────────┴───────────────┤
|
||||
│ Results / History / Export / Problems │
|
||||
└────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 区域职责
|
||||
|
||||
- **Header**：连接切换、当前数据库上下文、主题、全局命令
|
||||
- **Schema Tree**：浏览 schema / table / view / column，支持搜索和展开
|
||||
- **Workbench**：SQL 编写、运行、停止、格式切换、目标连接展示
|
||||
- **Inspector**：对象详情、执行摘要、错误详情、导出选项
|
||||
- **Bottom Panel**：结果表格、历史、导出日志、问题列表
|
||||
|
||||
## 5. 页面与状态设计
|
||||
|
||||
### Connection Manager
|
||||
|
||||
- 主要目标：尽快进入一个明确的工作区
|
||||
- 关键状态：
|
||||
- 无连接
|
||||
- 测试连接中
|
||||
- 测试连接成功
|
||||
- 测试连接失败
|
||||
- 驱动不支持 / 配置不完整
|
||||
|
||||
### Workspace
|
||||
|
||||
- 主要目标：围绕单一连接完成 inspect → query → export
|
||||
- 关键状态：
|
||||
- 尚未选择对象
|
||||
- schema 载入中
|
||||
- SQL 执行中
|
||||
- 查询成功且有结果
|
||||
- 查询成功但空结果
|
||||
- 查询失败
|
||||
- 导出成功 / 导出失败
|
||||
|
||||
## 6. 组件清单
|
||||
|
||||
以下为后续 React + shadcn/ui 落地建议组件边界：
|
||||
|
||||
| 组件 | 作用 | 建议基础 |
|
||||
| --- | --- | --- |
|
||||
| `AppShell` | 承载桌面工作台骨架 | `ResizablePanelGroup`, `Separator` |
|
||||
| `ConnectionSwitcher` | 切换当前连接和工作区入口 | `Popover`, `Command`, `Select` |
|
||||
| `ConnectionCard` | 展示连接摘要与状态 | `Card`, `Badge`, `Button` |
|
||||
| `SchemaTree` | 浏览 schema / table / column | `ScrollArea`, `Collapsible`, `Input` |
|
||||
| `QueryToolbar` | 运行、停止、导出、当前连接状态 | `Button`, `Badge`, `Tooltip` |
|
||||
| `QueryTabs` | 管理多个 SQL 标签 | `Tabs`, `ContextMenu` |
|
||||
| `SqlEditorPanel` | 容纳 SQL 编辑器 | 自定义容器，后续接入编辑器 |
|
||||
| `ResultTabs` | 在结果、历史、导出间切换 | `Tabs` |
|
||||
| `ResultsTable` | 呈现查询结果集 | `Table`, `ScrollArea` |
|
||||
| `ExecutionBanner` | 一眼可见的执行状态与错误摘要 | `Alert`, `Badge` |
|
||||
| `InspectorPanel` | 展示对象属性和执行详情 | `Sheet` 或固定侧栏容器 |
|
||||
| `ExportDrawer` | 处理导出参数与确认 | `Dialog` / `Sheet` / `Form` |
|
||||
|
||||
## 7. 与 shadcn/ui + Tailwind + impeccable 的对齐说明
|
||||
|
||||
### 视觉基线
|
||||
|
||||
- 以稳定中性色为主，不使用高饱和主视觉。
|
||||
- 强调结构、对齐、排版和间距，而不是装饰性卡片。
|
||||
- light / dark 都应保持低噪音层次和稳定对比度。
|
||||
|
||||
### 交互基线
|
||||
|
||||
- 键盘优先：连接切换、schema 搜索、执行操作、底部面板切换应支持快捷路径。
|
||||
- 错误优先可读：错误摘要直接进入可见区，不藏在 toast 里。
|
||||
- 信息密度优先：结果、状态和元数据必须同时可读，避免只做“大留白”。
|
||||
|
||||
### 不应出现的方向
|
||||
|
||||
- 营销站式英雄区
|
||||
- 强发光深色主题
|
||||
- 以卡片拼贴为主的 dashboard 首页
|
||||
- 视觉噪音很高的渐变、阴影、发光描边
|
||||
|
||||
## 8. 未来 GUI 需要的核心数据契约
|
||||
|
||||
桌面 GUI 不应重新定义产品对象，而应直接映射 CLI 已明确概念。
|
||||
|
||||
### 连接与上下文
|
||||
|
||||
- `ConnectionTarget`
|
||||
- `id`
|
||||
- `name`
|
||||
- `databaseKind`
|
||||
- `environmentLabel`
|
||||
- `status`
|
||||
- `lastValidatedAt`
|
||||
|
||||
### schema browser
|
||||
|
||||
- `CatalogNode`
|
||||
- `id`
|
||||
- `kind` (`schema` / `table` / `view` / `column`)
|
||||
- `name`
|
||||
- `parentId`
|
||||
- `isExpandable`
|
||||
- `metadata`
|
||||
|
||||
### 查询执行
|
||||
|
||||
- `QueryRequest`
|
||||
- `connectionId`
|
||||
- `sql`
|
||||
- `source` (`inline` / `file`)
|
||||
- `limitMode`
|
||||
|
||||
- `QueryExecutionState`
|
||||
- `status` (`idle` / `running` / `success` / `error`)
|
||||
- `startedAt`
|
||||
- `finishedAt`
|
||||
- `durationMs`
|
||||
- `rowCount`
|
||||
- `message`
|
||||
|
||||
### 结果与导出
|
||||
|
||||
- `ResultSet`
|
||||
- `columns`
|
||||
- `rows`
|
||||
- `rowCount`
|
||||
- `truncated`
|
||||
|
||||
- `ExportRequest`
|
||||
- `connectionId`
|
||||
- `queryText`
|
||||
- `format` (`csv` / `json`)
|
||||
- `outputPath`
|
||||
- `overwrite`
|
||||
|
||||
- `ExportResult`
|
||||
- `status`
|
||||
- `outputPath`
|
||||
- `exportedRows`
|
||||
- `message`
|
||||
|
||||
## 9. 后端契约提前识别
|
||||
|
||||
未来 GUI 项目启动前，建议 CTO / Backend 先固定以下输出形态：
|
||||
|
||||
1. schema introspection 返回结构是否可直接树化
|
||||
2. query 返回结构是否区分“空结果成功”和“执行失败”
|
||||
3. export 是否返回可复用的结果对象和错误对象
|
||||
4. 连接测试结果是否提供统一状态码和展示文案
|
||||
5. 错误对象是否包含用户可展示摘要与底层细节
|
||||
|
||||
若这些结构过度 CLI-only，后续 GUI 会被迫做适配层补丁。
|
||||
|
||||
## 10. 最小可见界面实现
|
||||
|
||||
本次已提供静态原型：
|
||||
|
||||
- `gui/prototype/index.html`
|
||||
- `gui/prototype/styles.css`
|
||||
- `gui/prototype/app.js`
|
||||
|
||||
该原型的作用是验证：
|
||||
|
||||
- 工作台结构是否稳定
|
||||
- 连接管理与执行反馈是否易懂
|
||||
- schema browser、query editor、results table、inspector 是否形成合理分区
|
||||
|
||||
该原型不是正式桌面应用，也不接真实数据源。
|
||||
|
||||
## 11. 运行方式
|
||||
|
||||
### 直接打开
|
||||
|
||||
浏览器打开 `gui/prototype/index.html`。
|
||||
|
||||
### 本地预览
|
||||
|
||||
```bash
|
||||
node gui/preview-server.mjs
|
||||
```
|
||||
|
||||
访问 `http://127.0.0.1:4173`。
|
||||
|
||||
## 12. 界面验收说明
|
||||
|
||||
QA / CTO / PM 可按以下标准验收本次产物：
|
||||
|
||||
1. 明确确认当前项目“尚无前端基线”这一事实是否被准确记录
|
||||
2. 评估信息架构是否完整覆盖 connection manager、schema browser、query editor、results table、export flow
|
||||
3. 评估布局是否体现高信息密度桌面工作台，而非通用后台模板
|
||||
4. 评估组件清单是否足够拆分后续 GUI 子任务
|
||||
5. 评估契约清单是否能指导 backend 提前稳定输出结构
|
||||
|
||||
## 13. 建议的后续 GUI 项目拆分
|
||||
|
||||
后续若单独立项 GUI，可按以下顺序拆 issue：
|
||||
|
||||
1. GUI shell 与设计 token 基线
|
||||
2. Connection Manager
|
||||
3. Schema Browser
|
||||
4. Query Workbench
|
||||
5. Results Table 与状态系统
|
||||
6. Export Flow
|
||||
7. 错误与问题面板
|
||||
8. 快捷键与可用性细化
|
||||
33
gui/preview-server.mjs
Normal file
33
gui/preview-server.mjs
Normal file
@@ -0,0 +1,33 @@
|
||||
import { createServer } from "node:http";
|
||||
import { readFile } from "node:fs/promises";
|
||||
import { extname, join, normalize } from "node:path";
|
||||
|
||||
const root = new URL("./prototype/", import.meta.url);
|
||||
const port = Number(process.env.GUI_PREVIEW_PORT || 4173);
|
||||
|
||||
const contentTypes = {
|
||||
".html": "text/html; charset=utf-8",
|
||||
".css": "text/css; charset=utf-8",
|
||||
".js": "text/javascript; charset=utf-8",
|
||||
};
|
||||
|
||||
const server = createServer(async (req, res) => {
|
||||
const requestPath = req.url === "/" ? "/index.html" : req.url || "/index.html";
|
||||
const safePath = normalize(requestPath).replace(/^(\.\.[/\\])+/, "");
|
||||
const filePath = new URL(`.${safePath}`, root);
|
||||
|
||||
try {
|
||||
const body = await readFile(filePath);
|
||||
const type = contentTypes[extname(filePath.pathname)] || "text/plain; charset=utf-8";
|
||||
res.writeHead(200, { "Content-Type": type });
|
||||
res.end(body);
|
||||
} catch {
|
||||
const fallback = await readFile(join(root.pathname, "index.html"));
|
||||
res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
|
||||
res.end(fallback);
|
||||
}
|
||||
});
|
||||
|
||||
server.listen(port, "127.0.0.1", () => {
|
||||
console.log(`GUI prototype server running at http://127.0.0.1:${port}`);
|
||||
});
|
||||
53
gui/prototype/app.js
vendored
Normal file
53
gui/prototype/app.js
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
const connectionCards = document.querySelectorAll(".connection-card");
|
||||
const activeConnection = document.getElementById("active-connection");
|
||||
const detailTarget = document.getElementById("detail-target");
|
||||
const runQueryButton = document.getElementById("run-query");
|
||||
const executionBanner = document.getElementById("execution-banner");
|
||||
const executionTitle = document.getElementById("execution-title");
|
||||
const executionCopy = document.getElementById("execution-copy");
|
||||
const durationValue = document.getElementById("duration-value");
|
||||
const rowCount = document.getElementById("row-count");
|
||||
const bottomTabs = document.querySelectorAll(".bottom-tab");
|
||||
const tabContents = document.querySelectorAll(".tab-content");
|
||||
|
||||
connectionCards.forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
connectionCards.forEach((item) => item.classList.remove("is-active"));
|
||||
card.classList.add("is-active");
|
||||
|
||||
const target = card.dataset.connection;
|
||||
activeConnection.textContent = target;
|
||||
detailTarget.textContent = target;
|
||||
});
|
||||
});
|
||||
|
||||
runQueryButton.addEventListener("click", () => {
|
||||
const isError = executionBanner.classList.contains("is-error");
|
||||
|
||||
if (isError) {
|
||||
executionBanner.classList.remove("is-error");
|
||||
executionTitle.textContent = "Last run succeeded";
|
||||
executionCopy.textContent = "50 rows returned in 182 ms. Export is available.";
|
||||
durationValue.textContent = "182 ms";
|
||||
rowCount.textContent = "50";
|
||||
return;
|
||||
}
|
||||
|
||||
executionBanner.classList.add("is-error");
|
||||
executionTitle.textContent = "Last run failed";
|
||||
executionCopy.textContent = "Syntax error near `form`. The error summary should stay visible in the workspace.";
|
||||
durationValue.textContent = "21 ms";
|
||||
rowCount.textContent = "0";
|
||||
});
|
||||
|
||||
bottomTabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
bottomTabs.forEach((item) => item.classList.remove("is-active"));
|
||||
tabContents.forEach((item) => item.classList.remove("is-active"));
|
||||
|
||||
tab.classList.add("is-active");
|
||||
document
|
||||
.querySelector(`[data-content="${tab.dataset.tab}"]`)
|
||||
.classList.add("is-active");
|
||||
});
|
||||
});
|
||||
293
gui/prototype/index.html
Normal file
293
gui/prototype/index.html
Normal file
@@ -0,0 +1,293 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>dbtool-cli-v1 GUI Foundation Prototype</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<header class="topbar">
|
||||
<div class="topbar__brand">
|
||||
<div class="brand-mark">DB</div>
|
||||
<div>
|
||||
<p class="eyebrow">dbtool future desktop</p>
|
||||
<h1>Query Workspace Foundation</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar__context">
|
||||
<button class="ghost-button">⌘K Commands</button>
|
||||
<button class="ghost-button">Theme</button>
|
||||
<div class="connection-pill">
|
||||
<span class="status-dot status-dot--ok"></span>
|
||||
<span id="active-connection">pg-prod-readonly</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="workspace">
|
||||
<aside class="panel panel--nav">
|
||||
<section class="panel-section">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<p class="eyebrow">Connection Manager</p>
|
||||
<h2>Saved Targets</h2>
|
||||
</div>
|
||||
<button class="ghost-button ghost-button--small">+ New</button>
|
||||
</div>
|
||||
|
||||
<div class="connection-list">
|
||||
<button class="connection-card is-active" data-connection="pg-prod-readonly">
|
||||
<div>
|
||||
<strong>pg-prod-readonly</strong>
|
||||
<p>PostgreSQL · Production</p>
|
||||
</div>
|
||||
<span class="pill pill--success">Healthy</span>
|
||||
</button>
|
||||
<button class="connection-card" data-connection="mysql-staging">
|
||||
<div>
|
||||
<strong>mysql-staging</strong>
|
||||
<p>MySQL · Staging</p>
|
||||
</div>
|
||||
<span class="pill pill--muted">Idle</span>
|
||||
</button>
|
||||
<button class="connection-card" data-connection="sqlite-local">
|
||||
<div>
|
||||
<strong>sqlite-local</strong>
|
||||
<p>SQLite · Local file</p>
|
||||
</div>
|
||||
<span class="pill pill--muted">Ready</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-section">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<p class="eyebrow">Schema Browser</p>
|
||||
<h2>Catalog</h2>
|
||||
</div>
|
||||
<button class="ghost-button ghost-button--small">Filter</button>
|
||||
</div>
|
||||
|
||||
<div class="search-field">Search tables, views, columns</div>
|
||||
|
||||
<div class="tree">
|
||||
<details open>
|
||||
<summary>public</summary>
|
||||
<details open>
|
||||
<summary>orders</summary>
|
||||
<ul>
|
||||
<li>id · uuid</li>
|
||||
<li>customer_id · uuid</li>
|
||||
<li>status · text</li>
|
||||
<li>created_at · timestamptz</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary>customers</summary>
|
||||
<ul>
|
||||
<li>id · uuid</li>
|
||||
<li>email · text</li>
|
||||
<li>country · text</li>
|
||||
</ul>
|
||||
</details>
|
||||
</details>
|
||||
<details>
|
||||
<summary>analytics</summary>
|
||||
<ul>
|
||||
<li>daily_orders</li>
|
||||
<li>top_customers</li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="panel panel--main">
|
||||
<div class="editor-toolbar">
|
||||
<div class="toolbar-tabs">
|
||||
<button class="toolbar-tab is-active">orders audit.sql</button>
|
||||
<button class="toolbar-tab">empty result.sql</button>
|
||||
</div>
|
||||
<div class="toolbar-actions">
|
||||
<span class="pill pill--muted">PostgreSQL</span>
|
||||
<button class="action-button action-button--primary" id="run-query">Run Query</button>
|
||||
<button class="action-button">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="editor">
|
||||
<div class="editor-gutter">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<span>6</span>
|
||||
</div>
|
||||
<pre class="editor-code"><code>select
|
||||
id,
|
||||
customer_id,
|
||||
status,
|
||||
created_at
|
||||
from public.orders
|
||||
where created_at > now() - interval '7 days'
|
||||
order by created_at desc
|
||||
limit 50;</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="execution-banner" id="execution-banner">
|
||||
<div>
|
||||
<p class="eyebrow">Execution</p>
|
||||
<strong id="execution-title">Last run succeeded</strong>
|
||||
<p id="execution-copy">50 rows returned in 182 ms. Export is available.</p>
|
||||
</div>
|
||||
<div class="banner-metrics">
|
||||
<div>
|
||||
<span>Duration</span>
|
||||
<strong id="duration-value">182 ms</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Rows</span>
|
||||
<strong id="row-count">50</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bottom-panel">
|
||||
<div class="bottom-tabs">
|
||||
<button class="bottom-tab is-active" data-tab="results">Results</button>
|
||||
<button class="bottom-tab" data-tab="history">History</button>
|
||||
<button class="bottom-tab" data-tab="export">Export</button>
|
||||
<button class="bottom-tab" data-tab="problems">Problems</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content is-active" data-content="results">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>customer_id</th>
|
||||
<th>status</th>
|
||||
<th>created_at</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>8ec1...</td>
|
||||
<td>7cb3...</td>
|
||||
<td>paid</td>
|
||||
<td>2026-03-25 13:55:01 UTC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>80f8...</td>
|
||||
<td>5d10...</td>
|
||||
<td>processing</td>
|
||||
<td>2026-03-25 13:44:15 UTC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5aa2...</td>
|
||||
<td>9ab1...</td>
|
||||
<td>failed</td>
|
||||
<td>2026-03-25 13:12:48 UTC</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="history">
|
||||
<div class="log-list">
|
||||
<div class="log-row">
|
||||
<strong>orders audit.sql</strong>
|
||||
<span>Success · 182 ms · 50 rows</span>
|
||||
</div>
|
||||
<div class="log-row">
|
||||
<strong>empty result.sql</strong>
|
||||
<span>Success · 95 ms · 0 rows</span>
|
||||
</div>
|
||||
<div class="log-row">
|
||||
<strong>bad syntax.sql</strong>
|
||||
<span>Error · syntax error near `form`</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="export">
|
||||
<div class="export-box">
|
||||
<div>
|
||||
<p class="eyebrow">Export Status</p>
|
||||
<strong>Ready to export the current result set</strong>
|
||||
<p>`/tmp/orders-last-7-days.csv` is available as the default target.</p>
|
||||
</div>
|
||||
<div class="export-actions">
|
||||
<button class="action-button">CSV</button>
|
||||
<button class="action-button">JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="problems">
|
||||
<div class="problem-box">
|
||||
<strong>No blocking problem</strong>
|
||||
<p>When a query fails, this area should show the error summary, SQL fragment, and next action.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<aside class="panel panel--side">
|
||||
<section class="panel-section">
|
||||
<p class="eyebrow">Inspector</p>
|
||||
<h2>Current Selection</h2>
|
||||
<div class="info-card">
|
||||
<span>Object</span>
|
||||
<strong>public.orders</strong>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<span>Primary Key</span>
|
||||
<strong>id</strong>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<span>Columns</span>
|
||||
<strong>12</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-section">
|
||||
<p class="eyebrow">Execution Detail</p>
|
||||
<div class="detail-list">
|
||||
<div>
|
||||
<span>Target</span>
|
||||
<strong id="detail-target">pg-prod-readonly</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Mode</span>
|
||||
<strong>Read-only</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Last export</span>
|
||||
<strong>Not started</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-section">
|
||||
<p class="eyebrow">Acceptance Focus</p>
|
||||
<ul class="focus-list">
|
||||
<li>Schema tree remains scannable on wide catalogs</li>
|
||||
<li>Execution state is visible without reading the table</li>
|
||||
<li>Result region supports empty, success, and error states</li>
|
||||
<li>Export action stays adjacent to query outcome</li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
423
gui/prototype/styles.css
Normal file
423
gui/prototype/styles.css
Normal file
@@ -0,0 +1,423 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0f1115;
|
||||
--panel: #141821;
|
||||
--panel-muted: #10141c;
|
||||
--panel-strong: #1a202b;
|
||||
--border: #273041;
|
||||
--text: #e6e8ee;
|
||||
--muted: #9da7b8;
|
||||
--accent: #7dd3fc;
|
||||
--accent-soft: rgba(125, 211, 252, 0.12);
|
||||
--success: #7dd3a0;
|
||||
--warning: #f5c26b;
|
||||
--danger: #f09c9c;
|
||||
--shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
|
||||
--radius: 14px;
|
||||
--radius-sm: 10px;
|
||||
--font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(125, 211, 252, 0.07), transparent 25%),
|
||||
linear-gradient(180deg, #0d1016 0%, #0f1115 100%);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px 22px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(20, 24, 33, 0.82);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.topbar__brand,
|
||||
.topbar__context,
|
||||
.section-head,
|
||||
.editor-toolbar,
|
||||
.toolbar-tabs,
|
||||
.toolbar-actions,
|
||||
.bottom-tabs,
|
||||
.export-box,
|
||||
.export-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.topbar__brand h1,
|
||||
.section-head h2,
|
||||
.panel-section h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(125, 211, 252, 0.3);
|
||||
border-radius: 12px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 4px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(640px, 1fr) 280px;
|
||||
gap: 16px;
|
||||
min-height: calc(100vh - 124px);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(20, 24, 33, 0.9);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel--nav,
|
||||
.panel--side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel--main {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(240px, 1fr) auto minmax(260px, 0.9fr);
|
||||
}
|
||||
|
||||
.panel-section,
|
||||
.editor-toolbar,
|
||||
.execution-banner,
|
||||
.bottom-panel {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.panel-section + .panel-section {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.connection-pill,
|
||||
.pill,
|
||||
.ghost-button,
|
||||
.action-button,
|
||||
.toolbar-tab,
|
||||
.bottom-tab,
|
||||
.search-field,
|
||||
.info-card,
|
||||
.log-row,
|
||||
.problem-box {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.action-button,
|
||||
.toolbar-tab,
|
||||
.bottom-tab {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.toolbar-tab,
|
||||
.bottom-tab,
|
||||
.search-field {
|
||||
padding: 8px 12px;
|
||||
background: var(--panel-muted);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ghost-button--small {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 9px 13px;
|
||||
background: var(--panel-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.action-button--primary {
|
||||
border-color: rgba(125, 211, 252, 0.28);
|
||||
background: rgba(125, 211, 252, 0.16);
|
||||
color: #dff6ff;
|
||||
}
|
||||
|
||||
.connection-pill,
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 11px;
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.pill--success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.pill--muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.status-dot--ok {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.connection-list,
|
||||
.tree,
|
||||
.detail-list,
|
||||
.focus-list,
|
||||
.log-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.connection-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--panel-muted);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.connection-card p,
|
||||
.export-box p,
|
||||
.problem-box p,
|
||||
.focus-list,
|
||||
.detail-list span,
|
||||
.info-card span,
|
||||
.log-row span {
|
||||
margin: 4px 0 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.connection-card.is-active {
|
||||
border-color: rgba(125, 211, 252, 0.4);
|
||||
background: rgba(125, 211, 252, 0.08);
|
||||
}
|
||||
|
||||
.tree details {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.tree summary {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
margin: 10px 0 0 18px;
|
||||
padding: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.editor {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #10141b;
|
||||
}
|
||||
|
||||
.editor-gutter,
|
||||
.editor-code {
|
||||
padding: 18px 16px;
|
||||
margin: 0;
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.editor-gutter {
|
||||
color: #697386;
|
||||
border-right: 1px solid var(--border);
|
||||
background: #0d1016;
|
||||
}
|
||||
|
||||
.editor-gutter span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.editor-code {
|
||||
color: #d7e2f0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.execution-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
background: linear-gradient(90deg, rgba(125, 211, 160, 0.12), rgba(125, 211, 252, 0.04));
|
||||
}
|
||||
|
||||
.execution-banner.is-error {
|
||||
background: linear-gradient(90deg, rgba(240, 156, 156, 0.16), rgba(240, 156, 156, 0.06));
|
||||
}
|
||||
|
||||
.banner-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(88px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.banner-metrics div,
|
||||
.detail-list div,
|
||||
.info-card {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(15, 18, 24, 0.7);
|
||||
}
|
||||
|
||||
.banner-metrics span,
|
||||
.detail-list span,
|
||||
.info-card span {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toolbar-tab.is-active,
|
||||
.bottom-tab.is-active {
|
||||
border-color: rgba(125, 211, 252, 0.3);
|
||||
background: rgba(125, 211, 252, 0.14);
|
||||
color: #e4f7ff;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
background: #121722;
|
||||
}
|
||||
|
||||
.log-row,
|
||||
.export-box,
|
||||
.problem-box {
|
||||
padding: 16px;
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.focus-list {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.focus-list li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.workspace {
|
||||
grid-template-columns: 250px minmax(520px, 1fr) 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.panel--main {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.panel--nav {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.panel--side {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user