front-end-example/08-vue3/08-final-dashboard/starter.js

const { createApp, ref, computed, watch } = Vue;

function useCourses() {
  const courses = ref([
    { id: 1, title: "setup 和 ref", finished: true },
    { id: 2, title: "reactive 和 computed", finished: false },
    { id: 3, title: "组件通信", finished: false },
    { id: 4, title: "composable 实战", finished: true },
  ]);

  function toggleCourse(courseId) {
    // 任务：根据 courseId 切换课程完成状态
  }

  return {
    courses,
    toggleCourse,
  };
}

createApp({
  components: {
    CourseItem: {
      props: {
        course: {
          type: Object,
          required: true,
        },
      },
      emits: ["toggle"],
      template: `
        <article class="course-card" :class="{ 'is-done': course.finished }">
          <h2>{{ course.title }}</h2>
          <p>{{ course.finished ? "已完成" : "学习中" }}</p>
          <button type="button" @click="$emit('toggle', course.id)">切换状态</button>
        </article>
      `,
    },
  },
  setup() {
    const keyword = ref("");
    const statusFilter = ref("all");
    const searchInput = ref(null);
    const { courses, toggleCourse } = useCourses();

    const filteredCourses = computed(() => {
      // 任务：同时按关键字和状态筛选课程
      return courses.value;
    });

    const totalCount = computed(() => {
      return courses.value.length;
    });

    const finishedCount = computed(() => {
      // 任务：返回已完成数量
      return 0;
    });

    const visibleCount = computed(() => {
      // 任务：返回当前筛选后的数量
      return 0;
    });

    watch(keyword, (newValue) => {
      // 任务：输出关键字变化
    });

    function focusSearch() {
      // 任务：通过模板 ref 聚焦输入框
    }

    return {
      keyword,
      statusFilter,
      searchInput,
      filteredCourses,
      totalCount,
      finishedCount,
      visibleCount,
      toggleCourse,
      focusSearch,
    };
  },
}).mount("#app");