perf: Optimize some styles

Author: wangdan-fit2cloud

ui/src/components/folder-tree/index.vue

@@ -8,19 +8,21 @@
       class="p-8"
     />
     <div class="tree-height" :style="treeStyle">
-      <div
-        @click="handleSharedNodeClick"
-        v-if="showShared && hasPermission(EditionConst.IS_EE, 'OR')"
-        class="shared-button flex cursor border-b"
-        :class="currentNodeKey === 'share' && 'active'"
-      >
-        <AppIcon
-          iconName="app-shared-active"
-          style="font-size: 18px"
-          class="color-primary"
-        ></AppIcon>
-        <span class="ml-8 lighter">{{ shareTitle }}</span>
+      <div v-if="showShared && hasPermission(EditionConst.IS_EE, 'OR')" class="border-b mb-4">
+        <div
+          @click="handleSharedNodeClick"
+          class="shared-button flex cursor"
+          :class="currentNodeKey === 'share' && 'active'"
+        >
+          <AppIcon
+            iconName="app-shared-active"
+            style="font-size: 18px"
+            class="color-primary"
+          ></AppIcon>
+          <span class="ml-8 lighter">{{ shareTitle }}</span>
+        </div>
       </div>
+
       <el-scrollbar>
         <el-tree
           ref="treeRef"

ui/src/styles/app.scss

@@ -468,12 +468,12 @@ h5 {
 }
 .success-tag {
   background: var(--tag-success-bg);
-  color: var(--el-color-success);
+  color: var(--tag-success-color);
   border: none;
 }
 .warning-tag {
   background: var(--tag-warning-bg);
-  color: var(--el-color-warning);
+  color: var(--tag-warning-color);
   border: none;
 }
 
@@ -483,16 +483,10 @@ h5 {
   border: none;
 }
 
-.purple-tag {
-  background: #f2ebfe;
-  color: #7f3bf5;
-  border-color: #e0d7f0;
-}
-
 .blue-tag {
-  background: #ebf1ff;
-  color: #3370ff;
-  border-color: #d6e2ff;
+  background: var(--tag-default-bg);
+  color: var(--tag-default-color);
+  border: none;
 }
 
 // 蓝色提示框

ui/src/styles/element-plus.scss

@@ -280,7 +280,9 @@
 
 // el-tag
 .el-tag {
-  padding: 0 6px;
+  padding: 0 4px;
+  height: 20px;
+  font-weight: 400;
 }
 
 // el-input

ui/src/views/application-workflow/component/NodeContent.vue

@@ -1,22 +1,38 @@
 <template>
-  <el-input v-model.trim="filterText" :placeholder="$t('common.search')" prefix-icon="Search"
-            clearable
-            style="padding: 12px 12px 0 12px;"/>
+  <el-input
+    v-model.trim="filterText"
+    :placeholder="$t('common.search')"
+    prefix-icon="Search"
+    clearable
+    style="padding: 12px 12px 0 12px"
+  />
   <div class="list flex-wrap">
     <template v-if="filterList.length">
-      <el-popover v-for="item in filterList" :key="item.id" placement="right" :width="280"
-                  :show-after="500">
+      <el-popover
+        v-for="item in filterList"
+        :key="item.id"
+        placement="right"
+        :width="280"
+        :show-after="500"
+      >
         <template #reference>
-          <div class="list-item flex align-center border border-r-6 p-8-12 cursor"
-               style="width: calc(50% - 6px)"
-               @click.stop="emit('clickNodes', item)" @mousedown.stop="emit('onmousedown', item)">
+          <div
+            class="list-item flex align-center border border-r-6 p-8-12 cursor"
+            style="width: calc(50% - 6px)"
+            @click.stop="emit('clickNodes', item)"
+            @mousedown.stop="emit('onmousedown', item)"
+          >
             <!--            <LogoIcon v-if="item.resource_type === 'application'" height="32px" />-->
-            <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32"
-                       style="background: none">
-              <img :src="resetUrl(item?.icon,resetUrl('./favicon.ico'))" alt=""/>
+            <el-avatar
+              v-if="isAppIcon(item?.icon)"
+              shape="square"
+              :size="32"
+              style="background: none"
+            >
+              <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
             </el-avatar>
             <el-avatar v-else class="avatar-green" shape="square" :size="32">
-              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt=""/>
+              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
             </el-avatar>
             <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
           </div>
@@ -26,20 +42,24 @@
           <div class="flex-between">
             <div class="flex align-center">
               <!--              <LogoIcon v-if="item.resource_type === 'application'" height="32px"/>-->
-              <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32"
-                         style="background: none">
-                <img :src="resetUrl(item?.icon,resetUrl('./favicon.ico'))" alt=""/>
+              <el-avatar
+                v-if="isAppIcon(item?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
               </el-avatar>
               <el-avatar v-else class="avatar-green" shape="square" :size="32">
-                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt=""/>
+                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
               </el-avatar>
               <span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
             </div>
             <div v-if="item.type" class="status-tag" style="margin-left: auto">
-              <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px">
+              <el-tag class="warning-tag" v-if="isWorkFlow(item.type)">
                 {{ $t('views.application.workflow') }}
               </el-tag>
-              <el-tag class="blue-tag" v-else style="height: 22px">
+              <el-tag class="blue-tag" v-else>
                 {{ $t('views.application.simple') }}
               </el-tag>
             </div>
@@ -48,23 +68,23 @@
         </template>
       </el-popover>
     </template>
-    <el-empty v-else :description="$t('common.noData')"/>
+    <el-empty v-else :description="$t('common.noData')" />
   </div>
 </template>
 
 <script setup lang="ts">
-import {watch, ref} from 'vue'
-import {isAppIcon, resetUrl} from '@/utils/common'
-import {isWorkFlow} from '@/utils/application'
+import { watch, ref } from 'vue'
+import { isAppIcon, resetUrl } from '@/utils/common'
+import { isWorkFlow } from '@/utils/application'
 
 const props = defineProps<{
   list: any[]
 }>()
 
 const emit = defineEmits<{
-  (e: 'clickNodes', item: any): void;
-  (e: 'onmousedown', item: any): void;
-}>();
+  (e: 'clickNodes', item: any): void
+  (e: 'onmousedown', item: any): void
+}>()
 
 const filterText = ref('')
 const filterList = ref<any[]>([])

ui/src/views/application-workflow/component/PublishHistory.vue

@@ -15,7 +15,7 @@
             <template #default="{ row, index }">
               <div class="flex-between">
                 <div style="max-width: 80%">
-                  <h5 :class="index === 0 ? 'primary' : ''" class="flex">
+                  <h5 :class="index === 0 ? 'primary' : ''" class="flex align-center">
                     <ReadWrite
                       @change="editName($event, row)"
                       :data="row.name || datetimeFormat(row.update_time)"
@@ -27,7 +27,7 @@
                       $t('views.applicationWorkflow.setting.latestRelease')
                     }}</el-tag>
                   </h5>
-                  <el-text type="info" class="color-secondary flex mt-8">
+                  <el-text type="info" class="color-secondary flex align-center mt-8">
                     <el-avatar :size="20" class="avatar-grey mr-4">
                       <el-icon><UserFilled /></el-icon>
                     </el-avatar>

ui/src/views/application/index.vue

@@ -133,10 +133,10 @@
                     </el-text>
                   </template>
                   <template #tag>
-                    <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px">
+                    <el-tag v-if="isWorkFlow(item.type)" class="warning-tag">
                       {{ $t('views.application.workflow') }}
                     </el-tag>
-                    <el-tag class="blue-tag" v-else style="height: 22px">
+                    <el-tag class="blue-tag" v-else>
                       {{ $t('views.application.simple') }}
                     </el-tag>
                   </template>

ui/src/views/document/UploadDocument.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="upload-document p-12-24">
     <div class="flex align-center mb-16">
-      <back-button to="-1" style="margin-left: -4px"></back-button>
+      <back-button @click="back" style="margin-left: -4px"></back-button>
       <h3 style="display: inline-block">{{ $t('views.document.uploadDocument') }}</h3>
     </div>
     <el-card style="--el-card-padding: 0">

ui/src/views/document/index.vue

@@ -108,7 +108,7 @@
           </div>
           <app-table
             ref="multipleTableRef"
-            class="mt-16"
+            class="mt-16 document-table"
             :data="documentData"
             :pagination-config="paginationConfig"
             :quick-create="
@@ -1206,5 +1206,10 @@ onBeforeUnmount(() => {
     z-index: 22;
     box-shadow: 0px -2px 4px 0px rgba(31, 35, 41, 0.08);
   }
+  .document-table {
+    :deep(.el-table__row) {
+      cursor: pointer;
+    }
+  }
 }
 </style>

ui/src/views/system-chat-user/authentication/component/LDAP.vue

@@ -66,18 +66,26 @@
         </el-form>
 
         <div>
-          <el-button @click="submit(authFormRef, 'test')" :disabled="loading">
-            {{ $t('views.system.test') }}</el-button
-          >
-          <el-button @click="submit(authFormRef)" type="primary" :disabled="loading"
+          <span
             v-hasPermission="
-                      new ComplexPermission(
-                        [RoleConst.ADMIN],
-                        [PermissionConst.CHAT_USER_AUTH_EDIT],
-                        [],'OR',)"
+              new ComplexPermission(
+                [RoleConst.ADMIN],
+                [PermissionConst.CHAT_USER_AUTH_EDIT],
+                [],
+                'OR',
+              )
+            "
+            class="mr-12"
           >
-            {{ $t('common.save') }}
-          </el-button>
+            <el-button @click="submit(authFormRef)" type="primary" :disabled="loading">
+              {{ $t('common.save') }}
+            </el-button>
+          </span>
+          <span>
+            <el-button @click="submit(authFormRef, 'test')" :disabled="loading">
+              {{ $t('views.system.test') }}
+            </el-button>
+          </span>
         </div>
       </div>
     </el-scrollbar>
@@ -101,9 +109,9 @@ const form = ref<any>({
     password: '',
     ou: '',
     ldap_filter: '',
-    ldap_mapping: ''
+    ldap_mapping: '',
   },
-  is_active: true
+  is_active: true,
 })
 
 const authFormRef = ref()
@@ -115,44 +123,44 @@ const rules = reactive<FormRules<any>>({
     {
       required: true,
       message: t('views.system.authentication.ldap.serverPlaceholder'),
-      trigger: 'blur'
-    }
+      trigger: 'blur',
+    },
   ],
   'config.base_dn': [
     {
       required: true,
       message: t('views.system.authentication.ldap.bindDNPlaceholder'),
-      trigger: 'blur'
-    }
+      trigger: 'blur',
+    },
   ],
   'config.password': [
     {
       required: true,
       message: t('views.login.loginForm.password.placeholder'),
-      trigger: 'blur'
-    }
+      trigger: 'blur',
+    },
   ],
   'config.ou': [
     {
       required: true,
       message: t('views.system.authentication.ldap.ouPlaceholder'),
-      trigger: 'blur'
-    }
+      trigger: 'blur',
+    },
   ],
   'config.ldap_filter': [
     {
       required: true,
       message: t('views.system.authentication.ldap.ldap_filterPlaceholder'),
-      trigger: 'blur'
-    }
+      trigger: 'blur',
+    },
   ],
   'config.ldap_mapping': [
     {
       required: true,
       message: t('views.system.authentication.ldap.ldap_mappingPlaceholder'),
-      trigger: 'blur'
-    }
-  ]
+      trigger: 'blur',
+    },
+  ],
 })
 
 const submit = async (formEl: FormInstance | undefined, test?: string) => {
@@ -177,9 +185,7 @@ function getDetail() {
     if (res.data && JSON.stringify(res.data) !== '{}') {
       form.value = res.data
       if (res.data.config.ldap_mapping) {
-        form.value.config.ldap_mapping = JSON.stringify(
-          JSON.parse(res.data.config.ldap_mapping)
-        )
+        form.value.config.ldap_mapping = JSON.stringify(JSON.parse(res.data.config.ldap_mapping))
       }
     }
   })

ui/src/views/system-chat-user/authentication/component/SCAN.vue

@@ -34,7 +34,7 @@
             <div v-if="item.isValid" class="border-t mt-16">
               <el-row :gutter="12" class="mt-16">
                 <el-col v-for="(value, key) in item.config" :key="key" :span="12">
-                  <el-text type="info" class="lighter">{{ formatFieldName(key, item) }}</el-text>
+                  <el-text class="color-secondary lighter">{{ formatFieldName(key, item) }}</el-text>
                   <div class="mt-4 mb-16 flex align-center">
                     <span
                       v-if="key !== 'app_secret'"