294 lines
10 KiB
HTML
294 lines
10 KiB
HTML
<!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>
|