refactor(ui): ChatGPT-style visual overhaul for app shell and analytics pages

src/pages/ChatAnalyticsHubPage.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, BarChart3, MessageSquare, Users } from 'lucide-react'
+import { ArrowRight, MessageSquare, Users } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import './ChatAnalyticsHubPage.scss'
 
@@ -6,49 +6,46 @@ function ChatAnalyticsHubPage() {
   const navigate = useNavigate()
 
   return (
-    <div className="chat-analytics-hub-page">
-      <div className="chat-analytics-hub-content">
-        <div className="chat-analytics-hub-badge">
-          <BarChart3 size={16} />
-          <span>聊天分析</span>
-        </div>
-
-        <h1>选择你要进入的分析视角</h1>
-        <p className="chat-analytics-hub-desc">
-          私聊分析更适合看好友聊天统计和趋势，群聊分析则用于查看群成员、发言排行和活跃时段。
+    <div className="analytics-hub">
+      <div className="analytics-hub-inner">
+        <h1 className="analytics-hub-title">聊天分析</h1>
+        <p className="analytics-hub-desc">
+          选择你要进入的分析视角。私聊分析适合查看好友聊天统计，群聊分析则用于查看群成员活跃度。
         </p>
 
-        <div className="chat-analytics-hub-grid">
+        <div className="analytics-hub-grid">
           <button
             type="button"
-            className="chat-analytics-entry-card"
+            className="analytics-hub-card"
             onClick={() => navigate('/analytics/private')}
           >
-            <div className="entry-card-icon">
-              <MessageSquare size={24} />
+            <div className="analytics-hub-card-icon">
+              <MessageSquare size={22} />
             </div>
-            <div className="entry-card-header">
-              <h2>私聊分析</h2>
-              <ArrowRight size={18} />
+            <div className="analytics-hub-card-body">
+              <div className="analytics-hub-card-header">
+                <h2>私聊分析</h2>
+                <ArrowRight size={16} className="analytics-hub-card-arrow" />
+              </div>
+              <p>查看好友聊天统计、消息趋势、活跃时段与联系人排名。</p>
             </div>
-            <p>查看好友聊天统计、消息趋势、活跃时段与联系人排名。</p>
-            <span className="entry-card-cta">进入私聊分析</span>
           </button>
 
           <button
             type="button"
-            className="chat-analytics-entry-card"
+            className="analytics-hub-card"
             onClick={() => navigate('/analytics/group')}
           >
-            <div className="entry-card-icon group">
-              <Users size={24} />
+            <div className="analytics-hub-card-icon analytics-hub-card-icon--group">
+              <Users size={22} />
             </div>
-            <div className="entry-card-header">
-              <h2>群聊分析</h2>
-              <ArrowRight size={18} />
+            <div className="analytics-hub-card-body">
+              <div className="analytics-hub-card-header">
+                <h2>群聊分析</h2>
+                <ArrowRight size={16} className="analytics-hub-card-arrow" />
+              </div>
+              <p>查看群成员信息、发言排行、活跃时段和媒体内容统计。</p>
             </div>
-            <p>查看群成员信息、发言排行、活跃时段和媒体内容统计。</p>
-            <span className="entry-card-cta">进入群聊分析</span>
           </button>
         </div>
       </div>