略微美化了网页，虽然没啥用

src/main/resources/assets/playertime/web/css/style.css

@@ -1,77 +1,218 @@
+:root {
+  --primary-color: #4361ee;
+  --primary-hover: #3a56d4;
+  --text-color: #2b2d42;
+  --bg-color: #f8f9fa;
+  --card-bg: #ffffff;
+  --border-color: #e9ecef;
+  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  --hover-bg: #f1f3f5;
+  --even-row: #f8f9fa;
+  --transition: all 0.3s ease;
+}
+
+[data-theme="dark"] {
+  --primary-color: #3252df;
+  --primary-hover: #2360cf;
+  --text-color: #f8f9fa;
+  --bg-color: #121212;
+  --card-bg: #1e1e1e;
+  --border-color: #333;
+  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  --hover-bg: #2d2d2d;
+  --even-row: #252525;
+}
+
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    background-color: #f5f5f5;
+  background-color: var(--bg-color);
-    color: #333;
+  color: var(--text-color);
+  transition: var(--transition);
+  min-height: 100vh;
 }
 
 .container {
-    max-width: 1200px;
+  max-width: 1200px;
-    margin: 0 auto;
+  margin: 0 auto;
-    padding: 20px;
+  padding: 2rem 1.5rem;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
 }
 
 h1 {
-    color: #2c3e50;
+  color: var(--primary-color);
-    text-align: center;
+  margin: 0;
-    margin-bottom: 30px;
+  font-size: 2rem;
+  font-weight: 600;
 }
 
 .controls {
-    margin-bottom: 20px;
+  display: flex;
-    text-align: center;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.info-note {
+  margin: 0;
+  color: var(--text-color);
+  opacity: 0.8;
+  font-size: 0.9rem;
 }
 
 button {
-    background-color: #3498db;
+  transition: var(--transition);
-    color: white;
+  cursor: pointer;
-    border: none;
+  border: none;
-    padding: 10px 20px;
+  border-radius: 8px;
-    border-radius: 4px;
+  font-weight: 500;
-    cursor: pointer;
+  display: flex;
-    font-size: 16px;
+  align-items: center;
-    transition: background-color 0.3s;
+  gap: 0.5rem;
 }
 
-button:hover {
+.refresh-btn {
-    background-color: #2980b9;
+  background-color: var(--primary-color);
+  color: white;
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+}
+
+.refresh-btn:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+.refresh-btn:active {
+  transform: translateY(0);
+}
+
+.refresh-btn i {
+  transition: transform 0.5s ease;
+}
+
+.refresh-btn.loading i {
+  transform: rotate(360deg);
+}
+
+.theme-toggle {
+  background: transparent;
+  color: var(--text-color);
+  font-size: 1.25rem;
+  padding: 0.5rem;
+  position: relative;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-toggle:hover {
+  background-color: var(--hover-bg);
+}
+
+.theme-toggle i {
+  position: absolute;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.theme-toggle .fa-moon {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+[data-theme="dark"] .theme-toggle .fa-moon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+[data-theme="dark"] .theme-toggle .fa-sun {
+  opacity: 0;
+  transform: scale(0.8);
 }
 
 .stats-container {
-    background-color: white;
+  background-color: var(--card-bg);
-    border-radius: 8px;
+  border-radius: 12px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow);
-    overflow: hidden;
+  overflow: hidden;
+  transition: var(--transition);
 }
 
 table {
-    width: 100%;
+  width: 100%;
-    border-collapse: collapse;
+  border-collapse: collapse;
 }
 
 th, td {
-    padding: 12px 15px;
+  padding: 1rem 1.5rem;
-    text-align: left;
+  text-align: left;
-    border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--border-color);
+  transition: var(--transition);
 }
 
 th {
-    background-color: #3498db;
+  background-color: var(--primary-color);
-    color: white;
+  color: white;
+  font-weight: 500;
+}
+
+tr {
+  transition: var(--transition);
 }
 
 tr:hover {
-    background-color: #f1f1f1;
+  background-color: var(--hover-bg);
 }
 
 tr:nth-child(even) {
-    background-color: #f9f9f9;
+  background-color: var(--even-row);
 }
 
+/* Loading animation */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+tbody tr {
+  animation: fadeIn 0.3s ease forwards;
+  opacity: 0;
+}
+
+tbody tr:nth-child(1) { animation-delay: 0.05s; }
+tbody tr:nth-child(2) { animation-delay: 0.1s; }
+tbody tr:nth-child(3) { animation-delay: 0.15s; }
+tbody tr:nth-child(4) { animation-delay: 0.2s; }
+tbody tr:nth-child(5) { animation-delay: 0.25s; }
+tbody tr:nth-child(6) { animation-delay: 0.3s; }
+tbody tr:nth-child(7) { animation-delay: 0.35s; }
+tbody tr:nth-child(8) { animation-delay: 0.4s; }
+tbody tr:nth-child(9) { animation-delay: 0.45s; }
+tbody tr:nth-child(10) { animation-delay: 0.5s; }
+
 @media (max-width: 768px) {
-    table {
+  .container {
-        display: block;
+    padding: 1.5rem 1rem;
-        overflow-x: auto;
+  }
-    }
+
+  th, td {
+    padding: 0.75rem 1rem;
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+  }
 }

src/main/resources/assets/playertime/web/index.html

@@ -5,12 +5,22 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>[在线时间] 玩家在线时间</title>
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
 <div class="container">
-  <h1>玩家在线时间统计</h1>
+  <div class="header">
+    <h1>玩家在线时间统计</h1>
+    <button id="theme-toggle" class="theme-toggle" aria-label="切换主题">
+      <i class="fas fa-moon"></i>
+      <i class="fas fa-sun"></i>
+    </button>
+  </div>
   <div class="controls">
-    <button id="refresh-btn">刷新数据</button>
+    <button id="refresh-btn" class="refresh-btn">
+      <i class="fas fa-sync-alt"></i>
+      <span>刷新数据</span>
+    </button>
     <p class="info-note">仅跟踪和显示列入白名单的玩家</p>
   </div>
   <div class="stats-container">

src/main/resources/assets/playertime/web/js/app.js

@@ -1,10 +1,29 @@
 document.addEventListener('DOMContentLoaded', function() {
     const refreshBtn = document.getElementById('refresh-btn');
+    const themeToggle = document.getElementById('theme-toggle');
     const statsTable = document.getElementById('stats-table').getElementsByTagName('tbody')[0];
 
+    // 初始化主题
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+
+    // 主题切换功能
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+    });
+
     loadStats();
 
-    refreshBtn.addEventListener('click', loadStats);
+    refreshBtn.addEventListener('click', function() {
+        refreshBtn.classList.add('loading');
+        loadStats();
+        setTimeout(() => {
+            refreshBtn.classList.remove('loading');
+        }, 1000);
+    });
 
     function loadStats() {
         fetch('/api/stats')
@@ -14,12 +33,11 @@ document.addEventListener('DOMContentLoaded', function() {
             })
             .catch(error => {
                 console.error('获取统计信息时出错：', error);
-                alert('未能加载玩家统计信息。 检查控制台以获取详细信息');
+                showError('未能加载玩家统计信息。 检查控制台以获取详细信息');
             });
     }
 
     function updateTable(statsData) {
-        const statsTable = document.getElementById('stats-table').getElementsByTagName('tbody')[0];
         statsTable.innerHTML = '';
 
         Object.entries(statsData).forEach(([playerName, statString]) => {
@@ -45,6 +63,24 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    function showError(message) {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'error-message';
+        errorEl.textContent = message;
+        document.body.appendChild(errorEl);
+
+        setTimeout(() => {
+            errorEl.classList.add('show');
+        }, 10);
+
+        setTimeout(() => {
+            errorEl.classList.remove('show');
+            setTimeout(() => {
+                document.body.removeChild(errorEl);
+            }, 300);
+        }, 5000);
+    }
+
     function parseTime(timeStr) {
         const [hPart, mPart] = timeStr.split(' ');
         const hours = parseInt(hPart.replace('h', ''));