feat: add notes feature

Author: JackWang032

package.json

@@ -9,12 +9,14 @@
         "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
         "preview": "pnpm run build && vite preview",
         "pick": "tsx scripts/pick.ts",
+        "sync-notes": "tsx scripts/sync-notes.ts",
         "prepare": "husky install",
         "predeploy": "pnpm run build",
         "deploy": "gh-pages -d dist"
     },
     "dependencies": {
         "@hookform/resolvers": "^3.10.0",
+        "@radix-ui/react-alert-dialog": "^1.1.6",
         "@radix-ui/react-dialog": "^1.1.5",
         "@radix-ui/react-dropdown-menu": "^2.1.5",
         "@radix-ui/react-navigation-menu": "^1.2.4",
@@ -23,12 +25,15 @@
         "@tailwindcss/typography": "^0.5.16",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "idb": "^8.0.2",
         "lucide-react": "^0.474.0",
         "motion": "^12.0.6",
+        "nanoid": "^5.0.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.54.2",
         "react-markdown": "^9.0.1",
+        "react-markdown-editor-lite": "^1.3.4",
         "react-medium-image-zoom": "^5.2.13",
         "react-router-dom": "^7.1.1",
         "rehype-raw": "^7.0.0",

pnpm-lock.yaml

@@ -0,0 +1,14 @@
+[
+    {
+        "id": "ac1YpriQAsqi6fOg-0QYd",
+        "title": "新随记",
+        "createdAt": "2025/2/9 14:42:30",
+        "updatedAt": "2025/2/9 21:47:56"
+    },
+    {
+        "id": "Go6ejUgYlygfuEhFtODLn",
+        "title": "新随记1234",
+        "createdAt": "2025/2/9 14:51:04",
+        "updatedAt": "2025/2/9 21:48:26"
+    }
+]

public/images/1739082098878-u72vckjh61.png

@@ -0,0 +1,4 @@
+<!-- title: 新随记1234 -->
+
+请在这里输入随记内容...3215
+d2121

public/images/1739082098878-v1cjmtiduig.png

@@ -0,0 +1,9 @@
+<!-- title: 新随记 -->
+
+请在这里输入随记内容...1234
+
+4214¡
+
+![image.png](1739083384079-ldwefl817f.png)
+
+![image.png](1739083925268-1ptljqutoyf.png)

public/images/1739083001476-kifywj3id6.png

@@ -145,7 +145,7 @@ TransitionGroup会监测其children的变化，将新的children与原有的chil
 
 代码实现：
 
-```javascript
+```js
 const container = document.querySelector(".flip-container");
 const btnAdd = document.querySelector("#add-btn");
 const btnDelete = document.querySelector("#delete-btn");

public/images/1739083384079-ldwefl817f.png

@@ -0,0 +1,165 @@
+import fs from "fs";
+import path from "path";
+
+interface Note {
+    id: string;
+    title: string;
+    content?: string;
+    createdAt: string;
+    updatedAt: string;
+    deleted?: boolean;
+    synced?: boolean;
+}
+
+interface ProcessedImage {
+    fileName: string;
+    base64: string;
+}
+
+const NOTES_DIR = path.join(process.cwd(), "public/notes");
+const IMAGES_DIR = path.join(process.cwd(), "public/images");
+const NOTES_DATA_FILE = path.join(NOTES_DIR, "notes-data.json");
+
+// 确保目录存在
+[NOTES_DIR, IMAGES_DIR].forEach((dir) => {
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+});
+
+import { getImageHash, getImageExtFromBase64 } from "../src/utils/image";
+
+// 处理 markdown 中的 base64 图片
+function processMarkdownImages(content: string): { content: string; images: ProcessedImage[] } {
+    const images: ProcessedImage[] = [];
+    let newContent = content;
+
+    // 匹配 markdown 中的图片
+    const regex = /!\[([^\]]*)\]\(data:image\/[^;]+;base64,[^)]+\)/g;
+
+    newContent = content.replace(regex, (match, alt) => {
+        const base64 = match.slice(match.indexOf("(") + 1, -1);
+        const ext = getImageExtFromBase64(base64);
+        const hash = getImageHash(base64);
+        const fileName = `${hash}.${ext}`;
+        images.push({
+            fileName,
+            base64,
+        });
+        return `![${alt}](${fileName})`;
+    });
+
+    return { content: newContent, images };
+}
+
+// 确保目录存在
+if (!fs.existsSync(NOTES_DIR)) {
+    fs.mkdirSync(NOTES_DIR, { recursive: true });
+}
+
+// 读取导出的JSON文件
+const exportFile = process.argv[2];
+if (!exportFile) {
+    console.error("请提供导出的JSON文件路径");
+    process.exit(1);
+}
+
+const notes = JSON.parse(fs.readFileSync(exportFile, "utf-8"));
+
+// 读取现有的 notes 数据
+let existingNotesData: Note[] = [];
+if (fs.existsSync(NOTES_DATA_FILE)) {
+    existingNotesData = JSON.parse(fs.readFileSync(NOTES_DATA_FILE, "utf-8"));
+}
+
+// 合并新旧数据
+const mergedNotesData = existingNotesData.slice();
+
+// 更新或添加新的笔记至notes-data.json
+notes.forEach((note: Note) => {
+    const existingIndex = mergedNotesData.findIndex((n) => n.id === note.id);
+    const noteData = {
+        id: note.id,
+        title: note.title,
+        createdAt: note.createdAt,
+        updatedAt: note.updatedAt,
+    };
+
+    if (note.deleted) {
+        // 如果笔记被删除，从合并数据中移除
+        if (existingIndex !== -1) {
+            mergedNotesData.splice(existingIndex, 1);
+        }
+    } else {
+        // 更新或添加笔记
+        if (existingIndex !== -1) {
+            mergedNotesData[existingIndex] = noteData;
+        } else {
+            mergedNotesData.push(noteData);
+        }
+    }
+});
+
+// 写入更新后的数据
+fs.writeFileSync(NOTES_DATA_FILE, JSON.stringify(mergedNotesData, null, 2));
+
+function sanitizeFileName(name: string): string {
+    return name
+        .replace(/[<>:"/\\|?*]/g, "") // 移除非法字符
+        .replace(/\s+/g, "_") // 空格替换为下划线
+        .slice(0, 50); // 限制长度
+}
+
+// 获取现有的markdown文件列表
+const existingFiles = fs.readdirSync(NOTES_DIR).filter((file) => file.endsWith(".md"));
+
+// 将每个note内容写入单独的markdown文件
+notes.forEach((note: Note) => {
+    const shortId = note.id.substring(0, 6);
+    const safeTitle = sanitizeFileName(note.title);
+    const fileName = `${safeTitle}_${shortId}.md`;
+    const filePath = path.join(NOTES_DIR, fileName);
+
+    if (note.deleted) {
+        // 如果笔记已被删除，删除对应的markdown文件
+        if (fs.existsSync(filePath)) {
+            fs.unlinkSync(filePath);
+            console.log(`删除文件: ${fileName}`);
+        }
+    } else {
+        // 处理笔记内容中的图片
+        const { content: processedContent, images } = processMarkdownImages(note.content || "");
+
+        // 保存图片文件
+        images.forEach(({ fileName, base64 }) => {
+            const imagePath = path.join(IMAGES_DIR, fileName);
+            // 如果文件已存在，跳过
+            if (fs.existsSync(imagePath)) {
+                console.log(`图片已存在，跳过: ${fileName}`);
+                return;
+            }
+            const imageData = base64.split(",")[1];
+            fs.writeFileSync(imagePath, Buffer.from(imageData, "base64"));
+            console.log(`写入图片: ${fileName}`);
+        });
+
+        // 写入处理后的 markdown 文件
+        fs.writeFileSync(filePath, processedContent);
+        console.log(`写入文件: ${fileName}`);
+    }
+});
+
+// 清理已不存在的笔记对应的文件
+const validFileNames = mergedNotesData.map(
+    (note: any) => `${sanitizeFileName(note.title)}_${note.id.substring(0, 6)}.md`
+);
+
+existingFiles.forEach((file) => {
+    if (!validFileNames.includes(file) && file !== "notes-data.json") {
+        const filePath = path.join(NOTES_DIR, file);
+        fs.unlinkSync(filePath);
+        console.log(`删除旧文件: ${file}`);
+    }
+});
+
+console.log("同步完成！");

public/images/1739083925268-1ptljqutoyf.png

@@ -6,6 +6,7 @@ import { HashRouter, Routes, Route } from "react-router-dom";
 import BlogPost from "./views/BlogPost";
 import BlogList from "./views/BlogList";
 import WorkSpace from "./views/WorkSpace";
+import Notes from "./views/Notes";
 
 function App() {
     return (
@@ -16,6 +17,7 @@ function App() {
                         <Route path="/" element={<BlogList />} />
                         <Route path="/post/:id" element={<BlogPost />} />
                         <Route path="/workspace" element={<WorkSpace />} />
+                        <Route path="/notes" element={<Notes />} />
                     </Routes>
                 </Layout>
                 <Toaster />

public/images/7f23c923.png

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { memo, useEffect, useRef, useState } from "react";
 import { Copy, ChevronDown, ChevronUp, ThumbsUp } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Loading } from "@/components/ui/loading";
@@ -9,22 +9,23 @@ import { useTheme } from "../ThemeProvider";
 
 interface CodeBlockProps extends React.HTMLAttributes<HTMLElement> {
     language: string;
-    children: React.ReactNode;
+    codeText: string;
+    showParseLoading?: boolean;
 }
 
-const CodeBlock = ({ language, children, ...restProps }: CodeBlockProps) => {
+const CodeBlock = ({ language, codeText, showParseLoading = true, ...restProps }: CodeBlockProps) => {
     const codeRef = useRef<HTMLDivElement>(null);
     const [isCollapsed, setIsCollapsed] = useState(false);
     const [isCopied, setIsCopied] = useState(false);
-    const [isCodePasing, setIsCodePasing] = useState(false);
+    const [isCodeParsing, setIsCodeParsing] = useState(true);
 
     const { toast } = useToast();
     const { theme } = useTheme();
 
     useEffect(() => {
-        const code = codeRef.current?.textContent || "";
-        setIsCodePasing(true);
-        codeToHtml(code.trim(), {
+        const code = codeText.trim();
+        setIsCodeParsing(true);
+        codeToHtml(code, {
             lang: language,
             themes: {
                 dark: "github-dark-high-contrast",
@@ -41,9 +42,9 @@ const CodeBlock = ({ language, children, ...restProps }: CodeBlockProps) => {
                 codeRef.current.innerHTML = html;
             })
             .finally(() => {
-                setIsCodePasing(false);
+                setIsCodeParsing(false);
             });
-    }, [theme]);
+    }, [theme, language, codeText]);
 
     const copyToClipboard = async () => {
         try {
@@ -61,14 +62,6 @@ const CodeBlock = ({ language, children, ...restProps }: CodeBlockProps) => {
         }
     };
 
-    const mergedProps = {
-        ...restProps,
-        style: {
-            ...restProps.style,
-            display: isCodePasing ? "none" : "block",
-        },
-    };
-
     return (
         <div className="relative group code-block-wrapper">
             <div className="w-full pl-4 pr-4 rounded-t-sm flex h-10 dark:bg-zinc-900 bg-zinc-100 items-center gap-2 group-hover:opacity-100 transition-opacity">
@@ -90,13 +83,11 @@ const CodeBlock = ({ language, children, ...restProps }: CodeBlockProps) => {
                 </div>
             </div>
             <div className={cn("transition-all duration-200 overflow-auto", isCollapsed ? "max-h-0" : "max-h-[70vh]")}>
-                {isCodePasing && <Loading description="loading..." className="h-40" />}
-                <div ref={codeRef} {...mergedProps}>
-                    {children}
-                </div>
+                {isCodeParsing && showParseLoading && <Loading description="loading..." className="h-40" />}
+                <div ref={codeRef} {...restProps}></div>
             </div>
         </div>
     );
 };
 
-export default CodeBlock;
+export default memo(CodeBlock);

public/notes/notes-data.json

@@ -7,7 +7,7 @@ interface LayoutProps {
 
 export function Layout({ children }: LayoutProps) {
     return (
-        <div className="min-h-screen bg-background">
+        <div className="min-h-screen bg-background flex flex-col">
             <header className="sticky top-0 z-40 bg-background border-b">
                 <div className="container mx-auto px-4 py-4 flex items-center">
                     <div className="flex items-center md:absolute left-8">
@@ -21,7 +21,7 @@ export function Layout({ children }: LayoutProps) {
                     </div>
                 </div>
             </header>
-            <main className="container mx-auto px-4 md:px-8 lg:px-32 xl:px-64 py-8">{children}</main>
+            <main className="main-page flex-1">{children}</main>
         </div>
     );
 }