Merge branch 'dev'

This commit is contained in:
sanbuphy
2026-02-20 01:04:06 +08:00
26 changed files with 29 additions and 124 deletions
@@ -35,21 +35,21 @@
</Transition> </Transition>
</template> </template>
<script setup lang="ts"> <script setup>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
const progress = ref(0) const progress = ref(0)
const showProgress = ref(false) const showProgress = ref(false)
const showArrow = ref(false) const showArrow = ref(false)
// 圆周长 = 2 * PI * r, r=24 // Circle circumference = 2 * PI * r, where r=24
const circumference = 2 * Math.PI * 24 const circumference = 2 * Math.PI * 24
let scrollTimer: number | null = null let scrollTimer = null
// 拖拽相关状态 // 拖拽相关状态
const isDragging = ref(false) const isDragging = ref(false)
const startY = ref(0) const startY = ref(0)
const startProgress = ref(0) const startProgress = ref(0)
let dragRafId: number | null = null let dragRafId = null
const updateProgress = () => { const updateProgress = () => {
// 拖拽时不更新进度,避免冲突 // 拖拽时不更新进度,避免冲突
@@ -79,7 +79,7 @@ const updateProgress = () => {
} }
// 开始拖拽 // 开始拖拽
const startDrag = (e: MouseEvent | TouchEvent) => { const startDrag = (e) => {
e.preventDefault() e.preventDefault()
isDragging.value = true isDragging.value = true
@@ -94,7 +94,7 @@ const startDrag = (e: MouseEvent | TouchEvent) => {
} }
// 拖拽中 // 拖拽中
const onDrag = (e: MouseEvent | TouchEvent) => { const onDrag = (e) => {
if (!isDragging.value) return if (!isDragging.value) return
e.preventDefault() e.preventDefault()
@@ -150,7 +150,7 @@ const endDrag = () => {
} }
// 点击回到顶部 // 点击回到顶部
const handleClick = (e: MouseEvent) => { const handleClick = (e) => {
// 如果是拖拽结束后的点击,不触发回到顶部 // 如果是拖拽结束后的点击,不触发回到顶部
if (isDragging.value) return if (isDragging.value) return
@@ -153,7 +153,7 @@
<div class="info-box"> <div class="info-box">
<span class="icon">💡</span> <span class="icon">💡</span>
<strong>核心指标</strong>命中率应该 > 80%响应时间 < 10ms内存使用 < 80%如果命中率突然下降可能是缓存穿透或雪崩如果响应时间变长可能是缓存满了 <strong>核心指标</strong>命中率应该 &gt; 80%响应时间 &lt; 10ms内存使用 &lt; 80%如果命中率突然下降可能是缓存穿透或雪崩如果响应时间变长可能是缓存满了
</div> </div>
</div> </div>
</template> </template>
@@ -253,27 +253,6 @@ const resetDemo = () => {
const uploadProgress = computed(() => { const uploadProgress = computed(() => {
return Math.round((stats.value.uploadedChunks / stats.value.totalChunks) * 100) return Math.round((stats.value.uploadedChunks / stats.value.totalChunks) * 100)
}) })
// 方法
const selectMethod = (id) => {
selectedMethod.value = id
resetDemo()
}
const simulateCacheHit = () => {
resetDemo()
currentStep.value = 4
}
const simulateCacheMiss = () => {
resetDemo()
currentStep.value = 4
}
const resetDemo = () => {
currentStep.value = 0
parallelActive.value = 0
}
</script> </script>
<style scoped> <style scoped>
@@ -69,7 +69,7 @@
:key="device.name" :key="device.name"
class="device" class="device"
:class="device.type" :class="device.type"
003e >
<div <div
class="device-icon" class="device-icon"
@mouseenter="hoverDevice = device.name" @mouseenter="hoverDevice = device.name"
@@ -214,11 +214,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, computed, watch } from 'vue'
const viewMode = ref('full') const viewMode = ref('full')
const showDetails = ref(false) const showDetails = ref(false)
@@ -83,7 +83,7 @@
</div> </div>
<div <div
v-for="(task, idx) in tasks" v-for="task in tasks"
:key="task.id" :key="task.id"
class="thread-row" class="thread-row"
> >
@@ -165,7 +165,6 @@
<script setup> <script setup>
import { ref, computed, watch } from 'vue' import { ref, computed, watch } from 'vue'
const comparisonMode = ref('memory')
const coroutineCount = ref(1000) const coroutineCount = ref(1000)
const isRunning = ref(false) const isRunning = ref(false)
const showDetails = ref(false) const showDetails = ref(false)
@@ -91,7 +91,7 @@
<div class="task-timeline"> <div class="task-timeline">
<div <div
v-for="(task, idx) in demoTasks" v-for="task in demoTasks"
:key="task.id" :key="task.id"
class="task-row" class="task-row"
> >
@@ -184,7 +184,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref } from 'vue'
const demoMode = ref('concurrent') const demoMode = ref('concurrent')
const isRunning = ref(false) const isRunning = ref(false)
@@ -276,47 +276,9 @@ const insightDescription = computed(() => {
}) })
// 方法 // 方法
function addThread() {
// 模拟添加线程
}
function killThread() {
// 模拟结束线程
}
function simulateCrash() {
// 模拟崩溃
}
function reset() { function reset() {
coroutineCount.value = 1000 coroutineCount.value = 1000
} }
function startSimulation() {
// 开始模拟
}
function toggleSimulation() {
// 切换模拟状态
}
function pauseSimulation() {
// 暂停模拟
}
function runSimulation() {
// 运行模拟
}
function stateText(state) {
const texts = {
ready: '就绪',
running: '运行中',
blocked: '阻塞',
completed: '已完成'
}
return texts[state] || state
}
</script> </script>
<style scoped> <style scoped>
@@ -219,7 +219,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref } from 'vue'
const isRunning = ref(false) const isRunning = ref(false)
const simulationSpeed = ref(2) const simulationSpeed = ref(2)
@@ -167,7 +167,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from 'vue' import { ref, watch } from 'vue'
const gmpDescription = 'G (Goroutine): 待执行的任务。M (Machine): 操作系统线程,执行 G 的载体。P (Processor): 逻辑处理器,提供执行上下文。G 先放入 P 的本地队列,P 与 M 绑定后,M 从 P 获取 G 执行。当本地队列空时,会从全局队列或其他 P 偷任务。' const gmpDescription = 'G (Goroutine): 待执行的任务。M (Machine): 操作系统线程,执行 G 的载体。P (Processor): 逻辑处理器,提供执行上下文。G 先放入 P 的本地队列,P 与 M 绑定后,M 从 P 获取 G 执行。当本地队列空时,会从全局队列或其他 P 偷任务。'
@@ -145,26 +145,6 @@ const currentInfo = computed(() => {
} }
}) })
function createProcess() {
if (processes.value.length >= 4) return
const id = processes.value.length + 1
const size = 20 + Math.random() * 10
processes.value.push({
id,
pid: pidCounter++,
size,
color: colors[id - 1],
codeSize: Math.floor(size * 0.15),
dataSize: Math.floor(size * 0.1),
heapSize: Math.floor(size * 0.6),
stackSize: Math.floor(size * 0.15),
crashed: false,
active: true
})
}
function killProcess() { function killProcess() {
if (processes.value.length === 0) return if (processes.value.length === 0) return
processes.value.pop() processes.value.pop()
@@ -164,7 +164,6 @@ async function startSimulation() {
isRunning.value = true isRunning.value = true
const startTime = Date.now() const startTime = Date.now()
const taskCount = pendingTasks.value.length
const baseSwitchCost = model.value === 'process' ? 10 : model.value === 'thread' ? 2 : 1 const baseSwitchCost = model.value === 'process' ? 10 : model.value === 'thread' ? 2 : 1
// 模拟任务处理 // 模拟任务处理
@@ -176,7 +176,6 @@ const startTime = ref(null)
let animationId = null let animationId = null
let currentThreadIndex = 0 let currentThreadIndex = 0
let timeQuantum = 50 // 时间片长度
const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#b3d8ff'] const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#b3d8ff']
@@ -27,11 +27,9 @@ const currentCost = computed(() => (totalTokens.value / 1000 * costPer1kTokens).
const systemHeight = computed(() => (systemPromptTokens / windowLimit) * 100) const systemHeight = computed(() => (systemPromptTokens / windowLimit) * 100)
const inputHeight = computed(() => (currentInputTokens / windowLimit) * 100) const inputHeight = computed(() => (currentInputTokens / windowLimit) * 100)
// History 高度展示逻辑: // History 高度展示逻辑:
// 我们希望展示总高度,即使超过 100%。 // 我们希望展示"总高度",即使超过 100%。
// 父容器会限制显示区域,溢出部分通过视觉暗示。 // 父容器会限制显示区域,溢出部分通过视觉暗示。
const historyHeight = computed(() => (historyTokens.value / windowLimit) * 100) const historyHeight = computed(() => (historyTokens.value / windowLimit) * 100)
const totalHeight = computed(() => systemHeight.value + historyHeight.value + inputHeight.value)
</script> </script>
<template> <template>
@@ -9,7 +9,7 @@
--> -->
<script setup> <script setup>
import { ref, computed, nextTick } from 'vue' import { ref, computed } from 'vue'
const scenarios = { const scenarios = {
coding: { coding: {
@@ -142,16 +142,6 @@ const prevStep = () => {
currentStepIndex.value-- currentStepIndex.value--
} }
} }
// Visual helpers
const getLayerStyle = (layerId) => {
const isActive = (layer) => {
// Logic to highlight active layer based on step action could go here
// For now, simple static colors
return true
}
return {}
}
</script> </script>
<template> <template>
@@ -190,7 +190,6 @@ const startIndex = () => {
indexStep.value = 0 indexStep.value = 0
indexSteps.value = ['根节点', '中间节点', '叶子节点'] indexSteps.value = ['根节点', '中间节点', '叶子节点']
const steps = ['根节点 (1-100)', '中间节点 (1-10)', '叶子节点 (找到 7)']
let currentStep = 0 let currentStep = 0
const interval = setInterval(() => { const interval = setInterval(() => {
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref } from 'vue'
const searchQuery = ref(55) const searchQuery = ref(55)
const isSearching = ref(false) const isSearching = ref(false)
@@ -67,7 +67,7 @@
<!-- 数据区域 --> <!-- 数据区域 -->
<g class="data-areas"> <g class="data-areas">
<polygon <polygon
v-for="(tool, toolIndex) in bundlers" v-for="tool in bundlers"
:key="tool.id" :key="tool.id"
:points="getDataPoints(tool.scores)" :points="getDataPoints(tool.scores)"
:fill="tool.color" :fill="tool.color"
@@ -233,7 +233,7 @@
</div> </div>
<div class="timeline-bar"> <div class="timeline-bar">
<div <div
v-for="(step, index) in timelineSteps" v-for="step in timelineSteps"
:key="step.name" :key="step.name"
class="timeline-segment" class="timeline-segment"
:class="{ active: currentStep === step.name }" :class="{ active: currentStep === step.name }"
@@ -440,7 +440,7 @@ server {
} }
] ]
const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === currentConfig.value)) const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === currentAuth.value))
</script> </script>
<style scoped> <style scoped>
@@ -75,6 +75,7 @@
/> />
<circle <circle
v-for="(c, i) in main" v-for="(c, i) in main"
:key="i"
:cx="60 + i * 50" :cx="60 + i * 50"
cy="40" cy="40"
r="8" r="8"
@@ -82,6 +83,7 @@
/> />
<circle <circle
v-for="(c, i) in feat" v-for="(c, i) in feat"
:key="i"
:cx="180 + i * 50" :cx="180 + i * 50"
cy="80" cy="80"
r="8" r="8"
@@ -285,7 +285,7 @@
<p> <p>
<span class="icon">💡</span> <span class="icon">💡</span>
<strong>LoRA 原理</strong> <strong>LoRA 原理</strong>
LoRA 通过在原始权重矩阵旁边添加低秩矩阵来进行微调只训练少量参数通常 < 1%就能实现特定风格或角色的学习相比完整微调LoRA 文件小训练快可组合使用 LoRA 通过在原始权重矩阵旁边添加低秩矩阵来进行微调只训练少量参数通常 &lt; 1%就能实现特定风格或角色的学习相比完整微调LoRA 文件小训练快可组合使用
</p> </p>
</div> </div>
</el-card> </el-card>
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref, watch } from 'vue'
const activeScope = ref('global') const activeScope = ref('global')
const explanation = ref('') const explanation = ref('')
@@ -65,7 +65,7 @@ updateExplanation()
<!-- 作用域层级图 --> <!-- 作用域层级图 -->
<div class="scope-levels"> <div class="scope-levels">
<div <div
v-for="(scope, index) in scopes" v-for="scope in scopes"
:key="scope.id" :key="scope.id"
class="level" class="level"
:class="{ active: activeScope === scope.id, dimmed: activeScope !== scope.id }" :class="{ active: activeScope === scope.id, dimmed: activeScope !== scope.id }"
@@ -59,7 +59,7 @@
<div class="health-indicator"> <div class="health-indicator">
<span v-if="server.status === 'healthy'"></span> <span v-if="server.status === 'healthy'"></span>
<span v-else-if="server.status === 'unhealthy'"></span> <span v-else-if="server.status === 'unhealthy'"></span>
<span v-else">🔄</span> <span v-else>🔄</span>
</div> </div>
</div> </div>
</div> </div>
@@ -179,7 +179,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue' import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
const currentStrategy = ref('performance') const currentStrategy = ref('performance')
const totalTraffic = ref(1000) const totalTraffic = ref(1000)
@@ -63,7 +63,7 @@
<div class="spans"> <div class="spans">
<div <div
v-for="(span, index) in spans" v-for="span in spans"
:key="span.id" :key="span.id"
class="span-row" class="span-row"
> >
@@ -135,7 +135,6 @@ const getPatchStyle = (n) => {
const isPatchified = currentStep.value >= 2 const isPatchified = currentStep.value >= 2
return { return {
backgroundImage: complexBg,
backgroundPosition: `${posX}px ${posY}px`, backgroundPosition: `${posX}px ${posY}px`,
backgroundSize: '280px 280px', backgroundSize: '280px 280px',
// In Step 0, patches are hidden to show pure container background // In Step 0, patches are hidden to show pure container background