From 8e052eecf3258a12af6ef6f54d2b94714f44782d Mon Sep 17 00:00:00 2001
From: wzc520pyfm <1528857653@qq.com>
Date: Mon, 29 Jul 2024 09:43:25 +0800
Subject: [PATCH] chore(sfc-playgroud): highlight the commit and latest version
 when active in dropdown (#11445)

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

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index 6506ad7bab..8e810d8944 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -80,7 +80,7 @@ function toggleDark() {
         pkg="vue"
         label="Vue Version"
       >
-        <li>
+        <li :class="{ active: vueVersion === `@${currentCommit}` }">
           <a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
         </li>
         <li>
diff --git a/packages/sfc-playground/src/VersionSelect.vue b/packages/sfc-playground/src/VersionSelect.vue
index 50c3c59ac2..bd24ac21a9 100644
--- a/packages/sfc-playground/src/VersionSelect.vue
+++ b/packages/sfc-playground/src/VersionSelect.vue
@@ -74,7 +74,12 @@ onMounted(() => {
 
     <ul class="versions" :class="{ expanded }">
       <li v-if="!versions"><a>loading versions...</a></li>
-      <li v-for="ver of versions" :class="{ active: ver === version }">
+      <li
+        v-for="(ver, index) of versions"
+        :class="{
+          active: ver === version || (version === 'latest' && index === 0),
+        }"
+      >
         <a @click="setVersion(ver)">v{{ ver }}</a>
       </li>
       <div @click="expanded = false">
-- 
2.47.3