@duxweb/dvha-core 0.0.2

package/src/hooks/menu.ts

@@ -0,0 +1,146 @@
+import type { IMenu } from '../types'
+import { cloneDeep } from 'lodash-es'
+import { storeToRefs } from 'pinia'
+import { computed, ref, watch } from 'vue'
+import { useRouteStore } from '../stores'
+import { arrayToTree, searchTree } from '../utils'
+import { useRoute } from 'vue-router'
+
+
+export interface UseMenuProps {
+	doubleMenu?: boolean
+}
+
+export function useMenu(props?: UseMenuProps) {
+  const routeStore = useRouteStore()
+  const { routes } = storeToRefs(routeStore)
+
+  const getMenu = (hidden: boolean = true): IMenu[] => {
+    return cloneDeep(routes.value)?.filter(item => !!item?.name).filter(item => !hidden || item.hidden === undefined || item.hidden === false)
+  }
+
+  const originalList = computed<Record<string, any>[]>(() => {
+    const menus = getMenu(false)
+    return arrayToTree(menus, {
+      idKey: 'name',
+      parentKey: 'parent',
+      childrenKey: 'children',
+      sortKey: 'sort',
+    }, undefined)
+  })
+
+  const list = computed<Record<string, any>[]>(() => {
+    const menus = getMenu()
+    const data = arrayToTree(menus, {
+      idKey: 'name',
+      parentKey: 'parent',
+      childrenKey: 'children',
+      sortKey: 'sort',
+    }, undefined)
+    return data
+  })
+
+
+  const route = useRoute()
+
+  const allKey = ref(route.name)
+  const appKey = ref(route.name)
+  const subKey = ref(route.name)
+
+
+  const mainMenu = computed(() => {
+    if (props?.doubleMenu) {
+      return list.value
+    }
+    const appList = cloneDeep(list.value)
+    return appList?.map((item) => {
+      delete item.children
+      return item
+    })
+  })
+
+  const subMenu = computed(() => {
+    if (props?.doubleMenu) {
+      return []
+    }
+    const subList = list.value?.find(item => item.name === appKey.value)?.children
+    return subList || []
+  })
+
+	const crumbs = computed(() => {
+    const data = searchTree(originalList.value, (item) => {
+      return item?.name === route.name
+    })
+    return data
+  })
+
+	watch(() => props?.doubleMenu, () => {
+    if (!props?.doubleMenu) {
+      const paths = searchTree(list.value, (item) => {
+        return item?.name === subKey.value
+      })
+      appKey.value = paths?.[paths.length - 1]?.name
+      subKey.value = paths?.[paths.length - 1]?.name
+    }
+    else {
+      const paths = searchTree(list.value, (item) => {
+        return item?.name === appKey.value
+      })
+
+      appKey.value = paths?.[0]?.name
+      subKey.value = paths?.[paths.length - 1]?.name
+    }
+  }, { immediate: true })
+
+
+  const isSubMenu = computed(() => {
+    if (!props?.doubleMenu) {
+      return true
+    }
+    return (props?.doubleMenu || subMenu.value.length > 0)
+  })
+
+  watch([route, originalList, () => props?.doubleMenu], () => {
+    const paths = searchTree(originalList.value, (item) => {
+      return item.name === route.name
+    })
+
+    const findIndex = (list) => {
+      let index = -1
+      for (let i = list.length - 1; i >= 0; i--) {
+        if (list[i].hidden === false || list[i].hidden === undefined) {
+          index = i
+          break
+        }
+      }
+      return index
+    }
+
+    const subIndex = findIndex(paths)
+
+    allKey.value = paths?.[subIndex]?.name
+
+    if (props?.doubleMenu) {
+      appKey.value = paths?.[subIndex]?.name
+      subKey.value = paths?.[subIndex]?.name
+    }
+    else {
+      appKey.value = paths?.[0]?.name
+      subKey.value = paths?.[subIndex]?.name
+    }
+  }, { immediate: true })
+
+
+  return {
+    data: list,
+    originalData: originalList,
+    getMenu,
+    mainMenu,
+    subMenu,
+    isSubMenu,
+    crumbs,
+    active: allKey,
+    appActive: appKey,
+    subActive: subKey,
+  }
+}

package/src/hooks/overlay.ts

@@ -0,0 +1,21 @@
+import { useOverlayInject } from "@overlastic/vue"
+import { DuxOverlay } from "../components"
+
+
+export interface UseOverlayProps {
+  component?: () => any
+  componentProps?: Record<string, any>
+}
+
+export const useOverlay = () => {
+
+  const create = useOverlayInject(DuxOverlay)
+
+  const show = (props: UseOverlayProps) => {
+    return create(props)
+  }
+
+  return {
+    show,
+  }
+}

package/src/hooks/theme.ts

@@ -0,0 +1,49 @@
+import { BasicColorSchema, useColorMode, UseColorModeOptions, useCycleList } from '@vueuse/core'
+import { computed, nextTick, ref, watch, watchEffect } from 'vue'
+import { useManage } from './manage'
+import { ITheme } from '../types'
+
+// 扩散效果配置接口
+export interface RippleOptions {
+  duration?: number
+  easing?: string
+}
+
+export const useTheme = (options?: UseColorModeOptions) => {
+  const colorMode = useColorMode(options)
+  const manage = useManage()
+
+  const { state, next } = useCycleList(['dark', 'light', 'auto'] as const, {
+    initialValue: colorMode,
+  })
+
+  watchEffect(() => colorMode.value = state.value)
+
+  const isDark = computed(() => {
+    const { system, store } = colorMode
+    if (state.value === 'auto') {
+      return system.value === 'dark'
+    }
+    return store.value === 'dark'
+  })
+
+  const theme = computed<ITheme>(() => {
+    if (isDark.value) {
+      return {
+        logo: manage.config.theme?.darkLogo,
+        banner: manage.config.theme?.darkBanner,
+      }
+    }
+    return {
+      logo: manage.config.theme?.logo,
+      banner: manage.config.theme?.banner,
+    }
+  })
+
+  return {
+    toggle: next,
+    mode: state,
+    isDark,
+    theme,
+  }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './main'
+export * from './types'
+export * from './hooks'
+export * from './router'
+export * from './stores'
+export * from './components'
+export * from './utils'
+export * from './provider'
+export * from './simple'

package/src/main.ts

@@ -0,0 +1,28 @@
+import { ref, type App } from 'vue'
+import type { IConfig } from './types'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { initRouter } from './router/route'
+
+export function createDux(config: IConfig) {
+  const pinia = createPinia()
+  pinia.use(piniaPluginPersistedstate)
+
+  return {
+    install(app: App) {
+
+      console.log(
+        `%c dux-vue %c dux.cn %c`,
+        'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
+        'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
+        'background:transparent'
+      )
+
+      const manageRef = ref<string>()
+      app.provide('dux.config', config)
+      app.provide('dux.manage', manageRef)
+      app.use(initRouter(config))
+      app.use(pinia)
+    },
+  }
+}

package/src/provider/app.tsx

@@ -0,0 +1,179 @@
+import { defineComponent, inject, Ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useConfig, useManage } from '../hooks'
+import { useAuthStore, useRouteStore } from '../stores'
+import { storeToRefs } from 'pinia'
+import { IMenu } from '../types'
+import { OverlaysProvider } from '@overlastic/vue'
+
+export const DuxAppProvider = defineComponent({
+  name: 'DuxAppProvider',
+  props: {
+  },
+  setup(_props, { slots }) {
+    const manageRef = inject<Ref<string>>('dux.manage')
+
+    const config = useConfig()
+    const router = useRouter()
+    const authStore = useAuthStore()
+
+
+    router.beforeEach(async (to, _from, next) => {
+
+      const manageName = to.meta.manageName as string
+      const noAuth = to.meta.authorization === false
+
+      if (!manageName) {
+        const defaultManage = config.defaultManage || config.manages?.[0]?.name || ''
+        return next({
+          path: `/${defaultManage}`,
+          replace: true,
+        })
+      }
+
+      if (manageRef) {
+        manageRef.value = manageName
+      }
+
+      const routeStore = useRouteStore(manageName)
+      const { routes } = storeToRefs(routeStore)
+      const manage = useManage(manageName)
+
+      // unlogin handle
+      if (!authStore.isLogin(manageName)) {
+
+        if (noAuth) {
+          return next()
+        }
+
+        return next({
+          path: manage.getRoutePath(`login`),
+          replace: true,
+        })
+      }
+
+      const formatMenus = (menus: IMenu[]) => {
+        return menus?.map((item: IMenu) => {
+          return {
+            ...item,
+            path: manage.getRoutePath(item.path || ''),
+          }
+        })
+      }
+
+      // init route
+      if (!routeStore.getRouteInit()) {
+
+        // components
+        const components = manage.config?.components || {}
+        const commonRoutes: IMenu[] = []
+
+        if (components.notFound) {
+          commonRoutes.push({
+            name: `${manageName}.notFound`,
+            label: '404',
+            path: ':pathMatch(.*)*',
+            component: components.notFound,
+            hidden: true,
+          })
+        }
+
+        if (components.notAuthorized) {
+          commonRoutes.push({
+            name: `${manageName}.notAuthorized`,
+            label: '403',
+            path: 'notAuthorized',
+            component: components.notAuthorized,
+            hidden: true,
+          })
+        }
+
+        if (components.error) {
+          commonRoutes.push({
+            name: `${manageName}.error`,
+            label: '500',
+            path: 'error',
+            component: components.error,
+            hidden: true,
+          })
+        }
+
+
+        // init local route
+        routeStore.setRoutes(formatMenus(manage.config?.menus || []))
+
+        // init remote route
+        if (manage.config?.apiRoutePath) {
+          try {
+            await manage.config.dataProvider?.custom({
+              path: manage.config.apiRoutePath,
+              meta: {
+                timeout: 5000,
+              }
+            }, manage, authStore.getUser(manageName)).then((res) => {
+              routeStore.appendRoutes(formatMenus(res.data || []))
+            })
+          } catch (error) {
+            console.error(error)
+          }
+        }
+
+        // init common routes
+        routeStore.appendRoutes(commonRoutes)
+
+        // register route
+        routes.value.forEach((item: IMenu) => {
+          if (!item.path) {
+            return
+          }
+
+          router.addRoute(`${manageName}.auth`, {
+            name: item.name,
+            path: item.path,
+            component: typeof item.component === 'function' ? item.component : () => import('../components/loader/iframe'),
+            meta: item.meta,
+          })
+        })
+
+
+        // reload route
+        return next({
+          path: to.fullPath,
+          replace: true,
+        })
+      }
+
+
+      const pathMatch = [
+        '',
+        '/',
+        `/${manageName}`,
+        `/${manageName}/`,
+      ]
+
+      // index route redirect
+      if (pathMatch.includes(to.path)) {
+        const indexRoute = routeStore.getIndexRoute()
+
+        // if index route is not found
+        if (!indexRoute?.path || pathMatch.includes(indexRoute?.path)) {
+          console.warn(`[Dux] index route not found, skip redirect`)
+          return next()
+        }
+
+        return next({
+          path: indexRoute?.path || '/',
+          replace: true,
+        })
+      }
+
+      return next()
+    })
+
+    return () => (
+      <OverlaysProvider>
+        {slots.default?.()}
+      </OverlaysProvider>
+    )
+  },
+})

package/src/provider/index.ts

@@ -0,0 +1,2 @@
+export * from './app'
+export * from './tab'

package/src/provider/tab.tsx

@@ -0,0 +1,76 @@
+import { defineComponent, Transition, KeepAlive, watch } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
+import { useRouteStore, useTabStore } from '../stores'
+
+export const DuxTabRouterView = defineComponent({
+  name: 'DuxTabRouterView',
+  props: {},
+  setup() {
+    const route = useRoute()
+    const tabStore = useTabStore()
+    const routeStore = useRouteStore()
+
+    // route cache
+    const cacheMap = new Map()
+
+    const wrap = (name: string, component: any) => {
+      let cache
+      const cacheName = name
+
+      if (cacheMap.has(cacheName)) {
+        cache = cacheMap.get(cacheName)
+      }
+      else {
+        cache = {
+          name: cacheName,
+          render() {
+            return component
+          },
+        }
+        cacheMap.set(cacheName, cache)
+      }
+      return cache
+    }
+
+    tabStore.$subscribe((_mutation, state) => {
+      cacheMap.forEach((cache) => {
+        if (!state.tabs.some(t => t.path === cache.name)) {
+          cacheMap.delete(cache.name)
+        }
+      })
+    })
+
+    // add index route
+    const indexRoute = routeStore.getIndexRoute()
+    if (indexRoute) {
+      tabStore.addTab({...indexRoute, meta: { ...indexRoute.meta, lock: true } })
+    }
+
+    // watch route and routeStore.routes
+    watch([route, () => routeStore.routes], () => {
+      const info = routeStore.searchRouteName(route.name as string)
+      if (!info) {
+        return
+      }
+      const item = { label: info.label as string, path: route.path, name: info.name }
+      tabStore.addTab(item)
+    }, { immediate: true })
+
+
+    return () => (
+      <RouterView>
+        {{
+          default: ({Component}) => {
+            return (
+              <Transition name="tab-fade" mode="out-in" appear>
+                <KeepAlive include={tabStore.tabs.map(t => t.path || '')}>
+                  <Component is={wrap(route.path, Component)} key={route.path} />
+                </KeepAlive>
+              </Transition>
+            )
+          }
+        }}
+      </RouterView>
+    )
+  },
+})

package/src/router/index.ts

@@ -0,0 +1 @@
+export * from './route'

package/src/router/route.ts

@@ -0,0 +1,47 @@
+import type { RouteRecordRaw } from 'vue-router'
+import type { IConfig } from '../types'
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+export function initRouter(config: IConfig) {
+  const routes: RouteRecordRaw[] = [
+    ...config.routes || [],
+    {
+      name: 'default',
+      path: '/:catchAll(.*)',
+      redirect: `/${config.defaultManage || config.manages?.[0]?.name || ''}`,
+    },
+  ]
+
+  config.manages?.forEach((manage) => {
+
+    const authRoutes = manage.routes?.filter((route) => route.meta?.authorization === true || route.meta?.authorization === undefined) || []
+    const noAuthRoutes = manage.routes?.filter((route) => route.meta?.authorization === false) || []
+
+    routes.push({
+      name: manage.name,
+      path: manage.routePrefix || '',
+      children: [
+        {
+          path: '',
+          name: `${manage.name}.auth`,
+          component: manage.components?.authLayout,
+          children: authRoutes,
+        },
+        {
+          path: '',
+          name: `${manage.name}.noAuth`,
+          component: manage.components?.noAuthLayout,
+          children: noAuthRoutes,
+        },
+      ],
+      meta: {
+        manageName: manage.name,
+      },
+    })
+  })
+
+  return createRouter({
+    history: createWebHashHistory(),
+    routes,
+  })
+}

package/src/simple/authProvider.ts

@@ -0,0 +1,99 @@
+import axios from 'axios'
+import { IAuthProvider, IAuthLoginResponse, IAuthCheckResponse, IAuthLogoutResponse, IAuthErrorResponse, IAuthActionResponse } from '../types'
+import { IUserState } from '../stores'
+import { IManageHook } from '../hooks'
+
+export const simpleAuthProvider: IAuthProvider = {
+  login: async (params: any, manage: IManageHook): Promise<IAuthLoginResponse> => {
+    return await axios.post(manage.getApiUrl('/login'), params).then((res) => {
+      return {
+        success: true,
+        message: res?.data?.message,
+        redirectTo: '/',
+        data: res?.data?.data as IUserState,
+      }
+    }).catch((error) => {
+      return {
+        success: false,
+        message: error?.response?.data?.message || error?.message,
+      }
+    })
+  },
+  check: async (_params?: any, manage?: IManageHook): Promise<IAuthCheckResponse> => {
+    return await axios.get(manage?.getApiUrl('/check') || '').then((res: any) => {
+      return {
+        success: true,
+        message: res?.data?.message,
+        data: res?.data?.data as IUserState,
+      }
+    }).catch((error) => {
+      return {
+        success: false,
+        message: error?.response?.data?.message || error?.message,
+      }
+    })
+  },
+  onError: async (error?: any): Promise<IAuthErrorResponse> => {
+    if (error.status === 403) {
+      return {
+        logout: true,
+        redirectTo: '/login',
+        error,
+      }
+    }
+
+    return {
+      logout: false,
+      error,
+    }
+  },
+  logout: async (): Promise<IAuthLogoutResponse> => {
+    return {
+      success: true,
+      redirectTo: '/login',
+    }
+  },
+  register: async (params: any, manage?: IManageHook): Promise<IAuthLoginResponse> => {
+    return await axios.post(manage?.getApiUrl('/auth/register') || '', params).then((res: any) => {
+      return {
+        success: true,
+        message: res?.data?.message,
+        redirectTo: '/',
+        data: res?.data?.data as IUserState,
+      }
+    }).catch((error) => {
+      return {
+        success: false,
+        message: error?.response?.data?.message || error?.message,
+      }
+    })
+  },
+  forgotPassword: async (params: any, manage?: IManageHook): Promise<IAuthActionResponse> => {
+    return await axios.post(manage?.getApiUrl('/auth/forgot-password') || '', params).then((res: any) => {
+      return {
+        success: true,
+        message: res?.data?.message,
+        redirectTo: '/login',
+      }
+    }).catch((error) => {
+      return {
+        success: false,
+        message: error?.response?.data?.message || error?.message,
+      }
+    })
+  },
+  updatePassword: async (params: any, manage?: IManageHook): Promise<IAuthActionResponse> => {
+    return await axios.post(manage?.getApiUrl('/auth/update-password') || '', params).then((res: any) => {
+      return {
+        success: true,
+        message: res?.data?.message,
+        redirectTo: '/login',
+      }
+    }).catch((error) => {
+      return {
+        success: false,
+        message: error?.response?.data?.message || error?.message,
+      }
+    })
+  },
+}