@mete0r/minimal-homepage 2.0.1

package/src/components/RSSSection.vue

@@ -0,0 +1,138 @@
+<template>
+  <section class="py-14 md:py-20" id="articles">
+    <h2 class="text-2xl md:text-3xl font-bold mb-6 md:mb-10 dark:text-white">我的文章</h2>
+
+    <div v-if="isLoading" class="text-sm text-gray-500 dark:text-gray-400">正在加载 RSS...</div>
+    <div v-else-if="loadError" class="text-sm text-red-500">RSS 加载失败：{{ loadError }}</div>
+
+    <template v-else>
+      <transition-group name="article-list" tag="div" class="grid grid-cols-1 gap-4 md:gap-6">
+        <a
+          v-for="(post, index) in visibleArticles"
+          :key="post.link || `${index}-${post.title}`"
+          :href="post.link"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex flex-col md:flex-row gap-4 md:gap-6 p-4 md:p-6 bg-white/40 dark:bg-gray-800/40 backdrop-blur-md rounded-3xl md:rounded-[2.5rem] border border-white/20 hover:bg-white/60 transition-all"
+        >
+          <img :src="config.blog.randomCoverApi + '?r=' + index" class="w-full md:w-48 h-32 object-cover rounded-2xl" />
+          <div class="flex-1">
+            <h3 class="text-lg md:text-xl font-bold dark:text-white mb-2">{{ post.title }}</h3>
+            <p class="text-gray-500 dark:text-gray-400 line-clamp-2 text-sm">{{ post.description }}</p>
+            <p class="mt-4 text-blue-500 font-medium text-sm md:text-base">跳转阅读全文 →</p>
+          </div>
+        </a>
+      </transition-group>
+
+      <div class="mt-10 md:mt-12 text-center" v-if="articles.length > 3">
+        <button
+          @click="showAll = !showAll"
+          class="px-8 md:px-12 py-3 md:py-4 rounded-full bg-white dark:bg-black text-black dark:text-white font-bold shadow-lg hover:scale-105 transition-transform border border-gray-200 dark:border-gray-700"
+        >
+          {{ showAll ? '收起文章' : '查看所有文章' }}
+        </button>
+      </div>
+    </template>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref, onMounted } from 'vue'
+import config from '../../main.config.js'
+
+const articles = ref([])
+const showAll = ref(false)
+const isLoading = ref(true)
+const loadError = ref('')
+
+const visibleArticles = computed(() => (showAll.value ? articles.value : articles.value.slice(0, 3)))
+
+const toAbsoluteLink = (href) => {
+  if (!href) return '#'
+  try {
+    return new URL(href, config.blog.url).toString()
+  } catch {
+    return href
+  }
+}
+
+const getNodeText = (node, selector) => {
+  const target = node.querySelector(selector)
+  return target?.textContent?.trim() || ''
+}
+
+const getFeedUrl = () => {
+  const feed = config.blog.rssFeed || ''
+  if (!feed) return ''
+  if (/^https?:\/\//i.test(feed)) return feed
+  if (feed.startsWith('/') && config.blog.url) {
+    return new URL(feed, config.blog.url).toString()
+  }
+  return feed
+}
+
+const parseItem = (node) => {
+  const linkNode = node.querySelector('link')
+  const rawLink = linkNode?.getAttribute('href') || linkNode?.textContent || '#'
+
+  const contentHtml =
+    getNodeText(node, 'content') ||
+    getNodeText(node, 'content\\:encoded') ||
+    getNodeText(node, 'summary') ||
+    getNodeText(node, 'description')
+
+  const plainDescription = contentHtml
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 160)
+
+  return {
+    title: getNodeText(node, 'title') || 'Untitled',
+    link: toAbsoluteLink(rawLink.trim()),
+    description: plainDescription || '暂无摘要'
+  }
+}
+
+onMounted(async () => {
+  const feedUrl = getFeedUrl()
+  const cacheKey = `blog_rss_cache:${feedUrl}`
+  const cacheTime = 15 * 60 * 1000
+  const shouldBypassCache = import.meta.env.DEV
+  const cachedData = JSON.parse(localStorage.getItem(cacheKey) || 'null')
+
+  if (!shouldBypassCache && cachedData && Date.now() - cachedData.timestamp < cacheTime) {
+    articles.value = cachedData.items
+    isLoading.value = false
+    return
+  }
+
+  try {
+    if (!feedUrl) {
+      throw new Error('rssFeed 未配置')
+    }
+
+    const res = await fetch(feedUrl, { cache: 'no-store' })
+    if (!res.ok) {
+      throw new Error(`请求失败 ${res.status}`)
+    }
+
+    const text = await res.text()
+    const xmlDoc = new DOMParser().parseFromString(text, 'text/xml')
+    if (xmlDoc.querySelector('parsererror')) {
+      throw new Error('返回内容不是有效 XML')
+    }
+
+    const items = Array.from(xmlDoc.querySelectorAll('item, entry')).slice(0, 12)
+    const parsedItems = items.map(parseItem)
+
+    articles.value = parsedItems
+    localStorage.setItem(cacheKey, JSON.stringify({ items: parsedItems, timestamp: Date.now() }))
+  } catch (error) {
+    loadError.value = error instanceof Error ? error.message : '未知错误'
+    console.error('RSS 解析失败', error)
+  } finally {
+    isLoading.value = false
+  }
+})
+</script>

package/src/components/ThemeToggle.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="theme-toggle">
+    <theme-button :value="initialTheme" size="2" @change="handleThemeChange"></theme-button>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import './theme-button-element.js'
+
+const THEME_KEY = 'preferred-theme'
+
+const getInitialTheme = () => {
+  if (typeof window === 'undefined') {
+    return 'light'
+  }
+
+  const savedTheme = localStorage.getItem(THEME_KEY)
+  if (savedTheme === 'light' || savedTheme === 'dark') {
+    return savedTheme
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const initialTheme = getInitialTheme()
+
+const applyTheme = (theme) => {
+  const isDark = theme === 'dark'
+  document.documentElement.classList.toggle('dark', isDark)
+  document.body.style.backgroundColor = isDark ? '#424242' : 'aliceblue'
+}
+
+const handleThemeChange = (e) => {
+  const theme = e.detail === 'dark' ? 'dark' : 'light'
+  applyTheme(theme)
+  localStorage.setItem(THEME_KEY, theme)
+}
+
+onMounted(() => {
+  applyTheme(initialTheme)
+})
+</script>
+
+<style scoped>
+.theme-toggle {
+  /* 调整按钮位置 */
+  position: relative;
+  left: -45px;
+}
+</style>

package/src/components/theme-button-element.js

@@ -0,0 +1,245 @@
+(() => {
+  const func = (root, initTheme, changeTheme) => {
+    const $ = (s) => {
+      let dom = root.querySelectorAll(s);
+      return dom.length == 1 ? dom[0] : dom;
+    };
+    let mainButton = $(".main-button");
+    let daytimeBackground = $(".daytime-background");
+    let cloud = $(".cloud");
+    let cloudList = $(".cloud-son");
+    let cloudLight = $(".cloud-light");
+    let components = $(".components");
+    let moon = $(".moon");
+    let stars = $(".stars");
+    let star = $(".star");
+    let isMoved = false;
+    let isClicked = false;
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+      toggleThemeBasedOnSystem();
+    });
+    const toggleThemeBasedOnSystem = () => {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        if (!isMoved) {
+          components.onclick();
+        }
+      } else {
+        if (isMoved) {
+          components.onclick();
+        }
+      }
+    };
+    components.onclick = () => {
+      if (isMoved) {
+        mainButton.style.transform = "translateX(0)";
+        mainButton.style.backgroundColor = "rgba(255, 195, 35,1)";
+
+        mainButton.style.boxShadow =
+          "3em 3em 5em rgba(0, 0, 0, 0.5), inset  -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset  4em 5em 2em -2em rgba(255, 230, 80,1)";
+
+        daytimeBackground[0].style.transform = "translateX(0)";
+        daytimeBackground[1].style.transform = "translateX(0)";
+        daytimeBackground[2].style.transform = "translateX(0)";
+        cloud.style.transform = "translateY(10em)";
+        cloudLight.style.transform = "translateY(10em)";
+        components.style.backgroundColor = "rgba(70, 133, 192,1)";
+
+        moon[0].style.opacity = "0";
+        moon[1].style.opacity = "0";
+        moon[2].style.opacity = "0";
+
+        stars.style.transform = "translateY(-125em)";
+        stars.style.opacity = "0";
+
+        changeTheme("light");
+      } else {
+        mainButton.style.transform = "translateX(110em)";
+        mainButton.style.backgroundColor = "rgba(195, 200,210,1)";
+
+        mainButton.style.boxShadow =
+          "3em 3em 5em rgba(0, 0, 0, 0.5), inset  -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset  4em 5em 2em -2em rgba(255, 255, 210,1)";
+
+        daytimeBackground[0].style.transform = "translateX(110em)";
+        daytimeBackground[1].style.transform = "translateX(80em)";
+        daytimeBackground[2].style.transform = "translateX(50em)";
+        cloud.style.transform = "translateY(80em)";
+        cloudLight.style.transform = "translateY(80em)";
+        components.style.backgroundColor = "rgba(25,30,50,1)";
+
+        moon[0].style.opacity = "1";
+        moon[1].style.opacity = "1";
+        moon[2].style.opacity = "1";
+
+        stars.style.transform = "translateY(-62.5em)";
+        stars.style.opacity = "1";
+
+        changeTheme("dark");
+      }
+
+      isClicked = true;
+
+      setTimeout(function () {
+        isClicked = false;
+      }, 500);
+      isMoved = !isMoved;
+    };
+
+    mainButton.addEventListener("mousemove", function () {
+      if (isClicked) return;
+
+      if (isMoved) {
+        mainButton.style.transform = "translateX(100em)";
+        daytimeBackground[0].style.transform = "translateX(100em)";
+        daytimeBackground[1].style.transform = "translateX(73em)";
+        daytimeBackground[2].style.transform = "translateX(46em)";
+
+        star[0].style.top = "10em";
+        star[0].style.left = "36em";
+        star[1].style.top = "40em";
+        star[1].style.left = "87em";
+        star[2].style.top = "26em";
+        star[2].style.left = "16em";
+        star[3].style.top = "38em";
+        star[3].style.left = "63em";
+        star[4].style.top = "20.5em";
+        star[4].style.left = "72em";
+        star[5].style.top = "51.5em";
+        star[5].style.left = "35em";
+      } else {
+        mainButton.style.transform = "translateX(10em)";
+        daytimeBackground[0].style.transform = "translateX(10em)";
+        daytimeBackground[1].style.transform = "translateX(7em)";
+        daytimeBackground[2].style.transform = "translateX(4em)";
+
+        cloudList[0].style.right = "-24em";
+        cloudList[0].style.bottom = "10em";
+        cloudList[1].style.right = "-12em";
+        cloudList[1].style.bottom = "-27em";
+        cloudList[2].style.right = "17em";
+        cloudList[2].style.bottom = "-43em";
+        cloudList[3].style.right = "46em";
+        cloudList[3].style.bottom = "-39em";
+        cloudList[4].style.right = "70em";
+        cloudList[4].style.bottom = "-65em";
+        cloudList[5].style.right = "109em";
+        cloudList[5].style.bottom = "-54em";
+        cloudList[6].style.right = "-23em";
+        cloudList[6].style.bottom = "10em";
+        cloudList[7].style.right = "-11em";
+        cloudList[7].style.bottom = "-26em";
+        cloudList[8].style.right = "18em";
+        cloudList[8].style.bottom = "-42em";
+        cloudList[9].style.right = "47em";
+        cloudList[9].style.bottom = "-38em";
+        cloudList[10].style.right = "74em";
+        cloudList[10].style.bottom = "-64em";
+        cloudList[11].style.right = "110em";
+        cloudList[11].style.bottom = "-55em";
+      }
+    });
+
+    mainButton.addEventListener("mouseout", function () {
+      if (isClicked) {
+        return;
+      }
+      if (isMoved) {
+        mainButton.style.transform = "translateX(110em)";
+        daytimeBackground[0].style.transform = "translateX(110em)";
+        daytimeBackground[1].style.transform = "translateX(80em)";
+        daytimeBackground[2].style.transform = "translateX(50em)";
+
+        star[0].style.top = "11em";
+        star[0].style.left = "39em";
+        star[1].style.top = "39em";
+        star[1].style.left = "91em";
+        star[2].style.top = "26em";
+        star[2].style.left = "19em";
+        star[3].style.top = "37em";
+        star[3].style.left = "66em";
+        star[4].style.top = "21em";
+        star[4].style.left = "75em";
+        star[5].style.top = "51em";
+        star[5].style.left = "38em";
+      } else {
+        mainButton.style.transform = "translateX(0em)";
+        daytimeBackground[0].style.transform = "translateX(0em)";
+        daytimeBackground[1].style.transform = "translateX(0em)";
+        daytimeBackground[2].style.transform = "translateX(0em)";
+
+        cloudList[0].style.right = "-20em";
+        cloudList[0].style.bottom = "10em";
+        cloudList[1].style.right = "-10em";
+        cloudList[1].style.bottom = "-25em";
+        cloudList[2].style.right = "20em";
+        cloudList[2].style.bottom = "-40em";
+        cloudList[3].style.right = "50em";
+        cloudList[3].style.bottom = "-35em";
+        cloudList[4].style.right = "75em";
+        cloudList[4].style.bottom = "-60em";
+        cloudList[5].style.right = "110em";
+        cloudList[5].style.bottom = "-50em";
+        cloudList[6].style.right = "-20em";
+        cloudList[6].style.bottom = "10em";
+        cloudList[7].style.right = "-10em";
+        cloudList[7].style.bottom = "-25em";
+        cloudList[8].style.right = "20em";
+        cloudList[8].style.bottom = "-40em";
+        cloudList[9].style.right = "50em";
+        cloudList[9].style.bottom = "-35em";
+        cloudList[10].style.right = "75em";
+        cloudList[10].style.bottom = "-60em";
+        cloudList[11].style.right = "110em";
+        cloudList[11].style.bottom = "-50em";
+      }
+    });
+
+    const getRandomDirection = () => {
+      const directions = ["2em", "-2em"];
+      return directions[Math.floor(Math.random() * directions.length)];
+    };
+
+    const moveElementRandomly = (element) => {
+      const randomDirectionX = getRandomDirection();
+      const randomDirectionY = getRandomDirection();
+      element.style.transform = `translate(${randomDirectionX}, ${randomDirectionY})`;
+    };
+
+    const cloudSons = root.querySelectorAll(".cloud-son");
+    setInterval(() => {
+      cloudSons.forEach(moveElementRandomly);
+    }, 1000);
+
+    if (initTheme === "dark") {
+      components.onclick();
+    }
+  };
+
+  class ThemeButton extends HTMLElement {
+    constructor() {
+      super();
+    }
+    connectedCallback() {
+      const initTheme = this.getAttribute("value") || "light";
+      const size = +this.getAttribute("size") || 3;
+      const shadow = this.attachShadow({ mode: "closed" });
+      const container = document.createElement("div");
+      container.setAttribute("class", "container");
+      container.setAttribute("style", `font-size: ${(size / 3).toFixed(2)}px`);
+      container.innerHTML =
+        '<div class="components"><div class="main-button"><div class="moon"></div><div class="moon"></div><div class="moon"></div></div><div class="daytime-background"></div><div class="daytime-background"></div><div class="daytime-background"></div><div class="cloud"><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div></div><div class="cloud-light"><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div></div><div class="stars"><div class="star big"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star big"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star medium"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star medium"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star small"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star small"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div></div></div>';
+      const style = document.createElement("style");
+      style.textContent =
+        "* { margin: 0; padding: 0; transition: 0.7s; -webkit-tap-highlight-color:rgba(0,0,0,0); } .container { position: absolute;top: 50%;left: 50%;margin-top: -35em;margin-left: -90em;width: 180em; height: 70em; display: inline-block; vertical-align: bottom; transform: translate3d(0, 0, 0); } .components{ position:fixed; width: 180em; height: 70em; background-color: rgba(70, 133, 192,1); border-radius: 100em; box-shadow: inset 0 0 5em 3em rgba(0, 0, 0, 0.5); overflow: hidden; transition: 0.7s; transition-timing-function: cubic-bezier( 0,0.5, 1,1); cursor: pointer; } .main-button{ margin: 7.5em 0 0 7.5em; width: 55em; height:55em; background-color: rgba(255, 195, 35,1); border-radius: 50%; box-shadow:3em 3em 5em rgba(0, 0, 0, 0.5), inset -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset 4em 5em 2em -2em rgba(255, 230, 80,1); transition: 1.0s; transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); } .moon{ position: absolute; background-color: rgba(150, 160, 180, 1); box-shadow:inset 0em 0em 1em 1em rgba(0, 0, 0, 0.3) ; border-radius: 50%; transition: 0.5s; opacity: 0; } .moon:nth-child(1){ top: 7.5em; left: 25em; width: 12.5em; height: 12.5em; } .moon:nth-child(2){ top: 20em; left: 7.5em; width: 20em; height: 20em; } .moon:nth-child(3){ top: 32.5em; left: 32.5em; width: 12.5em; height: 12.5em; } .daytime-background { position: absolute; border-radius: 50%; transition: 1.0s; transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); } .daytime-background:nth-child(2){ top: -20em; left: -20em; width: 110em; height:110em; background-color: rgba(255, 255, 255,0.2); z-index: -2; } .daytime-background:nth-child(3){ top: -32.5em; left: -17.5em; width: 135em; height:135em; background-color: rgba(255, 255, 255,0.1); z-index: -3; } .daytime-background:nth-child(4){ top: -45em; left: -15em; width: 160em; height:160em; background-color: rgba(255, 255, 255,0.05); z-index: -4; } .cloud,.cloud-light{ transform: translateY(10em); transition: 1.0s; transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); } .cloud-son{ position: absolute; background-color: #fff; border-radius: 50%; z-index: -1; transition: transform 6s,right 1s,bottom 1s; } .cloud-son:nth-child(6n+1){ right: -20em; bottom: 10em; width: 50em; height: 50em; } .cloud-son:nth-child(6n+2) { right: -10em; bottom: -25em; width: 60em; height: 60em; } .cloud-son:nth-child(6n+3) { right: 20em; bottom: -40em; width: 60em; height: 60em; } .cloud-son:nth-child(6n+4) { right: 50em; bottom: -35em; width: 60em; height: 60em; } .cloud-son:nth-child(6n+5) { right: 75em; bottom: -60em; width: 75em; height: 75em; } .cloud-son:nth-child(6n+6) { right: 110em; bottom: -50em; width: 60em; height: 60em; } .cloud{ z-index: -2; } .cloud-light{ position: absolute; right: 0em; bottom: 25em; opacity: 0.5; z-index: -3; /*transform: rotate(-5deg);*/ } .stars{ transform: translateY(-125em); z-index: -2; transition: 1.0s; transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); } .big { --size: 7.5em; } .medium { --size: 5em; } .small { --size: 3em; } .star { position: absolute; width: calc(2*var(--size)); height: calc(2*var(--size)); } .star:nth-child(1){ top: 11em; left: 39em; animation-name: star; animation-duration: 3.5s; } .star:nth-child(2){ top: 39em; left: 91em; animation-name: star; animation-duration: 4.1s; } .star:nth-child(3){ top: 26em; left: 19em; animation-name: star; animation-duration: 4.9s; } .star:nth-child(4){ top: 37em; left: 66em; animation-name: star; animation-duration: 5.3s; } .star:nth-child(5){ top: 21em; left: 75em; animation-name: star; animation-duration: 3s; } .star:nth-child(6){ top: 51em; left: 38em; animation-name: star; animation-duration: 2.2s; } @keyframes star { 0%,20%{ transform: scale(0); } 20%,100% { transform: scale(1); } } .star-son{ float: left; } .star-son:nth-child(1) { --pos: left 0; } .star-son:nth-child(2) { --pos: right 0; } .star-son:nth-child(3) { --pos: 0 bottom; } .star-son:nth-child(4) { --pos: right bottom; } .star-son { width: var(--size); height: var(--size); background-image: radial-gradient(circle var(--size) at var(--pos), transparent var(--size), #fff); } .star{ transform: scale(1); transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); transition: 1s; animation-iteration-count:infinite; animation-direction: alternate; animation-timing-function: linear; } .twinkle { transform: scale(0); }";
+      const changeTheme = (detail) => {
+        this.dispatchEvent(new CustomEvent("change", { detail }));
+      };
+      func(container, initTheme, changeTheme);
+      shadow.appendChild(style);
+      shadow.appendChild(container);
+    }
+  }
+
+  if (!customElements.get("theme-button")) {
+    customElements.define("theme-button", ThemeButton);
+  }
+})();

package/src/config.js

@@ -0,0 +1 @@
+export { default } from '../main.config.js'

package/src/index.js

@@ -0,0 +1,5 @@
+import App from './App.vue'
+export { App }
+export function install(app) {
+    app.component('App', App)
+}

package/src/main.js

@@ -0,0 +1,48 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router, { preloadAboutPage } from './router'
+import config from '../main.config.js'
+import './style.css'
+
+const applySiteMeta = () => {
+  if (config.site?.title) {
+    document.title = config.site.title
+  }
+
+  if (config.site?.icon) {
+    let iconLink = document.querySelector("link[rel='icon']")
+    if (!iconLink) {
+      iconLink = document.createElement('link')
+      iconLink.setAttribute('rel', 'icon')
+      document.head.appendChild(iconLink)
+    }
+
+    const iconUrl = config.site.icon
+    iconLink.setAttribute('href', iconUrl)
+    iconLink.setAttribute('type', iconUrl.endsWith('.svg') ? 'image/svg+xml' : 'image/png')
+  }
+}
+
+const mountHeartClickEffect = () => {
+  const scriptSrc = 'https://gcore.jsdelivr.net/gh/qsya/MouseClickEffect@main/js/heart.js'
+  if (document.querySelector(`script[src='${scriptSrc}']`)) return
+
+  const script = document.createElement('script')
+  script.src = scriptSrc
+  script.defer = true
+  document.body.appendChild(script)
+}
+
+applySiteMeta()
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+
+mountHeartClickEffect()
+
+if ('requestIdleCallback' in window) {
+  window.requestIdleCallback(() => preloadAboutPage())
+} else {
+  window.setTimeout(() => preloadAboutPage(), 500)
+}

package/src/pages/AboutPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="relative">
+    <AboutMe />
+  </div>
+</template>
+
+<script setup>
+import AboutMe from '../components/AboutMe.vue'
+</script>

package/src/pages/HomePage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="relative">
+    <HeroSection />
+    <CardSection />
+    <MyProject />
+    <RSSSection />
+  </div>
+</template>
+
+<script setup>
+import HeroSection from '../components/HeroSection.vue'
+import CardSection from '../components/CardSection.vue'
+import MyProject from '../components/MyProject.vue'
+import RSSSection from '../components/RSSSection.vue'
+</script>

package/src/router.js

@@ -0,0 +1,27 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from './pages/HomePage.vue'
+
+const AboutPage = () => import('./pages/AboutPage.vue')
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', name: 'home', component: HomePage },
+    { path: '/about', name: 'about', component: AboutPage }
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) return savedPosition
+    if (to.hash) {
+      return {
+        el: to.hash,
+        top: 84,
+        behavior: 'smooth'
+      }
+    }
+    return { top: 0, behavior: 'smooth' }
+  }
+})
+
+export const preloadAboutPage = () => import('./pages/AboutPage.vue')
+
+export default router

package/src/style.css

@@ -0,0 +1,96 @@
+/* src/style.css */
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+:root {
+  --background: aliceblue;
+}
+
+.dark {
+  --background: #424242;
+}
+
+/* 跳转框背景色 */
+.bg-blue-600 {
+  --un-bg-opacity: 1;
+  background-color: rgb(128 128 128 / var(--un-bg-opacity));
+}
+
+.hover\:bg-blue-700:hover {
+  --un-bg-opacity: 1;
+  background-color: rgb(128 128 128 / var(--un-bg-opacity));
+}
+
+body {
+  background-color: var(--background);
+  transition: background-color 0.5s ease;
+}
+
+.route-fade-enter-active,
+.route-fade-leave-active {
+  transition: opacity 0.35s ease, transform 0.35s ease;
+}
+
+.route-fade-enter-from {
+  opacity: 0;
+  transform: translateY(12px) scale(0.995);
+}
+
+.route-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.995);
+}
+
+.article-list-enter-active,
+.article-list-leave-active {
+  transition: all 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.article-list-enter-from,
+.article-list-leave-to {
+  opacity: 0;
+  transform: translateY(18px) scale(0.98);
+}
+
+.article-list-move {
+  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.name-chip {
+  padding: 0.35rem 0.85rem;
+  border-radius: 0.9rem;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.name-chip:hover {
+  background: rgba(15, 23, 42, 0.08);
+  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.18);
+}
+
+.dark .name-chip:hover {
+  background: rgba(255, 255, 255, 0.14);
+  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.22);
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/vite.config.js

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag === 'theme-button'
+        }
+      }
+    })
+  ],
+  build: {
+    lib: {
+      entry: 'src/index.js',
+      name: 'MinimalHomepage',
+      fileName: (format) => `index.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue', 'vue-router'],
+      output: {
+        globals: {
+          vue: 'Vue',
+          'vue-router': 'VueRouter'
+        }
+      }
+    }
+  }
+})