feat: 新增「猫咪设置 > 窗口设置 > 透明度」配置项 (#65)

src/components/pro-list-item/index.vue

@@ -2,10 +2,11 @@
 import { Flex } from 'ant-design-vue'
 import { computed, useSlots } from 'vue'
 
-const { title, icon, description } = defineProps<{
+const { title, icon, description, vertical } = defineProps<{
   title: string
   icon?: string
   description?: string
+  vertical?: boolean
 }>()
 
 const slots = useSlots()
@@ -19,7 +20,13 @@ const hasDescription = computed(() => {
 </script>
 
 <template>
-  <Flex align="center" class="b b-color-2 rounded-lg b-solid p-4" justify="space-between">
+  <Flex
+    :align="vertical ? void 0 : 'center'"
+    class="b b-color-2 rounded-lg b-solid p-4"
+    gap="middle"
+    justify="space-between"
+    :vertical="vertical"
+  >
     <Flex align="center">
       <slot name="icon">
         <div class="text-4" :class="icon" />
@@ -30,7 +37,10 @@ const hasDescription = computed(() => {
           {{ title }}
         </div>
 
-        <div class="text-xs [&_a]:(active:text-color-primary-7 hover:text-color-primary-5 text-color-3) text-color-3" :class="{ 'mt-2': hasDescription }">
+        <div
+          class="text-xs [&_a]:(active:text-color-primary-7 hover:text-color-primary-5 text-color-3) text-color-3"
+          :class="{ 'mt-2': hasDescription }"
+        >
           <slot name="description">
             {{ description }}
           </slot>

src/pages/cat/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SelectProps } from 'ant-design-vue'
 
-import { Select, Switch } from 'ant-design-vue'
+import { Select, Slider, Switch } from 'ant-design-vue'
 
 import ProList from '@/components/pro-list/index.vue'
 import ProListItem from '@/components/pro-list-item/index.vue'
@@ -32,5 +32,9 @@ const modeList: SelectProps['options'] = [
     <ProListItem description="启用后，窗口不影响对其他应用程序的操作" title="窗口穿透">
       <Switch v-model:checked="catStore.penetrable" />
     </ProListItem>
+
+    <ProListItem title="透明度" vertical>
+      <Slider v-model:value="catStore.opacity" class="m-0!" />
+    </ProListItem>
   </ProList>
 </template>

src/pages/main/index.vue

@@ -52,6 +52,7 @@ function resolveImageURL(key: string) {
 <template>
   <div
     class="relative children:(absolute h-screen w-screen)"
+    :style="{ opacity: catStore.opacity / 100 }"
     @mousedown="handleWindowDrag"
   >
     <img :src="`/images/backgrounds/${catStore.mode}.png`">

src/stores/cat.ts

@@ -4,9 +4,11 @@ import { ref } from 'vue'
 export const useCatStore = defineStore('cat', () => {
   const mode = ref<'standard' | 'keyboard'>('standard')
   const penetrable = ref(false)
+  const opacity = ref(100)
 
   return {
     mode,
     penetrable,
+    opacity,
   }
 })