diff --git a/ui/views/data_page.py b/ui/views/data_page.py index 08e165e..dd80053 100644 --- a/ui/views/data_page.py +++ b/ui/views/data_page.py @@ -4,46 +4,8 @@ from config.config import load_config import os -def data_page_header(): - # 头部样式保持不变,仅补充主体所需的 CSS 变量和类 - ui.add_head_html('') - ui.add_head_html( - """ - - """ - ) - - with ui.header().classes("app-header items-center justify-between shadow-md px-6"): +def create_header(): + with ui.header().classes("app-header items-center justify-between shadow-md"): 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('') + + 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 # 名字已经显示在摘要里了 - with ui.element("div").classes("info-item"): - ui.label(key).classes("info-label font-bold text-blue-800") + continue + with ui.element("div").classes("info-item w-full flex flex-col gap-1"): + 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()