From b900d86d794079e4c579817aff324fdb3191bdab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=B3=BD=E7=91=9E?= <yangzerui2021@163.com>
Date: Sat, 17 May 2025 20:41:40 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E8=B0=83=E6=95=B4=20.todo-app=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E8=AE=BE=E7=BD=AE=E6=9C=80=E5=B0=8F=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E5=B9=B6=E4=BF=AE=E5=A4=8D=E7=9B=92=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fadff87..8b68df0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -87,14 +87,15 @@ const list = ref([{
   }
   .todo-app {
     width: 98%;
-    height: 500px;
+    min-height: 500px; /* 或 height: auto */
     background-color: #FFFFFF;
     border-radius: 5px;
     margin-top: 40px;
     margin-left: 1%;
     padding-top: 30px;
-    box-sizing: border-box;
-  }
+    padding-bottom: 10px;
+    box-sizing: border - box;
+}
   body{
       background : linear-gradient(
       to right,
-- 
Gitee


From 937aa1fc266580f48f86736757c4d2b44f971f9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=B3=BD=E7=91=9E?= <yangzerui2021@163.com>
Date: Sat, 17 May 2025 20:54:44 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BE=85=E5=8A=9E?=
 =?UTF-8?q?=E4=BA=8B=E9=A1=B9=E5=88=97=E8=A1=A8=E7=9A=84=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 46 ++++++++++++++++++++++++++++++----------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8b68df0..d530c4f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,25 +31,26 @@ const list = ref([{
     <div class="title">xxx的Todolist</div>
     <div class="todo-from">
       <input 
-      v-model="str"
-      class="todo-input" 
-      type="text" 
-      placeholder="Add a todo">
+        v-model="str"
+        class="todo-input" 
+        type="text" 
+        placeholder="Add a todo">
       <div 
-      @click="add" 
-      class="todo-button">
-      add todo
-    </div>
+        @click="add" 
+        class="todo-button">
+        add todo
+      </div>
     </div>
     <div class="todo-items">
-      <div v-for ="(item,index) in list"
-       :key = index 
-       :class="[item.isComplete ? 'completed item' : 'item']">
-        <div>
-          <input v-model="item.isComplete" type="checkbox">
-          <span class="name">{{item.text}}</span>
+     <div v-if="list.length === 0">暂无待办事项，请添加新任务</div>
+<div v-else>
+  <div v-for="(item, index) in list" :key="index" :class="item.isComplete? 'item completed' : 'item'">
+          <div>
+            <input v-model="item.isComplete" type="checkbox">
+            <span class="name">{{ item.text }}</span>
+          </div>
+          <div v-on:click="del(index)" class="del">del</div>
         </div>
-        <div v-on:click="del(index)" class="del">del</div>
       </div>
     </div>
   </div>
@@ -87,7 +88,7 @@ const list = ref([{
   }
   .todo-app {
     width: 98%;
-    min-height: 500px; /* 或 height: auto */
+    min-height: 500px; /*或 height: auto  */
     background-color: #FFFFFF;
     border-radius: 5px;
     margin-top: 40px;
@@ -96,6 +97,19 @@ const list = ref([{
     padding-bottom: 10px;
     box-sizing: border - box;
 }
+/* .todo-app {
+    width: 98%;
+    height: 500px;
+    background-color: #FFFFFF;
+    border-radius: 5px;
+    margin-top: 40px;
+    margin-left: 1%;
+    padding-top: 30px;
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    overflow-y: auto; 
+   /* 启用垂直滚动条 
+} */
   body{
       background : linear-gradient(
       to right,
-- 
Gitee


From a7db2106fbb2c3998f6eb554ffd989b78c171907 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=B3=BD=E7=91=9E?= <yangzerui2021@163.com>
Date: Sat, 17 May 2025 21:00:27 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E4=B8=BA=E2=80=9C=E6=9A=82=E6=97=A0?=
 =?UTF-8?q?=E5=BE=85=E5=8A=9E=E4=BA=8B=E9=A1=B9=EF=BC=8C=E8=AF=B7=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=96=B0=E4=BB=BB=E5=8A=A1=E2=80=9D=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E5=8F=AF=E8=A7=81=E6=80=A7=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index d530c4f..b8bfbe2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,7 +42,7 @@ const list = ref([{
       </div>
     </div>
     <div class="todo-items">
-     <div v-if="list.length === 0">暂无待办事项，请添加新任务</div>
+     <div v-if="list.length === 0" class="no-todo-tip">暂无待办事项，请添加新任务</div>
 <div v-else>
   <div v-for="(item, index) in list" :key="index" :class="item.isComplete? 'item completed' : 'item'">
           <div>
@@ -151,6 +151,16 @@ const list = ref([{
        justify-content: space-between;
        margin-bottom: 5px;
   }
+  .no-todo-tip {
+  text-align: center; /* 文字水平居中 */
+  font-size: 16px; /* 调整字体大小 */
+  color: #333; /* 深灰色，醒目且不刺激 */
+  margin-top: 20px; /* 与上方元素保持一定间距 */
+  font-weight: 500; /* 增加字体粗细 */
+  padding: 20px; /* 添加内边距，使提示区域更明显 */
+  background-color: #f5f5f5; /* 浅灰色背景，增强可见性 */
+  border-radius: 8px; /* 圆角边框 */
+}
   .todo-button{
               user-select: none;
               cursor: pointer;
-- 
Gitee


From a33547b50bc9730649a438c835ffd5f9e2712ebf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=B3=BD=E7=91=9E?= <yangzerui2021@163.com>
Date: Sat, 17 May 2025 21:11:05 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E6=B7=BB=E5=8A=A0=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 64 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b8bfbe2..ba1a331 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,35 @@
 <script setup>
 import { ref } from 'vue';
 
-const str =ref("")
+const str = ref("");
+const list = ref([
+  { isComplete: false, text: "吃饭" },
+  { isComplete: false, text: "睡觉" },
+  { isComplete: false, text: "接着吃" }
+]);
+// 添加错误提示状态
+const errorMessage = ref("");
 
-function add(){
+function add() {
+  if (!str.value.trim()) {
+    errorMessage.value = "请输入让自己变的更好的任务";
+    setTimeout(() => {
+      errorMessage.value = "";
+    }, 3000);
+    return;
+  }
+  
   list.value.push({
-  isComplete:false,
-  text:str.value
-  })
-  str.value = ""; // 清空输入框
+    isComplete: false,
+    text: str.value
+  });
+  str.value = "";
+  errorMessage.value = ""; // 成功添加后清除错误
 }
 
-function del(index){
-  list.value.splice(index,1)
+function del(index) {
+  list.value.splice(index, 1);
 }
-
-const list = ref([{
-  isComplete:false,
-  text:"吃饭"},{
-  isComplete:false,
-  text:"睡觉"},{
-  isComplete:false,
-  text:"接着吃"}
-]);
 </script>
 
 <template>
@@ -41,10 +48,12 @@ const list = ref([{
         add todo
       </div>
     </div>
+     <!-- 添加错误提示 -->
+    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
     <div class="todo-items">
-     <div v-if="list.length === 0" class="no-todo-tip">暂无待办事项，请添加新任务</div>
-<div v-else>
-  <div v-for="(item, index) in list" :key="index" :class="item.isComplete? 'item completed' : 'item'">
+      <div v-if="list.length === 0" class="no-todo-tip">暂无待办事项，请添加新任务</div>
+      <div v-else>
+        <div v-for="(item, index) in list" :key="index" :class="item.isComplete ? 'item completed' : 'item'">
           <div>
             <input v-model="item.isComplete" type="checkbox">
             <span class="name">{{ item.text }}</span>
@@ -160,6 +169,21 @@ const list = ref([{
   padding: 20px; /* 添加内边距，使提示区域更明显 */
   background-color: #f5f5f5; /* 浅灰色背景，增强可见性 */
   border-radius: 8px; /* 圆角边框 */
+  font-weight: 800; /* 半粗体，使文字更突出 */
+}
+/* 添加错误提示样式 */
+.error-message {
+  color: #ff4d4f;           /* 柔和的红色 */
+  text-align: center;
+  margin: 10px 0;           /* 上下间距 */
+  font-size: 14px;
+  padding: 10px 15px;       /* 适当内边距 */
+  background-color: #fff2f0; /* 浅红色背景 */
+  border-radius: 6px;
+  transition: all 0.25s ease;
+  max-width: 400px;         /* 限制最大宽度 */
+  margin-left: auto;        /* 配合max-width实现居中 */
+  margin-right: auto;
 }
   .todo-button{
               user-select: none;
-- 
Gitee