83 lines
2.7 KiB
Markdown
83 lines
2.7 KiB
Markdown
# File Icon Theme Expansion Implementation Plan
|
|
|
|
> **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:** 扩展网盘文件图标体系，让常见文件类型都有稳定映射，并把新的图标主题发布到前端 OSS。
|
|
|
|
**Architecture:** 把当前散落在 `front/src/pages/Files.tsx` 和 `front/src/pages/files-upload.ts` 里的类型判断收口到共享模块，再通过一个小型 UI 组件统一渲染图标、配色和类型文案。这样列表、网格、详情栏和上传进度面板都能复用同一套规则，避免后续继续分叉。
|
|
|
|
**Tech Stack:** React 19、TypeScript、Vite 6、lucide-react、Node test runner、OSS 发布脚本
|
|
|
|
---
|
|
|
|
### Task 1: 锁定文件类型映射行为
|
|
|
|
**Files:**
|
|
- Modify: `front/src/pages/files-upload.test.ts`
|
|
|
|
- [ ] **Step 1: 写失败测试**
|
|
覆盖 `xlsx`、`pptx`、`zip`、`mp4`、`mp3`、`fig`、`ttf`、`exe`、`epub`、`json` 等常见类型。
|
|
|
|
- [ ] **Step 2: 运行测试确认红灯**
|
|
|
|
Run: `npm run test -- src/pages/files-upload.test.ts`
|
|
|
|
Expected: 现有上传类型识别无法正确区分上述文件类型。
|
|
|
|
### Task 2: 收口共享文件类型模块
|
|
|
|
**Files:**
|
|
- Create: `front/src/lib/file-type.ts`
|
|
- Create: `front/src/lib/file-type.test.ts`
|
|
|
|
- [ ] **Step 1: 写失败测试**
|
|
覆盖网盘文件元数据在 `contentType + extension` 组合下的分组、标签和优先级。
|
|
|
|
- [ ] **Step 2: 运行测试确认红灯**
|
|
|
|
Run: `npm run test -- src/lib/file-type.test.ts`
|
|
|
|
Expected: 共享模块尚不存在或无法满足测试期望。
|
|
|
|
- [ ] **Step 3: 写最小实现**
|
|
提供统一的 `resolveFileType` / `resolveStoredFileType` 能力，并产出主题所需的标签与类型标识。
|
|
|
|
- [ ] **Step 4: 运行测试确认绿灯**
|
|
|
|
Run: `npm run test -- src/lib/file-type.test.ts src/pages/files-upload.test.ts`
|
|
|
|
Expected: 两组测试全部通过。
|
|
|
|
### Task 3: 统一前端图标主题与页面使用
|
|
|
|
**Files:**
|
|
- Create: `front/src/components/ui/FileTypeIcon.tsx`
|
|
- Modify: `front/src/pages/Files.tsx`
|
|
- Modify: `front/src/pages/files-upload.ts`
|
|
|
|
- [ ] **Step 1: 最小接入**
|
|
让文件列表、网格卡片、详情栏、上传面板都使用统一图标主题组件或配置。
|
|
|
|
- [ ] **Step 2: 本地验证**
|
|
|
|
Run: `npm run lint`
|
|
|
|
Expected: TypeScript 校验通过。
|
|
|
|
- [ ] **Step 3: 构建验证**
|
|
|
|
Run: `npm run build`
|
|
|
|
Expected: Vite 生产构建成功。
|
|
|
|
### Task 4: 发布前端到 OSS
|
|
|
|
**Files:**
|
|
- Use existing script: `scripts/deploy-front-oss.mjs`
|
|
|
|
- [ ] **Step 1: 执行正式发布**
|
|
|
|
Run: `node scripts/deploy-front-oss.mjs`
|
|
|
|
Expected: `front/dist` 上传到配置好的 OSS 前缀并完成 SPA 别名文件更新。
|