feat(docs): add NavGrid/NavCard components and restructure stage pages
- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
This commit is contained in:
sanbuphy
+234
-333
@@ -1,421 +1,322 @@
|
||||
<template>
|
||||
<div class="rule-learning-demo">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
规则 vs 学习：你写阈值，还是让模型从数据里“推断”阈值？
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
右侧允许你自己添加样本；点击“训练”只做一次计算，不会自动连着做下一步。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">规则系统（手写 If/Else）</div>
|
||||
|
||||
<div class="row">
|
||||
<label class="label">阈值 size ></label>
|
||||
<input
|
||||
v-model.number="ruleThreshold"
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
class="input"
|
||||
/>
|
||||
<span class="muted">（你必须明确写出来）</span>
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>规则 vs 学习</h4>
|
||||
<p class="subtitle">
|
||||
对比：你写阈值 (规则) vs 让模型从数据里"推断"阈值 (学习)
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="row">
|
||||
<label class="label">测试输入 size</label>
|
||||
<input
|
||||
v-model.number="testInput"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
class="range"
|
||||
/>
|
||||
<code class="mono">{{ testInput }}</code>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<!-- Rule Based -->
|
||||
<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>
|
||||
</template>
|
||||
<div class="panel-content">
|
||||
<div class="control-row">
|
||||
<span class="label">阈值 size ></span>
|
||||
<el-input-number
|
||||
v-model="ruleThreshold"
|
||||
:min="1"
|
||||
:max="10"
|
||||
size="small"
|
||||
/>
|
||||
<span class="text-xs text-gray">（必须明确写出）</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="result"
|
||||
:class="{
|
||||
good: ruleResult.label === '🍎',
|
||||
bad: ruleResult.label === '🍒'
|
||||
}"
|
||||
>
|
||||
<div class="result-title">输出</div>
|
||||
<div class="result-value">{{ ruleResult.text }}</div>
|
||||
<div class="result-note mono">
|
||||
if (size > {{ ruleThreshold }}) return 🍎 else return 🍒
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-row mt-4">
|
||||
<span class="label">测试输入 size</span>
|
||||
<el-slider
|
||||
v-model="testInput"
|
||||
:min="1"
|
||||
:max="10"
|
||||
show-input
|
||||
input-size="small"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="hint">
|
||||
当环境变化（比如“苹果平均变小了”），你需要手动改规则；规则越多，维护成本越高。
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="result-box mt-4"
|
||||
:class="{
|
||||
good: ruleResult.label === '🍎',
|
||||
bad: ruleResult.label === '🍒'
|
||||
}"
|
||||
>
|
||||
<div class="result-title">输出</div>
|
||||
<div class="result-value">{{ ruleResult.text }}</div>
|
||||
<div class="result-code">
|
||||
if (size > {{ ruleThreshold }}) return 🍎 else return 🍒
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">机器学习（从样本推断边界）</div>
|
||||
|
||||
<div class="row">
|
||||
<label class="label">添加训练样本</label>
|
||||
<input
|
||||
v-model.number="newSize"
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
class="input"
|
||||
/>
|
||||
<select v-model="newLabel" class="select">
|
||||
<option value="🍒">🍒 樱桃（小）</option>
|
||||
<option value="🍎">🍎 苹果（大）</option>
|
||||
</select>
|
||||
<button class="btn" @click="addSample">添加</button>
|
||||
</div>
|
||||
|
||||
<div class="samples">
|
||||
<div v-if="trainingData.length === 0" class="empty muted">
|
||||
还没有样本：先添加 2-4 个样本再训练。
|
||||
</div>
|
||||
<div v-else class="chips">
|
||||
<div v-for="(p, i) in trainingData" :key="p.id" class="chip">
|
||||
<span class="mono">{{ p.size }}</span>
|
||||
<span class="sep">→</span>
|
||||
<span class="chip-label">{{ p.label }}</span>
|
||||
<button class="chip-x" @click="removeSample(i)">×</button>
|
||||
<el-alert
|
||||
title="当环境变化（比如'苹果平均变小了'），你需要手动改规则；规则越多，维护成本越高。"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<div class="controls">
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="train"
|
||||
:disabled="trainingData.length < 2"
|
||||
>
|
||||
训练（推断阈值）
|
||||
</button>
|
||||
<button class="btn" @click="resetLearning">重置样本</button>
|
||||
</div>
|
||||
<!-- Machine Learning -->
|
||||
<el-col :xs="24" :md="12">
|
||||
<el-card shadow="never" class="panel-card">
|
||||
<template #header>
|
||||
<div class="panel-title">机器学习（从样本推断边界）</div>
|
||||
</template>
|
||||
<div class="panel-content">
|
||||
<div class="control-row">
|
||||
<el-input-number
|
||||
v-model="newSize"
|
||||
:min="1"
|
||||
:max="10"
|
||||
size="small"
|
||||
placeholder="Size"
|
||||
/>
|
||||
<el-select
|
||||
v-model="newLabel"
|
||||
size="small"
|
||||
placeholder="Label"
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option label="🍒 樱桃" value="🍒" />
|
||||
<el-option label="🍎 苹果" value="🍎" />
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="addSample"
|
||||
>添加样本</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label class="label">测试输入 size</label>
|
||||
<input
|
||||
v-model.number="testInput"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
class="range"
|
||||
/>
|
||||
<code class="mono">{{ testInput }}</code>
|
||||
</div>
|
||||
<div class="samples-area mt-4">
|
||||
<el-empty
|
||||
v-if="trainingData.length === 0"
|
||||
description="还没有样本：先添加 2-4 个样本再训练"
|
||||
:image-size="40"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
{{ p.size }} → {{ p.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="result"
|
||||
:class="{
|
||||
good: mlResult.label === '🍎',
|
||||
bad: mlResult.label === '🍒'
|
||||
}"
|
||||
>
|
||||
<div class="result-title">输出</div>
|
||||
<div class="result-value">{{ mlResult.text }}</div>
|
||||
<div class="result-note">
|
||||
<span class="muted">学习到的阈值：</span>
|
||||
<code class="mono">{{ learnedThresholdDisplay }}</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions mt-4 flex gap-2">
|
||||
<el-button
|
||||
type="success"
|
||||
@click="train"
|
||||
:disabled="trainingData.length < 2"
|
||||
>
|
||||
训练（推断阈值）
|
||||
</el-button>
|
||||
<el-button @click="resetLearning">重置</el-button>
|
||||
</div>
|
||||
|
||||
<div class="hint">
|
||||
这里的“训练”是极简示意：用样本推断一个分界点（阈值）。真实模型会用更复杂的损失函数与优化算法。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="learnedThreshold !== null" class="learned-result mt-4">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
show-icon
|
||||
title="学习完成！"
|
||||
>
|
||||
<p>
|
||||
模型推断出阈值应为: <strong>{{ learnedThreshold }}</strong>
|
||||
</p>
|
||||
<p class="text-xs">
|
||||
(大于 {{ learnedThreshold }} 是苹果，否则是樱桃)
|
||||
</p>
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const testInput = ref(5)
|
||||
// Rule Based Logic
|
||||
const ruleThreshold = ref(5)
|
||||
const testInput = ref(6)
|
||||
|
||||
// Rule based
|
||||
const ruleThreshold = ref(6)
|
||||
const ruleResult = computed(() => {
|
||||
const isApple = testInput.value > ruleThreshold.value
|
||||
return {
|
||||
label: isApple ? '🍎' : '🍒',
|
||||
text: isApple ? 'Big 🍎' : 'Small 🍒'
|
||||
if (testInput.value > ruleThreshold.value) {
|
||||
return { label: '🍎', text: '🍎 苹果' }
|
||||
} else {
|
||||
return { label: '🍒', text: '🍒 樱桃' }
|
||||
}
|
||||
})
|
||||
|
||||
// Learning (toy)
|
||||
let idCounter = 0
|
||||
const trainingData = ref([
|
||||
{ id: idCounter++, size: 2, label: '🍒' },
|
||||
{ id: idCounter++, size: 3, label: '🍒' },
|
||||
{ id: idCounter++, size: 8, label: '🍎' },
|
||||
{ id: idCounter++, size: 9, label: '🍎' }
|
||||
])
|
||||
|
||||
// ML Logic
|
||||
const newSize = ref(5)
|
||||
const newLabel = ref('🍒')
|
||||
const isTrained = ref(false)
|
||||
const learnedThreshold = ref(5.5)
|
||||
const newLabel = ref('🍎')
|
||||
const trainingData = ref([
|
||||
{ id: 1, size: 2, label: '🍒' },
|
||||
{ id: 2, size: 8, label: '🍎' }
|
||||
])
|
||||
const learnedThreshold = ref(null)
|
||||
|
||||
const addSample = () => {
|
||||
const size = Math.max(1, Math.min(10, Number(newSize.value)))
|
||||
trainingData.value.push({ id: idCounter++, size, label: newLabel.value })
|
||||
isTrained.value = false
|
||||
trainingData.value.push({
|
||||
id: Date.now(),
|
||||
size: newSize.value,
|
||||
label: newLabel.value
|
||||
})
|
||||
}
|
||||
|
||||
const removeSample = (index) => {
|
||||
trainingData.value.splice(index, 1)
|
||||
isTrained.value = false
|
||||
}
|
||||
|
||||
const inferThreshold = () => {
|
||||
const cherries = trainingData.value
|
||||
.filter((p) => p.label === '🍒')
|
||||
.map((p) => p.size)
|
||||
const apples = trainingData.value
|
||||
.filter((p) => p.label === '🍎')
|
||||
.map((p) => p.size)
|
||||
|
||||
if (cherries.length === 0 || apples.length === 0) return null
|
||||
|
||||
const maxCherry = Math.max(...cherries)
|
||||
const minApple = Math.min(...apples)
|
||||
return (maxCherry + minApple) / 2
|
||||
}
|
||||
|
||||
const train = () => {
|
||||
const t = inferThreshold()
|
||||
if (t === null) {
|
||||
isTrained.value = false
|
||||
return
|
||||
}
|
||||
learnedThreshold.value = t
|
||||
isTrained.value = true
|
||||
}
|
||||
|
||||
const resetLearning = () => {
|
||||
trainingData.value = []
|
||||
isTrained.value = false
|
||||
learnedThreshold.value = 5.5
|
||||
learnedThreshold.value = null
|
||||
}
|
||||
|
||||
const learnedThresholdDisplay = computed(() => {
|
||||
if (!isTrained.value) return '未训练'
|
||||
return learnedThreshold.value.toFixed(2)
|
||||
})
|
||||
const train = () => {
|
||||
// Simple "training": find the boundary between cherry and apple
|
||||
// Sort data by size
|
||||
const sorted = [...trainingData.value].sort((a, b) => a.size - b.size)
|
||||
|
||||
const mlResult = computed(() => {
|
||||
if (!isTrained.value) {
|
||||
return { label: '❓', text: 'Untrained / 未训练' }
|
||||
// Find the first Apple
|
||||
const firstAppleIndex = sorted.findIndex((item) => item.label === '🍎')
|
||||
|
||||
if (firstAppleIndex === -1) {
|
||||
// All cherries
|
||||
learnedThreshold.value = 10
|
||||
} else if (firstAppleIndex === 0) {
|
||||
// All apples
|
||||
learnedThreshold.value = 0
|
||||
} else {
|
||||
// Boundary is between last cherry and first apple
|
||||
const lastCherry = sorted[firstAppleIndex - 1]
|
||||
const firstApple = sorted[firstAppleIndex]
|
||||
learnedThreshold.value = (lastCherry.size + firstApple.size) / 2
|
||||
}
|
||||
const isApple = testInput.value > learnedThreshold.value
|
||||
return {
|
||||
label: isApple ? '🍎' : '🍒',
|
||||
text: isApple ? 'Big 🍎' : 'Small 🍒'
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rule-learning-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
.card-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
.panel-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 900;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
.control-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
color: var(--vp-c-text-1);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.5rem;
|
||||
font-weight: 700;
|
||||
.text-xs {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
.select {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.range {
|
||||
width: 220px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.muted {
|
||||
.text-gray {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.45rem 0.7rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
font-size: 0.875rem;
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-bg);
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
.mb-4-xs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.samples {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
@media (min-width: 992px) {
|
||||
.mb-4-xs {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.result-box {
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: var(--vp-c-text-2);
|
||||
.result-box.good {
|
||||
border-color: var(--el-color-danger);
|
||||
background-color: var(--el-color-danger-light-9);
|
||||
}
|
||||
|
||||
.chip-x {
|
||||
margin-left: 0.2rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.result {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.result.good {
|
||||
border-color: rgba(var(--vp-c-brand-rgb), 0.35);
|
||||
.result-box.bad {
|
||||
border-color: var(--el-color-primary);
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-weight: 900;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
margin-top: 0.25rem;
|
||||
font-weight: 900;
|
||||
font-size: 1.1rem;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.result-note {
|
||||
margin-top: 0.35rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
.result-code {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
.sample-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user