@xizs/nuxt-antui 0.0.3 → 0.0.4

package/app/components/global/Form.tsx

@@ -2,7 +2,8 @@ import { AForm, AFormItem, AInput, ASelect,AInputNumber, LineOutlined, ASwitch,
 
 export type FormItemType = {
     label:string,
-    key:string|string[],
+    key: string | string[],
+    value:any,
     is:string,
     bind:any,
     rules:any[]
@@ -16,42 +17,42 @@ export type FormPropsType = {
     showSubmit?:boolean
 }
 
-const FormComs = {
+export const FormComs:{
+    [key: string]: (form:any,item:FormItemType)=>VNode
+  }= {
     input:(form:any,item:FormItemType)=>{
-        return <AInput v-model:value={form[item.key]}></AInput>
+        return <AInput v-model:value={form[item.key as string]}></AInput>
     },
     button:(form:any,item:FormItemType)=>{
         console.log(item.bind)
         return <AButton {...item.bind}>{ item.bind.content}</AButton>
     },
     textarea:(form:any,item:FormItemType)=>{
-        return <ATextarea v-model:value={form[item.key]}></ATextarea>
+        return <ATextarea v-model:value={form[item.key as string]}></ATextarea>
     },
     inputNumber:(form:any,item:FormItemType)=>{
-        return <AInputNumber v-model:value={form[item.key]} {...item.bind}></AInputNumber>
+        return <AInputNumber v-model:value={form[item.key as string]} {...item.bind}></AInputNumber>
     },
     inputNumberRange:(form:any,item:FormItemType)=>{
         return <div class="flex items-center gap-2">
-            <AInputNumber class="flex-1" v-model:value={form[item.key[0]]} {...item.bind[0]}></AInputNumber>
+            <AInputNumber class="flex-1" v-model:value={form[item.key[0] as string]} {...item.bind[0]}></AInputNumber>
             <LineOutlined />
-            <AInputNumber class="flex-1" v-model:value={form[item.key[1]]} {...item.bind[1]}></AInputNumber>
+            <AInputNumber class="flex-1" v-model:value={form[item.key[1] as string]} {...item.bind[1]}></AInputNumber>
         </div>
     },
     select:(form:any,item:FormItemType)=>{
-        return <ASelect v-model:value={form[item.key]} options={item.bind.options}></ASelect>
-    },
-    countrySelect:(form:any,item:FormItemType)=>{
-        return <ASelect v-model:value={form[item.key]} options={Const.CountrySelectList()}></ASelect>
+        return <ASelect v-model:value={form[item.key as string]} options={item.bind.options}></ASelect>
     },
     switch:(form:any,item:FormItemType)=>{
-        return <ASwitch v-model:checked={form[item.key]} {...item.bind}></ASwitch>
+        return <ASwitch v-model:checked={form[item.key as string]} {...item.bind}></ASwitch>
     },
     radio: (form: any, item: FormItemType) => {
-        return <ARadioGroup v-model:value={form[item.key]} {...item.bind}></ARadioGroup>
+        return <ARadioGroup v-model:value={form[item.key as string]} {...item.bind}></ARadioGroup>
     },
-    uploadImg: (form: any, item: FormItemType) => { 
-        return <UploadImg v-model:value={form[item.key]} {...item.bind}></UploadImg>
-    }
+
+    // uploadImg: (form: any, item: FormItemType) => { 
+    //     return <UploadImg v-model:value={form[item.key as string]} {...item.bind}></UploadImg>
+    // }
 }
 
 export default defineComponent({

package/app/components/global/FormTable.tsx

@@ -11,45 +11,48 @@ type TableFormItemType = {
 }
 
 let dateRange = defineComponent({
-  props:{
-    form:{
-      type:Object as ()=>any,
-      required:true
+    props:{
+        form:{
+            type:Object as ()=>any,
+            required:true
+        },
+        item:{
+            type:Object as ()=>TableFormItemType,
+            required:true
+        }
     },
-    item:{
-      type:Object as ()=>TableFormItemType,
-      required:true
+    setup(props) {
+        let {t:$t} = useI18n()
+      
+        let value = watchRef(ref([]),(nv,ov)=>{
+        if(nv?.length>0){
+            props.form[props.item.key[0]] = nv[0].format('YYYY-MM-DD 00:00:00')
+            props.form[props.item.key[1]] = nv[1].format('YYYY-MM-DD 23:59:59')
+        }else{
+            props.form[props.item.key[0]] = ''
+            props.form[props.item.key[1]] = ''
+        }
+        })
+        const rangePresets = ref([
+            { label: $t('今天'), value: [dayjs(), dayjs()] },
+            { label: $t('昨天'), value: [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')] },
+            { label: $t('最近7天'), value: [dayjs().add(-7, 'd'), dayjs()] },
+            { label: $t('最近30天'), value: [dayjs().add(-30, 'd'), dayjs()] },
+        ]);
+        
+        return ()=><ARangePicker presets={rangePresets.value} v-model:value={value.value}  />
     }
-  },
-  setup(props){
-    let value = watchRef(ref([]),(nv,ov)=>{
-      if(nv?.length>0){
-        props.form[props.item.key[0]] = nv[0].format('YYYY-MM-DD 00:00:00')
-        props.form[props.item.key[1]] = nv[1].format('YYYY-MM-DD 23:59:59')
-      }else{
-        props.form[props.item.key[0]] = ''
-        props.form[props.item.key[1]] = ''
-      }
-    })
-
-    const rangePresets = ref([
-      { label: '今天', value: [dayjs(), dayjs()] },
-      { label: '昨天', value: [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')] },
-      { label: '最近7天', value: [dayjs().add(-7, 'd'), dayjs()] },
-      { label: '最近30天', value: [dayjs().add(-30, 'd'), dayjs()] },
-    ]);
-    
-    return ()=><ARangePicker presets={rangePresets.value} v-model:value={value.value}  />
-  }
 }) 
 
 
 const FormItems = {
-    input:(form:any,item:TableFormItemType)=>{
-        return <AInput size="middle" v-model:value={form[item.key]} placeholder={`请输入 ${item.label}`}></AInput>
+    input: (form: any, item: TableFormItemType) => {
+        let {t:$t} = useI18n()
+        return <AInput size="middle" v-model:value={form[item.key]} placeholder={$t(`请输入{label}`,{label:$t(item.label)})}></AInput>
     },
-    select:(form:any,item:TableFormItemType)=>{
-        return <ASelect allowClear class="min-w-[150px]" v-model:value={form[item.key]} options={item.bind?.options} placeholder={`please select ${item.label}`}></ASelect>
+    select: (form: any, item: TableFormItemType) => {
+        let {t:$t} = useI18n()
+        return <ASelect allowClear class="min-w-[150px]" v-model:value={form[item.key]} options={item.bind?.options} placeholder={$t(`请选择{label}`,{label:$t(item.label)})}></ASelect>
     },
     dateRange:(form:any,item:TableFormItemType)=>{
         
@@ -80,7 +83,8 @@ export type AttributeType = {
     selectItems:any[],
     selectKeys:any[],
     page:number,
-    pageSize:number
+    pageSize: number,
+    tableData: any[],
 }
 
 export const FormTableProps = {
@@ -137,148 +141,129 @@ export const FormTableProps = {
   }
 
 export default defineComponent({
-  name: 'TableLayout',
-  props: FormTableProps,
-  setup(props) {
-
-    const form = ref({})
-    props.form?.forEach((item) => {
-      form.value[item.key] = item.value?? ''
-    })
-    const metaForm = JSON.parse(JSON.stringify(form.value))
-    let pagination =reactive({
-      page:1,
-      pageSize:20,
-      total:0
-    })
-
+    name: 'TableLayout',
+    props: FormTableProps,
+    setup(props,{slots}) {
+        const {t:$t} = useI18n()
 
-    const tableData = asyncReactive<any[]>(async ()=>{
-        let res = await props.table.data({...form.value,...pagination})
-        if(Array.isArray(res)){
-          res = {
-            list:res,
-            meta:{
-              pagination:{
-                total:0,
-                per_page:pagination.pageSize,
-                current_page:pagination.page
-              }
-          } 
-          }
-        }
-        console.log(res)
-        pagination.total = res.meta.pagination.total
-        pagination.pageSize = res.meta.pagination.per_page
-        pagination.page = res.meta.pagination.current_page
-        console.log(res)
-        props.attribute.tableData = res.list
-        return res.list
-    },[])
-
-
-    const rowSelection = { 
-        selectedRowKeys: props.attribute?.selectKeys, 
-        onChange: (keys,rows)=>{ 
-            props.attribute!.selectKeys.splice(0,props.attribute!.selectKeys.length,...keys)
-            props.attribute!.selectItems.splice(0,props.attribute!.selectItems.length,...rows)
-        } 
-    }
-
-    props.control.refresh = ()=>tableData.load()
-    
+        const form = ref({})
+        props.form?.forEach((item) => {
+            form.value[item.key] = item.value
+        })
+        props.attribute.form = form.value
+        const metaForm = JSON.parse(JSON.stringify(form.value))
 
-    return () => (
-      <div class="flex flex-col gap-2 h-full  ">
-        {/* {JSON.stringify(form.value)} */}
-        {props.form&&<AForm layout="inline gap-2">
-            {props.form?.map((item) => {
-              form[item.key] = item.value?? ''
-              return (
-                <AFormItem label={item.label}>
-                    {/* <AInput type="text" /> */}
-                    {FormItems[item.is](form.value,item)}
-                </AFormItem>
-              )
-            })}
-            <div class="flex gap-2">
-                {props.formOptions.search && <AButton type="primary" onClick={()=>tableData.load()}>搜索</AButton>}
-            {props.formOptions.reset && <AButton onClick={() => patch(metaForm,form.value)}>重置</AButton>}
-                {props.formOptions.export && <AButton type="primary">导出</AButton>}
-            </div> 
-        </AForm>}
+        let pagination =reactive({
+            page:1,
+            pageSize:20,
+            total:0
+        })
 
-        <div class="flex items-center justify-between">
-            <div>{props.action.other}</div>
 
-            {/* <div class="flex gap-2">
-                {props.action.search && <AButton type="primary" onClick={()=>tableData.load()}>搜索</AButton>}
-                {props.action.reset && <AButton>重置</AButton>}
-                {props.action.export && <AButton type="primary">导出</AButton>}
-            </div> */}
-        </div>
-        {/* <a-descriptions bordered size="small" column={5} layout="vertical">
-          <a-descriptions-item label="游玩人数">33</a-descriptions-item>
-          <a-descriptions-item label="游玩人次">1810000000</a-descriptions-item>
-          <a-descriptions-item label="转入/下注">33</a-descriptions-item>
-          <a-descriptions-item label="转出">12</a-descriptions-item>
-          <a-descriptions-item label="人均盈亏"> 11</a-descriptions-item>
-        </a-descriptions> */}
-        <div class="flex-1 mt-3 overflow-scroll flex flex-col">
-            <ATable
-                row-selection={props.table.enableSelection?rowSelection:null}
-                rowKey={props.table.rowKey??((row,key)=>key)}
-                loading={tableData.loading}
-                scroll={{x: true}}
-                columns={props.table.columns}
-                pagination={false}
-                sticky={tableData.value.length>0}
-                v-slots={{
-                    headerCell: ({ title,column }: any) => (
-                        <div style={{'white-space': 'nowrap'}}>
-                            {title }
-                        </div>
-                    ),
-                    bodyCell:(row)=>{
-                        if(row.column?.customRender!=null){
-                            return row.column.customRender(row)
+        const tableData = asyncReactive<any[]>(async ()=>{
+            let res = await props.table.data({...form.value,...pagination})
+            if(Array.isArray(res)){
+                res = {
+                    list:res,
+                    meta:{
+                        pagination:{
+                            total:0,
+                            per_page:pagination.pageSize,
+                            current_page:pagination.page
                         }
-                        return <div class="whitespace-nowrap" style={{ width:row.column.width??'100px'}}>{row.text}</div>
-                    },
-                    ...props.table['v-slots']
+                    } 
+                }
+            }
+            pagination.total = res.meta.pagination.total
+            pagination.pageSize = res.meta.pagination.per_page
+            pagination.page = res.meta.pagination.current_page
+            props.attribute.tableData = res.list
+            return res.list
+        },[])
 
-                }}
-                dataSource={tableData.value}
-            />
-        </div>
-       {props.footerOptions.show && <div class="mt-3 flex items-center justify-between">
-          <div>
-            { props.table.enableSelection && (`选中项: ${props.attribute.selectKeys.length}`)}
-          </div>
-          <div class="flex items-center gap-2">
-            <APagination 
-            hideOnSinglePage={true}
-              v-model:current={pagination.page}
-              total={pagination.total} 
-              pageSize={pagination.pageSize}
-              onChange={(page) => {
-                pagination.page = page
-                tableData.load()
-              }} 
-              pageSizeOptions={['20','50','100']}
-              onShowSizeChange={(current, size) => {
-                pagination.pageSize = size
-                pagination.page = current
-                tableData.load()
-              }}
-            />
 
-            <AButton icon={h(RedoOutlined)} loading={tableData.loading} onClick={tableData.load}  />
-          </div>
-
-        </div>}
+        const rowSelection = { 
+            selectedRowKeys: props.attribute?.selectKeys, 
+            onChange: (keys,rows)=>{ 
+                props.attribute!.selectKeys.splice(0,props.attribute!.selectKeys.length,...keys)
+                props.attribute!.selectItems.splice(0,props.attribute!.selectItems.length,...rows)
+            } 
+        }
 
-      </div>
-    )
-  }
+        props.control.refresh = ()=>tableData.load()
+        
+        return () => (
+            <div class="flex flex-col gap-2 h-full  ">
+                {props.form&&<AForm layout="inline gap-2">
+                    {props.form?.map((item) => {
+                    form[item.key] = item.value?? ''
+                    return (
+                        <AFormItem label={$t(item.label)}>
+                            {FormItems[item.is](form.value,item)}
+                        </AFormItem>
+                    )
+                    })}
+                    <div class="flex gap-2">
+                        {props.formOptions.search && <AButton type="primary" onClick={()=>tableData.load()}>{$t('搜索')}</AButton>}
+                        {props.formOptions.reset && <AButton onClick={() => patch(metaForm,form.value)}>{$t('重置')}</AButton>}
+                        {props.formOptions.export && <AButton type="primary">{$t('导出')}</AButton>}
+                    </div> 
+                </AForm>}
+                {slots.center?.()}
+                <div class="flex-1 overflow-scroll flex flex-col">
+                    {slots.content?.(tableData.value) ??
+                        <ATable
+                            row-selection={props.table.enableSelection?rowSelection:null}
+                            rowKey={props.table.rowKey??((row,key)=>key)}
+                            loading={tableData.loading}
+                            scroll={{x: true}}
+                            columns={props.table.columns}
+                            pagination={false}
+                            sticky={tableData.value.length>0}
+                            v-slots={{
+                                headerCell: ({ title,column }: any) => (
+                                    <div style={{'white-space': 'nowrap'}}>
+                                        {title}
+                                    </div>
+                                ),
+                                bodyCell:(row)=>{
+                                    if(row.column?.customRender!=null){
+                                        return row.column.customRender(row)
+                                    }
+                                    return <div class="whitespace-nowrap" style={{ width:row.column.width??'100px'}}>{row.text}</div>
+                                },
+                                ...props.table['v-slots']
+                            }}
+                            dataSource={tableData.value}
+                        />
+                    }
+                </div>
+                
+                {props.footerOptions.show && <div class="mt-3 flex items-center justify-between">
+                    <div>
+                        { props.table.enableSelection && (`${$t('选中项')}: ${props.attribute.selectKeys.length}`)}
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <APagination 
+                        hideOnSinglePage={true}
+                        v-model:current={pagination.page}
+                        total={pagination.total} 
+                        pageSize={pagination.pageSize}
+                        onChange={(page) => {
+                            pagination.page = page
+                            tableData.load()
+                        }} 
+                        pageSizeOptions={['20','50','100']}
+                        onShowSizeChange={(current, size) => {
+                            pagination.pageSize = size
+                            pagination.page = current
+                            tableData.load()
+                        }}
+                        />
+                        <AButton icon={h(RedoOutlined)} loading={tableData.loading} onClick={tableData.load}  />
+                    </div>
+                </div>}
+            </div>
+        )
+    }
 })

package/app/components/layout/Base.vue

@@ -5,6 +5,7 @@
         breakpoint="lg"
         collapsed-width="0"
         width="220px"
+        :trigger="null"
       >
         <div class="text-center text-white p-2 text-lg " >
             LOGO
@@ -16,11 +17,7 @@
         <a-layout-header :style="{ background: '#fff', padding: 0 }">
             <div class="flex h-full  items-center justify-between gap-2 px-4">
                 <div class="flex items-center gap-2">
-                    <menu-unfold-outlined
-                        v-if="collapsed"
-                        class="trigger text-[20px]"
-                        @click="() => (collapsed = !collapsed)"
-                        />
+                    <menu-unfold-outlined  v-if="collapsed" class="trigger text-[20px]" @click="() => (collapsed = !collapsed)" />
                     <menu-fold-outlined v-else class="trigger text-[20px]" @click="() => (collapsed = !collapsed)" />
                     <div class="leading-4 gap-1 flex flex-col  justify-center h-full">
                         <div class="text-[12px] text-[#aaa]">{{routeInfo.names.join(' / ')}}</div>
@@ -34,7 +31,21 @@
                             <template #overlay>
                                 <a-menu>
                                     <a-menu-item @click="()=>singOut()">
-                                        <a href="javascript:;">退出</a>
+                                        <a href="javascript:;">{{$t('退出')}}</a>
+                                    </a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </div>
+                    <div class="flex items-center p-2 ml-2">
+                        <a-dropdown >
+                            <div class=" cursor-pointer">
+                                <GlobalOutlined  class="text-[20px]" />
+                            </div>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item  v-for="locale in locales" @click="setLocale(locale.code)">
+                                        {{ locale.name }}
                                     </a-menu-item>
                                 </a-menu>
                             </template>
@@ -60,6 +71,7 @@
 </template>
 <script lang="ts" setup>
 import type { MenuItemType } from './Menu.vue';
+const { locales, setLocale } = useI18n()
 
 const collapsed = ref(false)
 
@@ -67,112 +79,7 @@ const props = defineProps<{
     menu: MenuItemType[]
 }>()
 
-// const menuItems:MenuItemType = [
-//     {
-//         title:'首页',
-//         icon: () => h(PieChartOutlined),
-//         path:'/'
-//     },
-//     {
-//         title:'用户',
-//         icon: () => h(PieChartOutlined),
-//         path:'/user',
-//         children:[
-//             {
-//                 title:'用户列表',
-//                 icon:'InboxOutlined',
-//                 path:'/user/list'
-//             }
-//         ]
-//     },
-//     {
-//         title:'数据报表',
-//         icon: () => h(PieChartOutlined),
-//         path:'/dataReport',
-//         children:[
-//             {
-//                 title:'平台活跃报表',
-//                 path:'/DataReport/platformActiveReport'
-//             },
-//             {
-//                 title:'平台财务报表',
-//                 path:'/DataReport/platformfinanceReport'
-//             },
-//             {
-//                 title:'消耗报表',
-//                 path:'/DataReport/consumptionReport'
-//             }
-//         ]
-//     },
-//     {
-//         title:'结算管理',
-//         icon: () => h(PieChartOutlined),
-//         path:'/settleManage',
-//         children:[
-//             {
-//                 title:'分包游戏报表',
-//                 path:'/settleManage/subGameReport'
-//             },
-           
-//         ]
-//     },
-//     {
-//         title:'综艺直播游戏',
-//         icon: () => h(PieChartOutlined),
-//         path:'/liveGame',
-//         children:[
-//             {
-//                 title:'综艺直播间数据',
-//                 path:'/liveGame/liveData'
-//             },
-//             {
-//                 title:'直播间开奖操控',
-//                 path:'/liveGame/LotteryControl'
-//             },
-//             {
-//                 title:'直播间实时监控',
-//                 path:'/liveGame/liveMonitor'
-//             },
-//             {
-//                 title:'机器人管理',
-//                 path:'/liveGame/robotManage',
-//                 children:[
-//                     {
-//                         title:'机器人列表',
-//                         path:'/liveGame/robotManage/robotList'
-//                     },
-//                     {
-//                         title:'机器人配置',
-//                         path:'/liveGame/robotManage/robotConfig'
-//                     },
-//                     {
-//                         title:'机器人资源库',
-//                         path:'/liveGame/robotManage/robotResourceLibrary'
-//                     },
-//                     {
-//                         title:'机器人类型',
-//                         path:'/liveGame/robotManage/robotType'
-//                     },
-//                     {
-//                         title:'自动弹幕文本配置',
-//                         path:'/liveGame/robotManage/autoDanmuTextConfig'
-//                     },
-//                 ]
-//             },
-//             {
-//                 title:'综艺游戏直播间配置',
-//                 path:'/liveGame/gameLiveConfig'
-//             }
-
-//         ]
-//     }
-    
-// ]
-const router = useRouter()
-
-
 let routeInfo = useRouteInfo(props.menu)
 
-
 </script>
 

package/app/composables/modal.ts

@@ -129,12 +129,13 @@ export const MModal = {
 
 export const Confirm = {
     delete: () => {
+        const { t: $t } = useI18n()
         return new Promise((resolve, reject) => {
             Modal.confirm({
-                title: '确认删除',
-                content: '确认删除该条数据吗？',
-                okText: '确定',
-                cancelText: '取消',
+                title: $t('确认删除'),
+                content: $t('确认删除该条数据吗？'),
+                okText: $t('确定'),
+                cancelText: $t('取消'),
                 onOk: () => {
                     resolve(true)
                 },

package/app/composables/table.ts

@@ -15,9 +15,9 @@ export const FormTable = (props: TablePropsType) => {
     const control = {
         refresh: () => { }
     }
-
+    console.log({ ...props, attribute, control })
     return {
-        com: h(FormTableCom, { ...props, attribute, control }),
+        com: h(FormTableCom, { ...props, attribute, control }, props['v-slots']),
         attribute,
         control
     }
@@ -32,3 +32,9 @@ export const TablePage = (props: TablePropsType) => {
 
     }
 }
+
+
+export const Table = {
+    Normal: FormTable,
+    Page: TablePage
+}

package/i18n/locales/en.json

@@ -0,0 +1,19 @@
+{
+    "搜索":"Search",
+    "重置":"Reset",
+    "请输入{label}":"Please enter {label}",
+    "请选择{label}":"Please select {label}",
+    "今天":"Today",
+    "昨天":"Yesterday",
+    "最近7天":"Last 7 days",
+    "最近30天":"Last 30 days",
+    "导出":"Export",
+    "选中项":"Selected items",
+    "退出":"Exit",
+    "确认删除":"Confirm deletion",
+    "确认删除该条数据吗？":"Are you sure you want to delete this data?",
+    "确定":"Confirm",
+    "取消":"Cancel",
+
+    "":""
+}

package/i18n/locales/zh.json

@@ -0,0 +1,19 @@
+{
+    "搜索":"搜索",
+    "重置":"重置",
+    "请输入{label}":"请输入{label}",
+    "请选择{label}":"请选择{label}",
+    "今天":"今天",
+    "昨天":"昨天",
+    "最近7天":"最近7天",
+    "最近30天":"最近30天",
+    "导出":"导出",
+    "选中项":"选中项",
+    "退出":"退出",
+    "确认删除":"确认删除",
+    "确认删除该条数据吗？":"确认删除该条数据吗？",
+    "确定":"确定",
+    "取消":"取消",
+
+    "":""
+}

package/nuxt.config.ts

@@ -12,11 +12,18 @@ export default defineNuxtConfig({
   future: {
     compatibilityVersion: 4
   },
-
-  modules: ['@ant-design-vue/nuxt'],
+  modules: ['@ant-design-vue/nuxt', '@nuxtjs/i18n'],
   extends: ['@xizs/nuxt-base'],
   css: [join(currentDir, './app/assets/css/main.css')],
-  vite:{
+  vite: {
     plugins: [tailwindcss()],
+  },
+  i18n: {
+    defaultLocale: 'zh',
+    strategy: 'no_prefix',
+    locales: [
+      { code: 'en', name: 'English', file: 'en.json' },
+      { code: 'zh', name: '中文', file: 'zh.json' }
+    ]
   }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xizs/nuxt-antui",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@ant-design-vue/nuxt": "1.4.6",
+    "@nuxtjs/i18n": "9.5.4",
     "@tailwindcss/vite": "^4.1.3",
     "@xizs/nuxt-base": "^0.0.4",
     "ant-design-vue": ">=4",