feat: icons
This commit is contained in:
Jachin
parent
ad33ebcbd4
commit
e3e2955966
|
|
@ -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",
|
path: "/api",
|
||||||
component: "Layout",
|
component: "Layout",
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,7 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.1.0",
|
||||||
"@vitejs/plugin-vue": "^4.2.3",
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
"@vueuse/core": "^10.1.2",
|
"@vueuse/core": "^10.1.2",
|
||||||
"@wangeditor/editor": "^5.1.23",
|
"@wangeditor/editor": "^5.1.23",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -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",
|
// path: "/external-link",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue