diff --git a/src/css/app.css b/src/css/app.css
index 1a343b9..199868f 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -160,3 +160,46 @@ body {
.q-tooltip[data-v-anchor="center right"] {
transform-origin: center left;
}
+
+
+.full-height {
+ height: 100vh;
+}
+
+.config-page-container {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+}
+
+.background-layer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 0;
+}
+
+/* 毛玻璃效果叠加 */
+body.glass-effect-menu .q-card.command {
+ background: rgba(255, 255, 255, calc(0.3 + var(--glass-effect-strength) * 0.01)) !important;
+}
+
+body.body--dark.glass-effect-menu .q-card.command {
+ background: rgba(30, 30, 30, calc(0.3 + var(--glass-effect-strength) * 0.02)) !important;
+}
+
+/* 标签栏毛玻璃效果 */
+body.glass-effect-menu .q-tabs {
+ background: rgba(255, 255, 255, calc(0.15 + var(--glass-effect-strength) * 0.01)) !important;
+ backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
+ -webkit-backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+body.body--dark.glass-effect-menu .q-tabs {
+ background: rgba(0, 0, 0, calc(0.2 + var(--glass-effect-strength) * 0.02)) !important;
+ border-right: 1px solid rgba(255, 255, 255, 0.05);
+}
diff --git a/src/js/options/defaultProfile.js b/src/js/options/defaultProfile.js
index 4678744..cfbea16 100644
--- a/src/js/options/defaultProfile.js
+++ b/src/js/options/defaultProfile.js
@@ -3,7 +3,8 @@ export default {
commandCardStyle: "dense",
primaryColor: "#009688",
defaultPrimaryColor: "#009688",
- backgroundImg: null,
+ backgroundImgLight: "",
+ backgroundImgDark: "",
autofocusSearch: false,
denseTagBar: false,
quickFileEnable: false,
@@ -13,6 +14,7 @@ export default {
pluNickNameEnable: false,
pluNickNameTag: "别名",
autoDetachFeatures: [],
+ glassEffect: 0,
},
native: {
crontabs: {},
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index b6d2200..d982a6e 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -1,5 +1,21 @@
-
+
+
@@ -27,11 +41,8 @@
v-for="tag in allQuickCommandTags"
:key="tag"
:name="tag"
- :content-class="
- tag === '搜索结果' || activatedQuickPanels.includes(tag)
- ? 'text-blue-7 text-weight-bolder'
- : ''
- "
+ :data-search-result="tag === '搜索结果'"
+ :data-active-panel="activatedQuickPanels.includes(tag)"
>
{{ tag }}
@@ -48,16 +59,10 @@
: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
+ transition-prev="slide-down"
+ transition-next="slide-up"
>
- {{ $q.dark.isActive ? '切换到亮色模式' : '切换到暗色模式' }}
+ {{ $q.dark.isActive ? "切换到亮色模式" : "切换到暗色模式" }}
@@ -373,7 +378,7 @@ export default {
// 启用的面板
this.activatedQuickPanels = quickpanels;
},
- // 获取所有的快捷命令（导出的格式）
+ // 获取所有的命令（导出的格式）
getAllQuickCommands() {
this.allQuickCommands = _.cloneDeep(defaultCommands);
this.$root.utools.getAll("qc_").forEach((x) => {
@@ -392,7 +397,7 @@ export default {
])
.filter((x) => x);
},
- // 监听命令变更事件
+ // 监听命令变更件
commandChanged(event) {
switch (event.type) {
case "remove":
@@ -457,7 +462,7 @@ export default {
};
this.isCommandEditorShow = true;
},
- // 是否为默认命令
+ // 是否为认命令
isDefaultCommand(code) {
return code.slice(0, 8) === "default_";
},
@@ -494,9 +499,10 @@ export default {
this.$nextTick(() => {
let el = document.getElementById(code);
el.scrollIntoViewIfNeeded();
- el.querySelector('.q-card').style.boxShadow = "0px 1px var(--q-primary)";
+ el.querySelector(".q-card").style.boxShadow =
+ "0px 1px var(--q-primary)";
setTimeout(() => {
- el.querySelector('.q-card').style.boxShadow = "";
+ el.querySelector(".q-card").style.boxShadow = "";
}, 5000);
// 跳转标签
document
@@ -504,7 +510,7 @@ export default {
.scrollIntoView({ behavior: "smooth" });
});
},
- // 修改并定位当前标签
+ // 修改并定位当前标签事件
changeCurrentTag(tagName) {
this.currentTag = tagName;
this.$nextTick(() => {
@@ -575,7 +581,7 @@ export default {
// 搜索时跳转到搜索结果标签
this.changeCurrentTag(searchTagName);
} else {
- // 清空搜索回跳到之前标签
+ // 清空搜索回跳到前标签
if (this.allQuickCommandTags.slice(-1)[0] === searchTagName)
this.allQuickCommandTags.pop();
if (this.currentTag !== this.lastTag)
@@ -639,20 +645,42 @@ export default {