[新增] 内网穿透隧道前端管理与代理规则绑定支持 (P5)

openflare_server/web/features/tunnels/components/tunnel-deployment-modal.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { AppModal } from '@/components/ui/app-modal';
+import type { TunnelItem } from '@/features/tunnels/types';
+import {
+  CodeBlock,
+  PrimaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { useState, useEffect } from 'react';
+import { getServerUrl } from '@/features/nodes/utils';
+
+export function TunnelDeploymentModal({
+  isOpen,
+  tunnel,
+  onClose,
+}: {
+  isOpen: boolean;
+  tunnel?: TunnelItem | null;
+  onClose: () => void;
+}) {
+  const [serverUrl, setServerUrl] = useState('');
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && !serverUrl) {
+      setServerUrl(window.location.origin);
+    }
+  }, [serverUrl]);
+
+  if (!tunnel) {
+    return null;
+  }
+
+  const normalizedServerUrl = getServerUrl(serverUrl);
+  const image = 'ghcr.io/rain-kl/openflare-flared:latest';
+  
+  const dockerRunCmd = [
+    `docker pull ${image}`,
+    `docker rm -f openflare-flared 2>/dev/null || true`,
+    `docker run -d --name openflare-flared --net host --restart unless-stopped \\`,
+    `  -v /var/run/docker.sock:/var/run/docker.sock \\`,
+    `  -v openflare_flared_data:/app/data \\`,
+    `  -e OPENFLARE_SERVER_URL=${normalizedServerUrl} \\`,
+    `  -e OPENFLARE_TUNNEL_TOKEN=${tunnel.tunnel_token} \\`,
+    `  ${image}`,
+  ].join('\n');
+
+  const dockerComposeYaml = `version: '3.8'
+services:
+  openflare-flared:
+    image: ${image}
+    container_name: openflare-flared
+    network_mode: "host"
+    restart: unless-stopped
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - openflare_flared_data:/app/data
+    environment:
+      - OPENFLARE_SERVER_URL=${normalizedServerUrl}
+      - OPENFLARE_TUNNEL_TOKEN=${tunnel.tunnel_token}
+
+volumes:
+  openflare_flared_data:
+`;
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="隧道客户端部署"
+      description="请在需要穿透的内网服务器上部署 Flared 客户端。"
+      footer={
+        <div className="flex justify-end gap-3">
+          <PrimaryButton type="button" onClick={onClose}>
+            关闭
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <div className="space-y-6">
+        <div>
+          <p className="mb-2 text-sm font-medium text-[var(--foreground-primary)]">
+            方式一：Docker Run
+          </p>
+          <CodeBlock className="whitespace-pre-wrap">{dockerRunCmd}</CodeBlock>
+        </div>
+        <div>
+          <p className="mb-2 text-sm font-medium text-[var(--foreground-primary)]">
+            方式二：Docker Compose (docker-compose.yml)
+          </p>
+          <CodeBlock className="whitespace-pre-wrap">{dockerComposeYaml}</CodeBlock>
+        </div>
+        <div>
+          <p className="text-sm font-medium text-[var(--foreground-primary)]">
+            隧道 Token (仅供高级用法)
+          </p>
+          <p className="mt-1 break-all text-xs text-[var(--foreground-secondary)]">
+            {tunnel.tunnel_token}
+          </p>
+        </div>
+      </div>
+    </AppModal>
+  );
+}

openflare_server/web/features/tunnels/components/tunnel-editor-modal.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppModal } from '@/components/ui/app-modal';
+import type { TunnelItem, TunnelMutationPayload } from '@/features/tunnels/types';
+import {
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+
+const tunnelEditorSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, '请输入隧道名称')
+    .max(128, '隧道名称不能超过 128 个字符'),
+  remark: z.string().trim().max(255, '备注不能超过 255 个字符').optional().default(''),
+});
+
+type TunnelEditorValues = z.infer<typeof tunnelEditorSchema>;
+
+const defaultValues: TunnelEditorValues = {
+  name: '',
+  remark: '',
+};
+
+function buildFormValues(tunnel?: Partial<TunnelItem> | null): TunnelEditorValues {
+  if (!tunnel) {
+    return defaultValues;
+  }
+
+  return {
+    name: tunnel.name ?? '',
+    remark: tunnel.remark ?? '',
+  };
+}
+
+export function TunnelEditorModal({
+  isOpen,
+  tunnel,
+  isSubmitting,
+  title,
+  description,
+  submitLabel,
+  onClose,
+  onSubmit,
+}: {
+  isOpen: boolean;
+  tunnel?: Partial<TunnelItem> | null;
+  isSubmitting: boolean;
+  title: string;
+  description: string;
+  submitLabel: string;
+  onClose: () => void;
+  onSubmit: (payload: TunnelMutationPayload) => void;
+}) {
+  const form = useForm<TunnelEditorValues>({
+    resolver: zodResolver(tunnelEditorSchema),
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    form.reset(buildFormValues(tunnel));
+  }, [form, isOpen, tunnel]);
+
+  const handleSubmit = form.handleSubmit((values) => {
+    onSubmit({
+      name: values.name.trim(),
+      remark: values.remark.trim(),
+    });
+  });
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      description={description}
+      footer={
+        <div className="flex flex-wrap justify-end gap-3">
+          <SecondaryButton
+            type="button"
+            onClick={onClose}
+            disabled={isSubmitting}
+          >
+            取消
+          </SecondaryButton>
+          <PrimaryButton
+            type="submit"
+            form="tunnel-editor-form"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? '保存中...' : submitLabel}
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <form id="tunnel-editor-form" className="space-y-5" onSubmit={handleSubmit}>
+        <ResourceField
+          label="隧道名称"
+          hint="示例：home-nas-tunnel"
+          error={form.formState.errors.name?.message}
+        >
+          <ResourceInput
+            placeholder="home-nas-tunnel"
+            {...form.register('name')}
+          />
+        </ResourceField>
+
+        <ResourceField
+          label="备注 (可选)"
+          hint="用于描述该隧道的用途。"
+          error={form.formState.errors.remark?.message}
+        >
+          <ResourceInput
+            placeholder="家庭内网穿透"
+            {...form.register('remark')}
+          />
+        </ResourceField>
+      </form>
+    </AppModal>
+  );
+}

openflare_server/web/features/tunnels/components/tunnels-page.tsx

@@ -0,0 +1,317 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+
+import {
+  createTunnel,
+  deleteTunnel,
+  getTunnels,
+  updateTunnel,
+  rotateTunnelToken,
+} from '@/features/tunnels/api/tunnels';
+import { TunnelEditorModal } from '@/features/tunnels/components/tunnel-editor-modal';
+import { TunnelDeploymentModal } from '@/features/tunnels/components/tunnel-deployment-modal';
+import type { TunnelItem, TunnelMutationPayload } from '@/features/tunnels/types';
+import { PrimaryButton } from '@/features/shared/components/resource-primitives';
+import { formatRelativeTime } from '@/lib/utils/date';
+import { isMeaningfulTime } from '@/features/nodes/utils';
+
+const tunnelsQueryKey = ['tunnels'];
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+export function TunnelsPage() {
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  
+  const [editingTunnel, setEditingTunnel] = useState<TunnelItem | null>(null);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  
+  const [deploymentTunnel, setDeploymentTunnel] = useState<TunnelItem | null>(null);
+  const [isDeploymentOpen, setIsDeploymentOpen] = useState(false);
+
+  const tunnelsQuery = useQuery({
+    queryKey: tunnelsQueryKey,
+    queryFn: getTunnels,
+    refetchInterval: 5000,
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: async (payload: TunnelMutationPayload) => {
+      return editingTunnel
+        ? updateTunnel(editingTunnel.id, payload)
+        : createTunnel(payload);
+    },
+    onSuccess: async () => {
+      setFeedback({
+        tone: 'success',
+        message: editingTunnel ? '隧道已更新。' : '隧道已创建。',
+      });
+      setEditingTunnel(null);
+      setIsEditorOpen(false);
+      await queryClient.invalidateQueries({ queryKey: tunnelsQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteTunnel,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '隧道已删除。' });
+      await queryClient.invalidateQueries({ queryKey: tunnelsQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const rotateTokenMutation = useMutation({
+    mutationFn: rotateTunnelToken,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '隧道 Token 已轮转，客户端需要重新部署连接。' });
+      await queryClient.invalidateQueries({ queryKey: tunnelsQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const tunnels = useMemo(() => tunnelsQuery.data ?? [], [tunnelsQuery.data]);
+
+  const handleResetEditor = () => {
+    setFeedback(null);
+    setEditingTunnel(null);
+    setIsEditorOpen(false);
+  };
+
+  const handleCreate = () => {
+    setFeedback(null);
+    setEditingTunnel(null);
+    setIsEditorOpen(true);
+  };
+
+  const handleEdit = (tunnel: TunnelItem) => {
+    setFeedback(null);
+    setEditingTunnel(tunnel);
+    setIsEditorOpen(true);
+  };
+
+  const handleDeployment = (tunnel: TunnelItem) => {
+    setFeedback(null);
+    setDeploymentTunnel(tunnel);
+    setIsDeploymentOpen(true);
+  };
+
+  const handleDelete = (tunnelId: number, tunnelName: string) => {
+    if (
+      !window.confirm(
+        `确认删除隧道“${tunnelName}”吗？删除后该隧道的连接将立即中断。`,
+      )
+    ) {
+      return;
+    }
+    setFeedback(null);
+    deleteMutation.mutate(tunnelId);
+  };
+
+  const handleRotateToken = (tunnelId: number, tunnelName: string) => {
+    if (
+      !window.confirm(
+        `确认重置隧道“${tunnelName}”的 Token 吗？已连接的客户端将被断开，并且需要使用新的 Token 重新部署。`,
+      )
+    ) {
+      return;
+    }
+    setFeedback(null);
+    rotateTokenMutation.mutate(tunnelId);
+  };
+
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="内网穿透隧道"
+          description="管理你的内网穿透隧道。"
+          action={
+            <PrimaryButton type="button" onClick={handleCreate}>
+              新建 Tunnel
+            </PrimaryButton>
+          }
+        />
+
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
+
+        <AppCard
+          title="隧道列表"
+          description="列表每 5 秒自动刷新一次。"
+        >
+          {tunnelsQuery.isLoading ? (
+            <LoadingState />
+          ) : tunnelsQuery.isError ? (
+            <ErrorState
+              title="隧道列表加载失败"
+              description={getErrorMessage(tunnelsQuery.error)}
+            />
+          ) : tunnels.length === 0 ? (
+            <EmptyState
+              title="当前还没有隧道"
+              description="点击右上角的“新建 Tunnel”按钮创建你的第一个隧道。"
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                <thead>
+                  <tr className="text-[var(--foreground-secondary)]">
+                    <th className="px-3 py-3 font-medium">名称 / 隧道ID</th>
+                    <th className="px-3 py-3 font-medium">状态</th>
+                    <th className="px-3 py-3 font-medium">版本 / 校验</th>
+                    <th className="px-3 py-3 font-medium">已连接 Relay</th>
+                    <th className="px-3 py-3 font-medium text-right">操作</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[var(--border-default)]">
+                  {tunnels.map((tunnel) => (
+                    <tr key={tunnel.id} className="align-top">
+                      <td className="px-3 py-4">
+                        <div className="space-y-1">
+                          <p className="font-medium text-[var(--foreground-primary)]">
+                            {tunnel.name}
+                          </p>
+                          <p className="text-xs text-[var(--foreground-secondary)]">
+                            {tunnel.tunnel_id.slice(0, 8)}...
+                          </p>
+                          {tunnel.remark ? (
+                            <p className="text-xs text-[var(--foreground-muted)] line-clamp-1 max-w-xs">
+                              {tunnel.remark}
+                            </p>
+                          ) : null}
+                        </div>
+                      </td>
+                      <td className="px-3 py-4">
+                        <div className="space-y-2">
+                          <StatusBadge
+                            label={tunnel.status === 'online' ? '在线' : '离线'}
+                            variant={tunnel.status === 'online' ? 'success' : 'danger'}
+                          />
+                          {tunnel.status === 'online' && isMeaningfulTime(tunnel.last_seen_at) ? (
+                            <p className="text-xs text-[var(--foreground-secondary)]">
+                              活跃：{formatRelativeTime(tunnel.last_seen_at)}
+                            </p>
+                          ) : null}
+                        </div>
+                      </td>
+                      <td className="px-3 py-4">
+                        <div className="space-y-1 text-[var(--foreground-secondary)]">
+                          <p>
+                            版本：{tunnel.current_version || '未知'}
+                          </p>
+                          <p className="text-xs" title={tunnel.current_checksum}>
+                            {tunnel.current_checksum
+                              ? `签名：${tunnel.current_checksum.slice(0, 12)}...`
+                              : '签名：未知'}
+                          </p>
+                        </div>
+                      </td>
+                      <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                        {tunnel.connected_relays && tunnel.connected_relays.length > 0 ? (
+                          <div className="space-y-1">
+                            {tunnel.connected_relays.map((relay, index) => (
+                              <p key={index} className="text-xs">
+                                {relay}
+                              </p>
+                            ))}
+                          </div>
+                        ) : (
+                          <p className="text-xs">暂无</p>
+                        )}
+                      </td>
+                      <td className="px-3 py-4 text-right">
+                        <div className="flex flex-col items-end gap-2">
+                          <div className="flex items-center justify-end gap-3">
+                            <button
+                              type="button"
+                              onClick={() => handleDeployment(tunnel)}
+                              className="text-sm font-medium text-blue-600 transition hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400"
+                            >
+                              部署命令
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => handleEdit(tunnel)}
+                              className="text-sm font-medium text-[var(--foreground-primary)] transition hover:text-blue-600 dark:hover:text-blue-500"
+                            >
+                              编辑
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => handleDelete(tunnel.id, tunnel.name)}
+                              className="text-sm font-medium text-red-600 transition hover:text-red-700 dark:text-red-500 dark:hover:text-red-400"
+                            >
+                              删除
+                            </button>
+                          </div>
+                          <button
+                            type="button"
+                            onClick={() => handleRotateToken(tunnel.id, tunnel.name)}
+                            className="text-xs font-medium text-amber-600 transition hover:text-amber-700 dark:text-amber-500 dark:hover:text-amber-400"
+                          >
+                            重置 Token
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </AppCard>
+      </div>
+
+      <TunnelEditorModal
+        isOpen={isEditorOpen}
+        tunnel={editingTunnel}
+        isSubmitting={saveMutation.isPending}
+        title={editingTunnel ? '编辑隧道' : '新建隧道'}
+        description={
+          editingTunnel
+            ? '修改此隧道的名称和备注。'
+            : '创建一个内网穿透隧道，稍后你将获得用于客户端连接的 Token 和部署命令。'
+        }
+        submitLabel={editingTunnel ? '保存修改' : '确认创建'}
+        onClose={handleResetEditor}
+        onSubmit={(payload) => {
+          setFeedback(null);
+          saveMutation.mutate(payload);
+        }}
+      />
+      
+      <TunnelDeploymentModal
+        isOpen={isDeploymentOpen}
+        tunnel={deploymentTunnel}
+        onClose={() => setIsDeploymentOpen(false)}
+      />
+    </>
+  );
+}