/* ============================================================
万物剧场 · 问卷 — 题型组件 + 图标
============================================================ */
const { useState, useRef, useEffect } = React;
/* ---------- 线性小图标（简单几何，符合品牌线性字性） ---------- */
const Icon = {
check: (p) => ,
arrowR: (p) => ,
arrowL: (p) => ,
up: (p) => ,
down: (p) => ,
grip: (p) => ,
ticket: (p) => ,
star: (p) => ,
sun: (p) => ,
moon: (p) => ,
refresh: (p) => ,
download: (p) => ,
share: (p) => ,
};
/* ---------- 统一面脸（品牌：墨黑双眼 + 松垮小嘴） ---------- */
function Face({ mood = "smile" }) {
const mouth = {
smile: "M40 60 Q50 70 60 60",
calm: "M41 62 Q50 66 59 62",
o: null,
}[mood];
return (
);
}
/* ============================================================
单选
============================================================ */
function SingleChoice({ q, value, onChange, justPicked }) {
return (
{q.options.map((o, i) => (
))}
);
}
/* ============================================================
多选
============================================================ */
function MultiChoice({ q, value, onChange }) {
const arr = Array.isArray(value) ? value : [];
const max = q.max || q.options.length;
const toggle = (id) => {
if (arr.includes(id)) onChange(arr.filter((x) => x !== id));
else if (arr.length < max) onChange([...arr, id]);
};
return (
{q.options.map((o, i) => {
const on = arr.includes(o.id);
const full = !on && arr.length >= max;
return (
);
})}
);
}
/* ============================================================
量表 / 滑条
============================================================ */
function ScaleQ({ q, value, onChange }) {
const steps = [];
for (let v = q.min; v <= q.max; v++) steps.push(v);
return (
{steps.map((v) => {
const on = value === v;
const near = value != null && Math.abs(value - v) === 1;
// 球的尺寸随两端渐变，制造「程度」体感
const t = (v - q.min) / (q.max - q.min);
const size = 26 + t * 16;
return (
);
})}
{q.minLabel}
{q.maxLabel}
);
}
/* ============================================================
图文卡片
============================================================ */
function ImageQ({ q, value, onChange, justPicked }) {
return (
{q.options.map((o) => (
))}
);
}
/* ============================================================
排序题（箭头为主，桌面端支持拖拽）
============================================================ */
function RankQ({ q, value, onChange }) {
const order = Array.isArray(value) && value.length === q.items.length
? value : q.items.map((i) => i.id);
const byId = Object.fromEntries(q.items.map((i) => [i.id, i]));
const dragId = useRef(null);
const [dragging, setDragging] = useState(null);
const move = (idx, dir) => {
const j = idx + dir;
if (j < 0 || j >= order.length) return;
const next = order.slice();
[next[idx], next[j]] = [next[j], next[idx]];
onChange(next);
};
const onDrop = (overId) => {
const from = order.indexOf(dragId.current);
const to = order.indexOf(overId);
if (from < 0 || to < 0 || from === to) return;
const next = order.slice();
next.splice(to, 0, next.splice(from, 1)[0]);
onChange(next);
};
return (
{order.map((id, idx) => (
{ dragId.current = id; setDragging(id); }}
onDragEnd={() => { dragId.current = null; setDragging(null); }}
onDragOver={(e) => e.preventDefault()}
onDrop={() => onDrop(id)}>
1 ? " low" : "")}>{idx + 1}
{byId[id].label}
{Icon.grip()}
))}