From b90d4ff97b8d1ff1c4b3defe6c8f1fd59e69ccd2 Mon Sep 17 00:00:00 2001
From: liangjiajie <953682519@qq.com>
Date: Wed, 28 Aug 2024 12:54:35 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=A2=81=E5=AE=B6=E6=9D=B0=2013128888525?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json           | 41 +++++++++++++++++++++++++++++++++++++
 package.json                |  1 +
 src/components/TodoList.vue | 36 +++++++++++++++++++++++---------
 src/pages/index.vue         | 21 +++++++++++--------
 4 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 460c379..72e6928 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
         "@vue/runtime-core": "^3.4.21",
         "@vue/tsconfig": "^0.1.3",
+        "sass": "^1.77.8",
         "typescript": "^4.9.4",
         "vite": "5.2.8",
         "vue-tsc": "^1.0.24"
@@ -6749,6 +6750,12 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "devOptional": true
+    },
     "node_modules/import-local": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -10366,6 +10373,23 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -16711,6 +16735,12 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
+    "immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "devOptional": true
+    },
     "import-local": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -19409,6 +19439,17 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "devOptional": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
diff --git a/package.json b/package.json
index 87623f2..34acb41 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
     "@vue/runtime-core": "^3.4.21",
     "@vue/tsconfig": "^0.1.3",
+    "sass": "^1.77.8",
     "typescript": "^4.9.4",
     "vite": "5.2.8",
     "vue-tsc": "^1.0.24"
diff --git a/src/components/TodoList.vue b/src/components/TodoList.vue
index dc0b036..8f90611 100644
--- a/src/components/TodoList.vue
+++ b/src/components/TodoList.vue
@@ -1,18 +1,21 @@
 <template>
   <div class="list">
-    <TodoItem
-      v-for="(todo, index) in props.todos"
-      :key="todo.text"
-      :todo="todo"
-      @toggle="() => toggleHandler(index)"
-    />
+    <TransitionGroup name="fade" tag="dl">
+      <dd v-for="(todo, index) in todos" :key="todo">
+        <TodoItem
+          :todo="todo"
+          @toggle="() => toggleHandler(index)"
+          :key="todo.text"
+        />
+      </dd>
+    </TransitionGroup>
   </div>
 </template>
 
 <script setup>
-import TodoItem from './TodoItem.vue';
+import TodoItem from './TodoItem.vue'
 
-const emits = defineEmits(['toggle']);
+const emits = defineEmits(['toggle'])
 
 const props = defineProps({
   todos: {
@@ -21,10 +24,23 @@ const props = defineProps({
   }
 })
 
-const toggleHandler = (index) => {
-  emits('toggle', index);
+const toggleHandler = index => {
+  emits('toggle', index)
 }
 </script>
 
 <style scoped>
+/* 1. 声明过渡效果 */
+/* .fade-move, */
+/* .fade-enter-active, */
+.fade-leave-active {
+  transition: all 1s ease;
+}
+
+/* 2. 声明进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateX(300px);
+}
 </style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index a2f3de7..96c3b09 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -10,21 +10,24 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import TodoList from '@/components/TodoList.vue';
+import { ref } from 'vue'
+import TodoList from '@/components/TodoList.vue'
 
-const newTodo = ref('');
-const todos = ref([]);
+const newTodo = ref('')
+const todos = ref([])
 
 const addTodo = () => {
-  if (newTodo.value && !todos.value.some(todo => todo.text === newTodo.value)) {
-    todos.value.push({ text: newTodo.value, completed: false });
-    newTodo.value = '';
+  if (
+    newTodo.value &&
+    !todos.value.some(todo => todo.text.trim() === newTodo.value.trim())
+  ) {
+    todos.value.push({ text: newTodo.value, completed: false })
+    newTodo.value = ''
   }
 }
 
-const toggleTodo = (index) => {
-  todos.value.splice(index, 1);
+const toggleTodo = index => {
+  todos.value.splice(index, 1)
 }
 </script>
 
-- 
Gitee


From 2b9b958a1f58c367dbbf4075d9e7474a3c9157f4 Mon Sep 17 00:00:00 2001
From: liangjiajie <953682519@qq.com>
Date: Wed, 28 Aug 2024 16:20:56 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=A2=81=E5=AE=B6=E6=9D=B0=2013128888525?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 96c3b09..2a765c7 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -19,6 +19,7 @@ const todos = ref([])
 const addTodo = () => {
   if (
     newTodo.value &&
+    newTodo.value.trim() &&
     !todos.value.some(todo => todo.text.trim() === newTodo.value.trim())
   ) {
     todos.value.push({ text: newTodo.value, completed: false })
-- 
Gitee