feat(frontend): 展示数据集管理页面的问答数据

- 添加 QA 数据集展示组件
- 实现数据集选择时动态加载对应的问答数据
- 优化数据集管理页面布局

frontend/dataset_manage_page.py

@@ -1,11 +1,11 @@
 import gradio as gr
 from global_var import datasets
+from tinydb import Query
 
 def dataset_manage_page():
     with gr.Blocks() as demo:
         gr.Markdown("## 数据集管理")
         with gr.Row():
-            with gr.Column():
             # 获取数据集列表并设置初始值
             datasets_list = [str(ds["name"]) for ds in datasets.all()]
             initial_dataset = datasets_list[0] if datasets_list else None
@@ -17,12 +17,38 @@ def dataset_manage_page():
                 allow_custom_value=True,
                 interactive=True
             )
-                dataset_state = gr.State(value=initial_dataset)  # 用数据集初始值初始化状态
 
-            with gr.Column():
-                pass
+        # 添加数据集展示组件
+        qa_dataset = gr.Dataset(
+            components=["text", "text"],
+            label="问答数据",
+            headers=["问题", "答案"],
+            samples=[["示例问题", "示例答案"]]
+        )
 
-        # 绑定事件，确保交互时更新状态
-        dataset_dropdown.change(lambda x: x, inputs=dataset_dropdown, outputs=dataset_state)
+        def update_qa_display(dataset_name):
+            if not dataset_name:
+                return {"samples": [], "__type__": "update"}
+            
+            # 从数据库获取数据集
+            Dataset = Query()
+            ds = datasets.get(Dataset.name == dataset_name)
+            if not ds:
+                return {"samples": [], "__type__": "update"}
+            
+            # 提取所有Q_A数据
+            qa_list = []
+            for item in ds["dataset_items"]:
+                for qa in item["message"]:
+                    qa_list.append([qa["question"], qa["answer"]])
+            
+            return {"samples": qa_list, "__type__": "update"}
+
+        # 绑定事件，更新QA数据显示
+        dataset_dropdown.change(
+            update_qa_display,
+            inputs=dataset_dropdown,
+            outputs=qa_dataset
+        )
 
     return demo