@xizs/nuxt-antui 0.0.1

package/.playground/nuxt.config.ts

@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  compatibilityDate: "2025-04-18"
+})

package/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app/app.config.ts

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'Hello from Nuxt layer'
+  }
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    myLayer?: {
+      /** Project name */
+      name?: string
+    }
+  }
+}

package/app/assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@source "../../"

package/app/components/global/Form.tsx

@@ -0,0 +1,124 @@
+import { AForm, AFormItem, AInput, ASelect,AInputNumber, LineOutlined, ASwitch, ATextarea } from "#components"
+
+export type FormItemType = {
+    label:string,
+    key:string|string[],
+    is:string,
+    bind:any,
+    rules:any[]
+}
+
+export type FormPropsType = {
+    form:FormItemType[],
+    submit:(formData:any)=>{
+
+    },
+    showSubmit?:boolean
+}
+
+const FormComs  = {
+    input:(form:any,item:FormItemType)=>{
+        return <AInput v-model:value={form[item.key]}></AInput>
+    },
+    textarea:(form:any,item:FormItemType)=>{
+        return <ATextarea v-model:value={form[item.key]}></ATextarea>
+    },
+    inputNumber:(form:any,item:FormItemType)=>{
+        return <AInputNumber v-model:value={form[item.key]} {...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>
+            <LineOutlined />
+            <AInputNumber class="flex-1" v-model:value={form[item.key[1]]} {...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>
+    },
+    switch:(form:any,item:FormItemType)=>{
+        return <ASwitch v-model:checked={form[item.key]} {...item.bind}></ASwitch>
+    }
+}
+
+export default defineComponent({
+    props:{
+        // form: Array as () => FormType[],
+        // action: Array as () => JSX.Element[],
+        // table: Object as () => FormTableProps<any>["table"],
+        // control: Object
+        form:{
+            type:Array as ()=>FormPropsType['form'],
+            required:true
+        },
+        submit:{
+            type:Function  as FormPropsType['submit'],
+            required:true
+        },
+        showSubmit:{
+            type:Boolean,
+            default:true
+        },
+    },
+    setup(props,{expose}){
+
+        let thisRef = ref(null)
+        let formData = ref({}) 
+        let rules = ref({})
+        props.form.forEach(item=>{
+            if(Array.isArray(item.key)){
+                item.key.forEach(key=>{
+                    formData.value[key] = item.value??''
+                    rules.value[item.key] = item.rules??[]   
+                    
+                })
+            }else{
+                formData.value[item.key] = item.value??''
+                rules.value[item.key] = item.rules??[]   
+            }
+
+            // if(Array.isArray(item.rules)){
+            //     item.rules.forEach(rule=>{
+            //         rules.value
+            //     })
+            // }
+            // rules.value[item.key] = item.rules??[]   
+        })
+
+        let loading = ref(false)
+        let submit = async ()=>{
+            if(loading.value){
+                throw new Error('loading')
+            }
+            loading.value = true
+            try{
+                await thisRef.value.validate()
+                await props.submit(formData.value)
+            }finally{
+                loading.value = false
+            }
+        }
+
+        expose({
+            submit,
+            loading
+        })
+        
+
+
+        return ()=><AForm ref={thisRef} model={formData.value} rules={rules.value} label-col={{ span: 6 }} wrapper-col={{ span: 16 }}>
+            {/* {JSON.stringify(formData.value)} */}
+            {
+                props.form.map(item=>{
+                    return <AFormItem label={item.label} name={item.key}>
+                        {FormComs[item.is](formData.value,item)}
+                    </AFormItem>
+                })
+            }
+
+        </AForm>
+    }
+})

package/app/components/global/FormTable.tsx

@@ -0,0 +1,271 @@
+import { defineComponent, ref } from 'vue'
+import { AForm, AFormItem, AInput, AButton, ATable, ASelect, APagination, ARangePicker, RedoOutlined } from '#components'
+import type { TableColumnType } from 'ant-design-vue'
+import dayjs from 'dayjs'
+
+type TableFormItemType = {
+  label: string
+  key: string
+  is: string
+  bind?: any
+}
+
+let dateRange = defineComponent({
+  props:{
+    form:{
+      type:Object as ()=>any,
+      required:true
+    },
+    item:{
+      type:Object as ()=>TableFormItemType,
+      required:true
+    }
+  },
+  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={`please input ${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>
+    },
+    dateRange:(form:any,item:TableFormItemType)=>{
+        
+        return h(dateRange,{form,item})
+    }
+}
+
+export type TablePropsType = {
+  form: TableFormItemType[]
+  action?: {
+    search?: boolean
+    reset?: boolean
+    export?: boolean
+    opther: () => any
+  }
+  table: {
+    'v-slots'?:any
+    enableSelection?: boolean
+    columns: TableColumnType[]
+    data: () => any[]
+  }
+}
+
+export type AttributeType = {
+    selectItems:any[],
+    selectKeys:any[],
+    page:number,
+    pageSize:number
+}
+
+export const FormTableProps = {
+    form: {
+      type: Array as () => TableFormItemType[],
+      required: true
+    },
+    formOptions:{
+      type:Object as () => {
+        search:boolean,
+        reset:boolean,
+        export:boolean,
+        opther?:()=>any
+      },
+      default:()=>({
+        search:true,
+        reset:true,
+        export:false,
+      })
+    },
+    action: {
+      type: Object as () => TablePropsType['action'],
+      default: () => ({
+        search: true,
+        reset: true,
+        export: true,
+        opther: () => null
+      })
+    },
+    table: {
+      type: Object as () => TablePropsType['table'],
+      default: () => ({
+        enableSelection: false,
+        columns: [],
+        data: () => [],
+        rowKey:(row:any)=>any
+      })
+    },
+    attribute:{
+      type:Object as ()=> AttributeType
+    },
+    control:{
+      type:Object,
+      required:true
+    }
+  }
+
+export default defineComponent({
+  name: 'TableLayout',
+  props: FormTableProps,
+  setup(props) {
+
+    const form = ref({})
+    props.form.forEach((item) => {
+      form.value[item.key] = item.value?? ''
+    })
+    let pagination =reactive({
+      page:1,
+      pageSize:20,
+      total:0
+    })
+
+
+    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)
+        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()
+    
+
+    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>重置</AButton>}
+                {props.formOptions.export && <AButton type="primary">导出</AButton>}
+            </div> 
+        </AForm>}
+
+        <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)
+                        }
+                        return <div class="whitespace-nowrap" style={{ width:row.column.width??'100px'}}>{row.text}</div>
+                    },
+                    ...props.table['v-slots']
+
+                }}
+                dataSource={tableData.value}
+            />
+        </div>
+        <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>
+
+      </div>
+    )
+  }
+})

package/app/components/global/TablePage.tsx

@@ -0,0 +1,15 @@
+import { ACard } from "#components"
+import { FormTableProps } from "./FormTable"
+
+export default defineComponent({
+
+    props:FormTableProps,
+
+    setup(props){
+        const {com,params} = FormTable(props)
+
+        return ()=><ACard class="absolute top-0 left-0 right-0 bottom-0 h-full" bodyStyle="height:100%">
+            <com></com>
+        </ACard>
+    }
+})

package/app/components/layout/Base.vue

@@ -0,0 +1,178 @@
+<template>
+    <a-layout class="top-0 bottom-0 left-0 right-0 absolute">
+      <a-layout-sider
+        v-model:collapsed="collapsed" 
+        breakpoint="lg"
+        collapsed-width="0"
+        width="220px"
+      >
+        <div class="text-center text-white p-2 text-lg " >
+            LOGO
+        </div>
+        <LayoutMenu :items="props.menu"></LayoutMenu>
+      </a-layout-sider>
+
+      <a-layout>
+        <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-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>
+                        <div class="font-bold text-[18px]">{{routeInfo.name}}</div>
+                    </div>
+                </div>
+                <div class=" flex items-center">
+                    <div >
+                        <a-dropdown >
+                            <div class="h-[30px] leading-[30px]">{{ useAdmin().value?.username }}</div>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item @click="()=>singOut()">
+                                        <a href="javascript:;">退出</a>
+                                    </a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </div>
+
+                </div>
+            </div>
+        </a-layout-header>
+        <!-- <div class="p-4 bg-white" style="border-top:1px solid #eee">
+            <div class="leading-4 gap-1 flex flex-col  justify-center h-full">
+                <div class="text-[12px] text-[#aaa]">{{routeInfo.names.join(' / ')}}</div>
+                <div class="font-bold text-[18px]">{{routeInfo.name}}</div>
+            </div>
+        </div> -->
+        <a-layout-content :style="{ }" class="relative   m-4">
+            <div class="absolute top-0 left-0 right-0 bottom-0">
+                <slot ></slot>
+            </div>
+        </a-layout-content>
+      </a-layout>
+    </a-layout>
+</template>
+<script lang="ts" setup>
+import type { MenuItemType } from './Menu.vue';
+
+const collapsed = ref(false)
+
+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/components/layout/Menu.vue

@@ -0,0 +1,79 @@
+<template>
+    <a-menu
+        v-model:openKeys="state.openKeys"
+        v-model:selectedKeys="state.openKeys"
+        mode="inline"
+        theme="dark"
+        :inline-collapsed="state.collapsed"
+        :items="items"
+        @select="select"
+    ></a-menu>
+</template>
+<script lang="ts" setup>
+
+export type MenuItemType = {
+    icon?:string,
+    title:string,
+    path:string,
+    children?:MenuItemType[]
+}
+const props = defineProps<{
+    items: MenuItemType[],
+}>()
+
+const router = useRouter()
+const select = 	({ item, key, keyPath })=>{
+    router.push(key)
+    state.openKeys = keyPath
+}
+
+const state = reactive({
+    collapsed: false,
+    selectedKeys: [''],
+    openKeys: [''],
+    preOpenKeys: ['sub1'],
+});
+
+const items = computed(()=>{
+    let a = props.items.map((item) => {
+        const { icon, title, path, children } = item;
+        let newItem =  {
+            key: path,
+            icon: icon,
+            label: title,
+          
+        };
+        if(children){
+            newItem.children=children?.map((child) =>{
+                let c = {
+                    key: child.path,
+                    label: child.title,
+                }
+                if(child.children){
+                    c.children=child.children?.map((subChild) =>{
+                        return {
+                            key: subChild.path,
+                            label: subChild.title,
+                        }
+                    })
+                }
+                return c
+            })
+        }
+        return newItem
+    });
+    console.log(a)
+    return a
+})
+
+let routeInfo = useRouteInfo(props.items)
+
+onMounted(()=>{
+    state.selectedKeys=routeInfo.value.paths
+    state.openKeys=routeInfo.value.paths
+})
+
+
+</script>
+  
+  

package/app/composables/drawer.ts

@@ -0,0 +1,26 @@
+import { createVNode, render } from "vue"
+
+export const Drawer = (el)=>{
+
+    let com = defineComponent({
+        setup(){
+            let open=ref(true)
+            console.log('aaaaaa')
+            return ()=> h(el,{
+                open: open.value, // 等价于 v-model:open
+                'onUpdate:open': (val: boolean) => {
+                    open.value = val
+                    console.log(val,open.value)
+                }, 
+            })
+        }
+    })
+
+
+    let container = document.createDocumentFragment()
+    const vnode = h(com)
+    vnode.appContext = useNuxtApp().vueApp._context
+    render(vnode,container)
+    document.body.appendChild(container)
+
+}

package/app/composables/form.ts

@@ -0,0 +1 @@
+export const FormItem = {}

package/app/composables/modal.ts

@@ -0,0 +1,126 @@
+import { createVNode, render } from "vue"
+import Form from "../components/global/Form"
+import { AModal } from "#components"
+
+export const NormalModal = (el)=>{
+    let control = {close:()=>{}}
+    let container = document.createDocumentFragment()
+
+    let com = defineComponent({
+        setup(){
+            let open=ref(true)
+            control.close = ()=>{
+                open.value = false
+            }
+            return ()=> h(el,{
+                open: open.value, // 等价于 v-model:open
+                'onUpdate:open': (val: boolean) => {
+                    open.value = val
+                    if(!val){
+                        setTimeout(() => {
+                            render(null, container) // 卸载组件
+                            if (container.parentNode) {
+                              container.parentNode.removeChild(container) // 移除 DOM
+                            }
+                        }, 1000);
+                    }
+                }, 
+            })
+        }
+    })
+
+    const vnode = h(com)
+    vnode.appContext = useNuxtApp().vueApp._context
+    render(vnode,container)
+    document.body.appendChild(container)
+
+    return control
+
+}
+
+// export Modal.Normal = NormalModal
+
+
+type FormModalParamsType= {
+    title:string,
+    form:{
+        label:string,
+        key:string,
+        is:string
+    }[],
+    submit:()=>void
+}
+
+export const FormModal = (params:FormModalParamsType)=>{
+
+    let submit:()=>void
+
+    // let control = NormalModal(h(AModal,{
+    //     title: params.title,
+    //     okText: '提交'+loading?.value,
+    //     cancelText: '取消',
+    //     onOk: async ()=>{
+    //         await submit()
+    //         control.close()
+    //     }
+
+    // },h(defineComponent({
+    //     setup(){
+    //         let formRef = ref(null)
+
+    //         onMounted(()=>{
+    //             submit =  formRef.value.submit
+    //             loading = formRef.value.loading
+    //         })
+            
+    //         return ()=>h(Form,{
+    //             ref: formRef,
+    //             form: params.form,
+    //             submit:params.submit,
+    //             showSubmit: false
+    //         })
+    //     }
+    // }))))
+
+    let control = NormalModal(h(defineComponent({
+        setup(){
+            let formRef = ref(null)
+            let loading =ref(false)
+        
+            onMounted(()=>{
+                submit =  async ()=>{
+                    loading.value = true
+                    try{
+                        await formRef.value.submit()
+                    }finally{
+
+                        loading.value = false
+                    }
+                }
+                // loading = formRef.value.loading
+            })
+            
+            return ()=>h(AModal,{
+                title: params.title,
+                okText: '提交',
+                cancelText: '取消',
+                confirmLoading: loading.value,
+                onOk: async ()=>{
+                    await submit()
+                    control.close()
+                }
+        
+            },h(Form,{
+                ref: formRef,
+                form: params.form,
+                submit:params.submit,
+                showSubmit: false
+            }))
+        }
+    })))
+}
+
+export const MModal = {
+    Normal: NormalModal,
+    Form: FormModal
+}

package/app/composables/table.ts

@@ -0,0 +1,63 @@
+import { ACard, ADropdown, AMenu, EllipsisOutlined } from "#components";
+import type { TablePropsType } from "../components/global/FormTable";
+import  FormTableCom from "../components/global/FormTable";
+
+
+export const FormTable = (props:TablePropsType)=>{
+
+    const attribute = reactive({
+        selectItems:[],
+        selectKeys:[],
+        page:1,
+        pageSize:10
+    })
+    
+    const control = {
+        refresh:()=>{}
+    }
+
+    return {
+        com:h(FormTableCom,{...props,attribute,control}),
+        attribute,
+        control
+    }
+}
+
+export const TablePage = (props:TablePropsType)=>{
+    let TableParams =  FormTable(props)
+
+    return {
+        ...TableParams,
+        com: h(ACard,{class:"absolute top-0 left-0 right-0 bottom-0 h-full",bodyStyle:"height:100%"},TableParams.com)
+        
+    }
+}
+
+export const TableCell = {
+    Dropdown:(params:{label:string,icon:string,onClick:()=>void}[])=>{
+        // return h(EllipsisOutlined,{class:"mr-2"},{default:()=>{
+        //     return h()
+        // }})
+
+        return h('div',{style:{'min-width':'50px'}},h(ADropdown,{},{
+            default:()=>{
+                return h(EllipsisOutlined,{class:"mr-2"})
+            },
+            overlay:()=>{
+                return h(AMenu,{items:params.map(item=>{
+                    return {
+                        label:item.label,
+                        icon:()=>item.icon,
+                        onClick:item.onClick
+                    }
+                })})
+            }
+        }))
+    },
+    Tenant:(params:{name:string,id:string})=>{
+        return h('div',{class:"flex flex-col"},[
+            h('span',{class:"mr-2"},params.name),
+            h('span',{class:"mr-2 whitespace-nowrap"},`ID: ${params.id}`)
+        ])
+    },
+}

package/eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

package/nuxt.config.ts

@@ -0,0 +1,22 @@
+import tailwindcss from '@tailwindcss/vite'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+const currentDir = dirname(fileURLToPath(import.meta.url))
+console.log(currentDir)
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true },
+
+  future: {
+    compatibilityVersion: 4
+  },
+
+  modules: ['@ant-design-vue/nuxt'],
+  extends: ['@xizs/nuxt-base'],
+  css: [join(currentDir, './app/assets/css/main.css')],
+  vite:{
+    plugins: [tailwindcss()],
+  }
+})

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@xizs/nuxt-antui",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint .",
+    "postinstall": "nuxt prepare .playground"
+  },
+  "dependencies": {
+    "@ant-design-vue/nuxt": "1.4.6",
+    "@tailwindcss/vite": "^4.1.3",
+    "@xizs/nuxt-base": "^0.0.4",
+    "ant-design-vue": ">=4",
+    "nuxt": "^3.16.2",
+    "tailwindcss": "^4.0.14",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  }
+}

package/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.playground/.nuxt/tsconfig.json",
+}