界面与页面

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

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.tsEULA_URL 留空即可省略 EULA;设置它后,EULA_VERSION 决定已安装用户是否需要重新接受修订后的协议。

添加产品页面

src/App.tsx 添加 lazy import 和 route。除非页面确实需要无 shell layout,否则放在 AppShell 下。
src/components/layout/sidebar-items.ts 添加 sidebar item。若页面应当可搜索,请增加 command source 或扩展已有 source。
在对应 locale namespace 中加入 EN 和 ZH translation keys。菜单、sidebar、command labels 应使用 keys,而不是 literal strings。
若外部输入可以打开该页,请将精确路径加入 src/lib/intents/routes.tsNAVIGATION_ROUTES。这个 allow-list 保护 deep links、第二个实例参数和 native menu/tray navigation。

On this page