用CodeBuddy Code CLI构建现代化Vue待办事项应用的完整实战

如果我想实现一个计划表，请给出你的每一步的prompt，以及对于UI方面，整体性能方面的想法，我只有一个条件，这个系统使用vue，至于本地存储也需要你来进行对比localStorage vs IndexedDB vs WebSQL

vue-todo-app/
├── src/
│   ├── components/          # 组件目录
│   │   ├── FilterBar.vue    # 过滤栏组件
│   │   ├── SearchBar.vue    # 搜索栏组件
│   │   ├── TodoInput.vue    # 输入组件
│   │   ├── TodoItem.vue     # 单个待办项组件
│   │   ├── TodoList.vue     # 待办列表组件
│   │   └── TodoStats.vue    # 统计信息组件
│   ├── stores/              # 状态管理
│   │   ├── todo.js         # 待办事项状态
│   │   └── settings.js     # 设置状态
│   ├── utils/              # 工具函数
│   │   ├── helpers.js      # 辅助函数
│   │   └── storage.js      # 存储工具
│   ├── styles/             # 样式文件
│   │   └── main.css        # 主样式
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── package.json
└── vite.config.js

export const useTodoStore = defineStore('todo', () => {
  // 响应式状态
  const todos = ref([])
  const filter = ref('all')
  const searchQuery = ref('')
  
  // 计算属性
  const filteredTodos = computed(() => {
    let filtered = todos.value

    // 搜索过滤
    if (searchQuery.value.trim()) {
      const query = searchQuery.value.trim().toLowerCase()
      filtered = filtered.filter(todo =>
        todo.text.toLowerCase().includes(query)
      )
    }

    // 状态过滤
    switch (filter.value) {
      case 'active':
        return filtered.filter(todo => !todo.completed)
      case 'completed':
        return filtered.filter(todo => todo.completed)
      default:
        return filtered
    }
  })
  
  // 核心操作方法
  const addTodo = (text) => { /* 添加待办 */ }
  const toggleTodo = (id) => { /* 切换状态 */ }
  const updateTodo = (id, updates) => { /* 更新待办 */ }
  const deleteTodo = (id) => { /* 删除待办 */ }
  
  return {
    todos, filter, searchQuery, filteredTodos,
    addTodo, toggleTodo, updateTodo, deleteTodo
  }
})

<template>
  <div class="todo-input">
    <div class="input-wrapper">
      <input
        ref="inputRef"
        v-model="inputText"
        @keyup.enter="handleAdd"
        @keyup.esc="handleClear"
        placeholder="添加新的待办事项..."
      />
      <button :disabled="!inputText.trim()" @click="handleAdd">
        添加
      </button>
    </div>
  </div>
</template>

<template>
  <div class="todo-item" :class="{ completed: todo.completed }">
    <label class="checkbox-wrapper">
      <input type="checkbox" :checked="todo.completed" @change="handleToggle" />
      <span class="checkmark"></span>
    </label>
    
    <div class="todo-text" v-if="!isEditing">
      <span @dblclick="startEdit" :class="{ 'completed-text': todo.completed }">
        {{ todo.text }}
      </span>
      <div class="todo-meta">
        <span class="priority-badge">{{ priorityText }}</span>
        <span class="date">{{ formatDate(todo.createdAt) }}</span>
      </div>
    </div>
    
    <div class="todo-actions">
      <button @click="startEdit" title="编辑">✏️</button>
      <button @click="handleDelete" title="删除">🗑️</button>
    </div>
  </div>
</template>

const STORAGE_KEY = 'vue-todo-app'

export const storage = {
  get(key) {
    try {
      const data = localStorage.getItem(`${STORAGE_KEY}-${key}`)
      return data ? JSON.parse(data) : null
    } catch (error) {
      console.error('Error reading from localStorage:', error)
      return null
    }
  },
  
  set(key, value) {
    try {
      localStorage.setItem(`${STORAGE_KEY}-${key}`, JSON.stringify(value))
    } catch (error) {
      console.error('Error writing to localStorage:', error)
    }
  }
}

.todo-list-enter-active { transition: all 0.3s ease; }
.todo-list-leave-active { transition: all 0.3s ease; }
.todo-list-enter-from { opacity: 0; transform: translateY(-10px); }
.todo-list-leave-to { opacity: 0; transform: translateX(100%); }

@media (max-width: 640px) {
  .input-wrapper { flex-direction: column; }
  .todo-actions { opacity: 1; }  /* 移动端始终显示操作按钮 */
  .todo-meta { flex-direction: column; align-items: flex-start; }
}

两边空白太多了，可以优化一下背景，加一些不规则且颜色较浅的图形点缀

/* 左侧装饰 */
.side-decorations::before {
  content: '';
  position: fixed;
  left: 0;
  width: calc((100vw - 900px) / 2);
  height: 100vh;
  background: 
    linear-gradient(135deg, rgba(3, 105, 161, 0.03) 0%, transparent 60%),
    conic-gradient(from 45deg at 80% 20%, rgba(5, 150, 105, 0.08) 0deg, transparent 120deg),
    radial-gradient(ellipse 200px 300px at 70% 30%, rgba(217, 119, 6, 0.04) 0%, transparent 70%);
}

/* 右侧装饰 */
.side-decorations::after {
  content: '';
  position: fixed;
  right: 0;
  width: calc((100vw - 900px) / 2);
  height: 100vh;
  background:
    linear-gradient(225deg, rgba(5, 150, 105, 0.03) 0%, transparent 60%),
    conic-gradient(from 225deg at 20% 20%, rgba(3, 105, 161, 0.06) 0deg, transparent 120deg),
    radial-gradient(ellipse 180px 280px at 30% 40%, rgba(217, 119, 6, 0.04) 0%, transparent 70%);
}

[data-theme="dark"] {
  --bg-color: var(--gray-900);
  --text-color: var(--gray-100);
  --border-color: var(--gray-700);
}

[data-theme="dark"] body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

// 动态导入大型组件
const TodoList = defineAsyncComponent(() => import('./components/TodoList.vue'))

const filteredTodos = computed(() => {
  // 只有在todos、searchQuery或filter变化时才重新计算
  return todos.value.filter(/* 筛选逻辑 */)
})

<input @keyup.enter="handleAdd" @keyup.esc="handleClear" />