1252 lines
33 KiB
Vue
1252 lines
33 KiB
Vue
<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)"
|
||
>
|
||
{{ 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",
|
||
},
|
||
},
|
||
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:
|
||
"免责声明：本报告内容基于群聊公开讨论，如有不当内容或侵权问题请联系管理员处理。",
|
||
},
|
||
});
|
||
|
||
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,
|
||
})
|
||
|
||
|
||
|
||
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>
|