Dynamic Form

"use client";

import {
  DynamicForm,
  type FormSchema,
} from "@/components/composed/dynamic-form/dynamic-form";

const schema: FormSchema = {
  title: "快速开始",
  // description: "展示各种字段类型的基本用法",
  fields: [
    {
      name: "name",
      label: "姓名",
      type: "input",
      required: true,
      placeholder: "请输入您的姓名",
    },
    {
      name: "category",
      label: "分类",
      type: "select",
      required: true,
      options: [
        { value: "tech", label: "技术" },
        { value: "design", label: "设计" },
        { value: "product", label: "产品" },
      ],
    },
    {
      name: "priority",
      label: "优先级",
      type: "radio",
      options: [
        { value: "low", label: "低" },
        { value: "medium", label: "中" },
        { value: "high", label: "高" },
      ],
      // orientation: "horizontal",
      defaultValue: "medium",
    },
    {
      name: "active",
      label: "启用",
      type: "switch",
      defaultValue: true,
    },
  ],
};

export function DynamicFormDemo() {
  return (
    <DynamicForm
      schema={schema}
      onFinish={(values) => {
        console.log("提交:", values);
      }}
    />
  );
}

"use client";

import {
  DynamicForm,
  type FormSchema,
} from "@/components/composed/dynamic-form/dynamic-form";

const schema: FormSchema = {
  title: "用户信息",
  description: "请填写您的基本信息",
  fields: [
    {
      name: "username",
      label: "用户名",
      type: "input",
      required: true,
      placeholder: "请输入用户名",
    },
    {
      name: "email",
      label: "邮箱",
      type: "input",
      placeholder: "example@email.com",
    },
    {
      name: "bio",
      label: "个人简介",
      type: "textarea",
      placeholder: "介绍一下自己...",
    },
    {
      name: "role",
      label: "角色",
      type: "select",
      required: true,
      options: [
        { value: "user", label: "普通用户" },
        { value: "admin", label: "管理员" },
        { value: "guest", label: "访客" },
      ],
    },
    {
      name: "notifications",
      label: "接收通知",
      type: "switch",
      defaultValue: true,
    },
  ],
};

export function DynamicFormDefault() {
  return (
    <DynamicForm
      schema={schema}
      onFinish={(values) => {
        console.log("提交的数据:", values);
      }}
    />
  );
}

"use client";

import {
  DynamicForm,
  type FormSchema,
} from "@/components/composed/dynamic-form/dynamic-form";
import { z } from "zod";

const schema: FormSchema = {
  title: "注册表单",
  description: "带验证的用户注册表单",
  fields: [
    {
      name: "username",
      label: "用户名",
      type: "input",
      required: true,
      placeholder: "至少3个字符",
    },
    {
      name: "email",
      label: "邮箱",
      type: "input",
      required: true,
      placeholder: "有效的邮箱地址",
    },
    {
      name: "password",
      label: "密码",
      type: "input",
      required: true,
      placeholder: "至少6个字符",
    },
    {
      name: "age",
      label: "年龄",
      type: "number",
      required: true,
      min: 18,
      max: 100,
      placeholder: "必须年满18岁",
    },
    {
      name: "website",
      label: "个人网站",
      type: "input",
      placeholder: "https://example.com",
    },
    {
      name: "agree",
      label: "同意用户协议",
      type: "checkbox",
      required: true,
    },
  ],
};

const validateSchema = z.object({
  username: z.string().min(3, "用户名至少需要3个字符"),
  email: z.string().email("请输入有效的邮箱地址"),
  password: z.string().min(6, "密码至少需要6个字符"),
  age: z.number().min(18, "必须年满18岁").max(100, "年龄不能超过100岁"),
  website: z.string().url("请输入有效的URL").optional().or(z.literal("")),
  agree: z.boolean().refine((val) => val === true, {
    message: "必须同意用户协议",
  }),
});

export function DynamicFormValidation() {
  return (
    <DynamicForm
      schema={schema}
      validateSchema={validateSchema}
      onFinish={(values) => {
        console.log("验证通过，提交的数据:", values);
      }}
      onFinishFailed={(errorInfo) => {
        console.log("验证失败:", errorInfo);
      }}
    />
  );
}

"use client";

import {
  DynamicForm,
  type FormSchema,
} from "@/components/composed/dynamic-form/dynamic-form";

const schema: FormSchema = {
  title: "用户资料",
  description: "已完成的用户资料信息",
  fields: [
    {
      name: "username",
      label: "用户名",
      type: "input",
    },
    {
      name: "email",
      label: "邮箱",
      type: "input",
    },
    {
      name: "role",
      label: "角色",
      type: "select",
      options: [
        { value: "admin", label: "管理员" },
        { value: "user", label: "普通用户" },
      ],
    },
    {
      name: "plan",
      label: "订阅计划",
      type: "radio",
      options: [
        { value: "free", label: "免费版" },
        { value: "pro", label: "专业版" },
        { value: "enterprise", label: "企业版" },
      ],
      orientation: "horizontal",
    },
    {
      name: "notifications",
      label: "接收通知",
      type: "switch",
    },
    {
      name: "bio",
      label: "个人简介",
      type: "textarea",
    },
  ],
};

const initialValues = {
  username: "张三",
  email: "zhangsan@example.com",
  role: "admin",
  plan: "pro",
  notifications: true,
  bio: "热爱编程的开发者，专注于前端技术栈。",
};

export function DynamicFormReadonly() {
  return (
    <DynamicForm
      schema={schema}
      initialValues={initialValues}
      readonly={true}
      showActions={false}
    />
  );
}

"use client";

import { DynamicForm } from "@/components/composed/dynamic-form/dynamic-form";
import type { FormSchema } from "@/components/composed/dynamic-form/dynamic-form";

const schema: FormSchema = {
  title: "用户信息表单",
  description: "请填写以下信息",
  fields: [
    {
      name: "username",
      label: "用户名",
      type: "input",
      placeholder: "请输入用户名",
      required: true,
    },
    {
      name: "email",
      label: "邮箱",
      type: "input",
      placeholder: "请输入邮箱地址",
      required: true,
    },
    {
      name: "bio",
      label: "个人简介",
      type: "textarea",
      placeholder: "请输入个人简介",
    },
  ],
};

export function DynamicFormPending() {
  return (
    <DynamicForm
      schema={schema}
      status="pending"
      onFinish={(values) => console.log("表单提交:", values)}
    />
  );
}

"use client";

import { DynamicForm } from "@/components/composed/dynamic-form/dynamic-form";
import type { FormSchema } from "@/components/composed/dynamic-form/dynamic-form";

const schema: FormSchema = {
  title: "用户信息表单",
  description: "表单已确认，处于只读状态",
  fields: [
    {
      name: "username",
      label: "用户名",
      type: "input",
      placeholder: "请输入用户名",
      required: true,
    },
    {
      name: "email",
      label: "邮箱",
      type: "input",
      placeholder: "请输入邮箱地址",
      required: true,
    },
    {
      name: "bio",
      label: "个人简介",
      type: "textarea",
      placeholder: "请输入个人简介",
    },
  ],
};

export function DynamicFormConfirmed() {
  return (
    <DynamicForm
      schema={schema}
      status="confirmed"
      initialValues={{
        username: "张三",
        email: "zhangsan@example.com",
        bio: "这是一段个人简介",
      }}
      onFinish={(values) => console.log("表单提交:", values)}
    />
  );
}

"use client";

import { useRef, useState } from "react";
import {
  DynamicForm,
  type DynamicFormRef,
  type FormSchema,
} from "@/components/composed/dynamic-form/dynamic-form";
import { Button } from "@/components/ui/button";

const schema: FormSchema = {
  title: "设置",
  fields: [
    {
      name: "name",
      label: "名称",
      type: "input",
      required: true,
      placeholder: "请输入名称",
    },
    {
      name: "email",
      label: "邮箱",
      type: "input",
      required: true,
      placeholder: "请输入邮箱",
    },
    {
      name: "theme",
      label: "主题",
      type: "select",
      options: [
        { value: "light", label: "浅色" },
        { value: "dark", label: "深色" },
        { value: "auto", label: "自动" },
      ],
      defaultValue: "auto",
    },
  ],
};

export function DynamicFormRefMethods() {
  const formRef = useRef<DynamicFormRef>(null);
  const [output, setOutput] = useState<string>("");

  const handleGetValues = () => {
    const values = formRef.current?.getFieldsValue();
    setOutput(`当前值: ${JSON.stringify(values, null, 2)}`);
  };

  const handleGetErrors = () => {
    const errors = formRef.current?.getFieldsError();
    setOutput(`错误信息: ${JSON.stringify(errors, null, 2)}`);
  };

  const handleValidate = async () => {
    try {
      const values = await formRef.current?.validateFields();
      setOutput(`验证通过: ${JSON.stringify(values, null, 2)}`);
    } catch {
      setOutput(`验证失败`);
    }
  };

  const handleReset = () => {
    formRef.current?.resetFields();
    setOutput("表单已重置");
  };

  const handleSetValues = () => {
    formRef.current?.setFields([
      { name: "name", value: "预设名称" },
      { name: "email", value: "preset@example.com" },
      { name: "theme", value: "dark" },
    ]);
    setOutput("已设置预设值");
  };

  return (
    <div className="space-y-4">
      <DynamicForm ref={formRef} schema={schema} showActions={false} />

      <div className="flex flex-wrap gap-2">
        <Button variant="outline" size="sm" onClick={handleGetValues}>
          获取值
        </Button>
        <Button variant="outline" size="sm" onClick={handleGetErrors}>
          获取错误
        </Button>
        <Button variant="outline" size="sm" onClick={handleValidate}>
          验证
        </Button>
        <Button variant="outline" size="sm" onClick={handleSetValues}>
          设置预设值
        </Button>
        <Button variant="outline" size="sm" onClick={handleReset}>
          重置
        </Button>
      </div>

      {output && (
        <pre className="rounded-md bg-muted p-4 text-sm">
          <code>{output}</code>
        </pre>
      )}
    </div>
  );
}

"use client";

import { useState } from "react";
import {
  DynamicForm,
  type FormSchema,
} from "@/components/composed/dynamic-form/dynamic-form";
import { generateJsonSchema } from "@/components/composed/dynamic-form/dynamic-form-utils";
import { Button } from "@/components/ui/button";

// 模拟 AI 返回的表单配置
const aiGeneratedSchema: FormSchema = {
  title: "旅行计划",
  description: "AI 为您生成的旅行计划表单",
  fields: [
    {
      name: "destination",
      label: "目的地",
      type: "input",
      required: true,
      placeholder: "您想去哪里？",
    },
    {
      name: "duration",
      label: "旅行时长（天）",
      type: "number",
      required: true,
      min: 1,
      max: 30,
      defaultValue: 7,
    },
    {
      name: "budget",
      label: "预算范围",
      type: "slider",
      range: {
        min: 1000,
        max: 50000,
        step: 1000,
      },
      defaultValue: 10000,
    },
    {
      name: "travelStyle",
      label: "旅行风格",
      type: "radio",
      required: true,
      options: [
        { value: "relaxed", label: "休闲放松" },
        { value: "adventure", label: "冒险探索" },
        { value: "cultural", label: "文化体验" },
        { value: "food", label: "美食之旅" },
      ],
      // orientation: "horizontal",
    },
    {
      name: "interests",
      label: "感兴趣的活动",
      type: "checkbox",
      options: [
        { value: "hiking", label: "徒步" },
        { value: "diving", label: "潜水" },
        { value: "museum", label: "博物馆" },
        { value: "shopping", label: "购物" },
      ],
    },
    {
      name: "needGuide",
      label: "需要导游",
      type: "switch",
      defaultValue: false,
    },
    {
      name: "specialRequests",
      label: "特殊要求",
      type: "textarea",
      placeholder: "请告诉我们您的特殊需求...",
    },
  ],
};

export function DynamicFormAIScenario() {
  const [showSchema, setShowSchema] = useState(false);
  const [formData, setFormData] = useState<any>(null);

  // 生成给 AI 的 JSON Schema
  const jsonSchema = generateJsonSchema(aiGeneratedSchema.fields);

  return (
    <div className="space-y-4">
      <div className="rounded-md border p-4">
        <p className="mb-2 text-sm text-muted-foreground">
          💡 AI 场景：用户说「帮我规划一次旅行」，AI
          返回以下表单让用户填写详细信息
        </p>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setShowSchema(!showSchema)}
        >
          {showSchema ? "隐藏" : "查看"} AI JSON Schema
        </Button>

        {showSchema && (
          <pre className="mt-4 overflow-auto rounded-md bg-muted p-4 text-xs">
            <code>{JSON.stringify(jsonSchema, null, 2)}</code>
          </pre>
        )}
      </div>

      <DynamicForm
        schema={aiGeneratedSchema}
        onFinish={(values) => {
          setFormData(values);
          console.log("用户提交的旅行计划:", values);
        }}
        onValuesChange={(values) => {
          console.log("表单值变化:", values);
        }}
      />

      {formData && (
        <div className="rounded-md border bg-muted/50 p-4">
          <h3 className="mb-2 font-semibold">提交的数据：</h3>
          <pre className="overflow-auto text-xs">
            <code>{JSON.stringify(formData, null, 2)}</code>
          </pre>
        </div>
      )}
    </div>
  );
}

"use client";

import {
  DynamicForm,
  type FormSchema,
} from "@/components/composed/dynamic-form/dynamic-form";
import { StatusTag } from "@/components/composed/status-tag/status-tag";

const schema: FormSchema = {
  title: "订单信息",
  description: "填写订单详细信息",
  fields: [
    {
      name: "orderNumber",
      label: "订单编号",
      type: "input",
      placeholder: "自动生成",
      disabled: true,
      defaultValue: "ORD-2026-001",
    },
    {
      name: "customerName",
      label: "客户姓名",
      type: "input",
      required: true,
      placeholder: "请输入客户姓名",
    },
    {
      name: "product",
      label: "产品",
      type: "select",
      required: true,
      options: [
        { value: "laptop", label: "笔记本电脑" },
        { value: "phone", label: "智能手机" },
        { value: "tablet", label: "平板电脑" },
      ],
    },
    {
      name: "quantity",
      label: "数量",
      type: "number",
      defaultValue: 1,
      min: 1,
      max: 100,
    },
    {
      name: "urgent",
      label: "加急处理",
      type: "switch",
      defaultValue: false,
    },
    {
      name: "notes",
      label: "备注",
      type: "textarea",
      placeholder: "请输入备注信息",
    },
  ],
};

export function DynamicFormWithExtra() {
  return (
    <DynamicForm
      schema={schema}
      extra={<StatusTag status="pending" />}
      onFinish={(values) => {
        console.log("提交:", values);
      }}
    />
  );
}

"use client";

import * as React from "react";
import {
  DynamicForm,
  type FormSchema,
  type CustomFieldComponentProps,
} from "@/components/composed/dynamic-form/dynamic-form";
import { cn } from "@/lib/utils";

/**
 * 复杂自定义组件示例：地址选择器
 * 包含省份和城市两个输入框
 * 展示如何在一个自定义组件中管理多个输入字段
 */
interface AddressValue {
  province?: string;
  city?: string;
}

function AddressSelector({
  value,
  onChange,
  disabled,
  error,
}: CustomFieldComponentProps) {
  const addressValue = (value as AddressValue) || {};

  // 省份和城市数据
  const provinces = [
    { name: "广东省", cities: ["广州市", "深圳市", "珠海市", "东莞市"] },
    { name: "浙江省", cities: ["杭州市", "宁波市", "温州市", "绍兴市"] },
    { name: "江苏省", cities: ["南京市", "苏州市", "无锡市", "常州市"] },
    { name: "上海市", cities: ["黄浦区", "徐汇区", "长宁区", "静安区"] },
    { name: "北京市", cities: ["东城区", "西城区", "朝阳区", "海淀区"] },
  ];

  const [selectedProvince, setSelectedProvince] = React.useState<string>(
    addressValue.province || "",
  );
  const [selectedCity, setSelectedCity] = React.useState<string>(
    addressValue.city || "",
  );

  // 当省份或城市改变时，更新表单值
  React.useEffect(() => {
    onChange({
      province: selectedProvince,
      city: selectedCity,
    });
  }, [selectedProvince, selectedCity, onChange]);

  // 当省份改变时，重置城市
  const handleProvinceChange = (province: string) => {
    setSelectedProvince(province);
    setSelectedCity("");
  };

  const currentProvince = provinces.find((p) => p.name === selectedProvince);
  const cities = currentProvince ? currentProvince.cities : [];

  return (
    <div className="space-y-3">
      <div className="grid grid-cols-2 gap-3">
        {/* 省份选择 */}
        <div className="space-y-1.5">
          <label className="text-sm font-medium">省份</label>
          <select
            value={selectedProvince}
            onChange={(e) => handleProvinceChange(e.target.value)}
            disabled={disabled}
            className={cn(
              "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
              "disabled:cursor-not-allowed disabled:opacity-50",
              error && "border-destructive",
            )}
          >
            <option value="">请选择省份</option>
            {provinces.map((province) => (
              <option key={province.name} value={province.name}>
                {province.name}
              </option>
            ))}
          </select>
        </div>

        {/* 城市选择 */}
        <div className="space-y-1.5">
          <label className="text-sm font-medium">城市</label>
          <select
            value={selectedCity}
            onChange={(e) => setSelectedCity(e.target.value)}
            disabled={disabled || !selectedProvince}
            className={cn(
              "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
              "disabled:cursor-not-allowed disabled:opacity-50",
              error && "border-destructive",
            )}
          >
            <option value="">请选择城市</option>
            {cities.map((city) => (
              <option key={city} value={city}>
                {city}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* 显示当前选择 */}
      {selectedProvince && selectedCity && (
        <div className="text-sm text-muted-foreground">
          已选择：{selectedProvince} / {selectedCity}
        </div>
      )}
    </div>
  );
}

/**
 * 自定义价格范围输入组件
 * 包含最小值和最大值两个数字输入框
 */
interface PriceRangeValue {
  min?: number;
  max?: number;
}

function PriceRangeInput({
  value,
  onChange,
  disabled,
  error,
  field: _field,
}: CustomFieldComponentProps) {
  const rangeValue = (value as PriceRangeValue) || {};
  const [minValue, setMinValue] = React.useState<number | "">(
    rangeValue.min ?? "",
  );
  const [maxValue, setMaxValue] = React.useState<number | "">(
    rangeValue.max ?? "",
  );

  // 当 min 或 max 改变时，更新表单值
  React.useEffect(() => {
    onChange({
      min: minValue === "" ? undefined : minValue,
      max: maxValue === "" ? undefined : maxValue,
    });
  }, [minValue, maxValue, onChange]);

  return (
    <div className="space-y-2">
      <div className="grid grid-cols-2 gap-3">
        <div className="space-y-1.5">
          <label className="text-sm font-medium">最小值</label>
          <div className="relative">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
              ¥
            </span>
            <input
              type="number"
              value={minValue}
              onChange={(e) =>
                setMinValue(e.target.value === "" ? "" : Number(e.target.value))
              }
              disabled={disabled}
              placeholder="0"
              className={cn(
                "flex h-9 w-full rounded-md border border-input bg-transparent pl-7 pr-3 py-1 text-sm shadow-sm transition-colors",
                "placeholder:text-muted-foreground",
                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                "disabled:cursor-not-allowed disabled:opacity-50",
                error && "border-destructive",
              )}
            />
          </div>
        </div>

        <div className="space-y-1.5">
          <label className="text-sm font-medium">最大值</label>
          <div className="relative">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
              ¥
            </span>
            <input
              type="number"
              value={maxValue}
              onChange={(e) =>
                setMaxValue(e.target.value === "" ? "" : Number(e.target.value))
              }
              disabled={disabled}
              placeholder="不限"
              className={cn(
                "flex h-9 w-full rounded-md border border-input bg-transparent pl-7 pr-3 py-1 text-sm shadow-sm transition-colors",
                "placeholder:text-muted-foreground",
                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                "disabled:cursor-not-allowed disabled:opacity-50",
                error && "border-destructive",
              )}
            />
          </div>
        </div>
      </div>

      {/* 验证提示 */}
      {minValue !== "" && maxValue !== "" && minValue > maxValue && (
        <p className="text-sm text-destructive">最小值不能大于最大值</p>
      )}

      {/* 显示当前范围 */}
      {(minValue !== "" || maxValue !== "") && (
        <div className="text-sm text-muted-foreground">
          价格范围：
          {minValue !== "" ? `¥${minValue}` : "不限"} -{" "}
          {maxValue !== "" ? `¥${maxValue}` : "不限"}
        </div>
      )}
    </div>
  );
}

/**
 * 自定义颜色选择器组件
 * 必须实现 value 和 onChange 属性
 */
function ColorPicker({
  value,
  onChange,
  disabled,
  error,
}: CustomFieldComponentProps) {
  const colors = [
    { name: "红色", value: "#ef4444" },
    { name: "橙色", value: "#f97316" },
    { name: "黄色", value: "#eab308" },
    { name: "绿色", value: "#22c55e" },
    { name: "蓝色", value: "#3b82f6" },
    { name: "紫色", value: "#a855f7" },
    { name: "粉色", value: "#ec4899" },
    { name: "灰色", value: "#6b7280" },
  ];

  const currentValue = value as string | undefined;

  return (
    <div className="space-y-2">
      <div className="grid grid-cols-4 gap-2">
        {colors.map((color) => (
          <button
            key={color.value}
            type="button"
            disabled={disabled}
            onClick={() => onChange(color.value)}
            className={cn(
              "h-12 rounded-md border-2 transition-all hover:scale-105",
              "focus:outline-none focus:ring-2 focus:ring-offset-2",
              currentValue === color.value
                ? "border-primary ring-2 ring-primary ring-offset-2"
                : "border-transparent",
              disabled && "opacity-50 cursor-not-allowed",
              error && "border-destructive",
            )}
            style={{ backgroundColor: color.value }}
            title={color.name}
          />
        ))}
      </div>
      {currentValue && (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <div
            className="h-4 w-4 rounded border"
            style={{ backgroundColor: currentValue }}
          />
          <span>{currentValue}</span>
        </div>
      )}
    </div>
  );
}

const schema: FormSchema = {
  title: "商品信息表单",
  description: "展示多个自定义组件的使用",
  fields: [
    {
      name: "productName",
      label: "商品名称",
      type: "input",
      required: true,
      placeholder: "请输入商品名称",
    },
    {
      name: "address",
      label: "发货地址",
      type: "input", // type 可以是任意值，因为使用了 component
      required: true,
      component: AddressSelector,
      description: "选择省份和城市（两个输入框组成的自定义组件）",
      defaultValue: {},
    },
    {
      name: "priceRange",
      label: "价格范围",
      type: "input",
      component: PriceRangeInput,
      description: "设置商品的价格区间（包含最小值和最大值）",
      defaultValue: {},
    },
    {
      name: "color",
      label: "主题颜色",
      type: "input",
      component: ColorPicker,
      description: "选择商品的主题颜色",
    },
    {
      name: "category",
      label: "商品分类",
      type: "select",
      required: true,
      options: [
        { value: "electronics", label: "电子产品" },
        { value: "clothing", label: "服装" },
        { value: "food", label: "食品" },
        { value: "books", label: "图书" },
      ],
    },
    {
      name: "description",
      label: "商品描述",
      type: "textarea",
      placeholder: "请输入商品描述...",
    },
  ],
};

export function DynamicFormCustomComponent() {
  return (
    <DynamicForm
      schema={schema}
      onFinish={(values) => {
        console.log("提交的数据:", values);
        alert(JSON.stringify(values, null, 2));
      }}
    />
  );
}