update

src/sshx.tsx

@@ -87,33 +87,43 @@ export default function Sshx() {
     };
 
     return (
-        <div className="container">
-            <h1 className="title">SSHX控制面板</h1>
-            <p className="status">
-                状态: <span className={status === 'running' ? 'status-running' : 'status-stopped'}>{status === 'running' ? '运行中' : '已停止'}</span>
-            </p>
-            <div className="button-group">
+        <div className="container mx-auto px-4 py-8 max-w-3xl">
+            <h1 className="text-3xl font-bold text-primary mb-6 pb-2 border-b-2 border-primary">SSHX控制面板</h1>
+            <div className="mb-6">
+                <p className="text-lg font-semibold">
+                    状态: <span className={`${status === 'running' ? 'text-green-600' : 'text-red-600'}`}>
+                        {status === 'running' ? '运行中' : '已停止'}
+                    </span>
+                </p>
+            </div>
+            <div className="flex space-x-4 mb-6">
                 <button
                     onClick={() => handleAction('start')}
-                    className={`button button-start ${status === 'running' || isLoading ? 'button-disabled' : ''}`}
+                    className={`px-4 py-2 rounded-md text-white transition-colors duration-300 ${status === 'running' || isLoading
+                            ? 'bg-gray-400 cursor-not-allowed'
+                            : 'bg-green-500 hover:bg-green-600'
+                        }`}
                     disabled={status === 'running' || isLoading}
                 >
                     启动SSHX
                 </button>
                 <button
                     onClick={() => handleAction('stop')}
-                    className={`button button-stop ${status === 'stopped' || isLoading ? 'button-disabled' : ''}`}
+                    className={`px-4 py-2 rounded-md text-white transition-colors duration-300 ${status === 'stopped' || isLoading
+                            ? 'bg-gray-400 cursor-not-allowed'
+                            : 'bg-red-500 hover:bg-red-600'
+                        }`}
                     disabled={status === 'stopped' || isLoading}
                 >
                     停止SSHX
                 </button>
             </div>
             {status === 'running' && (
-                <div className="info-box">
-                    <p>
-                        <strong>链接:</strong>{' '}
+                <div className="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
+                    <p className="mb-2">
+                        <strong className="font-semibold">链接:</strong>{' '}
                         {link ? (
-                            <a href={link} target="_blank" rel="noopener noreferrer" className="link">
+                            <a href={link} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                                 {link}
                             </a>
                         ) : (
@@ -121,124 +131,14 @@ export default function Sshx() {
                         )}
                     </p>
                     <p>
-                        <strong>Shell:</strong> {shell || '暂不可用'}
+                        <strong className="font-semibold">Shell:</strong> {shell || '暂不可用'}
                     </p>
                 </div>
             )}
-            <h2 className="subtitle">输出:</h2>
-            <pre className="output">{localOutput}</pre>
-
-            <style jsx>{`
-                :root {
-                    --primary-color: #4a90e2;
-                    --secondary-color: #f5a623;
-                    --background-color: #f9f9f9;
-                    --text-color: #333;
-                    --border-color: #e0e0e0;
-                }
-
-                body {
-                    font-family: 'Arial', sans-serif;
-                    line-height: 1.6;
-                    color: var(--text-color);
-                    background-color: var(--background-color);
-                    margin: 0;
-                    padding: 0;
-                }
-
-                .container {
-                    max-width: 800px;
-                    margin: 0 auto;
-                    padding: 20px;
-                }
-
-                .title {
-                    color: var(--primary-color);
-                    border-bottom: 2px solid var(--primary-color);
-                    padding-bottom: 10px;
-                    margin-bottom: 20px;
-                }
-
-                .subtitle {
-                    color: var(--secondary-color);
-                    border-bottom: 1px solid var(--secondary-color);
-                    padding-bottom: 5px;
-                    margin-top: 20px;
-                }
-
-                .status {
-                    font-size: 18px;
-                    font-weight: bold;
-                    margin-bottom: 20px;
-                }
-
-                .status-running {
-                    color: #4CAF50;
-                }
-
-                .status-stopped {
-                    color: #f44336;
-                }
-
-                .button-group {
-                    display: flex;
-                    gap: 10px;
-                    margin-bottom: 20px;
-                }
-
-                .button {
-                    padding: 10px 20px;
-                    font-size: 16px;
-                    color: white;
-                    border: none;
-                    border-radius: 5px;
-                    cursor: pointer;
-                    transition: background-color 0.3s ease;
-                }
-
-                .button-start {
-                    background-color: #4CAF50;
-                }
-
-                .button-stop {
-                    background-color: #f44336;
-                }
-
-                .button-disabled {
-                    opacity: 0.5;
-                    cursor: not-allowed;
-                }
-
-                .info-box {
-                    background-color: #e8f4fd;
-                    padding: 15px;
-                    border-radius: 5px;
-                    margin-bottom: 20px;
-                    border: 1px solid var(--border-color);
-                }
-
-                .link {
-                    color: var(--primary-color);
-                    text-decoration: none;
-                }
-
-                .link:hover {
-                    text-decoration: underline;
-                }
-
-                .output {
-                    background-color: #f0f0f0;
-                    padding: 15px;
-                    border-radius: 5px;
-                    white-space: pre-wrap;
-                    word-wrap: break-word;
-                    border: 1px solid var(--border-color);
-                    font-family: 'Courier New', monospace;
-                    font-size: 14px;
-                    max-height: 400px;
-                    overflow-y: auto;
-                }
-            `}</style>
+            <h2 className="text-2xl font-semibold text-secondary mb-4">输出:</h2>
+            <pre className="bg-gray-100 p-4 rounded-md border border-gray-300 font-mono text-sm whitespace-pre-wrap overflow-x-auto max-h-96 overflow-y-auto">
+                {localOutput}
+            </pre>
         </div>
     );
-}
+}