这整个页面，要以产品为分类，比如安全产品，GLS;GLR - Follow Up Deployment

index.html

@@ -96,9 +96,22 @@
                         <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium active-tab">
                             首页
                         </a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
-                            产品
-                        </a>
+                        <div class="relative group">
+                            <button class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                                产品分类
+                                <i class="fas fa-chevron-down ml-1 text-xs"></i>
+                            </button>
+                            <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 invisible group-hover:visible">
+                                <div class="py-1">
+                                    <div class="px-4 py-2 text-sm text-gray-700 font-medium border-b">产品系列</div>
+                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">安全产品</a>
+                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">GLS系列</a>
+                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">GLR系列</a>
+                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">工业控制器</a>
+                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">传感器</a>
+                                </div>
+                            </div>
+                        </div>
                         <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                             支持
                         </a>
@@ -140,54 +153,58 @@
         <!-- 侧边栏 - 移动端 -->
         <div id="sidebar" class="sidebar fixed md:relative inset-y-0 left-0 z-20 w-64 bg-white shadow-md md:shadow-none md:transform-none overflow-y-auto md:block md:w-1/4 lg:w-1/5 md:pr-4">
             <div class="p-4">
-                <h3 class="text-lg font-medium text-gray-900 mb-4">文档分类</h3>
+                <h3 class="text-lg font-medium text-gray-900 mb-4">产品分类</h3>
                 <ul class="space-y-2">
                     <li>
                         <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium text-gray-900 rounded-md bg-blue-50">
-                            <i class="fas fa-book mr-3 text-blue-500"></i>
-                            说明书
+                            <i class="fas fa-shield-alt mr-3 text-blue-500"></i>
+                            安全产品
                         </a>
                     </li>
                     <li>
                         <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-blue-50">
-                            <i class="fas fa-user mr-3 text-blue-400"></i>
-                            用户手册
+                            <i class="fas fa-bolt mr-3 text-blue-400"></i>
+                            GLS系列
                         </a>
                     </li>
                     <li>
                         <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-blue-50">
-                            <i class="fas fa-list mr-3 text-blue-400"></i>
-                            产品目录
+                            <i class="fas fa-plug mr-3 text-blue-400"></i>
+                            GLR系列
                         </a>
                     </li>
                     <li>
                         <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-blue-50">
-                            <i class="fas fa-file-alt mr-3 text-blue-400"></i>
-                            技术资料
+                            <i class="fas fa-microchip mr-3 text-blue-400"></i>
+                            工业控制器
                         </a>
                     </li>
                     <li>
                         <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-blue-50">
-                            <i class="fas fa-sliders-h mr-3 text-blue-400"></i>
-                            技术参数
+                            <i class="fas fa-rss mr-3 text-blue-400"></i>
+                            传感器
                         </a>
                     </li>
+                </ul>
+
+                <h3 class="text-lg font-medium text-gray-900 mt-8 mb-4">文档类型</h3>
+                <ul class="space-y-2">
                     <li>
                         <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-blue-50">
-                            <i class="fas fa-certificate mr-3 text-blue-400"></i>
-                            认证证书
+                            <i class="fas fa-book mr-3 text-blue-400"></i>
+                            说明书
                         </a>
                     </li>
                     <li>
                         <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-blue-50">
-                            <i class="fas fa-video mr-3 text-blue-400"></i>
-                            视频教程
+                            <i class="fas fa-file-alt mr-3 text-blue-400"></i>
+                            技术资料
                         </a>
                     </li>
                     <li>
                         <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-blue-50">
-                            <i class="fas fa-file-pdf mr-3 text-blue-400"></i>
-                            PDF文档
+                            <i class="fas fa-video mr-3 text-blue-400"></i>
+                            视频教程
                         </a>
                     </li>
                 </ul>
@@ -240,8 +257,22 @@
             
             <!-- 文档标题和描述 -->
             <div class="bg-white shadow-sm rounded-lg p-6 mb-6">
-                <h1 class="text-2xl font-bold text-gray-900 mb-2">XC-5000 工业控制器说明书</h1>
-                <p class="text-gray-600 mb-4">最新版本: v3.2.1 | 更新日期: 2023-06-15 | 文档编号: DOC-XC5000-2023</p>
+                <div class="flex items-start">
+                    <div class="flex-1">
+                        <h1 class="text-2xl font-bold text-gray-900 mb-2">XC-5000 工业控制器说明书</h1>
+                        <div class="text-sm text-gray-500 mb-2">产品系列: <span class="text-blue-600 font-medium">XC系列工业控制器</span></div>
+                        <p class="text-gray-600 mb-4">最新版本: v3.2.1 | 更新日期: 2023-06-15 | 文档编号: DOC-XC5000-2023</p>
+                    </div>
+                    <div class="bg-blue-50 border border-blue-100 rounded-lg p-3 min-w-[200px]">
+                        <p class="text-sm font-medium text-blue-800 mb-1">相关产品系列</p>
+                        <ul class="text-xs space-y-1">
+                            <li><a href="#" class="text-blue-600 hover:underline">XC-3000系列</a></li>
+                            <li><a href="#" class="text-blue-600 hover:underline">XC-4000系列</a></li>
+                            <li><a href="#" class="text-blue-600 hover:underline">XC-5000系列</a></li>
+                            <li><a href="#" class="text-blue-600 hover:underline">XC-6000系列</a></li>
+                        </ul>
+                    </div>
+                </div>
                 <div class="flex flex-wrap gap-2 mb-4">
                     <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">安装指南</span>
                     <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">操作手册</span>
@@ -265,9 +296,6 @@
                     <li class="mr-2" role="presentation">
                         <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" id="operation-tab" data-tabs-target="#operation" type="button" role="tab" aria-controls="operation" aria-selected="false">操作说明</button>
                     </li>
-                    <li role="presentation">
-                        <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" id="pdf-tab" data-tabs-target="#pdf" type="button" role="tab" aria-controls="pdf" aria-selected="false">PDF文档</button>
-                    </li>
                 </ul>
             </div>
             
@@ -674,74 +702,98 @@
                         </div>
                     </div>
                 </div>
-                
-                <!-- PDF文档 -->
-                <div class="hidden p-4 bg-white rounded-lg shadow-sm" id="pdf" role="tabpanel" aria-labelledby="pdf-tab">
-                    <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-xl font-semibold text-gray-800">PDF文档</h2>
-                        <div class="flex space-x-2">
-                            <button id="prev-page" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-md text-sm font-medium">
-                                <i class="fas fa-arrow-left mr-1"></i>上一页
-                            </button>
-                            <span id="page-num" class="px-3 py-1 text-sm">第 <span id="current-page">1</span> 页 / 共 <span id="total-pages">-</span> 页</span>
-                            <button id="next-page" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-md text-sm font-medium">
-                                下一页<i class="fas fa-arrow-right ml-1"></i>
-                            </button>
-                            <button id="download-pdf" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-md text-sm font-medium">
-                                <i class="fas fa-download mr-1"></i>下载
+            </div>
+            
+            <!-- 相关文档 -->
+            <div class="mt-8">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold text-gray-800">相关文档</h2>
+                    <div class="flex space-x-3">
+                        <span class="text-sm font-medium text-gray-500">产品筛选:</span>
+                        <select class="text-sm border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                            <option>所有产品</option>
+                            <option>工业控制器</option>
+                            <option>传感器</option>
+                            <option>驱动器</option>
+                        </select>
+                        <select class="text-sm border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                            <option>所有系列</option>
+                            <option>XC系列</option>
+                            <option>XP系列</option>
+                            <option>ST系列</option>
+                            <option>DM系列</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- 工业控制器文档 -->
+                    <div class="document-card border border-gray-200 rounded-lg p-6 hover:shadow-md transition duration-150">
+                        <div class="flex items-start mb-4">
+                            <div class="bg-blue-100 p-3 rounded-lg mr-4">
+                                <i class="fas fa-microchip text-blue-500 text-2xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-gray-800">XP-2000 操作手册</h3>
+                                <p class="text-sm text-gray-500 mt-1">XP系列工业控制器操作指南</p>
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">工业控制器</span>
+                            <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded">XP系列</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-500">PDF · 4.1MB</span>
+                            <button class="text-blue-500 hover:text-blue-700 text-sm font-medium flex items-center">
+                                查看 <i class="fas fa-chevron-right ml-1 text-xs"></i>
                             </button>
                         </div>
                     </div>
-                    
-                    <div class="pdf-container mb-4">
-                        <canvas id="pdf-canvas"></canvas>
+
+                    <!-- 传感器文档 -->
+                    <div class="document-card border border-gray-200 rounded-lg p-6 hover:shadow-md transition duration-150">
+                        <div class="flex items-start mb-4">
+                            <div class="bg-green-100 p-3 rounded-lg mr-4">
+                                <i class="fas fa-rss text-green-500 text-2xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-gray-800">ST-300 技术手册</h3>
+                                <p class="text-sm text-gray-500 mt-1">高精度温度传感器技术规格</p>
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">传感器</span>
+                            <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded">ST系列</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-500">PDF · 2.5MB</span>
+                            <button class="text-blue-500 hover:text-blue-700 text-sm font-medium flex items-center">
+                                查看 <i class="fas fa-chevron-right ml-1 text-xs"></i>
+                            </button>
+                        </div>
                     </div>
-                    
-                    <div class="bg-gray-50 p-4 rounded-lg">
-                        <h3 class="text-lg font-medium text-gray-800 mb-3">相关文档</h3>
-                        <div class="grid md:grid-cols-3 gap-4">
-                            <a href="#" class="document-card border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150">
-                                <div class="flex items-start">
-                                    <div class="bg-red-100 p-3 rounded-lg mr-3">
-                                        <i class="fas fa-file-pdf text-red-500 text-xl"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-medium text-gray-800">XC-5000 快速入门指南</h4>
-                                        <p class="text-sm text-gray-500 mt-1">PDF · 2.4MB · v1.2</p>
-                                    </div>
-                                </div>
-                            </a>
-                            <a href="#" class="document-card border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150">
-                                <div class="flex items-start">
-                                    <div class="bg-blue-100 p-3 rounded-lg mr-3">
-                                        <i class="fas fa-file-pdf text-blue-500 text-xl"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-medium text-gray-800">XC-5000 技术参考手册</h4>
-                                        <p class="text-sm text-gray-500 mt-1">PDF · 5.7MB · v3.1</p>
-                                    </div>
-                                </div>
-                            </a>
-                            <a href="#" class="document-card border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150">
-                                <div class="flex items-start">
-                                    <div class="bg-green-100 p-3 rounded-lg mr-3">
-                                        <i class="fas fa-file-pdf text-green-500 text-xl"></i>
-                                    </div>
-                                    <div>
-                                        <h4 class="font-medium text-gray-800">XC-5000 安全认证证书</h4>
-                                        <p class="text-sm text-gray-500 mt-1">PDF · 1.1MB · 2023</p>
-                                    </div>
-                                </div>
-                            </a>
+
+                    <!-- 驱动器文档 -->
+                    <div class="document-card border border-gray-200 rounded-lg p-6 hover:shadow-md transition duration-150">
+                        <div class="flex items-start mb-4">
+                            <div class="bg-purple-100 p-3 rounded-lg mr-4">
+                                <i class="fas fa-cog text-purple-500 text-2xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-gray-800">DM-800 安装指南</h3>
+                                <p class="text-sm text-gray-500 mt-1">伺服驱动器安装与配置</p>
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">驱动器</span>
+                            <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded">DM系列</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-500">PDF · 3.7MB</span>
+                            <button class="text-blue-500 hover:text-blue-700 text-sm font-medium flex items-center">
+                                查看 <i class="fas fa-chevron-right ml-1 text-xs"></i>
+                            </button>
                         </div>
                     </div>
-                </div>
-            </div>
-            
-            <!-- 相关文档 -->
-            <div class="mt-8">
-                <h2 class="text-xl font-semibold text-gray-800 mb-4">相关文档</h2>
-                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                     <div class="document-card border border-gray-200 rounded-lg p-6 hover:shadow-md transition duration-150">
                         <div class="flex items-start mb-4">
                             <div class="bg-blue-100 p-3 rounded-lg mr-4">
@@ -819,10 +871,11 @@
                 <div>
                     <h3 class="text-sm font-semibold uppercase tracking-wider">产品</h3>
                     <ul class="mt-4 space-y-2">
+                        <li><a href="#" class="text-gray-300 hover:text-white">安全产品</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white">GLS系列</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white">GLR系列</a></li>
                         <li><a href="#" class="text-gray-300 hover:text-white">工业控制器</a></li>
                         <li><a href="#" class="text-gray-300 hover:text-white">传感器</a></li>
-                        <li><a href="#" class="text-gray-300 hover:text-white">执行器</a></li>
-                        <li><a href="#" class="text-gray-300 hover:text-white">通信模块</a></li>
                     </ul>
                 </div>
                 <div>
@@ -923,10 +976,6 @@
                 
                 target.classList.remove('hidden');
                 
-                // 如果是PDF选项卡，初始化PDF查看器
-                if (tab.id === 'pdf-tab') {
-                    initPDFViewer();
-                }
             });
         });
         
@@ -950,87 +999,30 @@
             });
         });
         
-        // PDF查看器功能
-        let pdfDoc = null,
-            pageNum = 1,
-            pageRendering = false,
-            pageNumPending = null,
-            scale = 1.5,
-            canvas = document.getElementById('pdf-canvas'),
-            ctx = canvas.getContext('2d');
-        
-        function initPDFViewer() {
-            // 设置PDF.js worker路径
-            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
-            
-            // 加载示例PDF
-            const loadingTask = pdfjsLib.getDocument('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf');
-            
-            loadingTask.promise.then(function(pdfDoc_) {
-                pdfDoc = pdfDoc_;
-                document.getElementById('total-pages').textContent = pdfDoc.numPages;
-                
-                // 初始加载第一页
-                renderPage(pageNum);
-            });
-        }
+        // 侧边栏分类展开/折叠
+        const sidebarCategories = document.querySelectorAll('.sidebar-link.cursor-pointer');
         
-        function renderPage(num) {
-            pageRendering = true;
-            
-            pdfDoc.getPage(num).then(function(page) {
-                const viewport = page.getViewport({ scale: scale });
-                canvas.height = viewport.height;
-                canvas.width = viewport.width;
-                
-                const renderContext = {
-                    canvasContext: ctx,
-                    viewport: viewport
-                };
+        sidebarCategories.forEach(category => {
+            category.addEventListener('click', (e) => {
+                // 防止点击子元素时触发
+                if(e.target.tagName === 'A') return;
                 
-                const renderTask = page.render(renderContext);
+                const icon = category.querySelector('i');
+                const sublist = category.nextElementSibling;
                 
-                renderTask.promise.then(function() {
-                    pageRendering = false;
-                    document.getElementById('current-page').textContent = num;
-                    
-                    if (pageNumPending !== null) {
-                        renderPage(pageNumPending);
-                        pageNumPending = null;
-                    }
-                });
+                // 如果是打开状态则关闭，否则打开
+                if(sublist.classList.contains('hidden')) {
+                    sublist.classList.remove('hidden');
+                    icon.classList.remove('fa-chevron-down');
+                    icon.classList.add('fa-chevron-up');
+                } else {
+                    sublist.classList.add('hidden');
+                    icon.classList.remove('fa-chevron-up');
+                    icon.classList.add('fa-chevron-down');
+                }
             });
-        }
-        
-        function queueRenderPage(num) {
-            if (pageRendering) {
-                pageNumPending = num;
-            } else {
-                renderPage(num);
-            }
-        }
-        
-        document.getElementById('prev-page').addEventListener('click', function() {
-            if (pageNum <= 1) {
-                return;
-            }
-            pageNum--;
-            queueRenderPage(pageNum);
         });
-        
-        document.getElementById('next-page').addEventListener('click', function() {
-            if (pageNum >= pdfDoc.numPages) {
-                return;
-            }
-            pageNum++;
-            queueRenderPage(pageNum);
-        });
-        
-        document.getElementById('download-pdf').addEventListener('click', function() {
-            // 这里应该是实际PDF的下载链接
-            window.open('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf', '_blank');
-        });
-        
+
         // 默认显示概述选项卡
         document.getElementById('overview-tab').click();
     </script>