Browse Source

增加语言切换

main
dark 4 months ago
parent
commit
cbe47d6317
  1. 5
      src/components/interact-popup/index.tsx
  2. 36
      src/pages/db/movie/index.tsx

5
src/components/interact-popup/index.tsx

@ -2,6 +2,7 @@ import { useStyle } from './style'
import { Button, Drawer, DrawerProps, Modal, ModalProps, Space } from 'antd' import { Button, Drawer, DrawerProps, Modal, ModalProps, Space } from 'antd'
import { forwardRef, memo, ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react' import { forwardRef, memo, ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react'
import { t } from '@/i18n' import { t } from '@/i18n'
import { ButtonSize } from 'antd/es/button'
export interface IInteractPopupProps { export interface IInteractPopupProps {
@ -12,6 +13,7 @@ export interface IInteractPopupProps {
footerExtends?: ReactNode | JSX.Element | (() => ReactNode | JSX.Element) footerExtends?: ReactNode | JSX.Element | (() => ReactNode | JSX.Element)
size?: ButtonSize
target?: false | ReactNode | JSX.Element | (() => ReactNode | JSX.Element) target?: false | ReactNode | JSX.Element | (() => ReactNode | JSX.Element)
type: 'drawer' | 'modal', type: 'drawer' | 'modal',
open?: boolean open?: boolean
@ -43,6 +45,7 @@ const InteractPopup = forwardRef<InteractPopupRef, IInteractPopupProps>((
{ {
title, title,
width, width,
size,
footerExtends, footerExtends,
target: propTarget, target: propTarget,
type = 'drawer', type = 'drawer',
@ -117,6 +120,7 @@ const InteractPopup = forwardRef<InteractPopupRef, IInteractPopupProps>((
<Space align={'end'} className={'actions'}> <Space align={'end'} className={'actions'}>
<Button type={'default'} <Button type={'default'}
key={'btn-cancel'} key={'btn-cancel'}
size={size}
onClick={() => { onClick={() => {
if (onClose?.() === false) { if (onClose?.() === false) {
return return
@ -125,6 +129,7 @@ const InteractPopup = forwardRef<InteractPopupRef, IInteractPopupProps>((
}} }}
>{closeText || t(`actions.cancel`)}</Button> >{closeText || t(`actions.cancel`)}</Button>
<Button type={'primary'} <Button type={'primary'}
size={size}
loading={submitting} loading={submitting}
onClick={async () => { onClick={async () => {
if (onOk) { if (onOk) {

36
src/pages/db/movie/index.tsx

@ -1,5 +1,5 @@
import { t, useTranslation } from '@/i18n.ts' import { t, useTranslation } from '@/i18n.ts'
import { Button, Form, Popconfirm, Divider, Space, Tooltip, Badge, Layout, Menu, Spin } from 'antd'
import { Button, Form, Popconfirm, Divider, Space, Tooltip, Badge, Layout, Menu, Spin, Select } from 'antd'
import { useAtom, useAtomValue } from 'jotai' import { useAtom, useAtomValue } from 'jotai'
import { import {
deleteMovieAtom, deleteMovieAtom,
@ -22,6 +22,35 @@ import Edit from './components/Edit.tsx'
const i18nPrefix = 'movies.list' const i18nPrefix = 'movies.list'
const SwitchLanguage = () => {
//使用639-1 初始常用的语言
const options = [
{ label: '汉语(zh-CN)', value: 'zh' },
{ label: '英语(en-US)', value: 'en' },
{ label: '日本語(ja-JP)', value: 'ja' },
//初始化排名前10的语言,格式为639-1,label需要中文显示:(汉语(zh-CN))格式,value为语言代码
{ label: '阿拉伯语(ar-AE)', value: 'ae' },
{ label: '西班牙语(es-ES)', value: 'es' },
{ label: '法语(fr-FR)', value: 'fr' },
{ label: '德语(de-DE)', value: 'de' },
{ label: '印地语(hi-IN)', value: 'hi' },
{ label: '印尼语(id-ID)', value: 'id' },
{ label: '意大利语(it-IT)', value: 'it' },
{ label: '韩语(ko-KR)', value: 'ko' },
{ label: '葡萄牙语(pt-PT)', value: 'pt' },
{ label: '俄语(ru-RU)', value: 'ru' },
{ label: '泰语(th-TH)', value: 'th' },
{ label: '土耳其语(tr-TR)', value: 'tr' },
{ label: '越南语(vi-VN)', value: 'vi' },
]
return (
<Select style={{ width: 150 }} placeholder={'切换语言'} options={options}>
</Select>
)
}
const Movie = () => { const Movie = () => {
@ -201,15 +230,16 @@ const Movie = () => {
setOpen(open) setOpen(open)
}} }}
styles={{ styles={{
body: { padding: 0}
body: { padding: 0 }
}} }}
type={'drawer'} type={'drawer'}
width={'90%'} width={'90%'}
typeProps={{ typeProps={{
maskClosable: false, maskClosable: false,
extra: <SwitchLanguage/>,
}} }}
> >
<Edit record={currentMovie} form={form} />
<Edit record={currentMovie} form={form}/>
</InteractPopup> </InteractPopup>

Loading…
Cancel
Save