Merge pull request #230 from Crokily/feat/Crokily/mdEditor

feat: 新增仿notion设计的markdown编辑器

Author: longsizhuo

.env.sample

@@ -44,3 +44,10 @@ POSTGRES_PRISMA_URL=
 NEXT_PUBLIC_STACK_PROJECT_ID=
 NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=
 STACK_SECRET_SERVER_KEY=
+
+# R2的存储桶，用于提供图片自动上传服务
+R2_ACCOUNT_ID=?
+R2_ACCESS_KEY_ID=?
+R2_SECRET_ACCESS_KEY=?
+R2_BUCKET_NAME=?
+R2_PUBLIC_URL=?

.github/workflows/sync-uuid.yml

@@ -22,7 +22,8 @@ concurrency:
 jobs:
   backfill:
     # 防止 fork、限定 main、并避免机器人循环
-    if: (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/feat/contributor') &&
+    if:
+      (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/feat/contributor') &&
       github.actor != 'github-actions[bot]'
     runs-on: ubuntu-latest
     permissions:

.gitignore

@@ -48,7 +48,7 @@ next-env.d.ts
 .package-lock.json
 
 # Agents.md
-Agents.md
+AGENTS.md
 
 # Environment variables
 .env
@@ -58,3 +58,4 @@ Agents.md
 /generated/prisma
 
 .idea
+.claude

app/api/upload/route.ts

@@ -0,0 +1,119 @@
+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 配置
+ * Cloudflare R2 兼容 S3 API，使用 AWS SDK 连接
+ */
+const r2Client = new S3Client({
+  region: "auto",
+  endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  credentials: {
+    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
+    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
+  },
+});
+
+interface UploadRequest {
+  filename: string;
+  contentType: string;
+  articleSlug: string;
+}
+
+/**
+ * @description POST /api/upload - 生成 R2 预签名 URL，用于客户端直接上传图片
+ * @param request - NextRequest 对象，请求体包含以下字段：
+ *   - filename: 文件名
+ *   - contentType: 文件 MIME 类型
+ *   - articleSlug: 文章 slug（用于组织文件路径）
+ * @returns NextResponse - 返回 JSON 对象：
+ *   - uploadUrl: 预签名上传 URL（用于 PUT 请求）
+ *   - publicUrl: 图片的公开访问 URL
+ *   - key: R2 对象键
+ */
+export async function POST(request: NextRequest) {
+  try {
+    // 验证用户身份
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "未授权访问" }, { status: 401 });
+    }
+
+    // 验证环境变量
+    if (
+      !process.env.R2_ACCOUNT_ID ||
+      !process.env.R2_ACCESS_KEY_ID ||
+      !process.env.R2_SECRET_ACCESS_KEY ||
+      !process.env.R2_BUCKET_NAME ||
+      !process.env.R2_PUBLIC_URL
+    ) {
+      console.error("R2 环境变量未配置");
+      return NextResponse.json(
+        { error: "服务器配置错误：R2 未配置" },
+        { status: 500 },
+      );
+    }
+
+    // 解析请求体
+    const body = (await request.json()) as UploadRequest;
+    const { filename, contentType, articleSlug } = body;
+
+    // 验证请求参数
+    if (!filename || !contentType || !articleSlug) {
+      return NextResponse.json(
+        { error: "缺少必要参数：filename, contentType, articleSlug" },
+        { status: 400 },
+      );
+    }
+
+    // 验证文件类型
+    if (!contentType.startsWith("image/")) {
+      return NextResponse.json(
+        { error: "仅支持图片类型文件" },
+        { status: 400 },
+      );
+    }
+
+    // 生成唯一的对象键
+    // 格式：users/{userId}/{article-slug}/{timestamp}-{filename}
+    const timestamp = Date.now();
+    const userId = session.user.id;
+    const sanitizedSlug = sanitizeDocumentSlug(articleSlug);
+    const sanitizedFilename = sanitizeResourceKey(filename);
+    const key = `users/${userId}/${sanitizedSlug}/${timestamp}-${sanitizedFilename}`;
+
+    // 创建 PutObject 命令
+    const command = new PutObjectCommand({
+      Bucket: process.env.R2_BUCKET_NAME,
+      Key: key,
+      ContentType: contentType,
+    });
+
+    // 生成预签名 URL（15 分钟有效期）
+    const uploadUrl = await getSignedUrl(r2Client, command, {
+      expiresIn: 900,
+    });
+
+    // 生成公开访问 URL
+    const publicUrl = `${process.env.R2_PUBLIC_URL}/${key}`;
+
+    return NextResponse.json({
+      uploadUrl,
+      publicUrl,
+      key,
+    });
+  } catch (error) {
+    console.error("生成预签名 URL 失败:", error);
+    return NextResponse.json(
+      {
+        error: "生成上传链接失败",
+        details: error instanceof Error ? error.message : "未知错误",
+      },
+      { status: 500 },
+    );
+  }
+}

app/components/Contribute.tsx

@@ -12,18 +12,24 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { ExternalLink, Plus, Sparkles } from "lucide-react";
+import { ExternalLink, Sparkles } from "lucide-react";
 import styles from "./Contribute.module.css";
+import { useRouter } from "next/navigation";
 
 // --- antd
 import { TreeSelect } from "antd";
-import type { DefaultOptionType } from "antd/es/select";
 import { DataNode } from "antd/es/tree";
 import { buildDocsNewUrl } from "@/lib/github";
-
-type DirNode = { name: string; path: string; children?: DirNode[] };
-
-const FILENAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]+$/;
+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) {
@@ -44,35 +50,8 @@ Write your content here.
   return buildDocsNewUrl(dirPath, params);
 }
 
-// ✅ 用纯文本 label + 一级节点 selectable:false
-function toTreeSelectData(tree: DirNode[]): DefaultOptionType[] {
-  return tree.map((l1) => ({
-    key: l1.path,
-    value: l1.path,
-    label: l1.name,
-    selectable: false, // ✅ 一级不可选
-    children: [
-      ...(l1.children || []).map((l2) => ({
-        key: l2.path,
-        value: l2.path,
-        label: `${l1.name} / ${l2.name}`, // 纯文本，方便搜索
-        isLeaf: true,
-      })),
-      {
-        key: `${l1.path}/__create__`,
-        value: `${l1.path}/__create__`,
-        label: (
-          <span className="inline-flex items-center">
-            <Plus className="mr-1 h-3.5 w-3.5" />
-            在「{l1.name}」下新建二级子栏目…
-          </span>
-        ),
-      },
-    ],
-  }));
-}
-
 export function Contribute() {
+  const router = useRouter();
   const [open, setOpen] = useState(false);
   const [tree, setTree] = useState<DirNode[]>([]);
   const [loading, setLoading] = useState(false);
@@ -85,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;
@@ -125,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__")) {
+    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",
@@ -173,6 +165,10 @@ export function Contribute() {
                      bg-gradient-to-r from-sky-300 via-sky-400 to-blue-600
                      dark:from-indigo-950 dark:via-slate-900 dark:to-black
                      hover:shadow-[0_25px_60px_-12px] hover:scale-[1.03] transition-all duration-300 ease-out"
+            onClick={(event) => {
+              event.preventDefault();
+              router.push("/editor");
+            }}
           >
             {/* Day gradient shimmer */}
             <span
@@ -276,7 +272,7 @@ export function Contribute() {
           />
         </div>
 
-        {selectedKey.endsWith("/__create__") && (
+        {selectedKey.endsWith(CREATE_SUBDIR_SUFFIX) && (
           <div className="space-y-1">
             <label className="text-sm font-medium">新建二级子栏目名称</label>
             <Input
@@ -285,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>
         )}