From c94d2e573736ac94cd2ab9eca845f2cfd0dfe16b Mon Sep 17 00:00:00 2001 From: inc904 Date: Fri, 17 Mar 2023 11:59:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE=E5=88=9D=E5=A7=8B?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 152 ++++--- .prettierrc.js | 11 +- .vscode/settings.json | 2 +- locales/en.yaml | 10 + locales/zh-CN.yaml | 11 + mock/asyncRoutes.ts | 2 +- src/App.vue | 14 +- src/api/routes.ts | 12 +- src/api/user.ts | 38 +- src/assets/iconfont/iconfont.css | 16 +- src/assets/iconfont/iconfont.js | 57 ++- src/components/ReAuth/index.ts | 6 +- src/components/ReAuth/src/auth.tsx | 14 +- src/components/ReIcon/index.ts | 14 +- src/components/ReIcon/src/hooks.ts | 42 +- src/components/ReIcon/src/iconfont.ts | 38 +- .../ReIcon/src/iconifyIconOffline.ts | 18 +- .../ReIcon/src/iconifyIconOnline.ts | 18 +- src/components/ReIcon/src/offlineIcon.ts | 26 +- src/components/ReIcon/src/types.ts | 28 +- src/config/index.ts | 56 +-- src/directives/auth/index.ts | 12 +- src/directives/elResizeDetector/index.ts | 28 +- src/directives/index.ts | 4 +- src/layout/components/appMain.vue | 54 +-- src/layout/components/navbar.vue | 28 +- src/layout/components/notice/data.ts | 178 ++++---- src/layout/components/notice/index.vue | 16 +- src/layout/components/notice/noticeItem.vue | 44 +- src/layout/components/notice/noticeList.vue | 8 +- src/layout/components/panel/index.vue | 48 +-- .../search/components/SearchFooter.vue | 8 +- .../search/components/SearchModal.vue | 114 ++--- .../search/components/SearchResult.vue | 56 +-- .../components/search/components/index.ts | 4 +- src/layout/components/search/index.vue | 10 +- src/layout/components/setting/index.vue | 230 +++++----- src/layout/components/sidebar/breadCrumb.vue | 88 ++-- src/layout/components/sidebar/extraIcon.vue | 8 +- src/layout/components/sidebar/horizontal.vue | 38 +- .../components/sidebar/leftCollapse.vue | 48 +-- src/layout/components/sidebar/logo.vue | 6 +- src/layout/components/sidebar/mixNav.vue | 56 +-- src/layout/components/sidebar/sidebarItem.vue | 174 ++++---- src/layout/components/sidebar/topCollapse.vue | 16 +- src/layout/components/sidebar/vertical.vue | 60 +-- src/layout/components/tag/index.vue | 408 +++++++++--------- src/layout/frameView.vue | 48 +-- src/layout/hooks/useBoolean.ts | 14 +- src/layout/hooks/useDataThemeChange.ts | 82 ++-- src/layout/hooks/useLayout.ts | 42 +- src/layout/hooks/useNav.ts | 146 +++---- src/layout/hooks/useTag.ts | 176 ++++---- src/layout/hooks/useTranslationLang.ts | 32 +- src/layout/index.vue | 114 ++--- src/layout/redirect.vue | 20 +- src/layout/theme/index.ts | 176 ++++---- src/layout/types.ts | 116 ++--- src/main.ts | 64 +-- src/mockProdServer.ts | 14 +- src/plugins/echarts/index.ts | 18 +- src/plugins/element-plus/index.ts | 16 +- src/plugins/i18n.ts | 58 +-- src/router/index.ts | 129 +++--- src/router/modules/basicData.ts | 62 +++ src/router/modules/error.ts | 36 +- src/router/modules/home.ts | 24 +- src/router/modules/remaining.ts | 26 +- src/router/utils.ts | 258 +++++------ src/store/index.ts | 10 +- src/store/modules/app.ts | 57 ++- src/store/modules/epTheme.ts | 43 +- src/store/modules/multiTags.ts | 98 ++--- src/store/modules/permission.ts | 38 +- src/store/modules/settings.ts | 24 +- src/store/modules/types.ts | 60 +-- src/store/modules/user.ts | 64 +-- src/style/dark.scss | 2 +- src/style/element-plus.scss | 4 +- src/style/index.scss | 10 +- src/style/mixin.scss | 2 +- src/style/reset.scss | 18 +- src/style/sidebar.scss | 18 +- src/utils/auth.ts | 56 +-- src/utils/globalPolyfills.ts | 6 +- src/utils/http/index.ts | 134 +++--- src/utils/http/types.d.ts | 28 +- src/utils/message.ts | 52 +-- src/utils/mitt.ts | 30 +- src/utils/print.ts | 176 ++++---- src/utils/progress/index.ts | 10 +- src/utils/propTypes.ts | 22 +- src/utils/responsive.ts | 32 +- src/utils/sso.ts | 46 +- src/utils/tree.ts | 136 +++--- src/views/basicData/GameData.vue | 10 + src/views/basicData/LiveData.vue | 14 + src/views/basicData/queryClub/index.vue | 10 + src/views/basicData/queryClub/queryClub.vue | 10 + src/views/basicData/queryUser/index.vue | 10 + src/views/basicData/queryUser/queryUser.vue | 10 + src/views/error/403.vue | 6 +- src/views/error/404.vue | 6 +- src/views/error/500.vue | 6 +- src/views/error/fight.vue | 67 +++ src/views/login/index.vue | 112 ++--- src/views/login/utils/motion.ts | 14 +- src/views/login/utils/rule.ts | 22 +- src/views/login/utils/static.ts | 8 +- src/views/permission/button/index.vue | 16 +- src/views/permission/page/index.vue | 44 +- src/views/welcome/index.vue | 4 +- 112 files changed, 2886 insertions(+), 2659 deletions(-) create mode 100644 src/router/modules/basicData.ts create mode 100644 src/views/basicData/GameData.vue create mode 100644 src/views/basicData/LiveData.vue create mode 100644 src/views/basicData/queryClub/index.vue create mode 100644 src/views/basicData/queryClub/queryClub.vue create mode 100644 src/views/basicData/queryUser/index.vue create mode 100644 src/views/basicData/queryUser/queryUser.vue create mode 100644 src/views/error/fight.vue diff --git a/.eslintrc.js b/.eslintrc.js index 009f5bc..f9a02ff 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,116 +5,128 @@ module.exports = { }, globals: { // Ref sugar (take 2) - $: "readonly", - $$: "readonly", - $ref: "readonly", - $shallowRef: "readonly", - $computed: "readonly", + $: 'readonly', + $$: 'readonly', + $ref: 'readonly', + $shallowRef: 'readonly', + $computed: 'readonly', // index.d.ts // global.d.ts - Fn: "readonly", - PromiseFn: "readonly", - RefType: "readonly", - LabelValueOptions: "readonly", - EmitType: "readonly", - TargetContext: "readonly", - ComponentElRef: "readonly", - ComponentRef: "readonly", - ElRef: "readonly", - global: "readonly", - ForDataType: "readonly", - ComponentRoutes: "readonly", + Fn: 'readonly', + PromiseFn: 'readonly', + RefType: 'readonly', + LabelValueOptions: 'readonly', + EmitType: 'readonly', + TargetContext: 'readonly', + ComponentElRef: 'readonly', + ComponentRef: 'readonly', + ElRef: 'readonly', + global: 'readonly', + ForDataType: 'readonly', + ComponentRoutes: 'readonly', // script setup - defineProps: "readonly", - defineEmits: "readonly", - defineExpose: "readonly", - withDefaults: "readonly" + defineProps: 'readonly', + defineEmits: 'readonly', + defineExpose: 'readonly', + withDefaults: 'readonly' }, - extends: [ - "plugin:vue/vue3-essential", - "eslint:recommended", - "@vue/typescript/recommended", - "@vue/prettier", - "@vue/eslint-config-typescript" - ], - parser: "vue-eslint-parser", + extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', '@vue/prettier', '@vue/eslint-config-typescript'], + parser: 'vue-eslint-parser', parserOptions: { - parser: "@typescript-eslint/parser", + parser: '@typescript-eslint/parser', ecmaVersion: 2020, - sourceType: "module", - jsxPragma: "React", + sourceType: 'module', + jsxPragma: 'React', ecmaFeatures: { jsx: true } }, overrides: [ { - files: ["*.ts", "*.vue"], + files: ['*.ts', '*.vue'], rules: { - "no-undef": "off" + 'no-undef': 'off' } }, { - files: ["*.vue"], - parser: "vue-eslint-parser", + files: ['*.vue'], + parser: 'vue-eslint-parser', parserOptions: { - parser: "@typescript-eslint/parser", - extraFileExtensions: [".vue"], - ecmaVersion: "latest", + parser: '@typescript-eslint/parser', + extraFileExtensions: ['.vue'], + ecmaVersion: 'latest', ecmaFeatures: { jsx: true } }, rules: { - "no-undef": "off" + 'no-undef': 'off' } } ], rules: { - "vue/no-v-html": "off", - "vue/require-default-prop": "off", - "vue/require-explicit-emits": "off", - "vue/multi-word-component-names": "off", - "@typescript-eslint/no-explicit-any": "off", // any - "no-debugger": "off", - "@typescript-eslint/explicit-module-boundary-types": "off", // setup() - "@typescript-eslint/ban-types": "off", - "@typescript-eslint/ban-ts-comment": "off", - "@typescript-eslint/no-empty-function": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "vue/html-self-closing": [ - "error", + 'vue/no-v-html': 'off', + 'vue/require-default-prop': 'off', + 'vue/require-explicit-emits': 'off', + 'vue/multi-word-component-names': 'off', + '@typescript-eslint/no-explicit-any': 'off', // any + 'no-debugger': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', // setup() + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + quotes: [ + 2, + 'single', + { + avoidEscape: true, + allowTemplateLiterals: true + } + ], + semi: [2, 'never'], + 'semi-spacing': [ + 2, + { + before: false, + after: true + } + ], + 'vue/html-self-closing': [ + 'error', { html: { - void: "always", - normal: "always", - component: "always" + void: 'always', + normal: 'always', + component: 'always' }, - svg: "always", - math: "always" + svg: 'always', + math: 'always' } ], - "@typescript-eslint/no-unused-vars": [ - "error", + '@typescript-eslint/no-unused-vars': [ + 'error', { - argsIgnorePattern: "^_", - varsIgnorePattern: "^_" + argsIgnorePattern: '^_', + varsIgnorePattern: '^_' } ], - "no-unused-vars": [ - "error", + 'no-unused-vars': [ + 'error', { - argsIgnorePattern: "^_", - varsIgnorePattern: "^_" + argsIgnorePattern: '^_', + varsIgnorePattern: '^_' } ], - "prettier/prettier": [ - "error", + 'prettier/prettier': [ + 'error', { - endOfLine: "auto" + endOfLine: 'auto', + singleQuote: true, + semi: false } ] } -}; +} diff --git a/.prettierrc.js b/.prettierrc.js index 16bb32c..430d804 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,6 +1,7 @@ module.exports = { - bracketSpacing: true, - singleQuote: false, - arrowParens: "avoid", - trailingComma: "none" -}; + // bracketSpacing: true, + singleQuote: true, + semi: false, + arrowParens: 'avoid', + trailingComma: 'none' +} diff --git a/.vscode/settings.json b/.vscode/settings.json index bb65d68..6042c15 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,7 +7,7 @@ "editor.tabSize": 2, "editor.formatOnPaste": true, "editor.guides.bracketPairs": "active", - "files.autoSave": "afterDelay", + "files.autoSave": "onFocusChange", "git.confirmSync": false, "workbench.startupEditor": "newUntitledFile", "editor.suggestSelection": "first", diff --git a/locales/en.yaml b/locales/en.yaml index 44bb70d..a62f1c1 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -29,6 +29,13 @@ menus: hsfourZeroFour: "404" hsfourZeroOne: "403" hsFive: "500" + basicData: Basic Data + liveData: Live Data + userData: User Data + searchUser: Search User + gameData: Game Data + clubData: Club Data + searchClub: Search Club permission: Permission Manage permissionPage: Page Permission permissionButton: Button Permission @@ -41,3 +48,6 @@ login: usernameReg: Please enter username passwordReg: Please enter password passwordRuleReg: The password format should be any combination of 8-18 digits +others: + backHome: Back Home + comingSoon: Coming soon. diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index de0a399..7b67622 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -29,6 +29,13 @@ menus: hsfourZeroFour: "404" hsfourZeroOne: "403" hsFive: "500" + basicData: "基础数据" + liveData: "实时数据" + userData: "用户数据" + searchUser: "搜索用户" + gameData: "牌局数据" + clubData: "俱乐部数据" + searchClub: "搜索俱乐部" permission: 权限管理 permissionPage: 页面权限 permissionButton: 按钮权限 @@ -41,3 +48,7 @@ login: usernameReg: 请输入账号 passwordReg: 请输入密码 passwordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合 +others: + backHome: 返回首页 + comingSoon: 敬请期待。 + diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts index 9335735..b706f68 100644 --- a/mock/asyncRoutes.ts +++ b/mock/asyncRoutes.ts @@ -11,7 +11,7 @@ const permissionRouter = { path: "/permission", meta: { title: "menus.permission", - icon: "lollipop", + icon: "informationLine", rank: 10 }, children: [ diff --git a/src/App.vue b/src/App.vue index b299a9e..05c1653 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,19 +5,19 @@ diff --git a/src/api/routes.ts b/src/api/routes.ts index 277c5f3..ef72568 100644 --- a/src/api/routes.ts +++ b/src/api/routes.ts @@ -1,10 +1,10 @@ -import { http } from "@/utils/http"; +import { http } from '@/utils/http' type Result = { - success: boolean; - data: Array; -}; + success: boolean + data: Array +} export const getAsyncRoutes = () => { - return http.request("get", "/getAsyncRoutes"); -}; + return http.request('get', '/getAsyncRoutes') +} diff --git a/src/api/user.ts b/src/api/user.ts index 9f8125b..99100bd 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -1,39 +1,39 @@ -import { http } from "@/utils/http"; +import { http } from '@/utils/http' export type UserResult = { - success: boolean; + success: boolean data: { /** 用户名 */ - username: string; + username: string /** 当前登陆用户的角色 */ - roles: Array; + roles: Array /** `token` */ - accessToken: string; + accessToken: string /** 用于调用刷新`accessToken`的接口时所需的`token` */ - refreshToken: string; + refreshToken: string /** `accessToken`的过期时间（格式'xxxx/xx/xx xx:xx:xx'） */ - expires: Date; - }; -}; + expires: Date + } +} export type RefreshTokenResult = { - success: boolean; + success: boolean data: { /** `token` */ - accessToken: string; + accessToken: string /** 用于调用刷新`accessToken`的接口时所需的`token` */ - refreshToken: string; + refreshToken: string /** `accessToken`的过期时间（格式'xxxx/xx/xx xx:xx:xx'） */ - expires: Date; - }; -}; + expires: Date + } +} /** 登录 */ export const getLogin = (data?: object) => { - return http.request("post", "/login", { data }); -}; + return http.request('post', '/login', { data }) +} /** 刷新token */ export const refreshTokenApi = (data?: object) => { - return http.request("post", "/refreshToken", { data }); -}; + return http.request('post', '/refreshToken', { data }) +} diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css index 3b54550..52eb7e9 100644 --- a/src/assets/iconfont/iconfont.css +++ b/src/assets/iconfont/iconfont.css @@ -1,12 +1,12 @@ @font-face { - font-family: "iconfont"; /* Project id 2208059 */ - src: url("iconfont.woff2?t=1671895108120") format("woff2"), - url("iconfont.woff?t=1671895108120") format("woff"), - url("iconfont.ttf?t=1671895108120") format("truetype"); + font-family: 'iconfont'; /* Project id 2208059 */ + src: url('iconfont.woff2?t=1671895108120') format('woff2'), + url('iconfont.woff?t=1671895108120') format('woff'), + url('iconfont.ttf?t=1671895108120') format('truetype'); } .iconfont { - font-family: "iconfont" !important; + font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; @@ -14,13 +14,13 @@ } .pure-iconfont-tabs:before { - content: "\e63e"; + content: '\e63e'; } .pure-iconfont-logo:before { - content: "\e620"; + content: '\e620'; } .pure-iconfont-new:before { - content: "\e615"; + content: '\e615'; } diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js index 64d8bd8..f9d299b 100644 --- a/src/assets/iconfont/iconfont.js +++ b/src/assets/iconfont/iconfont.js @@ -1,9 +1,9 @@ -(window._iconfont_svg_string_2208059 = +;(window._iconfont_svg_string_2208059 = ''), (function (e) { - var t = (t = document.getElementsByTagName("script"))[t.length - 1], - c = t.getAttribute("data-injectcss"), - t = t.getAttribute("data-disable-injectsvg"); + var t = (t = document.getElementsByTagName('script'))[t.length - 1], + c = t.getAttribute('data-injectcss'), + t = t.getAttribute('data-disable-injectsvg') if (!t) { var n, l, @@ -11,59 +11,58 @@ o, a, h = function (t, c) { - c.parentNode.insertBefore(t, c); - }; + c.parentNode.insertBefore(t, c) + } if (c && !e.__iconfont__svg__cssinject__) { - e.__iconfont__svg__cssinject__ = !0; + e.__iconfont__svg__cssinject__ = !0 try { document.write( - "" - ); + '' + ) } catch (t) { - console && console.log(t); + console && console.log(t) } } - (n = function () { + ;(n = function () { var t, - c = document.createElement("div"); - (c.innerHTML = e._iconfont_svg_string_2208059), - (c = c.getElementsByTagName("svg")[0]) && - (c.setAttribute("aria-hidden", "true"), - (c.style.position = "absolute"), + c = document.createElement('div') + ;(c.innerHTML = e._iconfont_svg_string_2208059), + (c = c.getElementsByTagName('svg')[0]) && + (c.setAttribute('aria-hidden', 'true'), + (c.style.position = 'absolute'), (c.style.width = 0), (c.style.height = 0), - (c.style.overflow = "hidden"), + (c.style.overflow = 'hidden'), (c = c), (t = document.body).firstChild ? h(c, t.firstChild) - : t.appendChild(c)); + : t.appendChild(c)) }), document.addEventListener - ? ~["complete", "loaded", "interactive"].indexOf(document.readyState) + ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) ? setTimeout(n, 0) : ((l = function () { - document.removeEventListener("DOMContentLoaded", l, !1), n(); + document.removeEventListener('DOMContentLoaded', l, !1), n() }), - document.addEventListener("DOMContentLoaded", l, !1)) + document.addEventListener('DOMContentLoaded', l, !1)) : document.attachEvent && ((i = n), (o = e.document), (a = !1), v(), (o.onreadystatechange = function () { - "complete" == o.readyState && - ((o.onreadystatechange = null), d()); - })); + 'complete' == o.readyState && ((o.onreadystatechange = null), d()) + })) } function d() { - a || ((a = !0), i()); + a || ((a = !0), i()) } function v() { try { - o.documentElement.doScroll("left"); + o.documentElement.doScroll('left') } catch (t) { - return void setTimeout(v, 50); + return void setTimeout(v, 50) } - d(); + d() } - })(window); + })(window) diff --git a/src/components/ReAuth/index.ts b/src/components/ReAuth/index.ts index 975ed2c..dc569c0 100644 --- a/src/components/ReAuth/index.ts +++ b/src/components/ReAuth/index.ts @@ -1,5 +1,5 @@ -import auth from "./src/auth"; +import auth from './src/auth' -const Auth = auth; +const Auth = auth -export { Auth }; +export { Auth } diff --git a/src/components/ReAuth/src/auth.tsx b/src/components/ReAuth/src/auth.tsx index d2cf9b3..c1a6e0c 100644 --- a/src/components/ReAuth/src/auth.tsx +++ b/src/components/ReAuth/src/auth.tsx @@ -1,8 +1,8 @@ -import { defineComponent, Fragment } from "vue"; -import { hasAuth } from "@/router/utils"; +import { defineComponent, Fragment } from 'vue' +import { hasAuth } from '@/router/utils' export default defineComponent({ - name: "Auth", + name: 'Auth', props: { value: { type: undefined, @@ -11,10 +11,10 @@ export default defineComponent({ }, setup(props, { slots }) { return () => { - if (!slots) return null; + if (!slots) return null return hasAuth(props.value) ? ( {slots.default?.()} - ) : null; - }; + ) : null + } } -}); +}) diff --git a/src/components/ReIcon/index.ts b/src/components/ReIcon/index.ts index b9f8807..1b91f1d 100644 --- a/src/components/ReIcon/index.ts +++ b/src/components/ReIcon/index.ts @@ -1,12 +1,12 @@ -import iconifyIconOffline from "./src/iconifyIconOffline"; -import iconifyIconOnline from "./src/iconifyIconOnline"; -import fontIcon from "./src/iconfont"; +import iconifyIconOffline from './src/iconifyIconOffline' +import iconifyIconOnline from './src/iconifyIconOnline' +import fontIcon from './src/iconfont' /** 本地图标组件 */ -const IconifyIconOffline = iconifyIconOffline; +const IconifyIconOffline = iconifyIconOffline /** 在线图标组件 */ -const IconifyIconOnline = iconifyIconOnline; +const IconifyIconOnline = iconifyIconOnline /** iconfont组件 */ -const FontIcon = fontIcon; +const FontIcon = fontIcon -export { IconifyIconOffline, IconifyIconOnline, FontIcon }; +export { IconifyIconOffline, IconifyIconOnline, FontIcon } diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts index 4f430a8..efd5239 100644 --- a/src/components/ReIcon/src/hooks.ts +++ b/src/components/ReIcon/src/hooks.ts @@ -1,6 +1,6 @@ -import { iconType } from "./types"; -import { h, defineComponent, Component } from "vue"; -import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index"; +import { iconType } from './types' +import { h, defineComponent, Component } from 'vue' +import { IconifyIconOnline, IconifyIconOffline, FontIcon } from '../index' /** * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标 @@ -11,51 +11,51 @@ import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index"; */ export function useRenderIcon(icon: any, attrs?: iconType): Component { // iconfont - const ifReg = /^IF-/; + const ifReg = /^IF-/ // typeof icon === "function" 属于SVG if (ifReg.test(icon)) { // iconfont - const name = icon.split(ifReg)[1]; + 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); + name.indexOf(' ') == -1 ? name.length : name.indexOf(' ') + ) + const iconType = name.slice(name.indexOf(' ') + 1, name.length) return defineComponent({ - name: "FontIcon", + name: 'FontIcon', render() { return h(FontIcon, { icon: iconName, iconType, ...attrs - }); + }) } - }); - } else if (typeof icon === "function" || typeof icon?.render === "function") { + }) + } else if (typeof icon === 'function' || typeof icon?.render === 'function') { // svg - return icon; - } else if (typeof icon === "object") { + return icon + } else if (typeof icon === 'object') { return defineComponent({ - name: "OfflineIcon", + name: 'OfflineIcon', render() { return h(IconifyIconOffline, { icon: icon, ...attrs - }); + }) } - }); + }) } else { // 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之 return defineComponent({ - name: "Icon", + name: 'Icon', render() { const IconifyIcon = - icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline; + icon && icon.includes(':') ? IconifyIconOnline : IconifyIconOffline return h(IconifyIcon, { icon: icon, ...attrs - }); + }) } - }); + }) } } diff --git a/src/components/ReIcon/src/iconfont.ts b/src/components/ReIcon/src/iconfont.ts index c110451..49f7ae8 100644 --- a/src/components/ReIcon/src/iconfont.ts +++ b/src/components/ReIcon/src/iconfont.ts @@ -1,48 +1,48 @@ -import { h, defineComponent } from "vue"; +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", + name: 'FontIcon', props: { icon: { type: String, - default: "" + default: '' } }, render() { - const attrs = this.$attrs; - if (Object.keys(attrs).includes("uni") || attrs?.iconType === "uni") { + const attrs = this.$attrs + if (Object.keys(attrs).includes('uni') || attrs?.iconType === 'uni') { return h( - "i", + 'i', { - class: "iconfont", + class: 'iconfont', ...attrs }, this.icon - ); + ) } else if ( - Object.keys(attrs).includes("svg") || - attrs?.iconType === "svg" + Object.keys(attrs).includes('svg') || + attrs?.iconType === 'svg' ) { return h( - "svg", + 'svg', { - class: "icon-svg", - "aria-hidden": true + class: 'icon-svg', + 'aria-hidden': true }, { default: () => [ - h("use", { - "xlink:href": `#${this.icon}` + h('use', { + 'xlink:href': `#${this.icon}` }) ] } - ); + ) } else { - return h("i", { + 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 06a2a7c..63890e6 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -1,9 +1,9 @@ -import { h, defineComponent } from "vue"; -import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline"; +import { h, defineComponent } from 'vue' +import { Icon as IconifyIcon, addIcon } from '@iconify/vue/dist/offline' // Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html export default defineComponent({ - name: "IconifyIconOffline", + name: 'IconifyIconOffline', components: { IconifyIcon }, props: { icon: { @@ -11,20 +11,20 @@ export default defineComponent({ } }, render() { - if (typeof this.icon === "object") addIcon(this.icon, this.icon); - const attrs = this.$attrs; + if (typeof this.icon === 'object') addIcon(this.icon, this.icon) + const attrs = this.$attrs return h( IconifyIcon, { icon: this.icon, style: attrs?.style - ? Object.assign(attrs.style, { outline: "none" }) - : { outline: "none" }, + ? Object.assign(attrs.style, { outline: 'none' }) + : { outline: 'none' }, ...attrs }, { default: () => [] } - ); + ) } -}); +}) diff --git a/src/components/ReIcon/src/iconifyIconOnline.ts b/src/components/ReIcon/src/iconifyIconOnline.ts index a5f5822..6adb2f4 100644 --- a/src/components/ReIcon/src/iconifyIconOnline.ts +++ b/src/components/ReIcon/src/iconifyIconOnline.ts @@ -1,30 +1,30 @@ -import { h, defineComponent } from "vue"; -import { Icon as IconifyIcon } from "@iconify/vue"; +import { h, defineComponent } from 'vue' +import { Icon as IconifyIcon } from '@iconify/vue' // Iconify Icon在Vue里在线使用（用于外网环境） export default defineComponent({ - name: "IconifyIconOnline", + name: 'IconifyIconOnline', components: { IconifyIcon }, props: { icon: { type: String, - default: "" + default: '' } }, render() { - const attrs = this.$attrs; + const attrs = this.$attrs return h( IconifyIcon, { icon: `${this.icon}`, style: attrs?.style - ? Object.assign(attrs.style, { outline: "none" }) - : { outline: "none" }, + ? Object.assign(attrs.style, { outline: 'none' }) + : { outline: 'none' }, ...attrs }, { default: () => [] } - ); + ) } -}); +}) diff --git a/src/components/ReIcon/src/offlineIcon.ts b/src/components/ReIcon/src/offlineIcon.ts index bb0e020..37ceb44 100644 --- a/src/components/ReIcon/src/offlineIcon.ts +++ b/src/components/ReIcon/src/offlineIcon.ts @@ -1,14 +1,26 @@ -import { addIcon } from "@iconify/vue/dist/offline"; +import { addIcon } from '@iconify/vue/dist/offline' /** * 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载 */ // 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标 -import HomeFilled from "@iconify-icons/ep/home-filled"; -import InformationLine from "@iconify-icons/ri/information-line"; -import Lollipop from "@iconify-icons/ep/lollipop"; +import homeSmileLine from '@iconify-icons/ri/home-smile-line' +import InformationLine from '@iconify-icons/ri/information-line' +import signalWifiErrorLine from '@iconify-icons/ri/signal-wifi-error-line' +import lineChartLine from '@iconify-icons/ri/line-chart-line' +import barChart2Line from '@iconify-icons/ri/bar-chart-2-line' +import volumeUpLine from '@iconify-icons/ri/volume-up-line' +import userFollowLine from '@iconify-icons/ri/user-follow-line' +import arrowUpCircleLine from '@iconify-icons/ri/arrow-up-circle-line' +import settings4Line from '@iconify-icons/ri/settings-4-line' -addIcon("homeFilled", HomeFilled); -addIcon("informationLine", InformationLine); -addIcon("lollipop", Lollipop); +addIcon('homeSmileLine', homeSmileLine) +addIcon('informationLine', InformationLine) +addIcon('signalWifiErrorLine', signalWifiErrorLine) +addIcon('lineChartLine', lineChartLine) +addIcon('barChart2Line', barChart2Line) +addIcon('volumeUpLine', volumeUpLine) +addIcon('userFollowLine', userFollowLine) +addIcon('arrowUpCircleLine', arrowUpCircleLine) +addIcon('settings4Line', settings4Line) diff --git a/src/components/ReIcon/src/types.ts b/src/components/ReIcon/src/types.ts index 8ae8a54..53b5930 100644 --- a/src/components/ReIcon/src/types.ts +++ b/src/components/ReIcon/src/types.ts @@ -1,19 +1,19 @@ export interface iconType { // iconify (https://docs.iconify.design/icon-components/vue/#properties) - inline?: boolean; - width?: string | number; - height?: string | number; - horizontalFlip?: boolean; - verticalFlip?: boolean; - flip?: string; - rotate?: number | string; - color?: string; - horizontalAlign?: boolean; - verticalAlign?: boolean; - align?: string; - onLoad?: Function; - includes?: Function; + inline?: boolean + width?: string | number + height?: string | number + horizontalFlip?: boolean + verticalFlip?: boolean + flip?: string + rotate?: number | string + color?: string + horizontalAlign?: boolean + verticalAlign?: boolean + align?: string + onLoad?: Function + includes?: Function // all icon - style?: object; + style?: object } diff --git a/src/config/index.ts b/src/config/index.ts index 9b0a372..cd1fe7f 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1,52 +1,52 @@ -import { App } from "vue"; -import axios from "axios"; +import { App } from 'vue' +import axios from 'axios' -let config: object = {}; -const { VITE_PUBLIC_PATH } = import.meta.env; +let config: object = {} +const { VITE_PUBLIC_PATH } = import.meta.env const setConfig = (cfg?: unknown) => { - config = Object.assign(config, cfg); -}; + config = Object.assign(config, cfg) +} const getConfig = (key?: string): ServerConfigs => { - if (typeof key === "string") { - const arr = key.split("."); + if (typeof key === 'string') { + const arr = key.split('.') if (arr && arr.length) { - let data = config; + let data = config arr.forEach(v => { - if (data && typeof data[v] !== "undefined") { - data = data[v]; + if (data && typeof data[v] !== 'undefined') { + data = data[v] } else { - data = null; + data = null } - }); - return data; + }) + return data } } - return config; -}; + return config +} /** 获取项目动态全局配置 */ export const getServerConfig = async (app: App): Promise => { - app.config.globalProperties.$config = getConfig(); + app.config.globalProperties.$config = getConfig() return axios({ - method: "get", + method: 'get', url: `${VITE_PUBLIC_PATH}serverConfig.json` }) .then(({ data: config }) => { - let $config = app.config.globalProperties.$config; + let $config = app.config.globalProperties.$config // 自动注入项目配置 - if (app && $config && typeof config === "object") { - $config = Object.assign($config, config); - app.config.globalProperties.$config = $config; + if (app && $config && typeof config === 'object') { + $config = Object.assign($config, config) + app.config.globalProperties.$config = $config // 设置全局配置 - setConfig($config); + setConfig($config) } - return $config; + return $config }) .catch(() => { - throw "请在public文件夹下添加serverConfig.json配置文件"; - }); -}; + throw '请在public文件夹下添加serverConfig.json配置文件' + }) +} -export { getConfig, setConfig }; +export { getConfig, setConfig } diff --git a/src/directives/auth/index.ts b/src/directives/auth/index.ts index 627ea89..6706530 100644 --- a/src/directives/auth/index.ts +++ b/src/directives/auth/index.ts @@ -1,13 +1,13 @@ -import { hasAuth } from "@/router/utils"; -import { Directive, type DirectiveBinding } from "vue"; +import { hasAuth } from '@/router/utils' +import { Directive, type DirectiveBinding } from 'vue' export const auth: Directive = { mounted(el: HTMLElement, binding: DirectiveBinding) { - const { value } = binding; + const { value } = binding if (value) { - !hasAuth(value) && el.parentNode?.removeChild(el); + !hasAuth(value) && el.parentNode?.removeChild(el) } else { - throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\""); + throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\"") } } -}; +} diff --git a/src/directives/elResizeDetector/index.ts b/src/directives/elResizeDetector/index.ts index af089be..2bb55e5 100644 --- a/src/directives/elResizeDetector/index.ts +++ b/src/directives/elResizeDetector/index.ts @@ -1,27 +1,27 @@ -import { Directive, type DirectiveBinding, type VNode } from "vue"; -import elementResizeDetectorMaker from "element-resize-detector"; -import type { Erd } from "element-resize-detector"; -import { emitter } from "@/utils/mitt"; +import { Directive, type DirectiveBinding, type VNode } from 'vue' +import elementResizeDetectorMaker from 'element-resize-detector' +import type { Erd } from 'element-resize-detector' +import { emitter } from '@/utils/mitt' const erd: Erd = elementResizeDetectorMaker({ - strategy: "scroll" -}); + strategy: 'scroll' +}) export const resize: Directive = { mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) { erd.listenTo(el, elem => { - const width = elem.offsetWidth; - const height = elem.offsetHeight; + const width = elem.offsetWidth + const height = elem.offsetHeight if (binding?.instance) { - emitter.emit("resize", { detail: { width, height } }); + emitter.emit('resize', { detail: { width, height } }) } else { vnode.el.dispatchEvent( - new CustomEvent("resize", { detail: { width, height } }) - ); + new CustomEvent('resize', { detail: { width, height } }) + ) } - }); + }) }, unmounted(el: HTMLElement) { - erd.uninstall(el); + erd.uninstall(el) } -}; +} diff --git a/src/directives/index.ts b/src/directives/index.ts index d6d6592..d732554 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -1,2 +1,2 @@ -export * from "./auth"; -export * from "./elResizeDetector"; +export * from './auth' +export * from './elResizeDetector' diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue index e9b5450..c28ae39 100644 --- a/src/layout/components/appMain.vue +++ b/src/layout/components/appMain.vue @@ -1,42 +1,42 @@