kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip(i18n): Config i18n

This commit is contained in:
kailong321200875 2021-12-14 21:27:43 +08:00
parent d7d0ada558
commit 3e002a68f2
5 changed files with 91 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/Form/src/helper.ts
View File

@ -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 {}
}

83
src/hooks/web/useI18n.ts
View File

@ -1,50 +1,51 @@
// // import { i18n } from '@/plugins/i18n'
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 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]
type I18nTranslationRestParameters = [string, any]
// function getKey(namespace: string | undefined, key: string) {
// if (!namespace) {
// return key
// }
// if (key.startsWith(namespace)) {
// return key
// }
// return `${namespace}.${key}`
// }
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)
// }
// }
export function useI18n(namespace?: string): {
t: I18nGlobalTranslation
} {
const normalFn = {
t: (key: string) => {
return getKey(namespace, key)
}
}
console.log(i18n)
// if (!i18n) {
// return normalFn
// }
if (!i18n) {
return normalFn
}
// const { t, ...methods } = i18n.global
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
// }
// }
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

9
src/main.ts
View File

@ -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')

7
src/plugins/i18n/index.ts
View File

@ -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)
}

427
src/types/componentType.d.ts vendored
View File

@ -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