Merge branch 'dev'
This commit is contained in:
sanbuphy
@@ -41,7 +41,8 @@ import { ref, onMounted, onUnmounted } from 'vue'
|
||||
const progress = ref(0)
|
||||
const showProgress = ref(false)
|
||||
const showArrow = ref(false)
|
||||
const circumference = 2 * Math.PI * 24 // 2πr，r=24
|
||||
// 圆周长 = 2 * PI * r, r=24
|
||||
const circumference = 2 * Math.PI * 24
|
||||
let scrollTimer: number | null = null
|
||||
|
||||
// 拖拽相关状态
|
||||
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="network-layers-simple">
|
||||
<div class="layers-stack">
|
||||
<div
|
||||
v-for="(layer, index) in layers"
|
||||
:key="index"
|
||||
:class="['layer-item', layer.type]"
|
||||
>
|
||||
<div class="layer-icon">
|
||||
{{ layer.icon }}
|
||||
</div>
|
||||
<div class="layer-content">
|
||||
<div class="layer-name">
|
||||
{{ layer.name }}
|
||||
</div>
|
||||
<div class="layer-desc">
|
||||
{{ layer.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">↓ 数据从上往下逐层封装，就像给礼物层层包装</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const layers = ref([
|
||||
{
|
||||
name: '应用层 (HTTP, DNS)',
|
||||
desc: '具体业务：浏览网页、发邮件',
|
||||
icon: '📱',
|
||||
type: 'application'
|
||||
},
|
||||
{
|
||||
name: '传输层 (TCP, UDP)',
|
||||
desc: '决定用可靠还是快速的方式传输',
|
||||
icon: '📦',
|
||||
type: 'transport'
|
||||
},
|
||||
{
|
||||
name: '网络层 (IP)',
|
||||
desc: '规划路线：走哪条路到达目的地',
|
||||
icon: '🗺️',
|
||||
type: 'network'
|
||||
},
|
||||
{
|
||||
name: '数据链路层 (MAC)',
|
||||
desc: '把数据装上"车"，准备运输',
|
||||
icon: '🚚',
|
||||
type: 'datalink'
|
||||
},
|
||||
{
|
||||
name: '物理层 (网线、光纤)',
|
||||
desc: '实际的物理传输：电信号、光信号',
|
||||
icon: '🔌',
|
||||
type: 'physical'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.network-layers-simple {
|
||||
margin: 20px 0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
.layers-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.layer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.layer-item:hover {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.layer-item.application {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.layer-item.transport {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.layer-item.network {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.layer-item.datalink {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.layer-item.physical {
|
||||
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.layer-icon {
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layer-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.layer-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.layer-desc {
|
||||
font-size: 14px;
|
||||
opacity: 0.95;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="tcp-udp-simple">
|
||||
<div class="comparison-container">
|
||||
<div
|
||||
:class="['protocol-card', { active: activeTab === 'tcp' }]"
|
||||
@click="activeTab = 'tcp'"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-icon">📨</span>
|
||||
<span class="card-title">TCP</span>
|
||||
<span class="card-subtitle">可靠传输</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="feature">
|
||||
<span class="feature-icon">✅</span>
|
||||
<span>保证数据送达</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-icon">📞</span>
|
||||
<span>需要先建立连接</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🐢</span>
|
||||
<span>速度较慢</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-example">网页浏览、邮件、文件下载</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-badge">VS</div>
|
||||
|
||||
<div
|
||||
:class="['protocol-card', { active: activeTab === 'udp' }]"
|
||||
@click="activeTab = 'udp'"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="card-icon">📮</span>
|
||||
<span class="card-title">UDP</span>
|
||||
<span class="card-subtitle">快速传输</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="feature">
|
||||
<span class="feature-icon">⚡</span>
|
||||
<span>速度极快</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🚀</span>
|
||||
<span>不需要建立连接</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-icon">❓</span>
|
||||
<span>可能丢包</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-example">视频通话、在线游戏、直播</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="analogy">
|
||||
<div class="analogy-title">📦 生活类比</div>
|
||||
<div class="analogy-content">
|
||||
<div class="analogy-item">
|
||||
<strong>TCP</strong> = 挂号信（要签收，丢了重发）
|
||||
</div>
|
||||
<div class="analogy-item">
|
||||
<strong>UDP</strong> = 平信（直接扔信箱，不管丢没丢）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeTab = ref('tcp')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tcp-udp-simple {
|
||||
margin: 20px 0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
.comparison-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.protocol-card {
|
||||
flex: 1;
|
||||
min-width: 260px;
|
||||
padding: 20px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.protocol-card:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.protocol-card.active {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 48px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-example {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.vs-badge {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.analogy {
|
||||
max-width: 700px;
|
||||
margin: 20px auto 0;
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.analogy-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.analogy-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.analogy-item {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.comparison-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vs-badge {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.protocol-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -69,12 +69,7 @@
|
||||
<button
|
||||
v-else-if="currentTask.expectedCmd"
|
||||
class="copy-btn"
|
||||
@click="
|
||||
copyCommand(
|
||||
currentTask.expectedCmd[currentOS] ||
|
||||
currentTask.expectedCmd.common
|
||||
)
|
||||
"
|
||||
@click="copyCurrentTaskCommand"
|
||||
>
|
||||
复制命令
|
||||
</button>
|
||||
@@ -441,6 +436,11 @@ const copyCommand = (cmd) => {
|
||||
focusInput()
|
||||
}
|
||||
|
||||
const copyCurrentTaskCommand = () => {
|
||||
const cmd = currentTask.value.expectedCmd[currentOS.value] || currentTask.value.expectedCmd.common
|
||||
copyCommand(cmd)
|
||||
}
|
||||
|
||||
const focusInput = () => {
|
||||
if (cmdInput.value) {
|
||||
cmdInput.value.focus()
|
||||
|
||||
Reference in New Issue
Block a user