fix: 投稿目录与文件名校验统一

Author: Crokily

app/components/Contribute.tsx

@@ -20,7 +20,12 @@ import { useRouter } from "next/navigation";
 import { TreeSelect } from "antd";
 import { DataNode } from "antd/es/tree";
 import { buildDocsNewUrl } from "@/lib/github";
-import { type DirNode, FILENAME_PATTERN } from "@/lib/submission";
+import {
+  MAX_SLUG_LENGTH,
+  sanitizeSlug,
+  type DirNode,
+  validateSlug,
+} from "@/lib/submission";
 import {
   CREATE_SUBDIR_SUFFIX,
   toTreeSelectData,
@@ -60,21 +65,31 @@ export function Contribute() {
   const [articleFileTouched, setArticleFileTouched] = useState(false);
 
   const trimmedArticleFile = useMemo(() => articleFile.trim(), [articleFile]);
+  const sanitizedArticleFile = useMemo(
+    () => sanitizeSlug(trimmedArticleFile),
+    [trimmedArticleFile],
+  );
   const { isFileNameValid, fileNameError } = useMemo(() => {
     if (!trimmedArticleFile) {
       return {
         isFileNameValid: false,
         fileNameError: "请填写文件名。",
       };
     }
-    if (!FILENAME_PATTERN.test(trimmedArticleFile)) {
+    if (!validateSlug(sanitizedArticleFile)) {
+      return {
+        isFileNameValid: false,
+        fileNameError: `文件名仅支持英文、数字、连字符或下划线（最长 ${MAX_SLUG_LENGTH} 个字符）。`,
+      };
+    }
+    if (sanitizedArticleFile !== trimmedArticleFile) {
       return {
         isFileNameValid: false,
-        fileNameError: "文件名仅支持英文、数字、连字符或下划线。",
+        fileNameError: `请使用规范化后的文件名：${sanitizedArticleFile}`,
       };
     }
     return { isFileNameValid: true, fileNameError: "" };
-  }, [trimmedArticleFile]);
+  }, [sanitizedArticleFile, trimmedArticleFile]);
 
   useEffect(() => {
     let mounted = true;
@@ -98,22 +113,23 @@ export function Contribute() {
   }, []);
 
   const options = useMemo(() => toTreeSelectData(tree), [tree]);
+  const sanitizedSubdir = useMemo(() => sanitizeSlug(newSub), [newSub]);
 
   const finalDirPath = useMemo(() => {
     if (!selectedKey) return "";
     if (selectedKey.endsWith(CREATE_SUBDIR_SUFFIX)) {
       const l1 = selectedKey.split("/")[0];
-      if (!newSub.trim()) return "";
-      return `${l1}/${newSub.trim().replace(/\s+/g, "-")}`;
+      if (!sanitizedSubdir) return "";
+      return `${l1}/${sanitizedSubdir}`;
     }
     return selectedKey;
-  }, [selectedKey, newSub]);
+  }, [sanitizedSubdir, selectedKey]);
 
   const canProceed = !!finalDirPath && isFileNameValid;
 
   const handleOpenGithub = () => {
     if (!canProceed) return;
-    const filename = trimmedArticleFile.toLowerCase();
+    const filename = sanitizedArticleFile;
     const title = articleTitle || filename;
     window.open(
       buildGithubNewUrl(finalDirPath, filename, title),

app/components/DocsDestinationForm.tsx

@@ -5,7 +5,7 @@ import { TreeSelect } from "antd";
 import type { DataNode } from "antd/es/tree";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/app/components/ui/label";
-import { type DirNode } from "@/lib/submission";
+import { sanitizeSlug, type DirNode } from "@/lib/submission";
 import {
   CREATE_SUBDIR_SUFFIX,
   toTreeSelectData,
@@ -49,16 +49,16 @@ export function DocsDestinationForm({ onChange }: DocsDestinationFormProps) {
   }, []);
 
   const options = useMemo(() => toTreeSelectData(tree), [tree]);
+  const sanitizedSubdir = useMemo(() => sanitizeSlug(newSub), [newSub]);
 
   const finalDirPath = useMemo(() => {
     if (!selectedKey) return "";
     if (!selectedKey.endsWith(CREATE_SUBDIR_SUFFIX)) return selectedKey;
     const [l1] = selectedKey.split("/");
     if (!l1) return "";
-    const sanitized = newSub.trim().replace(/\s+/g, "-");
-    if (!sanitized) return "";
-    return `${l1}/${sanitized}`;
-  }, [selectedKey, newSub]);
+    if (!sanitizedSubdir) return "";
+    return `${l1}/${sanitizedSubdir}`;
+  }, [selectedKey, sanitizedSubdir]);
 
   useEffect(() => {
     onChange?.(finalDirPath);
@@ -113,8 +113,14 @@ export function DocsDestinationForm({ onChange }: DocsDestinationFormProps) {
             onChange={(e) => setNewSub(e.target.value)}
           />
           <p className="text-xs text-muted-foreground">
-            将创建路径：{selectedKey.split("/")[0]} / {newSub || "<未填写>"}
+            将创建路径：{selectedKey.split("/")[0]} /{" "}
+            {sanitizedSubdir || "<未填写或格式不合法>"}
           </p>
+          {newSub && !sanitizedSubdir && (
+            <p className="text-xs text-destructive">
+              仅支持英文、数字、连字符或下划线，且需以字母或数字开头。
+            </p>
+          )}
         </div>
       )}
 

lib/submission.ts

@@ -4,7 +4,8 @@ export type DirNode = {
   children?: DirNode[];
 };
 
-export const FILENAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]+$/;
+export const FILENAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]*$/;
+export const MAX_SLUG_LENGTH = 100;
 
 export function ensureMarkdownExtension(filename: string) {
   const trimmed = filename.trim();
@@ -17,3 +18,30 @@ export function ensureMarkdownExtension(filename: string) {
 export function stripMarkdownExtension(filename: string) {
   return filename.toLowerCase().replace(/\.md$/i, "");
 }
+
+export function sanitizeSlug(input: string) {
+  const normalized = input.normalize("NFKC").toLowerCase().trim();
+  let slug = normalized.replace(/[^a-z0-9_-]+/g, "-");
+  slug = slug.replace(/[-_]{2,}/g, (match) =>
+    match.includes("-") ? "-" : "_",
+  );
+  slug = slug.replace(/^[-_]+|[-_]+$/g, "");
+
+  if (slug.length > MAX_SLUG_LENGTH) {
+    slug = slug.slice(0, MAX_SLUG_LENGTH).replace(/^[-_]+|[-_]+$/g, "");
+  }
+
+  return slug;
+}
+
+export function validateSlug(slug: string) {
+  if (typeof slug !== "string") return false;
+  const sanitized = sanitizeSlug(slug);
+
+  return (
+    sanitized.length > 0 &&
+    sanitized === slug &&
+    sanitized.length <= MAX_SLUG_LENGTH &&
+    FILENAME_PATTERN.test(sanitized)
+  );
+}

tests/submission.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { MAX_SLUG_LENGTH, sanitizeSlug, validateSlug } from "@/lib/submission";
+
+describe("sanitizeSlug", () => {
+  it("normalizes case and whitespace", () => {
+    expect(sanitizeSlug("  My   Post  ")).toBe("my-post");
+  });
+
+  it("removes unsupported characters and emoji", () => {
+    expect(sanitizeSlug("post🔥🚀")).toBe("post");
+  });
+
+  it("converts full-width characters to half-width", () => {
+    expect(sanitizeSlug("ＡＢＣ-１２３")).toBe("abc-123");
+  });
+
+  it("collapses repeated separators and trims edges", () => {
+    expect(sanitizeSlug("__my---post__")).toBe("my-post");
+  });
+
+  it("enforces length limits", () => {
+    const long = "a".repeat(MAX_SLUG_LENGTH + 20);
+    expect(sanitizeSlug(long)).toHaveLength(MAX_SLUG_LENGTH);
+  });
+});
+
+describe("validateSlug", () => {
+  it("accepts already-sanitized slugs within length", () => {
+    expect(validateSlug("a")).toBe(true);
+    expect(validateSlug("my-post")).toBe(true);
+    expect(validateSlug("a".repeat(MAX_SLUG_LENGTH))).toBe(true);
+  });
+
+  it("rejects mixed-case or unsanitized slugs", () => {
+    expect(validateSlug("My-Post")).toBe(false);
+    expect(validateSlug("invalid slug")).toBe(false);
+  });
+
+  it("rejects overly long slugs", () => {
+    expect(validateSlug("a".repeat(MAX_SLUG_LENGTH + 1))).toBe(false);
+  });
+});