feat: 图标选择器

src/components/select-icon/index.vue

@@ -57,7 +57,7 @@ const onIcon = (iconName: string) => {
   emit("select", iconName);
 };
 
-const visible = ref(false);
+const visible = ref<boolean>(false);
 const open = () => {
   searchName.value = "";
   visible.value = true;

src/lang/modules/enUS.ts

@@ -28,7 +28,7 @@ export default {
     ["draggable"]: "draggable",
     ["editor"]: "editor",
     ["newbie"]: "newbie",
-    ["icon-component"]: "icon component",
+    ["icon-selector"]: "icon selector",
     ["user-center"]: "user center",
     ["markdown"]: "Markdown",
     ["custom-instruction"]: "custom instruction",

src/lang/modules/zhCN.ts

@@ -28,7 +28,7 @@ export default {
     ["draggable"]: "拖拽",
     ["editor"]: "富文本",
     ["newbie"]: "新手指引",
-    ["icon-component"]: "icon组件",
+    ["icon-selector"]: "图标选择器",
     ["user-center"]: "用户中心",
     ["markdown"]: "Markdown",
     ["custom-instruction"]: "自定义指令",

src/router/route.ts

@@ -389,11 +389,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             }
           },
           {
-            path: "/common-component/icon-component",
+            path: "/common-component/icon-selector",
-            name: "icon-component",
+            name: "icon-selector",
-            component: () => import("@/views/common-component/icon-component/icon-component.vue"),
+            component: () => import("@/views/common-component/icon-selector/icon-selector.vue"),
             meta: {
-              title: "icon-component",
+              title: "icon-selector",
               hide: false,
               disable: false,
               keepAlive: true,

src/views/common-component/icon-selector/icon-selector.vue

@@ -2,17 +2,13 @@
   <div class="snow-page">
     <div class="snow-inner-page">
       <div class="title">图标选择器</div>
-      <a-input
+      <a-input ref="inputRef" :style="{ width: '400px' }" placeholder="请选择图标" v-model="iconName" @focus="onFocus">
-        :style="{ width: '400px' }"
-        placeholder="请选择图标"
-        allow-clear
-        v-model="iconName"
-        @focus="onFocus"
-        @clear="onClear"
-      >
         <template #suffix v-if="iconName">
           <component :is="iconName"></component>
         </template>
+        <template #append>
+          <span class="icon-reset" @click="reset">重置</span>
+        </template>
       </a-input>
       <a-divider />
       <div class="target-title">当前选择的图标：</div>
@@ -26,10 +22,12 @@
 <script setup lang="ts">
 const iconName = ref<string>("");
 const SelectIconRef = ref();
+
 const onFocus = () => {
   SelectIconRef.value.open();
 };
-const onClear = () => {
+
+const reset = () => {
   iconName.value = "";
 };
 
@@ -47,4 +45,7 @@ const select = (icon: string) => {
 .target-title {
   margin-bottom: $margin;
 }
+.icon-reset {
+  cursor: pointer;
+}
 </style>