超级卡片增强版 - 条件样式使用指南

📋 目录

功能特性
配置指南
使用示例
高级技巧
调试技巧
最佳实践
总结

🎯 功能特性

核心特性

🔍 条件判断

支持8种条件运算符（等于、不等于、包含、不包含、大于、小于、大于等于、小于等于、范围）

🔗 字段映射

支持自定义字段名映射，灵活适配不同数据源

🎨 样式控制

支持卡片、标题、描述、阴影、悬停等多种样式属性

💻 通用CSS

支持完全自定义的CSS选择器和样式属性

⚡ 优先级控制

支持4个级别的CSS优先级

🔄 向后兼容

保留原有样式属性，确保兼容性

条件运算符详解

运算符	说明	适用数据类型	示例
等于	精确匹配值	字符串、数字、布尔值	`status = "active"`
不等于	不匹配指定值	字符串、数字、布尔值	`status != "inactive"`
包含	字符串包含关系	字符串	`title.contains("重要")`
不包含	字符串不包含关系	字符串	`title.notContains("测试")`
大于	数值大于比较	数字	`price > 100`
小于	数值小于比较	数字	`price < 50`
大于等于	数值大于等于比较	数字	`quantity >= 10`
小于等于	数值小于等于比较	数字	`quantity <= 5`
范围	数值范围判断	数字	`score between 80 and 100`

⚙️ 配置指南

1. 基础条件样式配置

步骤1：启用条件样式

在插件属性面板中找到"条件样式"分类
勾选"启用条件样式"选项

步骤2：添加条件规则

点击"条件样式规则"的"+"按钮添加新规则
配置规则基本信息：
- 规则名称：为规则起一个描述性的名称
- 条件字段：选择要判断的数据字段
- 条件运算符：选择判断条件
- 条件值：输入判断值

步骤3：配置样式属性

根据需求配置以下样式属性：

🎴 卡片样式

卡片背景色：设置卡片背景颜色
卡片边框颜色：设置边框颜色
卡片边框宽度：设置边框宽度（0-10像素）
卡片圆角：设置圆角大小（0-20像素）

📝 标题样式

标题字体颜色：设置标题文字颜色
标题字体大小：设置标题字体大小
标题字体粗细：设置标题字体粗细

📄 描述样式

描述字体颜色：设置描述文字颜色
描述字体大小：设置描述字体大小
描述字体粗细：设置描述是否加粗

🌑 阴影样式

启用阴影：是否启用阴影效果
阴影颜色：设置阴影颜色
阴影大小：设置阴影大小

🖱️ 悬停样式

启用悬停效果：是否启用悬停样式变化
悬停时背景色：悬停时的背景颜色
悬停时边框颜色：悬停时的边框颜色
悬停时标题颜色：悬停时的标题颜色
悬停时描述颜色：悬停时的描述颜色
悬停时阴影大小：悬停时的阴影大小
悬停时阴影颜色：悬停时的阴影颜色
悬停时上移：是否启用悬停上移效果
悬停时上移距离：上移距离（像素）

2. 通用自定义CSS配置

启用自定义CSS

在条件规则中找到"自定义CSS"分类
勾选"启用自定义CSS"选项

配置CSS选择器

💡 CSS选择器配置

CSS选择器：输入要应用样式的CSS选择器
示例：.card、.card-title、.card-description
支持类选择器、ID选择器、伪类选择器等

配置CSS样式属性

CSS样式属性：每行输入一个CSS属性
格式：属性名: 值;

示例：
background-color: #ff6b6b;
color: white;
font-size: 16px;
font-weight: bold;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);

设置CSS优先级

🔽 低优先级

普通CSS样式

⚖️ 普通优先级

标准CSS样式

⬆️ 高优先级

高优先级CSS样式

🚀 最高优先级

自动添加 !important 声明

配置悬停CSS

悬停CSS选择器：悬停时的CSS选择器
悬停CSS样式属性：悬停时的CSS样式属性
悬停CSS优先级：悬停样式的优先级

📝 使用示例

示例1：状态标识样式

场景：根据任务状态显示不同的背景色

配置：
规则名称：重要任务
条件字段：status
条件运算符：等于
条件值：urgent

卡片样式：
- 卡片背景色：#ff6b6b（红色）
- 卡片边框颜色：#e74c3c
- 卡片边框宽度：2

标题样式：
- 标题字体颜色：white
- 标题字体粗细：bold

示例2：价格区间样式

场景：根据商品价格显示不同的样式

配置：
规则名称：高价商品
条件字段：price
条件运算符：大于
条件值：1000

卡片样式：
- 卡片背景色：#f39c12（橙色）
- 卡片圆角：12

自定义CSS：
- CSS选择器：.card
- CSS样式属性：
  background: linear-gradient(45deg, #f39c12, #e67e22);
  color: white;
  transform: scale(1.02);
  transition: all 0.3s ease;

示例3：文本内容样式

场景：根据标题内容应用特殊样式

配置：
规则名称：VIP客户
条件字段：title
条件运算符：包含
条件值：VIP

自定义CSS：
- CSS选择器：.card
- CSS样式属性：
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: 3px solid #ffd700;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);

悬停CSS：
- 悬停CSS选择器：.card:hover
- 悬停CSS样式属性：
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 16px 48px rgba(102, 126, 234, 0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

示例4：数值范围样式

场景：根据评分显示不同的星级样式

配置：
规则名称：五星评价
条件字段：rating
条件运算符：范围
最小值：4.5
最大值：5.0

自定义CSS：
- CSS选择器：.card
- CSS样式属性：
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #8b4513;
  border: 2px solid #ffd700;
  position: relative;

- CSS选择器：.card::before
- CSS样式属性：
  content: "⭐⭐⭐⭐⭐";
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 20px;
  background: white;
  padding: 2px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

🎨 高级技巧

1. 组合条件样式

可以配置多个条件规则，实现复杂的样式逻辑：

规则1：紧急任务
- 条件：status = "urgent"
- 样式：红色背景

规则2：高优先级
- 条件：priority = "high"
- 样式：橙色边框

规则3：紧急且高优先级
- 条件：status = "urgent" AND priority = "high"
- 样式：红色背景 + 橙色边框 + 闪烁动画

2. 动态样式动画

使用CSS动画创建动态效果：

/* 闪烁动画 */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.5; }
}

.card.urgent {
  animation: blink 2s infinite;
}

/* 呼吸灯效果 */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.card.important {
  animation: breathe 3s ease-in-out infinite;
}

3. 响应式样式

根据屏幕尺寸应用不同样式：

/* 移动端样式 */
@media (max-width: 768px) {
  .card {
    margin: 8px;
    font-size: 14px;
  }
}

/* 桌面端样式 */
@media (min-width: 769px) {
  .card {
    margin: 16px;
    font-size: 16px;
  }
}

4. 主题切换

使用CSS变量实现主题切换：

/* 浅色主题 */
.card {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #e0e0e0;
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

/* 深色主题 */
.card.dark-theme {
  --bg-color: #2c3e50;
  --text-color: #ecf0f1;
  --border-color: #34495e;
}

🔧 调试技巧

1. 浏览器开发者工具

使用F12打开开发者工具
检查元素查看应用的CSS样式
使用Console查看JavaScript错误

2. 条件判断调试

// 在浏览器控制台测试条件判断
console.log('条件字段值:', fieldValue);
console.log('条件运算符:', operator);
console.log('条件值:', conditionValue);
console.log('判断结果:', result);

3. CSS样式调试

使用开发者工具的Elements面板
查看应用的CSS规则和优先级
实时修改样式进行测试

4. 常见问题排查

⚠️ 条件样式不生效

检查是否启用了条件样式
验证条件字段名是否正确
确认条件值和运算符设置
检查数据源字段映射

⚠️ CSS样式不应用

检查CSS选择器是否正确
验证CSS语法是否正确
确认CSS优先级设置
检查是否有样式冲突

⚠️ 悬停效果不工作

检查是否启用了悬停样式
验证悬停CSS选择器
确认悬停CSS属性设置
检查CSS过渡效果

📚 最佳实践

📝 命名规范

使用描述性的规则名称
选择器名称要有语义化
保持命名的一致性

🎨 样式组织

按功能分组CSS属性
使用注释说明样式用途
保持样式的可维护性

⚡ 性能优化

避免过于复杂的选择器
合理使用CSS动画
注意样式的继承关系

🌐 兼容性考虑

测试不同浏览器的兼容性
考虑移动端的显示效果
保持向后兼容性

🚀 总结

✅ 关键要点

优先使用通用自定义CSS获得最大灵活性
合理配置条件判断逻辑
注意样式的优先级和兼容性
充分利用CSS的高级特性
保持良好的代码组织和维护习惯

条件样式功能为超级卡片增强版插件提供了强大的样式定制能力。通过合理使用传统样式属性和通用自定义CSS功能，用户可以创建出丰富多样、动态响应的卡片界面。

通过本指南的学习和实践，您将能够充分发挥条件样式功能的潜力，创建出专业级的卡片展示效果。

🎨 超级卡片增强版 - 条件样式使用指南