feat: add server-side admin user pagination and align traffic report accounting

frontend/app.html

@@ -2698,6 +2698,9 @@
                 <span>按天用量明细（最近 {{ downloadTrafficReport.days }} 天）</span>
                 <span v-if="downloadTrafficReport.summary?.peak_day">峰值: {{ formatReportDateLabel(downloadTrafficReport.summary.peak_day.date) }} / {{ formatBytes(downloadTrafficReport.summary.peak_day.bytes_used || 0) }}</span>
               </div>
+              <div style="padding: 8px 12px; border-bottom: 1px solid var(--glass-border); font-size: 12px; color: var(--text-muted);">
+                说明：预览/在线播放同样计入下载流量；OSS 明细来自访问日志，通常有 5-15 分钟延迟。
+              </div>
 
               <div v-if="downloadTrafficReport.loading && downloadTrafficDailyRowsDesc.length === 0" style="padding: 16px; text-align: center; color: var(--text-muted);">
                 <i class="fas fa-spinner fa-spin"></i> 报表加载中...
@@ -3522,11 +3525,11 @@
         <div class="admin-users-toolbar">
           <div class="admin-users-filter admin-users-filter-search">
             <label>搜索</label>
-            <input type="text" v-model.trim="adminUserFilters.keyword" @input="adminUsersPage = 1" placeholder="ID / 用户名 / 邮箱">
+            <input type="text" v-model.trim="adminUserFilters.keyword" @input="triggerAdminUsersKeywordSearch" placeholder="ID / 用户名 / 邮箱">
           </div>
           <div class="admin-users-filter">
             <label>角色</label>
-            <select v-model="adminUserFilters.role" @change="adminUsersPage = 1">
+            <select v-model="adminUserFilters.role" @change="handleAdminUsersFilterChange">
               <option value="all">全部</option>
               <option value="admin">管理员</option>
               <option value="user">普通用户</option>
@@ -3534,7 +3537,7 @@
           </div>
           <div class="admin-users-filter">
             <label>状态</label>
-            <select v-model="adminUserFilters.status" @change="adminUsersPage = 1">
+            <select v-model="adminUserFilters.status" @change="handleAdminUsersFilterChange">
               <option value="all">全部</option>
               <option value="active">正常</option>
               <option value="banned">已封禁</option>
@@ -3544,7 +3547,7 @@
           </div>
           <div class="admin-users-filter">
             <label>存储</label>
-            <select v-model="adminUserFilters.storage" @change="adminUsersPage = 1">
+            <select v-model="adminUserFilters.storage" @change="handleAdminUsersFilterChange">
               <option value="all">全部</option>
               <option value="local">当前本地</option>
               <option value="oss">当前OSS</option>
@@ -3555,7 +3558,7 @@
           </div>
           <div class="admin-users-filter">
             <label>排序</label>
-            <select v-model="adminUserFilters.sort" @change="adminUsersPage = 1">
+            <select v-model="adminUserFilters.sort" @change="handleAdminUsersFilterChange">
               <option value="created_desc">注册时间（新到旧）</option>
               <option value="created_asc">注册时间（旧到新）</option>
               <option value="username_asc">用户名（A-Z）</option>
@@ -3566,7 +3569,7 @@
           </div>
           <div class="admin-users-filter admin-users-filter-page-size">
             <label>每页</label>
-            <select v-model.number="adminUsersPageSize" @change="adminUsersPage = 1">
+            <select v-model.number="adminUsersPageSize" @change="handleAdminUsersPageSizeChange">
               <option :value="20">20</option>
               <option :value="50">50</option>
               <option :value="100">100</option>
@@ -3580,7 +3583,7 @@
         </div>
 
         <div class="admin-users-stats">
-          <span class="admin-users-stat-chip">总用户 {{ adminUsers.length }}</span>
+          <span class="admin-users-stat-chip">总用户 {{ adminUsersGlobalCount }}</span>
           <span class="admin-users-stat-chip">筛选后 {{ adminUsersFilteredCount }}</span>
           <span class="admin-users-stat-chip">正常 {{ adminUserStats.active }}</span>
           <span class="admin-users-stat-chip">封禁 {{ adminUserStats.banned }}</span>
@@ -3611,7 +3614,7 @@
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="u in adminUsersPaged" :key="u.id" style="border-bottom: 1px solid #eee;">
+                <tr v-for="u in adminUsers" :key="u.id" style="border-bottom: 1px solid #eee;">
                   <td style="padding: 10px;">{{ u.id }}</td>
                   <td style="padding: 10px; overflow: hidden;">
                     <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="u.username" v-html="getHighlightedText(u.username, adminUserFilters.keyword)"></div>
@@ -3703,7 +3706,7 @@
 
           <div class="admin-users-pagination" v-if="adminUsersFilteredCount > 0">
             <div class="admin-users-pagination-info">
-              显示 {{ adminUsersPageStart }}-{{ adminUsersPageEnd }} 条，共 {{ adminUsersFilteredCount }} 条（总 {{ adminUsers.length }} 条）
+              显示 {{ adminUsersPageStart }}-{{ adminUsersPageEnd }} 条，共 {{ adminUsersFilteredCount }} 条（总 {{ adminUsersGlobalCount }} 条）
             </div>
             <div class="admin-users-pagination-actions">
               <button class="btn btn-secondary" @click="setAdminUsersPage(1)" :disabled="adminUsersCurrentPage <= 1">
@@ -3724,7 +3727,7 @@
 
           <div v-else class="admin-users-empty-state">
             <i class="fas fa-users-slash"></i>
-            <span v-if="adminUsers.length > 0">没有符合当前筛选条件的用户</span>
+            <span v-if="adminUsersGlobalCount > 0">没有符合当前筛选条件的用户</span>
             <span v-else>暂无用户数据</span>
           </div>
         </template>

frontend/app.js

@@ -144,6 +144,15 @@ createApp({
       adminUsersLoading: false,
       adminUsersPage: 1,
       adminUsersPageSize: 20,
+      adminUsersTotalCount: 0,
+      adminUsersTotalPages: 1,
+      adminUsersGlobalCount: 0,
+      adminUserStats: {
+        active: 0,
+        banned: 0,
+        unverified: 0,
+        download_blocked: 0
+      },
       adminUserFilters: {
         keyword: '',
         role: 'all', // all/admin/user
@@ -571,91 +580,8 @@ createApp({
       return list;
     },
 
-    adminUsersFiltered() {
-      let list = Array.isArray(this.adminUsers) ? [...this.adminUsers] : [];
-      const keyword = (this.adminUserFilters.keyword || '').trim().toLowerCase();
-
-      if (keyword) {
-        list = list.filter((u) => {
-          const idText = String(u?.id || '');
-          const usernameText = String(u?.username || '').toLowerCase();
-          const emailText = String(u?.email || '').toLowerCase();
-          return idText.includes(keyword) || usernameText.includes(keyword) || emailText.includes(keyword);
-        });
-      }
-
-      if (this.adminUserFilters.role === 'admin') {
-        list = list.filter((u) => !!u?.is_admin);
-      } else if (this.adminUserFilters.role === 'user') {
-        list = list.filter((u) => !u?.is_admin);
-      }
-
-      if (this.adminUserFilters.status !== 'all') {
-        list = list.filter((u) => this.getAdminUserStatusTag(u) === this.adminUserFilters.status);
-      }
-
-      if (this.adminUserFilters.storage !== 'all') {
-        const selectedStorage = this.adminUserFilters.storage;
-        list = list.filter((u) => {
-          const currentStorage = u?.current_storage_type || 'oss';
-          const storagePermission = u?.storage_permission || 'oss_only';
-          if (selectedStorage === 'local' || selectedStorage === 'oss') {
-            return currentStorage === selectedStorage;
-          }
-          return storagePermission === selectedStorage;
-        });
-      }
-
-      const getCreatedTime = (u) => {
-        const raw = String(u?.created_at || '').trim();
-        if (!raw) return 0;
-        const normalized = raw.includes('T') ? raw : raw.replace(' ', 'T');
-        const ts = Date.parse(normalized);
-        return Number.isFinite(ts) ? ts : 0;
-      };
-
-      const getStorageUsage = (u) => {
-        const currentStorage = u?.current_storage_type || 'oss';
-        if (currentStorage === 'local') {
-          return this.getAdminUserQuotaPercentage(u);
-        }
-        return this.getAdminUserOssQuotaPercentage(u);
-      };
-
-      const getDownloadUsage = (u) => this.getAdminUserDownloadQuotaPercentage(u);
-
-      list.sort((a, b) => {
-        const aName = String(a?.username || '').toLowerCase();
-        const bName = String(b?.username || '').toLowerCase();
-        const aId = Number(a?.id || 0);
-        const bId = Number(b?.id || 0);
-
-        switch (this.adminUserFilters.sort) {
-          case 'created_asc':
-            return getCreatedTime(a) - getCreatedTime(b) || aId - bId;
-          case 'username_asc':
-            return aName.localeCompare(bName, 'zh-CN') || aId - bId;
-          case 'username_desc':
-            return bName.localeCompare(aName, 'zh-CN') || bId - aId;
-          case 'storage_usage_desc':
-            return getStorageUsage(b) - getStorageUsage(a) || bId - aId;
-          case 'download_usage_desc':
-            return getDownloadUsage(b) - getDownloadUsage(a) || bId - aId;
-          default:
-            return getCreatedTime(b) - getCreatedTime(a) || bId - aId;
-        }
-      });
-
-      return list;
-    },
-
     adminUsersFilteredCount() {
-      return this.adminUsersFiltered.length;
-    },
-
-    adminUsersTotalPages() {
-      const size = Math.max(1, Number(this.adminUsersPageSize) || 20);
-      return Math.max(1, Math.ceil(this.adminUsersFilteredCount / size));
+      return Math.max(0, Number(this.adminUsersTotalCount) || 0);
     },
 
     adminUsersCurrentPage() {
@@ -673,28 +599,6 @@ createApp({
       if (this.adminUsersFilteredCount <= 0) return 0;
       const size = Math.max(1, Number(this.adminUsersPageSize) || 20);
       return Math.min(this.adminUsersCurrentPage * size, this.adminUsersFilteredCount);
-    },
-
-    adminUsersPaged() {
-      const size = Math.max(1, Number(this.adminUsersPageSize) || 20);
-      const start = (this.adminUsersCurrentPage - 1) * size;
-      return this.adminUsersFiltered.slice(start, start + size);
-    },
-
-    adminUserStats() {
-      const stats = {
-        active: 0,
-        banned: 0,
-        unverified: 0,
-        download_blocked: 0
-      };
-      for (const u of this.adminUsersFiltered) {
-        const tag = this.getAdminUserStatusTag(u);
-        if (Object.prototype.hasOwnProperty.call(stats, tag)) {
-          stats[tag] += 1;
-        }
-      }
-      return stats;
     }
   },
 
@@ -2847,17 +2751,91 @@ handleDragLeave(e) {
 
     // ===== 管理员功能 =====
 
-    async loadUsers() {
+    calculateAdminUserStats(users = []) {
+      const stats = {
+        active: 0,
+        banned: 0,
+        unverified: 0,
+        download_blocked: 0
+      };
+      for (const user of users) {
+        const statusTag = this.getAdminUserStatusTag(user);
+        if (Object.prototype.hasOwnProperty.call(stats, statusTag)) {
+          stats[statusTag] += 1;
+        }
+      }
+      return stats;
+    },
+
+    buildAdminUsersQueryParams() {
+      const params = {
+        paged: 1,
+        page: Math.max(1, Number(this.adminUsersPage) || 1),
+        pageSize: Math.max(1, Number(this.adminUsersPageSize) || 20),
+        sort: this.adminUserFilters.sort || 'created_desc'
+      };
+
+      const keyword = String(this.adminUserFilters.keyword || '').trim();
+      if (keyword) params.keyword = keyword;
+      if (this.adminUserFilters.role && this.adminUserFilters.role !== 'all') {
+        params.role = this.adminUserFilters.role;
+      }
+      if (this.adminUserFilters.status && this.adminUserFilters.status !== 'all') {
+        params.status = this.adminUserFilters.status;
+      }
+      if (this.adminUserFilters.storage && this.adminUserFilters.storage !== 'all') {
+        params.storage = this.adminUserFilters.storage;
+      }
+
+      return params;
+    },
+
+    async loadUsers(options = {}) {
+      const resetPage = options && options.resetPage === true;
+      if (resetPage) {
+        this.adminUsersPage = 1;
+      }
+
       this.adminUsersLoading = true;
       try {
-        const response = await axios.get(`${this.apiBase}/api/admin/users`);
+        const response = await axios.get(`${this.apiBase}/api/admin/users`, {
+          params: this.buildAdminUsersQueryParams()
+        });
 
         if (response.data.success) {
-          this.adminUsers = Array.isArray(response.data.users) ? response.data.users : [];
-          const maxPage = Math.max(1, Math.ceil(this.adminUsers.length / Math.max(1, Number(this.adminUsersPageSize) || 20)));
-          if (this.adminUsersPage > maxPage) {
-            this.adminUsersPage = maxPage;
-          }
+          const rows = Array.isArray(response.data.users) ? response.data.users : [];
+          this.adminUsers = rows;
+
+          const rawTotal = Number(response.data?.pagination?.total);
+          const totalCount = Number.isFinite(rawTotal) && rawTotal >= 0
+            ? Math.floor(rawTotal)
+            : rows.length;
+          this.adminUsersTotalCount = totalCount;
+
+          const rawTotalPages = Number(response.data?.pagination?.totalPages);
+          this.adminUsersTotalPages = Number.isFinite(rawTotalPages) && rawTotalPages > 0
+            ? Math.floor(rawTotalPages)
+            : Math.max(1, Math.ceil(totalCount / Math.max(1, Number(this.adminUsersPageSize) || 20)));
+
+          const rawPage = Number(response.data?.pagination?.page);
+          const nextPage = Number.isFinite(rawPage) && rawPage > 0
+            ? Math.floor(rawPage)
+            : this.adminUsersPage;
+          this.adminUsersPage = Math.min(Math.max(1, nextPage), this.adminUsersTotalPages);
+
+          const summary = response.data?.summary || {};
+          const rawGlobalTotal = Number(summary.global_total);
+          this.adminUsersGlobalCount = Number.isFinite(rawGlobalTotal) && rawGlobalTotal >= 0
+            ? Math.floor(rawGlobalTotal)
+            : this.adminUsersTotalCount;
+
+          const fallbackStats = this.calculateAdminUserStats(rows);
+          this.adminUserStats = {
+            active: Number.isFinite(Number(summary.active)) ? Math.max(0, Math.floor(Number(summary.active))) : fallbackStats.active,
+            banned: Number.isFinite(Number(summary.banned)) ? Math.max(0, Math.floor(Number(summary.banned))) : fallbackStats.banned,
+            unverified: Number.isFinite(Number(summary.unverified)) ? Math.max(0, Math.floor(Number(summary.unverified))) : fallbackStats.unverified,
+            download_blocked: Number.isFinite(Number(summary.download_blocked)) ? Math.max(0, Math.floor(Number(summary.download_blocked))) : fallbackStats.download_blocked
+          };
         }
       } catch (error) {
         console.error('加载用户列表失败:', error);
@@ -3519,11 +3497,37 @@ handleDragLeave(e) {
     setAdminUsersPage(page) {
       const nextPage = Number(page) || 1;
       if (nextPage < 1) {
-        this.adminUsersPage = 1;
+        if (this.adminUsersPage !== 1) {
+          this.adminUsersPage = 1;
+          this.loadUsers();
+        }
         return;
       }
       const maxPage = this.adminUsersTotalPages;
-      this.adminUsersPage = Math.min(nextPage, maxPage);
+      const targetPage = Math.min(nextPage, maxPage);
+      if (targetPage === this.adminUsersPage) return;
+      this.adminUsersPage = targetPage;
+      this.loadUsers();
+    },
+
+    triggerAdminUsersKeywordSearch() {
+      this.adminUsersPage = 1;
+      if (!this._debouncedAdminUsersQuery) {
+        this._debouncedAdminUsersQuery = this.debounce(() => {
+          this.loadUsers();
+        }, 260);
+      }
+      this._debouncedAdminUsersQuery();
+    },
+
+    handleAdminUsersFilterChange() {
+      this.adminUsersPage = 1;
+      this.loadUsers();
+    },
+
+    handleAdminUsersPageSizeChange() {
+      this.adminUsersPage = 1;
+      this.loadUsers();
     },
 
     resetAdminUserFilters() {
@@ -3536,6 +3540,7 @@ handleDragLeave(e) {
       };
       this.adminUsersPageSize = 20;
       this.adminUsersPage = 1;
+      this.loadUsers();
     },
 
     getAdminUserStatusTag(user) {