增加样式类

packages/script-engine/package.json

@@ -40,7 +40,8 @@
     "@codemirror/language": "^6.12.2",
     "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.39.16"
+    "@codemirror/view": "^6.39.16",
+    "@lezer/highlight": "^1.2.3"
   },
   "peerDependencies": {
     "react": ">=18",

packages/script-engine/src/components/data-types-section.tsx

@@ -12,7 +12,7 @@ export interface DataTypesSectionProps {
 }
 
 export const DataTypesSection: React.FC<DataTypesSectionProps> = ({ allTypes, expanded, onToggle, colors }) => (
-  <div style={{ marginTop: 4 }}>
+  <div className="data-types-section" style={{ marginTop: 4 }}>
     <SectionHeader colors={colors} label="数据类型" />
     {allTypes.length === 0 ? (
       <div

packages/script-engine/src/components/drag-handle.tsx

@@ -20,6 +20,7 @@ export const DragHandle: React.FC<DragHandleProps> = ({
 
   return (
     <div
+      className="se-drag-handle"
       onMouseDown={onMouseDown}
       onMouseEnter={() => onHoverChange(true)}
       onMouseLeave={() => onHoverChange(false)}

packages/script-engine/src/components/main-function-section.tsx

@@ -10,7 +10,7 @@ export interface MainFunctionSectionProps {
 
 export const MainFunctionSection: React.FC<MainFunctionSectionProps> = ({ metadata, colors }) => {
   return (
-    <div>
+    <div className="main-function-section">
       <SectionHeader colors={colors} label="主函数" />
       <div style={{ padding: '4px 12px 4px 20px' }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>

packages/script-engine/src/components/panel-header.tsx

@@ -11,6 +11,7 @@ export const PanelHeader: React.FC<PanelHeaderProps> = ({ colors, onCollapse })
 
   return (
     <div
+      className="panel-header"
       style={{
         padding: '8px 12px',
         display: 'flex',

packages/script-engine/src/components/toolbar.tsx

@@ -166,6 +166,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
 
   return (
     <div
+      className="script-editor-toolbar"
       style={{
         display: 'flex',
         alignItems: 'center',
@@ -180,6 +181,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
     >
       {title && (
         <span
+          className="script-editor-toolbar-title"
           style={{
             color: toolbarText,
             fontWeight: 600,
@@ -192,7 +194,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           {title}
         </span>
       )}
-      {!title && <span style={{ marginRight: 'auto' }} />}
+      {!title && <span className="script-editor-toolbar-title" style={{ marginRight: 'auto' }} />}
 
 
       {/* 脚本说明按钮 */}

packages/script-engine/src/components/variables-section.tsx

@@ -16,7 +16,7 @@ export const VariablesSection: React.FC<VariablesSectionProps> = ({ sortedBinds,
   }
 
   return (
-    <div>
+    <div className="variables-section">
       {/* 函数入参 */}
       {sortedRequests.length > 0 && (
         <>

packages/script-engine/src/script-code.tsx

@@ -381,6 +381,7 @@ export const ScriptCodeEditor: React.FC<ScriptCodeEditorProps> = (props) => {
 
   return (
     <div
+      className="script-editor"
       style={
         isFullscreen
           ? {
@@ -420,6 +421,7 @@ export const ScriptCodeEditor: React.FC<ScriptCodeEditorProps> = (props) => {
 
       {/* ── 编辑器 + 侧边栏 ───────────────────────────── */}
       <div
+        className="script-editor-body"
         style={{
           display: 'flex',
           border: `1px solid ${borderColor}`,
@@ -430,7 +432,7 @@ export const ScriptCodeEditor: React.FC<ScriptCodeEditorProps> = (props) => {
           minHeight: isFullscreen ? 0 : undefined,
         }}
       >
-        <div style={{ flex: 1, minWidth: 0, position: 'relative' }}>
+        <div className="script-editor-code" style={{ flex: 1, minWidth: 0, position: 'relative' }}>
           {metadata && !sidebarOpen && (
             <ExpandSidebarButton
               borderColor={borderColor}
@@ -441,6 +443,7 @@ export const ScriptCodeEditor: React.FC<ScriptCodeEditorProps> = (props) => {
           )}
           <div
             ref={editorContainerRef}
+            className="script-editor-codemirror"
             style={isFullscreen ? { height: '100%' } : undefined}
           />
         </div>

packages/script-engine/src/type-panel/type-panel.tsx

@@ -113,6 +113,7 @@ export const TypePanel: React.FC<TypePanelProps> = ({
   return (
     <div
       ref={panelRef}
+      className="type-panel"
       style={{
         width,
         flexShrink: 0,
@@ -135,6 +136,7 @@ export const TypePanel: React.FC<TypePanelProps> = ({
 
       {/* 面板主体 */}
       <div
+        className="type-panel-body"
         style={{
           flex: 1,
           minWidth: 0,
@@ -154,7 +156,7 @@ export const TypePanel: React.FC<TypePanelProps> = ({
 
         {/* 可滚动内容 */}
         <div
-          className={SCROLL_CLASS}
+          className={`type-panel-content ${SCROLL_CLASS}`}
           style={{
             flex: 1,
             overflowY: 'auto',