feat: 添加dayjs&会话列表部分内容

package.json

@@ -17,6 +17,7 @@
  "antd": "^5.14.0",
  "axios": "^1.6.7",
  "axios-hooks": "^5.0.2",
+ "dayjs": "^1.11.10",
  "dotenv": "^16.4.1",
  "localforage": "^1.10.0",
  "lodash": "^4.17.21",

src/components/Sider/ChatSider/ChatItem/index.tsx

@@ -1,8 +1,36 @@
-import React from 'react'
+import { Badge, Flex, Typography } from 'antd'
+import dayjs from 'dayjs'
+import { useThemeToken, useTime } from '@/hooks'
+import type { Chat } from '@/typings'
+
+interface ChatItemProps {
+ chat: Chat
+}
+
+function ChatItem({ chat }: ChatItemProps) {
+ const { token } = useThemeToken()
+ const time = useTime()
+ const { updatedAt, avatar, sender, count } = chat
 
-function ChatItem() {
  return (
- <div>ChatItem</div>
+ <Flex style={{ backgroundColor: token.colorPrimary, padding: 10 }} gap={10}>
+ <div style={{ width: 50, height: 50, borderRadius: '50%', overflow: 'hidden' }}>
+ <img src={avatar} />
+ </div>
+ <Flex vertical style={{ flex: 1 }} justify="space-between">
+ <Flex justify="space-between" align="center">
+ <Typography.Text style={{ fontSize: token.fontSizeLG }}>小太阳</Typography.Text>
+ <Typography.Text type="secondary">{time(updatedAt).fromNow()}</Typography.Text>
+ </Flex>
+ <Flex justify="space-between" align="center">
+ <Typography.Text>
+ {sender ? `${sender}：` : ''}
+ 我好想你
+ </Typography.Text>
+ <Badge style={{ boxShadow: 'none' }} count={count} />
+ </Flex>
+ </Flex>
+ </Flex>
  )
 }
 

src/components/Sider/ChatSider/index.tsx

@@ -11,7 +11,16 @@ function ChatSider() {
  <Button type="primary" icon={<PlusOutlined />} />
  </Flex>
  <div className={styles.list}>
- <ChatItem />
+ <ChatItem chat={{
+ id: '1',
+ avatar: 'https://avatars.githubusercontent.com/u/74760542?v=4',
+ sender: '',
+ count: 1,
+ createdAt: '2020-03-04',
+ updatedAt: '2024-02-20',
+ message: '我好想你',
+ }}
+ />
  </div>
  </div>
  )

src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useRequest'
 export * from './useAppStore'
 export * from './useSplitPane'
 export * from './useTheme'
+export * from './useTime'

src/hooks/useAppStore.ts

@@ -1,9 +1,10 @@
 import { create } from 'zustand'
 import type { User } from '@/typings'
-import { Theme } from '@/typings'
+import { Language, Theme } from '@/typings'
 
 interface State {
  theme: Theme
+ language: Language
  userInfo: User
 }
 
@@ -16,6 +17,7 @@ type Store = State & Actions
 
 export const useAppStore = create<Store>(set => ({
  theme: Theme.Light,
+ language: Language.Zh,
  userInfo: {} as User,
 
  setTheme: theme => set({ theme }),

src/hooks/useTime/index.ts

@@ -0,0 +1,19 @@
+import dayjs from 'dayjs'
+import zh from 'dayjs/locale/zh-cn'
+import en from 'dayjs/locale/en'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { useAppStore } from '..'
+
+const languageMap = {
+ zh,
+ en,
+}
+
+dayjs.extend(relativeTime)
+
+export function useTime() {
+ const [language] = useAppStore(state => [state.language])
+ dayjs.locale(languageMap[language])
+
+ return dayjs
+}

src/index.css

@@ -1,4 +1,9 @@
 * {
  margin: 0;
  padding: 0;
+}
+
+img {
+ width: 100%;
+ height: 100%;
 }

src/typings/chat/index.ts

@@ -0,0 +1,8 @@
+import type { Common } from '..'
+
+export interface Chat extends Common {
+ avatar: string
+ message: string
+ sender: string
+ count: number
+}

src/typings/common.ts

@@ -21,3 +21,8 @@ export enum Theme {
  Light = 'light',
  Dark = 'dark',
 }
+
+export enum Language {
+ Zh = 'zh',
+ En = 'en',
+}

src/typings/index.ts

@@ -1,2 +1,3 @@
 export * from './common'
 export * from './user'
+export * from './chat'