Merge branch 'dev'
This commit is contained in:
sanbuphy
+29
-29
@@ -338,11 +338,11 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: '初中级开发',
|
||||
link: '/zh-cn/stage-2/intro'
|
||||
link: '/zh-cn/stage-2/'
|
||||
},
|
||||
{
|
||||
text: '高级开发',
|
||||
link: '/zh-cn/stage-3/intro'
|
||||
link: '/zh-cn/stage-3/'
|
||||
},
|
||||
{ text: '附录', link: '/zh-cn/appendix/index' }
|
||||
],
|
||||
@@ -754,13 +754,13 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: 'Full-Stack Development',
|
||||
link: '/en-us/stage-2/intro'
|
||||
link: '/en-us/stage-2/'
|
||||
},
|
||||
{
|
||||
text: 'Advanced Development',
|
||||
link: '/en-us/stage-3/intro'
|
||||
link: '/en-us/stage-3/'
|
||||
},
|
||||
{ text: 'Appendix', link: '/en-us/appendix/intro' }
|
||||
{ text: 'Appendix', link: '/en-us/appendix/' }
|
||||
],
|
||||
// TODO: Add English sidebar when content is ready
|
||||
sidebar: {}
|
||||
@@ -794,13 +794,13 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: 'フルスタック開発',
|
||||
link: '/ja-jp/stage-2/intro'
|
||||
link: '/ja-jp/stage-2/'
|
||||
},
|
||||
{
|
||||
text: '上級開発',
|
||||
link: '/ja-jp/stage-3/intro'
|
||||
link: '/ja-jp/stage-3/'
|
||||
},
|
||||
{ text: '付録', link: '/ja-jp/appendix/intro' }
|
||||
{ text: '付録', link: '/ja-jp/appendix/' }
|
||||
],
|
||||
// TODO: Add Japanese sidebar when content is ready
|
||||
sidebar: {}
|
||||
@@ -832,13 +832,13 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: '初中級開發',
|
||||
link: '/zh-tw/stage-2/intro'
|
||||
link: '/zh-tw/stage-2/'
|
||||
},
|
||||
{
|
||||
text: '高級開發',
|
||||
link: '/zh-tw/stage-3/intro'
|
||||
link: '/zh-tw/stage-3/'
|
||||
},
|
||||
{ text: '附錄', link: '/zh-tw/appendix/intro' }
|
||||
{ text: '附錄', link: '/zh-tw/appendix/' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
@@ -866,13 +866,13 @@ export default defineConfig({
|
||||
{ text: '초보자 & PM', link: '/ko-kr/stage-0/' },
|
||||
{
|
||||
text: '풀스택 개발',
|
||||
link: '/ko-kr/stage-2/intro'
|
||||
link: '/ko-kr/stage-2/'
|
||||
},
|
||||
{
|
||||
text: '고급 개발',
|
||||
link: '/ko-kr/stage-3/intro'
|
||||
link: '/ko-kr/stage-3/'
|
||||
},
|
||||
{ text: '부록', link: '/ko-kr/appendix/intro' }
|
||||
{ text: '부록', link: '/ko-kr/appendix/' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
@@ -903,13 +903,13 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: 'Desarrollo Full Stack',
|
||||
link: '/es-es/stage-2/intro'
|
||||
link: '/es-es/stage-2/'
|
||||
},
|
||||
{
|
||||
text: 'Desarrollo Avanzado',
|
||||
link: '/es-es/stage-3/intro'
|
||||
link: '/es-es/stage-3/'
|
||||
},
|
||||
{ text: 'Apéndice', link: '/es-es/appendix/intro' }
|
||||
{ text: 'Apéndice', link: '/es-es/appendix/' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
@@ -937,13 +937,13 @@ export default defineConfig({
|
||||
{ text: 'Débutant & PM', link: '/fr-fr/stage-0/' },
|
||||
{
|
||||
text: 'Développement Full Stack',
|
||||
link: '/fr-fr/stage-2/intro'
|
||||
link: '/fr-fr/stage-2/'
|
||||
},
|
||||
{
|
||||
text: 'Développement Avancé',
|
||||
link: '/fr-fr/stage-3/intro'
|
||||
link: '/fr-fr/stage-3/'
|
||||
},
|
||||
{ text: 'Annexe', link: '/fr-fr/appendix/intro' }
|
||||
{ text: 'Annexe', link: '/fr-fr/appendix/' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
@@ -971,13 +971,13 @@ export default defineConfig({
|
||||
{ text: 'Anfänger & PM', link: '/de-de/stage-0/' },
|
||||
{
|
||||
text: 'Full Stack Entwicklung',
|
||||
link: '/de-de/stage-2/intro'
|
||||
link: '/de-de/stage-2/'
|
||||
},
|
||||
{
|
||||
text: 'Fortgeschrittene Entwicklung',
|
||||
link: '/de-de/stage-3/intro'
|
||||
link: '/de-de/stage-3/'
|
||||
},
|
||||
{ text: 'Anhang', link: '/de-de/appendix/intro' }
|
||||
{ text: 'Anhang', link: '/de-de/appendix/' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
@@ -1008,13 +1008,13 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: 'تطوير Full Stack',
|
||||
link: '/ar-sa/stage-2/intro'
|
||||
link: '/ar-sa/stage-2/'
|
||||
},
|
||||
{
|
||||
text: 'تطوير متقدم',
|
||||
link: '/ar-sa/stage-3/intro'
|
||||
link: '/ar-sa/stage-3/'
|
||||
},
|
||||
{ text: 'ملحق', link: '/ar-sa/appendix/intro' }
|
||||
{ text: 'ملحق', link: '/ar-sa/appendix/' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
@@ -1045,13 +1045,13 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: 'Phát triển Full Stack',
|
||||
link: '/vi-vn/stage-2/intro'
|
||||
link: '/vi-vn/stage-2/'
|
||||
},
|
||||
{
|
||||
text: 'Phát triển Nâng cao',
|
||||
link: '/vi-vn/stage-3/intro'
|
||||
link: '/vi-vn/stage-3/'
|
||||
},
|
||||
{ text: 'Phụ lục', link: '/vi-vn/appendix/intro' }
|
||||
{ text: 'Phụ lục', link: '/vi-vn/appendix/' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
|
||||
@@ -270,7 +270,11 @@ watch(lineHeight, (next) => {
|
||||
<template #nav-bar-content-after>
|
||||
<GitHubStars />
|
||||
<ClientOnly>
|
||||
<el-popover placement="bottom-end" trigger="click" :width="260">
|
||||
<el-popover
|
||||
placement="bottom-end"
|
||||
trigger="click"
|
||||
:width="260"
|
||||
>
|
||||
<template #reference>
|
||||
<button
|
||||
class="ev-fontsize-button"
|
||||
@@ -278,14 +282,20 @@ watch(lineHeight, (next) => {
|
||||
aria-label="阅读设置"
|
||||
style="margin-left: 16px; padding: 0; width: 32px"
|
||||
>
|
||||
<el-icon :size="16"><Setting /></el-icon>
|
||||
<el-icon :size="16">
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<div class="ev-fontsize-panel">
|
||||
<div class="ev-setting-group">
|
||||
<div class="ev-setting-header">
|
||||
<div class="ev-setting-title">字号</div>
|
||||
<div class="ev-setting-value">{{ fontSize }}px</div>
|
||||
<div class="ev-setting-title">
|
||||
字号
|
||||
</div>
|
||||
<div class="ev-setting-value">
|
||||
{{ fontSize }}px
|
||||
</div>
|
||||
</div>
|
||||
<div class="ev-fontsize-actions">
|
||||
<button
|
||||
@@ -320,8 +330,12 @@ watch(lineHeight, (next) => {
|
||||
|
||||
<div class="ev-setting-group">
|
||||
<div class="ev-setting-header">
|
||||
<div class="ev-setting-title">行距</div>
|
||||
<div class="ev-setting-value">{{ lineHeight.toFixed(2) }}</div>
|
||||
<div class="ev-setting-title">
|
||||
行距
|
||||
</div>
|
||||
<div class="ev-setting-value">
|
||||
{{ lineHeight.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ev-fontsize-actions">
|
||||
<button
|
||||
@@ -361,7 +375,7 @@ watch(lineHeight, (next) => {
|
||||
<div
|
||||
v-if="
|
||||
frontmatter.layout === 'home' &&
|
||||
(frontmatter.hero?.tagline || frontmatter.hero?.typingTagline)
|
||||
(frontmatter.hero?.tagline || frontmatter.hero?.typingTagline)
|
||||
"
|
||||
class="vp-typed-tagline"
|
||||
>
|
||||
|
||||
@@ -10,12 +10,22 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a :href="withBase(link)" class="article-card">
|
||||
<a
|
||||
:href="withBase(link)"
|
||||
class="article-card"
|
||||
>
|
||||
<div class="card-content">
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<p class="description">{{ description }}</p>
|
||||
<div v-if="tags && tags.length" class="tags">
|
||||
<span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
<div
|
||||
v-if="tags && tags.length"
|
||||
class="tags"
|
||||
>
|
||||
<span
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
class="tag"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
|
||||
@@ -11,7 +11,11 @@ defineProps({
|
||||
|
||||
<template>
|
||||
<div class="article-grid">
|
||||
<ArticleCard v-for="(item, i) in items" :key="i" v-bind="item" />
|
||||
<ArticleCard
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
v-bind="item"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -16,8 +16,16 @@ defineProps({
|
||||
:key="index"
|
||||
class="category-section"
|
||||
>
|
||||
<h2 v-if="category.title" class="category-title">{{ category.title }}</h2>
|
||||
<p v-if="category.description" class="category-desc">
|
||||
<h2
|
||||
v-if="category.title"
|
||||
class="category-title"
|
||||
>
|
||||
{{ category.title }}
|
||||
</h2>
|
||||
<p
|
||||
v-if="category.description"
|
||||
class="category-desc"
|
||||
>
|
||||
{{ category.description }}
|
||||
</p>
|
||||
|
||||
|
||||
@@ -44,52 +44,97 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
||||
</div>
|
||||
<div class="content">
|
||||
<!-- If tags are provided, show tags list -->
|
||||
<div v-if="hasTags" class="tags-container">
|
||||
<span v-for="(tag, index) in tags" :key="index" class="objective-tag">
|
||||
<div
|
||||
v-if="hasTags"
|
||||
class="tags-container"
|
||||
>
|
||||
<span
|
||||
v-for="(tag, index) in tags"
|
||||
:key="index"
|
||||
class="objective-tag"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Slot content (full description) always rendered below tags if tags exist, or alone if not -->
|
||||
<div class="description-text" :class="{ 'has-tags': hasTags }">
|
||||
<slot></slot>
|
||||
<div
|
||||
class="description-text"
|
||||
:class="{ 'has-tags': hasTags }"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Grid -->
|
||||
<div v-if="hasMeta" class="metrics-grid">
|
||||
<div
|
||||
v-if="hasMeta"
|
||||
class="metrics-grid"
|
||||
>
|
||||
<!-- Duration Card -->
|
||||
<div v-if="duration" class="metric-card time-card">
|
||||
<div class="card-icon">⏱️</div>
|
||||
<div
|
||||
v-if="duration"
|
||||
class="metric-card time-card"
|
||||
>
|
||||
<div class="card-icon">
|
||||
⏱️
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">预计耗时</div>
|
||||
<div class="card-value" v-html="duration"></div>
|
||||
<div class="card-label">
|
||||
预计耗时
|
||||
</div>
|
||||
<div
|
||||
class="card-value"
|
||||
v-html="duration"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Output Card -->
|
||||
<div v-if="expectedOutput || coreOutput" class="metric-card output-card">
|
||||
<div class="card-icon">📦</div>
|
||||
<div
|
||||
v-if="expectedOutput || coreOutput"
|
||||
class="metric-card output-card"
|
||||
>
|
||||
<div class="card-icon">
|
||||
📦
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">预期产出</div>
|
||||
<div class="card-label">
|
||||
预期产出
|
||||
</div>
|
||||
<div class="output-container">
|
||||
<div v-if="coreOutput" class="core-output">{{ coreOutput }}</div>
|
||||
<div
|
||||
v-if="coreOutput"
|
||||
class="core-output"
|
||||
>
|
||||
{{ coreOutput }}
|
||||
</div>
|
||||
<div
|
||||
v-if="expectedOutput"
|
||||
class="output-desc"
|
||||
v-html="expectedOutput"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Assignment Card -->
|
||||
<div v-if="assignment" class="metric-card task-card">
|
||||
<div class="card-icon">📝</div>
|
||||
<div
|
||||
v-if="assignment"
|
||||
class="metric-card task-card"
|
||||
>
|
||||
<div class="card-icon">
|
||||
📝
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">课后任务</div>
|
||||
<div class="card-value" v-html="assignment"></div>
|
||||
<div class="card-label">
|
||||
课后任务
|
||||
</div>
|
||||
<div
|
||||
class="card-value"
|
||||
v-html="assignment"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -70,7 +70,10 @@ onMounted(async () => {
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span v-if="formattedStars" class="stars-count">{{
|
||||
<span
|
||||
v-if="formattedStars"
|
||||
class="stars-count"
|
||||
>{{
|
||||
formattedStars
|
||||
}}</span>
|
||||
</a>
|
||||
|
||||
@@ -1674,12 +1674,15 @@ const appendixCards = [
|
||||
@click.stop="toggleLangMenu"
|
||||
>
|
||||
<span class="text">
|
||||
<span class="vpi-languages option-icon"></span>
|
||||
<span class="vpi-chevron-down text-icon"></span>
|
||||
<span class="vpi-languages option-icon" />
|
||||
<span class="vpi-chevron-down text-icon" />
|
||||
</span>
|
||||
</button>
|
||||
<!-- Dropdown Menu -->
|
||||
<div class="lang-dropdown glass" v-if="showLangMenu">
|
||||
<div
|
||||
v-if="showLangMenu"
|
||||
class="lang-dropdown glass"
|
||||
>
|
||||
<button
|
||||
v-for="locale in locales"
|
||||
:key="locale.code"
|
||||
@@ -1697,21 +1700,33 @@ const appendixCards = [
|
||||
<a
|
||||
class="buy-btn"
|
||||
:href="withBase('/zh-cn/stage-0/0.1-learning-map/')"
|
||||
>{{ t.footer.btn }}</a
|
||||
>
|
||||
>{{ t.footer.btn }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Home Anchor -->
|
||||
<div id="home" style="height: 0"></div>
|
||||
<div
|
||||
id="home"
|
||||
style="height: 0"
|
||||
/>
|
||||
|
||||
<!-- Stage 1: Product Manager -->
|
||||
<section id="pm" class="section-container">
|
||||
<section
|
||||
id="pm"
|
||||
class="section-container"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2 class="section-category">{{ t.stage1.cat }}</h2>
|
||||
<h3 class="section-headline" v-html="t.stage1.title"></h3>
|
||||
<p class="section-sub">{{ t.stage1.sub }}</p>
|
||||
<h2 class="section-category">
|
||||
{{ t.stage1.cat }}
|
||||
</h2>
|
||||
<h3
|
||||
class="section-headline"
|
||||
v-html="t.stage1.title"
|
||||
/>
|
||||
<p class="section-sub">
|
||||
{{ t.stage1.sub }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-grid">
|
||||
@@ -1721,7 +1736,10 @@ const appendixCards = [
|
||||
:href="withBase(t.stage1.cards[i].link)"
|
||||
class="feature-card glass"
|
||||
>
|
||||
<div class="feature-icon" :style="{ background: card.color }">
|
||||
<div
|
||||
class="feature-icon"
|
||||
:style="{ background: card.color }"
|
||||
>
|
||||
{{ card.icon }}
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
@@ -1733,11 +1751,21 @@ const appendixCards = [
|
||||
</section>
|
||||
|
||||
<!-- Stage 2: Junior/Mid Dev -->
|
||||
<section id="junior" class="section-container">
|
||||
<section
|
||||
id="junior"
|
||||
class="section-container"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2 class="section-category">{{ t.stage2.cat }}</h2>
|
||||
<h3 class="section-headline" v-html="t.stage2.title"></h3>
|
||||
<p class="section-sub">{{ t.stage2.sub }}</p>
|
||||
<h2 class="section-category">
|
||||
{{ t.stage2.cat }}
|
||||
</h2>
|
||||
<h3
|
||||
class="section-headline"
|
||||
v-html="t.stage2.title"
|
||||
/>
|
||||
<p class="section-sub">
|
||||
{{ t.stage2.sub }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="comm-grid">
|
||||
@@ -1751,7 +1779,7 @@ const appendixCards = [
|
||||
class="comm-visual"
|
||||
:style="{ backgroundColor: card.imageColor }"
|
||||
>
|
||||
<div class="visual-placeholder"></div>
|
||||
<div class="visual-placeholder" />
|
||||
</div>
|
||||
<div class="comm-text">
|
||||
<h4 class="comm-title">{{ t.stage2.cards[index].title }}</h4>
|
||||
@@ -1763,11 +1791,21 @@ const appendixCards = [
|
||||
</section>
|
||||
|
||||
<!-- Stage 3: Senior Dev -->
|
||||
<section id="senior" class="section-container">
|
||||
<section
|
||||
id="senior"
|
||||
class="section-container"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2 class="section-category">{{ t.stage3.cat }}</h2>
|
||||
<h3 class="section-headline" v-html="t.stage3.title"></h3>
|
||||
<p class="section-sub">{{ t.stage3.sub }}</p>
|
||||
<h2 class="section-category">
|
||||
{{ t.stage3.cat }}
|
||||
</h2>
|
||||
<h3
|
||||
class="section-headline"
|
||||
v-html="t.stage3.title"
|
||||
/>
|
||||
<p class="section-sub">
|
||||
{{ t.stage3.sub }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="scroll-container">
|
||||
@@ -1781,21 +1819,34 @@ const appendixCards = [
|
||||
<div class="prod-tag">{{ card.tag }}</div>
|
||||
<h4>{{ t.stage3.cards[index].title }}</h4>
|
||||
<p>{{ t.stage3.cards[index].desc }}</p>
|
||||
<div class="prod-visual"></div>
|
||||
<div class="prod-visual" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Appendix -->
|
||||
<section id="appendix" class="section-container">
|
||||
<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>
|
||||
<h2 class="section-category">
|
||||
{{ t.appendix.cat }}
|
||||
</h2>
|
||||
<h3
|
||||
class="section-headline"
|
||||
v-html="t.appendix.title"
|
||||
/>
|
||||
<p class="section-sub">
|
||||
{{ t.appendix.sub }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="appendix-scroll-wrapper" ref="appendixWrapper">
|
||||
<div
|
||||
ref="appendixWrapper"
|
||||
class="appendix-scroll-wrapper"
|
||||
>
|
||||
<div class="appendix-track">
|
||||
<a
|
||||
v-for="(card, index) in t.appendix.cards"
|
||||
@@ -1803,7 +1854,10 @@ const appendixCards = [
|
||||
:href="withBase(card.link)"
|
||||
class="appendix-card"
|
||||
>
|
||||
<div class="appendix-icon-wrapper" :class="'icon-' + (index % 4)">
|
||||
<div
|
||||
class="appendix-icon-wrapper"
|
||||
:class="'icon-' + (index % 4)"
|
||||
>
|
||||
<span class="appendix-emoji">{{
|
||||
['🤖', '🧠', '🎨', '🚀', '⚙️', '💾', '🛠️', '🌐'][index] || '📚'
|
||||
}}</span>
|
||||
@@ -1819,11 +1873,14 @@ const appendixCards = [
|
||||
</div>
|
||||
|
||||
<!-- Slider Indicator -->
|
||||
<div class="appendix-controls" v-if="totalPages > 1">
|
||||
<div
|
||||
v-if="totalPages > 1"
|
||||
class="appendix-controls"
|
||||
>
|
||||
<button
|
||||
class="control-btn play-btn"
|
||||
@click="autoScroll"
|
||||
aria-label="Auto Scroll"
|
||||
@click="autoScroll"
|
||||
>
|
||||
<svg
|
||||
width="12"
|
||||
@@ -1845,20 +1902,19 @@ const appendixCards = [
|
||||
class="indicator-dot"
|
||||
:class="{ active: currentPage === i - 1 }"
|
||||
@click="scrollToPage(i - 1)"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Callout -->
|
||||
<div class="footer-callout">
|
||||
<h2 v-html="t.footer.title"></h2>
|
||||
<h2 v-html="t.footer.title" />
|
||||
<p>{{ t.footer.desc }}</p>
|
||||
<a
|
||||
class="buy-btn large"
|
||||
:href="withBase('/zh-cn/stage-0/0.1-learning-map/')"
|
||||
>{{ t.footer.btn }}</a
|
||||
>
|
||||
>{{ t.footer.btn }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -20,13 +20,22 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a :href="href" class="nav-card-link">
|
||||
<a
|
||||
:href="href"
|
||||
class="nav-card-link"
|
||||
>
|
||||
<div class="nav-card">
|
||||
<div class="card-header">
|
||||
<span v-if="icon" class="card-icon">{{ icon }}</span>
|
||||
<span
|
||||
v-if="icon"
|
||||
class="card-icon"
|
||||
>{{ icon }}</span>
|
||||
<span class="card-title">{{ title }}</span>
|
||||
</div>
|
||||
<div v-if="description" class="card-desc">{{ description }}</div>
|
||||
<div
|
||||
v-if="description"
|
||||
class="card-desc"
|
||||
>{{ description }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="nav-grid">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<el-steps :active="active" align-center>
|
||||
<el-steps
|
||||
:active="active"
|
||||
align-center
|
||||
>
|
||||
<el-step
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
|
||||
@@ -18,39 +18,67 @@ const props = defineProps({
|
||||
<template>
|
||||
<div class="summary-card">
|
||||
<div class="summary-header">
|
||||
<div class="header-icon">📚</div>
|
||||
<div class="header-icon">
|
||||
📚
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<div class="summary-title">{{ title }}</div>
|
||||
<div class="summary-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-body">
|
||||
<!-- Sections -->
|
||||
<div v-if="sections.length > 0" class="sections-container">
|
||||
<div v-for="(section, index) in sections" :key="index" class="section-item">
|
||||
<div
|
||||
v-if="sections.length > 0"
|
||||
class="sections-container"
|
||||
>
|
||||
<div
|
||||
v-for="(section, index) in sections"
|
||||
:key="index"
|
||||
class="section-item"
|
||||
>
|
||||
<div class="section-header">
|
||||
<span class="section-number">{{ section.number }}</span>
|
||||
<span class="section-title">{{ section.title }}</span>
|
||||
</div>
|
||||
<ul class="section-list">
|
||||
<li v-for="(item, itemIndex) in section.items" :key="itemIndex" class="list-item">
|
||||
<li
|
||||
v-for="(item, itemIndex) in section.items"
|
||||
:key="itemIndex"
|
||||
class="list-item"
|
||||
>
|
||||
<span class="item-marker">•</span>
|
||||
<span class="item-content" v-html="item"></span>
|
||||
<span
|
||||
class="item-content"
|
||||
v-html="item"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Outputs -->
|
||||
<div v-if="outputs.length > 0" class="outputs-section">
|
||||
<div
|
||||
v-if="outputs.length > 0"
|
||||
class="outputs-section"
|
||||
>
|
||||
<div class="outputs-header">
|
||||
<span class="outputs-icon">📦</span>
|
||||
<span class="outputs-title">本幕输出：</span>
|
||||
</div>
|
||||
<ul class="outputs-list">
|
||||
<li v-for="(output, index) in outputs" :key="index" class="output-item">
|
||||
<li
|
||||
v-for="(output, index) in outputs"
|
||||
:key="index"
|
||||
class="output-item"
|
||||
>
|
||||
<span class="output-marker">✓</span>
|
||||
<span class="output-content" v-html="output"></span>
|
||||
<span
|
||||
class="output-content"
|
||||
v-html="output"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,12 @@
|
||||
<div class="arch">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">Agent 由哪些模块拼起来？</div>
|
||||
<div class="subtitle">点一下模块，看它“负责什么”。</div>
|
||||
<div class="title">
|
||||
Agent 由哪些模块拼起来？
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
点一下模块，看它“负责什么”。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,21 +28,33 @@
|
||||
</button>
|
||||
|
||||
<div class="pipes">
|
||||
<div class="pipe">用户目标 → 计划 → 工具调用 → 结果 → 再计划…</div>
|
||||
<div class="pipe small">（记忆会贯穿整个过程）</div>
|
||||
<div class="pipe">
|
||||
用户目标 → 计划 → 工具调用 → 结果 → 再计划…
|
||||
</div>
|
||||
<div class="pipe small">
|
||||
（记忆会贯穿整个过程）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">{{ current.icon }} {{ current.name }}</div>
|
||||
<div class="panel-body">{{ current.desc }}</div>
|
||||
<div class="panel-title">
|
||||
{{ current.icon }} {{ current.name }}
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{{ current.desc }}
|
||||
</div>
|
||||
|
||||
<div class="io">
|
||||
<div class="io-title">典型输入</div>
|
||||
<div class="io-title">
|
||||
典型输入
|
||||
</div>
|
||||
<pre><code>{{ current.input }}</code></pre>
|
||||
</div>
|
||||
<div class="io">
|
||||
<div class="io-title">典型输出</div>
|
||||
<div class="io-title">
|
||||
典型输出
|
||||
</div>
|
||||
<pre><code>{{ current.output }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,31 +8,46 @@
|
||||
<div class="risk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">Agent 的挑战：没护栏就容易“翻车”</div>
|
||||
<div class="subtitle">打开这些护栏，风险会明显下降。</div>
|
||||
<div class="title">
|
||||
Agent 的挑战：没护栏就容易“翻车”
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
打开这些护栏，风险会明显下降。
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="score"
|
||||
:class="scoreClass"
|
||||
>
|
||||
风险分数：{{ score }}/100
|
||||
</div>
|
||||
<div class="score" :class="scoreClass">风险分数：{{ score }}/100</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<label class="toggle"
|
||||
><input type="checkbox" v-model="maxSteps" />
|
||||
最大迭代次数（防死循环）</label
|
||||
>
|
||||
<label class="toggle"
|
||||
><input type="checkbox" v-model="budget" /> 预算上限（防烧钱）</label
|
||||
>
|
||||
<label class="toggle"
|
||||
><input type="checkbox" v-model="confirm" /> 危险操作二次确认</label
|
||||
>
|
||||
<label class="toggle"
|
||||
><input type="checkbox" v-model="sandbox" /> 沙箱执行（隔离系统）</label
|
||||
<label class="toggle"><input
|
||||
v-model="maxSteps"
|
||||
type="checkbox"
|
||||
>
|
||||
最大迭代次数（防死循环）</label>
|
||||
<label class="toggle"><input
|
||||
v-model="budget"
|
||||
type="checkbox"
|
||||
> 预算上限（防烧钱）</label>
|
||||
<label class="toggle"><input
|
||||
v-model="confirm"
|
||||
type="checkbox"
|
||||
> 危险操作二次确认</label>
|
||||
<label class="toggle"><input
|
||||
v-model="sandbox"
|
||||
type="checkbox"
|
||||
> 沙箱执行（隔离系统）</label>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="k">常见风险</div>
|
||||
<div class="k">
|
||||
常见风险
|
||||
</div>
|
||||
<ul>
|
||||
<li>重复尝试 → 死循环</li>
|
||||
<li>乱用工具 → 误删/误发</li>
|
||||
@@ -41,13 +56,23 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">你现在开启了什么？</div>
|
||||
<div class="v">{{ enabledList }}</div>
|
||||
<div class="note">建议：最少也要有“最大步数 + 确认”。</div>
|
||||
<div class="k">
|
||||
你现在开启了什么？
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ enabledList }}
|
||||
</div>
|
||||
<div class="note">
|
||||
建议：最少也要有“最大步数 + 确认”。
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">一句话建议</div>
|
||||
<div class="v">{{ advice }}</div>
|
||||
<div class="k">
|
||||
一句话建议
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ advice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,12 @@
|
||||
<div class="future">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">Agent 的未来：更稳、更强、更协作</div>
|
||||
<div class="subtitle">点一个趋势，看它意味着什么。</div>
|
||||
<div class="title">
|
||||
Agent 的未来：更稳、更强、更协作
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
点一个趋势，看它意味着什么。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,16 +27,28 @@
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="p-title">{{ current.label }}</div>
|
||||
<div class="p-body">{{ current.desc }}</div>
|
||||
<div class="p-title">
|
||||
{{ current.label }}
|
||||
</div>
|
||||
<div class="p-body">
|
||||
{{ current.desc }}
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="k">会带来什么？</div>
|
||||
<div class="v">{{ current.impact }}</div>
|
||||
<div class="k">
|
||||
会带来什么？
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ current.impact }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">你现在能做什么准备？</div>
|
||||
<div class="v">{{ current.prepare }}</div>
|
||||
<div class="k">
|
||||
你现在能做什么准备？
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ current.prepare }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,35 +6,68 @@
|
||||
<div class="levels">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">Agent 能力分级（从聊天到协作）</div>
|
||||
<div class="subtitle">拖动看看：等级越高，越像“能独立干活的同事”。</div>
|
||||
<div class="title">
|
||||
Agent 能力分级（从聊天到协作）
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
拖动看看：等级越高，越像“能独立干活的同事”。
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge">
|
||||
当前：{{ current.name }}
|
||||
</div>
|
||||
<div class="badge">当前：{{ current.name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<input type="range" min="0" max="5" step="1" v-model.number="level" />
|
||||
<input
|
||||
v-model.number="level"
|
||||
type="range"
|
||||
min="0"
|
||||
max="5"
|
||||
step="1"
|
||||
>
|
||||
<div class="ticks">
|
||||
<span v-for="n in 6" :key="n">{{ n - 1 }}</span>
|
||||
<span
|
||||
v-for="n in 6"
|
||||
:key="n"
|
||||
>{{ n - 1 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="k">能做什么</div>
|
||||
<div class="k">
|
||||
能做什么
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="x in current.can" :key="x">{{ x }}</li>
|
||||
<li
|
||||
v-for="x in current.can"
|
||||
:key="x"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">容易出的问题</div>
|
||||
<div class="k">
|
||||
容易出的问题
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="x in current.risk" :key="x">{{ x }}</li>
|
||||
<li
|
||||
v-for="x in current.risk"
|
||||
:key="x"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="k">典型任务</div>
|
||||
<div class="v">{{ current.example }}</div>
|
||||
<div class="k">
|
||||
典型任务
|
||||
</div>
|
||||
<div class="v">
|
||||
{{ current.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="memory-demo">
|
||||
<div class="header">
|
||||
<div class="title">💾 Agent 的记忆系统</div>
|
||||
<div class="title">
|
||||
💾 Agent 的记忆系统
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
@@ -10,29 +12,52 @@
|
||||
v-for="action in quickActions"
|
||||
:key="action"
|
||||
class="action-btn"
|
||||
@click="sendMessage(action)"
|
||||
:disabled="isTyping"
|
||||
@click="sendMessage(action)"
|
||||
>
|
||||
{{ action }}
|
||||
</button>
|
||||
<button class="action-btn reset" @click="resetConversation">🔄 重置</button>
|
||||
<button
|
||||
class="action-btn reset"
|
||||
@click="resetConversation"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主区域 -->
|
||||
<div class="main-area">
|
||||
<!-- 对话区 -->
|
||||
<div class="chat-box">
|
||||
<div class="box-header">💬 对话</div>
|
||||
<div class="messages" ref="chatContainer">
|
||||
<div v-for="(msg, i) in messages.slice(-4)" :key="i" class="msg-row" :class="msg.role">
|
||||
<div class="box-header">
|
||||
💬 对话
|
||||
</div>
|
||||
<div
|
||||
ref="chatContainer"
|
||||
class="messages"
|
||||
>
|
||||
<div
|
||||
v-for="(msg, i) in messages.slice(-4)"
|
||||
:key="i"
|
||||
class="msg-row"
|
||||
:class="msg.role"
|
||||
>
|
||||
<span class="avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</span>
|
||||
<span class="text">{{ msg.content }}</span>
|
||||
</div>
|
||||
<div v-if="isTyping" class="msg-row assistant typing">
|
||||
<div
|
||||
v-if="isTyping"
|
||||
class="msg-row assistant typing"
|
||||
>
|
||||
<span class="avatar">🤖</span>
|
||||
<span class="dots"><span></span><span></span><span></span></span>
|
||||
<span class="dots"><span /><span /><span /></span>
|
||||
</div>
|
||||
<div
|
||||
v-if="messages.length === 0"
|
||||
class="empty-msg"
|
||||
>
|
||||
点击上方按钮开始对话
|
||||
</div>
|
||||
<div v-if="messages.length === 0" class="empty-msg">点击上方按钮开始对话</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -44,11 +69,20 @@
|
||||
<span class="count">{{ shortTermMemory.length }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-for="(item, i) in shortTermMemory.slice(-3)" :key="i" class="mem-item">
|
||||
<div
|
||||
v-for="(item, i) in shortTermMemory.slice(-3)"
|
||||
:key="i"
|
||||
class="mem-item"
|
||||
>
|
||||
<span class="role">{{ item.role === 'user' ? 'U' : 'A' }}</span>
|
||||
<span class="content">{{ truncate(item.content, 20) }}</span>
|
||||
</div>
|
||||
<div v-if="shortTermMemory.length === 0" class="empty">空</div>
|
||||
<div
|
||||
v-if="shortTermMemory.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
空
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,11 +92,20 @@
|
||||
<span class="count">{{ Object.keys(workingMemory).length }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-for="(v, k) in workingMemory" :key="k" class="mem-item kv">
|
||||
<div
|
||||
v-for="(v, k) in workingMemory"
|
||||
:key="k"
|
||||
class="mem-item kv"
|
||||
>
|
||||
<span class="key">{{ k }}</span>
|
||||
<span class="value">{{ v }}</span>
|
||||
</div>
|
||||
<div v-if="Object.keys(workingMemory).length === 0" class="empty">空</div>
|
||||
<div
|
||||
v-if="Object.keys(workingMemory).length === 0"
|
||||
class="empty"
|
||||
>
|
||||
空
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,18 +115,30 @@
|
||||
<span class="count">{{ longTermMemory.length }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-for="(item, i) in longTermMemory.slice(-2)" :key="i" class="mem-item">
|
||||
<div
|
||||
v-for="(item, i) in longTermMemory.slice(-2)"
|
||||
:key="i"
|
||||
class="mem-item"
|
||||
>
|
||||
<span class="tag">{{ item.category }}</span>
|
||||
<span class="content">{{ item.content }}</span>
|
||||
</div>
|
||||
<div v-if="longTermMemory.length === 0" class="empty">空</div>
|
||||
<div
|
||||
v-if="longTermMemory.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
空
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆操作提示 -->
|
||||
<div v-if="lastOp" class="op-bar">
|
||||
<div
|
||||
v-if="lastOp"
|
||||
class="op-bar"
|
||||
>
|
||||
<span>{{ lastOp.icon }}</span>
|
||||
<span>{{ lastOp.text }}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,52 +1,121 @@
|
||||
<template>
|
||||
<div class="memory-principle">
|
||||
<div class="header">
|
||||
<div class="title">🧠 Agent 记忆系统原理：如何让 AI "记得"你</div>
|
||||
<div class="subtitle">理解短期记忆、工作记忆、长期记忆的协同工作机制</div>
|
||||
<div class="title">
|
||||
🧠 Agent 记忆系统原理：如何让 AI "记得"你
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
理解短期记忆、工作记忆、长期记忆的协同工作机制
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆类型概览 -->
|
||||
<div class="memory-overview">
|
||||
<div class="overview-title">📊 三层记忆架构</div>
|
||||
<div class="overview-title">
|
||||
📊 三层记忆架构
|
||||
</div>
|
||||
<div class="memory-cards">
|
||||
<div class="memory-card short-term" :class="{ active: activeTab === 'short' }" @click="activeTab = 'short'">
|
||||
<div class="card-icon">⏱️</div>
|
||||
<div class="card-name">短期记忆</div>
|
||||
<div class="card-desc">当前对话上下文</div>
|
||||
<div class="card-lifetime">⚡ 会话级</div>
|
||||
<div
|
||||
class="memory-card short-term"
|
||||
:class="{ active: activeTab === 'short' }"
|
||||
@click="activeTab = 'short'"
|
||||
>
|
||||
<div class="card-icon">
|
||||
⏱️
|
||||
</div>
|
||||
<div class="card-name">
|
||||
短期记忆
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
当前对话上下文
|
||||
</div>
|
||||
<div class="card-lifetime">
|
||||
⚡ 会话级
|
||||
</div>
|
||||
</div>
|
||||
<div class="memory-card working" :class="{ active: activeTab === 'working' }" @click="activeTab = 'working'">
|
||||
<div class="card-icon">📝</div>
|
||||
<div class="card-name">工作记忆</div>
|
||||
<div class="card-desc">任务相关变量</div>
|
||||
<div class="card-lifetime">🔄 任务级</div>
|
||||
<div
|
||||
class="memory-card working"
|
||||
:class="{ active: activeTab === 'working' }"
|
||||
@click="activeTab = 'working'"
|
||||
>
|
||||
<div class="card-icon">
|
||||
📝
|
||||
</div>
|
||||
<div class="card-name">
|
||||
工作记忆
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
任务相关变量
|
||||
</div>
|
||||
<div class="card-lifetime">
|
||||
🔄 任务级
|
||||
</div>
|
||||
</div>
|
||||
<div class="memory-card long-term" :class="{ active: activeTab === 'long' }" @click="activeTab = 'long'">
|
||||
<div class="card-icon">💾</div>
|
||||
<div class="card-name">长期记忆</div>
|
||||
<div class="card-desc">用户偏好与知识</div>
|
||||
<div class="card-lifetime">♾️ 持久化</div>
|
||||
<div
|
||||
class="memory-card long-term"
|
||||
:class="{ active: activeTab === 'long' }"
|
||||
@click="activeTab = 'long'"
|
||||
>
|
||||
<div class="card-icon">
|
||||
💾
|
||||
</div>
|
||||
<div class="card-name">
|
||||
长期记忆
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
用户偏好与知识
|
||||
</div>
|
||||
<div class="card-lifetime">
|
||||
♾️ 持久化
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交互演示区 -->
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">🎮 交互演示：观察记忆如何工作</div>
|
||||
<div class="demo-title">
|
||||
🎮 交互演示：观察记忆如何工作
|
||||
</div>
|
||||
|
||||
<!-- 对话区 -->
|
||||
<div class="chat-area">
|
||||
<div class="chat-header">
|
||||
<span>💬 对话窗口</span>
|
||||
<button class="reset-btn" @click="resetDemo">🔄 重置</button>
|
||||
<button
|
||||
class="reset-btn"
|
||||
@click="resetDemo"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="messages" ref="messageContainer">
|
||||
<div v-for="(msg, idx) in messages" :key="idx" class="message" :class="msg.role">
|
||||
<div class="avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</div>
|
||||
<div
|
||||
ref="messageContainer"
|
||||
class="messages"
|
||||
>
|
||||
<div
|
||||
v-for="(msg, idx) in messages"
|
||||
:key="idx"
|
||||
class="message"
|
||||
:class="msg.role"
|
||||
>
|
||||
<div class="avatar">
|
||||
{{ msg.role === 'user' ? '👤' : '🤖' }}
|
||||
</div>
|
||||
<div class="bubble">
|
||||
<div class="msg-text">{{ msg.text }}</div>
|
||||
<div v-if="msg.memoryOps && msg.memoryOps.length" class="memory-ops">
|
||||
<div v-for="(op, i) in msg.memoryOps" :key="i" class="memory-op" :class="op.type">
|
||||
<div class="msg-text">
|
||||
{{ msg.text }}
|
||||
</div>
|
||||
<div
|
||||
v-if="msg.memoryOps && msg.memoryOps.length"
|
||||
class="memory-ops"
|
||||
>
|
||||
<div
|
||||
v-for="(op, i) in msg.memoryOps"
|
||||
:key="i"
|
||||
class="memory-op"
|
||||
:class="op.type"
|
||||
>
|
||||
<span class="op-icon">{{ op.icon }}</span>
|
||||
<span class="op-text">{{ op.text }}</span>
|
||||
</div>
|
||||
@@ -71,115 +140,214 @@
|
||||
|
||||
<!-- 记忆状态面板 -->
|
||||
<div class="memory-panels">
|
||||
<div class="panel-title">📂 记忆状态实时监控</div>
|
||||
<div class="panel-title">
|
||||
📂 记忆状态实时监控
|
||||
</div>
|
||||
|
||||
<!-- 短期记忆 -->
|
||||
<div class="memory-panel" :class="{ highlight: activeTab === 'short' }" @click="activeTab = 'short'">
|
||||
<div
|
||||
class="memory-panel"
|
||||
:class="{ highlight: activeTab === 'short' }"
|
||||
@click="activeTab = 'short'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<span class="panel-icon">⏱️</span>
|
||||
<span class="panel-name">短期记忆</span>
|
||||
<span class="panel-count">{{ shortTermMemory.length }} 条</span>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div v-if="shortTermMemory.length === 0" class="empty">暂无对话记录</div>
|
||||
<div v-for="(item, idx) in shortTermMemory.slice(-5)" :key="idx" class="memory-item">
|
||||
<span class="item-role" :class="item.role">{{ item.role === 'user' ? 'U' : 'A' }}</span>
|
||||
<div
|
||||
v-if="shortTermMemory.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
暂无对话记录
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, idx) in shortTermMemory.slice(-5)"
|
||||
:key="idx"
|
||||
class="memory-item"
|
||||
>
|
||||
<span
|
||||
class="item-role"
|
||||
:class="item.role"
|
||||
>{{ item.role === 'user' ? 'U' : 'A' }}</span>
|
||||
<span class="item-text">{{ truncate(item.content, 25) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">💡 保存最近的对话轮次，超出上下文窗口会被遗忘</div>
|
||||
<div class="panel-footer">
|
||||
💡 保存最近的对话轮次，超出上下文窗口会被遗忘
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作记忆 -->
|
||||
<div class="memory-panel" :class="{ highlight: activeTab === 'working' }" @click="activeTab = 'working'">
|
||||
<div
|
||||
class="memory-panel"
|
||||
:class="{ highlight: activeTab === 'working' }"
|
||||
@click="activeTab = 'working'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<span class="panel-icon">📝</span>
|
||||
<span class="panel-name">工作记忆</span>
|
||||
<span class="panel-count">{{ Object.keys(workingMemory).length }} 个变量</span>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div v-if="Object.keys(workingMemory).length === 0" class="empty">暂无任务变量</div>
|
||||
<div v-for="(value, key) in workingMemory" :key="key" class="memory-item working-item">
|
||||
<div
|
||||
v-if="Object.keys(workingMemory).length === 0"
|
||||
class="empty"
|
||||
>
|
||||
暂无任务变量
|
||||
</div>
|
||||
<div
|
||||
v-for="(value, key) in workingMemory"
|
||||
:key="key"
|
||||
class="memory-item working-item"
|
||||
>
|
||||
<span class="item-key">{{ key }}:</span>
|
||||
<span class="item-value">{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">💡 临时存储任务相关变量，任务结束后清除</div>
|
||||
<div class="panel-footer">
|
||||
💡 临时存储任务相关变量，任务结束后清除
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 长期记忆 -->
|
||||
<div class="memory-panel" :class="{ highlight: activeTab === 'long' }" @click="activeTab = 'long'">
|
||||
<div
|
||||
class="memory-panel"
|
||||
:class="{ highlight: activeTab === 'long' }"
|
||||
@click="activeTab = 'long'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<span class="panel-icon">💾</span>
|
||||
<span class="panel-name">长期记忆</span>
|
||||
<span class="panel-count">{{ longTermMemory.length }} 条知识</span>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div v-if="longTermMemory.length === 0" class="empty">暂无持久化知识</div>
|
||||
<div v-for="(item, idx) in longTermMemory" :key="idx" class="memory-item long-item">
|
||||
<span class="item-type" :class="item.type">{{ item.type }}</span>
|
||||
<div
|
||||
v-if="longTermMemory.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
暂无持久化知识
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, idx) in longTermMemory"
|
||||
:key="idx"
|
||||
class="memory-item long-item"
|
||||
>
|
||||
<span
|
||||
class="item-type"
|
||||
:class="item.type"
|
||||
>{{ item.type }}</span>
|
||||
<span class="item-content">{{ item.key }} = {{ truncate(item.value, 20) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">💡 跨会话持久保存，需要显式写入</div>
|
||||
<div class="panel-footer">
|
||||
💡 跨会话持久保存，需要显式写入
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆流转示意 -->
|
||||
<div class="memory-flow">
|
||||
<div class="flow-title">🔄 记忆流转机制</div>
|
||||
<div class="flow-title">
|
||||
🔄 记忆流转机制
|
||||
</div>
|
||||
<div class="flow-diagram">
|
||||
<div class="flow-step">
|
||||
<div class="step-box user-input">
|
||||
<div class="step-icon">👤</div>
|
||||
<div class="step-text">用户输入</div>
|
||||
<div class="step-icon">
|
||||
👤
|
||||
</div>
|
||||
<div class="step-text">
|
||||
用户输入
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">
|
||||
➡️
|
||||
</div>
|
||||
<div class="step-arrow">➡️</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="step-box">
|
||||
<div class="step-icon">⏱️</div>
|
||||
<div class="step-text">短期记忆</div>
|
||||
<div class="step-desc">自动记录对话</div>
|
||||
<div class="step-icon">
|
||||
⏱️
|
||||
</div>
|
||||
<div class="step-text">
|
||||
短期记忆
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
自动记录对话
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">
|
||||
➡️
|
||||
</div>
|
||||
<div class="step-arrow">➡️</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="step-box">
|
||||
<div class="step-icon">🧠</div>
|
||||
<div class="step-text">LLM 处理</div>
|
||||
<div class="step-desc">理解+决策</div>
|
||||
<div class="step-icon">
|
||||
🧠
|
||||
</div>
|
||||
<div class="step-text">
|
||||
LLM 处理
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
理解+决策
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">
|
||||
➡️
|
||||
</div>
|
||||
<div class="step-arrow">➡️</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-branch">
|
||||
<div class="branch-option">
|
||||
<div class="branch-arrow">⬇️</div>
|
||||
<div class="branch-arrow">
|
||||
⬇️
|
||||
</div>
|
||||
<div class="step-box small">
|
||||
<div class="step-icon">📝</div>
|
||||
<div class="step-text">工作记忆</div>
|
||||
<div class="step-desc">临时变量</div>
|
||||
<div class="step-icon">
|
||||
📝
|
||||
</div>
|
||||
<div class="step-text">
|
||||
工作记忆
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
临时变量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="branch-option">
|
||||
<div class="branch-arrow">⬇️</div>
|
||||
<div class="branch-arrow">
|
||||
⬇️
|
||||
</div>
|
||||
<div class="step-box small">
|
||||
<div class="step-icon">💾</div>
|
||||
<div class="step-text">长期记忆</div>
|
||||
<div class="step-desc">持久化存储</div>
|
||||
<div class="step-icon">
|
||||
💾
|
||||
</div>
|
||||
<div class="step-text">
|
||||
长期记忆
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
持久化存储
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="step-arrow">➡️</div>
|
||||
<div class="step-arrow">
|
||||
➡️
|
||||
</div>
|
||||
<div class="step-box agent-output">
|
||||
<div class="step-icon">🤖</div>
|
||||
<div class="step-text">Agent 回复</div>
|
||||
<div class="step-icon">
|
||||
🤖
|
||||
</div>
|
||||
<div class="step-text">
|
||||
Agent 回复
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,9 +355,15 @@
|
||||
|
||||
<!-- 核心机制解释 -->
|
||||
<div class="mechanism-section">
|
||||
<div class="mechanism-title">⚙️ 核心机制详解</div>
|
||||
<div class="mechanism-title">
|
||||
⚙️ 核心机制详解
|
||||
</div>
|
||||
<div class="mechanism-grid">
|
||||
<div class="mechanism-card" :class="{ active: activeTab === 'short' }" @click="activeTab = 'short'">
|
||||
<div
|
||||
class="mechanism-card"
|
||||
:class="{ active: activeTab === 'short' }"
|
||||
@click="activeTab = 'short'"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-icon">⏱️</span>
|
||||
<span class="card-title">短期记忆 (Short-term)</span>
|
||||
@@ -217,7 +391,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mechanism-card" :class="{ active: activeTab === 'working' }" @click="activeTab = 'working'">
|
||||
<div
|
||||
class="mechanism-card"
|
||||
:class="{ active: activeTab === 'working' }"
|
||||
@click="activeTab = 'working'"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-icon">📝</span>
|
||||
<span class="card-title">工作记忆 (Working)</span>
|
||||
@@ -245,7 +423,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mechanism-card" :class="{ active: activeTab === 'long' }" @click="activeTab = 'long'">
|
||||
<div
|
||||
class="mechanism-card"
|
||||
:class="{ active: activeTab === 'long' }"
|
||||
@click="activeTab = 'long'"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-icon">💾</span>
|
||||
<span class="card-title">长期记忆 (Long-term)</span>
|
||||
@@ -277,34 +459,60 @@
|
||||
|
||||
<!-- 最佳实践 -->
|
||||
<div class="best-practices">
|
||||
<div class="practices-title">💡 记忆系统最佳实践</div>
|
||||
<div class="practices-title">
|
||||
💡 记忆系统最佳实践
|
||||
</div>
|
||||
<div class="practices-list">
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">1️⃣</div>
|
||||
<div class="practice-icon">
|
||||
1️⃣
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">短期记忆优化</div>
|
||||
<div class="practice-desc">定期清理无关历史，保留关键上下文；超长对话使用摘要技术压缩</div>
|
||||
<div class="practice-title">
|
||||
短期记忆优化
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
定期清理无关历史，保留关键上下文；超长对话使用摘要技术压缩
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">2️⃣</div>
|
||||
<div class="practice-icon">
|
||||
2️⃣
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">工作记忆管理</div>
|
||||
<div class="practice-desc">任务开始时初始化，结束时清理；避免存储大量中间结果</div>
|
||||
<div class="practice-title">
|
||||
工作记忆管理
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
任务开始时初始化，结束时清理；避免存储大量中间结果
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">3️⃣</div>
|
||||
<div class="practice-icon">
|
||||
3️⃣
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">长期记忆构建</div>
|
||||
<div class="practice-desc">定期总结对话提炼知识；使用向量检索实现语义搜索；区分事实和偏好</div>
|
||||
<div class="practice-title">
|
||||
长期记忆构建
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
定期总结对话提炼知识；使用向量检索实现语义搜索；区分事实和偏好
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">4️⃣</div>
|
||||
<div class="practice-icon">
|
||||
4️⃣
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">记忆一致性</div>
|
||||
<div class="practice-desc">长期记忆更新前验证；处理矛盾信息；支持用户显式修改记忆</div>
|
||||
<div class="practice-title">
|
||||
记忆一致性
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
长期记忆更新前验证；处理矛盾信息；支持用户显式修改记忆
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+193
-55
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="multi-tool-principle">
|
||||
<div class="header">
|
||||
<div class="title">🔧 多工具调用原理：Agent 如何"串联"工具完成任务</div>
|
||||
<div class="subtitle">理解 Agent 的链式思考(Chain-of-Thought)和工具编排机制</div>
|
||||
<div class="title">
|
||||
🔧 多工具调用原理：Agent 如何"串联"工具完成任务
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
理解 Agent 的链式思考(Chain-of-Thought)和工具编排机制
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景选择 -->
|
||||
@@ -20,24 +24,40 @@
|
||||
|
||||
<!-- 用户意图 -->
|
||||
<div class="intent-box">
|
||||
<div class="intent-label">👤 用户意图</div>
|
||||
<div class="intent-text">{{ currentData.intent }}</div>
|
||||
<div class="intent-label">
|
||||
👤 用户意图
|
||||
</div>
|
||||
<div class="intent-text">
|
||||
{{ currentData.intent }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 执行流程可视化 -->
|
||||
<div class="execution-flow">
|
||||
<div class="flow-title">🔄 工具调用执行流程</div>
|
||||
<div class="flow-title">
|
||||
🔄 工具调用执行流程
|
||||
</div>
|
||||
|
||||
<!-- 思考阶段 -->
|
||||
<div class="phase thinking-phase" :class="{ active: currentPhase >= 0 }">
|
||||
<div
|
||||
class="phase thinking-phase"
|
||||
:class="{ active: currentPhase >= 0 }"
|
||||
>
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">🧠</span>
|
||||
<span class="phase-name">思考规划</span>
|
||||
<span class="phase-status">{{ currentPhase > 0 ? '✅ 完成' : currentPhase === 0 ? '🔄 进行中' : '⏳ 等待' }}</span>
|
||||
</div>
|
||||
<div v-if="currentPhase >= 0" class="phase-content">
|
||||
<div
|
||||
v-if="currentPhase >= 0"
|
||||
class="phase-content"
|
||||
>
|
||||
<div class="thought-steps">
|
||||
<div v-for="(step, idx) in currentData.planningSteps" :key="idx" class="thought-step">
|
||||
<div
|
||||
v-for="(step, idx) in currentData.planningSteps"
|
||||
:key="idx"
|
||||
class="thought-step"
|
||||
>
|
||||
<span class="step-num">{{ idx + 1 }}</span>
|
||||
<span class="step-text">{{ step }}</span>
|
||||
</div>
|
||||
@@ -46,13 +66,19 @@
|
||||
</div>
|
||||
|
||||
<!-- 工具执行阶段 -->
|
||||
<div class="phase tools-phase" :class="{ active: currentPhase >= 1 }">
|
||||
<div
|
||||
class="phase tools-phase"
|
||||
:class="{ active: currentPhase >= 1 }"
|
||||
>
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">🔧</span>
|
||||
<span class="phase-name">工具执行</span>
|
||||
<span class="phase-status">{{ currentPhase > 1 ? '✅ 完成' : currentPhase === 1 ? '🔄 进行中' : '⏳ 等待' }}</span>
|
||||
</div>
|
||||
<div v-if="currentPhase >= 1" class="phase-content">
|
||||
<div
|
||||
v-if="currentPhase >= 1"
|
||||
class="phase-content"
|
||||
>
|
||||
<div class="tools-chain">
|
||||
<div
|
||||
v-for="(tool, idx) in currentData.tools"
|
||||
@@ -64,28 +90,53 @@
|
||||
pending: currentTool < idx
|
||||
}"
|
||||
>
|
||||
<div class="node-connector" v-if="idx > 0">
|
||||
<div class="connector-line" :class="{ active: currentTool >= idx }"></div>
|
||||
<div
|
||||
v-if="idx > 0"
|
||||
class="node-connector"
|
||||
>
|
||||
<div
|
||||
class="connector-line"
|
||||
:class="{ active: currentTool >= idx }"
|
||||
/>
|
||||
</div>
|
||||
<div class="node-content">
|
||||
<div class="node-icon">{{ tool.icon }}</div>
|
||||
<div class="node-name">{{ tool.name }}</div>
|
||||
<div class="node-icon">
|
||||
{{ tool.icon }}
|
||||
</div>
|
||||
<div class="node-name">
|
||||
{{ tool.name }}
|
||||
</div>
|
||||
<div class="node-status">
|
||||
<span v-if="currentTool > idx" class="status-done">✓</span>
|
||||
<span v-else-if="currentTool === idx" class="status-running">
|
||||
<span class="pulse"></span>
|
||||
<span
|
||||
v-if="currentTool > idx"
|
||||
class="status-done"
|
||||
>✓</span>
|
||||
<span
|
||||
v-else-if="currentTool === idx"
|
||||
class="status-running"
|
||||
>
|
||||
<span class="pulse" />
|
||||
</span>
|
||||
<span v-else class="status-wait">○</span>
|
||||
<span
|
||||
v-else
|
||||
class="status-wait"
|
||||
>○</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工具详情 -->
|
||||
<div v-if="currentTool >= idx" class="tool-detail-popup">
|
||||
<div
|
||||
v-if="currentTool >= idx"
|
||||
class="tool-detail-popup"
|
||||
>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">输入:</span>
|
||||
<code class="detail-code">{{ tool.input }}</code>
|
||||
</div>
|
||||
<div v-if="currentTool > idx" class="detail-row">
|
||||
<div
|
||||
v-if="currentTool > idx"
|
||||
class="detail-row"
|
||||
>
|
||||
<span class="detail-label">输出:</span>
|
||||
<span class="detail-output">{{ truncate(tool.output, 50) }}</span>
|
||||
</div>
|
||||
@@ -94,34 +145,57 @@
|
||||
</div>
|
||||
|
||||
<!-- 数据流转示意 -->
|
||||
<div v-if="currentPhase === 1" class="data-flow-hint">
|
||||
<div class="flow-arrow">⬇️ 数据在工具间流转，上一步的输出成为下一步的输入</div>
|
||||
<div
|
||||
v-if="currentPhase === 1"
|
||||
class="data-flow-hint"
|
||||
>
|
||||
<div class="flow-arrow">
|
||||
⬇️ 数据在工具间流转，上一步的输出成为下一步的输入
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果整合阶段 -->
|
||||
<div class="phase result-phase" :class="{ active: currentPhase >= 2 }">
|
||||
<div
|
||||
class="phase result-phase"
|
||||
:class="{ active: currentPhase >= 2 }"
|
||||
>
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">📝</span>
|
||||
<span class="phase-name">结果整合</span>
|
||||
<span class="phase-status">{{ currentPhase > 2 ? '✅ 完成' : currentPhase === 2 ? '🔄 进行中' : '⏳ 等待' }}</span>
|
||||
</div>
|
||||
<div v-if="currentPhase >= 2" class="phase-content">
|
||||
<div
|
||||
v-if="currentPhase >= 2"
|
||||
class="phase-content"
|
||||
>
|
||||
<div class="integration-steps">
|
||||
<div class="integration-step" :class="{ done: integrationStep >= 0 }">
|
||||
<div
|
||||
class="integration-step"
|
||||
:class="{ done: integrationStep >= 0 }"
|
||||
>
|
||||
<span class="check">{{ integrationStep >= 0 ? '✓' : '○' }}</span>
|
||||
<span>收集所有工具输出</span>
|
||||
</div>
|
||||
<div class="integration-step" :class="{ done: integrationStep >= 1 }">
|
||||
<div
|
||||
class="integration-step"
|
||||
:class="{ done: integrationStep >= 1 }"
|
||||
>
|
||||
<span class="check">{{ integrationStep >= 1 ? '✓' : '○' }}</span>
|
||||
<span>去重与验证</span>
|
||||
</div>
|
||||
<div class="integration-step" :class="{ done: integrationStep >= 2 }">
|
||||
<div
|
||||
class="integration-step"
|
||||
:class="{ done: integrationStep >= 2 }"
|
||||
>
|
||||
<span class="check">{{ integrationStep >= 2 ? '✓' : '○' }}</span>
|
||||
<span>结构化整理</span>
|
||||
</div>
|
||||
<div class="integration-step" :class="{ done: integrationStep >= 3 }">
|
||||
<div
|
||||
class="integration-step"
|
||||
:class="{ done: integrationStep >= 3 }"
|
||||
>
|
||||
<span class="check">{{ integrationStep >= 3 ? '✓' : '○' }}</span>
|
||||
<span>生成自然语言回复</span>
|
||||
</div>
|
||||
@@ -130,15 +204,23 @@
|
||||
</div>
|
||||
|
||||
<!-- 最终输出 -->
|
||||
<div class="phase output-phase" :class="{ active: currentPhase >= 3 }">
|
||||
<div
|
||||
class="phase output-phase"
|
||||
:class="{ active: currentPhase >= 3 }"
|
||||
>
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">💬</span>
|
||||
<span class="phase-name">最终输出</span>
|
||||
<span class="phase-status">{{ currentPhase >= 3 ? '✅ 完成' : '⏳ 等待' }}</span>
|
||||
</div>
|
||||
<div v-if="currentPhase >= 3" class="phase-content">
|
||||
<div
|
||||
v-if="currentPhase >= 3"
|
||||
class="phase-content"
|
||||
>
|
||||
<div class="final-output">
|
||||
<div class="output-bubble">{{ currentData.finalOutput }}</div>
|
||||
<div class="output-bubble">
|
||||
{{ currentData.finalOutput }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,57 +228,113 @@
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="controls">
|
||||
<button v-if="!isRunning && currentPhase === -1" class="control-btn primary" @click="startDemo">
|
||||
<button
|
||||
v-if="!isRunning && currentPhase === -1"
|
||||
class="control-btn primary"
|
||||
@click="startDemo"
|
||||
>
|
||||
▶ 开始演示
|
||||
</button>
|
||||
<button v-else-if="isRunning" class="control-btn" disabled>
|
||||
<button
|
||||
v-else-if="isRunning"
|
||||
class="control-btn"
|
||||
disabled
|
||||
>
|
||||
⏳ 执行中...
|
||||
</button>
|
||||
<button v-else class="control-btn secondary" @click="reset">
|
||||
<button
|
||||
v-else
|
||||
class="control-btn secondary"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重新演示
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 原理说明 -->
|
||||
<div class="principle-explanation">
|
||||
<div class="explanation-title">📚 核心原理</div>
|
||||
<div class="explanation-title">
|
||||
📚 核心原理
|
||||
</div>
|
||||
<div class="explanation-grid">
|
||||
<div class="explanation-card">
|
||||
<div class="card-icon">🧩</div>
|
||||
<div class="card-title">任务分解</div>
|
||||
<div class="card-desc">Agent 将复杂任务拆解为多个子任务，每个子任务对应一个工具调用</div>
|
||||
<div class="card-icon">
|
||||
🧩
|
||||
</div>
|
||||
<div class="card-title">
|
||||
任务分解
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
Agent 将复杂任务拆解为多个子任务，每个子任务对应一个工具调用
|
||||
</div>
|
||||
</div>
|
||||
<div class="explanation-card">
|
||||
<div class="card-icon">🔗</div>
|
||||
<div class="card-title">链式调用</div>
|
||||
<div class="card-desc">工具按依赖关系串联执行，前一个工具的输出成为后一个工具的输入</div>
|
||||
<div class="card-icon">
|
||||
🔗
|
||||
</div>
|
||||
<div class="card-title">
|
||||
链式调用
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
工具按依赖关系串联执行，前一个工具的输出成为后一个工具的输入
|
||||
</div>
|
||||
</div>
|
||||
<div class="explanation-card">
|
||||
<div class="card-icon">🔄</div>
|
||||
<div class="card-title">动态调整</div>
|
||||
<div class="card-desc">根据中间结果，Agent 可以动态决定下一步调用哪个工具</div>
|
||||
<div class="card-icon">
|
||||
🔄
|
||||
</div>
|
||||
<div class="card-title">
|
||||
动态调整
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
根据中间结果，Agent 可以动态决定下一步调用哪个工具
|
||||
</div>
|
||||
</div>
|
||||
<div class="explanation-card">
|
||||
<div class="card-icon">🎯</div>
|
||||
<div class="card-title">结果整合</div>
|
||||
<div class="card-desc">将所有工具输出整合为连贯、有用的最终回复</div>
|
||||
<div class="card-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="card-title">
|
||||
结果整合
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
将所有工具输出整合为连贯、有用的最终回复
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 与 LLM 对比 -->
|
||||
<div class="comparison-section">
|
||||
<div class="comparison-title">⚖️ 为什么需要多工具调用？</div>
|
||||
<div class="comparison-title">
|
||||
⚖️ 为什么需要多工具调用？
|
||||
</div>
|
||||
<div class="comparison-table">
|
||||
<div class="comparison-row header">
|
||||
<div class="col scenario">场景</div>
|
||||
<div class="col llm">普通 LLM</div>
|
||||
<div class="col agent">Agent + 多工具</div>
|
||||
<div class="col scenario">
|
||||
场景
|
||||
</div>
|
||||
<div class="col llm">
|
||||
普通 LLM
|
||||
</div>
|
||||
<div class="col agent">
|
||||
Agent + 多工具
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, idx) in comparisons" :key="idx" class="comparison-row">
|
||||
<div class="col scenario">{{ item.scenario }}</div>
|
||||
<div class="col llm">{{ item.llm }}</div>
|
||||
<div class="col agent">{{ item.agent }}</div>
|
||||
<div
|
||||
v-for="(item, idx) in comparisons"
|
||||
:key="idx"
|
||||
class="comparison-row"
|
||||
>
|
||||
<div class="col scenario">
|
||||
{{ item.scenario }}
|
||||
</div>
|
||||
<div class="col llm">
|
||||
{{ item.llm }}
|
||||
</div>
|
||||
<div class="col agent">
|
||||
{{ item.agent }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="planning-demo">
|
||||
<div class="header">
|
||||
<div class="title">📋 Agent 的规划能力</div>
|
||||
<div class="title">
|
||||
📋 Agent 的规划能力
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务选择 -->
|
||||
@@ -14,7 +16,10 @@
|
||||
>
|
||||
<span>{{ task.icon }}</span>
|
||||
<span>{{ task.name }}</span>
|
||||
<span class="complexity" :class="task.complexity">{{ task.complexityLabel }}</span>
|
||||
<span
|
||||
class="complexity"
|
||||
:class="task.complexity"
|
||||
>{{ task.complexityLabel }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -34,9 +39,16 @@
|
||||
class="step-node"
|
||||
:class="{ completed: stepStatus[index] === 'completed', running: stepStatus[index] === 'running' }"
|
||||
>
|
||||
<div class="node-circle">{{ index + 1 }}</div>
|
||||
<div class="node-name">{{ step.name }}</div>
|
||||
<div v-if="index < currentTaskData.steps.length - 1" class="node-line"></div>
|
||||
<div class="node-circle">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="node-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div
|
||||
v-if="index < currentTaskData.steps.length - 1"
|
||||
class="node-line"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -45,46 +57,91 @@
|
||||
<div class="log-box">
|
||||
<div class="box-header">
|
||||
<span>📝 执行日志</span>
|
||||
<span v-if="executionStatus === 'running'" class="status running">执行中</span>
|
||||
<span v-else-if="executionStatus === 'completed'" class="status completed">已完成</span>
|
||||
<span
|
||||
v-if="executionStatus === 'running'"
|
||||
class="status running"
|
||||
>执行中</span>
|
||||
<span
|
||||
v-else-if="executionStatus === 'completed'"
|
||||
class="status completed"
|
||||
>已完成</span>
|
||||
</div>
|
||||
<div class="log-content">
|
||||
<div v-if="logs.length === 0" class="empty">点击"开始执行"查看过程</div>
|
||||
<div v-for="(log, i) in logs.slice(-4)" :key="i" class="log-line" :class="log.type">
|
||||
<div
|
||||
v-if="logs.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
点击"开始执行"查看过程
|
||||
</div>
|
||||
<div
|
||||
v-for="(log, i) in logs.slice(-4)"
|
||||
:key="i"
|
||||
class="log-line"
|
||||
:class="log.type"
|
||||
>
|
||||
<span class="time">{{ log.time }}</span>
|
||||
<span class="icon">{{ log.icon }}</span>
|
||||
<span class="msg" v-html="log.message"></span>
|
||||
<span
|
||||
class="msg"
|
||||
v-html="log.message"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentThought" class="thought-box">
|
||||
<div class="box-header">🧠 正在思考</div>
|
||||
<div class="thought-content">{{ currentThought }}</div>
|
||||
<div
|
||||
v-if="currentThought"
|
||||
class="thought-box"
|
||||
>
|
||||
<div class="box-header">
|
||||
🧠 正在思考
|
||||
</div>
|
||||
<div class="thought-content">
|
||||
{{ currentThought }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 控制栏 -->
|
||||
<div class="control-bar">
|
||||
<button v-if="executionStatus === 'idle'" class="ctrl-btn primary" @click="startExecution">
|
||||
<button
|
||||
v-if="executionStatus === 'idle'"
|
||||
class="ctrl-btn primary"
|
||||
@click="startExecution"
|
||||
>
|
||||
▶ 开始执行
|
||||
</button>
|
||||
<button v-else-if="executionStatus === 'running'" class="ctrl-btn" disabled>
|
||||
<button
|
||||
v-else-if="executionStatus === 'running'"
|
||||
class="ctrl-btn"
|
||||
disabled
|
||||
>
|
||||
⏳ 执行中...
|
||||
</button>
|
||||
<button v-else class="ctrl-btn" @click="reset">
|
||||
<button
|
||||
v-else
|
||||
class="ctrl-btn"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
|
||||
<div v-if="executionStatus === 'completed'" class="stats">
|
||||
<div
|
||||
v-if="executionStatus === 'completed'"
|
||||
class="stats"
|
||||
>
|
||||
<span class="stat">{{ currentTaskData.steps.length }} 步骤</span>
|
||||
<span class="stat">{{ executionTime }}s</span>
|
||||
<span class="stat">{{ toolCalls }} 调用</span>
|
||||
</div>
|
||||
|
||||
<div class="step-dots">
|
||||
<span v-for="n in currentTaskData.steps.length" :key="n" :class="['dot', { active: stepStatus[n-1] === 'completed' }]"></span>
|
||||
<span
|
||||
v-for="n in currentTaskData.steps.length"
|
||||
:key="n"
|
||||
:class="['dot', { active: stepStatus[n-1] === 'completed' }]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="agent-chat-demo">
|
||||
<div class="header">
|
||||
<div class="title">🤖 Agent 初体验：从"能说"到"能做"</div>
|
||||
<div class="subtitle">体验 Agent 如何自动调用工具完成任务</div>
|
||||
<div class="title">
|
||||
🤖 Agent 初体验：从"能说"到"能做"
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
体验 Agent 如何自动调用工具完成任务
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景选择 -->
|
||||
@@ -22,43 +26,78 @@
|
||||
<div class="chat-window">
|
||||
<!-- 用户消息 -->
|
||||
<div class="message user">
|
||||
<div class="avatar">👤</div>
|
||||
<div class="bubble">{{ currentScenarioData.query }}</div>
|
||||
<div class="avatar">
|
||||
👤
|
||||
</div>
|
||||
<div class="bubble">
|
||||
{{ currentScenarioData.query }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LLM 回复（对比） -->
|
||||
<div class="message llm">
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="avatar">
|
||||
🤖
|
||||
</div>
|
||||
<div class="bubble llm-bubble">
|
||||
<div class="llm-label">普通 LLM</div>
|
||||
<div class="llm-content">{{ currentScenarioData.llmResponse }}</div>
|
||||
<div class="llm-label">
|
||||
普通 LLM
|
||||
</div>
|
||||
<div class="llm-content">
|
||||
{{ currentScenarioData.llmResponse }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent 回复 -->
|
||||
<div class="message agent">
|
||||
<div class="avatar agent-avatar">🦾</div>
|
||||
<div class="avatar agent-avatar">
|
||||
🦾
|
||||
</div>
|
||||
<div class="bubble agent-bubble">
|
||||
<div class="agent-label">Agent 智能体</div>
|
||||
<div class="agent-label">
|
||||
Agent 智能体
|
||||
</div>
|
||||
|
||||
<!-- 思考过程（可折叠） -->
|
||||
<div v-if="showThinking" class="thinking-section">
|
||||
<div class="thinking-header" @click="toggleThinking">
|
||||
<div
|
||||
v-if="showThinking"
|
||||
class="thinking-section"
|
||||
>
|
||||
<div
|
||||
class="thinking-header"
|
||||
@click="toggleThinking"
|
||||
>
|
||||
<span>🧠 思考过程</span>
|
||||
<span class="toggle-icon">{{ thinkingExpanded ? '▼' : '▶' }}</span>
|
||||
</div>
|
||||
<div v-if="thinkingExpanded" class="thinking-content">
|
||||
<div class="thought-item">{{ currentScenarioData.thinking }}</div>
|
||||
<div
|
||||
v-if="thinkingExpanded"
|
||||
class="thinking-content"
|
||||
>
|
||||
<div class="thought-item">
|
||||
{{ currentScenarioData.thinking }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工具调用（可折叠） -->
|
||||
<div v-if="showTools" ref="toolsSection" class="tools-section">
|
||||
<div class="tools-header" @click="toggleTools">
|
||||
<div
|
||||
v-if="showTools"
|
||||
ref="toolsSection"
|
||||
class="tools-section"
|
||||
>
|
||||
<div
|
||||
class="tools-header"
|
||||
@click="toggleTools"
|
||||
>
|
||||
<span>🔧 工具调用 ({{ currentScenarioData.tools.length }}个)</span>
|
||||
<span class="toggle-icon">{{ toolsExpanded ? '▼' : '▶' }}</span>
|
||||
</div>
|
||||
<div v-if="toolsExpanded" class="tools-list">
|
||||
<div
|
||||
v-if="toolsExpanded"
|
||||
class="tools-list"
|
||||
>
|
||||
<div
|
||||
v-for="(tool, idx) in currentScenarioData.tools"
|
||||
:key="idx"
|
||||
@@ -68,14 +107,27 @@
|
||||
>
|
||||
<div class="tool-status">
|
||||
<span v-if="toolExecuted > idx">✅</span>
|
||||
<span v-else-if="toolExecuting === idx" class="spinner">⏳</span>
|
||||
<span
|
||||
v-else-if="toolExecuting === idx"
|
||||
class="spinner"
|
||||
>⏳</span>
|
||||
<span v-else>⏸️</span>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">{{ tool.name }}</div>
|
||||
<div v-if="toolExecuted > idx || toolExecuting === idx" class="tool-detail">
|
||||
<div class="tool-name">
|
||||
{{ tool.name }}
|
||||
</div>
|
||||
<div
|
||||
v-if="toolExecuted > idx || toolExecuting === idx"
|
||||
class="tool-detail"
|
||||
>
|
||||
<code class="tool-params">{{ tool.params }}</code>
|
||||
<div v-if="toolExecuted > idx" class="tool-result">{{ tool.result }}</div>
|
||||
<div
|
||||
v-if="toolExecuted > idx"
|
||||
class="tool-result"
|
||||
>
|
||||
{{ tool.result }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,16 +135,31 @@
|
||||
</div>
|
||||
|
||||
<!-- 最终回复 -->
|
||||
<div v-if="showResponse" class="final-response">
|
||||
<div class="response-header">💬 最终回复</div>
|
||||
<div class="response-content">{{ currentScenarioData.agentResponse }}</div>
|
||||
<div
|
||||
v-if="showResponse"
|
||||
class="final-response"
|
||||
>
|
||||
<div class="response-header">
|
||||
💬 最终回复
|
||||
</div>
|
||||
<div class="response-content">
|
||||
{{ currentScenarioData.agentResponse }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 执行按钮 -->
|
||||
<button v-if="!isExecuting && !executionComplete" class="execute-btn" @click="startExecution">
|
||||
<button
|
||||
v-if="!isExecuting && !executionComplete"
|
||||
class="execute-btn"
|
||||
@click="startExecution"
|
||||
>
|
||||
▶ 让 Agent 执行
|
||||
</button>
|
||||
<button v-else-if="executionComplete" class="execute-btn reset" @click="reset">
|
||||
<button
|
||||
v-else-if="executionComplete"
|
||||
class="execute-btn reset"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置对话
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -6,21 +6,25 @@
|
||||
<div class="flow">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">任务回放：Agent 怎么一步步做完？</div>
|
||||
<div class="subtitle">点步骤，看“工具调用”和“中间结果”。</div>
|
||||
<div class="title">
|
||||
任务回放：Agent 怎么一步步做完？
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
点步骤，看“工具调用”和“中间结果”。
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
class="btn"
|
||||
@click="step = Math.max(0, step - 1)"
|
||||
:disabled="step === 0"
|
||||
@click="step = Math.max(0, step - 1)"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="step = Math.min(steps.length - 1, step + 1)"
|
||||
:disabled="step === steps.length - 1"
|
||||
@click="step = Math.min(steps.length - 1, step + 1)"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
@@ -41,15 +45,23 @@
|
||||
|
||||
<div class="grid">
|
||||
<div class="panel">
|
||||
<div class="panel-title">当前步骤</div>
|
||||
<div class="panel-body">{{ steps[step].desc }}</div>
|
||||
<div class="panel-title">
|
||||
当前步骤
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{{ steps[step].desc }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-title">工具调用（示意）</div>
|
||||
<div class="panel-title">
|
||||
工具调用（示意）
|
||||
</div>
|
||||
<pre><code>{{ steps[step].tool }}</code></pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-title">结果（示意）</div>
|
||||
<div class="panel-title">
|
||||
结果（示意）
|
||||
</div>
|
||||
<pre><code>{{ steps[step].result }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="tool-use-demo">
|
||||
<div class="header">
|
||||
<div class="title">🔧 揭秘：Agent 如何调用工具？</div>
|
||||
<div class="title">
|
||||
🔧 揭秘：Agent 如何调用工具？
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景选择 -->
|
||||
@@ -24,35 +26,73 @@
|
||||
</div>
|
||||
|
||||
<!-- 横向流程 -->
|
||||
<div ref="flowRowRef" class="flow-row">
|
||||
<div
|
||||
ref="flowRowRef"
|
||||
class="flow-row"
|
||||
>
|
||||
<!-- 步骤1: 理解 -->
|
||||
<div class="flow-card" :class="{ active: currentStep >= 1 }">
|
||||
<div class="card-num">1</div>
|
||||
<div
|
||||
class="flow-card"
|
||||
:class="{ active: currentStep >= 1 }"
|
||||
>
|
||||
<div class="card-num">
|
||||
1
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">分析需求</div>
|
||||
<div v-if="currentStep >= 1" class="card-content">
|
||||
<div class="card-title">
|
||||
分析需求
|
||||
</div>
|
||||
<div
|
||||
v-if="currentStep >= 1"
|
||||
class="card-content"
|
||||
>
|
||||
<div class="intent-box">
|
||||
<div class="intent-label">用户想要：</div>
|
||||
<div class="intent-value">{{ currentData.intent.type }}</div>
|
||||
<div class="intent-label">
|
||||
用户想要：
|
||||
</div>
|
||||
<div class="intent-value">
|
||||
{{ currentData.intent.type }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="extract-box">
|
||||
<div class="extract-label">提取信息：</div>
|
||||
<div class="extract-label">
|
||||
提取信息：
|
||||
</div>
|
||||
<div class="extract-tags">
|
||||
<span v-for="(e, i) in currentData.intent.entities" :key="i" class="entity">{{ e }}</span>
|
||||
<span
|
||||
v-for="(e, i) in currentData.intent.entities"
|
||||
:key="i"
|
||||
class="entity"
|
||||
>{{ e }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" :class="{ active: currentStep >= 2 }">→</div>
|
||||
<div
|
||||
class="flow-arrow"
|
||||
:class="{ active: currentStep >= 2 }"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- 步骤2: 选工具 -->
|
||||
<div class="flow-card" :class="{ active: currentStep >= 2 }">
|
||||
<div class="card-num">2</div>
|
||||
<div
|
||||
class="flow-card"
|
||||
:class="{ active: currentStep >= 2 }"
|
||||
>
|
||||
<div class="card-num">
|
||||
2
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">选择工具</div>
|
||||
<div v-if="currentStep >= 2" class="card-content">
|
||||
<div class="card-title">
|
||||
选择工具
|
||||
</div>
|
||||
<div
|
||||
v-if="currentStep >= 2"
|
||||
class="card-content"
|
||||
>
|
||||
<div class="tool-list">
|
||||
<div
|
||||
v-for="tool in currentData.availableTools.slice(0, 2)"
|
||||
@@ -62,34 +102,67 @@
|
||||
>
|
||||
<span>{{ tool.icon }}</span>
|
||||
<span class="tool-name">{{ tool.name }}</span>
|
||||
<span v-if="tool.selected" class="check">✓</span>
|
||||
<span
|
||||
v-if="tool.selected"
|
||||
class="check"
|
||||
>✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" :class="{ active: currentStep >= 3 }">→</div>
|
||||
<div
|
||||
class="flow-arrow"
|
||||
:class="{ active: currentStep >= 3 }"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- 步骤3: 构造参数 -->
|
||||
<div class="flow-card" :class="{ active: currentStep >= 3 }">
|
||||
<div class="card-num">3</div>
|
||||
<div
|
||||
class="flow-card"
|
||||
:class="{ active: currentStep >= 3 }"
|
||||
>
|
||||
<div class="card-num">
|
||||
3
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">构造参数</div>
|
||||
<div v-if="currentStep >= 3" class="card-content">
|
||||
<div class="card-title">
|
||||
构造参数
|
||||
</div>
|
||||
<div
|
||||
v-if="currentStep >= 3"
|
||||
class="card-content"
|
||||
>
|
||||
<code class="params-code">{{ JSON.stringify(currentData.finalParams.params) }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" :class="{ active: currentStep >= 4 }">→</div>
|
||||
<div
|
||||
class="flow-arrow"
|
||||
:class="{ active: currentStep >= 4 }"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- 步骤4: 执行 -->
|
||||
<div class="flow-card" :class="{ active: currentStep >= 4 }">
|
||||
<div class="card-num">4</div>
|
||||
<div
|
||||
class="flow-card"
|
||||
:class="{ active: currentStep >= 4 }"
|
||||
>
|
||||
<div class="card-num">
|
||||
4
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">执行返回</div>
|
||||
<div v-if="currentStep >= 4" class="card-content">
|
||||
<div class="card-title">
|
||||
执行返回
|
||||
</div>
|
||||
<div
|
||||
v-if="currentStep >= 4"
|
||||
class="card-content"
|
||||
>
|
||||
<div class="exec-flow">
|
||||
<span class="from">Agent</span>
|
||||
<span class="arrow">→</span>
|
||||
@@ -103,25 +176,44 @@
|
||||
</div>
|
||||
|
||||
<!-- 最终结果 -->
|
||||
<div v-if="currentStep >= 4" class="final-result">
|
||||
<div
|
||||
v-if="currentStep >= 4"
|
||||
class="final-result"
|
||||
>
|
||||
<span class="result-label">💬 回复：</span>
|
||||
<span class="result-text">{{ currentData.finalResponse }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 控制栏 -->
|
||||
<div class="control-bar">
|
||||
<button v-if="currentStep === 0" class="ctrl-btn primary" @click="nextStep">
|
||||
<button
|
||||
v-if="currentStep === 0"
|
||||
class="ctrl-btn primary"
|
||||
@click="nextStep"
|
||||
>
|
||||
▶ 开始演示
|
||||
</button>
|
||||
<button v-else-if="currentStep < 4" class="ctrl-btn primary" @click="nextStep">
|
||||
<button
|
||||
v-else-if="currentStep < 4"
|
||||
class="ctrl-btn primary"
|
||||
@click="nextStep"
|
||||
>
|
||||
下一步 →
|
||||
</button>
|
||||
<button v-else class="ctrl-btn" @click="reset">
|
||||
<button
|
||||
v-else
|
||||
class="ctrl-btn"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
|
||||
<div class="step-dots">
|
||||
<span v-for="n in 4" :key="n" :class="['dot', { active: currentStep >= n }]"></span>
|
||||
<span
|
||||
v-for="n in 4"
|
||||
:key="n"
|
||||
:class="['dot', { active: currentStep >= n }]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -8,12 +8,24 @@
|
||||
<div class="workflow">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">先玩一下：Agent 不是“聊天”，是“循环行动”</div>
|
||||
<div class="subtitle">它会反复：观察 → 计划 → 用工具 → 检查结果。</div>
|
||||
<div class="title">
|
||||
先玩一下：Agent 不是“聊天”，是“循环行动”
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
它会反复：观察 → 计划 → 用工具 → 检查结果。
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
<button class="btn primary" @click="nextRound">
|
||||
<button
|
||||
class="btn"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="nextRound"
|
||||
>
|
||||
下一轮 ({{ round }}/3)
|
||||
</button>
|
||||
</div>
|
||||
@@ -33,19 +45,27 @@
|
||||
|
||||
<div class="panels">
|
||||
<div class="panel">
|
||||
<div class="panel-title">任务</div>
|
||||
<div class="panel-title">
|
||||
任务
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
帮我找 3 篇 “Agent” 入门文章，并输出：标题 + 一句话总结。
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-title">这一轮发生了什么？</div>
|
||||
<div class="panel-body">{{ detail }}</div>
|
||||
<div class="panel-title">
|
||||
这一轮发生了什么？
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{{ detail }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="log">
|
||||
<div class="log-title">Agent 运行日志（示意）</div>
|
||||
<div class="log-title">
|
||||
Agent 运行日志（示意）
|
||||
</div>
|
||||
<pre><code>{{ logText }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,12 @@
|
||||
<div class="cmp">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">主流框架对比（先看“适配度”）</div>
|
||||
<div class="subtitle">先选你的关注点，再看推荐。</div>
|
||||
<div class="title">
|
||||
主流框架对比（先看“适配度”）
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
先选你的关注点，再看推荐。
|
||||
</div>
|
||||
</div>
|
||||
<div class="focus">
|
||||
<button
|
||||
@@ -34,17 +38,25 @@
|
||||
:key="fw.name"
|
||||
:class="['row', { best: fw.name === best }]"
|
||||
>
|
||||
<div class="name">{{ fw.name }}</div>
|
||||
<div class="name">
|
||||
{{ fw.name }}
|
||||
</div>
|
||||
<div>{{ fw.learn }}</div>
|
||||
<div>{{ fw.control }}</div>
|
||||
<div>{{ fw.multi }}</div>
|
||||
<div class="use">{{ fw.use }}</div>
|
||||
<div class="use">
|
||||
{{ fw.use }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rec">
|
||||
<div class="rec-title">此刻更推荐：{{ best }}</div>
|
||||
<div class="rec-body">{{ reason }}</div>
|
||||
<div class="rec-title">
|
||||
此刻更推荐：{{ best }}
|
||||
</div>
|
||||
<div class="rec-body">
|
||||
{{ reason }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,13 +6,19 @@
|
||||
<div class="sel">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="title">三问选框架</div>
|
||||
<div class="subtitle">目标：先跑通一个最小 Agent，再逐步增强。</div>
|
||||
<div class="title">
|
||||
三问选框架
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
目标：先跑通一个最小 Agent，再逐步增强。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q">
|
||||
<div class="q-title">1) 你更在乎什么？</div>
|
||||
<div class="q-title">
|
||||
1) 你更在乎什么？
|
||||
</div>
|
||||
<div class="opts">
|
||||
<button
|
||||
v-for="o in q1"
|
||||
@@ -26,7 +32,9 @@
|
||||
</div>
|
||||
|
||||
<div class="q">
|
||||
<div class="q-title">2) 你的任务像哪种？</div>
|
||||
<div class="q-title">
|
||||
2) 你的任务像哪种？
|
||||
</div>
|
||||
<div class="opts">
|
||||
<button
|
||||
v-for="o in q2"
|
||||
@@ -40,7 +48,9 @@
|
||||
</div>
|
||||
|
||||
<div class="q">
|
||||
<div class="q-title">3) 需要多 Agent 分工吗？</div>
|
||||
<div class="q-title">
|
||||
3) 需要多 Agent 分工吗？
|
||||
</div>
|
||||
<div class="opts">
|
||||
<button
|
||||
v-for="o in q3"
|
||||
@@ -54,10 +64,18 @@
|
||||
</div>
|
||||
|
||||
<div class="result">
|
||||
<div class="r-title">推荐：{{ rec.name }}</div>
|
||||
<div class="r-body">{{ rec.reason }}</div>
|
||||
<div class="r-note"><strong>注意：</strong>{{ rec.note }}</div>
|
||||
<div class="r-next"><strong>下一步：</strong>{{ rec.next }}</div>
|
||||
<div class="r-title">
|
||||
推荐：{{ rec.name }}
|
||||
</div>
|
||||
<div class="r-body">
|
||||
{{ rec.reason }}
|
||||
</div>
|
||||
<div class="r-note">
|
||||
<strong>注意：</strong>{{ rec.note }}
|
||||
</div>
|
||||
<div class="r-next">
|
||||
<strong>下一步：</strong>{{ rec.next }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,15 +1,24 @@
|
||||
<template>
|
||||
<div class="ai-evolution-timeline-demo">
|
||||
<el-card shadow="hover" class="main-card">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="main-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>AI 进化时间轴</h3>
|
||||
<p class="subtitle">点击不同时期，查看 AI 是如何一步步进化的</p>
|
||||
<p class="subtitle">
|
||||
点击不同时期，查看 AI 是如何一步步进化的
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="demo-content">
|
||||
<el-tabs v-model="activeEraName" type="border-card" class="timeline-tabs">
|
||||
<el-tabs
|
||||
v-model="activeEraName"
|
||||
type="border-card"
|
||||
class="timeline-tabs"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(era, index) in eras"
|
||||
:key="index"
|
||||
@@ -18,19 +27,32 @@
|
||||
>
|
||||
<div class="era-content">
|
||||
<div class="era-header">
|
||||
<el-tag effect="dark" size="large" class="year-tag">{{ era.year }}</el-tag>
|
||||
<el-tag
|
||||
effect="dark"
|
||||
size="large"
|
||||
class="year-tag"
|
||||
>
|
||||
{{ era.year }}
|
||||
</el-tag>
|
||||
<span class="era-desc-short">{{ era.desc }}</span>
|
||||
</div>
|
||||
|
||||
<div class="era-body">
|
||||
<p class="full-desc">{{ era.fullDesc }}</p>
|
||||
<p class="full-desc">
|
||||
{{ era.fullDesc }}
|
||||
</p>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-column">
|
||||
<span class="column-title">💡 核心特点</span>
|
||||
<ul class="key-points-list">
|
||||
<li v-for="(point, i) in era.keyPoints" :key="i">
|
||||
<el-icon class="point-icon"><CaretRight /></el-icon>
|
||||
<li
|
||||
v-for="(point, i) in era.keyPoints"
|
||||
:key="i"
|
||||
>
|
||||
<el-icon class="point-icon">
|
||||
<CaretRight />
|
||||
</el-icon>
|
||||
{{ point }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,27 +1,54 @@
|
||||
<template>
|
||||
<div class="evolution-demo">
|
||||
<el-card class="main-card" shadow="hover">
|
||||
<el-card
|
||||
class="main-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<template #header>
|
||||
<div class="header-container">
|
||||
<div class="title-area">
|
||||
<span class="main-title">AI 进化模拟器</span>
|
||||
</div>
|
||||
<el-steps :active="currentStage" finish-status="success" align-center class="compact-steps" simple>
|
||||
<el-step v-for="stage in stages" :key="stage.id" :title="stage.label" />
|
||||
<el-steps
|
||||
:active="currentStage"
|
||||
finish-status="success"
|
||||
align-center
|
||||
class="compact-steps"
|
||||
simple
|
||||
>
|
||||
<el-step
|
||||
v-for="stage in stages"
|
||||
:key="stage.id"
|
||||
:title="stage.label"
|
||||
/>
|
||||
</el-steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Stage 1: Rule Based (Traffic Light Example) -->
|
||||
<div v-if="currentStage === 0" class="stage-pane">
|
||||
<el-alert type="info" :closable="false" show-icon class="compact-alert mb-2">
|
||||
<template #title><span class="alert-title">阶段一：规则时代 (Rule-Based)</span></template>
|
||||
<template #default><span class="alert-desc">就像教小孩：如果看到红灯，就停下。</span></template>
|
||||
<div
|
||||
v-if="currentStage === 0"
|
||||
class="stage-pane"
|
||||
>
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="compact-alert mb-2"
|
||||
>
|
||||
<template #title>
|
||||
<span class="alert-title">阶段一：规则时代 (Rule-Based)</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<span class="alert-desc">就像教小孩：如果看到红灯，就停下。</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<div class="game-area-grid">
|
||||
<div class="panel left-panel">
|
||||
<div class="panel-header">规则库 (Code)</div>
|
||||
<div class="panel-header">
|
||||
规则库 (Code)
|
||||
</div>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="keyword">function</span> <span class="function">decideTrafficLight</span>(color) {
|
||||
@@ -35,27 +62,55 @@
|
||||
<div class="code-line indent">
|
||||
<span class="keyword">else if</span> (color === <span class="string">'green'</span>) <span class="keyword">return</span> <span class="string">'go'</span>
|
||||
</div>
|
||||
<div class="code-line">}</div>
|
||||
<div class="code-line">
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel right-panel">
|
||||
<div class="panel-header">测试输入</div>
|
||||
<div class="panel-header">
|
||||
测试输入
|
||||
</div>
|
||||
<div class="input-controls">
|
||||
<el-select v-model="ruleColor" size="small" style="width: 120px;">
|
||||
<el-option value="red" label="🔴 红灯" />
|
||||
<el-option value="yellow" label="🟡 黄灯" />
|
||||
<el-option value="green" label="🟢 绿灯" />
|
||||
<el-option value="blue" label="🔵 蓝灯" />
|
||||
<el-select
|
||||
v-model="ruleColor"
|
||||
size="small"
|
||||
style="width: 120px;"
|
||||
>
|
||||
<el-option
|
||||
value="red"
|
||||
label="🔴 红灯"
|
||||
/>
|
||||
<el-option
|
||||
value="yellow"
|
||||
label="🟡 黄灯"
|
||||
/>
|
||||
<el-option
|
||||
value="green"
|
||||
label="🟢 绿灯"
|
||||
/>
|
||||
<el-option
|
||||
value="blue"
|
||||
label="🔵 蓝灯"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="arrow">→</div>
|
||||
<div class="arrow">
|
||||
→
|
||||
</div>
|
||||
<el-tag :type="ruleResult === 'stop' ? 'danger' : ruleResult === 'caution' ? 'warning' : ruleResult === 'go' ? 'success' : 'info'">
|
||||
{{ ruleResult }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="hint-text" v-if="ruleResult === 'Unknown'">
|
||||
<div
|
||||
v-if="ruleResult === 'Unknown'"
|
||||
class="hint-text"
|
||||
>
|
||||
规则库中没有定义"蓝灯"，所以系统不知道该做什么。这就是规则系统的局限性：无法处理未定义的规则。
|
||||
</div>
|
||||
<div class="hint-text" v-else>
|
||||
<div
|
||||
v-else
|
||||
class="hint-text"
|
||||
>
|
||||
系统严格按照预定义的规则执行指令。
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,122 +118,245 @@
|
||||
</div>
|
||||
|
||||
<!-- Stage 2: Machine Learning (Interactive 2D Plot) -->
|
||||
<div v-else-if="currentStage === 1" class="stage-pane">
|
||||
<el-alert type="info" :closable="false" show-icon class="compact-alert mb-2">
|
||||
<template #title><span class="alert-title">阶段二：机器学习 (Machine Learning)</span></template>
|
||||
<template #default><span class="alert-desc">点击画布添加数据点，训练模型自动寻找分类边界 (Decision Boundary)。</span></template>
|
||||
<div
|
||||
v-else-if="currentStage === 1"
|
||||
class="stage-pane"
|
||||
>
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="compact-alert mb-2"
|
||||
>
|
||||
<template #title>
|
||||
<span class="alert-title">阶段二：机器学习 (Machine Learning)</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<span class="alert-desc">点击画布添加数据点，训练模型自动寻找分类边界 (Decision Boundary)。</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<div class="game-area-grid">
|
||||
<div class="panel left-panel canvas-container" @click="addPoint">
|
||||
<!-- Simple SVG Plot -->
|
||||
<svg width="100%" height="200" class="ml-plot">
|
||||
<!-- Background Regions (Visible after training) -->
|
||||
<rect v-if="modelTrained" x="0" y="0" width="100%" height="100%" :fill="boundaryColor" />
|
||||
<div
|
||||
class="panel left-panel canvas-container"
|
||||
@click="addPoint"
|
||||
>
|
||||
<!-- Simple SVG Plot -->
|
||||
<svg
|
||||
width="100%"
|
||||
height="200"
|
||||
class="ml-plot"
|
||||
>
|
||||
<!-- Background Regions (Visible after training) -->
|
||||
<rect
|
||||
v-if="modelTrained"
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:fill="boundaryColor"
|
||||
/>
|
||||
|
||||
<!-- Decision Line -->
|
||||
<line v-if="modelTrained" :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2" stroke="#333" stroke-width="2" stroke-dasharray="4" />
|
||||
<!-- Decision Line -->
|
||||
<line
|
||||
v-if="modelTrained"
|
||||
:x1="line.x1"
|
||||
:y1="line.y1"
|
||||
:x2="line.x2"
|
||||
:y2="line.y2"
|
||||
stroke="#333"
|
||||
stroke-width="2"
|
||||
stroke-dasharray="4"
|
||||
/>
|
||||
|
||||
<!-- Points -->
|
||||
<circle
|
||||
v-for="(p, i) in points"
|
||||
:key="i"
|
||||
:cx="p.x"
|
||||
:cy="p.y"
|
||||
r="6"
|
||||
:fill="p.type === 'A' ? '#409eff' : '#e6a23c'"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
<div class="canvas-hint" v-if="points.length === 0">👆 点击此处添加数据点</div>
|
||||
<!-- Points -->
|
||||
<circle
|
||||
v-for="(p, i) in points"
|
||||
:key="i"
|
||||
:cx="p.x"
|
||||
:cy="p.y"
|
||||
r="6"
|
||||
:fill="p.type === 'A' ? '#409eff' : '#e6a23c'"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
v-if="points.length === 0"
|
||||
class="canvas-hint"
|
||||
>
|
||||
👆 点击此处添加数据点
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel right-panel">
|
||||
<div class="panel-header">控制面板</div>
|
||||
<div class="panel-header">
|
||||
控制面板
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<span class="label">当前类别:</span>
|
||||
<el-radio-group v-model="currentClass" size="small">
|
||||
<el-radio-button label="A"><span style="color: #409eff">● 蓝类</span></el-radio-button>
|
||||
<el-radio-button label="B"><span style="color: #e6a23c">● 橙类</span></el-radio-button>
|
||||
<el-radio-group
|
||||
v-model="currentClass"
|
||||
size="small"
|
||||
>
|
||||
<el-radio-button label="A">
|
||||
<span style="color: #409eff">● 蓝类</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button label="B">
|
||||
<span style="color: #e6a23c">● 橙类</span>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="control-group mt-2">
|
||||
<el-button type="primary" size="small" @click="trainLinearModel" :disabled="points.length < 2">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="points.length < 2"
|
||||
@click="trainLinearModel"
|
||||
>
|
||||
⚡ 开始训练 (Fit)
|
||||
</el-button>
|
||||
<el-button size="small" :icon="Delete" circle @click="clearPoints" />
|
||||
<el-button
|
||||
size="small"
|
||||
:icon="Delete"
|
||||
circle
|
||||
@click="clearPoints"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stats-info mt-2">
|
||||
<p v-if="!modelTrained" class="text-desc">机器学习不再依赖硬编码规则，而是通过统计学方法（如寻找中心点或线性回归）在数据之间划出一条"界线"。试试在不同位置添加点，看看界线如何变化。</p>
|
||||
<p v-else class="text-desc">模型已训练！它找到了一条最佳分割线。新进来的数据将根据它在红区还是蓝区被自动分类。</p>
|
||||
<p
|
||||
v-if="!modelTrained"
|
||||
class="text-desc"
|
||||
>
|
||||
机器学习不再依赖硬编码规则，而是通过统计学方法（如寻找中心点或线性回归）在数据之间划出一条"界线"。试试在不同位置添加点，看看界线如何变化。
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="text-desc"
|
||||
>
|
||||
模型已训练！它找到了一条最佳分割线。新进来的数据将根据它在红区还是蓝区被自动分类。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 3: Deep Learning (3x3 Grid Feature Extraction) -->
|
||||
<div v-else class="stage-pane">
|
||||
<el-alert type="info" :closable="false" show-icon class="compact-alert mb-2">
|
||||
<template #title><span class="alert-title">阶段三：深度学习 (Deep Learning)</span></template>
|
||||
<template #default><span class="alert-desc">神经网络通过多层结构自动提取特征（Feature Extraction）。点击格子绘制图案。</span></template>
|
||||
<div
|
||||
v-else
|
||||
class="stage-pane"
|
||||
>
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="compact-alert mb-2"
|
||||
>
|
||||
<template #title>
|
||||
<span class="alert-title">阶段三：深度学习 (Deep Learning)</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<span class="alert-desc">神经网络通过多层结构自动提取特征（Feature Extraction）。点击格子绘制图案。</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<div class="game-area-grid">
|
||||
<div class="panel left-panel grid-container">
|
||||
<div class="pixel-grid">
|
||||
<div
|
||||
v-for="(pixel, i) in pixels"
|
||||
:key="i"
|
||||
class="pixel"
|
||||
:class="{ active: pixel }"
|
||||
@click="togglePixel(i)"
|
||||
></div>
|
||||
</div>
|
||||
<div class="grid-actions">
|
||||
<el-button size="small" link @click="preset('x')">❌ X型</el-button>
|
||||
<el-button size="small" link @click="preset('plus')">➕ 十字</el-button>
|
||||
<el-button size="small" link @click="clearPixels">清空</el-button>
|
||||
</div>
|
||||
<div class="pixel-grid">
|
||||
<div
|
||||
v-for="(pixel, i) in pixels"
|
||||
:key="i"
|
||||
class="pixel"
|
||||
:class="{ active: pixel }"
|
||||
@click="togglePixel(i)"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
@click="preset('x')"
|
||||
>
|
||||
❌ X型
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
@click="preset('plus')"
|
||||
>
|
||||
➕ 十字
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
@click="clearPixels"
|
||||
>
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel right-panel">
|
||||
<div class="panel-header">神经网络层级透视</div>
|
||||
<div class="panel-header">
|
||||
神经网络层级透视
|
||||
</div>
|
||||
|
||||
<!-- Visualization of Layers -->
|
||||
<div class="network-viz">
|
||||
<div class="layer input-layer">
|
||||
<div class="layer-label">输入层 (Pixels)</div>
|
||||
<div class="layer-label">
|
||||
输入层 (Pixels)
|
||||
</div>
|
||||
<div class="nodes">
|
||||
<span v-for="n in 9" :key="n" class="node mini" :class="{active: pixels[n-1]}"></span>
|
||||
<span
|
||||
v-for="n in 9"
|
||||
:key="n"
|
||||
class="node mini"
|
||||
:class="{active: pixels[n-1]}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">⬇️ 卷积/提取特征</div>
|
||||
<div class="arrow-down">
|
||||
⬇️ 卷积/提取特征
|
||||
</div>
|
||||
|
||||
<div class="layer hidden-layer">
|
||||
<div class="layer-label">隐藏层 (Features)</div>
|
||||
<div class="layer-label">
|
||||
隐藏层 (Features)
|
||||
</div>
|
||||
<div class="feature-detectors">
|
||||
<div class="feature" :class="{detected: features.center}">
|
||||
<div
|
||||
class="feature"
|
||||
:class="{detected: features.center}"
|
||||
>
|
||||
<span class="f-icon">⏺</span> 中心点
|
||||
</div>
|
||||
<div class="feature" :class="{detected: features.corners}">
|
||||
<div
|
||||
class="feature"
|
||||
:class="{detected: features.corners}"
|
||||
>
|
||||
<span class="f-icon">Corners</span> 四角
|
||||
</div>
|
||||
<div class="feature" :class="{detected: features.cross}">
|
||||
<div
|
||||
class="feature"
|
||||
:class="{detected: features.cross}"
|
||||
>
|
||||
<span class="f-icon">➕</span> 交叉
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">⬇️ 输出层</div>
|
||||
<div class="arrow-down">
|
||||
⬇️ 输出层
|
||||
</div>
|
||||
|
||||
<div class="layer output-layer">
|
||||
<div class="prediction-box">
|
||||
识别结果: <span class="result-text">{{ prediction }}</span>
|
||||
</div>
|
||||
<div class="prediction-box">
|
||||
识别结果: <span class="result-text">{{ prediction }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,12 +365,24 @@
|
||||
|
||||
<!-- Footer Navigation -->
|
||||
<div class="footer-nav mt-2 flex justify-end">
|
||||
<el-button-group>
|
||||
<el-button size="small" :disabled="currentStage === 0" @click="currentStage--">上一步</el-button>
|
||||
<el-button size="small" type="primary" :disabled="currentStage === 2" @click="currentStage++">下一步</el-button>
|
||||
<el-button-group>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="currentStage === 0"
|
||||
@click="currentStage--"
|
||||
>
|
||||
上一步
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="currentStage === 2"
|
||||
@click="currentStage++"
|
||||
>
|
||||
下一步
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>👁️ 注意力机制演示</h4>
|
||||
<p class="subtitle">点击词语，观察它如何"关注"句子中的其他词</p>
|
||||
<p class="subtitle">
|
||||
点击词语，观察它如何"关注"句子中的其他词
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -22,13 +24,18 @@
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="attention-bars" v-if="activeIndex !== null">
|
||||
<div
|
||||
v-if="activeIndex !== null"
|
||||
class="attention-bars"
|
||||
>
|
||||
<div
|
||||
v-for="(attention, index) in attentionWeights"
|
||||
:key="index"
|
||||
class="attention-item"
|
||||
>
|
||||
<div class="word-label">{{ attention.word }}</div>
|
||||
<div class="word-label">
|
||||
{{ attention.word }}
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="Math.round(attention.weight * 100)"
|
||||
:status="attention.weight > 0.5 ? 'exception' : ''"
|
||||
@@ -45,7 +52,10 @@
|
||||
</div>
|
||||
|
||||
<el-collapse-transition>
|
||||
<div v-if="activeIndex !== null" class="explanation-panel">
|
||||
<div
|
||||
v-if="activeIndex !== null"
|
||||
class="explanation-panel"
|
||||
>
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
|
||||
@@ -4,15 +4,23 @@
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>🔄 反向传播演示</h4>
|
||||
<p class="subtitle">观察神经网络如何通过误差反向调整权重</p>
|
||||
<p class="subtitle">
|
||||
观察神经网络如何通过误差反向调整权重
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="network-view">
|
||||
<svg class="network-svg" viewBox="0 0 600 300">
|
||||
<svg
|
||||
class="network-svg"
|
||||
viewBox="0 0 600 300"
|
||||
>
|
||||
<!-- Layers visualization -->
|
||||
<g v-for="(layer, lIndex) in 3" :key="lIndex">
|
||||
<g
|
||||
v-for="(layer, lIndex) in 3"
|
||||
:key="lIndex"
|
||||
>
|
||||
<text
|
||||
:x="100 + lIndex * 200"
|
||||
y="20"
|
||||
@@ -54,7 +62,11 @@
|
||||
<el-divider />
|
||||
|
||||
<div class="controls-panel">
|
||||
<el-steps :active="currentStep" align-center finish-status="success">
|
||||
<el-steps
|
||||
:active="currentStep"
|
||||
align-center
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
@@ -84,13 +96,16 @@
|
||||
/>
|
||||
|
||||
<div class="action-buttons mt-4 flex justify-center gap-4">
|
||||
<el-button @click="resetDemo" :disabled="currentStep === 0">
|
||||
<el-button
|
||||
:disabled="currentStep === 0"
|
||||
@click="resetDemo"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="nextStep"
|
||||
:disabled="currentStep >= 4"
|
||||
@click="nextStep"
|
||||
>
|
||||
{{ currentStep < 4 ? '下一步' : '完成' }}
|
||||
</el-button>
|
||||
|
||||
+23
-13
@@ -4,7 +4,9 @@
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>🎯 组合爆炸模拟器</h4>
|
||||
<p class="subtitle">亲手体验"规则指数增长"的恐怖</p>
|
||||
<p class="subtitle">
|
||||
亲手体验"规则指数增长"的恐怖
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -38,9 +40,7 @@
|
||||
<div class="control-item">
|
||||
<div class="label-row">
|
||||
<span class="label-icon">🔢</span>
|
||||
<span class="label-text"
|
||||
>每个特征的可能值: {{ valuesPerFeature }}</span
|
||||
>
|
||||
<span class="label-text">每个特征的可能值: {{ valuesPerFeature }}</span>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="valuesPerFeature"
|
||||
@@ -62,12 +62,14 @@
|
||||
value-style="font-weight: bold; color: var(--el-color-primary)"
|
||||
>
|
||||
<template #suffix>
|
||||
<span class="formula-suffix"
|
||||
>= {{ valuesPerFeature }}<sup>{{ featureCount }}</sup></span
|
||||
>
|
||||
<span class="formula-suffix">= {{ valuesPerFeature }}<sup>{{ featureCount }}</sup></span>
|
||||
</template>
|
||||
</el-statistic>
|
||||
<el-tag :type="complexityInfo.type" effect="dark" class="mt-2">
|
||||
<el-tag
|
||||
:type="complexityInfo.type"
|
||||
effect="dark"
|
||||
class="mt-2"
|
||||
>
|
||||
{{ complexityInfo.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
@@ -75,30 +77,38 @@
|
||||
<div class="action-buttons mt-4">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="addRule"
|
||||
:disabled="ruleCount >= maxRules"
|
||||
@click="addRule"
|
||||
>
|
||||
✨ 添加规则 ({{ ruleCount }}/{{ maxRules }})
|
||||
</el-button>
|
||||
<el-button @click="resetRules">🔄 重置</el-button>
|
||||
<el-button @click="resetRules">
|
||||
🔄 重置
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="rules-container mt-4">
|
||||
<transition-group name="el-zoom-in-center" tag="div" class="rules-grid">
|
||||
<transition-group
|
||||
name="el-zoom-in-center"
|
||||
tag="div"
|
||||
class="rules-grid"
|
||||
>
|
||||
<div
|
||||
v-for="(rule, index) in displayedRules"
|
||||
:key="rule.id"
|
||||
class="rule-card-mini"
|
||||
:style="{ borderColor: rule.color }"
|
||||
>
|
||||
<div class="rule-idx">#{{ index + 1 }}</div>
|
||||
<div class="rule-idx">
|
||||
#{{ index + 1 }}
|
||||
</div>
|
||||
<div class="rule-dots">
|
||||
<span
|
||||
v-for="d in 3"
|
||||
:key="d"
|
||||
class="dot"
|
||||
:style="{ backgroundColor: rule.color }"
|
||||
></span>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
+62
-21
@@ -4,14 +4,19 @@
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>🎯 判别式 vs 生成式 AI</h4>
|
||||
<p class="subtitle">理解两种不同的 AI 范式</p>
|
||||
<p class="subtitle">
|
||||
理解两种不同的 AI 范式
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="comparison-container">
|
||||
<el-row :gutter="20">
|
||||
<!-- Discriminative AI -->
|
||||
<el-col :xs="24" :sm="12">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
>
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="ai-panel discriminative"
|
||||
@@ -19,15 +24,24 @@
|
||||
@click="mode = 'discriminative'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<div class="icon">🔍</div>
|
||||
<div class="icon">
|
||||
🔍
|
||||
</div>
|
||||
<h5>判别式 AI</h5>
|
||||
<el-tag size="small" type="success">分类/识别</el-tag>
|
||||
<el-tag
|
||||
size="small"
|
||||
type="success"
|
||||
>
|
||||
分类/识别
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<div class="input-output">
|
||||
<div class="io-box input">
|
||||
<div class="io-label">输入</div>
|
||||
<div class="io-label">
|
||||
输入
|
||||
</div>
|
||||
<div class="io-content">
|
||||
<div class="svg-placeholder green">
|
||||
<span class="svg-text">猫图</span>
|
||||
@@ -40,10 +54,19 @@
|
||||
</div>
|
||||
|
||||
<div class="io-box output">
|
||||
<div class="io-label">输出</div>
|
||||
<div class="io-label">
|
||||
输出
|
||||
</div>
|
||||
<div class="io-content">
|
||||
<el-tag effect="dark" type="success">这是猫</el-tag>
|
||||
<div class="probability">置信度: 98%</div>
|
||||
<el-tag
|
||||
effect="dark"
|
||||
type="success"
|
||||
>
|
||||
这是猫
|
||||
</el-tag>
|
||||
<div class="probability">
|
||||
置信度: 98%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,8 +75,6 @@
|
||||
<h6>典型应用:</h6>
|
||||
<div class="example-tags">
|
||||
<el-tag
|
||||
size="small"
|
||||
effect="plain"
|
||||
v-for="tag in [
|
||||
'图像分类',
|
||||
'垃圾邮件过滤',
|
||||
@@ -61,8 +82,11 @@
|
||||
'人脸识别'
|
||||
]"
|
||||
:key="tag"
|
||||
>{{ tag }}</el-tag
|
||||
size="small"
|
||||
effect="plain"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,7 +94,10 @@
|
||||
</el-col>
|
||||
|
||||
<!-- Generative AI -->
|
||||
<el-col :xs="24" :sm="12">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
>
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="ai-panel generative"
|
||||
@@ -78,17 +105,28 @@
|
||||
@click="mode = 'generative'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<div class="icon">✨</div>
|
||||
<div class="icon">
|
||||
✨
|
||||
</div>
|
||||
<h5>生成式 AI</h5>
|
||||
<el-tag size="small" type="primary">创造/生成</el-tag>
|
||||
<el-tag
|
||||
size="small"
|
||||
type="primary"
|
||||
>
|
||||
创造/生成
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<div class="input-output">
|
||||
<div class="io-box input">
|
||||
<div class="io-label">输入</div>
|
||||
<div class="io-label">
|
||||
输入
|
||||
</div>
|
||||
<div class="io-content">
|
||||
<div class="prompt-text">"一只戴墨镜的猫"</div>
|
||||
<div class="prompt-text">
|
||||
"一只戴墨镜的猫"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -97,7 +135,9 @@
|
||||
</div>
|
||||
|
||||
<div class="io-box output">
|
||||
<div class="io-label">输出</div>
|
||||
<div class="io-label">
|
||||
输出
|
||||
</div>
|
||||
<div class="io-content">
|
||||
<div class="svg-placeholder blue">
|
||||
<span class="svg-text">生成图像 ✓</span>
|
||||
@@ -110,9 +150,6 @@
|
||||
<h6>典型应用:</h6>
|
||||
<div class="example-tags">
|
||||
<el-tag
|
||||
size="small"
|
||||
effect="plain"
|
||||
type="primary"
|
||||
v-for="tag in [
|
||||
'ChatGPT',
|
||||
'Midjourney',
|
||||
@@ -120,8 +157,12 @@
|
||||
'音乐创作'
|
||||
]"
|
||||
:key="tag"
|
||||
>{{ tag }}</el-tag
|
||||
size="small"
|
||||
effect="plain"
|
||||
type="primary"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="gpt-evolution-demo">
|
||||
<el-card shadow="hover" class="main-card">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="main-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="title">🚀 GPT 进化历程</span>
|
||||
@@ -10,7 +13,12 @@
|
||||
|
||||
<div class="demo-content">
|
||||
<!-- Replace Vertical Timeline with Horizontal Tabs -->
|
||||
<el-tabs v-model="activeModelName" type="card" class="evolution-tabs" @tab-click="handleTabClick">
|
||||
<el-tabs
|
||||
v-model="activeModelName"
|
||||
type="card"
|
||||
class="evolution-tabs"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(model, index) in gptModels"
|
||||
:key="index"
|
||||
@@ -19,7 +27,12 @@
|
||||
>
|
||||
<div class="model-view">
|
||||
<div class="model-info-header">
|
||||
<el-tag effect="dark" size="large">{{ model.year }}</el-tag>
|
||||
<el-tag
|
||||
effect="dark"
|
||||
size="large"
|
||||
>
|
||||
{{ model.year }}
|
||||
</el-tag>
|
||||
<div class="model-stats">
|
||||
<div class="stat-item">
|
||||
<span class="label">参数量</span>
|
||||
@@ -53,7 +66,9 @@
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-divider class="compact-divider">进化趋势</el-divider>
|
||||
<el-divider class="compact-divider">
|
||||
进化趋势
|
||||
</el-divider>
|
||||
|
||||
<div class="evolution-insight">
|
||||
<div class="insight-row">
|
||||
|
||||
+51
-14
@@ -12,23 +12,41 @@
|
||||
|
||||
<div class="controls mb-4 flex gap-2">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</el-button>
|
||||
<el-button @click="prev" :disabled="step <= 1">上一步</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="next"
|
||||
:disabled="step !== 0"
|
||||
@click="start"
|
||||
>
|
||||
开始
|
||||
</el-button>
|
||||
<el-button
|
||||
:disabled="step <= 1"
|
||||
@click="prev"
|
||||
>
|
||||
上一步
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
<el-button @click="reset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<div v-if="step > 0" class="progress mb-4">
|
||||
<el-steps :active="step" align-center finish-status="success">
|
||||
<div
|
||||
v-if="step > 0"
|
||||
class="progress mb-4"
|
||||
>
|
||||
<el-steps
|
||||
:active="step"
|
||||
align-center
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step title="输入层" />
|
||||
<el-step title="隐藏层" />
|
||||
<el-step title="输出层" />
|
||||
@@ -39,14 +57,28 @@
|
||||
</div>
|
||||
|
||||
<div class="grid-layout">
|
||||
<el-card shadow="never" class="viz-card">
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="viz-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-title">网络结构</div>
|
||||
<div class="card-title">
|
||||
网络结构
|
||||
</div>
|
||||
</template>
|
||||
<div class="network-container">
|
||||
<svg class="network-svg" :viewBox="`0 0 ${svgWidth} ${svgHeight}`">
|
||||
<svg
|
||||
class="network-svg"
|
||||
:viewBox="`0 0 ${svgWidth} ${svgHeight}`"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="conn" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<linearGradient
|
||||
id="conn"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
:style="{
|
||||
@@ -115,9 +147,14 @@
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="info-card">
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="info-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-title">每一层在做什么</div>
|
||||
<div class="card-title">
|
||||
每一层在做什么
|
||||
</div>
|
||||
</template>
|
||||
<div class="layers-info">
|
||||
<el-collapse v-model="activeCollapse">
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>感知机 (Perceptron) 演示</h4>
|
||||
<p class="subtitle">最简单的神经元：输入 x 权重 + 偏置 = 输出</p>
|
||||
<p class="subtitle">
|
||||
最简单的神经元：输入 x 权重 + 偏置 = 输出
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -12,12 +14,24 @@
|
||||
<!-- Inputs -->
|
||||
<div class="col inputs-col">
|
||||
<div class="node-wrapper">
|
||||
<el-tag effect="dark">输入 A</el-tag>
|
||||
<el-input-number v-model="x1" size="small" :step="1" />
|
||||
<el-tag effect="dark">
|
||||
输入 A
|
||||
</el-tag>
|
||||
<el-input-number
|
||||
v-model="x1"
|
||||
size="small"
|
||||
:step="1"
|
||||
/>
|
||||
</div>
|
||||
<div class="node-wrapper">
|
||||
<el-tag effect="dark">输入 B</el-tag>
|
||||
<el-input-number v-model="x2" size="small" :step="1" />
|
||||
<el-tag effect="dark">
|
||||
输入 B
|
||||
</el-tag>
|
||||
<el-input-number
|
||||
v-model="x2"
|
||||
size="small"
|
||||
:step="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,7 +44,7 @@
|
||||
height: Math.abs(w1) * 2 + 2 + 'px',
|
||||
opacity: Math.abs(w1) / 5 + 0.2
|
||||
}"
|
||||
></div>
|
||||
/>
|
||||
<div class="weight-control">
|
||||
<span class="label">权重 A: {{ w1 }}</span>
|
||||
<el-slider
|
||||
@@ -50,7 +64,7 @@
|
||||
height: Math.abs(w2) * 2 + 2 + 'px',
|
||||
opacity: Math.abs(w2) / 5 + 0.2
|
||||
}"
|
||||
></div>
|
||||
/>
|
||||
<div class="weight-control">
|
||||
<span class="label">权重 B: {{ w2 }}</span>
|
||||
<el-slider
|
||||
@@ -67,23 +81,39 @@
|
||||
<!-- Neuron Body -->
|
||||
<div class="col neuron-col">
|
||||
<div class="neuron-circle">
|
||||
<div class="sum-symbol">总分</div>
|
||||
<div class="sum-value">{{ weightedSum.toFixed(1) }}</div>
|
||||
<div class="sum-symbol">
|
||||
总分
|
||||
</div>
|
||||
<div class="sum-value">
|
||||
{{ weightedSum.toFixed(1) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bias-control mt-2">
|
||||
<span class="label">基础分 (Bias):</span>
|
||||
<el-input-number v-model="bias" size="small" :step="1" />
|
||||
<el-input-number
|
||||
v-model="bias"
|
||||
size="small"
|
||||
:step="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Output -->
|
||||
<div class="col output-col">
|
||||
<el-icon class="arrow-icon"><Right /></el-icon>
|
||||
<el-icon class="arrow-icon">
|
||||
<Right />
|
||||
</el-icon>
|
||||
<div class="node-wrapper">
|
||||
<el-tag :type="output > 0 ? 'success' : 'info'" effect="dark"
|
||||
>结果 (Output)</el-tag
|
||||
<el-tag
|
||||
:type="output > 0 ? 'success' : 'info'"
|
||||
effect="dark"
|
||||
>
|
||||
结果 (Output)
|
||||
</el-tag>
|
||||
<div
|
||||
class="output-value"
|
||||
:class="{ active: output > 0 }"
|
||||
>
|
||||
<div class="output-value" :class="{ active: output > 0 }">
|
||||
{{ output }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,7 +123,10 @@
|
||||
<el-divider />
|
||||
|
||||
<div class="formula-bar">
|
||||
<el-alert type="info" :closable="false">
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
>
|
||||
<template #title>
|
||||
<div class="formula-content">
|
||||
<div>
|
||||
@@ -106,8 +139,8 @@
|
||||
<div class="mt-1">
|
||||
<strong>判断结果: </strong>
|
||||
<span class="calc-step">
|
||||
{{ weightedSum.toFixed(1) }} {{ weightedSum > 0 ? '>' : '≤' }} 0
|
||||
→ 输出 {{ output }} ({{ output > 0 ? '激活' : '静默' }})
|
||||
{{ weightedSum.toFixed(1) }} {{ weightedSum > 0 ? '>' : '≤' }} 0
|
||||
→ 输出 {{ output }} ({{ output > 0 ? '激活' : '静默' }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,10 +12,19 @@
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- Rule Based -->
|
||||
<el-col :xs="24" :md="12" class="mb-4-xs">
|
||||
<el-card shadow="never" class="panel-card">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:md="12"
|
||||
class="mb-4-xs"
|
||||
>
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="panel-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="panel-title">规则系统（手写 If/Else）</div>
|
||||
<div class="panel-title">
|
||||
规则系统（手写 If/Else）
|
||||
</div>
|
||||
</template>
|
||||
<div class="panel-content">
|
||||
<div class="control-row">
|
||||
@@ -48,8 +57,12 @@
|
||||
bad: ruleResult.label === '🍒'
|
||||
}"
|
||||
>
|
||||
<div class="result-title">输出</div>
|
||||
<div class="result-value">{{ ruleResult.text }}</div>
|
||||
<div class="result-title">
|
||||
输出
|
||||
</div>
|
||||
<div class="result-value">
|
||||
{{ ruleResult.text }}
|
||||
</div>
|
||||
<div class="result-code">
|
||||
if (size > {{ ruleThreshold }}) return 🍎 else return 🍒
|
||||
</div>
|
||||
@@ -66,10 +79,18 @@
|
||||
</el-col>
|
||||
|
||||
<!-- Machine Learning -->
|
||||
<el-col :xs="24" :md="12">
|
||||
<el-card shadow="never" class="panel-card">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:md="12"
|
||||
>
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="panel-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="panel-title">机器学习（从样本推断边界）</div>
|
||||
<div class="panel-title">
|
||||
机器学习（从样本推断边界）
|
||||
</div>
|
||||
</template>
|
||||
<div class="panel-content">
|
||||
<div class="control-row">
|
||||
@@ -86,12 +107,22 @@
|
||||
placeholder="Label"
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option label="🍒 樱桃" value="🍒" />
|
||||
<el-option label="🍎 苹果" value="🍎" />
|
||||
<el-option
|
||||
label="🍒 樱桃"
|
||||
value="🍒"
|
||||
/>
|
||||
<el-option
|
||||
label="🍎 苹果"
|
||||
value="🍎"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="addSample"
|
||||
>添加样本</el-button
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="addSample"
|
||||
>
|
||||
添加样本
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="samples-area mt-4">
|
||||
@@ -100,14 +131,17 @@
|
||||
description="还没有样本：先添加 2-4 个样本再训练"
|
||||
:image-size="40"
|
||||
/>
|
||||
<div v-else class="sample-chips">
|
||||
<div
|
||||
v-else
|
||||
class="sample-chips"
|
||||
>
|
||||
<el-tag
|
||||
v-for="(p, i) in trainingData"
|
||||
:key="p.id"
|
||||
closable
|
||||
@close="removeSample(i)"
|
||||
:type="p.label === '🍎' ? 'danger' : 'info'"
|
||||
effect="plain"
|
||||
@close="removeSample(i)"
|
||||
>
|
||||
{{ p.size }} → {{ p.label }}
|
||||
</el-tag>
|
||||
@@ -117,15 +151,20 @@
|
||||
<div class="actions mt-4 flex gap-2">
|
||||
<el-button
|
||||
type="success"
|
||||
@click="train"
|
||||
:disabled="trainingData.length < 2"
|
||||
@click="train"
|
||||
>
|
||||
训练（推断阈值）
|
||||
</el-button>
|
||||
<el-button @click="resetLearning">重置</el-button>
|
||||
<el-button @click="resetLearning">
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="learnedThreshold !== null" class="learned-result mt-4">
|
||||
<div
|
||||
v-if="learnedThreshold !== null"
|
||||
class="learned-result mt-4"
|
||||
>
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
|
||||
@@ -23,11 +23,21 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tool-detail" v-if="currentTool">
|
||||
<div
|
||||
v-if="currentTool"
|
||||
class="tool-detail"
|
||||
>
|
||||
<div class="tool-header">
|
||||
<div class="tool-title">{{ currentTool.name }}</div>
|
||||
<div class="tool-title">
|
||||
{{ currentTool.name }}
|
||||
</div>
|
||||
<div class="tool-tags">
|
||||
<span class="tag" :class="tag.class" v-for="tag in currentTool.tags" :key="tag.text">
|
||||
<span
|
||||
v-for="tag in currentTool.tags"
|
||||
:key="tag.text"
|
||||
class="tag"
|
||||
:class="tag.class"
|
||||
>
|
||||
{{ tag.text }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -40,7 +50,11 @@
|
||||
<div class="feature-section">
|
||||
<h4>核心特性</h4>
|
||||
<div class="feature-list">
|
||||
<div v-for="(feature, idx) in currentTool.features" :key="idx" class="feature-item">
|
||||
<div
|
||||
v-for="(feature, idx) in currentTool.features"
|
||||
:key="idx"
|
||||
class="feature-item"
|
||||
>
|
||||
<span class="feature-icon">✓</span>
|
||||
<span class="feature-text">{{ feature }}</span>
|
||||
</div>
|
||||
@@ -57,9 +71,17 @@
|
||||
<div class="tools-section">
|
||||
<h4>🔧 推荐工具</h4>
|
||||
<div class="tools-grid">
|
||||
<div v-for="(rec, idx) in currentTool.recommendations" :key="idx" class="tool-card">
|
||||
<div class="rec-name">{{ rec.name }}</div>
|
||||
<div class="rec-desc">{{ rec.description }}</div>
|
||||
<div
|
||||
v-for="(rec, idx) in currentTool.recommendations"
|
||||
:key="idx"
|
||||
class="tool-card"
|
||||
>
|
||||
<div class="rec-name">
|
||||
{{ rec.name }}
|
||||
</div>
|
||||
<div class="rec-desc">
|
||||
{{ rec.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,7 +28,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 错误示范 -->
|
||||
<div v-if="selectedTab === 'bad'" class="comparison bad">
|
||||
<div
|
||||
v-if="selectedTab === 'bad'"
|
||||
class="comparison bad"
|
||||
>
|
||||
<div class="response-preview">
|
||||
<div class="status-line bad">
|
||||
<span>HTTP/1.1</span>
|
||||
@@ -65,7 +68,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 正确示范 -->
|
||||
<div v-if="selectedTab === 'good'" class="comparison good">
|
||||
<div
|
||||
v-if="selectedTab === 'good'"
|
||||
class="comparison good"
|
||||
>
|
||||
<div class="response-preview">
|
||||
<div class="status-line">
|
||||
<span>HTTP/1.1</span>
|
||||
@@ -105,7 +111,11 @@
|
||||
<div class="error-codes">
|
||||
<h4>错误码体系</h4>
|
||||
<div class="code-list">
|
||||
<div v-for="item in errorCodeItems" :key="item.code" class="code-item">
|
||||
<div
|
||||
v-for="item in errorCodeItems"
|
||||
:key="item.code"
|
||||
class="code-item"
|
||||
>
|
||||
<span class="code-badge">{{ item.code }}</span>
|
||||
<span class="code-desc">{{ item.desc }}</span>
|
||||
</div>
|
||||
|
||||
@@ -114,7 +114,7 @@ const methods = [
|
||||
{ product_id: 'P001', quantity: 2 },
|
||||
{ product_id: 'P002', quantity: 1 }
|
||||
],
|
||||
shipping_address: {...}
|
||||
shipping_address: { /* ... */ }
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -2,12 +2,16 @@
|
||||
<div class="demo-container">
|
||||
<div class="demo-header">
|
||||
<h4>HTTP 请求结构解析</h4>
|
||||
<p class="hint">详解 HTTP 请求的组成部分</p>
|
||||
<p class="hint">
|
||||
详解 HTTP 请求的组成部分
|
||||
</p>
|
||||
</div>
|
||||
<div class="demo-content">
|
||||
<div class="structure-box">
|
||||
<div class="section request-line">
|
||||
<div class="label">请求行</div>
|
||||
<div class="label">
|
||||
请求行
|
||||
</div>
|
||||
<div class="content">
|
||||
<code>GET /api/users/123 HTTP/1.1</code>
|
||||
</div>
|
||||
@@ -17,24 +21,32 @@
|
||||
</div>
|
||||
|
||||
<div class="section headers">
|
||||
<div class="label">请求头</div>
|
||||
<div class="label">
|
||||
请求头
|
||||
</div>
|
||||
<div class="content header-list">
|
||||
<div><code>Host: api.example.com</code></div>
|
||||
<div><code>Content-Type: application/json</code></div>
|
||||
<div><code>Authorization: Bearer token123</code></div>
|
||||
</div>
|
||||
<div class="explain">元信息：域名、数据格式、认证等</div>
|
||||
<div class="explain">
|
||||
元信息：域名、数据格式、认证等
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section body">
|
||||
<div class="label">请求体 (可选)</div>
|
||||
<div class="label">
|
||||
请求体 (可选)
|
||||
</div>
|
||||
<div class="content">
|
||||
<pre>{
|
||||
"name": "张三",
|
||||
"email": "zhangsan@example.com"
|
||||
}</pre>
|
||||
</div>
|
||||
<div class="explain">POST/PUT 请求携带的数据</div>
|
||||
<div class="explain">
|
||||
POST/PUT 请求携带的数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,26 +2,34 @@
|
||||
<div class="demo-container">
|
||||
<div class="demo-header">
|
||||
<h4>RESTful 资源类比</h4>
|
||||
<p class="hint">通过生活中的类比理解 RESTful 资源概念</p>
|
||||
<p class="hint">
|
||||
通过生活中的类比理解 RESTful 资源概念
|
||||
</p>
|
||||
</div>
|
||||
<div class="demo-content">
|
||||
<div class="analogy-box">
|
||||
<div class="analogy-item">
|
||||
<div class="icon">📚</div>
|
||||
<div class="icon">
|
||||
📚
|
||||
</div>
|
||||
<div class="text">
|
||||
<strong>资源 = 图书</strong>
|
||||
<p>每本书有唯一的 ISBN（资源标识）</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="analogy-item">
|
||||
<div class="icon">🏪</div>
|
||||
<div class="icon">
|
||||
🏪
|
||||
</div>
|
||||
<div class="text">
|
||||
<strong>URL = 书架位置</strong>
|
||||
<p>/library/books/123 表示第 123 号书</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="analogy-item">
|
||||
<div class="icon">📝</div>
|
||||
<div class="icon">
|
||||
📝
|
||||
</div>
|
||||
<div class="text">
|
||||
<strong>HTTP 方法 = 操作</strong>
|
||||
<p>GET(查看)、POST(借书)、PUT(修改)、DELETE(还书)</p>
|
||||
|
||||
@@ -26,7 +26,10 @@
|
||||
<div class="response-header">
|
||||
<div class="status-line">
|
||||
<span class="http-version">HTTP/1.1</span>
|
||||
<span class="status-code" :class="getStatusClass(currentResponse.status)">{{ currentResponse.status }}</span>
|
||||
<span
|
||||
class="status-code"
|
||||
:class="getStatusClass(currentResponse.status)"
|
||||
>{{ currentResponse.status }}</span>
|
||||
<span class="status-text">{{ currentResponse.statusText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,12 +56,18 @@
|
||||
<div class="field-descriptions">
|
||||
<h4>字段说明</h4>
|
||||
<div class="field-list">
|
||||
<div v-for="field in currentResponse.fields" :key="field.name" class="field-item">
|
||||
<div
|
||||
v-for="field in currentResponse.fields"
|
||||
:key="field.name"
|
||||
class="field-item"
|
||||
>
|
||||
<div class="field-name">
|
||||
<code>{{ field.name }}</code>
|
||||
<span class="field-type">{{ field.type }}</span>
|
||||
</div>
|
||||
<div class="field-desc">{{ field.description }}</div>
|
||||
<div class="field-desc">
|
||||
{{ field.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="restful-design-demo">
|
||||
<div class="header">
|
||||
<div class="title">RESTful API 设计核心原则</div>
|
||||
<div class="title">
|
||||
RESTful API 设计核心原则
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
REST（Representational State Transfer）是一种架构风格，让接口设计像自然资源一样直观
|
||||
</div>
|
||||
@@ -15,9 +17,15 @@
|
||||
:class="{ active: selectedPrinciple === principle.id }"
|
||||
@click="selectedPrinciple = principle.id"
|
||||
>
|
||||
<div class="principle-icon">{{ principle.icon }}</div>
|
||||
<div class="principle-name">{{ principle.name }}</div>
|
||||
<div class="principle-brief">{{ principle.brief }}</div>
|
||||
<div class="principle-icon">
|
||||
{{ principle.icon }}
|
||||
</div>
|
||||
<div class="principle-name">
|
||||
{{ principle.name }}
|
||||
</div>
|
||||
<div class="principle-brief">
|
||||
{{ principle.brief }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,11 +45,15 @@
|
||||
<h4>对比示例</h4>
|
||||
<div class="code-comparison">
|
||||
<div class="code-block bad">
|
||||
<div class="code-label">传统方式（不推荐）</div>
|
||||
<div class="code-label">
|
||||
传统方式（不推荐）
|
||||
</div>
|
||||
<pre><code>{{ activePrinciple.badExample }}</code></pre>
|
||||
</div>
|
||||
<div class="code-block good">
|
||||
<div class="code-label">RESTful 方式（推荐）</div>
|
||||
<div class="code-label">
|
||||
RESTful 方式（推荐）
|
||||
</div>
|
||||
<pre><code>{{ activePrinciple.goodExample }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,7 +62,12 @@
|
||||
<div class="tips">
|
||||
<h4>设计要点</h4>
|
||||
<ul>
|
||||
<li v-for="(tip, index) in activePrinciple.tips" :key="index">{{ tip }}</li>
|
||||
<li
|
||||
v-for="(tip, index) in activePrinciple.tips"
|
||||
:key="index"
|
||||
>
|
||||
{{ tip }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,10 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="status-codes" v-if="filteredCodes.length > 0">
|
||||
<div
|
||||
v-if="filteredCodes.length > 0"
|
||||
class="status-codes"
|
||||
>
|
||||
<div
|
||||
v-for="code in filteredCodes"
|
||||
:key="code.number"
|
||||
@@ -32,12 +35,18 @@
|
||||
@click="toggleExpand(code.number)"
|
||||
>
|
||||
<div class="status-header">
|
||||
<span class="status-number" :class="getCategoryClass(code.number)">{{ code.number }}</span>
|
||||
<span
|
||||
class="status-number"
|
||||
:class="getCategoryClass(code.number)"
|
||||
>{{ code.number }}</span>
|
||||
<span class="status-name">{{ code.name }}</span>
|
||||
<span class="expand-icon">{{ expandedCode === code.number ? '▼' : '▶' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="status-detail" v-show="expandedCode === code.number">
|
||||
<div
|
||||
v-show="expandedCode === code.number"
|
||||
class="status-detail"
|
||||
>
|
||||
<div class="detail-section">
|
||||
<h4>💡 含义解释</h4>
|
||||
<p>{{ code.description }}</p>
|
||||
@@ -46,15 +55,26 @@
|
||||
<div class="detail-section">
|
||||
<h4>📝 使用场景</h4>
|
||||
<ul>
|
||||
<li v-for="(scenario, idx) in code.scenarios" :key="idx">{{ scenario }}</li>
|
||||
<li
|
||||
v-for="(scenario, idx) in code.scenarios"
|
||||
:key="idx"
|
||||
>
|
||||
{{ scenario }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section" v-if="code.example">
|
||||
<div
|
||||
v-if="code.example"
|
||||
class="detail-section"
|
||||
>
|
||||
<h4>💻 示例代码</h4>
|
||||
<div class="code-example">
|
||||
<div class="code-request">
|
||||
<span class="method-badge" :class="getCategoryClass(code.number)">{{ code.example.method }}</span>
|
||||
<span
|
||||
class="method-badge"
|
||||
:class="getCategoryClass(code.number)"
|
||||
>{{ code.example.method }}</span>
|
||||
<code>{{ code.example.path }}</code>
|
||||
</div>
|
||||
<div class="code-response">
|
||||
|
||||
@@ -19,19 +19,35 @@
|
||||
@click="selectedStrategy = strategy.id"
|
||||
>
|
||||
<div class="strategy-header">
|
||||
<div class="strategy-name">{{ strategy.name }}</div>
|
||||
<div class="strategy-name">
|
||||
{{ strategy.name }}
|
||||
</div>
|
||||
<div class="strategy-stars">
|
||||
<span v-for="n in strategy.stars" :key="n" class="star">⭐</span>
|
||||
<span
|
||||
v-for="n in strategy.stars"
|
||||
:key="n"
|
||||
class="star"
|
||||
>⭐</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strategy-example">{{ strategy.example }}</div>
|
||||
<div class="strategy-example">
|
||||
{{ strategy.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strategy-detail" v-if="currentStrategy">
|
||||
<div
|
||||
v-if="currentStrategy"
|
||||
class="strategy-detail"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<div class="detail-title">{{ currentStrategy.name }}</div>
|
||||
<div class="detail-recommendation" :class="currentStrategy.level">
|
||||
<div class="detail-title">
|
||||
{{ currentStrategy.name }}
|
||||
</div>
|
||||
<div
|
||||
class="detail-recommendation"
|
||||
:class="currentStrategy.level"
|
||||
>
|
||||
{{ currentStrategy.level === 'high' ? '强烈推荐' : currentStrategy.level === 'medium' ? '可以使用' : '不推荐' }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,14 +56,24 @@
|
||||
<div class="detail-section">
|
||||
<h4>✅ 优点</h4>
|
||||
<ul>
|
||||
<li v-for="(pro, idx) in currentStrategy.pros" :key="idx">{{ pro }}</li>
|
||||
<li
|
||||
v-for="(pro, idx) in currentStrategy.pros"
|
||||
:key="idx"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>❌ 缺点</h4>
|
||||
<ul>
|
||||
<li v-for="(con, idx) in currentStrategy.cons" :key="idx">{{ con }}</li>
|
||||
<li
|
||||
v-for="(con, idx) in currentStrategy.cons"
|
||||
:key="idx"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,9 +81,13 @@
|
||||
<div class="detail-section example">
|
||||
<h4>💻 实现示例</h4>
|
||||
<div class="code-box">
|
||||
<div class="code-header">Request</div>
|
||||
<div class="code-header">
|
||||
Request
|
||||
</div>
|
||||
<pre><code>{{ currentStrategy.codeExample.request }}</code></pre>
|
||||
<div class="code-header">Response Headers</div>
|
||||
<div class="code-header">
|
||||
Response Headers
|
||||
</div>
|
||||
<pre><code>{{ currentStrategy.codeExample.response }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +95,12 @@
|
||||
<div class="detail-section tips">
|
||||
<h4>💡 最佳实践</h4>
|
||||
<ul>
|
||||
<li v-for="(tip, idx) in currentStrategy.tips" :key="idx">{{ tip }}</li>
|
||||
<li
|
||||
v-for="(tip, idx) in currentStrategy.tips"
|
||||
:key="idx"
|
||||
>
|
||||
{{ tip }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
type="text"
|
||||
class="endpoint-input"
|
||||
placeholder="/users"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,23 +37,44 @@
|
||||
<div class="params-box">
|
||||
<div class="params-row">
|
||||
<span class="param-label">页码：</span>
|
||||
<input v-model.number="page" type="number" class="param-input" min="1" />
|
||||
<input
|
||||
v-model.number="page"
|
||||
type="number"
|
||||
class="param-input"
|
||||
min="1"
|
||||
>
|
||||
</div>
|
||||
<div class="params-row">
|
||||
<span class="param-label">每页数量：</span>
|
||||
<input v-model.number="limit" type="number" class="param-input small" min="1" max="100" />
|
||||
<input
|
||||
v-model.number="limit"
|
||||
type="number"
|
||||
class="param-input small"
|
||||
min="1"
|
||||
max="100"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="send-btn" @click="sendRequest" :disabled="loading">
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="loading"
|
||||
@click="sendRequest"
|
||||
>
|
||||
{{ loading ? '发送中...' : '🚀 发送请求' }}
|
||||
</button>
|
||||
|
||||
<div class="response" v-if="response">
|
||||
<div
|
||||
v-if="response"
|
||||
class="response"
|
||||
>
|
||||
<div class="response-header">
|
||||
<span class="status-badge" :class="response.status >= 200 && response.status < 300 ? 'success' : 'error'">
|
||||
<span
|
||||
class="status-badge"
|
||||
:class="response.status >= 200 && response.status < 300 ? 'success' : 'error'"
|
||||
>
|
||||
{{ response.status }} {{ response.statusText }}
|
||||
</span>
|
||||
<span class="response-time">耗时: {{ response.time }}ms</span>
|
||||
|
||||
@@ -9,7 +9,10 @@
|
||||
<span class="icon">📖</span>
|
||||
<span class="title">API 文档翻译机</span>
|
||||
</div>
|
||||
<button class="translate-btn" @click="isHuman = !isHuman">
|
||||
<button
|
||||
class="translate-btn"
|
||||
@click="isHuman = !isHuman"
|
||||
>
|
||||
{{ isHuman ? '🔄 还原回黑话' : '✨ 翻译成人话' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -19,21 +22,30 @@
|
||||
<div class="api-doc">
|
||||
<div class="doc-row method-row">
|
||||
<span class="label">Method:</span>
|
||||
<span class="value method" :class="{ human: isHuman }">
|
||||
<span
|
||||
class="value method"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
{{ isHuman ? '我要下单 (POST)' : 'POST' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="doc-row url-row">
|
||||
<span class="label">Endpoint:</span>
|
||||
<span class="value url" :class="{ human: isHuman }">
|
||||
<span
|
||||
class="value url"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
{{ isHuman ? '去哪里找厨师' : 'https://api.deepseek.com/chat' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="doc-row headers-row">
|
||||
<span class="label">Headers:</span>
|
||||
<div class="code-block" :class="{ human: isHuman }">
|
||||
<div
|
||||
class="code-block"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
<div class="line">
|
||||
<span class="key">{{
|
||||
isHuman ? '我是谁:' : 'Authorization:'
|
||||
@@ -55,25 +67,41 @@
|
||||
|
||||
<div class="doc-row body-row">
|
||||
<span class="label">Body:</span>
|
||||
<div class="code-block" :class="{ human: isHuman }">
|
||||
<div class="line">{</div>
|
||||
<div
|
||||
class="code-block"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
<div class="line">
|
||||
{
|
||||
</div>
|
||||
<div class="line indent">
|
||||
<span class="key">"model":</span>
|
||||
<span class="val">"deepseek-chat",</span>
|
||||
<span class="comment" v-if="isHuman"> // 选个聪明的厨师</span>
|
||||
<span
|
||||
v-if="isHuman"
|
||||
class="comment"
|
||||
> // 选个聪明的厨师</span>
|
||||
</div>
|
||||
<div class="line indent">
|
||||
<span class="key">"messages":</span>
|
||||
<span class="val">[...]</span>
|
||||
<span class="comment" v-if="isHuman"> // 我要说的话</span>
|
||||
<span
|
||||
v-if="isHuman"
|
||||
class="comment"
|
||||
> // 我要说的话</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
}
|
||||
</div>
|
||||
<div class="line">}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="doc-row response-row">
|
||||
<span class="label">Response:</span>
|
||||
<div class="code-block" :class="{ human: isHuman }">
|
||||
<div
|
||||
class="code-block"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
<div class="line">
|
||||
<span class="key">{{ isHuman ? '状态:' : 'Status:' }}</span>
|
||||
<span class="status-ok">{{
|
||||
|
||||
@@ -4,81 +4,143 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="title">🔍 HTTP 方法：GET、POST、PUT、DELETE 是什么？</div>
|
||||
<p class="subtitle">把它们想象成对数据的"操作方式"</p>
|
||||
<div class="title">
|
||||
🔍 HTTP 方法：GET、POST、PUT、DELETE 是什么？
|
||||
</div>
|
||||
<p class="subtitle">
|
||||
把它们想象成对数据的"操作方式"
|
||||
</p>
|
||||
|
||||
<div class="methods-grid">
|
||||
<div class="method-card get">
|
||||
<div class="method-badge">GET</div>
|
||||
<div class="method-title">📖 获取（查询）</div>
|
||||
<div class="method-badge">
|
||||
GET
|
||||
</div>
|
||||
<div class="method-title">
|
||||
📖 获取（查询）
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>只看不改</strong> - 从服务器获取数据</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 查询用户信息</div>
|
||||
<div class="example-item">• 搜索商品</div>
|
||||
<div class="example-item">• 获取文章列表</div>
|
||||
<div class="example-item">
|
||||
• 查询用户信息
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 搜索商品
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 获取文章列表
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">💡 可以安全重试，不会改变服务器数据</div>
|
||||
<div class="method-tip">
|
||||
💡 可以安全重试，不会改变服务器数据
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card post">
|
||||
<div class="method-badge">POST</div>
|
||||
<div class="method-title">➕ 创建（新增）</div>
|
||||
<div class="method-badge">
|
||||
POST
|
||||
</div>
|
||||
<div class="method-title">
|
||||
➕ 创建（新增）
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>新建数据</strong> - 在服务器创建新资源</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 创建新用户</div>
|
||||
<div class="example-item">• 提交订单</div>
|
||||
<div class="example-item">• 发表评论</div>
|
||||
<div class="example-item">
|
||||
• 创建新用户
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 提交订单
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 发表评论
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">⚠️ 不能随意重试，可能会重复创建</div>
|
||||
<div class="method-tip">
|
||||
⚠️ 不能随意重试，可能会重复创建
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card put">
|
||||
<div class="method-badge">PUT</div>
|
||||
<div class="method-title">✏️ 更新（替换）</div>
|
||||
<div class="method-badge">
|
||||
PUT
|
||||
</div>
|
||||
<div class="method-title">
|
||||
✏️ 更新（替换）
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>整体替换</strong> - 用新数据完全替换旧数据</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 修改用户全部信息</div>
|
||||
<div class="example-item">• 更换文章全部内容</div>
|
||||
<div class="example-item">
|
||||
• 修改用户全部信息
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 更换文章全部内容
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">⚠️ 会覆盖整个资源，需要提供完整数据</div>
|
||||
<div class="method-tip">
|
||||
⚠️ 会覆盖整个资源，需要提供完整数据
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card patch">
|
||||
<div class="method-badge">PATCH</div>
|
||||
<div class="method-title">🔧 修改（部分）</div>
|
||||
<div class="method-badge">
|
||||
PATCH
|
||||
</div>
|
||||
<div class="method-title">
|
||||
🔧 修改（部分）
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>局部更新</strong> - 只修改资源的部分字段</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 只修改用户昵称</div>
|
||||
<div class="example-item">• 更新文章标题</div>
|
||||
<div class="example-item">
|
||||
• 只修改用户昵称
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 更新文章标题
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">💡 只传需要修改的字段，更灵活</div>
|
||||
<div class="method-tip">
|
||||
💡 只传需要修改的字段，更灵活
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card delete">
|
||||
<div class="method-badge">DELETE</div>
|
||||
<div class="method-title">🗑️ 删除</div>
|
||||
<div class="method-badge">
|
||||
DELETE
|
||||
</div>
|
||||
<div class="method-title">
|
||||
🗑️ 删除
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>移除数据</strong> - 从服务器删除资源</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 删除用户</div>
|
||||
<div class="example-item">• 取消订单</div>
|
||||
<div class="example-item">• 删除评论</div>
|
||||
<div class="example-item">
|
||||
• 删除用户
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 取消订单
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 删除评论
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">⚠️ 操作不可逆，删除后无法恢复</div>
|
||||
<div class="method-tip">
|
||||
⚠️ 操作不可逆，删除后无法恢复
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-table">
|
||||
<div class="table-title">📊 快速对比</div>
|
||||
<div class="table-title">
|
||||
📊 快速对比
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<div class="api-playground">
|
||||
<div class="header">
|
||||
<div class="title">🧪 API 练手场</div>
|
||||
<div class="subtitle">随便玩，坏了算我的</div>
|
||||
<div class="title">
|
||||
🧪 API 练手场
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
随便玩，坏了算我的
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="playground-layout">
|
||||
<div class="left-panel">
|
||||
<div class="panel-title">发送请求</div>
|
||||
<div class="panel-title">
|
||||
发送请求
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>Endpoint（网址）</label>
|
||||
@@ -16,7 +22,7 @@
|
||||
type="text"
|
||||
placeholder="/users/123"
|
||||
class="input"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
@@ -33,13 +39,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group" v-if="method === 'POST'">
|
||||
<div
|
||||
v-if="method === 'POST'"
|
||||
class="input-group"
|
||||
>
|
||||
<label>Body（JSON）</label>
|
||||
<textarea
|
||||
v-model="body"
|
||||
class="textarea"
|
||||
placeholder='{"name": "张三"}'
|
||||
></textarea>
|
||||
placeholder="{"name": "张三"}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
@@ -49,25 +58,42 @@
|
||||
type="password"
|
||||
placeholder="sk-..."
|
||||
class="input"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
|
||||
<button class="send-btn" @click="sendRequest" :disabled="loading">
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="loading"
|
||||
@click="sendRequest"
|
||||
>
|
||||
{{ loading ? '发送中...' : '🚀 发送请求' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="right-panel">
|
||||
<div class="panel-title">响应结果</div>
|
||||
|
||||
<div v-if="!response" class="empty-state">
|
||||
<span class="empty-icon">📭</span>
|
||||
<p>点击发送按钮，看看会发生什么</p>
|
||||
<p class="hint">可以试试输入错误的地址或 Key</p>
|
||||
<div class="panel-title">
|
||||
响应结果
|
||||
</div>
|
||||
|
||||
<div v-else class="response-content">
|
||||
<div class="status-bar" :class="getStatusClass(response.status)">
|
||||
<div
|
||||
v-if="!response"
|
||||
class="empty-state"
|
||||
>
|
||||
<span class="empty-icon">📭</span>
|
||||
<p>点击发送按钮，看看会发生什么</p>
|
||||
<p class="hint">
|
||||
可以试试输入错误的地址或 Key
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="response-content"
|
||||
>
|
||||
<div
|
||||
class="status-bar"
|
||||
:class="getStatusClass(response.status)"
|
||||
>
|
||||
<span class="status-code">{{ response.status }}</span>
|
||||
<span class="status-text">{{ response.statusText }}</span>
|
||||
</div>
|
||||
@@ -76,7 +102,10 @@
|
||||
<pre>{{ JSON.stringify(response.data, null, 2) }}</pre>
|
||||
</div>
|
||||
|
||||
<div class="explanation" v-if="response.explanation">
|
||||
<div
|
||||
v-if="response.explanation"
|
||||
class="explanation"
|
||||
>
|
||||
💡 {{ response.explanation }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,14 +113,28 @@
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<div class="tip-title">可以试试这些玩法：</div>
|
||||
<div class="tip-title">
|
||||
可以试试这些玩法：
|
||||
</div>
|
||||
<div class="tip-list">
|
||||
<button @click="tryEndpoint('/users')">✅ GET /users</button>
|
||||
<button @click="tryEndpoint('/users/123')">✅ GET /users/123</button>
|
||||
<button @click="tryEndpoint('/posts')">✅ GET /posts</button>
|
||||
<button @click="tryError401">❌ 401 没带 Key</button>
|
||||
<button @click="tryError404">❌ 404 地址错了</button>
|
||||
<button @click="tryError429">❌ 429 点太快了</button>
|
||||
<button @click="tryEndpoint('/users')">
|
||||
✅ GET /users
|
||||
</button>
|
||||
<button @click="tryEndpoint('/users/123')">
|
||||
✅ GET /users/123
|
||||
</button>
|
||||
<button @click="tryEndpoint('/posts')">
|
||||
✅ GET /posts
|
||||
</button>
|
||||
<button @click="tryError401">
|
||||
❌ 401 没带 Key
|
||||
</button>
|
||||
<button @click="tryError404">
|
||||
❌ 404 地址错了
|
||||
</button>
|
||||
<button @click="tryError429">
|
||||
❌ 429 点太快了
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -208,7 +251,7 @@ function sendRequest() {
|
||||
data: { error: 'Resource not found' },
|
||||
explanation: '地址错了，这个接口不存在'
|
||||
}
|
||||
} else if (endpoint.value === '/users' && method.value === 'GET') {
|
||||
} else if (endpoint.value === '/users' && method.value === 'DELETE') {
|
||||
response.value = {
|
||||
status: 429,
|
||||
statusText: 'Too Many Requests',
|
||||
|
||||
@@ -11,24 +11,41 @@
|
||||
|
||||
<div class="content">
|
||||
<div class="action-area">
|
||||
<button class="call-btn" :disabled="calling" @click="callApi">
|
||||
<button
|
||||
class="call-btn"
|
||||
:disabled="calling"
|
||||
@click="callApi"
|
||||
>
|
||||
<span v-if="!calling">📡 发起 API 请求</span>
|
||||
<span v-else>🔄 请求处理中...</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="result-area" v-if="result || calling">
|
||||
<div class="loading-dots" v-if="calling">
|
||||
<div
|
||||
v-if="result || calling"
|
||||
class="result-area"
|
||||
>
|
||||
<div
|
||||
v-if="calling"
|
||||
class="loading-dots"
|
||||
>
|
||||
<span>.</span><span>.</span><span>.</span>
|
||||
</div>
|
||||
<div class="response-card" v-else-if="result">
|
||||
<div
|
||||
v-else-if="result"
|
||||
class="response-card"
|
||||
>
|
||||
<div class="response-header">
|
||||
<span class="status-badge success">200 OK</span>
|
||||
<span class="time">耗时: {{ result.time }}ms</span>
|
||||
</div>
|
||||
<div class="response-body">
|
||||
<div class="time-display">{{ result.timeString }}</div>
|
||||
<div class="timezone">{{ result.timezone }}</div>
|
||||
<div class="time-display">
|
||||
{{ result.timeString }}
|
||||
</div>
|
||||
<div class="timezone">
|
||||
{{ result.timezone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
<template>
|
||||
<div class="function-api-demo">
|
||||
<div class="header">
|
||||
<div class="title">🔧 你早就在用 API 了</div>
|
||||
<div class="subtitle">函数就是最基础的 API</div>
|
||||
<div class="title">
|
||||
🔧 你早就在用 API 了
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
函数就是最基础的 API
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="left">
|
||||
<div class="code-panel">
|
||||
<div class="code-title">📝 代码</div>
|
||||
<div class="code-title">
|
||||
📝 代码
|
||||
</div>
|
||||
<pre><code><span class="keyword">def</span> <span class="function">greet</span>(name, greeting=<span class="string">"你好"</span>):
|
||||
<span class="keyword">return</span> f<span class="string">"{greeting}，{name}！"</span>
|
||||
|
||||
@@ -48,22 +54,43 @@ print(result)</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="try-it">
|
||||
<div class="try-title">🎮 试试调用：</div>
|
||||
<div class="try-title">
|
||||
🎮 试试调用：
|
||||
</div>
|
||||
<div class="interactive">
|
||||
<input
|
||||
v-model="name"
|
||||
placeholder="输入名字"
|
||||
class="name-input"
|
||||
/>
|
||||
<select v-model="greeting" class="greeting-select">
|
||||
<option value="你好">你好</option>
|
||||
<option value="Hello">Hello</option>
|
||||
<option value="早上好">早上好</option>
|
||||
<option value="晚安">晚安</option>
|
||||
>
|
||||
<select
|
||||
v-model="greeting"
|
||||
class="greeting-select"
|
||||
>
|
||||
<option value="你好">
|
||||
你好
|
||||
</option>
|
||||
<option value="Hello">
|
||||
Hello
|
||||
</option>
|
||||
<option value="早上好">
|
||||
早上好
|
||||
</option>
|
||||
<option value="晚安">
|
||||
晚安
|
||||
</option>
|
||||
</select>
|
||||
<button @click="callFunction" class="call-btn">调用 greet()</button>
|
||||
<button
|
||||
class="call-btn"
|
||||
@click="callFunction"
|
||||
>
|
||||
调用 greet()
|
||||
</button>
|
||||
</div>
|
||||
<div class="result" v-if="result">
|
||||
<div
|
||||
v-if="result"
|
||||
class="result"
|
||||
>
|
||||
<span class="arrow">→</span>
|
||||
<code>{{ result }}</code>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,12 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="title">🤖 真实场景：让 AI 帮你写产品文案</div>
|
||||
<p class="subtitle">体验两种调用方式的区别</p>
|
||||
<div class="title">
|
||||
🤖 真实场景：让 AI 帮你写产品文案
|
||||
</div>
|
||||
<p class="subtitle">
|
||||
体验两种调用方式的区别
|
||||
</p>
|
||||
|
||||
<div class="scenario">
|
||||
<div class="scenario-header">
|
||||
@@ -35,53 +39,84 @@
|
||||
|
||||
<div class="mode-content">
|
||||
<!-- HTTP 模式 -->
|
||||
<div v-if="mode === 'http'" class="mode-details">
|
||||
<div
|
||||
v-if="mode === 'http'"
|
||||
class="mode-details"
|
||||
>
|
||||
<div class="steps">
|
||||
<div class="step" :class="{ active: currentStep >= 1 }">
|
||||
<div class="step-number">1</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 1 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
1
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">找到网址（打开外卖 APP）</div>
|
||||
<div class="step-title">
|
||||
找到网址（打开外卖 APP）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
https://api.openai.com/v1/chat/completions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 2 }">
|
||||
<div class="step-number">2</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 2 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
2
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">准备订单（填写信息）</div>
|
||||
<div class="step-title">
|
||||
准备订单（填写信息）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
Authorization: Bearer 你的API密钥<br />
|
||||
Authorization: Bearer 你的API密钥<br>
|
||||
Content-Type: application/json
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 3 }">
|
||||
<div class="step-number">3</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 3 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
3
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">下单（发送请求）</div>
|
||||
<div class="step-title">
|
||||
下单（发送请求）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
{<br />
|
||||
"model": "gpt-4",<br />
|
||||
"messages": [<br />
|
||||
{<br>
|
||||
"model": "gpt-4",<br>
|
||||
"messages": [<br>
|
||||
{ "role": "system", "content":
|
||||
"你是营销文案专家" },<br />
|
||||
"你是营销文案专家" },<br>
|
||||
{ "role": "user", "content":
|
||||
"写智能手表文案" }<br />
|
||||
]<br />
|
||||
"写智能手表文案" }<br>
|
||||
]<br>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 4 }">
|
||||
<div class="step-number">4</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 4 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
4
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">等待配送（解析响应）</div>
|
||||
<div class="step-title">
|
||||
等待配送（解析响应）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
response.choices[0].message.content<br />
|
||||
response.choices[0].message.content<br>
|
||||
<span class="step-hint">⚠️ 需要自己处理解析错误</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,52 +134,85 @@
|
||||
</div>
|
||||
|
||||
<!-- SDK 模式 -->
|
||||
<div v-else class="mode-details">
|
||||
<div
|
||||
v-else
|
||||
class="mode-details"
|
||||
>
|
||||
<div class="steps">
|
||||
<div class="step" :class="{ active: currentStep >= 1 }">
|
||||
<div class="step-number">1</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 1 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
1
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">走进餐厅（安装 SDK）</div>
|
||||
<div class="step-code">import OpenAI from 'openai'</div>
|
||||
<div class="step-title">
|
||||
走进餐厅（安装 SDK）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
import OpenAI from 'openai'
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 2 }">
|
||||
<div class="step-number">2</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 2 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
2
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">找服务员（初始化客户端）</div>
|
||||
<div class="step-title">
|
||||
找服务员（初始化客户端）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
const client = new OpenAI({<br />
|
||||
apiKey: '你的密钥'<br />
|
||||
const client = new OpenAI({<br>
|
||||
apiKey: '你的密钥'<br>
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 3 }">
|
||||
<div class="step-number">3</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 3 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
3
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">直接点菜（调用函数）</div>
|
||||
<div class="step-title">
|
||||
直接点菜（调用函数）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
const response = await client.chat.completions.create({<br />
|
||||
model: 'gpt-4',<br />
|
||||
messages: [<br />
|
||||
const response = await client.chat.completions.create({<br>
|
||||
model: 'gpt-4',<br>
|
||||
messages: [<br>
|
||||
{ role: 'system', content:
|
||||
'你是营销文案专家' },<br />
|
||||
'你是营销文案专家' },<br>
|
||||
{ role: 'user', content:
|
||||
'写智能手表文案' }<br />
|
||||
]<br />
|
||||
'写智能手表文案' }<br>
|
||||
]<br>
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 4 }">
|
||||
<div class="step-number">4</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 4 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
4
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">享用美食（直接使用）</div>
|
||||
<div class="step-title">
|
||||
享用美食（直接使用）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
console.log(response.choices[0].message.content)<br />
|
||||
console.log(response.choices[0].message.content)<br>
|
||||
<span class="step-hint">✅ SDK 帮你处理好了所有细节</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -163,11 +231,18 @@
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<button class="run-btn" :disabled="running" @click="runDemo">
|
||||
<button
|
||||
class="run-btn"
|
||||
:disabled="running"
|
||||
@click="runDemo"
|
||||
>
|
||||
{{ running ? '调用中...' : '🚀 开始调用 AI' }}
|
||||
</button>
|
||||
|
||||
<div class="result" v-if="result">
|
||||
<div
|
||||
v-if="result"
|
||||
class="result"
|
||||
>
|
||||
<div class="result-header">
|
||||
{{ mode === 'http' ? '🌐 HTTP API 返回' : '📦 SDK 返回' }}
|
||||
</div>
|
||||
|
||||
@@ -4,38 +4,65 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="title">🔄 一次 API 调用的流程</div>
|
||||
<p class="subtitle">点一下按钮，看请求怎么飞过去再飞回来</p>
|
||||
<div class="title">
|
||||
🔄 一次 API 调用的流程
|
||||
</div>
|
||||
<p class="subtitle">
|
||||
点一下按钮，看请求怎么飞过去再飞回来
|
||||
</p>
|
||||
|
||||
<div class="flow-container">
|
||||
<div class="side you">
|
||||
<div class="window">
|
||||
<div class="window-header">👤 你这边</div>
|
||||
<div class="window-header">
|
||||
👤 你这边
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<div class="message">我想调用 API</div>
|
||||
<div class="message">
|
||||
我想调用 API
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle">
|
||||
<div class="arrow" :class="{ animating: isAnimating }">➔</div>
|
||||
<button class="send-btn" :disabled="isAnimating" @click="send">
|
||||
<div
|
||||
class="arrow"
|
||||
:class="{ animating: isAnimating }"
|
||||
>
|
||||
➔
|
||||
</div>
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="isAnimating"
|
||||
@click="send"
|
||||
>
|
||||
{{ isAnimating ? '发送中...' : '🚀 发送请求' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="side server">
|
||||
<div class="window">
|
||||
<div class="window-header">🖥️ 对方服务器</div>
|
||||
<div class="window-header">
|
||||
🖥️ 对方服务器
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<div class="message">{{ serverMessage }}</div>
|
||||
<div class="message">
|
||||
{{ serverMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result" v-if="result">
|
||||
<div class="result-box" :class="result.type">
|
||||
<div
|
||||
v-if="result"
|
||||
class="result"
|
||||
>
|
||||
<div
|
||||
class="result-box"
|
||||
:class="result.type"
|
||||
>
|
||||
{{ result.text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
<template>
|
||||
<div class="asr-tts-demo">
|
||||
<div class="header">
|
||||
<div class="title">🔄 ASR ↔ TTS：语音的双向转换</div>
|
||||
<div class="title">
|
||||
🔄 ASR ↔ TTS：语音的双向转换
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
探索语音识别和语音合成的互逆过程
|
||||
</div>
|
||||
@@ -20,8 +22,12 @@
|
||||
<div class="section-header">
|
||||
<span class="section-icon">🎙️</span>
|
||||
<div>
|
||||
<div class="section-name">ASR 语音识别</div>
|
||||
<div class="section-desc">音频 → 文本</div>
|
||||
<div class="section-name">
|
||||
ASR 语音识别
|
||||
</div>
|
||||
<div class="section-desc">
|
||||
音频 → 文本
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,14 +41,26 @@
|
||||
<span class="record-icon">{{ isRecording ? '⏹' : '🎤' }}</span>
|
||||
<span>{{ isRecording ? '停止录音' : '开始录音' }}</span>
|
||||
</button>
|
||||
<div class="or-text">或</div>
|
||||
<button class="upload-audio-btn" @click="uploadAudio">
|
||||
<div class="or-text">
|
||||
或
|
||||
</div>
|
||||
<button
|
||||
class="upload-audio-btn"
|
||||
@click="uploadAudio"
|
||||
>
|
||||
📁 上传音频
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="recordedAudio" class="audio-preview">
|
||||
<canvas ref="inputWaveform" width="300" height="60"></canvas>
|
||||
<div
|
||||
v-if="recordedAudio"
|
||||
class="audio-preview"
|
||||
>
|
||||
<canvas
|
||||
ref="inputWaveform"
|
||||
width="300"
|
||||
height="60"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@@ -50,13 +68,23 @@
|
||||
:disabled="!recordedAudio || isProcessingASR"
|
||||
@click="processASR"
|
||||
>
|
||||
<span v-if="isProcessingASR" class="spinner"></span>
|
||||
<span
|
||||
v-if="isProcessingASR"
|
||||
class="spinner"
|
||||
/>
|
||||
<span v-else>🔍 识别语音</span>
|
||||
</button>
|
||||
|
||||
<div v-if="asrResult" class="result-box">
|
||||
<div class="result-label">识别结果</div>
|
||||
<div class="result-text">{{ asrResult }}</div>
|
||||
<div
|
||||
v-if="asrResult"
|
||||
class="result-box"
|
||||
>
|
||||
<div class="result-label">
|
||||
识别结果
|
||||
</div>
|
||||
<div class="result-text">
|
||||
{{ asrResult }}
|
||||
</div>
|
||||
<div class="result-meta">
|
||||
<span>置信度: {{ asrConfidence }}%</span>
|
||||
<span>耗时: {{ asrTime }}ms</span>
|
||||
@@ -67,7 +95,7 @@
|
||||
|
||||
<!-- 中间转换 -->
|
||||
<div class="flow-arrow">
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-line" />
|
||||
<div class="arrow-btns">
|
||||
<button
|
||||
class="arrow-btn"
|
||||
@@ -91,8 +119,12 @@
|
||||
<div class="section-header">
|
||||
<span class="section-icon">🔊</span>
|
||||
<div>
|
||||
<div class="section-name">TTS 语音合成</div>
|
||||
<div class="section-desc">文本 → 音频</div>
|
||||
<div class="section-name">
|
||||
TTS 语音合成
|
||||
</div>
|
||||
<div class="section-desc">
|
||||
文本 → 音频
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -102,7 +134,7 @@
|
||||
v-model="ttsInput"
|
||||
placeholder="输入要合成的文本..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="voice-select">
|
||||
@@ -125,19 +157,37 @@
|
||||
:disabled="!ttsInput.trim() || isProcessingTTS"
|
||||
@click="processTTS"
|
||||
>
|
||||
<span v-if="isProcessingTTS" class="spinner"></span>
|
||||
<span
|
||||
v-if="isProcessingTTS"
|
||||
class="spinner"
|
||||
/>
|
||||
<span v-else>🗣 合成语音</span>
|
||||
</button>
|
||||
|
||||
<div v-if="ttsResult" class="result-box audio-result">
|
||||
<div class="result-label">合成结果</div>
|
||||
<canvas ref="outputWaveform" width="300" height="60"></canvas>
|
||||
<div
|
||||
v-if="ttsResult"
|
||||
class="result-box audio-result"
|
||||
>
|
||||
<div class="result-label">
|
||||
合成结果
|
||||
</div>
|
||||
<canvas
|
||||
ref="outputWaveform"
|
||||
width="300"
|
||||
height="60"
|
||||
/>
|
||||
<div class="audio-controls">
|
||||
<button class="play-btn" @click="playResult">
|
||||
<button
|
||||
class="play-btn"
|
||||
@click="playResult"
|
||||
>
|
||||
{{ playing ? '⏸' : '▶' }}
|
||||
</button>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" :style="{ width: playProgress + '%' }"></div>
|
||||
<div
|
||||
class="progress"
|
||||
:style="{ width: playProgress + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,11 +196,17 @@
|
||||
</div>
|
||||
|
||||
<div class="comparison-section">
|
||||
<div class="comp-title">📊 ASR vs TTS 对比</div>
|
||||
<div class="comp-title">
|
||||
📊 ASR vs TTS 对比
|
||||
</div>
|
||||
<div class="comp-grid">
|
||||
<div class="comp-card">
|
||||
<div class="comp-icon">🎙️</div>
|
||||
<div class="comp-name">ASR</div>
|
||||
<div class="comp-icon">
|
||||
🎙️
|
||||
</div>
|
||||
<div class="comp-name">
|
||||
ASR
|
||||
</div>
|
||||
<div class="comp-items">
|
||||
<div class="comp-item">
|
||||
<span class="label">输入:</span>
|
||||
@@ -168,8 +224,12 @@
|
||||
</div>
|
||||
|
||||
<div class="comp-card">
|
||||
<div class="comp-icon">🔊</div>
|
||||
<div class="comp-name">TTS</div>
|
||||
<div class="comp-icon">
|
||||
🔊
|
||||
</div>
|
||||
<div class="comp-name">
|
||||
TTS
|
||||
</div>
|
||||
<div class="comp-items">
|
||||
<div class="comp-item">
|
||||
<span class="label">输入:</span>
|
||||
@@ -189,35 +249,61 @@
|
||||
</div>
|
||||
|
||||
<div class="pipeline-comparison">
|
||||
<div class="pipe-title">🔀 架构对比</div>
|
||||
<div class="pipe-title">
|
||||
🔀 架构对比
|
||||
</div>
|
||||
<div class="pipeline-diagram">
|
||||
<div class="pipeline asr-pipe">
|
||||
<div class="pipe-label">ASR Pipeline</div>
|
||||
<div class="pipe-label">
|
||||
ASR Pipeline
|
||||
</div>
|
||||
<div class="pipe-flow">
|
||||
<div class="pipe-step">音频</div>
|
||||
<div class="pipe-step">
|
||||
音频
|
||||
</div>
|
||||
<span>→</span>
|
||||
<div class="pipe-step">特征</div>
|
||||
<div class="pipe-step">
|
||||
特征
|
||||
</div>
|
||||
<span>→</span>
|
||||
<div class="pipe-step">Encoder</div>
|
||||
<div class="pipe-step">
|
||||
Encoder
|
||||
</div>
|
||||
<span>→</span>
|
||||
<div class="pipe-step">Decoder</div>
|
||||
<div class="pipe-step">
|
||||
Decoder
|
||||
</div>
|
||||
<span>→</span>
|
||||
<div class="pipe-step output">文本</div>
|
||||
<div class="pipe-step output">
|
||||
文本
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pipeline tts-pipe">
|
||||
<div class="pipe-label">TTS Pipeline</div>
|
||||
<div class="pipe-label">
|
||||
TTS Pipeline
|
||||
</div>
|
||||
<div class="pipe-flow">
|
||||
<div class="pipe-step">文本</div>
|
||||
<div class="pipe-step">
|
||||
文本
|
||||
</div>
|
||||
<span>→</span>
|
||||
<div class="pipe-step">Encoder</div>
|
||||
<div class="pipe-step">
|
||||
Encoder
|
||||
</div>
|
||||
<span>→</span>
|
||||
<div class="pipe-step">Decoder</div>
|
||||
<div class="pipe-step">
|
||||
Decoder
|
||||
</div>
|
||||
<span>→</span>
|
||||
<div class="pipe-step">声码器</div>
|
||||
<div class="pipe-step">
|
||||
声码器
|
||||
</div>
|
||||
<span>→</span>
|
||||
<div class="pipe-step output">音频</div>
|
||||
<div class="pipe-step output">
|
||||
音频
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,9 @@
|
||||
<template>
|
||||
<div class="audio-quick-start">
|
||||
<div class="header">
|
||||
<div class="title">🎙️ AI 音频初体验：让机器开口说话</div>
|
||||
<div class="title">
|
||||
🎙️ AI 音频初体验：让机器开口说话
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
从语音合成到声音克隆，探索 AI 如何让机器拥有"声音"
|
||||
</div>
|
||||
@@ -25,9 +27,9 @@
|
||||
<button
|
||||
v-for="scene in scenes"
|
||||
:key="scene.id"
|
||||
@click="selectScene(scene)"
|
||||
class="scene-btn"
|
||||
:class="{ active: currentScene?.id === scene.id }"
|
||||
@click="selectScene(scene)"
|
||||
>
|
||||
<span class="scene-icon">{{ scene.icon }}</span>
|
||||
<span class="scene-name">{{ scene.name }}</span>
|
||||
@@ -36,58 +38,86 @@
|
||||
|
||||
<!-- 演示区域 -->
|
||||
<div class="demo-area">
|
||||
<div v-if="!currentScene" class="empty-state">
|
||||
<div class="emoji">🎵</div>
|
||||
<div
|
||||
v-if="!currentScene"
|
||||
class="empty-state"
|
||||
>
|
||||
<div class="emoji">
|
||||
🎵
|
||||
</div>
|
||||
<p>选择一个场景开始体验 AI 音频</p>
|
||||
</div>
|
||||
|
||||
<!-- TTS 场景 -->
|
||||
<div v-else-if="currentScene.id === 'tts'" class="tts-demo">
|
||||
<div
|
||||
v-else-if="currentScene.id === 'tts'"
|
||||
class="tts-demo"
|
||||
>
|
||||
<div class="input-section">
|
||||
<textarea
|
||||
v-model="ttsText"
|
||||
rows="3"
|
||||
placeholder="输入要合成的文本..."
|
||||
></textarea>
|
||||
/>
|
||||
</div>
|
||||
<div class="voice-selector">
|
||||
<span class="label">声音:</span>
|
||||
<button
|
||||
v-for="voice in voices"
|
||||
:key="voice.id"
|
||||
@click="selectedVoice = voice.id"
|
||||
class="voice-btn"
|
||||
:class="{ active: selectedVoice === voice.id }"
|
||||
@click="selectedVoice = voice.id"
|
||||
>
|
||||
{{ voice.icon }} {{ voice.name }}
|
||||
</button>
|
||||
</div>
|
||||
<button @click="synthesize" class="action-btn primary" :disabled="isProcessing">
|
||||
<button
|
||||
class="action-btn primary"
|
||||
:disabled="isProcessing"
|
||||
@click="synthesize"
|
||||
>
|
||||
<span v-if="isProcessing">合成中...</span>
|
||||
<span v-else>🎙️ 合成语音</span>
|
||||
</button>
|
||||
|
||||
<!-- 波形可视化 -->
|
||||
<div v-if="showWaveform" class="waveform-container">
|
||||
<canvas ref="waveformCanvas" width="400" height="80"></canvas>
|
||||
<div
|
||||
v-if="showWaveform"
|
||||
class="waveform-container"
|
||||
>
|
||||
<canvas
|
||||
ref="waveformCanvas"
|
||||
width="400"
|
||||
height="80"
|
||||
/>
|
||||
<div class="audio-controls">
|
||||
<button @click="togglePlay" class="play-btn">
|
||||
<button
|
||||
class="play-btn"
|
||||
@click="togglePlay"
|
||||
>
|
||||
{{ isPlaying ? '⏸️' : '▶️' }}
|
||||
</button>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" :style="{ width: progress + '%' }"></div>
|
||||
<div
|
||||
class="progress"
|
||||
:style="{ width: progress + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ASR 场景 -->
|
||||
<div v-else-if="currentScene.id === 'asr'" class="asr-demo">
|
||||
<div
|
||||
v-else-if="currentScene.id === 'asr'"
|
||||
class="asr-demo"
|
||||
>
|
||||
<div class="record-section">
|
||||
<button
|
||||
@click="toggleRecording"
|
||||
class="record-btn"
|
||||
:class="{ recording: isRecording }"
|
||||
@click="toggleRecording"
|
||||
>
|
||||
<span class="record-icon">{{ isRecording ? '⏹️' : '🎤' }}</span>
|
||||
<span>{{ isRecording ? '停止录音' : '开始录音' }}</span>
|
||||
@@ -95,64 +125,134 @@
|
||||
</div>
|
||||
|
||||
<!-- 录音波形 -->
|
||||
<div v-if="isRecording || hasRecorded" class="waveform-container">
|
||||
<canvas ref="recordCanvas" width="400" height="80"></canvas>
|
||||
<div
|
||||
v-if="isRecording || hasRecorded"
|
||||
class="waveform-container"
|
||||
>
|
||||
<canvas
|
||||
ref="recordCanvas"
|
||||
width="400"
|
||||
height="80"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 识别结果 -->
|
||||
<div v-if="transcription" class="result-box">
|
||||
<div class="result-label">识别结果:</div>
|
||||
<div class="result-text">{{ transcription }}</div>
|
||||
<div
|
||||
v-if="transcription"
|
||||
class="result-box"
|
||||
>
|
||||
<div class="result-label">
|
||||
识别结果:
|
||||
</div>
|
||||
<div class="result-text">
|
||||
{{ transcription }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 声音克隆场景 -->
|
||||
<div v-else-if="currentScene.id === 'clone'" class="clone-demo">
|
||||
<div
|
||||
v-else-if="currentScene.id === 'clone'"
|
||||
class="clone-demo"
|
||||
>
|
||||
<div class="clone-steps">
|
||||
<div class="step" :class="{ active: cloneStep >= 1, done: cloneStep > 1 }">
|
||||
<div class="step-num">1</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: cloneStep >= 1, done: cloneStep > 1 }"
|
||||
>
|
||||
<div class="step-num">
|
||||
1
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">录制参考音频</div>
|
||||
<button @click="recordReference" class="step-btn" :disabled="cloneStep !== 1">
|
||||
<div class="step-title">
|
||||
录制参考音频
|
||||
</div>
|
||||
<button
|
||||
class="step-btn"
|
||||
:disabled="cloneStep !== 1"
|
||||
@click="recordReference"
|
||||
>
|
||||
{{ cloneStep > 1 ? '✓ 已完成' : '🎙️ 录制 5 秒' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">→</div>
|
||||
<div class="step" :class="{ active: cloneStep >= 2, done: cloneStep > 2 }">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-arrow">
|
||||
→
|
||||
</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: cloneStep >= 2, done: cloneStep > 2 }"
|
||||
>
|
||||
<div class="step-num">
|
||||
2
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">提取声纹特征</div>
|
||||
<div v-if="cloneStep === 2" class="processing">
|
||||
<div class="spinner"></div>
|
||||
<div class="step-title">
|
||||
提取声纹特征
|
||||
</div>
|
||||
<div
|
||||
v-if="cloneStep === 2"
|
||||
class="processing"
|
||||
>
|
||||
<div class="spinner" />
|
||||
<span>分析中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">→</div>
|
||||
<div class="step" :class="{ active: cloneStep >= 3 }">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-arrow">
|
||||
→
|
||||
</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: cloneStep >= 3 }"
|
||||
>
|
||||
<div class="step-num">
|
||||
3
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">合成克隆语音</div>
|
||||
<div v-if="cloneStep === 3" class="clone-input">
|
||||
<input v-model="cloneText" placeholder="输入要合成的文本" />
|
||||
<button @click="synthesizeClone" class="step-btn">合成</button>
|
||||
<div class="step-title">
|
||||
合成克隆语音
|
||||
</div>
|
||||
<div
|
||||
v-if="cloneStep === 3"
|
||||
class="clone-input"
|
||||
>
|
||||
<input
|
||||
v-model="cloneText"
|
||||
placeholder="输入要合成的文本"
|
||||
>
|
||||
<button
|
||||
class="step-btn"
|
||||
@click="synthesizeClone"
|
||||
>
|
||||
合成
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="cloneStep > 3"
|
||||
class="success-msg"
|
||||
>
|
||||
✓ 克隆成功!
|
||||
</div>
|
||||
<div v-if="cloneStep > 3" class="success-msg">✓ 克隆成功!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 声纹可视化 -->
|
||||
<div v-if="cloneStep >= 2" class="embedding-viz">
|
||||
<div class="viz-title">声纹特征向量 (256维)</div>
|
||||
<div
|
||||
v-if="cloneStep >= 2"
|
||||
class="embedding-viz"
|
||||
>
|
||||
<div class="viz-title">
|
||||
声纹特征向量 (256维)
|
||||
</div>
|
||||
<div class="embedding-bars">
|
||||
<div
|
||||
v-for="(val, i) in embeddingValues"
|
||||
:key="i"
|
||||
class="bar"
|
||||
:style="{ height: val + '%', opacity: 0.3 + val / 100 }"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -25,28 +25,51 @@
|
||||
<!-- 流程图 -->
|
||||
<div class="codec-flow">
|
||||
<div class="flow-section encode">
|
||||
<div class="section-title">🔽 编码器 (Encoder)</div>
|
||||
<div class="section-title">
|
||||
🔽 编码器 (Encoder)
|
||||
</div>
|
||||
<div class="flow-steps">
|
||||
<div class="codec-step">
|
||||
<div class="step-visual">
|
||||
<canvas ref="originalWaveformCanvas" width="150" height="60" />
|
||||
<canvas
|
||||
ref="originalWaveformCanvas"
|
||||
width="150"
|
||||
height="60"
|
||||
/>
|
||||
</div>
|
||||
<div class="step-label">
|
||||
原始波形
|
||||
</div>
|
||||
<div class="step-meta">
|
||||
24kHz, 16-bit
|
||||
</div>
|
||||
<div class="step-label">原始波形</div>
|
||||
<div class="step-meta">24kHz, 16-bit</div>
|
||||
</div>
|
||||
<el-icon class="flow-arrow"><ArrowRight /></el-icon>
|
||||
<el-icon class="flow-arrow">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="codec-step">
|
||||
<div class="step-visual">
|
||||
<div class="cnn-layers">
|
||||
<div class="cnn-layer" v-for="i in 4" :key="i" :style="{ opacity: 0.3 + i * 0.2 }">
|
||||
<div
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
class="cnn-layer"
|
||||
:style="{ opacity: 0.3 + i * 0.2 }"
|
||||
>
|
||||
Conv {{ i }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-label">CNN 下采样</div>
|
||||
<div class="step-meta">降维 320x</div>
|
||||
<div class="step-label">
|
||||
CNN 下采样
|
||||
</div>
|
||||
<div class="step-meta">
|
||||
降维 320x
|
||||
</div>
|
||||
</div>
|
||||
<el-icon class="flow-arrow"><ArrowRight /></el-icon>
|
||||
<el-icon class="flow-arrow">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="codec-step">
|
||||
<div class="step-visual">
|
||||
<div class="vq-codebook">
|
||||
@@ -60,20 +83,28 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-label">VQ 量化</div>
|
||||
<div class="step-meta">离散 Token</div>
|
||||
<div class="step-label">
|
||||
VQ 量化
|
||||
</div>
|
||||
<div class="step-meta">
|
||||
离散 Token
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-divider">
|
||||
<div class="divider-line"></div>
|
||||
<div class="divider-label">压缩后: ~1.5 kbps</div>
|
||||
<div class="divider-line"></div>
|
||||
<div class="divider-line" />
|
||||
<div class="divider-label">
|
||||
压缩后: ~1.5 kbps
|
||||
</div>
|
||||
<div class="divider-line" />
|
||||
</div>
|
||||
|
||||
<div class="flow-section decode">
|
||||
<div class="section-title">🔼 解码器 (Decoder)</div>
|
||||
<div class="section-title">
|
||||
🔼 解码器 (Decoder)
|
||||
</div>
|
||||
<div class="flow-steps reverse">
|
||||
<div class="codec-step">
|
||||
<div class="step-visual">
|
||||
@@ -88,28 +119,53 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-label">离散 Token</div>
|
||||
<div class="step-meta">Codebook 索引</div>
|
||||
<div class="step-label">
|
||||
离散 Token
|
||||
</div>
|
||||
<div class="step-meta">
|
||||
Codebook 索引
|
||||
</div>
|
||||
</div>
|
||||
<el-icon class="flow-arrow"><ArrowRight /></el-icon>
|
||||
<el-icon class="flow-arrow">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="codec-step">
|
||||
<div class="step-visual">
|
||||
<div class="cnn-layers">
|
||||
<div class="cnn-layer" v-for="i in 4" :key="i" :style="{ opacity: 1 - i * 0.15 }">
|
||||
<div
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
class="cnn-layer"
|
||||
:style="{ opacity: 1 - i * 0.15 }"
|
||||
>
|
||||
ConvT {{ 5 - i }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-label">转置卷积</div>
|
||||
<div class="step-meta">上采样</div>
|
||||
<div class="step-label">
|
||||
转置卷积
|
||||
</div>
|
||||
<div class="step-meta">
|
||||
上采样
|
||||
</div>
|
||||
</div>
|
||||
<el-icon class="flow-arrow"><ArrowRight /></el-icon>
|
||||
<el-icon class="flow-arrow">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="codec-step">
|
||||
<div class="step-visual">
|
||||
<canvas ref="reconstructedWaveformCanvas" width="150" height="60" />
|
||||
<canvas
|
||||
ref="reconstructedWaveformCanvas"
|
||||
width="150"
|
||||
height="60"
|
||||
/>
|
||||
</div>
|
||||
<div class="step-label">
|
||||
重建波形
|
||||
</div>
|
||||
<div class="step-meta">
|
||||
24kHz
|
||||
</div>
|
||||
<div class="step-label">重建波形</div>
|
||||
<div class="step-meta">24kHz</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -117,7 +173,9 @@
|
||||
|
||||
<!-- 码率对比 -->
|
||||
<div class="bitrate-comparison">
|
||||
<div class="comparison-title">📊 不同码率对比</div>
|
||||
<div class="comparison-title">
|
||||
📊 不同码率对比
|
||||
</div>
|
||||
<div class="bitrate-cards">
|
||||
<div
|
||||
v-for="config in bitrateConfigs"
|
||||
@@ -126,8 +184,12 @@
|
||||
:class="{ active: selectedBitrate === config.name }"
|
||||
@click="selectedBitrate = config.name"
|
||||
>
|
||||
<div class="bitrate-value">{{ config.bitrate }}</div>
|
||||
<div class="bitrate-name">{{ config.name }}</div>
|
||||
<div class="bitrate-value">
|
||||
{{ config.bitrate }}
|
||||
</div>
|
||||
<div class="bitrate-name">
|
||||
{{ config.name }}
|
||||
</div>
|
||||
<div class="bitrate-detail">
|
||||
<div class="detail-item">
|
||||
<span class="label">采样率:</span>
|
||||
@@ -154,10 +216,16 @@
|
||||
|
||||
<!-- Token 可视化 -->
|
||||
<div class="token-visualization">
|
||||
<div class="viz-title">🔢 Token 序列可视化</div>
|
||||
<div class="viz-title">
|
||||
🔢 Token 序列可视化
|
||||
</div>
|
||||
<div class="token-display">
|
||||
<div class="token-ruler">
|
||||
<span v-for="i in 20" :key="i" class="ruler-mark">{{ i * 0.1 }}s</span>
|
||||
<span
|
||||
v-for="i in 20"
|
||||
:key="i"
|
||||
class="ruler-mark"
|
||||
>{{ i * 0.1 }}s</span>
|
||||
</div>
|
||||
<div class="token-stream">
|
||||
<div
|
||||
@@ -174,15 +242,24 @@
|
||||
</div>
|
||||
<div class="token-legend">
|
||||
<span class="legend-item">
|
||||
<span class="legend-color" style="background: #409eff"></span>
|
||||
<span
|
||||
class="legend-color"
|
||||
style="background: #409eff"
|
||||
/>
|
||||
低频成分
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
<span class="legend-color" style="background: #67c23a"></span>
|
||||
<span
|
||||
class="legend-color"
|
||||
style="background: #67c23a"
|
||||
/>
|
||||
中频成分
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
<span class="legend-color" style="background: #e6a23c"></span>
|
||||
<span
|
||||
class="legend-color"
|
||||
style="background: #e6a23c"
|
||||
/>
|
||||
高频成分
|
||||
</span>
|
||||
</div>
|
||||
@@ -190,32 +267,50 @@
|
||||
|
||||
<!-- 应用场景 -->
|
||||
<div class="applications">
|
||||
<div class="apps-title">🎯 为什么需要音频 Tokenization？</div>
|
||||
<div class="apps-title">
|
||||
🎯 为什么需要音频 Tokenization？
|
||||
</div>
|
||||
<div class="apps-grid">
|
||||
<div class="app-card">
|
||||
<div class="app-icon">🚀</div>
|
||||
<div class="app-title">高效传输</div>
|
||||
<div class="app-icon">
|
||||
🚀
|
||||
</div>
|
||||
<div class="app-title">
|
||||
高效传输
|
||||
</div>
|
||||
<div class="app-desc">
|
||||
将音频压缩到 ~1.5 kbps，比原始音频小 256 倍，适合网络传输
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<div class="app-icon">🧠</div>
|
||||
<div class="app-title">语言模型友好</div>
|
||||
<div class="app-icon">
|
||||
🧠
|
||||
</div>
|
||||
<div class="app-title">
|
||||
语言模型友好
|
||||
</div>
|
||||
<div class="app-desc">
|
||||
离散 Token 可以被 LLM 直接处理，实现文本到音频的统一建模
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<div class="app-icon">🎵</div>
|
||||
<div class="app-title">音乐生成</div>
|
||||
<div class="app-icon">
|
||||
🎵
|
||||
</div>
|
||||
<div class="app-title">
|
||||
音乐生成
|
||||
</div>
|
||||
<div class="app-desc">
|
||||
MusicGen、AudioLDM 等模型使用音频 Token 生成音乐和音效
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<div class="app-icon">🗣️</div>
|
||||
<div class="app-title">语音合成</div>
|
||||
<div class="app-icon">
|
||||
🗣️
|
||||
</div>
|
||||
<div class="app-title">
|
||||
语音合成
|
||||
</div>
|
||||
<div class="app-desc">
|
||||
VALL-E、SoundStorm 等 TTS 模型直接生成音频 Token
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,14 @@
|
||||
<div class="demo-container">
|
||||
<!-- Step 1: Sound Wave -->
|
||||
<div class="step-box">
|
||||
<div class="label">🌊 声波</div>
|
||||
<div class="label">
|
||||
🌊 声波
|
||||
</div>
|
||||
<div class="wave-visual">
|
||||
<svg viewBox="0 0 200 60" class="wave-svg">
|
||||
<svg
|
||||
viewBox="0 0 200 60"
|
||||
class="wave-svg"
|
||||
>
|
||||
<path
|
||||
d="M 0 30 Q 10 10, 20 30 T 40 30 T 60 30 T 80 30 T 100 30 T 120 30 T 140 30 T 160 30 T 180 30 T 200 30"
|
||||
fill="none"
|
||||
@@ -14,40 +19,60 @@
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="desc">连续模拟信号</div>
|
||||
<div class="desc">
|
||||
连续模拟信号
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">→</div>
|
||||
<div class="arrow">
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Sampling -->
|
||||
<div class="step-box">
|
||||
<div class="label">📊 采样</div>
|
||||
<div class="sample-visual">
|
||||
<div v-for="n in 10" :key="n" class="sample-bar"></div>
|
||||
<div class="label">
|
||||
📊 采样
|
||||
</div>
|
||||
<div class="sample-visual">
|
||||
<div
|
||||
v-for="n in 10"
|
||||
:key="n"
|
||||
class="sample-bar"
|
||||
/>
|
||||
</div>
|
||||
<div class="desc">
|
||||
44100 点/秒
|
||||
</div>
|
||||
<div class="desc">44100 点/秒</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">→</div>
|
||||
<div class="arrow">
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Digital -->
|
||||
<div class="step-box">
|
||||
<div class="label">🔢 数字化</div>
|
||||
<div class="label">
|
||||
🔢 数字化
|
||||
</div>
|
||||
<div class="digital-visual">
|
||||
<div v-for="n in 8" :key="n" class="bit">
|
||||
<div
|
||||
v-for="n in 8"
|
||||
:key="n"
|
||||
class="bit"
|
||||
>
|
||||
{{ Math.floor(Math.random() * 2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc">PCM 数据</div>
|
||||
<div class="desc">
|
||||
PCM 数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
<p>
|
||||
<span class="icon">💡</span>
|
||||
计算机无法直接处理连续的声波，需要把它转换成数字。 这个过程叫<strong
|
||||
>模数转换 (ADC)</strong
|
||||
>：每隔一小段时间测量一次声音的强度，记录成数字。
|
||||
计算机无法直接处理连续的声波，需要把它转换成数字。 这个过程叫<strong>模数转换 (ADC)</strong>：每隔一小段时间测量一次声音的强度，记录成数字。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<div class="controls">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="playDemo"
|
||||
:loading="isPlaying"
|
||||
icon="VideoPlay"
|
||||
@click="playDemo"
|
||||
>
|
||||
开始对比演示
|
||||
</el-button>
|
||||
@@ -14,10 +14,18 @@
|
||||
|
||||
<div class="comparison-container">
|
||||
<!-- Left: Autoregressive -->
|
||||
<el-card shadow="hover" class="method-card">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="method-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="method-header">
|
||||
<el-icon :size="20" color="#F56C6C"><Timer /></el-icon>
|
||||
<el-icon
|
||||
:size="20"
|
||||
color="#F56C6C"
|
||||
>
|
||||
<Timer />
|
||||
</el-icon>
|
||||
<span class="method-title">自回归 (Autoregressive)</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -38,12 +46,21 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<el-descriptions :column="1" size="small" border>
|
||||
<el-descriptions-item label="生成方式"
|
||||
>串行 (Serial)</el-descriptions-item
|
||||
>
|
||||
<el-descriptions
|
||||
:column="1"
|
||||
size="small"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item label="生成方式">
|
||||
串行 (Serial)
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="速度">
|
||||
<el-tag type="danger" size="small">慢 (Slow)</el-tag>
|
||||
<el-tag
|
||||
type="danger"
|
||||
size="small"
|
||||
>
|
||||
慢 (Slow)
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
@@ -51,16 +68,27 @@
|
||||
</el-card>
|
||||
|
||||
<!-- Right: Flow Matching -->
|
||||
<el-card shadow="hover" class="method-card">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="method-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="method-header">
|
||||
<el-icon :size="20" color="#67C23A"><Lightning /></el-icon>
|
||||
<el-icon
|
||||
:size="20"
|
||||
color="#67C23A"
|
||||
>
|
||||
<Lightning />
|
||||
</el-icon>
|
||||
<span class="method-title">流匹配 (Flow Matching)</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="method-body">
|
||||
<div class="visual-area">
|
||||
<div class="flow-field" :style="{ opacity: flowProgress }">
|
||||
<div
|
||||
class="flow-field"
|
||||
:style="{ opacity: flowProgress }"
|
||||
>
|
||||
<div
|
||||
v-for="n in 20"
|
||||
:key="n"
|
||||
@@ -69,23 +97,34 @@
|
||||
height: flowProgress * (30 + Math.random() * 70) + '%',
|
||||
transitionDelay: n * 0.02 + 's'
|
||||
}"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flow-overlay"
|
||||
v-if="flowProgress < 1 && flowProgress > 0"
|
||||
class="flow-overlay"
|
||||
>
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<el-icon class="is-loading">
|
||||
<Loading />
|
||||
</el-icon>
|
||||
<span>Denoising...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<el-descriptions :column="1" size="small" border>
|
||||
<el-descriptions-item label="生成方式"
|
||||
>并行 (Parallel)</el-descriptions-item
|
||||
>
|
||||
<el-descriptions
|
||||
:column="1"
|
||||
size="small"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item label="生成方式">
|
||||
并行 (Parallel)
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="速度">
|
||||
<el-tag type="success" size="small">极快 (Fast)</el-tag>
|
||||
<el-tag
|
||||
type="success"
|
||||
size="small"
|
||||
>
|
||||
极快 (Fast)
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
@@ -95,12 +134,17 @@
|
||||
|
||||
<el-divider />
|
||||
|
||||
<el-alert title="技术演进" type="success" :closable="false" show-icon>
|
||||
<el-alert
|
||||
title="技术演进"
|
||||
type="success"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #default>
|
||||
<p>
|
||||
<strong>自回归</strong> (如 VALL-E)
|
||||
像人说话一样，必须说完上一个字才能说下一个字，所以很慢。
|
||||
<br />
|
||||
<br>
|
||||
<strong>流匹配</strong> (如 F5-TTS)
|
||||
像画画一样，可以同时在画布的所有角落开始上色，效率提升了 10-20 倍。
|
||||
</p>
|
||||
@@ -139,13 +183,12 @@ const playDemo = async () => {
|
||||
})
|
||||
|
||||
// Start AR (Slow)
|
||||
const arPromise = new Promise(async (resolve) => {
|
||||
const arPromise = (async () => {
|
||||
for (const token of arTokensSource) {
|
||||
await new Promise((r) => setTimeout(r, 400)) // 400ms per token
|
||||
displayedArTokens.value.push(token)
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})()
|
||||
|
||||
await Promise.all([flowPromise, arPromise])
|
||||
isPlaying.value = false
|
||||
|
||||
@@ -24,7 +24,9 @@
|
||||
<div class="demo-content">
|
||||
<!-- 情感选择 -->
|
||||
<div class="emotion-selector">
|
||||
<div class="selector-title">选择情感风格</div>
|
||||
<div class="selector-title">
|
||||
选择情感风格
|
||||
</div>
|
||||
<div class="emotion-grid">
|
||||
<div
|
||||
v-for="emotion in emotions"
|
||||
@@ -33,16 +35,24 @@
|
||||
:class="{ active: selectedEmotion === emotion.id }"
|
||||
@click="selectEmotion(emotion.id)"
|
||||
>
|
||||
<div class="emotion-emoji">{{ emotion.emoji }}</div>
|
||||
<div class="emotion-name">{{ emotion.name }}</div>
|
||||
<div class="emotion-desc">{{ emotion.description }}</div>
|
||||
<div class="emotion-emoji">
|
||||
{{ emotion.emoji }}
|
||||
</div>
|
||||
<div class="emotion-name">
|
||||
{{ emotion.name }}
|
||||
</div>
|
||||
<div class="emotion-desc">
|
||||
{{ emotion.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 情感向量可视化 -->
|
||||
<div class="emotion-embedding">
|
||||
<div class="embedding-title">情感向量空间 (Emotion Embedding)</div>
|
||||
<div class="embedding-title">
|
||||
情感向量空间 (Emotion Embedding)
|
||||
</div>
|
||||
<canvas
|
||||
ref="emotionCanvas"
|
||||
width="400"
|
||||
@@ -66,14 +76,23 @@
|
||||
|
||||
<!-- 参数控制 -->
|
||||
<div class="parameter-controls">
|
||||
<div class="control-title">🎚️ 细粒度控制</div>
|
||||
<div class="control-title">
|
||||
🎚️ 细粒度控制
|
||||
</div>
|
||||
<div class="controls-grid">
|
||||
<div class="control-item">
|
||||
<div class="control-label">
|
||||
<span>语速</span>
|
||||
<el-tag size="small">{{ speed }}x</el-tag>
|
||||
<el-tag size="small">
|
||||
{{ speed }}x
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-slider v-model="speed" :min="0.5" :max="2" :step="0.1" />
|
||||
<el-slider
|
||||
v-model="speed"
|
||||
:min="0.5"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
/>
|
||||
<div class="control-hint">
|
||||
<span>慢</span>
|
||||
<span>正常</span>
|
||||
@@ -84,9 +103,16 @@
|
||||
<div class="control-item">
|
||||
<div class="control-label">
|
||||
<span>音调</span>
|
||||
<el-tag size="small">{{ pitch > 0 ? '+' : '' }}{{ pitch }}</el-tag>
|
||||
<el-tag size="small">
|
||||
{{ pitch > 0 ? '+' : '' }}{{ pitch }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-slider v-model="pitch" :min="-10" :max="10" :step="1" />
|
||||
<el-slider
|
||||
v-model="pitch"
|
||||
:min="-10"
|
||||
:max="10"
|
||||
:step="1"
|
||||
/>
|
||||
<div class="control-hint">
|
||||
<span>低</span>
|
||||
<span>正常</span>
|
||||
@@ -97,9 +123,16 @@
|
||||
<div class="control-item">
|
||||
<div class="control-label">
|
||||
<span>音量动态</span>
|
||||
<el-tag size="small">{{ energy }}%</el-tag>
|
||||
<el-tag size="small">
|
||||
{{ energy }}%
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-slider v-model="energy" :min="50" :max="150" :step="5" />
|
||||
<el-slider
|
||||
v-model="energy"
|
||||
:min="50"
|
||||
:max="150"
|
||||
:step="5"
|
||||
/>
|
||||
<div class="control-hint">
|
||||
<span>柔和</span>
|
||||
<span>适中</span>
|
||||
@@ -110,9 +143,16 @@
|
||||
<div class="control-item">
|
||||
<div class="control-label">
|
||||
<span>停顿控制</span>
|
||||
<el-tag size="small">{{ pause }}ms</el-tag>
|
||||
<el-tag size="small">
|
||||
{{ pause }}ms
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-slider v-model="pause" :min="0" :max="500" :step="50" />
|
||||
<el-slider
|
||||
v-model="pause"
|
||||
:min="0"
|
||||
:max="500"
|
||||
:step="50"
|
||||
/>
|
||||
<div class="control-hint">
|
||||
<span>紧凑</span>
|
||||
<span>自然</span>
|
||||
@@ -124,7 +164,9 @@
|
||||
|
||||
<!-- 文本输入和预览 -->
|
||||
<div class="preview-section">
|
||||
<div class="preview-title">🎙️ 预览合成</div>
|
||||
<div class="preview-title">
|
||||
🎙️ 预览合成
|
||||
</div>
|
||||
<el-input
|
||||
v-model="previewText"
|
||||
type="textarea"
|
||||
@@ -133,7 +175,10 @@
|
||||
class="preview-input"
|
||||
/>
|
||||
<div class="preview-actions">
|
||||
<el-button type="primary" @click="synthesize">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="synthesize"
|
||||
>
|
||||
<el-icon><VideoPlay /></el-icon>
|
||||
合成预览
|
||||
</el-button>
|
||||
|
||||
@@ -14,7 +14,9 @@
|
||||
<template>
|
||||
<div class="mel-spec-demo">
|
||||
<div class="header">
|
||||
<div class="title">📊 梅尔频谱：AI 如何"看懂"声音</div>
|
||||
<div class="title">
|
||||
📊 梅尔频谱：AI 如何"看懂"声音
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
声音是波，但 AI 看到的是频谱图。探索波形如何变成 AI 能理解的"图像"
|
||||
</div>
|
||||
@@ -25,9 +27,9 @@
|
||||
<button
|
||||
v-for="type in audioTypes"
|
||||
:key="type.id"
|
||||
@click="selectType(type.id)"
|
||||
class="type-btn"
|
||||
:class="{ active: selectedType === type.id }"
|
||||
@click="selectType(type.id)"
|
||||
>
|
||||
<span class="type-icon">{{ type.icon }}</span>
|
||||
<span>{{ type.name }}</span>
|
||||
@@ -38,23 +40,23 @@
|
||||
<div class="param">
|
||||
<label>FFT 窗口</label>
|
||||
<input
|
||||
type="range"
|
||||
v-model="fftSize"
|
||||
type="range"
|
||||
min="256"
|
||||
max="2048"
|
||||
step="256"
|
||||
/>
|
||||
>
|
||||
<span class="value">{{ fftSize }}</span>
|
||||
</div>
|
||||
<div class="param">
|
||||
<label>梅尔滤波器</label>
|
||||
<input
|
||||
type="range"
|
||||
v-model="melBins"
|
||||
type="range"
|
||||
min="20"
|
||||
max="128"
|
||||
step="4"
|
||||
/>
|
||||
>
|
||||
<span class="value">{{ melBins }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +69,11 @@
|
||||
<span class="viz-title">🔊 波形 (时域)</span>
|
||||
<span class="viz-desc">原始音频振幅随时间变化</span>
|
||||
</div>
|
||||
<canvas ref="waveformCanvas" width="600" height="100"></canvas>
|
||||
<canvas
|
||||
ref="waveformCanvas"
|
||||
width="600"
|
||||
height="100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="transform-arrow">
|
||||
@@ -82,31 +88,55 @@
|
||||
<span class="viz-title">📈 线性频谱</span>
|
||||
<span class="viz-tag">高频分辨率低</span>
|
||||
</div>
|
||||
<canvas ref="linearCanvas" width="280" height="150"></canvas>
|
||||
<canvas
|
||||
ref="linearCanvas"
|
||||
width="280"
|
||||
height="150"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="vs">VS</div>
|
||||
<div class="vs">
|
||||
VS
|
||||
</div>
|
||||
|
||||
<div class="viz-section highlight">
|
||||
<div class="viz-header">
|
||||
<span class="viz-title">🎯 梅尔频谱</span>
|
||||
<span class="viz-tag success">符合人耳感知</span>
|
||||
</div>
|
||||
<canvas ref="melCanvas" width="280" height="150"></canvas>
|
||||
<canvas
|
||||
ref="melCanvas"
|
||||
width="280"
|
||||
height="150"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
<div class="exp-title">🎧 为什么用梅尔刻度？</div>
|
||||
<div class="exp-title">
|
||||
🎧 为什么用梅尔刻度？
|
||||
</div>
|
||||
<div class="exp-content">
|
||||
<div class="exp-item">
|
||||
<div class="exp-visual">
|
||||
<div class="freq-bars human">
|
||||
<div class="bar" style="height: 80%"></div>
|
||||
<div class="bar" style="height: 60%"></div>
|
||||
<div class="bar" style="height: 40%"></div>
|
||||
<div class="bar" style="height: 20%"></div>
|
||||
<div
|
||||
class="bar"
|
||||
style="height: 80%"
|
||||
/>
|
||||
<div
|
||||
class="bar"
|
||||
style="height: 60%"
|
||||
/>
|
||||
<div
|
||||
class="bar"
|
||||
style="height: 40%"
|
||||
/>
|
||||
<div
|
||||
class="bar"
|
||||
style="height: 20%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-text">
|
||||
@@ -117,10 +147,22 @@
|
||||
<div class="exp-item">
|
||||
<div class="exp-visual">
|
||||
<div class="freq-bars linear">
|
||||
<div class="bar" style="height: 10%"></div>
|
||||
<div class="bar" style="height: 20%"></div>
|
||||
<div class="bar" style="height: 70%"></div>
|
||||
<div class="bar" style="height: 90%"></div>
|
||||
<div
|
||||
class="bar"
|
||||
style="height: 10%"
|
||||
/>
|
||||
<div
|
||||
class="bar"
|
||||
style="height: 20%"
|
||||
/>
|
||||
<div
|
||||
class="bar"
|
||||
style="height: 70%"
|
||||
/>
|
||||
<div
|
||||
class="bar"
|
||||
style="height: 90%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-text">
|
||||
|
||||
@@ -6,7 +6,12 @@
|
||||
<div class="viz-box">
|
||||
<div class="viz-header">
|
||||
<span class="viz-title">🌊 波形 (Waveform)</span>
|
||||
<el-tag size="small" type="success">Time Domain</el-tag>
|
||||
<el-tag
|
||||
size="small"
|
||||
type="success"
|
||||
>
|
||||
Time Domain
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="viz-content waveform-container">
|
||||
<div class="wave-bars">
|
||||
@@ -18,10 +23,14 @@
|
||||
height: 20 + Math.random() * 60 + '%',
|
||||
animationDelay: n * 0.05 + 's'
|
||||
}"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
<div class="axis-label x-axis">
|
||||
时间 (Time) →
|
||||
</div>
|
||||
<div class="axis-label y-axis">
|
||||
振幅 (Amplitude) ↑
|
||||
</div>
|
||||
<div class="axis-label x-axis">时间 (Time) →</div>
|
||||
<div class="axis-label y-axis">振幅 (Amplitude) ↑</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,12 +45,25 @@
|
||||
<div class="viz-box">
|
||||
<div class="viz-header">
|
||||
<span class="viz-title">🎨 频谱图 (Spectrogram)</span>
|
||||
<el-tag size="small" type="warning">Freq Domain</el-tag>
|
||||
<el-tag
|
||||
size="small"
|
||||
type="warning"
|
||||
>
|
||||
Freq Domain
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="viz-content spectrogram-container">
|
||||
<canvas ref="canvasRef" width="200" height="100"></canvas>
|
||||
<div class="axis-label x-axis">时间 (Time) →</div>
|
||||
<div class="axis-label y-axis">频率 (Freq) ↑</div>
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
width="200"
|
||||
height="100"
|
||||
/>
|
||||
<div class="axis-label x-axis">
|
||||
时间 (Time) →
|
||||
</div>
|
||||
<div class="axis-label y-axis">
|
||||
频率 (Freq) ↑
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,11 +79,11 @@
|
||||
<template #default>
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="color-box low"></div>
|
||||
<div class="color-box low" />
|
||||
低能量 (安静)
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="color-box high"></div>
|
||||
<div class="color-box high" />
|
||||
高能量 (响亮)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
<template>
|
||||
<div class="tts-pipeline-demo">
|
||||
<div class="header">
|
||||
<div class="title">🔄 TTS 架构演进：从慢到快</div>
|
||||
<div class="title">
|
||||
🔄 TTS 架构演进：从慢到快
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
探索文本如何变成语音，以及不同架构的优劣对比
|
||||
</div>
|
||||
@@ -18,13 +20,16 @@
|
||||
<button
|
||||
v-for="arch in architectures"
|
||||
:key="arch.id"
|
||||
@click="selectArch(arch.id)"
|
||||
class="arch-btn"
|
||||
:class="{ active: selectedArch === arch.id }"
|
||||
@click="selectArch(arch.id)"
|
||||
>
|
||||
<span class="arch-icon">{{ arch.icon }}</span>
|
||||
<span class="arch-name">{{ arch.name }}</span>
|
||||
<span class="arch-tag" :class="arch.tagClass">{{ arch.tag }}</span>
|
||||
<span
|
||||
class="arch-tag"
|
||||
:class="arch.tagClass"
|
||||
>{{ arch.tag }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -36,26 +41,50 @@
|
||||
:class="{ active: activeStage === index }"
|
||||
@click="activeStage = index"
|
||||
>
|
||||
<div class="stage-num">{{ index + 1 }}</div>
|
||||
<div class="stage-content">
|
||||
<div class="stage-icon">{{ stage.icon }}</div>
|
||||
<div class="stage-name">{{ stage.name }}</div>
|
||||
<div class="stage-desc">{{ stage.shortDesc }}</div>
|
||||
<div class="stage-num">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="stage-content">
|
||||
<div class="stage-icon">
|
||||
{{ stage.icon }}
|
||||
</div>
|
||||
<div class="stage-name">
|
||||
{{ stage.name }}
|
||||
</div>
|
||||
<div class="stage-desc">
|
||||
{{ stage.shortDesc }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="index < currentStages.length - 1"
|
||||
class="stage-arrow"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
<div v-if="index < currentStages.length - 1" class="stage-arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-detail" v-if="currentStage">
|
||||
<div
|
||||
v-if="currentStage"
|
||||
class="stage-detail"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ currentStage.icon }}</span>
|
||||
<div>
|
||||
<div class="detail-name">{{ currentStage.name }}</div>
|
||||
<div class="detail-desc">{{ currentStage.description }}</div>
|
||||
<div class="detail-name">
|
||||
{{ currentStage.name }}
|
||||
</div>
|
||||
<div class="detail-desc">
|
||||
{{ currentStage.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-canvas">
|
||||
<canvas ref="detailCanvas" width="500" height="150"></canvas>
|
||||
<canvas
|
||||
ref="detailCanvas"
|
||||
width="500"
|
||||
height="150"
|
||||
/>
|
||||
</div>
|
||||
<div class="detail-meta">
|
||||
<div class="meta-item">
|
||||
@@ -74,29 +103,58 @@
|
||||
</div>
|
||||
|
||||
<div class="comparison-table">
|
||||
<div class="table-title">📊 架构对比</div>
|
||||
<div class="table-title">
|
||||
📊 架构对比
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-header">
|
||||
<div class="cell">特性</div>
|
||||
<div class="cell">自回归</div>
|
||||
<div class="cell">非自回归</div>
|
||||
<div class="cell">流匹配</div>
|
||||
<div class="cell">
|
||||
特性
|
||||
</div>
|
||||
<div class="cell">
|
||||
自回归
|
||||
</div>
|
||||
<div class="cell">
|
||||
非自回归
|
||||
</div>
|
||||
<div class="cell">
|
||||
流匹配
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="row in comparisonRows"
|
||||
:key="row.feature"
|
||||
class="table-row"
|
||||
>
|
||||
<div class="cell feature">{{ row.feature }}</div>
|
||||
<div class="cell" :class="{ highlight: selectedArch === 'ar' }">{{ row.ar }}</div>
|
||||
<div class="cell" :class="{ highlight: selectedArch === 'nar' }">{{ row.nar }}</div>
|
||||
<div class="cell" :class="{ highlight: selectedArch === 'flow' }">{{ row.flow }}</div>
|
||||
<div class="cell feature">
|
||||
{{ row.feature }}
|
||||
</div>
|
||||
<div
|
||||
class="cell"
|
||||
:class="{ highlight: selectedArch === 'ar' }"
|
||||
>
|
||||
{{ row.ar }}
|
||||
</div>
|
||||
<div
|
||||
class="cell"
|
||||
:class="{ highlight: selectedArch === 'nar' }"
|
||||
>
|
||||
{{ row.nar }}
|
||||
</div>
|
||||
<div
|
||||
class="cell"
|
||||
:class="{ highlight: selectedArch === 'flow' }"
|
||||
>
|
||||
{{ row.flow }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="models-section">
|
||||
<div class="models-title">🏆 代表模型</div>
|
||||
<div class="models-title">
|
||||
🏆 代表模型
|
||||
</div>
|
||||
<div class="models-grid">
|
||||
<div
|
||||
v-for="model in models"
|
||||
@@ -104,9 +162,16 @@
|
||||
class="model-card"
|
||||
:class="{ active: model.arch === selectedArch }"
|
||||
>
|
||||
<div class="model-name">{{ model.name }}</div>
|
||||
<span class="model-tag" :class="model.tagClass">{{ model.type }}</span>
|
||||
<div class="model-desc">{{ model.desc }}</div>
|
||||
<div class="model-name">
|
||||
{{ model.name }}
|
||||
</div>
|
||||
<span
|
||||
class="model-tag"
|
||||
:class="model.tagClass"
|
||||
>{{ model.type }}</span>
|
||||
<div class="model-desc">
|
||||
{{ model.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
<template>
|
||||
<div class="voice-clone-demo">
|
||||
<div class="header">
|
||||
<div class="title">🎭 声音克隆：让 AI 模仿任何人</div>
|
||||
<div class="title">
|
||||
🎭 声音克隆：让 AI 模仿任何人
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
只需几秒钟的参考音频，AI 就能学会任何人的声音
|
||||
</div>
|
||||
@@ -18,9 +20,9 @@
|
||||
<button
|
||||
v-for="mode in modes"
|
||||
:key="mode.id"
|
||||
@click="selectMode(mode.id)"
|
||||
class="mode-btn"
|
||||
:class="{ active: selectedMode === mode.id }"
|
||||
@click="selectMode(mode.id)"
|
||||
>
|
||||
<span class="mode-icon">{{ mode.icon }}</span>
|
||||
<span>{{ mode.name }}</span>
|
||||
@@ -36,22 +38,36 @@
|
||||
</div>
|
||||
<div class="audio-grid">
|
||||
<div
|
||||
v-for="ref in references"
|
||||
:key="ref.id"
|
||||
v-for="reference in references"
|
||||
:key="reference.id"
|
||||
class="audio-card"
|
||||
:class="{ selected: selectedRef === ref.id }"
|
||||
@click="selectRef(ref.id)"
|
||||
:class="{ selected: selectedRef === reference.id }"
|
||||
@click="selectRef(reference.id)"
|
||||
>
|
||||
<div class="audio-avatar">{{ ref.avatar }}</div>
|
||||
<div class="audio-name">{{ ref.name }}</div>
|
||||
<div class="audio-desc">{{ ref.desc }}</div>
|
||||
<button class="play-btn" @click.stop="playRef(ref.id)">
|
||||
<div class="audio-avatar">
|
||||
{{ ref.avatar }}
|
||||
</div>
|
||||
<div class="audio-name">
|
||||
{{ ref.name }}
|
||||
</div>
|
||||
<div class="audio-desc">
|
||||
{{ ref.desc }}
|
||||
</div>
|
||||
<button
|
||||
class="play-btn"
|
||||
@click.stop="playRef(ref.id)"
|
||||
>
|
||||
{{ playingRef === ref.id ? '⏸' : '▶' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="or-divider">或</div>
|
||||
<button class="upload-btn" @click="uploadRef">
|
||||
<div class="or-divider">
|
||||
或
|
||||
</div>
|
||||
<button
|
||||
class="upload-btn"
|
||||
@click="uploadRef"
|
||||
>
|
||||
📤 上传自己的音频
|
||||
</button>
|
||||
</div>
|
||||
@@ -69,14 +85,32 @@
|
||||
class="process-step"
|
||||
:class="{ active: currentStep >= index }"
|
||||
>
|
||||
<div class="step-icon">{{ step.icon }}</div>
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div v-if="index < processSteps.length - 1" class="step-arrow">→</div>
|
||||
<div class="step-icon">
|
||||
{{ step.icon }}
|
||||
</div>
|
||||
<div class="step-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div
|
||||
v-if="index < processSteps.length - 1"
|
||||
class="step-arrow"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-viz" v-if="currentStep >= 2">
|
||||
<canvas ref="featureCanvas" width="400" height="100"></canvas>
|
||||
<div class="viz-label">提取的声音特征向量</div>
|
||||
<div
|
||||
v-if="currentStep >= 2"
|
||||
class="feature-viz"
|
||||
>
|
||||
<canvas
|
||||
ref="featureCanvas"
|
||||
width="400"
|
||||
height="100"
|
||||
/>
|
||||
<div class="viz-label">
|
||||
提取的声音特征向量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -91,31 +125,47 @@
|
||||
v-model="inputText"
|
||||
placeholder="输入要合成的文本..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
/>
|
||||
<button
|
||||
class="generate-btn"
|
||||
:disabled="!canGenerate"
|
||||
@click="generate"
|
||||
>
|
||||
<span v-if="isGenerating" class="spinner"></span>
|
||||
<span
|
||||
v-if="isGenerating"
|
||||
class="spinner"
|
||||
/>
|
||||
<span v-else>🎙 生成语音</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="generatedAudio" class="result-area">
|
||||
<div
|
||||
v-if="generatedAudio"
|
||||
class="result-area"
|
||||
>
|
||||
<div class="result-header">
|
||||
<span class="result-icon">🎵</span>
|
||||
<span>生成结果</span>
|
||||
<span class="similarity">相似度: {{ similarity }}%</span>
|
||||
</div>
|
||||
<div class="waveform-mini">
|
||||
<canvas ref="resultCanvas" width="400" height="60"></canvas>
|
||||
<canvas
|
||||
ref="resultCanvas"
|
||||
width="400"
|
||||
height="60"
|
||||
/>
|
||||
</div>
|
||||
<div class="result-actions">
|
||||
<button class="action-btn" @click="playResult">
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="playResult"
|
||||
>
|
||||
{{ playingResult ? '⏸ 暂停' : '▶ 播放' }}
|
||||
</button>
|
||||
<button class="action-btn secondary" @click="download">
|
||||
<button
|
||||
class="action-btn secondary"
|
||||
@click="download"
|
||||
>
|
||||
⬇ 下载
|
||||
</button>
|
||||
</div>
|
||||
@@ -124,24 +174,32 @@
|
||||
</div>
|
||||
|
||||
<div class="tips-section">
|
||||
<div class="tips-title">💡 声音克隆小贴士</div>
|
||||
<div class="tips-title">
|
||||
💡 声音克隆小贴士
|
||||
</div>
|
||||
<div class="tips-grid">
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">⏱️</div>
|
||||
<div class="tip-icon">
|
||||
⏱️
|
||||
</div>
|
||||
<div class="tip-text">
|
||||
<strong>参考音频时长</strong>
|
||||
<p>3-10 秒即可，质量比时长更重要</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">🔇</div>
|
||||
<div class="tip-icon">
|
||||
🔇
|
||||
</div>
|
||||
<div class="tip-text">
|
||||
<strong>环境要求</strong>
|
||||
<p>安静环境，避免背景噪音</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">🗣️</div>
|
||||
<div class="tip-icon">
|
||||
🗣️
|
||||
</div>
|
||||
<div class="tip-text">
|
||||
<strong>内容选择</strong>
|
||||
<p>包含多种音调和语速效果更好</p>
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
<template>
|
||||
<div class="auth-basics-demo">
|
||||
<div class="header">
|
||||
<div class="title">🧰 鉴权的 4 种常见“凭证”</div>
|
||||
<div class="title">
|
||||
🧰 鉴权的 4 种常见“凭证”
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
选一个方案，看看请求长什么样、优缺点是什么、最常见坑是什么。
|
||||
</div>
|
||||
@@ -26,24 +28,44 @@
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">请求长什么样</div>
|
||||
<div class="card-title">
|
||||
请求长什么样
|
||||
</div>
|
||||
<pre class="code"><code>{{ active.example }}</code></pre>
|
||||
<div class="hint">{{ active.note }}</div>
|
||||
<div class="hint">
|
||||
{{ active.note }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">什么时候用 / 不用</div>
|
||||
<div class="card-title">
|
||||
什么时候用 / 不用
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="box">
|
||||
<div class="box-title">✅ 适合</div>
|
||||
<div class="box-title">
|
||||
✅ 适合
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in active.pros" :key="i">{{ x }}</li>
|
||||
<li
|
||||
v-for="(x, i) in active.pros"
|
||||
:key="i"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">⚠️ 不适合 / 风险</div>
|
||||
<div class="box-title">
|
||||
⚠️ 不适合 / 风险
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in active.cons" :key="i">{{ x }}</li>
|
||||
<li
|
||||
v-for="(x, i) in active.cons"
|
||||
:key="i"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -51,10 +73,11 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">一句话口诀</div>
|
||||
<div class="card-title">
|
||||
一句话口诀
|
||||
</div>
|
||||
<div class="desc">
|
||||
<strong>先认证（你是谁）</strong
|
||||
>，再授权（你能做什么）。凭证只是“证明身份的方式”，授权永远要在服务端执行。
|
||||
<strong>先认证（你是谁）</strong>，再授权（你能做什么）。凭证只是“证明身份的方式”，授权永远要在服务端执行。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="auth-evolution-demo">
|
||||
<div class="header">
|
||||
<div class="title">🧭 鉴权方案演进：从 Basic 到 OAuth2</div>
|
||||
<div class="subtitle">点击卡片，快速建立“场景 → 方案”的直觉。</div>
|
||||
<div class="title">
|
||||
🧭 鉴权方案演进：从 Basic 到 OAuth2
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
点击卡片，快速建立“场景 → 方案”的直觉。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline">
|
||||
@@ -21,25 +25,45 @@
|
||||
<span class="icon">{{ s.icon }}</span>
|
||||
<span class="name">{{ s.name }}</span>
|
||||
</div>
|
||||
<div class="stage-sub">{{ s.when }}</div>
|
||||
<div class="stage-sub">
|
||||
{{ s.when }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">{{ active.icon }} {{ active.name }}</div>
|
||||
<div class="desc">{{ active.desc }}</div>
|
||||
<div class="card-title">
|
||||
{{ active.icon }} {{ active.name }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ active.desc }}
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="box">
|
||||
<div class="box-title">✅ 适合</div>
|
||||
<div class="box-title">
|
||||
✅ 适合
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in active.pros" :key="i">{{ x }}</li>
|
||||
<li
|
||||
v-for="(x, i) in active.pros"
|
||||
:key="i"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">⚠️ 主要风险</div>
|
||||
<div class="box-title">
|
||||
⚠️ 主要风险
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in active.cons" :key="i">{{ x }}</li>
|
||||
<li
|
||||
v-for="(x, i) in active.cons"
|
||||
:key="i"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+117
-55
@@ -13,13 +13,19 @@
|
||||
<template>
|
||||
<div class="auth-interactive-login">
|
||||
<div class="header">
|
||||
<div class="title">🔐 认证流程演示</div>
|
||||
<div class="subtitle">模拟登录过程，理解认证与授权的区别</div>
|
||||
<div class="title">
|
||||
🔐 认证流程演示
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
模拟登录过程，理解认证与授权的区别
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模式切换 -->
|
||||
<div class="mode-selector">
|
||||
<div class="mode-label">选择鉴权方式：</div>
|
||||
<div class="mode-label">
|
||||
选择鉴权方式：
|
||||
</div>
|
||||
<div class="mode-buttons">
|
||||
<button
|
||||
class="mode-btn"
|
||||
@@ -42,110 +48,140 @@
|
||||
<!-- 登录表单 -->
|
||||
<div class="login-section">
|
||||
<div class="form-container">
|
||||
<div class="form-title">登录表单</div>
|
||||
<div class="form-title">
|
||||
登录表单
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
<div class="field-group">
|
||||
<label>用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="username"
|
||||
type="text"
|
||||
placeholder="输入用户名"
|
||||
:disabled="locked"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label>密码</label>
|
||||
<input
|
||||
type="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="输入密码"
|
||||
:disabled="locked"
|
||||
@keyup.enter="startDemo"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="login-btn"
|
||||
@click="startDemo"
|
||||
:disabled="!username || !password || locked"
|
||||
@click="startDemo"
|
||||
>
|
||||
开始演示
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hints">
|
||||
<div class="hint-title">💡 提示</div>
|
||||
<div class="hint-title">
|
||||
💡 提示
|
||||
</div>
|
||||
<div class="hint-text">
|
||||
试试用户名 <code>admin</code>，密码 <code>123456</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stepper" v-if="flowStep > 0">
|
||||
<div
|
||||
v-if="flowStep > 0"
|
||||
class="stepper"
|
||||
>
|
||||
<div class="stepper-title">
|
||||
当前步骤：{{ flowStep }} / {{ maxStep }}
|
||||
<span class="stepper-hint"
|
||||
>（手动推进，避免“自动下一步”误解）</span
|
||||
>
|
||||
<span class="stepper-hint">（手动推进，避免“自动下一步”误解）</span>
|
||||
</div>
|
||||
<div class="stepper-actions">
|
||||
<button
|
||||
class="step-btn"
|
||||
@click="prevStep"
|
||||
:disabled="flowStep <= 1"
|
||||
@click="prevStep"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="step-btn primary"
|
||||
@click="nextStep"
|
||||
:disabled="flowStep >= maxStep"
|
||||
@click="nextStep"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
<button class="step-btn" @click="resetDemo">重置</button>
|
||||
<button
|
||||
class="step-btn"
|
||||
@click="resetDemo"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实时数据流 -->
|
||||
<div class="data-flow">
|
||||
<div class="flow-title">📊 数据流可视化</div>
|
||||
<div class="flow-title">
|
||||
📊 数据流可视化
|
||||
</div>
|
||||
|
||||
<!-- 请求阶段 -->
|
||||
<div class="flow-stage request-stage" v-if="currentStage >= 1">
|
||||
<div
|
||||
v-if="currentStage >= 1"
|
||||
class="flow-stage request-stage"
|
||||
>
|
||||
<div class="stage-header">
|
||||
<span class="stage-badge">{{
|
||||
currentStage === 1 ? '📤' : '✅'
|
||||
}}</span>
|
||||
<span class="stage-name">1. 客户端发送登录请求</span>
|
||||
</div>
|
||||
<div class="request-content" v-if="currentStage >= 1">
|
||||
<div
|
||||
v-if="currentStage >= 1"
|
||||
class="request-content"
|
||||
>
|
||||
<div class="request-line">
|
||||
<span class="method">POST</span>
|
||||
<span class="path">/api/login</span>
|
||||
</div>
|
||||
<div class="request-body">
|
||||
<div class="body-title">Body:</div>
|
||||
<div class="body-title">
|
||||
Body:
|
||||
</div>
|
||||
<pre>
|
||||
{
|
||||
"username": "{{ username }}",
|
||||
"password": "******"
|
||||
}</pre
|
||||
>
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" v-if="currentStage >= 1">⬇️</div>
|
||||
<div
|
||||
v-if="currentStage >= 1"
|
||||
class="flow-arrow"
|
||||
>
|
||||
⬇️
|
||||
</div>
|
||||
|
||||
<!-- 服务器验证阶段 -->
|
||||
<div class="flow-stage server-stage" v-if="currentStage >= 2">
|
||||
<div
|
||||
v-if="currentStage >= 2"
|
||||
class="flow-stage server-stage"
|
||||
>
|
||||
<div class="stage-header">
|
||||
<span class="stage-badge">{{
|
||||
currentStage === 2 ? '⚙️' : '✅'
|
||||
}}</span>
|
||||
<span class="stage-name">2. 服务器验证身份</span>
|
||||
</div>
|
||||
<div class="server-content" v-if="currentStage >= 2">
|
||||
<div
|
||||
v-if="currentStage >= 2"
|
||||
class="server-content"
|
||||
>
|
||||
<div class="verification-steps">
|
||||
<div
|
||||
class="verify-step"
|
||||
@@ -172,30 +208,43 @@
|
||||
<span class="step-icon">{{
|
||||
verificationStep >= 3 ? '✅' : '⏳'
|
||||
}}</span>
|
||||
<span class="step-text"
|
||||
>生成{{
|
||||
mode === 'session' ? 'Session' : 'JWT Token'
|
||||
}}</span
|
||||
>
|
||||
<span class="step-text">生成{{
|
||||
mode === 'session' ? 'Session' : 'JWT Token'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" v-if="currentStage >= 2">⬇️</div>
|
||||
<div
|
||||
v-if="currentStage >= 2"
|
||||
class="flow-arrow"
|
||||
>
|
||||
⬇️
|
||||
</div>
|
||||
|
||||
<!-- 响应阶段 -->
|
||||
<div class="flow-stage response-stage" v-if="currentStage >= 3">
|
||||
<div
|
||||
v-if="currentStage >= 3"
|
||||
class="flow-stage response-stage"
|
||||
>
|
||||
<div class="stage-header">
|
||||
<span class="stage-badge">{{
|
||||
currentStage === 3 ? '📥' : '✅'
|
||||
}}</span>
|
||||
<span class="stage-name">3. 服务器返回认证结果</span>
|
||||
</div>
|
||||
<div class="response-content" v-if="authResult">
|
||||
<div class="response-status success">✅ 登录成功</div>
|
||||
<div
|
||||
v-if="authResult"
|
||||
class="response-content"
|
||||
>
|
||||
<div class="response-status success">
|
||||
✅ 登录成功
|
||||
</div>
|
||||
<div class="response-body">
|
||||
<div class="body-title">Response:</div>
|
||||
<div class="body-title">
|
||||
Response:
|
||||
</div>
|
||||
<pre v-if="mode === 'session'">
|
||||
{
|
||||
"status": "success",
|
||||
@@ -203,8 +252,7 @@
|
||||
"id": 123,
|
||||
"username": "{{ username }}"
|
||||
}
|
||||
}</pre
|
||||
>
|
||||
}</pre>
|
||||
<pre v-else>
|
||||
{
|
||||
"status": "success",
|
||||
@@ -213,26 +261,24 @@
|
||||
"id": 123,
|
||||
"username": "{{ username }}"
|
||||
}
|
||||
}</pre
|
||||
>
|
||||
}</pre>
|
||||
</div>
|
||||
<div class="auth-mechanism" v-if="currentStage >= 4">
|
||||
<div
|
||||
v-if="currentStage >= 4"
|
||||
class="auth-mechanism"
|
||||
>
|
||||
<div class="mechanism-title">
|
||||
{{ mode === 'session' ? '🍪 Cookie 设置' : '🎫 Token 存储' }}
|
||||
</div>
|
||||
<div class="mechanism-content">
|
||||
<div v-if="mode === 'session'">
|
||||
<code
|
||||
>Set-Cookie: session_id={{ authResult?.sessionId }};
|
||||
HttpOnly; Secure</code
|
||||
>
|
||||
<code>Set-Cookie: session_id={{ authResult?.sessionId }};
|
||||
HttpOnly; Secure</code>
|
||||
</div>
|
||||
<div v-else>
|
||||
<code
|
||||
>localStorage.setItem("token", "{{
|
||||
authResult?.token
|
||||
}}")</code
|
||||
>
|
||||
<code>localStorage.setItem("token", "{{
|
||||
authResult?.token
|
||||
}}")</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -240,7 +286,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 后续请求 -->
|
||||
<div class="flow-stage request-stage" v-if="currentStage >= 5">
|
||||
<div
|
||||
v-if="currentStage >= 5"
|
||||
class="flow-stage request-stage"
|
||||
>
|
||||
<div class="stage-header">
|
||||
<span class="stage-badge">🔄</span>
|
||||
<span class="stage-name">4. 后续请求自动携带认证信息</span>
|
||||
@@ -251,7 +300,9 @@
|
||||
<span class="path">/api/user/profile</span>
|
||||
</div>
|
||||
<div class="auth-header">
|
||||
<div class="header-title">Header:</div>
|
||||
<div class="header-title">
|
||||
Header:
|
||||
</div>
|
||||
<div v-if="mode === 'session'">
|
||||
<code>Cookie: session_id={{ authResult?.sessionId }}</code>
|
||||
</div>
|
||||
@@ -266,7 +317,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 状态说明 -->
|
||||
<div class="state-description" v-if="currentStage >= 4">
|
||||
<div
|
||||
v-if="currentStage >= 4"
|
||||
class="state-description"
|
||||
>
|
||||
<div class="description-title">
|
||||
📖 {{ mode === 'session' ? 'Session' : 'JWT' }} 工作原理
|
||||
</div>
|
||||
@@ -287,8 +341,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 重置按钮 -->
|
||||
<div class="reset-section" v-if="currentStage >= 5">
|
||||
<button class="reset-btn" @click="resetDemo">🔄 重新演示</button>
|
||||
<div
|
||||
v-if="currentStage >= 5"
|
||||
class="reset-section"
|
||||
>
|
||||
<button
|
||||
class="reset-btn"
|
||||
@click="resetDemo"
|
||||
>
|
||||
🔄 重新演示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
<template>
|
||||
<div class="authn-authz-demo">
|
||||
<div class="header">
|
||||
<div class="title">🪪 AuthN vs 🛂 AuthZ：一个请求到底会经历什么？</div>
|
||||
<div class="title">
|
||||
🪪 AuthN vs 🛂 AuthZ：一个请求到底会经历什么？
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
选择“谁在请求”与“要做什么”，看看认证/授权分别在哪一步起作用。
|
||||
</div>
|
||||
@@ -13,7 +15,9 @@
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">选择请求</div>
|
||||
<div class="card-title">
|
||||
选择请求
|
||||
</div>
|
||||
|
||||
<label class="label">身份（AuthN：你是谁）</label>
|
||||
<div class="row">
|
||||
@@ -48,18 +52,26 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">模拟结果</div>
|
||||
<div class="card-title">
|
||||
模拟结果
|
||||
</div>
|
||||
|
||||
<div class="result">
|
||||
<div class="line">
|
||||
<span class="k">AuthN（认证）</span>
|
||||
<span class="v" :class="authn.ok ? 'ok' : 'bad'">
|
||||
<span
|
||||
class="v"
|
||||
:class="authn.ok ? 'ok' : 'bad'"
|
||||
>
|
||||
{{ authn.ok ? '通过' : '失败' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
<span class="k">AuthZ（授权）</span>
|
||||
<span class="v" :class="authz.ok ? 'ok' : 'bad'">
|
||||
<span
|
||||
class="v"
|
||||
:class="authz.ok ? 'ok' : 'bad'"
|
||||
>
|
||||
{{ authz.ok ? '允许' : '拒绝' }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -74,7 +86,9 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">关键点</div>
|
||||
<div class="card-title">
|
||||
关键点
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li><strong>认证失败：</strong>你是谁都不确定 → 通常返回 401。</li>
|
||||
<li>
|
||||
@@ -82,8 +96,7 @@
|
||||
403。
|
||||
</li>
|
||||
<li>
|
||||
<strong>授权规则要在服务端：</strong
|
||||
>别相信前端的“是否显示按钮”，那只是 UX。
|
||||
<strong>授权规则要在服务端：</strong>别相信前端的“是否显示按钮”，那只是 UX。
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
<template>
|
||||
<div class="csrf-demo">
|
||||
<div class="header">
|
||||
<div class="title">🛡️ CSRF：为什么“自动带 Cookie”会出事？</div>
|
||||
<div class="title">
|
||||
🛡️ CSRF：为什么“自动带 Cookie”会出事？
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
手动推进一个最小攻击链，再看 3 个最常用防护手段（SameSite / CSRF Token /
|
||||
双重提交）。
|
||||
@@ -13,51 +15,78 @@
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</button>
|
||||
<button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="next"
|
||||
:disabled="step !== 0"
|
||||
@click="start"
|
||||
>
|
||||
开始
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="step <= 1"
|
||||
@click="prev"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="step > 0" class="progress">
|
||||
<div
|
||||
v-if="step > 0"
|
||||
class="progress"
|
||||
>
|
||||
Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">场景</div>
|
||||
<div class="card-title">
|
||||
场景
|
||||
</div>
|
||||
<div class="desc">
|
||||
假设你登录了 <strong>bank.com</strong>（Cookie
|
||||
已存在）。你又打开了一个恶意网站
|
||||
<strong>evil.com</strong>，它偷偷发起转账请求。
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">你的 Cookie（浏览器会自动带）</div>
|
||||
<div class="box-title">
|
||||
你的 Cookie（浏览器会自动带）
|
||||
</div>
|
||||
<code class="mono">Cookie: session_id=abc123</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">本步请求</div>
|
||||
<div class="card-title">
|
||||
本步请求
|
||||
</div>
|
||||
<pre class="code"><code>{{ requestText }}</code></pre>
|
||||
<div class="desc">{{ steps[step - 1]?.desc }}</div>
|
||||
<div class="desc">
|
||||
{{ steps[step - 1]?.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">防护怎么选？（优先顺序）</div>
|
||||
<div class="card-title">
|
||||
防护怎么选？（优先顺序）
|
||||
</div>
|
||||
<ol class="list">
|
||||
<li>
|
||||
<strong>SameSite Cookie：</strong
|
||||
>对大多数“跨站表单/图片”请求非常有效（Lax/Strict）。
|
||||
<strong>SameSite Cookie：</strong>对大多数“跨站表单/图片”请求非常有效（Lax/Strict）。
|
||||
</li>
|
||||
<li>
|
||||
<strong>CSRF Token：</strong>在表单/请求头里带
|
||||
@@ -69,7 +98,9 @@
|
||||
</li>
|
||||
</ol>
|
||||
<div class="warn">
|
||||
<div class="warn-title">注意</div>
|
||||
<div class="warn-title">
|
||||
注意
|
||||
</div>
|
||||
<div class="warn-text">
|
||||
CSRF 主要针对“Cookie 自动携带”的场景。若你用 Authorization:
|
||||
Bearer（不自动发送），CSRF 风险会显著降低，但仍要考虑 XSS/Token
|
||||
|
||||
@@ -5,34 +5,56 @@
|
||||
<template>
|
||||
<div class="jwt-workflow-demo">
|
||||
<div class="header">
|
||||
<div class="title">🎫 JWT：生成 → 发送 → 验证 → 解析</div>
|
||||
<div class="title">
|
||||
🎫 JWT：生成 → 发送 → 验证 → 解析
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
默认“手动推进”，不自动下一步；避免把演示误当成真实系统的安全边界。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</button>
|
||||
<button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="next"
|
||||
:disabled="step !== 0"
|
||||
@click="start"
|
||||
>
|
||||
开始
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="step <= 1"
|
||||
@click="prev"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="step > 0" class="progress">
|
||||
<div
|
||||
v-if="step > 0"
|
||||
class="progress"
|
||||
>
|
||||
Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">用户声明（Payload 示例）</div>
|
||||
<div class="card-title">
|
||||
用户声明（Payload 示例）
|
||||
</div>
|
||||
<pre class="code"><code>{{ payloadJson }}</code></pre>
|
||||
<div class="hint">
|
||||
注意：JWT 的 payload 只是 Base64Url
|
||||
@@ -41,45 +63,90 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">JWT Token（示意）</div>
|
||||
<div class="card-title">
|
||||
JWT Token（示意）
|
||||
</div>
|
||||
<div class="token">
|
||||
<div class="part" :class="{ active: step >= 1 }">
|
||||
<div class="part-label">Header</div>
|
||||
<div
|
||||
class="part"
|
||||
:class="{ active: step >= 1 }"
|
||||
>
|
||||
<div class="part-label">
|
||||
Header
|
||||
</div>
|
||||
<code class="mono">{{ step >= 1 ? headerB64 : '...' }}</code>
|
||||
</div>
|
||||
<div class="dot">.</div>
|
||||
<div class="part" :class="{ active: step >= 2 }">
|
||||
<div class="part-label">Payload</div>
|
||||
<div class="dot">
|
||||
.
|
||||
</div>
|
||||
<div
|
||||
class="part"
|
||||
:class="{ active: step >= 2 }"
|
||||
>
|
||||
<div class="part-label">
|
||||
Payload
|
||||
</div>
|
||||
<code class="mono">{{ step >= 2 ? payloadB64 : '...' }}</code>
|
||||
</div>
|
||||
<div class="dot">.</div>
|
||||
<div class="part" :class="{ active: step >= 3 }">
|
||||
<div class="part-label">Signature</div>
|
||||
<div class="dot">
|
||||
.
|
||||
</div>
|
||||
<div
|
||||
class="part"
|
||||
:class="{ active: step >= 3 }"
|
||||
>
|
||||
<div class="part-label">
|
||||
Signature
|
||||
</div>
|
||||
<code class="mono">{{ step >= 3 ? signatureB64 : '...' }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mono-box" v-if="step >= 4">
|
||||
<div class="mono-label">完整 Token</div>
|
||||
<div
|
||||
v-if="step >= 4"
|
||||
class="mono-box"
|
||||
>
|
||||
<div class="mono-label">
|
||||
完整 Token
|
||||
</div>
|
||||
<code class="mono">{{ token }}</code>
|
||||
<button class="copy" @click="copy(token)">
|
||||
<button
|
||||
class="copy"
|
||||
@click="copy(token)"
|
||||
>
|
||||
{{ copied ? '已复制' : '复制 Token' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mono-box" v-if="step >= 5">
|
||||
<div class="mono-label">请求头示例</div>
|
||||
<div
|
||||
v-if="step >= 5"
|
||||
class="mono-box"
|
||||
>
|
||||
<div class="mono-label">
|
||||
请求头示例
|
||||
</div>
|
||||
<code class="mono">Authorization: Bearer {{ token }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">{{ steps[step - 1]?.title || '流程说明' }}</div>
|
||||
<div class="desc">{{ steps[step - 1]?.desc }}</div>
|
||||
<div v-if="steps[step - 1]?.warn" class="warn">
|
||||
<div class="warn-title">注意</div>
|
||||
<div class="warn-text">{{ steps[step - 1]?.warn }}</div>
|
||||
<div class="card-title">
|
||||
{{ steps[step - 1]?.title || '流程说明' }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ steps[step - 1]?.desc }}
|
||||
</div>
|
||||
<div
|
||||
v-if="steps[step - 1]?.warn"
|
||||
class="warn"
|
||||
>
|
||||
<div class="warn-title">
|
||||
注意
|
||||
</div>
|
||||
<div class="warn-text">
|
||||
{{ steps[step - 1]?.warn }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
<template>
|
||||
<div class="oauth2-demo">
|
||||
<div class="header">
|
||||
<div class="title">🔑 OAuth2：第三方登录（授权码流程）</div>
|
||||
<div class="title">
|
||||
🔑 OAuth2：第三方登录（授权码流程）
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
用最常见的 Authorization Code Flow（建议配合
|
||||
PKCE）。默认手动推进，不自动下一步。
|
||||
@@ -13,34 +15,64 @@
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</button>
|
||||
<button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="next"
|
||||
:disabled="step !== 0"
|
||||
@click="start"
|
||||
>
|
||||
开始
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="step <= 1"
|
||||
@click="prev"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
<button class="btn" @click="copy(currentCmd)" :disabled="!currentCmd">
|
||||
<button
|
||||
class="btn"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="!currentCmd"
|
||||
@click="copy(currentCmd)"
|
||||
>
|
||||
{{ copied ? '已复制' : '复制命令' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="step > 0" class="progress">
|
||||
<div
|
||||
v-if="step > 0"
|
||||
class="progress"
|
||||
>
|
||||
Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">角色</div>
|
||||
<div class="card-title">
|
||||
角色
|
||||
</div>
|
||||
<div class="role">
|
||||
<div class="pill">Client（你的应用）</div>
|
||||
<div class="pill">Authorization Server（微信/Google 等）</div>
|
||||
<div class="pill">Resource Server（你的 API）</div>
|
||||
<div class="pill">
|
||||
Client（你的应用）
|
||||
</div>
|
||||
<div class="pill">
|
||||
Authorization Server（微信/Google 等）
|
||||
</div>
|
||||
<div class="pill">
|
||||
Resource Server（你的 API）
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc">
|
||||
OAuth2
|
||||
@@ -49,17 +81,30 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">本步要做什么</div>
|
||||
<div class="desc">{{ steps[step - 1]?.desc || '点击开始' }}</div>
|
||||
<div v-if="steps[step - 1]?.warn" class="warn">
|
||||
<div class="warn-title">注意</div>
|
||||
<div class="warn-text">{{ steps[step - 1]?.warn }}</div>
|
||||
<div class="card-title">
|
||||
本步要做什么
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ steps[step - 1]?.desc || '点击开始' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="steps[step - 1]?.warn"
|
||||
class="warn"
|
||||
>
|
||||
<div class="warn-title">
|
||||
注意
|
||||
</div>
|
||||
<div class="warn-text">
|
||||
{{ steps[step - 1]?.warn }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">请求/命令示例（可照抄）</div>
|
||||
<div class="card-title">
|
||||
请求/命令示例（可照抄）
|
||||
</div>
|
||||
<pre
|
||||
class="code"
|
||||
><code>{{ currentCmd || '（点击开始后显示）' }}</code></pre>
|
||||
@@ -70,7 +115,9 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">你真正需要记住的 4 件事</div>
|
||||
<div class="card-title">
|
||||
你真正需要记住的 4 件事
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li>
|
||||
<strong>redirect_uri 必须白名单：</strong>避免被人把 code
|
||||
|
||||
@@ -9,7 +9,9 @@
|
||||
<template>
|
||||
<div class="password-hashing-demo">
|
||||
<div class="header">
|
||||
<div class="title">🔐 密码存储：哈希 + 盐 + 慢</div>
|
||||
<div class="title">
|
||||
🔐 密码存储：哈希 + 盐 + 慢
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
演示 PBKDF2（模拟慢哈希）如何抵抗彩虹表/暴力破解；真实项目通常选
|
||||
bcrypt/Argon2。
|
||||
@@ -18,7 +20,9 @@
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">输入</div>
|
||||
<div class="card-title">
|
||||
输入
|
||||
</div>
|
||||
|
||||
<label class="label">密码</label>
|
||||
<input
|
||||
@@ -27,7 +31,7 @@
|
||||
class="input"
|
||||
placeholder="例如：123456"
|
||||
@input="debouncedRecompute"
|
||||
/>
|
||||
>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@@ -42,29 +46,43 @@
|
||||
max="200000"
|
||||
step="1000"
|
||||
@input="debouncedRecompute"
|
||||
/>
|
||||
<div class="hint">越大越慢，暴力破解成本越高（但登录也更慢）。</div>
|
||||
>
|
||||
<div class="hint">
|
||||
越大越慢，暴力破解成本越高（但登录也更慢）。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label class="toggle">
|
||||
<input v-model="saltEnabled" type="checkbox" @change="recompute" />
|
||||
<input
|
||||
v-model="saltEnabled"
|
||||
type="checkbox"
|
||||
@change="recompute"
|
||||
>
|
||||
<span>启用盐（salt）</span>
|
||||
</label>
|
||||
<button class="btn" @click="regenSalt" :disabled="!saltEnabled">
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="!saltEnabled"
|
||||
@click="regenSalt"
|
||||
>
|
||||
生成新盐
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mono-box">
|
||||
<div class="mono-label">salt</div>
|
||||
<div class="mono-label">
|
||||
salt
|
||||
</div>
|
||||
<code class="mono">{{ saltEnabled ? saltHex : '(disabled)' }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">输出（模拟）</div>
|
||||
<div class="card-title">
|
||||
输出（模拟）
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<span class="badge">Algorithm: PBKDF2-SHA256</span>
|
||||
@@ -72,12 +90,16 @@
|
||||
</div>
|
||||
|
||||
<div class="mono-box">
|
||||
<div class="mono-label">derived key (hex)</div>
|
||||
<div class="mono-label">
|
||||
derived key (hex)
|
||||
</div>
|
||||
<code class="mono">{{ hashHex || '（请输入密码）' }}</code>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-title">结论</div>
|
||||
<div class="alert-title">
|
||||
结论
|
||||
</div>
|
||||
<div class="alert-text">
|
||||
不要存明文；不要用无盐的快速哈希（MD5/SHA1/SHA256 直接 hash 密码）。
|
||||
应使用“专门的密码哈希/KDF（慢 + 盐）”，并设置合理成本。
|
||||
@@ -92,15 +114,23 @@
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="mono-box">
|
||||
<div class="mono-label">salt A</div>
|
||||
<div class="mono-label">
|
||||
salt A
|
||||
</div>
|
||||
<code class="mono">{{ saltA }}</code>
|
||||
<div class="mono-label">hash A</div>
|
||||
<div class="mono-label">
|
||||
hash A
|
||||
</div>
|
||||
<code class="mono">{{ hashA || '-' }}</code>
|
||||
</div>
|
||||
<div class="mono-box">
|
||||
<div class="mono-label">salt B</div>
|
||||
<div class="mono-label">
|
||||
salt B
|
||||
</div>
|
||||
<code class="mono">{{ saltB }}</code>
|
||||
<div class="mono-label">hash B</div>
|
||||
<div class="mono-label">
|
||||
hash B
|
||||
</div>
|
||||
<code class="mono">{{ hashB || '-' }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,77 +5,148 @@
|
||||
<template>
|
||||
<div class="session-demo">
|
||||
<div class="header">
|
||||
<div class="title">🍪 Session + Cookie：有状态登录</div>
|
||||
<div class="title">
|
||||
🍪 Session + Cookie：有状态登录
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
默认手动推进：先看清楚状态再进入下一步（避免“自动下一步”误解）。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</button>
|
||||
<button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="next"
|
||||
:disabled="step !== 0"
|
||||
@click="start"
|
||||
>
|
||||
开始
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="step <= 1"
|
||||
@click="prev"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="step > 0" class="progress">
|
||||
<div
|
||||
v-if="step > 0"
|
||||
class="progress"
|
||||
>
|
||||
Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">浏览器（客户端）</div>
|
||||
<div class="card-title">
|
||||
浏览器（客户端）
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">Cookie Jar</div>
|
||||
<div v-if="cookie" class="kv">
|
||||
<div class="k">session_id</div>
|
||||
<div class="v mono">{{ cookie }}</div>
|
||||
<div class="box-title">
|
||||
Cookie Jar
|
||||
</div>
|
||||
<div
|
||||
v-if="cookie"
|
||||
class="kv"
|
||||
>
|
||||
<div class="k">
|
||||
session_id
|
||||
</div>
|
||||
<div class="v mono">
|
||||
{{ cookie }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="empty"
|
||||
>
|
||||
暂无 Cookie
|
||||
</div>
|
||||
<div v-else class="empty">暂无 Cookie</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-title">本步请求</div>
|
||||
<div class="box-title">
|
||||
本步请求
|
||||
</div>
|
||||
<pre class="code"><code>{{ clientRequest }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">服务器</div>
|
||||
<div class="card-title">
|
||||
服务器
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">Session Store（Redis/Memory）</div>
|
||||
<div v-if="session" class="kv">
|
||||
<div class="k mono">{{ cookie }}</div>
|
||||
<div class="box-title">
|
||||
Session Store（Redis/Memory）
|
||||
</div>
|
||||
<div
|
||||
v-if="session"
|
||||
class="kv"
|
||||
>
|
||||
<div class="k mono">
|
||||
{{ cookie }}
|
||||
</div>
|
||||
<div class="v">
|
||||
<div class="row"><span class="muted">user_id</span> 123</div>
|
||||
<div class="row"><span class="muted">username</span> alice</div>
|
||||
<div class="row"><span class="muted">role</span> admin</div>
|
||||
<div class="row">
|
||||
<span class="muted">user_id</span> 123
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="muted">username</span> alice
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="muted">role</span> admin
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty">暂无 Session</div>
|
||||
<div
|
||||
v-else
|
||||
class="empty"
|
||||
>
|
||||
暂无 Session
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-title">本步响应</div>
|
||||
<div class="box-title">
|
||||
本步响应
|
||||
</div>
|
||||
<pre class="code"><code>{{ serverResponse }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">{{ steps[step - 1]?.title || '流程说明' }}</div>
|
||||
<div class="desc">{{ steps[step - 1]?.desc }}</div>
|
||||
<div v-if="steps[step - 1]?.warn" class="warn">
|
||||
<div class="warn-title">注意</div>
|
||||
<div class="warn-text">{{ steps[step - 1]?.warn }}</div>
|
||||
<div class="card-title">
|
||||
{{ steps[step - 1]?.title || '流程说明' }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ steps[step - 1]?.desc }}
|
||||
</div>
|
||||
<div
|
||||
v-if="steps[step - 1]?.warn"
|
||||
class="warn"
|
||||
>
|
||||
<div class="warn-title">
|
||||
注意
|
||||
</div>
|
||||
<div class="warn-text">
|
||||
{{ steps[step - 1]?.warn }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
<template>
|
||||
<div class="session-vs-jwt-demo">
|
||||
<div class="header">
|
||||
<div class="title">🧩 Session vs JWT：怎么选？</div>
|
||||
<div class="title">
|
||||
🧩 Session vs JWT：怎么选？
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
选你的约束条件，得到推荐方案（并解释原因）。这比“背结论”更好用。
|
||||
</div>
|
||||
@@ -13,7 +15,9 @@
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">你的场景</div>
|
||||
<div class="card-title">
|
||||
你的场景
|
||||
</div>
|
||||
|
||||
<label class="label">主要客户端</label>
|
||||
<div class="row">
|
||||
@@ -96,30 +100,52 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">推荐</div>
|
||||
<div class="card-title">
|
||||
推荐
|
||||
</div>
|
||||
<div class="recommend">
|
||||
<div class="pill primary">{{ recommendation.title }}</div>
|
||||
<div class="desc">{{ recommendation.desc }}</div>
|
||||
<div class="pill primary">
|
||||
{{ recommendation.title }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ recommendation.desc }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-title">为什么</div>
|
||||
<div class="box-title">
|
||||
为什么
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in recommendation.reasons" :key="i">{{ x }}</li>
|
||||
<li
|
||||
v-for="(x, i) in recommendation.reasons"
|
||||
:key="i"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-title">落地建议</div>
|
||||
<div class="box-title">
|
||||
落地建议
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in recommendation.tips" :key="i">{{ x }}</li>
|
||||
<li
|
||||
v-for="(x, i) in recommendation.tips"
|
||||
:key="i"
|
||||
>
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">常见误区</div>
|
||||
<div class="card-title">
|
||||
常见误区
|
||||
</div>
|
||||
<ul class="list">
|
||||
<li>
|
||||
<strong>JWT ≠ 更安全：</strong>JWT
|
||||
|
||||
+46
-10
@@ -7,15 +7,32 @@
|
||||
</div>
|
||||
|
||||
<div class="comparison-grid">
|
||||
<div class="era-card" v-for="era in eras" :key="era.name" :class="{ active: selectedEra === era.name }" @click="selectedEra = era.name">
|
||||
<div class="era-icon">{{ era.icon }}</div>
|
||||
<div class="era-name">{{ era.name }}</div>
|
||||
<div class="era-year">{{ era.year }}</div>
|
||||
<div class="era-tag">{{ era.tag }}</div>
|
||||
<div
|
||||
v-for="era in eras"
|
||||
:key="era.name"
|
||||
class="era-card"
|
||||
:class="{ active: selectedEra === era.name }"
|
||||
@click="selectedEra = era.name"
|
||||
>
|
||||
<div class="era-icon">
|
||||
{{ era.icon }}
|
||||
</div>
|
||||
<div class="era-name">
|
||||
{{ era.name }}
|
||||
</div>
|
||||
<div class="era-year">
|
||||
{{ era.year }}
|
||||
</div>
|
||||
<div class="era-tag">
|
||||
{{ era.tag }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-panel" v-if="selectedEra">
|
||||
<div
|
||||
v-if="selectedEra"
|
||||
class="detail-panel"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ currentEra.icon }}</span>
|
||||
<h5>{{ currentEra.name }} ({{ currentEra.year }})</h5>
|
||||
@@ -25,28 +42,47 @@
|
||||
<div class="feature-section">
|
||||
<h6>🏗️ 架构特征</h6>
|
||||
<ul>
|
||||
<li v-for="(feat, i) in currentEra.features" :key="i">{{ feat }}</li>
|
||||
<li
|
||||
v-for="(feat, i) in currentEra.features"
|
||||
:key="i"
|
||||
>
|
||||
{{ feat }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-section">
|
||||
<h6>✅ 优点</h6>
|
||||
<ul>
|
||||
<li v-for="(pro, i) in currentEra.pros" :key="i">{{ pro }}</li>
|
||||
<li
|
||||
v-for="(pro, i) in currentEra.pros"
|
||||
:key="i"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-section">
|
||||
<h6>❌ 痛点</h6>
|
||||
<ul>
|
||||
<li v-for="(con, i) in currentEra.cons" :key="i">{{ con }}</li>
|
||||
<li
|
||||
v-for="(con, i) in currentEra.cons"
|
||||
:key="i"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tech-stack">
|
||||
<h6>🔧 典型技术</h6>
|
||||
<div class="tech-tags">
|
||||
<span v-for="(tech, i) in currentEra.techs" :key="i" class="tech-tag">{{ tech }}</span>
|
||||
<span
|
||||
v-for="(tech, i) in currentEra.techs"
|
||||
:key="i"
|
||||
class="tech-tag"
|
||||
>{{ tech }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+81
-31
@@ -2,7 +2,7 @@
|
||||
<div class="backend-evolution-demo">
|
||||
<!-- Timeline -->
|
||||
<div class="timeline-container">
|
||||
<div class="timeline-track"></div>
|
||||
<div class="timeline-track" />
|
||||
<button
|
||||
v-for="(stage, index) in stages"
|
||||
:key="index"
|
||||
@@ -14,7 +14,7 @@
|
||||
@click="currentStage = index"
|
||||
>
|
||||
<div class="node-dot">
|
||||
<div class="inner-dot"></div>
|
||||
<div class="inner-dot" />
|
||||
</div>
|
||||
<div class="node-content">
|
||||
<span class="year-badge">{{ stage.year }}</span>
|
||||
@@ -25,13 +25,17 @@
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content-wrapper">
|
||||
<transition name="fade-slide" mode="out-in">
|
||||
<div :key="currentStage" class="stage-content">
|
||||
<transition
|
||||
name="fade-slide"
|
||||
mode="out-in"
|
||||
>
|
||||
<div
|
||||
:key="currentStage"
|
||||
class="stage-content"
|
||||
>
|
||||
<div class="header-section">
|
||||
<h3>
|
||||
<span class="stage-index"
|
||||
>{{ indexToRoman(currentStage + 1) }}.</span
|
||||
>
|
||||
<span class="stage-index">{{ indexToRoman(currentStage + 1) }}.</span>
|
||||
{{ stages[currentStage].title }}
|
||||
</h3>
|
||||
<p>{{ stages[currentStage].desc }}</p>
|
||||
@@ -42,21 +46,34 @@
|
||||
<div class="mac-window arch-window">
|
||||
<div class="window-bar">
|
||||
<div class="traffic-lights">
|
||||
<span class="light red"></span>
|
||||
<span class="light yellow"></span>
|
||||
<span class="light green"></span>
|
||||
<span class="light red" />
|
||||
<span class="light yellow" />
|
||||
<span class="light green" />
|
||||
</div>
|
||||
<div class="window-title">
|
||||
Server Architecture
|
||||
</div>
|
||||
<div class="window-title">Server Architecture</div>
|
||||
</div>
|
||||
<div class="arch-canvas">
|
||||
<!-- Stage 0: CGI/Static -->
|
||||
<div v-if="currentStage === 0" class="arch-static">
|
||||
<div
|
||||
v-if="currentStage === 0"
|
||||
class="arch-static"
|
||||
>
|
||||
<div class="server-box">
|
||||
<div class="server-icon">🖥️ Physical Server</div>
|
||||
<div class="server-icon">
|
||||
🖥️ Physical Server
|
||||
</div>
|
||||
<div class="file-system">
|
||||
<div class="file">index.html</div>
|
||||
<div class="file">script.pl</div>
|
||||
<div class="file">image.jpg</div>
|
||||
<div class="file">
|
||||
index.html
|
||||
</div>
|
||||
<div class="file">
|
||||
script.pl
|
||||
</div>
|
||||
<div class="file">
|
||||
image.jpg
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="request-arrow">
|
||||
@@ -66,26 +83,42 @@
|
||||
</div>
|
||||
|
||||
<!-- Stage 1: Monolith -->
|
||||
<div v-if="currentStage === 1" class="arch-monolith">
|
||||
<div
|
||||
v-if="currentStage === 1"
|
||||
class="arch-monolith"
|
||||
>
|
||||
<div class="server-box big">
|
||||
<div class="server-icon">
|
||||
🦍 Monolithic App (Tomcat/Django)
|
||||
</div>
|
||||
<div class="modules-grid">
|
||||
<div class="module">User</div>
|
||||
<div class="module">Order</div>
|
||||
<div class="module">Payment</div>
|
||||
<div class="module">Product</div>
|
||||
<div class="module">
|
||||
User
|
||||
</div>
|
||||
<div class="module">
|
||||
Order
|
||||
</div>
|
||||
<div class="module">
|
||||
Payment
|
||||
</div>
|
||||
<div class="module">
|
||||
Product
|
||||
</div>
|
||||
</div>
|
||||
<div class="db-connection">
|
||||
<span>⬇ SQL</span>
|
||||
<div class="db-icon">🗄️ Single DB</div>
|
||||
<div class="db-icon">
|
||||
🗄️ Single DB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 2: Microservices -->
|
||||
<div v-if="currentStage === 2" class="arch-micro">
|
||||
<div
|
||||
v-if="currentStage === 2"
|
||||
class="arch-micro"
|
||||
>
|
||||
<div class="cloud-bg">
|
||||
<div class="service-mesh">
|
||||
<div class="service user">
|
||||
@@ -102,15 +135,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comm-lines">HTTP/gRPC</div>
|
||||
<div class="comm-lines">
|
||||
HTTP/gRPC
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 3: Serverless -->
|
||||
<div v-if="currentStage === 3" class="arch-serverless">
|
||||
<div
|
||||
v-if="currentStage === 3"
|
||||
class="arch-serverless"
|
||||
>
|
||||
<div class="function-cloud">
|
||||
<div class="func-node">λ Login</div>
|
||||
<div class="func-node">λ Checkout</div>
|
||||
<div class="func-node">λ ResizeImg</div>
|
||||
<div class="func-node">
|
||||
λ Login
|
||||
</div>
|
||||
<div class="func-node">
|
||||
λ Checkout
|
||||
</div>
|
||||
<div class="func-node">
|
||||
λ ResizeImg
|
||||
</div>
|
||||
</div>
|
||||
<div class="baas-layer">
|
||||
<span>BaaS (Auth0, Supabase, Stripe)</span>
|
||||
@@ -122,15 +166,21 @@
|
||||
<!-- Deployment/Ops View -->
|
||||
<div class="mac-window ops-window">
|
||||
<div class="window-bar">
|
||||
<div class="window-title">Deployment & Ops</div>
|
||||
<div class="window-title">
|
||||
Deployment & Ops
|
||||
</div>
|
||||
</div>
|
||||
<div class="ops-canvas">
|
||||
<div class="ops-card">
|
||||
<div class="ops-icon">{{ stages[currentStage].opsIcon }}</div>
|
||||
<div class="ops-icon">
|
||||
{{ stages[currentStage].opsIcon }}
|
||||
</div>
|
||||
<div class="ops-title">
|
||||
{{ stages[currentStage].opsTitle }}
|
||||
</div>
|
||||
<div class="ops-desc">{{ stages[currentStage].opsDesc }}</div>
|
||||
<div class="ops-desc">
|
||||
{{ stages[currentStage].opsDesc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+21
-6
@@ -14,8 +14,14 @@
|
||||
</div>
|
||||
|
||||
<div class="be-stage-content">
|
||||
<Transition name="be-fade" mode="out-in">
|
||||
<div :key="currentStage" class="be-stage-panel">
|
||||
<Transition
|
||||
name="be-fade"
|
||||
mode="out-in"
|
||||
>
|
||||
<div
|
||||
:key="currentStage"
|
||||
class="be-stage-panel"
|
||||
>
|
||||
<div class="be-visual-section">
|
||||
<div class="be-arch-diagram">
|
||||
<div
|
||||
@@ -24,10 +30,17 @@
|
||||
:class="['be-arch-node', node.type]"
|
||||
:style="node.style"
|
||||
>
|
||||
<div class="be-node-icon">{{ node.icon }}</div>
|
||||
<div class="be-node-label">{{ node.label }}</div>
|
||||
<div class="be-node-icon">
|
||||
{{ node.icon }}
|
||||
</div>
|
||||
<div class="be-node-label">
|
||||
{{ node.label }}
|
||||
</div>
|
||||
</div>
|
||||
<svg class="be-connections" viewBox="0 0 600 300">
|
||||
<svg
|
||||
class="be-connections"
|
||||
viewBox="0 0 600 300"
|
||||
>
|
||||
<path
|
||||
v-for="(conn, idx) in currentStageData.connections"
|
||||
:key="idx"
|
||||
@@ -39,7 +52,9 @@
|
||||
</div>
|
||||
|
||||
<div class="be-info-section">
|
||||
<h3 class="be-section-title">💡 核心特点</h3>
|
||||
<h3 class="be-section-title">
|
||||
💡 核心特点
|
||||
</h3>
|
||||
<ul class="be-feature-list">
|
||||
<li
|
||||
v-for="(feature, idx) in currentStageData.features"
|
||||
|
||||
@@ -5,41 +5,72 @@
|
||||
<template>
|
||||
<div class="cache-demo">
|
||||
<div class="header">
|
||||
<div class="title">缓存命中率：速度与成本的杠杆</div>
|
||||
<div class="subtitle">调整命中率，观察平均延迟与数据库压力</div>
|
||||
<div class="title">
|
||||
缓存命中率：速度与成本的杠杆
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
调整命中率，观察平均延迟与数据库压力
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<label>
|
||||
缓存命中率：<strong>{{ hitRatio }}%</strong>
|
||||
</label>
|
||||
<input v-model="hitRatio" type="range" min="0" max="100" step="1" />
|
||||
<input
|
||||
v-model="hitRatio"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
>
|
||||
<label class="toggle">
|
||||
<input v-model="cacheEnabled" type="checkbox" />
|
||||
<input
|
||||
v-model="cacheEnabled"
|
||||
type="checkbox"
|
||||
>
|
||||
启用缓存
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="metrics">
|
||||
<div class="metric-card">
|
||||
<div class="label">平均延迟</div>
|
||||
<div class="value">{{ avgLatency }} ms</div>
|
||||
<div class="label">
|
||||
平均延迟
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ avgLatency }} ms
|
||||
</div>
|
||||
<div class="meter">
|
||||
<div class="bar" :style="{ width: latencyBar + '%' }"></div>
|
||||
<div
|
||||
class="bar"
|
||||
:style="{ width: latencyBar + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="label">数据库请求比例</div>
|
||||
<div class="value">{{ dbRate }}%</div>
|
||||
<div class="label">
|
||||
数据库请求比例
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ dbRate }}%
|
||||
</div>
|
||||
<div class="meter">
|
||||
<div class="bar warn" :style="{ width: dbRate + '%' }"></div>
|
||||
<div
|
||||
class="bar warn"
|
||||
:style="{ width: dbRate + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="item"><span class="dot cache"></span>缓存命中</div>
|
||||
<div class="item"><span class="dot db"></span>数据库读取</div>
|
||||
<div class="item">
|
||||
<span class="dot cache" />缓存命中
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="dot db" />数据库读取
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,8 +6,12 @@
|
||||
<div class="cgi-demo">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<div class="title">CGI 串行处理：排队效应</div>
|
||||
<div class="subtitle">请求越多，响应越慢</div>
|
||||
<div class="title">
|
||||
CGI 串行处理：排队效应
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
请求越多，响应越慢
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
@@ -20,36 +24,61 @@
|
||||
min="1"
|
||||
max="200"
|
||||
step="1"
|
||||
/>
|
||||
>
|
||||
|
||||
<div class="toggles">
|
||||
<label class="toggle">
|
||||
<input v-model="staticCache" type="checkbox" />
|
||||
<input
|
||||
v-model="staticCache"
|
||||
type="checkbox"
|
||||
>
|
||||
启用静态缓存 (减少脚本开销)
|
||||
</label>
|
||||
<button class="burst" @click="simulateBurst">模拟秒杀</button>
|
||||
<button
|
||||
class="burst"
|
||||
@click="simulateBurst"
|
||||
>
|
||||
模拟秒杀
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="label">平均响应时间</div>
|
||||
<div class="value">{{ avgResponse }} ms</div>
|
||||
<div class="label">
|
||||
平均响应时间
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ avgResponse }} ms
|
||||
</div>
|
||||
<div class="meter">
|
||||
<div class="bar" :style="{ width: responseBar + '%' }"></div>
|
||||
<div
|
||||
class="bar"
|
||||
:style="{ width: responseBar + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="label">排队请求数</div>
|
||||
<div class="value">{{ queueLength }}</div>
|
||||
<div class="label">
|
||||
排队请求数
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ queueLength }}
|
||||
</div>
|
||||
<div class="meter">
|
||||
<div class="bar warn" :style="{ width: queueBar + '%' }"></div>
|
||||
<div
|
||||
class="bar warn"
|
||||
:style="{ width: queueBar + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<span class="dot" :class="statusClass"></span>
|
||||
<span
|
||||
class="dot"
|
||||
:class="statusClass"
|
||||
/>
|
||||
<span>{{ statusText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+66
-19
@@ -7,44 +7,91 @@
|
||||
</div>
|
||||
|
||||
<div class="docker-visualization">
|
||||
<div class="layer traditional" :class="{ active: showTraditional }" @click="showTraditional = true; showDocker = false">
|
||||
<div
|
||||
class="layer traditional"
|
||||
:class="{ active: showTraditional }"
|
||||
@click="showTraditional = true; showDocker = false"
|
||||
>
|
||||
<h5>传统部署</h5>
|
||||
<div class="server-stack">
|
||||
<div class="layer-item app">应用 A</div>
|
||||
<div class="layer-item conflict" v-if="showConflict">依赖冲突!</div>
|
||||
<div class="layer-item deps">依赖库 v1.0</div>
|
||||
<div class="layer-item os">操作系统</div>
|
||||
<div class="layer-item hardware">物理服务器</div>
|
||||
<div class="layer-item app">
|
||||
应用 A
|
||||
</div>
|
||||
<div
|
||||
v-if="showConflict"
|
||||
class="layer-item conflict"
|
||||
>
|
||||
依赖冲突!
|
||||
</div>
|
||||
<div class="layer-item deps">
|
||||
依赖库 v1.0
|
||||
</div>
|
||||
<div class="layer-item os">
|
||||
操作系统
|
||||
</div>
|
||||
<div class="layer-item hardware">
|
||||
物理服务器
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">VS</div>
|
||||
<div class="vs-divider">
|
||||
VS
|
||||
</div>
|
||||
|
||||
<div class="layer docker" :class="{ active: showDocker }" @click="showDocker = true; showTraditional = false">
|
||||
<div
|
||||
class="layer docker"
|
||||
:class="{ active: showDocker }"
|
||||
@click="showDocker = true; showTraditional = false"
|
||||
>
|
||||
<h5>Docker 容器</h5>
|
||||
<div class="docker-stack">
|
||||
<div class="containers">
|
||||
<div class="container-box">
|
||||
<div class="container-app">应用 A</div>
|
||||
<div class="container-deps">依赖 v1.0</div>
|
||||
<div class="container-app">
|
||||
应用 A
|
||||
</div>
|
||||
<div class="container-deps">
|
||||
依赖 v1.0
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-box">
|
||||
<div class="container-app">应用 B</div>
|
||||
<div class="container-deps">依赖 v2.0</div>
|
||||
<div class="container-app">
|
||||
应用 B
|
||||
</div>
|
||||
<div class="container-deps">
|
||||
依赖 v2.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docker-engine">Docker Engine</div>
|
||||
<div class="host-os">宿主机操作系统</div>
|
||||
<div class="hardware">物理服务器</div>
|
||||
<div class="docker-engine">
|
||||
Docker Engine
|
||||
</div>
|
||||
<div class="host-os">
|
||||
宿主机操作系统
|
||||
</div>
|
||||
<div class="hardware">
|
||||
物理服务器
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card" v-for="benefit in benefits" :key="benefit.title">
|
||||
<div class="benefit-icon">{{ benefit.icon }}</div>
|
||||
<div class="benefit-title">{{ benefit.title }}</div>
|
||||
<div class="benefit-desc">{{ benefit.desc }}</div>
|
||||
<div
|
||||
v-for="benefit in benefits"
|
||||
:key="benefit.title"
|
||||
class="benefit-card"
|
||||
>
|
||||
<div class="benefit-icon">
|
||||
{{ benefit.icon }}
|
||||
</div>
|
||||
<div class="benefit-title">
|
||||
{{ benefit.title }}
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
{{ benefit.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -13,18 +13,30 @@
|
||||
:class="{ active: currentStep === idx }"
|
||||
@click="currentStep = idx"
|
||||
>
|
||||
<div class="step-connector" v-if="idx > 0">
|
||||
<div class="connector-line"></div>
|
||||
<div
|
||||
v-if="idx > 0"
|
||||
class="step-connector"
|
||||
>
|
||||
<div class="connector-line" />
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-icon">{{ step.icon }}</div>
|
||||
<div class="step-era">{{ step.era }}</div>
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
<div class="step-icon">
|
||||
{{ step.icon }}
|
||||
</div>
|
||||
<div class="step-era">
|
||||
{{ step.era }}
|
||||
</div>
|
||||
<div class="step-title">
|
||||
{{ step.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-detail" v-if="currentStep !== null">
|
||||
<div
|
||||
v-if="currentStep !== null"
|
||||
class="step-detail"
|
||||
>
|
||||
<h5>{{ steps[currentStep].title }}</h5>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
@@ -42,7 +54,11 @@
|
||||
</div>
|
||||
<div class="tools-list">
|
||||
<span class="tools-label">代表工具:</span>
|
||||
<span v-for="tool in steps[currentStep].tools" :key="tool" class="tool-tag">{{ tool }}</span>
|
||||
<span
|
||||
v-for="tool in steps[currentStep].tools"
|
||||
:key="tool"
|
||||
class="tool-tag"
|
||||
>{{ tool }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,16 +14,33 @@
|
||||
:class="{ active: currentStage === idx }"
|
||||
@click="currentStage = idx"
|
||||
>
|
||||
<div class="stage-era">{{ stage.era }}</div>
|
||||
<div class="stage-icon">{{ stage.icon }}</div>
|
||||
<div class="stage-name">{{ stage.name }}</div>
|
||||
<div class="stage-arch">{{ stage.arch }}</div>
|
||||
<div class="stage-era">
|
||||
{{ stage.era }}
|
||||
</div>
|
||||
<div class="stage-icon">
|
||||
{{ stage.icon }}
|
||||
</div>
|
||||
<div class="stage-name">
|
||||
{{ stage.name }}
|
||||
</div>
|
||||
<div class="stage-arch">
|
||||
{{ stage.arch }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-detail" v-if="currentStage !== null">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div :key="currentStage" class="detail-panel">
|
||||
<div
|
||||
v-if="currentStage !== null"
|
||||
class="stage-detail"
|
||||
>
|
||||
<Transition
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
>
|
||||
<div
|
||||
:key="currentStage"
|
||||
class="detail-panel"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ stages[currentStage].icon }}</span>
|
||||
<h4>{{ stages[currentStage].restaurant }}</h4>
|
||||
@@ -40,7 +57,12 @@
|
||||
<div class="detail-section">
|
||||
<h5>⚡ 核心痛点</h5>
|
||||
<ul>
|
||||
<li v-for="(pain, i) in stages[currentStage].pains" :key="i">{{ pain }}</li>
|
||||
<li
|
||||
v-for="(pain, i) in stages[currentStage].pains"
|
||||
:key="i"
|
||||
>
|
||||
{{ pain }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,58 +7,99 @@
|
||||
|
||||
<div class="k8s-architecture">
|
||||
<div class="control-plane">
|
||||
<div class="plane-title">控制平面 (Control Plane)</div>
|
||||
<div class="plane-title">
|
||||
控制平面 (Control Plane)
|
||||
</div>
|
||||
<div class="components">
|
||||
<div class="component" v-for="comp in controlPlane" :key="comp.name"
|
||||
:class="{ active: activeComponent === comp.name }"
|
||||
@click="activeComponent = comp.name">
|
||||
<div class="comp-icon">{{ comp.icon }}</div>
|
||||
<div class="comp-name">{{ comp.name }}</div>
|
||||
<div class="comp-desc">{{ comp.desc }}</div>
|
||||
<div
|
||||
v-for="comp in controlPlane"
|
||||
:key="comp.name"
|
||||
class="component"
|
||||
:class="{ active: activeComponent === comp.name }"
|
||||
@click="activeComponent = comp.name"
|
||||
>
|
||||
<div class="comp-icon">
|
||||
{{ comp.icon }}
|
||||
</div>
|
||||
<div class="comp-name">
|
||||
{{ comp.name }}
|
||||
</div>
|
||||
<div class="comp-desc">
|
||||
{{ comp.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="worker-nodes">
|
||||
<div class="plane-title">工作节点 (Worker Nodes)</div>
|
||||
<div class="plane-title">
|
||||
工作节点 (Worker Nodes)
|
||||
</div>
|
||||
<div class="nodes-container">
|
||||
<div class="node" v-for="node in workerNodes" :key="node.name"
|
||||
:class="{
|
||||
active: node.status === 'active',
|
||||
failed: node.status === 'failed',
|
||||
selected: selectedNode === node.name
|
||||
}"
|
||||
@click="selectNode(node.name)">
|
||||
<div
|
||||
v-for="node in workerNodes"
|
||||
:key="node.name"
|
||||
class="node"
|
||||
:class="{
|
||||
active: node.status === 'active',
|
||||
failed: node.status === 'failed',
|
||||
selected: selectedNode === node.name
|
||||
}"
|
||||
@click="selectNode(node.name)"
|
||||
>
|
||||
<div class="node-header">
|
||||
<span class="node-icon">{{ node.icon }}</span>
|
||||
<span class="node-name">{{ node.name }}</span>
|
||||
<span class="node-status" :class="node.status">{{ node.statusText }}</span>
|
||||
<span
|
||||
class="node-status"
|
||||
:class="node.status"
|
||||
>{{ node.statusText }}</span>
|
||||
</div>
|
||||
<div class="node-resources">
|
||||
<div class="resource">
|
||||
<span class="res-label">CPU:</span>
|
||||
<div class="res-bar">
|
||||
<div class="res-fill" :style="{ width: node.cpu + '%' }" :class="{ high: node.cpu > 80 }"></div>
|
||||
<div
|
||||
class="res-fill"
|
||||
:style="{ width: node.cpu + '%' }"
|
||||
:class="{ high: node.cpu > 80 }"
|
||||
/>
|
||||
</div>
|
||||
<span class="res-value">{{ node.cpu }}%</span>
|
||||
</div>
|
||||
<div class="resource">
|
||||
<span class="res-label">内存:</span>
|
||||
<div class="res-bar">
|
||||
<div class="res-fill" :style="{ width: node.memory + '%' }" :class="{ high: node.memory > 80 }"></div>
|
||||
<div
|
||||
class="res-fill"
|
||||
:style="{ width: node.memory + '%' }"
|
||||
:class="{ high: node.memory > 80 }"
|
||||
/>
|
||||
</div>
|
||||
<span class="res-value">{{ node.memory }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-pods">
|
||||
<div class="pods-label">运行 Pod: {{ node.pods }} 个</div>
|
||||
<div class="pods-label">
|
||||
运行 Pod: {{ node.pods }} 个
|
||||
</div>
|
||||
<div class="pods-grid">
|
||||
<div v-for="n in Math.min(node.pods, 8)" :key="n" class="pod-dot" :class="{
|
||||
running: node.status === 'active',
|
||||
pending: node.status === 'pending',
|
||||
failed: node.status === 'failed'
|
||||
}"></div>
|
||||
<div v-if="node.pods > 8" class="pod-more">+{{ node.pods - 8 }}</div>
|
||||
<div
|
||||
v-for="n in Math.min(node.pods, 8)"
|
||||
:key="n"
|
||||
class="pod-dot"
|
||||
:class="{
|
||||
running: node.status === 'active',
|
||||
pending: node.status === 'pending',
|
||||
failed: node.status === 'failed'
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="node.pods > 8"
|
||||
class="pod-more"
|
||||
>
|
||||
+{{ node.pods - 8 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,14 +108,45 @@
|
||||
</div>
|
||||
|
||||
<div class="k8s-controls">
|
||||
<button class="control-btn" @click="simulateScheduling" :disabled="isScheduling">{{ isScheduling ? '调度中...' : '🚀 模拟 Pod 调度' }}</button>
|
||||
<button class="control-btn" @click="simulateScaling" :disabled="isScaling">{{ isScaling ? '扩容中...' : '📈 自动扩容' }}</button>
|
||||
<button class="control-btn danger" @click="simulateFailure" :disabled="isFailing">{{ isFailing ? '故障注入中...' : '💥 模拟节点故障' }}</button>
|
||||
<button class="control-btn" @click="resetCluster">🔄 重置集群</button>
|
||||
<button
|
||||
class="control-btn"
|
||||
:disabled="isScheduling"
|
||||
@click="simulateScheduling"
|
||||
>
|
||||
{{ isScheduling ? '调度中...' : '🚀 模拟 Pod 调度' }}
|
||||
</button>
|
||||
<button
|
||||
class="control-btn"
|
||||
:disabled="isScaling"
|
||||
@click="simulateScaling"
|
||||
>
|
||||
{{ isScaling ? '扩容中...' : '📈 自动扩容' }}
|
||||
</button>
|
||||
<button
|
||||
class="control-btn danger"
|
||||
:disabled="isFailing"
|
||||
@click="simulateFailure"
|
||||
>
|
||||
{{ isFailing ? '故障注入中...' : '💥 模拟节点故障' }}
|
||||
</button>
|
||||
<button
|
||||
class="control-btn"
|
||||
@click="resetCluster"
|
||||
>
|
||||
🔄 重置集群
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="k8s-logs" v-if="logs.length > 0">
|
||||
<div class="log-entry" v-for="(log, idx) in logs.slice(-5)" :key="idx" :class="log.level">
|
||||
<div
|
||||
v-if="logs.length > 0"
|
||||
class="k8s-logs"
|
||||
>
|
||||
<div
|
||||
v-for="(log, idx) in logs.slice(-5)"
|
||||
:key="idx"
|
||||
class="log-entry"
|
||||
:class="log.level"
|
||||
>
|
||||
<span class="log-time">{{ log.time }}</span>
|
||||
<span class="log-message">{{ log.message }}</span>
|
||||
</div>
|
||||
|
||||
+68
-23
@@ -5,65 +5,110 @@
|
||||
<template>
|
||||
<div class="microservice-latency-demo">
|
||||
<div class="header">
|
||||
<div class="title">微服务延迟：网络调用的代价</div>
|
||||
<div class="title">
|
||||
微服务延迟：网络调用的代价
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
每次服务间调用都增加网络延迟，累积后响应时间变长
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<label
|
||||
>服务间调用次数：<strong>{{ callCount }}</strong></label
|
||||
<label>服务间调用次数：<strong>{{ callCount }}</strong></label>
|
||||
<input
|
||||
v-model="callCount"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
>
|
||||
<input v-model="callCount" type="range" min="1" max="10" step="1" />
|
||||
|
||||
<label
|
||||
>网络延迟：<strong>{{ networkLatency }} ms</strong></label
|
||||
<label>网络延迟：<strong>{{ networkLatency }} ms</strong></label>
|
||||
<input
|
||||
v-model="networkLatency"
|
||||
type="range"
|
||||
min="1"
|
||||
max="50"
|
||||
step="1"
|
||||
>
|
||||
<input v-model="networkLatency" type="range" min="1" max="50" step="1" />
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="architecture monolith">
|
||||
<div class="arch-title">单体架构</div>
|
||||
<div class="arch-title">
|
||||
单体架构
|
||||
</div>
|
||||
<div class="arch-box">
|
||||
<div class="single-process">
|
||||
<div class="module">User</div>
|
||||
<div class="module">Order</div>
|
||||
<div class="module">Payment</div>
|
||||
<div class="module">
|
||||
User
|
||||
</div>
|
||||
<div class="module">
|
||||
Order
|
||||
</div>
|
||||
<div class="module">
|
||||
Payment
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="latency">
|
||||
<div class="latency-value">{{ monolithLatency }} ms</div>
|
||||
<div class="latency-label">内存调用（~0ms）</div>
|
||||
<div class="latency-value">
|
||||
{{ monolithLatency }} ms
|
||||
</div>
|
||||
<div class="latency-label">
|
||||
内存调用（~0ms）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="architecture microservices">
|
||||
<div class="arch-title">微服务架构</div>
|
||||
<div class="arch-title">
|
||||
微服务架构
|
||||
</div>
|
||||
<div class="arch-box">
|
||||
<div class="services">
|
||||
<div class="service">User Svc</div>
|
||||
<div class="network-arrow" v-if="callCount > 1">
|
||||
<div class="service">
|
||||
User Svc
|
||||
</div>
|
||||
<div
|
||||
v-if="callCount > 1"
|
||||
class="network-arrow"
|
||||
>
|
||||
⇄ {{ networkLatency }}ms
|
||||
</div>
|
||||
<div class="service">Order Svc</div>
|
||||
<div class="network-arrow" v-if="callCount > 2">
|
||||
<div class="service">
|
||||
Order Svc
|
||||
</div>
|
||||
<div
|
||||
v-if="callCount > 2"
|
||||
class="network-arrow"
|
||||
>
|
||||
⇄ {{ networkLatency }}ms
|
||||
</div>
|
||||
<div class="service">Payment Svc</div>
|
||||
<div class="service">
|
||||
Payment Svc
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="latency">
|
||||
<div class="latency-value high">{{ microLatency }} ms</div>
|
||||
<div class="latency-label">网络调用累积</div>
|
||||
<div class="latency-value high">
|
||||
{{ microLatency }} ms
|
||||
</div>
|
||||
<div class="latency-label">
|
||||
网络调用累积
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="insight">
|
||||
<div class="insight-icon" v-html="insightIcon"></div>
|
||||
<div class="insight-text">{{ insight }}</div>
|
||||
<div
|
||||
class="insight-icon"
|
||||
v-html="insightIcon"
|
||||
/>
|
||||
<div class="insight-text">
|
||||
{{ insight }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -16,7 +16,10 @@
|
||||
<div class="service-header">
|
||||
<span class="service-icon">{{ service.icon }}</span>
|
||||
<span class="service-name">{{ service.name }}</span>
|
||||
<span class="service-status" :class="service.status">{{ service.statusText }}</span>
|
||||
<span
|
||||
class="service-status"
|
||||
:class="service.status"
|
||||
>{{ service.statusText }}</span>
|
||||
</div>
|
||||
<div class="service-details">
|
||||
<div class="detail-row">
|
||||
@@ -38,18 +41,39 @@
|
||||
<div class="communication-flow">
|
||||
<h5>服务间通信链路</h5>
|
||||
<div class="flow-visualization">
|
||||
<div class="flow-step" v-for="(step, idx) in flowSteps" :key="idx"
|
||||
:class="{ active: currentFlowStep === idx, completed: currentFlowStep > idx }">
|
||||
<div class="step-number">{{ idx + 1 }}</div>
|
||||
<div
|
||||
v-for="(step, idx) in flowSteps"
|
||||
:key="idx"
|
||||
class="flow-step"
|
||||
:class="{ active: currentFlowStep === idx, completed: currentFlowStep > idx }"
|
||||
>
|
||||
<div class="step-number">
|
||||
{{ idx + 1 }}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-service">{{ step.service }}</div>
|
||||
<div class="step-action">{{ step.action }}</div>
|
||||
<div class="step-service">
|
||||
{{ step.service }}
|
||||
</div>
|
||||
<div class="step-action">
|
||||
{{ step.action }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-controls">
|
||||
<button class="flow-btn" @click="startFlow" :disabled="isFlowRunning">开始流程</button>
|
||||
<button class="flow-btn" @click="resetFlow">重置</button>
|
||||
<button
|
||||
class="flow-btn"
|
||||
:disabled="isFlowRunning"
|
||||
@click="startFlow"
|
||||
>
|
||||
开始流程
|
||||
</button>
|
||||
<button
|
||||
class="flow-btn"
|
||||
@click="resetFlow"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,8 +7,13 @@
|
||||
</div>
|
||||
|
||||
<div class="monolith-diagram">
|
||||
<div class="monolith-box" :class="{ crashed: hasCrashed }">
|
||||
<div class="monolith-header">单体应用进程</div>
|
||||
<div
|
||||
class="monolith-box"
|
||||
:class="{ crashed: hasCrashed }"
|
||||
>
|
||||
<div class="monolith-header">
|
||||
单体应用进程
|
||||
</div>
|
||||
<div class="modules-container">
|
||||
<div
|
||||
v-for="module in modules"
|
||||
@@ -17,14 +22,27 @@
|
||||
:class="{ active: activeModule === module.name, crashed: crashedModule === module.name }"
|
||||
@click="triggerModule(module.name)"
|
||||
>
|
||||
<div class="module-icon">{{ module.icon }}</div>
|
||||
<div class="module-name">{{ module.name }}</div>
|
||||
<div class="module-status" :class="module.status">{{ module.statusText }}</div>
|
||||
<div class="module-icon">
|
||||
{{ module.icon }}
|
||||
</div>
|
||||
<div class="module-name">
|
||||
{{ module.name }}
|
||||
</div>
|
||||
<div
|
||||
class="module-status"
|
||||
:class="module.status"
|
||||
>
|
||||
{{ module.statusText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shared-db">
|
||||
<div class="db-icon">🗄️</div>
|
||||
<div class="db-label">共享数据库</div>
|
||||
<div class="db-icon">
|
||||
🗄️
|
||||
</div>
|
||||
<div class="db-label">
|
||||
共享数据库
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -43,9 +61,24 @@
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="control-btn" @click="simulateNormalRequest">正常请求</button>
|
||||
<button class="control-btn danger" @click="simulateCrash">模拟模块故障</button>
|
||||
<button class="control-btn" @click="reset">重置</button>
|
||||
<button
|
||||
class="control-btn"
|
||||
@click="simulateNormalRequest"
|
||||
>
|
||||
正常请求
|
||||
</button>
|
||||
<button
|
||||
class="control-btn danger"
|
||||
@click="simulateCrash"
|
||||
>
|
||||
模拟模块故障
|
||||
</button>
|
||||
<button
|
||||
class="control-btn"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
|
||||
+46
-12
@@ -5,13 +5,19 @@
|
||||
<template>
|
||||
<div class="release-demo">
|
||||
<div class="header">
|
||||
<div class="title">单体发布：牵一发而动全身</div>
|
||||
<div class="subtitle">选择修改范围，看看“爆炸半径”</div>
|
||||
<div class="title">
|
||||
单体发布：牵一发而动全身
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
选择修改范围，看看“爆炸半径”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="modules">
|
||||
<div class="section-title">本次改动涉及</div>
|
||||
<div class="section-title">
|
||||
本次改动涉及
|
||||
</div>
|
||||
<div class="module-grid">
|
||||
<button
|
||||
v-for="module in modules"
|
||||
@@ -28,31 +34,59 @@
|
||||
<label>
|
||||
改动规模：<strong>{{ changeSizeLabel }}</strong>
|
||||
</label>
|
||||
<input v-model="changeSize" type="range" min="1" max="5" step="1" />
|
||||
<input
|
||||
v-model="changeSize"
|
||||
type="range"
|
||||
min="1"
|
||||
max="5"
|
||||
step="1"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result">
|
||||
<div class="risk-meter">
|
||||
<div class="risk-title">故障概率</div>
|
||||
<div class="risk-value">{{ riskPercent }}%</div>
|
||||
<div class="risk-title">
|
||||
故障概率
|
||||
</div>
|
||||
<div class="risk-value">
|
||||
{{ riskPercent }}%
|
||||
</div>
|
||||
<div class="meter">
|
||||
<div class="bar" :style="{ width: riskPercent + '%' }"></div>
|
||||
<div
|
||||
class="bar"
|
||||
:style="{ width: riskPercent + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="deploy-btn" @click="deployRelease">模拟发布</button>
|
||||
<div class="status" :class="deployStatusClass">
|
||||
<button
|
||||
class="deploy-btn"
|
||||
@click="deployRelease"
|
||||
>
|
||||
模拟发布
|
||||
</button>
|
||||
<div
|
||||
class="status"
|
||||
:class="deployStatusClass"
|
||||
>
|
||||
{{ deployStatus }}
|
||||
</div>
|
||||
|
||||
<div class="history">
|
||||
<div class="section-title">最近 3 次发布</div>
|
||||
<div class="section-title">
|
||||
最近 3 次发布
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="(item, index) in deployHistory" :key="index">
|
||||
<li
|
||||
v-for="(item, index) in deployHistory"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
<li v-if="deployHistory.length === 0">暂无记录</li>
|
||||
<li v-if="deployHistory.length === 0">
|
||||
暂无记录
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+40
-12
@@ -1,23 +1,43 @@
|
||||
<template>
|
||||
<div class="monolith-microservice-demo">
|
||||
<div class="controls">
|
||||
<button class="action-btn crash-btn" @click="triggerCrash">
|
||||
<button
|
||||
class="action-btn crash-btn"
|
||||
@click="triggerCrash"
|
||||
>
|
||||
💥 Simulate Order Service Crash
|
||||
</button>
|
||||
<button class="action-btn reset-btn" @click="reset">🔄 Reset</button>
|
||||
<button
|
||||
class="action-btn reset-btn"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="comparison-view">
|
||||
<!-- Monolith -->
|
||||
<div class="architecture-block monolith">
|
||||
<div class="arch-header">Monolith Architecture</div>
|
||||
<div class="server-container" :class="{ crashed: monolithCrashed }">
|
||||
<div class="arch-header">
|
||||
Monolith Architecture
|
||||
</div>
|
||||
<div
|
||||
class="server-container"
|
||||
:class="{ crashed: monolithCrashed }"
|
||||
>
|
||||
<div class="process-box">
|
||||
<div class="module user">User</div>
|
||||
<div class="module order" :class="{ error: monolithCrashed }">
|
||||
<div class="module user">
|
||||
User
|
||||
</div>
|
||||
<div
|
||||
class="module order"
|
||||
:class="{ error: monolithCrashed }"
|
||||
>
|
||||
Order
|
||||
</div>
|
||||
<div class="module pay">Payment</div>
|
||||
<div class="module pay">
|
||||
Payment
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-indicator">
|
||||
Status:
|
||||
@@ -32,19 +52,27 @@
|
||||
|
||||
<!-- Microservices -->
|
||||
<div class="architecture-block microservices">
|
||||
<div class="arch-header">Microservices Architecture</div>
|
||||
<div class="arch-header">
|
||||
Microservices Architecture
|
||||
</div>
|
||||
<div class="services-container">
|
||||
<div class="service-box user">
|
||||
<span>User Svc</span>
|
||||
<div class="dot green"></div>
|
||||
<div class="dot green" />
|
||||
</div>
|
||||
<div class="service-box order" :class="{ crashed: microCrashed }">
|
||||
<div
|
||||
class="service-box order"
|
||||
:class="{ crashed: microCrashed }"
|
||||
>
|
||||
<span>Order Svc</span>
|
||||
<div class="dot" :class="microCrashed ? 'red' : 'green'"></div>
|
||||
<div
|
||||
class="dot"
|
||||
:class="microCrashed ? 'red' : 'green'"
|
||||
/>
|
||||
</div>
|
||||
<div class="service-box pay">
|
||||
<span>Payment Svc</span>
|
||||
<div class="dot green"></div>
|
||||
<div class="dot green" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-indicator">
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
|
||||
<div class="demo-stage">
|
||||
<div class="client-zone">
|
||||
<div class="zone-title">👤 用户浏览器</div>
|
||||
<div class="zone-title">
|
||||
👤 用户浏览器
|
||||
</div>
|
||||
<div class="request-queue">
|
||||
<div
|
||||
v-for="(req, idx) in pendingRequests"
|
||||
@@ -30,7 +32,10 @@
|
||||
</div>
|
||||
|
||||
<div class="connection-zone">
|
||||
<div class="network-line" :class="{ busy: isProcessing }">
|
||||
<div
|
||||
class="network-line"
|
||||
:class="{ busy: isProcessing }"
|
||||
>
|
||||
<div class="packets">
|
||||
<div
|
||||
v-for="pkt in packets"
|
||||
@@ -43,27 +48,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="latency-display" v-if="currentLatency > 0">
|
||||
<div
|
||||
v-if="currentLatency > 0"
|
||||
class="latency-display"
|
||||
>
|
||||
⏱️ {{ currentLatency }}ms
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="server-zone">
|
||||
<div class="zone-title">🖥️ CGI 服务器</div>
|
||||
<div class="zone-title">
|
||||
🖥️ CGI 服务器
|
||||
</div>
|
||||
<div class="server-status">
|
||||
<div
|
||||
class="status-indicator"
|
||||
:class="{ processing: isProcessing }"
|
||||
>
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-dot" />
|
||||
<span class="status-text">{{ serverStatus }}</span>
|
||||
</div>
|
||||
<div class="cpu-usage" v-if="isProcessing">
|
||||
<div
|
||||
v-if="isProcessing"
|
||||
class="cpu-usage"
|
||||
>
|
||||
<div class="cpu-bar">
|
||||
<div
|
||||
class="cpu-fill"
|
||||
:style="{ width: cpuUsage + '%' }"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
<span class="cpu-text">CPU: {{ cpuUsage }}%</span>
|
||||
</div>
|
||||
@@ -79,7 +92,7 @@
|
||||
<div
|
||||
class="proc-bar"
|
||||
:style="{ width: proc.progress + '%' }"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+50
-13
@@ -6,25 +6,58 @@
|
||||
</div>
|
||||
|
||||
<div class="strategies">
|
||||
<div class="strategy-card" :class="{ active: activeStrategy === 'vertical' }" @click="activeStrategy = 'vertical'">
|
||||
<div class="strategy-icon">📦</div>
|
||||
<div class="strategy-name">垂直扩展</div>
|
||||
<div class="strategy-desc">买更强的机器</div>
|
||||
<div
|
||||
class="strategy-card"
|
||||
:class="{ active: activeStrategy === 'vertical' }"
|
||||
@click="activeStrategy = 'vertical'"
|
||||
>
|
||||
<div class="strategy-icon">
|
||||
📦
|
||||
</div>
|
||||
<div class="strategy-name">
|
||||
垂直扩展
|
||||
</div>
|
||||
<div class="strategy-desc">
|
||||
买更强的机器
|
||||
</div>
|
||||
<div class="visual-vertical">
|
||||
<div class="server" :class="{ scale: activeStrategy === 'vertical' }">
|
||||
<div class="cpu">CPU</div>
|
||||
<div class="memory">内存</div>
|
||||
<div
|
||||
class="server"
|
||||
:class="{ scale: activeStrategy === 'vertical' }"
|
||||
>
|
||||
<div class="cpu">
|
||||
CPU
|
||||
</div>
|
||||
<div class="memory">
|
||||
内存
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strategy-card" :class="{ active: activeStrategy === 'horizontal' }" @click="activeStrategy = 'horizontal'">
|
||||
<div class="strategy-icon">🔄</div>
|
||||
<div class="strategy-name">水平扩展</div>
|
||||
<div class="strategy-desc">加更多机器</div>
|
||||
<div
|
||||
class="strategy-card"
|
||||
:class="{ active: activeStrategy === 'horizontal' }"
|
||||
@click="activeStrategy = 'horizontal'"
|
||||
>
|
||||
<div class="strategy-icon">
|
||||
🔄
|
||||
</div>
|
||||
<div class="strategy-name">
|
||||
水平扩展
|
||||
</div>
|
||||
<div class="strategy-desc">
|
||||
加更多机器
|
||||
</div>
|
||||
<div class="visual-horizontal">
|
||||
<div class="servers">
|
||||
<div class="server-mini" v-for="n in 4" :key="n" :class="{ active: activeStrategy === 'horizontal' && n <= serverCount }" :style="{ animationDelay: (n * 0.1) + 's' }"></div>
|
||||
<div
|
||||
v-for="n in 4"
|
||||
:key="n"
|
||||
class="server-mini"
|
||||
:class="{ active: activeStrategy === 'horizontal' && n <= serverCount }"
|
||||
:style="{ animationDelay: (n * 0.1) + 's' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,7 +69,11 @@
|
||||
<span>垂直扩展</span>
|
||||
<span>水平扩展</span>
|
||||
</div>
|
||||
<div class="table-row" v-for="item in comparisonData" :key="item.dim">
|
||||
<div
|
||||
v-for="item in comparisonData"
|
||||
:key="item.dim"
|
||||
class="table-row"
|
||||
>
|
||||
<span>{{ item.dim }}</span>
|
||||
<span :class="{ better: item.verticalBetter }">{{ item.vertical }}</span>
|
||||
<span :class="{ better: item.horizontalBetter }">{{ item.horizontal }}</span>
|
||||
|
||||
+46
-13
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="serverless-demo">
|
||||
<div class="header">
|
||||
<div class="title">Serverless：按需付费 + 自动扩缩</div>
|
||||
<div class="subtitle">调整调用量与耗时，比较固定服务器成本</div>
|
||||
<div class="title">
|
||||
Serverless：按需付费 + 自动扩缩
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
调整调用量与耗时，比较固定服务器成本
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
@@ -20,39 +24,68 @@
|
||||
min="0"
|
||||
max="5000000"
|
||||
step="50000"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label>
|
||||
平均耗时：<strong>{{ durationMs }} ms</strong>
|
||||
</label>
|
||||
<input v-model="durationMs" type="range" min="20" max="800" step="10" />
|
||||
<input
|
||||
v-model="durationMs"
|
||||
type="range"
|
||||
min="20"
|
||||
max="800"
|
||||
step="10"
|
||||
>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label>
|
||||
峰值并发：<strong>{{ peakRps }}</strong> rps
|
||||
</label>
|
||||
<input v-model="peakRps" type="range" min="10" max="8000" step="50" />
|
||||
<input
|
||||
v-model="peakRps"
|
||||
type="range"
|
||||
min="10"
|
||||
max="8000"
|
||||
step="50"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<div class="card-title">Serverless 估算</div>
|
||||
<div class="card-value">${{ serverlessCost }}</div>
|
||||
<div class="card-desc">按量计费（示意）</div>
|
||||
<div class="card-title">
|
||||
Serverless 估算
|
||||
</div>
|
||||
<div class="card-value">
|
||||
${{ serverlessCost }}
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
按量计费（示意）
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">固定服务器</div>
|
||||
<div class="card-value">${{ serverCost }}</div>
|
||||
<div class="card-desc">需预留 {{ requiredServers }} 台服务器</div>
|
||||
<div class="card-title">
|
||||
固定服务器
|
||||
</div>
|
||||
<div class="card-value">
|
||||
${{ serverCost }}
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
需预留 {{ requiredServers }} 台服务器
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="autoscale">
|
||||
<div class="label">扩缩容状态</div>
|
||||
<div class="label">
|
||||
扩缩容状态
|
||||
</div>
|
||||
<div class="scale-bar">
|
||||
<div class="scale" :style="{ width: scalePercent + '%' }"></div>
|
||||
<div
|
||||
class="scale"
|
||||
:style="{ width: scalePercent + '%' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="scale-text">
|
||||
{{ scaleHint }}
|
||||
|
||||
@@ -7,11 +7,29 @@
|
||||
|
||||
<div class="serverless-visualization">
|
||||
<div class="function-grid">
|
||||
<div v-for="func in functions" :key="func.name" class="function-card" :class="{ active: func.state === 'running', cold: func.state === 'cold', warming: func.state === 'warming' }" @click="triggerFunction(func.name)">
|
||||
<div class="function-icon">{{ func.icon }}</div>
|
||||
<div class="function-name">{{ func.name }}</div>
|
||||
<div class="function-state" :class="func.state">{{ stateText(func.state) }}</div>
|
||||
<div class="function-metrics" v-if="func.invocations > 0">
|
||||
<div
|
||||
v-for="func in functions"
|
||||
:key="func.name"
|
||||
class="function-card"
|
||||
:class="{ active: func.state === 'running', cold: func.state === 'cold', warming: func.state === 'warming' }"
|
||||
@click="triggerFunction(func.name)"
|
||||
>
|
||||
<div class="function-icon">
|
||||
{{ func.icon }}
|
||||
</div>
|
||||
<div class="function-name">
|
||||
{{ func.name }}
|
||||
</div>
|
||||
<div
|
||||
class="function-state"
|
||||
:class="func.state"
|
||||
>
|
||||
{{ stateText(func.state) }}
|
||||
</div>
|
||||
<div
|
||||
v-if="func.invocations > 0"
|
||||
class="function-metrics"
|
||||
>
|
||||
<span>调用: {{ func.invocations }}</span>
|
||||
<span>平均: {{ func.avgDuration }}ms</span>
|
||||
</div>
|
||||
@@ -19,7 +37,9 @@
|
||||
</div>
|
||||
|
||||
<div class="auto-scaling-panel">
|
||||
<div class="scaling-title">自动扩缩容状态</div>
|
||||
<div class="scaling-title">
|
||||
自动扩缩容状态
|
||||
</div>
|
||||
<div class="scaling-metrics">
|
||||
<div class="metric">
|
||||
<span class="metric-label">并发请求:</span>
|
||||
@@ -35,15 +55,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="scaling-chart">
|
||||
<div v-for="(point, idx) in scalingHistory" :key="idx" class="chart-bar" :style="{ height: point + '%' }" :class="{ high: point > 70 }"></div>
|
||||
<div
|
||||
v-for="(point, idx) in scalingHistory"
|
||||
:key="idx"
|
||||
class="chart-bar"
|
||||
:style="{ height: point + '%' }"
|
||||
:class="{ high: point > 70 }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="traffic-simulator">
|
||||
<div class="simulator-title">流量模拟器</div>
|
||||
<div class="simulator-title">
|
||||
流量模拟器
|
||||
</div>
|
||||
<div class="traffic-patterns">
|
||||
<button v-for="pattern in trafficPatterns" :key="pattern.name" class="pattern-btn" :class="{ active: currentPattern === pattern.name }" @click="applyPattern(pattern)">
|
||||
<button
|
||||
v-for="pattern in trafficPatterns"
|
||||
:key="pattern.name"
|
||||
class="pattern-btn"
|
||||
:class="{ active: currentPattern === pattern.name }"
|
||||
@click="applyPattern(pattern)"
|
||||
>
|
||||
<span class="pattern-icon">{{ pattern.icon }}</span>
|
||||
<span class="pattern-name">{{ pattern.name }}</span>
|
||||
<span class="pattern-desc">{{ pattern.desc }}</span>
|
||||
|
||||
+10
-4
@@ -15,8 +15,8 @@
|
||||
@click="activeEra = idx"
|
||||
>
|
||||
<div class="era-marker">
|
||||
<div class="era-dot"></div>
|
||||
<div class="era-line"></div>
|
||||
<div class="era-dot" />
|
||||
<div class="era-line" />
|
||||
</div>
|
||||
|
||||
<div class="era-content">
|
||||
@@ -27,8 +27,14 @@
|
||||
</div>
|
||||
|
||||
<div class="tech-categories">
|
||||
<div class="category" v-for="(cat, cIdx) in era.categories" :key="cIdx">
|
||||
<div class="category-name">{{ cat.name }}</div>
|
||||
<div
|
||||
v-for="(cat, cIdx) in era.categories"
|
||||
:key="cIdx"
|
||||
class="category"
|
||||
>
|
||||
<div class="category-name">
|
||||
{{ cat.name }}
|
||||
</div>
|
||||
<div class="tech-tags">
|
||||
<span
|
||||
v-for="(tech, tIdx) in cat.techs"
|
||||
|
||||
+36
-9
@@ -18,15 +18,26 @@
|
||||
:class="{ active: selectedLang === lang.name }"
|
||||
@click="selectedLang = lang.name"
|
||||
>
|
||||
<div class="lang-icon">{{ lang.icon }}</div>
|
||||
<div class="lang-name">{{ lang.name }}</div>
|
||||
<div class="lang-metaphor">{{ lang.metaphor }}</div>
|
||||
<div class="lang-description">{{ lang.description }}</div>
|
||||
<div class="lang-icon">
|
||||
{{ lang.icon }}
|
||||
</div>
|
||||
<div class="lang-name">
|
||||
{{ lang.name }}
|
||||
</div>
|
||||
<div class="lang-metaphor">
|
||||
{{ lang.metaphor }}
|
||||
</div>
|
||||
<div class="lang-description">
|
||||
{{ lang.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="fade">
|
||||
<div v-if="selectedLang" class="lang-detail">
|
||||
<div
|
||||
v-if="selectedLang"
|
||||
class="lang-detail"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ getCurrentLang().icon }}</span>
|
||||
<span class="detail-title">{{ getCurrentLang().name }}</span>
|
||||
@@ -36,7 +47,10 @@
|
||||
<div class="detail-section">
|
||||
<h6>🎯 适用场景</h6>
|
||||
<ul>
|
||||
<li v-for="scenario in getCurrentLang().scenarios" :key="scenario">
|
||||
<li
|
||||
v-for="scenario in getCurrentLang().scenarios"
|
||||
:key="scenario"
|
||||
>
|
||||
{{ scenario }}
|
||||
</li>
|
||||
</ul>
|
||||
@@ -45,21 +59,34 @@
|
||||
<div class="detail-section">
|
||||
<h6>✅ 优势</h6>
|
||||
<ul>
|
||||
<li v-for="pro in getCurrentLang().pros" :key="pro">{{ pro }}</li>
|
||||
<li
|
||||
v-for="pro in getCurrentLang().pros"
|
||||
:key="pro"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h6>❌ 劣势</h6>
|
||||
<ul>
|
||||
<li v-for="con in getCurrentLang().cons" :key="con">{{ con }}</li>
|
||||
<li
|
||||
v-for="con in getCurrentLang().cons"
|
||||
:key="con"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<div v-if="!selectedLang" class="hint-text">
|
||||
<div
|
||||
v-if="!selectedLang"
|
||||
class="hint-text"
|
||||
>
|
||||
👆 点击上方任意语言，查看详细说明
|
||||
</div>
|
||||
|
||||
|
||||
+41
-10
@@ -18,15 +18,30 @@
|
||||
:class="{ active: selectedModel === model.name }"
|
||||
@click="selectedModel = model.name"
|
||||
>
|
||||
<div class="model-icon">{{ model.icon }}</div>
|
||||
<div class="model-name">{{ model.name }}</div>
|
||||
<div class="model-lang">{{ model.language }}</div>
|
||||
<div class="model-desc">{{ model.description }}</div>
|
||||
<div class="model-icon">
|
||||
{{ model.icon }}
|
||||
</div>
|
||||
<div class="model-name">
|
||||
{{ model.name }}
|
||||
</div>
|
||||
<div class="model-lang">
|
||||
{{ model.language }}
|
||||
</div>
|
||||
<div class="model-desc">
|
||||
{{ model.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div v-if="selectedModel" :key="selectedModel" class="model-detail">
|
||||
<Transition
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
>
|
||||
<div
|
||||
v-if="selectedModel"
|
||||
:key="selectedModel"
|
||||
class="model-detail"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<h6>{{ getModelInfo().title }}</h6>
|
||||
</div>
|
||||
@@ -35,13 +50,19 @@
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">并发能力</span>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-fill" :style="{ width: getModelInfo().concurrency + '%' }"></div>
|
||||
<div
|
||||
class="stat-fill"
|
||||
:style="{ width: getModelInfo().concurrency + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">内存开销</span>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-fill memory" :style="{ width: getModelInfo().memory + '%' }"></div>
|
||||
<div
|
||||
class="stat-fill memory"
|
||||
:style="{ width: getModelInfo().memory + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,13 +75,23 @@
|
||||
<div class="pros">
|
||||
<strong>✅ 优势</strong>
|
||||
<ul>
|
||||
<li v-for="pro in getModelInfo().pros" :key="pro">{{ pro }}</li>
|
||||
<li
|
||||
v-for="pro in getModelInfo().pros"
|
||||
:key="pro"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<strong>❌ 劣势</strong>
|
||||
<ul>
|
||||
<li v-for="con in getModelInfo().cons" :key="con">{{ con }}</li>
|
||||
<li
|
||||
v-for="con in getModelInfo().cons"
|
||||
:key="con"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+12
-4
@@ -13,9 +13,15 @@
|
||||
<div class="task-selector">
|
||||
<label>选择任务：</label>
|
||||
<select v-model="selectedTask">
|
||||
<option value="rest">REST API</option>
|
||||
<option value="web">Web 应用</option>
|
||||
<option value="script">数据处理脚本</option>
|
||||
<option value="rest">
|
||||
REST API
|
||||
</option>
|
||||
<option value="web">
|
||||
Web 应用
|
||||
</option>
|
||||
<option value="script">
|
||||
数据处理脚本
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +35,9 @@
|
||||
:key="lang.name"
|
||||
class="bar-wrapper"
|
||||
>
|
||||
<div class="bar-label">{{ lang.name }}</div>
|
||||
<div class="bar-label">
|
||||
{{ lang.name }}
|
||||
</div>
|
||||
<div class="bar-track">
|
||||
<div
|
||||
class="bar-fill"
|
||||
|
||||
+6
-2
@@ -11,7 +11,9 @@
|
||||
</div>
|
||||
|
||||
<div class="dimension-selector">
|
||||
<div class="dimension-label">选择比较维度：</div>
|
||||
<div class="dimension-label">
|
||||
选择比较维度：
|
||||
</div>
|
||||
<div class="dimension-buttons">
|
||||
<button
|
||||
v-for="dim in dimensions"
|
||||
@@ -37,7 +39,9 @@
|
||||
:key="lang.name"
|
||||
class="bar-wrapper"
|
||||
>
|
||||
<div class="bar-label">{{ lang.name }}</div>
|
||||
<div class="bar-label">
|
||||
{{ lang.name }}
|
||||
</div>
|
||||
<div class="bar-track">
|
||||
<div
|
||||
class="bar-fill"
|
||||
|
||||
+9
-3
@@ -16,9 +16,15 @@
|
||||
:key="eco.name"
|
||||
class="eco-card"
|
||||
>
|
||||
<div class="eco-icon">{{ eco.icon }}</div>
|
||||
<div class="eco-name">{{ eco.name }}</div>
|
||||
<div class="eco-lang">{{ eco.language }}</div>
|
||||
<div class="eco-icon">
|
||||
{{ eco.icon }}
|
||||
</div>
|
||||
<div class="eco-name">
|
||||
{{ eco.name }}
|
||||
</div>
|
||||
<div class="eco-lang">
|
||||
{{ eco.language }}
|
||||
</div>
|
||||
<div class="eco-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">包数量</span>
|
||||
|
||||
+16
-4
@@ -17,7 +17,9 @@
|
||||
class="question-card"
|
||||
:class="{ active: currentQuestion === index }"
|
||||
>
|
||||
<div class="question-number">{{ index + 1 }}</div>
|
||||
<div class="question-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="question-content">
|
||||
<h6>{{ question.text }}</h6>
|
||||
<div class="options">
|
||||
@@ -36,19 +38,29 @@
|
||||
</div>
|
||||
|
||||
<Transition name="fade">
|
||||
<div v-if="recommendation" class="recommendation-panel">
|
||||
<div
|
||||
v-if="recommendation"
|
||||
class="recommendation-panel"
|
||||
>
|
||||
<div class="rec-header">
|
||||
<span class="rec-icon">{{ recommendation.icon }}</span>
|
||||
<div class="rec-title">
|
||||
<h6>推荐语言</h6>
|
||||
<div class="rec-name">{{ recommendation.language }}</div>
|
||||
<div class="rec-name">
|
||||
{{ recommendation.language }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rec-reason">
|
||||
<strong>选择理由：</strong>
|
||||
<p>{{ recommendation.reason }}</p>
|
||||
</div>
|
||||
<button class="reset-btn" @click="reset">🔄 重新选择</button>
|
||||
<button
|
||||
class="reset-btn"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重新选择
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
|
||||
+9
-3
@@ -16,9 +16,15 @@
|
||||
:key="model.name"
|
||||
class="model-card"
|
||||
>
|
||||
<div class="model-icon">{{ model.icon }}</div>
|
||||
<div class="model-name">{{ model.name }}</div>
|
||||
<div class="model-desc">{{ model.description }}</div>
|
||||
<div class="model-icon">
|
||||
{{ model.icon }}
|
||||
</div>
|
||||
<div class="model-name">
|
||||
{{ model.name }}
|
||||
</div>
|
||||
<div class="model-desc">
|
||||
{{ model.description }}
|
||||
</div>
|
||||
<div class="model-languages">
|
||||
<span
|
||||
v-for="lang in model.languages"
|
||||
|
||||
+17
-4
@@ -13,13 +13,24 @@
|
||||
<div class="control-panel">
|
||||
<div class="scenario-selector">
|
||||
<label>选择赛道：</label>
|
||||
<select v-model="selectedScenario" @change="runBenchmark">
|
||||
<option v-for="scenario in scenarios" :key="scenario.id" :value="scenario.id">
|
||||
<select
|
||||
v-model="selectedScenario"
|
||||
@change="runBenchmark"
|
||||
>
|
||||
<option
|
||||
v-for="scenario in scenarios"
|
||||
:key="scenario.id"
|
||||
:value="scenario.id"
|
||||
>
|
||||
{{ scenario.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="run-btn" @click="runBenchmark" :disabled="isRunning">
|
||||
<button
|
||||
class="run-btn"
|
||||
:disabled="isRunning"
|
||||
@click="runBenchmark"
|
||||
>
|
||||
{{ isRunning ? '测试中...' : '▶ 开始测试' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -34,7 +45,9 @@
|
||||
:key="result.language"
|
||||
class="bar-wrapper"
|
||||
>
|
||||
<div class="bar-label">{{ result.language }}</div>
|
||||
<div class="bar-label">
|
||||
{{ result.language }}
|
||||
</div>
|
||||
<div class="bar-track">
|
||||
<div
|
||||
class="bar-fill"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user