fix: FilePreview fileType case + Tailwind v4 gradient transparent bug

- FilePreview.vue: add normalizedFileType computed to handle backend returning uppercase HTML/MD/PPTX (fixes preview/download buttons) - FilePreview.vue: bg-gradient-to-r from-orange-500 -> bg-orange-500 (Tailwind v4 gradient + CSS variable = transparent) - ReportCard.vue: bg-gradient-to-r -> bg-orange-600 for selected state - Add .opencode/, node_modules/, dist/ to .gitignore - Initial git setup for publish project
2026-05-24 20:09:42 +08:00
commit b9137204a0
78 changed files with 12950 additions and 0 deletions
@@ -0,0 +1,121 @@
+import { test, expect } from '@playwright/test'
+
+/**
+ * Report View E2E Tests (New UI)
+ * Tests report viewing, rendering, and download functionality
+ */
+test.describe('Report View (New UI)', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/project/1')
+    await page.waitForLoadState('networkidle')
+    // Wait for content to render
+    await page.waitForTimeout(1000)
+  })
+
+  test('should render HTML content in iframe preview', async ({ page }) => {
+    // Wait for project to load
+    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })
+
+    // Click on HTML report
+    await page.click('text=2026-05-22 日报.html')
+
+    // Wait for iframe to be visible
+    const iframe = page.locator('iframe[srcdoc]')
+    await expect(iframe).toBeVisible({ timeout: 10000 })
+  })
+
+  test('should render Markdown content with proper formatting', async ({ page }) => {
+    // Wait for project to load
+    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })
+
+    // Click on MD report
+    await page.click('text=2026-05-21 日报.md')
+
+    // Verify markdown is rendered (not raw markdown)
+    // The header should be rendered as h1
+    const header = page.locator('h1:has-text("日报标题")')
+    await expect(header).toBeVisible({ timeout: 10000 })
+  })
+
+  test('should show download button for PPTX reports', async ({ page }) => {
+    // Wait for project to load
+    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })
+
+    // Click on PPTX report
+    await page.click('text=2026-05-20 周报.pptx')
+
+    // Verify download button is visible (new UI has single download button for all types)
+    const downloadBtn = page.locator('button:has-text("下载")')
+    await expect(downloadBtn).toBeVisible({ timeout: 10000 })
+  })
+
+  test('should show report name in preview header when report is selected', async ({ page }) => {
+    // Wait for project to load
+    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })
+
+    // Click on HTML report
+    await page.click('text=2026-05-22 日报.html')
+
+    // Verify report name appears in preview header
+    await expect(page.locator('h3:has-text("2026-05-22 日报.html")').first()).toBeVisible({ timeout: 10000 })
+  })
+
+  test('should show report date and size in preview header', async ({ page }) => {
+    // Wait for project to load
+    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })
+
+    // Click on HTML report
+    await page.click('text=2026-05-22 日报.html')
+
+    // Verify date and size appear
+    await expect(page.locator('text=2026-05-22').first()).toBeVisible({ timeout: 5000 })
+    await expect(page.locator('text=15KB').first()).toBeVisible({ timeout: 5000 })
+  })
+
+  test('should have download button for all report types', async ({ page }) => {
+    // Wait for project to load
+    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })
+
+    // Click on HTML report
+    await page.click('text=2026-05-22 日报.html')
+    await expect(page.locator('button:has-text("下载")').first()).toBeVisible({ timeout: 5000 })
+
+    // Click on MD report
+    await page.click('text=2026-05-21 日报.md')
+    await expect(page.locator('button:has-text("下载")').first()).toBeVisible({ timeout: 5000 })
+
+    // Click on PPTX report
+    await page.click('text=2026-05-20 周报.pptx')
+    await expect(page.locator('button:has-text("下载")').first()).toBeVisible({ timeout: 5000 })
+  })
+
+  test('should navigate between reports smoothly', async ({ page }) => {
+    // Wait for project to load
+    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })
+
+    // Select first report
+    await page.click('text=2026-05-22 日报.html')
+    await expect(page.locator('h3:has-text("2026-05-22 日报.html")').first()).toBeVisible({ timeout: 5000 })
+
+    // Select second report
+    await page.click('text=2026-05-21 日报.md')
+    await expect(page.locator('h3:has-text("2026-05-21 日报.md")').first()).toBeVisible({ timeout: 5000 })
+
+    // Select third report
+    await page.click('text=2026-05-20 周报.pptx')
+    await expect(page.locator('h3:has-text("2026-05-20 周报.pptx")').first()).toBeVisible({ timeout: 5000 })
+  })
+
+  test('should show empty state for non-existent project', async ({ page }) => {
+    // Navigate to project with no reports (project ID 999 - mock data returns empty)
+    await page.goto('/project/999')
+    await page.waitForLoadState('networkidle')
+
+    // Should show the project detail page with "项目 999" header
+    await expect(page.locator('h2:has-text("项目 999")')).toBeVisible({ timeout: 15000 })
+    // With no reports, should show empty state in list
+    await expect(page.locator('text=暂无报告').first()).toBeVisible({ timeout: 5000 })
+    // Should show empty state in preview
+    await expect(page.locator('text=选择一份报告以预览')).toBeVisible({ timeout: 5000 })
+  })
+})