🌻 update(custom): 更新悬浮按钮样式，修复已知的部分问题

2024-03-07 02:05:19 +08:00
parent acc01945d4
commit 1f01b7b80c
10 changed files with 154 additions and 79 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,43 @@
+## <small>1.2.8-alpha (2024-03-06)</small>
+
+* :bug: fix(custom): 回退vite版本5.0.12导致启动不了端口服务的问题 ([ba99bb2](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/ba99bb2))
+* :bug: fix(custom): 修复新建窗口的问题，修复窗口背景的问题 ([f1010e4](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/f1010e4))
+* :bug: fix(custom): 修复已知的问题 ([600e224](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/600e224))
+* :bug: fix(custom): 修复因为配置的问题导致的代码格式化 ([ed4d825](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/ed4d825))
+* :lipstick: style(custom): 使用.editorconfig和.gitattributes来约束行分隔符和编辑器设置 ([72808d8](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/72808d8))
+* :sparkles: feat(custom): 新增登录页面样式 ([8f0d27e](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/8f0d27e))
+* :sparkles: feat(custom): 新增动态页面 ([196d2d1](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/196d2d1))
+* :sparkles: feat(custom): 新增好友和群聊详情页 ([b11593d](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/b11593d))
+* :sparkles: feat(custom): 新增好友聊天页面设置侧边栏 ([6a1688b](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/6a1688b))
+* :sparkles: feat(custom): 新增护眼主题，隐藏窗口默认顶部菜单栏，优化rust打包配置 ([295bde5](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/295bde5))
+* :sparkles: feat(custom): 新增聊天页面的总体样式 ([5e21671](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/5e21671))
+* :sparkles: feat(custom): 新增输入框功能 ([009c3b0](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/009c3b0))
+* :sparkles: feat(custom): 新增拖拽排序、消息移除功能 ([393a689](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/393a689))
+* :sparkles: feat(custom): 新增消息气泡功能（第一版） ([2f2bd45](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/2f2bd45))
+* :sparkles: feat(custom): 新增右键菜单功能，修复隐藏顶部菜单栏后无法拖拽的问题 ([1b6e719](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/1b6e719))
+* :sparkles: feat(custom): 新增元素平滑上升的vue指令 ([e973799](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/e973799))
+* :sparkles: feat(custom): 新增主题切换功能，修复一些已知的问题 ([b6f668f](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/b6f668f))
+* :sparkles: feat(custom): 新增unocss及其插件 ([2af6767](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/2af6767))
+* :sunflower: update(custom): 更新侧边栏功能显示 ([acc0194](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/acc0194))
+* :sunflower: update(custom): 更新登录页面的样式，新增二维码登录页面 ([3fbc6b0](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/3fbc6b0))
+* :sunflower: update(custom): 更新登录页面和多窗口的样式 ([be6bc2d](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/be6bc2d))
+* :sunflower: update(custom): 更新登录页面样式，更新主页的列表样式 ([ad69ada](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/ad69ada))
+* :sunflower: update(custom): 更新聊天框页面的图标样式 ([60bc859](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/60bc859))
+* :sunflower: update(custom): 更新图标，新增系统托盘功能 ([3f1ea39](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/3f1ea39))
+* :sunflower: update(custom): 更新图标风格和主题颜色 ([db566cd](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/db566cd))
+* :sunflower: update(custom): 更新依赖版本 ([5c26e4e](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/5c26e4e))
+* :sunflower: update(custom): 更新用户列表样式 ([80ff121](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/80ff121))
+* :sunflower: update(custom): 更新右键菜单到信息和用户列表中 ([487767c](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/487767c))
+* :sunflower: update(custom): 更新右键菜单位置抉择 ([070d1e6](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/070d1e6))
+* :sunflower: update(custom): 更新右键菜单样式，新增聊天输入框右键菜单 ([4224cbd](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/4224cbd))
+* :sunflower: update(custom): 更新主页的收缩功能 ([6f58e78](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/6f58e78))
+* :sunflower: update(custom): 更新主页的样式 ([bf94200](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/bf94200))
+* :sunflower: update(custom): 更新主页的样式 ([6a39060](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/6a39060))
+* :sunflower: update(custom): 更新主页消息列表样式 ([910a6c4](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/910a6c4))
+* :sunflower: update(custom): 升级vue、vue-tsc、TS、vite版本 ([27e7bd0](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/27e7bd0))
+
+
+
 ## 1.0.0-alpha (2023-12-16)

 * :new: version(custom): 发布v1.0.0-alpha版本 ([d2ac653](https://gitee.com/nongyehong/HuLa-IM-Tauri/commits/d2ac653))
--- 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_63.de195ae6484b5e9104a9599e1be84393.js"></script>
+    <script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_65.b5d5f1a1bd93fac2f65940a74ac82f80.js"></script>
  </head>

  <body>
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
  },
  "package": {
    "productName": "HuLa-IM-Tauri",
-    "version": "v1.2.8-alpha"
+    "version": "1.2.8-alpha"
  },
  "tauri": {
    "allowlist": {
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@ import { storeToRefs } from 'pinia'
 const themeStore = theme()
 const { THEME } = storeToRefs(themeStore)

+/* 禁止图片以及输入框的拖拽 */
 const preventDrag = (e: MouseEvent) => {
  const event = e.target as HTMLElement
  // 检查目标元素是否是<img>元素
@@ -27,14 +28,16 @@ onMounted(() => {
  }
  document.documentElement.dataset.theme = THEME.value
  window.addEventListener('dragstart', preventDrag)
-  /* 禁用浏览器默认的快捷键 */
-  window.addEventListener('keydown', (e) => {
-    if (e.ctrlKey || e.metaKey || e.altKey) {
-      e.preventDefault()
-    }
-  })
-  /* 禁止右键菜单 */
-  window.addEventListener('contextmenu', (e) => e.preventDefault(), false)
+  // /* 禁用浏览器默认的快捷键 */
+  // window.addEventListener('keydown', (e) => {
+  //   // 排除ctrl+c ctrl+v
+  //   if (e.ctrlKey && (e.key === 'c' || e.key === 'v')) return
+  //   if (e.ctrlKey || e.metaKey || e.altKey) {
+  //     e.preventDefault()
+  //   }
+  // })
+  // /* 禁止右键菜单 */
+  // window.addEventListener('contextmenu', (e) => e.preventDefault(), false)
 })

 onUnmounted(() => {
--- a/src/components/rightBox/chatBox/chatHeader.vue
+++ b/src/components/rightBox/chatBox/chatHeader.vue
@@ -214,7 +214,7 @@ onUnmounted(() => {
 }

 .sidebar {
-  @apply flex flex-col absolute top-44px right-0 z-999 bg-[--bg-chat-drawer] p-22px box-border w-320px h-100vh shadow-[0_14px_14px_rgba(0,0,0,0.35)];
+  @apply flex flex-col absolute top-44px right-0 bg-[--bg-chat-drawer] p-22px box-border w-320px h-100vh shadow-[0_14px_14px_rgba(0,0,0,0.35)];
 }

 /*! 使用vue内置transition做过渡效果 */
--- a/src/components/rightBox/chatBox/chatMain.vue
+++ b/src/components/rightBox/chatBox/chatMain.vue
@@ -2,7 +2,7 @@
  <!-- 中间聊天内容(使用虚拟列表) -->
  <n-virtual-list
    ref="virtualListInst"
-    style="max-height: calc(100vh - 260px)"
+    style="max-height: calc(100vh - 260px); position: relative"
    item-resizable
    padding-bottom="10px"
    :item-size="42"
@@ -77,6 +77,30 @@
      </main>
    </template>
  </n-virtual-list>
+
+  <!--  悬浮按钮提示(头部悬浮) // TODO 要结合已读未读功能来判断之前的信息有多少没有读，当现在的距离没有到最底部并且又有新消息来未读的时候显示下标的更多信息 (nyh -> 2024-03-07 01:27:22)-->
+  <header class="float-header">
+    <div class="float-box">
+      <n-flex justify="space-between" align="center">
+        <n-icon :color="'rgba(5,150,105,0.5)'">
+          <svg><use href="#double-up"></use></svg>
+        </n-icon>
+        <span class="text-12px">xx条新信息</span>
+      </n-flex>
+    </div>
+  </header>
+
+  <!-- 悬浮按钮提示(底部悬浮) -->
+  <footer class="float-footer">
+    <div class="float-box">
+      <n-flex justify="space-between" align="center">
+        <n-icon :color="'rgba(5,150,105,0.5)'">
+          <svg><use href="#double-down"></use></svg>
+        </n-icon>
+        <span class="text-12px">xx条新信息</span>
+      </n-flex>
+    </div>
+  </footer>
 </template>
 <script setup lang="ts">
 import { MsgEnum, RoomTypeEnum } from '@/enums'
@@ -233,6 +257,13 @@ onUnmounted(() => {
    color: var(--text-color);
  }
 }
+@mixin float($position: top) {
+  @if $position == bottom {
+    @apply fixed z-10 bottom-210px right-50px w-fit select-none text-#059669 cursor-pointer;
+  } @else {
+    @apply fixed z-10 top-80px right-50px w-fit select-none text-#059669 cursor-pointer;
+  }
+}
 .chat-single:first-child {
  padding-top: 16px;
 }
@@ -248,4 +279,20 @@ onUnmounted(() => {
  @extend .bubble-oneself;
  @apply flex flex-col items-start gap-6px max-w-380px;
 }
+.float-header {
+  @include float;
+}
+.float-footer {
+  @include float(bottom);
+}
+.float-box {
+  background-color: #fff;
+  border-radius: 50px;
+  padding: 6px 8px;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  &:hover {
+    background-color: rgb(215, 229, 219);
+  }
+}
 </style>
--- a/src/hooks/useWindow.ts
+++ b/src/hooks/useWindow.ts
@@ -42,29 +42,31 @@ export const useWindow = () => {
      fileDropEnabled: isDrag
    })

-    // TODO 这里如果主页刷新页面这样传递过来的label就没有了从而导致isExistsWinds为空的问题 (nyh -> 2024-03-06 06:33:38)
-    const isExistsWinds = WebviewWindow.getByLabel(label)
-    // TODO 页面刷新后很多状态会丢失，虽然上线打包后可以禁用刷新但难免会有些人会触发刷新，需要解决这个刷新后状态丢失问题 (nyh -> 2024-03-06 06:32:03)
-    if (isExistsWinds) {
-      // 如果窗口已存在，首先检查是否最小化了
-      const minimized = await webview.isMinimized()
-      if (minimized) {
-        // 如果已最小化，恢复窗口
-        await webview.unminimize()
-      }
-      // 如果窗口已存在，则给它焦点，使其在最前面显示
-      await webview.setFocus()
-    } else {
-      await webview.once('tauri://created', async () => {
-        await invoke('reset_set_window', { label }).catch((error) => {
-          console.error('设置窗口阴影失败:', error)
-        })
-        if (wantCloseWindow) {
-          await autoCloseWindow(wantCloseWindow)
-        }
+    await webview.once('tauri://created', async () => {
+      await invoke('reset_set_window', { label }).catch((error) => {
+        console.error('设置窗口阴影失败:', error)
      })
-      return webview
-    }
+      if (wantCloseWindow) {
+        await autoCloseWindow(wantCloseWindow)
+      }
+    })
+
+    await webview.once('tauri://error', async () => {
+      // TODO 这里利用错误处理的方式来查询是否是已经创建了窗口,如果一开始就使用WebviewWindow.getByLabel来查询在刷新的时候就会出现问题 (nyh -> 2024-03-06 23:54:17)
+      const isExistsWinds = WebviewWindow.getByLabel(label)
+      if (isExistsWinds) {
+        // 如果窗口已存在，首先检查是否最小化了
+        const minimized = await webview.isMinimized()
+        if (minimized) {
+          // 如果已最小化，恢复窗口
+          await webview.unminimize()
+        }
+        // 如果窗口已存在，则给它焦点，使其在最前面显示
+        await webview.setFocus()
+      }
+    })
+
+    return webview
  }

  /**
--- a/src/hooks/useWindowState.ts
+++ b/src/hooks/useWindowState.ts
@@ -0,0 +1,20 @@
+import { WebviewWindow } from '@tauri-apps/api/window'
+import { sendMsg } from '@/common/CrossTabMsg.ts'
+
+export const useWindowState = (label: string) => {
+  const win = WebviewWindow.getByLabel(label)
+
+  // TODO 可以尝试使用win.emit来取代自定义封装的跨标签页通信 (nyh -> 2024-03-05 07:15:42)
+  watchEffect(() => {
+    win?.listen('windowsClose', (e) => {
+      sendMsg('windowsShow', e)
+    })
+  })
+
+  onMounted(async () => {
+    const isShow = await win?.isVisible()
+    if (isShow) {
+      sendMsg('windowsShow', label)
+    }
+  })
+}
--- a/src/views/home-window/Dynamic.vue
+++ b/src/views/home-window/Dynamic.vue
@@ -2,7 +2,7 @@
  <!-- TODO 项目初次启动然后初次打开窗口时候这个页面的样式没有渲染出来 (nyh -> 2024-03-04 05:30:15) -->
  <!-- TODO 我需要点击最左边侧边栏时候的选中样式（如果是淡出弹出窗口就把图标点亮但是不用设置背景颜色，然后如果关闭了对应窗口就把图标恢复原来的样式） (nyh -> 2024-03-04 05:32:03) -->
  <main class="wh-full bg-[--right-bg-color]">
-    <ActionBar :shrink="false" :max-w="false" :top-win-label="currentWindowLabel" :current-label="currentWindowLabel" />
+    <ActionBar :shrink="false" :max-w="false" :top-win-label="appWindow.label" :current-label="appWindow.label" />
    <article class="flex flex-col items-center text-[--text-color] wh-full bg-[--right-bg-color]">
      <n-scrollbar
        style="max-height: calc(100vh - 20px)"
@@ -65,26 +65,8 @@
 </template>
 <script setup lang="ts">
 import { dynamicList } from '@/mock'
-import { appWindow, WebviewWindow } from '@tauri-apps/api/window'
-import { sendMsg } from '@/common/CrossTabMsg.ts'
+import { appWindow } from '@tauri-apps/api/window'
+import { useWindowState } from '@/hooks/useWindowState.ts'

-// 获取当前窗口的标签
-const currentWindowLabel = computed(() => {
-  return appWindow.label
-})
-const win = WebviewWindow.getByLabel(currentWindowLabel.value)
-
-// TODO 可以尝试使用win.emit来取代自定义封装的跨标签页通信 (nyh -> 2024-03-05 07:15:42)
-watchEffect(() => {
-  win?.listen('windowsClose', (e) => {
-    sendMsg('windowsShow', e)
-  })
-})
-
-onMounted(async () => {
-  const isShow = await win?.isVisible()
-  if (isShow) {
-    sendMsg('windowsShow', currentWindowLabel.value)
-  }
-})
+useWindowState(appWindow.label)
 </script>
--- a/src/views/home-window/Mail.vue
+++ b/src/views/home-window/Mail.vue
@@ -1,32 +1,13 @@
 <template>
  <div class="wh-full bg-[--right-bg-color]">
-    <ActionBar :shrink="false" :current-label="currentWindowLabel" />
+    <ActionBar :shrink="false" :current-label="appWindow.label" />

    <p>邮箱</p>
  </div>
 </template>
 <script setup lang="ts">
-import { appWindow, WebviewWindow } from '@tauri-apps/api/window'
-import { sendMsg } from '@/common/CrossTabMsg.ts'
-// 获取当前窗口的标签
-const currentWindowLabel = computed(() => {
-  return appWindow.label
-})
-const win = WebviewWindow.getByLabel(currentWindowLabel.value)
-// TODO 可以尝试使用win.emit来取代自定义封装的跨标签页通信 (nyh -> 2024-03-05 07:15:42)
+import { appWindow } from '@tauri-apps/api/window'
+import { useWindowState } from '@/hooks/useWindowState.ts'

-watchEffect(() => {
-  win?.listen('windowsClose', (e) => {
-    sendMsg('windowsShow', e)
-  })
-})
-
-onMounted(async () => {
-  const isShow = await win?.isVisible()
-  if (isShow) {
-    sendMsg('windowsShow', currentWindowLabel.value)
-  }
-})
+useWindowState(appWindow.label)
 </script>
-
-<style scoped></style>