Update public/index.html

public/index.html

@@ -2,7 +2,7 @@
 <html lang="zh">
 <head>
   <meta charset="UTF-8">
-  <title>HuggingFace 实例监控面板</title>
+  <title>HF Space Manager</title>
   <style>
     * {
       margin: 0;
@@ -369,54 +369,90 @@
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
-    /* 过滤与排序控件样式 */
-    .filter-sort-container {
+    /* 优化后的过滤与排序控件样式 */
+    .filter-sort-panel {
+      background: var(--card-background);
+      border: 1px solid var(--card-border);
+      border-radius: 10px;
+      padding: 15px;
+      margin-bottom: 25px;
       display: flex;
-      gap: 15px;
-      margin-bottom: 20px;
       flex-wrap: wrap;
+      gap: 20px;
+      align-items: center;
+      transition: background 0.3s ease, border 0.3s ease;
     }
     .filter-sort-group {
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: 10px;
       font-size: 14px;
       color: var(--text-color);
+      min-width: 220px; /* 确保控件有足够的宽度 */
     }
     .filter-sort-group label {
       white-space: nowrap;
+      color: var(--secondary-text);
+      font-weight: 500;
     }
     .filter-sort-group select {
+      flex: 1;
       background: var(--metric-background);
       border: 1px solid var(--metric-border);
       color: var(--text-color);
-      padding: 8px;
-      border-radius: 5px;
+      padding: 8px 12px;
+      border-radius: 6px;
       cursor: pointer;
-      min-width: 120px;
+      font-size: 14px;
+      transition: background 0.2s ease, border 0.2s ease;
+      outline: none;
+      appearance: none; /* 移除默认的下拉箭头 */
+      background-image: url("data:image/svg+xml;utf8,<svg fill='%23fff' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      padding-right: 36px; /* 为箭头留出空间 */
+    }
+    [data-theme="light"] .filter-sort-group select {
+      background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
     }
     .filter-sort-group select:hover {
-      background: var(--metric-hover);
+      background-color: var(--metric-hover);
+      border-color: rgba(255, 255, 255, 0.15); /* 微调 hover 时的边框 */
+    }
+    .filter-sort-group select:focus {
+      border-color: #4CAF50;
+      box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
     }
     .refresh-button {
       background: var(--action-button-bg);
       border: none;
       color: var(--text-color);
-      padding: 6px 12px;
-      border-radius: 4px;
+      padding: 8px 16px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 13px;
-      transition: background 0.2s ease;
+      font-size: 14px;
+      transition: background 0.2s ease, transform 0.2s ease;
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: 8px;
+      height: 40px;
     }
     .refresh-button:hover {
       background: var(--action-button-hover);
+      transform: translateY(-1px);
     }
     .refresh-icon {
       width: 16px;
       height: 16px;
+      fill: currentColor;
+    }
+    @media (max-width: 768px) {
+      .filter-sort-group {
+        min-width: 100%; /* 小屏时控件占满一行 */
+      }
+      .filter-sort-panel {
+        gap: 15px; /* 小屏时减少间距 */
+      }
     }
   </style>
 </head>
@@ -457,12 +493,12 @@
         <div>总下载: <span id="totalDownload">0 B/s</span></div>
       </div>
     </div>
-    <!-- 过滤与排序控件 -->
-    <div class="filter-sort-container">
+    <!-- 优化后的过滤与排序面板 -->
+    <div class="filter-sort-panel">
       <div class="filter-sort-group">
         <label for="statusFilter">过滤状态:</label>
         <select id="statusFilter" onchange="applyFiltersAndSort()">
-          <option value="all">全部</option>
+          <option value="all">全部状态</option>
           <option value="running">运行中</option>
           <option value="sleeping">休眠中</option>
           <option value="stopped">已停止</option>
@@ -471,7 +507,7 @@
       <div class="filter-sort-group">
         <label for="userFilter">过滤用户:</label>
         <select id="userFilter" onchange="applyFiltersAndSort()">
-          <option value="all">全部</option>
+          <option value="all">全部用户</option>
         </select>
       </div>
       <div class="filter-sort-group">
@@ -518,6 +554,7 @@
   </div>
 
   <script>
+    // 脚本部分保持不变，继续使用之前的逻辑
     // 主题切换功能
     function setTheme(theme) {
       if (theme === 'system') {
@@ -765,7 +802,7 @@
         document.getElementById('totalUsers').textContent = usernamesList.length;
         // 更新用户过滤下拉菜单
         const userFilter = document.getElementById('userFilter');
-        userFilter.innerHTML = '<option value="all">全部</option>';
+        userFilter.innerHTML = '<option value="all">全部用户</option>';
         usernamesList.forEach(username => {
           const option = document.createElement('option');
           option.value = username;