feat(usable): package gui-host validation snapshot
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Paperclip CTO
@@ -2,19 +2,52 @@
|
||||
|
||||
本目录用于存放 `CMP-9` 的未来桌面端 GUI 基线产物，而不是正式应用代码。
|
||||
|
||||
## 当前基线结论
|
||||
|
||||
- 当前仓库仍然没有正式 Web / Desktop 前端工程入口：没有 `package.json`、React 应用、Electron / Tauri 壳。
|
||||
- 当前已经存在最小展示层基础：`gui/prototype` 静态工作台原型、`gui/preview-server.mjs` 本地预览服务，以及 `apps/tui` 的终端工作台壳层。
|
||||
- 因此，当前前端可见面不再是“完全空白”，但仍属于 foundation 级别，不进入 CLI V1 产品范围。
|
||||
|
||||
## 首版 UI/UX 范围建议
|
||||
|
||||
当前最合理的首版未来 GUI 范围是单一数据库工作台，而不是多页面 dashboard：
|
||||
|
||||
- **Connection Manager**：展示已保存连接、驱动类型、环境标签、连接健康状态，并支持测试连接和进入工作台
|
||||
- **Database Workspace**：固定为 schema browser、query editor、results/history/export 底部区域、右侧 inspector 的工作台布局
|
||||
- **Execution Feedback**：明确区分 `Running`、`Success`、`Empty`、`Error`、`Exported`，且执行反馈持续留在工作区内
|
||||
- **Export Flow**：围绕当前结果集提供格式选择、目标路径、覆盖提醒和导出结果反馈
|
||||
|
||||
当前刻意不做：
|
||||
|
||||
- 正式 React / Electron / Tauri 工程
|
||||
- 真实数据库接入或后端契约改造
|
||||
- dashboard 首页、图表 BI、AI 助手、migration / schema editing
|
||||
|
||||
## 当前产物
|
||||
|
||||
- `desktop-foundation.md`：信息架构、布局方向、组件清单、契约要求和 UI/UX 建议
|
||||
- `prototype/index.html`：最小可见工作台原型
|
||||
- `prototype/styles.css`：原型样式
|
||||
- `prototype/app.js`：原型内交互
|
||||
- `prototype/app.js`：原型内交互与状态切换
|
||||
- `preview-server.mjs`：零依赖本地预览服务
|
||||
|
||||
## 原型包含内容
|
||||
|
||||
- 连接管理、schema browser、query editor、results、export、inspector 的稳定工作台分区
|
||||
- 按连接切换不同的 schema catalog、SQL 草稿标签、结果列和默认导出路径
|
||||
- `Running` / `Success` / `Empty` / `Error` / `Exported` 五种可预览执行态
|
||||
- Light / Dark 主题切换
|
||||
- schema 搜索过滤、连接切换、结果 / 历史 / 导出 / 问题面板切换
|
||||
- 当前界面状态到共享结构化契约的映射预览，其中 `running` 明确标记为前端暂态
|
||||
- 键盘快捷路径：`1` / `2` / `3` / `4` / `5`、`R`、`T`、`/`、`⌘/Ctrl+K`
|
||||
|
||||
## 查看方式
|
||||
|
||||
### 方式一：直接打开
|
||||
|
||||
直接用浏览器打开 `gui/prototype/index.html`。
|
||||
直接用浏览器打开 `gui/index.html`。
|
||||
|
||||
若希望直接进入工作台原型，也可以打开 `gui/prototype/index.html`。
|
||||
|
||||
### 方式二：启动本地预览
|
||||
|
||||
@@ -30,11 +63,19 @@ node gui/preview-server.mjs
|
||||
http://127.0.0.1:4173
|
||||
```
|
||||
|
||||
当前 `/` 会落到 `gui/index.html`，再从入口页进入工作台原型。
|
||||
|
||||
## 界面验收
|
||||
|
||||
验收人应重点确认：
|
||||
|
||||
1. 是否能看出连接管理、schema browser、query editor、results table、export feedback 的稳定分区
|
||||
2. 布局是否体现“工作台”而不是通用 dashboard
|
||||
3. 状态、错误、执行反馈是否一眼可见
|
||||
4. 文档中的后端契约需求是否能映射到 CLI 已定义产品概念
|
||||
1. 是否能看出连接概览、工作区上下文、执行反馈三层信息同时存在
|
||||
2. 工作台布局是否保持“操作台”气质，而不是卡片拼贴式 dashboard
|
||||
3. 成功、空结果、失败、导出完成四种状态是否都能一眼区分
|
||||
4. `Running` 态是否能在不离开工作区的前提下持续显示执行反馈，并暂时锁定导出动作
|
||||
5. 切换连接后，顶部摘要、中部工作区和右侧 inspector 是否同步更新
|
||||
6. 切换连接后，schema tree、query tab 标签、结果列与默认导出路径是否也同步切换到对应驱动上下文
|
||||
7. Light / Dark 两种主题下信息密度、对比度和可读性是否仍然稳定
|
||||
8. `⌘/Ctrl+K` 快捷操作面板是否能帮助 QA 快速预览状态与连接切换
|
||||
9. 文档中的后端契约需求是否仍可映射到 CLI 已定义产品概念
|
||||
10. `Contract` 面板是否能帮助 QA 与 Backend 快速核对 `query` / `export` envelope，以及 `running` 暂态边界
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
|
||||
### 真实现状
|
||||
|
||||
- 当前仓库没有前端入口，也没有任何展示层基础。
|
||||
- 当前不存在 `package.json`、React 工程、桌面壳、页面路由、组件目录或样式系统。
|
||||
- 当前仓库没有正式前端工程入口：不存在 `package.json`、React 工程、桌面壳、页面路由、组件目录或样式系统。
|
||||
- 当前仓库已经存在展示层 foundation：`gui/prototype` 静态工作台原型、`gui/preview-server.mjs` 本地预览服务，以及 `apps/tui` 的终端工作台壳层。
|
||||
- 当前项目仍以 CLI V1 为主路径，GUI 只允许做未来方向基线，不进入本期交付主链路。
|
||||
|
||||
### 结论
|
||||
|
||||
- GUI 第一轮最合理的交付形态应是“信息架构 + 组件边界 + 契约清单 + 静态原型”。
|
||||
- GUI 第一轮最合理的交付形态仍是“信息架构 + 组件边界 + 契约清单 + 静态原型”。
|
||||
- 不应在本 issue 中直接引入 Electron、Tauri、React 或完整桌面工程。
|
||||
- 后续 GUI 项目启动时，推荐使用 React + shadcn/ui + Tailwind CSS，并以本文件作为产品层输入。
|
||||
|
||||
@@ -250,6 +250,9 @@ Desktop GUI
|
||||
- 工作台结构是否稳定
|
||||
- 连接管理与执行反馈是否易懂
|
||||
- schema browser、query editor、results table、inspector 是否形成合理分区
|
||||
- success / empty / error / exported 等关键状态是否能被明确区分
|
||||
- 当前界面状态是否仍能映射回共享 `query` / `export` 契约，且 `running` 被识别为前端暂态
|
||||
- light / dark 主题下的结构层次是否保持稳定
|
||||
|
||||
该原型不是正式桌面应用，也不接真实数据源。
|
||||
|
||||
|
||||
77
gui/index.html
Normal file
77
gui/index.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>dbtool GUI Foundation Entry</title>
|
||||
<link rel="stylesheet" href="./landing.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="landing-shell">
|
||||
<section class="hero">
|
||||
<div class="hero__badge">dbtool-cli-v1 frontend foundation</div>
|
||||
<h1>Future GUI Workspace Entry</h1>
|
||||
<p class="hero__copy">
|
||||
当前仓库没有正式 React / Desktop 前端工程，但已经有可预览的最小展示层：
|
||||
一个数据库工作台原型、一个本地预览服务，以及与 CLI/TUI 对齐的首版 UI/UX 边界。
|
||||
</p>
|
||||
|
||||
<div class="hero__actions">
|
||||
<a class="primary-link" href="./prototype/index.html">打开工作台原型</a>
|
||||
<a class="secondary-link" href="../README.md">查看仓库说明</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid">
|
||||
<article class="card">
|
||||
<p class="card__eyebrow">Current Surface</p>
|
||||
<h2>已有展示层基础</h2>
|
||||
<ul>
|
||||
<li>`gui/prototype` 静态工作台原型</li>
|
||||
<li>`gui/preview-server.mjs` 本地预览服务</li>
|
||||
<li>`apps/tui` 终端工作台验证路径</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<p class="card__eyebrow">MVP Scope</p>
|
||||
<h2>首版只收口单一工作台</h2>
|
||||
<ul>
|
||||
<li>Connection Manager</li>
|
||||
<li>Schema Browser</li>
|
||||
<li>Query Editor</li>
|
||||
<li>Results / History / Export</li>
|
||||
<li>Inspector 与执行状态</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<p class="card__eyebrow">Run</p>
|
||||
<h2>两种预览方式</h2>
|
||||
<ol>
|
||||
<li>直接打开 `gui/index.html` 或 `gui/prototype/index.html`</li>
|
||||
<li>运行 `node gui/preview-server.mjs` 后访问 `http://127.0.0.1:4173`</li>
|
||||
</ol>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<p class="card__eyebrow">Acceptance</p>
|
||||
<h2>QA 重点确认</h2>
|
||||
<ul>
|
||||
<li>连接、工作区和执行反馈三层信息同时可见</li>
|
||||
<li>成功、空结果、失败、导出完成能一眼区分</li>
|
||||
<li>切换连接后摘要、工作区、Inspector 同步更新</li>
|
||||
<li>Light / Dark 主题下仍保持稳定信息密度</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="footer-card">
|
||||
<p>
|
||||
详细范围和验收说明见 `gui/README.md`，更完整的信息架构与契约要求见
|
||||
`gui/desktop-foundation.md`。
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
156
gui/landing.css
Normal file
156
gui/landing.css
Normal file
@@ -0,0 +1,156 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0f1319;
|
||||
--bg-elevated: #151b23;
|
||||
--panel: #171e27;
|
||||
--panel-strong: #202938;
|
||||
--border: #2b3645;
|
||||
--text: #e8edf5;
|
||||
--muted: #9cabbe;
|
||||
--accent: #8bb8ff;
|
||||
--accent-soft: rgba(139, 184, 255, 0.14);
|
||||
--shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
|
||||
--radius: 20px;
|
||||
--radius-sm: 14px;
|
||||
--font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #171e27 0%, var(--bg) 100%);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
.landing-shell {
|
||||
width: min(1180px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 32px 0 40px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.card,
|
||||
.footer-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: color-mix(in srgb, var(--panel) 92%, white 8%);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.hero__badge,
|
||||
.card__eyebrow {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.card h2 {
|
||||
margin: 8px 0 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(32px, 5vw, 52px);
|
||||
}
|
||||
|
||||
.hero__copy,
|
||||
.footer-card p,
|
||||
.card li,
|
||||
.card ol {
|
||||
color: var(--muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.hero__copy {
|
||||
max-width: 760px;
|
||||
margin: 16px 0 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.primary-link,
|
||||
.secondary-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.primary-link {
|
||||
border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.secondary-link {
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 22px 24px;
|
||||
}
|
||||
|
||||
.card ul,
|
||||
.card ol {
|
||||
margin: 14px 0 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.card li + li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.footer-card {
|
||||
margin-top: 16px;
|
||||
padding: 18px 24px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "SFMono-Regular", ui-monospace, monospace;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.landing-shell {
|
||||
width: min(100vw - 24px, 1180px);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.card,
|
||||
.footer-card {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ 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 root = new URL("./", import.meta.url);
|
||||
const port = Number(process.env.GUI_PREVIEW_PORT || 4173);
|
||||
|
||||
const contentTypes = {
|
||||
|
||||
1373
gui/prototype/app.js
vendored
1373
gui/prototype/app.js
vendored
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-CN" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@@ -13,19 +13,49 @@
|
||||
<div class="brand-mark">DB</div>
|
||||
<div>
|
||||
<p class="eyebrow">dbtool future desktop</p>
|
||||
<h1>Query Workspace Foundation</h1>
|
||||
<h1>Operator Workspace Foundation</h1>
|
||||
<p class="topbar__copy">
|
||||
面向数据库操作者的安静型工作台原型，聚焦 connect → inspect → query → export。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar__context">
|
||||
<button class="ghost-button">⌘K Commands</button>
|
||||
<button class="ghost-button">Theme</button>
|
||||
<button class="ghost-button" id="command-button">⌘K Quick Actions</button>
|
||||
<button class="ghost-button" id="theme-toggle">切换到 Light</button>
|
||||
<div class="connection-pill">
|
||||
<span class="status-dot status-dot--ok"></span>
|
||||
<span id="active-connection">pg-prod-readonly</span>
|
||||
<div>
|
||||
<span class="pill-label">Active Target</span>
|
||||
<strong id="active-connection">pg-prod-readonly</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="workspace-summary">
|
||||
<article class="summary-card">
|
||||
<span class="summary-card__label">Workspace</span>
|
||||
<strong id="summary-workspace">Production Read Audit</strong>
|
||||
<p id="summary-workspace-copy">只读 PostgreSQL 连接，聚焦近 7 天订单审计。</p>
|
||||
</article>
|
||||
<article class="summary-card">
|
||||
<span class="summary-card__label">Selection</span>
|
||||
<strong id="summary-selection">public.orders</strong>
|
||||
<p id="summary-selection-copy">Schema browser 与 inspector 指向同一对象。</p>
|
||||
</article>
|
||||
<article class="summary-card">
|
||||
<span class="summary-card__label">Last Run</span>
|
||||
<strong id="summary-run">Success · 50 rows</strong>
|
||||
<p id="summary-run-copy">182 ms，结果可导出。</p>
|
||||
</article>
|
||||
<article class="summary-card">
|
||||
<span class="summary-card__label">Export</span>
|
||||
<strong id="summary-export">/tmp/orders-last-7-days.csv</strong>
|
||||
<p id="summary-export-copy">当前展示默认导出目标，不执行真实写盘。</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<main class="workspace">
|
||||
<aside class="panel panel--nav">
|
||||
<section class="panel-section">
|
||||
@@ -38,26 +68,70 @@
|
||||
</div>
|
||||
|
||||
<div class="connection-list">
|
||||
<button class="connection-card is-active" data-connection="pg-prod-readonly">
|
||||
<div>
|
||||
<button
|
||||
class="connection-card is-active"
|
||||
data-connection="pg-prod-readonly"
|
||||
data-driver="PostgreSQL"
|
||||
data-environment="Production"
|
||||
data-mode="Read-only"
|
||||
data-selection="public.orders"
|
||||
data-workspace="Production Read Audit"
|
||||
data-workspace-copy="只读 PostgreSQL 连接，聚焦近 7 天订单审计。"
|
||||
data-last-validated="2 minutes ago"
|
||||
>
|
||||
<div class="connection-card__head">
|
||||
<strong>pg-prod-readonly</strong>
|
||||
<p>PostgreSQL · Production</p>
|
||||
<span class="pill pill--success">Healthy</span>
|
||||
</div>
|
||||
<p>PostgreSQL · Production · Read-only</p>
|
||||
<div class="connection-card__meta">
|
||||
<span>Latency 28 ms</span>
|
||||
<span>Last checked 2m ago</span>
|
||||
</div>
|
||||
<span class="pill pill--success">Healthy</span>
|
||||
</button>
|
||||
<button class="connection-card" data-connection="mysql-staging">
|
||||
<div>
|
||||
|
||||
<button
|
||||
class="connection-card"
|
||||
data-connection="mysql-staging"
|
||||
data-driver="MySQL"
|
||||
data-environment="Staging"
|
||||
data-mode="Write enabled"
|
||||
data-selection="qa_demo.orders"
|
||||
data-workspace="Staging Validation"
|
||||
data-workspace-copy="用于确认变更前后数据差异的暂存环境。"
|
||||
data-last-validated="9 minutes ago"
|
||||
>
|
||||
<div class="connection-card__head">
|
||||
<strong>mysql-staging</strong>
|
||||
<p>MySQL · Staging</p>
|
||||
<span class="pill pill--muted">Idle</span>
|
||||
</div>
|
||||
<p>MySQL · Staging · Write enabled</p>
|
||||
<div class="connection-card__meta">
|
||||
<span>Latency 41 ms</span>
|
||||
<span>Last checked 9m ago</span>
|
||||
</div>
|
||||
<span class="pill pill--muted">Idle</span>
|
||||
</button>
|
||||
<button class="connection-card" data-connection="sqlite-local">
|
||||
<div>
|
||||
|
||||
<button
|
||||
class="connection-card"
|
||||
data-connection="sqlite-local"
|
||||
data-driver="SQLite"
|
||||
data-environment="Local file"
|
||||
data-mode="Local verify"
|
||||
data-selection="main.audit_events"
|
||||
data-workspace="Local Evidence Review"
|
||||
data-workspace-copy="本地 SQLite 文件验证与导出证据收集。"
|
||||
data-last-validated="Ready on open"
|
||||
>
|
||||
<div class="connection-card__head">
|
||||
<strong>sqlite-local</strong>
|
||||
<p>SQLite · Local file</p>
|
||||
<span class="pill pill--muted">Ready</span>
|
||||
</div>
|
||||
<p>SQLite · Local file · Single file</p>
|
||||
<div class="connection-card__meta">
|
||||
<span>Offline</span>
|
||||
<span>Open on demand</span>
|
||||
</div>
|
||||
<span class="pill pill--muted">Ready</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@@ -68,58 +142,61 @@
|
||||
<p class="eyebrow">Schema Browser</p>
|
||||
<h2>Catalog</h2>
|
||||
</div>
|
||||
<button class="ghost-button ghost-button--small">Filter</button>
|
||||
<button class="ghost-button ghost-button--small" id="clear-search">Clear</button>
|
||||
</div>
|
||||
|
||||
<div class="search-field">Search tables, views, columns</div>
|
||||
<label class="search-field">
|
||||
<span>Search</span>
|
||||
<input id="schema-search" type="search" placeholder="tables, views, columns" />
|
||||
</label>
|
||||
|
||||
<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>
|
||||
<div class="tree" id="schema-tree"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel-section">
|
||||
<p class="eyebrow">Workflow Checkpoints</p>
|
||||
<ul class="focus-list">
|
||||
<li>连接状态应在进入工作台前即被看见</li>
|
||||
<li>schema browser 与 inspector 应共享同一选中对象</li>
|
||||
<li>执行反馈应独立于结果表格持续可见</li>
|
||||
<li>导出动作必须贴近当前结果集而不是离散分散</li>
|
||||
</ul>
|
||||
</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-tabs" id="toolbar-tabs"></div>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<span class="pill pill--muted">PostgreSQL</span>
|
||||
<span class="pill pill--muted" id="driver-pill">PostgreSQL</span>
|
||||
<button class="action-button" id="cycle-state">Next State</button>
|
||||
<button class="action-button action-button--primary" id="run-query">Run Query</button>
|
||||
<button class="action-button">Export</button>
|
||||
<button class="action-button" id="export-current">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="context-strip">
|
||||
<div>
|
||||
<span class="context-label">Target</span>
|
||||
<strong id="context-target">pg-prod-readonly</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="context-label">Mode</span>
|
||||
<strong id="context-mode">Read-only</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="context-label">Selection</span>
|
||||
<strong id="context-selection">public.orders</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="context-label">Last validated</span>
|
||||
<strong id="context-validated">2 minutes ago</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="editor">
|
||||
<div class="editor-gutter">
|
||||
<div class="editor-gutter" id="editor-gutter">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
@@ -127,18 +204,10 @@
|
||||
<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>
|
||||
<pre class="editor-code"><code id="editor-code"></code></pre>
|
||||
</section>
|
||||
|
||||
<section class="execution-banner" id="execution-banner">
|
||||
<section class="execution-banner is-success" id="execution-banner">
|
||||
<div>
|
||||
<p class="eyebrow">Execution</p>
|
||||
<strong id="execution-title">Last run succeeded</strong>
|
||||
@@ -153,6 +222,10 @@ limit 50;</code></pre>
|
||||
<span>Rows</span>
|
||||
<strong id="row-count">50</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>State</span>
|
||||
<strong id="state-label">Success</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -162,81 +235,75 @@ limit 50;</code></pre>
|
||||
<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>
|
||||
<button class="bottom-tab" data-tab="contract">Contract</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content is-active" data-content="results">
|
||||
<div class="result-summary">
|
||||
<strong id="result-summary">50 rows · sorted by created_at desc</strong>
|
||||
<span id="result-copy">结果区保留紧邻执行反馈的上下文，不让表格单独承担状态信息。</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>customer_id</th>
|
||||
<th>status</th>
|
||||
<th>created_at</th>
|
||||
</tr>
|
||||
<tr id="results-head"></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>
|
||||
<tbody id="results-body"></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 class="log-list" id="history-list"></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>
|
||||
<strong id="export-title">Ready to export the current result set</strong>
|
||||
<p id="export-copy">`/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>
|
||||
<button class="action-button" id="export-csv">CSV</button>
|
||||
<button class="action-button" id="export-json">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>
|
||||
<strong id="problem-title">No blocking problem</strong>
|
||||
<p id="problem-copy">When a query fails, this area should show the error summary, SQL fragment, and next action.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="contract">
|
||||
<div class="contract-card">
|
||||
<div>
|
||||
<p class="eyebrow">Contract Snapshot</p>
|
||||
<strong id="contract-title">Query success envelope preview</strong>
|
||||
<p id="contract-copy">展示当前界面状态如何映射到共享结构化契约；`running` 仍属于前端暂态。</p>
|
||||
</div>
|
||||
<pre class="contract-preview"><code id="contract-json"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="status-bar">
|
||||
<span id="status-message" aria-live="polite">Ready for review. Use 1–5 to preview states, `R` to simulate run, `T` to switch theme, `/` to focus search.</span>
|
||||
<div class="status-shortcuts">
|
||||
<span>1 Running</span>
|
||||
<span>2 Success</span>
|
||||
<span>3 Empty</span>
|
||||
<span>4 Error</span>
|
||||
<span>5 Exported</span>
|
||||
<span>R Run</span>
|
||||
<span>T Theme</span>
|
||||
<span>/ Search</span>
|
||||
<span>⌘/Ctrl+K Actions</span>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<aside class="panel panel--side">
|
||||
@@ -245,15 +312,19 @@ limit 50;</code></pre>
|
||||
<h2>Current Selection</h2>
|
||||
<div class="info-card">
|
||||
<span>Object</span>
|
||||
<strong>public.orders</strong>
|
||||
<strong id="inspector-object">public.orders</strong>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<span>Kind</span>
|
||||
<strong id="selection-kind">Table</strong>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<span>Primary Key</span>
|
||||
<strong>id</strong>
|
||||
<strong id="selection-primary-key">id</strong>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<span>Columns</span>
|
||||
<strong>12</strong>
|
||||
<strong id="selection-columns">12</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -266,11 +337,15 @@ limit 50;</code></pre>
|
||||
</div>
|
||||
<div>
|
||||
<span>Mode</span>
|
||||
<strong>Read-only</strong>
|
||||
<strong id="detail-mode">Read-only</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Last export</span>
|
||||
<strong>Not started</strong>
|
||||
<strong id="detail-export">Not started</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Theme</span>
|
||||
<strong id="detail-theme">Dark</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -278,16 +353,93 @@ limit 50;</code></pre>
|
||||
<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>
|
||||
<li>连接概览、工作区上下文、执行状态三者始终同时可见</li>
|
||||
<li>空结果与失败都不能伪装成同一种“空白”界面</li>
|
||||
<li>切换连接后，主区域、导出区、Inspector 同步更新</li>
|
||||
<li>Light / Dark 两种主题都保持低噪音和高对比</li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="command-palette" id="command-palette" hidden>
|
||||
<button class="command-palette__backdrop" id="command-backdrop" aria-label="关闭快捷操作"></button>
|
||||
<section class="command-dialog" role="dialog" aria-modal="true" aria-labelledby="command-title">
|
||||
<div class="command-dialog__head">
|
||||
<div>
|
||||
<p class="eyebrow">Keyboard-first review</p>
|
||||
<h2 id="command-title">Quick Actions</h2>
|
||||
</div>
|
||||
<button class="ghost-button ghost-button--small" id="command-close">Esc Close</button>
|
||||
</div>
|
||||
|
||||
<div class="command-grid">
|
||||
<section class="command-section">
|
||||
<p class="eyebrow">Execution States</p>
|
||||
<div class="command-list">
|
||||
<button class="command-item" data-command-state="running">
|
||||
<strong>Preview Running</strong>
|
||||
<span>1 · 模拟执行中态，锁定导出并保留工作区上下文</span>
|
||||
</button>
|
||||
<button class="command-item" data-command-state="success">
|
||||
<strong>Preview Success</strong>
|
||||
<span>2 · 返回 50 行结果并保持导出入口可见</span>
|
||||
</button>
|
||||
<button class="command-item" data-command-state="empty">
|
||||
<strong>Preview Empty</strong>
|
||||
<span>3 · 成功但无结果，避免误判为错误</span>
|
||||
</button>
|
||||
<button class="command-item" data-command-state="error">
|
||||
<strong>Preview Error</strong>
|
||||
<span>4 · 错误摘要持续停留在工作区内</span>
|
||||
</button>
|
||||
<button class="command-item" data-command-state="exported">
|
||||
<strong>Preview Exported</strong>
|
||||
<span>5 · 导出完成反馈与结果表格并存</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="command-section">
|
||||
<p class="eyebrow">Connections</p>
|
||||
<div class="command-list">
|
||||
<button class="command-item" data-command-connection="pg-prod-readonly">
|
||||
<strong>Open pg-prod-readonly</strong>
|
||||
<span>PostgreSQL · Production · Read-only</span>
|
||||
</button>
|
||||
<button class="command-item" data-command-connection="mysql-staging">
|
||||
<strong>Open mysql-staging</strong>
|
||||
<span>MySQL · Staging · Write enabled</span>
|
||||
</button>
|
||||
<button class="command-item" data-command-connection="sqlite-local">
|
||||
<strong>Open sqlite-local</strong>
|
||||
<span>SQLite · Local file · Evidence review</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="command-section">
|
||||
<p class="eyebrow">Workflow</p>
|
||||
<div class="command-list">
|
||||
<button class="command-item" data-command-action="run">
|
||||
<strong>Run current query</strong>
|
||||
<span>R · 先进入 Running，再回到当前 SQL 对应终态</span>
|
||||
</button>
|
||||
<button class="command-item" data-command-action="search">
|
||||
<strong>Focus schema search</strong>
|
||||
<span>/ · 快速定位 schema、table 和 column</span>
|
||||
</button>
|
||||
<button class="command-item" data-command-action="theme">
|
||||
<strong>Toggle theme</strong>
|
||||
<span>T · 切换 Light / Dark，检查对比度稳定性</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,44 @@
|
||||
:root {
|
||||
html[data-theme="dark"] {
|
||||
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;
|
||||
--bg: #11141a;
|
||||
--bg-elevated: #161b22;
|
||||
--panel: #171d25;
|
||||
--panel-muted: #11161d;
|
||||
--panel-strong: #202835;
|
||||
--border: #2a3341;
|
||||
--border-strong: #3a4759;
|
||||
--text: #e6ebf2;
|
||||
--muted: #9aa6b6;
|
||||
--accent: #8bb8ff;
|
||||
--accent-soft: rgba(139, 184, 255, 0.14);
|
||||
--success: #7bc59a;
|
||||
--warning: #d7b26d;
|
||||
--danger: #e09a9a;
|
||||
--shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
--bg: #eef2f6;
|
||||
--bg-elevated: #f6f8fb;
|
||||
--panel: #fbfcfe;
|
||||
--panel-muted: #f3f6fa;
|
||||
--panel-strong: #e9eef5;
|
||||
--border: #d7dde7;
|
||||
--border-strong: #c2cddd;
|
||||
--text: #162031;
|
||||
--muted: #5f6f84;
|
||||
--accent: #3667d6;
|
||||
--accent-soft: rgba(54, 103, 214, 0.1);
|
||||
--success: #237a4b;
|
||||
--warning: #946400;
|
||||
--danger: #af3a3a;
|
||||
--shadow: 0 16px 36px rgba(18, 30, 46, 0.08);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 16px;
|
||||
--radius-sm: 12px;
|
||||
--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;
|
||||
}
|
||||
@@ -26,13 +50,15 @@
|
||||
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%);
|
||||
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
body.has-modal {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
@@ -42,21 +68,21 @@ select {
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
padding: 18px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px 22px;
|
||||
gap: 18px;
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(20, 24, 33, 0.82);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.topbar__brand,
|
||||
@@ -67,7 +93,10 @@ select {
|
||||
.toolbar-actions,
|
||||
.bottom-tabs,
|
||||
.export-box,
|
||||
.export-actions {
|
||||
.export-actions,
|
||||
.connection-card__head,
|
||||
.connection-card__meta,
|
||||
.status-shortcuts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@@ -78,20 +107,34 @@ select {
|
||||
.panel-section h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.topbar__copy {
|
||||
margin: 8px 0 0;
|
||||
max-width: 620px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(125, 211, 252, 0.3);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
|
||||
border-radius: 12px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.topbar__context {
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 4px;
|
||||
color: var(--muted);
|
||||
@@ -100,17 +143,47 @@ select {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.workspace-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
padding: 16px 18px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.summary-card strong {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.summary-card p,
|
||||
.summary-card__label,
|
||||
.pill-label,
|
||||
.result-summary span {
|
||||
margin: 6px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(640px, 1fr) 280px;
|
||||
gap: 16px;
|
||||
min-height: calc(100vh - 124px);
|
||||
min-height: calc(100vh - 222px);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(20, 24, 33, 0.9);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -123,13 +196,15 @@ select {
|
||||
|
||||
.panel--main {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(240px, 1fr) auto minmax(260px, 0.9fr);
|
||||
grid-template-rows: auto auto minmax(260px, 1fr) auto minmax(280px, 0.92fr) auto;
|
||||
}
|
||||
|
||||
.panel-section,
|
||||
.editor-toolbar,
|
||||
.context-strip,
|
||||
.execution-banner,
|
||||
.bottom-panel {
|
||||
.bottom-panel,
|
||||
.status-bar {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
@@ -146,9 +221,11 @@ select {
|
||||
.search-field,
|
||||
.info-card,
|
||||
.log-row,
|
||||
.problem-box {
|
||||
.problem-box,
|
||||
.summary-card,
|
||||
.result-summary {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
@@ -156,6 +233,7 @@ select {
|
||||
.toolbar-tab,
|
||||
.bottom-tab {
|
||||
cursor: pointer;
|
||||
transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
@@ -167,6 +245,21 @@ select {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ghost-button:hover,
|
||||
.action-button:hover,
|
||||
.toolbar-tab:hover,
|
||||
.bottom-tab:hover,
|
||||
.connection-card:hover,
|
||||
.tree-item:hover {
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.ghost-button:disabled,
|
||||
.action-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.ghost-button--small {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
@@ -178,17 +271,17 @@ select {
|
||||
}
|
||||
|
||||
.action-button--primary {
|
||||
border-color: rgba(125, 211, 252, 0.28);
|
||||
background: rgba(125, 211, 252, 0.16);
|
||||
color: #dff6ff;
|
||||
border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
|
||||
background: var(--accent-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.connection-pill,
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 11px;
|
||||
gap: 10px;
|
||||
padding: 9px 12px;
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
@@ -221,10 +314,8 @@ select {
|
||||
}
|
||||
|
||||
.connection-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
@@ -245,35 +336,108 @@ select {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.connection-card.is-active {
|
||||
border-color: rgba(125, 211, 252, 0.4);
|
||||
background: rgba(125, 211, 252, 0.08);
|
||||
.connection-card__head,
|
||||
.connection-card__meta {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tree details {
|
||||
.connection-card__meta {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.connection-card.is-active {
|
||||
border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.search-field {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.search-field input {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tree-group {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.tree-group[hidden],
|
||||
.tree-item[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tree summary {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
margin: 10px 0 0 18px;
|
||||
padding: 0;
|
||||
.tree-item {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tree-item span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tree-item.is-selected {
|
||||
border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.context-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.context-strip div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.context-label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.context-strip strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.editor {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #10141b;
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.editor-gutter,
|
||||
@@ -286,9 +450,9 @@ select {
|
||||
}
|
||||
|
||||
.editor-gutter {
|
||||
color: #697386;
|
||||
color: var(--muted);
|
||||
border-right: 1px solid var(--border);
|
||||
background: #0d1016;
|
||||
background: color-mix(in srgb, var(--panel-muted) 82%, black 18%);
|
||||
}
|
||||
|
||||
.editor-gutter span {
|
||||
@@ -296,7 +460,7 @@ select {
|
||||
}
|
||||
|
||||
.editor-code {
|
||||
color: #d7e2f0;
|
||||
color: var(--text);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -305,16 +469,29 @@ select {
|
||||
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));
|
||||
border-top: 1px solid var(--border);
|
||||
background: color-mix(in srgb, var(--success) 10%, var(--panel));
|
||||
}
|
||||
|
||||
.execution-banner.is-running {
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--panel));
|
||||
}
|
||||
|
||||
.execution-banner.is-empty {
|
||||
background: color-mix(in srgb, var(--warning) 10%, var(--panel));
|
||||
}
|
||||
|
||||
.execution-banner.is-error {
|
||||
background: linear-gradient(90deg, rgba(240, 156, 156, 0.16), rgba(240, 156, 156, 0.06));
|
||||
background: color-mix(in srgb, var(--danger) 12%, var(--panel));
|
||||
}
|
||||
|
||||
.execution-banner.is-exported {
|
||||
background: color-mix(in srgb, var(--accent) 12%, var(--panel));
|
||||
}
|
||||
|
||||
.banner-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(88px, 1fr));
|
||||
grid-template-columns: repeat(3, minmax(88px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@@ -342,11 +519,25 @@ select {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.result-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px 14px;
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.result-summary strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
|
||||
background: var(--accent-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@@ -380,14 +571,34 @@ td {
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
background: #121722;
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.log-row,
|
||||
.export-box,
|
||||
.problem-box {
|
||||
.problem-box,
|
||||
.contract-card {
|
||||
padding: 16px;
|
||||
background: var(--panel-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.contract-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.contract-preview {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--panel-muted) 74%, black 26%);
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.focus-list {
|
||||
@@ -398,17 +609,128 @@ th {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-shortcuts {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.command-palette {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.command-palette__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 0;
|
||||
background: rgba(9, 12, 18, 0.48);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.command-dialog {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(920px, calc(100vw - 32px));
|
||||
margin: 56px auto;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.command-dialog__head,
|
||||
.command-grid,
|
||||
.command-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.command-dialog__head {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.command-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.command-section {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--panel-muted);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.command-item:hover,
|
||||
.command-item:focus-visible {
|
||||
border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
|
||||
background: var(--accent-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.command-item span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.workspace-summary {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.workspace {
|
||||
grid-template-columns: 250px minmax(520px, 1fr) 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.topbar,
|
||||
.status-bar,
|
||||
.result-summary,
|
||||
.context-strip,
|
||||
.workspace-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.status-bar,
|
||||
.result-summary {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.command-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.panel--main {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user