wip(Login): Login developing

src/components/ConfigGlobal/src/VConfigGlobal.vue

@@ -1,11 +1,13 @@
 <script lang="tsx">
 import { provide, defineComponent } from 'vue'
-import { vConfigGlobalProps } from './props'
+import { propTypes } from '@/utils/propTypes'
 
 export default defineComponent({
   name: 'VConfigGlobal',
   inheritAttrs: false,
-  props: vConfigGlobalProps,
+  props: {
+    size: propTypes.oneOf(['default', 'medium', 'small', 'mini']).def('default')
+  },
   setup(props, { slots }) {
     provide('configGlobal', props)
 

src/components/ConfigGlobal/src/props.ts

@@ -1,5 +0,0 @@
-import { propTypes } from '@/utils/propTypes'
-
-export const vConfigGlobalProps = {
-  size: propTypes.oneOf(['default', 'medium', 'small', 'mini']).def('default')
-}

src/locales/en.ts

@@ -3,7 +3,8 @@ export default {
     inputText: 'Please input',
     selectText: 'Please select',
     startTimeText: 'Start time',
-    endTimeText: 'End time'
+    endTimeText: 'End time',
+    login: 'Login'
   },
   formDemo: {
     input: 'Input',

src/locales/zh-CN.ts

@@ -3,7 +3,8 @@ export default {
     inputText: '请输入',
     selectText: '请选择',
     startTimeText: '开始时间',
-    endTimeText: '结束时间'
+    endTimeText: '结束时间',
+    login: '登录'
   },
   formDemo: {
     input: '输入框',

src/main.ts

@@ -13,4 +13,10 @@ setupElementPlus(app)
 import { setupStore } from '@/store'
 setupStore(app)
 
-app.mount('#app')
+// 路由
+import router, { setupRouter } from './router'
+setupRouter(app)
+
+router.isReady().then(() => {
+  app.mount('#app')
+})

src/router/index.ts

@@ -0,0 +1,42 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import type { App } from 'vue'
+// import { getParentLayout } from './helper'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
+
+export const constantRouterMap: AppRouteRecordRaw[] = [
+  {
+    path: '/login',
+    component: () => import('@/views/Login/Login.vue'),
+    name: 'Login',
+    meta: {
+      hidden: true,
+      title: t('common.login'),
+      noTagsView: true
+    }
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  strict: false,
+  routes: constantRouterMap as RouteRecordRaw[],
+  scrollBehavior: () => ({ left: 0, top: 0 })
+})
+
+export function resetRouter(): void {
+  const resetWhiteNameList = ['RedirectRoot', 'Redirect', 'Login', 'Root', 'Dashboard', 'Page404']
+  router.getRoutes().forEach((route) => {
+    const { name } = route
+    if (name && !resetWhiteNameList.includes(name as string)) {
+      router.hasRoute(name) && router.removeRoute(name)
+    }
+  })
+}
+
+export function setupRouter(app: App<Element>) {
+  app.use(router)
+}
+
+export default router

src/types/router.d.ts

@@ -0,0 +1,69 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { defineComponent } from 'vue'
+
+/**
+* redirect: noredirect        当设置 noredirect 的时候该路由在面包屑导航中不可被点击
+* name:'router-name'          设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+* meta : {
+    hidden: true              当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
+
+    alwaysShow: true          当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
+                              只有一个时，会将那个子路由当做根路由显示在侧边栏，
+                              若你想不管路由下面的 children 声明的个数都显示你的根路由，
+                              你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，
+                              一直显示根路由(默认 false)
+
+    title: 'title'            设置该路由在侧边栏和面包屑中展示的名字
+
+    icon: 'svg-name'          设置该路由的图标
+
+    noCache: true             如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+
+    breadcrumb: false         如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
+
+    affix: true               如果设置为true，则会一直固定在tag项中(默认 false)
+
+    noTagsView: true          如果设置为true，则不会出现在tag中(默认 false)
+
+    activeMenu: '/dashboard'  显示高亮的路由路径
+
+    followAuth: '/dashboard'  跟随哪个路由进行权限过滤
+
+    canTo: true               设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
+
+    followRoute: '/dashboard' 为路由设置跟随其他路由的权限
+  }
+**/
+declare module 'vue-router' {
+  interface RouteMeta extends Record<string | number | symbol, unknown> {
+    hidden?: boolean
+    alwaysShow?: boolean
+    title?: string
+    icon?: string
+    noCache?: boolean
+    breadcrumb?: boolean
+    affix?: boolean
+    activeMenu?: string
+    noTagsView?: boolean
+    followAuth?: string
+    canTo?: boolean
+    followRoute?: string
+  }
+}
+
+type Component<T = any> =
+  | ReturnType<typeof defineComponent>
+  | (() => Promise<typeof import('*.vue')>)
+  | (() => Promise<T>)
+
+declare global {
+  declare interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+    name: string
+    meta: RouteMeta
+    component?: Component | string
+    components?: Component
+    children?: AppRouteRecordRaw[]
+    props?: Recordable
+    fullPath?: string
+  }
+}

src/views/Login/Login.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>ddd</div>
+</template>

vite.config.ts

@@ -114,7 +114,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       include: [
         'vue',
         'vue-router',
-        'vue-types'
+        'vue-types',
+        'element-plus/lib/locale/lang/zh-cn',
+        'element-plus/lib/locale/lang/en'
       ]
     }
   }