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

docs: update terminal intro content and components

Browse Source
This commit is contained in:
sanbuphy
2026-01-15 12:25:48 +08:00
parent c238f07e0d
commit 50d44f7721
8 changed files with 2023 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/terminal-intro/BufferSwitchDemo.vue
+284
View File
@@ -0,0 +1,284 @@
<template>
<div class="buffer-demo">
<div class="terminal-frame">
<div class="window-bar">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
<span class="title">Terminal - Buffer Switching Demo</span>
</div>
<div class="screen-container">
<!-- Main Buffer (Layer 0) -->
<div class="buffer main-buffer">
<div class="line"><span class="prompt">➜</span> <span class="cmd">ls -la</span></div>
<div class="line output">total 16</div>
<div class="line output">drwxr-xr-x 2 user staff 64 Jan 15 10:00 .</div>
<div class="line output">drwxr-xr-x 4 user staff 128 Jan 15 09:55 ..</div>
<div class="line output">-rw-r--r-- 1 user staff 1024 Jan 15 10:00 notes.txt</div>
<div class="line"><span class="prompt">➜</span> <span class="cmd">echo "Hello World"</span></div>
<div class="line output">Hello World</div>
<div class="line"><span class="prompt">➜</span> <span class="cmd">vim notes.txt</span></div>
<!-- The cursor would be here if not in vim -->
</div>
<!-- Alternate Buffer (Layer 1) -->
<transition name="slide-up">
<div v-if="isAltBufferActive" class="buffer alt-buffer">
<div class="vim-header">
<span class="filename">notes.txt</span>
<span class="modified">[+]</span>
</div>
<div class="vim-body">
<div class="line-num">1</div><div class="code">This is a text file opened in Vim.</div>
<div class="line-num">2</div><div class="code"></div>
<div class="line-num">3</div><div class="code">Notice how this interface takes up</div>
<div class="line-num">4</div><div class="code">the entire screen?</div>
<div class="line-num">5</div><div class="code"></div>
<div class="line-num">6</div><div class="code">It is running in the <span class="highlight">Alternate Buffer</span>.</div>
<div class="line-num">~</div>
<div class="line-num">~</div>
</div>
<div class="vim-status-bar">
<span class="mode">NORMAL</span>
<span class="file-info">notes.txt [unix] (10:24)</span>
</div>
<div class="vim-cmd-line">
<span v-if="showQuitCmd">:q</span>
</div>
</div>
</transition>
</div>
</div>
<div class="controls">
<div class="description">
<div v-if="!isAltBufferActive">
<p><strong>Current: Primary Buffer (主缓冲区)</strong></p>
<p>This is the standard scrolling log. Commands are executed line by line.</p>
<button class="action-btn" @click="openVim">
Execute `vim notes.txt`
</button>
</div>
<div v-else>
<p><strong>Current: Alternate Buffer (备用缓冲区)</strong></p>
<p>A separate "canvas" for full-screen apps. It hides the history but doesn't delete it.</p>
<button class="action-btn red" @click="quitVim">
Execute `:q` (Quit)
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isAltBufferActive = ref(false)
const showQuitCmd = ref(false)
const openVim = () => {
isAltBufferActive.value = true
showQuitCmd.value = false
}
const quitVim = () => {
showQuitCmd.value = true
setTimeout(() => {
isAltBufferActive.value = false
}, 500)
}
</script>
<style scoped>
.buffer-demo {
margin: 20px 0;
font-family: 'Menlo', 'Monaco', monospace;
}
.terminal-frame {
background: #1e1e1e;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border: 1px solid #333;
}
.window-bar {
background: #2d2d2d;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 6px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.title {
margin-left: 10px;
font-size: 12px;
color: #999;
}
.screen-container {
position: relative;
height: 240px;
background: #000;
overflow: hidden;
}
.buffer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
/* Main Buffer Styles */
.main-buffer {
color: #ccc;
font-size: 13px;
line-height: 1.5;
}
.prompt {
color: #27c93f;
margin-right: 8px;
}
.cmd {
font-weight: bold;
color: #fff;
}
.output {
color: #888;
}
/* Alt Buffer Styles (Vim Look) */
.alt-buffer {
background: #282c34;
color: #abb2bf;
display: flex;
flex-direction: column;
z-index: 10;
}
.vim-header {
display: none; /* Vim doesn't usually have a top header like this, but helpful for context? Maybe skip */
}
.vim-body {
flex: 1;
font-size: 14px;
line-height: 1.6;
}
.line-num {
display: inline-block;
width: 30px;
color: #5c6370;
text-align: right;
margin-right: 10px;
}
.code {
display: inline-block;
}
.highlight {
color: #e5c07b;
font-weight: bold;
}
.vim-status-bar {
background: #3e4452;
color: #ccc;
padding: 4px 10px;
font-size: 12px;
display: flex;
justify-content: space-between;
}
.mode {
font-weight: bold;
background: #98c379;
color: #282c34;
padding: 0 5px;
margin-right: 10px;
}
.vim-cmd-line {
height: 24px;
display: flex;
align-items: center;
padding: 0 5px;
}
/* Transitions */
.slide-up-enter-active,
.slide-up-leave-active {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide-up-enter-from,
.slide-up-leave-to {
transform: translateY(100%);
}
.controls {
margin-top: 15px;
background: #f6f6f7;
border-radius: 8px;
padding: 15px;
border: 1px solid #eee;
}
.dark .controls {
background: #252529;
border-color: #333;
}
.action-btn {
background: #27c93f;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
transition: all 0.2s;
margin-top: 10px;
}
.action-btn:hover {
background: #22b036;
transform: translateY(-1px);
}
.action-btn.red {
background: #ff5f56;
}
.action-btn.red:hover {
background: #e0483e;
}
p {
margin: 5px 0;
font-size: 14px;
color: var(--vp-c-text-1);
}
</style>