@fairys/taro-tools-simple-form-ui 0.0.5

package/src/form/item.config.tsx

@@ -0,0 +1,189 @@
+/**
+ * 表单配置
+ */
+import { View } from '@tarojs/components';
+
+import { Fragment } from 'react';
+import { FairysTaroValtioFormItem, FairysTaroValtioFormHideItem } from './form.item';
+import type { FairysTaroValtioFormItemProps } from './form.item';
+import { FairysTaroRadioGroupBase, FairysTaroRadioGroupProps } from 'components/radio.group';
+import { FairysTaroCalendarBase, FairysTaroCalendarProps } from 'components/calendar';
+import { FairysTaroCascaderBase, FairysTaroCascaderProps } from 'components/cascader';
+import { FairysTaroCheckboxGroupBase, FairysTaroCheckboxGroupProps } from 'components/checkbox.group';
+import { FairysTaroDatePickerBase, FairysTaroDatePickerProps } from 'components/date.picker';
+import { FairysTaroPickerBase, FairysTaroPickerProps } from 'components/picker';
+import { FairysTaroPopupSearchBase, FairysTaroPopupSearchProps } from 'components/popup.search';
+import {
+  Input,
+  TaroInputProps,
+  InputNumber,
+  TaroInputNumberProps,
+  RadioGroup,
+  RadioGroupProps,
+  Radio,
+  RadioProps,
+  Range,
+  RangeProps,
+  Rate,
+  RateProps,
+  Signature,
+  SignatureProps,
+  Switch,
+  SwitchProps,
+  TextArea,
+  TextAreaProps,
+  Uploader,
+  UploaderProps,
+} from '@nutui/nutui-react-taro';
+
+export type MObject<T> = { [K in keyof T]: T[K] };
+export type MakeFieldRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+
+/**
+ * 表单项配置基础类型
+ */
+export interface FairysTaroValtioFormItemRowConfingBaseType<T, M, K = undefined> {
+  /**输入框类型*/
+  type: T;
+  /**输入框属性*/
+  attrs?: Partial<T extends undefined ? TaroInputProps : M>;
+  /**自定义渲染函数*/
+  render?: K;
+  /**是否添加隐藏组件*/
+  isHide?: boolean;
+  /**是否添加置空组件*/
+  isEmpty?: boolean;
+}
+
+/**
+ * 单个表单项配置类型
+ */
+interface FairysTaroValtioFormItemRowConfing<T, M, K = undefined>
+  extends FairysTaroValtioFormItemRowConfingBaseType<T, M, K>,
+    Omit<FairysTaroValtioFormItemProps, 'attrs'> {}
+
+/**
+ * 表单项配置映射类型
+ */
+export type MappedType<T extends MObject<T>> = {
+  [K in keyof T]: FairysTaroValtioFormItemRowConfing<K, T[K]>;
+}[keyof T];
+
+/**
+ * 表单项组件名对应组件类型
+ */
+export interface FairysTaroValtioFormItemTypeConfing {
+  /**输入框*/
+  input: TaroInputProps;
+  /**数字输入框*/
+  inputNumber: TaroInputNumberProps;
+  /**单选组*/
+  fairysRadioGroup: FairysTaroRadioGroupProps;
+  /**日历组件*/
+  fairysCalendar: FairysTaroCalendarProps;
+  /**级联选择器*/
+  fairysCascader: FairysTaroCascaderProps;
+  /**多选组*/
+  fairysCheckboxGroup: FairysTaroCheckboxGroupProps;
+  /**日期选择器*/
+  fairysDatePicker: FairysTaroDatePickerProps;
+  /**选择器*/
+  fairysPicker: FairysTaroPickerProps;
+  /**弹出搜索框*/
+  fairysPopupSearch: FairysTaroPopupSearchProps;
+  /**单选组*/
+  radioGroup: RadioGroupProps;
+  /**单选框*/
+  radio: RadioProps;
+  /**范围选择器*/
+  range: RangeProps;
+  /**评分组件*/
+  rate: RateProps;
+  /**签名组件*/
+  signature: SignatureProps;
+  /**开关组件*/
+  switch: SwitchProps;
+  /**多行文本输入框*/
+  textarea: TextAreaProps;
+  /**上传组件*/
+  uploader: UploaderProps;
+}
+
+/**
+ * 表单项配置类型
+ */
+export type FairysTaroValtioInputConfigType =
+  | MappedType<FairysTaroValtioFormItemTypeConfing>
+  | FairysTaroValtioFormItemRowConfing<'custom', any, React.ReactNode>
+  | FairysTaroValtioFormItemRowConfing<'render', any, React.ReactNode>;
+
+const create_itemConfig = (configList: FairysTaroValtioInputConfigType[]) => {
+  return (
+    <Fragment>
+      {configList.map((item, index) => {
+        const { type, isHide, attrs = {}, isEmpty, ...rest } = item;
+        const newItem = { attrs, ...rest };
+        /**自定义表单组件*/
+        if (type === 'custom') {
+          newItem.children = item.render || <Fragment />;
+        } else if (type === 'render') {
+          // 自定义渲染内容
+          return <Fragment key={index}>{item.render}</Fragment>;
+        } else if (type === 'input') {
+          newItem.children = <Input align="right" clearable {...attrs} />;
+        } else if (type === 'inputNumber') {
+          newItem.children = <InputNumber {...attrs} />;
+        } else if (type === 'fairysRadioGroup') {
+          newItem.children = <FairysTaroRadioGroupBase {...attrs} />;
+        } else if (type === 'radioGroup') {
+          newItem.children = <RadioGroup {...attrs} />;
+        } else if (type === 'radio') {
+          newItem.children = <Radio {...attrs} />;
+        } else if (type === 'range') {
+          newItem.children = <Range {...attrs} />;
+        } else if (type === 'rate') {
+          newItem.children = <Rate {...attrs} />;
+        } else if (type === 'signature') {
+          newItem.children = <Signature {...attrs} />;
+        } else if (type === 'switch') {
+          newItem.children = <Switch {...attrs} />;
+        } else if (type === 'textarea') {
+          newItem.children = <TextArea {...attrs} />;
+        } else if (type === 'uploader') {
+          newItem.children = <Uploader {...attrs} />;
+        } else if (type === 'fairysCalendar') {
+          newItem.children = <FairysTaroCalendarBase {...attrs} />;
+        } else if (type === 'fairysCascader') {
+          const title = attrs.title || (typeof item.label === 'string' ? item.label : '') || '请选择';
+          newItem.children = <FairysTaroCascaderBase {...attrs} title={title} />;
+        } else if (type === 'fairysCheckboxGroup') {
+          newItem.children = <FairysTaroCheckboxGroupBase {...attrs} />;
+        } else if (type === 'fairysDatePicker') {
+          const title = attrs.title || (typeof item.label === 'string' ? item.label : '') || '请选择';
+          newItem.children = <FairysTaroDatePickerBase {...attrs} title={title} />;
+        } else if (type === 'fairysPicker') {
+          const title = attrs.title || (typeof item.label === 'string' ? item.label : '') || '请选择';
+          newItem.children = <FairysTaroPickerBase {...attrs} title={title} />;
+        } else if (type === 'fairysPopupSearch') {
+          const title = attrs.title || (typeof item.label === 'string' ? item.label : '') || '请选择';
+          newItem.children = <FairysTaroPopupSearchBase {...attrs} title={title} />;
+        }
+        if (isEmpty) {
+          return <View key={index} className="fairys-taro-simple-form-item-empty" />;
+        }
+        if (isHide) {
+          return <FairysTaroValtioFormHideItem key={index} {...(newItem as FairysTaroValtioFormItemProps)} />;
+        }
+        return <FairysTaroValtioFormItem key={index} {...(newItem as FairysTaroValtioFormItemProps)} />;
+      })}
+    </Fragment>
+  );
+};
+
+export const FairysTaroValtioFormConfigListItem = (props: { items: FairysTaroValtioInputConfigType[] }) => {
+  return create_itemConfig(props.items);
+};
+
+export const FairysTaroValtioFormConfigItem = (config: FairysTaroValtioInputConfigType) => {
+  return create_itemConfig([config]);
+};

package/src/form/layout.tsx

@@ -0,0 +1,232 @@
+import { createContext, Fragment, useContext, useMemo, useRef } from 'react';
+import { View } from '@tarojs/components';
+import clsx from 'clsx';
+import { proxy, useSnapshot } from 'valtio';
+
+export interface FairysTaroValtioFormLayoutContextOptions {
+  /**列数据*/
+  colCount?: number;
+  /**规则校验失败错误提示位置*/
+  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  /**
+   * label显示模式
+   * @platform taro 支持 between
+   */
+  labelMode?: 'left' | 'top' | 'between';
+  /**表单项 className*/
+  formItemClassName?: string;
+  /**表单项 style*/
+  formItemStyle?: React.CSSProperties;
+  /**表单项 label  className*/
+  formItemLabelClassName?: string;
+  /**表单项 label  style*/
+  formItemLabelStyle?: React.CSSProperties;
+  /**
+   * 底部边框
+   */
+  bottomBordered?: boolean;
+}
+
+export interface FairysTaroValtioFormLayoutProps extends FairysTaroValtioFormLayoutContextOptions {
+  /**
+   * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+   */
+  gap?: string | number;
+  /**标题*/
+  title?: React.ReactNode;
+  /**额外内容*/
+  extra?: React.ReactNode;
+  /**内容*/
+  children?: React.ReactNode;
+  /**是否占据整行*/
+  isAllColSpan?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  /**头部ClassName*/
+  headerClassName?: string;
+  /**头部样式*/
+  headerStyle?: React.CSSProperties;
+  /**内容ClassName*/
+  bodyClassName?: string;
+  /**内容样式*/
+  bodyStyle?: React.CSSProperties;
+  /**是否边框*/
+  bordered?: boolean;
+  /**显示阴影*/
+  boxShadow?: boolean;
+}
+
+export class FairysTaroValtioFormLayoutInstance {
+  state = proxy<FairysTaroValtioFormLayoutContextOptions>({
+    colCount: 1,
+    errorLayout: 'right-bottom',
+    labelMode: 'between',
+    bottomBordered: true,
+  });
+  updated = (options: FairysTaroValtioFormLayoutContextOptions = {}) => {
+    const keys = Object.keys(options);
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      this.state[key] = options[key];
+    }
+  };
+}
+
+export const useFairysTaroValtioFormLayoutInstance = (instance?: FairysTaroValtioFormLayoutInstance) => {
+  const ref = useRef<FairysTaroValtioFormLayoutInstance>();
+  if (!ref.current) {
+    if (instance) {
+      ref.current = instance;
+    } else {
+      ref.current = new FairysTaroValtioFormLayoutInstance();
+    }
+  }
+  return ref.current;
+};
+
+export const FairysTaroValtioFormLayoutContext = createContext<FairysTaroValtioFormLayoutInstance>(
+  new FairysTaroValtioFormLayoutInstance(),
+);
+
+export const useFairysTaroValtioFormLayoutContext = () => {
+  const instance = useContext(FairysTaroValtioFormLayoutContext);
+  const state = useSnapshot(instance.state);
+  return [state, instance] as const;
+};
+
+export function FairysTaroValtioFormLayout(props: FairysTaroValtioFormLayoutProps) {
+  const formLayoutInstance = useFairysTaroValtioFormLayoutInstance();
+  const [state] = useFairysTaroValtioFormLayoutContext();
+  const parent_colCount = state.colCount || 1;
+  const parent_errorLayout = state.errorLayout || 'right-bottom';
+  const parent_labelMode = state.labelMode || 'between';
+  const parent_formItemClassName = state.formItemClassName;
+  const parent_formItemStyle = state.formItemStyle;
+  const parent_formItemLabelClassName = state.formItemLabelClassName;
+  const parent_formItemLabelStyle = state.formItemLabelStyle;
+  const parent_bottomBordered = state.bottomBordered;
+  const {
+    colCount = parent_colCount,
+    errorLayout = parent_errorLayout,
+    labelMode = parent_labelMode,
+    formItemClassName = parent_formItemClassName,
+    formItemStyle = parent_formItemStyle,
+    formItemLabelClassName = parent_formItemLabelClassName,
+    formItemLabelStyle = parent_formItemLabelStyle,
+    bottomBordered = parent_bottomBordered,
+    gap,
+    title,
+    extra,
+    children,
+    isAllColSpan = false,
+    className,
+    style,
+    headerClassName,
+    headerStyle,
+    bodyClassName,
+    bodyStyle,
+    bordered,
+    boxShadow,
+  } = props;
+
+  useMemo(
+    () =>
+      formLayoutInstance.updated({
+        colCount,
+        errorLayout,
+        labelMode,
+        formItemClassName,
+        formItemStyle,
+        formItemLabelClassName,
+        formItemLabelStyle,
+        bottomBordered,
+      }),
+    [
+      colCount,
+      errorLayout,
+      labelMode,
+      formItemClassName,
+      formItemStyle,
+      formItemLabelClassName,
+      formItemLabelStyle,
+      bottomBordered,
+    ],
+  );
+
+  const layoutCls = useMemo(
+    () =>
+      clsx(
+        `fairys-taro-valtio-form-layout fairystaroform__text-[0.6rem] fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-md`,
+        {
+          'fairys-taro-valtio-form-layout-all-col-span': isAllColSpan,
+          'fairys-taro-form-valtio-layout-box-shadow': boxShadow,
+          'fairystaroform__border fairystaroform__border-solid fairystaroform__border-gray-100': bordered,
+        },
+        className,
+      ),
+    [className, isAllColSpan, bordered, boxShadow],
+  );
+
+  const headerCls = useMemo(
+    () =>
+      clsx(
+        `fairys-taro-valtio-form-layout-header fairystaroform__flex fairystaroform__justify-between fairystaroform__items-center fairystaroform__flex-row fairystaroform__py-[0.45rem]  fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-100 fairystaroform__box-border`,
+        {
+          'fairystaroform__px-[0.4rem]': bordered || boxShadow,
+          'fairystaroform__px-[0.1rem]': !bordered && !boxShadow,
+        },
+        headerClassName,
+      ),
+    [headerClassName, bordered, boxShadow],
+  );
+
+  const headerTitleCls = useMemo(
+    () => clsx(`fairys-taro-valtio-form-layout-header-title fairystaroform__font-bold fairystaroform__box-border`),
+    [],
+  );
+  const headerExtraCls = useMemo(
+    () => clsx(`fairys-taro-valtio-form-layout-header-extra fairystaroform__box-border`),
+    [],
+  );
+
+  const body_base = useMemo(() => {
+    return clsx(
+      'fairys-taro-valtio-form-layout-body fairystaroform__px-[0.25rem] fairystaroform__w-full fairystaroform__grid fairystaroform__gap-[0.14rem] fairystaroform__box-border',
+      bodyClassName,
+    );
+  }, [bodyClassName]);
+
+  const styleBase = useMemo(() => {
+    const css: React.CSSProperties = {};
+    if (typeof gap === 'string') {
+      css.gap = gap;
+    }
+    if (typeof gap === 'number') {
+      css.gap = `${gap}px`;
+    }
+    if (colCount) {
+      css.gridTemplateColumns = `repeat(${colCount}, auto)`;
+    }
+    return css;
+  }, [colCount, gap]);
+
+  return (
+    <FairysTaroValtioFormLayoutContext.Provider value={formLayoutInstance}>
+      <View className={layoutCls} style={style}>
+        <View>
+          {title || extra ? (
+            <View style={headerStyle} className={headerCls}>
+              <View className={headerTitleCls}>{title}</View>
+              <View className={headerExtraCls}>{extra}</View>
+            </View>
+          ) : (
+            <Fragment />
+          )}
+        </View>
+        <View className={body_base} style={{ ...styleBase, ...bodyStyle }}>
+          {children}
+        </View>
+      </View>
+    </FairysTaroValtioFormLayoutContext.Provider>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './form/instance';
+export * from './form/layout';
+export * from './form/form';
+export * from './form/form.item';

package/src/interface.ts

@@ -0,0 +1,4 @@
+export type MObject<T> = {
+  [K in keyof T]: T[K];
+};
+export type MakeFieldRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

package/src/item.config.tsx

@@ -0,0 +1,202 @@
+// /**
+//  * 表单配置
+//  */
+// import { View } from '@tarojs/components';
+// import { Fragment } from 'react';
+// import type { FormItemProps, FormListProps } from '@carefrees/form-utils-react-taro';
+// import { FormItem, FormHideItem, FormHideList, FormList } from '@carefrees/form-utils-react-taro';
+// import { FairysTaroRadioGroupBase, FairysTaroRadioGroupProps } from 'components/radio.group';
+// import { FairysTaroCalendarBase, FairysTaroCalendarProps } from 'components/calendar';
+// import { FairysTaroCascaderBase, FairysTaroCascaderProps } from 'components/cascader';
+// import { FairysTaroCheckboxGroupBase, FairysTaroCheckboxGroupProps } from 'components/checkbox.group';
+// import { FairysTaroDatePickerBase, FairysTaroDatePickerProps } from 'components/date.picker';
+// import { FairysTaroPickerBase, FairysTaroPickerProps } from 'components/picker';
+// import { FairysTaroPopupSearchBase, FairysTaroPopupSearchProps } from 'components/popup.search';
+
+// import {
+//   Input,
+//   TaroInputProps,
+//   InputNumber,
+//   TaroInputNumberProps,
+//   RadioGroup,
+//   RadioGroupProps,
+//   Radio,
+//   RadioProps,
+//   Range,
+//   RangeProps,
+//   Rate,
+//   RateProps,
+//   Signature,
+//   SignatureProps,
+//   Switch,
+//   SwitchProps,
+//   TextArea,
+//   TextAreaProps,
+//   Uploader,
+//   UploaderProps,
+// } from '@nutui/nutui-react-taro';
+
+// export type MObject<T> = { [K in keyof T]: T[K] };
+// export type MakeFieldRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+
+// /**
+//  * 表单项配置基础类型
+//  */
+// export interface FormItemRowConfingBaseType<T, M, K = undefined> {
+//   /**输入框类型*/
+//   type: T;
+//   /**输入框属性*/
+//   attrs?: Partial<T extends undefined ? TaroInputProps : M>;
+//   /**自定义渲染函数*/
+//   render?: K;
+//   /**是否添加隐藏组件*/
+//   isHide?: boolean;
+//   /**是否添加置空组件*/
+//   isEmpty?: boolean;
+// }
+
+// /**
+//  * 单个表单项配置类型
+//  */
+// interface FormItemRowConfing<T, M, K = undefined>
+//   extends FormItemRowConfingBaseType<T, M, K>,
+//   Omit<FormItemProps, 'attrs'> { }
+
+// /**
+//  * 表单项配置映射类型
+//  */
+// export type MappedType<T extends MObject<T>> = {
+//   [K in keyof T]: FormItemRowConfing<K, T[K]>;
+// }[keyof T];
+
+// /**
+//  * 表单项组件名对应组件类型
+//  */
+// export interface FormItemTypeConfing {
+//   /**输入框*/
+//   input: TaroInputProps;
+//   /**数字输入框*/
+//   inputNumber: TaroInputNumberProps;
+//   /**单选组*/
+//   fairysRadioGroup: FairysTaroRadioGroupProps;
+//   /**日历组件*/
+//   fairysCalendar: FairysTaroCalendarProps;
+//   /**级联选择器*/
+//   fairysCascader: FairysTaroCascaderProps;
+//   /**多选组*/
+//   fairysCheckboxGroup: FairysTaroCheckboxGroupProps;
+//   /**日期选择器*/
+//   fairysDatePicker: FairysTaroDatePickerProps;
+//   /**选择器*/
+//   fairysPicker: FairysTaroPickerProps;
+//   /**弹出搜索框*/
+//   fairysPopupSearch: FairysTaroPopupSearchProps;
+//   /**单选组*/
+//   radioGroup: RadioGroupProps;
+//   /**单选框*/
+//   radio: RadioProps;
+//   /**范围选择器*/
+//   range: RangeProps;
+//   /**评分组件*/
+//   rate: RateProps;
+//   /**签名组件*/
+//   signature: SignatureProps;
+//   /**开关组件*/
+//   switch: SwitchProps;
+//   /**多行文本输入框*/
+//   textarea: TextAreaProps;
+//   /**上传组件*/
+//   uploader: UploaderProps;
+// }
+
+// /**
+//  * 自定义表单列表项配置类型
+//  */
+// export type CustomFormListType = FormItemRowConfingBaseType<'formList', any, React.ReactNode> & Omit<FormListProps, 'attrs'>;
+// /**
+//  * 表单项配置类型
+//  */
+// export type InputConfigType =
+//   | MappedType<FormItemTypeConfing>
+//   | FormItemRowConfing<'custom', any, React.ReactNode>
+//   | FormItemRowConfing<'render', any, React.ReactNode>
+//   | CustomFormListType;
+
+// const create_itemConfig = (configList: InputConfigType[]) => {
+//   return (
+//     <Fragment>
+//       {configList.map((item, index) => {
+//         const { type, isHide, attrs = {}, isEmpty, ...rest } = item;
+//         const newItem = { attrs, ...rest };
+//         /**自定义表单组件*/
+//         if (type === 'custom') {
+//           newItem.children = item.render || <Fragment />;
+//         } else if (type === 'render') {
+//           // 自定义渲染内容
+//           return <Fragment key={index}>{item.render}</Fragment>;
+//         } else if (type === 'formList') {
+//           if (typeof item.children === 'function') {
+//             if (isHide) {
+//               return <FormHideList sort={`${index}`} key={index} {...rest} children={item.children} name={item.name} />;
+//             }
+//             return <FormList sort={`${index}`} key={index} {...rest} children={item.children} name={item.name} />;
+//           }
+//           return <Fragment key={index} />;
+//         } else if (type === 'input') {
+//           newItem.children = <Input align="right" clearable {...attrs} />;
+//         } else if (type === 'inputNumber') {
+//           newItem.children = <InputNumber {...attrs} />;
+//         } else if (type === 'fairysRadioGroup') {
+//           newItem.children = <FairysTaroRadioGroupBase {...attrs} />;
+//         } else if (type === 'radioGroup') {
+//           newItem.children = <RadioGroup {...attrs} />;
+//         } else if (type === 'radio') {
+//           newItem.children = <Radio {...attrs} />;
+//         } else if (type === 'range') {
+//           newItem.children = <Range {...attrs} />;
+//         } else if (type === 'rate') {
+//           newItem.children = <Rate {...attrs} />;
+//         } else if (type === 'signature') {
+//           newItem.children = <Signature {...attrs} />;
+//         } else if (type === 'switch') {
+//           newItem.children = <Switch {...attrs} />;
+//         } else if (type === 'textarea') {
+//           newItem.children = <TextArea {...attrs} />;
+//         } else if (type === 'uploader') {
+//           newItem.children = <Uploader {...attrs} />;
+//         } else if (type === 'fairysCalendar') {
+//           newItem.children = <FairysTaroCalendarBase {...attrs} />;
+//         } else if (type === 'fairysCascader') {
+//           const title = attrs.title || (typeof item.label === 'string' ? item.label : '') || '请选择';
+//           newItem.children = <FairysTaroCascaderBase {...attrs} title={title} />;
+//         } else if (type === 'fairysCheckboxGroup') {
+//           newItem.children = <FairysTaroCheckboxGroupBase {...attrs} />;
+//         } else if (type === 'fairysDatePicker') {
+//           const title = attrs.title || (typeof item.label === 'string' ? item.label : '') || '请选择';
+//           newItem.children = <FairysTaroDatePickerBase {...attrs} title={title} />;
+//         } else if (type === 'fairysPicker') {
+//           const title = attrs.title || (typeof item.label === 'string' ? item.label : '') || '请选择';
+//           newItem.children = <FairysTaroPickerBase {...attrs} title={title} />;
+//         } else if (type === 'fairysPopupSearch') {
+//           const title = attrs.title || (typeof item.label === 'string' ? item.label : '') || '请选择';
+//           newItem.children = <FairysTaroPopupSearchBase {...attrs} title={title} />;
+//         }
+//         if (isEmpty) {
+//           return <View key={index} className="fairys-taro-simple-form-item-empty" />;
+//         }
+//         if (isHide) {
+//           return <FormHideItem sort={`${index}`} key={index} {...(newItem as FormItemProps)} />;
+//         }
+//         return <FormItem sort={`${index}`} key={index} {...(newItem as FormItemProps)} />;
+//       })}
+//     </Fragment>
+//   );
+// };
+
+// export const ConfigListItem = (props: { items: InputConfigType[] }) => {
+//   return create_itemConfig(props.items);
+// };
+
+// export const ConfigItem = (config: InputConfigType) => {
+//   return create_itemConfig([config]);
+// };

package/src/styles/index.css

@@ -0,0 +1,39 @@
+@import '@carefrees/form-utils-react-taro/assets/index.css';
+
+@unocss preflights;
+@unocss default;
+
+.nut-cell.fairys-taro-popup-search-list-virtual-cell > .nut-cell-left > .nut-cell-title {
+  width: 100%;
+}
+
+.nut-cell.fairys-taro-popup-search-list-virtual-cell > .nut-cell-extra {
+  flex: none;
+}
+
+.fairys-taro-popup-search-list-table .nut-table-main-head-tr {
+  z-index: 10;
+  position: relative;
+}
+
+/* 解决宽度不一致造成的固定列阴影错位 */
+.fairys-taro-popup-search-list-table .nut-table-main-body-tr-td,
+.fairys-taro-popup-search-list-table .nut-table-main-head-tr-th {
+  box-sizing: border-box;
+}
+
+.fairys-taro-valtio-form-item-label.required::before {
+  content: '*';
+  color: red;
+  display: inline-block;
+  margin-inline-end: 0.2rem;
+  box-sizing: border-box;
+}
+
+.fairys-taro-valtio-form-layout.fairys-taro-form-layout-all-col-span {
+  grid-column: 1 / -1;
+}
+
+.fairys-taro-valtio-form-layout.fairys-taro-form-layout-box-shadow {
+  box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
+}