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

cli/package-lock.json

@@ -15,7 +15,7 @@
         "@types/node": "22.19.0",
         "commander": "15.0.0",
         "esbuild": "0.28.2",
-        "tar": "7.5.21",
+        "tar": "7.5.20",
         "typescript": "5.2.2"
       },
       "engines": {
@@ -573,9 +573,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.21",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.21.tgz",
-      "integrity": "sha512-XdhtCvlMywwxpCW8YEq3lOXBJpUPTR2OHHcwLPO3HwsJqOHa2Ok/oJ7ruGzp+JrKoRPVCzJwAdEjqLW/vNRPHA==",
+      "version": "7.5.20",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.20.tgz",
+      "integrity": "sha512-9FcyK4PA6+WbzlTM9WhQm6vB5W7cP7dUiPsv1g7YDwEQnQ1CGpK3MGlKk/ITVWMk05kHZuBhmVhiv8LZoy/PFQ==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {

cli/package.json

@@ -27,7 +27,7 @@
     "esbuild": "0.28.2",
     "typescript": "5.2.2",
     "@types/node": "22.19.0",
-    "tar": "7.5.21"
+    "tar": "7.5.20"
   },
   "license": "Apache-2.0",
   "repository": {

package.json

@@ -116,10 +116,6 @@
       "@codemirror/view": "6.39.16",
       "proxy-addr": "2.0.8",
       "websocket-driver": "0.7.5",
-      "body-parser": "1.20.9",
-      "lodash": "4.18.1",
-      "protobufjs": "7.6.1",
-      "undici@6": "6.29.1",
       "brace-expansion@1": "1.1.21",
       "brace-expansion@2": "2.1.7"
     }
@@ -131,7 +127,7 @@
     "@grpc/proto-loader": "^0.8.0",
     "@keyv/sqlite": "^4.0.1",
     "@otplib/preset-default": "^12.0.1",
-    "body-parser": "^1.20.9",
+    "body-parser": "^1.20.3",
     "celebrate": "^15.0.3",
     "chokidar": "^4.0.1",
     "compression": "1.8.2",
@@ -152,10 +148,10 @@
     "js-yaml": "^4.1.0",
     "jsonwebtoken": "^9.0.2",
     "keyv": "^5.2.3",
-    "lodash": "^4.18.1",
-    "multer": "2.5.0",
+    "lodash": "^4.17.21",
+    "multer": "2.4.0",
     "node-cron": "4.6.0",
-    "nodemailer": "^10.1.4",
+    "nodemailer": "^10.0.9",
     "p-queue-cjs": "7.3.4",
     "proper-lockfile": "^4.1.2",
     "ps-tree": "^1.2.0",
@@ -166,11 +162,11 @@
     "sqlite3": "npm:@whyour/sqlite3@1.1.4",
     "toad-scheduler": "^3.0.1",
     "typedi": "^0.10.0",
-    "undici": "^7.30.1",
+    "undici": "^7.9.0",
     "uuid": "^11.0.3",
     "winston": "^3.17.0",
     "winston-daily-rotate-file": "^5.0.0",
-    "tar": "7.5.21"
+    "tar": "7.5.20"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.0.1",

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);
             }}