可信代码库-AI大模型批量对话接口对话及对话功能开发

src/layouts/AILayout/ViewHistoryAside/ViewHistoryAside.vue

@@ -113,6 +113,115 @@
         </div>
       </d-tab>
       <d-tab id="scdh" 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="openBatchManageModal">
+              <template #icon>
+                <d-icon name="icon-property-setting"></d-icon>
+              </template>
+              批量管理
+            </d-button>
+            <BatchManageModal ref="BatchManageModalRef"/>
+          </div>
+        </div>
       </d-tab>
     </d-tabs>
   </Card>

src/layouts/AILayout/index.vue

@@ -64,7 +64,7 @@
 <!--    <ToolsFloat v-if="showToolsFloat" />-->
     <!-- 在 d-layout 结束前添加返回按钮 -->
     <div class="back-in-btn">
-      <div class="back-in-time-btn" @click="handleBackInTime">
+      <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">
@@ -72,7 +72,7 @@
       </div>
     </div>
 
-    <ViewHistoryAside />
+    <ViewHistoryAside v-show="isHistoryVisible"/>
   </d-layout>
 </template>
 
@@ -104,6 +104,9 @@ 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;
@@ -160,26 +163,10 @@ const handleClickMenu = () => {
   }
 };
 
-const outOfSearch = ref(true); // 在search页面隐藏footer
-router.afterEach((to, form) => {
-  outOfSearch.value = to.name !== 'search';
-});
-microApp.router.afterEach({
-  'micoro-app-homeweb-app': (to, from) => {
-    outOfSearch.value = to.pathname !== '/search';
-  }
-});
-const checkPage = (data: any) => {
-  if (data.type === 'checkPage') {
-    return 'ready';
-  }
+// 切换 ViewHistoryAside 组件的显示与隐藏
+const toggleHistory = () => {
+  isHistoryVisible.value =!isHistoryVisible.value;
 };
-onMounted(() => {
-  microApp.addDataListener('micoro-app-homeweb-app', checkPage, false);
-});
-onUnmounted(() => {
-  microApp.removeDataListener('micoro-app-homeweb-app', checkPage);
-});
 </script>
 
 <style lang="scss" scoped>
@@ -230,6 +217,14 @@ onUnmounted(() => {
   display: flex;
   gap: 12px;
 
+  .active {
+    background-color: #f0f0f0; /* 灰色背景 */
+  }
+
+  .active .icon {
+    transform: translateY(-4px); /* 图标上移4px */
+  }
+
   .back-in-time-btn {
     display: flex;
     align-items: center;