fix: 修复 ant 使用废弃 api 的警告 ⚠️

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 pnpm-lock.yaml
+pnpm-lock.yaml
 
 node_modules
 dist

package.json

@@ -46,21 +46,18 @@
         "i18next": "^23.11.5",
         "i18next-browser-languagedetector": "^8.0.0",
         "rc-virtual-list": "^3.14.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "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",
-        "socket.io-client": "^1.2.0",
-        "sql.js": "^1.10.3",
         "zustand": "^4.5.2"
     },
     "devDependencies": {
         "@faker-js/faker": "^8.4.1",
         "@types/node": "^20.12.12",
-        "@types/react": "^18.2.64",
-        "@types/react-dom": "^18.2.21",
-        "@types/sql.js": "^1.4.9",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^7.1.1",
         "@typescript-eslint/parser": "^7.1.1",
         "@vitejs/plugin-react": "^4.2.1",

src/components/chat-list.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Badge, Flex, List, Typography } from 'antd'
 import VirtualList from 'rc-virtual-list'
-import { memo, useCallback } from 'react'
+import React, { memo, useCallback } from 'react'
 import { formatTime } from '@/utils/format-time'
 import { useWindowSize } from '@reactuses/core'
 // import InfiniteScroll from 'react-infinite-scroll-component'
@@ -13,13 +13,44 @@ interface ChatListProps {
 	height?: number
 }
 
+const ChatListItemExtra: React.FC<{ chat: ChatData }> = memo(({ chat }) => {
+	return (
+		<Flex vertical align="flex-end">
+			<Typography.Text className="text-gray-500 text-xs mb-2">
+				{formatTime(chat.last_message.send_time)}
+			</Typography.Text>
+			<Badge count={chat.dialog_unread_count} />
+		</Flex>
+	)
+})
+
+const ChatListItemTitle: React.FC<{ chat: ChatData }> = memo(({ chat }) => {
+	return (
+		<Typography.Paragraph className="!mb-0" ellipsis={{ rows: 1 }}>
+			{chat.dialog_name}
+		</Typography.Paragraph>
+	)
+})
+
+const ChatListItemAvatar: React.FC<{ chat: ChatData }> = memo(({ chat }) => (
+	<Avatar src={chat.dialog_avatar} size={48} />
+))
+
+const ChatListItemDescription: React.FC<{ chat: ChatData }> = memo(({ chat }) => {
+	return (
+		<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>
+	)
+})
+
 const ChatList: React.FC<ChatListProps> = memo((props) => {
 	const { height } = useWindowSize()
 	const navigate = useNavigate()
 	const params = useParams()
 
 	const onScroll = useCallback(() => {
-		console.log('onScroll')
+		// console.log('onScroll')
 	}, [])
 
 	return (
@@ -38,24 +69,13 @@ const ChatList: React.FC<ChatListProps> = memo((props) => {
 							Number(params.id) === chat.dialog_id && '!bg-primary/90'
 						)}
 						key={chat.dialog_id}
-						extra={
-							<Flex vertical align="flex-end">
-								<Typography.Text className="text-gray-500 text-xs mb-2">
-									{formatTime(chat.last_message.send_time)}
-								</Typography.Text>
-								<Badge count={chat.dialog_unread_count} />
-							</Flex>
-						}
+						extra={<ChatListItemExtra chat={chat} />}
 						onClick={() => navigate(`/dashboard/${chat.dialog_id}`)}
 					>
 						<List.Item.Meta
-							avatar={<Avatar src={chat.dialog_avatar} size={48} />}
-							title={chat.dialog_name}
-							description={
-								<Typography.Paragraph className="text-gray-500 !mb-0" ellipsis={{ rows: 1 }}>
-									{chat.last_message.sender_info.name}:&nbsp;{chat.last_message.content}
-								</Typography.Paragraph>
-							}
+							avatar={<ChatListItemAvatar chat={chat} />}
+							title={<ChatListItemTitle chat={chat} />}
+							description={<ChatListItemDescription chat={chat} />}
 						/>
 					</List.Item>
 				)}

src/components/icon/icon-button.tsx

@@ -1,7 +1,27 @@
 import { memo } from 'react'
+import CustomIcon from '.'
+import clsx from 'clsx'
 
-const IconButton = memo(() => {
-	return ''
-})
+interface IconButtonProps {
+	component: React.ForwardRefExoticComponent<any> | React.FC<React.SVGProps<SVGSVGElement>>
+	className?: string
+	buttonClassName?: string
+}
+
+const IconButton: React.FC<IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>> = memo(
+	({ component, className, buttonClassName, ...props }) => {
+		return (
+			<button
+				className={clsx(
+					'p-2 bg-transparent border-none outline-none rounded-md hover:bg-gray-100 focus:outline-none active:bg-gray-100 duration-300',
+					buttonClassName
+				)}
+				{...props}
+			>
+				<CustomIcon component={component} className={className} />
+			</button>
+		)
+	}
+)
 
 export default IconButton

src/components/layout/layout-drawer.tsx

@@ -66,10 +66,11 @@ const LayoutDrawer: React.FC<Partial<LayoutDrawerProps>> = memo((props) => {
 		<>
 			<Drawer
 				className="p-0"
-				width={width < SMALL_SCREEN ? '70%' : '400'}
+				// width={width < SMALL_SCREEN ? '70%' : '400'}
 				placement="left"
 				closable={false}
 				styles={drawerStyles}
+				style={{ width: width < SMALL_SCREEN ? '70%' : '400px' }}
 				{...props}
 			>
 				<Flex className="w750:px-5 px-3" align="center">

src/components/layout/layout-header.tsx

@@ -1,8 +1,9 @@
 import { $t } from '@/i18n'
 import { MenuOutlined, SearchOutlined } from '@ant-design/icons'
-import { Button, Flex, Typography } from 'antd'
+import { Flex, Typography } from 'antd'
 import { memo, useState } from 'react'
 import LayoutDrawer from './layout-drawer'
+import IconButton from '@/components/icon/icon-button'
 
 export const headerHeight = 64
 
@@ -11,11 +12,10 @@ const LayoutHeader = memo(() => {
 	return (
 		<>
 			<Flex className="sticky top-0 z-10 bg-background pl-3 pr-3" style={{ height: headerHeight }} align="center">
-				<Button
-					className="mr-1"
-					type="text"
-					size="large"
-					icon={<MenuOutlined className="text-gray-500" />}
+				<IconButton
+					className="text-gray-500 text-xl"
+					buttonClassName="mr-1"
+					component={MenuOutlined}
 					onClick={() => setOpen(true)}
 				/>
 				<Flex className="flex-1 bg-background2 h-10 rounded px-5 cursor-pointer" align="center">

src/components/loading.tsx

@@ -1,7 +1,7 @@
 import { $t } from '@/i18n'
 
 const Loading = () => {
-	return <p>{$t('你好11')}</p>
+	return <p>{$t('loading...')}</p>
 }
 
 export default Loading

src/components/messages/message-content/index.tsx

@@ -1,8 +1,21 @@
+import { useElementSize } from '@reactuses/core'
 import { Flex } from 'antd'
-import { memo } from 'react'
+import { memo, useEffect, useRef } from 'react'
 
 const MessageContent = memo(() => {
-	return <Flex className="flex-1">111</Flex>
+	const messageContentRef = useRef<HTMLDivElement>(null)
+
+	const [height] = useElementSize(messageContentRef)
+
+	useEffect(() => {
+		console.log('height', height)
+	}, [height])
+
+	return (
+		<Flex className="flex-1" ref={messageContentRef}>
+			111
+		</Flex>
+	)
 })
 
 export default MessageContent

src/components/messages/message-header/index.tsx

@@ -1,18 +1,44 @@
 import { MoreOutlined, SearchOutlined } from '@ant-design/icons'
-import { Flex, Typography } from 'antd'
-import { memo } from 'react'
+import { Flex, Typography, Dropdown, MenuProps } from 'antd'
+import { memo, useMemo } from 'react'
+import IconButton from '@/components/icon/icon-button'
 
 const MessageHeader = memo(() => {
+	const items = useMemo<MenuProps['items']>(
+		() => [
+			{
+				label: '1nd menu item',
+				key: '0'
+			},
+			{
+				label: '2nd menu item',
+				key: '1'
+			},
+			{
+				type: 'divider'
+			},
+			{
+				label: '3rd menu item',
+				key: '3'
+			}
+		],
+		[]
+	)
+
 	return (
 		<Flex className="min-h-[80px] bg-background pl-5 pr-3" justify="center" vertical>
 			<Flex justify="space-between">
 				<Flex vertical>
 					<Typography.Text className="text-lg">NotionNext 交流群</Typography.Text>
 					<Typography.Text className="text-gray-500 text-base">664位成员</Typography.Text>
 				</Flex>
-				<Flex align="center" gap={4}>
-					<SearchOutlined className="text-gray-500 text-xl" />
-					<MoreOutlined className="text-gray-500 text-2xl" />
+				<Flex align="center" gap={10}>
+					<IconButton className="text-xl text-gray-500" component={SearchOutlined} />
+					<Dropdown menu={{ items }} trigger={['click']}>
+						<a onClick={(e) => e.preventDefault()}>
+							<IconButton className="text-xl text-gray-500" component={MoreOutlined} />
+						</a>
+					</Dropdown>
 				</Flex>
 			</Flex>
 		</Flex>

src/hooks/useDialogHistory.ts

@@ -0,0 +1,18 @@
+import useCommonStore from '@/stores/common'
+import { useEffect } from 'react'
+import { useParams, useLocation } from 'react-router'
+
+function useDialogHistory() {
+	const params = useParams()
+	const location = useLocation()
+	const commonStore = useCommonStore()
+
+	useEffect(() => {
+		if (location.pathname.includes('dashboard')) {
+			// console.log('~ dialog history hook, id changed =>', params.id)
+			commonStore.update({ lastDialogId: Number(params.id || 0) })
+		}
+	}, [params?.id, location.pathname])
+}
+
+export default useDialogHistory

src/pages/dashboard.tsx

@@ -1,8 +1,12 @@
 import { Flex } from 'antd'
 import LayoutSidebar from '@/components/layout/layout-sidebar'
 import { Outlet } from 'react-router'
+import useDialogHistory from '@/hooks/useDialogHistory'
+import { memo } from 'react'
+
+const Dashboard = memo(() => {
+	useDialogHistory()
 
-const Dashboard = () => {
 	return (
 		<div>
 			<Flex align="start">
@@ -13,6 +17,6 @@ const Dashboard = () => {
 			</Flex>
 		</div>
 	)
-}
+})
 
 export default Dashboard

src/stores/common.ts

@@ -4,10 +4,13 @@ import { createJSONStorage, devtools, persist } from 'zustand/middleware'
 import { THEME } from '@/utils/enum'
 import { defaultLanguage } from '@/i18n'
 
+const defaultThemeColor = getComputedStyle(document.documentElement).getPropertyValue('--primary')
+
 const states: CommonOptions = {
 	theme: THEME.LIGHT,
-	themeColor: '#00b96b',
-	lang: defaultLanguage
+	themeColor: `hsl(${defaultThemeColor})`,
+	lang: defaultLanguage,
+	lastDialogId: 0
 }
 
 const actions = (set: any, get: any): CommonStoreMethods => ({

src/types/store.d.ts

@@ -22,6 +22,8 @@ export interface CommonOptions {
 	themeColor: string
 	/** @description 语言 */
 	lang: string
+	/** @description 记录上一次记录的会话 id */
+	lastDialogId: number
 }
 
 export interface CommonStoreMethods {