149 lines
3.6 KiB
Markdown
149 lines
3.6 KiB
Markdown
# 临时解决方案：使用 OOP 重写 ZIP 浏览
|
||
|
||
**目的**: 彻底解决初始化顺序问题
|
||
**方法**: 用 OOP 服务类替换现有的 useZipBrowser
|
||
|
||
---
|
||
|
||
## 🚀 快速实施步骤
|
||
|
||
### 步骤1：创建 OOP 服务（15分钟）
|
||
|
||
创建 `services/ZipBrowserService.ts`：
|
||
|
||
```typescript
|
||
import { ref, computed, type Ref } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import type { FileItem } from '@/types/file-system'
|
||
|
||
/**
|
||
* ZIP 浏览服务（OOP 版本）
|
||
* 使用类封装，构造函数保证初始化顺序
|
||
*/
|
||
export class ZipBrowserService {
|
||
// ========== 状态 ==========
|
||
private readonly _isBrowsingZip = ref<boolean>(false)
|
||
private readonly _currentZipPath = ref<string>('')
|
||
private readonly _currentZipDirectory = ref<string>('')
|
||
private readonly _pathBeforeZip = ref<string>('')
|
||
|
||
// ========== 构造函数（保证初始化） ==========
|
||
constructor() {
|
||
console.log('[ZipBrowserService] 初始化完成')
|
||
}
|
||
|
||
// ========== 公共接口（访问器） ==========
|
||
|
||
get isBrowsingZip(): Ref<boolean> {
|
||
return this._isBrowsingZip
|
||
}
|
||
|
||
get currentZipPath(): Ref<string> {
|
||
return this._currentZipPath
|
||
}
|
||
|
||
get currentZipDirectory(): Ref<string> {
|
||
return this._currentZipDirectory
|
||
}
|
||
|
||
get displayPath(): Ref<string> {
|
||
return computed(() => {
|
||
if (this._currentZipDirectory.value) {
|
||
return `📦 ${this._currentZipPath.value} [${this._currentZipDirectory.value}]`
|
||
}
|
||
return `📦 ${this._currentZipPath.value}`
|
||
})
|
||
}
|
||
|
||
// ========== 公共方法 ==========
|
||
|
||
async enterZipMode(zipPath: string): Promise<void> {
|
||
this._pathBeforeZip.value = '' // 保存之前的路径
|
||
this._currentZipPath.value = zipPath
|
||
this._isBrowsingZip.value = true
|
||
this._currentZipDirectory.value = ''
|
||
|
||
Message.success('进入 ZIP 浏览模式')
|
||
}
|
||
|
||
exitZipMode(): void {
|
||
this._isBrowsingZip.value = false
|
||
this._currentZipPath.value = ''
|
||
this._currentZipDirectory.value = ''
|
||
|
||
Message.info('退出 ZIP 浏览模式')
|
||
}
|
||
|
||
getZipFileName(zipPath: string): string {
|
||
const parts = zipPath.split(/[/\\]/)
|
||
return parts[parts.length - 1] || zipPath
|
||
}
|
||
|
||
getZipBreadcrumbs(): ZipBreadcrumbItem[] {
|
||
const crumbs: ZipBreadcrumbItem[] = [
|
||
{ name: this.getZipFileName(this._currentZipPath.value), path: '' }
|
||
]
|
||
|
||
if (this._currentZipDirectory.value) {
|
||
const parts = this._currentZipDirectory.value.split('/')
|
||
let currentPath = ''
|
||
for (const part of parts) {
|
||
currentPath += (currentPath ? '/' : '') + part
|
||
crumbs.push({ name: part, path: currentPath })
|
||
}
|
||
}
|
||
|
||
return crumbs
|
||
}
|
||
|
||
async navigateToZipDirectory(path: string): Promise<void> {
|
||
this._currentZipDirectory.value = path
|
||
// 加载目录逻辑
|
||
}
|
||
}
|
||
```
|
||
|
||
### 步骤2：在组件中使用（5分钟）
|
||
|
||
```typescript
|
||
// index.vue
|
||
|
||
// 导入服务类
|
||
import { ZipBrowserService } from '@/services/ZipBrowserService'
|
||
|
||
// 创建服务实例（在所有状态变量之前）
|
||
const zipService = new ZipBrowserService()
|
||
|
||
// 使用（和之前一样）
|
||
const toolbarConfig = computed(() => ({
|
||
isBrowsingZip: zipService.isBrowsingZip.value,
|
||
displayPath: zipService.displayPath.value,
|
||
zipFileName: zipService.getZipFileName(zipService.currentZipPath.value),
|
||
zipBreadcrumbs: zipService.getZipBreadcrumbs()
|
||
}))
|
||
|
||
const handleExitZip = () => {
|
||
zipService.exitZipMode()
|
||
}
|
||
```
|
||
|
||
### 步骤3：测试（2分钟）
|
||
|
||
```bash
|
||
wails build
|
||
.\build\bin\u-desk.exe
|
||
```
|
||
|
||
---
|
||
|
||
## ⏱️ 总时间：约 22 分钟
|
||
|
||
如果成功，我们可以：
|
||
1. 将其他功能也迁移到 OOP 服务
|
||
2. 逐步完善 ZIP 浏览功能
|
||
3. 彻底解决初始化问题
|
||
|
||
---
|
||
|
||
**要不要试试这个方案？**
|