feat(Mask): add mask button setting

src/App.vue

@@ -71,6 +71,20 @@ onMounted(async () => {
     localStore.set("curKeyMappingIndex", curKeyMappingIndex);
   }
   store.curKeyMappingIndex = curKeyMappingIndex;
+
+  // loading maskButton from local store
+  let maskButton = await localStore.get<{
+    show: boolean;
+    transparency: number;
+  }>("maskButton");
+  if (maskButton === null) {
+    maskButton = {
+      show: true,
+      transparency: 0.5,
+    };
+    await localStore.set("maskButton", maskButton);
+  }
+  store.maskButton = maskButton;
 });
 </script>
 

src/components/Mask.vue

@@ -65,7 +65,11 @@ function toStartServer() {
   </div>
   <template v-if="store.keyMappingConfigList.length">
     <div @contextmenu.prevent class="mask" id="maskElement"></div>
-    <div class="button-layer">
+    <div
+      v-if="store.maskButton.show"
+      :style="'--transparency: ' + store.maskButton.transparency"
+      class="button-layer"
+    >
       <!-- <div style="position: absolute;height: 100%;width: 1px;background-color: red;left: 50%;"></div>
       <div style="position: absolute;width: 100%;height: 1px;background-color: red;top: 56.6%;"></div> -->
       <template
@@ -133,18 +137,20 @@ function toStartServer() {
   z-index: 1;
 
   & > .mask-button {
+    opacity: var(--transparency);
     position: absolute;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: black;
-    color: rgba(255, 255, 255, 0.6);
+    color: white;
     border-radius: 5px;
     padding: 5px;
     font-size: 12px;
   }
 
   & > .mask-steering-wheel {
+    opacity: var(--transparency);
     position: absolute;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: black;
-    color: rgba(255, 255, 255, 0.6);
+    color: white;
     border-radius: 50%;
     width: 150px;
     height: 150px;

src/components/setting/Mask.vue

@@ -13,6 +13,9 @@ import {
   NIcon,
   FormInst,
   useMessage,
+  NSlider,
+  NFormItem,
+  NCheckbox,
 } from "naive-ui";
 import {
   LogicalPosition,
@@ -24,12 +27,14 @@ import {
 import { Store } from "@tauri-apps/plugin-store";
 import { SettingsOutline } from "@vicons/ionicons5";
 import { UnlistenFn } from "@tauri-apps/api/event";
+import { useGlobalStore } from "../../store/global";
 
 let unlistenResize: UnlistenFn = () => {};
 let unlistenMove: UnlistenFn = () => {};
 let factor = 1;
 
 const localStore = new Store("store.bin");
+const store = useGlobalStore();
 const message = useMessage();
 const formRef = ref<FormInst | null>(null);
 
@@ -158,20 +163,23 @@ onUnmounted(() => {
 
 <template>
   <div class="setting-page">
-    <NFlex justify="space-between" align="center">
+    <NH4 prefix="bar">按键提示</NH4>
-      <NH4 prefix="bar">蒙版调整</NH4>
+    <NFormItem label="是否显示" label-placement="left">
-      <NButton
+      <NCheckbox
-        tertiary
+        v-model:checked="store.maskButton.show"
-        circle
+        @update:checked="localStore.set('maskButton', store.maskButton)"
-        type="primary"
+      />
-        @click="handleAdjustClick"
+    </NFormItem>
-        style="margin-right: 20px"
+    <NFormItem label="不透明度" label-placement="left">
-      >
+      <NSlider
-        <template #icon>
+        v-model:value="store.maskButton.transparency"
-          <NIcon><SettingsOutline /></NIcon>
+        @update:checked="localStore.set('maskButton', store.maskButton)"
-        </template>
+        :min="0"
-      </NButton>
+        :max="1"
-    </NFlex>
+        :step="0.01"
+        style="max-width: 300px"
+      ></NSlider>
+    </NFormItem>
 
     <NForm
       ref="formRef"
@@ -181,6 +189,20 @@ onUnmounted(() => {
       label-width="auto"
       require-mark-placement="right-hanging"
     >
+      <NFlex justify="space-between" align="center">
+        <NH4 prefix="bar">蒙版调整</NH4>
+        <NButton
+          tertiary
+          circle
+          type="primary"
+          @click="handleAdjustClick"
+          style="margin-right: 20px"
+        >
+          <template #icon>
+            <NIcon><SettingsOutline /></NIcon>
+          </template>
+        </NButton>
+      </NFlex>
       <NGrid :cols="2" :x-gap="24">
         <NFormItemGi label="X" path="posX">
           <NInputNumber

src/store/global.ts

@@ -34,6 +34,11 @@ export const useGlobalStore = defineStore("global", () => {
   const curKeyMappingIndex = ref(0);
   const editKeyMappingList: Ref<KeyMapping[]> = ref([]);
 
+  const maskButton = ref({
+    transparency: 0.5,
+    show: true,
+  });
+
   function applyEditKeyMappingList(): boolean {
     const set = new Set<string>();
     for (const keyMapping of editKeyMappingList.value) {
@@ -82,6 +87,7 @@ export const useGlobalStore = defineStore("global", () => {
     keyMappingConfigList,
     curKeyMappingIndex,
     editKeyMappingList,
+    maskButton,
     applyEditKeyMappingList,
     resetEditKeyMappingList,
     setKeyMappingIndex,