fix: skip search fetch when query is blank, keep dir error in own row

- Add enabled flag to useRegistryQuery so the search route no longer
  briefly flashes a loading skeleton (and no unsafe double-cast) when
  q is empty; the empty state renders immediately
- Give dirError a full-width basis and let the files row wrap so the
  error message drops below both panes instead of forming a third column

Author: thonatos

apps/web/app/components/cnpm/FilesView.tsx

@@ -101,7 +101,7 @@ export function FilesView({ pkgName, spec }: { pkgName: string; spec: string })
   }
 
   return (
-    <div className="flex flex-col gap-4 md:flex-row">
+    <div className="flex flex-col gap-4 md:flex-row md:flex-wrap">
       <div className="max-h-[70vh] w-full overflow-auto rounded-lg border bg-muted/30 p-2 md:max-w-sm">
         <FileNode
           entries={root.files}
@@ -126,7 +126,7 @@ export function FilesView({ pkgName, spec }: { pkgName: string; spec: string })
       {dirError && (
         <p
           role="status"
-          className="mt-2 rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs text-destructive"
+          className="w-full basis-full rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs text-destructive"
         >
           目录加载失败：{dirError}，请重新展开重试
         </p>

apps/web/app/lib/registry/client.ts

@@ -91,7 +91,11 @@ export async function getFileContent(pkg: string, spec: string, path: string) {
   return res.text();
 }
 
-export function useRegistryQuery<T>(fetcher: () => Promise<T>, deps: unknown[]) {
+export function useRegistryQuery<T>(
+  fetcher: () => Promise<T>,
+  deps: unknown[],
+  enabled = true,
+) {
   const [data, setData] = useState<T | null>(null);
   const [error, setError] = useState<RegistryError | null>(null);
   const [loading, setLoading] = useState(true);
@@ -100,6 +104,12 @@ export function useRegistryQuery<T>(fetcher: () => Promise<T>, deps: unknown[])
   fetcherRef.current = fetcher;
 
   useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      setError(null);
+      setData(null);
+      return;
+    }
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -125,7 +135,7 @@ export function useRegistryQuery<T>(fetcher: () => Promise<T>, deps: unknown[])
       cancelled = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...deps, attempt]);
+  }, [...deps, attempt, enabled]);
 
   return { data, error, loading, retry: () => setAttempt((value) => value + 1) };
 }

apps/web/app/routes/cnpm.search.tsx

@@ -34,11 +34,9 @@ export default function CnpmSearch() {
   const from = (page - 1) * PAGE_SIZE;
 
   const { data, error, loading, retry } = useRegistryQuery(
-    () =>
-      q
-        ? searchPackages(q, from, PAGE_SIZE)
-        : Promise.resolve({ objects: [], total: 0 } as unknown as Awaited<ReturnType<typeof searchPackages>>),
+    () => searchPackages(q, from, PAGE_SIZE),
     [q, from],
+    Boolean(q),
   );
 
   return (