feat(csms): add system settings management for OCPP 1.6J heartbeat interval

apps/web/app/dashboard/settings/parameters/page.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, Input, Label, Spinner, TextField, toast } from "@heroui/react";
+import { Gear, Lock } from "@gravity-ui/icons";
+import { useSession } from "@/lib/auth-client";
+import { api, type SystemSettings } from "@/lib/api";
+
+const MIN_HEARTBEAT = 10;
+const MAX_HEARTBEAT = 86400;
+const DEFAULT_HEARTBEAT = 60;
+
+export default function ParametersSettingsPage() {
+  const { data: session } = useSession();
+  const isAdmin = session?.user?.role === "admin";
+  const queryClient = useQueryClient();
+
+  const { data: settings, isLoading } = useQuery({
+    queryKey: ["system-settings"],
+    queryFn: () => api.settings.get(),
+    enabled: isAdmin,
+  });
+
+  const [heartbeatInterval, setHeartbeatInterval] = useState(String(DEFAULT_HEARTBEAT));
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!settings) return;
+    setHeartbeatInterval(String(settings.ocpp16j.heartbeatInterval));
+  }, [settings]);
+
+  const parsedHeartbeat = useMemo(() => {
+    const n = Number(heartbeatInterval);
+    if (!Number.isFinite(n)) return null;
+    return Math.round(n);
+  }, [heartbeatInterval]);
+
+  const heartbeatError =
+    parsedHeartbeat === null
+      ? "请输入有效数字"
+      : parsedHeartbeat < MIN_HEARTBEAT || parsedHeartbeat > MAX_HEARTBEAT
+        ? `范围应为 ${MIN_HEARTBEAT} - ${MAX_HEARTBEAT} 秒`
+        : "";
+
+  const isDirty = settings
+    ? Number(heartbeatInterval) !== settings.ocpp16j.heartbeatInterval
+    : false;
+
+  const handleSave = async () => {
+    if (parsedHeartbeat === null) {
+      toast.warning("请输入有效的心跳间隔");
+      return;
+    }
+
+    if (parsedHeartbeat < MIN_HEARTBEAT || parsedHeartbeat > MAX_HEARTBEAT) {
+      toast.warning(`心跳间隔范围应为 ${MIN_HEARTBEAT}-${MAX_HEARTBEAT} 秒`);
+      return;
+    }
+
+    const payload: SystemSettings = {
+      ocpp16j: { heartbeatInterval: parsedHeartbeat },
+    };
+
+    setSaving(true);
+    try {
+      await api.settings.put(payload);
+      toast.success("参数配置已保存");
+      queryClient.invalidateQueries({ queryKey: ["system-settings"] });
+    } catch {
+      toast.warning("保存失败，请稍后重试");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!isAdmin) {
+    return (
+      <div className="flex flex-col items-center justify-center py-24 text-center">
+        <div className="mb-4 flex size-12 items-center justify-center rounded-full bg-warning/10">
+          <Lock className="size-6 text-warning" />
+        </div>
+        <p className="text-sm font-semibold text-foreground">需要管理员权限</p>
+        <p className="mt-1 text-sm text-muted">参数配置仅对管理员开放</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6">
+      <div>
+        <div className="flex items-center gap-2">
+          <Gear className="size-5 text-foreground" />
+          <h1 className="text-xl font-semibold text-foreground">参数配置</h1>
+        </div>
+        <p className="mt-0.5 text-sm text-muted">
+          按功能模块管理系统参数，变更将影响后续设备交互行为
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-border bg-surface-secondary">
+        <div className="flex items-center gap-3 border-b border-border px-5 py-4">
+          <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
+            <Gear className="size-5 text-accent" />
+          </div>
+          <div>
+            <p className="text-sm font-semibold text-foreground">OCPP 1.6J</p>
+            <p className="text-xs text-muted">协议层行为参数</p>
+          </div>
+        </div>
+
+        <div className="space-y-4 px-5 py-4">
+          <TextField fullWidth>
+            <Label className="text-sm font-medium">心跳间隔</Label>
+            <Input
+              type="number"
+              min={String(MIN_HEARTBEAT)}
+              max={String(MAX_HEARTBEAT)}
+              step="1"
+              value={heartbeatInterval}
+              onChange={(e) => setHeartbeatInterval(e.target.value)}
+              placeholder="60"
+            />
+          </TextField>
+
+          <p className="text-xs text-muted">
+            单位：秒。该值会用于 BootNotification.conf 的 interval
+            字段，并下发给充电桩默认心跳参数。
+          </p>
+
+          {!!heartbeatError && (
+            <Alert status="warning">
+              <Alert.Indicator />
+              <Alert.Content>
+                <Alert.Description>{heartbeatError}</Alert.Description>
+              </Alert.Content>
+            </Alert>
+          )}
+
+          <div className="flex justify-end">
+            <Button
+              size="sm"
+              isDisabled={saving || !isDirty || !!heartbeatError}
+              onPress={handleSave}
+            >
+              {saving ? <Spinner size="sm" color="current" /> : "保存"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}