modified

src/api/googleDeveloper.js

+import request from '@/utils/request'
+
+/**
+ * 获取所有可用的Google开发者账号
+ */
+export function getAvailableDevelopers() {
+  return request({
+    url: process.env.PUTIN_API + '/google-developer/available',
+    method: 'get'
+  })
+}
+
+/**
+ * 根据ID获取Google开发者账号
+ * @param {number} id 开发者账号ID
+ */
+export function getDeveloperById(id) {
+  return request({
+    url: process.env.PUTIN_API + `/google-developer/${id}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 获取Google授权链接
+ * @param {number} googleDeveloperId 开发者账号ID
+ */
+export function getGoogleAuthUrl(googleDeveloperId) {
+  return request({
+    url: process.env.PUTIN_API + `/youtube/auth-url/${googleDeveloperId}`,
+    method: 'get'
+  })
+} 
\ No newline at end of file

src/components/GoogleDeveloperSelector.vue

+<template>
+  <div class="google-developer-selector">
+    <el-select
+      v-model="selectedValue"
+      :placeholder="placeholder"
+      filterable
+      clearable
+      @change="handleChange"
+      :disabled="disabled"
+      class="selector"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.id"
+        :label="item.email"
+        :value="item.id"
+      >
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import { getAvailableDevelopers } from '@/api/googleDeveloper'
+
+export default {
+  name: 'GoogleDeveloperSelector',
+  props: {
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择Google开发者账号'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      options: [],
+      loading: false
+    }
+  },
+  computed: {
+    selectedValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  created() {
+    this.fetchOptions()
+  },
+  methods: {
+    async fetchOptions() {
+      this.loading = true
+      try {
+        const res = await getAvailableDevelopers()
+        if (res.status === 200 && res.result && res.result.data) {
+          this.options = res.result.data
+        } else {
+          this.$message.error('获取Google开发者账号列表失败')
+        }
+      } catch (error) {
+        console.error('获取Google开发者账号列表失败:', error)
+        this.$message.error('获取Google开发者账号列表失败')
+      } finally {
+        this.loading = false
+      }
+    },
+    handleChange(value) {
+      this.$emit('change', value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.google-developer-selector {
+  display: inline-block;
+}
+
+.selector {
+  width: 100%;
+}
+</style> 
\ No newline at end of file

src/views/authAccount/googleOauthYoutube.vue

@@ -15,12 +15,16 @@
             <el-option label="受限" value="2"></el-option>
           </el-select>
         </div>
+        <div class="filter-item">
+          <span class="filter-label">开发者账号</span>
+          <google-developer-selector v-model="queryParams.developerId" @change="handleQuery" class="filter-input"></google-developer-selector>
+        </div>
       </div>
 
       <!-- 操作区 -->
       <div class="operation-container">
         <div class="operation-left">
-          <el-button type="primary" class="add-button" @click="authorize()" >添加频道</el-button>
+          <el-button type="primary" class="add-button" @click="showAddChannelDialog" >添加频道</el-button>
         </div>
         <div class="operation-right">
           <el-button icon="el-icon-refresh" class="refresh-btn" @click="handleQuery">刷新</el-button>
@@ -85,6 +89,27 @@
       </el-table>
 
     </div>
+
+    <!-- 添加频道选择对话框 -->
+    <el-dialog
+      title="添加YouTube频道"
+      :visible.sync="addChannelDialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <div class="dialog-content">
+        <el-form :model="addChannelForm" ref="addChannelForm" label-width="120px" :rules="addChannelRules">
+          <el-form-item label="开发者账号" prop="developerId">
+            <google-developer-selector v-model="addChannelForm.developerId"></google-developer-selector>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addChannelDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmAddChannel">确 定</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -103,12 +128,13 @@ import {commonFetchData, getAdAccountApps, saveNewMessage,getRefreshToken} from
 import moment from "moment";
 import axios from 'axios';
 import ZxAppsSelect from '@/components/ZxAppsSelect'
-
+import GoogleDeveloperSelector from '@/components/GoogleDeveloperSelector';
 import vueJsonEditor from "vue-json-editor";
 import {getGoogleTokenList,deleteYouTubeAccountById} from "../../api/report";
+import {getGoogleAuthUrl} from "@/api/googleDeveloper";
 
 export default {
-  components: {vueJsonEditor},
+  components: {vueJsonEditor, GoogleDeveloperSelector},
   data: () => ({
     alias:'',
     authCode: null,
@@ -123,7 +149,17 @@ export default {
       name: '',
       status: '',
       channel: '',
-      uploadStatus: ''
+      uploadStatus: '',
+      developerId: ''
+    },
+    addChannelDialogVisible: false,
+    addChannelForm: {
+      developerId: ''
+    },
+    addChannelRules: {
+      developerId: [
+        { required: true, message: '请选择Google开发者账号', trigger: 'change' }
+      ]
     }
   }),
   created() {
@@ -141,35 +177,6 @@ export default {
     }
   },
   methods: {
-    authorize() {
-      // if (!this.alias){
-      //   this.$message.error("别名不能为空")
-      //   return;
-      // }
-      // const alias=this.alias;
-      const state = "auth";
-      // 本地测试的配置，用了花生壳的域名
-      // const redirectUri = `https://4222i865s4.zicp.fun/youtube/add/getRefreshToken`;
-      // 正式的配置
-      const redirectUri = `${process.env.PUTIN_API}/youtube/add/getRefreshToken`;
-      const clientId ='797378266354-sd6e02o2qpdk2rhsb0ltjc98i5k9l2co.apps.googleusercontent.com'
-      const scope = 'email profile https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtubepartner https://www.googleapis.com/auth/yt-analytics-monetary.readonly https://www.googleapis.com/auth/yt-analytics.readonly https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.channel-memberships.creator https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtubepartner https://www.googleapis.com/auth/youtubepartner-channel-audit https://www.googleapis.com/auth/yt-analytics-monetary.readonly https://www.googleapis.com/auth/yt-analytics.readonly';
-      const responseType = 'code';
-      const accessType = 'offline';
-      const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth');
-      const prompt = 'consent';
-
-      authUrl.searchParams.append('redirect_uri', redirectUri);
-      authUrl.searchParams.append('response_type', responseType);
-      authUrl.searchParams.append('client_id', clientId);
-      authUrl.searchParams.append('scope', scope);
-      authUrl.searchParams.append('access_type', accessType);
-      authUrl.searchParams.append('state', state);
-      authUrl.searchParams.append('prompt', prompt);
-      window.location.href = authUrl.toString();
-
-    },
-
     handleQuery() {
       this.getTokenList();
     },
@@ -179,7 +186,8 @@ export default {
         name: '',
         status: '',
         channel: '',
-        uploadStatus: ''
+        uploadStatus: '',
+        developerId: ''
       };
       this.getTokenList();
     },
@@ -230,6 +238,46 @@ export default {
         });
     },
 
+    // 显示添加频道对话框
+    showAddChannelDialog() {
+      this.addChannelForm.developerId = '';
+      this.addChannelDialogVisible = true;
+    },
+
+    // 确认添加频道
+    confirmAddChannel() {
+      this.$refs.addChannelForm.validate((valid) => {
+        if (valid) {
+          this.authorize(this.addChannelForm.developerId);
+          this.addChannelDialogVisible = false;
+        }
+      });
+    },
+
+    // 使用开发者账号ID获取并跳转到Google授权页面
+    async authorize(developerId) {
+      if (!developerId) {
+        this.$message.error("请选择Google开发者账号");
+        return;
+      }
+      
+      this.loading = true;
+      try {
+        const response = await getGoogleAuthUrl(developerId);
+        if (response.status === 200 && response.result && response.result.data && response.result.data.auth_url) {
+          // 跳转到Google授权页面
+          window.location.href = response.result.data.auth_url;
+        } else {
+          this.$message.error("获取授权链接失败");
+        }
+      } catch (error) {
+        console.error("获取授权链接失败:", error);
+        this.$message.error("获取授权链接失败");
+      } finally {
+        this.loading = false;
+      }
+    },
+
   },
 };
 </script>