zhouhui.jiang / test_cursor

<!-- 操作按钮区域 -->
<div class="action-section">
  <div class="action-buttons">
    <button @click="handleAdd" class="action-btn primary">✨ 新增</button>
    <button @click="handleBatchDelete" class="action-btn danger">🗑️ 删除</button>
  </div>
</div>

<!-- 数据表格 -->
<div class="table-section">
  <div class="table-header">
    <div class="table-controls">
      <button @click="handleTableSearch" class="control-btn" title="搜索">🔍</button>
      <button @click="handleTableRefresh" class="control-btn" title="刷新">🔄</button>
      <button @click="handleTableExport" class="control-btn" title="导出">📋</button>
      <button @click="handleTableViewToggle" class="control-btn" title="视图切换">⊞</button>
    </div>
  </div>

  <div class="table-container">
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner">加载中...</div>
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>
            <input 
              type="checkbox" 
              class="select-all" 
              v-model="selectAll"
              @change="handleSelectAll"
            />
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.userId">
          <td>
            <button @click="handleEdit(user)" class="table-btn edit">✏️ 编辑</button>
            <button @click="handleDelete(user)" class="table-btn delete">🗑️ 删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 分页信息 -->
  <div class="table-footer">
    <div class="pagination-left">
      <div class="pagination-info">
        共 {{ total }} 条记录，第 {{ currentPage }} / {{ totalPages }} 页
      </div>
      <div class="page-size-selector">
        <label>每页显示:</label>
        <select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
          <option value="10">10条</option>
          <option value="20">20条</option>
          <option value="50">50条</option>
          <option value="100">100条</option>
        </select>
      </div>
    </div>
    <div class="pagination-container">
       <button 
         @click="handlePageChange(currentPage - 1)" 
         :disabled="currentPage <= 1"
         class="pagination-btn prev-btn"
       >
         上一页
       </button>
      <div class="pagination-pages">
        <button 
          v-for="page in getPageNumbers()" 
          :key="page"
          @click="handlePageChange(page)"
          :class="['page-number', { active: page === currentPage }]"
        >
          {{ page }}
        </button>
      </div>
       <button 
         @click="handlePageChange(currentPage + 1)" 
         :disabled="currentPage >= totalPages"
         class="pagination-btn next-btn"
       >
         下一页
       </button>
    </div>
  </div>
</div>

  </div>
</div>