还可以再进一步的美化吗 比如这个FSD 是在哪个项目 或者关联了哪个模块。 也就是有关联性。 另外一个case 是可以即给sit使用也给UAT 使用的

components/testcase-dashboard.js

@@ -107,8 +107,17 @@ class TestcaseDashboard extends HTMLElement {
                     border-top: 1px solid var(--jira-border);
                     background: rgba(244, 245, 247, 0.5);
                 }
+                .project-badge {
+                    background: #DEEBFF;
+                    color: #0747A6;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 3px;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                    margin-right: 0.5rem;
+                }
 
-                .fsd-badge {
+                .module-badge {
                     background: #EAE6FF;
                     color: #403294;
                     padding: 0.25rem 0.5rem;
@@ -118,13 +127,23 @@ class TestcaseDashboard extends HTMLElement {
                     margin-right: 0.5rem;
                 }
 
-                .user-story-badge {
+                .fsd-badge {
                     background: #E3FCEF;
                     color: #006644;
                     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;
                 }
 
                 .priority-badge {
@@ -270,30 +289,26 @@ class TestcaseDashboard extends HTMLElement {
                     <main>
                         <div class="filter-bar">
                             <input type="text" class="search-input" placeholder="Search test cases...">
-                            
-                            <select class="filter-btn">
-                                <option>All Stages</option>
-                                <option>SIT</option>
-                                <option>UAT</option>
-                                <option>PVT</option>
+                            <select class="filter-btn" multiple>
+                                <option value="SIT">SIT</option>
+                                <option value="UAT">UAT</option>
+                                <option value="PVT">PVT</option>
                             </select>
-
-                            <select class="filter-btn">
-                                <option>All Types</option>
-                                <option>Manual</option>
-                                <option>UI Auto</option>
-                                <option>API Auto</option>
+                            <select class="filter-btn" multiple>
+                                <option value="Manual">Manual</option>
+                                <option value="UI Auto">UI Auto</option>
+                                <option value="API Auto">API Auto</option>
+                                <option value="Performance">Performance</option>
+                                <option value="Security">Security</option>
                             </select>
-
-                            <select class="filter-btn">
-                                <option>All Statuses</option>
-                                <option>Passed</option>
-                                <option>Failed</option>
-                                <option>Pending</option>
+                            <select class="filter-btn" multiple>
+                                <option value="Passed">Passed</option>
+                                <option value="Failed">Failed</option>
+                                <option value="Pending">Pending</option>
                             </select>
-
-                            <button class="filter-btn active">Clear Filters</button>
-                        </div>
+                            <button class="filter-btn active" id="clear-filters">Clear Filters</button>
+                            <button class="filter-btn" id="save-filters">Save Filter Preset</button>
+</div>
 
                         <div class="testcase-list">
                             ${this.generateTestCases()}
@@ -343,11 +358,13 @@ class TestcaseDashboard extends HTMLElement {
                 title: 'User authentication validation',
                 type: 'Manual',
                 status: 'Passed',
-                stage: 'SIT',
+                stages: ['SIT', 'UAT'],
                 priority: 'High',
+                project: 'PROJ-1',
+                module: 'AUTH-MOD',
                 fsd: 'FSD-101',
                 userStory: 'US-42',
-                description: 'Validate user can authenticate with valid credentials',
+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'
             },
@@ -356,11 +373,13 @@ class TestcaseDashboard extends HTMLElement {
                 title: 'API endpoint response validation',
                 type: 'API Auto',
                 status: 'Failed',
-                stage: 'UAT',
+                stages: ['UAT', 'PVT'],
                 priority: 'Medium',
+                project: 'PROJ-1',
+                module: 'API-MOD',
                 fsd: 'FSD-102',
                 userStory: 'US-43',
-                description: 'Validate API returns correct response format',
+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'
             },
@@ -369,11 +388,13 @@ class TestcaseDashboard extends HTMLElement {
                 title: 'UI component rendering test',
                 type: 'UI Auto',
                 status: 'Pending',
-                stage: 'PVT',
+                stages: ['SIT', 'UAT', 'PVT'],
                 priority: 'Low',
+                project: 'PROJ-2',
+                module: 'UI-MOD',
                 fsd: 'FSD-103',
                 userStory: 'US-44',
-                description: 'Verify dashboard components render correctly',
+description: 'Verify dashboard components render correctly',
                 steps: '1. Load dashboard page\n2. Check all components',
                 expected: 'All components should render without errors'
             },
@@ -382,11 +403,13 @@ class TestcaseDashboard extends HTMLElement {
                 title: 'Performance benchmark',
                 type: 'Performance',
                 status: 'Passed',
-                stage: 'SIT',
+                stages: ['SIT'],
                 priority: 'Medium',
+                project: 'PROJ-2',
+                module: 'PERF-MOD',
                 fsd: 'FSD-104',
                 userStory: 'US-45',
-                description: 'Measure API response times under load',
+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'
             },
@@ -395,11 +418,13 @@ class TestcaseDashboard extends HTMLElement {
                 title: 'Security vulnerability scan',
                 type: 'Security',
                 status: 'Failed',
-                stage: 'UAT',
+                stages: ['UAT', 'PVT'],
                 priority: 'High',
+                project: 'PROJ-3',
+                module: 'SEC-MOD',
                 fsd: 'FSD-105',
                 userStory: 'US-46',
-                description: 'Check for common security vulnerabilities',
+description: 'Check for common security vulnerabilities',
                 steps: '1. Run OWASP ZAP scan\n2. Analyze results',
                 expected: 'No critical vulnerabilities found'
             }
@@ -408,9 +433,11 @@ return testCases.map(tc => `
             <div class="testcase-card" data-id="${tc.id}">
                 <div class="status-indicator status-${tc.status.toLowerCase()}"></div>
                 <div class="testcase-card-header">
+                    <span class="project-badge">${tc.project}</span>
+                    <span class="module-badge">${tc.module}</span>
                     <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')">
+<button class="edit-btn ml-auto" onclick="this.closest('.testcase-card').classList.toggle('expanded')">
                         Edit
                     </button>
                 </div>
@@ -421,8 +448,8 @@ return testCases.map(tc => `
                         </div>
                         <div>
                             <div class="font-medium">${tc.title}</div>
-                            <div class="text-sm text-gray-600">${tc.id} • ${tc.stage}</div>
-                        </div>
+                            <div class="text-sm text-gray-600">${tc.id} • ${tc.stages.join(', ')}</div>
+</div>
                         <div class="ml-auto">
                             <span class="priority-badge priority-${tc.priority.toLowerCase()}">${tc.priority}</span>
                         </div>
@@ -434,8 +461,11 @@ return testCases.map(tc => `
                     </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">
+                    <div class="text-xs text-gray-500">
+                        Last updated: ${new Date().toLocaleDateString()} • 
+                        Used in: ${tc.stages.map(s => `<span class="stage-tag">${s}</span>`).join(' ')}
+                    </div>
+<div class="flex gap-2">
                         <button class="edit-btn">Comment</button>
                         <button class="edit-btn">Attach</button>
                         <button class="edit-btn">Clone</button>

style.css

@@ -1,53 +1,32 @@
-
-/* Base styles that will apply to the whole document */
-body {
-    margin: 0;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
-                 'Helvetica Neue', Arial, sans-serif;
-    line-height: 1.5;
-}
-
-/* Utility classes */
-.flex {
-    display: flex;
-}
-
-.items-center {
-    align-items: center;
-}
-
-.justify-between {
-    justify-content: space-between;
+.stage-tag {
+    display: inline-block;
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    background: rgba(9,30,66,0.08);
+    margin: 0 0.1rem;
+    font-size: 0.7rem;
 }
 
-.ml-auto {
-    margin-left: auto;
+select[multiple] {
+    min-width: 120px;
+    height: auto;
+    padding: 0.25rem;
+    border-radius: 4px;
+    border: 1px solid var(--jira-border);
 }
 
-.text-green-600 {
-    color: #00875A;
+select[multiple] option {
+    padding: 0.25rem 0.5rem;
+    margin: 0.1rem 0;
+    border-radius: 3px;
 }
 
-.text-red-600 {
-    color: #DE350B;
+select[multiple] option:hover {
+    background: rgba(9,30,66,0.08);
 }
-.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;
-}
+select[multiple] option:checked {
+    background: #DEEBFF;
+    color: var(--jira-blue);
+    font-weight: 500;
+}