feat: 更新附录文档及对应交互组件
This commit is contained in:
sanbuphy
@@ -80,10 +80,8 @@
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
<span
|
||||
>无论哪种 API，结构都一样：地址（找谁）+ 参数（要什么）=
|
||||
响应（得到什么）。</span
|
||||
>
|
||||
<span>无论哪种 API，结构都一样：地址（找谁）+ 参数（要什么）=
|
||||
响应（得到什么）。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -25,8 +25,7 @@
|
||||
<div class="doc-title">Headers</div>
|
||||
<pre class="doc-pre">
|
||||
Authorization: Bearer sk-xxx
|
||||
Content-Type: application/json</pre
|
||||
>
|
||||
Content-Type: application/json</pre>
|
||||
</div>
|
||||
|
||||
<div class="doc-section">
|
||||
@@ -69,10 +68,8 @@ response = client.chat.completions.create(
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
<span
|
||||
>看文档找三样：地址（Base
|
||||
URL）、鉴权（Authorization）、参数（Parameters）。</span
|
||||
>
|
||||
<span>看文档找三样：地址（Base
|
||||
URL）、鉴权（Authorization）、参数（Parameters）。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -49,10 +49,8 @@
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
<span
|
||||
>HTTP 方法就是动词——GET 是"问"，POST 是"做"，PUT/PATCH 是"改"，DELETE
|
||||
是"删"。</span
|
||||
>
|
||||
<span>HTTP 方法就是动词——GET 是"问"，POST 是"做"，PUT/PATCH 是"改"，DELETE
|
||||
是"删"。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
type="text"
|
||||
placeholder="/users"
|
||||
class="input"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<label>方法</label>
|
||||
@@ -41,42 +41,24 @@
|
||||
type="password"
|
||||
placeholder="sk-..."
|
||||
class="input"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="loading"
|
||||
@click="sendRequest"
|
||||
>
|
||||
<button class="send-btn" :disabled="loading" @click="sendRequest">
|
||||
{{ loading ? '发送中...' : '🚀 发送' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="right-panel">
|
||||
<div
|
||||
v-if="!response"
|
||||
class="empty"
|
||||
>
|
||||
点击发送查看结果
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="response"
|
||||
>
|
||||
<div
|
||||
class="status-bar"
|
||||
:class="getStatusClass(response.status)"
|
||||
>
|
||||
<div v-if="!response" class="empty">点击发送查看结果</div>
|
||||
<div v-else class="response">
|
||||
<div class="status-bar" :class="getStatusClass(response.status)">
|
||||
<span class="code">{{ response.status }}</span>
|
||||
<span class="text">{{ response.statusText }}</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<pre>{{ JSON.stringify(response.data, null, 2) }}</pre>
|
||||
</div>
|
||||
<div
|
||||
v-if="response.explanation"
|
||||
class="explanation"
|
||||
>
|
||||
<div v-if="response.explanation" class="explanation">
|
||||
💡 {{ response.explanation }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,18 +67,10 @@
|
||||
|
||||
<div class="quick-actions">
|
||||
<span class="label">快速尝试：</span>
|
||||
<button @click="tryEndpoint('/users')">
|
||||
✅ GET /users
|
||||
</button>
|
||||
<button @click="tryError401">
|
||||
❌ 401
|
||||
</button>
|
||||
<button @click="tryError404">
|
||||
❌ 404
|
||||
</button>
|
||||
<button @click="tryError429">
|
||||
❌ 429
|
||||
</button>
|
||||
<button @click="tryEndpoint('/users')">✅ GET /users</button>
|
||||
<button @click="tryError401">❌ 401</button>
|
||||
<button @click="tryError404">❌ 404</button>
|
||||
<button @click="tryError429">❌ 429</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -205,9 +179,18 @@ function tryError429() {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon { font-size: 18px; }
|
||||
.title { font-weight: 600; font-size: 0.9rem; }
|
||||
.subtitle { font-size: 0.75rem; color: var(--vp-c-text-3); margin-left: auto; }
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.demo-layout {
|
||||
display: flex;
|
||||
@@ -230,8 +213,14 @@ function tryError429() {
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.demo-layout { flex-direction: column; }
|
||||
.left-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.demo-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
.left-panel {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
}
|
||||
|
||||
.input-row {
|
||||
@@ -314,15 +303,31 @@ function tryError429() {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.status-bar.success { background: #dcfce7; }
|
||||
.status-bar.success .code { color: #166534; }
|
||||
.status-bar.client-error { background: #fee2e2; }
|
||||
.status-bar.client-error .code { color: #991b1b; }
|
||||
.status-bar.server-error { background: #fef3c7; }
|
||||
.status-bar.server-error .code { color: #92400e; }
|
||||
.status-bar.success {
|
||||
background: #dcfce7;
|
||||
}
|
||||
.status-bar.success .code {
|
||||
color: #166534;
|
||||
}
|
||||
.status-bar.client-error {
|
||||
background: #fee2e2;
|
||||
}
|
||||
.status-bar.client-error .code {
|
||||
color: #991b1b;
|
||||
}
|
||||
.status-bar.server-error {
|
||||
background: #fef3c7;
|
||||
}
|
||||
.status-bar.server-error .code {
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.code { font-weight: bold; }
|
||||
.text { color: var(--vp-c-text-2); }
|
||||
.code {
|
||||
font-weight: bold;
|
||||
}
|
||||
.text {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
|
||||
@@ -89,10 +89,8 @@
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
<span
|
||||
>点击按钮 → 发送请求 → 服务器处理 → 返回数据。这就是 API
|
||||
调用的完整流程。</span
|
||||
>
|
||||
<span>点击按钮 → 发送请求 → 服务器处理 → 返回数据。这就是 API
|
||||
调用的完整流程。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="api-types-demo">
|
||||
<div class="switch-bar">
|
||||
<button
|
||||
v-for="type in types"
|
||||
:key="type.id"
|
||||
:class="{ active: active === type.id }"
|
||||
@click="active = type.id"
|
||||
>
|
||||
{{ type.icon }} {{ type.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="display-area">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="label">调用对象</span>
|
||||
<span class="value">{{ currentType.target }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">通信方式</span>
|
||||
<span class="value">{{ currentType.comm }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">延迟</span>
|
||||
<span class="value">{{ currentType.latency }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">典型场景</span>
|
||||
<span class="value">{{ currentType.scenarios }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview">
|
||||
<div class="code-header">{{ currentType.name }} 示例</div>
|
||||
<pre><code>{{ currentType.example }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const active = ref('function')
|
||||
|
||||
const types = [
|
||||
{
|
||||
id: 'function',
|
||||
icon: '📦',
|
||||
name: '函数 API',
|
||||
target: '本地代码库',
|
||||
comm: '函数调用',
|
||||
latency: '纳秒级',
|
||||
scenarios: '数据处理、文件操作',
|
||||
example: `len("hello") # 返回 5
|
||||
max([1, 5, 3]) # 返回 5
|
||||
open("file.txt").read() # 读取文件`
|
||||
},
|
||||
{
|
||||
id: 'system',
|
||||
icon: '⚙️',
|
||||
name: '操作系统 API',
|
||||
target: '操作系统内核',
|
||||
comm: '系统调用',
|
||||
latency: '微秒级',
|
||||
scenarios: '文件操作、进程管理',
|
||||
example: `with open("file.txt", "r") as f:
|
||||
content = f.read()
|
||||
|
||||
subprocess.run(["ls", "-l"])`
|
||||
},
|
||||
{
|
||||
id: 'web',
|
||||
icon: '🌐',
|
||||
name: 'Web API',
|
||||
target: '远程服务器',
|
||||
comm: 'HTTP 请求',
|
||||
latency: '毫秒级',
|
||||
scenarios: 'AI 调用、数据获取',
|
||||
example: `requests.post(
|
||||
"https://api.deepseek.com/v1/chat/completions",
|
||||
json={"model": "deepseek-chat", "messages": [...]}
|
||||
)`
|
||||
}
|
||||
]
|
||||
|
||||
const currentType = computed(() => {
|
||||
return types.find((t) => t.id === active.value) || types[0]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.api-types-demo {
|
||||
margin: 20px 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.switch-bar {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.switch-bar button {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border: none;
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.switch-bar button:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.switch-bar button:hover {
|
||||
background: var(--vp-c-bg-mute);
|
||||
}
|
||||
|
||||
.switch-bar button.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.display-area {
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.info-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 10px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 10px;
|
||||
color: var(--vp-c-text-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-preview {
|
||||
background: #0a0a0a;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
padding: 8px 12px;
|
||||
background: #18181b;
|
||||
color: #71717a;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
|
||||
.code-preview pre {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
color: #e4e4e7;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.code-preview code {
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
}
|
||||
</style>
|
||||
@@ -53,10 +53,8 @@ result = <span class="func">greet</span>(<span class="str">"张三"</span>)</cod
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
<span
|
||||
>你不需要知道函数内部怎么实现，只需要知道怎么调用它。这就是 API
|
||||
的本质。</span
|
||||
>
|
||||
<span>你不需要知道函数内部怎么实现，只需要知道怎么调用它。这就是 API
|
||||
的本质。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="http-methods-demo">
|
||||
<div class="methods-grid">
|
||||
<div
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
:class="['method-card', method.id, { active: active === method.id }]"
|
||||
@click="active = method.id"
|
||||
>
|
||||
<span class="method-badge">{{ method.id }}</span>
|
||||
<div class="method-info">
|
||||
<div class="method-name">{{ method.name }}</div>
|
||||
<div class="method-use">{{ method.use }}</div>
|
||||
</div>
|
||||
<div class="method-flags">
|
||||
<span :class="['flag', method.idempotent ? 'yes' : 'no']">
|
||||
{{ method.idempotent ? '幂等' : '不幂等' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-detail">
|
||||
<div class="detail-header">
|
||||
<span :class="['detail-badge', currentMethod.id]">{{
|
||||
currentMethod.id
|
||||
}}</span>
|
||||
<span class="detail-title">{{ currentMethod.name }} - {{ currentMethod.use }}</span>
|
||||
</div>
|
||||
<div class="detail-desc">{{ currentMethod.desc }}</div>
|
||||
<div class="detail-analogy">
|
||||
<span class="analogy-label">餐厅类比:</span>
|
||||
<span class="analogy-text">{{ currentMethod.analogy }}</span>
|
||||
</div>
|
||||
<div class="detail-code">
|
||||
<pre><code>{{ currentMethod.example }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const active = ref('get')
|
||||
|
||||
const methods = [
|
||||
{
|
||||
id: 'get',
|
||||
name: '获取',
|
||||
use: '查询数据',
|
||||
idempotent: true,
|
||||
desc: '从服务器获取资源,不会修改任何数据',
|
||||
analogy: '"服务员,菜单给我看看"',
|
||||
example: `GET /api/users # 获取用户列表
|
||||
GET /api/users/123 # 获取单个用户
|
||||
GET /api/products?cat=phone # 查询手机商品`
|
||||
},
|
||||
{
|
||||
id: 'post',
|
||||
name: '创建',
|
||||
use: '新增数据',
|
||||
idempotent: false,
|
||||
desc: '向服务器提交数据,创建新资源',
|
||||
analogy: '"给我来份宫保鸡丁"',
|
||||
example: `POST /api/users
|
||||
Body: {"name": "张三", "email": "zhang@example.com"}
|
||||
|
||||
POST /api/orders
|
||||
Body: {"items": [{"id": 1, "qty": 2}]}`
|
||||
},
|
||||
{
|
||||
id: 'put',
|
||||
name: '全量更新',
|
||||
use: '替换资源',
|
||||
idempotent: true,
|
||||
desc: '用新数据完整替换旧资源',
|
||||
analogy: '"把宫保鸡丁改成糖醋里脊"',
|
||||
example: `PUT /api/users/123
|
||||
Body: {"name": "李四", "email": "li@example.com", "age": 25}
|
||||
# 注意:必须提供所有字段`
|
||||
},
|
||||
{
|
||||
id: 'patch',
|
||||
name: '部分更新',
|
||||
use: '修改字段',
|
||||
idempotent: false,
|
||||
desc: '只修改资源的部分字段',
|
||||
analogy: '"宫保鸡丁不要放花生"',
|
||||
example: `PATCH /api/users/123
|
||||
Body: {"name": "王五"}
|
||||
# 只修改 name,其他字段保持不变`
|
||||
},
|
||||
{
|
||||
id: 'delete',
|
||||
name: '删除',
|
||||
use: '删除资源',
|
||||
idempotent: true,
|
||||
desc: '从服务器删除资源',
|
||||
analogy: '"算了,那道菜不要了"',
|
||||
example: `DELETE /api/users/123 # 删除指定用户
|
||||
DELETE /api/orders/456 # 取消订单`
|
||||
}
|
||||
]
|
||||
|
||||
const currentMethod = computed(() => {
|
||||
return methods.find((m) => m.id === active.value) || methods[0]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.http-methods-demo {
|
||||
margin: 20px 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.methods-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.methods-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.methods-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.method-card {
|
||||
padding: 12px 8px;
|
||||
background: var(--vp-c-bg);
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.method-card:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.method-card:hover {
|
||||
background: var(--vp-c-bg-mute);
|
||||
}
|
||||
|
||||
.method-card.active {
|
||||
background: color-mix(in srgb, var(--vp-c-brand) 10%, transparent);
|
||||
}
|
||||
|
||||
.method-badge {
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
min-width: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.method-card.get .method-badge {
|
||||
background: #22c55e;
|
||||
color: white;
|
||||
}
|
||||
.method-card.post .method-badge {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
.method-card.put .method-badge {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
.method-card.patch .method-badge {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
.method-card.delete .method-badge {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.method-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.method-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.method-use {
|
||||
font-size: 10px;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.method-flags {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.flag {
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.flag.yes {
|
||||
background: #22c55e22;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.flag.no {
|
||||
background: #ef444422;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.method-detail {
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.detail-badge.get {
|
||||
background: #22c55e;
|
||||
color: white;
|
||||
}
|
||||
.detail-badge.post {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
.detail-badge.put {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
.detail-badge.patch {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
.detail-badge.delete {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-analogy {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.analogy-label {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.detail-code {
|
||||
background: #0a0a0a;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-code pre {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
color: #e4e4e7;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.detail-code code {
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="status-categories">
|
||||
<div class="cards-grid">
|
||||
<div
|
||||
v-for="cat in categories"
|
||||
:key="cat.code"
|
||||
:class="['status-card', cat.id]"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-code">{{ cat.code }}xx</span>
|
||||
<span class="card-name">{{ cat.name }}</span>
|
||||
</div>
|
||||
<div class="card-desc">{{ cat.desc }}</div>
|
||||
<div class="card-examples">
|
||||
<span v-for="ex in cat.examples" :key="ex" class="tag">{{ ex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="memory-tip">
|
||||
<span class="tip-icon">💡</span>
|
||||
<span class="tip-text">
|
||||
<strong>记忆技巧:</strong>
|
||||
<span class="tip-2">2️⃣ 成功</span> •
|
||||
<span class="tip-3">3️⃣ 重定向</span> •
|
||||
<span class="tip-4">4️⃣ 客户端错</span> •
|
||||
<span class="tip-5">5️⃣ 服务器错</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const categories = [
|
||||
{
|
||||
id: 'success',
|
||||
code: '2',
|
||||
name: '成功',
|
||||
desc: '请求被成功接收、理解并处理',
|
||||
examples: ['200 OK', '201 Created', '204 No Content']
|
||||
},
|
||||
{
|
||||
id: 'redirect',
|
||||
code: '3',
|
||||
name: '重定向',
|
||||
desc: '需要进一步操作才能完成请求',
|
||||
examples: ['301 永久移动', '304 未修改', '307 临时重定向']
|
||||
},
|
||||
{
|
||||
id: 'client-error',
|
||||
code: '4',
|
||||
name: '客户端错误',
|
||||
desc: '请求包含错误或无法完成',
|
||||
examples: ['400 参数错误', '401 未认证', '403 无权限', '404 不存在']
|
||||
},
|
||||
{
|
||||
id: 'server-error',
|
||||
code: '5',
|
||||
name: '服务器错误',
|
||||
desc: '服务器无法处理有效请求',
|
||||
examples: ['500 内部错误', '502 网关错误', '503 服务不可用']
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.status-categories {
|
||||
margin: 20px 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card {
|
||||
padding: 14px 12px;
|
||||
background: var(--vp-c-bg);
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.status-card:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.status-card.success {
|
||||
border-top: 3px solid #22c55e;
|
||||
}
|
||||
|
||||
.status-card.redirect {
|
||||
border-top: 3px solid #f59e0b;
|
||||
}
|
||||
|
||||
.status-card.client-error {
|
||||
border-top: 3px solid #ef4444;
|
||||
}
|
||||
|
||||
.status-card.server-error {
|
||||
border-top: 3px solid #8b5cf6;
|
||||
}
|
||||
|
||||
.status-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-code {
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
min-width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success .card-code {
|
||||
background: #22c55e22;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.redirect .card-code {
|
||||
background: #f59e0b22;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.client-error .card-code {
|
||||
background: #ef444422;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.server-error .card-code {
|
||||
background: #8b5cf622;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-examples {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 2px 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 3px;
|
||||
font-size: 9px;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.memory-tip {
|
||||
padding: 12px 16px;
|
||||
background: var(--vp-c-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.tip-text strong {
|
||||
color: var(--vp-c-text-1);
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.tip-2 {
|
||||
color: #22c55e;
|
||||
}
|
||||
.tip-3 {
|
||||
color: #f59e0b;
|
||||
}
|
||||
.tip-4 {
|
||||
color: #ef4444;
|
||||
}
|
||||
.tip-5 {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,719 @@
|
||||
<template>
|
||||
<div class="adder-chain-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">行波进位加法器 (Ripple Carry Adder)</span>
|
||||
<span class="subtitle">多个全加器级联，实现多位二进制加法</span>
|
||||
</div>
|
||||
|
||||
<div class="terms-box">
|
||||
<div class="term-item">
|
||||
<span class="term-name">级联</span>
|
||||
<span class="term-desc">低位 Cout 连接高位 Cin</span>
|
||||
</div>
|
||||
<div class="term-item">
|
||||
<span class="term-name">行波</span>
|
||||
<span class="term-desc">进位像波浪一样逐位传递</span>
|
||||
</div>
|
||||
<div class="term-item">
|
||||
<span class="term-name">溢出</span>
|
||||
<span class="term-desc">最高位产生进位，结果超出范围</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="bit-selector">
|
||||
<span class="selector-label">位数：</span>
|
||||
<button
|
||||
v-for="b in [2, 4, 8]"
|
||||
:key="b"
|
||||
class="bit-btn"
|
||||
:class="{ active: bitCount === b }"
|
||||
@click="bitCount = b"
|
||||
>
|
||||
{{ b }} 位
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span>A =</span>
|
||||
<input
|
||||
v-model.number="inputA"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="maxValue"
|
||||
class="num-input"
|
||||
/>
|
||||
</label>
|
||||
<span class="op">+</span>
|
||||
<label class="input-label">
|
||||
<span>B =</span>
|
||||
<input
|
||||
v-model.number="inputB"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="maxValue"
|
||||
class="num-input"
|
||||
/>
|
||||
</label>
|
||||
<span class="op">=</span>
|
||||
<span class="result">{{ resultDec }}</span>
|
||||
<span v-if="overflow" class="overflow-badge">溢出</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="binary-display">
|
||||
<div class="binary-row">
|
||||
<span class="binary-label">A</span>
|
||||
<span class="binary-bits">
|
||||
<span
|
||||
v-for="(b, i) in bitsA"
|
||||
:key="'a' + i"
|
||||
class="bit"
|
||||
:class="{ hl: activeBit === i }"
|
||||
>{{ b }}</span>
|
||||
</span>
|
||||
<span class="binary-dec">({{ clampedA }})</span>
|
||||
</div>
|
||||
<div class="binary-row">
|
||||
<span class="binary-label">B</span>
|
||||
<span class="binary-bits">
|
||||
<span
|
||||
v-for="(b, i) in bitsB"
|
||||
:key="'b' + i"
|
||||
class="bit"
|
||||
:class="{ hl: activeBit === i }"
|
||||
>{{ b }}</span>
|
||||
</span>
|
||||
<span class="binary-dec">({{ clampedB }})</span>
|
||||
</div>
|
||||
<div class="binary-row result-row">
|
||||
<span class="binary-label">=</span>
|
||||
<span class="binary-bits">
|
||||
<span
|
||||
v-for="(b, i) in bitsSum"
|
||||
:key="'s' + i"
|
||||
class="bit result-bit"
|
||||
:class="{ hl: activeBit === i }"
|
||||
>{{ b }}</span>
|
||||
</span>
|
||||
<span class="binary-dec">({{ resultDec }}{{ overflow ? ' 溢出' : '' }})</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chain-visualization">
|
||||
<div class="chain-header">
|
||||
<span class="chain-title">加法器级联</span>
|
||||
<span class="chain-hint">悬停查看每位计算详情</span>
|
||||
</div>
|
||||
<div class="chain-row">
|
||||
<div
|
||||
v-for="(stage, idx) in stages"
|
||||
:key="idx"
|
||||
class="stage-box"
|
||||
:class="{ active: activeBit === idx, first: idx === 0 }"
|
||||
@mouseenter="activeBit = idx"
|
||||
@mouseleave="activeBit = null"
|
||||
>
|
||||
<div class="stage-header">
|
||||
<span class="stage-bit">第{{ idx }}位</span>
|
||||
<span class="stage-type">{{
|
||||
idx === 0 ? '半加器' : '全加器'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="stage-io">
|
||||
<div class="io-row">
|
||||
<span class="io-tag a">A</span>
|
||||
<span class="io-val">{{ stage.a }}</span>
|
||||
<span class="io-tag b">B</span>
|
||||
<span class="io-val">{{ stage.b }}</span>
|
||||
<span v-if="stage.cin !== null" class="io-tag cin">Cin</span>
|
||||
<span v-if="stage.cin !== null" class="io-val">{{
|
||||
stage.cin
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="io-divider"></div>
|
||||
<div class="io-row">
|
||||
<span class="io-tag sum">Sum</span>
|
||||
<span class="io-val result">{{ stage.sum }}</span>
|
||||
<span class="io-tag cout">Cout</span>
|
||||
<span class="io-val" :class="{ carry: stage.cout }">{{
|
||||
stage.cout
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="idx < stages.length - 1 && stage.cout" class="carry-arrow">
|
||||
<svg width="20" height="12" viewBox="0 0 20 12">
|
||||
<path
|
||||
d="M 0,6 L 15,6 M 12,3 L 15,6 L 12,9"
|
||||
fill="none"
|
||||
stroke="#d97706"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeBit !== null" class="calculation-box">
|
||||
<div class="calc-title">第 {{ activeBit }} 位计算过程</div>
|
||||
<div class="calc-content">
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">输入：</span>
|
||||
<span class="calc-value">A = {{ stages[activeBit]?.a }}，B = {{ stages[activeBit]?.b
|
||||
}}<span v-if="stages[activeBit]?.cin !== null">，Cin = {{ stages[activeBit]?.cin }}</span></span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">本位：</span>
|
||||
<span class="calc-formula">
|
||||
{{ stages[activeBit]?.a }} ⊕ {{ stages[activeBit]?.b }}
|
||||
<span v-if="stages[activeBit]?.cin !== null">
|
||||
⊕ {{ stages[activeBit]?.cin }}</span>
|
||||
= <strong>{{ stages[activeBit]?.sum }}</strong>
|
||||
</span>
|
||||
<span class="calc-reason">（{{ getSumReason(stages[activeBit]) }}）</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">进位：</span>
|
||||
<span class="calc-formula">
|
||||
{{ stages[activeBit]?.cout ? '产生进位 → 传递给高位' : '无进位' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="calculation-box">
|
||||
<div class="calc-title">整体计算过程</div>
|
||||
<div class="calc-content">
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">输入：</span>
|
||||
<span class="calc-value">A = {{ clampedA }} ({{ bitsA.join('') }})，B = {{ clampedB }} ({{
|
||||
bitsB.join('')
|
||||
}})</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">过程：</span>
|
||||
<span class="calc-formula">从第 0 位开始，逐位计算本位和进位，进位向高位传递</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">结果：</span>
|
||||
<span class="calc-formula">{{ bitsSum.join('') }} = <strong>{{ resultDec }}</strong>{{ overflow ? ' (溢出)' : '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
进位像波浪一样从最低位逐级传递到最高位，所以叫"行波进位"。位数越多，延迟越大，但电路简单。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const bitCount = ref(4)
|
||||
const inputA = ref(7)
|
||||
const inputB = ref(6)
|
||||
const activeBit = ref(null)
|
||||
|
||||
const maxValue = computed(() => Math.pow(2, bitCount.value) - 1)
|
||||
|
||||
function clamp(n) {
|
||||
const v = Number(n)
|
||||
if (Number.isNaN(v)) return 0
|
||||
return Math.max(0, Math.min(maxValue.value, Math.floor(v)))
|
||||
}
|
||||
|
||||
const clampedA = computed(() => clamp(inputA.value))
|
||||
const clampedB = computed(() => clamp(inputB.value))
|
||||
|
||||
const bitsA = computed(() =>
|
||||
(clampedA.value >>> 0).toString(2).padStart(bitCount.value, '0').split('')
|
||||
)
|
||||
|
||||
const bitsB = computed(() =>
|
||||
(clampedB.value >>> 0).toString(2).padStart(bitCount.value, '0').split('')
|
||||
)
|
||||
|
||||
const stages = computed(() => {
|
||||
const A = clampedA.value
|
||||
const B = clampedB.value
|
||||
const result = []
|
||||
let carryIn = null
|
||||
|
||||
for (let i = 0; i < bitCount.value; i++) {
|
||||
const a = (A >> i) & 1
|
||||
const b = (B >> i) & 1
|
||||
let sum, carryOut
|
||||
|
||||
if (carryIn === null) {
|
||||
sum = a ^ b
|
||||
carryOut = a & b
|
||||
} else {
|
||||
const xor1 = a ^ b
|
||||
sum = xor1 ^ carryIn
|
||||
carryOut = (a & b) | (carryIn & xor1)
|
||||
}
|
||||
|
||||
result.push({
|
||||
bitPos: i,
|
||||
a,
|
||||
b,
|
||||
cin: carryIn,
|
||||
sum,
|
||||
cout: carryOut
|
||||
})
|
||||
carryIn = carryOut
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
const bitsSum = computed(() => {
|
||||
const S = stages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
|
||||
return (S >>> 0).toString(2).padStart(bitCount.value, '0').split('')
|
||||
})
|
||||
|
||||
const overflow = computed(() => {
|
||||
return (
|
||||
stages.value.length > 0 && stages.value[stages.value.length - 1].cout === 1
|
||||
)
|
||||
})
|
||||
|
||||
const resultDec = computed(() =>
|
||||
stages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
|
||||
)
|
||||
|
||||
function getSumReason(stage) {
|
||||
if (!stage) return ''
|
||||
const inputs = [stage.a, stage.b]
|
||||
if (stage.cin !== null) inputs.push(stage.cin)
|
||||
const ones = inputs.filter((x) => x === 1).length
|
||||
if (stage.sum === 1) {
|
||||
return ones % 2 === 1 ? '奇数个 1' : '偶数个 1'
|
||||
} else {
|
||||
return ones % 2 === 0 ? '偶数个 1' : '奇数个 1'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.adder-chain-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.terms-box {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.term-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.term-name {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.term-desc {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.bit-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bit-btn {
|
||||
padding: 0.25rem 0.6rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.bit-btn.active {
|
||||
background: var(--vp-c-brand-1);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.num-input {
|
||||
width: 3.5rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.op {
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.result {
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.overflow-badge {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.binary-display {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.binary-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.binary-label {
|
||||
color: var(--vp-c-text-2);
|
||||
min-width: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.binary-bits {
|
||||
display: flex;
|
||||
gap: 0.15rem;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.bit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.2rem;
|
||||
height: 1.4rem;
|
||||
border-radius: 3px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.bit.hl {
|
||||
background: var(--vp-c-brand-soft);
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.result-bit {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.binary-dec {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.72rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.result-row .binary-bits {
|
||||
color: var(--vp-c-green-1, #16a34a);
|
||||
}
|
||||
|
||||
.chain-visualization {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.chain-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.chain-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.chain-hint {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.chain-row {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stage-box {
|
||||
flex-shrink: 0;
|
||||
width: 5.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stage-box.active {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
box-shadow: 0 0 0 1px var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.stage-box.first {
|
||||
border-color: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.3rem;
|
||||
padding-bottom: 0.2rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-bit {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.stage-type {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.1rem 0.25rem;
|
||||
border-radius: 3px;
|
||||
background: var(--vp-c-brand-soft);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.stage-box.first .stage-type {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.stage-io {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.io-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.io-tag {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 600;
|
||||
padding: 0.05rem 0.2rem;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.io-tag.a {
|
||||
background: var(--vp-c-brand-1);
|
||||
}
|
||||
.io-tag.b {
|
||||
background: #8b5cf6;
|
||||
}
|
||||
.io-tag.cin {
|
||||
background: #d97706;
|
||||
}
|
||||
.io-tag.sum {
|
||||
background: var(--vp-c-green-1, #16a34a);
|
||||
}
|
||||
.io-tag.cout {
|
||||
background: #d97706;
|
||||
}
|
||||
|
||||
.io-val {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.io-val.result {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-green-1, #16a34a);
|
||||
}
|
||||
|
||||
.io-val.carry {
|
||||
color: #d97706;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.io-divider {
|
||||
height: 1px;
|
||||
background: var(--vp-c-divider);
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
|
||||
.carry-arrow {
|
||||
position: absolute;
|
||||
right: -1.3rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.calculation-box {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.calc-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.calc-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.calc-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.calc-label {
|
||||
color: var(--vp-c-text-3);
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
.calc-formula {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.calc-formula strong {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.calc-reason {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.control-panel {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.chain-row {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.stage-box {
|
||||
width: 5rem;
|
||||
}
|
||||
.terms-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+1219
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,515 @@
|
||||
<template>
|
||||
<div class="full-adder-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">全加器 (Full Adder)</span>
|
||||
<span class="subtitle">能处理进位输入的完整加法单元 ── 三个输入，两个输出</span>
|
||||
</div>
|
||||
|
||||
<div class="terms-box">
|
||||
<div class="term-item">
|
||||
<span class="term-name">Cin (进位输入)</span>
|
||||
<span class="term-desc">来自低位的进位信号</span>
|
||||
</div>
|
||||
<div class="term-item">
|
||||
<span class="term-name">Sum (本位)</span>
|
||||
<span class="term-desc">三位异或的结果</span>
|
||||
</div>
|
||||
<div class="term-item">
|
||||
<span class="term-name">Cout (进位输出)</span>
|
||||
<span class="term-desc">向高位的进位信号</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="circuit-container">
|
||||
<div class="inputs">
|
||||
<div class="input-line">
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ on: inputA }"
|
||||
@click="inputA = !inputA"
|
||||
>
|
||||
{{ inputA ? '1' : '0' }}
|
||||
</button>
|
||||
<span class="label">输入 A</span>
|
||||
</div>
|
||||
<div class="input-line">
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ on: inputB }"
|
||||
@click="inputB = !inputB"
|
||||
>
|
||||
{{ inputB ? '1' : '0' }}
|
||||
</button>
|
||||
<span class="label">输入 B</span>
|
||||
</div>
|
||||
<div class="input-line">
|
||||
<button
|
||||
class="toggle-btn cin-btn"
|
||||
:class="{ on: carryIn }"
|
||||
@click="carryIn = !carryIn"
|
||||
>
|
||||
{{ carryIn ? '1' : '0' }}
|
||||
</button>
|
||||
<span class="label">Cin</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wires">
|
||||
<svg class="wire-svg" viewBox="0 0 120 180" preserveAspectRatio="none">
|
||||
<path
|
||||
d="M 0,30 C 30,30 30,45 60,45"
|
||||
fill="none"
|
||||
:stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M 0,30 L 15,30 L 15,105 L 60,105"
|
||||
fill="none"
|
||||
:stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M 0,90 C 30,90 30,60 60,60"
|
||||
fill="none"
|
||||
:stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M 0,90 L 25,90 L 25,120 L 60,120"
|
||||
fill="none"
|
||||
:stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M 0,150 C 30,150 30,135 60,135"
|
||||
fill="none"
|
||||
:stroke="carryIn ? '#d97706' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
cx="15"
|
||||
cy="30"
|
||||
r="3"
|
||||
:fill="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
/>
|
||||
<circle
|
||||
cx="25"
|
||||
cy="90"
|
||||
r="3"
|
||||
:fill="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="gates">
|
||||
<div class="gate-box xor-gate" :class="{ active: xor1 }">
|
||||
<div class="gate-header">
|
||||
<span class="gate-name">XOR</span>
|
||||
<span class="gate-cn">异或门</span>
|
||||
</div>
|
||||
<div class="gate-formula">A ⊕ B</div>
|
||||
<div class="gate-desc">不同为 1 → 中间值</div>
|
||||
</div>
|
||||
<div class="gate-box and-gate" :class="{ active: carry1 }">
|
||||
<div class="gate-header">
|
||||
<span class="gate-name">AND</span>
|
||||
<span class="gate-cn">与门</span>
|
||||
</div>
|
||||
<div class="gate-formula">A ∧ B</div>
|
||||
<div class="gate-desc">全 1 为 1 → 进位1</div>
|
||||
</div>
|
||||
<div class="gate-box xor-gate" :class="{ active: sumOut }">
|
||||
<div class="gate-header">
|
||||
<span class="gate-name">XOR</span>
|
||||
<span class="gate-cn">异或门</span>
|
||||
</div>
|
||||
<div class="gate-formula">xor1 ⊕ Cin</div>
|
||||
<div class="gate-desc">不同为 1 → 本位</div>
|
||||
</div>
|
||||
<div class="gate-box or-gate" :class="{ active: carryOut }">
|
||||
<div class="gate-header">
|
||||
<span class="gate-name">OR</span>
|
||||
<span class="gate-cn">或门</span>
|
||||
</div>
|
||||
<div class="gate-formula">c1 ∨ c2</div>
|
||||
<div class="gate-desc">有 1 为 1 → 进位输出</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wires outputs-wires">
|
||||
<svg class="wire-svg" viewBox="0 0 50 180" preserveAspectRatio="none">
|
||||
<line
|
||||
x1="0"
|
||||
y1="52"
|
||||
x2="50"
|
||||
y2="52"
|
||||
:stroke="
|
||||
sumOut ? 'var(--vp-c-green-1, #16a34a)' : 'var(--vp-c-text-3)'
|
||||
"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<line
|
||||
x1="0"
|
||||
y1="135"
|
||||
x2="50"
|
||||
y2="135"
|
||||
:stroke="carryOut ? '#d97706' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="outputs">
|
||||
<div class="output-line" :class="{ active: sumOut }">
|
||||
<span class="label">本位 (Sum)</span>
|
||||
<span class="out-val s-val">{{ sumOut ? '1' : '0' }}</span>
|
||||
</div>
|
||||
<div class="output-line" :class="{ active: carryOut }">
|
||||
<span class="label">Cout (进位)</span>
|
||||
<span class="out-val c-val">{{ carryOut ? '1' : '0' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="calculation-box">
|
||||
<div class="calc-title">计算过程</div>
|
||||
<div class="calc-content">
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">输入：</span>
|
||||
<span class="calc-value">A = {{ inputA ? '1' : '0' }}，B = {{ inputB ? '1' : '0' }}，Cin =
|
||||
{{ carryIn ? '1' : '0' }}</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">中间值：</span>
|
||||
<span class="calc-formula">xor1 = A ⊕ B = {{ inputA ? '1' : '0' }} ⊕
|
||||
{{ inputB ? '1' : '0' }} =
|
||||
<strong>{{ xor1 ? '1' : '0' }}</strong></span>
|
||||
<span class="calc-reason">（{{ inputA !== inputB ? '不同' : '相同' }}）</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">本位：</span>
|
||||
<span class="calc-formula">Sum = xor1 ⊕ Cin = {{ xor1 ? '1' : '0' }} ⊕
|
||||
{{ carryIn ? '1' : '0' }} =
|
||||
<strong>{{ sumOut ? '1' : '0' }}</strong></span>
|
||||
<span class="calc-reason">（{{ xor1 !== carryIn ? '不同' : '相同' }}）</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">进位：</span>
|
||||
<span class="calc-formula">Cout = (A∧B) ∨ (xor1∧Cin) = ({{ carry1 ? '1' : '0' }}) ∨ ({{
|
||||
carry2 ? '1' : '0'
|
||||
}}) = <strong>{{ carryOut ? '1' : '0' }}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
全加器 = 两个半加器 + 一个 OR 门。第一级半加器算
|
||||
A+B，第二级半加器把结果加上 Cin，OR 门合并两路进位信号。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const inputA = ref(true)
|
||||
const inputB = ref(true)
|
||||
const carryIn = ref(false)
|
||||
|
||||
const xor1 = computed(() => inputA.value !== inputB.value)
|
||||
const carry1 = computed(() => inputA.value && inputB.value)
|
||||
const carry2 = computed(() => xor1.value && carryIn.value)
|
||||
const sumOut = computed(() => xor1.value !== carryIn.value)
|
||||
const carryOut = computed(() => carry1.value || carry2.value)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.full-adder-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.terms-box {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.term-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.term-name {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.term-desc {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.circuit-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.inputs,
|
||||
.outputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
min-width: 6rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.outputs {
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
.input-line,
|
||||
.output-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toggle-btn.on {
|
||||
background: var(--vp-c-brand-soft);
|
||||
color: var(--vp-c-brand-1);
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.toggle-btn.cin-btn.on {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
border-color: #d97706;
|
||||
}
|
||||
|
||||
.out-val {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.output-line.active .s-val {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
border-color: #16a34a;
|
||||
}
|
||||
|
||||
.output-line.active .c-val {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
border-color: #d97706;
|
||||
}
|
||||
|
||||
.wires {
|
||||
width: 100px;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.outputs-wires {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.wire-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gates {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.6rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.gate-box {
|
||||
width: 6rem;
|
||||
height: 3.5rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.gate-box.active {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
box-shadow: 0 0 8px var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.gate-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gate-name {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.gate-cn {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.gate-formula {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.gate-desc {
|
||||
font-size: 0.6rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.calculation-box {
|
||||
margin-top: 1rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.calc-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.calc-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.calc-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.calc-label {
|
||||
color: var(--vp-c-text-3);
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
.calc-formula {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.calc-formula strong {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.calc-reason {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.circuit-container {
|
||||
transform: scale(0.75);
|
||||
transform-origin: left top;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.terms-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
.gates {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+176
-53
@@ -1,12 +1,22 @@
|
||||
<template>
|
||||
<div class="half-adder-demo">
|
||||
<div class="demo-label">
|
||||
半加器 (Half Adder) 内部构造 ── 尝试组合 A 和 B，观察 XOR（异或门）和
|
||||
AND（与门）的分工
|
||||
<div class="demo-header">
|
||||
<span class="title">半加器 (Half Adder)</span>
|
||||
<span class="subtitle">最基础的二进制加法单元 ── 只能处理两个 1 位输入</span>
|
||||
</div>
|
||||
|
||||
<div class="terms-box">
|
||||
<div class="term-item">
|
||||
<span class="term-name">本位 (Sum)</span>
|
||||
<span class="term-desc">当前位的计算结果，不考虑外部进位</span>
|
||||
</div>
|
||||
<div class="term-item">
|
||||
<span class="term-name">进位 (Carry)</span>
|
||||
<span class="term-desc">当两位都是 1 时，向更高位"借位"</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="circuit-container">
|
||||
<!-- 输入端 -->
|
||||
<div class="inputs">
|
||||
<div class="input-line">
|
||||
<button
|
||||
@@ -30,41 +40,32 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连线区域 -->
|
||||
<div class="wires">
|
||||
<!-- Path visualization can be complex, using simple SVG lines -->
|
||||
<svg class="wire-svg" viewBox="0 0 100 150" preserveAspectRatio="none">
|
||||
<!-- A to XOR -->
|
||||
<path
|
||||
d="M 0,30 C 50,30 50,40 100,40"
|
||||
fill="none"
|
||||
:stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<!-- B to XOR -->
|
||||
<path
|
||||
d="M 0,120 C 50,120 50,60 100,60"
|
||||
fill="none"
|
||||
:stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<!-- A to AND -->
|
||||
<path
|
||||
d="M 20,30 L 20,90 C 20,90 50,90 100,90"
|
||||
fill="none"
|
||||
:stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<!-- B to AND -->
|
||||
<path
|
||||
d="M 40,120 L 40,110 C 40,110 50,110 100,110"
|
||||
fill="none"
|
||||
:stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<!-- Nodes -->
|
||||
<circle
|
||||
cx="20"
|
||||
cy="30"
|
||||
@@ -80,19 +81,25 @@
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 逻辑门 -->
|
||||
<div class="gates">
|
||||
<div class="gate-box xor-gate" :class="{ active: sumOut }">
|
||||
<div class="gate-name">XOR 门</div>
|
||||
<div class="gate-desc">计算"本位" (相加结果)</div>
|
||||
<div class="gate-header">
|
||||
<span class="gate-name">XOR</span>
|
||||
<span class="gate-cn">异或门</span>
|
||||
</div>
|
||||
<div class="gate-formula">A ⊕ B</div>
|
||||
<div class="gate-desc">不同为 1 → 本位</div>
|
||||
</div>
|
||||
<div class="gate-box and-gate" :class="{ active: carryOut }">
|
||||
<div class="gate-name">AND 门</div>
|
||||
<div class="gate-desc">计算"进位" (满2进1)</div>
|
||||
<div class="gate-header">
|
||||
<span class="gate-name">AND</span>
|
||||
<span class="gate-cn">与门</span>
|
||||
</div>
|
||||
<div class="gate-formula">A ∧ B</div>
|
||||
<div class="gate-desc">全 1 为 1 → 进位</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 线 -->
|
||||
<div class="wires outputs-wires">
|
||||
<svg class="wire-svg" viewBox="0 0 50 150" preserveAspectRatio="none">
|
||||
<line
|
||||
@@ -116,33 +123,44 @@
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 输出端 -->
|
||||
<div class="outputs">
|
||||
<div class="output-line" :class="{ active: sumOut }">
|
||||
<span class="label">本位 (Sum)</span>
|
||||
<span class="out-val s-val">{{ sumOut ? '1' : '0' }}</span>
|
||||
</div>
|
||||
<div class="output-line" :class="{ active: carryOut }">
|
||||
<span class="label">向前进位 (Carry)</span>
|
||||
<span class="label">进位 (Carry)</span>
|
||||
<span class="out-val c-val">{{ carryOut ? '1' : '0' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="logic-explain">
|
||||
<p>
|
||||
你的输入是 {{ inputA ? '1' : '0' }} 和 {{ inputB ? '1' : '0' }}。<br />
|
||||
<strong>XOR 门</strong>判断它们不仅要"相加"，还看是否"不同"：{{
|
||||
inputA !== inputB ? '不同，出1' : '相同，出0'
|
||||
}}
|
||||
——> 核心本位 <strong>{{ sumOut ? '1' : '0' }}</strong
|
||||
>。<br />
|
||||
<strong>AND 门</strong>暗中观察是否"全为真"：{{
|
||||
inputA && inputB ? '全为 1，产生进位！' : '没有全为 1，不进位'
|
||||
}}
|
||||
——> 进位信号 <strong>{{ carryOut ? '1' : '0' }}</strong
|
||||
>。
|
||||
</p>
|
||||
<div class="calculation-box">
|
||||
<div class="calc-title">计算过程</div>
|
||||
<div class="calc-content">
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">输入：</span>
|
||||
<span class="calc-value">A = {{ inputA ? '1' : '0' }}，B = {{ inputB ? '1' : '0' }}</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">本位：</span>
|
||||
<span class="calc-formula">A ⊕ B = {{ inputA ? '1' : '0' }} ⊕ {{ inputB ? '1' : '0' }} =
|
||||
<strong>{{ sumOut ? '1' : '0' }}</strong></span>
|
||||
<span class="calc-reason">（{{ inputA !== inputB ? '不同' : '相同' }}）</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<span class="calc-label">进位：</span>
|
||||
<span class="calc-formula">A ∧ B = {{ inputA ? '1' : '0' }} ∧ {{ inputB ? '1' : '0' }} =
|
||||
<strong>{{ carryOut ? '1' : '0' }}</strong></span>
|
||||
<span class="calc-reason">（{{ inputA && inputB ? '全为 1' : '不全为 1' }}）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
半加器用 XOR 算"本位和"，用 AND
|
||||
算"进位"。它是最小的加法单元，但无法处理来自低位的进位。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -166,12 +184,50 @@ const carryOut = computed(() => inputA.value && inputB.value)
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
.demo-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 0.2px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.terms-box {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.term-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.term-name {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.term-desc {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.circuit-container {
|
||||
@@ -240,12 +296,6 @@ const carryOut = computed(() => inputA.value && inputB.value)
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.s-val {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
.c-val {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.output-line.active .s-val {
|
||||
background: #dcfce7;
|
||||
@@ -300,27 +350,97 @@ const carryOut = computed(() => inputA.value && inputB.value)
|
||||
box-shadow: 0 0 8px var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.gate-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gate-name {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.gate-cn {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.gate-formula {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.gate-desc {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.2rem;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.logic-explain {
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.8rem;
|
||||
.calculation-box {
|
||||
margin-top: 1rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calc-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.calc-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.calc-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.calc-label {
|
||||
color: var(--vp-c-text-3);
|
||||
min-width: 3.5rem;
|
||||
}
|
||||
|
||||
.calc-formula {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.calc-formula strong {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.calc-reason {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@@ -329,5 +449,8 @@ const carryOut = computed(() => inputA.value && inputB.value)
|
||||
transform-origin: left top;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.terms-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+152
-43
@@ -1,36 +1,54 @@
|
||||
<template>
|
||||
<div class="logic-gate-demo">
|
||||
<div class="demo-label">四种基本逻辑门 ── 真值表一览</div>
|
||||
<div class="demo-header">
|
||||
<span class="title">四种基本逻辑门</span>
|
||||
<span class="subtitle">所有数字计算的基础积木</span>
|
||||
</div>
|
||||
|
||||
<div class="gates-grid">
|
||||
<div v-for="gate in gates" :key="gate.name" class="gate-card">
|
||||
<div class="gate-name">{{ gate.name }}</div>
|
||||
<div class="gate-header">
|
||||
<span class="gate-name-en">{{ gate.name }}</span>
|
||||
<span class="gate-name-cn">{{ gate.nameCn }}</span>
|
||||
</div>
|
||||
<div class="gate-formula">
|
||||
<span class="formula-label">运算：</span>
|
||||
<code class="formula-code">{{ gate.formula }}</code>
|
||||
</div>
|
||||
<div class="gate-rule">{{ gate.rule }}</div>
|
||||
<table class="mini-truth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>A</th>
|
||||
<th v-if="gate.name !== 'NOT'">B</th>
|
||||
<th>结果</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in gate.rows" :key="i">
|
||||
<td>{{ row[0] }}</td>
|
||||
<td v-if="gate.name !== 'NOT'">{{ row[1] }}</td>
|
||||
<td
|
||||
class="result-cell"
|
||||
:class="{ one: row[row.length - 1] === 1 }"
|
||||
>
|
||||
{{ row[row.length - 1] }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="gate-intuition">{{ gate.intuition }}</div>
|
||||
|
||||
<div class="truth-section">
|
||||
<div class="truth-title">真值表</div>
|
||||
<table class="mini-truth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>A</th>
|
||||
<th v-if="gate.name !== 'NOT'">B</th>
|
||||
<th>输出</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in gate.rows" :key="i">
|
||||
<td>{{ row[0] }}</td>
|
||||
<td v-if="gate.name !== 'NOT'">{{ row[1] }}</td>
|
||||
<td
|
||||
class="result-cell"
|
||||
:class="{ one: row[row.length - 1] === 1 }"
|
||||
>
|
||||
{{ row[row.length - 1] }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-caption">所有数字计算都由这四种门的组合实现</div>
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>
|
||||
逻辑门把物理电路的"通/断"变成了数学上的"真/假"运算，是硬件实现软件逻辑的桥梁。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -38,7 +56,10 @@
|
||||
const gates = [
|
||||
{
|
||||
name: 'AND',
|
||||
rule: '都为 1 才得 1',
|
||||
nameCn: '与门',
|
||||
formula: 'A ∧ B',
|
||||
rule: '两个都为 1，才输出 1',
|
||||
intuition: '串联开关：两道门都开才通',
|
||||
rows: [
|
||||
[0, 0, 0],
|
||||
[0, 1, 0],
|
||||
@@ -48,7 +69,10 @@ const gates = [
|
||||
},
|
||||
{
|
||||
name: 'OR',
|
||||
rule: '有一个 1 就得 1',
|
||||
nameCn: '或门',
|
||||
formula: 'A ∨ B',
|
||||
rule: '有一个为 1，就输出 1',
|
||||
intuition: '并联开关：任一道门开就通',
|
||||
rows: [
|
||||
[0, 0, 0],
|
||||
[0, 1, 1],
|
||||
@@ -58,7 +82,10 @@ const gates = [
|
||||
},
|
||||
{
|
||||
name: 'NOT',
|
||||
rule: '取反',
|
||||
nameCn: '非门',
|
||||
formula: '¬A',
|
||||
rule: '输入取反：0 变 1，1 变 0',
|
||||
intuition: '反向器：开变关，关变开',
|
||||
rows: [
|
||||
[0, 1],
|
||||
[1, 0]
|
||||
@@ -66,7 +93,10 @@ const gates = [
|
||||
},
|
||||
{
|
||||
name: 'XOR',
|
||||
rule: '不同才得 1',
|
||||
nameCn: '异或门',
|
||||
formula: 'A ⊕ B',
|
||||
rule: '两个不同，才输出 1',
|
||||
intuition: '差异检测器：相异为真',
|
||||
rows: [
|
||||
[0, 0, 0],
|
||||
[0, 1, 1],
|
||||
@@ -86,12 +116,22 @@ const gates = [
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
.demo-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.gates-grid {
|
||||
@@ -108,23 +148,80 @@ const gates = [
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gate-name {
|
||||
.gate-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.gate-name-en {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.gate-name-cn {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gate-formula {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.2rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.formula-label {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.formula-code {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 3px;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.gate-rule {
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gate-intuition {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.truth-section {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.truth-title {
|
||||
font-size: 0.6rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 0.2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.mini-truth {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.78rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@@ -137,7 +234,7 @@ const gates = [
|
||||
|
||||
.mini-truth th {
|
||||
background: var(--vp-c-bg-alt);
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
@@ -145,13 +242,25 @@ const gates = [
|
||||
.result-cell.one {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: bold;
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.demo-caption {
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.6rem;
|
||||
text-align: center;
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,974 @@
|
||||
<template>
|
||||
<div class="sql-root">
|
||||
<div class="sql-header">
|
||||
<span class="sql-icon">🗄️</span>
|
||||
<span class="sql-title">SQL 演示</span>
|
||||
</div>
|
||||
|
||||
<div class="sql-tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
:class="['sql-tab', { active: activeTab === tab.id }]"
|
||||
@click="activeTab = tab.id"
|
||||
>
|
||||
{{ tab.icon }} {{ tab.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sql-content">
|
||||
<!-- CRUD 演示 -->
|
||||
<div v-if="activeTab === 'crud'" class="sql-section">
|
||||
<div class="sql-editor">
|
||||
<div class="sql-editor-header">
|
||||
<span class="sql-editor-title">SQL 编辑器</span>
|
||||
</div>
|
||||
<div class="sql-editor-body">
|
||||
<div class="sql-code" contenteditable="true" @blur="updateQuery">
|
||||
{{ currentQuery }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sql-editor-footer">
|
||||
<button class="sql-btn sql-btn-run" @click="runQuery">
|
||||
▶ 运行
|
||||
</button>
|
||||
<select
|
||||
v-model="selectedQuery"
|
||||
class="sql-select"
|
||||
@change="selectQuery"
|
||||
>
|
||||
<option value="">选择示例...</option>
|
||||
<option value="select">SELECT 查询</option>
|
||||
<option value="insert">INSERT 插入</option>
|
||||
<option value="update">UPDATE 更新</option>
|
||||
<option value="delete">DELETE 删除</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sql-result">
|
||||
<div class="sql-result-header">
|
||||
<span class="sql-result-title">查询结果</span>
|
||||
<span class="sql-result-count">{{ result.length }} 行</span>
|
||||
</div>
|
||||
<div class="sql-result-body">
|
||||
<table class="sql-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col in columns" :key="col">{{ col }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in result" :key="i">
|
||||
<td v-for="col in columns" :key="col">{{ row[col] }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JOIN 演示 -->
|
||||
<div v-else-if="activeTab === 'join'" class="sql-section">
|
||||
<div class="join-diagram">
|
||||
<div class="join-title">JOIN 类型对比</div>
|
||||
<div class="join-grid">
|
||||
<div
|
||||
v-for="join in joins"
|
||||
:key="join.type"
|
||||
class="join-card"
|
||||
:class="{ 'join-card-active': activeJoin === join.type }"
|
||||
@click="activeJoin = join.type"
|
||||
>
|
||||
<div class="join-name">{{ join.name }}</div>
|
||||
<div class="join-desc">{{ join.desc }}</div>
|
||||
<div class="join-viz">
|
||||
<div class="join-circle join-left"></div>
|
||||
<div class="join-circle join-right"></div>
|
||||
<div :class="['join-highlight', join.highlight]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="join-result">
|
||||
<div class="join-sql">
|
||||
<div class="join-sql-title">SQL 示例</div>
|
||||
<pre class="join-code">{{ currentJoin.sql }}</pre>
|
||||
</div>
|
||||
<div class="join-table">
|
||||
<div class="join-table-title">查询结果</div>
|
||||
<table class="sql-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col in currentJoin.columns" :key="col">
|
||||
{{ col }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in currentJoin.data" :key="i">
|
||||
<td v-for="col in currentJoin.columns" :key="col">
|
||||
{{ row[col] }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 索引演示 -->
|
||||
<div v-else-if="activeTab === 'index'" class="sql-section">
|
||||
<div class="index-demo">
|
||||
<div class="index-title">索引原理</div>
|
||||
<div class="index-comparison">
|
||||
<div class="index-side">
|
||||
<div class="index-side-title">无索引</div>
|
||||
<div class="index-visual index-no-index">
|
||||
<div v-for="i in 8" :key="i" class="index-item">
|
||||
{{ indexData[i - 1] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-stats">
|
||||
<div class="index-stat">
|
||||
<span class="index-stat-label">查找 ID=5:</span>
|
||||
<span class="index-stat-value">需要扫描 5 次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="index-side">
|
||||
<div class="index-side-title">有索引 (B+树)</div>
|
||||
<div class="index-visual index-tree">
|
||||
<div class="index-tree-level">
|
||||
<div class="index-tree-node">1-8</div>
|
||||
</div>
|
||||
<div class="index-tree-level">
|
||||
<div class="index-tree-node">1-4</div>
|
||||
<div class="index-tree-node">5-8</div>
|
||||
</div>
|
||||
<div class="index-tree-level">
|
||||
<div v-for="i in 8" :key="i" class="index-tree-node-small">
|
||||
{{ i }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-stats">
|
||||
<div class="index-stat">
|
||||
<span class="index-stat-label">查找 ID=5:</span>
|
||||
<span class="index-stat-value index-fast">只需 3 次比较</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="index-tips">
|
||||
<div class="index-tip-title">索引使用建议</div>
|
||||
<ul class="index-tips-list">
|
||||
<li>✓ 在 WHERE、JOIN、ORDER BY 列上创建索引</li>
|
||||
<li>✓ 选择性高的列适合建索引（如手机号、用户名）</li>
|
||||
<li>✗ 避免在低选择性列上建索引（如性别、状态）</li>
|
||||
<li>✗ 索引会降低写入性能，不要过度索引</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 事务演示 -->
|
||||
<div v-else-if="activeTab === 'transaction'" class="sql-section">
|
||||
<div class="transaction-demo">
|
||||
<div class="transaction-title">ACID 特性</div>
|
||||
<div class="acid-grid">
|
||||
<div
|
||||
v-for="acid in acids"
|
||||
:key="acid.id"
|
||||
class="acid-card"
|
||||
:class="{ 'acid-card-active': activeAcid === acid.id }"
|
||||
@click="activeAcid = acid.id"
|
||||
>
|
||||
<div class="acid-letter">{{ acid.letter }}</div>
|
||||
<div class="acid-name">{{ acid.name }}</div>
|
||||
<div class="acid-desc">{{ acid.desc }}</div>
|
||||
<div class="acid-example">{{ acid.example }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="transaction-flow">
|
||||
<div class="transaction-flow-title">转账示例</div>
|
||||
<div class="transaction-steps">
|
||||
<div class="transaction-step">
|
||||
<div class="transaction-step-number">1</div>
|
||||
<div class="transaction-step-content">
|
||||
<div class="transaction-step-title">开始事务</div>
|
||||
<code>BEGIN;</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transaction-step">
|
||||
<div class="transaction-step-number">2</div>
|
||||
<div class="transaction-step-content">
|
||||
<div class="transaction-step-title">扣款</div>
|
||||
<code>UPDATE accounts SET balance = balance - 100 WHERE user_id =
|
||||
1;</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transaction-step">
|
||||
<div class="transaction-step-number">3</div>
|
||||
<div class="transaction-step-content">
|
||||
<div class="transaction-step-title">收款</div>
|
||||
<code>UPDATE accounts SET balance = balance + 100 WHERE user_id =
|
||||
2;</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transaction-step">
|
||||
<div class="transaction-step-number">4</div>
|
||||
<div class="transaction-step-content">
|
||||
<div class="transaction-step-title">提交事务</div>
|
||||
<code>COMMIT;</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transaction-note">
|
||||
如果步骤 2 或 3 失败，整个事务会回滚（ROLLBACK），保证原子性
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const activeTab = ref('crud')
|
||||
const activeJoin = ref('inner')
|
||||
const activeAcid = ref('atomicity')
|
||||
const selectedQuery = ref('')
|
||||
const currentQuery = ref('SELECT * FROM users;')
|
||||
|
||||
const tabs = [
|
||||
{ id: 'crud', name: 'CRUD 操作', icon: '📝' },
|
||||
{ id: 'join', name: 'JOIN 查询', icon: '🔗' },
|
||||
{ id: 'index', name: '索引', icon: '📇' },
|
||||
{ id: 'transaction', name: '事务', icon: '🔄' }
|
||||
]
|
||||
|
||||
const queries = {
|
||||
select: 'SELECT id, name, email FROM users WHERE age > 18;',
|
||||
insert:
|
||||
"INSERT INTO users (name, email, age) VALUES ('王五', 'wangwu@example.com', 25);",
|
||||
update: 'UPDATE users SET age = 26 WHERE id = 1;',
|
||||
delete: 'DELETE FROM users WHERE id = 3;'
|
||||
}
|
||||
|
||||
const indexData = ref([1, 2, 3, 4, 5, 6, 7, 8])
|
||||
|
||||
const columns = ref(['id', 'name', 'email', 'age'])
|
||||
const result = ref([
|
||||
{ id: 1, name: '张三', email: 'zhangsan@example.com', age: 28 },
|
||||
{ id: 2, name: '李四', email: 'lisi@example.com', age: 32 },
|
||||
{ id: 3, name: '王五', email: 'wangwu@example.com', age: 25 }
|
||||
])
|
||||
|
||||
const joins = {
|
||||
inner: {
|
||||
type: 'inner',
|
||||
name: 'INNER JOIN',
|
||||
desc: '只返回两个表中匹配的行',
|
||||
highlight: 'join-highlight-intersect',
|
||||
sql: `SELECT users.name, orders.order_id
|
||||
FROM users
|
||||
INNER JOIN orders ON users.id = orders.user_id;`,
|
||||
columns: ['name', 'order_id'],
|
||||
data: [
|
||||
{ name: '张三', order_id: 'ORD001' },
|
||||
{ name: '李四', order_id: 'ORD002' }
|
||||
]
|
||||
},
|
||||
left: {
|
||||
type: 'left',
|
||||
name: 'LEFT JOIN',
|
||||
desc: '返回左表所有行，右表不匹配的填 NULL',
|
||||
highlight: 'join-highlight-left',
|
||||
sql: `SELECT users.name, orders.order_id
|
||||
FROM users
|
||||
LEFT JOIN orders ON users.id = orders.user_id;`,
|
||||
columns: ['name', 'order_id'],
|
||||
data: [
|
||||
{ name: '张三', order_id: 'ORD001' },
|
||||
{ name: '李四', order_id: 'ORD002' },
|
||||
{ name: '王五', order_id: 'NULL' }
|
||||
]
|
||||
},
|
||||
right: {
|
||||
type: 'right',
|
||||
name: 'RIGHT JOIN',
|
||||
desc: '返回右表所有行，左表不匹配的填 NULL',
|
||||
highlight: 'join-highlight-right',
|
||||
sql: `SELECT users.name, orders.order_id
|
||||
FROM users
|
||||
RIGHT JOIN orders ON users.id = orders.user_id;`,
|
||||
columns: ['name', 'order_id'],
|
||||
data: [
|
||||
{ name: '张三', order_id: 'ORD001' },
|
||||
{ name: '李四', order_id: 'ORD002' },
|
||||
{ name: 'NULL', order_id: 'ORD003' }
|
||||
]
|
||||
},
|
||||
full: {
|
||||
type: 'full',
|
||||
name: 'FULL OUTER JOIN',
|
||||
desc: '返回两个表所有行，不匹配的填 NULL',
|
||||
highlight: 'join-highlight-full',
|
||||
sql: `SELECT users.name, orders.order_id
|
||||
FROM users
|
||||
FULL OUTER JOIN orders ON users.id = orders.user_id;`,
|
||||
columns: ['name', 'order_id'],
|
||||
data: [
|
||||
{ name: '张三', order_id: 'ORD001' },
|
||||
{ name: '李四', order_id: 'ORD002' },
|
||||
{ name: '王五', order_id: 'NULL' },
|
||||
{ name: 'NULL', order_id: 'ORD003' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const acids = {
|
||||
atomicity: {
|
||||
id: 'atomicity',
|
||||
letter: 'A',
|
||||
name: '原子性',
|
||||
desc: '事务中的操作要么全部成功，要么全部失败',
|
||||
example: '转账：要么同时成功，要么同时回滚'
|
||||
},
|
||||
consistency: {
|
||||
id: 'consistency',
|
||||
letter: 'C',
|
||||
name: '一致性',
|
||||
desc: '事务前后数据库状态一致，满足约束',
|
||||
example: '转账前后总金额不变'
|
||||
},
|
||||
isolation: {
|
||||
id: 'isolation',
|
||||
letter: 'I',
|
||||
name: '隔离性',
|
||||
desc: '并发事务之间互不干扰',
|
||||
example: '两个用户同时转账，不会相互影响'
|
||||
},
|
||||
durability: {
|
||||
id: 'durability',
|
||||
letter: 'D',
|
||||
name: '持久性',
|
||||
desc: '事务提交后，永久保存，即使系统故障',
|
||||
example: '转账成功后，断电也不会丢失'
|
||||
}
|
||||
}
|
||||
|
||||
const currentJoin = computed(() => joins[activeJoin.value])
|
||||
|
||||
function updateQuery(e) {
|
||||
currentQuery.value = e.target.textContent
|
||||
}
|
||||
|
||||
function selectQuery() {
|
||||
if (selectedQuery.value && queries[selectedQuery.value]) {
|
||||
currentQuery.value = queries[selectedQuery.value]
|
||||
}
|
||||
}
|
||||
|
||||
function runQuery() {
|
||||
// 模拟查询执行
|
||||
console.log('Running query:', currentQuery.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sql-root {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sql-header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sql-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sql-title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sql-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.sql-tab {
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sql-tab:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.sql-tab.active {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sql-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* CRUD 演示 */
|
||||
.sql-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sql-editor,
|
||||
.sql-result {
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sql-editor-header,
|
||||
.sql-result-header {
|
||||
padding: 10px 12px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sql-editor-title,
|
||||
.sql-result-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sql-result-count {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-3);
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sql-editor-body,
|
||||
.sql-result-body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.sql-code {
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--vp-c-text-1);
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
min-height: 80px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.sql-editor-footer {
|
||||
padding: 10px 12px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sql-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sql-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.sql-btn-run {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sql-select {
|
||||
flex: 1;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sql-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sql-table th,
|
||||
.sql-table td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.sql-table th {
|
||||
background: var(--vp-c-bg-alt);
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.sql-table tbody tr:hover {
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
/* JOIN 演示 */
|
||||
.join-diagram {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.join-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.join-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.join-card {
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.join-card:hover,
|
||||
.join-card-active {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.join-name {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.join-desc {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.join-viz {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.join-circle {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.join-left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.join-right {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.join-highlight {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.join-highlight-intersect {
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.join-highlight-left {
|
||||
left: 10px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.join-highlight-right {
|
||||
right: 10px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.join-highlight-full {
|
||||
left: 10px;
|
||||
width: calc(100% - 20px);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.join-result {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.join-sql,
|
||||
.join-table {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.join-sql-title,
|
||||
.join-table-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.join-code {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* 索引演示 */
|
||||
.index-demo {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.index-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.index-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.index-side {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.index-side-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.index-visual {
|
||||
min-height: 120px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.index-no-index {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.index-item {
|
||||
padding: 6px 10px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 4px;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.index-tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.index-tree-level {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.index-tree-node {
|
||||
padding: 6px 12px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.index-tree-node-small {
|
||||
padding: 4px 8px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
}
|
||||
|
||||
.index-stats {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.index-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.index-stat-label {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.index-stat-value {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.index-fast {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.index-tips {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.index-tip-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.index-tips-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.index-tips-list li {
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
/* 事务演示 */
|
||||
.transaction-demo {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.transaction-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.acid-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.acid-card {
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.acid-card:hover,
|
||||
.acid-card-active {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.acid-letter {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.acid-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.acid-desc {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.acid-example {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.transaction-flow {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.transaction-flow-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.transaction-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.transaction-step {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.transaction-step-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.transaction-step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.transaction-step-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.transaction-step-content code {
|
||||
display: block;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-2);
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
margin-top: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.transaction-note {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
padding: 10px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.join-result,
|
||||
.index-comparison {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.acid-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sql-editor-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,971 @@
|
||||
<template>
|
||||
<div class="http-root">
|
||||
<div class="http-header">
|
||||
<span class="http-icon">🌐</span>
|
||||
<span class="http-title">HTTP 协议演示</span>
|
||||
</div>
|
||||
|
||||
<div class="http-tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
:class="['http-tab', { active: activeTab === tab.id }]"
|
||||
@click="activeTab = tab.id"
|
||||
>
|
||||
{{ tab.icon }} {{ tab.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="http-content">
|
||||
<!-- 请求响应演示 -->
|
||||
<div v-if="activeTab === 'request'" class="http-section">
|
||||
<div class="http-flow">
|
||||
<div class="http-card http-request">
|
||||
<div class="http-card-header">
|
||||
<span class="http-card-icon">📤</span>
|
||||
<span class="http-card-title">HTTP 请求</span>
|
||||
</div>
|
||||
<div class="http-card-body">
|
||||
<div class="http-line http-line-start">
|
||||
<span class="http-method" :class="request.method">{{
|
||||
request.method
|
||||
}}</span>
|
||||
<span class="http-url">{{ request.url }}</span>
|
||||
<span class="http-version">{{ request.version }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(header, key) in request.headers"
|
||||
:key="key"
|
||||
class="http-line"
|
||||
>
|
||||
<span class="http-header-key">{{ key }}:</span>
|
||||
<span class="http-header-value">{{ header }}</span>
|
||||
</div>
|
||||
<div class="http-line http-line-empty"></div>
|
||||
<div v-if="request.body" class="http-body">
|
||||
{{ request.body }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="http-connection">
|
||||
<div class="http-connection-line"></div>
|
||||
<span class="http-connection-label">TCP 连接</span>
|
||||
</div>
|
||||
|
||||
<div class="http-card http-response">
|
||||
<div class="http-card-header">
|
||||
<span class="http-card-icon">📥</span>
|
||||
<span class="http-card-title">HTTP 响应</span>
|
||||
</div>
|
||||
<div class="http-card-body">
|
||||
<div class="http-line http-line-start">
|
||||
<span class="http-version">{{ response.version }}</span>
|
||||
<span class="http-status" :class="response.statusClass">{{
|
||||
response.status
|
||||
}}</span>
|
||||
<span class="http-status-text">{{ response.statusText }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(header, key) in response.headers"
|
||||
:key="key"
|
||||
class="http-line"
|
||||
>
|
||||
<span class="http-header-key">{{ key }}:</span>
|
||||
<span class="http-header-value">{{ header }}</span>
|
||||
</div>
|
||||
<div class="http-line http-line-empty"></div>
|
||||
<div class="http-body">{{ response.body }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="http-buttons">
|
||||
<button
|
||||
v-for="demo in demos"
|
||||
:key="demo.id"
|
||||
class="http-btn"
|
||||
@click="loadDemo(demo)"
|
||||
>
|
||||
{{ demo.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTTP 版本对比 -->
|
||||
<div v-else-if="activeTab === 'versions'" class="http-section">
|
||||
<div class="version-table">
|
||||
<div class="version-row version-row-head">
|
||||
<div class="version-cell">版本</div>
|
||||
<div class="version-cell">年份</div>
|
||||
<div class="version-cell">核心特性</div>
|
||||
<div class="version-cell">传输格式</div>
|
||||
<div class="version-cell">连接方式</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="ver in versions"
|
||||
:key="ver.version"
|
||||
class="version-row"
|
||||
:class="{ 'version-row-highlight': ver.highlight }"
|
||||
>
|
||||
<div class="version-cell version-version">{{ ver.version }}</div>
|
||||
<div class="version-cell">{{ ver.year }}</div>
|
||||
<div class="version-cell">{{ ver.features }}</div>
|
||||
<div class="version-cell">{{ ver.format }}</div>
|
||||
<div class="version-cell">{{ ver.connection }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTTP/2 多路复用 -->
|
||||
<div v-else-if="activeTab === 'http2'" class="http-section">
|
||||
<div class="http2-diagram">
|
||||
<div class="http2-header">
|
||||
<span class="http2-title">HTTP/1.1 vs HTTP/2</span>
|
||||
</div>
|
||||
|
||||
<div class="http2-comparison">
|
||||
<div class="http2-side">
|
||||
<div class="http2-side-title">HTTP/1.1</div>
|
||||
<div class="http2-connection http2-connection-legacy">
|
||||
<div class="http2-stream http2-stream-1">
|
||||
<div class="http2-label">请求 1</div>
|
||||
<div class="http2-timeline">
|
||||
<div class="http2-block http2-block-req">发送</div>
|
||||
<div class="http2-block http2-block-wait">等待</div>
|
||||
<div class="http2-block http2-block-res">接收</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="http2-stream http2-stream-2">
|
||||
<div class="http2-label">请求 2</div>
|
||||
<div class="http2-timeline">
|
||||
<div class="http2-block http2-block-wait">排队</div>
|
||||
<div class="http2-block http2-block-req">发送</div>
|
||||
<div class="http2-block http2-block-wait">等待</div>
|
||||
<div class="http2-block http2-block-res">接收</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="http2-stream http2-stream-3">
|
||||
<div class="http2-label">请求 3</div>
|
||||
<div class="http2-timeline">
|
||||
<div class="http2-block http2-block-wait">排队</div>
|
||||
<div class="http2-block http2-block-wait">排队</div>
|
||||
<div class="http2-block http2-block-req">发送</div>
|
||||
<div class="http2-block http2-block-res">接收</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="http2-note">串行传输，需等待前一个请求完成</div>
|
||||
</div>
|
||||
|
||||
<div class="http2-side">
|
||||
<div class="http2-side-title">HTTP/2</div>
|
||||
<div class="http2-connection http2-connection-modern">
|
||||
<div class="http2-stream http2-stream-1">
|
||||
<div class="http2-label">Stream 1</div>
|
||||
<div class="http2-timeline">
|
||||
<div class="http2-block http2-block-req">发送</div>
|
||||
<div class="http2-block http2-block-res">接收</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="http2-stream http2-stream-2">
|
||||
<div class="http2-label">Stream 2</div>
|
||||
<div class="http2-timeline">
|
||||
<div class="http2-block http2-block-req">发送</div>
|
||||
<div class="http2-block http2-block-res">接收</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="http2-stream http2-stream-3">
|
||||
<div class="http2-label">Stream 3</div>
|
||||
<div class="http2-timeline">
|
||||
<div class="http2-block http2-block-req">发送</div>
|
||||
<div class="http2-block http2-block-res">接收</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="http2-note">多路复用，并发传输多个请求</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTTPS vs HTTP -->
|
||||
<div v-else-if="activeTab === 'https'" class="http-section">
|
||||
<div class="https-comparison">
|
||||
<div class="https-card https-http">
|
||||
<div class="https-header">
|
||||
<span class="https-icon">🔓</span>
|
||||
<span class="https-title">HTTP</span>
|
||||
</div>
|
||||
<div class="https-body">
|
||||
<div class="https-warning">⚠️ 不安全</div>
|
||||
<ul class="https-list">
|
||||
<li>明文传输，数据可被窃听</li>
|
||||
<li>无法验证服务器身份</li>
|
||||
<li>数据可能被篡改</li>
|
||||
</ul>
|
||||
<div class="https-example">
|
||||
<div class="https-example-label">传输内容：</div>
|
||||
<code>GET /login?user=admin&pass=123456</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="https-card https-https">
|
||||
<div class="https-header">
|
||||
<span class="https-icon">🔒</span>
|
||||
<span class="https-title">HTTPS</span>
|
||||
</div>
|
||||
<div class="https-body">
|
||||
<div class="https-success">✓ 安全</div>
|
||||
<ul class="https-list">
|
||||
<li>加密传输，数据无法被窃听</li>
|
||||
<li>SSL/TLS 证书验证身份</li>
|
||||
<li>数据完整性校验，防篡改</li>
|
||||
</ul>
|
||||
<div class="https-example">
|
||||
<div class="https-example-label">传输内容：</div>
|
||||
<code>8f3a2b...（加密数据）</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="https-flow">
|
||||
<div class="https-flow-title">HTTPS 握手过程</div>
|
||||
<div class="https-steps">
|
||||
<div class="https-step">
|
||||
<div class="https-step-number">1</div>
|
||||
<div class="https-step-content">
|
||||
<div class="https-step-title">Client Hello</div>
|
||||
<div class="https-step-desc">客户端发送支持的加密套件</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="https-step">
|
||||
<div class="https-step-number">2</div>
|
||||
<div class="https-step-content">
|
||||
<div class="https-step-title">Server Hello</div>
|
||||
<div class="https-step-desc">
|
||||
服务器返回证书和选定的加密套件
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="https-step">
|
||||
<div class="https-step-number">3</div>
|
||||
<div class="https-step-content">
|
||||
<div class="https-step-title">验证证书</div>
|
||||
<div class="https-step-desc">客户端验证服务器证书</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="https-step">
|
||||
<div class="https-step-number">4</div>
|
||||
<div class="https-step-content">
|
||||
<div class="https-step-title">密钥交换</div>
|
||||
<div class="https-step-desc">生成会话密钥</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="https-step">
|
||||
<div class="https-step-number">5</div>
|
||||
<div class="https-step-content">
|
||||
<div class="https-step-title">加密通信</div>
|
||||
<div class="https-step-desc">使用会话密钥加密数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeTab = ref('request')
|
||||
|
||||
const tabs = [
|
||||
{ id: 'request', name: '请求响应', icon: '📡' },
|
||||
{ id: 'versions', name: '版本对比', icon: '📊' },
|
||||
{ id: 'http2', name: 'HTTP/2', icon: '⚡' },
|
||||
{ id: 'https', name: 'HTTPS', icon: '🔒' }
|
||||
]
|
||||
|
||||
const request = ref({
|
||||
method: 'GET',
|
||||
url: '/api/users/123',
|
||||
version: 'HTTP/1.1',
|
||||
headers: {
|
||||
Host: 'api.example.com',
|
||||
'User-Agent': 'Mozilla/5.0',
|
||||
Accept: 'application/json',
|
||||
Authorization: 'Bearer xxx'
|
||||
},
|
||||
body: null
|
||||
})
|
||||
|
||||
const response = ref({
|
||||
version: 'HTTP/1.1',
|
||||
status: '200',
|
||||
statusClass: 'success',
|
||||
statusText: 'OK',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Content-Length': '156',
|
||||
'Cache-Control': 'max-age=3600'
|
||||
},
|
||||
body: '{\n "id": 123,\n "name": "张三",\n "email": "zhangsan@example.com"\n}'
|
||||
})
|
||||
|
||||
const demos = [
|
||||
{
|
||||
id: 'get',
|
||||
name: 'GET 请求',
|
||||
request: {
|
||||
method: 'GET',
|
||||
url: '/api/users/123',
|
||||
version: 'HTTP/1.1',
|
||||
headers: {
|
||||
Host: 'api.example.com',
|
||||
Accept: 'application/json'
|
||||
},
|
||||
body: null
|
||||
},
|
||||
response: {
|
||||
version: 'HTTP/1.1',
|
||||
status: '200',
|
||||
statusClass: 'success',
|
||||
statusText: 'OK',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Content-Length': '156'
|
||||
},
|
||||
body: '{\n "id": 123,\n "name": "张三"\n}'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'post',
|
||||
name: 'POST 创建',
|
||||
request: {
|
||||
method: 'POST',
|
||||
url: '/api/users',
|
||||
version: 'HTTP/1.1',
|
||||
headers: {
|
||||
Host: 'api.example.com',
|
||||
'Content-Type': 'application/json',
|
||||
'Content-Length': '45'
|
||||
},
|
||||
body: '{\n "name": "李四",\n "email": "lisi@example.com"\n}'
|
||||
},
|
||||
response: {
|
||||
version: 'HTTP/1.1',
|
||||
status: '201',
|
||||
statusClass: 'success',
|
||||
statusText: 'Created',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Location: '/api/users/124'
|
||||
},
|
||||
body: '{\n "id": 124,\n "name": "李四"\n}'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '404',
|
||||
name: '404 错误',
|
||||
request: {
|
||||
method: 'GET',
|
||||
url: '/api/users/999',
|
||||
version: 'HTTP/1.1',
|
||||
headers: {
|
||||
Host: 'api.example.com'
|
||||
},
|
||||
body: null
|
||||
},
|
||||
response: {
|
||||
version: 'HTTP/1.1',
|
||||
status: '404',
|
||||
statusClass: 'error',
|
||||
statusText: 'Not Found',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: '{\n "error": "用户不存在"\n}'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const versions = [
|
||||
{
|
||||
version: 'HTTP/0.9',
|
||||
year: '1991',
|
||||
features: '仅支持 GET',
|
||||
format: '纯文本',
|
||||
connection: '一次一请求',
|
||||
highlight: false
|
||||
},
|
||||
{
|
||||
version: 'HTTP/1.0',
|
||||
year: '1996',
|
||||
features: '增加 POST/HEAD',
|
||||
format: '纯文本',
|
||||
connection: '短连接',
|
||||
highlight: false
|
||||
},
|
||||
{
|
||||
version: 'HTTP/1.1',
|
||||
year: '1997',
|
||||
features: '持久连接、分块传输',
|
||||
format: '纯文本',
|
||||
connection: '长连接',
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
version: 'HTTP/2',
|
||||
year: '2015',
|
||||
features: '多路复用、头部压缩',
|
||||
format: '二进制帧',
|
||||
connection: '多路复用',
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
version: 'HTTP/3',
|
||||
year: '2022',
|
||||
features: '基于 QUIC、解决队头阻塞',
|
||||
format: 'QUIC (UDP)',
|
||||
connection: '独立连接',
|
||||
highlight: true
|
||||
}
|
||||
]
|
||||
|
||||
function loadDemo(demo) {
|
||||
request.value = demo.request
|
||||
response.value = demo.response
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.http-root {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.http-header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.http-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.http-title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.http-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.http-tab {
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.http-tab:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.http-tab.active {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.http-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 请求响应演示 */
|
||||
.http-flow {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.http-card {
|
||||
flex: 1;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.http-request {
|
||||
border-left-color: #3b82f6;
|
||||
border-left-width: 4px;
|
||||
}
|
||||
|
||||
.http-response {
|
||||
border-left-color: #22c55e;
|
||||
border-left-width: 4px;
|
||||
}
|
||||
|
||||
.http-card-header {
|
||||
padding: 10px 12px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.http-card-body {
|
||||
padding: 12px;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.http-line {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.http-line-start {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.http-method {
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.http-method.GET {
|
||||
background: #22c55e22;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.http-method.POST {
|
||||
background: #3b82f622;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.http-url {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.http-version {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.http-header-key {
|
||||
color: var(--vp-c-brand);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.http-header-value {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.http-line-empty {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.http-body {
|
||||
padding: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
color: var(--vp-c-text-2);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.http-connection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.http-connection-line {
|
||||
width: 2px;
|
||||
height: 60px;
|
||||
background: var(--vp-c-divider);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.http-connection-line::before {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 16px;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.http-connection-label {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-3);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.http-status {
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.http-status.success {
|
||||
background: #22c55e22;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.http-status.error {
|
||||
background: #ef444422;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.http-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.http-btn {
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.http-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
/* 版本对比表 */
|
||||
.version-table {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.version-row {
|
||||
display: grid;
|
||||
grid-template-columns: 100px 80px 1fr 120px 120px;
|
||||
}
|
||||
|
||||
.version-row:nth-child(odd) {
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.version-row:nth-child(even) {
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.version-row-head {
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.version-row-highlight {
|
||||
background: color-mix(in srgb, var(--vp-c-brand) 8%, transparent);
|
||||
}
|
||||
|
||||
.version-cell {
|
||||
padding: 12px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.version-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.version-row-head .version-cell {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.version-version {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
/* HTTP/2 对比 */
|
||||
.http2-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.http2-side-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.http2-connection {
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.http2-stream {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.http2-label {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.http2-timeline {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.http2-block {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.http2-block-req {
|
||||
background: #3b82f622;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.http2-block-res {
|
||||
background: #22c55e22;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.http2-block-wait {
|
||||
background: var(--vp-c-bg-soft);
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.http2-note {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-3);
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* HTTPS 对比 */
|
||||
.https-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.https-card {
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.https-http {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.https-https {
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.https-header {
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.https-body {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.https-warning,
|
||||
.https-success {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.https-warning {
|
||||
background: #ef444422;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.https-success {
|
||||
background: #22c55e22;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.https-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.https-list li {
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.https-list li::before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.https-example {
|
||||
padding: 10px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.https-example-label {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.https-example code {
|
||||
display: block;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-1);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.https-flow {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.https-flow-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.https-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.https-step {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.https-step-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.https-step-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.https-step-desc {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.http-flow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.http-connection {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.http-connection-line {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.version-row {
|
||||
grid-template-columns: 80px 60px 1fr 100px 100px;
|
||||
}
|
||||
|
||||
.version-cell {
|
||||
padding: 8px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.http2-comparison,
|
||||
.https-comparison {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,564 @@
|
||||
<template>
|
||||
<div class="sd-root">
|
||||
<div class="sd-header">
|
||||
<span class="sd-icon">🔄</span>
|
||||
<span class="sd-title">序列化演示</span>
|
||||
</div>
|
||||
|
||||
<div class="sd-tabs">
|
||||
<button
|
||||
v-for="lang in languages"
|
||||
:key="lang.id"
|
||||
:class="['sd-tab', { active: activeLang === lang.id }]"
|
||||
@click="activeLang = lang.id"
|
||||
>
|
||||
{{ lang.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sd-layout">
|
||||
<div class="sd-panel sd-object">
|
||||
<div class="sd-panel-header">
|
||||
<span class="sd-panel-icon">📦</span>
|
||||
<span class="sd-panel-title">内存对象</span>
|
||||
</div>
|
||||
<div class="sd-panel-body">
|
||||
<pre class="sd-code">{{ currentLang.objectCode }}</pre>
|
||||
</div>
|
||||
<div class="sd-panel-desc">内存中的对象，只能在当前进程使用</div>
|
||||
</div>
|
||||
|
||||
<div class="sd-arrow" :class="{ 'sd-arrow-active': step >= 1 }">
|
||||
<div class="sd-arrow-line"></div>
|
||||
<div class="sd-arrow-label">序列化</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="sd-panel sd-json"
|
||||
:class="{ 'sd-panel-highlight': step === 1 }"
|
||||
>
|
||||
<div class="sd-panel-header">
|
||||
<span class="sd-panel-icon">{}</span>
|
||||
<span class="sd-panel-title">JSON 字符串</span>
|
||||
<span class="sd-panel-size">{{ currentLang.jsonSize }} bytes</span>
|
||||
</div>
|
||||
<div class="sd-panel-body">
|
||||
<pre class="sd-code">{{ currentLang.jsonString }}</pre>
|
||||
</div>
|
||||
<div class="sd-panel-desc">可在网络传输、可跨语言</div>
|
||||
</div>
|
||||
|
||||
<div class="sd-arrow" :class="{ 'sd-arrow-active': step >= 2 }">
|
||||
<div class="sd-arrow-line"></div>
|
||||
<div class="sd-arrow-label">传输</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="sd-panel sd-binary"
|
||||
:class="{ 'sd-panel-highlight': step === 2 }"
|
||||
>
|
||||
<div class="sd-panel-header">
|
||||
<span class="sd-panel-icon">💻</span>
|
||||
<span class="sd-panel-title">二进制</span>
|
||||
<span class="sd-panel-size">{{ currentLang.binarySize }} bytes</span>
|
||||
</div>
|
||||
<div class="sd-panel-body">
|
||||
<pre class="sd-code sd-binary-code">{{
|
||||
currentLang.binaryString
|
||||
}}</pre>
|
||||
</div>
|
||||
<div class="sd-panel-desc">Protobuf/MessagePack，更小更快</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sd-controls">
|
||||
<button
|
||||
class="sd-btn sd-btn-primary"
|
||||
:disabled="step >= 3"
|
||||
@click="nextStep"
|
||||
>
|
||||
{{ stepText }}
|
||||
</button>
|
||||
<button class="sd-btn" :disabled="step === 0" @click="reset">重置</button>
|
||||
</div>
|
||||
|
||||
<div class="sd-comparison">
|
||||
<div class="sd-comparison-header">📊 格式对比</div>
|
||||
<div class="sd-comparison-table">
|
||||
<div class="sd-row sd-row-head">
|
||||
<div class="sd-cell">格式</div>
|
||||
<div class="sd-cell">大小</div>
|
||||
<div class="sd-cell">速度</div>
|
||||
<div class="sd-cell">可读性</div>
|
||||
<div class="sd-cell">跨语言</div>
|
||||
</div>
|
||||
<div class="sd-row">
|
||||
<div class="sd-cell">JSON</div>
|
||||
<div class="sd-cell sd-rating sd-rating-3">★★★☆☆</div>
|
||||
<div class="sd-cell sd-rating sd-rating-3">★★★☆☆</div>
|
||||
<div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
|
||||
<div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
|
||||
</div>
|
||||
<div class="sd-row">
|
||||
<div class="sd-cell">XML</div>
|
||||
<div class="sd-cell sd-rating sd-rating-2">★★☆☆☆</div>
|
||||
<div class="sd-cell sd-rating sd-rating-2">★★☆☆☆</div>
|
||||
<div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
|
||||
<div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
|
||||
</div>
|
||||
<div class="sd-row">
|
||||
<div class="sd-cell">Protobuf</div>
|
||||
<div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
|
||||
<div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
|
||||
<div class="sd-cell sd-rating sd-rating-1">★☆☆☆☆</div>
|
||||
<div class="sd-cell sd-rating sd-rating-4">★★★★☆</div>
|
||||
</div>
|
||||
<div class="sd-row">
|
||||
<div class="sd-cell">MessagePack</div>
|
||||
<div class="sd-cell sd-rating sd-rating-4">★★★★☆</div>
|
||||
<div class="sd-cell sd-rating sd-rating-4">★★★★☆</div>
|
||||
<div class="sd-cell sd-rating sd-rating-2">★★☆☆☆</div>
|
||||
<div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const activeLang = ref('javascript')
|
||||
const step = ref(0)
|
||||
|
||||
const languages = {
|
||||
javascript: {
|
||||
name: 'JavaScript',
|
||||
objectCode: `const user = {
|
||||
id: 123,
|
||||
name: "张三",
|
||||
email: "zhangsan@example.com",
|
||||
age: 28
|
||||
};`,
|
||||
jsonString: `{
|
||||
"id": 123,
|
||||
"name": "张三",
|
||||
"email": "zhangsan@example.com",
|
||||
"age": 28
|
||||
}`,
|
||||
jsonSize: 68,
|
||||
binaryString: `七进制编码 (MessagePack):
|
||||
\xa7 id 7b
|
||||
\xa4 name \xa3 张三
|
||||
\xa5 email \xb1 zhangsan@example.com
|
||||
\xa3 age 1c`,
|
||||
binarySize: 52
|
||||
},
|
||||
python: {
|
||||
name: 'Python',
|
||||
objectCode: `user = {
|
||||
"id": 123,
|
||||
"name": "张三",
|
||||
"email": "zhangsan@example.com",
|
||||
"age": 28
|
||||
}`,
|
||||
jsonString: `{
|
||||
"id": 123,
|
||||
"name": "张三",
|
||||
"email": "zhangsan@example.com",
|
||||
"age": 28
|
||||
}`,
|
||||
jsonSize: 68,
|
||||
binaryString: `Protobuf 二进制:
|
||||
08 7b # field 1, varint 123
|
||||
12 06 # field 2, length 6
|
||||
e5 bc a0 e4 b8 89 # UTF-8 "张三"
|
||||
1a 11 # field 3, length 17
|
||||
7a 68 61 6e 67 73 61 6e 40 65 78 61 6d 70 6c 65 2e 63 6f 6d
|
||||
20 1c # field 4, varint 28`,
|
||||
binarySize: 38
|
||||
},
|
||||
java: {
|
||||
name: 'Java',
|
||||
objectCode: `User user = new User();
|
||||
user.setId(123);
|
||||
user.setName("张三");
|
||||
user.setEmail("zhangsan@example.com");
|
||||
user.setAge(28);`,
|
||||
jsonString: `{
|
||||
"id": 123,
|
||||
"name": "张三",
|
||||
"email": "zhangsan@example.com",
|
||||
"age": 28
|
||||
}`,
|
||||
jsonSize: 68,
|
||||
binaryString: `Java 序列化:
|
||||
AC ED 00 05 73 72 00 04 55 73 65 72
|
||||
... (复杂元数据)
|
||||
实际大小 ~150 bytes`,
|
||||
binarySize: 150
|
||||
},
|
||||
golang: {
|
||||
name: 'Go',
|
||||
objectCode: `type User struct {
|
||||
ID int
|
||||
Name string
|
||||
Email string
|
||||
Age int
|
||||
}
|
||||
|
||||
user := User{
|
||||
ID: 123,
|
||||
Name: "张三",
|
||||
Email: "zhangsan@example.com",
|
||||
Age: 28,
|
||||
}`,
|
||||
jsonString: `{
|
||||
"id": 123,
|
||||
"name": "张三",
|
||||
"email": "zhangsan@example.com",
|
||||
"age": 28
|
||||
}`,
|
||||
jsonSize: 68,
|
||||
binaryString: `Gob 编码:
|
||||
0f ff 81 03 01 01 08 55 73 65 72 01
|
||||
ff 82 00 01 02 01 04 69 64 01 04 01
|
||||
02 6e 61 6d 65 01 04 05 65 6d 61 69 6c
|
||||
... (高效二进制)`,
|
||||
binarySize: 42
|
||||
}
|
||||
}
|
||||
|
||||
const currentLang = computed(() => languages[activeLang.value])
|
||||
|
||||
const stepText = computed(() => {
|
||||
if (step.value === 0) return '开始序列化 →'
|
||||
if (step.value === 1) return '转换为二进制 →'
|
||||
if (step.value === 2) return '传输完成 ✓'
|
||||
return '完成'
|
||||
})
|
||||
|
||||
function nextStep() {
|
||||
if (step.value < 3) {
|
||||
step.value++
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
step.value = 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sd-root {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sd-header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sd-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sd-title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sd-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.sd-tab {
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sd-tab:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.sd-tab.active {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sd-layout {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sd-panel {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.sd-panel-highlight {
|
||||
border-color: var(--vp-c-brand);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-c-brand) 14%, transparent);
|
||||
}
|
||||
|
||||
.sd-panel-header {
|
||||
padding: 10px 12px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sd-panel-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sd-panel-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sd-panel-size {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-3);
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sd-panel-body {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sd-code {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.sd-binary-code {
|
||||
font-size: 10px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.sd-panel-desc {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sd-arrow {
|
||||
width: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.sd-arrow-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sd-arrow-line {
|
||||
width: 2px;
|
||||
height: 40px;
|
||||
background: var(--vp-c-brand);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sd-arrow-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -4px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 8px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.sd-arrow-label {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sd-controls {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sd-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sd-btn:hover:not(:disabled) {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.sd-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sd-btn-primary {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sd-btn-primary:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--vp-c-brand) 90%, white);
|
||||
}
|
||||
|
||||
.sd-comparison {
|
||||
background: var(--vp-c-bg);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.sd-comparison-header {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sd-comparison-table {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sd-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.sd-row:nth-child(odd) {
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.sd-row:nth-child(even) {
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.sd-row-head {
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.sd-cell {
|
||||
padding: 10px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.sd-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.sd-row-head .sd-cell {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.sd-row .sd-cell:first-child {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.sd-rating {
|
||||
color: var(--vp-c-brand);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sd-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sd-arrow {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sd-arrow-line {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.sd-arrow-line::after {
|
||||
right: 0;
|
||||
top: -4px;
|
||||
left: auto;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 8px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.sd-row {
|
||||
grid-template-columns: 80px repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.sd-cell {
|
||||
padding: 8px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user