feat: Add base project structure with API and web components

2025-12-02 20:28:01 +08:00
parent f3de6d6cc9
commit c1adc62ec6
817 changed files with 111226 additions and 106 deletions
--- a/web/src/components/SliderInput/README.md
+++ b/web/src/components/SliderInput/README.md
@@ -0,0 +1,289 @@
+# SliderInput 组件
+
+组合了 Slider 和 InputNumber 的组件，支持拖拽和输入两种方式设置数值。
+
+## 功能特性
+
+- 同时支持滑块拖拽和数字输入
+- 自动同步两个控件的值
+- 支持最小值、最大值、步长设置
+- 支持自定义标记点
+- 支持禁用状态
+- 响应式布局
+
+## 使用方法
+
+### 基础用法
+
+```tsx
+import SliderInput from '@/components/SliderInput';
+
+function MyComponent() {
+  const [blockSize, setBlockSize] = useState(500);
+
+  return (
+    <SliderInput 
+      value={blockSize}
+      onChange={setBlockSize}
+      min={100}
+      max={2000}
+      step={50}
+    />
+  );
+}
+```
+
+### 带标签
+
+```tsx
+<SliderInput 
+  label="块大小 (Block Size)"
+  value={blockSize}
+  onChange={setBlockSize}
+  min={100}
+  max={2000}
+  step={50}
+/>
+```
+
+### 带标记点
+
+```tsx
+<SliderInput 
+  label="块大小"
+  value={blockSize}
+  onChange={setBlockSize}
+  min={100}
+  max={2000}
+  step={50}
+  marks={{
+    100: '100',
+    500: '500',
+    1000: '1000',
+    2000: '2000',
+  }}
+/>
+```
+
+### 自定义标记点样式
+
+```tsx
+<SliderInput 
+  label="块大小"
+  value={blockSize}
+  onChange={setBlockSize}
+  min={100}
+  max={2000}
+  step={50}
+  marks={{
+    100: { style: { color: '#f50' }, label: '最小' },
+    1000: { style: { color: '#1890ff' }, label: '推荐' },
+    2000: { style: { color: '#f50' }, label: '最大' },
+  }}
+/>
+```
+
+### 带提示信息
+
+```tsx
+<SliderInput 
+  label="块大小"
+  value={blockSize}
+  onChange={setBlockSize}
+  min={100}
+  max={2000}
+  step={50}
+  tooltip={{
+    open: true,
+    placement: 'top',
+    formatter: (value) => `${value} 字符`,
+  }}
+/>
+```
+
+### 在表单中使用
+
+```tsx
+import { Form } from 'antd';
+import SliderInput from '@/components/SliderInput';
+
+function FormExample() {
+  const [form] = Form.useForm();
+
+  return (
+    <Form form={form}>
+      <Form.Item 
+        name="blockSize" 
+        label="块大小"
+        initialValue={500}
+      >
+        <SliderInput 
+          min={100}
+          max={2000}
+          step={50}
+        />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### 在 CreateDataset 中使用
+
+```tsx
+import SliderInput from '@/components/SliderInput';
+
+const CreateDataset = () => {
+  const [blockSize, setBlockSize] = useState(500);
+  const [overlap, setOverlap] = useState(50);
+
+  return (
+    <div className='rb:flex rb:flex-col rb:gap-6'>
+      <SliderInput 
+        label={t('knowledgeBase.blockSize') || '块大小'}
+        value={blockSize}
+        onChange={setBlockSize}
+        min={100}
+        max={2000}
+        step={50}
+        marks={{
+          100: '100',
+          500: '500',
+          1000: '1000',
+          2000: '2000',
+        }}
+      />
+      
+      <SliderInput 
+        label={t('knowledgeBase.overlap') || '重叠大小'}
+        value={overlap}
+        onChange={setOverlap}
+        min={0}
+        max={200}
+        step={10}
+        marks={{
+          0: '0',
+          50: '50',
+          100: '100',
+          200: '200',
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| value | number | - | 当前值（受控） |
+| onChange | (value: number \| null) => void | - | 值变化时的回调函数 |
+| min | number | 0 | 最小值 |
+| max | number | 100 | 最大值 |
+| step | number | 1 | 步长 |
+| defaultValue | number | 0 | 默认值（非受控） |
+| disabled | boolean | false | 是否禁用 |
+| label | string | - | 标签文本 |
+| className | string | '' | 容器自定义样式类名 |
+| sliderClassName | string | '' | Slider 自定义样式类名 |
+| inputClassName | string | '' | InputNumber 自定义样式类名 |
+| marks | Record<number, string \| object> | - | 刻度标记 |
+| tooltip | object | - | 提示信息配置 |
+
+### tooltip 配置
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| open | boolean | 是否始终显示提示 |
+| placement | 'top' \| 'left' \| 'right' \| 'bottom' | 提示位置 |
+| formatter | (value?: number) => ReactNode | 格式化提示内容 |
+
+## 注意事项
+
+1. **值的范围**：输入的值会自动限制在 min 和 max 之间
+2. **步长**：拖拽和输入都会遵循 step 设置
+3. **受控组件**：建议使用受控模式（传入 value 和 onChange）
+4. **布局**：Slider 占据剩余空间，InputNumber 固定宽度 120px
+
+## 样式定制
+
+### 自定义宽度
+
+```tsx
+<SliderInput 
+  value={blockSize}
+  onChange={setBlockSize}
+  className="rb:max-w-2xl"
+/>
+```
+
+### 自定义 InputNumber 宽度
+
+```tsx
+<SliderInput 
+  value={blockSize}
+  onChange={setBlockSize}
+  inputClassName="rb:w-32"
+/>
+```
+
+## 常见场景
+
+### 场景1：文档分块大小设置
+
+```tsx
+<SliderInput 
+  label="块大小 (字符数)"
+  value={chunkSize}
+  onChange={setChunkSize}
+  min={100}
+  max={2000}
+  step={50}
+  defaultValue={500}
+  marks={{
+    100: '最小',
+    500: '推荐',
+    2000: '最大',
+  }}
+  tooltip={{
+    formatter: (value) => `${value} 字符`,
+  }}
+/>
+```
+
+### 场景2：重叠大小设置
+
+```tsx
+<SliderInput 
+  label="重叠大小 (字符数)"
+  value={overlap}
+  onChange={setOverlap}
+  min={0}
+  max={Math.floor(chunkSize * 0.5)}
+  step={10}
+  defaultValue={50}
+  tooltip={{
+    formatter: (value) => `${value} 字符 (${((value / chunkSize) * 100).toFixed(0)}%)`,
+  }}
+/>
+```
+
+### 场景3：温度参数设置
+
+```tsx
+<SliderInput 
+  label="Temperature"
+  value={temperature}
+  onChange={setTemperature}
+  min={0}
+  max={2}
+  step={0.1}
+  defaultValue={0.7}
+  marks={{
+    0: '精确',
+    0.7: '平衡',
+    2: '创造',
+  }}
+/>
+```