feat: complete Loki query, insights, settings and deployment workflows

Add the Loki query UI, access policies, ingress insights, alert and registry settings, and their backend APIs. Include the related Kubernetes deployment and collector updates required by the integrated application.

Validated with go test ./..., npm run build, and npm run lint.

frontend/src/pages/hosts/components/HostCard.tsx

@@ -1,9 +1,8 @@
 import { memo } from 'react'
-import { Monitor, RefreshCw, Trash2, Eye, Terminal } from 'lucide-react'
+import { Monitor, RefreshCw, Trash2, Eye, Terminal, Pencil } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
 import { StatusBadge } from '@/components/StatusBadge'
-import { InfoRow } from '@/components/InfoRow'
+import { ResourceCard } from '@/components/ResourceCard'
 import type { Host } from '@/types'
 
 interface HostCardProps {
@@ -13,85 +12,44 @@ interface HostCardProps {
   onOpenTerminal: (h: Host) => void
   onValidate: (id: number) => void
   onDelete: (h: Host) => void
+  onEdit: (h: Host) => void
 }
 
-/** 主机卡片 — 列表项展示与操作入口（删除传整个对象，供确认弹窗展示名称） */
+/** 主机卡片 — 统一 ResourceCard 样式 */
 export const HostCard = memo(function HostCard({
-  host,
-  validating,
-  onViewInfo,
-  onOpenTerminal,
-  onValidate,
-  onDelete,
+  host, validating, onViewInfo, onOpenTerminal, onValidate, onDelete, onEdit,
 }: HostCardProps) {
   return (
-    <Card className="border-border hover:shadow-md transition-shadow">
-      <CardContent className="p-5">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex items-center gap-2 min-w-0">
-            <Monitor className="w-5 h-5 text-purple-500 flex-shrink-0" />
-            <h3 className="font-semibold text-foreground truncate">
-              {host.name}
-            </h3>
-          </div>
-          <StatusBadge status={host.status} />
-        </div>
-
-        <div className="space-y-1.5 text-xs text-muted-foreground mb-4">
-          <InfoRow label="IP 地址" value={`${host.hostIP}:${host.port}`} />
-          <InfoRow label="用户名" value={host.user} />
-          <InfoRow
-            label="认证方式"
-            value={host.authType === 'key' ? 'SSH 密钥' : '密码'}
-          />
-          <InfoRow
-            label="系统"
-            value={`${host.os || '未知'} (${host.arch || '未知'})`}
-          />
-        </div>
-
-        <div className="flex gap-2 pt-3 border-t border-border">
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onViewInfo(host)}
-          >
-            <Eye className="w-3 h-3 mr-1" />
-            详情
+    <ResourceCard
+      icon={Monitor}
+      iconClassName="text-purple-500"
+      title={host.name}
+      badges={<StatusBadge status={host.status} />}
+      fields={[
+        { label: '地址', value: `${host.hostIP}:${host.port}` },
+        { label: '用户', value: host.user },
+        { label: '认证', value: host.authType === 'key' ? 'SSH 密钥' : '密码' },
+        { label: '系统', value: `${host.os || '未知'} / ${host.arch || '未知'}` },
+      ]}
+      actions={
+        <>
+          <Button variant="outline" size="sm" aria-label={'编辑主机 ' + host.name} onClick={() => onEdit(host)}>
+            <Pencil className="size-3.5" />
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1 text-xs"
-            onClick={() => onOpenTerminal(host)}
-          >
-            <Terminal className="w-3 h-3 mr-1" />
-            终端
+          <Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onViewInfo(host)}>
+            <Eye className="size-3 mr-1" />详情
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            aria-label={`验证主机 ${host.name}`}
-            className="text-xs"
-            onClick={() => onValidate(host.id)}
-            disabled={validating === host.id}
-          >
-            <RefreshCw
-              className={`w-3 h-3 ${validating === host.id ? 'animate-spin' : ''}`}
-            />
+          <Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onOpenTerminal(host)}>
+            <Terminal className="size-3 mr-1" />终端
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            aria-label={`删除主机 ${host.name}`}
-            className="text-destructive hover:text-destructive hover:bg-destructive/10"
-            onClick={() => onDelete(host)}
-          >
-            <Trash2 className="w-3 h-3" />
+          <Button variant="outline" size="sm" aria-label={`验证主机 ${host.name}`} disabled={validating === host.id} onClick={() => onValidate(host.id)}>
+            <RefreshCw className={`size-3 ${validating === host.id ? 'animate-spin' : ''}`} />
           </Button>
-        </div>
-      </CardContent>
-    </Card>
+          <Button variant="outline" size="sm" aria-label={`删除主机 ${host.name}`} className="text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => onDelete(host)}>
+            <Trash2 className="size-3.5" />
+          </Button>
+        </>
+      }
+    />
   )
 })

frontend/src/pages/hosts/components/HostFormDialog.tsx

@@ -43,6 +43,7 @@ const hostFormSchema = z
     labels: z.string().optional(),
   })
   .superRefine((data, ctx) => {
+    if (EDITING_REF.current) return
     if (data.authType === 'password' && !data.password?.trim()) {
       ctx.addIssue({
         code: 'custom',
@@ -77,15 +78,19 @@ interface HostFormDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   /** 创建成功回调（父级刷新列表并关闭弹窗） */
-  onCreated: () => void
+  onCreated: () => void  /** 编辑目标(编辑模式:凭证留空=保留) */
+  editing?: import('@/types').Host | null
 }
 
 /** 添加 SSH 主机弹窗 — react-hook-form + zod，自包含表单逻辑，页面只传开关与回调 */
+const EDITING_REF = { current: false as boolean | null }
+
 export const HostFormDialog = memo(function HostFormDialog({
   open,
   onOpenChange,
   onCreated,
-}: HostFormDialogProps) {
+  editing,
+    }: HostFormDialogProps) {
   const [submitting, setSubmitting] = useState(false)
 
   const form = useForm<HostFormValues>({
@@ -95,26 +100,35 @@ export const HostFormDialog = memo(function HostFormDialog({
   const authType = form.watch('authType')
 
   // 打开时重置（默认值），关闭/重开时机明确
+  EDITING_REF.current = !!editing
   useEffect(() => {
     if (open) {
-      form.reset(DEFAULT_VALUES)
+      form.reset(editing ? {
+        name: editing.name, hostIP: editing.hostIP, port: String(editing.port),
+        user: editing.user, authType: editing.authType,
+        password: '', privateKey: '', keyPhrase: '', labels: editing.labels || '',
+      } as never : DEFAULT_VALUES)
     }
-  }, [open, form])
+  }, [open, form, editing])
 
   const onSubmit = form.handleSubmit(async (values) => {
     setSubmitting(true)
     try {
-      await hostApi.create({
-        name: values.name,
-        hostIP: values.hostIP,
-        port: Number(values.port),
-        user: values.user,
-        authType: values.authType,
-        password: values.authType === 'password' ? values.password : undefined,
-        privateKey: values.authType === 'key' ? values.privateKey : undefined,
-        keyPhrase: values.authType === 'key' ? values.keyPhrase : undefined,
-        labels: values.labels,
-      })
+      await (editing
+        ? hostApi.update(editing.id, {
+            name: values.name, hostIP: values.hostIP, port: Number(values.port),
+            user: values.user, authType: values.authType,
+            password: values.password || undefined,
+            privateKey: values.privateKey || undefined,
+            keyPhrase: values.keyPhrase || undefined,
+            labels: values.labels,
+          })
+        : hostApi.create({
+            name: values.name, hostIP: values.hostIP, port: Number(values.port),
+            user: values.user, authType: values.authType,
+            password: values.password, privateKey: values.privateKey,
+            keyPhrase: values.keyPhrase, labels: values.labels,
+          }))
       onOpenChange(false)
       onCreated()
     } catch (err) {
@@ -128,7 +142,7 @@ export const HostFormDialog = memo(function HostFormDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>添加 SSH 主机</DialogTitle>
+          <DialogTitle>{editing ? `编辑主机${editing.name ? ` · ${editing.name}` : ''}` : '添加 SSH 主机'}</DialogTitle>
         </DialogHeader>
         <Form {...form}>
           <form onSubmit={onSubmit} className="space-y-4">
@@ -232,7 +246,7 @@ export const HostFormDialog = memo(function HostFormDialog({
                 name="password"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>密码 *</FormLabel>
+                    <FormLabel>密码{editing ? '（留空保持不变）' : ' *'}</FormLabel>
                     <FormControl>
                       <PasswordInput placeholder="SSH 登录密码" {...field} />
                     </FormControl>
@@ -247,7 +261,7 @@ export const HostFormDialog = memo(function HostFormDialog({
                   name="privateKey"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>私钥 *</FormLabel>
+                      <FormLabel>私钥{editing ? '（留空保持不变）' : ' *'}</FormLabel>
                       <FormControl>
                         <Textarea
                           placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
@@ -294,7 +308,7 @@ export const HostFormDialog = memo(function HostFormDialog({
               className="w-full bg-primary hover:bg-primary/90"
               disabled={submitting}
             >
-              {submitting ? '添加中...' : '添加主机'}
+              {submitting ? (editing ? '保存中...' : '添加中...') : editing ? '保存修改' : '添加主机'}
             </Button>
           </form>
         </Form>

frontend/src/pages/hosts/index.tsx

@@ -29,6 +29,7 @@ const HostsPage = memo(function HostsPage() {
   const [detailHost, setDetailHost] = useState<Host | null>(null)
   const [terminalHost, setTerminalHost] = useState<Host | null>(null)
   const [deleteTarget, setDeleteTarget] = useState<Host | null>(null)
+  const [editingTarget, setEditingTarget] = useState<Host | null>(null)
   const [deleting, setDeleting] = useState(false)
   const [validating, setValidating] = useState<number | null>(null)
 
@@ -111,7 +112,7 @@ const HostsPage = memo(function HostsPage() {
         />
       ) : (
         <>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
             {query.list.map((host) => (
               <HostCard
                 key={host.id}
@@ -121,6 +122,7 @@ const HostsPage = memo(function HostsPage() {
                 onOpenTerminal={setTerminalHost}
                 onValidate={handleValidate}
                 onDelete={setDeleteTarget}
+              onEdit={setEditingTarget}
               />
             ))}
           </div>
@@ -134,9 +136,15 @@ const HostsPage = memo(function HostsPage() {
       )}
 
       <HostFormDialog
-        open={formOpen}
-        onOpenChange={setFormOpen}
-        onCreated={query.reload}
+        open={formOpen || editingTarget !== null}
+        onOpenChange={(o) => {
+          if (!o) {
+            setFormOpen(false)
+            setEditingTarget(null)
+          }
+        }}
+        onCreated={query.refresh}
+        editing={editingTarget}
       />
 
       <HostDetailDialog