rgthree-comfyUI进度条自定义样式指南

项目背景

rgthree-comfy是一个基于ComfyUI的扩展项目，提供了增强的用户界面和功能。其中，进度条组件(rgthree-progress-bar)是用户交互中的重要视觉元素，用于显示任务执行进度。

进度条样式自定义需求

在主题定制过程中，开发者发现进度条的特殊DOM结构使得传统的CSS选择器无法直接作用于内部元素。特别是进度条内部的div.bar元素，由于位于特殊DOM中，常规CSS规则无法生效。

解决方案实现

项目维护者响应了这一需求，在最新版本中为进度条组件添加了CSS自定义属性(CSS Variables)，使得用户可以通过修改这些变量值来实现进度条的视觉定制，无需直接操作特殊DOM。

可配置样式参数

现在用户可以通过以下CSS变量自定义进度条外观：

--rgthree-progress-bg-color: 进度条背景色（默认rgba(23, 23, 23, 0.9)）
--rgthree-progress-nodes-bg-color: 节点进度背景色（默认rgb(0, 128, 0)）
--rgthree-progress-steps-bg-color: 步骤进度背景色（默认rgb(0, 128, 0)）
--rgthree-progress-error-bg-color: 错误状态背景色（默认rgb(128, 0, 0)）
--rgthree-progress-text-color: 文本颜色（默认#fff）

实现原理

这种解决方案采用了CSS变量(Custom Properties)的设计模式，具有以下优势：

1. 封装性：组件内部仍然保持特殊DOM的封装特性
2. 可定制性：通过暴露有限的接口实现样式定制
3. 维护性：组件升级不会破坏现有的自定义样式
4. 兼容性：现代浏览器都支持CSS变量特性

使用建议

用户可以在项目的user.css文件中添加类似以下代码来自定义进度条样式：

:root {
  --rgthree-progress-bg-color: #2a2a2a;
  --rgthree-progress-nodes-bg-color: #4CAF50;
  --rgthree-progress-steps-bg-color: #8BC34A;
  --rgthree-progress-error-bg-color: #F44336;
  --rgthree-progress-text-color: #FFFFFF;
}

这种设计模式既满足了UI定制的需求，又保持了组件的封装性和可维护性，是Web组件开发的良好实践。