TERES_web_frontend/src/pages/knowledge/components/GeneralForm.tsx

import React, { useRef } from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import {
  Box,
  Typography,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Grid,
  Avatar,
  Button,
  IconButton,
} from '@mui/material';
import {
  PhotoCamera as PhotoCameraIcon,
  Delete as DeleteIcon,
} from '@mui/icons-material';

function GeneralForm() {
  const { control, watch, setValue } = useFormContext();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleAvatarUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        setValue('avatar', e.target?.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleAvatarDelete = () => {
    setValue('avatar', undefined);
  };

  const handleAvatarClick = () => {
    fileInputRef.current?.click();
  };

  const avatar = watch('avatar');

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h6" gutterBottom>
        基础信息
      </Typography>

      <Grid container spacing={3}>
        <Grid size={{xs:12, md:6}}>
          <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
            <Avatar
              src={avatar}
              sx={{ width: 120, height: 120, cursor: 'pointer' }}
              onClick={handleAvatarClick}
            >
              {!avatar && <PhotoCameraIcon sx={{ fontSize: 40 }} />}
            </Avatar>
            
            <Box sx={{ display: 'flex', gap: 1 }}>
              <Button
                variant="outlined"
                size="small"
                startIcon={<PhotoCameraIcon />}
                onClick={handleAvatarClick}
              >
                上传头像
              </Button>
              {avatar && (
                <IconButton
                  size="small"
                  color="error"
                  onClick={handleAvatarDelete}
                >
                  <DeleteIcon />
                </IconButton>
              )}
            </Box>

            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              style={{ display: 'none' }}
              onChange={handleAvatarUpload}
            />
          </Box>
        </Grid>

        {/* 表单字段 */}
        <Grid size={{xs:12,md:8}}>
          <Grid container spacing={2}>
            <Grid size={{xs:12}}>
              <Controller
                name="name"
                control={control}
                rules={{ required: '知识库名称不能为空' }}
                render={({ field, fieldState: { error } }) => (
                  <TextField
                    {...field}
                    label="知识库名称"
                    fullWidth
                    required
                    error={!!error}
                    helperText={error?.message}
                  />
                )}
              />
            </Grid>

            <Grid size={{xs:12}}>
              <Controller
                name="description"
                control={control}
                render={({ field }) => (
                  <TextField
                    {...field}
                    label="描述"
                    fullWidth
                    multiline
                    rows={3}
                    placeholder="请输入知识库描述..."
                  />
                )}
              />
            </Grid>

            <Grid size={{xs:12}}>
              <Controller
                name="permission"
                control={control}
                render={({ field }) => (
                  <FormControl fullWidth>
                    <InputLabel>权限设置</InputLabel>
                    <Select {...field} label="权限设置">
                      <MenuItem value="me">仅自己</MenuItem>
                      <MenuItem value="team">团队成员</MenuItem>
                    </Select>
                  </FormControl>
                )}
              />
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
}

export default GeneralForm;