图片路径变化

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。新增页面须先到此处查找可复用组件与模板如需新模式先补本文再落地。
> **关联文档**
> - `Project/fonrey/TECH_STACK/TECH_STACK.md`(技术总纲)
> - `Project/fonrey/UI&UX/组件清单.md`(组件可行性分析)
> - `Project/fonrey/UI_SYSTEM/组件清单.md`(组件可行性分析)
> - `Project/fonrey/PRD/*`(业务需求)
---
@@ -49,9 +49,9 @@
#### 2.1.1 品牌色Primary — Teal
| Token | Hex | Tailwind 类 | 使用场景 |
|---|---|---|---|
| ------------- | --------- | ---------------- | ------------------------- |
| `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-500` | `#14B8A6` | `bg-primary-500` | 辅助主色(图标、强调文字) |
| `primary-600` | `#0F766E` | `bg-primary-600` | **主按钮、激活态、Tab 下划线(基准主色)** |

View File

@@ -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同页多表格独立分页
#### 页面结构拆解

View File

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

View File

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