diff --git a/src/App.vue b/src/App.vue
index fadff87ff7bb08b54f267840b7815e6bc46644ea..ba1a3311d7cdae22820ba0e8802c3e7be71d25b7 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>
@@ -31,25 +38,28 @@ 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 v-if="errorMessage" class="error-message">{{ errorMessage }}</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" 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>
+          </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>
@@ -86,6 +96,17 @@ const list = ref([{
       /* 将元素置于页面其他元素的下方，避免遮挡其他内容 */
   }
   .todo-app {
+    width: 98%;
+    min-height: 500px; /*或 height: auto  */
+    background-color: #FFFFFF;
+    border-radius: 5px;
+    margin-top: 40px;
+    margin-left: 1%;
+    padding-top: 30px;
+    padding-bottom: 10px;
+    box-sizing: border - box;
+}
+/* .todo-app {
     width: 98%;
     height: 500px;
     background-color: #FFFFFF;
@@ -93,8 +114,11 @@ const list = ref([{
     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,
@@ -136,6 +160,31 @@ 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; /* 圆角边框 */
+  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;
               cursor: pointer;