From 6f58e78000ecfc055ebebc60604f218ce1942f91 Mon Sep 17 00:00:00 2001
From: nongyehong <2439646234@qq.com>
Date: Fri, 19 Jan 2024 09:30:52 +0800
Subject: [PATCH] =?UTF-8?q?:sunflower:=20update(custom):=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E4=B8=BB=E9=A1=B5=E7=9A=84=E6=94=B6=E7=BC=A9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                           |  2 +-
 src/components/windows/ActionBar.vue | 34 +++++++++++++---
 src/hooks/useWindow.ts               | 59 ++++++++++++++++++++++++++++
 src/layout/center/index.vue          | 24 +++++++++--
 src/layout/index.vue                 | 14 +++++--
 src/layout/left/index.vue            |  1 +
 src/layout/right/index.vue           |  2 +-
 src/views/page/Login.vue             | 32 ++++-----------
 src/views/page/QRCode.vue            |  4 +-
 9 files changed, 131 insertions(+), 41 deletions(-)
 create mode 100644 src/hooks/useWindow.ts
diff --git a/index.html b/index.html
index aa5995f0..9a594952 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>Tauri + Vue + TS</title>
 
     <!--引入iconpark图标库-->
-    <script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_2.9ef9b410d0e85e49e138a681a6263412.js"></script>
+    <script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_3.4ce1f367a35de9cc7cfda67d19c58bf6.js"></script>
   </head>
 
   <body>
diff --git a/src/components/windows/ActionBar.vue b/src/components/windows/ActionBar.vue
index dab55365..c77107c0 100644
--- a/src/components/windows/ActionBar.vue
+++ b/src/components/windows/ActionBar.vue
@@ -1,5 +1,10 @@
 <template>
-  <div data-tauri-drag-region class="flex justify-end">
+  <!--  user-select: none让元素不可以选中 -->
+  <div data-tauri-drag-region class="flex justify-end select-none">
+    <!-- 收缩页面 -->
+    <div v-if="shrink" @click="shrinkWindow" class="w-28px h24px flex-center hover:bg-#e7e7e7">
+      <svg class="w-16px h-16px color-#707070 cursor-pointer"><use href="#left-bar"></use></svg>
+    </div>
     <!-- 最小化 -->
     <div v-if="minW" @click="minimizeWindow" class="w-28px h24px flex-center hover:bg-#e7e7e7">
       <img src="@/assets/svg/minimize.svg" class="w-38px h-34px" alt="" />
@@ -23,26 +28,34 @@
 <script setup lang="ts">
 import { closeWindow, maximizeWindow, minimizeWindow, unmaximize } from '@/common/WindowEvent.ts'
 import { appWindow } from '@tauri-apps/api/window'
+import Mitt from '@/utils/Bus'
+import { useWindow } from '@/hooks/useWindow.ts'
 
 /**
- * 新版defineProps可以直接结构 { minW, maxW, closeW }
- * 如果需要使用默认值withDefaults的时候使用新版解构方式会报错
+ * 新版defineProps可以直接结构 { minW, maxW, closeW } 如果需要使用默认值withDefaults的时候使用新版解构方式会报错
+ * @description W结尾为窗口图标是否显示 shrink表示是否收缩图标 shrinkStatus表示是否收缩状态
  * */
 const props = withDefaults(
   defineProps<{
     minW?: boolean
     maxW?: boolean
     closeW?: boolean
+    shrink?: boolean
+    shrinkStatus?: boolean
   }>(),
   {
     minW: true,
     maxW: true,
-    closeW: true
+    closeW: true,
+    shrink: true,
+    shrinkStatus: true
   }
 )
-const { minW, maxW, closeW } = toRefs(props)
+const { minW, maxW, closeW, shrinkStatus } = toRefs(props)
 const windowMaximized = ref(false)
+const { resizeWindow } = useWindow()
 
+// todo 放大的时候图个拖动了窗口，窗口会变回原来的大小，但是图标的状态没有改变
 // // 定义一个可能保存unlisten函数的变量
 // let unlistenMoveEvent = null as any
 //
@@ -70,6 +83,17 @@ const restoreWindow = async () => {
   }
   await checkMaximizedStatus()
 }
+
+/* 收缩窗口 */
+const shrinkWindow = async () => {
+  /*使用mitt给兄弟组件更新*/
+  Mitt.emit('shrinkWindow', shrinkStatus.value)
+  if (shrinkStatus.value) {
+    await resizeWindow('home', 310, 720)
+  } else {
+    await resizeWindow('home', 1050, 720)
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/hooks/useWindow.ts b/src/hooks/useWindow.ts
new file mode 100644
index 00000000..e50a57cc
--- /dev/null
+++ b/src/hooks/useWindow.ts
@@ -0,0 +1,59 @@
+import { WebviewWindow, LogicalSize } from '@tauri-apps/api/window'
+import { autoCloseWindow } from '@/common/WindowEvent.ts'
+
+export const useWindow = () => {
+  /**
+   * 创建窗口
+   * @param label 窗口名称
+   * @param wantCloseWindow 创建后需要关闭的窗口
+   * @param width 窗口宽度
+   * @param height 窗口高度
+   * */
+  const createWebviewWindow = async (label: string, width: number, height: number, wantCloseWindow?: string) => {
+    const webview = new WebviewWindow(label, {
+      url: '/',
+      fullscreen: false,
+      resizable: true,
+      center: true,
+      width: width,
+      height: height,
+      skipTaskbar: false,
+      decorations: false,
+      transparent: true
+    })
+
+    await webview.once('tauri://created', () => {
+      console.log('创建成功')
+      if (wantCloseWindow) {
+        autoCloseWindow(wantCloseWindow)
+      }
+    })
+
+    await webview.once('tauri://error', (e) => {
+      console.error(e)
+    })
+
+    return webview
+  }
+
+  /**
+   * 调整窗口大小
+   * @param label 窗口名称
+   * @param width 窗口宽度
+   * @param height 窗口高度
+   * */
+  const resizeWindow = async (label: string, width: number, height: number) => {
+    const webview = WebviewWindow.getByLabel(label)
+    // 创建一个新的尺寸对象
+    const newSize = new LogicalSize(width, height)
+    // 调用窗口的 setSize 方法进行尺寸调整
+    await webview?.setSize(newSize).catch((error) => {
+      console.error('无法调整窗口大小:', error)
+    })
+  }
+
+  return {
+    createWebviewWindow,
+    resizeWindow
+  }
+}
diff --git a/src/layout/center/index.vue b/src/layout/center/index.vue
index a03b8a45..fa16febd 100644
--- a/src/layout/center/index.vue
+++ b/src/layout/center/index.vue
@@ -1,17 +1,33 @@
 <template>
-  <div class="resizable" :style="{ width: width + 'px', backgroundColor: '#4db652' }">
+  <div data-tauri-drag-region class="resizable" :style="{ width: width + 'px' }">
+    <ActionBar v-if="shrinkStatus" :shrink-status="!shrinkStatus" :max-w="false" />
     中间区域
     <div class="resize-handle" @mousedown="initDrag"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-const minWidth = 160 // 设置最小宽度
+import Mitt from '@/utils/Bus.ts'
+
+const minWidth = 250 // 设置最小宽度
 const maxWidth = 320 // 设置最大宽度
-const width = ref(240) // 初始化宽度
+const width = ref(250) // 初始化宽度
 
 const startX = ref()
 const startWidth = ref()
+const shrinkStatus = ref(false)
+
+// todo 1.了解这里是怎么实现的 2.修改拖拽放大缩小的事件
+Mitt.on('shrinkWindow', (event) => {
+  shrinkStatus.value = event as boolean
+  width.value = 250
+})
+
+// watchEffect(() => {
+//   if (width.value === maxWidth) {
+//     Mitt.emit('shrinkWindow', false)
+//   }
+// })
 
 const initDrag = (e: MouseEvent) => {
   startX.value = e.clientX
@@ -50,7 +66,7 @@ const stopDrag = () => {
   right: 0;
   top: 0;
   bottom: 0;
-  width: 1px;
+  width: 2px;
   cursor: ew-resize;
   background-color: #ccc; /* 可以根据需要更改颜色 */
 }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 819a4f1f..d8d39242 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -2,7 +2,7 @@
   <div class="flex wh-full">
     <Left />
     <Center />
-    <Right />
+    <Right v-if="!shrinkStatus" />
   </div>
 </template>
 
@@ -10,6 +10,14 @@
 import Center from '@/layout/center/index.vue'
 import Left from '@/layout/left/index.vue'
 import Right from '@/layout/right/index.vue'
+import Mitt from '@/utils/Bus'
+/* todo home窗口创建的时候已经设置了resizable: true,可以调整大小了，但是还是不可以调整大小 */
+const shrinkStatus = ref(false)
+/**
+ * event默认如果没有传递值就为true，所以shrinkStatus的值为false就会发生值的变化
+ * 因为shrinkStatus的值为false，所以v-if="!shrinkStatus" 否则right组件刚开始渲染的时候不会显示
+ * */
+Mitt.on('shrinkWindow', async (event) => {
+  shrinkStatus.value = event as boolean
+})
 </script>
-
-<style scoped></style>
diff --git a/src/layout/left/index.vue b/src/layout/left/index.vue
index d6325da2..66879bc1 100644
--- a/src/layout/left/index.vue
+++ b/src/layout/left/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    data-tauri-drag-region
     class="w-60px bg-#AA5757FF h-full pt-10px pl-8px pr-8px pb-10px box-border flex-x-center rounded-tl-8px rounded-bl-8px">
     <img
       @click="toLogin"
diff --git a/src/layout/right/index.vue b/src/layout/right/index.vue
index 5278071c..687d9dbc 100644
--- a/src/layout/right/index.vue
+++ b/src/layout/right/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1 bg-[#f1f1f1ff] h-full rounded-tr-8px rounded-br-8px w-100vw">
+  <div data-tauri-drag-region class="flex-1 bg-#f1f1f1 h-full rounded-tr-8px rounded-br-8px w-100vw">
     <ActionBar />
   </div>
 </template>
diff --git a/src/views/page/Login.vue b/src/views/page/Login.vue
index d48b43b3..857b47ed 100644
--- a/src/views/page/Login.vue
+++ b/src/views/page/Login.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="login-box bg-#f1f1f1 wh-full rounded-8px" @click="handleClickOutside">
+  <!-- todo 这里设置了 data-tauri-drag-region但是有部分区域不可以拖动 -->
+  <div data-tauri-drag-region class="login-box bg-#f1f1f1 wh-full rounded-8px select-none" @click="handleClickOutside">
     <!--顶部操作栏-->
-    <ActionBar :max-w="false" />
+    <ActionBar :max-w="false" :shrink="false" />
 
     <!-- 头像 -->
     <div class="w-full flex-x-center mt-35px mb-25px">
@@ -103,8 +104,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { WebviewWindow } from '@tauri-apps/api/window'
-import { autoCloseWindow } from '@/common/WindowEvent.ts'
+import { useWindow } from '@/hooks/useWindow.ts'
 import router from '@/router'
 
 type Account = {
@@ -139,6 +139,7 @@ const accountOption = ref<Account>([
 ])
 const accountPH = ref('输入HuLa账号')
 const passwordPH = ref('输入HuLa密码')
+const { createWebviewWindow } = useWindow()
 
 watchEffect(() => {
   loginDisabled.value = !(account.value && password.value && protocol.value)
@@ -186,28 +187,9 @@ const toQRCode = () => {
 }
 
 /*登录后创建主页窗口*/
-const loginWin = async () => {
+const loginWin = () => {
   loading.value = true
-  const webview = new WebviewWindow('home', {
-    url: '/',
-    fullscreen: false,
-    resizable: true,
-    center: true,
-    width: 1050,
-    height: 720,
-    skipTaskbar: false,
-    decorations: false,
-    transparent: true
-  })
-  await webview.once('tauri://created', function () {
-    console.log('创建成功')
-    autoCloseWindow('login')
-    loading.value = false
-  })
-  await webview.once('tauri://error', function (e) {
-    console.log(e)
-    loading.value = false
-  })
+  createWebviewWindow('home', 1050, 720, 'login')
 }
 </script>
 
diff --git a/src/views/page/QRCode.vue b/src/views/page/QRCode.vue
index b004061c..e42f4be7 100644
--- a/src/views/page/QRCode.vue
+++ b/src/views/page/QRCode.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-#f1f1f1 wh-full rounded-8px">
+  <div data-tauri-drag-region class="bg-#f1f1f1 wh-full rounded-8px select-none">
     <!--顶部操作栏-->
-    <ActionBar :max-w="false" />
+    <ActionBar :max-w="false" :shrink="false" />
 
     <n-flex justify="center" class="font-size-28px color-#189f57 mt-25px">HuLA</n-flex>
 
