From e3e295596632d26820c076cc34c1d2d3cda3ad8b Mon Sep 17 00:00:00 2001
From: Jachin <ygcaicn@gmail.com>
Date: Mon, 7 Aug 2023 18:17:03 +0800
Subject: [PATCH] feat: icons

---
 mock/router.ts            |  26 ++++++
 package.json              |   1 +
 src/assets/icons/icon.svg |   1 +
 src/router/index.ts       |  18 ++++
 src/views/demo/icons.vue  | 177 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 223 insertions(+)
 create mode 100644 src/assets/icons/icon.svg
 create mode 100644 src/views/demo/icons.vue

diff --git a/mock/router.ts b/mock/router.ts
index d4d830d..915a3ea 100644
--- a/mock/router.ts
+++ b/mock/router.ts
@@ -78,6 +78,32 @@ const data = {
         },
       ],
     },
+    {
+      path: "/icon",
+      component: "Layout",
+      redirect: "/icon/index",
+      meta: {
+        title: "系统管理",
+        icon: "system",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "index",
+          component: "demo/icons",
+          name: "Icons",
+          meta: {
+            title: "图标",
+            icon: "icon",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+      ],
+    },
     {
       path: "/api",
       component: "Layout",
diff --git a/package.json b/package.json
index b3fc900..20eb1a3 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     ]
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vueuse/core": "^10.1.2",
     "@wangeditor/editor": "^5.1.23",
diff --git a/src/assets/icons/icon.svg b/src/assets/icons/icon.svg
new file mode 100644
index 0000000..82be8ee
--- /dev/null
+++ b/src/assets/icons/icon.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.147.062a13 13 0 0 1 4.94.945c1.55.63 2.907 1.526 4.069 2.688a13.148 13.148 0 0 1 2.761 4.069c.678 1.55 1.017 3.245 1.017 5.086v102.3c0 3.681-1.187 6.733-3.56 9.155-2.373 2.422-5.352 3.633-8.937 3.633H12.992c-3.875 0-7-1.26-9.373-3.779-2.373-2.518-3.56-5.667-3.56-9.445V12.704c0-3.39 1.163-6.345 3.488-8.863C5.872 1.32 8.972.062 12.847.062h102.3zM81.434 109.047c1.744 0 3.003-.412 3.778-1.235.775-.824 1.163-1.914 1.163-3.27 0-1.26-.388-2.325-1.163-3.197-.775-.872-2.034-1.307-3.778-1.307H72.57c.097-.194.145-.485.145-.872V27.09h9.01c1.743 0 2.954-.436 3.633-1.308.678-.872 1.017-1.938 1.017-3.197 0-1.26-.34-2.325-1.017-3.197-.679-.872-1.89-1.308-3.633-1.308H46.268c-1.743 0-2.954.436-3.632 1.308-.678.872-1.018 1.938-1.018 3.197 0 1.26.34 2.325 1.018 3.197.678.872 1.889 1.308 3.632 1.308h8.138v72.075c0 .193.024.339.073.436.048.096.072.242.072.436H46.56c-1.744 0-3.003.435-3.778 1.307-.775.872-1.163 1.938-1.163 3.197 0 1.356.388 2.446 1.163 3.27.775.823 2.034 1.235 3.778 1.235h34.875z"/></svg>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 6df76e4..e56190c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -52,6 +52,24 @@ export const constantRoutes: RouteRecordRaw[] = [
     ],
   },
 
+  {
+    path: "/permission",
+    component: Layout,
+    redirect: "/permission/page",
+    children: [
+      {
+        path: "page",
+        component: () => import("@/views/permission/page.vue"),
+        name: "PermissionPage",
+        meta: {
+          title: "Permission",
+          icon: "password",
+          keepAlive: true,
+        },
+      },
+    ],
+  },
+
   // 外部链接
   // {
   //   path: "/external-link",
diff --git a/src/views/demo/icons.vue b/src/views/demo/icons.vue
new file mode 100644
index 0000000..562da5d
--- /dev/null
+++ b/src/views/demo/icons.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="icons-container">
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div class="grid">
+          <div
+            v-for="item of svg_icons"
+            :key="item"
+            @click="handleClipboard(generateIconCode(item), $event)"
+          >
+            <el-tooltip
+              effect="dark"
+              :content="generateIconCode(item)"
+              placement="top"
+            >
+              <div class="icon-item">
+                <svg-icon :icon-class="item" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div class="grid">
+          <div
+            v-for="(icon, name) of icons"
+            :key="name"
+            @click="handleClipboard(generateElementIconCode(name), $event)"
+          >
+            <el-tooltip
+              effect="dark"
+              :content="generateElementIconCode(name)"
+              placement="top"
+            >
+              <div class="icon-item">
+                <el-icon :size="20">
+                  <component :is="icon" />
+                </el-icon>
+                <span>{{ name }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "Icons",
+  inheritAttrs: false,
+});
+const svg_icons: string[] = [
+  "advert",
+  "api",
+  "brand",
+  "bug",
+  "cascader",
+  "chart",
+  "client",
+  "close",
+  "close_all",
+  "close_left",
+  "close_other",
+  "close_right",
+  "coupon",
+  "dashboard",
+  "dict",
+  "dict_item",
+  "document",
+  "download",
+  "drag",
+  "edit",
+  "exit-fullscreen",
+  "eye-open",
+  "eye",
+  "fullscreen",
+  "github",
+  "goods-list",
+  "goods",
+  "guide",
+  "homepage",
+  "lab",
+  "language",
+  "link",
+  "menu",
+  "message",
+  "money",
+  "monitor",
+  "multi_level",
+  "nested",
+  "number",
+  "order",
+  "password",
+  "peoples",
+  "perm",
+  "publish",
+  "rabbitmq",
+  "rate",
+  "redis",
+  "refresh",
+  "role",
+  "security",
+  "shopping",
+  "size",
+  "skill",
+  "system",
+  "theme",
+  "tree",
+  "user",
+  "uv",
+  "valid_code",
+  "verify_code",
+];
+const icons = ref(ElementPlusIconsVue);
+
+const { text, isSupported, copy } = useClipboard();
+
+function generateIconCode(symbol) {
+  return `<svg-icon icon-class="${symbol}" />`;
+}
+
+function generateElementIconCode(symbol) {
+  return `<el-icon><${symbol} /></el-icon>`;
+}
+
+function handleClipboard(text, event) {
+  // clipboard(text, event);
+  copy(text)
+    .then(() => {
+      ElMessage.success("Copy successfully");
+    })
+    .catch(() => {
+      ElMessage.warning("Copy failed");
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .icon-item {
+    float: left;
+    width: 100px;
+    height: 85px;
+    margin: 20px;
+    font-size: 30px;
+    color: #24292e;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    margin-top: 10px;
+    font-size: 16px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>