From ffc5e3d0fc38bf709e140e8c156140efba9165c5 Mon Sep 17 00:00:00 2001 From: Poker Design Developer Date: Wed, 3 Jun 2026 22:48:14 +0800 Subject: [PATCH] feat: DesignPanel switches between front and back design --- frontend/src/components/DesignPanel.vue | 353 +++++++++++++++--------- 1 file changed, 224 insertions(+), 129 deletions(-) diff --git a/frontend/src/components/DesignPanel.vue b/frontend/src/components/DesignPanel.vue index 0460a9f..0784acb 100644 --- a/frontend/src/components/DesignPanel.vue +++ b/frontend/src/components/DesignPanel.vue @@ -1,137 +1,201 @@ @@ -142,6 +206,9 @@ import { SUITS, SUIT_TEXT, LAYOUT_POSITIONS, isJoker } from '@/utils/cardLayout' const store = useProjectStore() const design = computed(() => store.effectiveDesign) +const backDesign = computed(() => store.effectiveBackDesign) +const isBack = computed(() => store.currentCard === 'back') + const override = computed(() => { if (!store.project || !store.currentCard) return null return (store.project.card_overrides || {})[store.currentCard] || null @@ -152,6 +219,7 @@ const suits = SUITS const suitSymbol = (s) => SUIT_TEXT[s] const suitLabel = (s) => ({ spade: '黑桃', heart: '红桃', club: '梅花', diamond: '方块' })[s] +// ===== 正面相关 ===== const bgFileInput = ref(null) function uploadBg() { bgFileInput.value?.click() } function onBgFile(e) { @@ -159,7 +227,6 @@ function onBgFile(e) { if (!f) return const reader = new FileReader() reader.onload = (ev) => { - // 这里只把 dataURL 临时存到 design；正式应上传到后端 store.patchDesign('background_image', ev.target.result) } reader.readAsDataURL(f) @@ -190,7 +257,7 @@ const isNumberCard = computed(() => { }) const showImageOffset = computed(() => { - return isJoker(store.currentCard) || store.currentCard === 'back' + return isJoker(store.currentCard) }) const isFaceCard = computed(() => { @@ -206,8 +273,6 @@ const showSymmetryMode = computed(() => { const symmetryMode = computed(() => design.value.symmetry_mode || 'flip') function setSymmetryMode(v) { - // JQK 和大小王都存到 design 里（因为它们是单牌设置） - // 但 design 是合并后的，所以用 patchCardOverride 写到当前牌更干净 store.patchCardOverride(store.currentCard, 'symmetry_mode', v) } @@ -251,6 +316,36 @@ function setOffset(i, key, val) { function resetLayout() { store.resetNumberLayout(String(selectedRank.value)) } + +// ===== 背面相关 ===== +const backImageInput = ref(null) +function uploadBackImage() { backImageInput.value?.click() } +function onBackImageFile(e) { + const f = e.target.files[0] + if (!f) return + const reader = new FileReader() + reader.onload = (ev) => { + store.patchBackDesign('image', ev.target.result) + } + reader.readAsDataURL(f) +} + +function setBackBgColor(v) { store.patchBackDesign('background_color', v) } +function setBackDesign(path, v) { store.patchBackDesign(path, v) } + +function backImageOffsetVal(key) { + const v = Number(backDesign.value[key]) + if (Number.isNaN(v)) return key === 'image_scale' ? 1 : 0 + return v +} +function setBackImageOffset(key, val) { + store.patchBackDesign(key, parseFloat(val)) +} +function resetBackImageOffset() { + store.patchBackDesign('image_dx', 0) + store.patchBackDesign('image_dy', 0) + store.patchBackDesign('image_scale', 1) +}