zouju/auto-solution
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化场景和行为树列表项的选中状态显示

Browse Source
This commit is contained in:
yitaikarma
2026-04-16 11:25:10 +08:00
parent b56d57af44
commit 243a42ca5c
3 changed files with 24 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
modeler/src/views/decision/designer/properties.vue
View File

@@ -154,23 +154,6 @@
<a-input v-else v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" />
</a-form-item>
</template>
<template>
<a-form-item v-for="setting in currentElement.parameters" :label="setting.description">
<a-input-number v-if="setting.dataType === 'double'" v-model:value="setting.defaultValue"
:placeholder="setting.description" size="small" style="width:100%;" />
<a-select :placeholder="`请选择${setting.description}`"
allow-clear
v-else-if="setting.paramKey === 'platforms'" v-model:value="setting.defaultValue">
<a-select-option v-for="pl in getAvailablePlatforms()" :value="pl.name">{{ pl.description }}</a-select-option>
</a-select>
<a-select :placeholder="`请选择${setting.description}`"
allow-clear
v-else-if="setting.paramKey === 'command'" v-model:value="setting.defaultValue">
<a-select-option v-for="pl in nodeCommands" :value="pl.command">{{pl.chineseName}}</a-select-option>
</a-select>
<a-input v-else v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" />
</a-form-item>
</template>
</template>
</a-form>
</template>

67
modeler/src/views/decision/designer/scenarios-card.vue
View File

@@ -14,7 +14,7 @@
</div>
<a-list :data-source="scenarios || []" size="small" style="min-height: 25vh">
<template #renderItem="{ item }">
<a-list-item @click="()=> handleSelect(item)">
<a-list-item :class="{ 'ks-item-selected': selectedId === item.id }" @click="()=> handleSelect(item)">
<a-flex>
<a-tooltip placement="bottom">
<template #title>
@@ -23,20 +23,6 @@
</template>
<span>{{ substring(item.name, 15) }}</span>
</a-tooltip>
<a-flex class="ks-tree-actions">
<a-popconfirm
title="确定复制?"
@confirm="()=> handleCopy(item)"
>
<span class="ks-tree-action ks-tree-action-copy" @click.stop style="margin-right: 10px"><CopyOutlined /></span>
</a-popconfirm>
<a-popconfirm
title="确定删除?"
@confirm="()=> handleDelete(item)"
>
<span class="ks-tree-action ks-tree-action-delete" @click.stop><DeleteOutlined /></span>
</a-popconfirm>
</a-flex>
</a-flex>
</a-list-item>
</template>
@@ -74,6 +60,7 @@ export default defineComponent({
});
const activeKey = ref<number>(0);
const totalScenarios = ref<number>(0);
const selectedId = ref<number | null>(null);
const loadScenarios = (cb?: () => void) => {
findScenarioByQuery(scenarioQuery.value).then(r => {
@@ -89,19 +76,8 @@ export default defineComponent({
loadScenarios();
};
const handleDelete = (item: Scenario) => {
// TODO: 实现删除场景的API调用
console.log('删除场景:', item);
loadScenarios();
};
const handleCopy = (item: Scenario) => {
// TODO: 实现复制场景的API调用
console.log('复制场景:', item);
loadScenarios();
};
const handleSelect = (record: Scenario) => {
selectedId.value = record.id;
emit('select-scenario', record);
};
@@ -110,6 +86,7 @@ export default defineComponent({
onMounted(() => {
loadScenarios(() => {
if(scenarios.value.length > 0){
selectedId.value = scenarios.value[0]!.id;
emit('select-scenario', scenarios.value[0]);
}
});
@@ -120,42 +97,18 @@ export default defineComponent({
totalScenarios,
substring,
activeKey,
selectedId,
scenarios,
scenarioQuery,
loadScenarios,
handleSelect,
handleChange,
handleDelete,
handleCopy,
};
},
});
</script>
<style scoped>
.ks-tree-actions {
opacity: 0;
transition: opacity 0.3s;
}
.ks-tree-action {
cursor: pointer;
padding: 2px 5px;
border-radius: 3px;
}
.ks-tree-action:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.ks-tree-action-copy {
color: #1890ff;
}
.ks-tree-action-delete {
color: #ff4d4f;
}
.a-list-item {
cursor: pointer;
padding: 8px 12px;
@@ -166,14 +119,16 @@ export default defineComponent({
background-color: #f5f5f5;
}
.a-list-item:hover .ks-tree-actions {
opacity: 1;
}
.icon-scenario::before {
content: '\e6b8';
font-family: 'iconfont';
margin-right: 8px;
color: #82c4e9;
}
:deep(.ant-list-item.ks-item-selected) {
background-color: rgba(130, 196, 233, 0.15);
border-left: 3px solid #82c4e9;
padding-left: 9px;
}
</style>

14
modeler/src/views/decision/designer/trees-card.vue
View File

@@ -18,7 +18,7 @@
</div>
<a-list :data-source="behaviorTrees || []" size="small" style="min-height: 25vh">
<template #renderItem="{ item }">
<a-list-item @click="()=> handleSelect(item)">
<a-list-item :class="{ 'ks-item-selected': selectedId === item.id }" @click="()=> handleSelect(item)">
<a-flex>
<a-tooltip placement="bottom">
<template #title>
@@ -86,10 +86,12 @@ export default defineComponent({
});
const activeKey = ref<number>(1);
const totalTress = ref<number>(0);
const selectedId = ref<number | null>(null);
watch(
() => _props.scenarioId,
() => {
selectedId.value = null;
if (!_props.scenarioId) {
behaviorTrees.value = [];
totalTress.value = 0;
@@ -139,6 +141,7 @@ export default defineComponent({
];
const handleSelect = (record: BehaviorTree) => {
selectedId.value = record.id;
emit('select-tree', record);
};
@@ -157,6 +160,7 @@ export default defineComponent({
totalTress,
substring,
activeKey,
selectedId,
behaviorTrees,
behaviorTreeQuery,
loadTress,
@@ -172,3 +176,11 @@ export default defineComponent({
</script>
<style scoped>
:deep(.ant-list-item.ks-item-selected) {
background-color: rgba(130, 196, 233, 0.15);
border-left: 3px solid #82c4e9;
padding-left: 9px;
}
</style>