📋 目录
📋 插件概述
超级卡片增强版 是一款专为活字格平台开发的高级卡片展示插件，提供丰富的预置模板和自定义模板功能，支持多种数据展示场景，具备强大的样式定制和交互功能。
🎯 主要特性
核心功能
🔄 双模板模式
支持预置模板和自定义模板两种模式
📋 11种预置模板
涵盖各种业务场景的卡片模板
🎨 自定义模板
支持完全自定义的HTML/CSS模板
🔗 字段映射
灵活的数据源字段映射配置
🎭 条件样式
基于数据条件的动态样式控制
📂 分组功能
支持卡片分组展示和管理
⚡ 懒加载
大数据量场景下的性能优化
📱 响应式设计
适配不同屏幕尺寸
📦 预置模板详解
📄 标准卡片
基础卡片模板，适用于通用信息展示
- 支持标题、描述、图片
- 灵活的布局配置
- 响应式设计
🛍️ 商品卡片
专为电商场景设计的商品展示模板
- 商品图片、名称、描述
- 价格显示和格式化
- 库存信息
👥 联系人卡片
适用于人员信息展示的模板
- 头像、姓名、职位
- 联系方式信息
- 部门信息
📰 新闻卡片
新闻资讯展示专用模板
- 新闻标题、摘要、封面
- 作者、发布日期
- 分类标签
✅ 任务卡片
项目管理场景的任务展示模板
- 任务标题、描述
- 状态、优先级
- 进度条显示
🖼️ 图片卡片
图片展示专用模板
- 图片展示和角标
- 图片信息显示
- 标签和时间
📊 统计卡片
数据统计展示模板
- 数值、单位显示
- 趋势指示
- 对比数据
📁 文档卡片
文档管理场景的模板
- 文档类型图标
- 文档信息
- 状态显示
📋 简单列表
简洁的列表展示模板
- 图标、标题、描述
- 附加信息
- 简洁布局
📝 详细列表
详细信息展示的列表模板
- 头像、标题、副标题
- 标签、时间、状态
- 操作按钮
🏠 房产卡片
房地产信息展示模板
- 房屋图片、类型
- 价格、面积、户型
- 地址、开发商
⚙️ 配置选项详解
模板设置
模板类型选择
- 预置模板：使用系统提供的11种专业模板
- 自定义模板：完全自定义HTML/CSS模板
数据源配置
字段映射
- 支持灵活的数据源字段映射
- 每个模板都有专门的字段配置
- 支持自定义字段添加
分组功能
分组设置
- 启用/禁用分组功能
- 分组标题样式配置
- 分组统计显示
- 分组命令配置
懒加载配置
性能优化
- 启用虚拟滚动
- 配置每页加载数量
- 大数据量场景优化
🎨 自定义模板功能说明
🌟 功能特性
自定义模板功能允许您完全控制卡片的HTML结构和CSS样式，实现无限可能的展示效果。
核心优势
- 完全自由：不受预置模板限制，可创建任意布局
- 品牌定制：完美匹配企业品牌形象和设计规范
- 功能扩展：支持JavaScript交互和动画效果
- 响应式设计：可自定义不同屏幕尺寸的适配方案
- 数据绑定：灵活的数据字段映射和格式化
适用场景
- 企业官网产品展示
- 电商平台商品列表
- 新闻资讯聚合页面
- 个人作品集展示
- 数据可视化面板
- 特殊业务场景定制
技术特点
- 支持完整的HTML5语法
- CSS3样式和动画支持
- JavaScript交互功能
- 响应式布局框架兼容
- 第三方库集成支持
🎨 详细样式配置选项
字体配置
字体设置
- 字体族：支持系统字体和自定义字体
- 字体大小：精确控制文字大小（像素）
- 字体粗细：normal、bold等粗细设置
- 字体颜色：支持十六进制、RGB、RGBA颜色值
颜色配置
颜色设置
- 背景色：卡片背景颜色设置
- 边框颜色：卡片边框颜色配置
- 文字颜色：标题、描述等文字颜色
- 悬停颜色：鼠标悬停时的颜色变化
- 透明度支持：支持半透明效果
布局配置
布局设置
- 卡片间距：卡片之间的间距控制
- 内边距：卡片内容与边框的距离
- 圆角：卡片边角的圆润程度
- 边框宽度：卡片边框的粗细
- 对齐方式：左对齐、居中、右对齐
阴影效果
阴影设置
- 阴影颜色：阴影的颜色设置
- 阴影模糊：阴影的模糊程度
- 阴影扩散：阴影的扩散范围
- 阴影偏移：X、Y方向的偏移量
- 阴影透明度：阴影的透明度控制
悬停效果
悬停设置
- 悬停缩放：鼠标悬停时的缩放比例
- 悬停过渡：动画过渡时间设置
- 悬停背景：悬停时的背景色变化
- 悬停阴影：悬停时的阴影效果
- 悬停上移：悬停时的位置移动
🔧 高级功能
条件样式
动态样式控制
- 基于数据字段的条件判断
- 支持多种条件运算符
- 动态背景色、边框色设置
- 条件字体样式控制
- 条件阴影效果
命令系统
交互命令
- 单击、双击、右键命令
- 鼠标进入、离开命令
- 分组交互命令
- 操作按钮命令
- 参数传递支持
自定义CSS
样式扩展
- 支持自定义CSS代码
- CSS优先级控制
- 样式覆盖机制
- 响应式CSS支持
📱 响应式设计
自适应布局
- 自动适配不同屏幕尺寸
- 移动端优化显示
- 平板设备适配
- 桌面端最佳体验
布局模式
布局选项
- 固定布局：保持固定列数
- 响应式布局：根据屏幕自动调整
- 自动高度：根据内容自动调整高度
- 固定高度：保持统一高度
🚀 性能优化
懒加载机制
- 虚拟滚动技术
- 按需加载数据
- 内存使用优化
- 渲染性能提升
渲染优化
- DOM操作优化
- 事件委托机制
- CSS动画硬件加速
- 图片懒加载
🔌 集成说明
活字格集成
- 无缝集成活字格平台
- 支持数据源绑定
- 命令系统集成
- 样式主题兼容
数据源支持
- 数据库表绑定
- 视图数据源
- 外部数据接口
- 静态数据配置
📋 使用指南
快速开始
- 在活字格设计器中拖拽插件到页面
- 选择模板类型（预置或自定义）
- 配置数据源和字段映射
- 调整样式设置
- 预览和测试效果
最佳实践
💡 使用建议
- 根据数据量选择合适的加载方式
- 合理配置卡片间距和布局
- 注意移动端的显示效果
- 定期优化自定义CSS代码
🛠️ 开发说明
技术架构
- 基于.NET Framework 4.7.2
- WPF用户界面框架
- JavaScript前端交互
- CSS3样式渲染
扩展开发
- 支持自定义模板开发
- JavaScript插件机制
- CSS样式定制
- API接口扩展
📞 技术支持
✅ 技术支持
我们提供全面的技术支持服务，包括使用指导、问题排查、功能定制等。
联系方式
- 技术文档：查看详细的使用说明
- 问题反馈：及时报告使用中的问题
- 功能建议：提出改进和新增功能建议
- 定制服务：提供个性化定制开发