diff --git a/vue3_ts_todolist/package-lock.json b/vue3_ts_todolist/package-lock.json
index 712d2c4231cbda28ef68b5f1eb40e2460f6cde6d..4020a9b10236959867705f61d554aa422ad0e4cd 100644
--- a/vue3_ts_todolist/package-lock.json
+++ b/vue3_ts_todolist/package-lock.json
@@ -1578,6 +1578,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -1598,6 +1603,16 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "babel-loader": {
       "version": "8.2.5",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.5.tgz",
@@ -2035,6 +2050,14 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -2537,6 +2560,11 @@
       "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
       "dev": true
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -3484,8 +3512,7 @@
     "follow-redirects": {
       "version": "1.15.1",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz",
-      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "dev": true
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
@@ -3579,6 +3606,16 @@
         }
       }
     },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -4633,14 +4670,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -5636,6 +5671,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
diff --git a/vue3_ts_todolist/package.json b/vue3_ts_todolist/package.json
index 7c3a7e83a245008f060f3c42ae5685dd40beb39b..cdb64a05bf3748e72d8c07433cdc38d643fb0388 100644
--- a/vue3_ts_todolist/package.json
+++ b/vue3_ts_todolist/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "sass": "^1.42.1",
     "sass-loader": "^13.3.2",
     "vant": "^3.6.11",
diff --git a/vue3_ts_todolist/src/components/Clock.vue b/vue3_ts_todolist/src/components/Clock.vue
index 99471d7b0f2277e741f7ec85e2e8a8eac7339695..b5b3da5c7dad57efece4aa493309e8b7a60ef82c 100644
--- a/vue3_ts_todolist/src/components/Clock.vue
+++ b/vue3_ts_todolist/src/components/Clock.vue
@@ -14,6 +14,7 @@ export default defineComponent({
   setup() {
     const currentTime = ref('');
     const currentDate = ref('')
+    const intervalId = ref(Math.floor(Math.random() * 11))
     const updateCurrentTime = () => {
       const now = new Date();
       const year = now.getFullYear();
@@ -22,21 +23,20 @@ export default defineComponent({
       currentTime.value = now.toLocaleTimeString();
       currentDate.value = `${year+'年'}/${month+'月'}/${day+'日'}`
     };
-
     // 在组件挂载时开始更新时间
     onMounted(() => {
       updateCurrentTime();
-      setInterval(updateCurrentTime, 1000);
+      intervalId.value=setInterval(updateCurrentTime, 1000);
     });
-
     // 在组件卸载时停止更新时间
     onUnmounted(() => {
-      clearInterval(updateCurrentTime);
+      clearInterval(intervalId.value);
     });
 
     return {
       currentTime,
-      currentDate
+      currentDate,
+      intervalId
     };
   }
 });
diff --git a/vue3_ts_todolist/src/views/ToDo/ToDo.vue b/vue3_ts_todolist/src/views/ToDo/ToDo.vue
index 1d4ce620e70468aaef363b3853526d981534f26e..231acbbda0c0c3e3f80a7ce0d066e643d21d45d9 100644
--- a/vue3_ts_todolist/src/views/ToDo/ToDo.vue
+++ b/vue3_ts_todolist/src/views/ToDo/ToDo.vue
@@ -18,7 +18,8 @@
       />
     </div>
     <div class="list-box">
-      <todo-list :toDoList="showToDoList" ref="todoListRef" :editTodo="editTodo" :deleteTodo="deleteTodo"></todo-list>
+      <todo-list v-show="showToDoList.length>0" :toDoList="showToDoList" ref="todoListRef" :editTodo="editTodo" :deleteTodo="deleteTodo"></todo-list>
+      <van-empty v-show="showToDoList.length===0" description="空空如也" />
     </div>
     <van-button
         round