fix: apply third-round copilot review suggestions

- URL-encode file path segments in the registry client
- Drop unused getVersion and DownloadCard version prop (downloads are package-wide)
- Keep canonical paths consistent with the real tab/search URLs

Author: thonatos

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

@@ -19,16 +19,14 @@ const chartConfig = {
 
 export function DownloadCard({
   pkgName,
-  version,
   range = 7,
 }: {
   pkgName: string;
-  version: string;
   range?: number;
 }) {
   const { data, loading } = useRegistryQuery(
     () => getDownloads(pkgName, range),
-    [pkgName, version, range],
+    [pkgName, range],
   );
 
   if (loading) {

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

@@ -41,7 +41,7 @@ export function PkgSidebar({ manifest, version }: { manifest: RegistryManifest;
 
   return (
     <div className="flex flex-col gap-5">
-      <DownloadCard pkgName={manifest.name} version={version} />
+      <DownloadCard pkgName={manifest.name} />
       {manifest.maintainers && manifest.maintainers.length > 0 && (
         <MaintainersCard maintainers={manifest.maintainers} />
       )}

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

@@ -38,12 +38,15 @@ function ensureLeadingSlash(path: string) {
   return path.startsWith("/") ? path : `/${path}`;
 }
 
-export function getManifest(pkg: string) {
-  return registryJson<RegistryManifest>(`/${pkgPath(pkg)}`);
+function encodeFilePath(path: string) {
+  return path
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+    .join("/");
 }
 
-export function getVersion(pkg: string, version: string) {
-  return registryJson<RegistryManifest>(`/${pkgPath(pkg)}/${encodeURIComponent(version)}`);
+export function getManifest(pkg: string) {
+  return registryJson<RegistryManifest>(`/${pkgPath(pkg)}`);
 }
 
 export function searchPackages(text: string, from = 0, size = 20) {
@@ -69,15 +72,15 @@ export function getDownloads(pkg: string, range = 7) {
 }
 
 export function getDir(pkg: string, spec: string, path: string) {
-  const dirPath = path && path !== "/" ? `${ensureLeadingSlash(path)}/` : "";
+  const dirPath = path && path !== "/" ? `${encodeFilePath(ensureLeadingSlash(path))}/` : "";
   return registryJson<RegistryFilesResponse>(
     `/${pkgPath(pkg)}/${encodeURIComponent(spec)}/files${dirPath}?meta`,
   );
 }
 
 export async function getFileContent(pkg: string, spec: string, path: string) {
   const res = await fetch(
-    `${REGISTRY}/${pkgPath(pkg)}/${encodeURIComponent(spec)}/files${ensureLeadingSlash(path)}`,
+    `${REGISTRY}/${pkgPath(pkg)}/${encodeURIComponent(spec)}/files${encodeFilePath(ensureLeadingSlash(path))}`,
   );
   if (res.status === 404) {
     throw new RegistryError(`Not Found: ${path}`, 404);

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

@@ -20,11 +20,16 @@ import { useRecentVisited } from "~/lib/registry/use-recent";
 import { seoMeta } from "~/lib/seo";
 
 export function meta({ params }: { params: { "*"?: string } }) {
-  const { name } = parsePkgPath(params["*"]);
+  const { name, tab } = parsePkgPath(params["*"]);
+  const path = name
+    ? tab === "home"
+      ? `/cnpm/pkg/${name}`
+      : `/cnpm/pkg/${name}/${tab}`
+    : "/cnpm";
   return seoMeta({
     title: name ? `${name} · CNPM 镜像` : "CNPM 包浏览器",
     description: name ? `查看 npm 包 ${name} 的 README、版本、依赖与文件。` : undefined,
-    path: name ? `/cnpm/pkg/${name}` : "/cnpm",
+    path,
   });
 }
 
@@ -136,7 +141,7 @@ function CnpmPkgInner({ rest }: { rest?: string }) {
 
         {tab === "trends" && (
           <div className="flex flex-col gap-4">
-            <DownloadCard pkgName={name} version={version} range={30} />
+            <DownloadCard pkgName={name} range={30} />
             <Empty>
               <EmptyTitle>趋势对比即将到来</EmptyTitle>
               <EmptyDescription>多包下载对比与时间范围切换将在此提供</EmptyDescription>

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

@@ -18,11 +18,12 @@ import { cn } from "~/lib/utils";
 const PAGE_SIZE = 20;
 
 export function meta({ location }: { location: { search: string } }) {
-  const q = new URLSearchParams(location.search).get("q") || "npm 包";
+  const q = new URLSearchParams(location.search).get("q") || "";
+  const label = q || "npm 包";
   return seoMeta({
-    title: `搜索 ${q} · CNPM 镜像`,
-    description: `在 npmmirror 镜像搜索 npm 包「${q}」。`,
-    path: `/cnpm/search?q=${encodeURIComponent(q)}`,
+    title: `搜索 ${label} · CNPM 镜像`,
+    description: `在 npmmirror 镜像搜索 npm 包「${label}」。`,
+    path: q ? `/cnpm/search?q=${encodeURIComponent(q)}` : "/cnpm/search",
   });
 }