feat: 重构路由&添加联系人模块框架

src/components/Sider/ChatSider/index.tsx

@@ -6,7 +6,7 @@ import ChatItem from './ChatItem'
 function ChatSider() {
   const chats = [
     {
-      id: 'test-chat',
+      _id: 'test-chat',
       avatar: 'https://avatars.githubusercontent.com/u/74760542?v=4',
       nickname: 'Test User',
       note: 'Test User',
@@ -26,7 +26,7 @@ function ChatSider() {
       <div className={styles.list}>
         {chats.map(chat => (
           <ChatItem
-            key={chat.id}
+            key={chat._id}
             chat={chat}
           />
         ))}

src/components/Sider/ContactSider/ContactItem/index.module.less

@@ -0,0 +1,6 @@
+@import url("@/themes/index.less");
+
+.contactItem {
+  padding: 10px;
+  background-color: @colorPrimary;
+}

src/components/Sider/ContactSider/ContactItem/index.tsx

@@ -0,0 +1,48 @@
+import { Badge, Flex, Typography } from 'antd'
+import { useNavigate } from 'react-router-dom'
+import { useMeasure } from 'react-use'
+import styles from './index.module.less'
+import type { Contact } from '@/typings'
+import { useThemeToken, useTime } from '@/hooks'
+
+interface ContactItemProps {
+  contact: Contact
+}
+
+function ContactItem({ contact }: ContactItemProps) {
+  const [ref, { width }] = useMeasure<HTMLDivElement>()
+  const { token } = useThemeToken()
+  const time = useTime()
+  const { updatedAt, avatar, sender, count, note, nickname, message } = contact
+  const navigate = useNavigate()
+
+  return (
+    <Flex
+      ref={ref}
+      onClick={() => {
+        navigate(`/contact/${contact.id}`)
+      }}
+      gap={10}
+      className={styles.contactItem}
+    >
+      <div style={{ minWidth: 50, height: 50, borderRadius: '50%', overflow: 'hidden' }}>
+        <img src={avatar} />
+      </div>
+      <Flex vertical style={{ width: width - 60 }} justify="space-between">
+        <Flex justify="space-between" align="center">
+          <Typography.Text ellipsis style={{ fontSize: token.fontSizeLG }}>{note || nickname}</Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: token.fontSizeSM, flexShrink: 0 }}>{time(updatedAt).fromNow()}</Typography.Text>
+        </Flex>
+        <Flex justify="space-between" align="center">
+          <Typography.Text ellipsis>
+            {sender ? `${sender}：` : ''}
+            {message}
+          </Typography.Text>
+          <Badge style={{ boxShadow: 'none' }} count={count} />
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default ContactItem

src/components/Sider/ContactSider/index.module.less

@@ -0,0 +1,14 @@
+.sider {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .topBar {
+    padding: 20px 10px;
+    background-color: #fff;
+  }
+
+  .list {
+    flex: 1;
+  }
+}

src/components/Sider/ContactSider/index.tsx

@@ -1,8 +1,39 @@
-import React from 'react'
+import { PlusOutlined } from '@ant-design/icons'
+import { Button, Flex, Input } from 'antd'
+import { useNavigate } from 'react-router-dom'
+import ContactItem from './ContactItem'
+import styles from './index.module.less'
+import type { Contact } from '@/typings'
 
 function ContactSider() {
+  const navigate = useNavigate()
+  const contacts = [
+    {
+      _id: '1234',
+    },
+  ] as Contact[]
+
   return (
-    <div>ContactSider</div>
+    <div className={styles.sider}>
+      <Flex className={styles.topBar} gap={8}>
+        <Input style={{ flex: 1 }} placeholder="搜索" />
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => {
+            navigate('/contact/search')
+          }}
+        />
+      </Flex>
+      <div className={styles.list}>
+        {contacts.map(contact => (
+          <ContactItem
+            key={contact._id}
+            contact={contact}
+          />
+        ))}
+      </div>
+    </div>
   )
 }
 

src/layouts/BasicLayout.tsx

@@ -1,11 +1,32 @@
 import { MessageOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons'
+import type { GlobalToken } from 'antd'
 import { ConfigProvider, Layout, Menu } from 'antd'
 import { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useAppStore } from '@/hooks'
+import { useAppStore, useThemeToken } from '@/hooks'
 import { AUTH_TOKEN_KEY } from '@/config'
 import Loading from '@/components/Loading'
 
+function AddThemeToVars() {
+  const { token: realToken } = useThemeToken()
+
+  useEffect(() => {
+    realToken.fontSizeSM = 12
+    const usefulToken = Object.keys(realToken).filter(_ => !/-[0-9]/.test(_))
+    usefulToken.forEach((key) => {
+      const needUnit = ['borderRadius', 'fontSize', 'size']
+      document.documentElement.style.setProperty(
+        `--${key}`,
+        needUnit.some(item => key.startsWith(item))
+          ? `${realToken[key as (keyof GlobalToken)]}px` as string
+          : realToken[key as (keyof GlobalToken)] as string,
+      )
+    })
+  }, [realToken])
+
+  return null
+}
+
 function BasicLayout(props: any) {
   const navigate = useNavigate()
   const { pathname } = useLocation()
@@ -33,6 +54,7 @@ function BasicLayout(props: any) {
         },
       }}
     >
+      <AddThemeToVars />
       <Layout style={{ height: '100vh' }}>
         <Layout.Sider theme={theme} collapsible>
           <Menu

src/pages/Contact/ContactDetail/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ContactDetail() {
+  return (
+    <div>ContactDetail</div>
+  )
+}
+
+export default ContactDetail

src/pages/Contact/ContactSearch/index.tsx

@@ -0,0 +1,7 @@
+function ContactSearch() {
+  return (
+    <div>ContactSearch</div>
+  )
+}
+
+export default ContactSearch

src/pages/Contact/index.tsx

@@ -1,11 +1,11 @@
 import ContactSider from '@/components/Sider/ContactSider'
 import MainLayout from '@/layouts/MainLayout'
 
-function Contact() {
+function Contact(props: any) {
   return (
     <MainLayout>
       <ContactSider />
-      <div>联系人</div>
+      {props.children}
     </MainLayout>
   )
 }

src/router/routes.tsx

@@ -6,6 +6,8 @@ import Contact from '@/pages/Contact'
 import Home from '@/pages/Home'
 import Login from '@/pages/Login'
 import Setting from '@/pages/Setting'
+import ContactDetail from '@/pages/Contact/ContactDetail'
+import ContactSearch from '@/pages/Contact/ContactSearch'
 
 const routes: RouteObject[] = [
   {
@@ -34,11 +36,17 @@ const routes: RouteObject[] = [
       },
       {
         path: 'contact',
-        element: <Contact />,
+        element: <Contact>
+          <Outlet />
+        </Contact>,
         children: [
           {
             path: ':id',
-            element: <Contact />,
+            element: <ContactDetail />,
+          },
+          {
+            path: 'search',
+            element: <ContactSearch />,
           },
         ],
       },

src/themes/custom.less

@@ -0,0 +1,12 @@
+@scrollbar-height: var(--scrollbar-height);
+@scrollbar-color: var(--scrollbar-color);
+@scrollbar-track-color: var(--scrollbar-track-color);
+@scrollbar-hover-color: var(--scrollbar-hover-color);
+@scrollbar-border-radius: var(--scrollbar-border-radius);
+@transition: var(--motionDurationMid) var(--motionEaseInOut);
+@boxShadow: var(--box-shadow);
+@boxShadowSecondary: var(--boxShadowSecondary);
+@boxShadowCard: var(--boxShadowCard);
+@headerHeight: var(--header-height);
+@colorBorderBg: var(--colorBorderBg);
+@colorBgTextHover: var(--colorBgTextHover);