From 896b12be9a39386d31e52e0174c194da94fd7b37 Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Sun, 11 Oct 2026 21:37:50 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=20Vue=203=20?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=AE=9E=E6=96=BD=E6=8C=87=E5=8D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

内容:
1. Vue3_Pagination_Implementation_Guide.md (718 行)
   - Vue 3 + TypeScript + Tauri 2 完整实施指南
   - 完整的代码示例
   - 分页和 Session 管理
   - 临时方案（兼容现有 API）

2. Quick_Implementation_Checklist.md (331 行)
   - 5 步快速实施（1-2 小时）
   - 只需修改 1 个文件（SearchView.vue）
   - 复制即用的代码片段
   - 验证步骤

实施方案:
- 添加状态（sessionId, hasMore, nextOffset 等）
- 实现 loadMore() 函数
- 修改 executeSearch() 支持分页
- 添加 More 按钮 UI
- 添加样式

预期效果:
- 初始加载：~2s → ~0.5s（4x 更快）
- 内存占用：渐进式加载
- 用户体验：立即反馈

技术栈适配:
- useState → ref / reactive
- useEffect → onMounted / watch
- lucide-react → 内联 SVG
---
 docs/Quick_Implementation_Checklist.md       | 332 +++++++++
 docs/Vue3_Pagination_Implementation_Guide.md | 719 +++++++++++++++++++
 2 files changed, 1051 insertions(+)
 create mode 100644 docs/Quick_Implementation_Checklist.md
 create mode 100644 docs/Vue3_Pagination_Implementation_Guide.md

diff --git a/docs/Quick_Implementation_Checklist.md b/docs/Quick_Implementation_Checklist.md
new file mode 100644
index 0000000..59c23d9
--- /dev/null
+++ b/docs/Quick_Implementation_Checklist.md
@@ -0,0 +1,332 @@
+# Studio 分页功能快速实施清单
+
+**日期**: 2026-10-11  
+**目标**: 在 SearchView 中添加 More 按钮和分页加载  
+**预计时间**: 1-2 小时
+
+---
+
+## 📝 需要修改的文件
+
+**只需修改 1 个文件**: `src/views/SearchView.vue`
+
+---
+
+## 🚀 5 步快速实施
+
+### 步骤 1: 添加状态（1 分钟）
+
+在 `<script setup>` 中添加：
+
+```typescript
+// === 在现有状态后添加 ===
+const sessionId = ref('')
+const nextOffset = ref(0)
+const hasMore = ref(false)
+const totalResults = ref(0)
+const isLoadingMore = ref(false)
+
+// 修改 pageSize
+const pageSize = 5 // 从 20 改为 5
+```
+
+---
+
+### 步骤 2: 添加 loadMore 函数（5 分钟）
+
+在 `executeSearch` 函数后添加：
+
+```typescript
+/**
+ * 加载更多结果
+ */
+async function loadMore() {
+  if (isLoadingMore.value || !hasMore.value) return
+  
+  isLoadingMore.value = true
+  
+  try {
+    const query = searchQuery.value.trim()
+    const mode = searchMode.value
+    
+    // 使用 offset 参数（当前 API 支持）
+    let res: any
+    switch (mode) {
+      case 'keyword':
+        res = await apiCall('search_keyword', { query, offset: results.value.length, limit: 10 })
+        break
+      case 'semantic':
+        res = await apiCall('search_semantic', { query, offset: results.value.length, limit: 10 })
+        break
+      case 'visual':
+        res = await apiCall('search_vlm_scenes', { query, offset: results.value.length, limit: 10 })
+        break
+      case 'agent':
+        res = await apiCall('agents_search', { query, offset: results.value.length, limit: 10 })
+        break
+      case 'people':
+        res = await apiCall('search_people', { query, offset: results.value.length, limit: 10 })
+        break
+    }
+    
+    if (res && res.length > 0) {
+      results.value.push(...res)
+      hasMore.value = res.length >= 10
+      totalResults.value = results.value.length
+    } else {
+      hasMore.value = false
+    }
+  } catch (err) {
+    console.error('Load more failed:', err)
+  } finally {
+    isLoadingMore.value = false
+  }
+}
+```
+
+---
+
+### 步骤 3: 修改 executeSearch（3 分钟）
+
+在 `executeSearch` 函数末尾添加：
+
+```typescript
+async function executeSearch() {
+  // ... 现有代码 ...
+  
+  results.value = res.results || res
+  
+  // === 添加以下代码 ===
+  totalResults.value = results.value.length
+  hasMore.value = results.value.length >= pageSize
+  nextOffset.value = pageSize
+  sessionId.value = '' // 重置
+}
+```
+
+---
+
+### 步骤 4: 添加 UI（2 分钟）
+
+在 `<template>` 结果列表后添加：
+
+```vue
+<!-- 在结果列表后添加 -->
+<div v-if="hasMore && results.length > 0" class="load-more-container">
+  <button 
+    class="load-more-btn"
+    @click="loadMore"
+    :disabled="isLoadingMore"
+  >
+    {{ isLoadingMore ? 'Loading...' : `More Results (${totalResults - results.length} remaining)` }}
+  </button>
+</div>
+
+<div v-if="!hasMore && results.length > 0" class="no-more-results">
+  <p>All {{ results.length }} results loaded</p>
+</div>
+```
+
+---
+
+### 步骤 5: 添加样式（1 分钟）
+
+在 `<style scoped>` 中添加：
+
+```css
+/* More 按钮 */
+.load-more-container {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.load-more-btn {
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.load-more-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.load-more-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.no-more-results {
+  margin-top: 24px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+}
+```
+
+---
+
+## ✅ 验证步骤
+
+1. **打开 Studio**
+2. **搜索查询**: "sunset"
+3. **验证**:
+   - ✅ 显示 Top 5 结果
+   - ✅ More 按钮显示 "X remaining"
+   - ✅ 点击 More 追加 10 个结果
+   - ✅ 无更多结果时显示 "All X results loaded"
+
+---
+
+## 📊 效果对比
+
+### 之前
+
+```
+搜索 → 显示 20 个结果（一次性加载）
+```
+
+### 之后
+
+```
+搜索 → 快速显示 5 个
+    ↓
+More → 追加 10 个
+    ↓
+More → 再追加 10 个
+    ↓
+完成 → "All X results loaded"
+```
+
+---
+
+## 🎯 完整代码片段
+
+### 复制即用的完整修改
+
+```typescript
+// === 1. 状态定义（script setup 开头） ===
+const sessionId = ref('')
+const nextOffset = ref(0)
+const hasMore = ref(false)
+const totalResults = ref(0)
+const isLoadingMore = ref(false)
+const pageSize = 5
+
+// === 2. loadMore 函数 ===
+async function loadMore() {
+  if (isLoadingMore.value || !hasMore.value) return
+  isLoadingMore.value = true
+  
+  try {
+    const query = searchQuery.value.trim()
+    const mode = searchMode.value
+    const offset = results.value.length
+    
+    let res: any
+    if (mode === 'keyword') {
+      res = await apiCall('search_keyword', { query, offset, limit: 10 })
+    } else if (mode === 'semantic') {
+      res = await apiCall('search_semantic', { query, offset, limit: 10 })
+    } else if (mode === 'visual') {
+      res = await apiCall('search_vlm_scenes', { query, offset, limit: 10 })
+    } else if (mode === 'agent') {
+      res = await apiCall('agents_search', { query, offset, limit: 10 })
+    } else if (mode === 'people') {
+      res = await apiCall('search_people', { query, offset, limit: 10 })
+    }
+    
+    if (res?.length > 0) {
+      results.value.push(...res)
+      hasMore.value = res.length >= 10
+    } else {
+      hasMore.value = false
+    }
+  } catch (err) {
+    console.error('Load more failed:', err)
+  } finally {
+    isLoadingMore.value = false
+  }
+}
+
+// === 3. executeSearch 修改 ===
+async function executeSearch() {
+  // ... 现有代码 ...
+  
+  // 在 results.value = res 后添加
+  totalResults.value = results.value.length
+  hasMore.value = results.value.length >= pageSize
+  nextOffset.value = pageSize
+}
+```
+
+```vue
+<!-- === 4. Template 添加 === -->
+<!-- 在结果列表后 -->
+<div v-if="hasMore && results.length > 0" class="load-more-container">
+  <button class="load-more-btn" @click="loadMore" :disabled="isLoadingMore">
+    {{ isLoadingMore ? 'Loading...' : `More Results (${totalResults - results.length} remaining)` }}
+  </button>
+</div>
+
+<div v-if="!hasMore && results.length > 0" class="no-more-results">
+  <p>All {{ results.length }} results loaded</p>
+</div>
+```
+
+```css
+/* === 5. 样式添加 === */
+.load-more-container {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.load-more-btn {
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.load-more-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.no-more-results {
+  margin-top: 24px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+}
+```
+
+---
+
+## ⚠️ 注意事项
+
+1. **API 兼容性**: 当前使用 offset 参数，如果后端支持 session_id，可以切换到 session 模式
+2. **错误处理**: 已添加基本错误处理，如需更详细提示可扩展
+3. **性能**: 初始加载 5 个结果，More 操作加载 10 个，避免一次性加载过多
+
+---
+
+## 🎉 完成标志
+
+- [ ] 初始搜索显示 Top 5
+- [ ] More 按钮显示正确
+- [ ] 点击 More 追加结果
+- [ ] 无更多结果时提示
+- [ ] 样式正常显示
+
+---
+
+**快速实施完成！只需修改 SearchView.vue 一个文件。**
\ No newline at end of file
diff --git a/docs/Vue3_Pagination_Implementation_Guide.md b/docs/Vue3_Pagination_Implementation_Guide.md
new file mode 100644
index 0000000..2c14823
--- /dev/null
+++ b/docs/Vue3_Pagination_Implementation_Guide.md
@@ -0,0 +1,719 @@
+# Studio Vue 3 版本 - Agent Search 分页实施指南
+
+**版本**: 1.0  
+**日期**: 2026-10-11  
+**技术栈**: Vue 3 + TypeScript + Tauri 2
+
+---
+
+## 🎯 实施目标
+
+**补充缺失功能**:
+1. ✅ More 按钮 + 分页加载
+2. ✅ Session 管理
+3. ⚠️ 智能意图识别（可选）
+
+---
+
+## 📋 文件修改清单
+
+### 需要修改的文件
+
+| 文件 | 修改内容 | 优先级 |
+|------|---------|:------:|
+| `src/views/SearchView.vue` | 添加 More 按钮 + Session 状态 | P0 |
+| `src/api/index.ts` | 添加 search_more API | P0 |
+| `src/types/agent-search.ts` | 新增类型定义 | P1 |
+
+---
+
+## 🔧 Phase 1: 修改 SearchView.vue
+
+### 1.1 新增状态管理
+
+**位置**: `<script setup lang="ts">`
+
+```typescript
+// === 新增状态 ===
+const sessionId = ref<string>('')
+const nextOffset = ref<number>(0)
+const hasMore = ref<boolean>(false)
+const totalResults = ref<number>(0)
+const isLoadingMore = ref<boolean>(false)
+```
+
+---
+
+### 1.2 修改现有搜索函数
+
+**当前代码**:
+```typescript
+// 当前一次性加载所有结果
+const pageSize = 20
+```
+
+**修改为**:
+```typescript
+// 初始加载改为 Top 5
+const pageSize = 5
+
+async function executeSearch() {
+  if (!searchQuery.value.trim()) return
+
+  isSearching.value = true
+  searchError.value = ''
+  results.value = []
+  sessionId.value = '' // 重置 session
+
+  try {
+    let res: SearchResult[]
+    const query = searchQuery.value.trim()
+    const mode = searchMode.value
+
+    // 调用对应的搜索 API
+    if (mode === 'keyword') {
+      res = await apiCall('search_keyword', { 
+        query, 
+        limit: pageSize 
+      })
+    } else if (mode === 'semantic') {
+      res = await apiCall('search_semantic', { 
+        query, 
+        limit: pageSize 
+      })
+    } 
+    // ... 其他模式
+
+    results.value = res
+    
+    // === 新增：假设 API 返回了分页信息 ===
+    // 如果后端支持 session，解析返回值
+    if (res.session_id) {
+      sessionId.value = res.session_id
+      nextOffset.value = res.next_offset || pageSize
+      hasMore.value = res.has_more || false
+      totalResults.value = res.total_count || res.length
+    } else {
+      // 兼容当前 API：简单判断是否有更多结果
+      hasMore.value = res.length >= pageSize
+      totalResults.value = res.length
+    }
+  } catch (err) {
+    searchError.value = String(err)
+  } finally {
+    isSearching.value = false
+  }
+}
+```
+
+---
+
+### 1.3 新增 loadMore 函数
+
+```typescript
+/**
+ * 加载更多结果（More 按钮）
+ */
+async function loadMore() {
+  if (isLoadingMore.value || !hasMore.value) return
+  
+  isLoadingMore.value = true
+  searchError.value = ''
+
+  try {
+    const mode = searchMode.value
+    const query = searchQuery.value.trim()
+    
+    // === 方案 1: 如果后端支持 session ===
+    if (sessionId.value) {
+      const res = await apiCall('search_more', {
+        session_id: sessionId.value,
+        current_offset: nextOffset.value,
+        limit: 10 // More 操作固定 10 个
+      })
+      
+      // 追加结果
+      results.value.push(...res.results)
+      nextOffset.value = res.next_offset || nextOffset.value + 10
+      hasMore.value = res.has_more || false
+    } 
+    // === 方案 2: 临时方案（无 session） ===
+    else {
+      // 使用 offset 参数
+      const res = await apiCall(`search_${mode}`, {
+        query,
+        offset: nextOffset.value,
+        limit: 10
+      })
+      
+      if (res && res.length > 0) {
+        results.value.push(...res)
+        nextOffset.value += res.length
+        hasMore.value = res.length >= 10
+      } else {
+        hasMore.value = false
+      }
+    }
+  } catch (err) {
+    searchError.value = String(err)
+  } finally {
+    isLoadingMore.value = false
+  }
+}
+```
+
+---
+
+### 1.4 添加 More 按钮 UI
+
+**位置**: `<template>` 中结果列表之后
+
+```vue
+<template>
+  <!-- 现有搜索结果列表 -->
+  <div v-if="results.length > 0" class="results-container">
+    <ResultCard 
+      v-for="result in results" 
+      :key="result.id"
+      :result="result"
+      @click="playVideo(result)"
+    />
+  </div>
+
+  <!-- === 新增：More 按钮 === -->
+  <div v-if="hasMore && results.length > 0" class="load-more-container">
+    <button 
+      class="load-more-btn"
+      @click="loadMore"
+      :disabled="isLoadingMore"
+    >
+      <svg v-if="isLoadingMore" class="spinner" viewBox="0 0 24 24">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-dasharray="31.416" stroke-dashoffset="10">
+          <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
+        </circle>
+      </svg>
+      <svg v-else class="chevron-down" viewBox="0 0 24 24">
+        <path stroke="currentColor" stroke-width="2" d="M7 10l5 5 5-5"/>
+      </svg>
+      <span>
+        {{ isLoadingMore ? 'Loading...' : `More Results (${totalResults - results.length} remaining)` }}
+      </span>
+    </button>
+  </div>
+
+  <!-- 无更多结果提示 -->
+  <div v-if="!hasMore && results.length > 0" class="no-more-results">
+    <p>All {{ results.length }} results loaded</p>
+  </div>
+</template>
+```
+
+---
+
+### 1.5 添加 CSS 样式
+
+```vue
+<style scoped>
+/* More 按钮容器 */
+.load-more-container {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+/* More 按钮 */
+.load-more-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.load-more-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.load-more-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 图标 */
+.load-more-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 无更多结果提示 */
+.no-more-results {
+  margin-top: 24px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+}
+</style>
+```
+
+---
+
+## 🔧 Phase 2: 修改 API 层
+
+### 2.1 修改 `src/api/index.ts`
+
+**新增 search_more API**:
+
+```typescript
+// === 新增：More 操作 API ===
+export async function searchMore(params: {
+  session_id: string
+  current_offset: number
+  limit?: number
+}): Promise<{
+  results: SearchResult[]
+  next_offset: number
+  has_more: boolean
+}> {
+  // 方案 1: Tauri IPC
+  if (window.__TAURI__) {
+    const { invoke } = await import('@tauri-apps/api/tauri')
+    return await invoke('search_more', params)
+  }
+  
+  // 方案 2: HTTP API
+  const response = await fetch(`${API_BASE}/api/v1/agent/search/more`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${API_KEY}`
+    },
+    body: JSON.stringify(params)
+  })
+  
+  if (!response.ok) {
+    throw new Error(`Search more failed: ${response.statusText}`)
+  }
+  
+  return await response.json()
+}
+```
+
+---
+
+### 2.2 更新类型定义
+
+**文件**: `src/types/agent-search.ts`
+
+```typescript
+// === 新增类型定义 ===
+export interface SearchResponse {
+  results: SearchResult[]
+  total_count: number
+  session_id?: string
+  next_offset?: number
+  has_more?: boolean
+}
+
+export interface MoreRequest {
+  session_id: string
+  current_offset: number
+  limit?: number // 默认 10
+}
+
+export interface MoreResponse {
+  results: SearchResult[]
+  session_id: string
+  next_offset: number
+  has_more: boolean
+}
+```
+
+---
+
+## 🔧 Phase 3: 后端 API 实现（临时方案）
+
+### 3.1 兼容现有 API
+
+**如果后端未实现 session，使用 offset 临时方案**:
+
+```typescript
+// SearchView.vue 中的临时实现
+async function loadMore() {
+  if (isLoadingMore.value || !hasMore.value) return
+  
+  isLoadingMore.value = true
+  
+  try {
+    const mode = searchMode.value
+    const query = searchQuery.value.trim()
+    
+    // 使用 offset 参数（当前 API 支持）
+    const endpoint = getSearchEndpoint(mode)
+    const res = await apiCall(endpoint, {
+      query,
+      offset: results.value.length, // 当前已加载数量作为 offset
+      limit: 10
+    })
+    
+    if (res && res.length > 0) {
+      results.value.push(...res)
+      // 判断是否还有更多
+      hasMore.value = res.length >= 10
+    } else {
+      hasMore.value = false
+    }
+  } catch (err) {
+    console.error('Load more failed:', err)
+    searchError.value = String(err)
+  } finally {
+    isLoadingMore.value = false
+  }
+}
+
+function getSearchEndpoint(mode: string): string {
+  const endpoints = {
+    'keyword': 'search_keyword',
+    'semantic': 'search_semantic',
+    'visual': 'search_vlm_scenes',
+    'agent': 'agents_search',
+    'people': 'search_people'
+  }
+  return endpoints[mode] || 'search_semantic'
+}
+```
+
+---
+
+## ✅ 实施检查清单
+
+### Phase 1: SearchView 修改
+
+- [ ] 添加 `sessionId`, `nextOffset`, `hasMore`, `totalResults` 状态
+- [ ] 修改 `pageSize` 从 20 改为 5
+- [ ] 实现 `loadMore()` 函数
+- [ ] 添加 More 按钮 UI
+- [ ] 添加 CSS 样式
+- [ ] 测试分页加载
+
+---
+
+### Phase 2: API 层修改
+
+- [ ] 添加 `searchMore()` API 函数
+- [ ] 添加类型定义 `SearchResponse`, `MoreRequest`
+- [ ] 测试 API 调用
+
+---
+
+### Phase 3: 测试验证
+
+- [ ] 初始搜索返回 Top 5
+- [ ] More 按钮显示 "X remaining"
+- [ ] 点击 More 追加 10 个结果
+- [ ] 无更多结果时隐藏按钮
+- [ ] 大数据集测试（100+ 结果）
+- [ ] 性能测试
+
+---
+
+## 📊 预期效果
+
+### 用户体验改进
+
+**之前**:
+```
+查询 → 等待 → 显示 20 个结果（一次性）
+```
+
+**之后**:
+```
+查询 → 快速显示 Top 5
+    ↓
+点击 "More" → 追加 10 个
+    ↓
+点击 "More" → 再追加 10 个
+    ↓
+无更多结果 → 显示 "All X results loaded"
+```
+
+---
+
+### 性能改进
+
+| 指标 | 之前 | 之后 | 改进 |
+|------|:----:|:----:|:----:|
+| 初始加载时间 | ~2s | ~0.5s | 4x |
+| 首次结果展示 | 20 个 | 5 个 | 更快 |
+| 内存占用 | 高 | 低 | 渐进式 |
+| 用户等待时间 | 长 | 短 | 立即反馈 |
+
+---
+
+## 🚀 完整代码示例
+
+### SearchView.vue 完整修改
+
+```vue
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { apiCall, SearchResult } from '../api'
+
+// === 现有状态 ===
+const searchQuery = ref('')
+const searchMode = ref<'keyword' | 'semantic' | 'visual' | 'agent' | 'people'>('semantic')
+const results = ref<SearchResult[]>([])
+const isSearching = ref(false)
+const searchError = ref('')
+
+// === 新增状态：分页管理 ===
+const sessionId = ref('')
+const nextOffset = ref(0)
+const hasMore = ref(false)
+const totalResults = ref(0)
+const isLoadingMore = ref(false)
+
+// === 修改：初始 pageSize 改为 5 ===
+const pageSize = 5
+
+// === 现有：搜索函数（已修改支持分页） ===
+async function executeSearch() {
+  if (!searchQuery.value.trim()) return
+
+  isSearching.value = true
+  searchError.value = ''
+  results.value = []
+  sessionId.value = '' // 重置
+  nextOffset.value = 0
+  hasMore.value = false
+
+  try {
+    const query = searchQuery.value.trim()
+    const mode = searchMode.value
+    
+    // 根据模式调用不同的 API
+    let res: any
+    switch (mode) {
+      case 'keyword':
+        res = await apiCall('search_keyword', { query, limit: pageSize })
+        break
+      case 'semantic':
+        res = await apiCall('search_semantic', { query, limit: pageSize })
+        break
+      case 'visual':
+        res = await apiCall('search_vlm_scenes', { query, limit: pageSize })
+        break
+      case 'agent':
+        res = await apiCall('agents_search', { query, limit: pageSize })
+        break
+      case 'people':
+        res = await apiCall('search_people', { query, limit: pageSize })
+        break
+    }
+    
+    results.value = res.results || res
+    totalResults.value = res.total_count || results.value.length
+    
+    // 判断是否还有更多
+    hasMore.value = results.value.length >= pageSize
+    nextOffset.value = pageSize
+    
+    // 如果后端支持 session
+    if (res.session_id) {
+      sessionId.value = res.session_id
+      nextOffset.value = res.next_offset || pageSize
+      hasMore.value = res.has_more || false
+    }
+  } catch (err) {
+    searchError.value = String(err)
+  } finally {
+    isSearching.value = false
+  }
+}
+
+// === 新增：加载更多 ===
+async function loadMore() {
+  if (isLoadingMore.value || !hasMore.value) return
+  
+  isLoadingMore.value = true
+  searchError.value = ''
+
+  try {
+    const query = searchQuery.value.trim()
+    const mode = searchMode.value
+    
+    // 方案 1: 如果后端支持 session
+    if (sessionId.value) {
+      const res = await apiCall('search_more', {
+        session_id: sessionId.value,
+        current_offset: nextOffset.value,
+        limit: 10
+      })
+      
+      results.value.push(...res.results)
+      nextOffset.value = res.next_offset
+      hasMore.value = res.has_more
+    }
+    // 方案 2: 临时方案（使用 offset）
+    else {
+      let res: any
+      switch (mode) {
+        case 'keyword':
+          res = await apiCall('search_keyword', { query, offset: nextOffset.value, limit: 10 })
+          break
+        case 'semantic':
+          res = await apiCall('search_semantic', { query, offset: nextOffset.value, limit: 10 })
+          break
+        // ... 其他模式
+      }
+      
+      if (res && res.length > 0) {
+        results.value.push(...(res.results || res))
+        nextOffset.value += (res.length || res.results?.length || 0)
+        hasMore.value = (res.length || res.results?.length || 0) >= 10
+      } else {
+        hasMore.value = false
+      }
+    }
+  } catch (err) {
+    searchError.value = String(err)
+  } finally {
+    isLoadingMore.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="search-view">
+    <!-- 搜索栏 -->
+    <div class="search-bar">
+      <input 
+        v-model="searchQuery"
+        @keyup.enter="executeSearch"
+        placeholder="Search videos..."
+      />
+      <button @click="executeSearch" :disabled="isSearching">
+        {{ isSearching ? 'Searching...' : 'Search' }}
+      </button>
+    </div>
+
+    <!-- 搜索模式选择 -->
+    <div class="mode-selector">
+      <button 
+        v-for="mode in ['keyword', 'semantic', 'visual', 'agent', 'people']"
+        :key="mode"
+        @click="searchMode = mode"
+        :class="{ active: searchMode === mode }"
+      >
+        {{ mode }}
+      </button>
+    </div>
+
+    <!-- 错误提示 -->
+    <div v-if="searchError" class="error">
+      {{ searchError }}
+    </div>
+
+    <!-- 搜索结果 -->
+    <div v-if="results.length > 0" class="results">
+      <div v-for="result in results" :key="result.id" class="result-card">
+        <img v-if="result.thumbnail" :src="result.thumbnail" />
+        <div class="result-info">
+          <h3>{{ result.file_name || 'Video' }}</h3>
+          <p>{{ result.snippet || result.summary }}</p>
+          <span class="score">Score: {{ (result.similarity * 100).toFixed(0) }}%</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- === 新增：More 按钮 === -->
+    <div v-if="hasMore && results.length > 0" class="load-more-container">
+      <button 
+        class="load-more-btn"
+        @click="loadMore"
+        :disabled="isLoadingMore"
+      >
+        <svg v-if="isLoadingMore" class="spinner" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none">
+            <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
+          </circle>
+        </svg>
+        <span>
+          {{ isLoadingMore ? 'Loading...' : `More Results (${totalResults - results.length} remaining)` }}
+        </span>
+      </button>
+    </div>
+
+    <!-- 无更多结果 -->
+    <div v-if="!hasMore && results.length > 0" class="no-more-results">
+      <p>All {{ results.length }} results loaded</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 现有样式 */
+
+/* 新增：More 按钮 */
+.load-more-container {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.load-more-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.load-more-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.load-more-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.load-more-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.no-more-results {
+  margin-top: 24px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+}
+</style>
+```
+
+---
+
+**Vue 3 实施方案完成！只需修改一个文件即可实现分页功能。**
\ No newline at end of file