{"repo": "1600822305/aetherlink", "files": {"src/pages/Settings/AssistantModelSettings/VisionRecognitionTab.tsx": {"1b56c288492e5c5f51c6a29046220ff653ab983c": {"t": 1785595149.0954847, "n": 11590, "h": "e007c5f9362877b0", "c": "import React, { useState, useMemo } from 'react';\nimport {\n  Box,\n  Typography,\n  TextField,\n  Button,\n  Alert,\n  InputAdornment,\n  IconButton,\n  CircularProgress,\n  FormControl,\n  Select,\n  MenuItem,\n} from '@mui/material';\nimport type { SelectChangeEvent } from '@mui/material';\nimport { Eye, EyeOff, CheckCircle2, XCircle, RefreshCw, RotateCcw } from 'lucide-react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { SettingGroup, Row, YStack } from '../../../components/settings/SettingComponents';\nimport CustomSwitch from '../../../components/CustomSwitch';\nimport type { RootState, AppDispatch } from '../../../shared/store';\nimport {\n  setVisionEnabled,\n  setVisionModelSource,\n  setVisionPresetModelRef,\n  updateVisionCustomConfig,\n  setVisionPrompt,\n  setVisionFailureStrategy,\n  setVisionTimeoutMs,\n  DEFAULT_VISION_PROMPT,\n  type VisionModelSource,\n  type VisionFailureStrategy,\n} from '../../../shared/store/slices/visionRecognitionSlice';\nimport { testVisionModelConnection, type VisionTestResult } from '../../../shared/services/vision/VisionRecognitionService';\nimport ModelPickerRow from './ModelPickerRow';\nimport { useAllModels, type ModelWithProvider } from './useAllModels';\n\n/** API 厂商预设（点击快捷填充 Base URL） */\nconst PROVIDER_PRESETS: Array<{ name: string; baseUrl: string }> = [\n  { name: 'OpenAI', baseUrl: 'https://api.openai.com/v1' },\n  { name: '小米 MiMo', baseUrl: 'https://api.xiaomimimo.com/v1' },\n  { name: 'Kimi (Moonshot)', baseUrl: 'https://api.moonshot.cn/v1' },\n  { name: 'DeepSeek', baseUrl: 'https://api.deepseek.com/v1' },\n  { name: '硅基流动', baseUrl: 'https://api.siliconflow.cn/v1' },\n  { name: '智谱 GLM', baseUrl: 'https://open.bigmodel.cn/api/paas/v4' },\n  { name: '阿里云百炼', baseUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1' },\n];\n\nconst VisionRecognitionTab: React.FC = () => {\n  const dispatch = useDispatch<AppDispatch>();\n\n  const visionState = useSelector((state: RootState) => state.visionRecognition);\n  const allModels = useAllModels();\n\n  const [showApiKey, setShowApiKey] = useState(false);\n  const [isTesting, setIsTesting] = useState(false);\n  const [testResult, setTestResult] = useState<VisionTestResult | null>(null);\n\n  const selectedPresetModel = useMemo(() => {\n    const ref = visionState.presetModelRef;\n    if (!ref) return null;\n    return allModels.find((model) => model.providerId === ref.providerId && model.id === ref.modelId) || null;\n  }, [allModels, visionState.presetModelRef]);\n\n  const handleModelSourceChange = (event: SelectChangeEvent) => {\n    dispatch(setVisionModelSource(event.target.value as VisionModelSource));\n    setTestResult(null);\n  };\n\n  const handlePresetModelSelect = (model: ModelWithProvider) => {\n    dispatch(\n      setVisionPresetModelRef({\n        providerId: model.providerId || (model as any).provider,\n        modelId: model.id,\n      })\n    );\n    setTestResult(null);\n  };\n\n  const handleProviderPreset = (event: SelectChangeEvent) => {\n    const preset = PROVIDER_PRESETS.find((p) => p.name === event.target.value);\n    if (preset) {\n      dispatch(updateVisionCustomConfig({ baseUrl: preset.baseUrl }));\n      setTestResult(null);\n    }\n  };\n\n  const handleCustomChange = (field: 'modelName' | 'baseUrl' | 'apiKey') =>\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      dispatch(updateVisionCustomConfig({ [field]: e.target.value }));\n      setTestResult(null);\n    };\n\n  const handleTestConnection = async () => {\n    setIsTesting(true);\n    setTestResult(null);\n    try {\n      const result = await testVisionModelConnection(visionState);\n      setTestResult(result);\n    } finally {\n      setIsTesting(false);\n    }\n  };\n\n  const handleTimeoutChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    if (value === '') return;\n    const seconds = parseInt(value, 10);\n    if (!isNaN(seconds) && seconds >= 5 && seconds <= 600) {\n      dispatch(setVisionTimeoutMs(seconds * 1000));\n    }\n  };\n\n  const isCustom = visionState.modelSource === 'custom';\n  const canTest = isCustom\n    ? !!(visionState.custom.modelName && visionState.custom.baseUrl && visionState.custom.apiKey)\n    : !!visionState.presetModelRef;\n\n  return (\n    <YStack sx={{ gap: 3 }}>\n\n      {/* ==================== 总开关 ==================== */}\n      <SettingGroup title=\"视觉识别\">\n        <Row>\n          <Box sx={{ flex: 1 }}>\n            <Typography>启用视觉识别</Typography>\n            <Typography variant=\"caption\" color=\"text.secondary\">\n              发送图片给不支持视觉的模型时，自动用视觉模型分析图片内容并提供给当前模型\n            </Typography>\n          </Box>\n          <CustomSwitch\n            checked={visionState.enabled}\n            onChange={() => dispatch(setVisionEnabled(!visionState.enabled))}\n          />\n        </Row>\n      </SettingGroup>\n\n      {/* ==================== 模型来源 ==================== */}\n      <SettingGroup title=\"视觉模型\">\n        <Row>\n          <Typography sx={{ flex: 1 }}>模型来源</Typography>\n          <FormControl size=\"small\" sx={{ minWidth: 180 }}>\n            <Select value={visionState.modelSource} onChange={handleModelSourceChange}>\n              <MenuItem value=\"preset\">使用已配置的模型</MenuItem>\n              <MenuItem value=\"custom\">自定义API配置</MenuItem>\n            </Select>\n          </FormControl>\n        </Row>\n\n        {!isCustom && (\n          <ModelPickerRow\n            label=\"视觉模型\"\n            selectedModel={selectedPresetModel}\n            availableModels={allModels}\n            onSelect={handlePresetModelSelect}\n          />\n        )}\n\n        {isCustom && (\n          <>\n            <Row>\n              <Typography sx={{ minWidth: 80 }}>厂商预设</Typography>\n              <FormControl size=\"small\" sx={{ flex: 1 }}>\n                <Select value=\"\" onChange={handleProviderPreset} displayEmpty>\n                  <MenuItem value=\"\">\n                    <em>选择厂商快捷填充 Base URL</em>\n                  </MenuItem>\n                  {PROVIDER_PRESETS.map((preset) => (\n                    <MenuItem key={preset.name} value={preset.name}>\n                      {preset.name}\n                    </MenuItem>\n                  ))}\n                </Select>\n              </FormControl>\n            </Row>\n\n            <Row>\n              <Typography sx={{ minWidth: 80 }}>模型名称</Typography>\n              <TextField\n                size=\"small\"\n                placeholder=\"如 gpt-4o-mini、moonshot-v1-8k-vision-preview\"\n                value={visionState.custom.modelName}\n                onChange={handleCustomChange('modelName')}\n                sx={{ flex: 1 }}\n              />\n            </Row>\n\n            <Row>\n              <Typography sx={{ minWidth: 80 }}>Base URL</Typography>\n              <TextField\n                size=\"small\"\n                placeholder=\"https://api.openai.com/v1\"\n                value={visionState.custom.baseUrl}\n                onChange={handleCustomChange('baseUrl')}\n                sx={{ flex: 1 }}\n              />\n            </Row>\n\n            <Row>\n              <Typography sx={{ minWidth: 80 }}>API 密钥</Typography>\n              <TextField\n                size=\"small\"\n                type={showApiKey ? 'text' : 'password'}\n                placeholder=\"sk-...\"\n                value={visionState.custom.apiKey}\n                onChange={handleCustomChange('apiKey')}\n                sx={{ flex: 1 }}\n                InputProps={{\n                  endAdornment: (\n                    <InputAdornment position=\"end\">\n                      <IconButton size=\"small\" onClick={() => setShowApiKey(!showApiKey)} edge=\"end\">\n                        {showApiKey ? <EyeOff size={16} /> : <Eye size={16} />}\n                      </IconButton>\n                    </InputAdornment>\n                  ),\n                }}\n              />\n            </Row>\n          </>\n        )}\n\n        <Box sx={{ px: 2, pb: 2 }}>\n          <Button\n            fullWidth\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={handleTestConnection}\n            disabled={isTesting || !canTest}\n            startIcon={isTesting ? <CircularProgress size={16} /> : <RefreshCw size={16} />}\n            sx={{ textTransform: 'none' }}\n          >\n            {isTesting ? '测试中...' : '测试 API 连接'}\n          </Button>\n\n          {testResult && (\n            <Alert\n              severity={testResult.success ? 'success' : 'error'}\n              icon={testResult.success ? <CheckCircle2 size={18} /> : <XCircle size={18} />}\n              sx={{ mt: 1.5, borderRadius: 2 }}\n            >\n              <Typography variant=\"body2\">{testResult.message}</Typography>\n              {testResult.success && testResult.latencyMs !== undefined && (\n                <Typography variant=\"caption\" color=\"text.secondary\">\n                  响应时间: {testResult.latencyMs}ms\n                </Typography>\n              )}\n            </Alert>\n          )}\n        </Box>\n      </SettingGroup>\n\n      {/* ==================== 高级设置 ==================== */}\n      <SettingGroup title=\"高级设置\">\n        <Row sx={{ alignItems: 'flex-start', flexDirection: 'column', gap: 1 }}>\n          <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>\n            <Box sx={{ flex: 1 }}>\n              <Typography>分析提示词</Typography>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                指导视觉模型如何描述图片\n              </Typography>\n            </Box>\n            <IconButton\n              size=\"small\"\n              onClick={() => dispatch(setVisionPrompt(DEFAULT_VISION_PROMPT))}\n              title=\"恢复默认\"\n            >\n              <RotateCcw size={16} />\n            </IconButton>\n          </Box>\n          <TextField\n            fullWidth\n            multiline\n            minRows={3}\n            maxRows={8}\n            size=\"small\"\n            value={visionState.prompt}\n            onChange={(e) => dispatch(setVisionPrompt(e.target.value))}\n          />\n        </Row>\n\n        <Row>\n          <Box sx={{ flex: 1 }}>\n            <Typography>分析失败时</Typography>\n            <Typography variant=\"caption\" color=\"text.secondary\">\n              视觉模型分析失败后的处理方式\n            </Typography>\n          </Box>\n          <FormControl size=\"small\" sx={{ minWidth: 160 }}>\n            <Select\n              value={visionState.onFailure}\n              onChange={(e) => dispatch(setVisionFailureStrategy(e.target.value as VisionFailureStrategy))}\n            >\n              <MenuItem value=\"abort\">中止并报错</MenuItem>\n              <MenuItem value=\"continueWithoutImage\">移除图片继续发送</MenuItem>\n            </Select>\n          </FormControl>\n        </Row>\n\n        <Row>\n          <Typography sx={{ flex: 1 }}>分析超时（秒）</Typography>\n          <TextField\n            size=\"small\"\n            value={Math.round(visionState.timeoutMs / 1000)}\n            onChange={handleTimeoutChange}\n            inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}\n            sx={{ width: 100 }}\n          />\n        </Row>\n      </SettingGroup>\n\n      {/* ==================== 配置说明 ==================== */}\n      <Box sx={{ px: 1.5 }}>\n        <YStack sx={{ gap: 0.75 }}>\n          {[\n            { label: '使用已配置的模型', desc: '从现有供应商中选择一个支持视觉的模型，复用其密钥与地址' },\n            { label: '自定义API配置', desc: '独立填写模型名、Base URL 与密钥（OpenAI 兼容协议），与主API互不影响' },\n            { label: '工作方式', desc: '仅当当前对话模型不支持图片时触发；分析结果只注入本次请求，聊天记录仍保留原图' },\n          ].map((item) => (\n            <Typography key={item.label} variant=\"caption\" color=\"text.secondary\">\n              <strong>{item.label}</strong> — {item.desc}\n            </Typography>\n          ))}\n        </YStack>\n      </Box>\n\n    </YStack>\n  );\n};\n\nexport default VisionRecognitionTab;\n"}, "2fc9a7e75431a6871ebb5e881412987a1520ec7a": {"t": 1785764114.289419, "n": 11590, "h": "e007c5f9362877b0", "c": "import React, { useState, useMemo } from 'react';\nimport {\n  Box,\n  Typography,\n  TextField,\n  Button,\n  Alert,\n  InputAdornment,\n  IconButton,\n  CircularProgress,\n  FormControl,\n  Select,\n  MenuItem,\n} from '@mui/material';\nimport type { SelectChangeEvent } from '@mui/material';\nimport { Eye, EyeOff, CheckCircle2, XCircle, RefreshCw, RotateCcw } from 'lucide-react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { SettingGroup, Row, YStack } from '../../../components/settings/SettingComponents';\nimport CustomSwitch from '../../../components/CustomSwitch';\nimport type { RootState, AppDispatch } from '../../../shared/store';\nimport {\n  setVisionEnabled,\n  setVisionModelSource,\n  setVisionPresetModelRef,\n  updateVisionCustomConfig,\n  setVisionPrompt,\n  setVisionFailureStrategy,\n  setVisionTimeoutMs,\n  DEFAULT_VISION_PROMPT,\n  type VisionModelSource,\n  type VisionFailureStrategy,\n} from '../../../shared/store/slices/visionRecognitionSlice';\nimport { testVisionModelConnection, type VisionTestResult } from '../../../shared/services/vision/VisionRecognitionService';\nimport ModelPickerRow from './ModelPickerRow';\nimport { useAllModels, type ModelWithProvider } from './useAllModels';\n\n/** API 厂商预设（点击快捷填充 Base URL） */\nconst PROVIDER_PRESETS: Array<{ name: string; baseUrl: string }> = [\n  { name: 'OpenAI', baseUrl: 'https://api.openai.com/v1' },\n  { name: '小米 MiMo', baseUrl: 'https://api.xiaomimimo.com/v1' },\n  { name: 'Kimi (Moonshot)', baseUrl: 'https://api.moonshot.cn/v1' },\n  { name: 'DeepSeek', baseUrl: 'https://api.deepseek.com/v1' },\n  { name: '硅基流动', baseUrl: 'https://api.siliconflow.cn/v1' },\n  { name: '智谱 GLM', baseUrl: 'https://open.bigmodel.cn/api/paas/v4' },\n  { name: '阿里云百炼', baseUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1' },\n];\n\nconst VisionRecognitionTab: React.FC = () => {\n  const dispatch = useDispatch<AppDispatch>();\n\n  const visionState = useSelector((state: RootState) => state.visionRecognition);\n  const allModels = useAllModels();\n\n  const [showApiKey, setShowApiKey] = useState(false);\n  const [isTesting, setIsTesting] = useState(false);\n  const [testResult, setTestResult] = useState<VisionTestResult | null>(null);\n\n  const selectedPresetModel = useMemo(() => {\n    const ref = visionState.presetModelRef;\n    if (!ref) return null;\n    return allModels.find((model) => model.providerId === ref.providerId && model.id === ref.modelId) || null;\n  }, [allModels, visionState.presetModelRef]);\n\n  const handleModelSourceChange = (event: SelectChangeEvent) => {\n    dispatch(setVisionModelSource(event.target.value as VisionModelSource));\n    setTestResult(null);\n  };\n\n  const handlePresetModelSelect = (model: ModelWithProvider) => {\n    dispatch(\n      setVisionPresetModelRef({\n        providerId: model.providerId || (model as any).provider,\n        modelId: model.id,\n      })\n    );\n    setTestResult(null);\n  };\n\n  const handleProviderPreset = (event: SelectChangeEvent) => {\n    const preset = PROVIDER_PRESETS.find((p) => p.name === event.target.value);\n    if (preset) {\n      dispatch(updateVisionCustomConfig({ baseUrl: preset.baseUrl }));\n      setTestResult(null);\n    }\n  };\n\n  const handleCustomChange = (field: 'modelName' | 'baseUrl' | 'apiKey') =>\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      dispatch(updateVisionCustomConfig({ [field]: e.target.value }));\n      setTestResult(null);\n    };\n\n  const handleTestConnection = async () => {\n    setIsTesting(true);\n    setTestResult(null);\n    try {\n      const result = await testVisionModelConnection(visionState);\n      setTestResult(result);\n    } finally {\n      setIsTesting(false);\n    }\n  };\n\n  const handleTimeoutChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    if (value === '') return;\n    const seconds = parseInt(value, 10);\n    if (!isNaN(seconds) && seconds >= 5 && seconds <= 600) {\n      dispatch(setVisionTimeoutMs(seconds * 1000));\n    }\n  };\n\n  const isCustom = visionState.modelSource === 'custom';\n  const canTest = isCustom\n    ? !!(visionState.custom.modelName && visionState.custom.baseUrl && visionState.custom.apiKey)\n    : !!visionState.presetModelRef;\n\n  return (\n    <YStack sx={{ gap: 3 }}>\n\n      {/* ==================== 总开关 ==================== */}\n      <SettingGroup title=\"视觉识别\">\n        <Row>\n          <Box sx={{ flex: 1 }}>\n            <Typography>启用视觉识别</Typography>\n            <Typography variant=\"caption\" color=\"text.secondary\">\n              发送图片给不支持视觉的模型时，自动用视觉模型分析图片内容并提供给当前模型\n            </Typography>\n          </Box>\n          <CustomSwitch\n            checked={visionState.enabled}\n            onChange={() => dispatch(setVisionEnabled(!visionState.enabled))}\n          />\n        </Row>\n      </SettingGroup>\n\n      {/* ==================== 模型来源 ==================== */}\n      <SettingGroup title=\"视觉模型\">\n        <Row>\n          <Typography sx={{ flex: 1 }}>模型来源</Typography>\n          <FormControl size=\"small\" sx={{ minWidth: 180 }}>\n            <Select value={visionState.modelSource} onChange={handleModelSourceChange}>\n              <MenuItem value=\"preset\">使用已配置的模型</MenuItem>\n              <MenuItem value=\"custom\">自定义API配置</MenuItem>\n            </Select>\n          </FormControl>\n        </Row>\n\n        {!isCustom && (\n          <ModelPickerRow\n            label=\"视觉模型\"\n            selectedModel={selectedPresetModel}\n            availableModels={allModels}\n            onSelect={handlePresetModelSelect}\n          />\n        )}\n\n        {isCustom && (\n          <>\n            <Row>\n              <Typography sx={{ minWidth: 80 }}>厂商预设</Typography>\n              <FormControl size=\"small\" sx={{ flex: 1 }}>\n                <Select value=\"\" onChange={handleProviderPreset} displayEmpty>\n                  <MenuItem value=\"\">\n                    <em>选择厂商快捷填充 Base URL</em>\n                  </MenuItem>\n                  {PROVIDER_PRESETS.map((preset) => (\n                    <MenuItem key={preset.name} value={preset.name}>\n                      {preset.name}\n                    </MenuItem>\n                  ))}\n                </Select>\n              </FormControl>\n            </Row>\n\n            <Row>\n              <Typography sx={{ minWidth: 80 }}>模型名称</Typography>\n              <TextField\n                size=\"small\"\n                placeholder=\"如 gpt-4o-mini、moonshot-v1-8k-vision-preview\"\n                value={visionState.custom.modelName}\n                onChange={handleCustomChange('modelName')}\n                sx={{ flex: 1 }}\n              />\n            </Row>\n\n            <Row>\n              <Typography sx={{ minWidth: 80 }}>Base URL</Typography>\n              <TextField\n                size=\"small\"\n                placeholder=\"https://api.openai.com/v1\"\n                value={visionState.custom.baseUrl}\n                onChange={handleCustomChange('baseUrl')}\n                sx={{ flex: 1 }}\n              />\n            </Row>\n\n            <Row>\n              <Typography sx={{ minWidth: 80 }}>API 密钥</Typography>\n              <TextField\n                size=\"small\"\n                type={showApiKey ? 'text' : 'password'}\n                placeholder=\"sk-...\"\n                value={visionState.custom.apiKey}\n                onChange={handleCustomChange('apiKey')}\n                sx={{ flex: 1 }}\n                InputProps={{\n                  endAdornment: (\n                    <InputAdornment position=\"end\">\n                      <IconButton size=\"small\" onClick={() => setShowApiKey(!showApiKey)} edge=\"end\">\n                        {showApiKey ? <EyeOff size={16} /> : <Eye size={16} />}\n                      </IconButton>\n                    </InputAdornment>\n                  ),\n                }}\n              />\n            </Row>\n          </>\n        )}\n\n        <Box sx={{ px: 2, pb: 2 }}>\n          <Button\n            fullWidth\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={handleTestConnection}\n            disabled={isTesting || !canTest}\n            startIcon={isTesting ? <CircularProgress size={16} /> : <RefreshCw size={16} />}\n            sx={{ textTransform: 'none' }}\n          >\n            {isTesting ? '测试中...' : '测试 API 连接'}\n          </Button>\n\n          {testResult && (\n            <Alert\n              severity={testResult.success ? 'success' : 'error'}\n              icon={testResult.success ? <CheckCircle2 size={18} /> : <XCircle size={18} />}\n              sx={{ mt: 1.5, borderRadius: 2 }}\n            >\n              <Typography variant=\"body2\">{testResult.message}</Typography>\n              {testResult.success && testResult.latencyMs !== undefined && (\n                <Typography variant=\"caption\" color=\"text.secondary\">\n                  响应时间: {testResult.latencyMs}ms\n                </Typography>\n              )}\n            </Alert>\n          )}\n        </Box>\n      </SettingGroup>\n\n      {/* ==================== 高级设置 ==================== */}\n      <SettingGroup title=\"高级设置\">\n        <Row sx={{ alignItems: 'flex-start', flexDirection: 'column', gap: 1 }}>\n          <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>\n            <Box sx={{ flex: 1 }}>\n              <Typography>分析提示词</Typography>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                指导视觉模型如何描述图片\n              </Typography>\n            </Box>\n            <IconButton\n              size=\"small\"\n              onClick={() => dispatch(setVisionPrompt(DEFAULT_VISION_PROMPT))}\n              title=\"恢复默认\"\n            >\n              <RotateCcw size={16} />\n            </IconButton>\n          </Box>\n          <TextField\n            fullWidth\n            multiline\n            minRows={3}\n            maxRows={8}\n            size=\"small\"\n            value={visionState.prompt}\n            onChange={(e) => dispatch(setVisionPrompt(e.target.value))}\n          />\n        </Row>\n\n        <Row>\n          <Box sx={{ flex: 1 }}>\n            <Typography>分析失败时</Typography>\n            <Typography variant=\"caption\" color=\"text.secondary\">\n              视觉模型分析失败后的处理方式\n            </Typography>\n          </Box>\n          <FormControl size=\"small\" sx={{ minWidth: 160 }}>\n            <Select\n              value={visionState.onFailure}\n              onChange={(e) => dispatch(setVisionFailureStrategy(e.target.value as VisionFailureStrategy))}\n            >\n              <MenuItem value=\"abort\">中止并报错</MenuItem>\n              <MenuItem value=\"continueWithoutImage\">移除图片继续发送</MenuItem>\n            </Select>\n          </FormControl>\n        </Row>\n\n        <Row>\n          <Typography sx={{ flex: 1 }}>分析超时（秒）</Typography>\n          <TextField\n            size=\"small\"\n            value={Math.round(visionState.timeoutMs / 1000)}\n            onChange={handleTimeoutChange}\n            inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}\n            sx={{ width: 100 }}\n          />\n        </Row>\n      </SettingGroup>\n\n      {/* ==================== 配置说明 ==================== */}\n      <Box sx={{ px: 1.5 }}>\n        <YStack sx={{ gap: 0.75 }}>\n          {[\n            { label: '使用已配置的模型', desc: '从现有供应商中选择一个支持视觉的模型，复用其密钥与地址' },\n            { label: '自定义API配置', desc: '独立填写模型名、Base URL 与密钥（OpenAI 兼容协议），与主API互不影响' },\n            { label: '工作方式', desc: '仅当当前对话模型不支持图片时触发；分析结果只注入本次请求，聊天记录仍保留原图' },\n          ].map((item) => (\n            <Typography key={item.label} variant=\"caption\" color=\"text.secondary\">\n              <strong>{item.label}</strong> — {item.desc}\n            </Typography>\n          ))}\n        </YStack>\n      </Box>\n\n    </YStack>\n  );\n};\n\nexport default VisionRecognitionTab;\n"}}}}