优化菜单图片选择

src/components/IconSelect/index.vue

@@ -1,14 +1,28 @@
 <template>
   <div class="icon-body">
     <el-input v-model="iconName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
-      <template #suffix><i class="el-icon-search el-input__icon" /></template>
+      <template #prefix>
+        <el-icon class="el-input__icon">
+          <search />
+        </el-icon>
+      </template>
+      <template #suffix>
+        <el-icon class="el-input__icon" @click="selectedIcon('')">
+          <delete />
+        </el-icon>
+      </template>
     </el-input>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="svg-icon" name="1">
         <div class="icon-list">
           <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
             <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
             <span>{{ item }}</span>
           </div>
         </div>
+      </el-tab-pane>
+    </el-tabs>
+
   </div>
 </template>
 
@@ -17,6 +31,7 @@ import icons from './requireIcons'
 
 const iconName = ref('')
 const iconList = ref(icons)
+const activeName = ref('1')
 const emit = defineEmits(['selected'])
 
 function filterIcons() {

src/views/system/menu/index.vue

@@ -103,8 +103,8 @@
                 <template #reference>
                   <el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
                     <template #prefix>
-                      <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
+                      <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon" />
-                      <el-icon v-else style="height: 32px;width: 16px;">
+                      <el-icon class="el-input__icon" v-else>
                         <search />
                       </el-icon>
                     </template>
@@ -117,13 +117,12 @@
           <el-col :lg="12" v-if="form.menuType != 'F'">
             <el-form-item>
               <template #label>
-                <span>
                 <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
                   </el-icon>
-                  </el-tooltip>是否外链
+                </el-tooltip>
-                </span>
+                是否外链
               </template>
               <el-radio-group v-model="form.isFrame">
                 <el-radio label="1">是</el-radio>
@@ -134,14 +133,12 @@
           <el-col :lg="12" v-if="form.menuType != 'F'">
             <el-form-item prop="path">
               <template #label>
-                <span>
                 <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
                 路由地址
-                </span>
               </template>
               <el-input v-model="form.path" placeholder="请输入路由地址" />
             </el-form-item>
@@ -149,14 +146,13 @@
           <el-col :lg="12" v-if="form.menuType == 'C'">
             <el-form-item prop="component">
               <template #label>
-                <span>
+
                 <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
                 组件路径
-                </span>
               </template>
               <el-input v-model="form.component" placeholder="请输入组件路径" />
             </el-form-item>
@@ -165,14 +161,12 @@
             <el-form-item>
               <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
               <template #label>
-                <span>
                 <el-tooltip content="控制器中定义的权限字符，如：[ActionPermissionFilter(Permission = 'system:user:delete')])" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
                 权限字符
-                </span>
               </template>
             </el-form-item>
           </el-col>
@@ -180,29 +174,25 @@
             <el-form-item>
               <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
               <template #label>
-                <span>
                 <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
-                    <!-- <el-icon :size="15"><questionFilled/></el-icon> -->
                   <el-icon :size="15">
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
                 路由参数
-                </span>
               </template>
             </el-form-item>
           </el-col>
           <el-col :lg="12" v-if="form.menuType == 'C'">
             <el-form-item>
               <template #label>
-                <span>
+
                 <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
                 是否缓存
-                </span>
               </template>
               <el-radio-group v-model="form.isCache">
                 <el-radio label="0">缓存</el-radio>
@@ -213,14 +203,13 @@
           <el-col :lg="12" v-if="form.menuType != 'F'">
             <el-form-item>
               <template #label>
-                <span>
+
                 <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
                 显示状态
-                </span>
               </template>
               <el-radio-group v-model="form.visible">
                 <el-radio v-for="dict in sys_show_hide" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
@@ -230,14 +219,12 @@
           <el-col :lg="12" v-if="form.menuType != 'F'">
             <el-form-item>
               <template #label>
-                <span>
                 <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                   <el-icon :size="15">
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
                 菜单状态
-                </span>
               </template>
               <el-radio-group v-model="form.status">
                 <el-radio v-for="dict in sys_normal_disable" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>