// 主要技術(shù)依賴(lài)
{
  "dependencies": {
    "ant-design-vue": "^1.7.8",  // UI組件庫(kù)
    "vue": "^2.6.12",            // 前端框架
    "axios": "^0.21.1"           // HTTP客戶端
  }
}

<a-input
  placeholder="請(qǐng)輸入媒體廣告位ID，多個(gè)用逗號(hào)分隔"
  v-decorator="['mediaAdId']"
  @pressEnter="handleSearch"
  allowClear>
  <a-icon slot="prefix" type="search" />
</a-input>

async fetchMediaAdSlotList() {
  try {
    const { data } = await mediaApi.getMediaAdSlotList({
      agentId: this.agentId,
      keywords: this.searchKeywords 
    });
    
    // 性能優(yōu)化：只存儲(chǔ)原始數(shù)據(jù)，渲染時(shí)分頁(yè)處理
    this.fullMediaAdSlotList = data;
    this.displayList = data.slice(0, 30);
  } catch (error) {
    this.$message.error(error.message);
  }
}

<template slot="operation" slot-scope="text, record">
  <!-- 編輯按鈕 -->
  <a-button type="link" style="color: #52c41a;">
    <a-icon type="edit" />
    編輯
  </a-button>
  
  <!-- 開(kāi)始抓取按鈕 -->
  <a-button 
    type="link" 
    style="color: #00C853;"
    :loading="loadingStatus[record.id]"
    @click="handleGrasping(record)">
    <a-icon type="cloud-download" />
    開(kāi)始抓取
  </a-button>
</template>

async handleGrasping(record) {
  try {
    // 1. 顯示確認(rèn)對(duì)話框
    Modal.confirm({
      title: '確認(rèn)抓取',
      content: `確定抓取 ${record.name} 數(shù)據(jù)?`,
      onOk: async () => {
        // 2. 設(shè)置加載狀態(tài)
        this.$set(this.loadingStatus, record.id, true);
        
        // 3. 調(diào)用API
        const { data } = await mediaApi.startGrasping({
          id: record.id,
          type: 'full' // 全量抓取
        });
        
        // 4. 處理結(jié)果
        if (data.success) {
          this.$message.success(`任務(wù)ID: ${data.taskId}`);
          this.pollTaskStatus(data.taskId); // 輪詢狀態(tài)
        }
      }
    });
  } catch (error) {
    this.$message.error('抓取失敗');
  } finally {
    this.loadingStatus[record.id] = false;
  }
}

// 滾動(dòng)加載實(shí)現(xiàn)
handleScroll(e) {
  const { scrollTop, clientHeight, scrollHeight } = e.target;
  if (scrollHeight - scrollTop === clientHeight) {
    if (this.displayList.length < this.fullMediaAdSlotList.length) {
      const nextChunk = this.fullMediaAdSlotList.slice(
        this.displayList.length,
        this.displayList.length + 20
      );
      this.displayList.push(...nextChunk);
    }
  }
}

import { debounce } from 'lodash';

methods: {
  search: debounce(function(isStart) {
    // 實(shí)際搜索邏輯
  }, 500)
}

async startGraspingTask(params) {
  try {
    return await mediaApi.startGrasping(params);
  } catch (error) {
    if (error.response) {
      // API錯(cuò)誤
      if (error.response.status === 429) {
        this.$message.warning('操作過(guò)于頻繁');
      }
    } else {
      // 網(wǎng)絡(luò)錯(cuò)誤
      this.$message.error('網(wǎng)絡(luò)連接異常');
    }
    throw error;
  }
}

handleGrasping(record) {
  this.$track('grasping_start', {
    media_id: record.id,
    time: new Date().toISOString()
  });
  // ...原有邏輯
}