chore: save local history restorations from accidental git restore

docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue

@@ -1,60 +1,38 @@
 <template>
   <div class="register-demo">
-    <div class="demo-header">
-      <span class="title">寄存器：能「记住」一个 0 或 1 的小单元</span>
-      <span class="subtitle">只有点「写入」时才会把当前输入记下来，平时改输入不会影响已存的值</span>
-    </div>
+    <div class="demo-label">1 位寄存器 ── 只在"写入"时更新存储值</div>
 
-    <div class="why-what-box">
-      <p class="why-p">
-        <strong>为啥要看这个？</strong>CPU 算到一半要暂时「记住」中间结果，寄存器就是干这个的。它和「直接连线」不同：改输入不会立刻改变里面存的东西，必须主动点一次「写入」才会更新。
-      </p>
-      <p class="what-p">
-        <strong>这些词是啥？</strong>
-        <span class="term">输入</span>：你想写进去的 0 或 1。
-        <span class="term">写入</span>：点一下，把当前输入「锁进」寄存器。
-        <span class="term">存储值</span>：寄存器里现在记着的数（只有写入时才会变）。
-        <span class="term">输出</span>：从寄存器读出来的数，和存储值一样。
-      </p>
-    </div>
-
-    <div class="control-panel">
-      <label class="ctrl-group">
-        <span class="ctrl-label">输入</span>
+    <div class="reg-panel">
+      <!-- Input -->
+      <div class="reg-block">
+        <span class="reg-title">输入</span>
         <button
-          class="input-toggle"
+          class="toggle-btn"
           :class="{ on: inputData === 1 }"
           @click="inputData = inputData === 1 ? 0 : 1"
-        >
-          {{ inputData }}
-        </button>
-      </label>
-      <button class="write-btn" :class="{ flash: isWriting }" @click="writeOnce">
-        写入
-      </button>
-      <label class="ctrl-group">
-        <span class="ctrl-label">存储</span>
-        <span class="stored-val" :class="{ on: storedData === 1 }">{{ storedData }}</span>
-      </label>
-      <span class="ctrl-group">
-        <span class="ctrl-label">输出</span>
-        <span class="output-val" :class="{ on: storedData === 1 }">{{ storedData }}</span>
-      </span>
-    </div>
-
-    <div class="visualization-area">
-      <div class="flow-strip">
-        <span class="flow-item">输入 {{ inputData }}</span>
-        <span class="flow-arrow" :class="{ active: isWriting }">{{ isWriting ? '写入中 →' : '— 点「写入」才更新 →' }}</span>
-        <span class="flow-item flow-store" :class="{ flash: isWriting }">存 {{ storedData }}</span>
+        >{{ inputData }}</button>
+      </div>
+
+      <!-- Write -->
+      <button class="write-btn" :class="{ flash: isWriting }" @click="writeOnce">
+        写入 →
+      </button>
+
+      <!-- Stored -->
+      <div class="reg-block">
+        <span class="reg-title">存储</span>
+        <span class="val-box" :class="{ on: storedData === 1, flash: isWriting }">{{ storedData }}</span>
+      </div>
+
+      <!-- Output -->
+      <div class="reg-block">
+        <span class="reg-title">输出</span>
+        <span class="val-box out" :class="{ on: storedData === 1 }">{{ storedData }}</span>
       </div>
-      <p class="flow-hint">
-        {{ inputData !== storedData ? '输入和存储不一样：点「写入」会把当前输入记进去。' : '输入和存储已一致。' }}
-      </p>
     </div>
 
-    <div class="info-box">
-      <strong>核心思想：</strong>寄存器只在「写入」那一刻更新，其余时间一直保持原来的值，所以 CPU 能稳定保存中间结果。
+    <div class="status-line">
+      {{ inputData !== storedData ? '⚡ 输入≠存储 → 点"写入"即可更新' : '✓ 输入与存储一致' }}
     </div>
   </div>
 </template>
@@ -69,9 +47,7 @@ const isWriting = ref(false)
 const writeOnce = () => {
   isWriting.value = true
   storedData.value = inputData.value
-  window.setTimeout(() => {
-    isWriting.value = false
-  }, 400)
+  setTimeout(() => { isWriting.value = false }, 400)
 }
 </script>
 
@@ -80,75 +56,44 @@ const writeOnce = () => {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 1rem 1.2rem;
   margin: 1rem 0;
 }
 
-.demo-header {
-  margin-bottom: 0.5rem;
-}
-
-.demo-header .title {
-  display: block;
+.demo-label {
+  font-size: 0.78rem;
   font-weight: bold;
-  font-size: 1rem;
-}
-
-.demo-header .subtitle {
-  display: block;
-  font-size: 0.82rem;
   color: var(--vp-c-text-2);
-  font-weight: normal;
-}
-
-.why-what-box {
-  background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 0.65rem 0.85rem;
   margin-bottom: 0.75rem;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.55;
+  letter-spacing: 0.2px;
 }
 
-.why-what-box .why-p {
-  margin: 0 0 0.4rem;
-}
-
-.why-what-box .what-p {
-  margin: 0;
-}
-
-.why-what-box .term {
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.control-panel {
+/* ── panel ── */
+.reg-panel {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: 0.6rem;
-  padding: 0.5rem 0.7rem;
+  flex-wrap: wrap;
+  padding: 0.6rem 0.8rem;
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg);
-  margin-bottom: 0.75rem;
 }
 
-.ctrl-group {
-  display: inline-flex;
+.reg-block {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.25rem;
 }
 
-.ctrl-label {
-  font-size: 0.82rem;
-  color: var(--vp-c-text-2);
+.reg-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--vp-c-text-3);
 }
 
-.input-toggle {
+.toggle-btn {
   width: 2.2rem;
   height: 2.2rem;
   border-radius: 6px;
@@ -156,26 +101,28 @@ const writeOnce = () => {
   background: var(--vp-c-bg-alt);
   font-weight: bold;
   font-size: 1rem;
+  font-family: 'JetBrains Mono', monospace;
   cursor: pointer;
   transition: all 0.2s;
 }
 
-.input-toggle.on {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
+.toggle-btn.on {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
   background: var(--vp-c-brand-soft);
 }
 
 .write-btn {
-  padding: 0.35rem 0.8rem;
+  padding: 0.35rem 0.7rem;
   border-radius: 6px;
   border: 2px solid var(--vp-c-warning-1, #d97706);
   background: var(--vp-c-bg);
   color: var(--vp-c-warning-1, #d97706);
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.2s;
+  white-space: nowrap;
 }
 
 .write-btn:hover {
@@ -187,93 +134,44 @@ const writeOnce = () => {
   color: white;
 }
 
-.stored-val,
-.output-val {
+.val-box {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 2rem;
-  height: 2rem;
-  padding: 0 0.4rem;
+  width: 2.2rem;
+  height: 2.2rem;
   border-radius: 6px;
   border: 2px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
   font-weight: bold;
-  font-family: monospace;
+  font-family: 'JetBrains Mono', monospace;
   font-size: 1rem;
+  transition: all 0.2s;
 }
 
-.stored-val.on,
-.output-val.on {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
+.val-box.on {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
   background: var(--vp-c-brand-soft);
 }
 
-.visualization-area {
-  margin-bottom: 0.75rem;
+.val-box.flash {
+  box-shadow: 0 0 0 3px var(--vp-c-warning-soft, rgba(217, 119, 6, 0.25));
 }
 
-.flow-strip {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.6rem 0.8rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg);
-  font-size: 0.9rem;
+.val-box.out {
+  border-style: dashed;
 }
 
-.flow-item {
-  font-weight: bold;
-}
-
-.flow-store {
-  color: var(--vp-c-brand);
-}
-
-.flow-store.flash {
-  box-shadow: 0 0 0 2px var(--vp-c-warning-1);
-  border-radius: 4px;
-}
-
-.flow-arrow {
+.status-line {
+  margin-top: 0.5rem;
+  font-size: 0.78rem;
   color: var(--vp-c-text-3);
-  font-size: 0.82rem;
 }
 
-.flow-arrow.active {
-  color: var(--vp-c-warning-1);
-  font-weight: bold;
-}
-
-.flow-hint {
-  margin: 0.4rem 0 0;
-  font-size: 0.82rem;
-  color: var(--vp-c-text-2);
-}
-
-.info-box {
-  display: flex;
-  gap: 0.25rem;
-  background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
-  border-radius: 6px;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-}
-
-.info-box strong {
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-@media (max-width: 520px) {
-  .control-panel {
-    flex-direction: column;
-    align-items: flex-start;
+@media (max-width: 480px) {
+  .reg-panel {
+    justify-content: center;
   }
 }
 </style>