project:guess

feat:vue-devtools
fix:toggleTodo
2025-12-16 21:51:59 -05:00 · 2025-12-12 11:04:25 +08:00 · 2025-12-08 23:09:46 +08:00 · 2025-12-01 13:28:47 +08:00 · 2025-12-01 12:55:42 +08:00 · 2025-12-01 11:36:12 +08:00
35 changed files with 4743 additions and 117 deletions
--- a/README.md
+++ b/README.md
@@ -1,2 +1,32 @@
 # Vue
-This is a Vue test on school.
+
+<p align="center">
+  <img src="https://github.com/Dichgrem/Vue/blob/main/todos/view.png" width="300">
+</p>
+
+## 概述
+
+这是一个基于 **Vue 3 + Pinia** 的轻量级待办事项 (Todo) 项目，具有以下功能：
+
+* 添加/删除/编辑待办事项
+* 按照全部 / 未完成 / 已完成进行筛选
+* 拖拽排序待办事项
+* 一键清除已完成事项
+* 本地存储 (`localStorage`) 数据持久化
+* 控制台打印操作日志，便于调试
+
+
+## 结构
+
+```
+.
+├── App.vue              # 根组件，管理整体状态和方法
+├── main.js              # 项目入口
+├── stores/todo.js       # Pinia 状态管理，存储 todos 数据和操作方法
+├── components
+│   ├── TodoHeader.vue   # 输入框和添加功能
+│   ├── TodoList.vue     # 待办事项列表，支持编辑和拖拽排序
+│   └── TodoFooter.vue   # 底部统计、筛选和清除已完成
+├── assets               # 静态资源（CSS/图片）
+└── style.css            # 全局样式
+```
--- a/guess-game/.gitignore
+++ b/guess-game/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/guess-game/.vscode/extensions.json
+++ b/guess-game/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/guess-game/README.md
+++ b/guess-game/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
--- a/guess-game/index.html
+++ b/guess-game/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>guess-game</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/guess-game/package-lock.json
+++ b/guess-game/package-lock.json
--- a/guess-game/package.json
+++ b/guess-game/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "guess-game",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.2.4",
+    "vite-plugin-vue-devtools": "^8.0.5"
+  }
+}
--- a/guess-game/public/vite.svg
+++ b/guess-game/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/guess-game/src/App.vue
+++ b/guess-game/src/App.vue
@@ -0,0 +1,131 @@
+<template>
+  <div id="app">
+    <div class="header">
+      <h1>Vue3 猜数游戏</h1>
+      <div class="toggle-buttons">
+        <button
+          :class="{ active: currentView === 'composition' }"
+          @click="currentView = 'composition'"
+        >
+          组合式 API
+        </button>
+        <button
+          :class="{ active: currentView === 'options' }"
+          @click="currentView = 'options'"
+        >
+          选项式 API
+        </button>
+        <button
+          :class="{ active: currentView === 'both' }"
+          @click="currentView = 'both'"
+        >
+          对比查看
+        </button>
+      </div>
+    </div>
+
+    <div class="content">
+      <!-- 单独显示组合式 -->
+      <GuessComposition v-if="currentView === 'composition'" />
+
+      <!-- 单独显示选项式 -->
+      <GuessOptions v-if="currentView === 'options'" />
+
+      <!-- 并排对比显示 -->
+      <div v-if="currentView === 'both'" class="comparison">
+        <GuessComposition />
+        <GuessOptions />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import GuessComposition from "./components/GuessComposition.vue";
+import GuessOptions from "./components/GuessOptions.vue";
+
+const currentView = ref("both"); // 默认显示对比视图
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#app {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.header {
+  text-align: center;
+  color: white;
+  margin-bottom: 30px;
+}
+
+.header h1 {
+  font-size: 2.5em;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.toggle-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.toggle-buttons button {
+  padding: 10px 20px;
+  border: 2px solid white;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+  border-radius: 25px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  transition: all 0.3s;
+}
+
+.toggle-buttons button:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.toggle-buttons button.active {
+  background-color: white;
+  color: #667eea;
+}
+
+.content {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.comparison {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+  gap: 20px;
+  justify-items: center;
+}
+
+@media (max-width: 768px) {
+  .comparison {
+    grid-template-columns: 1fr;
+  }
+
+  .header h1 {
+    font-size: 1.8em;
+  }
+
+  .toggle-buttons button {
+    font-size: 14px;
+    padding: 8px 15px;
+  }
+}
+</style>
--- a/guess-game/src/assets/vue.svg
+++ b/guess-game/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/guess-game/src/components/GuessComposition.vue
+++ b/guess-game/src/components/GuessComposition.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="guess-container">
+    <h2>猜数游戏</h2>
+    <strong>请输入一个 0-100 之间的随机整数:</strong>
+    <br /><br />
+
+    <form @submit.prevent>
+      <input
+        v-model="guessInput"
+        type="text"
+        placeholder="输入你的猜测"
+        :disabled="!isGameActive"
+      />
+      <button type="button" @click="handleGuess" :disabled="!isGameActive">
+        提交
+      </button>
+      <button type="button" @click="restartGame">开始</button>
+      <br />
+
+      <label>
+        结果:
+        <input v-model="feedback" type="text" readonly />
+      </label>
+
+      <label>
+        当前还可以猜测的次数:
+        <input v-model="remainingCount" type="text" readonly />
+      </label>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// 响应式变量定义
+const guessInput = ref(""); // 用户输入的猜测值
+const feedback = ref(""); // 反馈信息
+const remainingCount = ref(10); // 剩余猜测次数
+const targetNumber = ref(0); // 目标随机数
+const isGameActive = ref(false); // 游戏是否进行中
+
+// 重启游戏方法
+const restartGame = () => {
+  isGameActive.value = true;
+  guessInput.value = "";
+  feedback.value = "";
+  remainingCount.value = 10;
+  targetNumber.value = Math.floor(Math.random() * 101); // 生成 0-100 的随机数
+  console.log("目标数字:", targetNumber.value); // 调试用
+};
+
+// 处理猜测逻辑
+const handleGuess = () => {
+  if (!isGameActive.value) {
+    return;
+  }
+
+  const guess = parseInt(guessInput.value);
+
+  // 验证输入是否有效
+  if (isNaN(guess) || guess < 0 || guess > 100) {
+    feedback.value = "请输入一个 0-100 之间的有效数字!";
+    return;
+  }
+
+  // 判断猜测结果
+  if (guess > targetNumber.value) {
+    feedback.value = "猜的有点大!";
+  } else if (guess < targetNumber.value) {
+    feedback.value = "猜的有点小!";
+  } else {
+    feedback.value = `猜对啦！答案是 ${guess}`;
+    isGameActive.value = false; // 猜对后结束游戏
+    return;
+  }
+
+  // 更新剩余次数
+  remainingCount.value -= 1;
+
+  // 检查游戏是否结束
+  if (remainingCount.value === 0) {
+    feedback.value = `游戏结束！次数已用完，正确答案是 ${targetNumber.value}`;
+    isGameActive.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.guess-container {
+  text-align: center;
+  font-family: Arial, sans-serif;
+  background-color: #f0f8ff;
+  padding: 40px;
+  border-radius: 10px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+form {
+  display: inline-block;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+input[type="text"] {
+  padding: 8px;
+  margin-bottom: 10px;
+  width: 150px;
+  text-align: center;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+
+input[type="text"]:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+button {
+  padding: 8px 15px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #007bff;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+button:disabled {
+  background-color: #ccc;
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+
+label {
+  display: block;
+  margin: 15px 0;
+  font-size: 14px;
+  color: #555;
+}
+
+label input {
+  margin-left: 10px;
+}
+</style>
--- a/guess-game/src/components/GuessOptions.vue
+++ b/guess-game/src/components/GuessOptions.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="guess-container">
+    <h2>猜数游戏</h2>
+    <strong>请输入一个 0-100 之间的随机整数:</strong>
+    <br /><br />
+
+    <form @submit.prevent>
+      <input
+        v-model="guessInput"
+        type="text"
+        placeholder="输入你的猜测"
+        :disabled="!isGameActive"
+        @keyup.enter="handleGuess"
+      />
+      <button type="button" @click="handleGuess" :disabled="!isGameActive">
+        提交
+      </button>
+      <button type="button" @click="restartGame">开始</button>
+      <br />
+
+      <label>
+        结果:
+        <input v-model="feedback" type="text" readonly />
+      </label>
+
+      <label>
+        当前还可以猜测的次数:
+        <input v-model="remainingCount" type="text" readonly />
+      </label>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GuessOptions",
+
+  // 数据选项
+  data() {
+    return {
+      guessInput: "",
+      feedback: "",
+      remainingCount: 10,
+      targetNumber: 0,
+      isGameActive: false,
+    };
+  },
+
+  // 方法选项
+  methods: {
+    // 重启游戏
+    restartGame() {
+      this.isGameActive = true;
+      this.guessInput = "";
+      this.feedback = "";
+      this.remainingCount = 10;
+      this.targetNumber = Math.floor(Math.random() * 101);
+      console.log("选项式 - 目标数字:", this.targetNumber);
+    },
+
+    // 处理猜测
+    handleGuess() {
+      if (!this.isGameActive) {
+        return;
+      }
+
+      const guess = parseInt(this.guessInput);
+
+      // 验证输入
+      if (isNaN(guess) || guess < 0 || guess > 100) {
+        this.feedback = "请输入一个 0-100 之间的有效数字!";
+        return;
+      }
+
+      // 判断结果
+      if (guess > this.targetNumber) {
+        this.feedback = "猜的有点大!";
+      } else if (guess < this.targetNumber) {
+        this.feedback = "猜的有点小!";
+      } else {
+        this.feedback = `猜对啦！答案是 ${guess}`;
+        this.isGameActive = false;
+        return;
+      }
+
+      // 更新次数
+      this.remainingCount -= 1;
+
+      // 检查游戏结束
+      if (this.remainingCount === 0) {
+        this.feedback = `游戏结束！次数已用完，正确答案是 ${this.targetNumber}`;
+        this.isGameActive = false;
+      }
+    },
+  },
+
+  // 计算属性
+  computed: {
+    canGuess() {
+      return this.isGameActive && this.remainingCount > 0;
+    },
+  },
+
+  mounted() {
+    console.log("选项式组件已挂载");
+  },
+};
+</script>
+
+<style scoped>
+.guess-container {
+  text-align: center;
+  font-family: Arial, sans-serif;
+  background-color: #f0f8ff;
+  padding: 40px;
+  border-radius: 10px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+form {
+  display: inline-block;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+input[type="text"] {
+  padding: 8px;
+  margin-bottom: 10px;
+  width: 150px;
+  text-align: center;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+
+input[type="text"]:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+button {
+  padding: 8px 15px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #007bff;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+button:disabled {
+  background-color: #ccc;
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+
+label {
+  display: block;
+  margin: 15px 0;
+  font-size: 14px;
+  color: #555;
+}
+
+label input {
+  margin-left: 10px;
+}
+</style>
--- a/guess-game/src/main.js
+++ b/guess-game/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import "/src/style.css";
+import App from "/src/App.vue";
+
+createApp(App).mount("#app");
--- a/guess-game/src/style.css
+++ b/guess-game/src/style.css
@@ -0,0 +1,11 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
--- a/guess-game/vite.config.js
+++ b/guess-game/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import VueDevTools from "vite-plugin-vue-devtools";
+// https://vite.dev/config/
+export default defineConfig({
+  base: "./",
+  plugins: [vue(), VueDevTools()],
+});
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Vue",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
--- a/test/test1.html
+++ b/test/test1.html
--- a/test/vue1.html
+++ b/test/vue1.html
--- a/test/vue2.html
+++ b/test/vue2.html
--- a/test/vue3.html
+++ b/test/vue3.html
--- a/test/vue4.html
+++ b/test/vue4.html
--- a/test/vue5.html
+++ b/test/vue5.html
--- a/test/vue6.html
+++ b/test/vue6.html
--- a/test/vue7.html
+++ b/test/vue7.html
--- a/todos/package-lock.json
+++ b/todos/package-lock.json
--- a/todos/package.json
+++ b/todos/package.json
@@ -9,10 +9,13 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "pinia": "^3.0.4",
+    "sortablejs": "^1.15.6",
    "vue": "^3.5.24"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "^7.2.2"
+    "vite": "^7.2.2",
+    "vite-plugin-vue-devtools": "^8.0.5"
  }
 }
--- a/todos/src/App.vue
+++ b/todos/src/App.vue
@@ -1,81 +1,66 @@
-<script>
+<script setup>
 import TodoHeader from "./components/TodoHeader.vue";
 import TodoList from "./components/TodoList.vue";
 import TodoFooter from "./components/TodoFooter.vue";

-export default {
-  components: {
-    TodoHeader,
-    TodoList,
-    TodoFooter,
-  },
+import { useTodoStore } from "./stores/todo";
+import { computed } from "vue";

-  data() {
-    return {
-      // 从 localStorage 初始化
-      todos: JSON.parse(localStorage.getItem("vue-todos") || "[]"),
-      tabType: 0, // 0全部 1未完成 2已完成
-    };
-  },
+const todoStore = useTodoStore();

-  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;
+function addTodo(newTodo) {
+  console.log("App.vue addTodo:", newTodo);
+  todoStore.addTodo(newTodo);
+}
+
+function delTodo(item) {
+  console.log("App.vue delTodo:", item);
+  todoStore.delTodo(item);
+}
+
+function moveTodo({ oldIndex, newIndex }) {
+  console.log("App.vue moveTodo:", oldIndex, newIndex);
+  todoStore.moveTodo(oldIndex, newIndex);
+}
+
+function editTodo({ item, text }) {
+  console.log("App.vue editTodo:", item, text);
+  todoStore.editTodo({ item, text });
+}
+
+function toggleTodo(item) {
+  todoStore.toggle(item);
+}
+
+function changeTabType(type) {
+  console.log("App.vue tab change:", type);
+  todoStore.setTab(type);
+}
+
+const showTodos = computed(() => {
+  if (todoStore.tabType === 1)
+    return todoStore.todos.filter((t) => !t.completed);
+  if (todoStore.tabType === 2)
+    return todoStore.todos.filter((t) => t.completed);
+  return todoStore.todos;
 });
-    },
-  },
-
-
-  methods: {
-    addTodo(newTodo) {
-      const todo = {
-        id: Date.now(),
-        txt: newTodo,
-        completed: false,
-      };
-      this.todos.push(todo);
-      console.log("添加 Todo:", todo);
-    },
-
-    delTodo(item) {
-      console.log("删除 Todo:", item);
-      this.todos = this.todos.filter((t) => t.id !== item.id);
-    },
-
-    toggleTodo(item) {
-      console.log("完成状态切换:", item);
-    },
-
-    changeTabType(type) {
-      console.log("切换 Tab:", type);
-      this.tabType = type;
-    },
-  },
-
-  watch: {
-    todos: {
-      handler(todos) {
-        console.log("Todos 改变:", todos);
-        localStorage.setItem("vue-todos", JSON.stringify(todos));
-      },
-      deep: true,
-    },
-  },
-};
-
 </script>

 <template>
  <TodoHeader @addTodo="addTodo" />
-  <TodoList :todos="todoList" @delTodo="delTodo" />
+
+  <TodoList
+    :todos="showTodos"
+    @delTodo="delTodo"
+    @move="moveTodo"
+    @edit="editTodo"
+    :toggleTodo="toggleTodo"
+  />
+
  <TodoFooter
-    :count="todoList.length"
-    :tabType="tabType"
+    :count="showTodos.length"
+    :tabType="todoStore.tabType"
    @changeTabType="changeTabType"
+    @clearCompleted="todoStore.clearCompleted"
  />
 </template>
--- 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,8 +50,20 @@ 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: #409eff !important;
+  color: #ff4d4f !important;
  font-weight: bold;
 }
 </style>
--- a/todos/src/components/TodoHeader.vue
+++ b/todos/src/components/TodoHeader.vue
@@ -16,6 +16,36 @@
  </div>
 </template>

+<script>
+const WORD_COUNT_LIMIT = 50;
+
+export default {
+  data() {
+    return {
+      newTodo: "",
+      countLimit: WORD_COUNT_LIMIT,
+    };
+  },
+
+  computed: {
+    isShowMsg() {
+      return this.newTodo.length > WORD_COUNT_LIMIT;
+    },
+  },
+
+  methods: {
+    addNewTodo() {
+      if (this.newTodo.length === 0 || this.newTodo.length > WORD_COUNT_LIMIT) {
+        return;
+      }
+
+      this.$emit("addTodo", this.newTodo);
+      this.newTodo = "";
+    },
+  },
+};
+</script>
+
 <style scoped>
 h1 {
  color: #409eff;
@@ -57,33 +87,3 @@ p {
  text-align: center;
 }
 </style>
-
-<script>
-const WORD_COUNT_LIMIT = 50;
-
-export default {
-  data() {
-    return {
-      newTodo: "",
-      countLimit: WORD_COUNT_LIMIT,
-    };
-  },
-
-  computed: {
-    isShowMsg() {
-      return this.newTodo.length > WORD_COUNT_LIMIT;
-    },
-  },
-
-  methods: {
-    addNewTodo() {
-      if (this.newTodo.length === 0 || this.newTodo.length > WORD_COUNT_LIMIT) {
-        return;
-      }
-
-      this.$emit("addTodo", this.newTodo);
-      this.newTodo = "";
-    },
-  },
-};
-</script>
--- a/todos/src/components/TodoList.vue
+++ b/todos/src/components/TodoList.vue
@@ -1,13 +1,43 @@
 <template>
  <div class="tdContainer">
    <ul class="tdList">
-      <li class="tdItem" v-for="item in todos" :key="item.id">
+      <li
+        class="tdItem"
+        v-for="(item, index) in todos"
+        :key="item.id"
+        draggable="true"
+        @dragstart="onDragStart(index)"
+        @dragover.prevent="onDragOver(index)"
+        @drop="onDrop(index)"
+      >
        <div class="tdItem-main">
-          <input type="checkbox" v-model="item.completed" class="toToggle" />
-
-          <span class="tdTxt" :class="{ completed: item.completed }">
+          <input 
+            type="checkbox" 
+            :checked="item.completed" 
+            @change="toggleTodo(item)" 
+            class="toToggle" 
+          />
+          <!-- <span class="tdTxt" :class="{ completed: item.completed }"> -->
+          <!--   {{ item.txt }} -->
+          <!-- </span> -->
+          <span
+            v-if="editingId !== item.id"
+            class="tdTxt"
+            :class="{ completed: item.completed }"
+            @dblclick="startEdit(item)"
+          >
            {{ item.txt }}
          </span>
+
+          <input
+            v-else
+            class="editInput"
+            v-model="editText"
+            @keyup.enter="confirmEdit(item)"
+            @blur="confirmEdit(item)"
+            @keyup.esc="cancelEdit"
+            autofocus
+          />
        </div>

        <div class="tdItem-acts">
@@ -18,6 +48,49 @@
  </div>
 </template>

+<script>
+export default {
+  props: ["todos", "toggleTodo", "delTodo", "editTodo", "moveTodo"],
+  data() {
+    return {
+      editingId: null,
+      editText: "",
+      dragIndex: null,
+    };
+  },
+  methods: {
+    delTodo(item) {
+      this.$emit("delTodo", item);
+    },
+    onDragStart(index) {
+      this.dragIndex = index;
+    },
+    onDragOver(index) {},
+    onDrop(index) {
+      if (this.dragIndex === null || this.dragIndex === index) return;
+      this.$emit("move", { oldIndex: this.dragIndex, newIndex: index });
+      this.dragIndex = null;
+    },
+    startEdit(item) {
+      this.editingId = item.id;
+      this.editText = item.txt;
+    },
+
+    confirmEdit(item) {
+      const text = this.editText.trim();
+      if (text) {
+        this.$emit("edit", { item, text });
+      }
+      this.editingId = null;
+    },
+
+    cancelEdit() {
+      this.editingId = null;
+    },
+  },
+};
+</script>
+
 <style scoped>
 .tdContainer {
  margin-top: 20px;
@@ -91,17 +164,11 @@
  text-decoration: line-through;
  color: gray;
 }
+
+.editInput {
+  font-size: 16px;
+  padding: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
 </style>
-
-<script>
-export default {
-  props: ["todos"],
-
-  methods: {
-    delTodo(item) {
-      this.$emit("delTodo", item);
-    },
-  },
-};
-</script>
-
--- a/todos/src/main.js
+++ b/todos/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import App from "./App.vue";
 import "./assets/global.css";

-createApp(App).mount("#app");
+createApp(App).use(createPinia()).mount("#app");
--- a/todos/src/stores/todo.js
+++ b/todos/src/stores/todo.js
@@ -0,0 +1,84 @@
+import { defineStore } from "pinia";
+import { toRaw } from "vue";
+
+const STORAGE_KEY = "vue-todos";
+
+export const useTodoStore = defineStore("todoStore", {
+  state: () => ({
+    todos: JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]"),
+    tabType: 0, // 0全部 1未完成 2已完成
+  }),
+
+  getters: {
+    leftCount(state) {
+      return state.todos.filter((t) => !t.completed).length;
+    },
+  },
+
+  actions: {
+    save() {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(toRaw(this.todos)));
+    },
+
+    setTab(type) {
+      this.tabType = type;
+    },
+
+    addTodo(txt) {
+      const newTodo = {
+        id: Date.now(),
+        txt,
+        completed: false,
+      };
+      this.todos.push(newTodo);
+      this.save();
+      console.log("Added:", newTodo);
+      console.log("Current todos:", toRaw(this.todos));
+    },
+
+    delTodo(item) {
+      this.todos = this.todos.filter((t) => t.id !== item.id);
+      this.save();
+      console.log("Deleted:", item);
+      console.log("Current todos:", toRaw(this.todos));
+    },
+
+    editTodo({ item, text }) {
+      const t = this.todos.find((t) => t.id === item.id);
+      if (t) {
+        t.txt = text;
+        this.save();
+        console.log("Edited:", item.id, "=>", text);
+        console.log("Current todos:", toRaw(this.todos));
+      }
+    },
+
+    moveTodo(oldIndex, newIndex) {
+      if (oldIndex === newIndex) return;
+
+      const arr = this.todos;
+      const moved = arr.splice(oldIndex, 1)[0];
+      arr.splice(newIndex, 0, moved);
+
+      this.save();
+      console.log(`Move: ${oldIndex} → ${newIndex}`);
+      console.log("Current todos:", toRaw(this.todos));
+    },
+
+    toggle(item) {
+      const t = this.todos.find(t => t.id === item.id);
+      if (t) {
+        t.completed = !t.completed;
+        this.save();
+        console.log("Toggled:", t);
+      }
+    },
+
+    clearCompleted() {
+      this.todos = this.todos.filter((t) => !t.completed);
+      this.save();
+      console.log("Clear completed");
+      console.log("Current todos:", toRaw(this.todos));
+    },
+  },
+});
--- a/todos/view.png
+++ b/todos/view.png
--- a/todos/vite.config.js
+++ b/todos/vite.config.js
@@ -1,8 +1,8 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-
+import VueDevTools from "vite-plugin-vue-devtools";
 // https://vite.dev/config/
 export default defineConfig({
-  base: './',
-  plugins: [vue()],
+  base: "./",
+  plugins: [vue(), VueDevTools()],
 });
Author	SHA1	Message	Date
dichgrem	9b5060afd1	project:guess	2025-12-12 11:04:25 +08:00
dichgrem	485fe0b634	feat:vue-devtools	2025-12-08 23:09:46 +08:00
dichgrem	db48b95509	fix:toggleTodo	2025-12-01 13:28:47 +08:00
dichgrem	62e283907a	update:readme	2025-12-01 12:55:42 +08:00
dichgrem	29503b5f89	feat:clean_all_done	2025-12-01 11:36:12 +08:00
dichgrem	f734593ff6	refactor:use_pinia	2025-12-01 11:16:39 +08:00
dichgrem	d6278e4451	feat:edit_todos	2025-12-01 10:26:18 +08:00
dichgrem	2f4166e97b	style:test	2025-12-01 10:11:46 +08:00
dichgrem	4d887e2aab	feat:Drag&&drop_sorting	2025-11-28 11:07:19 +08:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`