feat: add vue3(element-plus)

yudao-ui-admin-vue3/src/store/index.ts

@@ -0,0 +1,13 @@
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersist from 'pinia-plugin-persist'
+
+const store = createPinia()
+
+store.use(piniaPluginPersist)
+
+export const setupStore = (app: App<Element>) => {
+  app.use(store)
+}
+
+export { store }

yudao-ui-admin-vue3/src/store/modules/app.ts

@@ -0,0 +1,177 @@
+import { defineStore } from 'pinia'
+import { store } from '../index'
+import { useCache } from '@/hooks/web/useCache'
+import { appModules } from '@/config/app'
+import type { AppState, LayoutType, ThemeTypes } from '@/config/app'
+import { setCssVar, humpToUnderline } from '@/utils'
+import { ElMessage } from 'element-plus'
+
+const { wsCache } = useCache()
+
+export const useAppStore = defineStore({
+  id: 'app',
+  state: (): AppState => appModules,
+  persist: {
+    enabled: true
+  },
+  getters: {
+    getBreadcrumb(): boolean {
+      return this.breadcrumb
+    },
+    getBreadcrumbIcon(): boolean {
+      return this.breadcrumbIcon
+    },
+    getCollapse(): boolean {
+      return this.collapse
+    },
+    getUniqueOpened(): boolean {
+      return this.uniqueOpened
+    },
+    getHamburger(): boolean {
+      return this.hamburger
+    },
+    getScreenfull(): boolean {
+      return this.screenfull
+    },
+    getSize(): boolean {
+      return this.size
+    },
+    getLocale(): boolean {
+      return this.locale
+    },
+    getTagsView(): boolean {
+      return this.tagsView
+    },
+    getTagsViewIcon(): boolean {
+      return this.tagsViewIcon
+    },
+    getLogo(): boolean {
+      return this.logo
+    },
+    getFixedHeader(): boolean {
+      return this.fixedHeader
+    },
+    getGreyMode(): boolean {
+      return this.greyMode
+    },
+    getPageLoading(): boolean {
+      return this.pageLoading
+    },
+    getLayout(): LayoutType {
+      return this.layout
+    },
+    getTitle(): string {
+      return this.title
+    },
+    getUserInfo(): string {
+      return this.userInfo
+    },
+    getIsDark(): boolean {
+      return this.isDark
+    },
+    getCurrentSize(): ElememtPlusSize {
+      return this.currentSize
+    },
+    getSizeMap(): ElememtPlusSize[] {
+      return this.sizeMap
+    },
+    getMobile(): boolean {
+      return this.mobile
+    },
+    getTheme(): ThemeTypes {
+      return this.theme
+    },
+    getFooter(): boolean {
+      return this.footer
+    }
+  },
+  actions: {
+    setBreadcrumb(breadcrumb: boolean) {
+      this.breadcrumb = breadcrumb
+    },
+    setBreadcrumbIcon(breadcrumbIcon: boolean) {
+      this.breadcrumbIcon = breadcrumbIcon
+    },
+    setCollapse(collapse: boolean) {
+      this.collapse = collapse
+    },
+    setUniqueOpened(uniqueOpened: boolean) {
+      this.uniqueOpened = uniqueOpened
+    },
+    setHamburger(hamburger: boolean) {
+      this.hamburger = hamburger
+    },
+    setScreenfull(screenfull: boolean) {
+      this.screenfull = screenfull
+    },
+    setSize(size: boolean) {
+      this.size = size
+    },
+    setLocale(locale: boolean) {
+      this.locale = locale
+    },
+    setTagsView(tagsView: boolean) {
+      this.tagsView = tagsView
+    },
+    setTagsViewIcon(tagsViewIcon: boolean) {
+      this.tagsViewIcon = tagsViewIcon
+    },
+    setLogo(logo: boolean) {
+      this.logo = logo
+    },
+    setFixedHeader(fixedHeader: boolean) {
+      this.fixedHeader = fixedHeader
+    },
+    setGreyMode(greyMode: boolean) {
+      this.greyMode = greyMode
+    },
+    setPageLoading(pageLoading: boolean) {
+      this.pageLoading = pageLoading
+    },
+    setLayout(layout: LayoutType) {
+      if (this.mobile && layout !== 'classic') {
+        ElMessage.warning('移动端模式下不支持切换其他布局')
+        return
+      }
+      this.layout = layout
+      wsCache.set('layout', this.layout)
+    },
+    setTitle(title: string) {
+      this.title = title
+    },
+    setIsDark(isDark: boolean) {
+      this.isDark = isDark
+      if (this.isDark) {
+        document.documentElement.classList.add('dark')
+        document.documentElement.classList.remove('light')
+      } else {
+        document.documentElement.classList.add('light')
+        document.documentElement.classList.remove('dark')
+      }
+      wsCache.set('isDark', this.isDark)
+    },
+    setCurrentSize(currentSize: ElememtPlusSize) {
+      this.currentSize = currentSize
+      wsCache.set('currentSize', this.currentSize)
+    },
+    setMobile(mobile: boolean) {
+      this.mobile = mobile
+    },
+    setTheme(theme: ThemeTypes) {
+      this.theme = Object.assign(this.theme, theme)
+      wsCache.set('theme', this.theme)
+    },
+    setCssVarTheme() {
+      for (const key in this.theme) {
+        setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
+      }
+    },
+    setFooter(footer: boolean) {
+      this.footer = footer
+    }
+  }
+})
+
+export const useAppStoreWithOut = () => {
+  return useAppStore(store)
+}

yudao-ui-admin-vue3/src/store/modules/dict.ts

@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia'
+import { store } from '../index'
+import { DictDataVO } from '@/api/system/dict/types'
+
+export interface DictValueType {
+  value: string
+  label: string
+  clorType: string
+  cssClass: string
+}
+export interface DictTypeType {
+  dictType: string
+  dictValue: DictValueType[]
+}
+export interface DictState {
+  isSetDict: boolean
+  dictMap: Recordable
+}
+
+export const useDictStore = defineStore({
+  id: 'dict',
+  state: (): DictState => ({
+    isSetDict: false,
+    dictMap: {}
+  }),
+  persist: {
+    enabled: true
+  },
+  getters: {
+    getDictMap(): Recordable {
+      return this.dictMap
+    },
+    getIsSetDict(): boolean {
+      return this.isSetDict
+    }
+  },
+  actions: {
+    setDictMap(dictMap: Recordable) {
+      // 设置数据
+      const dictDataMap = {}
+      dictMap.forEach((dictData: DictDataVO) => {
+        // 获得 dictType 层级
+        const enumValueObj = dictDataMap[dictData.dictType]
+        if (!enumValueObj) {
+          dictDataMap[dictData.dictType] = []
+        }
+        // 处理 dictValue 层级
+        dictDataMap[dictData.dictType].push({
+          value: dictData.value,
+          label: dictData.label,
+          colorType: dictData.colorType,
+          cssClass: dictData.cssClass
+        })
+      })
+      this.dictMap = dictMap
+    },
+    setIsSetDict(isSetDict: boolean) {
+      this.isSetDict = isSetDict
+    }
+  }
+})
+
+export const useDictStoreWithOut = () => {
+  return useDictStore(store)
+}

yudao-ui-admin-vue3/src/store/modules/locale.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import { store } from '../index'
+import { useCache } from '@/hooks/web/useCache'
+import { localeModules, elLocaleMap } from '@/config/locale'
+import type { LocaleState } from '@/config/locale'
+
+const { wsCache } = useCache()
+
+export const useLocaleStore = defineStore({
+  id: 'locales',
+  state: (): LocaleState => localeModules,
+  persist: {
+    enabled: true
+  },
+  getters: {
+    getCurrentLocale(): LocaleDropdownType {
+      return this.currentLocale
+    },
+    getLocaleMap(): LocaleDropdownType[] {
+      return this.localeMap
+    }
+  },
+  actions: {
+    setCurrentLocale(localeMap: LocaleDropdownType) {
+      // this.locale = Object.assign(this.locale, localeMap)
+      this.currentLocale.lang = localeMap?.lang
+      this.currentLocale.elLocale = elLocaleMap[localeMap?.lang]
+      wsCache.set('lang', localeMap?.lang)
+    }
+  }
+})
+
+export const useLocaleStoreWithOut = () => {
+  return useLocaleStore(store)
+}

yudao-ui-admin-vue3/src/store/modules/permission.ts

@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia'
+import { store } from '../index'
+import { cloneDeep } from 'lodash-es'
+import remainingRouter from '@/router/modules/remaining'
+import { generateRoutes, flatMultiLevelRoutes } from '@/utils/routerHelper'
+
+export interface PermissionState {
+  routers: AppRouteRecordRaw[]
+  addRouters: AppRouteRecordRaw[]
+  isAddRouters: boolean
+  menuTabRouters: AppRouteRecordRaw[]
+}
+
+export const usePermissionStore = defineStore({
+  id: 'permission',
+  state: (): PermissionState => ({
+    routers: [],
+    addRouters: [],
+    isAddRouters: false,
+    menuTabRouters: []
+  }),
+  persist: {
+    enabled: true
+  },
+  getters: {
+    getRouters(): AppRouteRecordRaw[] {
+      return this.routers
+    },
+    getAddRouters(): AppRouteRecordRaw[] {
+      return flatMultiLevelRoutes(cloneDeep(this.addRouters))
+    },
+    getIsAddRouters(): boolean {
+      return this.isAddRouters
+    },
+    getMenuTabRouters(): AppRouteRecordRaw[] {
+      return this.menuTabRouters
+    }
+  },
+  actions: {
+    generateRoutes(routers?: AppCustomRouteRecordRaw[] | string[]): Promise<unknown> {
+      return new Promise<void>((resolve) => {
+        let routerMap: AppRouteRecordRaw[] = []
+        routerMap = generateRoutes(routers as AppCustomRouteRecordRaw[])
+        // 动态路由，404一定要放到最后面
+        this.addRouters = routerMap.concat([
+          {
+            path: '/:path(.*)*',
+            redirect: '/404',
+            name: '404Page',
+            meta: {
+              hidden: true,
+              breadcrumb: false
+            }
+          }
+        ])
+        // 渲染菜单的所有路由
+        this.routers = cloneDeep(remainingRouter).concat(routerMap)
+        resolve()
+      })
+    },
+    setIsAddRouters(state: boolean): void {
+      this.isAddRouters = state
+    },
+    setMenuTabRouters(routers: AppRouteRecordRaw[]): void {
+      this.menuTabRouters = routers
+    }
+  }
+})
+
+export const usePermissionStoreWithOut = () => {
+  return usePermissionStore(store)
+}

yudao-ui-admin-vue3/src/store/modules/tagsView.ts

@@ -0,0 +1,141 @@
+import router from '@/router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { getRawRoute } from '@/utils/routerHelper'
+import { defineStore } from 'pinia'
+import { store } from '../index'
+import { findIndex } from '@/utils'
+
+export interface TagsViewState {
+  visitedViews: RouteLocationNormalizedLoaded[]
+  cachedViews: Set<string>
+}
+
+export const useTagsViewStore = defineStore({
+  id: 'tagsView',
+  state: (): TagsViewState => ({
+    visitedViews: [],
+    cachedViews: new Set()
+  }),
+  getters: {
+    getVisitedViews(): RouteLocationNormalizedLoaded[] {
+      return this.visitedViews
+    },
+    getCachedViews(): string[] {
+      return Array.from(this.cachedViews)
+    }
+  },
+  actions: {
+    // 新增缓存和tag
+    addView(view: RouteLocationNormalizedLoaded): void {
+      this.addVisitedView(view)
+      this.addCachedView()
+    },
+    // 新增tag
+    addVisitedView(view: RouteLocationNormalizedLoaded) {
+      if (this.visitedViews.some((v) => v.path === view.path)) return
+      if (view.meta?.noTagsView) return
+      this.visitedViews.push(
+        Object.assign({}, view, {
+          title: view.meta?.title || 'no-name'
+        })
+      )
+    },
+    // 新增缓存
+    addCachedView() {
+      const cacheMap: Set<string> = new Set()
+      for (const v of this.visitedViews) {
+        const item = getRawRoute(v)
+        const needCache = !item.meta?.noCache
+        if (!needCache) {
+          continue
+        }
+        const name = item.name as string
+        cacheMap.add(name)
+      }
+      if (Array.from(this.cachedViews).sort().toString() === Array.from(cacheMap).sort().toString())
+        return
+      this.cachedViews = cacheMap
+    },
+    // 删除某个
+    delView(view: RouteLocationNormalizedLoaded) {
+      this.delVisitedView(view)
+      this.addCachedView()
+    },
+    // 删除tag
+    delVisitedView(view: RouteLocationNormalizedLoaded) {
+      for (const [i, v] of this.visitedViews.entries()) {
+        if (v.path === view.path) {
+          this.visitedViews.splice(i, 1)
+          break
+        }
+      }
+    },
+    // 删除缓存
+    delCachedView() {
+      const route = router.currentRoute.value
+      const index = findIndex<string>(this.getCachedViews, (v) => v === route.name)
+      if (index > -1) {
+        this.cachedViews.delete(this.getCachedViews[index])
+      }
+    },
+    // 删除所有缓存和tag
+    delAllViews() {
+      this.delAllVisitedViews()
+      this.addCachedView()
+    },
+    // 删除所有tag
+    delAllVisitedViews() {
+      // const affixTags = this.visitedViews.filter((tag) => tag.meta.affix)
+      this.visitedViews = []
+    },
+    // 删除其他
+    delOthersViews(view: RouteLocationNormalizedLoaded) {
+      this.delOthersVisitedViews(view)
+      this.addCachedView()
+    },
+    // 删除其他tag
+    delOthersVisitedViews(view: RouteLocationNormalizedLoaded) {
+      this.visitedViews = this.visitedViews.filter((v) => {
+        return v?.meta?.affix || v.path === view.path
+      })
+    },
+    // 删除左侧
+    delLeftViews(view: RouteLocationNormalizedLoaded) {
+      const index = findIndex<RouteLocationNormalizedLoaded>(
+        this.visitedViews,
+        (v) => v.path === view.path
+      )
+      if (index > -1) {
+        this.visitedViews = this.visitedViews.filter((v, i) => {
+          return v?.meta?.affix || v.path === view.path || i > index
+        })
+        this.addCachedView()
+      }
+    },
+    // 删除右侧
+    delRightViews(view: RouteLocationNormalizedLoaded) {
+      const index = findIndex<RouteLocationNormalizedLoaded>(
+        this.visitedViews,
+        (v) => v.path === view.path
+      )
+      if (index > -1) {
+        this.visitedViews = this.visitedViews.filter((v, i) => {
+          return v?.meta?.affix || v.path === view.path || i < index
+        })
+        this.addCachedView()
+      }
+    },
+    updateVisitedView(view: RouteLocationNormalizedLoaded) {
+      for (let v of this.visitedViews) {
+        if (v.path === view.path) {
+          v = Object.assign(v, view)
+          break
+        }
+      }
+    }
+  }
+})
+
+export const useTagsViewStoreWithOut = () => {
+  return useTagsViewStore(store)
+}

yudao-ui-admin-vue3/src/store/modules/user.ts

@@ -0,0 +1,56 @@
+import { store } from '../index'
+import { defineStore } from 'pinia'
+import { getInfoApi } from '@/api/login'
+import { getAccessToken } from '@/utils/auth'
+import { useCache } from '@/hooks/web/useCache'
+
+interface UserInfoVO {
+  permissions: []
+  roles: []
+  user: {
+    avatar: string
+    id: number
+    nickname: string
+  }
+}
+const { wsCache } = useCache()
+
+export const useUserStore = defineStore({
+  id: 'admin-user',
+  state: (): UserInfoVO => ({
+    permissions: [],
+    roles: [],
+    user: {
+      id: 0,
+      avatar: '',
+      nickname: ''
+    }
+  }),
+  actions: {
+    // TODO 设置store刷新页面就消失
+    async getUserInfoAction() {
+      if (!getAccessToken()) {
+        this.resetState()
+        return null
+      }
+      const res = await getInfoApi()
+      this.permissions = res.permissions
+      this.roles = res.roles
+      this.user = res.user
+      wsCache.set('user', res)
+    },
+    resetState() {
+      this.permissions = []
+      this.roles = []
+      this.user = {
+        id: 0,
+        avatar: '',
+        nickname: ''
+      }
+    }
+  }
+})
+
+export const useUserStoreWithOut = () => {
+  return useUserStore(store)
+}