diff --git a/vite-frontend/.dockerignore b/vite-frontend/.dockerignore
new file mode 100644
index 0000000..bcfac75
--- /dev/null
+++ b/vite-frontend/.dockerignore
@@ -0,0 +1,18 @@
+node_modules
+dist
+
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+.DS_Store
+.vscode
+.idea
+
+.env.local
+.env.*.local
+
+coverage
+*.tsbuildinfo
diff --git a/vite-frontend/src/pages/node.tsx b/vite-frontend/src/pages/node.tsx
index 5c1f2cc..6783693 100644
--- a/vite-frontend/src/pages/node.tsx
+++ b/vite-frontend/src/pages/node.tsx
@@ -278,7 +278,7 @@ const SortableItem = ({
       ref={setNodeRef}
       style={style}
       {...attributes}
-      className="overflow-hidden h-full"
+      className="overflow-visible h-full"
       {...listeners}
     >
       {children(listeners)}
@@ -377,6 +377,40 @@ export default function NodePage() {
   const [upgradeProgress, setUpgradeProgress] = useState<
     Record<number, { stage: string; percent: number; message: string }>
   >({});
+  const [infoPopoverPlacement, setInfoPopoverPlacement] = useState<
+    Record<number, "left" | "bottom">
+  >({});
+
+  const updateInfoPopoverPlacement = useCallback(
+    (nodeId: number, triggerElement: HTMLElement | null) => {
+      if (!triggerElement) {
+        return;
+      }
+
+      const rect = triggerElement.getBoundingClientRect();
+      const cardElement = triggerElement.closest("[data-node-card='true']");
+      const cardRect =
+        cardElement instanceof HTMLElement
+          ? cardElement.getBoundingClientRect()
+          : null;
+      const estimatedPanelWidth = 288;
+      const containerPadding = 16;
+      const availableLeftSpace = cardRect
+        ? rect.left - cardRect.left
+        : rect.left;
+      const nextPlacement: "left" | "bottom" =
+        availableLeftSpace >= estimatedPanelWidth + containerPadding
+          ? "left"
+          : "bottom";
+
+      setInfoPopoverPlacement((prev) =>
+        prev[nodeId] === nextPlacement
+          ? prev
+          : { ...prev, [nodeId]: nextPlacement },
+      );
+    },
+    [],
+  );
 
   const handleNodeOffline = useCallback((nodeId: number) => {
     setNodeList((prev) =>
@@ -1650,13 +1684,24 @@ export default function NodePage() {
                   node.expiryTime,
                   node.renewalCycle,
                 );
+                const connectionStatusMeta = getConnectionStatusMeta(
+                  node.connectionStatus,
+                );
+                const hasRemark = Boolean(node.remark?.trim());
+                const hasExpiryInfo = Boolean(
+                  node.expiryTime && node.expiryTime > 0 && node.renewalCycle,
+                );
+                const hasInfoTrigger = hasRemark || hasExpiryInfo;
+                const infoCount = Number(hasExpiryInfo) + Number(hasRemark);
+                const infoPlacement = infoPopoverPlacement[node.id] ?? "left";
 
                 return (
                   <SortableItem key={node.id} id={node.id}>
                     {(listeners) => (
                       <Card
+                        data-node-card="true"
                         key={node.id}
-                        className={`group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden h-full flex flex-col ${expiryMeta.accentClassName}`}
+                        className={`group relative overflow-visible shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 h-full flex flex-col ${expiryMeta.accentClassName}`}
                       >
                         <CardHeader className="pb-3 md:pb-3">
                           <div className="flex justify-between items-start w-full gap-3">
@@ -1683,51 +1728,103 @@ export default function NodePage() {
                                   onValueChange={() => toggleSelect(node.id)}
                                 />
                               )}
-                              <h3 className="pt-0.5 font-semibold text-foreground truncate text-sm leading-5">
-                                {node.name}
-                              </h3>
+                              <div className="min-w-0 flex-1 pt-0.5">
+                                <div className="flex items-center gap-2 min-w-0">
+                                  <h3 className="font-semibold text-foreground truncate text-sm leading-5">
+                                    {node.name}
+                                  </h3>
+                                  <span
+                                    className={`h-2.5 w-2.5 rounded-full flex-shrink-0 ${connectionStatusMeta.color === "success" ? "bg-emerald-500" : "bg-rose-500"}`}
+                                    title={connectionStatusMeta.text}
+                                  />
+                                </div>
+                              </div>
                             </div>
-                            <div className="ml-2 flex max-w-[58%] flex-wrap items-center justify-end gap-1.5 self-start">
-                              {isRemoteNode && (
-                                <Chip
-                                  className="text-[10px] h-5 px-1 flex-shrink-0"
-                                  color="secondary"
-                                  size="sm"
-                                  variant="flat"
+                            <div className="ml-2 flex-shrink-0 self-start">
+                              {hasInfoTrigger && (
+                                <div className="group/info relative">
+                                  <button
+                                    aria-label={`查看节点信息，共 ${infoCount} 项`}
+                                    className="relative flex h-7 w-7 items-center justify-center rounded-full border border-divider/80 bg-background/95 text-default-500 shadow-sm transition hover:border-default-300 hover:text-foreground focus-visible:border-default-300 focus-visible:text-foreground focus-visible:outline-none"
+                                    onFocus={(event) =>
+                                      updateInfoPopoverPlacement(
+                                        node.id,
+                                        event.currentTarget,
+                                      )
+                                    }
+                                    onMouseEnter={(event) =>
+                                      updateInfoPopoverPlacement(
+                                        node.id,
+                                        event.currentTarget,
+                                      )
+                                    }
+                                    type="button"
+                                  >
+                                  <svg
+                                    aria-hidden="true"
+                                    className="h-3.5 w-3.5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={1.8}
+                                    />
+                                  </svg>
+                                  {hasRemark && (
+                                    <span className="absolute -right-1 -top-1 flex h-2.5 w-2.5 rounded-full border border-background bg-default-300 shadow-sm dark:bg-default-500" />
+                                  )}
+                                </button>
+                                <div
+                                  className={`pointer-events-none invisible absolute z-30 w-72 max-w-[min(18rem,calc(100vw-4rem))] rounded-xl border border-divider/80 bg-background/98 p-3 opacity-0 shadow-xl backdrop-blur transition-all duration-150 group-hover/info:visible group-hover/info:pointer-events-auto group-hover/info:opacity-100 group-focus-within/info:visible group-focus-within/info:pointer-events-auto group-focus-within/info:opacity-100 ${
+                                    infoPlacement === "bottom"
+                                      ? "right-0 top-[calc(100%+0.75rem)] translate-y-1 group-hover/info:translate-y-0 group-focus-within/info:translate-y-0"
+                                      : "right-[calc(100%+0.75rem)] top-1/2 -translate-y-1/2 translate-x-1 group-hover/info:translate-x-0 group-focus-within/info:translate-x-0"
+                                  }`}
                                 >
-                                  远程
-                                </Chip>
-                              )}
-                              {(() => {
-                                const connectionStatusMeta =
-                                  getConnectionStatusMeta(
-                                    node.connectionStatus,
-                                  );
+                                  <div className="space-y-3">
+                                    {hasExpiryInfo && (
+                                      <div className="space-y-2">
+                                        <div className="text-[11px] font-medium text-default-500">
+                                          到期提醒
+                                        </div>
+                                        <div className="flex flex-wrap gap-1.5">
+                                          <Chip
+                                            className="text-[10px] h-5 px-1 flex-shrink-0"
+                                            color={expiryMeta.tone}
+                                            size="sm"
+                                            title={`${formatNodeRenewalTime(expiryMeta.nextDueTime)} (${getNodeRenewalCycleLabel(node.renewalCycle)})`}
+                                            variant="flat"
+                                          >
+                                            {expiryMeta.label}
+                                          </Chip>
+                                        </div>
+                                        <div className="rounded-lg border border-divider/80 bg-default-50/80 px-3 py-2 text-xs leading-5 text-default-700">
+                                          {formatNodeRenewalTime(expiryMeta.nextDueTime)}
+                                        </div>
+                                      </div>
+                                    )}
 
-                                return (
-                                  <Chip
-                                    className="text-[10px] h-5 px-1"
-                                    color={connectionStatusMeta.color}
-                                    size="sm"
-                                    variant="flat"
-                                  >
-                                    {connectionStatusMeta.text}
-                                  </Chip>
-                                );
-                              })()}
-                              {node.expiryTime &&
-                                node.expiryTime > 0 &&
-                                node.renewalCycle && (
-                                  <Chip
-                                    className="text-[10px] h-5 px-1 flex-shrink-0"
-                                    color={expiryMeta.tone}
-                                    size="sm"
-                                    title={`${formatNodeRenewalTime(expiryMeta.nextDueTime)} (${getNodeRenewalCycleLabel(node.renewalCycle)})`}
-                                    variant="flat"
-                                  >
-                                    {expiryMeta.label}
-                                  </Chip>
-                                )}
+                                    {hasRemark && (
+                                      <div className="space-y-2">
+                                        <div className="text-[11px] font-medium text-default-500">
+                                          备注
+                                        </div>
+                                        <div
+                                          className="max-h-32 overflow-y-auto rounded-lg border border-divider/80 bg-default-50/80 px-3 py-2 text-xs leading-5 text-default-700 break-all [scrollbar-width:thin]"
+                                          title={node.remark?.trim()}
+                                        >
+                                          {node.remark?.trim()}
+                                        </div>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                                </div>
+                              )}
                             </div>
                           </div>
                         </CardHeader>
@@ -2051,14 +2148,6 @@ export default function NodePage() {
                           )}
 
                           <div className="mt-auto space-y-3">
-                            {node.remark?.trim() && (
-                              <div className="rounded-md border border-divider/80 bg-default-50/80 px-2.5 py-2.5 text-xs leading-5 text-default-700 break-all">
-                                <div title={node.remark.trim()}>
-                                  {node.remark.trim()}
-                                </div>
-                              </div>
-                            )}
-
                             {/* 操作按钮 */}
                             <div className="space-y-1.5">
                               {!isRemoteNode && (