Implement asset upload API and utility functions
- Add Asset and CardLayer model updates - Create asset upload API endpoints - Add AssetUploadDialog component - Create card layout algorithms - Implement symmetry generation utils - Add template configurations
This commit is contained in:
Poker Design Developer
26
frontend/src/api/asset.js
Normal file
26
frontend/src/api/asset.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const API_BASE = '/api'
|
||||
|
||||
export async function getAssets(projectId) {
|
||||
const response = await axios.get(`${API_BASE}/projects/${projectId}/assets/`)
|
||||
return response.data
|
||||
}
|
||||
|
||||
export async function uploadAsset(projectId, file, assetType, assetKey) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('asset_type', assetType)
|
||||
formData.append('asset_key', assetKey)
|
||||
|
||||
const response = await axios.post(`${API_BASE}/projects/${projectId}/assets/`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
|
||||
export async function deleteAsset(projectId, assetId) {
|
||||
await axios.delete(`${API_BASE}/projects/${projectId}/assets/${assetId}/`)
|
||||
}
|
||||
154
frontend/src/components/AssetUploadDialog.vue
Normal file
154
frontend/src/components/AssetUploadDialog.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="上传素材"
|
||||
width="500px"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="素材类型">
|
||||
<el-select v-model="form.assetType" placeholder="选择素材类型">
|
||||
<el-option label="花色图案" value="suit_symbol" />
|
||||
<el-option label="JQK人像" value="face_card" />
|
||||
<el-option label="大小王" value="joker" />
|
||||
<el-option label="背面图案" value="back" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="素材标识">
|
||||
<el-input
|
||||
v-model="form.assetKey"
|
||||
placeholder="如：spade, heart-J, big_joker"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选择文件">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
drag
|
||||
:auto-upload="false"
|
||||
:on-change="handleFileChange"
|
||||
:limit="1"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
拖拽文件到此处或<em>点击上传</em>
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
支持 PNG, JPG, SVG 格式
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="uploading"
|
||||
:disabled="!canSubmit"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
上传
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { UploadFilled } from '@element-plus/icons-vue'
|
||||
import { uploadAsset } from '@/api/asset'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
projectId: String
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'upload-success'])
|
||||
const dialogVisible = ref(props.modelValue)
|
||||
const upload = ref(null)
|
||||
const uploading = ref(false)
|
||||
const selectedFile = ref(null)
|
||||
|
||||
const form = ref({
|
||||
assetType: 'suit_symbol',
|
||||
assetKey: '',
|
||||
file: null
|
||||
})
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
return form.value.assetKey && selectedFile.value
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
dialogVisible.value = val
|
||||
})
|
||||
|
||||
watch(dialogVisible, (val) => {
|
||||
emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
function handleFileChange(file) {
|
||||
selectedFile.value = file.raw
|
||||
}
|
||||
|
||||
function handleExceed() {
|
||||
ElMessage.warning('只能上传一个文件')
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!canSubmit.value) {
|
||||
ElMessage.warning('请填写完整信息')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
uploading.value = true
|
||||
await uploadAsset(
|
||||
props.projectId,
|
||||
selectedFile.value,
|
||||
form.value.assetType,
|
||||
form.value.assetKey
|
||||
)
|
||||
|
||||
ElMessage.success('上传成功')
|
||||
emit('upload-success')
|
||||
handleClose()
|
||||
} catch (error) {
|
||||
ElMessage.error('上传失败')
|
||||
console.error(error)
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
dialogVisible.value = false
|
||||
emit('update:modelValue', false)
|
||||
// Reset form
|
||||
form.value = {
|
||||
assetType: 'suit_symbol',
|
||||
assetKey: '',
|
||||
file: null
|
||||
}
|
||||
selectedFile.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-upload__text {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-upload__tip {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
108
frontend/src/templates/index.js
Normal file
108
frontend/src/templates/index.js
Normal file
@@ -0,0 +1,108 @@
|
||||
const templates = [
|
||||
{
|
||||
id: 'classic',
|
||||
name: '经典风格',
|
||||
description: '标准扑克牌设计，传统花色和字体',
|
||||
colors: {
|
||||
spade: '#000000',
|
||||
heart: '#FF0000',
|
||||
club: '#000000',
|
||||
diamond: '#FF0000',
|
||||
background: '#FFFFFF'
|
||||
},
|
||||
defaultAssets: {
|
||||
suitSymbols: {
|
||||
spade: '/assets/default/spade.svg',
|
||||
heart: '/assets/default/heart.svg',
|
||||
club: '/assets/default/club.svg',
|
||||
diamond: '/assets/default/diamond.svg'
|
||||
},
|
||||
numberFont: {
|
||||
family: 'Times New Roman',
|
||||
size: 48,
|
||||
color: '#000000'
|
||||
}
|
||||
},
|
||||
features: ['标准边框', '传统字体', '对称布局']
|
||||
},
|
||||
{
|
||||
id: 'modern',
|
||||
name: '现代简约',
|
||||
description: '扁平化设计，简洁线条',
|
||||
colors: {
|
||||
spade: '#333333',
|
||||
heart: '#E53935',
|
||||
club: '#333333',
|
||||
diamond: '#E53935',
|
||||
background: '#FAFAFA'
|
||||
},
|
||||
defaultAssets: {
|
||||
suitSymbols: {
|
||||
spade: '/assets/modern/spade.svg',
|
||||
heart: '/assets/modern/heart.svg',
|
||||
club: '/assets/modern/club.svg',
|
||||
diamond: '/assets/modern/diamond.svg'
|
||||
},
|
||||
numberFont: {
|
||||
family: 'Arial',
|
||||
size: 42,
|
||||
color: '#333333'
|
||||
}
|
||||
},
|
||||
features: ['无边框', '简约字体', '清爽设计']
|
||||
},
|
||||
{
|
||||
id: 'cartoon',
|
||||
name: '卡通风格',
|
||||
description: 'Q版可爱人像，圆润花色图案',
|
||||
colors: {
|
||||
spade: '#4A4A4A',
|
||||
heart: '#FF6B9D',
|
||||
club: '#4A4A4A',
|
||||
diamond: '#FF6B9D',
|
||||
background: '#FFF9E6'
|
||||
},
|
||||
defaultAssets: {
|
||||
suitSymbols: {
|
||||
spade: '/assets/cartoon/spade.svg',
|
||||
heart: '/assets/cartoon/heart.svg',
|
||||
club: '/assets/cartoon/club.svg',
|
||||
diamond: '/assets/cartoon/diamond.svg'
|
||||
},
|
||||
numberFont: {
|
||||
family: 'Comic Sans MS',
|
||||
size: 40,
|
||||
color: '#4A4A4A'
|
||||
}
|
||||
},
|
||||
features: ['圆润边框', '可爱字体', '彩色设计']
|
||||
},
|
||||
{
|
||||
id: 'vintage',
|
||||
name: '复古风格',
|
||||
description: '复古色调和纹理，装饰性边框',
|
||||
colors: {
|
||||
spade: '#2C1810',
|
||||
heart: '#8B4513',
|
||||
club: '#2C1810',
|
||||
diamond: '#8B4513',
|
||||
background: '#F5DEB3'
|
||||
},
|
||||
defaultAssets: {
|
||||
suitSymbols: {
|
||||
spade: '/assets/vintage/spade.svg',
|
||||
heart: '/assets/vintage/heart.svg',
|
||||
club: '/assets/vintage/club.svg',
|
||||
diamond: '/assets/vintage/diamond.svg'
|
||||
},
|
||||
numberFont: {
|
||||
family: 'Georgia',
|
||||
size: 44,
|
||||
color: '#2C1810'
|
||||
}
|
||||
},
|
||||
features: ['装饰边框', '复古字体', '纹理背景']
|
||||
}
|
||||
]
|
||||
|
||||
export default templates
|
||||
128
frontend/src/utils/cardLayout.js
Normal file
128
frontend/src/utils/cardLayout.js
Normal file
@@ -0,0 +1,128 @@
|
||||
const LAYOUT_POSITIONS = {
|
||||
1: [
|
||||
{ x: 0.5, y: 0.5 }
|
||||
],
|
||||
2: [
|
||||
{ x: 0.5, y: 0.25 },
|
||||
{ x: 0.5, y: 0.75 }
|
||||
],
|
||||
3: [
|
||||
{ x: 0.5, y: 0.2 },
|
||||
{ x: 0.5, y: 0.5 },
|
||||
{ x: 0.5, y: 0.8 }
|
||||
],
|
||||
4: [
|
||||
{ x: 0.3, y: 0.25 },
|
||||
{ x: 0.7, y: 0.25 },
|
||||
{ x: 0.3, y: 0.75 },
|
||||
{ x: 0.7, y: 0.75 }
|
||||
],
|
||||
5: [
|
||||
{ x: 0.3, y: 0.2 },
|
||||
{ x: 0.7, y: 0.2 },
|
||||
{ x: 0.5, y: 0.5 },
|
||||
{ x: 0.3, y: 0.8 },
|
||||
{ x: 0.7, y: 0.8 }
|
||||
],
|
||||
6: [
|
||||
{ x: 0.3, y: 0.2 },
|
||||
{ x: 0.7, y: 0.2 },
|
||||
{ x: 0.3, y: 0.5 },
|
||||
{ x: 0.7, y: 0.5 },
|
||||
{ x: 0.3, y: 0.8 },
|
||||
{ x: 0.7, y: 0.8 }
|
||||
],
|
||||
7: [
|
||||
{ x: 0.3, y: 0.15 },
|
||||
{ x: 0.7, y: 0.15 },
|
||||
{ x: 0.5, y: 0.35 },
|
||||
{ x: 0.3, y: 0.55 },
|
||||
{ x: 0.7, y: 0.55 },
|
||||
{ x: 0.3, y: 0.85 },
|
||||
{ x: 0.7, y: 0.85 }
|
||||
],
|
||||
8: [
|
||||
{ x: 0.3, y: 0.15 },
|
||||
{ x: 0.7, y: 0.15 },
|
||||
{ x: 0.5, y: 0.35 },
|
||||
{ x: 0.3, y: 0.55 },
|
||||
{ x: 0.7, y: 0.55 },
|
||||
{ x: 0.5, y: 0.65 },
|
||||
{ x: 0.3, y: 0.85 },
|
||||
{ x: 0.7, y: 0.85 }
|
||||
],
|
||||
9: [
|
||||
{ x: 0.3, y: 0.15 },
|
||||
{ x: 0.7, y: 0.15 },
|
||||
{ x: 0.5, y: 0.35 },
|
||||
{ x: 0.2, y: 0.5 },
|
||||
{ x: 0.5, y: 0.5 },
|
||||
{ x: 0.8, y: 0.5 },
|
||||
{ x: 0.5, y: 0.65 },
|
||||
{ x: 0.3, y: 0.85 },
|
||||
{ x: 0.7, y: 0.85 }
|
||||
],
|
||||
10: [
|
||||
{ x: 0.3, y: 0.15 },
|
||||
{ x: 0.7, y: 0.15 },
|
||||
{ x: 0.3, y: 0.35 },
|
||||
{ x: 0.7, y: 0.35 },
|
||||
{ x: 0.5, y: 0.5 },
|
||||
{ x: 0.3, y: 0.65 },
|
||||
{ x: 0.7, y: 0.65 },
|
||||
{ x: 0.3, y: 0.85 },
|
||||
{ x: 0.7, y: 0.85 }
|
||||
]
|
||||
}
|
||||
|
||||
export function calculateSuitPositions(rank, cardWidth, cardHeight, symbolSize = 60) {
|
||||
const positions = LAYOUT_POSITIONS[rank] || LAYOUT_POSITIONS[1]
|
||||
|
||||
return positions.map(pos => ({
|
||||
x: pos.x * cardWidth - symbolSize / 2,
|
||||
y: pos.y * cardHeight - symbolSize / 2,
|
||||
width: symbolSize,
|
||||
height: symbolSize
|
||||
}))
|
||||
}
|
||||
|
||||
export function getCornerPositions(cardWidth, cardHeight) {
|
||||
return {
|
||||
topLeft: { x: 50, y: 50 },
|
||||
topRight: { x: cardWidth - 100, y: 50 },
|
||||
bottomLeft: { x: 50, y: cardHeight - 100 },
|
||||
bottomRight: { x: cardWidth - 100, y: cardHeight - 100 }
|
||||
}
|
||||
}
|
||||
|
||||
export function getSuitSymbol(suit) {
|
||||
const symbols = {
|
||||
spade: '♠',
|
||||
heart: '♥',
|
||||
club: '♣',
|
||||
diamond: '♦'
|
||||
}
|
||||
return symbols[suit] || '♠'
|
||||
}
|
||||
|
||||
export function getSuitColor(suit, templateColors) {
|
||||
if (templateColors && templateColors[suit]) {
|
||||
return templateColors[suit]
|
||||
}
|
||||
|
||||
const colors = {
|
||||
spade: '#000000',
|
||||
heart: '#FF0000',
|
||||
club: '#000000',
|
||||
diamond: '#FF0000'
|
||||
}
|
||||
return colors[suit] || '#000000'
|
||||
}
|
||||
|
||||
export function isRedSuit(suit) {
|
||||
return suit === 'heart' || suit === 'diamond'
|
||||
}
|
||||
|
||||
export function isBlackSuit(suit) {
|
||||
return suit === 'spade' || suit === 'club'
|
||||
}
|
||||
81
frontend/src/utils/symmetry.js
Normal file
81
frontend/src/utils/symmetry.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import { fabric } from 'fabric'
|
||||
|
||||
export async function createSymmetricalImage(originalImage, canvasWidth, canvasHeight) {
|
||||
const imgWidth = originalImage.width
|
||||
const imgHeight = originalImage.height
|
||||
const halfHeight = imgHeight / 2
|
||||
|
||||
const topHalf = new fabric.Image(originalImage, {
|
||||
clipPath: new fabric.Rect({
|
||||
width: imgWidth,
|
||||
height: halfHeight,
|
||||
originX: 'left',
|
||||
originY: 'top'
|
||||
}),
|
||||
top: 0,
|
||||
scaleX: canvasWidth / imgWidth,
|
||||
scaleY: (canvasHeight / 2) / halfHeight
|
||||
})
|
||||
|
||||
const bottomHalf = new fabric.Image(originalImage, {
|
||||
clipPath: new fabric.Rect({
|
||||
width: imgWidth,
|
||||
height: halfHeight,
|
||||
originX: 'left',
|
||||
originY: 'top',
|
||||
top: halfHeight
|
||||
}),
|
||||
top: canvasHeight / 2,
|
||||
scaleX: canvasWidth / imgWidth,
|
||||
scaleY: -(canvasHeight / 2) / halfHeight,
|
||||
flipY: true
|
||||
})
|
||||
|
||||
const group = new fabric.Group([topHalf, bottomHalf], {
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: canvasWidth,
|
||||
height: canvasHeight
|
||||
})
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
export async function loadAndProcessImage(imageUrl) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fabric.Image.fromURL(imageUrl, (img) => {
|
||||
if (!img) {
|
||||
reject(new Error('Failed to load image'))
|
||||
return
|
||||
}
|
||||
resolve(img)
|
||||
}, { crossOrigin: 'anonymous' })
|
||||
})
|
||||
}
|
||||
|
||||
export function applySymmetryToFaceCard(canvas, imageUrl, cardWidth, cardHeight) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fabric.Image.fromURL(imageUrl, async (originalImage) => {
|
||||
if (!originalImage) {
|
||||
reject(new Error('Failed to load image'))
|
||||
return
|
||||
}
|
||||
|
||||
const symmetricalGroup = await createSymmetricalImage(
|
||||
originalImage.getElement(),
|
||||
cardWidth - 100,
|
||||
cardHeight - 100
|
||||
)
|
||||
|
||||
symmetricalGroup.set({
|
||||
left: 50,
|
||||
top: 50,
|
||||
selectable: true
|
||||
})
|
||||
|
||||
canvas.add(symmetricalGroup)
|
||||
canvas.renderAll()
|
||||
resolve(symmetricalGroup)
|
||||
}, { crossOrigin: 'anonymous' })
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user