为收藏页面添加分页

src/api/assist/index.ts

@@ -52,7 +52,7 @@ export default {
 					messageId,
 					like,
 				}),
-			bookmark_list: () => get('/system/lmsessions/messages/like/list')
+			bookmark_list: (param: { keyWord?:string,pageNum?: number,pageSize?: number } = {}) => get('/system/lmsessions/messages/like/list', param),
 		},
 	},
 

src/views/assistant/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {ref, nextTick, onMounted, computed, onUnmounted, reactive, watch, isReactive} from 'vue'
 import {Local} from '/@/utils/storage'
-import {User, ChatDotRound, Delete, Edit, Check, Close, ArrowDown, Star, StarFilled} from '@element-plus/icons-vue'
+import {User, ChatDotRound, Delete, Edit, Check, Close, ArrowDown, Star, StarFilled, Search} from '@element-plus/icons-vue'
 import {MarkdownPlugin} from '/@/components/markdown/type/markdown'
 import EChartsPlugin from '/@/components/markdown/plugins/echarts'
 import ToolsLoadingPlugin from '/@/components/markdown/plugins/tools-loading'
@@ -358,19 +358,28 @@ const activeConversationId = ref<number | undefined>(undefined)
 // 	await doLoadingMessage(newVal)
 // })
 
+const bookmarkOptions = ref({
+	pageSize: 30,
+	pageNum: 1,
+	keyWord: '',
+})
+
+// 收藏消息总数
+const bookmarkTotal = ref(0)
 const {loading: loadingMessage, doLoading: doLoadingMessage} = useLoading(async (id: number) => {
   //如果id是-1，拉取收藏的记录
   if (id === -1) {
     const data: {
       messages: Message[]
       total: number
-    } = await assist.session.message.bookmark_list().catch(() => {
+    } = await assist.session.message.bookmark_list(bookmarkOptions.value).catch(() => {
       return {
         list: [],
         total: 0,
       }
     })
     messages.value = data.messages ?? []
+    bookmarkTotal.value = data.total ?? 0
     return
   }
 
@@ -499,9 +508,6 @@ const redirectToModelManager = () => router.push('manage/model')
 const showSettingsPanel = ref(false)
 const showToolCalls = ref(false)
 
-// 侧边栏tab状态
-const activeTab = ref('history')
-
 // 收藏消息功能
 const favoriteMessageIdx = ref(-1)
 const {loading: loadingFavoriteMessage, doLoading: toggleFavorite} = useLoading(async (messageIndex: number) => {
@@ -527,6 +533,44 @@ const {loading: loadingFavoriteMessage, doLoading: toggleFavorite} = useLoading(
   }
 })
 
+// 收藏面板功能
+// 搜索功能
+const handleBookmarkSearch = async () => {
+  bookmarkOptions.value.pageNum = 1
+  await doLoadingMessage(-1)
+}
+
+// 分页变化
+const handleBookmarkPageChange = async (page: number) => {
+  bookmarkOptions.value.pageNum = page
+  await doLoadingMessage(-1)
+}
+
+// 每页数目变化
+const handleBookmarkPageSizeChange = async (pageSize: number) => {
+  bookmarkOptions.value.pageSize = pageSize
+  bookmarkOptions.value.pageNum = 1 // 重置到第一页
+  await doLoadingMessage(-1)
+}
+
+// 重置功能
+const handleBookmarkReset = async () => {
+  bookmarkOptions.value.keyWord = ''
+  bookmarkOptions.value.pageNum = 1
+  await doLoadingMessage(-1)
+}
+
+// 计算总页数
+const bookmarkTotalPages = computed(() => {
+  return Math.ceil(bookmarkTotal.value / bookmarkOptions.value.pageSize)
+})
+
+// 每页数目选项
+const pageSizeOptions = [3,10, 20, 30, 50, 100]
+
+// 最大页数限制
+const maxPages = 100
+
 </script>
 
 <template>
@@ -744,7 +788,7 @@ const {loading: loadingFavoriteMessage, doLoading: toggleFavorite} = useLoading(
         <div class="messages-spacer"></div>
       </div>
 
-      <div class="input-container"  v-show="activeConversationId !== -1">
+      <div class="input-container"  v-if="activeConversationId !== -1">
         <!-- 工具和模型选择行 -->
         <div class="selection-row">
           <!-- 工具选择 -->
@@ -819,6 +863,54 @@ const {loading: loadingFavoriteMessage, doLoading: toggleFavorite} = useLoading(
           </div>
         </div>
       </div>
+			<!-- 收藏面板底部栏 -->
+			<div class="input-container bookmark-footer" v-else>
+				<div class="bookmark-controls">
+					<!-- 搜索框 -->
+					<div class="bookmark-search">
+						<el-input
+							v-model="bookmarkOptions.keyWord"
+							placeholder="搜索收藏的消息..."
+							:prefix-icon="Search"
+							clearable
+							@keydown.enter="handleBookmarkSearch"
+							@clear="handleBookmarkReset"
+							style="width: 300px"
+						/>
+						<el-button
+							type="primary"
+							:icon="Search"
+							@click="handleBookmarkSearch"
+							:loading="loadingMessage"
+						>
+							搜索
+						</el-button>
+					</div>
+
+					<!-- 分页和重置 -->
+					<div class="bookmark-pagination">
+						<el-button
+							@click="handleBookmarkReset"
+							:loading="loadingMessage"
+						>
+							重置
+						</el-button>
+						<el-pagination
+							v-model:current-page="bookmarkOptions.pageNum"
+							v-model:page-size="bookmarkOptions.pageSize"
+							:total="bookmarkTotal"
+							:page-sizes="pageSizeOptions"
+							:pager-count="7"
+							:max-page="maxPages"
+							layout="total, sizes, prev, pager, next, jumper"
+							@current-change="handleBookmarkPageChange"
+							@size-change="handleBookmarkPageSizeChange"
+							:disabled="loadingMessage"
+							small
+						/>
+					</div>
+				</div>
+			</div>
     </el-main>
 
     <!-- 提示词设置对话框 -->
@@ -1540,4 +1632,59 @@ const {loading: loadingFavoriteMessage, doLoading: toggleFavorite} = useLoading(
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
 }
+
+/* 收藏面板底部栏样式 */
+.bookmark-footer {
+  .bookmark-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+  }
+
+  .bookmark-search {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .bookmark-pagination {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .bookmark-footer {
+    .bookmark-controls {
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .bookmark-search {
+      width: 100%;
+      justify-content: center;
+
+      .el-input {
+        width: 100% !important;
+        max-width: 300px;
+      }
+    }
+
+    .bookmark-pagination {
+      width: 100%;
+      justify-content: center;
+      flex-direction: column;
+      gap: 8px;
+
+      .el-pagination {
+        justify-content: center;
+      }
+    }
+  }
+}
 </style>