feat: 增加未选中任何消息状态的placeholder

client/web/src/components/Problem.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import problemSvg from '@assets/images/problem.svg';
 import { t } from 'tailchat-shared';
+import clsx from 'clsx';
 
 interface ProblemProps {
+  className?: string;
+  style?: React.CSSProperties;
   text?: React.ReactNode;
 }
 
@@ -11,7 +14,10 @@ interface ProblemProps {
  */
 export const Problem: React.FC<ProblemProps> = React.memo((props) => {
   return (
-    <div className="text-center w-full">
+    <div
+      className={clsx('text-center w-full', props.className)}
+      style={props.style}
+    >
       <img className="w-32 h-32 m-auto mb-2" src={problemSvg} />
 
       <div>{props.text ?? t('出现了一些问题')}</div>

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

@@ -1,5 +1,7 @@
+import { Problem } from '@/components/Problem';
 import React from 'react';
 import { Route, Routes } from 'react-router';
+import { t } from 'tailchat-shared';
 import { PageContent } from '../PageContent';
 import { InboxContent } from './Content';
 import { InboxSidebar } from './Sidebar';
@@ -9,8 +11,18 @@ export const Inbox: React.FC = React.memo(() => {
     <PageContent data-tc-role="content-inbox" sidebar={<InboxSidebar />}>
       <Routes>
         <Route path="/:inboxItemId" element={<InboxContent />} />
+        <Route path="/" element={<InboxNoSelect />} />
       </Routes>
     </PageContent>
   );
 });
 Inbox.displayName = 'Inbox';
+
+const InboxNoSelect: React.FC = React.memo(() => {
+  return (
+    <div className="mt-11 w-full">
+      <Problem text={t('空空的，什么都没有选中')} />
+    </div>
+  );
+});
+InboxNoSelect.displayName = 'InboxNoSelect';