ai-front-base 0.2.3 → 0.2.7

package/dist/components/AiForm/types.ts

@@ -1,35 +1,415 @@
 /**
- * AiForm - 表单组件
+ * AiForm - 动态表单组件
+ * 基于Element Plus el-form封装，支持JSON配置驱动
  *
- * 用法示例：
- * <AiForm v-model="formData" :config="formConfig" @submit="handleSubmit" />
+ * ==================== 基础用法 ====================
+ * <AiForm
+ *   v-model="formData"
+ *   :config="formConfig"
+ *   :rules="rules"
+ *   label-width="100px"
+ *   @change="handleChange"
+ * />
+ *
+ * ==================== 配置示例 ====================
+ * const formData = ref({
+ *   name: '',
+ *   age: '',
+ *   gender: '',
+ *   birthday: '',
+ *   address: ''
+ * })
+ *
+ * const formConfig: IFormItem[] = [
+ *   // 1. 基础输入框
+ *   {
+ *     prop: 'name',
+ *     label: '姓名',
+ *     type: 'AiInput',           // 使用组件库的AiInput
+ *     required: true,             // 必填
+ *     col: 8,                     // 占8格
+ *     placeholder: '请输入姓名'
+ *   },
+ *
+ *   // 2. 数字输入框（通过attrs透传属性）
+ *   {
+ *     prop: 'age',
+ *     label: '年龄',
+ *     type: 'AiInput',
+ *     col: 8,
+ *     attrs: {
+ *       type: 'number',           // 透传给AiInput的type属性
+ *       min: 0,
+ *       max: 150
+ *     }
+ *   },
+ *
+ *   // 3. 下拉选择器（静态数据）
+ *   {
+ *     prop: 'gender',
+ *     label: '性别',
+ *     type: 'AiSelect',
+ *     col: 8,
+ *     attrs: {
+ *       options: [                // 透传给AiSelect的options
+ *         { label: '男', value: 1 },
+ *         { label: '女', value: 2 }
+ *       ]
+ *     }
+ *   },
+ *
+ *   // 4. 下拉选择器（异步数据源 - 响应式）
+ *   {
+ *     prop: 'category',
+ *     label: '分类',
+ *     type: 'AiSelect',
+ *     col: 8,
+ *     attrs: {
+ *       options: categoryOptions.value  // 响应式数据源，变化时自动更新
+ *     }
+ *   },
+ *
+ *   // 5. 日期选择器
+ *   {
+ *     prop: 'birthday',
+ *     label: '生日',
+ *     type: 'AiDatePicker',
+ *     col: 8,
+ *     attrs: {
+ *       format: 'YYYY-MM-DD'
+ *     }
+ *   },
+ *
+ *   // 5. 空占位符（用于布局）
+ *   {
+ *     type: 'empty',              // 特殊类型：空占位
+ *     col: 8,                     // 占8格，用于对齐
+ *     prop: 'empty1'              // 必须提供唯一prop作为key
+ *   },
+ *
+ *   // 6. 使用ElementPlus原生组件
+ *   {
+ *     prop: 'remark',
+ *     label: '备注',
+ *     type: 'el-input',           // 直接使用el-input
+ *     col: 16,
+ *     attrs: {
+ *       type: 'textarea',
+ *       rows: 3
+ *     }
+ *   },
+ *
+ *   // 7. 插槽模式 - 自定义表单项内容
+ *   {
+ *     prop: 'custom',
+ *     label: '自定义内容',
+ *     type: 'slot',               // 特殊类型：插槽
+ *     col: 12
+ *   },
+ *
+ *   // 8. 插槽模式 - 自定义label
+ *   {
+ *     prop: 'address',
+ *     type: 'slotLabel',          // 特殊类型：label插槽
+ *     col: 12
+ *   },
+ *
+ *   // 9. 插槽模式 - 同时自定义label和内容
+ *   {
+ *     prop: 'complex',
+ *     type: 'slotBoth',           // 特殊类型：label和内容都用插槽
+ *     col: 24
+ *   },
+ *
+ *   // 10. 动态显隐
+ *   {
+ *     prop: 'email',
+ *     label: '邮箱',
+ *     type: 'AiInput',
+ *     visible: computed(() => formData.value.gender === 1), // 响应式控制显隐
+ *     col: 12
+ *   }
+ * ]
+ *
+ * ==================== 插槽用法详解 ====================
+ *
+ * 1. type="slot" - 自定义表单项内容
+ *    插槽名称：prop的值
+ *    <AiForm v-model="formData" :config="config">
+ *      <template #custom>
+ *        <el-input v-model="formData.custom" />
+ *      </template>
+ *    </AiForm>
+ *
+ * 2. type="slotLabel" - 自定义label
+ *    插槽名称：prop的值
+ *    <AiForm v-model="formData" :config="config">
+ *      <template #address>
+ *        <span style="color: red">地址 *</span>
+ *      </template>
+ *    </AiForm>
+ *
+ * 3. type="slotBoth" - 同时自定义label和内容
+ *    插槽名称：prop的值
+ *    插槽内容：必须包含两个div，第一个是label，第二个是内容
+ *    组件内部自动转换为：${prop}Label 和 ${prop}Default
+ *
+ *    <AiForm v-model="formData" :config="config">
+ *      <template #complex>
+ *        <div>
+ *          <span style="color: red">复杂字段 *</span>
+ *        </div>
+ *        <div>
+ *          <el-input v-model="formData.complex" />
+ *          <el-button>操作</el-button>
+ *        </div>
+ *      </template>
+ *    </AiForm>
+ *
+ * ==================== 校验规则 ====================
+ * const rules = {
+ *   name: [
+ *     { required: true, message: '请输入姓名', trigger: 'blur' }
+ *   ],
+ *   age: [
+ *     { required: true, message: '请输入年龄', trigger: 'blur' },
+ *     { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
+ *   ]
+ * }
+ *
+ * ==================== 事件监听 ====================
+ * const handleChange = (prop: string, value: any, formValues: Record<string, any>) => {
+ *   console.log('变化的字段:', prop)
+ *   console.log('变化的值:', value)
+ *   console.log('完整表单数据:', formValues)
+ *
+ *   // 示例：根据某个字段变化触发查询
+ *   if (prop === 'category') {
+ *     fetchTableData()
+ *   }
+ * }
+ *
+ * ==================== 异步数据源支持 ====================
+ * // 场景：下拉选择器的选项需要异步获取
+ *
+ * const categoryOptions = ref([])
+ * const cityOptions = ref([])
+ *
+ * // 组件挂载时获取数据
+ * onMounted(async () => {
+ *   categoryOptions.value = await fetchCategories()
+ * })
+ *
+ * // 根据其他字段联动获取数据
+ * const handleChange = async (prop: string, value: any) => {
+ *   if (prop === 'province') {
+ *     cityOptions.value = await fetchCities(value)
+ *   }
+ * }
  *
- * 配置示例：
  * const formConfig = [
- *   { prop: 'name', label: '姓名', type: 'input', required: true },
- *   { prop: 'age', label: '年龄', type: 'input' },
- *   { prop: 'gender', label: '性别', type: 'select', options: [
- *     { label: '男', value: 'male' },
- *     { label: '女', value: 'female' }
- *   ]}
+ *   {
+ *     prop: 'category',
+ *     label: '分类',
+ *     type: 'AiSelect',
+ *     attrs: {
+ *       options: categoryOptions  // 响应式ref，数据变化自动更新
+ *     }
+ *   },
+ *   {
+ *     prop: 'province',
+ *     label: '省份',
+ *     type: 'AiSelect',
+ *     attrs: {
+ *       options: provinceOptions
+ *     }
+ *   },
+ *   {
+ *     prop: 'city',
+ *     label: '城市',
+ *     type: 'AiSelect',
+ *     attrs: {
+ *       options: cityOptions  // 根据省份联动变化
+ *     }
+ *   }
+ * ]
+ *
+ * ==================== 表单方法 ====================
+ * const formRef = ref()
+ *
+ * // 校验表单
+ * await formRef.value.validate()
+ *
+ * // 重置表单
+ * formRef.value.resetFields()
+ *
+ * // 清除校验
+ * formRef.value.clearValidate()
+ *
+ * ==================== 控件匹配优先级 ====================
+ * 1. 优先匹配组件库组件：AiInput → 使用本组件库的AiInput
+ * 2. 其次匹配ElementPlus组件：el-input → 使用ElementPlus的el-input
+ * 3. 都不存在：显示错误提示组件
+ *
+ * ==================== 栅格布局说明 ====================
+ * - 采用ElementPlus的24栅格系统
+ * - 默认每个表单项 col: 6（占6格，一行4个）
+ * - 可通过col属性自定义：1-24
+ * - 使用empty类型配合col实现灵活布局
+ *
+ * 示例：实现"两个字段 + 空白 + 一个字段"的布局
+ * [
+ *   { prop: 'field1', label: '字段1', type: 'AiInput', col: 6 },
+ *   { prop: 'field2', label: '字段2', type: 'AiInput', col: 6 },
+ *   { type: 'empty', col: 6, prop: 'empty1' },
+ *   { prop: 'field3', label: '字段3', type: 'AiInput', col: 6 }
  * ]
  */
 
-export interface IFormItem {
-  prop: string              // 字段名
-  label: string             // 标签文本
-  type: 'input' | 'select' | 'textarea'  // 表单项类型
-  placeholder?: string      // 占位符
-  required?: boolean        // 是否必填
-  options?: Array<{ label: string; value: any }>  // select选项
+import type { FormProps, FormItemProps } from 'element-plus'
+
+/**
+ * 表单项配置接口
+ */
+export interface IFormItem extends Partial<FormItemProps> {
+  /**
+   * 字段名
+   * - 作为表单数据的key
+   * - 作为插槽名称
+   * - 作为el-form-item的prop
+   * - type为'empty'时可不传
+   */
+  prop?: string
+
+  /**
+   * 标签文本
+   * - type为slotLabel或slotBoth时可不传
+   */
+  label?: string
+
+  /**
+   * 控件类型（必填）
+   *
+   * 普通控件：
+   * - 'AiInput' - 使用组件库的输入框
+   * - 'AiSelect' - 使用组件库的选择器
+   * - 'AiDatePicker' - 使用组件库的日期选择器
+   * - 'el-input' - 使用ElementPlus的输入框
+   * - 'el-select' - 使用ElementPlus的选择器
+   * - ... 其他组件库或ElementPlus组件
+   *
+   * 特殊类型：
+   * - 'slot' - 插槽模式，插槽名=prop，替换表单项内容
+   * - 'slotLabel' - 插槽模式，插槽名=prop，仅替换label
+   * - 'slotBoth' - 插槽模式，插槽名=prop，内容包含两个div（label+内容）
+   * - 'empty' - 空占位符，配合col实现布局
+   */
+  type: string
+
+  /**
+   * 占位符文本
+   * - 会透传给控件的placeholder属性
+   */
+  placeholder?: string
+
+  /**
+   * 是否必填
+   * - 默认false
+   * - 仅用于标识，实际校验需配置rules
+   */
+  required?: boolean
+
+  /**
+   * 栅格占位（1-24）
+   * - 默认6（一行4个）
+   * - 24表示独占一行
+   * - 配合empty实现灵活布局
+   */
+  col?: number
+
+  /**
+   * 是否显示
+   * - 默认true
+   * - 支持响应式：visible: computed(() => condition)
+   * - 使用v-if实现，隐藏时不渲染DOM
+   */
+  visible?: boolean
+
+  /**
+   * 透传给控件的属性
+   * - 会通过v-bind传递给动态组件
+   *
+   * 示例：
+   * attrs: {
+   *   type: 'number',              // 输入框类型
+   *   min: 0,                      // 最小值
+   *   max: 100,                    // 最大值
+   *   options: [...],              // 选择器选项
+   *   format: 'YYYY-MM-DD'         // 日期格式
+   * }
+   */
+  attrs?: Record<string, any>
+
+  // 继承el-form-item的其他属性
+  // 如：labelWidth, rules, error, showMessage等
 }
 
-export interface IAiFormProps {
-  config: IFormItem[]                    // 表单配置数组
-  modelValue: Record<string, any>        // 表单数据对象
+/**
+ * 表单组件Props接口
+ */
+export interface IAiFormProps extends Partial<FormProps> {
+  /**
+   * 表单配置数组（必填）
+   * - 定义表单项的结构和行为
+   */
+  config: IFormItem[]
+
+  /**
+   * 表单数据对象（必填）
+   * - 使用v-model双向绑定
+   * - key为表单项的prop
+   */
+  modelValue: Record<string, any>
+
+  /**
+   * 校验规则
+   * - 配置方式同el-form的rules
+   * - 不传则不校验
+   *
+   * 示例：
+   * rules: {
+   *   name: [{ required: true, message: '请输入', trigger: 'blur' }],
+   *   age: [{ type: 'number', message: '必须为数字' }]
+   * }
+   */
+  rules?: Record<string, any>
+
+  // 继承el-form的其他属性
+  // 如：labelWidth, labelPosition, inline, disabled等
 }
 
+/**
+ * 表单组件事件接口
+ */
 export interface IAiFormEmits {
-  (e: 'update:modelValue', value: Record<string, any>): void  // 数据更新
-  (e: 'submit', value: Record<string, any>): void             // 表单提交
+  /**
+   * 表单数据更新事件
+   * - v-model触发
+   */
+  (e: 'update:modelValue', value: Record<string, any>): void
+
+  /**
+   * 表单项值变化事件
+   * - 任意表单项值变化时触发
+   *
+   * @param prop - 变化的字段名
+   * @param value - 变化后的值
+   * @param formValues - 完整的表单数据
+   *
+   * 使用场景：
+   * - 联动查询：某字段变化时触发表格查询
+   * - 联动显隐：根据某字段值控制其他字段显隐
+   * - 联动赋值：某字段变化时自动填充其他字段
+   */
+  (e: 'change', prop: string, value: any, formValues: Record<string, any>): void
 }

package/dist/components/AiInput/index.vue.mjs

@@ -1,21 +1,56 @@
-import { defineComponent as n, openBlock as u, createElementBlock as d } from "vue";
-const r = ["value", "placeholder"], c = /* @__PURE__ */ n({
+import { defineComponent as u, computed as m, resolveComponent as s, openBlock as d, createBlock as c, mergeProps as y } from "vue";
+const B = /* @__PURE__ */ u({
   __name: "index",
   props: {
     modelValue: {},
+    id: {},
+    size: {},
+    disabled: { type: Boolean },
+    modelModifiers: {},
+    maxlength: {},
+    minlength: {},
+    type: {},
+    resize: {},
+    autosize: { type: [Object, Boolean] },
+    autocomplete: {},
+    formatter: { type: Function },
+    parser: { type: Function },
     placeholder: {},
-    clearable: { type: Boolean, default: !0 }
+    form: {},
+    readonly: { type: Boolean },
+    clearable: { type: Boolean },
+    clearIcon: {},
+    showPassword: { type: Boolean },
+    showWordLimit: { type: Boolean },
+    wordLimitPosition: {},
+    suffixIcon: {},
+    prefixIcon: {},
+    containerRole: {},
+    tabindex: {},
+    validateEvent: { type: Boolean },
+    inputStyle: { type: [Boolean, null, String, Object, Array] },
+    autofocus: { type: Boolean },
+    rows: {},
+    ariaLabel: {},
+    inputmode: {},
+    name: {}
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const o = t;
-    return (p, l) => (u(), d("input", {
-      value: e.modelValue,
-      placeholder: e.placeholder,
-      onInput: l[0] || (l[0] = (a) => o("update:modelValue", a.target.value))
-    }, null, 40, r));
+  setup(l, { emit: n }) {
+    const a = l, p = n, o = m({
+      get: () => a.modelValue,
+      set: (e) => p("update:modelValue", e)
+    });
+    return (e, t) => {
+      const r = s("el-input");
+      return d(), c(r, y({
+        modelValue: o.value,
+        "onUpdate:modelValue": t[0] || (t[0] = (i) => o.value = i),
+        clearable: ""
+      }, e.$attrs), null, 16, ["modelValue"]);
+    };
   }
 });
 export {
-  c as default
+  B as default
 };

package/dist/components/AiInput/types.ts

@@ -1,16 +1,17 @@
 /**
  * AiInput - 输入框组件
+ * 基于Element Plus el-input封装，默认可清空
  *
- * 用法示例：
+ * 用法：
  * <AiInput v-model="value" placeholder="请输入" />
  */
 
-export interface IAiInputProps {
-  modelValue: string        // 输入值
-  placeholder?: string      // 占位符
-  clearable?: boolean       // 是否可清空（默认true）
+import type { InputProps } from 'element-plus'
+
+export interface IAiInputProps extends Partial<InputProps> {
+  modelValue?: string | number
 }
 
 export interface IAiInputEmits {
-  (e: 'update:modelValue', value: string): void  // 值更新事件
+  (e: 'update:modelValue', value: string | number): void
 }

package/dist/components/AiSelect/index.vue.mjs

@@ -1,27 +1,108 @@
-import { defineComponent as r, openBlock as l, createElementBlock as o, createElementVNode as i, Fragment as d, renderList as m, toDisplayString as s } from "vue";
-const p = ["value"], v = ["value"], V = /* @__PURE__ */ r({
+import { defineComponent as v, computed as s, resolveComponent as c, openBlock as u, createBlock as i, mergeProps as V, withCtx as b, createCommentVNode as g, createElementBlock as x, Fragment as T, renderList as h } from "vue";
+const C = /* @__PURE__ */ v({
   __name: "index",
   props: {
     modelValue: {},
     options: {},
-    clearable: { type: Boolean, default: !0 },
-    filterable: { type: Boolean, default: !0 }
+    ariaLabel: {},
+    emptyValues: {},
+    valueOnClear: {},
+    name: {},
+    id: {},
+    autocomplete: {},
+    automaticDropdown: { type: Boolean },
+    size: {},
+    effect: {},
+    disabled: { type: Boolean },
+    clearable: { type: Boolean },
+    filterable: { type: Boolean },
+    allowCreate: { type: Boolean },
+    loading: { type: Boolean },
+    popperClass: {},
+    popperStyle: {},
+    popperOptions: {},
+    remote: { type: Boolean },
+    debounce: {},
+    loadingText: {},
+    noMatchText: {},
+    noDataText: {},
+    remoteMethod: {},
+    filterMethod: {},
+    multiple: { type: Boolean },
+    multipleLimit: {},
+    placeholder: {},
+    defaultFirstOption: { type: Boolean },
+    reserveKeyword: { type: Boolean },
+    valueKey: {},
+    collapseTags: { type: Boolean },
+    collapseTagsTooltip: { type: Boolean },
+    tagTooltip: {},
+    maxCollapseTags: {},
+    teleported: { type: Boolean },
+    persistent: { type: Boolean },
+    clearIcon: {},
+    fitInputWidth: { type: Boolean },
+    suffixIcon: {},
+    tagType: {},
+    tagEffect: {},
+    validateEvent: { type: Boolean },
+    remoteShowSuffix: { type: Boolean },
+    showArrow: { type: Boolean },
+    offset: {},
+    placement: {},
+    fallbackPlacements: {},
+    tabindex: {},
+    appendTo: {},
+    props: {}
   },
   emits: ["update:modelValue"],
-  setup(a, { emit: n }) {
-    const u = n;
-    return (f, t) => (l(), o("select", {
-      value: a.modelValue,
-      onChange: t[0] || (t[0] = (e) => u("update:modelValue", e.target.value))
-    }, [
-      t[1] || (t[1] = i("option", { value: "" }, "请选择", -1)),
-      (l(!0), o(d, null, m(a.options, (e) => (l(), o("option", {
-        key: e.value,
-        value: e.value
-      }, s(e.label), 9, v))), 128))
-    ], 40, p));
+  setup(m, { emit: y }) {
+    const l = m, n = y, r = s(() => l.multiple), f = s(() => {
+      const { modelValue: o, options: e, ...t } = l;
+      return t;
+    }), d = s({
+      get: () => {
+        var o;
+        return r.value && Array.isArray(l.modelValue) && l.modelValue.includes("") ? ((o = l.options) == null ? void 0 : o.map((e) => e.value)) || [] : l.modelValue;
+      },
+      set: (o) => {
+        var t, p;
+        if (!r.value) {
+          n("update:modelValue", o);
+          return;
+        }
+        const e = o;
+        if (e.includes("")) {
+          const a = ((t = l.options) == null ? void 0 : t.map((B) => B.value)) || [];
+          n("update:modelValue", a);
+        } else e.length === ((p = l.options) == null ? void 0 : p.length) ? n("update:modelValue", [...e, ""]) : n("update:modelValue", e);
+      }
+    });
+    return (o, e) => {
+      const t = c("el-option"), p = c("el-select");
+      return u(), i(p, V({
+        modelValue: d.value,
+        "onUpdate:modelValue": e[0] || (e[0] = (a) => d.value = a),
+        clearable: "",
+        filterable: ""
+      }, f.value), {
+        default: b(() => [
+          r.value ? (u(), i(t, {
+            key: 0,
+            label: "全部",
+            value: ""
+          })) : g("", !0),
+          (u(!0), x(T, null, h(m.options, (a) => (u(), i(t, {
+            key: a.value,
+            label: a.label,
+            value: a.value
+          }, null, 8, ["label", "value"]))), 128))
+        ]),
+        _: 1
+      }, 16, ["modelValue"]);
+    };
   }
 });
 export {
-  V as default
+  C as default
 };

package/dist/components/AiSelect/types.ts

@@ -1,28 +1,21 @@
 /**
  * AiSelect - 选择器组件
- *
- * 用法示例：
- * <AiSelect v-model="value" :options="options" />
- *
- * 配置示例：
- * const options = [
- *   { label: '选项1', value: 1 },
- *   { label: '选项2', value: 2 }
- * ]
+ * 基于Element Plus el-select封装
+ * 默认可清空、可过滤，多选时自动添加"全部"选项
  */
 
+import type { SelectProps } from 'element-plus'
+
 export interface ISelectOption {
-  label: string     // 选项文本
-  value: any        // 选项值
+  label: string
+  value: any
 }
 
-export interface IAiSelectProps {
-  modelValue: any               // 选中值
-  options: ISelectOption[]      // 选项数组
-  clearable?: boolean           // 是否可清空（默认true）
-  filterable?: boolean          // 是否可过滤（默认true）
+export interface IAiSelectProps extends Partial<SelectProps> {
+  modelValue?: any
+  options?: ISelectOption[]
 }
 
 export interface IAiSelectEmits {
-  (e: 'update:modelValue', value: any): void  // 值更新事件
+  (e: 'update:modelValue', value: any): void
 }