@aoao-y33/ui 0.0.2

package/src/button/components/button/props.ts

@@ -0,0 +1,75 @@
+import {buttonFields} from "@/button";
+import type {ButtonProps} from "element-plus";
+import type {EmitsToEventProps} from '@aoao-y33/utils';
+import type {Component} from "vue";
+
+/**
+ * AxButton 按钮组件属性接口
+ * @template E - 事件数据类型，用于控制按钮显示/隐藏的上下文数据
+ * @template T - Element Plus ButtonProps 类型扩展
+ */
+export interface AxButtonProps<E = any, T = ButtonProps> {
+    /** 按钮显示的文本内容 */
+    text?: string
+
+    /**
+     * 按钮类型，对应预定义的按钮样式配置
+     * @see buttonFields - 预定义的按钮类型映射表
+     */
+    type?: keyof typeof buttonFields
+
+    /** Element Plus 按钮的额外属性配置 */
+    componentProps?: T
+
+    /** 自定义 CSS 类名 */
+    className?: string,
+
+    /**
+     * 按钮图标，支持字符串（图标类名）或 Vue 组件形式
+     * @example "el-icon-search" | IconComponent
+     */
+    icon?:string|Component,
+
+    /**
+     * 按钮禁用状态控制
+     * - 布尔值：直接设置禁用状态
+     * - 函数：根据上下文数据动态计算禁用状态
+     * @param data - 传入的上下文数据
+     * @returns 是否禁用
+     */
+    disabled?: ((data: E) => boolean) | (boolean)
+
+    /**
+     * 按钮隐藏状态控制
+     * - 布尔值：直接设置隐藏状态
+     * - 函数：根据上下文数据动态计算隐藏状态
+     * @param data - 传入的上下文数据
+     * @returns 是否隐藏
+     */
+    hidden?: ((data: E) => boolean) | (boolean)
+
+    /** 是否添加左边距，用于按钮间距控制 */
+    isMl?:boolean
+}
+
+/**
+ * AxButton 按钮组件事件发射接口
+ * @template T - 事件携带的数据类型
+ */
+export interface AxButtonEmits<T = any> {
+    /** 单击事件 */
+    "click": [data: T]
+    /** 双击事件 */
+    "dblClick": [data: T]
+}
+
+/**
+ * AxButton 按钮配置选项接口
+ * 继承自 AxButtonProps 并合并事件处理属性
+ * @template E - 事件数据类型
+ * @template T - Element Plus ButtonProps 类型扩展
+ */
+export interface AxButtonOptions<E = any, T = ButtonProps>
+    extends AxButtonProps<E, T>,
+        Partial<EmitsToEventProps<AxButtonEmits<E>>> {
+}

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

@@ -0,0 +1,6 @@
+import {ElButton} from "element-plus";
+import {addButtonField} from "@/button";
+
+export const initButtonFields=()=>{
+    addButtonField("default",ElButton);
+}

package/src/button/hoc/index.ts

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

package/src/button/hoc/useButton.ts

@@ -0,0 +1,27 @@
+import {AxButton, type AxButtonOptions} from "@/button";
+import {useState} from "@aoao-y33/hooks";
+import {defineComponent, h} from "vue";
+import type {ButtonProps} from "element-plus";
+
+/**
+ * 按钮高阶函数 - 用于创建可动态配置的按钮组件
+ *
+ * @template E - 事件类型，默认为 any
+ * @template T - 按钮属性类型，默认为 ButtonProps
+ * @param options - 按钮初始配置选项
+ * @returns 返回一个元组 [Button组件, setButton更新函数]
+ *
+ * @example
+ * const [MyButton, setButton] = useButton({ text: '点击' });
+ * // 后续可以通过 setButton 动态更新按钮属性
+ * setButton({ text: '新文本', disabled: true });
+ */
+export function useButton<E=any,T=ButtonProps>(options:AxButtonOptions<E,T>={}){
+    const [props,setButton] = useState(options);
+    const Button = defineComponent({
+        setup(){
+            return ()=>h(AxButton as any,{...props.value})
+        }
+    })
+    return [Button,setButton] as const;
+}

package/src/button/index.ts

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

package/src/button/utils/index.ts

@@ -0,0 +1,32 @@
+import type {Component} from "vue";
+
+/**
+ * 按钮类型注册表
+ * 存储自定义按钮类型与对应组件的映射关系
+ * @example
+ * // 注册自定义按钮
+ * addButtonField('primary', CustomButtonComponent)
+ */
+export const buttonFields:Record<string, Component>= {};
+
+/**
+ * 注册新的按钮类型
+ * 将自定义按钮组件添加到按钮类型注册表中
+ *
+ * @param type - 按钮类型标识符（唯一）
+ * @param component - 对应的 Vue 组件
+ *
+ * @warning 如果类型已存在，会输出警告信息但不会阻止注册
+ *
+ * @example
+ * import CustomButton from './CustomButton.vue'
+ * addButtonField('custom', CustomButton)
+ */
+export const addButtonField =(type:string,component:Component)=>{
+    // 检查是否已存在相同类型的按钮
+    for (type in buttonFields){
+        console.warn(`[AxButton] Button type ${type} already exists`)
+    }
+    // 注册新的按钮类型
+    buttonFields[type] = component;
+}

package/src/common/index.ts

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

package/src/common/utils/iconUtils.ts

@@ -0,0 +1,21 @@
+import * as Icons from '@element-plus/icons-vue';
+
+/**
+ * 根据图标名称获取 Element Plus 图标组件
+ *
+ * @param icon - 图标名称（需与 Element Plus Icons 中的导出名称一致）
+ * @returns 对应的图标组件，如果不存在则返回 undefined
+ *
+ * @example
+ * // 获取搜索图标
+ * const SearchIcon = getIcons('Search')
+ *
+ * @example
+ * // 在模板中使用
+ * <component :is="getIcons('HomeFilled')" />
+ *
+ * @see {@link https://element-plus.org/zh-CN/component/icon.html Element Plus Icons}
+ */
+export const getIcons = (icon: string) => {
+    return (Icons as any)[icon];
+}

package/src/common/utils/index.ts

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

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

@@ -0,0 +1,35 @@
+import {
+    ElInput,
+    ElSelect,
+    ElCascader,
+    ElRadioGroup,
+    ElCheckboxGroup,
+    ElColorPicker,
+    ElColorPickerPanel,
+    ElDatePicker, ElTimePicker, ElInputNumber,
+    ElInputOtp,
+    ElSwitch, ElRate, ElSlider, ElUpload,
+    ElSelectV2, ElTransfer, ElTreeSelect,
+} from "element-plus";
+import {addFormField} from "@/form";
+
+export const initFormFields = () => {
+    addFormField('text', ElInput);
+    addFormField('select', ElSelect);
+    addFormField('cascade', ElCascader);
+    addFormField('radio', ElRadioGroup);
+    addFormField('checkbox', ElCheckboxGroup);
+    addFormField("color", ElColorPicker);
+    addFormField("date", ElDatePicker);
+    addFormField("time", ElTimePicker);
+    addFormField("number", ElInputNumber);
+    addFormField("color-panel", ElColorPickerPanel);
+    addFormField("otp", ElInputOtp);
+    addFormField("rate", ElRate);
+    addFormField("switch", ElSwitch);
+    addFormField("slider", ElSlider);
+    addFormField("upload", ElUpload);
+    addFormField("transfer", ElTransfer);
+    addFormField("select-v2", ElSelectV2);
+    addFormField("tree", ElTreeSelect);
+}

package/src/form/components/form/form.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {ElForm, ElFormItem, vLoading, type FormInstance} from "element-plus";
+import {AxButton} from "@/button";
+import type {AxFormEmits, AxFormProps} from "./props";
+import {useDefineProps, useFetch} from "@aoao-y33/hooks";
+import {computed, provide, reactive, type Ref, ref, useSlots, watch} from "vue";
+
+defineOptions({name: 'AxForm'})
+const {
+  isDefault = true,
+  submitButton = {},
+  loading = false,
+  api = null,
+  apiConfig = {},
+  ...props
+} = defineProps<AxFormProps>();
+
+const emits = defineEmits<AxFormEmits>()
+
+const slots = useSlots();
+
+const formProps = useDefineProps(props);
+
+const defaultButton = useDefineProps(submitButton, {
+  text: "提交",
+  icon: "CircleCheckFilled",
+  componentProps: {
+    type: "primary",
+    nativeType: "submit",
+  }
+})
+
+const formData = reactive({});
+
+provide("formData", formData);
+
+provide("clickData", formData);
+
+const defaultData = reactive({});
+
+provide("defaultData", defaultData);
+
+const [, requestApi] = useFetch(api, apiConfig)
+
+watch(() => formData, () => {
+  emits("change", formData);
+}, {immediate: true})
+
+const formRef = ref<FormInstance>() as Ref<FormInstance>;
+
+const _loading = computed(() => {
+  return Boolean(loading || requestApi.getConfig().loading);
+})
+
+const onSubmit = () => {
+  formRef.value?.validate().then(async (res) => {
+    if (res) {
+      if (requestApi.getReady()) {
+        await requestApi.load(formData);
+      } else {
+        emits("submit", formData);
+      }
+    }
+  })
+}
+
+
+const getElForm = () => {
+  return formRef.value
+}
+
+const getValues = () => {
+  return Object.assign({}, formData);
+}
+
+const getValue = (fieldName: string) => {
+  return (formData as Record<string, any>)[fieldName]
+}
+const getFields = () => {
+  return Object.keys(formData);
+}
+
+const getDefaultValues = () => {
+  return Object.assign({}, defaultData);
+}
+
+const setValues = (values: Record<string, any>) => {
+  Object.assign(formData, values);
+}
+
+const resetValues = () => {
+  Object.assign(formData, defaultData);
+}
+
+const clearValues = () => {
+  Object.keys(formData).forEach(fieldName => {
+    (formData as Record<string, any>)[fieldName] = undefined;
+  })
+}
+
+defineExpose({
+  getElForm,
+  getValues,
+  getValue,
+  getFields,
+  getDefaultValues,
+  setValues,
+  resetValues,
+  clearValues,
+  ...requestApi
+})
+
+</script>
+<template>
+  <ElForm v-bind="formProps"
+          :model="formData"
+          ref="formRef"
+          @submit.prevent
+          v-loading="_loading">
+    <slot></slot>
+    <ElFormItem
+        v-if="slots.button||isDefault"
+        :label="labelWidth=='auto'?' ':''">
+      <ax-button v-if="isDefault"
+                 v-bind="defaultButton"
+                 @click="onSubmit"></ax-button>
+      <slot name="button"/>
+    </ElFormItem>
+  </ElForm>
+</template>

package/src/form/components/form/index.ts

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

package/src/form/components/form/props.ts

@@ -0,0 +1,73 @@
+import type {FormProps} from "element-plus";
+import type {AxButtonOptions, AxButtonProps} from "@/button";
+import type {FetchOptions, FieldsConfig, RequestFetch} from "@aoao-y33/hooks";
+import type {EmitsToEventProps} from "@aoao-y33/utils";
+import type {AxFormItemOptions} from "@/form";
+
+/**
+ * AxForm 表单组件属性接口
+ * 继承自 Element Plus FormProps，扩展了自定义功能
+ * @template T - 表单数据类型，必须是对象类型
+ */
+export interface AxFormProps<T extends Record<string, any> = any> extends Omit<FormProps, 'model'> {
+    /** 是否使用默认配置，启用后将自动应用预设的表单样式和行为 */
+    isDefault?:boolean;
+
+    /** 提交按钮的配置项，用于自定义表单提交按钮的外观和行为 */
+    submitButton?: AxButtonProps;
+
+    /** 表单提交时的加载状态，通常在异步请求期间显示 */
+    loading?:boolean,
+
+    /**
+     * API 请求函数，用于表单数据提交
+     * @see RequestFetch - 请求函数类型定义
+     */
+    api?:RequestFetch<T,any>;
+
+    /**
+     * API 请求配置项，包含请求参数、拦截器等配置
+     * @see FetchOptions - 请求配置选项类型
+     */
+    apiConfig?:FetchOptions<T, any>;
+}
+
+/**
+ * AxForm 表单组件事件发射接口
+ * @template T - 表单数据类型
+ */
+export interface AxFormEmits<T extends Record<string, any> = Record<string, any>> {
+    /**
+     * 表单提交事件
+     * @param data - 表单提交的数据
+     */
+    'submit':[data:T];
+
+    /**
+     * 表单数据变化事件
+     * @param data - 变化后的表单数据
+     */
+    'change':[data:T];
+}
+
+/**
+ * AxForm 表单配置选项接口
+ * 继承自 AxFormProps 并合并事件处理属性和字段配置
+ * @template T - 表单数据类型
+ */
+export interface AxFormOptions<T extends Record<string, any> = any>
+    extends AxFormProps<T>,Partial<EmitsToEventProps<AxFormEmits<T>>>{
+    /**
+     * 按钮配置映射表，用于配置表单中的各种按钮（提交、重置等）
+     * @see FieldsConfig - 字段配置类型
+     * @see AxButtonOptions - 按钮选项类型
+     */
+    buttonConfig?:FieldsConfig<AxButtonOptions>
+
+    /**
+     * 表单项配置映射表，用于配置表单中各个字段的属性、验证规则等
+     * @see FieldsConfig - 字段配置类型
+     * @see AxFormItemOptions - 表单项选项类型
+     */
+    fieldConfig?:FieldsConfig<AxFormItemOptions>
+}

package/src/form/components/form-item/form-item.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {ElFormItem, type FormItemInstance} from "element-plus";
+import type {AxFormItemProps} from "./props";
+import {computed, inject, onUnmounted, ref, useAttrs, useSlots} from "vue";
+import {formFields, formRules, isTip} from "@/form";
+import {useDefineProps} from "@aoao-y33/hooks";
+
+defineOptions({name: 'ax-form-item'});
+const {
+  type = 'text',
+  fieldName,
+  label = "",
+  componentProps = {},
+  placeholder,
+  vtypes = [],
+  rules = [],
+  defaultValue,
+  ...props
+} = defineProps<AxFormItemProps>()
+const attrs = useAttrs();
+const slots = useSlots();
+const itemProps = useDefineProps(props);
+const formData = inject('formData', null) as Record<string, any> | null;
+const defaultData = inject('defaultData', {}) as Record<string, any>;
+if (formData) {
+  defaultData[fieldName] = defaultValue;
+  formData[fieldName] = defaultData[fieldName];
+}
+const FormField = computed(() => {
+  return formFields[type];
+})
+const _placeholder = computed(() => {
+  if (placeholder) {
+    return placeholder;
+  }
+  return isTip(type) + (label || '');
+})
+const _rules = computed(() => {
+  const validates = vtypes.map(item => {
+    if (typeof formRules[item] === 'function') {
+      return formRules[item](type, label);
+    }
+    return formRules[item];
+  });
+  return validates.concat(rules) as any;
+})
+
+onUnmounted(() => {
+  if (formData) {
+    delete formData[fieldName as string];
+  }
+})
+
+const formItemRef = ref<FormItemInstance>();
+
+const instanceRef = ref<typeof FormField.value>();
+
+const getElFormItem=()=>{
+  return formItemRef.value as FormItemInstance;
+}
+const getFormField=()=>{
+  return instanceRef.value as any
+}
+
+defineExpose({
+  getElFormItem,
+  getFormField
+})
+</script>
+<template>
+  <ElFormItem
+      v-if="formData"
+      v-bind="itemProps"
+      :label="label"
+      :prop="fieldName"
+      :rules="_rules"
+      ref="formItemRef"
+  >
+    <FormField
+        ref="instanceRef"
+        v-bind="{...componentProps,...attrs}"
+        v-model="formData[fieldName]"
+        :placeholder="_placeholder"
+    >
+      <template v-for="slot in Object.keys(slots)" #[slot]>
+        <slot :name="slot"></slot>
+      </template>
+    </FormField>
+  </ElFormItem>
+</template>

package/src/form/components/form-item/index.ts

@@ -0,0 +1,6 @@
+import FormItem from './form-item.vue';
+
+export * from './props';
+export const AxFormItem = FormItem;
+export type AxFormItemInstance = InstanceType<typeof FormItem>;
+export default AxFormItem;

package/src/form/components/form-item/props.ts

@@ -0,0 +1,50 @@
+import type {FormItemProps} from "element-plus";
+
+/**
+ * AxFormItem 表单项组件属性接口
+ * 继承自 Element Plus FormItemProps，扩展了自定义字段配置功能
+ */
+export interface AxFormItemProps extends FormItemProps{
+    /** 字段名称，用于表单数据绑定和验证的唯一标识 */
+    fieldName:string;
+
+    /** 表单项的标签文本，显示在输入框左侧或上方 */
+    label?: string;
+
+    /**
+     * 表单项类型，决定渲染的输入组件类型
+     * @example 'input' | 'select' | 'textarea' | 'date-picker' 等
+     */
+    type?: string;
+
+    /**
+     * 验证规则类型数组，用于表单字段验证
+     * @example ['required', 'email', 'phone'] 等预定义验证规则
+     */
+    vtypes?: string[];
+
+    /** 字段的默认值，当表单初始化时自动填充 */
+    defaultValue?: any;
+
+    /**
+     * 底层组件的额外属性配置
+     * 透传给实际渲染的输入组件（如 Input、Select 等）
+     */
+    componentProps?:Record<string, any>
+
+    /** 输入框的占位符文本，提示用户输入内容 */
+    placeholder?:string
+}
+
+/**
+ * AxFormItem 表单项配置选项接口
+ * 继承自 AxFormItemProps，增加了插槽配置能力
+ */
+export interface AxFormItemOptions extends AxFormItemProps{
+    /**
+     * 自定义插槽配置，用于覆盖表单项的默认渲染内容
+     * key 为插槽名称，value 为插槽内容或渲染函数
+     * @example { default: () => h('div', '自定义内容') }
+     */
+    slots?:Record<string, any>
+}

package/src/form/hoc/index.ts

@@ -0,0 +1,3 @@
+export * from './useForm';
+export * from './useFormExpose';
+export * from './useFormFetch';

package/src/form/hoc/useForm.ts

@@ -0,0 +1,106 @@
+import {AxForm, AxFormItem, type AxFormItemOptions, useFormExpose, useFormFetch} from "@/form";
+import {AxButton} from '@/button';
+import { type AxButtonOptions} from "@/button";
+import {type FieldsApi, useComponentPool, useState} from "@aoao-y33/hooks";
+import {omit} from "lodash";
+import type {AxFormInstance, AxFormOptions, FormApi, FormFetchApi} from '@/form';
+import type { StateApi} from "@aoao-y33/hooks";
+import {type Component, defineComponent, h, type Ref, ref} from "vue";
+
+/**
+ * UseForm 返回值中的 API 接口
+ * 扩展了基础表单 API，提供完整的表单控制能力
+ * @template T - 表单数据类型
+ */
+export interface UseFormApi<T extends Record<string, any>> extends FormApi<T> {
+    /**
+     * 表单属性状态管理器
+     * 用于动态更新表单配置（不包含 buttonConfig 和 fieldConfig）
+     */
+    setForm: StateApi<Omit<AxFormOptions, 'buttonConfig'|'fieldConfig'>>
+
+    /** 表单请求 API，用于执行表单提交等异步操作 */
+    requestApi: FormFetchApi<T>
+
+    /** 按钮组件池 API，用于管理表单中的按钮配置 */
+    buttonsApi: FieldsApi<AxButtonOptions>
+
+    /** 表单项组件池 API，用于管理表单字段的配置 */
+    fieldsApi: FieldsApi<AxFormItemOptions>
+}
+
+/**
+ * UseForm Hook 的返回类型
+ * 包含渲染组件和 API 接口的元组
+ * @template T - 表单数据类型
+ */
+export type UseFormReturn<T extends Record<string, any>> = [Component, UseFormApi<T>];
+
+/**
+ * 表单 Hook，用于创建可配置的表单组件
+ *
+ * 该 Hook 封装了表单的核心逻辑，包括：
+ * - 表单状态管理
+ * - 按钮和表单项的动态配置
+ * - 表单验证和提交
+ * - 组件渲染
+ *
+ * @param options - 表单初始配置选项
+ * @returns [Form 组件, Form API] 元组
+ *
+ * @example
+ * const [Form, formApi] = useForm({
+ *   api: submitData,
+ *   fieldConfig: { /* 字段配置 *\/ },
+ *   buttonConfig: { /* 按钮配置 *\/ }
+ * })
+ *
+ * // 在模板中使用
+ * <Form />
+ *
+ * // 通过 API 操作表单
+ * formApi.fieldsApi.addField('username', { label: '用户名', type: 'input' })
+ * formApi.requestApi.submit()
+ */
+export function useForm<T extends Record<string, any>>(options: AxFormOptions<T> = {}): UseFormReturn<T> {
+    // 创建表单属性状态，排除 buttonConfig 和 fieldConfig（它们由独立的组件池管理）
+    const [props, setForm] = useState(omit(options, ['buttonConfig','fieldConfig']));
+
+    // 创建按钮组件池，用于管理和渲染表单按钮
+    const [Buttons, buttonsApi] = useComponentPool<AxButtonOptions>(AxButton,options.buttonConfig);
+
+    // 创建表单项组件池，用于管理和渲染表单字段
+    const [Fields, fieldsApi] = useComponentPool<AxFormItemOptions>(AxFormItem, options.fieldConfig);
+
+    // 创建表单引用，用于访问表单实例的方法
+    const formRef = ref() as Ref<AxFormInstance>;
+
+    // 获取表单暴露的 API（验证、重置等方法）
+    const formApi = useFormExpose<T>(formRef);
+
+    // 获取表单请求 API（提交、数据获取等异步操作）
+    const requestApi = useFormFetch<T>(formRef);
+
+    // 定义表单渲染组件
+    const Form = defineComponent({
+        setup() {
+            const slots: Record<string, Component> = {};
+
+            // 如果存在按钮配置，创建按钮插槽
+            if (buttonsApi.getList().length) {
+                slots['button'] = () => h(Buttons);
+            }
+
+            // 如果存在字段配置，创建默认插槽（表单项列表）
+            if(fieldsApi.getList().length){
+                slots['default'] = () => h(Fields);
+            }
+
+            // 渲染 AxForm 组件，传入 ref、属性和插槽
+            return () => h(AxForm as any, {ref:formRef,...props.value}, slots);
+        }
+    })
+
+    // 返回表单组件和完整的 API 集合
+    return [Form, {setForm, ...formApi,fieldsApi, requestApi, buttonsApi}] as const;
+}