feat: 域名管理增删改查 — 新增PUT /domains/:id编辑端点 + 创建/编辑弹窗 + 日期字段字符串解析修复

2026-06-14 09:07:11 +08:00
1 parent e05ecb4080
commit b110d38e73
@@ -1,8 +1,17 @@
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import {
  Plus,
  Search,
@@ -12,8 +21,8 @@ import {
  CheckCircle2,
  XCircle,
  Clock,
-  ExternalLink,
-  RefreshCw
+  RefreshCw,
+  Loader2,
 } from 'lucide-react';
 import { cloudApi } from '@/services/api';

@@ -23,6 +32,85 @@ export function DomainManager() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedStatus, setSelectedStatus] = useState<string>('all');

+  // 创建/编辑域名表单状态
+  const [formOpen, setFormOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [editingDomain, setEditingDomain] = useState<any>(null);
+  const [formData, setFormData] = useState({
+    name: '',
+    registrar: '',
+    status: 'active',
+    expire_date: '',
+    dns_provider: '',
+    record_count: '',
+    ssl_enabled: false,
+    ssl_expire_date: '',
+  });
+
+  const resetForm = () => {
+    setEditingDomain(null);
+    setFormData({
+      name: '',
+      registrar: '',
+      status: 'active',
+      expire_date: '',
+      dns_provider: '',
+      record_count: '',
+      ssl_enabled: false,
+      ssl_expire_date: '',
+    });
+  };
+
+  const handleOpenCreate = () => {
+    resetForm();
+    setFormOpen(true);
+  };
+
+  const handleOpenEdit = (domain: any) => {
+    setEditingDomain(domain);
+    // 后端返回 RFC3339 时间，截取 YYYY-MM-DD 部分给 date input
+    const toDateInput = (v: string) => (v ? v.substring(0, 10) : '');
+    setFormData({
+      name: domain.name || '',
+      registrar: domain.registrar || '',
+      status: domain.status || 'active',
+      expire_date: toDateInput(domain.expire_date || ''),
+      dns_provider: domain.dns_provider || domain.dnsProvider || '',
+      record_count: String(domain.record_count ?? domain.recordCount ?? ''),
+      ssl_enabled: domain.ssl_enabled ?? domain.sslEnabled ?? false,
+      ssl_expire_date: toDateInput(domain.ssl_expire_date || ''),
+    });
+    setFormOpen(true);
+  };
+
+  const handleSubmit = async () => {
+    if (!formData.name.trim()) return;
+    try {
+      setSubmitting(true);
+      const payload: any = {
+        name: formData.name.trim(),
+        registrar: formData.registrar.trim(),
+        status: formData.status,
+        expire_date: formData.expire_date,
+        dns_provider: formData.dns_provider.trim(),
+        record_count: Number(formData.record_count) || 0,
+        ssl_enabled: formData.ssl_enabled,
+        ssl_expire_date: formData.ssl_expire_date,
+      };
+      if (editingDomain) {
+        await cloudApi.updateDomain(editingDomain.id, payload);
+      } else {
+        await cloudApi.createDomain(payload);
+      }
+      setFormOpen(false);
+      loadData();
+    } catch (e) {
+      console.error(editingDomain ? '更新域名失败:' : '创建域名失败:', e);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
  const loadData = async () => {
    try {
      setLoading(true);
@@ -83,7 +171,7 @@ export function DomainManager() {
            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
            刷新
          </Button>
-          <Button className="bg-blue-600 hover:bg-blue-700">
+          <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleOpenCreate}>
            <Plus className="h-4 w-4 mr-2" />
            添加域名
          </Button>
@@ -255,10 +343,12 @@ export function DomainManager() {
                        </p>
                      </div>
                      <div className="flex items-center gap-1">
-                        <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
-                          <ExternalLink className="h-4 w-4" />
-                        </Button>
-                        <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 text-slate-400 hover:text-blue-400"
+                          onClick={() => handleOpenEdit(domain)}
+                        >
                          <Edit2 className="h-4 w-4" />
                        </Button>
                        <Button
@@ -278,6 +368,125 @@ export function DomainManager() {
          })}
        </div>
      )}
+
+      {/* 创建/编辑域名 Dialog */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="bg-slate-800 border-slate-700 text-slate-100 max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="text-slate-100 flex items-center gap-2">
+              <Globe className="h-5 w-5 text-blue-400" />
+              {editingDomain ? '编辑域名' : '添加域名'}
+            </DialogTitle>
+            <DialogDescription className="text-slate-400">
+              {editingDomain ? '修改域名注册信息、DNS 配置和 SSL 证书状态' : '录入域名信息，包括注册商、DNS 服务商和到期时间'}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <Label className="text-slate-300">域名 *</Label>
+              <Input
+                placeholder="example.com"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                className="bg-slate-900 border-slate-700 text-slate-100"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-slate-300">注册商</Label>
+                <Input
+                  placeholder="阿里云 / Cloudflare ..."
+                  value={formData.registrar}
+                  onChange={(e) => setFormData({ ...formData, registrar: e.target.value })}
+                  className="bg-slate-900 border-slate-700 text-slate-100"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-slate-300">状态</Label>
+                <select
+                  value={formData.status}
+                  onChange={(e) => setFormData({ ...formData, status: e.target.value })}
+                  className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
+                >
+                  <option value="active">正常</option>
+                  <option value="expired">已过期</option>
+                  <option value="pending">待审核</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-slate-300">到期时间</Label>
+                <Input
+                  type="date"
+                  value={formData.expire_date}
+                  onChange={(e) => setFormData({ ...formData, expire_date: e.target.value })}
+                  className="bg-slate-900 border-slate-700 text-slate-100"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-slate-300">DNS 服务商</Label>
+                <Input
+                  placeholder="Cloudflare / DNSPod ..."
+                  value={formData.dns_provider}
+                  onChange={(e) => setFormData({ ...formData, dns_provider: e.target.value })}
+                  className="bg-slate-900 border-slate-700 text-slate-100"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-slate-300">解析记录数</Label>
+              <Input
+                type="number"
+                placeholder="0"
+                value={formData.record_count}
+                onChange={(e) => setFormData({ ...formData, record_count: e.target.value })}
+                className="bg-slate-900 border-slate-700 text-slate-100"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 items-end">
+              <div className="space-y-2">
+                <Label className="text-slate-300">SSL 证书到期</Label>
+                <Input
+                  type="date"
+                  value={formData.ssl_expire_date}
+                  onChange={(e) => setFormData({ ...formData, ssl_expire_date: e.target.value })}
+                  disabled={!formData.ssl_enabled}
+                  className="bg-slate-900 border-slate-700 text-slate-100 disabled:opacity-40"
+                />
+              </div>
+              <label className="flex items-center gap-2 cursor-pointer pb-2">
+                <input
+                  type="checkbox"
+                  checked={formData.ssl_enabled}
+                  onChange={(e) => setFormData({ ...formData, ssl_enabled: e.target.checked })}
+                  className="h-4 w-4 rounded border-slate-600 bg-slate-900 accent-cyan-500"
+                />
+                <span className="text-slate-300 text-sm">启用 SSL</span>
+              </label>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setFormOpen(false)} className="border-slate-700 text-slate-300">
+              取消
+            </Button>
+            <Button
+              className="bg-blue-600 hover:bg-blue-700"
+              disabled={!formData.name.trim() || submitting}
+              onClick={handleSubmit}
+            >
+              {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : editingDomain ? <Edit2 className="h-4 w-4 mr-2" /> : <Plus className="h-4 w-4 mr-2" />}
+              {editingDomain ? '保存修改' : '创建域名'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </div>
  );
 }