refactor: 面板modal与表单校验

shared/index.tsx

@@ -21,6 +21,10 @@ export type {
   FastFormFieldMeta,
   FastFormContainerComponent,
 } from './components/FastForm/index';
+export {
+  createFastFormSchema,
+  fieldSchema,
+} from './components/FastForm/schema';
 export { buildPortal, DefaultEventEmitter } from './components/Portal';
 export { TcProvider } from './components/Provider';
 

web/src/components/modals/CreateGroup.tsx

@@ -95,7 +95,7 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
   }, [name, panels]);
 
   return (
-    <ModalWrapper>
+    <ModalWrapper style={{ maxWidth: 440 }}>
       <Slides ref={slidesRef}>
         <div>
           <Typography.Title level={4} className="text-center mb-4">

web/src/components/modals/CreateGroupPanel.tsx

@@ -1,4 +1,4 @@
-import { PluginGroupPanel, pluginGroupPanel } from '@/plugin/common';
+import { pluginGroupPanel } from '@/plugin/common';
 import { findPluginPanelInfoByName } from '@/utils/plugin-helper';
 import React, { useMemo, useState } from 'react';
 import {
@@ -7,6 +7,8 @@ import {
   t,
   useAsyncRequest,
   createGroupPanel,
+  createFastFormSchema,
+  fieldSchema,
 } from 'tailchat-shared';
 import { ModalWrapper } from '../Modal';
 import { WebFastForm } from '../WebFastForm';
@@ -40,6 +42,14 @@ const baseFields: FastFormFieldMeta[] = [
   },
 ];
 
+const schema = createFastFormSchema({
+  name: fieldSchema
+    .string()
+    .required(t('面板名不能为空'))
+    .max(20, t('面板名过长')),
+  type: fieldSchema.string().required(t('面板类型不能为空')),
+});
+
 /**
  * 创建群组面板
  */
@@ -95,8 +105,9 @@ export const ModalCreateGroupPanel: React.FC<{
   }, [currentValues]);
 
   return (
-    <ModalWrapper title={t('创建群组面板')} style={{ width: 440 }}>
+    <ModalWrapper title={t('创建群组面板')} style={{ maxWidth: 440 }}>
       <WebFastForm
+        schema={schema}
         fields={field}
         onChange={setValues}
         onSubmit={handleSubmit}

web/src/styles/antd/dark.less

@@ -49,6 +49,14 @@
     color: white;
   }
 
+  // 表单错误
+  .ant-form-item-has-error {
+    .ant-input:not(.ant-input-disabled) {
+      background-color: transparent;
+      border-color: var(--antd-primary-dangerous-color);
+    }
+  }
+
   // 分割线
   .ant-divider {
     border-top-color: rgba(255,255,255,0.12);