ahdoawhfo/um-react
1
0
Fork 0
mirror of https://git.um-react.app/um/um-react.git synced 2025-11-28 19:43:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: batch 2

Browse Source
This commit is contained in:
鲁树人
2025-05-17 11:20:52 +09:00
parent 246ba48135
commit 75b43e1e84
16 changed files with 384 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/features/settings/panels/QMCv2/InstructionsPC.tsx
View File

@@ -1,10 +1,16 @@
import { Text } from '@chakra-ui/react';
export function InstructionsPC() {
return (
<>
<Text>使用 Windows 19.51 或更低版本下载的歌曲文件无需密钥。</Text>
<Text>使用 Windows 19.57 或更高版本下载的歌曲文件需要导入密钥，但方法尚未公开。</Text>
<p>
使用 <span className="text-primary">19.51 或更低版本</span>下载的歌曲文件
<mark>无需密钥</mark>。
</p>
<p className="mt-2">
使用 <span className="text-error">19.57 或更高版本</span>下载的歌曲文件
<mark>需要导入密钥</mark>。
<br />
目前未公开密钥获取方式。
</p>
</>
);
}

23
src/features/settings/panels/QMCv2/QMCv2DoubanAllInstructions.tsx
View File

@@ -1,17 +1,14 @@
import { Tab, TabList, TabPanel, TabPanels } from '@chakra-ui/react';
import { AndroidADBPullInstruction } from '~/components/AndroidADBPullInstruction/AndroidADBPullInstruction';
import { InstructionsTabs, InstructionTab } from '~/components/InstructionsTabs.tsx';
export function QMCv2DoubanAllInstructions() {
return (
<>
<TabList>
<Tab>安卓</Tab>
</TabList>
<TabPanels flex={1} overflow="auto">
<TabPanel>
<AndroidADBPullInstruction dir="/data/data/com.douban.radio/databases" file="music_audio_play" />
</TabPanel>
</TabPanels>
</>
);
const tabs: InstructionTab[] = [
{
id: 'android',
label: '安卓',
content: <AndroidADBPullInstruction dir="/data/data/com.douban.radio/databases" file="music_audio_play" />,
},
];
return <InstructionsTabs tabs={tabs} />;
}

57
src/features/settings/panels/QMCv2/QMCv2EKeyItem.tsx
View File

@@ -1,54 +1,25 @@
import { MdDelete, MdVpnKey } from 'react-icons/md';
import { qmc2DeleteKey, qmc2UpdateKey } from '../../settingsSlice';
import { useAppDispatch } from '~/hooks';
import { memo } from 'react';
import { KeyInput } from '~/components/KeyInput.tsx';
export const QMCv2EKeyItem = memo(({ id, name, ekey, i }: { id: string; name: string; ekey: string; i: number }) => {
const dispatch = useAppDispatch();
const updateKey = (prop: 'name' | 'ekey', e: React.ChangeEvent<HTMLInputElement>) =>
dispatch(qmc2UpdateKey({ id, field: prop, value: e.target.value }));
const deleteKey = () => dispatch(qmc2DeleteKey({ id }));
const isValidEKey = [364, 704].includes(ekey.length);
const ekeyLen = ekey.length;
const isValidEKey = ekeyLen === 364 || ekeyLen === 704;
return (
<li className="list-row items-center">
<div className="flex items-center justify-center w-8 h-8 text-sm font-bold text-gray-500 bg-gray-200 rounded-full">
{i + 1}
</div>
<div className="join join-vertical flex-1">
<label className="input w-full rounded-tl-md rounded-tr-md">
<span className="cursor-default select-none">文件名</span>
<input
type="text"
className="font-mono"
placeholder="文件名，包括后缀名。如 “AAA - BBB.mflac”"
value={name}
onChange={(e) => updateKey('name', e)}
/>
</label>
<label className="input w-full rounded-bl-md rounded-br-md mt-[-1px]">
<span className="cursor-default inline-flex items-center gap-1 select-none">
密钥 <MdVpnKey />
</span>
<input
type="text"
className="font-mono"
placeholder="密钥，通常包含 364 或 704 位字符，没有空格。"
value={ekey}
onChange={(e) => updateKey('ekey', e)}
/>
<span className={isValidEKey ? 'text-green-600' : 'text-red-600'}>
<code>{ekey.length || '?'}</code>
</span>
</label>
</div>
<button type="button" className="btn btn-error btn-sm px-1 btn-outline" onClick={deleteKey}>
<MdDelete className="size-6" />
</button>
</li>
<KeyInput
name={name}
value={ekey}
isValidKey={isValidEKey}
onSetName={(value) => dispatch(qmc2UpdateKey({ id, field: 'name', value }))}
onSetValue={(value) => dispatch(qmc2UpdateKey({ id, field: 'ekey', value }))}
onDelete={() => dispatch(qmc2DeleteKey({ id }))}
sequence={i + 1}
namePlaceholder="文件名，包括后缀名。如 “AAA - BBB.mflac”"
valuePlaceholder="密钥，通常包含 364 或 704 位字符，没有空格。"
/>
);
});

38
src/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions.tsx
View File

@@ -1,32 +1,20 @@
import { Tab, TabList, TabPanel, TabPanels } from '@chakra-ui/react';
import { AndroidADBPullInstruction } from '~/components/AndroidADBPullInstruction/AndroidADBPullInstruction';
import { InstructionsIOS } from './InstructionsIOS';
import { InstructionsMac } from './InstructionsMac';
import { InstructionsPC } from './InstructionsPC';
import { InstructionsTabs, InstructionTab } from '~/components/InstructionsTabs.tsx';
export function QMCv2QQMusicAllInstructions() {
return (
<>
<TabList>
<Tab>安卓</Tab>
<Tab>iOS</Tab>
<Tab>Mac</Tab>
<Tab>Windows</Tab>
</TabList>
<TabPanels flex={1} overflow="auto">
<TabPanel>
<AndroidADBPullInstruction dir="/data/data/com.tencent.qqmusic/databases" file="player_process_db" />
</TabPanel>
<TabPanel>
<InstructionsIOS />
</TabPanel>
<TabPanel>
<InstructionsMac />
</TabPanel>
<TabPanel>
<InstructionsPC />
</TabPanel>
</TabPanels>
</>
);
const tabs: InstructionTab[] = [
{
id: 'android',
label: '安卓',
content: <AndroidADBPullInstruction dir="/data/data/com.tencent.qqmusic/databases" file="player_process_db" />,
},
{ id: 'ios', label: 'iOS', content: <InstructionsIOS /> },
{ id: 'mac', label: 'Mac', content: <InstructionsMac /> },
{ id: 'windows', label: 'Windows', content: <InstructionsPC /> },
];
return <InstructionsTabs tabs={tabs} />;
}