@mete0r/minimal-homepage 2.0.1

package/src/components/AboutMe.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="py-16" id="about">
+    <div class="rounded-[2.5rem] bg-white/60 dark:bg-gray-900/60 backdrop-blur-xl border border-white/40 dark:border-gray-700/40 p-8 md:p-12 shadow-[0_16px_40px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_40px_rgba(0,0,0,0.5)]">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+        <div class="order-2 md:order-1">
+          <h1 class="text-4xl md:text-5xl font-extrabold mb-4 dark:text-white">关于我</h1>
+          <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
+            {{config.author.aboutMeintro}}
+          </p>
+          <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
+            MBTI：<a :href="`https://www.16personalities.com/ch/${config.author.mbti}-人格`" class="font-bold text-blue-600 dark:text-blue-400" target="_blank" rel="noopener noreferrer">{{ config.author.mbti }}</a>
+          </p>
+          <a
+            :href="config.blog.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-block px-6 py-3 rounded-2xl bg-blue-600 text-white font-semibold hover:bg-blue-700 transition-colors"
+          >
+            访问我的博客
+          </a>
+        </div>
+
+        <div class="order-1 md:order-2 flex justify-center md:justify-end">
+          <img
+            :src="config.author.aiPortrait"
+            alt="AI Portrait"
+            class="w-full max-w-md object-contain drop-shadow-2xl"
+            style="-webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%); mask-image: linear-gradient(to bottom, black 75%, transparent 100%);"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import config from '../../main.config.js'
+</script>

package/src/components/AppFooter.vue

@@ -0,0 +1,33 @@
+<template>
+  <footer class="relative z-10 py-6 md:py-8 px-4 md:px-10 mt-14 md:mt-20 border-t border-gray-200 dark:border-gray-800 flex flex-col md:flex-row gap-4 md:gap-0 justify-between md:items-center text-sm text-gray-500 dark:text-gray-400">
+    <div class="flex flex-col gap-1">
+      <span>{{ config.footer.copyright }}</span>
+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-900 dark:hover:text-white">
+        {{ config.footer.icp }}
+      </a>
+    </div>
+
+    <div class="flex gap-4 items-center text-xl">
+      <a
+        v-for="link in config.footer.links"
+        :key="link.url"
+        :href="link.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hover:text-gray-900 dark:hover:text-white transition-colors inline-flex items-center justify-center w-5 h-5"
+        :title="link.name"
+      >
+        <template v-if="link.icon">
+          <img :src="link.icon" :alt="link.name" class="w-5 h-5" />
+        </template>
+        <template v-else>
+          <span class="text-xs leading-none">{{ link.name.substring(0, 2) }}</span>
+        </template>
+      </a>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import config from '../../main.config.js'
+</script>

package/src/components/CardSection.vue

@@ -0,0 +1,147 @@
+<template>
+  <section class="py-14 md:py-20" id="socials">
+    <div class="flex justify-between items-center mb-6 md:mb-10">
+      <h2 class="text-2xl md:text-3xl font-bold dark:text-white flex items-center gap-2">
+        <span class="w-2 h-7 md:h-8 bg-blue-500 rounded-full"></span>
+        社交与链接
+      </h2>
+
+      <div v-if="!isMobile" class="flex gap-2">
+        <button
+          @click="scroll('left')"
+          class="p-2.5 md:p-3 rounded-xl bg-white/50 dark:bg-gray-800/50 backdrop-blur hover:bg-white dark:text-white transition shadow-sm"
+          aria-label="Scroll left"
+        >
+          ←
+        </button>
+        <button
+          @click="scroll('right')"
+          class="p-2.5 md:p-3 rounded-xl bg-white/50 dark:bg-gray-800/50 backdrop-blur hover:bg-white dark:text-white transition shadow-sm"
+          aria-label="Scroll right"
+        >
+          →
+        </button>
+      </div>
+    </div>
+
+    <div v-if="isMobile" class="space-y-4">
+      <a
+        v-for="item in pagedSocials"
+        :key="item.name"
+        :href="item.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="block"
+      >
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-xl p-5 rounded-2xl border border-white/40 dark:border-gray-700/40 shadow-[0_10px_28px_rgba(0,0,0,0.05)] dark:shadow-[0_14px_30px_rgba(0,0,0,0.45)] transition-all duration-300 active:scale-[0.99]">
+          <div class="text-3xl mb-3 h-9 flex items-center">
+            <img
+              v-if="isIconUrl(item.icon)"
+              :src="item.icon"
+              :alt="item.name + ' icon'"
+              class="h-9 w-9 object-contain bg-transparent"
+            />
+            <span v-else>{{ item.icon }}</span>
+          </div>
+          <h3 class="font-bold dark:text-white">{{ item.name }}</h3>
+          <p class="text-sm text-gray-500">{{ item.label }}</p>
+        </div>
+      </a>
+
+      <div v-if="totalPages > 1" class="flex items-center justify-between pt-2">
+        <button
+          @click="prevPage"
+          :disabled="currentPage === 1"
+          class="px-3 py-1.5 rounded-lg text-sm bg-white/70 dark:bg-gray-800/70 disabled:opacity-40"
+        >
+          上一页
+        </button>
+        <span class="text-sm text-gray-500 dark:text-gray-400">{{ currentPage }} / {{ totalPages }}</span>
+        <button
+          @click="nextPage"
+          :disabled="currentPage === totalPages"
+          class="px-3 py-1.5 rounded-lg text-sm bg-white/70 dark:bg-gray-800/70 disabled:opacity-40"
+        >
+          下一页
+        </button>
+      </div>
+    </div>
+
+    <div v-else ref="container" class="flex gap-6 overflow-x-hidden scroll-smooth snap-x">
+      <a
+        v-for="item in config.socials"
+        :key="item.name"
+        :href="item.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="min-w-[calc(20%-1.25rem)] snap-start group block cursor-pointer"
+      >
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-xl p-6 rounded-[2rem] border border-white/40 dark:border-gray-700/40 shadow-[0_10px_28px_rgba(0,0,0,0.05)] dark:shadow-[0_14px_30px_rgba(0,0,0,0.45)] transition-all duration-500 group-hover:-translate-y-2 group-hover:bg-white dark:group-hover:bg-gray-700">
+          <div class="text-4xl mb-4 h-10 flex items-center">
+            <img
+              v-if="isIconUrl(item.icon)"
+              :src="item.icon"
+              :alt="item.name + ' icon'"
+              class="h-10 w-10 object-contain bg-transparent"
+            />
+            <span v-else>{{ item.icon }}</span>
+          </div>
+          <h3 class="font-bold dark:text-white">{{ item.name }}</h3>
+          <p class="text-sm text-gray-500">{{ item.label }}</p>
+        </div>
+      </a>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import config from '../../main.config.js'
+
+const container = ref(null)
+const isMobile = ref(false)
+const currentPage = ref(1)
+const mobilePageSize = 3
+
+const totalPages = computed(() => Math.max(1, Math.ceil((config.socials?.length || 0) / mobilePageSize)))
+const pagedSocials = computed(() => {
+  const start = (currentPage.value - 1) * mobilePageSize
+  return (config.socials || []).slice(start, start + mobilePageSize)
+})
+
+const handleResize = () => {
+  const mobile = window.innerWidth < 768
+  if (mobile !== isMobile.value) {
+    isMobile.value = mobile
+    currentPage.value = 1
+  }
+}
+
+const prevPage = () => {
+  if (currentPage.value > 1) currentPage.value -= 1
+}
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) currentPage.value += 1
+}
+
+const scroll = (dir) => {
+  if (!container.value) return
+  const step = container.value.offsetWidth * 0.82
+  container.value.scrollLeft += dir === 'right' ? step : -step
+}
+
+const isIconUrl = (icon) => {
+  if (typeof icon !== 'string') return false
+  return /^(https?:)?\/\//.test(icon) || icon.endsWith('.svg')
+}
+
+onMounted(() => {
+  handleResize()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>

package/src/components/HelloWorld.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue'
+import viteLogo from '../assets/vite.svg'
+import heroImg from '../assets/hero.png'
+import vueLogo from '../assets/vue.svg'
+
+const count = ref(0)
+</script>
+
+<template>
+  <section id="center">
+    <div class="hero">
+      <img :src="heroImg" class="base" width="170" height="179" alt="" />
+      <img :src="vueLogo" class="framework" alt="Vue logo" />
+      <img :src="viteLogo" class="vite" alt="Vite logo" />
+    </div>
+    <div>
+      <h1>Get started</h1>
+      <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
+    </div>
+    <button class="counter" @click="count++">Count is {{ count }}</button>
+  </section>
+
+  <div class="ticks"></div>
+
+  <section id="next-steps">
+    <div id="docs">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#documentation-icon"></use>
+      </svg>
+      <h2>Documentation</h2>
+      <p>Your questions, answered</p>
+      <ul>
+        <li>
+          <a href="https://vite.dev/" target="_blank">
+            <img class="logo" :src="viteLogo" alt="" />
+            Explore Vite
+          </a>
+        </li>
+        <li>
+          <a href="https://vuejs.org/" target="_blank">
+            <img class="button-icon" :src="vueLogo" alt="" />
+            Learn more
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div id="social">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#social-icon"></use>
+      </svg>
+      <h2>Connect with us</h2>
+      <p>Join the Vite community</p>
+      <ul>
+        <li>
+          <a href="https://github.com/vitejs/vite" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#github-icon"></use>
+            </svg>
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a href="https://chat.vite.dev/" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#discord-icon"></use>
+            </svg>
+            Discord
+          </a>
+        </li>
+        <li>
+          <a href="https://x.com/vite_js" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#x-icon"></use>
+            </svg>
+            X.com
+          </a>
+        </li>
+        <li>
+          <a href="https://bsky.app/profile/vite.dev" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#bluesky-icon"></use>
+            </svg>
+            Bluesky
+          </a>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <div class="ticks"></div>
+  <section id="spacer"></section>
+</template>

package/src/components/HeroSection.vue

@@ -0,0 +1,53 @@
+<template>
+  <section class="relative min-h-[calc(100vh-120px)] md:min-h-screen flex items-center px-4 md:px-10 pt-8 md:pt-20 overflow-hidden">
+    <div
+      class="hidden md:flex w-1/3 h-full justify-end items-end relative"
+      :style="{ transform: `translateY(${scrollY * 0.5}px)`, opacity: 1 - scrollY / 600 }"
+    >
+      <img
+        :src="config.author.aiPortrait"
+        class="max-h-[80vh] object-contain drop-shadow-2xl"
+        style="-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 70%, transparent 100%);"
+        alt="AI Portrait"
+      />
+    </div>
+
+    <div class="w-full md:w-2/3 md:pl-16 z-10">
+      <div class="md:hidden flex justify-center mb-8">
+        <img
+          :src="config.author.aiPortrait"
+          class="w-full max-w-[260px] object-contain drop-shadow-xl"
+          style="-webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%); mask-image: linear-gradient(to bottom, black 75%, transparent 100%);"
+          alt="AI Portrait"
+        />
+      </div>
+
+      <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-5 md:mb-6 dark:text-white">Hi, I'm {{ config.author.name }}</h1>
+      <p class="text-base sm:text-lg md:text-xl text-gray-700 dark:text-gray-300 mb-9 md:mb-12 max-w-2xl leading-relaxed">
+        {{ config.author.intro }}
+      </p>
+
+      <a
+        :href="config.blog.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-block px-6 md:px-8 py-3 bg-blue-600 text-white rounded-2xl hover:bg-blue-700 hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
+      >
+        访问我的博客
+      </a>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import config from '../../main.config.js'
+
+const scrollY = ref(0)
+const handleScroll = () => {
+  scrollY.value = window.scrollY
+}
+
+onMounted(() => window.addEventListener('scroll', handleScroll))
+onUnmounted(() => window.removeEventListener('scroll', handleScroll))
+</script>

package/src/components/MyProject.vue

@@ -0,0 +1,160 @@
+<template>
+  <section class="py-14 md:py-20" id="projects">
+    <div class="flex items-end justify-between mb-6 md:mb-10 gap-4">
+      <h2 class="text-2xl md:text-3xl font-bold dark:text-white">我的项目</h2>
+      <a
+        v-if="isApiMode && config.github.username"
+        :href="`https://github.com/${config.github.username}?tab=repositories`"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-xs md:text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline shrink-0"
+      >
+        查看全部仓库
+      </a>
+    </div>
+
+    <div v-if="loading" class="text-sm text-gray-500 dark:text-gray-400">
+      {{ isApiMode ? '正在读取 GitHub 仓库...' : '正在读取手动项目配置...' }}
+    </div>
+    <div v-else-if="error" class="text-sm text-red-500">加载失败：{{ error }}</div>
+
+    <div v-else class="columns-1 md:columns-2 gap-6 space-y-6">
+      <a
+        v-for="repo in repos"
+        :key="repo.id || repo.name"
+        :href="repo.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="block break-inside-avoid rounded-[1.5rem] md:rounded-[2rem] overflow-hidden bg-white/60 dark:bg-gray-800/60 border border-white/40 dark:border-gray-700/40 backdrop-blur-xl shadow-[0_12px_32px_rgba(15,23,42,0.10)] dark:shadow-[0_16px_36px_rgba(0,0,0,0.45)] transition-transform duration-300 hover:-translate-y-1"
+      >
+        <img
+          v-if="repo.cover"
+          :src="repo.cover"
+          :alt="repo.name + ' cover'"
+          class="w-full h-40 md:h-44 object-cover"
+        />
+
+        <div class="p-5 md:p-6">
+          <div class="flex items-start justify-between gap-4 mb-3">
+            <h3 class="text-lg md:text-xl font-bold dark:text-white line-clamp-2">{{ repo.name }}</h3>
+            <span class="text-xs px-2 py-1 rounded-full bg-black/5 dark:bg-white/10 text-gray-600 dark:text-gray-300 whitespace-nowrap">
+              {{ repo.visibility || 'public' }}
+            </span>
+          </div>
+
+          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">{{ repo.description || '暂无描述' }}</p>
+
+          <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+            <span>{{ repo.language || 'Unknown' }}</span>
+            <span v-if="isApiMode">★ {{ repo.stars || 0 }}</span>
+          </div>
+        </div>
+      </a>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import config from '../../main.config.js'
+
+const repos = ref([])
+const loading = ref(true)
+const error = ref('')
+
+const isApiMode = computed(() => {
+  const value = config.github?.useGithubApi
+  return value === true || value === 'true'
+})
+
+const normalizeApiRepo = (repo) => ({
+  id: repo.id,
+  name: repo.name,
+  url: repo.html_url,
+  description: repo.description,
+  language: repo.language,
+  visibility: repo.visibility,
+  stars: repo.stargazers_count,
+  cover: config.github?.covers?.[repo.name] || ''
+})
+
+const normalizeManualRepo = (repo, idx) => ({
+  id: repo.id || `manual-${idx}`,
+  name: repo.name || `Project ${idx + 1}`,
+  url: repo.url || '#',
+  description: repo.description || '',
+  language: repo.language || 'Unknown',
+  visibility: repo.visibility || 'public',
+  stars: 0,
+  cover: repo.cover || ''
+})
+
+const loadManualRepos = () => {
+  const manualRepos = Array.isArray(config.github?.manualRepos) ? config.github.manualRepos : []
+  repos.value = manualRepos.map(normalizeManualRepo)
+  loading.value = false
+}
+
+const loadGithubRepos = async () => {
+  const username = config.github?.username
+  const maxRepos = config.github?.maxRepos || 10
+  const excludeForks = config.github?.excludeForks !== false
+
+  if (!username) {
+    throw new Error('github.username 未配置')
+  }
+
+  const cacheKey = `github_repos_${username}`
+  const cacheExpiryKey = `github_repos_expiry_${username}`
+  const now = Date.now()
+
+  const cachedExpiry = localStorage.getItem(cacheExpiryKey)
+  if (cachedExpiry && Number.parseInt(cachedExpiry, 10) > now) {
+    try {
+      const cachedRepos = JSON.parse(localStorage.getItem(cacheKey) || 'null')
+      if (Array.isArray(cachedRepos)) {
+        repos.value = cachedRepos.map(normalizeApiRepo)
+        loading.value = false
+        return
+      }
+    } catch (e) {
+      console.error('读取缓存失败:', e)
+    }
+  }
+
+  const token = import.meta.env.VITE_GITHUB_TOKEN
+  const url = `https://api.github.com/users/${username}/repos?sort=updated&per_page=${maxRepos}`
+  const headers = {
+    Accept: 'application/vnd.github+json',
+    ...(token && { Authorization: `Bearer ${token}` })
+  }
+
+  const res = await fetch(url, { headers })
+  if (!res.ok) {
+    throw new Error(`GitHub API ${res.status}`)
+  }
+
+  const data = await res.json()
+  const filteredRepos = excludeForks ? data.filter((repo) => !repo.fork) : data
+
+  localStorage.setItem(cacheKey, JSON.stringify(filteredRepos))
+  localStorage.setItem(cacheExpiryKey, (now + 24 * 60 * 60 * 1000).toString())
+
+  repos.value = filteredRepos.map(normalizeApiRepo)
+  loading.value = false
+}
+
+onMounted(async () => {
+  try {
+    if (!isApiMode.value) {
+      loadManualRepos()
+      return
+    }
+
+    await loadGithubRepos()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '未知错误'
+    loading.value = false
+  }
+})
+</script>

package/src/components/NavBar.vue

@@ -0,0 +1,109 @@
+<template>
+  <nav
+    ref="navRef"
+    class="fixed top-0 left-0 right-0 z-50 h-[116px] md:h-[76px] px-4 md:px-8 py-3 md:py-4 backdrop-blur-md bg-white/70 dark:bg-[#424242]/80 transition-colors duration-500"
+  >
+    <div class="relative h-full">
+      <div class="flex items-center justify-between md:h-full">
+        <button
+          @click="goHome"
+          class="flex items-center gap-2.5 md:gap-3 h-full cursor-pointer"
+          aria-label="Go Home"
+        >
+          <img :src="config.author.avatar" class="w-9 h-9 md:w-10 md:h-10 rounded-full shadow-md" alt="avatar" />
+          <span class="name-chip font-bold text-base md:text-lg dark:text-white">{{ config.author.name }}</span>
+        </button>
+
+        <div class="hidden md:flex gap-2 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          <a
+            v-for="link in config.navLinks"
+            :key="link.name"
+            :href="link.url"
+            @click.prevent="handleNavClick(link.url)"
+            class="px-4 py-2 rounded-xl transition-all duration-300 hover:bg-black/10 dark:hover:bg-white/20 dark:text-gray-200"
+          >
+            {{ link.name }}
+          </a>
+        </div>
+
+        <div class="z-[60]">
+          <ThemeToggle />
+        </div>
+      </div>
+
+      <div class="md:hidden mt-2 overflow-x-auto no-scrollbar">
+        <div class="flex gap-2 pr-2">
+          <a
+            v-for="link in config.navLinks"
+            :key="`mobile-${link.name}`"
+            :href="link.url"
+            @click.prevent="handleNavClick(link.url)"
+            class="shrink-0 px-3 py-1.5 text-sm rounded-lg bg-white/60 dark:bg-white/10 dark:text-gray-200"
+          >
+            {{ link.name }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import config from '../../main.config.js'
+import ThemeToggle from './ThemeToggle.vue'
+
+const navRef = ref(null)
+const router = useRouter()
+const route = useRoute()
+
+const goHome = () => {
+  router.push('/')
+}
+
+const scrollToHashWithRetry = (hash, retries = 20) => {
+  const target = document.querySelector(hash)
+  if (!target) {
+    if (retries <= 0) return
+    window.requestAnimationFrame(() => scrollToHashWithRetry(hash, retries - 1))
+    return
+  }
+
+  const navHeight = navRef.value?.offsetHeight || 0
+  const targetTop = target.getBoundingClientRect().top + window.scrollY - navHeight - 8
+  window.scrollTo({ top: targetTop, behavior: 'smooth' })
+}
+
+const smoothScrollToHash = (hash) => {
+  const target = document.querySelector(hash)
+  if (!target) return
+  const navHeight = navRef.value?.offsetHeight || 0
+  const targetTop = target.getBoundingClientRect().top + window.scrollY - navHeight - 8
+  window.scrollTo({ top: targetTop, behavior: 'smooth' })
+}
+
+const handleNavClick = (url) => {
+  if (!url) return
+
+  if (url.startsWith('#')) {
+    if (route.path !== '/') {
+      router.push({ path: '/', hash: url }).then(() => {
+        scrollToHashWithRetry(url)
+      })
+      return
+    }
+
+    smoothScrollToHash(url)
+    router.replace({ hash: url })
+    return
+  }
+
+  if (url.startsWith('/')) {
+    router.push(url)
+    return
+  }
+
+  window.location.href = url
+}
+</script>