Refactor: 优化开放应用 Webhook 配置与日志管理，新增事件订阅选择、事件标签展示、日志分页及详情查看能力。

shaofan
1 parent 57265fcd
Showing 1 changed file with 187 additions and 19 deletions
src/views/open/OpenAppList.vue
@@ -19,6 +19,17 @@
           <template v-if="column.key === 'cityId'">
             {{ getCityName(record.cityId) }}
           </template>
+          <template v-if="column.key === 'webhookEvents'">
+            <template v-if="parseWebhookEvents(record.webhookEvents).includes('*')">
+              <a-tag color="blue">全部事件</a-tag>
+            </template>
+            <template v-else-if="parseWebhookEvents(record.webhookEvents).length">
+              <a-tag v-for="event in parseWebhookEvents(record.webhookEvents)" :key="event">
+                {{ getEventLabel(event) }}
+              </a-tag>
+            </template>
+            <span v-else class="muted-text">未订阅</span>
+          </template>
           <template v-if="column.key === 'action'">
             <a-space>
               <a @click="handleResetSecret(record)">重置密钥</a>
@@ -65,57 +76,107 @@
           <a-form-item label="回调地址">
             <a-input v-model:value="webhookForm.webhookUrl" placeholder="https://your-server.com/webhook" />
           </a-form-item>
-          <a-form-item label="订阅事件（JSON数组）">
-            <a-textarea
+          <a-form-item label="订阅事件">
+            <a-checkbox v-model:checked="webhookForm.subscribeAll">订阅全部事件</a-checkbox>
+            <a-checkbox-group
               v-model:value="webhookForm.webhookEvents"
-              placeholder='["order.paid","order.completed","order.cancelled"]'
-              :rows="4"
-            />
+              :disabled="webhookForm.subscribeAll"
+              class="webhook-event-group"
+            >
+              <div v-for="item in webhookEventOptions" :key="item.value" class="webhook-event-option">
+                <a-checkbox :value="item.value">
+                  <strong>{{ item.label }}</strong>
+                  <a-tag class="event-code">{{ item.value }}</a-tag>
+                  <div class="event-desc">{{ item.description }}</div>
+                </a-checkbox>
+              </div>
+            </a-checkbox-group>
           </a-form-item>
-          <a-alert message="支持事件：order.paid / order.accepted / order.completed / order.cancelled / order.refund" type="info" show-icon />
+          <a-alert message="未选择事件时不会主动推送；订单级 callbackUrl 仍会复用这里的订阅事件配置。" type="info" show-icon />
         </a-form>
       </div>
     </a-modal>
  
-    <a-modal v-model:open="logsVisible" title="Webhook推送日志" :footer="null" width="800px">
+    <a-modal v-model:open="logsVisible" title="Webhook推送日志" :footer="null" width="1000px">
       <div class="soft-page-stack">
         <div class="soft-note-card">
           <strong>推送日志</strong>
           <p>失败记录支持手动重试，便于排查接入方回调地址或签名处理异常。</p>
         </div>
-        <a-table :dataSource="logs" :columns="logColumns" rowKey="id" size="small" :pagination="false">
+        <a-table :dataSource="logs" :columns="logColumns" :loading="logLoading" rowKey="id" size="small" :pagination="false">
           <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'event'">
+              {{ getEventLabel(record.event) }}
+              <div class="muted-text">{{ record.event }}</div>
+            </template>
+            <template v-if="column.key === 'url'">
+              <a-typography-text :ellipsis="{ tooltip: record.url }">{{ record.url }}</a-typography-text>
+            </template>
             <template v-if="column.key === 'status'">
               <a-tag :color="record.status === 1 ? 'green' : 'red'">
                 {{ record.status === 1 ? '成功' : '失败' }}
               </a-tag>
             </template>
+            <template v-if="column.key === 'createTime'">
+              {{ formatTime(record.createTime) }}
+            </template>
             <template v-if="column.key === 'action'">
-              <a v-if="record.status === 0" @click="retryLog(record.id)">重试</a>
+              <a-space>
+                <a @click="showLogDetail(record, 'payload')">Payload</a>
+                <a @click="showLogDetail(record, 'response')">响应</a>
+                <a v-if="record.status === 0" @click="retryLog(record.id)">重试</a>
+              </a-space>
             </template>
           </template>
         </a-table>
+        <div class="log-pagination">
+          <a-space>
+            <a-button :disabled="logPage <= 1 || logLoading" @click="loadLogs(logPage - 1)">上一页</a-button>
+            <span>第 {{ logPage }} 页</span>
+            <a-button :disabled="logs.length < 20 || logLoading" @click="loadLogs(logPage + 1)">下一页</a-button>
+          </a-space>
+        </div>
       </div>
     </a-modal>
   </div>
 </template>
  
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { h, ref, reactive, onMounted } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import { openApi } from '@/api'
 import { useRoleCityList } from '@/composables/useRoleCityList'
  
+type WebhookEventOption = {
+  label: string
+  value: string
+  description: string
+}
+
+const defaultWebhookEventOptions: WebhookEventOption[] = [
+  { label: '订单创建', value: 'order.created', description: '外部系统推单成功，订单进入待接单' },
+  { label: '已派单', value: 'order.dispatched', description: '系统自动派单或后台指派骑手' },
+  { label: '骑手接单', value: 'order.accepted', description: '骑手主动抢单成功' },
+  { label: '骑手到店', value: 'order.arrived_shop', description: '骑手到达取货点' },
+  { label: '骑手取件', value: 'order.picking', description: '骑手取件并开始配送' },
+  { label: '订单完成', value: 'order.completed', description: '订单配送完成' },
+  { label: '订单取消', value: 'order.cancelled', description: '订单未接单前取消' },
+  { label: '订单转单', value: 'order.transferred', description: '转单审核通过，订单重新待接单' },
+]
+
 const loading = ref(false)
+const logLoading = ref(false)
 const saving = ref(false)
 const list = ref<any[]>([])
 const logs = ref<any[]>([])
+const logPage = ref(1)
 const addVisible = ref(false)
 const webhookVisible = ref(false)
 const logsVisible = ref(false)
 const currentAppId = ref(0)
 const addForm = reactive({ appName: '', cityId: undefined as number | undefined, remark: '' })
-const webhookForm = reactive({ webhookUrl: '', webhookEvents: '' })
+const webhookForm = reactive({ webhookUrl: '', webhookEvents: [] as string[], subscribeAll: false })
+const webhookEventOptions = ref<WebhookEventOption[]>(defaultWebhookEventOptions)
 const { cityList, loadCities, getCityName } = useRoleCityList()
  
 const columns = [
@@ -125,19 +186,64 @@ const columns = [
   { title: '租户', key: 'cityId' },
   { title: '状态', key: 'status' },
   { title: '回调地址', dataIndex: 'webhookUrl', ellipsis: true },
+  { title: '订阅事件', key: 'webhookEvents' },
   { title: '操作', key: 'action' },
 ]
  
 const logColumns = [
   { title: 'ID', dataIndex: 'id', width: 80 },
-  { title: '事件', dataIndex: 'event' },
+  { title: '事件', key: 'event' },
   { title: '业务ID', dataIndex: 'bizId' },
+  { title: 'URL', key: 'url', width: 220 },
   { title: '响应码', dataIndex: 'responseCode' },
   { title: '状态', key: 'status' },
   { title: '重试', dataIndex: 'retryCount' },
+  { title: '时间', key: 'createTime' },
   { title: '操作', key: 'action' },
 ]
  
+function parseWebhookEvents(raw?: string): string[] {
+  if (!raw) return []
+  try {
+    const events = JSON.parse(raw)
+    return Array.isArray(events) ? events.filter(item => typeof item === 'string') : []
+  } catch {
+    return []
+  }
+}
+
+function getEventLabel(event: string) {
+  if (event === '*') return '全部事件'
+  const option = webhookEventOptions.value.find(item => item.value === event)
+  return option ? option.label : event
+}
+
+function formatTime(epochSecond?: number) {
+  if (!epochSecond) return '-'
+  return new Date(epochSecond * 1000).toLocaleString()
+}
+
+function formatJsonText(value: unknown) {
+  if (!value) return ''
+  if (typeof value !== 'string') return String(value)
+  try {
+    return JSON.stringify(JSON.parse(value), null, 2)
+  } catch {
+    return value
+  }
+}
+
+async function loadWebhookEvents() {
+  try {
+    const res: any = await openApi.webhookEvents()
+    if (Array.isArray(res.data) && res.data.length) {
+      webhookEventOptions.value = res.data
+    }
+  } catch {
+    webhookEventOptions.value = defaultWebhookEventOptions
+  }
+}
+
 async function loadList() {
   loading.value = true
   try {
@@ -182,14 +288,17 @@ async function toggleStatus(record: any) {
 function openWebhook(record: any) {
   currentAppId.value = record.id
   webhookForm.webhookUrl = record.webhookUrl || ''
-  webhookForm.webhookEvents = record.webhookEvents || ''
+  const events = parseWebhookEvents(record.webhookEvents)
+  webhookForm.subscribeAll = events.includes('*')
+  webhookForm.webhookEvents = events.filter(event => event !== '*')
   webhookVisible.value = true
 }
  
 async function handleWebhookSave() {
+  const events = webhookForm.subscribeAll ? ['*'] : webhookForm.webhookEvents
   saving.value = true
   try {
-    await openApi.updateWebhook(currentAppId.value, webhookForm.webhookUrl, webhookForm.webhookEvents)
+    await openApi.updateWebhook(currentAppId.value, webhookForm.webhookUrl, JSON.stringify(events))
     message.success('保存成功')
     webhookVisible.value = false
     loadList()
@@ -198,17 +307,76 @@ async function handleWebhookSave() {
  
 async function openLogs(record: any) {
   currentAppId.value = record.id
-  const res: any = await openApi.webhookLogs(record.id)
-  logs.value = res.data
   logsVisible.value = true
+  await loadLogs(1)
+}
+
+async function loadLogs(page = 1) {
+  logLoading.value = true
+  try {
+    const res: any = await openApi.webhookLogs(currentAppId.value, page)
+    logs.value = Array.isArray(res.data) ? res.data : []
+    logPage.value = page
+  } finally { logLoading.value = false }
 }
  
 async function retryLog(logId: number) {
   await openApi.retryWebhook(logId)
   message.success('重试已触发')
-  const res: any = await openApi.webhookLogs(currentAppId.value)
-  logs.value = res.data
+  await loadLogs(logPage.value)
 }
  
-onMounted(() => { loadList(); loadCities() })
+function showLogDetail(record: any, type: 'payload' | 'response') {
+  const title = type === 'payload' ? 'Webhook Payload' : 'Webhook 响应内容'
+  const content = type === 'payload' ? formatJsonText(record.payload) : (record.responseBody || '')
+  Modal.info({
+    title,
+    width: 720,
+    content: h('pre', { class: 'webhook-log-detail' }, content || '-'),
+  })
+}
+
+onMounted(() => { loadWebhookEvents(); loadList(); loadCities() })
 </script>
+
+<style scoped>
+.muted-text {
+  color: #999;
+  font-size: 12px;
+}
+
+.webhook-event-group {
+  display: block;
+  margin-top: 12px;
+}
+
+.webhook-event-option {
+  margin-bottom: 8px;
+}
+
+.event-code {
+  margin-left: 8px;
+}
+
+.event-desc {
+  color: #999;
+  font-size: 12px;
+  margin-left: 24px;
+  margin-top: 2px;
+}
+
+.log-pagination {
+  display: flex;
+  justify-content: flex-end;
+}
+
+:global(.webhook-log-detail) {
+  max-height: 420px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: #f6f8fa;
+  border-radius: 6px;
+  padding: 12px;
+}
+</style>