From 6270ba56ee25a866a0665b392a660544f24243d5 Mon Sep 17 00:00:00 2001 From: Shen Wei Date: Sun, 26 Apr 2026 12:49:46 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fonrey/UI_DESIGN/客源管理/编辑客源_UI.md | 733 ++++++++ Project/fonrey/UI_DESIGN/新增客源_UI.html | 643 +++++++ Project/fonrey/UI_DESIGN/新增客源_UI.md | 747 ++++++++ Project/fonrey/UI_DESIGN/编辑客源_UI.html | 1082 +++++++++++ Project/fonrey/{UI_SYSTEM => }/preview.html | 1632 ++++++++--------- ...生成提示词.md => 为 新增客源 生成模块 UI 设计文档.md} | 44 +- .../prompt/为 编辑客源生成模块 UI 设计文档.md | 307 ++++ ...y_PRD_提示词模板_v2.md => PRD_提示词模板_v2.md} | 0 ...板_v2.md => TECH_STACK_DATA_MODEL_提示词模板_v2.md} | 0 ...提示词模板_v1.md => UI_SYSTEM_提示词模板_v1.md} | 0 .../提示词模板/模块UI设计文档生成提示词_v1.md | 310 ++++ .../模块UI静态原型页面生成提示词_v1.md | 72 + ...示词模板_v1.md => 系统设计Review_提示词模板_v1.md} | 0 Project/fonrey/prompt/文档模板/TASK.md | 42 + 14 files changed, 4764 insertions(+), 848 deletions(-) create mode 100644 Project/fonrey/UI_DESIGN/客源管理/编辑客源_UI.md create mode 100644 Project/fonrey/UI_DESIGN/新增客源_UI.html create mode 100644 Project/fonrey/UI_DESIGN/新增客源_UI.md create mode 100644 Project/fonrey/UI_DESIGN/编辑客源_UI.html rename Project/fonrey/{UI_SYSTEM => }/preview.html (98%) rename Project/fonrey/prompt/{提示词模板/模块UI设计文档生成提示词.md => 为 新增客源 生成模块 UI 设计文档.md} (91%) create mode 100644 Project/fonrey/prompt/为 编辑客源生成模块 UI 设计文档.md rename Project/fonrey/prompt/提示词模板/{Fonrey_PRD_提示词模板_v2.md => PRD_提示词模板_v2.md} (100%) rename Project/fonrey/prompt/提示词模板/{Fonrey_TECH_STACK_DATA_MODEL_提示词模板_v2.md => TECH_STACK_DATA_MODEL_提示词模板_v2.md} (100%) rename Project/fonrey/prompt/提示词模板/{Fonrey_UI_SYSTEM_提示词模板_v1.md => UI_SYSTEM_提示词模板_v1.md} (100%) create mode 100644 Project/fonrey/prompt/提示词模板/模块UI设计文档生成提示词_v1.md create mode 100644 Project/fonrey/prompt/提示词模板/模块UI静态原型页面生成提示词_v1.md rename Project/fonrey/prompt/提示词模板/{Fonrey_系统设计Review_提示词模板_v1.md => 系统设计Review_提示词模板_v1.md} (100%) create mode 100644 Project/fonrey/prompt/文档模板/TASK.md diff --git a/Project/fonrey/UI_DESIGN/客源管理/编辑客源_UI.md b/Project/fonrey/UI_DESIGN/客源管理/编辑客源_UI.md new file mode 100644 index 00000000..1d2dae48 --- /dev/null +++ b/Project/fonrey/UI_DESIGN/客源管理/编辑客源_UI.md @@ -0,0 +1,733 @@ +# 编辑客源 UI 设计文档 + +> **版本**：v1.0 · **日期**：2026-04-26 +> **依赖规范**：UI_SYSTEM.md v1.2 · 组件规范设计.md v1.0 +> **PRD 来源**：`Project/fonrey/PRD/客源管理/客源管理模块PRD.md` §5.15 + Story 14 +> **优先级**：P0 功能在本文档中用 🔴 标注，P1 用 🟡，P2 用 ⚫ + +--- + +## 目录 + +1. [模块概述](#1-模块概述) + - 1.1 功能范围 + - 1.2 页面清单 + - 1.3 用户角色与权限差异 +2. [页面设计规范](#2-页面设计规范) + - 2.1 编辑客源主页面（三 Tab 表单） +3. [弹窗/抽屉设计规范](#3-弹窗抽屉设计规范) + - 3.1 编辑基础信息弹窗（快捷入口，来自信息概览面板） +4. [交互状态规范](#4-交互状态规范) + - 4.1 全局状态说明 + - 4.2 权限控制矩阵 + - 4.3 HTMX 请求规范 +5. [关键数据字段说明](#5-关键数据字段说明) +6. [竞品截图对应关系](#6-竞品截图对应关系) +7. [实现优先级与工期估算](#7-实现优先级与工期估算) +8. [开放问题（待决策）](#8-开放问题待决策) + +--- + +## 1. 模块概述 + +### 1.1 功能范围 + +编辑客源模块包含以下功能，按优先级分组： + +**P0 — MVP 上线必须实现** 🔴 + +| 功能 | PRD 来源 | +|------|---------| +| 联系人 Tab：编辑主联系人及多联系人信息（姓名/称呼/电话1/电话2/微信/QQ/备注） | Story 14 §5.15.2 | +| 联系人 Tab：查看号码权限验证（点击「查看号码」后才能编辑电话） | §5.15.2 | +| 联系人 Tab：「标记无效」号码操作 | §5.15.2 | +| 联系人 Tab：「+ 添加联系人」追加联系人区块 | §5.15.2 | +| 基础信息 Tab：必填字段编辑（需求类型/用途/等级/来源） | §5.15.3 | +| 基础信息 Tab：选填字段编辑（购房目的/付款方式/名下房产/贷款记录/证件/意向学校/入学时间） | §5.15.3 | +| 二手 Tab：全量需求字段可编辑（总价/面积/居室/楼层/朝向/装修/楼龄/意向商圈/意向小区/交通/备注） | §5.15.4 | +| 全局保存/取消操作（表单底部内联按钮，保存成功返回详情页） | §5.15.5 | +| Tab 切换时保持各 Tab 表单数据不丢失 | §5.15.5 | +| 表单校验：必填字段红框高亮 + 滚动定位到首个错误 | §5.15.5 | + +**P1 — 首迭代实现** 🟡 + +| 功能 | PRD 来源 | +|------|---------| +| 新房 Tab：新房需求字段编辑（待截图补充确认字段） | §5.15.4 注 | +| 租房 Tab：租房需求字段编辑（待截图补充确认字段） | §5.15.4 注 | +| 编辑基础信息弹窗（从信息概览面板「编辑客源」快捷入口触发，Story 22） | §5.23 | + +### 1.2 页面清单 + +| 页面名称 | URL 模式建议 | 优先级 | 对应 PRD 章节 | +|---------|------------|--------|--------------| +| 编辑客源主页面 | `/clients//edit/` | P0 🔴 | §5.15 / Story 14 | +| 编辑基础信息弹窗 | 无独立 URL，HTMX 局部渲染 | P1 🟡 | §5.23 / Story 22 | + +### 1.3 用户角色与权限差异 + +| 功能 | 经纪人（归属人/首录人） | 经纪人（非归属人） | 店长/管理员 | +|------|-------------------|-----------------|-----------| +| 进入编辑客源页 | ✅ 可进入 | ❌ 无权限 | ✅ 可进入 | +| 查看并编辑电话号码 | 需点击「查看号码」验证，通过后可编辑 | ❌ | ✅ | +| 「标记无效」号码 | ✅ | ❌ | ✅ | +| 编辑基础信息/需求信息 | ✅ | ❌ | ✅ | +| 添加/删除联系人 | ✅ | ❌ | ✅ | +| 「+ 添加联系人」按钮 | ✅ | ❌ | ✅ | + +> **说明**： +> - 电话1 默认打码显示（`137****1234`），需权限验证后才能查看完整号码并进入编辑态。 +> - 非归属人/非首录人访问 `/clients//edit/` 时，后端返回 403，前端重定向至详情页并展示 Toast "无权限编辑该客源"。 + +--- + +## 2. 页面设计规范 + +### 2.1 编辑客源主页面（P0 🔴） + +#### 2.1.1 页面概述 + +- **URL**：`/clients//edit/` +- **访问入口**： + - 私客详情页右侧信息概览面板「编辑」文字按钮 + - 私客详情页需求信息 Tab 右上角「编辑」蓝色文字链接（跳转到编辑页的「二手/新房/租房」Tab 激活态） +- **页面职责**：允许经纪人修改客源联系人信息、基础属性、购房/租房需求的全量字段 +- **竞品参考截图**：`Project/fonrey/screenshots/客源/编辑客源.png` + +#### 2.1.2 布局结构 + +``` +┌──────────────────────────────────────────────────────────┐ +│ 面包屑导航：客源 / 客源管理 / 编辑客源 │ +│ 页面标题：编辑客源（text-xl font-semibold） │ +├──────────────────────────────────────────────────────────┤ +│ Tab 导航栏：[联系人] [基础信息] [二手/新房/租房] │ +│ （Tab 下划线橙色激活 #F97316，对应竞品，非主色 Teal） │ +├──────────────────────────────────────────────────────────┤ +│ │ +│ 联系人 Tab 内容区 │ +│ ┌────────────────────────────────────────────────────┐ │ +│ │ [区块标题：联系人] [右上角：查看后可编辑号码 查看号码] [+添加联系人] │ +│ │ │ │ +│ │ 联系人 1 区块（白色卡片 rounded-lg） │ │ +│ │ ● 姓名 [input] ● 电话1 [***打码] [标记无效] │ │ +│ │ ● 称呼 ○先生 ○女士 电话2 [-] 微信 [-] │ │ +│ │ QQ [-] │ │ +│ │ 备注 [textarea] │ │ +│ │ │ │ +│ │ 联系人 2 区块（同上，右上角有「删除」红色链接） │ │ +│ └────────────────────────────────────────────────────┘ │ +│ │ +│ ─ ─ ─ ─ 以下为基础信息区块（同页，分 Section 渲染）─ ─ │ +│ ┌────────────────────────────────────────────────────┐ │ +│ │ 基础信息 │ │ +│ │ ● 需求类型 ☑二手 □新房 │ │ +│ │ ● 用途 ○住宅 ○别墅 ○商住 ○商铺 ○写字楼 ○其他 │ │ +│ │ ● 等级 ○A ○B ●C ○D ○E │ │ +│ │ ● 来源 [下拉] │ │ +│ │ 购房目的 □刚需 □投资 □学区 □改善 □商用 □其他 │ │ +│ │ 付款方式 ○全额 ○商业贷款 ○商贷+公积金 ○公积金 │ │ +│ │ 名下房产 ○无 ○本地无外地有 ○本地有房 │ │ +│ │ 贷款记录 ○有 ○无 │ │ +│ │ 证件类型 [下拉] 证件号码 [input] │ │ +│ │ 意向学校1 [input] + 添加学校 │ │ +│ │ 入学时间 [月份选择器] │ │ +│ └────────────────────────────────────────────────────┘ │ +│ │ +│ ┌────────────────────────────────────────────────────┐ │ +│ │ 二手（需求信息区块，仅在「二手」Tab 或同页展示） │ │ +│ │ ● 总价 [数字输入] - [数字输入] 万元 │ │ +│ │ ● 面积 [数字输入] - [数字输入] m² │ │ +│ │ ● 居室 □1居 □2居 □3居 □4居 □5居及以上 │ │ +│ │ 楼层 □不要一层 □低楼层 □中楼层 □高楼层 □不要顶层│ │ +│ │ 朝向 □东 □南 □西 □北 │ │ +│ │ 装修 □毛坯 □清水 □简装 □中装 □精装 □豪装 │ │ +│ │ 楼龄 □5年以内 □5-10年 □10-15年 □15-20年 □20年以上│ │ +│ │ 意向商圈 [下拉多选] │ │ +│ │ 意向小区1 [input] + 添加小区 │ │ +│ │ 交通 [input, max 50字] │ │ +│ │ 备注 [textarea, max 200字] │ │ +│ └────────────────────────────────────────────────────┘ │ +│ │ +├──────────────────────────────────────────────────────────┤ +│ 表单底部内联操作区：[保存（Teal 主按钮）] [取消（白色边框）] │ +└──────────────────────────────────────────────────────────┘ +``` + +> **截图与文档差异说明**：竞品截图（`编辑客源.png`）显示三个 Tab（联系人/基础信息/二手）**在同一页面内纵向分 Section 展示**，并非切换 Tab 才能看到内容——联系人、基础信息、二手三个区块都在一个页面滚动展示。顶部 Tab 的功能是**快速定位锚点**（点击 Tab 滚动到对应区块），而非隐藏其他区块。以截图为准实现。 + +#### 2.1.3 区域详细规范 + +--- + +**[顶部面包屑 + 标题区]** + +| 属性 | 说明 | +|------|------| +| 面包屑 | `客源 / 客源管理 / 编辑客源`，使用 `text-sm text-neutral-500`，分隔符 `/`，最后一级用 `text-neutral-700` | +| 页面标题 | `编辑客源`，`text-xl font-semibold text-neutral-800` | +| 布局 | 面包屑在上，标题在下，左对齐，顶部 padding `pt-6 pb-4` | + +--- + +**[Tab 导航栏]** + +| 属性 | 说明 | +|------|------| +| 组件 | §10 Tab Navigation（组件规范设计.md） | +| Tab 项 | 「联系人」「基础信息」「二手/新房/租房」（第三项 label 根据客源需求类型动态确定） | +| 激活样式 | **注意：竞品使用橙色下划线** `border-b-2 border-orange-500 text-orange-500`，与系统主色 Teal 不同。为保持一致性，**本模块 Tab 激活色统一使用橙色** `#F97316`（`text-orange-500 border-orange-500`），以匹配竞品客源模块整体视觉风格 | +| 非激活样式 | `text-neutral-500 hover:text-neutral-700 border-b-2 border-transparent` | +| 行为 | 点击 Tab 触发 Alpine.js 平滑滚动到对应 Section 的锚点（`scrollIntoView({ behavior: 'smooth' })`），不做 HTMX 请求；Tab 同时高亮当前可见区域（Intersection Observer 驱动） | +| 粘性 | Tab 栏 `sticky top-0 z-10 bg-white border-b border-neutral-200` | + +```html + +
+ +
+``` + +--- + +**[联系人 Section]**（锚点 `id="section-contacts"`） + +区块标题行： + +| 元素 | 说明 | +|------|------| +| 标题 | `联系人`，`text-base font-semibold text-neutral-800` | +| 右侧辅助文字 | `查看后可编辑号码`，`text-sm text-neutral-400` | +| 「查看号码」按钮 | `text-sm text-info-600 hover:underline cursor-pointer`，点击后触发查看号码确认流程（见下方） | +| 「+ 添加联系人」按钮 | `btn-secondary text-sm`，位于标题行右侧最末，点击后 Alpine.js 动态追加联系人区块 | + +**联系人区块（每个联系人独立卡片）**： + +``` +bg-white rounded-lg border border-neutral-200 p-5 mb-4 +``` + +区块内字段布局为**网格布局**，参考截图：3列网格，每列包含"字段名 + 输入组件"。 + +| 字段 | 必填 | 组件类型 | 校验 | 备注 | +|------|------|---------|------|------| +| 姓名 | ✅ | `` | 不可为空，最多50字 | 与录入一致 | +| 称呼 | ✅ | 单选 Radio | 选一 | `○ 先生 ○ 女士` | +| 电话1 | ✅ | 区号下拉 + 手机号 input | 手机号格式 | 默认打码，需「查看号码」后才能编辑（见下方交互） | +| 标记无效 | — | 蓝色文字链接 | — | 显示在电话1 旁，点击 HTMX PATCH 标记 `phone_is_invalid=True` | +| 微信 | 否 | `` | — | 显示 `-` 时可直接编辑 | +| 电话2 | 否 | 区号下拉 + 手机号 input | 手机号格式（若填写） | 同电话1，但无打码逻辑 | +| QQ | 否 | `` | — | | +| 备注 | 否 | ` +

+ + + + + + + + + +
+

基础信息

+ +
+ + +
+
+ 需求类型 * +
+
+
+ + + +
+

+
+
+ + +
+
+ 用途 * +
+
+
+ +
+

+
+
+ + +
+
+ 等级 * +
+
+
+ +
+

+
+
+ + +
+
+ 来源 * +
+
+ +

+
+
+ + +
+
购房目的
+
+ +
+
+ + +
+
付款方式
+
+ +
+
+ + +
+
名下房产
+
+ + + +
+
+ + +
+
贷款记录
+
+ + +
+
+ + +
+
证件类型
+
+ +
+ +
+
+
+ + +
+
意向学校
+
+ + +
+
+ + +
+
入学时间
+
+ +

请选择年月

+
+
+ +
+
+ + +
+

二手

+ +
+ + +
+
+ 总价 * +
+
+
+ + - + + 万元 +
+

+
+
+ + +
+
+ 面积 * +
+
+
+ + - + + m² +
+

+
+
+ + +
+
+ 居室 * +
+
+
+ +
+

+
+
+ + +
+
楼层
+
+ +
+
+ + +
+
朝向
+
+ + + + +
+
+ + +
+
装修
+
+ +
+
+ + +
+
楼龄
+
+ +
+
+ + +
+
意向商圈
+
+ +

按住 Ctrl/Cmd 可多选

+
+
+ + +
+
意向小区
+
+ + +
+
+ + +
+
交通
+
+ + +
+
+ + +
+
备注
+
+ + +
+
+ +
+
+ +
+ + +

+
+ + + + + + +
+
+ + + + +
+

+

+
+
+
+ + + + diff --git a/Project/fonrey/UI_SYSTEM/preview.html b/Project/fonrey/preview.html similarity index 98% rename from Project/fonrey/UI_SYSTEM/preview.html rename to Project/fonrey/preview.html index f63e0e4b..b7627ec6 100644 --- a/Project/fonrey/UI_SYSTEM/preview.html +++ b/Project/fonrey/preview.html @@ -1,816 +1,816 @@ - - - - -Fonrey UI System · 样板预览 v1.0 - - - - - - - - - -
-
- -
-
F
- Fonrey · 房睿 -
- -
- - -
- - -
-
- -
- - -
-
WS
- 魏深 -
-
-
-
- - -
- - - - -
- - -
-
- -

全部房源

-

管理租户下所有房源数据 · 最近同步于 2 分钟前

-
-
- - - -
-
- - -
-
-
-
-
在售房源
-
24,891
-
- - - +4.2% - -
-
较上周 +1,003
-
-
-
-
-
本月新增
-
1,284
-
- +12.8% -
-
目标 1,500 · 完成 85%
-
-
-
-
-
-
-
-
待审核
-
12
-
- 需处理 -
-
查看待审核列表 →
-
-
-
-
-
本月成交
-
86
-
- -2.1% -
-
GMV ¥2.14亿
-
-
- - -
- -
- -
- - -
-
- -
- - -
- - - - - - -
- -
- - -
- 已筛选： - - 价格 500-800万 - - - - 朝阳·大望路 - - - -
-
- - -
-
- 共 1,284 条结果 - · - 已选 3 条 - -
-
- - - -
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
编号房源标题户型面积 (㎡)总价 (万)单价 (元/㎡)状态维护人录入时间操作
F20268142 -
-
- -
-
-
绿城百合公寓 · 南北通透三居 · 业主诚心出售
-
大望路 · 绿城百合公寓 · 中楼层/32层
-
-
- 		3室2厅128.5068052,918在售 -
-
魏
- 魏深 -
- 		2026-04-20 14:32 -
- - -
-
F20267891 -
-
-
-
- 万科翡翠长安 · 精装两居 · 满五唯一 - 急售 -
-
CBD · 万科翡翠长安 · 高楼层/28层
-
-
- 		2室1厅89.20 - 780720 - 80,717待核验 -
-
李
- 李明泽 -
- 		2026-04-19 09:15
F20267403 -
-
-
-
远洋万和城 · 花园洋房 · 带车位
-
亮马桥 · 远洋万和城 · 低楼层/6层
-
-
- 		4室2厅186.001,28068,817已成交 -
-
张
- 张晓雨 -
- 		2026-04-15 16:48
F20266912 -
-
-
-
- 华贸城 · 顶跃复式 · 精装未住 - VR - 钥匙 -
-
建外 · 华贸城 · 顶层/26层
-
-
- 		5室3厅280.502,68095,544在售 -
-
王
- 王建国 -
- 		2026-04-12 11:20
F20266541 -
-
-
-
观湖国际 · 商住两用
-
国贸 · 观湖国际
-
-
- 		1室52.8038071,970已下架—2026-03-28 08:05
-
- - -
-
- 显示 1-20 条，共 1,284 条 -
-
- - - - - - … - - - -
-
-
- - -
- - -
-

表单组件 · Form

-
-
- - -

不超过 50 字，将用于客户端展示

-
-
-
- - -
-
- - -
-
-
- - -

价格必须是数字

-
-
- - -
-
- - - - - -
-
- - -
-
-
- - -
- - -
-

按钮与标签 · Buttons & Badges

-
- - - - - - - -
-
- Primary - Success - Warning - Danger - Info - Neutral - 带圆点 -
-
- ⌘ - K - 快捷键样式 -
-
- - -
-

提示条 · Alert

-
-
- -
-
提示
-
房源信息将在审核后对外展示
-
-
-
- -
-
即将过期
-
3 个房源委托将在 7 天内到期
-
-
-
- -
-
操作失败
-
无法删除该房源，仍有关联跟进记录
-
-
-
-
- - -
-

跟进时间线 · Timeline

-
    -
  1. - -
    -
    - 魏深 - 今天 14:32 -
    -
    带客户看房，客户对户型满意，但希望价格再谈 20 万
    -
    - 看房 - 高意向 -
    -
    -
    2. -
  2. - -
    -
    - 李明泽 - 昨天 10:12 -
    -
    电话跟进业主，确认可协商空间为 30 万
    -
    -
    3. -
  3. - -
    -
    - 系统 - 04-20 14:32 -
    -
    房源录入系统，分配维护人 魏深
    -
    -
    4. -
-
- -
-
- - -
-

颜色系统 · Color Palette

- -
-
-
Primary (Teal · 品牌主色)
-
-
50 #F0FDFA
-
100 #CCFBF1
-
200 #99F6E4
-
500 #14B8A6
-
600 基准
-
700 #115E59
-
800 #134E4A
-
-
- -
-
Neutral (Slate · 中性灰)
-
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
-
- -
-
Semantic · 语义色
-
-
-
-
-
Success
-
#16A34A
-
-
-
-
-
-
Warning
-
#D97706
-
-
-
-
-
-
Danger
-
#DC2626
-
-
-
-
-
-
Info
-
#2563EB
-
-
-
-
-
-
- - -
-

字体层级 · Typography

-
-
-
H1 · 20/600
-
全部房源
-
-
-
H2 · 16/600
-
房源基本信息
-
-
-
Body · 14/400
-
绿城百合公寓 · 南北通透三居 · 业主诚心出售
-
-
-
Data · 14/500
-
680 万 · 128.50 ㎡
-
-
-
Number · 20/600
-
24,891
-
-
-
Caption · 12/400
-
最近同步于 2 分钟前
-
-
-
Mono · 12/400
-
F20268142
-
-
-
- -
- Fonrey UI System v1.0 · Preview · 2026-04-25 -
-
-
- - -
-
-
- -
-
-
保存成功
-
房源信息已更新
-
- -
-
-
- -
-
-
有 3 条新消息
-
点击查看 →
-
-
-
- - - - + + + + +Fonrey UI System · 样板预览 v1.0 + + + + + + + + + +
+
+ +
+
F
+ Fonrey · 房睿 +
+ +
+ + +
+ + +
+
+ +
+ + +
+
WS
+ 魏深 +
+
+
+
+ + +
+ + + + +
+ + +
+
+ +

全部房源

+

管理租户下所有房源数据 · 最近同步于 2 分钟前

+
+
+ + + +
+
+ + +
+
+
+
+
在售房源
+
24,891
+
+ + + +4.2% + +
+
较上周 +1,003
+
+
+
+
+
本月新增
+
1,284
+
+ +12.8% +
+
目标 1,500 · 完成 85%
+
+
+
+
+
+
+
+
待审核
+
12
+
+ 需处理 +
+
查看待审核列表 →
+
+
+
+
+
本月成交
+
86
+
+ -2.1% +
+
GMV ¥2.14亿
+
+
+ + +
+ +
+ +
+ + +
+
+ +
+ + +
+ + + + + + +
+ +
+ + +
+ 已筛选： + + 价格 500-800万 + + + + 朝阳·大望路 + + + +
+
+ + +
+
+ 共 1,284 条结果 + · + 已选 3 条 + +
+
+ + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
编号房源标题户型面积 (㎡)总价 (万)单价 (元/㎡)状态维护人录入时间操作
F20268142 +
+
+ +
+
+
绿城百合公寓 · 南北通透三居 · 业主诚心出售
+
大望路 · 绿城百合公寓 · 中楼层/32层
+
+
+ 		3室2厅128.5068052,918在售 +
+
魏
+ 魏深 +
+ 		2026-04-20 14:32 +
+ + +
+
F20267891 +
+
+
+
+ 万科翡翠长安 · 精装两居 · 满五唯一 + 急售 +
+
CBD · 万科翡翠长安 · 高楼层/28层
+
+
+ 		2室1厅89.20 + 780720 + 80,717待核验 +
+
李
+ 李明泽 +
+ 		2026-04-19 09:15
F20267403 +
+
+
+
远洋万和城 · 花园洋房 · 带车位
+
亮马桥 · 远洋万和城 · 低楼层/6层
+
+
+ 		4室2厅186.001,28068,817已成交 +
+
张
+ 张晓雨 +
+ 		2026-04-15 16:48
F20266912 +
+
+
+
+ 华贸城 · 顶跃复式 · 精装未住 + VR + 钥匙 +
+
建外 · 华贸城 · 顶层/26层
+
+
+ 		5室3厅280.502,68095,544在售 +
+
王
+ 王建国 +
+ 		2026-04-12 11:20
F20266541 +
+
+
+
观湖国际 · 商住两用
+
国贸 · 观湖国际
+
+
+ 		1室52.8038071,970已下架—2026-03-28 08:05
+
+ + +
+
+ 显示 1-20 条，共 1,284 条 +
+
+ + + + + + … + + + +
+
+
+ + +
+ + +
+

表单组件 · Form

+
+
+ + +

不超过 50 字，将用于客户端展示

+
+
+
+ + +
+
+ + +
+
+
+ + +

价格必须是数字

+
+
+ + +
+
+ + + + + +
+
+ + +
+
+
+ + +
+ + +
+

按钮与标签 · Buttons & Badges

+
+ + + + + + + +
+
+ Primary + Success + Warning + Danger + Info + Neutral + 带圆点 +
+
+ ⌘ + K + 快捷键样式 +
+
+ + +
+

提示条 · Alert

+
+
+ +
+
提示
+
房源信息将在审核后对外展示
+
+
+
+ +
+
即将过期
+
3 个房源委托将在 7 天内到期
+
+
+
+ +
+
操作失败
+
无法删除该房源，仍有关联跟进记录
+
+
+
+
+ + +
+

跟进时间线 · Timeline

+
    +
  1. + +
    +
    + 魏深 + 今天 14:32 +
    +
    带客户看房，客户对户型满意，但希望价格再谈 20 万
    +
    + 看房 + 高意向 +
    +
    +
    2. +
  2. + +
    +
    + 李明泽 + 昨天 10:12 +
    +
    电话跟进业主，确认可协商空间为 30 万
    +
    +
    3. +
  3. + +
    +
    + 系统 + 04-20 14:32 +
    +
    房源录入系统，分配维护人 魏深
    +
    +
    4. +
+
+ +
+
+ + +
+

颜色系统 · Color Palette

+ +
+
+
Primary (Teal · 品牌主色)
+
+
50 #F0FDFA
+
100 #CCFBF1
+
200 #99F6E4
+
500 #14B8A6
+
600 基准
+
700 #115E59
+
800 #134E4A
+
+
+ +
+
Neutral (Slate · 中性灰)
+
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
+
+ +
+
Semantic · 语义色
+
+
+
+
+
Success
+
#16A34A
+
+
+
+
+
+
Warning
+
#D97706
+
+
+
+
+
+
Danger
+
#DC2626
+
+
+
+
+
+
Info
+
#2563EB
+
+
+
+
+
+
+ + +
+

字体层级 · Typography

+
+
+
H1 · 20/600
+
全部房源
+
+
+
H2 · 16/600
+
房源基本信息
+
+
+
Body · 14/400
+
绿城百合公寓 · 南北通透三居 · 业主诚心出售
+
+
+
Data · 14/500
+
680 万 · 128.50 ㎡
+
+
+
Number · 20/600
+
24,891
+
+
+
Caption · 12/400
+
最近同步于 2 分钟前
+
+
+
Mono · 12/400
+
F20268142
+
+
+
+ +
+ Fonrey UI System v1.0 · Preview · 2026-04-25 +
+
+
+ + +
+
+
+ +
+
+
保存成功
+
房源信息已更新
+
+ +
+
+
+ +
+
+
有 3 条新消息
+
点击查看 →
+
+
+
+ + + + diff --git a/Project/fonrey/prompt/提示词模板/模块UI设计文档生成提示词.md b/Project/fonrey/prompt/为 新增客源 生成模块 UI 设计文档.md similarity index 91% rename from Project/fonrey/prompt/提示词模板/模块UI设计文档生成提示词.md rename to Project/fonrey/prompt/为 新增客源 生成模块 UI 设计文档.md index e79ab9a8..e096c1ae 100644 --- a/Project/fonrey/prompt/提示词模板/模块UI设计文档生成提示词.md +++ b/Project/fonrey/prompt/为 新增客源 生成模块 UI 设计文档.md @@ -1,19 +1,5 @@ -# Fonrey 模块 UI 设计文档生成提示词 -> **用途**：每次针对一个具体业务模块，填入变量后直接发给 AI，输出该模块的标准化 UI 设计文档。 -> **输出文件**：`Project/fonrey/UI_DESIGN/{模块名}_UI.md` - ---- - -## 使用方法 - -1. 复制下方「---PROMPT START---」到「---PROMPT END---」之间的全部内容 -2. 将所有 `{{变量}}` 替换为本次模块的实际值 -3. 把替换后的提示词发给 AI - ----PROMPT START--- - -# 任务：为 {{模块名称}} 生成模块 UI 设计文档 +# 任务：为 新增客源生成模块 UI 设计文档 ## 你的角色 @@ -45,36 +31,30 @@ ## 本次任务输入 ### 1. 目标模块 -**模块名称**：{{模块名称}} -**模块描述**：{{一句话描述模块核心功能}} +**模块名称**：新增客源 +**模块描述**：新增客源 ### 2. PRD 功能文档路径 ``` -{{PRD文件路径，如：Project/fonrey/PRD/房源管理/房源管理模块PRD.md}} +`Project/fonrey/PRD/客源管理/客源管理模块PRD.md` 章节5.2 录入私客 ``` 请读取该文件，理解每个功能点的业务逻辑和验收标准。 -### 3. DATA_MODEL 数据模型文档路径 -``` -{{DATA_MODEL文件路径，如：Project/fonrey/DATA_MODEL/DATA_MODEL_PROPERTY.md}} -``` -请读取该文件，理解该模块的数据模型以及字段命名。 - -### 4. 竞品参考截图 +### 3. 竞品参考截图 请读取以下截图文件作为视觉参考（所有截图均在 `Project/fonrey/screenshots/` 目录下）： -{{截图列表，格式如下，每行一张： -- 功能名称：`Project/fonrey/screenshots/模块/截图名.png` -}} +- 客源列表： + - 录入客源：`Project/fonrey/screenshots/客源/录入客源.png` + - 编辑客源: `Project/fonrey/screenshots/客源/编辑客源.png` -### 5. MVP 优先级参考 +### 4. MVP 优先级参考 请参考 `Project/fonrey/PRD/PRD_MVP.md`，在设计文档中标注每个页面/功能的优先级（P0/P1/P2）。 --- ## 输出格式要求 -输出一份完整的 Markdown 文档，文件名为 `{{模块名称}}_UI.md`，结构如下： +输出一份完整的 Markdown 文档，文件名为 `新增客源_UI.md`，结构如下： --- @@ -331,7 +311,7 @@ 3. 【本次模块UI设计文档】本次需要实现的模块设计说明 - `Project/fonrey/UI_DESIGN/新增客源_UI.md` 4. 【本次模块UI输出静态原型文件】 - - `Project/fonrey/UI_DESIGN/新增客源_UI.html`** + - `Project/fonrey/UI_DESIGN/新增客源_UI.html` ### 强制约束（不可违反） @@ -363,4 +343,4 @@ #### 注意事项 - 如果设计文档与 UI_SYSTEM 存在冲突，以 UI_SYSTEM 为准，并告知我冲突点 -- 如果设计文档描述不清晰，不要自行猜测，先列出疑问再继续 +- 如果设计文档描述不清晰，不要自行猜测，先列出疑问再继续 \ No newline at end of file diff --git a/Project/fonrey/prompt/为 编辑客源生成模块 UI 设计文档.md b/Project/fonrey/prompt/为 编辑客源生成模块 UI 设计文档.md new file mode 100644 index 00000000..9efe2979 --- /dev/null +++ b/Project/fonrey/prompt/为 编辑客源生成模块 UI 设计文档.md @@ -0,0 +1,307 @@ + +# 任务：为 编辑客源生成模块 UI 设计文档 + +## 你的角色 + +你是 Fonrey 房产经纪管理系统的 **UI/UX 架构师**，负责根据竞品截图和 PRD 功能描述，产出一份标准化的模块级 UI 设计文档。该文档将直接交给 AI Engineer 用于编码实现，必须包含足够的细节，Engineer 无需再问任何问题。 + +**注意** +以下所有的文档或图片是基于文档库的相对路径。 +文档库的根路径为：`/mnt/d/Workspace/nexus` + +--- + +## 全局设计约束（必须严格遵守） + +> 所有设计决策必须符合 `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.15 编辑客源 +``` +请读取该文件，理解每个功能点的业务逻辑和验收标准。 + +### 3. DATA_MODEL 数据模型文档路径 +``` +DATA_MODEL文件路径，如：Project/fonrey/DATA_MODEL/DATA_MODEL_CLIENT.md +``` +请读取该文件，理解该模块的数据模型以及字段命名。 + +### 4. 竞品参考截图 +请读取以下截图文件作为视觉参考（所有截图均在 `Project/fonrey/screenshots/` 目录下）： + +- 客源列表： + - 编辑客源: `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` + - 房源详情（第1屏）：`Project/fonrey/screenshots/房源/房源详情1.png` + - 房源详情（第2屏）：`Project/fonrey/screenshots/房源/房源详情2.png` + - 房源详情（第3屏）：`Project/fonrey/screenshots/房源/房源详情3.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 设计文档」表格中 + + diff --git a/Project/fonrey/prompt/提示词模板/Fonrey_PRD_提示词模板_v2.md b/Project/fonrey/prompt/提示词模板/PRD_提示词模板_v2.md similarity index 100% rename from Project/fonrey/prompt/提示词模板/Fonrey_PRD_提示词模板_v2.md rename to Project/fonrey/prompt/提示词模板/PRD_提示词模板_v2.md diff --git a/Project/fonrey/prompt/提示词模板/Fonrey_TECH_STACK_DATA_MODEL_提示词模板_v2.md b/Project/fonrey/prompt/提示词模板/TECH_STACK_DATA_MODEL_提示词模板_v2.md similarity index 100% rename from Project/fonrey/prompt/提示词模板/Fonrey_TECH_STACK_DATA_MODEL_提示词模板_v2.md rename to Project/fonrey/prompt/提示词模板/TECH_STACK_DATA_MODEL_提示词模板_v2.md diff --git a/Project/fonrey/prompt/提示词模板/Fonrey_UI_SYSTEM_提示词模板_v1.md b/Project/fonrey/prompt/提示词模板/UI_SYSTEM_提示词模板_v1.md similarity index 100% rename from Project/fonrey/prompt/提示词模板/Fonrey_UI_SYSTEM_提示词模板_v1.md rename to Project/fonrey/prompt/提示词模板/UI_SYSTEM_提示词模板_v1.md diff --git a/Project/fonrey/prompt/提示词模板/模块UI设计文档生成提示词_v1.md b/Project/fonrey/prompt/提示词模板/模块UI设计文档生成提示词_v1.md new file mode 100644 index 00000000..42004297 --- /dev/null +++ b/Project/fonrey/prompt/提示词模板/模块UI设计文档生成提示词_v1.md @@ -0,0 +1,310 @@ +# Fonrey 模块 UI 设计文档生成提示词 + +> **用途**：每次针对一个具体业务模块，填入变量后直接发给 AI，输出该模块的标准化 UI 设计文档。 +> **输出文件**：`Project/fonrey/UI_DESIGN/{模块名}_UI.md` + +--- + +## 使用方法 + +1. 复制下方「---PROMPT START---」到「---PROMPT END---」之间的全部内容 +2. 将所有 `{{变量}}` 替换为本次模块的实际值 +3. 把替换后的提示词发给 AI + +---PROMPT START--- + +# 任务：为 {{模块名称}} 生成模块 UI 设计文档 + +## 你的角色 + +你是 Fonrey 房产经纪管理系统的 **UI/UX 架构师**，负责根据竞品截图和 PRD 功能描述，产出一份标准化的模块级 UI 设计文档。该文档将直接交给 AI Engineer 用于编码实现，必须包含足够的细节，Engineer 无需再问任何问题。 + +**注意** +以下所有的文档或图片是基于文档库的相对路径。 +文档库的根路径为：`/mnt/d/Workspace/nexus` + +--- + +## 全局设计约束（必须严格遵守） + +> 所有设计决策必须符合 `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 功能文档路径 +``` +{{PRD文件路径，如：Project/fonrey/PRD/房源管理/房源管理模块PRD.md}} +``` +请读取该文件，理解每个功能点的业务逻辑和验收标准。 + +### 3. DATA_MODEL 数据模型文档路径 +``` +{{DATA_MODEL文件路径，如：Project/fonrey/DATA_MODEL/DATA_MODEL_PROPERTY.md}} +``` +请读取该文件，理解该模块的数据模型以及字段命名。 + +### 4. 竞品参考截图 +请读取以下截图文件作为视觉参考（所有截图均在 `Project/fonrey/screenshots/` 目录下）： + +{{截图列表，格式如下，每行一张： +- 功能名称：`Project/fonrey/screenshots/模块/截图名.png` +}} + +### 5. MVP 优先级参考 +请参考 `Project/fonrey/PRD/PRD_MVP.md`，在设计文档中标注每个页面/功能的优先级（P0/P1/P2）。 + +--- + +## 输出格式要求 + +输出一份完整的 Markdown 文档，`Project/fonrey/UI_DESIGN/{模块名}_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. **PRD优先**：有截图的功能，以截图呈现的 UI 为补充说明，以PRD 文字为主要参考；截图和 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` + - 房源详情（第1屏）：`Project/fonrey/screenshots/房源/房源详情1.png` + - 房源详情（第2屏）：`Project/fonrey/screenshots/房源/房源详情2.png` + - 房源详情（第3屏）：`Project/fonrey/screenshots/房源/房源详情3.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 设计文档」表格中 diff --git a/Project/fonrey/prompt/提示词模板/模块UI静态原型页面生成提示词_v1.md b/Project/fonrey/prompt/提示词模板/模块UI静态原型页面生成提示词_v1.md new file mode 100644 index 00000000..b2fe5c0b --- /dev/null +++ b/Project/fonrey/prompt/提示词模板/模块UI静态原型页面生成提示词_v1.md @@ -0,0 +1,72 @@ +# 任务：为 {{模块}}生成模块 UI 静态原型 + +## 你的角色 + +你是 Fonrey 房产经纪管理系统的 **UI/UX 架构师**，负责根据竞品截图和 PRD 功能描述，产出一份标准化的模块级 UI 设计文档。该文档将直接交给 AI Engineer 用于编码实现，必须包含足够的细节，Engineer 无需再问任何问题。 + +**注意** +以下所有的文档或图片是基于文档库的相对路径。 +文档库的根路径为：`/mnt/d/Workspace/nexus` + +--- + +## 全局设计约束（必须严格遵守） + +> 所有设计决策必须符合 `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. 【UI_SYSTEM】全局UI设计规范文档 `Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` +2. 【现有原型页面】已完成的HTML页面（作为视觉和代码参考基准） + - `Project/fonrey/UI_SYSTEM/preview.html` + - `Project/fonrey/UI_DESIGN/客源列表_UI.html` + - `Project/fonrey/UI_DESIGN/客源详情_UI.html` + - `Project/fonrey/UI_DESIGN/新增客源_UI.html` +3. 【本次模块UI设计文档】本次需要实现的模块设计说明 + - `Project/fonrey/UI_DESIGN/编辑客源_UI.md` +**输出文件** +- 【本次模块UI输出静态原型文件】 + - `Project/fonrey/UI_DESIGN/编辑客源_UI.html` + +### 强制约束（不可违反） + +#### 一致性约束 +- 颜色、字体、字号、圆角、阴影、间距等视觉变量，必须与 UI_SYSTEM 保持完全一致，不得自行创造新的变量 +- 公共组件（导航栏、侧边栏、顶部栏、按钮、表单、卡片、标签等）的样式和结构，必须与现有原型页面中的实现保持一致 +- 如果现有页面使用了 CSS 变量或特定 class 命名规范，本次输出必须沿用相同的规范 + +#### 布局约束 +- 整体页面框架（如侧边栏宽度、顶栏高度、内容区边距）必须与现有原型页面保持一致 +- 响应式断点策略（如有）需与已有页面对齐 +#### 代码约束 +- 输出单一 HTML 文件，CSS 写在 `