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
fc71af3150
commit
3e9bebf289
@ -24,45 +24,6 @@
|
||||
</q-avatar>
|
||||
<div class="row">
|
||||
<div>
|
||||
<!-- 搜索面板推送 -->
|
||||
<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="sm"
|
||||
dense
|
||||
@click="showMainPushHelp"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:prepend>
|
||||
<q-icon color="primary" name="troubleshoot" />
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-toggle
|
||||
v-model="currentCommand.features.mainPush"
|
||||
color="primary"
|
||||
size="md"
|
||||
dense
|
||||
/>
|
||||
</template>
|
||||
</q-field>
|
||||
<!-- 说明 -->
|
||||
<q-input
|
||||
:disable="!canCommandSave"
|
||||
@ -260,6 +221,45 @@
|
||||
</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 color="primary" 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"
|
||||
|
||||
@ -25,3 +25,61 @@
|
||||
.icon-windows1:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
/* 优化 Tooltip 样式 */
|
||||
.q-tooltip {
|
||||
background: rgba(255, 255, 255, 0.18) !important;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.3px;
|
||||
color: rgba(35, 35, 35, 0.98) !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transform-origin: center;
|
||||
animation: tooltip-appear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
.body--dark .q-tooltip {
|
||||
background: rgba(35, 35, 35, 0.18) !important;
|
||||
color: rgba(255, 255, 255, 0.98) !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Tooltip 动画 */
|
||||
@keyframes tooltip-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 多行文本的 Tooltip */
|
||||
.q-tooltip.multiline {
|
||||
max-width: 280px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Tooltip 位置微调 */
|
||||
.q-tooltip[data-v-anchor="top middle"] {
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.q-tooltip[data-v-anchor="bottom middle"] {
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.q-tooltip[data-v-anchor="center left"] {
|
||||
transform-origin: center right;
|
||||
}
|
||||
|
||||
.q-tooltip[data-v-anchor="center right"] {
|
||||
transform-origin: center left;
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
{{ tag }}
|
||||
<q-tooltip v-if="tag === '未分类'">
|
||||
所有没有添加标签的命令都会归在未分类 <br />
|
||||
可以在新建命令时在标签<EFBFBD><EFBFBD>栏选择或直接键入标签名来添加标签
|
||||
可以在新建命令时在标签选择或直接键入标签名来添加标签
|
||||
</q-tooltip>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
@ -159,7 +159,7 @@
|
||||
<template v-slot:mini>
|
||||
<q-icon name="view_comfy" />
|
||||
<q-tooltip
|
||||
>按四列排列的面板视图<br />
|
||||
>按四列的面板视图<br />
|
||||
老版本的「快捷面板」已被弃用，取而代之的是新版的「面板视图」<br />
|
||||
注意：<br />
|
||||
1.未启用、匹配类型为窗口的命令在此视图下不显示<br />
|
||||
@ -370,7 +370,7 @@ export default {
|
||||
: currentFts.push(x)
|
||||
);
|
||||
this.activatedQuickCommandFeatureCodes = currentFts.map((f) => f.code);
|
||||
// 已启用的面板
|
||||
// 启用的面板
|
||||
this.activatedQuickPanels = quickpanels;
|
||||
},
|
||||
// 获取所有的快捷命令（导出的格式）
|
||||
@ -642,5 +642,54 @@ export default {
|
||||
.q-tab {
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 标签悬浮效果 */
|
||||
.q-tab:hover {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.q-tab:hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--q-primary);
|
||||
opacity: 0.1;
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
/* 标签内容过渡效果 */
|
||||
.q-tab__content {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 面板过渡效果 */
|
||||
.q-tab-panels {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.q-tab-panel {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
:deep(.body--dark) .q-tab:hover::after {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/* 标签滚动区域样式 */
|
||||
.q-scroll-area {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
:deep(.body--dark) .q-scroll-area {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user