From 6098908eee0b558c9e58092e7a3c2773e4900db4 Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Sat, 21 Feb 2026 10:04:47 +0800 Subject: [PATCH] feat(docs): add interactive demos and complete content for development tools MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Vue components for interactive demos (SSH auth, regex, env vars, ports) - Complete markdown content for SSH, regex, environment variables, and ports - Remove placeholder "待实现" sections and replace with detailed guides - Add visual explanations for key concepts like ports and localhost - Include practical examples and troubleshooting tips - Add component for showing evolution from transistors to CPU - Improve documentation structure and navigation - Add security best practices for API keys and environment variables --- docs/.vitepress/config.mjs | 1 - .../computer-fundamentals/AdderDemo.vue | 492 +++++--- .../computer-fundamentals/CompilerDemo.vue | 806 ++++++------ .../CpuArchitectureDemo.vue | 315 +++-- .../EvolutionFlowDemo.vue | 237 ++++ .../computer-fundamentals/LanguageMapDemo.vue | 1118 ++++++++++++----- .../computer-fundamentals/LogicGateDemo.vue | 570 +++------ .../computer-fundamentals/RegisterDemo.vue | 456 +++++++ .../computer-fundamentals/TransistorDemo.vue | 427 ++++--- .../computer-fundamentals/TypeSystemDemo.vue | 1058 ++++++++++------ .../development-tools/ApiKeyDangerDemo.vue | 193 +++ .../development-tools/DependencyTreeDemo.vue | 847 +++++++++++++ .../appendix/development-tools/DotEnvDemo.vue | 350 ++++++ .../development-tools/EnvExportDemo.vue | 267 ++++ .../development-tools/EnvScopeDemo.vue | 331 +++++ .../development-tools/EnvVarOverviewDemo.vue | 354 ++++++ .../development-tools/PackageInstallDemo.vue | 549 ++++++++ .../PackageManagerOverviewDemo.vue | 642 ++++++++++ .../development-tools/PathSearchDemo.vue | 478 +++++++ .../appendix/development-tools/RegexDemo.vue | 978 ++++++++++++++ .../development-tools/SSHAuthDemo.vue | 835 ++++++++++++ .../development-tools/ServerSecretDemo.vue | 271 ++++ .../framework-nature/ComponentTreeDemo.vue | 342 +++++ .../framework-nature/DataUIGapDemo.vue | 302 +++++ .../DeclarativeFormulaDemo.vue | 353 ++++++ .../framework-nature/DomOperationCostDemo.vue | 407 ++++++ .../FrameworkMotivationDemo.vue | 78 ++ .../FrameworkSpectrumDemo.vue | 408 ++++++ .../framework-nature/ManualVsAutoSyncDemo.vue | 433 +++++++ .../ReactivityMechanismDemo.vue | 327 +++++ .../framework-nature/VirtualDomDiffDemo.vue | 434 +++++++ .../framework-nature/WhatIsDomDemo.vue | 334 +++++ .../framework-nature/WhyNoAutoSyncDemo.vue | 476 +++++++ .../ports-localhost/CommonPortsDemo.vue | 385 ++++++ .../ports-localhost/DevServerFlowDemo.vue | 470 +++++++ .../ports-localhost/LocalhostLoopbackDemo.vue | 452 +++++++ .../ports-localhost/PortAnalogyDemo.vue | 304 +++++ .../ports-localhost/PortConflictDemo.vue | 379 ++++++ .../ports-localhost/PortTroubleshootDemo.vue | 348 +++++ docs/.vitepress/theme/index.js | 95 +- docs/.vitepress/theme/style.css | 12 + .../programming-languages.md | 373 +----- .../transistor-to-cpu.md | 118 +- .../type-systems-compilers.md | 490 ++------ .../2-development-tools/editors-and-ai.md | 3 - .../2-development-tools/environment-path.md | 178 ++- .../2-development-tools/package-managers.md | 393 +++++- .../2-development-tools/ports-localhost.md | 247 +++- .../appendix/2-development-tools/regex.md | 177 ++- .../2-development-tools/ssh-authentication.md | 137 +- .../frontend-framework-nature.md | 472 ++++++- docs/zh-cn/appendix/index.md | 5 - 52 files changed, 17782 insertions(+), 2725 deletions(-) create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/EvolutionFlowDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/ApiKeyDangerDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/DependencyTreeDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/DotEnvDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/EnvExportDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/EnvScopeDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/EnvVarOverviewDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/PackageInstallDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/PackageManagerOverviewDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/PathSearchDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/RegexDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/SSHAuthDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/development-tools/ServerSecretDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/ComponentTreeDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/DataUIGapDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/DeclarativeFormulaDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/DomOperationCostDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/FrameworkMotivationDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/FrameworkSpectrumDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/ManualVsAutoSyncDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/ReactivityMechanismDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/VirtualDomDiffDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/WhatIsDomDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/framework-nature/WhyNoAutoSyncDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/ports-localhost/CommonPortsDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/ports-localhost/DevServerFlowDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/ports-localhost/LocalhostLoopbackDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/ports-localhost/PortAnalogyDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/ports-localhost/PortConflictDemo.vue create mode 100644 docs/.vitepress/theme/components/appendix/ports-localhost/PortTroubleshootDemo.vue delete mode 100644 docs/zh-cn/appendix/2-development-tools/editors-and-ai.md diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index ac3f1da..92a42ca 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -589,7 +589,6 @@ export default defineConfig({ items: [ { text: '集成开发环境 (IDE) 基础', link: '/zh-cn/appendix/2-development-tools/ide-basics' }, { text: '命令行与 Shell 脚本', link: '/zh-cn/appendix/2-development-tools/command-line-shell' }, - { text: '编辑器与 AI 编程助手', link: '/zh-cn/appendix/2-development-tools/editors-and-ai' }, { text: 'Git：代码的时光机', link: '/zh-cn/appendix/2-development-tools/git-version-control' }, { text: '环境变量与 PATH', link: '/zh-cn/appendix/2-development-tools/environment-path' }, { text: '端口与 localhost', link: '/zh-cn/appendix/2-development-tools/ports-localhost' }, diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue index bffe280..9ff3077 100644 --- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue @@ -1,85 +1,128 @@ @@ -98,47 +141,46 @@ const toggleBit = (arr, i) => { } } -const decimalA = computed(() => { - return bitsA.value.reduce((acc, bit, i) => acc + bit * Math.pow(2, 3-i), 0) -}) +const decimalA = computed(() => + bitsA.value.reduce((acc, bit, i) => acc + bit * Math.pow(2, 3 - i), 0) +) -const decimalB = computed(() => { - return bitsB.value.reduce((acc, bit, i) => acc + bit * Math.pow(2, 3-i), 0) -}) +const decimalB = computed(() => + bitsB.value.reduce((acc, bit, i) => acc + bit * Math.pow(2, 3 - i), 0) +) -const carries = computed(() => { - const c = [0, 0, 0, 0] +const stageData = computed(() => { + const stages = [] + let carry = 0 + const posNames = ['最低位', '次低位', '次高位', '最高位'] for (let i = 3; i >= 0; i--) { - const sum = bitsA.value[i] + bitsB.value[i] + (i < 3 ? c[i+1] : 0) - c[i] = sum >= 2 ? 1 : 0 + const a = bitsA.value[i] + const b = bitsB.value[i] + const total = a + b + carry + const sum = total % 2 + const carryOut = total >= 2 ? 1 : 0 + stages.push({ + bitPos: 3 - i, + posName: posNames[3 - i], + a, + b, + carryIn: stages.length > 0 ? carry : null, + sum, + carryOut + }) + carry = carryOut } - return c + return stages }) -const sumBits = computed(() => { - const s = [0, 0, 0, 0] - for (let i = 3; i >= 0; i--) { - const sum = bitsA.value[i] + bitsB.value[i] + (i < 3 ? carries.value[i+1] : 0) - s[i] = sum % 2 - } - return s -}) +const sumBits = computed(() => stageData.value.map((s) => s.sum).reverse()) const resultBinary = computed(() => { - const allBits = [carries.value[0], ...sumBits.value] - return allBits.join('') + const lastCarry = stageData.value[stageData.value.length - 1]?.carryOut || 0 + return (lastCarry ? lastCarry.toString() : '') + sumBits.value.join('') }) -const resultDecimal = computed(() => { - return decimalA.value + decimalB.value -}) - -const stages = [ - { label: '第4位 (个位)' }, - { label: '第3位' }, - { label: '第2位' }, - { label: '第1位 (最高位)' } -] +const resultDecimal = computed(() => decimalA.value + decimalB.value) diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue index 4f6cff3..c4d6bb4 100644 --- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue @@ -1,346 +1,254 @@ @@ -348,314 +256,334 @@ const executionModels = [ diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue index e3f4a08..2d551d8 100644 --- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue @@ -2,105 +2,85 @@
CPU 架构全貌 - 从门电路到处理器 + 从功能单元到完整核心
-
-
-
-
- {{ layer.icon }} - {{ layer.name }} - {{ layer.count }} -
- -
-

- {{ layer.desc }} -

-
- 🌰 例子： - {{ layer.example }} -
-
- -
-
- -
-
- CPU 核心组件 -
-
-
+
+
核心组件一览（静态展示）
+
+
+
{{ comp.icon }} {{ comp.name }} - {{ comp.desc }}
+
{{ comp.desc }}
+
{{ comp.role }}
+
+
+
+ +
+
一条指令在 CPU 内部的流动
+
+
+ {{ index + 1 }} + {{ step.name }} + {{ step.desc }} +
- 核心思想：CPU是层次化构建的：晶体管→逻辑门→功能单元→处理器。每一层都是下一层的"积木"，最终形成能执行程序的"大脑"。 + 核心思想：CPU 不是单一部件，而是多个功能单元的有序协作：控制器负责调度，ALU 负责计算，寄存器负责高速暂存，总线负责连接与传输。
@@ -109,115 +89,59 @@ const components = [ border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); - padding: 1rem; - margin: 1rem 0; + padding: 1.25rem; + margin: 1.25rem 0; } .demo-header { display: flex; align-items: center; gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.demo-header .title { font-weight: bold; font-size: 1rem; } -.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; } - -.architecture-layers { - display: flex; - flex-direction: column; - gap: 0.5rem; margin-bottom: 1rem; } -.layer { - background: var(--vp-c-bg); - border: 1px solid var(--vp-c-divider); - border-radius: 6px; - padding: 0.5rem 0.75rem; - cursor: pointer; - transition: all 0.2s; -} - -.layer:hover { - border-color: var(--vp-c-brand); -} - -.layer.active { - border-color: var(--vp-c-brand); - background: var(--vp-c-brand-soft); -} - -.layer-header { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.layer-icon { +.demo-header .title { + font-weight: bold; font-size: 1rem; } -.layer-name { - font-weight: bold; - font-size: 0.9rem; -} - -.layer-count { - margin-left: auto; - font-size: 0.8rem; +.demo-header .subtitle { color: var(--vp-c-text-2); -} - -.layer-detail { - margin-top: 0.5rem; - padding-top: 0.5rem; - border-top: 1px solid var(--vp-c-divider); -} - -.detail-desc { font-size: 0.85rem; + margin-left: 0.5rem; +} + +.overview-title, +.flow-title { + font-weight: bold; + font-size: 0.92rem; margin-bottom: 0.5rem; } -.detail-example { - font-size: 0.8rem; - color: var(--vp-c-text-2); -} - -.example-label { - font-weight: bold; -} - -.cpu-components { - background: var(--vp-c-bg-alt); - padding: 0.75rem; - border-radius: 6px; -} - -.comp-title { - font-weight: bold; - font-size: 0.9rem; - margin-bottom: 0.5rem; -} - -.comp-grid { +.overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 0.5rem; + gap: 0.6rem; } -.comp-item { +.overview-card { display: flex; flex-direction: column; - padding: 0.5rem; - background: var(--vp-c-bg); - border-radius: 4px; + gap: 0.35rem; + padding: 0.7rem; + background: var(--vp-c-bg-alt); + border-radius: 8px; + border: 1px solid var(--vp-c-divider); +} + +.card-top { + display: flex; + align-items: center; + gap: 0.45rem; } .comp-icon { font-size: 1rem; - margin-bottom: 0.25rem; } .comp-name { @@ -226,27 +150,90 @@ const components = [ } .comp-desc { + font-size: 0.78rem; + color: var(--vp-c-text-2); +} + +.comp-role { + font-size: 0.78rem; + color: var(--vp-c-text-1); + background: var(--vp-c-bg); + border-radius: 4px; + padding: 0.25rem 0.4rem; +} + +.instruction-flow { + margin-top: 1rem; + background: var(--vp-c-bg); + border: 1px solid var(--vp-c-divider); + border-radius: 8px; + padding: 0.75rem; +} + +.flow-steps { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + align-items: center; +} + +.flow-step { + display: inline-flex; + align-items: center; + gap: 0.4rem; + background: var(--vp-c-bg-soft); + border: 1px solid var(--vp-c-divider); + border-radius: 999px; + padding: 0.35rem 0.55rem; +} + +.step-index { + width: 1.1rem; + height: 1.1rem; + border-radius: 50%; + background: var(--vp-c-brand-soft); + color: var(--vp-c-brand-1); + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 0.72rem; + font-weight: bold; +} + +.step-name { + font-size: 0.78rem; + font-weight: bold; +} + +.step-desc { font-size: 0.75rem; color: var(--vp-c-text-2); } -.fade-enter-active, .fade-leave-active { - transition: opacity 0.2s ease; -} - -.fade-enter-from, .fade-leave-to { - opacity: 0; +.step-arrow { + margin-left: 0.1rem; + color: var(--vp-c-text-3); } .info-box { background: var(--vp-c-bg-alt); - padding: 0.75rem; + padding: 0.85rem; border-radius: 6px; font-size: 0.85rem; color: var(--vp-c-text-2); - margin-top: 0.75rem; + margin-top: 1rem; display: flex; gap: 0.25rem; } +.info-box strong { + white-space: nowrap; + flex-shrink: 0; +} + +@media (max-width: 680px) { + .overview-grid { + grid-template-columns: 1fr; + } +} diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/EvolutionFlowDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EvolutionFlowDemo.vue new file mode 100644 index 0000000..de8b31b --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EvolutionFlowDemo.vue @@ -0,0 +1,237 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue index 45a1db1..7bc8e39 100644 --- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue @@ -1,130 +1,203 @@ @@ -132,168 +205,343 @@ diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue index 564c273..79421f2 100644 --- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue @@ -2,308 +2,119 @@
逻辑门：用开关做运算 - 晶体管组合成基本运算单元 + 切换输入 A / B，同屏观察四种门的输出
-
-
-
+
+ 输入 B + +
+ 当前：A={{ inputA ? 1 : 0 }}，B={{ inputB ? 1 : 0 }} +
-
-
-
-
- A: - -
-
- B: - -
-
- -
- - - - - - -
- {{ activeGate }} -
-
- -
- 输出: - {{ output ? '1' : '0' }} -
+
+
+
+ {{ gate.name }} + {{ gate.formula }}
- -
-
- {{ activeGate }} 真值表 -
- - - - - - - - - - - - - - - -
AB输出
{{ row.a }}{{ row.b }}{{ row.out }}
+
{{ gate.analogy }}
+
+ 输出 + + {{ gateOutput(gate.name, inputA, inputB) }} + + {{ gateOutput(gate.name, inputA, inputB) ? '（真 / 导通）' : '（假 / 断开）' }}
+
-
-
- {{ currentGate.expTitle }} -
-
- {{ currentGate.expContent }} -
-
+
+
四种门真值表对照（高亮行 = 当前输入）
+ + + + + + + + + + + + + + + + + + + + + +
ABANDORNOT(A)XOR
{{ row.a }}{{ row.b }}{{ gateOutput('AND', !!row.a, !!row.b) }}{{ gateOutput('OR', !!row.a, !!row.b) }}{{ gateOutput('NOT', !!row.a, !!row.b) }}{{ gateOutput('XOR', !!row.a, !!row.b) }}
- 核心思想：逻辑门用晶体管的"开关"组合实现基本运算。AND门像"串联开关"(两个都开才通)，OR门像"并联开关"(任一个开就通)。 + 核心思想：逻辑门用晶体管的"开关"组合实现基本运算——AND 像串联、OR 像并联、NOT 取反、XOR 判异。所有复杂计算都由这四种基础操作构建而来。
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue new file mode 100644 index 0000000..1ffb2df --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue @@ -0,0 +1,456 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue index b035ff2..3497e90 100644 --- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue @@ -2,126 +2,88 @@
晶体管：数字世界的开关 - 一个开关如何变成计算能力 + Gate 电压决定电流能否通过 +
+ +
+
+ 栅极输入（Gate） + +
+
+ 通道：{{ isOn ? '导通' : '断开' }} + 输出：{{ isOn ? '1' : '0' }} +
-
-
-
- - - - - - - - - - +
+
+
控制端 Gate
+
+ {{ isOn ? '1' : '0' }}
-
- {{ isOn ? 'ON (1)' : 'OFF (0)' }} -
- 电流 -
+
↓ 控制
+
+ +
+
源极 Source
+
+ ✕ +
+
漏极 Drain
+
+ +
+ {{ isOn ? '电流通过：Source → Drain' : '电流被阻断：无法通过通道' }}
-
- 晶体管状态表 -
+
晶体管状态表
- - + + - + - +
栅极(控制端)源极→漏极Gate 输入通道状态 输出
低电压 (0)0（低电压） 断开 0
高电压 (1)1（高电压） 导通 1
+
+ 点上方按钮切换 Gate，观察“通道状态”和“电流流动”如何同步变化。 +
+
+
① 改变 Gate 电压（0/1）
+
② 通道变为断开/导通
+
③ 输出随之变成 0/1
+
+
- 核心思想：晶体管就是一个用电控制的开关。给它高电压(1)，它就导通；给低电压(0)，它就断开。这是所有数字计算的基础。 + 核心思想：晶体管本质是“电控开关”：Gate=1 时导通，Gate=0 + 时断开。所有数字计算都建立在这种 0/1 开关之上。
@@ -149,94 +111,236 @@ const toggleSwitch = () => { display: flex; align-items: center; gap: 0.5rem; - margin-bottom: 0.75rem; + margin-bottom: 0.8rem; } -.demo-header .title { font-weight: bold; font-size: 1rem; } -.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; } +.demo-header .title { + font-weight: bold; + font-size: 1rem; +} -.demo-content { +.demo-header .subtitle { + color: var(--vp-c-text-2); + font-size: 0.85rem; + margin-left: 0.5rem; +} + +.control-panel { display: flex; - gap: 1.5rem; align-items: center; + padding: 0.65rem 0.75rem; + border: 1px solid var(--vp-c-divider); + border-radius: 8px; + background: var(--vp-c-bg); + margin-bottom: 0.8rem; flex-wrap: wrap; } -.switch-container { - flex: 1; - min-width: 200px; -} - -.switch-area { - background: var(--vp-c-bg); - border: 2px solid var(--vp-c-divider); - border-radius: 8px; - padding: 1rem; - cursor: pointer; - transition: all 0.3s; - text-align: center; -} - -.switch-area:hover { - border-color: var(--vp-c-brand); -} - -.transistor-symbol { - width: 120px; - height: 80px; - margin: 0 auto 0.5rem; -} - -.transistor-svg { - width: 100%; - height: 100%; -} - -.switch-label { +.control-left { display: flex; - flex-direction: column; - gap: 0.25rem; align-items: center; + gap: 0.55rem; } -.state-label { +.control-label { + font-size: 0.82rem; + color: var(--vp-c-text-2); +} + +.gate-toggle { + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg-alt); + border-radius: 999px; + padding: 0.3rem 0.65rem; font-weight: bold; - font-size: 1.1rem; - color: var(--vp-c-brand); + cursor: pointer; + transition: all 0.2s; } -.current-flow { +.gate-toggle.on { + background: var(--vp-c-success-soft); + color: var(--vp-c-success-1); + border-color: var(--vp-c-success); + color: var(--vp-c-success-1); + background: var(--vp-c-success-soft); +} + +.control-right { + display: flex; + gap: 0.4rem; + flex-wrap: wrap; + margin-left: auto; +} + +.chip { + font-size: 0.78rem; + padding: 0.2rem 0.45rem; + border-radius: 999px; + background: var(--vp-c-bg-alt); + border: 1px solid var(--vp-c-divider); +} +.chip.active { + border-color: var(--vp-c-success); +} + +.legend-chip { + font-size: 0.72rem; + padding: 0.16rem 0.42rem; + border-radius: 999px; + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg); + color: var(--vp-c-text-2); +} + +.demo-content { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 0.9rem; +} + +.transistor-diagram { + border: 1px solid var(--vp-c-divider); + border-radius: 8px; + background: var(--vp-c-bg); + padding: 0.8rem; +} + +.gate-column { + display: flex; + align-items: center; + gap: 0.45rem; + margin-bottom: 0.7rem; +} + +.gate-title { font-size: 0.8rem; - color: var(--vp-c-text-3); - opacity: 0.5; - transition: all 0.3s; + color: var(--vp-c-text-2); } -.current-flow.active { - opacity: 1; - color: var(--vp-c-success); +.gate-value { + width: 2rem; + height: 2rem; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + border: 2px solid var(--vp-c-divider); + font-weight: bold; +} + +.gate-value.on { + border-color: var(--vp-c-success); + color: var(--vp-c-success-1); + background: var(--vp-c-success-soft); +} + +.gate-arrow { + font-size: 0.78rem; + color: var(--vp-c-text-2); +} + +.main-channel { + display: grid; + grid-template-columns: 1fr 1.6fr 1fr; + align-items: center; + gap: 0.55rem; +} + +.terminal-box { + border: 1px solid var(--vp-c-divider); + border-radius: 6px; + background: var(--vp-c-bg-alt); + padding: 0.45rem; + text-align: center; + font-size: 0.78rem; +} + +.channel-track { + height: 2.4rem; + border: 2px solid var(--vp-c-divider); + border-radius: 999px; + background: #e5e7eb; + position: relative; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.channel-track.on { + background: var(--vp-c-success-soft); + border-color: var(--vp-c-success); +} + +.block-icon { + font-size: 1.1rem; + font-weight: bold; + color: var(--vp-c-text-3); +} + +.flow-dot { + width: 0.42rem; + height: 0.42rem; + border-radius: 50%; + background: var(--vp-c-success); + position: absolute; + left: -8%; + animation: flow 1.5s linear infinite; +} + +.flow-dot.d2 { + animation-delay: 0.45s; +} + +.flow-dot.d3 { + animation-delay: 0.9s; +} + +@keyframes flow { + from { + left: -8%; + } + to { + left: 105%; + } +} + +.result-line { + margin-top: 0.7rem; + font-size: 0.82rem; + color: var(--vp-c-text-2); + padding: 0.45rem 0.55rem; + background: var(--vp-c-bg-alt); + border-radius: 6px; +} + +.result-line.on { + color: var(--vp-c-success-1); } .truth-table { - flex: 1; - min-width: 250px; + border: 1px solid var(--vp-c-divider); + border-radius: 8px; + background: var(--vp-c-bg); + padding: 0.8rem; } .table-title { font-weight: bold; - margin-bottom: 0.5rem; + margin-bottom: 0.55rem; font-size: 0.9rem; } table { width: 100%; border-collapse: collapse; - font-size: 0.85rem; + font-size: 0.84rem; } -th, td { +th, +td { border: 1px solid var(--vp-c-divider); - padding: 0.5rem; + padding: 0.45rem; text-align: center; } @@ -248,6 +352,27 @@ tr.highlight { background: var(--vp-c-brand-soft); } +.table-hint { + margin-top: 0.55rem; + font-size: 0.8rem; + color: var(--vp-c-text-2); +} + +.step-guide { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.45rem; + margin-top: 0.8rem; +} + +.step-item { + border: 1px solid var(--vp-c-divider); + background: var(--vp-c-bg); + border-radius: 6px; + padding: 0.45rem 0.5rem; + font-size: 0.78rem; +} + .info-box { background: var(--vp-c-bg-alt); padding: 0.75rem; @@ -259,4 +384,18 @@ tr.highlight { gap: 0.25rem; } +.info-box strong { + white-space: nowrap; + flex-shrink: 0; +} + +@media (max-width: 860px) { + .demo-content { + grid-template-columns: 1fr; + } + + .step-guide { + grid-template-columns: 1fr; + } +} diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue index 5dce827..9659b2c 100644 --- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue +++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue @@ -1,176 +1,173 @@ @@ -178,225 +175,254 @@ s = str(x) # 需要显式转换 diff --git a/docs/.vitepress/theme/components/appendix/development-tools/ApiKeyDangerDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/ApiKeyDangerDemo.vue new file mode 100644 index 0000000..87eaf7b --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/ApiKeyDangerDemo.vue @@ -0,0 +1,193 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/DependencyTreeDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/DependencyTreeDemo.vue new file mode 100644 index 0000000..4f27eec --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/DependencyTreeDemo.vue @@ -0,0 +1,847 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/DotEnvDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/DotEnvDemo.vue new file mode 100644 index 0000000..7c06208 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/DotEnvDemo.vue @@ -0,0 +1,350 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/EnvExportDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/EnvExportDemo.vue new file mode 100644 index 0000000..1ecae00 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/EnvExportDemo.vue @@ -0,0 +1,267 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/EnvScopeDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/EnvScopeDemo.vue new file mode 100644 index 0000000..7df8240 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/EnvScopeDemo.vue @@ -0,0 +1,331 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/EnvVarOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/EnvVarOverviewDemo.vue new file mode 100644 index 0000000..cbb8553 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/EnvVarOverviewDemo.vue @@ -0,0 +1,354 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/PackageInstallDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/PackageInstallDemo.vue new file mode 100644 index 0000000..9abd4d4 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/PackageInstallDemo.vue @@ -0,0 +1,549 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/PackageManagerOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/PackageManagerOverviewDemo.vue new file mode 100644 index 0000000..50e42a5 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/PackageManagerOverviewDemo.vue @@ -0,0 +1,642 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/PathSearchDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/PathSearchDemo.vue new file mode 100644 index 0000000..0b10804 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/PathSearchDemo.vue @@ -0,0 +1,478 @@ + + + + + diff --git a/docs/.vitepress/theme/components/appendix/development-tools/RegexDemo.vue b/docs/.vitepress/theme/components/appendix/development-tools/RegexDemo.vue new file mode 100644 index 0000000..dd28fc5 --- /dev/null +++ b/docs/.vitepress/theme/components/appendix/development-tools/RegexDemo.vue @@ -0,0 +1,978 @@ +