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

feat: update homepage layout and styling

Browse Source
This commit is contained in:
sanbuphy
2026-01-27 02:06:42 +08:00
parent f5adedf77b
commit 11605edb3f
6 changed files with 625 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/config.mjs
+4 -40
View File
@@ -194,6 +194,10 @@ const commonThemeConfig = {
// ],
outline: {
level: [1, 6]
},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a> | <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010602202215" rel="noreferrer" target="_blank">京公网安备11010602202215号</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
@@ -640,10 +644,6 @@ export default defineConfig({
}
]
},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
@@ -684,10 +684,6 @@ export default defineConfig({
],
// TODO: Add English sidebar when content is ready
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
@@ -728,10 +724,6 @@ export default defineConfig({
],
// TODO: Add Japanese sidebar when content is ready
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
'zh-tw': {
@@ -769,10 +761,6 @@ export default defineConfig({
{ text: '附錄', link: '/zh-tw/appendix/' }
],
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
'ko-kr': {
@@ -807,10 +795,6 @@ export default defineConfig({
{ text: '부록', link: '/ko-kr/appendix/' }
],
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
'es-es': {
@@ -848,10 +832,6 @@ export default defineConfig({
{ text: 'Apéndice', link: '/es-es/appendix/' }
],
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
'fr-fr': {
@@ -886,10 +866,6 @@ export default defineConfig({
{ text: 'Annexe', link: '/fr-fr/appendix/' }
],
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
'de-de': {
@@ -924,10 +900,6 @@ export default defineConfig({
{ text: 'Anhang', link: '/de-de/appendix/' }
],
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
'ar-sa': {
@@ -965,10 +937,6 @@ export default defineConfig({
{ text: 'ملحق', link: '/ar-sa/appendix/' }
],
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
},
'vi-vn': {
@@ -1006,10 +974,6 @@ export default defineConfig({
{ text: 'Phụ lục', link: '/vi-vn/appendix/' }
],
sidebar: {},
footer: {
message: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2026002630号-1</a>',
copyright: '本作品采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）</a> 进行许可'
}
}
}
}
docs/.vitepress/theme/Layout.vue
+24 -4
View File
@@ -223,12 +223,32 @@ watch(lineHeight, (next) => {
font-size: 18px;
font-weight: 500;
white-space: pre-wrap;
color: var(--vp-c-text-2);
color: #000000;
min-height: 28px;
display: flex;
/* 确保左对齐 */
text-align: left;
justify-content: flex-start;
/* 居中对齐 */
text-align: center;
justify-content: center;
}
/* 强制 HomeHero 内容居中 */
.VPHomeHero .container {
text-align: center;
}
.VPHomeHero .main {
margin: 0 auto;
}
.VPHomeHero .name,
.VPHomeHero .text {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.VPHomeHero .text {
color: #000000 !important;
}
.VPHomeHero .actions {
justify-content: center;
}
@media (min-width: 640px) {
docs/.vitepress/theme/components/HomeFeatures.vue
+585 -42
View File
@@ -8,6 +8,56 @@ const { site, page, lang } = useData()
const activeTab = ref('home')
const showLangMenu = ref(false)
// Appendix Scroll Logic
const appendixWrapper = ref(null)
const totalPages = ref(1)
const currentPage = ref(0)
const updatePagination = () => {
if (appendixWrapper.value) {
const { scrollLeft, clientWidth, scrollWidth } = appendixWrapper.value
// If scrollWidth is close to clientWidth, only 1 page
if (scrollWidth <= clientWidth + 5) {
totalPages.value = 1
currentPage.value = 0
} else {
totalPages.value = Math.ceil(scrollWidth / clientWidth)
currentPage.value = Math.round(scrollLeft / clientWidth)
}
}
}
const onAppendixScroll = () => {
if (!appendixWrapper.value) return
const { scrollLeft, clientWidth } = appendixWrapper.value
const newPage = Math.round(scrollLeft / clientWidth)
if (currentPage.value !== newPage) {
currentPage.value = newPage
}
}
const scrollToPage = (pageIndex) => {
if (appendixWrapper.value) {
const width = appendixWrapper.value.clientWidth
appendixWrapper.value.scrollTo({
left: pageIndex * width,
behavior: 'smooth'
})
}
}
const autoScroll = () => {
if (appendixWrapper.value) {
const { scrollLeft, clientWidth, scrollWidth } = appendixWrapper.value
const maxScroll = scrollWidth - clientWidth
if (scrollLeft >= maxScroll - 20) {
appendixWrapper.value.scrollTo({ left: 0, behavior: 'smooth' })
} else {
appendixWrapper.value.scrollBy({ left: clientWidth, behavior: 'smooth' })
}
}
}
const i18n = {
'zh-cn': {
nav: {
@@ -31,8 +81,8 @@ const i18n = {
},
stage2: {
cat: 'Stage 2 · 初中级开发',
title: '深入全栈，<br><span class="highlight">构建真实应用。</span>',
sub: '掌握前后端分离架构，亲手打造包含数据库、API 和复杂交互的完整商业级项目。',
title: '全栈之力，<br><span class="highlight">一手掌握。</span>',
sub: '以前端为笔，后端为墨。从数据库设计到交互界面，独立构建完整的商业级应用。',
cards: [
{ title: '全栈开发', headline: '独立完成前后端。', desc: '从数据库设计到 API 开发，再到前端组件化，完整构建一个现代化 Web 应用。', link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/' },
{ title: '真实项目', headline: '拒绝玩具代码。', desc: '深入理解用户鉴权、数据存储、文件上传等核心业务逻辑。', link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase' },
@@ -41,19 +91,38 @@ const i18n = {
},
stage3: {
cat: 'Stage 3 · 高级开发',
title: '高阶实战，<br><span class="highlight">挑战无限可能。</span>',
sub: '进军移动端小程序与 AI 原生应用开发，探索大模型时代的无限机遇。',
title: '复杂系统，<br><span class="highlight">尽在掌控。</span>',
sub: '从跨平台应用到高可用 AI 架构。让智能体在生产环境中长时间稳定运行，构建真正的商业级护城河。',
cards: [
{ title: '微信小程序', desc: '跨平台开发，触达亿级用户。', link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/' },
{ title: 'AI 原生应用', desc: 'RAG、Agent，探索 LLM 的无限可能。', link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future' },
{ title: '复杂业务架构', desc: '应对高并发、高可用场景的架构设计。', link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/' },
{ title: '个人品牌', desc: '构建属于自己的个人网页与学术博客。', link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/' }
{ title: '多端发布', desc: '一套代码，覆盖 Web、小程序与 App，触达所有用户。', link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/' },
{ title: 'AI 智能体', desc: '构建具备记忆与规划能力的 Agent，实现自主任务执行。', link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future' },
{ title: '长效稳定', desc: '掌握异步任务与队列技术，确保 AI 复杂任务稳定完成。', link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/' },
{ title: '商业闭环', desc: '集成支付与会员系统，将你的 AI 创意转化为商业产品。', link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/' }
]
},
appendix: {
cat: 'Appendix · 附录',
title: '让代码，<br><span class="highlight">活灵活现。</span>',
sub: '告别晦涩的文字堆砌。用动态演示和实时交互，重新定义技术文档。',
cards: [
{ title: 'AI 进化史', desc: '回顾人工智能发展历程中的关键里程碑。', link: '/zh-cn/appendix/ai-evolution' },
{ title: '提示词工程', desc: '掌握与 AI 高效对话的技巧，解锁潜力。', link: '/zh-cn/appendix/prompt-engineering' },
{ title: '大语言模型', desc: '深入浅出解析 LLM 的工作原理与应用。', link: '/zh-cn/appendix/llm-intro' },
{ title: 'Agent 智能体', desc: '探索具备自主决策与执行能力的 AI 架构。', link: '/zh-cn/appendix/agent-intro' },
{ title: '前端基础', desc: 'HTML/CSS/JS 三大基石，入门必修课。', link: '/zh-cn/appendix/web-basics' },
{ title: '前端进化史', desc: '了解前端技术栈演变，把握发展趋势。', link: '/zh-cn/appendix/frontend-evolution' },
{ title: '后端架构', desc: '从单体到微服务，探索架构演进之路。', link: '/zh-cn/appendix/backend-evolution' },
{ title: '后端语言', desc: '对比主流后端语言特性，选择最佳技术栈。', link: '/zh-cn/appendix/backend-languages' },
{ title: '数据库原理', desc: '理解数据库核心原理，掌握数据存储艺术。', link: '/zh-cn/appendix/database-intro' },
{ title: 'API 设计', desc: 'API 接口设计与开发的基础知识。', link: '/zh-cn/appendix/api-intro' },
{ title: 'Git 版本控制', desc: '深入理解 Git 原理与高级用法。', link: '/zh-cn/appendix/git-intro' },
{ title: '计算机网络', desc: '网络协议与通信原理的基础知识。', link: '/zh-cn/appendix/computer-networks' }
]
},
footer: {
title: '准备好开始了吗？',
desc: 'Easy-Vibe，让编程像呼吸一样自然。',
btn: '立即开启'
title: '你的想法，<br>此刻上线。',
desc: '从灵感到现实，只差这一个开始。',
btn: '>_ Start'
}
},
'en-us': {
@@ -97,6 +166,25 @@ const i18n = {
{ title: 'Personal Brand', desc: 'Build your own website and academic blog.', link: '/en-us/stage-3/' }
]
},
appendix: {
cat: 'Appendix',
title: 'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
cards: [
{ title: 'AI History', desc: 'Milestones in AI evolution.', link: '/en-us/appendix/ai-evolution' },
{ title: 'Prompt Eng', desc: 'Master AI communication skills.', link: '/en-us/appendix/prompt-engineering' },
{ title: 'LLM Intro', desc: 'Understanding Large Language Models.', link: '/en-us/appendix/llm-intro' },
{ title: 'AI Agents', desc: 'Autonomous decision-making AI.', link: '/en-us/appendix/agent-intro' },
{ title: 'Web Basics', desc: 'HTML/CSS/JS fundamentals.', link: '/en-us/appendix/web-basics' },
{ title: 'Frontend Evo', desc: 'Evolution of frontend tech stack.', link: '/en-us/appendix/frontend-evolution' },
{ title: 'Backend Arch', desc: 'From monolith to microservices.', link: '/en-us/appendix/backend-evolution' },
{ title: 'Backend Lang', desc: 'Choosing the right tech stack.', link: '/en-us/appendix/backend-languages' },
{ title: 'Database', desc: 'Core principles of data storage.', link: '/en-us/appendix/database-intro' },
{ title: 'API Design', desc: 'Designing robust interfaces.', link: '/en-us/appendix/api-intro' },
{ title: 'Git', desc: 'Version control mastery.', link: '/en-us/appendix/git-intro' },
{ title: 'Networks', desc: 'Protocols and communication.', link: '/en-us/appendix/computer-networks' }
]
},
footer: {
title: 'Ready to start?',
desc: 'Easy-Vibe, make coding as natural as breathing.',
@@ -144,6 +232,17 @@ const i18n = {
{ title: 'パーソナルブランド', desc: '自分のウェブサイトと学術ブログを構築。', link: '/ja-jp/stage-3/' }
]
},
appendix: {
cat: 'Appendix · 付録',
title: 'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
cards: [
{ title: 'AI Fundamentals', desc: 'LLM, Agent, RAG. Dive into AI internals.', link: '/ja-jp/appendix/ai-evolution' },
{ title: 'Frontend', desc: 'Browser internals, Performance, Canvas.', link: '/ja-jp/appendix/web-basics' },
{ title: 'Backend', desc: 'High concurrency, Distributed systems, Microservices.', link: '/ja-jp/appendix/backend-evolution' },
{ title: 'General Skills', desc: 'Git, Networks, IDE internals.', link: '/ja-jp/appendix/git-intro' }
]
},
footer: {
title: '準備はいいですか？',
desc: 'Easy-Vibe、呼吸するように自然にコーディング。',
@@ -191,6 +290,17 @@ const i18n = {
{ title: '個人品牌', desc: '構建屬於自己的個人網頁與學術博客。', link: '/zh-tw/stage-3/' }
]
},
appendix: {
cat: 'Appendix · 附錄',
title: '百科全書，<br><span class="highlight">夯實基礎。</span>',
sub: '從計算機網絡到 AI 原理，補齊你的技術拼圖。',
cards: [
{ title: '人工智能', desc: 'LLM、Agent、RAG，深入 AI 底層原理。', link: '/zh-tw/appendix/ai-evolution' },
{ title: '前端開發', desc: '瀏覽器原理、性能優化、Canvas 圖形學。', link: '/zh-tw/appendix/web-basics' },
{ title: '後端架構', desc: '高並發、分佈式、微服務架構設計。', link: '/zh-tw/appendix/backend-evolution' },
{ title: '通用技能', desc: 'Git、網絡、IDE 原理，開發者必備素養。', link: '/zh-tw/appendix/git-intro' }
]
},
footer: {
title: '準備好開始了嗎？',
desc: 'Easy-Vibe，讓編程像呼吸一樣自然。',
@@ -238,6 +348,17 @@ const i18n = {
{ title: '퍼스널 브랜딩', desc: '나만의 웹사이트와 학술 블로그 구축.', link: '/ko-kr/stage-3/' }
]
},
appendix: {
cat: 'Appendix · 부록',
title: 'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
cards: [
{ title: 'AI Fundamentals', desc: 'LLM, Agent, RAG. Dive into AI internals.', link: '/ko-kr/appendix/ai-evolution' },
{ title: 'Frontend', desc: 'Browser internals, Performance, Canvas.', link: '/ko-kr/appendix/web-basics' },
{ title: 'Backend', desc: 'High concurrency, Distributed systems, Microservices.', link: '/ko-kr/appendix/backend-evolution' },
{ title: 'General Skills', desc: 'Git, Networks, IDE internals.', link: '/ko-kr/appendix/git-intro' }
]
},
footer: {
title: '시작할 준비 되셨나요?',
desc: 'Easy-Vibe, 숨 쉬듯 자연스러운 코딩.',
@@ -285,6 +406,17 @@ const i18n = {
{ title: 'Marca Personal', desc: 'Construye tu propio sitio web y blog académico.', link: '/es-es/stage-3/' }
]
},
appendix: {
cat: 'Appendix · Apéndice',
title: 'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
cards: [
{ title: 'AI Fundamentals', desc: 'LLM, Agent, RAG. Dive into AI internals.', link: '/es-es/appendix/ai-evolution' },
{ title: 'Frontend', desc: 'Browser internals, Performance, Canvas.', link: '/es-es/appendix/web-basics' },
{ title: 'Backend', desc: 'High concurrency, Distributed systems, Microservices.', link: '/es-es/appendix/backend-evolution' },
{ title: 'General Skills', desc: 'Git, Networks, IDE internals.', link: '/es-es/appendix/git-intro' }
]
},
footer: {
title: '¿Listo para empezar?',
desc: 'Easy-Vibe, haz que programar sea tan natural como respirar.',
@@ -332,6 +464,17 @@ const i18n = {
{ title: 'Marque Perso', desc: 'Construisez votre propre site web et blog académique.', link: '/fr-fr/stage-3/' }
]
},
appendix: {
cat: 'Appendix · Annexe',
title: 'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
cards: [
{ title: 'AI Fundamentals', desc: 'LLM, Agent, RAG. Dive into AI internals.', link: '/fr-fr/appendix/ai-evolution' },
{ title: 'Frontend', desc: 'Browser internals, Performance, Canvas.', link: '/fr-fr/appendix/web-basics' },
{ title: 'Backend', desc: 'High concurrency, Distributed systems, Microservices.', link: '/fr-fr/appendix/backend-evolution' },
{ title: 'General Skills', desc: 'Git, Networks, IDE internals.', link: '/fr-fr/appendix/git-intro' }
]
},
footer: {
title: 'Prêt à commencer ?',
desc: 'Easy-Vibe, rendez le codage aussi naturel que la respiration.',
@@ -379,6 +522,17 @@ const i18n = {
{ title: 'Persönliche Marke', desc: 'Baue deine eigene Website und deinen akademischen Blog.', link: '/de-de/stage-3/' }
]
},
appendix: {
cat: 'Appendix · Anhang',
title: 'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
cards: [
{ title: 'AI Fundamentals', desc: 'LLM, Agent, RAG. Dive into AI internals.', link: '/de-de/appendix/ai-evolution' },
{ title: 'Frontend', desc: 'Browser internals, Performance, Canvas.', link: '/de-de/appendix/web-basics' },
{ title: 'Backend', desc: 'High concurrency, Distributed systems, Microservices.', link: '/de-de/appendix/backend-evolution' },
{ title: 'General Skills', desc: 'Git, Networks, IDE internals.', link: '/de-de/appendix/git-intro' }
]
},
footer: {
title: 'Bereit zu starten?',
desc: 'Easy-Vibe, mache Coden so natürlich wie Atmen.',
@@ -426,6 +580,17 @@ const i18n = {
{ title: 'العلامة التجارية الشخصية', desc: 'ابنِ موقعك الخاص ومدونتك الأكاديمية.', link: '/ar-sa/stage-3/' }
]
},
appendix: {
cat: 'Appendix · ملحق',
title: 'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
cards: [
{ title: 'AI Fundamentals', desc: 'LLM, Agent, RAG. Dive into AI internals.', link: '/ar-sa/appendix/ai-evolution' },
{ title: 'Frontend', desc: 'Browser internals, Performance, Canvas.', link: '/ar-sa/appendix/web-basics' },
{ title: 'Backend', desc: 'High concurrency, Distributed systems, Microservices.', link: '/ar-sa/appendix/backend-evolution' },
{ title: 'General Skills', desc: 'Git, Networks, IDE internals.', link: '/ar-sa/appendix/git-intro' }
]
},
footer: {
title: 'جاهز للبدء؟',
desc: 'Easy-Vibe، اجعل البرمجة طبيعية كالتنفس.',
@@ -473,6 +638,17 @@ const i18n = {
{ title: 'Thương hiệu cá nhân', desc: 'Xây dựng website và blog học thuật của riêng bạn.', link: '/vi-vn/stage-3/' }
]
},
appendix: {
cat: 'Appendix · Phụ lục',
title: 'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
cards: [
{ title: 'AI Fundamentals', desc: 'LLM, Agent, RAG. Dive into AI internals.', link: '/vi-vn/appendix/ai-evolution' },
{ title: 'Frontend', desc: 'Browser internals, Performance, Canvas.', link: '/vi-vn/appendix/web-basics' },
{ title: 'Backend', desc: 'High concurrency, Distributed systems, Microservices.', link: '/vi-vn/appendix/backend-evolution' },
{ title: 'General Skills', desc: 'Git, Networks, IDE internals.', link: '/vi-vn/appendix/git-intro' }
]
},
footer: {
title: 'Sẵn sàng chưa?',
desc: 'Easy-Vibe, biến lập trình trở nên tự nhiên như hơi thở.',
@@ -530,8 +706,11 @@ const scrollTo = (id) => {
}
const el = document.getElementById(id)
if (el) {
const navHeight = 64 // Approximate nav height
const offset = el.offsetTop - navHeight - 20
const navHeight = 48 // Approximate nav height
// Use getBoundingClientRect for better accuracy
const elementPosition = el.getBoundingClientRect().top + window.pageYOffset
// Increase buffer to ensure section header is clearly visible below nav
const offset = elementPosition - navHeight - 64
window.scrollTo({ top: offset, behavior: 'smooth' })
activeTab.value = id
}
@@ -546,10 +725,19 @@ const closeLangMenu = (e) => {
onMounted(() => {
document.addEventListener('click', closeLangMenu)
if (appendixWrapper.value) {
appendixWrapper.value.addEventListener('scroll', onAppendixScroll)
updatePagination()
window.addEventListener('resize', updatePagination)
}
})
onUnmounted(() => {
document.removeEventListener('click', closeLangMenu)
if (appendixWrapper.value) {
appendixWrapper.value.removeEventListener('scroll', onAppendixScroll)
}
window.removeEventListener('resize', updatePagination)
})
// Stage 1: 产品经理 (Web 原型)
@@ -639,6 +827,82 @@ const stage3Cards = [
link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
}
]
// Appendix: 附录
const appendixCards = [
{
title: '人工智能',
desc: 'LLM、Agent、RAG，深入 AI 底层原理。',
tag: 'AI',
link: '/zh-cn/appendix/ai-evolution'
},
{
title: '提示词工程',
desc: '掌握与 AI 高效对话的技巧，解锁潜力。',
tag: 'AI',
link: '/zh-cn/appendix/prompt-engineering'
},
{
title: '大语言模型',
desc: '深入浅出解析 LLM 的工作原理与应用。',
tag: 'AI',
link: '/zh-cn/appendix/llm-intro'
},
{
title: 'Agent 智能体',
desc: '探索具备自主决策与执行能力的 AI 架构。',
tag: 'AI',
link: '/zh-cn/appendix/agent-intro'
},
{
title: '前端基础',
desc: 'HTML/CSS/JS 三大基石，入门必修课。',
tag: 'Frontend',
link: '/zh-cn/appendix/web-basics'
},
{
title: '前端进化史',
desc: '了解前端技术栈演变，把握发展趋势。',
tag: 'Frontend',
link: '/zh-cn/appendix/frontend-evolution'
},
{
title: '后端架构',
desc: '从单体到微服务，探索架构演进之路。',
tag: 'Backend',
link: '/zh-cn/appendix/backend-evolution'
},
{
title: '后端语言',
desc: '对比主流后端语言特性，选择最佳技术栈。',
tag: 'Backend',
link: '/zh-cn/appendix/backend-languages'
},
{
title: '数据库原理',
desc: '理解数据库核心原理，掌握数据存储艺术。',
tag: 'Database',
link: '/zh-cn/appendix/database-intro'
},
{
title: 'API 设计',
desc: 'API 接口设计与开发的基础知识。',
tag: 'API',
link: '/zh-cn/appendix/api-intro'
},
{
title: 'Git 版本控制',
desc: '深入理解 Git 原理与高级用法。',
tag: 'General',
link: '/zh-cn/appendix/git-intro'
},
{
title: '计算机网络',
desc: '网络协议与通信原理的基础知识。',
tag: 'General',
link: '/zh-cn/appendix/computer-networks'
}
]
</script>
<template>
@@ -652,18 +916,24 @@ const stage3Cards = [
<button :class="{ active: activeTab === 'pm' }" @click="scrollTo('pm')">{{ t.nav.pm }}</button>
<button :class="{ active: activeTab === 'junior' }" @click="scrollTo('junior')">{{ t.nav.junior }}</button>
<button :class="{ active: activeTab === 'senior' }" @click="scrollTo('senior')">{{ t.nav.senior }}</button>
<a class="nav-link-item" :href="withBase('/zh-cn/appendix/')">{{ t.nav.appendix }}</a>
<button :class="{ active: activeTab === 'appendix' }" @click="scrollTo('appendix')">{{ t.nav.appendix }}</button>
</div>
<div class="nav-action">
<div class="nav-icons">
<!-- Language Switcher -->
<div class="lang-switch-wrapper">
<button class="icon-btn" aria-label="Change language" @click.stop="toggleLangMenu">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
<button
type="button"
class="button"
aria-haspopup="true"
:aria-expanded="showLangMenu"
aria-label="Change language"
@click.stop="toggleLangMenu"
>
<span class="text">
<span class="vpi-languages option-icon"></span>
<span class="vpi-chevron-down text-icon"></span>
</span>
</button>
<!-- Dropdown Menu -->
<div class="lang-dropdown glass" v-if="showLangMenu">
@@ -679,11 +949,7 @@ const stage3Cards = [
</div>
<!-- GitHub Link -->
<a class="icon-btn" href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer" aria-label="View on GitHub">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
<GitHubStars class="nav-github-stars" />
</div>
<a class="buy-btn" :href="withBase('/zh-cn/stage-0/0.1-learning-map/')">{{ t.footer.btn }}</a>
</div>
@@ -764,9 +1030,52 @@ const stage3Cards = [
</div>
</section>
<!-- Appendix -->
<section id="appendix" class="section-container">
<div class="section-header">
<h2 class="section-category">{{ t.appendix.cat }}</h2>
<h3 class="section-headline" v-html="t.appendix.title"></h3>
<p class="section-sub">{{ t.appendix.sub }}</p>
</div>
<div class="appendix-scroll-wrapper" ref="appendixWrapper">
<div class="appendix-track">
<a v-for="(card, index) in t.appendix.cards" :key="index" :href="withBase(card.link)" class="appendix-card">
<div class="appendix-icon-wrapper" :class="'icon-' + (index % 4)">
<span class="appendix-emoji">{{ ['🤖', '🧠', '🎨', '🚀', '⚙️', '💾', '🛠️', '🌐'][index] || '📚' }}</span>
</div>
<div class="appendix-content">
<p class="appendix-text">
<span class="appendix-title">{{ card.title }}.</span>
{{ card.desc }}
</p>
</div>
</a>
</div>
</div>
<!-- Slider Indicator -->
<div class="appendix-controls" v-if="totalPages > 1">
<button class="control-btn play-btn" @click="autoScroll" aria-label="Auto Scroll">
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 5.76795C11.1667 6.15285 11.1667 7.1151 10.5 7.5L2.25 12.2631C1.58333 12.648 0.75 12.1669 0.75 11.3971L0.75 1.87084C0.75 1.10104 1.58333 0.61991 2.25 1.00481L10.5 5.76795Z" fill="currentColor"/>
</svg>
</button>
<div class="indicator-track">
<div
v-for="i in totalPages"
:key="i"
class="indicator-dot"
:class="{ active: currentPage === i - 1 }"
@click="scrollToPage(i - 1)"
></div>
</div>
</div>
</section>
<!-- Footer Callout -->
<div class="footer-callout">
<h2>{{ t.footer.title }}</h2>
<h2 v-html="t.footer.title"></h2>
<p>{{ t.footer.desc }}</p>
<a class="buy-btn large" :href="withBase('/zh-cn/stage-0/0.1-learning-map/')">{{ t.footer.btn }}</a>
</div>
@@ -778,7 +1087,7 @@ const stage3Cards = [
.apple-container {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
color: var(--vp-c-text-1);
overflow: hidden;
/* overflow: hidden; Removed to fix scrolling issue */
}
a {
@@ -810,10 +1119,10 @@ a {
}
.nav-content {
max-width: 1280px;
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
height: 52px;
padding: 0 20px;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
@@ -821,64 +1130,132 @@ a {
.nav-title {
font-weight: 600;
font-size: 21px;
font-size: 19px;
color: #000 !important;
flex-shrink: 0;
letter-spacing: -0.01em;
}
.nav-links {
display: flex;
gap: 24px;
gap: 32px;
align-items: center;
margin: 0 24px;
}
.nav-links button, .nav-link-item {
background: none;
border: none;
font-size: 12px;
color: var(--vp-c-text-2);
color: #000 !important;
cursor: pointer;
transition: color 0.2s;
transition: opacity 0.2s;
padding: 0;
margin: 0;
line-height: 1;
font-weight: 400;
opacity: 0.8;
}
.nav-links button:hover,
.nav-links button.active,
.nav-link-item:hover {
color: var(--vp-c-text-1);
color: #000 !important;
opacity: 1;
}
.nav-action {
display: flex;
align-items: center;
gap: 16px;
gap: 28px;
flex-shrink: 0;
}
.nav-icons {
display: flex;
gap: 12px;
gap: 24px;
align-items: center;
}
.icon-btn {
background: none;
border: none;
padding: 0;
color: var(--vp-c-text-1);
color: #000 !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
opacity: 1;
transition: opacity 0.2s;
}
.icon-btn:hover {
opacity: 0.7;
}
.button {
background: none;
border: none;
padding: 0;
color: #000 !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
}
.button:hover {
opacity: 0.7;
}
.button .text {
display: flex;
align-items: center;
gap: 2px;
}
.button .option-icon {
width: 20px;
height: 20px;
color: #000 !important;
}
.button .text-icon {
width: 14px;
height: 14px;
color: #000 !important;
}
/* GitHub Stars Styles */
:deep(.nav-github-stars) {
display: flex;
align-items: center;
}
:deep(.nav-github-stars .github-stars-link) {
color: #000 !important;
display: flex;
align-items: center;
gap: 4px;
text-decoration: none;
}
:deep(.nav-github-stars .github-stars-link:hover) {
opacity: 0.7;
}
:deep(.nav-github-stars .github-stars-wrapper) {
padding-left: 0 !important;
}
/* Lang Switcher */
.lang-switch-wrapper {
position: relative;
display: flex;
align-items: center;
}
.lang-dropdown {
@@ -917,8 +1294,8 @@ a {
}
.buy-btn {
background: var(--vp-c-brand-1);
color: white;
background: #000;
color: #fff !important;
padding: 4px 12px;
border-radius: 980px;
font-size: 12px;
@@ -927,7 +1304,7 @@ a {
}
.buy-btn:hover {
background: var(--vp-c-brand-2);
background: #333;
transform: scale(1.02);
}
@@ -1155,6 +1532,171 @@ a {
opacity: 0.5;
}
/* Appendix Horizontal Scroll */
.appendix-scroll-wrapper {
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
margin: 0 -20px;
padding: 0 20px;
scrollbar-width: none;
}
.appendix-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.appendix-track {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 1fr);
gap: 32px 24px;
width: max-content;
padding-bottom: 10px;
}
.appendix-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none !important;
color: inherit !important;
background: transparent;
padding: 0;
border: none;
scroll-snap-align: start;
width: 100%;
}
/* Slider Controls */
.appendix-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 40px;
}
.control-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--vp-c-bg-soft);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--vp-c-text-1);
transition: all 0.2s;
}
.control-btn:hover {
background: var(--vp-c-bg-mute);
transform: scale(1.05);
}
.indicator-track {
display: flex;
align-items: center;
gap: 8px;
background: var(--vp-c-bg-soft);
padding: 6px 12px;
border-radius: 20px;
height: 44px;
}
.indicator-dot {
width: 8px;
height: 8px;
border-radius: 4px;
background: var(--vp-c-text-3);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
opacity: 0.5;
}
.indicator-dot.active {
width: 32px;
background: var(--vp-c-text-1);
opacity: 1;
}
.indicator-dot:hover {
opacity: 0.8;
}
/* Remove hover effects */
.appendix-card:hover {
background: transparent;
box-shadow: none;
border: none;
}
.appendix-icon-wrapper {
width: 64px;
height: 64px;
border-radius: 17.5px; /* Apple continuous curve approximation */
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 16px;
/* Glassmorphism / VisionOS Style */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
/* No transition */
}
/* Remove hover effects on icon */
.appendix-card:hover .appendix-icon-wrapper {
/* No transform or shadow change */
}
/* Transparent Tinted Gradients for icons (VisionOS Style) */
/* AI - Blue */
.icon-0 {
background: linear-gradient(180deg, rgba(0, 122, 255, 0.16) 0%, rgba(0, 122, 255, 0.06) 100%);
border: 1px solid rgba(0, 122, 255, 0.15);
}
/* Frontend - Orange */
.icon-1 {
background: linear-gradient(180deg, rgba(255, 149, 0, 0.16) 0%, rgba(255, 149, 0, 0.06) 100%);
border: 1px solid rgba(255, 149, 0, 0.15);
}
/* Backend - Pink */
.icon-2 {
background: linear-gradient(180deg, rgba(255, 45, 85, 0.16) 0%, rgba(255, 45, 85, 0.06) 100%);
border: 1px solid rgba(255, 45, 85, 0.15);
}
/* General - Green */
.icon-3 {
background: linear-gradient(180deg, rgba(52, 199, 89, 0.16) 0%, rgba(52, 199, 89, 0.06) 100%);
border: 1px solid rgba(52, 199, 89, 0.15);
}
.appendix-content {
text-align: left;
}
.appendix-text {
font-size: 13px;
line-height: 1.5;
color: var(--vp-c-text-2);
margin: 0;
font-weight: 500;
letter-spacing: -0.01em;
}
.appendix-title {
font-weight: 700;
color: var(--vp-c-text-1);
margin-right: 6px;
font-size: 13px;
}
/* Footer */
.footer-callout {
text-align: center;
@@ -1166,6 +1708,7 @@ a {
font-size: 40px;
font-weight: 600;
margin-bottom: 20px;
line-height: 1.2;
}
/* Responsive */
docs/.vitepress/theme/style.css
+5
View File
@@ -323,3 +323,8 @@
transform: scale(1.05);
background-color: var(--vp-c-bg);
}
/* HomeFeatures Sections Scroll Offset */
.section-container {
scroll-margin-top: 80px;
}