xiaoxian521 3 years ago
parent
commit
64eef1fc66
  1. 2
      mock/asyncRoutes.ts
  2. 19
      package.json
  3. 551
      pnpm-lock.yaml
  4. 27
      src/components/ReIcon/index.ts
  5. 70
      src/components/ReIcon/src/iconifyIconOffline.ts
  6. 30
      src/components/ReIcon/src/iconifyIconOnline.ts
  7. 2
      src/layout/components/appMain.vue
  8. 14
      src/layout/components/navbar.vue
  9. 4
      src/layout/components/notice/index.vue
  10. 2
      src/layout/components/panel/index.vue
  11. 9
      src/layout/components/setting/index.vue
  12. 8
      src/layout/components/sidebar/horizontal.vue
  13. 51
      src/layout/components/tag/index.vue
  14. 7
      src/layout/index.vue
  15. 5
      src/layout/types.ts
  16. 5
      src/main.ts
  17. 56
      src/plugins/element-plus/index.ts
  18. 2
      src/router/modules/error.ts
  19. 2
      src/router/modules/externalLink.ts
  20. 2
      src/router/modules/home.ts
  21. 2
      src/router/modules/remaining.ts
  22. 2
      src/store/modules/multiTags.ts
  23. 2
      src/store/modules/user.ts
  24. 2
      src/utils/storage/responsive.ts
  25. 16
      src/views/login.vue
  26. 18
      types/global.d.ts
  27. 1
      windi.config.ts

2
mock/asyncRoutes.ts

@ -7,7 +7,7 @@ const permissionRouter = {
redirect: "/permission/page/index", redirect: "/permission/page/index",
meta: { meta: {
title: "menus.permission", title: "menus.permission",
icon: "Lollipop",
icon: "lollipop",
i18n: true, i18n: true,
showLink: true, showLink: true,
rank: 3 rank: 3

19
package.json

@ -29,12 +29,11 @@
], ],
"dependencies": { "dependencies": {
"@ctrl/tinycolor": "^3.4.0", "@ctrl/tinycolor": "^3.4.0",
"@element-plus/icons-vue": "^0.2.6",
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.0-5", "@fortawesome/vue-fontawesome": "^3.0.0-5",
"@vueuse/core": "^7.5.3", "@vueuse/core": "^7.5.3",
"@vueuse/motion": "^2.0.0-beta.4",
"@vueuse/motion": "^2.0.0-beta.9",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^0.25.0", "axios": "^0.25.0",
"css-color-function": "^1.3.3", "css-color-function": "^1.3.3",
@ -62,6 +61,8 @@
"devDependencies": { "devDependencies": {
"@commitlint/cli": "13.1.0", "@commitlint/cli": "13.1.0",
"@commitlint/config-conventional": "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/element-resize-detector": "1.1.3",
"@types/js-cookie": "^3.0.1", "@types/js-cookie": "^3.0.1",
"@types/mockjs": "1.0.3", "@types/mockjs": "1.0.3",
@ -75,7 +76,7 @@
"@vitejs/plugin-vue-jsx": "^1.3.3", "@vitejs/plugin-vue-jsx": "^1.3.3",
"@vue/eslint-config-prettier": "6.0.0", "@vue/eslint-config-prettier": "6.0.0",
"@vue/eslint-config-typescript": "7.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", "autoprefixer": "10.2.4",
"cross-env": "7.0.3", "cross-env": "7.0.3",
"eslint": "7.30.0", "eslint": "7.30.0",
@ -95,16 +96,16 @@
"stylelint-config-standard": "22.0.0", "stylelint-config-standard": "22.0.0",
"stylelint-order": "4.1.0", "stylelint-order": "4.1.0",
"typescript": "4.4.2", "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-live-reload": "^2.1.0",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^0.0.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", "vue-eslint-parser": "7.10.0",
"windicss": "^3.4.2"
"windicss": "^3.4.3"
}, },
"repository": "git@github.com:xiaoxian521/vue-pure-admin.git", "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
"author": "xiaoxian521", "author": "xiaoxian521",

551
pnpm-lock.yaml
File diff suppressed because it is too large
View File

27
src/components/ReIcon/index.ts

@ -1,7 +1,8 @@
import { App, defineComponent } from "vue"; import { App, defineComponent } from "vue";
import icon from "./src/Icon.vue"; import icon from "./src/Icon.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; 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 * find icon component
@ -67,21 +68,20 @@ export function findIcon(icon: String, type = "EL", property?: string) {
}); });
} else if (type === "RI") { } else if (type === "RI") {
return defineComponent({ return defineComponent({
name: "RIIcon",
name: "RiIcon",
data() { data() {
return { icon: `ri-${icon}` }; return { icon: `ri-${icon}` };
}, },
template: `<i :class="icon" />` template: `<i :class="icon" />`
}); });
} else if (type === "EL") { } 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") { } else if (type === "SVG") {
return icon; return icon;
} }
@ -93,6 +93,11 @@ export const Icon = Object.assign(icon, {
} }
}); });
export const IconifyIconOffline = iconifyIconOffline;
export const IconifyIconOnline = iconifyIconOnline;
export default { export default {
Icon
Icon,
IconifyIconOffline,
IconifyIconOnline
}; };

70
src/components/ReIcon/src/iconifyIconOffline.ts

@ -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

@ -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: () => []
}
);
}
});

2
src/layout/components/appMain.vue

@ -8,7 +8,7 @@ import {
getCurrentInstance getCurrentInstance
} from "vue"; } from "vue";
import { RouterView } from "vue-router"; 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"; import { usePermissionStoreHook } from "/@/store/modules/permission";
const props = defineProps({ const props = defineProps({

14
src/layout/components/navbar.vue

@ -13,8 +13,8 @@ import { useAppStoreHook } from "/@/store/modules/app";
import { unref, watch, getCurrentInstance } from "vue"; import { unref, watch, getCurrentInstance } from "vue";
import { deviceDetection } from "/@/utils/deviceDetection"; import { deviceDetection } from "/@/utils/deviceDetection";
import screenfull from "../components/screenfull/index.vue"; import screenfull from "../components/screenfull/index.vue";
import globalization from "/@/assets/svg/globalization.svg";
import { useEpThemeStoreHook } from "/@/store/modules/epTheme"; import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
import globalization from "/@/assets/svg/globalization.svg?component";
const instance = const instance =
getCurrentInstance().appContext.config.globalProperties.$storage; getCurrentInstance().appContext.config.globalProperties.$storage;
@ -95,15 +95,17 @@ function translationEn() {
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle('zh')" :style="getDropdownItemStyle('zh')"
@click="translationCh" @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 <el-dropdown-item
:style="getDropdownItemStyle('en')" :style="getDropdownItemStyle('en')"
@click="translationEn" @click="translationEn"
><el-icon class="check-en" v-show="locale === 'en'" ><el-icon class="check-en" v-show="locale === 'en'"
><check /></el-icon
><IconifyIconOffline icon="check" /></el-icon
>English</el-dropdown-item >English</el-dropdown-item
> >
</el-dropdown-menu> </el-dropdown-menu>
@ -129,7 +131,7 @@ function translationEn() {
:title="$t('buttons.hssystemSet')" :title="$t('buttons.hssystemSet')"
@click="onPanel" @click="onPanel"
> >
<Setting />
<IconifyIconOffline icon="setting" />
</el-icon> </el-icon>
</div> </div>
</div> </div>

4
src/layout/components/notice/index.vue

@ -16,7 +16,9 @@ notices.value.forEach(notice => {
<el-dropdown trigger="click" placement="bottom-end"> <el-dropdown trigger="click" placement="bottom-end">
<span class="dropdown-badge"> <span class="dropdown-badge">
<el-badge :value="noticesNum" :max="99"> <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> </el-badge>
</span> </span>
<template #dropdown> <template #dropdown>

2
src/layout/components/panel/index.vue

@ -23,7 +23,7 @@ emitter.on("openPanel", () => {
<div class="project-configuration"> <div class="project-configuration">
<h3>项目配置</h3> <h3>项目配置</h3>
<el-icon title="关闭配置" class="el-icon-close" @click="show = !show"> <el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
<Close />
<IconifyIconOffline icon="close" />
</el-icon> </el-icon>
</div> </div>
<div style="border-bottom: 1px solid #dcdfe6"></div> <div style="border-bottom: 1px solid #dcdfe6"></div>

9
src/layout/components/setting/index.vue

@ -16,9 +16,7 @@ import { useRouter } from "vue-router";
import panel from "../panel/index.vue"; import panel from "../panel/index.vue";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { templateRef } from "@vueuse/core"; import { templateRef } from "@vueuse/core";
import dayIcon from "/@/assets/svg/day.svg";
import { debounce } from "/@/utils/debounce"; import { debounce } from "/@/utils/debounce";
import darkIcon from "/@/assets/svg/dark.svg";
import { themeColorsType } from "../../types"; import { themeColorsType } from "../../types";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
import { shadeBgColor } from "../../theme/element-plus"; import { shadeBgColor } from "../../theme/element-plus";
@ -28,6 +26,9 @@ import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
import { createNewStyle, writeNewStyle } from "../../theme/element-plus"; import { createNewStyle, writeNewStyle } from "../../theme/element-plus";
import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils"; 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 router = useRouter();
const { isSelect } = useCssModule(); const { isSelect } = useCssModule();
const body = document.documentElement as HTMLElement; const body = document.documentElement as HTMLElement;
@ -155,7 +156,7 @@ function onReset() {
parentPath: "/", parentPath: "/",
meta: { meta: {
title: "menus.hshome", title: "menus.hshome",
icon: "HomeFilled",
icon: "home-filled",
i18n: true, i18n: true,
showLink: true showLink: true
} }
@ -351,7 +352,7 @@ nextTick(() => {
:size="17" :size="17"
:color="getThemeColor(item.themeColor)" :color="getThemeColor(item.themeColor)"
> >
<Check />
<IconifyIconOffline icon="check" />
</el-icon> </el-icon>
</li> </li>
</ul> </ul>

8
src/layout/components/sidebar/horizontal.vue

@ -19,8 +19,8 @@ import { useRoute, useRouter } from "vue-router";
import { storageSession } from "/@/utils/storage"; import { storageSession } from "/@/utils/storage";
import Icon from "/@/components/ReIcon/src/Icon.vue"; import Icon from "/@/components/ReIcon/src/Icon.vue";
import { deviceDetection } from "/@/utils/deviceDetection"; import { deviceDetection } from "/@/utils/deviceDetection";
import globalization from "/@/assets/svg/globalization.svg";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
import globalization from "/@/assets/svg/globalization.svg?component";
const instance = const instance =
getCurrentInstance().appContext.config.globalProperties.$storage; getCurrentInstance().appContext.config.globalProperties.$storage;
@ -161,14 +161,14 @@ onMounted(() => {
:style="getDropdownItemStyle('zh')" :style="getDropdownItemStyle('zh')"
@click="translationCh" @click="translationCh"
><el-icon class="check-zh" v-show="locale === 'zh'" ><el-icon class="check-zh" v-show="locale === 'zh'"
><check /></el-icon
><IconifyIconOffline icon="check" /></el-icon
>简体中文</el-dropdown-item >简体中文</el-dropdown-item
> >
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle('en')" :style="getDropdownItemStyle('en')"
@click="translationEn" @click="translationEn"
><el-icon class="check-en" v-show="locale === 'en'" ><el-icon class="check-en" v-show="locale === 'en'"
><check /></el-icon
><IconifyIconOffline icon="check" /></el-icon
>English</el-dropdown-item >English</el-dropdown-item
> >
</el-dropdown-menu> </el-dropdown-menu>
@ -194,7 +194,7 @@ onMounted(() => {
:title="$t('buttons.hssystemSet')" :title="$t('buttons.hssystemSet')"
@click="onPanel" @click="onPanel"
> >
<Setting />
<IconifyIconOffline icon="setting" />
</el-icon> </el-icon>
</div> </div>
</div> </div>

51
src/layout/components/tag/index.vue

@ -3,6 +3,7 @@ import {
ref, ref,
watch, watch,
unref, unref,
reactive,
nextTick, nextTick,
computed, computed,
ComputedRef, ComputedRef,
@ -11,15 +12,15 @@ import {
getCurrentInstance getCurrentInstance
} from "vue"; } 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 { emitter } from "/@/utils/mitt";
import { $t as t } from "/@/plugins/i18n";
import { isEqual, isEmpty } from "lodash-es"; import { isEqual, isEmpty } from "lodash-es";
import { transformI18n } from "/@/plugins/i18n"; import { transformI18n } from "/@/plugins/i18n";
import { storageLocal } from "/@/utils/storage"; 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, icon: refresh,
text: t("buttons.hsreload"), text: t("buttons.hsreload"),
@ -434,13 +435,13 @@ function closeMenu() {
function showMenus(value: boolean) { function showMenus(value: boolean) {
Array.of(1, 2, 3, 4, 5).forEach(v => { Array.of(1, 2, 3, 4, 5).forEach(v => {
tagsViews.value[v].show = value;
tagsViews[v].show = value;
}); });
} }
function disabledMenus(value: boolean) { function disabledMenus(value: boolean) {
Array.of(1, 2, 3, 4, 5).forEach(v => { 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); showMenus(true);
if (refresh) { if (refresh) {
tagsViews.value[0].show = true;
tagsViews[0].show = true;
} }
/** /**
@ -472,25 +473,25 @@ function showMenuModel(
if (currentIndex === 1 && routeLength !== 2) { if (currentIndex === 1 && routeLength !== 2) {
// //
tagsViews.value[2].show = false;
tagsViews[2].show = false;
Array.of(1, 3, 4, 5).forEach(v => { 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) { } else if (currentIndex === 1 && routeLength === 2) {
disabledMenus(false); disabledMenus(false);
// //
Array.of(2, 3, 4).forEach(v => { 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) { } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
// //
tagsViews.value[3].show = false;
tagsViews[3].show = false;
Array.of(1, 2, 4, 5).forEach(v => { 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") { } else if (currentIndex === 0 || currentPath === "/redirect/welcome") {
// //
disabledMenus(true); disabledMenus(true);
@ -504,10 +505,10 @@ function openMenu(tag, e) {
if (tag.path === "/welcome") { if (tag.path === "/welcome") {
// //
showMenus(false); showMenus(false);
tagsViews.value[0].show = true;
tagsViews[0].show = true;
} else if (route.path !== tag.path) { } else if (route.path !== tag.path) {
// //
tagsViews.value[0].show = false;
tagsViews[0].show = false;
showMenuModel(tag.path, tag.query); showMenuModel(tag.path, tag.query);
} else if ( } else if (
// eslint-disable-next-line no-dupe-else-if // eslint-disable-next-line no-dupe-else-if
@ -516,7 +517,7 @@ function openMenu(tag, e) {
) { ) {
showMenus(true); showMenus(true);
// //
tagsViews.value[4].show = false;
tagsViews[4].show = false;
} else if (route.path === tag.path) { } else if (route.path === tag.path) {
// //
showMenuModel(tag.path, tag.query, true); showMenuModel(tag.path, tag.query, true);
@ -660,7 +661,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
class="el-icon-close" class="el-icon-close"
@click.stop="deleteMenu(item)" @click.stop="deleteMenu(item)"
> >
<CloseBold />
<IconifyIconOffline icon="close-bold" />
</el-icon> </el-icon>
<div <div
:ref="'schedule' + index" :ref="'schedule' + index"
@ -699,13 +700,13 @@ const getContextMenuStyle = computed((): CSSProperties => {
class="el-icon-refresh-right rotate" class="el-icon-refresh-right rotate"
@click="onFresh" @click="onFresh"
> >
<RefreshRight />
<IconifyIconOffline icon="refresh-right" />
</el-icon> </el-icon>
</li> </li>
<li> <li>
<el-dropdown trigger="click" placement="bottom-end"> <el-dropdown trigger="click" placement="bottom-end">
<el-icon> <el-icon>
<ArrowDown />
<IconifyIconOffline icon="arrow-down" />
</el-icon> </el-icon>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>

7
src/layout/index.vue

@ -11,14 +11,15 @@ import { setType } from "./types";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { routerArrays } from "./types"; import { routerArrays } from "./types";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import backTop from "/@/assets/svg/back_top.svg";
import { useAppStoreHook } from "/@/store/modules/app"; 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 { deviceDetection } from "/@/utils/deviceDetection";
import { useMultiTagsStore } from "/@/store/modules/multiTags"; import { useMultiTagsStore } from "/@/store/modules/multiTags";
import { useSettingStoreHook } from "/@/store/modules/settings"; 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 navbar from "./components/navbar.vue";
import tag from "./components/tag/index.vue"; import tag from "./components/tag/index.vue";
import appMain from "./components/appMain.vue"; import appMain from "./components/appMain.vue";

5
src/layout/types.ts

@ -1,3 +1,4 @@
import { Component } from "vue";
export const routerArrays: Array<RouteConfigs> = [ export const routerArrays: Array<RouteConfigs> = [
{ {
path: "/welcome", path: "/welcome",
@ -5,7 +6,7 @@ export const routerArrays: Array<RouteConfigs> = [
meta: { meta: {
title: "menus.hshome", title: "menus.hshome",
i18n: true, i18n: true,
icon: "HomeFilled",
icon: "home-filled",
showLink: true showLink: true
} }
} }
@ -32,7 +33,7 @@ export type multiTagsType = {
}; };
export type tagsViewsType = { export type tagsViewsType = {
icon: string;
icon: Component;
text: string; text: string;
divided: boolean; divided: boolean;
disabled: boolean; disabled: boolean;

5
src/main.ts

@ -25,6 +25,11 @@ Object.keys(directives).forEach(key => {
app.directive(key, (directives as { [key: string]: Directive })[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 => { getServerConfig(app).then(async config => {
injectResponsiveStorage(app, config); injectResponsiveStorage(app, config);
setupStore(app); setupStore(app);

56
src/plugins/element-plus/index.ts

@ -99,58 +99,6 @@ const components = [
ElTreeV2 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) { export function useElementPlus(app: App) {
// 注册组件 // 注册组件
components.forEach((component: Component) => { components.forEach((component: Component) => {
@ -160,8 +108,4 @@ export function useElementPlus(app: App) {
plugins.forEach(plugin => { plugins.forEach(plugin => {
app.use(plugin); app.use(plugin);
}); });
// 注册图标
iconComponents.forEach((component: Component) => {
app.component(component.name, component);
});
} }

2
src/router/modules/error.ts

@ -7,7 +7,7 @@ const errorRouter = {
component: Layout, component: Layout,
redirect: "/error/401", redirect: "/error/401",
meta: { meta: {
icon: "Position",
icon: "position",
title: $t("menus.hserror"), title: $t("menus.hserror"),
showLink: true, showLink: true,
i18n: true, i18n: true,

2
src/router/modules/externalLink.ts

@ -6,7 +6,7 @@ const externalLink = {
name: "external", name: "external",
component: Layout, component: Layout,
meta: { meta: {
icon: "Link",
icon: "link",
title: $t("menus.externalLink"), title: $t("menus.externalLink"),
showLink: true, showLink: true,
i18n: true, i18n: true,

2
src/router/modules/home.ts

@ -7,7 +7,7 @@ const homeRouter = {
component: Layout, component: Layout,
redirect: "/welcome", redirect: "/welcome",
meta: { meta: {
icon: "HomeFilled",
icon: "home-filled",
title: $t("menus.hshome"), title: $t("menus.hshome"),
showLink: true, showLink: true,
i18n: true, i18n: true,

2
src/router/modules/remaining.ts

@ -18,7 +18,7 @@ const remainingRouter = [
name: "redirect", name: "redirect",
component: Layout, component: Layout,
meta: { meta: {
icon: "HomeFilled",
icon: "home-filled",
title: $t("menus.hshome"), title: $t("menus.hshome"),
i18n: true, i18n: true,
showLink: false, showLink: false,

2
src/store/modules/multiTags.ts

@ -16,7 +16,7 @@ export const useMultiTagsStore = defineStore({
parentPath: "/", parentPath: "/",
meta: { meta: {
title: "menus.hshome", title: "menus.hshome",
icon: "HomeFilled",
icon: "home-filled",
i18n: true, i18n: true,
showLink: true showLink: true
} }

2
src/store/modules/user.ts

@ -59,7 +59,7 @@ export const useUserStore = defineStore({
parentPath: "/", parentPath: "/",
meta: { meta: {
title: "menus.hshome", title: "menus.hshome",
icon: "HomeFilled",
icon: "home-filled",
i18n: true, i18n: true,
showLink: true showLink: true
} }

2
src/utils/storage/responsive.ts

@ -47,7 +47,7 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
meta: { meta: {
title: "menus.hshome", title: "menus.hshome",
i18n: true, i18n: true,
icon: "HomeFilled",
icon: "home-filled",
showLink: true showLink: true
} }
} }

16
src/views/login.vue

@ -5,14 +5,14 @@ import { initRouter } from "/@/router/utils";
import { storageSession } from "/@/utils/storage"; import { storageSession } from "/@/utils/storage";
import { addClass, removeClass } from "/@/utils/operate"; import { addClass, removeClass } from "/@/utils/operate";
import bg from "/@/assets/login/bg.png"; 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(); const router = useRouter();

18
types/global.d.ts

@ -6,16 +6,15 @@ import type {
PropType as VuePropType PropType as VuePropType
} from "vue"; } 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 { declare global {
const __APP_INFO__: {
pkg: {
name: string;
version: string;
dependencies: Recordable<string>;
devDependencies: Recordable<string>;
};
lastBuildTime: string;
};
interface Window { interface Window {
// Global vue app instance // Global vue app instance
__APP__: App<Element>; __APP__: App<Element>;
@ -23,7 +22,6 @@ declare global {
mozCancelAnimationFrame: (handle: number) => void; mozCancelAnimationFrame: (handle: number) => void;
oCancelAnimationFrame: (handle: number) => void; oCancelAnimationFrame: (handle: number) => void;
msCancelAnimationFrame: (handle: number) => void; msCancelAnimationFrame: (handle: number) => void;
webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number; webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
mozRequestAnimationFrame: (callback: FrameRequestCallback) => number; mozRequestAnimationFrame: (callback: FrameRequestCallback) => number;
oRequestAnimationFrame: (callback: FrameRequestCallback) => number; oRequestAnimationFrame: (callback: FrameRequestCallback) => number;

1
windi.config.ts

@ -6,7 +6,6 @@ import typography from "windicss/plugin/typography";
export default defineConfig({ export default defineConfig({
darkMode: "class", darkMode: "class",
attributify: true, attributify: true,
plugins: [typography()], plugins: [typography()],
theme: { theme: {
extend: { extend: {

Loading…
Cancel
Save