图标选择控件

src/components/common-breadcrumb/index.vue

@@ -1,11 +1,9 @@
 <script setup>
 import { computed } from 'vue'
-import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
 import { useTabsViewStore } from '@/stores/TabsViewStore'
 import { useRoute } from 'vue-router'
 import { useMenuInfo, useMenuName } from '@/components/utils'
 
-const globalConfigStore = useGlobalConfigStore()
 const tabsViewStore = useTabsViewStore()
 
 const route = useRoute()
@@ -20,13 +18,11 @@ const breadcrumbs = computed(() => {
     } else if (item.meta && item.meta.icon) {
       icon = item.meta.icon
     }
-    const result = {
+    return {
       path: item.path,
       menuName: useMenuName(item),
       icon
     }
-    console.info(item, menuInfo)
-    return result
   }).filter(item => {
     const notExist = !exists.includes(item.menuName)
     if (notExist) {
@@ -39,7 +35,6 @@ const breadcrumbs = computed(() => {
 
 <template>
   <el-breadcrumb
-    v-if="globalConfigStore.isShowBreadcrumb"
     v-bind="$attrs"
     class="common-breadcrumb"
   >

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

@@ -129,15 +129,15 @@ const selectIcon = icon => {
               class="text-center"
             >
               <a
-                class="el-button el-button--large is-text"
-                style="height:80px;"
+                class="el-button el-button--large is-text icon-a"
                 @click="selectIcon(icon)"
               >
                 <div>
                   <common-icon
                     size="20"
                     :icon="icon"
-                  />
+                  /><br>
+                  <span class="icon-text">{{ icon }}</span>
                 </div>
               </a>
             </el-col>
@@ -167,4 +167,14 @@ const selectIcon = icon => {
 .icon-area {
   padding: 0;
 }
+.icon-a {
+  height:80px;
+  display: block;
+  width:100%;
+  overflow:hidden;
+  padding: 15px 10px;
+}
+.icon-a span {
+  font-size: 12px;
+}
 </style>

src/views/tools/Icons.vue

@@ -13,15 +13,16 @@ const filterIcons = computed(() => {
 
 const copyIcon = (icon) => {
   const { copy, isSupported } = useClipboard()
+  const iconStr = `<common-icon icon="${icon}"/>`
   if (isSupported) {
-    copy(icon)
+    copy(iconStr)
     ElMessage({
-      message: `Copied: ${icon}`,
+      message: `Copied: ${iconStr}`,
       type: 'success'
     })
   } else {
     ElMessage({
-      message: `Copy Not supported: ${icon}`,
+      message: `Copy Not supported: ${iconStr}`,
       type: 'error'
     })
   }
@@ -44,7 +45,7 @@ const copyIcon = (icon) => {
       </el-form>
     </el-header>
     <el-main>
-      <RecycleScroller
+      <recycle-scroller
         v-slot="{ item }"
         class="scroller icon-list"
         :items="filterIcons"
@@ -59,8 +60,7 @@ const copyIcon = (icon) => {
             class="text-center"
           >
             <a
-              class="el-button el-button--large is-text"
-              style="height:80px;"
+              class="el-button el-button--large is-text icon-a"
               @click="copyIcon(icon)"
             >
               <div>
@@ -68,11 +68,13 @@ const copyIcon = (icon) => {
                   size="20"
                   :icon="icon"
                 />
+                <br>
+                <span class="icon-text">{{ icon }}</span>
               </div>
             </a>
           </el-col>
         </el-row>
-      </RecycleScroller>
+      </recycle-scroller>
     </el-main>
   </el-container>
 </template>
@@ -81,4 +83,17 @@ const copyIcon = (icon) => {
 .scroller, .icon-container  {
   height: 100%;
 }
+.icon-container .el-input {
+  width: 80%;
+}
+.icon-a {
+  height:80px;
+  display: block;
+  width:100%;
+  overflow:hidden;
+  padding: 15px 10px;
+}
+.icon-a span {
+  font-size: 12px;
+}
 </style>