48 lines
3.1 KiB
Markdown
48 lines
3.1 KiB
Markdown
# 项目结构
|
||
```angular2html
|
||
src:.
|
||
├─assets # 静态资源目录
|
||
│ vite.svg # 这里的资源通常用于图标、Logo 或扩展程序内部引用的图片
|
||
│
|
||
├─background # 后台脚本 (Background Script / Service Worker)
|
||
│ index.ts # 扩展的“大脑”，常驻后台运行，处理事件监听、报文转发、存储管理等
|
||
│
|
||
├─config # 配置目录
|
||
│ platforms.ts # 自定义配置，各种平台（如不同网站、不同浏览器）的适配配置
|
||
│
|
||
├─content # 内容脚本 (Content Script)
|
||
│ │ App.vue # 注入到网页中的 UI 组件（通常用于在目标页面侧边栏或浮窗显示界面）
|
||
│ │ main.ts # 内容脚本的入口文件，负责将 Vue 组件挂载到宿主页面的 DOM 中
|
||
│ │
|
||
│ └─views # 内容脚本相关的子视图或组件
|
||
│
|
||
├─options # 选项页 (Options Page)
|
||
│ App.vue # 扩展设置页面的 UI（右键扩展图标点击“选项”打开的页面）
|
||
│ index.html # 选项页的 HTML 宿主文件
|
||
│ main.ts # 选项页的 Vue 入口文件
|
||
│
|
||
├─popup # 弹窗页 (Popup Page)
|
||
│ App.vue # 点击扩展图标时显示的弹出框 UI
|
||
│ index.html # 弹窗页的 HTML 宿主文件
|
||
│ main.ts # 弹窗页的 Vue 入口文件
|
||
│
|
||
├─shared # 共享代码库 (Shared)
|
||
│ # 存放被 background、content、popup 等多个模块共同引用的工具函数、常量、API封装等
|
||
│
|
||
└─types # 类型定义目录
|
||
index.ts # 存放全局的 TypeScript 接口（Interface）和类型（Type）定义
|
||
```
|
||
|
||
# 开发步骤
|
||
1.在popup模块中的App.vue中用tailwindcss编写，点击扩展图标时出现的弹窗，逻辑如下
|
||
- 在未登录情况下，即storage中token字段是否存在，如果不存在，弹窗内容只用显示扩展名字、描述、请登录按钮，底部扩展版本
|
||
- 当点击登录按钮后，先模拟登录，写死token，之后ui如下
|
||
- 显示扩展名字、描述、一个平台选择框（通过读取config/platforms.ts)的内容for循环显示平台、扫描按钮、最底部Row（退出按钮，扩展版本号）
|
||
- 注意：token的存储和获取逻辑放到/shared/auth.ts中去，如果涉及到接口和枚举的定义，请判断是否是全局类型
|
||
- 如果是，该类型写到一个新文件中，并放到types/下，如果不是，放到当前模块的types/目录下（如果没用，新建）
|
||
|
||
2.前提：当1完成后，点击popup的立即爬取已经可以打开一个新的窗口了
|
||
- 在所有网页（包括新打开的窗口和所有网页）的右下角都放一个圆形正计时（表示正在爬取中）
|
||
- 点击圆形正计时时，出现一个popup，内容如下
|
||
- 以时间轴的形式，表示当前爬取进度，即：根据platforms.ts中的steps
|
||
- 同时点击扩展的popup里的内容，也变得和上面的时间轴内容一致，显示爬取进度，隐藏立即爬取等按钮， |