q792602257/think-plugs-recorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支持折叠

Browse Source
This commit is contained in:
Jerry Yan
2025-08-16 11:10:37 +08:00
parent fe378eccd5
commit 4f31759059
2 changed files with 150 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
view/recorder/components/data_operators.html
View File

@@ -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() {

79
view/recorder/components/data_readers.html
View File

@@ -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() {