cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可信代码库-AI大模型创建会话\会话列表\会话详情接口对接及前端功能开发

Browse Source
This commit is contained in:
付民康
2025-05-15 15:29:01 +08:00
parent 9af1bc8285
commit 9bebf2fdb8
7 changed files with 969 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
src/layouts/AILayout/ViewHistoryAside/ViewHistoryAside.vue
View File

@@ -14,9 +14,9 @@
</template>
<div>
<!-- 循环生成卡片列表 -->
<div v-if="cardList.length>0">
<div v-if="dhlsList.length>0">
<div
v-for="(item, index) in cardList"
v-for="(item, index) in dhlsList"
:key="index"
:class="['mb-3 jyh-collapse-card', { 'selected-card': selectedIndex === item.id }]"
@click="selectCard(item)"
@@ -25,7 +25,7 @@
>
<!-- 卡片标题 -->
<div class="card-header">
<h4>{{ item.title }}</h4>
<h4>{{ item.question }}</h4>
<!-- 悬停操作按钮 -->
<div class="card-actions" v-show="hoverIndex === index">
<d-tooltip content="编辑">
@@ -43,10 +43,10 @@
<div class="card-content">
<div class="content-left">
<img width="16" style="margin-right: 4px" src="@/assets/imgs/jyh/ai/aiLogo2.png" />
<span>{{ item.text }}</span>
<span>{{ item.text || '可信代码库AI' }}</span>
</div>
<div class="content-right">
<span class="time-text">{{ formatTime(item.time) }}</span>
<span class="time-text">时间：{{ formatTime(item.time||'') }}</span>
</div>
</div>
</div>
@@ -54,35 +54,35 @@
<NoData v-else :small="false"></NoData>
</div>
</d-collapse-item>
<d-collapse-item name="yestoday">
<template #title>
<div class="jyh-collapse-title">
<d-icon style="margin-right: 4px" name="icon-delay"></d-icon>昨天
</div>
</template>
<div>
<div
v-for="(item, index) in cardList"
:key="index"
class="mb-3 jyh-collapse-card"
>
<!-- 卡片标题 -->
<div class="card-header">
<h4>{{ item.title }}</h4>
</div>
<!-- 卡片内容 -->
<div class="card-content">
<div class="content-left">
<img width="16" style="margin-right: 4px" src="@/assets/imgs/jyh/ai/aiLogo2.png" />
<span>{{ item.text }}</span>
</div>
<div class="content-right">
<span class="time-text">{{ formatTime(item.time) }}</span>
</div>
</div>
</div>
</div>
</d-collapse-item>
<!-- <d-collapse-item name="yestoday">-->
<!-- <template #title>-->
<!-- <div class="jyh-collapse-title">-->
<!-- <d-icon style="margin-right: 4px" name="icon-delay"></d-icon>昨天-->
<!-- </div>-->
<!-- </template>-->
<!-- <div>-->
<!-- <div-->
<!-- v-for="(item, index) in cardList"-->
<!-- :key="index"-->
<!-- class="mb-3 jyh-collapse-card"-->
<!-- >-->
<!-- &lt;!&ndash; 卡片标题 &ndash;&gt;-->
<!-- <div class="card-header">-->
<!-- <h4>{{ item.title }}</h4>-->
<!-- </div>-->
<!-- &lt;!&ndash; 卡片内容 &ndash;&gt;-->
<!-- <div class="card-content">-->
<!-- <div class="content-left">-->
<!-- <img width="16" style="margin-right: 4px" src="@/assets/imgs/jyh/ai/aiLogo2.png" />-->
<!-- <span>{{ item.text }}</span>-->
<!-- </div>-->
<!-- <div class="content-right">-->
<!-- <span class="time-text">{{ formatTime(item.time) }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </d-collapse-item>-->
</d-collapse>
</div>
<!-- 固定在底部的控制栏 -->
@@ -116,85 +116,85 @@
<d-search icon-position="left" style="width: 100%" placeholder="请输入搜索软件名称" v-model="searchText" @change="handleSearch"></d-search>
<!-- 可滚动内容区域 -->
<div class="scrollable-content">
<d-collapse class="jyh-collapse" v-model="collapseValue">
<d-collapse-item name="today">
<template #title>
<div class="jyh-collapse-title">
<d-icon style="margin-right: 4px" name="icon-delay"></d-icon>今天
</div>
</template>
<div>
<!-- 循环生成卡片列表 -->
<div v-if="cardList.length>0">
<div
v-for="(item, index) in cardList"
:key="index"
:class="['mb-3 jyh-collapse-card', { 'selected-card': selectedIndex === item.id }]"
@click="selectCard(item)"
@mouseenter="hoverIndex = index"
@mouseleave="hoverIndex = null"
>
<!-- 卡片标题 -->
<div class="card-header">
<h4>{{ item.title }}</h4>
<!-- 悬停操作按钮 -->
<div class="card-actions" v-show="hoverIndex === index">
<d-tooltip content="编辑">
<d-icon style="font-size: 14px;margin-right: 2px" @click.stop="handleEdit(item)" name="icon-edit-3"></d-icon>
</d-tooltip>
<d-tooltip content="分享">
<d-icon style="font-size: 14px;margin-right: 2px" @click.stop="handleShare(item)" name="icon-redo-new"></d-icon>
</d-tooltip>
<d-tooltip content="更多">
<d-icon style="font-size: 14px;" @click.stop="handleMore(item)" name="icon-more-operate"></d-icon>
</d-tooltip>
</div>
</div>
<!-- 卡片内容 -->
<div class="card-content">
<div class="content-left">
<img width="16" style="margin-right: 4px" src="@/assets/imgs/jyh/ai/aiLogo2.png" />
<span>{{ item.text }}</span>
</div>
<div class="content-right">
<span class="time-text">{{ formatTime(item.time) }}</span>
</div>
</div>
</div>
</div>
<NoData v-else :small="false"></NoData>
</div>
</d-collapse-item>
<d-collapse-item name="yestoday">
<template #title>
<div class="jyh-collapse-title">
<d-icon style="margin-right: 4px" name="icon-delay"></d-icon>昨天
</div>
</template>
<div>
<div
v-for="(item, index) in cardList"
:key="index"
class="mb-3 jyh-collapse-card"
>
<!-- 卡片标题 -->
<div class="card-header">
<h4>{{ item.title }}</h4>
</div>
<!-- 卡片内容 -->
<div class="card-content">
<div class="content-left">
<img width="16" style="margin-right: 4px" src="@/assets/imgs/jyh/ai/aiLogo2.png" />
<span>{{ item.text }}</span>
</div>
<div class="content-right">
<span class="time-text">{{ formatTime(item.time) }}</span>
</div>
</div>
</div>
</div>
</d-collapse-item>
</d-collapse>
<!-- <d-collapse class="jyh-collapse" v-model="collapseValue">-->
<!-- <d-collapse-item name="today">-->
<!-- <template #title>-->
<!-- <div class="jyh-collapse-title">-->
<!-- <d-icon style="margin-right: 4px" name="icon-delay"></d-icon>今天-->
<!-- </div>-->
<!-- </template>-->
<!-- <div>-->
<!-- &lt;!&ndash; 循环生成卡片列表 &ndash;&gt;-->
<!-- <div v-if="cardList.length>0">-->
<!-- <div-->
<!-- v-for="(item, index) in cardList"-->
<!-- :key="index"-->
<!-- :class="['mb-3 jyh-collapse-card', { 'selected-card': selectedIndex === item.id }]"-->
<!-- @click="selectCard(item)"-->
<!-- @mouseenter="hoverIndex = index"-->
<!-- @mouseleave="hoverIndex = null"-->
<!-- >-->
<!-- &lt;!&ndash; 卡片标题 &ndash;&gt;-->
<!-- <div class="card-header">-->
<!-- <h4>{{ item.title }}</h4>-->
<!-- &lt;!&ndash; 悬停操作按钮 &ndash;&gt;-->
<!-- <div class="card-actions" v-show="hoverIndex === index">-->
<!-- <d-tooltip content="编辑">-->
<!-- <d-icon style="font-size: 14px;margin-right: 2px" @click.stop="handleEdit(item)" name="icon-edit-3"></d-icon>-->
<!-- </d-tooltip>-->
<!-- <d-tooltip content="分享">-->
<!-- <d-icon style="font-size: 14px;margin-right: 2px" @click.stop="handleShare(item)" name="icon-redo-new"></d-icon>-->
<!-- </d-tooltip>-->
<!-- <d-tooltip content="更多">-->
<!-- <d-icon style="font-size: 14px;" @click.stop="handleMore(item)" name="icon-more-operate"></d-icon>-->
<!-- </d-tooltip>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; 卡片内容 &ndash;&gt;-->
<!-- <div class="card-content">-->
<!-- <div class="content-left">-->
<!-- <img width="16" style="margin-right: 4px" src="@/assets/imgs/jyh/ai/aiLogo2.png" />-->
<!-- <span>{{ item.text }}</span>-->
<!-- </div>-->
<!-- <div class="content-right">-->
<!-- <span class="time-text">{{ formatTime(item.time) }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <NoData v-else :small="false"></NoData>-->
<!-- </div>-->
<!-- </d-collapse-item>-->
<!-- <d-collapse-item name="yestoday">-->
<!-- <template #title>-->
<!-- <div class="jyh-collapse-title">-->
<!-- <d-icon style="margin-right: 4px" name="icon-delay"></d-icon>昨天-->
<!-- </div>-->
<!-- </template>-->
<!-- <div>-->
<!-- <div-->
<!-- v-for="(item, index) in cardList"-->
<!-- :key="index"-->
<!-- class="mb-3 jyh-collapse-card"-->
<!-- >-->
<!-- &lt;!&ndash; 卡片标题 &ndash;&gt;-->
<!-- <div class="card-header">-->
<!-- <h4>{{ item.title }}</h4>-->
<!-- </div>-->
<!-- &lt;!&ndash; 卡片内容 &ndash;&gt;-->
<!-- <div class="card-content">-->
<!-- <div class="content-left">-->
<!-- <img width="16" style="margin-right: 4px" src="@/assets/imgs/jyh/ai/aiLogo2.png" />-->
<!-- <span>{{ item.text }}</span>-->
<!-- </div>-->
<!-- <div class="content-right">-->
<!-- <span class="time-text">{{ formatTime(item.time) }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </d-collapse-item>-->
<!-- </d-collapse>-->
</div>
<!-- 固定在底部的控制栏 -->
<div class="bottom-control-bar">
@@ -228,19 +228,24 @@
</template>
<script setup>
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import BatchManageModal from './BatchManageModal.vue'
import axios from 'axios';
import { Message } from 'vue-devui/message';
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
// 定义每个卡片的展开状态
const selectTab = ref('dhls');
const searchText = ref(''); // 搜索关键词
const collapseValue = ref([]);
const collapseValue = ref(['today']);
const historyLimit = ref('30');
// 当前选中的卡片索引
const selectedIndex = ref(null);
const hoverIndex = ref(null);
const BatchManageModalRef = ref(null);
const { formatTime } = useTimeFormat();
// 打开弹框的方法
const openBatchManageModal = () => {
if (BatchManageModalRef.value) {
@@ -286,6 +291,7 @@ const cardList = ref([
id: 3,
}
]);
const dhlsList = ref([]);
// 选择卡片
const selectCard = (item) => {
@@ -295,11 +301,22 @@ const selectCard = (item) => {
// console.log('选中卡片:', cardList.value[index]);
};
// 格式化时间
const formatTime = (date) => {
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const VITE_AI_API_HOST = import.meta.env.VITE_AI_API_HOST;
const getQuestionHistory = async (content) => {
/*TODO:缺少用户名入参*/
const {data} = await axios.get(VITE_AI_API_HOST + '/api/conversationList?userId=?');
if(data.questions) {
debugger
dhlsList.value = data.questions
} else {
Message.warning('接口异常！')
}
};
onMounted(() => {
getQuestionHistory()
});
</script>
<style lang="scss" scoped>

68
src/layouts/AILayout/index.vue
View File

@@ -61,18 +61,7 @@
</d-layout>
<!-- 浮动工具栏（移动端不显示） -->
<!-- <ToolsFloat v-if="showToolsFloat" />-->
<!-- 在 d-layout 结束前添加返回按钮 -->
<div class="back-in-btn">
<div class="back-in-time-btn" @click="toggleHistory" :class="{ 'active': isHistoryVisible }">
<i class="icon icon-history" title="查看历史"></i>
</div>
<div class="back-in-time-btn" @click="handleBackInTime">
<i class="icon icon-operation-log" title="查看文档"></i>
</div>
</div>
<ViewHistoryAside v-show="isHistoryVisible"/>
<!--<ToolsFloat v-if="showToolsFloat" />-->
</d-layout>
</template>
@@ -82,7 +71,6 @@ import { computed, ref, watch, watchEffect, onMounted, onUnmounted } from 'vue';
import AIHeader from '@/components/Header/AIHeader.vue';
import Footer from '@/components/Footer/index.vue';
import Aside from './aside.vue';
import ViewHistoryAside from './ViewHistoryAside/ViewHistoryAside.vue';
import { useGlobalInfoStore } from '@/stores/Global';
import ToolsFloat from '@/components/ToolsFloat/index.vue';
@@ -90,7 +78,6 @@ import { useStorage, useElementSize } from '@vueuse/core';
import { usePageResize } from '@/utils/hooks/usePageResize';
import microApp from '@micro-zoe/micro-app';
defineOptions({ name: 'AILayout' });
defineProps<{ customAside?: boolean; }>();
const router = useRouter();
@@ -104,9 +91,6 @@ const refHeader: any = ref(null);
const footerSize = useElementSize(refFooter);
const isHome = computed(() => route.name === 'home');
// 控制 ViewHistoryAside 组件的显示状态
const isHistoryVisible = ref(false);
// aside 设置可见性 header有两层，有顶栏信息,两层sidebar 都不可见
const asideSetShow = computed(() => {
if (route.meta.asideMenu === 'drawer') return false;
@@ -162,11 +146,6 @@ const handleClickMenu = () => {
asideDefaultWidth.value = asideDefaultWidth.value >= 240 ? 0 : 240;
}
};
// 切换 ViewHistoryAside 组件的显示与隐藏
const toggleHistory = () => {
isHistoryVisible.value =!isHistoryVisible.value;
};
</script>
<style lang="scss" scoped>
@@ -210,49 +189,4 @@ const toggleHistory = () => {
}
.back-in-btn {
position: fixed;
left: 20px;
bottom: 20px;
display: flex;
gap: 12px;
.active {
background-color: #f0f0f0; /* 灰色背景 */
}
.active .icon {
transform: translateY(-4px); /* 图标上移4px */
}
.back-in-time-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background-color: var(--el-color-primary);
//color: white;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
transition: all 0.3s;
font-size: 18px;
}
.back-in-time-btn:hover {
background-color: var(--el-color-primary-light-3);
transform: translateY(-2px);
}
/* 响应式调整 - 移动端隐藏或调整位置 */
@media (max-width: 768px) {
.back-in-time-btn {
left: 10px;
bottom: 10px;
padding: 6px 12px;
font-size: 14px;
}
}
}
</style>