9 |
14 | )
15 | }
16 |
17 | export default React.memo(Loading)
18 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | # 运行下面的命令, 构建qwerty-learner镜像
2 | # docker build -t qwertylearner .
3 | # 下面的命令运行镜像, 访问localhost:8990访问应用, 8990可修改成你未占有的端口
4 | # docker run -d -p 8990:3000 --name qwertylearnerapp qwertylearner:latest
5 |
6 | FROM node:14
7 |
8 | LABEL maintainer="sevenyoungairye
10 |
11 |
13 | {message ? message : 'Loading'}
12 |
15 | {trans}
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Qwerty Learner",
3 | "name": "Qwerty Learner",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "android-chrome-192x192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "android-chrome-512x512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/Speed/InfoBox.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const InfoBox: React.FC
6 |
7 | {info}
8 |
9 | {description}
10 |
11 | )
12 | }
13 |
14 | export default React.memo(InfoBox)
15 |
16 | export type InfoBoxProps = {
17 | info: string
18 | description: string
19 | }
20 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/Setting/index.module.css:
--------------------------------------------------------------------------------
1 | .tab-content {
2 | @apply flex w-full flex-col items-start justify-start gap-10 overflow-y-auto pb-40 pl-6 pr-9 pt-8;
3 | }
4 |
5 | .section {
6 | @apply flex w-full flex-col items-start gap-4;
7 | }
8 | .section-label {
9 | @apply pb-0 text-xl font-medium text-gray-600;
10 | }
11 | .section-description {
12 | @apply -mt-1 pl-4 text-left text-xs font-normal leading-tight text-gray-600;
13 | }
14 |
15 | .block {
16 | @apply flex w-full flex-col items-start gap-2 py-0 pl-4;
17 | }
18 | .block-label {
19 | @apply font-medium text-gray-600;
20 | }
21 | .switch-block {
22 | composes: block;
23 | @apply flex-row items-center justify-between;
24 | }
25 |
--------------------------------------------------------------------------------
/docker-compose.yaml:
--------------------------------------------------------------------------------
1 | version: '3'
2 |
3 | services:
4 | qwertylearner:
5 | image: 'node:16'
6 | user: 'root'
7 | working_dir: '/app/qwerty-learner'
8 | ports: [8990:5173]
9 | volumes:
10 | - $PWD/:/app/qwerty-learner
11 | command:
12 | - /bin/sh
13 | - -c
14 | - |
15 | echo 'run the bash command..'
16 | npm -v
17 | npm config set registry https://registry.npm.taobao.org
18 | npm install -g yarn
19 | cd /app/qwerty-learner
20 | yarn install
21 | yarn build
22 | nohup yarn start --host=0.0.0.0 &
23 | echo 'success.. start..'
24 | pwd
25 | echo '查看输出:...'
26 | cat nohup.out
27 | tail -f /dev/null
28 | tty: true
29 | stdin_open: true
30 |
--------------------------------------------------------------------------------
/.github/stale.yml:
--------------------------------------------------------------------------------
1 | # Number of days of inactivity before an issue becomes stale
2 | daysUntilStale: 60
3 | # Number of days of inactivity before a stale issue is closed
4 | daysUntilClose: 7
5 | # Issues with these labels will never be considered stale
6 | exemptLabels:
7 | - pinned
8 | - security
9 | - Category: Announcement
10 | # Label to use when marking an issue as stale
11 | staleLabel: stale-issue
12 | # Comment to post when marking an issue as stale. Set to `false` to disable
13 | markComment: >
14 | This issue has been automatically marked as stale because it has not had
15 | recent activity. It will be closed if no further activity occurs. Thank you
16 | for your contributions.
17 | # Comment to post when closing a stale issue. Set to `false` to disable
18 | closeComment: false
19 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/WordPanel/components/SoundIcon/volume-icons/VolumeIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function VolumeIcon(props: React.SVGProps9 | {title} 10 |
11 |
19 | {phoneticConfig.type === 'us' && word.usphone && word.usphone.length > 1 && {`AmE: [${word.usphone}]`}}
20 | {phoneticConfig.type === 'uk' && word.ukphone && word.ukphone.length > 1 && {`BrE: [${word.ukphone}]`}}
21 |
22 | )
23 | }
24 |
25 | export default Phonetic
26 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/ResultScreen/index.module.css:
--------------------------------------------------------------------------------
1 | .img-shake {
2 | animation: tada 1.5s ease-in-out 1s 4;
3 | transition: background-color 0.1s ease-in-out;
4 | }
5 |
6 | @keyframes tada {
7 | from {
8 | -webkit-transform: scale3d(1, 1, 1);
9 | transform: scale3d(1, 1, 1);
10 | }
11 |
12 | 10%,
13 | 20% {
14 | -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
15 | transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
16 | }
17 |
18 | 30%,
19 | 50%,
20 | 70%,
21 | 90% {
22 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
23 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
24 | fill: #818cf8;
25 | }
26 |
27 | 40%,
28 | 60%,
29 | 80% {
30 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
31 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
32 | }
33 |
34 | to {
35 | -webkit-transform: scale3d(1, 1, 1);
36 | transform: scale3d(1, 1, 1);
37 | animation-delay: 2s;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/WordPanel/components/SoundIcon/volume-icons/VolumeLowIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function VolumeLowIcon(props: React.SVGProps
9 |
13 | 
14 |
16 |
19 |
20 | Qwerty Learner
15 |
14 |
25 | )
26 | }
27 |
28 | export type TooltipProps = {
29 | children: ReactNode
30 | /** 显示文本 */
31 | content: string
32 | /** 位置 */
33 | placement?: 'top' | 'bottom'
34 | className?: string
35 | }
36 |
37 | export default Tooltip
38 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/Speed/index.tsx:
--------------------------------------------------------------------------------
1 | import { TypingContext } from '../../store'
2 | import InfoBox from './InfoBox'
3 | import { useContext } from 'react'
4 |
5 | export default function Speed() {
6 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
7 | const { state } = useContext(TypingContext)!
8 | const seconds = state.timerData.time % 60
9 | const minutes = Math.floor(state.timerData.time / 60)
10 | const secondsString = seconds < 10 ? '0' + seconds : seconds + ''
11 | const minutesString = minutes < 10 ? '0' + minutes : minutes + ''
12 | const inputNumber = state.chapterData.correctCount + state.chapterData.wrongCount
13 |
14 | return (
15 | setVisible(true)} onMouseLeave={() => setVisible(false)} onBlur={() => setVisible(false)}>
15 | {children}
16 |
17 |
22 | {content}
23 |
24 |
16 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx",
18 | "types": ["node", "unplugin-icons/types/react"],
19 | "baseUrl": ".",
20 | "paths": {
21 | "@/*": ["src/*"]
22 | // "@/assets/*": ["assets/*"],
23 | // "@/components/*": ["components/*"],
24 | // "@/hooks/*": ["hooks/*"],
25 | // "@/pages/*": ["pages/*"],
26 | // "@/resources/*": ["resources/*"],
27 | // "@/store/*": ["store/*"],
28 | // "@/utils/*": ["utils/*"]
29 | },
30 | "plugins": [
31 | {
32 | "name": "typescript-plugin-css-modules",
33 | "options": {
34 | "classnameTransform": "camelCaseOnly"
35 | }
36 | }
37 | ]
38 | },
39 | "include": ["src"]
40 | }
41 |
--------------------------------------------------------------------------------
/src/pages/Gallery-N/CategoryNavigation.tsx:
--------------------------------------------------------------------------------
1 | import { RadioGroup } from '@headlessui/react'
2 | import { useState } from 'react'
3 |
4 | interface Props {
5 | titles?: string[]
6 | }
7 |
8 | export default function CategoryNavigation({ titles = ['中国考试', '留学考试', '代码练习'] }: Props) {
9 | const [selectedTitle, setSelectedTitle] = useState(titles[0])
10 |
11 | return (
12 |
13 |
14 | {titles.map((title) => (
15 | `flex cursor-pointer items-center space-x-2 ${checked ? 'text-gray-800' : 'text-gray-500'}`}
19 | >
20 | {({ checked }) => (
21 | <>
22 |
23 | {title}
24 |
25 | )}
26 |
27 | ))}
28 |
29 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/WordPanel/components/KeyEventHandler/index.tsx:
--------------------------------------------------------------------------------
1 | import { WordUpdateAction } from '../InputHandler'
2 | import { TypingContext } from '@/pages/Typing/store'
3 | import { isChineseSymbol, isLegal } from '@/utils'
4 | import { useCallback, useContext, useEffect } from 'react'
5 |
6 | export default function KeyEventHandler({ updateInput }: { updateInput: (updateObj: WordUpdateAction) => void }) {
7 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
8 | const { state } = useContext(TypingContext)!
9 |
10 | const onKeydown = useCallback(
11 | (e: KeyboardEvent) => {
12 | const char = e.key
13 |
14 | if (isChineseSymbol(char)) {
15 | alert('您正在使用输入法，请关闭输入法。')
16 | return
17 | }
18 |
19 | if (isLegal(char) && !e.altKey && !e.ctrlKey && !e.metaKey) {
20 | updateInput({ type: 'add', value: char, event: e })
21 | }
22 | },
23 | [updateInput],
24 | )
25 |
26 | useEffect(() => {
27 | if (!state.isTyping) return
28 |
29 | window.addEventListener('keydown', onKeydown)
30 | return () => {
31 | window.removeEventListener('keydown', onKeydown)
32 | }
33 | }, [onKeydown, state.isTyping])
34 |
35 | return <>
36 | }
37 |
--------------------------------------------------------------------------------
/public/dicts/python-array.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "append()",
4 | "trans": [
5 | "用于在列表末尾添加新的对象。"
6 | ]
7 | },
8 | {
9 | "name": "buffer_info()",
10 | "trans": [
11 | "返回一个元组(address,length)以给出用于存放数组内容的缓冲区元素的当前内存地址和长度"
12 | ]
13 | },
14 | {
15 | "name": "byteswap()",
16 | "trans": [
17 | "更改基础数据的字节顺序"
18 | ]
19 | },
20 | {
21 | "name": "count()",
22 | "trans": [
23 | "用于统计某个元素在列表中出现的次数。"
24 | ]
25 | },
26 | {
27 | "name": "extend()",
28 | "trans": [
29 | "用于在列表末尾一次性追加另一个序列中的多个值（用新列表扩展原来的列表）"
30 | ]
31 | },
32 | {
33 | "name": "fromfile()",
34 | "trans": [
35 | "用于从列表中找出某个值第一个匹配项的索引位置"
36 | ]
37 | },
38 | {
39 | "name": "index()",
40 | "trans": [
41 | "用于从列表中找出某个值第一个匹配项的索引位置"
42 | ]
43 | },
44 | {
45 | "name": "insert()",
46 | "trans": [
47 | "用于将指定对象插入列表的指定位置"
48 | ]
49 | },
50 | {
51 | "name": "pop()",
52 | "trans": [
53 | "用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值"
54 | ]
55 | },
56 | {
57 | "name": "remove()",
58 | "trans": [
59 | "用于移除列表中某个值的第一个匹配项"
60 | ]
61 | },
62 | {
63 | "name": "reverse()",
64 | "trans": [
65 | "用于反向列表中元素。"
66 | ]
67 | }
68 | ]
--------------------------------------------------------------------------------
/src/pages/Gallery-N/hooks/useDictStats.ts:
--------------------------------------------------------------------------------
1 | import { db } from '@/utils/db'
2 | import { IChapterRecord } from '@/utils/db/record'
3 | import { useEffect, useState } from 'react'
4 |
5 | export function useDictStats(dictID: string, isStartLoad: boolean) {
6 | const [dictStats, setDictStats] = useState
21 | {tagList.map((option) => (
22 |
26 | `cursor-pointer whitespace-nowrap rounded-[3rem] px-4 py-2 ${
27 | checked ? 'bg-indigo-400 text-white' : 'bg-white text-gray-600 dark:bg-gray-800 dark:text-gray-200'
28 | } ${!checked && 'hover:bg-indigo-100 dark:hover:bg-gray-600'}`
29 | }
30 | >
31 |
33 | ))}
34 |
35 | {option}
32 |
12 |
28 | )
29 | }
30 |
31 | export default DictionaryComponent
32 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/WordPanel/components/SoundIcon/volume-icons/VolumeMediumIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function VolumeMediumIcon(props: React.SVGProps
13 |
14 |
15 |
16 |
27 | {dictionary.name}
17 |{dictionary.length}
18 |
19 |
20 |
25 |
26 |
25 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/WordPanel/components/InputHandler/index.tsx:
--------------------------------------------------------------------------------
1 | import KeyEventHandler from '../KeyEventHandler'
2 | import TextAreaHandler from '../TextAreaHandler'
3 | import { currentDictInfoAtom } from '@/store'
4 | import { useAtomValue } from 'jotai'
5 | import { FormEvent, useMemo } from 'react'
6 |
7 | export default function InputHandler({ updateInput }: { updateInput: (updateObj: WordUpdateAction) => void }) {
8 | const dictInfo = useAtomValue(currentDictInfoAtom)
9 |
10 | const handler = useMemo(() => {
11 | switch (dictInfo.language) {
12 | case 'en':
13 | return
26 |
32 |
33 |
36 |
41 | )
42 | }
43 |
44 | export type ConclusionBarProps = {
45 | mistakeLevel: number
46 | mistakeCount: number
47 | }
48 |
49 | export default ConclusionBar
50 |
--------------------------------------------------------------------------------
/public/dicts/Child_c++.json:
--------------------------------------------------------------------------------
1 | [{"name": "include", "trans": ["包含"]}, {"name": "iostream", "trans": ["输入输出头文件"]}, {"name": "using", "trans": ["使用"]}, {"name": "namespace", "trans": ["命名空间"]}, {"name": "std", "trans": ["标准的缩写"]}, {"name": "main", "trans": ["主函数"]}, {"name": "int", "trans": ["声明整型变量或函数"]}, {"name": "char", "trans": ["声明字符型变量或函数"]}, {"name": "double", "trans": ["声明双精度变量或函数"]}, {"name": "float", "trans": ["声明浮点型变量或函数"]}, {"name": "long", "trans": ["声明长整型变量或函数"]}, {"name": "short", "trans": ["声明短整型变量或函数"]}, {"name": "signed", "trans": ["声明有符号类型变量或函数"]}, {"name": "unsigned", "trans": ["声明无符号类型变量或函数"]}, {"name": "enum", "trans": ["声明枚举类型"]}, {"name": "struct", "trans": ["声明结构体变量或函数"]}, {"name": "union", "trans": ["声明共用体（联合）数据类型"]}, {"name": "cin", "trans": ["输入命令"]}, {"name": "cout", "trans": ["输出命令"]}, {"name": "endl", "trans": ["end line的缩写，换行"]}, {"name": "scanf", "trans": ["输入命令"]}, {"name": "printf", "trans": ["输出命令"]}, {"name": "void", "trans": ["声明函数无返回值或无参数，声明无类型指针"]}, {"name": "for", "trans": ["一种循环语句"]}, {"name": "do", "trans": ["循环语句的循环体"]}, {"name": "while", "trans": ["循环语句的循环条件"]}, {"name": "break", "trans": ["跳出当前循环"]}, {"name": "continue", "trans": ["结束当前循环，开始下一轮循环"]}, {"name": "if", "trans": ["条件语句"]}, {"name": "else", "trans": ["条件语句否定分支（与 if 连用）"]}, {"name": "goto", "trans": ["无条件跳转语句"]}, {"name": "switch", "trans": ["用于开关语句"]}, {"name": "case", "trans": ["开关语句分支"]}, {"name": "default", "trans": ["开关语句中的“其他”分支"]}, {"name": "return", "trans": ["子程序返回语句（可以带参数，也看不带参数）"]}, {"name": "static", "trans": ["声明静态变量"]}, {"name": "const", "trans": ["声明只读变量 （*注意是变量*）"]}, {"name": "sizeof", "trans": ["计算数据类型长度"]}, {"name": "typedef", "trans": ["用以给数据类型取别名（当然还有其他作用）"]}]
--------------------------------------------------------------------------------
/src/pages/Typing/components/WordPanel/components/WordSound/index.tsx:
--------------------------------------------------------------------------------
1 | import { SoundIcon, SoundIconProps } from '../SoundIcon'
2 | import styles from './index.module.css'
3 | import Tooltip from '@/components/Tooltip'
4 | import usePronunciationSound from '@/hooks/usePronunciation'
5 | import { pronunciationIsOpenAtom } from '@/store'
6 | import { useAtomValue } from 'jotai'
7 | import { useEffect, useCallback } from 'react'
8 | import { useHotkeys } from 'react-hotkeys-hook'
9 |
10 | const WordSound = ({ word, inputWord, ...rest }: WordSoundProps) => {
11 | const { play, stop, isPlaying } = usePronunciationSound(word)
12 | const pronunciationIsOpen = useAtomValue(pronunciationIsOpenAtom)
13 |
14 | useHotkeys(
15 | 'ctrl+j',
16 | () => {
17 | stop()
18 | play()
19 | },
20 | [play, stop],
21 | { enableOnFormTags: true, preventDefault: true },
22 | )
23 |
24 | useEffect(() => {
25 | if (inputWord.length === 0) {
26 | stop()
27 | play()
28 | }
29 | }, [play, inputWord, stop])
30 |
31 | useEffect(() => {
32 | return stop
33 | }, [word, stop])
34 |
35 | const handleClickSoundIcon = useCallback(() => {
36 | stop()
37 | play()
38 | }, [play, stop])
39 |
40 | return (
41 | <>
42 | {pronunciationIsOpen && (
43 |
47 | {word.trans}
48 |
49 | )}
50 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/WordPanel/components/TextAreaHandler/index.tsx:
--------------------------------------------------------------------------------
1 | import { WordUpdateAction } from '../InputHandler'
2 | import { TypingContext } from '@/pages/Typing/store'
3 | import { FormEvent, useCallback, useContext, useEffect, useRef } from 'react'
4 |
5 | export default function TextAreaHandler({ updateInput }: { updateInput: (updateObj: WordUpdateAction) => void }) {
6 | const textareaRef = useRef
28 | 如果您有相关的编程基础，可以参考
29 |
35 | 导入词典
36 |
37 | ，给项目贡献新的词典。
38 |
39 |
40 | 如果您没有相关的编程基础，可以将您的字典需求发送邮件到{' '}
41 |
42 | me@kaiyi.cool
43 |
44 | ，或者在网页底部添加我们的用户社群进行反馈。
45 |
47 |
39 |
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/src/pages/Gallery-N/LanguageTabSwitcher.tsx:
--------------------------------------------------------------------------------
1 | import { GalleryContext } from '.'
2 | import codeFlag from '@/assets/flags/code.png'
3 | import deFlag from '@/assets/flags/de.png'
4 | import enFlag from '@/assets/flags/en.png'
5 | import jpFlag from '@/assets/flags/ja.png'
6 | import { LanguageCategoryType } from '@/typings'
7 | import { RadioGroup } from '@headlessui/react'
8 | import { useCallback, useContext } from 'react'
9 |
10 | export type LanguageTabOption = {
11 | id: LanguageCategoryType
12 | name: string
13 | flag: string
14 | }
15 |
16 | const options: LanguageTabOption[] = [
17 | { id: 'en', name: '英语', flag: enFlag },
18 | { id: 'ja', name: '日语', flag: jpFlag },
19 | { id: 'de', name: '德语', flag: deFlag },
20 | { id: 'code', name: 'Code', flag: codeFlag },
21 | ]
22 |
23 | export function LanguageTabSwitcher() {
24 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
25 | const { state, setState } = useContext(GalleryContext)!
26 |
27 | const onChangeTab = useCallback(
28 | (tab: string) => {
29 | setState((draft) => {
30 | draft.currentLanguageTab = tab as LanguageCategoryType
31 | })
32 | },
33 | [setState],
34 | )
35 |
36 | return (
37 |
41 | {groupedDictsByTag[currentTag].map((dict) => (
42 | onClickDict(dict)} />
43 | ))}
44 |
45 |
39 | {options.map((option) => (
40 |
41 | {({ checked }) => (
42 |
48 | ))}
49 |
50 |
43 | 
44 |
46 | )}
47 | {option.name}
45 |
38 | {currentWord && (
39 | <>
40 |
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
45 | {percentage !== null && (
46 |
51 | )}
52 | {remark}
53 | {caption}
54 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/src/pages/Typing/components/ShareButton/index.tsx:
--------------------------------------------------------------------------------
1 | import SharePicDialog from './SharePicDialog'
2 | import { recordShareAction } from '@/utils'
3 | import { flip, offset, shift, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react'
4 | import { useCallback, useMemo, useState } from 'react'
5 | import IconShare2 from '~icons/tabler/share-2'
6 |
7 | export default function ShareButton() {
8 | const [isShowSharePanel, setIsShowSharePanel] = useState(false)
9 |
10 | const [showTranslation, setShowTranslation] = useState(true)
11 | const { x, y, strategy, refs, context } = useFloating({
12 | open: showTranslation,
13 | onOpenChange: setShowTranslation,
14 | middleware: [offset(11), shift(), flip()],
15 | placement: 'top-start',
16 | })
17 | const hover = useHover(context)
18 | const role = useRole(context, { role: 'tooltip' })
19 | const { getReferenceProps, getFloatingProps } = useInteractions([hover, role])
20 |
21 | const randomChoose = useMemo(
22 | () => ({
23 | picRandom: Math.random(),
24 | promoteRandom: Math.random(),
25 | }),
26 | [],
27 | )
28 |
29 | const onClickShare = useCallback(() => {
30 | recordShareAction('open')
31 | setIsShowSharePanel(true)
32 | }, [])
33 |
34 | return (
35 | <>
36 | {isShowSharePanel &&
61 | ✨ 分享你的成绩给朋友
62 |
63 | )}
64 |
65 | )
66 | }
67 |
--------------------------------------------------------------------------------
/src/pages/Gallery/DictionaryCard.tsx:
--------------------------------------------------------------------------------
1 | import { currentChapterAtom, currentDictIdAtom } from '@/store'
2 | import { Dictionary } from '@/typings'
3 | import { useAtom, useSetAtom } from 'jotai'
4 | import React, { useEffect, useRef } from 'react'
5 | import IconCheckCircle from '~icons/heroicons/check-circle-solid'
6 |
7 | const DictionaryCard: React.FC
36 |
55 |
37 |
46 | 38 | 词典选择 39 |
40 |
41 | {groups.map(([name, items]) => (
42 |
45 |
47 |
54 | 48 | 章节选择 49 |
50 |
51 |
53 |
39 |
66 | )
67 | }
68 |
--------------------------------------------------------------------------------
/docs/toBuildDict.md:
--------------------------------------------------------------------------------
1 | # 如何导入新的词典 📚
2 |
3 | 注意，我们的词典主要来源于社区贡献。当你想要导入新的词典时，最好准备好词典的源文件，以便我们能够更好的帮助你。
4 |
5 | ## 0. 交给我们！🤝
6 |
7 | ### 0.1 如果你没有任何编程基础 🚫💻
8 |
9 | 我们推荐你加入 qwerty learner 社区群，在群中反映你的需求，我们的开发者会帮助你导入词典。
10 |
11 | 
12 |
13 | ### 0.2 如果你不会编程，但会使用 github🐙
14 |
15 | 我们推荐你以“Dictionary Request”为开头发起 Issue，描述你的词典需求并提供词典来源。
16 |
17 | ## 1. 亲自动手！🛠️
18 |
19 | ### 1.1 词典的目标文件格式 📄
20 |
21 | 词典的文件格式是 `词典名.json` ，其内容结构应当是:
22 |
23 | ```json
24 | [
25 | {
26 | "name" : "xxx" ,
27 | "trans" : ["xxx", "xxx",...]
28 | },
29 | ...
30 | ]
31 | ```
32 |
33 | 例如:
34 |
35 | ```json
36 | { "name": "file", "trans": ["n. 档案,公文箱,锉刀,[计算机] 文件 vt. 列队行进,归档,申请"] },
37 | {
38 | "name": "command",
39 | "trans": [
40 | "n.命令，指挥； 司令部，指挥部； [计算机]指令； 控制力 vt.指挥，控制，命令； 命令； 应得，值得 vi.给出命令； 命令，指令 adj.指挥的，根据命令（或要求）而作的"
41 | ]
42 | },
43 | { "name": "use", "trans": ["n. 运用,用法,使用权,适用 vt. 使用,利用,对待 vi. 吸毒"] },
44 | { "name": "program", "trans": ["n. 节目(单),程序,计划 vt. 规划,拟定计划,制作节目"] },
45 | { "name": "line", "trans": ["n. 行,线,航线,场界,皱纹,家族 vt. &vi. 用做衬里,排成一行,顺...排列 vi. 排成一行,顺...排列,划线于"] },
46 | { "name": "if", "trans": ["conj. 如果，是否，即使 n. 条件,设想"] },
47 |
48 | ```
49 |
50 | #### 1.1.0 如何将词典的源文件转换为目标文件格式？🔄
51 |
52 | 由于词典的源文件格式、来源各异，我们无法为你提供统一的转换方法，但是我们可以提供一些思路：
53 |
54 | #### 1.1.1 你可以将部分词典源文件的内容发送给 ChatGPT 并描述需求，让 ChatGPT 生成转换脚本 🤖
55 |
56 | #### 1.1.2 你也可以使用在线工具将词典源文件转换为目标文件格式，此类在线工具有很多，如
40 |
65 | 45 | {dictionary.name} 46 |
47 |{dictionary.description}
48 |{dictionary.length} 词
49 |
50 | {progress > 0 && (
51 |
56 |
61 | )}
62 | 
63 |
64 |
38 |
75 | )
76 | }
77 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "qwerty-learner",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": ".",
6 | "dependencies": {
7 | "@floating-ui/react": "^0.20.1",
8 | "@headlessui/react": "^1.7.13",
9 | "@headlessui/tailwindcss": "^0.1.2",
10 | "@radix-ui/react-progress": "^1.0.2",
11 | "@radix-ui/react-scroll-area": "^1.0.3",
12 | "@radix-ui/react-slider": "^1.1.1",
13 | "classnames": "^2.3.2",
14 | "dexie": "^3.2.3",
15 | "dexie-export-import": "^4.0.7",
16 | "dexie-react-hooks": "^1.1.3",
17 | "file-saver": "^2.0.5",
18 | "howler": "^2.2.3",
19 | "html-to-image": "^1.11.11",
20 | "immer": "^9.0.21",
21 | "jotai": "^2.0.3",
22 | "mixpanel-browser": "^2.45.0",
23 | "pako": "^2.1.0",
24 | "react": "^18.2.0",
25 | "react-app-polyfill": "^3.0.0",
26 | "react-dom": "^18.2.0",
27 | "react-hotkeys-hook": "^4.3.7",
28 | "react-router-dom": "^6.8.2",
29 | "react-timer-hook": "^3.0.5",
30 | "source-map-explorer": "^2.5.2",
31 | "swr": "^2.0.4",
32 | "typescript": "^4.0.3",
33 | "use-immer": "^0.9.0",
34 | "use-sound": "^4.0.1"
35 | },
36 | "scripts": {
37 | "dev": "vite",
38 | "start": "vite",
39 | "build": "cross-env CI=false vite build --base=./",
40 | "test": "echo \"No tests\"",
41 | "lint": "eslint .",
42 | "prettier": "prettier --write .",
43 | "prepare": "husky install"
44 | },
45 | "lint-staged": {
46 | "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
47 | "prettier --write"
48 | ]
49 | },
50 | "browserslist": {
51 | "production": [
52 | ">0.2%",
53 | "not dead",
54 | "not op_mini all"
55 | ],
56 | "development": [
57 | "last 1 chrome version",
58 | "last 1 firefox version",
59 | "last 1 safari version"
60 | ]
61 | },
62 | "devDependencies": {
63 | "@iconify/json": "^2.2.56",
64 | "@svgr/core": "^7.0.0",
65 | "@svgr/plugin-jsx": "^7.0.0",
66 | "@trivago/prettier-plugin-sort-imports": "^4.1.1",
67 | "@types/file-saver": "^2.0.5",
68 | "@types/howler": "^2.2.3",
69 | "@types/mixpanel-browser": "^2.38.1",
70 | "@types/node": "18.14.6",
71 | "@types/pako": "^2.0.0",
72 | "@types/react": "^18.0.28",
73 | "@types/react-dom": "^18.0.11",
74 | "@types/react-router-dom": "^5.1.7",
75 | "@vitejs/plugin-react": "^3.1.0",
76 | "cross-env": "^7.0.3",
77 | "eslint-config-prettier": "^8.7.0",
78 | "eslint-config-react-app": "^7.0.1",
79 | "eslint-plugin-prettier": "^4.2.1",
80 | "eslint-plugin-react": "^7.32.2",
81 | "eslint-plugin-react-hooks": "^4.6.0",
82 | "git-last-commit": "^1.0.1",
83 | "husky": "^8.0.0",
84 | "lint-staged": "^13.1.2",
85 | "prettier": "^2.8.4",
86 | "prettier-plugin-tailwindcss": "^0.2.7",
87 | "rollup-plugin-visualizer": "^5.9.0",
88 | "tailwindcss": "^3.3.1",
89 | "autoprefixer": "^10.4.13",
90 | "eslint": "^8.35.0",
91 | "postcss": "^8.4.21",
92 | "@tailwindcss/forms": "^0.5.3",
93 | "@tailwindcss/postcss7-compat": "^2.2.17",
94 | "typescript-plugin-css-modules": "^5.0.1",
95 | "unplugin-icons": "^0.16.1",
96 | "vite": "^4.1.1"
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/public/dicts/python-file.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "close()",
4 | "trans": [
5 | "close() 方法用于关闭一个已打开的文件。关闭后的文件不能再进行读写操作， 否则会触发 ValueError 错误。 close() 方法允许调用多次。当 file 对象，被引用到操作另外一个文件时，Python 会自动关闭之前的 file 对象。 使用 close() 方法关闭文件是一个好的习惯。"
6 | ]
7 | },
8 | {
9 | "name": "fileno()",
10 | "trans": [
11 | "fileno() 方法返回一个整型的文件描述符(file descriptor FD 整型)，可用于底层操作系统的 I/O 操作。"
12 | ]
13 | },
14 | {
15 | "name": "flush()",
16 | "trans": [
17 | "flush() 方法是用来刷新缓冲区的，即将缓冲区中的数据立刻写入文件，同时清空缓冲区，不需要是被动的等待输出缓冲区写入。一般情况下，文件关闭后会自动刷新缓冲区，但有时你需要在关闭前刷新它，这时就可以使用 flush() 方法。"
18 | ]
19 | },
20 | {
21 | "name": "isatty()",
22 | "trans": [
23 | "isatty() 方法检测文件是否连接到一个终端设备，如果是返回 True，否则返回 False。"
24 | ]
25 | },
26 | {
27 | "name": "next()",
28 | "trans": [
29 | "next() 方法在文件使用迭代器时会使用到，在循环中，next()方法会在每次循环中调用，该方法返回文件的下一行，如果到达结尾(EOF)，则触发 StopIteration。"
30 | ]
31 | },
32 | {
33 | "name": "read()",
34 | "trans": [
35 | "read() 方法用于从文件读取指定的字节数，如果未给定或为负则读取所有。"
36 | ]
37 | },
38 | {
39 | "name": "readline()",
40 | "trans": [
41 | "readline() 方法用于从文件读取整行，包括 '\n' 字符。如果指定了一个非负数的参数，则返回指定大小的字节数，包括 '\n' 字符。"
42 | ]
43 | },
44 | {
45 | "name": "readlines()",
46 | "trans": [
47 | "readlines() 方法用于读取所有行(直到结束符 EOF)并返回列表，若给定sizeint>0，返回总和大约为sizeint字节的行, 实际读取值可能比sizhint较大, 因为需要填充缓冲区。如果碰到结束符 EOF 则返回空字符串。"
48 | ]
49 | },
50 | {
51 | "name": "seek()",
52 | "trans": [
53 | "seek() 方法用于移动文件读取指针到指定位置。"
54 | ]
55 | },
56 | {
57 | "name": "tell()",
58 | "trans": [
59 | "tell() 方法返回文件的当前位置，即文件指针当前位置。"
60 | ]
61 | },
62 | {
63 | "name": "truncate()",
64 | "trans": [
65 | "truncate() 方法用于截断文件，如果指定了可选参数 size，则表示截断文件为 size 个字符。 如果没有指定 size，则从当前位置起截断；截断之后 size 后面的所有字符被删除。"
66 | ]
67 | },
68 | {
69 | "name": "write()",
70 | "trans": [
71 | "write() 方法用于向文件中写入指定字符串。在文件关闭前或缓冲区刷新前，字符串内容存储在缓冲区中，这时你在文件中是看不到写入的内容的。"
72 | ]
73 | },
74 | {
75 | "name": "writelines()",
76 | "trans": [
77 | "writelines() 方法用于向文件中写入一序列的字符串。这一序列字符串可以是由迭代对象产生的，如一个字符串列表。 换行需要制定换行符\n。"
78 | ]
79 | },
80 | {
81 | "name": "xreadlines()",
82 | "trans": [
83 | "返回一个生成器，来循环操作文件的每一行。循环使用时和readlines基本一样，但是直接打印就不同"
84 | ]
85 | },
86 | {
87 | "name": "closed",
88 | "trans": [
89 | "如果文件已被关闭返回 True，否则返回 False。"
90 | ]
91 | },
92 | {
93 | "name": "encoding()",
94 | "trans": [
95 | " encoding 指定的编码格式编码字符串。errors参数可以指定不同的错误处理方案。"
96 | ]
97 | },
98 | {
99 | "name": "errors",
100 | "trans": [
101 | "如果该文件无法被打开，会被抛出"
102 | ]
103 | },
104 | {
105 | "name": "name",
106 | "trans": [
107 | "文件名"
108 | ]
109 | },
110 | {
111 | "name": "mode",
112 | "trans": [
113 | "文件打开模式"
114 | ]
115 | },
116 | {
117 | "name": "newlines",
118 | "trans": [
119 | "表示文件所采用的分隔符"
120 | ]
121 | },
122 | {
123 | "name": "softspace",
124 | "trans": [
125 | "文件末尾强制加空格标志,为0表示在输出一数据后，要再加上一个空格符，为1表示不加，这个属性一般用不到"
126 | ]
127 | }
128 | ]
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 |
16 |
40 |
41 |
39 | 章节乱序
40 | 开启后，每次练习章节中单词会随机排序。下一章节生效
41 |
50 |
42 |
43 |
44 |
45 | {`随机已${
46 | randomConfig.isOpen ? '开启' : '关闭'
47 | }`}
48 |
49 |
51 | 是否忽略大小写
52 | 开启后，输入时不区分大小写，如输入“hello”和“Hello”都会被认为是正确的
53 |
62 |
54 |
55 |
56 |
57 | {`忽略大小写已${
58 | isIgnoreCase ? '开启' : '关闭'
59 | }`}
60 |
61 |
63 | 是否允许选择文本
64 | 开启后，可以通过鼠标选择文本
65 |
74 |
66 |
67 |
68 |
69 | {`选择文本已${
70 | isTextSelectable ? '开启' : '关闭'
71 | }`}
72 |
73 |
53 |
76 |
54 | 开关按键音
55 |
64 |
56 |
57 |
58 |
59 | {`发音已${
60 | keySoundsConfig.isOpen ? '开启' : '关闭'
61 | }`}
62 |
63 |
65 | 开关效果音
66 |
75 |
67 |
68 |
69 |
70 | {`发音已${
71 | hintSoundsConfig.isOpen ? '开启' : '关闭'
72 | }`}
73 |
74 |
69 |
93 |
71 |
92 |
72 |
77 |
78 |
84 |
86 | {/* todo: 增加导航 */}
87 | {/*
91 |
73 |
76 |
79 | {groupedByCategoryAndTag.map(([category, groupeByTag]) => (
80 |
83 |
88 |
*/}
90 |
58 | 
59 |
60 | 收藏快捷键cmd + d
61 |
62 |
63 | ) : (
64 |
65 |
73 |
74 | )}
75 |
76 | )
77 | }, [isCounting, onClickWantStar])
78 |
79 | return (
80 |
92 |
108 |
93 | {isCounting && (
94 |
95 | {countdown}s
96 | 后自动关闭
97 |
98 | )}
99 |
102 |
103 |
104 | 坚持练习，提高语言能力。将 「Qwerty Learner」保存到收藏夹，永不迷失！
105 |
106 | {content}
107 |