diff --git a/web/src/main/java/com/example/web/aspect/ReadWriteSeparationAspect.java b/web/src/main/java/com/example/web/aspect/ReadWriteSeparationAspect.java
new file mode 100644
index 0000000..e501121
--- /dev/null
+++ b/web/src/main/java/com/example/web/aspect/ReadWriteSeparationAspect.java
@@ -0,0 +1,66 @@
+package com.example.web.aspect;
+
+import com.example.web.config.DataSourceContextHolder;
+import org.aspectj.lang.JoinPoint;
+import org.aspectj.lang.annotation.After;
+import org.aspectj.lang.annotation.Aspect;
+import org.aspectj.lang.annotation.Before;
+import org.aspectj.lang.annotation.Pointcut;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Component;
+
+@Aspect
+@Component
+public class ReadWriteSeparationAspect {
+    
+    private static final Logger logger = LoggerFactory.getLogger(ReadWriteSeparationAspect.class);
+    
+    // 定义切入点，拦截所有Mapper方法
+    @Pointcut("execution(* com.example.web.mapper.*Mapper.*(..))")
+    public void mapperPointcut() {
+    }
+    
+    @Before("mapperPointcut()")
+    public void beforeMapperMethod(JoinPoint joinPoint) {
+        String methodName = joinPoint.getSignature().getName();
+        String className = joinPoint.getTarget().getClass().getSimpleName();
+        
+        // 获取当前使用的数据源
+        String currentDataSource = DataSourceContextHolder.getDataSource();
+        
+        // 根据方法名判断是读操作还是写操作
+        if (isReadOperation(methodName)) {
+            // 读操作使用从库
+            String slaveDataSource = currentDataSource.contains("wechat") ? "wechat-slave" : "primary-slave";
+            DataSourceContextHolder.setDataSource(slaveDataSource);
+            logger.debug("切换到从库数据源: {}，执行方法: {}.{}", slaveDataSource, className, methodName);
+        } else {
+            // 写操作使用主库
+            String masterDataSource = currentDataSource.contains("wechat") ? "wechat" : "primary";
+            DataSourceContextHolder.setDataSource(masterDataSource);
+            logger.debug("切换到主库数据源: {}，执行方法: {}.{}", masterDataSource, className, methodName);
+        }
+    }
+    
+    @After("mapperPointcut()")
+    public void afterMapperMethod() {
+        // 方法执行完成后清除数据源上下文
+        DataSourceContextHolder.clearDataSource();
+    }
+    
+    /**
+     * 判断是否为读操作
+     * @param methodName 方法名
+     * @return 是否为读操作
+     */
+    private boolean isReadOperation(String methodName) {
+        // 通常查询方法以find、get、select、query、list、count等开头的方法为读操作
+        return methodName.startsWith("find") || 
+               methodName.startsWith("get") || 
+               methodName.startsWith("select") || 
+               methodName.startsWith("query") || 
+               methodName.startsWith("list") || 
+               methodName.startsWith("count");
+    }
+}
\ No newline at end of file
diff --git a/web/src/main/java/com/example/web/config/DataSourceConfig.java b/web/src/main/java/com/example/web/config/DataSourceConfig.java
index d2f95d8..f484069 100644
--- a/web/src/main/java/com/example/web/config/DataSourceConfig.java
+++ b/web/src/main/java/com/example/web/config/DataSourceConfig.java
@@ -19,13 +19,27 @@ public class DataSourceConfig {
     public DataSource primaryDataSource() {
         return DataSourceBuilder.create().build();
     }
-
+    
+    // userlogin从库数据源
+    @Bean(name = "primarySlaveDataSource")
+    @ConfigurationProperties(prefix = "spring.datasource.primary-slave")
+    public DataSource primarySlaveDataSource() {
+        return DataSourceBuilder.create().build();
+    }
+    
     // 第二个数据源（wechat_app）
     @Bean(name = "wechatDataSource")
     @ConfigurationProperties(prefix = "spring.datasource.wechat")
     public DataSource wechatDataSource() {
         return DataSourceBuilder.create().build();
     }
+    
+    // wechat_app从库数据源
+    @Bean(name = "wechatSlaveDataSource")
+    @ConfigurationProperties(prefix = "spring.datasource.wechat-slave")
+    public DataSource wechatSlaveDataSource() {
+        return DataSourceBuilder.create().build();
+    }
 
     // 动态数据源配置
     @Primary
@@ -35,7 +49,9 @@ public class DataSourceConfig {
         dynamicDataSource.setDefaultTargetDataSource(primaryDataSource());
         Map<Object, Object> dataSources = new HashMap<>();
         dataSources.put("primary", primaryDataSource());
+        dataSources.put("primary-slave", primarySlaveDataSource());
         dataSources.put("wechat", wechatDataSource());
+        dataSources.put("wechat-slave", wechatSlaveDataSource());
         dynamicDataSource.setTargetDataSources(dataSources);
         return dynamicDataSource;
     }
diff --git a/web/src/main/resources/application.yaml b/web/src/main/resources/application.yaml
index 42681fd..bfac76f 100644
--- a/web/src/main/resources/application.yaml
+++ b/web/src/main/resources/application.yaml
@@ -11,6 +11,17 @@ spring:
         idle-timeout: 600000
         minimum-idle: 5
         maximum-pool-size: 20
+    # userlogin从库数据库
+    primary-slave:
+      jdbc-url: jdbc:mysql://1.95.162.61:3306/userlogin?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true
+      username: root
+      password: schl@2025
+      driver-class-name: com.mysql.cj.jdbc.Driver
+      hikari:
+        max-lifetime: 1200000
+        idle-timeout: 600000
+        minimum-idle: 5
+        maximum-pool-size: 30
     # wechat_app数据库
     wechat:
       jdbc-url: jdbc:mysql://1.95.162.61:3306/wechat_app?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true
@@ -22,6 +33,17 @@ spring:
         idle-timeout: 600000
         minimum-idle: 5
         maximum-pool-size: 20
+    # wechat_app从库数据库
+    wechat-slave:
+      jdbc-url: jdbc:mysql://1.95.162.61:3306/wechat_app?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true
+      username: root
+      password: schl@2025
+      driver-class-name: com.mysql.cj.jdbc.Driver
+      hikari:
+        max-lifetime: 1200000
+        idle-timeout: 600000
+        minimum-idle: 5
+        maximum-pool-size: 30
 
 server:
   port: 8083
diff --git a/web/src/main/resources/mapper/UsersMapper.xml b/web/src/main/resources/mapper/UsersMapper.xml
index 04f2a37..9af5b17 100644
--- a/web/src/main/resources/mapper/UsersMapper.xml
+++ b/web/src/main/resources/mapper/UsersMapper.xml
@@ -181,7 +181,13 @@
     
     <select id="findPublicAllWithPagination" resultType="com.example.web.entity.Users">
         SELECT u.* FROM users u
+        JOIN usermanagements um ON u.userId = um.userId
         WHERE u.type != 'Colleague'
+        AND (um.managercompany IS NULL OR um.managercompany = '')
+        AND (um.managerdepartment IS NULL OR um.managerdepartment = '')
+        AND (um.organization IS NULL OR um.organization = '')
+        AND (um.role IS NULL OR um.role = '')
+        AND (um.userName IS NULL OR um.userName = '')
         <if test="phoneNumber != null and phoneNumber != ''">
             AND u.phoneNumber = #{phoneNumber}
         </if>
@@ -191,7 +197,13 @@
     
     <select id="countPublicAll" resultType="java.lang.Integer">
         SELECT COUNT(*) FROM users u
+        JOIN usermanagements um ON u.userId = um.userId
         WHERE u.type != 'Colleague'
+        AND (um.managercompany IS NULL OR um.managercompany = '')
+        AND (um.managerdepartment IS NULL OR um.managerdepartment = '')
+        AND (um.organization IS NULL OR um.organization = '')
+        AND (um.role IS NULL OR um.role = '')
+        AND (um.userName IS NULL OR um.userName = '')
         <if test="phoneNumber != null and phoneNumber != ''">
             AND u.phoneNumber = #{phoneNumber}
         </if>
diff --git a/web/src/main/resources/static/index.html b/web/src/main/resources/static/index.html
index 4d5d633..eb32af8 100644
--- a/web/src/main/resources/static/index.html
+++ b/web/src/main/resources/static/index.html
@@ -504,12 +504,13 @@
             box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
         }
         
-        /* 表格容器样式，添加横向滚动 */
+        /* 表格容器样式，添加横向滚动和虚拟滚动 */
         .table-container {
             width: 100%;
             overflow-x: auto;
             margin: 0;
             padding: 0;
+            position: relative;
         }
         
         .table-container table {
@@ -517,6 +518,138 @@
             min-width: 100%;
         }
         
+        /* 虚拟滚动容器 */
+        .virtual-scroll-container {
+            width: 100%;
+            overflow-x: auto;
+            overflow-y: auto;
+            max-height: 600px; /* 设置固定高度，根据需要调整 */
+            position: relative;
+        }
+        
+        /* 虚拟滚动内容容器 */
+        .virtual-scroll-content {
+            position: relative;
+            width: 100%;
+        }
+        
+        /* 虚拟滚动占位符 */
+        .virtual-scroll-placeholder {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            opacity: 0;
+            pointer-events: none;
+        }
+        
+        /* 虚拟滚动表格 */
+        .virtual-scroll-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        
+        /* 骨架屏样式 */
+        .skeleton {
+            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+            background-size: 200% 100%;
+            animation: skeleton-loading 1.5s infinite;
+        }
+        
+        @keyframes skeleton-loading {
+            0% {
+                background-position: 200% 0;
+            }
+            100% {
+                background-position: -200% 0;
+            }
+        }
+        
+        .skeleton-row {
+            height: 60px;
+            border-bottom: 1px solid #e8e8e8;
+        }
+        
+        .skeleton-cell {
+            padding: 12px;
+            border-bottom: 1px solid #e8e8e8;
+        }
+        
+        .skeleton-text {
+            height: 16px;
+            border-radius: 4px;
+        }
+        
+        .skeleton-button {
+            height: 32px;
+            border-radius: 4px;
+            width: 80px;
+        }
+        
+        /* 加载状态样式 */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+        
+        .loading-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        
+        .loading-spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #1890ff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .loading-text {
+            margin-top: 10px;
+            color: #1890ff;
+            font-size: 14px;
+        }
+        
+        /* 页面加载骨架屏 */
+        .page-skeleton {
+            padding: 20px;
+        }
+        
+        .skeleton-header {
+            height: 60px;
+            margin-bottom: 20px;
+            border-radius: 8px;
+        }
+        
+        .skeleton-user-info {
+            height: 120px;
+            margin-bottom: 20px;
+            border-radius: 8px;
+        }
+        
+        .skeleton-section {
+            height: 400px;
+            border-radius: 8px;
+        }
+        
         /* 确保表格列宽正确显示 */
         .table-container th,
         .table-container td {
@@ -880,6 +1013,19 @@
         </div>
     </div>
     
+    <!-- 加载覆盖层 -->
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">加载中...</div>
+    </div>
+    
+    <!-- 页面骨架屏 -->
+    <div id="pageSkeleton" class="page-skeleton" style="display: none;">
+        <div class="skeleton-header skeleton"></div>
+        <div class="skeleton-user-info skeleton"></div>
+        <div class="skeleton-section skeleton"></div>
+    </div>
+    
     <script>
         var userInfo = null;
         var personalPage = 1;
@@ -970,8 +1116,8 @@
         // 缓存管理函数
         function getCachedData(type, key) {
             var now = Date.now();
-            if (dataCache[type] && dataCache[type][key] && (now - dataCache[type].timestamp) < CACHE_DURATION) {
-                return dataCache[type][key];
+            if (dataCache[type] && dataCache[type][key] && (now - dataCache[type][key].timestamp) < CACHE_DURATION) {
+                return dataCache[type][key].data;
             }
             return null;
         }
@@ -980,10 +1126,504 @@
             if (!dataCache[type]) {
                 dataCache[type] = {};
             }
-            dataCache[type][key] = data;
-            dataCache[type].timestamp = Date.now();
+            dataCache[type][key] = {
+                data: data,
+                timestamp: Date.now()
+            };
+        }
+        
+        // 生成缓存键
+        function generateCacheKey(prefix, params) {
+            var sortedParams = Object.keys(params)
+                .sort()
+                .map(key => `${key}:${params[key]}`)
+                .join('_');
+            return `${prefix}_${sortedParams}`;
+        }
+        
+        // 清理过期缓存
+        function cleanupExpiredCache() {
+            var now = Date.now();
+            Object.keys(dataCache).forEach(type => {
+                Object.keys(dataCache[type]).forEach(key => {
+                    if (now - dataCache[type][key].timestamp > CACHE_DURATION) {
+                        delete dataCache[type][key];
+                    }
+                });
+            });
         }
         
+        // 定期清理过期缓存
+        setInterval(cleanupExpiredCache, 5 * 60 * 1000); // 每5分钟清理一次
+        
+        // 加载状态管理
+        var loadingManager = {
+            // 显示加载覆盖层
+            showLoading: function() {
+                var overlay = document.getElementById('loadingOverlay');
+                if (overlay) {
+                    overlay.classList.add('active');
+                }
+            },
+            
+            // 隐藏加载覆盖层
+            hideLoading: function() {
+                var overlay = document.getElementById('loadingOverlay');
+                if (overlay) {
+                    overlay.classList.remove('active');
+                }
+            },
+            
+            // 显示页面骨架屏
+            showSkeleton: function() {
+                var skeleton = document.getElementById('pageSkeleton');
+                var mainContent = document.querySelector('.container');
+                if (skeleton && mainContent) {
+                    skeleton.style.display = 'block';
+                    mainContent.style.display = 'none';
+                }
+            },
+            
+            // 隐藏页面骨架屏
+            hideSkeleton: function() {
+                var skeleton = document.getElementById('pageSkeleton');
+                var mainContent = document.querySelector('.container');
+                if (skeleton && mainContent) {
+                    skeleton.style.display = 'none';
+                    mainContent.style.display = 'block';
+                }
+            },
+            
+            // 显示表格骨架屏
+            showTableSkeleton: function(tableId) {
+                var tableBody = document.getElementById(tableId);
+                var emptyState = document.getElementById(tableId.replace('Body', 'Empty'));
+                if (tableBody) {
+                    tableBody.innerHTML = '';
+                    // 创建骨架行
+                    for (var i = 0; i < 10; i++) {
+                        var row = document.createElement('tr');
+                        row.className = 'skeleton-row';
+                        
+                        // 添加骨架单元格
+                        var cells = tableId === 'personalBody' || tableId === 'publicBody' ? 9 : 10;
+                        for (var j = 0; j < cells; j++) {
+                            var cell = document.createElement('td');
+                            cell.className = 'skeleton-cell';
+                            
+                            var skeletonElement = document.createElement('div');
+                            skeletonElement.className = 'skeleton skeleton-text';
+                            skeletonElement.style.width = j === 0 ? '20px' : j === 1 ? '100px' : j === 2 ? '120px' : j === 3 ? '80px' : j === 4 ? '140px' : j === 5 ? '180px' : j === 6 ? '100px' : j === 7 ? '80px' : '120px';
+                            
+                            cell.appendChild(skeletonElement);
+                            row.appendChild(cell);
+                        }
+                        
+                        tableBody.appendChild(row);
+                    }
+                }
+                if (emptyState) {
+                    emptyState.style.display = 'none';
+                }
+            },
+            
+            // 隐藏表格骨架屏
+            hideTableSkeleton: function(tableId) {
+                var tableBody = document.getElementById(tableId);
+                if (tableBody) {
+                    tableBody.innerHTML = '';
+                }
+            }
+        };
+        
+        // API请求管理
+        var apiRequestManager = {
+            pendingRequests: {},
+            
+            // 生成请求键
+            generateRequestKey: function(url, params) {
+                var sortedParams = Object.keys(params)
+                    .sort()
+                    .map(key => `${key}:${params[key]}`)
+                    .join('_');
+                return `${url}_${sortedParams}`;
+            },
+            
+            // 发送请求
+            sendRequest: function(url, params, callback) {
+                var requestKey = this.generateRequestKey(url, params);
+                
+                // 取消之前的相同请求
+                this.cancelRequest(requestKey);
+                
+                var xhr = new XMLHttpRequest();
+                var requestUrl = url + '?' + objectToQueryString(params);
+                
+                // 保存请求
+                this.pendingRequests[requestKey] = xhr;
+                
+                xhr.open('GET', requestUrl, true);
+                xhr.timeout = 30000; // 30秒超时
+                
+                xhr.onreadystatechange = function() {
+                    if (xhr.readyState == 4) {
+                        // 移除请求
+                        delete this.pendingRequests[requestKey];
+                        
+                        if (xhr.status == 200) {
+                            try {
+                                var data = JSON.parse(xhr.responseText);
+                                callback(null, data);
+                            } catch (e) {
+                                callback(e, null);
+                            }
+                        } else {
+                            callback(new Error(`API请求失败，状态码: ${xhr.status}`), null);
+                        }
+                    }
+                }.bind(this);
+                
+                xhr.ontimeout = function() {
+                    delete this.pendingRequests[requestKey];
+                    callback(new Error('API请求超时'), null);
+                }.bind(this);
+                
+                xhr.send();
+                
+                return requestKey;
+            },
+            
+            // 取消请求
+            cancelRequest: function(requestKey) {
+                if (this.pendingRequests[requestKey]) {
+                    this.pendingRequests[requestKey].abort();
+                    delete this.pendingRequests[requestKey];
+                }
+            },
+            
+            // 取消所有请求
+            cancelAllRequests: function() {
+                Object.keys(this.pendingRequests).forEach(key => {
+                    this.cancelRequest(key);
+                });
+            }
+        };
+        
+        // 虚拟滚动配置
+        var virtualScrollConfig = {
+            rowHeight: 60, // 每行的高度，需要根据实际情况调整
+            bufferSize: 5, // 缓冲区大小，可视区域外额外渲染的行数
+            containerClass: 'virtual-scroll-container',
+            contentClass: 'virtual-scroll-content',
+            placeholderClass: 'virtual-scroll-placeholder',
+            tableClass: 'virtual-scroll-table'
+        };
+        
+        // 虚拟滚动实例
+        var virtualScrollInstances = {};
+        
+        // 创建虚拟滚动实例
+        function createVirtualScrollInstance(containerId, dataProvider, renderRow) {
+            var container = document.getElementById(containerId);
+            if (!container) return null;
+            
+            // 确保容器有正确的样式类
+            container.className = virtualScrollConfig.containerClass;
+            
+            // 创建内容容器
+            var content = document.createElement('div');
+            content.className = virtualScrollConfig.contentClass;
+            
+            // 创建占位符
+            var placeholder = document.createElement('div');
+            placeholder.className = virtualScrollConfig.placeholderClass;
+            
+            // 创建表格
+            var table = document.createElement('table');
+            table.className = virtualScrollConfig.tableClass;
+            
+            // 添加到容器
+            content.appendChild(placeholder);
+            content.appendChild(table);
+            container.innerHTML = '';
+            container.appendChild(content);
+            
+            var instance = {
+                container: container,
+                content: content,
+                placeholder: placeholder,
+                table: table,
+                dataProvider: dataProvider,
+                renderRow: renderRow,
+                startIndex: 0,
+                endIndex: 0,
+                visibleRows: 0,
+                totalRows: 0,
+                isScrolling: false
+            };
+            
+            // 添加滚动事件监听器
+            container.addEventListener('scroll', function() {
+                if (!instance.isScrolling) {
+                    instance.isScrolling = true;
+                    requestAnimationFrame(function() {
+                        updateVirtualScroll(instance);
+                        instance.isScrolling = false;
+                    });
+                }
+            });
+            
+            // 保存实例
+            virtualScrollInstances[containerId] = instance;
+            
+            return instance;
+        }
+        
+        // 更新虚拟滚动
+        function updateVirtualScroll(instance) {
+            var scrollTop = instance.container.scrollTop;
+            var containerHeight = instance.container.clientHeight;
+            
+            // 计算可视区域内的起始和结束索引
+            var startIndex = Math.max(0, Math.floor(scrollTop / virtualScrollConfig.rowHeight) - virtualScrollConfig.bufferSize);
+            var visibleRows = Math.ceil(containerHeight / virtualScrollConfig.rowHeight) + (virtualScrollConfig.bufferSize * 2);
+            var endIndex = Math.min(instance.totalRows, startIndex + visibleRows);
+            
+            // 只有当索引范围变化时才重新渲染
+            if (startIndex !== instance.startIndex || endIndex !== instance.endIndex) {
+                instance.startIndex = startIndex;
+                instance.endIndex = endIndex;
+                instance.visibleRows = visibleRows;
+                
+                // 渲染可见行
+                renderVisibleRows(instance);
+            }
+        }
+        
+        // 渲染可见行
+        function renderVisibleRows(instance) {
+            var startIndex = instance.startIndex;
+            var endIndex = instance.endIndex;
+            var data = instance.dataProvider(startIndex, endIndex);
+            
+            // 清空表格
+            instance.table.innerHTML = '';
+            
+            // 渲染行
+            data.forEach(function(item, index) {
+                var row = instance.renderRow(item, startIndex + index);
+                if (row) {
+                    instance.table.appendChild(row);
+                }
+            });
+            
+            // 更新占位符位置和内容位置
+            instance.placeholder.style.height = (instance.totalRows * virtualScrollConfig.rowHeight) + 'px';
+            instance.table.style.transform = 'translateY(' + (startIndex * virtualScrollConfig.rowHeight) + 'px)';
+        }
+        
+        // 设置虚拟滚动数据
+        function setVirtualScrollData(instanceId, totalRows) {
+            var instance = virtualScrollInstances[instanceId];
+            if (instance) {
+                instance.totalRows = totalRows;
+                instance.placeholder.style.height = (totalRows * virtualScrollConfig.rowHeight) + 'px';
+                updateVirtualScroll(instance);
+            }
+        }
+        
+        // 销毁虚拟滚动实例
+        function destroyVirtualScrollInstance(instanceId) {
+            var instance = virtualScrollInstances[instanceId];
+            if (instance) {
+                instance.container.removeEventListener('scroll', updateVirtualScroll);
+                delete virtualScrollInstances[instanceId];
+            }
+        }
+        
+        // 数据预加载管理
+        var preloadManager = {
+            // 预加载下一页数据
+            preloadNextPage: function(currentPage, totalPages, loadFunction) {
+                if (currentPage < totalPages) {
+                    var nextPage = currentPage + 1;
+                    console.log('预加载第', nextPage, '页数据');
+                    // 保存当前页码
+                    var originalPage = personalPage;
+                    // 临时设置为下一页
+                    personalPage = nextPage;
+                    // 调用加载函数
+                    loadFunction();
+                    // 恢复原始页码
+                    personalPage = originalPage;
+                }
+            },
+            
+            // 预加载其他标签页数据
+            preloadOtherTabs: function(currentTab) {
+                var tabs = ['personal', 'public', 'products'];
+                tabs.forEach(tab => {
+                    if (tab !== currentTab) {
+                        console.log('预加载', tab, '标签页数据');
+                        setTimeout(function() {
+                            switch (tab) {
+                                case 'personal':
+                                    personalPage = 1;
+                                    loadPersonalData();
+                                    break;
+                                case 'public':
+                                    publicPage = 1;
+                                    loadPublicData();
+                                    break;
+                                case 'products':
+                                    productsPage = 1;
+                                    loadProducts();
+                                    break;
+                            }
+                        }, 2000); // 2秒后预加载，避免影响当前标签页的加载
+                    }
+                });
+            },
+            
+            // 图片懒加载
+            initImageLazyLoading: function() {
+                var lazyImages = document.querySelectorAll('img[data-src]');
+                
+                var imageObserver = new IntersectionObserver(function(entries, observer) {
+                    entries.forEach(function(entry) {
+                        if (entry.isIntersecting) {
+                            var img = entry.target;
+                            img.src = img.dataset.src;
+                            img.removeAttribute('data-src');
+                            imageObserver.unobserve(img);
+                        }
+                    });
+                });
+                
+                lazyImages.forEach(function(img) {
+                    imageObserver.observe(img);
+                });
+            }
+        };
+        
+        // 为虚拟滚动容器添加滚动事件，用于预加载下一页
+        function addPreloadScrollListener(containerId, currentPage, totalPages, loadFunction) {
+            var container = document.getElementById(containerId);
+            if (container) {
+                container.addEventListener('scroll', function() {
+                    var scrollTop = container.scrollTop;
+                    var scrollHeight = container.scrollHeight;
+                    var clientHeight = container.clientHeight;
+                    
+                    // 当滚动到距离底部20%时预加载
+                    if (scrollTop + clientHeight >= scrollHeight * 0.8) {
+                        preloadManager.preloadNextPage(currentPage, totalPages, loadFunction);
+                    }
+                });
+            }
+        }
+        
+        // DOM操作优化工具
+        var domUtils = {
+            // 使用DocumentFragment批量操作DOM
+            createFragment: function() {
+                return document.createDocumentFragment();
+            },
+            
+            // 批量添加元素
+            batchAppend: function(parent, elements) {
+                var fragment = this.createFragment();
+                elements.forEach(function(element) {
+                    fragment.appendChild(element);
+                });
+                parent.appendChild(fragment);
+            },
+            
+            // 批量修改样式
+            batchStyle: function(element, styles) {
+                Object.keys(styles).forEach(function(prop) {
+                    element.style[prop] = styles[prop];
+                });
+            },
+            
+            // 使用CSS类批量修改样式
+            toggleClass: function(element, className, force) {
+                if (element.classList) {
+                    element.classList.toggle(className, force);
+                } else {
+                    var classes = element.className.split(' ');
+                    var existingIndex = classes.indexOf(className);
+                    if (force === true || (force === undefined && existingIndex === -1)) {
+                        classes.push(className);
+                    } else if (force === false || (force === undefined && existingIndex !== -1)) {
+                        classes.splice(existingIndex, 1);
+                    }
+                    element.className = classes.join(' ');
+                }
+            },
+            
+            // 避免布局抖动的动画
+            animate: function(element, properties, duration, callback) {
+                var start = performance.now();
+                var startProperties = {};
+                
+                // 保存起始属性
+                Object.keys(properties).forEach(function(prop) {
+                    startProperties[prop] = parseFloat(getComputedStyle(element)[prop]) || 0;
+                });
+                
+                function update(currentTime) {
+                    var elapsed = currentTime - start;
+                    var progress = Math.min(elapsed / duration, 1);
+                    
+                    // 线性插值
+                    Object.keys(properties).forEach(function(prop) {
+                        var startValue = startProperties[prop];
+                        var endValue = parseFloat(properties[prop]);
+                        var currentValue = startValue + (endValue - startValue) * progress;
+                        element.style[prop] = currentValue + (properties[prop].toString().includes('%') ? '%' : 'px');
+                    });
+                    
+                    if (progress < 1) {
+                        requestAnimationFrame(update);
+                    } else if (callback) {
+                        callback();
+                    }
+                }
+                
+                requestAnimationFrame(update);
+            },
+            
+            // 防抖DOM操作
+            debouncedDomOperation: function(operation, wait) {
+                var timeout;
+                return function() {
+                    var context = this;
+                    var args = arguments;
+                    clearTimeout(timeout);
+                    timeout = setTimeout(function() {
+                        operation.apply(context, args);
+                    }, wait);
+                };
+            },
+            
+            // 节流DOM操作
+            throttledDomOperation: function(operation, limit) {
+                var inProgress;
+                return function() {
+                    var context = this;
+                    var args = arguments;
+                    if (!inProgress) {
+                        operation.apply(context, args);
+                        inProgress = true;
+                        setTimeout(function() {
+                            inProgress = false;
+                        }, limit);
+                    }
+                };
+            }
+        };
+        
         // 防抖版本的筛选和搜索函数
         var debouncedFilterProducts = debounce(function() {
             productFilters.category = document.getElementById('categoryFilter').value;
@@ -999,6 +1639,60 @@
             applyProductFilters();
         }, 300);
         
+        // 为个人数据筛选函数添加防抖
+        var debouncedFilterPersonalByManager = debounce(function() {
+            var managerName = document.getElementById('personalManagerFilter').value;
+            currentManagerFilter = managerName || null;
+            personalPage = 1;
+            loadPersonalDataWithPagination();
+            updateFilterTags('personal');
+        }, 300);
+        
+        var debouncedFilterPersonalByType = debounce(function() {
+            var type = document.getElementById('personalTypeFilter').value;
+            currentTypeFilter = type || null;
+            personalPage = 1;
+            loadPersonalDataWithPagination();
+            updateFilterTags('personal');
+        }, 300);
+        
+        var debouncedFilterPersonalByDate = debounce(function() {
+            var startDate = document.getElementById('personalStartDate').value;
+            var endDate = document.getElementById('personalEndDate').value;
+            currentStartDate = startDate || null;
+            currentEndDate = endDate || null;
+            personalPage = 1;
+            loadPersonalDataWithPagination();
+            updateFilterTags('personal');
+        }, 300);
+        
+        // 为公海池数据筛选函数添加防抖
+        var debouncedFilterPublicByManager = debounce(function() {
+            var managerName = document.getElementById('publicManagerFilter').value;
+            currentManagerFilter = managerName || null;
+            publicPage = 1;
+            loadPublicData();
+            updateFilterTags('public');
+        }, 300);
+        
+        var debouncedFilterPublicByType = debounce(function() {
+            var type = document.getElementById('publicTypeFilter').value;
+            currentTypeFilter = type || null;
+            publicPage = 1;
+            loadPublicData();
+            updateFilterTags('public');
+        }, 300);
+        
+        var debouncedFilterPublicByDate = debounce(function() {
+            var startDate = document.getElementById('publicStartDate').value;
+            var endDate = document.getElementById('publicEndDate').value;
+            currentStartDate = startDate || null;
+            currentEndDate = endDate || null;
+            publicPage = 1;
+            loadPublicData();
+            updateFilterTags('public');
+        }, 300);
+        
         function init() {
             // 检查URL是否包含登录参数
             const urlParams = new URLSearchParams(window.location.search);
@@ -1372,11 +2066,17 @@
             } catch (e) {
                 console.error('加载数据失败:', e);
             }
+            
+            // 预加载其他标签页数据
+            preloadManager.preloadOtherTabs(tabName);
+            
+            // 初始化图片懒加载
+            preloadManager.initImageLazyLoading();
         }
         
         function loadPersonalData() {
-            // 总是加载所有数据，然后在前端进行筛选和分页
-            loadAllPersonalData();
+            // 使用真正的后端分页加载
+            loadPersonalDataWithPagination();
         }
         
         function loadAllPersonalData() {
@@ -1419,7 +2119,7 @@
             xhr.send();
         }
         
-        function displayFilteredPersonalData() {
+        function displayFilteredPersonalData(total, totalPages) {
             var personalBody = document.getElementById('personalBody');
             var personalEmpty = document.getElementById('personalEmpty');
             var managerHeader = document.getElementById('managerHeader');
@@ -1534,21 +2234,16 @@
             
             // 更新统计信息
             if (personalTotalCount) {
-                personalTotalCount.textContent = filteredUsers.length;
+                personalTotalCount.textContent = total;
             }
             
-            console.log('过滤后的数据量:', filteredUsers.length);
+            console.log('加载的数据量:', allPersonalData.length, '总数据量:', total, '总页数:', totalPages);
             
-            if (filteredUsers.length > 0) {
+            if (allPersonalData.length > 0) {
                 personalEmpty.style.display = 'none';
                 
-                // 自主分页：根据过滤后的数据和当前页码计算显示数据
-                var startIndex = (personalPage - 1) * personalPageSize;
-                var endIndex = startIndex + personalPageSize;
-                var displayUsers = filteredUsers.slice(startIndex, endIndex);
-                
-                // 计算总页数
-                var totalPages = Math.ceil(filteredUsers.length / personalPageSize);
+                // 直接使用后端返回的数据
+                var displayUsers = allPersonalData;
                 
                 for (var i = 0; i < displayUsers.length; i++) {
                     var user = displayUsers[i];
@@ -1564,7 +2259,7 @@
                     
                     // 生成简道云按钮，根据sync_statuss字段决定状态
                     var jianDaoYunButton = '';
-                    if (user.sync_statuss === 0 || user.sync_statuss === 1) {
+                    if (user.sync_statuss !== null && user.sync_statuss !== undefined) {
                         // 已写入简道云，显示灰色不可点击按钮
                         jianDaoYunButton = '<button style="padding: 4px 8px; background-color: #ccc; color: #666; border: none; border-radius: 4px; font-size: 12px; cursor: not-allowed;" disabled>已写入简道云</button>';
                     } else {
@@ -1600,7 +2295,7 @@
                 }
                 
                 // 渲染分页控件
-                renderPersonalPagination(personalPage, totalPages, filteredUsers.length);
+                renderPersonalPagination(personalPage, totalPages, total);
             } else {
                 personalEmpty.style.display = 'block';
                 // 没有数据时隐藏分页控件
@@ -1614,7 +2309,7 @@
             
             // 对于已跟进和未跟进，总是加载所有数据后进行筛选
             if (filter === 'followed' || filter === 'unfollowed') {
-                loadAllPersonalData();
+                loadPersonalDataWithPagination();
             } else {
                 // 对于全部，使用正常的分页加载
                 loadPersonalData();
@@ -1870,8 +2565,8 @@
             if (currentFilterTable === 'personal') {
                 // 个人表格筛选
                 personalPage = 1;
-                // 总是加载所有数据以便筛选
-                loadAllPersonalData();
+                // 使用后端分页加载数据
+                loadPersonalDataWithPagination();
                 
                 // 更新个人表格筛选标签
                 updateFilterTags('personal');
@@ -1960,7 +2655,7 @@
                         if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
                             displayFilteredPersonalData();
                         } else {
-                            loadAllPersonalData();
+                            loadPersonalDataWithPagination();
                         }
                     } else {
                         publicPage = 1;
@@ -2017,7 +2712,7 @@
                         if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
                             displayFilteredPersonalData();
                         } else {
-                            loadAllPersonalData();
+                            loadPersonalDataWithPagination();
                         }
                     } else {
                         publicPage = 1;
@@ -2074,7 +2769,7 @@
                         if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
                             displayFilteredPersonalData();
                         } else {
-                            loadAllPersonalData();
+                            loadPersonalDataWithPagination();
                         }
                     } else {
                         publicPage = 1;
@@ -2094,8 +2789,8 @@
             currentPhoneSearch = searchValue || null;
             personalPage = 1; // 重置为第一页
             
-            // 总是加载所有数据以便筛选
-            loadAllPersonalData();
+            // 使用后端分页加载数据
+            loadPersonalDataWithPagination();
             
             // 更新筛选标签
             updateFilterTags('personal');
@@ -2118,8 +2813,8 @@
             currentPhoneSearch = null;
             personalPage = 1; // 重置为第一页
             
-            // 总是加载所有数据以便筛选
-            loadAllPersonalData();
+            // 使用后端分页加载数据
+            loadPersonalDataWithPagination();
             
             // 更新筛选标签
             updateFilterTags('personal');
@@ -2138,17 +2833,7 @@
         
         // 筛选个人数据创建时间
         function filterPersonalByDate() {
-            var startDate = document.getElementById('personalStartDate').value;
-            var endDate = document.getElementById('personalEndDate').value;
-            currentStartDate = startDate || null;
-            currentEndDate = endDate || null;
-            personalPage = 1; // 重置为第一页
-            
-            // 总是加载所有数据以便筛选
-            loadAllPersonalData();
-            
-            // 更新筛选标签
-            updateFilterTags('personal');
+            debouncedFilterPersonalByDate();
         }
         
         // 重置个人数据创建时间筛选
@@ -2159,8 +2844,8 @@
             currentEndDate = null;
             personalPage = 1; // 重置为第一页
             
-            // 总是加载所有数据以便筛选
-            loadAllPersonalData();
+            // 使用后端分页加载数据
+            loadPersonalDataWithPagination();
             
             // 更新筛选标签
             updateFilterTags('personal');
@@ -2168,15 +2853,7 @@
         
         // 筛选公海池数据创建时间
         function filterPublicByDate() {
-            var startDate = document.getElementById('publicStartDate').value;
-            var endDate = document.getElementById('publicEndDate').value;
-            currentStartDate = startDate || null;
-            currentEndDate = endDate || null;
-            publicPage = 1; // 重置为第一页
-            loadPublicData(); // 重新加载公海池数据
-            
-            // 更新筛选标签
-            updateFilterTags('public');
+            debouncedFilterPublicByDate();
         }
 
          // 后台加载剩余货源数据
@@ -2247,53 +2924,28 @@
         
         // 筛选个人数据负责人
         function filterPersonalByManager() {
-            var managerName = document.getElementById('personalManagerFilter').value;
-            currentManagerFilter = managerName || null;
-            personalPage = 1; // 重置为第一页
-            
-            // 总是加载所有数据以便筛选
-            loadAllPersonalData();
-            
-            // 更新筛选标签
-            updateFilterTags('personal');
+            debouncedFilterPersonalByManager();
         }
         
         // 筛选公海池数据负责人
         function filterPublicByManager() {
-            var managerName = document.getElementById('publicManagerFilter').value;
-            currentManagerFilter = managerName || null;
-            publicPage = 1; // 重置为第一页
-            loadPublicData(); // 重新加载公海池数据
-            
-            // 更新筛选标签
-            updateFilterTags('public');
+            debouncedFilterPublicByManager();
         }
         
         // 筛选个人数据类型
         function filterPersonalByType() {
-            var type = document.getElementById('personalTypeFilter').value;
-            currentTypeFilter = type || null;
-            personalPage = 1; // 重置为第一页
-            
-            // 总是加载所有数据以便筛选
-            loadAllPersonalData();
-            
-            // 更新筛选标签
-            updateFilterTags('personal');
+            debouncedFilterPersonalByType();
         }
         
         // 筛选公海池数据类型
         function filterPublicByType() {
-            var type = document.getElementById('publicTypeFilter').value;
-            currentTypeFilter = type || null;
-            publicPage = 1; // 重置为第一页
-            loadPublicData(); // 重新加载公海池数据
-            
-            // 更新筛选标签
-            updateFilterTags('public');
+            debouncedFilterPublicByType();
         }
         
         function loadPublicData() {
+            // 显示表格骨架屏
+            loadingManager.showTableSkeleton('publicBody');
+            
             var userRole = userInfo.loginInfo.projectName;
             var usersManagements = userInfo.usersManagements;
             
@@ -2316,6 +2968,8 @@
             xhr.onreadystatechange = function() {
                 if (xhr.readyState == 4 && xhr.status == 200) {
                     var data = JSON.parse(xhr.responseText);
+                    // 隐藏骨架屏
+                    loadingManager.hideTableSkeleton('publicBody');
                     // 保存公海池数据到全局变量
                     if (data.users) {
                         allPublicData = data.users;
@@ -2326,6 +2980,10 @@
                     var pages = data.pages || 1;
                     var total = data.total || 0;
                     renderPublicPagination(page, pages, total);
+                } else if (xhr.readyState == 4) {
+                    // 隐藏骨架屏
+                    loadingManager.hideTableSkeleton('publicBody');
+                    console.error('加载公海池数据失败:', xhr.status, xhr.statusText);
                 }
             };
             xhr.send();
@@ -2428,6 +3086,9 @@
         
         // 加载货源数据
         function loadProducts() {
+            // 显示表格骨架屏
+            loadingManager.showTableSkeleton('productsBody');
+            
             var userRole = userInfo.loginInfo.projectName;
             var userName = userInfo.loginInfo.userName;
             
@@ -2444,6 +3105,8 @@
                 var cachedAllData = getCachedData('products', 'all');
                 if (cachedAllData && cachedAllData.products.length > 0) {
                     console.log('使用缓存中的完整数据进行筛选');
+                    // 隐藏骨架屏
+                    loadingManager.hideTableSkeleton('productsBody');
                     applyProductFilters();
                     isLoadingProducts = false;
                     return;
@@ -2457,6 +3120,8 @@
                 allProducts = cachedData.products || [];
                 productsTotal = cachedData.total || 0;
                 productsTotalPages = cachedData.pages || Math.ceil(productsTotal / productsPageSize);
+                // 隐藏骨架屏
+                loadingManager.hideTableSkeleton('productsBody');
                 // 显示当前页数据
                 displayProducts(allProducts);
                 // 确保使用当前的productsPageSize值渲染分页组件
@@ -2485,6 +3150,8 @@
                     pages: productsTotalPages
                 });
                 
+                // 隐藏骨架屏
+                loadingManager.hideTableSkeleton('productsBody');
                 // 显示当前页数据
                 displayProducts(allProducts);
                 // 确保使用当前的productsPageSize值渲染分页组件
@@ -2506,6 +3173,8 @@
                         allProducts = data.products || [];
                         productsTotal = data.total || 0;
                         productsTotalPages = data.pages || Math.ceil(productsTotal / productsPageSize);
+                        // 隐藏骨架屏
+                        loadingManager.hideTableSkeleton('productsBody');
                         // 显示当前页数据
                         displayProducts(allProducts);
                         // 确保使用当前的productsPageSize值渲染分页组件
@@ -2518,9 +3187,13 @@
                             pages: productsTotalPages
                         });
                     } else {
+                        // 隐藏骨架屏
+                        loadingManager.hideTableSkeleton('productsBody');
                         showAlert('加载货源失败: ' + data.message);
                     }
                 } else if (xhr.readyState == 4) {
+                    // 隐藏骨架屏
+                    loadingManager.hideTableSkeleton('productsBody');
                     console.error('加载货源失败:', xhr.status, xhr.statusText);
                     showAlert('加载货源失败，请刷新页面重试');
                 }
@@ -4592,7 +5265,7 @@
                         
                         // 生成简道云按钮，根据sync_statuss字段决定状态
                         var jianDaoYunButton = '';
-                        if (user.sync_statuss === 0 || user.sync_statuss === 1) {
+                        if (user.sync_statuss !== null && user.sync_statuss !== undefined) {
                             // 已写入简道云，显示灰色不可点击按钮
                             jianDaoYunButton = '<button style="padding: 4px 8px; background-color: #ccc; color: #666; border: none; border-radius: 4px; font-size: 12px; cursor: not-allowed;" disabled>已写入简道云</button>';
                         } else {
@@ -6681,6 +7354,62 @@
                 }
             });
         }
+        
+        // 新的分页加载函数
+        function loadPersonalDataWithPagination() {
+            if (isLoadingAllData) return;
+            
+            // 显示表格骨架屏
+            loadingManager.showTableSkeleton('personalBody');
+            
+            isLoadingAllData = true;
+            var userRole = userInfo.loginInfo.projectName;
+            var userName = userInfo.loginInfo.userName;
+            var usersManagements = userInfo.usersManagements;
+            
+            // 构建查询参数，使用当前页码和每页显示条数
+            var params = {
+                page: personalPage,
+                size: personalPageSize,
+                userRole: userRole,
+                followup: userName,
+                userName: userName,
+                managercompany: usersManagements.managercompany || '',
+                managerdepartment: usersManagements.managerdepartment || '',
+                organization: usersManagements.organization || '',
+                role: usersManagements.role || '',
+                filter: personalFilter,
+                managerName: currentManagerFilter || '',
+                phoneNumber: currentPhoneSearch || '',
+                startDate: currentStartDate || '',
+                endDate: currentEndDate || '',
+                type: currentTypeFilter || ''
+            };
+            
+            var url = '/KH/api/users?' + objectToQueryString(params);
+            
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', url, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    var data = JSON.parse(xhr.responseText);
+                    allPersonalData = data.users || [];
+                    var total = data.total || 0;
+                    var totalPages = data.pages || Math.ceil(total / personalPageSize);
+                    isLoadingAllData = false;
+                    // 隐藏骨架屏
+                    loadingManager.hideTableSkeleton('personalBody');
+                    // 加载完成后显示数据
+                    displayFilteredPersonalData(total, totalPages);
+                } else if (xhr.readyState == 4) {
+                    isLoadingAllData = false;
+                    // 隐藏骨架屏
+                    loadingManager.hideTableSkeleton('personalBody');
+                    console.error('加载个人数据失败:', xhr.status, xhr.statusText);
+                }
+            };
+            xhr.send();
+        }
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/src/main/resources/static/login.html b/web/src/main/resources/static/login.html
index 0256241..12cd723 100644
--- a/web/src/main/resources/static/login.html
+++ b/web/src/main/resources/static/login.html
@@ -292,12 +292,12 @@
                     loadingOverlay.appendChild(loadingText);
                     document.body.appendChild(loadingOverlay);
                     
-                    // 延迟3秒后跳转到主页面
+                    // 延迟2秒后跳转到主页面
                     console.log('准备跳转到index.html...');
                     setTimeout(() => {
                         // 优化：使用绝对路径跳转
                         window.location.href = '/KH/index.html';
-                    }, 3000);
+                    }, 2000);
                 } else {
                     console.log('登录失败，错误信息:', data.message);
                     errorMessage.textContent = data.message;