video-workflow/src/app/components/debug-panel/debug-panel.component.ts

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DouyinService } from '../../services/douyin.service';

@Component({
  selector: 'app-debug-panel',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="debug-panel">
      <h2>🔧 API调试面板</h2>

      <div class="debug-section">
        <h3>Token状态</h3>
        <div class="token-info">
          <p><strong>当前Token:</strong></p>
          <code>{{ currentToken }}</code>
          <button (click)="testToken()" class="debug-btn">测试Token</button>
        </div>
        <div *ngIf="tokenTestResult" class="test-result">
          <strong>测试结果:</strong>
          <pre>{{ tokenTestResult | json }}</pre>
        </div>
      </div>

      <div class="debug-section">
        <h3>搜索测试</h3>
        <div class="input-group">
          <input
            [(ngModel)]="searchKeyword"
            placeholder="搜索关键词"
            class="debug-input"
          />
          <button
            (click)="debugSearch()"
            [disabled]="isSearching"
            class="debug-btn"
          >
            {{ isSearching ? '搜索中...' : '调试搜索' }}
          </button>
        </div>

        <div *ngIf="searchResult" class="test-result">
          <strong>搜索结果:</strong>
          <pre>{{ searchResult | json }}</pre>
        </div>

        <div *ngIf="searchError" class="error-result">
          <strong>搜索错误:</strong>
          <pre>{{ searchError }}</pre>
        </div>
      </div>

      <div class="debug-section">
        <h3>网络诊断</h3>
        <button (click)="testNetwork()" class="debug-btn">测试网络连接</button>
        <div *ngIf="networkStatus" class="test-result">
          <strong>网络状态:</strong>
          <p>{{ networkStatus }}</p>
        </div>
      </div>

      <div class="debug-section">
        <h3>CORS测试</h3>
        <button (click)="testCORS()" class="debug-btn">测试CORS支持</button>
        <div *ngIf="corsStatus" class="test-result">
          <strong>CORS状态:</strong>
          <p>{{ corsStatus }}</p>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .debug-panel {
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
      font-family: Arial, sans-serif;
    }

    .debug-section {
      margin-bottom: 30px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #f9f9f9;
    }

    .debug-section h3 {
      margin-top: 0;
      color: #333;
    }

    .input-group {
      display: flex;
      gap: 10px;
      margin: 15px 0;
    }

    .debug-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }

    .debug-btn {
      padding: 8px 16px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .debug-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .debug-btn:hover:not(:disabled) {
      background: #0056b3;
    }

    .token-info {
      margin: 10px 0;
    }

    .token-info code {
      display: block;
      background: #f0f0f0;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
      word-break: break-all;
      font-size: 12px;
    }

    .test-result {
      margin-top: 15px;
    }

    .test-result pre {
      background: #e8f5e8;
      padding: 15px;
      border-radius: 4px;
      overflow-x: auto;
      max-height: 300px;
      overflow-y: auto;
      border-left: 4px solid #28a745;
      font-size: 12px;
    }

    .error-result {
      margin-top: 15px;
    }

    .error-result pre {
      background: #ffe6e6;
      padding: 15px;
      border-radius: 4px;
      overflow-x: auto;
      border-left: 4px solid #dc3545;
      color: #721c24;
      font-size: 12px;
    }
  `]
})
export class DebugPanelComponent {
  searchKeyword = '科技';
  isSearching = false;
  searchResult: any = null;
  searchError: any = null;
  tokenTestResult: any = null;
  networkStatus = '';
  corsStatus = '';

  // 硬编码Token
  currentToken = 'r:a5a19ea9868043b15d9b10423234ca43';

  constructor(private douyinService: DouyinService) {}

  testToken() {
    this.tokenTestResult = null;

    // 简单的Token格式验证
    if (this.currentToken.startsWith('r:') && this.currentToken.length > 10) {
      this.tokenTestResult = {
        status: '格式正确',
        format: 'Bearer Token',
        prefix: 'r:',
        length: this.currentToken.length,
        message: 'Token格式看起来正确'
      };
    } else {
      this.tokenTestResult = {
        status: '格式错误',
        message: 'Token格式不符合预期'
      };
    }
  }

  debugSearch() {
    if (!this.searchKeyword.trim() || this.isSearching) return;

    this.isSearching = true;
    this.searchResult = null;
    this.searchError = null;

    console.log('开始调试搜索:', {
      keyword: this.searchKeyword,
      service: this.douyinService
    });

    this.douyinService.searchVideos(
      this.searchKeyword,
      '0', // sortType
      0,   // cursor
      '0', // publishTime
      '0', // filterDuration
      '0'  // contentType
    ).subscribe({
      next: (result) => {
        console.log('搜索成功:', result);
        this.searchResult = result;
        this.isSearching = false;
      },
      error: (error) => {
        console.error('搜索失败详细错误:', error);
        this.searchError = {
          message: error.message,
          status: error.status,
          statusText: error.statusText,
          name: error.name,
          stack: error.stack,
          fullError: error
        };
        this.isSearching = false;
      }
    });
  }

  async testNetwork() {
    this.networkStatus = '正在测试网络连接...';

    try {
      const startTime = Date.now();
      const response = await fetch('https://www.baidu.com', {
        method: 'HEAD',
        mode: 'no-cors'
      });
      const endTime = Date.now();

      this.networkStatus = `网络连接正常 ✅\n响应时间: ${endTime - startTime}ms`;
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '未知错误';
      this.networkStatus = `网络连接异常 ❌\n错误: ${errorMessage}`;
    }
  }

  async testCORS() {
    this.corsStatus = '正在测试CORS支持...';

    try {
      const response = await fetch('https://server.fmode.cn/api/voc-social/douyin/search/fetch_general_search_v2', {
        method: 'OPTIONS',
        headers: {
          'Origin': window.location.origin,
          'Access-Control-Request-Method': 'POST',
          'Access-Control-Request-Headers': 'content-type,authorization'
        }
      });

      const corsHeaders = {
        'Access-Control-Allow-Origin': response.headers.get('Access-Control-Allow-Origin'),
        'Access-Control-Allow-Methods': response.headers.get('Access-Control-Allow-Methods'),
        'Access-Control-Allow-Headers': response.headers.get('Access-Control-Allow-Headers')
      };

      this.corsStatus = `CORS预检请求完成\n状态: ${response.status}\n响应头: ${JSON.stringify(corsHeaders, null, 2)}`;
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '未知错误';
      this.corsStatus = `CORS测试失败 ❌\n错误: ${errorMessage}\n这可能是导致API调用失败的原因`;
    }
  }
}