wip(i18n): Config i18n

src/components/Form/src/helper.ts

@@ -1,39 +1,47 @@
-// import { useI18n } from '@/hooks/web/useI18n'
-// const { t } = useI18n()
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
+console.log(t)
+
+interface PlaceholderMoel {
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  rangeSeparator?: string
+}
+
 /**
  *
  * @param schema 对应组件数据
  * @description 用于自动设置placeholder
  */
-export function setTextPlaceholder(schema: VFormSchema): {
-  placeholder?: string
-  startPlaceholder?: string
-  endPlaceholder?: string
-} {
+export function setTextPlaceholder(schema: VFormSchema): PlaceholderMoel {
   console.log(schema)
-  // const textMap = ['Input', 'Autocomplete', 'InputNumber']
-  // const selectMap = ['Select', 'TimePicker', 'DatePicker', 'TimeSelect', 'TimeSelect']
-  // if (textMap.includes(schema?.component as string)) {
-  //   return {
-  //     placeholder: t('common.inputText')
-  //   }
-  // }
-  // if (selectMap.includes(schema?.component as string)) {
-  //   // 一些范围选择器
-  //   const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange']
-  //   if (
-  //     twoTextMap.includes(schema?.componentProps?.type || schema?.componentProps?.isRange) as string
-  //   ) {
-  //     return {
-  //       startPlaceholder: t('common.startTimeText'),
-  //       endPlaceholder: t('common.endTimeText'),
-  //       rangeSeparator: '-'
-  //     }
-  //   } else {
-  //     return {
-  //       placeholder: t('common.selectText')
-  //     }
-  //   }
-  // }
+  const textMap = ['Input', 'Autocomplete', 'InputNumber']
+  const selectMap = ['Select', 'TimePicker', 'DatePicker', 'TimeSelect', 'TimeSelect']
+  if (textMap.includes(schema?.component as string)) {
+    console.log(t('common.inputText'))
+    return {
+      placeholder: t('common.inputText')
+    }
+  }
+  if (selectMap.includes(schema?.component as string)) {
+    // 一些范围选择器
+    const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange']
+    if (
+      twoTextMap.includes(
+        (schema?.componentProps?.type || schema?.componentProps?.isRange) as string
+      )
+    ) {
+      return {
+        startPlaceholder: t('common.startTimeText'),
+        endPlaceholder: t('common.endTimeText'),
+        rangeSeparator: '-'
+      }
+    } else {
+      return {
+        placeholder: t('common.selectText')
+      }
+    }
+  }
   return {}
 }

src/hooks/web/useI18n.ts

@@ -1,50 +1,51 @@
-// // import { i18n } from '@/plugins/i18n'
-
-// type I18nGlobalTranslation = {
-//   (key: string): string
-//   (key: string, locale: string): string
-//   (key: string, locale: string, list: unknown[]): string
-//   (key: string, locale: string, named: Record<string, unknown>): string
-//   (key: string, list: unknown[]): string
-//   (key: string, named: Record<string, unknown>): string
-// }
-
-// type I18nTranslationRestParameters = [string, any]
-
-// function getKey(namespace: string | undefined, key: string) {
-//   if (!namespace) {
-//     return key
-//   }
-//   if (key.startsWith(namespace)) {
-//     return key
-//   }
-//   return `${namespace}.${key}`
-// }
-
-// export function useI18n(namespace?: string): {
-//   t: I18nGlobalTranslation
-// } {
-//   const normalFn = {
-//     t: (key: string) => {
-//       return getKey(namespace, key)
-//     }
-//   }
-
-//   if (!i18n) {
-//     return normalFn
-//   }
-
-//   const { t, ...methods } = i18n.global
-
-//   const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
-//     if (!key) return ''
-//     if (!key.includes('.') && !namespace) return key
-//     return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters))
-//   }
-//   return {
-//     ...methods,
-//     t: tFn
-//   }
-// }
+import { i18n } from '@/plugins/i18n'
+
+type I18nGlobalTranslation = {
+  (key: string): string
+  (key: string, locale: string): string
+  (key: string, locale: string, list: unknown[]): string
+  (key: string, locale: string, named: Record<string, unknown>): string
+  (key: string, list: unknown[]): string
+  (key: string, named: Record<string, unknown>): string
+}
+
+type I18nTranslationRestParameters = [string, any]
+
+function getKey(namespace: string | undefined, key: string) {
+  if (!namespace) {
+    return key
+  }
+  if (key.startsWith(namespace)) {
+    return key
+  }
+  return `${namespace}.${key}`
+}
+
+export function useI18n(namespace?: string): {
+  t: I18nGlobalTranslation
+} {
+  const normalFn = {
+    t: (key: string) => {
+      return getKey(namespace, key)
+    }
+  }
+  console.log(i18n)
+
+  if (!i18n) {
+    return normalFn
+  }
+
+  const { t, ...methods } = i18n.global
+
+  const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
+    if (!key) return ''
+    if (!key.includes('.') && !namespace) return key
+    return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters))
+  }
+  return {
+    ...methods,
+    t: tFn
+  }
+}
 
 // export const t = (key: string) => key

src/main.ts

@@ -7,10 +7,9 @@ const app = createApp(App)
 import { setupI18n } from '@/plugins/i18n'
 // 引入状态管理
 import { setupStore } from '@/store'
-;(async () => {
-  await setupI18n(app)
 
-  setupStore(app)
+setupI18n(app)
 
-  app.mount('#app')
-})()
+setupStore(app)
+
+app.mount('#app')

src/plugins/i18n/index.ts

@@ -1,7 +1,8 @@
 import { createI18n } from 'vue-i18n'
 import type { App } from 'vue'
+import type { I18nOptions } from 'vue-i18n'
 
-// export let i18n: ReturnType<typeof createI18n>
+export let i18n: ReturnType<typeof createI18n>
 
 const messages = Object.fromEntries(
   Object.entries(import.meta.globEager('../../locales/*.ts')).map(([key, value]) => {
@@ -10,10 +11,10 @@ const messages = Object.fromEntries(
 )
 
 export function setupI18n(app: App): void {
-  const i18n = createI18n({
+  i18n = createI18n({
     legacy: false,
     locale: 'zh-CN',
     messages
-  })
+  } as I18nOptions)
   app.use(i18n)
 }

src/types/componentType.d.ts

@@ -1,4 +1,4 @@
-import type { Component, RendererNode, VNode, CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 import type { RuleItem } from 'async-validator'
 
 declare global {
@@ -66,434 +66,11 @@ declare global {
     valueField?: string
   }
 
-  declare type BlurOrFocusEvent = (e: Event) => viod
-
-  declare type ChangeEvent = (data: {
-    value: FormValueTypes
-    field: string
-    model: Recordable
-  }) => viod
-
-  declare type RadioProps = {
-    border?: boolean
-    name?: string
-    disabled?: boolean
-    onChange?: ChangeEvent
-  }
-
-  declare type CheckboxProps = {
-    border?: boolean
-    name?: string
-    indeterminate?: boolean
-    disabled?: boolean
-    checked?: boolean
-    onChange?: ChangeEvent
-  }
-
-  declare type InputProps = {
-    type?: 'text' | 'textarea'
-    maxlength?: string | number
-    minlength?: string | number
-    showWordLimit?: boolean
-    placeholder?: string
-    clearable?: boolean
-    disabled?: boolean
-    showPassword?: boolean
-    prefixIcon?: string | Component
-    suffixIcon?: string | Component
-    rows?: number = 5
-    autosize?:
-      | boolean
-      | {
-          minRows?: number
-          maxRows?: number
-        }
-    autocomplete?: string
-    name?: string
-    readonly?: boolean
-    onBlur?: BlurOrFocusEvent
-    onFocus?: BlurOrFocusEvent
-    onChange?: ChangeEvent
-    onInput?: ChangeEvent
-    onClear?: Fn
-    slots?: {
-      prefix?: boolean
-      suffix?: boolean
-      prepend?: boolean
-      append?: boolean
-    }
-  }
-
-  declare type AutocompleteProps = {
-    placeholder?: string
-    clearable?: boolean
-    valueKey?: string
-    disabled?: boolean
-    icon?: string | Component
-    debounce?: number
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
-    fetchSuggestions?: (query: string, callback: Fn) => void
-    popperClass?: string
-    triggerOnFocus?: boolean
-    name?: string
-    selectWhenUnmatched?: boolean
-    label?: boolean
-    prefixIcon?: string
-    suffixIcon?: string
-    hideLoading?: boolean
-    popperAppendToBody?: boolean
-    highlightFirstItem?: boolean
-    onSelect?: ChangeEvent
-    change?: ChangeEvent
-    slots?: {
-      prefix?: boolean
-      suffix?: boolean
-      prepend?: boolean
-      append?: boolean
-    }
-  }
-
-  declare type InputNumberProps = {
-    min?: number
-    max?: number
-    step?: number
-    stepStrictly?: boolean
-    precision?: number
-    controls?: boolean
-    controlsPosition?: 'top' | 'right'
-    name?: string
-    label?: string
-    disabled?: boolean
-    placeholder?: string
-  }
-
-  declare type SelectProps = {
-    multiple?: boolean
-    valueKey?: string
-    clearable?: boolean
-    collapseTags?: boolean
-    disabled?: boolean
-    multipleLimit?: number
-    name?: string
-    autocomplete?: string
-    placeholder?: string
-    filterable?: boolean
-    allowCreate?: boolean
-    filterMethod?: Fn
-    remote?: boolean
-    remoteMethod?: Fn
-    loading?: boolean
-    loadingText?: string
-    noMatchText?: string
-    noDataText?: string
-    popperClass?: string
-    reserveKeyword?: boolean
-    defaultFirstOption?: boolean
-    popperAppendToBody?: boolean
-    automaticDropdown?: boolean
-    clearIcon?: string | Component
-    fitInputWidth?: boolean
-    suffixIcon?: string | Component
-    tagType?: ElementPlusInfoType
-    onChange?: ChangeEvent
-    onVisibleChange?: (val: boolean) => void
-    onRemoveTag?: (val: string | number) => void
-    onClear?: Fn
-    onBlur?: BlurOrFocusEvent
-    onFocus?: BlurOrFocusEvent
-    slots?: {
-      prefix?: boolean
-      empty?: boolean
-    }
-    optionGroup?:
-      | boolean
-      | {
-          label?: string
-          disabled?: boolean
-        }
-  }
-
-  declare type CascaderProps = {
-    props?: {
-      expandTrigger?: 'click' | 'hover'
-      multiple?: boolean
-      checkStrictly?: boolean
-      emitPath?: boolean
-      lazy?: boolean
-      lazyLoad?: (node: Recordable, resolve: Fn) => void
-      value?: string
-      label?: string
-      children?: string
-      disabled?: string
-      leaf?: string
-    }
-    placeholder?: string
-    disabled?: boolean
-    clearable?: boolean
-    showAllLevels?: boolean
-    collapseTags?: boolean
-    separator?: string
-    filterable?: boolean
-    filterMethod?: (node: Recordable, keyword: string | number) => boolean
-    debounce?: number
-    beforeFilter?: (value: string) => boolean | PromiseRejectedResult
-    popperClass?: string
-    popperAppendToBody?: boolean
-    onChange?: ChangeEvent
-    onExpandChange?: (parents: Recordable) => viod
-    onBlur?: BlurOrFocusEvent
-    onFocus?: BlurOrFocusEvent
-    onVisiblechange?: (val: boolean) => void
-    onRemoveTag?: (data: Recordable) => viod
-    slots?: {
-      default?: boolean
-      empty?: boolean
-    }
-  }
-
-  declare type SwitchProps = {
-    disabled?: boolean
-    loading?: boolean
-    width?: number
-    inlinePrompt?: boolean
-    activeIcon?: string | Component
-    inactiveIcon?: string | Component
-    activeText?: string
-    inactiveText?: string
-    activeValue?: boolean | string | number
-    inactiveValue?: boolean | string | number
-    activeColor?: string
-    inactiveColor?: string
-    borderColor?: string
-    string?: string
-    beforeChange?: () => boolean | PromiseRejectedResult
-    onChange?: ChangeEvent
-  }
-
-  declare type SliderProps = {
-    min?: number
-    max?: number
-    disabled?: boolean
-    step?: number
-    showInput?: boolean
-    showInputControls?: boolean
-    showStops?: boolean
-    showTooltip?: boolean
-    formatTooltip?: (value: number) => string
-    range?: boolean
-    vertical?: boolean
-    height?: string
-    label?: string
-    debounce?: number
-    tooltipClass?: string
-    marks?: Recordable
-    onChange?: ChangeEvent
-  }
-
-  declare type TimePickerProps = {
-    readonly?: boolean
-    disabled?: boolean
-    editable?: boolean
-    clearable?: boolean
-    placeholder?: string
-    startPlaceholder?: string
-    endPlaceholder?: string
-    isRange?: boolean
-    arrowControl?: boolean
-    align?: 'left' | 'center' | 'right'
-    popperClass?: string
-    rangeSeparator?: string
-    format?: string
-    defaultValue?: Date | string
-    name?: string
-    prefixIcon?: string | Component
-    clearIcon?: string | Component
-    disabledHours?: Fn
-    disabledMinutes?: Fn
-    disabledSeconds?: Fn
-    onChange?: ChangeEvent
-    onBlur?: BlurOrFocusEvent
-    onFocus?: BlurOrFocusEvent
-  }
-
-  declare type DatePickerProps = {
-    readonly?: boolean
-    disabled?: boolean
-    editable?: boolean
-    clearable?: boolean
-    placeholder?: string
-    startPlaceholder?: string
-    endPlaceholder?: string
-    type?:
-      | 'year'
-      | 'month'
-      | 'date'
-      | 'dates'
-      | 'datetime'
-      | 'week'
-      | 'datetimerange'
-      | 'daterange'
-      | 'monthrange'
-    format?: string
-    popperClass?: string
-    rangeSeparator?: string
-    defaultValue?: Date
-    defaultTime?: Date[]
-    valueFormat?: string
-    name?: string
-    unlinkPanels?: boolean
-    prefixIcon?: string | Component
-    clearIcon?: string | Component
-    disabledDate?: (date: Date) => boolean
-    shortcuts?: Recordable
-    onChange?: ChangeEvent
-    onBlur?: BlurOrFocusEvent
-    onFocus?: BlurOrFocusEvent
-    onCalendarChange?: (dates: [Date, Date]) => void
-    slots?: {
-      default?: boolean
-      rangeSeparator?: boolean
-    }
-  }
-
-  declare type RateProps = {
-    max?: number
-    disabled?: boolean
-    allowHalf?: boolean
-    lowThreshold?: number
-    highThreshold?: number
-    colors?: [string, string, string] | Recordable
-    voidColor?: string
-    disabledVoidColor?: string
-    icons?: [string, string, string] | Recordable
-    voidIcon?: string | Component
-    disabledVoidIcon?: string | Component
-    showText?: boolean
-    showScore?: boolean
-    textColor?: string
-    texts?: string[]
-    scoreTemplate?: string
-    onChange?: ChangeEvent
-  }
-
-  declare type ColorPickerProps = {
-    disabled?: boolean
-    showAlpha?: boolean
-    colorFormat?: 'hsl' | 'hsv' | 'hex' | 'rgb'
-    popperClass?: string | Component
-    predefine?: Recordable
-    onChange?: ChangeEvent
-    onActiveChange?: (color: string) => void
-  }
-
-  declare type TransferProps = {
-    data?: {
-      key?: string | number
-      label?: string
-      disabled?: boolean
-    }[]
-    filterable?: boolean
-    filterPlaceholder?: string
-    filterMethod?: Fn
-    targetOrder?: 'original' | 'push' | 'unshift'
-    titles?: [string, string]
-    buttonTexts?: [string, string]
-    renderContent?: (h: RendererNode, option: Recordable) => VNode | VNode[] | string
-    format?: {
-      noChecked?: string
-      hasChecked?: string
-    }
-    props?: {
-      key?: string
-      label?: string
-      disabled?: string
-    }
-    leftDefaultChecked?: Recordable
-    rightDefaultChecked?: Recordable
-    slots?: {
-      leftFooter?: boolean
-      rightFooter?: boolean
-    }
-    onChange?: ChangeEvent
-    onLeftCheckChange?: (arr: string[] | number[]) => void
-    onRightCheckChange?: (arr: string[] | number[]) => void
-  }
-
-  declare type DividerProps = {
-    direction?: 'horizontal' | 'vertical'
-    borderStyle?: CSSProperties
-    contentPosition?: 'left' | 'right' | 'center'
-  }
-
-  declare type TimeSelectProps = {
-    disabled?: boolean
-    editable?: boolean
-    clearable?: boolean
-    placeholder?: string
-    name?: string
-    prefixIcon?: string | Component
-    clearIcon?: string | Component
-    start?: string
-    end?: string
-    step?: string
-    minTime?: string
-    maxTime?: string
-  }
-
-  declare type SelectV2Props = {
-    multiple?: boolean
-    disabled?: boolean
-    valueKey?: string
-    clearable?: boolean
-    collapsetags?: boolean
-    multiplelimit?: number
-    name?: string
-    autocomplete?: string
-    placeholder?: string
-    filterable?: boolean
-    allowCreate?: boolean
-    noDataText?: string
-    popperClass?: string
-    popperAppendToBody?: boolean
-    popperOptions?: Recordable
-    automaticDropdown?: boolean
-    clearIcon?: string | Component
-    height?: number
-    scrollbarAlwaysOn?: boolean
-    onChange?: ChangeEvent
-    onVisibleChange?: (val: boolean) => void
-    onRemoveTag?: (val: string | number) => void
-    onClear?: () => void
-    onBlur?: BlurOrFocusEvent
-    onFocus?: BlurOrFocusEvent
-    slots?: {
-      default?: boolean
-      empty?: boolean
-    }
-  }
-
   declare type VFormSchema = {
     field: string
     label?: string
     colProps?: ColProps
-    componentProps?:
-      | RadioProps
-      | CheckboxProps
-      | InputProps
-      | AutocompleteProps
-      | InputNumberProps
-      | SelectProps
-      | CascaderProps
-      | SwitchProps
-      | SliderProps
-      | TimePickerProps
-      | DatePickerProps
-      | RateProps
-      | ColorPickerProps
-      | TransferProps
-      | DividerProps
-      | TimeSelectProps
-      | SelectV2Props
+    componentProps?: Recordable
     formItemProps?: FormItemProps
     component?: ComponentName
     value?: FormValueTypes