@hirohsu/user-web-feedback 2.6.0

package/dist/static/modules/image-handler.js

@@ -0,0 +1,155 @@
+/**
+ * image-handler.js
+ * 圖片處理模組
+ * 包含圖片上傳、預覽、移除等功能
+ */
+
+import {
+  getCurrentImages,
+  addImage,
+  removeImageAt,
+  clearImages as clearImageState,
+} from "./state-manager.js";
+
+/**
+ * 處理檔案選擇事件
+ * @param {Event} e - 檔案選擇事件
+ */
+export function handleFileSelect(e) {
+  handleFileDrop(e.target.files);
+}
+
+/**
+ * 處理檔案拖放
+ * @param {FileList} files - 檔案列表
+ */
+export function handleFileDrop(files) {
+  Array.from(files).forEach((file) => {
+    if (file.type.startsWith("image/")) {
+      readImageFile(file);
+    }
+  });
+}
+
+/**
+ * 處理貼上事件
+ * @param {ClipboardEvent} e - 貼上事件
+ */
+export function handlePaste(e) {
+  const items = e.clipboardData.items;
+
+  for (let item of items) {
+    if (item.type.startsWith("image/")) {
+      const file = item.getAsFile();
+      readImageFile(file);
+    }
+  }
+}
+
+/**
+ * 讀取圖片檔案
+ * @param {File} file - 圖片檔案
+ */
+export function readImageFile(file) {
+  const reader = new FileReader();
+
+  reader.onload = (e) => {
+    const imageData = {
+      name: file.name,
+      data: e.target.result.split(",")[1],
+      size: file.size,
+      type: file.type,
+    };
+
+    addImage(imageData);
+    const currentImages = getCurrentImages();
+    addImagePreview(e.target.result, currentImages.length - 1);
+    updateImageCount();
+  };
+
+  reader.readAsDataURL(file);
+}
+
+/**
+ * 新增圖片預覽
+ * @param {string} dataUrl - 圖片 Data URL
+ * @param {number} index - 圖片索引
+ */
+export function addImagePreview(dataUrl, index) {
+  const container = document.getElementById("imagePreviewContainer");
+  const dropZone = document.getElementById("imageDropZone");
+  const currentImages = getCurrentImages();
+
+  if (currentImages.length > 0) {
+    dropZone.style.display = "none";
+    container.style.display = "flex";
+  }
+
+  const preview = document.createElement("div");
+  preview.className = "image-preview";
+  preview.innerHTML = `
+    <img src="${dataUrl}" alt="Preview">
+    <button class="image-preview-remove" onclick="removeImage(${index})">✖</button>
+  `;
+
+  container.appendChild(preview);
+}
+
+/**
+ * 移除圖片
+ * @param {number} index - 圖片索引
+ */
+export function removeImage(index) {
+  removeImageAt(index);
+
+  const container = document.getElementById("imagePreviewContainer");
+  container.innerHTML = "";
+
+  const currentImages = getCurrentImages();
+  currentImages.forEach((img, i) => {
+    const dataUrl = `data:${img.type};base64,${img.data}`;
+    addImagePreview(dataUrl, i);
+  });
+
+  updateImageCount();
+
+  if (currentImages.length === 0) {
+    document.getElementById("imageDropZone").style.display = "flex";
+    container.style.display = "none";
+  }
+}
+
+/**
+ * 清除所有圖片
+ */
+export function clearImages() {
+  clearImageState();
+  document.getElementById("imagePreviewContainer").innerHTML = "";
+  document.getElementById("imageDropZone").style.display = "flex";
+  document.getElementById("imagePreviewContainer").style.display = "none";
+  updateImageCount();
+}
+
+/**
+ * 更新圖片數量顯示
+ */
+export function updateImageCount() {
+  const countEl = document.getElementById("imageCount");
+  if (countEl) {
+    countEl.textContent = getCurrentImages().length;
+  }
+}
+
+// 暴露到 window 供 HTML onclick 使用
+window.removeImage = removeImage;
+
+export default {
+  handleFileSelect,
+  handleFileDrop,
+  handlePaste,
+  readImageFile,
+  addImagePreview,
+  removeImage,
+  clearImages,
+  updateImageCount,
+};

package/dist/static/modules/log-viewer.js

@@ -0,0 +1,296 @@
+/**
+ * log-viewer.js
+ * 日誌檢視器模組
+ */
+
+import {
+  showToast,
+  showLoadingOverlay,
+  hideLoadingOverlay,
+  escapeHtml,
+} from "./ui-helpers.js";
+
+// 模組內部狀態
+let currentLogPage = 1;
+let totalLogPages = 1;
+let logSources = [];
+
+/**
+ * 開啟日誌檢視器彈窗
+ */
+export async function openLogViewerModal() {
+  const modal = document.getElementById("logViewerModal");
+  if (modal) {
+    modal.classList.add("show");
+
+    // 載入日誌來源列表
+    await loadLogSources();
+
+    // 載入第一頁日誌
+    await loadLogs(1);
+  }
+}
+
+/**
+ * 關閉日誌檢視器彈窗
+ */
+export function closeLogViewerModal() {
+  const modal = document.getElementById("logViewerModal");
+  if (modal) {
+    modal.classList.remove("show");
+  }
+}
+
+/**
+ * 載入日誌來源
+ */
+async function loadLogSources() {
+  try {
+    const response = await fetch("/api/logs/sources");
+    if (response.ok) {
+      const data = await response.json();
+      logSources = data.sources || [];
+
+      // 更新來源下拉選單
+      const sourceFilter = document.getElementById("logSourceFilter");
+      if (sourceFilter) {
+        // 保留第一個選項
+        sourceFilter.innerHTML = '<option value="">全部來源</option>';
+        logSources.forEach((source) => {
+          const option = document.createElement("option");
+          option.value = source;
+          option.textContent = source;
+          sourceFilter.appendChild(option);
+        });
+      }
+    }
+  } catch (error) {
+    console.error("載入日誌來源失敗:", error);
+  }
+}
+
+/**
+ * 載入日誌
+ * @param {number} page 頁碼
+ */
+export async function loadLogs(page = 1) {
+  const container = document.getElementById("logEntriesContainer");
+  if (!container) return;
+
+  // 顯示載入中
+  container.innerHTML =
+    '<div class="log-loading"><div class="spinner"></div>載入中...</div>';
+
+  try {
+    // 收集篩選參數
+    const params = new URLSearchParams();
+    params.set("page", page.toString());
+    params.set("limit", "50");
+
+    const level = document.getElementById("logLevelFilter").value;
+    if (level) params.set("level", level);
+
+    const source = document.getElementById("logSourceFilter").value;
+    if (source) params.set("source", source);
+
+    const search = document.getElementById("logSearch").value.trim();
+    if (search) params.set("search", search);
+
+    const startDate = document.getElementById("logStartDate").value;
+    if (startDate) params.set("startDate", startDate);
+
+    const endDate = document.getElementById("logEndDate").value;
+    if (endDate) params.set("endDate", endDate);
+
+    const response = await fetch(`/api/logs?${params.toString()}`);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    const data = await response.json();
+    const logs = data.logs || [];
+    currentLogPage = data.pagination?.page || 1;
+    totalLogPages = data.pagination?.totalPages || 1;
+
+    // 渲染日誌條目
+    if (logs.length === 0) {
+      container.innerHTML = `
+        <div class="placeholder">
+          <span class="icon">📭</span>
+          <p>沒有符合條件的日誌記錄</p>
+        </div>
+      `;
+    } else {
+      container.innerHTML = logs.map((log) => renderLogEntry(log)).join("");
+    }
+
+    // 更新分頁控制
+    updateLogPagination();
+  } catch (error) {
+    console.error("載入日誌失敗:", error);
+    container.innerHTML = `
+      <div class="placeholder">
+        <span class="icon">❌</span>
+        <p>載入日誌失敗: ${error.message}</p>
+      </div>
+    `;
+  }
+}
+
+/**
+ * 渲染單條日誌
+ */
+function renderLogEntry(log) {
+  const timestamp = new Date(log.timestamp).toLocaleString("zh-TW", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+
+  const levelClass = `log-level-${log.level}`;
+  const searchTerm = document.getElementById("logSearch").value.trim();
+
+  // 高亮搜尋詞
+  let message = escapeHtml(log.message);
+  if (searchTerm) {
+    const regex = new RegExp(`(${escapeRegex(searchTerm)})`, "gi");
+    message = message.replace(regex, "<mark>$1</mark>");
+  }
+
+  // 格式化 meta 資訊
+  let metaHtml = "";
+  if (log.meta) {
+    try {
+      const metaObj =
+        typeof log.meta === "string" ? JSON.parse(log.meta) : log.meta;
+      if (Object.keys(metaObj).length > 0) {
+        metaHtml = `<div class="log-meta"><pre>${escapeHtml(
+          JSON.stringify(metaObj, null, 2)
+        )}</pre></div>`;
+      }
+    } catch (e) {
+      // 如果無法解析，顯示原始字串
+      if (log.meta) {
+        metaHtml = `<div class="log-meta">${escapeHtml(
+          String(log.meta)
+        )}</div>`;
+      }
+    }
+  }
+
+  return `
+    <div class="log-entry">
+      <div class="log-entry-header">
+        <span class="log-timestamp">${timestamp}</span>
+        <span class="log-level ${levelClass}">${log.level}</span>
+        <span class="log-source">[${escapeHtml(log.source)}]</span>
+      </div>
+      <div class="log-message">${message}</div>
+      ${metaHtml}
+    </div>
+  `;
+}
+
+/**
+ * 更新分頁控制
+ */
+function updateLogPagination() {
+  const pageInfo = document.getElementById("logPageInfo");
+  const prevBtn = document.getElementById("logPrevPage");
+  const nextBtn = document.getElementById("logNextPage");
+
+  if (pageInfo) {
+    pageInfo.textContent = `${currentLogPage} / ${totalLogPages}`;
+  }
+
+  if (prevBtn) {
+    prevBtn.disabled = currentLogPage <= 1;
+  }
+
+  if (nextBtn) {
+    nextBtn.disabled = currentLogPage >= totalLogPages;
+  }
+}
+
+/**
+ * 搜尋日誌
+ */
+export function searchLogs() {
+  loadLogs(1);
+}
+
+/**
+ * 清除舊日誌
+ */
+export async function clearOldLogs() {
+  // 預設清除 7 天前的日誌
+  const daysToKeep = 7;
+  const cutoffDate = new Date();
+  cutoffDate.setDate(cutoffDate.getDate() - daysToKeep);
+
+  if (!confirm(`確定要清除 ${daysToKeep} 天前的所有日誌嗎？此操作無法復原。`)) {
+    return;
+  }
+
+  try {
+    showLoadingOverlay("清除舊日誌中...");
+
+    const response = await fetch(
+      `/api/logs?endDate=${cutoffDate.toISOString().split("T")[0]}`,
+      {
+        method: "DELETE",
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    const data = await response.json();
+    showToast(
+      "success",
+      "清除成功",
+      `已刪除 ${data.deletedCount || 0} 條舊日誌`
+    );
+
+    // 重新載入日誌
+    await loadLogs(1);
+  } catch (error) {
+    console.error("清除舊日誌失敗:", error);
+    showToast("error", "清除失敗", error.message);
+  } finally {
+    hideLoadingOverlay();
+  }
+}
+
+/**
+ * 正則表達式轉義
+ */
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/**
+ * 處理分頁點擊
+ * @param {string} direction 'prev' or 'next'
+ */
+export function handlePagination(direction) {
+  if (direction === "prev" && currentLogPage > 1) {
+    loadLogs(currentLogPage - 1);
+  } else if (direction === "next" && currentLogPage < totalLogPages) {
+    loadLogs(currentLogPage + 1);
+  }
+}
+
+export default {
+  openLogViewerModal,
+  closeLogViewerModal,
+  loadLogs,
+  searchLogs,
+  clearOldLogs,
+  handlePagination,
+};