Profeto/frontend/src/admin/SettingRow.tsx

/**
 * Admin 后台 - 配置项行组件(报刊风)
 *
 * 展示态:键名 + 来源徽标(数据库覆盖 / .env 默认 / 未配置) + 脱敏值 + 操作按钮
 * 编辑态:输入框 + 保存/取消
 * 由数据源页与 LLM 配置页共用。
 */

import { useEffect, useState } from 'react'
import type { DataSourceSetting } from './types'
import { Badge, Spinner } from './components'

export const ORIGIN_BADGE: Record<DataSourceSetting['origin'], { text: string; status: 'success' | 'info' | 'error' }> = {
  db: { text: '数据库覆盖', status: 'success' },
  env: { text: '.env 默认', status: 'info' },
  none: { text: '未配置', status: 'error' },
}

export default function SettingRow({
  setting,
  editing,
  busy,
  onEdit,
  onCancel,
  onSave,
  onClear,
  detectModels,
}: {
  setting: DataSourceSetting
  editing: boolean
  busy: boolean
  onEdit: () => void
  onCancel: () => void
  onSave: (value: string) => void
  onClear: () => void
  /** 可选:编辑态提供「检测可用模型」能力(如 LLM_MODEL 行) */
  detectModels?: () => Promise<string[]>
}) {
  const [value, setValue] = useState('')
  const origin = ORIGIN_BADGE[setting.origin]

  // 行内模型检测
  const [detecting, setDetecting] = useState(false)
  const [detected, setDetected] = useState<string[] | null>(null)
  const [detectError, setDetectError] = useState('')

  // 进入编辑态时清空上次的检测结果
  useEffect(() => {
    if (editing) {
      setDetected(null)
      setDetectError('')
    }
  }, [editing])

  async function handleDetect() {
    if (!detectModels || detecting) return
    setDetecting(true)
    setDetectError('')
    try {
      setDetected(await detectModels())
    } catch (err) {
      setDetected(null)
      setDetectError(err instanceof Error ? err.message : '检测失败')
    } finally {
      setDetecting(false)
    }
  }

  if (editing) {
    return (
      <div className="border-b border-ink-200 py-2.5 last:border-b-0">
        <div className="mb-1.5 flex flex-wrap items-center gap-1.5 text-2xs text-ink-500">
          <span className="break-all font-mono text-ink-800">{setting.key}</span>
          {setting.sensitive && <Badge status="warning">敏感</Badge>}
        </div>
        <div className="flex flex-col gap-2 sm:flex-row">
          <input
            type={setting.sensitive ? 'password' : 'text'}
            value={value}
            onChange={e => setValue(e.target.value)}
            placeholder={`输入新的 ${setting.label}`}
            autoFocus
            autoComplete="off"
            className="field flex-1"
          />
          <div className="flex gap-2">
            <button
              onClick={() => onSave(value)}
              disabled={!value.trim() || busy}
              className="btn btn-solid btn-sm"
            >
              {busy ? (<><Spinner /> 保存中</>) : '保存'}
            </button>
            <button onClick={onCancel} disabled={busy} className="btn btn-sm">
              取消
            </button>
          </div>
        </div>

        {detectModels && (
          <div className="mt-2 space-y-2">
            <button onClick={handleDetect} disabled={detecting} className="btn btn-sm">
              {detecting ? (<><Spinner /> 检测中</>) : detected ? '重新检测' : '检测可用模型'}
            </button>

            {detectError && (
              <p className="border-l-2 border-press bg-press-wash/40 px-3 py-1.5 text-2xs leading-relaxed text-press-dark">
                {detectError}
              </p>
            )}

            {detected && detected.length > 0 && (
              <div className="max-h-48 overflow-y-auto border border-ink-200">
                {detected.map(id => (
                  <button
                    key={id}
                    type="button"
                    onClick={() => setValue(id)}
                    className={`flex w-full items-center justify-between gap-3 border-b border-ink-200 px-3 py-1.5 text-left last:border-b-0 hover:bg-paper-100 ${
                      value === id ? 'bg-press-wash/50' : ''
                    }`}
                  >
                    <span className="min-w-0 break-all font-mono text-2xs text-ink-800">{id}</span>
                    {value === id && <Badge status="success">已选</Badge>}
                  </button>
                ))}
              </div>
            )}

            {detected && detected.length === 0 && !detectError && (
              <p className="text-2xs text-ink-400">服务未返回可用模型</p>
            )}
          </div>
        )}
      </div>
    )
  }

  return (
    <div className="space-y-1.5 border-b border-ink-200 py-2.5 last:border-b-0">
      <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
        <span className="break-all font-mono text-2xs text-ink-800">{setting.key}</span>
        <Badge status={origin.status}>{origin.text}</Badge>
      </div>
      <div className="break-all font-mono text-2xs leading-relaxed text-ink-500">
        {setting.configured ? setting.masked : '—'}
      </div>
      <div className="flex justify-end gap-2">
        <button onClick={onEdit} disabled={busy} className="btn btn-sm">
          {setting.configured ? '更换' : '配置'}
        </button>
        {setting.origin === 'db' && (
          <button onClick={onClear} disabled={busy} className="btn btn-sm" title="删除数据库覆盖值,回落 .env">
            回落 .env
          </button>
        )}
      </div>
    </div>
  )
}