refactor: 拆分CloudBilling.tsx(663→467行)提取BillingRecordDialog+BillingRuleDialog子模块

2026-06-16 19:09:13 +08:00
1 parent f865d41547
commit accbfb53c3
@@ -0,0 +1,149 @@
+// 云账单预警规则弹窗（新建/编辑）— 自包含状态，从 CloudBilling 提取 // Logan.Li
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { billingApi } from '@/services/api';
+import { providerLabels } from './CloudBillingHelpers';
+
+const emptyRule = { name: '', provider: '', metric: 'daily', threshold: '', operator: '>', enabled: true };
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingRule: any | null;
+  onSuccess: () => void;
+}
+
+export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }: Props) {
+  const [form, setForm] = useState<any>(emptyRule);
+  const [submitting, setSubmitting] = useState(false);
+
+  // 弹窗打开时初始化表单 // Logan.Li
+  useEffect(() => {
+    if (!open) return;
+    if (editingRule) {
+      setForm({
+        name: editingRule.name,
+        provider: editingRule.provider || '',
+        metric: editingRule.metric || 'daily',
+        threshold: editingRule.threshold,
+        operator: editingRule.operator || '>',
+        enabled: editingRule.enabled,
+      });
+    } else {
+      setForm({ ...emptyRule });
+    }
+  }, [open, editingRule]);
+
+  const handleSave = async () => {
+    if (!form.name || !form.threshold) {
+      toast.error('请填写规则名称和阈值');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const data = { ...form, threshold: parseFloat(form.threshold) };
+      if (editingRule) {
+        await billingApi.updateAlertRule(editingRule.id, data);
+      } else {
+        await billingApi.createAlertRule(data);
+      }
+      onOpenChange(false);
+      onSuccess();
+      toast('保存成功');
+    } catch (e: any) {
+      toast.error('保存失败', { description: e.message });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{editingRule ? '编辑预警规则' : '添加预警规则'}</DialogTitle>
+          <DialogDescription>设置成本阈值，超标时自动预警</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div>
+            <Label className="text-sm text-slate-300">规则名称 *</Label>
+            <Input className="mt-1" placeholder="如：日成本超 500 元预警" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label className="text-sm text-slate-300">厂商</Label>
+              <Select value={form.provider || 'all'} onValueChange={(v) => setForm({ ...form, provider: v === 'all' ? '' : v })}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部厂商</SelectItem>
+                  {Object.entries(providerLabels).map(([k, v]) => (
+                    <SelectItem key={k} value={k}>{v}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className="text-sm text-slate-300">指标</Label>
+              <Select value={form.metric} onValueChange={(v) => setForm({ ...form, metric: v })}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="daily">日成本</SelectItem>
+                  <SelectItem value="monthly">月累计</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label className="text-sm text-slate-300">比较</Label>
+              <Select value={form.operator} onValueChange={(v) => setForm({ ...form, operator: v })}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value=">">大于 &gt;</SelectItem>
+                  <SelectItem value=">=">大于等于 &ge;</SelectItem>
+                  <SelectItem value="<">小于 &lt;</SelectItem>
+                  <SelectItem value="<=">小于等于 &le;</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className="text-sm text-slate-300">阈值(元) *</Label>
+              <Input type="number" step="0.01" className="mt-1" placeholder="500.00" value={form.threshold} onChange={(e) => setForm({ ...form, threshold: e.target.value })} />
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch checked={form.enabled} onCheckedChange={(v) => setForm({ ...form, enabled: v })} />
+            <Label className="text-sm text-slate-300">启用</Label>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+          <Button onClick={handleSave} disabled={submitting}>
+            {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
+            保存
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}