diff --git a/Project/fonrey/PRD/竞品截图.md b/Project/fonrey/PRD/竞品截图.md new file mode 100644 index 00000000..b3587cd1 --- /dev/null +++ b/Project/fonrey/PRD/竞品截图.md @@ -0,0 +1,198 @@ +### 权限管理截图 +- 权限管理 + - 权限管理-人员列表：`Project/fonrey/screenshots/权限管理/权限管理-人员列表.png` + - 权限管理-修改个人权限-客源：`Project/fonrey/screenshots/权限管理/权限管理-修改个人权限-客源.png` + - 权限管理-修改个人权限-人员编辑特定权限：`Project/fonrey/screenshots/权限管理/权限管理-人员编辑特定权限.png` + - 权限管理-批量设置角色: `Project/fonrey/screenshots/权限管理/权限管理-批量设置角色.png` +- 角色管理 + - 角色列表：`Project/fonrey/screenshots/权限管理/角色管理-角色列表.png` + - 添加角色：`Project/fonrey/screenshots/权限管理/角色管理-添加角色1.png` + - 修改角色：`Project/fonrey/screenshots/权限管理/角色管理-修改角色.png` + +### 组织人事管理截图 +- 组织结构 + - 公司组织结构部门人员列表页面：`Project/fonrey/screenshots/组织人事/组织结构/公司组织结构.png` + - 公司员工详情：`Project/fonrey/screenshots/组织人事/组织结构/员工详情.png` + - 公司员工通讯录：`Project/fonrey/screenshots/组织人事/组织结构/员工通讯录.png` + - 公司员工详情异动记录：`Project/fonrey/screenshots/组织人事/组织结构/员工详情异动记录.png` + - 公司员工详情账号信息：`Project/fonrey/screenshots/组织人事/组织结构/员工详情账号信息.png` + - 部门新增：`Project/fonrey/screenshots/组织人事/组织结构/部门新增.png` + - 部门编辑：`Project/fonrey/screenshots/组织人事/组织结构/部门编辑.png` + - 部门详情：`Project/fonrey/screenshots/组织人事/组织结构/部门详情.png` + - 组织内员工异动记录：`Project/fonrey/screenshots/组织人事/组织结构/组织员工异动记录.png` + - 部门架构图：`Project/fonrey/screenshots/组织人事/组织结构/部门架构图.png` + - 员工离职：`Project/fonrey/screenshots/组织人事/组织结构/员工离职.png` + - 员工调动：`Project/fonrey/screenshots/组织人事/组织结构/员工调动.png` + - 员工奖惩记录: `Project/fonrey/screenshots/组织人事/组织结构/员工奖惩记录.png` + - 员工奖惩记录新增：`Project/fonrey/screenshots/组织人事/组织结构/员工奖惩记录新增.png` + + + +### 房源管理 +- 现在请你先分析房源管理： + 1. 房源列表：`Project/fonrey/screenshots/房源/房源列表.png` + 2. 房源详情：`Project/fonrey/screenshots/房源/房源详情.png` + 3. 新增住宅：`Project/fonrey/screenshots/房源/增房/新增住宅.png` + 4. 编辑房源：`Project/fonrey/screenshots/房源/增房/编辑房源.png` + 5. 上传图片：`Project/fonrey/screenshots/房源/增房/上传图片.png` + 6. 写跟进：`Project/fonrey/screenshots/房源/增房/写跟进.png` + 7. 查看同业主房源：`Project/fonrey/screenshots/房源/增房/查看同业主房源.png` + +- 除了新增住宅之外房源管理还包括： + 1. 新增别墅：`Project/fonrey/screenshots/房源/增房/新增别墅.png` + 2. 新增商铺：`Project/fonrey/screenshots/房源/增房/新增商铺.png` + 3. 新增商住: `Project/fonrey/screenshots/房源/增房/新增商住.png` + 4. 新增写字楼：`Project/fonrey/screenshots/房源/增房/新增写字楼.png` + 5. 新增其他： `Project/fonrey/screenshots/房源/增房/新增其他.png` + - 请标注这些新增类型功能优先级比新增住宅要低 + - 请更新现有的`Project/fonrey/PRD/房源管理模块PRD.md` 包含以上需求分析 +- 房源列表会分: + 1. 二手&租赁（住宅）:`Project/fonrey/screenshots/房源/全部房源.png` + 2. 商铺：`Project/fonrey/screenshots/房源/全部商铺.png` + 3. 写字楼：`Project/fonrey/screenshots/房源/全部写字楼.png` +- 更新房源详情分成3张截图： + 1. `Project/fonrey/screenshots/房源/房源详情1.png` + 2. `Project/fonrey/screenshots/房源/房源详情2.png` + 3. `Project/fonrey/screenshots/房源/房源详情3.png` + - 请分析图片并更新现有的`Project/fonrey/PRD/房源管理模块PRD.md` 包含以上需求分析 +- 在房源详情页面可以对该房源的具体内容进行不同角度的更新，这些都是在详情页点击相关链接后弹出浮窗进行编辑的 + - `Project/fonrey/screenshots/房源/编辑房源栋座单元房号.png` + - `Project/fonrey/screenshots/房源/调价.png` + - `Project/fonrey/screenshots/房源/调价记录.png` + - `Project/fonrey/screenshots/房源/编辑交易信息.png` + - `Project/fonrey/screenshots/房源/更改房源等级.png` + - `Project/fonrey/screenshots/房源/更改房源属性.png` + - `Project/fonrey/screenshots/房源/房源状态变更.png` + - `Project/fonrey/screenshots/房源/更改房源现状.png` + - `Project/fonrey/screenshots/房源/更改房源用途.png` + - `Project/fonrey/screenshots/房源/看房时间.png` + - `Project/fonrey/screenshots/房源/挂牌历史记录.png` +- 在房源详情页面可以通过跟进管理的tab页面切换查看不同维度的跟进管理： + - 全部：`Project/fonrey/screenshots/房源/跟进管理/全部.png` + - 写入跟进：`Project/fonrey/screenshots/房源/跟进管理/写入跟进.png` + - 敏感信息跟进：`Project/fonrey/screenshots/房源/跟进管理/敏感信息跟进.png` + - 敏感信息查看：`Project/fonrey/screenshots/房源/跟进管理/敏感信息查看.png` + - 修改跟进：`Project/fonrey/csreenshots/房源/跟进管理/修改跟进.png` + - 其他跟进：`Project/fonrey/screenshots/房源/跟进管理/其他跟进.png` + - 新增钥匙：`Project/fonrey/screenshots/房源/跟进管理/新增钥匙.png` + - 钥匙在他司：`Project/fonrey/screenshots/房源/跟进管理/钥匙在他司.png` + - 新增委托：`Project/fonrey/screenshots/房源/跟进管理/新增委托.png` + - 新增实勘：`Project/fonrey/screenshots/房源/跟进管理/新增实勘.png` +- 在房源详情-房源信息里的内容可以进行不同角度的更新，这些都是在房源详情-房源信息里点击相关链接后弹出浮窗进行编辑： + - 编辑基本信息：`Project/fonrey/screenshots/房源/编辑基本信息.png` + - 编辑产证信息：`Project/fonrey/screenshots/房源/编辑产证信息.png` + - 编辑房屋介绍：`Project/fonrey/screenshots/房源/编辑房屋介绍.png` + - 编辑楼盘信息：`Project/fonrey/screenshots/房源/编辑楼盘信息.png` +- 修改5.2.7 附件信息 + - 附件信息：`Project/fonrey/screenshots/房源/附件信息.png` + - 请参考5.2.6 相册管理的描述方式，写附件信息管理的需求 +- 请根据现在文档里描述的房源管理的功能，更新 4. 用户故事与验收标准 +- 修改5.2.8 业主联系人 点击相关链接在弹出浮窗内进行快捷编辑以下内容, 请分析图片完善需求文档 + - 新增业主联系人：`Project/fonrey/screenshots/房源/新增业主联系人.png` + - 编辑业主联系人：`Project/fonrey/screenshots/房源/编辑业主联系人.png` + - 查看同业主房源：`Project/fonrey/screenshots/房源/查看同业主房源.png` +- 更新用户故事Story8 + - 扩大需求范围把5.2.8章节的内容变成用户故事 +- 更新8.3 相关截图参考 + - 请根据`Project/fonrey/screenshots/房源/`目录下所有图片的路径， + - 按照本文相关章节来对截图进行分类 +- 更新5.2.9 房源维护完成度，请根据以下截图内容完善此章节的需求 + - 房源诊断说明：`Project/fonrey/screenshots/房源/房源维护完成度.png` + - 房源维护完成度：`Project/fonrey/screenshots/房源/房源诊断说明.png` +- + + +### 客源管理 +- 现在请你先分析客源管理 + 1. 录入客源：`Project/fonrey/screenshots/客源/录入客源.png` + 2. 全部私客：`Project/fonrey/screenshots/客源/全部私客.png` + 3. 求购私客：`Project/fonrey/screenshots/客源/求购私客.png` + 4. 求租私客：`Project/fonrey/screenshots/客源/求租私客.png` + 5. 私客详情：`Project/fonrey/screenshots/客源/私客详情.png` + 1. 需求信息：`Project/fonrey/screenshots/客源/需求信息.png` + 2. 跟进记录： + 1. 全部：`Project/fonrey/screenshots/客源/跟进记录-全部.png` + 2. 修改跟进：`Project/fonrey/screenshots/客源/跟进记录-修改跟进.png` + 3. 写入跟进：`Project/fonrey/screenshots/客源/跟进记录-写入跟进.png` + 4. 敏感信息跟进：`Project/fonrey/screenshots/客源/跟进记录-敏感信息跟进.png` + 5. 其他跟进：`Project/fonrey/screenshots/客源/跟进记录-其他跟进.png` + 3. 带看：`Project/fonrey/screenshots/客源/带看.png` + 1. 新增预约：`Project/fonrey/screenshots/客源/新增预约带看.png` + 2. 新增带看：`Project/fonrey/screenshots/客源/新增带看.png` + 3. 陪看人：`Project/fonrey/screenshots/客源/陪看人 合作带看人.png` + 4. 带看房源：`Project/fonrey/screenshots/客源/带看房源.png` + 4. 客源解读：`Project/fonrey/screenshots/客源/客源解读.png` + 5. 二手配房：`Project/fonrey/screenshots/客源/二手配房.png` + 6. 客源信息概览：`Project/fonrey/screenshots/客源/客源信息概览.png` + 1. 编辑基础信息：`Project/fonrey/screenshots/客源/编辑基础信息.png` + 2. 收藏： + 1. 选择私客收藏夹： `Project/fonrey/screenshots/客源/选择私客收藏夹.png` + 2. 创建私客收藏夹：`Project/fonrey/screenshots/客源/创建私客收藏夹.png` + 3. 改等级：`Project/fonrey/screenshots/客源/改等级.png` + 4. 改状态： `Project/fonrey/screenshots/客源/改状态.png` + 5. 转公客：`Project/fonrey/screenshots/客源/转公客.png` + 6. 转成交：`Project/fonrey/screenshots/客源/转成交.png` + 1. 选择成交房源：`Project/fonrey/screenshots/客源/选择成交房源.png` + 7. 转无效：`Project/fonrey/screenshots/客源/转无效.png` + 7. 联系人：`Project/fonrey/screenshots/客源/联系人.png` + 1. 新增联系人：`Project/fonrey/screenshots/客源/新增联系人.png` + 2. 编辑联系人：`Project/fonrey/screenshots/客源/编辑联系人.png` + 8. 相关员工：`Project/fonrey/screenshots/客源/相关员工.png` + 1. 编辑相关员工：`Project/fonrey/screenshots/客源/编辑相关员工.png` + 9. 查看操作日志：`Project/fonrey/screenshots/客源/其他操作.png` + 1. 客源操作日志：`Project/fonrey/screenshots/客源/客源操作日志.png` + 6. 暂缓私客：`Project/fonrey/screenshots/客源/暂缓私客.png` + 7. 公客：`Project/fonrey/screenshots/客源/公客.png` + 8. 成交客：`Project/fonrey/screenshots/客源/成交客.png` + 9. 编辑客源：`Project/fonrey/screenshots/客源/编辑客源.png` + +### 楼盘管理 +- 现在请你分析楼盘管理 + - 楼盘管理列表：`Project/fonrey/screenshots/楼盘管理/楼盘管理.png` + - 楼盘详情 + - 楼盘信息：`Project/fonrey/screenshots/楼盘管理/楼盘信息.png` + - 编辑楼盘信息：`Project/fonrey/screenshots/楼盘管理/编辑楼盘信息.png` + - 楼栋管理：`Project/fonrey/screenshots/楼盘管理/楼栋管理.png + - 结构管理：`Project/fonrey/screenshots/楼盘管理/结构管理.png` + - 楼盘照片：`Project/fonrey/screenshots/楼盘管理/楼盘照片.png` + - 楼盘价格走势：`Project/fonrey/screenshots/楼盘管理/楼盘价格走势.png` + - 周边配套：`Project/fonrey/screenshots/楼盘管理/周边配套.png` + - 区域管理 + - 区域管理：`Project/fonrey/screenshots/楼盘管理/区域管理.png` + - 编辑商圈：`Project/fonrey/screenshots/楼盘管理/编辑商圈.png` + - 查看关联：`Project/fonrey/screenshots/楼盘管理/查看关联.png` + - 学校管理 + - 学校列表：`Project/fonrey/screenshots/楼盘管理/学校管理.png` + - 编辑学校：`Project/fonrey/screenshots/楼盘管理/编辑学校.png` + - 应用数据标准：<暂时不做> + +### 设置管理 + +- 首页设置：`Project/fonrey/screenshots/设置/首页设置.png` +- 房源设置： + - 新增编辑查看：`Project/fonrey/screenshots/设置/房源设置-新增编辑查看.png` + - 新增编辑查看-修改：`Project/fonrey/screenshots/设置/房源设置-新增编辑查看-修改.png` + - 字段标签设置： + - 字段标签设置：`Project/fonrey/screenshots/设置/房源设置-字段标签设置.png` + - 修改字段必填要求：`Project/fonrey/screenshots/设置/房源设置-字段标签设置-修改字段必填要求.png` + - 新增自定义字段：`Project/fonrey/screenshots/设置/房源设置-字段标签设置-新增自定义字段.png` + - 添加标签：`Project/fonrey/screenshots/设置/房源设置-字段标签设置-添加标签.png` + - 修改标签：`Project/fonrey/screenshots/设置/房源设置-字段标签设置-修改标签.png` + - 相关方设置 + - 相关方设置：`Project/fonrey/screenshots/设置/房源设置-相关方设置.png` + - 添加相关方：`Project/fonrey/screenshots/设置/添加相关方.png` + - 相关方设置-权限配置： + - 相关方设置-停用： + - 相关方消息通知-修改： + - 相关方保护规则设置：`Project/fonrey/screenshots/设置/房源设置-相关方保护规则设置.png` + - 跟进面访回访：`Project/fonrey/screenshots/设置/房源设置-跟进面访回访.png` + - 钥匙委托政府核验：`Project/fonrey/screenshots/设置/房源设置-钥匙委托政府核验.png` + - 楼盘设置：`Project/fonrey/screenshots/设置/房源设置-楼盘设置.png` + - 隐私保护及防骚扰：`Project/fonrey/screenshots/设置/房源设置-隐私保护及防骚扰.png` +- 客源设置 + - 客源基本配置：`Project/fonrey/screenshots/设置/客源设置-基本配置.jpg` + - 客源参数配置：`Project/fonrey/screenshots/设置/客源设置-客源参数配置.png` + - 客源相关方设置：`Project/fonrey/screenshots/设置/客源设置-客源相关方配置.png` + - 客源行政跨部门权限：`Project/fonrey/screenshots/设置/客源设置-客源行政跨部门权限.png` +- 人事OA设置 + - 组织人事基本设置：`Project/fonrey/screenshots/设置/人事OA设置-组织人事设置.png` \ No newline at end of file diff --git a/Project/fonrey/TECH_STACK/TECH_STACK.md b/Project/fonrey/TECH_STACK/TECH_STACK.md index f20d9ccf..08d345e1 100644 --- a/Project/fonrey/TECH_STACK/TECH_STACK.md +++ b/Project/fonrey/TECH_STACK/TECH_STACK.md @@ -128,16 +128,16 @@ apps/property/ 每个模块的具体技术决策（模型字段、服务层、缓存策略、HTMX/Celery 集成等）见对应子文档： -| 模块 | 技术方案文档 | PRD | 数据模型 | -|---|---|---|---| -| 登录认证 | [`登录管理技术方案.md`](./登录管理技术方案.md) | `PRD/登录管理/` | `DATA_MODEL/DATA_MODEL_LOGIN.md` | -| 权限管理 | [`权限管理系统技术方案.md`](./权限管理系统技术方案.md) | `PRD/权限管理/` | `DATA_MODEL/DATA_MODEL_PERMISSION.md` | -| 房源管理 | _待补充_ | `PRD/房源管理/` | `DATA_MODEL/DATA_MODEL_PROPERTY.md` | -| 客源管理 | _待补充_ | `PRD/客源管理/` | `DATA_MODEL/DATA_MODEL_CLIENT.md` | -| 楼盘管理 | _待补充_ | `PRD/房源管理/`（含楼盘） | `DATA_MODEL/DATA_MODEL_COMPLEX.md` | -| 组织人事 | _待补充_ | `PRD/组织人事管理/` | `DATA_MODEL/DATA_MODEL_ORG.md` | -| 系统设置 | _待补充_ | `PRD/系统配置/`、`PRD/系统管理/` | `DATA_MODEL/DATA_MODEL_PUBLIC.md` | -| 客户端发布 | 见本文档 §7 | `PRD/发布管理/客户端发布管理模块PRD.md` | — | +| 模块 | 技术方案文档 | PRD | 数据模型 | +| ----- | ---------------------------------- | -------------------------- | ------------------------------------- | +| 登录认证 | [`登录管理技术方案.md`](./登录管理技术方案.md) | `PRD/登录管理/` | `DATA_MODEL/DATA_MODEL_LOGIN.md` | +| 权限管理 | [`权限管理系统技术方案.md`](./权限管理系统技术方案.md) | `PRD/权限管理/` | `DATA_MODEL/DATA_MODEL_PERMISSION.md` | +| 房源管理 | _待补充_ | `PRD/房源管理/` | `DATA_MODEL/DATA_MODEL_PROPERTY.md` | +| 客源管理 | _待补充_ | `PRD/客源管理/` | `DATA_MODEL/DATA_MODEL_CLIENT.md` | +| 楼盘管理 | _待补充_ | `PRD/房源管理/`（含楼盘） | `DATA_MODEL/DATA_MODEL_COMPLEX.md` | +| 组织人事 | _待补充_ | `PRD/组织人事管理/` | `DATA_MODEL/DATA_MODEL_ORG.md` | +| 系统设置 | _待补充_ | `PRD/系统配置/`、`PRD/系统管理/` | `DATA_MODEL/DATA_MODEL_PUBLIC.md` | +| 客户端发布 | 见本文档 §7 | `PRD/发布管理/客户端发布管理模块PRD.md` | — | **总览数据模型**：[`DATA_MODEL/DATA_MODEL.md`](../DATA_MODEL/DATA_MODEL.md) **MVP 范围与产品总览**：[`PRD/PRD_MVP.md`](../PRD/PRD_MVP.md) diff --git a/Project/fonrey/UI&UX/UI_SYSTEM.md b/Project/fonrey/UI&UX/UI_SYSTEM模板.md similarity index 100% rename from Project/fonrey/UI&UX/UI_SYSTEM.md rename to Project/fonrey/UI&UX/UI_SYSTEM模板.md diff --git a/Project/fonrey/prompt/UI System 生成实操.md b/Project/fonrey/prompt/UI System 生成实操.md new file mode 100644 index 00000000..0ee11db8 --- /dev/null +++ b/Project/fonrey/prompt/UI System 生成实操.md @@ -0,0 +1,468 @@ + + +## 角色与背景 + +你是一名资深 UI/UX 架构师，拥有 B2B SaaS 产品的设计系统（Design System）搭建经验。 +你的核心方法论：系统先于页面，规范先于设计，复用先于新建。 +你输出的设计系统文档须做到：开发团队无需询问设计师即可实现一致的界面。 + +**工作目录**：`~/Workspace/nexus` + +**你的职责边界**： +- ✅ 负责：设计 Token、组件规范、页面布局模板、交互状态、图标规范、响应式策略 +- ❌ 不负责：功能需求定义（见 PRD）、后端实现（见 TECH_STACK）、数据库设计（见 DATA_MODEL） + +--- + +## 项目背景 + +**项目**：**Fonrey（房睿）**——面向房地产经纪公司的 B2B SaaS 平台 +**目标用户**：房地产经纪人（高频操作，效率优先）、店长、运营行政、系统管理员 +**使用场景**：桌面 Web 为主（1280px+ 宽屏），当前阶段不设计移动端 + +请读取以下文档作为设计输入： +- 技术约束（前端框架）：`Project/fonrey/TECH_STACK/TECH_STACK.md` +- 功能范围参考（了解有哪些模块和页面）： +**产品文档（PRD）**： +- 房源管理PRD: `Project/fonrey/PRD/房源管理/房源管理模块PRD.md` +- 楼盘管理PRD: `Project/fonrey/PRD/房源管理/楼盘管理模块PRD.md` +- 客源管理PRD: `Project/fonrey/PRD/客源管理/客源管理模块PRD.md` +- 权限管理PRD: `Project/fonrey/PRD/权限管理/权限管理模块PRD.md` +- 组织人事管理PRD: `Project/fonrey/PRD/组织人事管理/组织人事管理模块PRD.md` +- 系统管理PRD: `Project/fonrey/PRD/系统管理/系统管理模块PRD` +- 登录管理PRD: `Project/fonrey/PRD/登录管理/用户登录管理模块PRD.md` +- 发布管理PRD: `Project/fonrey/PRD/发布管理/客户端发布管理模块PRD.md` + + +--- + +## 前端技术约束（设计须在此范围内落地） + +| 约束项 | 要求 | 对设计的影响 | +|--------|------|------------| +| CSS 框架 | Tailwind CSS（Utility-first） | 设计 Token 须映射为 Tailwind 配置值 | +| 交互框架 | HTMX（局部 DOM 刷新） | 须设计加载中、成功、失败等局部刷新状态 | +| 前端状态 | Alpine.js | 弹窗、多选、折叠等交互由 Alpine.js 驱动 | +| 组件形式 | Django HTML 模板（非 React 组件） | 组件以 HTML + Tailwind class 描述，不输出 JSX | +| 图标库 | 【填写：如 Heroicons / Lucide / Tabler Icons】 | 统一使用同一图标库 | +| 当前阶段 | 仅 Web 端（桌面优先） | 移动端适配为 v2，当前只需确保 1280px+ 体验 | + +--- + +## 设计风格偏好 + +- 整体风格：专业、克制、高效，参考 Linear / Notion / Salesforce Lightning +- 主色调：绿色系/ 由你提案 +- 圆角风格：中等圆角（8px） +- 密度：紧凑型（B2B 工具，数据密度高） +- 竞品截图，请根据 B2B SaaS 行业最佳实践提案 + 请参考：`Project/fonrey/PRD/竞品截图.md` +- 组件清单，分析竞品产品使用的UI组件 + 请参考：`Project/fonrey/UI&UX/组件清单.md` + +--- + +## 本次设计范围 + +**全量设计（首次建立 UI System）**： +- 设计 Token（颜色、字体、间距、阴影） +- 基础组件（按钮、输入框、下拉、表格、分页、弹窗、Toast） +- 业务组件（房源卡片、状态标签、筛选栏、操作菜单） +- 页面布局模板（侧边栏导航 + 内容区 + 详情抽屉） + +--- + +## 输出要求 + +请按以下结构输出完整 UI System 设计文档，保存至： +`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` + +输出语言：**中文**（组件名、CSS 类名、Token 名称保留英文） + +--- + + +# Fonrey UI System 设计规范 + +**版本**：v【x.x】 +**最后更新**：【当前日期】 +**维护者**：【UI/UX 负责人】 +**适用技术栈**：Tailwind CSS + HTMX + Alpine.js + Django 模板 + +--- + +## 1. 设计原则（Design Principles） + +> 约 3-5 条，指导所有设计决策，须与 B2B 工具效率场景匹配。 + +- **效率优先**：减少视觉噪音，让用户聚焦在数据和操作上 +- 【补充其他原则】 + +--- + +## 2. 设计 Token（Design Tokens） + +### 2.1 颜色系统 + +> 所有颜色须映射为 Tailwind `tailwind.config.js` 的 `theme.extend.colors` 配置。 + +**品牌色（Primary）** + +| Token 名称 | Hex 值 | Tailwind 类 | 使用场景 | +|-----------|--------|------------|---------| +| `primary-600` | #2563EB | `bg-primary-600` | 主按钮、激活态 | +| `primary-100` | #DBEAFE | `bg-primary-100` | 选中背景、标签底色 | + +**语义色（Semantic）** + +| Token | Hex | 使用场景 | +|-------|-----|---------| +| `success` | #16A34A | 操作成功、状态标签 | +| `warning` | #D97706 | 待确认、临期提醒 | +| `danger` | #DC2626 | 删除、错误、逾期 | +| `neutral-*` | 灰阶系列 | 文字、边框、背景 | + +**背景层级** + +| 层级 | Token | 使用场景 | +|------|-------|---------| +| 页面背景 | `bg-neutral-50` | 整体页面底色 | +| 卡片/面板 | `bg-white` | 内容区块 | +| 悬浮层 | `bg-white + shadow-lg` | 弹窗、下拉菜单 | + +### 2.2 字体系统 + +| 层级 | 字号 | 字重 | 行高 | Tailwind 类 | 使用场景 | +|------|------|------|------|------------|---------| +| 页面标题 | 24px | 600 | 32px | `text-2xl font-semibold` | 页面 H1 | +| 区块标题 | 18px | 600 | 28px | `text-lg font-semibold` | 卡片/面板标题 | +| 正文 | 14px | 400 | 20px | `text-sm` | 表单标签、描述 | +| 辅助文字 | 12px | 400 | 16px | `text-xs text-neutral-500` | 提示、占位符 | +| 数据展示 | 14px | 500 | 20px | `text-sm font-medium` | 表格数据 | + +### 2.3 间距系统 + +> 遵循 4px 基础栅格，统一使用 Tailwind 间距 Token。 + +| 场景 | Token | 值 | +|------|-------|---| +| 组件内边距（小） | `p-2` / `p-3` | 8px / 12px | +| 组件内边距（标准） | `p-4` | 16px | +| 卡片内边距 | `p-6` | 24px | +| 区块间距 | `gap-6` / `mb-6` | 24px | +| 页面边距 | `px-8` | 32px | + +### 2.4 阴影与圆角 + +| Token | 值 | 使用场景 | +|-------|---|---------| +| `rounded-md` | 6px | 按钮、输入框 | +| `rounded-lg` | 8px | 卡片、面板 | +| `rounded-xl` | 12px | 弹窗、抽屉 | +| `shadow-sm` | 细微阴影 | 卡片悬停 | +| `shadow-lg` | 明显阴影 | 弹窗、下拉菜单 | + +--- + +## 3. 基础组件规范（Base Components） + +> 每个组件包含：视觉规范、状态变体、Tailwind 实现示意、使用场景与禁忌。 + +### 3.1 按钮（Button） + +**变体** + +| 变体 | 用途 | 主要 Tailwind 类 | +|------|------|----------------| +| Primary | 主操作（每个区域唯一） | `bg-primary-600 text-white hover:bg-primary-700` | +| Secondary | 次级操作 | `bg-white border border-neutral-300 text-neutral-700` | +| Danger | 删除、不可逆操作 | `bg-danger text-white` | +| Ghost | 工具栏、表格行操作 | `text-neutral-600 hover:bg-neutral-100` | +| Link | 内联跳转 | `text-primary-600 underline` | + +**尺寸** + +| 尺寸 | 场景 | Tailwind 类 | +|------|------|------------| +| sm | 表格操作、标签内 | `px-3 py-1.5 text-xs` | +| md（默认） | 表单提交、工具栏 | `px-4 py-2 text-sm` | +| lg | 页面主操作 | `px-6 py-2.5 text-sm` | + +**状态**：默认 / Hover / Focus（`ring-2 ring-primary-500`） / 加载中（禁用 + Spinner）/ 禁用（`opacity-50 cursor-not-allowed`） + +**禁忌**： +- ❌ 同一区域不得出现两个 Primary 按钮 +- ❌ Danger 按钮须二次确认，不得直接触发删除 + +--- + +### 3.2 输入框（Input） + +**状态**：默认 / Focus / 错误（红色边框 + 错误文案）/ 禁用 / 只读 + +```html + +
+ + +

+

+
+``` + +**变体**：单行文本 / 多行文本（Textarea）/ 数字输入 / 带前缀/后缀图标 / 带单位 + +--- + +### 3.3 下拉选择（Select / Dropdown） + +- **原生 Select**：简单单选场景，Tailwind 统一样式 +- **Alpine.js 自定义下拉**：需要搜索、多选、分组的场景 +- **HTMX 动态加载选项**：选项依赖其他字段时，使用 `hx-get` 动态拉取 + +**多选下拉**须展示已选数量 Badge，支持一键清除。 + +--- + +### 3.4 表格（Table） + +**结构规范** + +| 区域 | 说明 | +|------|------| +| 表头 | 固定，含排序箭头；`bg-neutral-50 text-xs font-medium text-neutral-500` | +| 数据行 | 斑马纹可选；Hover 行高亮 `hover:bg-neutral-50` | +| 操作列 | 固定在最右侧，使用 Ghost 按钮或图标按钮 | +| 空状态 | 居中展示空状态插图 + 引导文案 | +| 分页 | 表格底部，显示"共 N 条"+ 页码 + 每页条数 | + +**HTMX 局部刷新**：筛选、排序、翻页均触发 `hx-get` 只刷新表格区域，不刷新整页。 + +--- + +### 3.5 弹窗与抽屉（Modal & Drawer） + +| 类型 | 场景 | 宽度 | +|------|------|------| +| 确认弹窗 | 删除确认、不可逆操作 | 400px | +| 表单弹窗 | 新增/编辑（字段较少） | 560px | +| 详情抽屉 | 查看详情、新增/编辑（字段较多） | 640px（从右侧滑入） | +| 全屏弹窗 | 复杂配置（如权限矩阵） | 80vw | + +**Alpine.js 控制**：`x-data="{ open: false }"` 控制显示隐藏，ESC 键关闭，点击遮罩关闭（确认弹窗除外）。 + +--- + +### 3.6 Toast 通知 + +| 类型 | 触发场景 | 停留时长 | +|------|---------|---------| +| Success | 操作成功 | 3s 自动消失 | +| Error | 操作失败、网络错误 | 5s，含手动关闭 | +| Warning | 操作有副作用（如批量覆盖） | 5s，含手动关闭 | +| Info | 异步任务已提交 | 3s 自动消失 | + +**HTMX 触发**：后端响应头 `HX-Trigger: {"showToast": {"type": "success", "message": "保存成功"}}` 触发全局 Toast。 + +Toast 统一出现在页面右下角，支持同时展示多条，新消息堆叠在上方。 + +--- + +### 3.7 状态标签（Badge / Tag） + +> 用于房源状态、客源状态、任务状态等高频展示场景。 + +| 状态 | 颜色 | Tailwind 类 | +|------|------|------------| +| 在售 / 激活 | 绿色 | `bg-success/10 text-success` | +| 待确认 / 跟进中 | 黄色 | `bg-warning/10 text-warning` | +| 已成交 / 完成 | 蓝色 | `bg-primary-100 text-primary-700` | +| 已下架 / 停用 | 灰色 | `bg-neutral-100 text-neutral-500` | +| 紧急 / 逾期 | 红色 | `bg-danger/10 text-danger` | + +--- + +### 3.8 加载状态（Loading States） + +| 场景 | 实现方式 | +|------|---------| +| HTMX 局部请求中 | 目标区域加载骨架屏（Skeleton），使用 `htmx:beforeRequest` 触发 | +| 按钮提交中 | 按钮禁用 + 内嵌 Spinner，文案改为"保存中…" | +| 页面首次加载 | 内容区骨架屏（Skeleton），避免布局抖动 | +| 异步任务进行中 | 顶部进度条（Slim progress bar）+ Toast 说明 | + +--- + +## 4. 业务组件规范（Business Components） + +> 针对 Fonrey 特有的业务场景设计，复用基础组件。 + +### 4.1 房源卡片（Property Card） + +- 展示字段：封面图、房源标题、面积/户型/楼层、挂牌价、状态标签、经纪人、更新时间 +- 操作：查看详情（卡片点击）、快捷操作菜单（⋯ 三点按钮） +- 尺寸：列表模式（横向宽卡）/ 网格模式（方形卡片） + +### 4.2 筛选栏（Filter Bar） + +- 常驻筛选项（横向排列）：区域、价格区间、户型、状态 +- 高级筛选（折叠，点击展开）：更多条件 +- 已选筛选条件以 Tag 形式展示，支持单个删除和一键清除 +- 筛选变化触发 `hx-get` 局部刷新列表区域 + +### 4.3 数据统计卡片（Stat Card） + +| 区域 | 内容 | +|------|------| +| 图标 | 业务含义图标（背景色块） | +| 数值 | 大号字体，突出展示 | +| 标签 | 指标名称 | +| 趋势 | 环比箭头 + 百分比（可选） | + +### 4.4 操作菜单（Action Menu） + +- 触发方式：三点图标按钮（`⋯`）或右键（不推荐） +- Alpine.js 控制显示隐藏，点击外部关闭 +- 危险操作（删除）排在最后，用红色文字区分，且用分割线隔开 + +--- + +## 5. 页面布局模板（Page Layout Templates） + +### 5.1 整体框架 + +``` +┌──────────────────────────────────────────────────────┐ +│ 顶部导航栏（Logo + 租户名 + 用户菜单）高度 56px │ +├────────────┬─────────────────────────────────────────┤ +│ 侧边导航 │ 主内容区 │ +│ 宽 240px │ ┌─────────────────────────────────┐ │ +│ │ │ 页面标题 + 面包屑 + 主操作按钮 │ │ +│ 折叠态 │ ├─────────────────────────────────┤ │ +│ 宽 64px │ │ 筛选栏 / 工具栏 │ │ +│ │ ├─────────────────────────────────┤ │ +│ │ │ 内容主体（列表 / 详情 / 表单） │ │ +│ │ └─────────────────────────────────┘ │ +└────────────┴─────────────────────────────────────────┘ +``` + +### 5.2 列表页模板 + +适用模块：房源列表、客源列表、楼盘列表 + +``` +页面标题 + 新增按钮 +└── 筛选栏（横向，支持高级筛选折叠） +└── 工具栏（批量操作 + 视图切换 + 导出） +└── 列表主体（表格或卡片网格，HTMX 局部刷新） +└── 分页栏 +``` + +### 5.3 详情页模板（含右侧抽屉） + +适用模块：房源详情、客源详情、楼盘详情 + +``` +面包屑导航 +└── 详情头部（标题 + 状态 + 主操作按钮组） +└── Tab 导航（基本信息 / 跟进记录 / 关联数据 / 操作日志） +└── Tab 内容（HTMX 懒加载，切换 Tab 局部刷新内容区） +└── 右侧抽屉（新增/编辑表单，从右侧滑入，不遮挡主内容） +``` + +### 5.4 设置页模板 + +适用模块：系统设置、权限管理 + +``` +左侧设置分类导航（二级菜单） +└── 右侧内容区（表单 / 列表，保存按钮固定在底部） +``` + +--- + +## 6. 交互状态规范（Interaction States） + +### 6.1 HTMX 请求生命周期 + +| 阶段 | 视觉反馈 | +|------|---------| +| 请求发出前（`htmx:beforeRequest`） | 目标区域叠加半透明遮罩 + 骨架屏 | +| 请求进行中 | 触发按钮禁用 + Spinner | +| 请求成功（`htmx:afterSettle`） | 移除遮罩，内容更新，触发 Toast（如有） | +| 请求失败（`htmx:responseError`） | 移除遮罩，触发 Error Toast，保留原内容 | + +### 6.2 表单校验反馈 + +- **前端实时校验**（Alpine.js）：blur 时触发，不阻止提交 +- **后端校验返回**（HTMX）：HTTP 422，返回含错误信息的表单 Partial，字段级红色提示 +- 错误提示位置：字段下方，不使用顶部错误摘要（避免用户滚动查找） + +### 6.3 空状态设计 + +每类空状态须提供：插图（SVG）+ 标题 + 描述 + 引导操作按钮 + +| 场景 | 标题示例 | 引导操作 | +|------|---------|---------| +| 列表无数据 | "暂无房源" | 「新增第一套房源」按钮 | +| 搜索无结果 | "未找到匹配结果" | 「清除筛选条件」链接 | +| 权限不足 | "暂无访问权限" | 联系管理员 | + +--- + +## 7. 图标规范（Icon Guidelines） + +- **图标库**：【填写选定库名，如 Heroicons 24px Outline / Solid】 +- **尺寸**：工具栏图标 20px / 行内图标 16px / 状态图标 14px +- **颜色**：继承父元素文字颜色（`currentColor`），不单独设置颜色 +- **语义一致性**：同一操作在全产品内使用同一图标（新增始终用 `+` / `PlusIcon`） + +**常用图标映射** + +| 操作 | 图标名称 | +|------|---------| +| 新增 | PlusIcon | +| 编辑 | PencilIcon | +| 删除 | TrashIcon | +| 搜索 | MagnifyingGlassIcon | +| 筛选 | FunnelIcon | +| 导出 | ArrowDownTrayIcon | +| 更多操作 | EllipsisHorizontalIcon | +| 关闭 | XMarkIcon | + +--- + +## 8. 可访问性基线（Accessibility Baseline） + +- 所有表单字段须关联 `