From 86d26f161a75b95e48c92b631235fea2744c3a19 Mon Sep 17 00:00:00 2001
From: fmk1023 <fmk1023@noreply.gitcode.com>
Date: Wed, 3 Dec 2025 09:53:16 +0800
Subject: [PATCH] =?UTF-8?q?Tcode=E5=B9=B3=E5=8F=B0=E6=94=B9=E9=80=A0?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7-AI=E5=8A=A9=E6=89=8B=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewHistoryAside/ViewHistoryAsideNew.vue  | 324 ++++++++++
 .../ViewHistoryAside/ViewHistoryAsideNew.vue  | 596 ++++++++++++++++++
 src/views/Jyh/AI/Home/index.vue               |   4 +-
 3 files changed, 923 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/AILayout/ViewHistoryAside/ViewHistoryAsideNew.vue
 create mode 100644 src/views/Jyh/AI/Home/components/ViewHistoryAside/ViewHistoryAsideNew.vue

diff --git a/src/layouts/AILayout/ViewHistoryAside/ViewHistoryAsideNew.vue b/src/layouts/AILayout/ViewHistoryAside/ViewHistoryAsideNew.vue
new file mode 100644
index 0000000..d8d6c2f
--- /dev/null
+++ b/src/layouts/AILayout/ViewHistoryAside/ViewHistoryAsideNew.vue
@@ -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>
diff --git a/src/views/Jyh/AI/Home/components/ViewHistoryAside/ViewHistoryAsideNew.vue b/src/views/Jyh/AI/Home/components/ViewHistoryAside/ViewHistoryAsideNew.vue
new file mode 100644
index 0000000..2e05e43
--- /dev/null
+++ b/src/views/Jyh/AI/Home/components/ViewHistoryAside/ViewHistoryAsideNew.vue
@@ -0,0 +1,596 @@
+<template>
+  <div class="chat-sidebar">
+    <div class="top-section">
+      <div class="new-chat-btn" @click="handleNewChat">
+        <div class="btn-content">
+          <d-icon name="icon-edit" size="16px"></d-icon>
+          <span class="btn-text">新对话</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="scroll-container">
+
+      <div class="menu-section">
+        <div
+          v-for="menu in menuList"
+          :key="menu.id"
+          class="menu-item"
+          @click="handleMenuClick(menu)"
+        >
+          <d-icon :name="menu.icon" size="16px" class="menu-icon"></d-icon>
+          <span class="menu-text">{{ menu.title }}</span>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="search-section">
+        <d-search icon-position="left" style="width: 100%" placeholder="搜索历史对话" v-model="searchText" @change="loadData" @search="loadData"></d-search>
+      </div>
+
+      <div class="history-section">
+        <div class="section-title">历史对话</div>
+
+        <div v-if="dhlsList.length > 0">
+          <div
+            v-for="(item, index) in dhlsList"
+            :key="item.conversationId"
+            :class="['history-item', { 'active': props.CONV_ID === item.conversationId }]"
+            @click="handleSelect(item)"
+            @mouseenter="hoverIndex = index"
+            @mouseleave="hoverIndex = null"
+          >
+            <template v-if="item.isEditing">
+              <d-input
+                v-model="item.tempTitle"
+                autofocus
+                class="edit-input"
+                @keypress.enter="confirmEdit(item)"
+                @blur="cancelEdit(item)"
+              />
+              <div class="edit-actions">
+                <d-icon name="icon-right" class="action-icon success" @click.stop="confirmEdit(item)"/>
+                <d-icon name="icon-error" class="action-icon danger" @click.stop="cancelEdit(item)"/>
+              </div>
+            </template>
+
+            <template v-else>
+              <d-icon name="icon-message" size="16px" class="item-icon"></d-icon>
+
+              <div class="item-content" @dblclick="startEdit(item)">
+                <span class="item-title text-ellipsis">{{ item.title || '新对话' }}</span>
+              </div>
+
+              <div class="item-actions">
+                <d-icon v-if="item.is_collected" name="icon-star-o" size="14px" class="pin-icon" style="color: #f7ba2a;"></d-icon>
+
+                <d-icon v-if="item.isPinned" name="icon-pin-fill" size="14px" class="pin-icon"></d-icon>
+
+                <div class="hover-actions" v-show="hoverIndex === index">
+                  <d-dropdown trigger="click" :close-on-click="true" align="start">
+                    <d-icon name="icon-more-operate" size="16px" class="more-btn"></d-icon>
+                    <template #menu>
+                      <ul class="dropdown-menu">
+                        <li @click.stop="handlePin(item)">
+                          {{ item.isPinned ? '取消置顶' : '置顶' }}
+                        </li>
+                        <li @click.stop="toggleCollect(item)">
+                          {{ item.is_collected ? '取消收藏' : '收藏' }}
+                        </li>
+                        <li @click.stop="startEdit(item)">重命名</li>
+                        <li @click.stop="handleDelete([item.conversationId])" class="danger">删除</li>
+                      </ul>
+                    </template>
+                  </d-dropdown>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div v-else class="empty-state">
+          暂无历史对话
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom-section">
+      <div class="bottom-controls">
+        <div class="limit-select">
+          <span>保存条数</span>
+          <d-select
+            v-model="historyLimit"
+            size="sm"
+            class="mini-select"
+            @value-change="handleHistoryLimitChange"
+          >
+            <d-option value="10">10</d-option>
+            <d-option value="20">20</d-option>
+            <d-option value="30">30</d-option>
+            <d-option value="0">不限</d-option>
+          </d-select>
+        </div>
+        <div class="batch-btn" @click="openBatchManageModal">
+          <d-icon name="icon-property-setting"></d-icon>
+          <span>批量管理</span>
+        </div>
+      </div>
+      <BatchManageModal :username="props.username" @loadData="loadData" ref="BatchManageModalRef"/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, defineEmits, defineExpose, defineProps } from 'vue';
+import BatchManageModal from './BatchManageModal.vue';
+import { Message } from 'vue-devui/message';
+import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
+import {
+  fetchChangeConversationTitle,
+  fetchConversationList,
+  fetchDeleteConversation,
+  fetchToggleConversationCollect
+} from '@/api/jyh';
+
+// --- Props & Emits ---
+const props = defineProps(['username', 'CONV_ID']);
+const emit = defineEmits(['select-conv','onNewConvo']);
+
+// --- State ---
+const searchText = ref('');
+const historyLimit = ref('30');
+const hoverIndex = ref(null);
+const BatchManageModalRef = ref(null);
+const dhlsList = ref([]); // 历史对话列表
+const page = ref({
+  pageNum: 1,
+  size: 30 // 默认 30，与 historyLimit 对应
+});
+
+// 静态菜单数据
+const menuList = [
+  { id: 'write', title: 'SBOM分析', icon: 'icon-accelerations' },
+  { id: 'create', title: '许可证合规检测', icon: 'icon-add-example' },
+  { id: 'app', title: '供应链安全检测', icon: 'icon-branch-merge-o' },
+  { id: 'cloud', title: '代码安全审计', icon: 'icon-add-token' },
+  { id: 'more', title: '漏洞智能修复', icon: 'icon-assembly-new' },
+];
+
+const { formatTime } = useTimeFormat();
+
+// --- Methods ---
+
+// 1. 加载数据
+const loadData = async () => {
+  await getQuestionHistory();
+};
+
+const getQuestionHistory = async () => {
+  if (props.username) {
+    const { data } = await fetchConversationList({
+      "userId": props.username,
+      "list_type": "history", // 或者根据需求调整，例如同时获取收藏
+      "is_manage": false,
+      "page": page.value.pageNum,
+      "size": page.value.size,
+      "search": searchText.value
+    });
+    if (data.code === 200) {
+      // 处理数据，补充前端状态字段
+      dhlsList.value = data.data.map(item => ({
+        ...item,
+        isEditing: false,
+        tempTitle: '',
+        isPinned: item.isPinned || false // 如果后端有置顶字段则使用，否则默认 false
+      }));
+    } else {
+      // Message.error(data.msg || '接口异常！');
+    }
+  }
+};
+
+// 2. 新建对话
+const handleNewChat = () => {
+  emit('select-conv', null);
+};
+
+// 3. 选中对话
+const handleSelect = (item) => {
+  if (item.isEditing) return; // 编辑中不触发选中
+  emit('select-conv', item.conversationId);
+};
+
+// 4. 菜单点击
+const handleMenuClick = (menu) => {
+  console.log('点击菜单:', menu.title);
+  // 路由跳转或功能触发逻辑
+};
+
+// 5. 编辑/重命名逻辑
+const startEdit = (item) => {
+  item.isEditing = true;
+  item.tempTitle = item.title;
+};
+
+const confirmEdit = async (item) => {
+  if (!item.tempTitle.trim()) {
+    Message.error('标题不能为空');
+    return;
+  }
+  try {
+    const res = await fetchChangeConversationTitle({
+      conversationId: item.conversationId,
+      newTitle: item.tempTitle,
+      userId: props.username,
+    });
+
+    if (res.data.code === 200 || res.data.code === 20001 || res.data.code === 20000) {
+      item.title = item.tempTitle;
+      item.isEditing = false;
+      Message.success('标题修改成功');
+    } else {
+      Message.error(res.data.msg || '修改失败');
+    }
+  } catch (error) {
+    console.error('编辑失败:', error);
+    item.tempTitle = item.title;
+    item.isEditing = false;
+  }
+};
+
+const cancelEdit = (item) => {
+  item.isEditing = false;
+  item.tempTitle = item.title;
+};
+
+// 6. 收藏逻辑
+const toggleCollect = async (item) => {
+  if (!props.username) {
+    return Message.error('请先登录');
+  }
+  try {
+    const res = await fetchToggleConversationCollect({
+      userId: props.username,
+      conversationIdList: [item.conversationId]
+    });
+
+    if (res.data.code === 200 || res.data.code === 20000) {
+      await loadData(); // 重新加载以更新状态
+      Message.success(res.data.msg || '操作成功');
+    } else {
+      Message.error(res.data.msg);
+    }
+  } catch (error) {
+    console.error('收藏操作失败:', error);
+  }
+};
+
+// 7. 删除逻辑
+const handleDelete = async (conversationIds) => {
+  if (!props.username) {
+    return Message.error('请先登录');
+  }
+  try {
+    const res = await fetchDeleteConversation({
+        userId: props.username,
+        conversationIdList: conversationIds
+      }
+    );
+
+    if (res.data.code === 200 || res.data.code === 20000) {
+      Message.success(res.data.message || '删除成功');
+      loadData();
+    } else {
+      Message.error(res.data.msg || '删除对话失败！');
+    }
+  } catch (error) {
+    console.error('删除对话失败:', error);
+  }
+};
+
+// 8. 置顶逻辑 (前端模拟)
+const handlePin = (item) => {
+  item.isPinned = !item.isPinned;
+  // 本地排序：置顶的排前面
+  dhlsList.value.sort((a, b) => (b.isPinned ? 1 : 0) - (a.isPinned ? 1 : 0));
+  // 如果有后端置顶接口，请在这里调用
+};
+
+// 9. 批量管理 & 分页条数
+const openBatchManageModal = () => {
+  if (BatchManageModalRef.value) {
+    BatchManageModalRef.value.openModal();
+  }
+};
+
+const handleHistoryLimitChange = (val) => {
+  page.value.size = Number(val) || 10000; // 0 为不限
+  page.value.pageNum = 1;
+  loadData();
+};
+
+// --- Lifecycle ---
+onMounted(() => {
+  loadData();
+});
+
+defineExpose({
+  getQuestionHistory,
+  loadData
+});
+</script>
+
+<style lang="scss" scoped>
+/* 容器样式：固定宽度，高度适配 */
+.chat-sidebar {
+  width: 260px;
+  height: 85vh; /* 或 100% */
+  background-color: #f7f8fa; /* 浅灰背景 */
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: #333;
+  position: fixed; /* 保持原来的固定定位 */
+  top: 64px;
+  left: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+/* 1. 顶部：新对话按钮 */
+.top-section {
+  flex-shrink: 0;
+  margin-bottom: 12px;
+}
+
+.new-chat-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #eef4ff; /* 浅蓝背景 */
+  color: #2563eb; /* 蓝色文字 */
+  border-radius: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: #dbeafe;
+  }
+
+  .btn-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+}
+
+/* 2. 中间滚动区域 */
+.scroll-container {
+  flex: 1;
+  overflow-y: auto;
+  /* 隐藏滚动条但保持功能 */
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #ddd;
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+/* 功能菜单 */
+.menu-section {
+  margin-bottom: 8px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: #4b5563;
+  font-size: 14px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #e5e7eb;
+  }
+
+  .menu-icon {
+    margin-right: 10px;
+    color: #6b7280;
+  }
+  .menu-text {
+    flex: 1;
+  }
+}
+
+/* 分割线 */
+.divider {
+  height: 1px;
+  background-color: #e5e7eb;
+  margin: 8px 4px;
+}
+
+/* 搜索框 */
+.search-section {
+  padding: 0 4px 8px 4px;
+}
+
+/* 历史对话列表 */
+.history-section {
+  .section-title {
+    font-size: 12px;
+    color: #9ca3af;
+    padding: 8px 4px;
+  }
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.2s;
+  height: 40px; /* 固定高度 */
+
+  &:hover {
+    background-color: #e5e7eb;
+
+    .item-actions .pin-icon {
+      display: none; /* 悬停时隐藏置顶/收藏图标，显示更多操作 */
+    }
+  }
+
+  &.active {
+    background-color: #e5e7eb; /* 选中态背景 */
+    font-weight: 500;
+  }
+
+  .item-icon {
+    margin-right: 10px;
+    color: #9ca3af;
+    flex-shrink: 0;
+  }
+
+  .item-content {
+    flex: 1;
+    overflow: hidden;
+    margin-right: 4px;
+  }
+
+  .item-title {
+    font-size: 14px;
+    color: #374151;
+    display: block;
+  }
+
+  .text-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .item-actions {
+    display: flex;
+    align-items: center;
+    min-width: 20px;
+    justify-content: flex-end;
+  }
+
+  .pin-icon {
+    color: #9ca3af;
+  }
+
+  .hover-actions {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: #e5e7eb;
+    padding-left: 4px;
+
+    .more-btn {
+      color: #6b7280;
+      &:hover { color: #374151; }
+    }
+  }
+
+  /* 编辑框样式 */
+  .edit-input {
+    height: 30px;
+    font-size: 13px;
+    width: 100%;
+  }
+  .edit-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 4px;
+    .action-icon {
+      font-size: 14px;
+      cursor: pointer;
+      &.success { color: #50d4ab; }
+      &.danger { color: #f66f6a; }
+    }
+  }
+}
+
+.empty-state {
+  text-align: center;
+  color: #9ca3af;
+  font-size: 13px;
+  padding: 20px 0;
+}
+
+/* 3. 底部区域：批量管理等 */
+.bottom-section {
+  flex-shrink: 0;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.bottom-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: #666;
+  padding: 0 4px;
+
+  .limit-select {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    :deep(.devui-select) {
+      width: 60px;
+    }
+  }
+
+  .batch-btn {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    &:hover { color: #2563eb; }
+  }
+}
+
+/* 下拉菜单样式 */
+.dropdown-menu {
+  list-style: none;
+  padding: 4px 0;
+  margin: 0;
+  min-width: 100px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+
+  li {
+    padding: 8px 12px;
+    font-size: 13px;
+    cursor: pointer;
+    color: #374151;
+
+    &:hover {
+      background-color: #f3f4f6;
+    }
+
+    &.danger {
+      color: #ef4444;
+    }
+  }
+}
+</style>
diff --git a/src/views/Jyh/AI/Home/index.vue b/src/views/Jyh/AI/Home/index.vue
index fd5463e..68a38ab 100644
--- a/src/views/Jyh/AI/Home/index.vue
+++ b/src/views/Jyh/AI/Home/index.vue
@@ -139,6 +139,7 @@
     </div>
 
     <ViewHistoryAside ref="viewHistoryRef" :CONV_ID="CONV_ID" :username="username" v-show="isHistoryVisible" @select-conv="handleSelectConv"/>
+<!--    <ViewHistoryAsideNew ref="viewHistoryRef" :CONV_ID="CONV_ID" :username="username" v-show="isHistoryVisible" @onNewConvo="onNewConvo" @select-conv="handleSelectConv"/>-->
   </div>
 </template>
 
@@ -153,6 +154,7 @@ import OssDetail from './components/OssDetail.vue';
 import Other from './components/Other.vue';
 import AIList from './components/AIList.vue';
 import ViewHistoryAside from './components/ViewHistoryAside/ViewHistoryAside.vue';
+import ViewHistoryAsideNew from './components/ViewHistoryAside/ViewHistoryAsideNew.vue';
 import axios from 'axios';
 import { useDiscussGetUserInfo } from '@/api/discussion/hook';
 import { Message } from 'vue-devui/message';
@@ -196,7 +198,7 @@ const messages = ref([]);
 const followupQuestions = ref([]);
 
 // 控制 ViewHistoryAside 组件的显示状态
-const isHistoryVisible = ref(false);
+const isHistoryVisible = ref(true);
 
 
 // 切换 ViewHistoryAside 组件的显示与隐藏