部分修改[0.2.8.13][ci]

accounts/templates/accounts/profile.html

@@ -39,8 +39,8 @@
     .msg.success { color: #166534; }
     
     /* 图片放大模态框 */
-    .image-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 2000; }
-    .image-modal-content { max-width: 90%; max-height: 90%; border-radius: 8px; }
+    .image-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 2000; overflow: hidden; }
+    .image-modal-content { max-width: 90%; max-height: 90%; border-radius: 8px; transform-origin: center center; cursor: grab; user-select: none; }
     .image-modal-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; }
   </style>
 </head>
@@ -79,7 +79,6 @@
       </form>
       {% endif %}
       {% if subpage == "password" %}
-      {% if permission_name != "管理员" and not profile_user.manage_key %}
       <form id="pwdForm">
         <div class="form-group">
           <label for="newPassword">新密码</label>
@@ -92,9 +91,6 @@
         <button type="submit" class="btn">保存</button>
         <div id="pwdMsg" class="msg"></div>
       </form>
-      {% else %}
-      <div class="msg error">无权限</div>
-      {% endif %}
       {% endif %}
       {% if subpage == "registration-code" %}
       <form id="rcForm">
@@ -138,9 +134,7 @@
       </div>
       <div style="display:flex; gap:12px; flex-wrap:wrap;">
         <a class="btn" href="{% url 'accounts:profile_username' %}">修改用户名</a>
-        {% if permission_name != "管理员" and not profile_user.manage_key %}
         <a class="btn" href="{% url 'accounts:profile_password' %}">修改密码</a>
-        {% endif %}
         <a class="btn" href="{% url 'accounts:profile_registration_code' %}">替换注册码</a>
       </div>
     </div>
@@ -194,20 +188,114 @@
     });
 
     // 图片放大功能
+    let modalScale = 1;
+    let modalTranslateX = 0;
+    let modalTranslateY = 0;
+    let modalDragging = false;
+    let modalDragStartX = 0;
+    let modalDragStartY = 0;
+    let modalDragOriginX = 0;
+    let modalDragOriginY = 0;
+
+    function applyModalTransform() {
+      const modalImg = document.getElementById('modalImg');
+      modalImg.style.transform = `translate(${modalTranslateX}px, ${modalTranslateY}px) scale(${modalScale})`;
+    }
+
+    function resetModalTransform() {
+      modalScale = 1;
+      modalTranslateX = 0;
+      modalTranslateY = 0;
+      applyModalTransform();
+    }
+
+    function clampScale(next) {
+      if (next < 0.2) return 0.2;
+      if (next > 5) return 5;
+      return next;
+    }
+
     function openModal(src) {
       const modal = document.getElementById('imageModal');
       const modalImg = document.getElementById('modalImg');
       modal.style.display = "flex";
       modalImg.src = src;
+      resetModalTransform();
     }
 
     function closeModal() {
       document.getElementById('imageModal').style.display = "none";
     }
 
-    window.onclick = function(event) {
-      const modal = document.getElementById('imageModal');
-      if (event.target == modal) closeModal();
+    const modalEl = document.getElementById('imageModal');
+    const modalImgEl = document.getElementById('modalImg');
+    if (modalEl && modalImgEl) {
+      modalEl.addEventListener('click', (e) => {
+        if (e.target === modalEl) closeModal();
+      });
+
+      modalImgEl.addEventListener('mousedown', (e) => {
+        if (e.button !== 0) return;
+        e.preventDefault();
+        modalDragging = true;
+        modalDragStartX = e.clientX;
+        modalDragStartY = e.clientY;
+        modalDragOriginX = modalTranslateX;
+        modalDragOriginY = modalTranslateY;
+        modalImgEl.style.cursor = 'grabbing';
+      });
+
+      window.addEventListener('mousemove', (e) => {
+        if (!modalDragging) return;
+        const dx = e.clientX - modalDragStartX;
+        const dy = e.clientY - modalDragStartY;
+        modalTranslateX = modalDragOriginX + dx;
+        modalTranslateY = modalDragOriginY + dy;
+        applyModalTransform();
+      });
+
+      window.addEventListener('mouseup', () => {
+        if (!modalDragging) return;
+        modalDragging = false;
+        modalImgEl.style.cursor = 'grab';
+      });
+
+      modalEl.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const rect = modalImgEl.getBoundingClientRect();
+        const cx = e.clientX - rect.left - rect.width / 2;
+        const cy = e.clientY - rect.top - rect.height / 2;
+        const nextScale = clampScale(modalScale * (e.deltaY < 0 ? 1.1 : 0.9));
+        const ratio = nextScale / modalScale;
+        modalTranslateX = (modalTranslateX - cx) * ratio + cx;
+        modalTranslateY = (modalTranslateY - cy) * ratio + cy;
+        modalScale = nextScale;
+        applyModalTransform();
+      }, { passive: false });
+
+      modalImgEl.addEventListener('touchstart', (e) => {
+        if (e.touches.length !== 1) return;
+        const t = e.touches[0];
+        modalDragging = true;
+        modalDragStartX = t.clientX;
+        modalDragStartY = t.clientY;
+        modalDragOriginX = modalTranslateX;
+        modalDragOriginY = modalTranslateY;
+      }, { passive: true });
+
+      modalImgEl.addEventListener('touchmove', (e) => {
+        if (!modalDragging || e.touches.length !== 1) return;
+        const t = e.touches[0];
+        const dx = t.clientX - modalDragStartX;
+        const dy = t.clientY - modalDragStartY;
+        modalTranslateX = modalDragOriginX + dx;
+        modalTranslateY = modalDragOriginY + dy;
+        applyModalTransform();
+      }, { passive: true });
+
+      modalImgEl.addEventListener('touchend', () => {
+        modalDragging = false;
+      });
     }
 
     const pwdForm = document.getElementById('pwdForm');