From 4438edf4d54f4c41164b26a71af5f614844bec27 Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Fri, 27 Mar 2026 18:17:31 +0800 Subject: [PATCH] feat(homepage): update feature cards with images and improve UI - Add cover images for stage 2 and 3 feature cards - Enhance card hover effects and scrolling behavior - Improve appendix section with new navigation controls - Update stage 2 content with more specific learning paths --- docs/.vitepress/theme/Layout.vue | 2 +- .../theme/components/HomeFeatures.vue | 798 +++++++++++------- docs/.vitepress/theme/style.css | 8 + .../agent-teams/images/home-cover.svg | 33 + .../stage-3/core-skills/agent-teams/index.md | 2 + .../long-running-tasks/images/home-cover.svg | 29 + .../core-skills/long-running-tasks/index.md | 2 + 7 files changed, 551 insertions(+), 323 deletions(-) create mode 100644 docs/zh-cn/stage-3/core-skills/agent-teams/images/home-cover.svg create mode 100644 docs/zh-cn/stage-3/core-skills/long-running-tasks/images/home-cover.svg diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue index 58f36c4..387a02b 100644 --- a/docs/.vitepress/theme/Layout.vue +++ b/docs/.vitepress/theme/Layout.vue @@ -609,7 +609,7 @@ watch(sidebarCollapsed, (collapsed) => { - + diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue index 37954aa..f2a1559 100644 --- a/docs/.vitepress/theme/components/HomeFeatures.vue +++ b/docs/.vitepress/theme/components/HomeFeatures.vue @@ -2,6 +2,16 @@ import { ref, onMounted, onUnmounted, computed } from 'vue' import { useRouter, withBase, useData } from 'vitepress' import GitHubStars from './GitHubStars.vue' +import stage2LovartCover from '../../../zh-cn/stage-2/frontend/2.0-lovart-assets/images/image1.png' +import stage2FigmaCover from '../../../zh-cn/stage-2/frontend/2.1-figma-mastergo/images/image8.png' +import stage2DesignToCodeCover from '../../../zh-cn/stage-2/frontend/2.6-design-to-code/images/image42.png' +import stage2SupabaseCover from '../../../zh-cn/stage-2/backend/2.2-database-supabase/images/image1.png' +import stage2ZeaburCover from '../../../zh-cn/stage-2/backend/2.5-zeabur-deployment/images/image1.png' +import stage2DifyCover from '../../../zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/images/image1.png' +import stage3ElectronCover from '../../../zh-cn/stage-3/cross-platform/3.10-electron-voice-to-text/images/image3.png' +import stage3AgentTeamsCover from '../../../zh-cn/stage-3/core-skills/agent-teams/images/home-cover.svg' +import stage3LongRunningCover from '../../../zh-cn/stage-3/core-skills/long-running-tasks/images/home-cover.svg' +import stage3PersonalBrandCover from '../../../zh-cn/stage-3/personal-brand/3.7-personal-website-blog/images/image1.png' const router = useRouter() const { site, page, lang } = useData() @@ -54,6 +64,14 @@ const scrollToPage = (pageIndex) => { } } +const scrollAppendixByPage = (direction) => { + const nextPage = Math.min( + totalPages.value - 1, + Math.max(0, currentPage.value + direction) + ) + scrollToPage(nextPage) +} + const autoScroll = () => { if (appendixWrapper.value) { const { scrollLeft, clientWidth, scrollWidth } = appendixWrapper.value @@ -109,10 +127,22 @@ const i18n = { sub: '从前端到后端，从数据库到上线。', cards: [ { - title: '全栈路径总览', - headline: '先看清全局再动手。', - desc: '一页看懂 Stage 2：前端、后端、数据库与部署如何串成完整链路。', - link: '/zh-cn/stage-2/' + title: '素材生成 Agent', + headline: '先把素材生产提速。', + desc: '从 Lovart 和 Nanobanana 出发，搭建自己的素材生产工作流和绘图 Agent。', + link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/' + }, + { + title: 'Figma 与 MasterGo', + headline: '先把设计工具用顺。', + desc: '掌握专业 UI 设计工具的基础操作，理解从设计稿到开发协作的关键链路。', + link: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/' + }, + { + title: '设计稿转代码', + headline: '把原型真正变成页面。', + desc: '学习如何将设计原型转成可以在浏览器里运行的前端代码，减少手工重搭。', + link: '/zh-cn/stage-2/frontend/2.6-design-to-code/' }, { title: '真实数据项目', @@ -125,6 +155,12 @@ const i18n = { headline: '让世界看到你的作品。', desc: '使用 CloudBase、Vercel、Zeabur 等平台，一口气打通从代码到公网访问的完整流程。', link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/' + }, + { + title: 'AI 知识库集成', + headline: '让应用接上智能问答。', + desc: '学习用 Dify 构建 AI 应用和知识库，把检索增强能力接进你的真实产品。', + link: '/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/' } ] }, @@ -270,10 +306,22 @@ const i18n = { sub: 'Understand the full journey from frontend to backend, database and deployment.', cards: [ { - title: 'Stage Overview', - headline: 'See the whole map first.', - desc: 'Start from the Stage 2 overview and understand how frontend, backend and infra fit together.', - link: '/zh-cn/stage-2/' + title: 'Asset Agent', + headline: 'Speed up content production.', + desc: 'Build your own design-asset workflow and drawing agent with Lovart and Nanobanana.', + link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/' + }, + { + title: 'Figma & MasterGo', + headline: 'Get fluent with design tools.', + desc: 'Learn the basics of modern UI design tools and how design files flow into development.', + link: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/' + }, + { + title: 'Design to Code', + headline: 'Turn mockups into pages.', + desc: 'Convert prototypes into real frontend code that runs in the browser instead of staying as static designs.', + link: '/zh-cn/stage-2/frontend/2.6-design-to-code/' }, { title: 'Real Data Project', @@ -286,6 +334,12 @@ const i18n = { headline: 'Ship it to the world.', desc: 'Use CloudBase, Vercel and Zeabur to turn local projects into publicly reachable sites.', link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/' + }, + { + title: 'AI Knowledge Base', + headline: 'Plug AI into the app.', + desc: 'Use Dify to build AI workflows and knowledge-base powered product experiences.', + link: '/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/' } ] }, @@ -1775,31 +1829,53 @@ const stage1Cards = [ // Stage 2: 初中级开发 (全栈) const stage2Cards = [ { - title: '全栈路径总览', - headline: '先看清全局再动手。', - desc: '一页看懂 Stage 2：前端、后端、数据库与部署如何串成完整链路。', imageColor: '#E0C3FC', - visualType: 'code', - link: '/zh-cn/stage-2/' + image: stage2LovartCover, + imageAlt: 'Lovart 素材生产 Agent 界面截图', + link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/' + }, + { + imageColor: '#D8C4F8', + image: stage2FigmaCover, + imageAlt: 'Figma 与 MasterGo 设计工具截图', + link: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/' + }, + { + imageColor: '#C7DDFB', + image: stage2DesignToCodeCover, + imageAlt: '设计稿转代码示意截图', + link: '/zh-cn/stage-2/frontend/2.6-design-to-code/' }, { - title: '真实数据项目', - headline: '连上真正的数据库。', - desc: '在 Supabase 上设计数据表和权限，用真实读写操作支撑你的产品数据层。', imageColor: '#8EC5FC', - visualType: 'server', + image: stage2SupabaseCover, + imageAlt: 'Supabase 数据库控制台截图', link: '/zh-cn/stage-2/backend/2.2-database-supabase/' }, { - title: '部署上线', - headline: '让世界看到你的作品。', - desc: '使用 CloudBase、Vercel、Zeabur 等平台，一口气打通从代码到公网访问的完整流程。', imageColor: '#96E6A1', - visualType: 'cloud', + image: stage2ZeaburCover, + imageAlt: 'Zeabur 部署流程截图', link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/' + }, + { + imageColor: '#A7F3D0', + image: stage2DifyCover, + imageAlt: 'Dify 知识库工作台截图', + link: '/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/' } ] +const localizedStage2Cards = computed(() => { + return t.value.stage2.cards.map((card, index) => { + const visual = stage2Cards.find((item) => item.link === card.link) || stage2Cards[index] + return { + ...card, + ...visual + } + }) +}) + // Stage 3: 高级开发 (小程序 & AI) const stage3Cards = [ { @@ -1807,6 +1883,8 @@ const stage3Cards = [ desc: '用 Electron 做语音转文字桌面程序，一次开发同时跑在 Windows、macOS、Linux。', tag: 'Stage 3', visualType: 'phone', + image: stage3ElectronCover, + imageAlt: 'Electron 语音转文字桌面应用预览图', link: '/zh-cn/stage-3/cross-platform/3.10-electron-voice-to-text/' }, { @@ -1814,6 +1892,8 @@ const stage3Cards = [ desc: '用 Claude Agent Teams 组建 AI 开发小队，多代理协作完成大型任务。', tag: 'Advanced', visualType: 'ai', + image: stage3AgentTeamsCover, + imageAlt: 'Claude Agent Teams 协作流程封面图', link: '/zh-cn/stage-3/core-skills/agent-teams/' }, { @@ -1821,6 +1901,8 @@ const stage3Cards = [ desc: '用循环脚本和 Ralph 插件管理长时间任务，让 Claude Code 过夜稳定跑完工作。', tag: 'Architecture', visualType: 'arch', + image: stage3LongRunningCover, + imageAlt: 'Claude Code 长时间执行与循环任务封面图', link: '/zh-cn/stage-3/core-skills/long-running-tasks/' }, { @@ -1828,6 +1910,9 @@ const stage3Cards = [ desc: '搭建个人网站与技术博客，让你的项目和经验长期沉淀并被更多人看到。', tag: 'Brand', visualType: 'brand', + image: stage3PersonalBrandCover, + imageAlt: '个人网站与学术博客示例截图', + imageClass: 'prod-image--personal-brand', link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/' } ] @@ -2019,85 +2104,91 @@ const appendixCards = [ style="height: 0" /> - -
-
-

- {{ t.stage1.cat }} -

-

-

- {{ t.stage1.sub }} -

-

+
+ +
+
+

+ {{ t.stage1.cat }} +

+

+

+ {{ t.stage1.sub }} +

+

-
- -
+ - {{ card.icon }} -
-
-

{{ t.stage1.cards[i].title }}

-

{{ t.stage1.cards[i].desc }}

-
- -
-
+
+ {{ card.icon }} +
+
+

{{ t.stage1.cards[i].title }}

+

{{ t.stage1.cards[i].desc }}

+
+ +
+
- -
-
-

- {{ t.stage2.cat }} -

-

-

- {{ t.stage2.sub }} -

-

+ +
+
+

+ {{ t.stage2.cat }} +

+

+

+ {{ t.stage2.sub }} +

+

-
- -
+ -
-
-
-

{{ t.stage2.cards[index].title }}

-

{{ t.stage2.cards[index].desc }}

- 进一步了解 › -
- -
-
+
+ +
+
+

{{ card.title }}

+

{{ card.desc }}

+ 进一步了解 › +
+ + +
+
{{ card.tag }}

{{ t.stage3.cards[index].title }}

{{ t.stage3.cards[index].desc }}

-
+
+ +
@@ -2163,56 +2261,73 @@ const appendixCards = [ :href="withBase(card.link)" class="appendix-card" > -
- {{ - ['🤖', '🧠', '🎨', '🚀', '⚙️', '💾', '🛠️', '🌐'][index] || '📚' - }} -
-
-

- {{ card.title }}. - {{ card.desc }} -

-
+ {{ + ['🤖', '🧠', '🎨', '🚀', '⚙️', '💾', '🛠️', '🌐'][index] || '📚' + }} + {{ card.title }} -
- -
+
+
+ + +
@@ -2303,6 +2418,24 @@ a { color: inherit; } +:is(.feature-card, .comm-card, .prod-card, .appendix-card, .buy-btn) { + border-bottom: none !important; + outline: none !important; + -webkit-tap-highlight-color: transparent; +} + +:is( + .feature-card, + .comm-card, + .prod-card, + .appendix-card, + .buy-btn + ):is(:hover, :focus, :focus-visible, :active) { + border-bottom-color: transparent !important; + text-decoration: none !important; + outline: none !important; +} + .highlight { color: var(--vp-c-text-2); } @@ -2572,19 +2705,43 @@ a { padding: 0 40px; } -.section-junior, -.section-appendix { +.section-band-learning { + width: 100vw; + max-width: none; + margin: 0 calc(50% - 50vw) 96px; background: #f5f5f7; - border-radius: 40px; + border-radius: 0; + padding-top: 64px; + padding-bottom: 64px; + padding-left: max(40px, calc((100vw - 1280px) / 2 + 40px)); + padding-right: max(40px, calc((100vw - 1280px) / 2 + 40px)); +} + +.section-band-learning .section-container { + max-width: 1280px; + margin: 0 auto; + padding: 0; +} + +.section-band-learning .section-junior { + margin-top: 72px; +} + +.section-appendix { + background: transparent; + border-radius: 0; padding-top: 64px; padding-bottom: 64px; } -.dark .section-junior, -.dark .section-appendix { +.dark .section-band-learning { background: rgba(255, 255, 255, 0.03); } +.dark .section-appendix { + background: transparent; +} + .section-header { margin-bottom: 44px; } @@ -2688,41 +2845,52 @@ a { /* Communication Grid (Now used for Stage 2) */ .comm-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); + display: flex; gap: 24px; + overflow-x: auto; + width: calc(100% + 40px); + margin: 0 -20px; + padding: 0 20px 16px; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + overscroll-behavior-x: contain; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.comm-grid::-webkit-scrollbar { + display: none; } .comm-card { + flex: 0 0 380px; border-radius: 32px; overflow: hidden; background: #fff; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); - border: 1px solid rgba(0, 0, 0, 0.04); + box-shadow: none; + border: 1px solid rgba(0, 0, 0, 0.025); transition: transform 0.3s; display: block; + scroll-snap-align: start; } .comm-card:hover { - transform: translateY(-6px); + transform: scale(1.015); } .comm-visual { height: 220px; width: 100%; position: relative; + overflow: hidden; } -.visual-placeholder { - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - width: 60px; - height: 60px; - background: rgba(255, 255, 255, 0.5); - border-radius: 50%; - backdrop-filter: blur(10px); +.comm-visual img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + object-position: top center; } .comm-text { @@ -2761,6 +2929,13 @@ a { padding: 0 20px 40px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; + overscroll-behavior-x: contain; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.scroll-container::-webkit-scrollbar { + display: none; } .scroll-track { @@ -2773,7 +2948,7 @@ a { width: 300px; height: 400px; border-radius: 32px; - background: #fff; + background: #f7f7f9; padding: 30px; scroll-snap-align: center; text-decoration: none !important; @@ -2781,12 +2956,12 @@ a { display: flex; flex-direction: column; transition: transform 0.3s; - border: 1px solid rgba(0, 0, 0, 0.04); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.025); + box-shadow: none; } .prod-card:hover { - transform: translateY(-6px); + transform: scale(1.015); } .prod-tag { @@ -2817,19 +2992,33 @@ a { .prod-visual { margin-top: auto; height: 150px; - background: linear-gradient(135deg, #dbeafe 0%, #e5e7eb 100%); border-radius: 20px; - opacity: 1; + overflow: hidden; + background: linear-gradient(135deg, #dbeafe 0%, #e5e7eb 100%); +} + +.prod-visual img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + object-position: center; +} + +.prod-visual img.prod-image--personal-brand { + transform: scale(1.18) translateY(-10px); + transform-origin: center top; } /* Appendix Horizontal Scroll */ .appendix-scroll-wrapper { overflow-x: auto; scroll-snap-type: x mandatory; - padding-bottom: 10px; margin: 0 -20px; - padding: 0 20px; + padding: 0 20px 12px; scrollbar-width: none; + -ms-overflow-style: none; + overscroll-behavior-x: contain; } .appendix-scroll-wrapper::-webkit-scrollbar { @@ -2837,172 +3026,123 @@ a { } .appendix-track { - display: grid; - grid-template-rows: repeat(2, 1fr); - grid-auto-flow: column; - grid-auto-columns: minmax(280px, 1fr); - gap: 32px 24px; + display: flex; + align-items: flex-start; + gap: 40px; width: max-content; - padding-bottom: 10px; } .appendix-card { display: flex; flex-direction: column; - align-items: flex-start; + align-items: center; + justify-content: flex-start; + gap: 12px; text-decoration: none !important; color: inherit !important; - background: #fff; - padding: 24px; - border: 1px solid rgba(0, 0, 0, 0.04); - border-radius: 28px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); + background: transparent; + padding: 0; + border: 0; + box-shadow: none; scroll-snap-align: start; - width: 100%; - min-height: 360px; + width: 120px; + min-height: 120px; transition: transform 0.25s ease; + text-align: center; } -/* 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: #fff; - 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: #f0f0f2; - transform: scale(1.05); -} - -.indicator-track { - display: flex; - align-items: center; - gap: 8px; - background: #fff; - padding: 6px 12px; - border-radius: 20px; - height: 44px; -} - -.indicator-dot { - width: 8px; - height: 8px; - border-radius: 4px; - background: #b8b8bd; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); - opacity: 0.5; -} - -.indicator-dot.active { - width: 32px; - background: #1d1d1f; - opacity: 1; -} - -.indicator-dot:hover { - opacity: 0.8; -} - -/* Remove hover effects */ .appendix-card:hover { - transform: translateY(-4px); + transform: scale(1.03); } -.appendix-icon-wrapper { - width: 100%; - height: 190px; - border-radius: 24px; - display: flex; - align-items: center; - justify-content: center; - font-size: 88px; - margin-bottom: 14px; - /* 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: #6e6e73; - margin: 0; - font-weight: 400; - letter-spacing: -0.01em; +.appendix-emoji { + font-size: 52px; + line-height: 1; + display: block; } .appendix-title { font-weight: 600; - color: #1d1d1f; - margin-right: 6px; - font-size: 12px; + color: #3c3c43; + margin: 0; + font-size: 14px; + line-height: 1.35; + letter-spacing: -0.01em; + white-space: normal; +} + +.appendix-scroll-hint { + position: relative; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 18px; + margin-top: 20px; + min-height: 40px; +} + +.appendix-progress-track { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 160px; + height: 4px; + border-radius: 999px; + background: rgba(60, 60, 67, 0.08); + overflow: hidden; +} + +.appendix-progress-thumb { + height: 100%; + border-radius: inherit; + background: rgba(60, 60, 67, 0.28); + transition: transform 0.25s ease; +} + +.appendix-scroll-actions { + display: flex; + align-items: center; + gap: 10px; + margin-left: auto; + margin-right: 56px; +} + +.appendix-arrow-btn { + width: 38px; + height: 38px; + border-radius: 999px; + border: 1px solid rgba(60, 60, 67, 0.05); + background: rgba(60, 60, 67, 0.05); + color: rgba(60, 60, 67, 0.62); + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: + background-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; +} + +.appendix-arrow-btn:hover { + background: rgba(255, 255, 255, 0.78); + border-color: rgba(60, 60, 67, 0.08); + color: rgba(60, 60, 67, 0.74); + transform: scale(1.04); +} + +.appendix-arrow-btn.disabled, +.appendix-arrow-btn:disabled { + opacity: 0.42; + cursor: default; + transform: none; +} + +.appendix-arrow-btn.disabled:hover, +.appendix-arrow-btn:disabled:hover { + background: rgba(60, 60, 67, 0.05); + color: rgba(60, 60, 67, 0.62); } /* Footer */ @@ -3255,10 +3395,6 @@ a { height: auto; } - .comm-grid { - grid-template-columns: 1fr; - } - .nav-links { display: none; } @@ -3271,13 +3407,23 @@ a { white-space: nowrap; } - .section-junior, .section-appendix { - border-radius: 28px; padding-top: 42px; padding-bottom: 42px; } + .section-band-learning { + margin-bottom: 96px; + padding-top: 42px; + padding-bottom: 42px; + padding-left: 24px; + padding-right: 24px; + } + + .section-band-learning .section-junior { + margin-top: 56px; + } + .footer-callout { margin: 0 16px 40px; border-radius: 28px; @@ -3329,22 +3475,22 @@ a { display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); + box-shadow: none; height: 100%; position: relative; overflow: hidden; text-decoration: none !important; - border: 1px solid rgba(0, 0, 0, 0.04); + border: 1px solid rgba(0, 0, 0, 0.025); } .dark .feature-card { - border: 1px solid rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.06); background: var(--vp-c-bg-mute); } .feature-card:hover { - transform: translateY(-6px); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); + transform: scale(1.015); + box-shadow: none; } .feature-icon { @@ -3388,6 +3534,10 @@ a { .feature-grid { grid-template-columns: repeat(2, 1fr); } + + .comm-card { + flex-basis: 340px; + } } @media (max-width: 640px) { @@ -3397,5 +3547,9 @@ a { .feature-card { padding: 24px; } + + .comm-card { + flex-basis: min(86vw, 340px); + } } diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 6a5a345..171123d 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -299,6 +299,14 @@ border: 1px solid rgba(255, 255, 255, 0.3); } +.VPHome .reading-progress { + display: none !important; +} + +body:has(.VPHome) .reading-progress { + display: none !important; +} + .dark .glass { background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); diff --git a/docs/zh-cn/stage-3/core-skills/agent-teams/images/home-cover.svg b/docs/zh-cn/stage-3/core-skills/agent-teams/images/home-cover.svg new file mode 100644 index 0000000..f3eebba --- /dev/null +++ b/docs/zh-cn/stage-3/core-skills/agent-teams/images/home-cover.svg @@ -0,0 +1,33 @@ + + + + + Team Lead + 拆解任务 + 协调成员 + + Agent A + Frontend + + Agent B + Backend + + Agent C + Testing + + Task List + 共享任务板 + + + + + Claude Agent Teams + 多代理并行协作，像真正开发团队一样分工与联动 + + + + + + + + diff --git a/docs/zh-cn/stage-3/core-skills/agent-teams/index.md b/docs/zh-cn/stage-3/core-skills/agent-teams/index.md index 251fb20..44e801c 100644 --- a/docs/zh-cn/stage-3/core-skills/agent-teams/index.md +++ b/docs/zh-cn/stage-3/core-skills/agent-teams/index.md @@ -6,6 +6,8 @@ 想象一下，以前你使用 Claude Code，就像是一个项目经理带着一个超级能干的助手工作。无论任务多复杂，只有这一个助手在干活。现在有了 Agent Teams，你可以组建一支完整的 AI 开发团队——有的负责前端，有的负责后端，有的负责测试，它们可以**同时工作、互相交流、协同完成复杂任务**。 +![](images/home-cover.svg) + ### 从单助手到团队协作 在深入了解 Agent Teams 之前，让我们先理解它解决的问题。 diff --git a/docs/zh-cn/stage-3/core-skills/long-running-tasks/images/home-cover.svg b/docs/zh-cn/stage-3/core-skills/long-running-tasks/images/home-cover.svg new file mode 100644 index 0000000..6593249 --- /dev/null +++ b/docs/zh-cn/stage-3/core-skills/long-running-tasks/images/home-cover.svg @@ -0,0 +1,29 @@ + + + + + while true + claude --continue + check completion + + + + + Stop Hook + 拦截提前退出 + + Ralph + 自动重试推进 + + Overnight + 长任务稳定执行 + Claude Code 长时间工作 + 循环、检查与重试，让任务持续跑到真正完成 + + + + + + + + diff --git a/docs/zh-cn/stage-3/core-skills/long-running-tasks/index.md b/docs/zh-cn/stage-3/core-skills/long-running-tasks/index.md index e716347..77d95f9 100644 --- a/docs/zh-cn/stage-3/core-skills/long-running-tasks/index.md +++ b/docs/zh-cn/stage-3/core-skills/long-running-tasks/index.md @@ -12,6 +12,8 @@ 本章要解决的核心问题是：如何让 Claude Code 像真正的开发者一样，持续工作直到任务真正完成。 +![](images/home-cover.svg) + --- ## 核心原理：为什么 AI 会"过早停止"？