画廊视图设计文档
一、功能概述
Section titled “一、功能概述”画廊视图插件是基于 NocoBase 2.0 开发的可视化扩展插件，为用户提供以画廊形式展示数据记录的能力。通过直观的图文布局，帮助用户快速浏览、定位数据内容，尤其适用于产品展示、人员档案等场景。
二、核心功能设计
Section titled “二、核心功能设计”2.1 数据展示
Section titled “2.1 数据展示”- 支持数据绑定模式：选择数据表字段，自动生成画廊视图
- 支持按指定字段正序/倒序排列
- 大数据量场景下支持懒加载
2.2 视图模式
Section titled “2.2 视图模式”-
Effect Cover Flow（3D流式布局）：
- 图片呈 3D 流式排列，中心图片聚焦突出
- 两侧图片呈倾斜的景深效果，形成立体视觉层次
- 适合产品展示、作品集等需要突出单个内容的场景
-
Thumbs（缩略图布局）：
- 以网格缩略图形式展示图片
- 支持快速浏览和定位大量内容
- 适合图库、档案管理等需要整体浏览的场景
-
Vertical（垂直布局）：
- 图片沿垂直方向纵向排列
- 适合长图展示或多内容的连贯阅读
- 符合常规滚动浏览习惯
2.3 内容配置
Section titled “2.3 内容配置”- 支持配置画廊图片字段
- 支持配置标题、简介等文本字段
- 支持配置图片展示模式（裁剪、适应、拉伸）
详情是否兼容让实施自己配置? (参考列表查看的详情)
2.4 交互
Section titled “2.4 交互”- 点击卡片可跳转详情页或弹出详情抽屉
- 支持筛选、搜索，快速定位特定记录
- 支持卡片悬停效果（阴影、缩放等）
2.5 字段设计
Section titled “2.5 字段设计”画廊配置（Gallery）
Section titled “画廊配置（Gallery）”| 分组 | 字段 | 类型 | 说明 |
|---|---|---|---|
| 布局配置 | layoutMode | Select | 布局方向（3D流式/缩略图/垂直，默认：effectCoverFlow） |
| cardGap | Number | 卡片间距（默认：16px） | |
| displayCount | Number | 每屏展示图片数量（默认：4） | |
| 基础字段 | coverField | 选择器 | 画廊图片字段 |
| titleField | 选择器 | 标题字段 | |
| descriptionField | 选择器 | 简介字段 | |
| detailField | 选择器 | 详情字段 | |
| 样式配置 | imageMode | Select | 图片展示模式（cover/contain/fill/none，默认：cover） |
| 交互配置 | carouselInterval | Number | 自动轮播间隔时间（单位：ms，默认：3000，0 表示不轮播） |
三、开发方案
Section titled “三、开发方案”3.1 设计原则
Section titled “3.1 设计原则”- 视觉优先：以图片为核心，突出视觉展示效果
- 灵活配置：通过可视化字段映射配置，快速搭建画廊视图
- 响应式设计：自动适配不同屏幕尺寸，保持良好的浏览体验
- 性能优化：大数据量场景下采用虚拟滚动和懒加载技术
3.2 实现细节
Section titled “3.2 实现细节”入口与初始化
Section titled “入口与初始化”- 入口位于创建区块中
- 在创建区块中找到画廊视图插件，选择要展示的数据表
- 画廊视图会展示在区块中，默认使用基础配置
数据绑定流程
Section titled “数据绑定流程”- 用户选择区块右上角的配置，点击字段映射：
- 画廊图片字段
- 标题字段
- 简介字段
- 详情字段
- 系统根据配置自动生成画廊视图
- 数据变化时，画廊视图自动更新
- 区块右上角”配置”按钮可设置：
- 布局方向（水平/垂直）
- 卡片间距
- 文字位置 (在图片中/在图片下方)
- 排序方式（正序/倒序）
- 图片展示模式（裁剪/适应/拉伸）
3.4 实现计划
Section titled “3.4 实现计划”| 阶段 | 里程碑 | 交付物 |
|---|---|---|
| 1 | 核心功能开发 | 用户可正常配置画廊视图，基础交互完整可用 |
| 2 | 增强功能实现 | 完成懒加载、筛选等功能 |
| 3 | 迭代优化 | 交互优化 + 用户体验 + 性能优化 |