Fix ButtonGroup click handling and add Playwright validation

Vue3/src/components/navigation/ButtonGroup.vue

@@ -1,18 +1,46 @@
 <script setup>
+import { ref } from 'vue'
+
+const activeHorizontal = ref(null)
+const activeVertical = ref(null)
 </script>
 
 <template>
   <div>
     <div class="btn-group">
-      <button class="btn small">左</button>
-      <button class="btn small">中</button>
-      <button class="btn small">右</button>
+      <button 
+        class="btn small" 
+        :class="{ active: activeHorizontal === 'left' }"
+        @click="activeHorizontal = 'left'"
+      >左</button>
+      <button 
+        class="btn small" 
+        :class="{ active: activeHorizontal === 'center' }"
+        @click="activeHorizontal = 'center'"
+      >中</button>
+      <button 
+        class="btn small" 
+        :class="{ active: activeHorizontal === 'right' }"
+        @click="activeHorizontal = 'right'"
+      >右</button>
     </div>
     <br><br>
     <div class="btn-group vertical">
-      <button class="btn small">顶部</button>
-      <button class="btn small">中间</button>
-      <button class="btn small">底部</button>
+      <button 
+        class="btn small" 
+        :class="{ active: activeVertical === 'top' }"
+        @click="activeVertical = 'top'"
+      >顶部</button>
+      <button 
+        class="btn small" 
+        :class="{ active: activeVertical === 'middle' }"
+        @click="activeVertical = 'middle'"
+      >中间</button>
+      <button 
+        class="btn small" 
+        :class="{ active: activeVertical === 'bottom' }"
+        @click="activeVertical = 'bottom'"
+      >底部</button>
     </div>
   </div>
 </template>

playwright.config.js

@@ -9,7 +9,7 @@ module.exports = defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
   use: {
-    baseURL: 'http://localhost:8080/myfrontend',
+    baseURL: 'http://localhost:5173/myfrontend/',
     trace: 'on-first-retry',
     screenshot: 'on',
   },
@@ -22,8 +22,9 @@ module.exports = defineConfig({
   ],
 
   webServer: {
-    command: 'npx http-server Vue3/dist -p 8080',
-    url: 'http://localhost:8080/myfrontend',
+    command: 'npm run dev',
+    cwd: './Vue3',
+    url: 'http://localhost:5173/myfrontend/',
     reuseExistingServer: !process.env.CI,
     timeout: 120 * 1000,
   },

tests/quick-validation.spec.js

@@ -132,4 +132,70 @@ test.describe('Quick Validation Tests', () => {
     await expect(page.locator('.chart-title').nth(2)).toContainText('饼图', { timeout: 5000 });
     console.log('✓ All chart titles are correct');
   });
+
+  test('should handle button group clicks and active states', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle', { timeout: 10000 });
+
+    // Navigate to Form page where button groups are displayed
+    await page.click('text=表单页');
+    await page.waitForTimeout(1000);
+    await expect(page.locator('h1.title')).toContainText('控件展示', { timeout: 5000 });
+
+    // Test horizontal button group
+    console.log('Testing horizontal button group:');
+
+    // Initially no button should be active
+    await expect(page.locator('.btn-group:not(.vertical) .btn.active')).toHaveCount(0);
+    console.log('✓ No buttons active initially (horizontal group)');
+
+    // Click left button
+    await page.locator('.btn-group:not(.vertical) .btn:has-text("左")').click();
+    await page.waitForTimeout(500);
+    await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("左")')).toHaveClass(/active/);
+    console.log('✓ Left button activated');
+
+    // Click center button
+    await page.locator('.btn-group:not(.vertical) .btn:has-text("中")').click();
+    await page.waitForTimeout(500);
+    await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("中")')).toHaveClass(/active/);
+    await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("左")')).not.toHaveClass(/active/);
+    console.log('✓ Center button activated, left button deactivated');
+
+    // Click right button
+    await page.locator('.btn-group:not(.vertical) .btn:has-text("右")').click();
+    await page.waitForTimeout(500);
+    await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("右")')).toHaveClass(/active/);
+    await expect(page.locator('.btn-group:not(.vertical) .btn:has-text("中")')).not.toHaveClass(/active/);
+    console.log('✓ Right button activated, center button deactivated');
+
+    // Test vertical button group
+    console.log('\nTesting vertical button group:');
+
+    // Initially no button should be active
+    await expect(page.locator('.btn-group.vertical .btn.active')).toHaveCount(0);
+    console.log('✓ No buttons active initially (vertical group)');
+
+    // Click top button
+    await page.locator('.btn-group.vertical .btn:has-text("顶部")').click();
+    await page.waitForTimeout(500);
+    await expect(page.locator('.btn-group.vertical .btn:has-text("顶部")')).toHaveClass(/active/);
+    console.log('✓ Top button activated');
+
+    // Click middle button
+    await page.locator('.btn-group.vertical .btn:has-text("中间")').click();
+    await page.waitForTimeout(500);
+    await expect(page.locator('.btn-group.vertical .btn:has-text("中间")')).toHaveClass(/active/);
+    await expect(page.locator('.btn-group.vertical .btn:has-text("顶部")')).not.toHaveClass(/active/);
+    console.log('✓ Middle button activated, top button deactivated');
+
+    // Click bottom button
+    await page.locator('.btn-group.vertical .btn:has-text("底部")').click();
+    await page.waitForTimeout(500);
+    await expect(page.locator('.btn-group.vertical .btn:has-text("底部")')).toHaveClass(/active/);
+    await expect(page.locator('.btn-group.vertical .btn:has-text("中间")')).not.toHaveClass(/active/);
+    console.log('✓ Bottom button activated, middle button deactivated');
+
+    console.log('\n✓ All button group tests passed successfully!');
+  });
 });