feat(editor): add word wrap toggle for config and scripts

src/locales/en-US.json

@@ -508,6 +508,7 @@
   "脚本（只读）": "Scripts (read only)",
   "自动删除任务": "Automatically Delete Tasks",
   "自动拆分": "Auto Split",
+  "自动换行": "Word wrap",
   "自动添加任务": "Automatically Add Tasks",
   "自动生成": "Auto-generated",
   "自定义日志文件夹名称，用于区分不同任务的日志，留空则自动生成": "Custom log folder name to distinguish logs from different tasks. Leave blank to auto-generate",

src/locales/zh-CN.json

@@ -508,6 +508,7 @@
   "脚本（只读）": "脚本（只读）",
   "自动删除任务": "自动删除任务",
   "自动拆分": "自动拆分",
+  "自动换行": "自动换行",
   "自动添加任务": "自动添加任务",
   "自动生成": "自动生成",
   "自定义日志文件夹名称，用于区分不同任务的日志，留空则自动生成": "自定义日志文件夹名称，用于区分不同任务的日志，留空则自动生成",

src/pages/config/index.tsx

@@ -6,7 +6,7 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import { Button, message, Modal, TreeSelect } from 'antd';
+import { Button, message, Modal, Space, Switch, TreeSelect } from 'antd';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
@@ -15,6 +15,7 @@ import CodeMirror from '@uiw/react-codemirror';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { EditorView } from '@codemirror/view';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { getEditorMode } from '@/utils';
 
@@ -28,6 +29,11 @@ const Config = () => {
   const editorRef = useRef<any>(null);
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [language, setLanguage] = useState<string>('shell');
+  const [wordWrap, setWordWrap] = useState(
+    () =>
+      (localStorage.getItem('qinglong_editor_word_wrap') ??
+        localStorage.getItem('qinglong_config_word_wrap')) === 'true',
+  );
 
   const getConfig = (name: string) => {
     request
@@ -104,6 +110,20 @@ const Config = () => {
           defaultValue="config.sh"
           onSelect={onSelect}
         />,
+        <Space key="word-wrap" size={8}>
+          <span>{intl.get('自动换行')}</span>
+          <Switch
+            aria-label={intl.get('自动换行')}
+            checked={wordWrap}
+            onChange={(checked) => {
+              setWordWrap(checked);
+              localStorage.setItem(
+                'qinglong_editor_word_wrap',
+                String(checked),
+              );
+            }}
+          />
+        </Space>,
         <Button
           key="1"
           loading={confirmLoading}
@@ -121,7 +141,10 @@ const Config = () => {
         <CodeMirror
           value={value}
           theme={theme.includes('dark') ? 'dark' : 'light'}
-          extensions={[langs.shell()]}
+          extensions={[
+            langs.shell(),
+            ...(wordWrap ? [EditorView.lineWrapping] : []),
+          ]}
           onChange={(value) => {
             setValue(value);
           }}
@@ -136,7 +159,8 @@ const Config = () => {
             lineNumbersMinChars: 3,
             folding: false,
             glyphMargin: false,
-            accessibilitySupport: 'off'
+            accessibilitySupport: 'off',
+            wordWrap: wordWrap ? 'on' : 'off',
           }}
           onMount={(editor) => {
             editorRef.current = editor;

src/pages/script/editModal.tsx

@@ -6,7 +6,16 @@ import React, {
   useCallback,
   useReducer,
 } from 'react';
-import { Drawer, Button, Tabs, Badge, Select, TreeSelect } from 'antd';
+import {
+  Drawer,
+  Button,
+  Tabs,
+  Badge,
+  Select,
+  Space,
+  Switch,
+  TreeSelect,
+} from 'antd';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
 import SplitPane from 'react-split-pane';
@@ -24,11 +33,15 @@ const EditModal = ({
   treeData,
   currentNode,
   content,
+  wordWrap,
+  onWordWrapChange,
   handleCancel,
 }: {
   treeData?: any;
   content?: string;
   currentNode: any;
+  wordWrap: boolean;
+  onWordWrapChange: (checked: boolean) => void;
   handleCancel: () => void;
 }) => {
   const [value, setValue] = useState('');
@@ -219,6 +232,16 @@ const EditModal = ({
         </>
       }
       width={'100%'}
+      extra={
+        <Space size={8}>
+          <span>{intl.get('自动换行')}</span>
+          <Switch
+            aria-label={intl.get('自动换行')}
+            checked={wordWrap}
+            onChange={onWordWrapChange}
+          />
+        </Space>
+      }
       headerStyle={{ padding: '11px 24px' }}
       onClose={cancel}
       open={true}
@@ -241,6 +264,7 @@ const EditModal = ({
             lineNumbersMinChars: 3,
             glyphMargin: false,
             accessibilitySupport: 'off',
+            wordWrap: wordWrap ? 'on' : 'off',
           }}
           onMount={(editor) => {
             editorRef.current = editor;

src/pages/script/index.tsx

@@ -15,6 +15,7 @@ import {
   PlusOutlined,
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-layout';
+import { EditorView } from '@codemirror/view';
 import Editor from '@monaco-editor/react';
 import CodeMirror from '@uiw/react-codemirror';
 import { history, useOutletContext } from '@umijs/max';
@@ -26,6 +27,8 @@ import {
   MenuProps,
   message,
   Modal,
+  Space,
+  Switch,
   Tooltip,
   Tree,
   TreeSelect,
@@ -70,6 +73,11 @@ const Script = () => {
   const [showMonaco, setShowMonaco] = useState(true);
   const [historyVisible, setHistoryVisible] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [wordWrap, setWordWrap] = useState(
+    () =>
+      (localStorage.getItem('qinglong_editor_word_wrap') ??
+        localStorage.getItem('qinglong_config_word_wrap')) === 'true',
+  );
   const savingRef = useRef(false);
   const savedContentRef = useRef('');
   const currentKeyRef = useRef(currentNode?.key);
@@ -544,6 +552,11 @@ const Script = () => {
     });
   };
 
+  const changeWordWrap = (checked: boolean) => {
+    setWordWrap(checked);
+    localStorage.setItem('qinglong_editor_word_wrap', String(checked));
+  };
+
   return (
     <PageContainer
       className="ql-container-wrapper log-wrapper"
@@ -567,6 +580,14 @@ const Script = () => {
       }
       loading={loading}
       extra={[
+        <Space key="word-wrap" size={8}>
+          <span>{intl.get('自动换行')}</span>
+          <Switch
+            aria-label={intl.get('自动换行')}
+            checked={wordWrap}
+            onChange={changeWordWrap}
+          />
+        </Space>,
         ...(currentNode?.type === 'file' && showMonaco
           ? [
               <Button
@@ -734,6 +755,7 @@ const Script = () => {
                   lineNumbersMinChars: 3,
                   glyphMargin: false,
                   accessibilitySupport: 'off',
+                  wordWrap: wordWrap ? 'on' : 'off',
                 }}
                 onMount={(editor) => {
                   editorRef.current = editor;
@@ -747,7 +769,10 @@ const Script = () => {
         {isPhone && (
           <CodeMirror
             value={value}
-            extensions={getCodeMirrorExtensions(mode)}
+            extensions={[
+              ...getCodeMirrorExtensions(mode),
+              ...(wordWrap ? [EditorView.lineWrapping] : []),
+            ]}
             theme={theme.includes('dark') ? 'dark' : 'light'}
             readOnly={!isEditing || saving}
             onChange={(value) => {
@@ -760,6 +785,8 @@ const Script = () => {
             treeData={data}
             currentNode={currentNode}
             content={value}
+            wordWrap={wordWrap}
+            onWordWrapChange={changeWordWrap}
             handleCancel={() => {
               setIsLogModalVisible(false);
             }}