From 3407cb4169c0f95e27f6ce09541be27771a8ca5a Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Sun, 30 Mar 2025 01:20:02 +0800
Subject: [PATCH] 213

---
 ShengShengBuXi/Pages/Admin.cshtml | 267 ++++++++++++++++++++++--------
 1 file changed, 196 insertions(+), 71 deletions(-)

diff --git a/ShengShengBuXi/Pages/Admin.cshtml b/ShengShengBuXi/Pages/Admin.cshtml
index d19e542..ef67fd7 100644
--- a/ShengShengBuXi/Pages/Admin.cshtml
+++ b/ShengShengBuXi/Pages/Admin.cshtml
@@ -42,12 +42,12 @@
 
                         <!--  <li class="nav-item" role="presentation">
                             <button class="nav-link" id="recognition-tab" data-bs-toggle="tab" data-bs-target="#recognition" type="button" role="tab" aria-controls="recognition" aria-selected="false">识别结果</button>
-                        </li>-->
+                        </li>
                         <li class="nav-item" role="presentation"></li>
                         <button class="nav-link" id="display-config-tab" data-bs-toggle="tab"
                             data-bs-target="#display-config" type="button" role="tab" aria-controls="display-config"
                             aria-selected="false">显示配置</button>
-                        </li>
+                        </li>-->
                         <li class="nav-item" role="presentation">
                             <button class="nav-link" id="user-records-tab" data-bs-toggle="tab"
                                 data-bs-target="#user-records" type="button" role="tab" aria-controls="user-records"
@@ -293,7 +293,14 @@
                         <!-- 录音管理 -->
                         <div class="tab-pane fade show active" id="recordings" role="tabpanel" aria-labelledby="recordings-tab">
                             <div class="mt-3">
-                                <button class="btn btn-primary mb-3" onclick="getRecentRecordings()">刷新录音列表</button>
+                                <div class="d-flex justify-content-between mb-3">
+                                    <button class="btn btn-primary" onclick="getRecentRecordings()">刷新录音列表</button>
+                                    <!-- 添加搜索功能 -->
+                                    <div class="d-flex">
+                                        <input type="text" class="form-control me-2" id="recording-search" placeholder="输入文件名搜索...">
+                                        <button class="btn btn-outline-primary" onclick="searchRecordings()">搜索</button>
+                                    </div>
+                                </div>
 
                                 <!-- 音频播放器（将不再全局显示，而是嵌入到表格行中） -->
                                 <div class="card mb-3" id="audioPlayerCard" style="display: none;">
@@ -327,6 +334,26 @@
                                         </tbody>
                                     </table>
                                 </div>
+                                
+                                <!-- 分页控制 -->
+                                <div class="d-flex justify-content-between align-items-center mt-3">
+                                    <div>
+                                        每页显示：
+                                        <select id="page-size" class="form-select form-select-sm d-inline-block w-auto" onchange="changePageSize()">
+                                            <option value="10">10条</option>
+                                            <option value="20" selected>20条</option>
+                                            <option value="50">50条</option>
+                                            <option value="100">100条</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <span id="pagination-info">显示 1-20，共 0 条</span>
+                                    </div>
+                                    <div>
+                                        <button class="btn btn-sm btn-outline-secondary" id="prev-page" onclick="prevPage()" disabled>上一页</button>
+                                        <button class="btn btn-sm btn-outline-secondary" id="next-page" onclick="nextPage()" disabled>下一页</button>
+                                    </div>
+                                </div>
                             </div>
                         </div>
 
@@ -1080,6 +1107,13 @@
             URL.revokeObjectURL(url);
         }
 
+        // 分页和搜索相关变量
+        let currentPage = 1;
+        let pageSize = 20;
+        let totalRecordings = 0;
+        let filteredRecordings = [];
+        let searchKeyword = '';
+
         // 获取最近录音
         function getRecentRecordings() {
             if (!connection || connection.state !== signalR.HubConnectionState.Connected) {
@@ -1088,17 +1122,162 @@
             }
 
             log("正在获取最近录音列表...");
+            
+            // 重置分页和搜索
+            currentPage = 1;
+            searchKeyword = '';
+            document.getElementById('recording-search').value = '';
 
-            connection.invoke("GetRecentRecordings", 100)
-                .then(() => {
-                    log("已成功发送获取录音列表请求");
+            // 获取第一页数据和总记录数
+            fetchRecordingsPage(currentPage);
+        }
+
+        // 获取指定页的录音数据
+        function fetchRecordingsPage(page) {
+            const skip = (page - 1) * pageSize;
+            const take = pageSize;
+            
+            log(`请求第${page}页录音，跳过${skip}条，获取${take}条`);
+            
+            connection.invoke("GetRecordingsPage", skip, take, searchKeyword)
+                .then(response => {
+                    if (response && response.items && response.totalCount) {
+                        log(`收到第${page}页录音，共${response.items.length}条，总计${response.totalCount}条`);
+                        totalRecordings = response.totalCount;
+                        updateRecordingsList(response.items);
+                        updatePaginationInfo();
+                    } else {
+                        log("收到的录音数据格式不正确");
+                        showMessage("获取录音数据格式不正确", "warning");
+                    }
                 })
                 .catch(err => {
-                    log("获取录音失败: " + err);
-                    showMessage("获取录音失败: " + err, "danger");
+                    // 如果新方法不存在，回退到旧方法
+                    log("GetRecordingsPage方法不存在，回退到旧方法: " + err);
+                    
+                    // 兼容旧方法，获取所有录音后在前端筛选
+                    connection.invoke("GetRecentRecordings", 100)
+                        .then(() => {
+                            log("已成功发送获取录音列表请求（旧方法）");
+                        })
+                        .catch(err => {
+                            log("获取录音失败: " + err);
+                            showMessage("获取录音失败: " + err, "danger");
+                        });
                 });
         }
 
+        // 更新分页信息
+        function updatePaginationInfo() {
+            const start = (currentPage - 1) * pageSize + 1;
+            const end = Math.min(start + pageSize - 1, totalRecordings);
+            
+            document.getElementById('pagination-info').textContent = 
+                totalRecordings > 0 ? `显示 ${start}-${end}，共 ${totalRecordings} 条` : `共 0 条`;
+            
+            // 更新按钮状态
+            document.getElementById('prev-page').disabled = currentPage <= 1;
+            document.getElementById('next-page').disabled = end >= totalRecordings;
+        }
+
+        // 搜索录音
+        function searchRecordings() {
+            const keyword = document.getElementById('recording-search').value.toLowerCase().trim();
+            searchKeyword = keyword;
+            
+            // 重置到第一页并请求数据
+            currentPage = 1;
+            fetchRecordingsPage(currentPage);
+            
+            log(`搜索关键词: "${keyword}"`);
+        }
+
+        // 更改每页显示数量
+        function changePageSize() {
+            pageSize = parseInt(document.getElementById('page-size').value);
+            currentPage = 1;
+            fetchRecordingsPage(currentPage);
+            log(`每页显示数量改为: ${pageSize}`);
+        }
+
+        // 上一页
+        function prevPage() {
+            if (currentPage > 1) {
+                currentPage--;
+                fetchRecordingsPage(currentPage);
+            }
+        }
+
+        // 下一页
+        function nextPage() {
+            const maxPage = Math.ceil(totalRecordings / pageSize);
+            if (currentPage < maxPage) {
+                currentPage++;
+                fetchRecordingsPage(currentPage);
+            }
+        }
+
+        // 更新录音列表
+        function updateRecordingsList(recordings) {
+            log("接收到录音列表，数量：" + (recordings ? recordings.length : 0));
+            filteredRecordings = recordings || [];
+
+            const tableBody = document.getElementById("recording-list");
+
+            // 清空列表
+            tableBody.innerHTML = "";
+
+            if (!recordings || recordings.length === 0) {
+                const row = document.createElement("tr");
+                row.innerHTML = `<td colspan="5" class="text-center">暂无录音</td>`;
+                tableBody.appendChild(row);
+                log("录音列表为空");
+                return;
+            }
+
+            // 添加录音
+            recordings.forEach((filePathOrName, index) => {
+                // 获取文件名（如果传入的已经是文件名则直接使用）
+                const fileName = filePathOrName.includes("/") || filePathOrName.includes("\\")
+                    ? filePathOrName.split('\\').pop().split('/').pop()
+                    : filePathOrName;
+
+                log("添加录音文件: " + fileName);
+
+                // 从文件名中尝试提取创建日期（格式如recording_20230326_185637.wav）
+                let createDate = "未知";
+                const dateMatch = fileName.match(/(\d{4})(\d{2})(\d{2})_(\d{2})(\d{2})(\d{2})/);
+                if (dateMatch) {
+                    // 组成年-月-日 时:分:秒格式
+                    createDate = `${dateMatch[1]}-${dateMatch[2]}-${dateMatch[3]} ${dateMatch[4]}:${dateMatch[5]}:${dateMatch[6]}`;
+                }
+
+                // 创建新行
+                const row = document.createElement("tr");
+
+                // 序号为当前页面索引+1
+                const sequenceNumber = ((currentPage - 1) * pageSize) + index + 1;
+
+                row.innerHTML = `
+                        <td>${sequenceNumber}</td>
+                        <td>${fileName}</td>
+                        <td>获取中...</td>
+                        <td>${createDate}</td>
+                        <td>
+                            <button class="btn btn-sm btn-primary" onclick="playRecordingInPage('${fileName}', this)">播放</button>
+                            <a href="/recordings/${fileName}" class="btn btn-sm btn-secondary" download>下载</a>
+                        </td>
+                    `;
+
+                tableBody.appendChild(row);
+
+                // 异步获取文件大小
+                getFileSize(fileName);
+            });
+
+            log(`显示第${currentPage}页录音，${recordings.length}条结果`);
+        }
+
         // 在页面中播放录音
         function playRecordingInPage(fileName, rowElement) {
             // 关闭任何已打开的播放器
@@ -1214,10 +1393,17 @@
                 }
             });
 
-            // 接收录音列表
+            // 接收录音列表（旧方法兼容）
             connection.on("RecentRecordings", (recordings) => {
                 log("接收到录音列表，数量：" + (recordings ? recordings.length : 0));
-                updateRecordingsList(recordings);
+                // 使用旧方法收到的数据，设置总数
+                totalRecordings = recordings ? recordings.length : 0;
+                // 根据当前页筛选数据
+                const start = (currentPage - 1) * pageSize;
+                const end = Math.min(start + pageSize, totalRecordings);
+                const pageItems = recordings ? recordings.slice(start, end) : [];
+                updateRecordingsList(pageItems);
+                updatePaginationInfo();
             });
 
             // 客户端列表
@@ -1418,67 +1604,6 @@
             }
         }
 
-        // 更新录音列表
-        function updateRecordingsList(recordings) {
-            log("接收到录音列表，数量：" + (recordings ? recordings.length : 0));
-
-            const tableBody = document.getElementById("recording-list");
-
-            // 清空列表
-            tableBody.innerHTML = "";
-
-            if (!recordings || recordings.length === 0) {
-                const row = document.createElement("tr");
-                row.innerHTML = `<td colspan="5" class="text-center">暂无录音</td>`;
-                tableBody.appendChild(row);
-                log("录音列表为空");
-                return;
-            }
-
-            // 添加录音
-            recordings.forEach((filePathOrName, index) => {
-                // 获取文件名（如果传入的已经是文件名则直接使用）
-                const fileName = filePathOrName.includes("/") || filePathOrName.includes("\\")
-                    ? filePathOrName.split('\\').pop().split('/').pop()
-                    : filePathOrName;
-
-                log("添加录音文件: " + fileName);
-
-                // 从文件名中尝试提取创建日期（格式如recording_20230326_185637.wav）
-                let createDate = "未知";
-                const dateMatch = fileName.match(/(\d{4})(\d{2})(\d{2})_(\d{2})(\d{2})(\d{2})/);
-                if (dateMatch) {
-                    // 组成年-月-日 时:分:秒格式
-                    createDate = `${dateMatch[1]}-${dateMatch[2]}-${dateMatch[3]} ${dateMatch[4]}:${dateMatch[5]}:${dateMatch[6]}`;
-                }
-
-                // 创建新行
-                const row = document.createElement("tr");
-
-                // 序号为当前索引+1
-                const sequenceNumber = index + 1;
-
-                row.innerHTML = `
-                        <td>${sequenceNumber}</td>
-                        <td>${fileName}</td>
-                        <td>获取中...</td>
-                        <td>${createDate}</td>
-                        <td>
-                            <button class="btn btn-sm btn-primary" onclick="playRecordingInPage('${fileName}', this)">播放</button>
-                            <a href="/recordings/${fileName}" class="btn btn-sm btn-secondary" download>下载</a>
-                        </td>
-                    `;
-
-                tableBody.appendChild(row);
-
-                // 异步获取文件大小
-                getFileSize(fileName);
-            });
-
-            log("录音列表已更新，共" + recordings.length + "个文件");
-            showMessage("成功获取" + recordings.length + "个录音文件", "success");
-        }
-
         // 获取录音文件大小
         function getFileSize(fileName) {
             if (!connection || connection.state !== signalR.HubConnectionState.Connected) {