hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: layout

This commit is contained in:
hypercross 2026-03-03 00:48:13 +08:00
parent a02edabc41
commit 6b77653d27
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
content/yarn-test.md Normal file
View File

@ -0,0 +1 @@
:md-yarn-spinner[./adventures/test.yarn]

19
src/components/md-yarn-spinner.tsx
View File

@ -63,6 +63,7 @@ customElement<RunnerOptions>('md-yarn-spinner', {
function advance(index?: number){
const runner = runnerInstance();
if(!runner) return;
if(runner.currentResult?.type !== 'options' && runner.currentResult?.isDialogueEnd) return;
runner.advance(index);
processRunnerOutput(runner);
}
@ -123,9 +124,9 @@ customElement<RunnerOptions>('md-yarn-spinner', {
};
return (
<div class="yarn-spinner w-full max-w-2xl mx-auto shadow-sm">
<div class="yarn-spinner w-full max-w-2xl mx-auto shadow-sm relative">
{/* 对话历史 */}
<div class="dialogue-history p-4 min-h-[200px] max-h-[60vh] overflow-y-auto bg-gray-50">
<div class="dialogue-history p-4 h-64 overflow-y-auto bg-gray-50">
<Show when={dialogueHistory().length === 0 && !yarnContent.loading}>
<div class="text-gray-400 text-center py-8">点击重新开始开始对话</div>
</Show>
@ -136,7 +137,7 @@ customElement<RunnerOptions>('md-yarn-spinner', {
{renderEntry}
</For>
</div>
{/* 当前选项 */}
<Show when={currentOptions() && !isEnded()}>
<div class="current-options p-4 border-t bg-white">
@ -145,7 +146,7 @@ customElement<RunnerOptions>('md-yarn-spinner', {
{(option, index) => (
<button
onClick={() => advance(index())}
class="option-button text-left px-4 py-2 bg-blue-50 hover:bg-blue-100
class="option-button text-left px-4 py-2 bg-blue-50 hover:bg-blue-100
rounded border border-blue-200 transition-colors cursor-pointer"
>
→ {option.text}
@ -155,12 +156,12 @@ customElement<RunnerOptions>('md-yarn-spinner', {
</div>
</div>
</Show>
{/* 工具栏 */}
<div class="toolbar p-2 border-t bg-gray-100 flex justify-end gap-2">
{/* 浮动工具栏 */}
<div class="toolbar absolute top-0 right-0 p-2 bg-gray-100 border-t border-l rounded-tl-lg shadow-sm flex gap-2">
<button
onClick={restart}
class="restart-button px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300
class="restart-button px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300
rounded transition-colors cursor-pointer"
title="重新开始"
>
@ -168,7 +169,7 @@ customElement<RunnerOptions>('md-yarn-spinner', {
</button>
<button
onClick={() => advance()}
class="advance-button px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300
class="advance-button px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300
rounded transition-colors cursor-pointer"
title="继续"
>