template-nuxt4/app/pages/admin/applications/expert.vue

<template>
  <div class="admin-applications-expert">
    <!-- 复用专家审核，这里是专家申请管理入口 -->
    <div class="page-header">
      <h3>专家申请管理</h3>
      <a-space>
        <a-button type="primary" @click="navigateTo('/admin/experts/review')">前往审核</a-button>
        <a-button @click="loadData">刷新</a-button>
      </a-space>
    </div>

    <div class="stats-row">
      <div class="stat-item blue">
        <div class="stat-num">{{ stats.total }}</div>
        <div class="stat-label">总申请</div>
      </div>
      <div class="stat-item orange">
        <div class="stat-num">{{ stats.pending }}</div>
        <div class="stat-label">待审核</div>
      </div>
      <div class="stat-item green">
        <div class="stat-num">{{ stats.approved }}</div>
        <div class="stat-label">已通过</div>
      </div>
      <div class="stat-item red">
        <div class="stat-num">{{ stats.rejected }}</div>
        <div class="stat-label">已拒绝</div>
      </div>
    </div>

    <!-- 申请材料模板下载 -->
    <div class="template-card">
      <h4>申请材料模板</h4>
      <p>以下为专家申请所需材料的模板文件，请申请人按要求填写并提交。</p>
      <div class="template-list">
        <div class="template-item">
          <span class="template-icon">📄</span>
          <span class="template-name">专家申请表（个人签字）</span>
          <a-button size="small" type="primary">下载模板</a-button>
        </div>
        <div class="template-item">
          <span class="template-icon">📋</span>
          <span class="template-name">专家申请说明文件</span>
          <a-button size="small" type="primary">下载模板</a-button>
        </div>
      </div>
    </div>

    <!-- 近期申请列表 -->
    <div class="table-card">
      <div class="table-header">
        <span class="table-title">近期申请记录</span>
        <a-button size="small" @click="navigateTo('/admin/experts/review')">查看全部并审核 →</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="recentApplications"
        :loading="loading"
        :pagination="false"
        row-key="id"
        size="middle"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-button size="small" @click="navigateTo('/admin/experts/review')">审核</a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({ layout: 'admin' })
useHead({ title: '专家申请管理' })

const loading = ref(false)

const stats = reactive({ total: 12, pending: 3, approved: 8, rejected: 1 })

const columns = [
  { title: '申请人', dataIndex: 'name', key: 'name' },
  { title: '单位', dataIndex: 'organization', key: 'organization' },
  { title: '研究领域', dataIndex: 'researchArea', key: 'researchArea' },
  { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' },
  { title: '状态', key: 'status', width: 100 },
  { title: '操作', key: 'action', width: 80 },
]

const recentApplications = ref([
  { id: 1, name: '张某某', organization: '广西大学', researchArea: '区域经济', applyTime: '2024-12-18', status: 'pending' },
  { id: 2, name: '李某某', organization: '广西社科院', researchArea: '产业政策', applyTime: '2024-12-17', status: 'pending' },
  { id: 3, name: '王某某', organization: '广西师范大学', researchArea: '金融经济', applyTime: '2024-12-15', status: 'approved' },
])

function getStatusColor(status: string) {
  const map: Record<string, string> = { pending: 'orange', approved: 'green', rejected: 'red' }
  return map[status] || 'default'
}

function getStatusText(status: string) {
  const map: Record<string, string> = { pending: '待审核', approved: '已通过', rejected: '已拒绝' }
  return map[status] || status
}

async function loadData() {
  // TODO: 接入API
}
</script>

<style scoped>
.admin-applications-expert { display: flex; flex-direction: column; gap: 16px; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 10px;
  padding: 14px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.page-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.stat-item.blue { border-top: 3px solid #3b82f6; }
.stat-item.orange { border-top: 3px solid #f97316; }
.stat-item.green { border-top: 3px solid #22c55e; }
.stat-item.red { border-top: 3px solid #ef4444; }

.stat-num {
  font-size: 32px;
  font-weight: 800;
  color: #1f2937;
}

.stat-label {
  font-size: 13px;
  color: #9ca3af;
  margin-top: 4px;
}

.template-card, .table-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.template-card h4, .table-header {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.table-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.template-card p {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px;
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 8px;
}

.template-icon { font-size: 16px; }

.template-name {
  flex: 1;
  font-size: 14px;
  color: #374151;
}
</style>