rookie
1 week ago
committed by
GitHub
commit
91af045923
|
Before Width: | Height: | Size: 173 KiB After Width: | Height: | Size: 25 KiB |
@ -0,0 +1,267 @@ |
||||
<template> |
||||
<ShikigamiSelect |
||||
:showSelectShikigami="state.showSelectShikigami" |
||||
:currentShikigami="state.currentShikigami" |
||||
@closeSelectShikigami="closeSelectShikigami" |
||||
@updateShikigami="updateShikigami" |
||||
/> |
||||
|
||||
<ShikigamiProperty |
||||
:showProperty="state.showProperty" |
||||
:currentShikigami="state.currentShikigami" |
||||
@closeProperty="closeProperty" |
||||
@updateProperty="updateProperty" |
||||
/> |
||||
|
||||
|
||||
<div class="yys-rank"> |
||||
<div class="pvp-mindmap"> |
||||
|
||||
</div> |
||||
<div class="pvp-shikigami-editor"> |
||||
<el-button type="primary" @click="addGroupElement()">{{ t('AddShikigami') }}</el-button> |
||||
|
||||
<div style="max-height: 600px; overflow-y: auto;"> |
||||
<el-space wrap size="large"> |
||||
<draggable :list="props.groups[0].groupInfo" item-key="name" class="body-content"> |
||||
<template #item="{element : position, index:positionIndex}"> |
||||
<div class="group-card"> |
||||
<div class="opt-btn" data-html2canvas-ignore="true"> |
||||
<!-- Add delete button here --> |
||||
<el-button type="danger" icon="Delete" circle @click="removeGroupElement(positionIndex)"/> |
||||
<!-- <el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)"/> --> |
||||
</div> |
||||
<div class="avatar-container"> |
||||
<!-- 头像图片 --> |
||||
<img :src="position.avatar || '/assets/Shikigami/default.png'" |
||||
style="cursor: pointer; vertical-align: bottom;" |
||||
class="avatar-image" |
||||
@click="editShikigami(positionIndex)"/> |
||||
|
||||
<!-- 文字图层 --> |
||||
<!-- <span v-if="position.properties">{{ position.properties.levelRequired }}级 {{ position.properties.skillRequired.join('') }}</span>--> |
||||
</div> |
||||
<div class="opt-foot"> |
||||
<div class="property-wrap"> |
||||
<div style="display: flex; justify-content: center;" data-html2canvas-ignore="true"> |
||||
<span>{{ position.name || "" }}</span> |
||||
</div> |
||||
<div style="display: flex; justify-content: center;" class="bottom" data-html2canvas-ignore="true"> |
||||
<el-button @click="editProperty(positionIndex)">{{ t('editProperties') }} |
||||
</el-button> |
||||
</div> |
||||
<div v-if="position.properties"> |
||||
<div style="display: flex; justify-content: center;"> |
||||
<span |
||||
style="width: 100px;height: 50px;background-color: #666; |
||||
border-radius: 5px; margin-right: 5px; color: white; |
||||
text-align: center; white-space: pre-wrap; display: flex; align-items: center; justify-content: center; flex-direction: column "> |
||||
{{ getYuhunNames(position.properties.yuhun.yuhunSetEffect) }}<br/>{{ |
||||
t('yuhun_target.shortName.' + position.properties.yuhun.target) |
||||
}}·{{ getYuhunPropertyNames(position.properties.yuhun) }} |
||||
</span> |
||||
</div> |
||||
<div> |
||||
<span |
||||
style="display: inline-block; width: 100px; height: 30px; border-radius: 5px; margin-right: 5px; color: red; text-align: center; white-space: pre-wrap; display: flex; align-items: center; justify-content: center; flex-direction: column "> |
||||
{{ position.properties.desc }} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</draggable> |
||||
</el-space> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import {ref, reactive, onMounted} from 'vue'; |
||||
import shikigami from "../data/Shikigami.json" |
||||
import ShikigamiSelect from "@/components/ShikigamiSelect.vue"; |
||||
import ShikigamiProperty from "@/components/ShikigamiProperty.vue"; |
||||
import _ from "lodash"; |
||||
import {useI18n} from "vue-i18n"; |
||||
import draggable from 'vuedraggable'; |
||||
|
||||
|
||||
const {t} = useI18n() |
||||
|
||||
const props = defineProps<{ |
||||
groups: any[]; |
||||
}>(); |
||||
|
||||
const state = reactive({ |
||||
showSelectShikigami: false, |
||||
showProperty: false, |
||||
groupIndex: 0, |
||||
positionIndex: 0, |
||||
currentShikigami: {}, |
||||
previewImage: null, // 用于存储预览图像的数据URL |
||||
previewVisible: false, // 控制预览弹窗的显示状态 |
||||
}); |
||||
|
||||
const addGroupElement = () => { |
||||
props.groups[0].groupInfo.push({}); |
||||
editShikigami(props.groups[0].groupInfo.length - 1); |
||||
}; |
||||
|
||||
const editShikigami = (positionIndex) => { |
||||
// console.log("==== 选择式神 ===", groupIndex, positionIndex); |
||||
state.showSelectShikigami = true; |
||||
state.positionIndex = positionIndex; |
||||
// state.currentShikigami = props.groups[groupIndex].groupInfo[positionIndex]; |
||||
}; |
||||
|
||||
const closeSelectShikigami = () => { |
||||
console.log("close select ===="); |
||||
state.showSelectShikigami = false; |
||||
state.currentShikigami = {}; |
||||
}; |
||||
|
||||
const updateShikigami = (shikigami) => { |
||||
state.showSelectShikigami = false; |
||||
|
||||
const oldProperties = props.groups[0].groupInfo[state.positionIndex].properties; |
||||
props.groups[0].groupInfo[state.positionIndex] = _.cloneDeep(shikigami); |
||||
props.groups[0].groupInfo[state.positionIndex].properties = oldProperties; |
||||
|
||||
}; |
||||
|
||||
const closeProperty = () => { |
||||
state.showProperty = false; |
||||
state.currentShikigami = {}; |
||||
}; |
||||
|
||||
const updateProperty = (property) => { |
||||
state.showProperty = false; |
||||
state.currentShikigami = {}; |
||||
props.groups[0].groupInfo[state.positionIndex].properties = _.cloneDeep(property); |
||||
}; |
||||
|
||||
const editProperty = (positionIndex) => { |
||||
state.showProperty = true; |
||||
state.positionIndex = positionIndex; |
||||
state.currentShikigami = props.groups[0].groupInfo[positionIndex]; |
||||
}; |
||||
|
||||
const getYuhunNames = (yuhunSetEffect) => { |
||||
const names = yuhunSetEffect.map(item => item.name).join(''); |
||||
if (names.length <= 6) { |
||||
return names; |
||||
} else { |
||||
return yuhunSetEffect.map(item => item.shortName || item.name).join(''); |
||||
} |
||||
} |
||||
|
||||
|
||||
const getYuhunPropertyNames = (yuhun) => { |
||||
// 根据条件处理 yuhun.property2 |
||||
let property2Value, property4Value, property6Value; |
||||
if (yuhun.property2.length >= 4) { |
||||
property2Value = 'X'; |
||||
} else { |
||||
property2Value = t('yuhun_property.shortName.' + yuhun.property2[0]); |
||||
} |
||||
|
||||
if (yuhun.property4.length >= 5) { |
||||
property4Value = 'X'; |
||||
} else { |
||||
property4Value = t('yuhun_property.shortName.' + yuhun.property4[0]); |
||||
} |
||||
|
||||
if (yuhun.property6.length >= 5) { |
||||
property6Value = 'X'; |
||||
} else { |
||||
property6Value = t('yuhun_property.shortName.' + yuhun.property6[0]); |
||||
} |
||||
// 构建 propertyNames 字符串 |
||||
const propertyNames = |
||||
property2Value + property4Value + property6Value |
||||
|
||||
return propertyNames; |
||||
} |
||||
|
||||
|
||||
</script> |
||||
<style scoped> |
||||
.yys-rank { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
} |
||||
|
||||
.pvp-mindmap { |
||||
flex: 1; |
||||
border: 2px solid red; |
||||
min-height: 400px; |
||||
min-width: 500px; |
||||
height: 50%; |
||||
width: 80%; |
||||
} |
||||
|
||||
.pvp-shikigami-editor { |
||||
|
||||
border: 2px solid black; |
||||
height: 50%; |
||||
width: 80%; |
||||
min-height: 400px; |
||||
min-width: 500px; |
||||
} |
||||
|
||||
.group-card { |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.avatar-container { |
||||
position: relative; |
||||
width: 100px; |
||||
height: 100px; |
||||
} |
||||
|
||||
.avatar-container span { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 50%; |
||||
transform: translateX(-50%) translateY(50%); |
||||
font-size: 24px; |
||||
color: white; |
||||
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; |
||||
white-space: nowrap; |
||||
padding: 0 8px; |
||||
margin: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.opt-btn { |
||||
position: absolute; |
||||
top: 0px; |
||||
right: 0px; |
||||
z-index: 10; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
/* 当鼠标悬停在容器上时显示按钮 */ |
||||
.group-card:hover .opt-btn { |
||||
opacity: 1; |
||||
} |
||||
|
||||
/* 图片样式 */ |
||||
.avatar-image { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; /* 关键属性：保持比例填充容器 */ |
||||
object-position: center; /* 居中显示 */ |
||||
display: block; |
||||
cursor: pointer; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue