urldb/web/components/Admin/TransferredList.vue

<template>
  <div class="space-y-4">
    <!-- 搜索和筛选 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <n-input
        v-model:value="searchQuery"
        placeholder="搜索已转存资源..."
        @keyup.enter="handleSearch"
        clearable
      >
        <template #prefix>
          <i class="fas fa-search"></i>
        </template>
      </n-input>
      
      <CategorySelector
        v-model="selectedCategory"
        placeholder="选择分类"
        clearable
      />
      
      <TagSelector
        v-model="selectedTag"
        placeholder="选择标签"
        clearable
      />
      
      <n-button type="primary" @click="handleSearch">
        <template #icon>
          <i class="fas fa-search"></i>
        </template>
        搜索
      </n-button>
    </div>

    <!-- 调试信息 -->
    <div class="text-sm text-gray-500 mb-2">
      数据数量: {{ resources.length }}, 总数: {{ total }}, 加载状态: {{ loading }}
    </div>

    <!-- 数据表格 -->
    <n-data-table
      :columns="columns"
      :data="resources"
      :loading="loading"
      :pagination="pagination"
      :remote="true"
      @update:page="handlePageChange"
      @update:page-size="handlePageSizeChange"
      :row-key="(row: any) => row.id"
      virtual-scroll
      max-height="500"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, h } from 'vue'
import { useResourceApi } from '~/composables/useApi'
import { useMessage } from 'naive-ui'

// 消息提示
const $message = useMessage()

// 数据状态
const loading = ref(false)
const resources = ref<any[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10000)

// 搜索条件
const searchQuery = ref('')
const selectedCategory = ref(null)
const selectedTag = ref(null)

// API实例
const resourceApi = useResourceApi()

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 10000,
  itemCount: 0,
  pageSizes: [10000, 20000, 50000, 100000],
  showSizePicker: true,
  showQuickJumper: true,
  prefix: ({ itemCount }: any) => `共 ${itemCount} 条`
})

// 表格列配置
const columns: any[] = [
  {
    title: 'ID',
    key: 'id',
    width: 60,
    fixed: 'left' as const
  },
  {
    title: '标题',
    key: 'title',
    width: 200,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '分类',
    key: 'category_name',
    width: 80
  },
  {
    title: '平台',
    key: 'pan_name',
    width: 80,
    render: (row: any) => {
      if (row.pan_id) {
        const platform = platformOptions.value.find((p: any) => p.value === row.pan_id)
        return platform?.label || '未知'
      }
      return '未知'
    }
  },
  {
    title: '转存链接',
    key: 'save_url',
    width: 200,
    ellipsis: {
      tooltip: true
    },
    render: (row: any) => {
      return h('a', {
        href: row.save_url,
        target: '_blank',
        class: 'text-green-500 hover:text-green-700'
      }, row.save_url.length > 30 ? row.save_url.substring(0, 30) + '...' : row.save_url)
    }
  },
  {
    title: '转存时间',
    key: 'updated_at',
    width: 130,
    render: (row: any) => {
      return new Date(row.updated_at).toLocaleDateString()
    }
  },
  {
    title: '操作',
    key: 'actions',
    width: 120,
    fixed: 'right',
    render: (row: any) => {
      return h('div', { class: 'flex space-x-2' }, [
        h('n-button', {
          size: 'small',
          type: 'primary',
          onClick: () => viewResource(row)
        }, { default: () => '查看' }),
        h('n-button', {
          size: 'small',
          type: 'info',
          onClick: () => copyLink(row.save_url)
        }, { default: () => '复制' })
      ])
    }
  }
]

// 平台选项
const platformOptions = ref([
  { label: '夸克网盘', value: 1 },
  { label: '百度网盘', value: 2 },
  { label: '阿里云盘', value: 3 },
  { label: '天翼云盘', value: 4 },
  { label: '迅雷云盘', value: 5 },
  { label: '123云盘', value: 6 },
  { label: '115网盘', value: 7 },
  { label: 'UC网盘', value: 8 }
])

// 获取已转存资源
const fetchTransferredResources = async () => {
  loading.value = true
  try {
    const params: any = {
      page: currentPage.value,
      page_size: pageSize.value,
      has_save_url: true // 筛选有转存链接的资源
    }

    if (searchQuery.value) {
      params.search = searchQuery.value
    }
    if (selectedCategory.value) {
      params.category_id = selectedCategory.value
    }

    console.log('请求参数:', params)
    const result = await resourceApi.getResources(params) as any
    console.log('已转存资源结果:', result)
    console.log('结果类型:', typeof result)
    console.log('结果结构:', Object.keys(result || {}))

    if (result && result.data) {
      console.log('使用 resources 格式，数量:', result.data.length)
      resources.value = result.data
      total.value = result.total || 0
      pagination.itemCount = result.total || 0
    } else if (Array.isArray(result)) {
      console.log('使用数组格式，数量:', result.length)
      resources.value = result
      total.value = result.length
      pagination.itemCount = result.length
    } else {
      console.log('未知格式，设置空数组')
      resources.value = []
      total.value = 0
      pagination.itemCount = 0
    }
    
    console.log('最终 resources.value:', resources.value)
    console.log('最终 total.value:', total.value)
    
    // 检查是否有资源没有 save_url
    const resourcesWithoutSaveUrl = resources.value.filter((r: any) => !r.save_url || r.save_url.trim() === '')
    if (resourcesWithoutSaveUrl.length > 0) {
      console.warn('发现没有 save_url 的资源:', resourcesWithoutSaveUrl.map((r: any) => ({ id: r.id, title: r.title, save_url: r.save_url })))
    }
  } catch (error) {
    console.error('获取已转存资源失败:', error)
    resources.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  pagination.page = 1
  fetchTransferredResources()
}

// 分页处理
const handlePageChange = (page: number) => {
  currentPage.value = page
  pagination.page = page
  fetchTransferredResources()
}

const handlePageSizeChange = (size: number) => {
  pageSize.value = size
  pagination.pageSize = size
  currentPage.value = 1
  pagination.page = 1
  fetchTransferredResources()
}

// 查看资源
const viewResource = (resource: any) => {
  // 这里可以打开资源详情模态框
  console.log('查看资源:', resource)
}

// 复制链接
const copyLink = async (url: string) => {
  try {
    await navigator.clipboard.writeText(url)
    $message.success('链接已复制到剪贴板')
  } catch (error) {
    console.error('复制失败:', error)
    $message.error('复制失败')
  }
}

// 初始化
onMounted(() => {
  fetchTransferredResources()
})
</script>