refactor: 统一 Groovy 脚本相关服务到 script/service 目录

- 移除重复的 services 和 utils 目录，统一使用 script/service
- 合并 TitleConfigModal 到 node-title-config-modal
- 将变量选择器样式从 less 迁移到 scss
- 添加样式规范到 CLAUDE.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: xlorne

CLAUDE.md

@@ -135,9 +135,11 @@ flow-types (类型定义)
 ## 开发规范
 
 - **与用户沟通及编写文档时，所有内容必须使用中文表述**
+- **在每次修改代码以后，要执行本地化的编译验证确保代码没有错误**
 - 前端包管理使用 pnpm（根据用户配置）
 - 前端文件命名规范：使用小写字母 + 下划线组合（如 `script_editor.tsx`、`variable_picker.tsx`）
 - **前端导入规范**：引入当前文件夹下的内容使用 `./` 相对路径，引入其他模块的代码使用 `@/` 路径别名
+- **前端样式规范**：组件样式使用 `.module.scss` 模块化方式引入，禁止在 TSX 文件中使用内联 `style` 对象定义样式
 - 设计涉及流程或 UML 图形的解决方案时，使用 Mermaid Markdown 语法
 - 在编写计划的时候要遵循 TDD 的开发规范，务必要在方案中进行对实现代码逻辑的单元测试设计。
 - 在设计计划方案或执行方案过程中，对于代码的设计规划与调整修改要遵循本项目的代码风格和架构设计规则
@@ -158,14 +160,21 @@ import { GroovySyntaxConverter } from '../../../src/components/...';
 
 ### 面向对象开发规范
 
-TypeScript 代码根据类型采用不同的开发风格：
+TypeScript 代码根据类型和复杂度选择合适的开发风格：
 
-- **Service、Context、Convert、Utils 等业务处理类**：使用 class 面向对象方式定义，支持依赖注入和扩展
 - **Hooks**：使用函数式方式定义，遵循 React Hooks 规范
+- **业务处理类**（Service、Context、Converter、Utils 等）：根据复杂度选择，复杂逻辑使用 class 便于扩展和维护，简单功能可用函数式
 - **工具函数**：根据场景选择，复杂逻辑使用 class，简单工具可用函数式
 
 ```typescript
-// ✅ 正确：使用 class 定义业务处理类
+// ✅ 正确：Hooks 使用函数式定义
+export const useFlowDesigner = () => {
+  const [nodes, setNodes] = useState<Node[]>([]);
+  // ...
+  return { nodes, setNodes };
+};
+
+// ✅ 正确：复杂业务逻辑使用 class 便于扩展
 export class GroovySyntaxConverter {
   private adapters: Map<ScriptType, ScriptAdapter> = new Map();
 
@@ -176,16 +185,14 @@ export class GroovySyntaxConverter {
   public toScript(...): string { ... }
 }
 
-// ✅ 正确：Hooks 使用函数式定义
-export const useFlowDesigner = () => {
-  const [nodes, setNodes] = useState<Node[]>([]);
-  // ...
-  return { nodes, setNodes };
-};
-
 // ✅ 正确：简单的工具函数可用函数式
 export const formatDate = (date: Date): string => {
   return date.toLocaleDateString();
 };
+
+// ✅ 正确：简单的业务处理也可用函数式
+export const createDefaultMappings = (): GroovyVariableMapping[] => {
+  return [...];
+};
 ```
 

…s/components/variable-picker.module.less …s/components/variable-picker.module.scssfrontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/variable-picker.module.less renamed to frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/variable-picker.module.scss frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/variable-picker.module.less renamed to frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/variable-picker.module.scss

@@ -2,8 +2,8 @@ import React, { useMemo, useState } from 'react';
 import { Modal, Input, Empty } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { GroovyVariableMapping } from '@flow-engine/flow-types';
-import { groovyVariableService } from '@/components/design-editor/script/service/groovy-variable-service';
-import styles from './variable-picker.module.less';
+import { GroovyVariableService } from '@/components/design-editor/script/service/groovy-variable-service';
+import styles from './variable-picker.module.scss';
 
 export interface VariablePickerProps {
   /** 变量映射列表 */
@@ -43,7 +43,7 @@ export const VariablePicker: React.FC<VariablePickerProps> = ({
 
   // 按tag分组
   const groupedMappings = useMemo(() => {
-    return groovyVariableService.groupByTag(filteredMappings);
+    return GroovyVariableService.groupByTag(filteredMappings);
   }, [filteredMappings]);
 
   const handleVariableClick = (mapping: GroovyVariableMapping) => {
@@ -75,11 +75,11 @@ export const VariablePicker: React.FC<VariablePickerProps> = ({
         {groupedMappings.size === 0 ? (
           <Empty description="未找到匹配的变量" />
         ) : (
-          Array.from(groupedMappings.entries()).map(([tag, variables]) => (
+          Array.from(groupedMappings.entries()).map(([tag, variables]: [string, GroovyVariableMapping[]]) => (
             <div key={tag} className={styles.variableGroup}>
               <div className={styles.groupTitle}>{tag}</div>
               <div className={styles.variableItems}>
-                {variables.map(variable => (
+                {variables.map((variable: GroovyVariableMapping) => (
                   <div
                     key={variable.label}
                     className={styles.variableItem}

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/variable-picker.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { GroovyVariableMapping } from '@flow-engine/flow-types';
 import { ScriptConfigModal, ScriptConfigModalProps } from './components/script-config-modal';
 import { ScriptType } from '@/components/design-editor/typings/groovy-script';
-import { groovyVariableService } from '@/components/design-editor/script/service/groovy-variable-service';
+import { GroovyVariableService } from '@/components/design-editor/script/service/groovy-variable-service';
 
 export interface ConditionConfigModalProps extends Omit<ScriptConfigModalProps, 'scriptType' | 'title'> {
   /** 额外的变量（可选） */
@@ -21,7 +21,7 @@ export const ConditionConfigModal: React.FC<ConditionConfigModalProps> = ({
   extraVariables = [],
 }) => {
   // 获取系统变量
-  const systemVariables = groovyVariableService.getSystemVariables(ScriptType.CONDITION);
+  const systemVariables = GroovyVariableService.getSystemVariables(ScriptType.CONDITION);
 
   // 合并变量
   const allVariables = [...systemVariables, ...extraVariables];

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/condition-config-modal.tsx

@@ -0,0 +1,80 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sectionLabel {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.preview {
+  padding: 12px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+  min-height: 40px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.hint {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.25);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-start;
+  padding-top: 8px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.pickerContainer {
+  width: 400px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.pickerList {
+  max-height: 250px;
+  overflow: auto;
+}
+
+.pickerGroupTitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.45);
+  padding: 8px 0 4px;
+}
+
+.pickerItems {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pickerItem {
+  padding: 4px 8px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pickerItemLabel {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.pickerItemValue {
+  font-size: 11px;
+  color: rgba(0, 0, 0, 0.45);
+}