删除无用代码
This commit is contained in:
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<AdminLayout title="智能体管理" subtitle="智能体管理">
|
||||
<div class="ai-management">
|
||||
<h1 class="page-title">智能体管理</h1>
|
||||
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="基础配置" name="config">
|
||||
<AIConfig />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="知识库管理" name="knowledge">
|
||||
<KnowledgeManagement />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElTabs, ElTabPane } from 'element-plus';
|
||||
import AIConfig from './components/AIConfig.vue';
|
||||
import KnowledgeManagement from './components/KnowledgeManagement.vue';
|
||||
import { AdminLayout } from '@/views/admin';
|
||||
defineOptions({
|
||||
name: 'AIManagementView'
|
||||
});
|
||||
const activeTab = ref('config');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,202 +0,0 @@
|
||||
<template>
|
||||
<div class="ai-assistant-page">
|
||||
<!-- 悬浮球入口（可以通过props控制显示/隐藏） -->
|
||||
<div class="floating-button" @click="togglePanel" v-if="!isPanelVisible">
|
||||
<img src="@/assets/imgs/ai-icon.svg" alt="AI助手" />
|
||||
</div>
|
||||
|
||||
<!-- AI助手面板 -->
|
||||
<transition name="slide">
|
||||
<div class="assistant-panel" v-if="isPanelVisible">
|
||||
<div class="panel-header">
|
||||
<h2>AI思政助手</h2>
|
||||
<div class="header-actions">
|
||||
<el-button size="small" @click="handleFileUpload">📎 上传文件</el-button>
|
||||
<el-button size="small" @click="showHistory">📜 历史记录</el-button>
|
||||
<el-button size="small" @click="togglePanel">✕</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-tabs">
|
||||
<div
|
||||
class="panel-tab"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<component :is="currentComponent" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- 历史对话记录弹窗 -->
|
||||
<el-dialog v-model="historyVisible" title="历史对话记录" width="600px">
|
||||
<DialogHistory @load-conversation="loadConversation" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 文件解读与记录弹窗 -->
|
||||
<el-dialog v-model="fileDialogVisible" title="文件解读与记录" width="800px">
|
||||
<FileInterpretation />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { ElButton, ElDialog } from 'element-plus';
|
||||
import ChatInterface from './components/ChatInterface.vue';
|
||||
import KnowledgeBase from './components/KnowledgeBase.vue';
|
||||
import DialogHistory from './components/DialogHistory.vue';
|
||||
import FileInterpretation from './components/FileInterpretation.vue';
|
||||
|
||||
const isPanelVisible = ref(false);
|
||||
const activeTab = ref('chat');
|
||||
const historyVisible = ref(false);
|
||||
const fileDialogVisible = ref(false);
|
||||
|
||||
const tabs = [
|
||||
{ key: 'chat', label: '对话' },
|
||||
{ key: 'knowledge', label: '知识库' }
|
||||
];
|
||||
|
||||
const componentMap: Record<string, any> = {
|
||||
'chat': ChatInterface,
|
||||
'knowledge': KnowledgeBase
|
||||
};
|
||||
|
||||
const currentComponent = computed(() => componentMap[activeTab.value]);
|
||||
|
||||
function togglePanel() {
|
||||
isPanelVisible.value = !isPanelVisible.value;
|
||||
}
|
||||
|
||||
function showHistory() {
|
||||
historyVisible.value = true;
|
||||
}
|
||||
|
||||
function handleFileUpload() {
|
||||
fileDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function loadConversation(conversation: any) {
|
||||
// TODO: 加载历史对话
|
||||
historyVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-assistant-page {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.floating-button {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #C62828, #E53935);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(198, 40, 40, 0.4);
|
||||
transition: all 0.3s;
|
||||
z-index: 1000;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(198, 40, 40, 0.5);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.assistant-panel {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 450px;
|
||||
height: 650px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #C62828, #E53935);
|
||||
color: white;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.panel-tabs {
|
||||
display: flex;
|
||||
background: #f5f5f5;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.panel-tab {
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #C62828;
|
||||
font-weight: 600;
|
||||
background: white;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-enter-from,
|
||||
.slide-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,250 +0,0 @@
|
||||
<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>
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
<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>
|
||||
|
||||
@@ -1,205 +0,0 @@
|
||||
<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>
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
<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