Todo List#

<script setup lang="ts">
import type { Todo } from '@/api/generated'
import { todoApiClient } from '@/api'
import { computed, onMounted, ref } from 'vue'

type Filter = 'all' | 'active' | 'completed'

const filters: Array<{ label: string; value: Filter }> = [
  { label: '全部', value: 'all' },
  { label: '未完成', value: 'active' },
  { label: '已完成', value: 'completed' },
]

const todos = ref<Todo[]>([])
const title = ref('')
const filter = ref<Filter>('all')
const loading = ref(false)
const saving = ref(false)

const filteredTodos = computed(() => {
  if (filter.value === 'active') {
    return todos.value.filter((todo) => !todo.spec.done)
  }
  if (filter.value === 'completed') {
    return todos.value.filter((todo) => todo.spec.done)
  }
  return todos.value
})

async function fetchTodos() {
  loading.value = true
  try {
    const { data } = await todoApiClient.listTodo({ page: 0, size: 0 })
    todos.value = data.items
  } finally {
    loading.value = false
  }
}

async function mutateAndReload(request: () => Promise<unknown>) {
  if (saving.value) {
    return
  }

  saving.value = true
  try {
    await request()
    await fetchTodos()
  } finally {
    saving.value = false
  }
}

async function createTodo() {
  const todoTitle = title.value.trim()
  if (!todoTitle) {
    return
  }

  await mutateAndReload(async () => {
    await todoApiClient.createTodo({
      todo: {
        apiVersion: 'todo.plugin.halo.run/v1alpha1',
        kind: 'Todo',
        metadata: {
          generateName: 'todo-',
          name: '',
        },
        spec: {
          title: todoTitle,
          done: false,
        },
      },
    })
    title.value = ''
  })
}

async function toggleTodo(todo: Todo) {
  await mutateAndReload(() =>
    todoApiClient.updateTodo({
      name: todo.metadata.name,
      todo: {
        ...todo,
        spec: {
          ...todo.spec,
          done: !todo.spec.done,
        },
      },
    }),
  )
}

async function deleteTodo(todo: Todo) {
  await mutateAndReload(() =>
    todoApiClient.deleteTodo({ name: todo.metadata.name }),
  )
}

onMounted(fetchTodos)
</script>

<template>
  <main class="todo-page">
    <header class="todo-header">
      <p class="eyebrow">Halo Plugin Example</p>
      <h1>Todo List</h1>
      <p>创建任务，并将进度保存在 Halo 中。</p>
    </header>

    <form class="todo-form" @submit.prevent="createTodo">
      <label for="todo-title">新任务</label>
      <div class="todo-form-row">
        <input
          id="todo-title"
          v-model="title"
          :disabled="saving"
          maxlength="120"
          placeholder="例如：完成第一个 Halo 插件"
          required
        />
        <button :disabled="saving || !title.trim()" type="submit">添加</button>
      </div>
    </form>

    <nav class="filters" aria-label="筛选 Todo">
      <button
        v-for="item in filters"
        :key="item.value"
        :aria-pressed="filter === item.value"
        :class="{ active: filter === item.value }"
        type="button"
        @click="filter = item.value"
      >
        {{ item.label }}
      </button>
    </nav>

    <p v-if="loading" class="state" aria-live="polite">正在加载…</p>
    <p v-else-if="filteredTodos.length === 0" class="state">
      当前筛选条件下没有 Todo。
    </p>
    <ul v-else class="todo-list">
      <li v-for="todo in filteredTodos" :key="todo.metadata.name">
        <label class="todo-item">
          <input
            :checked="Boolean(todo.spec.done)"
            :disabled="saving"
            type="checkbox"
            @change="toggleTodo(todo)"
          />
          <span :class="{ completed: todo.spec.done }">{{ todo.spec.title }}</span>
        </label>
        <button
          class="delete-button"
          :aria-label="`删除 ${todo.spec.title}`"
          :disabled="saving"
          type="button"
          @click="deleteTodo(todo)"
        >
          删除
        </button>
      </li>
    </ul>
  </main>
</template>

<style scoped>
.todo-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  color: #172033;
}

.todo-header {
  margin-bottom: 2rem;
}

.todo-header h1 {
  margin: 0.25rem 0 0.5rem;
  font-size: 2rem;
}

.todo-header p {
  margin: 0;
  color: #667085;
}

.eyebrow {
  color: #4f46e5 !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.todo-form {
  display: grid;
  gap: 0.5rem;
}

.todo-form > label {
  font-weight: 600;
}

.todo-form-row {
  display: flex;
  gap: 0.75rem;
}

.todo-form-row input {
  min-width: 0;
  flex: 1;
  padding: 0.75rem 0.875rem;
  border: 1px solid #d0d5dd;
  border-radius: 0.5rem;
}

button {
  padding: 0.65rem 0.9rem;
  border: 0;
  border-radius: 0.5rem;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgb(79 70 229 / 25%);
  outline-offset: 2px;
}

.filters {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
}

.filters button {
  background: #eef2ff;
  color: #3730a3;
}

.filters button.active {
  background: #4f46e5;
  color: white;
}

.state {
  padding: 2rem;
  border: 1px dashed #d0d5dd;
  border-radius: 0.75rem;
  color: #667085;
  text-align: center;
}

.todo-list {
  margin: 0;
  padding: 0;
  border: 1px solid #e4e7ec;
  border-radius: 0.75rem;
  background: white;
  list-style: none;
  overflow: hidden;
}

.todo-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

.todo-list li + li {
  border-top: 1px solid #e4e7ec;
}

.todo-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.todo-item span {
  overflow-wrap: anywhere;
}

.todo-item .completed {
  color: #98a2b3;
  text-decoration: line-through;
}

.delete-button {
  flex: none;
  background: transparent;
  color: #b42318;
}

@media (max-width: 36rem) {
  .todo-form-row {
    align-items: stretch;
    flex-direction: column;
  }
}
</style>