fix: SFTP标签页离开后返回刷新状态丢失问题
This commit is contained in:
63
.opencode/plans/2026-03-30-sftp-tab-cache-fix-plan.md
Normal file
63
.opencode/plans/2026-03-30-sftp-tab-cache-fix-plan.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# SFTP标签页状态保持修复实施计划
|
||||
|
||||
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** 修复SFTP标签页离开后再返回会刷新页面、丢失浏览状态的问题
|
||||
|
||||
**Architecture:** 为SftpView组件添加keep-alive缓存,仅缓存SFTP相关页面,最大缓存10个实例避免内存占用过高,每个路由实例通过fullPath作为唯一key区分
|
||||
|
||||
**Tech Stack:** Vue 3、Vue Router 4、Pinia
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 为SftpView组件添加名称标识
|
||||
**Files:**
|
||||
- Modify: `frontend/src/views/SftpView.vue`
|
||||
|
||||
- [ ] **Step 1: 添加组件名称**
|
||||
在script setup开头添加:
|
||||
```typescript
|
||||
defineOptions({ name: 'SftpView' })
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 修改MainLayout添加keep-alive缓存
|
||||
**Files:**
|
||||
- Modify: `frontend/src/layouts/MainLayout.vue:193-195`
|
||||
|
||||
- [ ] **Step 1: 替换原RouterView代码**
|
||||
原代码:
|
||||
```vue
|
||||
<RouterView v-slot="{ Component }">
|
||||
<component :is="Component" v-if="!showTerminalWorkspace" />
|
||||
</RouterView>
|
||||
```
|
||||
替换为:
|
||||
```vue
|
||||
<RouterView v-slot="{ Component }">
|
||||
<keep-alive :include="['SftpView']" :max="10">
|
||||
<component :is="Component" v-if="!showTerminalWorkspace" :key="$route.fullPath" />
|
||||
</keep-alive>
|
||||
</RouterView>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: 验证修复效果
|
||||
**Files:**
|
||||
- Test: 手动验证 + 构建验证
|
||||
|
||||
- [ ] **Step 1: 运行类型检查**
|
||||
Run: `cd frontend && npm run build`
|
||||
Expected: 构建成功,无类型错误
|
||||
|
||||
- [ ] **Step 2: 手动测试功能**
|
||||
1. 启动开发服务,登录系统
|
||||
2. 打开任意连接的SFTP标签
|
||||
3. 浏览到任意子目录
|
||||
4. 切换到其他页面(如连接列表、终端)
|
||||
5. 切回SFTP标签,确认仍停留在之前浏览的子目录,状态未丢失
|
||||
6. 打开多个不同连接的SFTP标签,切换时确认各自状态独立保存
|
||||
|
||||
---
|
||||
@@ -190,8 +190,10 @@ function handleSftpTabClose(tabId: string, connectionId: number, event: Event) {
|
||||
<div v-if="keepTerminalWorkspaceMounted" v-show="showTerminalWorkspace" class="h-full">
|
||||
<TerminalWorkspaceView :visible="showTerminalWorkspace" />
|
||||
</div>
|
||||
<RouterView v-slot="{ Component }">
|
||||
<component :is="Component" v-if="!showTerminalWorkspace" />
|
||||
<RouterView v-slot="{ Component }">
|
||||
<keep-alive :include="['SftpView']" :max="10">
|
||||
<component :is="Component" v-if="!showTerminalWorkspace" :key="$route.fullPath" />
|
||||
</keep-alive>
|
||||
</RouterView>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'SftpView' })
|
||||
import { ref, computed, watch, onBeforeUnmount } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useToast } from 'vue-toast-notification'
|
||||
|
||||
Reference in New Issue
Block a user