delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(theme): enhance visual design and mobile responsiveness

Browse Source
This commit is contained in:
sanbuphy
2026-03-16 00:26:59 +08:00
parent 600dc0fd5b
commit 57c662aa2f
7 changed files with 190 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/ArticleCard.vue
+29 -16
View File
@@ -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 {
docs/.vitepress/theme/components/ArticleGrid.vue
+11 -2
View File
@@ -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>
docs/.vitepress/theme/components/CategoryIndex.vue
+24 -7
View File
@@ -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>
docs/.vitepress/theme/components/HomeFeatures.vue
+57 -2
View File
@@ -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 {
docs/.vitepress/theme/components/NavCard.vue
+51 -18
View File
@@ -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>
docs/.vitepress/theme/components/NavGrid.vue
+11 -3
View File
@@ -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>
docs/public/sitemap.xml
+7 -7
View File
@@ -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/"/>