优化编排逻辑控制的显示,去除重复的文本,不同分支显示不同图标

This commit is contained in:
fofolee 2025-03-29 21:34:07 +08:00
parent 7f26c0f176
commit 1da46e8dc5
3 changed files with 36 additions and 18 deletions

View File

@ -16,16 +16,16 @@
<q-icon name="linear_scale" size="xs" /> <q-icon name="linear_scale" size="xs" />
</div> </div>
<div v-else class="chain-icon"> <div v-else class="chain-icon">
<q-icon name="fork_left" size="xs" /> <q-icon :name="getChianIcon()" size="xs" />
</div> </div>
<!-- 标题 --> <!-- 标题 -->
<div class="command-label"> <div class="command-label" v-if="!isControlFlow">
<div class="drag-handle text-subtitle2 command-label-text"> <div class="drag-handle text-subtitle2 command-label-text">
{{ command.label }} {{ command.label }}
</div> </div>
<div <div
v-if="isCollapsed && !isControlFlow" v-if="isCollapsed"
class="summary-container" class="summary-container"
@click.stop="isEditingSummary = true" @click.stop="isEditingSummary = true"
> >
@ -135,6 +135,15 @@ export default {
return this.command.userComments || this.command.summary; return this.command.userComments || this.command.summary;
}, },
}, },
methods: {
getChianIcon() {
return (
this.command?.subCommands?.find(
(command) => command.value === this.command.commandType
)?.icon || "fork_left"
);
},
},
}; };
</script> </script>
@ -163,15 +172,18 @@ export default {
.command-label { .command-label {
user-select: none; user-select: none;
pointer-events: all; pointer-events: all;
cursor: grab;
transition: all 0.3s ease;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
margin-right: 8px; margin-right: 8px;
} }
.command-label:hover { .command-label-text {
cursor: grab;
transition: all 0.3s ease;
}
.command-label-text:hover {
color: var(--q-primary); color: var(--q-primary);
transition: all 0.3s ease; transition: all 0.3s ease;
} }

View File

@ -2,7 +2,7 @@
<div class="control-command-wrapper"> <div class="control-command-wrapper">
<div class="control-command"> <div class="control-command">
<!-- 类型标签 --> <!-- 类型标签 -->
<div class="control-type-label"> <div class="control-type-label drag-handle">
{{ currentFunction?.label || modelValue.commandType }} {{ currentFunction?.label || modelValue.commandType }}
</div> </div>
@ -25,7 +25,7 @@
no-icon-animation no-icon-animation
class="control-btn" class="control-btn"
> >
<q-list> <q-list dense>
<q-item <q-item
v-for="func in branchOptions" v-for="func in branchOptions"
:key="func.value" :key="func.value"
@ -168,6 +168,12 @@ export default defineComponent({
opacity: 0.9; opacity: 0.9;
user-select: none; user-select: none;
flex-shrink: 0; flex-shrink: 0;
transition: all 0.3s ease;
}
.control-type-label:hover {
color: var(--q-primary) !important;
transition: all 0.3s ease;
} }
.control-settings { .control-settings {

View File

@ -23,16 +23,10 @@ export const controlCommands = {
}, },
], ],
}, },
{
label: "否则",
value: "else",
icon: "fork_left",
codeTemplate: "} else {",
},
{ {
label: "否则满足", label: "否则满足",
value: "else if", value: "else if",
icon: "fork_left", icon: "fork_right",
codeTemplate: "} else if (${condition}) {", codeTemplate: "} else if (${condition}) {",
config: [ config: [
{ {
@ -43,6 +37,12 @@ export const controlCommands = {
}, },
], ],
}, },
{
label: "否则",
value: "else",
icon: "airline_stops",
codeTemplate: "} else {",
},
{ {
label: "结束", label: "结束",
value: "end", value: "end",
@ -295,7 +295,7 @@ export const controlCommands = {
{ {
label: "匹配分支", label: "匹配分支",
value: "case", value: "case",
icon: "check", icon: "fork_right",
codeTemplate: "case ${value}:", codeTemplate: "case ${value}:",
config: [ config: [
{ {
@ -314,7 +314,7 @@ export const controlCommands = {
{ {
label: "默认分支", label: "默认分支",
value: "default", value: "default",
icon: "last_page", icon: "airline_stops",
codeTemplate: "default:", codeTemplate: "default:",
}, },
{ {
@ -340,7 +340,7 @@ export const controlCommands = {
{ {
label: "捕获异常", label: "捕获异常",
value: "catch", value: "catch",
icon: "error", icon: "priority_high",
codeTemplate: "} catch (${errorVar}) {", codeTemplate: "} catch (${errorVar}) {",
config: [ config: [
{ {