From d71e2a74b4b56998e78e921a9dd8322995e75d74 Mon Sep 17 00:00:00 2001
From: gengxin <1376732967@qq.com>
Date: Fri, 31 Mar 2023 11:16:15 +0800
Subject: [PATCH] feat: xterm-Support for Ctrl+MouseWheel to scaling fonts
 (#448)

#### What this PR does / why we need it?
#284
Support for scaling fonts using Ctrl+mouse wheel

#446
support Editor config the eol.
Currently, 1Panel only supports Linux, so directly set the default EOL to LF and add a new configuration item

#### Summary of your change

#### Please indicate you've done the following:

- [x] Made sure tests are passing and test coverage is added if needed.
- [x] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.
---
 frontend/src/lang/modules/en.ts               |  1 +
 frontend/src/lang/modules/zh.ts               |  1 +
 .../file-management/code-editor/index.vue     | 28 +++++++++++++++++++
 .../views/host/terminal/terminal/terminal.vue | 22 ++++++++++++++-
 4 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index b7dc85dcf..97610576c 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -763,6 +763,7 @@ const message = {
         downlodSuccess: 'Download Success',
         theme: 'Theme',
         language: 'Language',
+        eol: 'End Of Line',
     },
     setting: {
         all: 'All',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index a9a149bea..9871f0851 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -767,6 +767,7 @@ const message = {
         downlodSuccess: '下载完成',
         theme: '主题',
         language: '语言',
+        eol: '行尾符',
     },
     setting: {
         all: '全部',
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 94d237aff..38ad1d33b 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -18,6 +18,11 @@
                     <el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
                 </el-select>
             </el-form-item>
+            <el-form-item :label="$t('file.eol')">
+                <el-select v-model="config.eol" @change="changeEOL()">
+                    <el-option v-for="eol in eols" :key="eol.label" :value="eol.value" :label="eol.label" />
+                </el-select>
+            </el-form-item>
         </el-form>
         <div class="coder-editor" v-loading="loading">
             <div id="codeBox" style="height: 60vh"></div>
@@ -74,6 +79,7 @@ interface EditProps {
 interface EditorConfig {
     theme: string;
     language: string;
+    eol: number;
 }
 
 let open = ref(false);
@@ -82,8 +88,20 @@ let loading = ref(false);
 let config = reactive<EditorConfig>({
     theme: 'vs-dark',
     language: 'plaintext',
+    eol: monaco.editor.EndOfLineSequence.LF,
 });
 
+const eols = [
+    {
+        label: 'LF',
+        value: monaco.editor.EndOfLineSequence.LF,
+    },
+    {
+        label: 'CRLF',
+        value: monaco.editor.EndOfLineSequence.CRLF,
+    },
+];
+
 const themes = [
     {
         label: 'Visual Studio',
@@ -121,6 +139,10 @@ const changeTheme = () => {
     monaco.editor.setTheme(config.theme);
 };
 
+const changeEOL = () => {
+    editor.getModel().pushEOL(config.eol);
+};
+
 const initEditor = () => {
     if (editor) {
         editor.dispose();
@@ -144,6 +166,9 @@ const initEditor = () => {
             }
         });
 
+        // After onDidChangeModelContent
+        editor.getModel().pushEOL(config.eol);
+
         editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
     });
 };
@@ -165,6 +190,9 @@ const acceptParams = (props: EditProps) => {
     form.value.content = props.content;
     form.value.path = props.path;
     config.language = props.language;
+    // TODO Now,1panel only support liunux,so we can use LF.
+    // better,We should rely on the actual line feed character of the file returned from the background
+    config.eol = monaco.editor.EndOfLineSequence.LF;
     open.value = true;
 };
 
diff --git a/frontend/src/views/host/terminal/terminal/terminal.vue b/frontend/src/views/host/terminal/terminal/terminal.vue
index 1e916e451..7be8f04cb 100644
--- a/frontend/src/views/host/terminal/terminal/terminal.vue
+++ b/frontend/src/views/host/terminal/terminal/terminal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="'terminal-' + terminalID"></div>
+    <div :id="'terminal-' + terminalID" @wheel="onTermWheel"></div>
 </template>
 
 <script setup lang="ts">
@@ -176,6 +176,26 @@ function changeTerminalSize() {
     }
 }
 
+/**
+ * Support for Ctrl+MouseWheel to scaling fonts
+ * @param event WheelEvent
+ */
+const onTermWheel = (event: WheelEvent) => {
+    if (event.ctrlKey) {
+        event.preventDefault();
+        if (term) {
+            if (event.deltaY > 0) {
+                // web font-size mini 12px
+                if (term.options.fontSize > 12) {
+                    term.options.fontSize = term.options.fontSize - 1;
+                }
+            } else {
+                term.options.fontSize = term.options.fontSize + 1;
+            }
+        }
+    }
+};
+
 defineExpose({
     acceptParams,
     onClose,