yingqing/core/frontend/src/routes/admin/admin-quality.tsx

import { useCallback, useEffect, useState } from "react";
import { X } from "lucide-react";
import { adminApi } from "../../api";
import { IconKitSvg } from "../../components/IconKitSvg";
import type { AdminQualityWord } from "../../types";

type Notify = (type: "success" | "error" | "info", text: string) => void;

// 与后端 QualityWord.Stage 对齐(生成侧已接入这 4 个阶段)
const STAGES = [
  { key: "person", label: "人物立绘" },
  { key: "model_tryon", label: "模特上身图" },
  { key: "storyboard", label: "故事板" },
  { key: "video", label: "视频" }
];

export function AdminQualityPage({ notify }: { notify: Notify }) {
  const [words, setWords] = useState<AdminQualityWord[]>([]);
  const [loading, setLoading] = useState(true);
  const [editMode, setEditMode] = useState(false);
  const [adding, setAdding] = useState<Record<string, string>>({});

  const load = useCallback(async () => {
    setLoading(true);
    try {
      setWords(await adminApi.qualityWords());
    } catch {
      notify("error", "加载质量词失败");
    } finally {
      setLoading(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => { void load(); }, [load]);

  async function add(stage: string) {
    const text = (adding[stage] || "").trim();
    if (!text) return;
    try {
      await adminApi.createQualityWord({ stage, text });
      setAdding((a) => ({ ...a, [stage]: "" }));
      notify("success", "已添加质量词");
      await load();
    } catch {
      notify("error", "添加失败");
    }
  }

  async function saveText(w: AdminQualityWord, text: string) {
    const t = text.trim();
    if (!t || t === w.text) return;
    try {
      await adminApi.updateQualityWord(w.id, { text: t });
      notify("success", "已更新");
      await load();
    } catch {
      notify("error", "更新失败");
    }
  }

  async function del(w: AdminQualityWord) {
    try {
      await adminApi.deleteQualityWord(w.id);
      notify("success", "已删除");
      await load();
    } catch {
      notify("error", "删除失败");
    }
  }

  return (
    <>
      <div className="page-head">
        <div>
          <h1>质量词</h1>
          <div className="sub"><span className="mono">// 平台单层</span> · 各生成阶段的画质 / 风格词,留空则用默认</div>
        </div>
        <div className="actions">
          <button className={`btn${editMode ? " btn-primary" : ""}`} type="button" onClick={() => setEditMode((v) => !v)}>
            {editMode ? "完成编辑" : "编辑模式"}
          </button>
        </div>
      </div>

      {loading ? (
        <div className="empty-state show"><div className="ic-empty"><IconKitSvg name="type" size={24} /></div><h3>加载中…</h3><p>// fetching quality words</p></div>
      ) : (
        <div className="qw-stages">
          {STAGES.map((s) => {
            const ws = words.filter((w) => w.stage === s.key);
            return (
              <div key={s.key} className="card-hard qw-stage">
                <div className="qw-stage-h">
                  <span className="qw-stage-title">{s.label}</span>
                  <span className="mono qw-stage-hint">// {s.key}</span>
                </div>
                {ws.length === 0 && !editMode && <div className="qw-empty mono">未配置 · 使用默认质量词</div>}
                <div className="qw-chips">
                  {ws.map((w) =>
                    editMode ? (
                      <span key={w.id} className="qw-chip editing">
                        <input
                          className="qw-chip-input"
                          defaultValue={w.text}
                          onBlur={(e) => saveText(w, e.target.value)}
                          onKeyDown={(e) => { if (e.key === "Enter") e.currentTarget.blur(); }}
                        />
                        <button className="qw-del" type="button" aria-label="删除" onClick={() => del(w)}><X size={12} /></button>
                      </span>
                    ) : (
                      <span key={w.id} className="qw-chip">{w.text}</span>
                    )
                  )}
                  {editMode && (
                    <span className="qw-add">
                      <input
                        className="qw-chip-input"
                        placeholder="+ 添加质量词"
                        value={adding[s.key] || ""}
                        onChange={(e) => setAdding((a) => ({ ...a, [s.key]: e.target.value }))}
                        onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); void add(s.key); } }}
                      />
                    </span>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </>
  );
}