feat: implement Markdown Todo Tree with date grouping and local storage persistence

- Added new CSS styles for the TestPage component.
- Refactored TestPage.js to manage a Markdown-based todo list with date grouping.
- Integrated date-fns for date formatting.
- Introduced ReactMarkdown for rendering Markdown content.
- Enhanced user experience with input handling for adding and editing todos.
- Implemented local storage for persistent state across sessions.

package.json

@@ -7,13 +7,15 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^13.5.0",
+    "date-fns": "^4.1.0",
     "dexie": "^4.2.1",
     "dexie-react-hooks": "^4.2.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "react-markdown": "^10.1.0",
+    "react-markdown": "^6.0.3",
     "react-router-dom": "^6.30.2",
     "react-scripts": "5.0.1",
+    "remark-gfm": "^1.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/pages/TestPage.css

@@ -0,0 +1,131 @@
+.app-container {
+  /* 关键：限制最小宽度和高度，适配 Chrome Extension Popup */
+  min-width: 350px;
+  min-height: 500px;
+  max-width: 800px; /* 在网页运行时限制最大宽度 */
+  margin: 0 auto;
+  padding: 20px;
+  background: white;
+  box-shadow: 0 0 10px rgba(0,0,0,0.05);
+}
+
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+/* 按钮样式 */
+button {
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-weight: bold;
+}
+.btn-primary { background-color: #007bff; color: white; }
+.btn-save { background-color: #28a745; color: white; margin-right: 10px; }
+.btn-cancel { background-color: #dc3545; color: white; }
+
+/* 输入框 */
+.input-area {
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid #ddd;
+}
+
+.markdown-input {
+  width: 100%;
+  height: 100px;
+  padding: 10px;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  resize: vertical;
+  margin-bottom: 10px;
+  font-family: monospace;
+}
+
+/* 树状结构 */
+.date-group {
+  margin-bottom: 15px;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.date-header {
+  background-color: #e9ecef;
+  padding: 10px;
+  cursor: pointer;
+  font-weight: bold;
+  user-select: none;
+  list-style: none; /* 隐藏默认三角，部分浏览器需要 */
+  display: flex;
+  align-items: center;
+}
+/* 自定义折叠箭头 */
+.date-header::before {
+  content: '▶';
+  display: inline-block;
+  margin-right: 8px;
+  font-size: 0.8em;
+  transition: transform 0.2s;
+}
+details[open] .date-header::before {
+  transform: rotate(90deg);
+}
+
+.count-badge {
+  background: #6c757d;
+  color: white;
+  border-radius: 10px;
+  padding: 2px 8px;
+  font-size: 0.8em;
+  margin-left: auto;
+}
+
+.todo-list {
+  padding: 0;
+}
+
+.todo-item {
+  padding: 12px 15px;
+  border-top: 1px solid #f0f0f0;
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  transition: background 0.2s;
+}
+
+.todo-item:hover {
+  background-color: #f1f8ff;
+}
+
+.time-tag {
+  font-size: 0.75em;
+  color: #999;
+  margin-right: 12px;
+  white-space: nowrap;
+  margin-top: 4px; /* 对齐 */
+}
+
+.markdown-content {
+  flex: 1;
+  font-size: 0.95em;
+  line-height: 1.5;
+}
+
+/* Markdown 内部样式修正，防止标题太大 */
+.markdown-content h1, .markdown-content h2, .markdown-content h3 {
+  margin: 5px 0;
+  font-size: 1.1em;
+}
+.markdown-content p {
+  margin: 0;
+}

src/pages/TestPage.js

@@ -1,111 +1,162 @@
-import React, {useEffect} from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
-import {db} from '../utils/db';
+import ReactMarkdown from 'react-markdown';
-import {useLiveQuery} from 'dexie-react-hooks';
+import { format } from 'date-fns';
-
+import "./TestPage.css";
-// 样式简单写一下，实际可以用 styled-components 或 css modules
-const styles = {
-  container: {padding: '20px', fontFamily: 'sans-serif', maxWidth: '600px', margin: '0 auto'},
-  uploadBox: {
-    border: '2px dashed #aaa',
-    padding: '40px',
-    textAlign: 'center',
-    background: '#f9f9f9',
-    marginBottom: '20px',
-    borderRadius: '8px'
-  },
-  grid: {display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: '10px'},
-  card: {border: '1px solid #eee', borderRadius: '8px', overflow: 'hidden', position: 'relative'},
-  img: {width: '100%', height: '120px', objectFit: 'cover', display: 'block'},
-  delBtn: {
-    position: 'absolute',
-    top: '5px',
-    right: '5px',
-    background: 'red',
-    color: 'white',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '2px 8px',
-    borderRadius: '4px'
-  }
-};
 
 const TestPage = () => {
-  const images = useLiveQuery(() => db.images.orderBy('created').reverse().toArray());
+  // 待办列表数据: { id, content, createdAt }
+  const [todos, setTodos] = useState(() => {
+    // 从 localStorage 初始化，保证刷新不丢失
+    const saved = localStorage.getItem('markdown-todos');
+    return saved ? JSON.parse(saved) : [];
+  });
 
-  // --- FIX 2: 修复重复粘贴问题 ---
+  // UI 状态
+  const [isInputVisible, setIsInputVisible] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [editingId, setEditingId] = useState(null); // 当前正在编辑的 ID，null 表示新增
+
+  // 持久化存储
   useEffect(() => {
-    const handlePaste = async (event) => {
+    localStorage.setItem('markdown-todos', JSON.stringify(todos));
-      // 1. 获取剪贴板数据
+  }, [todos]);
-      const items = (event.clipboardData || event.originalEvent.clipboardData).items;
 
-      // 2. 找到第一个图片文件 (防止一次粘贴循环出多个格式)
+  // --- 核心逻辑：数据处理 ---
-      let foundImage = false;
 
-      for (let item of items) {
+  // 1. 处理提交
-        if (!foundImage && item.kind === 'file' && item.type.includes('image/')) {
+  const handleSubmit = () => {
-          const blob = item.getAsFile();
+    if (!inputValue.trim()) return;
-          foundImage = true; // 标记已找到，避免重复处理
 
-          // 3. 阻止默认行为（防止浏览器把图片直接贴到页面上）
+    if (editingId) {
-          event.preventDefault();
+      // 编辑模式
-          
+      setTodos(prev => prev.map(item => 
-          await db.images.add({
+        item.id === editingId ? { ...item, content: inputValue } : item
-            blob: blob,
+      ));
-            created: new Date(),
+    } else {
-            source: 'Paste'
+      // 新增模式
-          });
+      const newTodo = {
-          
+        id: Date.now(),
-          console.log('图片已添加');
+        content: inputValue,
-        }
+        createdAt: Date.now(),
-      }
+      };
-    };
+      setTodos(prev => [...prev, newTodo]);
-    
-    // 添加监听
-    window.addEventListener('paste', handlePaste);
-    
-    // ★★★ 关键：必须返回一个清理函数，组件刷新时移除旧的监听器 ★★★
-    return () => {
-      window.removeEventListener('paste', handlePaste);
-    };
-  }, []); // ★★★ 关键：依赖数组必须为空 []，保证只在挂载时绑定一次
-  
-  
-  // --- FIX 1: 修复删除变增加的问题 ---
-  const handleDelete = async (event, id) => {
-    // ★★★ 关键：阻止事件冒泡，防止触发父级的点击或粘贴逻辑
-    event.stopPropagation();
-    
-    try {
-      await db.images.delete(id);
-      console.log('删除成功 ID:', id);
-    } catch (error) {
-      console.error('删除失败:', error);
     }
+
+    // 重置并关闭
+    setInputValue('');
+    setEditingId(null);
+    setIsInputVisible(false);
   };
 
+  // 2. 处理点击待办（进入编辑）
+  const handleEditClick = (todo) => {
+    setInputValue(todo.content);
+    setEditingId(todo.id);
+    setIsInputVisible(true);
+  };
+
+  // 3. 处理取消/关闭
+  const handleCancel = () => {
+    setIsInputVisible(false);
+    setInputValue('');
+    setEditingId(null);
+  };
+
+  // 4. 数据分组与排序 (核心需求 4)
+  const groupedTodos = useMemo(() => {
+    const groups = {};
+
+    todos.forEach(todo => {
+      // 第一层 Key: 日期 (例如 2023-10-27)
+      const dateKey = format(todo.createdAt, 'yyyy-MM-dd');
+      if (!groups[dateKey]) {
+        groups[dateKey] = [];
+      }
+      groups[dateKey].push(todo);
+    });
+
+    // 将对象转为数组以便排序渲染
+    const groupArray = Object.keys(groups).map(date => ({
+      date,
+      items: groups[date]
+    }));
+
+    // 第一层排序：按日期倒序
+    groupArray.sort((a, b) => new Date(b.date) - new Date(a.date));
+
+    // 第二层排序：组内按添加时间倒序
+    groupArray.forEach(group => {
+      group.items.sort((a, b) => b.createdAt - a.createdAt);
+    });
+
+    return groupArray;
+  }, [todos]);
+
   return (
-    <div style={styles.container}>
+    <div className="app-container">
-      <h2>React 图片采集器 (已修复)</h2>
+      <header className="app-header">
-      <p>点击任意处粘贴 (Ctrl+V)</p>
+        <h2>Markdown Todo Tree</h2>
+        {/* 如果没打开输入框，显示添加按钮 */}
+        {!isInputVisible && (
+          <button className="btn-primary" onClick={() => setIsInputVisible(true)}>
+            + 新增待办
+          </button>
+        )}
+      </header>
 
-      <div style={styles.grid}>
+      {/* 输入区域 (Markdown) */}
-        {images?.map((img) => (
+      {isInputVisible && (
-          <div key={img.id} style={styles.card}>
+        <div className="input-area">
-            <img src={URL.createObjectURL(img.blob)} alt="screenshot" style={styles.img}/>
+          <textarea
-            
+            className="markdown-input"
-            {/* 传递 event 对象给 handleDelete */}
+            value={inputValue}
-            <button
+            onChange={(e) => setInputValue(e.target.value)}
-              style={styles.delBtn}
+            placeholder="支持 Markdown 语法，例如：# 标题 或 - 列表"
-              onClick={(e) => handleDelete(e, img.id)}
+            autoFocus
-            >
+          />
-              删除
+          <div className="action-buttons">
+            <button className="btn-save" onClick={handleSubmit}>
+              {editingId ? "更新" : "保存"}
+            </button>
+            <button className="btn-cancel" onClick={handleCancel}>
+              取消
             </button>
-          
           </div>
+        </div>
+      )}
+
+      {/* 树状列表展示区域 */}
+      <div className="todo-tree">
+        {groupedTodos.length === 0 && <p className="empty-tip">暂无待办，点击上方添加</p>}
+
+        {groupedTodos.map((group) => (
+          // 使用 details/summary 原生标签实现折叠/展开
+          <details key={group.date} open className="date-group">
+            <summary className="date-header">
+              {group.date} <span className="count-badge">{group.items.length}</span>
+            </summary>
+
+            <div className="todo-list">
+              {group.items.map((todo) => (
+                <div
+                  key={todo.id}
+                  className="todo-item"
+                  onClick={() => handleEditClick(todo)}
+                  title="点击编辑"
+                >
+                  <div className="time-tag">{format(todo.createdAt, "HH:mm")}</div>
+                  <div className="markdown-content">
+                    {/* 预览渲染 */}
+                    <ReactMarkdown>{todo.content}</ReactMarkdown>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </details>
         ))}
       </div>
     </div>
   );
-}
+};
 
 export default TestPage;