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){ function advance(index?: number){
const runner = runnerInstance(); const runner = runnerInstance();
if(!runner) return; if(!runner) return;
if(runner.currentResult?.type !== 'options' && runner.currentResult?.isDialogueEnd) return;
runner.advance(index); runner.advance(index);
processRunnerOutput(runner); processRunnerOutput(runner);
} }
@ -123,9 +124,9 @@ customElement<RunnerOptions>('md-yarn-spinner', {
}; };
return ( 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}> <Show when={dialogueHistory().length === 0 && !yarnContent.loading}>
<div class="text-gray-400 text-center py-8">点击重新开始开始对话</div> <div class="text-gray-400 text-center py-8">点击重新开始开始对话</div>
</Show> </Show>
@ -136,7 +137,7 @@ customElement<RunnerOptions>('md-yarn-spinner', {
{renderEntry} {renderEntry}
</For> </For>
</div> </div>
{/* 当前选项 */} {/* 当前选项 */}
<Show when={currentOptions() && !isEnded()}> <Show when={currentOptions() && !isEnded()}>
<div class="current-options p-4 border-t bg-white"> <div class="current-options p-4 border-t bg-white">
@ -145,7 +146,7 @@ customElement<RunnerOptions>('md-yarn-spinner', {
{(option, index) => ( {(option, index) => (
<button <button
onClick={() => advance(index())} 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" rounded border border-blue-200 transition-colors cursor-pointer"
> >
→ {option.text} → {option.text}
@ -155,12 +156,12 @@ customElement<RunnerOptions>('md-yarn-spinner', {
</div> </div>
</div> </div>
</Show> </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 <button
onClick={restart} 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" rounded transition-colors cursor-pointer"
title="重新开始" title="重新开始"
> >
@ -168,7 +169,7 @@ customElement<RunnerOptions>('md-yarn-spinner', {
</button> </button>
<button <button
onClick={() => advance()} 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" rounded transition-colors cursor-pointer"
title="继续" title="继续"
> >