From 7620799e710a2d1853f6e49f00adebeb34ad3e35 Mon Sep 17 00:00:00 2001
From: LHgeek <1209384461@qq.com>
Date: Fri, 27 Feb 2026 21:43:07 +0800
Subject: [PATCH] feat by vibe coding use Seed-Code-PrimeRL

Signed-off-by: LHgeek <1209384461@qq.com>
---
 assets/css/style.css | 226 ++++++++++++++++++++++++++++++
 assets/js/script.js  | 317 ++++++++++++++++++++++++++++++++++++++-----
 index.html           |  38 +++++-
 3 files changed, 548 insertions(+), 33 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 2accbed..9779d8e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -195,4 +195,230 @@ body.dark-mode #author {
   border-radius: 0;
   object-fit: cover;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.topic-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+  margin: 20px 0;
+  padding: 0 10px;
+}
+
+.topic-btn {
+  padding: 8px 16px;
+  background-color: #fff;
+  color: #2b2e4a;
+  border: 2px solid #ef8354;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.topic-btn:hover {
+  background-color: #ef8354;
+  color: #fff;
+}
+
+.topic-btn.active {
+  background-color: #ef8354;
+  color: #fff;
+}
+
+body.dark-mode .topic-btn {
+  background-color: #2b2e4a;
+  color: #fff;
+  border-color: #ef8354;
+}
+
+body.dark-mode .topic-btn:hover,
+body.dark-mode .topic-btn.active {
+  background-color: #ef8354;
+  color: #fff;
+}
+
+.history-panel {
+  position: fixed;
+  left: -320px;
+  top: 0;
+  width: 300px;
+  height: 100vh;
+  background-color: #fff;
+  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+  transition: left 0.3s ease;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.history-panel.open {
+  left: 0;
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: #2b2e4a;
+  color: #fff;
+}
+
+.history-header h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.clear-btn {
+  padding: 5px 15px;
+  background-color: #ef8354;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.clear-btn:hover {
+  background-color: #d57a48;
+}
+
+.close-btn {
+  padding: 5px 10px;
+  background-color: transparent;
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.close-btn:hover {
+  background-color: rgba(255,255,255,0.2);
+}
+
+.history-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+}
+
+.history-item {
+  padding: 12px;
+  margin-bottom: 10px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  border-left: 3px solid #ef8354;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.history-item:hover {
+  transform: translateX(5px);
+}
+
+.history-item-text {
+  font-size: 13px;
+  color: #333;
+  margin-bottom: 5px;
+  line-height: 1.4;
+}
+
+.history-item-author {
+  font-size: 11px;
+  color: #888;
+  text-align: right;
+}
+
+body.dark-mode .history-panel {
+  background-color: #1e1e1e;
+}
+
+body.dark-mode .history-item {
+  background-color: #2b2e4a;
+}
+
+body.dark-mode .history-item-text {
+  color: #fff;
+}
+
+.recommended-panel {
+  max-width: 700px;
+  margin: 20px auto;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.recommended-panel h4 {
+  margin: 0 0 15px 0;
+  color: #2b2e4a;
+  font-size: 16px;
+}
+
+.recommended-panel h4 i {
+  color: #ef8354;
+  margin-right: 8px;
+}
+
+.recommended-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+}
+
+.recommended-item {
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #555;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.recommended-item:hover {
+  border-color: #ef8354;
+  background-color: #fff;
+}
+
+body.dark-mode .recommended-panel {
+  background-color: #2b2e4a;
+}
+
+body.dark-mode .recommended-panel h4 {
+  color: #fff;
+}
+
+body.dark-mode .recommended-item {
+  background-color: #1e1e1e;
+  color: #ccc;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 60px;
+}
+
+.history-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.5);
+  z-index: 999;
+}
+
+.history-overlay.show {
+  display: block;
 }
\ No newline at end of file
diff --git a/assets/js/script.js b/assets/js/script.js
index 3981fc9..b96fdb4 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -1,92 +1,345 @@
 const FAVORITES_KEY = "favoriteQuotes";
-
-// DOM
-const quoteText = document.getElementById("quote");
-const newQuoteButton = document.getElementById("generate");
-const categorySelect = document.getElementById("category");
-const shareTwitterButton = document.getElementById("shareTwitter");
-const darkModeToggle = document.getElementById("dark-mode-toggle");
-const copyQuoteButton = document.getElementById("copy-quote");
-const favoriteIcon = document.getElementById("favorite-icon");
-const authorText = document.getElementById("author");
-const authorImage = document.getElementById("author-image");
-
-// quotes array
-const quotes = {
+const ALL_TOPICS = ["全部", "励志", "幽默", "人生", "成功", "智慧", "勇气", "梦想", "坚持", "态度"];
+const HISTORY_KEY = "quoteHistory";
+const TOPIC_STATS_KEY = "topicStats";
+let selectedTopics = ["全部"];
+let currentQuote = null;
+
+document.addEventListener("DOMContentLoaded", function() {
+  const quoteText = document.getElementById("quote");
+  const newQuoteButton = document.getElementById("generate");
+  const categorySelect = document.getElementById("category");
+  const shareTwitterButton = document.getElementById("shareTwitter");
+  const darkModeToggle = document.getElementById("dark-mode-toggle");
+  const copyQuoteButton = document.getElementById("copy-quote");
+  const favoriteIcon = document.getElementById("favorite-icon");
+  const authorText = document.getElementById("author");
+  const authorImage = document.getElementById("author-image");
+  const historyToggle = document.getElementById("history-toggle");
+  const historyPanel = document.getElementById("history-panel");
+  const historyOverlay = document.getElementById("history-overlay");
+  const clearHistory = document.getElementById("clear-history");
+  const closeHistory = document.getElementById("close-history");
+
+  const quotes = {
   motivational: [
     {
       text: "The greatest glory in living lies not in never falling, but in rising every time we fall.",
       author: "Nelson Mandela",
+      topics: ["励志", "勇气", "坚持"],
     },
     {
       text: "The way to get started is to quit talking and begin doing.",
       author: "Walt Disney",
+      topics: ["励志", "行动", "成功"],
     },
     {
-      text: "Your time is limited, so don’t waste it living someone else’s life.",
+      text: "Your time is limited, so don't waste it living someone else's life.",
       author: "Steve Jobs",
+      topics: ["人生", "励志", "梦想"],
+    },
+    {
+      text: "Success is not final, failure is not fatal: It is the courage to continue that counts.",
+      author: "Winston Churchill",
+      topics: ["成功", "勇气", "坚持"],
+    },
+    {
+      text: "The only limit to our realization of tomorrow will be our doubts of today.",
+      author: "Franklin D. Roosevelt",
+      topics: ["励志", "梦想", "态度"],
+    },
+    {
+      text: "It does not matter how slowly you go as long as you do not stop.",
+      author: "Confucius",
+      topics: ["坚持", "励志", "成功"],
     }
   ],
   funny: [
     {
       text: "I'm not arguing, I'm just explaining why I'm right.",
       author: "Unknown",
+      topics: ["幽默", "智慧"],
     },
     {
-      text: "Why don’t skeletons fight each other? They don’t have the guts.",
+      text: "Why don't skeletons fight each other? They don't have the guts.",
       author: "Unknown",
+      topics: ["幽默"],
     },
     {
       text: "My fake plants died because I did not pretend to water them.",
       author: "Mitch Hedberg",
+      topics: ["幽默"],
+    },
+    {
+      text: "The only way to keep your health is to eat what you don't want, drink what you don't like, and do what you'd rather not.",
+      author: "Mark Twain",
+      topics: ["幽默", "人生"],
+    },
+    {
+      text: "I have not failed. I've just found 10,000 ways that won't work.",
+      author: "Thomas Edison",
+      topics: ["幽默", "励志", "成功"],
+    },
+    {
+      text: "A day without sunshine is like, you know, night.",
+      author: "Steve Martin",
+      topics: ["幽默", "智慧"],
     }
   ],
   inspirational: [
     {
-      text: "Life is what happens when you’re busy making other plans.",
+      text: "Life is what happens when you're busy making other plans.",
       author: "John Lennon",
+      topics: ["人生", "智慧"],
     },
     {
-      text: "If you look at what you have in life, you’ll always have more.",
+      text: "If you look at what you have in life, you'll always have more.",
       author: "Oprah Winfrey",
+      topics: ["人生", "态度", "成功"],
     },
     {
       text: "If life were predictable it would cease to be life, and be without flavor.",
       author: "Eleanor Roosevelt",
+      topics: ["人生", "智慧", "态度"],
+    },
+    {
+      text: "The purpose of our lives is to be happy.",
+      author: "Dalai Lama",
+      topics: ["人生", "态度", "智慧"],
+    },
+    {
+      text: "Get busy living or get busy dying.",
+      author: "Stephen King",
+      topics: ["人生", "勇气", "励志"],
+    },
+    {
+      text: "You only live once, but if you do it right, once is enough.",
+      author: "Mae West",
+      topics: ["人生", "梦想", "态度"],
+    },
+    {
+      text: "Many of life's failures are people who did not realize how close they were to success when they gave up.",
+      author: "Thomas Edison",
+      topics: ["成功", "坚持", "励志"],
+    },
+    {
+      text: "If you want to live a happy life, tie it to a goal, not to people or things.",
+      author: "Albert Einstein",
+      topics: ["梦想", "成功", "人生"],
     }
   ],
 };
 
+function getAllQuotes() {
+  return [...quotes.motivational, ...quotes.funny, ...quotes.inspirational];
+}
+
+function getQuotesByTopics(topics) {
+  if (topics.length === 0 || topics.includes("全部")) {
+    return getAllQuotes();
+  }
+  return getAllQuotes().filter(quote => 
+    topics.some(topic => quote.topics.includes(topic))
+  );
+}
+
+function initTopicButtons() {
+  const topicButtons = document.querySelectorAll(".topic-btn");
+  topicButtons.forEach(btn => {
+    btn.addEventListener("click", () => {
+      const topic = btn.dataset.topic;
+      
+      if (topic === "全部") {
+        selectedTopics = ["全部"];
+        topicButtons.forEach(b => b.classList.remove("active"));
+        btn.classList.add("active");
+      } else {
+        if (selectedTopics.includes("全部")) {
+          selectedTopics = [];
+          topicButtons.forEach(b => b.classList.remove("active"));
+        }
+        
+        if (selectedTopics.includes(topic)) {
+          selectedTopics = selectedTopics.filter(t => t !== topic);
+          btn.classList.remove("active");
+        } else {
+          selectedTopics.push(topic);
+          btn.classList.add("active");
+        }
+        
+        if (selectedTopics.length === 0) {
+          selectedTopics = ["全部"];
+          document.querySelector('.topic-btn[data-topic="全部"]').classList.add("active");
+        }
+      }
+      
+      recordTopicStats(selectedTopics);
+      updateRecommendedPanel();
+    });
+  });
+}
+
+function getHistory() {
+  return JSON.parse(localStorage.getItem(HISTORY_KEY)) || [];
+}
+
+function saveHistory(quote) {
+  const history = getHistory();
+  const exists = history.find(h => h.text === quote.text);
+  if (!exists) {
+    history.unshift(quote);
+    if (history.length > 50) {
+      history.pop();
+    }
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
+  }
+}
+
+function updateHistoryPanel() {
+  const historyList = document.getElementById("history-list");
+  const history = getHistory();
+  
+  if (history.length === 0) {
+    historyList.innerHTML = '<p style="text-align:center;color:#888;">暂无历史记录</p>';
+    return;
+  }
+  
+  historyList.innerHTML = history.map((quote, index) => `
+    <div class="history-item" data-index="${index}">
+      <div class="history-item-text">${quote.text}</div>
+      <div class="history-item-author">— ${quote.author}</div>
+    </div>
+  `).join("");
+  
+  historyList.querySelectorAll(".history-item").forEach(item => {
+    item.addEventListener("click", function() {
+      const index = parseInt(this.dataset.index);
+      const quote = history[index];
+      displayQuoteDirectly(quote);
+    });
+  });
+}
+
+function displayQuoteDirectly(quote) {
+  quoteText.innerHTML = quote.text;
+  authorText.textContent = quote.author;
+  currentQuote = quote;
+  updateFavoriteIconColor();
+  
+  fetchWikipediaImage(quote.author).then(url => {
+    authorImage.src = url;
+  });
+}
+
+function recordTopicStats(topics) {
+  const stats = JSON.parse(localStorage.getItem(TOPIC_STATS_KEY)) || {};
+  const topicsWithoutAll = topics.filter(t => t !== "全部");
+  
+  if (topicsWithoutAll.length > 0) {
+    topicsWithoutAll.forEach(topic => {
+      stats[topic] = (stats[topic] || 0) + 1;
+    });
+    localStorage.setItem(TOPIC_STATS_KEY, JSON.stringify(stats));
+  }
+}
+
+function getTopTopics(n = 3) {
+  const stats = JSON.parse(localStorage.getItem(TOPIC_STATS_KEY)) || {};
+  return Object.entries(stats)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, n)
+    .map(item => item[0]);
+}
+
+function updateRecommendedPanel() {
+  const recommendedList = document.getElementById("recommended-list");
+  const topTopics = getTopTopics(3);
+  
+  if (topTopics.length === 0) {
+    recommendedList.innerHTML = '<p style="text-align:center;color:#888;">选择主题后将为您推荐</p>';
+    return;
+  }
+  
+  const relevantQuotes = getQuotesByTopics(topTopics);
+  const shuffled = [...relevantQuotes].sort(() => Math.random() - 0.5);
+  const recommended = shuffled.slice(0, 3);
+  
+  recommendedList.innerHTML = recommended.map((quote, index) => `
+    <div class="recommended-item" data-index="${index}">
+      ${quote.text}
+    </div>
+  `).join("");
+  
+  recommendedList.querySelectorAll(".recommended-item").forEach((item, index) => {
+    item.addEventListener("click", () => {
+      displayQuoteDirectly(recommended[index]);
+    });
+  });
+}
+
+function initHistoryPanelToggle() {
+  const historyToggle = document.getElementById("history-toggle");
+  const historyPanel = document.getElementById("history-panel");
+  const historyOverlay = document.getElementById("history-overlay");
+  const clearHistory = document.getElementById("clear-history");
+  const closeHistory = document.getElementById("close-history");
+  
+  function openHistoryPanel() {
+    historyPanel.classList.add("open");
+    historyOverlay.classList.add("show");
+    updateHistoryPanel();
+  }
+  
+  function closeHistoryPanel() {
+    historyPanel.classList.remove("open");
+    historyOverlay.classList.remove("show");
+  }
+  
+  historyToggle.addEventListener("click", () => {
+    if (historyPanel.classList.contains("open")) {
+      closeHistoryPanel();
+    } else {
+      openHistoryPanel();
+    }
+  });
+  
+  closeHistory.addEventListener("click", closeHistoryPanel);
+  historyOverlay.addEventListener("click", closeHistoryPanel);
+  
+  clearHistory.addEventListener("click", () => {
+    localStorage.removeItem(HISTORY_KEY);
+    updateHistoryPanel();
+  });
+}
+
 // event listener
 newQuoteButton.addEventListener("click", newQuote);
+initTopicButtons();
+initHistoryPanelToggle();
 darkModeToggle.addEventListener("click", toggleDarkMode);
 copyQuoteButton.addEventListener("click", copyQuote);
 favoriteIcon.addEventListener("click", toggleFavorite);
 
-// newQuote function
 async function newQuote() {
-  // Disable the button to prevent multiple clicks
   buttonDisabled("true");
+  favoriteIcon.style.color = "#ef8354";
 
-  // Set the icon to orange while a new quote is generating
-  favoriteIcon.style.color = "#ef8354"; // 주황색으로 설정
-
-  const selectedCategory = categorySelect.value; // Get the selected category from the dropdown
-  const categoryQuotes = quotes[selectedCategory]; // Get quotes from the selected category
-  const randomIndex = Math.floor(Math.random() * categoryQuotes.length); // Get a random quote index
-  const selectedQuote = categoryQuotes[randomIndex]; // Get the random quote from the selected category
+  const filteredQuotes = getQuotesByTopics(selectedTopics);
+  const randomIndex = Math.floor(Math.random() * filteredQuotes.length);
+  const selectedQuote = filteredQuotes[randomIndex];
+  currentQuote = selectedQuote;
 
-  // Enable the button after the quote is fully displayed
   setTimeout(() => {
     buttonDisabled("false");
-  }, selectedQuote.text.length * 60); // Adjust the delay based on typewriter speed and quote length
+  }, selectedQuote.text.length * 60);
 
   typeWriterEffect(selectedQuote.text, updateFavoriteIconColor);
   authorText.textContent = selectedQuote.author;
 
-  // Fetch images from Wikipedia
   const authorImageUrl = await fetchWikipediaImage(selectedQuote.author);
   authorImage.src = authorImageUrl;
+
+  saveHistory(selectedQuote);
 }
 
 // Function to implement typewriter effect
@@ -253,6 +506,7 @@ function updateFavoriteIconColor() {
 
 // Initial icon color setup when the page loads
 updateFavoriteIconColor();
+updateRecommendedPanel();
 
 // Wikipedia API request function
 async function fetchWikipediaImage(authorName) {
@@ -279,4 +533,5 @@ async function fetchWikipediaImage(authorName) {
     console.error("Error fetching Wikipedia image:", error);
     return "./assets/images/default.jpg"; // Handle errors
   }
-}
\ No newline at end of file
+}
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 6a1e4ef..1608a9c 100644
--- a/index.html
+++ b/index.html
@@ -15,16 +15,48 @@
     </style>
   </head>
 
+  <body class="vertical-layout">
     <header class="header-icons">
       <i class="fas fa-star" id="favorite-icon" title="즐겨찾기"></i>
+      <i class="fas fa-history" id="history-toggle" title="历史记录"></i>
       <i class="fas fa-user" id="mypage-icon" title="마이페이지"></i>
     </header>
-  
-  <body class="vertical-layout">
+
+    <div id="history-overlay" class="history-overlay"></div>
+    <aside id="history-panel" class="history-panel">
+      <div class="history-header">
+        <h3>历史记录</h3>
+        <div style="display: flex; gap: 10px;">
+          <button id="clear-history" class="clear-btn">清空</button>
+          <button id="close-history" class="close-btn"><i class="fas fa-times"></i></button>
+        </div>
+      </div>
+      <div id="history-list" class="history-list"></div>
+    </aside>
+
+    <div class="main-content">
     <div class="logo-container" style="text-align: center; margin-bottom: 20px;">
       <img src="assets/images/logo.png" alt="Random Quotes Generator Logo" style="width: 400px; height: auto;">
     </div>
 
+    <div id="topic-buttons" class="topic-buttons">
+      <button class="topic-btn active" data-topic="全部">全部</button>
+      <button class="topic-btn" data-topic="励志">励志</button>
+      <button class="topic-btn" data-topic="幽默">幽默</button>
+      <button class="topic-btn" data-topic="人生">人生</button>
+      <button class="topic-btn" data-topic="成功">成功</button>
+      <button class="topic-btn" data-topic="智慧">智慧</button>
+      <button class="topic-btn" data-topic="勇气">勇气</button>
+      <button class="topic-btn" data-topic="梦想">梦想</button>
+      <button class="topic-btn" data-topic="坚持">坚持</button>
+      <button class="topic-btn" data-topic="态度">态度</button>
+    </div>
+
+    <div id="recommended-panel" class="recommended-panel">
+      <h4><i class="fas fa-lightbulb"></i> 推荐名言</h4>
+      <div id="recommended-list" class="recommended-list"></div>
+    </div>
+
     <div class="container" style="margin-top: 10px; text-align: center;">
       <div>
         <label for="category">Choose a category:</label>
@@ -52,6 +84,8 @@
       </div>
     </div>
 
+    </div>
+
     <script src="./assets/js/script.js"></script>
     <script>
       document.getElementById("mypage-icon").addEventListener("click", () => {