@xizs/nuxt-antui 0.0.10 → 0.0.11

package/app/components/global/FormTable2.tsx

@@ -1,11 +1,12 @@
 import { defineComponent, h, ref } from 'vue'
-import { AForm, AFormItem, AInput, AButton, ATable, ASelect, APagination, ARangePicker, RedoOutlined } from '#components'
+import { AForm, AFormItem, AInput, AButton, ATable, ASelect, APagination, ARangePicker, RedoOutlined, ASwitch, AInputNumber } from '#components'
 import type { TableColumnType } from 'ant-design-vue'
 import dayjs from 'dayjs'
 
-type TableFormItemType = {
+
+type TableFormLabelsItemType = {
     label: string,
-    key: string,
+    key: string | string[],
     is: string,
     bind?: any,
     value?:any
@@ -13,14 +14,15 @@ type TableFormItemType = {
 
 export type TableParamsType = {
     form?: {
-        labels: TableFormItemType[],
-        option: {
+        labels?: TableFormLabelsItemType[],
+        'v-slots'?: Record<string, ()=>any>,
+        option?: {
             search?: boolean,
             reset?: boolean,
             export?: boolean,
         },
     },
-    table: {
+    table?: {
         'v-slots'?:any
         enableSelection?: boolean
         columns: TableColumnType[]
@@ -52,7 +54,7 @@ let dateRange = defineComponent({
             required:true
         },
         item:{
-            type:Object as ()=>TableFormItemType,
+            type:Object as ()=>TableFormLabelsItemType,
             required:true
         },
       
@@ -87,25 +89,28 @@ let dateRange = defineComponent({
 }) 
 
 
-const FormItems:Record<string, (form: any, item: TableFormItemType) => any> = {
-    input: (form: any, item: TableFormItemType) => {
+const FormItems:Record<string, (form: any, item: TableFormLabelsItemType) => any> = {
+    input: (form: any, item: TableFormLabelsItemType) => {
         let {t:$t} = useI18n()
-        return <AInput size="middle" v-model:value={form[item.key]} placeholder={$t(`请输入{label}`,{label:$t(item.label)})}></AInput>
+        return <AInput size="middle" v-model:value={form[item.key as string]} placeholder={$t(`请输入{label}`,{label:$t(item.label)})}></AInput>
     },
-    select: (form: any, item: TableFormItemType) => {
+    numberRange: (form: any, item: TableFormLabelsItemType) => { 
         let {t:$t} = useI18n()
-        return <ASelect allowClear  {...item.bind}  class="min-w-[150px]" v-model:value={form[item.key]} options={item.bind?.options} placeholder={$t(`请选择{label}`,{label:$t(item.label)})}></ASelect>
+        return <div class="flex items-center">
+                <AInputNumber class="!min-w-[150px]" v-model:value={form[item.key[0] as string]} placeholder={$t(`请输入{label}开始`,{label:$t(item.label)})}></AInputNumber>
+                <span class="px-1">-</span>
+                <AInputNumber class="!min-w-[150px]" v-model:value={form[item.key[1] as string]} placeholder={$t(`请输入{label}结束`,{label:$t(item.label)})}></AInputNumber>
+        </div>
     },
-    selectTenant: (form: any, item: TableFormItemType) => { 
-        let { t: $t } = useI18n()
-        watch(Const.TenantSelectList(), (nv) => { 
-            console.log(nv)
-        }, {
-            once: true
-        })
-        return <ASelect allowClear class="min-w-[150px]" v-model:value={form[item.key]} options={Const.TenantSelectList().value} placeholder={$t(`请选择{label}`,{label:$t(item.label)})}></ASelect>
+    select: (form: any, item: TableFormLabelsItemType) => {
+        let {t:$t} = useI18n()
+        return <ASelect allowClear  {...item.bind}  class="min-w-[150px]" v-model:value={form[item.key as string]} options={item.bind?.options} placeholder={$t(`请选择{label}`,{label:$t(item.label)})}></ASelect>
     },
-    dateRange:(form:any,item:TableFormItemType)=>{
+    switch: (form: any, item: TableFormLabelsItemType) => {
+        let {t:$t} = useI18n()
+        return <ASwitch allowClear  {...item.bind}  class="min-w-[150px]" v-model:value={form[item.key as string]} options={item.bind?.options} placeholder={$t(`请选择{label}`,{label:$t(item.label)})}></ASwitch>
+    },
+    dateRange:(form:any,item:TableFormLabelsItemType)=>{
         return h(dateRange,{form,item})
     }
 }
@@ -159,7 +164,7 @@ export default defineComponent({
 
         //form 初始化
         const form = ref<any>({})
-        props.form?.labels.forEach((item) => {
+        props.form?.labels?.forEach((item) => {
             
             if (Array.isArray(item.key)) {
                 item.key.forEach((key,index) => {
@@ -229,7 +234,7 @@ export default defineComponent({
             <div class="flex flex-col gap-2 h-full  ">
                 {/* {JSON.stringify(form.value)} */}
                 {props.form?.labels&&<AForm layout="inline gap-2">
-                    {props.form?.labels?.map((item: TableFormItemType) => {
+                    {props.form?.labels?.map((item: TableFormLabelsItemType) => {
                         return (
                             <AFormItem label={$t(item.label)}>
                                 {FormItems[item.is]?.(form.value,item)}
@@ -239,8 +244,12 @@ export default defineComponent({
                     <div class="flex gap-2">
                         {props.form?.option?.search !== false && <AButton type="primary" onClick={()=>tableData.load()}>{$t('搜索')}</AButton>}
                         {props.form?.option?.reset  !== false && <AButton onClick={() => patch(metaForm,form.value,true)}>{$t('重置')}</AButton>}
-                        {props.form?.option?.export !== false && <AButton type="primary">{$t('导出')}</AButton>}
+                        {props.form?.option?.export === true && <AButton type="primary">{$t('导出')}</AButton>}
                     </div> 
+
+                    <div class="flex ml-auto">
+                        {props.form['v-slots']?.extra?.()}
+                    </div>
                 </AForm>}
                 {slots.center?.()}
                 <div class="flex-1 relative overflow-scroll flex flex-col">

package/app/components/layout/Base.vue

@@ -6,6 +6,7 @@
         collapsed-width="0"
         width="220px"
         :trigger="null"
+        class="overflow-scroll"
       >
         <div class="text-center text-white p-2 text-lg  " >
             {{props.title}}
@@ -15,45 +16,50 @@
 
       <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 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>
-                <div class=" flex items-center">
-                    <div >
-                        <a-dropdown >
-                            <div class="h-[30px] leading-[30px] cursor-pointer">{{ useAdmin().value?.username ?? 'Admin'}}</div>
-                            <template #overlay>
-                                <a-menu>
-                                    <a-menu-item @click="()=>singOut()">
-                                        <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>
-                        </a-dropdown>
+                    <div class=" flex items-center">
+                        <slot name="header-right-extend"></slot>
+                        
+                        <div class="flex items-center p-2 ml-2">
+                            <a-dropdown >
+                                <div class=" cursor-pointer flex items-center">
+                                    <GlobalOutlined  class="text-[26px]" />
+                                </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>
+                            </a-dropdown>
+                        </div>
+                        <div >
+                            <a-dropdown >
+                                <div class="h-[30px] leading-[30px] cursor-pointer">{{ useAdmin().value?.username ?? 'Admin'}}</div>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item v-for="item in props.adminMenu" @click="item.click">
+                                            {{ item.name }}
+                                        </a-menu-item>
+                                        <a-menu-item @click="()=>singOut()">
+                                            <a href="javascript:;">{{$t('退出')}}</a>
+                                        </a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </div>
                     </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">
@@ -62,7 +68,7 @@
             </div>
         </div> -->
         <a-layout-content :style="{ }" class="relative   m-4">
-            <div class="absolute top-0 left-0 right-0 bottom-0">
+            <div class="absolute top-0 left-0 right-0 bottom-0 overflow-scroll">
                 <slot ></slot>
             </div>
         </a-layout-content>
@@ -77,10 +83,15 @@ const collapsed = ref(false)
 
 const props = defineProps<{
     title:string,
-    menu: MenuItemType[]
+    menu: MenuItemType[],
+    adminMenu:{
+        name:string,
+        click:()=>void
+    }[]
 }>()
 
 let routeInfo = useRouteInfo(props.menu)
 
+
 </script>
 

package/app/components/layout/Menu.vue

@@ -69,8 +69,8 @@ const items = computed(()=>{
 let routeInfo = useRouteInfo(props.items)
 
 onMounted(()=>{
-    state.selectedKeys=routeInfo.value.paths
-    state.openKeys=routeInfo.value.paths
+    state.selectedKeys=routeInfo?.value?.paths
+    state.openKeys=routeInfo?.value?.paths
 })
 
 

package/app/composables/menu.ts

@@ -0,0 +1,56 @@
+
+export const useRouteInfo = (menuItems: any[]) =>
+    useState('routeName', () => {
+        const info = ref({
+            name: '',
+            names: [] as string[],
+            paths: [] as string[],
+        })
+        console.log(menuItems)
+
+        const route = useRoute()
+
+        const findPath = (
+            items: any[],
+            targetPath: string,
+            parents: { title: string; path: string }[] = []
+        ): { titles: string[]; paths: string[] } | null => {
+            for (const item of items) {
+                const current = [...parents, { title: item.title, path: item.path }]
+                if (item.path === targetPath) {
+                    return {
+                        titles: current.map((i) => i.title),
+                        paths: current.map((i) => i.path),
+                    }
+                }
+                if (item.children) {
+                    const result = findPath(item.children, targetPath, current)
+                    if (result) return result
+                }
+            }
+            return null
+        }
+
+        watch(
+            () => route.fullPath,
+            () => {
+                const match = findPath(menuItems, route.path)
+                if (match) {
+                    info.value = {
+                        name: match.titles.at(-1) || '',
+                        names: match.titles,
+                        paths: match.paths,
+                    }
+                } else {
+                    info.value = {
+                        name: '',
+                        names: [],
+                        paths: [],
+                    }
+                }
+            },
+            { immediate: true }
+        )
+
+        return info
+    })

package/app/composables/table.ts

@@ -58,6 +58,17 @@ export const TablePage = (props: TablePropsType) => {
     }
 }
 
+export const TablePage2 = (props: TableParamsType) => {
+    let TableParams = FormTable2(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 Table = {
     Normal: FormTable,

package/nuxt.config.ts

@@ -21,6 +21,13 @@ export default defineNuxtConfig({
   i18n: {
     defaultLocale: 'zh',
     strategy: 'no_prefix',
+     compilation: {
+      strictMessage: false,
+      escapeHtml: true,
+    },
+     bundle: {
+    optimizeTranslationDirective: false
+  },
     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.10",
+  "version": "0.0.11",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/tsconfig.json

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

package/app/components/global/TablePage.tsx

@@ -1,15 +0,0 @@
-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>
-    }
-})