diff --git a/components.d.ts b/components.d.ts index 696bf8b4..bede9ed4 100644 --- a/components.d.ts +++ b/components.d.ts @@ -9,7 +9,6 @@ declare module 'vue' { export interface GlobalComponents { Add: typeof import('./src/components/Toolbar/Add.vue')['default'] AddDict: typeof import('./src/components/Add/AddDict.vue')['default'] - ArticleItem: typeof import('./src/components/Article/ArticleItem.vue')['default'] ArticleList: typeof import('./src/components/Article/ArticleList.vue')['default'] ArticlePanel: typeof import('./src/components/Practice/PracticeArticle/ArticlePanel.vue')['default'] Backgorund: typeof import('./src/components/Backgorund.vue')['default'] @@ -47,6 +46,7 @@ declare module 'vue' { MiniModal: typeof import('./src/components/MiniModal.vue')['default'] Modal: typeof import('./src/components/Modal/Modal.vue')['default'] Options: typeof import('./src/components/Practice/Options.vue')['default'] + Panel: typeof import('./src/components/Practice/Panel.vue')['default'] PopConfirm: typeof import('./src/components/PopConfirm.vue')['default'] Practice: typeof import('./src/components/Practice/Practice.vue')['default'] PracticeArticle: typeof import('./src/components/Practice/PracticeArticle/PracticeArticle.vue')['default'] @@ -61,7 +61,6 @@ declare module 'vue' { Typing: typeof import('./src/components/Practice/PracticeWord/Typing.vue')['default'] TypingArticle: typeof import('./src/components/Practice/PracticeArticle/TypingArticle.vue')['default'] TypingWord: typeof import('./src/components/Practice/PracticeWord/TypingWord.vue')['default'] - TypingWord2: typeof import('./src/components/Practice/PracticeWord/TypingWord2.vue')['default'] VolumeIcon: typeof import('./src/components/VolumeIcon.vue')['default'] VolumeSetting: typeof import('./src/components/Toolbar/VolumeSetting.vue')['default'] WordItem: typeof import('./src/components/WordItem.vue')['default'] diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index bb4c46ad..59479037 100644 --- a/src/assets/css/style.scss +++ b/src/assets/css/style.scss @@ -129,9 +129,37 @@ footer { justify-content: space-between; } - .flex-center { display: flex; align-items: center; justify-content: center; +} + +.current-practice-dict { + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: $space; + box-sizing: border-box; + + header { + padding: 8rem $space; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14rem; + color: black; + + .left { + display: flex; + align-items: center; + gap: 10rem; + } + } + + .scroll { + padding: 0 $space; + flex: 1; + overflow: auto; + } } \ No newline at end of file diff --git a/src/components/Practice/PracticeArticle/ArticlePanel.vue b/src/components/Practice/Panel.vue similarity index 96% rename from src/components/Practice/PracticeArticle/ArticlePanel.vue rename to src/components/Practice/Panel.vue index e26c5e80..cd4dcdf5 100644 --- a/src/components/Practice/PracticeArticle/ArticlePanel.vue +++ b/src/components/Practice/Panel.vue @@ -2,9 +2,9 @@ import {useBaseStore} from "@/stores/base.ts" import WordList from "@/components/WordList.vue" -import {$computed, $ref} from "vue/macros" +import {$ref} from "vue/macros" import {computed, provide, watch} from "vue" -import {Dict, DictType, Word} from "@/types.ts" +import {Dict, DictType} from "@/types.ts" import PopConfirm from "@/components/PopConfirm.vue" import BaseButton from "@/components/BaseButton.vue"; import {useSettingStore} from "@/stores/setting.ts"; @@ -46,7 +46,7 @@ function changeIndex(i: number, dict: Dict) { v-if="!settingStore.showToolbar"/>
-
当前
+
当前
{{ store.collect.name }}
{{ store.wrong.name }}
{{ store.skip.name }}
@@ -232,10 +232,6 @@ $header-height: 50rem; font-weight: bold; } } - - .current { - word-break: break-word; - } } } diff --git a/src/components/Practice/PracticeArticle/PracticeArticle.vue b/src/components/Practice/PracticeArticle/PracticeArticle.vue index 124ea6b1..bbac0b1e 100644 --- a/src/components/Practice/PracticeArticle/PracticeArticle.vue +++ b/src/components/Practice/PracticeArticle/PracticeArticle.vue @@ -4,7 +4,7 @@ import TypingArticle from "./TypingArticle.vue"; import {Article, ArticleWord, DefaultArticle, DefaultWord, DisplayStatistics, TranslateType, Word} from "@/types.ts"; import {cloneDeep} from "lodash-es"; import TypingWord from "@/components/Practice/PracticeWord/TypingWord.vue"; -import ArticlePanel from "./ArticlePanel.vue"; +import Panel from "../Panel.vue"; import {onMounted, watch} from "vue"; import {renewSectionTexts, renewSectionTranslates} from "@/hooks/translate.ts"; import {MessageBox} from "@/utils/MessageBox.tsx"; @@ -233,9 +233,9 @@ function nextWord(word: ArticleWord) {
- -
+
@@ -254,7 +254,7 @@ function nextWord(word: ArticleWord) {
- +
\ No newline at end of file diff --git a/src/components/Practice/PracticeWord/TypingWord.vue b/src/components/Practice/PracticeWord/TypingWord.vue index 0cd2f515..9c0edadb 100644 --- a/src/components/Practice/PracticeWord/TypingWord.vue +++ b/src/components/Practice/PracticeWord/TypingWord.vue @@ -13,6 +13,10 @@ import Tooltip from "@/components/Tooltip.vue"; import Options from "@/components/Practice/Options.vue"; import Typing from "@/components/Practice/PracticeWord/Typing.vue"; import WordPanel from "@/components/Practice/PracticeWord/WordPanel.vue"; +import ArticleList from "@/components/Article/ArticleList.vue"; +import Panel from "@/components/Practice/Panel.vue"; +import IconWrapper from "@/components/IconWrapper.vue"; +import WordList from "@/components/WordList.vue"; interface IProps { words: Word[], @@ -196,6 +200,7 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
- +
+ +
+
+
+ + + + + +
+ {{ store.currentDict.name + ` 第${store.currentDict.chapterIndex + 1}章` }} +
+
+
+ 共{{ data.words.length }}词 +
+
+ +
+ +
@@ -270,6 +300,17 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp) } } - } + +$article-width: 50vw; + +.word-panel-wrapper { + position: fixed; + left: 0; + top: 10rem; + z-index: 1; + margin-left: calc(50% + ($article-width / 2) + $space); + height: calc(100% - 20rem); +} + \ No newline at end of file diff --git a/src/components/WordList.vue b/src/components/WordList.vue index ea73a465..e53ca159 100644 --- a/src/components/WordList.vue +++ b/src/components/WordList.vue @@ -64,10 +64,9 @@ watch(() => props.list, () => { gap: 12rem; width: 100%; height: 100%; - padding: 0 $space; - overflow-y: auto; - overflow-x: hidden; box-sizing: border-box; + padding: 0 $space; + overflow: auto; .item { background: var(--color-header-bg); diff --git a/src/stores/base.ts b/src/stores/base.ts index ba2e7e36..997c8551 100644 --- a/src/stores/base.ts +++ b/src/stores/base.ts @@ -63,10 +63,10 @@ export const useBaseStore = defineStore('base', { } ], current: { - // dictType: DictType.word, - // index: 1, - dictType: DictType.article, - index: 0, + dictType: DictType.word, + index: 1, + // dictType: DictType.article, + // index: 0, editIndex: 0, repeatNumber: 0, },