ai-agent-router 0.1.0

package/dist/src/app/models/page.jsx

@@ -0,0 +1,291 @@
+'use client';
+import { useState, useEffect } from 'react';
+import Nav from '../components/Nav';
+import { useToast } from '../components/ToastProvider';
+import ConfirmDialog from '../components/ConfirmDialog';
+export default function ModelsPage() {
+    const [models, setModels] = useState([]);
+    const [providers, setProviders] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [showModal, setShowModal] = useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+    const [showFetchConfirm, setShowFetchConfirm] = useState(false);
+    const [deleteId, setDeleteId] = useState(null);
+    const [fetchProviderId, setFetchProviderId] = useState(null);
+    const [formData, setFormData] = useState({
+        provider_id: '',
+        name: '',
+        model_id: '',
+        enabled: true,
+    });
+    const { showToast } = useToast();
+    useEffect(() => {
+        loadData();
+    }, []);
+    const loadData = async () => {
+        try {
+            const [modelsRes, providersRes] = await Promise.all([
+                fetch('/api/models'),
+                fetch('/api/providers'),
+            ]);
+            const modelsData = await modelsRes.json();
+            const providersData = await providersRes.json();
+            setModels(modelsData);
+            setProviders(providersData);
+        }
+        catch (error) {
+            console.error('Failed to load data:', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            await fetch('/api/models', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    ...formData,
+                    provider_id: parseInt(formData.provider_id),
+                }),
+            });
+            setShowModal(false);
+            setFormData({ provider_id: '', name: '', model_id: '', enabled: true });
+            loadData();
+            showToast('模型添加成功', 'success');
+        }
+        catch (error) {
+            console.error('Failed to save model:', error);
+            showToast('保存失败', 'error');
+        }
+    };
+    const handleToggleEnabled = async (id, enabled) => {
+        try {
+            await fetch('/api/models', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ id, enabled: !enabled }),
+            });
+            loadData();
+        }
+        catch (error) {
+            console.error('Failed to update model:', error);
+        }
+    };
+    const handleDelete = (id) => {
+        setDeleteId(id);
+        setShowDeleteConfirm(true);
+    };
+    const confirmDelete = async () => {
+        if (deleteId) {
+            try {
+                await fetch(`/api/models?id=${deleteId}`, { method: 'DELETE' });
+                loadData();
+                showToast('模型已删除', 'success');
+            }
+            catch (error) {
+                console.error('Failed to delete model:', error);
+                showToast('删除失败', 'error');
+            }
+        }
+        setShowDeleteConfirm(false);
+        setDeleteId(null);
+    };
+    const handleFetchModels = (providerId) => {
+        setFetchProviderId(providerId);
+        setShowFetchConfirm(true);
+    };
+    const confirmFetch = async () => {
+        if (fetchProviderId) {
+            try {
+                const res = await fetch('/api/models', {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ provider_id: fetchProviderId }),
+                });
+                const data = await res.json();
+                showToast(`成功拉取 ${data.count} 个模型`, 'success');
+                loadData();
+            }
+            catch (error) {
+                console.error('Failed to fetch models:', error);
+                showToast('拉取失败: ' + error.message, 'error');
+            }
+        }
+        setShowFetchConfirm(false);
+        setFetchProviderId(null);
+    };
+    if (loading) {
+        return (<>
+        <Nav />
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-lg">加载中...</div>
+        </div>
+      </>);
+    }
+    return (<>
+      <Nav />
+      <main className="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-4 sm:px-0">
+          <div className="flex justify-between items-center mb-5">
+            <div>
+              <h1 className="text-lg font-bold text-slate-800">模型管理</h1>
+              <p className="text-xs text-slate-500 mt-1">管理 AI 模型配置和状态</p>
+            </div>
+            <button onClick={() => {
+            setFormData({ provider_id: '', name: '', model_id: '', enabled: true });
+            setShowModal(true);
+        }} className="inline-flex items-center px-3.5 py-1.5 border border-transparent text-xs font-semibold rounded-lg shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-emerald-500/50 transition-all duration-300">
+              <svg className="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4"/>
+              </svg>
+              手动添加
+            </button>
+          </div>
+
+          {/* 一键拉取模型列表 - 移到列表上方 */}
+          <div className="mb-5 bg-white/70 backdrop-blur-sm shadow-md rounded-2xl border border-emerald-100/50 p-5">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h2 className="text-sm font-bold text-slate-800">快捷拉取</h2>
+                <p className="text-xs text-slate-500 mt-0.5">从供应商 API 自动拉取可用模型</p>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+              {providers.map((provider) => (<div key={provider.id} className="flex items-center justify-between p-3 border border-slate-200 rounded-xl hover:border-emerald-300 hover:shadow-sm transition-all duration-300 cursor-pointer bg-white/80 backdrop-blur-sm">
+                  <div className="flex-1">
+                    <div className="font-semibold text-xs text-slate-800">{provider.name}</div>
+                    <div className="text-[10px] text-slate-500 mt-0.5">{provider.protocol}</div>
+                  </div>
+                  <button onClick={() => handleFetchModels(provider.id)} className="ml-3 inline-flex items-center px-2.5 py-1 border border-transparent text-[10px] font-semibold rounded-lg text-emerald-700 bg-emerald-50 hover:bg-emerald-100 transition-all duration-300">
+                    <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                    </svg>
+                    拉取
+                  </button>
+                </div>))}
+            </div>
+          </div>
+
+          <div className="bg-white/70 backdrop-blur-sm shadow-md rounded-2xl border border-emerald-100/50 overflow-hidden">
+            <table className="min-w-full divide-y divide-slate-100">
+              <thead className="bg-emerald-50/30">
+                <tr>
+                  <th className="px-4 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
+                    名称
+                  </th>
+                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    模型 ID
+                  </th>
+                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    供应商
+                  </th>
+                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    状态
+                  </th>
+                  <th className="px-6 py-3.5 text-right text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    操作
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-slate-100">
+                {models.length === 0 ? (<tr>
+                    <td colSpan={5} className="px-4 py-12 text-center">
+                      <div className="text-slate-400">
+                        <svg className="mx-auto h-10 w-10 mb-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
+                        </svg>
+                        <p className="text-xs text-slate-500">暂无模型，请先添加或拉取模型</p>
+                      </div>
+                    </td>
+                  </tr>) : (models.map((model) => (<tr key={model.id} className="hover:bg-emerald-50/20 transition-colors duration-300">
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <div className="text-xs font-medium text-slate-800">{model.name}</div>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <div className="text-xs text-slate-600 font-mono">{model.model_id}</div>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <div className="text-xs text-slate-600">
+                          <span className="font-medium">{model.provider_name}</span>
+                          <span className="text-slate-400 ml-1">({model.provider_protocol})</span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <span className={`px-2 py-0.5 inline-flex text-xs leading-4 font-semibold rounded-full border ${model.enabled
+                ? 'bg-emerald-100/80 text-emerald-700 border-emerald-200/50'
+                : 'bg-slate-100/80 text-slate-600 border-slate-200/50'}`}>
+                          {model.enabled ? '启用' : '禁用'}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap text-right text-xs font-medium">
+                        <div className="flex items-center justify-end space-x-3">
+                          <button onClick={() => handleToggleEnabled(model.id, model.enabled)} className="text-emerald-600 hover:text-emerald-700 font-medium transition-colors duration-300">
+                            {model.enabled ? '禁用' : '启用'}
+                          </button>
+                          <button onClick={() => handleDelete(model.id)} className="text-rose-500 hover:text-rose-600 font-medium transition-colors duration-300">
+                            删除
+                          </button>
+                        </div>
+                      </td>
+                    </tr>)))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </main>
+
+      {showModal && (<div className="fixed z-50 inset-0 overflow-y-auto">
+          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" onClick={() => setShowModal(false)}></div>
+            <div className="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full border border-emerald-100/50">
+              <form onSubmit={handleSubmit} className="bg-white px-6 pt-5 pb-4 sm:p-6">
+                <div className="mb-5">
+                  <h3 className="text-base font-bold text-slate-800 mb-1">添加模型</h3>
+                  <p className="text-xs text-slate-500">手动添加新的 AI 模型</p>
+                </div>
+                <div className="space-y-4">
+                  <div>
+                    <label className="block text-xs font-semibold text-slate-700 mb-1.5">供应商</label>
+                    <select required value={formData.provider_id} onChange={(e) => setFormData({ ...formData, provider_id: e.target.value })} autoComplete="off" className="block w-full rounded-lg border border-slate-200 bg-white/80 px-3 py-2 text-xs shadow-sm transition-all duration-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 focus:ring-offset-1">
+                      <option value="">选择供应商</option>
+                      {providers.map((p) => (<option key={p.id} value={p.id}>
+                          {p.name}
+                        </option>))}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-semibold text-slate-700 mb-1.5">名称</label>
+                    <input type="text" required value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} autoComplete="off" className="block w-full rounded-lg border border-slate-200 bg-white/80 px-3 py-2 text-xs shadow-sm transition-all duration-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 focus:ring-offset-1" placeholder="例如: GPT-4"/>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-semibold text-slate-700 mb-1.5">模型 ID</label>
+                    <input type="text" required value={formData.model_id} onChange={(e) => setFormData({ ...formData, model_id: e.target.value })} autoComplete="off" className="block w-full rounded-lg border border-slate-200 bg-white/80 px-3 py-2 text-xs shadow-sm transition-all duration-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 focus:ring-offset-1" placeholder="例如: gpt-4"/>
+                  </div>
+                </div>
+                <div className="mt-5 flex items-center justify-end space-x-2">
+                  <button type="button" onClick={() => setShowModal(false)} className="px-3.5 py-1.5 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-400/30 transition-all duration-300">
+                    取消
+                  </button>
+                  <button type="submit" className="px-4 py-1.5 border border-transparent rounded-lg text-xs font-semibold text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-emerald-500/50 transition-all duration-300">
+                    保存
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>)}
+
+      <ConfirmDialog open={showDeleteConfirm} title="确认删除" message="确定要删除这个模型吗？此操作不可恢复。" onConfirm={confirmDelete} onCancel={() => {
+            setShowDeleteConfirm(false);
+            setDeleteId(null);
+        }} confirmText="删除" cancelText="取消" type="danger"/>
+
+      <ConfirmDialog open={showFetchConfirm} title="拉取模型列表" message="确定要从供应商拉取模型列表吗？" onConfirm={confirmFetch} onCancel={() => {
+            setShowFetchConfirm(false);
+            setFetchProviderId(null);
+        }} confirmText="拉取" cancelText="取消" type="info"/>
+    </>);
+}

package/dist/src/app/page.jsx

@@ -0,0 +1,236 @@
+'use client';
+import { useState, useEffect } from 'react';
+import Nav from './components/Nav';
+import { useToast } from './components/ToastProvider';
+export default function Home() {
+    const [config, setConfig] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [serviceStatus, setServiceStatus] = useState({ status: 'stopped' });
+    const [starting, setStarting] = useState(false);
+    const [stopping, setStopping] = useState(false);
+    const [showApiKey, setShowApiKey] = useState(false);
+    const { showToast } = useToast();
+    useEffect(() => {
+        loadConfig();
+        loadServiceStatus();
+        // Poll service status every 2 seconds
+        const interval = setInterval(loadServiceStatus, 2000);
+        return () => clearInterval(interval);
+    }, []);
+    const loadConfig = async () => {
+        try {
+            const res = await fetch('/api/config');
+            const data = await res.json();
+            setConfig({
+                port: data.port || '3000',
+                api_key: data.api_key || '',
+            });
+        }
+        catch (error) {
+            console.error('Failed to load config:', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const loadServiceStatus = async () => {
+        try {
+            const res = await fetch('/api/service/status');
+            const data = await res.json();
+            setServiceStatus(data);
+        }
+        catch (error) {
+            console.error('Failed to load service status:', error);
+        }
+    };
+    const handleStart = async () => {
+        if (starting || serviceStatus.status === 'running')
+            return;
+        setStarting(true);
+        try {
+            const port = config.port ? parseInt(config.port, 10) : undefined;
+            const res = await fetch('/api/service/start', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ port }),
+            });
+            const data = await res.json();
+            if (data.error) {
+                showToast(`启动失败: ${data.error}`, 'error');
+            }
+            else {
+                showToast('服务已启动', 'success');
+                setServiceStatus(data);
+            }
+        }
+        catch (error) {
+            console.error('Failed to start service:', error);
+            showToast('启动失败', 'error');
+        }
+        finally {
+            setStarting(false);
+            // Reload status after a short delay
+            setTimeout(loadServiceStatus, 500);
+        }
+    };
+    const handleStop = async () => {
+        if (stopping || serviceStatus.status === 'stopped')
+            return;
+        setStopping(true);
+        try {
+            const res = await fetch('/api/service/stop', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+            });
+            const data = await res.json();
+            if (data.error) {
+                showToast(`停止失败: ${data.error}`, 'error');
+            }
+            else {
+                showToast('服务已停止', 'success');
+                setServiceStatus(data);
+            }
+        }
+        catch (error) {
+            console.error('Failed to stop service:', error);
+            showToast('停止失败', 'error');
+        }
+        finally {
+            setStopping(false);
+            // Reload status after a short delay
+            setTimeout(loadServiceStatus, 500);
+        }
+    };
+    const saveConfig = async () => {
+        setSaving(true);
+        try {
+            await fetch('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    key: 'port',
+                    value: config.port,
+                }),
+            });
+            if (config.api_key) {
+                await fetch('/api/config', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        key: 'api_key',
+                        value: config.api_key,
+                    }),
+                });
+            }
+            showToast('配置已保存', 'success');
+        }
+        catch (error) {
+            console.error('Failed to save config:', error);
+            showToast('保存失败', 'error');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    if (loading) {
+        return (<div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg">加载中...</div>
+      </div>);
+    }
+    return (<div className="min-h-screen bg-gradient-to-br from-emerald-50/30 via-white to-slate-50/50">
+      <Nav />
+
+      <main className="max-w-3xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-4 sm:px-0">
+          <div className="bg-white/70 backdrop-blur-sm shadow-md rounded-2xl border border-emerald-100/50">
+            <div className="px-6 py-5 sm:p-6">
+              <div className="mb-5">
+                <h2 className="text-lg font-bold text-slate-800 mb-1">网关配置</h2>
+                <p className="text-xs text-slate-500">配置 API 网关的运行参数</p>
+              </div>
+              
+              <div className="space-y-3.5">
+                <div>
+                  <label className="block text-xs font-semibold text-slate-700 mb-1.5">
+                    端口
+                  </label>
+                  <input type="number" value={config.port} onChange={(e) => setConfig({ ...config, port: e.target.value })} autoComplete="off" className="block w-full rounded-lg border border-slate-200 bg-white/80 px-3 py-2 text-xs shadow-sm transition-all duration-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 focus:ring-offset-1" placeholder="3000"/>
+                  <p className="mt-1 text-xs text-slate-400">
+                    提示：如果 Web UI 运行在 3000 端口，建议将服务端口设置为 3001 或其他端口以避免冲突
+                  </p>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-semibold text-slate-700 mb-1.5">
+                    API Key (可选)
+                  </label>
+                  <div className="relative">
+                    <input type={showApiKey ? 'text' : 'password'} value={config.api_key} onChange={(e) => setConfig({ ...config, api_key: e.target.value })} autoComplete="new-password" className="block w-full rounded-lg border border-slate-200 bg-white/80 px-3 py-2 pr-9 text-xs shadow-sm transition-all duration-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 focus:ring-offset-1" placeholder="留空则不验证"/>
+                    <button type="button" onClick={() => setShowApiKey(!showApiKey)} className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600 transition-colors" tabIndex={-1}>
+                      {showApiKey ? (<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+                        </svg>) : (<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                        </svg>)}
+                    </button>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between pt-3">
+                  <div>
+                    <span className="text-xs text-slate-500">状态: </span>
+                    <span className={`text-xs font-medium ${serviceStatus.status === 'running' ? 'text-emerald-600' : 'text-slate-500'}`}>
+                      {serviceStatus.status === 'running' ? '运行中' : '已停止'}
+                    </span>
+                    {serviceStatus.status === 'running' && serviceStatus.port && (<span className="text-xs text-slate-400 ml-2">(端口: {serviceStatus.port})</span>)}
+                  </div>
+                  <div className="flex space-x-2">
+                    <button onClick={saveConfig} disabled={saving || serviceStatus.status === 'running'} className="inline-flex items-center px-3.5 py-1.5 border border-transparent text-xs font-semibold rounded-lg shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-emerald-500/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300">
+                      {saving ? (<>
+                          <svg className="animate-spin -ml-1 mr-1.5 h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                          保存中
+                        </>) : ('保存配置')}
+                    </button>
+                    <button onClick={serviceStatus.status === 'running' ? handleStop : handleStart} disabled={starting || stopping} className={`inline-flex items-center px-3.5 py-1.5 border border-transparent text-xs font-semibold rounded-lg shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-1 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed ${serviceStatus.status === 'running'
+            ? 'bg-rose-500 hover:bg-rose-600 focus:ring-rose-500/50'
+            : 'bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500/50'}`}>
+                      {starting ? (<>
+                          <svg className="animate-spin -ml-1 mr-1.5 h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                          启动中
+                        </>) : stopping ? (<>
+                          <svg className="animate-spin -ml-1 mr-1.5 h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                          停止中
+                        </>) : serviceStatus.status === 'running' ? (<>
+                          <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
+                          </svg>
+                          停止
+                        </>) : (<>
+                          <svg className="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                          </svg>
+                          启动
+                        </>)}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>);
+}