style(公共&系统管理): 列表缺陷样式调整

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

@@ -9,11 +9,11 @@
     @cancel="handleCancel"
   >
     <div class="ms-table-column-seletor">
-      <div>
+      <div class="mb-2">
-        <span>{{ t('msTable.columnSetting.mode') }}</span>
+        <span class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.mode') }}</span>
-        <icon-question-circle class="ml-1" />
+        <icon-question-circle class="ml-1 text-[var(--color-text-brand)]" />
       </div>
-      <a-radio-group :model-value="currentMode" class="ml-[14px]" type="button" @change="handleModeChange">
+      <a-radio-group :model-value="currentMode" type="button" @change="handleModeChange">
         <a-radio value="drawer">
           <div class="mode-button">
             <MsIcon :class="{ 'active-color': currentMode === 'drawer' }" type="icon-icon_drawer" />
@@ -28,25 +28,27 @@
         </a-radio>
       </a-radio-group>
       <a-divider />
-      <div class="flex items-center justify-between">
+      <div class="mb-2 flex items-center justify-between">
-        <div>{{ t('msTable.columnSetting.header') }}</div>
+        <div class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.header') }}</div>
         <MsButton :disabled="!hasChange" @click="handleReset">{{ t('msTable.columnSetting.resetDefault') }}</MsButton>
       </div>
       <div class="flex-col">
         <div v-for="(item, idx) in nonSortColumn" :key="item.dataIndex" class="column-item">
           <div>{{ t(item.title as string) }}</div>
-          <a-switch :model-value="item.showInTable" size="small" @change="handleFirstColumnChange(idx)" />
+          <a-switch size="small" :model-value="item.showInTable" @change="handleFirstColumnChange(idx)" />
         </div>
       </div>
-      <a-divider orientation="center" class="non-sort">{{ t('msTable.columnSetting.nonSort') }}</a-divider>
+      <a-divider orientation="center" class="non-sort"
-      <Draggable tag="div" :list="couldSortColumn" ghost-class="ghost" item-key="dateIndex">
+        ><span class="text-xs text-[var(--color-text-4)]">{{ t('msTable.columnSetting.nonSort') }}</span></a-divider
+      >
+      <Draggable tag="div" :list="couldSortColumn" class="list-group" handle=".handle" item-key="dateIndex">
         <template #item="{ element, index }">
           <div class="column-drag-item">
-            <div class="flex items-center">
+            <div class="handle flex w-[90%] items-center">
-              <icon-drag-dot-vertical />
+              <MsIcon type="icon-icon_drag" class="text-[16px] text-[var(--color-text-4)]" />
-              <div class="ml-[8px]">{{ t(element.title as string) }}</div>
+              <span class="ml-[8px]">{{ t(element.title as string) }}</span>
             </div>
-            <a-switch :model-value="element.showInTable" size="small" @change="handleSecondColumnChange(index)" />
+            <a-switch size="small" :model-value="element.showInTable" @change="handleSecondColumnChange(index)" />
           </div>
         </template>
       </Draggable>
@@ -137,6 +139,13 @@
 </script>
 
 <style lang="less" scoped>
+  :deep(.arco-divider-horizontal) {
+    margin: 16px 0;
+    border-bottom-color: var(--color-text-n8);
+  }
+  :deep(.arco-divider-text) {
+    padding: 0 8px;
+  }
   .icon {
     margin-left: 16px;
     color: var(--color-text-4);
@@ -163,6 +172,10 @@
     justify-content: space-between;
     align-items: center;
     padding: 8px 12px 8px 36px;
+    &:hover {
+      border-radius: 6px;
+      background: var(--color-text-n9);
+    }
   }
   .column-drag-item {
     display: flex;
@@ -172,6 +185,7 @@
     padding: 8px 12px;
     cursor: move;
     &:hover {
+      border-radius: 6px;
       background-color: var(--color-text-n9);
     }
   }
@@ -179,10 +193,6 @@
     border: 1px dashed rgba(var(--primary-5));
     background-color: rgba(var(--primary-1));
   }
-  :deep(.arco-divider-text) {
-    padding: 0 8px;
-    color: var(--color-text-4);
-  }
   .non-sort {
     font-size: 12px;
   }

frontend/src/utils/index.ts

@@ -233,27 +233,17 @@ export function findNodeByKey<T>(trees: TreeNode<T>[], targetKey: string, custom
 }
 
 /**
- * 查找一个数组里边的每一项是否在另外一个数组里边，如果存在返回[],否则返回不存在项的新数组
+ * 找出俩数组之间的差异项并返回
- * @param nameMap 目标项
+ * @param targetMap 目标项
- * @param dataMap 查找项
+ * @param sourceMap 查找项
  * @returns 返回不存在项的新数组
  */
-export function filterItem(nameMap: Record<string, any>[], dataMap: Record<string, any>[]) {
+export function getFilterList(targetMap: Record<string, any>[], sourceMap: Record<string, any>[]) {
-  // 对数组 nameMap 中的每一项进行判断
+  const filteredData: Record<string, any>[] = [];
-  const isExist = nameMap.every((item) => {
+  targetMap.forEach((item) => {
-    return dataMap.some((otherItem) => {
+    if (!sourceMap.some((it) => it.id === item.id)) {
-      return item.id === otherItem.id;
+      filteredData.push(item);
-    });
-  });
-
-  if (isExist) {
-    return [];
     }
-  // 找出不在数组 dataMap 中的项放入新数组
-  const filterNotExistOptions = dataMap.filter((item) => {
-    return !nameMap.some((otherItem) => {
-      return item.id === otherItem.id;
   });
-  });
+  return filteredData;
-  return filterNotExistOptions;
 }

frontend/src/views/setting/system/pluginManager/components/pluginTable.vue

@@ -456,4 +456,11 @@
   :deep(.arco-table-content + .arco-scrollbar-track-direction-horizontal .arco-scrollbar-thumb-direction-horizontal) {
     width: 0 !important;
   }
+  :deep(.arco-table-hover) {
+    .arco-table-tr-expand:not(.arco-table-tr-empty):hover {
+      .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) {
+        background: none !important;
+      }
+    }
+  }
 </style>

frontend/src/views/setting/system/pluginManager/components/tableExpand.vue

@@ -9,7 +9,7 @@
     <div class="ms-scroll">
       <div v-for="(item, index) in record.pluginForms" :key="item.id" class="ms-self"
         ><span class="circle text-xs leading-[16px]"> {{ index + 1 }} </span
-        ><span class="cursor-pointer text-[rgb(var(--primary-6))]" @click="emit('MessageEvent', record, item)">{{
+        ><span class="cursor-pointer text-[rgb(var(--primary-5))]" @click="emit('MessageEvent', record, item)">{{
           item.name
         }}</span></div
       >
@@ -51,4 +51,7 @@
     border-bottom: 1px solid var(--color-text-n8);
     @apply flex items-center align-middle leading-6;
   }
+  .ms-self:hover {
+    background: var(--color-fill-1);
+  }
 </style>