1

src/components/visual-novel-runtime/VisualNovelAttributePanel.tsx

@@ -0,0 +1,38 @@
+import type { VisualNovelRunSnapshot } from '../../../packages/shared/src/contracts/visualNovel';
+
+type VisualNovelAttributePanelProps = {
+  run: VisualNovelRunSnapshot;
+};
+
+export function VisualNovelAttributePanel({ run }: VisualNovelAttributePanelProps) {
+  const metrics = Object.entries(run.metrics);
+
+  if (metrics.length === 0) {
+    return (
+      <div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/74 px-4 py-5 text-center text-sm font-semibold text-[var(--platform-text-soft)]">
+        暂无属性
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {metrics.map(([key, value]) => (
+        <div key={key}>
+          <div className="mb-1 flex items-center justify-between text-xs font-bold text-[var(--platform-text-soft)]">
+            <span>{key}</span>
+            <span>{value}</span>
+          </div>
+          <div className="h-2 overflow-hidden rounded-full bg-[var(--platform-track-fill)]">
+            <div
+              className="h-full rounded-full bg-[var(--platform-button-primary-fill)]"
+              style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default VisualNovelAttributePanel;