支持折叠

view/recorder/components/data_operators.html

@@ -2,13 +2,15 @@
     <div class="recorder-operators {$options.css_class|default=''}" style="background: #ffffff; border: 1px solid #e6e6e6; border-radius: 6px; padding: 15px;">
         {if isset($operators) && !empty($operators)}
             <div style="margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;">
-                <h5 style="margin: 0; color: #333; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px;">
+                <h5 id="operatorsToggle" style="margin: 0; color: #333; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; transition: all 0.3s ease;"
+                    onmouseover="this.style.color='#52c41a';" onmouseout="this.style.color='#333';">
+                    <i id="operatorsToggleIcon" class="layui-icon layui-icon-down" style="color: #52c41a; font-size: 12px; transition: transform 0.3s ease;"></i>
                     <i class="layui-icon layui-icon-user" style="color: #52c41a; font-size: 16px;"></i>
                     操作用户 ({$operators|count})
                 </h5>
             </div>
             
-            <div style="display: flex; flex-direction: column; gap: 15px;">
+            <div id="operatorsContent" style="display: none; flex-direction: column; gap: 15px; overflow: hidden; transition: all 0.3s ease;">
                 {volist name="operators" id="operator"}
                     <div class="recorder-operator recorder-slide-in" data-user-id="{$operator.user_id}" 
                          style="display: flex; align-items: flex-start; padding: 15px; background: #fafafa; border-radius: 6px; border-left: 3px solid #52c41a; transition: all 0.3s ease; cursor: pointer;"
@@ -79,6 +81,28 @@
     animation: recorderSlideIn 0.3s ease-in-out;
 }
 
+/* 折叠相关样式 */
+.operators-collapsed #operatorsToggleIcon {
+    transform: rotate(-90deg);
+}
+
+.operators-expanded #operatorsToggleIcon {
+    transform: rotate(0deg);
+}
+
+.operators-content-hidden {
+    max-height: 0 !important;
+    opacity: 0;
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.operators-content-visible {
+    max-height: 2000px;
+    opacity: 1;
+}
+
 @media (max-width: 768px) {
     .recorder-operators {
         padding: 12px !important;
@@ -111,6 +135,50 @@
 (function() {
     'use strict';
     
+    // 折叠/展开功能
+    function initCollapse() {
+        var toggle = document.getElementById('operatorsToggle');
+        var content = document.getElementById('operatorsContent');
+        var icon = document.getElementById('operatorsToggleIcon');
+        var container = document.querySelector('.recorder-operators');
+        
+        if (!toggle || !content || !icon || !container) return;
+        
+        // 设置默认折叠状态
+        container.classList.add('operators-collapsed');
+        content.classList.add('operators-content-hidden');
+        
+        // 点击折叠/展开
+        toggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            var isCollapsed = container.classList.contains('operators-collapsed');
+            
+            if (isCollapsed) {
+                // 展开
+                container.classList.remove('operators-collapsed');
+                container.classList.add('operators-expanded');
+                content.classList.remove('operators-content-hidden');
+                content.classList.add('operators-content-visible');
+                content.style.display = 'flex';
+            } else {
+                // 折叠
+                container.classList.remove('operators-expanded');
+                container.classList.add('operators-collapsed');
+                content.classList.remove('operators-content-visible');
+                content.classList.add('operators-content-hidden');
+                
+                // 延迟隐藏以保证动画效果
+                setTimeout(function() {
+                    if (container.classList.contains('operators-collapsed')) {
+                        content.style.display = 'none';
+                    }
+                }, 300);
+            }
+        });
+    }
+    
     // 操作用户点击处理
     document.addEventListener('click', function(e) {
         var operator = e.target.closest('.recorder-operator');
@@ -164,8 +232,11 @@
         });
     }
     
-    // 初始化动画
+    // 初始化
-    setTimeout(addAnimation, 100);
+    setTimeout(function() {
+        initCollapse();
+        addAnimation();
+    }, 100);
     
     // 响应式处理
     function handleResize() {

view/recorder/components/data_readers.html

@@ -2,13 +2,15 @@
     <div class="recorder-readers {$options.css_class|default=''}" style="background: #ffffff; border: 1px solid #e6e6e6; border-radius: 6px; padding: 15px;">
         {if isset($readers) && !empty($readers)}
             <div style="margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;">
-                <h5 style="margin: 0; color: #333; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px;">
+                <h5 id="readersToggle" style="margin: 0; color: #333; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; transition: all 0.3s ease;"
+                    onmouseover="this.style.color='#1890ff';" onmouseout="this.style.color='#333';">
+                    <i id="readersToggleIcon" class="layui-icon layui-icon-down" style="color: #1890ff; font-size: 12px; transition: transform 0.3s ease;"></i>
                     <i class="layui-icon layui-icon-username" style="color: #1890ff; font-size: 16px;"></i>
                     读取用户 ({$readers|count})
                 </h5>
             </div>
             
-            <div style="display: flex; flex-direction: column; gap: 12px;">
+            <div id="readersContent" style="display: none; flex-direction: column; gap: 12px; overflow: hidden; transition: all 0.3s ease;">
                 {volist name="readers" id="reader"}
                     <div class="recorder-reader recorder-slide-in" data-user-id="{$reader.user_id}" 
                          style="display: flex; align-items: flex-start; padding: 12px; background: #fafafa; border-radius: 6px; border-left: 3px solid #1890ff; transition: all 0.3s ease; cursor: pointer;"
@@ -66,6 +68,28 @@
     animation: recorderSlideIn 0.3s ease-in-out;
 }
 
+/* 折叠相关样式 */
+.readers-collapsed #readersToggleIcon {
+    transform: rotate(-90deg);
+}
+
+.readers-expanded #readersToggleIcon {
+    transform: rotate(0deg);
+}
+
+.readers-content-hidden {
+    max-height: 0 !important;
+    opacity: 0;
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.readers-content-visible {
+    max-height: 2000px;
+    opacity: 1;
+}
+
 @media (max-width: 768px) {
     .recorder-readers {
         padding: 12px !important;
@@ -93,6 +117,50 @@
 (function() {
     'use strict';
     
+    // 折叠/展开功能
+    function initCollapse() {
+        var toggle = document.getElementById('readersToggle');
+        var content = document.getElementById('readersContent');
+        var icon = document.getElementById('readersToggleIcon');
+        var container = document.querySelector('.recorder-readers');
+        
+        if (!toggle || !content || !icon || !container) return;
+        
+        // 设置默认折叠状态
+        container.classList.add('readers-collapsed');
+        content.classList.add('readers-content-hidden');
+        
+        // 点击折叠/展开
+        toggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            var isCollapsed = container.classList.contains('readers-collapsed');
+            
+            if (isCollapsed) {
+                // 展开
+                container.classList.remove('readers-collapsed');
+                container.classList.add('readers-expanded');
+                content.classList.remove('readers-content-hidden');
+                content.classList.add('readers-content-visible');
+                content.style.display = 'flex';
+            } else {
+                // 折叠
+                container.classList.remove('readers-expanded');
+                container.classList.add('readers-collapsed');
+                content.classList.remove('readers-content-visible');
+                content.classList.add('readers-content-hidden');
+                
+                // 延迟隐藏以保证动画效果
+                setTimeout(function() {
+                    if (container.classList.contains('readers-collapsed')) {
+                        content.style.display = 'none';
+                    }
+                }, 300);
+            }
+        });
+    }
+    
     // 读取用户点击处理
     document.addEventListener('click', function(e) {
         var reader = e.target.closest('.recorder-reader');
@@ -129,8 +197,11 @@
         });
     }
     
-    // 初始化动画
+    // 初始化
-    setTimeout(addAnimation, 100);
+    setTimeout(function() {
+        initCollapse();
+        addAnimation();
+    }, 100);
     
     // 响应式处理
     function handleResize() {