feat: 搜索翻页

py支持搜索翻页。搜索结果仅含list的情况

Author: Taois

dashboard/src/api/services/video.js

@@ -229,7 +229,8 @@ class VideoService {
         videos: (response.list || []).map(this.formatVideoInfo),
         pagination: this.createPagination(response, page),
         keyword: keyword.trim(),
-        total: response.total || 0
+        total: response.total || 0,
+        rawResponse: response // 添加原始响应数据用于调试
       }
 
       return result
@@ -405,10 +406,44 @@ class VideoService {
     const pagination = createPaginationInfo()
 
     pagination.page = currentPage
-    pagination.total = response.total || 0
-    pagination.pageSize = response.limit || 20
-    pagination.totalPages = Math.ceil(pagination.total / pagination.pageSize)
-    pagination.hasNext = currentPage < pagination.totalPages
+    
+    // 处理不同的API响应格式
+    const total = response.total || response.recordcount || 0
+    const pageCount = response.pagecount || response.totalPages || 0
+    const pageSize = response.limit || response.pagesize || 20
+    const currentList = response.list || []
+    
+    pagination.total = total
+    pagination.pageSize = pageSize
+    
+    // 如果API返回了总页数，直接使用
+    if (pageCount > 0) {
+      pagination.totalPages = pageCount
+      pagination.hasNext = currentPage < pageCount
+    } else if (total > 0) {
+      // 否则根据总数计算
+      pagination.totalPages = Math.ceil(total / pageSize)
+      pagination.hasNext = currentPage < pagination.totalPages
+    } else {
+      // 如果没有总数信息，根据当前返回的数据判断
+      // 检查是否有"no_data"标识
+      const hasNoDataFlag = currentList.some(item => 
+        item.vod_id === 'no_data' || 
+        item.vod_name === 'no_data' ||
+        (typeof item === 'string' && item.includes('no_data'))
+      )
+      
+      if (hasNoDataFlag || currentList.length === 0) {
+        // 如果有no_data标识或列表为空，表示没有更多数据
+        pagination.hasNext = false
+        pagination.totalPages = currentPage
+      } else {
+        // 否则假设还有下一页，需要实际请求下一页来确认
+        pagination.hasNext = true
+        pagination.totalPages = currentPage + 1
+      }
+    }
+    
     pagination.hasPrev = currentPage > 1
 
     return pagination

dashboard/src/components/Breadcrumb.vue

@@ -21,9 +21,11 @@
     <!-- 中间搜索框 -->
     <div class="header-center">
       <a-input-search
+        v-model="searchValue"
         placeholder="搜索视频"
         enter-button
         @search="onSearch"
+        @press-enter="onSearch"
       />
     </div>
 
@@ -57,6 +59,8 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
+
 const props = defineProps({
   navigation_title: {
     type: String,
@@ -74,14 +78,20 @@ const emit = defineEmits([
   "onSearch",
 ]);
 
+const searchValue = ref('')
+
 const handleOpenForm = () => {
   emit("handleOpenForm");
 };
 const refreshPage = () => {
   emit("refreshPage");
 };
 const onSearch = (value) => {
-  emit("onSearch", value);
+  // 如果value是字符串，使用它；否则使用当前输入框的值
+  const searchTerm = typeof value === 'string' ? value : searchValue.value
+  if (searchTerm && typeof searchTerm === 'string' && searchTerm.trim()) {
+    emit("onSearch", searchTerm.trim());
+  }
 };
 
 const closeWindow = () => {

dashboard/src/components/FilterSection.vue

@@ -31,19 +31,23 @@
           :key="filterGroup.key"
           class="filter-group"
         >
-          <div class="filter-group-title">{{ filterGroup.name }}</div>
-          <div class="filter-options">
-            <a-tag
-              v-for="option in filterGroup.value"
-              :key="option.v"
-              :color="isSelected(filterGroup.key, option.v) ? 'green' : ''"
-              :checkable="true"
-              :checked="isSelected(filterGroup.key, option.v)"
-              @check="handleToggleFilter(filterGroup.key, option.v, option.n)"
-              class="filter-option-tag"
-            >
-              {{ option.n }}
-            </a-tag>
+          <div class="filter-group-row">
+            <div class="filter-group-title">{{ filterGroup.name }}</div>
+            <div class="filter-options-container">
+              <div class="filter-options">
+                <a-tag
+                  v-for="option in filterGroup.value"
+                  :key="option.v"
+                  :color="isSelected(filterGroup.key, option.v) ? 'green' : ''"
+                  :checkable="true"
+                  :checked="isSelected(filterGroup.key, option.v)"
+                  @check="handleToggleFilter(filterGroup.key, option.v, option.n)"
+                  class="filter-option-tag"
+                >
+                  {{ option.n }}
+                </a-tag>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -126,33 +130,93 @@ const handleResetFilters = () => {
 }
 
 .filter-content {
-  padding: 0 16px 16px;
+  padding: 0 16px 8px;
 }
 
 .filter-group {
-  margin-bottom: 16px;
+  margin-bottom: 4px;
+  padding: 4px 12px;
+  background: var(--color-fill-1);
+  border-radius: 6px;
+  border-left: 3px solid var(--color-primary-light-3);
 }
 
 .filter-group:last-child {
   margin-bottom: 0;
 }
 
+.filter-group-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 28px;
+}
+
 .filter-group-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-1);
-  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-2);
+  white-space: nowrap;
+  flex-shrink: 0;
+  min-width: 70px;
+  text-align: left;
+  background: var(--color-fill-3);
+  padding: 4px 8px 4px 20px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border-2);
+  position: relative;
+}
+
+.filter-group-title::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  background: var(--color-primary-light-4);
+  border-radius: 2px;
+  border: 1px solid var(--color-primary-light-2);
+}
+
+.filter-options-container {
+  flex: 1;
+  overflow: hidden;
 }
 
 .filter-options {
   display: flex;
-  flex-wrap: wrap;
   gap: 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 2px 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-3) transparent;
+}
+
+.filter-options::-webkit-scrollbar {
+  height: 4px;
+}
+
+.filter-options::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.filter-options::-webkit-scrollbar-thumb {
+  background: var(--color-border-3);
+  border-radius: 2px;
+}
+
+.filter-options::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-2);
 }
 
 .filter-option-tag {
   cursor: pointer;
   transition: all 0.2s ease;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .filter-option-tag:hover {

dashboard/src/views/Video.vue

@@ -253,8 +253,6 @@ const onSearch = async (value) => {
   searchState.currentPage = 1;
 
   try {
-    console.log("开始搜索:", keyword, "当前源:", form.now_site);
-    
     if (!form.now_site || !form.now_site.key) {
       throw new Error("请先选择数据源");
     }
@@ -270,8 +268,6 @@ const onSearch = async (value) => {
     searchState.searchResults = searchData.videos || [];
     searchState.totalPages = searchData.pagination?.totalPages || 1;
     searchState.hasMore = searchData.pagination?.hasNext || false;
-    
-    console.log("搜索结果:", searchState.searchResults);
   } catch (error) {
     console.error("搜索失败:", error);
     searchState.searchError = error.message || "搜索失败，请重试";
@@ -296,12 +292,30 @@ const onSearchLoadMore = async () => {
       apiUrl: form.now_site.api
     });
 
+
+
     // 追加新的搜索结果到现有结果中
     const newVideos = searchData.videos || [];
-    searchState.searchResults = [...searchState.searchResults, ...newVideos];
+    
+    // 检查是否有重复数据或no_data标识
+    const existingIds = new Set(searchState.searchResults.map(v => v.vod_id));
+    const uniqueNewVideos = newVideos.filter(video => {
+      // 过滤掉重复的视频和no_data标识
+      return !existingIds.has(video.vod_id) && 
+             video.vod_id !== 'no_data' && 
+             video.vod_name !== 'no_data';
+    });
+    
+    // 如果新数据为空或全部重复，表示没有更多数据
+     if (uniqueNewVideos.length === 0) {
+       searchState.hasMore = false;
+     } else {
+      searchState.searchResults = [...searchState.searchResults, ...uniqueNewVideos];
+      searchState.hasMore = searchData.pagination?.hasNext !== false; // 只有明确返回false才停止
+    }
+    
     searchState.currentPage = nextPage;
-    searchState.totalPages = searchData.pagination?.totalPages || 1;
-    searchState.hasMore = searchData.pagination?.hasNext || false;
+    searchState.totalPages = searchData.pagination?.totalPages || searchState.totalPages;
   } catch (error) {
     console.error("搜索加载更多失败:", error);
     searchState.searchError = error.message || "加载失败，请重试";
@@ -319,6 +333,11 @@ const exitSearch = () => {
   searchState.currentPage = 1;
 };
 
+// 处理视频点击事件
+const handleVideoClick = (video) => {
+  // 这里可以添加视频点击后的处理逻辑，比如跳转到播放页面
+};
+
 
 
 const handleOpenForm = () => {

readme.md

@@ -41,4 +41,8 @@ https://juejin.cn/post/7301193497247727652
 
 https://drplayer.playdreamer.cn/
 
-https://hipy.playdreamer.cn/
+https://hipy.playdreamer.cn/
+
+# AI加量包购买
+
+[点此访问](https://www.trae.ai/account-setting?purchase=1#usage)