diff --git a/.cursor/rules/warm-flow.mdc b/.cursor/rules/warm-flow.mdc
new file mode 100644
index 0000000000000000000000000000000000000000..93a495eae529beba7303cc31690b2816e1112146
--- /dev/null
+++ b/.cursor/rules/warm-flow.mdc
@@ -0,0 +1,48 @@
+---
+description: warm-flow 工程编码与协作规则；以根 AGENTS.md 为唯一来源，约束 JDK1.8 兼容、框架解耦、对外契约与多生态/多ORM/多DB
+globs: *
+alwaysApply: true
+---
+
+# warm-flow 工程规则（Cursor）
+
+本规则是 `warm-flow`（Dromara 开源轻量级工作流引擎 / SDK）的编码与协作约束摘要，**以根 [AGENTS.md](mdc:AGENTS.md) 为唯一来源**。开始任务前先读根 `AGENTS.md`；改动所在顶层模块下若有模块级 `AGENTS.md`（`warm-flow-core`/`warm-flow-orm`/`warm-flow-plugin`/`warm-flow-ui`），再读模块级。本文件与 `AGENTS.md` 冲突时以 `AGENTS.md` 为准。
+
+## 规则优先级
+
+1. 用户当前明确指令。
+2. 模块级 `AGENTS.md`（若存在）。
+3. 根 `AGENTS.md`。
+4. 本规则与根 `CLAUDE.md`（与 `AGENTS.md` 冲突以 `AGENTS.md` 为准）。
+5. `.qoder/repowiki` 等领域 / 架构参考。
+
+## 项目性质
+
+被他人依赖的**开源类库 / SDK**（Maven 中央仓库，`groupId=org.dromara.warm`），不是业务应用。三大最高约束：**JDK 1.8 源码级兼容**、**对外契约向后兼容**、**核心与框架 / ORM / JSON 解耦**。
+
+## 模块速览
+
+- `warm-flow-core`：框架 / ORM / JSON 无关的引擎核心（实体、服务、抽象 `WarmDao`、`FlowEngine`、`FrameInvoker`、SPI、表达式 / 监听器策略）。
+- `warm-flow-orm`：ORM 适配，按「ORM(mybatis / mybatis-plus / easy-query) × (sb/sb3/sb4/solon)」矩阵实现 `WarmDao`。
+- `warm-flow-plugin`：可插拔扩展（`modes` 表达式、`json` 序列化、`ui` 设计器后端）。
+- `warm-flow-ui`：Vue3 + Vite 前端设计器，独立于 Maven 反应堆，许可证 MIT。
+- `sql/`：mysql / oracle / postgresql / sqlserver 四套脚本 + MySQL `v1-upgrade/`。
+
+## 核心红线（详见 AGENTS.md）
+
+1. **JDK 8 语法**：主代码禁止 `var`/`record`/switch 表达式/文本块/`List.of`/`Optional.isEmpty`/`Stream.toList`/`String.isBlank` 等 Java 9+ API；优先用 core 的 `utils.*`。
+2. **解耦**：`warm-flow-core` 禁止 import `org.springframework.*` / `org.noear.solon.*` / `com.baomidou.*`；框架差异走 `FrameInvoker` + SPI + 各 starter，ORM 差异走 `WarmDao` 实现。
+3. **门面**：统一通过 `FlowEngine.xxxService()` / `FlowEngine.newXxx()` 取服务和建实体，不绕过门面直接 new 实现类。
+4. **向后兼容**：公共方法签名、`WarmDao` 接口、实体字段、枚举常量（code / 顺序）、`WarmFlow` 配置项是已发布契约，不随意删 / 改签名 / 重排；废弃用 `@Deprecated` 留过渡期。
+5. **多生态对齐**：改某 starter 能力时，确认 `sb`/`sb3`/`sb4`/`solon` 与对应 ORM 模块是否需同步；自动装配按 SB2 `spring.factories`、SB3/4 `AutoConfiguration.imports`、Solon `META-INF/solon/*.properties` 注册。
+6. **SQL 四套同步**：表结构改动同步四库全量脚本 + 新增 `v1-upgrade/warm-flow_x.x.x.sql`，写明各库方言兼容与回滚。
+7. **扩展机制**：新增 JSON 走 `JsonConvert` + `META-INF/services`；新增 ORM / 框架走五件套矩阵 + 对应自动装配。
+8. **状态机**：通过 / 退回 / 跳转 / 转办 / 加减签 / 终止 / 撤回 / 票签 / 网关有副作用，改动前读对应 `service.impl` / `strategy` / `listener` 与状态枚举。
+9. **品牌与协议**：保留每个 Java 文件 Apache 2.0 license header、`@author warm`、`org.dromara.warm` 包名、banner、README 链接与 `LICENSE`，不弱化「永久开源免费」声明。
+
+## 验证与安全边界
+
+- 本仓库无 `src/test`（测试在独立仓库 `warm-flow-test`），用**分模块编译**验证：`mvn -pl <module> -am -DskipTests compile` 或 `mvn clean install -DskipTests`；core 改动至少编译一个下游 orm/plugin 模块。前端用 `yarn dev` / `yarn build:prod`。无法验证时如实报告命令、现象、风险与下一步。
+- 未经用户明确批准：不 `git commit` / `git push`、不 `mvn deploy` / 改版本推送、不改写历史、不执行 `DROP` / 批量 `DELETE`、不降 JDK 基线 / 删编译插件、不输出真实发布凭证。
+
+完整规则见根 [AGENTS.md](mdc:AGENTS.md)。
diff --git a/.gitignore b/.gitignore
index 109ec935ff0f16efac5f7805110f7e47b1eb07a7..79b20bfe324901f3ee6184a0d389fc135e80ff11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,20 @@ build/
 
 .soloncode/
 /.qoder/
+/.cursor/rules/qingtian-mcp.mdc
+/.cursor/mcp.json
+/.playwright-cli/
+/output/
+/warm-flow-designer-demo/warm-flow-antdv4-designer-demo/.playwright-cli/
+/warm-flow-designer-demo/warm-flow-antdv4-designer-demo/node_modules/
+/warm-flow-designer-demo/warm-flow-antdv4-designer-demo/dist/
+/warm-flow-designer-demo/warm-flow-ep-designer-demo/.playwright-cli/
+/warm-flow-designer-demo/warm-flow-ep-designer-demo/dist/
+/warm-flow-designer-demo/warm-flow-ep-designer-demo/node_modules/
+/warm-flow-vue-designer/node_modules/
+/warm-flow-vue-designer/output/
+/warm-flow-vue-designer/dist/
+/node_modules/
+/.codex/
+/warm-flow-vue-designer/.playwright-cli/
+/warm-flow-vue-designer/dist-lib/
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000000000000000000000000000000000000..a91856c05c9d51ec4f10c408601dc0c88b818ba6
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,237 @@
+# AGENTS.md
+
+本文件是 Codex 以及其他 coding agent 在本仓库工作的项目级操作指南，也是本仓库 **AI 规则的唯一主来源**。
+
+它综合了：
+
+- 当前 `warm-flow` 仓库的真实模块结构、技术基线与扩展机制。
+- dromara 开源协作约定与 Apache 2.0 开源协议要求。
+- 工作流引擎作为「公共依赖库（SDK）」对外契约稳定与多生态兼容的长期规则。
+- Karpathy 风格 coding-agent 规则：澄清不确定性、保持简单、避免顺手改无关代码、用可验证结果证明行为。
+
+## 项目概览
+
+`warm-flow` 是 [Dromara](https://dromara.org/) 社区的国产轻量级工作流引擎，`groupId=org.dromara.warm`，发布到 Maven 中央仓库供他人依赖。它**是一个被集成的类库 / SDK，不是业务应用**：简洁轻量（核心仅 7 张表）、五脏俱全、扩展性强，可通过 jar 包快速集成流程设计器，原生支持经典与仿钉钉双模式。
+
+核心定位决定了最高优先约束：**对外公共 API、实体字段、数据库表结构、配置项都是契约，向后兼容是红线**；**核心引擎与具体框架 / ORM / JSON 库解耦**；**JDK 1.8 源码级兼容**。
+
+顶层结构（Maven 反应堆模块 + 前端 + 脚本）：
+
+- `warm-flow-core`：流程引擎核心，**框架无关、ORM 无关、JSON 库无关**。流程定义 / 节点 / 跳转 / 实例 / 任务 / 历史任务 / 用户 / 表单的实体、服务、抽象 DAO、处理器、监听器、条件与办理人表达式策略、ID 生成、SPI 入口。
+- `warm-flow-orm`：ORM 适配层，实现 core 的 `WarmDao` 与实体。按「ORM × 框架」矩阵展开：
+  - `warm-flow-mybatis`：`*-core` + `*-sb-starter`(SpringBoot2) + `*-sb3-starter`(SpringBoot3) + `*-sb4-starter`(SpringBoot4) + `*-solon-plugin`(Solon)。
+  - `warm-flow-mybatis-plus`：同上五件套。
+  - `warm-flow-easy-query`：同上五件套。
+- `warm-flow-plugin`：可插拔扩展。
+  - `warm-flow-plugin-modes`：框架模式与表达式实现（`*-sb` SpEL、`*-solon` SnEL）。
+  - `warm-flow-plugin-json`：JSON 序列化实现（`*-json-v1`：snack/snack4/jackson/fastjson2/gson；`*-json-jackson3`）。
+  - `warm-flow-plugin-ui`：设计器 / 流程图后端（`*-ui-core`、`*-ui-sb-web`、`*-ui-solon-web`、`*-vue3-ui`）。
+- `warm-flow-ui`：流程设计器**前端工程（Vue3 + yarn）**，独立于 Maven 反应堆，不被父 `pom.xml` 的 `<modules>` 纳入。
+- `sql/`：建表与升级脚本，按数据库分目录：`mysql/`、`oracle/`、`postgresql/`、`sqlserver/`；每库一份全量 `*-all.sql`，MySQL 另有 `v1-upgrade/` 版本升级脚本。
+- 测试不在本仓库：官方测试在独立仓库 `warm-flow-test`（gitee），本仓库无 `src/test`。
+
+## 技术基线
+
+- **JDK 1.8 源码级**：父 `pom.xml` 锁定 `maven.compiler.source/target = 8`，需同时兼容 Java 8 / 17 / 21。主代码**禁止使用 Java 9+ 的语法与 API**（详见「兼容性红线」）。
+- **多框架生态**：Spring Boot 2.7.18 / 3.0.1 / 4.0.2 与 Solon 3.10.0 并行支持，对应 `sb` / `sb3` / `sb4` / `solon` 后缀的 starter。
+- **多 ORM**：MyBatis 3.5.15（mybatis-spring-boot 2.3.2）、MyBatis-Plus 3.5.12、Easy-Query 3.1.79；README 另提到 JPA / BeetlSql 等生态由社区扩展。
+- **多 JSON**：snack3 3.2.139、snack4 4.0.8、jackson 2.13.5、jackson3 3.0.4、fastjson2 2.0.43、gson 2.9.0。
+- **多数据库**：MySQL、Oracle、PostgreSQL、SQL Server（其它库转换表结构即可）。
+- **基础依赖**：Lombok、`slf4j-api`（仅 API，不绑定日志实现）、JUnit 4（测试在独立仓库）。
+- **依赖版本统一在父 `pom.xml` 的 `dependencyManagement` 与 `properties` 管理**，子模块不私自写死或改版本号；版本属性 `${warm-flow}` 跟随 `${project.version}`。
+
+## 架构与扩展机制（warm-flow 的灵魂，改动前必须理解）
+
+引擎通过几个解耦点做到「核心与框架无关、可多生态适配」，**这是本仓库最重要的设计约束，破坏它等于破坏整个工程**：
+
+- `FlowEngine`：静态门面，持有各 `XxxService`、实体 `Supplier`、`handler` / `listener`、`jsonConvert`。业务方与内部统一通过 `FlowEngine.xxxService()` / `FlowEngine.newXxx()` 取服务和新建实体，不要绕过它直接 new 实现类。
+- `FrameInvoker`：框架桥接点，通过 `setBeanFunction` / `setCfgFunction` 注入「取 Bean」「取配置」的能力。**core 因此不依赖任何容器**；Spring / Solon 适配模块在启动时注入这两个 Function。
+- `WarmFlow`（config）：引擎配置载体（`enabled`、`framework`、`banner`、`keyType`、`logicDelete`、租户 / 数据填充 / 权限 / 全局监听器的类路径、`dataSourceType`、`ui`、`tokenName`、流程图三原色等），`init()` 负责装配 handler、打印 banner、SPI 加载。
+- **Java SPI**：`ServiceLoaderUtil.loadFirst(...)` + `META-INF/services/`（如 `org.dromara.warm.flow.core.json.JsonConvert`）用于可替换实现（典型：JSON 转换策略）。
+- **自动装配注册**随框架不同而不同：
+  - Spring Boot 2：`META-INF/spring.factories`。
+  - Spring Boot 3 / 4：`META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports`。
+  - Solon：`META-INF/solon/*.properties`。
+- **ORM 抽象**：core 定义 `WarmDao<T>`、`WarmQuery`、`WarmServiceImpl` 与各实体接口；每个 ORM 模块提供实体实现（如 `FlowDefinition`）、Mapper / Dao 实现（如 `WarmDaoImpl`）、ID 生成器适配，并通过 starter 把实现接入 `FlowEngine`。
+
+新增能力时**必须沿用上述矩阵与扩展点**，不要在 core 里直接耦合某个框架 / ORM / JSON 实现。
+
+## 核心工作规则
+
+- 先思考，再编辑。非平凡任务开始前，先识别目标文件、期望行为、验证方式与风险。
+- 保持简单。优先选择与现有模式一致的最小正确改动。
+- 外科手术式改动。不要格式化、重命名、重排或重构无关代码。
+- 保护用户已有工作。较大改动前先看 `git status --short`，除非用户明确要求，绝不回退不是你做的改动。
+- 管理不确定性。如果流程语义、状态流转、跨生态行为不清晰且无法从代码安全推断，先问一个简洁问题，或明确写出假设。
+- 用证据验证。没有新鲜命令输出或直接检查结果时，不要声称构建、测试、修复已经成功。
+- 暴露真实失败。不要用假默认值、吞异常、模拟成功数据或静默降级掩盖真实问题。
+- 凡涉及**公共 API / 实体字段 / 表结构 / 配置项 / SPI 契约 / 跨生态行为 / 多数据库 SQL** 的改动，一律按高风险处理。
+
+## 规则源维护
+
+- `AGENTS.md` 是本仓库 agent 规则主来源。
+- `.qoder/repowiki` 是更细的引擎架构与领域参考（**本地文档，已 gitignore、未纳入仓库**；作者本地可选参考，团队成员默认没有，不要当作必读入口或长期依赖）。
+- 新增、删除或调整长期项目规则时，先更新根 `AGENTS.md`，再按需要同步模块级 `AGENTS.md`、根 `CLAUDE.md` 与 `.cursor/rules`。
+- 如果本文件、其他 agent 规则与用户当前指令冲突，优先遵循用户当前指令，同时说明冲突点、取舍原因与影响。
+- 不要把一次性任务背景写成永久规则。只有能长期约束本仓库开发质量的约定才加入本文件。
+
+## 规则优先级
+
+冲突时从高到低：
+
+1. 用户当前明确指令。
+2. 模块级 `AGENTS.md`（所在顶层模块下若存在）。
+3. 仓库根 `AGENTS.md`（本文件）。
+4. 根 `CLAUDE.md` 与 `.cursor/rules/*`（与 `AGENTS.md` 冲突一律以 `AGENTS.md` 为准）。
+5. （可选）本地 `.qoder/repowiki` 等领域 / 架构参考（未纳入仓库，可能不存在）。
+
+## 模块级 AGENTS.md 与 CLAUDE.md
+
+- 每个顶层模块（`warm-flow-core`、`warm-flow-orm`、`warm-flow-plugin`、`warm-flow-ui`）下都有一份模块级 `AGENTS.md`，**只写本模块差异**（职责、改动前必读、高风险点、聚焦验证），通用规范一律指向根 `AGENTS.md`。
+- 根 `CLAUDE.md` 是「以 `AGENTS.md` 为唯一来源」的红线摘要，不承载独有规则。
+- 同一条规则只维护一处：通用规则进根 `AGENTS.md`，模块差异进模块级 `AGENTS.md`，避免多处漂移。开始任务前先读根 `AGENTS.md`，再读所在模块级 `AGENTS.md`。
+
+## 品牌与版权保护
+
+- 不要移除、替换或弱化 `warm-flow`、`Warm-Flow`、`dromara`、`org.dromara.warm` 包名 / groupId、模块名、启动 banner、作者信息（`warm` / `290631660@qq.com` 等 `developers`）、README 中的 Star/赞助商/文档/演示链接，除非用户明确要求。
+- **每个 Java 文件保留 Apache 2.0 license header**（`Copyright 2024-2025, Warm-Flow (290631660@qq.com).` 开头的注释块）。新增 Java 文件必须照抄现有 header、`package`、Lombok 与注释风格。
+- 保留现有中文 README、中文注释、类注释中的 `@author warm` 与 `@since`，不要批量改成英文或通用模板。
+- 不改动 `LICENSE`，不弱化「永久开源免费、无商业版」的项目声明。
+
+## 任务分级
+
+使用与风险匹配的最轻流程。
+
+- **L0**：单文件小修、注释、文档、单库 SQL 注释类改动。读相关代码，改，跑聚焦编译。
+- **L1**：模块内多文件改动、服务逻辑、工具类、单个 starter 适配、单库 SQL 增改。收集上下文，简短规划，小步编辑，编译受影响模块。
+- **L2**：core 公共 API / 实体 / 抽象 DAO 改动、扩展机制（`FlowEngine` / `FrameInvoker` / SPI / 自动装配）改动、跨生态（SB2/3/4/Solon）行为、跨 ORM 行为、多数据库表结构 / 升级脚本、版本发布、流程状态机语义。必要时在 `.codex/` 或 `docs/` 记录关键决策与验证细节。
+
+## 兼容性红线（warm-flow 最关键的约束）
+
+### 1. JDK 1.8 源码级兼容
+
+主代码（`src/main`）只能用 Java 8 语法与 API。**禁止**：
+
+- `var` 局部变量类型推断、`record`、`sealed`、switch 表达式 / `yield`、文本块 `"""`、增强 `instanceof` 模式匹配。
+- Java 9+ 集合工厂 `List.of` / `Map.of` / `Set.of`（用 `Arrays.asList` / `Collections` / 手动构造）。
+- `Optional.isEmpty()`（用 `!opt.isPresent()`）、`Stream.toList()`（用 `collect(Collectors.toList())`）、`String.isBlank()` / `String.strip()`、`Files.readString` 等 Java 9+ 新方法。
+- 任何只在高版本 JDK 存在的 API。优先复用项目已有的 `org.dromara.warm.flow.core.utils.*`（`StringUtils`、`ObjectUtil`、`CollUtil`、`MapUtil`、`StreamUtils`、`ArrayUtil`、`AssertUtil` 等），引擎已自带 JDK8 下的流式 / 集合 / 字符串替代工具。
+
+### 2. 对外契约向后兼容
+
+- 公共类、方法签名、`FlowEngine` 门面、`WarmDao` 接口、实体字段、枚举常量（code / 顺序 / 名称）、`WarmFlow` 配置项都是已发布契约，**改动前评估对下游依赖方的破坏**；不要随意删除 / 重命名 / 改签名 / 重排枚举。
+- 确需废弃时用 `@Deprecated` 并保留过渡期，新增能力优先「加法」而非「改签名」。
+
+### 3. 框架与 ORM 解耦
+
+- `warm-flow-core` **禁止**出现 `org.springframework.*`、`org.noear.solon.*`、`com.baomidou.*` 等具体框架 / ORM 依赖与 import（当前 core 已做到零此类依赖，必须保持）。
+- 框架差异通过 `FrameInvoker`、SPI、各 starter 解决；ORM 差异通过 `WarmDao` 实现与各 orm 模块解决。
+
+### 4. 多生态对齐
+
+- 改某个 starter 的能力时，确认是否需要在 `sb` / `sb3` / `sb4` / `solon` 以及对应 ORM 模块同步；不要只改一处导致生态不一致。
+
+## Java 与编码风格
+
+- **格式基线以 `.editorconfig` 为准**：4 空格缩进、UTF-8、LF 换行、去行尾空格、文件末尾留空行（`json`/`yml`/`js` 为 2 空格）。仓库**未启用 checkstyle / spotless**，没有自动格式化兜底，提交前自觉对齐既有风格。
+- 遵循引擎现有「实体 / 服务接口 + `service.impl` / 抽象 DAO + orm 实现」分层，不引入新的架构风格或 DDD 分层。
+- Lombok：实体 / DTO 用 `@Getter`/`@Setter`/`@Data`，组件用构造器注入；**不要手写可由注解生成的 getter/setter**。
+- 日志使用 `slf4j` + 占位符；不要 `printStackTrace()` / `System.out.println`；不打印敏感信息。
+- 工具优先复用 `org.dromara.warm.flow.core.utils.*`，不为一次性需求新增通用工具类、不重复造轮子、不在 core 引入重型三方工具库。
+- 注释解释意图、流程语义、边界与非显然取舍，不复述下一行代码；新增类保持标准类注释与 `@author`。
+- 表达式（条件 / 办理人 / 票签）与监听器是引擎对外扩展点，新增策略沿用 `condition` / `strategy` / `listener` 既有接口与 `plugin-modes` 的 SpEL/SnEL 实现模式。
+
+## 实体、DAO、服务与状态机
+
+- 实体（`Definition`/`Node`/`Skip`/`Instance`/`Task`/`HisTask`/`User`/`Form`）通过 `FlowEngine.newXxx()` 创建；新增实体字段要同时考虑各 ORM 实体实现、JSON 序列化、SQL 表结构与升级脚本。
+- 单表 CRUD 走 `WarmDao` 抽象与各 ORM 实现，不在 core 写死某 ORM 的查询 API。
+- 流程状态、跳转、转办、加签 / 减签、终止、撤回、票签 / 会签、互斥 / 并行网关都有业务副作用与状态机约束，改动前先读对应 `service.impl`、`strategy`、`handler`、`listener` 与状态枚举，确认现有流转后再改，不要凭文件名猜行为。
+
+## SQL 与数据库
+
+- 表结构改动必须**同步四套脚本**：`sql/mysql`、`sql/oracle`、`sql/postgresql`、`sql/sqlserver` 的全量脚本，并在 `sql/mysql/v1-upgrade/` 新增对应版本升级脚本（命名沿用 `warm-flow_x.x.x.sql`）。
+- 注意各库方言差异（类型、自增 / 序列、分页、大小写、关键字）；破坏性或迁移脚本必须写明用途、影响范围、回滚方式与各库兼容性，执行需用户明确批准。
+- 引擎自身维护**多租户与逻辑删除**（见 `WarmFlow.logicDelete` 等）；改动相关字段 / 行为要兼顾「引擎自带实现」与「复用 ORM 框架实现」两条路径。
+
+## 扩展开发指引（新增生态 / ORM / JSON / DB）
+
+- **新增 JSON 实现**：实现 core 的 `JsonConvert`，放到 `warm-flow-plugin-json`，并加 `META-INF/services/org.dromara.warm.flow.core.json.JsonConvert`。
+- **新增 ORM 支持**：在 `warm-flow-orm` 下按现有五件套（`core` + `sb`/`sb3`/`sb4` starter + `solon-plugin`）建模块，实现 `WarmDao`、实体与 ID 生成适配。
+- **新增框架适配**：提供注入 `FrameInvoker` 的启动逻辑与对应自动装配文件（`spring.factories` / `AutoConfiguration.imports` / Solon properties）。
+- **新增数据库**：补四套之外的脚本目录与全量脚本，并验证 `dataSourceType` / 分页 / 方言。
+- 以上均为 L2，先评估必要性与对现有矩阵的影响，再实施。
+
+## 验证规则
+
+本仓库**无 `src/test`**（测试在独立仓库 `warm-flow-test`），验证以**分模块编译**为主，按风险选择范围：
+
+```bash
+# 全量安装到本地仓库（最稳，先装核心再装下游）
+mvn clean install -DskipTests
+
+# 聚焦编译单个模块（按改动模块替换 -pl 路径或 -f 指定 pom）
+mvn -pl warm-flow-core -am -DskipTests compile
+mvn -f warm-flow-orm/warm-flow-mybatis/warm-flow-mybatis-core/pom.xml -DskipTests compile
+```
+
+- 文档 / 注释改动：`git diff --check` 即可。
+- core 改动：编译 core，并至少编译一个依赖它的 orm / plugin 模块。
+- 某 starter / 适配改动：编译该模块，必要时编译同一 ORM 的其它 starter 确认生态一致。
+- SPI / 自动装配改动：确认注册文件与实现类一致，编译相关模块。
+- SQL / 表结构改动：核对四套脚本与升级脚本一致性，说明各库兼容性。
+
+无法完成验证时必须报告：尝试的命令、失败现象、可能原因、对当前改动的风险、建议下一步。**不要为了让构建“通过”而删插件、降基线或改 JDK 版本。**
+
+## 文档与 AI 产物归档
+
+- 面向用户的正式文档以 README 与官网（warm-flow.com）为准；引擎细节可参考本地 `.qoder/repowiki`（未纳入仓库，仅本地可选）。
+- AI / agent 的一次性调研、决策记录、临时计划放 `.codex/` 或 `docs/`，不要塞进源码包，也不要当作长期必读入口。
+- 临时 / 备份代码、注释掉的旧实现、压测入口不留在源码树，确认无引用后删除（git 历史可追溯）。
+
+## git 提交规范
+
+提交信息前缀沿用 README 约定（中文项目）：
+
+```
+init: 初始化
+feat: 增加新功能
+fix: 修复问题/BUG
+perf: 优化/性能提升
+refactor: 重构
+revert: 撤销修改
+style: 代码风格相关无影响运行结果的
+update: 其他修改
+upgrade: 升级版本
+```
+
+## 构建与发布命令
+
+```bash
+mvn clean package -DskipTests          # 打包
+mvn clean install -DskipTests          # 安装到本地仓库
+mvn clean deploy -P release            # 发布中央仓库（需 release profile 与凭证）
+mvn versions:set -DnewVersion=1.8.9    # 统一修改版本号
+mvn versions:commit                    # 确认版本修改（versions:revert 回滚）
+```
+
+- 发布到中央仓库依赖 `release` profile（javadoc、gpg 签名、central-publishing），需本地 `settings.xml` 配置 `ossrh` 凭证与 GPG。
+- `.github/workflows/release.yml` 当前是**全注释的模板（CI 未启用）**，发布是**手动**执行，不要假设 CI 会自动发版。`.gitee/` 下有中文 issue / PR 模板，提 PR 时遵循。
+
+## 安全边界
+
+没有用户明确批准，不要执行：
+
+- `git commit`、`git push`、删除分支、强推或改写历史。
+- `mvn deploy` / 发布到中央仓库、改版本号后推送、轮换发布凭证。
+- 任务范围外的破坏性文件系统操作。
+- `DROP`、批量 `DELETE`、表结构重写等破坏性数据库脚本的执行。
+- 降低 JDK 基线、删除编译 / 打包插件、放宽开源协议或弱化品牌信息。
+
+默认允许在相关任务中执行：读取文件、搜索代码、运行本地构建 / 编译、编辑项目文件、使用 `git status` / `git diff`。
+
+## Agent 回复风格
+
+- 简洁但具体，优先说明改了什么、验证了什么。
+- 有帮助时带上文件路径。
+- 如实说明不确定性、跨生态 / 兼容性残余风险。
+- 不要掩盖构建或编译失败。
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000000000000000000000000000000000000..210cabe5f57b58b981370cef34a46cecc147dc00
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,53 @@
+# CLAUDE.md
+
+本仓库（`warm-flow`，Dromara 开源轻量级工作流引擎 / SDK）的编码与协作规则，**以 [AGENTS.md](./AGENTS.md) 为唯一来源**。开始任何任务前先读根 `AGENTS.md`；若改动所在顶层模块下还有模块级 `AGENTS.md`，再读模块级。本文件只是核心红线摘要，**与 `AGENTS.md` 冲突时以 `AGENTS.md` 为准**。
+
+## 规则优先级
+
+1. 用户当前明确指令。
+2. 模块级 `AGENTS.md`（若存在）。
+3. 根 `AGENTS.md`。
+4. 本 `CLAUDE.md` 与 `.cursor/rules`（与 `AGENTS.md` 冲突以 `AGENTS.md` 为准）。
+5. `.qoder/repowiki` 等领域 / 架构参考。
+
+## 项目性质（决定一切约束）
+
+- 这是**被他人依赖的开源类库 / SDK**（发布到 Maven 中央仓库，`groupId=org.dromara.warm`），不是业务应用。
+- 三大最高约束：**JDK 1.8 源码级兼容**、**对外契约向后兼容**、**核心与框架 / ORM / JSON 解耦**。
+
+## 技术基线
+
+- JDK 1.8 源码级（兼容 Java 8/17/21）；多框架 Spring Boot 2.7/3.0/4.0 + Solon 3.10；多 ORM MyBatis / MyBatis-Plus / Easy-Query；多 JSON snack3/snack4/jackson/jackson3/fastjson2/gson；多数据库 MySQL/Oracle/PostgreSQL/SQL Server。
+- Lombok + `slf4j-api`；依赖版本统一在父 `pom.xml`，子模块不私改。
+
+## 模块速览
+
+- `warm-flow-core`：框架 / ORM / JSON 无关的引擎核心（实体、服务、抽象 `WarmDao`、`FlowEngine`、`FrameInvoker`、SPI、表达式 / 监听器策略）。
+- `warm-flow-orm`：ORM 适配，按「ORM × (sb/sb3/sb4/solon)」矩阵实现 `WarmDao`。
+- `warm-flow-plugin`：可插拔扩展（`modes` 表达式、`json` 序列化、`ui` 设计器后端）。
+- `warm-flow-ui`：Vue3 前端设计器，独立于 Maven 反应堆。
+- `sql/`：mysql/oracle/postgresql/sqlserver 四套脚本 + MySQL `v1-upgrade/`。
+
+## 核心红线（详见 AGENTS.md）
+
+1. **JDK 8 语法**：主代码禁止 `var`/`record`/switch 表达式/文本块/`List.of`/`Optional.isEmpty`/`Stream.toList`/`String.isBlank` 等 Java 9+ API；优先用 core 的 `utils.*`。
+2. **解耦**：`warm-flow-core` 禁止 import `org.springframework.*` / `org.noear.solon.*` / `com.baomidou.*`；框架差异走 `FrameInvoker` + SPI + 各 starter，ORM 差异走 `WarmDao` 实现。
+3. **门面**：统一通过 `FlowEngine.xxxService()` / `FlowEngine.newXxx()` 取服务和建实体，不绕过门面直接 new 实现类。
+4. **向后兼容**：公共方法签名、`WarmDao` 接口、实体字段、枚举常量（code/顺序）、`WarmFlow` 配置项是已发布契约，不随意删 / 改签名 / 重排；废弃用 `@Deprecated` 留过渡期。
+5. **多生态对齐**：改某 starter 能力时，确认 `sb`/`sb3`/`sb4`/`solon` 与对应 ORM 模块是否需同步。
+6. **SQL 四套同步**：表结构改动同步 mysql/oracle/postgresql/sqlserver 全量脚本 + 新增 `v1-upgrade/warm-flow_x.x.x.sql`，写明各库方言兼容与回滚。
+7. **多租户 / 逻辑删除**：引擎自带实现，相关字段 / 行为改动兼顾「引擎自带」与「ORM 框架」两条路径。
+8. **扩展机制**：新增 JSON 走 `JsonConvert` + `META-INF/services`；新增 ORM / 框架走五件套矩阵 + 对应自动装配（`spring.factories` / `AutoConfiguration.imports` / Solon properties）。
+9. **状态机**：通过 / 退回 / 跳转 / 转办 / 加减签 / 终止 / 撤回 / 票签 / 网关有副作用，改动前读对应 `service.impl` / `strategy` / `listener` 与状态枚举。
+10. **品牌与协议**：保留每个 Java 文件 Apache 2.0 license header、`@author warm`、`org.dromara.warm` 包名、banner、README 链接与 `LICENSE`，不弱化「永久开源免费」声明。
+
+## 高风险（按 L2 处理，先读调用链）
+
+core 公共 API / 实体 / 抽象 DAO、扩展机制（`FlowEngine` / `FrameInvoker` / SPI / 自动装配）、跨生态行为、跨 ORM 行为、多数据库表结构 / 升级脚本、版本发布、流程状态机语义。
+
+## 验证与安全边界
+
+- 本仓库无 `src/test`（测试在独立仓库 `warm-flow-test`），用**分模块编译**验证：`mvn -pl <module> -am -DskipTests compile` 或 `mvn clean install -DskipTests`；core 改动至少编译一个下游 orm/plugin 模块。无法验证时如实报告命令、现象、风险与下一步。
+- 未经用户明确批准：不 `git commit` / `git push`、不 `mvn deploy` / 改版本推送、不改写历史、不执行 `DROP` / 批量 `DELETE`、不降 JDK 基线 / 删编译插件、不输出真实发布凭证。
+
+完整规则见 **[AGENTS.md](./AGENTS.md)**。
diff --git a/warm-flow-core/AGENTS.md b/warm-flow-core/AGENTS.md
new file mode 100644
index 0000000000000000000000000000000000000000..c2fd4d6781095bacfd7aa940458b7d08d7611236
--- /dev/null
+++ b/warm-flow-core/AGENTS.md
@@ -0,0 +1,45 @@
+# AGENTS.md — warm-flow-core 模块规则
+
+> 本文件只写 `warm-flow-core` 的差异化规则。通用工程与编码规范以仓库根 [`../AGENTS.md`](../AGENTS.md) 为准；规则优先级见根 `AGENTS.md`「规则优先级」。
+>
+> 最高约束：core 是整个引擎的地基，被所有 orm / plugin 模块与下游使用方依赖。**任何公共行为改动按 L2 高风险处理**。
+
+## 模块职责
+
+框架无关、ORM 无关、JSON 库无关的流程引擎核心，包根 `org.dromara.warm.flow.core`：
+
+- `FlowEngine`：静态门面，持有各 `XxxService`、实体 `Supplier`、handler / listener / `jsonConvert`。
+- `config`：`WarmFlow` 引擎配置与 `init()` 装配。
+- `invoker/FrameInvoker`：框架桥接（`setBeanFunction` / `setCfgFunction`），core 不依赖容器的关键。
+- `entity`：`Definition`/`Node`/`Skip`/`Instance`/`Task`/`HisTask`/`User`/`Form` 等接口。
+- `service` + `service.impl`：`DefService`/`NodeService`/`SkipService`/`InsService`/`TaskService`/`HisTaskService`/`UserService`/`FormService`/`ChartService`。
+- `orm`：抽象 `dao/WarmDao`、`agent/WarmQuery`、`service/WarmServiceImpl`（ORM 接缝，不含具体实现）。
+- `handler`：`DataFillHandler`/`TenantHandler`/`PermissionHandler`。
+- `listener`：`Listener`/`GlobalListener`/`ListenerVariable`。
+- `strategy`：策略接口——`ConditionStrategy`（条件）、`HandlerStrategy`（办理人）、`ListenerStrategy`（监听器）、`VoteSignStrategy`（票签）、`ExpressionStrategy`（表达式基类）；具体 SpEL/SnEL 实现在 `plugin-modes`。
+- `condition`：条件比较运算的具体实现（`AbstractConditionStrategy` + `Eq`/`Ne`/`Gt`/`Ge`/`Lt`/`Le`/`Like`/`NotLike`）。
+- `keygen`：`SnowFlakeId14/15` 等 ID 生成。
+- `json`：`JsonConvert` SPI 接口（实现在 plugin-json）。
+- `utils`：引擎自带工具（`StringUtils`/`ObjectUtil`/`CollUtil`/`MapUtil`/`AssertUtil` 等）。
+
+## 改动前必读
+
+- 根 [`../AGENTS.md`](../AGENTS.md)「架构与扩展机制」「兼容性红线」。
+- 改服务 / 状态机前，先读对应 `service.impl` + 相关 `strategy` / `handler` / `listener` + 状态枚举（`FlowStatus`/`NodeType`/`SkipType`/`CooperateType` 等）。
+- `../.qoder/repowiki/zh/content/核心引擎架构/` 有服务层、实体模型、数据流的详细文档（本地参考）。
+
+## 高风险点（一律 L2）
+
+- **零框架依赖红线**：core **禁止**出现 `org.springframework.*`、`org.noear.solon.*`、`com.baomidou.*` 等具体框架 / ORM import（当前已是零依赖，必须保持）。需要容器能力时走 `FrameInvoker`，需要可替换实现走 SPI。
+- **JDK 1.8 语法**：禁止 Java 9+ 语法 / API（`var`、`record`、switch 表达式、文本块、`List.of`、`Optional.isEmpty`、`Stream.toList`、`String.isBlank` 等）；用 `utils.*` 替代。
+- **门面与契约**：`FlowEngine` 方法、`WarmDao` 抽象、实体接口、`WarmFlow` 配置项、枚举常量（code / 顺序 / 名称）都是对外契约，改动评估下游破坏，优先「加法」，废弃用 `@Deprecated` 留过渡期。
+- **状态机语义**：通过 / 退回 / 跳转 / 转办 / 加减签 / 终止 / 撤回 / 票签 / 网关有副作用，先确认现有流转再改，不要凭文件名猜。
+- **实体字段**：新增 / 改字段要同步各 ORM 实体实现、JSON 序列化与 `sql/` 四套表结构。
+
+## 聚焦验证
+
+```bash
+mvn -pl warm-flow-core -am -DskipTests compile
+```
+
+core 改动后至少再编译一个下游模块（如某 orm-core 或 plugin），确认接缝未破。
diff --git a/warm-flow-orm/AGENTS.md b/warm-flow-orm/AGENTS.md
new file mode 100644
index 0000000000000000000000000000000000000000..b28c6cd332b7d1a88b947e56f9e387a8f13e3591
--- /dev/null
+++ b/warm-flow-orm/AGENTS.md
@@ -0,0 +1,39 @@
+# AGENTS.md — warm-flow-orm 模块规则
+
+> 本文件只写 `warm-flow-orm` 的差异化规则。通用工程与编码规范以仓库根 [`../AGENTS.md`](../AGENTS.md) 为准；规则优先级见根 `AGENTS.md`「规则优先级」。
+
+## 模块职责
+
+ORM 适配层，实现 `warm-flow-core` 的 `WarmDao` 抽象与各实体。按「**ORM × 框架**」矩阵组织，每种 ORM 一套五件套：
+
+- `warm-flow-mybatis`：`*-core`（实体 / Mapper / `WarmDaoImpl`）+ `*-sb-starter`(SB2) + `*-sb3-starter`(SB3) + `*-sb4-starter`(SB4) + `*-solon-plugin`(Solon)。
+- `warm-flow-mybatis-plus`：同上五件套（含 `MybatisPlusIdGen` 等适配）。
+- `warm-flow-easy-query`：同上五件套。
+
+包根：ORM 实现 `org.dromara.warm.flow.orm`（`entity`/`mapper`/`dao`/`keygen`/`utils`）；Spring 适配 `org.dromara.warm.flow.spring.boot`；Solon 适配 `org.dromara.warm.flow.solon`。
+
+## 改动前必读
+
+- 根 [`../AGENTS.md`](../AGENTS.md)「架构与扩展机制」「兼容性红线」「扩展开发指引」。
+- core 的 `WarmDao` / `WarmQuery` / `WarmServiceImpl` 与对应实体接口；改某 ORM 的 `WarmDaoImpl` 前，先看同 ORM 的 `*-core` 实现与 starter 装配。
+
+## 高风险点（按 L2）
+
+- **多生态对齐**：一个能力改动通常要在同 ORM 的 `sb` / `sb3` / `sb4` / `solon` 同步；不要只改一套 starter 导致生态不一致。
+- **自动装配注册一致**：SB2 用 `META-INF/spring.factories`，SB3/4 用 `META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports`，Solon 用 `META-INF/solon/*.properties`。新增 / 改 `FlowAutoConfig` 时同步对应注册文件，并确保把实现接入 `FlowEngine` / 注入 `FrameInvoker`。
+- **WarmDao 契约**：各 ORM 实现要满足 core `WarmDao<T>` 的语义（分页、批量、软删除、租户），不要让不同 ORM 行为漂移。
+- **ID 生成 / 分页 / 方言**：`keyType`、`dataSourceType` 影响 ID 与分页 SQL；跨数据库时确认方言差异。
+- **多租户与逻辑删除**：区分「引擎自带实现」与「复用 ORM 框架实现」两条路径，改动时两者都要自洽。
+
+## SQL 同步
+
+表结构相关改动按根 `AGENTS.md`「SQL 与数据库」同步 `sql/` 下 mysql / oracle / postgresql / sqlserver 四套脚本与升级脚本。
+
+## 聚焦验证
+
+```bash
+# 编译被改的某个 ORM 模块（按实际路径替换）
+mvn -f warm-flow-orm/warm-flow-mybatis-plus/warm-flow-mybatis-plus-core/pom.xml -DskipTests compile
+```
+
+改 core 接缝相关内容时，至少各编译一种受影响 ORM 的 `*-core` 与一个 starter。
diff --git a/warm-flow-plugin/AGENTS.md b/warm-flow-plugin/AGENTS.md
new file mode 100644
index 0000000000000000000000000000000000000000..def4f721a1f65479dfd8b798b652b3006778b9ec
--- /dev/null
+++ b/warm-flow-plugin/AGENTS.md
@@ -0,0 +1,34 @@
+# AGENTS.md — warm-flow-plugin 模块规则
+
+> 本文件只写 `warm-flow-plugin` 的差异化规则。通用工程与编码规范以仓库根 [`../AGENTS.md`](../AGENTS.md) 为准；规则优先级见根 `AGENTS.md`「规则优先级」。
+
+## 模块职责
+
+引擎的可插拔扩展实现，按扩展点分三类：
+
+- `warm-flow-plugin-modes`：框架模式与表达式实现。`*-sb`（Spring，SpEL：`ConditionStrategySpel`、`VoteSignStrategySpel`、`HandlerStrategySpel` 等，含 `SpelHelper` / 安全方法解析）；`*-solon`（Solon，SnEL：`*SnEl`）。包根 `org.dromara.warm.plugin.modes.sb` / `.solon`。
+- `warm-flow-plugin-json`：`JsonConvert` 的 SPI 实现。`*-json-v1`（`JsonConvertSnack`/`Snack4`/`Jackson`/`FastJson`/`Gson`）；`*-json-jackson3`。包根 `org.dromara.warm.plugin.json`。
+- `warm-flow-plugin-ui`：设计器 / 流程图后端。`*-ui-core`（`service` / `dto` / `vo`）、`*-ui-sb-web`（Spring controller）、`*-ui-solon-web`（Solon controller）、`*-vue3-ui`（打包前端资源）。包根 `org.dromara.warm.flow.ui`。
+
+## 改动前必读
+
+- 根 [`../AGENTS.md`](../AGENTS.md)「架构与扩展机制」「兼容性红线」「扩展开发指引」。
+- core 的 `condition` / `strategy` / `listener` / `json.JsonConvert` 接口；改表达式策略前先读 core 默认实现与同类 sb/solon 实现。
+
+## 高风险点（按 L2）
+
+- **SPI 注册一致**：新增 / 改 JSON 实现必须同步 `META-INF/services/org.dromara.warm.flow.core.json.JsonConvert`；`FlowEngine` 通过 `ServiceLoaderUtil.loadFirst` 取首个实现，注意实现优先级与 classpath 唯一性。
+- **表达式安全**：SpEL / SnEL 涉及脚本执行，沿用现有 `SafeMethodResolver` / `SafeTypeLocator` 等安全约束，**不要放开任意方法 / 类型调用**，避免表达式注入风险。
+- **双模式 UI**：经典模式与仿钉钉模式都要兼顾；controller 在 sb-web 与 solon-web 行为对齐，前端资源放 `*-vue3-ui`。
+- **多生态对齐**：modes / ui 的 sb 与 solon 实现保持能力一致，不要只改一侧。
+- **JSON 兼容**：不同 JSON 库对日期 / null / 泛型 / 多态序列化差异要与引擎实体约定一致，避免下游切换 JSON 库后行为变化。
+
+## 聚焦验证
+
+```bash
+# 按被改子模块替换路径
+mvn -f warm-flow-plugin/warm-flow-plugin-json/warm-flow-plugin-json-v1/pom.xml -DskipTests compile
+mvn -f warm-flow-plugin/warm-flow-plugin-modes/warm-flow-plugin-modes-sb/pom.xml -DskipTests compile
+```
+
+涉及 SPI / 表达式 / UI 契约时，确认注册文件与对应 sb/solon 实现同步。
diff --git a/warm-flow-ui/.gitignore b/warm-flow-ui/.gitignore
index 78a752d87e8427f84570300f62bdfb5b183a9931..a43175e7d27ee8bc869f9844194e2bf02179b775 100644
--- a/warm-flow-ui/.gitignore
+++ b/warm-flow-ui/.gitignore
@@ -21,3 +21,5 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+/.playwright-cli/
+/output/
diff --git a/warm-flow-ui/AGENTS.md b/warm-flow-ui/AGENTS.md
new file mode 100644
index 0000000000000000000000000000000000000000..39bd4a3df48394ad5d2c0d547a55afd611d049da
--- /dev/null
+++ b/warm-flow-ui/AGENTS.md
@@ -0,0 +1,131 @@
+# AGENTS.md — warm-flow-ui 模块规则
+
+> 本文件只写 `warm-flow-ui` 的差异化规则。通用协作原则（先思考、最小改动、外科手术式、用证据验证、品牌保护、安全边界）以仓库根 [`../AGENTS.md`](../AGENTS.md) 为准。
+>
+> 注意：本模块是**前端工程，不属于 Maven 反应堆**，不受根 `AGENTS.md` 中 Java / JDK / ORM / SQL 规则约束；后端编译命令与本模块无关。
+
+## 模块职责
+
+Warm-Flow 流程设计器前端（经典 + 仿钉钉双模式），构建产物供 `warm-flow-plugin-ui` 集成为 jar 内置设计器。
+
+技术栈（以 `package.json` 为准）：
+
+- Vue 3.3.9 + Vite 5 + `<script setup>`；Element Plus 2.4.3 + `@element-plus/icons-vue`。
+- 流程图：`@logicflow/core` / `@logicflow/extension`。
+- 表单设计：`@form-create/designer` / `@form-create/element-ui`。
+- 状态管理 Pinia；路由 vue-router；请求 axios；样式 Sass；`file-saver` 导出。
+- 包管理 **yarn 1.x（classic）**；`type: module`；**前端许可证为 MIT**（与后端 Apache 2.0 不同，勿混改 header）。
+
+## 常用命令
+
+```bash
+yarn --registry=https://registry.npmmirror.com   # 安装依赖
+yarn dev                                          # 本地开发（vite）
+yarn build:prod                                   # 生产构建（vite build）
+yarn preview                                      # 预览构建产物
+```
+
+## 改动前必读
+
+- 与后端契约：设计器读写的流程定义 JSON、节点属性、办理人 / 条件 / 监听器结构需与 `warm-flow-plugin-ui` 后端 `dto` / `vo` 及 core 实体对齐，改字段先看后端契约。
+- 现有组件、路由、Pinia store、axios 封装与公共样式，复用既有模式，不要在局部页面另起一套风格。
+
+## 高风险点
+
+- **双模式一致**：经典模式与仿钉钉模式都要兼顾，节点状态颜色等沿用后端 `chartStatusColor*` 配置语义。
+- **前后端契约**：流程定义 JSON 结构是与后端共享的契约，改动要前后端同步，避免设计器导出的 json 后端解析不了。
+- **LogicFlow / form-create 版本**：图引擎与表单设计器升级可能破坏既有流程图 / 表单，升级按高风险处理并实际验证。
+- **依赖版本**：锁定版本不随意升级；新增依赖先评估必要性与体积。
+
+## 验证
+
+- 改动后至少 `yarn dev` 跑通本地、`yarn build:prod` 能成功构建；涉及流程图 / 表单交互时手动验证关键路径。
+- 无法验证时如实报告命令、现象与风险，不要声称构建通过。
+
+## UI 设计规范（Design System）
+
+> 设计器整体风格：**扁平 + iOS / macOS 质感**，主色调（chroma）为蓝色 `#409eff`。**基准页面是 `基础信息`（`components/design/common/vue/baseInfo.vue`）**，所有节点属性面板、弹窗、表单都要向它对齐。新增任何表单 / 面板 / 控件前，先看 `baseInfo.vue` 和本节，复用既有 token 与 mixin，**不要另起一套风格**。
+
+### 1. 设计 Token（颜色 / 圆角 / 阴影 / 字体）
+
+- 颜色来源唯一：`src/config/themeConfig.js`（JS 常量）→ 运行时同步为 `--wf-*` CSS 变量；**禁止在组件里写死十六进制色**，用变量并带回退值，如 `var(--wf-primary, #409eff)`。
+- 主色族：`--wf-primary #409eff`、`--wf-primary-dark #2b7de9`、`--wf-primary-light #ecf5ff`、`--wf-primary-lighter #f0f7ff`。
+- 语义色：危险 `--wf-danger #f56c6c`、成功 `#67c23a`、监听器紫 `#8960dc`。
+- 圆角：`--wf-radius 8px`、`--wf-radius-lg 12px`、`--wf-radius-sm 4px`。
+- 字体栈（必加，保证 iOS 质感）：`-apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif` + `-webkit-font-smoothing: antialiased`。
+- 共享 SCSS mixin 在 `src/assets/styles/_common.scss`：`modern-tabs` / `base-settings-card` / `section-card` / `table-form-align` / `responsive-adaption`，改风格优先改 mixin，全局生效。
+
+### 2. 输入控件（白底描边式）
+
+统一为「白底 + 浅边框」，独立的 `el-input / el-select / el-textarea`（基础信息页 / 属性抽屉 / 弹窗）：
+
+- 默认：`background: var(--wf-bg-white, #fff)`；`border: 1px solid var(--wf-border-light, #dcdfe6)`；`border-radius: 10px`；`box-shadow: none`。**未填写也保持白底**。
+- hover：`border-color: var(--wf-primary)`。
+- focus：白底 + `border-color: var(--wf-primary)` + 柔光环 `box-shadow: 0 0 0 4px rgba(64,158,255,0.12)`。
+- 校验失败（`.is-error`）：红边 + 红光环 `0 0 0 4px rgba(245,108,108,0.12)`，**优先级要压过 focus 蓝色**，禁止红蓝混色。
+- 暗黑：深底（`rgba(255,255,255,0.06)` 或 `--wf-bg-color`）+ 描边，focus 蓝环。
+- **控件尺寸用默认（高 ~32px），禁止 `size="small"`**（与基础信息页一致）。
+- **禁止**默认态用发灰的填充底（曾用的 `rgba(118,128,150,0.07)` iOS 灰填充已废弃——一进页面没填写就发灰、易被误读为禁用态）。
+- **例外**：表格内的输入 / 下拉控件默认 `transparent`（白表格上即白底），hover 轻填充、focus 才显白底 + 蓝环（见第 5 节），避免整行被填充底染灰。
+
+### 3. 表单标签与分区
+
+- 标签：**右对齐**（EP 默认 `label-position`，勿设 `left`）、`label-width="110px"`、`font-weight:600`、色 `--wf-text-primary`。
+- 分区：**扁平**——分区标题 15px 加粗 + 底部 1px 分隔线（`--wf-border-lighter`），下方内容直接平铺。**禁止**给分区套「边框卡片 + 灰渐变头底 + 阴影」（`base-settings-card` / `section-card` mixin 已扁平化，勿改回卡片）。
+- 行间距：参考基础信息页 `el-form-item margin-bottom: 24px` 的呼吸感。
+
+### 4. 页签（Tab）
+
+- 用 `modern-tabs` mixin：**扁平下划线**风格——底部一条分隔线；tab 项 = `图标 + 文字`，默认灰字，激活态主色字 + 底部 2px 主色下划线指示条（带滑入动画）。**禁止**蓝色实心胶囊 / 外层白盒 / 上浮阴影。
+- tab 图标：16px 单路径 SVG，`fill="currentColor"`（跟随 tab 文字色），放在 tab 上而非内容区；图标语义示例：基础设置=齿轮、办理人=人群、监听器=铃铛、扩展=拼图。
+- **避免「两个标题」**：抽屉本身已有标题（如「设置边属性」），面板内容区不要再放与之重复的分区标题——有 tab 的面板 tab 名即标题；单分区无 tab 的面板（边 / 网关 / 结束）也直接平铺表单、**去掉 `.base-settings-header` 二级标题**（如「跳转条件配置 / 网关配置 / 基础配置」），保持单一标题。
+
+### 5. 表格
+
+`el-table` 统一：圆角 `12px` + 1px 边框 + `overflow:hidden`；**表头白底 `var(--wf-bg-white, #fff)`**、`font-weight:600`（全站表头统一为白——办理人 / 监听器 / 扩展属性表一致；勿用发灰的 `rgba(118,128,150,0.06)`，也需用 `!important` 压过 ruoyi 全局 `.el-table th { #f8f8f9 }`）；行 hover = 浅蓝底 `--wf-primary-light` + 左侧 3px 主色指示条；删除按钮 `el-button--danger` hover 红渐变 + 阴影。暗黑：表头 `rgba(255,255,255,0.04)`、hover `rgba(64,158,255,0.12)`。
+
+**表格内的输入 / 下拉控件默认透明底**（`background: transparent`），hover 轻填充、focus 才显白底 + 蓝环——让整行读作干净白底，避免「整行都是控件」的行被填充底染灰、与「含纯文本列」的行深浅不一致。
+
+### 6. 单选（radio-card）
+
+统一为「卡片式单选」一套设计语言：`1.5px` 边框 + 圆角，选中 = 主色边框 + **实色浅蓝底 `--wf-primary-light`**（勿用渐变）+ 实心蓝圆点。两种尺寸变体：
+
+- 大卡片（图标 + 标题 + 描述）：用于「设计器模型」等需要解释的重要选择。
+- 紧凑 pill（圆点 + 文字 + 可选 tooltip）：用于「协作方式 / 自定义表单」等简单多选项。
+- 布尔类（是 / 否）可直接用 `el-switch`（如基础信息页「自定义表单」）。
+
+### 7. 按钮
+
+- 「增加行 / 添加行」：虚线主色边框 + 透明底 + 居中，hover 实线边框 + 浅蓝底 `--wf-primary-light` + 主色阴影。
+- 主操作（保存等）：主色实心，圆角 ~10px，图标与文字间距用包裹 `span` 的 `inline-flex + gap`（EP 会把图标+文字包进一层 span，`gap` 要落在该 span 上）。
+
+### 8. 属性面板抽屉（append-to-body）
+
+- `el-drawer` teleport 到 body，scoped 样式命不中，**面板内样式必须写全局 `<style>` 并挂在 `.property-drawer-modern` 下**（见 `propertySetting.vue`）。
+- 抽屉内同样套：系统字体栈、白底描边输入（第 2 节）、扁平分区、下划线 tab、统一表格；并提供 `html.dark` 覆盖。
+- **append-to-body 弹窗（如人员选择 `el-dialog`，见 `between.vue`）**：弹窗根与 `.el-dialog__body` 必须有**实底背景** `var(--el-dialog-bg-color, #fff)`（遮罩 `rgba(0,0,0,.5)`），避免透明导致背后画布透出看不清；写全局样式时**用扁平完整 `:global(选择器)`**，不要在 `:global()` 内再嵌套子选择器——否则会被注入 scoped 属性而失效，甚至把头部样式漏到弹窗根节点。
+- **抽屉头部**：收紧与正文间距（去掉 EP 默认 `el-drawer__header { margin-bottom:32px }`，改 `0` + `padding-bottom:14px` + 底部分隔线，`el-drawer__body` `padding-top:12px`）；标题文字（`.el-drawer__header > span`）用 `--wf-text-primary` + `font-weight:600` + `16px`，**勿用 EP 默认浅灰**。亮色与暗黑都要设。
+
+### 9. 流程画布 / LogicFlow 节点
+
+**仿钉钉模式节点：**
+
+- 节点卡片：纯白底、**无边框**、多层柔和阴影（`0 6px 18px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.05)`）；设计态头部用主色蓝渐变 `linear-gradient(135deg,#409eff,#2b7de9)`。
+- **配色统一蓝 chroma，禁止橙色 `#FF8B00`/`#FFFCEB`**：网关菱形 ICON、边「+」加号、跳转条件徽标都用 `#409eff` / 浅蓝 `#ecf5ff`（对应 svg 资产同样改蓝）。
+
+**经典模式节点 + 左侧拖拽面板（设计态语义色）：**
+
+- 设计态（无运行状态）按节点类型上**语义色**，不用发灰的默认中性色（旧的 notDoneColor `107,114,128`、侧栏硬编码灰 `166,178,189` 已废弃），让各类节点一眼可辨：开始=绿 `103,194,58`、中间·审批=蓝 `64,158,255`、结束=红 `245,108,108`、互斥网关=橙 `245,158,11`、并行网关=青 `19,194,194`、包含网关=紫 `146,84,222`。
+- 左侧拖拽面板（`DiagramSidebar.vue` + `classics/js/sidebarIcons.js`）图标描边用同套语义色、图标底用对应浅色渐变，**与画布节点严格一致**（改一处要同步另一处）。
+- 实现走 `common/js/tool.js` 的 `applyClassicDesignColor(style, properties, rgb)`：在 `setCommonStyle` 之后调用，**仅经典节点（`classics/js/*`）调用，仿钉钉不调用**。阴影用同色系柔和投影（`drop-shadow` 同色 ~0.14 + 黑 ~0.04），收敛发灰的光晕 / 重投影 / 灰雾。
+
+**两模式公共：**
+
+- 选中 / 悬浮包围框：`setTheme` 的 `outline` 用柔和蓝实线（`rgba(64,158,255,.7)`），**禁止黑色虚线默认框**。
+- **运行态语义不可破坏（红线）**：节点 `status=在办(1)/已办(2)`、或 `chartStatusColor` 存在（看流程实例）时，节点 / 边 / 网关 / 条件徽标一律保留后端状态色（通过=绿 / 待办=橙 / 未到达=灰、退回红线）。设计态语义色**只在设计器页面生效**（全局标志 `window.__WF_FLOW_DESIGN_MODE__`，由 `flow-design/index.vue` 挂载时置位、卸载复位）且节点无运行状态时才覆盖，**业务侧流程实例进度图不受影响**。双模式（经典 / 仿钉钉）保持一致。
+
+### 10. 暗黑模式
+
+走 `html.dark` + `--wf-*` 变量；凡新增填充输入、表格、抽屉、卡片，都要补 `html.dark` 覆盖（参考 `baseInfo.vue` / `propertySetting.vue` 既有写法），勿只做亮色。
+
+> 一句话原则：**新表单 / 面板 = 复用 `baseInfo.vue` 的 token + `_common.scss` 的 mixin**，对齐白底描边输入、扁平分区（单一标题）、右对齐标签、默认控件高度、下划线 tab、白底表头表格与卡片单选；画布节点经典走类型语义色、仿钉钉走蓝 chroma，且**都不动运行态状态色**。
diff --git a/warm-flow-ui/src/assets/icons/svg/baseInfo.svg b/warm-flow-ui/src/assets/icons/svg/baseInfo.svg
index 26b36b7da2c9481a775c67d44b7be9b772a5a805..ebdac396b7feed0e41ab6356575f8e1840b901fb 100644
--- a/warm-flow-ui/src/assets/icons/svg/baseInfo.svg
+++ b/warm-flow-ui/src/assets/icons/svg/baseInfo.svg
@@ -1,7 +1,6 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1750862799027" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-     p-id="13244" width="32" height="32">
-    <path d="M606.336 105.8176l88.9984-88.9984c22.4256-22.4256 59.328-22.4256 81.7536 0L1007.1808 246.912c22.4256 22.4256 22.4256 59.328 0 81.7536l-88.9984 88.9984c-22.4256 22.4384-59.328 22.4384-81.7664 0L606.336 187.584c-22.4384-23.168-22.4384-59.3408 0-81.7664z m-138.2016 137.472L16.64 694.784C5.7856 705.6384 0 720.128 0 736.0256v230.0928A58.048 58.048 0 0 0 57.8816 1024h230.0928c15.1936 0 30.3872-5.7856 41.2416-16.64l451.4944-451.4944c22.4256-22.4256 22.4256-59.328 0-81.7664L549.888 243.2896c-22.4384-22.4256-58.624-22.4256-81.7664 0z m115.7632 674.3552h345.1392a52.6464 52.6464 0 0 1 52.8128 52.8128c0 28.9408-23.872 52.8128-52.8128 52.8128H583.8976a52.6464 52.6464 0 0 1-52.8128-52.8128 52.6464 52.6464 0 0 1 52.8128-52.8128z m185.9584-185.9584H929.024a52.6464 52.6464 0 0 1 52.8128 52.8256c0 28.928-23.872 52.8128-52.8128 52.8128H769.856a52.6464 52.6464 0 0 1-52.8256-52.8128 52.6464 52.6464 0 0 1 52.8256-52.8256z"
-          fill="#E60B00" p-id="13245"></path>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4.5" y="3" width="15" height="18" rx="2.2" stroke="currentColor" stroke-width="1.7"/>
+    <path d="M8.5 8H15.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
+    <path d="M8.5 12H15.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
+    <path d="M8.5 16H13" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
 </svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/between.svg b/warm-flow-ui/src/assets/icons/svg/between.svg
index 7d64c6fcd9e9a82ba5afbb37ccb534470740f380..9b50c2f7865190f822b8de3b6386df56621e7d91 100644
--- a/warm-flow-ui/src/assets/icons/svg/between.svg
+++ b/warm-flow-ui/src/assets/icons/svg/between.svg
@@ -3,13 +3,13 @@
 <svg t="1751602693809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1717"
      width="32" height="32">
     <path d="M513.1776 511.3344m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z"
-          fill="#FFF1DC" p-id="1718"></path>
+          fill="#ecf5ff" p-id="1718"></path>
     <path d="M588.1856 491.776h10.3936c42.496 0.1536 84.992-0.3584 127.488 0.6656 28.9792 0.7168 54.528 26.5216 55.296 55.552 0.9728 36.1984 0.6656 72.3968 0.512 108.5952-0.0512 13.8752-8.3456 21.0944-22.9376 21.1456-43.008 0.0512-86.0672 0-129.0752 0H270.8992c-19.968 0-26.624-6.5024-26.5728-26.3168 0.1024-34.6112-0.3072-69.2736 0.6656-103.8848 0.768-28.416 26.5728-54.4256 54.9376-55.1424 42.496-1.024 84.992-0.5632 127.488-0.7168h10.9056c-1.1264-14.336-5.7856-26.8288-12.544-38.1952a359.51104 359.51104 0 0 0-26.2144-38.144c-49.2032-62.6688-38.8096-153.856 23.6544-203.4176 63.4368-50.432 156.0064-38.3488 204.9536 26.7264 43.1616 57.3952 39.4752 131.2768-9.472 186.2144-15.9744 17.92-26.0608 38.5024-30.208 62.0544-0.3072 1.3824-0.2048 2.6624-0.3072 4.864zM778.0352 727.7056c-4.9664-5.5296-14.4384-12.1856-31.1808-12.1856-162.6624 0-304.7936 0-467.456 0.0512-4.6592 0-8.7552 0.4096-12.5952 1.28-16.5888 3.7888-27.5968 18.5856-26.7264 35.9424 0.9216 17.664 13.3632 30.72 30.9248 32.512 3.6864 0.3584 7.2704 0.3584 10.4448 0.3584h464.128c3.3792 0 7.2192 0 11.264-0.512 16.0768-2.0992 27.648-13.9264 29.3888-30.1568 1.0752-10.6496-1.7408-20.1216-8.192-27.2896z"
-          fill="#FC7032" p-id="1719"></path>
+          fill="#2b7de9" p-id="1719"></path>
     <path d="M670.8736 677.7856a430.9504 430.9504 0 0 0 85.0432-175.2064c-8.7552-6.0928-19.0464-9.8304-29.8496-10.0864-42.496-1.024-84.992-0.512-127.488-0.6656h-10.3936c0.1024-2.2528 0-3.5328 0.256-4.7616 4.1472-23.552 14.2336-44.1344 30.208-62.0544 48.9472-54.9376 52.6336-128.8704 9.472-186.2144-48.9472-65.0752-141.4656-77.1584-204.9536-26.7264-62.4128 49.6128-72.8576 140.8-23.6544 203.4176 9.5232 12.1344 18.3296 24.9344 26.2144 38.144 6.7584 11.3664 11.4688 23.8592 12.544 38.1952h-10.9056c-42.496 0.1536-84.992-0.3072-127.488 0.7168-28.3648 0.6656-54.1184 26.7264-54.9376 55.1424-0.9728 34.6112-0.5632 69.2736-0.6656 103.8848-0.0512 19.7632 6.656 26.3168 26.5728 26.3168h358.9632c13.7216-0.1024 27.392-0.1024 41.0624-0.1024zM279.3472 715.5712c-4.6592 0-8.7552 0.4096-12.5952 1.28-16.5888 3.7888-27.5968 18.5856-26.7264 35.9424 0.9216 17.664 13.3632 30.72 30.9248 32.512 3.6864 0.3584 7.2704 0.3584 10.4448 0.3584H542.0544a434.944 434.944 0 0 0 94.5664-70.1952c-119.3984 0.0512-232.2944 0.0512-357.2736 0.1024z"
-          fill="#FF7C33" p-id="1720"></path>
+          fill="#409eff" p-id="1720"></path>
     <path d="M647.936 273.9712c-4.864-12.1856-11.4688-24.064-19.8656-35.2768-48.9472-65.0752-141.4656-77.1584-204.9536-26.7264-62.4128 49.6128-72.8576 140.8-23.6544 203.4176 9.5232 12.1344 18.3296 24.9344 26.2144 38.144 6.7584 11.3664 11.4688 23.8592 12.544 38.1952h-10.9056c-42.496 0.1536-84.992-0.3072-127.488 0.7168-28.3648 0.6656-54.1184 26.7264-54.9376 55.1424-0.9728 34.6112-0.5632 69.2736-0.6656 103.8848-0.0512 19.7632 6.656 26.3168 26.5728 26.3168h24.576c194.2016-36.096 342.784-201.6768 352.5632-403.8144z"
-          fill="#FF9552" p-id="1721"></path>
+          fill="#66b1ff" p-id="1721"></path>
     <path d="M531.712 182.1696c-37.376-5.0688-76.6464 4.4544-108.5952 29.8496-62.4128 49.6128-72.8576 140.8-23.6544 203.4176 0.4096 0.5632 0.8704 1.1264 1.28 1.6896 66.2528-61.2352 113.2032-142.8992 130.9696-234.9568z"
-          fill="#FFA56A" p-id="1722"></path>
+          fill="#a0cfff" p-id="1722"></path>
 </svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/classic.svg b/warm-flow-ui/src/assets/icons/svg/classic.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3203698db9b55ffa7d5de49b87070e72a9e33c10
--- /dev/null
+++ b/warm-flow-ui/src/assets/icons/svg/classic.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2.5" y="2.75" width="7.5" height="5" rx="1.5" stroke="currentColor" stroke-width="1.7"/>
+    <rect x="14" y="2.75" width="7.5" height="5" rx="1.5" stroke="currentColor" stroke-width="1.7"/>
+    <rect x="14" y="16.25" width="7.5" height="5" rx="1.5" stroke="currentColor" stroke-width="1.7"/>
+    <path d="M10 5.25H14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
+    <path d="M6.25 7.75V18.75H14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/flowDesign.svg b/warm-flow-ui/src/assets/icons/svg/flowDesign.svg
index bfbbcde0e8412e73ebe06d81a21648f512c11e27..53380a23a9e422acb47f527fe9f6c8631d5f55b9 100644
--- a/warm-flow-ui/src/assets/icons/svg/flowDesign.svg
+++ b/warm-flow-ui/src/assets/icons/svg/flowDesign.svg
@@ -1,13 +1,8 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1750862862996" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-     p-id="16083" width="32" height="32">
-    <path d="M610.923563 0L937.94958 341.473882v563.156975c0 66.043697-36.399328 119.283092-103.028168 119.283093H214.704403C148.075563 1023.91395 86.05042 970.674555 86.05042 904.630857V119.283092C86.05042 53.239395 148.075563 0 214.704403 0h396.21916z"
-          fill="#FA9543" p-id="16084"></path>
-    <path d="M937.450487 481.675832L86.05042 768.421647V119.283092C86.05042 53.248 147.998118 0 214.549513 0h396.262184l326.63879 341.482487v140.193345z"
-          fill="#FFA255" p-id="16085"></path>
-    <path d="M937.94958 341.465277l-186.583126-0.507697c-66.637445 0-140.451496-58.875697-140.451496-124.91079V0L937.94958 341.465277z"
-          fill="#FA9543" p-id="16086"></path>
-    <path d="M583.249748 691.139765h191.178218c13.845513 0 25.118118-11.255395 25.118118-24.567395V567.760672c0-13.819697-11.272605-24.576-25.118118-24.576H583.249748c-13.845513 0-25.126723 11.272605-25.126723 24.576v14.336H456.65237l-71.766051-70.131092c0.516303-2.056605 0.516303-4.104605 0.516303-6.152605V436.705882c32.294723-10.756303 54.332235-40.96 54.332235-74.752 0-43.507092-35.366723-78.839395-78.93405-78.839395s-78.93405 35.323697-78.934051 78.839395c0 34.308303 22.046118 63.488 52.800538 74.235698v67.584L236.759126 599.496067c-4.620908 4.603697-7.692908 10.756303-7.692908 17.408 0 6.651697 2.564303 12.795697 7.692908 17.408L334.650084 730.051765v105.463395a25.68605 25.68605 0 0 0 25.625815 25.6H558.123025v27.639395c0 13.828303 11.272605 24.576 25.118118 24.576h191.178218c13.845513 0 25.118118-11.264 25.118118-24.576V789.951462c0-13.819697-11.272605-24.576-25.118118-24.576H583.249748c-13.845513 0-25.126723 11.264-25.126723 24.576v20.48H385.918924V721.859765l89.182656-87.031395 2.056605-2.048h80.973445v33.792c0 13.312 11.28121 24.567395 25.126723 24.567395z m25.109513-98.803093H748.810756v49.659698H608.376471v-49.659698z m0 222.182185H748.810756v49.668303H608.376471v-49.659698zM356.179899 680.90837l-65.60484-63.987093 65.60484-63.995697 65.613446 63.995697-65.613446 63.995698z"
-          fill="#FFFFFF" p-id="16087"></path>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="5" cy="6" r="2.6" stroke="currentColor" stroke-width="1.7"/>
+    <circle cx="19" cy="6" r="2.6" stroke="currentColor" stroke-width="1.7"/>
+    <circle cx="12" cy="18" r="2.6" stroke="currentColor" stroke-width="1.7"/>
+    <path d="M7.6 6H16.4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
+    <path d="M6.4 8.2L10.6 15.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
+    <path d="M17.6 8.2L13.4 15.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
 </svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/flowName.svg b/warm-flow-ui/src/assets/icons/svg/flowName.svg
index 234b6772836d932174bf3e9cc2ae5b4183541fb9..81f91d6f1b028ff769a50fcfb56027afd7552ed3 100644
--- a/warm-flow-ui/src/assets/icons/svg/flowName.svg
+++ b/warm-flow-ui/src/assets/icons/svg/flowName.svg
@@ -1,5 +1,6 @@
-<svg t="1751726197774" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-     p-id="16269" width="32" height="32">
-    <path d="M981.873319 0c0 0-409.638476 4.012382-447.792429 42.167357L29.841896 546.405328c-37.734397 37.734397-37.734397 98.913751 0 136.648148l312.644447 312.64547c37.734397 37.734397 98.913751 37.734397 136.648148 0l504.238994-504.238994c38.153953-38.153953 40.60477-449.558654 40.60477-449.558654C1023.091049 19.059068 1004.719642 0.776689 981.873319 0zM757.75914 367.602102 757.75914 367.602102c-27.564785 27.564785-72.255615 27.564785-99.8204 0l0 0c-27.564785-27.564785-27.564785-72.255615 0-99.8204l0 0c27.564785-27.564785 72.255615-27.564785 99.8204 0l0 0C785.323926 295.346487 785.323926 340.037317 757.75914 367.602102z"
-          fill="#CD5555" p-id="16270"></path>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="8.75" y="2.75" width="6.5" height="4.5" rx="1.2" stroke="currentColor" stroke-width="1.7"/>
+    <rect x="2.75" y="16.75" width="6.5" height="4.5" rx="1.2" stroke="currentColor" stroke-width="1.7"/>
+    <rect x="14.75" y="16.75" width="6.5" height="4.5" rx="1.2" stroke="currentColor" stroke-width="1.7"/>
+    <path d="M12 7.25V11.5M6 16.75V13.5H18V16.75" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/inclusive.svg b/warm-flow-ui/src/assets/icons/svg/inclusive.svg
index 71fb0b1bb83a3918894a29512e56901f0bbae00a..a4f9a63ba9dc2b99b853d7aa6f4bb869cf3b45b5 100644
--- a/warm-flow-ui/src/assets/icons/svg/inclusive.svg
+++ b/warm-flow-ui/src/assets/icons/svg/inclusive.svg
@@ -4,5 +4,5 @@
      xmlns="http://www.w3.org/2000/svg" p-id="9632" width="32" height="200">
     <path d="M557.376 15.68a73.408 73.408 0 0 0-97.088 5.696L21.376 460.288l-5.696 6.4a73.408 73.408 0 0 0 5.696 97.024l438.912 438.912 6.4 5.696a73.408 73.408 0 0 0 97.024-5.696l438.912-438.912 5.696-6.336a73.408 73.408 0 0 0-5.696-97.088L563.712 21.376l-6.4-5.696zM105.408 512L512 105.408 918.592 512 512 918.592 105.408 512zM512 272a240 240 0 1 0 0 480 240 240 0 0 0 0-480z m0 96a144 144 0 1 1 0 288 144 144 0 0 1 0-288z"
           p-id="9633" data-spm-anchor-id="a313x.search_index.0.i45.29543a81aRv0Ij"
-          fill="#FF8B00"></path>
+          fill="#409eff"></path>
 </svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/mimic.svg b/warm-flow-ui/src/assets/icons/svg/mimic.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1a44989761d5927e259e913967dda5bab2e6a75e
--- /dev/null
+++ b/warm-flow-ui/src/assets/icons/svg/mimic.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="4" r="2.1" stroke="currentColor" stroke-width="1.7"/>
+    <path d="M12 6.1V9.4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
+    <rect x="6.5" y="9.5" width="11" height="5" rx="1.5" stroke="currentColor" stroke-width="1.7"/>
+    <path d="M12 14.6V17.9" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
+    <circle cx="12" cy="20" r="2.1" stroke="currentColor" stroke-width="1.7"/>
+</svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/parallel.svg b/warm-flow-ui/src/assets/icons/svg/parallel.svg
index 63b2715dbafe6b89ae3ef0374540530598851384..6975d8b570fe2641075ce1c3382a3a27d875a198 100644
--- a/warm-flow-ui/src/assets/icons/svg/parallel.svg
+++ b/warm-flow-ui/src/assets/icons/svg/parallel.svg
@@ -2,9 +2,9 @@
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg t="1751612499257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3250"
      width="32" height="32">
-    <path d="M85.418667 512L512.021333 85.397333 938.624 512 512.021333 938.602667z" fill="#FFFCEB" p-id="3251"></path>
+    <path d="M85.418667 512L512.021333 85.397333 938.624 512 512.021333 938.602667z" fill="#ecf5ff" p-id="3251"></path>
     <path d="M512 714.453333A32 32 0 0 1 480 682.666667v-138.666667H341.333333a32 32 0 1 1 0-64h138.666667V341.333333a32 32 0 0 1 64 0v138.666667H682.666667a32 32 0 0 1 0 64h-138.666667V682.666667a32 32 0 0 1-32 31.786666z"
-          fill="#FF8B00" p-id="3252"></path>
+          fill="#409eff" p-id="3252"></path>
     <path d="M512 970.453333a66.56 66.56 0 0 1-47.146667-19.626666L72.96 558.933333a66.346667 66.346667 0 0 1 0-94.293333L464.853333 72.533333a68.266667 68.266667 0 0 1 94.293334 0l391.893333 392.106667a66.346667 66.346667 0 0 1 0 94.293333L559.146667 950.826667a66.56 66.56 0 0 1-47.146667 19.626666z m0-853.333333a2.986667 2.986667 0 0 0-1.92 0L118.186667 509.866667a2.56 2.56 0 0 0 0 3.626666l391.893333 392.106667a3.2 3.2 0 0 0 3.84 0l391.893333-392.106667a2.986667 2.986667 0 0 0 0-3.626666L513.92 117.76a2.986667 2.986667 0 0 0-1.92-0.64z"
-          fill="#FF8B00" p-id="3253"></path>
+          fill="#409eff" p-id="3253"></path>
 </svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/save.svg b/warm-flow-ui/src/assets/icons/svg/save.svg
index 4f69098b9deadca9bd6ce0b731cca6b52e05f695..b13c3d0aec00db947d07b0249eb2b2914bc8f123 100644
--- a/warm-flow-ui/src/assets/icons/svg/save.svg
+++ b/warm-flow-ui/src/assets/icons/svg/save.svg
@@ -1,11 +1,5 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1750863009109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-     p-id="24329" width="32" height="32">
-    <path d="M799.5904 927.232H232.448A112.64 112.64 0 0 1 120.1152 814.08V206.592A112.64 112.64 0 0 1 232.448 93.184h485.4784a35.84 35.84 0 0 1 25.1392 10.24L901.12 260.2496a36.4544 36.4544 0 0 1 10.752 25.856V814.08a112.64 112.64 0 0 1-112.2816 113.152z"
-          fill="#FFAC3E" p-id="24330"></path>
-    <path d="M620.3392 450.816H411.6992a99.1232 99.1232 0 0 1-99.1232-99.1744V93.184h406.8864v258.4576a99.1232 99.1232 0 0 1-99.1232 99.1744z"
-          fill="#FF7C0E" p-id="24331"></path>
-    <path d="M602.9312 361.6256h-112.64a40.96 40.96 0 0 1 0-81.92h112.64a40.96 40.96 0 1 1 0 81.92z" fill="#FFFFFF"
-          p-id="24332"></path>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.5 21H5.5C4.4 21 3.5 20.1 3.5 19V5C3.5 3.9 4.4 3 5.5 3H15.5L20.5 8V19C20.5 20.1 19.6 21 18.5 21Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
+    <path d="M7.5 3V8H15" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.5 21V14.5H16.5V21" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
 </svg>
diff --git a/warm-flow-ui/src/assets/icons/svg/serial.svg b/warm-flow-ui/src/assets/icons/svg/serial.svg
index ffe859034fc154dc0cb3a9908eff2c0273a4d43a..5188b6a9f31eaf6a2b272452a8d4f95b75ccdbfe 100644
--- a/warm-flow-ui/src/assets/icons/svg/serial.svg
+++ b/warm-flow-ui/src/assets/icons/svg/serial.svg
@@ -2,9 +2,9 @@
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg t="1751612347166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4079"
      width="32" height="32">
-    <path d="M85.418667 512L512.021333 85.397333 938.624 512 512.021333 938.602667z" fill="#FFFCEB" p-id="4080"></path>
+    <path d="M85.418667 512L512.021333 85.397333 938.624 512 512.021333 938.602667z" fill="#ecf5ff" p-id="4080"></path>
     <path d="M512 970.24a66.346667 66.346667 0 0 1-47.146667-19.413333L72.96 558.72a66.346667 66.346667 0 0 1 0-94.08L464.853333 72.533333a68.266667 68.266667 0 0 1 94.293334 0l392.106666 392.106667a66.773333 66.773333 0 0 1 0 94.08L559.146667 950.826667a66.346667 66.346667 0 0 1-47.146667 19.413333z m0-853.333333a2.986667 2.986667 0 0 0-1.92 0L118.186667 509.866667a2.56 2.56 0 0 0 0 3.626666l391.893333 392.106667a3.2 3.2 0 0 0 3.84 0l391.893333-392.106667a2.56 2.56 0 0 0 0-3.626666L513.92 117.76a2.986667 2.986667 0 0 0-1.92-0.64z"
-          fill="#FF8B00" p-id="4081"></path>
+          fill="#409eff" p-id="4081"></path>
     <path d="M554.666667 516.266667l107.946666-107.946667a30.506667 30.506667 0 0 0-42.666666-42.666667L512 473.173333l-107.946667-107.946666a30.506667 30.506667 0 0 0-42.666666 42.666666L469.333333 516.266667l-108.8 107.946666a30.506667 30.506667 0 1 0 42.666667 42.666667l108.8-107.306667 106.666667 107.733334a30.506667 30.506667 0 0 0 42.666666-42.666667z"
-          fill="#FF8B00" p-id="4082"></path>
+          fill="#409eff" p-id="4082"></path>
 </svg>
diff --git a/warm-flow-ui/src/assets/styles/_common.scss b/warm-flow-ui/src/assets/styles/_common.scss
index 1e9f8dcd1ef9f84021f53a7c16afb70dab547df2..5bcb0b4a85927e03f17503903303b23910105048 100644
--- a/warm-flow-ui/src/assets/styles/_common.scss
+++ b/warm-flow-ui/src/assets/styles/_common.scss
@@ -8,106 +8,71 @@
 @mixin modern-tabs {
   .modern-tabs-wrapper {
     position: relative;
-    background: var(--wf-bg-white, #fff);
-    border-radius: var(--wf-radius-lg, 12px);
-    padding: 6px;
-    margin-bottom: 0;
-    /* 现代化边框：外层包裹线 + 内部柔和阴影 */
-    box-shadow:
-      0 0 0 1.5px rgba(64, 158, 255, 0.10),
-      inset 0 1px 3px rgba(0, 0, 0, 0.03);
+    background: transparent;
+    border-radius: 0;
+    padding: 0;
+    margin-bottom: 4px;
+    /* 扁平下划线 tab 栏：底部一条分隔线，与扁平表单/基础信息页协调 */
+    border-bottom: 1px solid var(--wf-border-lighter, #ebeef5);
     html.dark & {
-      background: rgba(20, 22, 28, 0.8);
-      box-shadow:
-        0 0 0 1.5px rgba(64, 158, 255, 0.14),
-        inset 0 1px 3px rgba(0, 0, 0, 0.2);
+      background: transparent;
+      border-bottom-color: var(--wf-border-color, #333333);
     }
   }
   .modern-tabs {
-    display: flex; align-items: center; gap: 4px;
+    display: flex; align-items: center; gap: 24px;
     overflow-x: auto; &::-webkit-scrollbar { height: 0; display: none; }
   }
   .modern-tab-item {
     position: relative;
-    padding: 8px 16px;
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 10px 2px;
     cursor: pointer;
-    border-radius: var(--wf-radius, 8px);
-    font-size: 13px; font-weight: 500;
-    color: var(--wf-text-secondary, #909399);
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 0;
+    font-size: 14px; font-weight: 500;
+    color: var(--wf-text-regular, #606266);
+    transition: color 0.2s ease;
     user-select: none; white-space: nowrap; flex-shrink: 0;
-    /* 非激活项：淡边框 + 悬浮效果 */
-    border: 1.5px solid transparent;
+    border: none;
+
+    /* 激活下划线指示条 */
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0; right: 0; bottom: -1px;
+      height: 2px;
+      background: var(--wf-primary, #409eff);
+      border-radius: 2px;
+      transform: scaleX(0);
+      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
 
     &:hover {
       color: var(--wf-primary, #409eff);
-      background: var(--wf-primary-lighter, #f0f7ff);
-      border-color: rgba(64, 158, 255, 0.18);
-      html.dark & { background: rgba(64,158,255,.08); }
     }
 
     &.is-active {
-      color: #fff;
-      background: linear-gradient(135deg, var(--wf-primary,#409eff) 0%, var(--wf-primary-dark,#2b7de9) 100%);
-      box-shadow: 0 2px 8px rgba(64,158,255,.35), 0 1px 3px rgba(0,0,0,.08);
+      color: var(--wf-primary, #409eff);
       font-weight: 600;
-      transform: translateY(-1px);
-      border-color: transparent;
+      &::after { transform: scaleX(1); }
 
       /* 扩展页签：绿色激活态 */
       &.is-ext-tab {
-        color: #fff;
-        background: linear-gradient(135deg, #67c23a 0%, #529b2e 100%);
-        box-shadow: 0 2px 8px rgba(103,194,58,.35), 0 1px 3px rgba(0,0,0,.08);
-
-        html.dark & {
-          box-shadow: 0 2px 8px rgba(103,194,58,.45), 0 1px 3px rgba(0,0,0,.15);
-        }
-
-        /* 激活态：文字和角标统一白色 */
-        .tab-label { color: #fff; }
-        .tab-ext-tag {
-          background: rgba(255,255,255,0.25);
-          color: #fff;
-          border-color: transparent;
-        }
+        color: #67c23a;
+        &::after { background: #67c23a; }
+        .tab-label { color: #67c23a; }
       }
     }
 
     /* ========== 扩展页签专属样式（非激活态） ========== */
     &.is-ext-tab {
-      /* 非激活：淡绿底色 + 绿色文字 + 可见边框 */
+      /* 非激活：绿色文字（扁平，无底色无边框） */
       color: var(--wf-success, #529b2e);
-      background: rgba(103, 194, 58, 0.06);
-      border-color: rgba(103, 194, 58, 0.18);
-      html.dark & { 
-        color: #85ce61; 
-        background: rgba(103, 194, 58, 0.10); 
-        border-color: rgba(103, 194, 58, 0.22);
-      }
+      html.dark & { color: #85ce61; }
 
       &:hover {
         color: #3d8b2a;
-        background: rgba(103, 194, 58, 0.12);
-        border-color: rgba(103, 194, 58, 0.35);
-
-        /* 亮模式：深绿字 + 淡绿底 */
-        .tab-label { color: #3d8b2a; }
-        .tab-ext-tag {
-          background: rgba(103, 194, 58, 0.18);
-          color: #3d8b2a;
-        }
-
-        /* 暗黑模式：才用白色（深色背景下白字清晰） */
-        html.dark & {
-          color: #fff;
-          background: rgba(103, 194, 58, 0.22);
-          .tab-label { color: #fff; }
-          .tab-ext-tag {
-            background: rgba(255,255,255,0.18);
-            color: #fff;
-          }
-        }
+        html.dark & { color: #fff; }
       }
 
       .tab-ext-tag {
@@ -127,6 +92,7 @@
       }
     }
 
+    .tab-icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; }
     .tab-label { position: relative; z-index: 1; }
   }
 
@@ -144,69 +110,63 @@
 
 /* ========== 基础配置卡片 ========== */
 @mixin base-settings-card {
+  /* 扁平分区：与「基础信息」页一致（标题 + 底边线，无卡片边框/阴影/灰底） */
   .base-settings-section {
-    border-radius: var(--wf-radius-lg, 12px);
-    overflow: hidden;
-    border: 1px solid var(--wf-border-light, #e4e7ed);
-    background: var(--wf-bg-white, #fff);
-    box-shadow: var(--wf-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.04));
-    transition: all 0.3s ease;
-    html.dark & {
-      border-color: var(--wf-border-color, #333333);
-      background: var(--wf-bg-color, #141414);
-    }
-    &:hover {
-      box-shadow: var(--wf-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
-      html.dark & { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
-    }
+    border: none;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    overflow: visible;
+    margin-bottom: 4px;
+    html.dark & { border: none; background: transparent; }
   }
   .base-settings-header {
-    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
+    display: flex; align-items: center; gap: 8px;
+    padding: 0 0 12px 0;
+    margin-bottom: 20px;
+    background: transparent;
     border-bottom: 1px solid var(--wf-border-lighter, #ebeef5);
     html.dark & {
-      background: linear-gradient(135deg, rgba(120,128,140,.06) 0%, rgba(80,88,100,.04) 100%);
+      background: transparent;
       border-bottom-color: var(--wf-border-color, #333333);
     }
   }
   .ext-icon-base { color: var(--wf-text-regular, #606266); svg { width: 16px; height: 16px; } }
-  .base-settings-title { font-size: 13px; font-weight: 600; color: var(--wf-text-primary, #303133); letter-spacing: .3px; }
+  .base-settings-title { font-size: 15px; font-weight: 600; color: var(--wf-text-primary, #303133); letter-spacing: .3px; }
   .base-settings-content {
-    padding: 14px 16px;
-    background: var(--wf-bg-color, #fafbfc);
-    html.dark & { background: var(--wf-bg-color, #141414); }
+    padding: 0;
+    background: transparent;
+    html.dark & { background: transparent; }
   }
 }
 
 /* ========== 监听器/办理人 通用卡片 ========== */
 @mixin section-card {
+  /* 扁平分区：与「基础信息」页一致（标题 + 底边线，无卡片边框/阴影/灰底），但保留 Tab 切换 */
   .section-card {
-    border-radius: var(--wf-radius-lg, 12px);
-    overflow: hidden;
-    border: 1px solid var(--wf-border-light, #e4e7ed);
-    background: var(--wf-bg-white, #fff);
-    box-shadow: var(--wf-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.04));
-    transition: all 0.3s ease;
-    html.dark & {
-      border-color: var(--wf-border-color, #333333);
-      background: var(--wf-bg-color, #141414);
-    }
-    &:hover {
-      box-shadow: var(--wf-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
-      html.dark & { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
-    }
+    border: none;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    overflow: visible;
+    margin-bottom: 4px;
+    html.dark & { border: none; background: transparent; }
+    &:hover { box-shadow: none; }
   }
   .section-card-header {
-    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
+    display: flex; align-items: center; gap: 8px;
+    padding: 0 0 12px 0;
+    margin-bottom: 20px;
+    background: transparent;
     border-bottom: 1px solid var(--wf-border-lighter, #ebeef5);
-    html.dark & { border-bottom-color: var(--wf-border-color, #333333); }
+    html.dark & { background: transparent; border-bottom-color: var(--wf-border-color, #333333); }
   }
   .section-card-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; svg { width: 16px; height: 16px; } }
-  .section-card-title { font-size: 13px; font-weight: 600; color: var(--wf-text-primary, #303133); letter-spacing: .3px; }
+  .section-card-title { font-size: 15px; font-weight: 600; color: var(--wf-text-primary, #303133); letter-spacing: .3px; }
   .section-card-body {
-    padding: 14px 16px;
-    background: var(--wf-bg-color, #fafbfc);
-    html.dark & { background: var(--wf-bg-color, #141414); }
+    padding: 0;
+    background: transparent;
+    html.dark & { background: transparent; }
   }
   .action-buttons { display: flex; gap: 8px; margin-top: 12px; }
 }
diff --git a/warm-flow-ui/src/components/design/classics/js/between.js b/warm-flow-ui/src/components/design/classics/js/between.js
index 9d7da6096e54f4a8b5f2cd21f03b09c0af6d9f98..157780ffe613b0735d692af0ce96ad11b9027c2d 100644
--- a/warm-flow-ui/src/components/design/classics/js/between.js
+++ b/warm-flow-ui/src/components/design/classics/js/between.js
@@ -1,5 +1,5 @@
 import {RectNode, RectNodeModel, h} from "@logicflow/core";
-import {setCommonStyle} from "@/components/design/common/js/tool.js";
+import {setCommonStyle, applyClassicDesignColor} from "@/components/design/common/js/tool.js";
 
 class BetweenModel extends RectNodeModel {
 
@@ -10,7 +10,9 @@ class BetweenModel extends RectNodeModel {
     this.radius = 8;
   }
   getNodeStyle() {
-    return setCommonStyle(super.getNodeStyle(), this.properties, "node");
+    const style = setCommonStyle(super.getNodeStyle(), this.properties, "node");
+    // 设计态语义色：中间 / 审批节点用品牌蓝
+    return applyClassicDesignColor(style, this.properties, '64,158,255');
   }
 }
 
@@ -91,8 +93,8 @@ class BetweenView extends RectNode {
         ]),
         // 卡片阴影（暗黑模式加深）
         h('filter', { id: `card-shadow-${model.id}`, x: '-20%', y: '-20%', width: '140%', height: '140%' }, [
-          h('feDropShadow', { dx: 0, dy: 3, stdDeviation: 6, floodColor: '#000', floodOpacity: isDark ? 0.4 : 0.08 }),
-          h('feDropShadow', { dx: 0, dy: 1, stdDeviation: 2, floodColor: '#000', floodOpacity: isDark ? 0.2 : 0.04 }),
+          h('feDropShadow', { dx: 0, dy: 3, stdDeviation: 6, floodColor: '#000', floodOpacity: isDark ? 0.4 : 0.05 }),
+          h('feDropShadow', { dx: 0, dy: 1, stdDeviation: 2, floodColor: '#000', floodOpacity: isDark ? 0.2 : 0.025 }),
         ]),
         // 顶部光泽渐变（暗黑模式减弱）
         h('linearGradient', { id: `card-top-${model.id}`, x1: '0%', y1: '0%', x2: '100%', y2: '0%' }, [
diff --git a/warm-flow-ui/src/components/design/classics/js/end.js b/warm-flow-ui/src/components/design/classics/js/end.js
index c9d4511953d6f3f0a9a7874c1a36037972fd32a2..9faac6e089972f67bf4b19745049dd9735e6da27 100644
--- a/warm-flow-ui/src/components/design/classics/js/end.js
+++ b/warm-flow-ui/src/components/design/classics/js/end.js
@@ -1,5 +1,5 @@
 import { CircleNode, CircleNodeModel, h } from "@logicflow/core";
-import {setCommonStyle} from "@/components/design/common/js/tool.js";
+import {setCommonStyle, applyClassicDesignColor} from "@/components/design/common/js/tool.js";
 
 class endModel extends CircleNodeModel {
 
@@ -10,6 +10,8 @@ class endModel extends CircleNodeModel {
 
   getNodeStyle() {
     const style = setCommonStyle(super.getNodeStyle(), this.properties, "node");
+    // 设计态语义色：结束节点用红色（终止）
+    applyClassicDesignColor(style, this.properties, '245,108,108');
     style.strokeWidth = 3;
     return style;
   }
@@ -37,15 +39,15 @@ class endView extends CircleNode {
           h('stop', { offset: '0%', stopColor: isDark ? `rgba(${sc}, 0.15)` : `rgba(${sc}, 0.08)` }),
           h('stop', { offset: '100%', stopColor: isDark ? '#181a20' : 'rgba(248,250,252,0.98)' }),
         ]),
-        // 双环阴影/发光
+        // 双环阴影/发光（柔和）
         h('filter', { id: `end-shadow-${model.id}`, x: '-30%', y: '-30%', width: '160%', height: '160%' }, [
-          h('feDropShadow', { dx: 0, dy: 2, stdDeviation: 3, floodColor: `rgb(${sc})`, floodOpacity: isDark ? 0.25 : 0.15 }),
+          h('feDropShadow', { dx: 0, dy: 2, stdDeviation: 3, floodColor: `rgb(${sc})`, floodOpacity: isDark ? 0.18 : 0.1 }),
         ]),
       ]),
-      // 外层光晕
+      // 外层光晕（柔和不抢眼）
       h('circle', {
-        cx: x, cy: y, r: r + 5,
-        fill: `rgba(${sc}, ${isDark ? 0.08 : 0.04})`,
+        cx: x, cy: y, r: r + 4,
+        fill: `rgba(${sc}, ${isDark ? 0.05 : 0.02})`,
       }),
       // 内圈填充（暗黑模式使用深色基底）
       h('circle', {
diff --git a/warm-flow-ui/src/components/design/classics/js/inclusive.js b/warm-flow-ui/src/components/design/classics/js/inclusive.js
index 38f6e5363c6ba97e9d1feff0a329b207d2226b10..2d434a38d3ab9fdeeba989b2f68cc890ddbc3625 100644
--- a/warm-flow-ui/src/components/design/classics/js/inclusive.js
+++ b/warm-flow-ui/src/components/design/classics/js/inclusive.js
@@ -1,5 +1,5 @@
 import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core'
-import {setCommonStyle} from "@/components/design/common/js/tool.js";
+import {setCommonStyle, applyClassicDesignColor} from "@/components/design/common/js/tool.js";
 
 class InclusiveModel extends PolygonNodeModel {
   static extendKey = 'InclusiveModel';
@@ -25,6 +25,8 @@ class InclusiveModel extends PolygonNodeModel {
 
   getNodeStyle() {
     const style = setCommonStyle(super.getNodeStyle(), this.properties, "node");
+    // 设计态语义色：包含网关用紫色（包容多选）
+    applyClassicDesignColor(style, this.properties, '146,84,222');
     style.fill = style._statusRgba ? style._statusRgba(0.06) : 'rgba(166,178,189,0.06)';
     style.strokeWidth = 2;
     return style;
@@ -48,7 +50,7 @@ class InclusiveView extends PolygonNode {
         // 定义滤镜
         h('defs', {}, [
           h('filter', { id: `gw-shadow-i-${model.id}`, x: '-30%', y: '-30%', width: '160%', height: '160%' }, [
-            h('feDropShadow', { dx: 0, dy: 2, stdDeviation: 3, floodColor: '#000', floodOpacity: 0.07 }),
+            h('feDropShadow', { dx: 0, dy: 2, stdDeviation: 3, floodColor: '#000', floodOpacity: 0.05 }),
           ]),
         ]),
         // 菱形底座
diff --git a/warm-flow-ui/src/components/design/classics/js/parallel.js b/warm-flow-ui/src/components/design/classics/js/parallel.js
index f2fa80e223130261383ce788b5f2731b1f04b171..413eb790e9c8a3650112c2b337ca98524e44a66f 100644
--- a/warm-flow-ui/src/components/design/classics/js/parallel.js
+++ b/warm-flow-ui/src/components/design/classics/js/parallel.js
@@ -1,5 +1,5 @@
 import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core'
-import {setCommonStyle} from "@/components/design/common/js/tool.js";
+import {setCommonStyle, applyClassicDesignColor} from "@/components/design/common/js/tool.js";
 
 class ParallelModel extends PolygonNodeModel {
   static extendKey = 'ParallelModel';
@@ -25,6 +25,8 @@ class ParallelModel extends PolygonNodeModel {
 
   getNodeStyle() {
     const style = setCommonStyle(super.getNodeStyle(), this.properties, "node");
+    // 设计态语义色：并行网关用青色（并发）
+    applyClassicDesignColor(style, this.properties, '19,194,194');
     style.fill = style._statusRgba ? style._statusRgba(0.06) : 'rgba(166,178,189,0.06)';
     style.strokeWidth = 2;
     return style;
@@ -49,7 +51,7 @@ class ParallelView extends PolygonNode {
         // 定义滤镜
         h('defs', {}, [
           h('filter', { id: `gw-shadow-p-${model.id}`, x: '-30%', y: '-30%', width: '160%', height: '160%' }, [
-            h('feDropShadow', { dx: 0, dy: 2, stdDeviation: 3, floodColor: '#000', floodOpacity: 0.07 }),
+            h('feDropShadow', { dx: 0, dy: 2, stdDeviation: 3, floodColor: '#000', floodOpacity: 0.05 }),
           ]),
         ]),
         // 菱形底座
diff --git a/warm-flow-ui/src/components/design/classics/js/serial.js b/warm-flow-ui/src/components/design/classics/js/serial.js
index f69bcddc51dbafb8665f8a446b262eab0c942d06..48771bcb66d75f6937f5981a1d3a938efb2624c0 100644
--- a/warm-flow-ui/src/components/design/classics/js/serial.js
+++ b/warm-flow-ui/src/components/design/classics/js/serial.js
@@ -1,5 +1,5 @@
 import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core'
-import {setCommonStyle} from "@/components/design/common/js/tool.js";
+import {setCommonStyle, applyClassicDesignColor} from "@/components/design/common/js/tool.js";
 
 class SerialModel extends PolygonNodeModel {
   static extendKey = 'SerialModel';
@@ -25,6 +25,8 @@ class SerialModel extends PolygonNodeModel {
 
   getNodeStyle() {
     const style = setCommonStyle(super.getNodeStyle(), this.properties, "node");
+    // 设计态语义色：互斥网关用橙色（排他抉择）
+    applyClassicDesignColor(style, this.properties, '245,158,11');
     style.fill = style._statusRgba ? style._statusRgba(0.06) : 'rgba(166,178,189,0.06)';
     style.strokeWidth = 2;
     return style;
@@ -48,7 +50,7 @@ class SerialView extends PolygonNode {
         // 定义滤镜
         h('defs', {}, [
           h('filter', { id: `gw-shadow-${model.id}`, x: '-30%', y: '-30%', width: '160%', height: '160%' }, [
-            h('feDropShadow', { dx: 0, dy: 2, stdDeviation: 3, floodColor: '#000', floodOpacity: 0.07 }),
+            h('feDropShadow', { dx: 0, dy: 2, stdDeviation: 3, floodColor: '#000', floodOpacity: 0.05 }),
           ]),
         ]),
         // 菱形底座
diff --git a/warm-flow-ui/src/components/design/classics/js/sidebarIcons.js b/warm-flow-ui/src/components/design/classics/js/sidebarIcons.js
index f32ea87242db64db59fd3e43fb85fa3ab3dafa93..69b5a539270f0501df02977fe94a942cf1ab3c40 100644
--- a/warm-flow-ui/src/components/design/classics/js/sidebarIcons.js
+++ b/warm-flow-ui/src/components/design/classics/js/sidebarIcons.js
@@ -1,13 +1,22 @@
 /**
  * 侧边栏节点图标定义
- * 形状与画布节点 (classics/js/*.js) 保持完全一致
+ * 形状与画布节点 (classics/js/*.js) 保持完全一致；
+ * 配色与画布「设计态语义色」(applyClassicDesignColor) 一致，避免发灰、提升辨识度。
  * 所有图标均为内联 SVG 字符串，可直接通过 v-html 渲染
  */
 
-// 公共颜色（与画布节点状态色一致）
-const SC = '166,178,189' // status color RGB
-const STROKE = `rgb(${SC})`
-const STROKE_RGBA = (a) => `rgba(${SC},${a})`
+/** 各节点类型语义色（与画布设计态完全一致） */
+const COLOR = {
+  start: '103,194,58',     // 绿：起点
+  between: '64,158,255',   // 蓝：审批
+  end: '245,108,108',      // 红：终止
+  serial: '245,158,11',    // 橙：互斥
+  parallel: '19,194,194',  // 青：并行
+  inclusive: '146,84,222', // 紫：包含
+}
+
+const stroke = (rgb) => `rgb(${rgb})`
+const rgba = (rgb, a) => `rgba(${rgb},${a})`
 
 /** 图标背景色 — 用 CSS 变量支持暗黑模式自动切换 */
 const ICON_BG = 'var(--wf-icon-bg, #ffffff)'
@@ -19,11 +28,11 @@ export const startIcon = `
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <radialGradient id="si-core" cx="35%" cy="35%" r="65%">
-      <stop offset="0%" stop-color="${STROKE}"/>
-      <stop offset="70%" stop-color="${STROKE_RGBA(0.4)}"/>
+      <stop offset="0%" stop-color="${stroke(COLOR.start)}"/>
+      <stop offset="70%" stop-color="${rgba(COLOR.start, 0.4)}"/>
     </radialGradient>
   </defs>
-  <circle cx="50" cy="50" r="42" fill="${ICON_BG}" stroke="${STROKE}" stroke-width="2.5"/>
+  <circle cx="50" cy="50" r="42" fill="${ICON_BG}" stroke="${stroke(COLOR.start)}" stroke-width="2.5"/>
   <circle cx="50" cy="50" r="30" fill="url(#si-core)"/>
 </svg>`
 
@@ -32,11 +41,11 @@ export const startIcon = `
  */
 export const betweenIcon = `
 <svg viewBox="0 0 100 80" xmlns="http://www.w3.org/2000/svg">
-  <rect x="5" y="5" width="90" height="70" rx="8" fill="${ICON_BG}" stroke="${STROKE}" stroke-width="1.5"/>
+  <rect x="5" y="5" width="90" height="70" rx="8" fill="${ICON_BG}" stroke="${stroke(COLOR.between)}" stroke-width="1.5"/>
   <!-- 左上角审批小图标（放大，偏右下） -->
-  <rect x="12" y="10" width="32" height="26" rx="5" ry="5" fill="${STROKE_RGBA(0.08)}" stroke="${STROKE}" stroke-width="1.2"/>
-  <circle cx="28" cy="23" r="5.5" fill="${STROKE_RGBA(0.15)}" stroke="${STROKE}" stroke-width="1"/>
-  <path d="M24 23l4 4l6-6" fill="none" stroke="${STROKE}" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter"/>
+  <rect x="12" y="10" width="32" height="26" rx="5" ry="5" fill="${rgba(COLOR.between, 0.08)}" stroke="${stroke(COLOR.between)}" stroke-width="1.2"/>
+  <circle cx="28" cy="23" r="5.5" fill="${rgba(COLOR.between, 0.15)}" stroke="${stroke(COLOR.between)}" stroke-width="1"/>
+  <path d="M24 23l4 4l6-6" fill="none" stroke="${stroke(COLOR.between)}" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter"/>
 </svg>`
 
 /**
@@ -44,8 +53,8 @@ export const betweenIcon = `
  */
 export const endIcon = `
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="50" cy="50" r="42" fill="${ICON_BG}" stroke="${STROKE}" stroke-width="3.5"/>
-  <circle cx="50" cy="50" r="30" fill="none" stroke="${STROKE_RGBA(0.25)}" stroke-width="1"/>
+  <circle cx="50" cy="50" r="42" fill="${ICON_BG}" stroke="${stroke(COLOR.end)}" stroke-width="3.5"/>
+  <circle cx="50" cy="50" r="30" fill="none" stroke="${rgba(COLOR.end, 0.25)}" stroke-width="1"/>
 </svg>`
 
 // ========== 网关节点公共部分 ==========
@@ -58,14 +67,14 @@ const gwRect = `<rect x="8" y="8" width="34" height="34" rx="5" transform="rotat
  */
 export const serialIcon = `
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
-  ${gwRect} fill="${ICON_BG}" stroke="${STROKE}" stroke-width="2"/>
+  ${gwRect} fill="${ICON_BG}" stroke="${stroke(COLOR.serial)}" stroke-width="2"/>
   <!-- X 图标（直线，无圆角端点） -->
-  <path d="M17 17 L33 33 M33 17 L17 33" fill="none" stroke="${STROKE}" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="miter"/>
+  <path d="M17 17 L33 33 M33 17 L17 33" fill="none" stroke="${stroke(COLOR.serial)}" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="miter"/>
   <!-- 四端装饰圆点 -->
-  <circle cx="14.5" cy="14.5" r="1.3" fill="${STROKE}"/>
-  <circle cx="34.5" cy="14.5" r="1.3" fill="${STROKE}"/>
-  <circle cx="34.5" cy="34.5" r="1.3" fill="${STROKE}"/>
-  <circle cx="14.5" cy="34.5" r="1.3" fill="${STROKE}"/>
+  <circle cx="14.5" cy="14.5" r="1.3" fill="${stroke(COLOR.serial)}"/>
+  <circle cx="34.5" cy="14.5" r="1.3" fill="${stroke(COLOR.serial)}"/>
+  <circle cx="34.5" cy="34.5" r="1.3" fill="${stroke(COLOR.serial)}"/>
+  <circle cx="14.5" cy="34.5" r="1.3" fill="${stroke(COLOR.serial)}"/>
 </svg>`
 
 /**
@@ -73,15 +82,15 @@ export const serialIcon = `
  */
 export const parallelIcon = `
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
-  ${gwRect} fill="${ICON_BG}" stroke="${STROKE}" stroke-width="2"/>
+  ${gwRect} fill="${ICON_BG}" stroke="${stroke(COLOR.parallel)}" stroke-width="2"/>
   <!-- 十字图标（直线） -->
-  <path d="M15 25 L35 25" fill="none" stroke="${STROKE}" stroke-width="3" stroke-linecap="square"/>
-  <path d="M25 15 L25 35" fill="none" stroke="${STROKE}" stroke-width="3" stroke-linecap="square"/>
+  <path d="M15 25 L35 25" fill="none" stroke="${stroke(COLOR.parallel)}" stroke-width="3" stroke-linecap="square"/>
+  <path d="M25 15 L25 35" fill="none" stroke="${stroke(COLOR.parallel)}" stroke-width="3" stroke-linecap="square"/>
   <!-- 四端装饰圆点 -->
-  <circle cx="25" cy="12" r="1.5" fill="${STROKE}"/>
-  <circle cx="38" cy="25" r="1.5" fill="${STROKE}"/>
-  <circle cx="25" cy="38" r="1.5" fill="${STROKE}"/>
-  <circle cx="12" cy="25" r="1.5" fill="${STROKE}"/>
+  <circle cx="25" cy="12" r="1.5" fill="${stroke(COLOR.parallel)}"/>
+  <circle cx="38" cy="25" r="1.5" fill="${stroke(COLOR.parallel)}"/>
+  <circle cx="25" cy="38" r="1.5" fill="${stroke(COLOR.parallel)}"/>
+  <circle cx="12" cy="25" r="1.5" fill="${stroke(COLOR.parallel)}"/>
 </svg>`
 
 /**
@@ -89,12 +98,12 @@ export const parallelIcon = `
  */
 export const inclusiveIcon = `
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
-  ${gwRect} fill="${ICON_BG}" stroke="${STROKE}" stroke-width="2"/>
+  ${gwRect} fill="${ICON_BG}" stroke="${stroke(COLOR.inclusive)}" stroke-width="2"/>
   <!-- 同心双圆 -->
-  <circle cx="25" cy="25" r="11" fill="none" stroke="${STROKE}" stroke-width="2"/>
-  <circle cx="25" cy="25" r="5.5" fill="${STROKE_RGBA(0.15)}" stroke="${STROKE}" stroke-width="1.5"/>
+  <circle cx="25" cy="25" r="11" fill="none" stroke="${stroke(COLOR.inclusive)}" stroke-width="2"/>
+  <circle cx="25" cy="25" r="5.5" fill="${rgba(COLOR.inclusive, 0.15)}" stroke="${stroke(COLOR.inclusive)}" stroke-width="1.5"/>
   <!-- 中心点缀 -->
-  <circle cx="25" cy="25" r="1.8" fill="${STROKE}"/>
+  <circle cx="25" cy="25" r="1.8" fill="${stroke(COLOR.inclusive)}"/>
 </svg>`
 
 /**
diff --git a/warm-flow-ui/src/components/design/classics/js/start.js b/warm-flow-ui/src/components/design/classics/js/start.js
index eedc6ac15988fbf2d98bdd868e2f7af9f41ead3d..02a286faec7c399435148f386f1738d89318449d 100644
--- a/warm-flow-ui/src/components/design/classics/js/start.js
+++ b/warm-flow-ui/src/components/design/classics/js/start.js
@@ -1,5 +1,5 @@
 import { CircleNode, CircleNodeModel, h } from "@logicflow/core";
-import {setCommonStyle} from "@/components/design/common/js/tool.js";
+import {setCommonStyle, applyClassicDesignColor} from "@/components/design/common/js/tool.js";
 
 class StartModel extends CircleNodeModel {
 
@@ -9,7 +9,9 @@ class StartModel extends CircleNodeModel {
   }
 
   getNodeStyle() {
-    return setCommonStyle(super.getNodeStyle(), this.properties, "node");
+    const style = setCommonStyle(super.getNodeStyle(), this.properties, "node");
+    // 设计态语义色：开始节点用绿色（起点 / 生效）
+    return applyClassicDesignColor(style, this.properties, '103,194,58');
   }
 }
 
@@ -41,17 +43,17 @@ class StartView extends CircleNode {
           h('stop', { offset: '0%', stopColor: isDark ? '#252830' : '#ffffff' }),
           h('stop', { offset: '100%', stopColor: isDark ? '#181a20' : '#f0f2f5' }),
         ]),
-        // 外发光滤镜
+        // 外发光滤镜（柔和、不抢眼）
         h('filter', { id: `start-glow-${model.id}`, x: '-50%', y: '-50%', width: '200%', height: '200%' }, [
-          h('feGaussianBlur', { stdDeviation: '3', result: 'blur' }),
-          h('feFlood', { floodColor: `rgb(${sc})`, floodOpacity: 0.25, result: 'color' }),
+          h('feGaussianBlur', { stdDeviation: '2', result: 'blur' }),
+          h('feFlood', { floodColor: `rgb(${sc})`, floodOpacity: 0.14, result: 'color' }),
           h('feComposite', { in: 'color', in2: 'blur', operator: 'in' }),
         ]),
       ]),
-      // 外层发光效果（半透明大圆）
+      // 外层发光效果（半透明大圆，柔和不抢眼）
       h('circle', {
-        cx: x, cy: y, r: r + 6,
-        fill: `rgba(${sc}, ${isDark ? 0.10 : 0.06})`,
+        cx: x, cy: y, r: r + 5,
+        fill: `rgba(${sc}, ${isDark ? 0.07 : 0.035})`,
       }),
       // 主外环（渐变描边 + 暗黑适配背景）
       h('circle', {
diff --git a/warm-flow-ui/src/components/design/common/js/tool.js b/warm-flow-ui/src/components/design/common/js/tool.js
index 2c93d4dda8e622df4b5ede0582400550b862e6ef..6237f2f4ff23361ab9ae5590471371735154f472 100644
--- a/warm-flow-ui/src/components/design/common/js/tool.js
+++ b/warm-flow-ui/src/components/design/common/js/tool.js
@@ -302,6 +302,38 @@ export const setCommonStyle = (style, properties, nodeType, type) => {
   return style;
 }
 
+/**
+ * 经典模式「设计态」语义色增强
+ *
+ * 设计器里节点没有运行状态（status 为空），原本统一渲染成中性灰（notDoneColor），整体偏灰、辨识度低。
+ * 这里在「设计器页面内 + 节点无在办/已办状态」时，按节点类型赋予清爽的语义色（开始绿 / 审批蓝 / 结束红 / 网关橙青紫），
+ * 让各类节点一眼可辨，同时把发灰的投影替换成同色系柔和阴影。
+ *
+ * 安全边界（不破坏既有契约）：
+ * - 仅在设计器页面生效（window.__WF_FLOW_DESIGN_MODE__）：设计器内一律用新版语义色，不再判断节点运行状态；
+ * - 业务侧渲染的流程实例进度图（非设计器）不受影响，继续沿用后端 chartStatusColor 的状态语义；
+ * - 仅经典模式节点调用本函数，仿钉钉模式不调用、行为完全不变。
+ *
+ * @param {Object} style setCommonStyle 处理后的样式对象
+ * @param {Object} properties 节点 / 边属性
+ * @param {string} rgb 该节点类型的语义色，形如 '64,158,255'
+ * @returns {Object} 处理后的样式对象
+ */
+export const applyClassicDesignColor = (style, properties, rgb) => {
+  const inDesigner = typeof window !== 'undefined' && window.__WF_FLOW_DESIGN_MODE__;
+  // 仅设计器页面用新版语义色；非设计器保持 setCommonStyle 的状态语义色不变
+  if (!inDesigner) {
+    return style;
+  }
+  style.stroke = `rgb(${rgb})`;
+  style._statusColorRGB = rgb;
+  style._statusHex = `rgb(${rgb})`;
+  style._statusRgba = (alpha) => `rgba(${rgb}, ${alpha})`;
+  // 同色系柔和阴影，替代原先发灰的投影
+  style.shadow = `drop-shadow(0 2px 6px rgba(${rgb}, 0.14)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04))`;
+  return style;
+};
+
 export function getPreviousNodes(nodes, skips, nowNodeCode) {
   let previousCode = getPreviousCode(skips, nowNodeCode, new Set());
   // 使用 Set 去重后再转换为数组
diff --git a/warm-flow-ui/src/components/design/common/vue/DiagramSidebar.vue b/warm-flow-ui/src/components/design/common/vue/DiagramSidebar.vue
index 3f5df1f4f1f09b39b10dc33fe88735f43505c657..4751a4f07206549d51248ce1de3cb32ec012c018 100644
--- a/warm-flow-ui/src/components/design/common/vue/DiagramSidebar.vue
+++ b/warm-flow-ui/src/components/design/common/vue/DiagramSidebar.vue
@@ -207,13 +207,13 @@ function handleDragInNode(item) {
   }
 }
 
-/* 各类型节点的图标底色 */
+/* 各类型节点的图标底色（与图标语义色呼应的淡色） */
 .item-start .item-icon-wrap   { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
 .item-between .item-icon-wrap { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
 .item-end .item-icon-wrap     { background: linear-gradient(135deg, #fef2f2, #fee2e2); }
-.item-serial .item-icon-wrap  { background: linear-gradient(135deg, #fafafa, #f1f5f9); }
-.item-parallel .item-icon-wrap{ background: linear-gradient(135deg, #fafafa, #f1f5f9); }
-.item-inclusive .item-icon-wrap { background: linear-gradient(135deg, #fafafa, #f1f5f9); }
+.item-serial .item-icon-wrap  { background: linear-gradient(135deg, #fffbeb, #fef3c7); }
+.item-parallel .item-icon-wrap{ background: linear-gradient(135deg, #ecfeff, #cffafe); }
+.item-inclusive .item-icon-wrap { background: linear-gradient(135deg, #faf5ff, #f3e8ff); }
 
 /* ====== 标签文字 ====== */
 .item-label {
diff --git a/warm-flow-ui/src/components/design/common/vue/baseInfo.vue b/warm-flow-ui/src/components/design/common/vue/baseInfo.vue
index cc9c0f3df155bf807872522bd4702bee0640b476..849780d65ec51dac84812ae55a94b608c685b6fc 100644
--- a/warm-flow-ui/src/components/design/common/vue/baseInfo.vue
+++ b/warm-flow-ui/src/components/design/common/vue/baseInfo.vue
@@ -4,11 +4,11 @@
       <div class="form-section">
         <div class="section-title">基本配置</div>
         <el-form-item label="流程编码" prop="flowCode">
-          <el-input v-model="form.flowCode" placeholder="请输入流程编码" maxlength="40" show-word-limit />
+          <el-input v-model="form.flowCode" placeholder="请输入流程编码" maxlength="40" />
         </el-form-item>
 
         <el-form-item label="流程名称" prop="flowName">
-          <el-input v-model="form.flowName" placeholder="请输入流程名称" maxlength="100" show-word-limit @input="nameChange" />
+          <el-input v-model="form.flowName" placeholder="请输入流程名称" maxlength="100" @input="nameChange" />
         </el-form-item>
 
         <el-form-item label="设计器模型" prop="modelValue">
@@ -16,7 +16,7 @@
             <el-radio label="CLASSICS" class="radio-card">
               <div class="radio-card-content">
                 <div class="radio-card-icon">
-                  <el-icon :size="22"><Monitor /></el-icon>
+                  <svg-icon icon-class="classic" class="model-icon"/>
                 </div>
                 <div class="radio-card-info">
                   <div class="radio-card-title">经典模型</div>
@@ -27,7 +27,7 @@
             <el-radio label="MIMIC" class="radio-card">
               <div class="radio-card-content">
                 <div class="radio-card-icon">
-                  <el-icon :size="22"><Connection /></el-icon>
+                  <svg-icon icon-class="mimic" class="model-icon"/>
                 </div>
                 <div class="radio-card-info">
                   <div class="radio-card-title">仿钉钉模型</div>
@@ -51,34 +51,18 @@
         </el-form-item>
 
         <el-form-item label="自定义表单" prop="formCustom">
-          <el-radio-group v-model="form.formCustom" class="radio-card-group radio-card-group--compact">
-            <el-radio label="N" class="radio-card radio-card--sm">
-              <div class="radio-card-content">
-                <div class="radio-card-icon radio-card-icon--sm">
-                  <el-icon :size="18"><Document /></el-icon>
-                </div>
-                <div class="radio-card-info">
-                  <div class="radio-card-title">否</div>
-                  <div class="radio-card-desc">填写页面路径</div>
-                </div>
-              </div>
-            </el-radio>
-            <el-radio label="Y" class="radio-card radio-card--sm">
-              <div class="radio-card-content">
-                <div class="radio-card-icon radio-card-icon--sm">
-                  <el-icon :size="18"><EditPen /></el-icon>
-                </div>
-                <div class="radio-card-info">
-                  <div class="radio-card-title">是</div>
-                  <div class="radio-card-desc">选择自定义表单</div>
-                </div>
-              </div>
-            </el-radio>
-          </el-radio-group>
+          <el-switch
+            v-model="form.formCustom"
+            size="large"
+            active-value="Y"
+            inactive-value="N"
+            active-text="是"
+            inactive-text="否" />
+          <span class="form-tip">{{ form.formCustom === 'Y' ? '选择已配置的自定义表单' : '填写审批页面路径' }}</span>
         </el-form-item>
 
         <el-form-item label="表单路径" prop="formPath" v-if="form.formCustom === 'N'">
-          <el-input v-model="form.formPath" placeholder="请输入审批表单路径" maxlength="100" show-word-limit/>
+          <el-input v-model="form.formPath" placeholder="请输入审批表单路径" maxlength="100"/>
         </el-form-item>
 
         <el-form-item label="表单唯一标识" prop="formPath" v-else-if="form.formCustom === 'Y'">
@@ -95,8 +79,8 @@
       <div class="form-section">
         <div class="section-title">监听器配置</div>
         <el-form-item prop="listenerRows" class="listenerItem">
-          <el-table :data="form.listenerRows" style="width: 100%">
-            <el-table-column prop="listenerType" :width="isMobile ? 60 : 150" label="类型">
+          <el-table :data="form.listenerRows" style="width: 100%" empty-text="暂无监听器，点击下方「增加行」添加">
+            <el-table-column prop="listenerType" :width="isMobile ? 60 : 160" label="类型">
               <template #default="scope">
                 <el-form-item :prop="`listenerRows.${scope.$index}.listenerType`" :rules="rules.listenerType">
                   <el-select v-model="scope.row.listenerType" placeholder="请选择类型">
@@ -130,13 +114,13 @@
               </template>
             </el-table-column>
 
-            <el-table-column label="操作" width="65" v-if="!disabled">
+            <el-table-column label="操作" width="65" align="center" v-if="!disabled">
               <template #default="scope">
-                <el-button size="small" type="danger" icon="Delete" @click="handleDeleteRow(scope.$index)" />
+                <el-button link size="small" type="danger" icon="Delete" @click="handleDeleteRow(scope.$index)" />
               </template>
             </el-table-column>
           </el-table>
-          <el-button v-if="!disabled" class="add-row-btn" type="primary" @click="handleAddRow">增加行</el-button>
+          <el-button v-if="!disabled" class="add-row-btn" @click="handleAddRow">增加行</el-button>
         </el-form-item>
       </div>
     </el-form>
@@ -162,7 +146,6 @@ onMounted(() => {
   // 移动端新增（无definitionId）时强制默认仿钉钉
   if (isMobile.value && !props.definitionId) {
     form.value.modelValue = 'MIMIC';
-    proxy.$emit('update:model-value');
   }
 });
 
@@ -341,23 +324,15 @@ getListenerList()
 </script>
 
 <style scoped lang="scss">
-/* ========== 关键帧动画 ========== */
-@keyframes pulse-soft {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.2); }
-  50% { box-shadow: 0 0 0 6px rgba(64, 158, 255, 0); }
-}
-
-@keyframes check-in {
-  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
-  60% { transform: scale(1.2) rotate(-45deg); }
-  100% { transform: scale(1) rotate(-45deg); opacity: 1; }
-}
-
 /* ========== 1. 容器背景层 ========== */
 .app-container {
   padding: 0;
   background-color: var(--wf-bg-white, #fff);
   min-height: 100%;
+  /* iOS / 现代质感：系统字体栈 + 字形平滑 */
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   html.dark & {
     background-color: var(--wf-bg-color, #141414);
   }
@@ -372,91 +347,57 @@ getListenerList()
   border-top: 0;
 }
 
-/* ========== 2. 卡片区块 ========== */
+/* ========== 2. 扁平分区（去内层卡片，外层壳已提供容器） ========== */
 .form-section {
   position: relative;
-  background: var(--wf-bg-white, #fff);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-radius: var(--wf-radius-lg, 12px);
-  box-shadow: var(--wf-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
-  padding: 24px 32px 24px 35px;
-  margin-bottom: 16px;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  overflow: hidden;
-
-  /* 左侧渐变装饰条 */
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: linear-gradient(180deg, var(--wf-primary, #409eff), var(--wf-primary-dark, #2b7de9));
-    border-radius: var(--wf-radius-lg, 12px) 0 0 var(--wf-radius-lg, 12px);
-  }
+  background: transparent;
+  padding: 0;
+  margin-bottom: 32px;
+  overflow: visible;
 
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--wf-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.1));
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
 /* ========== 3. 区块标题 ========== */
 .section-title {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--wf-text-primary, #303133);
-  padding: 0 0 16px 0;
+  letter-spacing: 0.3px;
+  padding: 0 0 14px 0;
   margin-bottom: 24px;
   border-bottom: 1px solid var(--wf-border-lighter, #ebeef5);
   display: flex;
   align-items: center;
-
-  &::before {
-    content: '';
-    display: inline-block;
-    width: 4px;
-    height: 18px;
-    background: linear-gradient(180deg, var(--wf-primary, #409eff), var(--wf-primary-dark, #2b7de9));
-    border-radius: 2px;
-    margin-right: 10px;
-    flex-shrink: 0;
-  }
-
-  &::after {
-    content: '';
-    display: inline-block;
-    margin-left: 10px;
-    padding: 2px 0;
-    flex: 0;
-    height: 20px;
-    border-radius: var(--wf-radius-round, 20px);
-  }
 }
 
 /* ========== 4. 表单项增强 ========== */
 :deep(.el-form-item) {
-  margin-bottom: 22px;
+  margin-bottom: 24px;
 }
 
 :deep(.el-form-item__label) {
   font-weight: 600;
   color: var(--wf-text-primary, #303133);
-  letter-spacing: 0.5px;
-  /* 固定 label 宽度，按最长"表单唯一标识"(6字)对齐 */
+  /* 右对齐：label 贴输入框侧对齐，红星紧贴首字（EP 经典表单样式） */
   width: 110px !important;
   min-width: 110px !important;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+  /* 与 el-input 默认高度(32px)对齐，保证 label 与右侧控件垂直居中 */
+  height: 32px;
+}
 
 /* 错误提示增加上下间距 - PC端/平板端 */
-::deep(.el-form-item__error) {
+:deep(.el-form-item__error) {
   padding-top: 6px;
   padding-bottom: 4px;
 }
-  text-align: right;
-  justify-content: flex-end;
-}
 
 /* 右侧内容区：统一左对齐 */
 ::deep(.el-form-item__content) {
@@ -467,19 +408,33 @@ getListenerList()
 :deep(.el-input__wrapper),
 :deep(.el-select .el-input__wrapper),
 :deep(.el-textarea__inner) {
-  transition: all 0.3s ease;
-  border-radius: var(--wf-radius-sm, 4px);
+  /* 默认白底 + 浅边框：未填写也清爽，不再用发灰的填充底 */
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  border-radius: 10px;
+  background-color: var(--wf-bg-white, #fff);
+  box-shadow: none;
+  border: 1px solid var(--wf-border-light, #dcdfe6);
   position: relative;
 
   &:hover {
-    box-shadow: 0 0 0 1px var(--wf-primary, #409eff) inset;
+    border-color: var(--wf-primary, #409eff);
   }
 
+  /* focus：主色描边 + 柔和光环 */
   &.is-focus,
   &:focus {
-    box-shadow: 0 0 0 1px var(--wf-primary, #409eff) inset, 0 0 0 3px rgba(64, 158, 255, 0.12);
+    background-color: var(--wf-bg-white, #fff);
+    border-color: var(--wf-primary, #409eff);
+    box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.12);
   }
+}
 
+/* 校验失败态：统一红边 + 红光环，优先级压过 focus 的蓝色，避免红蓝混色 */
+:deep(.el-form-item.is-error .el-input__wrapper),
+:deep(.el-form-item.is-error .el-input__wrapper.is-focus),
+:deep(.el-form-item.is-error .el-select .el-input__wrapper) {
+  border-color: var(--wf-danger, #f56c6c);
+  box-shadow: 0 0 0 4px rgba(245, 108, 108, 0.12);
 }
 
 /* 禁用态暗黑模式覆盖（已发布/失效状态）— 完全全局选择器，避开 scoped 编译 */
@@ -491,29 +446,6 @@ getListenerList()
   border-color: #3a3e48 !important;
 }
 
-/* 输入框底部渐变线（hover） */
-:deep(.el-input) {
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--wf-primary, #409eff), var(--wf-primary-dark, #2b7de9));
-    border-radius: 0 0 var(--wf-radius-sm, 4px) var(--wf-radius-sm, 4px);
-    transition: width 0.3s ease, left 0.3s ease;
-    z-index: 1;
-  }
-
-  &:hover::after {
-    width: 100%;
-    left: 0;
-  }
-}
-
 /* ========== 5. 卡片式 Radio 选择器 ========== */
 .radio-card-group {
   display: flex;
@@ -528,12 +460,13 @@ getListenerList()
 :deep(.radio-card) {
   position: relative;
   border: 1.5px solid var(--wf-border-color, #dcdfe6);
-  border-radius: var(--wf-radius, 8px);
-  padding: 14px 18px;
+  border-radius: var(--wf-radius-lg, 12px);
+  padding: 16px;
   margin-right: 0;
   height: auto;
   background: var(--wf-bg-white, #fff);
-  transition: all 0.25s ease;
+  box-shadow: var(--wf-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.04));
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -541,7 +474,7 @@ getListenerList()
   &:hover {
     border-color: var(--wf-primary, #409eff);
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+    box-shadow: var(--wf-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
   }
 
   /* 隐藏原生 radio 圆点 */
@@ -565,11 +498,10 @@ getListenerList()
     font-weight: normal;
   }
 
-  /* 选中态 */
+  /* 选中态：边框 + 浅底 + 原生 radio 圆点，单一指示，去渐变/发光/角标 */
   &.is-checked {
     border-color: var(--wf-primary, #409eff);
     background: var(--wf-primary-light, #ecf5ff);
-    box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2), inset 0 0 20px rgba(64, 158, 255, 0.06);
 
     .el-radio__input .el-radio__inner {
       background: var(--wf-primary, #409eff);
@@ -583,29 +515,9 @@ getListenerList()
     .radio-card-icon {
       background: var(--wf-primary, #409eff);
       color: #fff;
-      animation: pulse-soft 2s ease-in-out infinite;
-    }
-
-    /* 选中对勾 */
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 8px;
-      right: 10px;
-      width: 10px;
-      height: 6px;
-      border-left: 2px solid var(--wf-primary, #409eff);
-      border-bottom: 2px solid var(--wf-primary, #409eff);
-      transform: rotate(-45deg);
-      animation: check-in 0.35s ease forwards;
     }
   }
 
-  /* 非选中态隐藏对勾 */
-  &:not(.is-checked)::after {
-    content: none;
-  }
-
   /* 禁用态 */
   &.is-disabled {
     opacity: 0.6;
@@ -648,6 +560,14 @@ getListenerList()
   color: var(--wf-primary, #409eff);
   flex-shrink: 0;
   transition: all 0.25s ease;
+  font-size: 22px;
+}
+
+/* 模型卡线性图标：跟随 radio-card-icon 字号与颜色（选中态自动变白） */
+.model-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.1em;
 }
 
 .radio-card-icon--sm {
@@ -670,10 +590,10 @@ getListenerList()
 }
 
 .radio-card-desc {
-  font-size: 11px;
-  color: var(--wf-text-placeholder, #c0c4cc);
+  font-size: 12px;
+  color: var(--wf-text-secondary, #909399);
   line-height: 1.4;
-  margin-top: 2px;
+  margin-top: 4px;
 }
 
 /* ========== 6. 监听器表格 ========== */
@@ -683,8 +603,8 @@ getListenerList()
   border: 1px solid var(--wf-border-lighter, #ebeef5);
 
   .el-table__header-wrapper th {
-    background: linear-gradient(135deg, var(--wf-primary-lighter, #f0f7ff), var(--wf-primary-light, #ecf5ff)) !important;
-    color: var(--wf-text-primary, #303133);
+    background: var(--wf-bg-white, #fff) !important;
+    color: var(--wf-text-regular, #606266);
     font-weight: 600;
     font-size: 13px;
   }
@@ -720,17 +640,29 @@ getListenerList()
     }
   }
 
-  /* 删除按钮红色渐变 hover */
-  .el-button--danger {
-    transition: all 0.25s ease;
+  /* 删除按钮：无实底，仅红色图标，hover 浅红圆底 */
+  .el-button--danger.is-link {
+    color: var(--wf-danger, #f56c6c);
+    padding: 5px;
+    height: auto;
+    border: none;
+    transition: all 0.2s ease;
 
     &:hover {
-      background: linear-gradient(135deg, var(--wf-danger, #f56c6c), #e04848) !important;
-      border-color: transparent !important;
-      color: #fff !important;
-      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.35);
+      color: #e04848;
+      background: rgba(245, 108, 108, 0.12) !important;
+      border-radius: 8px;
     }
   }
+
+  /* 表格内控件默认透明：整行读作干净白底，hover 轻填充、focus 才显白底+蓝环 */
+  .el-input__wrapper,
+  .el-select .el-input__wrapper {
+    background-color: transparent;
+
+    &:hover { background-color: rgba(118, 128, 150, 0.07); }
+    &.is-focus { background-color: var(--wf-bg-white, #fff); }
+  }
 }
 
 /* ========== 7. 增加行按钮 ========== */
@@ -740,7 +672,7 @@ getListenerList()
   border: 1.5px dashed var(--wf-primary, #409eff) !important;
   color: var(--wf-primary, #409eff) !important;
   background: transparent !important;
-  border-radius: var(--wf-radius, 8px);
+  border-radius: 10px;
   transition: all 0.3s ease;
   height: 40px;
   letter-spacing: 2px;
@@ -788,21 +720,28 @@ getListenerList()
   }
 }
 
-/* 表单项警告提示样式 */
+/* 表单项警示提示样式（amber 级，非错误红） */
 :deep(.el-form-item) {
   .radio-card-warning {
     margin-top: 8px;
-    padding: 8px 12px;
-    background: var(--wf-warning-light, #fef0f0);
-    border: 1px solid var(--wf-warning-border, #fbc4c4);
+    padding: 6px 10px;
+    background: var(--wf-warning-lighter, #fdf6ec);
     border-radius: var(--wf-radius-sm, 4px);
     font-size: 12px;
-    color: var(--wf-danger, #f56c6c);
+    color: var(--wf-warning, #e6a23c);
     line-height: 1.5;
     width: 100%;
   }
 }
 
+/* 开关 / 字段旁的轻提示 */
+.form-tip {
+  margin-left: 12px;
+  font-size: 12px;
+  color: var(--wf-text-secondary, #909399);
+  line-height: 1.5;
+}
+
 /* ========== 8. 暗黑模式增强 ========== */
 :global(html.dark) {
   .app-container {
@@ -811,11 +750,26 @@ getListenerList()
   }
 }
 
+/* iOS 填充式输入框：暗黑覆盖（优先级需高于全局 html.dark .el-input__wrapper） */
+:global(html.dark) :deep(.el-input__wrapper),
+:global(html.dark) :deep(.el-select .el-input__wrapper) {
+  background-color: rgba(255, 255, 255, 0.06);
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+:global(html.dark) :deep(.el-input__wrapper:hover),
+:global(html.dark) :deep(.el-select .el-input__wrapper:hover) {
+  background-color: rgba(255, 255, 255, 0.10);
+}
+:global(html.dark) :deep(.el-input__wrapper.is-focus),
+:global(html.dark) :deep(.el-input__wrapper:focus) {
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: var(--wf-primary, #409eff);
+  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.18);
+}
+
 :global(html.dark) .form-section {
-  background: rgba(31, 31, 31, 0.9);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 0 0 1px var(--wf-border-color, #333333);
+  background: transparent;
 }
 
 :global(html.dark) :deep(.el-table) {
@@ -837,7 +791,6 @@ getListenerList()
 
   &.is-checked {
     background: #1a2744;
-    box-shadow: 0 2px 16px rgba(64,158,255,.25), inset 0 0 24px rgba(64,158,255,.08);
     border-color: #409eff;
     .radio-card-icon { background: #409eff; }
     .radio-card-title { color: #409eff; }
@@ -884,12 +837,7 @@ getListenerList()
   }
 
   .form-section {
-    padding: 16px 20px 16px 22px;
-    margin-bottom: 12px;
-
-    &:hover {
-      transform: none;
-    }
+    margin-bottom: 24px;
   }
 }
 
@@ -904,34 +852,18 @@ getListenerList()
   }
 
   .form-section {
-    padding: 14px 12px 14px 16px;
-    margin-bottom: 10px;
-    border-radius: 8px;
-
-    &:hover {
-      transform: none;
-      box-shadow: var(--wf-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
-    }
-
-    &::before {
-      width: 2.5px;
-    }
+    margin-bottom: 20px;
   }
 
   .section-title {
     font-size: 14px;
     padding-bottom: 10px;
     margin-bottom: 16px;
-
-    &::before {
-      height: 15px;
-      margin-right: 6px;
-    }
   }
 
   :deep(.dialogForm .el-form-item__label),
   :deep(.el-form-item__label) {
-    /* 手机端保持固定宽度，统一对齐 */
+    /* 手机端右对齐，仅收窄宽度 */
     width: 90px !important;
     min-width: 90px !important;
     font-size: 13px;
@@ -1032,10 +964,7 @@ getListenerList()
   .radio-card-icon {
     width: 32px;
     height: 32px;
-
-    .el-icon {
-      font-size: 18px !important;
-    }
+    font-size: 18px;
   }
 
   .radio-card-icon--sm {
@@ -1139,30 +1068,21 @@ getListenerList()
   }
 
   .form-section {
-    padding: 10px 8px 10px 12px;
-    margin-bottom: 8px;
-    border-radius: 6px;
+    margin-bottom: 16px;
   }
 
   .section-title {
     font-size: 13px;
     padding-bottom: 8px;
     margin-bottom: 12px;
-
-    &::before {
-      height: 14px;
-      margin-right: 5px;
-      width: 3px;
-    }
   }
 
   :deep(.dialogForm .el-form-item__label),
   :deep(.el-form-item__label) {
-    /* 超小屏保持固定宽度 */
+    /* 超小屏右对齐 */
     width: 80px !important;
     min-width: 80px !important;
     font-size: 12px;
-    line-height: 1.3;
     text-align: right;
     justify-content: flex-end;
   }
@@ -1217,10 +1137,7 @@ getListenerList()
   .radio-card-icon {
     width: 26px;
     height: 26px;
-
-    .el-icon {
-      font-size: 16px !important;
-    }
+    font-size: 16px;
   }
 
   .radio-card-icon--sm {
diff --git a/warm-flow-ui/src/components/design/common/vue/between.vue b/warm-flow-ui/src/components/design/common/vue/between.vue
index 585686b47d38117ccf81fd58992a2ce2b849d736..cfaf1e65096ccbc7b1bc6863c8f5887140d89ef1 100644
--- a/warm-flow-ui/src/components/design/common/vue/between.vue
+++ b/warm-flow-ui/src/components/design/common/vue/between.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="between">
-    <el-form ref="formRef" class="betweenForm" :model="form" label-width="120px" size="small" :rules="rules" :disabled="disabled" label-position="left">
+    <el-form ref="formRef" class="betweenForm" :model="form" label-width="110px" :rules="rules" :disabled="disabled">
       <!-- 页签区域 -->
       <div class="modern-tabs-wrapper">
         <div class="modern-tabs">
@@ -11,6 +11,7 @@
             :class="{ 'is-active': tabsValue === item.name, 'is-ext-tab': index >= 3 }"
             @click="tabsValue = item.name; handleTabChange(item.name)"
           >
+            <svg class="tab-icon" viewBox="0 0 24 24"><path :d="item.iconPath || TAB_ICONS.ext" fill="currentColor"/></svg>
             <span class="tab-label">{{ item.label }}</span>
             <span v-if="index >= 3" class="tab-ext-tag">扩展</span>
           </div>
@@ -21,14 +22,6 @@
       <div v-show="tabsValue === '1'" class="tabPane">
         <!-- 基础配置卡片 -->
         <div class="base-settings-section">
-          <div class="base-settings-header">
-            <span class="ext-attributes-icon ext-icon-base">
-              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M19 3H5C3.89 3 3 3.89 3 5V19C3 20.11 3.89 21 5 21H19C20.11 21 21 20.11 21 19V5C21 3.89 20.11 3 19 3ZM12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM18 18H6V17C6 14.67 10.33 13.34 12 13.34C13.67 13.34 18 14.67 18 17V18Z" fill="currentColor"/>
-              </svg>
-            </span>
-            <span class="base-settings-title">基础配置</span>
-          </div>
           <div class="base-settings-content">
         <el-form-item label="节点编码：" prop="nodeCode">
           <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
@@ -176,14 +169,6 @@
       <!-- 办理人设置 -->
       <div v-show="tabsValue === '2'" class="tabPane tabPane-full">
         <div class="section-card section-blue">
-          <div class="section-card-header">
-            <span class="section-card-icon">
-              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" fill="currentColor"/>
-              </svg>
-            </span>
-            <span class="section-card-title">办理人设置</span>
-          </div>
           <div class="section-card-body">
               <el-table :data="permissionRows" style="width: 100%;" class="inputGroup handler-table-mobile"
                   :table-layout="isMobile ? 'fixed' : 'auto'"
@@ -196,9 +181,9 @@
                       </template>
                   </el-table-column>
                   <el-table-column prop="handlerName" label="权限名称"></el-table-column>
-                  <el-table-column label="操作" :width="isMobile ? undefined : 42" v-if="!disabled">
+                  <el-table-column label="操作" :width="isMobile ? undefined : 65" align="center" v-if="!disabled">
                       <template #default="scope">
-                          <el-button type="danger" v-if="!disabled" :icon="Delete" @click="delPermission(scope.$index)"/>
+                          <el-button link size="small" type="danger" v-if="!disabled" :icon="Delete" @click="delPermission(scope.$index)"/>
                       </template>
                   </el-table-column>
               </el-table>
@@ -213,17 +198,9 @@
       <!-- 监听器 -->
       <div v-show="tabsValue === '3'" class="tabPane tabPane-full">
         <div class="section-card section-purple">
-          <div class="section-card-header section-purple-header">
-            <span class="section-card-icon section-purple-icon">
-              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M22 6H16V4C16 2.89 15.11 2 14 2H10C8.89 2 8 2.89 8 4V6H2V8H4V19C4 20.11 4.89 21 6 21H18C19.11 21 20 20.11 20 19V8H22V6ZM10 4H14V6H10V4ZM18 19H6V8H18V19ZM10 10H14V17H10V10Z" fill="currentColor"/>
-              </svg>
-            </span>
-            <span class="section-card-title section-purple-title">监听器配置</span>
-          </div>
           <div class="section-card-body">
             <el-table :data="form.listenerRows" style="width: 100%">
-              <el-table-column prop="listenerType" label="类型" width="90">
+              <el-table-column prop="listenerType" label="类型" :width="isMobile ? 60 : 160">
                 <template #default="scope">
                   <el-form-item :prop="'listenerRows.' + scope.$index + '.listenerType'" :rules="rules.listenerType">
                     <el-select v-model="scope.row.listenerType" placeholder="请选择">
@@ -255,9 +232,9 @@
                   </el-form-item>
                 </template>
               </el-table-column>
-              <el-table-column label="操作" width="55" v-if="!disabled">
+              <el-table-column label="操作" width="65" align="center" v-if="!disabled">
                 <template #default="scope">
-                  <el-button type="danger" :icon="Delete" @click="handleDeleteRow(scope.$index)"/>
+                  <el-button link size="small" type="danger" :icon="Delete" @click="handleDeleteRow(scope.$index)"/>
                 </template>
               </el-table-column>
             </el-table>
@@ -289,7 +266,7 @@
 
     <!-- 权限标识：会签票签选择用户 -->
     <el-dialog title="人员选择" v-if="userVisible" v-model="userVisible" :width="isMobile ? '96%' : '80%'" append-to-body
-      :class="{ 'mobile-user-dialog': isMobile }"
+      class="person-select-dialog" :class="{ 'mobile-user-dialog': isMobile }"
     >
       <selectUser v-model:selectUser="form.permissionFlag" v-model:userVisible="userVisible" :permissionRows="permissionRows" @handleUserSelect="handleUserSelect"></selectUser>
     </el-dialog>
@@ -344,10 +321,17 @@ const props = defineProps({
 const tabsValue = ref("1");
 // 节点扩展属性折叠状态（默认收起）
 const baseExtCollapsed = ref(true);
+// Tab 图标（单路径 SVG，viewBox 0 0 24 24，跟随 tab 文字色 currentColor）
+const TAB_ICONS = {
+  base: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z',
+  handler: 'M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z',
+  listener: 'M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z',
+  ext: 'M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z',
+};
 const tabsList = ref([
-  { label: "基础设置", name: "1" },
-  { label: "办理人设置", name: "2" },
-  { label: "监听器", name: "3" },
+  { label: "基础设置", name: "1", iconPath: TAB_ICONS.base },
+  { label: "办理人设置", name: "2", iconPath: TAB_ICONS.handler },
+  { label: "监听器", name: "3", iconPath: TAB_ICONS.listener },
 ]);
 const form = ref(props.modelValue);
 const userVisible = ref(false);
@@ -913,9 +897,9 @@ defineExpose({
   border: 1.5px dashed var(--wf-primary, #409eff) !important;
   color: var(--wf-primary, #409eff) !important;
   background: transparent !important;
-  border-radius: var(--wf-radius, 8px);
+  border-radius: 10px;
   transition: all 0.3s ease;
-  height: 38px;
+  height: 40px;
   letter-spacing: 2px;
   font-weight: 500;
   display: flex;
@@ -943,36 +927,83 @@ defineExpose({
   }
 }
 
-/* 蓝色主题 - 办理人 */
+/* ========== 人员选择弹窗：iOS 风格外壳 ==========
+   弹窗为 append-to-body，不在组件作用域内，必须用扁平的 :global(完整选择器)。
+   不能写成 :global(.person-select-dialog) { .el-dialog__header {} } 这种「:global 内再嵌套子选择器」，
+   否则 Vue 会给内层注入 scoped 属性而失效，且头部声明会漏到弹窗根节点、把 .el-dialog 默认白底覆盖成透明渐变。 */
+:global(.person-select-dialog) {
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.18);
+  background-color: var(--el-dialog-bg-color, #fff);
+}
+:global(.person-select-dialog .el-dialog__header) {
+  position: relative;
+  margin: 0;
+  padding: 18px 24px;
+  background-color: var(--el-dialog-bg-color, #fff);
+  border-bottom: 1px solid var(--wf-border-lighter, #ebeef5);
+}
+:global(.person-select-dialog .el-dialog__title) {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--wf-text-primary, #303133);
+}
+/* 关闭按钮：相对头部垂直居中，避免偏下错位 */
+:global(.person-select-dialog .el-dialog__headerbtn) {
+  top: 50%;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  transform: translateY(-50%);
+}
+:global(.person-select-dialog .el-dialog__body) {
+  padding: 20px 24px;
+  background-color: var(--el-dialog-bg-color, #fff);
+}
+/* 表头：覆盖全局 ruoyi 的灰底(#f8f8f9 !important)，统一白底；弹窗 append-to-body 需 :global */
+:global(.person-select-dialog .el-table th.el-table__cell),
+:global(.person-select-dialog .el-table__header-wrapper th) {
+  background-color: var(--el-dialog-bg-color, #fff) !important;
+}
+:global(html.dark .person-select-dialog),
+:global(html.dark .person-select-dialog .el-dialog__header),
+:global(html.dark .person-select-dialog .el-dialog__body) {
+  background: var(--wf-bg-color, #1f1f1f);
+}
+:global(html.dark .person-select-dialog .el-dialog__header) {
+  border-bottom-color: var(--wf-border-color, #333333);
+}
+:global(html.dark .person-select-dialog .el-dialog__title) {
+  color: var(--wf-text-primary, #e0e0e0);
+}
+:global(html.dark .person-select-dialog .el-table th.el-table__cell),
+:global(html.dark .person-select-dialog .el-table__header-wrapper th) {
+  background-color: var(--wf-bg-color, #1f1f1f) !important;
+  color: #c0c4cc !important;
+}
+
+/* 蓝色主题 - 办理人（扁平：保留蓝色标题/图标做语义，去卡片底/边框/渐变头） */
 .section-blue {
-  border-color: rgba(64, 158, 255, 0.25);
-  html.dark & { border-color: rgba(64, 158, 255, 0.2); }
   .section-card-header {
-    background: linear-gradient(135deg, rgba(64, 158, 255, 0.06) 0%, rgba(43, 125, 233, 0.03) 100%);
-    border-bottom-color: rgba(64, 158, 255, 0.12);
-    html.dark & {
-      background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(43, 125, 233, 0.05) 100%);
-    }
+    background: transparent;
+    border-bottom-color: var(--wf-border-lighter, #ebeef5);
+    html.dark & { background: transparent; border-bottom-color: var(--wf-border-color, #333333); }
   }
   .section-card-icon { color: var(--wf-primary, #409eff); }
   .section-card-title { color: var(--wf-primary, #409eff); }
-  &:hover { box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1); }
 }
 
-/* 紫色主题 - 监听器 */
+/* 紫色主题 - 监听器（扁平：保留紫色标题/图标做语义，去卡片底/边框/渐变头） */
 .section-purple {
-  border-color: rgba(137, 96, 220, 0.25);
-  html.dark & { border-color: rgba(137, 96, 220, 0.2); }
   .section-purple-header {
-    background: linear-gradient(135deg, rgba(137, 96, 220, 0.06) 0%, rgba(115, 78, 190, 0.03) 100%);
-    border-bottom-color: rgba(137, 96, 220, 0.12);
-    html.dark & {
-      background: linear-gradient(135deg, rgba(137, 96, 220, 0.08) 0%, rgba(115, 78, 190, 0.05) 100%);
-    }
+    background: transparent;
+    border-bottom-color: var(--wf-border-lighter, #ebeef5);
+    html.dark & { background: transparent; border-bottom-color: var(--wf-border-color, #333333); }
   }
   .section-purple-icon { color: #8960dc; }
   .section-purple-title { color: #8960dc; }
-  &:hover { box-shadow: 0 2px 12px rgba(137, 96, 220, 0.1); }
 }
 
 /* ========== 卡片式单选框 ========== */
@@ -1010,7 +1041,7 @@ defineExpose({
   }
   &.is-checked {
     border-color: var(--wf-primary, #409eff);
-    background: linear-gradient(135deg, rgba(64, 158, 255, 0.06) 0%, rgba(64, 158, 255, 0.03) 100%);
+    background: var(--wf-primary-light, #ecf5ff);
     color: var(--wf-primary, #409eff);
     font-weight: 500;
     html.dark & { background: rgba(64, 158, 255, 0.12); }
diff --git a/warm-flow-ui/src/components/design/common/vue/end.vue b/warm-flow-ui/src/components/design/common/vue/end.vue
index 8ba7d79e91e53a2439999f7df2b81567c27b4d4e..03f61c00a6fac6a5eda9a856c673596d4be635cb 100644
--- a/warm-flow-ui/src/components/design/common/vue/end.vue
+++ b/warm-flow-ui/src/components/design/common/vue/end.vue
@@ -1,15 +1,7 @@
 <template>
   <div class="end-wrapper">
-    <el-form ref="formRef" class="endForm" :model="form" label-width="90px" size="small" :disabled="disabled">
+    <el-form ref="formRef" class="endForm" :model="form" label-width="110px" :disabled="disabled">
       <div class="base-settings-section">
-        <div class="base-settings-header">
-          <span class="ext-attributes-icon ext-icon-base">
-            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M19 3H5C3.89 3 3 3.89 3 5V19C3 20.11 3.89 21 5 21H19C20.11 21 21 20.11 21 19V5C21 3.89 20.11 3 19 3ZM12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM18 18H6V17C6 14.67 10.33 13.34 12 13.34C13.67 13.34 18 14.67 18 17V18Z" fill="currentColor"/>
-            </svg>
-          </span>
-          <span class="base-settings-title">基础配置</span>
-        </div>
         <div class="base-settings-content">
           <el-form-item label="节点编码：" prop="nodeCode">
             <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
diff --git a/warm-flow-ui/src/components/design/common/vue/gateway.vue b/warm-flow-ui/src/components/design/common/vue/gateway.vue
index de4af60573a2ceb81edd5d32e2596f0fe8f77e4f..871ce445efd2c9e4731bab8880e100feea7ee3d7 100644
--- a/warm-flow-ui/src/components/design/common/vue/gateway.vue
+++ b/warm-flow-ui/src/components/design/common/vue/gateway.vue
@@ -1,15 +1,7 @@
 <template>
   <div class="gateway-wrapper">
-    <el-form ref="formRef" class="gatewayForm" :model="form" label-width="90px" size="small" :disabled="disabled">
+    <el-form ref="formRef" class="gatewayForm" :model="form" label-width="110px" :disabled="disabled">
       <div class="base-settings-section">
-        <div class="base-settings-header">
-          <span class="ext-attributes-icon ext-icon-base">
-            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zm-10 2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6.31-2c-.47-2.28-2.23-4.08-4.49-4.62l-.01-.03L13 4h-2l-.81 3.35c-2.27.54-4.02 2.34-4.49 4.63l-3.7.02v2l3.7-.02c.47 2.29 2.23 4.09 4.49 4.63L11 22h2l.81-3.35c2.27-.54 4.02-2.34 4.49-4.63l3.7.02v-2l-3.69-.02z" fill="currentColor"/>
-            </svg>
-          </span>
-          <span class="base-settings-title">网关配置</span>
-        </div>
         <div class="base-settings-content">
           <el-form-item label="节点编码：" prop="nodeCode">
             <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
diff --git a/warm-flow-ui/src/components/design/common/vue/propertySetting.vue b/warm-flow-ui/src/components/design/common/vue/propertySetting.vue
index 19635541e01ab57ef697105a59b9f8140b0ec454..4d37c5bc5e89e532d7e5843e99433be5892ac6bc 100644
--- a/warm-flow-ui/src/components/design/common/vue/propertySetting.vue
+++ b/warm-flow-ui/src/components/design/common/vue/propertySetting.vue
@@ -364,9 +364,37 @@ defineExpose({
 <style lang="scss">
 /* ========== 现代化属性面板抽屉 ========== */
 .property-drawer-modern {
-  /* 让 el-drawer 自带 header 透明，完全由 #header 插槽内容控制背景 */
+  /* 与基础信息页统一：系统字体栈 + 字形平滑 */
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* 表单标签：与基础信息页统一（加粗；右对齐由 EP 默认 label-position 提供） */
+  .el-form-item__label {
+    font-weight: 600;
+    color: var(--wf-text-primary, #303133);
+  }
+
+  /* 抽屉头部：收紧与正文间距（EP 默认 margin 32px 太空）+ 标题加深加粗（默认偏浅灰、不清晰） */
   .el-drawer__header {
     background: transparent !important;
+    margin-bottom: 0 !important;
+    padding-bottom: 14px !important;
+    border-bottom: 1px solid var(--wf-border-lighter, #ebeef5);
+    > span {
+      color: var(--wf-text-primary, #303133);
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+
+  /* 正文上内边距收紧，让 tab 紧跟头部 */
+  .el-drawer__body {
+    padding-top: 12px !important;
+  }
+  /* 含 Tab 的面板（开始/中间节点）：tab 栏紧贴抽屉标题，去掉上方间距，对齐更自然 */
+  .el-drawer__body:has(.modern-tabs-wrapper) {
+    padding-top: 0 !important;
   }
 
   .el-drawer__close-btn {
@@ -374,6 +402,80 @@ defineExpose({
     transition: all .25s ease !important;
     &:hover { color: #409eff !important; transform: rotate(90deg); }
   }
+
+  /* 白底描边输入框：与基础信息表单统一（白底 + 浅边框 + 柔和 focus 光环） */
+  .el-input__wrapper,
+  .el-textarea__inner {
+    border-radius: 10px;
+    background-color: var(--wf-bg-white, #fff);
+    box-shadow: none;
+    border: 1px solid var(--wf-border-light, #dcdfe6);
+    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
+    &:hover { border-color: var(--wf-primary, #409eff); }
+    &.is-focus,
+    &:focus {
+      background-color: var(--wf-bg-white, #fff);
+      border-color: var(--wf-primary, #409eff);
+      box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.12);
+    }
+  }
+
+  /* 校验失败态：红边 + 红光环，压过 focus 蓝色（与基础信息一致） */
+  .el-form-item.is-error .el-input__wrapper,
+  .el-form-item.is-error .el-input__wrapper.is-focus {
+    border-color: var(--wf-danger, #f56c6c);
+    box-shadow: 0 0 0 4px rgba(245, 108, 108, 0.12);
+  }
+
+  /* 表格：与基础信息页统一（圆角边框 + 中性表头 + hover 蓝条 + 删除按钮红渐变） */
+  .el-table {
+    border-radius: var(--wf-radius-lg, 12px);
+    overflow: hidden;
+    border: 1px solid var(--wf-border-lighter, #ebeef5);
+
+    .el-table__header-wrapper th {
+      background: var(--wf-bg-white, #fff) !important;
+      color: var(--wf-text-regular, #606266);
+      font-weight: 600;
+      font-size: 13px;
+    }
+    .el-table__row {
+      transition: background-color 0.2s ease;
+      & > td:first-child { position: relative; }
+      & > td:first-child::before {
+        content: '';
+        position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+        width: 3px; height: 0;
+        background: var(--wf-primary, #409eff);
+        border-radius: 0 2px 2px 0;
+        transition: height 0.25s ease;
+      }
+      &:hover > td:first-child::before { height: 60%; }
+      &:hover > td { background-color: var(--wf-primary-light, #ecf5ff) !important; }
+    }
+    /* 删除按钮：无实底，仅红色图标，hover 浅红圆底 */
+    .el-button--danger.is-link {
+      color: var(--wf-danger, #f56c6c);
+      padding: 5px;
+      height: auto;
+      border: none;
+      transition: all 0.2s ease;
+      &:hover {
+        color: #e04848;
+        background: rgba(245, 108, 108, 0.12) !important;
+        border-radius: 8px;
+      }
+    }
+
+    /* 表格内控件默认透明：整行读作干净白底，hover 轻填充、focus 才显白底+蓝环。
+       避免「全是下拉/输入的行」被填充底染灰、与「含纯文本列的行」深浅不一致 */
+    .el-input__wrapper,
+    .el-select .el-input__wrapper {
+      background-color: transparent;
+      &:hover { background-color: rgba(118, 128, 150, 0.07); }
+      &.is-focus { background-color: var(--wf-bg-white, #fff); }
+    }
+  }
 }
 
 /* ========== 暗黑模式：el-drawer 抽屉完整适配（全局生效） ========== */
@@ -416,6 +518,30 @@ html.dark {
       --el-drawer-bg-color: var(--wf-bg-color, #141414) !important;
       background-color: var(--wf-bg-color, #141414) !important;
     }
+
+    /* iOS 填充式输入框：暗黑覆盖 */
+    .el-input__wrapper,
+    .el-textarea__inner {
+      background-color: rgba(255, 255, 255, 0.06) !important;
+      box-shadow: none !important;
+      border: 1px solid transparent !important;
+    }
+    .el-input__wrapper.is-focus {
+      border-color: var(--wf-primary, #409eff) !important;
+      box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.18) !important;
+    }
+
+    /* 表格暗黑：中性表头 + 蓝调 hover */
+    .el-table {
+      border-color: var(--wf-border-color, #333333);
+      .el-table__header-wrapper th {
+        background: rgba(255, 255, 255, 0.04) !important;
+        color: var(--wf-text-regular, #b0b0b0);
+      }
+      .el-table__row:hover > td {
+        background-color: rgba(64, 158, 255, 0.12) !important;
+      }
+    }
   }
 
   /* el-dialog 对话框暗黑适配（selectUser 等弹窗） */
diff --git a/warm-flow-ui/src/components/design/common/vue/selectUser.vue b/warm-flow-ui/src/components/design/common/vue/selectUser.vue
index d4095e9715433d91bfb5004191bf6112bcfff9b3..25bb2088d1ee23fd58914a30e4e637a75e7f434b 100644
--- a/warm-flow-ui/src/components/design/common/vue/selectUser.vue
+++ b/warm-flow-ui/src/components/design/common/vue/selectUser.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-select-wrapper">
-    <!-- 现代化页签 -->
-    <div class="modern-tabs-wrapper">
+    <!-- 现代化页签（无分组数据时隐藏，避免空白条） -->
+    <div class="modern-tabs-wrapper" v-if="tabsList.length > 0">
       <div class="modern-tabs">
         <div
           v-for="item in tabsList"
@@ -203,6 +203,12 @@
         <!-- PC端：数据表格卡片（固定10条数据高度） -->
         <div class="section-card table-card pc-only">
           <el-table v-loading="loading" :data="tableList" :max-height="570" @row-click="handleCheck">
+            <template #empty>
+              <div class="user-empty">
+                <svg viewBox="0 0 24 24" class="user-empty-icon"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/></svg>
+                <span>暂无人员数据</span>
+              </div>
+            </template>
             <el-table-column width="50" align="center">
               <template #header>
                 <el-checkbox
@@ -345,6 +351,10 @@ function getTabsType() {
       queryParams.value.pageNum = 1;
     }
     getList();
+  }).catch(() => {
+    // 接口异常也结束 loading，展示空状态而非一直转圈
+    loading.value = false;
+    mobileLoadingMore.value = false;
   });
 }
 
@@ -382,6 +392,10 @@ function getList(append = false) {
       if (groupName.value) proxy.$refs["groupTreeRef"].filter(groupName.value);
     });
     isCheckedAll();
+  }).catch(() => {
+    // 接口异常也结束 loading，展示空状态而非一直转圈
+    loading.value = false;
+    mobileLoadingMore.value = false;
   });
 }
 
@@ -741,7 +755,7 @@ getTabsType();
 }
 .search-card-body {
   padding: 16px 18px;
-  background: var(--wf-bg-color, #fafbfc);
+  background: var(--wf-bg-white, #fff);
   html.dark & { background: var(--wf-bg-color, #141414); }
 
   .el-form-item {
@@ -756,14 +770,27 @@ getTabsType();
     }
   }
 
-  /* 输入框统一风格 */
-  .el-input__inner,
-  .el-date-editor {
-    border-radius: 6px !important;
-    transition: all .25s ease;
+  /* 输入框统一风格：白底 + 浅边框（未填写也保持白色） */
+  ::v-deep(.el-input__wrapper),
+  ::v-deep(.el-range-editor) {
+    border-radius: 10px;
+    background-color: var(--wf-bg-white, #fff);
+    box-shadow: none !important;
+    border: 1px solid var(--wf-border-color, #dcdfe6);
+    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
 
-    &:focus {
-      box-shadow: 0 0 0 2px rgba(64,158,255,.15);
+    &:hover { border-color: var(--wf-primary, #409eff); }
+    &.is-focus {
+      background-color: var(--wf-bg-white, #fff);
+      border-color: var(--wf-primary, #409eff);
+      box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.12) !important;
+    }
+  }
+  html.dark & {
+    ::v-deep(.el-input__wrapper),
+    ::v-deep(.el-range-editor) {
+      background-color: rgba(255, 255, 255, 0.06);
+      &.is-focus { background-color: var(--wf-bg-white, #1f1f1f); }
     }
   }
 
@@ -903,10 +930,10 @@ getTabsType();
 .table-card {
   .el-table {
     --el-table-border-color: var(--wf-border-lighter, #ebeef5);
-    --el-table-header-bg-color: var(--wf-bg-color, #fafbfc);
+    --el-table-header-bg-color: var(--wf-bg-white, #fff);
 
     th.el-table__cell {
-      background: var(--wf-bg-color, #fafbfc) !important;
+      background: var(--wf-bg-white, #fff) !important;
       font-weight: 600;
       font-size: 13px;
       color: var(--wf-text-primary, #303133);
@@ -929,7 +956,13 @@ getTabsType();
     }
 
     /* 空状态美化 */
-    .el-table__empty-block { min-height: 200px; }
+    .el-table__empty-block { min-height: 150px; }
+    .user-empty {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 8px; color: var(--wf-text-secondary, #909399);
+      .user-empty-icon { width: 42px; height: 42px; opacity: .3; }
+      span { font-size: 13px; }
+    }
   }
 
   /* 表格外边框圆角 */
diff --git a/warm-flow-ui/src/components/design/common/vue/skip.vue b/warm-flow-ui/src/components/design/common/vue/skip.vue
index 22985996e3c848e273659eaab27c396b9b032343..949132ffcc1afa8afad79ca15b4fc5cf0cbbbb4a 100644
--- a/warm-flow-ui/src/components/design/common/vue/skip.vue
+++ b/warm-flow-ui/src/components/design/common/vue/skip.vue
@@ -1,15 +1,7 @@
 <template>
   <div class="skip-wrapper">
-    <el-form ref="formRef" class="skipForm" :model="form" label-width="90px" size="small" :rules="rules" :disabled="disabled">
+    <el-form ref="formRef" class="skipForm" :model="form" label-width="110px" :rules="rules" :disabled="disabled">
       <div class="base-settings-section">
-        <div class="base-settings-header">
-          <span class="ext-attributes-icon ext-icon-skip">
-            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M17.59 3.41L15 6l3.59 3.59 1.42-1.42L15.82 4.83l2.77-1.42zM4.41 3.41L3 4.83l2.77 1.42L4.41 8 8 4.41 6.59 3 4.41 3.41zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" fill="currentColor"/>
-            </svg>
-          </span>
-          <span class="base-settings-title">跳转条件配置</span>
-        </div>
         <div class="base-settings-content">
           <el-form-item label="跳转名称：" v-if="skipConditionShow" prop="skipName">
             <el-input v-model="form.skipName" placeholder="跳转名称"/>
diff --git a/warm-flow-ui/src/components/design/common/vue/start.vue b/warm-flow-ui/src/components/design/common/vue/start.vue
index cd7a7a2d70597c7a12e012ec4115161a12e9135b..f548031c09e3e2274ed2244914b61819f6b4462e 100644
--- a/warm-flow-ui/src/components/design/common/vue/start.vue
+++ b/warm-flow-ui/src/components/design/common/vue/start.vue
@@ -10,6 +10,7 @@
           :class="{ 'is-active': tabsValue === item.name }"
           @click="tabsValue = item.name"
         >
+          <svg class="tab-icon" viewBox="0 0 24 24"><path :d="item.iconPath" fill="currentColor"/></svg>
           <span class="tab-label">{{ item.label }}</span>
         </div>
       </div>
@@ -17,16 +18,8 @@
 
     <!-- 基础设置 -->
     <div v-show="tabsValue === '1'" class="tabPane">
-      <el-form ref="formRef" class="startForm" :model="form" label-width="90px" size="small" :disabled="disabled">
+      <el-form ref="formRef" class="startForm" :model="form" label-width="110px" :disabled="disabled">
         <div class="base-settings-section">
-          <div class="base-settings-header">
-            <span class="ext-attributes-icon ext-icon-base">
-              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M19 3H5C3.89 3 3 3.89 3 5V19C3 20.11 3.89 21 5 21H19C20.11 21 21 20.11 21 19V5C21 3.89 20.11 3 19 3ZM12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM18 18H6V17C6 14.67 10.33 13.34 12 13.34C13.67 13.34 18 14.67 18 17V18Z" fill="currentColor"/>
-              </svg>
-            </span>
-            <span class="base-settings-title">基础配置</span>
-          </div>
           <div class="base-settings-content">
             <slot name="form-item-task-name" :model="form" field="nodeCode">
               <el-form-item label="节点编码：">
@@ -45,19 +38,11 @@
 
     <!-- 监听器 -->
     <div v-show="tabsValue === '2'" class="tabPane tabPane-full">
-      <div class="section-card section-purple">
-        <div class="section-card-header section-purple-header">
-          <span class="section-card-icon section-purple-icon">
-            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M22 6H16V4C16 2.89 15.11 2 14 2H10C8.89 2 8 2.89 8 4V6H2V8H4V19C4 20.11 4.89 21 6 21H18C19.11 21 20 20.11 20 19V8H22V6ZM10 4H14V6H10V4ZM18 19H6V8H18V19ZM10 10H14V17H10V10Z" fill="currentColor"/>
-            </svg>
-          </span>
-          <span class="section-card-title section-purple-title">监听器配置</span>
-        </div>
-        <div class="section-card-body">
+        <div class="section-card section-purple">
+          <div class="section-card-body">
           <slot name="form-item-task-listenerType" :model="form" field="listenerType">
             <el-table :data="form.listenerRows" style="width: 100%">
-              <el-table-column prop="listenerType" label="类型" width="100">
+              <el-table-column prop="listenerType" label="类型" :width="isMobile ? 60 : 160">
                 <template #default="scope">
                   <el-form-item :prop="'listenerRows.' + scope.$index + '.listenerType'">
                     <el-select v-model="scope.row.listenerType" placeholder="请选择">
@@ -76,15 +61,15 @@
                   </el-form-item>
                 </template>
               </el-table-column>
-              <el-table-column label="操作" width="55" v-if="!disabled">
+              <el-table-column label="操作" width="65" align="center" v-if="!disabled">
                 <template #default="scope">
-                  <el-button type="danger" :icon="Delete" @click="handleDeleteRow(scope.$index)"/>
+                  <el-button link size="small" type="danger" :icon="Delete" @click="handleDeleteRow(scope.$index)"/>
                 </template>
               </el-table-column>
             </el-table>
           </slot>
           <div class="action-buttons">
-            <el-button v-if="!disabled" type="primary" style="margin-top: 10px;" @click="handleAddRow">增加行</el-button>
+            <el-button v-if="!disabled" class="add-row-btn" @click="handleAddRow">增加行</el-button>
           </div>
         </div>
       </div>
@@ -108,14 +93,25 @@ const props = defineProps({
   },
 });
 
+// Tab 图标（单路径 SVG，viewBox 0 0 24 24，跟随 tab 文字色 currentColor）
+const TAB_ICONS = {
+  base: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z',
+  listener: 'M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z',
+};
 const tabsList = ref([
-  { name: "1", label: "基础设置" },
-  { name: "2", label: "监听器" }
+  { name: "1", label: "基础设置", iconPath: TAB_ICONS.base },
+  { name: "2", label: "监听器", iconPath: TAB_ICONS.listener }
 ]);
 
 const tabsValue = ref("1");
 const form = ref(props.modelValue);
 const emit = defineEmits(["change"]);
+
+// 移动端/平板检测（与 between / baseInfo 统一）
+const isMobile = computed(() => {
+  if (typeof window === 'undefined') return false;
+  return window.innerWidth <= 768;
+});
 const { proxy } = getCurrentInstance();
 
 watch(() => form, n => {
@@ -160,22 +156,45 @@ function handleDeleteRow(index) {
 @include section-card;
 @include responsive-adaption;
 
-/* 紫色主题 - 监听器 */
+/* 紫色主题 - 监听器（扁平：保留紫色标题/图标做语义，去卡片底/边框/渐变头） */
 .section-purple {
-  border-color: rgba(137,96,220,.25);
-  html.dark & { border-color: rgba(137,96,220,.2); }
   .section-purple-header {
-    background: linear-gradient(135deg, rgba(137,96,220,.06) 0%, rgba(115,78,190,.03) 100%);
-    border-bottom-color: rgba(137,96,220,.12);
-    html.dark & { background: linear-gradient(135deg, rgba(137,96,220,.08) 0%, rgba(115,78,190,.05) 100%); }
+    background: transparent;
+    border-bottom-color: var(--wf-border-lighter, #ebeef5);
+    html.dark & { background: transparent; border-bottom-color: var(--wf-border-color, #333333); }
   }
   .section-purple-icon { color: #8960dc; }
   .section-purple-title { color: #8960dc; }
-  &:hover { box-shadow: 0 2px 12px rgba(137,96,220,.1); }
+}
+
+/* 增加行按钮：虚线主色（与 baseInfo / between 统一） */
+.action-buttons {
+  margin-top: 12px;
+}
+.add-row-btn {
+  width: 100%;
+  border: 1.5px dashed var(--wf-primary, #409eff) !important;
+  color: var(--wf-primary, #409eff) !important;
+  background: transparent !important;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+  height: 40px;
+  letter-spacing: 2px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: var(--wf-primary-light, #ecf5ff) !important;
+    border-style: solid !important;
+    border-color: var(--wf-primary, #409eff) !important;
+    box-shadow: var(--wf-shadow-primary, 0 2px 8px rgba(64, 158, 255, 0.3));
+  }
 }
 
 /* 表格内表单左对齐 */
-::deep(.el-table .el-form-item) {
+:deep(.el-table .el-form-item) {
   margin-bottom: 0;
   .el-form-item__label {
     display: none !important; width: 0 !important; min-width: 0 !important;
@@ -186,5 +205,5 @@ function handleDeleteRow(index) {
     display: block !important; margin-left: 0 !important;
   }
 }
-::deep(.listenerItem) .el-table .el-form-item { margin-bottom: 0; }
+:deep(.listenerItem) .el-table .el-form-item { margin-bottom: 0; }
 </style>
\ No newline at end of file
diff --git a/warm-flow-ui/src/components/design/mimic/js/gatewayView.ts b/warm-flow-ui/src/components/design/mimic/js/gatewayView.ts
index e8d539ef97e9f662195c9d74f371b1a9bc33bc68..6a3aab8595f5410866d4922a2c18832da06c12b7 100644
--- a/warm-flow-ui/src/components/design/mimic/js/gatewayView.ts
+++ b/warm-flow-ui/src/components/design/mimic/js/gatewayView.ts
@@ -24,15 +24,15 @@ export abstract class GatewayView extends RectNode {
           [
             // 多个输入边时的图标
             h('path', {
-              fill: style.stroke ? style.stroke : '#FF8B00',
+              fill: style.stroke ? style.stroke : '#409eff',
               d: 'M171.52 280.064H51.2c-28.672 0-51.2-22.528-51.2-51.2V108.544c0-28.672 22.528-51.2 51.2-51.2h120.32c28.672 0 51.2 22.528 51.2 51.2v120.32c0 28.672-22.528 51.2-51.2 51.2zM51.2 108.544v120.32h120.32V108.544H51.2zM572.416 280.064H451.584c-28.672 0-51.2-22.528-51.2-51.2V108.544c0-28.672 22.528-51.2 51.2-51.2h120.32c28.672 0 51.2 22.528 51.2 51.2v119.808c0.512 13.312-4.608 26.112-13.824 35.84-9.728 10.24-23.04 15.872-36.864 15.872z m-0.512-50.176zM451.584 108.544v120.32h120.32V108.544H451.584zM972.8 280.064h-120.32c-28.672 0-51.2-22.528-51.2-51.2V108.544c0-28.672 22.528-51.2 51.2-51.2H972.8c28.672 0 51.2 22.528 51.2 51.2v120.32c0 28.672-22.528 51.2-51.2 51.2z m-120.32-171.52v120.32H972.8V108.544h-120.32zM572.416 966.656H451.584c-28.672 0-51.2-22.528-51.2-51.2v-120.32c0-28.672 22.528-51.2 51.2-51.2h120.32c28.672 0 51.2 22.528 51.2 51.2v119.808c0.512 13.312-4.608 26.112-13.824 35.84-9.728 10.24-23.04 15.872-36.864 15.872z m-0.512-50.176z m-120.32-121.344v120.32h120.32v-120.32H451.584z',
             }),
             h('path', {
-              fill: style.stroke ? style.stroke : '#FF8B00',
+              fill: style.stroke ? style.stroke : '#409eff',
               d: 'M861.696 566.272H162.816c-42.496 0-76.8-34.304-76.8-76.8V254.464c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v235.008c0 14.336 11.264 25.6 25.6 25.6h698.88c14.336 0 25.6-11.264 25.6-25.6V254.464c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v235.008c0 42.496-34.304 76.8-76.8 76.8z',
             }),
             h('path', {
-              fill: style.stroke ? style.stroke : '#FF8B00',
+              fill: style.stroke ? style.stroke : '#409eff',
               d: 'M512 766.464c-14.336 0-25.6-11.264-25.6-25.6V283.136c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v457.728c0 14.336-11.264 25.6-25.6 25.6z',
             }),
           ],
diff --git a/warm-flow-ui/src/components/design/mimic/js/inclusive.ts b/warm-flow-ui/src/components/design/mimic/js/inclusive.ts
index b06caca3a01f4fffc01bfad4a892e4976f3e4628..2a46dadf65ab708397d5ee9f9ac4b081474269f3 100644
--- a/warm-flow-ui/src/components/design/mimic/js/inclusive.ts
+++ b/warm-flow-ui/src/components/design/mimic/js/inclusive.ts
@@ -1,7 +1,19 @@
 import {GatewayModel} from "./gatewayModel";
 import {GatewayView} from "./gatewayView";
 import {h} from "@logicflow/core";
-class InclusiveModel extends GatewayModel {}
+import {applyClassicDesignColor} from "../../common/js/tool";
+class InclusiveModel extends GatewayModel {
+  // 设计态：包容网关用紫色语义色，与经典模式一致；运行态进度图沿用状态色不受影响
+  getNodeStyle() {
+    const style: any = super.getNodeStyle();
+    applyClassicDesignColor(style, this.properties, '146,84,222');
+    const inDesigner = typeof window !== 'undefined' && (window as any).__WF_FLOW_DESIGN_MODE__;
+    if (inDesigner && typeof style._statusRgba === 'function') {
+      style.fill = style._statusRgba(0.12);
+    }
+    return style;
+  }
+}
 
 class InclusiveView extends GatewayView {
 
@@ -17,11 +29,11 @@ class InclusiveView extends GatewayView {
       }, [
         // 单个输入边时的图标
         h('path', {
-          fill: style.fill ? style.fill : '#FFFCEB',
+          fill: style.fill ? style.fill : '#ecf5ff',
           d: 'M85.418667 512L512.021333 85.397333 938.624 512 512.021333 938.602667z',
         }),
         h('path', {
-          fill: style.stroke ? style.stroke : '#FF8B00',
+          fill: style.stroke ? style.stroke : '#409eff',
           d: 'M512 970.24a66.346667 66.346667 0 0 1-47.146667-19.413333L72.96 558.72a66.346667 66.346667 0 0 1 0-94.08L464.853333 72.533333a68.266667 68.266667 0 0 1 94.293334 0l392.106666 392.106667a66.773333 66.773333 0 0 1 0 94.08L559.146667 950.826667a66.346667 66.346667 0 0 1-47.146667 19.413333z m0-853.333333a2.986667 2.986667 0 0 0-1.92 0L118.186667 509.866667a2.56 2.56 0 0 0 0 3.626666l391.893333 392.106667a3.2 3.2 0 0 0 3.84 0l391.893333-392.106667a2.56 2.56 0 0 0 0-3.626666L513.92 117.76a2.986667 2.986667 0 0 0-1.92-0.64z',
         }),
         h('circle', {
@@ -29,7 +41,7 @@ class InclusiveView extends GatewayView {
             cy: 512,
             r: 200,
             fill: 'none',
-            stroke: style.stroke ? style.stroke : '#FF8B00',
+            stroke: style.stroke ? style.stroke : '#409eff',
             strokeWidth: 60,
         }),
       ]),
@@ -38,9 +50,9 @@ class InclusiveView extends GatewayView {
         x: x - width / 2 + 27,
         y: y - height / 2 + 20,
         fontSize: 13,
-        fill: "#000",
         style: {
           userSelect: 'none',
+          fill: 'var(--wf-text-primary, #303133)',
         }
       }, textValue) : null
     ]);
diff --git a/warm-flow-ui/src/components/design/mimic/js/parallel.ts b/warm-flow-ui/src/components/design/mimic/js/parallel.ts
index c45e99c86d124e09b4a6e62b5ea9a9fdd7343e8d..cc8dc6b7142da8c14266400dd880bdd9697bc374 100644
--- a/warm-flow-ui/src/components/design/mimic/js/parallel.ts
+++ b/warm-flow-ui/src/components/design/mimic/js/parallel.ts
@@ -1,8 +1,20 @@
 import {GatewayModel} from "./gatewayModel";
 import {GatewayView} from "./gatewayView";
 import {h} from "@logicflow/core";
+import {applyClassicDesignColor} from "../../common/js/tool";
 
-class ParallelModel extends GatewayModel {}
+class ParallelModel extends GatewayModel {
+  // 设计态：并行网关用青色语义色，与经典模式一致；运行态进度图沿用状态色不受影响
+  getNodeStyle() {
+    const style: any = super.getNodeStyle();
+    applyClassicDesignColor(style, this.properties, '19,194,194');
+    const inDesigner = typeof window !== 'undefined' && (window as any).__WF_FLOW_DESIGN_MODE__;
+    if (inDesigner && typeof style._statusRgba === 'function') {
+      style.fill = style._statusRgba(0.12);
+    }
+    return style;
+  }
+}
 
 class ParallelView extends GatewayView {
 
@@ -18,15 +30,15 @@ class ParallelView extends GatewayView {
         viewBox: '0 0 1024 1024',
       }, [
         h('path', {
-          fill: style.fill ? style.fill : '#FFFCEB',
+          fill: style.fill ? style.fill : '#ecf5ff',
           d: 'M85.418667 512L512.021333 85.397333 938.624 512 512.021333 938.602667z',
         }),
         h('path', {
-          fill: style.stroke ? style.stroke : '#FF8B00',
+          fill: style.stroke ? style.stroke : '#409eff',
           d: 'M512 714.453333A32 32 0 0 1 480 682.666667v-138.666667H341.333333a32 32 0 1 1 0-64h138.666667V341.333333a32 32 0 0 1 64 0v138.666667H682.666667a32 32 0 0 1 0 64h-138.666667V682.666667a32 32 0 0 1-32 31.786666z',
         }),
         h('path', {
-          fill: style.stroke ? style.stroke : '#FF8B00',
+          fill: style.stroke ? style.stroke : '#409eff',
           d: 'M512 970.453333a66.56 66.56 0 0 1-47.146667-19.626666L72.96 558.933333a66.346667 66.346667 0 0 1 0-94.293333L464.853333 72.533333a68.266667 68.266667 0 0 1 94.293334 0l391.893333 392.106667a66.346667 66.346667 0 0 1 0 94.293333L559.146667 950.826667a66.56 66.56 0 0 1-47.146667 19.626666z m0-853.333333a2.986667 2.986667 0 0 0-1.92 0L118.186667 509.866667a2.56 2.56 0 0 0 0 3.626666l391.893333 392.106667a3.2 3.2 0 0 0 3.84 0l391.893333-392.106667a2.986667 2.986667 0 0 0 0-3.626666L513.92 117.76a2.986667 2.986667 0 0 0-1.92-0.64z',
         }),
       ]),
@@ -35,9 +47,9 @@ class ParallelView extends GatewayView {
         x: x - width / 2 + 27,
         y: y - height / 2 + 20,
         fontSize: 13,
-        fill: "#000",
         style: {
           userSelect: 'none',
+          fill: 'var(--wf-text-primary, #303133)',
         }
       }, textValue) : null
     ]);
diff --git a/warm-flow-ui/src/components/design/mimic/js/serial.ts b/warm-flow-ui/src/components/design/mimic/js/serial.ts
index 028fc297d4ff50861e728ca59f5a381c2adddc1e..4b3372ce739fe3339f78013c37e0ef01e9b2cce4 100644
--- a/warm-flow-ui/src/components/design/mimic/js/serial.ts
+++ b/warm-flow-ui/src/components/design/mimic/js/serial.ts
@@ -1,7 +1,19 @@
 import {GatewayModel} from "./gatewayModel";
 import {GatewayView} from "./gatewayView";
 import {h} from "@logicflow/core";
-class SerialModel extends GatewayModel {}
+import {applyClassicDesignColor} from "../../common/js/tool";
+class SerialModel extends GatewayModel {
+  // 设计态：串行(互斥)网关用橙色语义色，与经典模式一致；运行态进度图沿用状态色不受影响
+  getNodeStyle() {
+    const style: any = super.getNodeStyle();
+    applyClassicDesignColor(style, this.properties, '245,158,11');
+    const inDesigner = typeof window !== 'undefined' && (window as any).__WF_FLOW_DESIGN_MODE__;
+    if (inDesigner && typeof style._statusRgba === 'function') {
+      style.fill = style._statusRgba(0.12);
+    }
+    return style;
+  }
+}
 
 class SerialView extends GatewayView {
 
@@ -17,15 +29,15 @@ class SerialView extends GatewayView {
       }, [
         // 单个输入边时的图标
         h('path', {
-          fill: style.fill ? style.fill : '#FFFCEB',
+          fill: style.fill ? style.fill : '#ecf5ff',
           d: 'M85.418667 512L512.021333 85.397333 938.624 512 512.021333 938.602667z',
         }),
         h('path', {
-          fill: style.stroke ? style.stroke : '#FF8B00',
+          fill: style.stroke ? style.stroke : '#409eff',
           d: 'M512 970.24a66.346667 66.346667 0 0 1-47.146667-19.413333L72.96 558.72a66.346667 66.346667 0 0 1 0-94.08L464.853333 72.533333a68.266667 68.266667 0 0 1 94.293334 0l392.106666 392.106667a66.773333 66.773333 0 0 1 0 94.08L559.146667 950.826667a66.346667 66.346667 0 0 1-47.146667 19.413333z m0-853.333333a2.986667 2.986667 0 0 0-1.92 0L118.186667 509.866667a2.56 2.56 0 0 0 0 3.626666l391.893333 392.106667a3.2 3.2 0 0 0 3.84 0l391.893333-392.106667a2.56 2.56 0 0 0 0-3.626666L513.92 117.76a2.986667 2.986667 0 0 0-1.92-0.64z',
         }),
         h('path', {
-          fill: style.stroke ? style.stroke : '#FF8B00',
+          fill: style.stroke ? style.stroke : '#409eff',
           d: 'M554.666667 516.266667l107.946666-107.946667a30.506667 30.506667 0 0 0-42.666666-42.666667L512 473.173333l-107.946667-107.946666a30.506667 30.506667 0 0 0-42.666666 42.666666L469.333333 516.266667l-108.8 107.946666a30.506667 30.506667 0 1 0 42.666667 42.666667l108.8-107.306667 106.666667 107.733334a30.506667 30.506667 0 0 0 42.666666-42.666667z',
         }),
       ]),
@@ -34,9 +46,9 @@ class SerialView extends GatewayView {
         x: x - width / 2 + 27,
         y: y - height / 2 + 20,
         fontSize: 13,
-        fill: "#000",
         style: {
           userSelect: 'none',
+          fill: 'var(--wf-text-primary, #303133)',
         }
       }, textValue) : null
     ]);
diff --git a/warm-flow-ui/src/components/design/mimic/js/skip.ts b/warm-flow-ui/src/components/design/mimic/js/skip.ts
index d254ed687d326a4d28b87d3cc1dfca68c9fcce38..cd3eaa0da5919690435e5257487c4b8bfef93a4c 100644
--- a/warm-flow-ui/src/components/design/mimic/js/skip.ts
+++ b/warm-flow-ui/src/components/design/mimic/js/skip.ts
@@ -55,6 +55,8 @@ class SkipView extends CurvedEdge {
     const { points: pointsStr, isAnimation, arrowConfig, radius = 0 } = model;
     const style = model.getEdgeStyle();
     const animationStyle = model.getEdgeAnimationStyle();
+    // 跳转条件图标底色：设计态用主蓝 chroma，运行态保留状态语义色（chartStatusColor）
+    const condColor = model.properties.chartStatusColor ? style.stroke : '#409eff';
     let points = this.pointFilter(pointsStr.split(' ').map((p) => p.split(',').map((a) => +a)));
 
     // 主路径
@@ -69,7 +71,7 @@ class SkipView extends CurvedEdge {
       // 如果上一个节点是互斥网关，并且网关后节点大于1个，也就是说是互斥网关结束节点时
       if (['serial', 'inclusive'].includes(model.sourceNode.type as string) && nextEdge.length > 1) {
         const midPoint = [points[0][0], points[0][1] + offsetY - 10];
-        plusElements = this.getForeignObject(midPoint, style.stroke, model.text.value);
+        plusElements = this.getForeignObject(midPoint, condColor, model.text.value);
       } else if (!model.properties.chartStatusColor) {
         const midPoint = [points[0][0], points[0][1] + offsetY];
         plusElements = this.getPlusElements(midPoint);
@@ -88,7 +90,7 @@ class SkipView extends CurvedEdge {
       // 判断是否由横线变为竖线，并且是互斥网关
       if (model.sourceNode && ['serial', 'inclusive'].includes(model.sourceNode.type as string) && p0[1] === p1[1] && p0[0] !== p1[0]) {
         const midPoint = [p2[0], p1[1] + offsetY];
-        plusElements = this.getForeignObject(midPoint, style.stroke, model.text.value);
+        plusElements = this.getForeignObject(midPoint, condColor, model.text.value);
       }
     }
 
@@ -190,7 +192,7 @@ class SkipView extends CurvedEdge {
           cx: x,
           cy: y,
           r: 13,
-          fill: 'blue',
+          fill: '#409eff',
         }),
         h('line', {
           x1: x - 8,
diff --git a/warm-flow-ui/src/components/design/mimic/vue/EdgeTooltip.vue b/warm-flow-ui/src/components/design/mimic/vue/EdgeTooltip.vue
index 35d362cccdcf8a43ee38262bba65f8a6a8da0e35..6859b3ed82ab908efcc4be741373d83667fc9f0c 100644
--- a/warm-flow-ui/src/components/design/mimic/vue/EdgeTooltip.vue
+++ b/warm-flow-ui/src/components/design/mimic/vue/EdgeTooltip.vue
@@ -37,14 +37,14 @@ const tooltipStyle = computed(() => ({
   pointerEvents: 'auto',
   backgroundColor: themeColors.value.tooltipBg,
   border: `1px solid ${themeColors.value.tooltipBorder}`,
-  borderRadius: '4px',
+  borderRadius: '12px',
   boxShadow: themeColors.value.tooltipShadow,
-  padding: '4px 5px',
-  fontSize: '15px',
+  padding: '6px',
+  fontSize: '13px',
   zIndex: 1000,
   color: themeColors.value.tooltipColor,
   display: 'flex',
-  width: '350px'
+  width: 'max-content'
 }));
 
 function handleTooltipEnter() {
@@ -66,82 +66,75 @@ const handleClick = (item) => {
 <style scoped>
 .tooltip-container {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2px;
     width: 100%;
 }
 
 .tooltip-item {
     display: flex;
     align-items: center;
-    padding: 4px 5px;
+    gap: 8px;
+    padding: 7px 14px 7px 8px;
     cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.2s;
+    border-radius: 8px;
+    white-space: nowrap;
+    transition: background-color 0.18s ease;
 
     &:hover {
-      background-color: #f0f0f0;
+      background-color: var(--wf-primary-lighter, #f0f7ff);
     }
 
     /* 暗黑模式 hover */
     html.dark &,
     :global(html.dark) & {
       &:hover {
-        background-color: rgba(255, 255, 255, 0.08);
+        background-color: rgba(64, 158, 255, 0.12);
       }
     }
 }
 
+.tooltip-item span {
+  font-size: 13px;
+  white-space: nowrap;
+}
+
 .tooltip-icon {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--wf-border-light);
+  width: 30px;
+  height: 30px;
+  background: var(--wf-primary-light, #ecf5ff);
   border-radius: 50%;
-  margin-right: 10px;
-  color: var(--wf-text-secondary);
-  transition: all 0.2s ease;
+  transition: all 0.18s ease;
+
+  svg {
+    width: 17px;
+    height: 17px;
+  }
 
   /* 暗黑模式适配 */
   html.dark &,
   :global(html.dark) & {
-    border-color: var(--wf-border-color);
-    color: var(--wf-text-regular);
-
-    &:hover {
-      border-color: var(--wf-primary);
-      color: var(--wf-primary);
-    }
-  }
-
-  &:hover {
-    border-color: var(--wf-primary);
-    color: var(--wf-primary);
+    background: rgba(64, 158, 255, 0.16);
   }
 }
 
 /* ========== 手机端响应式适配 ========== */
 @media (max-width: 768px) {
-  .tooltip-container {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 6px;
-  }
-
   .tooltip-item {
-    padding: 6px 8px;
-    font-size: 13px;
+    padding: 7px 12px 7px 7px;
   }
 
   .tooltip-icon {
-    width: 26px;
-    height: 26px;
-    margin-right: 6px;
+    width: 28px;
+    height: 28px;
 
     svg {
-      width: 14px;
-      height: 14px;
+      width: 15px;
+      height: 15px;
     }
   }
 }
diff --git a/warm-flow-ui/src/components/design/mimic/vue/baseNode.vue b/warm-flow-ui/src/components/design/mimic/vue/baseNode.vue
index d6c000dafd31e8f654bcde57dc7740fea651f4bd..b9d14092ef9ae06c24381b85002e188b7a5aca32 100644
--- a/warm-flow-ui/src/components/design/mimic/vue/baseNode.vue
+++ b/warm-flow-ui/src/components/design/mimic/vue/baseNode.vue
@@ -76,16 +76,33 @@ const nodeNameInput = ref(null);
 const editingNodeName = ref(false);
 const emit = defineEmits(['updateNodeName', 'deleteNode', 'editNode']); // 添加 deleteNode 事件
 
+// 运行态（流程实例查看，chartStatusColor 有三原色）保留状态语义色；设计态走钉钉蓝卡片风格
+const isRuntime = computed(() => props.chartStatusColor && props.chartStatusColor.length > 0);
+
 const baseNodeColor = computed(() => {
+  if (isRuntime.value) {
+    return {
+      border: (props.status === 1 ? "2px dashed " : "1px solid ") + (props.stroke || "rgb(166,178,189)"),
+    };
+  }
+  // 设计态：无边框卡片，仅靠柔和阴影区分层次；背景跟随主题变量（暗黑模式自动变深）
   return {
-    border: props.stroke ? (props.status === 1 ? "2px dashed " : "1px solid ") + props.stroke : "rgb(166,178,189)",
+    background: "var(--wf-bg-white, #fff)",
   };
 });
 
+// 设计态头部按节点类型区分（开始=绿 / 结束=红 / 其余审批=蓝），不再全蓝
+const DESIGN_HEADER_GRADIENT = {
+  start: "linear-gradient(135deg, #67c23a 0%, #5daf34 100%)",
+  end: "linear-gradient(135deg, #f56c6c 0%, #e85c5c 100%)",
+};
+
 const topSectionColor = computed(() => {
-  return {
-    backgroundColor: props.stroke ? props.stroke : "rgb(166,178,189)",
-  };
+  if (isRuntime.value) {
+    return { backgroundColor: props.stroke || "rgb(166,178,189)" };
+  }
+  // 设计态：按节点类型着色头部，默认审批蓝
+  return { background: DESIGN_HEADER_GRADIENT[props.type] || "linear-gradient(135deg, #409eff 0%, #2b7de9 100%)" };
 });
 
 const deleteNode = () => {
@@ -152,7 +169,11 @@ function handleLeave() {
   width: 100%;
   height: 80px;
   box-sizing: border-box;
-  border-radius: 10px; /* 添加圆角 */
+  border-radius: 10px;
+  background: var(--wf-bg-white, #fff);
+  /* 去边框，仅用多层柔和阴影区分层次（现代卡片质感） */
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.05);
+  overflow: hidden; /* 让头部跟随卡片圆角 */
 }
 
 .top-section {
@@ -162,8 +183,12 @@ function handleLeave() {
   height: 25px;
   display: flex;
   align-items: center;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  color: #fff; /* 彩色头部，文字/图标统一白色 */
+}
+
+/* 头部为彩色底，编辑图标改白色（原 svg 写死黑色） */
+.top-section .edit-icon path {
+  fill: #fff;
 }
 
 .delete-btn {
@@ -172,13 +197,14 @@ function handleLeave() {
   top: 50%;
   transform: translateY(-50%);
   display: block;
-  color: #000;
+  color: #fff;
 }
 
 .bottom-section {
   padding: 10px;
   height: calc(100%);
   font-size: 14px;
+  color: var(--wf-text-primary, #303133);
 }
 
 .edit-icon {
diff --git a/warm-flow-ui/src/views/flow-design/flowChart.vue b/warm-flow-ui/src/views/flow-design/flowChart.vue
index 57b23f1275e4315885481de596400b178e35380e..b88821004f0b21c4a1e3475668afad94466826a5 100644
--- a/warm-flow-ui/src/views/flow-design/flowChart.vue
+++ b/warm-flow-ui/src/views/flow-design/flowChart.vue
@@ -17,7 +17,7 @@
         <!-- 右侧：工具栏（仅图标，tooltip悬浮显示） -->
         <div class="toolbar-right">
           <el-tooltip content="放大" placement="bottom"><el-button size="small" icon="ZoomIn" @click="zoomViewport(true)"/></el-tooltip>
-          <el-tooltip content="自适应" placement="bottom"><el-button size="small" icon="Rank" @click="isMobileDevice() ? zoomViewport('fit') : zoomViewport(1)"/></el-tooltip>
+          <el-tooltip content="自适应" placement="bottom"><el-button size="small" icon="Rank" @click="zoomViewport('fit')"/></el-tooltip>
           <el-tooltip content="缩小" placement="bottom"><el-button size="small" icon="ZoomOut" @click="zoomViewport(false)"/></el-tooltip>
           <el-tooltip content="下载流程图" placement="bottom"><el-button size="small" icon="Download" @click="downLoad"/></el-tooltip>
         </div>
@@ -217,7 +217,8 @@ const isMobileDevice = () => {
 const zoomViewport = async (mode) => {
   if (!lf.value) return;
   if (mode === 'fit') {
-    lf.value.fitView(40, 20);
+    // 自适应：显示全部节点并居中，最大缩放 100%
+    fitViewIfMobile();
   } else if (mode === 1) {
     lf.value.zoom(1);
     lf.value.translateCenter();
@@ -246,6 +247,12 @@ function fitViewIfMobile() {
   }
 
   lf.value.fitView(40, 20);
+  // 限制最大缩放 100%：节点少时不放大撑屏，保持原始大小并居中
+  const scale = lf.value.getTransform ? lf.value.getTransform().SCALE_X : 1;
+  if (scale && scale > 1) {
+    lf.value.resetZoom ? lf.value.resetZoom() : lf.value.zoom(1);
+    if (lf.value.translateCenter) lf.value.translateCenter();
+  }
 }
 
 /**
diff --git a/warm-flow-ui/src/views/flow-design/index.vue b/warm-flow-ui/src/views/flow-design/index.vue
index 697a59678086f969dd3eb0a876158eaa030cc47b..a70054a0c358b0d41c577daaeeb691cb93712c0d 100644
--- a/warm-flow-ui/src/views/flow-design/index.vue
+++ b/warm-flow-ui/src/views/flow-design/index.vue
@@ -8,7 +8,7 @@
           <el-tooltip :content="logicJson.flowName" placement="bottom" :show-after="500">
             <div class="flow-name">
                 <svg-icon icon-class="flowName" style="margin-right: 5px"/>
-                {{ logicJson.flowName }}
+                {{ logicJson.flowName || '未命名流程' }}
             </div>
           </el-tooltip>
         </div>
@@ -44,8 +44,8 @@
         <div v-if="activeStep === 1">
           <span class="toolbar-group">
             <el-tooltip content="缩小" placement="bottom"><el-button size="small" icon="ZoomOut" @click="zoomViewport(false)"></el-button></el-tooltip>
-            <!-- PC端：原有 zoom(1)+居中；移动端/平板：fitView 自适应显示全部节点 -->
-            <el-tooltip content="自适应" placement="bottom"><el-button size="small" icon="Rank" @click="isMobileDevice() ? zoomViewport('fit') : zoomViewport(1)"></el-button></el-tooltip>
+            <!-- 自适应：所有端均 fitView 显示全部节点 -->
+            <el-tooltip content="自适应" placement="bottom"><el-button size="small" icon="Rank" @click="zoomViewport('fit')"></el-button></el-tooltip>
             <el-tooltip content="放大" placement="bottom"><el-button size="small" icon="ZoomIn" @click="zoomViewport(true)"></el-button></el-tooltip>
           </span>
           <span class="toolbar-group">
@@ -166,13 +166,27 @@ const isMobileDevice = () => {
   return window.innerWidth <= 1024 || ('ontouchstart' in window && window.innerWidth <= 1280);
 };
 
-/** 仅在移动端/平板执行 fitView，PC 端不干预 */
+/** 仅在移动端/平板执行 fitView（用于新增节点等增量操作，避免 PC 编辑时被打断） */
 function fitViewIfMobile() {
   if (isMobileDevice() && lf.value?.fitView) {
     lf.value.fitView(40, 20);
   }
 }
 
+/** 自适应显示全部节点（所有端）：打开 / 进入流程设计 / 点击「自适应」按钮时使用 */
+function fitViewAll() {
+  const lfInst = lf.value;
+  if (!lfInst?.fitView) return;
+  lfInst.fitView(40, 20);
+  // fitView 会把节点较少的流程放大到撑满画布，这里限制最大缩放 100%：
+  // 流程大 -> 缩小铺满；流程小 -> 保持原始大小并居中，避免进来就糊脸
+  const scale = lfInst.getTransform ? lfInst.getTransform().SCALE_X : 1;
+  if (scale && scale > 1) {
+    lfInst.resetZoom ? lfInst.resetZoom() : lfInst.zoom(1);
+    if (lfInst.translateCenter) lfInst.translateCenter();
+  }
+}
+
 const activeStep = ref(0);
 const onlyDesignShow = ref(false);
 
@@ -244,6 +258,8 @@ async function handleStepClick(index) {
 onMounted(() => {
     // 隐藏滚动条
     document.body.style.overflow = 'hidden';
+    // 标记当前处于设计器页面：供经典节点设计态语义色判断（业务侧实例进度图不受影响）
+    window.__WF_FLOW_DESIGN_MODE__ = true;
     if (!appParams.value) appStore.fetchTokenName();
     if (appParams.value.id) {
       definitionId.value = appParams.value.id;
@@ -347,6 +363,15 @@ function initLogicFlow() {
           fill: themeColors.value.edgeTextBg,
         },
       },
+      // 选中/悬浮的包围框：默认是黑色虚线，改成柔和蓝实线（贴近基础信息页 chroma 与 Mac 风格）
+      outline: {
+        stroke: 'rgba(64, 158, 255, 0.7)',
+        strokeWidth: 1,
+        strokeDasharray: '',
+        hover: {
+          stroke: 'rgba(64, 158, 255, 0.35)',
+        },
+      },
     });
 
     register();
@@ -357,8 +382,8 @@ function initLogicFlow() {
     initTouchEventBridge();
     if (logicJson.value) {
       lf.value.render(logicJson.value);
-      // 移动端/平板端：自适应显示全部节点；PC 端保持默认行为不干预
-      fitViewIfMobile();
+      // 打开即自适应显示全部节点（所有端）
+      fitViewAll();
     }
     // 初始化完成后，如果当前是暗黑模式，显式应用一次主题（解决 URL 参数初始化时序问题）
     if (isDark.value && lf.value) {
@@ -376,15 +401,15 @@ function initLogicFlow() {
 }
 
 /**
- * 真机兼容：延迟触发 LogicFlow resize + fitView（仅移动端/平板端生效）
- * PC 端不执行自动 fitView，保持用户手动缩放行为
+ * 延迟触发 LogicFlow resize + fitView（所有端）
+ * 覆盖移动端真机 / v-show 切换 / iframe 嵌入等容器尺寸延迟场景
  */
 function scheduleMobileResize() {
   const doFit = () => {
     if (lf.value && lf.value.resize) {
       lf.value.resize();
-      // 仅在移动设备上才执行自动 fitView
-      requestAnimationFrame(fitViewIfMobile);
+      // resize 后自适应显示全部节点（所有端，覆盖布局/iframe 时序）
+      requestAnimationFrame(fitViewAll);
     }
   };
   // 多重延迟策略覆盖各种场景：移动端/v-show切换/iframe嵌入
@@ -397,15 +422,14 @@ function scheduleMobileResize() {
 }
 
 /**
- * 监听步骤切换：从"基础信息"切到"流程设计"时（仅移动端/平板端生效）
- * PC 端不执行自动 fitView，保持用户手动缩放行为
+ * 监听步骤切换：从"基础信息"切到"流程设计"时，自适应显示全部节点（所有端）
  */
 watch(activeStep, (newVal) => {
   if (newVal === 1 && lf.value) {
     const doFit = () => {
       if (lf.value?.resize) {
         lf.value.resize();
-        requestAnimationFrame(fitViewIfMobile);
+        requestAnimationFrame(fitViewAll);
       }
     };
     // 多次延迟确保在各种时序下移动端能正确适配
@@ -427,6 +451,8 @@ watch(isDark, (v) => {
 onUnmounted(() => {
   cleanupMessageListener();
   window.removeEventListener('resize', handleMobileResize);
+  // 离开设计器页面，复位设计态标记
+  window.__WF_FLOW_DESIGN_MODE__ = false;
 });
 
 // 监听窗口变化，真机旋转屏幕时重绘（带防抖 + 标志位屏蔽抽屉操作干扰）
@@ -985,9 +1011,9 @@ const zoomViewport = async (zoom) => {
       lf.value.translateCenter();
     }
   } else if (zoom === 'fit') {
-    // 移动端/平板端自适应：fitView 将所有节点缩放并居中到画布可视区域
+    // 自适应：显示全部节点并居中，最大缩放 100%（节点少不放大撑屏）
     if (lf.value.fitView) {
-      lf.value.fitView(40, 20);
+      fitViewAll();
     } else {
       // fallback
       if (lf.value.translateCenter) lf.value.translateCenter();
@@ -1223,8 +1249,8 @@ html.dark .steps-tabs {
 }
 
 .step-tab:hover {
-  color: #3b82f6;
-  background: rgba(59, 130, 246, 0.06);
+  color: var(--wf-primary, #409eff);
+  background: var(--wf-primary-light, #ecf5ff);
 }
 
 .step-tab .tab-icon {
@@ -1240,8 +1266,8 @@ html.dark .steps-tabs {
 
 .step-tab.active {
   color: #fff;
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
+  background: var(--wf-primary, #409eff);
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.28);
 }
 
 .step-tab.active .tab-icon {
@@ -1249,9 +1275,7 @@ html.dark .steps-tabs {
 }
 
 .step-tab.active:hover {
-  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+  background: var(--wf-primary-dark, #2b7de9);
 }
 
 /* ========== 保存按钮 ========== */
@@ -1259,25 +1283,28 @@ html.dark .steps-tabs {
   display: flex;
   align-items: center;
   gap: 6px;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+  background: var(--wf-primary, #409eff) !important;
   border: none !important;
   color: #fff !important;
   font-weight: 500;
   font-size: 14px;
-  padding: 10px 24px !important;
+  padding: 9px 22px !important;
   border-radius: 10px !important;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
-  transition: all 0.25s ease !important;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.28);
+  transition: all 0.2s ease !important;
 }
 
 .save-btn:hover {
-  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
-  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
-  transform: translateY(-1px);
+  background: var(--wf-primary-dark, #2b7de9) !important;
 }
 
-.save-btn:active {
-  transform: translateY(0);
+/* Element Plus 会把按钮默认插槽内容包进一层 span，
+   导致 .save-btn 上的 gap 作用不到「图标 + 文字」之间。
+   这里让该包裹层成为 flex 容器，恢复图标与文字的间距与垂直居中。 */
+.save-btn > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .save-btn .save-icon {
@@ -1291,16 +1318,15 @@ html.dark .design-header {
   border-bottom-color: var(--wf-border-color);
 }
 
-/* 暗黑模式：保存按钮降低饱和度，避免刺眼 */
+/* 暗黑模式：保存按钮统一主色，扁平 */
 html.dark .save-btn,
 html.dark .toolbar-save-btn {
-  background: linear-gradient(135deg, var(--wf-save-dark, #0d9488) 0%, var(--wf-save-dark-end, #0f766e) 100%) !important;
-  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25) !important;
+  background: var(--wf-primary, #409eff) !important;
+  box-shadow: none !important;
 }
 html.dark .save-btn:hover,
 html.dark .toolbar-save-btn:hover {
-  background: linear-gradient(135deg, var(--wf-save-dark-end, #0f766e) 0%, var(--wf-save-darker, #115e59) 100%) !important;
-  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35) !important;
+  background: var(--wf-primary-dark, #2b7de9) !important;
 }
 
 /* 工具栏区域（el-header 第二行）暗黑模式 */
@@ -1374,23 +1400,17 @@ html.dark .logo-text {
 
 /* ========== 工具栏内保存按钮 ========== */
 .toolbar-save-btn {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+  background: var(--wf-primary, #409eff) !important;
   border: none !important;
   color: #fff !important;
   font-weight: 500;
   border-radius: 8px !important;
-  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
-  transition: all 0.25s ease !important;
+  box-shadow: none;
+  transition: background-color 0.2s ease !important;
 }
 
 .toolbar-save-btn:hover {
-  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
-  transform: translateY(-1px);
-}
-
-.toolbar-save-btn:active {
-  transform: translateY(0);
+  background: var(--wf-primary-dark, #2b7de9) !important;
 }
 
 /* ========== 响应式适配：平板端 (<= 1024px) ========== */