@aoao-y33/ui 0.0.2

package/src/form/hoc/useFormExpose.ts

@@ -0,0 +1,97 @@
+import type {Ref} from "vue";
+import type {AxFormInstance} from "@/form";
+
+/**
+ * 表单暴露钩子函数，提供统一的表单操作接口
+ *
+ * 该函数封装了表单的各种操作方法，包括获取值、设置值、重置等，
+ * 并通过泛型提供类型安全的访问方式
+ *
+ * @template T - 表单数据类型，必须是一个记录类型的对象
+ * @param form - 表单实例的Ref引用，指向AxFormInstance类型
+ * @returns 返回包含各种表单操作方法的对象
+ */
+export type FormApi<T extends Record<string, any>> = ReturnType<typeof useFormExpose<T>>;
+
+export function useFormExpose<T extends Record<string, any>>(form:Ref<AxFormInstance>){
+
+    /**
+     * 获取底层的Element UI表单实例
+     *
+     * @returns Element UI表单实例
+     */
+    const getElForm = () => {
+        return form.value.getElForm();
+    }
+
+    /**
+     * 获取表单的所有字段值
+     *
+     * @returns 表单所有字段的值对象，类型为T
+     */
+    const getValues = ():T => {
+        return form.value.getValues() as T;
+    }
+
+    /**
+     * 获取表单指定字段的值
+     *
+     * @param field - 要获取值的字段名称
+     * @returns 指定字段的值，类型为该字段在T中的对应类型
+     */
+    const getValue = (field:keyof T):T[keyof T] => {
+        return form.value.getValue(field as string) as T[keyof T];
+    }
+
+    /**
+     * 获取表单的所有字段名称列表
+     *
+     * @returns 表单字段名称数组，每个元素都是T的键类型
+     */
+    const getFields = ():(keyof T)[] => {
+        return form.value.getFields() as (keyof T)[];
+    }
+
+    /**
+     * 获取表单字段的默认值
+     *
+     * @returns 包含默认值的对象，可能只包含部分字段，类型为Partial<T>
+     */
+    const getDefaultValues = ():Partial<T> => {
+        return form.value.getDefaultValues() as Partial<T>;
+    }
+
+
+    /**
+     * 批量设置表单字段的值
+     *
+     * @param values - 要设置的值对象，可以只包含部分字段，类型为Partial<T>
+     */
+    const setValues = (values:Partial<T>) => {
+        form.value.setValues(values);
+    }
+
+    /**
+     * 重置表单所有字段的值到默认状态
+     */
+    const resetValues = () => {
+        form.value.resetValues();
+    }
+
+    /**
+     * 清空表单所有字段的值
+     */
+    const clearValues = () => {
+        form.value.clearValues();
+    }
+    return {
+        getElForm,
+        getValues,
+        getValue,
+        getFields,
+        getDefaultValues,
+        setValues,
+        resetValues,
+        clearValues
+    }
+}

package/src/form/hoc/useFormFetch.ts

@@ -0,0 +1,103 @@
+import type {Ref} from "vue";
+import type {AxFormInstance} from "@/form";
+import type {FetchOptions, RequestFetch} from "@aoao-y33/hooks";
+
+export type FormFetchApi<T extends Record<string, any>> = ReturnType<typeof useFormFetch<T>>
+/**
+ * 表单数据获取钩子函数，提供表单相关的API请求和数据加载功能
+ *
+ * 该函数封装了表单的配置设置、API绑定、数据加载等操作，
+ * 用于处理表单与服务端的数据交互
+ *
+ * @template T - 表单数据类型，必须是一个记录类型的对象
+ * @param formRef - 表单实例的Ref引用，指向AxFormInstance类型
+ * @returns 返回包含各种表单数据操作方法的对象
+ */
+export function useFormFetch<T extends Record<string, any>,R=any>(formRef: Ref<AxFormInstance>) {
+
+    /**
+     * 设置表单的配置信息
+     *
+     * @param config - 表单配置选项，包含请求配置等信息
+     */
+    const setConfig = (config: FetchOptions<T, R>) => {
+        formRef.value.setConfig(config)
+    }
+
+    /**
+     * 设置表单的请求API方法
+     *
+     * @param api - 请求方法，用于从服务端获取或提交数据
+     */
+    const setApi = (api: RequestFetch<T, R>) => {
+        formRef.value.setApi(api)
+    }
+
+    /**
+     * 加载表单数据，可选择传入参数
+     *
+     * @param params - 可选的查询参数，用于过滤或指定要加载的数据
+     * @returns 返回Promise，解析为加载的数据结果
+     */
+    const load = (params?: T) => {
+        return formRef.value.load(params)
+    }
+
+    /**
+     * 获取当前表单的配置信息
+     *
+     * @returns 表单配置对象
+     */
+    const getConfig = () => {
+        return formRef.value.getConfig()
+    }
+
+    /**
+     * 获取表单实例
+     *
+     * @returns 表单实例对象
+     */
+    const get = () => {
+        return formRef.value.get()
+    }
+
+    /**
+     * 检查表单是否已准备好使用
+     *
+     * @returns 表单准备状态
+     */
+    const getReady = () => {
+        return formRef.value.getReady()
+    }
+
+    /**
+     * 设置表单参数，并可选择是否立即加载数据
+     *
+     * @param data - 要设置的参数数据
+     * @param load - 可选标志，指示设置参数后是否立即执行加载操作
+     * @returns 返回操作结果
+     */
+    const setParams = (data: T, load?: boolean) => {
+        return formRef.value.setParams(data, load)
+    }
+
+    /**
+     * 重新加载表单数据
+     *
+     * @returns 返回Promise，解析为重新加载的数据结果
+     */
+    const reload = () => {
+        return formRef.value.reload()
+    }
+
+    return{
+        setConfig,
+        setApi,
+        load,
+        getConfig,
+        get,
+        getReady,
+        setParams,
+        reload
+    }
+}

package/src/form/index.ts

@@ -0,0 +1,5 @@
+export * from './components/form';
+export * from './components/form-item';
+export * from './components/fields';
+export * from './utils';
+export * from './hoc';

package/src/form/utils/index.ts

@@ -0,0 +1,149 @@
+import type {Component} from "vue";
+import type {FormItemRule} from "element-plus";
+
+/**
+ * 表单项验证规则类型
+ * 支持三种形式的规则定义：
+ * - 直接的 FormItemRule 对象
+ * - 返回 FormItemRule 的函数（无参数）
+ * - 返回 FormItemRule 的函数（接收类型和标签参数）
+ */
+export type VFormItemRule =
+    FormItemRule
+    | (() => FormItemRule)
+    | ((type: string,label?: string) => FormItemRule)
+
+/**
+ * 表单字段组件注册表
+ * 存储字段类型与对应 Vue 组件的映射关系
+ * @example
+ * // 注册自定义输入组件
+ * formFields['custom-input'] = CustomInputComponent
+ */
+export const formFields: Record<string, Component> = {};
+
+/**
+ * 表单验证规则注册表
+ * 预定义了常用的表单验证规则
+ *
+ * 内置规则包括：
+ * - required: 必填验证，根据字段类型自动显示"请输入"或"请选择"
+ * - required2: 自定义验证器实现的必填验证
+ * - phone: 手机号格式验证（11位数字，以1开头，第二位3-9）
+ * - tel: 电话号码格式验证（带可选区号）
+ * - mail: 邮箱地址格式验证
+ */
+export const formRules:Record<string, VFormItemRule> = {
+    /**
+     * 必填验证规则
+     * @param type - 字段类型，用于判断提示文本
+     * @param label - 字段标签名称
+     * @returns 验证规则对象
+     */
+    "required":(type:string,label:string="")=>
+        ({'required':true,message:isTip(type)+label}),
+
+    /**
+     * 基于自定义验证器的必填验证
+     * 使用 validator 函数实现更灵活的验证逻辑
+     */
+    "required2":()=>
+        ({
+            validator:(_:any,value:any,cb:any)=>{
+                if(!value){
+                    cb(new Error())
+                }else {
+                    cb();
+                }
+            }
+        }),
+
+    /**
+     * 手机号验证规则
+     * 匹配规则：^1[3-9]\d{9}$
+     * @param _ - 占位参数
+     * @param label - 字段标签名称，用于错误提示
+     */
+    "phone": (_,label="") =>
+        ({pattern: /^1[3-9]\d{9}$/, message: `${label}格式错误`}),
+
+    /**
+     * 固定电话号码验证规则
+     * 匹配规则：支持带区号或不带区号的格式，如 010-12345678 或 12345678
+     * @param _ - 占位参数
+     * @param label - 字段标签名称，用于错误提示
+     */
+    "tel":(_,label="")=>
+        ({pattern: /^(\d{3,4}-?)?\d{7,8}$/, message: `${label}格式错误`}),
+
+    /**
+     * 电子邮箱验证规则
+     * 匹配规则：标准邮箱格式（用户名@域名.后缀）
+     * @param _ - 占位参数
+     * @param label - 字段标签名称，用于错误提示
+     */
+    "mail":(_,label="")=>
+        ({pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: `${label}格式错误`}),
+}
+
+/**
+ * 注册新的表单字段组件
+ * 将自定义组件添加到表单字段注册表中
+ *
+ * @param type - 字段类型标识符（唯一）
+ * @param component - 对应的 Vue 组件
+ *
+ * @warning 如果类型已存在，会输出警告信息并阻止重复注册
+ *
+ * @example
+ * import CustomInput from './CustomInput.vue'
+ * addFormField('custom-input', CustomInput)
+ */
+export const addFormField = (type: string, component: Component) => {
+    if (type in formFields) {
+        console.warn(`${type} has in formFields`);
+        return;
+    }
+    formFields[type] = component;
+}
+
+/**
+ * 注册新的表单验证规则
+ * 将自定义验证规则添加到规则注册表中
+ *
+ * @param type - 规则类型标识符（唯一）
+ * @param rule - 验证规则对象或函数
+ *
+ * @throws 如果规则类型已存在，抛出错误信息
+ *
+ * @example
+ * addFormRules('idCard', (type, label) => ({
+ *   pattern: /^\d{17}[\dXx]$/,
+ *   message: `${label}身份证号格式错误`
+ * }))
+ */
+export const addFormRules=(type:string,rule:any)=>{
+    if(type in formRules){
+        throw `${type}类形的规则已存在`
+    }
+    formRules[type] = rule;
+}
+
+/**
+ * 根据字段类型获取验证提示前缀
+ * 对于选择类组件返回"请选择"，其他类型返回"请输入"
+ *
+ * @param type - 字段类型
+ * @returns 提示文本前缀
+ *
+ * @example
+ * isTip('input')      // "请输入"
+ * isTip('select')     // "请选择"
+ * isTip('checkbox')   // "请选择"
+ */
+export const isTip=(type:string)=>{
+    if(["select","checkbox","cascade"].includes(type)){
+        return "请选择";
+    }
+    return "请输入";
+}

package/src/global.ts

@@ -0,0 +1,40 @@
+// global.ts
+// @ts-ignore
+
+import type { AxButton } from './button'
+import type { AxForm } from './form'
+import type { AxFormItem } from './form'
+import type { AxLayout } from './layout'
+import type { AxModal } from './modal'
+import type { AxTable, AxTablePage, AxTableSelect, AxTableColumn } from './table'
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        AxButton: typeof AxButton
+        AxForm: typeof AxForm
+        AxFormItem: typeof AxFormItem
+        AxLayout: typeof AxLayout
+        AxModal: typeof AxModal
+        AxTable: typeof AxTable
+        AxTablePage: typeof AxTablePage
+        AxTableSelect: typeof AxTableSelect
+        AxTableColumn: typeof AxTableColumn
+    }
+}
+
+// 添加组件名称的 kebab-case 版本支持
+declare module 'vue' {
+    export interface GlobalComponents {
+        'ax-button': typeof AxButton
+        'ax-form': typeof AxForm
+        'ax-form-item': typeof AxFormItem
+        'ax-layout': typeof AxLayout
+        'ax-modal': typeof AxModal
+        'ax-table': typeof AxTable
+        'ax-table-page': typeof AxTablePage
+        'ax-table-select': typeof AxTableSelect
+        'ax-table-column': typeof AxTableColumn
+    }
+}
+
+export {}

package/src/index.ts

@@ -0,0 +1,37 @@
+import './style/index.css';
+import type {App} from "vue";
+import './global';
+import {AxButton, initButtonFields} from "@/button";
+import {AxForm, AxFormItem, initFormFields} from "@/form";
+import {AxLayout, initLayoutFields} from "@/layout";
+import {AxTable, AxTableColumn, AxTablePage, AxTableSelect, initTableColumns} from "@/table";
+import {AxModal} from "@/modal";
+
+export * from './modal';
+export * from './button';
+export * from './form';
+export * from './layout';
+export * from './table';
+export * from './common';
+initButtonFields();
+initFormFields();
+initLayoutFields();
+initTableColumns();
+
+export default {
+    install(app: App) {
+        initFormFields();
+        initLayoutFields();
+        initTableColumns();
+        initButtonFields();
+        app.component("ax-button", AxButton);
+        app.component("ax-form", AxForm);
+        app.component("ax-form-item", AxFormItem);
+        app.component("ax-layout", AxLayout);
+        app.component("ax-modal", AxModal);
+        app.component("ax-table", AxTable);
+        app.component("ax-table-page", AxTablePage);
+        app.component("ax-table-select", AxTableSelect);
+        app.component("ax-table-column", AxTableColumn);
+    }
+}

package/src/layout/components/fields/basic/basic.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="w-full h-full flex flex-col overflow-hidden">
+    <header class="w-full">
+      <slot name="header"></slot>
+    </header>
+    <main class="flex flex-1 overflow-hidden h-full">
+      <aside class="h-full overflow-hidden">
+        <slot name="aside"></slot>
+      </aside>
+      <main class="flex-1 flex overflow-hidden h-full">
+        <slot name="main"></slot>
+      </main>
+    </main>
+    <footer class="w-full">
+      <slot name="footer"></slot>
+    </footer>
+  </div>
+</template>

package/src/layout/components/fields/index.ts

@@ -0,0 +1,10 @@
+import basic from './basic/basic.vue';
+import side from './side/side.vue';
+import top from './top/top.vue';
+import {addLayoutField} from "@/layout";
+
+export const initLayoutFields = () => {
+    addLayoutField('basic', basic);
+    addLayoutField('side', side);
+    addLayoutField('top', top);
+}

package/src/layout/components/fields/side/side.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="w-full h-full flex overflow-hidden">
+    <aside class="h-full overflow-hidden">
+      <slot name="aside"></slot>
+    </aside>
+    <main class="h-full flex-1 flex flex-col overflow-hidden">
+      <header class="w-full">
+        <slot name="header"></slot>
+      </header>
+      <main class="flex-1 w-full overflow-hidden">
+        <slot name="main"></slot>
+      </main>
+      <footer class="w-full">
+        <slot name="footer"></slot>
+      </footer>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/src/layout/components/fields/top/top.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex flex-col w-full h-full">
+    <header class="w-full">
+      <slot name="header"></slot>
+    </header>
+    <main class="flex-1 w-full flex overflow-hidden">
+      <slot name="main"></slot>
+    </main>
+    <footer class="w-full">
+      <slot name="footer"></slot>
+    </footer>
+  </div>
+</template>

package/src/layout/components/layout/index.ts

@@ -0,0 +1,6 @@
+import layout from './layout.vue';
+
+export * from './props';
+export const AxLayout = layout;
+export type AxLayoutInstance = InstanceType<typeof layout>;
+export default AxLayout;

package/src/layout/components/layout/layout.vue

@@ -0,0 +1,19 @@
+<template>
+  <Layout>
+    <template v-for="slot in Object.keys(slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import {type AxLayoutProps} from "./props";
+import {computed, useSlots} from "vue";
+import {layoutFields} from "@/layout";
+
+const {type = 'basic'} = defineProps<AxLayoutProps>();
+const slots = useSlots();
+const Layout = computed(()=>{
+  return layoutFields[type]
+})
+</script>

package/src/layout/components/layout/props.ts

@@ -0,0 +1,3 @@
+export interface AxLayoutProps {
+    type?: string;
+}

package/src/layout/hoc/index.ts

@@ -0,0 +1 @@
+export * from './useLayout';

package/src/layout/hoc/useLayout.ts

@@ -0,0 +1,32 @@
+import {type Component, defineComponent, h, shallowRef} from "vue";
+import {AxLayout} from "@/layout";
+import {mergeDeep} from "@aoao-y33/utils";
+
+export interface AxLayoutOptions {
+    type?: string;
+    header?:Component;
+    footer?:Component ;
+    main?:Component ;
+    aside?:Component ;
+}
+export function useLayout(options:AxLayoutOptions={}){
+    const props = shallowRef(options);
+    const setLayout=(options:AxLayoutOptions)=>{
+        props.value = mergeDeep(props.value,options);
+    }
+    const Layout = defineComponent({
+        setup(){
+            const slots:Record<string, Component> = {};
+            const keys = ['header','footer','main','aside'];
+
+            keys.forEach(key=>{
+                if(props.value?.[key as keyof typeof props.value]){
+                    slots[key] = ()=>h(props.value[key as keyof typeof props.value] as Component)
+                }
+            })
+            return ()=>h(AxLayout as any,{type:props.value?.type},slots);
+        }
+    })
+
+    return [Layout,setLayout] as const;
+}

package/src/layout/index.ts

@@ -0,0 +1,4 @@
+export * from './components/layout';
+export * from './components/fields';
+export * from './hoc';
+export * from './utils';

package/src/layout/utils/index.ts

@@ -0,0 +1,31 @@
+import type {Component} from "vue";
+
+/**
+ * 布局组件注册表
+ * 存储布局类型与对应 Vue 组件的映射关系
+ * @example
+ * // 注册自定义布局组件
+ * addLayoutField('sidebar', SidebarLayoutComponent)
+ */
+export const layoutFields:Record<string, Component> = {};
+
+/**
+ * 注册新的布局类型组件
+ * 将自定义布局组件添加到布局类型注册表中
+ *
+ * @param type - 布局类型标识符（唯一）
+ * @param component - 对应的 Vue 组件
+ *
+ * @warning 如果类型已存在，会输出警告信息并阻止重复注册
+ *
+ * @example
+ * import CustomLayout from './CustomLayout.vue'
+ * addLayoutField('custom-layout', CustomLayout)
+ */
+export const addLayoutField = (type: string, component: Component) => {
+    if (type in layoutFields) {
+        console.warn(`[AxLayout] Layout type ${type} already exists`)
+        return;
+    }
+    layoutFields[type] = component;
+}