改了下按键位置，数据管理添加了图片放大查看

2025-11-17 13:18:43 +08:00
parent 49a5e82202
commit 4ef3523ea9
4 changed files with 82 additions and 5 deletions
--- a/elastic/templates/elastic/manage.html
+++ b/elastic/templates/elastic/manage.html
@@ -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">&times;</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>
--- a/elastic/templates/elastic/upload.html
+++ b/elastic/templates/elastic/upload.html
@@ -29,7 +29,7 @@

    .user-id {
      text-align: center;
-      margin-bottom: auto;
+      margin-bottom: 0px;
    }

    .sidebar h3 {
--- a/elastic/templates/elastic/users.html
+++ b/elastic/templates/elastic/users.html
@@ -29,7 +29,7 @@

    .user-id {
      text-align: center;
-      margin-bottom: auto;
+      margin-bottom: 0px;
    }

    .sidebar h3 {