feat: lange选中

components/cwg-dropdown.vue

@@ -9,15 +9,18 @@
                 <slot name="menu">
                     <view class="menu">
                         <slot name="btn"></slot>
-                        <view class="menu-item" v-for="(item, idx) in menuList" :key="idx"
+                        <view class="menu-item" :class="{ active: props.showActive && isActive(item) }"
+                            v-for="(item, idx) in menuList" :key="idx"
                             @click="menuClick(item, idx)">
                             <view>{{ item.label || item }}</view>
+<!--                            <view v-if="props.showActive && isActive(item)" class="active-icon">✓</view>-->
                         </view>
                     </view>
                 </slot>
             </view>
         </view>
-        <view class="cwg-dropdown-mask" :class="{ 'cwg-dropdown-mask-show': maskShow }" @click.stop="close" />
+        <view class="cwg-dropdown-mask" :class="{ 'cwg-dropdown-mask-show': maskShow }"
+            @click.stop="close" />
     </view>
 </template>
 
@@ -40,11 +43,32 @@ const props = defineProps({
     interspace: {
         type: [String, Number],
         default: '10rpx'
+    },
+    // 是否显示选中样式
+    showActive: {
+        type: Boolean,
+        default: false
+    },
+    // 当前选中项的 key（用于匹配 menuList 中的项）
+    activeKey: {
+        type: [String, Number],
+        default: ''
     }
 })
 
 const emit = defineEmits(['open', 'close', 'change', 'menuClick'])
 
+// 判断菜单项是否为选中状态
+const isActive = (item) => {
+    if (!props.showActive || !props.activeKey) return false
+    // 支持多种 key 字段匹配
+    const itemKey = item.key !== undefined ? item.key :
+                     item.value !== undefined ? item.value :
+                     item.sysCode !== undefined ? item.sysCode :
+                     item.type !== undefined ? item.type : ''
+    return itemKey === props.activeKey
+}
+
 // 响应式数据
 const maskShow = ref(false)
 const windowInfo = reactive({
@@ -210,6 +234,11 @@ defineExpose({
             &:active {
                 background-color: rgba(0, 0, 0, 0.05);
             }
+
+            &.active {
+                background-color: rgba(234, 0, 42, 0.1);
+                color: #ea002a;
+            }
         }
     }
 }

components/cwg-language.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="cwg-language">
-    <cwg-dropdown :menu-list="customMenuList" @menuClick="handleMenuClick">
+    <cwg-dropdown :menu-list="customMenuList" @menuClick="handleMenuClick" showActive :activeKey="curLange">
       <view class="pc-header-btn">
         <cwg-icon name="cwg-lang" :color="iconColor " :size="20" />
       </view>
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed,ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { localesList, LANG_MAP } from '@/locale/index'
 import { lang } from '@/composables/config'
@@ -22,6 +22,7 @@ const props = defineProps({
   },
 })
 
+const curLange = ref(lang)
 const { t, locale } = useI18n()
 const customMenuList = computed(() =>
   localesList.map((code) => ({
@@ -35,6 +36,7 @@ function handleMenuClick({ value }: { value: any }) {
   if (!type) return
   locale.value = type
   lang.value = type
+  curLange.value = type
   const localeValue = LANG_MAP[type] || 'zh-Hans'
   uni.setLocale(localeValue)
 }