交互原型大版本

art-agent/frontend/src/components/workbench/advanced-controls.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+/**
+ * 高级控制面板（Phase 2 占位）
+ *
+ * 对应 INFOLAYER.md 3.3 节「高级控制」：提供给高级用户的参数调节抽屉。
+ * 当前所有参数均为占位，不会真实下发到后端。
+ */
+export function AdvancedControls() {
+  const [open, setOpen] = useState(false);
+  const [cfg, setCfg] = useState(7.5);
+  const [steps, setSteps] = useState(28);
+  const [sampler, setSampler] = useState("DPM++ 2M Karras");
+  const [seed, setSeed] = useState("");
+  const [styleWeight, setStyleWeight] = useState(0.8);
+  const [charWeight, setCharWeight] = useState(0.85);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="h-7 px-2 rounded-lg text-xs flex items-center gap-1.5
+                   border border-[var(--border)] bg-[var(--bg-tertiary)]
+                   text-[var(--text-secondary)] hover:text-[var(--text-primary)]
+                   hover:border-[var(--accent)]/40 cursor-pointer transition-all"
+        title="高级控制（占位）"
+      >
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="12" cy="12" r="3" />
+          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+        </svg>
+        高级
+        <span className="phase-chip">P2</span>
+      </button>
+
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 8 }}
+            className="absolute bottom-full mb-2 right-0 w-80 max-w-[calc(100vw-24px)]
+                       rounded-xl surface-2 border border-[var(--border)] shadow-xl
+                       backdrop-blur-xl z-40 p-3"
+          >
+            <div className="flex items-center justify-between mb-3">
+              <span className="typo-strong text-xs">高级控制（占位）</span>
+              <button
+                onClick={() => setOpen(false)}
+                className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] cursor-pointer"
+              >
+                ✕
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              <Slider label="CFG Scale" value={cfg} min={1} max={20} step={0.5} onChange={setCfg} />
+              <Slider label="Steps" value={steps} min={10} max={60} step={1} onChange={setSteps} />
+              <Slider label="风格强度" value={styleWeight} min={0} max={1.5} step={0.05} onChange={setStyleWeight} />
+              <Slider label="角色一致性" value={charWeight} min={0} max={1.5} step={0.05} onChange={setCharWeight} />
+
+              <div>
+                <label className="block typo-micro mb-1" style={{ textTransform: "none" }}>采样器</label>
+                <select
+                  value={sampler}
+                  onChange={(e) => setSampler(e.target.value)}
+                  className="w-full px-2 py-1.5 text-xs rounded-md bg-[var(--bg-primary)]
+                             border border-[var(--border)] focus:border-[var(--accent)]/40 outline-none"
+                >
+                  {["DPM++ 2M Karras", "Euler a", "DDIM", "UniPC"].map((s) => (
+                    <option key={s} value={s}>{s}</option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block typo-micro mb-1" style={{ textTransform: "none" }}>Seed</label>
+                <div className="flex gap-1.5">
+                  <input
+                    value={seed}
+                    onChange={(e) => setSeed(e.target.value)}
+                    placeholder="留空为随机"
+                    className="flex-1 px-2 py-1.5 text-xs rounded-md bg-[var(--bg-primary)]
+                               border border-[var(--border)] focus:border-[var(--accent)]/40 outline-none font-mono"
+                  />
+                  <button
+                    onClick={() => setSeed(Math.floor(Math.random() * 9_999_999).toString())}
+                    className="px-2 py-1.5 text-xs rounded-md border border-[var(--border)]
+                               text-[var(--text-secondary)] hover:text-[var(--text-primary)]
+                               cursor-pointer"
+                  >
+                    🎲
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-3 pt-3 border-t border-[var(--border)] text-[10px] text-[var(--text-secondary)]">
+              参数为占位，真实生效链路待 Phase 2 交付。
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function Slider({
+  label, value, min, max, step, onChange,
+}: { label: string; value: number; min: number; max: number; step: number; onChange: (v: number) => void }) {
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1">
+        <label className="typo-micro" style={{ textTransform: "none" }}>{label}</label>
+        <span className="text-[11px] text-[var(--accent)] font-mono">{value}</span>
+      </div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(parseFloat(e.target.value))}
+        className="w-full accent-[var(--accent)]"
+      />
+    </div>
+  );
+}