From 57c662aa2fd99406e13eb824e943fd21dfd05a29 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Mon, 16 Mar 2026 00:26:59 +0800
Subject: [PATCH] style(theme): enhance visual design and mobile responsiveness

---
 .../theme/components/ArticleCard.vue          | 45 +++++++-----
 .../theme/components/ArticleGrid.vue          | 13 +++-
 .../theme/components/CategoryIndex.vue        | 31 +++++++--
 .../theme/components/HomeFeatures.vue         | 59 +++++++++++++++-
 docs/.vitepress/theme/components/NavCard.vue  | 69 ++++++++++++++-----
 docs/.vitepress/theme/components/NavGrid.vue  | 14 +++-
 docs/public/sitemap.xml                       | 14 ++--
 7 files changed, 190 insertions(+), 55 deletions(-)

diff --git a/docs/.vitepress/theme/components/ArticleCard.vue b/docs/.vitepress/theme/components/ArticleCard.vue
index e0ed1f9..d8113ff 100644
--- a/docs/.vitepress/theme/components/ArticleCard.vue
+++ b/docs/.vitepress/theme/components/ArticleCard.vue
@@ -36,20 +36,27 @@ defineProps({
 .article-card {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  background-color: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 16px;
+  align-items: flex-start;
+  background:
+    radial-gradient(circle at 100% -10%, color-mix(in srgb, var(--vp-c-brand-1) 10%, transparent), transparent 42%),
+    linear-gradient(160deg, color-mix(in srgb, var(--vp-c-brand-1) 6%, var(--vp-c-bg-soft)) 0%, var(--vp-c-bg-soft) 100%);
+  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 10%, var(--vp-c-divider));
+  border-radius: 20px;
+  padding: 18px 20px;
   text-decoration: none;
-  transition: all 0.2s;
+  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   height: 100%;
+  backdrop-filter: blur(8px);
 }
 
 .article-card:hover {
   border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: 0 18px 40px rgba(0, 113, 227, 0.12);
+}
+
+.dark .article-card:hover {
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
 }
 
 .card-content {
@@ -57,38 +64,44 @@ defineProps({
 }
 
 .title {
-  margin: 0 0 8px;
-  font-size: 1.1rem;
+  margin: 0 0 10px;
+  font-size: 1.08rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
+  line-height: 1.4;
+  letter-spacing: -0.01em;
 }
 
 .description {
   margin: 0;
   font-size: 0.9rem;
   color: var(--vp-c-text-2);
-  line-height: 1.5;
+  line-height: 1.65;
 }
 
 .tags {
-  margin-top: 12px;
+  margin-top: 14px;
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
 .tag {
   font-size: 0.75rem;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background-color: var(--vp-c-bg-mute);
+  padding: 4px 10px;
+  border-radius: 999px;
+  background-color: color-mix(in srgb, var(--vp-c-brand-1) 10%, var(--vp-c-bg-mute));
   color: var(--vp-c-text-2);
 }
 
 .arrow {
   margin-left: 16px;
-  font-size: 1.2rem;
+  margin-top: 2px;
+  font-size: 1rem;
   color: var(--vp-c-text-3);
   transition: transform 0.2s;
+  line-height: 1;
+  font-weight: 700;
 }
 
 .article-card:hover .arrow {
diff --git a/docs/.vitepress/theme/components/ArticleGrid.vue b/docs/.vitepress/theme/components/ArticleGrid.vue
index 339ac51..467da2f 100644
--- a/docs/.vitepress/theme/components/ArticleGrid.vue
+++ b/docs/.vitepress/theme/components/ArticleGrid.vue
@@ -22,9 +22,18 @@ defineProps({
 <style scoped>
 .article-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 18px;
   margin-top: 24px;
   margin-bottom: 48px;
 }
+
+@media (max-width: 768px) {
+  .article-grid {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    margin-top: 18px;
+    margin-bottom: 28px;
+  }
+}
 </style>
diff --git a/docs/.vitepress/theme/components/CategoryIndex.vue b/docs/.vitepress/theme/components/CategoryIndex.vue
index 8f267c7..08788bd 100644
--- a/docs/.vitepress/theme/components/CategoryIndex.vue
+++ b/docs/.vitepress/theme/components/CategoryIndex.vue
@@ -42,29 +42,46 @@ defineProps({
 
 <style scoped>
 .category-index {
-  margin-top: 24px;
+  margin-top: 28px;
 }
 
 .category-section {
-  margin-bottom: 48px;
+  margin-bottom: 52px;
 }
 
 .category-title {
-  font-size: 1.5rem;
+  font-size: 1.65rem;
   font-weight: 700;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
   border-bottom: none;
+  letter-spacing: -0.02em;
 }
 
 .category-desc {
   font-size: 1rem;
   color: var(--vp-c-text-2);
-  margin-bottom: 24px;
+  margin-bottom: 20px;
+  line-height: 1.68;
 }
 
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 18px;
+}
+
+@media (max-width: 768px) {
+  .category-section {
+    margin-bottom: 38px;
+  }
+
+  .category-title {
+    font-size: 1.4rem;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue
index f71c1c6..3832a8b 100644
--- a/docs/.vitepress/theme/components/HomeFeatures.vue
+++ b/docs/.vitepress/theme/components/HomeFeatures.vue
@@ -7,9 +7,11 @@ const router = useRouter()
 const { site, page, lang } = useData()
 const activeTab = ref('home')
 const showLangMenu = ref(false)
+const topPromoProgress = ref(1)
 
 // Appendix Scroll Logic
 const appendixWrapper = ref(null)
+const pmSection = ref(null)
 const totalPages = ref(1)
 const currentPage = ref(0)
 
@@ -1595,6 +1597,38 @@ const closeLangMenu = (e) => {
   }
 }
 
+const updateTopPromoVisibility = () => {
+  if (!pmSection.value) {
+    topPromoProgress.value = 1
+    return
+  }
+  const navHeight = 44
+  const sectionTop = pmSection.value.getBoundingClientRect().top + window.pageYOffset
+  const endY = sectionTop - navHeight
+  const startY = endY - 96
+  const scrollY = window.pageYOffset
+  if (scrollY <= startY) {
+    topPromoProgress.value = 1
+    return
+  }
+  if (scrollY >= endY) {
+    topPromoProgress.value = 0
+    return
+  }
+  topPromoProgress.value = (endY - scrollY) / (endY - startY)
+}
+
+const topPromoStyle = computed(() => {
+  const progress = topPromoProgress.value
+  return {
+    opacity: progress,
+    transform: `translateY(${-100 * (1 - progress)}%)`,
+    maxHeight: `${30 * progress}px`,
+    borderTopColor: `rgba(229, 229, 234, ${progress})`,
+    pointerEvents: progress < 0.02 ? 'none' : 'auto'
+  }
+})
+
 onMounted(() => {
   document.addEventListener('click', closeLangMenu)
   if (appendixWrapper.value) {
@@ -1602,6 +1636,9 @@ onMounted(() => {
     updatePagination()
     window.addEventListener('resize', updatePagination)
   }
+  updateTopPromoVisibility()
+  window.addEventListener('scroll', updateTopPromoVisibility, { passive: true })
+  window.addEventListener('resize', updateTopPromoVisibility)
 })
 
 onUnmounted(() => {
@@ -1610,6 +1647,8 @@ onUnmounted(() => {
     appendixWrapper.value.removeEventListener('scroll', onAppendixScroll)
   }
   window.removeEventListener('resize', updatePagination)
+  window.removeEventListener('scroll', updateTopPromoVisibility)
+  window.removeEventListener('resize', updateTopPromoVisibility)
 })
 
 // Stage 1: 产品经理 (Web 原型)
@@ -1860,7 +1899,10 @@ const appendixCards = [
           </div>
         </div>
       </div>
-      <div class="nav-promo">
+      <div
+        class="nav-promo"
+        :style="topPromoStyle"
+      >
         <span>{{ topPromo.text }}</span>
         <a :href="resolveFooterHref(topPromo.link)">{{ topPromo.cta }}</a>
       </div>
@@ -1875,6 +1917,7 @@ const appendixCards = [
     <!-- Stage 1: Product Manager -->
     <section
       id="pm"
+      ref="pmSection"
       class="section-container section-pm"
     >
       <div class="section-header">
@@ -2188,6 +2231,7 @@ a {
   align-items: center;
   justify-content: center;
   position: relative;
+  z-index: 2;
 }
 
 .nav-cluster {
@@ -2271,7 +2315,7 @@ a {
 }
 
 .nav-promo {
-  height: 30px;
+  max-height: 30px;
   border-top: 1px solid #e5e5ea;
   display: flex;
   align-items: center;
@@ -2280,6 +2324,16 @@ a {
   font-size: 13px;
   color: #1d1d1f;
   padding: 0 16px;
+  overflow: hidden;
+  transform-origin: top center;
+  position: relative;
+  z-index: 1;
+  will-change: transform, opacity, max-height, border-color;
+  transition:
+    transform 0.16s ease-out,
+    opacity 0.16s ease-out,
+    max-height 0.16s ease-out,
+    border-color 0.16s ease-out;
 }
 
 .nav-promo a {
@@ -2345,6 +2399,7 @@ a {
   gap: 2px;
   max-height: 300px;
   overflow-y: auto;
+  z-index: 20;
 }
 
 .lang-item {
diff --git a/docs/.vitepress/theme/components/NavCard.vue b/docs/.vitepress/theme/components/NavCard.vue
index a0ebd16..3894b84 100644
--- a/docs/.vitepress/theme/components/NavCard.vue
+++ b/docs/.vitepress/theme/components/NavCard.vue
@@ -27,12 +27,15 @@ defineProps({
     class="nav-card-link"
   >
     <div class="nav-card">
-      <div class="card-header">
-        <span
-          v-if="icon"
-          class="card-icon"
-        >{{ icon }}</span>
-        <span class="card-title">{{ title }}</span>
+      <div class="card-top">
+        <div class="card-header">
+          <span
+            v-if="icon"
+            class="card-icon"
+          >{{ icon }}</span>
+          <span class="card-title">{{ title }}</span>
+        </div>
+        <span class="card-arrow">↗</span>
       </div>
       <div
         v-if="description"
@@ -50,40 +53,70 @@ defineProps({
 }
 
 .nav-card {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 16px;
-  transition: all 0.3s ease;
-  background: var(--vp-c-bg-soft);
+  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 12%, var(--vp-c-divider));
+  border-radius: 22px;
+  padding: 20px 22px;
+  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+  background:
+    radial-gradient(circle at 100% -10%, color-mix(in srgb, var(--vp-c-brand-1) 12%, transparent), transparent 45%),
+    linear-gradient(165deg, color-mix(in srgb, var(--vp-c-brand-1) 6%, var(--vp-c-bg-soft)) 0%, var(--vp-c-bg-soft) 100%);
   height: 100%;
+  min-height: 132px;
+  backdrop-filter: blur(10px);
 }
 
 .nav-card:hover {
   border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: 0 18px 40px rgba(0, 113, 227, 0.14);
+}
+
+.dark .nav-card:hover {
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
+}
+
+.card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .card-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .card-icon {
-  font-size: 20px;
+  font-size: 22px;
 }
 
 .card-title {
   font-weight: 600;
-  color: var(--vp-c-brand);
-  font-size: 14px;
+  color: var(--vp-c-text-1);
+  font-size: 17px;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+}
+
+.card-arrow {
+  color: var(--vp-c-brand-1);
+  font-size: 15px;
+  font-weight: 700;
+  opacity: 0.8;
+  transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+.nav-card:hover .card-arrow {
+  transform: translate(2px, -2px);
+  opacity: 1;
 }
 
 .card-desc {
   color: var(--vp-c-text-2);
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.68;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/NavGrid.vue b/docs/.vitepress/theme/components/NavGrid.vue
index 91b6a3b..5c8328c 100644
--- a/docs/.vitepress/theme/components/NavGrid.vue
+++ b/docs/.vitepress/theme/components/NavGrid.vue
@@ -7,8 +7,16 @@
 <style scoped>
 .nav-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-  margin: 20px 0;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 18px;
+  margin: 24px 0 28px;
+}
+
+@media (max-width: 768px) {
+  .nav-grid {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    margin: 18px 0 24px;
+  }
 }
 </style>
diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml
index 82b3bbb..7ff6d16 100644
--- a/docs/public/sitemap.xml
+++ b/docs/public/sitemap.xml
@@ -3,7 +3,7 @@
          xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/</loc>
-    <lastmod>2026-02-26T04:35:28+08:00</lastmod>
+    <lastmod>2026-03-15T13:41:39+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/"/>
@@ -594,7 +594,7 @@
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary/</loc>
-    <lastmod>2026-02-15T01:57:52+08:00</lastmod>
+    <lastmod>2026-03-12T13:45:38+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary/"/>
@@ -749,7 +749,7 @@
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/</loc>
-    <lastmod>2026-02-26T12:59:01+08:00</lastmod>
+    <lastmod>2026-03-14T22:17:12+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/"/>
@@ -828,7 +828,7 @@
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/1.3-integrating-ai-capabilities/</loc>
-    <lastmod>2026-03-06T17:59:01+08:00</lastmod>
+    <lastmod>2026-03-12T13:45:38+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/1.3-integrating-ai-capabilities/"/>
@@ -1019,7 +1019,7 @@
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/</loc>
-    <lastmod>2026-03-05T17:34:23+08:00</lastmod>
+    <lastmod>2026-03-14T22:17:12+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/"/>
@@ -1049,7 +1049,7 @@
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/</loc>
-    <lastmod>2026-03-01T12:26:02+08:00</lastmod>
+    <lastmod>2026-03-14T22:17:12+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/"/>
@@ -1154,7 +1154,7 @@
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/</loc>
-    <lastmod>2026-02-16T09:11:28+08:00</lastmod>
+    <lastmod>2026-03-14T15:42:54+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/"/>