|
|
|
|
@@ -29,7 +29,7 @@
|
|
|
|
|
|
|
|
|
|
.user-id {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: auto;
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar h3 {
|
|
|
|
|
@@ -103,6 +103,7 @@
|
|
|
|
|
max-width: 120px;
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
cursor: pointer; /* 添加指针样式 */
|
|
|
|
|
}
|
|
|
|
|
.btn {
|
|
|
|
|
padding: 6px 10px;
|
|
|
|
|
@@ -230,6 +231,47 @@
|
|
|
|
|
margin: 2px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 图片放大模态框 */
|
|
|
|
|
.image-modal {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 2000;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: rgba(0,0,0,0.9);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-modal-content {
|
|
|
|
|
margin: auto;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 80%;
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
max-height: 80%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-modal-close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15px;
|
|
|
|
|
right: 35px;
|
|
|
|
|
color: #f1f1f1;
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
z-index: 2001;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-modal-close:hover {
|
|
|
|
|
color: #bbb;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
@@ -306,6 +348,12 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 图片放大模态框 -->
|
|
|
|
|
<div id="imageModal" class="image-modal">
|
|
|
|
|
<span class="image-modal-close">×</span>
|
|
|
|
|
<img class="image-modal-content" id="expandedImage">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 获取CSRF token的函数
|
|
|
|
|
function getCookie(name) {
|
|
|
|
|
@@ -327,6 +375,11 @@ const editMsg = document.getElementById('editMsg');
|
|
|
|
|
const addFieldBtn = document.getElementById('addFieldBtn');
|
|
|
|
|
const syncFromTextBtn = document.getElementById('syncFromTextBtn');
|
|
|
|
|
|
|
|
|
|
// 图片放大相关元素
|
|
|
|
|
const imageModal = document.getElementById('imageModal');
|
|
|
|
|
const expandedImage = document.getElementById('expandedImage');
|
|
|
|
|
const imageModalClose = document.querySelector('.image-modal-close');
|
|
|
|
|
|
|
|
|
|
// 全局变量
|
|
|
|
|
let currentId = '';
|
|
|
|
|
let currentWriter = '';
|
|
|
|
|
@@ -476,7 +529,7 @@ function renderTable(data) {
|
|
|
|
|
row.innerHTML = `
|
|
|
|
|
<td style="max-width:140px; word-break:break-all; font-size: 12px;">${item._id || item.id || ''}</td>
|
|
|
|
|
<td>
|
|
|
|
|
${item.image ? `<img src="/media/${item.image}" onerror="this.src=''; this.alt='图片加载失败'" />` : '无图片'}
|
|
|
|
|
${item.image ? `<img src="/media/${item.image}" onerror="this.src=''; this.alt='图片加载失败'" class="clickable-image" data-image="/media/${item.image}" />` : '无图片'}
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre style="white-space:pre-wrap; word-wrap:break-word; max-height: 100px; overflow-y: auto; font-size: 12px; margin: 0;">${escapeHtml(displayData)}</pre>
|
|
|
|
|
@@ -722,6 +775,30 @@ document.getElementById('logoutBtn').addEventListener('click', async () => {
|
|
|
|
|
msg.textContent = e.message || '发生错误';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 图片放大功能
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
// 为所有图片添加点击事件监听器
|
|
|
|
|
document.addEventListener('click', function(e) {
|
|
|
|
|
if (e.target.classList.contains('clickable-image')) {
|
|
|
|
|
const imgSrc = e.target.src;
|
|
|
|
|
expandedImage.src = imgSrc;
|
|
|
|
|
imageModal.style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 点击关闭按钮关闭模态框
|
|
|
|
|
imageModalClose.onclick = function() {
|
|
|
|
|
imageModal.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击模态框外部区域关闭模态框
|
|
|
|
|
window.onclick = function(event) {
|
|
|
|
|
if (event.target === imageModal) {
|
|
|
|
|
imageModal.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
