提交

src/components/page/crawlTaskMonitor.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="monitor-container">
-   
-
     <div class="control-panel">
       <div class="panel-left">
         <el-radio-group v-model="filterStatus" size="small" class="status-group" @change="handleFilter">
@@ -9,6 +7,7 @@
           <el-radio-button label="0">{{ $t('crawlTask.enabled') }}</el-radio-button>
           <el-radio-button label="1">{{ $t('crawlTask.disabled') }}</el-radio-button>
         </el-radio-group>
+        
         <el-input
           v-model="searchText"
           :placeholder="$t('crawlTask.searchPlaceholder')"
@@ -16,129 +15,95 @@
           size="small"
           class="search-box"
           clearable
-          @input="handleFilter"
+          @keyup.enter.native="handleFilter"
         />
-        <el-button
+        
-          type="primary"
+        <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearchClick">
-          size="small"
-          icon="el-icon-search"
-          @click="handleSearchClick"
-        >
           {{ $t('crawlTask.searchBtn') }}
         </el-button>
-       
       </div>
+      
       <div class="panel-right">
-        
+        <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">
-        <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">{{ $t('crawlTask.addKeyword') }}</el-button>
+          {{ $t('crawlTask.addKeyword') }}
-      </div>
-    </div>
-
-    <el-dialog
-      :title="$t('crawlTask.addKeyword')"
-      :visible.sync="addDialogVisible"
-      width="500px"
-      :close-on-click-modal="false"
-      @closed="resetAddForm"
-    >
-      <el-form label-width="120px" size="small">
-        <el-form-item :label="$t('crawlTask.keyword')">
-          <el-input
-            v-model="addForm.field"
-            :placeholder="$t('crawlTask.keywordPlaceholder')"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item :label="$t('crawlTask.runOnce')">
-          <el-switch
-            v-model="addForm.runNow"
-            :active-text="$t('crawlTask.yes')"
-            :inactive-text="$t('crawlTask.no')"
-          />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="addDialogVisible = false">{{ $t('crawlTask.cancel') }}</el-button>
-        <el-button type="primary" size="small" :loading="addLoading" @click="submitAddKeyword">
-          {{ $t('crawlTask.confirm') }}
         </el-button>
-      </span>
+      </div>
-    </el-dialog>
+    </div>
 
     <div v-loading="loading" class="task-list">
       <el-empty v-if="list.length === 0" :description="$t('crawlTask.emptyResult')" />
       
-      <div v-for="item in list" :key="item.id" class="task-row" :class="'status-' + item.stateClass">
+      <div 
+        v-for="item in list" 
+        :key="item.id" 
+        class="task-row" 
+        :class="item.state === 'running' ? 'is-active' : 'is-paused'"
+      >
         <div class="col-base">
+          <div class="status-indicator">
             <div class="status-dot"></div>
-          <div class="id-info">
+          </div>
-            <span class="task-id">#{{ item.id}}</span>
+          <div class="info-content">
+            <div class="task-name-row">
+              <span class="task-id">#{{ item.id }}</span>
               <span class="task-name">{{ item.task_name }}</span>
             </div>
+            <div class="task-meta">
+              <el-tag size="mini" effect="plain" type="info">{{ item.source }}</el-tag>
+              <span class="time-label"><i class="el-icon-time"></i> {{ item.create_time }}</span>
+            </div>
+          </div>
         </div>
 
         <div class="col-metrics">
-          <div class="metric-item">
+          <div class="metric-block main">
-            <span class="m-label">{{ $t('crawlTask.source') }}</span>
+            <span class="m-label">{{ $t('crawlTask.metricExperts') }}</span>
-            <span class="m-value mini-text">{{ item.source }}</span>
+            <span class="m-value expert-count">{{ item.expert_count }}</span>
           </div>
-          <div class="metric-item highlight">
+          <div class="divider"></div>
-            <span class="m-label">{{ $t('crawlTask.totalPages') }}</span>
+          <div class="metric-block">
-            <span class="m-value">{{ item.total_pages }}</span>
+            <span class="m-label">{{ $t('crawlTask.metricPages') }}</span>
-          </div>
+            <span class="m-value">{{ item.last_page }} <small>/ {{ item.total_pages }}</small></span>
-          <div class="metric-item highlight">
-            <span class="m-label">{{ $t('crawlTask.crawledPages') }}</span>
-            <span class="m-value">{{ item.last_page }}</span>
-          </div>
-          <div class="metric-item highlight">
-            <span class="m-label">{{ $t('crawlTask.expertCountLabel') }}</span>
-            <span class="m-value expert-num">{{ item.expert_count }}</span>
-          </div>
-         
-        </div>
-
-        <div class="col-timeline">
-          <div class="time-block">
-            <i class="el-icon-time"></i>
-            <div class="time-detail">
-              <span>{{ $t('crawlTask.created') }}: {{ item.create_time }}</span>
-              <span :class="item.state === 'done' ? 'success-text' : ''">
-                {{ item.state === 'done' ? $t('crawlTask.completed') : $t('crawlTask.updated') }}: {{ item.update_time }}
-              </span>
-            </div>
-          </div>
-          <div class="duration-tag" v-if="item.duration">
-            <i class="el-icon-odometer"></i> {{ item.duration }}
           </div>
         </div>
 
-        <div class="col-action">
+        <div class="col-progress">
-          <div class="prog-box">
+          <div class="prog-text">
-            <span class="prog-num">{{ item.progress }}%</span>
+            <span>{{ $t('crawlTask.progress') }}</span>
+            <span class="percent">{{ item.progress }}%</span>
+          </div>
           <el-progress 
             :percentage="item.progress" 
             :show-text="false" 
-              :stroke-width="4"
+            :stroke-width="6"
-              :status="item.state === 'error' ? 'exception' : (item.state === 'done' ? 'success' : '')"
+            :color="progressStrokeColor(item)"
+          />
+        </div>
+
+        <div class="col-action">
+          <div class="switch-wrapper">
+            <span class="state-text" :class="item.state">{{
+              item.state === 'running' ? $t('crawlTask.stateRunning') : $t('crawlTask.stateStopped')
+            }}</span>
+            <el-switch
+              v-model="item.state"
+              active-value="running"
+              inactive-value="paused"
+              active-color="#13ce66"
+              inactive-color="#c0c4cc"
+              @change="handleToggleTask(item)"
             />
           </div>
-          <div class="btn-group">
-            <div class="crawl-once-frame">
           <el-button
-                type="text"
+            type="primary"
-                :icon="runOnceLoadingId === item.id ? 'el-icon-loading' : 'el-icon-finished'"
+            size="mini"
-                class="op-run-once"
+            plain
-                :disabled="runOnceLoadingId === item.id"
+            icon="el-icon-refresh-right"
+            :loading="runOnceLoadingId === item.id"
             @click="handleRunOnce(item)"
-              >{{ runOnceLoadingId === item.id ? $t('crawlTask.runOnceLoading') : $t('crawlTask.runOnceBtn') }}</el-button>
+          >
-            </div>
+            {{ $t('crawlTask.runOnceBtn') }}
-            <el-button
+          </el-button>
-              type="text"
-              :icon="item.state === 'running' ? 'el-icon-video-pause' : 'el-icon-video-play'"
-              :class="['toggle-btn', item.state === 'running' ? 'op-pause' : 'op-resume']"
-              @click="handleToggleTask(item)"
-            >{{ item.state === 'running' ? $t('crawlTask.disabled') : $t('crawlTask.enabled') }}</el-button>
-          </div>
         </div>
       </div>
     </div>
@@ -149,12 +114,27 @@
         layout="total, sizes, prev, pager, next, jumper"
         :current-page.sync="currentPage"
         :page-size="pageSize"
-        :page-sizes="[5, 10, 20, 50]"
+        :page-sizes="[10, 20, 50, 100]"
         :total="total"
         @size-change="handleSizeChange"
         @current-change="handlePageChange"
       />
     </div>
+
+    <el-dialog :title="$t('crawlTask.addKeyword')" :visible.sync="addDialogVisible" width="460px" @closed="resetAddForm">
+      <el-form label-width="100px" size="small">
+        <el-form-item :label="$t('crawlTask.keyword')">
+          <el-input v-model="addForm.field" :placeholder="$t('crawlTask.keywordPlaceholder')" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('crawlTask.runOnce')">
+          <el-switch v-model="addForm.runNow" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button size="small" @click="addDialogVisible = false">{{ $t('crawlTask.cancel') }}</el-button>
+        <el-button type="primary" size="small" :loading="addLoading" @click="submitAddKeyword">{{ $t('crawlTask.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -171,212 +151,107 @@ export default {
       list: [],
       addDialogVisible: false,
       addLoading: false,
-      runOnceLoading: false,
       runOnceLoadingId: null,
-      addForm: {
+      addForm: { field: '', runNow: false }
-        field: '',
-        runNow: false
-      }
     };
   },
   created() {
     this.fetchList();
   },
   methods: {
-    calcProgress(lastPage, totalPages) {
+    /** 停止态用灰条，避免 exception 大红；运行中未满用蓝，满格用绿 */
-      const current = Number(lastPage || 0);
+    progressStrokeColor(item) {
-      const total = Number(totalPages || 0);
+      if (item.state !== 'running') return '#c0c4cc';
-      if (total <= 0) return 0;
+      if (item.progress >= 100) return '#67c23a';
-      let percent = (current / total) * 100;
+      return '#409eff';
-      if (percent > 100) percent = 100;
-      return Number(percent.toFixed(2));
     },
+    // 数据标准化逻辑
     normalizeItem(item) {
-      const totalPages = Number(item.total_pages || 0);
+      const total = Number(item.total_pages || 0);
-      const lastPage = Number(item.last_page || 0);
+      const current = Number(item.last_page || 0);
-      const percent = this.calcProgress(lastPage, totalPages);
+      let progress = total > 0 ? (current / total) * 100 : 0;
-      const stateNum = Number(item.state);
+      
-      const stateClass = stateNum === 0 ? 'running' : 'paused';
-      const source = (item.source || '').toUpperCase() === 'PUBMED' ? 'PubMed' : (item.source || '-');
       return {
-        id: item.expert_fetch_id || item.id || 0,
+        id: item.expert_fetch_id || item.id,
-        field: item.field || '',
+        task_name: item.field || '-',
+        source: (item.source || 'PubMed'),
         expert_count: item.expert_count || 0,
-        task_name: item.field ? `${item.field}`:'-',
+        total_pages: total,
-        source,
+        last_page: current,
-        state: stateClass,
+        progress: Number(progress.toFixed(1)),
-        stateClass,
+        state: Number(item.state) === 0 ? 'running' : 'paused',
-        progress: percent,
+        create_time: item.ctime_text || '-'
-        create_time: item.ctime_text || '-',
-        update_time: item.last_time_text || '-',
-        duration: '',
-        total_pages: Number(item.total_pages || 0),
-        last_page: Number(item.last_page || 0),
-        duplicates: 0,
-        failed: 0
       };
     },
     async fetchList() {
       this.loading = true;
       try {
         const params = {
-          keyword: this.searchText || '',
+          keyword: this.searchText,
           pageIndex: this.currentPage,
-          pageSize: this.pageSize
+          pageSize: this.pageSize,
+          state: this.filterStatus !== '' ? this.filterStatus : undefined
         };
-        if (this.filterStatus !== '') {
-          params.state = this.filterStatus;
-        }
         const res = await this.$api.post('api/expert_manage/getFetchList', params);
-        if (res && res.code === 0 && res.data) {
+        if (res.code === 0) {
-          const rows = res.data.list || [];
+          this.list = res.data.list.map(this.normalizeItem);
-          this.list = rows.map(this.normalizeItem);
+          this.total = res.data.total;
-          this.total = Number(res.data.total || rows.length || 0);
-        } else {
-          this.list = [];
-          this.total = 0;
         }
-      } catch (e) {
-        this.list = [];
-        this.total = 0;
       } finally {
         this.loading = false;
       }
     },
-    handleFilter() {
-      this.currentPage = 1;
-      this.fetchList();
-    },
-    handleSearchClick() {
-      this.handleFilter();
-    },
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.fetchList();
-    },
-    handlePageChange(val) {
-      this.currentPage = val;
-      this.fetchList();
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    },
-    resetQuery() {
-      this.searchText = '';
-      this.filterStatus = '';
-      this.currentPage = 1;
-      this.fetchList();
-    },
-    openAddDialog() {
-      this.addDialogVisible = true;
-    },
-    resetAddForm() {
-      this.addLoading = false;
-      this.runOnceLoading = false;
-      this.addForm = {
-        field: '',
-        runNow: false
-      };
-    },
-    async submitAddKeyword() {
-      const field = (this.addForm.field || '').trim();
-      if (!field) {
-        this.$message.warning(this.$t('crawlTask.enterKeyword'));
-        return;
-      }
-      const runNow = !!this.addForm.runNow;
-      this.addLoading = true;
-      try {
-        const addRes = await this.$api.post('api/expert_manage/addFetchField', { field });
-        if (!addRes || addRes.code !== 0) {
-          this.$message.error((addRes && addRes.msg) || this.$t('crawlTask.addKeywordFailed'));
-          return;
-        }
-
-        this.$message.success(this.$t('crawlTask.addKeywordSuccess'));
-        this.addDialogVisible = false;
-        this.currentPage = 1;
-        await this.fetchList();
-
-        if (runNow) {
-          // 勾选“单次抓取”时，在列表对应行按钮上显示 loading
-          const lowerField = field.toLowerCase();
-          const target = this.list.find(
-            (row) => ((row.field || '').trim().toLowerCase() === lowerField)
-          );
-          this.runOnceLoading = true;
-          this.runOnceLoadingId = target ? target.id : null;
-          const runRes = await this.$api.post('api/expert_finder/fetchOneField', { field });
-          if (!runRes || runRes.code !== 0) {
-            this.$message.warning((runRes && runRes.msg) || this.$t('crawlTask.runOnceFailed'));
-          } else {
-            this.$message.success(this.$t('crawlTask.runOnceSuccess'));
-          }
-          await this.fetchList();
-        }
-      } catch (e) {
-        this.$message.error(this.$t('crawlTask.operationRetry'));
-      } finally {
-        this.addLoading = false;
-        this.runOnceLoading = false;
-        this.runOnceLoadingId = null;
-        this.loading = false;
-      }
-    },
     async handleToggleTask(item) {
-      const isRunning = item.state === 'running';
+      const isNowRunning = item.state === 'running';
-      const newState = isRunning ? '1' : '0';
+      const newState = isNowRunning ? '0' : '1';
       try {
-        this.loading = true;
         const res = await this.$api.post('api/expert_manage/editFetchField', {
           expert_fetch_id: item.id,
           state: newState
         });
-        if (res && res.code === 0) {
+        if (res.code === 0) {
-          item.state = isRunning ? 'paused' : 'running';
+          this.$message.success(isNowRunning ? this.$t('crawlTask.taskRunningMsg') : this.$t('crawlTask.taskStoppedMsg'));
-          item.stateClass = item.state;
-          this.$message.success(isRunning ? this.$t('crawlTask.disabledMsg') : this.$t('crawlTask.enabledMsg'));
         } else {
-          this.$message.error((res && res.msg) || (isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed')));
+          item.state = isNowRunning ? 'paused' : 'running';
+          this.$message.error(res.msg || this.$t('crawlTask.operationFail'));
         }
       } catch (e) {
-        this.$message.error(isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed'));
+        item.state = isNowRunning ? 'paused' : 'running';
-      } finally {
-        this.loading = false;
       }
     },
-    handleRestart(item) {
-      item.state = 'running';
-      item.stateClass = 'running';
-      item.progress = 0;
-      this.$message.success(this.$t('crawlTask.restartSuccess'));
-    },
     async handleRunOnce(item) {
-      const field = (item.field || item.task_name || '').trim();
-      if (!field) {
-        this.$message.warning(this.$t('crawlTask.missingKeyword'));
-        return;
-      }
       this.runOnceLoadingId = item.id;
       try {
-        const res = await this.$api.post('/api/expert_finder/fetchOneField', { field });
+        const res = await this.$api.post('/api/expert_finder/fetchOneField', { field: item.task_name });
-        if (res && res.code === 0) {
+        if (res.code === 0) {
-          this.$message.success(this.$t('crawlTask.runOnceSuccess'));
+          this.$message.success(this.$t('crawlTask.runOnceQueued'));
-          await this.fetchList();
+          this.fetchList();
-        } else {
-          this.$message.error((res && res.msg) || this.$t('crawlTask.runOnceFailed'));
         }
-      } catch (e) {
-        this.$message.error(this.$t('crawlTask.runOnceFailed'));
       } finally {
         this.runOnceLoadingId = null;
       }
     },
-    handleAction(msg, item) {
+    // 其余分页/弹窗逻辑
-      if (msg === 'logs') {
+    handleFilter() { this.currentPage = 1; this.fetchList(); },
-        this.$message.info(`${this.$t('crawlTask.viewLogs')}: #${item.id}`);
+    handleSearchClick() { this.handleFilter(); },
-        return;
+    handleSizeChange(val) { this.pageSize = val; this.fetchList(); },
+    handlePageChange(val) { this.currentPage = val; this.fetchList(); },
+    openAddDialog() { this.addDialogVisible = true; },
+    resetAddForm() { this.addForm = { field: '', runNow: false }; this.addLoading = false; },
+    async submitAddKeyword() {
+      if (!this.addForm.field.trim()) return this.$message.warning(this.$t('crawlTask.enterKeyword'));
+      this.addLoading = true;
+      try {
+        const res = await this.$api.post('api/expert_manage/addFetchField', { field: this.addForm.field });
+        if (res.code === 0) {
+          this.$message.success(this.$t('crawlTask.addKeywordSuccess'));
+          if (this.addForm.runNow) {
+            await this.$api.post('api/expert_finder/fetchOneField', { field: this.addForm.field });
           }
-      this.$message.info(msg);
+          this.addDialogVisible = false;
+          this.fetchList();
+        }
+      } finally { this.addLoading = false; }
     }
   }
 };
@@ -384,145 +259,86 @@ export default {
 
 <style scoped>
 .monitor-container {
-  padding:0px 20px;
+  padding: 20px;
-  background: #f4f7f9;
+  background: #f5f7fa;
-  min-height: 100vh;
+  min-height: calc(100vh - 100px);
-  color: #334155;
 }
 
-/* 统计卡片 */
+/* 控制面板 */
-.stat-overview { display: flex; gap: 16px; margin-bottom: 24px; }
-.stat-card {
-  background: #fff;
-  padding: 16px 20px;
-  border-radius: 8px;
-  flex: 1;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-  border-top: 3px solid #0a3088; /* 呼应你偏好的深蓝色 */
-}
-.stat-val { font-size: 22px; font-weight: bold; color: #0a3088; display: block; }
-.stat-label { font-size: 12px; color: #64748b; margin-top: 4px; }
-
-/* 过滤工具栏 */
 .control-panel {
+  background: #fff;
+  padding: 12px 20px;
+  border-radius: 8px;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 16px;
-  background: #fff;
-  padding: 12px;
-  border-radius: 8px;
   align-items: center;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
 }
-.panel-left { display: flex; align-items: center; gap: 12px; }
+.panel-left { display: flex; gap: 15px; }
-.search-box { width: 200px; }
+.search-box { width: 220px; }
-.date-picker { width: 240px !important; }
 
-/* 任务行核心样式 */
+/* 任务行卡片设计 */
-.task-list { min-height: 400px; }
 .task-row {
   background: #fff;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
-  border-radius: 6px;
+  padding: 4px 15px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
-  padding: 12px 20px;
+  transition: all 0.3s;
-  transition: all 0.2s;
+  border-left: 5px solid #dcdfe6;
-  border: 1px solid transparent;
-}
-.status-paused {
-  background: #f3f4f6;
 }
 .task-row:hover {
-  border-color: #cbd5e1;
+  transform: translateY(-2px);
-  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
 }
+.task-row.is-active { border-left-color: #409eff; }
+.task-row.is-paused { background: #fbfbfc; border-left-color: #909399; opacity: 0.9; }
 
-/* 列定义 */
+/* 1. 基础信息列 */
-.col-base { flex: 1.5; display: flex; align-items: center; gap: 15px; }
+.col-base { flex: 1.5; display: flex; align-items: flex-start; gap: 15px; }
-.col-metrics { flex: 2; display: flex; justify-content: space-around; border-left: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; }
+.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #909399; margin-top: 6px; }
-.col-timeline { flex: 1.1; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; }
+.is-active .status-dot { background: #13ce66; box-shadow: 0 0 8px #13ce66; animation: pulse 2s infinite; }
-.col-action { flex:1.8; display: flex; align-items: center; gap: 15px; }
 
-/* 状态点 */
+.task-id { font-family: monospace; color: #909399; font-size: 12px; margin-right: 8px; }
-.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; position: relative; }
+.task-name { font-size: 14px; font-weight: bold; color: #303133; }
-.status-dot { width: 10px; height: 10px; }
+.task-meta { margin-top: 6px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #909399; }
-.status-running .status-dot { background: #3b82f6; }
+
-.status-running .status-dot::after {
+/* 2. 指标展示列 */
-  content: ''; position: absolute; width: 100%; height: 100%; background: inherit; 
+.col-metrics { flex: 1.2; display: flex; align-items: center; justify-content: space-around; }
-  border-radius: 50%; animation: pulse 1.5s infinite;
+.metric-block { text-align: center; }
+.m-label { font-size: 12px; color: #909399; display: block; margin-bottom: 4px; }
+.m-value { font-size: 18px; font-weight: 600; color: #606266; }
+.m-value small { font-weight: normal; font-size: 12px; color: #888; }
+.expert-count { color: #006699; font-size: 16px; } /* 专家数高亮 */
+.divider { width: 1px; height: 35px; background: #ebeef5; }
+
+/* 3. 进度条列 */
+.col-progress { flex: 1.2; padding: 0 30px; }
+.prog-text { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; color: #606266; }
+.percent { font-weight: bold; color: #409eff; }
+
+/* 4. 操作列 */
+.col-action { flex: 1.1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
+.switch-wrapper {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-right: 6px;
+  transform: translateX(-6px);
 }
-.status-done .status-dot { background: #10b981; }
+.state-text { font-size: 11px; font-weight: bold; }
-.status-paused .status-dot { background: #ef4444; }
+.state-text.running { color: #13ce66; }
-.status-error .status-dot { background: #ef4444; }
+.state-text.paused { color: #909399; }
 
-/* 文字样式 */
+/* 分页 */
-.task-id { font-family: monospace; color: #94a3b8; font-size: 12px; display: block; }
+.pagination-container { margin-top: 25px; text-align: right; }
-.task-name { font-weight: 600; font-size: 14px; color: #1e293b; }
-
-.metric-item { text-align: center; }
-.m-label { font-size: 11px; color: #94a3b8; display: block; margin-bottom: 2px; }
-.m-value { font-size: 16px; font-weight: bold; color: #475569; }
-.m-value.mini-text { font-size: 12px; font-weight: normal; }
-.m-value.expert-num { color: #006699; }
-.success-text { color: #10b981; }
-.danger { color: #ef4444; }
-
-/* 时间线样式 */
-.time-block { display: flex; align-items: center; gap: 10px; color: #64748b; font-size: 12px; }
-.time-block i { font-size: 16px; }
-.time-detail span { display: block; line-height: 1.4; }
-.duration-tag { background: #f1f5f9; padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #475569; }
-
-/* 进度与分页 */
-.prog-box { flex: 1; }
-.prog-num { font-size: 12px; font-weight: bold; display: block; text-align: right; margin-bottom: 4px; min-width: 56px; }
-.pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; padding: 10px; }
-
-.btn-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  flex-shrink: 0;
-}
-/* 单次抓取按钮单独线框（与右侧启停区分） */
-.crawl-once-frame {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 10px;
-  border: 1px solid #006699;
-  border-radius: 6px;
-  background: #fff;
-  line-height: 1;
-  box-sizing: border-box;
-}
-.crawl-once-frame .op-run-once {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.btn-group .el-button.op-pause,
-.btn-group .el-button.op-pause i { color: #fc4d4d !important; }
-.btn-group .el-button.op-resume,
-.btn-group .el-button.op-resume i { color: #67c23a !important; }
-.btn-group .el-button.op-restart,
-.btn-group .el-button.op-restart i { color: #409eff !important; }
-.btn-group .el-button.op-run-once,
-.btn-group .el-button.op-run-once i { color: #006699 !important; }
-.btn-group .el-button {
-  font-size: 20px;
-  padding: 6px;
-}
-.btn-group .el-button.op-run-once {
-  font-size: 13px;
-  padding: 4px 6px;
-}
-.btn-group .el-button.toggle-btn {
-  font-size: 13px;
-  padding: 4px 6px;
-}
 
 @keyframes pulse {
-  0% { transform: scale(1); opacity: 0.8; }
+  0% { opacity: 1; }
-  100% { transform: scale(2.5); opacity: 0; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
 }
 </style>