对当前页面进行 美化 首先 用例都是和 fsd 或者userstory绑定的。 另外给出各种类型的用例 并且 可以随时编辑 最好是jira风格

components/testcase-dashboard.js

@@ -21,15 +21,16 @@ class TestcaseDashboard extends HTMLElement {
                     min-height: 100vh;
                     background: var(--jira-bg);
                 }
-
                 .header {
                     background: linear-gradient(135deg, var(--jira-blue) 0%, var(--jira-purple) 100%);
                     color: white;
                     padding: 1.5rem 2rem;
                     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                    position: sticky;
+                    top: 0;
+                    z-index: 100;
                 }
-
-                .filter-bar {
+.filter-bar {
                     display: flex;
                     gap: 0.75rem;
                     padding: 1rem;
@@ -71,16 +72,100 @@ class TestcaseDashboard extends HTMLElement {
                     color: var(--jira-blue);
                     font-weight: 600;
                 }
-
                 .testcase-card {
                     background: var(--jira-card-bg);
                     border: 1px solid var(--jira-border);
                     border-radius: 4px;
                     margin-bottom: 0.75rem;
                     box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25);
+                    transition: all 0.2s ease;
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                .testcase-card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 8px rgba(9, 30, 66, 0.15);
+                }
+
+                .testcase-card-header {
+                    display: flex;
+                    align-items: center;
+                    padding: 0.75rem 1rem;
+                    border-bottom: 1px solid var(--jira-border);
+                    background: rgba(244, 245, 247, 0.5);
+                }
+
+                .testcase-card-body {
+                    padding: 1rem;
+                }
+
+                .testcase-card-footer {
+                    display: flex;
+                    justify-content: space-between;
+                    padding: 0.75rem 1rem;
+                    border-top: 1px solid var(--jira-border);
+                    background: rgba(244, 245, 247, 0.5);
+                }
+
+                .fsd-badge {
+                    background: #EAE6FF;
+                    color: #403294;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 3px;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                    margin-right: 0.5rem;
+                }
+
+                .user-story-badge {
+                    background: #E3FCEF;
+                    color: #006644;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 3px;
+                    font-size: 0.75rem;
+                    font-weight: 500;
                 }
 
-                .status-indicator {
+                .priority-badge {
+                    display: inline-block;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 3px;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                }
+
+                .priority-high {
+                    background: #FFEBE6;
+                    color: #DE350B;
+                }
+
+                .priority-medium {
+                    background: #FFF0B3;
+                    color: #FF991F;
+                }
+
+                .priority-low {
+                    background: #E3FCEF;
+                    color: #00875A;
+                }
+
+                .edit-btn {
+                    background: transparent;
+                    border: 1px solid var(--jira-border);
+                    color: var(--jira-text-sub);
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 3px;
+                    cursor: pointer;
+                    font-size: 0.75rem;
+                    transition: all 0.2s;
+                }
+
+                .edit-btn:hover {
+                    background: rgba(9,30,66,0.08);
+                    color: var(--jira-blue);
+                }
+.status-indicator {
                     width: 4px;
                     height: 100%;
                     position: absolute;
@@ -117,14 +202,61 @@ class TestcaseDashboard extends HTMLElement {
                     grid-template-columns: 1fr 300px;
                     gap: 1.5rem;
                 }
-
                 .stats-card {
                     background: var(--jira-card-bg);
                     border-radius: 4px;
                     padding: 1rem;
                     box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25);
+                    position: sticky;
+                    top: 100px;
                 }
-            </style>
+
+                .stats-grid {
+                    display: grid;
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+
+                .stat-item {
+                    background: rgba(244, 245, 247, 0.5);
+                    border-radius: 4px;
+                    padding: 0.75rem;
+                    text-align: center;
+                }
+
+                .stat-value {
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                }
+
+                .stat-label {
+                    font-size: 0.75rem;
+                    color: var(--jira-text-sub);
+                }
+
+                .type-filter {
+                    margin-top: 1rem;
+                }
+
+                .type-filter-item {
+                    display: flex;
+                    align-items: center;
+                    padding: 0.5rem;
+                    border-radius: 4px;
+                    cursor: pointer;
+                }
+
+                .type-filter-item:hover {
+                    background: rgba(9,30,66,0.08);
+                }
+
+                .type-filter-count {
+                    margin-left: auto;
+                    color: var(--jira-text-sub);
+                    font-size: 0.75rem;
+                }
+</style>
 
             <div class="header">
                 <div class="container">
@@ -174,13 +306,36 @@ class TestcaseDashboard extends HTMLElement {
                             <div class="stats-grid">
                                 ${this.generateStats()}
                             </div>
-                        </div>
+
+                            <div class="type-filter">
+                                <h4 class="mt-4 mb-2">Test Types</h4>
+                                <div class="type-filter-item">
+                                    <span>👨‍💻 Manual</span>
+                                    <span class="type-filter-count">12</span>
+                                </div>
+                                <div class="type-filter-item">
+                                    <span>🖥️ UI Auto</span>
+                                    <span class="type-filter-count">8</span>
+                                </div>
+                                <div class="type-filter-item">
+                                    <span>🔌 API Auto</span>
+                                    <span class="type-filter-count">15</span>
+                                </div>
+                                <div class="type-filter-item">
+                                    <span>⏱️ Performance</span>
+                                    <span class="type-filter-count">5</span>
+                                </div>
+                                <div class="type-filter-item">
+                                    <span>🔒 Security</span>
+                                    <span class="type-filter-count">3</span>
+                                </div>
+                            </div>
+</div>
                     </aside>
                 </div>
             </div>
         `;
     }
-
     generateTestCases() {
         const testCases = [
             {
@@ -189,7 +344,12 @@ class TestcaseDashboard extends HTMLElement {
                 type: 'Manual',
                 status: 'Passed',
                 stage: 'SIT',
-                priority: 'High'
+                priority: 'High',
+                fsd: 'FSD-101',
+                userStory: 'US-42',
+                description: 'Validate user can authenticate with valid credentials',
+                steps: '1. Navigate to login page\n2. Enter valid credentials\n3. Click login button',
+                expected: 'User should be authenticated and redirected to dashboard'
             },
             {
                 id: 'TC-002',
@@ -197,7 +357,12 @@ class TestcaseDashboard extends HTMLElement {
                 type: 'API Auto',
                 status: 'Failed',
                 stage: 'UAT',
-                priority: 'Medium'
+                priority: 'Medium',
+                fsd: 'FSD-102',
+                userStory: 'US-43',
+                description: 'Validate API returns correct response format',
+                steps: '1. Send GET request to /api/users\n2. Verify response format',
+                expected: 'Response should match OpenAPI specification'
             },
             {
                 id: 'TC-003',
@@ -205,14 +370,51 @@ class TestcaseDashboard extends HTMLElement {
                 type: 'UI Auto',
                 status: 'Pending',
                 stage: 'PVT',
-                priority: 'Low'
+                priority: 'Low',
+                fsd: 'FSD-103',
+                userStory: 'US-44',
+                description: 'Verify dashboard components render correctly',
+                steps: '1. Load dashboard page\n2. Check all components',
+                expected: 'All components should render without errors'
+            },
+            {
+                id: 'TC-004',
+                title: 'Performance benchmark',
+                type: 'Performance',
+                status: 'Passed',
+                stage: 'SIT',
+                priority: 'Medium',
+                fsd: 'FSD-104',
+                userStory: 'US-45',
+                description: 'Measure API response times under load',
+                steps: '1. Run load test with 1000 concurrent users\n2. Record response times',
+                expected: '95% of requests should complete in <500ms'
+            },
+            {
+                id: 'TC-005',
+                title: 'Security vulnerability scan',
+                type: 'Security',
+                status: 'Failed',
+                stage: 'UAT',
+                priority: 'High',
+                fsd: 'FSD-105',
+                userStory: 'US-46',
+                description: 'Check for common security vulnerabilities',
+                steps: '1. Run OWASP ZAP scan\n2. Analyze results',
+                expected: 'No critical vulnerabilities found'
             }
         ];
-
-        return testCases.map(tc => `
-            <div class="testcase-card">
+return testCases.map(tc => `
+            <div class="testcase-card" data-id="${tc.id}">
                 <div class="status-indicator status-${tc.status.toLowerCase()}"></div>
-                <div class="p-4">
+                <div class="testcase-card-header">
+                    <span class="fsd-badge">${tc.fsd}</span>
+                    <span class="user-story-badge">${tc.userStory}</span>
+                    <button class="edit-btn ml-auto" onclick="this.closest('.testcase-card').classList.toggle('expanded')">
+                        Edit
+                    </button>
+                </div>
+                <div class="testcase-card-body">
                     <div class="flex items-center">
                         <div class="type-icon type-${tc.type.toLowerCase().replace(' ', '-')}">
                             ${this.getTypeIcon(tc.type)}
@@ -222,12 +424,25 @@ class TestcaseDashboard extends HTMLElement {
                             <div class="text-sm text-gray-600">${tc.id} • ${tc.stage}</div>
                         </div>
                         <div class="ml-auto">
-                            <span class="priority-badge">${tc.priority}</span>
+                            <span class="priority-badge priority-${tc.priority.toLowerCase()}">${tc.priority}</span>
                         </div>
                     </div>
+                    <div class="mt-3">
+                        <div class="text-sm"><strong>Description:</strong> ${tc.description}</div>
+                        <div class="text-sm mt-1"><strong>Steps:</strong><pre>${tc.steps}</pre></div>
+                        <div class="text-sm mt-1"><strong>Expected:</strong> ${tc.expected}</div>
+                    </div>
+                </div>
+                <div class="testcase-card-footer">
+                    <div class="text-xs text-gray-500">Last updated: ${new Date().toLocaleDateString()}</div>
+                    <div class="flex gap-2">
+                        <button class="edit-btn">Comment</button>
+                        <button class="edit-btn">Attach</button>
+                        <button class="edit-btn">Clone</button>
+                    </div>
                 </div>
             </div>
-        `).join('');
+`).join('');
     }
 
     generateStats() {
@@ -250,12 +465,16 @@ class TestcaseDashboard extends HTMLElement {
             </div>
         `;
     }
-
     getTypeIcon(type) {
         const icons = {
             'Manual': '👨‍💻',
             'UI Auto': '🖥️',
-            'API Auto': '🔌'
+            'API Auto': '🔌',
+            'Performance': '⏱️',
+            'Security': '🔒',
+            'Accessibility': '♿',
+            'Compatibility': '🔄',
+            'Regression': '🔁'
         };
         return icons[type] || '📋';
     }

index.html

@@ -4,16 +4,27 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TestCase Visualizer Pro</title>
-    <meta name="description" content="TestCase Visualizer Pro - Visualize your FSD test cases with clarity">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <title>FSD Test Case Manager | Jira Style</title>
+    <meta name="description" content="FSD Test Case Manager - Jira-style interface for managing test cases linked to FSDs and User Stories">
+<link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <testcase-dashboard></testcase-dashboard>
-    
     <script src="components/testcase-dashboard.js"></script>
+    <script>
+        // Simple edit functionality demonstration
+        document.addEventListener('click', function(e) {
+            if (e.target.classList.contains('edit-btn')) {
+                const card = e.target.closest('.testcase-card');
+                if (card) {
+                    // In a real app, this would open a modal or inline editor
+                    alert(`Editing test case ${card.dataset.id}`);
+                }
+            }
+        });
+    </script>
 </body>
 </html>

style.css

@@ -31,7 +31,23 @@ body {
 .text-red-600 {
     color: #DE350B;
 }
-
 .text-yellow-600 {
     color: #FF991F;
 }
+
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+
+.gap-2 { gap: 0.5rem; }
+
+pre {
+    white-space: pre-wrap;
+    font-family: inherit;
+    margin: 0.5rem 0;
+    padding: 0.5rem;
+    background: rgba(9,30,66,0.04);
+    border-radius: 3px;
+}