feat(form): add form field components and configuration updates

refactor(knowledge): restructure configuration components to use common items

src/pages/FormFieldTest.tsx

@@ -0,0 +1,163 @@
+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;