@jx3box/jx3box-ui 2.1.20 → 2.2.1

package/package.json

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

package/src/CommonFooter.vue

@@ -1,13 +1,18 @@
 <template>
-    <footer class="c-footer--v4 box-border bg-gray-900 px-6 py-12 text-gray-400 md:px-10 lg:px-16 xl:px-20">
-        <div class="mx-auto w-full" style="max-width: 92rem">
-            <div class="grid grid-cols-1 gap-10 pb-10 lg:grid-cols-12 lg:gap-8">
-                <section class="lg:col-span-3">
-                    <a class="flex items-center space-x-3 cursor-pointer" href="/">
-                        <img class="u-logo h-9 w-9" svg-inline src="../assets/img/common/logo.svg" alt="JX3BOX" />
-                        <span class="text-2xl font-bold tracking-tight text-white">JX3BOX</span>
+    <footer class="c-footer--v4">
+        <div class="c-footer--v4__container">
+            <div class="c-footer--v4__main">
+                <section class="c-footer--v4__brand">
+                    <a class="c-footer--v4__brand-link" href="/">
+                        <img
+                            class="c-footer--v4__logo u-logo"
+                            svg-inline
+                            src="../assets/img/common/logo.svg"
+                            alt="JX3BOX"
+                        />
+                        <span class="c-footer--v4__brand-name">JX3BOX</span>
                     </a>
-                    <p class="mt-5 text-sm leading-7 text-gray-400" style="max-width: 20rem">
+                    <p class="c-footer--v4__slogan">
                         {{ $jx3boxT("jx3boxUi.commonFooter.slogan1", "一站式剑三工具与资源聚合站。") }}<br />
                         {{ $jx3boxT("jx3boxUi.commonFooter.slogan2", "江湖路远，幸甚有你。") }}
                     </p>
@@ -49,6 +54,77 @@ body::after {
     background: #111827;
 }
 .c-footer--v4{
+    box-sizing: border-box;
+    padding: 3rem 1.5rem;
+    background: #111827;
+    color: #9ca3af;
+
+    @media (min-width: 768px) {
+        padding-left: 2.5rem;
+        padding-right: 2.5rem;
+    }
+
+    @media (min-width: 1024px) {
+        padding-left: 4rem;
+        padding-right: 4rem;
+    }
+
+    @media (min-width: 1280px) {
+        padding-left: 5rem;
+        padding-right: 5rem;
+    }
+
+    &__container {
+        width: 100%;
+        margin: 0 auto;
+    }
+
+    &__main {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+        padding-bottom: 2.5rem;
+
+        @media (min-width: 1024px) {
+            grid-template-columns: repeat(12, minmax(0, 1fr));
+            gap: 2rem;
+        }
+    }
+
+    &__brand {
+        @media (min-width: 1024px) {
+            grid-column: span 3 / span 3;
+        }
+    }
+
+    &__brand-link {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        cursor: pointer;
+    }
+
+    &__logo {
+        width: 2.25rem;
+        height: 2.25rem;
+    }
+
+    &__brand-name {
+        font-size: 1.5rem;
+        line-height: 2rem;
+        font-weight: 700;
+        letter-spacing: -0.025em;
+        color: #fff;
+    }
+
+    &__slogan {
+        max-width: 20rem;
+        margin-top: 1.25rem;
+        font-size: 0.875rem;
+        line-height: 1.75rem;
+        color: #9ca3af;
+    }
+
     .u-logo{
         fill:#fff;
     }

package/src/CommonHeader.vue

@@ -1,25 +1,27 @@
 <template>
     <header class="c-header" id="c-header" :class="{ isOverlay: overlayEnable && isOverlay }">
-        <div class="c-header-inner">
+        <div class="c-header__inner c-header-inner">
             <!-- logo -->
-            <header-logo />
+            <header-logo class="c-header__logo" />
 
             <!-- client -->
-            <header-client :defaultValue="client" />
+            <header-client class="c-header__client" :defaultValue="client" />
 
             <!-- search -->
-            <header-search :client="client" />
+            <header-search class="c-header__search" :client="client" />
 
             <!-- nav -->
-            <header-nav :client="client" />
+            <header-nav class="c-header__nav" :client="client" />
 
-            <slot></slot>
+            <div class="c-header__extra">
+                <slot></slot>
+            </div>
 
             <!-- user -->
-            <header-user ref="user" :client="client" :asset="asset" />
+            <header-user ref="user" class="c-header__user" :client="client" :asset="asset" />
         </div>
-        <header-box v-if="isMobile" class="c-header-jx3box" :overlayEnable="overlayEnable" />
-        <header-box2 v-else />
+        <header-box v-if="isMobile" class="c-header__box c-header-jx3box" :overlayEnable="overlayEnable" />
+        <header-box2 v-else class="c-header__box c-header__box--desktop" />
     </header>
 </template>
 
@@ -78,44 +80,53 @@ export default {
     methods: {
         // webView检测
         checkIsWebView: function () {
-            if (window.navigator.userAgent.includes(KW)) {
-                document.documentElement.classList.add("env-app");
-            }
-
+            // 参数处理
             const urlParams = new URLSearchParams(window.location.search);
-            const from = urlParams.get("from");
-            from && sessionStorage.setItem("from", from);
-            if (checkIsApp()) {
+
+            // 环境判断缓存
+            const isApp = checkIsApp();
+            const isMp = isMiniProgram();
+
+            // App 环境缓存
+            if (isApp) {
                 localStorage.setItem("__env", "app");
             }
-            if (isMiniProgram() || checkIsApp()) {
-                const appid = urlParams.get("appid");
-                const item = miniprogram?.find((item) => item.appid === appid);
-                const from = urlParams.get("_from");
 
-                document.documentElement.classList.add("v-miniprogram");
-
-                if (from) {
-                    document.documentElement.classList.add("from-" + from);
-                }
+            // 小程序环境缓存
+            if (isMp) {
+                document.documentElement.classList.add("wechat-miniprogram");
+                window.JX3BOX_ENV = "MINIPROGRAM";
+                miniprogramHack();
+            }
 
-                if (appid && item) {
-                    document.documentElement.classList.add("env-miniprogram-" + item.id);
+            // 来源参数缓存
+            const from = urlParams.get("from")?.replace(/[^a-zA-Z0-9_-]/g, "");
+            if (from) {
+                sessionStorage.setItem("from", from);
+                document.documentElement.classList.add("from-" + from);
+            }
 
-                    window.JX3BOX_ENV = item.id?.toUpperCase() + "_MINIPROGRAM";
-                } else {
-                    document.documentElement.classList.add("wechat-miniprogram");
+            // 如果来自推栏 App
+            if (sessionStorage.getItem("from") === "tl") {
+                document.documentElement.classList.add("v-miniprogram");
+            }
 
-                    window.JX3BOX_ENV = "MINIPROGRAM";
+            // 移动容器模式：包含小程序或 App 内嵌环境
+            if (isMp || isApp) {
+                document.documentElement.classList.add("v-miniprogram");
+            }
 
-                    // 微信小程序hack
-                    miniprogramHack();
-                }
+            // 来自自身小程序
+            const appid = urlParams.get("appid");
+            const internalApp = miniprogram?.find((item) => item.appid === appid);
+            if (appid && internalApp) {
+                document.documentElement.classList.add("env-miniprogram-" + internalApp.id);
+                window.JX3BOX_ENV = internalApp.id?.toUpperCase() + "_MINIPROGRAM";
             }
 
-            // 如果来自推栏
-            if (sessionStorage.getItem("from") == "tl") {
-                document.documentElement.classList.add("v-miniprogram");
+            // 仅安卓有效，基本不使用
+            if (window.navigator.userAgent.includes(KW)) {
+                document.documentElement.classList.add("env-app");
             }
         },
 
@@ -236,6 +247,15 @@ export default {
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 
     transition: 0.5s ease-in-out;
+
+    &__inner {
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+        .flex;
+    }
 }
 .c-header.isOverlay {
     background-color: rgba(0, 0, 0, 0.85);