图片路径变化

This commit is contained in:
2026-04-25 09:10:07 +08:00
parent 466273a164
commit 36651b38a9
21 changed files with 27 additions and 27 deletions

View File

@@ -9,7 +9,7 @@
> **For developers**: 本文是开发还原 UI 的唯一权威。所有组件以 HTML + Tailwind class 描述,不输出 JSX。新增页面须先到此处查找可复用组件与模板;如需新模式,先补本文再落地。 > **For developers**: 本文是开发还原 UI 的唯一权威。所有组件以 HTML + Tailwind class 描述,不输出 JSX。新增页面须先到此处查找可复用组件与模板;如需新模式,先补本文再落地。
> **关联文档**: > **关联文档**:
> - `Project/fonrey/TECH_STACK/TECH_STACK.md`(技术总纲) > - `Project/fonrey/TECH_STACK/TECH_STACK.md`(技术总纲)
> - `Project/fonrey/UI&UX/组件清单.md`(组件可行性分析) > - `Project/fonrey/UI_SYSTEM/组件清单.md`(组件可行性分析)
> - `Project/fonrey/PRD/*`(业务需求) > - `Project/fonrey/PRD/*`(业务需求)
--- ---
@@ -49,9 +49,9 @@
#### 2.1.1 品牌色(Primary — Teal) #### 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-600` | `#0F766E` | `bg-primary-600` | **主按钮、激活态、Tab 下划线(基准主色)** |

View File

@@ -13,7 +13,7 @@
## Data Table (数据表格) ## Data Table (数据表格)
![[IMG-20260425085110506.png]] ![[IMG-20260425085420706.png]]
#### 1. Data Table(数据表格)— 核心组件 #### 1. Data Table(数据表格)— 核心组件
@@ -91,7 +91,7 @@
## Modal Dialog (模态对话框) ## Modal Dialog (模态对话框)
![[IMG-20260425085110603.png]] ![[IMG-20260425085420782.png]]
### 🪟 组件名称:Modal Dialog(模态对话框) ### 🪟 组件名称:Modal Dialog(模态对话框)
图中这个"编辑房源价格"弹窗,包含以下子组件: 图中这个"编辑房源价格"弹窗,包含以下子组件:
@@ -132,7 +132,7 @@
## Tree Select/Cascading Dropdown(树形下拉选择器) ## Tree Select/Cascading Dropdown(树形下拉选择器)
### 🌲 组件名称:Tree Select / Cascading Dropdown(树形下拉选择器) ### 🌲 组件名称:Tree Select / Cascading Dropdown(树形下拉选择器)
![[IMG-20260425085110666.png]] ![[IMG-20260425085420857.png]]
#### 结构拆解 #### 结构拆解
|部位|组件名称|说明| |部位|组件名称|说明|
@@ -187,7 +187,7 @@
## 带搜索的 Tree Select 完整功能清单 ## 带搜索的 Tree Select 完整功能清单
![[IMG-20260425085110740.png]] ![[IMG-20260425085420932.png]]
### 🔍 带搜索的 Tree Select 完整功能清单 ### 🔍 带搜索的 Tree Select 完整功能清单
#### 新增的搜索相关特性 #### 新增的搜索相关特性
@@ -202,7 +202,7 @@
## Data Range Picker (日期范围选择) ## Data Range Picker (日期范围选择)
![[IMG-20260425085110836.png]] ![[IMG-20260425085421006.png]]
这个组件的正式名称是 **Date Range Picker(日期范围选择器)**,也叫 **Dual-Month Calendar Picker**。 这个组件的正式名称是 **Date Range Picker(日期范围选择器)**,也叫 **Dual-Month Calendar Picker**。
--- ---
@@ -344,7 +344,7 @@ html
## Collapsible Card Grid(折叠展开面板) ## Collapsible Card Grid(折叠展开面板)
![[IMG-20260425085110905.png]] ![[IMG-20260425085421096.png]]
### 🪗 组件名称:Collapsible Card Grid(可折叠卡片网格) ### 🪗 组件名称:Collapsible Card Grid(可折叠卡片网格)
@@ -404,8 +404,8 @@ html
## Photo Gallery Manager (相册管理器) ## Photo Gallery Manager (相册管理器)
![[IMG-20260425085110987.png]] ![[IMG-20260425085421159.png]]
![[IMG-20260425085111054.png]] ![[IMG-20260425085421220.png]]
这两张图合在一起是一个完整的 **Photo Gallery Manager(相册管理器)**,是你上传的所有截图里**功能最复合、复杂度最高**的页面。下面逐一拆解: 这两张图合在一起是一个完整的 **Photo Gallery Manager(相册管理器)**,是你上传的所有截图里**功能最复合、复杂度最高**的页面。下面逐一拆解:
--- ---
@@ -503,7 +503,7 @@ html
## Image Lightbox View (全屏图片灯箱预览器) ## Image Lightbox View (全屏图片灯箱预览器)
![[IMG-20260425085111135.jpg]] ![[IMG-20260425085421290.jpg]]
### 🔍 组件名称:Image Lightbox Viewer(全屏图片灯箱预览器) ### 🔍 组件名称:Image Lightbox Viewer(全屏图片灯箱预览器)
上一个是**管理后台的相册管理器**(用于上传/删除/分类),这个是**面向用户的全屏预览器**,两者职责完全不同。 上一个是**管理后台的相册管理器**(用于上传/删除/分类),这个是**面向用户的全屏预览器**,两者职责完全不同。
@@ -554,7 +554,7 @@ html
这四个库全部无框架依赖,与你的技术栈完全兼容。继续上传! 这四个库全部无框架依赖,与你的技术栈完全兼容。继续上传!
## Accordion Progress Panel(可折叠进度检查面板) ## Accordion Progress Panel(可折叠进度检查面板)
![[IMG-20260425085111215.png]] ![[IMG-20260425085421354.png]]
### 📊 组件名称:Accordion Progress Panel(可折叠进度检查面板) ### 📊 组件名称:Accordion Progress Panel(可折叠进度检查面板)
@@ -627,7 +627,7 @@ html
### ✏️ 组件名称:Inline Edit Mode / 页面级读写切换 ### ✏️ 组件名称:Inline Edit Mode / 页面级读写切换
![[IMG-20260425085111302.png]] ![[IMG-20260425085421448.png]]
#### 整体页面结构拆解 #### 整体页面结构拆解
|部位|组件名称|可行性| |部位|组件名称|可行性|
@@ -724,7 +724,7 @@ html
## Drawer / Slide-over Panel(右侧抽屉面板) ## Drawer / Slide-over Panel(右侧抽屉面板)
![[IMG-20260425085111380.png]] ![[IMG-20260425085421515.png]]
### 🗂️ 组件名称:Drawer / Slide-over Panel(右侧抽屉面板) ### 🗂️ 组件名称:Drawer / Slide-over Panel(右侧抽屉面板)
#### 整体页面结构拆解 #### 整体页面结构拆解
@@ -820,7 +820,7 @@ html
## Multi-select Tag Input(多选标签选择器) ## Multi-select Tag Input(多选标签选择器)
![[IMG-20260425085111441.png]] ![[IMG-20260425085421572.png]]
### 🏷️ 组件名称:Multi-select Tag Input(多选标签选择器) ### 🏷️ 组件名称:Multi-select Tag Input(多选标签选择器)
#### 结构拆解 #### 结构拆解
@@ -914,7 +914,7 @@ html
## Dynamic Form Table(动态可增删行表格) ## Dynamic Form Table(动态可增删行表格)
![[IMG-20260425085111508.png]] ![[IMG-20260425085421637.png]]
### ➕ 组件名称:Dynamic Form Table(动态可增删行表格) ### ➕ 组件名称:Dynamic Form Table(动态可增删行表格)
#### 结构拆解 #### 结构拆解
@@ -1037,7 +1037,7 @@ html
## Sortable Table with Drag Handle(带拖拽手柄的可排序表格) ## Sortable Table with Drag Handle(带拖拽手柄的可排序表格)
![[IMG-20260425085111585.png]] ![[IMG-20260425085421706.png]]
### ↕️ 组件名称:Sortable Table with Drag Handle(带拖拽手柄的可排序表格) ### ↕️ 组件名称:Sortable Table with Drag Handle(带拖拽手柄的可排序表格)
#### 新增特性拆解 #### 新增特性拆解
@@ -1144,7 +1144,7 @@ css
## Multi-Table Independent Pagination(同页多表格独立分页) ## Multi-Table Independent Pagination(同页多表格独立分页)
![[IMG-20260425085111655.png]] ![[IMG-20260425085421774.png]]
### 📋 组件名称:Multi-Table Independent Pagination(同页多表格独立分页) ### 📋 组件名称:Multi-Table Independent Pagination(同页多表格独立分页)
#### 页面结构拆解 #### 页面结构拆解

View File

@@ -58,7 +58,7 @@
- 竞品截图,请根据 B2B SaaS 行业最佳实践提案 - 竞品截图,请根据 B2B SaaS 行业最佳实践提案
请参考:`Project/fonrey/PRD/竞品截图.md` 请参考:`Project/fonrey/PRD/竞品截图.md`
- 组件清单,分析竞品产品使用的UI组件 - 组件清单,分析竞品产品使用的UI组件
请参考:`Project/fonrey/UI&UX/组件清单.md` 请参考:`Project/fonrey/UI_SYSTEM/组件清单.md`
--- ---

View File

@@ -54,7 +54,7 @@
**UI 设计文档**: **UI 设计文档**:
- UI SYSTEM:`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` - UI SYSTEM:`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md`
- 组件清单:`Project/fonrey/UI&UX/组件清单.md` - 组件清单:`Project/fonrey/UI_SYSTEM/组件清单.md`
**其他参考文档**: **其他参考文档**: