AMAZEHOME/TypeWords
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename dir

Browse Source
This commit is contained in:
zyronon
2023-11-19 01:43:48 +08:00
parent 642e1e3dee
commit 79b4ed679f
19 changed files with 52 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -61,7 +61,7 @@ onMounted(() => {
init()
})
useStartKeyboardEventListener()
// useStartKeyboardEventListener()
</script>

388
src/components/Add/AddDict.vue
View File

@@ -1,388 +0,0 @@
<script setup lang="ts">
import WordList from "@/components/list/WordList.vue";
import {$computed, $ref} from "vue/macros";
import Slide from "@/components/Slide.vue";
import DictList from "@/components/list/DictList.vue";
import {Icon} from "@iconify/vue";
import {useBaseStore} from "@/stores/base.ts";
import {useSettingStore} from "@/stores/setting.ts";
import {useRuntimeStore} from "@/stores/runtime.ts";
import {useDisableEventListener} from "@/hooks/event.ts";
import {Dict, DictType, languageCategoryOptions, Sort} from "@/types.ts";
import {onMounted, reactive, watch} from "vue";
import {FormInstance, FormRules} from "element-plus";
import {dictionaryResources} from "@/assets/dictionary.ts";
import {cloneDeep} from "lodash-es";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import ChapterList from "@/components/list/ChapterList.vue";
let data = $ref({
words: [],
index: 0
})
const store = useBaseStore()
const settingStore = useSettingStore()
const runtimeStore = useRuntimeStore()
const emit = defineEmits([
'close',
])
let step = $ref(0)
let isEdit = $ref(true)
useDisableEventListener()
let list = $computed(() => {
return store.myDictList.filter(v => v.type === DictType.customArticle)
.concat([
store.simple,
store.wrong,
store.collect
])
.concat([{name: '',} as any])
})
let form = reactive({
id: '',
name: '123',
description: '',
category: '',
tags: [],
languageCategory: '',
language: '',
})
let wordForm = reactive({
name: '',
translate: '',
usphone: '',
ukphone: '',
})
let languageCategoryList = []
let categoryList = {}
let tagList = {}
const ruleFormRef = $ref<FormInstance>()
const rules = reactive<FormRules>({
name: [
{required: true, message: '请输入名称', trigger: 'blur'},
{max: 20, message: '名称不能超过20个字符', trigger: 'blur'},
],
category: [{required: true, message: '请选择', trigger: 'change'}],
tags: [{required: true, message: '请选择', trigger: 'change'}],
languageCategory: [{required: true, message: '请选择', trigger: 'change'}],
})
watch(() => form.languageCategory, () => form.category = '')
watch(() => form.category, () => form.tags = [])
onMounted(() => {
dictionaryResources.map(v => {
// if (!languageCategoryList.find(w => w === v.languageCategory)) {
// languageCategoryList.push(v.languageCategory)
// }
if (categoryList[v.language]) {
if (!categoryList[v.language].find(w => w === v.category)) {
categoryList[v.language].push(v.category)
}
} else {
categoryList[v.language] = [v.category]
}
if (tagList[v.category]) {
tagList[v.category] = Array.from(new Set(tagList[v.category].concat(v.tags)))
} else {
tagList[v.category] = v.tags
}
})
console.log('languageCategoryList', languageCategoryList)
console.log('categoryList', categoryList)
console.log('tagList', tagList)
})
function selectDict(dict: Dict) {
runtimeStore.editDict = cloneDeep(dict)
isEdit = false
step = 1
}
async function onSubmit() {
await ruleFormRef.validate((valid, fields) => {
if (valid) {
let data = {
sort: Sort.normal,
type: DictType.customArticle,
originWords: [],
words: [],
chapterWordNumber: 30,
chapterWords: [],
chapterIndex: 0,
chapterWordIndex: 0,
statistics: [],
articles: [],
url: '',
...form,
}
if (form.id) {
let rIndex = store.myDictList.findIndex(v => v.id === form.id)
runtimeStore.editDict = data
store.myDictList[rIndex] = cloneDeep(data)
isEdit = false
} else {
if (store.myDictList.find(v => v.name === form.name)) {
return ElMessage.warning('已有相同名称词典！')
} else {
runtimeStore.editDict = data
store.myDictList.push(cloneDeep(data))
isEdit = false
console.log('submit!', data)
}
}
} else {
ElMessage.warning('请填写完整')
}
})
}
function close() {
emit('close')
}
</script>
<template>
<div id="AddWordDialog">
<Slide slide-count="2" :step="step">
<div class="page dict-list-page">
<header>
<div class="title">
我的词典
</div>
<Icon @click="close"
class="hvr-grow pointer"
width="20" color="#929596"
icon="ion:close-outline"/>
</header>
<div class="list">
<DictList
@add="step = 1;isEdit = true"
@selectDict="selectDict"
:list="list"/>
</div>
</div>
<div class="page add-page">
<header>
<div class="left" @click.stop="step = 0">
<Icon icon="octicon:arrow-left-24" class="go" width="20"/>
<div class="title">
词典详情
</div>
</div>
<Icon @click="close"
class="hvr-grow pointer"
width="20" color="#929596"
icon="ion:close-outline"/>
</header>
<div class="detail" v-if="!isEdit">
<div class="dict">
<div class="info">
<div class="name">{{ runtimeStore.editDict.name }}</div>
<div class="desc">{{ runtimeStore.editDict.description }}</div>
<div class="num">总文章：{{ runtimeStore.editDict.articles.length }}篇</div>
<div class="num">创建日期：-</div>
<div class="num">花费时间：-</div>
<div class="num">累积错误：-</div>
<div class="num">进度：
<el-progress :percentage="10"
:stroke-width="8"
:show-text="false"/>
</div>
</div>
<div class="add" v-if="false">
<el-form
ref="ruleFormRef"
:rules="rules"
:model="wordForm"
label-width="60px">
<el-form-item label="单词" prop="name">
<el-input v-model="wordForm.name"/>
</el-form-item>
<el-form-item label="翻译">
<el-input v-model="wordForm.translate" type="textarea"/>
</el-form-item>
<el-form-item label="音标">
<el-input v-model="wordForm.ukphone"/>
</el-form-item>
<el-form-item>
<el-button @click="step = 0">返回</el-button>
<el-button type="primary" @click="onSubmit">确定</el-button>
</el-form-item>
</el-form>
</div>
</div>
<div class="list">
<div class="list-header">
<div class="name">{{ runtimeStore.editDict.name }}</div>
<div class="flex-center gap10">
<div class="name">{{ runtimeStore.editDict.words.length }}个单词</div>
<Icon @click="emitter.emit(EventKey.openArticleListModal)"
class="hvr-grow pointer"
width="24" color="#929596"
icon="mi:add"/>
</div>
</div>
<WordList
class="word-list"
:is-active="true"
@change="(i:number) => data.index = i"
:list="runtimeStore.editDict.words"
:activeIndex="data.index"/>
</div>
</div>
<div class="edit" v-else>
<el-form
ref="ruleFormRef"
:rules="rules"
:model="form"
label-width="120px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="form.description" type="textarea"/>
</el-form-item>
<el-form-item label="分类" prop="languageCategory">
<el-select
v-model="form.languageCategory" placeholder="请选择选项">
<el-option :label="i.name" :value="i.id" v-for="i in languageCategoryOptions"/>
</el-select>
</el-form-item>
<el-form-item label="用途" prop="category">
<el-select v-model="form.category" placeholder="请选择选项">
<el-option :label="i" :value="i" v-for="i in categoryList[form.languageCategory]"/>
</el-select>
</el-form-item>
<el-form-item label="标签" prop="tags">
<el-select
multiple
v-model="form.tags" placeholder="请选择选项">
<el-option :label="i" :value="i" v-for="i in tagList[form.category]"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="step = 0">返回</el-button>
<el-button type="primary" @click="onSubmit">确定</el-button>
</el-form-item>
</el-form>
</div>
</div>
</Slide>
</div>
</template>
<style scoped lang="scss">
@import "@/assets/css/variable";
#AddWordDialog {
position: fixed;
width: 700rem;
height: 70vh;
left: 50%;
top: 50%;
transform: translate3D(-50%, -50%, 0);
z-index: 9999999;
background: var(--color-second-bg);
$header-height: 60rem;
header {
color: var(--color-font-3);
display: flex;
justify-content: space-between;
align-items: center;
height: $header-height;
.left {
cursor: pointer;
display: flex;
gap: 10rem;
align-items: center;
}
}
.dict-list-page {
padding: 0 var(--space);
box-sizing: border-box;
}
.add-page {
color: var(--color-font-1);
//display: flex;
//flex-direction: column;
header {
padding: 0 var(--space);
}
.detail {
flex: 1;
height: calc(100% - $header-height);
display: flex;
position: relative;
.dict {
width: 50%;
border-radius: 10rem;
background: var(--color-second-bg);
color: var(--color-font-1);
padding-left: var(--space);
box-sizing: border-box;
.info {
border-radius: 8rem;
background: gray;
padding: 20rem;
.name {
font-size: 28rem;
margin-bottom: 10rem;
}
.desc {
font-size: 18rem;
margin-bottom: 30rem;
}
}
}
.list {
flex: 1;
display: flex;
flex-direction: column;
font-size: 14rem;
padding-bottom: 20rem;
.list-header {
min-height: 50rem;
padding: 10rem 24rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16rem;
color: var(--color-font-3);
.name {
font-size: 18rem;
}
}
}
}
}
}
</style>

6
src/components/Article/EditBatchArticleModal.vue
View File

@@ -9,7 +9,7 @@ import {useBaseStore} from "@/stores/base.ts";
import {$computed, $ref} from "vue/macros";
import List from "@/components/list/List.vue";
import {v4 as uuidv4} from 'uuid';
import Modal from "@/components/Modal/Modal.vue";
import Dialog from "@/components/dialog/Dialog.vue";
import EditArticle from "@/components/Article/EditArticle.vue";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import {useDisableEventListener} from "@/hooks/event.ts";
@@ -231,7 +231,7 @@ function saveAndNext(val: Article) {
</script>
<template>
<Modal
<Dialog
v-model="show"
:full-screen="true"
:header="false"
@@ -273,7 +273,7 @@ function saveAndNext(val: Article) {
@saveAndNext="saveAndNext"
:article="article"/>
</div>
</Modal>
</Dialog>
</template>
<style scoped lang="scss">

6
src/components/Article/EditSingleArticleModal.vue
View File

@@ -2,7 +2,7 @@
import {Article, DefaultArticle} from "@/types.ts";
import {cloneDeep} from "lodash-es";
import Modal from "@/components/Modal/Modal.vue";
import Dialog from "@/components/dialog/Dialog.vue";
import EditArticle from "@/components/Article/EditArticle.vue";
interface IProps {
@@ -21,7 +21,7 @@ const emit = defineEmits<{
</script>
<template>
<Modal
<Dialog
:header="false"
:model-value="props.modelValue"
:full-screen="true"
@@ -32,7 +32,7 @@ const emit = defineEmits<{
@save="val => emit('save',val)"
/>
</div>
</Modal>
</Dialog>
</template>
<style scoped lang="scss">

6
src/components/Practice/Practice.vue
View File

@@ -15,8 +15,8 @@ import PracticeArticle from "@/components/Practice/PracticeArticle/PracticeArtic
import PracticeWord from "@/components/Practice/PracticeWord/PracticeWord.vue";
import {ShortcutKey} from "@/types.ts";
import useTheme from "@/hooks/useTheme.ts";
import SettingModal from "@/components/Modal/SettingModal.vue";
import DictModal from "@/components/Modal/DictDialog/index.vue";
import SettingDialog from "@/components/dialog/SettingDialog.vue";
import DictModal from "@/components/dialog/DictDiglog.vue";
const practiceStore = usePracticeStore()
const store = useBaseStore()
@@ -166,7 +166,7 @@ onUnmounted(() => {
</div>
<!-- <AddWordDialog></AddWordDialog>-->
<DictModal/>
<SettingModal v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
<SettingDialog v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
<Statistics/>
</template>

6
src/components/Practice/Statistics.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import Modal from "@/components/Modal/Modal.vue";
import Dialog from "@/components/dialog/Dialog.vue";
import {useBaseStore} from "@/stores/base.ts";
import Ring from "@/components/Ring.vue";
import Tooltip from "@/components/Tooltip.vue";
@@ -53,7 +53,7 @@ const isEnd = $computed(() => {
</script>
<template>
<Modal
<Dialog
:header="false"
v-model="statModalIsOpen">
<div class="statistics">
@@ -122,7 +122,7 @@ const isEnd = $computed(() => {
</BaseButton>
</div>
</div>
</Modal>
</Dialog>
<Fireworks v-if="statModalIsOpen"/>
</template>
<style scoped lang="scss">

3
src/components/Toolbar/Add.vue
View File

@@ -3,9 +3,7 @@
import {Icon} from "@iconify/vue";
import IconWrapper from "@/components/IconWrapper.vue";
import Tooltip from "@/components/Tooltip.vue";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import EditBatchArticleModal from "@/components/Article/EditBatchArticleModal.vue";
import AddDict from "@/components/Add/AddDict.vue";
import {$ref} from "vue/macros";
let show = $ref(false)
@@ -26,7 +24,6 @@ function toggle() {
</IconWrapper>
</Tooltip>
<EditBatchArticleModal/>
<AddDict v-if="show" @close="show = false"/>
</div>
</template>

6
src/components/Toolbar/ChapterName.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import {useBaseStore} from "@/stores/base.ts";
import MiniModal from "@/components/Modal/MiniModal.vue";
import MiniDialog from "@/components/dialog/MiniDialog.vue";
import {useWindowClick} from "@/hooks/event.ts";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import {nextTick, watch} from "vue";
@@ -45,7 +45,7 @@ watch(() => show, n => {
>
{{ store.chapterName }}
</div>
<MiniModal
<MiniDialog
v-model="show"
@mouseenter="toggle(true)"
@mouseleave="toggle(false)"
@@ -60,7 +60,7 @@ watch(() => show, n => {
<div class="title">第{{ index + 1 }}章&nbsp;&nbsp;&nbsp;{{ item.length }}词</div>
</div>
</div>
</MiniModal>
</MiniDialog>
</div>
</template>

6
src/components/Toolbar/FeedbackModal.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import Modal from "@/components/Modal/Modal.vue"
import Dialog from "@/components/dialog/Dialog.vue"
import BaseButton from "@/components/BaseButton.vue";
import {GITHUB} from "@/config/ENV.ts";
@@ -10,7 +10,7 @@ const emit = defineEmits([
</script>
<template>
<Modal
<Dialog
@close="emit('close')"
title="反馈">
<div class="feedback-modal">
@@ -38,7 +38,7 @@ const emit = defineEmits([
</div>
</div>
</div>
</Modal>
</Dialog>
</template>
<style scoped lang="scss">

6
src/components/Toolbar/RepeatSetting.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import MiniModal from "@/components/Modal/MiniModal.vue";
import MiniDialog from "@/components/dialog/MiniDialog.vue";
import {Icon} from "@iconify/vue";
import IconWrapper from "@/components/IconWrapper.vue";
import Tooltip from "@/components/Tooltip.vue";
@@ -43,7 +43,7 @@ onMounted(() => {
@mouseleave="toggle(false)"
/>
</IconWrapper>
<MiniModal
<MiniDialog
v-model="show"
@mouseenter="toggle(true)"
@mouseleave="toggle(false)"
@@ -67,7 +67,7 @@ onMounted(() => {
type="number"
/>
</div>
</MiniModal>
</MiniDialog>
</div>
</template>

8
src/components/Toolbar/TranslateSetting.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import MiniModal from "@/components/Modal/MiniModal.vue";
import MiniDialog from "@/components/dialog/MiniDialog.vue";
import {Icon} from "@iconify/vue";
import IconWrapper from "@/components/IconWrapper.vue";
import Tooltip from "@/components/Tooltip.vue";
@@ -8,7 +8,7 @@ import {useBaseStore} from "@/stores/base.ts";
import {useWindowClick} from "@/hooks/event.ts";
import {emitter, EventKey} from "@/utils/eventBus.ts";
import BaseButton from "@/components/BaseButton.vue";
import Modal from "@/components/Modal/Modal.vue";
import Dialog from "@/components/dialog/Dialog.vue";
import {useSettingStore} from "@/stores/setting.ts";
import {ShortcutKey} from "@/types.ts";
@@ -53,7 +53,7 @@ function save() {
/>
</IconWrapper>
</Tooltip>
<MiniModal v-model="show"
<MiniDialog v-model="show"
style="width: 230rem;"
>
<div class="mini-row">
@@ -102,7 +102,7 @@ function save() {
<BaseButton size="small" @click="show = false">取消</BaseButton>
<BaseButton size="small" @click="save">确定</BaseButton>
</div>
</MiniModal>
</MiniDialog>
</div>
</template>

6
src/components/Toolbar/VolumeSetting.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import MiniModal from "@/components/Modal/MiniModal.vue";
import MiniDialog from "@/components/dialog/MiniDialog.vue";
import {Icon} from "@iconify/vue";
import IconWrapper from "@/components/IconWrapper.vue";
import Tooltip from "@/components/Tooltip.vue";
@@ -58,7 +58,7 @@ function toggle2() {
/>
</IconWrapper>
</Tooltip>
<MiniModal
<MiniDialog
width="250rem"
v-model="show">
<div class="mini-row-title">
@@ -148,7 +148,7 @@ function toggle2() {
/>
</div>
</div>
</MiniModal>
</MiniDialog>
</div>
</template>

0
src/components/Modal/Modal.vue → src/components/dialog/Dialog.vue
View File

14
src/components/Modal/DictDialog/index.vue → src/components/dialog/DictDiglog.vue
View File

@@ -12,7 +12,7 @@ import {v4 as uuidv4} from "uuid";
import {ActivityCalendar} from "vue-activity-calendar";
import "vue-activity-calendar/style.css";
import ChapterList from "@/components/list/ChapterList.vue";
import WordListModal from "@/components/Modal/WordListModal.vue";
import WordListDialog from "@/components/dialog/WordListDialog.vue";
import {isArticle} from "@/hooks/article.ts";
import {useRuntimeStore} from "@/stores/runtime.ts";
import {useSettingStore} from "@/stores/setting.ts";
@@ -23,7 +23,7 @@ import VirtualWordList from "@/components/list/VirtualWordList.vue";
import {FormInstance, FormRules} from "element-plus";
import Empty from "@/components/Empty.vue";
import BaseIcon from "@/components/BaseIcon.vue";
import Modal from "@/components/Modal/Modal.vue";
import Dialog from "@/components/dialog/Dialog.vue";
const store = useBaseStore()
const settingStore = useSettingStore()
@@ -393,7 +393,7 @@ function delWord(word: Word, index: number) {
}
}
runtimeStore.editDict.words.splice(index, 1)
runtimeStore.editDict.words.splice(DictDiglog, 1)
wordList = cloneDeep(runtimeStore.editDict.words)
syncMyDictList()
@@ -480,7 +480,7 @@ onMounted(() => {
</script>
<template>
<Modal
<Dialog
:header="false"
v-model="show"
:show-close="false">
@@ -720,7 +720,7 @@ onMounted(() => {
<template v-slot="{word,index}">
<BaseIcon
class-name="del"
@click="delWord(word,index)"
@click="delWord(word,DictDiglog)"
title="移除"
icon="solar:trash-bin-minimalistic-linear"/>
</template>
@@ -807,8 +807,8 @@ onMounted(() => {
</div>
</Slide>
</div>
</Modal>
<WordListModal/>
</Dialog>
<WordListDialog/>
</template>
<style scoped lang="scss">

0
src/components/Modal/MiniModal.vue → src/components/dialog/MiniDialog.vue
View File

6
src/components/Modal/SettingModal.vue → src/components/dialog/SettingDialog.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import Modal from "@/components/Modal/Modal.vue"
import Dialog from "@/components/dialog/Dialog.vue"
import {useBaseStore} from "@/stores/base.ts"
import {Icon} from '@iconify/vue';
import {watch, ref} from "vue";
@@ -68,7 +68,7 @@ function resetShortcutKeyMap() {
</script>
<template>
<Modal
<Dialog
@close="emit('close')"
:keyboard="!disabledDefaultKeyboardEvent"
title="设置">
@@ -330,7 +330,7 @@ function resetShortcutKeyMap() {
</div>
</div>
</div>
</Modal>
</Dialog>
</template>
<style scoped lang="scss">

6
src/components/Modal/WordListModal.vue → src/components/dialog/WordListDialog.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import Modal from "@/components/Modal/Modal.vue";
import Dialog from "@/components/dialog/Dialog.vue";
import {$ref} from "vue/macros";
import {onMounted, onUnmounted, watch} from "vue";
import {emitter, EventKey} from "@/utils/eventBus.ts";
@@ -65,7 +65,7 @@ onUnmounted(() => {
</script>
<template>
<Modal
<Dialog
:title="title"
v-model="show">
<div class="all-word">
@@ -82,7 +82,7 @@ onUnmounted(() => {
:list="list">
</VirtualWordList>
</div>
</Modal>
</Dialog>
</template>
<style lang="scss" scoped>

6
src/utils/MessageBox.tsx
View File

@@ -1,5 +1,5 @@
import {createApp} from 'vue'
import Modal, {ModalProps} from "@/components/Modal/Modal.vue";
import Dialog, {ModalProps} from "@/components/dialog/Dialog.vue";
import {AppContext, Component, ComponentPublicInstance, createVNode, getCurrentInstance, render, VNode} from 'vue';
export class MessageBox {
@@ -23,7 +23,7 @@ export class MessageBox {
onOk()
close()
}
const vNode = createVNode(Modal, {
const vNode = createVNode(Dialog, {
title,
content,
onCancel: tempOnCancel,
@@ -51,7 +51,7 @@ export class MessageBox {
render(null, container);
container.remove()
}
const vNode = createVNode(Modal, {
const vNode = createVNode(Dialog, {
title,
content,
onCancel: tempOnCancel,