flix:优化了数据查看页面的样式，让样式更加好看

ui/views/data_page.py

@@ -4,46 +4,8 @@ from config.config import load_config
 import os
 
 
-def data_page_header():
+def create_header():
-    # 头部样式保持不变，仅补充主体所需的 CSS 变量和类
+    with ui.header().classes("app-header items-center justify-between shadow-md"):
-    ui.add_head_html('<link href="/assets/style.css" rel="stylesheet" />')
-    ui.add_head_html(
-        """
-        <style>
-            body { 
-                margin: 0; 
-                overflow: hidden; 
-                background-color: #f1f5f9; 
-            }
-            /* 主体内容区：确保高度撑满并独立滚动 */
-            .content-area {
-                height: calc(100vh - 64px); 
-                overflow-y: auto;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                padding: 1.5rem;
-            }
-            /* 详情弹窗增强 */
-            .detail-row {
-                border-bottom: 1px solid #f1f5f9;
-                padding: 10px 4px;
-                transition: background-color 0.2s;
-            }
-            .detail-row:hover { background-color: #f8fafc; }
-            .field-label { font-weight: 600; color: #64748b; width: 110px; flex-shrink: 0; font-size: 0.875rem; }
-            .field-value { color: #1e293b; font-size: 0.935rem; line-height: 1.5; }
-            
-            /* 数据卡片微调 */
-            .data-card {
-                border: none !important;
-                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
-            }
-        </style>
-        """
-    )
-
-    with ui.header().classes("app-header items-center justify-between shadow-md px-6"):
         with ui.row().classes("items-center gap-2"):
             ui.image("/assets/icon.ico").classes("w-8 h-8").props("fit=contain")
             ui.label("尚城幼儿园成长报告助手").classes("text-xl font-bold")
@@ -57,18 +19,33 @@ def data_page_header():
             ).tooltip("回到首页")
 
 
+def create_data_page():
+    ui.add_head_html('<link href="/assets/style.css" rel="stylesheet" />')
+
+    create_header()
+
+    with ui.column().classes("w-full max-w-6xl mx-auto p-4 gap-4 thin-scrollbar"):
+        with ui.card().classes("func-card"):
+            with ui.row().classes("items-center justify-between w-full"):
+                ui.label("📊 班级幼儿数据").classes("section-title text-blue")
+                ui.button(
+                    "刷新表格", icon="sync", on_click=lambda: ui.navigate.to("/data")
+                ).props("outline color=primary")
+
+        with ui.card().classes("func-card"):
+            load_data()
+
+
 def load_data():
     conf_data = load_config("config.toml")
     excel_path = conf_data.get("excel_file")
 
-    # --- 1. 详情模态框 (UI 升级：档案感排版) ---
     with (
         ui.dialog() as detail_dialog,
         ui.card().classes(
             "w-[600px] p-0 profile-dialog rounded-3xl overflow-hidden shadow-2xl"
         ),
     ):
-        # 【头部】渐变背景与动态图标
         with ui.row().classes(
             "w-full bg-gradient-to-r from-blue-50 to-indigo-50 items-center justify-between"
         ):
@@ -80,11 +57,9 @@ def load_data():
                 "flat round color=primary"
             ).classes("bg-white/50")
 
-        # 【中部】卡片流内容区
         with ui.column().classes("w-full p-6 h-[450px] overflow-auto gap-0"):
             content_container = ui.column().classes("w-full")
 
-        # 【底部】毛玻璃效果操作栏
         with ui.row().classes(
             "w-full p-5 bg-slate-50/80 backdrop-blur-md border-t justify-end gap-3"
         ):
@@ -96,13 +71,11 @@ def load_data():
         row_data = e.args["data"]
         content_container.clear()
 
-        # 尝试提取名字用于头部（假设你的列名里有“姓名”）
         student_name = row_data.get("姓名", "详细数据")
 
         with content_container:
-            # 顶部增加一个个人摘要卡片
             with ui.row().classes(
-                "w-full items-center gap-4 p-4 bg-blue-600 rounded-2xl shadow-md shadow-blue-100"
+                "w-full items-center p-4 bg-blue-600 rounded-2xl shadow-md shadow-blue-100"
             ):
                 ui.avatar("person", color="white", text_color="blue-6").props(
                     "size=48px"
@@ -110,17 +83,15 @@ def load_data():
                 with ui.column().classes("gap-0 text-white"):
                     ui.label(student_name).classes("text-lg font-bold")
 
-            # 遍历渲染每一条数据
             for key, value in row_data.items():
                 if key == "姓名":
-                    continue  # 名字已经显示在摘要里了
+                    continue
-                with ui.element("div").classes("info-item"):
+                with ui.element("div").classes("info-item w-full flex flex-col gap-1"):
-                    ui.label(key).classes("info-label font-bold text-blue-800")
+                    ui.label(key).classes("font-bold text-blue-800")
                     ui.label(str(value)).classes("info-value flex-1")
 
         detail_dialog.open()
 
-    # --- 2. 数据读取与展示 ---
     if not excel_path or not os.path.exists(excel_path):
         with ui.column().classes("w-full items-center p-12 text-slate-400"):
             ui.icon("folder_off", size="64px")
@@ -133,7 +104,6 @@ def load_data():
             df[col] = df[col].dt.strftime("%Y-%m-%d")
         df = df.fillna("-")
 
-        # 表格上方信息条
         with ui.row().classes(
             "bg-blue-50 w-full p-3 px-6 items-center rounded-t-xl border-b border-blue-100"
         ):
@@ -148,7 +118,6 @@ def load_data():
                 "text-xs text-amber-600 bg-amber-50 px-2 py-1 rounded"
             )
 
-        # AgGrid (优化表格高度与交互)
         ui.aggrid(
             {
                 "columnDefs": [
@@ -173,21 +142,3 @@ def load_data():
 
     except Exception as e:
         ui.notify(f"加载数据时发生错误: {e}", type="negative", position="top")
-
-
-def create_data_page():
-    data_page_header()
-    with ui.card().classes("w-full m-auto max-w-6xl gap-6"):
-        # 主标题区域
-        with ui.row().classes("items-end justify-between w-full px-2"):
-            with ui.column().classes("gap-1"):
-                ui.label("数据预览与核对").classes(
-                    "text-3xl font-bold text-slate-800 tracking-tight"
-                )
-            ui.button(
-                "刷新表格", icon="sync", on_click=lambda: ui.navigate.to("/data")
-            ).props("outline color=primary").classes("rounded-lg bg-white shadow-sm")
-
-        # 数据卡片容器
-        with ui.card().classes("w-full p-0 data-card rounded-xl overflow-hidden"):
-            load_data()