mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 15:04:06 +08:00
加强变量校验,重复和非法时自动重命名,优化变量管理,实时获取最新变量,不再进行增删操作
This commit is contained in:
parent
25be7f4926
commit
5947e537fe
@ -29,6 +29,7 @@ import {
|
||||
findCommandByValue,
|
||||
} from "js/composer/composerConfig";
|
||||
import { generateCode } from "js/composer/generateCode";
|
||||
import { parseVariables } from "js/composer/variableManager";
|
||||
|
||||
export default defineComponent({
|
||||
name: "CommandComposer",
|
||||
@ -37,37 +38,32 @@ export default defineComponent({
|
||||
ComposerFlow,
|
||||
},
|
||||
setup() {
|
||||
const variables = ref([]);
|
||||
const commandFlow = ref([]);
|
||||
|
||||
const addVariable = (name, command) => {
|
||||
if (!variables.value.find((v) => v.name === name)) {
|
||||
variables.value.push({
|
||||
name,
|
||||
sourceCommand: command,
|
||||
});
|
||||
// 提供获取当前变量的函数,直接返回解析后的变量列表
|
||||
const getCurrentVariables = () => {
|
||||
const variables = [];
|
||||
for (const cmd of commandFlow.value) {
|
||||
if (cmd.saveOutput && cmd.outputVariable) {
|
||||
variables.push(
|
||||
...parseVariables(cmd.outputVariable).map((variable) => ({
|
||||
name: variable,
|
||||
sourceCommand: cmd,
|
||||
}))
|
||||
);
|
||||
}
|
||||
}
|
||||
return variables;
|
||||
};
|
||||
|
||||
const removeVariable = (name) => {
|
||||
const index = variables.value.findIndex((v) => v.name === name);
|
||||
if (index !== -1) {
|
||||
variables.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
provide("composerVariables", variables);
|
||||
provide("addVariable", addVariable);
|
||||
provide("removeVariable", removeVariable);
|
||||
provide("getCurrentVariables", getCurrentVariables);
|
||||
|
||||
return {
|
||||
variables,
|
||||
addVariable,
|
||||
removeVariable,
|
||||
commandFlow,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
commandFlow: [],
|
||||
availableCommands,
|
||||
};
|
||||
},
|
||||
|
@ -66,11 +66,11 @@
|
||||
|
||||
<script>
|
||||
import { defineComponent, inject } from "vue";
|
||||
import { validateVariableName } from "js/common/variableValidator";
|
||||
import VariableInput from "components/composer/common/VariableInput.vue";
|
||||
import MultiParams from "components/composer/MultiParams.vue";
|
||||
import CommandHead from "components/composer/card/CommandHead.vue";
|
||||
import * as CardComponents from "js/composer/cardComponents";
|
||||
import { processVariable } from "js/composer/variableManager";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ComposerCard",
|
||||
@ -110,46 +110,27 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const addVariable = inject("addVariable");
|
||||
const removeVariable = inject("removeVariable");
|
||||
const variables = inject("composerVariables", []);
|
||||
|
||||
return {
|
||||
addVariable,
|
||||
removeVariable,
|
||||
variables,
|
||||
};
|
||||
const getCurrentVariables = inject("getCurrentVariables");
|
||||
return { getCurrentVariables };
|
||||
},
|
||||
methods: {
|
||||
handleOutputVariableUpdate(value) {
|
||||
// 检查变量名是否合法
|
||||
const validation = validateVariableName(value);
|
||||
if (!validation.isValid) {
|
||||
quickcommand.showMessageBox(validation.error, "warning");
|
||||
return;
|
||||
const result = processVariable({
|
||||
value,
|
||||
existingVars: this.getCurrentVariables().map((v) => v.name),
|
||||
});
|
||||
|
||||
if (result.warning) {
|
||||
quickcommand.showMessageBox(result.warning, "info");
|
||||
}
|
||||
|
||||
// 检查变量名是否重复
|
||||
if (this.variables.some((v) => v.name === value)) {
|
||||
quickcommand.showMessageBox(`变量名 "${value}" 已经存在`, "warning");
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理变量管理
|
||||
if (this.localCommand.outputVariable) {
|
||||
this.removeVariable(this.localCommand.outputVariable);
|
||||
}
|
||||
if (value) {
|
||||
this.addVariable(value, this.localCommand);
|
||||
}
|
||||
this.localCommand.outputVariable = value;
|
||||
this.localCommand.outputVariable = result.processedValue;
|
||||
},
|
||||
handleToggleOutput() {
|
||||
this.localCommand.saveOutput = !this.localCommand.saveOutput;
|
||||
|
||||
// 如果关闭输出,清空变量名
|
||||
if (!this.localCommand.saveOutput && this.localCommand.outputVariable) {
|
||||
this.removeVariable(this.localCommand.outputVariable);
|
||||
if (!this.localCommand.saveOutput) {
|
||||
this.localCommand.outputVariable = null;
|
||||
}
|
||||
},
|
||||
|
@ -74,6 +74,7 @@ import ChainStyles from "./flow/ChainStyles.vue";
|
||||
import EmptyFlow from "./flow/EmptyFlow.vue";
|
||||
import DropArea from "./flow/DropArea.vue";
|
||||
import { findCommandByValue } from "js/composer/composerConfig";
|
||||
import { processVariable } from "js/composer/variableManager";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ComposerFlow",
|
||||
@ -96,11 +97,11 @@ export default defineComponent({
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue", "add-command", "action"],
|
||||
setup() {
|
||||
const removeVariable = inject("removeVariable");
|
||||
return { removeVariable };
|
||||
const getCurrentVariables = inject("getCurrentVariables");
|
||||
return { getCurrentVariables };
|
||||
},
|
||||
emits: ["update:modelValue", "add-command", "action"],
|
||||
data() {
|
||||
return {
|
||||
dragIndex: -1,
|
||||
@ -261,13 +262,17 @@ export default defineComponent({
|
||||
} catch (error) {}
|
||||
},
|
||||
createNewCommand(parsedAction) {
|
||||
return {
|
||||
const newCommand = {
|
||||
...parsedAction,
|
||||
id: this.getUniqueId(),
|
||||
saveOutput: false,
|
||||
useOutput: null,
|
||||
outputVariable: null,
|
||||
};
|
||||
if (newCommand.saveOutput && newCommand.outputVariable) {
|
||||
newCommand.outputVariable = processVariable({
|
||||
value: newCommand.outputVariable,
|
||||
existingVars: this.getCurrentVariables().map((v) => v.name),
|
||||
}).processedValue;
|
||||
}
|
||||
return newCommand;
|
||||
},
|
||||
getUniqueId() {
|
||||
return this.$root.getUniqueId();
|
||||
@ -284,9 +289,6 @@ export default defineComponent({
|
||||
const cmd = newCommands[i];
|
||||
// 如果chainId不为空,则只删除指定chainId的命令
|
||||
if (chainId && cmd.chainId !== chainId) continue;
|
||||
if (cmd.outputVariable) {
|
||||
this.removeVariable(cmd.outputVariable);
|
||||
}
|
||||
newCommands.splice(i, 1);
|
||||
}
|
||||
this.$emit("update:modelValue", newCommands);
|
||||
@ -326,7 +328,7 @@ export default defineComponent({
|
||||
command,
|
||||
{
|
||||
//没有输出,则不打印
|
||||
code: `${command.outputVariable} && console.log(${command.outputVariable})`,
|
||||
code: `if(${command.outputVariable}!==undefined){console.log(${command.outputVariable})}`,
|
||||
},
|
||||
];
|
||||
// 触发运行事件
|
||||
|
@ -179,15 +179,13 @@ export default defineComponent({
|
||||
)?.label;
|
||||
const subFeature = funcNameLabel ? `${funcNameLabel} ` : "";
|
||||
const allArgvs = argvs
|
||||
.filter((item) => item != null && item != "")
|
||||
.map((item) =>
|
||||
item?.hasOwnProperty("__varInputVal__")
|
||||
? window.lodashM.truncate(item.value, {
|
||||
length: 30,
|
||||
omission: "...",
|
||||
})
|
||||
: item
|
||||
)
|
||||
.filter((item) => item != null && item != "");
|
||||
window.lodashM.truncate(stringifyArgv(item).toString(), {
|
||||
length: 30,
|
||||
omission: "...",
|
||||
})
|
||||
);
|
||||
return `${subFeature}${allArgvs.join(",")}`;
|
||||
},
|
||||
updateModelValue(funcName, argvs) {
|
||||
|
@ -9,8 +9,9 @@
|
||||
<!-- 变量输入框 -->
|
||||
<q-input
|
||||
v-if="command.saveOutput"
|
||||
:model-value="command.outputVariable"
|
||||
@update:model-value="$emit('update:outputVariable', $event)"
|
||||
v-model="inputValue"
|
||||
@focus="sourceValue = inputValue"
|
||||
@blur="handleBlur"
|
||||
outlined
|
||||
placeholder="变量名"
|
||||
class="variable-input"
|
||||
@ -91,6 +92,17 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: this.command.outputVariable || "",
|
||||
sourceValue: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"command.outputVariable"(newVal) {
|
||||
this.inputValue = newVal || "";
|
||||
},
|
||||
},
|
||||
emits: [
|
||||
"update:outputVariable",
|
||||
"toggle-output",
|
||||
@ -98,6 +110,17 @@ export default {
|
||||
"remove",
|
||||
"toggle-collapse",
|
||||
],
|
||||
methods: {
|
||||
handleBlur() {
|
||||
// 如果输入框的值和源值相同,则不更新
|
||||
if (
|
||||
this.inputValue.replace(/[ ]/g, "") ===
|
||||
this.sourceValue.replace(/[ ]/g, "")
|
||||
)
|
||||
return;
|
||||
this.$emit("update:outputVariable", this.inputValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -115,7 +138,7 @@ export default {
|
||||
}
|
||||
|
||||
.variable-input {
|
||||
width: 100px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.output-section :deep(.q-field) {
|
||||
|
@ -79,7 +79,7 @@
|
||||
}"
|
||||
class="variable-dropdown prepend-btn"
|
||||
size="sm"
|
||||
v-if="variables.length"
|
||||
@click="variables = getCurrentVariables()"
|
||||
>
|
||||
<q-list class="variable-list">
|
||||
<q-item-label header class="variable-label">
|
||||
@ -108,6 +108,15 @@
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label
|
||||
>无可用变量,请先点击命令卡片输出变量按钮设置变量</q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</template>
|
||||
@ -176,13 +185,14 @@ export default defineComponent({
|
||||
|
||||
emits: ["update:modelValue"],
|
||||
setup() {
|
||||
const variables = inject("composerVariables", []);
|
||||
return { variables };
|
||||
const getCurrentVariables = inject("getCurrentVariables");
|
||||
return { getCurrentVariables };
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selectedVariable: null,
|
||||
variables: [],
|
||||
};
|
||||
},
|
||||
|
||||
|
@ -136,7 +136,6 @@ export default defineComponent({
|
||||
id: this.$root.getUniqueId(),
|
||||
argv: "",
|
||||
saveOutput: false,
|
||||
useOutput: null,
|
||||
cmd: action.value || action.cmd,
|
||||
value: action.value || action.cmd,
|
||||
};
|
||||
|
@ -117,6 +117,9 @@ const reservedWords = [
|
||||
* @returns {object} - 包含验证结果和错误信息的对象
|
||||
*/
|
||||
export function validateVariableName(name) {
|
||||
// 去除空格
|
||||
name = name.trim();
|
||||
|
||||
// 检查是否为空
|
||||
if (!name) {
|
||||
return {
|
||||
|
@ -7,6 +7,8 @@ export const uiCommands = {
|
||||
value: "quickcommand.showButtonBox",
|
||||
label: "按钮组弹窗",
|
||||
isAsync: true,
|
||||
outputVariable: "{id,text}",
|
||||
saveOutput: true,
|
||||
config: [
|
||||
{
|
||||
label: "按钮组",
|
||||
|
177
src/js/composer/variableManager.js
Normal file
177
src/js/composer/variableManager.js
Normal file
@ -0,0 +1,177 @@
|
||||
import { validateVariableName } from "js/common/variableValidator";
|
||||
|
||||
/**
|
||||
* 生成随机后缀
|
||||
* @param {number} varCount - 当前变量数量
|
||||
* @returns {string} 随机后缀
|
||||
*/
|
||||
function generateRandomSuffix(varCount) {
|
||||
// 根据变量数量决定后缀长度
|
||||
let length = 1; // 默认1位
|
||||
if (varCount >= 100) {
|
||||
length = 3;
|
||||
} else if (varCount >= 10) {
|
||||
length = 2;
|
||||
}
|
||||
|
||||
return (
|
||||
"_" +
|
||||
Math.random()
|
||||
.toString(36)
|
||||
.substring(2, 2 + length)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析变量名
|
||||
* @param {string} value - 变量表达式
|
||||
* @returns {string[]} 解析出的所有变量名
|
||||
*/
|
||||
export function parseVariables(value) {
|
||||
if (!value) return [];
|
||||
|
||||
const destructured = extractDestructuredVars(value);
|
||||
if (!destructured) {
|
||||
return [value.trim()];
|
||||
}
|
||||
|
||||
// 处理解构变量
|
||||
return destructured.vars.map((name) => {
|
||||
// 处理重命名格式 (key:value)
|
||||
const parts = name.split(":").map((p) => p.trim());
|
||||
return parts[parts.length - 1]; // 返回实际的变量名
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成有效的变量名
|
||||
* @param {string} baseName - 基础变量名
|
||||
* @param {string[]} existingVars - 已存在的变量列表
|
||||
* @param {string} [currentName] - 当前的变量名(如果有)
|
||||
* @returns {string} 有效的变量名
|
||||
*/
|
||||
function generateValidVarName(baseName, existingVars, currentName = null) {
|
||||
// 如果当前名称有效且不重复,直接返回
|
||||
if (
|
||||
currentName &&
|
||||
validateVariableName(currentName).isValid &&
|
||||
!existingVars.includes(currentName)
|
||||
) {
|
||||
return currentName;
|
||||
}
|
||||
|
||||
// 如果变量名无效,生成一个随机变量名
|
||||
if (!validateVariableName(baseName).isValid) {
|
||||
baseName = "var" + generateRandomSuffix(existingVars.length);
|
||||
}
|
||||
|
||||
// 如果变量名重复,添加随机后缀直到不重复
|
||||
let finalName = baseName;
|
||||
while (existingVars.includes(finalName)) {
|
||||
let suffix;
|
||||
do {
|
||||
suffix = generateRandomSuffix(existingVars.length);
|
||||
} while (existingVars.includes(baseName + suffix));
|
||||
finalName = baseName + suffix;
|
||||
}
|
||||
|
||||
return finalName;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理变量更新
|
||||
* @param {Object} params - 参数对象
|
||||
* @param {string} params.value - 新的变量名
|
||||
* @param {string[]} params.existingVars - 当前已存在的变量列表
|
||||
* @returns {Object} - 处理结果
|
||||
*/
|
||||
export function processVariable({ value, existingVars }) {
|
||||
if (!value) {
|
||||
return { isValid: true, processedValue: value };
|
||||
}
|
||||
|
||||
const destructured = extractDestructuredVars(value);
|
||||
|
||||
if (!destructured) {
|
||||
// 处理单个变量
|
||||
const processedVar = generateValidVarName(value, existingVars);
|
||||
return {
|
||||
isValid: true,
|
||||
processedValue: processedVar,
|
||||
warning:
|
||||
processedVar !== value ? `变量名已被修改为: ${processedVar}` : null,
|
||||
};
|
||||
}
|
||||
|
||||
// 处理解构变量
|
||||
const processedVars = destructured.vars.map((name) => {
|
||||
const parts = name.split(":").map((p) => p.trim());
|
||||
const key = parts.length > 1 ? parts[0] : parts[0];
|
||||
const varName = parts[parts.length - 1];
|
||||
const processedName = generateValidVarName(varName, existingVars, varName);
|
||||
|
||||
return {
|
||||
key,
|
||||
processedName,
|
||||
needsRename: processedName !== varName,
|
||||
};
|
||||
});
|
||||
|
||||
// 如果有变量需要重命名,使用对象解构格式
|
||||
if (processedVars.some((v) => v.needsRename)) {
|
||||
const pairs = processedVars.map((v) =>
|
||||
v.needsRename ? `${v.key}:${v.processedName}` : v.key
|
||||
);
|
||||
const format = `{${pairs.join(", ")}}`;
|
||||
return {
|
||||
isValid: true,
|
||||
processedValue: format,
|
||||
warning: `变量名已被修改为: ${format}`,
|
||||
};
|
||||
}
|
||||
|
||||
// 保持原始格式
|
||||
const format =
|
||||
destructured.format === "array"
|
||||
? `[${processedVars.map((v) => v.key).join(", ")}]`
|
||||
: `{${processedVars.map((v) => v.key).join(", ")}}`;
|
||||
|
||||
return {
|
||||
isValid: true,
|
||||
processedValue: format,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 提取解构变量
|
||||
* @param {string} value - 输入的变量名
|
||||
* @returns {Object|null} - 解构的变量数组和格式,如果不是解构模式则返回null
|
||||
*/
|
||||
export function extractDestructuredVars(value) {
|
||||
if (!value) return null;
|
||||
value = value.trim();
|
||||
|
||||
// 检查是否是数组解构模式 [a, b, c]
|
||||
if (value.startsWith("[") && value.endsWith("]")) {
|
||||
return {
|
||||
vars: value
|
||||
.slice(1, -1)
|
||||
.split(",")
|
||||
.map((v) => v.trim()),
|
||||
format: "array",
|
||||
};
|
||||
}
|
||||
|
||||
// 检查是否是对象解构模式 {a, b, c}
|
||||
if (value.startsWith("{") && value.endsWith("}")) {
|
||||
return {
|
||||
vars: value
|
||||
.slice(1, -1)
|
||||
.split(",")
|
||||
.map((v) => v.trim()),
|
||||
format: "object",
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user