feat(review): 添加分页跳转和记住暗号功能

- 新增分页跳转下拉菜单，实现快速跳转任意页码 - 增加分页栏样式，调整按钮与选择框的尺寸与间距 - 在登录面板添加“记住暗号”复选框及相关样式 - 登录时读取本地存储的暗号并自动填充 - 登录成功时根据复选框状态保存或清除本地存储的暗号 - 分页按钮和跳转选择框事件联动，实现页面数据刷新更新

feat(review): 添加分页跳转和记住暗号功能
- 新增分页跳转下拉菜单，实现快速跳转任意页码 - 增加分页栏样式，调整按钮与选择框的尺寸与间距 - 在登录面板添加“记住暗号”复选框及相关样式 - 登录时读取本地存储的暗号并自动填充 - 登录成功时根据复选框状态保存或清除本地存储的暗号 - 分页按钮和跳转选择框事件联动，实现页面数据刷新更新
沈秋雨
Commit fcf7434e ... fcf7434e643b4eef3f65708c80c188e54ba4d7a0 authored 2026-07-19 22:22:56 +0800 by 沈秋雨
Showing 1 changed file with 57 additions and 4 deletions
l2_review_dashboard.html
--- a/l2_review_dashboard.html
View file @fcf7434
+++ b/l2_review_dashboard.html
View file @fcf7434
@@ -517,6 +517,26 @@
      align-items: center;
    }
+    .page-bar {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+    .page-bar button {
+      height: 30px;
+      padding: 0 12px;
+      font-size: 13px;
+    }
+    .page-bar select {
+      height: 30px;
+      font-size: 13px;
+      min-width: 80px;
+      text-align: center;
+    }
    .review-bar button {
      background: #fff;
      color: var(--text);
@@ -574,6 +594,8 @@
    .login-panel input { width: 100%; box-sizing: border-box; }
    .login-panel button { width: 100%; margin-top: 16px; }
    .login-error { min-height: 20px; margin-top: 10px; color: #b42318; font-size: 13px; }
+    .login-remember { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
+    .login-remember input { width: auto; height: auto; margin: 0; cursor: pointer; }
    @media (max-width: 1100px) {
      main { grid-template-columns: 1fr; height: auto; }
@@ -594,6 +616,7 @@
      <input id="loginReviewer" maxlength="64" autocomplete="username" required>
      <label for="loginAccessCode">暗号</label>
      <input id="loginAccessCode" type="password" autocomplete="current-password" required>
+      <label class="login-remember"><input id="rememberAccessCode" type="checkbox"> 记住暗号</label>
      <button id="loginBtn" type="submit">进入编辑</button>
      <div id="loginError" class="login-error"></div>
    </form>
@@ -652,11 +675,12 @@
          <span id="sampleCount" class="pill"></span>
        </div>
        <div class="section-body">
-          <div id="queryList" class="query-list"></div>
+          <div class="page-bar">
-          <div class="review-bar" style="margin-top:10px">
            <button id="prevPageBtn" class="secondary">上一页</button>
+            <select id="pageJumpSelect"></select>
            <button id="nextPageBtn" class="secondary">下一页</button>
          </div>
+          <div id="queryList" class="query-list"></div>
        </div>
      </div>
    </aside>
@@ -706,6 +730,7 @@
      reloadBtn: document.getElementById('reloadBtn'),
      prevPageBtn: document.getElementById('prevPageBtn'),
      nextPageBtn: document.getElementById('nextPageBtn'),
+      pageJumpSelect: document.getElementById('pageJumpSelect'),
      metrics: document.getElementById('metrics'),
      sampleCount: document.getElementById('sampleCount'),
@@ -718,7 +743,8 @@
      loginReviewer: document.getElementById('loginReviewer'),
      loginAccessCode: document.getElementById('loginAccessCode'),
      loginBtn: document.getElementById('loginBtn'),
-      loginError: document.getElementById('loginError')
+      loginError: document.getElementById('loginError'),
+      rememberAccessCode: document.getElementById('rememberAccessCode')
    };
    function newClientToken() {
@@ -728,7 +754,9 @@
    function showReviewLogin(prefillReviewer = '') {
      els.loginReviewer.value = prefillReviewer;
-      els.loginAccessCode.value = '';
+      const savedCode = localStorage.getItem('l2AccessCode') || '';
+      els.loginAccessCode.value = savedCode;
+      els.rememberAccessCode.checked = Boolean(savedCode);
      els.loginError.textContent = '';
      els.loginOverlay.classList.remove('hidden');
      window.setTimeout(() => (prefillReviewer ? els.loginAccessCode : els.loginReviewer).focus(), 0);
@@ -748,6 +776,11 @@
            state.authToken = session.session_token;
            localStorage.setItem('l2ReviewerName', state.reviewer);
            sessionStorage.setItem('l2ReviewAuthToken', state.authToken);
+            if (els.rememberAccessCode.checked) {
+              localStorage.setItem('l2AccessCode', accessCode);
+            } else {
+              localStorage.removeItem('l2AccessCode');
+            }
            els.reviewerInput.value = state.reviewer;
            els.loginAccessCode.value = '';
            els.loginOverlay.classList.add('hidden');
@@ -767,6 +800,11 @@
      sessionStorage.setItem('l2ReviewClientToken', state.clientToken);
      state.authToken = sessionStorage.getItem('l2ReviewAuthToken') || '';
      els.loginReviewer.value = state.reviewer;
+      const savedCode = localStorage.getItem('l2AccessCode') || '';
+      if (savedCode) {
+        els.loginAccessCode.value = savedCode;
+        els.rememberAccessCode.checked = true;
+      }
      if (state.reviewer && state.authToken) {
        try {
@@ -1054,6 +1092,12 @@
      }
      els.prevPageBtn.disabled = state.page <= 1;
      els.nextPageBtn.disabled = !state.hasMore;
+      // 填充页码跳转下拉
+      const jumpOptions = [];
+      for (let p = 1; p <= totalPages; p++) {
+        jumpOptions.push(`<option value="${p}" ${p === state.page ? 'selected' : ''}>第 ${p} 页</option>`);
+      }
+      els.pageJumpSelect.innerHTML = jumpOptions.join('');
    }
    function selectedQueryRows() {
@@ -1704,6 +1748,15 @@
      await loadGroups();
      renderAll();
    });
+    els.pageJumpSelect.addEventListener('change', async () => {
+      const target = Number(els.pageJumpSelect.value);
+      if (!target || target === state.page) return;
+      state.page = target;
+      state.queryId = '';
+      state.candidateId = '';
+      await loadGroups();
+      renderAll();
+    });
    async function bootstrap() {
      await initReviewerIdentity();