658 lines
14 KiB
Vue
658 lines
14 KiB
Vue
<template>
|
||
<BuiltInApp app-id="todo" title="待办事项">
|
||
<div class="todo-app">
|
||
<div class="header">
|
||
<h1>📝 待办事项</h1>
|
||
<div class="stats">
|
||
总计: <span class="count">{{ todos.length }}</span> |
|
||
已完成: <span class="count">{{ completedCount }}</span> |
|
||
待办: <span class="count">{{ pendingCount }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="add-todo">
|
||
<div class="input-group">
|
||
<input
|
||
v-model="newTodoText"
|
||
type="text"
|
||
class="todo-input"
|
||
placeholder="添加新的待办事项..."
|
||
maxlength="200"
|
||
@keypress.enter="addTodo"
|
||
>
|
||
<button @click="addTodo" class="add-btn" :disabled="!newTodoText.trim()">
|
||
添加
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<button
|
||
v-for="filter in filters"
|
||
:key="filter.key"
|
||
class="filter-btn"
|
||
:class="{ active: currentFilter === filter.key }"
|
||
@click="setFilter(filter.key)"
|
||
>
|
||
{{ filter.label }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="todo-list" v-if="filteredTodos.length > 0">
|
||
<TransitionGroup name="todo-list" tag="div">
|
||
<div
|
||
v-for="todo in filteredTodos"
|
||
:key="todo.id"
|
||
class="todo-item"
|
||
:class="{ 'completed': todo.completed }"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
class="todo-checkbox"
|
||
:checked="todo.completed"
|
||
@change="toggleTodo(todo.id)"
|
||
>
|
||
|
||
<div class="todo-content" v-if="!todo.editing">
|
||
<span class="todo-text" :class="{ 'completed': todo.completed }">
|
||
{{ todo.text }}
|
||
</span>
|
||
<span class="todo-date">{{ formatDate(todo.createdAt) }}</span>
|
||
</div>
|
||
|
||
<div class="todo-edit" v-else>
|
||
<input
|
||
v-model="todo.editText"
|
||
type="text"
|
||
class="edit-input"
|
||
@keypress.enter="saveEdit(todo)"
|
||
@keyup.esc="cancelEdit(todo)"
|
||
@blur="saveEdit(todo)"
|
||
ref="editInputs"
|
||
>
|
||
</div>
|
||
|
||
<div class="todo-actions">
|
||
<button
|
||
v-if="!todo.editing"
|
||
@click="startEdit(todo)"
|
||
class="edit-btn"
|
||
title="编辑"
|
||
>
|
||
✏️
|
||
</button>
|
||
<button
|
||
@click="deleteTodo(todo.id)"
|
||
class="delete-btn"
|
||
title="删除"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</TransitionGroup>
|
||
</div>
|
||
|
||
<div v-else class="empty-state">
|
||
<div class="empty-icon">📋</div>
|
||
<h3>{{ getEmptyMessage() }}</h3>
|
||
<p>{{ getEmptyDescription() }}</p>
|
||
</div>
|
||
|
||
<!-- 批量操作 -->
|
||
<div class="bulk-actions" v-if="todos.length > 0">
|
||
<button @click="markAllCompleted" class="bulk-btn">
|
||
全部完成
|
||
</button>
|
||
<button @click="clearCompleted" class="bulk-btn" v-if="completedCount > 0">
|
||
清除已完成 ({{ completedCount }})
|
||
</button>
|
||
<button @click="clearAll" class="bulk-btn bulk-danger">
|
||
清空全部
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</BuiltInApp>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||
import BuiltInApp from '../components/BuiltInApp.vue'
|
||
|
||
interface Todo {
|
||
id: string
|
||
text: string
|
||
completed: boolean
|
||
createdAt: Date
|
||
completedAt?: Date
|
||
editing?: boolean
|
||
editText?: string
|
||
}
|
||
|
||
type FilterType = 'all' | 'pending' | 'completed'
|
||
|
||
const newTodoText = ref('')
|
||
const todos = ref<Todo[]>([])
|
||
const currentFilter = ref<FilterType>('all')
|
||
const editInputs = ref<HTMLInputElement[]>([])
|
||
|
||
const filters = [
|
||
{ key: 'all' as FilterType, label: '全部' },
|
||
{ key: 'pending' as FilterType, label: '待办' },
|
||
{ key: 'completed' as FilterType, label: '已完成' }
|
||
]
|
||
|
||
// 计算属性
|
||
const completedCount = computed(() =>
|
||
todos.value.filter(todo => todo.completed).length
|
||
)
|
||
|
||
const pendingCount = computed(() =>
|
||
todos.value.filter(todo => !todo.completed).length
|
||
)
|
||
|
||
const filteredTodos = computed(() => {
|
||
switch (currentFilter.value) {
|
||
case 'completed':
|
||
return todos.value.filter(todo => todo.completed)
|
||
case 'pending':
|
||
return todos.value.filter(todo => !todo.completed)
|
||
default:
|
||
return todos.value
|
||
}
|
||
})
|
||
|
||
// 方法
|
||
const addTodo = async () => {
|
||
const text = newTodoText.value.trim()
|
||
if (!text) return
|
||
|
||
const todo: Todo = {
|
||
id: Date.now().toString(),
|
||
text,
|
||
completed: false,
|
||
createdAt: new Date()
|
||
}
|
||
|
||
todos.value.unshift(todo)
|
||
newTodoText.value = ''
|
||
|
||
await saveTodos()
|
||
showNotification('✅ 待办事项已添加', `"${text}" 已添加到您的待办列表`)
|
||
}
|
||
|
||
const toggleTodo = async (id: string) => {
|
||
const todo = todos.value.find(t => t.id === id)
|
||
if (todo) {
|
||
todo.completed = !todo.completed
|
||
todo.completedAt = todo.completed ? new Date() : undefined
|
||
|
||
await saveTodos()
|
||
|
||
if (todo.completed) {
|
||
showNotification('🎉 任务完成', `"${todo.text}" 已完成！`)
|
||
}
|
||
}
|
||
}
|
||
|
||
const startEdit = (todo: Todo) => {
|
||
todo.editing = true
|
||
todo.editText = todo.text
|
||
|
||
nextTick(() => {
|
||
const input = editInputs.value?.find(input =>
|
||
input && input.closest('.todo-item')?.getAttribute('data-id') === todo.id
|
||
)
|
||
input?.focus()
|
||
input?.select()
|
||
})
|
||
}
|
||
|
||
const saveEdit = async (todo: Todo) => {
|
||
if (todo.editText && todo.editText.trim() !== todo.text) {
|
||
todo.text = todo.editText.trim()
|
||
await saveTodos()
|
||
}
|
||
|
||
todo.editing = false
|
||
todo.editText = undefined
|
||
}
|
||
|
||
const cancelEdit = (todo: Todo) => {
|
||
todo.editing = false
|
||
todo.editText = undefined
|
||
}
|
||
|
||
const deleteTodo = async (id: string) => {
|
||
if (confirm('确定要删除这个待办事项吗？')) {
|
||
todos.value = todos.value.filter(t => t.id !== id)
|
||
await saveTodos()
|
||
}
|
||
}
|
||
|
||
const setFilter = (filter: FilterType) => {
|
||
currentFilter.value = filter
|
||
}
|
||
|
||
const markAllCompleted = async () => {
|
||
todos.value.forEach(todo => {
|
||
if (!todo.completed) {
|
||
todo.completed = true
|
||
todo.completedAt = new Date()
|
||
}
|
||
})
|
||
await saveTodos()
|
||
showNotification('✅ 全部完成', '所有待办事项已标记为完成')
|
||
}
|
||
|
||
const clearCompleted = async () => {
|
||
if (confirm(`确定要删除 ${completedCount.value} 个已完成的待办事项吗？`)) {
|
||
todos.value = todos.value.filter(todo => !todo.completed)
|
||
await saveTodos()
|
||
showNotification('🗑️ 清理完成', '已清除所有已完成的待办事项')
|
||
}
|
||
}
|
||
|
||
const clearAll = async () => {
|
||
if (confirm('确定要清空所有待办事项吗？此操作不可恢复。')) {
|
||
todos.value = []
|
||
await saveTodos()
|
||
showNotification('🗑️ 清空完成', '所有待办事项已清空')
|
||
}
|
||
}
|
||
|
||
const loadTodos = async () => {
|
||
try {
|
||
if (window.SystemSDK && window.SystemSDK.initialized) {
|
||
const result = await window.SystemSDK.storage.get('todos')
|
||
if (result.success && result.data) {
|
||
const savedTodos = JSON.parse(result.data)
|
||
todos.value = savedTodos.map((todo: any) => ({
|
||
...todo,
|
||
createdAt: new Date(todo.createdAt),
|
||
completedAt: todo.completedAt ? new Date(todo.completedAt) : undefined
|
||
}))
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载待办事项失败:', error)
|
||
}
|
||
}
|
||
|
||
const saveTodos = async () => {
|
||
try {
|
||
if (window.SystemSDK && window.SystemSDK.initialized) {
|
||
await window.SystemSDK.storage.set('todos', JSON.stringify(todos.value))
|
||
}
|
||
} catch (error) {
|
||
console.error('保存待办事项失败:', error)
|
||
}
|
||
}
|
||
|
||
const showNotification = async (title: string, message: string) => {
|
||
try {
|
||
if (window.SystemSDK?.ui?.showNotification) {
|
||
await window.SystemSDK.ui.showNotification({
|
||
title,
|
||
body: message,
|
||
duration: 3000
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('显示通知失败:', error)
|
||
}
|
||
}
|
||
|
||
const formatDate = (date: Date) => {
|
||
const now = new Date()
|
||
const diffMs = now.getTime() - date.getTime()
|
||
const diffMins = Math.floor(diffMs / (1000 * 60))
|
||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
|
||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
|
||
|
||
if (diffMins < 1) return '刚刚'
|
||
if (diffMins < 60) return `${diffMins}分钟前`
|
||
if (diffHours < 24) return `${diffHours}小时前`
|
||
if (diffDays < 7) return `${diffDays}天前`
|
||
|
||
return date.toLocaleDateString('zh-CN')
|
||
}
|
||
|
||
const getEmptyMessage = () => {
|
||
switch (currentFilter.value) {
|
||
case 'completed':
|
||
return '还没有已完成的任务'
|
||
case 'pending':
|
||
return '没有待办事项'
|
||
default:
|
||
return '还没有待办事项'
|
||
}
|
||
}
|
||
|
||
const getEmptyDescription = () => {
|
||
switch (currentFilter.value) {
|
||
case 'completed':
|
||
return '完成一些任务后，它们会出现在这里'
|
||
case 'pending':
|
||
return '所有任务都已完成，真棒！'
|
||
default:
|
||
return '添加一个新的待办事项开始管理您的任务吧！'
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
await loadTodos()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.todo-app {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.header {
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 24px;
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.stats {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.count {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.add-todo {
|
||
padding: 20px;
|
||
background: white;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.input-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.todo-input {
|
||
flex: 1;
|
||
padding: 12px 16px;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
outline: none;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.todo-input:focus {
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.add-btn {
|
||
padding: 12px 24px;
|
||
background: #667eea;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.add-btn:hover:not(:disabled) {
|
||
background: #5a67d8;
|
||
}
|
||
|
||
.add-btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.filters {
|
||
padding: 0 20px 20px;
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
background: white;
|
||
}
|
||
|
||
.filter-btn {
|
||
padding: 8px 16px;
|
||
border: 1px solid #e9ecef;
|
||
background: white;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.filter-btn.active {
|
||
background: #667eea;
|
||
color: white;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.filter-btn:hover:not(.active) {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.todo-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0 20px;
|
||
background: white;
|
||
}
|
||
|
||
.todo-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px;
|
||
margin-bottom: 10px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
.todo-item:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.todo-item.completed {
|
||
opacity: 0.7;
|
||
border-left-color: #28a745;
|
||
}
|
||
|
||
.todo-checkbox {
|
||
margin-right: 12px;
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
accent-color: #28a745;
|
||
}
|
||
|
||
.todo-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.todo-text {
|
||
font-size: 16px;
|
||
transition: color 0.3s;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.todo-text.completed {
|
||
text-decoration: line-through;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.todo-date {
|
||
font-size: 12px;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.todo-edit {
|
||
flex: 1;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.edit-input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 2px solid #667eea;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
outline: none;
|
||
}
|
||
|
||
.todo-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.edit-btn,
|
||
.delete-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
opacity: 0.7;
|
||
transition: opacity 0.2s;
|
||
padding: 4px;
|
||
}
|
||
|
||
.edit-btn:hover,
|
||
.delete-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.empty-state {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
color: #6c757d;
|
||
background: white;
|
||
padding: 40px;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 64px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.empty-state h3 {
|
||
margin-bottom: 8px;
|
||
color: #495057;
|
||
}
|
||
|
||
.bulk-actions {
|
||
padding: 20px;
|
||
background: white;
|
||
border-top: 1px solid #e9ecef;
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.bulk-btn {
|
||
padding: 8px 16px;
|
||
border: 1px solid #dee2e6;
|
||
background: white;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.bulk-btn:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.bulk-danger {
|
||
color: #dc3545;
|
||
border-color: #dc3545;
|
||
}
|
||
|
||
.bulk-danger:hover {
|
||
background: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
/* 动画 */
|
||
.todo-list-enter-active,
|
||
.todo-list-leave-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.todo-list-enter-from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
.todo-list-leave-to {
|
||
opacity: 0;
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.todo-list-move {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.header {
|
||
padding: 15px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.add-todo {
|
||
padding: 15px;
|
||
}
|
||
|
||
.input-group {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.filters {
|
||
padding: 0 15px 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.todo-list {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.todo-item {
|
||
padding: 12px;
|
||
}
|
||
|
||
.bulk-actions {
|
||
padding: 15px;
|
||
}
|
||
}
|
||
</style> |