feat(UI 走查): UI 走查调整&描述组件调整

frontend/src/assets/style/arco-reset.less

@@ -620,9 +620,21 @@
   .arco-icon {
     font-size: 14px;
   }
+  .arco-tag-close-btn {
+    .arco-icon {
+      color: var(--color-text-brand);
+    }
+  }
 }
 
 /** 虚拟列表 **/
 .arco-virtual-list {
   .ms-scroll-bar();
 }
+
+/** 日期选择器 **/
+.arco-picker-suffix-icon {
+  .arco-icon {
+    color: var(--color-text-brand);
+  }
+}

frontend/src/components/pure/menu/index.vue

@@ -252,7 +252,7 @@
     .arco-menu-inner {
       @apply flex flex-col;
 
-      padding: 16px 32px 16px 16px !important;
+      padding: 16px 28px 16px 16px !important;
       .arco-menu-inline {
         &--bottom {
           @apply mt-auto;

frontend/src/components/pure/ms-card/index.vue

@@ -19,7 +19,7 @@
           class="pr-[5px]"
           :style="{
             overflow: 'auto',
-            width: `calc(100vw - ${menuWidth}px - 58px)`,
+            width: props.width ? props.width : `calc(100vw - ${menuWidth}px - 58px)`,
             height: props.autoHeight ? 'auto' : `calc(100vh - ${cardOverHeight}px)`,
           }"
         >
@@ -70,6 +70,7 @@
         specialHeight: number; // 特殊高度，例如某些页面有面包屑
         hideBack: boolean; // 隐藏返回按钮
         autoHeight: boolean; // 内容区域高度是否自适应
+        width?: string; // 卡片宽度
         hasBreadcrumb: boolean; // 是否有面包屑，如果有面包屑，高度需要减去面包屑的高度
         noContentPadding: boolean; // 内容区域是否有padding
         handleBack: () => void; // 自定义返回按钮触发事件

frontend/src/components/pure/ms-description/index.vue

@@ -7,35 +7,43 @@
       <a-skeleton-line :rows="props.skeletonLine" :line-height="24" />
     </a-space>
   </a-skeleton>
-  <a-descriptions v-else :data="(props.descriptions as unknown as DescData[])" size="large" :column="props.column">
+  <div v-else class="ms-description" size="large">
-    <template #title>
+    <slot name="title"></slot>
-      <slot name="title"></slot>
+    <div
-    </template>
+      v-for="(item, index) of props.descriptions"
-    <a-descriptions-item v-for="item of props.descriptions" :key="item.label" :label="item.label">
+      :key="item.label"
-      <template v-if="item.isTag">
+      class="ms-description-item"
-        <a-tag
+      :style="{ marginBottom: props.descriptions.length - index <= props.column ? '' : '16px' }"
-          v-for="tag of item.value"
+    >
-          :key="tag"
+      <div class="ms-description-item-label">
-          color="var(--color-text-n8)"
+        <slot name="item-label">{{ item.label }}</slot>
-          class="mr-[8px] font-normal !text-[var(--color-text-1)]"
+      </div>
-        >
+      <div class="ms-description-item-value">
-          {{ tag }}
+        <slot name="item-value">
-        </a-tag>
+          <template v-if="item.isTag">
-        <span v-show="Array.isArray(item.value) && item.value.length === 0">-</span>
+            <a-tag
-      </template>
+              v-for="tag of item.value"
-      <a-button v-else-if="item.isButton" type="text" @click="handleItemClick(item)">{{ item.value }}</a-button>
+              :key="tag"
-      <div v-else>
+              color="var(--color-text-n8)"
-        <slot name="value" :item="item">
+              class="mr-[8px] font-normal !text-[var(--color-text-1)]"
-          {{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
+            >
+              {{ tag }}
+            </a-tag>
+            <span v-show="Array.isArray(item.value) && item.value.length === 0">-</span>
+          </template>
+          <a-button v-else-if="item.isButton" type="text" @click="handleItemClick(item)">{{ item.value }}</a-button>
+          <div v-else>
+            <slot name="value" :item="item">
+              {{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
+            </slot>
+          </div>
         </slot>
       </div>
-    </a-descriptions-item>
+    </div>
-  </a-descriptions>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import type { DescData } from '@arco-design/web-vue';
-
   export interface Description {
     label: string;
     value: (string | number) | (string | number)[];
@@ -65,15 +73,23 @@
 </script>
 
 <style lang="less" scoped>
-  .arco-descriptions-item-label {
+  .ms-description {
-    @apply whitespace-pre-wrap font-normal;
+    @apply flex flex-wrap;
-  }
+    .ms-description-item {
-  .arco-descriptions-item-label-block {
+      @apply flex items-center;
-    padding-right: 16px !important;
+
-    word-wrap: break-word;
+      width: calc(100% / v-bind(column));
-    width: 120px;
+    }
-  }
+    .ms-description-item-label {
-  .arco-descriptions-item-value-block {
+      @apply whitespace-pre-wrap font-normal;
-    @apply !pr-0 align-top;
+
+      padding-right: 16px;
+      width: 120px;
+      color: var(--color-text-3);
+      word-wrap: break-word;
+    }
+    .ms-description-item-value {
+      @apply !pr-0 align-top;
+    }
   }
 </style>

frontend/src/views/setting/system/config/components/authConfig.vue

@@ -8,7 +8,7 @@
       </div>
       <ms-base-table v-bind="propsRes" no-disable v-on="propsEvent">
         <template #name="{ record }">
-          <a-button type="text" @click="openAuthDetail(record.id)">{{ record.name }}</a-button>
+          <a-button type="text" class="px-0" @click="openAuthDetail(record.id)">{{ record.name }}</a-button>
         </template>
         <template #action="{ record }">
           <MsButton @click="editAuth(record)">{{ t('system.config.auth.edit') }}</MsButton>

frontend/src/views/setting/system/config/components/baseConfig.vue

@@ -49,7 +49,7 @@
         v-if="emailConfigForm.host !== null"
         type="outline"
         size="mini"
-        class="arco-btn-outline--secondary"
+        class="arco-btn-outline--secondary mt-[16px]"
         :loading="testLoading"
         @click="testLink('page')"
       >

frontend/src/views/setting/system/config/components/pageConfig.vue

@@ -4,7 +4,7 @@
     <MsCard class="mb-[16px]" :loading="pageloading" simple auto-height>
       <div class="config-title">
         {{ t('system.config.page.theme') }}
-        <a-tooltip :content="t('system.config.page.themeTip')" position="tl" mini>
+        <a-tooltip :content="t('system.config.page.themeTip')" position="tl" class="themeTip">
           <icon-question-circle class="ml-[4px] text-[var(--color-text-4)] hover:text-[rgb(var(--primary-6))]" />
         </a-tooltip>
       </div>
@@ -667,3 +667,9 @@
     }
   }
 </style>
+
+<style>
+  .arco-tooltip-content {
+    max-width: 100%;
+  }
+</style>

frontend/src/views/setting/system/resourcePool/detail.vue

@@ -230,7 +230,7 @@
           <a-input-password
             v-model:model-value="form.testResourceDTO.token"
             :placeholder="t('system.resourcePool.testResourceDTO.tokenPlaceholder')"
-            :max-length="250"
+            :max-length="1500"
             autocomplete="new-password"
           />
         </a-form-item>

frontend/src/views/setting/system/resourcePool/index.vue

@@ -15,7 +15,7 @@
     </div>
     <ms-base-table v-bind="propsRes" no-disable v-on="propsEvent">
       <template #name="{ record }">
-        <a-button type="text" @click="showPoolDetail(record.id)">{{ record.name }}</a-button>
+        <a-button type="text" class="px-0" @click="showPoolDetail(record.id)">{{ record.name }}</a-button>
       </template>
       <template #action="{ record }">
         <MsButton @click="editPool(record)">{{ t('system.resourcePool.editPool') }}</MsButton>

frontend/src/views/setting/system/user/index.vue

@@ -284,6 +284,7 @@
       title: 'system.user.tableColumnActions',
       slotName: 'action',
       fixed: 'right',
+      width: 80,
       showInTable: true,
     },
   ];