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

style: remove icon elements and related styles from demo components

Browse Source 
Clean up visual presentation by removing decorative icons from demo headers and info boxes across all components. Also removes now-unused CSS rules for icon styling.
This commit is contained in:
sanbuphy
2026-02-20 23:00:28 +08:00
parent ec9d52033f
commit 399913d3ff
50 changed files with 1 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="adder-demo">
<div class="demo-header">
<span class="icon">➕</span>
<span class="title">加法器：用逻辑门做加法</span>
<span class="subtitle">从逻辑门到算术运算</span>
</div>
@@ -80,7 +79,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>加法器用全加器级联实现。每个全加器处理一位，产生"和"与"进位"。进位传递给下一位，就像我们手算加法一样。
</div>
</div>
@@ -159,7 +157,6 @@ const stages = [
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -311,5 +308,4 @@ const stages = [
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="algorithm-demo">
<div class="demo-header">
<span class="icon">🎯</span>
<span class="title">算法思维：解决问题的方法</span>
<span class="subtitle">不同策略解决不同类型的问题</span>
</div>
@@ -226,7 +225,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>算法是解决问题的方法。好的算法能让程序效率提升几个数量级。理解算法思维，比记住具体算法更重要。
</div>
</div>
@@ -377,7 +375,6 @@ const complexities = [
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -636,5 +633,4 @@ const complexities = [
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmOverviewDemo.vue
-3
View File
@@ -1,7 +1,6 @@
<template>
<div class="algorithm-overview-demo">
<div class="demo-header">
<span class="icon">🧮</span>
<span class="title">算法思维入门</span>
<span class="subtitle">解决问题的一套步骤和方法</span>
</div>
@@ -119,7 +118,6 @@
<div class="tip-desc">不同场景反复应用同一算法</div>
</div>
<div class="tip-card">
<div class="tip-icon">⚡</div>
<div class="tip-title">分析优化</div>
<div class="tip-desc">思考时间和空间复杂度，寻找优化方案</div>
</div>
@@ -232,7 +230,6 @@ const currentCategory = computed(() => categories.find(c => c.id === activeCateg
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="algorithm-paradigm-demo">
<div class="demo-header">
<span class="icon">🔧</span>
<span class="title">算法设计范式</span>
<span class="subtitle">解决问题的常用套路</span>
</div>
@@ -236,7 +235,6 @@ const currentParadigm = computed(() => paradigms.find(p => p.id === activeParadi
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/ApplicationLayerDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="application-layer-demo">
<div class="demo-header">
<span class="icon">🌍</span>
<span class="title">应用层：为你服务的各种协议</span>
<span class="subtitle">HTTP、DNS、DHCP 等协议如何工作</span>
</div>
@@ -269,7 +268,6 @@ const currentProtocol = computed(() => protocolDetails[activeProtocol.value])
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilationPracticeDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="compilation-practice-demo">
<div class="demo-header">
<span class="icon">⚙️</span>
<span class="title">编译过程实践</span>
<span class="subtitle">从代码到可执行文件</span>
</div>
@@ -148,7 +147,6 @@ const outputFiles = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="compiler-analogy-demo">
<div class="demo-header">
<span class="icon">🌐</span>
<span class="title">编译原理：翻译的艺术</span>
<span class="subtitle">如何把代码翻译成机器指令</span>
</div>
@@ -197,7 +196,6 @@ const tokens = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="compiler-demo">
<div class="demo-header">
<span class="icon">⚙️</span>
<span class="title">编译器工作流程</span>
<span class="subtitle">从源代码到机器码的旅程</span>
</div>
@@ -174,7 +173,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>编译器将人类可读的源代码转换为机器可执行的指令。主要阶段包括词法分析、语法分析、语义分析、中间代码生成、优化和目标代码生成。
</div>
</div>
@@ -363,7 +361,6 @@ const executionModels = [
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -670,5 +667,4 @@ code {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="cpu-arch-demo">
<div class="demo-header">
<span class="icon">🖥️</span>
<span class="title">CPU 架构全貌</span>
<span class="subtitle">从门电路到处理器</span>
</div>
@@ -56,7 +55,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>CPU是层次化构建的：晶体管→逻辑门→功能单元→处理器。每一层都是下一层的"积木"，最终形成能执行程序的"大脑"。
</div>
</div>
@@ -122,7 +120,6 @@ const components = [
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -252,5 +249,4 @@ const components = [
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="data-encoding-basics-demo">
<div class="demo-header">
<span class="icon">🔤</span>
<span class="title">数据编码基础</span>
<span class="subtitle">信息如何被表示和存储</span>
</div>
@@ -125,7 +124,6 @@
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLifecycleDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="data-lifecycle-demo">
<div class="demo-header">
<span class="icon">🔄</span>
<span class="title">数据的生命周期</span>
<span class="subtitle">从输入到存储到传输到输出的全过程</span>
</div>
@@ -185,7 +184,6 @@ const keyPoints = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLinkLayerDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="data-link-demo">
<div class="demo-header">
<span class="icon">🔗</span>
<span class="title">数据链路层：帧的传递</span>
<span class="subtitle">MAC 地址如何定位设备</span>
</div>
@@ -195,7 +194,6 @@ const transferSteps = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="data-structure-demo">
<div class="demo-header">
<span class="icon">📦</span>
<span class="title">数据结构：数据的"容器"</span>
<span class="subtitle">不同场景选择不同的存储方式</span>
</div>
@@ -281,7 +280,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>数据结构是数据的"容器"，不同的容器有不同的特点。选择合适的数据结构，能让程序效率提升几个数量级。
</div>
</div>
@@ -384,7 +382,6 @@ const treeData = ref({
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -654,5 +651,4 @@ th {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="ds-overview-demo">
<div class="demo-header">
<span class="icon">🏗️</span>
<span class="title">数据结构全景图</span>
<span class="subtitle">不同场景选择不同的数据组织方式</span>
</div>
@@ -279,7 +278,6 @@ const currentCategory = computed(() => categories.find(c => c.id === activeCateg
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue
-3
View File
@@ -1,7 +1,6 @@
<template>
<div class="ds-selector-demo">
<div class="demo-header">
<span class="icon">🎯</span>
<span class="title">如何选择合适的数据结构？</span>
<span class="subtitle">根据场景需求做出最佳选择</span>
</div>
@@ -25,7 +24,6 @@
<!-- 推荐结果 -->
<div v-if="activeScenario" class="recommendation">
<div class="rec-header">
<span class="rec-icon">💡</span>
<span class="rec-title">推荐使用：{{ currentScenario.recommendation }}</span>
</div>
@@ -233,7 +231,6 @@ const currentScenario = computed(() => {
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="encoding-demo">
<div class="demo-header">
<span class="icon">🔢</span>
<span class="title">数字编码：用 0 和 1 表示一切</span>
<span class="subtitle">字符、数字、图像如何变成二进制</span>
</div>
@@ -67,7 +66,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>所有数据最终都要变成 0 和 1。不同类型的数据用不同的编码规则：字符用 ASCII/Unicode，数字用二进制，图像用像素值。
</div>
</div>
@@ -139,7 +137,6 @@ const byteCount = computed(() => {
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -273,5 +270,4 @@ const byteCount = computed(() => {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="est-demo">
<div class="demo-header">
<span class="icon">🔗</span>
<span class="title">编码、存储与传输的协作</span>
<span class="subtitle">三大系统如何协同处理数据</span>
</div>
@@ -348,7 +347,6 @@ const currentScenario = computed(() => scenarioData[activeScenario.value])
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="filesystem-demo">
<div class="demo-header">
<span class="icon">📁</span>
<span class="title">文件系统：数据的"档案柜"</span>
<span class="subtitle">操作系统如何组织和管理文件</span>
</div>
@@ -86,7 +85,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>文件系统用"目录树"组织文件，用"inode"记录文件元数据。文件名只是给人看的，系统通过 inode 编号找到真正的数据。
</div>
</div>
@@ -137,7 +135,6 @@ const selectItem = (item) => {
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -303,5 +300,4 @@ const selectItem = (item) => {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/GraphStructureDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="graph-structure-demo">
<div class="demo-header">
<span class="icon">🕸️</span>
<span class="title">图结构：复杂关系的表示</span>
<span class="subtitle">节点和边的网络</span>
</div>
@@ -175,7 +174,6 @@ const averageDegree = computed(() => {
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/GreedyThinkingDemo.vue
-3
View File
@@ -1,14 +1,12 @@
<template>
<div class="greedy-thinking-demo">
<div class="demo-header">
<span class="icon">🎯</span>
<span class="title">贪心算法：每步都选当前最优</span>
<span class="subtitle">局部最优 → 全局最优?</span>
</div>
<div class="core-idea">
<div class="idea-box">
<div class="idea-icon">💡</div>
<div class="idea-text">
贪心算法在每一步选择中都采取当前状态下<strong>最优</strong>的选择<br>
希望通过一系列局部最优选择达到<strong>全局最优</strong>
@@ -214,7 +212,6 @@ const selectedCount = computed(() => activities.filter(a => a.selected).length)
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/HashTableDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="hash-table-demo">
<div class="demo-header">
<span class="icon">🗂️</span>
<span class="title">哈希表：超快的查找</span>
<span class="subtitle">通过关键词直接找到数据</span>
</div>
@@ -175,7 +174,6 @@ initData()
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue
-3
View File
@@ -1,7 +1,6 @@
<template>
<div class="language-evolution-demo">
<div class="demo-header">
<span class="icon">📜</span>
<span class="title">编程语言的演化</span>
<span class="subtitle">从机器语言到高级语言</span>
</div>
@@ -90,7 +89,6 @@
<div class="trend-desc">类型系统、内存管理等安全机制</div>
</div>
<div class="trend-card">
<div class="trend-icon">⚡</div>
<div class="trend-title">越来越高效</div>
<div class="trend-desc">编译器优化、JIT 技术提升性能</div>
</div>
@@ -234,7 +232,6 @@ const currentEra = computed(() => eras[activeEra.value])
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="language-map-demo">
<div class="demo-header">
<span class="icon">🗺️</span>
<span class="title">编程语言图谱：语言的演化</span>
<span class="subtitle">从机器语言到现代语言</span>
</div>
@@ -125,7 +124,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>编程语言是人类与计算机沟通的桥梁。不同的语言有不同的设计哲学，适合解决不同类型的问题。选择语言时，要考虑问题领域、团队熟悉度、生态系统等因素。
</div>
</div>
@@ -229,7 +227,6 @@ const languageComparison = [
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -444,5 +441,4 @@ th {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageScenarioDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="language-scenario-demo">
<div class="demo-header">
<span class="icon">🎬</span>
<span class="title">为什么需要编程语言？</span>
<span class="subtitle">从场景看编程语言的价值</span>
</div>
@@ -231,7 +230,6 @@ const currentScenario = computed(() => scenarios.find(s => s.id === activeScenar
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="language-type-model-demo">
<div class="demo-header">
<span class="icon">🏗️</span>
<span class="title">编程语言的类型模型</span>
<span class="subtitle">不同语言的类型系统差异</span>
</div>
@@ -112,7 +111,6 @@ const dimensions = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/LinearStructuresDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="linear-structures-demo">
<div class="demo-header">
<span class="icon">📚</span>
<span class="title">线性结构的四种形态</span>
<span class="subtitle">数组、链表、栈、队列的区别</span>
</div>
@@ -281,7 +280,6 @@ const dequeue = () => {
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
+1 -5
View File
@@ -1,7 +1,6 @@
<template>
<div class="logic-gate-demo">
<div class="demo-header">
<span class="icon">🔌</span>
<span class="title">逻辑门：用开关做运算</span>
<span class="subtitle">晶体管组合成基本运算单元</span>
</div>
@@ -213,7 +212,7 @@
<tr
v-for="row in currentTruthTable"
:key="row.a + '-' + row.b"
:class="{ highlight: row.a === inputA && row.b === inputB && (activeGate !== 'NOT') }"
:class="{ highlight: row.a === (inputA ? 1 : 0) && (activeGate === 'NOT' || row.b === (inputB ? 1 : 0)) }"
>
<td>{{ row.a }}</td>
<td>{{ row.b }}</td>
@@ -235,7 +234,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>逻辑门用晶体管的"开关"组合实现基本运算。AND门像"串联开关"(两个都开才通)，OR门像"并联开关"(任一个开就通)。
</div>
</div>
@@ -324,7 +322,6 @@ const currentTruthTable = computed(() => {
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -500,5 +497,4 @@ tr.highlight {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="memory-demo">
<div class="demo-header">
<span class="icon">🧠</span>
<span class="title">内存管理：程序的"工作台"</span>
<span class="subtitle">操作系统如何分配和管理内存</span>
</div>
@@ -75,7 +74,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>虚拟内存让每个进程都以为自己独占整个内存空间，实际由操作系统统一管理和映射，实现隔离和保护。
</div>
</div>
@@ -136,7 +134,6 @@ const usedMemory = computed(() => {
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -296,5 +293,4 @@ const usedMemory = computed(() => {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue
-5
View File
@@ -1,7 +1,6 @@
<template>
<div class="network-layers-demo">
<div class="demo-header">
<span class="icon">🌐</span>
<span class="title">网络五层模型</span>
<span class="subtitle">从应用到物理的数据封装过程</span>
</div>
@@ -93,7 +92,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>分层设计让网络协议模块化，每层只关心自己的职责。数据从应用层向下传递时，每层都会添加自己的"信封"(头部)，接收时再逐层拆开。
</div>
</div>
@@ -179,7 +177,6 @@ const encapsulation = [
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -387,8 +384,6 @@ const encapsulation = [
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
@media (max-width: 640px) {
.demo-content {
grid-template-columns: 1fr;
docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkOverviewDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="network-overview-demo">
<div class="demo-header">
<span class="icon">🌐</span>
<span class="title">网络是怎么连接的</span>
<span class="subtitle">从发送到接收的完整过程</span>
</div>
@@ -202,7 +201,6 @@ const protocolLayers = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="network-principle-demo">
<div class="demo-header">
<span class="icon">🌐</span>
<span class="title">网络基本原理</span>
<span class="subtitle">数据如何在网络中传输</span>
</div>
@@ -107,7 +106,6 @@ const principles = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="os-overview-demo">
<div class="demo-header">
<span class="icon">🎛️</span>
<span class="title">操作系统：计算机的"大管家"</span>
<span class="subtitle">让多个程序和谐共处的艺术</span>
</div>
@@ -162,7 +161,6 @@ const getActiveAppDesc = () => {
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/PhysicalLayerDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="physical-layer-demo">
<div class="demo-header">
<span class="icon">⚡</span>
<span class="title">物理层：电信号的传递</span>
<span class="subtitle">比特如何通过物理介质传输</span>
</div>
@@ -199,7 +198,6 @@ const currentMedia = computed(() => mediaData[activeMedia.value])
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="process-demo">
<div class="demo-header">
<span class="icon">🔄</span>
<span class="title">进程：程序的"分身术"</span>
<span class="subtitle">一个程序如何同时运行多个实例</span>
</div>
@@ -82,7 +81,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>进程是程序的"运行实例"。同一个程序可以启动多个进程，每个进程有独立的内存空间，互不干扰。
</div>
</div>
@@ -129,7 +127,6 @@ const memorySegments = [
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -272,5 +269,4 @@ const memorySegments = [
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="pmf-collab-demo">
<div class="demo-header">
<span class="icon">🤝</span>
<span class="title">进程、内存、文件系统的协作</span>
<span class="subtitle">三大管理模块如何协同工作</span>
</div>
@@ -242,7 +241,6 @@ const getIcon = (type) => {
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="programming-language-comparison-demo">
<div class="demo-header">
<span class="icon">⚖️</span>
<span class="title">编程语言对比</span>
<span class="subtitle">不同语言的特点和适用场景</span>
</div>
@@ -217,7 +216,6 @@ const currentLang = computed(() => languages.find(l => l.name === activeLang.val
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="programming-paradigm-demo">
<div class="demo-header">
<span class="icon">🎨</span>
<span class="title">编程范式</span>
<span class="subtitle">不同的编程思维方式</span>
</div>
@@ -193,7 +192,6 @@ const currentParadigm = computed(() => paradigms.find(p => p.id === activeParadi
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="recursive-thinking-demo">
<div class="demo-header">
<span class="icon">🔄</span>
<span class="title">递归思维：自己调用自己</span>
<span class="subtitle">把大问题分解成相同的小问题</span>
</div>
@@ -190,7 +189,6 @@ const examples = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="search-algorithm-demo">
<div class="demo-header">
<span class="icon">🔍</span>
<span class="title">查找算法</span>
<span class="subtitle">如何在数据中找到目标</span>
</div>
@@ -186,7 +185,6 @@ const resetBinary = () => {
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="sorting-algorithm-demo">
<div class="demo-header">
<span class="icon">📊</span>
<span class="title">排序算法</span>
<span class="subtitle">把数据按顺序排列</span>
</div>
@@ -197,7 +196,6 @@ const partition = async (arr, low, high) => {
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="storage-demo">
<div class="demo-header">
<span class="icon">💾</span>
<span class="title">存储层次：从寄存器到云存储</span>
<span class="subtitle">速度与容量的权衡</span>
</div>
@@ -60,7 +59,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>存储遵循"金字塔"原则：越快的存储越贵、容量越小。CPU 需要的数据放在最快的存储（寄存器、缓存），暂时不用的放在慢速大容量存储（磁盘、云端）。
</div>
</div>
@@ -147,7 +145,6 @@ const currentLevel = computed(() => storageLevels[activeLevel.value])
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -255,5 +252,4 @@ const currentLevel = computed(() => storageLevels[activeLevel.value])
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageHierarchyDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="storage-hierarchy-demo">
<div class="demo-header">
<span class="icon">💾</span>
<span class="title">存储层次结构</span>
<span class="subtitle">从快到慢，从小到大</span>
</div>
@@ -126,7 +125,6 @@
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="subnet-calculator">
<div class="demo-header">
<span class="icon">🔢</span>
<span class="title">子网计算器</span>
<span class="subtitle">理解 IP 地址和子网掩码</span>
</div>
@@ -127,7 +126,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>子网掩码决定了 IP 地址的哪部分是"网络号"(小区)，哪部分是"主机号"(房间)。/24 表示前 24 位是网络位，后 8 位是主机位。
</div>
</div>
@@ -263,7 +261,6 @@ onMounted(() => {
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -462,5 +459,4 @@ onMounted(() => {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="tcp-udp-demo">
<div class="demo-header">
<span class="icon">📦</span>
<span class="title">TCP vs UDP：可靠 vs 快速</span>
<span class="subtitle">两种不同的传输策略</span>
</div>
@@ -184,7 +183,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>TCP 像挂号信，确保送达但较慢；UDP 像平信，快速但不保证送达。选择哪种协议取决于应用场景：需要可靠性选 TCP，需要实时性选 UDP。
</div>
</div>
@@ -327,7 +325,6 @@ const runDemo = async () => {
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -639,5 +636,4 @@ th {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue
-1
View File
@@ -40,7 +40,6 @@
</div>
<div class="card-body">
<div class="feature">
<span class="feature-icon">⚡</span>
<span>速度极快</span>
</div>
<div class="feature">
docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="transistor-demo">
<div class="demo-header">
<span class="icon">⚡</span>
<span class="title">晶体管：数字世界的开关</span>
<span class="subtitle">一个开关如何变成计算能力</span>
</div>
@@ -122,7 +121,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>晶体管就是一个用电控制的开关。给它高电压(1)，它就导通；给低电压(0)，它就断开。这是所有数字计算的基础。
</div>
</div>
@@ -154,7 +152,6 @@ const toggleSwitch = () => {
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -262,5 +259,4 @@ tr.highlight {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue
-4
View File
@@ -1,7 +1,6 @@
<template>
<div class="transmission-demo">
<div class="demo-header">
<span class="icon">📡</span>
<span class="title">数据传输：从串行到并行</span>
<span class="subtitle">数据如何在不同设备间移动</span>
</div>
@@ -159,7 +158,6 @@
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>现代高速传输多采用串行方式。虽然并行"看起来"更快（一次传多位），但串行可以跑更高频率，抗干扰更强，实际速度反而更快。
</div>
</div>
@@ -209,7 +207,6 @@ const startTransmission = () => {
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -406,5 +403,4 @@ th {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
</style>
docs/.vitepress/theme/components/appendix/computer-fundamentals/TransportLayerDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="transport-layer-demo">
<div class="demo-header">
<span class="icon">🚚</span>
<span class="title">传输层：端到端的可靠传输</span>
<span class="subtitle">TCP 和 UDP 如何传输数据</span>
</div>
@@ -223,7 +222,6 @@ const currentProtocol = computed(() => protocolData[activeProtocol.value])
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/TreeStructureDemo.vue
-2
View File
@@ -1,7 +1,6 @@
<template>
<div class="tree-structure-demo">
<div class="demo-header">
<span class="icon">🌳</span>
<span class="title">树形结构：层级关系的表示</span>
<span class="subtitle">像家谱一样的组织方式</span>
</div>
@@ -236,7 +235,6 @@ const binaryTreeLines = [
margin-bottom: 1.5rem;
}
.demo-header .icon { font-size: 1.5rem; }
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue
-5
View File
@@ -1,7 +1,6 @@
<template>
<div class="type-system-demo">
<div class="demo-header">
<span class="icon">🏷️</span>
<span class="title">类型系统：数据的分类规则</span>
<span class="subtitle">静态 vs 动态，强类型 vs 弱类型</span>
</div>
@@ -171,7 +170,6 @@ s = str(x) # 需要显式转换</code></pre>
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>类型系统是编程语言的"交通规则"，帮助我们在编译期或运行时发现错误。静态类型在编译期检查，动态类型在运行时检查；强类型不允许隐式转换，弱类型允许。
</div>
</div>
@@ -262,7 +260,6 @@ const benefits = [
margin-bottom: 0.75rem;
}
.demo-header .icon { font-size: 1.25rem; }
.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; }
@@ -537,8 +534,6 @@ code {
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
@media (max-width: 640px) {
.code-comparison {
grid-template-columns: 1fr;