feat: add frontend

frontend/src/views/tabs/HomeView.vue

@@ -0,0 +1,65 @@
+<template>
+  <van-search v-model="search" placeholder="请输入搜索关键词" />
+
+  <van-list
+    v-model:loading="loading"
+    :finished="finished"
+    finished-text="没有更多了"
+    @load="onLoad"
+  >
+    <van-card
+      v-for="item in list"
+      :key="item"
+      price="2.00"
+      desc="描述信息"
+      title="商品标题"
+      thumb="https://fastly.jsdelivr.net/van-listt/assets/ipad.jpeg"
+      lazy-load="true"
+      @click="play(item)"
+    >
+      <template #tags>
+        <van-space>
+          <van-tag plain type="primary">视频</van-tag>
+          <van-tag plain type="primary">音频</van-tag>
+          <van-tag plain type="primary">PDF</van-tag>
+        </van-space>
+      </template>
+    </van-card>
+  </van-list>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const search = ref("");
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 10; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 40) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
+const play = (item) => {
+  // vue router goto play view
+  console.log("play", item);
+  router.push({ name: "play", params: { id: item } });
+};
+</script>