|
|
@@ -143,15 +143,15 @@ export default function RemoteServerControl() {
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
- <div className="space-y-6">
|
|
|
+ <div className="space-y-4 sm:space-y-6">
|
|
|
{/* 服务器连接配置 */}
|
|
|
- <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
|
|
|
- <div className="flex items-center justify-between mb-4">
|
|
|
+ <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-4 sm:p-6">
|
|
|
+ <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
|
|
|
<div className="flex items-center gap-2">
|
|
|
<Server className="text-blue-600" size={24} />
|
|
|
- <h2 className="text-xl font-semibold text-slate-800">服务器连接配置</h2>
|
|
|
+ <h2 className="text-lg sm:text-xl font-semibold text-slate-800">服务器连接配置</h2>
|
|
|
</div>
|
|
|
- <div className="flex bg-slate-100 p-1 rounded-md">
|
|
|
+ <div className="flex bg-slate-100 p-1 rounded-md self-start sm:self-auto">
|
|
|
<button
|
|
|
onClick={() => {
|
|
|
if (!isConnected) setUsePreConfigured(true);
|
|
|
@@ -188,7 +188,7 @@ export default function RemoteServerControl() {
|
|
|
<select
|
|
|
value={selectedServerId}
|
|
|
onChange={(e) => setSelectedServerId(e.target.value)}
|
|
|
- className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
|
|
disabled={isConnected}
|
|
|
>
|
|
|
<option value="">-- 请选择服务器 --</option>
|
|
|
@@ -203,73 +203,73 @@ export default function RemoteServerControl() {
|
|
|
) : (
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
|
<div>
|
|
|
- <label className="block text-sm font-medium text-slate-700 mb-1">服务器地址 *</label>
|
|
|
+ <label className="block text-sm font-medium text-slate-700 mb-1 text-xs sm:text-sm">服务器地址 *</label>
|
|
|
<input
|
|
|
type="text"
|
|
|
value={serverConfig.host}
|
|
|
onChange={(e) => setServerConfig({ ...serverConfig, host: e.target.value })}
|
|
|
placeholder="192.168.1.100"
|
|
|
- className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
|
|
disabled={isConnected}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <label className="block text-sm font-medium text-slate-700 mb-1">SSH端口</label>
|
|
|
+ <label className="block text-sm font-medium text-slate-700 mb-1 text-xs sm:text-sm">SSH端口</label>
|
|
|
<input
|
|
|
type="number"
|
|
|
value={serverConfig.port}
|
|
|
onChange={(e) => setServerConfig({ ...serverConfig, port: parseInt(e.target.value) || 22 })}
|
|
|
placeholder="22"
|
|
|
- className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
|
|
disabled={isConnected}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <label className="block text-sm font-medium text-slate-700 mb-1">用户名 *</label>
|
|
|
+ <label className="block text-sm font-medium text-slate-700 mb-1 text-xs sm:text-sm">用户名 *</label>
|
|
|
<input
|
|
|
type="text"
|
|
|
value={serverConfig.username}
|
|
|
onChange={(e) => setServerConfig({ ...serverConfig, username: e.target.value })}
|
|
|
placeholder="root"
|
|
|
- className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
|
|
disabled={isConnected}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <label className="block text-sm font-medium text-slate-700 mb-1">密码</label>
|
|
|
+ <label className="block text-sm font-medium text-slate-700 mb-1 text-xs sm:text-sm">密码</label>
|
|
|
<input
|
|
|
type="password"
|
|
|
value={serverConfig.password || ''}
|
|
|
onChange={(e) => setServerConfig({ ...serverConfig, password: e.target.value })}
|
|
|
placeholder="SSH密码"
|
|
|
- className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
|
|
disabled={isConnected}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <label className="block text-sm font-medium text-slate-700 mb-1">私钥文件路径</label>
|
|
|
+ <label className="block text-sm font-medium text-slate-700 mb-1 text-xs sm:text-sm">私钥文件路径</label>
|
|
|
<input
|
|
|
type="text"
|
|
|
value={serverConfig.key_file || ''}
|
|
|
onChange={(e) => setServerConfig({ ...serverConfig, key_file: e.target.value })}
|
|
|
placeholder="/path/to/key.pem"
|
|
|
- className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
|
|
disabled={isConnected}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <label className="block text-sm font-medium text-slate-700 mb-1">项目路径</label>
|
|
|
+ <label className="block text-sm font-medium text-slate-700 mb-1 text-xs sm:text-sm">项目路径</label>
|
|
|
<input
|
|
|
type="text"
|
|
|
value={serverConfig.project_path}
|
|
|
onChange={(e) => setServerConfig({ ...serverConfig, project_path: e.target.value })}
|
|
|
placeholder="/root/troov-asyncio"
|
|
|
- className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
|
|
disabled={isConnected}
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -278,23 +278,23 @@ export default function RemoteServerControl() {
|
|
|
|
|
|
<div className="mt-4 space-y-2">
|
|
|
{connectionError && (
|
|
|
- <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-md text-sm">
|
|
|
+ <div className="bg-red-50 border border-red-200 text-red-700 px-3 sm:px-4 py-2 rounded-md text-xs sm:text-sm overflow-x-auto whitespace-pre-wrap">
|
|
|
{connectionError}
|
|
|
</div>
|
|
|
)}
|
|
|
{isConnected && (
|
|
|
- <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-2 rounded-md text-sm flex items-center gap-2">
|
|
|
+ <div className="bg-green-50 border border-green-200 text-green-700 px-3 sm:px-4 py-2 rounded-md text-xs sm:text-sm flex items-center gap-2">
|
|
|
<Server size={16} />
|
|
|
已连接到服务器
|
|
|
</div>
|
|
|
)}
|
|
|
- <div className="flex gap-2">
|
|
|
+ <div className="flex flex-wrap gap-2">
|
|
|
{!isConnected ? (
|
|
|
<>
|
|
|
<button
|
|
|
onClick={handleConnect}
|
|
|
disabled={connecting}
|
|
|
- className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
|
+ className="px-4 py-2 bg-blue-600 text-white text-sm sm:text-base rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
|
>
|
|
|
<Server size={18} className={connecting ? 'animate-pulse' : ''} />
|
|
|
{connecting ? '连接中...' : '连接服务器'}
|
|
|
@@ -308,7 +308,7 @@ export default function RemoteServerControl() {
|
|
|
alert(`API 测试失败: ${err.response?.status || '无响应'} - ${err.response?.data?.message || err.message}`);
|
|
|
}
|
|
|
}}
|
|
|
- className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors flex items-center gap-2"
|
|
|
+ className="px-4 py-2 bg-gray-600 text-white text-sm sm:text-base rounded-md hover:bg-gray-700 transition-colors flex items-center gap-2"
|
|
|
title="测试后端 API 连接"
|
|
|
>
|
|
|
<RefreshCw size={18} />
|
|
|
@@ -318,7 +318,7 @@ export default function RemoteServerControl() {
|
|
|
) : (
|
|
|
<button
|
|
|
onClick={handleDisconnect}
|
|
|
- className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors flex items-center gap-2"
|
|
|
+ className="px-4 py-2 bg-red-600 text-white text-sm sm:text-base rounded-md hover:bg-red-700 transition-colors flex items-center gap-2"
|
|
|
>
|
|
|
<Server size={18} />
|
|
|
断开连接
|
|
|
@@ -330,12 +330,12 @@ export default function RemoteServerControl() {
|
|
|
|
|
|
{/* 功能标签页 */}
|
|
|
{isConnected && (
|
|
|
- <div className="bg-white rounded-lg shadow-sm border border-slate-200">
|
|
|
- <div className="border-b border-slate-200">
|
|
|
- <nav className="flex -mb-px">
|
|
|
+ <div className="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
|
|
|
+ <div className="border-b border-slate-200 overflow-x-auto">
|
|
|
+ <nav className="flex -mb-px min-w-max">
|
|
|
<button
|
|
|
onClick={() => setActiveTab('docker')}
|
|
|
- className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
|
|
|
+ className={`px-4 sm:px-6 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
|
|
|
activeTab === 'docker'
|
|
|
? 'border-blue-600 text-blue-600'
|
|
|
: 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
|
|
|
@@ -346,7 +346,7 @@ export default function RemoteServerControl() {
|
|
|
</button>
|
|
|
<button
|
|
|
onClick={() => setActiveTab('logs')}
|
|
|
- className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
|
|
|
+ className={`px-4 sm:px-6 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
|
|
|
activeTab === 'logs'
|
|
|
? 'border-blue-600 text-blue-600'
|
|
|
: 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
|
|
|
@@ -357,7 +357,7 @@ export default function RemoteServerControl() {
|
|
|
</button>
|
|
|
<button
|
|
|
onClick={() => setActiveTab('config')}
|
|
|
- className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
|
|
|
+ className={`px-4 sm:px-6 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
|
|
|
activeTab === 'config'
|
|
|
? 'border-blue-600 text-blue-600'
|
|
|
: 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
|
|
|
@@ -369,7 +369,7 @@ export default function RemoteServerControl() {
|
|
|
</nav>
|
|
|
</div>
|
|
|
|
|
|
- <div className="p-6">
|
|
|
+ <div className="p-4 sm:p-6">
|
|
|
{activeTab === 'docker' && (
|
|
|
<DockerControl
|
|
|
serverConfig={serverConfig}
|
welin