@jx3box/jx3box-ui 2.0.36 → 2.0.38

package/assets/css/single/thx.less

@@ -24,7 +24,7 @@
     .flex;
     align-items: center;
     justify-content: center;
-    gap: 20px
+    gap: 20px;
 }
 .w-thx-copyright {
     .fz(12px,2);
@@ -40,9 +40,9 @@
 .w-boxcoin-block {
     .pointer;
 
-    &.disabled{
-        opacity:0.5;
-        cursor:not-allowed;
+    &.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
     }
 }
 .w-boxcoin-admin {
@@ -126,12 +126,13 @@
 }
 
 .w-boxcoin-records-list {
-
     --el-color-primary: @primary;
 
     max-width: 960px;
     border: 1px solid #eee;
     margin: 0 auto;
+    border-radius: 6px;
+    overflow: hidden;
 
     .u-list {
         list-style: none;
@@ -177,58 +178,59 @@
         .nobreak;
         .flex;
         align-items: center;
-        &:hover {
+        &[href]:hover {
             text-decoration: underline;
         }
         .mr(20px);
-    }
-    .u-default {
-        &:hover{
-            text-decoration: none;
+
+        &.u-default {
+            color: @color;
+            &:hover {
+                text-decoration: none;
+            }
+        }
+        .u-user-avatar {
+            .y;
+            .size(24px);
+            .mr(5px);
+            .r(2px);
         }
-    }
-    .u-user-avatar {
-        .y;
-        .size(24px);
-        .mr(5px);
-        .r(2px);
     }
     .u-count {
         .w(120px);
     }
     .u-head {
         background-color: @bg-light;
+        color: @v4text;
     }
     .u-body {
         .u-count {
-            color: #fe7e91;
+            color: #fd76a7;
             font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
         }
-    }
-    .u-remark {
-        .nobreak;
-        .w(280px);
-        color:@color;
-    }
-    .u-time {
-        color: #999;
-    }
-    .u-delete {
-        .ml(20px);
-        color: #c00;
-        i {
-            .mr(3px);
+        .u-time {
+            color: @v4tip;
         }
-        .pointer;
-        &:hover {
-            color: #f00;
+        .u-remark {
+            .nobreak;
+            .w(280px);
+            color: @color;
+        }
+        .u-delete {
+            .ml(20px);
+            color: #c00;
+            i {
+                .mr(3px);
+            }
+            .pointer;
+            &:hover {
+                color: #f00;
+            }
+        }
+        .u-client {
+            color: @v4focus;
         }
     }
-    .u-client {
-        margin-left: 5px;
-        color: #09f;
-    }
-
 }
 .w-boxcoin-records-pages {
     justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.0.36",
+    "version": "2.0.38",
     "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>

package/src/interact/BoxcoinRecords.vue

@@ -41,9 +41,9 @@
                     </span>
                     <span class="u-meta u-remark">{{ item.remark }}</span>
                     <time class="u-meta u-time">{{ showTime(item.created_at) }}</time>
-                    <span class="u-client" v-if="isSuperAdmin">{{ item.client }}</span>
                     <span class="u-delete" v-if="isSuperAdmin" @click="recovery(item, i)">
                         <i class="Delete"></i>{{ $jx3boxT("jx3boxUi.boxcoinRecords.revoke", "撤销") }}
+                        (<span class="u-client">{{ item.client }}</span>)
                     </span>
                 </li>
             </ul>