mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-08 06:16:27 +08:00
优化条件判断，自动添加结束判断流程
This commit is contained in:
fofolee
parent
e59b04ad5c
commit
9ea10f8033
@ -6,108 +6,48 @@
|
||||
>
|
||||
<q-card class="command-item">
|
||||
<q-card-section class="q-pa-sm">
|
||||
<div class="col">
|
||||
<!-- 命令标题和描述 -->
|
||||
<div class="row items-center q-mb-sm">
|
||||
<!-- 拖拽手柄 -->
|
||||
<div class="drag-handle cursor-move q-mr-sm">
|
||||
<q-icon name="drag_indicator" size="18px" class="text-grey-6" />
|
||||
</div>
|
||||
<div class="text-subtitle2">{{ command.label }}</div>
|
||||
<q-space />
|
||||
|
||||
<!-- 输出变量设置 -->
|
||||
<div
|
||||
class="output-section row items-center no-wrap"
|
||||
v-if="command.saveOutput"
|
||||
>
|
||||
<q-input
|
||||
:model-value="command.outputVariable"
|
||||
@update:model-value="handleOutputVariableUpdate"
|
||||
dense
|
||||
outlined
|
||||
placeholder="变量名"
|
||||
class="variable-input"
|
||||
style="width: 100px"
|
||||
align="center"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
:icon="saveOutputLocal ? 'data_object' : 'output'"
|
||||
:label="saveOutputLocal ? '保存到变量' : '获取输出'"
|
||||
flat
|
||||
dense
|
||||
class="output-btn q-px-sm q-mr-sm"
|
||||
size="sm"
|
||||
v-if="showOutputBtn"
|
||||
@click="handleToggleOutput"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
{{
|
||||
saveOutputLocal
|
||||
? "当前命令的输出将保存到变量中"
|
||||
: "点击将此命令的输出保存为变量以供后续使用"
|
||||
}}
|
||||
</div>
|
||||
<div class="text-caption text-grey-5">
|
||||
{{
|
||||
saveOutputLocal
|
||||
? "点击取消输出到变量"
|
||||
: "保存后可在其他命令中使用此变量"
|
||||
}}
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<!-- 运行按钮 -->
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="play_arrow"
|
||||
v-if="showRunBtn"
|
||||
class="run-btn q-px-sm q-mr-sm"
|
||||
size="sm"
|
||||
@click="runCommand"
|
||||
>
|
||||
<q-tooltip>单独运行此命令并打印输出</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="close"
|
||||
@click="$emit('remove')"
|
||||
size="sm"
|
||||
class="remove-btn"
|
||||
>
|
||||
<q-tooltip>移除此命令</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<!-- 参数输入 -->
|
||||
<div class="row items-center">
|
||||
<!-- 单独写组件的参数 -->
|
||||
<CommandHead
|
||||
:command="command"
|
||||
:is-control-flow="command.isControlFlow"
|
||||
@update:outputVariable="handleOutputVariableUpdate"
|
||||
@toggle-output="handleToggleOutput"
|
||||
@run="runCommand"
|
||||
@remove="$emit('remove')"
|
||||
>
|
||||
<!-- 控制流程组件，直接把组件放在head中 -->
|
||||
<template v-if="command.isControlFlow">
|
||||
<component
|
||||
:is="command.component"
|
||||
v-model="argvLocal"
|
||||
:command="command"
|
||||
class="col"
|
||||
v-if="!!command.component"
|
||||
v-bind="command.componentProps || {}"
|
||||
:type="command.controlFlowType"
|
||||
@addBranch="$emit('addBranch')"
|
||||
/>
|
||||
<!-- 通用组件参数 -->
|
||||
<MultiParamInput
|
||||
v-else
|
||||
v-model="argvLocal"
|
||||
:command="command"
|
||||
class="col"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 非控制流程组件，使用正常布局 -->
|
||||
<template v-else>
|
||||
<q-space />
|
||||
</template>
|
||||
</CommandHead>
|
||||
|
||||
<!-- 非控制流程组件的参数输入 -->
|
||||
<div v-if="!command.isControlFlow" class="row items-center q-mt-sm">
|
||||
<component
|
||||
v-if="!!command.component"
|
||||
:is="command.component"
|
||||
v-model="argvLocal"
|
||||
:command="command"
|
||||
class="col"
|
||||
v-bind="command.componentProps || {}"
|
||||
/>
|
||||
<MultiParamInput
|
||||
v-else
|
||||
v-model="argvLocal"
|
||||
:command="command"
|
||||
class="col"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
@ -119,12 +59,14 @@ import { defineComponent, inject, defineAsyncComponent } from "vue";
|
||||
import { validateVariableName } from "js/common/variableValidator";
|
||||
import VariableInput from "components/composer/ui/VariableInput.vue";
|
||||
import MultiParamInput from "components/composer/ui/MultiParamInput.vue";
|
||||
import CommandHead from "components/composer/card/CommandHead.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ComposerCard",
|
||||
components: {
|
||||
VariableInput,
|
||||
MultiParamInput,
|
||||
CommandHead,
|
||||
KeyEditor: defineAsyncComponent(() =>
|
||||
import("components/composer/ui/KeyEditor.vue")
|
||||
),
|
||||
@ -173,7 +115,14 @@ export default defineComponent({
|
||||
showKeyRecorder: false,
|
||||
};
|
||||
},
|
||||
emits: ["remove", "toggle-output", "update:argv", "update:command", "run"],
|
||||
emits: [
|
||||
"remove",
|
||||
"toggle-output",
|
||||
"update:argv",
|
||||
"update:command",
|
||||
"run",
|
||||
"addBranch",
|
||||
],
|
||||
computed: {
|
||||
saveOutputLocal: {
|
||||
get() {
|
||||
@ -315,12 +264,6 @@ export default defineComponent({
|
||||
this.$emit("run", tempCommand);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$el.classList.add("composer-card-enter-from");
|
||||
requestAnimationFrame(() => {
|
||||
this.$el.classList.remove("composer-card-enter-from");
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -341,7 +284,6 @@ export default defineComponent({
|
||||
|
||||
.command-item:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 拖拽和放置样式 */
|
||||
@ -354,96 +296,6 @@ export default defineComponent({
|
||||
border: 2px dashed var(--q-primary);
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.drag-handle:hover {
|
||||
color: var(--q-primary);
|
||||
}
|
||||
|
||||
/* 输出部分样式 */
|
||||
.output-section {
|
||||
max-width: 120px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field__control) {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field__marginal) {
|
||||
height: 28px;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field__native) {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
min-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.output-btn,
|
||||
.run-btn,
|
||||
.remove-btn {
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.output-btn:hover,
|
||||
.run-btn:hover,
|
||||
.remove-btn:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.run-btn:hover {
|
||||
color: var(--q-positive);
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
color: var(--q-negative);
|
||||
}
|
||||
|
||||
.output-btn.q-btn--active {
|
||||
color: var(--q-primary);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.composer-card-enter-active {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.composer-card-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
|
||||
.composer-card-leave-active {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.composer-card-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
.body--dark .command-item {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
@ -457,19 +309,8 @@ export default defineComponent({
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.body--dark .output-section :deep(.q-field) {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.body--dark .output-section :deep(.q-field--focused) {
|
||||
background: #1d1d1d;
|
||||
}
|
||||
|
||||
.body--dark .output-btn {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.body--dark .output-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
/* 调整控制流程组件的样式 */
|
||||
.command-item :deep(.condition-type-btn) {
|
||||
margin-left: -8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
@update:argv="(val) => handleArgvChange(index, val)"
|
||||
@update:command="(val) => updateCommand(index, val)"
|
||||
@run="handleRunCommand"
|
||||
@add-branch="() => addBranch(index)"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
@ -162,16 +163,11 @@ export default defineComponent({
|
||||
|
||||
onDrop(event) {
|
||||
try {
|
||||
// 尝试获取拖拽数据
|
||||
const actionData = event.dataTransfer.getData("action");
|
||||
if (!actionData) return;
|
||||
|
||||
// 如果没有action数据，说明是内部排序，直接返回
|
||||
if (!actionData) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 解析外部拖入的新命令数据
|
||||
const parsedAction = JSON.parse(actionData);
|
||||
const isControlFlow = parsedAction.isControlFlow;
|
||||
|
||||
const newCommand = {
|
||||
...parsedAction,
|
||||
@ -185,20 +181,37 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const newCommands = [...this.commands];
|
||||
if (this.dragIndex >= 0) {
|
||||
newCommands.splice(this.dragIndex, 0, newCommand);
|
||||
|
||||
// 如果是控制流程命令，添加start和end两个卡片
|
||||
if (isControlFlow) {
|
||||
const startCommand = {
|
||||
...newCommand,
|
||||
id: Date.now(),
|
||||
controlFlowType: "start",
|
||||
};
|
||||
|
||||
const endCommand = {
|
||||
...newCommand,
|
||||
id: Date.now() + 1,
|
||||
controlFlowType: "end",
|
||||
};
|
||||
|
||||
if (this.dragIndex >= 0) {
|
||||
newCommands.splice(this.dragIndex, 0, startCommand, endCommand);
|
||||
} else {
|
||||
newCommands.push(startCommand, endCommand);
|
||||
}
|
||||
} else {
|
||||
newCommands.push(newCommand);
|
||||
if (this.dragIndex >= 0) {
|
||||
newCommands.splice(this.dragIndex, 0, newCommand);
|
||||
} else {
|
||||
newCommands.push(newCommand);
|
||||
}
|
||||
}
|
||||
|
||||
this.$emit("update:modelValue", newCommands);
|
||||
this.dragIndex = -1;
|
||||
|
||||
document.querySelectorAll(".dragging").forEach((el) => {
|
||||
el.classList.remove("dragging");
|
||||
});
|
||||
} catch (error) {
|
||||
// 忽略内部拖动排序的错误
|
||||
console.debug("Internal drag & drop reorder", error);
|
||||
}
|
||||
},
|
||||
@ -255,6 +268,30 @@ export default defineComponent({
|
||||
// 触发运行事件
|
||||
this.$emit("action", "run", tempFlow);
|
||||
},
|
||||
addBranch(index) {
|
||||
const newCommands = [...this.commands];
|
||||
const midCommand = {
|
||||
...newCommands[index],
|
||||
id: Date.now(),
|
||||
controlFlowType: "mid",
|
||||
argv: "",
|
||||
};
|
||||
|
||||
// 找到对应的end位置
|
||||
let endIndex = index + 1;
|
||||
let depth = 1;
|
||||
while (endIndex < newCommands.length && depth > 0) {
|
||||
if (newCommands[endIndex].controlFlowType === "start") depth++;
|
||||
if (newCommands[endIndex].controlFlowType === "end") depth--;
|
||||
endIndex++;
|
||||
}
|
||||
|
||||
// 在end之前插入新的分支
|
||||
if (endIndex > index + 1) {
|
||||
newCommands.splice(endIndex - 1, 0, midCommand);
|
||||
this.$emit("update:modelValue", newCommands);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
183
src/components/composer/card/CommandButtons.vue
Normal file
183
src/components/composer/card/CommandButtons.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="command-buttons q-px-sm">
|
||||
<div class="row items-center no-wrap">
|
||||
<!-- 输出变量设置和按钮 -->
|
||||
<div
|
||||
class="output-section row items-center no-wrap"
|
||||
v-if="!showDeleteOnly"
|
||||
>
|
||||
<!-- 变量输入框 -->
|
||||
<q-input
|
||||
v-if="command.saveOutput"
|
||||
:model-value="command.outputVariable"
|
||||
@update:model-value="$emit('update:outputVariable', $event)"
|
||||
dense
|
||||
outlined
|
||||
placeholder="变量名"
|
||||
class="variable-input"
|
||||
align="center"
|
||||
>
|
||||
</q-input>
|
||||
<!-- 保存变量按钮 -->
|
||||
<q-btn
|
||||
:icon="command.saveOutput ? 'data_object' : 'output'"
|
||||
:label="command.saveOutput ? '保存到变量' : '获取输出'"
|
||||
flat
|
||||
dense
|
||||
class="output-btn"
|
||||
size="sm"
|
||||
@click="$emit('toggle-output')"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
{{
|
||||
command.saveOutput
|
||||
? "当前命令的输出将保存到变量中"
|
||||
: "点击将此命令的输出保存为变量以供后续使用"
|
||||
}}
|
||||
</div>
|
||||
<div class="text-caption text-grey-5">
|
||||
{{
|
||||
command.saveOutput
|
||||
? "点击取消输出到变量"
|
||||
: "保存后可在其他命令中使用此变量"
|
||||
}}
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮组 -->
|
||||
<div class="action-buttons row items-center no-wrap">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
v-if="!showDeleteOnly"
|
||||
round
|
||||
icon="play_arrow"
|
||||
class="run-btn q-mr-xs"
|
||||
size="sm"
|
||||
@click="$emit('run')"
|
||||
>
|
||||
<q-tooltip>单独运行此命令并打印输出</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="close"
|
||||
@click="$emit('remove')"
|
||||
size="sm"
|
||||
class="remove-btn"
|
||||
>
|
||||
<q-tooltip>移除此命令</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CommandButtons",
|
||||
props: {
|
||||
command: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
showDeleteOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:outputVariable", "toggle-output", "run", "remove"],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.command-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 输出部分样式 */
|
||||
.output-section {
|
||||
margin-right: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.variable-input {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field__control) {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field__marginal) {
|
||||
height: 28px;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field__native) {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
min-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.output-btn,
|
||||
.run-btn,
|
||||
.remove-btn {
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
min-height: 28px;
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.output-btn:hover,
|
||||
.run-btn:hover,
|
||||
.remove-btn:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.run-btn:hover {
|
||||
color: var(--q-positive);
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
color: var(--q-negative);
|
||||
}
|
||||
|
||||
.output-btn.q-btn--active {
|
||||
color: var(--q-primary);
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
.body--dark .output-section :deep(.q-field) {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.body--dark .output-section :deep(.q-field--focused) {
|
||||
background: #1d1d1d;
|
||||
}
|
||||
|
||||
.body--dark .output-btn {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.body--dark .output-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
</style>
|
||||
95
src/components/composer/card/CommandHead.vue
Normal file
95
src/components/composer/card/CommandHead.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div
|
||||
class="row items-center"
|
||||
:class="{
|
||||
'q-pb-sm': !isControlFlow,
|
||||
}"
|
||||
>
|
||||
<!-- 拖拽手柄 -->
|
||||
<div class="drag-handle q-mr-sm" draggable="true">
|
||||
<q-icon name="drag_indicator" size="18px" class="text-grey-6" />
|
||||
</div>
|
||||
|
||||
<!-- 标题 -->
|
||||
<div v-if="!isControlFlow" class="text-subtitle2 command-label">
|
||||
{{ command.label }}
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div :class="contentClass">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<CommandButtons
|
||||
:command="command"
|
||||
:show-delete-only="isControlFlow"
|
||||
v-bind="$attrs"
|
||||
@update:outputVariable="$emit('update:outputVariable', $event)"
|
||||
@toggle-output="$emit('toggle-output')"
|
||||
@run="$emit('run')"
|
||||
@remove="$emit('remove')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommandButtons from "./CommandButtons.vue";
|
||||
|
||||
export default {
|
||||
name: "CommandHead",
|
||||
components: {
|
||||
CommandButtons,
|
||||
},
|
||||
props: {
|
||||
command: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
isControlFlow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:outputVariable", "toggle-output", "run", "remove"],
|
||||
computed: {
|
||||
contentClass() {
|
||||
return {
|
||||
col: true,
|
||||
"q-ml-md": !this.isControlFlow,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drag-handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
cursor: grab;
|
||||
opacity: 0.6;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.row:hover .drag-handle {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.drag-handle:hover {
|
||||
opacity: 1;
|
||||
color: var(--q-primary);
|
||||
transform: scale(1.2);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.command-label {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,83 +1,54 @@
|
||||
<template>
|
||||
<div class="row items-center no-wrap">
|
||||
<!-- 下拉按钮 -->
|
||||
<q-btn-dropdown
|
||||
dense
|
||||
flat
|
||||
class="condition-type-btn"
|
||||
:class="{ 'text-primary': type !== 'end' }"
|
||||
>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="handleTypeChange(option.value)"
|
||||
:active="type === option.value"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ option.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<!-- 显示选中的类型文本 -->
|
||||
<div class="condition-type-text q-mx-sm">
|
||||
{{ getTypeLabel }}
|
||||
</div>
|
||||
|
||||
<!-- 条件表达式输入框和按钮 -->
|
||||
<template v-if="type !== 'end'">
|
||||
<template v-if="type === 'else'">
|
||||
<!-- 否则的条件按钮 -->
|
||||
<q-btn
|
||||
v-if="!showElseCondition"
|
||||
dense
|
||||
flat
|
||||
size="sm"
|
||||
class="condition-add-btn"
|
||||
icon="add"
|
||||
@click="showElseCondition = true"
|
||||
>
|
||||
<q-tooltip>添加条件</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- 否则的条件输入框 -->
|
||||
<q-input
|
||||
v-else
|
||||
v-model="condition"
|
||||
dense
|
||||
filled
|
||||
class="col condition-input"
|
||||
placeholder="请输入条件表达式"
|
||||
@update:model-value="handleConditionChange"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="code" />
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-btn dense flat round icon="close" @click="clearElseCondition" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<!-- 如果的条件输入框 -->
|
||||
<q-input
|
||||
v-else
|
||||
v-model="condition"
|
||||
dense
|
||||
filled
|
||||
class="col condition-input"
|
||||
placeholder="请输入条件表达式"
|
||||
@update:model-value="handleConditionChange"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="code" />
|
||||
<div class="conditional-judgment">
|
||||
<div class="row items-center no-wrap">
|
||||
<!-- 类型标签 -->
|
||||
<div class="text-subtitle2 type-label">
|
||||
<template v-if="type === 'start'">如果满足</template>
|
||||
<template v-else-if="type === 'mid'">
|
||||
{{ showCondition ? "否则满足" : "否则" }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<!-- 结束如果时的占位 -->
|
||||
<div v-else class="col"></div>
|
||||
<template v-else>结束条件判断</template>
|
||||
</div>
|
||||
|
||||
<!-- start类型显示添加按钮 -->
|
||||
<q-btn
|
||||
v-if="type === 'start'"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
size="sm"
|
||||
icon="add"
|
||||
class="control-btn q-mx-xs"
|
||||
@click="$emit('addBranch')"
|
||||
>
|
||||
<q-tooltip>添加条件分支</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<!-- mid类型显示切换按钮 -->
|
||||
<q-btn
|
||||
v-if="type === 'mid'"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
size="sm"
|
||||
:icon="showCondition ? 'unfold_less' : 'unfold_more'"
|
||||
class="control-btn q-mx-xs"
|
||||
@click="toggleCondition"
|
||||
>
|
||||
<q-tooltip>{{ showCondition ? "隐藏条件" : "显示条件" }}</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<!-- 条件输入框 -->
|
||||
<q-input
|
||||
v-if="showCondition"
|
||||
v-model="conditionLocal"
|
||||
dense
|
||||
borderless
|
||||
:bg-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||
placeholder="输入条件表达式"
|
||||
class="condition-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -86,150 +57,156 @@ import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ConditionalJudgment",
|
||||
|
||||
props: {
|
||||
modelValue: {
|
||||
modelValue: String,
|
||||
command: Object,
|
||||
type: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
command: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => ["start", "mid", "end"].includes(value),
|
||||
},
|
||||
},
|
||||
|
||||
emits: ["update:modelValue"],
|
||||
|
||||
emits: ["update:modelValue", "addBranch"],
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ label: "如果", value: "if" },
|
||||
{ label: "否则", value: "else" },
|
||||
{ label: "结束判断", value: "end" },
|
||||
],
|
||||
type: "if",
|
||||
showMidCondition: false,
|
||||
condition: "",
|
||||
showElseCondition: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
getTypeLabel() {
|
||||
switch (this.type) {
|
||||
case "if":
|
||||
return "如果满足：";
|
||||
case "else":
|
||||
return this.showElseCondition ? "否则，满足：" : "否则：";
|
||||
case "end":
|
||||
return "结束条件判断";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
// 解析初始值
|
||||
if (this.modelValue) {
|
||||
const match = this.modelValue.match(
|
||||
/^(if|else if|else|end)(?:\((.*)\))?$/
|
||||
);
|
||||
if (match) {
|
||||
if (match[1] === "else if") {
|
||||
this.type = "else";
|
||||
this.condition = match[2] || "";
|
||||
this.showElseCondition = true;
|
||||
} else {
|
||||
this.type = match[1];
|
||||
this.condition = match[2] || "";
|
||||
this.showElseCondition = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 组件创建时生成初始代码
|
||||
this.updateValue();
|
||||
},
|
||||
|
||||
methods: {
|
||||
generateCode() {
|
||||
computed: {
|
||||
showCondition() {
|
||||
return (
|
||||
this.type === "start" || (this.type === "mid" && this.showMidCondition)
|
||||
);
|
||||
},
|
||||
conditionLocal: {
|
||||
get() {
|
||||
return this.condition;
|
||||
},
|
||||
set(value) {
|
||||
this.condition = value;
|
||||
this.updateValue();
|
||||
},
|
||||
},
|
||||
generatedCode() {
|
||||
switch (this.type) {
|
||||
case "if":
|
||||
return `if (${this.condition}) {`;
|
||||
case "else":
|
||||
return this.condition
|
||||
? `} else if (${this.condition}) {`
|
||||
: "} else {";
|
||||
case "start":
|
||||
return `if(${this.condition || "true"}){`;
|
||||
case "mid":
|
||||
return this.showMidCondition && this.condition
|
||||
? `}else if(${this.condition}){`
|
||||
: "}else{";
|
||||
case "end":
|
||||
return "}";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
|
||||
handleTypeChange(value) {
|
||||
this.type = value;
|
||||
if (this.type === "end") {
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.parseCodeString(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleCondition() {
|
||||
this.showMidCondition = !this.showMidCondition;
|
||||
if (!this.showMidCondition) {
|
||||
this.condition = "";
|
||||
this.showElseCondition = false;
|
||||
this.updateValue();
|
||||
}
|
||||
this.$emit("update:modelValue", this.generateCode());
|
||||
},
|
||||
|
||||
handleConditionChange() {
|
||||
this.$emit("update:modelValue", this.generateCode());
|
||||
updateValue() {
|
||||
this.$emit("update:modelValue", this.generatedCode);
|
||||
},
|
||||
|
||||
clearElseCondition() {
|
||||
this.condition = "";
|
||||
this.showElseCondition = false;
|
||||
this.$emit("update:modelValue", this.generateCode());
|
||||
parseCodeString(val) {
|
||||
try {
|
||||
if (this.type === "start") {
|
||||
const match = val.match(/^if\((.*)\){$/);
|
||||
if (match) {
|
||||
this.condition = match[1] === "true" ? "" : match[1];
|
||||
}
|
||||
} else if (this.type === "mid") {
|
||||
if (val === "}else{") {
|
||||
this.showMidCondition = false;
|
||||
this.condition = "";
|
||||
} else {
|
||||
const match = val.match(/^}else if\((.*)\){$/);
|
||||
if (match) {
|
||||
this.showMidCondition = true;
|
||||
this.condition = match[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to parse code string:", e);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.condition-type-btn {
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
.conditional-judgment {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.condition-type-btn :deep(.q-btn__content) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.condition-type-btn :deep(.q-icon) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.condition-type-text {
|
||||
.type-label {
|
||||
font-size: 14px;
|
||||
color: var(--q-primary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.condition-add-btn {
|
||||
margin-left: 4px;
|
||||
opacity: 0.7;
|
||||
height: 36px;
|
||||
color: var(--q-primary);
|
||||
}
|
||||
|
||||
.condition-add-btn:hover {
|
||||
opacity: 1;
|
||||
background: rgba(var(--q-primary-rgb), 0.1);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.condition-input {
|
||||
flex: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.condition-input :deep(.q-field__control) {
|
||||
padding-right: 8px;
|
||||
padding: 0 16px;
|
||||
height: 24px !important;
|
||||
min-height: 24px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
.body--dark .condition-type-text {
|
||||
.body--dark .condition-input {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
.body--dark .type-label {
|
||||
color: var(--q-primary);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.body--dark .control-btn {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.body--dark .control-btn:hover {
|
||||
color: var(--q-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user