展示一个fsd下 有多少 testcase 能明确看出不同的case types， 以及不同的阶段。

README.md

@@ -1,10 +1,13 @@
 ---
-title: Testcase Visualizer Pro
-emoji: 🐠
-colorFrom: green
-colorTo: red
+title: TestCase Visualizer Pro 🧪
+colorFrom: pink
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/testcase-dashboard.js

@@ -0,0 +1,267 @@
+class TestcaseDashboard extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    font-family: 'Inter', sans-serif;
+                }
+                
+                .header {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    color: white;
+                }
+                
+                .phase-tab {
+                    transition: all 0.3s ease;
+                }
+                
+                .phase-tab.active {
+                    border-bottom: 3px solid #667eea;
+                    color: #667eea;
+                    font-weight: 600;
+                }
+            </style>
+            
+            <div class="min-h-screen">
+                <!-- Header -->
+                <header class="header py-8 px-6 shadow-lg">
+                    <div class="container mx-auto">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h1 class="text-3xl font-bold flex items-center">
+                                    <i data-feather="activity" class="mr-3"></i>
+                                    TestCase Visualizer Pro
+                                </h1>
+                                <p class="mt-2 opacity-90">Visualize your FSD test cases with clarity</p>
+                            </div>
+                            <div class="flex items-center space-x-4">
+                                <button class="bg-white text-indigo-700 px-4 py-2 rounded-lg font-medium flex items-center">
+                                    <i data-feather="plus" class="mr-2"></i>
+                                    Add Test Case
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </header>
+                
+                <!-- Main Content -->
+                <main class="container mx-auto py-8 px-6">
+                    <!-- Filters -->
+                    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                        <div class="flex flex-wrap items-center justify-between gap-4">
+                            <div class="flex items-center space-x-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Test Type</label>
+                                    <select class="border border-gray-300 rounded-lg px-4 py-2 w-48">
+                                        <option>All Types</option>
+                                        <option>Unit Tests</option>
+                                        <option>Integration Tests</option>
+                                        <option>E2E Tests</option>
+                                        <option>Component Tests</option>
+                                    </select>
+                                </div>
+                                
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
+                                    <select class="border border-gray-300 rounded-lg px-4 py-2 w-48">
+                                        <option>All Statuses</option>
+                                        <option>Passed</option>
+                                        <option>Failed</option>
+                                        <option>Pending</option>
+                                        <option>Skipped</option>
+                                    </select>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center">
+                                <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium flex items-center">
+                                    <i data-feather="filter" class="mr-2"></i>
+                                    Apply Filters
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Phase Tabs -->
+                    <div class="flex border-b border-gray-200 mb-6">
+                        <button class="phase-tab px-6 py-3 active">Design Phase</button>
+                        <button class="phase-tab px-6 py-3">Development Phase</button>
+                        <button class="phase-tab px-6 py-3">Testing Phase</button>
+                        <button class="phase-tab px-6 py-3">Deployment Phase</button>
+                    </div>
+                    
+                    <!-- Test Case Stats -->
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+                        <div class="bg-white rounded-xl shadow-md p-6">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <p class="text-gray-500">Total Test Cases</p>
+                                    <h3 class="text-3xl font-bold mt-2">128</h3>
+                                </div>
+                                <div class="bg-indigo-100 p-3 rounded-full">
+                                    <i data-feather="list" class="text-indigo-600"></i>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="bg-white rounded-xl shadow-md p-6">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <p class="text-gray-500">Passed</p>
+                                    <h3 class="text-3xl font-bold mt-2 text-green-600">98</h3>
+                                </div>
+                                <div class="bg-green-100 p-3 rounded-full">
+                                    <i data-feather="check-circle" class="text-green-600"></i>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="bg-white rounded-xl shadow-md p-6">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <p class="text-gray-500">Failed</p>
+                                    <h3 class="text-3xl font-bold mt-2 text-red-600">12</h3>
+                                </div>
+                                <div class="bg-red-100 p-3 rounded-full">
+                                    <i data-feather="x-circle" class="text-red-600"></i>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="bg-white rounded-xl shadow-md p-6">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <p class="text-gray-500">Pending</p>
+                                    <h3 class="text-3xl font-bold mt-2 text-yellow-600">18</h3>
+                                </div>
+                                <div class="bg-yellow-100 p-3 rounded-full">
+                                    <i data-feather="clock" class="text-yellow-600"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Test Case List -->
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                        <div class="overflow-x-auto">
+                            <table class="min-w-full divide-y divide-gray-200">
+                                <thead class="bg-gray-50">
+                                    <tr>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Test Case</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="bg-white divide-y divide-gray-200">
+                                    ${this.generateTestCases()}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </main>
+            </div>
+        `;
+        
+        // Add event listeners for tabs
+        const tabs = this.shadowRoot.querySelectorAll('.phase-tab');
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                tabs.forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+            });
+        });
+    }
+    
+    generateTestCases() {
+        const testCases = [
+            {
+                id: 'TC-001',
+                name: 'User authentication validation',
+                type: 'Unit Test',
+                phase: 'Design',
+                status: 'Passed'
+            },
+            {
+                id: 'TC-002',
+                name: 'API endpoint response time',
+                type: 'Integration Test',
+                phase: 'Development',
+                status: 'Failed'
+            },
+            {
+                id: 'TC-003',
+                name: 'Checkout flow E2E',
+                type: 'E2E Test',
+                phase: 'Testing',
+                status: 'Pending'
+            },
+            {
+                id: 'TC-004',
+                name: 'UI component rendering',
+                type: 'Component Test',
+                phase: 'Design',
+                status: 'Passed'
+            },
+            {
+                id: 'TC-005',
+                name: 'Database migration',
+                type: 'Integration Test',
+                phase: 'Deployment',
+                status: 'Skipped'
+            }
+        ];
+        
+        return testCases.map(testCase => `
+            <tr class="testcase-card hover:bg-gray-50">
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${testCase.id}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${testCase.name}</td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="pill ${this.getTypeClass(testCase.type)}">
+                        ${testCase.type}
+                    </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${testCase.phase}</td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="pill ${this.getStatusClass(testCase.status)}">
+                        ${testCase.status}
+                    </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <button class="text-indigo-600 hover:text-indigo-900 mr-3">
+                        <i data-feather="eye"></i>
+                    </button>
+                    <button class="text-gray-600 hover:text-gray-900">
+                        <i data-feather="more-vertical"></i>
+                    </button>
+                </td>
+            </tr>
+        `).join('');
+    }
+    
+    getTypeClass(type) {
+        const classes = {
+            'Unit Test': 'bg-blue-100 text-blue-800',
+            'Integration Test': 'bg-purple-100 text-purple-800',
+            'E2E Test': 'bg-green-100 text-green-800',
+            'Component Test': 'bg-yellow-100 text-yellow-800'
+        };
+        return classes[type] || 'bg-gray-100 text-gray-800';
+    }
+    
+    getStatusClass(status) {
+        const classes = {
+            'Passed': 'bg-green-100 text-green-800',
+            'Failed': 'bg-red-100 text-red-800',
+            'Pending': 'bg-yellow-100 text-yellow-800',
+            'Skipped': 'bg-gray-100 text-gray-800'
+        };
+        return classes[status] || 'bg-gray-100 text-gray-800';
+    }
+}
+
+customElements.define('testcase-dashboard', TestcaseDashboard);

index.html

@@ -1,19 +1,21 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TestCase Visualizer Pro</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-50">
+    <testcase-dashboard></testcase-dashboard>
+    
+    <script src="components/testcase-dashboard.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

style.css

@@ -1,28 +1,29 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom styles for test case visualization */
+.testcase-card {
+    transition: all 0.3s ease;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.testcase-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.pill {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Animation for test case status */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
-}
+.pulse-animation {
+    animation: pulse 2s infinite;
+}