diff --git a/src/App.js b/src/App.js index acce7b5..acbd24c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,14 @@ import {HashRouter as Router, Routes, Route, NavLink} from 'react-router-dom'; import {useState, useEffect} from 'react'; import TimestampPage from './pages/TimestampPage'; -import ElectronicWoodenFishPage from "./pages/ElectronicWoodenFishPage"; -import TodoListPage from "./pages/TodoListPage"; +// import ElectronicWoodenFishPage from "./pages/ElectronicWoodenFishPage"; import './App.css'; -import TestPage from "./pages/TestPage"; // 导航项配置数组,便于后续添加 // 为了测试折叠功能,我们添加更多导航项 const navItems = [ {path: '/', label: '时间戳', element: }, - {path: '/dzmy', label: '电子木鱼', element: }, - {path: '/todo', label: '待办', element: }, - {path: '/test', label: '测试', element: } + // {path: '/dzmy', label: '电子木鱼', element: }, ]; function App() { diff --git a/src/pages/TestPage.css b/src/pages/TestPage.css deleted file mode 100644 index c05eb2b..0000000 --- a/src/pages/TestPage.css +++ /dev/null @@ -1,131 +0,0 @@ -.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; -} \ No newline at end of file diff --git a/src/pages/TestPage.js b/src/pages/TestPage.js deleted file mode 100644 index 0f30214..0000000 --- a/src/pages/TestPage.js +++ /dev/null @@ -1,162 +0,0 @@ -import React, { useState, useEffect, useMemo } from 'react'; -import ReactMarkdown from 'react-markdown'; -import { format } from 'date-fns'; -import "./TestPage.css"; - -const TestPage = () => { - // 待办列表数据: { id, content, createdAt } - const [todos, setTodos] = useState(() => { - // 从 localStorage 初始化,保证刷新不丢失 - const saved = localStorage.getItem('markdown-todos'); - return saved ? JSON.parse(saved) : []; - }); - - // UI 状态 - const [isInputVisible, setIsInputVisible] = useState(false); - const [inputValue, setInputValue] = useState(''); - const [editingId, setEditingId] = useState(null); // 当前正在编辑的 ID,null 表示新增 - - // 持久化存储 - useEffect(() => { - localStorage.setItem('markdown-todos', JSON.stringify(todos)); - }, [todos]); - - // --- 核心逻辑:数据处理 --- - - // 1. 处理提交 - const handleSubmit = () => { - if (!inputValue.trim()) return; - - if (editingId) { - // 编辑模式 - setTodos(prev => prev.map(item => - item.id === editingId ? { ...item, content: inputValue } : item - )); - } else { - // 新增模式 - const newTodo = { - id: Date.now(), - content: inputValue, - createdAt: Date.now(), - }; - setTodos(prev => [...prev, newTodo]); - } - - // 重置并关闭 - 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 ( -
-
-

Markdown Todo Tree

- {/* 如果没打开输入框,显示添加按钮 */} - {!isInputVisible && ( - - )} -
- - {/* 输入区域 (Markdown) */} - {isInputVisible && ( -
-