form-create-wot 0.1.0

package/src/fc/components/FcFormItem.vue

@@ -0,0 +1,267 @@
+<template>
+  <view v-if="visible" class="fc-form-item" :class="{ 'fc-form-item--error': errorMsg }">
+    <!-- 标题/标签行 -->
+    <view class="fc-form-item__label" v-if="rule.title">
+      <text class="fc-form-item__required" v-if="isRequired">*</text>
+      <text>{{ rule.title }}</text>
+      <view class="fc-form-item__info" v-if="rule.info">
+        <text class="fc-form-item__info-text">{{ infoText }}</text>
+      </view>
+    </view>
+
+    <!-- 组件区域 -->
+    <view class="fc-form-item__body">
+      <!-- input -->
+      <wd-input
+        v-if="componentName === 'wd-input'"
+        v-model="fieldValue"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @blur="onBlur"
+        @input="onInput"
+      />
+
+      <!-- textarea -->
+      <wd-textarea
+        v-else-if="componentName === 'wd-textarea'"
+        v-model="fieldValue"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @blur="onBlur"
+        @input="onInput"
+      />
+
+      <!-- input-number -->
+      <wd-input-number
+        v-else-if="componentName === 'wd-input-number'"
+        v-model="fieldValue"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @change="onChange"
+      />
+
+      <!-- select (custom adapter) -->
+      <fc-select
+        v-else-if="componentName === 'fc-select'"
+        v-model="fieldValue"
+        :options="rule.options"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @change="onChange"
+      />
+
+      <!-- radio (custom adapter) -->
+      <fc-radio
+        v-else-if="componentName === 'fc-radio'"
+        v-model="fieldValue"
+        :options="rule.options"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @change="onChange"
+      />
+
+      <!-- checkbox (custom adapter) -->
+      <fc-checkbox
+        v-else-if="componentName === 'fc-checkbox'"
+        v-model="fieldValue"
+        :options="rule.options"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @change="onChange"
+      />
+
+      <!-- switch -->
+      <wd-switch
+        v-else-if="componentName === 'wd-switch'"
+        v-model="fieldValue"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @change="onChange"
+      />
+
+      <!-- date-picker (custom adapter) -->
+      <fc-date-picker
+        v-else-if="componentName === 'fc-date-picker'"
+        v-model="fieldValue"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @change="onChange"
+      />
+
+      <!-- rate -->
+      <wd-rate
+        v-else-if="componentName === 'wd-rate'"
+        v-model="fieldValue"
+        v-bind="componentProps"
+        :readonly="isDisabled"
+        @change="onChange"
+      />
+
+      <!-- slider -->
+      <wd-slider
+        v-else-if="componentName === 'wd-slider'"
+        v-model="fieldValue"
+        v-bind="componentProps"
+        :disabled="isDisabled"
+        @change="onChange"
+      />
+
+      <!-- 未知类型 fallback -->
+      <view v-else class="fc-form-item__unknown">
+        <text>不支持的组件类型: {{ rule.type }}</text>
+      </view>
+    </view>
+
+    <!-- 错误信息 -->
+    <view class="fc-form-item__error" v-if="errorMsg">
+      <text class="fc-form-item__error-text">{{ errorMsg }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { FormRule } from '../types'
+import { getComponentConfig, convertProps } from '../adapter/config'
+import { validateValue } from '../core/validator'
+
+const props = defineProps<{
+  rule: FormRule
+  modelValue?: any
+  globalDisabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+  (e: 'validate', field: string, error: string | null): void
+}>()
+
+const errorMsg = ref<string | null>(null)
+
+// 计算组件名称和 props
+const config = computed(() => getComponentConfig(props.rule.type))
+const componentName = computed(() => config.value?.component || 'unknown')
+const componentProps = computed(() => {
+  if (!config.value) return {}
+  return convertProps(props.rule.props || {}, config.value)
+})
+
+// 可见性
+const visible = computed(() => {
+  return props.rule.display !== false && props.rule.hidden !== true
+})
+
+// 是否禁用
+const isDisabled = computed(() => {
+  return props.globalDisabled || props.rule.props?.disabled || false
+})
+
+// 是否必填
+const isRequired = computed(() => {
+  return props.rule.required || props.rule.validate?.some(v => v.required) || false
+})
+
+// 提示信息
+const infoText = computed(() => {
+  if (!props.rule.info) return ''
+  if (typeof props.rule.info === 'string') return props.rule.info
+  return props.rule.info.content || ''
+})
+
+// 表单值
+const fieldValue = ref<any>(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  fieldValue.value = val
+})
+
+watch(fieldValue, (val) => {
+  emit('update:modelValue', val)
+})
+
+// 事件处理
+const onBlur = () => {
+  doValidate()
+}
+
+const onInput = () => {
+  if (errorMsg.value) {
+    errorMsg.value = null
+  }
+}
+
+const onChange = () => {
+  doValidate()
+}
+
+// 校验
+const doValidate = async (): Promise<string | null> => {
+  if (!props.rule.validate || props.rule.validate.length === 0) {
+    errorMsg.value = null
+    emit('validate', props.rule.field || '', null)
+    return null
+  }
+  const error = await validateValue(fieldValue.value, props.rule.validate, props.rule.title)
+  errorMsg.value = error
+  emit('validate', props.rule.field || '', error)
+  return error
+}
+
+// 暴露方法
+defineExpose({
+  validate: doValidate,
+  clearError: () => { errorMsg.value = null },
+  setValue: (val: any) => { fieldValue.value = val },
+  getValue: () => fieldValue.value,
+  field: props.rule.field,
+})
+</script>
+
+<style lang="scss">
+.fc-form-item {
+  padding: 24rpx 32rpx;
+  background: #fff;
+
+  &__label {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16rpx;
+    font-size: 28rpx;
+    color: #333;
+  }
+
+  &__required {
+    color: #f56c6c;
+    margin-right: 4rpx;
+    font-size: 28rpx;
+  }
+
+  &__info {
+    margin-left: 8rpx;
+  }
+
+  &__info-text {
+    font-size: 24rpx;
+    color: #999;
+  }
+
+  &__body {
+    width: 100%;
+  }
+
+  &__error {
+    margin-top: 8rpx;
+  }
+
+  &__error-text {
+    font-size: 24rpx;
+    color: #f56c6c;
+  }
+
+  &__unknown {
+    padding: 16rpx;
+    background: #fff3cd;
+    border-radius: 8rpx;
+  }
+}
+</style>

package/src/fc/core/parser.ts

@@ -0,0 +1,132 @@
+/**
+ * JSON Rule 解析器
+ * 将 form-create 的 JSON Rule 解析并标准化为内部格式
+ */
+import type { FormRule, OptionItem } from '../types'
+
+let idCounter = 0
+
+/** 生成唯一 ID */
+function genId(): string {
+  return `fc_${++idCounter}_${Date.now()}`
+}
+
+/**
+ * 标准化单条规则
+ */
+export function normalizeRule(rule: FormRule): FormRule {
+  const normalized: FormRule = {
+    ...rule,
+    _id: rule._id || genId(),
+    hidden: rule.hidden ?? false,
+    display: rule.display ?? true,
+    props: { ...rule.props },
+    validate: rule.validate ? [...rule.validate] : []
+  }
+
+  // 处理 required 快捷设置 → 自动插入 validate 规则
+  if (normalized.required && !normalized.validate?.some(v => v.required)) {
+    normalized.validate = [
+      { required: true, message: `${normalized.title || normalized.field || '该字段'}不能为空` },
+      ...(normalized.validate || [])
+    ]
+  }
+
+  // 标准化 options 格式
+  if (normalized.options) {
+    normalized.options = normalizeOptions(normalized.options)
+  }
+
+  // 处理 props 中的 options (antdv 的 select 等可能把 options 放在 props 中)
+  if (normalized.props?.options && !normalized.options) {
+    normalized.options = normalizeOptions(normalized.props.options)
+    delete normalized.props.options
+  }
+
+  // 标准化子规则
+  if (Array.isArray(normalized.children)) {
+    normalized.children = normalized.children.map(child =>
+      typeof child === 'string' ? child : normalizeRule(child)
+    )
+  }
+
+  // 标准化 control
+  if (normalized.control) {
+    normalized.control = normalized.control.map(ctrl => ({
+      ...ctrl,
+      rule: ctrl.rule ? ctrl.rule.map(normalizeRule) : undefined
+    }))
+  }
+
+  return normalized
+}
+
+/**
+ * 标准化 options
+ * 兼容多种格式：
+ *  - [{label, value}] 标准格式
+ *  - [{name, id}]    芋道后端常见格式
+ *  - ['val1', 'val2'] 简写格式
+ */
+export function normalizeOptions(options: any[]): OptionItem[] {
+  if (!Array.isArray(options)) return []
+  return options.map(opt => {
+    if (typeof opt === 'string' || typeof opt === 'number') {
+      return { label: String(opt), value: opt }
+    }
+    return {
+      label: opt.label ?? opt.name ?? opt.title ?? String(opt.value),
+      value: opt.value ?? opt.id ?? opt.key,
+      disabled: opt.disabled ?? false,
+      children: opt.children ? normalizeOptions(opt.children) : undefined
+    }
+  })
+}
+
+/**
+ * 解析规则列表
+ */
+export function parseRules(rules: FormRule[]): FormRule[] {
+  idCounter = 0
+  return rules.map(normalizeRule)
+}
+
+/**
+ * 从芋道后端返回的 JSON 字符串解析
+ */
+export function parseJsonString(json: string): FormRule[] {
+  try {
+    const parsed = JSON.parse(json)
+    if (Array.isArray(parsed)) {
+      return parseRules(parsed)
+    }
+    return []
+  } catch (e) {
+    console.error('[form-create-wot] JSON 解析失败:', e)
+    return []
+  }
+}
+
+/**
+ * 获取所有包含 field 的规则（扁平化）
+ */
+export function flattenFieldRules(rules: FormRule[]): FormRule[] {
+  const result: FormRule[] = []
+  const walk = (list: FormRule[]) => {
+    for (const rule of list) {
+      if (rule.field) {
+        result.push(rule)
+      }
+      if (Array.isArray(rule.children)) {
+        walk(rule.children as FormRule[])
+      }
+      if (rule.control) {
+        for (const ctrl of rule.control) {
+          if (ctrl.rule) walk(ctrl.rule)
+        }
+      }
+    }
+  }
+  walk(rules)
+  return result
+}

package/src/fc/core/validator.ts

@@ -0,0 +1,122 @@
+/**
+ * 表单校验引擎
+ * 兼容 antdv 的校验规则格式
+ */
+import type { ValidateRule } from '../types'
+
+/** 预注册的自定义校验函数 */
+const validatorRegistry = new Map<string, (value: any) => Promise<boolean | string>>()
+
+/** 注册自定义校验函数 */
+export function registerValidator(name: string, fn: (value: any) => Promise<boolean | string>) {
+  validatorRegistry.set(name, fn)
+}
+
+/** 校验单个值 */
+export async function validateValue(
+  value: any,
+  rules: ValidateRule[],
+  fieldTitle?: string
+): Promise<string | null> {
+  for (const rule of rules) {
+    const errMsg = rule.message || `${fieldTitle || '该字段'}校验失败`
+
+    // required
+    if (rule.required) {
+      if (value === undefined || value === null || value === '') {
+        return rule.message || `${fieldTitle || '该字段'}不能为空`
+      }
+      if (Array.isArray(value) && value.length === 0) {
+        return rule.message || `${fieldTitle || '该字段'}不能为空`
+      }
+    }
+
+    // 如果值为空且非必填，跳过后续校验
+    if (value === undefined || value === null || value === '') {
+      continue
+    }
+
+    // type
+    if (rule.type) {
+      const valid = checkType(value, rule.type)
+      if (!valid) return errMsg
+    }
+
+    // pattern
+    if (rule.pattern) {
+      const regex = typeof rule.pattern === 'string' ? new RegExp(rule.pattern) : rule.pattern
+      if (!regex.test(String(value))) {
+        return errMsg
+      }
+    }
+
+    // min / max (字符串长度或数字大小)
+    if (rule.min !== undefined) {
+      if (typeof value === 'string' && value.length < rule.min) return errMsg
+      if (typeof value === 'number' && value < rule.min) return errMsg
+      if (Array.isArray(value) && value.length < rule.min) return errMsg
+    }
+    if (rule.max !== undefined) {
+      if (typeof value === 'string' && value.length > rule.max) return errMsg
+      if (typeof value === 'number' && value > rule.max) return errMsg
+      if (Array.isArray(value) && value.length > rule.max) return errMsg
+    }
+
+    // len
+    if (rule.len !== undefined) {
+      if (typeof value === 'string' && value.length !== rule.len) return errMsg
+      if (Array.isArray(value) && value.length !== rule.len) return errMsg
+    }
+
+    // 自定义校验函数
+    if (rule.validatorName) {
+      const fn = validatorRegistry.get(rule.validatorName)
+      if (fn) {
+        const result = await fn(value)
+        if (result !== true) {
+          return typeof result === 'string' ? result : errMsg
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+/** 类型检查 */
+function checkType(value: any, type: string): boolean {
+  switch (type) {
+    case 'string':
+      return typeof value === 'string'
+    case 'number':
+      return typeof value === 'number'
+    case 'boolean':
+      return typeof value === 'boolean'
+    case 'array':
+      return Array.isArray(value)
+    case 'object':
+      return typeof value === 'object' && value !== null && !Array.isArray(value)
+    case 'email':
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value))
+    case 'url':
+      return /^https?:\/\/.+/.test(String(value))
+    default:
+      return true
+  }
+}
+
+/** 批量校验多个字段 */
+export async function validateFields(
+  formData: Record<string, any>,
+  fieldRules: Array<{ field: string; title?: string; validate: ValidateRule[] }>
+): Promise<Record<string, string>> {
+  const errors: Record<string, string> = {}
+  for (const { field, title, validate } of fieldRules) {
+    if (!validate || validate.length === 0) continue
+    const error = await validateValue(formData[field], validate, title)
+    if (error) {
+      errors[field] = error
+    }
+  }
+  return errors
+}

package/src/fc/index.ts

@@ -0,0 +1,34 @@
+/**
+ * form-create-wot 插件入口
+ * UniApp 移动端 form-create JSON 渲染引擎 (wot-design-uni)
+ */
+import type { App } from 'vue'
+import FcForm from './components/FcForm.vue'
+import FcFormItem from './components/FcFormItem.vue'
+import FcSelect from './adapter/fc-select.vue'
+import FcRadio from './adapter/fc-radio.vue'
+import FcCheckbox from './adapter/fc-checkbox.vue'
+import FcDatePicker from './adapter/fc-date-picker.vue'
+
+// Core
+export { parseRules, parseJsonString, flattenFieldRules, normalizeRule } from './core/parser'
+export { validateValue, validateFields, registerValidator } from './core/validator'
+export { getComponentConfig, registerComponent, convertProps } from './adapter/config'
+
+// Types
+export type { FormRule, FormOption, FormApi, ValidateRule, ControlRule, OptionItem } from './types'
+
+// Components
+export { FcForm, FcFormItem, FcSelect, FcRadio, FcCheckbox, FcDatePicker }
+
+/** Vue 插件安装函数 */
+export function install(app: App) {
+  app.component('fc-form', FcForm)
+  app.component('fc-form-item', FcFormItem)
+  app.component('fc-select', FcSelect)
+  app.component('fc-radio', FcRadio)
+  app.component('fc-checkbox', FcCheckbox)
+  app.component('fc-date-picker', FcDatePicker)
+}
+
+export default { install }

package/src/fc/types/api.ts

@@ -0,0 +1,49 @@
+/**
+ * fApi 表单操作接口定义
+ */
+import type { FormRule, ValidateRule } from './rule'
+
+export interface FormApi {
+  /** 获取所有表单数据 */
+  formData(): Record<string, any>
+  /** 获取指定字段的值 */
+  getValue(field: string): any
+  /** 设置指定字段的值 */
+  setValue(field: string, value: any): void
+  /** 批量设置字段值 */
+  setValues(values: Record<string, any>): void
+  /** 触发表单校验 */
+  validate(): Promise<Record<string, any>>
+  /** 校验指定字段 */
+  validateField(field: string): Promise<any>
+  /** 清除校验状态 */
+  clearValidateState(fields?: string | string[]): void
+  /** 提交表单 */
+  submit(onSubmit?: (formData: Record<string, any>) => void): Promise<void>
+  /** 重置表单 */
+  resetFields(fields?: string | string[]): void
+  /** 隐藏指定字段 */
+  hidden(hidden: boolean, fields?: string | string[]): void
+  /** 显示/隐藏指定字段 */
+  display(display: boolean, fields?: string | string[]): void
+  /** 禁用指定字段 */
+  disabled(disabled: boolean, fields?: string | string[]): void
+  /** 获取所有规则 */
+  getRule(): FormRule[]
+  /** 更新某个字段的规则 */
+  updateRule(field: string, rule: Partial<FormRule>): void
+  /** 更新多个字段的规则 */
+  updateRules(rules: Record<string, Partial<FormRule>>): void
+  /** 获取组件 ref */
+  getEl(field: string): any
+  /** 动态追加规则 */
+  append(rule: FormRule, after?: string): void
+  /** 动态前插规则 */
+  prepend(rule: FormRule, before?: string): void
+  /** 删除字段 */
+  removeField(field: string): void
+  /** 刷新表单 */
+  refresh(): void
+  /** 监听字段值变化 */
+  on(event: string, callback: (...args: any[]) => void): void
+}

package/src/fc/types/index.ts

@@ -0,0 +1,2 @@
+export type { FormRule, FormOption, ValidateRule, ControlRule, OptionItem } from './rule'
+export type { FormApi } from './api'