add 项目运行截图

2026-04-10 14:37:23 +08:00
parent a2f5875d1b
commit ef8237d8d1
15 changed files with 2943 additions and 1 deletions
--- a/.trae/documents/project-screenshot-automation-plan.md
+++ b/.trae/documents/project-screenshot-automation-plan.md
@@ -0,0 +1,463 @@
+# 项目截图自动化功能实施计划
+
+## 需求分析
+
+根据用户提供的八爪鱼 RPA 流程图，需要实现以下功能：
+
+### 项目结构
+
+* **服务后端**: Java SpringBoot 项目
+
+* **前台前端**: Vue3 前端项目（部分项目可能没有）
+
+* **后台前端**: Vue3 管理后台项目
+
+### 脚本文件
+
+* `run_install_server.bat` - 后端 Maven 构建
+
+* `run_install_front.bat` - 前台前端依赖安装
+
+* `run_install_admin.bat` - 后台前端依赖安装
+
+* `run_server.bat` - 启动服务后端
+
+* `run_front.bat` - 启动前台前端
+
+* `run_admin.bat` - 启动后台前端
+
+* `run_sql.bat` - 导入 SQL 脚本（SQL 脚本在后端项目文件夹下的 db 文件夹中）
+
+### 执行流程（根据八爪鱼流程图）
+
+```
+主流程
+├── 初始化变量
+├── 打开网页
+├── 导入 SQL
+├── 更换图片
+├── 后台网页截图
+├── 启动后端服务
+├── 启动前端服务
+├── 前端依赖 install
+├── 前台网页截图
+├── 收尾工作
+└── 准备工作
+```
+
+## 实施步骤
+
+### 阶段 1: 创建核心模块
+
+#### 1.1 创建 `project_screenshot.py` 模块
+
+* 实现 `ProjectScreenshotAutomation` 类
+
+* 功能包括：
+
+  * 项目路径配置管理
+
+  * 执行 bat 脚本（构建、安装依赖、启动服务）
+
+  * SQL 导入功能
+
+  * 使用 Playwright 进行浏览器控制和截图
+
+  * 菜单识别和遍历截图
+
+#### 1.2 关键功能实现
+
+**脚本执行功能:**
+
+```python
+def execute_bat(bat_path: str, cwd: str = None, timeout: int = 300) -> tuple[bool, str]:
+    """执行 bat 脚本并返回结果"""
+    
+def wait_for_service(url: str, timeout: int = 120) -> bool:
+    """等待服务启动完成"""
+```
+
+**SQL 导入功能:**
+
+```python
+def import_sql(sql_file: str, db_config: dict) -> bool:
+    """导入 SQL 脚本到数据库"""
+```
+
+**更换前台轮播图片功能:**
+
+```python
+def get_random_images(bg_pic_folder: str, count: int = 3) -> list:
+    """从指定文件夹随机获取指定数量的图片文件"""
+    
+def copy_images_to_target(source_images: list, target_folder: str) -> bool:
+    """将源图片复制到目标文件夹并重命名为 swiperPicture1.jpg 等"""
+    
+def replace_swiper_images(project_path: str, desktop_path: str) -> str:
+    """
+    更换前台轮播图片
+    1. 从桌面 bg_pic 文件夹随机选择 3 张图片
+    2. 复制到项目 server/src/main/resources/static/file 目录
+    3. 重命名为 swiperPicture1.jpg、swiperPicture2.jpg、swiperPicture3.jpg
+    """
+```
+
+**更换后台登录背景图功能:**
+
+```python
+def update_login_vue_background(project_path: str) -> bool:
+    """
+    修改 login.vue 文件中的背景图片链接
+    1. 从预设图片列表中随机选择一张
+    2. 替换 front/manage_code/src/views/login.vue 中的 background: url()
+    """
+    
+# 预设后台登录背景图片列表
+LOGIN_BACKGROUND_IMAGES = [
+    "http://img.yidaima.cn/7-dcd4fc1e8d0144aaa064bc282d1af289",
+    "http://img.yidaima.cn/6-3db67e2e6ff64e018d48282638900a67",
+    "http://img.yidaima.cn/5-74ee6fe2f0954a8db2574e8f7fbb8ef2",
+    "http://img.yidaima.cn/4-a926593ba8c444a3984100e99ae322bb",
+    "http://img.yidaima.cn/3-f91e9a0ed55d45c9aff80a08f554c625",
+    "http://img.yidaima.cn/2-2bd41cdd57b54b529dc3a139e66233e0",
+    "http://img.yidaima.cn/1-5a0b7ee2344a46bd987c1cafff19b3ba",
+    "http://img.yidaima.cn/8-495b9767a2f34197b963a13226d3e1d2",
+    "http://img.yidaima.cn/10-991483f941914f3d85bf87a4f8748fee",
+    "http://img.yidaima.cn/11-d274f1d695f7472a8fcd2c8c6238a79e",
+    "http://img.yidaima.cn/14-0e30653336d849379060ad8c436fe512",
+    "http://img.yidaima.cn/16-7a58235a2a4040f99e3431c3cac9ea7a",
+    "http://img.yidaima.cn/17-3406a546b81c412d9e3501cdb0f88b12",
+    "http://img.yidaima.cn/18-0a2fae1d6634480dabf5471fa86b3623",
+    "http://img.yidaima.cn/19-107196938e074c92a40b62c60aed18a4"
+]
+```
+
+**截图功能:**
+
+```python
+def capture_screenshots(base_url: str, menu_selectors: list, output_dir: str) -> list:
+    """根据菜单进行截图"""
+```
+
+### 阶段 2: 配置管理扩展
+
+#### 2.1 更新 `config_loader.py`
+
+添加项目截图自动化相关配置：
+
+```yaml
+project_screenshot:
+  # 项目路径配置
+  project_path: ""
+  has_front: true  # 是否有前台前端
+  
+  # 脚本路径配置（相对项目路径或绝对路径）
+  scripts:
+    install_server: "run_install_server.bat"    # 后端 Maven 构建
+    install_front: "run_install_front.bat"      # 前台前端依赖安装
+    install_admin: "run_install_admin.bat"      # 后台前端依赖安装
+    run_server: "run_server.bat"                # 启动服务后端
+    run_front: "run_front.bat"                  # 启动前台前端
+    run_admin: "run_admin.bat"                  # 启动后台前端
+    run_sql: "run_sql.bat"                      # 导入 SQL 脚本
+  
+  # SQL 配置
+  sql:
+    script_path: "server/db/init.sql"  # SQL 脚本路径（相对项目路径）
+    
+  # 服务配置
+  services:
+    backend:
+      url: "http://localhost:8080"
+      health_endpoint: "/actuator/health"
+      startup_timeout: 120
+    front:
+      url: "http://localhost:8082"           # 前台前端地址
+      login_url: "http://localhost:8082/#/login"  # 前台登录页面
+      startup_timeout: 60
+    admin:
+      url: "http://localhost:8081"           # 后台前端地址
+      login_url: "http://localhost:8081/#/login"  # 后台登录页面
+      startup_timeout: 60
+  
+  # 登录配置
+  login:
+    admin:                                   # 后台登录配置
+      username: "admin"
+      password: "admin"
+      username_selector: "input[placeholder='请输入用户名'], input[name='username'], #username"
+      password_selector: "input[placeholder='请输入密码'], input[name='password'], #password, input[type='password']"
+      submit_selector: "button[type='submit'], .login-btn, .el-button--primary"
+    front:                                   # 前台登录配置
+      username: "2"
+      password: "123456"
+      username_selector: "input[placeholder='请输入用户名'], input[name='username'], #username"
+      password_selector: "input[placeholder='请输入密码'], input[name='password'], #password, input[type='password']"
+      submit_selector: "button[type='submit'], .login-btn, .el-button--primary"
+  
+  # 截图配置
+  screenshot:
+    output_dir: "./screenshots"
+    full_page: true
+    menu_selectors:  # 菜单识别选择器
+      admin: ".el-menu-item, .el-sub-menu__title"
+      front: ".nav-item, .menu-item"
+    delay: 2000  # 截图前等待时间(ms)
+  
+  # 轮播图片配置
+  swiper_images:
+    source_folder: "{desktop_path}/bg_pic"  # 图片来源文件夹（桌面 bg_pic）
+    target_subpath: "server/src/main/resources/static/file"  # 目标路径（相对于项目路径）
+    target_names:
+      - "swiperPicture1.jpg"
+      - "swiperPicture2.jpg"
+      - "swiperPicture3.jpg"
+    count: 3  # 随机选择的图片数量
+  
+  # 后台登录背景图配置
+  login_background:
+    vue_file_subpath: "front/manage_code/src/views/login.vue"  # login.vue 相对项目路径
+    images:  # 预设背景图片列表
+      - "http://img.yidaima.cn/7-dcd4fc1e8d0144aaa064bc282d1af289"
+      - "http://img.yidaima.cn/6-3db67e2e6ff64e018d48282638900a67"
+      - "http://img.yidaima.cn/5-74ee6fe2f0954a8db2574e8f7fbb8ef2"
+      - "http://img.yidaima.cn/4-a926593ba8c444a3984100e99ae322bb"
+      - "http://img.yidaima.cn/3-f91e9a0ed55d45c9aff80a08f554c625"
+      - "http://img.yidaima.cn/2-2bd41cdd57b54b529dc3a139e66233e0"
+      - "http://img.yidaima.cn/1-5a0b7ee2344a46bd987c1cafff19b3ba"
+      - "http://img.yidaima.cn/8-495b9767a2f34197b963a13226d3e1d2"
+      - "http://img.yidaima.cn/10-991483f941914f3d85bf87a4f8748fee"
+      - "http://img.yidaima.cn/11-d274f1d695f7472a8fcd2c8c6238a79e"
+      - "http://img.yidaima.cn/14-0e30653336d849379060ad8c436fe512"
+      - "http://img.yidaima.cn/16-7a58235a2a4040f99e3431c3cac9ea7a"
+      - "http://img.yidaima.cn/17-3406a546b81c412d9e3501cdb0f88b12"
+      - "http://img.yidaima.cn/18-0a2fae1d6634480dabf5471fa86b3623"
+      - "http://img.yidaima.cn/19-107196938e074c92a40b62c60aed18a4"
+```
+
+### 阶段 3: GUI 界面开发
+
+#### 3.1 在 `gui.py` 中添加新的 Tab
+
+创建 "项目截图" Tab，包含以下区域：
+
+**配置区域:**
+
+* 项目路径选择（文件夹浏览器）
+
+* 是否有前台前端复选框
+
+* 各脚本路径配置（可编辑，有默认值）
+
+* SQL 脚本路径配置
+
+**服务配置区域:**
+
+* 后端服务 URL 和端口
+
+* 前台前端 URL 和端口
+
+* 后台前端 URL 和端口
+
+**操作按钮区域:**
+
+1. **构建/安装按钮:**
+
+   * "Maven 构建后端" - 执行 run\_install\_server.bat
+
+   * "安装前台依赖" - 执行 run\_install\_front.bat
+
+   * "安装后台依赖" - 执行 run\_install\_admin.bat
+
+   * "导入 SQL" - 执行 run\_sql.bat
+
+2. **启动按钮:**
+
+   * "启动后端服务" - 执行 run\_server.bat
+
+   * "启动前台前端" - 执行 run\_front.bat
+
+   * "启动后台前端" - 执行 run\_admin.bat
+
+3. **截图按钮:**
+
+   * "后台截图" - 遍历后台菜单截图
+
+   * "前台截图" - 遍历前台菜单截图（如果有）
+
+   * "一键完整流程" - 按顺序执行所有步骤
+
+**日志输出区域:**
+
+* 显示执行日志
+
+* 进度条显示当前步骤
+
+### 阶段 4: 流程实现
+
+#### 4.1 完整流程执行顺序
+
+根据八爪鱼流程图，实现以下执行顺序：
+
+```
+1. 初始化变量
+   - 加载项目配置
+   - 检查必要文件是否存在
+
+2. 准备工作
+   - 检查项目路径
+   - 验证脚本文件存在
+   - 创建截图输出目录
+
+3. 导入 SQL
+   - 执行 run_sql.bat
+   - 或使用 Python 直接执行 SQL 文件
+
+4. 更换图片
+   - **更换前台轮播图片**：
+     - 从桌面 bg_pic 文件夹随机选择 3 张图片
+     - 复制到项目 server/src/main/resources/static/file 目录
+     - 重命名为 swiperPicture1.jpg、swiperPicture2.jpg、swiperPicture3.jpg
+   - **更换后台登录背景图**：
+     - 修改 front/manage_code/src/views/login.vue 文件
+     - 从预设图片列表中随机选择一张背景图
+     - 替换 CSS 中的 background: url() 属性
+
+5. 前端依赖 install
+   - 执行 run_install_front.bat（如果有前台）
+   - 执行 run_install_admin.bat
+
+6. 启动后端服务
+   - 执行 run_server.bat
+   - 等待服务健康检查通过
+
+7. 启动前端服务
+   - 执行 run_front.bat（如果有前台）
+   - 执行 run_admin.bat
+   - 等待服务启动
+
+8. 打开后台网页并登录
+   - 使用 Playwright 打开后台登录页面 http://localhost:8081/#/login
+   - 输入用户名 admin，密码 admin
+   - 点击登录按钮
+   - 等待登录成功跳转
+
+9. 后台网页截图
+   - 登录成功后访问 http://localhost:8081
+   - 识别菜单项
+   - 遍历每个菜单进行截图
+
+10. 前台网页截图（如果有前台）
+    - 打开前台登录页面 http://localhost:8082/#/login
+    - 输入用户名 2，密码 123456
+    - 点击登录按钮
+    - 登录成功后访问 http://localhost:8082
+    - 识别菜单项
+    - 遍历每个菜单进行截图
+
+11. 收尾工作
+    - 关闭浏览器
+    - 停止服务（可选）
+    - 生成截图报告
+```
+
+### 阶段 5: 截图功能实现
+
+#### 5.1 菜单识别和截图
+
+```python
+class ScreenshotCapture:
+    def __init__(self, browser, output_dir: str):
+        self.browser = browser
+        self.output_dir = output_dir
+        
+    async def login(self, login_url: str, username: str, password: str, 
+                    username_selector: str, password_selector: str, submit_selector: str):
+        """
+        执行登录操作
+        1. 打开登录页面
+        2. 输入用户名和密码
+        3. 点击登录按钮
+        4. 等待登录成功
+        """
+        
+    async def capture_menu_screenshots(self, base_url: str, menu_selector: str):
+        """
+        1. 访问基础页面（已登录状态）
+        2. 识别所有菜单项
+        3. 点击每个菜单并截图
+        4. 保存到输出目录
+        """
+        
+    async def capture_full_page(self, url: str, filename: str):
+        """截取整页截图"""
+```
+
+### 阶段 6: 测试和验证
+
+#### 6.1 功能测试
+
+* [ ] 单个 bat 脚本执行测试
+
+* [ ] SQL 导入功能测试
+
+* [ ] 服务启动和等待测试
+
+* [ ] 菜单识别和截图测试
+
+* [ ] 完整流程测试
+
+#### 6.2 边界情况处理
+
+* 项目没有前台前端的情况
+
+* 服务启动超时处理
+
+* 菜单识别失败处理
+
+* 截图保存失败处理
+
+## 文件结构
+
+```
+yidaima/
+├── gui.py                          # 主 GUI（添加项目截图 Tab）
+├── config_loader.py                # 配置加载器（扩展）
+├── project_screenshot.py           # 项目截图自动化核心模块（新增）
+├── core/
+│   └── browser.py                  # 浏览器控制（扩展 Playwright）
+└── utils/
+    └── screenshot.py               # 截图工具（扩展）
+```
+
+## 依赖项
+
+需要添加的依赖：
+
+```
+playwright>=1.40.0
+```
+
+安装命令：
+
+```bash
+pip install playwright
+playwright install chromium
+```
+
+## 实施顺序
+
+1. **创建** **`project_screenshot.py`** - 核心自动化模块
+2. **扩展** **`config_loader.py`** - 添加项目截图配置
+3. **扩展** **`gui.py`** - 添加项目截图 Tab
+4. **测试验证** - 完整流程测试
+5. **打包发布** - PyInstaller 打包 exe
+
+## 注意事项
+
+1. **服务进程管理**: 启动的服务进程需要在适当的时候关闭
+2. **端口占用检查**: 启动服务前检查端口是否被占用
+3. **超时处理**: 每个步骤都需要有合理的超时时间
+4. **错误恢复**: 某一步失败时能够优雅地停止并报告
+5. **并发安全**: 避免同时执行多个自动化流程
+