feat: 首页增加用户名

web/src/routes/Main/Content/Personal/Sidebar.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Icon } from '@iconify/react';
 import { SidebarItem } from '../SidebarItem';
-import { t, useDMConverseList } from 'tailchat-shared';
+import { t, useDMConverseList, useUserInfo } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
 import { openModal } from '@/components/Modal';
 import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
 import DevContainer from '@/components/DevContainer';
+import { SectionHeader } from '@/components/SectionHeader';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
@@ -28,8 +29,12 @@ SidebarSection.displayName = 'SidebarSection';
  */
 export const PersonalSidebar: React.FC = React.memo(() => {
   const converseList = useDMConverseList();
+  const userInfo = useUserInfo();
 
   return (
+    <div>
+      <SectionHeader>{userInfo?.nickname}</SectionHeader>
+
       <div className="p-2">
         <SidebarItem
           name={t('好友')}
@@ -41,7 +46,6 @@ export const PersonalSidebar: React.FC = React.memo(() => {
           icon={<Icon icon="mdi:puzzle" />}
           to="/main/personal/plugins"
         />
-
         <SidebarSection
           action={
             <DevContainer>
@@ -54,11 +58,11 @@ export const PersonalSidebar: React.FC = React.memo(() => {
         >
           {t('私信')}
         </SidebarSection>
-
         {converseList.map((converse) => {
           return <SidebarDMItem key={converse._id} converse={converse} />;
         })}
       </div>
+    </div>
   );
 });
 PersonalSidebar.displayName = 'PersonalSidebar';