Merge pull request #117 from AdingApkgg/next

Next

Author: AdingApkgg

assets/js/main.js

@@ -14,10 +14,59 @@ function initializePage() {
   initClipboard();
   fetchDLS();
   initRankPage();
+  initAIReview();
+  initTOCSidebar();
   quicklink.listen({ priority: true });
   endLoading();
 }
 
+/**
+ * 初始化 TOC 侧边栏
+ */
+function initTOCSidebar() {
+  const trigger = document.getElementById("toc-trigger");
+  const overlay = document.getElementById("toc-overlay");
+  const sidebar = document.getElementById("toc-sidebar");
+  const closeBtn = document.getElementById("toc-close");
+
+  if (!trigger || !sidebar) return;
+
+  // 延迟添加 ready 类，避免页面加载时闪现
+  requestAnimationFrame(() => {
+    sidebar.classList.add("ready");
+  });
+
+  const openTOC = () => {
+    sidebar.classList.add("active");
+    overlay.classList.add("active");
+    document.body.style.overflow = "hidden";
+  };
+
+  const closeTOC = () => {
+    sidebar.classList.remove("active");
+    overlay.classList.remove("active");
+    document.body.style.overflow = "";
+  };
+
+  trigger.addEventListener("click", openTOC);
+  overlay.addEventListener("click", closeTOC);
+  closeBtn.addEventListener("click", closeTOC);
+
+  // ESC 键关闭
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && sidebar.classList.contains("active")) {
+      closeTOC();
+    }
+  });
+
+  // 点击 TOC 链接后自动关闭
+  sidebar.querySelectorAll("a").forEach((link) => {
+    link.addEventListener("click", () => {
+      closeTOC();
+    });
+  });
+}
+
 document.addEventListener("DOMContentLoaded", initializePage);
 
 swup.hooks.on("animation:out:start", () => {
@@ -1637,3 +1686,281 @@ function initRankPage() {
   // 初始加载
   fetchRankData();
 }
+
+// ==========================================
+// AI 感想生成功能
+// ==========================================
+
+/**
+ * 初始化 AI 感想功能
+ */
+function initAIReview() {
+  // 检查是否在文章页面
+  const reviewSection = document.getElementById("ai-review");
+  if (!reviewSection) {
+    return;
+  }
+
+  const generateBtn = document.getElementById("generate-review");
+  const regenerateBtn = document.getElementById("regenerate-review");
+  const reviewContent = document.getElementById("ai-review-content");
+
+  // 获取文章信息
+  const articleTitle =
+    document.querySelector("article h1")?.textContent.trim() || "未知作品";
+  const articleContent =
+    document.querySelector(".content[data-pagefind-body]")?.textContent.trim() ||
+    "";
+
+  // 隐藏生成按钮，显示重新生成按钮
+  if (generateBtn) {
+    generateBtn.style.display = "none";
+  }
+  if (regenerateBtn) {
+    regenerateBtn.style.display = "inline-flex";
+  }
+
+  // 重新生成按钮点击事件
+  if (regenerateBtn) {
+    regenerateBtn.addEventListener("click", () => {
+      generateReview(articleTitle, articleContent, reviewContent);
+    });
+  }
+
+  // 检查是否有缓存的感想
+  const cachedReview = getCachedReview(articleTitle);
+  if (cachedReview) {
+    // 有缓存，直接显示
+    reviewContent.innerHTML = cachedReview;
+  } else {
+    // 没有缓存，自动生成
+    generateReview(articleTitle, articleContent, reviewContent);
+  }
+}
+
+/**
+ * 生成 AI 感想
+ * @param {string} title - 文章标题
+ * @param {string} content - 文章内容
+ * @param {HTMLElement} container - 显示容器
+ */
+async function generateReview(title, content, container) {
+  // 显示加载状态
+  container.innerHTML = `
+    <div class="ai-review-loading">
+      <i class="fas fa-spinner fa-spin"></i>
+      <p>Asuna 正在思考中...</p>
+    </div>
+  `;
+
+  try {
+    // 构造 prompt
+    const prompt = buildPrompt(title, content);
+
+    // 调用 Ollama API
+    const review = await callOllamaAPI(prompt, container);
+
+    if (review) {
+      // 显示生成的感想
+      container.innerHTML = `
+        <div class="ai-review-text">
+          ${formatReview(review)}
+        </div>
+      `;
+
+      // 缓存感想
+      cacheReview(title, container.innerHTML);
+    }
+  } catch (error) {
+    console.error("生成感想失败:", error);
+    container.innerHTML = `
+      <div class="ai-review-error">
+        <i class="fas fa-exclamation-triangle"></i>
+        <p>生成感想时出错了，请稍后重试~</p>
+        <small>${error.message}</small>
+      </div>
+    `;
+  }
+}
+
+/**
+ * 构建 prompt
+ * @param {string} title - 文章标题
+ * @param {string} content - 文章内容
+ * @returns {string} prompt
+ */
+function buildPrompt(title, content) {
+  // 提取文章摘要（限制长度）
+  const summary = content.substring(0, 1000);
+
+  return `你是刀剑神域（SAO）中的角色结城明日奈（Asuna，亚丝娜）。你是一位温柔、善良且坚强的女性玩家，同时也是一位资深的 Galgame（美少女游戏）爱好者。
+
+现在请你从玩家的角度，对这部名为《${title}》的作品分享你的游玩感想。
+
+作品信息：
+${summary}
+
+要求：
+1. 以 Asuna 的第一人称视角书写（使用"我"）
+2. 语气要温柔、亲切，带有一些 Asuna 的性格特点
+3. 分享你对作品剧情、角色、画面、音乐等方面的感受
+4. 可以提及一些让你印象深刻的场景或台词
+5. 表达你对作品的整体评价和推荐程度
+6. 使用优美的中文，可以适当使用一些情感化的表达
+7. 不要使用 Markdown 格式，直接输出纯文本
+
+请开始分享你的感想：`;
+}
+
+/**
+ * 调用 Ollama API（流式输出）
+ * @param {string} prompt - 提示词
+ * @param {HTMLElement} container - 显示容器
+ * @returns {Promise<string>} 生成的感想
+ */
+async function callOllamaAPI(prompt, container) {
+  // Ollama API 配置
+  const OLLAMA_URL = "https://ai.saop.cc/api/generate";
+  const MODEL = "qwen3:8b"; // 可以根据需要更改模型
+
+  try {
+    const response = await fetch(OLLAMA_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      // credentials: 'include', // 如果需要发送 cookies
+      body: JSON.stringify({
+        model: MODEL,
+        prompt: prompt,
+        stream: true,
+        options: {
+          temperature: 0.8,
+          top_p: 0.9,
+          top_k: 40,
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    // 处理流式响应
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let fullText = "";
+    let buffer = "";
+
+    // 显示流式输出容器
+    container.innerHTML = `
+      <div class="ai-review-text ai-review-streaming">
+        <div class="streaming-text"></div>
+        <span class="streaming-cursor">▊</span>
+      </div>
+    `;
+
+    const streamingText = container.querySelector(".streaming-text");
+
+    while (true) {
+      const { done, value } = await reader.read();
+
+      if (done) {
+        break;
+      }
+
+      // 解码并处理数据
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (line.trim()) {
+          try {
+            const data = JSON.parse(line);
+            if (data.response) {
+              fullText += data.response;
+              streamingText.textContent = fullText;
+
+              // 自动滚动到底部
+              container.scrollTop = container.scrollHeight;
+            }
+          } catch (e) {
+            console.warn("解析 JSON 失败:", e);
+          }
+        }
+      }
+    }
+
+    // 移除光标
+    const cursor = container.querySelector(".streaming-cursor");
+    if (cursor) {
+      cursor.remove();
+    }
+
+    return fullText;
+  } catch (error) {
+    if (error.message.includes("Failed to fetch")) {
+      throw new Error(
+        "无法连接到 Ollama 服务，请确保 Ollama 正在运行（http://localhost:11434）"
+      );
+    }
+    throw error;
+  }
+}
+
+/**
+ * 格式化感想文本
+ * @param {string} text - 原始文本
+ * @returns {string} 格式化后的 HTML
+ */
+function formatReview(text) {
+  // 将文本按段落分割
+  const paragraphs = text
+    .split(/\n\n+/)
+    .map((p) => p.trim())
+    .filter((p) => p.length > 0);
+
+  // 转换为 HTML 段落
+  return paragraphs.map((p) => `<p>${escapeHtml(p)}</p>`).join("");
+}
+
+/**
+ * 转义 HTML 特殊字符
+ * @param {string} text - 原始文本
+ * @returns {string} 转义后的文本
+ */
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * 缓存感想到 localStorage
+ * @param {string} title - 文章标题
+ * @param {string} content - 感想内容
+ */
+function cacheReview(title, content) {
+  try {
+    const cacheKey = `ai-review-${encodeURIComponent(title)}`;
+    localStorage.setItem(cacheKey, content);
+  } catch (e) {
+    console.warn("缓存感想失败:", e);
+  }
+}
+
+/**
+ * 从 localStorage 获取缓存的感想
+ * @param {string} title - 文章标题
+ * @returns {string|null} 缓存的感想内容
+ */
+function getCachedReview(title) {
+  try {
+    const cacheKey = `ai-review-${encodeURIComponent(title)}`;
+    return localStorage.getItem(cacheKey);
+  } catch (e) {
+    console.warn("读取缓存失败:", e);
+    return null;
+  }
+}