初始化

mokee-gateway-web/backup-on-demand/views-20260612-2236/admin/log/OpenTokenLogList.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="tokenlog-page">
+    <div class="page-toolbar">
+      <el-select v-model="filterConsumed" placeholder="消费状态" clearable style="width:140px" @change="fetchData">
+        <el-option label="未消费" :value="0" />
+        <el-option label="已消费" :value="1" />
+      </el-select>
+      <el-button @click="fetchData" :icon="RefreshRight">刷新</el-button>
+    </div>
+
+    <el-table :data="list" v-loading="loading" stripe>
+      <el-table-column prop="systemCode" label="系统编码" width="120" />
+      <el-table-column prop="tokenPreview" label="Token" min-width="220" show-overflow-tooltip />
+      <el-table-column label="消费状态" width="90" align="center">
+        <template #default="{ row }">
+          <el-tag size="small" :type="row.consumed === 1 ? 'success' : 'warning'">
+            {{ row.consumed === 1 ? '已消费' : '未消费' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="acquiredAt" label="获取时间" width="170" />
+      <el-table-column prop="consumedAt" label="消费时间" width="170">
+        <template #default="{ row }">{{ row.consumedAt || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="consumeApi" label="消费接口" width="220" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.consumeApi || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="consumeIp" label="消费IP" width="140">
+        <template #default="{ row }">{{ row.consumeIp || '-' }}</template>
+      </el-table-column>
+    </el-table>
+
+    <div class="page-footer" v-if="total > 0">
+      <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total"
+        layout="prev,pager,next" @current-change="fetchData" small />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { RefreshRight } from '@element-plus/icons-vue'
+import request from '@/utils/request'
+
+interface TokenLog {
+  id: string; systemCode: string; tokenPreview: string
+  consumed: number; acquiredAt: string; consumedAt: string
+  consumeApi: string; consumeIp: string
+}
+
+const loading = ref(false)
+const list = ref<TokenLog[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(15)
+const filterConsumed = ref<number | null>(null)
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await request.post('/zgapi/v1/admin/email/token-log/page', {
+      page: page.value, pageSize: pageSize.value,
+      consumed: filterConsumed.value !== null ? filterConsumed.value : undefined,
+    })
+    list.value = res.data?.records || []
+    total.value = res.data?.total || 0
+  } catch {} finally { loading.value = false }
+}
+
+onMounted(() => fetchData())
+</script>
+
+<style scoped>
+.tokenlog-page { max-width: 1100px; }
+.page-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
+.page-footer { display:flex; justify-content:center; margin-top:24px; }
+
+@media (max-width: 768px) {
+  .page-toolbar { flex-direction: column; gap: 10px; }
+  .page-toolbar .el-select { width: 100% !important; }
+}
+</style>