v2.0.1

Author: valhir

CHANGELOG.md

@@ -13,9 +13,22 @@
 
 </header>
 
+### 系统
 - 更新Next.js版本到v15.3.1
 - 更新React版本到v19.1.0
-- 修复皮肤按品质排序功能
+- 适配Next.js新版语法
+- 移除Next-PWA
+- 移除SkinChanges读取，更换自有方式维护相关数据
+
+### 体验
+- 优化移动端手势操作
+- 优化图片加载动画
+- 更换卡达模型站地址为[《布锅锅联盟宇宙x卡达模型站》](https://3d.buguoguo.cn)
+- 更换皮肤演示视频为哔哩哔哩[白礼白里白](https://space.bilibili.com/9385598)
+- 完善使用条款、隐私协议等链接
+
+### 问题修复
+- 修复适配腾讯定制皮肤品质导致按皮肤品质排序失效的问题
 
 ---
 
@@ -42,7 +55,7 @@
 - 修复部分版本ASU更新原画地址错误(比如提莫)。
 - 修正部分界面翻译。
 - 增加了终极皮肤动态/静态原画的切换功能，快捷键V。
-- 增加了快速前往[布锅锅联盟宇宙语音站](https://voice.buguoguo.cn)收听英雄语音的功能
+- 增加了快速前往[《布锅锅联盟宇宙语音站》](https://voice.buguoguo.cn)收听英雄语音的功能
 
 ---
 

components/image.js

@@ -8,9 +8,9 @@ export default function Image({ src, style, objectFit, objectPosition, fill, wid
 
   let actualSrc = exists ? src : placeholder;
   const mergedStyle = {
-    ...(style || {}),
-    objectFit: objectFit || undefined,
-    objectPosition: objectPosition || undefined,
+    ...((style && typeof style === 'object') ? style : {}),
+    ...(style?.objectFit ? {} : (objectFit ? { objectFit } : {})),
+    ...(style?.objectPosition ? {} : (objectPosition ? { objectPosition } : {})),
   };
 
   return (

components/new-additions/index.js

@@ -28,7 +28,7 @@ export default function NewAdditions() {
                     loading="eager"
                     src={asset(skin.tilePath)}
                     alt={skin.name}
-                    objectFit="cover"
+                    style={{ objectFit: "cover" }}
                   />
                 </span>
                 <div>{skin.name}</div>

components/skin-grid/index.js

@@ -23,19 +23,21 @@ export function SkinGrid({ skins, linkTo }) {
                 unoptimized
                 src={asset(skin.tilePath)}
                 alt={skin.name}
-                objectFit="cover"
+                style={{ objectFit: "cover" }}
+                priority
               />
             </span>
             <div>
               <span className={styles.skinName}>{skin.name}</span>
               <div className={classNames({ [styles.rarityBadge]: r })}>
                 {r && (
-                  <Image fill
+                  <Image
                     src={r[0]}
                     title={r[1]}
                     alt={r[1]}
-                    objectFit="contain"
-                    objectPosition="center"
+                    style={{ objectFit: "contain", objectPosition: "center" }}
+                    height={20}
+                    width={20}
                   />
                 )}
               </div>

components/skin-grid/styles.module.scss

@@ -6,17 +6,8 @@
   justify-content: center;
 
   > a {
-    display: grid;
-    grid-template-columns: 60px 1fr;
-    align-items: center;
-    min-height: 60px;
-    max-height: 60px;
-    width: 100%;
-    overflow: hidden;
-    background: rgba(255, 255, 255, 0.08);
-    backdrop-filter: blur(12px);
-    padding-right: 12px;
-    gap: 12px;
+    display: block;
+    position: relative;
 
     .tile {
       transition: transform 200ms;
@@ -30,17 +21,13 @@
     > div {
       font-weight: 500;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: space-between;
       gap: 12px;
       line-height: 1.3;
       color: rgb(165, 178, 196);
       transition: color 200ms;
-      margin-top: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      height: 60px;
+      margin-top: 8px;
     }
 
     &:hover > div {
@@ -50,12 +37,8 @@
 }
 
 .rarityBadge {
-  height: 20px;
-  width: 20px;
   flex: 0 0 20px;
   position: relative;
-  margin-left: 8px;
-  display: block;
 }
 
 @media screen and (max-width: 1400px) {
@@ -85,15 +68,8 @@
       backdrop-filter: blur(12px);
       padding-right: 12px;
 
-      .imageContainer {
-        width: 60px;
-        height: 60px;
-        min-width: 60px;
-        min-height: 60px;
-        aspect-ratio: unset;
-      }
-
       > div {
+        //   display: flex;
         align-items: center;
       }
     }
@@ -107,35 +83,28 @@
 
 .imageContainer {
   position: relative;
-  width: 60px;
-  height: 60px;
-  min-width: 60px;
-  min-height: 60px;
+  width: 100%;
+  aspect-ratio: 1 / 1;
   display: block;
   overflow: hidden;
+  background: rgba(121, 163, 207, 0.1);
+
+  @supports not (aspect-ratio: 1 / 1) {
+    &::before {
+      content: "";
+      display: block;
+      padding-bottom: 100%;
+    }
+  }
 }
 
-.imageContainer img {
+.tile {
   position: absolute;
   inset: 0;
-  box-sizing: border-box;
-  padding: 0;
-  border: none;
-  margin: auto;
-  display: block;
-  min-width: 100%;
-  max-width: 100%;
-  min-height: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-}
-
-.skinName {
-  flex: 1;
-  min-width: 0;
-  word-break: break-all;
-  white-space: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  transition: transform 200ms;
+  background: rgba(121, 163, 207, 0.1);
   display: block;
-}
+}

components/skin-viewer/index.js

@@ -127,6 +127,7 @@ function _SkinViewer({
   const [patch, setPatch] = useState("");
   const showUIRef = useRef();
   const dimensions = useRef({ width: 1, height: 1 });
+  const lastTapRef = useRef(0); // 用于移动端双击判断
 
   useEffect(() => {
     setDeltaX(0);
@@ -317,7 +318,6 @@ function _SkinViewer({
 
   const handlers = useSwipeable({
     onSwipeStart(e) {
-      e.event.preventDefault();
       if (fill) {
         draggingOrigin = [e.deltaX, e.deltaY];
       }
@@ -335,7 +335,6 @@ function _SkinViewer({
       }
     },
     onSwiped(e) {
-      e.event.preventDefault();
       if (fill) {
         const { width, height } = dimensions.current;
         let left = e.vxvy[0] / (width - window.innerWidth),
@@ -353,17 +352,13 @@ function _SkinViewer({
       }
     },
     onSwipedLeft(e) {
-      e.event.preventDefault();
       !fill && e.velocity > 0.6 && goNext(true);
     },
     onSwipedRight(e) {
-      e.event.preventDefault();
       !fill && e.velocity > 0.6 && goPrevious(true);
     },
     onSwipedUp(e) {
-      e.event.preventDefault();
       const { width, height } = dimensions.current;
-
       if (
         (!fill || (height / width) * window.innerWidth <= window.innerHeight) &&
         meta.changes
@@ -374,10 +369,31 @@ function _SkinViewer({
           ] || ""
         );
     },
+    onSwipedDown(e) {
+      toggleCentered();
+    },
     preventDefaultTouchmoveEvent: true,
+    preventScrollOnSwipe: true,
     delta: { left: 3, right: 3, up: 50 },
   });
 
+  // patch、showVideo、centered、imgPath、vidPath、skin 变化时重置 loaded，fill 不再触发
+  useEffect(() => {
+    setLoaded(false);
+  }, [patch, showVideo, centered, imgPath, vidPath, skin]);
+
+  function handleTouchEnd(e) {
+    // 只处理单指触摸
+    if (e.touches && e.touches.length > 0) return;
+    const now = Date.now();
+    if (now - lastTapRef.current < 300) {
+      toggleFill();
+      lastTapRef.current = 0;
+    } else {
+      lastTapRef.current = now;
+    }
+  }
+
   return (
     <>
       <Head>
@@ -411,6 +427,12 @@ function _SkinViewer({
           [styles.show]: showUI,
         })}
       >
+        {/* loading 动画 */}
+        {!loaded && (
+          <div className={styles.loadingWrapper}>
+            <Loading />
+          </div>
+        )}
         <div
           className={styles.hitbox}
           {...handlers}
@@ -421,6 +443,7 @@ function _SkinViewer({
             })
           }
           onDoubleClick={toggleFill}
+          onTouchEnd={handleTouchEnd}
           onMouseDown={(e) => {
             if (fill) {
               draggingOrigin = [e.screenX, e.screenY];
@@ -534,6 +557,7 @@ function _SkinViewer({
               loop
               key={`${vidPath}-${patch}`}
               style={{ objectFit: "cover" }}
+              onLoadedData={() => setLoaded(true)}
             >
               <source src={asset(vidPath, patch || "pbe")} />
             </video>
@@ -544,6 +568,7 @@ function _SkinViewer({
               src={asset(imgPath, patch || "pbe")}
               alt={skin.name}
               objectFit="cover"
+              onLoad={() => setLoaded(true)}
             />
           )}
         </div>
@@ -577,13 +602,7 @@ function _SkinViewer({
               alt={skin.name}
               objectFit={objectFit}
               objectPosition={objectPosition}
-              onLoadingComplete={({ naturalHeight, naturalWidth }) => {
-                dimensions.current = {
-                  width: naturalWidth,
-                  height: naturalHeight,
-                };
-                setLoaded(true);
-              }}
+              onLoad={() => setLoaded(true)}
             />
           )}
         </main>
@@ -612,4 +631,4 @@ export function SkinViewer(props) {
   }
 
   return <_SkinViewer {...props} />;
-}
+}

components/skin-viewer/styles.module.scss

@@ -311,10 +311,6 @@
         display: flex;
         align-items: center;
         gap: 8px;
-
-        img {
-          width: 20px;
-        }
       }
     }
   }
@@ -536,3 +532,18 @@
     }
   }
 }
+
+.loadingWrapper {
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(10, 18, 30, 0.7);
+  animation: fadeIn 0.3s;
+  pointer-events: none;
+}

pages/_app.js

@@ -25,7 +25,12 @@ export default function App({ Component, pageProps }) {
         />
       </Head>
       <PropsProvider value={pageProps}>
-        {getLayout(<Component {...pageProps} />)}
+        {getLayout(
+          <Component
+            key={pageProps.key}
+            {...(() => { const { key, ...rest } = pageProps; return rest; })()}
+          />
+        )}
       </PropsProvider>
     </>
   );

pages/index.js

@@ -42,7 +42,7 @@ function ChampionsList({ role }) {
               className={styles.img}
               src={asset(c.squarePortraitPath)}
               alt={c.name}
-              objectFit="cover"
+              style={{ objectFit: "cover" }}
             />
           </span>
           <div>{c.name}</div>

pages/shortcuts.mdx

@@ -64,6 +64,7 @@ import Changelog from "../CHANGELOG.md";
 | `双击`                 | 切换缩放                                 |
 | ` 向左滑动` `向右滑动 ` | 查看集合中的下一个/上一个皮肤  |
 | `向上滑动`                   | 在旧版本的插画之间循环切换 |
+| `向下滑动`                   | 切换居中（聚焦图）和不居中（原画） |
 
 export default ({ children }) => (
   <Layout backTo="/">