miaoDirectory/README.md

TODO list:

计划	状态
拆分miaoDirectory	✅
完善视频插件	✅
完善PDF插件	✅
完善Code插件	✅
实现miaoDirectory的搜索功能	✅
创建音乐播放器组件（仿QQ音乐移动端吧）	✅
plugin增加些属性，icon, disable, group之类的	✅
实现miaoDirectory的排序功能	✅
重构miaoFetchApi.getFile， 增加进度	❌
完善miaoDirectory的搜索功能	❌
完善图片浏览插件	❌
VirtualDirectory更新时更新文件信息	❌
miaoDirectory的复制文件/文件夹功能	❌
重构miaoDropHandler的实现	❌
重构主界面，拆分主界面组件的实现	❌

长期计划
无

碎碎念：

写的真潦草

让cursor生成了个架构图，可能不是很专业，不过我看了感觉没啥问题：

┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            miaoDirectory前端架构                                     │
└────────────────────────────────────────────────────────────────────────────────────────────────────┘
                                                    ▲
                                                    │
                                                    │ HTTP API通信
                                                    │
┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                               后端服务                                               │
└────────────────────────────────────────────────────────────────────────────────────────────────────┘


┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                             应用入口 (App.vue)                                       │
│  ┌──────────────────────────┐  ┌────────────────────────────┐  ┌────────────────────────────────┐  │
│  │      全局状态初始化       │  │        全局消息提供器        │  │          全局导航菜单           │  │
│  │  (初始化各个系统核心实例)  │  │    (miaoAlertTipProvider)   │  │                                │  │
│  └──────────────┬───────────┘  └─────────────┬──────────────┘  └────────────────────────────────┘  │
│                 │                            │                                                      │
│                 ▼                            ▼                                                      │
│  ┌──────────────────────────┐  ┌────────────────────────────┐                                      │
│  │     视图控制器渲染        │  │      视图容器渲染          │                                      │
│  │    (ViewController)      │  │     (ViewContainer)        │                                      │
│  └──────────────────────────┘  └────────────────────────────┘                                      │
└────────────────────────────────────────────────────────────────────────────────────────────────────┘
                    │                           │
                    │                           │
                    ▼                           ▼
┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            多页面系统                                                │
│                                                                                                    │
│  ┌──────────────────────────────────────────┐    ┌───────────────────────────────────────────────┐ │
│  │             VirtualPages类               │    │              VirtualPage类                    │ │
│  │ ┌────────────────────────────────────┐   │    │ ┌─────────────────────────────────────────┐   │ │
│  │ │              _views                │   │    │ │ component: 页面使用的组件               │   │ │
│  │ │   (存储所有虚拟页面的响应式数组)     │   │    │ │ name: 页面名                           │   │ │
│  │ └────────────────────────────────────┘   │    │ │ visible: 是否可见                       │   │ │
│  │                                          │    │ │ currentDirectories: 当前使用的目录       │   │ │
│  │ ┌────────────────────────────────────┐   │    │ │ currentFiles: 当前使用的文件            │   │ │
│  │ │ getIndex(): 获取页面索引           │   │    │ │ id: 唯一标识符                          │   │ │
│  │ │ getView(): 根据ID获取页面          │   │    │ │ color: 页面颜色                         │   │ │
│  │ │ push(): 添加新页面                 │◄──┼────┼─┤ title: 页面标题                         │   │ │
│  │ │ deleteView(): 删除页面             │   │    │ │ exitConfirm: 关闭时是否需要确认          │   │ │
│  │ │ find(): 查找页面                   │   │    │ │ allowCopy: 是否允许复制页面             │   │ │
│  │ └────────────────────────────────────┘   │    │ └─────────────────────────────────────────┘   │ │
│  └──────────────────────────────────────────┘    │                                               │ │
│                      ▲                            │ ┌─────────────────────────────────────────┐   │ │
│                      │                            │ │ setTitle(): 设置标题                    │   │ │
│                      │                            │ │ switchShow(): 切换显示状态              │   │ │
│                      │                            │ │ refresh(): 刷新页面                     │   │ │
│                      │                            │ └─────────────────────────────────────────┘   │ │
│                      │                            └───────────────────────────────────────────────┘ │
│                      │                                                 ▲                            │
│                      │                                                 │                            │
│              useVirtualPages()                                         │                            │
│            (全局单例访问钩子)                                           │                            │
│                                                                        │                            │
└────────────────────────────────────────────────────────────────────────────────────────────────────┘
                      │                                                 │
                      │                                                 │
                      ▼                                                 │
┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                             插件系统                                                │
│                                                                                                    │
│  ┌──────────────────────────────────────────┐    ┌───────────────────────────────────────────────┐ │
│  │             PluginCenter类               │    │                插件接口定义                    │ │
│  │ ┌────────────────────────────────────┐   │    │ ┌─────────────────────────────────────────┐   │ │
│  │ │            pluginsMap              │   │    │ │ name: 插件名称                          │   │ │
│  │ │      (存储已注册插件的映射表)        │   │    │ │ icon: 插件图标                         │   │ │
│  │ └────────────────────────────────────┘   │    │ │ disable: 是否禁用                       │   │ │
│  │                                          │    │ │ group: 所属插件组                        │   │ │
│  │ ┌────────────────────────────────────┐   │    │ │ priority: 优先级                        │   │ │
│  │ │ register(): 注册插件               │   │    │ │ filter(): 适用性过滤函数                │   │ │
│  │ │ deregister(): 注销插件             │   │    │ │ func(): 插件主函数                      │   │ │
│  │ │ registerComponent(): 注册组件插件   │   │    │ └─────────────────────────────────────────┘   │ │
│  │ │ getUsablePlugin(): 获取可用插件     │───┼────┼─► 创建虚拟页面                                │ │
│  │ │ usePlugin(): 使用插件              │   │    │                                               │ │
│  │ └────────────────────────────────────┘   │    │ ┌─────────────────────────────────────────┐   │ │
│  └──────────────────────────────────────────┘    │ │            插件分组(PluginGroup)         │   │ │
│                      ▲                            │ │                                         │   │ │
│                      │                            │ │ default: 默认组                         │   │ │
│                      │                            │ │ mainMenu: 主菜单组                      │   │ │
│                      │                            │ │ immediately: 立即执行组                 │   │ │
│                      │                            │ └─────────────────────────────────────────┘   │ │
│                      │                            └───────────────────────────────────────────────┘ │
│                      │                                                                             │
│              usePluginCenter()                                                                     │
│            (全局单例访问钩子)                                                                        │
│                                                                                                    │
└────────────────────────────────────────────────────────────────────────────────────────────────────┘
                      │
                      │
                      ▼
┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                          虚拟文件系统                                               │
│                                                                                                    │
│  ┌──────────────────────────────────────────┐    ┌───────────────────────────────────────────────┐ │
│  │           VirtualDirectory类             │    │               VirtualFile类                   │ │
│  │ ┌────────────────────────────────────┐   │    │ ┌─────────────────────────────────────────┐   │ │
│  │ │ name: 目录名                       │   │    │ │ name: 文件名                           │   │ │
│  │ │ path: 完整路径                     │   │    │ │ size: 文件大小                         │   │ │
│  │ │ stats: 文件状态信息                │   │    │ │ stats: 文件状态信息                    │   │ │
│  │ │ files: 文件列表                    │◄──┼────┼─► parent: 父目录                         │   │ │
│  │ │ directories: 子目录列表            │   │    │ │ id: 唯一标识符                         │   │ │
│  │ │ parent?: 父目录                    │   │    │ │ path: 完整路径(计算属性)               │   │ │
│  │ └────────────────────────────────────┘   │    │ └─────────────────────────────────────────┘   │ │
│  └──────────────────────────────────────────┘    └───────────────────────────────────────────────┘ │
│                      ▲                                                                             │
│                      │                                                                             │
│                      │                                                                             │
│              useRootVDirectory()                                                                   │
│            (获取根目录实例钩子)                                                                      │
│                                                                                                    │
└────────────────────────────────────────────────────────────────────────────────────────────────────┘