diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index 9e75438..405c78d 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -25,7 +25,8 @@ import SelectPreference from '../preference/SelectPreference.tsx'
 import TextFieldPreference from '../preference/TextFieldPreference.tsx'
 import Preference from '../preference/Preference.tsx'
 import GroupSettings from "../../api/client_data/GroupSettings.ts"
-import PreferenceUpdater from "../preference/PreferenceUpdater.ts";
+import PreferenceUpdater from "../preference/PreferenceUpdater.ts"
+import SystemMessage from "./SystemMessage.tsx"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     target: string
@@ -323,7 +324,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                     const lastDate = date
                                     date = new Date(msg.time)
 
-                                    const msgElement = <Element_Message
+                                    const msgElement = msg.user_id == null ? <SystemMessage>{msg.text}</SystemMessage> :<Element_Message
                                         rawData={msg.text}
                                         renderHTML={rendeText}
                                         message={msg}
@@ -336,6 +337,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                     return (
                                         <>
                                             {
+                                                msg.user_id != null &&
                                                 (date.getMinutes() != lastDate.getMinutes() || date.getDate() != lastDate.getDate() || date.getMonth() != lastDate.getMonth() || date.getFullYear() != lastDate.getFullYear())
                                                 && <mdui-tooltip content={`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日  ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`}>
                                                     <div style={{
diff --git a/client/ui/chat/SystemMessage.jsx b/client/ui/chat/SystemMessage.tsx
similarity index 82%
rename from client/ui/chat/SystemMessage.jsx
rename to client/ui/chat/SystemMessage.tsx
index c9b9f4b..d3ada3b 100644
--- a/client/ui/chat/SystemMessage.jsx
+++ b/client/ui/chat/SystemMessage.tsx
@@ -1,8 +1,5 @@
-/**
- * 一条系统提示消息
- * @returns { React.JSX.Element }
- */
-export default function SystemMessage({ children } = {}) {
+
+export default function SystemMessage({ children }: React.HTMLAttributes<HTMLElement>) {
     return (
         <div style={{
             width: '100%',