perf: SCAN login setting views Style optimization

Author: wangdan-fit2cloud

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"

ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue

@@ -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,

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>

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>

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" />