企业级黑词分析组件：双面板交互与进度监控实现

表格与分页

表格展示黑词详情，包含序号、黑词内容及操作列。操作列根据业务逻辑区分白名单、私有词库和公有词库的入口。

<el-table :data="privateWords" stripe v-loading="tableLoading">
  <el-table-column prop="index" label="序号"></el-table-column>
  <el-table-column prop="word" label="黑词"></el-table-column>
  <el-table-column label="操作">
    <template #default="scope">
      <el-link type="primary" size="small" @click="handleTopicMining(scope.row)">白名单</el-link>
      <el-link type="primary" size="small" @click="handleResultView(scope.row)">私有词库</el-link>
      <el-link type="primary" size="small" @click="handleResultView(scope.row)">公有词库</el-link>
    </template>
  </el-table-column>
</el-table>

分页组件支持调整每页显示条数，布局包含总数、页码跳转等常用项。

右侧面板：可疑对话组分析

聊天类型切换

顶部提供私聊和群聊的选项卡切换，动态高亮当前选中的类型。

<div class="chat-type-switch">
  <div :class="['btn_item', { activeBtn: activeChatType === 'private' }]" @click="selectBtn('private')">
    私聊 (123)
  </div>
  <div :class="['btn_item', 'btn_right', { activeBtn: activeChatType === 'group' }]" @click="selectBtn('group')">
    群聊 (321)
  </div>
</div>

卡片设计与进度监控

每个对话组以卡片形式展示，包含账号信息、头像、进度条及状态标签。进度条的状态映射是关键，需根据后端返回的状态（已完成、进行中、待挖掘）动态调整颜色。

// 进度条状态映射
getProgressStatus(status) {
  const statusMap = { '已完成': 'success', '进行中': 'warning', '待挖掘': 'info' };
  return statusMap[status] || 'info';
},
// 状态文本样式类
getStatusClass(status) {
  const classMap = { '已完成': 'status-success', '进行中': 'status-warning', '待挖掘': 'status-info' };
  return classMap[status] || '';
}

卡片底部集成了话题挖掘和结果查看按钮，这两个操作受状态严格控制：只有'待挖掘'状态可挖掘，'已完成'状态才可查看结果。

数据模拟与逻辑实现

在实际开发中，数据将来自后端接口，这里先给出数据结构示例以便理解字段含义。

data() {
  return {
    privateWords: [
      { index: 1, word: '捕捉鸟类', type: 'private', checked: true, progress: 20, status: '进行中', time: '2026-1-15 22:00:00' }
    ],
    dialogGroups: [
      { account1: { id: 1, name: '花花' }, account2: { id: 2, name: 'lilii' }, progress: 0, status: '待挖掘', time: '2026-1-15 22:00:00' }
    ]
  }
}

搜索与分页逻辑相对标准，重点在于过滤后的数据加载。对话框管理则负责控制可见性及初始化状态。

openDialog() {
  this.dialogVisible = true;
  this.initDialogData();
},
handleTopicMining(row) {
  if (row.status !== '待挖掘') {
    this.$message.warning('当前状态无法进行话题挖掘');
    return;
  }
  this.startTopicMining(row);
}

样式细节

布局采用 Flexbox 实现左右分栏，左侧固定宽度，右侧自适应。面板头部使用渐变背景条增强视觉层次，选中状态的卡片会有浅蓝色边框和高亮背景，提升交互反馈。

.black-word-analysis {
  display: flex;
  gap: 20px;
  height: 100%;
  overflow: hidden;
}
.left-panel {
  width: 630px;
  background: #ffffff;
  box-shadow: 0px 0px 22px 0px rgba(159, 159, 159, 0.16);
  border-radius: 8px;
}
.table_item_active {
  background: rgba(41, 133, 247, 0.06);
  border: 1px solid rgba(41, 133, 247, 0.2);
}

总结

这套黑词分析系统前端实现展示了如何设计一个高效、直观的数据分析界面。关键亮点包括双面板并行设计以提高效率，进度监控便于任务管理，以及根据状态动态控制操作权限的智能交互。清晰的视觉层次和即时反馈让安全分析人员能更专注于业务本身。