feat: 升级增加 docker-compose 文件对比功能 (#5297)

frontend/src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "panel"; /* Project id 3575356 */
-  src: url('iconfont.woff2?t=1717468101688') format('woff2'),
-       url('iconfont.woff?t=1717468101688') format('woff'),
-       url('iconfont.ttf?t=1717468101688') format('truetype'),
-       url('iconfont.svg?t=1717468101688#panel') format('svg');
+  src: url('iconfont.woff2?t=1717570629440') format('woff2'),
+       url('iconfont.woff?t=1717570629440') format('woff'),
+       url('iconfont.ttf?t=1717570629440') format('truetype'),
+       url('iconfont.svg?t=1717570629440#panel') format('svg');
 }
 
 .panel {
@@ -15,7 +15,7 @@
 }
 
 .p-docker1:before {
-  content: "\e689";
+  content: "\e76a";
 }
 
 .p-Firefox:before {

frontend/src/assets/iconfont/iconfont.json

@@ -6,11 +6,11 @@
   "description": "",
   "glyphs": [
     {
-      "icon_id": "4630923",
+      "icon_id": "1064806",
       "name": "docker",
       "font_class": "docker1",
-      "unicode": "e689",
-      "unicode_decimal": 59017
+      "unicode": "e76a",
+      "unicode_decimal": 59242
     },
     {
       "icon_id": "37759945",

frontend/src/lang/modules/en.ts

@@ -212,6 +212,8 @@ const message = {
             formatErr: 'Format error, please check and retry',
             phpExtension: 'Only supports , _ lowercase English and numbers',
             paramHttp: 'Must start with http:// or https://',
+            diffHelper:
+                'The left side is the old version, the right side is the new version, after editing, click Save using custom version',
         },
         res: {
             paramError: 'The request failed, please try again later!',

frontend/src/lang/modules/tw.ts

@@ -1634,6 +1634,7 @@ const message = {
         useDefault: '使用預設版本',
         useCustom: '自訂 docker-compose.yml',
         useCustomHelper: '使用自訂 docker-compose.yml 文件，可能會導致應用程式升級失敗，如無必要，請勿勾選',
+        diffHelper: '左側為舊版本，右側為新版，編輯之後點選使用自訂版本儲存',
     },
     website: {
         website: '網站',

frontend/src/lang/modules/zh.ts

@@ -1634,6 +1634,7 @@ const message = {
         useDefault: '使用默认版本',
         useCustom: '自定义 docker-compose.yml',
         useCustomHelper: '使用自定义 docker-compose.yml 文件，可能会导致应用升级失败，如无必要，请勿勾选',
+        diffHelper: '左侧为旧版本，右侧为新版，编辑之后点击使用自定义版本保存',
     },
     website: {
         website: '网站',

frontend/src/views/app-store/installed/upgrade/diff/index.vue

@@ -7,47 +7,18 @@
         width="60%"
     >
         <el-row :gutter="10">
-            <el-col :span="11" :offset="1" class="mt-2">
-                <el-text type="info">{{ $t('app.oldVersion') }}</el-text>
-                <codemirror
-                    placeholder=""
-                    :indent-with-tab="true"
-                    :tabSize="4"
-                    style="width: 100%; height: calc(100vh - 500px)"
-                    :lineWrapping="true"
-                    :matchBrackets="true"
-                    theme="cobalt"
-                    :styleActiveLine="true"
-                    :extensions="extensions"
-                    v-model="oldContent"
-                    :readOnly="true"
-                />
-            </el-col>
-            <el-col :span="11" class="mt-2">
-                <el-text type="success">{{ $t('app.newVersion') }}</el-text>
-                <el-text type="warning" class="!ml-5">编辑之后点击使用自定义版本保存</el-text>
-                <codemirror
-                    :autofocus="true"
-                    placeholder=""
-                    :indent-with-tab="true"
-                    :tabSize="4"
-                    style="width: 100%; height: calc(100vh - 500px)"
-                    :lineWrapping="true"
-                    :matchBrackets="true"
-                    theme="cobalt"
-                    :styleActiveLine="true"
-                    :extensions="extensions"
-                    v-model="newContent"
-                />
+            <el-col :span="22" :offset="1">
+                <el-text type="warning">{{ $t('app.diffHelper') }}</el-text>
+                <div ref="container" class="compose-diff"></div>
             </el-col>
         </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="success" @click="confirm(newContent)">
+                <el-button type="success" @click="confirm(true)">
                     {{ $t('app.useNew') }}
                 </el-button>
-                <el-button type="primary" @click="confirm('')">
+                <el-button type="primary" @click="confirm(false)">
                     {{ $t('app.useDefault') }}
                 </el-button>
             </span>
@@ -56,33 +27,77 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
-import { oneDark } from '@codemirror/theme-one-dark';
-const extensions = [javascript(), oneDark];
+import { nextTick, ref } from 'vue';
+import * as monaco from 'monaco-editor';
 
 const open = ref(false);
 const newContent = ref('');
 const oldContent = ref('');
 const em = defineEmits(['confirm']);
 
+let originalModel = null;
+let modifiedModel = null;
+let editor: monaco.editor.IStandaloneDiffEditor = null;
+
+const container = ref();
+
 const handleClose = () => {
     open.value = false;
+    if (editor) {
+        editor.dispose();
+    }
 };
 
 const acceptParams = (oldCompose: string, newCompose: string) => {
     oldContent.value = oldCompose;
     newContent.value = newCompose;
     open.value = true;
+    initEditor();
 };
 
-const confirm = (content: string) => {
+const confirm = (useEditor: boolean) => {
+    let content = '';
+    if (useEditor) {
+        content = editor.getModifiedEditor().getValue();
+    } else {
+        content = '';
+    }
     em('confirm', content);
     handleClose();
 };
 
+const initEditor = () => {
+    if (editor) {
+        editor.dispose();
+    }
+    nextTick(() => {
+        originalModel = monaco.editor.createModel(oldContent.value, 'yaml');
+        modifiedModel = monaco.editor.createModel(newContent.value, 'yaml');
+
+        editor = monaco.editor.createDiffEditor(container.value, {
+            theme: 'vs-dark',
+            readOnly: false,
+            automaticLayout: true,
+            folding: true,
+            roundedSelection: false,
+            overviewRulerBorder: false,
+        });
+
+        editor.setModel({
+            original: originalModel,
+            modified: modifiedModel,
+        });
+    });
+};
+
 defineExpose({
     acceptParams,
 });
 </script>
+
+<style scoped>
+.compose-diff {
+    width: 100%;
+    height: calc(100vh - 350px);
+}
+</style>

frontend/src/views/app-store/installed/upgrade/index.vue

@@ -149,7 +149,10 @@ const toLink = (link: string) => {
     window.open(link, '_blank');
 };
 
-const openDiff = () => {
+const openDiff = async () => {
+    if (newContent.value === '') {
+        await getVersions(operateReq.version);
+    }
     composeDiffRef.value.acceptParams(oldContent.value, newContent.value);
 };