优化youtube上传

5abbd4df · lijin · 7461ec4b · 7461ec4b · 5abbd4df · 5abbd4df
Commit 5abbd4df authored Mar 24, 2025 by lijin
Showing with 102 additions and 57 deletions

index.html public/index.html +0 -18

CategorySelector.vue src/views/uploadYoutube/components/CategorySelector.vue +78 -0

uploadYoutube.vue src/views/uploadYoutube/uploadYoutube.vue +24 -39

No files found.
--- a/public/index.html
+++ b/public/index.html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="google-site-verification" content="您需要替换成Google提供的验证码" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= webpackConfig.name %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html> 
\ No newline at end of file
--- a/src/views/uploadYoutube/components/CategorySelector.vue
+++ b/src/views/uploadYoutube/components/CategorySelector.vue
+<template>
+  <div class="category-selector">
+    <el-select v-model="selectedCategory" placeholder="请选择分类" style="width: 300px" @change="handleCategoryChange">
+      <el-option
+        v-for="category in categories"
+        :key="category.id"
+        :label="category.label"
+        :value="category.id"
+      ></el-option>
+    </el-select>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CategorySelector',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      selectedCategory: this.value,
+      categories: [
+        { id: '1', label: '电影和动画' },
+        { id: '2', label: '汽车' },
+        { id: '10', label: '音乐' },
+        { id: '15', label: '宠物和动物' },
+        { id: '17', label: '体育' },
+        { id: '18', label: '短片' },
+        { id: '19', label: '旅游和活动' },
+        { id: '20', label: '游戏' },
+        { id: '21', label: '视频博客' },
+        { id: '22', label: '人物和博客' },
+        { id: '23', label: '喜剧' },
+        { id: '24', label: '娱乐' },
+        { id: '25', label: '新闻和政治' },
+        { id: '26', label: 'DIY 和生活百科' },
+        { id: '27', label: '教育' },
+        { id: '28', label: '科学和技术' },
+        { id: '30', label: '电影' },
+        { id: '31', label: '动漫/动画' },
+        { id: '32', label: '动作/冒险' },
+        { id: '33', label: '经典' },
+        { id: '34', label: '喜剧' },
+        { id: '35', label: '纪录片' },
+        { id: '36', label: '剧情片' },
+        { id: '37', label: '家庭片' },
+        { id: '38', label: '外国' },
+        { id: '39', label: '恐怖片' },
+        { id: '40', label: '科幻/幻想' },
+        { id: '41', label: '惊悚片' },
+        { id: '42', label: '短视频' },
+        { id: '43', label: '节目' },
+        { id: '44', label: '预告片' }
+      ]
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.selectedCategory = newVal;
+    }
+  },
+  methods: {
+    handleCategoryChange(value) {
+      this.$emit('input', value);
+    }
+  }
+}
+</script>
+<style scoped>
+.category-selector {
+  margin-bottom: 10px;
+}
+</style>
--- a/src/views/uploadYoutube/uploadYoutube.vue
+++ b/src/views/uploadYoutube/uploadYoutube.vue
@@ -85,18 +85,11 @@
        <!-- Category -->
        <div class="form-item-container">
          <div class="section-label">类别</div>
-          <el-select v-model="form.category" placeholder="请选择分类" style="width: 300px">
+          <category-selector v-model="form.category"></category-selector>
-            <el-option
-              v-for="category in categories"
-              :key="category.id"
-              :label="category.snippet.title"
-              :value="category.id"
-            ></el-option>
-          </el-select>
        </div>
        <!-- Playlist -->
-        <div class="form-item-container">
+        <!-- <div class="form-item-container">
          <div class="section-label">播放列表</div>
          <div class="playlist-container">
            <el-select v-model="form.playlist" placeholder="请选择播放列表" style="width: 300px">
@@ -109,7 +102,7 @@
            </el-select>
            <el-button type="primary" :disabled="true">创建播放列表</el-button>
          </div>
-        </div>
+        </div> -->
        <!-- Privacy -->
        <div class="form-item-container">
@@ -182,10 +175,14 @@
 </template>
 <script>
-import { getYoutubeAccountList, getVideo, getTotalVideoNumber, getYoutubeCategoryId, getListMyPlaylists, uploadFromOss } from '@/api/report';
+import { getYoutubeAccountList, getVideo, getTotalVideoNumber, getListMyPlaylists, uploadFromOss } from '@/api/report';
+import CategorySelector from './components/CategorySelector.vue';
 export default {
  name: 'YouTubeUploadForm',
+  components: {
+    CategorySelector
+  },
  data() {
    return {
      materialDialogVisible: false,
@@ -195,21 +192,22 @@ export default {
      materialPageSize: 5,
      totalVideoNumber: 0,
      youtubeAccounts: [],
-      categories: [],
      playlists: [],
      visibilityOptions: [
+      { label: '不公开', value: 'unlisted' },
        { label: '公开', value: 'public' },
-        { label: '不公开', value: 'private' },
+        { label: '私有', value: 'private' },
-        { label: '解锁', value: 'unlisted' }
      ],
      descriptionLength: 0,
      form: {
        youtubeAccountId: '',
-        forChildren: false,
+        forChildren: true,
-        category: '',
+        category: '1',
-        playlist: '',
+        playlist: null,
-        privacy: 'public',
+        description: '',
-        description: ''
+        privacy: 'unlisted',
+        visibility: 'unlisted'
      },
      videoList: [
      ]
@@ -226,6 +224,11 @@ export default {
        const response = await getYoutubeAccountList();
        if (response.status === 200) {
          this.youtubeAccounts = response.result.data;
+          // 自动选择第一个账户
+          if (this.youtubeAccounts.length > 0) {
+            this.form.youtubeAccountId = this.youtubeAccounts[0].id;
+            // this.fetchPlaylists();
+          }
        } else {
          this.$message.error('获取YouTube账户列表失败');
        }
@@ -237,8 +240,7 @@ export default {
    handleAccountChange(accountId) {
      this.form.youtubeAccountId = accountId;
-      this.fetchCategories();
+      // this.fetchPlaylists();
-      this.fetchPlaylists();
    },
    openMaterialDialog() {
@@ -370,24 +372,7 @@ export default {
      });
    },
-    fetchCategories() {
-      if (!this.form.youtubeAccountId) {
-        this.categories = [];
-        return;
-      }
-      getYoutubeCategoryId({ youTubeAccountId: this.form.youtubeAccountId })
-        .then(response => {
-          if (response.status === 200) {
-            this.categories = response.result.data;
-          } else {
-            this.$message.error('获取YouTube类别失败');
-          }
-        })
-        .catch(error => {
-          console.error('Error fetching YouTube categories:', error);
-          this.$message.error('获取YouTube类别失败');
-        });
-    },
    fetchPlaylists() {
      if (!this.form.youtubeAccountId) {