From 376dac4e6fce7c9caea24efe8c30aed7f4ba0e85 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 11 Dec 2023 18:47:06 +0800
Subject: [PATCH] chore(sfc-playground): highlight the active version in
 dropdown (#9045)

---
 packages/sfc-playground/src/Header.vue        | 2 +-
 packages/sfc-playground/src/VersionSelect.vue | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index e865a76a5fe..cf8ea9013fe 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -24,7 +24,7 @@ const vueVersion = ref(`@${currentCommit}`)
 async function setVueVersion(v: string) {
   vueVersion.value = `loading...`
   await store.setVueVersion(v)
-  vueVersion.value = `v${v}`
+  vueVersion.value = v
 }
 
 function resetVueVersion() {
diff --git a/packages/sfc-playground/src/VersionSelect.vue b/packages/sfc-playground/src/VersionSelect.vue
index 2dfbcbc5f91..0c4a37138e5 100644
--- a/packages/sfc-playground/src/VersionSelect.vue
+++ b/packages/sfc-playground/src/VersionSelect.vue
@@ -74,8 +74,8 @@ onMounted(() => {
 
     <ul class="versions" :class="{ expanded }">
       <li v-if="!versions"><a>loading versions...</a></li>
-      <li v-for="version of versions">
-        <a @click="setVersion(version)">v{{ version }}</a>
+      <li v-for="ver of versions" :class="{ active: ver === version }">
+        <a @click="setVersion(ver)">v{{ ver }}</a>
       </li>
       <div @click="expanded = false">
         <slot />
@@ -111,4 +111,8 @@ onMounted(() => {
   border-top: 6px solid #aaa;
   margin-left: 8px;
 }
+
+.versions .active a {
+  color: var(--green);
+}
 </style>