update

src/remix.sh

@@ -16,6 +16,8 @@ pnpm add @types/node @types/react @types/react-dom --save-dev
 
 # 复制 sshx 路由文件
 cp ${HOMEDIR}/sshx.tsx ${HOMEDIR}/${REMIX_NAME}/app/routes/sshx.tsx
+
+# 构建应用
 pnpm run build
 
 # 返回 HOMEDIR

src/sshx.tsx

@@ -1,65 +1,154 @@
-import React, { useState, useEffect } from 'react';
-import { json, ActionFunction } from '@remix-run/node';
-import { useLoaderData, Form, useSubmit } from '@remix-run/react';
-import { spawn, ChildProcess } from 'child_process';
+/// <reference types="node" />
 
+import React, { useState, useEffect, useCallback } from 'react';
+import { json, type ActionFunction, type LoaderFunction } from '@remix-run/node';
+import { useLoaderData, Form, useSubmit, useNavigation } from '@remix-run/react';
+import { spawn, type ChildProcess } from 'child_process';
+
+// 定义类型
+type SshxStatus = 'running' | 'stopped';
+
+interface LoaderData {
+  status: SshxStatus;
+  output: string;
+  link: string | null;
+  shell: string | null;
+}
+
+// 服务器端状态
 let sshxProcess: ChildProcess | null = null;
 let sshxOutput = '';
 
-export const loader = async () => {
-    return json({ status: sshxProcess ? 'running' : 'stopped', output: sshxOutput });
+export const loader: LoaderFunction = async () => {
+  const status: SshxStatus = sshxProcess ? 'running' : 'stopped';
+  const link = extractFromOutput(sshxOutput, /Link:\s+(https:\/\/sshx\.io\/s\/[^\s]+)/);
+  const shell = extractFromOutput(sshxOutput, /Shell:\s+([^\n]+)/);
+  return json<LoaderData>({ status, output: sshxOutput, link, shell });
 };
 
 export const action: ActionFunction = async ({ request }) => {
-    const formData = await request.formData();
-    const action = formData.get('action');
-
-    if (action === 'start' && !sshxProcess) {
-        sshxProcess = spawn('/home/pn/sshx/sshx', []);
-        sshxProcess.stdout?.on('data', (data: Buffer) => {
-            sshxOutput += data.toString();
-        });
-        sshxProcess.stderr?.on('data', (data: Buffer) => {
-            sshxOutput += data.toString();
-        });
-        return json({ status: 'started' });
-    } else if (action === 'stop' && sshxProcess) {
-        sshxProcess.kill();
-        sshxProcess = null;
-        return json({ status: 'stopped' });
-    }
-
-    return json({ error: 'Invalid action' }, { status: 400 });
+  const formData = await request.formData();
+  const action = formData.get('action');
+
+  if (action === 'start' && !sshxProcess) {
+    sshxProcess = spawn('/home/pn/sshx/sshx', []);
+    sshxProcess.stdout?.on('data', handleProcessOutput);
+    sshxProcess.stderr?.on('data', handleProcessOutput);
+    sshxProcess.on('close', handleProcessClose);
+    return json({ status: 'started' });
+  } else if (action === 'stop' && sshxProcess) {
+    sshxProcess.kill();
+    handleProcessClose();
+    return json({ status: 'stopped' });
+  }
+
+  return json({ error: 'Invalid action' }, { status: 400 });
 };
 
+function handleProcessOutput(data: Buffer) {
+  sshxOutput += data.toString();
+}
+
+function handleProcessClose() {
+  sshxProcess = null;
+  sshxOutput += '\nSSHX process has ended.';
+}
+
+function extractFromOutput(output: string, regex: RegExp): string | null {
+  const match = output.match(regex);
+  return match ? match[1] : null;
+}
+
 export default function Sshx() {
-    const { status, output } = useLoaderData<{ status: string; output: string }>();
-    const submit = useSubmit();
-    const [localOutput, setLocalOutput] = useState(output);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            submit(null, { method: 'get', replace: true });
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [submit]);
-
-    useEffect(() => {
-        setLocalOutput(output);
-    }, [output]);
-
-    return (
-        <div>
-            <h1>SSHX Control</h1>
-            <p>Status: {status}</p>
-            <Form method="post">
-                <button type="submit" name="action" value="start">Start SSHX</button>
-            </Form>
-            <Form method="post">
-                <button type="submit" name="action" value="stop">Stop SSHX</button>
-            </Form>
-            <h2>Output:</h2>
-            <pre>{localOutput}</pre>
+  const { status, output, link, shell } = useLoaderData<LoaderData>();
+  const submit = useSubmit();
+  const navigation = useNavigation();
+  const [localOutput, setLocalOutput] = useState(output);
+
+  const refreshData = useCallback(() => {
+    submit(null, { method: 'get', replace: true });
+  }, [submit]);
+
+  useEffect(() => {
+    const interval = setInterval(refreshData, 1000);
+    return () => clearInterval(interval);
+  }, [refreshData]);
+
+  useEffect(() => {
+    setLocalOutput(output);
+  }, [output]);
+
+  const isLoading = navigation.state === 'submitting' || navigation.state === 'loading';
+
+  return (
+    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
+      <h1 style={{ color: '#333', borderBottom: '2px solid #333', paddingBottom: '10px' }}>SSHX Control</h1>
+      <p style={{ fontSize: '18px', fontWeight: 'bold' }}>
+        Status: <span style={{ color: status === 'running' ? 'green' : 'red' }}>{status}</span>
+      </p>
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
+        <Form method="post">
+          <button 
+            type="submit" 
+            name="action" 
+            value="start" 
+            style={{ 
+              padding: '10px 20px', 
+              fontSize: '16px', 
+              backgroundColor: '#4CAF50', 
+              color: 'white', 
+              border: 'none', 
+              borderRadius: '5px', 
+              cursor: 'pointer',
+              opacity: status === 'running' || isLoading ? 0.5 : 1
+            }} 
+            disabled={status === 'running' || isLoading}
+          >
+            Start SSHX
+          </button>
+        </Form>
+        <Form method="post">
+          <button 
+            type="submit" 
+            name="action" 
+            value="stop" 
+            style={{ 
+              padding: '10px 20px', 
+              fontSize: '16px', 
+              backgroundColor: '#f44336', 
+              color: 'white', 
+              border: 'none', 
+              borderRadius: '5px', 
+              cursor: 'pointer',
+              opacity: status === 'stopped' || isLoading ? 0.5 : 1
+            }} 
+            disabled={status === 'stopped' || isLoading}
+          >
+            Stop SSHX
+          </button>
+        </Form>
+      </div>
+      {status === 'running' && (
+        <div style={{ backgroundColor: '#f0f0f0', padding: '15px', borderRadius: '5px', marginBottom: '20px' }}>
+          <p style={{ margin: '5px 0' }}>
+            <strong>Link:</strong>{' '}
+            {link ? (
+              <a href={link} target="_blank" rel="noopener noreferrer" style={{ color: '#1a0dab' }}>
+                {link}
+              </a>
+            ) : (
+              'Not available'
+            )}
+          </p>
+          <p style={{ margin: '5px 0' }}>
+            <strong>Shell:</strong> {shell || 'Not available'}
+          </p>
         </div>
-    );
+      )}
+      <h2 style={{ color: '#333', borderBottom: '1px solid #333', paddingBottom: '5px' }}>Output:</h2>
+      <pre style={{ backgroundColor: '#f0f0f0', padding: '15px', borderRadius: '5px', whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
+        {localOutput}
+      </pre>
+    </div>
+  );
 }