feat(files): wide file manager layout and basic previews (FM-2)

- Files page uses a wide layout (route handle layout:"wide"): no max width,
  full-height directory tree docked next to the sidebar, resizable
  (200-520px, remembered, double-click resets) and collapsible; mobile keeps
  the tree in a drawer.
- GET /files/preview (admin console session only, same path guards as
  download): text/NFO with encoding detection (BOM/UTF-16/UTF-8/GB18030/Big5),
  subtitles first 200 cues (SRT/VTT/ASS/SSA, PGS timings), .torrent file
  list/trackers (passkey masked)/infohash, image dimensions. Reads at most
  1 MiB of text; .torrent capped at 4 MiB.
- Download also allows text files, .torrent and avif/gif.
- Research notes in docs/design/file-preview-research.md.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/app/routes/console/layout.tsx

@@ -1,7 +1,7 @@
 import type { SessionInfo } from "@umt/contracts";
 import { ChevronLeft, ChevronRight, Clapperboard, LoaderCircle, Menu } from "lucide-react";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Link, Outlet, useLocation } from "react-router";
+import { Link, Outlet, useLocation, useMatches } from "react-router";
 import { useSession } from "~/api/auth.ts";
 import { AgentDrawer, AgentDrawerTrigger } from "~/components/agent/agent-drawer.tsx";
 import { AccountMenu } from "~/components/console/account-menu.tsx";
@@ -176,6 +176,8 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
   const [collapsed, setCollapsed] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
   const activeLabel = pageTitle(location.pathname) ?? PORTAL_NAME;
+  // 路由 handle.layout === "wide"(文件管理):内容区不限最大宽度、不留外边距,页面自己排版
+  const wide = useMatches().some((m) => (m.handle as { layout?: string } | undefined)?.layout === "wide");
 
   return (
     <div className="app-scrollbars relative isolate flex min-h-screen overflow-x-clip bg-background">
@@ -245,8 +247,8 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
         </header>
 
         {/* 底部留出悬浮按钮的高度,页面末尾的内容能滚到它上面 */}
-        <main className="relative flex-1 overflow-x-clip px-4 pt-6 pb-24 md:px-6 md:pt-8">
-          <div key={location.pathname} className="mx-auto max-w-6xl motion-safe:animate-blur-in">
+        <main className={cn("relative flex-1 overflow-x-clip", !wide && "px-4 pt-6 pb-24 md:px-6 md:pt-8")}>
+          <div key={location.pathname} className={cn(!wide && "mx-auto max-w-6xl", "motion-safe:animate-blur-in")}>
             <Outlet />
           </div>
         </main>