feat: 文件编辑器增加换行功能 (#3173)

frontend/src/lang/modules/en.ts

@@ -1089,6 +1089,7 @@ const message = {
         dropHelper: 'Drag the files you want to upload here',
         fileRecycleBin: 'File Recycle Bin',
         fileRecycleBinMsg: '{0} recycle bin',
+        wordWrap: 'Automatically wrap',
     },
     ssh: {
         autoStart: 'Auto Start',

frontend/src/lang/modules/tw.ts

@@ -1038,6 +1038,7 @@ const message = {
         dropHelper: '將需要上傳的文件拖曳到此處',
         fileRecycleBin: '檔案回收站',
         fileRecycleBinMsg: '已{0}回收站',
+        wordWrap: '自動換行',
     },
     ssh: {
         autoStart: '開機自啟',

frontend/src/lang/modules/zh.ts

@@ -1039,6 +1039,7 @@ const message = {
         dropHelper: '将需要上传的文件拖曳到此处',
         fileRecycleBin: '文件回收站',
         fileRecycleBinMsg: '已{0}回收站',
+        wordWrap: '自动换行',
     },
     ssh: {
         autoStart: '开机自启',

frontend/src/views/host/file-management/code-editor/index.vue

@@ -24,6 +24,12 @@
                     <el-option v-for="eol in eols" :key="eol.label" :value="eol.value" :label="eol.label" />
                 </el-select>
             </el-form-item>
+            <el-form-item :label="$t('file.wordWrap')">
+                <el-select v-model="config.wordWrap" @change="changeWarp()">
+                    <el-option :label="$t('commons.button.enable')" value="on"></el-option>
+                    <el-option :label="$t('commons.button.disable')" value="off"></el-option>
+                </el-select>
+            </el-form-item>
         </el-form>
         <div v-loading="loading">
             <div id="codeBox" style="height: 55vh"></div>
@@ -81,16 +87,20 @@ interface EditorConfig {
     theme: string;
     language: string;
     eol: number;
+    wordWrap: WordWrapOptions;
 }
 
 const open = ref(false);
 const loading = ref(false);
 const fileName = ref('');
 
+type WordWrapOptions = 'off' | 'on' | 'wordWrapColumn' | 'bounded';
+
 const config = reactive<EditorConfig>({
     theme: 'vs-dark',
     language: 'plaintext',
     eol: monaco.editor.EndOfLineSequence.LF,
+    wordWrap: 'on',
 });
 
 const eols = [
@@ -145,6 +155,12 @@ const changeEOL = () => {
     editor.getModel().pushEOL(config.eol);
 };
 
+const changeWarp = () => {
+    editor.updateOptions({
+        wordWrap: config.wordWrap,
+    });
+};
+
 const initEditor = () => {
     if (editor) {
         editor.dispose();
@@ -160,8 +176,8 @@ const initEditor = () => {
             folding: true,
             roundedSelection: false,
             overviewRulerBorder: false,
+            wordWrap: 'on',
         });
-
         editor.onDidChangeModelContent(() => {
             if (editor) {
                 form.value.content = editor.getValue();