增加重启功能

ui/src/assets/theme.css

@@ -477,8 +477,107 @@
   border: 1px solid var(--color-danger);
 }
 
-/* 响应式工具类 */
+/* 按钮组布局样式 */
+.btn-group {
+  display: flex;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+.btn-group-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.btn-group-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: var(--spacing-md);
+}
+
+.btn-group-space-between {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+/* 操作组容器样式 */
+.action-group {
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border);
+  transition: all var(--transition-normal);
+  margin-bottom: var(--spacing-lg);
+}
+
+.action-group:hover {
+  box-shadow: var(--shadow-sm);
+  border-color: var(--color-border-hover);
+}
+
+.action-group-title {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.action-group-title::before {
+  content: '';
+  width: 3px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--color-primary);
+}
+
+.primary-actions .action-group-title::before {
+  background: var(--color-primary);
+}
+
+.secondary-actions .action-group-title::before {
+  background: var(--color-info);
+}
+
+.danger-actions .action-group-title::before {
+  background: var(--color-danger);
+}
+
+/* 按钮图标样式 */
+.btn-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: var(--spacing-sm);
+  flex-shrink: 0;
+}
+
+.btn-icon-only {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+}
+
+/* 响应式按钮组 */
 @media (max-width: 768px) {
+  .btn-group-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .btn-group-space-between {
+    flex-direction: column;
+  }
+  
+  .action-group {
+    padding: var(--spacing-md);
+  }
+
   .mobile-stack {
     flex-direction: column !important;
   }

ui/src/components/common/SettingsWidget.vue

@@ -137,7 +137,7 @@
               <!-- 主要操作按钮组 -->
               <div class="action-group primary-actions">
                 <h6 class="action-group-title">配置管理</h6>
-                <div class="action-buttons grid grid-cols-2">
+                <div class="btn-group grid grid-cols-2">
                   <button @click="saveConfig" class="btn btn-primary btn-enhanced" :disabled="saving">
                     <SvgIcon name="save" class="btn-icon" />
                     {{ saving ? '保存中...' : '保存配置' }}
@@ -152,7 +152,7 @@
               <!-- 缓存管理按钮组 -->
               <div class="action-group secondary-actions">
                 <h6 class="action-group-title">缓存管理</h6>
-                <div class="action-buttons grid grid-cols-2">
+                <div class="btn-group grid grid-cols-2">
                   <button @click="clearExpiredCache" class="btn btn-secondary btn-enhanced hover-primary"
                     :disabled="clearing">
                     <SvgIcon name="clean" class="btn-icon" />
@@ -167,8 +167,12 @@
 
               <!-- 危险操作按钮组 -->
               <div class="action-group danger-actions">
-                <h6 class="action-group-title">重置操作</h6>
-                <div class="action-buttons">
+                <h6 class="action-group-title">系统操作</h6>
+                <div class="btn-group grid grid-cols-2">
+                  <button @click="restartServer" class="btn btn-warning btn-enhanced" :disabled="restarting">
+                    <SvgIcon name="refresh" class="btn-icon" />
+                    {{ restarting ? '重启中...' : '重启服务器' }}
+                  </button>
                   <button @click="resetConfig" class="btn btn-danger btn-enhanced" :disabled="resetting">
                     <SvgIcon name="reset" class="btn-icon" />
                     {{ resetting ? '重置中...' : '重置为默认配置' }}
@@ -187,6 +191,7 @@
 import { ref, computed, onMounted } from 'vue';
 import cacheService, { type CacheConfig, type CacheStats } from '@/services/cache';
 import authService from '@/services/auth';
+import apiService from '@/services/api';
 import LoadingSpinner from './LoadingSpinner.vue';
 import ErrorMessage from './ErrorMessage.vue';
 
@@ -196,6 +201,7 @@ const loading = ref(false);
 const error = ref<string | null>(null);
 const clearing = ref(false);
 const resetting = ref(false);
+const restarting = ref(false);
 const saving = ref(false);
 const refreshing = ref(false);
 const successMessage = ref<string | null>(null);
@@ -497,6 +503,36 @@ const refreshToken = async () => {
   }
 };
 
+const restartServer = async () => {
+  if (!confirm('确定要重启服务器吗？这将中断当前的所有连接和下载任务。')) {
+    return;
+  }
+
+  try {
+    restarting.value = true;
+    error.value = null;
+    
+    // 调用重启接口
+    const response = await apiService.post('/api/system/restart');
+    
+    if (response.success) {
+      showSuccess('服务器重启请求已发送，页面将在几秒后自动刷新...');
+      
+      // 延迟刷新页面，给服务器时间重启
+      setTimeout(() => {
+        window.location.reload();
+      }, 3000);
+    } else {
+      error.value = response.error || '重启服务器失败';
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '重启服务器失败';
+    console.error('重启服务器失败:', err);
+  } finally {
+    restarting.value = false;
+  }
+};
+
 const clearError = () => {
   error.value = null;
 };