@jx3box/jx3box-ui 2.0.37 → 2.0.39

package/assets/data/nav.json

@@ -248,17 +248,17 @@
         "parentKey": "pvx"
     },
     {
-        "key": "gonggao",
-        "link": "/pvg/gonggao",
-        "label": "活动告示",
+        "key": "treasure",
+        "link": "/pvx/codex/adventure",
+        "label": "奇遇珍卷",
         "client": "all",
         "status": true,
         "parentKey": "pvx"
     },
     {
-        "key": "price",
-        "link": "/pvg/price",
-        "label": "价格走势",
+        "key": "achievement",
+        "link": "/pvx/codex/achievement",
+        "label": "资历宝典",
         "client": "all",
         "status": true,
         "parentKey": "pvx"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.0.37",
+    "version": "2.0.39",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/src/header/client.vue

@@ -1,11 +1,19 @@
 <template>
-    <div class="relative h-full group c-header-client">
+    <div class="relative h-full c-header-client" ref="dropdown">
         <!-- 当前选择展示 (触发器) -->
-        <button type="button" class="u-trigger h-full px-4 flex items-center gap-2 transition-colors duration-200">
+        <button
+            type="button"
+            class="u-trigger h-full px-4 flex items-center gap-2 transition-colors duration-200"
+            :class="{ 'is-active': isMenuOpen }"
+            @click="toggleMenu"
+            :aria-expanded="isMenuOpen"
+            aria-haspopup="true"
+        >
             <div class="u-client--current">
                 <span class="text-sm font-medium text-gray-200">{{ currentGameLabel }}</span>
                 <svg
-                    class="w-3 h-3 text-gray-400 transition-transform duration-300 group-hover:rotate-180 group-focus-within:rotate-180"
+                    class="w-3 h-3 text-gray-400 transition-transform duration-300"
+                    :class="{ 'rotate-180': isMenuOpen }"
                     viewBox="0 0 20 20"
                     fill="currentColor"
                     aria-hidden="true"
@@ -21,7 +29,11 @@
 
         <!-- 下拉菜单内容 -->
         <div
-            class="absolute top-full left-0 w-56 bg-[#242424] border border-gray-700 rounded-b-lg shadow-2xl py-2 overflow-hidden z-50 transition duration-200 ease-out origin-top opacity-0 -translate-y-2 invisible pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:visible group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:translate-y-0 group-focus-within:visible group-focus-within:pointer-events-auto"
+            class="absolute top-full left-0 w-56 bg-[#242424] border border-gray-700 rounded-b-lg shadow-2xl py-2 overflow-hidden z-50 transition duration-200 ease-out origin-top"
+            :class="{
+                'opacity-100 translate-y-0 visible pointer-events-auto': isMenuOpen,
+                'opacity-0 -translate-y-2 invisible pointer-events-none': !isMenuOpen
+            }"
             role="menu"
         >
             <div class="px-3 py-2 text-[10px] text-gray-500 uppercase tracking-widest border-b border-gray-800 mb-1">
@@ -31,23 +43,18 @@
             <!-- 剑网3 -->
             <a
                 href="javascript:void(0)"
-                class="flex items-center justify-between px-4 py-3 hover:bg-indigo-600 transition-colors group/item"
+                class="flex items-center justify-between px-4 py-3 hover:bg-indigo-600 active:bg-indigo-700 transition-colors group/item"
                 role="menuitem"
                 @click.prevent="switchGame('std')"
             >
                 <div class="flex items-center">
                     <span class="mr-3 text-indigo-400 group-hover/item:text-white">
-                        <!-- <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                            <path d="M4 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Z" />
-                            <path d="M4 13a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2Z" />
-                        </svg> -->
                         <img
                             class="w-4 h-4"
                             svg-inline
                             src="../../assets/img/common/jx3-www.svg"
                             :alt="$jx3boxT('jx3boxUi.commonHeader.jx3Full', '剑网3 / 无界')"
                         />
-                        <!-- <Jx3Icon class="w-4 h-4" /> -->
                     </span>
                     <div>
                         <div class="text-sm font-bold text-gray-200 group-hover/item:text-white">
@@ -62,26 +69,18 @@
             <!-- 缘起 -->
             <a
                 href="javascript:void(0)"
-                class="flex items-center justify-between px-4 py-3 hover:bg-indigo-600 transition-colors group/item"
+                class="flex items-center justify-between px-4 py-3 hover:bg-indigo-600 active:bg-indigo-700 transition-colors group/item"
                 role="menuitem"
                 @click.prevent="switchGame('origin')"
             >
                 <div class="flex items-center">
                     <span class="mr-3 text-amber-400 group-hover/item:text-white">
-                        <!-- <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                            <path
-                                fill-rule="evenodd"
-                                d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-12.25a.75.75 0 0 0-1.5 0V10c0 .2.08.39.22.53l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28V5.75Z"
-                                clip-rule="evenodd"
-                            />
-                        </svg> -->
                         <img
                             class="w-4 h-4"
                             svg-inline
                             src="../../assets/img/common/jx3-origin.svg"
                             :alt="$jx3boxT('jx3boxUi.commonHeader.originFull', '剑网3·缘起')"
                         />
-                        <!-- <OriginIcon class="w-4 h-4" /> -->
                     </span>
                     <div>
                         <div class="text-sm font-bold text-gray-200 group-hover/item:text-white">
@@ -97,16 +96,10 @@
 </template>
 
 <script>
-// import Jx3Icon from "@/assets/img/components/common/header/jx3-www.svg";
-// import OriginIcon from "@/assets/img/components/common/header/jx3-origin.svg";
 import i18nMixin from "../../i18n/mixin";
 export default {
     name: "clientSwitch",
     mixins: [i18nMixin],
-    components: {
-        // Jx3Icon,
-        // OriginIcon,
-    },
     props: {
         defaultValue: {
             type: String,
@@ -116,6 +109,7 @@ export default {
     data: function () {
         return {
             activeKey: this.defaultValue || (location.host.includes("origin") ? "origin" : "std"),
+            isMenuOpen: false,
         };
     },
     computed: {
@@ -131,6 +125,17 @@ export default {
         },
     },
     methods: {
+        toggleMenu: function() {
+            this.isMenuOpen = !this.isMenuOpen;
+        },
+        closeMenu: function() {
+            this.isMenuOpen = false;
+        },
+        handleClickOutside: function(event) {
+            if (this.$refs.dropdown && !this.$refs.dropdown.contains(event.target)) {
+                this.closeMenu();
+            }
+        },
         switchGame: function (target) {
             if (!target || (target !== "std" && target !== "origin")) return;
 
@@ -143,10 +148,21 @@ export default {
             const finalUrl = protocol + "//" + targetHost + currentPath + currentSearch + currentHash;
 
             this.activeKey = target;
+            this.closeMenu();
             window.location.href = finalUrl;
         },
     },
-    mounted: function () {},
+    mounted: function () {
+        // 监听点击外部区域关闭菜单
+        document.addEventListener('click', this.handleClickOutside);
+        // 支持触摸设备
+        document.addEventListener('touchstart', this.handleClickOutside);
+    },
+    beforeUnmount: function() {
+        // 清理事件监听器
+        document.removeEventListener('click', this.handleClickOutside);
+        document.removeEventListener('touchstart', this.handleClickOutside);
+    },
 };
 </script>
 
@@ -155,9 +171,10 @@ export default {
 .c-header-client {
     .u-trigger {
         .pr;
-    }
-    &:hover {
-        .u-trigger::after {
+        // 为iOS添加触摸反馈
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+
+        &::after {
             content: "";
             .db;
             .pa;
@@ -165,6 +182,20 @@ export default {
             .w(90px);
             .h(2px);
             background-color: #e19f3a;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        // 菜单打开时显示激活条
+        &.is-active::after {
+            opacity: 1;
+        }
+    }
+
+    // 桌面端保留hover效果
+    @media (hover: hover) and (pointer: fine) {
+        &:hover .u-trigger::after {
+            opacity: 1;
         }
     }
     height: @header-height;
@@ -185,5 +216,10 @@ export default {
             fill: #fff !important;
         }
     }
+
+    // 为iOS添加active状态样式
+    a[role="menuitem"]:active {
+        background-color: rgb(79, 70, 229) !important;
+    }
 }
 </style>