修复设置菜单下的弹窗不可点击及显示异常的BUG

This commit is contained in:
fofolee 2024-03-13 18:20:59 +08:00
parent 916b34e70c
commit 2b99fa0f31
2 changed files with 651 additions and 402 deletions

View File

@ -1,304 +1,443 @@
<template>
<q-menu max-height="480px" max-width="300px" transition-show="jump-up" transition-hide="jump-down">
<!-- 用户信息 -->
<UserInfo ref="user" :allQuickCommandsLength="allQuickCommandsLength" :allFeaturesLength="allFeaturesLength" />
<!-- 菜单 -->
<q-list>
<!-- 命令管理 -->
<q-item clickable>
<q-item-section side>
<q-icon name="keyboard_arrow_left" />
</q-item-section>
<q-item-section>命令管理</q-item-section>
<q-menu anchor="top end" self="top start">
<q-list>
<!-- 导入 -->
<q-item clickable v-close-popup @click="importCommand">
<div>
<q-menu
target="#menuBtn"
max-height="480px"
max-width="300px"
transition-show="jump-up"
transition-hide="jump-down"
>
<!-- 用户信息 -->
<UserInfo
ref="user"
:allQuickCommandsLength="allQuickCommandsLength"
:allFeaturesLength="allFeaturesLength"
/>
<!-- 菜单 -->
<q-list>
<!-- 命令管理 -->
<q-item clickable>
<q-item-section side>
<q-icon name="keyboard_arrow_left" />
</q-item-section>
<q-item-section>命令管理</q-item-section>
<q-menu anchor="top end" self="top start">
<q-list>
<!-- 导入 -->
<q-item clickable v-close-popup @click="importCommand">
<q-item-section side>
<q-icon name="text_snippet" />
</q-item-section>
<q-item-section>从文件导入命令</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="importCommand(false)">
<q-item-section side>
<q-icon name="content_paste" />
</q-item-section>
<q-item-section>从剪贴板导入命令</q-item-section>
</q-item>
<!-- 导出 -->
<q-item clickable v-close-popup @click="exportAllCommands">
<q-item-section side>
<q-icon name="file_upload" />
</q-item-section>
<q-item-section>导出所有命令</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="enableAllCommands">
<q-item-section side>
<q-icon name="checklist_rtl" />
</q-item-section>
<q-item-section>启用本页所有命令</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="disableAllCommands">
<q-item-section side>
<q-icon name="remove_done" />
</q-item-section>
<q-item-section>禁用本页所有命令</q-item-section>
</q-item>
<!-- 清空 -->
<q-item
style="color: red"
clickable
v-close-popup
@click="clearAllCommands"
>
<q-item-section side>
<q-icon name="delete" />
</q-item-section>
<q-item-section>清空数据</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-item>
<!-- 实用功能 -->
<q-item clickable>
<q-item-section side>
<q-icon name="keyboard_arrow_left" />
</q-item-section>
<q-item-section>实用功能</q-item-section>
<q-menu anchor="top end" self="top start">
<q-list>
<q-item>
<q-item-section side>
<q-icon name="folder_special" />
</q-item-section>
<q-input
dense
prefix="快速收藏文件至"
suffix="标签"
outlined
input-class="text-center"
style="width: 280px"
autofocus
v-model="$root.profile.quickFileTag"
@blur="
$root.profile.quickFileTag ||
($root.profile.quickFileTag = '文件')
"
type="text"
>
<template v-slot:append>
<q-toggle
@update:model-value="
(val, e) => toggleFeature('favFile', val)
"
v-model="$root.profile.quickFileEnable"
checked-icon="check"
color="primary"
/>
</template>
<q-tooltip
>启用后选中文件可以通过超级面板快速将文件收藏到{{
$root.profile.quickFileTag
}}标签
</q-tooltip>
</q-input>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="bookmarks" />
</q-item-section>
<q-input
dense
prefix="快速收藏网址至"
suffix="标签"
outlined
input-class="text-center"
style="width: 280px"
v-model="$root.profile.quickUrlTag"
@blur="
$root.profile.quickUrlTag ||
($root.profile.quickUrlTag = '网址')
"
type="text"
>
<template v-slot:append>
<q-toggle
@update:model-value="
(val, e) => toggleFeature('favUrl', val)
"
v-model="$root.profile.quickUrlEnable"
checked-icon="check"
color="primary"
/>
</template>
<q-tooltip
>启用后在浏览器界面可以通过超级面板快速将网址收藏到{{
$root.profile.quickUrlTag
}}标签
</q-tooltip>
</q-input>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="drive_file_rename_outline" />
</q-item-section>
<q-input
dense
prefix="新建插件别名至"
suffix="标签"
outlined
input-class="text-center"
style="width: 280px"
autofocus
v-model="$root.profile.pluNickNameTag"
type="text"
>
<template v-slot:append>
<q-toggle
@update:model-value="
(val, e) => toggleFeature('pluNickName', val)
"
v-model="$root.profile.pluNickNameEnable"
checked-icon="check"
color="primary"
/>
</template>
<q-tooltip
>启用后在主输入框输入插件别名可以快速设置插件别名<br />
并将所有设置的别名保存至{{
$root.profile.pluNickNameTag
}}标签
</q-tooltip>
</q-input>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="api" />
</q-item-section>
<q-field dense outlined style="width: 280px">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
快捷命令服务
</div>
</template>
<template v-slot:append>
<q-btn
flat
@click="$router.push('server')"
icon="open_in_new"
/>
</template>
<q-tooltip
>通过本地监听
{{ $root.nativeProfile.serverPort }}
端口的形式接收用户传送过来的参数然后根据参数执行不同的操作
<br />
需要配置插件跟随 utools 启动和保留后台<br />
也可在主输入框通过关键字快捷命令服务配置进入
</q-tooltip>
</q-field>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="code" />
</q-item-section>
<q-field dense outlined style="width: 280px">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
运行代码
</div>
</template>
<template v-slot:append>
<q-btn
flat
@click="$router.push('code')"
icon="open_in_new"
/>
</template>
<q-tooltip
>一个可以直接运行代码的代码编辑器<br />
也可在主输入框输入关键字RunCode进入
</q-tooltip>
</q-field>
</q-item>
</q-list>
</q-menu>
</q-item>
<!-- 环境配置 -->
<q-item clickable>
<q-item-section side>
<q-icon name="keyboard_arrow_left" />
</q-item-section>
<q-item-section>环境配置</q-item-section>
<q-menu anchor="bottom end" self="bottom start">
<q-list>
<q-item clickable v-close-popup @click="showUserDara = true">
<q-item-section side>
<q-icon name="manage_accounts" />
</q-item-section>
<q-item-section>用户特殊变量</q-item-section>
<q-tooltip
>用户设置的变量类似一个全局配置项<br />
配置好后可选择特殊变量中的usr:插入<br />
也可直接在特殊变量中配置</q-tooltip
>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="dvr" />
</q-item-section>
<q-input
dense
outlined
autogrow
style="width: 280px"
autofocus
v-model="$root.nativeProfile.envPath"
type="text"
label="环境变量 PATH"
>
<q-tooltip
>修改本插件环境变量中的 PATH直接覆盖而非追加
<br />将会影响到除 quickcommandhtml
以外的所有环境</q-tooltip
>
</q-input>
</q-item>
<q-item v-if="showAlias">
<q-item-section side>
<q-icon name="code" />
</q-item-section>
<q-input
dense
outlined
autogrow
style="width: 280px"
v-model="$root.nativeProfile.alias"
type="text"
label="Alias"
>
<q-tooltip
>一行一条配置方法和 shell 的语法一样<br /> alias
python="/home/user/.bin/python"<br />将会影响到除
quickcommandhtml 以外的所有环境</q-tooltip
>
</q-input>
</q-item>
</q-list>
</q-menu>
</q-item>
<!-- 个性化设置 -->
<q-item clickable>
<q-item-section side>
<q-icon name="keyboard_arrow_left" />
</q-item-section>
<q-item-section>个性化设置</q-item-section>
<q-menu anchor="top end" self="top start">
<q-list>
<q-item clickable :disable="!$refs.user.isVIP">
<q-item-section side>
<q-icon name="color_lens" />
</q-item-section>
<q-item-section>主颜色</q-item-section>
<q-tooltip>你可以更改界面的主题色会员限定</q-tooltip>
<q-menu
v-if="$refs.user.isVIP"
nchor="top left"
self="bottom end"
>
<q-card>
<q-color
@change="setPrimaryColor"
v-model="$root.profile.primaryColor"
/>
<q-btn
color="primary"
label="重置为默认"
class="full-width"
@click="resetPrimary"
/>
</q-card>
</q-menu>
</q-item>
<q-item clickable :disable="!$refs.user.isVIP">
<q-item-section side>
<q-icon name="image" />
</q-item-section>
<q-item-section>面板视图背景图片</q-item-section>
<q-tooltip
>为面板视图设置一张背景图片会员限定<br />请不要选择尺寸太大的图片将影响插件载入速度</q-tooltip
>
<q-menu
v-if="$refs.user.isVIP"
nchor="top left"
self="bottom end"
>
<q-card>
<q-file
dense
standout="bg-primary text-white"
v-model="selectFile"
autofocus
@update:model-value="changeBackground()"
accept="image/*"
label="请选择一张图片"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
<q-btn
color="negative"
label="取消背景"
class="full-width"
@click="changeBackground(1)"
/>
</q-card>
</q-menu>
</q-item>
<q-item clickable :disable="!$refs.user.isVIP">
<q-item-section side>
<q-icon name="label" />
</q-item-section>
<q-item-section class="flex">紧凑标签栏 </q-item-section>
<q-tooltip>更为紧凑的标签栏适用于标签非常多的情形</q-tooltip>
<q-item-section side
><q-toggle
v-model="$root.profile.denseTagBar"
:disable="!$refs.user.isVIP"
color="primary"
/></q-item-section>
</q-item>
<q-item clickable>
<q-item-section side>
<q-icon name="search" />
</q-item-section>
<q-item-section class="flex">自动聚焦搜索 </q-item-section>
<q-tooltip>进入插件时自动聚焦搜索</q-tooltip>
<q-item-section side
><q-toggle
v-model="$root.profile.autofocusSearch"
color="primary"
/></q-item-section>
</q-item>
<!-- 自动分离 -->
<!-- <q-item clickable v-close-popup @click="getActivatedFutures(); showAutoDetachFeatures = true">
<q-item-section side>
<q-icon name="web_stories" />
</q-item-section>
<q-item-section class="flex">自动分离 </q-item-section>
<q-tooltip>utools的自动分离对整个插件生效配置此选项可以实现只对某些特定的功能进行自动分离</q-tooltip>
</q-item> -->
</q-list>
</q-menu>
</q-item>
<!-- <q-item clickable to="/share">
<q-item-section side>
<q-icon name="text_snippet" />
<q-icon name="groups" />
</q-item-section>
<q-item-section>从文件导入命令</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="importCommand(false)">
<q-item-section side>
<q-icon name="content_paste" />
</q-item-section>
<q-item-section>从剪贴板导入命令</q-item-section>
</q-item>
<!-- 导出 -->
<q-item clickable v-close-popup @click="exportAllCommands">
<q-item-section side>
<q-icon name="file_upload" />
</q-item-section>
<q-item-section>导出所有命令</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="enableAllCommands">
<q-item-section side>
<q-icon name="checklist_rtl" />
</q-item-section>
<q-item-section>启用本页所有命令</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="disableAllCommands">
<q-item-section side>
<q-icon name="remove_done" />
</q-item-section>
<q-item-section>禁用本页所有命令</q-item-section>
</q-item>
<!-- 清空 -->
<q-item style="color: red" clickable v-close-popup @click="clearAllCommands">
<q-item-section side>
<q-icon name="delete" />
</q-item-section>
<q-item-section>清空数据</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-item>
<!-- 实用功能 -->
<q-item clickable>
<q-item-section side>
<q-icon name="keyboard_arrow_left" />
</q-item-section>
<q-item-section>实用功能</q-item-section>
<q-menu anchor="top end" self="top start">
<q-list>
<q-item>
<q-item-section side>
<q-icon name="folder_special" />
</q-item-section>
<q-input dense prefix="快速收藏文件至" suffix="标签" outlined input-class="text-center" style="width: 280px"
autofocus v-model="$root.profile.quickFileTag" @blur="
$root.profile.quickFileTag ||
($root.profile.quickFileTag = '文件')
" type="text">
<template v-slot:append>
<q-toggle @update:model-value="(val, e) => toggleFeature('favFile', val)
" v-model="$root.profile.quickFileEnable" checked-icon="check" color="primary" />
</template>
<q-tooltip>启用后选中文件可以通过超级面板快速将文件收藏到{{
$root.profile.quickFileTag
}}标签
</q-tooltip>
</q-input>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="bookmarks" />
</q-item-section>
<q-input dense prefix="快速收藏网址至" suffix="标签" outlined input-class="text-center" style="width: 280px"
v-model="$root.profile.quickUrlTag" @blur="
$root.profile.quickUrlTag ||
($root.profile.quickUrlTag = '网址')
" type="text">
<template v-slot:append>
<q-toggle @update:model-value="(val, e) => toggleFeature('favUrl', val)
" v-model="$root.profile.quickUrlEnable" checked-icon="check" color="primary" />
</template>
<q-tooltip>启用后在浏览器界面可以通过超级面板快速将网址收藏到{{
$root.profile.quickUrlTag
}}标签
</q-tooltip>
</q-input>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="drive_file_rename_outline" />
</q-item-section>
<q-input dense prefix="新建插件别名至" suffix="标签" outlined input-class="text-center" style="width: 280px"
autofocus v-model="$root.profile.pluNickNameTag" type="text">
<template v-slot:append>
<q-toggle @update:model-value="(val, e) => toggleFeature('pluNickName', val)
" v-model="$root.profile.pluNickNameEnable" checked-icon="check" color="primary" />
</template>
<q-tooltip>启用后在主输入框输入插件别名可以快速设置插件别名<br />
并将所有设置的别名保存至{{
$root.profile.pluNickNameTag
}}标签
</q-tooltip>
</q-input>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="api" />
</q-item-section>
<q-field dense outlined style="width: 280px">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
快捷命令服务
</div>
</template>
<template v-slot:append>
<q-btn flat @click="$router.push('server')" icon="open_in_new" />
</template>
<q-tooltip>通过本地监听
{{ $root.nativeProfile.serverPort }}
端口的形式接收用户传送过来的参数然后根据参数执行不同的操作
<br />
需要配置插件跟随 utools 启动和保留后台<br />
也可在主输入框通过关键字快捷命令服务配置进入
</q-tooltip>
</q-field>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="code" />
</q-item-section>
<q-field dense outlined style="width: 280px">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
运行代码
</div>
</template>
<template v-slot:append>
<q-btn flat @click="$router.push('code')" icon="open_in_new" />
</template>
<q-tooltip>一个可以直接运行代码的代码编辑器<br />
也可在主输入框输入关键字RunCode进入
</q-tooltip>
</q-field>
</q-item>
</q-list>
</q-menu>
</q-item>
<!-- 环境配置 -->
<q-item clickable>
<q-item-section side>
<q-icon name="keyboard_arrow_left" />
</q-item-section>
<q-item-section>环境配置</q-item-section>
<q-menu anchor="bottom end" self="bottom start">
<q-list>
<q-item clickable @click="showUserDara = true">
<q-item-section side>
<q-icon name="manage_accounts" />
</q-item-section>
<q-item-section>用户特殊变量</q-item-section>
<q-tooltip>用户设置的变量类似一个全局配置项<br />
配置好后可选择特殊变量中的usr:插入<br />
也可直接在特殊变量中配置</q-tooltip>
</q-item>
<q-item>
<q-item-section side>
<q-icon name="dvr" />
</q-item-section>
<q-input dense outlined autogrow style="width: 280px" autofocus v-model="$root.nativeProfile.envPath"
type="text" label="环境变量 PATH">
<q-tooltip>修改本插件环境变量中的 PATH直接覆盖而非追加
<br />将会影响到除 quickcommandhtml
以外的所有环境</q-tooltip>
</q-input>
</q-item>
<q-item v-if="showAlias">
<q-item-section side>
<q-icon name="code" />
</q-item-section>
<q-input dense outlined autogrow style="width: 280px" v-model="$root.nativeProfile.alias" type="text"
label="Alias">
<q-tooltip>一行一条配置方法和 shell 的语法一样<br /> alias
python="/home/user/.bin/python"<br />将会影响到除
quickcommandhtml 以外的所有环境</q-tooltip>
</q-input>
</q-item>
</q-list>
</q-menu>
</q-item>
<!-- 个性化设置 -->
<q-item clickable>
<q-item-section side>
<q-icon name="keyboard_arrow_left" />
</q-item-section>
<q-item-section>个性化设置</q-item-section>
<q-menu anchor="top end" self="top start">
<q-list>
<q-item clickable :disable="!$refs.user.isVIP">
<q-item-section side>
<q-icon name="color_lens" />
</q-item-section>
<q-item-section>主颜色</q-item-section>
<q-tooltip>你可以更改界面的主题色会员限定</q-tooltip>
<q-menu v-if="$refs.user.isVIP" nchor="top left" self="bottom end">
<q-card>
<q-color @change="setPrimaryColor" v-model="$root.profile.primaryColor" />
<q-btn color="primary" label="重置为默认" class="full-width" @click="resetPrimary" />
</q-card>
</q-menu>
</q-item>
<q-item clickable :disable="!$refs.user.isVIP">
<q-item-section side>
<q-icon name="image" />
</q-item-section>
<q-item-section>面板视图背景图片</q-item-section>
<q-tooltip>为面板视图设置一张背景图片会员限定<br />请不要选择尺寸太大的图片将影响插件载入速度</q-tooltip>
<q-menu v-if="$refs.user.isVIP" nchor="top left" self="bottom end">
<q-card>
<q-file dense standout="bg-primary text-white" v-model="selectFile" autofocus
@update:model-value="changeBackground()" accept="image/*" label="请选择一张图片">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
<q-btn color="negative" label="取消背景" class="full-width" @click="changeBackground(1)" />
</q-card>
</q-menu>
</q-item>
<q-item clickable :disable="!$refs.user.isVIP">
<q-item-section side>
<q-icon name="label" />
</q-item-section>
<q-item-section class="flex">紧凑标签栏 </q-item-section>
<q-tooltip>更为紧凑的标签栏适用于标签非常多的情形</q-tooltip>
<q-item-section side><q-toggle v-model="$root.profile.denseTagBar" :disable="!$refs.user.isVIP"
color="primary" /></q-item-section>
</q-item>
<q-item clickable>
<q-item-section side>
<q-icon name="search" />
</q-item-section>
<q-item-section class="flex">自动聚焦搜索 </q-item-section>
<q-tooltip>进入插件时自动聚焦搜索</q-tooltip>
<q-item-section side><q-toggle v-model="$root.profile.autofocusSearch" color="primary" /></q-item-section>
</q-item>
<!-- 自动分离 -->
<!-- <q-item clickable @click="getActivatedFutures(); showAutoDetachFeatures = true">
<q-item-section side>
<q-icon name="web_stories" />
</q-item-section>
<q-item-section class="flex">自动分离 </q-item-section>
<q-tooltip>utools的自动分离对整个插件生效配置此选项可以实现只对某些特定的功能进行自动分离</q-tooltip>
<q-item-section>分享中心</q-item-section>
</q-item> -->
</q-list>
</q-menu>
</q-item>
<!-- <q-item clickable to="/share">
<q-item-section side>
<q-icon name="groups" />
</q-item-section>
<q-item-section>分享中心</q-item-section>
</q-item> -->
<!-- 收藏 -->
<q-item v-if="isTagStared" clickable @click="unMarkTag">
<q-item-section side>
<q-icon name="star_border" />
</q-item-section>
<q-item-section>取消收藏</q-item-section>
</q-item>
<q-item v-else clickable @click="showPanelConf = true">
<q-item-section side>
<q-icon name="star" />
</q-item-section>
<q-item-section>收藏标签</q-item-section>
<q-tooltip>收藏后会将当前标签名作为全局关键字可在 uTools 的主输入框进行搜索
<br />
搜索进入后默认进入当前标签的面板视图 <br />
类似于旧版本的快捷面板</q-tooltip>
</q-item>
<!-- 关于 -->
<q-item clickable @click="showAbout = true">
<q-item-section side>
<q-icon name="info" />
</q-item-section>
<q-item-section>关于和帮助</q-item-section></q-item>
</q-list>
<!-- 收藏 -->
<q-item v-if="isTagStared" clickable v-close-popup @click="unMarkTag">
<q-item-section side>
<q-icon name="star_border" />
</q-item-section>
<q-item-section>取消收藏</q-item-section>
</q-item>
<q-item v-else clickable v-close-popup @click="showPanelConf = true">
<q-item-section side>
<q-icon name="star" />
</q-item-section>
<q-item-section>收藏标签</q-item-section>
<q-tooltip
>收藏后会将当前标签名作为全局关键字可在 uTools
的主输入框进行搜索
<br />
搜索进入后默认进入当前标签的面板视图 <br />
类似于旧版本的快捷面板</q-tooltip
>
</q-item>
<!-- 关于 -->
<q-item clickable v-close-popup @click="showAbout = true">
<q-item-section side>
<q-icon name="info" />
</q-item-section>
<q-item-section>关于和帮助</q-item-section></q-item
>
</q-list>
</q-menu>
<!-- 关于弹窗 -->
<q-dialog v-model="showAbout">
<AboutThis />
@ -311,28 +450,28 @@
<UserData :showInsertBtn="false" />
</q-dialog>
<!-- <q-dialog v-model="showAutoDetachFeatures">
<q-card>
<q-card-section style="height: 400px; overflow: auto;">
<q-option-group v-model="$root.profile.autoDetachFeatures" type="checkbox" :options="activateFeatures">
<template v-slot:label="opt">
<q-item clickable v-ripple style="width: 300px;">
<q-item-section avatar>
<q-img :src="opt.icon" width="30px" />
</q-item-section>
<q-item-section>
{{ opt.label }}
</q-item-section>
</q-item>
</template>
</q-option-group>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="取消" @click="showAutoDetachFeatures = false" />
<q-btn color="primary" label="确定" @click="changeAutoDetachFeatures" />
</q-card-actions>
</q-card>
</q-dialog> -->
</q-menu>
<q-card>
<q-card-section style="height: 400px; overflow: auto;">
<q-option-group v-model="$root.profile.autoDetachFeatures" type="checkbox" :options="activateFeatures">
<template v-slot:label="opt">
<q-item clickable v-ripple style="width: 300px;">
<q-item-section avatar>
<q-img :src="opt.icon" width="30px" />
</q-item-section>
<q-item-section>
{{ opt.label }}
</q-item-section>
</q-item>
</template>
</q-option-group>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="取消" @click="showAutoDetachFeatures = false" />
<q-btn color="primary" label="确定" @click="changeAutoDetachFeatures" />
</q-card-actions>
</q-card>
</q-dialog> -->
</div>
</template>
<script>
@ -438,34 +577,41 @@ export default {
},
//
getActivatedFutures() {
let activateFeatures = this.$root.utools.whole.getFeatures().map(fts => {
return {
value: fts.code,
icon: fts.icon,
label: fts.explain,
}
});
let defaultFeatures = [{
value: "configuration",
label: "快捷命令配置",
icon: "logo.png"
},
{
value: "code",
label: "运行代码",
icon: "features/code.png"
},
{
value: "server",
label: "快捷命令服务",
icon: "features/server.png"
}]
this.activateFeatures = _.concat(defaultFeatures, _.cloneDeep(activateFeatures));
let activateFeatures = this.$root.utools.whole
.getFeatures()
.map((fts) => {
return {
value: fts.code,
icon: fts.icon,
label: fts.explain,
};
});
let defaultFeatures = [
{
value: "configuration",
label: "快捷命令配置",
icon: "logo.png",
},
{
value: "code",
label: "运行代码",
icon: "features/code.png",
},
{
value: "server",
label: "快捷命令服务",
icon: "features/server.png",
},
];
this.activateFeatures = _.concat(
defaultFeatures,
_.cloneDeep(activateFeatures)
);
},
changeAutoDetachFeatures() {
this.showAutoDetachFeatures = false;
quickcommand.showMessageBox("设置成功");
},
}
},
};
</script>

View File

@ -2,19 +2,37 @@
<div class="relative">
<!-- 标签栏 -->
<!-- 面板视图不显示标签栏 -->
<q-scroll-area v-show="commandCardStyle !== 'mini'" class="absolute-left" :thumb-style="{
width: '2px',
}" :style="{
width: tabBarWidth,
zIndex: 1,
}">
<q-tabs v-model="currentTag" vertical switch-indicator active-class="text-primary text-weight-bolder"
content-class="text-blue-grey" :key="$root.profile.denseTagBar" :dense="$root.profile.denseTagBar">
<q-scroll-area
v-show="commandCardStyle !== 'mini'"
class="absolute-left"
:thumb-style="{
width: '2px',
}"
:style="{
width: tabBarWidth,
zIndex: 1,
}"
>
<q-tabs
v-model="currentTag"
vertical
switch-indicator
active-class="text-primary text-weight-bolder"
content-class="text-blue-grey"
:key="$root.profile.denseTagBar"
:dense="$root.profile.denseTagBar"
>
<!-- 所有标签 -->
<q-tab v-for="tag in allQuickCommandTags" :key="tag" :name="tag" :content-class="tag === '搜索结果' || activatedQuickPanels.includes(tag)
? 'text-blue-7 text-weight-bolder'
: ''
">
<q-tab
v-for="tag in allQuickCommandTags"
:key="tag"
:name="tag"
:content-class="
tag === '搜索结果' || activatedQuickPanels.includes(tag)
? 'text-blue-7 text-weight-bolder'
: ''
"
>
{{ tag }}
<q-tooltip v-if="tag === '未分类'">
所有没有添加标签的命令都会归在未分类 <br />
@ -24,43 +42,78 @@
</q-tabs>
</q-scroll-area>
<!-- 面板栏 -->
<q-tab-panels animated class="absolute-right" :style="{
bottom: footerBarHeight,
left: tabBarWidth,
background:
commandCardStyle === 'mini' && $root.profile.backgroundImg
? `url('${$root.profile.backgroundImg}')`
: 'none',
backgroundSize: 'cover',
}" v-model="currentTag" transition-prev="fade" transition-next="fade" swipeable>
<q-tab-panel style="padding: 0" v-for="tag in allQuickCommandTags" :key="tag" :name="tag">
<q-scroll-area style="height: 100%" :thumb-style="{
background: 'grey',
width: '6px',
opacity: 0.5,
}">
<q-tab-panels
animated
class="absolute-right"
:style="{
bottom: footerBarHeight,
left: tabBarWidth,
background:
commandCardStyle === 'mini' && $root.profile.backgroundImg
? `url('${$root.profile.backgroundImg}')`
: 'none',
backgroundSize: 'cover',
}"
v-model="currentTag"
transition-prev="fade"
transition-next="fade"
swipeable
>
<q-tab-panel
style="padding: 0"
v-for="tag in allQuickCommandTags"
:key="tag"
:name="tag"
>
<q-scroll-area
style="height: 100%"
:thumb-style="{
background: 'grey',
width: '6px',
opacity: 0.5,
}"
>
<div class="row center q-pa-xs">
<CommandCard v-for="commandInfo in currentTagQuickCommands" :key="commandInfo.features.code"
:commandInfo="commandInfo" :isCommandActivated="activatedQuickCommandFeatureCodes.includes(
commandInfo.features.code
)
" :cardStyle="commandCardStyleSheet[commandCardStyle]" @commandChanged="commandChanged" :style="{
width: commandCardStyleSheet[commandCardStyle].width,
}" class="relative-position q-pa-sm"></CommandCard>
<CommandCard
v-for="commandInfo in currentTagQuickCommands"
:key="commandInfo.features.code"
:commandInfo="commandInfo"
:isCommandActivated="
activatedQuickCommandFeatureCodes.includes(
commandInfo.features.code
)
"
:cardStyle="commandCardStyleSheet[commandCardStyle]"
@commandChanged="commandChanged"
:style="{
width: commandCardStyleSheet[commandCardStyle].width,
}"
class="relative-position q-pa-sm"
></CommandCard>
</div>
</q-scroll-area>
</q-tab-panel>
</q-tab-panels>
<!-- 底栏 -->
<div class="absolute-bottom" :style="{
height: footerBarHeight,
left: tabBarWidth,
}">
<div
class="absolute-bottom"
:style="{
height: footerBarHeight,
left: tabBarWidth,
}"
>
<div class="row">
<!-- 搜索栏 -->
<div class="col">
<q-input v-model="commandSearchKeyword" debounce="200" filled dense :autofocus="$root.profile.autofocusSearch"
@update:model-value="updateSearch" placeholder="搜索,支持拼音首字母">
<q-input
v-model="commandSearchKeyword"
debounce="200"
filled
dense
:autofocus="$root.profile.autofocusSearch"
@update:model-value="updateSearch"
placeholder="搜索,支持拼音首字母"
>
<template v-slot:prepend>
<q-icon name="search" />
</template>
@ -70,39 +123,65 @@
<div class="col-auto justify-end flex">
<q-btn-group>
<!-- 切换视图 -->
<q-btn-toggle v-model="commandCardStyle" @click="$root.profile.commandCardStyle = commandCardStyle"
toggle-color="primary" flat :options="[
<q-btn-toggle
v-model="commandCardStyle"
@click="$root.profile.commandCardStyle = commandCardStyle"
toggle-color="primary"
flat
:options="[
{ slot: 'normal', value: 'normal' },
{ slot: 'dense', value: 'dense' },
{ slot: 'mini', value: 'mini' },
]">
]"
>
<template v-slot:normal>
<q-icon name="dashboard" />普通
<q-tooltip>按两列排列的基础视图</q-tooltip>
</template>
<template v-slot:dense>
<q-icon name="apps" />紧凑
<q-tooltip>按三列排列的紧凑视图但不会显示适用的操作系统</q-tooltip>
<q-tooltip
>按三列排列的紧凑视图但不会显示适用的操作系统</q-tooltip
>
</template>
<template v-slot:mini>
<q-icon name="view_comfy" />面板
<q-tooltip>按四列排列的面板视图<br />
<q-tooltip
>按四列排列的面板视图<br />
老版本的快捷面板已被弃用取而代之的是新版的面板视图<br />
注意<br />
1.未启用匹配类型为窗口的命令在此视图下不显示<br />
2.只显示图标描述和匹配类型<br />
3.点击卡片时会直接运行命令而不是编辑命令</q-tooltip>
3.点击卡片时会直接运行命令而不是编辑命令</q-tooltip
>
</template>
</q-btn-toggle>
<q-separator vertical />
<!-- 新建按钮 -->
<q-btn split flat @click="addNewCommand" color="primary" label="新建" icon="add" />
<q-btn
split
flat
@click="addNewCommand"
color="primary"
label="新建"
icon="add"
/>
<q-separator vertical />
<q-btn stretch color="primary" flat size="xs" :style="{
height: footerBarHeight,
}"><q-spinner-bars color="primary" size="1.5em" />
<q-btn
stretch
color="primary"
flat
size="xs"
id="menuBtn"
:style="{
height: footerBarHeight,
}"
><q-spinner-bars color="primary" size="1.5em" />
<!-- 菜单 -->
<ConfigurationMenu :isTagStared="activatedQuickPanels.includes(currentTag)" :currentTag="currentTag">
<ConfigurationMenu
:isTagStared="activatedQuickPanels.includes(currentTag)"
:currentTag="currentTag"
>
</ConfigurationMenu>
</q-btn>
</q-btn-group>
@ -110,11 +189,24 @@
</div>
</div>
<!-- 命令编辑界面 -->
<q-dialog v-model="isCommandEditorShow" persistent maximized :transition-show="newCommandDirect ? '' : 'slide-up'"
transition-hide="slide-down" style="overflow: hidden">
<CommandEditor ref="commandEditor" :action="commandEditorAction" @editorEvent="editorEvent"></CommandEditor>
<q-dialog
v-model="isCommandEditorShow"
persistent
maximized
:transition-show="newCommandDirect ? '' : 'slide-up'"
transition-hide="slide-down"
style="overflow: hidden"
>
<CommandEditor
ref="commandEditor"
:action="commandEditorAction"
@editorEvent="editorEvent"
></CommandEditor>
</q-dialog>
<CommandRunResult :action="{ type: 'config' }" ref="result"></CommandRunResult>
<CommandRunResult
:action="{ type: 'config' }"
ref="result"
></CommandRunResult>
</div>
</template>
@ -122,7 +214,7 @@
import { defineAsyncComponent } from "vue";
import quickcommandParser from "../js/common/quickcommandParser.js";
import importAll from "../js/common/importAll.js";
import changeLog from "../js/options/changeLog.js"
import changeLog from "../js/options/changeLog.js";
import pinyinMatch from "pinyin-match";
import CommandCard from "components/CommandCard";
import CommandEditor from "components/CommandEditor";
@ -517,10 +609,21 @@ export default {
showChangeLog() {
let lastNeedLogEvent = changeLog[changeLog.length - 1];
let loggedVersion =
this.$root.utools.whole.dbStorage.getItem("cfg_loggedVersion") || '0.0.0';
this.$root.utools.whole.dbStorage.getItem("cfg_loggedVersion") ||
"0.0.0";
if (loggedVersion < lastNeedLogEvent.version) {
quickcommand.showConfirmBox('<pre style="white-space: pre-wrap;word-wrap: break-word;">' + lastNeedLogEvent.log + '</pre>', '更新日志', true, 700)
this.$root.utools.whole.dbStorage.setItem("cfg_loggedVersion", lastNeedLogEvent.version)
quickcommand.showConfirmBox(
'<pre style="white-space: pre-wrap;word-wrap: break-word;">' +
lastNeedLogEvent.log +
"</pre>",
"更新日志",
true,
700
);
this.$root.utools.whole.dbStorage.setItem(
"cfg_loggedVersion",
lastNeedLogEvent.version
);
}
},
},