Sync: expand ui system components notes
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# Fonrey UI System 设计规范
|
||||
|
||||
**版本**：v1.0
|
||||
**版本**：v1.1
|
||||
**最后更新**：2026-04-25
|
||||
**维护者**：UI/UX 架构组
|
||||
**适用技术栈**：Tailwind CSS + HTMX + Alpine.js + Django 模板
|
||||
@@ -21,7 +21,7 @@
|
||||
- **专业、克制、高密度**：表格为王，单屏尽可能多展示数据；色彩只为信息服务，不用于装饰。
|
||||
- **主色靛青（Teal）**：低饱和、冷静，与状态色（绿/黄/红）形成强区分；与房产行业"稳健/可靠"意象吻合，同时避免与 success 绿产生语义歧义。
|
||||
- **中等圆角（8px）**：既不像消费端（12px+）过于柔软，也不像传统企业端（0-2px）过于呆板。
|
||||
- **紧凑密度**：表格行高 40px、表单字段间距 12px，信息密度优先于呼吸感。
|
||||
- **紧凑密度**：表格默认行高 56px（含 40×40 封面缩略图），表单字段间距 12px，信息密度优先于呼吸感。
|
||||
|
||||
---
|
||||
|
||||
@@ -407,14 +407,24 @@ Fonrey 的核心场景，规范必须严格执行。
|
||||
| 外壳 | 圆角卡片容器 | `bg-white rounded-lg border border-neutral-200 overflow-hidden` |
|
||||
| 表头 `<thead>` | 粘性、小字、中性色底 | `bg-neutral-50 text-xs font-medium text-neutral-500 uppercase tracking-wider sticky top-0 z-10` |
|
||||
| 表头 `<th>` | 高 36px；排序箭头右对齐 | `px-4 py-2 text-left` |
|
||||
| 数据行 `<tr>` | 高 44px；Hover 高亮 | `hover:bg-neutral-50` |
|
||||
| 数据单元 `<td>` | 正文字号；顶对齐 | `px-4 py-2.5 text-sm text-neutral-700 whitespace-nowrap` |
|
||||
| 选中行 | 浅主色高亮 | `bg-primary-50` |
|
||||
| 操作列 | 固定右侧；Ghost 图标按钮 | `sticky right-0 bg-white` |
|
||||
| 数据行 `<tr>` | 密度可切换；Hover 高亮 | `hover:bg-neutral-50` |
|
||||
| 数据单元 `<td>` | 正文字号；垂直居中 | `px-3 py-3 text-sm text-neutral-700 align-middle whitespace-nowrap` |
|
||||
| 选中行 | 浅主色高亮 | `bg-primary-50/40` |
|
||||
| 操作列 | 固定右侧；Ghost 图标按钮，Hover 显形 | `sticky right-0 bg-white opacity-0 group-hover:opacity-100` |
|
||||
| 表格底部（分页栏） | | `px-4 py-3 border-t border-neutral-200 bg-white flex items-center justify-between` |
|
||||
|
||||
- **斑马纹**：B2B 高密度场景**不启用**（视觉噪音）。Hover 行高亮已足够区分。
|
||||
- **密度切换**：工具栏右侧允许用户切换"紧凑（40px）/ 标准（44px）/ 舒适（52px）"三档，通过 Alpine.js + `localStorage` 持久化。
|
||||
- **封面缩略图**：房源/楼盘等含图业务表格，第一数据列（通常为"标题"列）内嵌缩略图（`<img>` 或占位 `<div>`），尺寸随密度档联动（见下表）。缩略图统一 `rounded` (4px)，对象填充 `object-cover`，加载失败占位为 `bg-neutral-100` + 图片占位图标。
|
||||
- **三档密度**：工具栏右侧"密度"图标按钮切换，Alpine.js + `localStorage`（key: `fonrey:table:{module}:density`）持久化，默认 `standard`。
|
||||
|
||||
| 档位 | Key | 行高 | 缩略图尺寸 | 单元内边距 | 使用场景 |
|
||||
|---|---|---|---|---|---|
|
||||
| 紧凑 Compact | `compact` | 40px | 无（图片列隐藏） | `px-3 py-2` | 数据核对、大批量浏览、导出前预览 |
|
||||
| 标准 Standard（默认） | `standard` | 56px | 40×40 | `px-3 py-3` | 日常工作，"一眼认房" |
|
||||
| 舒适 Comfortable | `comfortable` | 72px | 56×56 | `px-3 py-4` | 含更多副信息（楼层/朝向/装修标签换行展示） |
|
||||
|
||||
> **实现提示**：密度切换仅改 `<tbody>` 上的 class（如 `table-density-standard`），通过父级 class + 子选择器统一控制行高、内边距、图片显隐，避免逐行改 class。
|
||||
> **无图业务**（客源、跟进记录、权限等）表格固定使用 `compact` 40px 行高，不提供密度切换。
|
||||
|
||||
#### 3.4.2 标准片段
|
||||
|
||||
@@ -1219,19 +1229,58 @@ Flatpickr 自定义样式覆盖见附录 10.3。
|
||||
|
||||
---
|
||||
|
||||
## 9. 待确认问题（Open Questions）
|
||||
## 9. 已决策事项（Resolved Decisions）
|
||||
|
||||
| # | 问题 | 负责人 | 截止 |
|
||||
v1.0 遗留的 6 个问题，已于 v1.1 评审决策如下。
|
||||
|
||||
| # | 问题 | 决策 | 实施要点 |
|
||||
|---|---|---|---|
|
||||
| 1 | 需要暗色主题吗？（部分经纪人工作至深夜） | 产品 | v1.1 评估 |
|
||||
| 2 | 全局搜索（`Ctrl+K` Command Palette）的信息架构：是否跨模块（房源+客源+楼盘+员工） | 产品 / 后端 | v1 首发范围待定 |
|
||||
| 3 | 表格列是否支持拖拽调整顺序？（SortableJS 可支持，但需确认是否属于 v1 范围） | 产品 | — |
|
||||
| 4 | 房源状态色：当前将"已成交"归为 primary（Teal）。部分行业习惯用蓝色，需确认是否可视化区分 | 设计 / 产品 | — |
|
||||
| 5 | 移动端访问降级方案：v1 是否需要 1024px 以下显示"请使用桌面端访问"提示页？ | 前端 | v1 首发前 |
|
||||
| 6 | 国际化：当前仅中文。如规划英文/繁体，字体栈与行高需调整 | 产品 | v2 |
|
||||
| 1 | 是否支持暗色主题 | **v1 不做，开发预留接口** | 所有颜色走 Tailwind Token（不硬编码 Hex）；根标签预留 `data-theme="light"` 属性；CSS 变量层接入待 v2 |
|
||||
| 2 | 全局搜索（⌘K）覆盖范围 | **房源 + 客源 + 楼盘 + 同事 四类** | Command Palette 分组展示；↑↓ 切换、Enter 跳转、ESC 关闭；后端接口 `/api/search/?q=&types=property,customer,building,user` |
|
||||
| 3 | 表格列是否支持拖拽排序 | **支持：拖拽 + 显隐 + localStorage 记忆** | SortableJS；"列设置"Drawer 右侧打开；状态 key `fonrey:table:{module}:cols`，结构 `[{key, visible, order}]` |
|
||||
| 4 | 已成交状态色 | **info 蓝（`#2563EB`）** | 仅用于状态 Tag，不扩散到其他元素；与 success 绿（在售）、warning 橙（待核验）、neutral 灰（已下架）形成完整状态色阶 |
|
||||
| 5 | 屏幕 <1280px 降级 | **显示引导提示页，锁定主内容** | 全屏 Splash：品牌 logo + "Fonrey 为桌面端设计，请放大浏览器窗口或使用 ≥1280px 屏幕"；JS 监听 resize 自动显隐；不做响应式适配 |
|
||||
| 6 | 国际化 | **v1 仅中文，文案硬编码** | 但 Token 层保持中性（不嵌入"万""㎡"等单位到 Token 名）；字体栈保留 Inter + PingFang SC 双语准备；v2 接入 Django i18n 时无需重构组件 |
|
||||
|
||||
### 9.1 小屏降级提示页（规范）
|
||||
|
||||
```html
|
||||
<!-- 监听 window.innerWidth < 1280 时插入，id="screen-gate" -->
|
||||
<div id="screen-gate"
|
||||
class="fixed inset-0 z-[100] bg-white flex flex-col items-center justify-center px-8 text-center">
|
||||
<div class="w-16 h-16 rounded-xl bg-primary-600 text-white flex items-center justify-center text-2xl font-semibold mb-6">F</div>
|
||||
<h1 class="text-xl font-semibold text-neutral-800 mb-2">请使用桌面端访问 Fonrey</h1>
|
||||
<p class="text-sm text-neutral-600 max-w-md mb-6">
|
||||
Fonrey 为桌面工作场景设计，建议屏幕宽度 ≥ 1280px。
|
||||
请放大浏览器窗口，或切换到电脑端访问。
|
||||
</p>
|
||||
<p class="text-xs text-neutral-400">当前窗口：<span id="screen-gate-width" class="tabular-nums"></span> px</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
- 触发阈值：`window.innerWidth < 1280`
|
||||
- 不阻止登录、不阻止 Token 校验，仅遮罩 UI
|
||||
- 移动端浏览器同样展示此页（不引导下载 App，v1 无 App）
|
||||
|
||||
### 9.2 全局搜索（⌘K）数据结构约定
|
||||
|
||||
```js
|
||||
// 返回示例
|
||||
{
|
||||
"property": [{id, code, title, status, subtitle}], // 房源：F编号 + 标题 + 商圈
|
||||
"customer": [{id, name, phone_mask, tag, subtitle}], // 客源：姓名 + 脱敏手机 + 意向
|
||||
"building": [{id, name, district, unit_price}], // 楼盘：名称 + 商圈 + 均价
|
||||
"user": [{id, name, dept, avatar_char}] // 同事：姓名 + 部门
|
||||
}
|
||||
```
|
||||
|
||||
- 分组固定顺序：房源 → 客源 → 楼盘 → 同事
|
||||
- 每组最多 5 条，更多结果跳对应模块列表页
|
||||
- 空查询时展示"最近访问"（前 8 条，不分组）
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 10. 附录（Appendix）
|
||||
|
||||
### 10.1 完整 Tailwind 配置文件
|
||||
|
||||
@@ -787,4 +787,29 @@
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
// v1.1 决策：<1280px 显示引导提示页
|
||||
(function(){
|
||||
const gate = document.createElement('div');
|
||||
gate.id = 'screen-gate';
|
||||
gate.className = 'fixed inset-0 z-[100] bg-white flex-col items-center justify-center px-8 text-center hidden';
|
||||
gate.innerHTML = `
|
||||
<div class="w-16 h-16 rounded-xl bg-primary-600 text-white flex items-center justify-center text-2xl font-semibold mb-6">F</div>
|
||||
<h1 class="text-xl font-semibold text-neutral-800 mb-2">请使用桌面端访问 Fonrey</h1>
|
||||
<p class="text-sm text-neutral-600 max-w-md mb-6">
|
||||
Fonrey 为桌面工作场景设计，建议屏幕宽度 ≥ 1280px。请放大浏览器窗口，或切换到电脑端访问。
|
||||
</p>
|
||||
<p class="text-xs text-neutral-400">当前窗口：<span id="screen-gate-width" class="tabular-nums"></span> px</p>
|
||||
`;
|
||||
document.body.appendChild(gate);
|
||||
function check(){
|
||||
const w = window.innerWidth;
|
||||
document.getElementById('screen-gate-width').textContent = w;
|
||||
if (w < 1280) { gate.classList.remove('hidden'); gate.classList.add('flex'); }
|
||||
else { gate.classList.add('hidden'); gate.classList.remove('flex'); }
|
||||
}
|
||||
window.addEventListener('resize', check);
|
||||
check();
|
||||
})();
|
||||
</script>
|
||||
</html>
|
||||
|
||||
1992
Project/fonrey/UI_SYSTEM/组件规范设计.md
Normal file
1992
Project/fonrey/UI_SYSTEM/组件规范设计.md
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user