From c760d44e87ece7d0b6513fe013c78bc15638fc62 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 18 Jan 2023 00:11:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=9C=AA=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E4=BB=BB=E4=BD=95=E6=B6=88=E6=81=AF=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=9A=84placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/web/src/components/Problem.tsx              |  8 +++++++-
 client/web/src/routes/Main/Content/Inbox/index.tsx | 12 ++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/web/src/components/Problem.tsx b/client/web/src/components/Problem.tsx
index 3e8f999a..8230e295 100644
--- a/client/web/src/components/Problem.tsx
+++ b/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>
diff --git a/client/web/src/routes/Main/Content/Inbox/index.tsx b/client/web/src/routes/Main/Content/Inbox/index.tsx
index 577b76eb..b7316d57 100644
--- a/client/web/src/routes/Main/Content/Inbox/index.tsx
+++ b/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';