From 6b1c3b73a6a245ba327ada852dd890a551b9706b Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 22 Feb 2025 22:53:16 +0800
Subject: [PATCH 1/2] feat: switch tab to sync multiple group status

---
 src/client/app/composables/codeGroups.ts | 26 ++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/client/app/composables/codeGroups.ts b/src/client/app/composables/codeGroups.ts
index d8a38ba72741..faf32b357c91 100644
--- a/src/client/app/composables/codeGroups.ts
+++ b/src/client/app/composables/codeGroups.ts
@@ -13,6 +13,30 @@ export function useCodeGroups() {
   }
 
   if (inBrowser) {
+    function syncMultipleCodeGroups(group: HTMLElement) {
+      const selector = group.className.split(' ').filter(Boolean).map((c) => `.${c}`).join('')
+      let checkTabText = group.querySelector('input:checked')?.nextElementSibling?.textContent || ''
+      document.querySelectorAll(selector).forEach((groupEl) => {
+        if (group === groupEl) {
+          return
+        }
+        const labels = groupEl.querySelectorAll('label')
+        if (!labels.length) return
+        const targetIndex = Array.from(labels).findIndex((label) => label.textContent === checkTabText)
+        if (targetIndex < 0) return
+        const input = labels[targetIndex].previousElementSibling as HTMLInputElement
+        input.checked = true
+        const blocks = groupEl.querySelector('.blocks')
+        if (!blocks) return
+        const current = blocks.children[targetIndex]
+        if (!current) return
+        Array.from(blocks.children).forEach((child) => {
+          child.classList.remove('active')
+        })
+        blocks.children[targetIndex].classList.add('active')
+        
+      })
+    }
     window.addEventListener('click', (e) => {
       const el = e.target as HTMLInputElement
 
@@ -38,6 +62,8 @@ export function useCodeGroups() {
         current.classList.remove('active')
         next.classList.add('active')
 
+        syncMultipleCodeGroups(group)
+
         const label = group?.querySelector(`label[for="${el.id}"]`)
         label?.scrollIntoView({ block: 'nearest' })
       }

From a75c81e38042ca395ec2233dd4094003db5dd598 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 22 Feb 2025 23:05:26 +0800
Subject: [PATCH 2/2] fix: format

---
 src/client/app/composables/codeGroups.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/client/app/composables/codeGroups.ts b/src/client/app/composables/codeGroups.ts
index faf32b357c91..681630e9ad87 100644
--- a/src/client/app/composables/codeGroups.ts
+++ b/src/client/app/composables/codeGroups.ts
@@ -14,17 +14,26 @@ export function useCodeGroups() {
 
   if (inBrowser) {
     function syncMultipleCodeGroups(group: HTMLElement) {
-      const selector = group.className.split(' ').filter(Boolean).map((c) => `.${c}`).join('')
-      let checkTabText = group.querySelector('input:checked')?.nextElementSibling?.textContent || ''
+      const selector = group.className
+        .split(' ')
+        .filter(Boolean)
+        .map((c) => `.${c}`)
+        .join('')
+      let checkTabText =
+        group.querySelector('input:checked')?.nextElementSibling?.textContent ||
+        ''
       document.querySelectorAll(selector).forEach((groupEl) => {
         if (group === groupEl) {
           return
         }
         const labels = groupEl.querySelectorAll('label')
         if (!labels.length) return
-        const targetIndex = Array.from(labels).findIndex((label) => label.textContent === checkTabText)
+        const targetIndex = Array.from(labels).findIndex(
+          (label) => label.textContent === checkTabText
+        )
         if (targetIndex < 0) return
-        const input = labels[targetIndex].previousElementSibling as HTMLInputElement
+        const input = labels[targetIndex]
+          .previousElementSibling as HTMLInputElement
         input.checked = true
         const blocks = groupEl.querySelector('.blocks')
         if (!blocks) return
@@ -34,7 +43,6 @@ export function useCodeGroups() {
           child.classList.remove('active')
         })
         blocks.children[targetIndex].classList.add('active')
-        
       })
     }
     window.addEventListener('click', (e) => {