feat: MetaVar panel view the current match (#649)

Author: zhangmo8

website/.vitepress/theme/custom.css

@@ -5,13 +5,13 @@
   --vp-c-brand-2: #a89f2a;
   --vp-c-brand-1: #918623;
   --vp-c-brand-3: #2f4f6d;
-  --vp-custom-selctor-option-text: #213547;
+  --vp-custom-selector-option-text: #213547;
 
 
   --vp-custom-block-tip-text: var(--vp-c-text-1);
   --vp-custom-block-tip-bg: var(--vp-c-green-soft);
   --vp-custom-block-tip-code-bg: var(--vp-c-green-soft);
 }
 .dark {
-  --vp-custom-selctor-option-text: #213547;
-}
+  --vp-custom-selector-option-text: #213547;
+}

website/src/components/EnvDisplay.vue

@@ -48,6 +48,14 @@ function decrement() {
           </td>
         </tr>
       </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="2">
+            Now it's the {{ currentIndex + 1 }}th matched
+            <span class="match-count">({{ currentIndex + 1 }}/{{props.envs.length}})</span>
+          </td>
+        </tr>
+      </tfoot>
     </table>
     <div class="choose-match">
       <button @click="decrement">Prev Match</button>
@@ -97,6 +105,9 @@ function decrement() {
   border-left: 1px solid var(--vp-c-divider);
   width: 75%;
 }
+.metavar-table tfoot .match-count {
+  color: #999;
+}
 .choose-match {
   margin-top: 1em;
 }
@@ -116,4 +127,4 @@ function decrement() {
 .no-match-tip ul > li {
   margin-top: 4px;
 }
-</style>
+</style>

website/src/components/SelectLang.vue

@@ -32,11 +32,11 @@ select {
   cursor: pointer;
 }
 .selector-option-text {
-  color: var(--vp-custom-selctor-option-text);
+  color: var(--vp-custom-selector-option-text);
 }
 @media only screen and (max-width: 780px) {
   .selector {
     display: none;
   }
 }
-</style>
+</style>