style:fmt

todos/src/App.vue

@@ -1,33 +1,33 @@
 <script>
-import TodoHeader from './components/TodoHeader.vue'
-import TodoList from './components/TodoList.vue'
-import TodoFooter from './components/TodoFooter.vue'
+import TodoHeader from "./components/TodoHeader.vue";
+import TodoList from "./components/TodoList.vue";
+import TodoFooter from "./components/TodoFooter.vue";
 
 export default {
   components: {
     TodoHeader,
     TodoList,
-    TodoFooter
+    TodoFooter,
   },
 
   data() {
     return {
       // 从 localStorage 初始化
       todos: JSON.parse(localStorage.getItem("vue-todos") || "[]"),
-      tabType: 0 // 0全部 1未完成 2已完成
-    }
+      tabType: 0, // 0全部 1未完成 2已完成
+    };
   },
 
   computed: {
     // 筛选后的列表
     todoList() {
-      if (this.tabType === 0) return this.todos
-      const type = this.tabType
-      return this.todos.filter(item => {
-        if (type === 1) return !item.completed
-        return item.completed
-      })
-    }
+      if (this.tabType === 0) return this.todos;
+      const type = this.tabType;
+      return this.todos.filter((item) => {
+        if (type === 1) return !item.completed;
+        return item.completed;
+      });
+    },
   },
 
   methods: {
@@ -36,34 +36,38 @@ export default {
       this.todos.push({
         id: Date.now(),
         txt: newTodo,
-        completed: false
-      })
+        completed: false,
+      });
     },
 
     // 删除待办
     delTodo(item) {
-      this.todos = this.todos.filter(t => t.id !== item.id)
+      this.todos = this.todos.filter((t) => t.id !== item.id);
     },
 
     changeTabType(type) {
-      this.tabType = type
-    }
+      this.tabType = type;
+    },
   },
 
   // 深度监听 — 自动写入 localStorage
   watch: {
     todos: {
       handler(todos) {
-        localStorage.setItem("vue-todos", JSON.stringify(todos))
+        localStorage.setItem("vue-todos", JSON.stringify(todos));
       },
-      deep: true
-    }
-  }
-}
+      deep: true,
+    },
+  },
+};
 </script>
 
 <template>
   <TodoHeader @addTodo="addTodo" />
   <TodoList :todos="todoList" @delTodo="delTodo" />
-  <TodoFooter :count="todoList.length" :tabType="tabType" @changeTabType="changeTabType" />
+  <TodoFooter
+    :count="todoList.length"
+    :tabType="tabType"
+    @changeTabType="changeTabType"
+  />
 </template>

todos/src/components/TodoFooter.vue

@@ -16,10 +16,10 @@ export default {
 
   methods: {
     tabClick(newType) {
-      this.$emit("changeTabType", newType)
-    }
-  }
-}
+      this.$emit("changeTabType", newType);
+    },
+  },
+};
 </script>
 
 <style scoped>

todos/src/components/TodoHeader.vue

@@ -3,7 +3,11 @@
     <h1>待办事项</h1>
 
     <div class="input-wrapper">
-      <input placeholder="请输入您的待办事项，按下回车后即可添加" v-model.trim="newTodo" @keyup.enter="addNewTodo" />
+      <input
+        placeholder="请输入您的待办事项，按下回车后即可添加"
+        v-model.trim="newTodo"
+        @keyup.enter="addNewTodo"
+      />
     </div>
 
     <p v-show="isShowMsg" style="color: red">
@@ -55,34 +59,31 @@ p {
 </style>
 
 <script>
-const WORD_COUNT_LIMIT = 50
+const WORD_COUNT_LIMIT = 50;
 
 export default {
   data() {
     return {
       newTodo: "",
-      countLimit: WORD_COUNT_LIMIT
-    }
+      countLimit: WORD_COUNT_LIMIT,
+    };
   },
 
   computed: {
     isShowMsg() {
-      return this.newTodo.length > WORD_COUNT_LIMIT
-    }
+      return this.newTodo.length > WORD_COUNT_LIMIT;
+    },
   },
 
   methods: {
     addNewTodo() {
-      if (
-        this.newTodo.length === 0 ||
-        this.newTodo.length > WORD_COUNT_LIMIT
-      ) {
-        return
+      if (this.newTodo.length === 0 || this.newTodo.length > WORD_COUNT_LIMIT) {
+        return;
       }
 
-      this.$emit("addTodo", this.newTodo)
-      this.newTodo = ""
-    }
-  }
-}
+      this.$emit("addTodo", this.newTodo);
+      this.newTodo = "";
+    },
+  },
+};
 </script>

todos/src/components/TodoList.vue

@@ -99,8 +99,9 @@ export default {
 
   methods: {
     delTodo(item) {
-      this.$emit("delTodo", item)
-    }
-  }
-}
-</script>
+      this.$emit("delTodo", item);
+    },
+  },
+};
+</script>
+

todos/src/main.js

@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './assets/global.css'
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./assets/global.css";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");

todos/src/style.css

@@ -81,4 +81,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+}

todos/vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
-})
+});