新增
This commit is contained in:
Your Name
@@ -0,0 +1,53 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
import { getConfig } from '@/api/app'
|
||||
|
||||
interface AppSate {
|
||||
config: Record<string, any>
|
||||
isMobile: boolean
|
||||
isCollapsed: boolean
|
||||
isRouteShow: boolean
|
||||
}
|
||||
|
||||
const useAppStore = defineStore({
|
||||
id: 'app',
|
||||
state: (): AppSate => {
|
||||
return {
|
||||
config: {},
|
||||
isMobile: true,
|
||||
isCollapsed: false,
|
||||
isRouteShow: true
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
getImageUrl(url: string) {
|
||||
return url.indexOf('http') ? `${this.config.oss_domain}${url}` : url
|
||||
},
|
||||
getConfig() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getConfig()
|
||||
.then((data) => {
|
||||
this.config = data
|
||||
resolve(data)
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
setMobile(value: boolean) {
|
||||
this.isMobile = value
|
||||
},
|
||||
toggleCollapsed(toggle?: boolean) {
|
||||
this.isCollapsed = toggle ?? !this.isCollapsed
|
||||
},
|
||||
refreshView() {
|
||||
this.isRouteShow = false
|
||||
nextTick(() => {
|
||||
this.isRouteShow = true
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default useAppStore
|
||||
@@ -0,0 +1,169 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import type {
|
||||
LocationQuery,
|
||||
RouteLocationNormalized,
|
||||
RouteParamsRaw,
|
||||
Router,
|
||||
RouteRecordName
|
||||
} from 'vue-router'
|
||||
|
||||
import { PageEnum } from '@/enums/pageEnum'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
|
||||
interface TabItem {
|
||||
name: RouteRecordName
|
||||
fullPath: string
|
||||
path: string
|
||||
title?: string
|
||||
query?: LocationQuery
|
||||
params?: RouteParamsRaw
|
||||
}
|
||||
|
||||
interface TabsSate {
|
||||
cacheTabList: Set<string>
|
||||
tabList: TabItem[]
|
||||
tasMap: Record<string, TabItem>
|
||||
indexRouteName: RouteRecordName
|
||||
}
|
||||
|
||||
const getHasTabIndex = (fullPath: string, tabList: TabItem[]) => {
|
||||
return tabList.findIndex((item) => item.fullPath == fullPath)
|
||||
}
|
||||
|
||||
const isCannotAddRoute = (route: RouteLocationNormalized, router: Router) => {
|
||||
const { path, meta, name } = route
|
||||
if (!path || isExternal(path)) return true
|
||||
if (meta?.hideTab) return true
|
||||
if (!router.hasRoute(name!)) return true
|
||||
if (([PageEnum.LOGIN, PageEnum.ERROR_403] as string[]).includes(path)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const findTabsIndex = (fullPath: string, tabList: TabItem[]) => {
|
||||
return tabList.findIndex((item) => item.fullPath === fullPath)
|
||||
}
|
||||
|
||||
const getComponentName = (route: RouteLocationNormalized) => {
|
||||
return route.matched.at(-1)?.components?.default?.name
|
||||
}
|
||||
|
||||
export const getRouteParams = (tabItem: TabItem) => {
|
||||
const { params, path, query } = tabItem
|
||||
return {
|
||||
params: params || {},
|
||||
path,
|
||||
query: query || {}
|
||||
}
|
||||
}
|
||||
|
||||
const useTabsStore = defineStore({
|
||||
id: 'tabs',
|
||||
state: (): TabsSate => ({
|
||||
cacheTabList: new Set(),
|
||||
tabList: [],
|
||||
tasMap: {},
|
||||
indexRouteName: ''
|
||||
}),
|
||||
getters: {
|
||||
getTabList(): TabItem[] {
|
||||
return this.tabList
|
||||
},
|
||||
getCacheTabList(): string[] {
|
||||
return Array.from(this.cacheTabList)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setRouteName(name: RouteRecordName) {
|
||||
this.indexRouteName = name
|
||||
},
|
||||
addCache(componentName?: string) {
|
||||
if (componentName) this.cacheTabList.add(componentName)
|
||||
},
|
||||
removeCache(componentName?: string) {
|
||||
if (componentName && this.cacheTabList.has(componentName)) {
|
||||
this.cacheTabList.delete(componentName)
|
||||
}
|
||||
},
|
||||
clearCache() {
|
||||
this.cacheTabList.clear()
|
||||
},
|
||||
resetState() {
|
||||
this.cacheTabList = new Set()
|
||||
this.tabList = []
|
||||
this.tasMap = {}
|
||||
this.indexRouteName = ''
|
||||
},
|
||||
addTab(router: Router) {
|
||||
const route = unref(router.currentRoute)
|
||||
const { name, query, meta, params, fullPath, path } = route
|
||||
if (isCannotAddRoute(route, router)) return
|
||||
const hasTabIndex = getHasTabIndex(fullPath!, this.tabList)
|
||||
const componentName = getComponentName(route)
|
||||
const tabItem = {
|
||||
name: name!,
|
||||
path,
|
||||
fullPath,
|
||||
title: meta?.title,
|
||||
query,
|
||||
params
|
||||
}
|
||||
this.tasMap[fullPath] = tabItem
|
||||
if (meta?.keepAlive) {
|
||||
this.addCache(componentName)
|
||||
}
|
||||
if (hasTabIndex != -1) {
|
||||
return
|
||||
}
|
||||
|
||||
this.tabList.push(tabItem)
|
||||
},
|
||||
removeTab(fullPath: string, router: Router) {
|
||||
const { currentRoute, push } = router
|
||||
const index = findTabsIndex(fullPath, this.tabList)
|
||||
// 移除tab
|
||||
if (this.tabList.length > 1) {
|
||||
index !== -1 && this.tabList.splice(index, 1)
|
||||
}
|
||||
const componentName = getComponentName(currentRoute.value)
|
||||
this.removeCache(componentName)
|
||||
if (fullPath !== currentRoute.value.fullPath) {
|
||||
return
|
||||
}
|
||||
// 删除选中的tab
|
||||
let toTab: TabItem | null = null
|
||||
|
||||
if (index === 0) {
|
||||
toTab = this.tabList[index]
|
||||
} else {
|
||||
toTab = this.tabList[index - 1]
|
||||
}
|
||||
|
||||
const toRoute = getRouteParams(toTab)
|
||||
push(toRoute)
|
||||
},
|
||||
removeOtherTab(route: RouteLocationNormalized) {
|
||||
this.tabList = this.tabList.filter((item) => item.fullPath == route.fullPath)
|
||||
const componentName = getComponentName(route)
|
||||
this.cacheTabList.forEach((name) => {
|
||||
if (componentName !== name) {
|
||||
this.removeCache(name)
|
||||
}
|
||||
})
|
||||
},
|
||||
removeAllTab(router: Router) {
|
||||
const { push, currentRoute } = router
|
||||
const { name } = unref(currentRoute)
|
||||
if (name == this.indexRouteName) {
|
||||
this.removeOtherTab(currentRoute.value)
|
||||
return
|
||||
}
|
||||
this.tabList = []
|
||||
this.clearCache()
|
||||
push(PageEnum.INDEX)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default useTabsStore
|
||||
@@ -0,0 +1,57 @@
|
||||
import { isObject } from '@vue/shared'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
import defaultSetting from '@/config/setting'
|
||||
import { SETTING_KEY } from '@/enums/cacheEnums'
|
||||
import cache from '@/utils/cache'
|
||||
import { setTheme } from '@/utils/theme'
|
||||
|
||||
const storageSetting = cache.get(SETTING_KEY)
|
||||
|
||||
export const useSettingStore = defineStore({
|
||||
id: 'setting',
|
||||
state: () => {
|
||||
const state = {
|
||||
showDrawer: false,
|
||||
...defaultSetting
|
||||
}
|
||||
isObject(storageSetting) && Object.assign(state, storageSetting)
|
||||
return state
|
||||
},
|
||||
actions: {
|
||||
// 设置布局设置
|
||||
setSetting(data: Record<string, any>) {
|
||||
const { key, value } = data
|
||||
if (this.hasOwnProperty(key)) {
|
||||
//@ts-ignore
|
||||
this[key] = value
|
||||
}
|
||||
const settings: any = Object.assign({}, this.$state)
|
||||
delete settings.showDrawer
|
||||
cache.set(SETTING_KEY, settings)
|
||||
},
|
||||
// 设置主题色
|
||||
setTheme(isDark: boolean) {
|
||||
setTheme(
|
||||
{
|
||||
primary: this.theme,
|
||||
success: this.successTheme,
|
||||
warning: this.warningTheme,
|
||||
danger: this.dangerTheme,
|
||||
error: this.errorTheme,
|
||||
info: this.infoTheme
|
||||
},
|
||||
isDark
|
||||
)
|
||||
},
|
||||
resetTheme() {
|
||||
for (const key in defaultSetting) {
|
||||
//@ts-ignore
|
||||
this[key] = defaultSetting[key]
|
||||
}
|
||||
cache.remove(SETTING_KEY)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default useSettingStore
|
||||
@@ -0,0 +1,84 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
import { getUserInfo, login, logout } from '@/api/user'
|
||||
import { TOKEN_KEY } from '@/enums/cacheEnums'
|
||||
import { PageEnum } from '@/enums/pageEnum'
|
||||
import router, { filterAsyncRoutes } from '@/router'
|
||||
import { clearAuthInfo, getToken } from '@/utils/auth'
|
||||
import cache from '@/utils/cache'
|
||||
|
||||
export interface UserState {
|
||||
token: string
|
||||
userInfo: Record<string, any>
|
||||
routes: RouteRecordRaw[]
|
||||
perms: string[]
|
||||
}
|
||||
|
||||
const useUserStore = defineStore({
|
||||
id: 'user',
|
||||
state: (): UserState => ({
|
||||
token: getToken() || '',
|
||||
// 用户信息
|
||||
userInfo: {},
|
||||
// 路由
|
||||
routes: [],
|
||||
// 权限
|
||||
perms: []
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
resetState() {
|
||||
this.token = ''
|
||||
this.userInfo = {}
|
||||
this.perms = []
|
||||
},
|
||||
login(playload: any) {
|
||||
const { account, password } = playload
|
||||
return new Promise((resolve, reject) => {
|
||||
login({
|
||||
account: account.trim(),
|
||||
password: password
|
||||
})
|
||||
.then((data) => {
|
||||
this.token = data.token
|
||||
cache.set(TOKEN_KEY, data.token)
|
||||
resolve(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
logout() {
|
||||
return new Promise((resolve, reject) => {
|
||||
logout()
|
||||
.then(async (data) => {
|
||||
this.token = ''
|
||||
await router.push(PageEnum.LOGIN)
|
||||
clearAuthInfo()
|
||||
resolve(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
getUserInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getUserInfo()
|
||||
.then((data) => {
|
||||
this.userInfo = data.user
|
||||
this.perms = data.permissions
|
||||
this.routes = filterAsyncRoutes(data.menu)
|
||||
resolve(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default useUserStore
|
||||
Reference in New Issue
Block a user