fix:添加niceGui库美化页面

2025-12-13 21:13:25 +08:00
parent 93d1e8687a
commit 3a4a9df751
14 changed files with 1555 additions and 41 deletions
--- a/ui/views/home_page.py
+++ b/ui/views/home_page.py
@@ -0,0 +1,94 @@
+from nicegui import ui, app
+from config.config import load_config
+from ui.core.state import app_state
+from ui.core.task_runner import run_task, select_folder
+
+# 导入业务函数
+from utils.generate_utils import (
+    generate_template, generate_comment_all,
+    batch_convert_folder, generate_report, generate_zodiac
+)
+from utils.file_utils import export_templates_folder, initialize_project, export_data
+
+config = load_config("config.toml")
+
+
+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')
+        ui.label('By 寒寒 | 这里的每一份评语都充满爱意').classes('text-xs opacity-90')
+
+
+def create_page():
+    # 1. 引入外部 CSS
+    ui.add_head_html('<link href="/assets/style.css" rel="stylesheet" />')
+
+    create_header()
+
+    # 主容器
+    with ui.column().classes('w-full max-w-4xl mx-auto p-4 gap-4'):
+
+        # === 进度条区域 ===
+        with ui.card().classes('func-card'):
+            app_state.progress_label = ui.label('⛳ 任务进度: 待命').classes('font-bold text-gray-700 mb-1')
+            # 使用 NiceGUI 原生属性配合 CSS 类
+            app_state.progress_bar = ui.linear_progress(value=0, show_value=False).classes('h-4 rounded')
+            app_state.progress_bar.props('color=positive')  # 使用 Quasar 颜色变量
+
+        # === 核心功能区 ===
+        with ui.card().classes('func-card card-core'):
+            ui.label('🛠️ 核心功能').classes('section-title text-green')
+
+            with ui.grid(columns=3).classes('w-full gap-3'):
+                # 辅助函数：快速创建按钮
+                def func_btn(text, icon, func):
+                    ui.button(text, on_click=lambda: run_task(func)).props(f'outline').classes('w-full')
+
+                func_btn('📁 生成图片路径', 'image', generate_template)
+                func_btn('🤖 生成评语 (AI)', 'smart_toy', generate_comment_all)
+                func_btn('📊 生成报告 (PPT)', 'analytics', generate_report)
+
+                # 特殊处理带参数的
+                async def run_convert():
+                    await run_task(batch_convert_folder, config.get("output_folder"))
+
+                ui.button('📑 格式转换 (PDF)', on_click=run_convert).props('outline')
+
+                func_btn('🐂 生肖转化 (生日)', 'pets', generate_zodiac)
+
+        # === 下方双栏布局 ===
+        with ui.grid(columns=2).classes('w-full gap-4'):
+
+            # 数据管理
+            with ui.card().classes('func-card card-data'):
+                ui.label('📦 数据管理').classes('section-title text-blue')
+                with ui.row().classes('w-full'):
+                    async def do_export(func):
+                        path = await select_folder()
+                        if path: await run_task(func, path)
+
+                    ui.button('📦 导出模板', on_click=lambda: do_export(export_templates_folder)).props(f'outline')
+                    ui.button('📤 导出备份', on_click=lambda: do_export(export_data)).props(f'outline')
+
+            # 系统操作
+            with ui.card().classes('func-card card-system'):
+                ui.label('⚙️ 系统操作').classes('section-title text-red')
+                with ui.row().classes('w-full'):
+                    def stop_now():
+                        if app_state.is_running:
+                            app_state.stop_event.set()
+                            ui.notify("发送停止信号...", type="warning")
+
+                    ui.button('⛔ 停止', on_click=stop_now).props('color=negative').classes('flex-1')
+
+                    async def reset_sys():
+                        await run_task(initialize_project)
+
+                    ui.button('⚠️ 初始化', on_click=reset_sys).props('outline color=warning').classes('flex-1')
+
+        # === 日志区 ===
+        with ui.card().classes('func-card card-logging'):
+            with ui.expansion('📝 系统实时日志',value=True).classes('w-full bg-white shadow-sm rounded'):
+                app_state.log_element = ui.log(max_lines=200).classes('w-full h-40 font-mono text-xs bg-gray-100 p-2')