From 24b3501f38550bf691c53e947d49cdea63c5c5bd Mon Sep 17 00:00:00 2001
From: wangdan <dan.wang@fit2cloud.com>
Date: Tue, 14 Mar 2023 19:05:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E7=89=88=E6=9C=AC=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/system-upgrade/index.vue   | 36 ++++++++++++++-----
 frontend/src/styles/index.scss                |  1 +
 frontend/src/views/app-store/detail/index.vue |  1 -
 frontend/src/views/setting/about/index.vue    |  1 -
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/system-upgrade/index.vue b/frontend/src/components/system-upgrade/index.vue
index ceb4a02c2..fb35d8adc 100644
--- a/frontend/src/components/system-upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/index.vue
@@ -7,18 +7,18 @@
         <el-tag v-else round style="margin-left: 10px">{{ $t('setting.upgrading') }}</el-tag>
     </div>
 
-    <el-drawer :close-on-click-modal="false" :key="refresh" v-model="drawerVisiable" size="50%">
+    <el-drawer :close-on-click-modal="false" :key="refresh" v-model="drawerVisiable" size="50%" append-to-body>
         <template #header>
             <DrawerHeader :header="$t('setting.upgrade')" :back="handleClose" />
         </template>
-        <el-form label-width="120px">
-            <el-form-item :label="$t('setting.newVersion')">
-                <el-tag>{{ upgradeInfo.newVersion }}</el-tag>
-            </el-form-item>
-            <el-form-item :label="$t('setting.upgradeNotes')">
-                <MdEditor style="height: calc(100vh - 330px)" v-model="upgradeInfo.releaseNote" previewOnly />
-            </el-form-item>
-        </el-form>
+        <div class="panel-MdEditor">
+            <div class="default-theme">
+                <h2 class="inline-block">{{ $t('setting.newVersion') }}</h2>
+                <el-tag class="inline-block tag">{{ upgradeInfo.newVersion }}</el-tag>
+            </div>
+            <MdEditor v-model="upgradeInfo.releaseNote" previewOnly />
+        </div>
+
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
@@ -29,6 +29,7 @@
 </template>
 <script setup lang="ts">
 import { getSettingInfo, loadUpgradeInfo, upgrade } from '@/api/modules/setting';
+import MdEditor from 'md-editor-v3';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { onMounted, ref } from 'vue';
@@ -98,4 +99,21 @@ onMounted(() => {
     text-decoration: none;
     letter-spacing: 0.5px;
 }
+.panel-MdEditor {
+    height: calc(100vh - 330px);
+    margin-left: 70px;
+    .tag {
+        margin-left: 20px;
+        margin-top: -6px;
+        vertical-align: middle;
+    }
+    :deep(.md-editor-preview) {
+        font-size: 14px;
+    }
+    :deep(.default-theme h2) {
+        margin: 13px 0;
+        padding: 0;
+        font-size: 16px;
+    }
+}
 </style>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 910c5d825..0e27fdfba 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -3,3 +3,4 @@
 @use './element-dark.scss';
 @use './reset.scss';
 @use './var.scss';
+@use 'md-editor-v3/lib/style.css';
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index f88ef62d8..f306e2dfc 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -94,7 +94,6 @@
 import { GetApp, GetAppDetail } from '@/api/modules/app';
 import LayoutContent from '@/layout/layout-content.vue';
 import MdEditor from 'md-editor-v3';
-import 'md-editor-v3/lib/style.css';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Install from './install/index.vue';
diff --git a/frontend/src/views/setting/about/index.vue b/frontend/src/views/setting/about/index.vue
index fdfe64cdc..6d17505bd 100644
--- a/frontend/src/views/setting/about/index.vue
+++ b/frontend/src/views/setting/about/index.vue
@@ -38,7 +38,6 @@
 import LayoutContent from '@/layout/layout-content.vue';
 import { getSettingInfo, getSystemAvailable } from '@/api/modules/setting';
 import { onMounted, ref } from 'vue';
-import 'md-editor-v3/lib/style.css';
 import SystemUpgrade from '@/components/system-upgrade/index.vue';
 
 const version = ref();