nuxt-app/app/pages/agent-documents/index.vue

<script setup lang="ts">
import { request } from '~/utils/http/factory'

definePageMeta({ layout: 'home' })

const { $toast } = useNuxtApp()
const { loggedIn } = useAuthSession()
const router = useRouter()

interface AgentDocumentItem {
  id: number
  title: string
  type: 'memory' | 'document'
  summary: string | null
  tags: string[]
  createdAt: string
  updatedAt: string
}

interface ListResult {
  items: AgentDocumentItem[]
  total: number
  page: number
  pageSize: number
  hasMore: boolean
}

const documents = ref<AgentDocumentItem[]>([])
const loading = ref(true)
const total = ref(0)
const page = ref(1)
const pageSize = 12
const hasMore = ref(false)
const typeFilter = ref<'memory' | 'document' | ''>('')
const searchQuery = ref('')

async function fetchDocuments() {
  loading.value = true
  try {
    const params = new URLSearchParams()
    params.set('page', String(page.value))
    params.set('pageSize', String(pageSize))
    if (typeFilter.value) params.set('type', typeFilter.value)
    if (searchQuery.value) params.set('keyword', searchQuery.value)

    const raw = await request<{ code: number; data: ListResult }>(
      `/api/agent-documents?${params.toString()}`,
    )
    documents.value = raw.data.items
    total.value = raw.data.total
    hasMore.value = raw.data.hasMore
  } catch {
    $toast.error('文档加载失败')
  } finally {
    loading.value = false
  }
}

function goDetail(id: number) {
  router.push(`/agent-documents/${id}`)
}

function onPageChange(dir: -1 | 1) {
  const np = page.value + dir
  if (np < 1) return
  page.value = np
  fetchDocuments()
}

watch(typeFilter, () => {
  page.value = 1
  fetchDocuments()
})

let searchTimer: ReturnType<typeof setTimeout> | null = null
function onSearchInput() {
  if (searchTimer) clearTimeout(searchTimer)
  searchTimer = setTimeout(() => {
    page.value = 1
    fetchDocuments()
  }, 400)
}

onMounted(() => {
  fetchDocuments()
})
</script>

<template>
  <div class="agent-documents-page">
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">Agent 文档</h1>
        <span class="page-count">{{ total }} 篇</span>
      </div>
      <div class="header-right">
        <div class="filter-tabs">
          <button
            class="filter-tab"
            :class="{ active: typeFilter === '' }"
            @click="typeFilter = ''"
          >
            全部
          </button>
          <button
            class="filter-tab"
            :class="{ active: typeFilter === 'document' }"
            @click="typeFilter = 'document'"
          >
            文档
          </button>
          <button
            class="filter-tab"
            :class="{ active: typeFilter === 'memory' }"
            @click="typeFilter = 'memory'"
          >
            记忆
          </button>
        </div>
        <div class="search-box">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索文档…"
            class="search-input"
            @input="onSearchInput"
          />
        </div>
      </div>
    </div>

    <div v-if="loading" class="loading-state">
      <p class="loading-text">加载中…</p>
    </div>

    <div v-else-if="documents.length === 0" class="empty-state">
      <p class="empty-text">暂无文档</p>
      <p class="empty-hint">Agent 创建的文档会显示在这里</p>
    </div>

    <div v-else class="document-list">
      <article
        v-for="item in documents"
        :key="item.id"
        class="document-card"
        @click="goDetail(item.id)"
      >
        <div class="card-body">
          <div class="card-meta">
            <span class="type-badge" :class="item.type">
              {{ item.type === 'document' ? '文档' : '记忆' }}
            </span>
            <span class="card-date">{{ new Date(item.updatedAt).toLocaleDateString('zh-CN') }}</span>
            <span v-if="item.tags && item.tags.length > 0" class="card-tags">
              <span v-for="tag in item.tags" :key="tag" class="tag-chip">{{ tag }}</span>
            </span>
          </div>
          <h2 class="card-title">{{ item.title }}</h2>
          <p v-if="item.summary" class="card-summary">{{ item.summary }}</p>
        </div>
      </article>
    </div>

    <div v-if="total > pageSize" class="pagination">
      <button
        class="page-btn"
        :disabled="page <= 1"
        @click="onPageChange(-1)"
      >
        上一页
      </button>
      <span class="page-info">{{ page }} / {{ Math.ceil(total / pageSize) }}</span>
      <button
        class="page-btn"
        :disabled="!hasMore"
        @click="onPageChange(1)"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<style scoped>
.agent-documents-page {
  padding: 32px 0 64px;
  flex: 1;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-title {
  font-family: var(--font-serif, 'Noto Serif SC', serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-ink, #141413);
  margin: 0;
}

.page-count {
  font-size: 14px;
  color: var(--color-muted, #6c6a64);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-tabs {
  display: flex;
  gap: 4px;
  background: #efe9de;
  border-radius: 8px;
  padding: 3px;
}

.filter-tab {
  padding: 5px 14px;
  border: none;
  background: none;
  font-size: 13px;
  color: #6c6a64;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-tab.active {
  background: #fff;
  color: #141413;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.search-box {
  position: relative;
}

.search-input {
  padding: 7px 14px;
  border: 1px solid #e6dfd8;
  border-radius: 8px;
  font-size: 13px;
  color: #3d3d3a;
  background: #faf9f5;
  outline: none;
  width: 180px;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #cc785c;
}

.search-input::placeholder {
  color: #b8b2a6;
}

.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
  gap: 8px;
}

.loading-text,
.empty-text {
  font-size: 15px;
  color: #6c6a64;
}

.empty-hint {
  font-size: 13px;
  color: #b8b2a6;
}

.document-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e6dfd8;
  border-radius: 12px;
  overflow: hidden;
}

.document-card {
  background: #faf9f5;
  padding: 20px 24px;
  cursor: pointer;
  transition: background 0.15s;
}

.document-card:hover {
  background: #f5f0e8;
}

.card-body {
  min-width: 0;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.type-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.type-badge.document {
  background: #d4edda;
  color: #2d6a4f;
}

.type-badge.memory {
  background: #d1e4f0;
  color: #1a5276;
}

.card-date {
  font-size: 12px;
  color: #b8b2a6;
}

.card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tag-chip {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #efe9de;
  color: #8b7e6a;
}

.card-title {
  font-size: 18px;
  font-weight: 500;
  color: #141413;
  margin: 0 0 6px;
  line-height: 1.4;
}

.card-summary {
  font-size: 14px;
  color: #6c6a64;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.page-btn {
  padding: 6px 16px;
  border: 1px solid #e6dfd8;
  border-radius: 6px;
  background: #faf9f5;
  font-size: 13px;
  color: #3d3d3a;
  cursor: pointer;
  transition: all 0.15s;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-btn:hover:not(:disabled) {
  background: #efe9de;
}

.page-info {
  font-size: 13px;
  color: #6c6a64;
}

@media (max-width: 768px) {
  .agent-documents-page {
    padding: 20px 16px 48px;
  }

  .page-header {
    flex-direction: column;
  }

  .header-right {
    width: 100%;
  }

  .search-input {
    width: 120px;
  }
}
</style>