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