From d24a18862164fce0f6caa7f639507e37de2b04f9 Mon Sep 17 00:00:00 2001
From: ssdfasd <2156608475@qq.com>
Date: Mon, 9 Mar 2026 15:14:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(todo):=20=E4=BC=98=E5=8C=96=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E9=A1=B9=E7=BC=96=E8=BE=91=E4=BD=93=E9=AA=8C=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E8=A1=8C=E8=BE=93=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/todo/TodoPage.tsx | 51 +++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/modules/todo/TodoPage.tsx b/src/modules/todo/TodoPage.tsx
index db3efa7..7e5619a 100644
--- a/src/modules/todo/TodoPage.tsx
+++ b/src/modules/todo/TodoPage.tsx
@@ -35,7 +35,14 @@ export const TodoPage: React.FC = () => {
   const [addingDate, setAddingDate] = useState<string | null>(null)
   const [newTodoContent, setNewTodoContent] = useState('')
   const [isInitialLoad, setIsInitialLoad] = useState(true)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const editInputRef = useRef<HTMLTextAreaElement>(null)
+
+  const adjustTextAreaHeight = (el: HTMLTextAreaElement) => {
+    const baseHeight = 28 // 1.75rem = 28px
+    el.style.height = baseHeight + 'px'
+    el.style.height = Math.max(el.scrollHeight, baseHeight) + 'px'
+  }
 
   const loadTodoData = useCallback(async (year: number, month: number, isInitial: boolean = false) => {
     if (isInitial) {
@@ -62,9 +69,16 @@ export const TodoPage: React.FC = () => {
   useEffect(() => {
     if (addingDate && inputRef.current) {
       inputRef.current.focus()
+      adjustTextAreaHeight(inputRef.current)
     }
   }, [addingDate])
 
+  useEffect(() => {
+    if (editingItem && editInputRef.current) {
+      adjustTextAreaHeight(editInputRef.current)
+    }
+  }, [editingItem])
+
   const handlePrevMonth = () => {
     if (currentMonth === 1) {
       setCurrentMonth(12)
@@ -266,11 +280,11 @@ export const TodoPage: React.FC = () => {
                   )}
                 </div>
 
-                <div className="pl-2 space-y-1">
+                <div className="pl-2 space-y-2">
                   {dayTodo?.items.map((item, index) => (
                     <div
                       key={item.id}
-                      className="flex items-center gap-3 group h-7"
+                      className="flex items-center gap-3 group"
                     >
                       <button
                         onClick={() => canEdit && handleToggleTodo(date, index, !item.completed)}
@@ -288,18 +302,23 @@ export const TodoPage: React.FC = () => {
                       </button>
 
                       {editingItem?.date === date && editingItem?.index === index ? (
-                        <input
-                          type="text"
+                        <textarea
+                          ref={editInputRef}
                           value={editContent}
-                          onChange={(e) => setEditContent(e.target.value)}
+                          onChange={(e) => {
+                            setEditContent(e.target.value)
+                            adjustTextAreaHeight(e.target)
+                          }}
                           onKeyDown={handleEditKeyDown}
                           onBlur={handleSaveEdit}
                           autoFocus
-                          className="flex-1 px-2 py-0.5 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800 dark:text-gray-200"
+                          rows={1}
+                          className="flex-1 px-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800 dark:text-gray-200 resize-none overflow-hidden align-top"
+                          style={{ height: '1.75rem' }}
                         />
                       ) : (
                         <span
-                          onDoubleClick={() => canEdit && handleStartEdit(date, index, item.content)}
+                          onDoubleClick={() => canEdit && !item.completed && handleStartEdit(date, index, item.content)}
                           className={`flex-1 ${canEdit ? 'cursor-pointer' : 'cursor-default'
                             } ${item.completed
                               ? 'text-gray-400 dark:text-gray-500 line-through'
@@ -310,7 +329,7 @@ export const TodoPage: React.FC = () => {
                         </span>
                       )}
 
-                      {canEdit && (
+{canEdit && !item.completed && (
                         <button
                           onClick={() => handleDeleteTodo(date, index)}
                           className="p-1 opacity-0 group-hover:opacity-100 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-all text-red-500"
@@ -322,19 +341,23 @@ export const TodoPage: React.FC = () => {
                   ))}
 
                   {canEdit && addingDate === date && (
-                    <div className="flex items-center gap-3 h-7">
+                    <div className="flex items-center gap-3">
                       <div className="w-4 h-4 rounded-full border-2 border-gray-400 dark:border-gray-500 shrink-0" />
-                      <input
+                      <textarea
                         ref={inputRef}
-                        type="text"
                         value={newTodoContent}
-                        onChange={(e) => setNewTodoContent(e.target.value)}
+                        onChange={(e) => {
+                          setNewTodoContent(e.target.value)
+                          adjustTextAreaHeight(e.target)
+                        }}
                         onKeyDown={(e) => handleKeyDown(e, date)}
                         onBlur={() => {
                           handleAddTodo(date, false)
                         }}
                         placeholder="输入任务内容..."
-                        className="flex-1 px-2 py-0.5 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800 dark:text-gray-200 placeholder-gray-400"
+                        rows={1}
+                        className="flex-1 px-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800 dark:text-gray-200 placeholder-gray-400 resize-none overflow-hidden align-top"
+                        style={{ height: '1.75rem' }}
                       />
                     </div>
                   )}