@hsu-react/ui 0.0.1

package/lib/components/FormItem/ItemContainer/index.module.less

@@ -0,0 +1,387 @@
+.formItem {
+  --label-width: auto;
+  --label-height: max-content;
+  --label-min-height: 32px;
+  --input-width: 100%;
+  --input-height: max-content;
+  --input-min-height: 32px;
+  --input-horizontal-min-width: 0px;
+  --input-horizontal-flex-grow: 1;
+
+  width: 100%;
+  min-height: max-content;
+
+  margin: 0px;
+
+  .tipsIcon {
+    margin-left: 6px;
+
+    cursor: pointer;
+  }
+
+  .ant-picker {
+    width: 100%;
+  }
+
+  .ant-form-item-row {
+    width: 100%;
+    height: 100%;
+
+    .ant-form-item-control {
+      display: flex;
+      flex-direction: column;
+      row-gap: 5px;
+
+      width: var(--input-width) !important;
+      max-width: 100%;
+
+      .ant-form-item-control-input {
+        height: var(--input-height);
+        min-height: var(--input-min-height);
+
+        .ant-form-item-control-input-content {
+          display: flex;
+          align-items: center;
+
+          height: 100%;
+          min-height: inherit;
+
+          > * {
+            min-height: inherit;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-form-item-label {
+    flex: 0 1 auto !important;
+    display: inline-flex;
+    align-items: center;
+
+    width: var(--label-width);
+    height: var(--label-height);
+    min-height: var(--label-min-height);
+    padding: 0px;
+
+    white-space: nowrap;
+
+    > label {
+      justify-content: flex-end;
+
+      width: 100%;
+      height: max-content;
+
+      font-size: 14px;
+      font-weight: 400;
+
+      pointer-events: none;
+
+      .label {
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        width: 100%;
+
+        .labelCont {
+          width: max-content;
+          max-width: 100%;
+          min-width: 0px;
+
+          &.labelBreak {
+            display: inline-block;
+
+            white-space: pre-wrap;
+            word-break: break-all;
+            word-wrap: break-word;
+          }
+
+          &.labelEllipsis {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        &::after {
+          position: relative;
+
+          content: ":";
+
+          margin-block: 0;
+          margin-inline-start: 2px;
+          margin-inline-end: 8px;
+        }
+      }
+
+      .labelExtra {
+        display: inline-flex;
+        justify-content: flex-end;
+        flex-basis: 100%;
+
+        color: var(--cf-text-2);
+        font-size: 14px;
+        white-space: pre-wrap;
+      }
+
+      .labelContent {
+        display: inline-flex;
+        align-items: center;
+
+        width: min-content;
+      }
+
+      .tipsIcon {
+        pointer-events: auto;
+
+        &::after {
+          position: relative;
+
+          content: ":";
+
+          margin-block: 0;
+          margin-inline-start: 2px;
+          margin-inline-end: 8px;
+        }
+      }
+
+      .tipsIconNode {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        pointer-events: auto;
+
+        cursor: pointer;
+      }
+
+      &.ant-form-item-no-colon {
+        .label {
+          &::after {
+            content: none;
+          }
+        }
+
+        .tipsIcon {
+          &::after {
+            content: none;
+          }
+        }
+      }
+
+      &::before,
+      &::after {
+        content: none !important;
+      }
+
+      &.ant-form-item-required {
+        .label {
+          &::before {
+            content: "*";
+
+            display: inline-block;
+
+            margin-inline-start: 0px;
+            margin-inline-end: 4px;
+
+            color: #ff4d4f;
+            font-size: 14px;
+            font-family: SimSun, sans-serif;
+            line-height: 1;
+          }
+        }
+
+        .labelContent {
+          &::before {
+            content: "*";
+
+            display: inline-block;
+
+            margin-inline-start: 0px;
+            margin-inline-end: 4px;
+
+            color: #ff4d4f;
+            font-size: 14px;
+            font-family: SimSun, sans-serif;
+            line-height: 1;
+          }
+        }
+      }
+    }
+  }
+
+  &.after {
+    label.ant-form-item-required {
+      .label {
+        &::before {
+          content: none !important;
+        }
+
+        &::after {
+          content: "*";
+
+          display: inline-block;
+
+          margin-inline-start: 4px;
+          margin-inline-end: 0px;
+
+          color: #ff4d4f;
+          font-size: 14px;
+          font-family: SimSun, sans-serif;
+          line-height: 1;
+        }
+      }
+
+      .labelContent {
+        &::before {
+          content: none !important;
+        }
+      }
+    }
+
+    &.hasLabelContent {
+      label.ant-form-item-required {
+        &::after {
+          content: none;
+        }
+
+        .labelContent {
+          &::after {
+            content: "*";
+
+            display: inline-block;
+
+            margin-inline-start: 4px;
+            margin-inline-end: 0px;
+
+            color: #ff4d4f;
+            font-size: 14px;
+            font-family: SimSun, sans-serif;
+            line-height: 1;
+          }
+        }
+      }
+    }
+  }
+
+  &.hideRequired {
+    label.ant-form-item-required {
+      .label {
+        &::before {
+          content: none !important;
+        }
+      }
+
+      .labelContent {
+        &::before {
+          content: none !important;
+        }
+      }
+    }
+
+    &.after {
+      label.ant-form-item-required {
+        .label {
+          &::after {
+            content: none !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.horizontal {
+    .ant-form-item-row {
+      flex-wrap: nowrap;
+      column-gap: 5px;
+
+      .ant-form-item-control {
+        flex: 1 !important;
+        flex-grow: var(--input-horizontal-flex-grow) !important;
+
+        min-width: var(--input-horizontal-min-width);
+      }
+    }
+
+    &.start {
+      .ant-form-item-control-input-content {
+        text-align: left;
+      }
+    }
+
+    &.between {
+      .ant-form-item-control-input-content {
+        text-align: right;
+      }
+    }
+  }
+
+  &.vertical {
+    --label-height: max-content;
+
+    .ant-form-item-row {
+      flex-direction: column;
+      row-gap: 5px;
+
+      height: max-content;
+
+      .ant-form-item-label {
+        text-align: start;
+
+        width: 100%;
+        margin-right: 0px !important;
+        padding-bottom: 0px;
+
+        label {
+          justify-content: flex-start;
+          flex-wrap: wrap;
+
+          .label {
+            justify-content: flex-start;
+          }
+
+          &:has(> .labelExtra) {
+            flex-direction: column;
+            flex-wrap: nowrap;
+            align-items: flex-start;
+
+            .labelExtra {
+              justify-content: flex-start;
+            }
+          }
+        }
+      }
+
+      .ant-form-item-control {
+        flex: 0 1 auto !important;
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+      }
+    }
+  }
+
+  &.legacyHasLabelExtra {
+    .ant-form-item-row {
+      .ant-form-item-label {
+        label {
+          flex-direction: column;
+          flex-wrap: nowrap;
+          align-items: flex-start;
+
+          .labelExtra {
+            justify-content: flex-start;
+          }
+        }
+      }
+    }
+  }
+
+  &.hideAdditiona {
+    .ant-form-item-additional {
+      display: none;
+    }
+  }
+}

package/lib/components/FormItem/databaseTypeMapping.d.ts

@@ -0,0 +1,56 @@
+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" | "JSONB" | "UUID" | "ENUM" | "SET";
+/**
+ * 数据库类型到表单类型的映射表
+ */
+export declare const DATABASE_TYPE_TO_FORM_ITEM_MAP: Record<string, FormItemType>;
+/**
+ * 根据数据库类型获取对应的表单类型
+ * @param databaseType 数据库类型（不区分大小写）
+ * @param defaultType 默认表单类型，如果找不到映射则返回此类型
+ * @returns 表单类型
+ */
+export declare function getFormItemTypeByDatabaseType(databaseType: string, defaultType?: FormItemType): FormItemType;
+/**
+ * 根据数据库类型和长度判断是否应该使用 TEXTAREA
+ * 如果字符串类型长度超过阈值，建议使用 TEXTAREA
+ * @param databaseType 数据库类型
+ * @param length 字段长度
+ * @param threshold 阈值，默认 255
+ * @returns 是否应该使用 TEXTAREA
+ */
+export declare function shouldUseTextarea(databaseType: string, length?: number, threshold?: number): boolean;
+/**
+ * 根据数据库类型获取智能推荐的表单类型
+ * 结合类型和长度等信息进行智能判断
+ * @param databaseType 数据库类型
+ * @param length 字段长度
+ * @returns 推荐的表单类型
+ */
+export declare function getRecommendedFormItemType(databaseType: string, length?: number): FormItemType;
+/**
+ * 数据库类型分类
+ */
+export declare const DATABASE_TYPE_CATEGORIES: {
+    readonly STRING: readonly ["VARCHAR", "CHAR", "TEXT", "TINYTEXT", "MEDIUMTEXT", "LONGTEXT", "NVARCHAR", "NCHAR", "NTEXT", "CLOB", "STRING"];
+    readonly NUMBER: readonly ["INT", "INTEGER", "BIGINT", "SMALLINT", "TINYINT", "MEDIUMINT", "DECIMAL", "NUMERIC", "FLOAT", "DOUBLE", "REAL", "NUMBER", "MONEY", "SMALLMONEY"];
+    readonly DATETIME: readonly ["DATE", "TIME", "DATETIME", "TIMESTAMP", "YEAR", "DATETIME2", "SMALLDATETIME", "DATETIMEOFFSET"];
+    readonly BOOLEAN: readonly ["BOOLEAN", "BOOL", "BIT"];
+    readonly BINARY: readonly ["BLOB", "TINYBLOB", "MEDIUMBLOB", "LONGBLOB", "BINARY", "VARBINARY", "IMAGE", "BYTEA"];
+    readonly JSON: readonly ["JSON", "JSONB"];
+    readonly OTHER: readonly ["UUID", "ENUM", "SET"];
+};
+/**
+ * 获取数据库类型的分类
+ * @param databaseType 数据库类型
+ * @returns 类型分类
+ */
+export declare function getDatabaseTypeCategory(databaseType: string): keyof typeof DATABASE_TYPE_CATEGORIES | null;
+/**
+ * 反向映射：表单类型到推荐的数据库类型
+ */
+export declare const FORM_ITEM_TO_DATABASE_TYPE_MAP: Partial<Record<FormItemType, DatabaseType[]>>;

package/lib/components/FormItem/databaseTypeMapping.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FORM_ITEM_TO_DATABASE_TYPE_MAP = exports.DATABASE_TYPE_TO_FORM_ITEM_MAP = exports.DATABASE_TYPE_CATEGORIES = void 0;
+exports.getDatabaseTypeCategory = getDatabaseTypeCategory;
+exports.getFormItemTypeByDatabaseType = getFormItemTypeByDatabaseType;
+exports.getRecommendedFormItemType = getRecommendedFormItemType;
+exports.shouldUseTextarea = shouldUseTextarea;
+/**
+ * 数据库类型到表单类型的映射
+ * 支持 MySQL、PostgreSQL、Oracle、SQL Server、SQLite 等常见数据库
+ */
+
+// 数据库类型枚举（不区分大小写）
+
+/**
+ * 数据库类型到表单类型的映射表
+ */
+const DATABASE_TYPE_TO_FORM_ITEM_MAP = exports.DATABASE_TYPE_TO_FORM_ITEM_MAP = {
+  // ========== 字符串类型 ==========
+  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 表单类型
+ */
+function getFormItemTypeByDatabaseType(databaseType, defaultType = "INPUT") {
+  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
+ */
+function shouldUseTextarea(databaseType, length, threshold = 255) {
+  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 推荐的表单类型
+ */
+function getRecommendedFormItemType(databaseType, length) {
+  // 如果字符串类型长度较大，使用 TEXTAREA
+  if (shouldUseTextarea(databaseType, length)) {
+    return "TEXTAREA";
+  }
+
+  // 使用基础映射
+  return getFormItemTypeByDatabaseType(databaseType);
+}
+
+/**
+ * 数据库类型分类
+ */
+const DATABASE_TYPE_CATEGORIES = exports.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"]
+};
+
+/**
+ * 获取数据库类型的分类
+ * @param databaseType 数据库类型
+ * @returns 类型分类
+ */
+function getDatabaseTypeCategory(databaseType) {
+  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)) {
+      return category;
+    }
+  }
+  return null;
+}
+
+/**
+ * 反向映射：表单类型到推荐的数据库类型
+ */
+const FORM_ITEM_TO_DATABASE_TYPE_MAP = exports.FORM_ITEM_TO_DATABASE_TYPE_MAP = {
+  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/lib/components/FormItem/index.d.ts

@@ -0,0 +1,59 @@
+import { FormAutoProps } from "./FormAuto";
+import { FormCheckboxGroupProps, FormCheckboxProps } from "./FormCheckbox";
+import { FormDatePickerProps, FormRangePickerProps, FormStepPickerProps } from "./FormDatePicker";
+import { FormEditorProps } from "./FormEditor";
+import { FormInputNumberProps, FormInputProps, FormPasswordProps, FormPasswordStrengthProps, FormRangeInputProps, FormTextAreaInputProps } from "./FormInput";
+import { FormRadioProps } from "./FormRadio";
+import { FormSegmentedProps } from "./FormSegmented";
+import { FormAutoCompleteSelectProps, FormIconSelectProps, FormSelectProps, FormTreeSelectProps } from "./FormSelect";
+import { FormSliderProps } from "./FormSlider";
+import { FormSwitchProps } from "./FormSwitch";
+import { FormTreeProps } from "./FormTree";
+import { FormImageProps, FormUploadProps } from "./FormUpload";
+import ItemContainer, { ItemContainerProps } from "./ItemContainer";
+import { FormTextProps } from "./FormText";
+import { 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 declare const PlaceholderDict: Record<FormItemType, string>;
+export declare const PlaceholderDictEn: Record<FormItemType, string>;
+declare const FormItem: React.FC<FormItemProps>;
+export default FormItem;