all

tests/e2e/canvas-editor.spec.ts

@@ -0,0 +1,181 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * DCS 编辑器 - 画布编辑器核心功能测试
+ *
+ * 测试画布页面管理、侧边栏标签切换、组件面板等核心交互。
+ * 每个测试独立运行，通过创建画布进入编辑器。
+ */
+
+/** 辅助函数：创建画布并进入编辑器 */
+async function enterEditor(page: import('@playwright/test').Page, canvasName = '测试画布') {
+  await page.goto('/')
+  await page.waitForLoadState('networkidle')
+  await page.locator('.add-card').click()
+  const dialog = page.locator('.el-dialog')
+  await expect(dialog).toBeVisible({ timeout: 5000 })
+  await dialog.locator('input').first().fill(canvasName)
+  await dialog.locator('button').filter({ hasText: '创建' }).click()
+  await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+}
+
+test.describe('画布编辑器核心功能', () => {
+  test('编辑器加载后显示画布舞台', async ({ page }) => {
+    await enterEditor(page, '画布加载测试')
+
+    // 画布舞台（wrapper）应该可见
+    await expect(page.locator('.canvas-wrapper')).toBeVisible()
+    // 画布内 canvas 元素应存在
+    await expect(page.locator('.canvas-wrapper canvas')).toBeVisible()
+    // 标尺应该可见
+    await expect(page.locator('.ruler-top')).toBeVisible()
+    await expect(page.locator('.ruler-left')).toBeVisible()
+  })
+
+  test('侧边栏标签 - 默认显示图层面板', async ({ page }) => {
+    await enterEditor(page, '侧边栏标签测试')
+
+    // 默认激活的标签应该是"图层"
+    const activeTab = page.locator('.sidebar-tab-item.active')
+    await expect(activeTab).toContainText('图层')
+
+    // 图层面板区域应该可见
+    await expect(page.locator('.layers-tab')).toBeVisible()
+  })
+
+  test('侧边栏标签 - 切换到组件面板', async ({ page }) => {
+    await enterEditor(page, '组件面板测试')
+
+    // 点击"组件"标签
+    await page.locator('.sidebar-tab-item').filter({ hasText: '组件' }).click()
+
+    // 组件标签应变为激活状态
+    const activeTab = page.locator('.sidebar-tab-item.active')
+    await expect(activeTab).toContainText('组件')
+
+    // 组件面板应该可见，且包含提示文字
+    await expect(page.locator('.components-tab')).toBeVisible()
+    await expect(page.locator('.components-hint')).toContainText('拖拽添加到画布')
+  })
+
+  test('侧边栏标签 - 切换到模板面板', async ({ page }) => {
+    await enterEditor(page, '模板面板测试')
+
+    // 点击"模板"标签
+    await page.locator('.sidebar-tab-item').filter({ hasText: '模板' }).click()
+
+    // 模板标签应变为激活状态
+    const activeTab = page.locator('.sidebar-tab-item.active')
+    await expect(activeTab).toContainText('模板')
+  })
+
+  test('侧边栏标签 - 可以依次切换回图层面板', async ({ page }) => {
+    await enterEditor(page, '标签回切测试')
+
+    // 先切到组件
+    await page.locator('.sidebar-tab-item').filter({ hasText: '组件' }).click()
+    await expect(page.locator('.sidebar-tab-item.active')).toContainText('组件')
+
+    // 再切回图层
+    await page.locator('.sidebar-tab-item').filter({ hasText: '图层' }).click()
+    await expect(page.locator('.sidebar-tab-item.active')).toContainText('图层')
+    await expect(page.locator('.layers-tab')).toBeVisible()
+  })
+
+  test('组件面板显示所有可用组件', async ({ page }) => {
+    await enterEditor(page, '组件列表测试')
+
+    // 切换到组件面板
+    await page.locator('.sidebar-tab-item').filter({ hasText: '组件' }).click()
+    await expect(page.locator('.components-tab')).toBeVisible()
+
+    // 验证组件卡片数量（constants.ts 定义了 5 个：矩形、数值、文本、棒图、按钮）
+    const cards = page.locator('.component-card')
+    await expect(cards).toHaveCount(5)
+
+    // 验证各组件名称
+    await expect(page.locator('.card-title').filter({ hasText: '矩形' })).toBeVisible()
+    await expect(page.locator('.card-title').filter({ hasText: '数值' })).toBeVisible()
+    await expect(page.locator('.card-title').filter({ hasText: '文本' })).toBeVisible()
+    await expect(page.locator('.card-title').filter({ hasText: '棒图' })).toBeVisible()
+    await expect(page.locator('.card-title').filter({ hasText: '按钮' })).toBeVisible()
+  })
+
+  test('图层面板显示页面列表和画布页数', async ({ page }) => {
+    await enterEditor(page, '页面列表测试')
+
+    // 图层面板应可见
+    await expect(page.locator('.layers-tab')).toBeVisible()
+
+    // 页面头部应显示页数
+    await expect(page.locator('.page-header')).toContainText('页数')
+
+    // 页面列表应至少有一个活动页面
+    const activePage = page.locator('.page-row.active')
+    await expect(activePage).toBeVisible()
+  })
+
+  test('点击画布背景可以取消图层选中', async ({ page }) => {
+    await enterEditor(page, '取消选中测试')
+
+    // 点击画布背景区域
+    await page.locator('.canvas-wrapper').click({ position: { x: 50, y: 50 } })
+
+    // 状态栏不应显示选中信息（没有选中任何图层时不会显示"已选中"）
+    await expect(page.locator('.editor-status-bar .status-right')).not.toContainText('已选中')
+  })
+
+  test('撤销按钮初始状态为禁用', async ({ page }) => {
+    await enterEditor(page, '撤销状态测试')
+
+    // 撤销按钮初始应该是禁用的（没有操作历史）
+    const undoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-left') })
+    await expect(undoBtn).toBeDisabled()
+
+    // 重做按钮初始也应该是禁用的
+    const redoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-right') })
+    await expect(redoBtn).toBeDisabled()
+  })
+
+  test('头部包含分享和运行按钮', async ({ page }) => {
+    await enterEditor(page, '头部按钮测试')
+
+    // 分享按钮
+    await expect(page.locator('.share-btn')).toBeVisible()
+    await expect(page.locator('.share-btn')).toContainText('分享')
+
+    // 运行组合按钮
+    await expect(page.locator('.run-combo-btn')).toBeVisible()
+    await expect(page.locator('.run-main-btn')).toBeVisible()
+  })
+
+  test('工具栏显示工具按钮', async ({ page }) => {
+    await enterEditor(page, '工具栏测试')
+
+    // 工具栏应可见
+    await expect(page.locator('.tool-rail')).toBeVisible()
+
+    // 工具按钮应存在（至少有移动工具、文本工具、矩形工具 + 底部折叠按钮）
+    const toolButtons = page.locator('.tool-rail .tool-btn')
+    const count = await toolButtons.count()
+    expect(count).toBeGreaterThanOrEqual(3)
+  })
+
+  test('侧边栏可以折叠和展开', async ({ page }) => {
+    await enterEditor(page, '折叠展开测试')
+
+    // 确认侧边栏面板初始可见
+    await expect(page.locator('.editor-sidebar-panel')).toBeVisible()
+
+    // 点击折叠按钮（工具栏底部的按钮，有 fa-angles-left 图标）
+    const collapseBtn = page.locator('.tool-bottom .tool-btn')
+    await collapseBtn.click()
+
+    // 侧边栏应添加 is-collapsed 类
+    await expect(page.locator('.editor-sidebar-shell.is-collapsed')).toBeVisible()
+
+    // 再次点击展开
+    await collapseBtn.click()
+    await expect(page.locator('.editor-sidebar-shell:not(.is-collapsed)')).toBeVisible()
+  })
+})

tests/e2e/layer-operations.spec.ts

@@ -0,0 +1,223 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * DCS 编辑器 - 图层操作测试
+ *
+ * 测试图层的添加、选择、删除等操作。
+ * 部分测试（如拖拽添加组件）因 Playwright 对 HTML5 drag-and-drop 的限制
+ * 而标记为 skip，仅验证可测试的交互路径。
+ */
+
+/** 辅助函数：创建画布并进入编辑器 */
+async function enterEditor(page: import('@playwright/test').Page, canvasName = '图层测试画布') {
+  await page.goto('/')
+  await page.waitForLoadState('networkidle')
+  await page.locator('.add-card').click()
+  const dialog = page.locator('.el-dialog')
+  await expect(dialog).toBeVisible({ timeout: 5000 })
+  await dialog.locator('input').first().fill(canvasName)
+  await dialog.locator('button').filter({ hasText: '创建' }).click()
+  await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+}
+
+/** 辅助函数：获取图层面板中的图层行数量 */
+async function getLayerRowCount(page: import('@playwright/test').Page): Promise<number> {
+  return page.locator('.layer-list .layer-row').count()
+}
+
+test.describe('图层管理', () => {
+  test.skip('通过拖拽添加组件到画布', async ({ page }) => {
+    // 跳过：HTML5 drag-and-drop 在 Playwright 中较难模拟，
+    // 且应用在 Tauri 环境还使用了 pointer 方案替代。
+    await enterEditor(page, '拖拽添加测试')
+
+    // 切换到组件面板
+    await page.locator('.sidebar-tab-item').filter({ hasText: '组件' }).click()
+    await expect(page.locator('.components-tab')).toBeVisible()
+
+    // 获取矩形组件卡片和画布舞台区域
+    const rectCard = page.locator('.component-card').first()
+    const canvas = page.locator('.canvas-wrapper')
+
+    // 尝试拖拽（此操作可能不可靠）
+    await rectCard.dragTo(canvas, {
+      targetPosition: { x: 300, y: 300 },
+    })
+
+    // 验证图层面板中出现新图层
+    await page.locator('.sidebar-tab-item').filter({ hasText: '图层' }).click()
+    const layerCount = await getLayerRowCount(page)
+    expect(layerCount).toBeGreaterThan(0)
+  })
+
+  test('初始状态下图层面板为空', async ({ page }) => {
+    await enterEditor(page, '空图层面板测试')
+
+    // 确认图层面板可见
+    await expect(page.locator('.layers-tab')).toBeVisible()
+
+    // 新画布应该没有图层
+    const layerCount = await getLayerRowCount(page)
+    expect(layerCount).toBe(0)
+  })
+
+  test('属性面板初始显示空状态或底图信息', async ({ page }) => {
+    await enterEditor(page, '属性面板初始测试')
+
+    // 属性面板头部应该可见且显示"属性"标题
+    const propertyTitle = page.locator('.property-panel .title')
+    await expect(propertyTitle).toContainText('属性')
+
+    // 没有选中图层时，应显示提示文字
+    const summaryOrEmpty = page.locator('.property-panel .selection-summary, .property-panel .property-empty')
+    await expect(summaryOrEmpty.first()).toBeVisible()
+  })
+
+  test('属性面板有停靠/浮动切换按钮', async ({ page }) => {
+    await enterEditor(page, '停靠切换测试')
+
+    // 停靠/浮动切换按钮应存在
+    const dockBtn = page.locator('.dock-toggle-btn')
+    await expect(dockBtn).toBeVisible()
+
+    // 点击切换到浮动模式
+    await dockBtn.click()
+    await expect(page.locator('.property-panel-shell--floating')).toBeVisible()
+
+    // 再次点击切换回停靠模式
+    await page.locator('.dock-toggle-btn').click()
+    await expect(page.locator('.property-panel-shell:not(.property-panel-shell--floating)')).toBeVisible()
+  })
+
+  test('图层面板显示页面列表', async ({ page }) => {
+    await enterEditor(page, '页面列表验证测试')
+
+    // 页面树区域应显示至少一个页面
+    const pageRows = page.locator('.page-tree .page-row')
+    await expect(pageRows.first()).toBeVisible()
+
+    // 第一个页面应处于激活状态
+    await expect(page.locator('.page-row.active')).toBeVisible()
+  })
+
+  test('图层面板有添加页面按钮', async ({ page }) => {
+    await enterEditor(page, '添加页面按钮测试')
+
+    // 页面头部的添加按钮应存在（fa-plus 图标）
+    const addPageBtn = page.locator('.page-header').locator('button').filter({
+      has: page.locator('.fa-plus'),
+    })
+    await expect(addPageBtn).toBeVisible()
+  })
+
+  test('图层面板有搜索框', async ({ page }) => {
+    await enterEditor(page, '图层搜索测试')
+
+    // 搜索行应包含输入框
+    const searchInput = page.locator('.layer-search-row input')
+    await expect(searchInput).toBeVisible()
+  })
+
+  test('状态栏无选中时不显示选中计数', async ({ page }) => {
+    await enterEditor(page, '状态栏选中计数测试')
+
+    // 没有选中图层时，状态栏右侧不应显示"已选中"
+    await expect(page.locator('.editor-status-bar .status-right')).not.toContainText('已选中')
+  })
+
+  test('缩放信息显示在状态栏中', async ({ page }) => {
+    await enterEditor(page, '状态栏缩放测试')
+
+    // 状态栏应显示缩放百分比（如"100%"）
+    const statusItems = page.locator('.editor-status-bar .status-item')
+    let foundZoom = false
+    const count = await statusItems.count()
+    for (let i = 0; i < count; i++) {
+      const text = await statusItems.nth(i).textContent()
+      if (text && text.includes('%')) {
+        foundZoom = true
+        break
+      }
+    }
+    expect(foundZoom).toBe(true)
+  })
+
+  test('画布舞台有标尺', async ({ page }) => {
+    await enterEditor(page, '标尺测试')
+
+    // 水平标尺
+    await expect(page.locator('.ruler-top')).toBeVisible()
+    // 垂直标尺
+    await expect(page.locator('.ruler-left')).toBeVisible()
+    // 标尺角落
+    await expect(page.locator('.ruler-corner')).toBeVisible()
+  })
+
+  test.skip('选中图层后属性面板显示属性', async ({ page }) => {
+    // 跳过：需要先有图层才能选中，添加图层依赖拖拽操作
+    await enterEditor(page, '选中属性测试')
+
+    // 预期：选中图层后，属性面板标题下方应显示图层信息
+    const propertyBody = page.locator('.property-panel .property-body')
+    await expect(propertyBody).toBeVisible()
+  })
+
+  test.skip('可以删除选中的图层', async ({ page }) => {
+    // 跳过：需要先有可选中的图层（添加图层依赖拖拽操作）
+    await enterEditor(page, '删除图层测试')
+
+    // 预期：选中图层后按 Delete/Backspace 可删除
+    // 或通过右键菜单删除
+  })
+
+  test.skip('删除图层后可撤销', async ({ page }) => {
+    // 跳过：依赖先添加并删除图层
+    await enterEditor(page, '撤销删除测试')
+
+    // 预期：删除图层后，撤销按钮变为可用，点击撤销可恢复图层
+  })
+
+  test('图层面板页面列表可以折叠和展开', async ({ page }) => {
+    await enterEditor(page, '页面折叠测试')
+
+    // 页面树应该初始可见
+    await expect(page.locator('.page-tree')).toBeVisible()
+
+    // 点击折叠/展开按钮（page-header 中的角标按钮）
+    const toggleBtn = page.locator('.page-header .header-actions button').filter({
+      has: page.locator('.fa-angle-up, .fa-angle-down'),
+    })
+    await toggleBtn.click()
+
+    // 页面树应该被隐藏（v-show 控制，元素仍在 DOM 中但不可见）
+    await expect(page.locator('.page-tree')).toBeHidden()
+
+    // 再次点击展开
+    await toggleBtn.click()
+    await expect(page.locator('.page-tree')).toBeVisible()
+  })
+
+  test('画布舞台 overlay 层存在', async ({ page }) => {
+    await enterEditor(page, 'Overlay 测试')
+
+    // overlay 是放置图层选择框等交互元素的层
+    await expect(page.locator('.canvas-wrapper .overlay')).toBeAttached()
+  })
+
+  test('组件面板中的组件卡片显示描述信息', async ({ page }) => {
+    await enterEditor(page, '组件描述测试')
+
+    // 切换到组件面板
+    await page.locator('.sidebar-tab-item').filter({ hasText: '组件' }).click()
+    await expect(page.locator('.components-tab')).toBeVisible()
+
+    // 每个组件卡片应该有标题和描述
+    const firstCard = page.locator('.component-card').first()
+    await expect(firstCard.locator('.card-title')).toBeVisible()
+    await expect(firstCard.locator('.card-desc')).toBeVisible()
+
+    // 验证具体描述内容（矩形：基础矩形图层）
+    const rectDesc = page.locator('.component-card').filter({ hasText: '矩形' }).locator('.card-desc')
+    await expect(rectDesc).toContainText('基础矩形图层')
+  })
+})

tests/e2e/navigation.spec.ts

@@ -0,0 +1,138 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * DCS 编辑器 - 基础导航测试
+ *
+ * 应用使用 Hash 路由（createWebHashHistory('/dcs-web')），
+ * 首次访问 Web 端默认跳转到 /canvases 画布列表页。
+ */
+
+test.describe('基础导航', () => {
+  test('应用加载无错误', async ({ page }) => {
+    const errors: string[] = []
+    page.on('pageerror', (err) => {
+      errors.push(err.message)
+    })
+
+    await page.goto('/')
+    // 等待应用框架渲染完毕（路由守卫会重定向到 canvases 或 editor）
+    await page.waitForLoadState('networkidle')
+
+    // 不应产生未捕获的 JS 异常
+    expect(errors).toEqual([])
+  })
+
+  test('可以导航到画布列表页', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // Web 模式下默认重定向到画布列表
+    await expect(page.locator('.canvases-page')).toBeVisible({ timeout: 10000 })
+    // 页面标题区域应包含 "DCS图"
+    await expect(page.locator('.page-title')).toContainText('DCS图')
+    // 应有"添加DCS图"卡片
+    await expect(page.locator('.add-card')).toBeVisible()
+  })
+
+  test('可以导航到编辑器页面', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 通过"添加DCS图"创建一个画布并进入编辑器
+    await page.locator('.add-card').click()
+    // 等待创建对话框出现
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // 填写画布名称
+    await dialog.locator('input').first().fill('测试画布')
+    // 点击创建按钮
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+
+    // 等待跳转到编辑器页面
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+  })
+
+  test('编辑器包含侧边栏、画布舞台和属性面板', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 先创建画布进入编辑器
+    await page.locator('.add-card').click()
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await dialog.locator('input').first().fill('结构测试画布')
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+
+    // 验证编辑器三大区域
+    // 1. 侧边栏（工具栏 + 面板）
+    await expect(page.locator('.editor-sidebar-shell')).toBeVisible()
+    await expect(page.locator('.tool-rail')).toBeVisible()
+
+    // 2. 画布舞台
+    await expect(page.locator('.canvas-wrapper')).toBeVisible()
+
+    // 3. 属性面板
+    await expect(page.locator('.property-panel-shell')).toBeVisible()
+  })
+
+  test('编辑器头部可见且包含撤销重做按钮', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 创建画布进入编辑器
+    await page.locator('.add-card').click()
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await dialog.locator('input').first().fill('头部测试画布')
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+
+    // 编辑器头部
+    await expect(page.locator('.editor-header')).toBeVisible()
+
+    // 撤销按钮（fa-rotate-left 图标）
+    const undoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-left') })
+    await expect(undoBtn).toBeVisible()
+
+    // 重做按钮（fa-rotate-right 图标）
+    const redoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-right') })
+    await expect(redoBtn).toBeVisible()
+  })
+
+  test('状态栏在编辑器中可见', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 创建画布进入编辑器
+    await page.locator('.add-card').click()
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await dialog.locator('input').first().fill('状态栏测试画布')
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+
+    // 状态栏
+    await expect(page.locator('.editor-status-bar')).toBeVisible()
+    // 状态栏应显示缩放百分比
+    await expect(page.locator('.editor-status-bar .status-item')).toContainText(['%'])
+  })
+
+  test('可以通过头部 "DCS编辑器" 按钮返回画布列表', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // 先进入编辑器
+    await page.locator('.add-card').click()
+    const dialog = page.locator('.el-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await dialog.locator('input').first().fill('返回测试画布')
+    await dialog.locator('button').filter({ hasText: '创建' }).click()
+    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
+
+    // 点击 "DCS编辑器" 返回画布列表
+    await page.locator('.scope-btn').click()
+    await expect(page.locator('.canvases-page')).toBeVisible({ timeout: 10000 })
+  })
+})