TERES_web_frontend/src/pages/FormFieldTest.tsx

import React from 'react';
import { Box, Typography, Paper, Divider } from '@mui/material';
import { useForm, FormProvider } from 'react-hook-form';
import {
  SliderInputFormField,
  SwitchFormField,
  SelectFormField,
  MultilineTextFormField,
  NumberInputFormField,
  ChipListFormField,
  type SelectOption,
} from '@/components/FormField';

const FormFieldTest: React.FC = () => {
  const methods = useForm({
    defaultValues: {
      parser_config: {
        auto_keywords: 5,
        auto_questions: 3,
        delimiter: '\n',
        chunk_token_num: 512,
        layout_recognize: 'DeepDOC',
        html4excel: false,
      },
      pagerank: 50,
      custom_slider: 25,
    },
  });

  const onSubmit = (data: any) => {
    console.log('Form Data:', data);
  };

  return (
    <Box sx={{ p: 3, maxWidth: 800, mx: 'auto' }}>
      <Typography variant="h4" gutterBottom>
        FormField 组件测试
      </Typography>
      
      <Paper sx={{ p: 3, mt: 2 }}>
        <FormProvider {...methods}>
          <form onSubmit={methods.handleSubmit(onSubmit)}>
            
            <Typography variant="h6" gutterBottom>
              自动关键词和问题
            </Typography>
            <NumberInputFormField
              name="parser_config.auto_keywords"
              label="自动关键词"
              defaultValue={5}
              min={0}
              placeholder="输入关键词数量"
            />
            <NumberInputFormField
              name="parser_config.auto_questions"
              label="自动问题"
              defaultValue={3}
              min={0}
              placeholder="输入问题数量"
            />
            <Divider sx={{ my: 3 }} />

            <Typography variant="h6" gutterBottom>
              分隔符配置
            </Typography>
            <MultilineTextFormField
              name="parser_config.delimiter"
              label="分隔符"
              defaultValue="\n"
              rows={2}
            />
            <Divider sx={{ my: 3 }} />

            <Typography variant="h6" gutterBottom>
              Token数量配置
            </Typography>
            <SliderInputFormField
              name="parser_config.chunk_token_num"
              label="最大Token数"
              min={64}
              max={2048}
              step={64}
              defaultValue={512}
              layout="horizontal"
            />
            <Divider sx={{ my: 3 }} />

            <Typography variant="h6" gutterBottom>
              页面排名
            </Typography>
            <NumberInputFormField
              name="pagerank"
              label="页面排名"
              defaultValue={50}
              min={0}
              placeholder="输入页面排名"
            />
            <Divider sx={{ my: 3 }} />

            <Typography variant="h6" gutterBottom>
              布局识别
            </Typography>
            <SelectFormField
              name="parser_config.layout_recognize"
              label="布局识别方法"
              options={[
                { value: 'DeepDOC', label: 'DeepDOC' },
                { value: 'LayoutLM', label: 'LayoutLM' },
                { value: 'OCR', label: 'OCR' }
              ]}
              defaultValue="DeepDOC"
            />
            <Divider sx={{ my: 3 }} />

            <Typography variant="h6" gutterBottom>
              Excel转HTML
            </Typography>
            <SwitchFormField
              name="parser_config.html4excel"
              label="Excel转HTML"
              defaultValue={false}
            />
            <Divider sx={{ my: 3 }} />

            <Typography variant="h6" gutterBottom>
              自定义滑块（垂直布局）
            </Typography>
            <SliderInputFormField
              name="custom_slider"
              label="自定义滑块"
              tooltip="这是一个自定义的滑块组件"
              max={100}
              min={0}
              defaultValue={25}
              layout={'vertical'}
            />

            <Box sx={{ mt: 4, display: 'flex', gap: 2 }}>
              <button type="submit">提交测试</button>
              <button 
                type="button" 
                onClick={() => methods.reset()}
              >
                重置表单
              </button>
            </Box>
          </form>
        </FormProvider>
      </Paper>

      <Paper sx={{ p: 3, mt: 3 }}>
        <Typography variant="h6" gutterBottom>
          当前表单值
        </Typography>
        <pre style={{ fontSize: '12px', overflow: 'auto' }}>
          {JSON.stringify(methods.watch(), null, 2)}
        </pre>
      </Paper>
    </Box>
  );
};

export default FormFieldTest;