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

fix: change icons

Browse Source
This commit is contained in:
zyronon
2025-08-23 23:00:15 +08:00
parent c1d3e95754
commit 47d222d25a
27 changed files with 225 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/pc/article/ArticleHomePage.vue
View File

@@ -97,18 +97,16 @@ async function goBookDetail(val: DictResource) {
base.currentBook.name || '请选择书籍开始学习'
}}</span>
<BaseIcon @click="router.push('/book-list')">
<IconGgArrowsExchange v-if="base.currentBook.name"/>
<IconFluentAdd20Filled v-else/>
<IconFluentArrowSync16Regular v-if="base.currentBook.name"/>
<IconFluentAdd16Filled v-else/>
</BaseIcon>
</div>
<BaseButton
size="large"
@click="startStudy"
:disabled="!base.currentBook.name"
>
<BaseButton size="large"
@click="startStudy"
:disabled="!base.currentBook.name">
<div class="flex items-center gap-2">
<span>开始学习</span>
<IconIcons8RightRound class="text-2xl"/>
<span class="line-height-[2]">开始学习</span>
<IconFluentArrowCircleRight16Regular class="text-xl"/>
</div>
</BaseButton>
</div>

4
src/pages/pc/article/BookDetail.vue
View File

@@ -113,8 +113,8 @@ const {
:class="!isArticleCollect(item)?'collect':'fill'"
@click.stop="toggleArticleCollect(item)"
:title="!isArticleCollect(item) ? '收藏' : '取消收藏'">
<IconPhStar v-if="!isArticleCollect(item)"/>
<IconPhStarFill v-else/>
<IconFluentStar16Regular v-if="!isArticleCollect(item)"/>
<IconFluentStar16Filled v-else/>
</BaseIcon>
</template>
</ArticleList>

32
src/pages/pc/article/StudyArticle.vue
View File

@@ -305,8 +305,8 @@ const {playSentenceAudio} = usePlaySentenceAudio()
:class="!isArticleCollect(item) ? 'collect' : 'fill'"
@click.stop="toggleArticleCollect(item)"
:title="!isArticleCollect(item) ? '收藏' : '取消收藏'">
<IconPhStar v-if="!isArticleCollect(item)"/>
<IconPhStarFill v-else/>
<IconFluentStar16Regular v-if="!isArticleCollect(item)"/>
<IconFluentStar16Filled v-else/>
</BaseIcon>
</template>
</ArticleList>
@@ -322,11 +322,10 @@ const {playSentenceAudio} = usePlaySentenceAudio()
</div>
<div class="footer" :class="!settingStore.showToolbar && 'hide'">
<Tooltip :title="settingStore.showToolbar?'收起':'展开'">
<IconIconParkOutlineDown
<IconFluentChevronLeft20Filled
@click="settingStore.showToolbar = !settingStore.showToolbar"
class="arrow"
:class="!settingStore.showToolbar && 'down'"
width="24"
color="#999"/>
</Tooltip>
@@ -351,27 +350,27 @@ const {playSentenceAudio} = usePlaySentenceAudio()
<BaseIcon
:title="`下一句(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
@click="skip">
<IconIconParkOutlineGoAhead/>
<IconFluentArrowBounce20Regular class="transform-rotate-180"/>
</BaseIcon>
<BaseIcon
:title="`重听(${settingStore.shortcutKeyMap[ShortcutKey.PlayWordPronunciation]})`"
@click="play">
<IconFluentReplay16Filled/>
<IconFluentReplay20Regular/>
</BaseIcon>
<BaseIcon
@click="settingStore.dictation = !settingStore.dictation"
:title="`开关默写模式(${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
>
<IconMajesticonsEyeOffLine v-if="settingStore.dictation"/>
<IconMdiEyeOutline v-else/>
<IconFluentEyeOff16Regular v-if="settingStore.dictation"/>
<IconFluentEye16Regular v-else/>
</BaseIcon>
<BaseIcon
:title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
@click="settingStore.translate = !settingStore.translate">
<IconMdiTranslate v-if="settingStore.translate"/>
<IconMdiTranslateOff v-else/>
<IconFluentTranslate16Regular v-if="settingStore.translate"/>
<IconFluentTranslateOff16Regular v-else/>
</BaseIcon>
<!-- <BaseIcon-->
@@ -382,7 +381,7 @@ const {playSentenceAudio} = usePlaySentenceAudio()
<BaseIcon
@click="settingStore.showPanel = !settingStore.showPanel"
:title="`面板(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`">
<IconTdesignMenuUnfold/>
<IconFluentTextListAbcUppercaseLtr20Regular/>
</BaseIcon>
</div>
</div>
@@ -451,7 +450,7 @@ const {playSentenceAudio} = usePlaySentenceAudio()
margin-bottom: .8rem;
transition: all var(--anim-time);
position: relative;
margin-top: 1rem;
margin-top: 1.6rem;
&.hide {
margin-bottom: -6rem;
@@ -495,16 +494,17 @@ const {playSentenceAudio} = usePlaySentenceAudio()
.arrow {
position: absolute;
top: -50%;
top: -40%;
left: 50%;
cursor: pointer;
transition: all .5s;
transform: rotate(0);
transform: rotate(-90deg);
padding: .5rem;
font-size: 1.2rem;
&.down {
top: -90%;
transform: rotate(180deg);
top: -70%;
transform: rotate(90deg);
}
}

33
src/pages/pc/article/components/EditArticle.vue
View File

@@ -297,7 +297,7 @@ function setStartTime(val: Sentence, i: number, j: number) {
</textarea>
<div class="justify-end items-center flex">
<Tooltip>
<IconRiQuestionLine class="mr-3" width="20"/>
<IconFluentQuestionCircle20Regular class="mr-3" width="20"/>
<template #reference>
<div>
<div class="mb-2">使用方法</div>
@@ -359,7 +359,7 @@ function setStartTime(val: Sentence, i: number, j: number) {
</div>
<div class="flex items-center">
<Tooltip>
<IconRiQuestionLine class="mr-3" width="20"/>
<IconFluentQuestionCircle20Regular class="mr-3" width="20"/>
<template #reference>
<div>
<div class="mb-2">使用方法</div>
@@ -425,8 +425,8 @@ function setStartTime(val: Sentence, i: number, j: number) {
@click="setStartTime(sentence,indexI,indexJ)"
:title="indexI === 0 && indexJ === 0 ?'设置开始时间':'使用前一句的结束时间'"
>
<IconIcSharpMyLocation v-if="indexI === 0 && indexJ === 0"/>
<IconTwemojiEndArrow v-else/>
<IconFluentMyLocation20Regular v-if="indexI === 0 && indexJ === 0"/>
<IconFluentPaddingLeft20Regular v-else/>
</BaseIcon>
</div>
<div>-</div>
@@ -437,19 +437,22 @@ function setStartTime(val: Sentence, i: number, j: number) {
@click="sentence.audioPosition[1] = Number(Number(audioRef.currentTime).toFixed(2))"
title="设置结束时间"
>
<IconIcSharpMyLocation/>
<IconFluentMyLocation20Regular/>
</BaseIcon>
</div>
</div>
<div class="flex flex-col">
<BaseIcon :icon="sentence.audioPosition?.length ? 'basil:edit-outline' : 'basil:add-outline'"
title="编辑"
@click="handleShowEditAudioDialog(sentence,indexI,indexJ)">
<IconBasilEditOutline v-if="sentence.audioPosition?.length"/>
<IconBasilAddOutline v-else/>
<IconFluentSpeakerEdit20Regular v-if="!sentence.audioPosition?.length"/>
<IconFluentAddSquare20Regular v-else/>
</BaseIcon>
<BaseIcon v-if="sentence.audioPosition?.length"
<BaseIcon
title="播放"
v-if="sentence.audioPosition?.length"
@click="playSentenceAudio(sentence,audioRef,editArticle)">
<IconHugeiconsPlay/>
<IconFluentPlay20Regular/>
</BaseIcon>
</div>
</div>
@@ -461,11 +464,11 @@ function setStartTime(val: Sentence, i: number, j: number) {
<div class="status">
<span>状态：</span>
<div class="warning" v-if="failCount">
<IconTypcnWarningOutline/>
<IconFluentShieldQuestion20Regular/>
共有{{ failCount }}句没有翻译！
</div>
<div class="success" v-else>
<IconMdiSuccessCircleOutline/>
<IconFluentCheckmarkCircle16Regular/>
翻译完成！
</div>
</div>
@@ -498,9 +501,9 @@ function setStartTime(val: Sentence, i: number, j: number) {
<span v-else> - 结束</span>
</div>
<BaseIcon
title="试听"
title="播放"
@click="playSentenceAudio(editSentence,sentenceAudioRef,editArticle)">
<IconHugeiconsPlay/>
<IconFluentPlay20Regular/>
</BaseIcon>
</div>
</div>
@@ -514,13 +517,13 @@ function setStartTime(val: Sentence, i: number, j: number) {
@click="jumpAudio(editSentence.audioPosition[0])"
title="跳转"
>
<IconIcSharpMyLocation/>
<IconFluentMyLocation20Regular/>
</BaseIcon>
<BaseIcon
@click="setPreEndTimeToCurrentStartTime"
title="使用前一句的结束时间"
>
<IconTwemojiEndArrow/>
<IconFluentPaddingLeft20Regular/>
</BaseIcon>
</div>
<BaseButton @click="recordStart">记录</BaseButton>

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

@@ -18,7 +18,7 @@ function onClick() {
title="返回"
@click="onClick"
>
<IconFormkitLeft/>
<IconFluentChevronLeft28Filled/>
</BaseIcon>
</template>

6
src/pages/pc/components/BaseTable.vue
View File

@@ -171,7 +171,7 @@ defineRender(
onClick={props.add}
icon="fluent:add-20-filled"
title="添加单词">
<IconFluentAdd20Filled/>
<IconFluentAdd20Regular/>
</BaseIcon>
<BaseIcon
disabled={!currentList.length}
@@ -179,13 +179,13 @@ defineRender(
icon="icon-park-outline:sort-two"
onClick={() => showSortDialog = !showSortDialog}
>
<IconIconParkOutlineSortTwo/>
<IconFluentArrowSort20Regular/>
</BaseIcon>
<BaseIcon
disabled={!currentList.length}
onClick={() => showSearchInput = !showSearchInput}
title="搜索">
<IconFluentSearch24Regular/>
<IconFluentSearch20Regular/>
</BaseIcon>
<MiniDialog
modelValue={showSortDialog}

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

@@ -47,12 +47,9 @@ const studyProgress = $computed(() => {
class="absolute left-3 bottom-3"/>
<div class="custom" v-if="item.custom">自定义</div>
</template>
<div v-else class="center h-full">
<IconFluentAdd20Filled
width="40px"
/>
<div v-else class="center h-full text-2xl">
<IconFluentAdd16Regular/>
</div>
</div>
</template>

4
src/pages/pc/components/CollectNotice.vue
View File

@@ -53,11 +53,11 @@ watch(() => settingStore.load, (n) => {
<div class="href-wrapper">
<div class="round">
<div class="href">2study.top</div>
<IconMdiStarOutline width="22"/>
<IconFluentStar12Regular width="22"/>
</div>
<div class="right">
👈
<IconMdiStar class="star" width="22"/>
<IconFluentStar20Filled class="star" width="22"/>
点亮它!
</div>
</div>

4
src/pages/pc/components/base/Pagination.vue
View File

@@ -189,7 +189,7 @@ function quickNextPage() {
:disabled="internalCurrentPage <= 1"
@click="prev"
>
<IconMingcuteLeftLine/>
<IconFluentChevronLeft20Filled/>
</button>
<!-- 页码 -->
@@ -250,7 +250,7 @@ function quickNextPage() {
:disabled="internalCurrentPage >= pageCount"
@click="next"
>
<IconMingcuteRightLine/>
<IconFluentChevronLeft20Filled class="transform-rotate-180"/>
</button>
<!-- 每页条数选择器 -->

11
src/pages/pc/components/base/select/Select.vue
View File

@@ -160,7 +160,8 @@ onBeforeUnmount(() => {
{{ displayValue }}
</div>
<div class="select__suffix">
<IconMdiChevronDown
<IconFluentChevronLeft20Filled
class="arrow"
:class="{ 'is-reverse': isOpen }"
width="16"
/>
@@ -235,10 +236,14 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
color: #999;
transition: transform 0.3s;
.arrow {
transform: rotate(-90deg);
transition: transform 0.3s;
}
.is-reverse {
transform: rotate(180deg);
transform: rotate(90deg);
}
}
}

10
src/pages/pc/components/base/toast/Toast.vue
View File

@@ -3,12 +3,12 @@
<div v-if="visible" class="message" :class="type" :style="style" @mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave">
<div class="message-content">
<IconMdiCheckCircle v-if="props.type === 'success'" class="message-icon"/>
<IconMdiAlertCircle v-if="props.type === 'warning'" class="message-icon"/>
<IconMdiInformation v-if="props.type === 'info'" class="message-icon"/>
<IconMdiCloseCircle v-if="props.type === 'error'" class="message-icon"/>
<IconFluentCheckmarkCircle20Filled v-if="props.type === 'success'" class="message-icon"/>
<IconFluentErrorCircle20Filled v-if="props.type === 'warning'" class="message-icon"/>
<IconFluentErrorCircle20Filled v-if="props.type === 'info'" class="message-icon"/>
<IconFluentDismissCircle20Filled v-if="props.type === 'error'" class="message-icon"/>
<span class="message-text">{{ message }}</span>
<IconMdiClose v-if="showClose" class="message-close" @click="close"/>
<Close v-if="showClose" class="message-close" @click="close"/>
</div>
</div>
</Transition>

13
src/pages/pc/components/dialog/Dialog.vue
View File

@@ -5,6 +5,7 @@ import {useEventListener} from "@/hooks/event.ts";
import BaseButton from "@/components/BaseButton.vue";
import {useRuntimeStore} from "@/stores/runtime.ts";
import BaseIcon from "@/components/BaseIcon.vue";
export interface ModalProps {
modelValue?: boolean,
@@ -156,10 +157,10 @@ async function cancel() {
]"
>
<Tooltip title="关闭">
<IconIonCloseOutline @click="close"
v-if="showClose"
class="close hvr-grow cursor-pointer"
width="24" color="#929596"/>
<IconFluentDismiss20Regular @click="close"
v-if="showClose"
class="close cursor-pointer"
width="24"/>
</Tooltip>
<div class="modal-header" v-if="header">
<div class="title">{{ props.title }}</div>
@@ -169,7 +170,9 @@ async function cancel() {
<div v-if="content" class="content">{{ content }}</div>
</div>
<div class="modal-footer" v-if="footer">
<div class="left flex items-end"><slot name="footer-left"></slot></div>
<div class="left flex items-end">
<slot name="footer-left"></slot>
</div>
<div class="right">
<BaseButton type="info" @click="cancel">{{ cancelButtonText }}</BaseButton>
<BaseButton

5
src/pages/pc/components/list/List.vue
View File

@@ -4,6 +4,7 @@ import BaseIcon from "@/components/BaseIcon.vue";
import Input from "@/pages/pc/components/Input.vue";
import {cloneDeep, throttle} from "@/utils";
import {Article} from "@/types/types.ts";
import DeleteIcon from "@/components/icon/DeleteIcon.vue";
interface IProps {
list: T[]
@@ -125,14 +126,14 @@ defineExpose({scrollBottom})
<BaseIcon
@click="delItem(item)"
title="删除">
<IconFluentDelete24Regular/>
<DeleteIcon/>
</BaseIcon>
<div
@mousedown="draggable = true"
@mouseup="draggable = false"
>
<BaseIcon>
<IconCarbonMove/>
<IconFluentArrowMove20Regular/>
</BaseIcon>
</div>
</div>

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

@@ -23,31 +23,32 @@ const {toggleTheme} = useTheme()
<div class="top">
<Logo v-if="settingStore.sideExpand"/>
<div class="row" @click="router.push('/words')">
<IconMaterialSymbolsLightDictionaryOutlineSharp/>
<IconFluentTextUnderlineDouble20Regular/>
<span v-if="settingStore.sideExpand">单词</span>
</div>
<div class="row" @click="router.push('/articles')">
<IconPhArticleNyTimes/>
<!-- <IconPhArticleNyTimes/>-->
<IconFluentBookLetter20Regular/>
<span v-if="settingStore.sideExpand">文章</span>
</div>
<div class="row" @click="router.push('/setting')">
<IconUilSetting/>
<IconFluentSettings20Regular/>
<span v-if="settingStore.sideExpand">设置</span>
</div>
</div>
<div class="bottom flex justify-evenly ">
<BaseIcon
@click="settingStore.sideExpand = !settingStore.sideExpand">
<IconFormkitLeft v-if="settingStore.sideExpand"/>
<IconFormkitRight v-else/>
<IconFluentChevronLeft20Filled v-if="settingStore.sideExpand"/>
<IconFluentChevronLeft20Filled class="transform-rotate-180" v-else/>
</BaseIcon>
<BaseIcon
v-if="settingStore.sideExpand"
:title="`切换主题(${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
@click="toggleTheme"
>
<IconEpMoon v-if="settingStore.theme === 'light'"/>
<IconTablerSun v-else/>
<IconFluentWeatherMoon16Regular v-if="settingStore.theme === 'light'"/>
<IconFluentWeatherSunny16Regular v-else/>
</BaseIcon>
</div>
</div>

12
src/pages/pc/setting/Setting.vue
View File

@@ -174,27 +174,27 @@ function importOldData() {
<div class="left mt-10">
<div class="tabs">
<div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
<IconIconParkOutlineSettingConfig width="20"/>
<IconFluentAppsList24Regular width="20"/>
<span>练习设置</span>
</div>
<div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">
<IconBxHeadphone width="20"/>
<IconFluentHeadphones20Regular width="20"/>
<span>音效设置</span>
</div>
<div class="tab" :class="tabIndex === 2 && 'active'" @click="tabIndex = 2">
<IconMaterialSymbolsKeyboardOutline width="20"/>
<IconFluentKeyboardLayoutFloat20Regular width="20"/>
<span>快捷键设置</span>
</div>
<div class="tab" :class="tabIndex === 3 && 'active'" @click="tabIndex = 3">
<IconMdiDatabaseCogOutline width="20"/>
<IconFluentDatabasePerson20Regular width="20"/>
<span>数据管理</span>
</div>
<div class="tab" :class="tabIndex === 4 && 'active'" @click="tabIndex = 4">
<IconMingcuteServiceFill width="20"/>
<IconFluentMailEdit20Regular width="20"/>
<span>反馈</span>
</div>
<div class="tab" :class="tabIndex === 5 && 'active'" @click="tabIndex = 5">
<IconMdiAboutCircleOutline width="20"/>
<IconFluentPerson20Regular width="20"/>
<span>关于</span>
</div>
</div>

2
src/pages/pc/word/DictDetail.vue
View File

@@ -276,7 +276,7 @@ defineRender(() => {
class="option-icon"
onClick={() => editWord(val.item)}
title="编辑">
<IconTablerEdit/>
<IconFluentTextEditStyle20Regular/>
</BaseIcon>
<PopConfirm title="确认删除？"
onConfirm={() => delWord(val.item.id)}

4
src/pages/pc/word/Statistics.vue
View File

@@ -132,7 +132,7 @@ function options(emitType: string) {
style="background: rgb(254,236,236)">
<div class="text-3xl">{{ statStore.wrong }}</div>
<div class="center gap-2">
<IconIconamoonClose class="text-2xl"/>
<IconFluentDismiss20Regular class="text-xl"/>
错词
</div>
</div>
@@ -140,7 +140,7 @@ function options(emitType: string) {
style="background: rgb(231,248,241)">
<div class="text-3xl">{{ statStore.total - statStore.wrong }}</div>
<div class="center gap-2">
<IconTablerCheck class="text-2xl"/>
<IconFluentCheckmark20Regular class="text-xl"/>
正确
</div>
</div>

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

@@ -384,7 +384,7 @@ useEvents([
<div class="center gap-2 cursor-pointer float-left"
@click="prev"
v-if="prevWord">
<IconBiArrowLeft class="arrow" width="22"/>
<IconFluentArrowLeft16Regular class="arrow" width="22"/>
<Tooltip
:title="`上一个(${settingStore.shortcutKeyMap[ShortcutKey.Previous]})`"
>
@@ -399,7 +399,7 @@ useEvents([
>
<div class="word" :class="settingStore.dictation && 'word-shadow'">{{ nextWord.word }}</div>
</Tooltip>
<IconBiArrowRight class="arrow" width="22"/>
<IconFluentArrowRight16Regular class="arrow" width="22"/>
</div>
</div>
<TypeWord
@@ -426,10 +426,9 @@ useEvents([
<BaseIcon
@click="continueStudy"
:title="`下一组(${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`">
<IconBiArrowRight class="arrow" width="22"/>
<IconFluentArrowRight16Regular class="arrow" width="22"/>
</BaseIcon>
</div>
</template>
<div class="panel-page-item pl-4">
<WordList
@@ -447,16 +446,16 @@ useEvents([
:class="!isWordCollect(item)?'collect':'fill'"
@click.stop="toggleWordCollect(item)"
:title="!isWordCollect(item) ? '收藏' : '取消收藏'">
<IconPhStar v-if="!isWordCollect(item)"/>
<IconPhStarFill v-else/>
<IconFluentStar16Regular v-if="!isWordCollect(item)"/>
<IconFluentStar16Filled v-else/>
</BaseIcon>
<BaseIcon
:class="!isWordSimple(item)?'collect':'fill'"
@click.stop="toggleWordSimple(item)"
:title="!isWordSimple(item) ? '标记为已掌握' : '取消标记已掌握'">
<IconMaterialSymbolsCheckCircleOutlineRounded v-if="!isWordSimple(item)"/>
<IconMaterialSymbolsCheckCircleRounded v-else/>
<IconFluentCheckmarkCircle16Regular v-if="!isWordSimple(item)"/>
<IconFluentCheckmarkCircle16Filled v-else/>
</BaseIcon>
</template>
</WordList>

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

@@ -140,7 +140,7 @@ function check(cb: Function) {
@click="router.push('/dict-list')"
>
<IconGgArrowsExchange v-if="store.sdict.name"/>
<IconFluentArrowSort20Regular v-if="store.sdict.name"/>
<IconFluentAdd20Filled v-else/>
</BaseIcon>
</div>
@@ -194,10 +194,9 @@ function check(cb: Function) {
<BaseButton size="large" :disabled="!store.sdict.name"
:loading="loading"
@click="startPractice">
<!-- <BaseButton size="large" @click="startPractice">-->
<div class="flex items-center gap-2">
<span>开始学习</span>
<IconIcons8RightRound class="text-2xl"/>
<span class="line-height-[2]">开始学习</span>
<IconFluentArrowCircleRight16Regular class="text-xl"/>
</div>
</BaseButton>
</div>

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

@@ -62,11 +62,10 @@ const progress = $computed(() => {
<template>
<div class="footer" :class="!settingStore.showToolbar && 'hide'">
<Tooltip :title="settingStore.showToolbar?'收起':'展开'">
<IconIconParkOutlineDown
<IconFluentChevronLeft20Filled
@click="settingStore.showToolbar = !settingStore.showToolbar"
class="arrow"
:class="!settingStore.showToolbar && 'down'"
width="24"
color="#999"/>
</Tooltip>
@@ -103,42 +102,42 @@ const progress = $computed(() => {
:class="!isSimple?'collect':'fill'"
@click="$emit('toggleSimple')"
:title="(!isSimple ? '标记为已掌握' : '取消标记已掌握')+`(${settingStore.shortcutKeyMap[ShortcutKey.ToggleSimple]})`">
<IconMaterialSymbolsCheckCircleOutlineRounded v-if="!isSimple"/>
<IconMaterialSymbolsCheckCircleRounded v-else/>
<IconFluentCheckmarkCircle16Regular v-if="!isSimple"/>
<IconFluentCheckmarkCircle16Filled v-else/>
</BaseIcon>
<BaseIcon
:class="!isCollect?'collect':'fill'"
@click.stop="$emit('toggleCollect')"
:title="(!isCollect ? '收藏' : '取消收藏')+`(${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`">
<IconPhStar v-if="!isCollect"/>
<IconPhStarFill v-else/>
<IconFluentStarAdd16Regular v-if="!isCollect"/>
<IconFluentStar16Filled v-else/>
</BaseIcon>
<BaseIcon
@click="emit('skip')"
:title="`跳过(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`">
<IconIconParkOutlineGoAhead/>
<IconFluentArrowBounce20Regular class="transform-rotate-180"/>
</BaseIcon>
<BaseIcon
@click="settingStore.dictation = !settingStore.dictation"
:title="`开关默写模式(${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
>
<IconMajesticonsEyeOffLine v-if="settingStore.dictation"/>
<IconMdiEyeOutline v-else/>
<IconFluentEyeOff16Regular v-if="settingStore.dictation"/>
<IconFluentEye16Regular v-else/>
</BaseIcon>
<BaseIcon
:title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
@click="settingStore.translate = !settingStore.translate">
<IconMdiTranslate v-if="settingStore.translate"/>
<IconMdiTranslateOff v-else/>
<IconFluentTranslate16Regular v-if="settingStore.translate"/>
<IconFluentTranslateOff16Regular v-else/>
</BaseIcon>
<BaseIcon
@click="settingStore.showPanel = !settingStore.showPanel"
:title="`单词本(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`">
<IconTdesignMenuUnfold/>
<IconFluentTextListAbcUppercaseLtr20Regular/>
</BaseIcon>
</div>
</div>
@@ -160,7 +159,7 @@ const progress = $computed(() => {
margin-bottom: .8rem;
transition: all var(--anim-time);
position: relative;
margin-top: 1rem;
margin-top: 1.6rem;
&.hide {
margin-bottom: -6rem;
@@ -215,18 +214,18 @@ const progress = $computed(() => {
.arrow {
position: absolute;
top: -50%;
top: -40%;
left: 50%;
cursor: pointer;
transition: all .5s;
transform: rotate(0);
transform: rotate(-90deg);
padding: .5rem;
font-size: 1.2rem;
&.down {
top: -90%;
transform: rotate(180deg);
transform: rotate(90deg);
}
}
}
</style>