fix(全局): 样式调整

frontend/config/plugin/arcoStyleImport.ts

@@ -9,7 +9,7 @@ import { vitePluginForArco } from '@arco-plugins/vite-vue';
 export default function configArcoStyleImportPlugin() {
   // 按需加载主题样式
   const arcoResolverPlugin = vitePluginForArco({
-    theme: '@arco-themes/vue-ms-theme-default',
+    theme: '@arco-themes/vue-metersphere-v3',
   });
   return arcoResolverPlugin;
 }

frontend/package.json

@@ -38,8 +38,8 @@
   "dependencies": {
     "@7polo/kity": "2.0.8",
     "@7polo/kityminder-core": "1.4.53",
-    "@arco-design/web-vue": "^2.55.0",
-    "@arco-themes/vue-ms-theme-default": "^0.0.30",
+    "@arco-design/web-vue": "^2.55.1",
+    "@arco-themes/vue-metersphere-v3": "^0.0.1",
     "@form-create/arco-design": "^3.1.23",
     "@halo-dev/richtext-editor": "0.0.0-alpha.33",
     "@tanstack/vue-query": "^5.17.15",

frontend/src/components/business/ms-tree/index.vue

@@ -479,16 +479,6 @@
               @apply flex-1 overflow-hidden;
             }
           }
-          .arco-tree-node-drag-icon {
-            @apply hidden;
-
-            // top: 50%;
-            // right: 16px;
-            // transform: translateY(-50%);
-            // .arco-icon {
-            //   font-size: 14px;
-            // }
-          }
         }
         .arco-tree-node-title-block {
           width: 60%;
@@ -582,4 +572,8 @@
       }
     }
   }
+  // 为了让挂载在 body 下非 app 内的树节点生效
+  .arco-tree-node-drag-icon {
+    @apply hidden;
+  }
 </style>

frontend/src/components/pure/ms-table/base-table.vue

@@ -233,7 +233,7 @@
           {{ t('msTable.batch.clear') }}
         </a-button>
       </span>
-      <div class="flex flex-grow">
+      <div class="flex flex-grow items-center">
         <batch-action
           v-if="showBatchAction"
           class="flex-1"

frontend/src/components/pure/ms-table/batchAction.vue

@@ -1,52 +1,50 @@
 <template>
-  <div v-if="props.actionConfig" ref="refWrapper" class="flex flex-row flex-nowrap">
+  <div v-if="props.actionConfig" ref="refWrapper" class="flex flex-row flex-nowrap items-center">
     <div class="title one-line-text">{{ t('msTable.batch.selected', { count: props.selectRowCount }) }}</div>
-    <div>
-      <template v-for="(element, idx) in baseAction" :key="element.label">
-        <a-divider v-if="element.isDivider" class="divider mx-0 my-[6px]" />
+    <template v-for="(element, idx) in baseAction" :key="element.label">
+      <a-divider v-if="element.isDivider" class="divider mx-0 my-[6px]" />
+      <a-button
+        v-if="!element.isDivider && !element.children && hasAllPermission(element.permission as string[]) && hasAnyPermission(element.anyPermission as string[])"
+        class="ml-[8px]"
+        :class="{
+          'arco-btn-outline--danger': element.danger,
+          'ml-[8px]': idx === 0,
+        }"
+        type="outline"
+        :size="props.size"
+        @click="handleSelect(element)"
+        >{{ t(element.label as string) }}</a-button
+      >
+      <!-- baseAction多菜单选择 -->
+      <a-dropdown
+        v-if="!element.isDivider && element.children && hasAllPermission(element.permission as string[]) && hasAnyPermission(element.anyPermission as string[])"
+        position="tr"
+        :size="props.size"
+        @select="handleSelect"
+      >
         <a-button
-          v-if="!element.isDivider && !element.children && hasAllPermission(element.permission as string[]) && hasAnyPermission(element.anyPermission as string[])"
-          class="ml-[12px]"
+          class="ml-[8px]"
           :class="{
             'arco-btn-outline--danger': element.danger,
             'ml-[8px]': idx === 0,
           }"
           type="outline"
           :size="props.size"
-          @click="handleSelect(element)"
+          @click="handleSelect"
           >{{ t(element.label as string) }}</a-button
         >
-        <!-- baseAction多菜单选择 -->
-        <a-dropdown
-          v-if="!element.isDivider && element.children && hasAllPermission(element.permission as string[]) && hasAnyPermission(element.anyPermission as string[])"
-          position="tr"
-          :size="props.size"
-          @select="handleSelect"
-        >
-          <a-button
-            class="ml-[12px]"
-            :class="{
-              'arco-btn-outline--danger': element.danger,
-              'ml-[8px]': idx === 0,
-            }"
-            type="outline"
-            :size="props.size"
-            @click="handleSelect"
-            >{{ t(element.label as string) }}</a-button
-          >
-          <template #content>
-            <template v-for="item in element.children" :key="item.label">
-              <a-divider v-if="element.isDivider" margin="4px" />
-              <a-doption v-else :value="item" :class="{ delete: item.danger }">
-                {{ t(item.label as string) }}
-              </a-doption>
-            </template>
+        <template #content>
+          <template v-for="item in element.children" :key="item.label">
+            <a-divider v-if="element.isDivider" margin="4px" />
+            <a-doption v-else :value="item" :class="{ delete: item.danger }">
+              {{ t(item.label as string) }}
+            </a-doption>
           </template>
-        </a-dropdown>
-        <!-- baseAction多菜单选择 -->
-      </template>
-    </div>
-    <div v-if="moreActionLength > 0" class="drop-down relative ml-[8px] inline-block">
+        </template>
+      </a-dropdown>
+      <!-- baseAction多菜单选择 -->
+    </template>
+    <div v-if="moreActionLength > 0" class="drop-down ml-[8px] flex items-center">
       <a-dropdown position="tr" @select="handleSelect">
         <a-button type="outline" :size="props.size"><MsIcon type="icon-icon_more_outlined" /></a-button>
         <template #content>

frontend/src/main.ts

@@ -1,7 +1,7 @@
 /* eslint-disable simple-import-sort/imports */
 import { createApp } from 'vue';
 import ArcoVue from '@arco-design/web-vue';
-import '@arco-themes/vue-ms-theme-default/index.less';
+import '@arco-themes/vue-metersphere-v3/index.less';
 
 import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 import SvgIcon from '@/components/pure/svg-icon/index.vue';

frontend/src/views/api-test/management/components/import.vue

@@ -42,9 +42,10 @@
           <a-form-item :label="t('apiTestManagement.belongModule')">
             <a-tree-select
               v-model:modelValue="importForm.moduleId"
-              :data="moduleTree"
+              :data="props.moduleTree"
               class="w-[436px]"
               :field-names="{ title: 'name', key: 'id', children: 'children' }"
+              :draggable="false"
               allow-search
               allow-clear
             >
@@ -247,7 +248,7 @@
           <a-form-item :label="t('apiTestManagement.belongModule')">
             <a-tree-select
               v-model:modelValue="importForm.moduleId"
-              :data="moduleTree"
+              :data="props.moduleTree"
               class="w-[500px]"
               :field-names="{ title: 'name', key: 'id', children: 'children' }"
               allow-search
@@ -361,7 +362,6 @@
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
   import useUserStore from '@/store/modules/user';
-  import { mapTree } from '@/utils';
 
   import type { ImportApiDefinitionParams, ImportApiDefinitionRequest } from '@/models/apiTest/management';
   import type { ModuleTreeNode } from '@/models/common';
@@ -433,7 +433,6 @@
     }
     return !importForm.value.name || !importForm.value.swaggerUrl;
   });
-  const moduleTree = computed(() => mapTree(props.moduleTree, (node) => ({ ...node, draggable: false })));
   const syncFrequencyOptions = [
     { label: t('apiTestManagement.timeTaskHour'), value: '0 0 0/1 * * ?' },
     { label: t('apiTestManagement.timeTaskSixHour'), value: '0 0 0/6 * * ?' },

frontend/src/views/api-test/management/components/management/api/index.vue

@@ -57,7 +57,6 @@
           <preview
             v-if="activeApiTab.definitionActiveKey === 'preview'"
             :detail="activeApiTab"
-            :module-tree="props.moduleTree"
             :protocols="protocols"
             @update-follow="activeApiTab.follow = !activeApiTab.follow"
           />

frontend/src/views/api-test/management/components/management/api/preview/index.vue

@@ -68,17 +68,14 @@
   import { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
 
   import { toggleFollowDefinition } from '@/api/modules/api-test/management';
-  import { findNodeByKey } from '@/utils';
 
   import { ProtocolItem } from '@/models/apiTest/common';
-  import { ModuleTreeNode } from '@/models/common';
   import { RequestMethods } from '@/enums/apiEnum';
 
   import { getValidRequestTableParams } from '@/views/api-test/components/utils';
 
   const props = defineProps<{
     detail: RequestParam;
-    moduleTree: ModuleTreeNode[];
     protocols: ProtocolItem[];
   }>();
   const emit = defineEmits(['updateFollow']);
@@ -140,7 +137,7 @@
     {
       key: 'belongModule',
       locale: 'apiTestManagement.belongModule',
-      value: findNodeByKey<ModuleTreeNode>(props.moduleTree, previewDetail.value.moduleId, 'id')?.path,
+      value: previewDetail.value.path,
     },
     {
       key: 'creator',

frontend/src/views/api-test/management/index.vue

@@ -79,13 +79,12 @@
 
   import { getTrashModuleCount } from '@/api/modules/api-test/management';
   import { useI18n } from '@/hooks/useI18n';
+  import useAppStore from '@/store/modules/app';
 
   import { ApiDefinitionGetModuleParams } from '@/models/apiTest/management';
   import { ModuleTreeNode } from '@/models/common';
   import { ApiTestRouteEnum } from '@/enums/routeEnum';
 
-  import useAppStore from '../../../store/modules/app';
-
   const route = useRoute();
   const { t } = useI18n();
   const router = useRouter();
@@ -100,9 +99,9 @@
   const managementRef = ref<InstanceType<typeof management>>();
 
   function handleModuleInit(tree: ModuleTreeNode[], _protocol: string, pathMap: Record<string, any>) {
-    // folderTree.value = tree;
+    folderTree.value = tree;
     protocol.value = _protocol;
-    // folderTreePathMap.value = pathMap;
+    folderTreePathMap.value = pathMap;
   }
 
   function newApi() {