桌面端主题系统
桌面端 Tailwind、窗口布局和 01MVP 视觉规范的同步方式
你将学到
- 桌面端 UI 的三个层次分别管什么
- 桌面应用应该看起来像工具，不像营销页
- 检查桌面 UI 一致性时该看哪些地方
桌面端用 Tailwind CSS，继承 01MVP 的视觉语言。但桌面应用的信息密度、窗口尺寸、菜单和托盘交互会让它比 Web 页面更像工具软件。
桌面端 UI 三层
桌面端的 UI 分三层，每层解决不同的问题：
视觉规则 -- 颜色、字体、间距、按钮层级和状态。这些从 01MVP 主题继承，桌面端不另起一套。如果桌面端的颜色和 Web 端不一致，用户会觉得产品没打磨。所以改主题色时要同步两边。
工具布局 -- 侧栏、列表、设置页、状态栏和密集信息。桌面窗口比网页窄，信息要更紧凑。常见的桌面布局是：左侧固定侧栏做导航，右侧放内容区，底部状态栏显示连接状态和版本号。
系统交互 -- 窗口、托盘、更新提示和本地文件动作。这些是桌面特有的，网页不需要管。系统交互的 UI 要和应用内 UI 视觉一致，但行为逻辑由 Tauri runtime 处理。
三层之间保持同步：视觉规则变了，工具布局和系统交互里的按钮、字体也要跟着变。
改主题色时先改 Tailwind 配置，再检查侧栏、设置页和弹窗里的控件是否一致。
桌面端不该像营销页
| 应该更像 | 避免变成 |
|---|---|
| 清晰的工具界面 | 大面积营销 hero section |
| 稳定的按钮和表单 | 每页单独调 CSS |
| 可扫描的信息结构 | 只有装饰性的卡片堆叠 |
| 明确的系统状态 | 找不到当前连接、登录、更新状态 |
| 紧凑的间距 | 大量留白浪费桌面窗口空间 |
用户打开桌面应用是来做事的，不是来看宣传的。保持界面安静、信息清晰、操作可预测。
一个简单的判断标准：把你的桌面应用截图和 Web 落地页放在一起。如果桌面应用看起来更像落地页而不是工具，就需要重新审视设计。
字体和间距
桌面端的字体和间距规则从 01MVP 主题继承，不需要单独定义。但桌面窗口的信息密度比网页高，有几点要注意：
- 正文字号不要低于 13px，太小在高分屏上也看不清
- 按钮和表单控件的点击区域至少 32px 高，方便鼠标操作
- 列表行间距不要太松，桌面用户习惯扫描密集信息
- 弹窗和对话框宽度控制在 400-600px，太宽反而不好读
系统状态显示
桌面应用的状态比网页多。用户需要随时知道应用在干什么：
- 连接状态 -- 在线、离线、重连中
- 登录状态 -- 已登录用户、过期、未登录
- 同步状态 -- 同步中、已同步、同步失败
- 更新状态 -- 有新版本、正在下载、安装中、已是最新
把这些状态放在固定位置（通常是状态栏或顶栏），不要藏在设置页里。状态变了要及时更新，不要让用户手动刷新才知道。
检查清单
改完桌面端 UI 后，对照这几条：
- 标题、正文、说明文字有稳定层级
- 主按钮、次按钮、危险按钮尺寸一致
- 窗口缩放后内容不会互相遮挡
- 系统状态清楚：登录中、离线、同步中、更新可用
- 设置页和工具页共用相同表单控件
- 没有为了单个页面好看写一次性样式
- 深色模式下所有文本可读、所有边框可见
- 窗口最小尺寸下关键操作不被裁切
需要调整时，优先抽出可复用组件或更新主题规则，不要在单个页面里堆一次性 CSS。一次性样式积累多了，改一次主题色要改十个文件。
下一步
UI 规范确定了，下一步去看 Skills 与插件推荐，了解桌面端开发时该用哪些 AI Skill 和插件。
想和其他创造者交流？
这篇文档有问题？