diff --git a/Project/fonrey/PRD/竞品截图.md b/Project/fonrey/PRD/竞品截图.md index b3587cd1..a43cc923 100644 --- a/Project/fonrey/PRD/竞品截图.md +++ b/Project/fonrey/PRD/竞品截图.md @@ -29,33 +29,26 @@ ### 房源管理 -- 现在请你先分析房源管理： - 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` 包含以上需求分析 -- 房源列表会分: +- 房源列表：`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` -- 更新房源详情分成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` @@ -67,7 +60,20 @@ - `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/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` @@ -78,96 +84,71 @@ - 钥匙在他司：`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` +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` diff --git a/Project/fonrey/prompt/UI 组件规范文档生成实操.md b/Project/fonrey/prompt/UI 组件规范文档生成实操.md new file mode 100644 index 00000000..59af8eeb --- /dev/null +++ b/Project/fonrey/prompt/UI 组件规范文档生成实操.md @@ -0,0 +1,79 @@ + +## 角色与背景 + +你是一名资深 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+ 体验 | + +--- + +## 设计风格偏好 + +参考已有 UI_SYSTEM.md：`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` + +--- + +## 本次设计范围 + + +**增量设计**： +- 参考已有 UI_SYSTEM.md：`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` +按照现有的组件设计规范重新设计和整理`Project/fonrey/UI_SYSTEM/组件清单.md`里所有的特殊组件（请同时读取文档里的图片以便了解具体组件的表现形式），结合前端技术约束描述具体实现落地的方法。 + +--- + +## 输出要求 + +请按以下结构输出完整 组件规范设计文档，保存至： +`Project/fonrey/UI_SYSTEM/组件规范设计.md` + +输出语言：**中文**（组件名、CSS 类名、Token 名称保留英文） + + +## 补充说明 + +- 如提供了竞品截图或参考风格图，请先分析其设计语言（配色、圆角、密度），再结合 B2B SaaS 特点提案 +- 所有组件规范须在 Tailwind CSS 约束内实现，不得引入独立 CSS 文件或 CSS-in-JS +- 如发现 PRD 中描述的交互在技术约束下无法实现，请在输出前说明并提供替代方案 +- 输出语言：**中文**（组件名、Token 名、Tailwind 类保留英文） diff --git a/Project/fonrey/prompt/为客源列表生成模块UI设计文档.md b/Project/fonrey/prompt/为客源列表生成模块UI设计文档.md new file mode 100644 index 00000000..e8db38c8 --- /dev/null +++ b/Project/fonrey/prompt/为客源列表生成模块UI设计文档.md @@ -0,0 +1,207 @@ +---PROMPT START--- +# 任务：为 客源列表生成模块 UI 设计文档 +## 你的角色 +你是 Fonrey 房产经纪管理系统的 **UI/UX 架构师**，负责根据竞品截图和 PRD 功能描述，产出一份标准化的模块级 UI 设计文档。该文档将直接交给 AI Engineer 用于编码实现，必须包含足够的细节，Engineer 无需再问任何问题。 + +## 全局设计约束（必须严格遵守） +> 所有设计决策必须符合 `Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` 中的设计规范。核心约束如下： +- **技术栈**：Tailwind CSS + HTMX + Alpine.js + Django HTML 模板（非 React/Vue/JSX） +- **图标库**：Heroicons v2（Outline 24px 默认，Solid 20px 强调，Mini 16px 极密场景） +- **主色**：Teal `#0F766E`（`primary-600`），所有颜色引用 Token，禁止硬编码 Hex +- **圆角**：`rounded-lg`（8px）为默认，表格行/小组件用 `rounded-md`（6px） +- **表格行高**：56px（`h-14`） +- **字体**：Inter + PingFang SC，正文 `text-sm`（14px） +- **焦点环**：`focus-visible:ring-2 focus-visible:ring-primary-600/40` +- **桌面优先**：≥1280px，不做移动端适配 +- **禁止独立 CSS 文件或 CSS-in-JS**：所有样式用 Tailwind utility class（少量例外如 Flatpickr 覆盖样式） +- **组件实现参考**：`Project/fonrey/UI_SYSTEM/组件规范设计.md`（含 20 个特殊组件的完整 HTML + Alpine.js 实现） +--- +## 本次任务输入 + +### 1. 目标模块 +**模块名称**：客源列表 +**模块描述**：客源列表 +### 2. PRD 功能文档路径 +``` +客源列表：`Project/fonrey/PRD/客源管理/客源管理模块PRD.md` 章节5.1 客源列表 +``` +请读取该文件，理解每个功能点的业务逻辑和验收标准。 + +### 3. DATA_MODEL文档路径 +``` +`Project/fonrey/DATA_MODEL/DATA_MODEL_CLIENT.md` +``` +请读取该文件，理解该模块的数据模型。 + +### 4. 竞品参考截图 +请读取以下截图文件作为视觉参考（所有截图均在 `Project/fonrey/screenshots/` 目录下）： +- 客源列表： + - `Project/fonrey/screenshots/客源/全部私客.png` + - `Project/fonrey/screenshots/客源/求购私客.png` + - `Project/fonrey/screenshots/客源/求租私客.png` +### 5. MVP 优先级参考 +请参考 `Project/fonrey/PRD/PRD_MVP.md`，在设计文档中标注每个页面/功能的优先级（P0/P1/P2）。 + + +## 输出格式要求 +输出一份完整的 Markdown 文档，文件名为 `客源_UI设计.md`，结构如下： +```markdown +# {{模块名称}} UI 设计文档 +> **版本**：v1.0 · **日期**：{今日日期} +> **依赖规范**：UI_SYSTEM.md v1.1 · 组件规范设计.md v1.0 +> **PRD 来源**：{PRD文件路径} +> **优先级**：P0 功能在本文档中用 🔴 标注，P1 用 🟡，P2 用 ⚫ +--- +## 目录 +（列出本文档所有章节） +--- +## 1. 模块概述 +### 1.1 功能范围 +（从 PRD 提取本模块包含的所有功能，按优先级分组列表） +### 1.2 页面清单 +（列出本模块所有页面/视图，每行包含：页面名称 | URL 模式建议 | 优先级 | 对应 PRD 章节） +### 1.3 用户角色与权限差异 +（说明不同角色（经纪人/店长/管理员）在本模块的视图差异，如哪些字段/按钮对特定角色隐藏） +--- +## 2. 页面设计规范 +> 每个页面单独一节，按以下子结构输出。 +### 2.N {页面名称}（{优先级} 🔴/🟡/⚫） +#### 2.N.1 页面概述 +- **URL**：`/模块/页面/` +- **访问入口**：（从哪里进入此页面） +- **页面职责**：（一句话） +- **竞品参考截图**：`{截图路径}` +#### 2.N.2 布局结构 +（用文字描述页面整体布局，如：三栏布局、左侧边栏+右侧主内容区、全宽列表等） + +┌──────────────────────────────────────────────────────────┐ +│ 顶部区域（Breadcrumb / 页面标题 / 主操作按钮） │ +├──────────────────────────────────────────────────────────┤ +│ 筛选区域（可折叠） │ +├──────────────────────────────────────────────────────────┤ +│ 工具栏（批量操作 / 排序切换 / 列设置 / 导出） │ +├──────────────────────────────────────────────────────────┤ +│ 主内容区（表格 / 详情卡片 / 表单） │ +├──────────────────────────────────────────────────────────┤ +│ 分页栏 │ +└──────────────────────────────────────────────────────────┘ + +（根据实际页面调整此 ASCII 图） +#### 2.N.3 区域详细规范 +> 每个区域独立描述，包含：组件类型、字段/按钮清单、交互逻辑 +**[区域名称，如：搜索筛选区]** +| 属性 | 说明 | +|---|---| +| 组件 | （引用组件规范设计.md 中的组件名，如：Date Range Picker） | +| 展开/收起 | （是否支持折叠，默认状态） | +| 筛选字段 | （列出所有筛选字段及输入类型） | +| 联动逻辑 | （字段间的联动关系） | +| HTMX 行为 | （如：`hx-get="/api/xxx/" hx-trigger="change" hx-target="#table-body"`） | +**[区域名称，如：数据表格]** +| 列名 | 数据类型 | 宽度 | 排序 | 特殊渲染 | +|---|---|---|---|---| +| （列名） | （string/number/date/badge/...） | （fixed px 或 auto） | （是/否） | （如：Tag、趋势箭头、行内按钮） | +（补充表格交互说明：行点击跳转、批量选择、列固定等） +#### 2.N.4 使用的特殊组件 +| 组件名 | 来源（组件规范设计.md 章节） | 用途 | 自定义说明 | +|---|---|---|---| +| （组件名） | （如：§1 Data Table） | （用于展示xxx列表） | （如果有与标准实现不同的地方，详细说明） | +#### 2.N.5 空状态设计 +（描述列表/表格无数据时的展示方式，参考 UI_SYSTEM.md §6.3 空状态设计） +#### 2.N.6 Loading 状态 +（描述数据加载中的骨架屏或加载指示方案） +--- +## 3. 弹窗/抽屉设计规范 +> 每个弹窗/抽屉独立一节，按以下结构输出。 +### 3.N {弹窗/抽屉名称}（{触发入口}） +#### 3.N.1 触发方式 +- **触发位置**：（如：房源详情页-调价链接） +- **组件类型**：Modal Dialog / Drawer（选一个，说明选择理由） +- **尺寸**：（Modal: max-w-sm/md/lg/xl/2xl；Drawer: w-[480px]/w-[640px]） +- **竞品截图**：`{截图路径}` +#### 3.N.2 表单字段规范 +| 字段名 | 组件类型 | 必填 | 校验规则 | 默认值/预填值 | +|---|---|---|---|---| +| （字段名） | （Input/Select/Textarea/DatePicker/Toggle/TreeSelect/MultiTag/...） | （是/否） | （规则描述） | （如有） | +#### 3.N.3 提交行为 +- **提交方式**：HTMX `hx-post` / `hx-put` / `hx-patch` +- **成功响应**：（如：关闭弹窗 + Toast "保存成功" + 刷新目标区域） +- **失败响应（422）**：（字段级错误提示） +- **HTMX 属性**：（完整写出 hx-post/hx-target/hx-swap/hx-on 等） +#### 3.N.4 使用的特殊组件 +| 组件名 | 来源 | 用途 | +|---|---|---| +--- +## 4. 交互状态规范 +### 4.1 全局状态机（如有） +（如房源状态机：在售 → 暂缓 → 成交 → 下架，用状态流转图描述） +### 4.2 权限控制矩阵 +（描述不同角色对本模块各操作的权限，如：删除只有管理员可见） +| 操作 | 经纪人 | 店长 | 管理员 | +|---|---|---|---| +### 4.3 HTMX 请求规范 +（列出本模块所有 HTMX 请求，包含：触发事件、URL、target、swap 方式、Loading 行为） +| 操作 | hx-trigger | hx-get/post/... | hx-target | hx-swap | Loading | +|---|---|---|---|---|---| +--- +## 5. 关键数据字段说明 +（列出本模块所有需要后端支持的数据字段，便于 Engineer 与后端联调） +| 字段名（英文） | 显示名 | 数据类型 | 说明 | +|---|---|---|---| +--- +## 6. 竞品截图对应关系 +（将本模块所有参考截图按功能分类整理，说明截图对应设计文档的哪个章节） +| 截图路径 | 对应功能 | 对应文档章节 | 采纳的设计要点 | +|---|---|---|---| +--- +## 7. 实现优先级与工期估算 +| 页面/功能 | 优先级 | 特殊组件复杂度 | 工期估算（前端） | +|---|---|---|---| +--- +## 8. 开放问题（待决策） +（列出设计过程中发现的、需要产品/后端确认的问题） +| # | 问题 | 影响范围 | 待确认方 | +|---|---|---|---| +``` +--- +## 额外要求 +1. **截图优先**：有截图的功能，以截图呈现的 UI 为主要参考，PRD 文字为补充说明；截图和 PRD 有冲突时，以截图为准，并在文档中注明差异。 +2. **组件引用**：每次使用特殊组件（如 Data Table、Tree Select、Drawer 等），必须在"使用的特殊组件"表格中引用组件规范设计.md 的对应章节编号，并说明如有差异的自定义部分。 +3. **HTMX 落地**：每个需要异步更新的交互（筛选、分页、弹窗提交）必须写出完整的 HTMX 属性，Engineer 可以直接复制使用。 +4. **Alpine.js 分工**：说明哪些状态由 Alpine.js 管理（弹窗开关、选中状态、表单联动），哪些交互走 HTMX（数据加载、表单提交）。 +5. **禁止设计移动端**：所有布局仅针对 ≥1280px 桌面端。 +6. **优先级标注**：P0 功能用 🔴，P1 用 🟡，P2 用 ⚫，确保 Engineer 知道实现顺序。 +7. **不要遗漏边界状态**：每个列表页必须包含空状态设计；每个表单必须包含校验失败状态；每个异步操作必须包含 Loading 状态。 +---PROMPT END--- + +--- + +## 已生成的模块 UI 设计文档 +| 模块 | 文件路径 | 生成日期 | 覆盖 PRD 版本 | +|---|---|---|---| +| （待填入） | | | | +| （待填入） | | | | + +--- +## 变量填写示例（房源列表页） +``` +{{模块名称}} → 房源管理 +{{一句话描述模块核心功能}} → 管理房产经纪公司的二手房/租赁房源，支持录入、筛选、跟进、状态变更 +{{PRD文件路径}} → 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` +``` +--- +## 注意事项 +- 单次提示词只针对**一个模块**，不要同时处理多个模块 +- 对于同一模块内页面较多的情况（如房源管理有列表、详情、新增、跟进等多个页面），**全部包含在同一份文档中**，通过 `§2.N` 分节区分 +- 弹窗数量较多时（如房源详情有 10+ 个编辑弹窗），可以将**结构相似的弹窗合并为一个通用弹窗规范**，仅列出字段差异表 +- 生成完成后，将文档路径更新到上方「已生成的模块 UI 设计文档」表格中