Tcode平台改造升级-AI助手菜单显示功能修改
This commit is contained in:
fmk1023
324
src/layouts/AILayout/ViewHistoryAside/ViewHistoryAsideNew.vue
Normal file
324
src/layouts/AILayout/ViewHistoryAside/ViewHistoryAsideNew.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<Card class="ViewHistoryAside">
|
||||
<!-- 1. 新对话按钮 -->
|
||||
<div class="new-conv-wrap">
|
||||
<d-button
|
||||
variant="solid"
|
||||
class="new-conv-btn"
|
||||
@click="handleNewConversation"
|
||||
>
|
||||
<template #icon>
|
||||
<d-icon name="icon-plus" />
|
||||
</template>
|
||||
新对话
|
||||
<span class="shortcut">Ctrl+N</span>
|
||||
</d-button>
|
||||
</div>
|
||||
|
||||
<!-- 2. 功能入口区域 -->
|
||||
<div class="function-list">
|
||||
<div class="function-item" @click="handleFunction('write')">
|
||||
<d-icon name="icon-pencil" />
|
||||
<span>帮我写</span>
|
||||
</div>
|
||||
<div class="function-item" @click="handleFunction('create')">
|
||||
<d-icon name="icon-magic" />
|
||||
<span>AI 创作</span>
|
||||
</div>
|
||||
<div class="function-item" @click="handleFunction('app')">
|
||||
<d-icon name="icon-app" />
|
||||
<span>应用生成</span>
|
||||
</div>
|
||||
<div class="function-item" @click="handleFunction('cloud')">
|
||||
<d-icon name="icon-cloud" />
|
||||
<span>云盘</span>
|
||||
</div>
|
||||
<div class="function-item more-item" @click="toggleMoreFunc">
|
||||
<span>更多</span>
|
||||
<d-icon name="icon-arrow-right" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 历史对话标题 -->
|
||||
<div class="history-title">历史对话</div>
|
||||
|
||||
<!-- 4. 历史对话列表 -->
|
||||
<div class="history-conv-list">
|
||||
<!-- 列表项（循环渲染） -->
|
||||
<div
|
||||
v-if="dhlsList.length>0"
|
||||
v-for="(item, index) in dhlsList"
|
||||
:key="item.id"
|
||||
class="conv-item"
|
||||
@click="selectConversation(item)"
|
||||
@mouseenter="hoverIndex = index"
|
||||
@mouseleave="hoverIndex = null"
|
||||
>
|
||||
<!-- 对话标题 + 星标（收藏标识） -->
|
||||
<div class="conv-title">
|
||||
<span>{{ item.question }}</span>
|
||||
<d-icon
|
||||
v-if="item.isStarred"
|
||||
name="icon-star"
|
||||
class="star-icon"
|
||||
@click.stop="toggleStar(item)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 未读小红点 -->
|
||||
<d-badge
|
||||
v-if="item.unreadCount > 0"
|
||||
:content="item.unreadCount"
|
||||
class="unread-badge"
|
||||
/>
|
||||
<!-- 更多操作按钮（hover显示） -->
|
||||
<d-icon
|
||||
v-show="hoverIndex === index"
|
||||
name="icon-more-operate"
|
||||
class="more-icon"
|
||||
@click.stop="handleMore(item)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 无数据占位 -->
|
||||
<NoData v-else :small="false"></NoData>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { Message } from 'vue-devui/message';
|
||||
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
|
||||
import axios from 'axios';
|
||||
|
||||
// ========== 状态与数据 ==========
|
||||
const hoverIndex = ref(null); // 鼠标悬浮的列表项索引
|
||||
const { formatTime } = useTimeFormat();
|
||||
const VITE_AI_API_HOST = import.meta.env.VITE_AI_API_HOST;
|
||||
|
||||
// 历史对话列表（新增 isStarred：星标收藏；unreadCount：未读小红点）
|
||||
const dhlsList = ref([
|
||||
{
|
||||
question: "解决菜单功能异常",
|
||||
id: 1,
|
||||
isStarred: true,
|
||||
unreadCount: 0
|
||||
},
|
||||
{
|
||||
question: "项目界面与前端实现",
|
||||
id: 2,
|
||||
isStarred: true,
|
||||
unreadCount: 0
|
||||
},
|
||||
{
|
||||
question: "添加拓扑折叠置顶",
|
||||
id: 3,
|
||||
isStarred: false,
|
||||
unreadCount: 0
|
||||
},
|
||||
{
|
||||
question: "Vue3 代码片段展示组件",
|
||||
id: 4,
|
||||
isStarred: false,
|
||||
unreadCount: 0
|
||||
},
|
||||
{
|
||||
question: "Spring Boot 项目文件结构解释",
|
||||
id: 5,
|
||||
isStarred: false,
|
||||
unreadCount: 0
|
||||
},
|
||||
{
|
||||
question: "调用接口获取文件信息",
|
||||
id: 6,
|
||||
isStarred: false,
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
question: "Nuxt 项目创建及报错处理",
|
||||
id: 7,
|
||||
isStarred: false,
|
||||
unreadCount: 0
|
||||
},
|
||||
{
|
||||
question: "手机版对话",
|
||||
id: 8,
|
||||
isStarred: false,
|
||||
unreadCount: 0
|
||||
}
|
||||
]);
|
||||
|
||||
// ========== 方法 ==========
|
||||
// 新对话按钮点击
|
||||
const handleNewConversation = () => {
|
||||
console.log("创建新对话");
|
||||
// 可添加：清空当前对话、初始化新会话等逻辑
|
||||
};
|
||||
|
||||
// 功能入口点击
|
||||
const handleFunction = (type) => {
|
||||
console.log("点击功能：", type);
|
||||
// 可添加：跳转到对应功能页的逻辑
|
||||
};
|
||||
|
||||
// 展开/收起“更多”功能
|
||||
const toggleMoreFunc = () => {
|
||||
console.log("切换更多功能展开状态");
|
||||
// 可添加：下拉菜单展开逻辑
|
||||
};
|
||||
|
||||
// 选择对话
|
||||
const selectConversation = (item) => {
|
||||
console.log("选中对话：", item);
|
||||
// 可添加：加载对应对话内容的逻辑
|
||||
};
|
||||
|
||||
// 切换星标收藏
|
||||
const toggleStar = (item) => {
|
||||
item.isStarred = !item.isStarred;
|
||||
Message.success(item.isStarred ? "已收藏" : "已取消收藏");
|
||||
};
|
||||
|
||||
// 更多操作
|
||||
const handleMore = (item) => {
|
||||
console.log("更多操作：", item);
|
||||
// 可添加：编辑/删除/分享等逻辑
|
||||
};
|
||||
|
||||
// 接口获取历史对话（替换模拟数据）
|
||||
const getQuestionHistory = async () => {
|
||||
try {
|
||||
const { data } = await axios.get(`${VITE_AI_API_HOST}/api/conversationList?userId=?`);
|
||||
if (data.questions) {
|
||||
// 给接口返回的数据补充 isStarred/unreadCount 字段
|
||||
dhlsList.value = data.questions.map(item => ({
|
||||
...item,
|
||||
isStarred: item.isCollected || false, // 假设接口返回 isCollected 表示收藏
|
||||
unreadCount: item.unreadNum || 0 // 假设接口返回 unreadNum 表示未读
|
||||
}));
|
||||
}
|
||||
} catch (err) {
|
||||
Message.warning('获取历史对话失败！');
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
getQuestionHistory();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ViewHistoryAside {
|
||||
width: 18vw;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 20px;
|
||||
height: 85vh;
|
||||
padding: 12px 16px;
|
||||
|
||||
// 新对话按钮样式
|
||||
.new-conv-wrap {
|
||||
margin-bottom: 16px;
|
||||
.new-conv-btn {
|
||||
width: 100%;
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
justify-content: flex-start;
|
||||
.shortcut {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 功能入口列表样式
|
||||
.function-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.more-item {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 历史对话标题样式
|
||||
.history-title {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
// 历史对话列表样式
|
||||
.history-conv-list {
|
||||
height: calc(100% - 180px); // 自适应剩余高度
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #ddd transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// 列表项样式
|
||||
.conv-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px;
|
||||
transition: background-color 0.2s;
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
// 对话标题+星标
|
||||
.conv-title {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.star-icon {
|
||||
color: #faad14;
|
||||
}
|
||||
}
|
||||
|
||||
// 未读小红点
|
||||
.unread-badge {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
// 更多操作按钮
|
||||
.more-icon {
|
||||
opacity: 0.6;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user