test-repo/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalGrid.vue

<!--
  TerminalGrid.vue
  终端网格模型演示组件
  
  用途：
  展示终端屏幕本质上是由“字符网格”构成的。
  帮助用户理解终端不是像素画板，而是由一个个固定大小的单元格（Cell）组成的矩阵。
  
  交互功能：
  - 点击/拖拽：可以在网格上“画”出字符。
  - 键盘输入：可以直接在网格中打字，观察光标移动和字符填充。
  - 响应式布局：支持横向滚动，适应不同屏幕宽度。
-->
<template>
  <div class="grid-demo">
    <div class="terminal-screen">
      <div class="grid-row" v-for="(row, rIndex) in rows" :key="rIndex">
        <div
          class="grid-cell"
          v-for="(cell, cIndex) in row"
          :key="cIndex"
          :class="{
            'active-cursor': cursor.r === rIndex && cursor.c === cIndex,
            drawn: cell.drawn
          }"
          @mousedown.prevent="handleCellMouseDown(rIndex, cIndex)"
          @mouseover="handleCellHover(rIndex, cIndex)"
        >
          {{ cell.char || ' ' }}
        </div>
      </div>
    </div>

    <div class="controls">
      <input
        ref="inputRef"
        type="text"
        v-model="inputText"
        placeholder="Type here..."
        class="text-input"
        @keydown="handleKeydown"
      />
      <button class="btn" @click="clearGrid">Clear</button>
      <span class="hint">Click/Drag cells to draw, Type to insert text</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

const ROW_COUNT = 10
const COL_COUNT = 40

const createGrid = () =>
  Array.from({ length: ROW_COUNT }, () =>
    Array.from({ length: COL_COUNT }, () => ({ char: '', drawn: false }))
  )

const rows = reactive(createGrid())
const cursor = reactive({ r: 0, c: 0 })
const inputText = ref('')
const isDrawing = ref(false)
const inputRef = ref(null)
const drawingListener = () => {
  isDrawing.value = false
}

const handleKeydown = (e) => {
  if (e.key === 'Backspace') {
    if (cursor.c > 0) {
      cursor.c--
    } else if (cursor.r > 0) {
      cursor.r--
      cursor.c = COL_COUNT - 1
    }
    rows[cursor.r][cursor.c].char = ''
    return
  }

  if (e.key.length === 1) {
    rows[cursor.r][cursor.c].char = e.key
    advanceCursor()
  }

  if (e.key === 'Enter') {
    cursor.r = Math.min(cursor.r + 1, ROW_COUNT - 1)
    cursor.c = 0
  }
}

const advanceCursor = () => {
  cursor.c++
  if (cursor.c >= COL_COUNT) {
    cursor.c = 0
    cursor.r++
    if (cursor.r >= ROW_COUNT) {
      cursor.r = ROW_COUNT - 1 // Stop at bottom
    }
  }
}

const handleCellMouseDown = (r, c) => {
  isDrawing.value = true
  rows[r][c].drawn = !rows[r][c].drawn
  cursor.r = r
  cursor.c = c
  if (inputRef.value) {
    inputRef.value.focus()
  }
}

const handleCellHover = (r, c) => {
  if (isDrawing.value) {
    rows[r][c].drawn = true
  }
}

const clearGrid = () => {
  for (let r = 0; r < ROW_COUNT; r++) {
    for (let c = 0; c < COL_COUNT; c++) {
      rows[r][c].char = ''
      rows[r][c].drawn = false
    }
  }
  cursor.r = 0
  cursor.c = 0
  inputText.value = ''
  if (inputRef.value) {
    inputRef.value.focus()
  }
}

onMounted(() => {
  window.addEventListener('mouseup', drawingListener)
})

onBeforeUnmount(() => {
  window.removeEventListener('mouseup', drawingListener)
})
</script>

<style scoped>
.grid-demo {
  background: #09090b;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #27272a;
  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
  overflow: hidden; /* 防止内容溢出圆角 */
}

.terminal-screen {
  border: 1px solid #27272a;
  background: #000;
  cursor: text;
  display: block;
  overflow-x: auto; /* 允许横向滚动 */
  max-width: 100%;
  border-radius: 6px;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #3f3f46 #18181b;
}

/* Webkit scrollbar styles */
.terminal-screen::-webkit-scrollbar {
  height: 8px;
}

.terminal-screen::-webkit-scrollbar-track {
  background: #18181b;
}

.terminal-screen::-webkit-scrollbar-thumb {
  background-color: #3f3f46;
  border-radius: 4px;
}

.grid-row {
  display: flex;
  width: max-content; /* 确保内容撑开宽度 */
}

.grid-cell {
  width: 16px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #27272a;
  border-bottom: 1px solid #27272a;
  color: #e4e4e7;
  font-size: 14px;
  user-select: none;
}

.grid-cell.drawn {
  background-color: #3f3f46;
}

.grid-cell.active-cursor {
  background-color: #e4e4e7;
  color: #000;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0.7;
  }
}

.controls {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.text-input {
  background: #18181b;
  border: 1px solid #3f3f46;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
}

.btn {
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #e4e4e7;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:hover {
  background: #3f3f46;
  border-color: #52525b;
}

.hint {
  color: #a1a1aa; /* Zinc 400 */
  font-size: 12px;
  margin-left: auto;
}
</style>