界面与页面
Tailwind + shadcn/ui 技术栈、路由、命令面板与页面清单。
这是一个桌面应用 shell,而不是 SaaS dashboard UI kit。React 19 界面使用 Tailwind CSS v4、
src/components/ui/ 中的 shadcn/ui primitives、cmdk command palette 和 Sonner toasts。
新增 shadcn component 时从 components.json 开始。
路由与布局
src/App.tsx 使用 HashRouter 和 lazy route imports。打包后的桌面应用不需要 Web server
重写路径。AppShell 负责 custom titlebar、sidebar、command palette、offline banner 和 route
fallback;登录、注册、找回密码和 /error 则使用 ShellLessLayout。
展示 route block 仅在 showcaseConfig.enabled 为真时注册,/update 仅在
features.autoUpdate 为真时注册。订阅路由始终存在,但在计费启用前不会出现在
sidebar 或 palette 中。请使用已有的 light/dark/system preference 与 accent color,不要为单个
component 另建颜色模式;参见 Theming。
Sidebar 与 command palette
src/components/layout/sidebar-items.ts 定义三个 sidebar groups:工作区(首页)、
受 flag 控制的 模板 区(展示与组件),以及 应用(计费启用时还包括订阅,另有
日志、帮助、设置、关于)。
按 Cmd/Ctrl+K 可打开 app 内的 command palette。
src/components/command-palette/command-sources.ts 的 command-source pattern 提供 routes、
可搜索 settings、recent files,以及启用时的 Showcase catalog。用 registerCommandSource()
添加产品 action;它会返回一个 unregister function,供该功能卸载时使用。
页面清单
| 页面 | 路径 | 用途 |
|---|---|---|
| 首页 | /home | 起始页面、快捷操作,以及演示开启时的展示区块。 |
| 帮助 | /help | 主页链接、使用 SUPPORT_EMAIL 的反馈邮件、使用 REPO_URL 的 GitHub 问题反馈,以及日志快捷入口。 |
| 关于 | /about | 应用/系统信息和复制已脱敏诊断的操作。 |
| 更新 | /update | 手动检查、下载、安装更新;受 flag 控制。 |
| 日志 | /logs | 已脱敏的原生日志界面。 |
| 设置 | /settings | 可搜索、按标签划分的应用偏好。 |
| 账户 | /account | 已认证用户的资料与头像。 |
| 订阅 | /billing | 可选的 Creem 套餐与权益。 |
| 错误 / 未找到 | /error、* | 带主题的恢复页与路由兜底。 |
首次使用时,router 之后的 OnboardingGate 会运行。将 shared/constants.ts 的 EULA_URL
留空即可省略 EULA;设置它后,EULA_VERSION 决定已安装用户是否需要重新接受修订后的协议。
添加产品页面
src/App.tsx 添加 lazy import 和 route。除非页面确实需要无 shell layout,否则放在 AppShell 下。src/components/layout/sidebar-items.ts 添加 sidebar item。若页面应当可搜索,请增加 command source 或扩展已有 source。src/lib/intents/routes.ts 的 NAVIGATION_ROUTES。这个 allow-list 保护 deep links、第二个实例参数和 native menu/tray navigation。