refactor: use @iconify-icons/ep
This commit is contained in:
parent
d7ea59194f
commit
64eef1fc66
@ -7,7 +7,7 @@ const permissionRouter = {
|
||||
redirect: "/permission/page/index",
|
||||
meta: {
|
||||
title: "menus.permission",
|
||||
icon: "Lollipop",
|
||||
icon: "lollipop",
|
||||
i18n: true,
|
||||
showLink: true,
|
||||
rank: 3
|
||||
|
19
package.json
19
package.json
@ -29,12 +29,11 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@element-plus/icons-vue": "^0.2.6",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.0-5",
|
||||
"@vueuse/core": "^7.5.3",
|
||||
"@vueuse/motion": "^2.0.0-beta.4",
|
||||
"@vueuse/motion": "^2.0.0-beta.9",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^0.25.0",
|
||||
"css-color-function": "^1.3.3",
|
||||
@ -62,6 +61,8 @@
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "13.1.0",
|
||||
"@commitlint/config-conventional": "13.1.0",
|
||||
"@iconify-icons/ep": "^1.1.3",
|
||||
"@iconify/vue": "^3.1.2",
|
||||
"@types/element-resize-detector": "1.1.3",
|
||||
"@types/js-cookie": "^3.0.1",
|
||||
"@types/mockjs": "1.0.3",
|
||||
@ -75,7 +76,7 @@
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.3",
|
||||
"@vue/eslint-config-prettier": "6.0.0",
|
||||
"@vue/eslint-config-typescript": "7.0.0",
|
||||
"@zougt/vite-plugin-theme-preprocessor": "^1.4.0",
|
||||
"@zougt/vite-plugin-theme-preprocessor": "^1.4.4",
|
||||
"autoprefixer": "10.2.4",
|
||||
"cross-env": "7.0.3",
|
||||
"eslint": "7.30.0",
|
||||
@ -95,16 +96,16 @@
|
||||
"stylelint-config-standard": "22.0.0",
|
||||
"stylelint-order": "4.1.0",
|
||||
"typescript": "4.4.2",
|
||||
"unplugin-element-plus": "^0.1.3",
|
||||
"vite": "2.6.14",
|
||||
"unplugin-element-plus": "^0.2.0",
|
||||
"vite": "^2.7.13",
|
||||
"vite-plugin-live-reload": "^2.1.0",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-remove-console": "^0.0.6",
|
||||
"vite-plugin-style-import": "^1.2.1",
|
||||
"vite-plugin-windicss": "^1.6.1",
|
||||
"vite-svg-loader": "^2.2.0",
|
||||
"vite-plugin-style-import": "^1.4.1",
|
||||
"vite-plugin-windicss": "^1.6.3",
|
||||
"vite-svg-loader": "2.2.0",
|
||||
"vue-eslint-parser": "7.10.0",
|
||||
"windicss": "^3.4.2"
|
||||
"windicss": "^3.4.3"
|
||||
},
|
||||
"repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
|
||||
"author": "xiaoxian521",
|
||||
|
591
pnpm-lock.yaml
generated
591
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,8 @@
|
||||
import { App, defineComponent } from "vue";
|
||||
import icon from "./src/Icon.vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { iconComponents } from "/@/plugins/element-plus";
|
||||
import iconifyIconOffline from "./src/iconifyIconOffline";
|
||||
import iconifyIconOnline from "./src/iconifyIconOnline";
|
||||
|
||||
/**
|
||||
* find icon component
|
||||
@ -67,21 +68,20 @@ export function findIcon(icon: String, type = "EL", property?: string) {
|
||||
});
|
||||
} else if (type === "RI") {
|
||||
return defineComponent({
|
||||
name: "RIIcon",
|
||||
name: "RiIcon",
|
||||
data() {
|
||||
return { icon: `ri-${icon}` };
|
||||
},
|
||||
template: `<i :class="icon" />`
|
||||
});
|
||||
} else if (type === "EL") {
|
||||
const components = iconComponents.filter(
|
||||
component => component.name === icon
|
||||
);
|
||||
if (components.length > 0) {
|
||||
return components[0];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
return defineComponent({
|
||||
name: "ElIcon",
|
||||
data() {
|
||||
return { icon };
|
||||
},
|
||||
template: `<IconifyIconOffline :icon="icon" />`
|
||||
});
|
||||
} else if (type === "SVG") {
|
||||
return icon;
|
||||
}
|
||||
@ -93,6 +93,11 @@ export const Icon = Object.assign(icon, {
|
||||
}
|
||||
});
|
||||
|
||||
export const IconifyIconOffline = iconifyIconOffline;
|
||||
export const IconifyIconOnline = iconifyIconOnline;
|
||||
|
||||
export default {
|
||||
Icon
|
||||
Icon,
|
||||
IconifyIconOffline,
|
||||
IconifyIconOnline
|
||||
};
|
||||
|
70
src/components/ReIcon/src/iconifyIconOffline.ts
Normal file
70
src/components/ReIcon/src/iconifyIconOffline.ts
Normal file
@ -0,0 +1,70 @@
|
||||
import { h, defineComponent } from "vue";
|
||||
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import Menu from "@iconify-icons/ep/menu";
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
import SetUp from "@iconify-icons/ep/set-up";
|
||||
import Edit from "@iconify-icons/ep/edit";
|
||||
import Setting from "@iconify-icons/ep/setting";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
import Link from "@iconify-icons/ep/link";
|
||||
import Position from "@iconify-icons/ep/position";
|
||||
import Histogram from "@iconify-icons/ep/histogram";
|
||||
import RefreshRight from "@iconify-icons/ep/refresh-right";
|
||||
import ArrowDown from "@iconify-icons/ep/arrow-down";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
import CloseBold from "@iconify-icons/ep/close-bold";
|
||||
import Bell from "@iconify-icons/ep/bell";
|
||||
import Guide from "@iconify-icons/ep/guide";
|
||||
import User from "@iconify-icons/ep/user";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import Location from "@iconify-icons/ep/location";
|
||||
import Tickets from "@iconify-icons/ep/tickets";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import Notebook from "@iconify-icons/ep/notebook";
|
||||
addIcon("check", Check);
|
||||
addIcon("menu", Menu);
|
||||
addIcon("home-filled", HomeFilled);
|
||||
addIcon("set-up", SetUp);
|
||||
addIcon("edit", Edit);
|
||||
addIcon("setting", Setting);
|
||||
addIcon("lollipop", Lollipop);
|
||||
addIcon("link", Link);
|
||||
addIcon("position", Position);
|
||||
addIcon("histogram", Histogram);
|
||||
addIcon("refresh-right", RefreshRight);
|
||||
addIcon("arrow-down", ArrowDown);
|
||||
addIcon("close", Close);
|
||||
addIcon("close-bold", CloseBold);
|
||||
addIcon("bell", Bell);
|
||||
addIcon("guide", Guide);
|
||||
addIcon("user", User);
|
||||
addIcon("iphone", Iphone);
|
||||
addIcon("location", Location);
|
||||
addIcon("tickets", Tickets);
|
||||
addIcon("office-building", OfficeBuilding);
|
||||
addIcon("notebook", Notebook);
|
||||
|
||||
// Iconify Icon在Vue里离线使用(用于内网环境)
|
||||
// https://docs.iconify.design/icon-components/vue/offline.html
|
||||
export default defineComponent({
|
||||
name: "IconifyIcon",
|
||||
components: { IconifyIcon },
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return h(
|
||||
IconifyIcon,
|
||||
{
|
||||
icon: `${this.icon}`
|
||||
},
|
||||
{
|
||||
default: () => []
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
30
src/components/ReIcon/src/iconifyIconOnline.ts
Normal file
30
src/components/ReIcon/src/iconifyIconOnline.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { h, defineComponent } from "vue";
|
||||
import { Icon as IconifyIcon } from "@iconify/vue";
|
||||
|
||||
// Iconify Icon在Vue里在线使用(用于外网环境)
|
||||
// https://docs.iconify.design/icon-components/vue/offline.html
|
||||
export default defineComponent({
|
||||
name: "IconifyIcon",
|
||||
components: { IconifyIcon },
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "ep:"
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return h(
|
||||
IconifyIcon,
|
||||
{
|
||||
icon: `${this.type}${this.icon}`
|
||||
},
|
||||
{
|
||||
default: () => []
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
@ -8,7 +8,7 @@ import {
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
import { RouterView } from "vue-router";
|
||||
import backTop from "/@/assets/svg/back_top.svg";
|
||||
import backTop from "/@/assets/svg/back_top.svg?component";
|
||||
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -13,8 +13,8 @@ import { useAppStoreHook } from "/@/store/modules/app";
|
||||
import { unref, watch, getCurrentInstance } from "vue";
|
||||
import { deviceDetection } from "/@/utils/deviceDetection";
|
||||
import screenfull from "../components/screenfull/index.vue";
|
||||
import globalization from "/@/assets/svg/globalization.svg";
|
||||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
||||
import globalization from "/@/assets/svg/globalization.svg?component";
|
||||
|
||||
const instance =
|
||||
getCurrentInstance().appContext.config.globalProperties.$storage;
|
||||
@ -95,15 +95,17 @@ function translationEn() {
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('zh')"
|
||||
@click="translationCh"
|
||||
><el-icon class="check-zh" v-show="locale === 'zh'"
|
||||
><check /></el-icon
|
||||
>简体中文</el-dropdown-item
|
||||
><IconifyIconOffline
|
||||
class="check-zh"
|
||||
v-show="locale === 'zh'"
|
||||
icon="check"
|
||||
/>简体中文</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('en')"
|
||||
@click="translationEn"
|
||||
><el-icon class="check-en" v-show="locale === 'en'"
|
||||
><check /></el-icon
|
||||
><IconifyIconOffline icon="check" /></el-icon
|
||||
>English</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
@ -129,7 +131,7 @@ function translationEn() {
|
||||
:title="$t('buttons.hssystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<Setting />
|
||||
<IconifyIconOffline icon="setting" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -16,7 +16,9 @@ notices.value.forEach(notice => {
|
||||
<el-dropdown trigger="click" placement="bottom-end">
|
||||
<span class="dropdown-badge">
|
||||
<el-badge :value="noticesNum" :max="99">
|
||||
<el-icon class="header-notice-icon"><bell /></el-icon>
|
||||
<el-icon class="header-notice-icon"
|
||||
><IconifyIconOffline icon="bell"
|
||||
/></el-icon>
|
||||
</el-badge>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
|
@ -23,7 +23,7 @@ emitter.on("openPanel", () => {
|
||||
<div class="project-configuration">
|
||||
<h3>项目配置</h3>
|
||||
<el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
|
||||
<Close />
|
||||
<IconifyIconOffline icon="close" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div style="border-bottom: 1px solid #dcdfe6"></div>
|
||||
|
@ -16,9 +16,7 @@ import { useRouter } from "vue-router";
|
||||
import panel from "../panel/index.vue";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import dayIcon from "/@/assets/svg/day.svg";
|
||||
import { debounce } from "/@/utils/debounce";
|
||||
import darkIcon from "/@/assets/svg/dark.svg";
|
||||
import { themeColorsType } from "../../types";
|
||||
import { useAppStoreHook } from "/@/store/modules/app";
|
||||
import { shadeBgColor } from "../../theme/element-plus";
|
||||
@ -28,6 +26,9 @@ import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
|
||||
import { createNewStyle, writeNewStyle } from "../../theme/element-plus";
|
||||
import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
|
||||
|
||||
import dayIcon from "/@/assets/svg/day.svg?component";
|
||||
import darkIcon from "/@/assets/svg/dark.svg?component";
|
||||
|
||||
const router = useRouter();
|
||||
const { isSelect } = useCssModule();
|
||||
const body = document.documentElement as HTMLElement;
|
||||
@ -155,7 +156,7 @@ function onReset() {
|
||||
parentPath: "/",
|
||||
meta: {
|
||||
title: "menus.hshome",
|
||||
icon: "HomeFilled",
|
||||
icon: "home-filled",
|
||||
i18n: true,
|
||||
showLink: true
|
||||
}
|
||||
@ -351,7 +352,7 @@ nextTick(() => {
|
||||
:size="17"
|
||||
:color="getThemeColor(item.themeColor)"
|
||||
>
|
||||
<Check />
|
||||
<IconifyIconOffline icon="check" />
|
||||
</el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -19,8 +19,8 @@ import { useRoute, useRouter } from "vue-router";
|
||||
import { storageSession } from "/@/utils/storage";
|
||||
import Icon from "/@/components/ReIcon/src/Icon.vue";
|
||||
import { deviceDetection } from "/@/utils/deviceDetection";
|
||||
import globalization from "/@/assets/svg/globalization.svg";
|
||||
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
||||
import globalization from "/@/assets/svg/globalization.svg?component";
|
||||
|
||||
const instance =
|
||||
getCurrentInstance().appContext.config.globalProperties.$storage;
|
||||
@ -161,14 +161,14 @@ onMounted(() => {
|
||||
:style="getDropdownItemStyle('zh')"
|
||||
@click="translationCh"
|
||||
><el-icon class="check-zh" v-show="locale === 'zh'"
|
||||
><check /></el-icon
|
||||
><IconifyIconOffline icon="check" /></el-icon
|
||||
>简体中文</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle('en')"
|
||||
@click="translationEn"
|
||||
><el-icon class="check-en" v-show="locale === 'en'"
|
||||
><check /></el-icon
|
||||
><IconifyIconOffline icon="check" /></el-icon
|
||||
>English</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
@ -194,7 +194,7 @@ onMounted(() => {
|
||||
:title="$t('buttons.hssystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<Setting />
|
||||
<IconifyIconOffline icon="setting" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -3,6 +3,7 @@ import {
|
||||
ref,
|
||||
watch,
|
||||
unref,
|
||||
reactive,
|
||||
nextTick,
|
||||
computed,
|
||||
ComputedRef,
|
||||
@ -11,15 +12,15 @@ import {
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
|
||||
import close from "/@/assets/svg/close.svg";
|
||||
import refresh from "/@/assets/svg/refresh.svg";
|
||||
import closeAll from "/@/assets/svg/close_all.svg";
|
||||
import closeLeft from "/@/assets/svg/close_left.svg";
|
||||
import closeOther from "/@/assets/svg/close_other.svg";
|
||||
import closeRight from "/@/assets/svg/close_right.svg";
|
||||
import close from "/@/assets/svg/close.svg?component";
|
||||
import refresh from "/@/assets/svg/refresh.svg?component";
|
||||
import closeAll from "/@/assets/svg/close_all.svg?component";
|
||||
import closeLeft from "/@/assets/svg/close_left.svg?component";
|
||||
import closeOther from "/@/assets/svg/close_other.svg?component";
|
||||
import closeRight from "/@/assets/svg/close_right.svg?component";
|
||||
|
||||
import { $t as t } from "/@/plugins/i18n";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import { $t as t } from "/@/plugins/i18n";
|
||||
import { isEqual, isEmpty } from "lodash-es";
|
||||
import { transformI18n } from "/@/plugins/i18n";
|
||||
import { storageLocal } from "/@/utils/storage";
|
||||
@ -185,7 +186,7 @@ const handleScroll = (offset: number): void => {
|
||||
}
|
||||
};
|
||||
|
||||
const tagsViews = ref<Array<tagsViewsType>>([
|
||||
const tagsViews = reactive<Array<tagsViewsType>>([
|
||||
{
|
||||
icon: refresh,
|
||||
text: t("buttons.hsreload"),
|
||||
@ -434,13 +435,13 @@ function closeMenu() {
|
||||
|
||||
function showMenus(value: boolean) {
|
||||
Array.of(1, 2, 3, 4, 5).forEach(v => {
|
||||
tagsViews.value[v].show = value;
|
||||
tagsViews[v].show = value;
|
||||
});
|
||||
}
|
||||
|
||||
function disabledMenus(value: boolean) {
|
||||
Array.of(1, 2, 3, 4, 5).forEach(v => {
|
||||
tagsViews.value[v].disabled = value;
|
||||
tagsViews[v].disabled = value;
|
||||
});
|
||||
}
|
||||
|
||||
@ -462,7 +463,7 @@ function showMenuModel(
|
||||
showMenus(true);
|
||||
|
||||
if (refresh) {
|
||||
tagsViews.value[0].show = true;
|
||||
tagsViews[0].show = true;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -472,25 +473,25 @@ function showMenuModel(
|
||||
|
||||
if (currentIndex === 1 && routeLength !== 2) {
|
||||
// 左侧的菜单是首页,右侧存在别的菜单
|
||||
tagsViews.value[2].show = false;
|
||||
tagsViews[2].show = false;
|
||||
Array.of(1, 3, 4, 5).forEach(v => {
|
||||
tagsViews.value[v].disabled = false;
|
||||
tagsViews[v].disabled = false;
|
||||
});
|
||||
tagsViews.value[2].disabled = true;
|
||||
tagsViews[2].disabled = true;
|
||||
} else if (currentIndex === 1 && routeLength === 2) {
|
||||
disabledMenus(false);
|
||||
// 左侧的菜单是首页,右侧不存在别的菜单
|
||||
Array.of(2, 3, 4).forEach(v => {
|
||||
tagsViews.value[v].show = false;
|
||||
tagsViews.value[v].disabled = true;
|
||||
tagsViews[v].show = false;
|
||||
tagsViews[v].disabled = true;
|
||||
});
|
||||
} else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
|
||||
// 当前路由是所有路由中的最后一个
|
||||
tagsViews.value[3].show = false;
|
||||
tagsViews[3].show = false;
|
||||
Array.of(1, 2, 4, 5).forEach(v => {
|
||||
tagsViews.value[v].disabled = false;
|
||||
tagsViews[v].disabled = false;
|
||||
});
|
||||
tagsViews.value[3].disabled = true;
|
||||
tagsViews[3].disabled = true;
|
||||
} else if (currentIndex === 0 || currentPath === "/redirect/welcome") {
|
||||
// 当前路由为首页
|
||||
disabledMenus(true);
|
||||
@ -504,10 +505,10 @@ function openMenu(tag, e) {
|
||||
if (tag.path === "/welcome") {
|
||||
// 右键菜单为首页,只显示刷新
|
||||
showMenus(false);
|
||||
tagsViews.value[0].show = true;
|
||||
tagsViews[0].show = true;
|
||||
} else if (route.path !== tag.path) {
|
||||
// 右键菜单不匹配当前路由,隐藏刷新
|
||||
tagsViews.value[0].show = false;
|
||||
tagsViews[0].show = false;
|
||||
showMenuModel(tag.path, tag.query);
|
||||
} else if (
|
||||
// eslint-disable-next-line no-dupe-else-if
|
||||
@ -516,7 +517,7 @@ function openMenu(tag, e) {
|
||||
) {
|
||||
showMenus(true);
|
||||
// 只有两个标签时不显示关闭其他标签页
|
||||
tagsViews.value[4].show = false;
|
||||
tagsViews[4].show = false;
|
||||
} else if (route.path === tag.path) {
|
||||
// 右键当前激活的菜单
|
||||
showMenuModel(tag.path, tag.query, true);
|
||||
@ -660,7 +661,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
|
||||
class="el-icon-close"
|
||||
@click.stop="deleteMenu(item)"
|
||||
>
|
||||
<CloseBold />
|
||||
<IconifyIconOffline icon="close-bold" />
|
||||
</el-icon>
|
||||
<div
|
||||
:ref="'schedule' + index"
|
||||
@ -699,13 +700,13 @@ const getContextMenuStyle = computed((): CSSProperties => {
|
||||
class="el-icon-refresh-right rotate"
|
||||
@click="onFresh"
|
||||
>
|
||||
<RefreshRight />
|
||||
<IconifyIconOffline icon="refresh-right" />
|
||||
</el-icon>
|
||||
</li>
|
||||
<li>
|
||||
<el-dropdown trigger="click" placement="bottom-end">
|
||||
<el-icon>
|
||||
<ArrowDown />
|
||||
<IconifyIconOffline icon="arrow-down" />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
|
@ -11,14 +11,15 @@ import { setType } from "./types";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { routerArrays } from "./types";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import backTop from "/@/assets/svg/back_top.svg";
|
||||
import { useAppStoreHook } from "/@/store/modules/app";
|
||||
import fullScreen from "/@/assets/svg/full_screen.svg";
|
||||
import exitScreen from "/@/assets/svg/exit_screen.svg";
|
||||
import { deviceDetection } from "/@/utils/deviceDetection";
|
||||
import { useMultiTagsStore } from "/@/store/modules/multiTags";
|
||||
import { useSettingStoreHook } from "/@/store/modules/settings";
|
||||
|
||||
import backTop from "/@/assets/svg/back_top.svg?component";
|
||||
import fullScreen from "/@/assets/svg/full_screen.svg?component";
|
||||
import exitScreen from "/@/assets/svg/exit_screen.svg?component";
|
||||
|
||||
import navbar from "./components/navbar.vue";
|
||||
import tag from "./components/tag/index.vue";
|
||||
import appMain from "./components/appMain.vue";
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { Component } from "vue";
|
||||
export const routerArrays: Array<RouteConfigs> = [
|
||||
{
|
||||
path: "/welcome",
|
||||
@ -5,7 +6,7 @@ export const routerArrays: Array<RouteConfigs> = [
|
||||
meta: {
|
||||
title: "menus.hshome",
|
||||
i18n: true,
|
||||
icon: "HomeFilled",
|
||||
icon: "home-filled",
|
||||
showLink: true
|
||||
}
|
||||
}
|
||||
@ -32,7 +33,7 @@ export type multiTagsType = {
|
||||
};
|
||||
|
||||
export type tagsViewsType = {
|
||||
icon: string;
|
||||
icon: Component;
|
||||
text: string;
|
||||
divided: boolean;
|
||||
disabled: boolean;
|
||||
|
@ -25,6 +25,11 @@ Object.keys(directives).forEach(key => {
|
||||
app.directive(key, (directives as { [key: string]: Directive })[key]);
|
||||
});
|
||||
|
||||
// 全局注册`@iconify/vue`图标库
|
||||
import { IconifyIconOffline, IconifyIconOnline } from "./components/ReIcon";
|
||||
app.component("IconifyIconOffline", IconifyIconOffline);
|
||||
app.component("IconifyIconOnline", IconifyIconOnline);
|
||||
|
||||
getServerConfig(app).then(async config => {
|
||||
injectResponsiveStorage(app, config);
|
||||
setupStore(app);
|
||||
|
@ -99,58 +99,6 @@ const components = [
|
||||
ElTreeV2
|
||||
];
|
||||
|
||||
// https://element-plus.org/zh-CN/component/icon.html
|
||||
import {
|
||||
Check,
|
||||
Menu,
|
||||
HomeFilled,
|
||||
SetUp,
|
||||
Edit,
|
||||
Setting,
|
||||
Lollipop,
|
||||
Link,
|
||||
Position,
|
||||
Histogram,
|
||||
RefreshRight,
|
||||
ArrowDown,
|
||||
Close,
|
||||
CloseBold,
|
||||
Bell,
|
||||
Guide,
|
||||
User,
|
||||
Iphone,
|
||||
Location,
|
||||
Tickets,
|
||||
OfficeBuilding,
|
||||
Notebook
|
||||
} from "@element-plus/icons-vue";
|
||||
|
||||
// Icon
|
||||
export const iconComponents = [
|
||||
Check,
|
||||
Menu,
|
||||
HomeFilled,
|
||||
SetUp,
|
||||
Edit,
|
||||
Setting,
|
||||
Lollipop,
|
||||
Link,
|
||||
Position,
|
||||
Histogram,
|
||||
RefreshRight,
|
||||
ArrowDown,
|
||||
Close,
|
||||
CloseBold,
|
||||
Bell,
|
||||
Guide,
|
||||
User,
|
||||
Iphone,
|
||||
Location,
|
||||
Tickets,
|
||||
OfficeBuilding,
|
||||
Notebook
|
||||
];
|
||||
|
||||
export function useElementPlus(app: App) {
|
||||
// 注册组件
|
||||
components.forEach((component: Component) => {
|
||||
@ -160,8 +108,4 @@ export function useElementPlus(app: App) {
|
||||
plugins.forEach(plugin => {
|
||||
app.use(plugin);
|
||||
});
|
||||
// 注册图标
|
||||
iconComponents.forEach((component: Component) => {
|
||||
app.component(component.name, component);
|
||||
});
|
||||
}
|
||||
|
@ -7,7 +7,7 @@ const errorRouter = {
|
||||
component: Layout,
|
||||
redirect: "/error/401",
|
||||
meta: {
|
||||
icon: "Position",
|
||||
icon: "position",
|
||||
title: $t("menus.hserror"),
|
||||
showLink: true,
|
||||
i18n: true,
|
||||
|
@ -6,7 +6,7 @@ const externalLink = {
|
||||
name: "external",
|
||||
component: Layout,
|
||||
meta: {
|
||||
icon: "Link",
|
||||
icon: "link",
|
||||
title: $t("menus.externalLink"),
|
||||
showLink: true,
|
||||
i18n: true,
|
||||
|
@ -7,7 +7,7 @@ const homeRouter = {
|
||||
component: Layout,
|
||||
redirect: "/welcome",
|
||||
meta: {
|
||||
icon: "HomeFilled",
|
||||
icon: "home-filled",
|
||||
title: $t("menus.hshome"),
|
||||
showLink: true,
|
||||
i18n: true,
|
||||
|
@ -18,7 +18,7 @@ const remainingRouter = [
|
||||
name: "redirect",
|
||||
component: Layout,
|
||||
meta: {
|
||||
icon: "HomeFilled",
|
||||
icon: "home-filled",
|
||||
title: $t("menus.hshome"),
|
||||
i18n: true,
|
||||
showLink: false,
|
||||
|
@ -16,7 +16,7 @@ export const useMultiTagsStore = defineStore({
|
||||
parentPath: "/",
|
||||
meta: {
|
||||
title: "menus.hshome",
|
||||
icon: "HomeFilled",
|
||||
icon: "home-filled",
|
||||
i18n: true,
|
||||
showLink: true
|
||||
}
|
||||
|
@ -59,7 +59,7 @@ export const useUserStore = defineStore({
|
||||
parentPath: "/",
|
||||
meta: {
|
||||
title: "menus.hshome",
|
||||
icon: "HomeFilled",
|
||||
icon: "home-filled",
|
||||
i18n: true,
|
||||
showLink: true
|
||||
}
|
||||
|
@ -47,7 +47,7 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
|
||||
meta: {
|
||||
title: "menus.hshome",
|
||||
i18n: true,
|
||||
icon: "HomeFilled",
|
||||
icon: "home-filled",
|
||||
showLink: true
|
||||
}
|
||||
}
|
||||
|
@ -5,14 +5,14 @@ import { initRouter } from "/@/router/utils";
|
||||
import { storageSession } from "/@/utils/storage";
|
||||
import { addClass, removeClass } from "/@/utils/operate";
|
||||
import bg from "/@/assets/login/bg.png";
|
||||
import avatar from "/@/assets/login/avatar.svg";
|
||||
import illustration0 from "/@/assets/login/illustration0.svg";
|
||||
import illustration1 from "/@/assets/login/illustration1.svg";
|
||||
import illustration2 from "/@/assets/login/illustration2.svg";
|
||||
import illustration3 from "/@/assets/login/illustration3.svg";
|
||||
import illustration4 from "/@/assets/login/illustration4.svg";
|
||||
import illustration5 from "/@/assets/login/illustration5.svg";
|
||||
import illustration6 from "/@/assets/login/illustration6.svg";
|
||||
import avatar from "/@/assets/login/avatar.svg?component";
|
||||
import illustration0 from "/@/assets/login/illustration0.svg?component";
|
||||
import illustration1 from "/@/assets/login/illustration1.svg?component";
|
||||
import illustration2 from "/@/assets/login/illustration2.svg?component";
|
||||
import illustration3 from "/@/assets/login/illustration3.svg?component";
|
||||
import illustration4 from "/@/assets/login/illustration4.svg?component";
|
||||
import illustration5 from "/@/assets/login/illustration5.svg?component";
|
||||
import illustration6 from "/@/assets/login/illustration6.svg?component";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
18
types/global.d.ts
vendored
18
types/global.d.ts
vendored
@ -6,16 +6,15 @@ import type {
|
||||
PropType as VuePropType
|
||||
} from "vue";
|
||||
|
||||
// GlobalComponents for Volar
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
IconifyIconOffline: typeof import("../src/components/ReIcon")["IconifyIconOffline"];
|
||||
IconifyIconOnline: typeof import("../src/components/ReIcon")["IconifyIconOnline"];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
const __APP_INFO__: {
|
||||
pkg: {
|
||||
name: string;
|
||||
version: string;
|
||||
dependencies: Recordable<string>;
|
||||
devDependencies: Recordable<string>;
|
||||
};
|
||||
lastBuildTime: string;
|
||||
};
|
||||
interface Window {
|
||||
// Global vue app instance
|
||||
__APP__: App<Element>;
|
||||
@ -23,7 +22,6 @@ declare global {
|
||||
mozCancelAnimationFrame: (handle: number) => void;
|
||||
oCancelAnimationFrame: (handle: number) => void;
|
||||
msCancelAnimationFrame: (handle: number) => void;
|
||||
|
||||
webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
|
||||
mozRequestAnimationFrame: (callback: FrameRequestCallback) => number;
|
||||
oRequestAnimationFrame: (callback: FrameRequestCallback) => number;
|
||||
|
@ -6,7 +6,6 @@ import typography from "windicss/plugin/typography";
|
||||
export default defineConfig({
|
||||
darkMode: "class",
|
||||
attributify: true,
|
||||
|
||||
plugins: [typography()],
|
||||
theme: {
|
||||
extend: {
|
||||
|
Loading…
Reference in New Issue
Block a user