diff --git a/todos/src/App.vue b/todos/src/App.vue
index 6b23cc7..fd187db 100644
--- a/todos/src/App.vue
+++ b/todos/src/App.vue
@@ -56,5 +56,6 @@ const showTodos = computed(() => {
     :count="showTodos.length"
     :tabType="todoStore.tabType"
     @changeTabType="changeTabType"
+    @clearCompleted="todoStore.clearCompleted"
   />
 </template>
diff --git a/todos/src/components/TodoFooter.vue b/todos/src/components/TodoFooter.vue
index fac6ed0..d2c9825 100644
--- a/todos/src/components/TodoFooter.vue
+++ b/todos/src/components/TodoFooter.vue
@@ -7,6 +7,7 @@
       <a :class="{ active: tabType == 1 }" @click="tabClick(1)">未完成</a>
       <a :class="{ active: tabType == 2 }" @click="tabClick(2)">已完成</a>
     </div>
+    <button class="clearBtn" @click="$emit('clearCompleted')">清除已完成</button>
   </div>
 </template>
 
@@ -49,6 +50,18 @@ export default {
   color: #409eff;
 }
 
+.clearBtn {
+  background-color: #ff4d4f;
+  color: #fff;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.clearBtn:hover {
+  opacity: 0.8;
+}
+
 .active {
   color: #ff4d4f !important;
   font-weight: bold;