style(md-deck): Use double quotes and shrink-0 class

This commit is contained in:
hyper 2026-06-30 21:35:39 +08:00
parent b3d390dfd5
commit bdc06cc49a
3 changed files with 28 additions and 24 deletions

View File

@ -1,5 +1,5 @@
import { For } from 'solid-js'; import { For } from "solid-js";
import type { DeckStore } from './hooks/deckStore'; import type { DeckStore } from "./hooks/deckStore";
export interface DeckHeaderProps { export interface DeckHeaderProps {
store: DeckStore; store: DeckStore;
@ -18,11 +18,11 @@ export function DeckHeader(props: DeckHeaderProps) {
onClick={() => store.actions.setIsEditing(!store.state.isEditing)} onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${ class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
store.state.isEditing && !store.state.fixed store.state.isEditing && !store.state.fixed
? 'bg-blue-100 text-blue-600' ? "bg-blue-100 text-blue-600"
: 'bg-gray-100 text-gray-600 hover:bg-gray-200' : "bg-gray-100 text-gray-600 hover:bg-gray-200"
}`} }`}
> >
{store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'} {store.state.isEditing ? "✓ 编辑中" : "✏️ 编辑"}
</button> </button>
{/* 导出 PDF 按钮 */} {/* 导出 PDF 按钮 */}
@ -39,10 +39,10 @@ export function DeckHeader(props: DeckHeaderProps) {
{(card, index) => ( {(card, index) => (
<button <button
onClick={() => store.actions.setActiveTab(index())} onClick={() => store.actions.setActiveTab(index())}
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${ class={`font-medium transition-colors shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
store.state.activeTab === index() store.state.activeTab === index()
? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600' ? "bg-blue-100 text-blue-600 border-b-2 border-blue-600"
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-100' : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
}`} }`}
> >
{card.label || card.name || `Card ${index() + 1}`} {card.label || card.name || `Card ${index() + 1}`}

View File

@ -1,10 +1,10 @@
import { For } from 'solid-js'; import { For } from "solid-js";
import type { DeckStore } from '../hooks/deckStore'; import type { DeckStore } from "../hooks/deckStore";
export interface DataEditorPanelProps { export interface DataEditorPanelProps {
activeTab: number; activeTab: number;
cards: DeckStore['state']['cards']; cards: DeckStore["state"]["cards"];
updateCardData: DeckStore['actions']['updateCardData']; updateCardData: DeckStore["actions"]["updateCardData"];
} }
/** /**
@ -12,18 +12,22 @@ export interface DataEditorPanelProps {
*/ */
export function DataEditorPanel(props: DataEditorPanelProps) { export function DataEditorPanel(props: DataEditorPanelProps) {
return ( return (
<div class="w-64 flex-shrink-0"> <div class="w-64 shrink-0">
<h3 class="font-bold mb-2"></h3> <h3 class="font-bold mb-2"></h3>
<div class="space-y-2 max-h-96 overflow-y-auto"> <div class="space-y-2 max-h-96 overflow-y-auto">
<For each={Object.keys(props.cards[props.activeTab] || {})}> <For each={Object.keys(props.cards[props.activeTab] || {})}>
{(key) => ( {(key) => (
<div> <div>
<label class="block text-sm font-medium text-gray-700">{key}</label> <label class="block text-sm font-medium text-gray-700">
{key}
</label>
<textarea <textarea
class="w-full border border-gray-300 rounded px-2 py-1 text-sm" class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
rows={3} rows={3}
value={props.cards[props.activeTab]?.[key] || ''} value={props.cards[props.activeTab]?.[key] || ""}
onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)} onInput={(e) =>
props.updateCardData(props.activeTab, key, e.target.value)
}
/> />
</div> </div>
)} )}

View File

@ -55,7 +55,7 @@ function LayerEditorPanel(props: LayerEditorPanelProps) {
}); });
return ( return (
<div class="w-64 flex-shrink-0"> <div class="w-64 shrink-0">
<h3 class="font-bold mb-2 mt-0"> <h3 class="font-bold mb-2 mt-0">
({side() === "front" ? "正面" : "背面"}) ({side() === "front" ? "正面" : "背面"})
</h3> </h3>