From 6bb8b8b6ec366c8f0a7eb3929738cca3ec459c86 Mon Sep 17 00:00:00 2001
From: pengGgxp <98072271+pengGgxp@users.noreply.github.com>
Date: Sat, 3 May 2025 06:26:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E8=81=8A=E5=A4=A9=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E7=94=9F=E6=88=90=E5=8F=AF=E8=A7=86=E5=8C=96=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=9B=B4=E6=96=B0=E5=AE=8C=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |    1 +
 pywxdump/api/remote_server.py                 |  100 +-
 pywxdump/ui/src/api/base.ts                   |  124 +-
 pywxdump/ui/src/api/chat.ts                   |   47 +
 .../ui/src/components/utils/DeepSeekSet.vue   |   72 +
 pywxdump/ui/src/views/Chat2UiSelectVue.vue    |  194 ++
 pywxdump/ui/src/views/Chat2UiView.vue         | 2322 +++++++++--------
 pywxdump/ui/src/views/other/SettingView.vue   |    7 +-
 8 files changed, 1710 insertions(+), 1157 deletions(-)
 create mode 100644 pywxdump/ui/src/components/utils/DeepSeekSet.vue

diff --git a/.gitignore b/.gitignore
index 5147b19..367f488 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,4 @@ dist-ssr
 /pywxdump/ui/web/*
 /pywxdump/ui/web/assets/*
 /pywxdump/wxdump_work
+test2.py
diff --git a/pywxdump/api/remote_server.py b/pywxdump/api/remote_server.py
index 56e02d8..20647d0 100644
--- a/pywxdump/api/remote_server.py
+++ b/pywxdump/api/remote_server.py
@@ -577,6 +577,22 @@ def recursive_listdir(path,list:List):
 
 
 
+def de_weight(l1:List,l2:List):
+    """
+    列表去重，针对特定对象
+    """
+    len1 = min(len(l1), len(l2))
+    len1 = len1-1 if len1 > 0 else 0
+    for i in range(len1):
+        if l1[i]["wxid"] == l2[i]["wxid"] and l1[i]["start_time"] == l2[i]["start_time"] and l1[i]["end_time"] == l2[i][
+            "end_time"]:
+            l1[i]["flag"] = True
+            l2.pop(i)
+
+    return l1+l2
+
+
+
 
 
 
@@ -592,7 +608,7 @@ def get_ai_ui_json_list():
     # 遍历json文件夹，查找最后带_ai的文件
     work_path = os.path.join(gc.work_path, "export", my_wxid, "json")
     if not os.path.exists(work_path):
-        return ReJson(0,body={"ui_dict_list":[],"ai_dict_list":[]})
+        os.makedirs(work_path)
     file_list:List[str]=[]
     recursive_listdir(work_path,list=file_list)
 
@@ -602,22 +618,25 @@ def get_ai_ui_json_list():
         if file.split('.')[0].split('_')[-1] == 'ai':
             # 可进行ai可视化的文件
             ui_list.append(file)
+    # print(ui_list)
 
     # 构造字典对象
     ui_dict_list = []
     for s in ui_list:
-        wxid = s.split('.')[0].split('_')[0]  # wxid
-        time_start = " ".join(s.split('.')[0].split('_')[2:4])  # time start
-        time_end = " ".join(s.split('.')[0].split('_')[5:7])  # time end
-        flag = s.split('.')[0].split('_')[-1]  # flag
-        ui_dict_list.append({"wxid": wxid, "time_start": time_start, "time_end": time_end, "flag": flag})
+        wxid = s.split('\\')[-1].split('.')[0].split('_')[0] if "@" in s.split('\\')[-1] else \
+        s.split('\\')[-1].split('.')[0].split('_')[1]  # wxid
+        time_start = " ".join(s.split('\\')[-1].split('.')[0].split('_')[2:4]) if "@" in s.split('\\')[
+            -1] else " ".join(s.split('\\')[-1].split('.')[0].split('_')[3:5])  # time start
+        time_end = " ".join(s.split('\\')[-1].split('.')[0].split('_')[5:7]) if "@" in s.split('\\')[-1] else " ".join(
+            s.split('\\')[-1].split('.')[0].split('_')[6:8])  # time end
+        ui_dict_list.append({"wxid": wxid, "start_time": time_start, "end_time": time_end, "flag": False})
 
 
 
     # 遍历ai_json文件夹,获取所有文件名
     work_path = os.path.join(gc.work_path, "export", my_wxid, "ai_json")
     if not os.path.exists(work_path):
-        return ReJson(0,body={"ui_dict_list":ui_dict_list,"ai_dict_list":[]})
+        os.makedirs(work_path)
     file_list:List[str]=[]
     recursive_listdir(work_path,list=file_list)
 
@@ -630,14 +649,23 @@ def get_ai_ui_json_list():
 
     # 构造字典对象
     for s in ai_list:
-        wxid = s.split('.')[0].split('_')[0]  # wxid
-        time_start = " ".join(s.split('.')[0].split('_')[2:4])  # time start
-        time_end = " ".join(s.split('.')[0].split('_')[5:7])  # time end
-        ai_dict_list.append({"wxid": wxid, "time_start": time_start, "time_end": time_end})
+        wxid = s.split('\\')[-1].split('.')[0].split('_')[0] if "@" in s.split('\\')[-1] else \
+        s.split('\\')[-1].split('.')[0].split('_')[1]  # wxid
+        time_start = " ".join(s.split('\\')[-1].split('.')[0].split('_')[2:4]) if "@" in s.split('\\')[
+            -1] else " ".join(s.split('\\')[-1].split('.')[0].split('_')[3:5])  # time start
+        time_end = " ".join(s.split('\\')[-1].split('.')[0].split('_')[5:7]) if "@" in s.split('\\')[-1] else " ".join(
+            s.split('\\')[-1].split('.')[0].split('_')[6:8])  # time end
+        ai_dict_list.append({"wxid": wxid, "start_time": time_start, "end_time": time_end, "flag": True})
 
+    # # 合并两个字典列表
+    # dict_list = ui_dict_list + ai_dict_list
+    # print(ui_dict_list)
+    # print(ai_dict_list)
 
+    # 去重
+    dict_list = de_weight(ui_dict_list,ai_dict_list)
 
-    return ReJson(0,body={"ui_dict_list":ui_dict_list,"ai_dict_list":ai_dict_list})
+    return ReJson(0,body={"items":dict_list})
 
 
 
@@ -646,6 +674,9 @@ def get_file_path(work_path: str, file_name: str) -> str | None:
     """
     获取ai_json文件路径
     """
+    # 遍历文件夹内的所有文件，找到对应文件名的文件路径
+
+
     path_list = os.listdir(work_path)
     for path in path_list:
         full_path = os.path.join(work_path, path)
@@ -659,21 +690,20 @@ def get_file_path(work_path: str, file_name: str) -> str | None:
 
 class FileNameRequest(BaseModel):
     wxid: str
-    start_time: int
-    end_time: int
+    start_time: str
+    end_time: str
 
 @rs_api.api_route('/db_to_ai_json', methods=["GET", 'POST'])
 def db_to_ai_json(file_name: FileNameRequest = Body(..., embed=True)):
     """
     导出聊天记录到ai_json
     """
-    start_time = file_name.start_time /1000.0
-    end_time = file_name.end_time /1000.0
+    start_time = file_name.start_time
+    end_time = file_name.end_time
     wxid = file_name.wxid
-    start_time = datetime.datetime.fromtimestamp(float(start_time)).strftime("%Y-%m-%d %H:%M:%S")  #转换成日期格式
-    end_time = datetime.datetime.fromtimestamp(float(end_time)).strftime("%Y-%m-%d %H:%M:%S")
 
-    file_name = wxid + '_mini_' + start_time.replace(' ', '_').replace(':', '-') + '_' + end_time.replace(' ', '_').replace(':', '-') + '_ai'
+
+    file_name = wxid + '_mini_' + start_time.replace(' ', '_').replace(':', '-') + '_to_' + end_time.replace(' ', '_').replace(':', '-') + '_ai'
     # file_name = wxid + '_aiyes_' + start_time.replace(' ', '_').replace(':', '-') + '_' + end_time.replace(' ', '_').replace(':', '-')
     file_name = file_name + '.json'
 
@@ -682,8 +712,11 @@ def db_to_ai_json(file_name: FileNameRequest = Body(..., embed=True)):
     my_wxid = gc.get_conf(gc.at, "last")
     if not my_wxid: return ReJson(1001, body="my_wxid is required")
 
+
+
     result = get_file_path(os.path.join(gc.work_path, "export", my_wxid, "json"), file_name)
 
+
     if result is None:
         return ReJson(1002, body=f"file not found: {file_name}")
 
@@ -700,7 +733,7 @@ def db_to_ai_json(file_name: FileNameRequest = Body(..., embed=True)):
     if not apikey:
         return ReJson(1002, body="deepseek_setting.API_KEY is required")
     llm_api = DeepSeekApi(api_key=apikey)
-    json_data = llm_api.send_msg(module=0,message=json_data)
+    json_data = llm_api.send_msg(module=0,message=json.dumps(json_data))
 
     # 保存到ai_json
     ai_json_path = os.path.join(gc.work_path, "export", my_wxid, "ai_json")
@@ -708,7 +741,7 @@ def db_to_ai_json(file_name: FileNameRequest = Body(..., embed=True)):
         os.makedirs(ai_json_path)
 
     assert isinstance(ai_json_path, str)
-    file_name = wxid + '_aiyes_' + start_time.replace(' ', '_').replace(':', '-') + '_' + end_time.replace(' ',
+    file_name = wxid + '_aiyes_' + start_time.replace(' ', '_').replace(':', '-') + '_to_' + end_time.replace(' ',
                                                                                                            '_').replace(
         ':', '-')
     file_name = file_name + '.json'
@@ -720,28 +753,35 @@ def db_to_ai_json(file_name: FileNameRequest = Body(..., embed=True)):
 
 
 
-
+class FileNameGetUiRequest(BaseModel):
+    wxid: str
+    start_time: str
+    end_time: str
 
 # 获取可视化界面json文件
 @rs_api.api_route('/get_ui_json', methods=["GET", 'POST'])
-def get_ui_json(file_name: FileNameRequest = Body(..., embed=True)):
+def get_ui_json(file_name: FileNameGetUiRequest = Body(..., embed=True)):
     """
     获取可视化界面json文件
     """
-    start_time = file_name.start_time /1000.0
-    end_time = file_name.end_time /1000.0
-    wxid = file_name.wxid
-    start_time = datetime.datetime.fromtimestamp(float(start_time)).strftime("%Y-%m-%d %H:%M:%S")  #转换成日期格式
-    end_time = datetime.datetime.fromtimestamp(float(end_time)).strftime("%Y-%m-%d %H:%M:%S")
+    # print(file_name.wxid)
 
-    file_name = wxid + '_aiyes_' + start_time.replace(' ', '_').replace(':', '-') + '_' + end_time.replace(' ', '_').replace(':', '-')
+    start_time = file_name.start_time
+    end_time = file_name.end_time
+    wxid = file_name.wxid if "@" in file_name.wxid else "wxid_" + file_name.wxid
+
+
+    # start_time = datetime.datetime.fromtimestamp(float(start_time)).strftime("%Y-%m-%d %H:%M:%S")  #转换成日期格式
+    # end_time = datetime.datetime.fromtimestamp(float(end_time)).strftime("%Y-%m-%d %H:%M:%S")
+
+    file_name = wxid + '_aiyes_' + start_time.replace(' ', '_').replace(':', '-') + '_to_' + end_time.replace(' ', '_').replace(':', '-')
     file_name = file_name + '.json'
 
 
     my_wxid = gc.get_conf(gc.at, "last")
     if not my_wxid: return ReJson(1001, body="my_wxid is required")
 
-    result = get_file_path(os.path.join(gc.work_path, "export", my_wxid, "json"), file_name)
+    result = get_file_path(os.path.join(gc.work_path, "export", my_wxid, "ai_json"), file_name)
 
     if result is None:
         return ReJson(1002, body=f"file not found: {file_name}")
diff --git a/pywxdump/ui/src/api/base.ts b/pywxdump/ui/src/api/base.ts
index f4d415d..a599c81 100644
--- a/pywxdump/ui/src/api/base.ts
+++ b/pywxdump/ui/src/api/base.ts
@@ -1,62 +1,100 @@
 import http from "@/utils/axios.js";
 
-
 // const is_local_data  = false;
-const is_local_data = localStorage.getItem('isUseLocalData') === 't';
+const is_local_data = localStorage.getItem("isUseLocalData") === "t";
 
 export const apiVersion = () => {
-    return http.get('/api/rs/version').then((res: any) => {
-        return res;
-    }).catch((err: any) => {
-        console.log(err);
-        return '';
+  return http
+    .get("/api/rs/version")
+    .then((res: any) => {
+      return res;
     })
-}
+    .catch((err: any) => {
+      console.log(err);
+      return "";
+    });
+};
 
 export const api_db_init = async () => {
-    const t = await http.get('/api/rs/is_init')
-    console.log("is_db_init", !!t);
-    return !!t;
-}
+  const t = await http.get("/api/rs/is_init");
+  console.log("is_db_init", !!t);
+  return !!t;
+};
 
 export const api_img = (url: string) => {
-    if (is_local_data) {
-        return `./imgsrc?src=${url}`;
-    }
-    return `/api/rs/imgsrc?src=${url}`;
-}
+  if (is_local_data) {
+    return `./imgsrc?src=${url}`;
+  }
+  return `/api/rs/imgsrc?src=${url}`;
+};
 export const api_audio = (url: string) => {
-    if (is_local_data) {
-        return `./audio?src=${url}`;
-    }
-    return `/api/rs/audio?src=${url}`;
-}
+  if (is_local_data) {
+    return `./audio?src=${url}`;
+  }
+  return `/api/rs/audio?src=${url}`;
+};
 
 export const api_video = (url: string) => {
-    if (is_local_data) {
-        return `./video?src=${url}`;
-    }
-    return `/api/rs/video?src=${url}`;
-}
+  if (is_local_data) {
+    return `./video?src=${url}`;
+  }
+  return `/api/rs/video?src=${url}`;
+};
 
 export const api_file = (url: string) => {
-    if (is_local_data) {
-        return `./file?src=${url}`;
-    }
-    return `/api/rs/file?src=${url}`;
-}
+  if (is_local_data) {
+    return `./file?src=${url}`;
+  }
+  return `/api/rs/file?src=${url}`;
+};
 
 // file_info
 export const api_file_info = (url: string) => {
-    if (is_local_data) {
-        return `./file_info?src=${url}`;
-    }
-    return http.post('/api/rs/file_info', {
-        'file_path': url,
-    }).then((res: any) => {
-        return res;
-    }).catch((err: any) => {
-        console.log(err);
-        return '';
+  if (is_local_data) {
+    return `./file_info?src=${url}`;
+  }
+  return http
+    .post("/api/rs/file_info", {
+      file_path: url,
     })
-}
\ No newline at end of file
+    .then((res: any) => {
+      return res;
+    })
+    .catch((err: any) => {
+      console.log(err);
+      return "";
+    });
+};
+
+// DeepSeek设置部分
+export const apiDeepSeekSet = (key: string) => {
+  return http
+    .post("/api/rs/deepseek_setting", {
+      deepseek: {
+        api_key: key,
+      },
+    })
+    .then((res: any) => {
+      return res;
+    })
+    .catch((err: any) => {
+      console.log(err);
+      return "";
+    });
+};
+
+
+/**
+ * 获取DeepSeek设置
+ */
+export const apiDeepSeekGet = () => {
+  return http
+   .get("/api/rs/deepseek_setting")
+   .then((res: any) => {
+      return res;
+    })
+   .catch((err: any) => {
+      console.log(err);
+      return "";
+    });
+};
diff --git a/pywxdump/ui/src/api/chat.ts b/pywxdump/ui/src/api/chat.ts
index 2e80447..76c26d1 100644
--- a/pywxdump/ui/src/api/chat.ts
+++ b/pywxdump/ui/src/api/chat.ts
@@ -112,3 +112,50 @@ export const apiMsgs = (wxid: string, start: number, limit: number) => {
         return '';
     })
 }
+
+/**
+ * 获取ai可视化文件列表
+ */
+export const apiAiList = () =>{
+    return http.get('/api/rs/ai_ui_json_list' ).then((res: any) => {
+        return res;
+    }).catch((err: any) => {
+        console.log(err);
+        return '';
+    })
+}
+
+
+/**
+ * 获取ai可视化文件内容
+ */
+
+export interface AiUiJson {
+    
+    wxid: string,
+    start_time:string,
+    end_time:string,
+    
+}
+
+
+
+export const apiAiUiJson = (file_name: AiUiJson) =>{
+    return http.post('/api/rs/get_ui_json', {file_name}).then((res: any) => {
+        return res;
+    }).catch((err: any) => {
+        console.log(err);
+        return '';
+    })
+}
+
+
+export const apiAiUiCreateJson = (file_name: AiUiJson) =>{
+    return http.post('/api/rs/db_to_ai_json', {file_name}).then((res: any) => {
+        return res;
+    }).catch((err: any) => {
+        console.log(err);
+        return '';
+    })
+}
+
diff --git a/pywxdump/ui/src/components/utils/DeepSeekSet.vue b/pywxdump/ui/src/components/utils/DeepSeekSet.vue
new file mode 100644
index 0000000..99fc798
--- /dev/null
+++ b/pywxdump/ui/src/components/utils/DeepSeekSet.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="deepseek-set">
+    <el-form :model="form" label-width="120px">
+      <el-form-item label="DeepSeek API Key">
+        <el-input 
+          v-model="form.apiKey" 
+          placeholder="请输入DeepSeek API Key"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button 
+          type="primary" 
+          @click="handleSubmit"
+          :loading="submitting"
+        >
+          提交
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { apiDeepSeekSet, apiDeepSeekGet } from '@/api/base'
+
+const form = ref({
+  apiKey: ''
+})
+
+const submitting = ref(false)
+
+const fetchSettings = async () => {
+  try {
+    const res = await apiDeepSeekGet()
+    if (res?.API_KEY) {
+      form.value.apiKey = res.API_KEY
+    }
+  } catch (error) {
+    ElMessage.error('获取设置失败')
+  }
+}
+
+onMounted(() => {
+  fetchSettings()
+})
+
+const handleSubmit = async () => {
+  if (!form.value.apiKey) {
+    ElMessage.warning('请输入API Key')
+    return
+  }
+  
+  submitting.value = true
+  try {
+    await apiDeepSeekSet(form.value.apiKey)
+    ElMessage.success('设置成功')
+  } catch (error) {
+    ElMessage.error('设置失败')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.deepseek-set {
+  padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/pywxdump/ui/src/views/Chat2UiSelectVue.vue b/pywxdump/ui/src/views/Chat2UiSelectVue.vue
index e69de29..67d50a5 100644
--- a/pywxdump/ui/src/views/Chat2UiSelectVue.vue
+++ b/pywxdump/ui/src/views/Chat2UiSelectVue.vue
@@ -0,0 +1,194 @@
+<template>
+  <div
+    style="
+      background-color: #d2d2fa;
+      height: 100vh;
+      display: grid;
+      place-items: center;
+    "
+  >
+    <div
+      style="
+        background-color: #fff;
+        width: 90%;
+        height: 80%;
+        border-radius: 10px;
+        padding: 20px;
+        overflow: auto;
+      "
+    >
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
+        <div style="font-size: 20px; font-weight: bold">微信数据可视化</div>
+      </div>
+      <div style="margin-top: 20px">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :default-sort="{ prop: 'startTime', order: 'descending' }"
+        >
+          <el-table-column
+            prop="wxid"
+            label="微信ID"
+            sortable
+            
+            :filter-method="filterWxid"
+          ></el-table-column>
+          <el-table-column
+            prop="start_time"
+            label="开始时间"
+            sortable
+            
+            :filter-method="filterStartTime"
+          ></el-table-column>
+          <el-table-column
+            prop="end_time"
+            label="结束时间"
+            sortable
+            :filter-method="filterEndTime"
+          ></el-table-column>
+          <el-table-column
+            prop="flag"
+            label="状态"
+            :filters="[
+              { text: '已生成', value: true },
+              { text: '未生成', value: false },
+            ]"
+            :filter-method="filterFlag"
+          >
+            <template #default="scope">
+              <el-tag :type="scope.row.flag ? 'success' : 'warning'">
+                {{ scope.row.flag ? "已生成" : "未生成" }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template #default="scope">
+              <el-button
+                v-if="scope.row.flag"
+                type="primary"
+                @click="handleJump(scope.row)"
+                >跳转</el-button
+              >
+              <el-button
+                v-else
+                type="success"
+                @click="handleGenerate(scope.row)"
+                >生成</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup tang="ts">
+import { onMounted, ref } from "vue";
+import { apiAiList } from "@/api/chat";
+import { useRoute, useRouter } from "vue-router";
+import {ElLoading,ElMessage} from "element-plus";
+import { apiAiUiCreateJson } from "@/api/chat";
+const route = useRoute();
+const router = useRouter();
+
+const tableData = ref([
+
+]);
+
+/**
+ * 获取数据
+ */
+const getTableData = async () => {
+  try {
+    const res = await apiAiList();
+    // console.log("数据：" + res.items[0]);
+    tableData.value = res.items;
+  } catch (error) {
+    console.error("获取数据失败:", error);
+  }
+};
+
+const filterWxid = (value, row) => {
+  return row.wxid === value;
+};
+
+const filterStartTime = (value, row) => {
+  return row.startTime.includes(value);
+};
+
+const filterEndTime = (value, row) => {
+  return row.endTime.includes(value);
+};
+
+const filterFlag = (value, row) => {
+  return row.flag === value;
+};
+
+const handleJump = (row) => {
+  // 跳转逻辑
+  /***
+   * 构建查询参数
+   * 格式：
+   */
+  console.log("跳转到可视化页面:", row);
+  router.push({
+    path: "/chat2ui",
+    query: {
+      wxid: row.wxid,
+      start_time: row.start_time,
+      end_time: row.end_time,
+    },
+  });
+};
+
+const handleGenerate = async (row) => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在生成可视化数据，可能需要3分钟左右...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  });
+  
+  try {
+    // 设置3分钟超时
+    const timeoutPromise = new Promise((_, reject) => 
+      setTimeout(() => reject(new Error('请求超时')), 180000)
+    );
+    
+    const response = await Promise.race([
+      apiAiUiCreateJson({
+        
+            wxid: row.wxid,
+        start_time: row.start_time,
+        end_time: row.end_time
+        
+        
+      }),
+      timeoutPromise
+    ]);
+    
+    if (response) {
+      ElMessage.success('可视化数据生成成功');
+      await getTableData(); // 刷新表格数据
+    }
+  } catch (error) {
+    console.error('生成失败:', error);
+    ElMessage.error(error.message || '生成可视化数据失败');
+  } finally {
+    loading.close();
+  }
+};
+
+onMounted(async () => {
+  console.log("页面加载完成");
+  await getTableData();
+});
+</script>
+
+<style scoped></style>
diff --git a/pywxdump/ui/src/views/Chat2UiView.vue b/pywxdump/ui/src/views/Chat2UiView.vue
index feab24a..2cf2b0c 100644
--- a/pywxdump/ui/src/views/Chat2UiView.vue
+++ b/pywxdump/ui/src/views/Chat2UiView.vue
@@ -1,1091 +1,1251 @@
 <template>
-    <div class="chat-report">
-      <!-- 头部信息 -->
-      <header>
-        <h1>{{ reportData.header.title }}</h1>
-        <p class="date">{{ reportData.header.date }}</p>
-        <div class="meta-info">
-          <span>总消息数：{{ reportData.header.metaInfo.totalMessages }}</span>
-          <span>活跃用户：{{ reportData.header.metaInfo.activeUsers }}</span>
-          <span>时间范围：{{ reportData.header.metaInfo.timeRange }}</span>
-        </div>
-      </header>
-  
-      <!-- 1. 今日讨论热点 -->
-      <section class="hot-topics">
-        <h2>今日讨论热点</h2>
-        <div class="topics-container">
-          <div class="topic-card" v-for="(topic, index) in reportData.sections.hotTopics.items" :key="'topic-'+index">
-            <h3>{{ topic.name }}</h3>
-            <div class="topic-category">{{ topic.category }}</div>
-            <p class="topic-summary">{{ topic.summary }}</p>
-            <div class="topic-keywords">
-              <span class="keyword" v-for="(keyword, kIndex) in topic.keywords" :key="'keyword-'+kIndex">{{ keyword }}</span>
-            </div>
-            <div class="topic-mentions">提及次数：{{ topic.mentions }}</div>
-          </div>
-        </div>
-      </section>
-  
-      <!-- 2. 实用教程与资源分享 -->
-      <section class="tutorials">
-        <h2>实用教程与资源分享</h2>
-        <div class="tutorials-container">
-          <div class="tutorial-card" v-for="(tutorial, index) in reportData.sections.tutorials.items" :key="'tutorial-'+index">
-            <div class="tutorial-type">{{ tutorial.type }}</div>
-            <h3>{{ tutorial.title }}</h3>
-            <div class="tutorial-meta">
-              <span class="shared-by">分享者：{{ tutorial.sharedBy }}</span>
-              <span class="share-time">时间：{{ tutorial.time }}</span>
-            </div>
-            <p class="tutorial-summary">{{ tutorial.summary }}</p>
-            <div class="key-points">
-              <h4>要点：</h4>
-              <ul>
-                <li v-for="(point, pIndex) in tutorial.keyPoints" :key="'point-'+pIndex">{{ point }}</li>
-              </ul>
-            </div>
-            <div class="tutorial-link">
-              <a :href="tutorial.url" class="link valid">查看原文: {{ tutorial.domain }}</a>
-            </div>
-            <div class="tutorial-category">分类：{{ tutorial.category }}</div>
-          </div>
-        </div>
-      </section>
-  
-      <!-- 3. 重要消息汇总 -->
-      <section class="important-messages">
-        <h2>重要消息汇总</h2>
-        <div class="messages-container">
-          <div class="message-card" v-for="(message, index) in reportData.sections.importantMessages.items" :key="'message-'+index">
-            <div class="message-meta">
-              <span class="time">{{ message.time }}</span>
-              <span class="sender">{{ message.sender }}</span>
-              <span class="message-type">{{ message.type }}</span>
-              <span class="priority" :class="'priority-'+message.priority">优先级：{{ message.priority }}</span>
-            </div>
-            <p class="message-content">{{ message.content }}</p>
-            <div class="message-full-content">
-              <p>{{ message.fullContent }}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-  
-      <!-- 4. 有趣对话或金句 -->
-      <section class="interesting-dialogues">
-        <h2>有趣对话或金句</h2>
-        <div class="dialogues-container">
-          <div class="dialogue-card" v-for="(dialogue, index) in reportData.sections.dialogues.items" :key="'dialogue-'+index">
-            <div class="dialogue-type">{{ dialogue.type }}</div>
-            <div class="dialogue-content">
-              <div class="message" v-for="(msg, mIndex) in dialogue.messages" :key="'msg-'+mIndex">
-                <div class="message-meta">
-                  <span class="speaker">{{ msg.speaker }}</span>
-                  <span class="time">{{ msg.time }}</span>
-                </div>
-                <p class="message-content">{{ msg.content }}</p>
-              </div>
-            </div>
-            <div class="dialogue-highlight">{{ dialogue.highlight }}</div>
-            <div class="dialogue-topic">相关话题：{{ dialogue.relatedTopic }}</div>
-          </div>
-        </div>
-      </section>
-  
-      <!-- 5. 问题与解答 -->
-      <section class="questions-answers">
-        <h2>问题与解答</h2>
-        <div class="qa-container">
-          <div class="qa-card" v-for="(qa, index) in reportData.sections.qa.items" :key="'qa-'+index">
-            <div class="question">
-              <div class="question-meta">
-                <span class="asker">{{ qa.question.asker }}</span>
-                <span class="time">{{ qa.question.time }}</span>
-              </div>
-              <p class="question-content">{{ qa.question.content }}</p>
-              <div class="question-tags">
-                <span class="tag" v-for="(tag, tIndex) in qa.question.tags" :key="'tag-'+tIndex">{{ tag }}</span>
-              </div>
-            </div>
-            <div class="answers">
-              <div class="answer" v-for="(answer, aIndex) in qa.answers" :key="'answer-'+aIndex">
-                <div class="answer-meta">
-                  <span class="responder">{{ answer.responder }}</span>
-                  <span class="time">{{ answer.time }}</span>
-                  <span class="accepted-badge" v-if="answer.isAccepted">最佳回答</span>
-                </div>
-                <p class="answer-content">{{ answer.content }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-  
-      <!-- 6. 群内数据可视化 -->
-      <section class="analytics">
-        <h2>群内数据可视化</h2>
-  
-        <!-- 话题热度 -->
-        <h3>话题热度</h3>
-        <div class="heatmap-container">
-          <div class="heat-item" v-for="(heat, index) in reportData.sections.analytics.heatmap" :key="'heat-'+index">
-            <div class="heat-topic">{{ heat.topic }}</div>
-            <div class="heat-percentage">{{ heat.percentage }}%</div>
-            <div class="heat-bar">
-              <div class="heat-fill" :style="`width: ${heat.percentage}%; background-color: ${heat.color};`"></div>
-            </div>
-            <div class="heat-count">{{ heat.count }}条消息</div>
-          </div>
-        </div>
-  
-        <!-- 话唠榜 -->
-        <h3>话唠榜</h3>
-        <div class="participants-container">
-          <div class="participant-item" v-for="(participant, index) in reportData.sections.analytics.chattyRanking" :key="'participant-'+index">
-            <div class="participant-rank">{{ participant.rank }}</div>
-            <div class="participant-info">
-              <div class="participant-name">{{ participant.name }}</div>
-              <div class="participant-count">发言数：{{ participant.count }}</div>
-              <div class="participant-characteristics">
-                <span class="characteristic" v-for="(char, cIndex) in participant.characteristics" :key="'char-'+cIndex">{{ char }}</span>
-              </div>
-              <div class="participant-words">
-                <span class="word" v-for="(word, wIndex) in participant.commonWords" :key="'word-'+wIndex">{{ word }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-  
-        <!-- 熬夜冠军 -->
-        <h3>熬夜冠军</h3>
-        <div class="night-owls-container">
-          <div class="night-owl-item">
-            <div class="owl-crown" title="熬夜冠军">👑</div>
-            <div class="owl-info">
-              <div class="owl-name">{{ reportData.sections.analytics.nightOwl.name }}</div>
-              <div class="owl-title">{{ reportData.sections.analytics.nightOwl.title }}</div>
-              <div class="owl-time">最晚活跃时间：{{ reportData.sections.analytics.nightOwl.latestTime }}</div>
-              <div class="owl-messages">深夜消息数：{{ reportData.sections.analytics.nightOwl.messageCount }}</div>
-              <div class="owl-last-message">{{ reportData.sections.analytics.nightOwl.lastMessage }}</div>
-              <div class="owl-note">注：熬夜时段定义为23:00-06:00，已考虑不同时区</div>
-            </div>
-          </div>
-        </div>
-      </section>
-  
-      <!-- 7. 词云 -->
-      <section class="word-cloud">
-        <h2>热门词云</h2>
-        <div class="cloud-container">
-          <div class="cloud-wordcloud" id="word-cloud">
-            <span 
-              class="cloud-word" 
-              v-for="(word, index) in reportData.sections.wordCloud.words" 
-              :key="'word-'+index"
-              :style="{
-                left: getRandomPosition(600, word.text.length * 10) + 'px',
-                top: getRandomPosition(400, 20) + 'px',
-                fontSize: word.size + 'px',
-                color: word.color,
-                transform: `rotate(${word.rotation}deg)`
-              }"
-              @mouseover="hoverWord(index)"
-              @mouseout="unhoverWord(index)"
+  <div class="chat-report">
+    <!-- 头部信息 -->
+    <header>
+      <h1>{{ reportData.header.title }}</h1>
+      <p class="date">{{ reportData.header.date }}</p>
+      <div class="meta-info">
+        <span>总消息数：{{ reportData.header.metaInfo.totalMessages }}</span>
+        <span>活跃用户：{{ reportData.header.metaInfo.activeUsers }}</span>
+        <span>时间范围：{{ reportData.header.metaInfo.timeRange }}</span>
+      </div>
+    </header>
+
+    <!-- 1. 今日讨论热点 -->
+    <section class="hot-topics">
+      <h2>今日讨论热点</h2>
+      <div class="topics-container">
+        <div
+          class="topic-card"
+          v-for="(topic, index) in reportData.sections.hotTopics.items"
+          :key="'topic-' + index"
+        >
+          <h3>{{ topic.name }}</h3>
+          <div class="topic-category">{{ topic.category }}</div>
+          <p class="topic-summary">{{ topic.summary }}</p>
+          <div class="topic-keywords">
+            <span
+              class="keyword"
+              v-for="(keyword, kIndex) in topic.keywords"
+              :key="'keyword-' + kIndex"
+              >{{ keyword }}</span
             >
-              {{ word.text }}
-            </span>
           </div>
-  
-          <div class="cloud-legend">
-            <div class="legend-item" v-for="(item, index) in reportData.sections.wordCloud.legend" :key="'legend-'+index">
-              <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
-              <span class="legend-label">{{ item.label }}</span>
+          <div class="topic-mentions">提及次数：{{ topic.mentions }}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 2. 实用教程与资源分享 -->
+    <section class="tutorials">
+      <h2>实用教程与资源分享</h2>
+      <div class="tutorials-container">
+        <div
+          class="tutorial-card"
+          v-for="(tutorial, index) in reportData.sections.tutorials.items"
+          :key="'tutorial-' + index"
+        >
+          <div class="tutorial-type">{{ tutorial.type }}</div>
+          <h3>{{ tutorial.title }}</h3>
+          <div class="tutorial-meta">
+            <span class="shared-by">分享者：{{ tutorial.sharedBy }}</span>
+            <span class="share-time">时间：{{ tutorial.time }}</span>
+          </div>
+          <p class="tutorial-summary">{{ tutorial.summary }}</p>
+          <div class="key-points">
+            <h4>要点：</h4>
+            <ul>
+              <li
+                v-for="(point, pIndex) in tutorial.keyPoints"
+                :key="'point-' + pIndex"
+              >
+                {{ point }}
+              </li>
+            </ul>
+          </div>
+          <div class="tutorial-link">
+            <a :href="tutorial.url" class="link valid"
+              >查看原文: {{ tutorial.domain }}</a
+            >
+          </div>
+          <div class="tutorial-category">分类：{{ tutorial.category }}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 3. 重要消息汇总 -->
+    <section class="important-messages">
+      <h2>重要消息汇总</h2>
+      <div class="messages-container">
+        <div
+          class="message-card"
+          v-for="(message, index) in reportData.sections.importantMessages
+            .items"
+          :key="'message-' + index"
+        >
+          <div class="message-meta">
+            <span class="time">{{ message.time }}</span>
+            <span class="sender">{{ message.sender }}</span>
+            <span class="message-type">{{ message.type }}</span>
+            <span class="priority" :class="'priority-' + message.priority"
+              >优先级：{{ message.priority }}</span
+            >
+          </div>
+          <p class="message-content">{{ message.content }}</p>
+          <div class="message-full-content">
+            <p>{{ message.fullContent }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 4. 有趣对话或金句 -->
+    <section class="interesting-dialogues">
+      <h2>有趣对话或金句</h2>
+      <div class="dialogues-container">
+        <div
+          class="dialogue-card"
+          v-for="(dialogue, index) in reportData.sections.dialogues.items"
+          :key="'dialogue-' + index"
+        >
+          <div class="dialogue-type">{{ dialogue.type }}</div>
+          <div class="dialogue-content">
+            <div
+              class="message"
+              v-for="(msg, mIndex) in dialogue.messages"
+              :key="'msg-' + mIndex"
+            >
+              <div class="message-meta">
+                <span class="speaker">{{ msg.speaker }}</span>
+                <span class="time">{{ msg.time }}</span>
+              </div>
+              <p class="message-content">{{ msg.content }}</p>
+            </div>
+          </div>
+          <div class="dialogue-highlight">{{ dialogue.highlight }}</div>
+          <div class="dialogue-topic">
+            相关话题：{{ dialogue.relatedTopic }}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 5. 问题与解答 -->
+    <section class="questions-answers">
+      <h2>问题与解答</h2>
+      <div class="qa-container">
+        <div
+          class="qa-card"
+          v-for="(qa, index) in reportData.sections.qa.items"
+          :key="'qa-' + index"
+        >
+          <div class="question">
+            <div class="question-meta">
+              <span class="asker">{{ qa.question.asker }}</span>
+              <span class="time">{{ qa.question.time }}</span>
+            </div>
+            <p class="question-content">{{ qa.question.content }}</p>
+            <div class="question-tags">
+              <span
+                class="tag"
+                v-for="(tag, tIndex) in qa.question.tags"
+                :key="'tag-' + tIndex"
+                >{{ tag }}</span
+              >
+            </div>
+          </div>
+          <div class="answers">
+            <div
+              class="answer"
+              v-for="(answer, aIndex) in qa.answers"
+              :key="'answer-' + aIndex"
+            >
+              <div class="answer-meta">
+                <span class="responder">{{ answer.responder }}</span>
+                <span class="time">{{ answer.time }}</span>
+                <span class="accepted-badge" v-if="answer.isAccepted"
+                  >最佳回答</span
+                >
+              </div>
+              <p class="answer-content">{{ answer.content }}</p>
             </div>
           </div>
         </div>
-      </section>
-  
-      <!-- 8. 页面底部 -->
-      <footer>
-        <p>数据来源：{{ reportData.footer.dataSource }}</p>
-        <p>生成时间：<span class="generation-time">{{ reportData.footer.generationTime }}</span></p>
-        <p>统计周期：{{ reportData.footer.statisticalPeriod }}</p>
-        <p class="disclaimer">{{ reportData.footer.disclaimer }}</p>
-      </footer>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'ChatReport',
-    data() {
-      return {
-        reportData: {
-          "header": {
-            "title": "群聊报告报告",
-            "date": "2025-04-29",
-            "metaInfo": {
-              "totalMessages": "35",
-              "activeUsers": "12",
-              "timeRange": "07:03:10 - 15:36:25"
-            }
-          },
-          "sections": {
-            "hotTopics": {
-              "items": [
-                {
-                  "name": "AI技术讨论",
-                  "category": "科技",
-                  "summary": "群内围绕Qwen3开源、Vidu Q1体验、夸克AI相机等AI技术展开热烈讨论，涉及模型性能、应用场景和开发者体验。多位成员分享了相关技术文章和体验报告。",
-                  "keywords": ["Qwen3", "Vidu", "AI相机"],
-                  "mentions": "15"
-                },
-                {
-                  "name": "熬夜与工作压力",
-                  "category": "生活",
-                  "summary": "成员们讨论熬夜工作现象，分享各自熬夜经历，对比互联网大厂与普通开发者的工作强度差异，引发关于工作生活平衡的思考。",
-                  "keywords": ["熬夜", "加班", "工作强度"],
-                  "mentions": "8"
-                }
-              ]
-            },
-            "tutorials": {
-              "items": [
-                {
-                  "type": "TUTORIAL",
-                  "title": "体验完刚上线的Vidu Q1，后劲有点大（附AI视频创作教程）",
-                  "sharedBy": "苍何",
-                  "time": "2025-04-29 09:39:42",
-                  "summary": "分享Vidu Q1 AI视频创作工具的体验和教程，介绍其清晰度和一致性的提升。",
-                  "keyPoints": ["AI视频清晰度提升", "一致性改进"],
-                  "url": "http://mp.weixin.qq.com/s?__biz=MzU4NTE1Mjg4MA==&mid=2247493267&idx=1&sn=0189fb501578ce8e27142fbe2f590d03&chksm=fc9a946728c367005c19cb5a335300d05d51a441f9f20424a0a72c904a47bdf003252576318a&mpshare=1&scene=1&srcid=04297l70B2zsuypDfjUh0rh5&sharer_shareinfo=181efb947f938ab90786c776bf7bbda7&sharer_shareinfo_first=181efb947f938ab90786c776bf7bbda7#rd",
-                  "domain": "mp.weixin.qq.com",
-                  "category": "AI工具"
-                },
-                {
-                  "type": "TUTORIAL",
-                  "title": "阿里新出的夸克AI相机，强大到我有点陌生",
-                  "sharedBy": "苍何",
-                  "time": "2025-04-29 09:42:38",
-                  "summary": "介绍夸克AI相机的新奇玩法和功能，展示其强大的AI图像处理能力。",
-                  "keyPoints": ["新奇玩法", "抽象功能"],
-                  "url": "http://mp.weixin.qq.com/s?__biz=MzU4NTE1Mjg4MA==&mid=2247493275&idx=1&sn=93556ddd1da7fb8733a23a7c4adbb76b&chksm=fc2a2d25774cce23c75acd8850b85c585c0bcf78d14b810e157efaec5106abf563cf58e26aef&mpshare=1&scene=1&srcid=0429vDf8NbEzNLBQQyFlABmU&sharer_shareinfo=28b94477ec8201b88aa30338e82e8999&sharer_shareinfo_first=28b94477ec8201b88aa30338e82e8999#rd",
-                  "domain": "mp.weixin.qq.com",
-                  "category": "AI应用"
-                },
-                {
-                  "type": "RESOURCE",
-                  "title": "仅2MB，Windows瞬间超级丝滑！",
-                  "sharedBy": "AHapi²⁰²⁵",
-                  "time": "2025-04-29 11:13:38",
-                  "summary": "分享一款轻量级Windows优化工具，声称能显著提升系统运行速度。",
-                  "keyPoints": ["2MB大小", "系统优化"],
-                  "url": "https://mp.weixin.qq.com/s/es77Jc6Du03ppJD5XJeQUg",
-                  "domain": "mp.weixin.qq.com",
-                  "category": "系统工具"
-                }
-              ]
-            },
-            "importantMessages": {
-              "items": [
-                {
-                  "time": "2025-04-29 10:00:18",
-                  "sender": "苍何",
-                  "type": "NEWS",
-                  "priority": "高",
-                  "content": "2025年04月29日 AI科技早报：阿里开源8款Qwen3模型，腾讯开源Kuikly跨端框架，OpenAI推出ChatGPT购物功能等11条重要新闻。",
-                  "fullContent": "2025年04月29日 AI科技早报1、阿里开源8款Qwen3模型，集成MCP，性能超DeepSeek-R1、OpenAI o1。2、Qafind Labs发布ChatDLM扩散语言模型，推理速度高达2800 tokens/s。3、腾讯开源Kuikly跨端框架，基于Kotlin支持多平台开发，已应用于QQ。4、OpenAI 推出 ChatGPT 购物功能，用户可通过 ChatGPT 便捷购物。5、字节Seed团队提出PHD-Transformer，突破预训练长度扩展瓶颈。6、百度发布文心快码3.5版本与多模态AI智能体Zulu，助力工程师提效。7、Kimi与财新传媒合作，提供专业财经内容，推动AI+传统媒体融合。8、苹果加速「N50」智能眼镜项目，融合AI技术预计2027年亮相。9、研究显示OpenAI o3在病毒学领域超越94%人类专家，生物安全引关注。10、华为测试自研AI芯片Ascend 910D，旨在替代英伟达H100芯片。11、🔥【记得收藏】早报同步更新到开源 AI 知识库：https://u55dyuejxc.feishu.cn/wiki/FkmNwxYHDigJ3akIUGHc8MSTn4d"
-                }
-              ]
-            },
-            "dialogues": {
-              "items": [
-                {
-                  "type": "DIALOGUE",
-                  "messages": [
-                    {
-                      "speaker": "好名字",
-                      "time": "2025-04-29 08:16:23",
-                      "content": "这个我弄完，ai做的小程序有bug，流程走不通，还改不了[捂脸]"
-                    },
-                    {
-                      "speaker": "贾👦🏻",
-                      "time": "2025-04-29 08:54:33",
-                      "content": "可以微调 不过源码需要买的"
-                    },
-                    {
-                      "speaker": "好名字",
-                      "time": "2025-04-29 09:13:32",
-                      "content": "微调一次，然后再想调就需要开会员了"
-                    },
-                    {
-                      "speaker": "贾👦🏻",
-                      "time": "2025-04-29 09:14:09",
-                      "content": "需求变更一个字 就需要重新购买[破涕为笑]"
-                    }
-                  ],
-                  "highlight": "AI小程序开发中的商业化模式讨论",
-                  "relatedTopic": "AI开发工具"
-                },
-                {
-                  "type": "DIALOGUE",
-                  "messages": [
-                    {
-                      "speaker": "苍何",
-                      "time": "2025-04-29 09:26:49",
-                      "content": "我熬不动"
-                    },
-                    {
-                      "speaker": "AHapi²⁰²⁵",
-                      "time": "2025-04-29 09:27:25",
-                      "content": "不要卷别人[旺柴]别人写了 就不卷他们了"
-                    },
-                    {
-                      "speaker": "苍何",
-                      "time": "2025-04-29 09:27:55",
-                      "content": "新闻得第一时间，做不到写了也没啥用"
-                    },
-                    {
-                      "speaker": "苍何",
-                      "time": "2025-04-29 09:28:03",
-                      "content": "还不如写些应用"
-                    },
-                    {
-                      "speaker": "大风（Wind）",
-                      "time": "2025-04-29 09:28:23",
-                      "content": "看看哪些是5-7点发推文的，基本都是卷王了"
-                    },
-                    {
-                      "speaker": "沉默王二",
-                      "time": "2025-04-29 09:28:44",
-                      "content": "身体能扛住确实离谱"
-                    },
-                    {
-                      "speaker": "苍何",
-                      "time": "2025-04-29 09:29:03",
-                      "content": "是啊，太肝了"
-                    }
-                  ],
-                  "highlight": "关于工作强度和熬夜文化的讨论",
-                  "relatedTopic": "工作生活平衡"
-                }
-              ]
-            },
-            "qa": {
-              "items": [
-                {
-                  "question": {
-                    "asker": "银色子弹-捷",
-                    "time": "2025-04-29 11:10:26",
-                    "content": "问一下win11电脑，你长时间没清理，运行慢，一般用什么来清理电脑？ 不要360啊，那个太流氓了，想知道各位大佬有没有优秀的软件推荐一下",
-                    "tags": ["Windows优化", "系统清理"]
-                  },
-                  "answers": [
-                    {
-                      "responder": "昏沉沉的",
-                      "time": "2025-04-29 11:11:59",
-                      "content": "ccclean",
-                      "isAccepted": false
-                    },
-                    {
-                      "responder": "🤑程序儒",
-                      "time": "2025-04-29 11:13:07",
-                      "content": "360极速版、Wise Care 365",
-                      "isAccepted": false
-                    },
-                    {
-                      "responder": "AHapi²⁰²⁵",
-                      "time": "2025-04-29 11:13:38",
-                      "content": "仅2MB，Windows瞬间超级丝滑！这才是，真神器！",
-                      "isAccepted": true
-                    }
-                  ]
-                },
-                {
-                  "question": {
-                    "asker": "ಠ_ಠ 闲鱼一条ಠ_ಠ",
-                    "time": "2025-04-29 11:37:49",
-                    "content": "请问哪位哥还有扣子的邀请码吗？",
-                    "tags": ["邀请码", "扣子空间"]
-                  },
-                  "answers": [
-                    {
-                      "responder": "贾👦🏻",
-                      "time": "2025-04-29 11:40:37",
-                      "content": "RootUser_2105656329 邀请你体验扣子空间，快来和 Agent 一起开始你的工作吧！https://www.coze.cn/space-preview?invite_code=SCL7DAL0",
-                      "isAccepted": true
-                    },
-                    {
-                      "responder": "9527",
-                      "time": "2025-04-29 11:47:43",
-                      "content": "RootUser_2106519373 邀请你体验扣子空间，快来和 Agent 一起开始你的工作吧！https://www.coze.cn/space-preview?invite_code=A8IT4MUE",
-                      "isAccepted": false
-                    }
-                  ]
-                }
-              ]
-            },
-            "analytics": {
-              "heatmap": [
-                {
-                  "topic": "AI技术",
-                  "percentage": "45",
-                  "color": "#3da9fc",
-                  "count": "16条消息"
-                },
-                {
-                  "topic": "工作讨论",
-                  "percentage": "25",
-                  "color": "#f25f4c",
-                  "count": "9条消息"
-                },
-                {
-                  "topic": "工具推荐",
-                  "percentage": "15",
-                  "color": "#7209b7",
-                  "count": "5条消息"
-                },
-                {
-                  "topic": "其他",
-                  "percentage": "15",
-                  "color": "#e53170",
-                  "count": "5条消息"
-                }
-              ],
-              "chattyRanking": [
-                {
-                  "rank": 1,
-                  "name": "苍何",
-                  "count": "7",
-                  "characteristics": ["技术分享", "新闻发布"],
-                  "commonWords": ["AI", "开源", "熬夜"]
-                },
-                {
-                  "rank": 2,
-                  "name": "AHapi²⁰²⁵",
-                  "count": "6",
-                  "characteristics": ["幽默评论", "资源分享"],
-                  "commonWords": ["旺柴", "加班", "神器"]
-                },
-                {
-                  "rank": 3,
-                  "name": "贾👦🏻",
-                  "count": "3",
-                  "characteristics": ["问题解答", "邀请码分享"],
-                  "commonWords": ["源码", "购买", "邀请"]
-                }
-              ],
-              "nightOwl": {
-                "name": "苍何",
-                "title": "熬夜冠军",
-                "latestTime": "09:42:54",
-                "messageCount": "7",
-                "lastMessage": "我熬夜写了这一篇[旺柴]"
-              }
-            },
-            "wordCloud": {
-              "words": [
-                {
-                  "text": "AI",
-                  "size": 42,
-                  "color": "#00b4d8",
-                  "rotation": 0
-                },
-                {
-                  "text": "熬夜",
-                  "size": 36,
-                  "color": "#4361ee",
-                  "rotation": -15
-                },
-                {
-                  "text": "开源",
-                  "size": 32,
-                  "color": "#00b4d8",
-                  "rotation": 15
-                },
-                {
-                  "text": "Qwen3",
-                  "size": 28,
-                  "color": "#3da9fc",
-                  "rotation": -10
-                },
-                {
-                  "text": "Vidu",
-                  "size": 26,
-                  "color": "#3da9fc",
-                  "rotation": 10
-                },
-                {
-                  "text": "清理",
-                  "size": 24,
-                  "color": "#7209b7",
-                  "rotation": -5
-                },
-                {
-                  "text": "邀请码",
-                  "size": 22,
-                  "color": "#7209b7",
-                  "rotation": 5
-                }
-              ],
-              "legend": [
-                {
-                  "color": "#00b4d8",
-                  "label": "技术 相关词汇"
-                },
-                {
-                  "color": "#4361ee",
-                  "label": "生活 相关词汇"
-                },
-                {
-                  "color": "#7209b7",
-                  "label": "工具 相关词汇"
-                }
-              ]
-            }
-          },
-          "footer": {
-            "dataSource": "群聊聊天记录聊天记录",
-            "generationTime": "2025-04-29 16:00:00",
-            "statisticalPeriod": "2025-04-29 [时间范围]",
-            "disclaimer": "免责声明：本报告内容基于群聊公开讨论，如有不当内容或侵权问题请联系管理员处理。"
-          }
-        }
-      }
+      </div>
+    </section>
+
+    <!-- 6. 群内数据可视化 -->
+    <section class="analytics">
+      <h2>群内数据可视化</h2>
+
+      <!-- 话题热度 -->
+      <h3>话题热度</h3>
+      <div class="heatmap-container">
+        <div
+          class="heat-item"
+          v-for="(heat, index) in reportData.sections.analytics.heatmap"
+          :key="'heat-' + index"
+        >
+          <div class="heat-topic">{{ heat.topic }}</div>
+          <div class="heat-percentage">{{ heat.percentage }}%</div>
+          <div class="heat-bar">
+            <div
+              class="heat-fill"
+              :style="`width: ${heat.percentage}%; background-color: ${heat.color};`"
+            ></div>
+          </div>
+          <div class="heat-count">{{ heat.count }}条消息</div>
+        </div>
+      </div>
+
+      <!-- 话唠榜 -->
+      <h3>话唠榜</h3>
+      <div class="participants-container">
+        <div
+          class="participant-item"
+          v-for="(participant, index) in reportData.sections.analytics
+            .chattyRanking"
+          :key="'participant-' + index"
+        >
+          <div class="participant-rank">{{ participant.rank }}</div>
+          <div class="participant-info">
+            <div class="participant-name">{{ participant.name }}</div>
+            <div class="participant-count">发言数：{{ participant.count }}</div>
+            <div class="participant-characteristics">
+              <span
+                class="characteristic"
+                v-for="(char, cIndex) in participant.characteristics"
+                :key="'char-' + cIndex"
+                >{{ char }}</span
+              >
+            </div>
+            <div class="participant-words">
+              <span
+                class="word"
+                v-for="(word, wIndex) in participant.commonWords"
+                :key="'word-' + wIndex"
+                >{{ word }}</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 熬夜冠军 -->
+      <h3>熬夜冠军</h3>
+      <div class="night-owls-container">
+        <div class="night-owl-item">
+          <div class="owl-crown" title="熬夜冠军">👑</div>
+          <div class="owl-info">
+            <div class="owl-name">
+              {{ reportData.sections.analytics.nightOwl.name }}
+            </div>
+            <div class="owl-title">
+              {{ reportData.sections.analytics.nightOwl.title }}
+            </div>
+            <div class="owl-time">
+              最晚活跃时间：{{
+                reportData.sections.analytics.nightOwl.latestTime
+              }}
+            </div>
+            <div class="owl-messages">
+              深夜消息数：{{
+                reportData.sections.analytics.nightOwl.messageCount
+              }}
+            </div>
+            <div class="owl-last-message">
+              {{ reportData.sections.analytics.nightOwl.lastMessage }}
+            </div>
+            <div class="owl-note">
+              注：熬夜时段定义为23:00-06:00，已考虑不同时区
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 7. 词云 -->
+    <section class="word-cloud">
+      <h2>热门词云</h2>
+      <div class="cloud-container">
+        <div class="cloud-wordcloud" id="word-cloud">
+          <span
+            class="cloud-word"
+            v-for="(word, index) in reportData.sections.wordCloud.words"
+            :key="'word-' + index"
+            :style="{
+              left: getRandomPosition(600, word.text.length * 10) + 'px',
+              top: getRandomPosition(400, 20) + 'px',
+              fontSize: word.size + 'px',
+              color: word.color,
+              transform: `rotate(${word.rotation}deg)`,
+            }"
+            @mouseover="hoverWord(index)"
+            @mouseout="unhoverWord(index)"
+          >
+            {{ word.text }}
+          </span>
+        </div>
+
+        <div class="cloud-legend">
+          <div
+            class="legend-item"
+            v-for="(item, index) in reportData.sections.wordCloud.legend"
+            :key="'legend-' + index"
+          >
+            <span
+              class="legend-color"
+              :style="{ backgroundColor: item.color }"
+            ></span>
+            <span class="legend-label">{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 8. 页面底部 -->
+    <footer>
+      <p>数据来源：{{ reportData.footer.dataSource }}</p>
+      <p>
+        生成时间：<span class="generation-time">{{
+          reportData.footer.generationTime
+        }}</span>
+      </p>
+      <p>统计周期：{{ reportData.footer.statisticalPeriod }}</p>
+      <p class="disclaimer">{{ reportData.footer.disclaimer }}</p>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { apiAiUiJson, type AiUiJson } from "@/api/chat";
+import { useRoute, useRouter } from "vue-router";
+const route = useRoute();
+const router = useRouter();
+
+const reportData = ref({
+  header: {
+    title: "群聊报告报告",
+    date: "2025-04-29",
+    metaInfo: {
+      totalMessages: "35",
+      activeUsers: "12",
+      timeRange: "07:03:10 - 15:36:25",
     },
-    methods: {
-      getRandomPosition(max, offset) {
-        return Math.random() * (max - offset);
-      },
-      hoverWord(index) {
-        const word = document.querySelectorAll('.cloud-word')[index];
-        word.style.transform = `scale(1.1) rotate(${this.reportData.sections.wordCloud.words[index].rotation}deg)`;
-        word.style.zIndex = '10';
-      },
-      unhoverWord(index) {
-        const word = document.querySelectorAll('.cloud-word')[index];
-        word.style.transform = `scale(1) rotate(${this.reportData.sections.wordCloud.words[index].rotation}deg)`;
-        word.style.zIndex = '1';
-      }
+  },
+  sections: {
+    hotTopics: {
+      items: [
+        {
+          name: "AI技术讨论",
+          category: "科技",
+          summary:
+            "群内围绕Qwen3开源、Vidu Q1体验、夸克AI相机等AI技术展开热烈讨论，涉及模型性能、应用场景和开发者体验。多位成员分享了相关技术文章和体验报告。",
+          keywords: ["Qwen3", "Vidu", "AI相机"],
+          mentions: "15",
+        },
+        {
+          name: "熬夜与工作压力",
+          category: "生活",
+          summary:
+            "成员们讨论熬夜工作现象，分享各自熬夜经历，对比互联网大厂与普通开发者的工作强度差异，引发关于工作生活平衡的思考。",
+          keywords: ["熬夜", "加班", "工作强度"],
+          mentions: "8",
+        },
+      ],
     },
-    mounted() {
-      // 初始化词云位置
-      const words = document.querySelectorAll('.cloud-word');
-      words.forEach((word, index) => {
-        const wordData = this.reportData.sections.wordCloud.words[index];
-        const left = this.getRandomPosition(600, word.textContent.length * 10);
-        const top = this.getRandomPosition(400, 20);
-        word.style.left = `${left}px`;
-        word.style.top = `${top}px`;
-      });
-    }
-  }
-  </script>
-  
-  <style scoped>
-  /* 严格定义的CSS样式，确保风格一致性 */
+    tutorials: {
+      items: [
+        {
+          type: "TUTORIAL",
+          title: "体验完刚上线的Vidu Q1，后劲有点大（附AI视频创作教程）",
+          sharedBy: "苍何",
+          time: "2025-04-29 09:39:42",
+          summary:
+            "分享Vidu Q1 AI视频创作工具的体验和教程，介绍其清晰度和一致性的提升。",
+          keyPoints: ["AI视频清晰度提升", "一致性改进"],
+          url: "http://mp.weixin.qq.com/s?__biz=MzU4NTE1Mjg4MA==&mid=2247493267&idx=1&sn=0189fb501578ce8e27142fbe2f590d03&chksm=fc9a946728c367005c19cb5a335300d05d51a441f9f20424a0a72c904a47bdf003252576318a&mpshare=1&scene=1&srcid=04297l70B2zsuypDfjUh0rh5&sharer_shareinfo=181efb947f938ab90786c776bf7bbda7&sharer_shareinfo_first=181efb947f938ab90786c776bf7bbda7#rd",
+          domain: "mp.weixin.qq.com",
+          category: "AI工具",
+        },
+        {
+          type: "TUTORIAL",
+          title: "阿里新出的夸克AI相机，强大到我有点陌生",
+          sharedBy: "苍何",
+          time: "2025-04-29 09:42:38",
+          summary:
+            "介绍夸克AI相机的新奇玩法和功能，展示其强大的AI图像处理能力。",
+          keyPoints: ["新奇玩法", "抽象功能"],
+          url: "http://mp.weixin.qq.com/s?__biz=MzU4NTE1Mjg4MA==&mid=2247493275&idx=1&sn=93556ddd1da7fb8733a23a7c4adbb76b&chksm=fc2a2d25774cce23c75acd8850b85c585c0bcf78d14b810e157efaec5106abf563cf58e26aef&mpshare=1&scene=1&srcid=0429vDf8NbEzNLBQQyFlABmU&sharer_shareinfo=28b94477ec8201b88aa30338e82e8999&sharer_shareinfo_first=28b94477ec8201b88aa30338e82e8999#rd",
+          domain: "mp.weixin.qq.com",
+          category: "AI应用",
+        },
+        {
+          type: "RESOURCE",
+          title: "仅2MB，Windows瞬间超级丝滑！",
+          sharedBy: "AHapi²⁰²⁵",
+          time: "2025-04-29 11:13:38",
+          summary:
+            "分享一款轻量级Windows优化工具，声称能显著提升系统运行速度。",
+          keyPoints: ["2MB大小", "系统优化"],
+          url: "https://mp.weixin.qq.com/s/es77Jc6Du03ppJD5XJeQUg",
+          domain: "mp.weixin.qq.com",
+          category: "系统工具",
+        },
+      ],
+    },
+    importantMessages: {
+      items: [
+        {
+          time: "2025-04-29 10:00:18",
+          sender: "苍何",
+          type: "NEWS",
+          priority: "高",
+          content:
+            "2025年04月29日 AI科技早报：阿里开源8款Qwen3模型，腾讯开源Kuikly跨端框架，OpenAI推出ChatGPT购物功能等11条重要新闻。",
+          fullContent:
+            "2025年04月29日 AI科技早报1、阿里开源8款Qwen3模型，集成MCP，性能超DeepSeek-R1、OpenAI o1。2、Qafind Labs发布ChatDLM扩散语言模型，推理速度高达2800 tokens/s。3、腾讯开源Kuikly跨端框架，基于Kotlin支持多平台开发，已应用于QQ。4、OpenAI 推出 ChatGPT 购物功能，用户可通过 ChatGPT 便捷购物。5、字节Seed团队提出PHD-Transformer，突破预训练长度扩展瓶颈。6、百度发布文心快码3.5版本与多模态AI智能体Zulu，助力工程师提效。7、Kimi与财新传媒合作，提供专业财经内容，推动AI+传统媒体融合。8、苹果加速「N50」智能眼镜项目，融合AI技术预计2027年亮相。9、研究显示OpenAI o3在病毒学领域超越94%人类专家，生物安全引关注。10、华为测试自研AI芯片Ascend 910D，旨在替代英伟达H100芯片。11、🔥【记得收藏】早报同步更新到开源 AI 知识库：https://u55dyuejxc.feishu.cn/wiki/FkmNwxYHDigJ3akIUGHc8MSTn4d",
+        },
+      ],
+    },
+    dialogues: {
+      items: [
+        {
+          type: "DIALOGUE",
+          messages: [
+            {
+              speaker: "好名字",
+              time: "2025-04-29 08:16:23",
+              content:
+                "这个我弄完，ai做的小程序有bug，流程走不通，还改不了[捂脸]",
+            },
+            {
+              speaker: "贾👦🏻",
+              time: "2025-04-29 08:54:33",
+              content: "可以微调 不过源码需要买的",
+            },
+            {
+              speaker: "好名字",
+              time: "2025-04-29 09:13:32",
+              content: "微调一次，然后再想调就需要开会员了",
+            },
+            {
+              speaker: "贾👦🏻",
+              time: "2025-04-29 09:14:09",
+              content: "需求变更一个字 就需要重新购买[破涕为笑]",
+            },
+          ],
+          highlight: "AI小程序开发中的商业化模式讨论",
+          relatedTopic: "AI开发工具",
+        },
+        {
+          type: "DIALOGUE",
+          messages: [
+            {
+              speaker: "苍何",
+              time: "2025-04-29 09:26:49",
+              content: "我熬不动",
+            },
+            {
+              speaker: "AHapi²⁰²⁵",
+              time: "2025-04-29 09:27:25",
+              content: "不要卷别人[旺柴]别人写了 就不卷他们了",
+            },
+            {
+              speaker: "苍何",
+              time: "2025-04-29 09:27:55",
+              content: "新闻得第一时间，做不到写了也没啥用",
+            },
+            {
+              speaker: "苍何",
+              time: "2025-04-29 09:28:03",
+              content: "还不如写些应用",
+            },
+            {
+              speaker: "大风（Wind）",
+              time: "2025-04-29 09:28:23",
+              content: "看看哪些是5-7点发推文的，基本都是卷王了",
+            },
+            {
+              speaker: "沉默王二",
+              time: "2025-04-29 09:28:44",
+              content: "身体能扛住确实离谱",
+            },
+            {
+              speaker: "苍何",
+              time: "2025-04-29 09:29:03",
+              content: "是啊，太肝了",
+            },
+          ],
+          highlight: "关于工作强度和熬夜文化的讨论",
+          relatedTopic: "工作生活平衡",
+        },
+      ],
+    },
+    qa: {
+      items: [
+        {
+          question: {
+            asker: "银色子弹-捷",
+            time: "2025-04-29 11:10:26",
+            content:
+              "问一下win11电脑，你长时间没清理，运行慢，一般用什么来清理电脑？ 不要360啊，那个太流氓了，想知道各位大佬有没有优秀的软件推荐一下",
+            tags: ["Windows优化", "系统清理"],
+          },
+          answers: [
+            {
+              responder: "昏沉沉的",
+              time: "2025-04-29 11:11:59",
+              content: "ccclean",
+              isAccepted: false,
+            },
+            {
+              responder: "🤑程序儒",
+              time: "2025-04-29 11:13:07",
+              content: "360极速版、Wise Care 365",
+              isAccepted: false,
+            },
+            {
+              responder: "AHapi²⁰²⁵",
+              time: "2025-04-29 11:13:38",
+              content: "仅2MB，Windows瞬间超级丝滑！这才是，真神器！",
+              isAccepted: true,
+            },
+          ],
+        },
+        {
+          question: {
+            asker: "ಠ_ಠ 闲鱼一条ಠ_ಠ",
+            time: "2025-04-29 11:37:49",
+            content: "请问哪位哥还有扣子的邀请码吗？",
+            tags: ["邀请码", "扣子空间"],
+          },
+          answers: [
+            {
+              responder: "贾👦🏻",
+              time: "2025-04-29 11:40:37",
+              content:
+                "RootUser_2105656329 邀请你体验扣子空间，快来和 Agent 一起开始你的工作吧！https://www.coze.cn/space-preview?invite_code=SCL7DAL0",
+              isAccepted: true,
+            },
+            {
+              responder: "9527",
+              time: "2025-04-29 11:47:43",
+              content:
+                "RootUser_2106519373 邀请你体验扣子空间，快来和 Agent 一起开始你的工作吧！https://www.coze.cn/space-preview?invite_code=A8IT4MUE",
+              isAccepted: false,
+            },
+          ],
+        },
+      ],
+    },
+    analytics: {
+      heatmap: [
+        {
+          topic: "AI技术",
+          percentage: "45",
+          color: "#3da9fc",
+          count: "16条消息",
+        },
+        {
+          topic: "工作讨论",
+          percentage: "25",
+          color: "#f25f4c",
+          count: "9条消息",
+        },
+        {
+          topic: "工具推荐",
+          percentage: "15",
+          color: "#7209b7",
+          count: "5条消息",
+        },
+        {
+          topic: "其他",
+          percentage: "15",
+          color: "#e53170",
+          count: "5条消息",
+        },
+      ],
+      chattyRanking: [
+        {
+          rank: 1,
+          name: "苍何",
+          count: "7",
+          characteristics: ["技术分享", "新闻发布"],
+          commonWords: ["AI", "开源", "熬夜"],
+        },
+        {
+          rank: 2,
+          name: "AHapi²⁰²⁵",
+          count: "6",
+          characteristics: ["幽默评论", "资源分享"],
+          commonWords: ["旺柴", "加班", "神器"],
+        },
+        {
+          rank: 3,
+          name: "贾👦🏻",
+          count: "3",
+          characteristics: ["问题解答", "邀请码分享"],
+          commonWords: ["源码", "购买", "邀请"],
+        },
+      ],
+      nightOwl: {
+        name: "苍何",
+        title: "熬夜冠军",
+        latestTime: "09:42:54",
+        messageCount: "7",
+        lastMessage: "我熬夜写了这一篇[旺柴]",
+      },
+    },
+    wordCloud: {
+      words: [
+        {
+          text: "AI",
+          size: 42,
+          color: "#00b4d8",
+          rotation: 0,
+        },
+        {
+          text: "熬夜",
+          size: 36,
+          color: "#4361ee",
+          rotation: -15,
+        },
+        {
+          text: "开源",
+          size: 32,
+          color: "#00b4d8",
+          rotation: 15,
+        },
+        {
+          text: "Qwen3",
+          size: 28,
+          color: "#3da9fc",
+          rotation: -10,
+        },
+        {
+          text: "Vidu",
+          size: 26,
+          color: "#3da9fc",
+          rotation: 10,
+        },
+        {
+          text: "清理",
+          size: 24,
+          color: "#7209b7",
+          rotation: -5,
+        },
+        {
+          text: "邀请码",
+          size: 22,
+          color: "#7209b7",
+          rotation: 5,
+        },
+      ],
+      legend: [
+        {
+          color: "#00b4d8",
+          label: "技术 相关词汇",
+        },
+        {
+          color: "#4361ee",
+          label: "生活 相关词汇",
+        },
+        {
+          color: "#7209b7",
+          label: "工具 相关词汇",
+        },
+      ],
+    },
+  },
+  footer: {
+    dataSource: "群聊聊天记录聊天记录",
+    generationTime: "2025-04-29 16:00:00",
+    statisticalPeriod: "2025-04-29 [时间范围]",
+    disclaimer:
+      "免责声明：本报告内容基于群聊公开讨论，如有不当内容或侵权问题请联系管理员处理。",
+  },
+});
+
+const param_wxid = route.query.wxid as string;
+const param_startTime = route.query.start_time as string;
+const param_endTime = route.query.end_time as string;
+
+const file_name = ref<AiUiJson>({
+  wxid: param_wxid,
+  start_time: param_startTime,
+  end_time: param_endTime,
+})
 
 
-  .chat-report {
-    font-family: 'SF Pro Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
-    background-color: var(--bg-ui-s-primary);
-    color: var(--text-ui-s-primary);
-    line-height: 1.6;
-    font-size: 16px;
-    width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  
-  header {
-    text-align: center;
-    padding: 30px 0;
-    background-color: var(--bg-ui-s-secondary);
-    margin-bottom: 30px;
-  }
-  
-  h1 {
-    font-size: 36px;
-    font-weight: 700;
-    color: var(--accent-ui-s-primary);
-    margin-bottom: 10px;
-  }
-  
-  .date {
-    font-size: 18px;
-    color: var(--text-ui-s-secondary);
-    margin-bottom: 20px;
-  }
-  
-  .meta-info {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-  }
-  
-  .meta-info span {
-    background-color: var(--bg-ui-s-tertiary);
-    padding: 5px 15px;
-    border-radius: 20px;
-    font-size: 14px;
-  }
-  
-  section {
-    background-color: var(--bg-ui-s-secondary);
-    margin-bottom: 30px;
-    padding: 25px;
-  }
-  
-  h2 {
-    font-size: 28px;
-    font-weight: 600;
-    color: var(--accent-ui-s-blue);
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 2px solid var(--accent-ui-s-blue);
-  }
-  
-  h3 {
-    font-size: 22px;
-    font-weight: 600;
-    color: var(--accent-ui-s-primary);
-    margin: 15px 0 10px 0;
-  }
-  
-  h4 {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--accent-ui-s-secondary);
-    margin: 12px 0 8px 0;
-  }
-  
-  p {
-    margin-bottom: 15px;
-  }
-  
-  ul, ol {
-    margin-left: 20px;
-    margin-bottom: 15px;
-  }
-  
-  li {
-    margin-bottom: 5px;
-  }
-  
-  a {
-    color: var(--accent-ui-s-blue);
-    text-decoration: none;
-  }
-  
-  a:hover {
-    text-decoration: underline;
-  }
-  
-  /* 卡片容器样式 */
-  .topics-container, .tutorials-container, .messages-container, 
-  .dialogues-container, .qa-container, .participants-container {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-  
-  /* 卡片样式 */
-  .topic-card, .tutorial-card, .message-card, 
-  .dialogue-card, .qa-card, .participant-item, .night-owl-item {
-    background-color: var(--bg-ui-s-tertiary);
-    padding: 20px;
-  }
-  
-  /* 话题卡片 */
-  .topic-category {
-    display: inline-block;
-    background-color: var(--accent-ui-s-blue);
-    color: var(--text-ui-s-primary);
-    padding: 3px 10px;
-    border-radius: 15px;
-    font-size: 14px;
-    margin-bottom: 10px;
-  }
-  
-  .topic-keywords {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 10px 0;
-  }
-  
-  .keyword {
-    background-color: rgba(61, 169, 252, 0.2);
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 14px;
-  }
-  
-  .topic-mentions {
-    color: var(--accent-ui-s-cyan);
-    font-weight: 600;
-  }
-  
-  /* 教程卡片 */
-  .tutorial-type {
-    display: inline-block;
-    background-color: var(--accent-ui-s-secondary);
-    color: var(--text-ui-s-primary);
-    padding: 3px 10px;
-    border-radius: 15px;
-    font-size: 14px;
-    margin-bottom: 10px;
-  }
-  
-  .tutorial-meta {
-    color: var(--text-ui-s-secondary);
-    margin-bottom: 10px;
-    font-size: 14px;
-  }
-  
-  .tutorial-category {
-    margin-top: 10px;
-    font-style: italic;
-    color: var(--text-ui-s-secondary);
-  }
-  
-  /* 消息卡片 */
-  .message-meta {
-    margin-bottom: 10px;
-  }
-  
-  .message-meta span {
-    margin-right: 15px;
-    font-size: 14px;
-  }
-  
-  .message-type {
-    background-color: var(--accent-ui-s-tertiary);
-    color: var(--text-ui-s-primary);
-    padding: 3px 10px;
-    border-radius: 15px;
-  }
-  
-  .priority {
-    padding: 3px 10px;
-    border-radius: 15px;
-  }
-  
-  .priority-high {
-    background-color: var(--accent-ui-s-secondary);
-  }
-  
-  .priority-medium {
-    background-color: var(--accent-ui-s-primary);
-  }
-  
-  .priority-low {
-    background-color: var(--accent-ui-s-blue);
-  }
-  
-  /* 对话卡片 */
-  .dialogue-type {
-    display: inline-block;
-    background-color: var(--accent-ui-s-purple);
-    color: var(--text-ui-s-primary);
-    padding: 3px 10px;
-    border-radius: 15px;
-    font-size: 14px;
-    margin-bottom: 10px;
-  }
-  
-  .dialogue-content {
-    background-color: rgba(255, 255, 255, 0.05);
-    padding: 15px;
-    margin-bottom: 15px;
-  }
-  
-  .dialogue-highlight {
-    font-style: italic;
-    color: var(--accent-ui-s-primary);
-    margin: 10px 0;
-    font-weight: 600;
-  }
-  
-  /* 问答卡片 */
-  .question {
-    margin-bottom: 15px;
-  }
-  
-  .question-meta, .answer-meta {
-    color: var(--text-ui-s-secondary);
-    margin-bottom: 5px;
-    font-size: 14px;
-  }
-  
-  .question-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 10px;
-  }
-  
-  .tag {
-    background-color: rgba(114, 9, 183, 0.2);
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 14px;
-  }
-  
-  .answer {
-    background-color: rgba(255, 255, 255, 0.05);
-    padding: 15px;
-    margin-top: 10px;
-  }
-  
-  .accepted-badge {
-    background-color: var(--accent-ui-s-primary);
-    color: var(--text-ui-s-primary);
-    padding: 3px 10px;
-    border-radius: 15px;
-    font-size: 14px;
-  }
-  
-  /* 热度图 */
-  .heatmap-container {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 15px;
-  }
-  
-  .heat-topic {
-    font-weight: 600;
-    margin-bottom: 5px;
-  }
-  
-  .heat-bar {
-    height: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    margin: 5px 0;
-    border-radius: 10px;
-    overflow: hidden;
-  }
-  
-  .heat-fill {
-    height: 100%;
-    border-radius: 10px;
-  }
-  
-  /* 话唠榜 */
-  .participant-rank {
-    font-size: 28px;
-    font-weight: 700;
-    color: var(--accent-ui-s-primary);
-    margin-right: 15px;
-    float: left;
-  }
-  
-  .participant-name {
-    font-weight: 600;
-    font-size: 18px;
-    margin-bottom: 5px;
-  }
-  
-  .participant-count {
-    color: var(--accent-ui-s-cyan);
-    margin-bottom: 10px;
-  }
-  
-  .participant-characteristics, .participant-words {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 10px;
-  }
-  
-  .characteristic {
-    background-color: rgba(242, 95, 76, 0.2);
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 14px;
-  }
-  
-  .word {
-    background-color: rgba(229, 49, 112, 0.2);
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 14px;
-  }
-  
-  /* 熬夜冠军 */
-  .night-owl-item {
-    background: linear-gradient(135deg, #0f0e17 0%, #192064 100%);
-    padding: 20px;
-    display: flex;
-    align-items: center;
-  }
-  
-  .owl-crown {
-    font-size: 40px;
-    margin-right: 20px;
-  }
-  
-  .owl-name {
-    font-weight: 600;
-    font-size: 18px;
-    margin-bottom: 5px;
-  }
-  
-  .owl-title {
-    color: var(--accent-ui-s-primary);
-    font-style: italic;
-    margin-bottom: 10px;
-  }
-  
-  .owl-time, .owl-messages {
-    color: var(--text-ui-s-secondary);
-    margin-bottom: 5px;
-  }
-  
-  .owl-note {
-    font-size: 14px;
-    color: var(--text-ui-s-secondary);
-    margin-top: 10px;
-    font-style: italic;
-  }
-  
-  /* 词云 - 云朵样式 */
-  .cloud-container {
-    position: relative;
-    margin: 0 auto;
-    padding: 20px 0;
-  }
-  
-  .cloud-wordcloud {
-    position: relative;
-    width: 600px;
-    height: 400px;
-    margin: 0 auto;
-    background-color: var(--bg-ui-s-tertiary);
-    border-radius: 50%;
-    box-shadow: 
-      40px 40px 0 -5px var(--bg-ui-s-tertiary),
-      80px 10px 0 -10px var(--bg-ui-s-tertiary),
-      110px 35px 0 -5px var(--bg-ui-s-tertiary),
-      -40px 50px 0 -8px var(--bg-ui-s-tertiary),
-      -70px 20px 0 -10px var(--bg-ui-s-tertiary);
-    overflow: visible;
-  }
-  
-  .cloud-word {
-    position: absolute;
-    transform-origin: center;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    transition: all 0.3s ease;
-  }
-  
-  .cloud-word:hover {
-    transform: scale(1.1);
-    z-index: 10;
-  }
-  
-  .cloud-legend {
-    margin-top: 60px;
-    display: flex;
-    justify-content: center;
-    gap: 30px;
-  }
-  
-  .legend-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  
-  .legend-color {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-  }
-  
-  /* 底部 */
-  footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 50px;
-    background-color: var(--bg-ui-s-secondary);
-    color: var(--text-ui-s-secondary);
-    font-size: 14px;
-  }
-  
-  footer p {
-    margin: 5px 0;
-  }
-  
-  .disclaimer {
-    margin-top: 15px;
-    font-style: italic;
-  }
-  
-  /* 新增头像相关样式 */
-  .user-avatar {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    object-fit: cover;
-    transition: transform 0.3s ease;
-    position: relative;
-    cursor: pointer;
-    border: 2px solid var(--accent-ui-s-primary);
-  }
-  
-  /* 头像悬停效果 */
-  .user-avatar:hover {
-    transform: scale(1.1) rotate(5deg);
-    z-index: 100;
-  }
-  
-  /* 头像tooltip */
-  .avatar-tooltip {
-    visibility: hidden;
-    background-color: var(--bg-ui-s-tertiary);
-    color: var(--text-ui-s-primary);
-    text-align: center;
-    padding: 5px 10px;
-    border-radius: 6px;
-    position: absolute;
-    z-index: 1000;
-    bottom: 125%;
-    left: 50%;
-    transform: translateX(-50%);
-    white-space: nowrap;
-    opacity: 0;
-    transition: opacity 0.3s;
-    font-size: 14px;
-    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
-  }
-  
-  .user-avatar:hover .avatar-tooltip {
-    visibility: visible;
-    opacity: 1;
-  }
-  
-  /* 热度用户专区 */
-  .hot-users {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-    gap: 20px;
-    margin-top: 20px;
-  }
-  
-  .hot-user-item {
-    position: relative;
-    text-align: center;
-  }
-  
-  /* 皇冠标识 */
-  .hot-crown {
-    position: absolute;
-    top: -10px;
-    right: -5px;
-    font-size: 24px;
-    color: #ffd700;
-    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
-  }
-  </style>
\ No newline at end of file
+
+const getData = async (file_name:AiUiJson) => {
+  try {
+    console.log(file_name);
+    const res = await apiAiUiJson(file_name);
+    console.log(res);
+    
+  }
+  catch (error) {
+    console.error("获取数据失败:", error);
+  }
+}
+
+const getRandomPosition = (max: number, offset: number) => {
+  return Math.random() * (max - offset);
+};
+
+const hoverWord = (index: string | number) => {
+  const words = document.querySelectorAll(".cloud-word");
+  if (words[index]) {
+    words[
+      index
+    ].style.transform = `scale(1.1) rotate(${reportData.value.sections.wordCloud.words[index].rotation}deg)`;
+    words[index].style.zIndex = "10";
+  }
+};
+
+const unhoverWord = (index) => {
+  const words = document.querySelectorAll(".cloud-word");
+  if (words[index]) {
+    words[
+      index
+    ].style.transform = `scale(1) rotate(${reportData.value.sections.wordCloud.words[index].rotation}deg)`;
+    words[index].style.zIndex = "1";
+  }
+};
+
+onMounted(async () => {
+  // 初始化词云位置
+  const words = document.querySelectorAll(".cloud-word");
+  words.forEach((word, index) => {
+    const wordData = reportData.value.sections.wordCloud.words[index];
+    const left = getRandomPosition(600, word.textContent.length * 10);
+    const top = getRandomPosition(400, 20);
+    word.style.left = `${left}px`;
+    word.style.top = `${top}px`;
+  });
+
+  await getData(file_name.value)
+});
+</script>
+
+<style scoped>
+/* 严格定义的CSS样式，确保风格一致性 */
+
+.chat-report {
+  font-family: "SF Pro Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+    "Open Sans", sans-serif;
+  background-color: var(--bg-ui-s-primary);
+  color: var(--text-ui-s-primary);
+  line-height: 1.6;
+  font-size: 16px;
+  width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  text-align: center;
+  padding: 30px 0;
+  background-color: var(--bg-ui-s-secondary);
+  margin-bottom: 30px;
+}
+
+h1 {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--accent-ui-s-primary);
+  margin-bottom: 10px;
+}
+
+.date {
+  font-size: 18px;
+  color: var(--text-ui-s-secondary);
+  margin-bottom: 20px;
+}
+
+.meta-info {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.meta-info span {
+  background-color: var(--bg-ui-s-tertiary);
+  padding: 5px 15px;
+  border-radius: 20px;
+  font-size: 14px;
+}
+
+section {
+  background-color: var(--bg-ui-s-secondary);
+  margin-bottom: 30px;
+  padding: 25px;
+}
+
+h2 {
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--accent-ui-s-blue);
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid var(--accent-ui-s-blue);
+}
+
+h3 {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--accent-ui-s-primary);
+  margin: 15px 0 10px 0;
+}
+
+h4 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--accent-ui-s-secondary);
+  margin: 12px 0 8px 0;
+}
+
+p {
+  margin-bottom: 15px;
+}
+
+ul,
+ol {
+  margin-left: 20px;
+  margin-bottom: 15px;
+}
+
+li {
+  margin-bottom: 5px;
+}
+
+a {
+  color: var(--accent-ui-s-blue);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* 卡片容器样式 */
+.topics-container,
+.tutorials-container,
+.messages-container,
+.dialogues-container,
+.qa-container,
+.participants-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+/* 卡片样式 */
+.topic-card,
+.tutorial-card,
+.message-card,
+.dialogue-card,
+.qa-card,
+.participant-item,
+.night-owl-item {
+  background-color: var(--bg-ui-s-tertiary);
+  padding: 20px;
+}
+
+/* 话题卡片 */
+.topic-category {
+  display: inline-block;
+  background-color: var(--accent-ui-s-blue);
+  color: var(--text-ui-s-primary);
+  padding: 3px 10px;
+  border-radius: 15px;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.topic-keywords {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 10px 0;
+}
+
+.keyword {
+  background-color: rgba(61, 169, 252, 0.2);
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 14px;
+}
+
+.topic-mentions {
+  color: var(--accent-ui-s-cyan);
+  font-weight: 600;
+}
+
+/* 教程卡片 */
+.tutorial-type {
+  display: inline-block;
+  background-color: var(--accent-ui-s-secondary);
+  color: var(--text-ui-s-primary);
+  padding: 3px 10px;
+  border-radius: 15px;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.tutorial-meta {
+  color: var(--text-ui-s-secondary);
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+.tutorial-category {
+  margin-top: 10px;
+  font-style: italic;
+  color: var(--text-ui-s-secondary);
+}
+
+/* 消息卡片 */
+.message-meta {
+  margin-bottom: 10px;
+}
+
+.message-meta span {
+  margin-right: 15px;
+  font-size: 14px;
+}
+
+.message-type {
+  background-color: var(--accent-ui-s-tertiary);
+  color: var(--text-ui-s-primary);
+  padding: 3px 10px;
+  border-radius: 15px;
+}
+
+.priority {
+  padding: 3px 10px;
+  border-radius: 15px;
+}
+
+.priority-high {
+  background-color: var(--accent-ui-s-secondary);
+}
+
+.priority-medium {
+  background-color: var(--accent-ui-s-primary);
+}
+
+.priority-low {
+  background-color: var(--accent-ui-s-blue);
+}
+
+/* 对话卡片 */
+.dialogue-type {
+  display: inline-block;
+  background-color: var(--accent-ui-s-purple);
+  color: var(--text-ui-s-primary);
+  padding: 3px 10px;
+  border-radius: 15px;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.dialogue-content {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.dialogue-highlight {
+  font-style: italic;
+  color: var(--accent-ui-s-primary);
+  margin: 10px 0;
+  font-weight: 600;
+}
+
+/* 问答卡片 */
+.question {
+  margin-bottom: 15px;
+}
+
+.question-meta,
+.answer-meta {
+  color: var(--text-ui-s-secondary);
+  margin-bottom: 5px;
+  font-size: 14px;
+}
+
+.question-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.tag {
+  background-color: rgba(114, 9, 183, 0.2);
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 14px;
+}
+
+.answer {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 15px;
+  margin-top: 10px;
+}
+
+.accepted-badge {
+  background-color: var(--accent-ui-s-primary);
+  color: var(--text-ui-s-primary);
+  padding: 3px 10px;
+  border-radius: 15px;
+  font-size: 14px;
+}
+
+/* 热度图 */
+.heatmap-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 15px;
+}
+
+.heat-topic {
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.heat-bar {
+  height: 20px;
+  background-color: rgba(255, 255, 255, 0.1);
+  margin: 5px 0;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.heat-fill {
+  height: 100%;
+  border-radius: 10px;
+}
+
+/* 话唠榜 */
+.participant-rank {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--accent-ui-s-primary);
+  margin-right: 15px;
+  float: left;
+}
+
+.participant-name {
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.participant-count {
+  color: var(--accent-ui-s-cyan);
+  margin-bottom: 10px;
+}
+
+.participant-characteristics,
+.participant-words {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.characteristic {
+  background-color: rgba(242, 95, 76, 0.2);
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 14px;
+}
+
+.word {
+  background-color: rgba(229, 49, 112, 0.2);
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 14px;
+}
+
+/* 熬夜冠军 */
+.night-owl-item {
+  background: linear-gradient(135deg, #0f0e17 0%, #192064 100%);
+  padding: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.owl-crown {
+  font-size: 40px;
+  margin-right: 20px;
+}
+
+.owl-name {
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.owl-title {
+  color: var(--accent-ui-s-primary);
+  font-style: italic;
+  margin-bottom: 10px;
+}
+
+.owl-time,
+.owl-messages {
+  color: var(--text-ui-s-secondary);
+  margin-bottom: 5px;
+}
+
+.owl-note {
+  font-size: 14px;
+  color: var(--text-ui-s-secondary);
+  margin-top: 10px;
+  font-style: italic;
+}
+
+/* 词云 - 云朵样式 */
+.cloud-container {
+  position: relative;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+
+.cloud-wordcloud {
+  position: relative;
+  width: 600px;
+  height: 400px;
+  margin: 0 auto;
+  background-color: var(--bg-ui-s-tertiary);
+  border-radius: 50%;
+  box-shadow: 40px 40px 0 -5px var(--bg-ui-s-tertiary),
+    80px 10px 0 -10px var(--bg-ui-s-tertiary),
+    110px 35px 0 -5px var(--bg-ui-s-tertiary),
+    -40px 50px 0 -8px var(--bg-ui-s-tertiary),
+    -70px 20px 0 -10px var(--bg-ui-s-tertiary);
+  overflow: visible;
+}
+
+.cloud-word {
+  position: absolute;
+  transform-origin: center;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+}
+
+.cloud-word:hover {
+  transform: scale(1.1);
+  z-index: 10;
+}
+
+.cloud-legend {
+  margin-top: 60px;
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
+/* 底部 */
+footer {
+  text-align: center;
+  padding: 20px 0;
+  margin-top: 50px;
+  background-color: var(--bg-ui-s-secondary);
+  color: var(--text-ui-s-secondary);
+  font-size: 14px;
+}
+
+footer p {
+  margin: 5px 0;
+}
+
+.disclaimer {
+  margin-top: 15px;
+  font-style: italic;
+}
+
+/* 新增头像相关样式 */
+.user-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+  position: relative;
+  cursor: pointer;
+  border: 2px solid var(--accent-ui-s-primary);
+}
+
+/* 头像悬停效果 */
+.user-avatar:hover {
+  transform: scale(1.1) rotate(5deg);
+  z-index: 100;
+}
+
+/* 头像tooltip */
+.avatar-tooltip {
+  visibility: hidden;
+  background-color: var(--bg-ui-s-tertiary);
+  color: var(--text-ui-s-primary);
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 1000;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 14px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+}
+
+.user-avatar:hover .avatar-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* 热度用户专区 */
+.hot-users {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.hot-user-item {
+  position: relative;
+  text-align: center;
+}
+
+/* 皇冠标识 */
+.hot-crown {
+  position: absolute;
+  top: -10px;
+  right: -5px;
+  font-size: 24px;
+  color: #ffd700;
+  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
+}
+</style>
diff --git a/pywxdump/ui/src/views/other/SettingView.vue b/pywxdump/ui/src/views/other/SettingView.vue
index 70f66e9..f7e7678 100644
--- a/pywxdump/ui/src/views/other/SettingView.vue
+++ b/pywxdump/ui/src/views/other/SettingView.vue
@@ -2,7 +2,7 @@
 import DbInitView from "@/views/DbInitView.vue";
 import {ref} from "vue";
 import DbInitComponent from "@/components/utils/DbInitComponent.vue";
-
+import deepseekSet from "@/components/utils/DeepSeekSet.vue";
 const setting_selected = ref("")
 
 const MeneSelect = (val: any) => {
@@ -34,14 +34,15 @@ const MeneSelect = (val: any) => {
             <el-menu-item index="db_init">
               <span>初始化设置</span>
             </el-menu-item>
-            <el-menu-item index="3">
-              <span></span>
+            <el-menu-item index="deepseek_set">
+              <span>DeepSeek设置</span>
             </el-menu-item>
           </el-menu>
         </el-aside>
 
         <el-main style="height: 100%;max-height: 100%;width: 100%;margin: 0;padding: 0;">
           <db-init-component v-if="setting_selected=='db_init'"></db-init-component>
+          <deepseek-set v-if="setting_selected=='deepseek_set'"></deepseek-set>
         </el-main>
       </el-container>
     </el-container>