perf: Optimize some styles (#3907)

* perf: Optimize packaging

* perf: Optimize some styles

---------

Co-authored-by: wangdan-fit2cloud <dan.wang@fit2cloud.com>

ui/package.json

@@ -44,6 +44,7 @@
     "screenfull": "^6.0.2",
     "sortablejs": "^1.15.6",
     "use-element-plus-theme": "^0.0.5",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.2",
     "vue": "^3.5.13",
     "vue-clipboard3": "^2.0.0",

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

ui/src/views/system-resource-management/ApplicationResourceIndex.vue

@@ -67,10 +67,10 @@
           width="160"
         >
           <template #default="scope">
-            <el-tag type="warning" v-if="isWorkFlow(scope.row.type)" style="height: 22px">
+            <el-tag class="warning-tag" v-if="isWorkFlow(scope.row.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>
           </template>
@@ -255,7 +255,7 @@
               </span>
             </el-tooltip>
             <el-dropdown trigger="click" v-if="MoreFilledPermission()">
-              <el-button text @click.stop>
+              <el-button text @click.stop type="primary">
                 <AppIcon iconName="app-more"></AppIcon>
               </el-button>
               <template #dropdown>

ui/src/views/system-resource-management/KnowledgeResourceIndex.vue

@@ -186,7 +186,7 @@
               </span>
             </el-tooltip>
             <el-dropdown trigger="click" v-if="MoreFilledPermission()">
-              <el-button text @click.stop>
+              <el-button text @click.stop type="primary">
                 <AppIcon iconName="app-more"></AppIcon>
               </el-button>
               <template #dropdown>

ui/src/views/system-resource-management/ToolResourceIndex.vue

@@ -239,7 +239,7 @@
               </span>
             </el-tooltip>
             <el-dropdown trigger="click" v-if="MoreFilledPermission(row)">
-              <el-button text @click.stop>
+              <el-button text @click.stop type="primary">
                 <AppIcon iconName="app-more"></AppIcon>
               </el-button>
               <template #dropdown>

ui/src/views/system-setting/authentication/component/LDAP.vue

@@ -66,18 +66,21 @@
         </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.LOGIN_AUTH_EDIT],
-                        [],'OR',)"
+              new ComplexPermission([RoleConst.ADMIN], [PermissionConst.LOGIN_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 +104,9 @@ const form = ref<any>({
     password: '',
     ou: '',
     ldap_filter: '',
-    ldap_mapping: ''
+    ldap_mapping: '',
   },
-  is_active: true
+  is_active: true,
 })
 
 const authFormRef = ref()
@@ -115,44 +118,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 +180,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-setting/authentication/component/SCAN.vue

@@ -45,7 +45,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">{{ 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'"
@@ -221,9 +221,11 @@ function getPlatformInfo() {
 
 function validateConnection(currentPlatform: Platform) {
   platformApi.validateConnection(currentPlatform, loading).then((res: any) => {
-    res.data
-      ? MsgSuccess(t('views.system.authentication.scanTheQRCode.validateSuccess'))
-      : MsgError(t('views.system.authentication.scanTheQRCode.validateFailed'))
+    if (res.data) {
+      MsgSuccess(t('views.system.authentication.scanTheQRCode.validateSuccess'))
+    } else {
+      MsgError(t('views.system.authentication.scanTheQRCode.validateFailed'))
+    }
   })
 }
 

ui/src/views/system-setting/email/index.vue

@@ -57,10 +57,7 @@
                 >{{ $t('views.system.email.enableTLS') }}
               </el-checkbox>
             </el-form-item>
-            <el-button
-              @click="submit(emailFormRef)"
-              type="primary"
-              :disabled="loading"
+            <span
               v-hasPermission="
                 new ComplexPermission(
                   [RoleConst.ADMIN],
@@ -69,12 +66,17 @@
                   'OR',
                 )
               "
+              class="mr-12"
             >
-              {{ $t('common.save') }}
-            </el-button>
-            <el-button @click="submit(emailFormRef, 'test')" :disabled="loading">
-              {{ $t('views.system.test') }}
-            </el-button>
+              <el-button @click="submit(emailFormRef)" type="primary" :disabled="loading">
+                {{ $t('common.save') }}
+              </el-button>
+            </span>
+            <span>
+              <el-button @click="submit(emailFormRef, 'test')" :disabled="loading">
+                {{ $t('views.system.test') }}
+              </el-button>
+            </span>
           </el-form>
         </div>
       </el-scrollbar>

ui/src/views/tool/toolStore/ToolStoreDialog.vue

@@ -7,7 +7,7 @@
           {{ $t('views.tool.toolStore.title') }}
         </h4>
 
-        <el-tag class="store-type default-tag">{{t('views.tool.toolStore.internal')}}</el-tag>
+        <!-- <el-tag class="store-type default-tag">{{t('views.tool.toolStore.internal')}}</el-tag> -->
 
         <div class="flex align-center" style="margin-right: 28px;">
           <el-input v-model="searchValue" :placeholder="$t('common.search')" prefix-icon="Search" class="w-240 mr-8"
@@ -33,7 +33,7 @@
               {{ category.title }}
             </h4>
             <el-row :gutter="16">
-              <el-col v-for="tool in category.tools" :key="tool.id" :span="8" class="mb-16">
+              <el-col v-for="tool in category.tools" :key="tool.id" :span="12" class="mb-16">
                 <ToolCard :tool="tool" :addLoading="addLoading" :get-sub-title="getSubTitle"
                   @handleAdd="handleOpenAdd(tool)" @handleDetail="handleDetail(tool)" />
               </el-col>
@@ -46,7 +46,7 @@
             {{ t('views.tool.toolStore.searchResult', { count: filterList.length }) }}
           </h4>
           <el-row :gutter="16" v-if="filterList.length">
-            <el-col v-for="tool in filterList" :key="tool.id" :span="8" class="mb-16">
+            <el-col v-for="tool in filterList" :key="tool.id" :span="12" class="mb-16">
               <ToolCard :tool="tool" :addLoading="addLoading" :get-sub-title="getSubTitle"
                 @handleAdd="handleOpenAdd(tool)" @handleDetail="handleDetail(tool)" />
             </el-col>

ui/vite.config.ts

@@ -6,6 +6,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import DefineOptions from 'unplugin-vue-define-options/vite'
 import path from 'path'
 import { createHtmlPlugin } from 'vite-plugin-html'
+import viteCompression from 'vite-plugin-compression'
 import fs from 'fs'
 // import vueDevTools from 'vite-plugin-vue-devtools'
 const envDir = './env'
@@ -87,6 +88,14 @@ export default defineConfig((conf: any) => {
       DefineOptions(),
       createHtmlPlugin({ template: ENV.VITE_ENTRY }),
       renameHtmlPlugin(`dist${ENV.VITE_BASE_PATH}`, ENV.VITE_ENTRY),
+      viteCompression({
+        // gzip静态资源压缩配置
+        verbose: true, // 是否在控制台输出压缩结果
+        disable: false, // 是否禁用压缩
+        threshold: 10240, // 启用压缩的文件大小限制
+        algorithm: 'gzip', // 采用的压缩算法
+        ext: '.gz', // 生成的压缩包后缀
+      }),
     ],
     server: {
       cors: true,