From 10a35876bf62461ce46f250f8cdd5ad35d83281d Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <80892890+shaohuzhang1@users.noreply.github.com>
Date: Mon, 10 Feb 2025 19:11:04 +0800
Subject: [PATCH] fix: optimization

* fix: Style optimization

* perf: SCAN login setting views Style optimization

* fix: markdown preview i18n

---------

Co-authored-by: wangdan-fit2cloud <dan.wang@fit2cloud.com>
---
 ui/src/components/markdown/MdPreview.vue      | 19 +++++-
 ui/src/locales/lang/en-US/views/template.ts   |  2 +-
 ui/src/locales/lang/zh-CN/views/template.ts   |  2 +-
 ui/src/locales/lang/zh-Hant/views/template.ts |  2 +-
 .../component/DisplaySettingDialog.vue        |  2 +-
 .../component/XPackDisplaySettingDialog.vue   | 10 ++--
 .../authentication/component/EditModal.vue    |  3 +-
 .../views/authentication/component/SCAN.vue   | 59 ++++---------------
 ui/src/views/authentication/index.vue         |  2 +-
 9 files changed, 38 insertions(+), 63 deletions(-)

diff --git a/ui/src/components/markdown/MdPreview.vue b/ui/src/components/markdown/MdPreview.vue
index 7632a5aeb..0d8c3ab15 100644
--- a/ui/src/components/markdown/MdPreview.vue
+++ b/ui/src/components/markdown/MdPreview.vue
@@ -1,8 +1,23 @@
 <template>
-  <MdPreview noIconfont noPrettier :codeFoldable="false" v-bind="$attrs" />
+  <MdPreview :language="language" noIconfont noPrettier :codeFoldable="false" v-bind="$attrs" />
 </template>
 
 <script setup lang="ts">
-import { MdPreview } from 'md-editor-v3'
+import { computed } from 'vue'
+import { MdPreview, config } from 'md-editor-v3'
+import { getBrowserLang } from '@/locales/index'
+import useStore from '@/stores'
+// 引入公共库中的语言配置
+import ZH_TW from '@vavt/cm-extension/dist/locale/zh-TW'
+
 defineOptions({ name: 'MdPreview' })
+const { user } = useStore()
+const language = computed(() => user.getLanguage() || getBrowserLang() || '')
+config({
+  editorConfig: {
+    languageUserDefined: {
+      'zh-Hant': ZH_TW
+    }
+  }
+})
 </script>
diff --git a/ui/src/locales/lang/en-US/views/template.ts b/ui/src/locales/lang/en-US/views/template.ts
index 916caa298..acdf203c9 100644
--- a/ui/src/locales/lang/en-US/views/template.ts
+++ b/ui/src/locales/lang/en-US/views/template.ts
@@ -53,7 +53,7 @@ export default {
       permissionType: {
         label: 'Permission',
         privateDesc: 'Only the current user can use',
-        publicDesc: 'All users can use, but can not be edited',
+        publicDesc: 'All users can use',
         requiredMessage: 'Permission cannot be empty'
       },
       model_type: {
diff --git a/ui/src/locales/lang/zh-CN/views/template.ts b/ui/src/locales/lang/zh-CN/views/template.ts
index f533bc3b5..84241990d 100644
--- a/ui/src/locales/lang/zh-CN/views/template.ts
+++ b/ui/src/locales/lang/zh-CN/views/template.ts
@@ -53,7 +53,7 @@ export default {
       permissionType: {
         label: '权限',
         privateDesc: '仅当前用户使用',
-        publicDesc: '所有用户都可使用，不能编辑',
+        publicDesc: '所有用户都可使用',
         requiredMessage: '权限不能为空'
       },
       model_type: {
diff --git a/ui/src/locales/lang/zh-Hant/views/template.ts b/ui/src/locales/lang/zh-Hant/views/template.ts
index 2197273f3..241f9d8c5 100644
--- a/ui/src/locales/lang/zh-Hant/views/template.ts
+++ b/ui/src/locales/lang/zh-Hant/views/template.ts
@@ -53,7 +53,7 @@ export default {
       permissionType: {
         label: '權限',
         privateDesc: '僅當前使用者使用',
-        publicDesc: '所有使用者都可使用，但不能編輯',
+        publicDesc: '所有使用者都可使用',
         requiredMessage: '權限不能為空'
       },
       model_type: {
diff --git a/ui/src/views/application-overview/component/DisplaySettingDialog.vue b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
index 192329cff..bacfd4a1e 100644
--- a/ui/src/views/application-overview/component/DisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
@@ -10,7 +10,7 @@
         <span>{{
           $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel')
         }}</span>
-        <el-select v-model="form.language">
+        <el-select v-model="form.language" clearable>
           <el-option
             v-for="item in langList"
             :key="item.value"
diff --git a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
index 399304889..7e17b7128 100644
--- a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
@@ -50,7 +50,7 @@
                   />
                 </div>
 
-                <h4>
+                <h4 class="ellipsis">
                   {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
                 </h4>
               </div>
@@ -174,7 +174,7 @@
           <h5 class="mb-8">
             {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel') }}
           </h5>
-          <el-select v-model="form.language">
+          <el-select v-model="form.language" clearable>
             <el-option
               v-for="item in langList"
               :key="item.value"
@@ -383,7 +383,7 @@ import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
 import { isAppIcon, isWorkFlow } from '@/utils/application'
 import applicationXpackApi from '@/api/application-xpack'
 import { MsgSuccess, MsgError } from '@/utils/message'
-import { getBrowserLang, langList, t } from '@/locales'
+import { langList, t } from '@/locales'
 import useStore from '@/stores'
 import { cloneDeep } from 'lodash'
 
@@ -398,7 +398,7 @@ const emit = defineEmits(['refresh'])
 
 const defaultSetting = {
   show_source: false,
-  language: getBrowserLang(),
+  language: '',
   show_history: true,
   draggable: true,
   show_guide: true,
@@ -427,7 +427,7 @@ const form = ref<any>({
 
 const xpackForm = ref<any>({
   show_source: false,
-  language: getBrowserLang(),
+  language: '',
   show_history: false,
   draggable: false,
   show_guide: false,
diff --git a/ui/src/views/authentication/component/EditModal.vue b/ui/src/views/authentication/component/EditModal.vue
index a96b79862..3a11c3641 100644
--- a/ui/src/views/authentication/component/EditModal.vue
+++ b/ui/src/views/authentication/component/EditModal.vue
@@ -9,7 +9,7 @@ template
   >
     <template #header>
       <div class="flex align-center" style="margin-left: -8px">
-        <h4>{{ currentPlatform.name + ' ' + $t('common.setting') }}</h4>
+        <h4>{{ currentPlatform.name }}</h4>
       </div>
     </template>
 
@@ -225,5 +225,4 @@ function saveConfig() {
 </script>
 
 <style lang="scss" scoped>
-// 保持原有的样式
 </style>
diff --git a/ui/src/views/authentication/component/SCAN.vue b/ui/src/views/authentication/component/SCAN.vue
index 18ddb977a..e905a01d8 100644
--- a/ui/src/views/authentication/component/SCAN.vue
+++ b/ui/src/views/authentication/component/SCAN.vue
@@ -1,13 +1,13 @@
 <template>
-  <div v-loading="loading">
-    <el-card shadow="hover" class="border-none cursor" style="--el-card-padding: 16px 24px">
+  <div v-loading="loading" class="scan-height">
+    <el-scrollbar>
       <div v-for="item in platforms" :key="item.key" class="mb-16">
-        <el-card class="mb-16" shadow="hover" style="--el-card-padding: 16px">
+        <el-card class="border-none mb-16" shadow="none">
           <div class="flex-between">
-            <div class="flex align-center ml-8 mr-8">
-              <img :src="item.logoSrc" alt="" class="icon" />
-              <h5 style="margin-left: 8px">{{ item.name }}</h5>
-              <el-tag v-if="item.isValid" type="success" class="ml-4"
+            <div class="flex align-center">
+              <img :src="item.logoSrc" alt="" width="24px" />
+              <h5 class="ml-8">{{ item.name }}</h5>
+              <el-tag v-if="item.isValid" type="success" class="ml-8"
                 >{{ $t('views.system.authentication.scanTheQRCode.effective') }}
               </el-tag>
             </div>
@@ -81,7 +81,7 @@
         </el-card>
       </div>
       <EditModel ref="EditModelRef" @refresh="refresh" />
-    </el-card>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -230,46 +230,7 @@ function showDialog(platform: Platform) {
 </script>
 
 <style lang="scss" scoped>
-.icon {
-  width: 24px;
-  height: 24px;
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.flex {
-  display: flex;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.ml-4 {
-  margin-left: 4px;
-}
-
-.ml-8 {
-  margin-left: 8px;
-}
-
-.mr-8 {
-  margin-right: 8px;
-}
-
-.mb-16 {
-  margin-bottom: 16px;
-}
-
-.border-t {
-  border-top: 1px solid #ebeef5;
-}
-
-.vertical-middle {
-  vertical-align: middle;
+.scan-height {
+  height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 70px);
 }
 </style>
diff --git a/ui/src/views/authentication/index.vue b/ui/src/views/authentication/index.vue
index 4c809af30..178b9730f 100644
--- a/ui/src/views/authentication/index.vue
+++ b/ui/src/views/authentication/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="authentication-setting p-16-24">
     <h4>{{ $t('views.system.authentication.title') }}</h4>
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tabs v-model="activeName" class="mt-4" @tab-click="handleClick">
       <template v-for="(item, index) in tabList" :key="index">
         <el-tab-pane :label="item.label" :name="item.name">
           <component :is="item.component" />