可信代码库-AI助手查看历史记录开发

src/assets/css/jyh.scss

@@ -190,6 +190,12 @@
   }
 }
 
+.jyh-select {
+  .devui-select__selection {
+    border: 0 !important;
+  }
+}
+
 .jyh-select-multiple {
 
 }
@@ -363,3 +369,83 @@
   color: black !important;
   padding: 6px 6px !important;
 }
+.jyh-button2 {
+  border: 0 !important;
+  background: transparent !important;
+  color: black !important;
+  padding: 6px 6px !important;
+}
+
+.jyh-collapse {
+  .devui-collapse__item-title {
+    padding: 0 8px !important;
+  }
+  .devui-collapse__item-content {
+    padding: 0 !important;
+  }
+  .jyh-collapse-title {
+    display: flex;
+    align-items: center;
+  }
+  /* 选中状态 */
+  .selected-card {
+    border: 1px solid #C9C9C9; /* DevUI 主题色 */
+    //box-shadow: 0 0 0 1px #5e7ce0; /* 外发光效果 */
+  }
+  .jyh-collapse-card {
+    border-radius: 8px;
+    background: #1919190C;
+    cursor: pointer;
+    //border: 1px solid #C9C9C9;
+
+    /* 卡片整体样式 */
+    .card-header {
+      padding: 8px 8px 4px;
+      border-bottom: 1px solid #f0f0f0;
+
+      color: #191919;
+      font-family: HarmonyOS Sans SC;
+      font-weight: regular;
+      font-size: 14px;
+      line-height: 22px;
+      letter-spacing: 0px;
+      text-align: left;
+      display: flex;
+
+      .card-actions {
+        display: flex;
+        gap: 4px;
+        margin-left: auto;
+      }
+
+
+    }
+
+    .card-header h4 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .card-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0px 8px 8px;
+    }
+
+    .content-left {
+      display: flex;
+      align-items: center;
+      color: #666;
+    }
+
+    .content-right {
+      color: #999;
+    }
+
+    .time-text {
+      font-size: 14px;
+    }
+  }
+}

src/layouts/AILayout/ViewHistoryAside/ViewHistoryAside.vue

@@ -0,0 +1,257 @@
+<template>
+  <Card class="ViewHistoryAside">
+    <d-tabs class="jyh-tabs-4" type="wrapped" v-model="selectTab">
+      <d-tab id="dhls" title="对话历史">
+        <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>
+        </div>
+        <!-- 固定在底部的控制栏 -->
+        <div class="bottom-control-bar">
+          <div class="control-left">
+            历史对话保存条数
+            <d-select
+              v-model="historyLimit"
+              style="width: 60px"
+              size="sm"
+              class="jyh-select"
+            >
+              <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">0</d-option>
+            </d-select>
+          </div>
+          <div class="control-right">
+            <d-button class="jyh-button2" variant="solid"  @click="handleBatchManage">
+              <template #icon>
+                <d-icon name="icon-property-setting"></d-icon>
+              </template>
+              批量管理
+            </d-button>
+          </div>
+        </div>
+      </d-tab>
+      <d-tab id="scdh" title="收藏对话">
+      </d-tab>
+    </d-tabs>
+  </Card>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 定义每个卡片的展开状态
+const selectTab = ref('dhls');
+const searchText = ref(''); // 搜索关键词
+const collapseValue = ref(['today']);
+const historyLimit = ref('30');
+// 当前选中的卡片索引
+const selectedIndex = ref(null);
+const hoverIndex = ref(null);
+
+const handleEdit = (item) => {
+  console.log('编辑:', item);
+  // 这里添加编辑逻辑
+};
+
+const handleShare = (item) => {
+  console.log('分享:', item);
+  // 这里添加分享逻辑
+};
+const handleMore = (item) => {
+  console.log('分享:', item);
+  // 这里添加分享逻辑
+};
+
+// 模拟数据
+const cardList = ref([
+  {
+    title: '项目进度报告',
+    icon: 'icon-project',
+    text: '已完成需求评审',
+    time: new Date(),
+    id: 1,
+  },
+  {
+    title: '系统维护通知',
+    icon: 'icon-maintenance',
+    text: '系统将于今晚24:00进行维护',
+    time: new Date(Date.now() + 3600000),
+    id: 2,
+  },
+  {
+    title: '会议提醒',
+    icon: 'icon-meeting',
+    text: '下午3点项目组会议',
+    time: new Date(Date.now() + 21600000),
+    id: 3,
+  }
+]);
+
+// 选择卡片
+const selectCard = (item) => {
+  debugger
+  selectedIndex.value = item.id;
+  // 这里可以添加选中后的其他逻辑
+  // console.log('选中卡片:', cardList.value[index]);
+};
+
+
+// 格式化时间
+const formatTime = (date) => {
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+};
+</script>
+
+<style lang="scss" scoped>
+.ViewHistoryAside {
+  width: 18vw;
+  position: fixed;
+  top: 64px;
+  left: 20px;
+  height: 85vh;
+
+  .jyh-tabs-4 {
+    :deep(.devui-tabs__nav) {
+      border-bottom: 0 !important;
+    }
+    :deep(.devui-tabs__nav--wrapped)>li.active a {
+      color: black !important;
+    }
+  }
+
+  .jyh-collapse {
+    .devui-collapse__item-title {
+      padding: 0 !important;
+    }
+    .jyh-collapse-title {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .scrollable-content {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 60px; /* 为底部控制栏留出空间 */
+    margin-bottom: -16px; /* 抵消Card的padding */
+
+    /* 细滚动条样式 */
+    scrollbar-width: thin;
+    scrollbar-color: #ddd transparent;
+  }
+
+  .scrollable-content::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  .scrollable-content::-webkit-scrollbar-thumb {
+    background-color: #ddd;
+    border-radius: 2px;
+  }
+
+  .scrollable-content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .bottom-control-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: white;
+    border-top: 1px solid #f0f0f0;
+    z-index: 1;
+
+    .control-left, .control-right {
+      display: flex;
+      align-items: center;
+    }
+
+  }
+}
+</style>

src/layouts/AILayout/index.vue

@@ -71,22 +71,27 @@
         <i class="icon icon-operation-log" title="查看文档"></i>
       </div>
     </div>
+
+    <ViewHistoryAside />
   </d-layout>
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'DefaultLayout' });
 import { RouterView, useRoute, useRouter } from 'vue-router';
 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';
 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();
 const solt = defineSlots();

src/views/Jyh/AI/Home/index.vue

@@ -23,6 +23,8 @@
             <!--软件详情-->
             <OssDetail v-else-if="msg.type===3"/>
 
+            <McMarkdownCard v-else :content="msg.content"></McMarkdownCard>
+
             <div class="conversation-cnxw">
               <a class="flex conversation-cnxw-item">
                 <span class="span2">猜你想问</span>
@@ -199,7 +201,7 @@ const onSubmit = (e, answer = undefined) => {
     });
   });
   // getAIAnswer(answer ?? e);
-  getAIAnswer(mockAnswer,3);
+  getAIAnswer(mockAnswer,1);
 };
 
 const getAIAnswer = (content,type) => {