mirror of
https://github.com/t8y2/dbx.git
synced 2026-10-19 16:16:45 +00:00
18 lines
2.9 KiB
HTML
18 lines
2.9 KiB
HTML
<!doctype html><html lang="zh"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>#10841 界面预览 · f19567b</title>
|
|
<style>:root{color-scheme:light dark;--bg:#f6f6f7;--fg:#1d1d1f;--muted:#6e6e73;--card:#fff;--line:#e5e5ea}
|
|
@media (prefers-color-scheme:dark){:root{--bg:#111113;--fg:#f2f2f4;--muted:#9a9aa0;--card:#1c1c1f;--line:#2c2c30}}
|
|
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,"Segoe UI","PingFang SC","Noto Sans CJK SC",sans-serif}
|
|
main{max-width:1200px;margin:0 auto;padding:28px 16px 60px}h1{font-size:20px;margin:0 0 4px}.m{color:var(--muted);font-size:13px;margin:0 0 20px}
|
|
.warn{margin:0 0 20px;padding:10px 14px;border:1px solid #c0392b;border-radius:10px;background:rgba(192,57,43,.07);color:#c0392b;font-size:14px}
|
|
figure.shaky img{border-color:#c0392b}
|
|
video,img{display:block;width:100%;border-radius:10px;border:1px solid var(--line);background:var(--card)}figure{margin:0 0 28px}figcaption{color:var(--muted);font-size:13px;margin-top:8px}
|
|
a{color:inherit}</style>
|
|
<main><h1>#10841 界面预览</h1><p class="m">commit f19567b · <a href="https://github.com/t8y2/dbx/pull/10841">回到 PR</a> · 这个 PR 在界面上把“明文导出配置”改成了带凭据开关的确认弹窗，并把连接类型选择器的数据库分类导航改成了默认“全部”视图，支持在全部分类下浏览完整目录、减少重复项。</p>
|
|
<p class="warn">⚠️ 这次录制有 9 步没能按计划执行；带 ⚠️ 的截图拍摄于步骤失败之后，画面未必是说明文字所描述的状态。</p>
|
|
<figure><video src="preview.mp4" controls autoplay muted playsinline poster="poster.png"></video><figcaption>红线是鼠标走过的轨迹，红色圆环是一次点击；底部文字是这一步在做什么。多个场景各自从应用初始状态开始。空格暂停，← → 逐段查看。</figcaption></figure>
|
|
<figure class="shaky"><img src="01-unencrypted-export-default.png" alt="查看不加密导出时的默认提示和凭据选项"><figcaption>⚠️ 明文导出凭据开关 · 查看不加密导出时的默认提示和凭据选项</figcaption></figure>
|
|
<figure class="shaky"><img src="02-unencrypted-export-with-credentials.png" alt="查看勾选后的文案和警告样式"><figcaption>⚠️ 明文导出凭据开关 · 查看勾选后的文案和警告样式</figcaption></figure>
|
|
<figure><img src="03-connection-picker-all.png" alt="查看数据库类型选择器默认的全部分类视图"><figcaption>连接类型选择器的全部视图 · 查看数据库类型选择器默认的全部分类视图</figcaption></figure>
|
|
<figure class="shaky"><img src="04-connection-picker-category-all.png" alt="查看全部分类下的完整数据库类型目录"><figcaption>⚠️ 连接类型选择器的全部视图 · 查看全部分类下的完整数据库类型目录</figcaption></figure>
|
|
</main></html> |