fix: consultation notifications, profile edit hint, doctor report in Chinese, chat UI polish, tabbar badge

frontend-patient/src/components/layout/TabBar.module.css

@@ -42,3 +42,25 @@
   font-size: var(--font-size-xs);
   font-weight: 500;
 }
+
+.tabIcon {
+  position: relative;
+}
+
+.badge {
+  position: absolute;
+  top: -6px;
+  right: -10px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: #EF4444;
+  color: #fff;
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}

frontend-patient/src/components/layout/TabBar.tsx

@@ -1,10 +1,12 @@
 import { useNavigate, useLocation } from 'react-router-dom';
 import { NAV_ITEMS } from '@/utils/constants';
+import { useNotificationStore } from '@/stores/notification.store';
 import styles from './TabBar.module.css';
 
 export function TabBar() {
   const navigate = useNavigate();
   const location = useLocation();
+  const unreadCount = useNotificationStore((s) => s.unreadCount);
 
   return (
     <nav className={styles.tabBar}>
@@ -16,7 +18,12 @@ export function TabBar() {
             className={`${styles.tab} ${isActive ? styles.tabActive : ''}`}
             onClick={() => navigate(item.path)}
           >
-            <span className={styles.tabIcon}>{item.icon}</span>
+            <span className={styles.tabIcon}>
+              {item.icon}
+              {item.path === '/services' && unreadCount > 0 && (
+                <span className={styles.badge}>{unreadCount > 99 ? '99+' : unreadCount}</span>
+              )}
+            </span>
             <span className={styles.tabLabel}>{item.label}</span>
           </button>
         );

frontend-patient/src/pages/profile/ProfilePage.tsx

@@ -25,7 +25,7 @@ export function ProfilePage() {
       <Card className={styles.profileCard} onClick={() => navigate('/profile/edit')}>
         <div className={styles.avatar}>{user?.nickname?.[0] || '用'}</div>
         <div className={styles.profileInfo}>
-          <div className={styles.nickname}>{user?.nickname || '用户'} <span className={styles.editHint}>编辑</span></div>
+          <div className={styles.nickname}>{user?.nickname || '用户'} <span className={styles.editHint}>&#8250;</span></div>
           <div className={styles.phone}>{user?.phone}</div>
         </div>
       </Card>

frontend-patient/src/pages/services/ChatPage.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: var(--color-bg);
+  background: #EDF1F7;
 }
 
 .messages {
@@ -10,74 +10,92 @@
   overflow-y: auto;
   padding: 16px;
   padding-top: calc(var(--header-height) + 8px);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .bubble {
-  margin-bottom: 14px;
-  max-width: 80%;
+  max-width: 78%;
+  animation: bubbleIn 0.25s ease-out;
+}
+
+@keyframes bubbleIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .patient {
-  margin-left: auto;
-  text-align: right;
+  align-self: flex-end;
 }
 
 .doctor {
-  margin-right: auto;
+  align-self: flex-start;
 }
 
 .bubbleContent {
   padding: 10px 14px;
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
+  border-radius: 18px;
+  font-size: var(--font-size-base);
   line-height: 1.5;
-  display: inline-block;
-  text-align: left;
+  word-break: break-word;
 }
 
 .patient .bubbleContent {
-  background: var(--color-primary);
-  color: var(--color-text-inverse);
+  background: linear-gradient(135deg, #1E6BFF, #4D8FFF);
+  color: #fff;
   border-bottom-right-radius: 4px;
 }
 
 .doctor .bubbleContent {
-  background: var(--color-white);
+  background: #fff;
   color: var(--color-text-primary);
   border-bottom-left-radius: 4px;
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
 }
 
 .bubbleTime {
   font-size: 10px;
   color: var(--color-text-tertiary);
   margin-top: 4px;
+  padding: 0 4px;
 }
 
+.patient .bubbleTime { text-align: right; }
+
 .inputBar {
   display: flex;
   gap: 8px;
   padding: 10px 14px;
-  background: var(--color-white);
+  background: #fff;
   border-top: 1px solid var(--color-border);
   padding-bottom: env(safe-area-inset-bottom, 10px);
 }
 
 .input {
   flex: 1;
-  padding: 10px 14px;
-  background: var(--color-bg);
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-sm);
+  padding: 10px 16px;
+  background: #EDF1F7;
+  border: none;
+  border-radius: 24px;
+  font-size: var(--font-size-base);
+  outline: none;
+  font-family: var(--font-family);
 }
 
 .sendBtn {
-  padding: 10px 18px;
+  width: 42px;
+  height: 42px;
   background: var(--color-primary);
-  color: var(--color-text-inverse);
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
 .sendBtn:disabled {