🌻 update(custom): 更新主页的收缩功能

2024-01-19 09:30:52 +08:00
parent 3fbc6b0f19
commit 6f58e78000
9 changed files with 131 additions and 41 deletions
--- 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>
--- 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">
--- a/src/hooks/useWindow.ts
+++ 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
+  }
+}
--- 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; /* 可以根据需要更改颜色 */
 }
--- 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>
--- 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"
--- 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>
--- 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>

--- 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>