Skip to content

Commit 64c1e4a

Browse files
Steve-xmhSteve-xmh
committed
修正Win10桌面版背景透明的问题
增加翻译音译文字 修正编辑文本框时鼠标在编辑框外松开时取消选中的问题
1 parent 4678b34 commit 64c1e4a

File tree

24 files changed

+454
-307
lines changed

24 files changed

+454
-307
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"react-virtualized-auto-sizer": "^1.0.25",
4848
"react-window": "^1.8.11",
4949
"save-file": "^2.3.1",
50+
"semver": "^7.7.1",
5051
"tauri-controls": "^0.4.0",
5152
"uid": "^2.0.2",
5253
"workbox-window": "^7.3.0"
@@ -60,6 +61,7 @@
6061
"@types/react": "^19.0.8",
6162
"@types/react-dom": "^19.0.3",
6263
"@types/react-window": "^1.8.8",
64+
"@types/semver": "^7.7.0",
6365
"@types/ungap__structured-clone": "^1.2.0",
6466
"@vitejs/plugin-react": "^4.3.4",
6567
"babel-plugin-react-compiler": "19.0.0-beta-decd7b8-20250118",

‎pnpm-lock.yaml‎

Lines changed: 18 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2023-2024 Steve Xiao (stevexmh@qq.com) and contributors.
2+
* Copyright 2023-2025 Steve Xiao (stevexmh@qq.com) and contributors.
33
*
44
* 本源代码文件是属于 AMLL TTML Tool 项目的一部分。
55
* This source code file is a part of AMLL TTML Tool project.
@@ -9,15 +9,17 @@
99
* https://github.com/Steve-xmh/amll-ttml-tool/blob/main/LICENSE
1010
*/
1111

12-
import { Box, Button, Flex, Text, Theme } from "@radix-ui/themes";
13-
import "@radix-ui/themes/styles.css";
1412
import SuspensePlaceHolder from "$/components/SuspensePlaceHolder";
1513
import { TouchSyncPanel } from "$/components/TouchSyncPanel";
14+
import { Box, Flex, Theme } from "@radix-ui/themes";
15+
import "@radix-ui/themes/styles.css";
1616
import { getCurrentWindow } from "@tauri-apps/api/window";
17+
import { platform, version } from "@tauri-apps/plugin-os";
1718
import { AnimatePresence, motion } from "framer-motion";
1819
import { useAtomValue, useStore } from "jotai";
19-
import { Suspense, lazy, useEffect } from "react";
20+
import { Suspense, lazy, useEffect, useState } from "react";
2021
import { ToastContainer, toast } from "react-toastify";
22+
import semverGt from "semver/functions/gt";
2123
import styles from "./App.module.css";
2224
import AudioControls from "./components/AudioControls";
2325
import DarkThemeDetector from "./components/DarkThemeDetector";
@@ -43,13 +45,24 @@ function App() {
4345
const isDarkTheme = useAtomValue(isDarkThemeAtom);
4446
const toolMode = useAtomValue(toolModeAtom);
4547
const showTouchSyncPanel = useAtomValue(showTouchSyncPanelAtom);
48+
const [hasBackground, setHasBackground] = useState(false);
4649
const store = useStore();
50+
4751
if (import.meta.env.TAURI_ENV_PLATFORM) {
4852
// eslint-disable-next-line react-hooks/rules-of-hooks
4953
useEffect(() => {
50-
const win = getCurrentWindow();
54+
(async () => {
55+
const win = getCurrentWindow();
56+
if (platform() === "windows") {
57+
if (semverGt("10.0.22000", version())) {
58+
setHasBackground(true);
59+
await win.clearEffects();
60+
}
61+
}
62+
await new Promise((r) => requestAnimationFrame(r));
5163

52-
win.show();
64+
await win.show();
65+
})();
5366
}, []);
5467
}
5568

@@ -79,7 +92,7 @@ function App() {
7992
<Theme
8093
appearance={isDarkTheme ? "dark" : "light"}
8194
panelBackground="solid"
82-
hasBackground={!import.meta.env.TAURI_ENV_PLATFORM}
95+
hasBackground={hasBackground}
8396
accentColor={isDarkTheme ? "jade" : "green"}
8497
className={styles.radixTheme}
8598
onClick={(evt) => {

‎src/components/AudioControls/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2023-2023 Steve Xiao (stevexmh@qq.com) and contributors.
2+
* Copyright 2023-2025 Steve Xiao (stevexmh@qq.com) and contributors.
33
*
44
* 本源代码文件是属于 AMLL TTML Tool 项目的一部分。
55
* This source code file is a part of AMLL TTML Tool project.

‎src/components/DarkThemeDetector/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2023-2023 Steve Xiao (stevexmh@qq.com) and contributors.
2+
* Copyright 2023-2025 Steve Xiao (stevexmh@qq.com) and contributors.
33
*
44
* 本源代码文件是属于 AMLL TTML Tool 项目的一部分。
55
* This source code file is a part of AMLL TTML Tool project.

‎src/components/LyricLinesView/index.module.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2023-2023 Steve Xiao (stevexmh@qq.com) and contributors.
2+
* Copyright 2023-2025 Steve Xiao (stevexmh@qq.com) and contributors.
33
*
44
* 本源代码文件是属于 AMLL TTML Tool 项目的一部分。
55
* This source code file is a part of AMLL TTML Tool project.
@@ -89,15 +89,26 @@
8989
}
9090
}
9191

92-
.lyricWordsContainer {
92+
.lyricLineContainer {
9393
min-width: 0;
9494
padding: var(--space-3);
9595
flex-grow: 1;
9696
display: flex;
97+
flex-direction: column;
98+
}
99+
100+
.lyricWordsContainer {
101+
min-width: 0;
102+
flex-grow: 1;
103+
display: flex;
97104
flex-wrap: wrap;
98105
align-items: baseline;
99106
gap: var(--space-2);
100107

108+
&.edit {
109+
margin-bottom: var(--space-2);
110+
}
111+
101112
&.sync {
102113
flex-wrap: nowrap;
103114
overflow: auto;

‎src/components/LyricLinesView/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2023-2023 Steve Xiao (stevexmh@qq.com) and contributors.
2+
* Copyright 2023-2025 Steve Xiao (stevexmh@qq.com) and contributors.
33
*
44
* 本源代码文件是属于 AMLL TTML Tool 项目的一部分。
55
* This source code file is a part of AMLL TTML Tool project.

‎src/components/LyricLinesView/lyric-line-view.tsx‎

Lines changed: 66 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2023-2023 Steve Xiao (stevexmh@qq.com) and contributors.
2+
* Copyright 2023-2025 Steve Xiao (stevexmh@qq.com) and contributors.
33
*
44
* 本源代码文件是属于 AMLL TTML Tool 项目的一部分。
55
* This source code file is a part of AMLL TTML Tool project.
@@ -46,6 +46,7 @@ import {
4646
Fragment,
4747
memo,
4848
useEffect,
49+
useLayoutEffect,
4950
useMemo,
5051
useRef,
5152
useState,
@@ -129,6 +130,12 @@ export const LyricLineView: FC<{
129130
};
130131
}, [line.startTime, visualizeTimestampUpdate]);
131132

133+
useLayoutEffect(() => {
134+
if (toolMode !== ToolMode.Edit) {
135+
setEnableInsert(false);
136+
}
137+
}, [toolMode]);
138+
132139
// biome-ignore lint/correctness/useExhaustiveDependencies: 用于呈现时间戳更新效果
133140
useEffect(() => {
134141
if (!visualizeTimestampUpdate) return;
@@ -323,56 +330,69 @@ export const LyricLineView: FC<{
323330
</Flex>
324331
<div
325332
className={classNames(
326-
styles.lyricWordsContainer,
333+
styles.lyricLineContainer,
327334
toolMode === ToolMode.Edit && styles.edit,
328335
toolMode === ToolMode.Sync && styles.sync,
329336
)}
330337
ref={wordsContainerRef}
331338
>
332-
{words.map((wordAtom, wi) => (
333-
<Fragment key={`${wordAtom}`}>
334-
{enableInsert && (
335-
<IconButton
336-
size="1"
337-
variant="soft"
338-
onClick={(evt) => {
339-
evt.preventDefault();
340-
evt.stopPropagation();
341-
editLyricLines((state) => {
342-
state.lyricLines[lineIndex].words.splice(
343-
wi,
344-
0,
345-
newLyricWord(),
346-
);
347-
});
348-
}}
349-
>
350-
<AddFilled />
351-
</IconButton>
352-
)}
353-
<LyricWordView
354-
wordAtom={wordAtom}
355-
wordIndex={wi}
356-
line={line}
357-
lineIndex={lineIndex}
358-
/>
359-
</Fragment>
360-
))}
361-
{enableInsert && (
362-
<IconButton
363-
size="1"
364-
variant="soft"
365-
onClick={(evt) => {
366-
evt.preventDefault();
367-
evt.stopPropagation();
368-
editLyricLines((state) => {
369-
state.lyricLines[lineIndex].words.push(newLyricWord());
370-
});
371-
}}
372-
>
373-
<AddFilled />
374-
</IconButton>
375-
)}
339+
<div
340+
className={classNames(
341+
styles.lyricWordsContainer,
342+
toolMode === ToolMode.Edit && styles.edit,
343+
toolMode === ToolMode.Sync && styles.sync,
344+
)}
345+
ref={wordsContainerRef}
346+
>
347+
{words.map((wordAtom, wi) => (
348+
<Fragment key={`${wordAtom}`}>
349+
{enableInsert && (
350+
<IconButton
351+
size="1"
352+
variant="soft"
353+
onClick={(evt) => {
354+
evt.preventDefault();
355+
evt.stopPropagation();
356+
editLyricLines((state) => {
357+
state.lyricLines[lineIndex].words.splice(
358+
wi,
359+
0,
360+
newLyricWord(),
361+
);
362+
});
363+
}}
364+
>
365+
<AddFilled />
366+
</IconButton>
367+
)}
368+
<LyricWordView
369+
wordAtom={wordAtom}
370+
wordIndex={wi}
371+
line={line}
372+
lineIndex={lineIndex}
373+
/>
374+
</Fragment>
375+
))}
376+
{enableInsert && (
377+
<IconButton
378+
size="1"
379+
variant="soft"
380+
onClick={(evt) => {
381+
evt.preventDefault();
382+
evt.stopPropagation();
383+
editLyricLines((state) => {
384+
state.lyricLines[lineIndex].words.push(newLyricWord());
385+
});
386+
}}
387+
>
388+
<AddFilled />
389+
</IconButton>
390+
)}
391+
</div>
392+
<div>
393+
翻译：{line.translatedLyric || <Text color="gray">无</Text>}
394+
</div>
395+
<div>音译：{line.romanLyric || <Text color="gray">无</Text>}</div>
376396
</div>
377397
{toolMode === ToolMode.Edit && (
378398
<Flex p="3">

0 commit comments

Comments
 (0)