xiaoxia-saas/apps/web/src/components/voice/TtsStyleSelector/index.tsx

/**
 * TTS 配音风格选择器
 * - 6 种预设风格卡片（自然亲切 / 激动兴奋 / 沉稳专业 / 温柔甜美 / 新闻播报 / 直播带货）
 * - 卡片单选，选中高亮紫色
 * - 默认 natural
 *
 * 复用方式：
 *   <TtsStyleSelector value={style} onChange={setStyle} />
 *   <TtsStyleSelector value={style} onChange={setStyle} compact />  // 紧凑模式（小尺寸）
 */
import React from "react"
import { TTS_STYLE_OPTIONS, DEFAULT_TTS_STYLE, type TtsStyle } from "@/api/tts/styles"

export interface TtsStyleSelectorProps {
  value?: TtsStyle | string
  onChange: (style: TtsStyle) => void
  /** 紧凑模式（小卡片），适合与其他参数并排 */
  compact?: boolean
  /** 是否显示"配音风格"标签 */
  showLabel?: boolean
}

const TtsStyleSelector: React.FC<TtsStyleSelectorProps> = ({
  value,
  onChange,
  compact = false,
  showLabel = true,
}) => {
  const current = value || DEFAULT_TTS_STYLE

  if (compact) {
    return (
      <div>
        {showLabel && (
          <div
            style={{
              fontSize: 13,
              color: "var(--text-secondary, #6b7280)",
              marginBottom: 6,
            }}
          >
            配音风格
          </div>
        )}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 6,
          }}
        >
          {TTS_STYLE_OPTIONS.map((opt) => {
            const selected = current === opt.value
            return (
              <button
                type="button"
                key={opt.value}
                onClick={() => onChange(opt.value as TtsStyle)}
                title={opt.description}
                style={{
                  padding: "6px 4px",
                  borderRadius: 6,
                  border: selected ? "2px solid #7c3aed" : "1px solid #e5e7eb",
                  background: selected ? "#faf5ff" : "#fff",
                  color: selected ? "#6d28d9" : "#374151",
                  cursor: "pointer",
                  fontSize: 12,
                  fontWeight: selected ? 600 : 400,
                  textAlign: "center",
                  transition: "all 0.15s",
                  lineHeight: 1.3,
                }}
              >
                <span style={{ marginRight: 3 }}>{opt.emoji}</span>
                {opt.label}
              </button>
            )
          })}
        </div>
      </div>
    )
  }

  return (
    <div>
      {showLabel && (
        <div
          style={{
            fontSize: 13,
            color: "var(--text-secondary, #6b7280)",
            marginBottom: 8,
            fontWeight: 500,
          }}
        >
          配音风格
        </div>
      )}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 8,
        }}
      >
        {TTS_STYLE_OPTIONS.map((opt) => {
          const selected = current === opt.value
          return (
            <button
              type="button"
              key={opt.value}
              onClick={() => onChange(opt.value as TtsStyle)}
              title={opt.description}
              style={{
                padding: "10px 8px",
                borderRadius: 8,
                border: selected ? "2px solid #7c3aed" : "1px solid #e5e7eb",
                background: selected ? "#faf5ff" : "#fff",
                color: selected ? "#6d28d9" : "#111",
                cursor: "pointer",
                textAlign: "center",
                transition: "all 0.15s",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: 4,
              }}
            >
              <span style={{ fontSize: 22, lineHeight: 1 }}>{opt.emoji}</span>
              <span style={{ fontSize: 13, fontWeight: selected ? 600 : 500 }}>{opt.label}</span>
              <span
                style={{
                  fontSize: 10,
                  color: "#9ca3af",
                  lineHeight: 1.2,
                  maxWidth: "100%",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                {opt.description}
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}

export default TtsStyleSelector