From f3339b4d9365060a59542eba6af06b13fa800f73 Mon Sep 17 00:00:00 2001 From: yuanyxh <15766118362@139.com> Date: Wed, 13 Sep 2023 09:35:36 +0800 Subject: [PATCH] fix: style error --- .../ExtraInformation/ExtraInformation.tsx | 20 ------------------- src/layout/Navbar.tsx | 6 +++++- src/layout/Sidebar.module.css | 2 +- src/pages/GIF-Explorer/GIF-Explorer.tsx | 15 ++++++++++++++ src/pages/GIF-Explorer/GIFPlayer.tsx | 1 + src/pages/GIF-Explorer/gif/GIFDecoder.ts | 16 ++++++++++++++- src/pages/GIF-Explorer/gif/encoder.worker.ts | 16 +++++++-------- src/pages/GIF-Explorer/types.d.ts | 4 ++++ src/styles/preset.css | 2 +- 9 files changed, 50 insertions(+), 32 deletions(-) diff --git a/src/components/ExtraInformation/ExtraInformation.tsx b/src/components/ExtraInformation/ExtraInformation.tsx index ef327a5..1ceba9c 100644 --- a/src/components/ExtraInformation/ExtraInformation.tsx +++ b/src/components/ExtraInformation/ExtraInformation.tsx @@ -55,25 +55,5 @@ export default function ExtraInformation(props: ExtraInformationProps) { } }} - - //
- //

案例相关链接：

- - // {/*
- // {Object.keys(platform).map((key) => ( - //
- // - // {Platform[key as keyof typeof Platform]}： - // - - // {platform[key as keyof typeof Platform]?.map(({ title, url }) => ( - // - // {title} - // - // ))} - //
- // ))} - //
*/} - //
); } diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx index 66ba159..43b518b 100644 --- a/src/layout/Navbar.tsx +++ b/src/layout/Navbar.tsx @@ -34,7 +34,11 @@ export default function Navbar({ toggle }: Readonly) { ) : (

- logo + logo yuanyxh diff --git a/src/layout/Sidebar.module.css b/src/layout/Sidebar.module.css index 157efc8..a8d05d7 100644 --- a/src/layout/Sidebar.module.css +++ b/src/layout/Sidebar.module.css @@ -3,7 +3,7 @@ top: var(--navbar-height); bottom: 0; left: 0; - z-index: calc(var(--z-index-highest) + var(--z-index-important)); + z-index: calc(var(--z-index-important) + var(--z-index-important)); padding: 20px 5px; width: var(--sidebar-width); transition: transform var(--transition-duration); diff --git a/src/pages/GIF-Explorer/GIF-Explorer.tsx b/src/pages/GIF-Explorer/GIF-Explorer.tsx index 8955549..36755e4 100644 --- a/src/pages/GIF-Explorer/GIF-Explorer.tsx +++ b/src/pages/GIF-Explorer/GIF-Explorer.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import ExtraInformation from '@/components/ExtraInformation/ExtraInformation'; import GIFVideo from './GIFVideo'; import GIFPicture from './GIFPicture'; import GIFPlayer from './GIFPlayer'; @@ -9,6 +10,20 @@ import style from './GIF-Explorer.module.css'; export default function GIFExplorer() { return (
+ + diff --git a/src/pages/GIF-Explorer/GIFPlayer.tsx b/src/pages/GIF-Explorer/GIFPlayer.tsx index ad75ea3..c4ee76f 100644 --- a/src/pages/GIF-Explorer/GIFPlayer.tsx +++ b/src/pages/GIF-Explorer/GIFPlayer.tsx @@ -132,6 +132,7 @@ export default function GIFPlayer() { setCursor(0); setViews((prev) => ++prev); } else { + setPlay(false); window.clearTimeout(timer); } } else { diff --git a/src/pages/GIF-Explorer/gif/GIFDecoder.ts b/src/pages/GIF-Explorer/gif/GIFDecoder.ts index f870c42..45ba242 100644 --- a/src/pages/GIF-Explorer/gif/GIFDecoder.ts +++ b/src/pages/GIF-Explorer/gif/GIFDecoder.ts @@ -220,6 +220,7 @@ class GIFDecoder { } private parseApplicationExtension(bytes: Uint8Array) { + const cursor = this.cursor; this.cursor += APPLICATION_EXTENSION.length; const len = bytes[this.cursor++]; @@ -233,6 +234,7 @@ class GIFDecoder { this.pattern.applicationExtension = { id, + cursor, application, loop }; @@ -279,6 +281,8 @@ class GIFDecoder { } private parsePlainTextExtension(bytes: Uint8Array) { + const cursor = this.cursor; + this.cursor += PLAIN_TEXT_EXTENSION.length; this.cursor++; @@ -307,6 +311,7 @@ class GIFDecoder { this.pattern.plainTextExtension.push({ index: this.index++, + cursor: cursor, offsetLeft, offsetTop, gridWidth, @@ -326,6 +331,8 @@ class GIFDecoder { } private parseCommentExtension(bytes: Uint8Array) { + const cursor = this.cursor; + this.cursor += COMMENT_EXTENSION.length; const blocks = this.parseSubBlocks(bytes); @@ -342,10 +349,16 @@ class GIFDecoder { this.pattern.commentExtension = []; } - this.pattern.commentExtension.push({ index: this.index++, comments }); + this.pattern.commentExtension.push({ + index: this.index++, + cursor: cursor, + comments + }); } private parseImage(bytes: Uint8Array) { + const cursor = this.cursor; + const offsetLeft = this.parseShort(bytes); const offsetTop = this.parseShort(bytes); const width = this.parseShort(bytes); @@ -374,6 +387,7 @@ class GIFDecoder { this.pattern.frames.push({ index: this.index++, + cursor: cursor, offsetLeft, offsetTop, width, diff --git a/src/pages/GIF-Explorer/gif/encoder.worker.ts b/src/pages/GIF-Explorer/gif/encoder.worker.ts index f83dbe9..a0c050c 100644 --- a/src/pages/GIF-Explorer/gif/encoder.worker.ts +++ b/src/pages/GIF-Explorer/gif/encoder.worker.ts @@ -118,7 +118,7 @@ function encoder(e: MessageEvent) { // 初始化可变代码大小、前缀、当前输入 k let codeSize = lzwMiniCodeSize + 1; - let perfix: number[] = []; + let prefix: number[] = []; let k: number[] = []; // 初始化输入长度、当前索引 point @@ -160,7 +160,7 @@ function encoder(e: MessageEvent) { set(clearCode); // 取第一个输入作为初始化的当前前缀 - perfix = [input[point++]]; + prefix = [input[point++]]; // 初始化查找表 for (let i = 0; i <= eoiCode; i++) trie.insert([i]); @@ -171,12 +171,12 @@ function encoder(e: MessageEvent) { k = [input[point++]]; // 查找表中查找 前缀 + k - const current = perfix.concat(k); + const current = prefix.concat(k); const result = trie.search(current); // 找到则 前缀 = 前缀 + k if (result) { - perfix = current; + prefix = current; k = []; continue; @@ -186,13 +186,13 @@ function encoder(e: MessageEvent) { trie.insert(current); // 获取前缀对应的码 - const perfixCode = trie.search(perfix); + const prefixCode = trie.search(prefix); // 添加至码表 - perfixCode && set(perfixCode.code); + prefixCode && set(prefixCode.code); // 前缀 = k - perfix = k; + prefix = k; // k 重置 k = []; @@ -216,7 +216,7 @@ function encoder(e: MessageEvent) { } // 已完成输出最后的码 - const val = trie.search(perfix); + const val = trie.search(prefix); val && set(val.code); // 输出信息结束码 diff --git a/src/pages/GIF-Explorer/types.d.ts b/src/pages/GIF-Explorer/types.d.ts index 07e7ff9..095eada 100644 --- a/src/pages/GIF-Explorer/types.d.ts +++ b/src/pages/GIF-Explorer/types.d.ts @@ -102,6 +102,7 @@ export interface GIFPattern { }; frames: { index: number; + cursor: number; data?: ImageData; offsetLeft: number; offsetTop: number; @@ -122,6 +123,7 @@ export interface GIFPattern { globalColorTable?: number[][]; applicationExtension?: { id: number; + cursor: number; application: string; loop: number; }; @@ -134,6 +136,7 @@ export interface GIFPattern { }; plainTextExtension?: { index: number; + cursor: number; offsetLeft: number; offsetTop: number; gridWidth: number; @@ -147,6 +150,7 @@ export interface GIFPattern { }[]; commentExtension?: { index: number; + cursor: number; comments: string; }[]; } diff --git a/src/styles/preset.css b/src/styles/preset.css index 628d279..7def6ee 100644 --- a/src/styles/preset.css +++ b/src/styles/preset.css @@ -38,7 +38,7 @@ .mask { position: fixed; inset: 0; - z-index: var(--z-index-highest); + z-index: calc(var(--z-index-important) + var(--z-index-useful)); background-color: hsla(0deg 100% 0% / 50%); backdrop-filter: blur(5px); opacity: 0;