wip: Form升级中

src/components/Form/src/helper.ts

@@ -72,13 +72,11 @@ export const setGridProp = (col: ColProps = {}): ColProps => {
  * @returns 默认添加 clearable 属性
  */
 export const setComponentProps = (item: FormSchema): Recordable => {
-  const notNeedClearable = ['ColorPicker']
-  const componentProps: Recordable = notNeedClearable.includes(item.component as string)
-    ? { ...item.componentProps }
-    : {
-        clearable: true,
-        ...item.componentProps
-      }
+  // const notNeedClearable = ['ColorPicker']
+  const componentProps = {
+    clearable: true,
+    ...item.componentProps
+  }
   // 需要删除额外的属性
   delete componentProps?.slots
   return componentProps

src/permission.ts

@@ -26,7 +26,7 @@ const whiteList = ['/login'] // 不重定向白名单
 router.beforeEach(async (to, from, next) => {
   start()
   loadStart()
-  if (wsCache.get(appStore.getUserInfo)) {
+  if (!wsCache.get(appStore.getUserInfo)) {
     if (to.path === '/login') {
       next({ path: '/' })
     } else {

src/types/components.d.ts

@@ -1,27 +1,85 @@
-export type ComponentName =
-  | 'Radio'
-  | 'RadioButton'
-  | 'Checkbox'
-  | 'CheckboxButton'
-  | 'Input'
-  | 'Autocomplete'
-  | 'InputNumber'
-  | 'Select'
-  | 'Cascader'
-  | 'Switch'
-  | 'Slider'
-  | 'TimePicker'
-  | 'DatePicker'
-  | 'Rate'
-  | 'ColorPicker'
-  | 'Transfer'
-  | 'Divider'
-  | 'TimeSelect'
-  | 'SelectV2'
-  | 'InputPassword'
-  | 'Editor'
-
-export type ColProps = {
+import { CSSProperties } from 'vue'
+import { InputProps } from 'element-plus'
+
+export enum ComponentNameEnum {
+  RADIO = 'Radio',
+  RADIO_BUTTON = 'RadioButton',
+  CHECKBOX = 'Checkbox',
+  CHECKBOX_BUTTON = 'CheckboxButton',
+  INPUT = 'Input',
+  AUTOCOMPLETE = 'Autocomplete',
+  INPUT_NUMBER = 'InputNumber',
+  SELECT = 'Select',
+  CASCADER = 'Cascader',
+  SWITCH = 'Switch',
+  SLIDER = 'Slider',
+  TIME_PICKER = 'TimePicker',
+  DATE_PICKER = 'DatePicker',
+  RATE = 'Rate',
+  COLOR_PICKER = 'ColorPicker',
+  TRANSFER = 'Transfer',
+  DIVIDER = 'Divider',
+  TIME_SELECT = 'TimeSelect',
+  SELECT_V2 = 'SelectV2',
+  INPUT_PASSWORD = 'InputPassword',
+  EDITOR = 'Editor'
+}
+
+export interface InputComponentProps {
+  value?: string | number
+  maxlength?: number | string
+  minlength?: number | string
+  showWordLimit?: boolean
+  placeholder?: string
+  clearable?: boolean
+  formatter?: (value: string | number) => string
+  parser?: (value: string) => string
+  showPassword?: boolean
+  disabled?: boolean
+  size?: InputProps['size']
+  prefixIcon?: string | JSX.Element | (<T>(data: T | any) => string | JSX.Element)
+  suffixIcon?: string | JSX.Element | (<T>(data: T | any) => string | JSX.Element)
+  rows?: number
+  autosize?: boolean | { Pows?: numer; maxRows?: number }
+  autocomplete?: string
+  name?: string
+  readonly?: boolean
+  max?: number | string
+  min?: number | string
+  step?: number | string
+  resize?: InputProps['resize']
+  autofocus?: boolean
+  form?: string
+  label?: string
+  tabindex?: string | number
+  validateEvent?: boolean
+  inputStyle?: string | CSSProperties | CSSProperties[] | string[]
+  on?: {
+    blur?: (event: FocusEvent) => void
+    focus?: (event: FocusEvent) => void
+    change?: (value: string | number) => void
+    clear?: () => void
+    input?: (value: string | number) => void
+  }
+  slots?: {
+    prefix?: JSX.Element | (<T>(data: T | any) => JSX.Element)
+    suffix?: JSX.Element | (<T>(data: T | any) => JSX.Element)
+    prepend?: JSX.Element | (<T>(data: T | any) => JSX.Element)
+    append?: JSX.Element | (<T>(data: T | any) => JSX.Element)
+  }
+}
+
+type CamelCaseComponentName = keyof typeof ComponentNameEnum extends infer K
+  ? K extends string
+    ? K extends `${infer A}_${infer B}`
+      ? `${Capitalize<Lowercase<A>>}${Capitalize<Lowercase<B>>}`
+      : Capitalize<Lowercase<K>>
+    : never
+  : never
+
+export type ComponentName = CamelCaseComponentName
+
+export interface ColProps {
   span?: number
   xs?: number
   sm?: number
@@ -31,22 +89,22 @@ export type ColProps = {
   tag?: string
 }
 
-export type ComponentOptions = {
+export interface ComponentOptions extends Recordable {
   label?: string
   value?: FormValueType
   disabled?: boolean
   key?: string | number
   children?: ComponentOptions[]
   options?: ComponentOptions[]
-} & Recordable
+}
 
-export type ComponentOptionsAlias = {
+export interface ComponentOptionsAlias {
   labelField?: string
   valueField?: string
 }
 
-export type ComponentProps = {
+export interface ComponentProps extends Recordable {
   optionsAlias?: ComponentOptionsAlias
   options?: ComponentOptions[]
   optionsSlot?: boolean
-} & Recordable
+}

src/types/form.d.ts

@@ -1,5 +1,11 @@
 import type { CSSProperties } from 'vue'
-import { ColProps, ComponentProps, ComponentName } from '@/types/components'
+import {
+  ColProps,
+  ComponentProps,
+  ComponentName,
+  ComponentNameEnum,
+  InputComponentProps
+} from '@/types/components'
 import { FormValueType, FormValueType } from '@/types/form'
 import type { AxiosPromise } from 'axios'
 
@@ -21,7 +27,7 @@ export type FormItemProps = {
   style?: CSSProperties
 }
 
-export type FormSchema = {
+export interface FormSchema {
   // 唯一值
   field: string
   // 标题
@@ -31,7 +37,12 @@ export type FormSchema = {
   // col组件属性
   colProps?: ColProps
   // 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档
-  componentProps?: { slots?: Recordable } & ComponentProps
+  // componentProps?: { slots?: Recordable } & ComponentProps
+
+  /**
+   * 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档
+   */
+  componentProps?: InputComponentProps
   // formItem组件属性
   formItemProps?: FormItemProps
   // 渲染的组件

src/views/Login/components/LoginForm.vue

@@ -119,6 +119,13 @@ watch(
 
 // 登录
 const signIn = async () => {
+  await permissionStore.generateRoutes('none').catch(() => {})
+  permissionStore.getAddRouters.forEach((route) => {
+    addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
+  })
+  permissionStore.setIsAddRouters(true)
+  push({ path: redirect.value || permissionStore.addRouters[0].path })
+
   const formRef = unref(elFormRef)
   await formRef?.validate(async (isValid) => {
     if (isValid) {