feat: 收件箱基本UI

client/web/src/routes/Main/Content/Inbox/Sidebar.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
+import { t } from 'tailchat-shared';
+
+/**
+ * 收件箱侧边栏组件
+ */
+export const InboxSidebar: React.FC = React.memo(() => {
+  return (
+    <CommonSidebarWrapper data-tc-role="sidebar-inbox">
+      <div className="overflow-auto">
+        {Array.from({ length: 20 }).map((_, i) => {
+          return (
+            <div
+              key={i}
+              className="p-2 overflow-auto cursor-pointer hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10"
+            >
+              <div className="text-lg">Title {i}</div>
+              <div className="break-all text-opacity-80 text-black dark:text-opacity-80 dark:text-white text-sm p-1 border-l-2 border-gray-500 border-opacity-50">
+                DescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDescDesc
+              </div>
+              <div className="text-xs text-opacity-50 text-black dark:text-opacity-50 dark:text-white">
+                {t('来自')}: Tailchat
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </CommonSidebarWrapper>
+  );
+});
+InboxSidebar.displayName = 'InboxSidebar';

client/web/src/routes/Main/Content/Inbox/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PageContent } from '../PageContent';
+import { InboxSidebar } from './Sidebar';
+
+export const Inbox: React.FC = React.memo(() => {
+  return (
+    <PageContent data-tc-role="content-inbox" sidebar={<InboxSidebar />}>
+      <div>Inbox</div>
+    </PageContent>
+  );
+});
+Inbox.displayName = 'Inbox';

client/web/src/routes/Main/Content/PageContent.tsx

@@ -107,7 +107,8 @@ export const PageContent: React.FC<PropsWithChildren<PageContentProps>> =
             })}
           >
             {contentMaskEl}
-            {contentEl}
+
+            <ErrorBoundary>{contentEl}</ErrorBoundary>
           </div>
         </div>
       </ErrorBoundary>

client/web/src/routes/Main/Content/Personal/index.tsx

@@ -11,7 +11,6 @@ import { PersonalSidebar } from './Sidebar';
 export const Personal: React.FC = React.memo(() => {
   return (
     <PageContent data-tc-role="content-personal" sidebar={<PersonalSidebar />}>
-      <ErrorBoundary>
       <Routes>
         <Route path="/friends" element={<FriendPanel />} />
         <Route path="/plugins" element={<PluginsPanel />} />
@@ -28,7 +27,6 @@ export const Personal: React.FC = React.memo(() => {
 
         <Route path="/" element={<Navigate to="/main/personal/friends" />} />
       </Routes>
-      </ErrorBoundary>
     </PageContent>
   );
 });

client/web/src/routes/Main/Content/index.tsx

@@ -2,11 +2,13 @@ import React from 'react';
 import { Personal } from './Personal';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { Group } from './Group';
+import { Inbox } from './Inbox';
 
 export const MainContent: React.FC = React.memo(() => {
   return (
     <Routes>
       <Route path="/personal/*" element={<Personal />} />
+      <Route path="/inbox/*" element={<Inbox />} />
       <Route path="/group/:groupId/*" element={<Group />} />
       <Route
         path="/"

client/web/src/routes/Main/Navbar/InboxNav.tsx

@@ -0,0 +1,22 @@
+import { Icon } from 'tailchat-design';
+import React from 'react';
+import { t } from 'tailchat-shared';
+import { NavbarNavItem } from './NavItem';
+
+/**
+ * 收件箱
+ */
+export const InboxNav: React.FC = React.memo(() => {
+  return (
+    <NavbarNavItem
+      className="bg-gray-700"
+      name={t('收件箱')}
+      to={'/main/inbox'}
+      showPill={true}
+      data-testid="inbox"
+    >
+      <Icon className="text-3xl text-white" icon="mdi:inbox-arrow-down" />
+    </NavbarNavItem>
+  );
+});
+InboxNav.displayName = 'InboxNav';

client/web/src/routes/Main/Navbar/index.tsx

@@ -4,6 +4,8 @@ import { MobileMenuBtn } from './MobileMenuBtn';
 import { SettingBtn } from './SettingBtn';
 import { Divider } from 'antd';
 import { PersonalNav } from './PersonalNav';
+import { DevContainer } from '@/components/DevContainer';
+import { InboxNav } from './InboxNav';
 
 /**
  * 导航栏组件
@@ -18,8 +20,14 @@ export const Navbar: React.FC = React.memo(() => {
 
       {/* Navbar */}
       <div className="flex-1 w-full">
+        <div className="space-y-2">
           <PersonalNav />
 
+          <DevContainer>
+            <InboxNav />
+          </DevContainer>
+        </div>
+
         <div className="px-3">
           <Divider />
         </div>