dichgrem/Vue
1
0
Fork 0
mirror of https://github.com/Dichgrem/Vue.git synced 2025-12-16 21:51:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: dichgrem:c9b8ac0a669339c50aae591092a6628daf55c94a
Branches Tags
dichgrem:main
...
compare: dichgrem:main
Branches Tags
dichgrem:main

9 Commits
c9b8ac0a66 ... main

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
35 changed files with 4743 additions and 117 deletions
Expand all files Collapse all files

32
README.md
View File

@@ -1,2 +1,32 @@
# Vue # 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 # 全局样式
```

24
guess-game/.gitignore vendored Normal file
View File

@@ -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?

3
guess-game/.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

5
guess-game/README.md Normal file
View File

@@ -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).

13
guess-game/index.html Normal file
View File

@@ -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>

2532
guess-game/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
guess-game/package.json Normal file
View File

@@ -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"
}
}

1
guess-game/public/vite.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

131
guess-game/src/App.vue Normal file
View File

@@ -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>

1
guess-game/src/assets/vue.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

160
guess-game/src/components/GuessComposition.vue Normal file
View File

@@ -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>

181
guess-game/src/components/GuessOptions.vue Normal file
View File

@@ -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>

5
guess-game/src/main.js Normal file
View File

@@ -0,0 +1,5 @@
import { createApp } from "vue";
import "/src/style.css";
import App from "/src/App.vue";
createApp(App).mount("#app");

11
guess-game/src/style.css Normal file
View File

@@ -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;
}

8
guess-game/vite.config.js Normal file
View File

@@ -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()],
});

6
package-lock.json generated Normal file
View File

@@ -0,0 +1,6 @@
{
"name": "Vue",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}

0
test1.html → test/test1.html
View File

0
vue1.html → test/vue1.html
View File

0
vue2.html → test/vue2.html
View File

0
vue3.html → test/vue3.html
View File

0
vue4.html → test/vue4.html
View File

0
vue5.html → test/vue5.html
View File

0
vue6.html → test/vue6.html
View File

0
vue7.html → test/vue7.html
View File

1345
todos/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
todos/package.json
View File

@@ -9,10 +9,13 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"pinia": "^3.0.4",
"sortablejs": "^1.15.6",
"vue": "^3.5.24" "vue": "^3.5.24"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^6.0.1", "@vitejs/plugin-vue": "^6.0.1",
"vite": "^7.2.2" "vite": "^7.2.2",
"vite-plugin-vue-devtools": "^8.0.5"
} }
} }

107
todos/src/App.vue
View File

@@ -1,81 +1,66 @@
<script> <script setup>
import TodoHeader from "./components/TodoHeader.vue"; import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue"; import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue"; import TodoFooter from "./components/TodoFooter.vue";
export default { import { useTodoStore } from "./stores/todo";
components: { import { computed } from "vue";
TodoHeader,
TodoList,
TodoFooter,
},
data() { const todoStore = useTodoStore();
return {
// 从 localStorage 初始化
todos: JSON.parse(localStorage.getItem("vue-todos") || "[]"),
tabType: 0, // 0全部 1未完成 2已完成
};
},
computed: { function addTodo(newTodo) {
// 筛选后的列表 console.log("App.vue addTodo:", newTodo);
todoList() { todoStore.addTodo(newTodo);
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 delTodo(item) {
console.log("App.vue delTodo:", item);
todoStore.delTodo(item);
}
methods: { function moveTodo({ oldIndex, newIndex }) {
addTodo(newTodo) { console.log("App.vue moveTodo:", oldIndex, newIndex);
const todo = { todoStore.moveTodo(oldIndex, newIndex);
id: Date.now(), }
txt: newTodo,
completed: false,
};
this.todos.push(todo);
console.log("添加 Todo:", todo);
},
delTodo(item) { function editTodo({ item, text }) {
console.log("删除 Todo:", item); console.log("App.vue editTodo:", item, text);
this.todos = this.todos.filter((t) => t.id !== item.id); todoStore.editTodo({ item, text });
}, }
toggleTodo(item) { function toggleTodo(item) {
console.log("完成状态切换:", item); todoStore.toggle(item);
}, }
changeTabType(type) { function changeTabType(type) {
console.log("切换 Tab:", type); console.log("App.vue tab change:", type);
this.tabType = type; todoStore.setTab(type);
}, }
},
watch: {
todos: {
handler(todos) {
console.log("Todos 改变:", todos);
localStorage.setItem("vue-todos", JSON.stringify(todos));
},
deep: true,
},
},
};
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;
});
</script> </script>
<template> <template>
<TodoHeader @addTodo="addTodo" /> <TodoHeader @addTodo="addTodo" />
<TodoList :todos="todoList" @delTodo="delTodo" />
<TodoList
:todos="showTodos"
@delTodo="delTodo"
@move="moveTodo"
@edit="editTodo"
:toggleTodo="toggleTodo"
/>
<TodoFooter <TodoFooter
:count="todoList.length" :count="showTodos.length"
:tabType="tabType" :tabType="todoStore.tabType"
@changeTabType="changeTabType" @changeTabType="changeTabType"
@clearCompleted="todoStore.clearCompleted"
/> />
</template> </template>

15
todos/src/components/TodoFooter.vue
View File

@@ -7,6 +7,7 @@
<a :class="{ active: tabType == 1 }" @click="tabClick(1)">未完成</a> <a :class="{ active: tabType == 1 }" @click="tabClick(1)">未完成</a>
<a :class="{ active: tabType == 2 }" @click="tabClick(2)">已完成</a> <a :class="{ active: tabType == 2 }" @click="tabClick(2)">已完成</a>
</div> </div>
<button class="clearBtn" @click="$emit('clearCompleted')">清除已完成</button>
</div> </div>
</template> </template>
@@ -49,8 +50,20 @@ export default {
color: #409eff; color: #409eff;
} }
.clearBtn {
background-color: #ff4d4f;
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}
.clearBtn:hover {
opacity: 0.8;
}
.active { .active {
color: #409eff !important; color: #ff4d4f !important;
font-weight: bold; font-weight: bold;
} }
</style> </style>

60
todos/src/components/TodoHeader.vue
View File

@@ -16,6 +16,36 @@
</div> </div>
</template> </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> <style scoped>
h1 { h1 {
color: #409eff; color: #409eff;
@@ -57,33 +87,3 @@ p {
text-align: center; text-align: center;
} }
</style> </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>

101
todos/src/components/TodoList.vue
View File

@@ -1,13 +1,43 @@
<template> <template>
<div class="tdContainer"> <div class="tdContainer">
<ul class="tdList"> <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"> <div class="tdItem-main">
<input type="checkbox" v-model="item.completed" class="toToggle" /> <input
type="checkbox"
<span class="tdTxt" :class="{ completed: item.completed }"> :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 }} {{ item.txt }}
</span> </span>
<input
v-else
class="editInput"
v-model="editText"
@keyup.enter="confirmEdit(item)"
@blur="confirmEdit(item)"
@keyup.esc="cancelEdit"
autofocus
/>
</div> </div>
<div class="tdItem-acts"> <div class="tdItem-acts">
@@ -18,6 +48,49 @@
</div> </div>
</template> </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> <style scoped>
.tdContainer { .tdContainer {
margin-top: 20px; margin-top: 20px;
@@ -91,17 +164,11 @@
text-decoration: line-through; text-decoration: line-through;
color: gray; color: gray;
} }
.editInput {
font-size: 16px;
padding: 4px;
width: 100%;
box-sizing: border-box;
}
</style> </style>
<script>
export default {
props: ["todos"],
methods: {
delTodo(item) {
this.$emit("delTodo", item);
},
},
};
</script>

3
todos/src/main.js
View File

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

84
todos/src/stores/todo.js Normal file
View File

@@ -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));
},
},
});

BIN
todos/view.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

6
todos/vite.config.js
View File

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