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,24 +11,22 @@ 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 />} />
-          <Route path="/converse/:converseId" element={<PersonalConverse />} />
-          {pluginCustomPanel
-            .filter((p) => p.position === 'personal')
-            .map((p) => (
-              <Route
-                key={p.name}
-                path={`/custom/${p.name}`}
-                element={React.createElement(p.render)}
-              />
-            ))}
+      <Routes>
+        <Route path="/friends" element={<FriendPanel />} />
+        <Route path="/plugins" element={<PluginsPanel />} />
+        <Route path="/converse/:converseId" element={<PersonalConverse />} />
+        {pluginCustomPanel
+          .filter((p) => p.position === 'personal')
+          .map((p) => (
+            <Route
+              key={p.name}
+              path={`/custom/${p.name}`}
+              element={React.createElement(p.render)}
+            />
+          ))}
 
-          <Route path="/" element={<Navigate to="/main/personal/friends" />} />
-        </Routes>
-      </ErrorBoundary>
+        <Route path="/" element={<Navigate to="/main/personal/friends" />} />
+      </Routes>
     </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,7 +20,13 @@ export const Navbar: React.FC = React.memo(() => {
 
       {/* Navbar */}
       <div className="flex-1 w-full">
-        <PersonalNav />
+        <div className="space-y-2">
+          <PersonalNav />
+
+          <DevContainer>
+            <InboxNav />
+          </DevContainer>
+        </div>
 
         <div className="px-3">
           <Divider />