docs: update README with project description and fix bit display order

Fix bit display order in adder demos to show most significant bit first

README.md

@@ -11,6 +11,8 @@
 
 # Easy-Vibe : Learn vibe coding from 0 to 1
 
+<p align="center"><em>A comprehensive, interactive guide to mastering AI-assisted coding from absolute beginner to confident practitioner.</em></p>
+
 <p align="center">
   📌 <a href="https://datawhalechina.github.io/easy-vibe/">在线阅读 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程 (Interactive Tutorial)</a>
 </p>

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

@@ -69,7 +69,7 @@
             v-for="(b, i) in bitsA"
             :key="'a' + i"
             class="bit"
-            :class="{ hl: activeBit === i }"
+            :class="{ hl: activeBit === (bitCount - 1 - i) }"
             >{{ b }}</span>
         </span>
         <span class="binary-dec">({{ clampedA }})</span>
@@ -81,7 +81,7 @@
             v-for="(b, i) in bitsB"
             :key="'b' + i"
             class="bit"
-            :class="{ hl: activeBit === i }"
+            :class="{ hl: activeBit === (bitCount - 1 - i) }"
             >{{ b }}</span>
         </span>
         <span class="binary-dec">({{ clampedB }})</span>
@@ -93,7 +93,7 @@
             v-for="(b, i) in bitsSum"
             :key="'s' + i"
             class="bit result-bit"
-            :class="{ hl: activeBit === i }"
+            :class="{ hl: activeBit === (bitCount - 1 - i) }"
             >{{ b }}</span>
         </span>
         <span class="binary-dec">({{ resultDec }}{{ overflow ? ' 溢出' : '' }})</span>

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

@@ -456,15 +456,15 @@
 
       <div class="multi-chain">
         <div
-          v-for="(s, i) in multiStages"
-          :key="i"
+          v-for="(s, i) in multiStages.slice().reverse()"
+          :key="3 - i"
           class="multi-stage"
-          :class="{ highlight: multiHover === i }"
-          @mouseenter="multiHover = i"
+          :class="{ highlight: multiHover === (3 - i) }"
+          @mouseenter="multiHover = 3 - i"
           @mouseleave="multiHover = null"
         >
-          <span class="multi-stage-bit">位{{ i }}</span>
-          <span class="multi-stage-io">{{ s.a }}+{{ s.b }}<span v-if="i > 0">+{{ s.cin }}</span></span>
+          <span class="multi-stage-bit">位{{ 3 - i }}</span>
+          <span class="multi-stage-io">{{ s.a }}+{{ s.b }}<span v-if="3 - i > 0">+{{ s.cin }}</span></span>
           <span class="multi-stage-out">={{ s.sum }}<span v-if="s.cout">C</span></span>
         </div>
       </div>