u-desk/docs/02-架构设计/OOP架构/临时解决方案-OOP重写ZIP.md

临时解决方案：使用 OOP 重写 ZIP 浏览

目的: 彻底解决初始化顺序问题 方法: 用 OOP 服务类替换现有的 useZipBrowser

---

🚀 快速实施步骤

步骤1：创建 OOP 服务（15分钟）

创建 services/ZipBrowserService.ts：

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分钟）

// 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分钟）

wails build
.\build\bin\u-desk.exe

---

⏱️ 总时间：约 22 分钟

如果成功，我们可以：

1. 将其他功能也迁移到 OOP 服务
2. 逐步完善 ZIP 浏览功能
3. 彻底解决初始化问题

---

要不要试试这个方案？