@coding-script/script-engine 0.0.1 → 0.0.2

package/README.md

@@ -1,23 +1,244 @@
-# Rslib project
+[![npm](https://img.shields.io/npm/v/@coding-script/script-engine.svg)](https://www.npmjs.com/package/@coding-script/script-engine)
+# Script Engine
 
-## Setup
+基于 React + CodeMirror 6 的 Groovy 脚本编辑器组件库，提供语法高亮、动态类型自动补全、属性面板等功能。
 
-Install the dependencies:
+## 功能特性
+
+- **Groovy 语法高亮**：基于 CodeMirror 6，支持完整的 Groovy/Java 语法着色
+- **动态类型自动补全**：基于 `ScriptMetadata` 提供变量名补全和点号链式访问补全（如 `request.test.name`）
+- **Groovy 语法提示**：内置 `if`/`for`/`while`/`println`/`return` 等常用 Groovy 语法片段
+- **代码格式化**：内置 Groovy 格式化器，也可通过 `onFormat` 自定义格式化逻辑
+- **属性面板**：右侧侧边栏展示主函数签名、变量、数据类型（字段和方法），支持折叠/展开和拖拽调节宽度
+- **主题切换**：暗色/亮色两套主题，编辑器、补全弹窗、属性面板同步切换，编辑器内部管理主题状态
+- **全屏模式**：支持 CSS 全屏（`position: fixed` 覆盖视口），不影响编辑器内容
+- **自定义工具栏**：通过 `toolbarExtra` 传入任意 React 节点
+- **热更新**：主题和 metadata 变化时通过 Compartment 热更新，不重建编辑器，不丢失用户输入
+
+## 安装
 
 ```bash
-pnpm install
+npm install @coding-script/script-engine
+# 或
+pnpm add @coding-script/script-engine
 ```
 
-## Get started
+## 基础用法
 
-Build the library:
+```tsx
+import { ScriptCodeEditor } from '@coding-script/script-engine';
+import type { ScriptMetadata } from '@coding-script/script-engine';
 
-```bash
-pnpm run build
+const metadata: ScriptMetadata = {
+  mainMethod: 'run',
+  returnType: 'Integer',
+  binds: [
+    { dataType: 'GroovyBindObject', name: '$request' },
+  ],
+  requests: [
+    { dataType: 'MyScriptRequest', description: '请求参数', name: 'request' },
+  ],
+  types: {
+    MyScriptRequest: {
+      dataType: 'MyScriptRequest',
+      description: '请求参数类型',
+      fields: [
+        { dataType: 'int', description: '总数量', name: 'count' },
+        { dataType: 'MyTest', description: '测试对象', name: 'test' },
+      ],
+      functions: [
+        {
+          name: 'isSupport',
+          description: '是否匹配',
+          parameters: [{ dataType: 'int', description: '数量', name: 'count' }],
+        },
+      ],
+    },
+    MyTest: {
+      dataType: 'MyTest',
+      description: '测试对象',
+      fields: [
+        { dataType: 'Long', description: 'id', name: 'id' },
+        { dataType: 'String', description: '名称', name: 'name' },
+      ],
+      functions: [],
+    },
+    Integer: { dataType: 'Integer', fields: [], functions: [] },
+    String: { dataType: 'String', fields: [], functions: [] },
+    Long: { dataType: 'Long', fields: [], functions: [] },
+    int: { dataType: 'int', fields: [], functions: [] },
+  },
+};
+
+function App() {
+  return (
+    <ScriptCodeEditor
+      value="def run(request){\n    return request.count;\n}\n"
+      title="Groovy 脚本编辑器"
+      defaultTheme="dark"
+      metadata={metadata}
+      enableThemeToggle
+      enableFormat
+      enableCompile
+      enableFullscreen
+      onThemeChange={(theme) => console.log('主题切换:', theme)}
+      onChange={(code) => console.log('代码变化:', code)}
+      onCompile={(code) => console.log('编译验证:', code)}
+      options={{ minHeight: 400, maxHeight: 500 }}
+    />
+  );
+}
 ```
 
-Build the library in watch mode:
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|---|---|---|---|
+| `value` | `string` | `undefined` | 代码内容 |
+| `readonly` | `boolean` | `false` | 是否只读 |
+| `onChange` | `(value: string) => void` | `undefined` | 代码变化回调 |
+| `placeholder` | `string` | `'请输入 Groovy 脚本...'` | 空内容占位符 |
+| `defaultTheme` | `'dark' \| 'light'` | `'dark'` | 初始主题，编辑器内部管理状态 |
+| `onThemeChange` | `(theme: 'dark' \| 'light') => void` | `undefined` | 主题切换通知回调 |
+| `title` | `string` | `undefined` | 工具栏标题 |
+| `metadata` | `ScriptMetadata` | `undefined` | 脚本元数据，提供后启用属性面板和自动补全 |
+| `defaultSidebarOpen` | `boolean` | `metadata != null` | 属性面板默认是否展开 |
+
+### 工具栏按钮控制
+
+所有工具栏按钮默认**禁用**，需通过 `enable*` 标志显式开启：
+
+| 属性 | 类型 | 默认值 | 说明 |
+|---|---|---|---|
+| `enableThemeToggle` | `boolean` | `false` | 是否显示主题切换按钮 |
+| `enableFormat` | `boolean` | `false` | 是否显示格式化按钮（需配合 `onFormat`） |
+| `enableCompile` | `boolean` | `false` | 是否显示编译验证按钮（需配合 `onCompile`） |
+| `enableFullscreen` | `boolean` | `false` | 是否显示全屏按钮 |
+
+### 按钮回调
+
+| 属性 | 类型 | 默认值 | 说明 |
+|---|---|---|---|
+| `onFormat` | `() => void` | `undefined` | 格式化代码回调（不提供时使用内置 Groovy 格式化器） |
+| `onCompile` | `(code: string) => void` | `undefined` | 编译/测试脚本回调 |
+
+### 自定义工具栏
+
+| 属性 | 类型 | 默认值 | 说明 |
+|---|---|---|---|
+| `toolbarExtra` | `React.ReactNode` | `undefined` | 工具栏额外内容，渲染在内置按钮之后，可传入任意 JSX |
+
+```tsx
+<ScriptCodeEditor
+  toolbarExtra={
+    <>
+      <button onClick={save}>💾 保存</button>
+      <button onClick={help}>❓ 帮助</button>
+    </>
+  }
+/>
+```
+
+### 布局选项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|---|---|---|---|
+| `options.fontSize` | `number` | `14` | 字体大小（px） |
+| `options.minHeight` | `number` | `300` | 编辑器最小高度（px） |
+| `options.maxHeight` | `number` | `300` | 编辑器最大高度（px） |
+
+## ScriptMetadata 数据结构
+
+```typescript
+interface ScriptMetadata {
+  /** 主函数名称 */
+  mainMethod: string;
+  /** 注入变量（如 $request，name 含 $ 前缀） */
+  binds: ScriptBindInfo[];
+  /** 主函数参数 */
+  requests: ScriptRequestInfo[];
+  /** 主函数返回类型（可选） */
+  returnType?: string;
+  /** 所有可用类型定义（含基础类型如 Integer/String） */
+  types: Record<string, ScriptTypeInfo>;
+}
+
+interface ScriptTypeInfo {
+  dataType: string;
+  description?: string;
+  fields: ScriptFieldInfo[];
+  functions: ScriptFunctionInfo[];
+}
+
+interface ScriptFieldInfo {
+  name: string;
+  dataType: string;
+  description?: string;
+}
+
+interface ScriptFunctionInfo {
+  name: string;
+  parameters: ScriptParameterInfo[];
+  description?: string;
+  returnType?: string;
+}
+
+interface ScriptParameterInfo {
+  name: string;
+  dataType: string;
+  description?: string;
+}
+
+interface ScriptBindInfo {
+  name: string;
+  dataType: string;
+  description?: string;
+}
+
+interface ScriptRequestInfo {
+  name: string;
+  dataType: string;
+  description?: string;
+}
+```
+
+> **注意**：`metadata` 必须是解析后的 JavaScript 对象，不能是 JSON 字符串。如果从 API 获取的是 JSON 字符串，需要先 `JSON.parse()` 再传入。
+
+## 自动补全
+
+提供 metadata 后，编辑器支持以下补全能力：
+
+| 输入 | 补全内容 |
+|---|---|
+| `re` | 弹出 `request`、`$request` 等变量 |
+| `request.` | 弹出 `count`、`test`、`isSupport` 等字段和方法 |
+| `request.test.` | 弹出 `id`、`name` 等链式访问成员 |
+| `if` / `for` / `while` | 弹出 Groovy 语法片段（含 tab-stop 占位符） |
+
+不提供 metadata 时，仅启用 Groovy 关键字和语法片段补全。
+
+## 本地开发
 
 ```bash
-pnpm run dev
-```
+# 安装依赖
+pnpm install
+
+# 启动库 watch 模式（终端 1）
+pnpm run watch:script-engine
+
+# 启动演示应用（终端 2）
+pnpm run dev:app-pc
+```
+
+演示应用访问 http://localhost:3000
+
+## 技术栈
+
+- **编辑器**：[CodeMirror 6](https://codemirror.net/)（`@codemirror/view`、`state`、`autocomplete`、`lang-java`、`theme-one-dark`）
+- **构建工具**：[Rslib](https://rslib.rs/)（库）+ [Rsbuild](https://rsbuild.dev/)（演示应用）
+- **包管理**：pnpm monorepo（workspaces）
+- **UI**：纯 CSS-in-JS（React `style` 对象），库本身不依赖 Ant Design
+
+## License
+
+MIT

package/dist/components/format-icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FormatIcon: React.FC<{
+    color: string;
+}>;

package/dist/components/format-icon.js

@@ -0,0 +1,52 @@
+import react from "react";
+const FormatIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        style: {
+            flexShrink: 0
+        }
+    }, /*#__PURE__*/ react.createElement("rect", {
+        x: "4",
+        y: "2",
+        width: "16",
+        height: "20",
+        rx: "2",
+        stroke: color,
+        strokeWidth: "1.5",
+        fill: "none"
+    }), /*#__PURE__*/ react.createElement("line", {
+        x1: "7",
+        y1: "7",
+        x2: "14",
+        y2: "7",
+        stroke: color,
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+    }), /*#__PURE__*/ react.createElement("line", {
+        x1: "7",
+        y1: "10.5",
+        x2: "17",
+        y2: "10.5",
+        stroke: color,
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+    }), /*#__PURE__*/ react.createElement("line", {
+        x1: "9",
+        y1: "14",
+        x2: "15",
+        y2: "14",
+        stroke: color,
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+    }), /*#__PURE__*/ react.createElement("line", {
+        x1: "7",
+        y1: "17.5",
+        x2: "12",
+        y2: "17.5",
+        stroke: color,
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+    }));
+export { FormatIcon };

package/dist/components/fullscreen-icon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/** 最大化图标（四角向外展开） */
+export declare const MaximizeIcon: React.FC<{
+    color: string;
+}>;
+/** 最小化图标（四角向内收缩） */
+export declare const MinimizeIcon: React.FC<{
+    color: string;
+}>;

package/dist/components/fullscreen-icon.js

@@ -0,0 +1,68 @@
+import react from "react";
+const MaximizeIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        style: {
+            flexShrink: 0
+        }
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M4 9V4h5",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M20 9V4h-5",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M4 15v5h5",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M20 15v5h-5",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }));
+const MinimizeIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        style: {
+            flexShrink: 0
+        }
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M9 4v5H4",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M15 4v5h5",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M9 20v-5H4",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M15 20v-5h5",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }));
+export { MaximizeIcon, MinimizeIcon };

package/dist/components/index.d.ts

@@ -26,3 +26,4 @@ export { VariablesSection } from './variables-section';
 export type { VariablesSectionProps } from './variables-section';
 export { DataTypesSection } from './data-types-section';
 export type { DataTypesSectionProps } from './data-types-section';
+export { MaximizeIcon, MinimizeIcon } from './fullscreen-icon';

package/dist/components/index.js

@@ -12,3 +12,4 @@ export { TypeSection } from "./type-section.js";
 export { MainFunctionSection } from "./main-function-section.js";
 export { VariablesSection } from "./variables-section.js";
 export { DataTypesSection } from "./data-types-section.js";
+export { MaximizeIcon, MinimizeIcon } from "./fullscreen-icon.js";

package/dist/components/toolbar.d.ts

@@ -3,6 +3,14 @@ export interface ToolbarProps {
     title?: string;
     theme: 'dark' | 'light';
     onThemeChange?: (theme: 'dark' | 'light') => void;
+    enableThemeToggle?: boolean;
+    enableFormat?: boolean;
+    onFormat?: () => void;
+    enableCompile?: boolean;
     onCompile?: () => void;
+    enableFullscreen?: boolean;
+    isFullscreen?: boolean;
+    onToggleFullscreen?: () => void;
+    toolbarExtra?: React.ReactNode;
 }
 export declare const Toolbar: React.FC<ToolbarProps>;

package/dist/components/toolbar.js

@@ -1,5 +1,7 @@
 import react from "react";
 import { ToolbarButton } from "./toolbar-button.js";
+import { FormatIcon } from "./format-icon.js";
+import { MaximizeIcon, MinimizeIcon } from "./fullscreen-icon.js";
 const HammerIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
         width: "14",
         height: "14",
@@ -26,7 +28,7 @@ const HammerIcon = ({ color })=>/*#__PURE__*/ react.createElement("svg", {
         opacity: 0.8,
         transform: "rotate(-25 12.25 14.5)"
     }));
-const Toolbar = ({ title, theme, onThemeChange, onCompile })=>{
+const Toolbar = ({ title, theme, onThemeChange, enableThemeToggle, enableFormat, onFormat, enableCompile, onCompile, enableFullscreen, isFullscreen, onToggleFullscreen, toolbarExtra })=>{
     const isDark = 'dark' === theme;
     const borderColor = isDark ? '#434343' : '#d9d9d9';
     const toolbarBg = isDark ? '#282c34' : '#fafafa';
@@ -62,7 +64,7 @@ const Toolbar = ({ title, theme, onThemeChange, onCompile })=>{
         style: {
             marginRight: 'auto'
         }
-    }), /*#__PURE__*/ react.createElement(ToolbarButton, {
+    }), enableThemeToggle && /*#__PURE__*/ react.createElement(ToolbarButton, {
         label: isDark ? '🌞 浅色模式' : '🌙 深色模式',
         title: isDark ? '切换到浅色主题' : '切换到深色主题',
         bg: btnBg,
@@ -70,7 +72,17 @@ const Toolbar = ({ title, theme, onThemeChange, onCompile })=>{
         color: toolbarText,
         border: borderColor,
         onClick: handleThemeToggle
-    }), onCompile && /*#__PURE__*/ react.createElement(ToolbarButton, {
+    }), enableFormat && onFormat && /*#__PURE__*/ react.createElement(ToolbarButton, {
+        label: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormatIcon, {
+            color: isDark ? '#61afef' : '#1677ff'
+        }), "格式化"),
+        title: "格式化代码",
+        bg: isDark ? '#1e3a5f' : '#e6f4ff',
+        hoverBg: isDark ? '#264a73' : '#bae0ff',
+        color: isDark ? '#61afef' : '#1677ff',
+        border: isDark ? '#1e3a5f' : '#91caff',
+        onClick: onFormat
+    }), enableCompile && onCompile && /*#__PURE__*/ react.createElement(ToolbarButton, {
         label: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(HammerIcon, {
             color: isDark ? '#98c379' : '#389e0d'
         }), "编译验证"),
@@ -80,6 +92,18 @@ const Toolbar = ({ title, theme, onThemeChange, onCompile })=>{
         color: isDark ? '#98c379' : '#389e0d',
         border: isDark ? '#2d5a27' : '#b7eb8f',
         onClick: onCompile
-    }));
+    }), enableFullscreen && /*#__PURE__*/ react.createElement(ToolbarButton, {
+        label: /*#__PURE__*/ react.createElement(react.Fragment, null, isFullscreen ? /*#__PURE__*/ react.createElement(MinimizeIcon, {
+            color: isDark ? '#c678dd' : '#722ed1'
+        }) : /*#__PURE__*/ react.createElement(MaximizeIcon, {
+            color: isDark ? '#c678dd' : '#722ed1'
+        }), isFullscreen ? '退出全屏' : '全屏模式'),
+        title: isFullscreen ? '退出全屏（ESC）' : '全屏显示',
+        bg: isDark ? '#3a2d5a' : '#f3e8ff',
+        hoverBg: isDark ? '#4a3d6a' : '#e9d5ff',
+        color: isDark ? '#c678dd' : '#722ed1',
+        border: isDark ? '#3a2d5a' : '#d3adf7',
+        onClick: ()=>onToggleFullscreen?.()
+    }), toolbarExtra);
 };
 export { Toolbar };

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./script-code";
 export * from "./types";
+export { GroovyFormatter, GroovyScriptConvertorUtil } from "./utils/groovy-formatter";
+export type { FormatOptions } from "./utils/groovy-formatter";

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from "./script-code.js";
 export * from "./types/index.js";
+export { GroovyFormatter, GroovyScriptConvertorUtil } from "./utils/groovy-formatter.js";

package/dist/script-code.js

@@ -11,6 +11,7 @@ import { createGroovyCompletionSource, createGroovyKeywordSource } from "./autoc
 import { TypePanel } from "./type-panel/index.js";
 import { Toolbar } from "./components/toolbar.js";
 import { ExpandSidebarButton } from "./components/expand-sidebar-button.js";
+import { GroovyFormatter } from "./utils/groovy-formatter.js";
 const darkHighlightStyle = HighlightStyle.define([
     {
         tag: tags.keyword,
@@ -146,23 +147,86 @@ function buildAutocompleteExt(metadata) {
         icons: true
     });
 }
+function buildLayoutExtensions(fontSize, minHeight, maxHeight, isFullscreen) {
+    if (isFullscreen) return EditorView.theme({
+        '&': {
+            fontSize: `${fontSize}px`,
+            height: '100%'
+        },
+        '.cm-scroller': {
+            overflow: 'auto',
+            flex: '1',
+            minHeight: '0'
+        },
+        '.cm-content': {
+            fontFamily: 'monospace'
+        }
+    });
+    return EditorView.theme({
+        '&': {
+            fontSize: `${fontSize}px`
+        },
+        '.cm-scroller': {
+            overflow: 'auto',
+            minHeight: `${minHeight}px`,
+            maxHeight: `${maxHeight}px`
+        },
+        '.cm-content': {
+            fontFamily: 'monospace',
+            minHeight: `${minHeight}px`
+        },
+        '.cm-gutters': {
+            minHeight: `${minHeight}px`
+        }
+    });
+}
 const ScriptCodeEditor = (props)=>{
-    const { value, readonly = false, onChange, onCompile, onThemeChange, placeholder = '请输入 Groovy 脚本...', theme = 'dark', title, metadata, defaultSidebarOpen, options = {} } = props;
+    const { value, readonly = false, onChange, onCompile, onFormat, onThemeChange, placeholder = '请输入 Groovy 脚本...', defaultTheme, title, metadata, defaultSidebarOpen, enableThemeToggle, enableFormat, enableCompile, enableFullscreen, toolbarExtra, options = {} } = props;
     const { fontSize = 14, minHeight = 300, maxHeight = 300 } = options;
+    const [internalTheme, setInternalTheme] = useState(defaultTheme ?? 'dark');
+    useEffect(()=>{
+        if (void 0 !== defaultTheme) setInternalTheme(defaultTheme);
+    }, [
+        defaultTheme
+    ]);
     const editorContainerRef = useRef(null);
     const viewRef = useRef(null);
     const themeCompartmentRef = useRef(new Compartment());
     const autocompleteCompartmentRef = useRef(new Compartment());
+    const layoutCompartmentRef = useRef(new Compartment());
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
     const metadataRef = useRef(metadata);
     metadataRef.current = metadata;
     const [sidebarOpen, setSidebarOpen] = useState(defaultSidebarOpen ?? null != metadata);
     const [panelWidth, setPanelWidth] = useState(300);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    useEffect(()=>{
+        if (isFullscreen) {
+            const prev = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return ()=>{
+                document.body.style.overflow = prev;
+            };
+        }
+    }, [
+        isFullscreen
+    ]);
+    useEffect(()=>{
+        if (!isFullscreen) return;
+        const handleKeyDown = (e)=>{
+            if ('Escape' === e.key) setIsFullscreen(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        isFullscreen
+    ]);
     useEffect(()=>{
         if (!editorContainerRef.current) return;
         const themeCompartment = themeCompartmentRef.current;
         const acCompartment = autocompleteCompartmentRef.current;
+        const layoutCompartment = layoutCompartmentRef.current;
         const extensions = [
             lineNumbers(),
             highlightActiveLineGutter(),
@@ -189,24 +253,8 @@ const ScriptCodeEditor = (props)=>{
             EditorView.updateListener.of((update)=>{
                 if (update.docChanged && onChangeRef.current) onChangeRef.current(update.state.doc.toString());
             }),
-            EditorView.theme({
-                '&': {
-                    fontSize: `${fontSize}px`
-                },
-                '.cm-scroller': {
-                    overflow: 'auto',
-                    minHeight: `${minHeight}px`,
-                    maxHeight: `${maxHeight}px`
-                },
-                '.cm-content': {
-                    fontFamily: 'monospace',
-                    minHeight: `${minHeight}px`
-                },
-                '.cm-gutters': {
-                    minHeight: `${minHeight}px`
-                }
-            }),
-            themeCompartment.of(buildThemeExtensions(theme)),
+            layoutCompartment.of(buildLayoutExtensions(fontSize, minHeight, maxHeight, false)),
+            themeCompartment.of(buildThemeExtensions(internalTheme)),
             acCompartment.of(buildAutocompleteExt(metadataRef.current))
         ];
         if (readonly) extensions.push(EditorState.readOnly.of(true));
@@ -243,10 +291,10 @@ const ScriptCodeEditor = (props)=>{
     useEffect(()=>{
         if (!viewRef.current) return;
         viewRef.current.dispatch({
-            effects: themeCompartmentRef.current.reconfigure(buildThemeExtensions(theme))
+            effects: themeCompartmentRef.current.reconfigure(buildThemeExtensions(internalTheme))
         });
     }, [
-        theme
+        internalTheme
     ]);
     useEffect(()=>{
         if (!viewRef.current) return;
@@ -256,30 +304,80 @@ const ScriptCodeEditor = (props)=>{
     }, [
         metadata
     ]);
-    const isDark = 'dark' === theme;
+    useEffect(()=>{
+        if (!viewRef.current) return;
+        viewRef.current.dispatch({
+            effects: layoutCompartmentRef.current.reconfigure(buildLayoutExtensions(fontSize, minHeight, maxHeight, isFullscreen))
+        });
+        requestAnimationFrame(()=>{
+            viewRef.current?.requestMeasure();
+        });
+    }, [
+        isFullscreen,
+        fontSize,
+        minHeight,
+        maxHeight
+    ]);
+    const isDark = 'dark' === internalTheme;
     const borderColor = isDark ? '#434343' : '#d9d9d9';
     const expandBtnBg = isDark ? '#2c313a' : '#f0f0f0';
     const expandBtnColor = isDark ? '#abb2bf' : '#666';
     const handleCompile = ()=>{
         if (onCompile && viewRef.current) onCompile(viewRef.current.state.doc.toString());
     };
+    const handleFormat = ()=>{
+        if (viewRef.current) {
+            const code = viewRef.current.state.doc.toString();
+            const formatted = GroovyFormatter.formatScript(code);
+            if (formatted !== code) viewRef.current.dispatch({
+                changes: {
+                    from: 0,
+                    to: viewRef.current.state.doc.length,
+                    insert: formatted
+                }
+            });
+        }
+    };
     return /*#__PURE__*/ react.createElement("div", {
-        style: {
+        style: isFullscreen ? {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 9999,
+            backgroundColor: isDark ? '#21252b' : '#ffffff',
+            display: 'flex',
+            flexDirection: 'column'
+        } : {
             display: 'flex',
             flexDirection: 'column'
         }
     }, /*#__PURE__*/ react.createElement(Toolbar, {
         title: title,
-        theme: theme,
-        onThemeChange: onThemeChange,
-        onCompile: onCompile ? handleCompile : void 0
+        theme: internalTheme,
+        onThemeChange: (next)=>{
+            setInternalTheme(next);
+            onThemeChange?.(next);
+        },
+        enableThemeToggle: enableThemeToggle,
+        enableFormat: enableFormat,
+        onFormat: readonly ? void 0 : onFormat ?? handleFormat,
+        enableCompile: enableCompile,
+        onCompile: onCompile ? handleCompile : void 0,
+        enableFullscreen: enableFullscreen,
+        isFullscreen: isFullscreen,
+        onToggleFullscreen: ()=>setIsFullscreen((prev)=>!prev),
+        toolbarExtra: toolbarExtra
     }), /*#__PURE__*/ react.createElement("div", {
         style: {
             display: 'flex',
             border: `1px solid ${borderColor}`,
             borderTop: 'none',
-            borderRadius: '0 0 6px 6px',
-            overflow: 'hidden'
+            borderRadius: isFullscreen ? 0 : '0 0 6px 6px',
+            overflow: 'hidden',
+            flex: isFullscreen ? 1 : void 0,
+            minHeight: isFullscreen ? 0 : void 0
         }
     }, /*#__PURE__*/ react.createElement("div", {
         style: {
@@ -293,12 +391,15 @@ const ScriptCodeEditor = (props)=>{
         expandBtnBg: expandBtnBg,
         onClick: ()=>setSidebarOpen(true)
     }), /*#__PURE__*/ react.createElement("div", {
-        ref: editorContainerRef
+        ref: editorContainerRef,
+        style: isFullscreen ? {
+            height: '100%'
+        } : void 0
     })), metadata && sidebarOpen && /*#__PURE__*/ react.createElement(TypePanel, {
         metadata: metadata,
-        theme: theme,
-        minHeight: minHeight,
-        maxHeight: maxHeight,
+        theme: internalTheme,
+        minHeight: isFullscreen ? void 0 : minHeight,
+        maxHeight: isFullscreen ? void 0 : maxHeight,
         width: panelWidth,
         onWidthChange: setPanelWidth,
         onCollapse: ()=>setSidebarOpen(false)

package/dist/type-panel/type-panel.d.ts

@@ -3,8 +3,8 @@ import type { ScriptMetadata } from '../types';
 export interface TypePanelProps {
     metadata: ScriptMetadata;
     theme: 'dark' | 'light';
-    minHeight: number;
-    maxHeight: number;
+    minHeight?: number;
+    maxHeight?: number;
     width: number;
     onWidthChange: (width: number) => void;
     onCollapse: () => void;

package/dist/type-panel/type-panel.js

@@ -78,8 +78,8 @@ const TypePanel = ({ metadata, theme, minHeight, maxHeight, width, onWidthChange
             display: 'flex',
             flexDirection: 'row',
             overflow: 'hidden',
-            minHeight: `${minHeight}px`,
-            maxHeight: `${maxHeight}px`,
+            minHeight: null != minHeight ? `${minHeight}px` : void 0,
+            maxHeight: null != maxHeight ? `${maxHeight}px` : void 0,
             position: 'relative'
         }
     }, /*#__PURE__*/ react.createElement(DragHandle, {

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 /** 函数参数信息 */
 export interface ScriptParameterInfo {
     dataType: string;
@@ -51,20 +52,32 @@ export interface ScriptCodeEditorProps {
     readonly?: boolean;
     /** 代码变化回调 */
     onChange?: (value: string) => void;
-    /** 编译/测试脚本回调（后续接入 API） */
-    onCompile?: (code: string) => void;
-    /** 主题切换回调 */
-    onThemeChange?: (theme: 'dark' | 'light') => void;
     /** 占位符 */
     placeholder?: string;
-    /** 主题 */
-    theme?: 'dark' | 'light';
+    /** 初始主题（默认 'dark'），编辑器内部管理状态 */
+    defaultTheme?: 'dark' | 'light';
+    /** 主题切换通知回调（可选） */
+    onThemeChange?: (theme: 'dark' | 'light') => void;
     /** 标题（可选） */
     title?: string;
     /** 脚本元数据 — 提供后启用类型面板和自动补全 */
     metadata?: ScriptMetadata;
     /** 类型面板侧边栏默认是否展开（默认：提供 metadata 时为 true） */
     defaultSidebarOpen?: boolean;
+    /** 是否显示主题切换按钮（默认 false） */
+    enableThemeToggle?: boolean;
+    /** 是否显示格式化按钮（默认 false，需配合 onFormat 使用） */
+    enableFormat?: boolean;
+    /** 是否显示编译验证按钮（默认 false，需配合 onCompile 使用） */
+    enableCompile?: boolean;
+    /** 是否显示全屏按钮（默认 false） */
+    enableFullscreen?: boolean;
+    /** 格式化代码回调（enableFormat 时需提供） */
+    onFormat?: () => void;
+    /** 编译/测试脚本回调（enableCompile 时需提供） */
+    onCompile?: (code: string) => void;
+    /** 工具栏额外内容（渲染在内置按钮之后，任意 React 节点） */
+    toolbarExtra?: React.ReactNode;
     /** 其他选项 */
     options?: {
         /** 字体大小 */

package/dist/utils/groovy-formatter.d.ts

@@ -0,0 +1,105 @@
+/** 自定义脚本标记 */
+export declare const CUSTOM_SCRIPT = "@CUSTOM_SCRIPT";
+/** 脚本标题标记 */
+export declare const SCRIPT_TITLE = "@SCRIPT_TITLE";
+/** 脚本元数据标记 */
+export declare const SCRIPT_META = "@SCRIPT_META";
+/**
+ * 格式化选项接口
+ */
+export interface FormatOptions {
+    /** 缩进大小（空格数） */
+    indentSize?: number;
+    /** 操作符周围添加空格 */
+    addSpacesAroundOperators?: boolean;
+    /** 格式化注释 */
+    formatComments?: boolean;
+    /** 最大行长度 */
+    maxLineLength?: number;
+    /** 保留空行 */
+    preserveEmptyLines?: boolean;
+}
+/**
+ * Groovy脚本格式化器
+ */
+export declare class GroovyFormatter {
+    /**
+     * 格式化Groovy脚本内容
+     * @param script Groovy脚本内容
+     * @returns 格式化后的脚本
+     */
+    static formatScript(script: string): string;
+    /**
+     * 规范化缩进
+     */
+    private static normalizeIndentation;
+    /**
+     * 判断是否需要增加缩进
+     */
+    private static shouldIncreaseIndent;
+    /**
+     * 判断是否需要减少缩进
+     */
+    private static shouldDecreaseIndent;
+    /**
+     * 增强版格式化：包含更多Groovy特定处理
+     */
+    static formatGroovyScript(script: string, options?: FormatOptions): string;
+    /**
+     * 格式化注释
+     */
+    private static formatComments;
+    /**
+     * 操作符周围添加空格
+     */
+    private static addSpacesAroundOperators;
+    /**
+     * 格式化Groovy特定语法
+     */
+    private static formatGroovySpecific;
+    /**
+     * 压缩脚本（移除所有非必要空白）
+     */
+    static minifyScript(script: string): string;
+}
+/**
+ * Groovy脚本转换器工具类，提供一些通用的脚本处理方法
+ */
+export declare class GroovyScriptConvertorUtil {
+    /**
+     * 判断脚本是否包含自定义注释标记
+     */
+    static isCustomScript(script: string): boolean;
+    /**
+     * 格式化脚本内容，去除多余空白等
+     */
+    static formatScript(script: string): string;
+    /**
+     * 将普通脚本转换为包含自定义注释标记的脚本
+     */
+    static toCustomScript(script: string): string;
+    /**
+     * 获取脚本中的标题注释内容
+     */
+    static getScriptTitle(script: string): string;
+    /**
+     * 更新脚本中的标题注释内容，如果不存在则添加
+     */
+    static updateScriptTitle(script: string, title: string): string;
+    /**
+     * 获取脚本中的元数据
+     */
+    static getScriptMeta(script: string): string;
+    /**
+     * 更新脚本中的元数据内容，如果不存在则添加
+     */
+    static updateScriptMeta(script: string, meta: string): string;
+    /**
+     * 清除脚本中的注释
+     */
+    static clearComments(script: string): string;
+    /**
+     * 提取脚本中的return表达式
+     */
+    static getReturnScript(script: string): string;
+}

package/dist/utils/groovy-formatter.js

@@ -0,0 +1,239 @@
+const CUSTOM_SCRIPT = '@CUSTOM_SCRIPT';
+const SCRIPT_TITLE = '@SCRIPT_TITLE';
+const SCRIPT_META = '@SCRIPT_META';
+class GroovyFormatter {
+    static formatScript(script) {
+        if (!script || 0 === script.trim().length) return '';
+        let formatted = script;
+        formatted = formatted.trim();
+        formatted = formatted.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+        formatted = formatted.replace(/\n\s*\n/g, '\n\n');
+        const lines = formatted.split('\n');
+        formatted = lines.map((line)=>line.replace(/\s+$/, '')).join('\n');
+        formatted = formatted.replace(/\n+$/, '\n');
+        formatted = this.normalizeIndentation(formatted);
+        return formatted;
+    }
+    static normalizeIndentation(script) {
+        const lines = script.split('\n');
+        const result = [];
+        let indentLevel = 0;
+        let inMultilineString = false;
+        let multilineStringDelimiter = '';
+        for(let i = 0; i < lines.length; i++){
+            const line = lines[i];
+            const trimmedLine = line.trim();
+            if (0 === trimmedLine.length) {
+                result.push('');
+                continue;
+            }
+            if (inMultilineString) {
+                if (trimmedLine.includes(multilineStringDelimiter)) {
+                    const count = (trimmedLine.match(new RegExp(multilineStringDelimiter, 'g')) || []).length;
+                    if (count % 2 === 1) {
+                        inMultilineString = false;
+                        multilineStringDelimiter = '';
+                    }
+                }
+            } else if (trimmedLine.includes("'''") || trimmedLine.includes('"""')) {
+                const delimiter = trimmedLine.includes("'''") ? "'''" : '"""';
+                const count = (trimmedLine.match(new RegExp(delimiter, 'g')) || []).length;
+                if (count % 2 === 1) {
+                    inMultilineString = true;
+                    multilineStringDelimiter = delimiter;
+                }
+            }
+            if (inMultilineString) result.push(line);
+            else {
+                const shouldDecreaseIndent = this.shouldDecreaseIndent(trimmedLine);
+                if (shouldDecreaseIndent) indentLevel = Math.max(0, indentLevel - 1);
+                const indentation = '    '.repeat(indentLevel);
+                if (this.shouldIncreaseIndent(trimmedLine)) indentLevel++;
+                result.push(indentation + trimmedLine);
+            }
+        }
+        return result.join('\n');
+    }
+    static shouldIncreaseIndent(line) {
+        const increasePatterns = [
+            /.*\{\s*$/,
+            /.*\(\s*$/,
+            /.*\[\s*$/,
+            /^if\s*\(.*\)\s*$/,
+            /^for\s*\(.*\)\s*$/,
+            /^while\s*\(.*\)\s*$/,
+            /^switch\s*\(.*\)\s*$/,
+            /^try\s*$/,
+            /^catch\s*\(.*\)\s*$/,
+            /^finally\s*$/,
+            /^else\s*$/,
+            /^else\s+if\s*\(.*\)\s*$/,
+            /.*->\s*$/,
+            /^def\s+\w+\s*=\s*\{/,
+            /^class\s+\w+/,
+            /^interface\s+\w+/,
+            /^enum\s+\w+/,
+            /^annotation\s+\w+/,
+            /^trait\s+\w+/,
+            /^static\s*\{/
+        ];
+        return increasePatterns.some((pattern)=>pattern.test(line));
+    }
+    static shouldDecreaseIndent(line) {
+        const decreasePatterns = [
+            /^\}/,
+            /^\]/,
+            /^\)/,
+            /^else\b/,
+            /^catch\b/,
+            /^finally\b/,
+            /^case\b/,
+            /^default\s*:/
+        ];
+        return decreasePatterns.some((pattern)=>pattern.test(line));
+    }
+    static formatGroovyScript(script, options) {
+        if (!script || 0 === script.trim().length) return '';
+        const opts = {
+            indentSize: 4,
+            addSpacesAroundOperators: true,
+            formatComments: true,
+            ...options
+        };
+        let formatted = script;
+        formatted = formatted.trim();
+        formatted = formatted.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+        if (opts.formatComments) formatted = this.formatComments(formatted);
+        if (opts.addSpacesAroundOperators) formatted = this.addSpacesAroundOperators(formatted);
+        formatted = formatted.replace(/,(?!\s)/g, ', ');
+        formatted = formatted.replace(/;(?!\s)/g, '; ');
+        formatted = formatted.replace(/\s+/g, ' ');
+        const lines = formatted.split(';');
+        if (lines.length > 1) formatted = lines.map((line)=>line.trim()).filter((line)=>line.length > 0).join(';\n');
+        formatted = this.normalizeIndentation(formatted);
+        formatted = this.formatGroovySpecific(formatted);
+        return formatted;
+    }
+    static formatComments(script) {
+        let formatted = script.replace(/\/\/\s*/g, '// ');
+        formatted = formatted.replace(/\/\*(\s*)\*\//g, '/**$1*/');
+        return formatted;
+    }
+    static addSpacesAroundOperators(script) {
+        const operators = [
+            '=',
+            '==',
+            '!=',
+            '===',
+            '!==',
+            '>',
+            '<',
+            '>=',
+            '<=',
+            '+',
+            '-',
+            '*',
+            '/',
+            '%',
+            '&&',
+            '||',
+            '&',
+            '|',
+            '^',
+            '<<',
+            '>>',
+            '>>>',
+            '+=',
+            '-=',
+            '*=',
+            '/=',
+            '%=',
+            '&=',
+            '|=',
+            '^=',
+            '<<=',
+            '>>=',
+            '>>>='
+        ];
+        let formatted = script;
+        operators.forEach((op)=>{
+            const regex = new RegExp(`(?<![\\'"\\\`])\\\\${op}(?![\\'"\\\`])`, 'g');
+            formatted = formatted.replace(regex, ` ${op} `);
+        });
+        formatted = formatted.replace(/\s+/g, ' ');
+        return formatted;
+    }
+    static formatGroovySpecific(script) {
+        let formatted = script;
+        formatted = formatted.replace(/\$\{(\s*)(\w+)(\s*)\}/g, '${$2}');
+        formatted = formatted.replace(/\{(\s*)(\w+)(\s*)->/g, '{ $2 ->');
+        formatted = formatted.replace(/\[(\s*)(\w+)(\s*):/g, '[$2:');
+        formatted = formatted.replace(/@(\w+)\((\s*)(\w+)(\s*)=/g, '@$1($3=');
+        formatted = formatted.replace(/(\w+)(\s*)\?\.(\s*)(\w+)/g, '$1?.$4');
+        formatted = formatted.replace(/(\w+)(\s*)\*\.(\s*)(\w+)/g, '$1*.$4');
+        return formatted;
+    }
+    static minifyScript(script) {
+        if (!script || 0 === script.trim().length) return '';
+        let minified = script;
+        minified = minified.replace(/\/\/.*$/gm, '');
+        minified = minified.replace(/\/\*[\s\S]*?\*\//g, '');
+        minified = minified.replace(/\s+/g, ' ');
+        minified = minified.replace(/\s*([{}();,=+\-*/%&|<>!])\s*/g, '$1');
+        minified = minified.replace(/\n\s*\n/g, '\n');
+        return minified.trim();
+    }
+}
+class GroovyScriptConvertorUtil {
+    static isCustomScript(script) {
+        if (!script) return false;
+        return script.includes(CUSTOM_SCRIPT);
+    }
+    static formatScript(script) {
+        if (!script) return '';
+        return GroovyFormatter.formatScript(script);
+    }
+    static toCustomScript(script) {
+        if (GroovyScriptConvertorUtil.isCustomScript(script)) return GroovyFormatter.formatScript(script);
+        return GroovyFormatter.formatScript(`// ${CUSTOM_SCRIPT}\n${script}`);
+    }
+    static getScriptTitle(script) {
+        if (!script) return '';
+        const titleMatch = script.match(new RegExp(`//\\s*${SCRIPT_TITLE}\\s*(.+)`));
+        if (titleMatch) return titleMatch[1].trim();
+        return '';
+    }
+    static updateScriptTitle(script, title) {
+        const titleComment = `// ${SCRIPT_TITLE} ${title}`;
+        if (GroovyScriptConvertorUtil.getScriptTitle(script)) return script.replace(new RegExp(`//\\s*${SCRIPT_TITLE}\\s*.+`), titleComment);
+        return `${titleComment}\n${script}`;
+    }
+    static getScriptMeta(script) {
+        if (!script) return '';
+        const titleMatch = script.match(new RegExp(`//\\s*${SCRIPT_META}\\s*(.+)`));
+        if (titleMatch) return titleMatch[1].trim();
+        return '';
+    }
+    static updateScriptMeta(script, meta) {
+        const metaComment = `// ${SCRIPT_META} ${meta}`;
+        if (GroovyScriptConvertorUtil.getScriptMeta(script)) return script.replace(new RegExp(`//\\s*${SCRIPT_META}\\s*.+`), metaComment);
+        return `${metaComment}\n${script}`;
+    }
+    static clearComments(script) {
+        if (!script) return '';
+        return script.replace(/\/\/.*$/gm, '').trim();
+    }
+    static getReturnScript(script) {
+        try {
+            let result = GroovyScriptConvertorUtil.clearComments(script);
+            const funcMatch = result.match(/def\s+run\s*\([^)]*\)\s*\{([\s\S]*)\}/);
+            if (funcMatch) result = funcMatch[1];
+            const returnMatch = result.match(/return\s+(.+?);?\s*$/m);
+            result = returnMatch ? returnMatch[1].trim() : result.trim();
+            return result;
+        } catch  {
+            return '';
+        }
+    }
+}
+export { CUSTOM_SCRIPT, GroovyFormatter, GroovyScriptConvertorUtil, SCRIPT_META, SCRIPT_TITLE };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-script/script-engine",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "script-engine components",
   "keywords": [
     "coding-script",