feat: add category meta

BobLiu0518 · BobLiu0518 · commit bef61c18004d · 2026-01-04T01:04:14.000+08:00
diff --git a/app/app.config.ts b/app/app.config.ts
@@ -0,0 +1,9 @@
+export default defineAppConfig({
+    videoCategories: [
+        { label: '生活', value: 'life' },
+        { label: '科技', value: 'tech' },
+        { label: '娱乐', value: 'entertainment' },
+        { label: '音乐', value: 'music' },
+        { label: '教育', value: 'education' },
+    ],
+});
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -23,6 +23,13 @@
                         <h3 class="video-title">{{ video.title }}</h3>
                         <div class="video-meta">
                             <span class="uploader">{{ video.uploader }}</span>
+                            <el-tag
+                                size="small"
+                                type="info"
+                                class="category-tag"
+                                disable-transitions
+                                >{{ getCategoryLabel(video.category) }}</el-tag
+                            >
                         </div>
                     </div>
                 </el-card>
@@ -34,6 +41,13 @@
 <script setup lang="ts">
 const { data: videos } = await useFetch('/api/videos');
 
+const appConfig = useAppConfig();
+const videoCategories = appConfig.videoCategories;
+
+const getCategoryLabel = (value?: string) => {
+    return videoCategories?.find((c) => c.value === value)?.label || value;
+};
+
 const formatDuration = (seconds: number) => {
     const m = Math.floor(seconds / 60);
     const s = Math.floor(seconds % 60);
@@ -93,12 +107,19 @@ const formatDuration = (seconds: number) => {
     height: 2.8em;
     overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
 }
 .video-meta {
     margin-top: 8px;
     font-size: 13px;
     color: #909399;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+.category-tag {
+    font-size: 10px;
 }
 </style>
diff --git a/app/pages/upload.vue b/app/pages/upload.vue
@@ -8,6 +8,21 @@
                 <el-form-item label="视频标题">
                     <el-input v-model="title" placeholder="请输入视频标题" required />
                 </el-form-item>
+                <el-form-item label="视频分类">
+                    <el-select
+                        v-model="category"
+                        placeholder="请选择视频分类"
+                        style="width: 100%"
+                        required
+                    >
+                        <el-option
+                            v-for="item in videoCategories"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
                 <el-form-item label="视频文件">
                     <div class="file-input-wrapper">
                         <input
@@ -69,15 +84,19 @@
 import { Picture, VideoCamera } from '@element-plus/icons-vue';
 
 const title = ref('');
+const category = ref('');
 const videoFile = ref<File | null>(null);
 const thumbFile = ref<File | null>(null);
 const loading = ref(false);
 const token = useCookie('token');
 
+const appConfig = useAppConfig();
+const videoCategories = appConfig.videoCategories;
+
 definePageMeta({
     middleware: () => {
         if (!token.value) {
-            if (process.client) {
+            if (import.meta.client) {
                 ElMessage.warning('请先登录');
             }
             return navigateTo('/login');
@@ -101,6 +120,7 @@ const handleUpload = async () => {
 
     const formData = new FormData();
     formData.append('title', title.value);
+    formData.append('category', category.value);
     formData.append('video', videoFile.value);
     formData.append('thumbnail', thumbFile.value);
 
@@ -114,7 +134,7 @@ const handleUpload = async () => {
         });
         ElMessage.success('上传成功');
         navigateTo('/');
-    } catch (error: any) {
+    } catch (error) {
         ElMessage.error(error.data?.statusMessage || '上传失败');
     } finally {
         loading.value = false;
diff --git a/app/pages/video/[id].vue b/app/pages/video/[id].vue
@@ -11,7 +11,20 @@
                 <el-avatar :size="40" icon="UserFilled" />
                 <div class="uploader-info">
                     <div class="uploader-name">{{ video.uploader }}</div>
-                    <div class="video-meta">发布于最近</div>
+                    <div class="video-meta">
+                        <span
+                            >发布于
+                            {{
+                                new Date(video.created_at).toLocaleString('zh-CN', {
+                                    dateStyle: 'short',
+                                    timeStyle: 'medium',
+                                })
+                            }}</span
+                        >
+                        <el-tag size="small" type="info" class="category-tag">{{
+                            getCategoryLabel(video.category)
+                        }}</el-tag>
+                    </div>
                 </div>
             </div>
         </el-card>
@@ -21,6 +34,22 @@
 <script setup lang="ts">
 const route = useRoute();
 const { data: video } = await useFetch(`/api/videos/${route.params.id}`);
+
+const appConfig = useAppConfig();
+const videoCategories = appConfig.videoCategories;
+
+const getCategoryLabel = (value?: string) => {
+    return videoCategories?.find((c) => c.value === value)?.label || value;
+};
+
+useHead(() => ({
+    meta: [
+        {
+            name: 'adflux-page-category',
+            content: getCategoryLabel(video.value?.category),
+        },
+    ],
+}));
 </script>
 
 <style scoped>
@@ -62,5 +91,11 @@ const { data: video } = await useFetch(`/api/videos/${route.params.id}`);
     font-size: 12px;
     color: #909399;
     margin-top: 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.category-tag {
+    font-size: 10px;
 }
 </style>
diff --git a/app/types/app-config.d.ts b/app/types/app-config.d.ts
@@ -0,0 +1,11 @@
+/* eslint-disable no-unused-vars */
+export {};
+
+declare module 'nuxt/schema' {
+    interface AppConfigInput {
+        videoCategories?: { label: string; value: string }[];
+    }
+    interface AppConfig {
+        videoCategories: { label: string; value: string }[];
+    }
+}
diff --git a/server/api/upload.post.ts b/server/api/upload.post.ts
@@ -39,9 +39,10 @@ export default defineEventHandler(async (event) => {
     const videoFile = Array.isArray(files.video) ? files.video[0] : files.video;
     const thumbnailFile = Array.isArray(files.thumbnail) ? files.thumbnail[0] : files.thumbnail;
     const title = Array.isArray(fields.title) ? fields.title[0] : fields.title;
+    const category = Array.isArray(fields.category) ? fields.category[0] : fields.category;
 
-    if (!videoFile || !thumbnailFile || !title) {
-        throw createError({ statusCode: 400, statusMessage: '缺少视频、封面或标题' });
+    if (!videoFile || !thumbnailFile || !title || !category) {
+        throw createError({ statusCode: 400, statusMessage: '缺少视频、封面、标题或分类' });
     }
 
     const videoExt = path.extname(videoFile.originalFilename || '.mp4');
@@ -84,8 +85,8 @@ export default defineEventHandler(async (event) => {
     const thumbUrl = `/uploads/${thumbFilename}`;
 
     const result = await sql<{ id: number }[]>`
-        INSERT INTO videos (title, url, thumbnail_url, duration, uploader_id)
-        VALUES (${title}, ${videoUrl}, ${thumbUrl}, ${duration}, ${user.id})
+        INSERT INTO videos (title, url, thumbnail_url, duration, category, uploader_id)
+        VALUES (${title}, ${videoUrl}, ${thumbUrl}, ${duration}, ${category}, ${user.id})
         RETURNING id
     `;
 
diff --git a/server/api/videos/index.get.ts b/server/api/videos/index.get.ts
@@ -1,7 +1,7 @@
 export default defineEventHandler(async () => {
     // Randomize order
     const videos = await sql<VideoWithUploader[]>`
-        SELECT v.id, v.title, v.thumbnail_url, v.duration, u.username as uploader
+        SELECT v.id, v.title, v.thumbnail_url, v.duration, v.category, u.username as uploader
         FROM videos v
         JOIN users u ON v.uploader_id = u.id
         ORDER BY RANDOM()
diff --git a/server/plugins/setup.ts b/server/plugins/setup.ts
@@ -22,6 +22,7 @@ export default defineNitroPlugin(async () => {
                 url TEXT NOT NULL,
                 thumbnail_url TEXT NOT NULL,
                 duration FLOAT NOT NULL,
+                category VARCHAR(50),
                 uploader_id INTEGER REFERENCES users(id),
                 created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
             );
diff --git a/server/utils/types.ts b/server/utils/types.ts
@@ -11,6 +11,7 @@ export interface Video {
     url: string;
     thumbnail_url: string;
     duration: number;
+    category: string;
     uploader_id: number;
     created_at: Date;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ export interface Video {`
`11`	`11`	`url: string;`
`12`	`12`	`thumbnail_url: string;`
`13`	`13`	`duration: number;`
	`14`	`+ category: string;`
`14`	`15`	`uploader_id: number;`
`15`	`16`	`created_at: Date;`
`16`	`17`	`}`