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

docs(vibe-stories): update story content and add new story

Browse Source 
- Replace placeholder stories with real user stories featuring a rural teacher, a college student, a high school teacher, and a truck driver
- Add new story 4 about a truck driver building an overseas tool site
- Update sidebar navigation, homepage feature text, and cover images
- Fix visual styling and clipping in the VibeStories component
- Update sitemap with new story and modified timestamps
This commit is contained in:
sanbuphy
2026-03-29 11:03:08 +08:00
parent 7392d8a805
commit b3ca518409
38 changed files with 396 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/HomeFeatures.vue
+14 -5
View File
@@ -101,11 +101,12 @@ const i18n = {
},
stories: {
cat: 'Vibe Stories',
title: '看见每一个<br><span class="highlight">闪光的你。</span>',
sub: '在这里，发现大家如何使用 AI 创造属于自己的作品。',
s1: { title: '我的第一个全栈项目', author: 'Sanbu' },
s2: { title: '从产品经理到独立开发者', author: 'Alice' },
s3: { title: '用 AI 提效 10 倍', author: 'Bob' }
title: '手比脑子快的人，<br><span class="highlight">都在这了。</span>',
sub: '未完待续的故事，等你带作品来续写。加入他们。',
s1: { title: '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”', author: '小学老师小浩' },
s2: { title: '期末考试周，我偷偷用AI造了个“校园闲鱼”', author: '一位大二学生' },
s3: { title: '我给每个学生，做了一个不会累的“学霸同桌”', author: '高中信息技术老师' },
s4: { title: '48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站', author: '货车司机老黄' }
},
stage1: {
cat: 'Stage 1 · 零基础入门',
@@ -2560,6 +2561,14 @@ const appendixCards = [
background: transparent;
}
#vibe-stories,
#vibe-stories:focus,
#vibe-stories:focus-visible,
#vibe-stories:target {
outline: none !important;
box-shadow: none !important;
}
a {
text-decoration: none;
color: inherit;
docs/.vitepress/theme/components/VibeStories.vue
+52 -29
View File
@@ -2,6 +2,10 @@
import { inject, onMounted, onUnmounted, ref } from 'vue'
import { withBase } from 'vitepress'
import macbookImage from '../../../../assets/macbook.png'
import story1Cover from '../../../zh-cn/vibe-stories/images/story-1/image5.png'
import story2Cover from '../../../zh-cn/vibe-stories/images/story-2/image4.png'
import story3Cover from '../../../zh-cn/vibe-stories/images/story-3/image3.png'
import story4Cover from '../../../zh-cn/vibe-stories/images/story-4/image7.png'
// Try to inject translation context from parent or provide a default fallback
const t = inject('t', {
@@ -17,27 +21,35 @@ const t = inject('t', {
const tStories = [
{
id: 1,
title: t.value?.stories?.s1?.title || '我的第一个全栈项目',
author: t.value?.stories?.s1?.author || 'Sanbu',
avatar: '👨‍💻',
image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop',
title: t.value?.stories?.s1?.title || '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”',
author: t.value?.stories?.s1?.author || '小学老师小浩',
avatar: '👨‍🏫',
image: story1Cover,
link: '/zh-cn/vibe-stories/story-1'
},
{
id: 2,
title: t.value?.stories?.s2?.title || '从产品经理到独立开发者',
author: t.value?.stories?.s2?.author || 'Alice',
avatar: '👩‍🎨',
image: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2564&auto=format&fit=crop',
title: t.value?.stories?.s2?.title || '期末考试周，我偷偷用AI造了个“校园闲鱼”',
author: t.value?.stories?.s2?.author || '一位大二学生',
avatar: '🎓',
image: story2Cover,
link: '/zh-cn/vibe-stories/story-2'
},
{
id: 3,
title: t.value?.stories?.s3?.title || '用 AI 提效 10 倍',
author: t.value?.stories?.s3?.author || 'Bob',
avatar: '🚀',
image: 'https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=2564&auto=format&fit=crop',
title: t.value?.stories?.s3?.title || '我给每个学生，做了一个不会累的“学霸同桌”',
author: t.value?.stories?.s3?.author || '高中信息技术老师',
avatar: '🧑‍🏫',
image: story3Cover,
link: '/zh-cn/vibe-stories/story-3'
},
{
id: 4,
title: t.value?.stories?.s4?.title || '48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站',
author: t.value?.stories?.s4?.author || '货车司机老黄',
avatar: '🚚',
image: story4Cover,
link: '/zh-cn/vibe-stories/story-4'
}
]
@@ -135,7 +147,6 @@ onUnmounted(() => {
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
</button>
<!-- Screen Content -->
<div class="screen-content">
<a :href="withBase(tStories[currentIndex].link)" class="screen-link">
<transition :name="transitionName">
@@ -149,7 +160,6 @@ onUnmounted(() => {
</transition>
</a>
</div>
<!-- Laptop Frame -->
<img :src="macbookImage" class="laptop-frame" alt="MacBook Frame" />
</div>
@@ -246,13 +256,17 @@ onUnmounted(() => {
width: 100%;
max-width: 700px;
margin: 0 auto;
/* Keep the MacBook frame height stable before the PNG finishes loading. */
aspect-ratio: 4608 / 2675;
}
.laptop-frame {
position: relative;
position: absolute;
inset: 0;
z-index: 10;
width: 100%;
height: auto;
height: 100%;
object-fit: contain;
pointer-events: none;
filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
}
@@ -264,16 +278,17 @@ onUnmounted(() => {
.screen-content {
position: absolute;
z-index: 1;
background: transparent;
top: 0;
left: 10%;
width: 80%;
height: 92%;
background: #0b0b0f;
overflow: hidden;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
clip-path: inset(0 round 12px 12px 0 0);
contain: paint;
perspective: 1000px;
/* Force hardware acceleration and fix Safari overflow clipping bug */
transform: translateZ(0);
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(white, black);
@@ -282,26 +297,31 @@ onUnmounted(() => {
}
.screen-link {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
background: transparent;
position: relative;
overflow: hidden;
border-radius: inherit;
/* Fix boundary bleeding in Safari */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
clip-path: inset(0 round 12px 12px 0 0);
transform: translateZ(0);
-webkit-transform: translateZ(0);
mask-image: radial-gradient(white, black);
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.screen-link:focus,
.screen-link:focus-visible {
outline: none;
}
.screen-image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
inset: 0;
overflow: hidden;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
clip-path: inset(0 round 12px 12px 0 0);
}
.screen-image {
@@ -310,6 +330,9 @@ onUnmounted(() => {
height: 100%;
object-fit: cover;
object-position: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
backface-visibility: hidden;
}
/* Transitions */