From 282c58ca869f072bb502eed75d012c225f42aa9d Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Mon, 4 Dec 2023 22:14:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=A2=9E=E5=8A=A0=E6=8D=A2=E8=A1=8C=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=20(#3173)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts                |  1 +
 frontend/src/lang/modules/tw.ts                |  1 +
 frontend/src/lang/modules/zh.ts                |  1 +
 .../host/file-management/code-editor/index.vue | 18 +++++++++++++++++-
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index c918be9c1..8f82c02d2 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/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',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 1bdc4860e..f4e5c8a53 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1038,6 +1038,7 @@ const message = {
         dropHelper: '將需要上傳的文件拖曳到此處',
         fileRecycleBin: '檔案回收站',
         fileRecycleBinMsg: '已{0}回收站',
+        wordWrap: '自動換行',
     },
     ssh: {
         autoStart: '開機自啟',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 491dcd08c..6a6801372 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1039,6 +1039,7 @@ const message = {
         dropHelper: '将需要上传的文件拖曳到此处',
         fileRecycleBin: '文件回收站',
         fileRecycleBinMsg: '已{0}回收站',
+        wordWrap: '自动换行',
     },
     ssh: {
         autoStart: '开机自启',
diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue
index aa9840c01..ee9a0c2c6 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/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();