saasadminui/src/views/lobster/channel-plugin/index.vue

<template>
  <div class="app-container channel-plugin-page">
    <div class="page-header">
      <h3>渠道插件管理</h3>
      <span class="page-desc">龙虾引擎即插即用：启用渠道 + 填写API凭证即可接入新的IM平台</span>
    </div>
    <el-table :data="plugins" v-loading="loading" border stripe size="small">
      <el-table-column prop="channelType" label="渠道编码" width="100" />
      <el-table-column label="渠道名称" width="140">
        <template #default="{row}">
          <i :class="row.icon" style="margin-right:4px" /> {{ row.displayName }}
        </template>
      </el-table-column>
      <el-table-column label="SDK状态" width="100">
        <template #default="{row}">
          <el-tag :type="row.hasMessageChannel ? 'success' : 'warning'" size="small">
            {{ row.hasMessageChannel ? '已接入' : '待接入' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="启用" width="80">
        <template #default="{row}">
          <el-switch :value="row.enabled === 1 || row.enabled === true"
            @change="v => toggle(row, v)" :disabled="!row.hasMessageChannel" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="凭证配置" min-width="200">
        <template #default="{row}">
          <template v-if="row.channelType === 'QW' || row.channelType === 'WX' || row.channelType === 'IM'">
            <el-tag type="info" size="small">内置免配置</el-tag>
          </template>
          <template v-else>
            <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
              <template v-if="row.channelType === 'WHATSAPP'">
                <el-input v-model="waConfig.phoneNumberId" placeholder="Phone Number ID" size="mini" style="width:150px" />
                <el-input v-model="waConfig.token" placeholder="Token" size="mini" style="width:150px" type="password" show-password />
              </template>
              <template v-else>
                <el-input v-model="otherConfig[row.channelType]" placeholder="API Key / Webhook URL" size="mini" style="width:200px" />
              </template>
              <el-button size="mini" type="primary" @click="saveConfig(row)">保存</el-button>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="测试" width="100">
        <template #default="{row}">
          <el-button size="mini" :type="row.hasMessageChannel && (row.enabled===1||row.enabled===true) ? 'success' : 'info'"
            @click="test(row)" :disabled="!(row.enabled===1||row.enabled===true)">测试连接</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'ChannelPlugin',
  data() {
    return {
      plugins: [],
      loading: false,
      waConfig: { phoneNumberId: '', token: '' },
      otherConfig: {}
    }
  },
  mounted() { this.loadPlugins() },
  methods: {
    loadPlugins() {
      this.loading = true
      request({ url: '/workflow/lobster/channel-plugin/list', method: 'get' }).then(res => {
        this.plugins = res.data || []
      }).finally(() => { this.loading = false })
    },
    toggle(row, v) {
      request({ url: `/workflow/lobster/channel-plugin/enable/${row.channelType}`, method: 'post', params: { enabled: v } }).then(() => {
        this.$message.success(v ? `${row.displayName} 已启用` : `${row.displayName} 已禁用`)
        row.enabled = v ? 1 : 0
      })
    },
    saveConfig(row) {
      let config = {}
      if (row.channelType === 'WHATSAPP') config = { ...this.waConfig }
      else config = { apiKey: this.otherConfig[row.channelType] }
      request({ url: `/workflow/lobster/channel-plugin/config/${row.channelType}`, method: 'post', data: config }).then(() => {
        this.$message.success('配置已保存')
      })
    },
    test(row) {
      request({ url: `/workflow/lobster/channel-plugin/test/${row.channelType}`, method: 'post' }).then(res => {
        const r = res.data
        this.$message({ type: r.ok ? 'success' : 'error', message: r.reason || (r.ok ? '连接正常' : '连接失败') })
      })
    }
  }
}
</script>

<style scoped>
.channel-plugin-page { padding: 0; }
.page-header { margin-bottom: 16px; }
.page-header h3 { margin: 0 0 4px; }
.page-desc { font-size: 12px; color: #999; }
</style>