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

feat: integrate FAQ to webapp

Browse Source
This commit is contained in:
鲁树人
2023-09-05 01:34:42 +01:00
parent 36a289ee9e
commit 99197e85fe
18 changed files with 380 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/faq/KuwoFAQ.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { Alert, AlertIcon, Container, List, ListItem, Text, VStack, chakra } from '@chakra-ui/react';
import { Header4 } from '~/components/HelpText/Header4';
import { VQuote } from '~/components/HelpText/VQuote';
import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
import { HiWord } from '~/components/HelpText/HiWord';
import { KWMv2AllInstructions } from '~/features/settings/panels/KWMv2/KWMv2AllInstructions';
import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
export function KuwoFAQ() {
return (
<>
<Header4>解锁失败</Header4>
<List spacing={2}>
<ListItem>
<SegmentTryOfficialPlayer />
</ListItem>
<ListItem>
<Text>
<chakra.strong>2、检查您的平台</chakra.strong>
</Text>
<Text>
日前，仅<HiWord>手机客户端</HiWord>下载的
<VQuote>
<strong>至臻全景声</strong>
</VQuote>
及
<VQuote>
<strong>至臻母带</strong>
</VQuote>
{'音质的音乐文件采用新版加密。'}
</Text>
<Text>其他音质目前不需要提取密钥。</Text>
<Text>PC平台暂未推出使用新版加密的音质。</Text>
<Container p={2}>
<Alert status="warning" borderRadius={5}>
<AlertIcon />
<VStack>
<Text>Android 用户提取密钥需要 root 权限，或注入文件提供器。</Text>
<Text>请注意：项目组不提倡使用第三方修改版应用亦不会提供，使用前请自行评估风险。</Text>
</VStack>
</Alert>
</Container>
<SegmentKeyImportInstructions tab="KWMv2 密钥" clientInstructions={<KWMv2AllInstructions />} />
</ListItem>
</List>
</>
);
}

28
src/faq/OtherFAQ.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { ExternalLinkIcon } from '@chakra-ui/icons';
import { Link, Text } from '@chakra-ui/react';
import { Header4 } from '~/components/HelpText/Header4';
import { ProjectIssue } from '~/components/ProjectIssue';
export function OtherFAQ() {
return (
<>
<Header4>解密后没有封面等信息</Header4>
<Text>该项目进行解密处理。如果加密前的资源没有内嵌元信息或封面，解密的文件也没有。</Text>
<Text>请使用第三方工具进行编辑或管理元信息。</Text>
<Header4>如何批量下载</Header4>
<Text>
暂时没有实现，不过你可以在 <ProjectIssue id={34} title="[UI] 全部下载功能" /> 以及{' '}
<ProjectIssue id={43} title="批量下载" /> 追踪该问题。
</Text>
<Header4>有更多问题？</Header4>
<Text>
{'欢迎进入 '}
<Link href={'https://t.me/unlock_music_chat'} isExternal>
Telegram “音乐解锁-交流” 交流群
<ExternalLinkIcon />
</Link>
{' 一起探讨。'}
</Text>
</>
);
}

40
src/faq/QQMusicFAQ.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { Alert, AlertIcon, Container, List, ListItem, Text, chakra } from '@chakra-ui/react';
import { Header4 } from '~/components/HelpText/Header4';
import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
import { QMCv2AllInstructions } from '~/features/settings/panels/QMCv2/QMCv2AllInstructions';
import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
export function QQMusicFAQ() {
return (
<>
<Header4>解锁失败</Header4>
<List spacing={2}>
<ListItem>
<SegmentTryOfficialPlayer />
</ListItem>
<ListItem>
<Text>
<chakra.strong>2、检查您的平台</chakra.strong>
</Text>
<Text>日前，仅Windows客户端下载的歌曲无需密钥，其余平台的官方正式版本均需要提取密钥。</Text>
<Container p={2}>
<Alert status="warning" borderRadius={5}>
<AlertIcon />
iOS用户提取歌曲困难，建议换用电脑操作；Android用户提取密钥需要root，也建议用电脑操作。
</Alert>
</Container>
<Container p={2} pt={0}>
<Alert status="info" borderRadius={5}>
<AlertIcon />
重复下载同一首的歌曲不重复扣下载配额，但是同一首歌的两个版本会重复扣下载配额，请仔细分辨。
</Alert>
</Container>
<SegmentKeyImportInstructions tab="QMCv2 密钥" clientInstructions={<QMCv2AllInstructions />} />
</ListItem>
</List>
</>
);
}

25
src/faq/SegmentAddKeyDropdown.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { Flex, IconButton } from '@chakra-ui/react';
import { MdExpandMore } from 'react-icons/md';
import { HiWord } from '~/components/HelpText/HiWord';
import { VQuote } from '~/components/HelpText/VQuote';
export function SegmentAddKeyDropdown() {
return (
<Flex as="span" alignItems="center">
按下<VQuote>添加一条密钥</VQuote>按钮
<HiWord>右侧</HiWord>的
<IconButton
colorScheme="purple"
variant="outline"
size="sm"
icon={<MdExpandMore />}
ml="2"
borderTopLeftRadius={0}
borderBottomLeftRadius={0}
isDisabled
css={{ ':disabled': { opacity: 1 } }}
aria-label="示例按钮"
/>
</Flex>
);
}

44
src/faq/SegmentKeyImportInstructions.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { Flex, Icon, ListItem, OrderedList, Tabs, Text } from '@chakra-ui/react';
import { SegmentTopNavSettings } from './SegmentTopNavSettings';
import { VQuote } from '~/components/HelpText/VQuote';
import { SegmentAddKeyDropdown } from './SegmentAddKeyDropdown';
import React from 'react';
import { MdFileUpload } from 'react-icons/md';
export interface SegmentKeyImportInstructionsProps {
clientInstructions: React.ReactNode;
tab: string;
}
export function SegmentKeyImportInstructions({ clientInstructions, tab }: SegmentKeyImportInstructionsProps) {
return (
<>
<Text>导入密钥可以参考下面的步骤：</Text>
<OrderedList>
<ListItem>
<SegmentTopNavSettings />
</ListItem>
<ListItem>
设定区域选择<VQuote>{tab}</VQuote>
</ListItem>
<ListItem>
<SegmentAddKeyDropdown />
</ListItem>
<ListItem>
<Flex flexDir="row" alignItems="center">
{'选择 '}
<VQuote>
<Icon as={MdFileUpload} boxSize={5} mr={2} /> 从文件导入密钥…
</VQuote>
</Flex>
</ListItem>
<ListItem>
<Text>选择你的客户端平台来查看密钥提取说明：</Text>
<Tabs display="flex" flexDir="column" border="1px solid" borderColor="gray.300" borderRadius={5}>
{clientInstructions}
</Tabs>
</ListItem>
</OrderedList>
</>
);
}

9
src/faq/SegmentTopNavSettings.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { VQuote } from '~/components/HelpText/VQuote';
export function SegmentTopNavSettings() {
return (
<>
点击顶部的<VQuote>设置</VQuote>
</>
);
}

12
src/faq/SegmentTryOfficialPlayer.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Text, chakra } from '@chakra-ui/react';
export function SegmentTryOfficialPlayer() {
return (
<>
<Text>
<chakra.strong>1、请检查您的文件</chakra.strong>
</Text>
<Text>尝试用下载音乐的设备播放一次看看，如果官方客户端都无法播放，那解锁肯定会失败哦。</Text>
</>
);
}