Compare commits

...

2 Commits

Author SHA1 Message Date
87d2d71193 chore: add packageManager field
All checks were successful
continuous-integration/drone/push Build is passing
2024-10-14 11:03:53 +09:00
759252cec5 docs: improve faq page
- add toc for faq page
- fix #79: add note about oem build
- add plat form specific instructions for qqmusic faq
2024-10-14 11:03:01 +09:00
11 changed files with 228 additions and 117 deletions

View File

@ -88,5 +88,6 @@
"rollup-plugin-terser": "npm:@rollup/plugin-terser@0.4.3", "rollup-plugin-terser": "npm:@rollup/plugin-terser@0.4.3",
"sourcemap-codec": "npm:@jridgewell/sourcemap-codec@1.4.15" "sourcemap-codec": "npm:@jridgewell/sourcemap-codec@1.4.15"
} }
} },
"packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
} }

View File

@ -1,26 +0,0 @@
import { Heading } from '@chakra-ui/react';
import React from 'react';
export interface Header3Props {
children: React.ReactNode;
id?: string;
className?: string;
}
export function Header3({ children, className, id }: Header3Props) {
return (
<Heading
as="h3"
id={id}
className={className}
pt={3}
pb={1}
borderBottom={'1px solid'}
borderColor="gray.300"
color="gray.800"
size="lg"
>
{children}
</Heading>
);
}

View File

@ -1,16 +0,0 @@
import { Heading } from '@chakra-ui/react';
import React from 'react';
export interface Header4Props {
children: React.ReactNode;
id?: string;
className?: string;
}
export function Header4({ children, className, id }: Header4Props) {
return (
<Heading as="h4" id={id} className={className} pt={3} pb={1} color="gray.700" size="md">
{children}
</Heading>
);
}

View File

@ -0,0 +1,42 @@
import { Heading } from '@chakra-ui/react';
import React from 'react';
export interface HeaderProps {
children: React.ReactNode;
id?: string;
className?: string;
}
export function Header3({ children, className, id }: HeaderProps) {
return (
<Heading
as="h3"
id={id}
className={className}
pt={3}
pb={1}
borderBottom={'1px solid'}
borderColor="gray.300"
color="gray.800"
size="lg"
>
{children}
</Heading>
);
}
export function Header4({ children, className, id }: HeaderProps) {
return (
<Heading as="h4" id={id} className={className} pt={3} pb={1} color="gray.700" size="md">
{children}
</Heading>
);
}
export function Header5({ children, className, id }: HeaderProps) {
return (
<Heading as="h5" id={id} className={className} pt={3} pb={1} color="gray.700" size="sm">
{children}
</Heading>
);
}

View File

@ -1,5 +1,5 @@
import { Alert, AlertIcon, Container, Flex, List, ListItem, Text, chakra } from '@chakra-ui/react'; import { Alert, AlertIcon, Container, Flex, List, ListItem, Text } from '@chakra-ui/react';
import { Header4 } from '~/components/HelpText/Header4'; import { Header4 } from '~/components/HelpText/Headers';
import { VQuote } from '~/components/HelpText/VQuote'; import { VQuote } from '~/components/HelpText/VQuote';
import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer'; import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
import { HiWord } from '~/components/HelpText/HiWord'; import { HiWord } from '~/components/HelpText/HiWord';
@ -15,9 +15,6 @@ export function KuwoFAQ() {
<SegmentTryOfficialPlayer /> <SegmentTryOfficialPlayer />
</ListItem> </ListItem>
<ListItem> <ListItem>
<Text>
<chakra.strong>2</chakra.strong>
</Text>
<Text> <Text>
<HiWord></HiWord> <HiWord></HiWord>
<VQuote> <VQuote>
@ -38,10 +35,10 @@ export function KuwoFAQ() {
<Flex flexDir="column"> <Flex flexDir="column">
<Text> root </Text> <Text> root </Text>
<Text> <Text>
<strong></strong> <strong></strong>
</Text> </Text>
<Text> <Text>
<strong></strong>使使 <strong></strong>使使
</Text> </Text>
</Flex> </Flex>
</Alert> </Alert>

View File

@ -1,6 +1,6 @@
import { Alert, AlertIcon, Code, Container, Flex, Img, ListItem, Text, UnorderedList } from '@chakra-ui/react'; import { Alert, AlertIcon, Code, Container, Flex, Img, ListItem, Text, UnorderedList } from '@chakra-ui/react';
import { ExtLink } from '~/components/ExtLink'; import { ExtLink } from '~/components/ExtLink';
import { Header4 } from '~/components/HelpText/Header4'; import { Header4 } from '~/components/HelpText/Headers';
import { VQuote } from '~/components/HelpText/VQuote'; import { VQuote } from '~/components/HelpText/VQuote';
import { ProjectIssue } from '~/components/ProjectIssue'; import { ProjectIssue } from '~/components/ProjectIssue';
import LdPlayerSettingsScreen from './assets/ld_settings_misc.webp'; import LdPlayerSettingsScreen from './assets/ld_settings_misc.webp';
@ -63,7 +63,7 @@ export function OtherFAQ() {
<AlertIcon /> <AlertIcon />
<Flex flexDir="column"> <Flex flexDir="column">
<Text> <Text>
<strong></strong>使<strong></strong> <strong></strong>使<strong></strong>
{';使用前请自行评估风险。'} {';使用前请自行评估风险。'}
</Text> </Text>
</Flex> </Flex>

View File

@ -1,63 +1,159 @@
import { Alert, AlertIcon, Container, Flex, List, ListItem, Text, UnorderedList, chakra } from '@chakra-ui/react'; import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box } from '@chakra-ui/react';
import { Header4 } from '~/components/HelpText/Header4'; import { Alert, AlertIcon, Container, Flex, ListItem, Text, UnorderedList } from '@chakra-ui/react';
import { Header4 } from '~/components/HelpText/Headers';
import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer'; import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
import { QMCv2QQMusicAllInstructions } from '~/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions';
import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions'; import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
import { ExtLink } from '~/components/ExtLink'; import { ExtLink } from '~/components/ExtLink';
import { AndroidADBPullInstruction } from '~/components/AndroidADBPullInstruction/AndroidADBPullInstruction';
import { InstructionsIOS } from '~/features/settings/panels/QMCv2/InstructionsIOS';
import { InstructionsMac } from '~/features/settings/panels/QMCv2/InstructionsMac';
export function QQMusicFAQ() { export function QQMusicFAQ() {
return ( return (
<> <>
<Header4></Header4> <Header4></Header4>
<List spacing={2}>
<ListItem>
<SegmentTryOfficialPlayer /> <SegmentTryOfficialPlayer />
</ListItem> <Text></Text>
<ListItem>
<Text> <Text>
<chakra.strong>2</chakra.strong> <strong></strong>使
</Text> </Text>
<Accordion allowToggle my={2}>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
Windows
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<Text> <Text>
Windows 19.43 Windows 19.51
QQ Windows v19.43
</Text> </Text>
<Text> QQ Windows v19.51 </Text>
<UnorderedList pl={3}> <UnorderedList pl={3}>
<ListItem> <ListItem>
<Text> <Text>
<ExtLink href="https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1943.exe"> <ExtLink href="https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1951.exe">
<code>qq.com</code> <code>qq.com</code>
</ExtLink> </ExtLink>
</Text> </Text>
</ListItem> </ListItem>
<ListItem> <ListItem>
<Text> <Text>
<ExtLink href="https://web.archive.org/web/2023/https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1943.exe"> <ExtLink href="https://web.archive.org/web/2023/https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1951.exe">
<code>Archive.org</code> <code>Archive.org</code>
</ExtLink> </ExtLink>
</Text> </Text>
</ListItem> </ListItem>
</UnorderedList> </UnorderedList>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
Mac
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<Container p={2}>
<Alert status="warning" borderRadius={5}>
<AlertIcon />
<Flex flexDir="column">
<Text>Mac 8.8.0 </Text>
<Text>
<ExtLink href="https://web.archive.org/web/20230903/https://dldir1.qq.com/music/clntupate/mac/QQMusicMac_Mgr.dmg">
<code>Archive.org</code>
</ExtLink>
</Text>
</Flex>
</Alert>
</Container>
<SegmentKeyImportInstructions
tab="QMCv2 密钥"
keyInstructionText="查看密钥提取说明:"
clientInstructions={
<Box p={2}>
<InstructionsMac />
</Box>
}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
(Android)
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<Container p={2}>
<Alert status="warning" borderRadius={5}>
<AlertIcon />
<Flex flexDir="column">
<Text> root </Text>
</Flex>
</Alert>
</Container>
<Text>QQ </Text>
<Text>
使QQ OEM
</Text>
<SegmentKeyImportInstructions
tab="QMCv2 密钥"
keyInstructionText="查看密钥提取说明:"
clientInstructions={
<Box p={2}>
<AndroidADBPullInstruction dir="/data/data/com.tencent.qqmusic/databases" file="player_process_db" />
</Box>
}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
iOS (iPhone, iPad)
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<Container p={2}> <Container p={2}>
<Alert status="warning" borderRadius={5}> <Alert status="warning" borderRadius={5}>
<AlertIcon /> <AlertIcon />
<Flex flexDir="column"> <Flex flexDir="column">
<Text>iOS </Text> <Text>iOS </Text>
<Text>root</Text>
</Flex> </Flex>
</Alert> </Alert>
</Container> </Container>
<Container p={2} pt={0}> <SegmentKeyImportInstructions
<Alert status="info" borderRadius={5}> tab="QMCv2 密钥"
<AlertIcon /> keyInstructionText="查看密钥提取说明:"
clientInstructions={
</Alert> <Box p={2}>
</Container> <InstructionsIOS />
</Box>
<SegmentKeyImportInstructions tab="QMCv2 密钥" clientInstructions={<QMCv2QQMusicAllInstructions />} /> }
</ListItem> />
</List> </AccordionPanel>
</AccordionItem>
</Accordion>
</> </>
); );
} }

View File

@ -8,9 +8,14 @@ import { MdFileUpload } from 'react-icons/md';
export interface SegmentKeyImportInstructionsProps { export interface SegmentKeyImportInstructionsProps {
clientInstructions: React.ReactNode; clientInstructions: React.ReactNode;
tab: string; tab: string;
keyInstructionText?: React.ReactNode;
} }
export function SegmentKeyImportInstructions({ clientInstructions, tab }: SegmentKeyImportInstructionsProps) { export function SegmentKeyImportInstructions({
clientInstructions,
tab,
keyInstructionText = '选择你的客户端平台来查看密钥提取说明:',
}: SegmentKeyImportInstructionsProps) {
return ( return (
<> <>
<Text></Text> <Text></Text>
@ -33,7 +38,7 @@ export function SegmentKeyImportInstructions({ clientInstructions, tab }: Segmen
</Flex> </Flex>
</ListItem> </ListItem>
<ListItem> <ListItem>
<Text></Text> <Text>{keyInstructionText}</Text>
<Tabs display="flex" flexDir="column" border="1px solid" borderColor="gray.300" borderRadius={5}> <Tabs display="flex" flexDir="column" border="1px solid" borderColor="gray.300" borderRadius={5}>
{clientInstructions} {clientInstructions}
</Tabs> </Tabs>

View File

@ -1,12 +1,12 @@
import { Text, chakra } from '@chakra-ui/react'; import { Alert, AlertIcon, Container } from '@chakra-ui/react';
export function SegmentTryOfficialPlayer() { export function SegmentTryOfficialPlayer() {
return ( return (
<> <Container p={2} my={2} pt={0}>
<Text> <Alert status="info" borderRadius={5}>
<chakra.strong>1</chakra.strong> <AlertIcon />
</Text>
<Text></Text> </Alert>
</> </Container>
); );
} }

View File

@ -3,8 +3,8 @@ import { Text } from '@chakra-ui/react';
export function InstructionsPC() { export function InstructionsPC() {
return ( return (
<> <>
<Text>使 Windows 19.43 </Text> <Text>使 Windows 19.51 </Text>
<Text>使 Windows 19.51 </Text> <Text>使 Windows 19.57 </Text>
</> </>
); );
} }

View File

@ -1,5 +1,5 @@
import { Center, Container, Heading } from '@chakra-ui/react'; import { Center, Container, Heading, Link, ListItem, UnorderedList } from '@chakra-ui/react';
import { Header3 } from '~/components/HelpText/Header3'; import { Header3 } from '~/components/HelpText/Headers';
import { KuwoFAQ } from '~/faq/KuwoFAQ'; import { KuwoFAQ } from '~/faq/KuwoFAQ';
import { OtherFAQ } from '~/faq/OtherFAQ'; import { OtherFAQ } from '~/faq/OtherFAQ';
import { QQMusicFAQ } from '~/faq/QQMusicFAQ'; import { QQMusicFAQ } from '~/faq/QQMusicFAQ';
@ -10,11 +10,23 @@ export function FaqTab() {
<Center> <Center>
<Heading as="h2"></Heading> <Heading as="h2"></Heading>
</Center> </Center>
<Header3>QQ </Header3> <Header3></Header3>
<UnorderedList>
<ListItem>
<Link href="#faq-qqmusic">QQ </Link>
</ListItem>
<ListItem>
<Link href="#faq-kuwo"></Link>
</ListItem>
<ListItem>
<Link href="#faq-other"></Link>
</ListItem>
</UnorderedList>
<Header3 id="faq-qqmusic">QQ </Header3>
<QQMusicFAQ /> <QQMusicFAQ />
<Header3></Header3> <Header3 id="faq-kuwo"></Header3>
<KuwoFAQ /> <KuwoFAQ />
<Header3></Header3> <Header3 id="faq-other"></Header3>
<OtherFAQ /> <OtherFAQ />
</Container> </Container>
); );