UPDATE: 处理控制台警告问题

frontend/src/components/SelectIcon/index.vue

@@ -1,49 +1,49 @@
 <template>
-  <div class='icon-box' >
-    <el-input
-      ref='inputRef'
-      v-model='valueIcon'
-      v-bind='$attrs'
-      :placeholder='placeholder'
-      :clearable='clearable'
-      @clear='clearIcon'
-      @click='openDialog'
-    >
-      <template #append>
-        <el-button :icon='customIcons[iconValue]' />
-      </template>
-    </el-input>
-    <el-dialog v-model='dialogVisible' :title='placeholder' top='5%' width='30%' >
-      <el-input v-model='inputValue' placeholder='搜索图标' size='large' :prefix-icon='Icons.Search' />
-      <el-scrollbar v-if='Object.keys(iconsList).length'>
-        <div class='icon-list'>
-          <div v-for='item in iconsList' :key='item' class='icon-item' @click='selectIcon(item)'>
-            <component :is='item'></component>
-            <span>{{ item.name }}</span>
-          </div>
-        </div>
-      </el-scrollbar>
-      <el-empty v-else description='未搜索到您要找的图标~' />
-    </el-dialog>
-  </div>
+    <div class="icon-box">
+        <el-input
+            ref="inputRef"
+            v-model="valueIcon"
+            v-bind="$attrs"
+            :placeholder="placeholder"
+            :clearable="clearable"
+            @clear="clearIcon"
+            @click="openDialog"
+        >
+            <template #append>
+                <el-button :icon="customIcons[iconValue]" />
+            </template>
+        </el-input>
+        <el-dialog v-model="dialogVisible" :title="placeholder" top="5%" width="30%">
+            <el-input v-model="inputValue" placeholder="搜索图标" size="large" :prefix-icon="Icons.Search" />
+            <el-scrollbar v-if="Object.keys(iconsList).length">
+                <div class="icon-list">
+                    <div v-for="item in iconsList" :key="item" class="icon-item" @click="selectIcon(item)">
+                        <component :is="item"></component>
+                        <span>{{ item.name }}</span>
+                    </div>
+                </div>
+            </el-scrollbar>
+            <el-empty v-else description="未搜索到您要找的图标~" />
+        </el-dialog>
+    </div>
 </template>
 
-<script  lang='ts' setup name='SelectIcon'>
+<script lang="ts" setup name="SelectIcon">
 import * as Icons from '@element-plus/icons-vue'
-import { computed, ref } from 'vue';
+import { computed, ref } from 'vue'
 
 interface SelectIconProps {
-  iconValue: string| undefined;
-  title?: string;
-  clearable?: boolean;
-  placeholder?: string;
+    iconValue: string | undefined
+    title?: string
+    clearable?: boolean
+    placeholder?: string
 }
 
 const props = withDefaults(defineProps<SelectIconProps>(), {
-  iconValue: '',
-  title: '请选择图标',
-  clearable: true,
-  placeholder: '请选择图标',
+    iconValue: '',
+    title: '请选择图标',
+    clearable: true,
+    placeholder: '请选择图标'
 })
 
 // 重新接收一下，防止打包后 clearable 报错
@@ -55,37 +55,36 @@ const openDialog = () => (dialogVisible.value = true)
 
 // 选择图标(触发更新父组件数据)
 const emit = defineEmits<{
-  'update:iconValue': [value: string];
+    'update:iconValue': [value: string]
 }>()
 const selectIcon = (item: any) => {
-  dialogVisible.value = false
-  valueIcon.value = item.name
-  emit('update:iconValue', item.name)
-  setTimeout(() => inputRef.value.blur(), 0)
+    dialogVisible.value = false
+    valueIcon.value = item.name
+    emit('update:iconValue', item.name)
+    setTimeout(() => inputRef.value.blur(), 0)
 }
 
 // 清空图标
 const inputRef = ref()
 const clearIcon = () => {
-  valueIcon.value = ''
-  emit('update:iconValue', '')
-  setTimeout(() => inputRef.value.blur(), 0)
+    valueIcon.value = ''
+    emit('update:iconValue', '')
+    setTimeout(() => inputRef.value.blur(), 0)
 }
 
 // 监听搜索框值
 const inputValue = ref('')
 const customIcons: { [key: string]: any } = Icons
 const iconsList = computed((): { [key: string]: any } => {
-  if (!inputValue.value) return Icons
-  let result: { [key: string]: any } = {}
-  for (const key in customIcons) {
-    if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
-  }
-  return result
+    if (!inputValue.value) return Icons
+    let result: { [key: string]: any } = {}
+    for (const key in customIcons) {
+        if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
+    }
+    return result
 })
-
 </script>
 
-<style scoped lang='scss'>
-@import "./index.scss";
+<style scoped lang="scss">
+@use './index.scss';
 </style>