Update templates/dashboard.html

templates/dashboard.html

@@ -7,39 +7,17 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
         :root {
-            /* 深色主题变量 */
-            --primary-color: #00fff2;
-            --primary-glow: rgba(0, 255, 242, 0.15);
-            --secondary-color: #ff2aff;
-            --background-color: #030714;
-            --card-background: #0a101f;
-            --surface-color: #111827;
+            --primary-color: #00ff9d;
+            --primary-dark: #00cc7d;
+            --background-color: #0a0b0f;
+            --card-background: #12141c;
             --text-primary: #ffffff;
-            --text-secondary: #94a3b8;
-            --border-color: #1e293b;
-            --success-color: #04d94f;
-            --warning-color: #ff9500;
+            --text-secondary: #7f8ea3;
+            --border-color: #1e2029;
+            --success-color: #00ff9d;
+            --warning-color: #ff9d00;
             --danger-color: #ff2d55;
-            --sleeping-color: #3b82f6;
-            --header-blur: saturate(180%) blur(10px);
-            --card-blur: saturate(180%) blur(5px);
-        }
-
-        /* 日间模式 */
-        [data-theme="light"] {
-            --primary-color: #0066ff;
-            --primary-glow: rgba(0, 102, 255, 0.15);
-            --secondary-color: #7c3aed;
-            --background-color: #f1f5f9;
-            --card-background: #ffffff;
-            --surface-color: #f8fafc;
-            --text-primary: #0f172a;
-            --text-secondary: #475569;
-            --border-color: #e2e8f0;
-            --success-color: #10b981;
-            --warning-color: #f59e0b;
-            --danger-color: #ef4444;
-            --sleeping-color: #3b82f6;
+            --sleeping-color: #00ffff;
         }
 
         * {
@@ -52,17 +30,15 @@
         body {
             background-color: var(--background-color);
             background-image: 
-                radial-gradient(circle at 0% 0%, var(--primary-glow) 0%, transparent 25%),
-                radial-gradient(circle at 100% 100%, rgba(255, 42, 255, 0.1) 0%, transparent 25%);
+                radial-gradient(circle at 10% 20%, rgba(0, 255, 157, 0.03) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(255, 0, 255, 0.03) 0%, transparent 20%);
             min-height: 100vh;
             color: var(--text-primary);
-            transition: background-color 0.3s ease;
         }
 
         .header {
-            background: rgba(10, 16, 31, 0.7);
-            backdrop-filter: var(--header-blur);
-            -webkit-backdrop-filter: var(--header-blur);
+            background: rgba(18, 20, 28, 0.95);
+            backdrop-filter: blur(10px);
             position: fixed;
             top: 0;
             left: 0;
@@ -71,10 +47,6 @@
             border-bottom: 1px solid var(--border-color);
         }
 
-        [data-theme="light"] .header {
-            background: rgba(255, 255, 255, 0.7);
-        }
-
         .header-content {
             max-width: 1400px;
             margin: 0 auto;
@@ -84,6 +56,12 @@
             align-items: center;
         }
 
+        .nav-section {
+            display: flex;
+            align-items: center;
+            gap: 2rem;
+        }
+
         .logo {
             font-size: 1.5rem;
             font-weight: 600;
@@ -91,19 +69,6 @@
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            position: relative;
-        }
-
-        .logo::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: -10px;
-            transform: translateY(-50%);
-            width: 3px;
-            height: 70%;
-            background: var(--primary-color);
-            box-shadow: 0 0 10px var(--primary-color);
         }
 
         .logo i {
@@ -111,12 +76,6 @@
             text-shadow: 0 0 10px var(--primary-color);
         }
 
-        .nav-actions {
-            display: flex;
-            align-items: center;
-            gap: 1.5rem;
-        }
-
         .search-bar {
             position: relative;
             width: 300px;
@@ -124,61 +83,41 @@
 
         .search-bar input {
             width: 100%;
-            padding: 0.75rem 1rem 0.75rem 2.5rem;
-            background: var(--surface-color);
+            padding: 0.5rem 1rem 0.5rem 2.5rem;
+            background: rgba(255, 255, 255, 0.05);
             border: 1px solid var(--border-color);
-            border-radius: 8px;
+            border-radius: 6px;
             color: var(--text-primary);
             font-size: 0.9rem;
-            transition: all 0.3s ease;
-        }
-
-        .search-bar input:focus {
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px var(--primary-glow);
-            outline: none;
         }
 
         .search-bar i {
             position: absolute;
-            left: 1rem;
+            left: 0.8rem;
             top: 50%;
             transform: translateY(-50%);
             color: var(--text-secondary);
         }
 
-        .action-btn {
-            padding: 0.5rem;
-            border-radius: 8px;
-            background: transparent;
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            transition: all 0.3s ease;
+        .user-section {
             display: flex;
             align-items: center;
-            gap: 0.5rem;
-        }
-
-        .action-btn:hover {
-            border-color: var(--primary-color);
-            background: var(--primary-glow);
+            gap: 1rem;
         }
 
         .theme-toggle {
-            font-size: 1.2rem;
-            padding: 0.5rem;
-            border-radius: 8px;
-            background: transparent;
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
+            background: none;
+            border: none;
+            color: var(--text-secondary);
             cursor: pointer;
+            padding: 0.5rem;
+            border-radius: 4px;
             transition: all 0.3s ease;
         }
 
         .theme-toggle:hover {
-            border-color: var(--primary-color);
-            background: var(--primary-glow);
+            color: var(--primary-color);
+            background: rgba(0, 255, 157, 0.1);
         }
 
         .container {
@@ -189,117 +128,37 @@
 
         .dashboard-header {
             margin-bottom: 2rem;
+            padding: 1.5rem;
             background: var(--card-background);
-            border-radius: 16px;
+            border-radius: 12px;
             border: 1px solid var(--border-color);
-            overflow: hidden;
-            position: relative;
-        }
-
-        .dashboard-header::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background: linear-gradient(90deg, 
-                transparent, 
-                var(--primary-color), 
-                var(--secondary-color), 
-                transparent
-            );
-        }
-
-        .bulk-actions {
-            padding: 1.5rem;
-            border-bottom: 1px solid var(--border-color);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: var(--surface-color);
-        }
-
-        .selection-info {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-
-        .bulk-buttons {
-            display: flex;
-            gap: 1rem;
-        }
-
-        .bulk-btn {
-            padding: 0.5rem 1rem;
-            border-radius: 8px;
-            background: var(--primary-glow);
-            border: 1px solid var(--primary-color);
-            color: var(--primary-color);
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .bulk-btn:hover {
-            background: var(--primary-color);
-            color: var(--background-color);
-        }
-
-        .bulk-btn.danger {
-            background: rgba(255, 45, 85, 0.1);
-            border-color: var(--danger-color);
-            color: var(--danger-color);
-        }
-
-        .bulk-btn.danger:hover {
-            background: var(--danger-color);
-            color: white;
         }
 
         .stats-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 1rem;
-            padding: 1.5rem;
+            margin-top: 1rem;
         }
 
         .stat-card {
-            background: var(--surface-color);
+            background: rgba(255, 255, 255, 0.03);
             padding: 1.5rem;
-            border-radius: 12px;
+            border-radius: 8px;
             border: 1px solid var(--border-color);
             transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
         }
 
-        .stat-card::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 3px;
-            height: 100%;
-            background: var(--primary-color);
-            opacity: 0.5;
-            transition: all 0.3s ease;
-        }
-
-        .stat-card:hover::after {
-            opacity: 1;
-            box-shadow: 0 0 10px var(--primary-color);
+        .stat-card:hover {
+            transform: translateY(-2px);
+            border-color: var(--primary-color);
         }
 
         .stat-value {
             font-size: 2rem;
             font-weight: 600;
-            color: var(--primary-color);
             margin-bottom: 0.5rem;
-            text-shadow: 0 0 10px var(--primary-glow);
+            color: var(--primary-color);
         }
 
         .stat-label {
@@ -309,60 +168,37 @@
             letter-spacing: 0.5px;
         }
 
-        .space-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-            gap: 1.5rem;
-            margin-top: 2rem;
-        }
-
-        .space-card {
+        .owner-section {
             background: var(--card-background);
-            border-radius: 16px;
+            border-radius: 12px;
+            margin-bottom: 2rem;
             border: 1px solid var(--border-color);
             overflow: hidden;
-            transition: all 0.3s ease;
-            position: relative;
         }
 
-        .space-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .space-card.selected {
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 2px var(--primary-glow);
-        }
-
-        .card-checkbox {
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-            z-index: 1;
-        }
-
-        .space-header {
+        .owner-header {
             padding: 1.5rem;
-            background: var(--surface-color);
             border-bottom: 1px solid var(--border-color);
             display: flex;
             justify-content: space-between;
             align-items: center;
+            background: rgba(255, 255, 255, 0.02);
         }
 
-        .space-name {
-            font-size: 1.1rem;
+        .owner-name {
+            font-size: 1.25rem;
             font-weight: 600;
-            color: var(--text-primary);
             display: flex;
             align-items: center;
             gap: 0.5rem;
         }
 
+        .status-stats {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
         .status-badge {
             padding: 0.25rem 0.75rem;
             border-radius: 6px;
@@ -373,15 +209,45 @@
             gap: 0.5rem;
         }
 
-        .space-content {
+        .space-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 1.5rem;
             padding: 1.5rem;
         }
 
+        .space-card {
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 10px;
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+
+        .space-card:hover {
+            transform: translateY(-2px);
+            border-color: var(--primary-color);
+            box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
+        }
+
+        .space-header {
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.02);
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .space-content {
+            padding: 1rem;
+        }
+
         .space-info {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 1rem;
-            margin-bottom: 1.5rem;
+            margin-bottom: 1rem;
         }
 
         .info-item {
@@ -400,7 +266,30 @@
         .info-value {
             color: var(--text-primary);
             font-size: 0.9rem;
-            font-weight: 500;
+        }
+
+        .space-metrics {
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .metric-item {
+            text-align: center;
+        }
+
+        .metric-value {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--primary-color);
+        }
+
+        .metric-label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
         }
 
         .action-buttons {
@@ -408,13 +297,12 @@
             grid-template-columns: repeat(3, 1fr);
             gap: 0.75rem;
             padding: 1rem;
-            background: var(--surface-color);
-            border-top: 1px solid var(--border-color);
+            background: rgba(0, 0, 0, 0.2);
         }
 
         .action-button {
             padding: 0.75rem;
-            border-radius: 8px;
+            border-radius: 6px;
             font-size: 0.9rem;
             font-weight: 500;
             display: flex;
@@ -423,15 +311,15 @@
             gap: 0.5rem;
             cursor: pointer;
             transition: all 0.3s ease;
-            background: transparent;
             border: 1px solid var(--border-color);
+            background: transparent;
             color: var(--text-primary);
             text-decoration: none;
         }
 
         .action-button:hover {
             border-color: var(--primary-color);
-            background: var(--primary-glow);
+            background: rgba(0, 255, 157, 0.1);
         }
 
         .action-button.restart {
@@ -441,71 +329,47 @@
 
         .action-button.restart:hover {
             background: var(--primary-color);
-            color: var(--card-background);
+            color: var(--background-color);
         }
 
-        @media (max-width: 768px) {
-            .header-content {
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .nav-actions {
-                width: 100%;
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .search-bar {
-                width: 100%;
-            }
-
-            .bulk-actions {
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .stats-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .space-grid {
-                grid-template-columns: 1fr;
-            }
+        .status-RUNNING { 
+            background: rgba(0, 255, 157, 0.1);
+            border: 1px solid var(--success-color);
+            color: var(--success-color);
         }
 
-        /* 自定义滚动条 */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px
+        .status-BUILDING { 
+            background: rgba(255, 157, 0, 0.1);
+            border: 1px solid var(--warning-color);
+            color: var(--warning-color);
         }
 
-        /* 自定义滚动条 */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-            background: var(--surface-color);
+        .status-SLEEPING { 
+            background: rgba(0, 255, 255, 0.1);
+            border: 1px solid var(--sleeping-color);
+            color: var(--sleeping-color);
         }
 
-        ::-webkit-scrollbar-thumb {
-            background: var(--border-color);
-            border-radius: 4px;
+        .status-STOPPED { 
+            background: rgba(127, 142, 163, 0.1);
+            border: 1px solid var(--text-secondary);
+            color: var(--text-secondary);
         }
 
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--primary-color);
+        .status-FAILED { 
+            background: rgba(255, 45, 85, 0.1);
+            border: 1px solid var(--danger-color);
+            color: var(--danger-color);
         }
 
-        /* 加载动画 */
         .loading-overlay {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(3, 7, 20, 0.8);
+            background: rgba(10, 11, 15, 0.8);
             backdrop-filter: blur(5px);
-            -webkit-backdrop-filter: blur(5px);
             display: flex;
             justify-content: center;
             align-items: center;
@@ -514,11 +378,10 @@
 
         .loading-spinner {
             position: relative;
-            width: 100px;
-            height: 100px;
+            width: 60px;
+            height: 60px;
         }
 
-        .loading-spinner::before,
         .loading-spinner::after {
             content: '';
             position: absolute;
@@ -527,19 +390,52 @@
             width: 100%;
             height: 100%;
             border-radius: 50%;
-            border: 2px solid transparent;
+            border: 3px solid var(--border-color);
             border-top-color: var(--primary-color);
-            animation: spin 1.5s linear infinite;
+            animation: spin 1s infinite linear;
         }
 
-        .loading-spinner::after {
-            border-top-color: var(--secondary-color);
-            animation-delay: 0.75s;
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
 
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+        @media (max-width: 768px) {
+            .header-content {
+                flex-direction: column;
+                gap: 1rem;
+                padding: 1rem;
+            }
+
+            .nav-section {
+                width: 100%;
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .search-bar {
+                width: 100%;
+            }
+
+            .container {
+                padding: 1rem;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .space-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .space-info {
+                grid-template-columns: 1fr;
+            }
+
+            .status-stats {
+                flex-direction: column;
+                align-items: flex-start;
+            }
         }
     </style>
 </head>
@@ -550,19 +446,21 @@
 
     <header class="header">
         <div class="header-content">
-            <div class="logo">
-                <i class="fas fa-server"></i>
-                HF Space Manager
-            </div>
-            <div class="nav-actions">
+            <div class="nav-section">
+                <div class="logo">
+                    <i class="fas fa-server"></i>
+                    HF Space Manager
+                </div>
                 <div class="search-bar">
                     <i class="fas fa-search"></i>
                     <input type="text" placeholder="搜索 Spaces..." id="spaceSearch">
                 </div>
-                <button class="theme-toggle" id="themeToggle">
+            </div>
+            <div class="user-section">
+                <button class="theme-toggle" title="切换主题">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="/logout" class="action-btn">
+                <a href="/logout" class="action-button">
                     <i class="fas fa-sign-out-alt"></i>
                     退出
                 </a>
@@ -581,23 +479,6 @@
             {% endfor %}
 
             <div class="dashboard-header">
-                <div class="bulk-actions" id="bulkActions" style="display: none;">
-                    <div class="selection-info">
-                        <i class="fas fa-check-square"></i>
-                        已选择 <span id="selectedCount">0</span> 个 Spaces
-                    </div>
-                    <div class="bulk-buttons">
-                        <button class="bulk-btn" onclick="bulkRestart()">
-                            <i class="fas fa-sync-alt"></i>
-                            批量重启
-                        </button>
-                        <button class="bulk-btn danger" onclick="bulkStop()">
-                            <i class="fas fa-stop-circle"></i>
-                            批量停止
-                        </button>
-                    </div>
-                </div>
-                
                 <div class="stats-grid">
                     {% set total_spaces = spaces|length %}
                     {% set running_spaces = spaces|selectattr('status', 'equalto', 'RUNNING')|list|length %}
@@ -628,69 +509,106 @@
                 </div>
             </div>
 
-            <div class="space-grid">
-                {% for space in spaces %}
-                <div class="space-card" data-space-id="{{ space.repo_id }}">
-                    <input type="checkbox" class="card-checkbox" onchange="updateSelection(this)">
-                    <div class="space-header">
-                        <div class="space-name">
-                            <i class="fas fa-cube"></i>
-                            {{ space.name }}
+            {% for owner, owner_spaces in grouped_spaces.items() %}
+                {% set running_count = owner_spaces|selectattr('status', 'equalto', 'RUNNING')|list|length %}
+                {% set building_count = owner_spaces|selectattr('status', 'equalto', 'BUILDING')|list|length %}
+                {% set sleeping_count = owner_spaces|selectattr('status', 'equalto', 'SLEEPING')|list|length %}
+                {% set stopped_count = owner_spaces|selectattr('status', 'equalto', 'STOPPED')|list|length %}
+                {% set failed_count = owner_spaces|selectattr('status', 'equalto', 'FAILED')|list|length %}
+                
+                <div class="owner-section">
+                    <div class="owner-header">
+                        <div class="owner-name">
+                            <i class="fas fa-user-circle"></i>
+                            {{ owner }}
+                        </div>
+                        <div class="status-stats">
+                            <span class="status-badge status-RUNNING">
+                                <i class="fas fa-play-circle"></i>
+                                运行中: {{ running_count }}
+                            </span>
+                            <span class="status-badge status-SLEEPING">
+                                <i class="fas fa-moon"></i>
+                                休眠: {{ sleeping_count }}
+                            </span>
+                            <span class="status-badge status-STOPPED">
+                                <i class="fas fa-stop-circle"></i>
+                                停止: {{ stopped_count }}
+                            </span>
+                            <span class="status-badge status-FAILED">
+                                <i class="fas fa-exclamation-circle"></i>
+                                失败: {{ failed_count }}
+                            </span>
                         </div>
-                        <span class="status-badge status-{{ space.status }}">
-                            <i class="fas fa-circle"></i>
-                            {{ space.status }}
-                        </span>
                     </div>
                     
-                    <div class="space-content">
-                        <div class="space-info">
-                            <div class="info-item">
-                                <span class="info-label">Space ID</span>
-                                <span class="info-value">{{ space.repo_id }}</span>
-                            </div>
-                            <div class="info-item">
-                                <span class="info-label">创建时间</span>
-                                <span class="info-value">{{ space.created_at }}</span>
+                    <div class="space-grid">
+                        {% for space in owner_spaces %}
+                        <div class="space-card" data-space-id="{{ space.repo_id }}">
+                            <div class="space-header">
+                                <div class="space-name">
+                                    <i class="fas fa-cube"></i>
+                                    {{ space.name }}
+                                </div>
+                                <span class="status-badge status-{{ space.status }}">
+                                    <i class="fas fa-circle"></i>
+                                    {{ space.status }}
+                                </span>
                             </div>
-                            <div class="info-item">
-                                <span class="info-label">最后修改</span>
-                                <span class="info-value">{{ space.last_modified }}</span>
+                            
+                            <div class="space-content">
+                                <div class="space-info">
+                                    <div class="info-item">
+                                        <span class="info-label">Space ID</span>
+                                        <span class="info-value">{{ space.repo_id }}</span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="info-label">创建时间</span>
+                                        <span class="info-value">{{ space.created_at }}</span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="info-label">最后修改</span>
+                                        <span class="info-value">{{ space.last_modified }}</span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="info-label">应用端口</span>
+                                        <span class="info-value">{{ space.app_port }}</span>
+                                    </div>
+                                </div>
+
+                                <div class="space-metrics">
+                                    <div class="metric-item">
+                                        <div class="metric-value">{{ space.sdk }}</div>
+                                        <div class="metric-label">SDK 版本</div>
+                                    </div>
+                                    <div class="metric-item">
+                                        <div class="metric-value">{{ '私有' if space.private else '公开' }}</div>
+                                        <div class="metric-label">访问权限</div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="info-item">
-                                <span class="info-label">SDK 版本</span>
-                                <span class="info-value">{{ space.sdk }}</span>
-                            </div>
-                            <div class="info-item">
-                                <span class="info-label">应用端口</span>
-                                <span class="info-value">{{ space.app_port }}</span>
-                            </div>
-                            <div class="info-item">
-                                <span class="info-label">访问权限</span>
-                                <span class="info-value">{{ '私有' if space.private else '公开' }}</span>
+
+                            <div class="action-buttons">
+                                <a href="{{ space.url }}" target="_blank" class="action-button">
+                                    <i class="fas fa-external-link-alt"></i>
+                                    查看
+                                </a>
+                                <button onclick="confirmAction('restart', '{{ space.repo_id }}')" class="action-button restart">
+                                    <i class="fas fa-sync-alt"></i>
+                                    重启
+                                </button>
+                                <button onclick="confirmAction('rebuild', '{{ space.repo_id }}')" class="action-button">
+                                    <i class="fas fa-tools"></i>
+                                    重建
+                                </button>
                             </div>
                         </div>
-                    </div>
-
-                    <div class="action-buttons">
-                        <a href="{{ space.url }}" target="_blank" class="action-button">
-                            <i class="fas fa-external-link-alt"></i>
-                            查看
-                        </a>
-                        <button onclick="confirmAction('restart', '{{ space.repo_id }}')" class="action-button restart">
-                            <i class="fas fa-sync-alt"></i>
-                            重启
-                        </button>
-                        <button onclick="confirmAction('rebuild', '{{ space.repo_id }}')" class="action-button">
-                            <i class="fas fa-tools"></i>
-                            重建
-                        </button>
+                        {% endfor %}
                     </div>
                 </div>
-                {% endfor %}
-            </div>
+            {% endfor %}
         {% else %}
-            <div class="dashboard-header">
+            <div class="owner-section">
                 <p style="text-align: center; padding: 2rem; color: var(--text-secondary);">
                     <i class="fas fa-info-circle"></i>
                     没有找到任何 Spaces。请确保你的账户中有创建的 Spaces，并且提供的 token 有正确的权限。
@@ -703,80 +621,35 @@
     <script>
         const socket = io();
         
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-        
-        // 初始化主题
-        if (localStorage.getItem('theme')) {
-            document.body.dataset.theme = localStorage.getItem('theme');
-            updateThemeIcon();
-        } else {
-            document.body.dataset.theme = prefersDarkScheme.matches ? 'dark' : 'light';
-            updateThemeIcon();
-        }
-
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.body.dataset.theme;
-            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-            document.body.dataset.theme = newTheme;
-            localStorage.setItem('theme', newTheme);
-            updateThemeIcon();
+        // 页面加载完成后隐藏加载动画
+        window.addEventListener('load', function() {
+            document.getElementById('loading').style.display = 'none';
         });
 
-        function updateThemeIcon() {
-            const icon = themeToggle.querySelector('i');
-            icon.className = document.body.dataset.theme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
-        }
-
-        // 批量操作相关
-        let selectedSpaces = new Set();
-
-        function updateSelection(checkbox) {
-            const spaceCard = checkbox.closest('.space-card');
-            const spaceId = spaceCard.dataset.spaceId;
-            
-            if (checkbox.checked) {
-                selectedSpaces.add(spaceId);
-                spaceCard.classList.add('selected');
-            } else {
-                selectedSpaces.delete(spaceId);
-                spaceCard.classList.remove('selected');
-            }
-            
-            const selectedCount = selectedSpaces.size;
-            document.getElementById('selectedCount').textContent = selectedCount;
-            document.getElementById('bulkActions').style.display = selectedCount > 0 ? 'flex' : 'none';
-        }
-
-        function bulkRestart() {
-            if (confirm(`确定要重启选中的 ${selectedSpaces.size} 个 Spaces 吗？`)) {
-                document.getElementById('loading').style.display = 'flex';
-                // 这里添加批量重启的 API 调用
-                console.log('Restarting spaces:', Array.from(selectedSpaces));
-            }
-        }
-
-        function bulkStop() {
-            if (confirm(`确定要停止选中的 ${selectedSpaces.size} 个 Spaces 吗？`)) {
-                document.getElementById('loading').style.display = 'flex';
-                // 这里添加批量停止的 API 调用
-                console.log('Stopping spaces:', Array.from(selectedSpaces));
-            }
-        }
-
         // 搜索功能
         document.getElementById('spaceSearch').addEventListener('input', function(e) {
             const searchTerm = e.target.value.toLowerCase();
             document.querySelectorAll('.space-card').forEach(card => {
                 const spaceName = card.querySelector('.space-name').textContent.toLowerCase();
                 const spaceId = card.dataset.spaceId.toLowerCase();
-                const visible = spaceName.includes(searchTerm) || spaceId.includes(searchTerm);
-                card.style.display = visible ? '' : 'none';
+                if (spaceName.includes(searchTerm) || spaceId.includes(searchTerm)) {
+                    card.style.display = '';
+                } else {
+                    card.style.display = 'none';
+                }
             });
         });
 
-        // WebSocket 和状态更新
+        // 主题切换
+        const themeToggle = document.querySelector('.theme-toggle');
+        themeToggle.addEventListener('click', function() {
+            document.body.classList.toggle('light-theme');
+            const icon = this.querySelector('i');
+            icon.classList.toggle('fa-sun');
+            icon.classList.toggle('fa-moon');
+        });
+
+        // WebSocket 连接
         socket.on('connect', () => {
             console.log('Connected to server');
         });
@@ -796,10 +669,6 @@
                 socket.connect();
             }
         });
-        
-        window.addEventListener('load', function() {
-            document.getElementById('loading').style.display = 'none';
-        });
 
         function updateSpaceStatuses() {
             document.querySelectorAll('.space-card').forEach(card => {
@@ -825,7 +694,19 @@
             }
         }
 
+        // 每30秒更新状态
         setInterval(updateSpaceStatuses, 30000);
+
+        // 添加卡片动画
+        document.querySelectorAll('.space-card').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                this.style.transform = 'translateY(-5px)';
+            });
+            
+            card.addEventListener('mouseleave', function() {
+                this.style.transform = 'translateY(0)';
+            });
+        });
     </script>
 </body>
 </html>