Advanced

PLCVisu CSS 编辑器 – 技术文档

PLCVisu CSS 编辑器 – 总体介绍

PLCVisu CSS 编辑器允许您使用标准 CSS 语法，为用户界面组件全局定义视觉样式规则。它是一个强大的工具，可用于自定义 SVG 元素、按钮、输出框、表格和其他 UI 控件的外观和行为——无需更改其逻辑或结构。

主要特性：

• 全局作用域：在 CSS 编辑器中定义的样式会应用于整个应用程序中所有匹配的元素。
• 标准 CSS 语法：支持常规 CSS 选择器（如 #id、.class、伪类 :hover 等）。
• 实时样式预览：保存后，前端会立即应用样式变化。
• 元素目标定位：可通过以下方式应用样式：
  • 使用 SVG 或控件元素的 id="..." 属性
  • 通过控件属性面板中的 “Class” 字段分配 class="..." 值

操作流程概览：

1. 打开 CSS 编辑器
   导航到：
   汉堡菜单 → CSS 编辑器

2. 定义样式规则
   使用任意有效的 CSS 规则（在支持的子集范围内）为控件和 SVG 设置样式。

3. 为控件分配类名
   对于 UI 控件（如按钮、输出框、表格），请分配一个 CSS 类名。进入 页面（Pages）编辑器，选择一个控件，右侧进入“控件属性”面板，向下滚动找到 “Class” 字段，在此处定义类名，以供稍后在 CSS 编辑器中引用。
   注意：区分大小写！

4. 保存并应用样式
   在 CSS 编辑器中点击 保存（Save）。刷新前端或页面以查看样式更改效果。

支持的 CSS 功能

尚不支持的功能

实用示例

示例：为 Basic Output 控件添加自定义样式

.output-highlight {
  color: white;
  background-color: #006400;
  font-size: 24px;
  padding: 10px;
  border-radius: 6px;
  font-weight: bold;
  transition: all 200ms ease-in-out;
}

.output-highlight:hover {
  background-color: #228B22;
  transform: scale(1.1);
  cursor: pointer;
}

示例：为按钮控件添加样式

.primary-button {
  background-color: #1E90FF;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  transition: all 200ms ease-in-out;
  border: none;
}

.primary-button:hover {
  background-color: #104E8B;
  transform: scale(1.05);
  cursor: pointer;
}

.primary-button:active {
  background-color: #0B3D91;
  transform: scale(0.95);
}

效果说明：

• 按钮为亮蓝色背景，白色文字。
• 鼠标悬停时稍微放大并变暗。
• 点击时进一步变暗并缩小。
• 按钮保持功能完整，可用于触发操作或跳转页面。

示例：为地图控件添加样式

.custom-map {
  border: 4px solid orange;
  border-radius: 12px;
  transform: scale(1.05);
  transition: all 200ms ease-in-out;
}

.custom-map:hover {
  border-color: purple;
  transform: scale(1.1);
  cursor: pointer;
}

SVG 示例

SVG 编辑的步骤说明

1. 准备一个 SVG 文件
   创建或下载一个含有 id 属性的 SVG 文件（例如：<rect id="shape-11" ... />）。

2. 上传 SVG
   路径：
   汉堡菜单 → 控件（Controls）→ 元素（Elements）→ + 添加

3. 插入到页面中
   路径：
   页面（Pages）→ 编辑器（Editor）→ 自定义元素（Custom Elements）
   将上传的 SVG 拖拽到页面布局中。

4. 使用 CSS 样式化 SVG
   打开 CSS 编辑器，输入以下样式：

1. 透明度与缩放示例

#shape-11 {
  fill: red;
  opacity: 10%;
  transform: scale(1);
  transition: all 300ms ease-in-out;
}

#shape-11:hover {
  fill: green;
  opacity: 100%;
  transform: scale(4);
  cursor: pointer;
}

2. 旋转示例

#shape-11 {
  fill: red;
  opacity: 10%;
  transform: scale(1) rotate(0deg);
  transition: all 300ms ease-in-out;
}

#shape-11:hover {
  fill: green;
  opacity: 100%;
  transform: scale(4) rotate(360deg);
  cursor: pointer;
}

3. 边框动画示例

#shape-11 {
  fill: none;
  stroke: red;
  stroke-width: 4px;
  stroke-dasharray: 10, 5;
  stroke-linecap: round;
  transition: all 300ms ease-in-out;
}

#shape-11:hover {
  stroke: green;
  stroke-dasharray: 0;
  stroke-width: 8px;
  transform: scale(1.5);
  cursor: pointer;
}

⚠️ 限制：表格无法通过 CSS 类进行样式控制

PLCVisu 中的大部分控件可以使用 CSS 自定义外观，但表格控件（例如：基础表格、可编辑表格）无法通过外部 CSS 选择器作用于表格行、单元格或内部结构。

• 控件属性中的 “Class” 字段赋予的类名不会影响实际渲染的行或单元格。
• 类似 .table-highlight td、.table-highlight tr:hover、.table-highlight 的选择器将无效。
• 其内部渲染机制可能基于封装组件、自定义渲染器或非标准 DOM 元素（例如 Canvas 或 Shadow DOM）。

目前，表格外观仅能通过控件配置中的内建样式选项进行控制。