+
@@ -69,10 +63,9 @@ const getIconName = computed(() =>
diff --git a/src/components/LocaleDropdown/src/LocaleDropdown.vue b/src/components/LocaleDropdown/src/LocaleDropdown.vue
index 2f350fc..7090d3f 100644
--- a/src/components/LocaleDropdown/src/LocaleDropdown.vue
+++ b/src/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -10,7 +10,7 @@ const langMap = computed(() => localeStore.getLocaleMap)
const currentLang = computed(() => localeStore.getLocale)
-function setLang(lang: LocaleType) {
+const setLang = (lang: LocaleType) => {
if (lang === unref(currentLang).lang) return
// 需要重新加载页面让整个语言多初始化
window.location.reload()
@@ -24,13 +24,7 @@ function setLang(lang: LocaleType) {
-
+
diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
index bfceccf..539eefb 100644
--- a/src/components/Menu/src/Menu.vue
+++ b/src/components/Menu/src/Menu.vue
@@ -1,7 +1,6 @@
diff --git a/src/components/SizeDropdown/src/SizeDropdown.vue b/src/components/SizeDropdown/src/SizeDropdown.vue
index f4f8b6c..771cba2 100644
--- a/src/components/SizeDropdown/src/SizeDropdown.vue
+++ b/src/components/SizeDropdown/src/SizeDropdown.vue
@@ -9,7 +9,7 @@ const appStore = useAppStore()
const sizeMap = computed(() => appStore.sizeMap)
-function setSize(size: ElememtPlusSzie) {
+const setSize = (size: ElememtPlusSzie) => {
appStore.setSize(size)
}
diff --git a/src/components/TagsView/src/TagsView.vue b/src/components/TagsView/src/TagsView.vue
index 4ac587a..fedf38e 100644
--- a/src/components/TagsView/src/TagsView.vue
+++ b/src/components/TagsView/src/TagsView.vue
@@ -1,5 +1,5 @@
- tagsView
+ tagsView
diff --git a/src/components/ThemeSwitch/src/ThemeSwitch.vue b/src/components/ThemeSwitch/src/ThemeSwitch.vue
index 2376087..a0bbe8c 100644
--- a/src/components/ThemeSwitch/src/ThemeSwitch.vue
+++ b/src/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -2,7 +2,6 @@
import { ref } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { ElSwitch } from 'element-plus'
-import { useDesign } from '@/hooks/web/useDesign'
import { useIcon } from '@/hooks/web/useIcon'
const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
@@ -14,21 +13,17 @@ const appStore = useAppStore()
// 初始化获取是否是暗黑主题
const isDark = ref(appStore.getIsDark)
-const { getPrefixCls } = useDesign()
-
-const prefixCls = getPrefixCls('theme-switch')
-
// 设置switch的背景颜色
const blackColor = 'var(--el-color-black)'
-function themeChange(val: boolean) {
+const themeChange = (val: boolean) => {
appStore.setIsDark(val)
}
{
ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'),
type: 'warning'
})
- .then(() => {
- wsCache.clear()
- resetRouter() // 重置静态路由表
- replace('/login')
+ .then(async () => {
+ const res = await loginOutApi().catch(() => {})
+ if (res) {
+ wsCache.clear()
+ resetRouter() // 重置静态路由表
+ replace('/login')
+ }
})
.catch(() => {})
}
diff --git a/src/components/index.ts b/src/components/index.ts
index fe8b60c..4d030c3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,6 @@
import type { App } from 'vue'
import { Icon } from './Icon'
-export function setupGlobCom(app: App): void {
+export const setupGlobCom = (app: App): void => {
app.component('Icon', Icon)
}
diff --git a/src/config/app.ts b/src/config/app.ts
index adeed3f..6efa49d 100644
--- a/src/config/app.ts
+++ b/src/config/app.ts
@@ -24,6 +24,7 @@ export interface AppState {
isDark: boolean
size: ElememtPlusSzie
sizeMap: ElememtPlusSzie[]
+ mobile: boolean
}
export const appModules: AppState = {
@@ -45,5 +46,6 @@ export const appModules: AppState = {
showMenuTab: false, // 是否固定一级菜单
isDark: wsCache.get('isDark') || false, // 是否是暗黑模式
size: wsCache.get('default') || 'default', // 组件尺寸
- sizeMap: ['default', 'large', 'small']
+ sizeMap: ['default', 'large', 'small'],
+ mobile: false // 是否是移动端
}
diff --git a/src/hooks/web/useAxios.ts b/src/hooks/web/useAxios.ts
index 3151fb1..0afae36 100644
--- a/src/hooks/web/useAxios.ts
+++ b/src/hooks/web/useAxios.ts
@@ -6,8 +6,8 @@ import { config } from '@/config/axios/config'
const { default_headers } = config
-export function useAxios() {
- function request(option: AxiosConfig): AxiosPromise {
+export const useAxios = () => {
+ const request = (option: AxiosConfig): AxiosPromise => {
const { url, method, params, data, headersType, responseType } = option
return service({
url: url,
diff --git a/src/hooks/web/useCache.ts b/src/hooks/web/useCache.ts
index feaadf1..b405ef3 100644
--- a/src/hooks/web/useCache.ts
+++ b/src/hooks/web/useCache.ts
@@ -6,7 +6,7 @@ import WebStorageCache from 'web-storage-cache'
type CacheType = 'sessionStorage' | 'localStorage'
-export function useCache(type: CacheType = 'sessionStorage') {
+export const useCache = (type: CacheType = 'sessionStorage') => {
const wsCache: WebStorageCache = new WebStorageCache({
storage: type
})
diff --git a/src/hooks/web/useConfigGlobal.ts b/src/hooks/web/useConfigGlobal.ts
index 9c4a1f2..59007d3 100644
--- a/src/hooks/web/useConfigGlobal.ts
+++ b/src/hooks/web/useConfigGlobal.ts
@@ -1,6 +1,6 @@
import { inject } from 'vue'
-export function useConfigGlobal() {
+export const useConfigGlobal = () => {
const configGlobal = inject('configGlobal', {}) as ConfigGlobalTypes
return {
diff --git a/src/hooks/web/useDesign.ts b/src/hooks/web/useDesign.ts
index 871f696..1ec349f 100644
--- a/src/hooks/web/useDesign.ts
+++ b/src/hooks/web/useDesign.ts
@@ -1,13 +1,13 @@
import variables from '@/styles/variables.module.less'
-export function useDesign() {
+export const useDesign = () => {
const lessVariables = variables
/**
* @param scope 类名
* @returns 返回空间名-类名
*/
- function getPrefixCls(scope: string) {
+ const getPrefixCls = (scope: string) => {
return `${lessVariables.namespace}-${scope}`
}
diff --git a/src/hooks/web/useForm.ts b/src/hooks/web/useForm.ts
index 56982be..e104a49 100644
--- a/src/hooks/web/useForm.ts
+++ b/src/hooks/web/useForm.ts
@@ -2,7 +2,7 @@ import type { Form, FormExpose } from '@/components/Form'
import type { ElForm } from 'element-plus'
import { ref, unref, nextTick } from 'vue'
-export function useForm() {
+export const useForm = () => {
// From实例
const formRef = ref()
@@ -13,12 +13,12 @@ export function useForm() {
* @param ref Form实例
* @param elRef ElForm实例
*/
- function register(ref: typeof Form & FormExpose, elRef: ComponentRef) {
+ const register = (ref: typeof Form & FormExpose, elRef: ComponentRef) => {
formRef.value = ref
elFormRef.value = elRef
}
- async function getForm() {
+ const getForm = async () => {
const form = unref(formRef)
if (!form) {
console.error('The form is not registered. Please use the register method to register')
diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts
index f700881..8b6e765 100644
--- a/src/hooks/web/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@@ -11,7 +11,7 @@ type I18nGlobalTranslation = {
type I18nTranslationRestParameters = [string, any]
-function getKey(namespace: string | undefined, key: string) {
+const getKey = (namespace: string | undefined, key: string) => {
if (!namespace) {
return key
}
@@ -21,9 +21,11 @@ function getKey(namespace: string | undefined, key: string) {
return `${namespace}.${key}`
}
-export function useI18n(namespace?: string): {
+export const useI18n = (
+ namespace?: string
+): {
t: I18nGlobalTranslation
-} {
+} => {
const normalFn = {
t: (key: string) => {
return getKey(namespace, key)
diff --git a/src/hooks/web/useIcon.ts b/src/hooks/web/useIcon.ts
index 58912ca..b9a5ccb 100644
--- a/src/hooks/web/useIcon.ts
+++ b/src/hooks/web/useIcon.ts
@@ -2,6 +2,6 @@ import { h } from 'vue'
import type { VNode } from 'vue'
import { Icon } from '@/components/Icon'
-export function useIcon(props: IconTypes): VNode {
+export const useIcon = (props: IconTypes): VNode => {
return h(Icon, props)
}
diff --git a/src/hooks/web/useLocale.ts b/src/hooks/web/useLocale.ts
index 85ae284..44e73d7 100644
--- a/src/hooks/web/useLocale.ts
+++ b/src/hooks/web/useLocale.ts
@@ -2,7 +2,7 @@ import { i18n } from '@/plugins/vueI18n'
import { useLocaleStoreWithOut } from '@/store/modules/locale'
import { setHtmlPageLang } from '@/plugins/vueI18n/helper'
-function setI18nLanguage(locale: LocaleType) {
+const setI18nLanguage = (locale: LocaleType) => {
const localeStore = useLocaleStoreWithOut()
if (i18n.mode === 'legacy') {
@@ -16,10 +16,10 @@ function setI18nLanguage(locale: LocaleType) {
setHtmlPageLang(locale)
}
-export function useLocale() {
+export const useLocale = () => {
// Switching the language will change the locale of useI18n
// And submit to configuration modification
- async function changeLocale(locale: LocaleType) {
+ const changeLocale = async (locale: LocaleType) => {
const globalI18n = i18n.global
const langModule = await import(`../../locales/${locale}.ts`)
diff --git a/src/hooks/web/useNProgress.ts b/src/hooks/web/useNProgress.ts
index 10d9a21..28990e7 100644
--- a/src/hooks/web/useNProgress.ts
+++ b/src/hooks/web/useNProgress.ts
@@ -6,11 +6,10 @@ import { useCssVar } from '@vueuse/core'
const primaryColor = useCssVar('--el-color-primary', document.documentElement)
-export function useNProgress() {
+export const useNProgress = () => {
NProgress.configure({ showSpinner: false } as NProgressOptions)
- initColor()
- async function initColor() {
+ const initColor = async () => {
await nextTick()
const bar = document.getElementById('nprogress')?.getElementsByClassName('bar')[0] as ElRef
if (bar) {
@@ -18,11 +17,13 @@ export function useNProgress() {
}
}
- function start() {
+ initColor()
+
+ const start = () => {
NProgress.start()
}
- function done() {
+ const done = () => {
NProgress.done()
}
diff --git a/src/hooks/web/useTitle.ts b/src/hooks/web/useTitle.ts
index cc21aeb..d0eb188 100644
--- a/src/hooks/web/useTitle.ts
+++ b/src/hooks/web/useTitle.ts
@@ -5,7 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n'
const appStore = useAppStoreWithOut()
-export function useTitle(newTitle?: string) {
+export const useTitle = (newTitle?: string) => {
const { t } = useI18n()
const title = ref(
newTitle ? `${appStore.getTitle} - ${t(newTitle as string)}` : appStore.getTitle
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 7e66c54..23eb7da 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -3,13 +3,13 @@ import { computed, defineComponent, KeepAlive } from 'vue'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useAppStore } from '@/store/modules/app'
import { Menu } from '@/components/Menu'
-import { useDesign } from '@/hooks/web/useDesign'
import { Collapse } from '@/components/Collapse'
import { LocaleDropdown } from '@/components/LocaleDropdown'
import { SizeDropdown } from '@/components/SizeDropdown'
import { UserInfo } from '@/components/UserInfo'
import { Screenfull } from '@/components/Screenfull'
-// import { TagsView } from '@/components/TagsView'
+import { Breadcrumb } from '@/components/Breadcrumb'
+import { TagsView } from '@/components/TagsView'
const tagsViewStore = useTagsViewStore()
@@ -19,40 +19,50 @@ const getCaches = computed((): string[] => {
const appStore = useAppStore()
+const mobile = computed(() => appStore.getMobile)
+
+const collapse = computed(() => appStore.getCollapse)
+
const classSuffix = computed(() => appStore.getLayout)
-const { getPrefixCls } = useDesign()
-
-const perFixCls = getPrefixCls('app')
+const handleClickOutside = () => {
+ appStore.setCollapse(true)
+}
export default defineComponent({
name: 'Layout',
setup() {
return () => (
-
+
+ {mobile.value && !collapse.value ? (
+
+ ) : undefined}
+
@@ -61,6 +71,9 @@ export default defineComponent({
+
+
+
{{
default: ({ Component, route }) => (
@@ -97,7 +110,8 @@ export default defineComponent({
&-right {
transition: left var(--transition-time-02);
- &__tool {
+ &__tool,
+ &__tags {
&::after {
position: absolute;
bottom: 0;
diff --git a/src/main.ts b/src/main.ts
index f0582b7..e366958 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -31,7 +31,7 @@ import App from './App.vue'
import './permission'
-async function setupAll() {
+const setupAll = async () => {
const app = createApp(App)
await setupI18n(app)
diff --git a/src/plugins/elementPlus/index.ts b/src/plugins/elementPlus/index.ts
index 127cefe..4628b66 100644
--- a/src/plugins/elementPlus/index.ts
+++ b/src/plugins/elementPlus/index.ts
@@ -7,7 +7,7 @@ const plugins = [ElLoading]
const components = [ElScrollbar]
-export function setupElementPlus(app: App) {
+export const setupElementPlus = (app: App) => {
plugins.forEach((plugin) => {
app.use(plugin)
})
diff --git a/src/plugins/vueI18n/helper.ts b/src/plugins/vueI18n/helper.ts
index 4abe78b..da6bc8c 100644
--- a/src/plugins/vueI18n/helper.ts
+++ b/src/plugins/vueI18n/helper.ts
@@ -1,3 +1,3 @@
-export function setHtmlPageLang(locale: LocaleType) {
+export const setHtmlPageLang = (locale: LocaleType) => {
document.querySelector('html')?.setAttribute('lang', locale)
}
diff --git a/src/plugins/vueI18n/index.ts b/src/plugins/vueI18n/index.ts
index f0ffbdc..43388d8 100644
--- a/src/plugins/vueI18n/index.ts
+++ b/src/plugins/vueI18n/index.ts
@@ -6,7 +6,7 @@ import { setHtmlPageLang } from './helper'
export let i18n: ReturnType
-async function createI18nOptions(): Promise {
+const createI18nOptions = async (): Promise => {
const localeStore = useLocaleStoreWithOut()
const locale = localeStore.getLocale
const localeMap = localeStore.getLocaleMap
@@ -35,7 +35,7 @@ async function createI18nOptions(): Promise {
}
}
-export async function setupI18n(app: App) {
+export const setupI18n = async (app: App) => {
const options = await createI18nOptions()
i18n = createI18n(options) as I18n
app.use(i18n)
diff --git a/src/router/index.ts b/src/router/index.ts
index aa574b1..9da8fb6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -121,7 +121,7 @@ const router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 })
})
-export function resetRouter(): void {
+export const resetRouter = (): void => {
const resetWhiteNameList = ['RedirectRoot', 'Redirect', 'Login', 'Root', 'Dashboard', 'Page404']
router.getRoutes().forEach((route) => {
const { name } = route
@@ -131,7 +131,7 @@ export function resetRouter(): void {
})
}
-export function setupRouter(app: App) {
+export const setupRouter = (app: App) => {
app.use(router)
}
diff --git a/src/store/index.ts b/src/store/index.ts
index 4d393cb..65964ea 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -3,7 +3,7 @@ import { createPinia } from 'pinia'
const store = createPinia()
-export function setupStore(app: App) {
+export const setupStore = (app: App) => {
app.use(store)
}
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 4f78fc8..9c75f55 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -66,6 +66,9 @@ export const useAppStore = defineStore({
},
getSizeMap(): ElememtPlusSzie[] {
return this.sizeMap
+ },
+ getMobile(): boolean {
+ return this.mobile
}
},
actions: {
@@ -128,10 +131,13 @@ export const useAppStore = defineStore({
setSize(size: ElememtPlusSzie) {
this.size = size
wsCache.set('size', this.size)
+ },
+ setMobile(mobile: boolean) {
+ this.mobile = mobile
}
}
})
-export function useAppStoreWithOut() {
+export const useAppStoreWithOut = () => {
return useAppStore(store)
}
diff --git a/src/store/modules/locale.ts b/src/store/modules/locale.ts
index 2ca8029..8a2261c 100644
--- a/src/store/modules/locale.ts
+++ b/src/store/modules/locale.ts
@@ -27,6 +27,6 @@ export const useLocaleStore = defineStore({
}
})
-export function useLocaleStoreWithOut() {
+export const useLocaleStoreWithOut = () => {
return useLocaleStore(store)
}
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index a6a29f8..fec134a 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -91,6 +91,6 @@ export const usePermissionStore = defineStore({
}
})
-export function usePermissionStoreWithOut() {
+export const usePermissionStoreWithOut = () => {
return usePermissionStore(store)
}
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index 24ea0c1..24bbcbb 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -170,6 +170,6 @@ export const useTagsViewStore = defineStore({
}
})
-export function useTagsViewStoreWithOut() {
+export const useTagsViewStoreWithOut = () => {
return useTagsViewStore(store)
}
diff --git a/src/utils/color.ts b/src/utils/color.ts
index bdd8ab8..64e2006 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -5,7 +5,7 @@
* @param String color 十六进制颜色值
* @return Boolean
*/
-export function isHexColor(color: string) {
+export const isHexColor = (color: string) => {
const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/
return reg.test(color)
}
@@ -19,7 +19,7 @@ export function isHexColor(color: string) {
* @param g
* @param b
*/
-export function rgbToHex(r: number, g: number, b: number) {
+export const rgbToHex = (r: number, g: number, b: number) => {
// tslint:disable-next-line:no-bitwise
const hex = ((r << 16) | (g << 8) | b).toString(16)
return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
@@ -30,7 +30,7 @@ export function rgbToHex(r: number, g: number, b: number) {
* @param {string} hex The color to transform
* @returns The RGB representation of the passed color
*/
-export function hexToRGB(hex: string) {
+export const hexToRGB = (hex: string) => {
let sHex = hex.toLowerCase()
if (isHexColor(hex)) {
if (sHex.length === 4) {
@@ -49,7 +49,7 @@ export function hexToRGB(hex: string) {
return sHex
}
-export function colorIsDark(color: string) {
+export const colorIsDark = (color: string) => {
if (!isHexColor(color)) return
const [r, g, b] = hexToRGB(color)
.replace(/(?:\(|\)|rgb|RGB)*/g, '')
@@ -64,7 +64,7 @@ export function colorIsDark(color: string) {
* @param {number} amount The amount to change the color by
* @returns {string} The HEX representation of the processed color
*/
-export function darken(color: string, amount: number) {
+export const darken = (color: string, amount: number) => {
color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
amount = Math.trunc((255 * amount) / 100)
return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
@@ -79,7 +79,7 @@ export function darken(color: string, amount: number) {
* @param {number} amount The amount to change the color by
* @returns {string} The processed color represented as HEX
*/
-export function lighten(color: string, amount: number) {
+export const lighten = (color: string, amount: number) => {
color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
amount = Math.trunc((255 * amount) / 100)
return `#${addLight(color.substring(0, 2), amount)}${addLight(
@@ -95,7 +95,7 @@ export function lighten(color: string, amount: number) {
* @param {number} amount The amount to change the color by
* @returns {string} The processed part of the color
*/
-function addLight(color: string, amount: number) {
+const addLight = (color: string, amount: number) => {
const cc = parseInt(color, 16) + amount
const c = cc > 255 ? 255 : cc
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
@@ -107,7 +107,7 @@ function addLight(color: string, amount: number) {
* @param {number} g green
* @param {number} b blue
*/
-function luminanace(r: number, g: number, b: number) {
+const luminanace = (r: number, g: number, b: number) => {
const a = [r, g, b].map((v) => {
v /= 255
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
@@ -120,7 +120,7 @@ function luminanace(r: number, g: number, b: number) {
* @param {string} rgb1 rgb color 1
* @param {string} rgb2 rgb color 2
*/
-function contrast(rgb1: string[], rgb2: number[]) {
+const contrast = (rgb1: string[], rgb2: number[]) => {
return (
(luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
(luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05)
@@ -131,7 +131,7 @@ function contrast(rgb1: string[], rgb2: number[]) {
* Determines what the best text color is (black or white) based con the contrast with the background
* @param hexColor - Last selected color by the user
*/
-export function calculateBestTextColor(hexColor: string) {
+export const calculateBestTextColor = (hexColor: string) => {
const rgbColor = hexToRGB(hexColor.substring(1))
const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0])
@@ -144,7 +144,7 @@ export function calculateBestTextColor(hexColor: string) {
* @param {number} amount The amount to change the color by
* @returns {string} The processed part of the color
*/
-function subtractLight(color: string, amount: number) {
+const subtractLight = (color: string, amount: number) => {
const cc = parseInt(color, 16) - amount
const c = cc < 0 ? 0 : cc
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 61cbd0b..a6049bf 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -21,7 +21,7 @@ export const withInstall = (component: T, alias?: string) => {
* @param str 需要转下划线的驼峰字符串
* @returns 字符串下划线
*/
-export function humpToUnderline(str: string): string {
+export const humpToUnderline = (str: string): string => {
return str.replace(/([A-Z])/g, '-$1').toLowerCase()
}
@@ -29,12 +29,12 @@ export function humpToUnderline(str: string): string {
* @param str 需要转驼峰的下划线字符串
* @returns 字符串驼峰
*/
-export function underlineToHump(str: string): string {
- return str.replace(/\-(\w)/g, function (_, letter: string) {
+export const underlineToHump = (str: string): string => {
+ return str.replace(/\-(\w)/g, (_, letter: string) => {
return letter.toUpperCase()
})
}
-export function setCssVar(prop: string, val: any, dom = document.documentElement) {
+export const setCssVar = (prop: string, val: any, dom = document.documentElement) => {
dom.style.setProperty(prop, val)
}
diff --git a/src/utils/is.ts b/src/utils/is.ts
index a509bc4..3752985 100644
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -2,23 +2,23 @@
const toString = Object.prototype.toString
-export function is(val: unknown, type: string) {
+export const is = (val: unknown, type: string) => {
return toString.call(val) === `[object ${type}]`
}
-export function isDef(val?: T): val is T {
+export const isDef = (val?: T): val is T => {
return typeof val !== 'undefined'
}
-export function isUnDef(val?: T): val is T {
+export const isUnDef = (val?: T): val is T => {
return !isDef(val)
}
-export function isObject(val: any): val is Record {
+export const isObject = (val: any): val is Record => {
return val !== null && is(val, 'Object')
}
-export function isEmpty(val: T): val is T {
+export const isEmpty = (val: T): val is T => {
if (isArray(val) || isString(val)) {
return val.length === 0
}
@@ -34,59 +34,59 @@ export function isEmpty(val: T): val is T {
return false
}
-export function isDate(val: unknown): val is Date {
+export const isDate = (val: unknown): val is Date => {
return is(val, 'Date')
}
-export function isNull(val: unknown): val is null {
+export const isNull = (val: unknown): val is null => {
return val === null
}
-export function isNullAndUnDef(val: unknown): val is null | undefined {
+export const isNullAndUnDef = (val: unknown): val is null | undefined => {
return isUnDef(val) && isNull(val)
}
-export function isNullOrUnDef(val: unknown): val is null | undefined {
+export const isNullOrUnDef = (val: unknown): val is null | undefined => {
return isUnDef(val) || isNull(val)
}
-export function isNumber(val: unknown): val is number {
+export const isNumber = (val: unknown): val is number => {
return is(val, 'Number')
}
-export function isPromise(val: unknown): val is Promise {
+export const isPromise = (val: unknown): val is Promise => {
return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
-export function isString(val: unknown): val is string {
+export const isString = (val: unknown): val is string => {
return is(val, 'String')
}
-export function isFunction(val: unknown): val is Function {
+export const isFunction = (val: unknown): val is Function => {
return typeof val === 'function'
}
-export function isBoolean(val: unknown): val is boolean {
+export const isBoolean = (val: unknown): val is boolean => {
return is(val, 'Boolean')
}
-export function isRegExp(val: unknown): val is RegExp {
+export const isRegExp = (val: unknown): val is RegExp => {
return is(val, 'RegExp')
}
-export function isArray(val: any): val is Array {
+export const isArray = (val: any): val is Array => {
return val && Array.isArray(val)
}
-export function isWindow(val: any): val is Window {
+export const isWindow = (val: any): val is Window => {
return typeof window !== 'undefined' && is(val, 'Window')
}
-export function isElement(val: unknown): val is Element {
+export const isElement = (val: unknown): val is Element => {
return isObject(val) && !!val.tagName
}
-export function isMap(val: unknown): val is Map {
+export const isMap = (val: unknown): val is Map => {
return is(val, 'Map')
}
@@ -94,12 +94,12 @@ export const isServer = typeof window === 'undefined'
export const isClient = !isServer
-export function isUrl(path: string): boolean {
+export const isUrl = (path: string): boolean => {
const reg =
/(((^https?:(?:\/\/)?)(?:[-:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&%@.\w_]*)#?(?:[\w]*))?)$/
return reg.test(path)
}
-export function isDark(): boolean {
+export const isDark = (): boolean => {
return window.matchMedia('(prefers-color-scheme: dark)').matches
}
diff --git a/src/utils/routerHelper.ts b/src/utils/routerHelper.ts
index f64560b..ddb399b 100644
--- a/src/utils/routerHelper.ts
+++ b/src/utils/routerHelper.ts
@@ -1,5 +1,5 @@
import { createRouter, createWebHashHistory } from 'vue-router'
-import type { Router, RouteLocationNormalized, RouteRecordNormalized } from 'vue-router'
+import type { Router, RouteLocationNormalized, RouteRecordNormalized, RouteMeta } from 'vue-router'
import { isUrl } from '@/utils/is'
import { useCache } from '@/hooks/web/useCache'
import { useAppStoreWithOut } from '@/store/modules/app'
@@ -23,7 +23,7 @@ export const getParentLayout = () => {
})
}
-export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormalized {
+export const getRawRoute = (route: RouteLocationNormalized): RouteLocationNormalized => {
if (!route) return route
const { matched, ...opt } = route
return {
@@ -39,15 +39,16 @@ export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormal
}
// 前端控制路由生成
-export function generateRoutesFn1(
+export const generateRoutesFn1 = (
routes: AppRouteRecordRaw[],
basePath = '/'
-): AppRouteRecordRaw[] {
+): AppRouteRecordRaw[] => {
const res: AppRouteRecordRaw[] = []
for (const route of routes) {
+ const meta = route.meta as RouteMeta
// skip some route
- if (route.meta && route.meta.hidden && !route.meta.showMainRoute) {
+ if (meta.hidden && !meta.showMainRoute) {
continue
}
@@ -55,7 +56,7 @@ export function generateRoutesFn1(
let onlyOneChild: Nullable = null
- if (route.children && route.children.length === 1 && !route.meta.alwaysShow) {
+ if (route.children && route.children.length === 1 && !meta.alwaysShow) {
onlyOneChild = (
isUrl(route.children[0].path)
? route.children[0].path
@@ -72,7 +73,7 @@ export function generateRoutesFn1(
data = Object.assign({}, route)
} else {
const routePath = pathResolve(basePath, onlyOneChild || route.path)
- if (routePath === item.path || (route.meta && route.meta.followRoute === item.path)) {
+ if (routePath === item.path || meta.followRoute === item.path) {
data = Object.assign({}, route)
}
}
@@ -90,7 +91,7 @@ export function generateRoutesFn1(
}
// 后端控制路由生成
-export function generateRoutesFn2(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
+export const generateRoutesFn2 = (routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] => {
const res: AppRouteRecordRaw[] = []
for (const route of routes) {
@@ -121,13 +122,13 @@ export function generateRoutesFn2(routes: AppRouteRecordRaw[]): AppRouteRecordRa
return res
}
-export function pathResolve(parentPath: string, path: string) {
+export const pathResolve = (parentPath: string, path: string) => {
const childPath = path.startsWith('/') || !path ? path : `/${path}`
return `${parentPath}${childPath}`
}
// 路由降级
-export function flatMultiLevelRoutes(routes: AppRouteRecordRaw[]) {
+export const flatMultiLevelRoutes = (routes: AppRouteRecordRaw[]) => {
const modules: AppRouteRecordRaw[] = cloneDeep(routes)
for (let index = 0; index < modules.length; index++) {
const route = modules[index]
@@ -140,7 +141,7 @@ export function flatMultiLevelRoutes(routes: AppRouteRecordRaw[]) {
}
// 层级是否大于2
-function isMultipleRoute(route: AppRouteRecordRaw) {
+const isMultipleRoute = (route: AppRouteRecordRaw) => {
if (!route || !Reflect.has(route, 'children') || !route.children?.length) {
return false
}
@@ -159,7 +160,7 @@ function isMultipleRoute(route: AppRouteRecordRaw) {
}
// 生成二级路由
-function promoteRouteLevel(route: AppRouteRecordRaw) {
+const promoteRouteLevel = (route: AppRouteRecordRaw) => {
let router: Router | null = createRouter({
routes: [route as unknown as RouteRecordNormalized],
history: createWebHashHistory()
@@ -173,11 +174,11 @@ function promoteRouteLevel(route: AppRouteRecordRaw) {
}
// 添加所有子菜单
-function addToChildren(
+const addToChildren = (
routes: RouteRecordNormalized[],
children: AppRouteRecordRaw[],
routeModule: AppRouteRecordRaw
-) {
+) => {
for (let index = 0; index < children.length; index++) {
const child = children[index]
const route = routes.find((item) => item.name === child.name)
diff --git a/src/utils/tree.ts b/src/utils/tree.ts
new file mode 100644
index 0000000..b2f11fc
--- /dev/null
+++ b/src/utils/tree.ts
@@ -0,0 +1,207 @@
+interface TreeHelperConfig {
+ id: string
+ children: string
+ pid: string
+}
+const DEFAULT_CONFIG: TreeHelperConfig = {
+ id: 'id',
+ children: 'children',
+ pid: 'pid'
+}
+
+const getConfig = (config: Partial) => Object.assign({}, DEFAULT_CONFIG, config)
+
+// tree from list
+export const listToTree = (list: any[], config: Partial = {}): T[] => {
+ const conf = getConfig(config) as TreeHelperConfig
+ const nodeMap = new Map()
+ const result: T[] = []
+ const { id, children, pid } = conf
+
+ for (const node of list) {
+ node[children] = node[children] || []
+ nodeMap.set(node[id], node)
+ }
+ for (const node of list) {
+ const parent = nodeMap.get(node[pid])
+ ;(parent ? parent.children : result).push(node)
+ }
+ return result
+}
+
+export const treeToList = (tree: any, config: Partial = {}): T => {
+ config = getConfig(config)
+ const { children } = config
+ const result: any = [...tree]
+ for (let i = 0; i < result.length; i++) {
+ if (!result[i][children!]) continue
+ result.splice(i + 1, 0, ...result[i][children!])
+ }
+ return result
+}
+
+export const findNode = (
+ tree: any,
+ func: Fn,
+ config: Partial = {}
+): T | null => {
+ config = getConfig(config)
+ const { children } = config
+ const list = [...tree]
+ for (const node of list) {
+ if (func(node)) return node
+ node[children!] && list.push(...node[children!])
+ }
+ return null
+}
+
+export const findNodeAll = (
+ tree: any,
+ func: Fn,
+ config: Partial = {}
+): T[] => {
+ config = getConfig(config)
+ const { children } = config
+ const list = [...tree]
+ const result: T[] = []
+ for (const node of list) {
+ func(node) && result.push(node)
+ node[children!] && list.push(...node[children!])
+ }
+ return result
+}
+
+export const findPath = (
+ tree: any,
+ func: Fn,
+ config: Partial = {}
+): T | T[] | null => {
+ config = getConfig(config)
+ const path: T[] = []
+ const list = [...tree]
+ const visitedSet = new Set()
+ const { children } = config
+ while (list.length) {
+ const node = list[0]
+ if (visitedSet.has(node)) {
+ path.pop()
+ list.shift()
+ } else {
+ visitedSet.add(node)
+ node[children!] && list.unshift(...node[children!])
+ path.push(node)
+ if (func(node)) {
+ return path
+ }
+ }
+ }
+ return null
+}
+
+export const findPathAll = (tree: any, func: Fn, config: Partial = {}) => {
+ config = getConfig(config)
+ const path: any[] = []
+ const list = [...tree]
+ const result: any[] = []
+ const visitedSet = new Set(),
+ { children } = config
+ while (list.length) {
+ const node = list[0]
+ if (visitedSet.has(node)) {
+ path.pop()
+ list.shift()
+ } else {
+ visitedSet.add(node)
+ node[children!] && list.unshift(...node[children!])
+ path.push(node)
+ func(node) && result.push([...path])
+ }
+ }
+ return result
+}
+
+export const filter = (
+ tree: T[],
+ func: (n: T) => boolean,
+ config: Partial = {}
+): T[] => {
+ config = getConfig(config)
+ const children = config.children as string
+ function listFilter(list: T[]) {
+ return list
+ .map((node: any) => ({ ...node }))
+ .filter((node) => {
+ node[children] = node[children] && listFilter(node[children])
+ return func(node) || (node[children] && node[children].length)
+ })
+ }
+ return listFilter(tree)
+}
+
+export const forEach = (
+ tree: T[],
+ func: (n: T) => any,
+ config: Partial = {}
+): void => {
+ config = getConfig(config)
+ const list: any[] = [...tree]
+ const { children } = config
+ for (let i = 0; i < list.length; i++) {
+ //func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+ if (func(list[i])) {
+ return
+ }
+ children && list[i][children] && list.splice(i + 1, 0, ...list[i][children])
+ }
+}
+
+/**
+ * @description: Extract tree specified structure
+ */
+export const treeMap = (
+ treeData: T[],
+ opt: { children?: string; conversion: Fn }
+): T[] => {
+ return treeData.map((item) => treeMapEach(item, opt))
+}
+
+/**
+ * @description: Extract tree specified structure
+ */
+export const treeMapEach = (
+ data: any,
+ { children = 'children', conversion }: { children?: string; conversion: Fn }
+) => {
+ const haveChildren = Array.isArray(data[children]) && data[children].length > 0
+ const conversionData = conversion(data) || {}
+ if (haveChildren) {
+ return {
+ ...conversionData,
+ [children]: data[children].map((i: number) =>
+ treeMapEach(i, {
+ children,
+ conversion
+ })
+ )
+ }
+ } else {
+ return {
+ ...conversionData
+ }
+ }
+}
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
+ treeDatas.forEach((element) => {
+ const newNode = callBack(element, parentNode) || element
+ if (element.children) {
+ eachTree(element.children, callBack, newNode)
+ }
+ })
+}
diff --git a/src/utils/tsxHelper.ts b/src/utils/tsxHelper.ts
index 399f6ee..6087fa3 100644
--- a/src/utils/tsxHelper.ts
+++ b/src/utils/tsxHelper.ts
@@ -1,7 +1,7 @@
import { Slots } from 'vue'
import { isFunction } from '@/utils/is'
-export function getSlot(slots: Slots, slot = 'default', data?: Recordable) {
+export const getSlot = (slots: Slots, slot = 'default', data?: Recordable) => {
// Reflect.has 判断一个对象是否存在某个属性
if (!slots || !Reflect.has(slots, slot)) {
return null
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index ce6dfae..a37ced1 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -111,7 +111,7 @@ watch(
)
// 登录
-async function signIn() {
+const signIn = async () => {
const formRef = unref(elFormRef)
const validate = await formRef?.validate()?.catch(() => {})
if (validate) {