feat: 添加存储

cossteam · Jun 3, 2024 · fe4834e · fe4834e
1 parent 59faa35
commit fe4834e
Show file tree

Hide file tree

Showing 42 changed files with 5,274 additions and 251 deletions.
diff --git a/electron/main/update.ts b/electron/main/update.ts
@@ -0,0 +1 @@
+// TODO: Implement update logic
diff --git a/package.json b/package.json
@@ -58,7 +58,6 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-infinite-scroll-component": "^6.1.0",
-        "react-router": "^6.23.1",
         "react-router-dom": "^6.23.1",
         "zustand": "^4.5.2"
     },
@@ -92,4 +91,4 @@
         "vue-auto-translate": "^1.1.13"
     },
     "main": "dist-electron/main.js"
-}
+}
diff --git a/specification.md b/specification.md
@@ -34,3 +34,17 @@
 -   build: 构建
 -   ci: 持续集成
 -   chore: 其他修改
+
+# 五、其他规范
+
+1.所有需要多语言化的文字都应该使用 `$t('xxx')` 包裹，这样可以自动根据当前语言切换显示。
+
+```ts
+import { $t } from '@/i18n'
+
+const Component = () => {
+    return <div>{$t('这是中文')}</div>
+}
+
+return Component
+```
diff --git a/src/app.tsx b/src/app.tsx
@@ -2,7 +2,7 @@ import { ConfigProvider } from 'antd'
 import { Suspense, useEffect, useState } from 'react'
 import useCommonStore from '@/stores/common'
 import Loading from '@/components/loading'
-import { useRoutes } from 'react-router'
+import { useRoutes } from 'react-router-dom'
 import routes from '~react-pages'
 import { App as AppComponent } from 'antd'
 import useAuth from '@/hooks/useLogin'
@@ -13,6 +13,9 @@ import { Locale } from 'antd/es/locale'
 import Call from '@/components/call'
 
 const App = () => {
+    // 鉴权
+    useAuth()
+
     const commonStore = useCommonStore()
 
     const [locale, setLocal] = useState<Locale>(enUS)
@@ -27,17 +30,13 @@ const App = () => {
         }
     }, [])
 
-    // 鉴权
-    useAuth()
-
     return (
         <ConfigProvider
             theme={{
                 token: {
                     colorPrimary: commonStore.themeColor,
                     borderRadius: 4,
                     fontSize: 16
-                    // colorBgElevated: 'transparent'
                 }
             }}
             locale={locale}

diff --git a/src/components/badge.tsx b/src/components/badge.tsx
diff --git a/src/components/chat-list.tsx b/src/components/chat-list.tsx
@@ -2,7 +2,7 @@ import { Avatar, Flex, Badge, List, Typography } from 'antd'
 import React, { useCallback } from 'react'
 import { formatTime } from '@/utils/format-time'
 import { headerHeight } from '@/components/layout/layout-header'
-import { useNavigate, useParams } from 'react-router'
+import { useNavigate, useParams } from 'react-router-dom'
 import clsx from 'clsx'
 import VirtualizerList from '@/components/virtualizer-list'
 import useMobile from '@/hooks/useMobile'
@@ -43,11 +43,7 @@ const ChatList: React.FC<ChatListProps> = (props) => {
 
     return (
         <List>
-            <VirtualizerList
-                listHeight={height - headerHeight}
-                count={props.data.length}
-                renderItem={renderItem}
-            />
+            <VirtualizerList listHeight={height - headerHeight} count={props.data.length} renderItem={renderItem} />
         </List>
     )
 }
@@ -71,16 +67,11 @@ const ChatListItemTitle: React.FC<{ chat: ChatData }> = ({ chat }) => {
     )
 }
 
-const ChatListItemAvatar: React.FC<{ chat: ChatData }> = ({ chat }) => (
-    <Avatar src={chat.dialog_avatar} size={48} />
-)
+const ChatListItemAvatar: React.FC<{ chat: ChatData }> = ({ chat }) => <Avatar src={chat.dialog_avatar} size={48} />
 
 const ChatListItemDescription: React.FC<{ chat: ChatData }> = ({ chat }) => {
     return (
-        <Typography.Paragraph
-            className="text-gray-500 !mb-0 -mt-[4px] text-base"
-            ellipsis={{ rows: 1 }}
-        >
+        <Typography.Paragraph className="text-gray-500 !mb-0 -mt-[4px] text-base" ellipsis={{ rows: 1 }}>
             {chat.last_message.sender_info.name}:&nbsp;{chat.last_message.content}
         </Typography.Paragraph>
     )

diff --git a/src/components/layout/layout-drawer.tsx b/src/components/layout/layout-drawer.tsx
@@ -15,7 +15,7 @@ import GroupCreate from '@/components/group/group-create'
 import SettingList from '@/components/setting-list'
 import useMobile from '@/hooks/useMobile'
 import useUserStore from '@/stores/user'
-import { useNavigate } from 'react-router'
+import { useNavigate } from 'react-router-dom'
 import { createFingerprint } from '@/utils/fingerprint'
 import { getUserInfoApi } from '@/api/user'
 
@@ -130,11 +130,7 @@ const LayoutDrawer: React.FC<Partial<LayoutDrawerProps>> = (props) => {
                 {...props}
             >
                 <Flex className="mobile:px-5 px-3" align="center">
-                    <Avatar
-                        className="mr-4 min-w-[64px] min-h-[64px]"
-                        src={userInfo.avatar}
-                        size={64}
-                    />
+                    <Avatar className="mr-4 min-w-[64px] min-h-[64px]" src={userInfo.avatar} size={64} />
                     <Flex vertical>
                         <Typography.Text className="!mb-1 font-bold mobile:text-xl text-lg">
                             {userInfo.nickname}
@@ -155,22 +151,15 @@ const LayoutDrawer: React.FC<Partial<LayoutDrawerProps>> = (props) => {
                             gap="middle"
                             onClick={() => handlerMenusClick(item, index)}
                         >
-                            <CustomIcon
-                                className="mobile:text-2xl text-xl text-gray-500"
-                                component={item.icon}
-                            />
-                            <Typography.Text className="mobile:text-lg text-base">
-                                {item.title}
-                            </Typography.Text>
+                            <CustomIcon className="mobile:text-2xl text-xl text-gray-500" component={item.icon} />
+                            <Typography.Text className="mobile:text-lg text-base">{item.title}</Typography.Text>
                         </Flex>
                     ))}
                     <Flex
                         className="mobile:py-3 py-2 mobile:px-5 px-4 select-none hover:bg-background-hover cursor-pointer rounded"
                         gap="middle"
                         justify="space-between"
-                        onClick={() =>
-                            commonStore.update({ theme: isLight ? THEME.DARK : THEME.LIGHT })
-                        }
+                        onClick={() => commonStore.update({ theme: isLight ? THEME.DARK : THEME.LIGHT })}
                     >
                         <Flex gap="middle">
                             <CustomIcon
@@ -196,12 +185,7 @@ const LayoutDrawer: React.FC<Partial<LayoutDrawerProps>> = (props) => {
                 </Flex>
             </Drawer>
 
-            <Modal
-                open={modalOpen}
-                title={modalTitle}
-                onCancel={() => setModalOpen(false)}
-                footer={null}
-            >
+            <Modal open={modalOpen} title={modalTitle} onCancel={() => setModalOpen(false)} footer={null}>
                 {Component}
             </Modal>
 

diff --git a/src/components/messages/message-content/index.tsx b/src/components/messages/message-content/index.tsx
@@ -6,6 +6,7 @@ import MessageItem from './message-item'
 import InfiniteScroll from '@/components/infinite-scroll'
 // import VirtualList from '@/components/virtualizer-list/virtual-list'
 
+// TODO: 优化虚拟列表
 const MessageContent = () => {
     const parentRef = useRef<HTMLDivElement>(null)
     const [, height] = useElementSize(parentRef)
@@ -81,12 +82,7 @@ const MessageContent = () => {
 				isScrollToEnd
 			/> */}
 
-            <InfiniteScroll
-                dataLength={count}
-                next={loadMoreData}
-                height={height}
-                reverse={reverse}
-            >
+            <InfiniteScroll dataLength={count} next={loadMoreData} height={height} reverse={reverse}>
                 {data.reverse().map((_, index) => renderItem(index))}
             </InfiniteScroll>
             {/* <VirtualList data={data} itemHeight={50} height={height} children={renderItem} /> */}

diff --git a/src/components/virtualizer-list/virtual-list.tsx b/src/components/virtualizer-list/virtual-list.tsx
@@ -15,6 +15,7 @@ interface VirtualListProps<T = any> {
     children: (index: number) => React.ReactNode
 }
 
+// TODO: modify all the code to use Virtual
 const VirtualList: React.FC<VirtualListProps> = ({ data, itemHeight, height, children }) => {
     const containerRef = useRef<HTMLDivElement>(null)
     const [visibleData, setVisibleData] = useState<DataItem[]>([])

diff --git a/src/components/virtualizer-list/virtual.ts b/src/components/virtualizer-list/virtual.ts
@@ -6,6 +6,8 @@ export interface VirtualProps<T> {
     renderItem: (item: T, index: number) => JSX.Element
     onResize?: (height: number) => void
 }
+
+// TODO: implement Virtual class
 class Virtual<T> {
     data: T[]
     visibleData: T[]

diff --git a/src/hooks/useCache.ts b/src/hooks/useCache.ts
@@ -0,0 +1,13 @@
+import storage from '@/storage'
+
+function useCache() {
+    const cacheContactList = storage.contact_list.toArray()
+    const cacheGroupList = storage.groups_list.toArray()
+
+    return {
+        cacheContactList,
+        cacheGroupList
+    }
+}
+
+export default useCache
diff --git a/src/hooks/useDefer.ts b/src/hooks/useDefer.ts
@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react'
  *      Array.from({ length: 100 }).map((_,index)=> defer(index) ? <div>自定义内容<div> : null)
  * }
  */
-const useDefer = (max = 20) => {
+function useDefer(max = 20) {
     const [isRendering, setIsRendering] = useState<boolean>(true)
     const [isRenderFinish, setIsRenderFinish] = useState<boolean>(false)
 

diff --git a/src/hooks/useDialogHistory.ts b/src/hooks/useDialogHistory.ts
@@ -1,6 +1,6 @@
 import useCommonStore from '@/stores/common'
 import { useEffect } from 'react'
-import { useParams, useLocation } from 'react-router'
+import { useParams, useLocation } from 'react-router-dom'
 
 function useDialogHistory() {
     const params = useParams()

diff --git a/src/hooks/useDraggable.ts b/src/hooks/useDraggable.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-const useDraggable = (el: HTMLElement | null) => {
+function useDraggable(el: HTMLElement | null) {
     const [isDraggable, setIsDraggable] = useState(false)
 
     const handleMouseDown = (e: MouseEvent) => {

diff --git a/src/hooks/useLogin.ts b/src/hooks/useLogin.ts
@@ -1,6 +1,6 @@
 import useUserStore from '@/stores/user'
 import { useEffect } from 'react'
-import { useNavigate, useLocation } from 'react-router'
+import { useNavigate, useLocation } from 'react-router-dom'
 
 function useAuth() {
     const userStore = useUserStore()

diff --git a/src/hooks/useLongPress.ts b/src/hooks/useLongPress.ts
@@ -6,10 +6,7 @@ interface LongPressOptions {
     data: any
 }
 
-export default function useLongPress(
-    el: React.MutableRefObject<HTMLElement | null>,
-    options?: LongPressOptions
-) {
+function useLongPress(el: React.MutableRefObject<HTMLElement | null>, options?: LongPressOptions) {
     const timerRef = useRef<NodeJS.Timeout | null>(null)
     const scrollingRef = useRef<boolean>(false)
 
@@ -54,3 +51,5 @@ export default function useLongPress(
         }
     }, [])
 }
+
+export default useLongPress