feat: 文件名的处理代码统一使用宽松模式函数，图片等则使用严格清理

Author: Crokily

app/api/upload/route.ts

@@ -2,6 +2,7 @@ import { auth } from "@/auth";
 import { NextRequest, NextResponse } from "next/server";
 import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { sanitizeDocumentSlug, sanitizeResourceKey } from "@/lib/sanitizer";
 
 /**
  * R2 配置
@@ -81,7 +82,9 @@ export async function POST(request: NextRequest) {
     // 格式：users/{userId}/{article-slug}/{timestamp}-{filename}
     const timestamp = Date.now();
     const userId = session.user.id;
-    const key = `users/${userId}/${articleSlug}/${timestamp}-${filename}`;
+    const sanitizedSlug = sanitizeDocumentSlug(articleSlug);
+    const sanitizedFilename = sanitizeResourceKey(filename);
+    const key = `users/${userId}/${sanitizedSlug}/${timestamp}-${sanitizedFilename}`;
 
     // 创建 PutObject 命令
     const command = new PutObjectCommand({

app/components/Contribute.tsx

@@ -20,11 +20,16 @@ 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 {
+  FILENAME_PATTERN,
+  normalizeFilenameBase,
+  type DirNode,
+} from "@/lib/submission";
 import {
   CREATE_SUBDIR_SUFFIX,
   toTreeSelectData,
 } from "@/app/components/contribute/tree-utils";
+import { sanitizeDocumentSlug } from "@/lib/sanitizer";
 
 // 统一调用工具函数生成 GitHub 新建链接，路径规则与 Edit 按钮一致
 function buildGithubNewUrl(dirPath: string, filename: string, title: string) {
@@ -59,22 +64,26 @@ export function Contribute() {
   const [articleFile, setArticleFile] = useState("");
   const [articleFileTouched, setArticleFileTouched] = useState(false);
 
-  const trimmedArticleFile = useMemo(() => articleFile.trim(), [articleFile]);
+  const normalizedArticleFile = useMemo(
+    () => normalizeFilenameBase(articleFile),
+    [articleFile],
+  );
   const { isFileNameValid, fileNameError } = useMemo(() => {
-    if (!trimmedArticleFile) {
+    if (!normalizedArticleFile) {
       return {
         isFileNameValid: false,
         fileNameError: "请填写文件名。",
       };
     }
-    if (!FILENAME_PATTERN.test(trimmedArticleFile)) {
+    if (!FILENAME_PATTERN.test(normalizedArticleFile)) {
       return {
         isFileNameValid: false,
-        fileNameError: "文件名仅支持英文、数字、连字符或下划线。",
+        fileNameError:
+          "文件名仅支持字母、数字、连字符或下划线，并需以字母或数字开头。",
       };
     }
     return { isFileNameValid: true, fileNameError: "" };
-  }, [trimmedArticleFile]);
+  }, [normalizedArticleFile]);
 
   useEffect(() => {
     let mounted = true;
@@ -99,22 +108,31 @@ export function Contribute() {
 
   const options = useMemo(() => toTreeSelectData(tree), [tree]);
 
+  const sanitizedSubdir = useMemo(
+    () => sanitizeDocumentSlug(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 (!l1 || !sanitizedSubdir) return "";
+      return `${l1}/${sanitizedSubdir}`;
     }
     return selectedKey;
-  }, [selectedKey, newSub]);
+  }, [selectedKey, sanitizedSubdir]);
 
   const canProceed = !!finalDirPath && isFileNameValid;
 
   const handleOpenGithub = () => {
     if (!canProceed) return;
-    const filename = trimmedArticleFile.toLowerCase();
+    if (!normalizedArticleFile) return;
+    const filename = normalizedArticleFile;
     const title = articleTitle || filename;
+    if (filename !== articleFile) {
+      setArticleFile(filename);
+    }
     window.open(
       buildGithubNewUrl(finalDirPath, filename, title),
       "_blank",
@@ -263,7 +281,8 @@ export function Contribute() {
               onChange={(e) => setNewSub(e.target.value)}
             />
             <p className="text-xs text-muted-foreground">
-              将创建路径：{selectedKey.split("/")[0]} / {newSub || "<未填写>"}
+              将创建路径：{selectedKey.split("/")[0]} /{" "}
+              {sanitizedSubdir || "<未填写>"}
             </p>
           </div>
         )}

app/components/DocsDestinationForm.tsx

@@ -6,6 +6,7 @@ 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 { sanitizeDocumentSlug } from "@/lib/sanitizer";
 import {
   CREATE_SUBDIR_SUFFIX,
   toTreeSelectData,
@@ -50,15 +51,18 @@ export function DocsDestinationForm({ onChange }: DocsDestinationFormProps) {
 
   const options = useMemo(() => toTreeSelectData(tree), [tree]);
 
+  const sanitizedSubdir = useMemo(
+    () => sanitizeDocumentSlug(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 (!l1 || !sanitizedSubdir) return "";
+    return `${l1}/${sanitizedSubdir}`;
+  }, [selectedKey, sanitizedSubdir]);
 
   useEffect(() => {
     onChange?.(finalDirPath);
@@ -113,7 +117,8 @@ 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>
         </div>
       )}

app/components/EditorMetadataForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import { useEditorStore } from "@/lib/editor-store";
 import { Input } from "@/components/ui/input";
@@ -24,15 +24,17 @@ export function EditorMetadataForm() {
   } = useEditorStore();
 
   const [tagsInputValue, setTagsInputValue] = useState(() => tags.join(", "));
-  const skipNextSync = useRef(false);
+  const [skipNextSync, setSkipNextSync] = useState(false);
+  const [prevTags, setPrevTags] = useState(tags);
 
-  useEffect(() => {
-    if (skipNextSync.current) {
-      skipNextSync.current = false;
-      return;
+  if (tags !== prevTags) {
+    setPrevTags(tags);
+    if (skipNextSync) {
+      setSkipNextSync(false);
+    } else {
+      setTagsInputValue(tags.join(", "));
     }
-    setTagsInputValue(tags.join(", "));
-  }, [tags]);
+  }
 
   // 处理标签输入（逗号分隔）
   const handleTagsChange = (value: string) => {
@@ -42,14 +44,14 @@ export function EditorMetadataForm() {
       .map((tag) => tag.trim())
       .filter((tag) => tag.length > 0);
 
-    skipNextSync.current = true;
+    setSkipNextSync(true);
     setTags(processedTags);
   };
 
   // 处理标签输入框失去焦点 - 过滤所有空标签并同步展示值
   const handleTagsBlur = () => {
     const filteredTags = tags.filter((tag) => tag.length > 0);
-    skipNextSync.current = true;
+    setSkipNextSync(true);
     setTags(filteredTags);
     setTagsInputValue(filteredTags.join(", "));
   };

app/editor/EditorPageClient.tsx

@@ -14,7 +14,7 @@ import type { Session } from "next-auth";
 import { buildDocsNewUrl } from "@/lib/github";
 import {
   FILENAME_PATTERN,
-  ensureMarkdownExtension,
+  normalizeMarkdownFilename,
   stripMarkdownExtension,
 } from "@/lib/submission";
 
@@ -72,7 +72,7 @@ export function EditorPageClient({ session }: EditorPageClientProps) {
   const handleImageCountChange = useCallback((count: number) => {
     setImageCount(count);
   }, []);
-  const previewFilename = filename ? ensureMarkdownExtension(filename) : "";
+  const previewFilename = filename ? normalizeMarkdownFilename(filename) : "";
 
   /**
    * 上传单个图片到 R2
@@ -137,10 +137,12 @@ export function EditorPageClient({ session }: EditorPageClientProps) {
         return;
       }
 
-      const normalizedFilename = ensureMarkdownExtension(filename);
+      const normalizedFilename = normalizeMarkdownFilename(filename);
       const filenameBase = stripMarkdownExtension(normalizedFilename);
       if (!filenameBase || !FILENAME_PATTERN.test(filenameBase)) {
-        alert("文件名仅支持英文、数字、连字符或下划线，并需以字母或数字开头。");
+        alert(
+          "文件名仅支持字母、数字、连字符或下划线，并需以字母或数字开头（已自动清洗空格和特殊符号）。",
+        );
         return;
       }
 

lib/submission.ts

@@ -1,19 +1,35 @@
+import { sanitizeDocumentSlug } from "@/lib/sanitizer";
+
 export type DirNode = {
   name: string;
   path: string;
   children?: DirNode[];
 };
 
-export const FILENAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]+$/;
+export const FILENAME_PATTERN = /^[\p{L}\p{N}][\p{L}\p{N}_-]+$/u;
 
 export function ensureMarkdownExtension(filename: string) {
   const trimmed = filename.trim();
-  if (!trimmed) return "";
-  return trimmed.toLowerCase().endsWith(".md")
-    ? trimmed.toLowerCase()
-    : `${trimmed.toLowerCase()}.md`;
+  if (!trimmed) {
+    return "";
+  }
+  const normalized = trimmed.toLowerCase();
+  return normalized.endsWith(".md") ? normalized : `${normalized}.md`;
 }
 
 export function stripMarkdownExtension(filename: string) {
-  return filename.toLowerCase().replace(/\.md$/i, "");
+  return filename.trim().toLowerCase().replace(/\.md$/i, "");
+}
+
+export function normalizeFilenameBase(filename: string) {
+  const trimmed = filename.trim();
+  if (!trimmed) return "";
+  const withoutExt = stripMarkdownExtension(trimmed);
+  return sanitizeDocumentSlug(withoutExt);
+}
+
+export function normalizeMarkdownFilename(filename: string) {
+  const base = normalizeFilenameBase(filename);
+  if (!base) return "";
+  return ensureMarkdownExtension(base);
 }