图片路径变化

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 类 | 使用场景 |
+| Token         | Hex       | Tailwind 类       | 使用场景                      |
-|---|---|---|---|
+| ------------- | --------- | ---------------- | ------------------------- |
-| `primary-50`  | `#F0FDFA` | `bg-primary-50`  | 页面强调区微底色、Tag 极淡底 |
+| `primary-50`  | `#F0FDFA` | `bg-primary-50`  | 页面强调区微底色、Tag 极淡底          |
-| `primary-100` | `#CCFBF1` | `bg-primary-100` | 选中背景、标签底色 |
+| `primary-100` | `#CCFBF1  | `bg-primary-100` | 选中背景、标签底色                 |
-| `primary-200` | `#99F6E4` | `bg-primary-200` | Hover 标签底色 |
+| `primary-200` | `#99F6E4` | `bg-primary-200` | Hover 标签底色                |
-| `primary-500` | `#14B8A6` | `bg-primary-500` | 辅助主色（图标、强调文字） |
+| `primary-500` | `#14B8A6` | `bg-primary-500` | 辅助主色（图标、强调文字）             |
 | `primary-600` | `#0F766E` | `bg-primary-600` | **主按钮、激活态、Tab 下划线（基准主色）** |
-| `primary-700` | `#115E59` | `bg-primary-700` | 主按钮 Hover |
+| `primary-700` | `#115E59` | `bg-primary-700` | 主按钮 Hover                 |
-| `primary-800` | `#134E4A` | `bg-primary-800` | 主按钮 Active / 深色文字 |
+| `primary-800` | `#134E4A` | `bg-primary-800` | 主按钮 Active / 深色文字         |
 
 #### 2.1.2 中性色（Neutral — Slate 系，偏冷灰）
 

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-20260425085421159.png]]
-![[IMG-20260425085111054.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（同页多表格独立分页）
 
 #### 页面结构拆解

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`
 
 ---
 

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`
 
 **其他参考文档**：