修改优化

src/assets/images/grouping.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.80316 0.540427C7.92894 0.486524 8.07131 0.486524 8.19708 0.540427L15.1971 3.54043C15.3809 3.61922 15.5001 3.79999 15.5001 4C15.5001 4.20001 15.3809 4.38078 15.1971 4.45957L8.19708 7.45957C8.07131 7.51348 7.92894 7.51348 7.80316 7.45957L0.803162 4.45957C0.619321 4.38078 0.500122 4.20001 0.500122 4C0.500122 3.79999 0.619321 3.61922 0.803162 3.54043L7.80316 0.540427ZM2.26942 4L8.00012 6.45602L13.7308 4L8.00012 1.54398L2.26942 4Z" fill="white"/>
+<path d="M0.540556 7.80305C0.649334 7.54923 0.943273 7.43166 1.19709 7.54043L8.00013 10.456L14.8032 7.54043C15.057 7.43166 15.3509 7.54923 15.4597 7.80305C15.5685 8.05686 15.4509 8.3508 15.1971 8.45958L8.19709 11.4596C8.07131 11.5135 7.92894 11.5135 7.80317 11.4596L0.803169 8.45958C0.549354 8.3508 0.431778 8.05686 0.540556 7.80305Z" fill="white"/>
+<path d="M1.19709 11.5404C0.943273 11.4317 0.649334 11.5492 0.540556 11.803C0.431778 12.0569 0.549354 12.3508 0.803169 12.4596L7.80317 15.4596C7.92894 15.5135 8.07131 15.5135 8.19709 15.4596L15.1971 12.4596C15.4509 12.3508 15.5685 12.0569 15.4597 11.803C15.3509 11.5492 15.057 11.4317 14.8032 11.5404L8.00013 14.456L1.19709 11.5404Z" fill="white"/>
+</svg>

src/view/mediaLibrary/TableComponent.vue

@@ -5,7 +5,7 @@
       <el-form-item class="formitem">
         <el-input
           v-model="searchForm.name"
-          @blur="submitClick"
+          @change="submitClick"
           @keydown.enter="submitClick"
           :placeholder="$t('mediaLibrary.addFilePlace')"
 
@@ -35,8 +35,8 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-select
+      <el-form-item style="margin-right: 0px">
+        <el-select class="groupingSelcet"
           v-model="searchForm.dictId"
           style="width: 120px"
           @change="submitClick"
@@ -49,11 +49,14 @@
             :value="item.id"
           />
         </el-select>
+        <div class="grouping" @click="handleAddfz">
+          <img :src="groupingSvg" alt="">
+        </div>
       </el-form-item>
       <el-form-item style="float: right; margin-right: 0">
         <el-button  @click="windowOpen({type: 'photography', library: true})">{{$t('mediaLibrary.photography')}}</el-button>
         <el-button  @click="windowOpen({type: 'modeling', library: true})">{{$t('mediaLibrary.Modeling')}}</el-button>
-        <el-button type="primary" @click="handleAddfz">{{$t('mediaLibrary.grouping')}}</el-button>
+        <!-- <el-button type="primary" @click="handleAddfz">{{$t('mediaLibrary.grouping')}}</el-button> -->
         <el-button type="primary" @click="handleAdd">{{$t('mediaLibrary.upload')}}</el-button>
       </el-form-item>
     </el-form>
@@ -109,12 +112,14 @@
     <!-- 分页 -->
     <el-pagination
       class="mt-3"
+      background 
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage"
       :page-sizes="[10, 20, 30]"
       :page-size="pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
+      style="justify-content: end"
+      layout="prev, pager, next"
       :total="total"
     >
     </el-pagination>
@@ -241,6 +246,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import { ui18n } from '@/i18n'
 import { windowOpen } from "@/util";
 import { getUrlData } from "@/store/user";
+import groupingSvg from "@/assets/images/grouping.svg";
 
 // 定义 props
 const props = defineProps({
@@ -553,6 +559,23 @@ initData();
   // .el-table{
   //   background-color: #535353;
   // }
+  .grouping{
+    padding: 7px 10px;
+    background-color: var(--el-fill-color-blank);
+    box-shadow: 0 0 0 1px var(--el-border-color);
+    border-radius:   0  4px  4px 0 ;
+      opacity: 0.7;
+      cursor: pointer;
+    &:hover{
+      box-shadow: 0 0 0 1px #6C6E72;
+      opacity: 1;
+    }
+  }
+  .groupingSelcet{
+    .el-select__wrapper{
+      border-radius:4px  0 0  4px;
+    }
+  }
   .el-form--inline .el-form-item{
     margin-right: 20px;
   }
@@ -643,4 +666,9 @@ initData();
     }
   }
 }
+.el-pager li.is-active{
+  border: 1px solid var(--el-color-primary);
+  background-color: none;
+
+}
 </style>