1

2026-04-18 13:05:29 +08:00
parent 09d4c0c31b
commit 5032701c38
77 changed files with 8538 additions and 2413 deletions
--- a/src/components/custom-world-agent/EightAnchorProgressBar.tsx
+++ b/src/components/custom-world-agent/EightAnchorProgressBar.tsx
@@ -0,0 +1,105 @@
+type EightAnchorProgressBarProps = {
+  currentTurn: number;
+  progressPercent: number;
+  disabled: boolean;
+  onSummaryClick: () => void;
+  onQuickFill: () => void;
+  onGenerateDraft: () => void;
+};
+
+function clampProgress(progressPercent: number) {
+  if (!Number.isFinite(progressPercent)) {
+    return 0;
+  }
+
+  return Math.max(0, Math.min(100, Math.round(progressPercent)));
+}
+
+function resolveProgressHint(progressPercent: number) {
+  if (progressPercent >= 100) {
+    return '当前设定已经收束完成，可以进入草稿生成';
+  }
+
+  if (progressPercent >= 75) {
+    return '正在收束成一版可进入草稿的世界底子';
+  }
+
+  if (progressPercent >= 45) {
+    return '世界方向已经成形，继续补关键骨架';
+  }
+
+  if (progressPercent >= 15) {
+    return '先把玩家视角、开局和冲突线钉稳';
+  }
+
+  return '先抓住这个世界最关键的方向';
+}
+
+export function EightAnchorProgressBar({
+  currentTurn,
+  progressPercent,
+  disabled,
+  onSummaryClick,
+  onQuickFill,
+  onGenerateDraft,
+}: EightAnchorProgressBarProps) {
+  const normalizedProgress = clampProgress(progressPercent);
+  const isCompleted = normalizedProgress >= 100;
+  const canQuickFill = currentTurn >= 2;
+
+  return (
+    <div className="rounded-[1.75rem] border border-white/10 bg-[#111318]/95 p-4">
+      <div className="flex flex-col gap-3">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <div className="text-xs font-semibold tracking-[0.14em] text-zinc-300">
+              创作进度
+            </div>
+            <div className="mt-1 text-sm text-zinc-400">
+              {resolveProgressHint(normalizedProgress)}
+            </div>
+          </div>
+          <div className="text-lg font-semibold text-white">
+            {normalizedProgress}%
+          </div>
+        </div>
+
+        <div className="h-3 overflow-hidden rounded-full bg-white/8">
+          <div
+            className="h-full rounded-full bg-[linear-gradient(90deg,#d8ffd9_0%,#6ee7b7_45%,#34d399_100%)] transition-[width] duration-500"
+            style={{ width: `${Math.max(6, normalizedProgress)}%` }}
+          />
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <button
+            type="button"
+            onClick={onSummaryClick}
+            disabled={disabled}
+            className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-zinc-200 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+          >
+            总结当前设定
+          </button>
+          {isCompleted ? (
+            <button
+              type="button"
+              onClick={onGenerateDraft}
+              disabled={disabled}
+              className="flex min-h-[3rem] items-center justify-center rounded-[1.1rem] border border-emerald-300/25 bg-emerald-500/12 px-4 py-3 text-sm font-semibold text-emerald-50 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+            >
+              生成游戏设定草稿
+            </button>
+          ) : canQuickFill ? (
+            <button
+              type="button"
+              onClick={onQuickFill}
+              disabled={disabled}
+              className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-zinc-200 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+            >
+              补全剩余设定
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}