feat: change center-component to components

src/pages/config/edit/List.tsx

@@ -4,13 +4,13 @@ import { CardBlank } from '@/components/card';
 import { Button, ButtonGroup, Divider, Drawer, FormControlLabel, Tab, Tabs, Tooltip, useTheme } from '@mui/material';
 import { Edit, Plus, Save, Share, Trash, X } from 'lucide-react';
 import ShareAltOutlined from '@ant-design/icons/ShareAltOutlined';
-import { useModal } from '@kevisual/center-components/modal/Confirm.tsx';
+import { useModal } from '@kevisual/components/modal/Confirm.tsx';
 import { useForm, Controller } from 'react-hook-form';
 import { useController } from 'react-hook-form';
 
-import { TextField, TextFieldLabel } from '@kevisual/center-components/input/TextField.tsx';
+import { TextField, TextFieldLabel } from '@kevisual/components/input/TextField.tsx';
 import { useTranslation } from 'react-i18next';
-import { IconButton } from '@kevisual/center-components/button/index.tsx';
+import { IconButton } from '@kevisual/components/button/index.tsx';
 import { useShallow } from 'zustand/shallow';
 import { load, dump } from 'js-yaml';
 import CodeEditor from '@uiw/react-textarea-code-editor';
@@ -117,7 +117,7 @@ export const DrawerEdit = () => {
     onSave(pickValue);
   };
   const theme = useTheme();
-  const defaultProps = theme.components?.MuiTextField?.defaultProps;
+  const defaultProps = theme.components?.MuiTextField?.defaultProps as any;
   return (
     <Drawer
       open={showEdit}
@@ -128,6 +128,8 @@ export const DrawerEdit = () => {
           sx: {
             width: '50%',
             height: '100%',
+            overflow: 'hidden',
+            background: 'red',
           },
         },
       }}>
@@ -146,12 +148,13 @@ export const DrawerEdit = () => {
         </Tabs>
         {tab === 'base' && (
           <form onSubmit={handleSubmit(onSubmit)} className='w-full p-2 flex flex-col gap-6'>
-            <Controller control={control} name='title' render={({ field }) => <TextField {...field} label='Title' />} />
+            <Controller control={control} name='title' render={({ field }) => <TextField {...defaultProps} {...field} label='Title' />} />
             <Controller
               name='key'
               control={control}
               render={({ field }) => (
                 <TextField
+                  {...defaultProps}
                   {...field}
                   label={
                     <TextFieldLabel label='Key' tips='Key is the unique identifier for the configuration. if set and id is none will change data by key;' />
@@ -159,7 +162,11 @@ export const DrawerEdit = () => {
                 />
               )}
             />
-            <Controller name='description' control={control} render={({ field }) => <TextField {...field} label='Description' multiline rows={4} />} />
+            <Controller
+              name='description'
+              control={control}
+              render={({ field }) => <TextField {...defaultProps} {...field} label='Description' multiline rows={4} />}
+            />
             <Button type='submit' variant='contained' color='primary'>
               {t('Submit')}
             </Button>
@@ -179,15 +186,7 @@ export const DrawerEdit = () => {
     </Drawer>
   );
 };
-export const MyController = React.forwardRef(
-  ({ control, name, Component, componentProps }: { control: any; name: string; Component: (props: any) => JSX.Element; componentProps: any }, ref) => {
-    const theme = useTheme();
-    const defaultProps = theme.components?.MuiTextField?.defaultProps;
-    console.log(defaultProps, 'defaultProps');
-    const { field } = useController({ control, name });
-    return <Component {...field} {...componentProps} ref={ref} />;
-  },
-);
+
 export const List = () => {
   const { list, getConfigList, setShowEdit, setFormData, deleteConfig, updateData, formData, detectConfig, onOpenKey } = useConfigStore();
   const [modal, contextHolder] = useModal();