Files
opsxdb/homepage/dist/docs/interface/index.html
T
logan 40b9bdcc8c 落地页/文档面向用户清理:去开发向表述 + 删摆设组件
- 落地页下载卡「Tauri 2」价格位改「原生桌面」;sidecar/Go 二进制/monorepo 脚手架等内部表述改用户语言
- 文档删「打印/导出 PDF」与「是否有帮助」摆设组件及未使用图标
- MCP 页 H1 与页面标题去重(npm 安装命令为用户操作步骤,保留)
- homepage dist 同步重建
2026-10-16 13:20:55 +08:00

183 lines
7.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>界面导览 · OpsxDB 文档</title>
<meta name="description" content="OpsxDB 桌面数据库工作台用户文档 — 连库、写 SQL、看结果;MySQL / PostgreSQL / SQL Server / Oracle / SQLite / Redis 内置驱动,SSH 隧道与 SSL 加密。">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2264%22%20y2%3D%2264%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23059669%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%2206B6D4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%224.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2220%22%20rx%3D%2215%22%20ry%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M17%2020v24c0%203.6%206.7%206.5%2015%206.5s15-2.9%2015-6.5V20%22%2F%3E%3Cpath%20d%3D%22M17%2032c0%203.6%206.7%206.5%2015%206.5s15-2.9%2015-6.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E">
<link rel="stylesheet" href="/docs/assets/docs.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
<symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></symbol>
</svg>
<header class="topbar">
<div class="topbar-inner">
<button class="menu-btn" id="menu-btn" aria-label="打开导航"><svg class="i"><use href="#i-menu"/></svg></button>
<a class="brand" href="/docs">
<span class="brand-logo"><svg width="28" height="28" viewBox="0 0 64 64" aria-label="OpsxDB"><defs><linearGradient id="lg-docs" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#059669"/><stop offset="1" stop-color="#06B6D4"/></linearGradient></defs><rect width="64" height="64" rx="14" fill="url(#lg-docs)"/><g stroke="#fff" stroke-width="4.5" fill="none" stroke-linecap="round"><ellipse cx="32" cy="20" rx="15" ry="6.5"/><path d="M17 20v24c0 3.6 6.7 6.5 15 6.5s15-2.9 15-6.5V20"/><path d="M17 32c0 3.6 6.7 6.5 15 6.5s15-2.9 15-6.5"/></g></svg></span>
<span class="brand-name">OpsxDB <em>文档</em></span>
</a>
<span class="ver-badge">v0.1</span>
<div class="search">
<input id="search-input" type="search" placeholder="搜索文档…" autocomplete="off" spellcheck="false">
<div class="search-panel" id="search-panel" hidden></div>
</div>
<nav class="top-links">
<a href="/home">官网</a>
<a href="/docs/quickstart">快速开始</a>
</nav>
</div>
</header>
<div class="layout" id="layout">
<aside class="sidebar" id="sidebar">
<div class="nav-group">
<div class="nav-group-title">开始使用</div>
<a class="nav-link" href="/docs/intro">产品介绍</a>
<a class="nav-link" href="/docs/quickstart">快速开始</a>
<a class="nav-link active" href="/docs/interface">界面导览</a>
</div>
<div class="nav-group">
<div class="nav-group-title">连接与驱动</div>
<a class="nav-link" href="/docs/connect">新建连接</a>
<a class="nav-link" href="/docs/drivers">驱动支持</a>
</div>
<div class="nav-group">
<div class="nav-group-title">SQL 工作台</div>
<a class="nav-link" href="/docs/workbench">SQL 工作台</a>
<a class="nav-link" href="/docs/results">结果与导出</a>
<a class="nav-link" href="/docs/redis">Redis 工作台</a>
</div>
<div class="nav-group">
<div class="nav-group-title">安全与 AI</div>
<a class="nav-link" href="/docs/security">安全设计</a>
<a class="nav-link" href="/docs/ai">AI 助手</a>
<a class="nav-link" href="/docs/mcp">MCP 接入</a>
</div>
<div class="nav-group">
<div class="nav-group-title">参考</div>
<a class="nav-link" href="/docs/faq">常见问题</a>
<a class="nav-link" href="/docs/shortcuts">快捷键</a>
</div>
<div class="sidebar-foot">© 2026 OpsxDB · 本地优先的数据库工作台</div>
</aside>
<main class="content">
<div class="breadcrumb">文档 <span>/</span> 开始使用 <span>/</span> 界面导览</div>
<h1 class="page-title">界面导览</h1>
<div class="page-meta">更新于 2026-09-20</div>
<article class="md">
<p>OpsxDB 的界面为「高频操作」设计:从打开应用到看到数据,路径越短越好。</p>
<h2 id="sec-1">连接选择器</h2>
<p>启动后的第一个界面:</p>
<ul>
<li><strong>搜索</strong>:按名称快速过滤已保存的连接;</li>
<li><strong>分类</strong>:关系型 / NoSQL / 国产库 / 时序·搜索 分组浏览;</li>
<li><strong>最近</strong>:最近使用的连接排在最前;</li>
<li><strong>图标网格</strong>:按数据库类型直选,未就绪的类型会标注「未就绪」(仅可保存配置);</li>
<li><strong>URL 填入</strong>:粘贴 <code>mysql://user:pass@host:3306/db</code> 点「填入」,字段自动拆解。</li>
</ul>
<h2 id="sec-2">工作台布局</h2>
<p>连接成功后进入工作台,三栏结构:</p>
<table>
<thead>
<tr>
<th>区域</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>左侧</td>
<td>连接列表 + 对象树(库 → 表 → 列,懒加载)</td>
</tr>
<tr>
<td>中部</td>
<td>SQL 编辑器(多 Tab)+ 结果面板,可拖动分栏</td>
</tr>
<tr>
<td>右侧</td>
<td>AI 面板(生成 / 解释 / 优化 / 修复 / 方言 / 样例)</td>
</tr>
</tbody>
</table>
<h2 id="sec-3">对象树</h2>
<ul>
<li>点<strong>表名</strong>:直接打开前 100 行数据;</li>
<li>展开<strong>表</strong>:查看列结构;</li>
<li><strong>右键表</strong>:打开表 / 查看 DDL / 生成 SQL(SELECT·INSERT·UPDATE·DELETE)/ 重命名 / 克隆表结构·克隆表(含数据)/ 清空 / 截断 / 删除 —— 危险项红色并二次确认;</li>
<li><strong>右键库</strong>:新建查询 / 新建表(生成 CREATE TABLE 模板到编辑器)/ 复制 / 设为默认库 / 刷新 / 删除库;</li>
<li>Redis:按键分隔符编文件夹,点键打开类型化详情(TTL / JSON / 增删字段);</li>
<li>库列表懒加载,大实例也不卡。</li>
</ul>
<h2 id="sec-4">编辑器与结果</h2>
<ul>
<li>CodeMirror 语法高亮,⌘/Ctrl+Enter 执行<strong>当前语句或选区</strong>(不是整页脚本);</li>
<li>多 Tab 并行查询,互不阻塞;</li>
<li>结果面板:复制 / CSV / INSERT 三种取数方式,双击单元格复制;</li>
<li>超过截断阈值时结果有明确提示。</li>
</ul>
<h2 id="sec-5">个性化</h2>
<ul>
<li>深色 / 浅色主题切换;</li>
<li>Tab 布局与主题选择持久化,下次打开保持原样;</li>
<li>查询历史本地留存,可回跳重跑。</li>
</ul>
</article>
<div class="pn-nav">
<a class="pn prev" href="/docs/quickstart"><span class="pn-label">← 上一页</span><span class="pn-title">快速开始</span></a>
<a class="pn next" href="/docs/connect"><span class="pn-label">下一页 →</span><span class="pn-title">新建连接</span></a>
</div>
</main>
<aside class="toc">
<div class="toc-title">本页目录</div>
<nav class="toc-nav">
<a class="toc-l2" href="#sec-1">连接选择器</a>
<a class="toc-l2" href="#sec-2">工作台布局</a>
<a class="toc-l2" href="#sec-3">对象树</a>
<a class="toc-l2" href="#sec-4">编辑器与结果</a>
<a class="toc-l2" href="#sec-5">个性化</a>
</nav>
</aside>
</div>
<script src="/docs/assets/docs.js" defer></script>
</body>
</html>