1

step.md

@@ -0,0 +1,47 @@
+# 项目结构
+```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中配置的这个平台有多少个网页要爬
+ - 同时点击扩展的popup里的内容，也变得和上面的时间轴内容一致，显示爬取进度，隐藏立即爬取等按钮，