feat(property-marketing): 优化空数据展示处理，调整图表组件和投资指南组件交互逻辑
This commit is contained in:
林志军
36
src/views/Agent/Chat/components/ChatBox.vue
Normal file
36
src/views/Agent/Chat/components/ChatBox.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<a-layout-content style="padding: 24px; background: #fff; min-height: 280px;">
|
||||||
|
<div style="text-align: center; margin-bottom: 20px">
|
||||||
|
<img src="@/assets/chatbot-icon.png" alt="Chatbot Icon" style="width: 60px" />
|
||||||
|
<h3>舆情脉络整理</h3>
|
||||||
|
</div>
|
||||||
|
<a-card :bordered="false">
|
||||||
|
<p>
|
||||||
|
您好，我是舆情脉络整理助手，可以帮您梳理事件发展脉络，提取核心观点，分析情绪倾向，快速生成舆情摘要与应对建议。
|
||||||
|
</p>
|
||||||
|
</a-card>
|
||||||
|
<div style="margin-top: 20px">
|
||||||
|
<a-input-search
|
||||||
|
v-model:value="message"
|
||||||
|
placeholder="发送消息..."
|
||||||
|
enter-button
|
||||||
|
@search="onSearch"
|
||||||
|
>
|
||||||
|
<template #enterButton>
|
||||||
|
<a-button type="primary">
|
||||||
|
<!-- <template #icon><SendOutlined /></template>-->
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</a-input-search>
|
||||||
|
</div>
|
||||||
|
<small style="display: block; text-align: center; margin-top: 10px">
|
||||||
|
内容由AI生成，无法确保真实准确，仅供参考。
|
||||||
|
</small>
|
||||||
|
</a-layout-content>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { defineComponent, ref } from 'vue';
|
||||||
|
// import { SendOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
</script>
|
||||||
40
src/views/Agent/Chat/components/HistoryChat.vue
Normal file
40
src/views/Agent/Chat/components/HistoryChat.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<a-layout-sider width="250" style="background: #fff">
|
||||||
|
<div class="logo" style="text-align: center; padding: 20px">
|
||||||
|
<img :src="props?.icon_url" alt="Logo" style="width: 100px" />
|
||||||
|
</div>
|
||||||
|
<a-menu mode="inline" theme="light">
|
||||||
|
<a-menu-item key="1">
|
||||||
|
<span>舆情脉络整理</span>
|
||||||
|
<span style="color: #8492ff; font-size: 12px">（对话式）</span>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item key="2">历史对话</a-menu-item>
|
||||||
|
<a-menu-item key="3">梳理这次舆情的时间线和关键节点</a-menu-item>
|
||||||
|
<a-menu-item key="4">提取事件发展的五阶段脉络</a-menu-item>
|
||||||
|
<a-menu-item key="5">提炼不同群体的主要观点和态度立场</a-menu-item>
|
||||||
|
<a-menu-item key="6">分类汇总正面、中立、负面声音要点</a-menu-item>
|
||||||
|
<a-menu-item key="7">分析文本中的情绪类型及占比</a-menu-item>
|
||||||
|
<a-menu-item key="8">识别负面情绪集中的评论内容</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-layout-sider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
|
const props = defineComponent({
|
||||||
|
props: {
|
||||||
|
info: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
console.log(props.info, 'props.info');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.logo {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,119 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- -->
|
<div>测试2</div>
|
||||||
<div>
|
|
||||||
<a-row class="grid-demo">
|
|
||||||
<a-col :span="24">
|
|
||||||
<div>24 - 100%</div>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<a-row class="grid-demo">
|
|
||||||
<a-col :span="4">
|
|
||||||
<a-space direction="vertical">
|
|
||||||
<a-space class="w-240px">1</a-space>
|
|
||||||
<a-space>2</a-space>
|
|
||||||
|
|
||||||
</a-space>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="20">
|
|
||||||
<div>
|
|
||||||
<div id="coze-chat-container"></div>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts"></script>
|
||||||
<script setup>
|
<style scoped lang="scss"></style>
|
||||||
import { ref, onMounted } from 'vue';
|
|
||||||
import { getChatAgent } from '@/api/all/agent';
|
|
||||||
|
|
||||||
// 存储认证令牌
|
|
||||||
const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
|
|
||||||
|
|
||||||
// 模拟从API获取token
|
|
||||||
const fetchToken = async () => {
|
|
||||||
// 实际开发中应替换为真实的 API 请求
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve('pat_' + Math.random().toString(36).substring(2, 15));
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 刷新token
|
|
||||||
const refreshToken = async () => {
|
|
||||||
authToken.value = await fetchToken();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 动态加载脚本函数
|
|
||||||
const loadScript = (src) =>
|
|
||||||
new Promise((resolve, reject) => {
|
|
||||||
const script = document.createElement('script');
|
|
||||||
script.src = src;
|
|
||||||
script.onload = resolve;
|
|
||||||
script.onerror = reject;
|
|
||||||
document.head.appendChild(script);
|
|
||||||
});
|
|
||||||
|
|
||||||
const query = reactive({
|
|
||||||
id: 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
let cozeWebSDKConfig = reactive({
|
|
||||||
config: {},
|
|
||||||
auth: {},
|
|
||||||
userInfo: {},
|
|
||||||
ui: {},
|
|
||||||
});
|
|
||||||
let cozeWebSDK = null;
|
|
||||||
const initChat = async () => {
|
|
||||||
const { code, data } = await getChatAgent(query.id);
|
|
||||||
if (code != 200) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
|
|
||||||
let config = data;
|
|
||||||
config.ui.chatBot.el = document.getElementById('coze-chat-container');
|
|
||||||
config.ui.width = '900px';
|
|
||||||
config.auth.onRefreshToken = function () {
|
|
||||||
return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
|
|
||||||
};
|
|
||||||
cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(config);
|
|
||||||
showChatPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
const showChatPage = () => {
|
|
||||||
// 显示聊天页面
|
|
||||||
console.log(cozeWebSDK, 'chatClient');
|
|
||||||
cozeWebSDK.showChatBot();
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initChat();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.app-container {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
background: #2ecc71;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:hover {
|
|
||||||
background: #27ae60;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user