feat: added the function of fixed window

Synaptrix · Mar 13, 2023 · 54acb77 · 54acb77
1 parent c08f687
commit 54acb77
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 29 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,22 +1,32 @@
 <script setup lang="ts">
 import { appWindow } from '@tauri-apps/api/window'
+import { IconHistory } from '@arco-design/web-vue/es/icon'
 import { initSQL } from '@/sqls'
-import { useThemeStore, useUuidStore, useRecordStore } from '@/stores'
+import {
+  useThemeStore,
+  useUuidStore,
+  useRecordStore,
+  useFixedStore
+} from '@/stores'
 
 initSQL()
 
 const { themeClass } = storeToRefs(useThemeStore())
 const { uuid } = storeToRefs(useUuidStore())
 const { recordList } = storeToRefs(useRecordStore())
+const { isFix } = storeToRefs(useFixedStore())
 
 const borderClass = ref('bordered')
 
 onMounted(async () => {
   // 监听窗口有无获取焦点
   appWindow.onFocusChanged(({ payload }) => {
     if (!payload) {
-      // appWindow.hide()
-      borderClass.value = 'bordered-transparent'
+      if (isFix.value) {
+        borderClass.value = 'bordered-transparent'
+      } else {
+        // appWindow.hide()
+      }
     } else {
       borderClass.value = 'bordered'
     }
@@ -25,30 +35,32 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Suspense>
-    <div
-      class="app relative flex h-screen flex-col overflow-hidden rounded-xl"
-      :class="[themeClass, borderClass]"
-    >
-      <div class="fixed top-4 right-4">
-        <!-- 主题切换 -->
-        <Theme />
-      </div>
-
-      <!-- 内容区 -->
-      <ul class="flex-1 cursor-move overflow-auto p-4" data-tauri-drag-region>
-        <!-- <li v-for="(item, index) of recordList.slice(1)" :key="index">
+  <div
+    class="app relative flex h-screen flex-col overflow-hidden rounded-xl"
+    :class="[themeClass, borderClass]"
+  >
+    <div class="text-6 fixed top-4 right-4 flex flex-col gap-4">
+      <!-- 历史记录 -->
+      <IconHistory />
+      <!-- 主题切换 -->
+      <Theme />
+      <!-- 窗口固定 -->
+      <Fixed />
+    </div>
+
+    <!-- 内容区 -->
+    <ul class="flex-1 cursor-move overflow-auto p-4" data-tauri-drag-region>
+      <!-- <li v-for="(item, index) of recordList.slice(1)" :key="index">
           <Avatar :value="!(index % 2) ? uuid : undefined" />
         </li> -->
-        <li class="cursor-auto" v-for="item in 100" :key="item">
-          {{ item }}
-        </li>
-      </ul>
+      <li class="cursor-auto py-2" v-for="item in 100" :key="item">
+        {{ item }}
+      </li>
+    </ul>
 
-      <!-- 输入框 -->
-      <Input />
-    </div>
-  </Suspense>
+    <!-- 输入框 -->
+    <Input />
+  </div>
 </template>
 
 <style scoped lang="scss">

diff --git a/src/components/Fixed/index.vue b/src/components/Fixed/index.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useFixedStore } from '@/stores'
+import { IconPushpin } from '@arco-design/web-vue/es/icon'
+
+const { isFix } = storeToRefs(useFixedStore())
+</script>
+
+<template>
+  <div class="swap swap-rotate" @click="isFix = !isFix">
+    <input type="checkbox" v-model="isFix" />
+
+    <IconPushpin class="swap-on text-[rgb(var(--arcoblue-6))]" />
+
+    <div class="swap-off">
+      <IconPushpin class="-rotate-45" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Theme/index.vue b/src/components/Theme/index.vue
@@ -14,8 +14,8 @@ const checked = computed(() => themeMode.value === THEME.light)
   <div class="swap swap-rotate" @click="toggleTheme">
     <input type="checkbox" v-model="checked" />
 
-    <icon-moon class="swap-on text-7" />
+    <IconMoon class="swap-on" />
 
-    <icon-sun class="swap-off text-7" />
+    <IconSun class="swap-off" />
   </div>
 </template>
diff --git a/src/sqls/index.ts b/src/sqls/index.ts
@@ -29,8 +29,6 @@ export const executeSQL = async (sql: string) => {
       await db.execute(sql)
     }
   } catch (error) {
-    console.log('error', error)
-
     let action
 
     switch (sliceSQL) {

diff --git a/src/stores/fixed.ts b/src/stores/fixed.ts
@@ -0,0 +1,7 @@
+export const useFixedStore = defineStore('fixedStore', () => {
+  const isFix = ref(false)
+
+  return {
+    isFix
+  }
+})
diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -2,3 +2,4 @@ export * from './theme'
 export * from './uuid'
 export * from './record'
 export * from './role'
+export * from './fixed'
diff --git a/src/stores/role.ts b/src/stores/role.ts
@@ -14,7 +14,7 @@ export const useRoleStore = defineStore(
       if (currentRole.value) {
         // 检查角色是否还存在
         const findRole = roleList.value.find(
-          (role) => role.id === currentRole.value!.id
+          (role) => role.id === currentRole.value?.id
         )
 
         if (findRole) return