kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import type { VisualNovelRunSnapshot } from '../../../packages/shared/src/contracts/visualNovel';
|
|
import { PlatformEmptyState } from '../common/PlatformEmptyState';
|
|
|
|
type VisualNovelAttributePanelProps = {
|
|
run: VisualNovelRunSnapshot;
|
|
};
|
|
|
|
export function VisualNovelAttributePanel({
|
|
run,
|
|
}: VisualNovelAttributePanelProps) {
|
|
const metrics = Object.entries(run.metrics);
|
|
|
|
if (metrics.length === 0) {
|
|
return (
|
|
<PlatformEmptyState surface="subpanel" size="inline">
|
|
暂无属性
|
|
</PlatformEmptyState>
|
|
);
|
|
}
|
|
|
|
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-solid)]"
|
|
style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VisualNovelAttributePanel;
|