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

feat:移除无用依赖

Browse Source
This commit is contained in:
zyronon
2025-08-03 23:48:40 +08:00
parent 3f581d7aa5
commit d8b3ccab0a
16 changed files with 69 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/assets/css/style.scss
View File

@@ -365,8 +365,9 @@ footer {
transition: all .3s;
}
.volume, .collect, .easy {
svg {
opacity: 0;
color: var(--color-icon-hightlight);
}
&.active {
@@ -376,15 +377,21 @@ footer {
color: var(--color-sub-text);
}
.volume, .collect, .easy, .fill {
svg {
color: var(--color-icon-hightlight);
}
}
.fill {
svg {
opacity: 1 !important;
}
}
&:hover {
@extend .active;
.volume, .collect, .easy {
svg {
opacity: 1;
}
}

10
src/components/BaseIcon.vue
View File

@@ -8,6 +8,7 @@ defineProps<{
title?: string,
icon: string,
disabled?: boolean,
noBg?: boolean,
}>()
const emit = defineEmits(['click'])
@@ -20,7 +21,7 @@ const emit = defineEmits(['click'])
v-bind="$attrs"
@click="e => (!disabled) && emit('click',e)"
class="icon-wrapper"
:class="{disabled}"
:class="{disabled,noBg}"
>
<Icon :icon="icon"/>
</div>
@@ -42,9 +43,12 @@ $w: 1.4rem;
background: transparent;
transition: all .3s;
&:hover:not(.disabled) {
&:hover:not(.disabled,.noBg) {
background: var(--color-icon-hightlight);
color: white;
svg {
color: white;
}
}
&.disabled {

43
src/components/icon/VolumeIcon.vue
View File

@@ -1,10 +1,5 @@
<script setup lang="ts">
import {Icon} from "@iconify/vue";
import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
import Tooltip from "@/pages/pc/components/Tooltip.vue";
import {ShortcutKey} from "@/types.ts";
import {useSettingStore} from "@/stores/setting.ts";
import BaseIcon from "@/components/BaseIcon.vue";
const props = withDefaults(defineProps<{
time?: number,
@@ -15,7 +10,6 @@ const props = withDefaults(defineProps<{
simple: false
})
const emit = defineEmits(['click'])
const settingStore = useSettingStore()
let step = $ref(2)
let count = $ref(0)
@@ -49,37 +43,18 @@ function click() {
play()
}
let iconList = ['bx:volume', 'bx:volume-low', 'bx:volume-full']
defineExpose({play})
</script>
<template>
<div class="center"
v-if="props.simple"
@click.stop="click">
<Icon v-if="step === 0" icon="bx:volume"/>
<Icon v-if="step === 1" icon="bx:volume-low"/>
<Icon v-if="step === 2" icon="bx:volume-full"/>
</div>
<IconWrapper @click.stop="click" v-else>
<div class="center">
<Icon v-if="step === 0" icon="bx:volume"/>
<Icon v-if="step === 1" icon="bx:volume-low"/>
<Icon v-if="step === 2" icon="bx:volume-full"/>
</div>
</IconWrapper>
<BaseIcon @click.stop="click"
v-if="props.simple"
no-bg
:icon="iconList[step]"/>
<BaseIcon @click.stop="click" v-else :icon="iconList[step]"/>
</template>
<style scoped lang="scss">
.center {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
$w: 1.6rem;
:deep(svg) {
width: $w;
height: $w;
}
}
</style>
</style>

2
src/pages/pc/Setting.vue
View File

@@ -375,7 +375,7 @@ function importData(e) {
</div>
<div class="scroll">
<div class="row" v-for="item of Object.entries(settingStore.shortcutKeyMap)">
<label class="item-title">{{ $t(item[0]) }}</label>
<label class="item-title">{{ item[0] }}</label>
<div class="wrapper" @click="editShortcutKey = item[0]">
<div class="set-key" v-if="editShortcutKey === item[0]">
<input :value="item[1]?item[1]:'未设置快捷键'" readonly type="text" @blur="editShortcutKey = ''">

35
src/pages/pc/article/practice-article/index.vue
View File

@@ -17,7 +17,6 @@ import BaseIcon from "@/components/BaseIcon.vue";
import {useArticleOptions} from "@/hooks/dict.ts";
import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
import {useOnKeyboardEventListener} from "@/hooks/event.ts";
import TranslateSetting from "@/pages/pc/components/toolbar/TranslateSetting.vue";
import {genArticleSectionData, usePlaySentenceAudio} from "@/hooks/article.ts";
import {ElProgress} from 'element-plus';
@@ -296,13 +295,11 @@ const {playSentenceAudio} = usePlaySentenceAudio()
<div class="title">
{{ store.currentBook.name }}
</div>
<Tooltip
<BaseIcon
:title="`下一篇(${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
v-if="store.currentBook.lastLearnIndex < articleData.articles.length - 1">
<IconWrapper>
<Icon @click="emitter.emit(EventKey.continueStudy)" icon="octicon:arrow-right-24"/>
</IconWrapper>
</Tooltip>
v-if="store.currentBook.lastLearnIndex < articleData.articles.length - 1"
@click="emitter.emit(EventKey.continueStudy)"
icon="octicon:arrow-right-24"/>
</div>
<div class="right">
{{ articleData.articles.length }}篇文章
@@ -373,7 +370,7 @@ const {playSentenceAudio} = usePlaySentenceAudio()
<div class="flex flex-col items-center justify-center gap-1">
<audio ref="audioRef" v-if="articleData.article.audioSrc" :src="articleData.article.audioSrc"
controls></audio>
<div class="flex gap-3 center">
<div class="flex gap-2 center">
<BaseIcon
:title="`下一句(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
icon="icon-park-outline:go-ahead"
@@ -383,20 +380,14 @@ const {playSentenceAudio} = usePlaySentenceAudio()
icon="fluent:replay-16-filled"
@click="play"/>
<Tooltip
<BaseIcon
@click="settingStore.dictation = !settingStore.dictation"
:title="`开关默写模式(${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
>
<IconWrapper>
<Icon icon="majesticons:eye-off-line"
v-if="settingStore.dictation"
@click="settingStore.dictation = false"/>
<Icon icon="mdi:eye-outline"
v-else
@click="settingStore.dictation = true"/>
</IconWrapper>
</Tooltip>
:icon="['majesticons:eye-off-line','mdi:eye-outline'][settingStore.dictation?0:1]"/>
<TranslateSetting/>
<BaseIcon :icon="['mdi:translate','mdi:translate-off'][settingStore.translate?0:1]"
:title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
@click="settingStore.translate = !settingStore.translate"/>
<BaseIcon
:title="`编辑(${settingStore.shortcutKeyMap[ShortcutKey.EditArticle]})`"
@@ -413,8 +404,8 @@ const {playSentenceAudio} = usePlaySentenceAudio()
</div>
<div class="progress">
<ElProgress :percentage="progress"
:stroke-width="8"
:show-text="false"/>
:stroke-width="8"
:show-text="false"/>
</div>
</div>
</div>

2
src/pages/pc/components/BasePage.vue
View File

@@ -11,7 +11,7 @@
</template>
<style scoped lang="scss">
.page{
.page {
min-height: calc(100vh - 1.2rem);
margin-top: 1.2rem;
}

12
src/pages/pc/components/Book.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import {Dict} from "@/types.ts";
import {Icon} from "@iconify/vue";
import {ElProgress,ElCheckbox} from 'element-plus';
import {ElProgress, ElCheckbox} from 'element-plus';
const props = defineProps<{
item?: Dict
@@ -38,13 +38,13 @@ const studyProgress = $computed(() => {
</div>
<div class="absolute bottom-2 left-4 right-4">
<ElProgress v-if="item?.lastLearnIndex || item.complete" class="mt-1"
:percentage="progress"
:show-text="false"></ElProgress>
:percentage="progress"
:show-text="false"></ElProgress>
</div>
<ElCheckbox v-if="showCheckbox"
:model-value="checked"
@click.stop="$emit('check')"
class="absolute left-3 bottom-2"/>
:model-value="checked"
@click.stop="$emit('check')"
class="absolute left-3 bottom-2"/>
<div class="custom" v-if="item.custom">自定义</div>
</template>
<div v-else class="center h-full">

32
src/pages/pc/components/IconWrapper.vue
View File

@@ -1,32 +0,0 @@
<template>
<div class="icon-wrapper">
<slot></slot>
</div>
</template>
<style scoped lang="scss">
$w: 1.4rem;
.icon-wrapper {
cursor: pointer;
//padding: 2rem;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: .3rem;
background: transparent;
transition: all .3s;
&:hover {
background: var(--color-icon-hightlight);
color: white;
}
:deep(svg) {
width: $w;
height: $w;
}
}
</style>

5
src/pages/pc/components/Logo.vue
View File

@@ -3,7 +3,8 @@ import {useSettingStore} from "@/stores/setting.ts";
import router from "@/router.ts";
const settingStore = useSettingStore()
function goHome(){
function goHome() {
router.push('/')
}
</script>
@@ -27,4 +28,4 @@ function goHome(){
height: 2rem;
}
}
</style>
</style>

4
src/pages/pc/components/list/ArticleList.vue
View File

@@ -59,7 +59,7 @@ defineExpose({scrollToBottom, scrollToItem})
<slot name="prefix" :item="item" :index="index"></slot>
</template>
<template v-slot="{ item, index }">
<div class="item-title" >
<div class="item-title">
<div class="name"> {{ `${searchKey ? '' : (index + 1) + '. '}${item.title}` }}</div>
</div>
<div class="item-sub-title" v-if="item.titleTranslate && showTranslate">
@@ -84,7 +84,7 @@ defineExpose({scrollToBottom, scrollToItem})
.search {
box-sizing: border-box;
width: 100%;
padding-right: var(--space);
padding-right: var(--space);
}
.translate {

39
src/pages/pc/components/toolbar/Add.vue
View File

@@ -1,39 +0,0 @@
<script setup lang="ts">
import {Icon} from "@iconify/vue";
import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
import Tooltip from "@/pages/pc/components/Tooltip.vue";
let show = $ref(false)
function toggle() {
show = !show
// emitter.emit(EventKey.openArticleListModal)
}
</script>
<template>
<div class="setting" @click.stop="null">
<Tooltip title="添加">
<IconWrapper>
<Icon icon="ic:outline-cloud-upload"
@click="toggle"
/>
</IconWrapper>
</Tooltip>
</div>
</template>
<style scoped lang="scss">
.wrapper {
position: relative;
}
.setting {
position: relative;
}
</style>

121
src/pages/pc/components/toolbar/TranslateSetting.vue
View File

@@ -1,121 +0,0 @@
<script setup lang="ts">
import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
import {Icon} from "@iconify/vue";
import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
import Tooltip from "@/pages/pc/components/Tooltip.vue";
import {useBaseStore} from "@/stores/base.ts";
import {useWindowClick} from "@/hooks/event.ts";
import BaseButton from "@/components/BaseButton.vue";
import {useSettingStore} from "@/stores/setting.ts";
import {ShortcutKey} from "@/types.ts";
import {ElSwitch, ElRadioGroup,ElRadioButton,ElSelect,ElOption} from 'element-plus'
const store = useBaseStore()
const settingStore = useSettingStore()
let show = $ref(false)
let showCustomTranslateModal = $ref(false)
useWindowClick(() => show = false)
function toggle() {
// if (!show) emitter.emit(EventKey.closeOther)
// show = !show
settingStore.translate = !settingStore.translate
}
let translateType = $ref(0)
let networkTranslateEngine = $ref('baidu')
const TranslateEngine = [
{value: 'baidu', label: '百度'},
{value: 'youdao', label: '有道'},
]
function save() {
}
</script>
<template>
<div class="setting" @click.stop="null">
<Tooltip
:title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
>
<IconWrapper>
<Icon v-if="settingStore.translate" icon="mdi:translate"
@click="toggle"
/>
<Icon v-else icon="mdi:translate-off"
@click="toggle"
/>
</IconWrapper>
</Tooltip>
<MiniDialog v-model="show"
style="width: 230rem;"
>
<div class="mini-row">
<label class="item-title">显示翻译</label>
<div class="wrapper">
<ElSwitch v-model="settingStore.translate"
inline-prompt
active-text="开"
inactive-text="关"
/>
</div>
</div>
<div class="mini-row">
<label class="item-title">翻译类型</label>
<ElRadioGroup v-model="translateType" size="small">
<ElRadioButton :value="1">本地翻译</ElRadioButton>
<ElRadioButton :value="0">网络翻译</ElRadioButton>
</ElRadioGroup>
</div>
<div class="mini-row" v-if="translateType">
<label class="item-title">本地翻译</label>
<div class="wrapper">
<Tooltip title="开关释义显示">
<IconWrapper>
<Icon icon="mingcute:edit-line"
@click="toggle"
/>
</IconWrapper>
</Tooltip>
</div>
</div>
<div class="mini-row" v-else>
<label class="item-title">网络翻译</label>
<div class="wrapper">
<ElSelect v-model="networkTranslateEngine" class="m-2" placeholder="Select" size="small">
<ElOption
v-for="item in TranslateEngine"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</div>
</div>
<div class="footer">
<BaseButton size="small" @click="show = false">取消</BaseButton>
<BaseButton size="small" @click="save">确定</BaseButton>
</div>
</MiniDialog>
</div>
</template>
<style scoped lang="scss">
.setting {
position: relative;
}
.footer {
margin-top: .6rem;
display: flex;
justify-content: flex-end;
gap: .6rem;
}
</style>

14
src/pages/pc/index.vue
View File

@@ -5,8 +5,6 @@ import Logo from "@/pages/pc/components/Logo.vue";
import {Icon} from "@iconify/vue";
import {useSettingStore} from "@/stores/setting.ts";
import {useRouter} from "vue-router";
import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
import Tooltip from "@/pages/pc/components/Tooltip.vue";
import useTheme from "@/hooks/theme.ts";
import BaseIcon from "@/components/BaseIcon.vue";
@@ -55,16 +53,10 @@ const {toggleTheme} = useTheme()
<BaseIcon
@click="settingStore.sideExpand = !settingStore.sideExpand"
:icon="settingStore.sideExpand?'formkit:left':'formkit:right'"/>
<Tooltip
<BaseIcon
:title="`切换主题(${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
v-if="settingStore.sideExpand"
>
<IconWrapper>
<Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
@click="toggleTheme"/>
<Icon icon="tabler:sun" v-else @click="toggleTheme"/>
</IconWrapper>
</Tooltip>
@click="toggleTheme"
:icon="settingStore.theme === 'light' ? 'ep:moon' : 'tabler:sun'"/>
</div>
</div>
<div class="flex-1 z-1 relative">

3
src/pages/pc/word/StudyWord.vue
View File

@@ -23,6 +23,7 @@ import Empty from "@/components/Empty.vue";
import {useBaseStore} from "@/stores/base.ts";
import {usePracticeStore} from "@/stores/practice.ts";
import {dictionaryResources} from "@/assets/dictionary.ts";
import {ElMessage} from "element-plus";
interface IProps {
new: Word[],
@@ -378,7 +379,6 @@ useEvents([
</div>
</div>
<Type
v-loading="loading"
ref="typingRef"
:word="word"
@wrong="onTypeWrong"
@@ -396,7 +396,6 @@ useEvents([
<Panel>
<template v-slot="{active}">
<div class="panel-page-item pl-4"
v-loading="loading"
>
<WordList
v-if="data.words.length"

8
src/pages/pc/word/WordHomePage.vue
View File

@@ -45,12 +45,6 @@ async function init() {
}
function startStudy() {
// return store.sdict.lastLearnIndex = store.sdict.length - 1
// store.sdict.complete = true
// store.sdict.lastLearnIndex = 20
// currentStudy = getCurrentStudyWord()
// return
// return store.sdict.lastLearnIndex = store.sdict.length - 1
if (store.sdict.id) {
if (!store.sdict.words.length) {
return ElMessage.warning('没有单词可学习！')
@@ -220,7 +214,7 @@ const progressTextRight = $computed(() => {
</div>
个单词 <span class="color-blue cursor-pointer" @click="setPerDayStudyNumber">更改</span>
</div>
<BaseButton :disabled="!store.sdict.name" @click="startStudy">
<BaseButton size="large" :disabled="!store.sdict.name" @click="startStudy">
<div class="flex items-center gap-2">
<span>开始学习</span>
<Icon icon="icons8:right-round" class="text-2xl"/>

37
src/pages/pc/word/components/Footer.vue
View File

@@ -6,9 +6,7 @@ import {useSettingStore} from "@/stores/setting.ts";
import {ShortcutKey, StudyData} from "@/types.ts";
import BaseIcon from "@/components/BaseIcon.vue";
import {Icon} from "@iconify/vue";
import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
import Tooltip from "@/pages/pc/components/Tooltip.vue";
import TranslateSetting from "@/pages/pc/components/toolbar/TranslateSetting.vue";
import {ElProgress} from 'element-plus';
const statisticsStore = usePracticeStore()
@@ -113,7 +111,7 @@ const progress = $computed(() => {
<div class="name">总错误数</div>
</div>
</div>
<div class="flex justify-center items-center">
<div class="flex gap-2 justify-center items-center">
<BaseIcon
v-if="!isSimple"
class="collect"
@@ -135,34 +133,23 @@ const progress = $computed(() => {
icon="ph:star"/>
<BaseIcon
v-else
class="fill"
@click="$emit('toggleCollect')"
:title="`取消收藏(${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
icon="ph:star-fill"/>
<Tooltip
<BaseIcon
@click="emit('skip')"
:title="`跳过(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
>
<IconWrapper>
<Icon icon="icon-park-outline:go-ahead" class="menu"
@click="emit('skip')"/>
</IconWrapper>
</Tooltip>
icon="icon-park-outline:go-ahead"/>
<Tooltip
<BaseIcon
@click="settingStore.dictation = !settingStore.dictation"
:title="`开关默写模式(${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
>
<IconWrapper>
<Icon icon="majesticons:eye-off-line"
v-if="settingStore.dictation"
@click="settingStore.dictation = false"/>
<Icon icon="mdi:eye-outline"
v-else
@click="settingStore.dictation = true"/>
</IconWrapper>
</Tooltip>
:icon="['majesticons:eye-off-line','mdi:eye-outline'][settingStore.dictation?0:1]"/>
<TranslateSetting/>
<BaseIcon :icon="['mdi:translate','mdi:translate-off'][settingStore.translate?0:1]"
:title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
@click="settingStore.translate = !settingStore.translate"/>
<BaseIcon
@click="settingStore.showPanel = !settingStore.showPanel"
@@ -173,8 +160,8 @@ const progress = $computed(() => {
</div>
<div class="progress">
<ElProgress :percentage="progress"
:stroke-width="8"
:show-text="false"/>
:stroke-width="8"
:show-text="false"/>
</div>
</div>
<!--