mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-04 07:27:41 +08:00
refactor: use @iconify-icons/ep
This commit is contained in:
xiaoxian521
parent
47dea87275
commit
f236829b0f
4
.vscode/extensions.json
vendored
4
.vscode/extensions.json
vendored
@ -1,12 +1,16 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"johnsoncodehk.vscode-typescript-vue-plugin",
|
||||
"voorjaar.windicss-intellisense",
|
||||
"vscode-icons-team.vscode-icons",
|
||||
"davidanson.vscode-markdownlint",
|
||||
"stylelint.vscode-stylelint",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"johnsoncodehk.volar",
|
||||
"lokalise.i18n-ally",
|
||||
"mikestead.dotenv",
|
||||
"eamodio.gitlens",
|
||||
"antfu.iconify"
|
||||
]
|
||||
}
|
||||
|
||||
13
.vscode/settings.json
vendored
13
.vscode/settings.json
vendored
@ -1,15 +1,4 @@
|
||||
{
|
||||
/** 你需要安装这些插件，以便带来更好的提示体验
|
||||
* ESLint
|
||||
* Prettier - Code formatter
|
||||
* stylelint
|
||||
* vscode-icons
|
||||
* i18n Ally
|
||||
* Iconify IntelliSense
|
||||
* WindiCSS IntelliSense
|
||||
* TypeScript Vue Plugin (Volar)
|
||||
* Vue Language Features (Volar)
|
||||
*/
|
||||
"editor.formatOnType": true,
|
||||
"editor.formatOnSave": true,
|
||||
"javascript.updateImportsOnFileMove.enabled": "always",
|
||||
@ -27,14 +16,12 @@
|
||||
"editor.suggestSelection": "first",
|
||||
"editor.acceptSuggestionOnCommitCharacter": false,
|
||||
"css.lint.propertyIgnoredDueToDisplay": "ignore",
|
||||
// Prevent inline styles from being automatically formatted to all lowercase
|
||||
"editor.quickSuggestions": {
|
||||
"other": true,
|
||||
"comments": true,
|
||||
"strings": true
|
||||
},
|
||||
"files.associations": {
|
||||
// Specifies the location of snippets in the suggestion widget
|
||||
"editor.snippetSuggestions": "top"
|
||||
},
|
||||
"[css]": {
|
||||
|
||||
@ -7,7 +7,7 @@ const systemRouter = {
|
||||
name: "system",
|
||||
redirect: "/system/user/index",
|
||||
meta: {
|
||||
icon: "Setting",
|
||||
icon: "setting",
|
||||
title: "menus.hssysManagement",
|
||||
i18n: true,
|
||||
showLink: true,
|
||||
@ -42,7 +42,7 @@ const permissionRouter = {
|
||||
redirect: "/permission/page/index",
|
||||
meta: {
|
||||
title: "menus.permission",
|
||||
icon: "Lollipop",
|
||||
icon: "lollipop",
|
||||
i18n: true,
|
||||
showLink: true,
|
||||
rank: 3
|
||||
|
||||
33
package.json
33
package.json
@ -30,16 +30,16 @@
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@element-plus/icons-vue": "^0.2.4",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.0-5",
|
||||
"@logicflow/core": "0.7.1",
|
||||
"@logicflow/extension": "0.7.1",
|
||||
"@vueuse/core": "^6.7.1",
|
||||
"@vueuse/motion": "^2.0.0-beta.4",
|
||||
"@vueuse/core": "^7.5.3",
|
||||
"@vueuse/motion": "^2.0.0-beta.9",
|
||||
"@vueuse/shared": "^7.5.3",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^0.21.1",
|
||||
"axios": "^0.25.0",
|
||||
"cropperjs": "^1.5.11",
|
||||
"css-color-function": "^1.3.3",
|
||||
"dayjs": "^1.10.7",
|
||||
@ -61,11 +61,11 @@
|
||||
"responsive-storage": "^1.0.11",
|
||||
"rgb-hex": "^4.0.0",
|
||||
"v-contextmenu": "3.0.0",
|
||||
"vue": "^3.2.24",
|
||||
"vue-i18n": "^9.2.0-beta.3",
|
||||
"vue": "^3.2.27",
|
||||
"vue-i18n": "^9.2.0-beta.26",
|
||||
"vue-json-pretty": "^2.0.2",
|
||||
"vue-router": "^4.0.12",
|
||||
"vue-types": "^4.1.0",
|
||||
"vue-types": "^4.1.1",
|
||||
"vuedraggable": "4.1.0",
|
||||
"vxe-table": "^4.1.18",
|
||||
"wangeditor": "^4.7.9",
|
||||
@ -75,6 +75,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",
|
||||
@ -84,12 +86,11 @@
|
||||
"@typescript-eslint/eslint-plugin": "4.31.0",
|
||||
"@typescript-eslint/parser": "4.31.0",
|
||||
"@vitejs/plugin-legacy": "^1.6.4",
|
||||
"@vitejs/plugin-vue": "^1.10.2",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.1",
|
||||
"@vue/compiler-sfc": "^3.2.24",
|
||||
"@vitejs/plugin-vue": "^2.0.1",
|
||||
"@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",
|
||||
@ -109,16 +110,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-style-import": "^1.4.1",
|
||||
"vite-plugin-windicss": "^1.6.1",
|
||||
"vite-svg-loader": "^2.2.0",
|
||||
"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",
|
||||
|
||||
6158
pnpm-lock.yaml
generated
6158
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -13,21 +13,27 @@ const lists = ref([
|
||||
<el-descriptions class="margin-top" direction="vertical" :column="3" border>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<el-icon><user /></el-icon>
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon="user" />
|
||||
</el-icon>
|
||||
用户名
|
||||
</template>
|
||||
xiaoxian
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<el-icon><iphone /></el-icon>
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon="iphone" />
|
||||
</el-icon>
|
||||
手机号
|
||||
</template>
|
||||
123456789
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<el-icon><location /></el-icon>
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon="location" />
|
||||
</el-icon>
|
||||
居住地
|
||||
</template>
|
||||
上海
|
||||
@ -36,7 +42,9 @@ const lists = ref([
|
||||
<el-descriptions class="margin-top" direction="vertical" :column="2" border>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<el-icon><tickets /></el-icon>
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon="tickets" />
|
||||
</el-icon>
|
||||
标签
|
||||
</template>
|
||||
<el-tag
|
||||
@ -51,7 +59,9 @@ const lists = ref([
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<el-icon><office-building /></el-icon>
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon="office-building" />
|
||||
</el-icon>
|
||||
联系地址
|
||||
</template>
|
||||
上海市徐汇区
|
||||
@ -60,7 +70,9 @@ const lists = ref([
|
||||
<el-descriptions class="margin-top" direction="vertical" :column="1" border>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<el-icon><notebook /></el-icon>
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon="notebook" />
|
||||
</el-icon>
|
||||
留言
|
||||
</template>
|
||||
好好学习，天天向上
|
||||
|
||||
@ -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";
|
||||
@ -30,7 +31,6 @@ import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
|
||||
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
||||
import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
|
||||
|
||||
import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
|
||||
|
||||
const route = useRoute();
|
||||
@ -128,7 +128,7 @@ const moveToView = (index: number): void => {
|
||||
if (!instance.refs["dynamic" + index]) {
|
||||
return;
|
||||
}
|
||||
const tabItemEl = instance.refs["dynamic" + index];
|
||||
const tabItemEl = instance.refs["dynamic" + index][0];
|
||||
const tabItemElOffsetLeft = (tabItemEl as HTMLElement).offsetLeft;
|
||||
const tabItemOffsetWidth = (tabItemEl as HTMLElement).offsetWidth;
|
||||
// 标签页导航栏可视长度（不包含溢出部分）
|
||||
@ -186,7 +186,7 @@ const handleScroll = (offset: number): void => {
|
||||
}
|
||||
};
|
||||
|
||||
const tagsViews = ref<Array<tagsViewsType>>([
|
||||
const tagsViews = reactive<Array<tagsViewsType>>([
|
||||
{
|
||||
icon: refresh,
|
||||
text: t("buttons.hsreload"),
|
||||
@ -435,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;
|
||||
});
|
||||
}
|
||||
|
||||
@ -463,7 +463,7 @@ function showMenuModel(
|
||||
showMenus(true);
|
||||
|
||||
if (refresh) {
|
||||
tagsViews.value[0].show = true;
|
||||
tagsViews[0].show = true;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -473,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);
|
||||
@ -505,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
|
||||
@ -517,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);
|
||||
@ -552,30 +552,32 @@ function tagOnClick(item) {
|
||||
}
|
||||
|
||||
// 鼠标移入
|
||||
function onMouseenter(item, index) {
|
||||
function onMouseenter(index) {
|
||||
if (index) activeIndex.value = index;
|
||||
if (unref(showModel) === "smart") {
|
||||
if (hasClass(instance.refs["schedule" + index], "schedule-active")) return;
|
||||
toggleClass(true, "schedule-in", instance.refs["schedule" + index]);
|
||||
toggleClass(false, "schedule-out", instance.refs["schedule" + index]);
|
||||
if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
|
||||
return;
|
||||
toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
|
||||
toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
|
||||
} else {
|
||||
if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
|
||||
toggleClass(true, "card-in", instance.refs["dynamic" + index]);
|
||||
toggleClass(false, "card-out", instance.refs["dynamic" + index]);
|
||||
if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
|
||||
toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
|
||||
toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移出
|
||||
function onMouseleave(item, index) {
|
||||
function onMouseleave(index) {
|
||||
activeIndex.value = -1;
|
||||
if (unref(showModel) === "smart") {
|
||||
if (hasClass(instance.refs["schedule" + index], "schedule-active")) return;
|
||||
toggleClass(false, "schedule-in", instance.refs["schedule" + index]);
|
||||
toggleClass(true, "schedule-out", instance.refs["schedule" + index]);
|
||||
if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
|
||||
return;
|
||||
toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
|
||||
toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
|
||||
} else {
|
||||
if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
|
||||
toggleClass(false, "card-in", instance.refs["dynamic" + index]);
|
||||
toggleClass(true, "card-out", instance.refs["dynamic" + index]);
|
||||
if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
|
||||
toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
|
||||
toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -644,8 +646,8 @@ const getContextMenuStyle = computed((): CSSProperties => {
|
||||
: ''
|
||||
]"
|
||||
@contextmenu.prevent="openMenu(item, $event)"
|
||||
@mouseenter.prevent="onMouseenter(item, index)"
|
||||
@mouseleave.prevent="onMouseleave(item, index)"
|
||||
@mouseenter.prevent="onMouseenter(index)"
|
||||
@mouseleave.prevent="onMouseleave(index)"
|
||||
@click="tagOnClick(item)"
|
||||
>
|
||||
<router-link :to="item.path"
|
||||
@ -659,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"
|
||||
@ -698,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;
|
||||
|
||||
@ -27,6 +27,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) => {
|
||||
@ -158,10 +106,7 @@ export function useElementPlus(app: App) {
|
||||
});
|
||||
// 注册指令
|
||||
plugins.forEach(plugin => {
|
||||
// @ts-ignore
|
||||
app.use(plugin);
|
||||
});
|
||||
// 注册图标
|
||||
iconComponents.forEach((component: Component) => {
|
||||
app.component(component.name, component);
|
||||
});
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ const componentsRouter = {
|
||||
component: Layout,
|
||||
redirect: "/components/video",
|
||||
meta: {
|
||||
icon: "Menu",
|
||||
icon: "menu",
|
||||
title: $t("menus.hscomponents"),
|
||||
i18n: true,
|
||||
showLink: true,
|
||||
|
||||
@ -7,7 +7,7 @@ const editorRouter = {
|
||||
component: Layout,
|
||||
redirect: "/editor/index",
|
||||
meta: {
|
||||
icon: "Edit",
|
||||
icon: "edit",
|
||||
title: $t("menus.hseditor"),
|
||||
i18n: true,
|
||||
showLink: true,
|
||||
|
||||
@ -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 flowChartRouter = {
|
||||
component: Layout,
|
||||
redirect: "/flowChart/index",
|
||||
meta: {
|
||||
icon: "SetUp",
|
||||
icon: "set-up",
|
||||
title: $t("menus.hsflowChart"),
|
||||
showLink: true,
|
||||
i18n: true,
|
||||
|
||||
@ -7,7 +7,7 @@ const guideRouter = {
|
||||
component: Layout,
|
||||
redirect: "/guide/index",
|
||||
meta: {
|
||||
icon: "Guide",
|
||||
icon: "guide",
|
||||
title: $t("menus.hsguide"),
|
||||
i18n: true,
|
||||
showLink: 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,
|
||||
|
||||
@ -8,7 +8,7 @@ const nestedRouter = {
|
||||
name: "Nested",
|
||||
meta: {
|
||||
title: $t("menus.hsmenus"),
|
||||
icon: "Histogram",
|
||||
icon: "histogram",
|
||||
showLink: true,
|
||||
i18n: true,
|
||||
rank: 5
|
||||
|
||||
@ -18,7 +18,7 @@ const remainingRouter = [
|
||||
name: "redirect",
|
||||
component: Layout,
|
||||
meta: {
|
||||
icon: "HomeFilled",
|
||||
icon: "home-filled",
|
||||
title: $t("menus.hshome"),
|
||||
i18n: true,
|
||||
showLink: false,
|
||||
|
||||
@ -19,16 +19,16 @@ const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
|
||||
import { getAsyncRoutes } from "/@/api/routes";
|
||||
|
||||
// 按照路由中meta下的rank等级升序来排序路由
|
||||
const ascending = (arr: any[]) => {
|
||||
function ascending(arr: any[]) {
|
||||
return arr.sort(
|
||||
(a: { meta: { rank: number } }, b: { meta: { rank: number } }) => {
|
||||
return a?.meta?.rank - b?.meta?.rank;
|
||||
}
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
// 过滤meta中showLink为false的路由
|
||||
const filterTree = (data: RouteComponent[]) => {
|
||||
function filterTree(data: RouteComponent[]) {
|
||||
const newTree = data.filter(
|
||||
(v: { meta: { showLink: boolean } }) => v.meta.showLink
|
||||
);
|
||||
@ -36,20 +36,20 @@ const filterTree = (data: RouteComponent[]) => {
|
||||
(v: { children }) => v.children && (v.children = filterTree(v.children))
|
||||
);
|
||||
return newTree;
|
||||
};
|
||||
}
|
||||
|
||||
// 批量删除缓存路由(keepalive)
|
||||
const delAliveRoutes = (delAliveRouteList: Array<RouteConfigs>) => {
|
||||
function delAliveRoutes(delAliveRouteList: Array<RouteConfigs>) {
|
||||
delAliveRouteList.forEach(route => {
|
||||
usePermissionStoreHook().cacheOperate({
|
||||
mode: "delete",
|
||||
name: route?.name
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// 通过path获取父级路径
|
||||
const getParentPaths = (path: string, routes: RouteRecordRaw[]) => {
|
||||
function getParentPaths(path: string, routes: RouteRecordRaw[]) {
|
||||
// 深度遍历查找
|
||||
function dfs(routes: RouteRecordRaw[], path: string, parents: string[]) {
|
||||
for (let i = 0; i < routes.length; i++) {
|
||||
@ -70,10 +70,10 @@ const getParentPaths = (path: string, routes: RouteRecordRaw[]) => {
|
||||
}
|
||||
|
||||
return dfs(routes, path, []);
|
||||
};
|
||||
}
|
||||
|
||||
// 查找对应path的路由信息
|
||||
const findRouteByPath = (path: string, routes: RouteRecordRaw[]) => {
|
||||
function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
|
||||
let res = routes.find((item: { path: string }) => item.path == path);
|
||||
if (res) {
|
||||
return res;
|
||||
@ -91,20 +91,20 @@ const findRouteByPath = (path: string, routes: RouteRecordRaw[]) => {
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 重置路由
|
||||
const resetRouter = (): void => {
|
||||
function resetRouter(): void {
|
||||
router.getRoutes().forEach(route => {
|
||||
const { name } = route;
|
||||
if (name) {
|
||||
router.hasRoute(name) && router.removeRoute(name);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// 初始化路由
|
||||
const initRouter = (name: string) => {
|
||||
function initRouter(name: string) {
|
||||
return new Promise(resolve => {
|
||||
getAsyncRoutes({ name }).then(({ info }) => {
|
||||
if (info.length === 0) {
|
||||
@ -137,15 +137,15 @@ const initRouter = (name: string) => {
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 将多级嵌套路由处理成一维数组
|
||||
* @param routesList 传入路由
|
||||
* @returns 返回处理后的一维路由
|
||||
*/
|
||||
const formatFlatteningRoutes = (routesList: RouteRecordRaw[]) => {
|
||||
if (routesList.length <= 0) return routesList;
|
||||
function formatFlatteningRoutes(routesList: RouteRecordRaw[]) {
|
||||
if (routesList.length === 0) return routesList;
|
||||
for (let i = 0; i < routesList.length; i++) {
|
||||
if (routesList[i].children) {
|
||||
routesList = routesList
|
||||
@ -154,7 +154,7 @@ const formatFlatteningRoutes = (routesList: RouteRecordRaw[]) => {
|
||||
}
|
||||
}
|
||||
return routesList;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 一维数组处理成多级嵌套数组（三级及以上的路由全部拍成二级，keep-alive 只支持到二级缓存）
|
||||
@ -162,8 +162,8 @@ const formatFlatteningRoutes = (routesList: RouteRecordRaw[]) => {
|
||||
* @param routesList 处理后的一维路由菜单数组
|
||||
* @returns 返回将一维数组重新处理成规定路由的格式
|
||||
*/
|
||||
const formatTwoStageRoutes = (routesList: RouteRecordRaw[]) => {
|
||||
if (routesList.length <= 0) return routesList;
|
||||
function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
|
||||
if (routesList.length === 0) return routesList;
|
||||
const newRoutesList: RouteRecordRaw[] = [];
|
||||
routesList.forEach((v: RouteRecordRaw) => {
|
||||
if (v.path === "/") {
|
||||
@ -180,10 +180,10 @@ const formatTwoStageRoutes = (routesList: RouteRecordRaw[]) => {
|
||||
}
|
||||
});
|
||||
return newRoutesList;
|
||||
};
|
||||
}
|
||||
|
||||
// 处理缓存路由（添加、删除、刷新）
|
||||
const handleAliveRoute = (matched: RouteRecordNormalized[], mode?: string) => {
|
||||
function handleAliveRoute(matched: RouteRecordNormalized[], mode?: string) {
|
||||
switch (mode) {
|
||||
case "add":
|
||||
matched.forEach(v => {
|
||||
@ -207,10 +207,10 @@ const handleAliveRoute = (matched: RouteRecordNormalized[], mode?: string) => {
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 过滤后端传来的动态路由 重新生成规范路由
|
||||
const addAsyncRoutes = (arrRoutes: Array<RouteRecordRaw>) => {
|
||||
function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
|
||||
if (!arrRoutes || !arrRoutes.length) return;
|
||||
const modulesRoutesKeys = Object.keys(modulesRoutes);
|
||||
arrRoutes.forEach((v: RouteRecordRaw) => {
|
||||
@ -225,10 +225,10 @@ const addAsyncRoutes = (arrRoutes: Array<RouteRecordRaw>) => {
|
||||
}
|
||||
});
|
||||
return arrRoutes;
|
||||
};
|
||||
}
|
||||
|
||||
// 获取路由历史模式 https://next.router.vuejs.org/zh/guide/essentials/history-mode.html
|
||||
const getHistoryMode = (): RouterHistory => {
|
||||
function getHistoryMode(): RouterHistory {
|
||||
const routerHistory = loadEnv().VITE_ROUTER_HISTORY;
|
||||
// len为1 代表只有历史模式 为2 代表历史模式中存在base参数 https://next.router.vuejs.org/zh/api/#%E5%8F%82%E6%95%B0-1
|
||||
const historyMode = routerHistory.split(",");
|
||||
@ -249,10 +249,10 @@ const getHistoryMode = (): RouterHistory => {
|
||||
return createWebHistory(rightMode);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 是否有权限
|
||||
const hasPermissions = (value: Array<string>): boolean => {
|
||||
function hasPermissions(value: Array<string>): boolean {
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const roles = usePermissionStoreHook().buttonAuth;
|
||||
const permissionRoles = value;
|
||||
@ -268,7 +268,7 @@ const hasPermissions = (value: Array<string>): boolean => {
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export {
|
||||
ascending,
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
17
types/global.d.ts
vendored
17
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>;
|
||||
|
||||
@ -183,6 +183,10 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
"pinia",
|
||||
"vue-i18n",
|
||||
"lodash-es",
|
||||
"@vueuse/core",
|
||||
"element-plus/lib/locale/lang/zh-cn",
|
||||
"element-plus/lib/locale/lang/en",
|
||||
"vxe-table/lib/locale/lang/zh-CN",
|
||||
|
||||
@ -6,7 +6,6 @@ import typography from "windicss/plugin/typography";
|
||||
export default defineConfig({
|
||||
darkMode: "class",
|
||||
attributify: true,
|
||||
|
||||
plugins: [typography()],
|
||||
theme: {
|
||||
extend: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user