/* productdetail.jsx — App Store-style detail (real data) + CARTO AI positioning */
function Stars({ value, s = 14, gap = 2 }) {
const v = Number(value) || 0;
return (
{[0, 1, 2, 3, 4].map(i => {
const fill = v - i;
const f = fill >= 1 ? 1 : fill <= 0 ? 0 : fill;
return (
);
})}
{title}
{action}
{children}
);
}
function MetaChip({ k, v, sub }) {
return (
);
}
function RouteStack({ stack }) {
return (
{stack.map((s, i) => {
const last = i === stack.length - 1;
const link = !!s.go && !last;
return (
{i > 0 && }
{ if (link) { e.currentTarget.style.color = "var(--t-hi)"; e.currentTarget.style.background = "var(--hover)"; } }}
onMouseLeave={e => { if (link) { e.currentTarget.style.color = "var(--t-dim)"; e.currentTarget.style.background = "var(--panel-2)"; } }}
style={{ fontFamily: "var(--mono)", fontSize: 11.5, padding: "4px 9px", borderRadius: 6, whiteSpace: "nowrap",
cursor: link ? "pointer" : "default",
color: last ? "var(--acc-hi)" : "var(--t-dim)",
background: last ? "var(--acc-soft)" : "var(--panel-2)",
border: `1px solid ${last ? "rgba(139,124,246,.3)" : "var(--line)"}`,
transition: "color .15s, background .15s" }}>{s.label}
);
})}
);
}
/* small muted placeholder note for fields the public App Store API does not expose */
function Placeholder({ children }) {
return (
{children}
);
}
/* 预览视频卡：海报 + 播放角标，点击就地用 hls.js 播放 App Store 的 m3u8 预览 */
function VideoPreview({ src, poster, w = 158 }) {
const [playing, setPlaying] = useState(false);
const videoRef = useRef(null);
useEffect(() => {
if (!playing) return;
const v = videoRef.current;
if (!v) return;
let hls;
const tryPlay = () => { if (v.play) v.play().catch(() => {}); };
// 优先 hls.js（Chrome 的 canPlayType 会谎报支持 HLS，实际放不了）
if (window.Hls && window.Hls.isSupported()) {
hls = new window.Hls({ enableWorker: true });
hls.loadSource(src);
hls.attachMedia(v);
hls.on(window.Hls.Events.MANIFEST_PARSED, tryPlay);
} else if (v.canPlayType("application/vnd.apple.mpegurl")) {
v.src = src; // Safari 原生 HLS
v.addEventListener("loadedmetadata", tryPlay, { once: true });
} else {
v.src = src;
tryPlay();
}
return () => { if (hls) hls.destroy(); };
}, [playing, src]);
const h = Math.round(w * 2.04);
return (
{playing
?
:
{poster
? 
: }
setPlaying(true)} style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", cursor: "pointer", background: "rgba(0,0,0,.18)" }}>
预览视频
}
} right={
} />
{from === "import" && (
)}
{/* header */}
{app.name}
{app.sub}
{app.publisher}
{app.platform}
{statusChip}
{app.storeUrl &&
App Store}
{cta}
{/* meta strip */}
{app.rating}} sub={`${app.ratingCount} 评分`} />
k === "语言") || [, "—"])[1].replace(" 种", "+")} sub="种界面" />
{/* preview gallery — real screenshots + video */}
{previews.length} 项{previews.some(p => p.video) ? " · 含视频" : ""}}>
{previews.map((p, i) => (
{p.video
?
:
{p.url
?
:
}
}
{p.cap &&
{p.cap}}
))}
{/* CARTO AI positioning */}
CARTO · AI 定位分析
{aiPending && AI 分析中…}
{app.positioning ? (
{app.positioning}
{(app.tags || []).map(t => {t})}
目标人群
{app.audience || "—"}
核心循环
{app.hooks && app.hooks[0] ? app.hooks[0].v : "—"}
) : aiPending ? (
{[1, 0.9, 0.7].map((w, i) =>
)}
正在基于 App Store 信息生成 AI 定位分析，完成后将自动刷新。
) : readOnly ? (
该 App 暂无 AI 定位分析。
) : (
{aiStatus === "unavailable"
? "未配置 AI（CHARABOARD_API_KEY），AI 定位分析暂不可用。"
: aiStatus === "error"
? "上次分析未能完成，可重新触发。"
: "尚未生成 AI 定位分析。"}
)}
{/* description */}
{app.description
? {app.description.map((p, i) =>
{p}
)}
{/* what's new */}
v{app.whatsNew.version} · {app.whatsNew.date} : null}>
{app.whatsNew && app.whatsNew.notes && app.whatsNew.notes.length
?
{app.whatsNew.notes.map((n, i) => (
-
{n}
))}
: 该版本未提供更新说明。}
{/* information */}
{app.info.map(([k, v], i) => (
{k}
{v}
))}
{/* supported languages */}
{app.langs
? {app.langs.map(l => {l})}
: 未获取到语言信息。}
{app.compat && {app.compat}
}
);
}
Object.assign(window, { ProductDetail, Stars });