<script setup lang="ts">
import { onMounted, shallowRef } from 'vue'
import { fetchLogs } from '@/api/admin'

const logs = shallowRef<Array<Record<string, unknown>>>([])

async function load() {
  logs.value = (await fetchLogs()).data.items
}

onMounted(load)
</script>

<template>
  <section class="panel p-5">
    <div class="toolbar mb-4">
      <div>
        <h1 class="page-title">操作日志</h1>
        <p class="muted text-sm mt-1">追踪登录、导入、删除、权限与系统配置变更。</p>
      </div>
    </div>
    <ElTable :data="logs" row-key="id">
      <ElTableColumn prop="action" label="动作" width="220" />
      <ElTableColumn prop="target_type" label="对象" min-width="180" show-overflow-tooltip />
      <ElTableColumn prop="target_id" label="对象ID" width="100" />
      <ElTableColumn prop="ip" label="IP" width="150" />
      <ElTableColumn prop="created_at" label="时间" width="180" />
    </ElTable>
  </section>
</template>
