From 36651b38a97aaa361df7c435b1af287b446ea603 Mon Sep 17 00:00:00 2001 From: admin Date: Sat, 25 Apr 2026 09:10:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=B7=AF=E5=BE=84=E5=8F=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../组件清单/IMG-20260425085420706.png} | Bin .../组件清单/IMG-20260425085420782.png} | Bin .../组件清单/IMG-20260425085420857.png} | Bin .../组件清单/IMG-20260425085420932.png} | Bin .../组件清单/IMG-20260425085421006.png} | Bin .../组件清单/IMG-20260425085421096.png} | Bin .../组件清单/IMG-20260425085421159.png} | Bin .../组件清单/IMG-20260425085421220.png} | Bin .../组件清单/IMG-20260425085421290.jpg} | Bin .../组件清单/IMG-20260425085421354.png} | Bin .../组件清单/IMG-20260425085421448.png} | Bin .../组件清单/IMG-20260425085421515.png} | Bin .../组件清单/IMG-20260425085421572.png} | Bin .../组件清单/IMG-20260425085421637.png} | Bin .../组件清单/IMG-20260425085421706.png} | Bin .../组件清单/IMG-20260425085421774.png} | Bin Project/fonrey/UI_SYSTEM/UI_SYSTEM.md | 18 +++++----- .../{UI&UX => UI_SYSTEM}/UI_SYSTEM文档要求.md | 0 .../fonrey/{UI&UX => UI_SYSTEM}/组件清单.md | 32 +++++++++--------- Project/fonrey/prompt/UI System 生成实操.md | 2 +- Project/fonrey/prompt/系统设计Review 实操.md | 2 +- 21 files changed, 27 insertions(+), 27 deletions(-) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085110506.png => UI_SYSTEM/组件清单/IMG-20260425085420706.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085110603.png => UI_SYSTEM/组件清单/IMG-20260425085420782.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085110666.png => UI_SYSTEM/组件清单/IMG-20260425085420857.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085110740.png => UI_SYSTEM/组件清单/IMG-20260425085420932.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085110836.png => UI_SYSTEM/组件清单/IMG-20260425085421006.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085110905.png => UI_SYSTEM/组件清单/IMG-20260425085421096.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085110987.png => UI_SYSTEM/组件清单/IMG-20260425085421159.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111054.png => UI_SYSTEM/组件清单/IMG-20260425085421220.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111135.jpg => UI_SYSTEM/组件清单/IMG-20260425085421290.jpg} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111215.png => UI_SYSTEM/组件清单/IMG-20260425085421354.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111302.png => UI_SYSTEM/组件清单/IMG-20260425085421448.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111380.png => UI_SYSTEM/组件清单/IMG-20260425085421515.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111441.png => UI_SYSTEM/组件清单/IMG-20260425085421572.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111508.png => UI_SYSTEM/组件清单/IMG-20260425085421637.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111585.png => UI_SYSTEM/组件清单/IMG-20260425085421706.png} (100%) rename Asset/Attachment/Project/fonrey/{UI&UX/组件清单/IMG-20260425085111655.png => UI_SYSTEM/组件清单/IMG-20260425085421774.png} (100%) rename Project/fonrey/{UI&UX => UI_SYSTEM}/UI_SYSTEM文档要求.md (100%) rename Project/fonrey/{UI&UX => UI_SYSTEM}/组件清单.md (98%) diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110506.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085420706.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110506.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085420706.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110603.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085420782.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110603.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085420782.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110666.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085420857.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110666.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085420857.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110740.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085420932.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110740.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085420932.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110836.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421006.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110836.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421006.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110905.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421096.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110905.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421096.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110987.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421159.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085110987.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421159.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111054.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421220.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111054.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421220.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111135.jpg b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421290.jpg similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111135.jpg rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421290.jpg diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111215.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421354.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111215.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421354.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111302.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421448.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111302.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421448.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111380.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421515.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111380.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421515.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111441.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421572.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111441.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421572.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111508.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421637.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111508.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421637.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111585.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421706.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111585.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421706.png diff --git a/Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111655.png b/Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421774.png similarity index 100% rename from Asset/Attachment/Project/fonrey/UI&UX/组件清单/IMG-20260425085111655.png rename to Asset/Attachment/Project/fonrey/UI_SYSTEM/组件清单/IMG-20260425085421774.png diff --git a/Project/fonrey/UI_SYSTEM/UI_SYSTEM.md b/Project/fonrey/UI_SYSTEM/UI_SYSTEM.md index d4377c8c..8b7e2f44 100644 --- a/Project/fonrey/UI_SYSTEM/UI_SYSTEM.md +++ b/Project/fonrey/UI_SYSTEM/UI_SYSTEM.md @@ -9,7 +9,7 @@ > **For developers**: 本文是开发还原 UI 的唯一权威。所有组件以 HTML + Tailwind class 描述，不输出 JSX。新增页面须先到此处查找可复用组件与模板；如需新模式，先补本文再落地。 > **关联文档**： > - `Project/fonrey/TECH_STACK/TECH_STACK.md`（技术总纲） -> - `Project/fonrey/UI&UX/组件清单.md`（组件可行性分析） +> - `Project/fonrey/UI_SYSTEM/组件清单.md`（组件可行性分析） > - `Project/fonrey/PRD/*`（业务需求） --- @@ -48,15 +48,15 @@ #### 2.1.1 品牌色（Primary — Teal） -| Token | Hex | Tailwind 类 | 使用场景 | -|---|---|---|---| -| `primary-50` | `#F0FDFA` | `bg-primary-50` | 页面强调区微底色、Tag 极淡底 | -| `primary-100` | `#CCFBF1` | `bg-primary-100` | 选中背景、标签底色 | -| `primary-200` | `#99F6E4` | `bg-primary-200` | Hover 标签底色 | -| `primary-500` | `#14B8A6` | `bg-primary-500` | 辅助主色（图标、强调文字） | +| Token | Hex | Tailwind 类 | 使用场景 | +| ------------- | --------- | ---------------- | ------------------------- | +| `primary-50` | `#F0FDFA` | `bg-primary-50` | 页面强调区微底色、Tag 极淡底 | +| `primary-100` | `#CCFBF1 | `bg-primary-100` | 选中背景、标签底色 | +| `primary-200` | `#99F6E4` | `bg-primary-200` | Hover 标签底色 | +| `primary-500` | `#14B8A6` | `bg-primary-500` | 辅助主色（图标、强调文字） | | `primary-600` | `#0F766E` | `bg-primary-600` | **主按钮、激活态、Tab 下划线（基准主色）** | -| `primary-700` | `#115E59` | `bg-primary-700` | 主按钮 Hover | -| `primary-800` | `#134E4A` | `bg-primary-800` | 主按钮 Active / 深色文字 | +| `primary-700` | `#115E59` | `bg-primary-700` | 主按钮 Hover | +| `primary-800` | `#134E4A` | `bg-primary-800` | 主按钮 Active / 深色文字 | #### 2.1.2 中性色（Neutral — Slate 系，偏冷灰） diff --git a/Project/fonrey/UI&UX/UI_SYSTEM文档要求.md b/Project/fonrey/UI_SYSTEM/UI_SYSTEM文档要求.md similarity index 100% rename from Project/fonrey/UI&UX/UI_SYSTEM文档要求.md rename to Project/fonrey/UI_SYSTEM/UI_SYSTEM文档要求.md diff --git a/Project/fonrey/UI&UX/组件清单.md b/Project/fonrey/UI_SYSTEM/组件清单.md similarity index 98% rename from Project/fonrey/UI&UX/组件清单.md rename to Project/fonrey/UI_SYSTEM/组件清单.md index 71876fa6..56f3cadf 100644 --- a/Project/fonrey/UI&UX/组件清单.md +++ b/Project/fonrey/UI_SYSTEM/组件清单.md @@ -13,7 +13,7 @@ ## Data Table （数据表格） -![[IMG-20260425085110506.png]] +![[IMG-20260425085420706.png]] #### 1. Data Table（数据表格）— 核心组件 @@ -91,7 +91,7 @@ ## Modal Dialog （模态对话框） -![[IMG-20260425085110603.png]] +![[IMG-20260425085420782.png]] ### 🪟 组件名称：Modal Dialog（模态对话框） 图中这个"编辑房源价格"弹窗，包含以下子组件： @@ -132,7 +132,7 @@ ## Tree Select/Cascading Dropdown(树形下拉选择器) ### 🌲 组件名称：Tree Select / Cascading Dropdown（树形下拉选择器） -![[IMG-20260425085110666.png]] +![[IMG-20260425085420857.png]] #### 结构拆解 |部位|组件名称|说明| @@ -187,7 +187,7 @@ ## 带搜索的 Tree Select 完整功能清单 -![[IMG-20260425085110740.png]] +![[IMG-20260425085420932.png]] ### 🔍 带搜索的 Tree Select 完整功能清单 #### 新增的搜索相关特性 @@ -202,7 +202,7 @@ ## Data Range Picker （日期范围选择） -![[IMG-20260425085110836.png]] +![[IMG-20260425085421006.png]] 这个组件的正式名称是 **Date Range Picker（日期范围选择器）**，也叫 **Dual-Month Calendar Picker**。 --- @@ -344,7 +344,7 @@ html ## Collapsible Card Grid（折叠展开面板） -![[IMG-20260425085110905.png]] +![[IMG-20260425085421096.png]] ### 🪗 组件名称：Collapsible Card Grid（可折叠卡片网格） @@ -404,8 +404,8 @@ html ## Photo Gallery Manager (相册管理器) -![[IMG-20260425085110987.png]] -![[IMG-20260425085111054.png]] +![[IMG-20260425085421159.png]] +![[IMG-20260425085421220.png]] 这两张图合在一起是一个完整的 **Photo Gallery Manager（相册管理器）**，是你上传的所有截图里**功能最复合、复杂度最高**的页面。下面逐一拆解： --- @@ -503,7 +503,7 @@ html ## Image Lightbox View （全屏图片灯箱预览器） -![[IMG-20260425085111135.jpg]] +![[IMG-20260425085421290.jpg]] ### 🔍 组件名称：Image Lightbox Viewer（全屏图片灯箱预览器） 上一个是**管理后台的相册管理器**（用于上传/删除/分类），这个是**面向用户的全屏预览器**，两者职责完全不同。 @@ -554,7 +554,7 @@ html 这四个库全部无框架依赖，与你的技术栈完全兼容。继续上传！ ## Accordion Progress Panel（可折叠进度检查面板） -![[IMG-20260425085111215.png]] +![[IMG-20260425085421354.png]] ### 📊 组件名称：Accordion Progress Panel（可折叠进度检查面板） @@ -627,7 +627,7 @@ html ### ✏️ 组件名称：Inline Edit Mode / 页面级读写切换 -![[IMG-20260425085111302.png]] +![[IMG-20260425085421448.png]] #### 整体页面结构拆解 |部位|组件名称|可行性| @@ -724,7 +724,7 @@ html ## Drawer / Slide-over Panel（右侧抽屉面板） -![[IMG-20260425085111380.png]] +![[IMG-20260425085421515.png]] ### 🗂️ 组件名称：Drawer / Slide-over Panel（右侧抽屉面板） #### 整体页面结构拆解 @@ -820,7 +820,7 @@ html ## Multi-select Tag Input（多选标签选择器） -![[IMG-20260425085111441.png]] +![[IMG-20260425085421572.png]] ### 🏷️ 组件名称：Multi-select Tag Input（多选标签选择器） #### 结构拆解 @@ -914,7 +914,7 @@ html ## Dynamic Form Table（动态可增删行表格） -![[IMG-20260425085111508.png]] +![[IMG-20260425085421637.png]] ### ➕ 组件名称：Dynamic Form Table（动态可增删行表格） #### 结构拆解 @@ -1037,7 +1037,7 @@ html ## Sortable Table with Drag Handle（带拖拽手柄的可排序表格） -![[IMG-20260425085111585.png]] +![[IMG-20260425085421706.png]] ### ↕️ 组件名称：Sortable Table with Drag Handle（带拖拽手柄的可排序表格） #### 新增特性拆解 @@ -1144,7 +1144,7 @@ css ## Multi-Table Independent Pagination（同页多表格独立分页） -![[IMG-20260425085111655.png]] +![[IMG-20260425085421774.png]] ### 📋 组件名称：Multi-Table Independent Pagination（同页多表格独立分页） #### 页面结构拆解 diff --git a/Project/fonrey/prompt/UI System 生成实操.md b/Project/fonrey/prompt/UI System 生成实操.md index 0ee11db8..58d8d459 100644 --- a/Project/fonrey/prompt/UI System 生成实操.md +++ b/Project/fonrey/prompt/UI System 生成实操.md @@ -58,7 +58,7 @@ - 竞品截图，请根据 B2B SaaS 行业最佳实践提案 请参考：`Project/fonrey/PRD/竞品截图.md` - 组件清单，分析竞品产品使用的UI组件 - 请参考：`Project/fonrey/UI&UX/组件清单.md` + 请参考：`Project/fonrey/UI_SYSTEM/组件清单.md` --- diff --git a/Project/fonrey/prompt/系统设计Review 实操.md b/Project/fonrey/prompt/系统设计Review 实操.md index 929bda4f..be30bb6d 100644 --- a/Project/fonrey/prompt/系统设计Review 实操.md +++ b/Project/fonrey/prompt/系统设计Review 实操.md @@ -54,7 +54,7 @@ **UI 设计文档**： - UI SYSTEM：`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` -- 组件清单：`Project/fonrey/UI&UX/组件清单.md` +- 组件清单：`Project/fonrey/UI_SYSTEM/组件清单.md` **其他参考文档**：