fix(view): 🐛 修复一些页面拖动区域问题

closed #25

src/layout/index.vue

@@ -24,7 +24,6 @@ Mitt.on(MittEnum.SHRINK_WINDOW, (event) => {
 })
 
 onMounted(async () => {
-  const w = await getCurrentWebviewWindow()
-  w.show()
+  await getCurrentWebviewWindow().show()
 })
 </script>

src/layout/right/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <main class="flex-1 bg-[--right-bg-color] h-full w-100vw min-w-600px">
-    <div class="size-full" style="background: var(--right-theme-bg-color)">
+  <main data-tauri-drag-region class="flex-1 bg-[--right-bg-color] h-full w-100vw min-w-600px">
+    <div class="size-full" style="background: var(--right-theme-bg-color)" data-tauri-drag-region>
       <ActionBar :current-label="appWindow.label" />
       <!-- 需要判断当前路由是否是信息详情界面 -->
       <ChatBox :active-item="activeItem" v-if="msgBoxShow && isChat && activeItem !== -1" />
@@ -8,7 +8,7 @@
       <Details :content="DetailsContent" v-else-if="detailsShow && isDetails" />
 
       <!-- 聊天界面背景图标 -->
-      <div v-else class="flex-center size-full select-none">
+      <div v-else class="flex-center size-full select-none" data-tauri-drag-region>
         <img
           v-if="imgTheme === ThemeEnum.DARK && themes.versatile === 'default'"
           class="w-110px h-100px"
@@ -34,7 +34,7 @@ const msgBoxShow = ref(false)
 const detailsShow = ref(false)
 const activeItem = ref()
 const DetailsContent = ref()
-const imgTheme = ref(themes.value.content)
+const imgTheme = ref<ThemeEnum>(themes.value.content)
 const prefers = matchMedia('(prefers-color-scheme: dark)')
 // 判断当前路由是否是聊天界面
 const isChat = computed(() => {

src/typings/stores.d.ts

@@ -1,6 +1,6 @@
 /** pinia的store的命名空间 */
 declare namespace STO {
-  import { ShowModeEnum } from '@/enums'
+  import { ShowModeEnum, ThemeEnum } from '@/enums'
   /**
    * 设置
    * @param themes 主题设置
@@ -14,7 +14,7 @@ declare namespace STO {
   type Setting = {
     /** 主题设置 */
     themes: {
-      content: string
+      content: ThemeEnum
       pattern: string
       versatile: string
     }

src/views/homeWindow/Dynamic.vue

@@ -7,7 +7,12 @@
       :current-label="WebviewWindow.getCurrent().label" />
 
     <!-- 头部用户信息栏 -->
-    <n-flex align="center" justify="center" :size="20" class="login-box relative h-160px w-full select-none">
+    <n-flex
+      data-tauri-drag-region
+      align="center"
+      justify="center"
+      :size="20"
+      class="login-box relative h-160px w-full select-none">
       <n-avatar :size="120" round bordered :src="login.accountInfo.avatar" />
       <n-flex vertical justify="center" :size="20">
         <p class="text-(24px [--chat-text-color]) font-500">{{ login.accountInfo.name }}</p>

src/views/homeWindow/more/About.vue

@@ -2,8 +2,8 @@
   <main class="login-box size-full select-none">
     <ActionBar :shrink="false" :max-w="false" />
 
-    <n-flex vertical align="center" :size="20" class="size-full pt-100px">
-      <div @mousemove="handleMouseMove" @mouseleave="handleMouseLeave" class="box">
+    <n-flex vertical align="center" :size="20" class="size-full pt-100px" data-tauri-drag-region>
+      <div @mousemove="handleMouseMove" @mouseleave="handleMouseLeave" class="box" data-tauri-drag-region>
         <div id="computer" class="computer">
           <img class="w-224px h-158px relative" src="@/assets/img/win.png" alt="" />
           <div
@@ -16,8 +16,8 @@
         </div>
       </div>
 
-      <n-flex vertical align="center" :size="20">
-        <span class="text-(15px #707070)">版本：v{{ _pkg.version }}({{ osArch }})</span>
+      <n-flex vertical align="center" :size="20" class="cursor-default" data-tauri-drag-region>
+        <span class="text-(15px #707070)">版本：{{ _pkg.version }}({{ osArch }})</span>
         <span class="text-(15px #707070)">当前设备：{{ osType }}{{ osVersion }}</span>
         <n-flex vertical class="text-(12px #909090)" :size="8" align="center">
           <span>Copyright © {{ currentYear - 1 }}-{{ currentYear }} nongyehong</span>

src/views/homeWindow/more/settings/Foot.vue

@@ -3,7 +3,7 @@
     <div class="flex items-center justify-center gap-8px">
       <svg class="size-18px"><use href="#SmilingFace"></use></svg>
       <p class="text-(12px #777)">喜欢这款的产品？ 在</p>
-      <n-popover v-model:show="isStar" style="padding: 0" trigger="click" placement="top">
+      <n-popover v-model:show="isStar" style="padding: 0" trigger="hover" placement="top">
         <template #trigger>
           <p class="text-(12px #13987f) cursor-pointer">GitHub 给添加星标</p>
         </template>
@@ -35,7 +35,7 @@
         </n-flex>
       </n-popover>
       <p class="text-(12px #777)">并</p>
-      <n-popover v-model:show="isIssue" style="padding: 0" trigger="click" placement="top-end">
+      <n-popover v-model:show="isIssue" style="padding: 0" trigger="hover" placement="top-end">
         <template #trigger>
           <p class="text-(12px #13987f) cursor-pointer">分享您宝贵的建议</p>
         </template>

src/views/homeWindow/more/settings/LoginSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 登录设置 -->
-  <n-flex vertical :size="20">
+  <n-flex vertical :size="20" data-tauri-drag-region>
     <n-flex :size="14" vertical class="item-box">
       <n-flex align="center" justify="space-between">
         <span>启动HuLa程序后自动登录账号</span>

src/views/homeWindow/more/settings/index.vue

@@ -36,11 +36,14 @@
     <section class="bg-[--right-bg-color] relative rounded-r-8px flex-1 border-l-(1px solid [--line-color])">
       <ActionBar :shrink="false" :max-w="false" />
 
-      <header class="header">
+      <header class="header" data-tauri-drag-region>
         {{ title }}
       </header>
 
-      <n-scrollbar style="max-height: calc(100vh - 70px)" :class="{ 'shadow-inner': page.shadow }">
+      <n-scrollbar
+        style="max-height: calc(100vh - 70px)"
+        :class="{ 'shadow-inner': page.shadow }"
+        data-tauri-drag-region>
         <n-flex vertical class="p-24px" :size="12" justify="center" v-if="skeleton">
           <n-skeleton class="rounded-8px" height="26px" text style="width: 30%" />
           <n-skeleton class="rounded-8px" height="26px" text :repeat="5" />

src/views/homeWindow/onlineStatus/index.vue

@@ -6,16 +6,17 @@
       vertical
       :size="130"
       :style="`background: linear-gradient(to bottom, ${RGBA} 0%, #f1f1f1 100%)`"
-      class="size-full p-20px box-border">
+      class="size-full p-20px box-border"
+      data-tauri-drag-region>
       <!-- 当前选中的状态 -->
-      <n-flex justify="center" align="center" class="pt-80px">
+      <n-flex justify="center" align="center" class="pt-80px" data-tauri-drag-region>
         <img class="w-34px h-34px" :src="activeItem.url" alt="" />
         <span class="text-22px">{{ activeItem.title }}</span>
       </n-flex>
 
       <!-- 状态 -->
-      <n-flex vertical class="w-full h-100vh bg-#f1f1f1 rounded-6px box-border p-13px">
-        <n-scrollbar style="max-height: 255px">
+      <n-flex vertical class="w-full h-100vh bg-#f1f1f1 rounded-6px box-border p-13px" data-tauri-drag-region>
+        <n-scrollbar style="max-height: 215px">
           <n-flex align="center" :size="10">
             <n-flex
               @click="handleActive(item, index)"

src/views/homeWindow/robot/layout/Left.vue

@@ -1,10 +1,10 @@
 <template>
   <n-flex
+    data-tauri-drag-region
     vertical
     :size="0"
-    data-tauri-drag-region
     class="bg-[--chat-left-bg] select-none w-300px h-full p-[40px_20px_6px_20px] box-border">
-    <n-flex vertical :size="30">
+    <n-flex vertical :size="30" data-tauri-drag-region>
       <!-- 标题 -->
       <n-flex justify="space-between" align="center" :size="0">
         <n-flex :size="4" vertical>
@@ -91,7 +91,7 @@
     </n-flex>
 
     <!-- 底部选项栏 -->
-    <n-flex :size="6" justify="space-between" align="center" class="m-[auto_0_10px_0]">
+    <n-flex data-tauri-drag-region :size="6" justify="space-between" align="center" class="m-[auto_0_10px_0]">
       <n-flex :size="4" align="center">
         <div
           @click="jump"

src/views/homeWindow/robot/views/Chat.vue

@@ -2,7 +2,7 @@
   <!-- 主体内容 -->
   <!--  // TODO 考虑是否需要添加一个欢迎页面，而不是直接使用聊天窗口 (nyh -> 2024-07-01 10:44:14)-->
   <main>
-    <div class="flex truncate p-[8px_20px_14px_20px] justify-between items-center gap-50px">
+    <div data-tauri-drag-region class="flex truncate p-[8px_20px_14px_20px] justify-between items-center gap-50px">
       <n-flex :size="10" vertical class="truncate">
         <p
           v-if="!isEdit"

src/views/homeWindow/robot/views/Welcome.vue

@@ -1,9 +1,9 @@
 <template>
-  <n-flex vertical :size="10" align="center" justify="center" class="flex flex-1">
+  <n-flex data-tauri-drag-region vertical :size="10" align="center" justify="center" class="flex flex-1">
     <!-- logo -->
-    <img class="w-275px h-125px drop-shadow-2xl" src="@/assets/logo/hula.png" alt="" />
+    <img data-tauri-drag-region class="w-275px h-125px drop-shadow-2xl" src="@/assets/logo/hula.png" alt="" />
 
-    <n-flex vertical justify="center" :size="16" class="p-[30px_20px]">
+    <n-flex data-tauri-drag-region vertical justify="center" :size="16" class="p-[30px_20px]">
       <p class="text-(14px [--chat-text-color])">你可以尝试使用以下功能：</p>
       <n-scrollbar style="max-height: calc(100vh - 210px)">
         <n-flex style="padding: 6px" align="center" :size="[24, 16]">

src/views/loginWindow/Login.vue

@@ -6,9 +6,9 @@
     <ActionBar :max-w="false" :shrink="false" />
 
     <!--  手动登录样式  -->
-    <n-flex vertical :size="25" v-if="!isAutoLogin">
+    <n-flex vertical :size="25" v-if="!isAutoLogin" data-tauri-drag-region>
       <!-- 头像 -->
-      <n-flex justify="center" class="w-full mt-35px">
+      <n-flex justify="center" class="w-full pt-35px" data-tauri-drag-region>
         <img
           class="w-80px h-80px rounded-50% bg-#b6d6d9ff border-(2px solid #fff)"
           :src="info.avatar || '/logo.png'"
@@ -16,7 +16,7 @@
       </n-flex>
 
       <!-- 登录菜单 -->
-      <n-flex class="ma text-center h-full w-260px" vertical :size="16">
+      <n-flex class="ma text-center h-full w-260px" vertical :size="16" data-tauri-drag-region>
         <n-input
           style="padding-left: 20px"
           size="large"
@@ -95,7 +95,7 @@
     </n-flex>
 
     <!-- 自动登录样式 -->
-    <n-flex vertical :size="29" v-else>
+    <n-flex vertical :size="29" v-else data-tauri-drag-region>
       <n-flex justify="center" class="mt-15px">
         <img src="@/assets/logo/hula.png" class="w-140px h-60px" alt="" />
       </n-flex>
@@ -129,7 +129,7 @@
     </n-flex>
 
     <!-- 底部操作栏 -->
-    <n-flex justify="center" class="text-14px" id="bottomBar">
+    <n-flex justify="center" class="text-14px" id="bottomBar" data-tauri-drag-region>
       <div class="color-#13987f cursor-pointer" @click="router.push('/qrCode')">扫码登录</div>
       <div class="w-1px h-14px bg-#ccc"></div>
       <div v-if="isAutoLogin" class="color-#13987f cursor-pointer">移除账号</div>

src/views/loginWindow/QRCode.vue

@@ -1,14 +1,14 @@
 <template>
   <n-config-provider :theme="lightTheme" data-tauri-drag-region class="login-box size-full rounded-8px select-none">
     <!--顶部操作栏-->
-    <ActionBar :max-w="false" :shrink="false" />
+    <ActionBar :max-w="false" :shrink="false" data-tauri-drag-region />
 
-    <n-flex justify="center" class="mt-15px">
-      <img src="@/assets/logo/hula.png" class="w-140px h-60px drop-shadow-xl" alt="" />
+    <n-flex justify="center" class="mt-15px" data-tauri-drag-region>
+      <img src="@/assets/logo/hula.png" class="w-140px h-60px drop-shadow-xl" alt="" data-tauri-drag-region />
     </n-flex>
 
     <!-- 二维码 -->
-    <n-flex justify="center" class="mt-25px">
+    <n-flex justify="center" class="mt-25px" data-tauri-drag-region>
       <n-skeleton v-if="loading" style="border-radius: 12px" :width="204" :height="204" :sharp="false" size="medium" />
       <n-qr-code
         v-else
@@ -32,8 +32,8 @@
 
     <n-flex justify="center" class="mt-15px text-(14px #808080)">{{ loadText }}</n-flex>
 
-    <!-- 顶部操作栏 -->
-    <n-flex justify="center" class="text-14px mt-48px">
+    <!-- 底部操作栏 -->
+    <n-flex justify="center" class="text-14px mt-48px" data-tauri-drag-region>
       <div class="color-#13987f cursor-pointer" @click="router.push('/login')">账密登录</div>
       <div class="w-1px h-14px bg-#ccc"></div>
       <div class="color-#13987f cursor-pointer">注册账号</div>