mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 06:54:11 +08:00
新增paraminput组件，处理多类型参数
This commit is contained in:
fofolee
parent
53a411c664
commit
1c35b6fdd8
@ -1,105 +1,26 @@
|
||||
<template>
|
||||
<div class="flex-container">
|
||||
<div class="multi-params">
|
||||
<OperationCard
|
||||
v-if="hasFunctionSelector"
|
||||
:model-value="funcName"
|
||||
@update:model-value="funcName = $event"
|
||||
:options="localCommand.functionSelector?.options"
|
||||
class="width-12"
|
||||
/>
|
||||
<div class="flex-container">
|
||||
<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>
|
||||
<ParamInput :configs="localConfig" :values="argvs" @update="updateArgv" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 ParamInput from "components/composer/common/ParamInput.vue";
|
||||
import { stringifyArgv, parseFunction } from "js/composer/formatString";
|
||||
|
||||
export default defineComponent({
|
||||
name: "MultiParams",
|
||||
components: {
|
||||
VariableInput,
|
||||
NumberInput,
|
||||
ArrayEditor,
|
||||
DictEditor,
|
||||
OperationCard,
|
||||
ParamInput,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
@ -216,66 +137,10 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flex-container {
|
||||
.multi-params {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
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;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.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);
|
||||
width: 100%;
|
||||
}
|
||||
</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",
|
||||
label: "获取鼠标坐标",
|
||||
outputVariable: "{x:curX,y:curY}",
|
||||
saveOutput: true,
|
||||
config: [],
|
||||
allowEmptyArgv: true,
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user