修改搜索的显示

src/components/base/icon/index.vue

@@ -36,6 +36,7 @@ function onClick() {
 </script>
 
 <style lang="scss">
+@import '@/assets/search-icons/iconfont.css';
 @import '@/assets/icons/iconfont.css';
 i.iconfont {
     display: inline-flex;

src/components/common/upload-icon/index.vue

@@ -1,31 +1,92 @@
 <template>
-    <el-dialog v-model="dialogVisible" title="添加icon" :fullscreen="true" :close-on-press-escape="false" :close-on-click-modal="false" :append-to-body="false" :before-close="handleClose">
-        <!-- <el-row :gutter="20">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"></path></svg>
-            <i v-for='item in icons' :key='item' :class="'fa fa-'+item"></i>
-        </el-row> -->
+    <el-dialog v-model="dialogVisible" title="添加icon" :close-on-press-escape="false" width="70%" :close-on-click-modal="false" :append-to-body="false" :before-close="handleClose">
+        <div class="mt-20 icon-dialog">
+            <div class="flex jc-e"><el-input v-model="searchText" placeholder="请输入图标名称" class="search-text" clearable></el-input></div>
+            <el-row v-if="icon_list.length > 0" class="icon-row mt-20" :gutter="20">
+                <el-col v-for="item in icon_list" :key="item.unicode" :span="3">
+                    <div class="icon-item" @click="search_icon_click(item.font_class)">
+                        <i :class="`iconfont icon-${ item.font_class }`"></i>
+                        <div class="text-line-1 size-14">{{ item.name }}</div>
+                    </div>
+                </el-col>
+            </el-row>
+            <div v-else>
+                <no-data height="500"></no-data>
+            </div>
+        </div>
     </el-dialog>
+    <div class="search-icon re" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="icon_click">
+        <icon :name="!isEmpty(icon_class) ? icon_class : 'add'" :size="Number(size) / 2 + ''" color="c"></icon>
+        <el-icon v-if="!isEmpty(icon_class)" class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click.stop="remove_icon" />
+    </div>
 </template>
 <script setup lang="ts">
-
+import searchIcons from '@/assets/search-icons/iconfont.json';
+import { isEmpty } from 'lodash';
 interface Props {
-    dialogVisible: boolean;
+    size: number;
 }
 const props = withDefaults(defineProps<Props>(), {
-    dialogVisible: false,
+    size: 50,
 });
-
-const dialogVisible = ref(props.dialogVisible);
-
+const upload_size = computed(() => {
+    const size = props.size.toString();
+    return size.includes('%') ? size : size + 'px';
+});
+// 搜索
+const searchText = ref('');
+const icon_list = computed(() => searchIcons.glyphs.filter(item => item.font_class.includes(searchText.value) || item.name.includes(searchText.value)));
+// 弹出框操作
+const dialogVisible = ref(false);
 const handleClose = () => {
     dialogVisible.value = false;
 };
+const icon_click = () => {
+    dialogVisible.value = true;
+};
+const icon_class = defineModel('icon_class', { type: String, default: '' });
+const search_icon_click = (item: any) => {
+    icon_class.value = item;
+    handleClose();
+};
+const remove_icon = () => {
+    icon_class.value = '';
+}
 </script>
 
 <style lang="scss" scoped>
-.card.mb-8 {
-    .el-form-item:last-child {
-        margin-bottom: 0;
+.icon-dialog {
+    height: 57rem;
+    .search-text {
+        width: 15rem;
+    }
+    .icon-row {
+        max-height: 50rem;
+        overflow: auto;
+        .icon-item {
+            border: 1px solid #ccc;
+            text-align: center;
+            border-radius: 4px;
+            padding: 1rem;
+            margin-bottom: 2rem; 
+            cursor: pointer;
+            .iconfont {
+                font-size: 3.6rem;
+                height: 3.6rem;
+            }
+        }
+        .text-line-1 {
+            line-height: 2rem;
+        }
     }
 }
+.search-icon{
+    position: relative;
+    background: #fafcff;
+    border-radius: 0.2rem;
+    border: 0.1rem dashed #d7eeff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 </style>

src/components/model-search/index.ts

@@ -9,6 +9,7 @@ interface search_content {
     icon_type: string;
     icon_src: string;
     icon_img_src: uploadList[];
+    icon_class: string;
     search_botton_src: uploadList[];
     search_botton_icon: string;
     is_tips_show: boolean;

src/components/model-search/index.vue

@@ -5,7 +5,7 @@
                 <div class="box h oh flex align-c gap-10" :style="box_style">
                     <template v-if="form.is_icon_show">
                         <template v-if="form.icon_type == 'icon'">
-                            <span class="iconfont icon-search size-14" :style="`color: ${ new_style.icon_color }`"></span>
+                            <el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'search' } size-14`" :style="`color:${new_style.icon_color};`" />
                         </template>
                         <template v-else>
                             <div class="img-box">
@@ -24,7 +24,7 @@
                     </template>
                     <template v-if="form.search_type === 'icon'">
                         <div class="pl-16 pr-16 ptb-3 size-12">
-                            <icon></icon>
+                            <el-icon :class="`iconfont ${ 'icon-' + form.icon_class } size-14`" />
                         </div>
                     </template>
                 </div>
@@ -34,6 +34,7 @@
 </template>
 <script setup lang="ts">
 import { background_computer, common_styles_computer, gradient_computer, radius_computer } from '@/utils';
+import { isEmpty } from 'lodash';
 
 const props = defineProps({
     value: {

src/components/model-search/model-search-content.vue

@@ -18,7 +18,7 @@
                                 <upload v-model="form.icon_img_src" :limit="1" size="50"></upload>
                             </template>
                             <template v-else>
-                                <!-- <upload-icon :dialogVisible="true" :limit="1" size="50"></upload-icon> -->
+                                <upload-icon v-model:icon_class="form.icon_class" :size="50"></upload-icon>
                             </template>
                         </template>
                     </div>
@@ -42,7 +42,7 @@
                                 <upload v-model="form.search_botton_src" :limit="1" size="50"></upload>
                             </template>
                             <template v-else-if="form.search_type === 'icon'">
-                                <upload v-model="form.search_botton_icon" :limit="1" size="50"></upload>
+                                <upload-icon v-model:icon_class="form.search_botton_icon" :size="50"></upload-icon>
                             </template>
                             <template v-else>
                                 <el-input v-model="form.search_tips" placeholder="请输入文字内容"></el-input>
@@ -77,6 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
         icon_type: 'icon',
         icon_src: '',
         icon_img_src: [],
+        icon_class: '',
         search_botton_src: [],
         search_botton_icon: '',
         is_tips_show: true,

src/layout/components/main/default/search.ts

@@ -12,6 +12,7 @@ interface defaultSearch {
         icon_type: string;
         icon_src: string;
         icon_img_src: uploadList[];
+        icon_class: string;
         search_botton_src: uploadList[];
         search_botton_icon: string;
         is_tips_show: boolean;
@@ -43,6 +44,7 @@ const defaultSearch: defaultSearch = {
         icon_type: 'icon',
         icon_src: '',
         icon_img_src: [],
+        icon_class: '',
         search_botton_src: [],
         search_botton_icon: '',
         is_tips_show: true,