From d943550e108ceb4c5d9b9f297c1d70a2ede977f2 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Sat, 5 Feb 2022 14:45:20 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E9=87=8D=E6=9E=84=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- LICENSE | 2 +- README.en-US.md | 9 +- README.md | 8 +- build/plugins.ts | 102 ++++++++++ index.html | 1 - mock/asyncRoutes.ts | 5 +- package.json | 21 +- pnpm-lock.yaml | 242 ++++++++++-------------- public/iconfont.css | 18 -- src/assets/car.png | Bin 1480 -> 0 bytes src/assets/login/illustration.svg | 1 + src/assets/login/illustration0.svg | 1 - src/assets/login/illustration1.svg | 1 - src/assets/login/illustration2.svg | 1 - src/assets/login/illustration3.svg | 1 - src/assets/login/illustration4.svg | 1 - src/assets/login/illustration5.svg | 1 - src/assets/login/illustration6.svg | 1 - src/components/ReIcon/index.ts | 149 +-------------- src/components/ReIcon/src/Icon.vue | 97 ---------- src/components/ReIcon/src/hooks.ts | 39 ++++ src/components/ReIcon/src/iconfont.ts | 48 +++++ src/components/ReIcon/src/iconifyIconOffline.ts | 25 ++- src/components/ReIcon/src/iconifyIconOnline.ts | 8 +- src/layout/components/navbar.vue | 6 +- src/layout/components/notice/data.ts | 6 +- src/layout/components/screenfull/index.vue | 10 +- src/layout/components/setting/index.vue | 10 +- src/layout/components/sidebar/horizontal.vue | 17 +- src/layout/components/sidebar/logo.vue | 13 +- src/layout/components/sidebar/sidebarItem.vue | 19 +- src/layout/components/sidebar/vertical.vue | 3 +- src/layout/components/tag/index.scss | 28 +-- src/layout/components/tag/index.vue | 27 +-- src/layout/theme/element-plus.ts | 4 +- src/layout/types.ts | 3 +- src/main.ts | 15 +- src/plugins/element-plus/index.ts | 26 +-- src/plugins/fontawesome/index.ts | 21 -- src/plugins/i18n/en/menus.ts | 17 -- src/plugins/i18n/zh-CN/menus.ts | 17 -- src/router/modules/error.ts | 7 +- src/router/modules/externalLink.ts | 2 - src/router/modules/home.ts | 4 +- src/router/utils.ts | 2 +- src/store/modules/multiTags.ts | 3 +- src/store/modules/user.ts | 3 +- src/style/login.css | 4 +- src/utils/algorithm/index.ts | 21 -- src/utils/loaders/index.ts | 54 ------ src/utils/resize/index.ts | 35 ---- src/utils/storage/responsive.ts | 3 +- src/views/login.vue | 38 +--- types/global.d.ts | 1 + vite.config.ts | 106 +---------- 55 files changed, 454 insertions(+), 853 deletions(-) create mode 100644 build/plugins.ts delete mode 100644 public/iconfont.css delete mode 100644 src/assets/car.png create mode 100644 src/assets/login/illustration.svg delete mode 100644 src/assets/login/illustration0.svg delete mode 100644 src/assets/login/illustration1.svg delete mode 100644 src/assets/login/illustration2.svg delete mode 100644 src/assets/login/illustration3.svg delete mode 100644 src/assets/login/illustration4.svg delete mode 100644 src/assets/login/illustration5.svg delete mode 100644 src/assets/login/illustration6.svg delete mode 100644 src/components/ReIcon/src/Icon.vue create mode 100644 src/components/ReIcon/src/hooks.ts create mode 100644 src/components/ReIcon/src/iconfont.ts delete mode 100644 src/plugins/fontawesome/index.ts delete mode 100644 src/utils/algorithm/index.ts delete mode 100644 src/utils/loaders/index.ts delete mode 100644 src/utils/resize/index.ts diff --git a/LICENSE b/LICENSE index b8bd0ac..3084aef 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2021 啝裳 +Copyright (c) 2022 啝裳 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.en-US.md b/README.en-US.md index 94a2518..c9cc550 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -6,11 +6,16 @@ ## introduce -The lite version is based on the shelf extracted from https://github.com/xiaoxian521/vue-pure-admin, which contains the main functions and is more suitable for actual project development +The lite version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains the main functions and is more suitable for actual project development, the packaged size is only more than `2MB` + +## Supporting Video + +- [Click Watch Tutorial](https://www.bilibili.com/video/BV1534y1S7HV) +- [Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq) ## Docs - +- [Click Watch Docs](https://pure-admin-doc.vercel.app) ## Usage diff --git a/README.md b/README.md index 21289c3..eaff148 100644 --- a/README.md +++ b/README.md @@ -6,16 +6,16 @@ ## 介绍 -精简版是基于 https://github.com/xiaoxian521/vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发 +精简版是基于[vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin)提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小仅 `2MB`多 ## 配套视频 -教程： -UI 设计： +- [点我查看教程](https://www.bilibili.com/video/BV1534y1S7HV) +- [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq) ## 配套文档 - +- [点我查看文档](https://pure-admin-doc.vercel.app) ## 维护者 diff --git a/build/plugins.ts b/build/plugins.ts new file mode 100644 index 0000000..151668e --- /dev/null +++ b/build/plugins.ts @@ -0,0 +1,102 @@ +import vue from "@vitejs/plugin-vue"; +import svgLoader from "vite-svg-loader"; +import legacy from "@vitejs/plugin-legacy"; +import vueJsx from "@vitejs/plugin-vue-jsx"; +import WindiCSS from "vite-plugin-windicss"; +import { viteMockServe } from "vite-plugin-mock"; +import liveReload from "vite-plugin-live-reload"; +import ElementPlus from "unplugin-element-plus/vite"; +import removeConsole from "vite-plugin-remove-console"; +import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor"; + +export function getPluginsList(command, VITE_LEGACY) { + const prodMock = true; + return [ + vue(), + // jsx、tsx语法支持 + vueJsx(), + WindiCSS(), + // 线上环境删除console + removeConsole(), + // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170 + liveReload(["src/layout/**/*", "src/router/**/*"]), + // 自定义主题 + themePreprocessorPlugin({ + scss: { + multipleScopeVars: [ + { + scopeName: "layout-theme-default", + path: "src/layout/theme/default-vars.scss" + }, + { + scopeName: "layout-theme-light", + path: "src/layout/theme/light-vars.scss" + }, + { + scopeName: "layout-theme-dusk", + path: "src/layout/theme/dusk-vars.scss" + }, + { + scopeName: "layout-theme-volcano", + path: "src/layout/theme/volcano-vars.scss" + }, + { + scopeName: "layout-theme-yellow", + path: "src/layout/theme/yellow-vars.scss" + }, + { + scopeName: "layout-theme-mingQing", + path: "src/layout/theme/mingQing-vars.scss" + }, + { + scopeName: "layout-theme-auroraGreen", + path: "src/layout/theme/auroraGreen-vars.scss" + }, + { + scopeName: "layout-theme-pink", + path: "src/layout/theme/pink-vars.scss" + }, + { + scopeName: "layout-theme-saucePurple", + path: "src/layout/theme/saucePurple-vars.scss" + } + ], + // 默认取 multipleScopeVars[0].scopeName + defaultScopeName: "", + // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效 + extract: true, + // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir) + outputDir: "", + // 会选取defaultScopeName对应的主题css文件在html添加link + themeLinkTagId: "head", + // "head"||"head-prepend" || "body" ||"body-prepend" + themeLinkTagInjectTo: "head", + // 是否对抽取的css文件内对应scopeName的权重类名移除 + removeCssScopeName: false, + // 可以自定义css文件名称的函数 + customThemeCssFileName: scopeName => scopeName + } + }), + // svg组件化支持 + svgLoader(), + ElementPlus({}), + // mock支持 + viteMockServe({ + mockPath: "mock", + localEnabled: command === "serve", + prodEnabled: command !== "serve" && prodMock, + injectCode: ` + import { setupProdMockServer } from './mockProdServer'; + setupProdMockServer(); + `, + logger: true + }), + // 是否为打包后的文件提供传统浏览器兼容性支持 + VITE_LEGACY + ? legacy({ + targets: ["ie >= 11"], + additionalLegacyPolyfills: ["regenerator-runtime/runtime"] + }) + : null + ]; +} diff --git a/index.html b/index.html index 9d6c66e..7d57d3c 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - pure-admin-thin - - - - diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts new file mode 100644 index 0000000..bc9529f --- /dev/null +++ b/src/components/ReIcon/src/hooks.ts @@ -0,0 +1,39 @@ +import { h, defineComponent, Component } from "vue"; +import { IconifyIconOffline, FontIcon } from "../index"; + +// 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg +export function useRenderIcon(icon: string): Component { + // iconfont + const ifReg = /^IF-/; + // typeof icon === "function" 属于SVG + if (ifReg.test(icon)) { + // iconfont + const name = icon.split(ifReg)[1]; + const iconName = name.slice( + 0, + name.indexOf(" ") == -1 ? name.length : name.indexOf(" ") + ); + const iconType = name.slice(name.indexOf(" ") + 1, name.length); + return defineComponent({ + name: "FontIcon", + render() { + return h(FontIcon, { + icon: iconName, + iconType + }); + } + }); + } else if (typeof icon === "function") { + // svg + return icon; + } else { + return defineComponent({ + name: "Icon", + render() { + return h(IconifyIconOffline, { + icon: icon + }); + } + }); + } +} diff --git a/src/components/ReIcon/src/iconfont.ts b/src/components/ReIcon/src/iconfont.ts new file mode 100644 index 0000000..eb9a213 --- /dev/null +++ b/src/components/ReIcon/src/iconfont.ts @@ -0,0 +1,48 @@ +import { h, defineComponent } from "vue"; + +// 封装iconfont组件，默认`font-class`引用模式，支持`unicode`引用、`font-class`引用、`symbol`引用 （https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code） +export default defineComponent({ + name: "fontIcon", + props: { + icon: { + type: String, + default: "" + } + }, + render() { + const attrs = this.$attrs; + if (Object.keys(attrs).includes("uni") || attrs?.iconType === "uni") { + return h( + "i", + { + class: "iconfont", + ...attrs + }, + this.icon + ); + } else if ( + Object.keys(attrs).includes("svg") || + attrs?.iconType === "svg" + ) { + return h( + "svg", + { + class: "icon-svg", + "aria-hidden": true + }, + { + default: () => [ + h("use", { + "xlink:href": `#${this.icon}` + }) + ] + } + ); + } else { + return h("i", { + class: `iconfont ${this.icon}`, + ...attrs + }); + } + } +}); diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index 1a768d1..701b670 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -1,5 +1,7 @@ import { h, defineComponent } from "vue"; import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline"; + +// element-plus icon import Check from "@iconify-icons/ep/check"; import Menu from "@iconify-icons/ep/menu"; import HomeFilled from "@iconify-icons/ep/home-filled"; @@ -45,8 +47,23 @@ addIcon("tickets", Tickets); addIcon("office-building", OfficeBuilding); addIcon("notebook", Notebook); -// Iconify Icon在Vue里离线使用（用于内网环境） -// https://docs.iconify.design/icon-components/vue/offline.html +// remixicon +import arrowRightSLine from "@iconify-icons/ri/arrow-right-s-line"; +import arrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line"; +import logoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line"; +addIcon("arrow-right-s-line", arrowRightSLine); +addIcon("arrow-left-s-line", arrowLeftSLine); +addIcon("logout-circle-r-line", logoutCircleRLine); + +// Font Awesome 4 +import faUser from "@iconify-icons/fa/user"; +import faLock from "@iconify-icons/fa/lock"; +import faSignOut from "@iconify-icons/fa/sign-out"; +addIcon("fa-user", faUser); +addIcon("fa-lock", faLock); +addIcon("fa-sign-out", faSignOut); + +// Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html export default defineComponent({ name: "IconifyIcon", components: { IconifyIcon }, @@ -57,10 +74,12 @@ export default defineComponent({ } }, render() { + const attrs = this.$attrs; return h( IconifyIcon, { - icon: `${this.icon}` + icon: `${this.icon}`, + ...attrs }, { default: () => [] diff --git a/src/components/ReIcon/src/iconifyIconOnline.ts b/src/components/ReIcon/src/iconifyIconOnline.ts index b0b8328..fd879cf 100644 --- a/src/components/ReIcon/src/iconifyIconOnline.ts +++ b/src/components/ReIcon/src/iconifyIconOnline.ts @@ -1,8 +1,7 @@ import { h, defineComponent } from "vue"; import { Icon as IconifyIcon } from "@iconify/vue"; -// Iconify Icon在Vue里在线使用（用于外网环境） -// https://docs.iconify.design/icon-components/vue/offline.html +// Iconify Icon在Vue里在线使用（用于外网环境） https://docs.iconify.design/icon-components/vue/offline.html export default defineComponent({ name: "IconifyIcon", components: { IconifyIcon }, @@ -11,16 +10,19 @@ export default defineComponent({ type: String, default: "" }, + // default element plus icon type: { type: String, default: "ep:" } }, render() { + const attrs = this.$attrs; return h( IconifyIcon, { - icon: `${this.type}${this.icon}` + icon: `${this.type}${this.icon}`, + ...attrs }, { default: () => [] diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue index 971d519..32ad5db 100644 --- a/src/layout/components/navbar.vue +++ b/src/layout/components/navbar.vue @@ -120,8 +120,10 @@ function translationEn() { diff --git a/src/layout/components/notice/data.ts b/src/layout/components/notice/data.ts index b918e62..14c7560 100644 --- a/src/layout/components/notice/data.ts +++ b/src/layout/components/notice/data.ts @@ -108,7 +108,7 @@ export const noticesData: TabItem[] = [ { avatar: "", title: "任务名称", - description: "任务需要在 2021-11-16 20:00 前启动", + description: "任务需要在 2022-11-16 20:00 前启动", datetime: "", extra: "未开始", status: "info", @@ -118,7 +118,7 @@ export const noticesData: TabItem[] = [ avatar: "", title: "第三方紧急代码变更", description: - "一拳提交于 2021-11-16，需在 2021-11-18 前完成代码变更任务", + "一拳提交于 2022-11-16，需在 2022-11-18 前完成代码变更任务", datetime: "", extra: "马上到期", status: "danger", @@ -127,7 +127,7 @@ export const noticesData: TabItem[] = [ { avatar: "", title: "信息安全考试", - description: "指派小仙于 2021-12-12 前完成更新并发布", + description: "指派小仙于 2022-12-12 前完成更新并发布", datetime: "", extra: "已耗时 8 天", status: "warning", diff --git a/src/layout/components/screenfull/index.vue b/src/layout/components/screenfull/index.vue index 6a4071f..608efef 100644 --- a/src/layout/components/screenfull/index.vue +++ b/src/layout/components/screenfull/index.vue @@ -5,18 +5,14 @@ const { isFullscreen, toggle } = useFullscreen(); diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 7429b6f..beabf92 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -157,8 +157,7 @@ function onReset() { meta: { title: "menus.hshome", icon: "home-filled", - i18n: true, - showLink: true + i18n: true } } ]); @@ -437,7 +436,12 @@ nextTick(() => { style="width: 90%; margin: 24px 15px" @click="onReset" > - + 清空缓存并返回登录页 diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue index 8186203..762687a 100644 --- a/src/layout/components/sidebar/horizontal.vue +++ b/src/layout/components/sidebar/horizontal.vue @@ -13,11 +13,9 @@ import Notice from "../notice/index.vue"; import { templateRef } from "@vueuse/core"; import SidebarItem from "./sidebarItem.vue"; import avatars from "/@/assets/avatars.jpg"; -import { algorithm } from "/@/utils/algorithm"; import screenfull from "../screenfull/index.vue"; 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 { usePermissionStoreHook } from "/@/store/modules/permission"; import globalization from "/@/assets/svg/globalization.svg?component"; @@ -92,7 +90,7 @@ const menuSelect = (indexPath: string): void => { } }); } - findCurrentRoute(algorithm.increaseIndexes(routers)); + findCurrentRoute(routers); }; function backHome() { @@ -128,7 +126,11 @@ onMounted(() => {