yidaima_tools/.trae/documents/project-screenshot-automation-plan.md

# 项目截图自动化功能实施计划

## 需求分析

根据用户提供的八爪鱼 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. **并发安全**: 避免同时执行多个自动化流程