mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-29 20:32:44 +08:00
减小侧边栏宽度
This commit is contained in:
fofolee
parent
b00048e5ec
commit
a1a955f412
@ -12,6 +12,7 @@
|
||||
transform: isFullscreen ? 'translateX(-100%)' : 'translateX(0)',
|
||||
transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}"
|
||||
:sideBarWidth="sideBarWidth"
|
||||
v-if="showSidebar"
|
||||
></CommandSideBar>
|
||||
|
||||
@ -224,13 +225,14 @@
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- 添加全屏按钮 -->
|
||||
<!-- 全屏按钮 -->
|
||||
<q-btn
|
||||
class="fullscreen-btn"
|
||||
round
|
||||
flat
|
||||
:icon="isFullscreen ? 'fullscreen_exit' : 'fullscreen'"
|
||||
@click="toggleFullscreen"
|
||||
:class="{ 'btn-fullscreen': isFullscreen }"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
isFullscreen ? "退出全屏 (F11)" : "全屏编辑 (F11)"
|
||||
@ -252,7 +254,7 @@ const MonacoEditor = defineAsyncComponent(() =>
|
||||
import("components/MonacoEditor")
|
||||
);
|
||||
|
||||
const defaultSideBarWidth = 250;
|
||||
const defaultSideBarWidth = 200;
|
||||
const defaultlanguageBarHeight = 40;
|
||||
|
||||
export default {
|
||||
@ -324,7 +326,7 @@ export default {
|
||||
: this.action.data;
|
||||
quickCommandInfo?.program &&
|
||||
Object.assign(this.quickcommandInfo, _.cloneDeep(quickCommandInfo));
|
||||
// 默认命令<EFBFBD><EFBFBD>编辑
|
||||
// 默认命令编辑
|
||||
if (this.quickcommandInfo.tags?.includes("默认") && !utools.isDev()) {
|
||||
this.canCommandSave = false;
|
||||
}
|
||||
@ -466,26 +468,47 @@ export default {
|
||||
|
||||
.fullscreen-btn {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
z-index: 1000;
|
||||
background: rgba(var(--q-primary-rgb), 0.1);
|
||||
background: rgba(var(--q-primary-rgb), 0.08);
|
||||
color: var(--q-primary);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.fullscreen-btn:hover {
|
||||
background: rgba(var(--q-primary-rgb), 0.2);
|
||||
transform: scale(1.1);
|
||||
background: rgba(var(--q-primary-rgb), 0.15);
|
||||
transform: scale(1.1) translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(var(--q-primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
.fullscreen-btn:active {
|
||||
transform: scale(0.95);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
.btn-fullscreen {
|
||||
right: 32px;
|
||||
bottom: 32px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.btn-fullscreen:hover {
|
||||
transform: rotate(180deg) scale(1.1) translateY(-2px);
|
||||
}
|
||||
|
||||
.body--dark .fullscreen-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.body--dark .fullscreen-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 统一过渡效果 */
|
||||
@ -520,6 +543,7 @@ export default {
|
||||
}
|
||||
|
||||
.editor-transition {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
will-change: transform, left, top, opacity;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,305 +8,316 @@
|
||||
}"
|
||||
class="command-side-bar"
|
||||
>
|
||||
<div class="row q-pa-md q-gutter-md">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
color="grey"
|
||||
style="margin-right: 29px"
|
||||
icon="arrow_back_ios_new"
|
||||
v-close-popup
|
||||
/>
|
||||
<q-avatar size="64" square class="commandLogo">
|
||||
<q-img
|
||||
@click="showIconPicker = true"
|
||||
:src="currentCommand.features.icon"
|
||||
/>
|
||||
</q-avatar>
|
||||
<div class="row">
|
||||
<div class="command-side-bar-content">
|
||||
<!-- 说明 -->
|
||||
<q-input
|
||||
:disable="!canCommandSave"
|
||||
stack-label
|
||||
label-color="primary"
|
||||
borderless
|
||||
square
|
||||
v-model="currentCommand.features.explain"
|
||||
type="text"
|
||||
placeholder="请输入说明"
|
||||
label="说明"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
class="command-side-bar-icon"
|
||||
name="drive_file_rename_outline"
|
||||
<div class="row" :style="{ padding: sideBarPadding + 'px' }">
|
||||
<div class="col-12">
|
||||
<div class="row items-center relative-position q-pb-md">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
color="grey"
|
||||
icon="arrow_back_ios_new"
|
||||
v-close-popup
|
||||
class="absolute-left"
|
||||
style="height: 48px"
|
||||
/>
|
||||
<div class="col-12 flex justify-center">
|
||||
<q-avatar size="64" square class="commandLogo">
|
||||
<q-img
|
||||
@click="showIconPicker = true"
|
||||
:src="currentCommand.features.icon"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- 匹配类型 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
square
|
||||
@update:model-value="
|
||||
(val) =>
|
||||
(cmdMatch =
|
||||
val.name === 'professional'
|
||||
? JSON.stringify(val.jsonSample, null, 4)
|
||||
: null)
|
||||
"
|
||||
:options="commandTypesOptions"
|
||||
v-model="cmdType"
|
||||
type="text"
|
||||
label="匹配类型"
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div
|
||||
class="command-side-bar-content"
|
||||
:style="{ width: sideBarWidth - sideBarPadding * 2 + 'px' }"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" :name="cmdType.icon" />
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="scope.opt.icon" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label v-html="scope.opt.name" />
|
||||
<q-item-label caption>{{ scope.opt.desc }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- 匹配规则 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
v-if="cmdType.valueType === 'array'"
|
||||
borderless
|
||||
square
|
||||
v-model="cmdMatch"
|
||||
max-values="3"
|
||||
type="text"
|
||||
placeholder="回车添加多个"
|
||||
use-input
|
||||
use-chips
|
||||
multiple
|
||||
new-value-mode="add-unique"
|
||||
input-debounce="0"
|
||||
:label="cmdType.matchLabel"
|
||||
ref="cmdMatchRef"
|
||||
@blur="(e) => autoAddInputVal(e, $refs.cmdMatchRef)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="square_foot" />
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
:disable="!canCommandSave"
|
||||
v-else
|
||||
autogrow
|
||||
borderless
|
||||
square
|
||||
v-model="cmdMatch"
|
||||
hide-bottom-space
|
||||
@blur="regexVerify"
|
||||
:readonly="!cmdType.valueType"
|
||||
type="text"
|
||||
:label="cmdType.matchLabel"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="square_foot" />
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- 标签 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
square
|
||||
v-model="currentCommand.tags"
|
||||
max-values="3"
|
||||
type="text"
|
||||
label="标签"
|
||||
placeholder="回车添加多个"
|
||||
use-input
|
||||
use-chips
|
||||
multiple
|
||||
new-value-mode="add-unique"
|
||||
@new-value="tagVerify"
|
||||
input-debounce="0"
|
||||
:options="allQuickCommandTags"
|
||||
ref="commandTagRef"
|
||||
@blur="(e) => autoAddInputVal(e, $refs.commandTagRef)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="label" />
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- 特殊变量 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
@popup-hide="
|
||||
() => {
|
||||
if (specialVar.label === '{{usr:}}') showUserData = true;
|
||||
else insertSpecialVar(specialVar.label);
|
||||
}
|
||||
"
|
||||
square
|
||||
:options="specialVarsOptions"
|
||||
v-model="specialVar"
|
||||
input-debounce="0"
|
||||
type="text"
|
||||
label="特殊变量"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="attach_money" />
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label v-html="scope.opt.label" />
|
||||
<q-tooltip v-if="scope.opt.tooltip">
|
||||
{{ scope.opt.tooltip }}
|
||||
</q-tooltip>
|
||||
<q-item-label caption>{{ scope.opt.desc }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
<!-- 输出 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
square
|
||||
color="primary"
|
||||
v-model="currentCommand.output"
|
||||
:display-value="outputTypes[currentCommand.output].label"
|
||||
:options="outputTypesOptionsDy"
|
||||
label="输出"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
class="command-side-bar-icon"
|
||||
:name="outputTypes[currentCommand.output].icon"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="outputTypes[scope.opt].icon" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label v-html="outputTypes[scope.opt].label" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- 搜索面板推送 -->
|
||||
<q-field
|
||||
:disable="!canCommandSave"
|
||||
stack-label
|
||||
label-color="primary"
|
||||
borderless
|
||||
square
|
||||
type="text"
|
||||
label="搜索面板推送"
|
||||
>
|
||||
<template v-slot:control>
|
||||
<div class="self-center full-width no-outline" tabindex="0">
|
||||
{{
|
||||
currentCommand.features.mainPush
|
||||
? "主搜索框执行"
|
||||
: "进插件后执行"
|
||||
}}
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="help_outline"
|
||||
size="xs"
|
||||
<!-- 说明 -->
|
||||
<q-input
|
||||
:disable="!canCommandSave"
|
||||
stack-label
|
||||
label-color="primary"
|
||||
borderless
|
||||
square
|
||||
v-model="currentCommand.features.explain"
|
||||
type="text"
|
||||
placeholder="请输入说明"
|
||||
label="说明"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
class="command-side-bar-icon"
|
||||
name="drive_file_rename_outline"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- 匹配类型 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
square
|
||||
@update:model-value="
|
||||
(val) =>
|
||||
(cmdMatch =
|
||||
val.name === 'professional'
|
||||
? JSON.stringify(val.jsonSample, null, 4)
|
||||
: null)
|
||||
"
|
||||
:options="commandTypesOptions"
|
||||
v-model="cmdType"
|
||||
type="text"
|
||||
label="匹配类型"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" :name="cmdType.icon" />
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="scope.opt.icon" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label v-html="scope.opt.name" />
|
||||
<q-item-label caption>{{ scope.opt.desc }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- 匹配规则 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
v-if="cmdType.valueType === 'array'"
|
||||
borderless
|
||||
square
|
||||
v-model="cmdMatch"
|
||||
max-values="3"
|
||||
type="text"
|
||||
placeholder="回车添加"
|
||||
use-input
|
||||
use-chips
|
||||
multiple
|
||||
new-value-mode="add-unique"
|
||||
input-debounce="0"
|
||||
:label="cmdType.matchLabel"
|
||||
ref="cmdMatchRef"
|
||||
@blur="(e) => autoAddInputVal(e, $refs.cmdMatchRef)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="square_foot" />
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
:disable="!canCommandSave"
|
||||
v-else
|
||||
autogrow
|
||||
borderless
|
||||
square
|
||||
v-model="cmdMatch"
|
||||
hide-bottom-space
|
||||
@blur="regexVerify"
|
||||
:readonly="!cmdType.valueType"
|
||||
type="text"
|
||||
:label="cmdType.matchLabel"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="square_foot" />
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- 标签 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
square
|
||||
v-model="currentCommand.tags"
|
||||
max-values="3"
|
||||
type="text"
|
||||
label="标签"
|
||||
placeholder="回车添加"
|
||||
use-input
|
||||
use-chips
|
||||
multiple
|
||||
new-value-mode="add-unique"
|
||||
@new-value="tagVerify"
|
||||
input-debounce="0"
|
||||
:options="allQuickCommandTags"
|
||||
ref="commandTagRef"
|
||||
@blur="(e) => autoAddInputVal(e, $refs.commandTagRef)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="label" />
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- 特殊变量 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
@popup-hide="
|
||||
() => {
|
||||
if (specialVar.label === '{{usr:}}') showUserData = true;
|
||||
else insertSpecialVar(specialVar.label);
|
||||
}
|
||||
"
|
||||
square
|
||||
:options="specialVarsOptions"
|
||||
v-model="specialVar"
|
||||
input-debounce="0"
|
||||
type="text"
|
||||
label="特殊变量"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="attach_money" />
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label v-html="scope.opt.label" />
|
||||
<q-tooltip v-if="scope.opt.tooltip">
|
||||
{{ scope.opt.tooltip }}
|
||||
</q-tooltip>
|
||||
<q-item-label caption>{{ scope.opt.desc }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
<!-- 输出 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
square
|
||||
color="primary"
|
||||
v-model="currentCommand.output"
|
||||
:display-value="outputTypes[currentCommand.output].label"
|
||||
:options="outputTypesOptionsDy"
|
||||
label="输出"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
class="command-side-bar-icon"
|
||||
:name="outputTypes[currentCommand.output].icon"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="outputTypes[scope.opt].icon" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label v-html="outputTypes[scope.opt].label" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- 搜索面板推送 -->
|
||||
<q-field
|
||||
:disable="!canCommandSave"
|
||||
stack-label
|
||||
label-color="primary"
|
||||
borderless
|
||||
square
|
||||
type="text"
|
||||
label="搜索面板推送"
|
||||
>
|
||||
<template v-slot:control>
|
||||
<div class="self-center full-width no-outline" tabindex="0">
|
||||
{{
|
||||
currentCommand.features.mainPush
|
||||
? "主搜索执行"
|
||||
: "进插件执行"
|
||||
}}
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="help_outline"
|
||||
size="xs"
|
||||
dense
|
||||
@click="showMainPushHelp"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="search" />
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-toggle
|
||||
v-model="currentCommand.features.mainPush"
|
||||
color="primary"
|
||||
size="md"
|
||||
dense
|
||||
@click="showMainPushHelp"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="search" />
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-toggle
|
||||
v-model="currentCommand.features.mainPush"
|
||||
color="primary"
|
||||
size="md"
|
||||
dense
|
||||
/>
|
||||
</template>
|
||||
</q-field>
|
||||
<!-- 平台 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
square
|
||||
:options="Object.keys(platformTypes)"
|
||||
use-chips
|
||||
@blur="platformVerify()"
|
||||
v-model="currentCommand.features.platform"
|
||||
multiple
|
||||
label="平台"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="window" />
|
||||
</template>
|
||||
<template v-slot:selected-item="scope">
|
||||
<q-chip
|
||||
removable
|
||||
dense
|
||||
@remove="scope.removeAtIndex(scope.index)"
|
||||
:tabindex="scope.tabindex"
|
||||
>
|
||||
{{ platformTypes[scope.opt].label }}
|
||||
</q-chip>
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<span
|
||||
:class="`iconfont icon-${platformTypes[scope.opt].icon}`"
|
||||
></span>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label v-html="platformTypes[scope.opt].label" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
/>
|
||||
</template>
|
||||
</q-field>
|
||||
<!-- 平台 -->
|
||||
<q-select
|
||||
:disable="!canCommandSave"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-color="primary"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
borderless
|
||||
square
|
||||
:options="Object.keys(platformTypes)"
|
||||
use-chips
|
||||
@blur="platformVerify()"
|
||||
v-model="currentCommand.features.platform"
|
||||
multiple
|
||||
label="平台"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="command-side-bar-icon" name="window" />
|
||||
</template>
|
||||
<template v-slot:selected-item="scope">
|
||||
<q-chip
|
||||
removable
|
||||
dense
|
||||
@remove="scope.removeAtIndex(scope.index)"
|
||||
:tabindex="scope.tabindex"
|
||||
>
|
||||
{{ platformTypes[scope.opt].label }}
|
||||
</q-chip>
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<span
|
||||
:class="`iconfont icon-${platformTypes[scope.opt].icon}`"
|
||||
></span>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label v-html="platformTypes[scope.opt].label" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -355,11 +366,13 @@ export default {
|
||||
allQuickCommandTags: this.$parent.allQuickCommandTags,
|
||||
showIconPicker: false,
|
||||
showUserData: false,
|
||||
sideBarPadding: 12,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
quickcommandInfo: Object,
|
||||
canCommandSave: Boolean,
|
||||
sideBarWidth: Number,
|
||||
},
|
||||
computed: {
|
||||
commandTypesOptions() {
|
||||
@ -578,4 +591,8 @@ export default {
|
||||
background: var(--q-primary);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* .command-side-bar-content {
|
||||
width: 171px;
|
||||
} */
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user