mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 23:16:18 +08:00
新增paraminput组件,处理多类型参数
This commit is contained in:
parent
53a411c664
commit
1c35b6fdd8
@ -1,105 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex-container">
|
<div class="multi-params">
|
||||||
<OperationCard
|
<OperationCard
|
||||||
v-if="hasFunctionSelector"
|
v-if="hasFunctionSelector"
|
||||||
:model-value="funcName"
|
:model-value="funcName"
|
||||||
@update:model-value="funcName = $event"
|
@update:model-value="funcName = $event"
|
||||||
:options="localCommand.functionSelector?.options"
|
:options="localCommand.functionSelector?.options"
|
||||||
class="width-12"
|
|
||||||
/>
|
/>
|
||||||
<div class="flex-container">
|
<ParamInput :configs="localConfig" :values="argvs" @update="updateArgv" />
|
||||||
<div
|
|
||||||
v-for="(item, index) in localConfig"
|
|
||||||
:key="index"
|
|
||||||
class="grid-item"
|
|
||||||
:style="getColumnStyle(item.width)"
|
|
||||||
>
|
|
||||||
<VariableInput
|
|
||||||
v-if="item.type === 'varInput'"
|
|
||||||
:model-value="argvs[index]"
|
|
||||||
@update:model-value="updateArgv(index, $event)"
|
|
||||||
:label="item.label"
|
|
||||||
:icon="item.icon"
|
|
||||||
:options="item.options"
|
|
||||||
/>
|
|
||||||
<NumberInput
|
|
||||||
v-else-if="item.type === 'numInput'"
|
|
||||||
:model-value="argvs[index]"
|
|
||||||
@update:model-value="updateArgv(index, $event)"
|
|
||||||
:label="item.label"
|
|
||||||
:icon="item.icon"
|
|
||||||
/>
|
|
||||||
<ArrayEditor
|
|
||||||
v-else-if="item.type === 'arrayEditor'"
|
|
||||||
:model-value="argvs[index]"
|
|
||||||
@update:model-value="updateArgv(index, $event)"
|
|
||||||
:options="item.options"
|
|
||||||
/>
|
|
||||||
<DictEditor
|
|
||||||
v-else-if="item.type === 'dictEditor'"
|
|
||||||
:model-value="argvs[index]"
|
|
||||||
@update:model-value="updateArgv(index, $event)"
|
|
||||||
:options="item.options"
|
|
||||||
/>
|
|
||||||
<q-toggle
|
|
||||||
v-else-if="item.type === 'switch'"
|
|
||||||
:model-value="argvs[index]"
|
|
||||||
@update:model-value="updateArgv(index, $event)"
|
|
||||||
:label="item.label"
|
|
||||||
:icon="item.icon"
|
|
||||||
/>
|
|
||||||
<q-select
|
|
||||||
v-else-if="item.type === 'select'"
|
|
||||||
filled
|
|
||||||
:model-value="argvs[index]"
|
|
||||||
@update:model-value="updateArgv(index, $event)"
|
|
||||||
:options="item.options"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon :name="item.icon || 'code'" />
|
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
<q-input
|
|
||||||
v-else-if="item.type === 'input'"
|
|
||||||
filled
|
|
||||||
:model-value="argvs[index]"
|
|
||||||
@update:model-value="updateArgv(index, $event)"
|
|
||||||
:label="item.label"
|
|
||||||
:icon="item.icon"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon :name="item.icon || 'code'" />
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
<q-checkbox
|
|
||||||
v-else-if="item.type === 'checkbox'"
|
|
||||||
:model-value="argvs[index]"
|
|
||||||
@update:model-value="updateArgv(index, $event)"
|
|
||||||
:label="item.label"
|
|
||||||
:icon="item.icon"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import VariableInput from "components/composer/common/VariableInput.vue";
|
|
||||||
import NumberInput from "components/composer/common/NumberInput.vue";
|
|
||||||
import ArrayEditor from "components/composer/common/ArrayEditor.vue";
|
|
||||||
import DictEditor from "components/composer/common/DictEditor.vue";
|
|
||||||
import OperationCard from "components/composer/common/OperationCard.vue";
|
import OperationCard from "components/composer/common/OperationCard.vue";
|
||||||
|
import ParamInput from "components/composer/common/ParamInput.vue";
|
||||||
import { stringifyArgv, parseFunction } from "js/composer/formatString";
|
import { stringifyArgv, parseFunction } from "js/composer/formatString";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "MultiParams",
|
name: "MultiParams",
|
||||||
components: {
|
components: {
|
||||||
VariableInput,
|
|
||||||
NumberInput,
|
|
||||||
ArrayEditor,
|
|
||||||
DictEditor,
|
|
||||||
OperationCard,
|
OperationCard,
|
||||||
|
ParamInput,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
modelValue: {
|
modelValue: {
|
||||||
@ -216,66 +137,10 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.flex-container {
|
.multi-params {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: column;
|
||||||
gap: 12px;
|
|
||||||
width: 100%;
|
|
||||||
--grid-gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item {
|
|
||||||
min-width: 50px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.grid-item {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation-cards {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 1px;
|
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
border-radius: 8px;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.operation-cards::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation-card {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 6px;
|
|
||||||
min-width: 72px;
|
|
||||||
padding: 2px 0;
|
|
||||||
background: rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.body--dark .operation-card {
|
|
||||||
background: rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation-card:hover {
|
|
||||||
background: var(--q-primary-opacity-5);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
border: 1px solid var(--q-primary-opacity-10);
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation-card.active {
|
|
||||||
border-color: var(--q-primary);
|
|
||||||
background: var(--q-primary-opacity-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.body--dark .operation-card.active {
|
|
||||||
border-color: var(--q-primary-opacity-50);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
144
src/components/composer/common/ParamInput.vue
Normal file
144
src/components/composer/common/ParamInput.vue
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<template>
|
||||||
|
<div class="param-grid">
|
||||||
|
<div
|
||||||
|
v-for="(config, index) in configs"
|
||||||
|
:key="index"
|
||||||
|
class="grid-item"
|
||||||
|
:style="getColumnStyle(config.width)"
|
||||||
|
>
|
||||||
|
<VariableInput
|
||||||
|
v-if="config.type === 'varInput'"
|
||||||
|
:model-value="values[index]"
|
||||||
|
@update:model-value="$emit('update', index, $event)"
|
||||||
|
:label="config.label"
|
||||||
|
:icon="config.icon"
|
||||||
|
:options="config.options"
|
||||||
|
/>
|
||||||
|
<NumberInput
|
||||||
|
v-else-if="config.type === 'numInput'"
|
||||||
|
:model-value="values[index]"
|
||||||
|
@update:model-value="$emit('update', index, $event)"
|
||||||
|
:label="config.label"
|
||||||
|
:icon="config.icon"
|
||||||
|
/>
|
||||||
|
<ArrayEditor
|
||||||
|
v-else-if="config.type === 'arrayEditor'"
|
||||||
|
:model-value="values[index]"
|
||||||
|
@update:model-value="$emit('update', index, $event)"
|
||||||
|
:options="config.options"
|
||||||
|
/>
|
||||||
|
<DictEditor
|
||||||
|
v-else-if="config.type === 'dictEditor'"
|
||||||
|
:model-value="values[index]"
|
||||||
|
@update:model-value="$emit('update', index, $event)"
|
||||||
|
:options="config.options"
|
||||||
|
/>
|
||||||
|
<q-toggle
|
||||||
|
v-else-if="config.type === 'switch'"
|
||||||
|
:model-value="values[index]"
|
||||||
|
@update:model-value="$emit('update', index, $event)"
|
||||||
|
:label="config.label"
|
||||||
|
:icon="config.icon"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
v-else-if="config.type === 'select'"
|
||||||
|
filled
|
||||||
|
:model-value="values[index]"
|
||||||
|
@update:model-value="$emit('update', index, $event)"
|
||||||
|
:options="config.options"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon :name="config.icon || 'code'" />
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
<q-input
|
||||||
|
v-else-if="config.type === 'input'"
|
||||||
|
filled
|
||||||
|
:model-value="values[index]"
|
||||||
|
@update:model-value="$emit('update', index, $event)"
|
||||||
|
:label="config.label"
|
||||||
|
:icon="config.icon"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon :name="config.icon || 'code'" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-checkbox
|
||||||
|
v-else-if="config.type === 'checkbox'"
|
||||||
|
:model-value="values[index]"
|
||||||
|
@update:model-value="$emit('update', index, $event)"
|
||||||
|
:label="config.label"
|
||||||
|
:icon="config.icon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
import VariableInput from "./VariableInput.vue";
|
||||||
|
import NumberInput from "./NumberInput.vue";
|
||||||
|
import ArrayEditor from "./ArrayEditor.vue";
|
||||||
|
import DictEditor from "./DictEditor.vue";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 参数输入组件
|
||||||
|
* @description 统一处理各种类型的参数输入
|
||||||
|
*
|
||||||
|
* @property {Object} config - 参数配置对象
|
||||||
|
* @property {String} config.type - 输入类型
|
||||||
|
* @property {String} [config.label] - 标签文本
|
||||||
|
* @property {String} [config.icon] - 图标
|
||||||
|
* @property {Object} [config.options] - 配置选项
|
||||||
|
* @property {any} value - 输入值
|
||||||
|
*/
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ParamInput",
|
||||||
|
components: {
|
||||||
|
VariableInput,
|
||||||
|
NumberInput,
|
||||||
|
ArrayEditor,
|
||||||
|
DictEditor,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
configs: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
values: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ["update"],
|
||||||
|
methods: {
|
||||||
|
getColumnStyle(width = 12) {
|
||||||
|
const columnWidth = (width / 12) * 100;
|
||||||
|
return {
|
||||||
|
width: `calc(${columnWidth}% - var(--grid-gap))`,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.param-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--grid-gap);
|
||||||
|
width: 100%;
|
||||||
|
--grid-gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
min-width: 50px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.grid-item {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -72,6 +72,8 @@ export const simulateCommands = {
|
|||||||
{
|
{
|
||||||
value: "utools.getCursorScreenPoint",
|
value: "utools.getCursorScreenPoint",
|
||||||
label: "获取鼠标坐标",
|
label: "获取鼠标坐标",
|
||||||
|
outputVariable: "{x:curX,y:curY}",
|
||||||
|
saveOutput: true,
|
||||||
config: [],
|
config: [],
|
||||||
allowEmptyArgv: true,
|
allowEmptyArgv: true,
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user