@hsu-react/ui 0.0.1

package/src/components/FormItem/databaseTypeMapping.ts

@@ -0,0 +1,312 @@
+import { FormItemType } from "./index";
+
+/**
+ * 数据库类型到表单类型的映射
+ * 支持 MySQL、PostgreSQL、Oracle、SQL Server、SQLite 等常见数据库
+ */
+
+// 数据库类型枚举（不区分大小写）
+export type DatabaseType =
+  // 字符串类型
+  | "VARCHAR"
+  | "CHAR"
+  | "TEXT"
+  | "TINYTEXT"
+  | "MEDIUMTEXT"
+  | "LONGTEXT"
+  | "NVARCHAR"
+  | "NCHAR"
+  | "NTEXT"
+  | "CLOB"
+  | "STRING"
+  // 数值类型
+  | "INT"
+  | "INTEGER"
+  | "BIGINT"
+  | "SMALLINT"
+  | "TINYINT"
+  | "MEDIUMINT"
+  | "DECIMAL"
+  | "NUMERIC"
+  | "FLOAT"
+  | "DOUBLE"
+  | "REAL"
+  | "NUMBER"
+  | "MONEY"
+  | "SMALLMONEY"
+  // 日期时间类型
+  | "DATE"
+  | "TIME"
+  | "DATETIME"
+  | "TIMESTAMP"
+  | "YEAR"
+  | "DATETIME2"
+  | "SMALLDATETIME"
+  | "DATETIMEOFFSET"
+  // 布尔类型
+  | "BOOLEAN"
+  | "BOOL"
+  | "BIT"
+  // 二进制类型
+  | "BLOB"
+  | "TINYBLOB"
+  | "MEDIUMBLOB"
+  | "LONGBLOB"
+  | "BINARY"
+  | "VARBINARY"
+  | "IMAGE"
+  | "BYTEA"
+  // JSON 类型
+  | "JSON"
+  | "JSONB"
+  // 其他类型
+  | "UUID"
+  | "ENUM"
+  | "SET";
+
+/**
+ * 数据库类型到表单类型的映射表
+ */
+export const DATABASE_TYPE_TO_FORM_ITEM_MAP: Record<string, FormItemType> = {
+  // ========== 字符串类型 ==========
+  VARCHAR: "INPUT",
+  CHAR: "INPUT",
+  TEXT: "TEXTAREA",
+  TINYTEXT: "TEXTAREA",
+  MEDIUMTEXT: "TEXTAREA",
+  LONGTEXT: "TEXTAREA",
+  NVARCHAR: "INPUT",
+  NCHAR: "INPUT",
+  NTEXT: "TEXTAREA",
+  CLOB: "TEXTAREA",
+  STRING: "INPUT",
+
+  // ========== 数值类型 ==========
+  INT: "INPUTNUMBER",
+  INTEGER: "INPUTNUMBER",
+  BIGINT: "INPUTNUMBER",
+  SMALLINT: "INPUTNUMBER",
+  TINYINT: "INPUTNUMBER",
+  MEDIUMINT: "INPUTNUMBER",
+  DECIMAL: "INPUTNUMBER",
+  NUMERIC: "INPUTNUMBER",
+  FLOAT: "INPUTNUMBER",
+  DOUBLE: "INPUTNUMBER",
+  REAL: "INPUTNUMBER",
+  NUMBER: "INPUTNUMBER",
+  MONEY: "INPUTNUMBER",
+  SMALLMONEY: "INPUTNUMBER",
+
+  // ========== 日期时间类型 ==========
+  DATE: "DATEPICKER",
+  TIME: "DATEPICKER",
+  DATETIME: "DATEPICKER",
+  TIMESTAMP: "DATEPICKER",
+  YEAR: "DATEPICKER",
+  DATETIME2: "DATEPICKER",
+  SMALLDATETIME: "DATEPICKER",
+  DATETIMEOFFSET: "DATEPICKER",
+
+  // ========== 布尔类型 ==========
+  BOOLEAN: "SWITCH",
+  BOOL: "SWITCH",
+  BIT: "SWITCH",
+
+  // ========== 二进制类型 ==========
+  BLOB: "FILE",
+  TINYBLOB: "FILE",
+  MEDIUMBLOB: "FILE",
+  LONGBLOB: "FILE",
+  BINARY: "FILE",
+  VARBINARY: "FILE",
+  IMAGE: "IMAGEFILE",
+  BYTEA: "FILE",
+
+  // ========== JSON 类型 ==========
+  JSON: "CODEMIRROR",
+  JSONB: "CODEMIRROR",
+
+  // ========== 其他类型 ==========
+  UUID: "INPUT",
+  ENUM: "SELECT",
+  SET: "CHECKBOXGROUP",
+};
+
+/**
+ * 根据数据库类型获取对应的表单类型
+ * @param databaseType 数据库类型（不区分大小写）
+ * @param defaultType 默认表单类型，如果找不到映射则返回此类型
+ * @returns 表单类型
+ */
+export function getFormItemTypeByDatabaseType(
+  databaseType: string,
+  defaultType: FormItemType = "INPUT"
+): FormItemType {
+  const upperType = databaseType.toUpperCase().trim();
+
+  // 处理带括号的类型，如 VARCHAR(255), INT(11) 等
+  const baseType = upperType.split("(")[0].trim();
+
+  return DATABASE_TYPE_TO_FORM_ITEM_MAP[baseType] || defaultType;
+}
+
+/**
+ * 根据数据库类型和长度判断是否应该使用 TEXTAREA
+ * 如果字符串类型长度超过阈值，建议使用 TEXTAREA
+ * @param databaseType 数据库类型
+ * @param length 字段长度
+ * @param threshold 阈值，默认 255
+ * @returns 是否应该使用 TEXTAREA
+ */
+export function shouldUseTextarea(
+  databaseType: string,
+  length?: number,
+  threshold: number = 255
+): boolean {
+  const upperType = databaseType.toUpperCase().trim();
+  const baseType = upperType.split("(")[0].trim();
+
+  // 如果已经是 TEXT 类型，直接返回 true
+  if (
+    ["TEXT", "TINYTEXT", "MEDIUMTEXT", "LONGTEXT", "NTEXT", "CLOB"].includes(
+      baseType
+    )
+  ) {
+    return true;
+  }
+
+  // 如果是 VARCHAR 或 CHAR 类型，且长度超过阈值，建议使用 TEXTAREA
+  if (["VARCHAR", "CHAR", "NVARCHAR", "NCHAR"].includes(baseType)) {
+    return length ? length > threshold : false;
+  }
+
+  return false;
+}
+
+/**
+ * 根据数据库类型获取智能推荐的表单类型
+ * 结合类型和长度等信息进行智能判断
+ * @param databaseType 数据库类型
+ * @param length 字段长度
+ * @returns 推荐的表单类型
+ */
+export function getRecommendedFormItemType(
+  databaseType: string,
+  length?: number
+): FormItemType {
+  // 如果字符串类型长度较大，使用 TEXTAREA
+  if (shouldUseTextarea(databaseType, length)) {
+    return "TEXTAREA";
+  }
+
+  // 使用基础映射
+  return getFormItemTypeByDatabaseType(databaseType);
+}
+
+/**
+ * 数据库类型分类
+ */
+export const DATABASE_TYPE_CATEGORIES = {
+  STRING: [
+    "VARCHAR",
+    "CHAR",
+    "TEXT",
+    "TINYTEXT",
+    "MEDIUMTEXT",
+    "LONGTEXT",
+    "NVARCHAR",
+    "NCHAR",
+    "NTEXT",
+    "CLOB",
+    "STRING",
+  ],
+  NUMBER: [
+    "INT",
+    "INTEGER",
+    "BIGINT",
+    "SMALLINT",
+    "TINYINT",
+    "MEDIUMINT",
+    "DECIMAL",
+    "NUMERIC",
+    "FLOAT",
+    "DOUBLE",
+    "REAL",
+    "NUMBER",
+    "MONEY",
+    "SMALLMONEY",
+  ],
+  DATETIME: [
+    "DATE",
+    "TIME",
+    "DATETIME",
+    "TIMESTAMP",
+    "YEAR",
+    "DATETIME2",
+    "SMALLDATETIME",
+    "DATETIMEOFFSET",
+  ],
+  BOOLEAN: ["BOOLEAN", "BOOL", "BIT"],
+  BINARY: [
+    "BLOB",
+    "TINYBLOB",
+    "MEDIUMBLOB",
+    "LONGBLOB",
+    "BINARY",
+    "VARBINARY",
+    "IMAGE",
+    "BYTEA",
+  ],
+  JSON: ["JSON", "JSONB"],
+  OTHER: ["UUID", "ENUM", "SET"],
+} as const;
+
+/**
+ * 获取数据库类型的分类
+ * @param databaseType 数据库类型
+ * @returns 类型分类
+ */
+export function getDatabaseTypeCategory(
+  databaseType: string
+): keyof typeof DATABASE_TYPE_CATEGORIES | null {
+  const upperType = databaseType.toUpperCase().trim();
+  const baseType = upperType.split("(")[0].trim();
+
+  for (const [category, types] of Object.entries(DATABASE_TYPE_CATEGORIES)) {
+    if (types.includes(baseType as never)) {
+      return category as keyof typeof DATABASE_TYPE_CATEGORIES;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 反向映射：表单类型到推荐的数据库类型
+ */
+export const FORM_ITEM_TO_DATABASE_TYPE_MAP: Partial<
+  Record<FormItemType, DatabaseType[]>
+> = {
+  INPUT: ["VARCHAR", "CHAR", "NVARCHAR", "NCHAR", "STRING", "UUID"],
+  TEXTAREA: ["TEXT", "LONGTEXT", "MEDIUMTEXT", "TINYTEXT", "NTEXT", "CLOB"],
+  INPUTNUMBER: [
+    "INT",
+    "INTEGER",
+    "BIGINT",
+    "SMALLINT",
+    "TINYINT",
+    "DECIMAL",
+    "NUMERIC",
+    "FLOAT",
+    "DOUBLE",
+    "REAL",
+    "NUMBER",
+  ],
+  DATEPICKER: ["DATE", "DATETIME", "TIMESTAMP", "DATETIME2"],
+  SWITCH: ["BOOLEAN", "BOOL", "BIT"],
+  SELECT: ["ENUM", "VARCHAR", "INT"],
+  CHECKBOXGROUP: ["SET", "VARCHAR"],
+  FILE: ["BLOB", "BINARY", "VARBINARY", "BYTEA"],
+  IMAGEFILE: ["BLOB", "IMAGE", "VARBINARY"],
+  CODEMIRROR: ["JSON", "JSONB", "TEXT"],
+};

package/src/components/FormItem/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 数据录入
+  order: 3
+title: FormItem 表单项
+---
+
+# FormItem 表单项
+
+> `FormItem` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { FormItem } from "@hsu-react/ui";
+```

package/src/components/FormItem/index.tsx

@@ -0,0 +1,387 @@
+import FormAuto, { FormAutoProps } from "./FormAuto";
+import FormCheckbox, {
+  FormCheckboxGroupProps,
+  FormCheckboxProps,
+} from "./FormCheckbox";
+import FormDatePicker, {
+  FormDatePickerProps,
+  FormRangePickerProps,
+  FormStepPickerProps,
+} from "./FormDatePicker";
+import FormEditor, { FormEditorProps } from "./FormEditor";
+import FormInput, {
+  FormInputNumberProps,
+  FormInputProps,
+  FormPasswordProps,
+  FormPasswordStrengthProps,
+  FormRangeInputProps,
+  FormTextAreaInputProps,
+} from "./FormInput";
+import FormRadio, { FormRadioProps } from "./FormRadio";
+import FormSegmented, { FormSegmentedProps } from "./FormSegmented";
+import FormSelect, {
+  FormAutoCompleteSelectProps,
+  FormIconSelectProps,
+  FormSelectProps,
+  FormTreeSelectProps,
+} from "./FormSelect";
+import FormSlider, { FormSliderProps } from "./FormSlider";
+import FormSwitch, { FormSwitchProps } from "./FormSwitch";
+import FormTree, { FormTreeProps } from "./FormTree";
+import FormUpload, { FormImageProps, FormUploadProps } from "./FormUpload";
+import ItemContainer, { ItemContainerProps } from "./ItemContainer";
+import FormText, { FormTextProps } from "./FormText";
+import FormCodeMirror, { FormCodeMirrorProps } from "./FormCodeMirror";
+
+import React from "react";
+
+export { ItemContainer as FormItemContainer };
+export type { ItemContainerProps as FormItemContainerProps };
+
+// 公共基础类型
+interface BaseFormItem {
+  visible?: boolean;
+}
+
+// 核心映射（按分组排序）
+type FormItemMap = {
+  // 输入类
+  AUTO: FormAutoProps;
+  INPUT: FormInputProps;
+  TEXTAREA: FormTextAreaInputProps;
+  PASSWORD: FormPasswordProps;
+  PASSWORDSTRENGTH: FormPasswordStrengthProps;
+  INPUTNUMBER: FormInputNumberProps;
+  RANGEINPUT: FormRangeInputProps;
+  SLIDER: FormSliderProps;
+  EDITOR: FormEditorProps;
+  CODEMIRROR: FormCodeMirrorProps;
+  TEXT: FormTextProps;
+
+  // 选择类
+  SELECT: FormSelectProps;
+  TREESELECT: FormTreeSelectProps;
+  AUTOCOMPLETESELECT: FormAutoCompleteSelectProps;
+  SEGMENTED: FormSegmentedProps;
+  SWITCH: FormSwitchProps;
+  RADIO: FormRadioProps;
+  CHECKBOX: FormCheckboxProps;
+  CHECKBOXGROUP: FormCheckboxGroupProps;
+  DATEPICKER: FormDatePickerProps;
+  RANGEPICKER: FormRangePickerProps;
+  STEPPICKER: FormStepPickerProps;
+  TREE: FormTreeProps;
+  ICONSELECT: FormIconSelectProps;
+
+  // 上传类
+  FILE: FormUploadProps;
+  IMAGEFILE: FormImageProps;
+};
+
+// 派生类型
+export type FormItemType = keyof FormItemMap;
+
+// 表单项属性
+export type FormItemProps = {
+  [K in keyof FormItemMap]: { type: K } & BaseFormItem & FormItemMap[K];
+}[keyof FormItemMap];
+
+// 中文字典
+export const PlaceholderDict: Record<FormItemType, string> = {
+  // 输入类
+  AUTO: "",
+  INPUT: "请输入",
+  TEXTAREA: "请输入",
+  PASSWORD: "请输入",
+  PASSWORDSTRENGTH: "请输入",
+  INPUTNUMBER: "请输入",
+  RANGEINPUT: "请输入",
+  SLIDER: "请输入",
+  EDITOR: "请输入",
+  CODEMIRROR: "请输入",
+  TEXT: "请输入",
+
+  // 选择类
+  SELECT: "请选择",
+  TREESELECT: "请选择",
+  AUTOCOMPLETESELECT: "请选择",
+  SEGMENTED: "请选择",
+  SWITCH: "请选择",
+  RADIO: "请选择",
+  CHECKBOX: "请选择",
+  CHECKBOXGROUP: "请选择",
+  DATEPICKER: "请选择",
+  RANGEPICKER: "请选择",
+  STEPPICKER: "请选择",
+  TREE: "请选择",
+  ICONSELECT: "请选择",
+
+  // 上传类
+  FILE: "请上传",
+  IMAGEFILE: "请上传",
+};
+
+// 英文字典
+export const PlaceholderDictEn: Record<FormItemType, string> = {
+  // 输入类
+  AUTO: "",
+  INPUT: "Please enter",
+  TEXTAREA: "Please enter",
+  PASSWORD: "Please enter",
+  PASSWORDSTRENGTH: "Please enter",
+  INPUTNUMBER: "Please enter",
+  RANGEINPUT: "Please enter",
+  SLIDER: "Please enter",
+  EDITOR: "Please enter",
+  CODEMIRROR: "Please enter",
+  TEXT: "Please enter",
+
+  // 选择类
+  SELECT: "Please select",
+  TREESELECT: "Please select",
+  AUTOCOMPLETESELECT: "Please select",
+  SEGMENTED: "Please select",
+  SWITCH: "Please select",
+  RADIO: "Please select",
+  CHECKBOX: "Please select",
+  CHECKBOXGROUP: "Please select",
+  DATEPICKER: "Please select",
+  RANGEPICKER: "Please select",
+  STEPPICKER: "Please select",
+  TREE: "Please select",
+  ICONSELECT: "Please select",
+
+  // 上传类
+  FILE: "Please upload",
+  IMAGEFILE: "Please upload",
+};
+
+const FormItem: React.FC<FormItemProps> = (props) => {
+  const { type, visible, en } = props;
+
+  if (visible === false) {
+    return null;
+  }
+
+  switch (type) {
+    case "AUTO":
+      return <FormAuto {...props} />;
+    case "INPUT":
+      return (
+        <FormInput
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "TEXTAREA":
+      return (
+        <FormInput.TextArea
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "PASSWORDSTRENGTH":
+      return (
+        <FormInput.PasswordStrength
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "INPUTNUMBER":
+      return (
+        <FormInput.InputNumber
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "PASSWORD":
+      return (
+        <FormInput.Password
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "RANGEINPUT":
+      return (
+        <FormInput.RangeInput
+          {...props}
+          componentProps={{
+            type: "NUMBER",
+            placeholder: [
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn.INPUT
+                : PlaceholderDict.INPUT,
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn.INPUT
+                : PlaceholderDict.INPUT,
+            ],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "SELECT":
+      return (
+        <FormSelect
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "TREESELECT":
+      return (
+        <FormSelect.Tree
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "AUTOCOMPLETESELECT":
+      return (
+        <FormSelect.AutoComplete
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "ICONSELECT":
+      return <FormSelect.Icon {...props} />;
+    case "SEGMENTED":
+      return <FormSegmented {...props} />;
+    case "SWITCH":
+      return <FormSwitch {...props} />;
+    case "RADIO":
+      return <FormRadio {...props} />;
+    case "CHECKBOX":
+      return <FormCheckbox {...props} />;
+    case "CHECKBOXGROUP":
+      return <FormCheckbox.Group {...props} />;
+    case "DATEPICKER":
+      return (
+        <FormDatePicker
+          {...props}
+          componentProps={{
+            placeholder:
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "RANGEPICKER":
+      return (
+        <FormDatePicker.RangePicker
+          {...props}
+          componentProps={{
+            placeholder: [
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+              typeof props.label === "string"
+                ? props.label
+                : en
+                ? PlaceholderDictEn[type]
+                : PlaceholderDict[type],
+            ],
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "STEPPICKER":
+      return (
+        <FormDatePicker.StepPicker
+          {...props}
+          componentProps={{
+            ...props.componentProps,
+          }}
+        />
+      );
+    case "FILE":
+      return <FormUpload {...props} />;
+    case "IMAGEFILE":
+      return <FormUpload.Image {...props} />;
+    case "TREE":
+      return <FormTree {...props} />;
+    case "SLIDER":
+      return <FormSlider {...props} />;
+    case "EDITOR":
+      return <FormEditor {...props} />;
+    case "CODEMIRROR":
+      return <FormCodeMirror {...props} />;
+    case "TEXT":
+      return <FormText {...props} />;
+    default:
+      return null;
+  }
+};
+
+export default FormItem;