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

style: pin & table

This commit is contained in:
hypercross 2026-02-26 23:12:26 +08:00
parent 63c320f669
commit bd2e7ac5a5
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/md-pin.tsx
View File

@ -51,7 +51,7 @@ customElement("md-pin", { x: 0, y: 0 }, (props, { element }) => {
if (!targetImage || !pinContainer) return; if (!targetImage || !pinContainer) return;
const imgRect = targetImage.getBoundingClientRect(); const imgRect = targetImage.getBoundingClientRect();
const containerRect = pinContainer.getBoundingClientRect(); const containerRect = pinContainer.parentElement.getBoundingClientRect();
// 计算图片左上角相对于容器原始位置的偏移 // 计算图片左上角相对于容器原始位置的偏移
const offsetX = imgRect.left - containerRect.left; const offsetX = imgRect.left - containerRect.left;
@ -103,10 +103,10 @@ customElement("md-pin", { x: 0, y: 0 }, (props, { element }) => {
}); });
return ( return (
<span <div
ref={pinContainer} ref={pinContainer}
class="md-pin-container" class="md-pin-container"
style={{ display: 'inline-block', transform: transformStyle(), 'transform-origin': 'top left' }} style={{ transform: transformStyle(), 'transform-origin': 'top left' }}
> >
<Show when={visible() && targetImage}> <Show when={visible() && targetImage}>
<span <span
@ -128,6 +128,6 @@ customElement("md-pin", { x: 0, y: 0 }, (props, { element }) => {
{toastMessage()} {toastMessage()}
</div> </div>
</Show> </Show>
</span> </div>
); );
}); });

4
src/components/table.tsx
View File

@ -186,7 +186,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
<Show when={props.roll}> <Show when={props.roll}>
<button <button
onClick={handleRoll} onClick={handleRoll}
class="text-gray-500 hover:text-gray-700 flex-shrink-0" class="text-gray-500 hover:text-gray-700 flex-shrink-0 cursor-pointer"
title="随机切换" title="随机切换"
> >
🎲 🎲
@ -197,7 +197,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
{(row, index) => ( {(row, index) => (
<button <button
onClick={() => setActiveTab(index())} onClick={() => setActiveTab(index())}
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] ${ class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer ${
activeTab() === index() activeTab() === index()
? 'text-blue-600 border-b-2 border-blue-600' ? 'text-blue-600 border-b-2 border-blue-600'
: 'text-gray-500 hover:text-gray-700' : 'text-gray-500 hover:text-gray-700'