视图路径修改
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="chat-interface">
|
||||
<!-- 消息列表 -->
|
||||
<div class="messages-container" ref="messagesContainer">
|
||||
<div
|
||||
class="message"
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
:class="message.role"
|
||||
>
|
||||
<div class="message-avatar">
|
||||
<img :src="getAvatar(message.role)" :alt="message.role" />
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-text" v-html="message.content"></div>
|
||||
<div class="message-time">{{ message.timestamp }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载中动画 -->
|
||||
<div class="message assistant" v-if="isLoading">
|
||||
<div class="message-avatar">
|
||||
<img src="@/assets/imgs/ai-avatar.svg" alt="AI" />
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="typing-indicator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入框 -->
|
||||
<div class="input-container">
|
||||
<el-input
|
||||
v-model="inputMessage"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="输入您的问题..."
|
||||
@keydown.enter.prevent="handleSend"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSend"
|
||||
:loading="isLoading"
|
||||
:disabled="!inputMessage.trim()"
|
||||
>
|
||||
发送
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, onMounted } from 'vue';
|
||||
import { ElInput, ElButton } from 'element-plus';
|
||||
|
||||
const messagesContainer = ref<HTMLElement | null>(null);
|
||||
const inputMessage = ref('');
|
||||
const isLoading = ref(false);
|
||||
|
||||
const messages = ref<any[]>([
|
||||
{
|
||||
id: 1,
|
||||
role: 'assistant',
|
||||
content: '您好！我是AI思政助手，请问有什么可以帮助您的吗？',
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
}
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载历史消息
|
||||
});
|
||||
|
||||
async function handleSend() {
|
||||
if (!inputMessage.value.trim() || isLoading.value) return;
|
||||
|
||||
const userMessage = {
|
||||
id: Date.now(),
|
||||
role: 'user',
|
||||
content: inputMessage.value,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
};
|
||||
|
||||
messages.value.push(userMessage);
|
||||
const question = inputMessage.value;
|
||||
inputMessage.value = '';
|
||||
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
|
||||
// 模拟AI回复
|
||||
isLoading.value = true;
|
||||
|
||||
// TODO: 调用AI API
|
||||
setTimeout(() => {
|
||||
const aiMessage = {
|
||||
id: Date.now(),
|
||||
role: 'assistant',
|
||||
content: `关于"${question}"，我来为您解答...`,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
};
|
||||
|
||||
messages.value.push(aiMessage);
|
||||
isLoading.value = false;
|
||||
|
||||
nextTick(() => {
|
||||
scrollToBottom();
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function getAvatar(role: string) {
|
||||
return role === 'user'
|
||||
? '@/assets/imgs/user-avatar.svg'
|
||||
: '@/assets/imgs/ai-avatar.svg';
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
if (messagesContainer.value) {
|
||||
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-interface {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
background: #C62828;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.assistant {
|
||||
.message-text {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
max-width: 80%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 12px 16px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12px;
|
||||
|
||||
span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #999;
|
||||
border-radius: 50%;
|
||||
animation: typing 1.4s infinite;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
:deep(.el-textarea) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="dialog-history">
|
||||
<div class="history-list">
|
||||
<div
|
||||
class="history-item"
|
||||
v-for="conversation in conversations"
|
||||
:key="conversation.id"
|
||||
@click="$emit('load-conversation', conversation)"
|
||||
>
|
||||
<div class="item-header">
|
||||
<h4>{{ conversation.title }}</h4>
|
||||
<span class="item-date">{{ conversation.date }}</span>
|
||||
</div>
|
||||
<p class="item-preview">{{ conversation.preview }}</p>
|
||||
<div class="item-footer">
|
||||
<span class="item-count">{{ conversation.messageCount }} 条消息</span>
|
||||
<el-button size="small" type="danger" @click.stop="deleteConversation(conversation)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElButton, ElMessage } from 'element-plus';
|
||||
|
||||
const conversations = ref<any[]>([]);
|
||||
|
||||
defineEmits(['load-conversation']);
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载历史对话列表
|
||||
});
|
||||
|
||||
function deleteConversation(conversation: any) {
|
||||
// TODO: 删除对话
|
||||
ElMessage.success('已删除对话');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-history {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #C62828;
|
||||
background: #fff5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
}
|
||||
}
|
||||
|
||||
.item-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-preview {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-count {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="file-interpretation">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="文件上传" name="upload">
|
||||
<div class="upload-section">
|
||||
<el-upload
|
||||
drag
|
||||
action="#"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
multiple
|
||||
>
|
||||
<div class="upload-icon">📁</div>
|
||||
<div class="upload-text">
|
||||
<p>点击或拖拽文件到此处上传</p>
|
||||
<p class="upload-hint">支持 PDF、Word、TXT 格式</p>
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<!-- 已上传文件列表 -->
|
||||
<div class="uploaded-files" v-if="uploadedFiles.length">
|
||||
<h4>已上传文件</h4>
|
||||
<div class="file-list">
|
||||
<div class="file-item" v-for="file in uploadedFiles" :key="file.id">
|
||||
<div class="file-icon">📄</div>
|
||||
<div class="file-info">
|
||||
<h5>{{ file.name }}</h5>
|
||||
<p>{{ file.size }} · {{ file.uploadDate }}</p>
|
||||
</div>
|
||||
<el-button size="small" @click="analyzeFile(file)">解读</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="历史文件" name="history">
|
||||
<div class="history-files">
|
||||
<div class="file-item" v-for="file in historyFiles" :key="file.id">
|
||||
<div class="file-icon">📄</div>
|
||||
<div class="file-info">
|
||||
<h5>{{ file.name }}</h5>
|
||||
<p>上传时间：{{ file.uploadDate }}</p>
|
||||
<p class="file-summary">{{ file.summary }}</p>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<el-button size="small" @click="viewAnalysis(file)">查看解读</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteFile(file)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElTabs, ElTabPane, ElUpload, ElButton, ElMessage } from 'element-plus';
|
||||
|
||||
const activeTab = ref('upload');
|
||||
const uploadedFiles = ref<any[]>([]);
|
||||
const historyFiles = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载历史文件
|
||||
});
|
||||
|
||||
function beforeUpload(file: File) {
|
||||
const allowedTypes = ['application/pdf', 'application/msword', 'text/plain',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
|
||||
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
ElMessage.error('只支持 PDF、Word、TXT 格式');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
ElMessage.error('文件大小不能超过 10MB');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function handleUploadSuccess(response: any, file: any) {
|
||||
uploadedFiles.value.push({
|
||||
id: Date.now(),
|
||||
name: file.name,
|
||||
size: formatFileSize(file.size),
|
||||
uploadDate: new Date().toLocaleString()
|
||||
});
|
||||
ElMessage.success('文件上传成功');
|
||||
}
|
||||
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
|
||||
}
|
||||
|
||||
function analyzeFile(file: any) {
|
||||
// TODO: 调用文件解读API
|
||||
ElMessage.info('正在解读文件...');
|
||||
}
|
||||
|
||||
function viewAnalysis(file: any) {
|
||||
// TODO: 查看文件解读结果
|
||||
}
|
||||
|
||||
function deleteFile(file: any) {
|
||||
// TODO: 删除文件
|
||||
ElMessage.success('文件已删除');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.file-interpretation {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.uploaded-files {
|
||||
margin-top: 32px;
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-list,
|
||||
.history-files {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
|
||||
h5 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.file-summary {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="knowledge-base">
|
||||
<div class="knowledge-header">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索知识库..."
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="knowledge-list">
|
||||
<div
|
||||
class="knowledge-item"
|
||||
v-for="item in filteredKnowledge"
|
||||
:key="item.id"
|
||||
@click="viewKnowledge(item)"
|
||||
>
|
||||
<div class="item-icon">{{ item.icon }}</div>
|
||||
<div class="item-info">
|
||||
<h4>{{ item.title }}</h4>
|
||||
<p>{{ item.description }}</p>
|
||||
<div class="item-meta">
|
||||
<span class="item-category">{{ item.category }}</span>
|
||||
<span class="item-date">{{ item.updateDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ElInput } from 'element-plus';
|
||||
|
||||
const searchKeyword = ref('');
|
||||
const knowledgeList = ref<any[]>([]);
|
||||
|
||||
const filteredKnowledge = computed(() => {
|
||||
if (!searchKeyword.value) return knowledgeList.value;
|
||||
return knowledgeList.value.filter(item =>
|
||||
item.title.includes(searchKeyword.value) ||
|
||||
item.description.includes(searchKeyword.value)
|
||||
);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载知识库数据
|
||||
knowledgeList.value = [
|
||||
{
|
||||
id: 1,
|
||||
icon: '📚',
|
||||
title: '党的二十大精神',
|
||||
description: '深入学习党的二十大精神要点',
|
||||
category: '党史学习',
|
||||
updateDate: '2024-01-15'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '🎯',
|
||||
title: '社会主义核心价值观',
|
||||
description: '践行社会主义核心价值观',
|
||||
category: '理论学习',
|
||||
updateDate: '2024-01-10'
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
function viewKnowledge(item: any) {
|
||||
// TODO: 查看知识详情
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.knowledge-base {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.knowledge-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.knowledge-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.knowledge-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #ffe6e6;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.item-category {
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
.item-date {
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user