ADD: 图标筛选

src/components/IconSelect.vue

+<template>
+    <div class="flex items-center">
+        <el-icon :size="20" v-if="modelValue" class="mr-2">
+            <component :is="modelValue"/>
+        </el-icon>
+        <el-select filterable :modelValue="modelValue" class="m-2" placeholder="请选择图标" 
+        @change="handleChange">
+            <el-option v-for="item in icons" 
+            :key="item" 
+            :label="item" 
+            :value="item">
+            <div class="flex items-center justify-between">
+                <el-icon>
+                    <component :is="item"/>
+                </el-icon>
+                <span class="text-gray-500">{{ item }}</span>
+            </div>
+            </el-option>
+        </el-select>
+    </div>
+</template>
+
+
+<script setup>
+import { ref } from 'vue'
+import * as iconList from '@element-plus/icons-vue'
+
+
+defineProps({
+    modelValue:String
+})
+const icons = ref(Object.keys(iconList))
+
+
+const emit = defineEmits(["update:modelValue"])
+const handleChange=(icon)=>{
+    emit("update:modelValue", icon);
+}
+
+
+
+
+</script>
\ No newline at end of file

src/pages/access/list.vue

@@ -40,8 +40,8 @@
                 <el-form-item label="名称" prop="name">
                     <el-input v-model="form.name" style="width:30%;" placeholder="名称"></el-input>
                 </el-form-item>
-                <el-form-item label="菜单图标" prop="icon" v-if="form.menu == 1">
-                    <el-input v-model="form.icon"></el-input>
+                <el-form-item class="flex items-center" label="菜单图标" prop="icon" v-if="form.menu == 1">
+                    <IconSelect  v-model="form.icon"/>
                 </el-form-item>
                 <el-form-item label="前端路由" prop="frontpath" v-if="form.menu == 1 && form.rule_id > 0">
                     <el-input v-model="form.frontpath" placeholder="前端路由"></el-input>
@@ -49,8 +49,8 @@
                 <el-form-item label="后端规则" prop="condition" v-if="form.menu == 0">
                     <el-input v-model="form.condition" placeholder="后端规则"></el-input>
                 </el-form-item>
-                <el-form-item label="请求方式" prop="method" v-if="form.menu == 0">
-                    <el-select v-model="form.method" class="m-2" placeholder="Select">
+                <el-form-item class="flex items-center" label="请求方式" prop="method" v-if="form.menu == 0">
+                    <el-select v-model="form.method" class="m-2" placeholder="请选择请求方式">
                         <el-option
                         v-for="item in ['GET', 'POST', 'PUT', 'DDELETE']"
                         :key="item"
@@ -72,6 +72,7 @@
 import { ref } from "vue"
 import ListHeader from "@/components/ListHeader.vue"
 import FormDrawer from "@/components/FormDrawer.vue"
+import IconSelect from "@/components/IconSelect.vue"
 import {
     getRuleList,
     createRule,