refactor: 解耦fastform -> metaform

packages/design/components/WebMetaForm/index.tsx

@@ -1,27 +1,27 @@
 import React, { useMemo } from 'react';
 import {
-  FastForm,
+  MetaForm,
   regField,
-  FastFormContainerComponent,
+  MetaFormContainerComponent,
   regFormContainer,
-} from 'tailchat-shared';
+} from 'meta-form';
 import { Form, Button } from 'antd';
 
-import { FastFormText } from './types/Text';
+import { MetaFormText } from './types/Text';
-import { FastFormTextArea } from './types/TextArea';
+import { MetaFormTextArea } from './types/TextArea';
-import { FastFormPassword } from './types/Password';
+import { MetaFormPassword } from './types/Password';
-import { FastFormSelect } from './types/Select';
+import { MetaFormSelect } from './types/Select';
-import { FastFormCheckbox } from './types/Checkbox';
+import { MetaFormCheckbox } from './types/Checkbox';
-import { FastFormCustom } from './types/Custom';
+import { MetaFormCustom } from './types/Custom';
 
-regField('text', FastFormText);
+regField('text', MetaFormText);
-regField('textarea', FastFormTextArea);
+regField('textarea', MetaFormTextArea);
-regField('password', FastFormPassword);
+regField('password', MetaFormPassword);
-regField('select', FastFormSelect);
+regField('select', MetaFormSelect);
-regField('checkbox', FastFormCheckbox);
+regField('checkbox', MetaFormCheckbox);
-regField('custom', FastFormCustom);
+regField('custom', MetaFormCustom);
 
-const WebFastFormContainer: FastFormContainerComponent = React.memo((props) => {
+const WebMetaFormContainer: MetaFormContainerComponent = React.memo((props) => {
   const layout = props.layout;
   const submitButtonRender = useMemo(() => {
     return (
@@ -64,8 +64,8 @@ const WebFastFormContainer: FastFormContainerComponent = React.memo((props) => {
     </Form>
   );
 });
-WebFastFormContainer.displayName = 'WebFastFormContainer';
+WebMetaFormContainer.displayName = 'WebMetaFormContainer';
-regFormContainer(WebFastFormContainer);
+regFormContainer(WebMetaFormContainer);
 
-export const WebFastForm = FastForm;
+export const WebMetaForm = MetaForm;
-WebFastForm.displayName = 'WebFastForm';
+WebMetaForm.displayName = 'WebMetaForm';

packages/design/components/WebMetaForm/types/Checkbox.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Form, Checkbox } from 'antd';
-import type { FastFormFieldComponent } from 'tailchat-shared';
+import type { MetaFormFieldComponent } from 'meta-form';
 import { getValidateStatus } from '../utils';
 
-export const FastFormCheckbox: FastFormFieldComponent = React.memo((props) => {
+export const MetaFormCheckbox: MetaFormFieldComponent = React.memo((props) => {
   const { name, label, value, onChange, error } = props;
 
   return (
@@ -22,4 +22,4 @@ export const FastFormCheckbox: FastFormFieldComponent = React.memo((props) => {
     </Form.Item>
   );
 });
-FastFormCheckbox.displayName = 'FastFormCheckbox';
+MetaFormCheckbox.displayName = 'MetaFormCheckbox';

packages/design/components/WebMetaForm/types/Custom.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'antd';
+import type { MetaFormFieldComponent, MetaFormFieldProps } from 'meta-form';
+import { CustomField } from 'meta-form';
+
+export const MetaFormCustom: MetaFormFieldComponent<{
+  render: (props: MetaFormFieldProps) => React.ReactNode;
+}> = React.memo((props) => {
+  const { label } = props;
+
+  return (
+    <Form.Item label={label}>
+      <CustomField {...props} />
+    </Form.Item>
+  );
+});
+MetaFormCustom.displayName = 'MetaFormCustom';

packages/design/components/WebMetaForm/types/Password.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Input, Form } from 'antd';
-import type { FastFormFieldComponent } from 'tailchat-shared';
+import type { MetaFormFieldComponent } from 'meta-form';
 import { getValidateStatus } from '../utils';
 
-export const FastFormPassword: FastFormFieldComponent = React.memo((props) => {
+export const MetaFormPassword: MetaFormFieldComponent = React.memo((props) => {
   const { name, label, value, onChange, error, maxLength, placeholder } = props;
 
   return (
@@ -24,4 +24,4 @@ export const FastFormPassword: FastFormFieldComponent = React.memo((props) => {
     </Form.Item>
   );
 });
-FastFormPassword.displayName = 'FastFormPassword';
+MetaFormPassword.displayName = 'MetaFormPassword';

packages/design/components/WebMetaForm/types/Select.tsx

@@ -2,17 +2,17 @@ import React, { useEffect } from 'react';
 import { Select, Form } from 'antd';
 import _get from 'lodash/get';
 import _isNil from 'lodash/isNil';
-import type { FastFormFieldComponent } from 'tailchat-shared';
+import type { MetaFormFieldComponent } from 'meta-form';
 
 const Option = Select.Option;
 
-interface FastFormSelectOptionsItem {
+interface MetaFormSelectOptionsItem {
   label: string;
   value: string;
 }
 
-export const FastFormSelect: FastFormFieldComponent<{
+export const MetaFormSelect: MetaFormFieldComponent<{
-  options: FastFormSelectOptionsItem[];
+  options: MetaFormSelectOptionsItem[];
 }> = React.memo((props) => {
   const { name, label, value, onChange, options } = props;
 
@@ -35,4 +35,4 @@ export const FastFormSelect: FastFormFieldComponent<{
     </Form.Item>
   );
 });
-FastFormSelect.displayName = 'FastFormSelect';
+MetaFormSelect.displayName = 'MetaFormSelect';

packages/design/components/WebMetaForm/types/Text.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Input, Form } from 'antd';
-import type { FastFormFieldComponent } from 'tailchat-shared';
+import type { MetaFormFieldComponent } from 'meta-form';
 import { getValidateStatus } from '../utils';
 
-export const FastFormText: FastFormFieldComponent = React.memo((props) => {
+export const MetaFormText: MetaFormFieldComponent = React.memo((props) => {
   const { name, label, value, onChange, error, maxLength, placeholder } = props;
 
   return (
@@ -23,4 +23,4 @@ export const FastFormText: FastFormFieldComponent = React.memo((props) => {
     </Form.Item>
   );
 });
-FastFormText.displayName = 'FastFormText';
+MetaFormText.displayName = 'MetaFormText';

packages/design/components/WebMetaForm/types/TextArea.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Input, Form } from 'antd';
-import type { FastFormFieldComponent } from 'tailchat-shared';
+import type { MetaFormFieldComponent } from 'meta-form';
 import { getValidateStatus } from '../utils';
 
-export const FastFormTextArea: FastFormFieldComponent = React.memo((props) => {
+export const MetaFormTextArea: MetaFormFieldComponent = React.memo((props) => {
   const { name, label, value, onChange, error, maxLength, placeholder } = props;
 
   return (
@@ -23,4 +23,4 @@ export const FastFormTextArea: FastFormFieldComponent = React.memo((props) => {
     </Form.Item>
   );
 });
-FastFormTextArea.displayName = 'FastFormTextArea';
+MetaFormTextArea.displayName = 'MetaFormTextArea';

packages/design/components/index.ts

@@ -1,2 +1,10 @@
 export { Icon } from './Icon';
 export { Image } from './Image';
+
+export { WebMetaForm } from './WebMetaForm';
+export {
+  createMetaFormSchema,
+  fieldSchema as metaFormFieldSchema,
+  useMetaFormContext,
+} from 'meta-form';
+export type { MetaFormFieldMeta } from 'meta-form';

packages/design/package.json

@@ -21,6 +21,15 @@
   "homepage": "https://github.com/msgbyte/tailchat#readme",
   "dependencies": {
     "@iconify/react": "^3.2.1",
-    "antd": "^4.19.5"
+    "antd": "^4.19.5",
+    "meta-form": "workspace:^1.0.0"
+  },
+  "devDependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   }
 }

packages/meta-form/.gitignore

@@ -0,0 +1 @@
+lib

packages/meta-form/.npmrc

@@ -0,0 +1,2 @@
+# https://npmmirror.com/
+registry = https://registry.npmmirror.com

packages/meta-form/README.md

@@ -0,0 +1,8 @@
+基于Meta信息快速构建Form表单
+
+
+## Install
+
+```bash
+npm install react meta-form
+```

packages/meta-form/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "meta-form",
+  "version": "1.0.0",
+  "description": "基于Meta信息快速构建Form表单",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": ["lib"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/msgbyte/tailchat.git"
+  },
+  "keywords": [
+    "meta",
+    "form",
+    "react",
+    "formik"
+  ],
+  "author": "moonrailgun <moonrailgun@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/msgbyte/tailchat/issues"
+  },
+  "homepage": "https://github.com/msgbyte/tailchat#readme",
+  "devDependencies": {
+    "react": "17.0.2",
+    "typescript": "^4.5.2"
+  },
+  "dependencies": {
+    "formik": "^2.2.9",
+    "yup": "^0.32.9"
+  },
+  "peerDependencies": {
+    "react": "17.0.2"
+  }
+}

packages/meta-form/src/CustomField.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { FastFormFieldComponent, FastFormFieldProps } from './field';
+import type { MetaFormFieldComponent, MetaFormFieldProps } from './field';
 
-export const CustomField: FastFormFieldComponent<{
+export const CustomField: MetaFormFieldComponent<{
-  render: (props: FastFormFieldProps) => React.ReactNode;
+  render: (props: MetaFormFieldProps) => React.ReactNode;
 }> = React.memo((props) => {
   const { render, ...others } = props;
 

packages/meta-form/src/container.tsx

@@ -0,0 +1,29 @@
+import type { ComponentType } from 'react';
+
+/**
+ * 容器配置
+ */
+export interface MetaFormContainerProps {
+  loading: boolean;
+  submitLabel?: string;
+
+  layout?: 'horizontal' | 'vertical';
+
+  /**
+   * 是否允许提交
+   */
+  canSubmit?: boolean;
+  handleSubmit: () => void;
+}
+export type MetaFormContainerComponent =
+  React.ComponentType<MetaFormContainerProps>;
+let MetaFormContainer: MetaFormContainerComponent;
+export function regFormContainer(component: MetaFormContainerComponent) {
+  MetaFormContainer = component;
+}
+
+export function getFormContainer():
+  | ComponentType<MetaFormContainerProps>
+  | undefined {
+  return MetaFormContainer;
+}

packages/meta-form/src/context.tsx

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import type { useFormik } from 'formik';
+
+type MetaFormContextType = ReturnType<typeof useFormik>;
+
+export const MetaFormContext = React.createContext<MetaFormContextType | null>(
+  null
+);
+MetaFormContext.displayName = 'MetaFormContext';
+
+export function useMetaFormContext(): MetaFormContextType | null {
+  return useContext(MetaFormContext);
+}

packages/meta-form/src/field.tsx

@@ -3,14 +3,14 @@ import { CustomField } from './CustomField';
 /**
  * 字段通用信息
  */
-interface FastFormFieldCommon {
+interface MetaFormFieldCommon {
   name: string; // 字段名
   label?: string; // 字段标签
   defaultValue?: any; // 默认值
   [other: string]: any; // 其他字段
 }
 
-export interface FastFormFieldProps extends FastFormFieldCommon {
+export interface MetaFormFieldProps extends MetaFormFieldCommon {
   value: any;
   error: string | undefined;
   onChange: (val: any) => void; // 修改数据的回调函数
@@ -19,15 +19,15 @@ export interface FastFormFieldProps extends FastFormFieldCommon {
 /**
  * 字段组件
  */
-export type FastFormFieldComponent<T = Record<string, unknown>> =
+export type MetaFormFieldComponent<T = Record<string, unknown>> =
-  React.ComponentType<FastFormFieldProps & T>;
+  React.ComponentType<MetaFormFieldProps & T>;
 
-const fieldMap = new Map<string, FastFormFieldComponent>();
+const fieldMap = new Map<string, MetaFormFieldComponent>();
 
 /**
  * 注册组件
  */
-export function regField(type: string, component: FastFormFieldComponent<any>) {
+export function regField(type: string, component: MetaFormFieldComponent<any>) {
   fieldMap.set(type, component);
 }
 
@@ -36,14 +36,14 @@ export function regField(type: string, component: FastFormFieldComponent<any>) {
  */
 export function getField(
   type: string
-): FastFormFieldComponent<any> | undefined {
+): MetaFormFieldComponent<any> | undefined {
   return fieldMap.get(type);
 }
 
 /**
  * 字段配置
  */
-export interface FastFormFieldMeta extends FastFormFieldCommon {
+export interface MetaFormFieldMeta extends MetaFormFieldCommon {
   type: string; // 字段类型
 }
 

packages/meta-form/src/index.tsx

@@ -5,20 +5,20 @@ import _fromPairs from 'lodash/fromPairs';
 import _isFunction from 'lodash/isFunction';
 import _isEmpty from 'lodash/isEmpty';
 import type { ObjectSchema } from 'yup';
-import { FastFormContext } from './context';
+import { MetaFormContext } from './context';
 import { getField, regField } from './field';
 import type {
-  FastFormFieldComponent,
+  MetaFormFieldComponent,
-  FastFormFieldProps,
+  MetaFormFieldProps,
-  FastFormFieldMeta,
+  MetaFormFieldMeta,
 } from './field';
 import { getFormContainer } from './container';
 
 /**
  * 表单配置
  */
-export interface FastFormProps {
+export interface MetaFormProps {
-  fields: FastFormFieldMeta[]; // 字段详情
+  fields: MetaFormFieldMeta[]; // 字段详情
   schema?: ObjectSchema<any>; // yup schame object 用于表单校验
   layout?: 'horizontal' | 'vertical'; // 布局方式(默认水平)
   submitLabel?: string; // 提交按钮的标签名
@@ -31,7 +31,7 @@ export interface FastFormProps {
  * 一个快速生成表单的组件
  * 用于通过配置来生成表单，简化通用代码
  */
-export const FastForm: React.FC<FastFormProps> = React.memo((props) => {
+export const MetaForm: React.FC<MetaFormProps> = React.memo((props) => {
   const initialValues = useMemo(() => {
     return {
       ..._fromPairs(
@@ -65,10 +65,10 @@ export const FastForm: React.FC<FastFormProps> = React.memo((props) => {
   });
   const { handleSubmit, setFieldValue, values, errors } = formik;
 
-  const FastFormContainer = getFormContainer();
+  const MetaFormContainer = getFormContainer();
 
-  if (_isNil(FastFormContainer)) {
+  if (_isNil(MetaFormContainer)) {
-    console.warn('FastFormContainer 没有被注册');
+    console.warn('MetaFormContainer 没有被注册');
     return null;
   }
 
@@ -96,8 +96,8 @@ export const FastForm: React.FC<FastFormProps> = React.memo((props) => {
   }, [props.fields, values, errors, setFieldValue]);
 
   return (
-    <FastFormContext.Provider value={formik}>
+    <MetaFormContext.Provider value={formik}>
-      <FastFormContainer
+      <MetaFormContainer
         loading={loading}
         layout={props.layout ?? 'horizontal'}
         submitLabel={props.submitLabel}
@@ -105,17 +105,19 @@ export const FastForm: React.FC<FastFormProps> = React.memo((props) => {
         canSubmit={_isEmpty(errors)}
       >
         {fieldsRender}
-      </FastFormContainer>
+      </MetaFormContainer>
-    </FastFormContext.Provider>
+    </MetaFormContext.Provider>
   );
 });
-FastForm.displayName = 'FastForm';
+MetaForm.displayName = 'MetaForm';
-FastForm.defaultProps = {
+MetaForm.defaultProps = {
   submitLabel: '提交',
 };
 
 export { CustomField } from './CustomField';
-export type { FastFormFieldComponent, FastFormFieldProps, FastFormFieldMeta };
+export type { MetaFormFieldComponent, MetaFormFieldProps, MetaFormFieldMeta };
 export { regField };
 export { regFormContainer } from './container';
-export type { FastFormContainerComponent } from './container';
+export type { MetaFormContainerComponent } from './container';
+export { createMetaFormSchema, fieldSchema } from './schema';
+export { useMetaFormContext } from './context';

packages/meta-form/src/schema.ts

@@ -3,11 +3,11 @@ import { string, object, ref } from 'yup';
 import type { ObjectShape } from 'yup/lib/object';
 
 /**
- * 创建FastForm的Schema
+ * 创建MetaForm的Schema
  *
  *
  */
-export function createFastFormSchema(fieldMap: ObjectShape) {
+export function createMetaFormSchema(fieldMap: ObjectShape) {
   return object().shape(fieldMap);
 }
 

packages/meta-form/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["DOM"],
+    "jsx": "react",
+    "outDir": "./lib",
+    "declaration": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "importsNotUsedAsValues": "error",
+  }
+}

shared/components/FastForm/container.tsx

@@ -1,29 +0,0 @@
-import type { ComponentType } from 'react';
-
-/**
- * 容器配置
- */
-export interface FastFormContainerProps {
-  loading: boolean;
-  submitLabel?: string;
-
-  layout?: 'horizontal' | 'vertical';
-
-  /**
-   * 是否允许提交
-   */
-  canSubmit?: boolean;
-  handleSubmit: () => void;
-}
-export type FastFormContainerComponent =
-  React.ComponentType<FastFormContainerProps>;
-let FastFormContainer: FastFormContainerComponent;
-export function regFormContainer(component: FastFormContainerComponent) {
-  FastFormContainer = component;
-}
-
-export function getFormContainer():
-  | ComponentType<FastFormContainerProps>
-  | undefined {
-  return FastFormContainer;
-}

shared/components/FastForm/context.tsx

@@ -1,13 +0,0 @@
-import React, { useContext } from 'react';
-import type { useFormik } from 'formik';
-
-type FastFormContextType = ReturnType<typeof useFormik>;
-
-export const FastFormContext = React.createContext<FastFormContextType | null>(
-  null
-);
-FastFormContext.displayName = 'FastFormContext';
-
-export function useFastFormContext(): FastFormContextType | null {
-  return useContext(FastFormContext);
-}

shared/index.tsx

@@ -15,23 +15,6 @@ export {
 export { useCachedUserInfo, useCachedOnlineStatus } from './cache/useCache';
 
 // components
-export {
-  FastForm,
-  CustomField,
-  regField,
-  regFormContainer,
-} from './components/FastForm/index';
-export type {
-  FastFormFieldComponent,
-  FastFormFieldProps,
-  FastFormFieldMeta,
-  FastFormContainerComponent,
-} from './components/FastForm/index';
-export {
-  createFastFormSchema,
-  fieldSchema,
-} from './components/FastForm/schema';
-export { useFastFormContext } from './components/FastForm/context';
 export { buildPortal, DefaultEventEmitter } from './components/Portal';
 export { TcProvider } from './components/Provider';
 

web/src/components/WebFastForm/types/Custom.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Form } from 'antd';
-import _get from 'lodash/get';
-import _isNil from 'lodash/isNil';
-import type {
-  FastFormFieldComponent,
-  FastFormFieldProps,
-} from 'tailchat-shared';
-import { CustomField } from 'tailchat-shared';
-
-export const FastFormCustom: FastFormFieldComponent<{
-  render: (props: FastFormFieldProps) => React.ReactNode;
-}> = React.memo((props) => {
-  const { label } = props;
-
-  return (
-    <Form.Item label={label}>
-      <CustomField {...props} />
-    </Form.Item>
-  );
-});
-FastFormCustom.displayName = 'FastFormCustom';

web/src/components/modals/ClaimTemporaryUser.tsx

@@ -3,16 +3,18 @@ import { setGlobalUserLoginInfo } from '@/utils/user-helper';
 import React from 'react';
 import {
   claimTemporaryUser,
-  createFastFormSchema,
-  FastFormFieldMeta,
-  fieldSchema,
   t,
   useAppDispatch,
   useAsyncRequest,
   userActions,
 } from 'tailchat-shared';
+import {
+  createMetaFormSchema,
+  MetaFormFieldMeta,
+  metaFormFieldSchema,
+  WebMetaForm,
+} from 'tailchat-design';
 import { ModalWrapper } from '../Modal';
-import { WebFastForm } from '../WebFastForm';
 
 interface Values {
   email: string;
@@ -20,7 +22,7 @@ interface Values {
   [key: string]: unknown;
 }
 
-const fields: FastFormFieldMeta[] = [
+const fields: MetaFormFieldMeta[] = [
   { type: 'text', name: 'email', label: t('邮箱') },
   {
     type: 'password',
@@ -29,12 +31,12 @@ const fields: FastFormFieldMeta[] = [
   },
 ];
 
-const schema = createFastFormSchema({
+const schema = createMetaFormSchema({
-  email: fieldSchema
+  email: metaFormFieldSchema
     .string()
     .required(t('邮箱不能为空'))
     .email(t('邮箱格式不正确')),
-  password: fieldSchema
+  password: metaFormFieldSchema
     .string()
     .min(6, t('密码不能低于6位'))
     .required(t('密码不能为空')),
@@ -68,7 +70,7 @@ export const ClaimTemporaryUser: React.FC<ClaimTemporaryUserProps> = React.memo(
 
     return (
       <ModalWrapper title={t('认领账号')}>
-        <WebFastForm schema={schema} fields={fields} onSubmit={handleClaim} />
+        <WebMetaForm schema={schema} fields={fields} onSubmit={handleClaim} />
       </ModalWrapper>
     );
   }

web/src/components/modals/GroupPanel/CreateGroupPanel.tsx

@@ -1,26 +1,26 @@
-import { findPluginPanelInfoByName } from '@/utils/plugin-helper';
 import React, { useState } from 'react';
 import {
-  GroupPanelType,
   t,
   useAsyncRequest,
   createGroupPanel,
-  createFastFormSchema,
-  fieldSchema,
   showToasts,
 } from 'tailchat-shared';
+import {
+  createMetaFormSchema,
+  metaFormFieldSchema,
+  WebMetaForm,
+} from 'tailchat-design';
 import { ModalWrapper } from '../../Modal';
-import { WebFastForm } from '../../WebFastForm';
 import { buildDataFromValues } from './helper';
 import type { GroupPanelValues } from './types';
 import { useGroupPanelFields } from './useGroupPanelFields';
 
-const schema = createFastFormSchema({
+const schema = createMetaFormSchema({
-  name: fieldSchema
+  name: metaFormFieldSchema
     .string()
     .required(t('面板名不能为空'))
     .max(20, t('面板名过长')),
-  type: fieldSchema.string().required(t('面板类型不能为空')),
+  type: metaFormFieldSchema.string().required(t('面板类型不能为空')),
 });
 
 /**
@@ -45,7 +45,7 @@ export const ModalCreateGroupPanel: React.FC<{
 
   return (
     <ModalWrapper title={t('创建群组面板')} style={{ maxWidth: 440 }}>
-      <WebFastForm
+      <WebMetaForm
         schema={schema}
         fields={fields}
         onChange={setValues}

web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx

@@ -4,24 +4,26 @@ import {
   t,
   useAsyncRequest,
   modifyGroupPanel,
-  createFastFormSchema,
-  fieldSchema,
   showToasts,
   useGroupPanelInfo,
 } from 'tailchat-shared';
 import { ModalWrapper } from '../../Modal';
-import { WebFastForm } from '../../WebFastForm';
+import {
+  createMetaFormSchema,
+  metaFormFieldSchema,
+  WebMetaForm,
+} from 'tailchat-design';
 import { buildDataFromValues, pickValuesFromGroupPanelInfo } from './helper';
 import type { GroupPanelValues } from './types';
 import { useGroupPanelFields } from './useGroupPanelFields';
 import _omit from 'lodash/omit';
 
-const schema = createFastFormSchema({
+const schema = createMetaFormSchema({
-  name: fieldSchema
+  name: metaFormFieldSchema
     .string()
     .required(t('面板名不能为空'))
     .max(20, t('面板名过长')),
-  type: fieldSchema.string().required(t('面板类型不能为空')),
+  type: metaFormFieldSchema.string().required(t('面板类型不能为空')),
 });
 
 /**
@@ -56,7 +58,7 @@ export const ModalModifyGroupPanel: React.FC<{
 
   return (
     <ModalWrapper title={t('编辑群组面板')} style={{ maxWidth: 440 }}>
-      <WebFastForm
+      <WebMetaForm
         schema={schema}
         fields={fields.filter((f) => f.type !== 'type')} // 变更时不显示类型
         initialValues={pickValuesFromGroupPanelInfo(groupPanelInfo)}

web/src/components/modals/GroupPanel/useGroupPanelFields.tsx

@@ -2,19 +2,18 @@ import { UserSelector } from '@/components/UserSelector';
 import React from 'react';
 import { useMemo } from 'react';
 import {
-  FastFormFieldMeta,
   GroupPanelType,
   isDevelopment,
   t,
-  useFastFormContext,
   useGroupMemberIds,
 } from 'tailchat-shared';
+import { MetaFormFieldMeta, useMetaFormContext } from 'tailchat-design';
 import type { GroupPanelValues } from './types';
 import _compact from 'lodash/compact';
 import { pluginGroupPanel } from '@/plugin/common';
 import { findPluginPanelInfoByName } from '@/utils/plugin-helper';
 
-const baseFields: FastFormFieldMeta[] = [
+const baseFields: MetaFormFieldMeta[] = [
   { type: 'text', name: 'name', label: t('面板名') },
   {
     type: 'select',
@@ -44,7 +43,7 @@ export function useGroupPanelFields(
   const disableSendMessageWithoutRender = useMemo(() => {
     const DisableSendMessageWithoutComponent: React.FC = () => {
       const groupMemberUUIDs = useGroupMemberIds(groupId);
-      const context = useFastFormContext();
+      const context = useMetaFormContext();
 
       return (
         <UserSelector
@@ -80,7 +79,7 @@ export function useGroupPanelFields(
           label: t('仅允许指定用户发言'),
           render: disableSendMessageWithoutRender,
         },
-      ]) as FastFormFieldMeta[];
+      ]) as MetaFormFieldMeta[];
     }
 
     if (typeof currentValues.type === 'string') {

web/src/components/modals/ModifyPassword.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import {
-  createFastFormSchema,
-  FastFormFieldMeta,
-  fieldSchema,
   modifyUserPassword,
   showToasts,
   t,
   useAsyncRequest,
 } from 'tailchat-shared';
 import { ModalWrapper } from '../Modal';
-import { WebFastForm } from '../WebFastForm';
+import {
+  createMetaFormSchema,
+  MetaFormFieldMeta,
+  metaFormFieldSchema,
+  WebMetaForm,
+} from 'tailchat-design';
 
 interface Values {
   oldPassword: string;
@@ -17,7 +19,7 @@ interface Values {
   newPasswordRepeat: string;
 }
 
-const fields: FastFormFieldMeta[] = [
+const fields: MetaFormFieldMeta[] = [
   {
     type: 'password',
     name: 'oldPassword',
@@ -35,16 +37,16 @@ const fields: FastFormFieldMeta[] = [
   },
 ];
 
-const schema = createFastFormSchema({
+const schema = createMetaFormSchema({
-  oldPassword: fieldSchema
+  oldPassword: metaFormFieldSchema
     .string()
     .min(6, t('密码不能低于6位'))
     .required(t('密码不能为空')),
-  newPassword: fieldSchema
+  newPassword: metaFormFieldSchema
     .string()
     .min(6, t('密码不能低于6位'))
     .required(t('密码不能为空')),
-  newPasswordRepeat: fieldSchema
+  newPasswordRepeat: metaFormFieldSchema
     .string()
     .min(6, t('密码不能低于6位'))
     .required(t('密码不能为空')),
@@ -72,7 +74,7 @@ export const ModifyPassword: React.FC<ModifyPasswordProps> = React.memo(
 
     return (
       <ModalWrapper title={t('修改密码')}>
-        <WebFastForm
+        <WebMetaForm
           schema={schema}
           fields={fields}
           onSubmit={handleModifyPassword}

web/src/plugin/common/index.ts

@@ -36,14 +36,24 @@ export {
   uploadFile,
   showToasts,
   showErrorToasts,
-  createFastFormSchema,
-  fieldSchema,
   fetchAvailableServices,
   isValidStr,
   useGroupPanelInfo,
 } from 'tailchat-shared';
+
 export { useLocation, useHistory } from 'react-router';
 
+export {
+  /**
+   * @deprecated please use createMetaFormSchema
+   */
+  createMetaFormSchema as createFastFormSchema,
+  /**
+   * @deprecated please use metaFormFieldSchema
+   */
+  metaFormFieldSchema as fieldSchema,
+} from 'tailchat-design';
+
 /**
  * 处理axios的request config
  *

web/src/plugin/common/reg.ts

@@ -3,10 +3,10 @@ import {
   buildRegFn,
   buildRegList,
   ChatMessage,
-  FastFormFieldMeta,
   GroupPanel,
   regSocketEventListener,
 } from 'tailchat-shared';
+import type { MetaFormFieldMeta } from 'tailchat-design';
 
 /**
  * 注册自定义面板
@@ -68,7 +68,7 @@ export interface PluginGroupPanel {
   /**
    * 额外的表单数据, 用于创建面板时使用
    */
-  extraFormMeta: FastFormFieldMeta[];
+  extraFormMeta: MetaFormFieldMeta[];
 
   /**
    * 该面板如何渲染

web/src/plugin/component/index.tsx

@@ -15,7 +15,15 @@ export { Image } from '@/components/Image';
 export { Icon } from '@/components/Icon';
 export { PillTabs, PillTabPane } from '@/components/PillTabs';
 export { LoadingSpinner } from '@/components/LoadingSpinner';
-export { WebFastForm } from '@/components/WebFastForm';
+export {
+  /**
+   * @deprecated please use WebMetaForm
+   */
+  WebMetaForm as WebFastForm,
+  WebMetaForm,
+  createMetaFormSchema,
+  metaFormFieldSchema,
+} from 'tailchat-design';
 export {
   FullModalField,
   DefaultFullModalInputEditorRender,