<template>
  <div class="kb-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>知识库列表</span>
          <el-button type="primary">上传文档</el-button>
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="文件名" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'completed' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="上传时间" />
        <el-table-column label="操作">
          <template #default>
            <el-button link type="primary">查看详情</el-button>
            <el-button link type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref([
  { name: '产品手册.pdf', status: 'completed', createTime: '2024-02-24 10:00:00' },
  { name: '技术文档.docx', status: 'processing', createTime: '2024-02-24 11:30:00' }
])
</script>

<style scoped>
.kb-container { padding: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
</style>
