Implement full media crawler workflow with Flask backend and Vue frontend.

Add TMDB search and media detail pages, HDHive resource ingestion flow, unified error handling, Docker single-container runtime, and project docs/config updates for local deployment. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-09 16:16:18 +08:00
parent d3550bf79b
commit 82581d2949
49 changed files with 4959 additions and 0 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,13 @@
+<template>
+  <main class="container">
+    <section class="card">
+      <h1>影视资源搜索与入库</h1>
+      <p class="desc">主页面用于 TMDB 搜索，详情页查看 HDHive 资源并点击入库。</p>
+      <nav class="tabs">
+        <RouterLink to="/" class="tab">影视搜索</RouterLink>
+        <RouterLink to="/tasks" class="tab">任务中心</RouterLink>
+      </nav>
+    </section>
+    <RouterView />
+  </main>
+</template>
--- a/frontend/src/api/backendApi.js
+++ b/frontend/src/api/backendApi.js
@@ -0,0 +1,42 @@
+const API_BASE_URL = import.meta.env.VITE_BACKEND_BASE_URL || "http://127.0.0.1:14620";
+
+async function request(path, options = {}) {
+  const response = await fetch(`${API_BASE_URL}${path}`, options);
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    throw new Error(
+      data?.error?.message || data?.message || `Request failed: ${response.status}`,
+    );
+  }
+  return data;
+}
+
+export function createTask(payload) {
+  return request("/api/tasks", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+}
+
+export function searchMedia(query, type = "movie") {
+  return request(
+    `/api/media/search?query=${encodeURIComponent(query)}&type=${encodeURIComponent(type)}`,
+  );
+}
+
+export function fetchMediaDetail(type, tmdbId) {
+  return request(`/api/media/${encodeURIComponent(type)}/${encodeURIComponent(tmdbId)}`);
+}
+
+export function ingestMediaResource(payload) {
+  return createTask(payload);
+}
+
+export function fetchTasks() {
+  return request("/api/tasks");
+}
+
+export function fetchTaskLogs(taskId) {
+  return request(`/api/tasks/${taskId}/logs`);
+}
--- a/frontend/src/assets/hero.png
+++ b/frontend/src/assets/hero.png
--- a/frontend/src/assets/vite.svg
+++ b/frontend/src/assets/vite.svg
--- a/frontend/src/assets/vue.svg
+++ b/frontend/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref } from 'vue'
+import viteLogo from '../assets/vite.svg'
+import heroImg from '../assets/hero.png'
+import vueLogo from '../assets/vue.svg'
+
+const count = ref(0)
+</script>
+
+<template>
+  <section id="center">
+    <div class="hero">
+      <img :src="heroImg" class="base" width="170" height="179" alt="" />
+      <img :src="vueLogo" class="framework" alt="Vue logo" />
+      <img :src="viteLogo" class="vite" alt="Vite logo" />
+    </div>
+    <div>
+      <h1>Get started</h1>
+      <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
+    </div>
+    <button type="button" class="counter" @click="count++">
+      Count is {{ count }}
+    </button>
+  </section>
+
+  <div class="ticks"></div>
+
+  <section id="next-steps">
+    <div id="docs">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#documentation-icon"></use>
+      </svg>
+      <h2>Documentation</h2>
+      <p>Your questions, answered</p>
+      <ul>
+        <li>
+          <a href="https://vite.dev/" target="_blank">
+            <img class="logo" :src="viteLogo" alt="" />
+            Explore Vite
+          </a>
+        </li>
+        <li>
+          <a href="https://vuejs.org/" target="_blank">
+            <img class="button-icon" :src="vueLogo" alt="" />
+            Learn more
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div id="social">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#social-icon"></use>
+      </svg>
+      <h2>Connect with us</h2>
+      <p>Join the Vite community</p>
+      <ul>
+        <li>
+          <a href="https://github.com/vitejs/vite" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#github-icon"></use>
+            </svg>
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a href="https://chat.vite.dev/" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#discord-icon"></use>
+            </svg>
+            Discord
+          </a>
+        </li>
+        <li>
+          <a href="https://x.com/vite_js" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#x-icon"></use>
+            </svg>
+            X.com
+          </a>
+        </li>
+        <li>
+          <a href="https://bsky.app/profile/vite.dev" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#bluesky-icon"></use>
+            </svg>
+            Bluesky
+          </a>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <div class="ticks"></div>
+  <section id="spacer"></section>
+</template>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router'
+
+createApp(App).use(router).mount('#app')
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from "vue-router";
+import SearchPage from "../views/SearchPage.vue";
+import MediaDetailPage from "../views/MediaDetailPage.vue";
+import TasksPage from "../views/TasksPage.vue";
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: "/", name: "search", component: SearchPage },
+    { path: "/media/:type/:tmdbId", name: "media-detail", component: MediaDetailPage },
+    { path: "/tasks", name: "tasks", component: TasksPage },
+  ],
+});
+
+export default router;
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -0,0 +1,200 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #1b1f23;
+  background: #f6f8fa;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+}
+
+#app {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #d8dee4;
+  border-radius: 10px;
+  padding: 16px;
+}
+
+.desc {
+  color: #57606a;
+  margin-top: 0;
+}
+
+.tabs {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.tab {
+  text-decoration: none;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  color: #1f6feb;
+  padding: 6px 10px;
+}
+
+.tab.router-link-active {
+  background: #1f6feb;
+  color: #fff;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 14px;
+}
+
+input,
+select {
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+
+button {
+  border: 1px solid #1f6feb;
+  background: #1f6feb;
+  color: #fff;
+  border-radius: 8px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+
+button.small {
+  margin-bottom: 8px;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.task-list,
+.log-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.task-list li {
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.task-list li.active {
+  border-color: #1f6feb;
+  background: #f0f6ff;
+}
+
+.meta {
+  display: flex;
+  gap: 8px;
+  font-size: 12px;
+  color: #57606a;
+}
+
+pre {
+  background: #f6f8fa;
+  border-radius: 8px;
+  padding: 12px;
+  overflow: auto;
+}
+
+.error {
+  color: #cf222e;
+}
+
+.log-time {
+  color: #57606a;
+  margin-left: 8px;
+  font-size: 12px;
+}
+
+.poster-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.poster-item img,
+.no-poster {
+  width: 100%;
+  height: 210px;
+  border-radius: 8px;
+  border: 1px solid #d0d7de;
+  cursor: pointer;
+  object-fit: cover;
+}
+
+.no-poster {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #57606a;
+  background: #f6f8fa;
+}
+
+.poster-title {
+  margin-top: 6px;
+  font-size: 13px;
+}
+
+.resource-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.resource-list li {
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 10px;
+}
+
+@media (max-width: 900px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
--- a/frontend/src/views/MediaDetailPage.vue
+++ b/frontend/src/views/MediaDetailPage.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { fetchMediaDetail, ingestMediaResource } from "../api/backendApi";
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const ingestingSlug = ref("");
+const errorMessage = ref("");
+const successMessage = ref("");
+const media = ref(null);
+const resources = ref([]);
+
+async function loadDetail() {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const data = await fetchMediaDetail(route.params.type, route.params.tmdbId);
+    media.value = data.media || null;
+    resources.value = data.resources || [];
+  } catch (error) {
+    errorMessage.value = error.message || "加载详情失败";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleIngest(resource) {
+  const confirmed = window.confirm(
+    `确认入库该资源吗？\n${resource.resourceTitle || "未命名资源"}`,
+  );
+  if (!confirmed) {
+    return;
+  }
+  ingestingSlug.value = resource.slug || "";
+  errorMessage.value = "";
+  successMessage.value = "";
+  try {
+    const task = await ingestMediaResource({
+      tmdbId: route.params.tmdbId,
+      type: route.params.type,
+      slug: resource.slug,
+      keyword: media.value?.title || "",
+    });
+    successMessage.value = "入库任务已创建，正在跳转任务页...";
+    if (task?.taskId) {
+      router.push(`/tasks?taskId=${encodeURIComponent(task.taskId)}`);
+    } else {
+      router.push("/tasks");
+    }
+  } catch (error) {
+    errorMessage.value = error.message || "入库失败";
+  } finally {
+    ingestingSlug.value = "";
+  }
+}
+
+onMounted(loadDetail);
+</script>
+
+<template>
+  <section class="card">
+    <h2>影视详情</h2>
+    <p v-if="loading">加载中...</p>
+    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
+    <p v-if="successMessage">{{ successMessage }}</p>
+    <pre v-if="media">{{ JSON.stringify(media, null, 2) }}</pre>
+  </section>
+
+  <section class="card">
+    <h2>HDHive 资源链接</h2>
+    <ul class="resource-list">
+      <li v-for="res in resources" :key="res.slug || res.unlockUrl">
+        <div><strong>{{ res.resourceTitle || "未命名资源" }}</strong></div>
+        <div class="meta">
+          <span>{{ res.quality || "未知画质" }}</span>
+          <span>{{ res.diskType || "未知网盘" }}</span>
+        </div>
+        <a href="#" @click.prevent="handleIngest(res)">
+          {{
+            ingestingSlug === res.slug
+              ? "入库中..."
+              : res.unlockUrl || "点击该资源链接执行入库"
+          }}
+        </a>
+      </li>
+    </ul>
+  </section>
+</template>
--- a/frontend/src/views/SearchPage.vue
+++ b/frontend/src/views/SearchPage.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { searchMedia } from "../api/backendApi";
+
+const router = useRouter();
+const keyword = ref("");
+const mediaType = ref("movie");
+const loading = ref(false);
+const errorMessage = ref("");
+const results = ref([]);
+
+function posterUrl(path) {
+  return path ? `https://image.tmdb.org/t/p/w342${path}` : "";
+}
+
+async function handleSearch() {
+  if (!keyword.value.trim()) {
+    errorMessage.value = "请输入关键词";
+    return;
+  }
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const data = await searchMedia(keyword.value.trim(), mediaType.value);
+    results.value = data.items || [];
+  } catch (error) {
+    errorMessage.value = error.message || "搜索失败";
+    results.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function goDetail(item) {
+  router.push(`/media/${mediaType.value}/${item.id}`);
+}
+</script>
+
+<template>
+  <section class="card">
+    <h2>TMDB 影视搜索</h2>
+    <div class="form-grid">
+      <label>
+        关键词
+        <input v-model="keyword" placeholder="例如：沙丘、黑镜" />
+      </label>
+      <label>
+        类型
+        <select v-model="mediaType">
+          <option value="movie">movie</option>
+          <option value="tv">tv</option>
+        </select>
+      </label>
+    </div>
+    <button :disabled="loading" @click="handleSearch">
+      {{ loading ? "搜索中..." : "开始搜索" }}
+    </button>
+    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
+  </section>
+
+  <section class="card">
+    <h2>搜索结果</h2>
+    <div class="poster-grid">
+      <article v-for="item in results" :key="item.id" class="poster-item">
+        <img
+          v-if="posterUrl(item.posterPath)"
+          :src="posterUrl(item.posterPath)"
+          :alt="item.title"
+          @click="goDetail(item)"
+        />
+        <div v-else class="no-poster" @click="goDetail(item)">无海报</div>
+        <div class="poster-title">{{ item.title }}</div>
+      </article>
+    </div>
+  </section>
+</template>
--- a/frontend/src/views/TasksPage.vue
+++ b/frontend/src/views/TasksPage.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { computed, nextTick, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { fetchTaskLogs, fetchTasks } from "../api/backendApi";
+
+const route = useRoute();
+const tasks = ref([]);
+const selectedTaskId = ref("");
+const logs = ref([]);
+const errorMessage = ref("");
+const taskItemRefs = ref({});
+
+const selectedTask = computed(() =>
+  tasks.value.find((item) => item.taskId === selectedTaskId.value),
+);
+
+function reloadTasks() {
+  const preferredTaskId = String(route.query.taskId || "").trim();
+  return fetchTasks()
+    .then((res) => {
+      tasks.value = res.items || [];
+      if (preferredTaskId) {
+        const matched = tasks.value.find((item) => item.taskId === preferredTaskId);
+        if (matched) {
+          selectedTaskId.value = matched.taskId;
+          return fetchTaskLogs(selectedTaskId.value);
+        }
+      }
+      if (tasks.value.length > 0) {
+        selectedTaskId.value = selectedTaskId.value || tasks.value[0].taskId;
+        return fetchTaskLogs(selectedTaskId.value);
+      }
+      return { items: [] };
+    })
+    .then((res) => {
+      logs.value = res.items || [];
+      return nextTick();
+    })
+    .then(() => {
+      if (selectedTaskId.value) {
+        scrollToTask(selectedTaskId.value);
+      }
+    })
+    .catch((error) => {
+      errorMessage.value = error.message || "加载任务列表失败";
+      tasks.value = [];
+      logs.value = [];
+    });
+}
+
+function selectTask(taskId) {
+  selectedTaskId.value = taskId;
+  fetchTaskLogs(taskId)
+    .then((res) => {
+      logs.value = res.items || [];
+    })
+    .catch((error) => {
+      errorMessage.value = error.message || "加载日志失败";
+      logs.value = [];
+    });
+}
+
+function registerTaskItemRef(taskId, el) {
+  if (!el) return;
+  taskItemRefs.value[taskId] = el;
+}
+
+function scrollToTask(taskId) {
+  const el = taskItemRefs.value[taskId];
+  if (!el) return;
+  el.scrollIntoView({ behavior: "smooth", block: "center" });
+}
+
+onMounted(reloadTasks);
+</script>
+
+<template>
+  <section class="grid">
+    <div class="card">
+      <h2>任务列表</h2>
+      <button class="small" @click="reloadTasks">刷新</button>
+      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
+      <ul class="task-list">
+        <li
+          v-for="task in tasks"
+          :key="task.taskId"
+          :class="{ active: task.taskId === selectedTaskId }"
+          :ref="(el) => registerTaskItemRef(task.taskId, el)"
+          @click="selectTask(task.taskId)"
+        >
+          <div>{{ task.taskId }}</div>
+          <div class="meta">
+            <span>{{ task.status }}</span>
+            <span>{{ task.inputPayload?.tmdbId }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="card">
+      <h2>任务详情</h2>
+      <pre v-if="selectedTask">{{ JSON.stringify(selectedTask, null, 2) }}</pre>
+      <p v-else>暂无任务</p>
+    </div>
+  </section>
+
+  <section class="card">
+    <h2>执行日志</h2>
+    <ul class="log-list">
+      <li v-for="(log, idx) in logs" :key="`${log.createdAt}_${idx}`">
+        <strong>[{{ log.level }}]</strong> {{ log.step }} - {{ log.message }}
+        <span class="log-time">{{ log.createdAt }}</span>
+      </li>
+    </ul>
+  </section>
+</template>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`