Merge pull request #296 from SuanmoSuanyangTechnology/fix/release_web_zy

Fix/release web zy

web/src/views/ApplicationConfig/components/Editor/index.tsx

@@ -9,6 +9,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import InitialValuePlugin from './plugin/InitialValuePlugin'
 import LineBreakPlugin from './plugin/LineBreakPlugin';
 import InsertTextPlugin from './plugin/InsertTextPlugin';
+import EditablePlugin from './plugin/EditablePlugin';
 
 export interface EditorRef {
   insertText: (text: string) => void;
@@ -23,6 +24,7 @@ interface LexicalEditorProps {
   value?: string;
   onChange?: (value: string) => void;
   height?: number;
+  disabled?: boolean;
 }
 
 const theme = {
@@ -38,6 +40,7 @@ const EditorContent = forwardRef<EditorRef, LexicalEditorProps>(({
   value,
   placeholder = "请输入内容...",
   onChange,
+  disabled
 }, ref) => {
   const [editor] = useLexicalComposerContext();
   
@@ -92,7 +95,11 @@ const EditorContent = forwardRef<EditorRef, LexicalEditorProps>(({
       <RichTextPlugin
         contentEditable={
           <ContentEditable
-            className={clsx("rb:outline-none rb:resize-none rb:text-[14px] rb:leading-5 rb:px-4 rb:py-5 rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:overflow-auto", className)}
+            className={clsx(
+              "rb:outline-none rb:resize-none rb:text-[14px] rb:leading-5 rb:px-4 rb:py-5 rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:overflow-auto",
+              disabled && "rb:cursor-not-allowed rb:bg-[#F6F8FC] rb:text-[#5B6167]",
+              className
+            )}
           />
         }
         placeholder={
@@ -105,6 +112,7 @@ const EditorContent = forwardRef<EditorRef, LexicalEditorProps>(({
       <LineBreakPlugin onChange={onChange} />
       <InitialValuePlugin value={value} />
       <InsertTextPlugin />
+      <EditablePlugin disabled={disabled} />
     </div>
   );
 });
@@ -114,6 +122,7 @@ const Editor = forwardRef<EditorRef, LexicalEditorProps>((props, ref) => {
     namespace: 'Editor',
     theme,
     nodes: [],
+    editable: !props.disabled,
     onError: (error: Error) => {
       console.error(error);
     },

web/src/views/ApplicationConfig/components/Editor/plugin/EditablePlugin.tsx

@@ -0,0 +1,48 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-04 11:20:49 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-04 11:20:49 
+ */
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+
+/**
+ * Props for the EditablePlugin component
+ */
+interface EditablePluginProps {
+  /** Whether the editor should be disabled (read-only mode) */
+  disabled?: boolean;
+}
+
+/**
+ * EditablePlugin - A Lexical editor plugin that controls the editable state of the editor
+ * 
+ * This plugin allows you to dynamically toggle between editable and read-only modes.
+ * When disabled is true, the editor becomes read-only and users cannot modify content.
+ * When disabled is false or undefined, the editor is fully editable.
+ * 
+ * @param {EditablePluginProps} props - Component props
+ * @param {boolean} [props.disabled] - Controls whether the editor is in read-only mode
+ * @returns {null} This plugin doesn't render any UI elements
+ * 
+ * @example
+ * ```tsx
+ * <LexicalComposer>
+ *   <EditablePlugin disabled={isReadOnly} />
+ * </LexicalComposer>
+ * ```
+ */
+export default function EditablePlugin({ disabled }: EditablePluginProps) {
+  // Get the editor instance from Lexical composer context
+  const [editor] = useLexicalComposerContext();
+
+  // Update editor's editable state whenever the disabled prop changes
+  useEffect(() => {
+    // Set editor to editable when disabled is false, read-only when disabled is true
+    editor.setEditable(!disabled);
+  }, [editor, disabled]);
+
+  // This plugin doesn't render any UI, it only manages editor state
+  return null;
+}