chore: sync local changes (2026-03-12)

mengyamonitor-frontend/src/App.tsx

@@ -1,34 +1,80 @@
 import { useState, useEffect } from 'react';
 import type { ServerConfig } from './types';
-import { loadServers, saveServers, removeServer } from './utils/storage';
+import { loadServers, saveServers, removeServer, exportServersToClipboard, importServersFromClipboard } from './utils/storage';
 import { useServerMonitor } from './hooks/useServerMonitor';
 import { ServerCard } from './components/ServerCard/ServerCard';
 import { ServerDetail } from './components/ServerDetail/ServerDetail';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+} from '@dnd-kit/sortable';
 import './App.css';
 
+const formatServerUrl = (url: string) => {
+  let formatted = url.trim();
+  
+  // Fix common typo .op -> .top based on user requirement
+  if (formatted.endsWith('.op')) {
+    formatted = formatted.slice(0, -3) + '.top';
+  }
+
+  if (formatted && !/^https?:\/\//i.test(formatted)) {
+    return `http://${formatted}`;
+  }
+  return formatted;
+};
+
 function App() {
   const [servers, setServers] = useState<ServerConfig[]>([]);
   const [showAddForm, setShowAddForm] = useState(false);
   const [selectedServerId, setSelectedServerId] = useState<string | null>(null);
   const [newServerForm, setNewServerForm] = useState({ name: '', url: '' });
+  const [showHeader, setShowHeader] = useState(true);
 
   const statuses = useServerMonitor(servers, 2000);
 
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
   useEffect(() => {
     const loaded = loadServers();
     setServers(loaded);
   }, []);
 
+  const handleUrlBlur = () => {
+    const formatted = formatServerUrl(newServerForm.url);
+    if (formatted !== newServerForm.url) {
+      setNewServerForm(prev => ({ ...prev, url: formatted }));
+    }
+  };
+
   const handleAddServer = () => {
     if (!newServerForm.name || !newServerForm.url) {
       alert('请填写服务器名称和地址');
       return;
     }
 
+    const formattedUrl = formatServerUrl(newServerForm.url);
+
     const newServer: ServerConfig = {
       id: Date.now().toString(),
       name: newServerForm.name,
-      url: newServerForm.url,
+      url: formattedUrl,
       enabled: true,
     };
 
@@ -51,20 +97,94 @@ function App() {
     setSelectedServerId(serverId);
   };
 
+  const handleExportServers = async () => {
+    try {
+      await exportServersToClipboard();
+      alert('服务器配置已复制到剪贴板！');
+    } catch (error) {
+      alert(error instanceof Error ? error.message : '导出失败');
+    }
+  };
+
+  const handleImportServers = async () => {
+    if (!confirm('导入服务器配置将添加到现有服务器列表中，是否继续？')) {
+      return;
+    }
+
+    try {
+      const importedServers = await importServersFromClipboard();
+      const updated = [...servers, ...importedServers];
+      setServers(updated);
+      saveServers(updated);
+      alert(`成功导入 ${importedServers.length} 个服务器配置！`);
+    } catch (error) {
+      alert(error instanceof Error ? error.message : '导入失败');
+    }
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setServers((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        const newOrder = arrayMove(items, oldIndex, newIndex);
+        saveServers(newOrder);
+        return newOrder;
+      });
+    }
+  };
+
   const selectedStatus = selectedServerId ? statuses[selectedServerId] : null;
   const selectedServer = servers.find(s => s.id === selectedServerId);
 
   return (
     <div className="app">
-      <header className="app-header">
-        <h1>
-          <img className="app-logo" src="/logo.png" alt="萌芽监控面板" />
-          萌芽监控面板
-        </h1>
-        <button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
-          {showAddForm ? '×' : '+'}
+      {!showHeader && (
+        <button
+          className="btn-show-header"
+          onClick={() => setShowHeader(true)}
+          title="显示导航栏"
+        >
+          👁️
         </button>
+      )}
+      
+      {showHeader && (
+        <header className="app-header">
+          <h1>
+            <img className="app-logo" src="/logo.svg" alt="萌芽监控面板" />
+            萌芽监控面板
+          </h1>
+          <div className="header-actions">
+            <button 
+              className="btn-icon" 
+              onClick={() => setShowHeader(false)}
+              title="隐藏导航栏"
+            >
+              👁️
+            </button>
+            <button 
+              className="btn-icon" 
+              onClick={handleExportServers} 
+              title="导出服务器配置到剪贴板"
+            >
+              📤
+            </button>
+          <button 
+            className="btn-icon" 
+            onClick={handleImportServers} 
+            title="从剪贴板导入服务器配置"
+          >
+            📥
+          </button>
+          <button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
+            {showAddForm ? '×' : '+'}
+          </button>
+        </div>
       </header>
+      )}
 
       {showAddForm && (
         <div className="add-form">
@@ -79,6 +199,7 @@ function App() {
             placeholder="服务器地址 (例如: http://192.168.1.100:9292)"
             value={newServerForm.url}
             onChange={(e) => setNewServerForm({ ...newServerForm, url: e.target.value })}
+            onBlur={handleUrlBlur}
           />
           <button className="btn-submit" onClick={handleAddServer}>
             添加
@@ -93,26 +214,34 @@ function App() {
             <p className="hint">点击右上角的"添加服务器"按钮开始使用</p>
           </div>
         ) : (
-          servers.map((server) => {
-            const status = statuses[server.id];
-            // Calculate storage usage (max of all mounts)
-            const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
-            
-            return (
-              <ServerCard
-                key={server.id}
-                server={server}
-                online={status?.online || false}
-                metrics={status?.metrics}
-                cpuUsage={status?.metrics?.cpu.usagePercent || 0}
-                memoryUsage={status?.metrics?.memory.usedPercent || 0}
-                storageUsage={storageUsage} // Pass max storage usage
-                uptime={status?.metrics?.uptimeSeconds}
-                onDetail={handleShowDetail}
-                onRemove={handleRemoveServer}
-              />
-            );
-          })
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext items={servers.map((s) => s.id)} strategy={rectSortingStrategy}>
+              {servers.map((server) => {
+                const status = statuses[server.id];
+                // Calculate storage usage (max of all mounts)
+                const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
+                
+                return (
+                  <ServerCard
+                    key={server.id}
+                    server={server}
+                    online={status?.online || false}
+                    metrics={status?.metrics}
+                    cpuUsage={status?.metrics?.cpu.usagePercent || 0}
+                    memoryUsage={status?.metrics?.memory.usedPercent || 0}
+                    storageUsage={storageUsage} // Pass max storage usage
+                    uptime={status?.metrics?.uptimeSeconds}
+                    onDetail={handleShowDetail}
+                    onRemove={handleRemoveServer}
+                  />
+                );
+              })}
+            </SortableContext>
+          </DndContext>
         )}
       </main>