mark模块更新

2025-03-28 09:40:14 +08:00
parent 9129dffa4c
commit 508ec96029
14 changed files with 666 additions and 29 deletions
--- a/src/manager/edit/Edit.tsx
+++ b/src/manager/edit/Edit.tsx
@@ -0,0 +1,99 @@
+import { useForm, Controller } from 'react-hook-form';
+import { TextField, Button, Box, MenuItem, Autocomplete, FormControlLabel } from '@mui/material';
+import { useManagerStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect, useState } from 'react';
+import { Mark } from '@kevisual/query-mark';
+import { useTranslation } from 'react-i18next';
+import { pick } from 'lodash-es';
+import { toast } from 'react-toastify';
+import { TagsInput } from '@kevisual/components/select/TagsInput.tsx';
+export const EditMark = () => {
+  const { control, handleSubmit, reset } = useForm();
+  const { updateMark, markData, setCurrentMarkId, setMarkData } = useManagerStore(
+    useShallow((state) => {
+      return {
+        updateMark: state.updateMark,
+        markData: state.markData,
+        setCurrentMarkId: state.setCurrentMarkId,
+        currentMarkId: state.currentMarkId,
+        setMarkData: state.setMarkData,
+      };
+    }),
+  );
+  // const [mark, setMark] = useState<Mark | undefined>(markData);
+  const mark = pick(markData, ['id', 'title', 'description', 'markType', 'summary', 'tags', 'link', 'thumbnail']);
+  useEffect(() => {
+    reset(mark);
+    console.log('markData', markData);
+  }, [markData?.id]);
+  const onSubmit = async (data: any) => {
+    const res = await updateMark({ ...mark, ...data });
+    if (res.code === 200) {
+      toast.success(t('editMarkSuccess'));
+    }
+
+    // setCurrentMarkId('');
+    // setMarkData(undefined);
+  };
+  const { t } = useTranslation();
+  return (
+    <Box component='form' sx={{ px: 2, py: 1 }} onSubmit={handleSubmit(onSubmit)} noValidate autoComplete='off' className='w-full h-full overflow-auto'>
+      <Controller
+        name='title'
+        control={control}
+        defaultValue={mark?.title || ''}
+        render={({ field }) => <TextField {...field} label={t('title')} variant='outlined' fullWidth margin='normal' />}
+      />
+      <Controller
+        name='description'
+        control={control}
+        defaultValue={mark?.description || ''}
+        render={({ field }) => <TextField {...field} label={t('description')} variant='outlined' fullWidth margin='normal' multiline />}
+      />
+      <Controller
+        name='markType'
+        control={control}
+        defaultValue={mark?.markType || ''}
+        render={({ field }) => (
+          <Autocomplete
+            {...field}
+            options={['md', 'mdx', 'wallnote', 'excalidraw']}
+            freeSolo
+            renderInput={(params) => <TextField {...params} label={t('markType')} variant='outlined' fullWidth margin='normal' />}
+            onChange={(_, value) => field.onChange(value)}
+          />
+        )}
+      />
+      <Controller
+        name='summary'
+        control={control}
+        defaultValue={mark?.summary || ''}
+        render={({ field }) => <TextField {...field} label={t('summary')} variant='outlined' fullWidth margin='normal' multiline />}
+      />
+      <Controller
+        name='tags'
+        control={control}
+        defaultValue={mark?.tags || ''}
+        render={({ field }) => {
+          return <TagsInput {...field} label={t('tags')} showLabel={true} />;
+        }}
+      />
+      <Controller
+        name='link'
+        control={control}
+        defaultValue={mark?.link || ''}
+        render={({ field }) => <TextField {...field} label={t('link')} variant='outlined' fullWidth margin='normal' />}
+      />
+      <Controller
+        name='thumbnail'
+        control={control}
+        defaultValue={mark?.thumbnail || ''}
+        render={({ field }) => <TextField {...field} label={t('thumbnail')} variant='outlined' fullWidth margin='normal' />}
+      />
+      <Button type='submit' variant='contained' color='primary'>
+        {t('save')}
+      </Button>
+    </Box>
+  );
+};