feat: 添加阴阳师和技能选择器,完成资产选择器统一架构迁移
- 新增阴阳师和阴阳师技能资产类型配置 - 添加 54 张阴阳师和技能图片资源 - 将式神和御魂选择器迁移到统一的 assetSelector 架构 - 删除 10 个冗余的独立节点和面板组件 - 统一使用 GenericImageSelector 通用选择器 - 完全实现配置驱动的设计理念 - 减少约 800+ 行重复代码 所有资产类型(式神/御魂/阴阳师/技能)现在都通过单一的 assetSelector 节点和通用选择器处理
BIN
public/assets/downloaded_images/hero_10_10.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
public/assets/downloaded_images/hero_10_skill_1003.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_10_skill_1004.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_10_skill_1005.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_10_skill_1007.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_10_skill_1008.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_10_skill_1009.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
public/assets/downloaded_images/hero_10_skill_1011.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
public/assets/downloaded_images/hero_10_skill_9001.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_11_11.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
public/assets/downloaded_images/hero_11_skill_1101.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
public/assets/downloaded_images/hero_11_skill_1102.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_11_skill_1103.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_11_skill_1104.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
public/assets/downloaded_images/hero_11_skill_1105.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_11_skill_1107.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_11_skill_1111.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_11_skill_9011.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
public/assets/downloaded_images/hero_12_12.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
public/assets/downloaded_images/hero_12_skill_1201.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
public/assets/downloaded_images/hero_12_skill_1202.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
public/assets/downloaded_images/hero_12_skill_1203.png
Normal file
|
After Width: | Height: | Size: 5.5 KiB |
BIN
public/assets/downloaded_images/hero_12_skill_1204.png
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/assets/downloaded_images/hero_12_skill_1205.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/assets/downloaded_images/hero_12_skill_1206.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/assets/downloaded_images/hero_12_skill_1207.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/assets/downloaded_images/hero_12_skill_9021.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
public/assets/downloaded_images/hero_13_13.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_13_skill_1301.png
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/assets/downloaded_images/hero_13_skill_1302.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
public/assets/downloaded_images/hero_13_skill_1303.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
public/assets/downloaded_images/hero_13_skill_1304.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
public/assets/downloaded_images/hero_13_skill_1305.png
Normal file
|
After Width: | Height: | Size: 5.6 KiB |
BIN
public/assets/downloaded_images/hero_13_skill_9031.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
public/assets/downloaded_images/hero_13_skill_9032.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/assets/downloaded_images/hero_13_skill_9033.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/assets/downloaded_images/hero_15_15.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
public/assets/downloaded_images/hero_15_skill_1501.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
public/assets/downloaded_images/hero_15_skill_1502.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
public/assets/downloaded_images/hero_15_skill_1503.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_15_skill_1504.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
public/assets/downloaded_images/hero_15_skill_1505.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_15_skill_1506.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_15_skill_1507.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
public/assets/downloaded_images/hero_15_skill_1508.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/assets/downloaded_images/hero_16_16.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/assets/downloaded_images/hero_16_skill_1601.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
public/assets/downloaded_images/hero_16_skill_1602.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_16_skill_1603.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_16_skill_1604.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_16_skill_1605.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_16_skill_1606.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_16_skill_1607.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/downloaded_images/hero_16_skill_1608.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
@@ -1,7 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useDialogs } from '../ts/useDialogs'
|
||||
import ShikigamiSelect from './flow/nodes/yys/ShikigamiSelect.vue'
|
||||
import YuhunSelect from './flow/nodes/yys/YuhunSelect.vue'
|
||||
import PropertySelect from './flow/nodes/yys/PropertySelect.vue'
|
||||
import GenericImageSelector from './common/GenericImageSelector.vue'
|
||||
import { useFilesStore } from '../ts/useStore'
|
||||
@@ -11,26 +9,6 @@ const filesStore = useFilesStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShikigamiSelect
|
||||
v-if="dialogs.shikigami.show"
|
||||
:showSelectShikigami="dialogs.shikigami.show"
|
||||
:currentShikigami="dialogs.shikigami.data"
|
||||
@closeSelectShikigami="closeDialog('shikigami')"
|
||||
@updateShikigami="data => {
|
||||
dialogs.shikigami.callback?.(data);
|
||||
closeDialog('shikigami');
|
||||
}"
|
||||
/>
|
||||
<YuhunSelect
|
||||
v-if="dialogs.yuhun.show"
|
||||
:showSelectYuhun="dialogs.yuhun.show"
|
||||
:currentYuhun="dialogs.yuhun.data"
|
||||
@closeSelectYuhun="closeDialog('yuhun')"
|
||||
@updateYuhun="data => {
|
||||
dialogs.yuhun.callback?.(data);
|
||||
closeDialog('yuhun');
|
||||
}"
|
||||
/>
|
||||
<PropertySelect
|
||||
v-if="dialogs.property.show"
|
||||
:showPropertySelect="dialogs.property.show"
|
||||
|
||||
@@ -71,19 +71,21 @@ const componentGroups = [
|
||||
{
|
||||
id: 'shikigami-select',
|
||||
name: '式神选择器',
|
||||
type: 'shikigamiSelect',
|
||||
type: 'assetSelector',
|
||||
description: '用于选择式神的组件',
|
||||
data: {
|
||||
shikigami: { name: '未选择式神', avatar: '', rarity: '' }
|
||||
assetLibrary: 'shikigami',
|
||||
selectedAsset: null
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'yuhun-select',
|
||||
name: '御魂选择器',
|
||||
type: 'yuhunSelect',
|
||||
type: 'assetSelector',
|
||||
description: '用于选择御魂的组件',
|
||||
data: {
|
||||
yuhun: { name: '未选择御魂', avatar: '', type: '' }
|
||||
assetLibrary: 'yuhun',
|
||||
selectedAsset: null
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -113,6 +115,26 @@ const componentGroups = [
|
||||
damageType: "balanced"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'onmyoji-select',
|
||||
name: '阴阳师选择器',
|
||||
type: 'assetSelector',
|
||||
description: '用于选择阴阳师的组件',
|
||||
data: {
|
||||
assetLibrary: 'onmyoji',
|
||||
selectedAsset: null
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'onmyoji-skill-select',
|
||||
name: '阴阳师技能选择器',
|
||||
type: 'assetSelector',
|
||||
description: '用于选择阴阳师技能的组件',
|
||||
data: {
|
||||
assetLibrary: 'onmyojiSkill',
|
||||
selectedAsset: null
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -69,8 +69,6 @@ import '@logicflow/extension/es/index.css';
|
||||
import { translateEdgeData, translateNodeData } from '@logicflow/core/es/keyboard/shortcut';
|
||||
|
||||
import { register } from '@logicflow/vue-node-registry';
|
||||
import ShikigamiSelectNode from './nodes/yys/ShikigamiSelectNode.vue';
|
||||
import YuhunSelectNode from './nodes/yys/YuhunSelectNode.vue';
|
||||
import PropertySelectNode from './nodes/yys/PropertySelectNode.vue';
|
||||
import ImageNode from './nodes/common/ImageNode.vue';
|
||||
import AssetSelectorNode from './nodes/common/AssetSelectorNode.vue';
|
||||
@@ -666,8 +664,6 @@ function distributeSelected(type: DistributeType) {
|
||||
|
||||
// 注册自定义节点
|
||||
function registerNodes(lfInstance: LogicFlow) {
|
||||
register({ type: 'shikigamiSelect', component: ShikigamiSelectNode }, lfInstance);
|
||||
register({ type: 'yuhunSelect', component: YuhunSelectNode }, lfInstance);
|
||||
register({ type: 'propertySelect', component: PropertySelectNode }, lfInstance);
|
||||
|
||||
register({ type: 'imageNode', component: ImageNode }, lfInstance);
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import ShikigamiPanel from './panels/ShikigamiPanel.vue';
|
||||
import YuhunPanel from './panels/YuhunPanel.vue';
|
||||
import PropertyRulePanel from './panels/PropertyRulePanel.vue';
|
||||
import ImagePanel from './panels/ImagePanel.vue';
|
||||
import TextPanel from './panels/TextPanel.vue';
|
||||
@@ -32,8 +30,6 @@ const nodeType = computed(() => {
|
||||
const activeTab = ref('game');
|
||||
|
||||
const panelMap: Record<string, any> = {
|
||||
shikigamiSelect: ShikigamiPanel,
|
||||
yuhunSelect: YuhunPanel,
|
||||
propertySelect: PropertyRulePanel,
|
||||
imageNode: ImagePanel,
|
||||
textNode: TextPanel,
|
||||
|
||||
@@ -240,7 +240,7 @@
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { CirclePlus } from '@element-plus/icons-vue';
|
||||
import YuhunSelect from "@/components/flow/nodes/yys/YuhunSelect.vue";
|
||||
// import YuhunSelect from "@/components/flow/nodes/yys/YuhunSelect.vue";
|
||||
|
||||
// 获取当前的 i18n 实例
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="show"
|
||||
title="请选择式神"
|
||||
>
|
||||
<span>当前选择式神:{{ props.currentShikigami.name }}</span>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="searchText"
|
||||
style="width: 200px; margin-right: 10px;"
|
||||
/>
|
||||
</div>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
editable
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(rarity, index) in rarityLevels"
|
||||
:key="index"
|
||||
:label="rarity.label"
|
||||
:name="rarity.name"
|
||||
>
|
||||
<div style="max-height: 600px; overflow-y: auto;">
|
||||
<el-space wrap size="large">
|
||||
<div style="display: flex;flex-direction: column;justify-content: center" v-for="i in filterShikigamiByRarityAndSearch(rarity.name,searchText)" :key="i.name">
|
||||
<el-button
|
||||
style="width: 100px; height: 100px;"
|
||||
@click.stop="confirm(i)"
|
||||
>
|
||||
<img :src="i.avatar" style="width: 99px; height: 99px;">
|
||||
</el-button>
|
||||
<span style="text-align: center; display: block;">{{i.name}}</span>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import shikigamiData from "../../../../data/Shikigami.json"
|
||||
|
||||
interface Shikigami {
|
||||
name: string
|
||||
avatar: string
|
||||
rarity: string
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
currentShikigami: {
|
||||
type: Object as () => Shikigami,
|
||||
default: () => ({ name: '未选择式神', avatar: '', rarity: '' })
|
||||
},
|
||||
showSelectShikigami: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['closeSelectShikigami', 'updateShikigami'])
|
||||
|
||||
const show = computed({
|
||||
get() {
|
||||
return props.showSelectShikigami
|
||||
},
|
||||
set(value) {
|
||||
if (!value) {
|
||||
emit('closeSelectShikigami')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const searchText = ref('')
|
||||
const activeName = ref('ALL')
|
||||
|
||||
const rarityLevels = [
|
||||
{ label: "全部", name: "ALL" },
|
||||
{ label: "UR", name: "UR" },
|
||||
{ label: "SP", name: "SP" },
|
||||
{ label: "SSR", name: "SSR" },
|
||||
{ label: "SR", name: "SR" },
|
||||
{ label: "R", name: "R" },
|
||||
{ label: "N", name: "N" },
|
||||
{ label: "联动", name: "L" },
|
||||
{ label: "呱太", name: "G" },
|
||||
]
|
||||
|
||||
const handleClick = (tab: TabsPaneContext) => {
|
||||
console.log('Tab clicked:', tab)
|
||||
}
|
||||
|
||||
const confirm = (shikigami: Shikigami) => {
|
||||
emit('updateShikigami', shikigami)
|
||||
searchText.value = ''
|
||||
activeName.value = 'ALL'
|
||||
}
|
||||
|
||||
// 修改后的过滤函数
|
||||
const filterShikigamiByRarityAndSearch = (rarity: string, search: string) => {
|
||||
let filteredList = shikigamiData;
|
||||
if (rarity.toLowerCase() !== 'all') {
|
||||
filteredList = filteredList.filter(item =>
|
||||
item.rarity.toLowerCase() === rarity.toLowerCase()
|
||||
);
|
||||
}
|
||||
if (search.trim() !== '') {
|
||||
return filteredList.filter(item =>
|
||||
item.name.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
}
|
||||
return filteredList;
|
||||
}
|
||||
</script>
|
||||
@@ -1,94 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, inject, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { toTextStyle } from '@/ts/nodeStyle';
|
||||
import { useNodeAppearance } from '@/ts/useNodeAppearance';
|
||||
|
||||
const currentShikigami = ref({ name: '未选择式神', avatar: '', rarity: '' });
|
||||
const getNode = inject('getNode') as (() => any) | undefined;
|
||||
const zIndex = ref(1);
|
||||
let intervalId: number | null = null;
|
||||
|
||||
// 使用轮询方式定期更新 zIndex
|
||||
onMounted(() => {
|
||||
const node = getNode?.();
|
||||
if (node) {
|
||||
zIndex.value = node.zIndex ?? 1;
|
||||
|
||||
// 每 100ms 检查一次 zIndex 是否变化
|
||||
intervalId = window.setInterval(() => {
|
||||
const currentZIndex = node.zIndex ?? 1;
|
||||
if (zIndex.value !== currentZIndex) {
|
||||
zIndex.value = currentZIndex;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (intervalId !== null) {
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
});
|
||||
|
||||
const { containerStyle, textStyle } = useNodeAppearance({
|
||||
onPropsChange(props) {
|
||||
if (props.shikigami) {
|
||||
currentShikigami.value = props.shikigami;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const mergedContainerStyle = computed(() => ({ ...containerStyle.value, boxSizing: 'border-box' }));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="node-content" :style="mergedContainerStyle">
|
||||
<div class="zindex-badge">{{ zIndex }}</div>
|
||||
<img
|
||||
v-if="currentShikigami.avatar"
|
||||
:src="currentShikigami.avatar"
|
||||
:alt="currentShikigami.name"
|
||||
class="shikigami-image"
|
||||
draggable="false"
|
||||
/>
|
||||
<div v-else class="placeholder-text" :style="textStyle">点击选择式神</div>
|
||||
<div class="name-text" :style="textStyle">{{ currentShikigami.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.node-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.zindex-badge {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
background: rgba(64, 158, 255, 0.9);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
.shikigami-image {
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.placeholder-text {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
.name-text {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="show"
|
||||
title="请选择御魂"
|
||||
>
|
||||
<span>当前选择御魂:{{ props.currentYuhun.name }}</span>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="searchText"
|
||||
style="width: 200px; margin-right: 10px;"
|
||||
/>
|
||||
</div>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
editable
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(type, index) in yuhunTypes"
|
||||
:key="index"
|
||||
:label="type.label"
|
||||
:name="type.name"
|
||||
>
|
||||
<div style="max-height: 600px; overflow-y: auto;">
|
||||
<el-space wrap size="large">
|
||||
<div style="display: flex;flex-direction: column;justify-content: center" v-for="i in filterYuhunByTypeAndSearch(type.name, searchText)" :key="i.name">
|
||||
<el-button
|
||||
style="width: 100px; height: 100px;"
|
||||
@click.stop="confirm(i)"
|
||||
>
|
||||
<img :src="i.avatar" style="width: 99px; height: 99px;">
|
||||
</el-button>
|
||||
<span style="text-align: center; display: block;">{{i.name}}</span>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import yuhunData from "../../../../data/Yuhun.json"
|
||||
|
||||
interface Yuhun {
|
||||
name: string
|
||||
shortName?: string
|
||||
type: string
|
||||
avatar: string
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
currentYuhun: {
|
||||
type: Object as () => Yuhun,
|
||||
default: () => ({ name: '未选择御魂', type: '', avatar: '' })
|
||||
},
|
||||
showSelectYuhun: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['closeSelectYuhun', 'updateYuhun'])
|
||||
|
||||
const show = computed({
|
||||
get() {
|
||||
return props.showSelectYuhun
|
||||
},
|
||||
set(value) {
|
||||
if (!value) {
|
||||
emit('closeSelectYuhun')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const searchText = ref('') // 搜索文本
|
||||
const activeName = ref('ALL')
|
||||
|
||||
const yuhunTypes = [
|
||||
{ label: "全部", name: "ALL" },
|
||||
{ label: "攻击类", name: "attack" },
|
||||
{ label: "暴击类", name: "Crit" },
|
||||
{ label: "生命类", name: "Health" },
|
||||
{ label: "防御类", name: "Defense" },
|
||||
{ label: "效果命中", name: "Effect" },
|
||||
{ label: "效果抵抗", name: "EffectResist" },
|
||||
{ label: "特殊类", name: "Special" }
|
||||
]
|
||||
|
||||
const handleClick = (tab: TabsPaneContext) => {
|
||||
console.log('Tab clicked:', tab)
|
||||
}
|
||||
|
||||
const confirm = (yuhun: Yuhun) => {
|
||||
emit('updateYuhun', yuhun)
|
||||
searchText.value = ''
|
||||
activeName.value = 'ALL'
|
||||
}
|
||||
|
||||
// 过滤函数
|
||||
const filterYuhunByTypeAndSearch = (type: string, search: string) => {
|
||||
let filteredList = yuhunData;
|
||||
if (type.toLowerCase() !== 'all') {
|
||||
filteredList = filteredList.filter(item =>
|
||||
item.type.toLowerCase() === type.toLowerCase()
|
||||
);
|
||||
}
|
||||
if (search.trim() !== '') {
|
||||
return filteredList.filter(item =>
|
||||
item.name.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
}
|
||||
return filteredList;
|
||||
}
|
||||
</script>
|
||||
@@ -1,97 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, inject, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useNodeAppearance } from '@/ts/useNodeAppearance';
|
||||
|
||||
const currentYuhun = ref({ name: '未选择御魂', avatar: '', type: '' });
|
||||
const getNode = inject('getNode') as (() => any) | undefined;
|
||||
const zIndex = ref(1);
|
||||
let intervalId: number | null = null;
|
||||
|
||||
// 使用轮询方式定期更新 zIndex
|
||||
onMounted(() => {
|
||||
const node = getNode?.();
|
||||
if (node) {
|
||||
zIndex.value = node.zIndex ?? 1;
|
||||
|
||||
// 每 100ms 检查一次 zIndex 是否变化
|
||||
intervalId = window.setInterval(() => {
|
||||
const currentZIndex = node.zIndex ?? 1;
|
||||
if (zIndex.value !== currentZIndex) {
|
||||
zIndex.value = currentZIndex;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (intervalId !== null) {
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
});
|
||||
|
||||
const { containerStyle, textStyle } = useNodeAppearance({
|
||||
onPropsChange(props) {
|
||||
if (props.yuhun) {
|
||||
currentYuhun.value = props.yuhun;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="node-content" :style="containerStyle">
|
||||
<div class="zindex-badge">{{ zIndex }}</div>
|
||||
<img
|
||||
v-if="currentYuhun.avatar"
|
||||
:src="currentYuhun.avatar"
|
||||
:alt="currentYuhun.name"
|
||||
class="yuhun-image"
|
||||
draggable="false"
|
||||
/>
|
||||
<div v-else class="placeholder-text" :style="textStyle">点击选择御魂</div>
|
||||
<div class="name-text" :style="textStyle">{{ currentYuhun.name }}</div>
|
||||
<div v-if="currentYuhun.type" class="type-text" :style="textStyle">{{ currentYuhun.type }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.node-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.zindex-badge {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
background: rgba(64, 158, 255, 0.9);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
.yuhun-image {
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.placeholder-text {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
.name-text {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.type-text {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,34 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useDialogs } from '@/ts/useDialogs';
|
||||
import { getLogicFlowInstance } from '@/ts/useLogicFlow';
|
||||
|
||||
const props = defineProps<{
|
||||
node: any;
|
||||
}>();
|
||||
|
||||
const { openDialog } = useDialogs();
|
||||
|
||||
const handleOpenDialog = () => {
|
||||
const lf = getLogicFlowInstance();
|
||||
const node = props.node;
|
||||
if (!lf || !node) return;
|
||||
|
||||
const currentData = node.properties?.shikigami;
|
||||
openDialog('shikigami', currentData, node, (updatedData) => {
|
||||
lf.setProperties(node.id, {
|
||||
...node.properties,
|
||||
shikigami: updatedData
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="property-section">
|
||||
<div class="section-header">式神属性</div>
|
||||
<div class="property-item">
|
||||
<span>当前选择式神:{{ node.properties?.shikigami?.name || '未选择' }}</span>
|
||||
<el-button type="primary" @click="handleOpenDialog" style="width: 100%">选择式神</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,33 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useDialogs } from '@/ts/useDialogs';
|
||||
import { getLogicFlowInstance } from '@/ts/useLogicFlow';
|
||||
|
||||
const props = defineProps<{
|
||||
node: any;
|
||||
}>();
|
||||
|
||||
const { openDialog } = useDialogs();
|
||||
|
||||
const handleOpenDialog = () => {
|
||||
const lf = getLogicFlowInstance();
|
||||
const node = props.node;
|
||||
if (!lf || !node) return;
|
||||
|
||||
const currentData = node.properties?.yuhun;
|
||||
openDialog('yuhun', currentData, node, (updatedData) => {
|
||||
lf.setProperties(node.id, {
|
||||
...node.properties,
|
||||
yuhun: updatedData
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="property-section">
|
||||
<div class="section-header">御魂属性</div>
|
||||
<div class="property-item">
|
||||
<el-button type="primary" @click="handleOpenDialog" style="width: 100%">选择御魂</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -7,6 +7,79 @@ import type { SelectorConfig } from '@/types/selector'
|
||||
import shikigamiData from '@/data/Shikigami.json'
|
||||
import yuhunData from '@/data/Yuhun.json'
|
||||
|
||||
// 阴阳师数据
|
||||
const onmyojiData = [
|
||||
{ id: '10', name: '晴明', avatar: '/assets/downloaded_images/hero_10_10.png' },
|
||||
{ id: '11', name: '神乐', avatar: '/assets/downloaded_images/hero_11_11.png' },
|
||||
{ id: '12', name: '八百比丘尼', avatar: '/assets/downloaded_images/hero_12_12.png' },
|
||||
{ id: '13', name: '源博雅', avatar: '/assets/downloaded_images/hero_13_13.png' },
|
||||
{ id: '15', name: '不知火', avatar: '/assets/downloaded_images/hero_15_15.png' },
|
||||
{ id: '16', name: '鬼灯', avatar: '/assets/downloaded_images/hero_16_16.png' }
|
||||
]
|
||||
|
||||
// 阴阳师技能数据
|
||||
const onmyojiSkillData = [
|
||||
// 晴明的技能
|
||||
{ onmyojiId: '10', onmyojiName: '晴明', skillId: '1003', name: '言灵·守', avatar: '/assets/downloaded_images/hero_10_skill_1003.png' },
|
||||
{ onmyojiId: '10', onmyojiName: '晴明', skillId: '1004', name: '言灵·盾', avatar: '/assets/downloaded_images/hero_10_skill_1004.png' },
|
||||
{ onmyojiId: '10', onmyojiName: '晴明', skillId: '1005', name: '言灵·星', avatar: '/assets/downloaded_images/hero_10_skill_1005.png' },
|
||||
{ onmyojiId: '10', onmyojiName: '晴明', skillId: '1007', name: '言灵·缚', avatar: '/assets/downloaded_images/hero_10_skill_1007.png' },
|
||||
{ onmyojiId: '10', onmyojiName: '晴明', skillId: '1008', name: '言灵·风', avatar: '/assets/downloaded_images/hero_10_skill_1008.png' },
|
||||
{ onmyojiId: '10', onmyojiName: '晴明', skillId: '1009', name: '言灵·火', avatar: '/assets/downloaded_images/hero_10_skill_1009.png' },
|
||||
{ onmyojiId: '10', onmyojiName: '晴明', skillId: '1011', name: '言灵·水', avatar: '/assets/downloaded_images/hero_10_skill_1011.png' },
|
||||
{ onmyojiId: '10', onmyojiName: '晴明', skillId: '9001', name: '通用技能', avatar: '/assets/downloaded_images/hero_10_skill_9001.png' },
|
||||
|
||||
// 神乐的技能
|
||||
{ onmyojiId: '11', onmyojiName: '神乐', skillId: '1101', name: '神乐铃·治愈', avatar: '/assets/downloaded_images/hero_11_skill_1101.png' },
|
||||
{ onmyojiId: '11', onmyojiName: '神乐', skillId: '1102', name: '神乐铃·盾御', avatar: '/assets/downloaded_images/hero_11_skill_1102.png' },
|
||||
{ onmyojiId: '11', onmyojiName: '神乐', skillId: '1103', name: '神乐铃·反弹', avatar: '/assets/downloaded_images/hero_11_skill_1103.png' },
|
||||
{ onmyojiId: '11', onmyojiName: '神乐', skillId: '1104', name: '神乐铃·净化', avatar: '/assets/downloaded_images/hero_11_skill_1104.png' },
|
||||
{ onmyojiId: '11', onmyojiName: '神乐', skillId: '1105', name: '神乐铃·复苏', avatar: '/assets/downloaded_images/hero_11_skill_1105.png' },
|
||||
{ onmyojiId: '11', onmyojiName: '神乐', skillId: '1107', name: '神乐铃·庇护', avatar: '/assets/downloaded_images/hero_11_skill_1107.png' },
|
||||
{ onmyojiId: '11', onmyojiName: '神乐', skillId: '1111', name: '神乐铃·祈愿', avatar: '/assets/downloaded_images/hero_11_skill_1111.png' },
|
||||
{ onmyojiId: '11', onmyojiName: '神乐', skillId: '9011', name: '通用技能', avatar: '/assets/downloaded_images/hero_11_skill_9011.png' },
|
||||
|
||||
// 八百比丘尼的技能
|
||||
{ onmyojiId: '12', onmyojiName: '八百比丘尼', skillId: '1201', name: '技能1', avatar: '/assets/downloaded_images/hero_12_skill_1201.png' },
|
||||
{ onmyojiId: '12', onmyojiName: '八百比丘尼', skillId: '1202', name: '技能2', avatar: '/assets/downloaded_images/hero_12_skill_1202.png' },
|
||||
{ onmyojiId: '12', onmyojiName: '八百比丘尼', skillId: '1203', name: '技能3', avatar: '/assets/downloaded_images/hero_12_skill_1203.png' },
|
||||
{ onmyojiId: '12', onmyojiName: '八百比丘尼', skillId: '1204', name: '技能4', avatar: '/assets/downloaded_images/hero_12_skill_1204.png' },
|
||||
{ onmyojiId: '12', onmyojiName: '八百比丘尼', skillId: '1205', name: '技能5', avatar: '/assets/downloaded_images/hero_12_skill_1205.png' },
|
||||
{ onmyojiId: '12', onmyojiName: '八百比丘尼', skillId: '1206', name: '技能6', avatar: '/assets/downloaded_images/hero_12_skill_1206.png' },
|
||||
{ onmyojiId: '12', onmyojiName: '八百比丘尼', skillId: '1207', name: '技能7', avatar: '/assets/downloaded_images/hero_12_skill_1207.png' },
|
||||
{ onmyojiId: '12', onmyojiName: '八百比丘尼', skillId: '9021', name: '通用技能', avatar: '/assets/downloaded_images/hero_12_skill_9021.png' },
|
||||
|
||||
// 源博雅的技能
|
||||
{ onmyojiId: '13', onmyojiName: '源博雅', skillId: '1301', name: '技能1', avatar: '/assets/downloaded_images/hero_13_skill_1301.png' },
|
||||
{ onmyojiId: '13', onmyojiName: '源博雅', skillId: '1302', name: '技能2', avatar: '/assets/downloaded_images/hero_13_skill_1302.png' },
|
||||
{ onmyojiId: '13', onmyojiName: '源博雅', skillId: '1303', name: '技能3', avatar: '/assets/downloaded_images/hero_13_skill_1303.png' },
|
||||
{ onmyojiId: '13', onmyojiName: '源博雅', skillId: '1304', name: '技能4', avatar: '/assets/downloaded_images/hero_13_skill_1304.png' },
|
||||
{ onmyojiId: '13', onmyojiName: '源博雅', skillId: '1305', name: '技能5', avatar: '/assets/downloaded_images/hero_13_skill_1305.png' },
|
||||
{ onmyojiId: '13', onmyojiName: '源博雅', skillId: '9031', name: '通用技能1', avatar: '/assets/downloaded_images/hero_13_skill_9031.png' },
|
||||
{ onmyojiId: '13', onmyojiName: '源博雅', skillId: '9032', name: '通用技能2', avatar: '/assets/downloaded_images/hero_13_skill_9032.png' },
|
||||
{ onmyojiId: '13', onmyojiName: '源博雅', skillId: '9033', name: '通用技能3', avatar: '/assets/downloaded_images/hero_13_skill_9033.png' },
|
||||
|
||||
// 不知火的技能
|
||||
{ onmyojiId: '15', onmyojiName: '不知火', skillId: '1501', name: '技能1', avatar: '/assets/downloaded_images/hero_15_skill_1501.png' },
|
||||
{ onmyojiId: '15', onmyojiName: '不知火', skillId: '1502', name: '技能2', avatar: '/assets/downloaded_images/hero_15_skill_1502.png' },
|
||||
{ onmyojiId: '15', onmyojiName: '不知火', skillId: '1503', name: '技能3', avatar: '/assets/downloaded_images/hero_15_skill_1503.png' },
|
||||
{ onmyojiId: '15', onmyojiName: '不知火', skillId: '1504', name: '技能4', avatar: '/assets/downloaded_images/hero_15_skill_1504.png' },
|
||||
{ onmyojiId: '15', onmyojiName: '不知火', skillId: '1505', name: '技能5', avatar: '/assets/downloaded_images/hero_15_skill_1505.png' },
|
||||
{ onmyojiId: '15', onmyojiName: '不知火', skillId: '1506', name: '技能6', avatar: '/assets/downloaded_images/hero_15_skill_1506.png' },
|
||||
{ onmyojiId: '15', onmyojiName: '不知火', skillId: '1507', name: '技能7', avatar: '/assets/downloaded_images/hero_15_skill_1507.png' },
|
||||
{ onmyojiId: '15', onmyojiName: '不知火', skillId: '1508', name: '技能8', avatar: '/assets/downloaded_images/hero_15_skill_1508.png' },
|
||||
|
||||
// 鬼灯的技能
|
||||
{ onmyojiId: '16', onmyojiName: '鬼灯', skillId: '1601', name: '技能1', avatar: '/assets/downloaded_images/hero_16_skill_1601.png' },
|
||||
{ onmyojiId: '16', onmyojiName: '鬼灯', skillId: '1602', name: '技能2', avatar: '/assets/downloaded_images/hero_16_skill_1602.png' },
|
||||
{ onmyojiId: '16', onmyojiName: '鬼灯', skillId: '1603', name: '技能3', avatar: '/assets/downloaded_images/hero_16_skill_1603.png' },
|
||||
{ onmyojiId: '16', onmyojiName: '鬼灯', skillId: '1604', name: '技能4', avatar: '/assets/downloaded_images/hero_16_skill_1604.png' },
|
||||
{ onmyojiId: '16', onmyojiName: '鬼灯', skillId: '1605', name: '技能5', avatar: '/assets/downloaded_images/hero_16_skill_1605.png' },
|
||||
{ onmyojiId: '16', onmyojiName: '鬼灯', skillId: '1606', name: '技能6', avatar: '/assets/downloaded_images/hero_16_skill_1606.png' },
|
||||
{ onmyojiId: '16', onmyojiName: '鬼灯', skillId: '1607', name: '技能7', avatar: '/assets/downloaded_images/hero_16_skill_1607.png' },
|
||||
{ onmyojiId: '16', onmyojiName: '鬼灯', skillId: '1608', name: '技能8', avatar: '/assets/downloaded_images/hero_16_skill_1608.png' }
|
||||
]
|
||||
|
||||
export const SELECTOR_PRESETS: Record<string, SelectorConfig> = {
|
||||
shikigami: {
|
||||
title: '请选择式神',
|
||||
@@ -47,5 +120,37 @@ export const SELECTOR_PRESETS: Record<string, SelectorConfig> = {
|
||||
imageField: 'avatar',
|
||||
labelField: 'name'
|
||||
}
|
||||
},
|
||||
|
||||
onmyoji: {
|
||||
title: '请选择阴阳师',
|
||||
dataSource: onmyojiData,
|
||||
groupField: null,
|
||||
groups: [
|
||||
{ label: '全部', name: 'ALL' }
|
||||
],
|
||||
itemRender: {
|
||||
imageField: 'avatar',
|
||||
labelField: 'name'
|
||||
}
|
||||
},
|
||||
|
||||
onmyojiSkill: {
|
||||
title: '请选择阴阳师技能',
|
||||
dataSource: onmyojiSkillData,
|
||||
groupField: 'onmyojiName',
|
||||
groups: [
|
||||
{ label: '全部', name: 'ALL' },
|
||||
{ label: '晴明', name: '晴明' },
|
||||
{ label: '神乐', name: '神乐' },
|
||||
{ label: '八百比丘尼', name: '八百比丘尼' },
|
||||
{ label: '源博雅', name: '源博雅' },
|
||||
{ label: '不知火', name: '不知火' },
|
||||
{ label: '鬼灯', name: '鬼灯' }
|
||||
],
|
||||
itemRender: {
|
||||
imageField: 'avatar',
|
||||
labelField: 'name'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,6 @@ import { reactive } from 'vue'
|
||||
import type { SelectorConfig } from '@/types/selector'
|
||||
|
||||
const dialogs = reactive({
|
||||
shikigami: { show: false, data: null, node: null, callback: null },
|
||||
yuhun: { show: false, data: null, node: null, callback: null },
|
||||
property: { show: false, data: null, node: null, callback: null },
|
||||
generic: { show: false, config: null, callback: null }
|
||||
})
|
||||
|
||||
@@ -33,7 +33,9 @@ export interface AssetLibrary {
|
||||
|
||||
export const ASSET_LIBRARIES: AssetLibrary[] = [
|
||||
{ id: 'shikigami', label: '式神', selectorPreset: 'shikigami' },
|
||||
{ id: 'yuhun', label: '御魂', selectorPreset: 'yuhun' }
|
||||
{ id: 'yuhun', label: '御魂', selectorPreset: 'yuhun' },
|
||||
{ id: 'onmyoji', label: '阴阳师', selectorPreset: 'onmyoji' },
|
||||
{ id: 'onmyojiSkill', label: '阴阳师技能', selectorPreset: 'onmyojiSkill' }
|
||||
// 未来可扩展:技能图标、装备等
|
||||
]
|
||||
|
||||
|
||||