mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2026-03-05 15:05:27 +00:00
refactor: 重构属性编辑面板,支持Tab分离和节点类型切换
- 将属性面板分为游戏属性和图像属性两个Tab - 游戏属性Tab包含节点基本信息、类型切换和特定属性 - 图像属性Tab包含所有样式设置(填充、描边、阴影等) - 资产选择器节点支持在式神和御魂之间切换 - 切换节点类型时自动清空已选资产 - 优化AssetSelectorPanel,移除重复的资产库选择器
This commit is contained in:
83
src/components/flow/panels/AssetSelectorPanel.vue
Normal file
83
src/components/flow/panels/AssetSelectorPanel.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useDialogs } from '@/ts/useDialogs';
|
||||
import { getLogicFlowInstance } from '@/ts/useLogicFlow';
|
||||
import { SELECTOR_PRESETS } from '@/configs/selectorPresets';
|
||||
|
||||
const props = defineProps<{
|
||||
node: any;
|
||||
}>();
|
||||
|
||||
const { openGenericSelector } = useDialogs();
|
||||
|
||||
// 当前选中的资产库
|
||||
const currentLibrary = computed(() => props.node.properties?.assetLibrary || 'shikigami');
|
||||
|
||||
// 当前选中的资产
|
||||
const currentAsset = computed(() => {
|
||||
return props.node.properties?.selectedAsset || { name: '未选择' };
|
||||
});
|
||||
|
||||
// 打开选择器
|
||||
const handleOpenSelector = () => {
|
||||
const lf = getLogicFlowInstance();
|
||||
const node = props.node;
|
||||
if (!lf || !node) return;
|
||||
|
||||
const library = currentLibrary.value;
|
||||
const config = SELECTOR_PRESETS[library];
|
||||
|
||||
if (!config) {
|
||||
console.error('未找到资产库配置:', library);
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置当前选中项
|
||||
config.currentItem = node.properties?.selectedAsset;
|
||||
|
||||
openGenericSelector(config, (selectedItem) => {
|
||||
lf.setProperties(node.id, {
|
||||
...node.properties,
|
||||
selectedAsset: selectedItem,
|
||||
assetLibrary: library
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="property-section">
|
||||
<div class="section-header">资产属性</div>
|
||||
|
||||
<div class="property-item">
|
||||
<div class="property-label">当前选择</div>
|
||||
<span>{{ currentAsset.name }}</span>
|
||||
<el-button type="primary" @click="handleOpenSelector" style="width: 100%; margin-top: 8px">
|
||||
选择资产
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.property-section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.property-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.property-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user