用途:为自定义 Frappe 应用设计界面时,提供来自官方应用的 UI/UX 模式与设计规范,确保与 CRM、Helpdesk、HRMS 等保持一致的体验。适用于设计新 Frappe 应用界面、构建 Frappe UI 的 CRUD 界面、实现列表视图/详情面板/表单、选择组件模式与布局。
主要能力:给出应用外壳结构(Header + Sidebar + Main Content,可选 List View 与 Detail Panel 分栏);侧边栏导航与快捷筛选;列表视图(搜索、筛选、视图切换、新建按钮、行结构);看板视图(列、卡片、拖拽);详情侧面板(标签页 Details/Activity/Notes、底部操作);表单(分区、可折叠、操作按钮);活动流(评论、状态变更、字段变更);空状态与骨架屏加载状态;状态配色约定(成功绿、警告黄、错误红、信息蓝、中性灰);响应式模式(移动端抽屉侧栏、列表与详情堆叠)。
使用方式:先研究官方参考应用的模式(Frappe CRM、Helpdesk、HRMS、Insights、Builder),再按文档中的组件与布局实现;统一使用 Frappe UI 组件(Button、Input、FormControl、Select、Checkbox、Avatar、Badge、Dropdown、Dialog、Tabs、Tooltip),遵循 TailwindCSS 间距刻度(p-2、p-4、gap-2、gap-4),并为每个视图提供加载、空、错误状态。
限制:资料未提供具体安装命令、版本要求、收费或价格信息;组件实现、后端 API 集成与企业工作流分别指向 frappe-frontend-development、frappe-api-development、frappe-enterprise-patterns,本文档不展开。避免自定义应用外壳、缺失空状态、用 spinner 代替骨架屏、状态配色不一致、过度使用模态框、缺少键盘导航等常见错误。