图标选择控件

package-lock.json

@@ -11,6 +11,7 @@
         "@element-plus/icons-vue": "^2.3.1",
         "@vicons/material": "^0.12.0",
         "@vueuse/core": "^10.7.0",
+        "axios": "^1.6.3",
         "dayjs": "^1.11.10",
         "element-plus": "^2.4.4",
         "lodash": "^4.17.21",
@@ -751,6 +752,11 @@
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -763,6 +769,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.3.tgz",
+      "integrity": "sha512-fWyNdeawGam70jXSVlKl+SUNVcL6j6W79CuSIPfi6HnDUmSCH6gyUys/HrqHeA/wU0Az41rRgean494d0Jb+ww==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -866,6 +882,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
@@ -970,6 +997,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1763,6 +1798,25 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -1772,6 +1826,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2452,6 +2519,25 @@
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2830,6 +2916,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@vicons/material": "^0.12.0",
     "@vueuse/core": "^10.7.0",
+    "axios": "^1.6.3",
     "dayjs": "^1.11.10",
     "element-plus": "^2.4.4",
     "lodash": "^4.17.21",

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"
+                class="el-button el-button--large is-text icon-a"
-                style="height:80px;"
                 @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"
+              class="el-button el-button--large is-text icon-a"
-              style="height:80px;"
               @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>