LogTable 日志表格组件

支持会话日志展示、分页、时间轴链路追踪的表格组件。

基础用法

会话ID	会话标题	消息数	状态	最新消息时间	操作
sess-001	用户登录流程	5	成功	2024-01-15 10:30
sess-002	数据处理任务	12	运行中	2024-01-15 11:00
sess-003	API 调用失败	3	失败	2024-01-15 11:30

共 50 条

第 1 页

10条/页20条/页50条/页100条/页

<template>
  <x-log-table
    :data="logData"
    :pagination="pagination"
    :show-pagination="true"
    @page-change="handlePageChange"
    @size-change="handleSizeChange"
    @view-detail="handleViewDetail"
    @view-trace="handleViewTrace"
  />
</template>

<script setup>
import { ref } from 'vue'
import { LogTable } from '@xto/business'

const logData = ref([
  {
    id: '1',
    sessionId: 'sess-001',
    title: '用户登录流程',
    messageCount: 5,
    status: 'success',
    latestMessageTime: '2024-01-15 10:30',
    creator: '张三'
  },
  {
    id: '2',
    sessionId: 'sess-002',
    title: '数据处理任务',
    messageCount: 12,
    status: 'running',
    latestMessageTime: '2024-01-15 11:00'
  },
  {
    id: '3',
    sessionId: 'sess-003',
    title: 'API 调用失败',
    messageCount: 3,
    status: 'error',
    latestMessageTime: '2024-01-15 11:30'
  }
])

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 50
})

const handlePageChange = (page) => {
  pagination.value.current = page
}

const handleSizeChange = (size) => {
  pagination.value.pageSize = size
}

const handleViewDetail = (record) => {
  console.log('查看详情:', record)
}

const handleViewTrace = (record) => {
  console.log('查看链路追踪:', record)
}
</script>

加载状态

会话ID	会话标题	消息数	状态	最新消息时间	操作
加载中...

<template>
  <x-log-table :loading="true" />
</template>

空状态

会话ID	会话标题	消息数	状态	最新消息时间	操作
暂无日志记录

<template>
  <x-log-table :data="[]" />
</template>

隐藏分页

<template>
  <x-log-table :data="logData" :show-pagination="false" />
</template>

API

Props

属性	说明	类型	默认值
data	日志数据	LogRecord[]	[]
loading	是否加载中	boolean	false
pagination	分页配置	PaginationConfig	undefined
showPagination	是否显示分页	boolean	true

LogRecord

属性	说明	类型
id	记录唯一标识	string
sessionId	会话 ID	string
title	会话标题	string
messageCount	消息数量	number
status	状态	'success' | 'error' | 'running'
latestMessageTime	最新消息时间	string
creator	创建者	string
applicationId	应用 ID	string

PaginationConfig

属性	说明	类型
current	当前页码	number
pageSize	每页条数	number
total	总条数	number

Events

事件名	说明
page-change	页码变化时触发
size-change	每页条数变化时触发
view-detail	点击查看详情时触发
view-trace	点击链路追踪时触发