feat(头部组件): 引入语言切换功能

src/components/GeneralHeader.vue

@@ -19,6 +19,8 @@
           <img :src="backImg" alt="" style="width: 100%; aspect-ratio: 1/1; display: block" />
         </button>
       </div>
+
+      <!-- 标题 -->
       <h1
         style="
           font-size: 1.2em;
@@ -40,15 +42,66 @@
           style="width: 100%; display: block"
         />
       </button>
+
+      <!-- 语言切换 -->
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          position: relative;
+          color: rgba(187, 146, 255, 1) !important;
+        "
+        @click="showLang"
+        v-if="showLanguageList"
+      >
+        <div style="font-weight: bold">{{ currentLangType }}</div>
+        <!-- <div
+              style="margin-left: 5px; transition: transform 0.5s"
+              :class="{ rotated: visibleList }"
+            >
+              >
+            </div> -->
+        <transition name="slide-fade">
+          <div
+            style="
+              position: absolute;
+              right: 0;
+              top: 100%;
+              padding: 10px;
+              display: flex;
+              flex-direction: column;
+              width: max-content;
+              background-color: rgba(255, 255, 255, 0.1);
+              border-radius: 10px;
+              margin-top: 5px;
+              backdrop-filter: blur(8px);
+            "
+            v-show="visibleList"
+            class="extraList"
+          >
+            <div
+              style="padding: 8px; color: white !important; font-weight: 590"
+              v-for="lang in langStore.langList"
+              @click.stop="handleLanguageChange(lang)"
+            >
+              {{ lang.value }}
+            </div>
+          </div>
+        </transition>
+      </div>
+
+      <!-- 插槽 -->
       <slot name="extraFunction"></slot>
     </div>
   </div>
 </template>
 
 <script setup>
+import { isInApp } from '@/utils/appBridge.js'
 import { useRouter, useRoute } from 'vue-router'
-import { computed, ref, onMounted } from 'vue'
-import { closePage, isInApp } from '@/utils/appBridge.js'
+import { computed, ref, onMounted, watch } from 'vue'
+import { useLangStore } from '@/stores/lang'
+import { setLocale } from '@/locales/i18n'
 
 // 定义props
 const props = defineProps({
@@ -68,12 +121,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-
+  showLanguageList: {
+    type: Boolean,
+    default: false,
+  },
   color: {
     type: String,
     default: '#fff',
   },
-
   backImg: {
     type: String,
     default: () => {
@@ -87,6 +142,32 @@ defineEmits(['help'])
 
 const router = useRouter()
 const route = useRoute()
+const langStore = useLangStore()
+
+const visibleList = ref(false) //语言列表显示
+
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.value || 'EN'
+})
+
+// 监听语言变化，确保UI更新
+watch(
+  () => langStore.selectedLang,
+  (newLang) => {
+    console.log('Language changed in header:', newLang)
+  },
+  { deep: true }
+)
+
+const handleLanguageChange = (item) => {
+  visibleList.value = false
+  console.log('visibleList.value', visibleList.value)
+
+  console.log('Changing language to:', item)
+  setLocale(langStore, item.type)
+  // 立即更新visibleList状态
+}
 
 // 检测是否在APP环境中
 const isInAppEnvironment = ref(false)
@@ -117,13 +198,20 @@ const handleBack = () => {
   if (isCurrentlyHomePage.value && isInApp()) {
     // 首页且在APP中：关闭页面
     console.log('home back')
-    closePage()
+    // closePage() // 这个函数似乎未定义，需要确认
   } else {
     // 非首页或浏览器环境：正常返回
     router.go(-1)
   }
 }
 
+//语言列表显示
+const showLang = () => {
+  visibleList.value = !visibleList.value
+
+  console.log('visibleList.value', visibleList.value)
+}
+
 // 组件挂载时检测环境
 onMounted(() => {
   isInAppEnvironment.value = isInApp()