Web App Builder v3 — 技术规范速查

Web App Builder v3 — 技术规范速查

固定技术栈

层	技术	版本	端口
后端	Spring Boot	3.x	8080
语言	Java	17+	-
数据库	SQLite	3.45+	文件
ORM	Spring Data JPA + Hibernate	-	-
前端	React + Vite	18 + 5	3000
测试	Playwright	1.44+	-

禁止引入的依赖

后端：mysql-connector、spring-data-redis、mongodb、rabbitmq、kafka、minio

前端：antd、@mui、bootstrap、redux、zustand、mobx

application.yml 模板

spring:
  datasource:
    url: jdbc:sqlite:./data/app.db
    driver-class-name: org.sqlite.JDBC
  jpa:
    database-platform: org.hibernate.community.dialect.SQLiteDialect
    hibernate:
      ddl-auto: update
    show-sql: false
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher
server:
  port: 8080

pom.xml 核心依赖

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.2.0</version>
</parent>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
    <dependency>
        <groupId>org.xerial</groupId>
        <artifactId>sqlite-jdbc</artifactId>
        <version>3.45.1.0</version>
    </dependency>
    <dependency>
        <groupId>org.hibernate.orm</groupId>
        <artifactId>hibernate-community-dialects</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

data-testid 命名规范

元素	规范	示例
列表容器	{resource}-list	todo-list
列表项	{resource}-item-{id}	todo-item-1
创建按钮	create-{resource}-btn	create-todo-btn
编辑按钮	edit-{resource}-btn-{id}	edit-todo-btn-1
删除按钮	delete-{resource}-btn-{id}	delete-todo-btn-1
提交按钮	submit-btn	submit-btn
取消按钮	cancel-btn	cancel-btn
输入框	{field}-input	title-input
表单	{resource}-form	todo-form
错误提示	error-message	error-message
成功提示	success-message	success-message
加载状态	loading-indicator	loading-indicator
空状态	empty-state	empty-state

build-state.json 阶段值

INIT → PLANNING → ARCHITECTURE → DECOMPOSE → DEVELOPING → DONE

Sprint status 值

PENDING → IN_PROGRESS → ACCEPTED（或失败后回到 PENDING）

Playwright 测试结构模板

import { test, expect } from '@playwright/test'

const BASE = 'http://localhost:3000'
const API  = 'http://localhost:8080'

test.describe('Sprint N: Sprint名称', () => {
  test.describe('F001: 功能描述', () => {
    test('页面元素存在', async ({ page }) => {
      await page.goto(BASE)
      await expect(page.locator('[data-testid="xxx"]')).toBeVisible()
    })
    test('接口返回正确', async ({ request }) => {
      const res = await request.get(`${API}/api/xxx`)
      const body = await res.json()
      expect(body.code).toBe(0)
    })
    test('表单操作流程', async ({ page }) => {
      await page.goto(BASE)
      await page.click('[data-testid="create-xxx-btn"]')
      await page.fill('[data-testid="title-input"]', '测试')
      await page.click('[data-testid="submit-btn"]')
      await expect(page.locator('[data-testid="success-message"]')).toBeVisible()
    })
    test('错误处理', async ({ page }) => {
      await page.goto(BASE)
      await page.click('[data-testid="create-xxx-btn"]')
      await page.click('[data-testid="submit-btn"]')  // 空提交
      await expect(page.locator('[data-testid="error-message"]')).toBeVisible()
    })
  })
})