fix(component): 🐛 修复输入框换行不兼容webkit的问题

新增群聊成员检索功能｜更新依赖版本｜优化账密登录输入框提示和跳转

package.json

@@ -44,15 +44,14 @@
     "@tauri-apps/plugin-os": "2.0.0",
     "@tauri-apps/plugin-process": "2.0.0",
     "@tauri-apps/plugin-updater": "~2",
-    "axios": "^1.7.4",
     "colorthief": "^2.4.0",
     "dayjs": "^1.11.11",
     "grapheme-splitter": "^1.0.4",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "naive-ui": "^2.40.1",
     "pinia": "^2.2.1",
-    "pinia-plugin-persistedstate": "^3.2.1",
+    "pinia-plugin-persistedstate": "^4.1.2",
     "pinia-shared-state": "^0.5.1",
     "vue": "^3.5.11",
     "vue-draggable-plus": "^0.5.3",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hula"
-version = "2.5.1"
+version = "2.5.3"
 description = "hula"
 authors = ["nongyehong"]
 license = ""

src/components/common/ContextMenu.vue

@@ -156,7 +156,7 @@ const handleEnter = (el: any) => {
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       el.style.height = `${h}px`
-      el.style.transition = '0.3s'
+      el.style.transition = '0.2s'
     })
   })
 }

src/components/rightBox/chatBox/ChatFooter.vue

@@ -85,6 +85,16 @@
     <div class="pl-20px flex flex-col items-end gap-6px">
       <MsgInput ref="MsgInputRef" />
     </div>
+
+    <div v-if="isGuest" class="fuzzy">
+      <n-flex align="center" :size="0" class="pb-60px text-(14px [--text-color])">
+        <p>当前为</p>
+        <p class="color-#c14053 px-2px">游客模式</p>
+        <p>，请</p>
+        <p @click="logout(true)" class="color-#13987f px-4px cursor-pointer">扫码登录</p>
+        <p>后使用</p>
+      </n-flex>
+    </div>
   </main>
 </template>
 
@@ -94,12 +104,20 @@ import { LimitEnum, MsgEnum } from '@/enums'
 import { useCommon } from '@/hooks/useCommon.ts'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { emit } from '@tauri-apps/api/event'
+import { useLogin } from '@/hooks/useLogin.ts'
+import { useSettingStore } from '@/stores/setting.ts'
 
+const { logout } = useLogin()
 const { open, onChange, reset } = useFileDialog()
+const { login } = useSettingStore()
 const MsgInputRef = ref()
 const msgInputDom = ref()
 const emojiShow = ref()
 const { insertNode, triggerInputEvent, getEditorRange, imgPaste, FileOrVideoPaste } = useCommon()
+/**
+ * 是否为游客模式
+ */
+const isGuest = computed(() => login.accountInfo.token === 'test')
 
 /**
  * 选择表情，并把表情插入输入框
@@ -149,7 +167,9 @@ onChange((files) => {
 })
 
 onMounted(() => {
-  msgInputDom.value = MsgInputRef.value.messageInputDom
+  if (MsgInputRef.value) {
+    msgInputDom.value = MsgInputRef.value.messageInputDom
+  }
 })
 </script>
 
@@ -165,6 +185,13 @@ onMounted(() => {
   }
 }
 
+.fuzzy {
+  @apply bg-transparent select-none cursor-default size-full absolute-flex-center;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
 :deep(.n-input .n-input-wrapper) {
   padding: 0;
 }

src/components/rightBox/chatBox/ChatSidebar.vue

@@ -20,12 +20,13 @@
 
     <n-flex v-if="!isSearch" align="center" justify="space-between" class="pr-8px pl-8px h-42px">
       <span class="text-14px">群聊成员&nbsp;{{ userList.length }}</span>
-      <svg @click="handleSearch" class="size-14px"><use href="#search"></use></svg>
+      <svg @click="handleSelect" class="size-14px"><use href="#search"></use></svg>
     </n-flex>
     <!-- 搜索框 -->
     <n-flex v-else align="center" class="pr-8px h-42px">
       <n-input
-        @blur="isSearch = false"
+        :on-input="handleSearch"
+        @blur="handleBlur"
         ref="inputInstRef"
         v-model:value="searchRef"
         clearable
@@ -47,7 +48,7 @@
       style="max-height: calc(100vh - 130px)"
       item-resizable
       :item-size="42"
-      :items="userList">
+      :items="filteredUserList">
       <template #default="{ item }">
         <n-popover
           @update:show="handlePopoverUpdate(item.uid)"
@@ -103,6 +104,7 @@ import { useGroupStore } from '@/stores/group.ts'
 import { useUserInfo } from '@/hooks/useCached.ts'
 import { useGlobalStore } from '@/stores/global.ts'
 import type { UserItem } from '@/services/types.ts'
+import { useDebounceFn } from '@vueuse/core'
 
 const groupStore = useGroupStore()
 const globalStore = useGlobalStore()
@@ -117,6 +119,7 @@ const userList = computed(() => {
     }
   })
 })
+const filteredUserList = shallowRef(userList.value)
 const isGroup = computed(() => globalStore.currentSession?.type === RoomTypeEnum.GROUP)
 /** 是否是搜索模式 */
 const isSearch = ref(false)
@@ -128,13 +131,30 @@ const isCollapsed = ref(true)
 const { optionsList, report, selectKey } = useChatMain()
 const { handlePopoverUpdate } = usePopover(selectKey, 'image-chat-sidebar')
 
-const handleSearch = () => {
+const handleSelect = () => {
   isSearch.value = !isSearch.value
   nextTick(() => {
     inputInstRef.value?.select()
   })
 }
 
+/**
+ * 重置搜索状态
+ */
+const handleBlur = () => {
+  isSearch.value = false
+  searchRef.value = ''
+  filteredUserList.value = userList.value
+}
+
+/**
+ * 监听搜索输入过滤用户
+ * @param value 输入值
+ */
+const handleSearch = useDebounceFn((value: string) => {
+  filteredUserList.value = userList.value.filter((user) => user.name.toLowerCase().includes(value.toLowerCase()))
+}, 10)
+
 onMounted(() => {
   Mitt.on(`${MittEnum.INFO_POPOVER}-Sidebar`, (event: any) => {
     selectKey.value = event.uid

src/components/windows/ActionBar.vue

@@ -84,7 +84,6 @@ import { useAlwaysOnTopStore } from '@/stores/alwaysOnTop.ts'
 import { useSettingStore } from '@/stores/setting.ts'
 import { emit, listen } from '@tauri-apps/api/event'
 import { CloseBxEnum, EventEnum, MittEnum } from '@/enums'
-import { PersistedStateOptions } from 'pinia-plugin-persistedstate'
 import { exit } from '@tauri-apps/plugin-process'
 import { type } from '@tauri-apps/plugin-os'
 
@@ -190,7 +189,7 @@ const handleConfirm = async () => {
 }
 
 /** 监听是否按下esc */
-const isEsc = (e: PersistedStateOptions) => {
+const isEsc = (e: KeyboardEvent) => {
   // 判断按下的是否是esc
   if (e.key === 'Escape' && escClose.value) {
     handleCloseWin()

src/hooks/useChatMain.ts

@@ -282,12 +282,14 @@ export const useChatMain = (activeItem?: SessionItem) => {
     // 计算距离底部的距离
     // const distanceFromBottom = scrollHeight - scrollTop.value - clientHeight
     // 判断是否滚动到顶部
-    if (scrollTop.value === 0) {
-      // 记录顶部最后一条消息的下标
-      // historyIndex.value = chatMessageList.value[0].message.id
-      if (messageOptions.value?.isLoading) return
-      chatStore.loadMore()
-    }
+    requestAnimationFrame(async () => {
+      if (scrollTop.value === 0) {
+        // 记录顶部最后一条消息的下标
+        // historyIndex.value = chatMessageList.value[0].message.id
+        if (messageOptions.value?.isLoading) return
+        await chatStore.loadMore()
+      }
+    })
     // // 判断是否大于100
     // if (distanceFromBottom > 100) {
     //   floatFooter.value = true

src/hooks/useLogin.ts

@@ -14,16 +14,22 @@ export const useLogin = () => {
     await emit('login_success')
   }
 
-  /** 登出账号 */
-
-  const logout = async () => {
+  /**
+   * 登出账号
+   * @param isToQrcode 是否返回到二维码页面
+   */
+  const logout = async (isToQrcode = false) => {
     const { createWebviewWindow } = useWindow()
     localStorage.removeItem('USER_INFO')
     localStorage.removeItem('TOKEN')
     // todo 退出账号 需要关闭其他的全部窗口
     await createWebviewWindow('登录', 'login', 320, 448, 'home', false, 320, 448).then(() => {
       emit(EventEnum.LOGOUT)
       emit('logout_success')
+      // 用于跳转到二维码页面
+      if (isToQrcode) {
+        localStorage.setItem('isToQrcode', '1')
+      }
     })
   }
 

src/services/apis.ts

@@ -1,4 +1,3 @@
-// import { createAxios } from '@/services/request'
 import urls from '@/services/urls'
 import type {
   BadgeType,
@@ -21,14 +20,8 @@ import type {
   UserItem
 } from '@/services/types'
 
-// const request = createAxios()
 import request from '@/services/request'
 
-// const GET = <T>(url: string, params?: any) => request.get<T, Response>(url, params)
-// const POST = <T>(url: string, params?: any) => request.post<T, Response>(url, params)
-// const PUT = <T>(url: string, params?: any) => request.put<T, Response>(url, params)
-// const DELETE = <T>(url: string, params?: any) => request.delete<T, Response>(url, params)
-
 const GET = <T>(url: string, params?: any) => request.get<T>(url, params)
 const POST = <T>(url: string, params?: any) => request.post<T>(url, params)
 const PUT = <T>(url: string, params?: any) => request.put<T>(url, params)