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 03:39:11 +08:00
parent 3cfc6c8e31
commit 05bf1ac5b4
5 changed files with 34 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -127,31 +127,31 @@ function importData(e) {
<template>
<BasePage>
<div class="setting">
<div class="setting text-md">
<div class="left mt-10">
<div class="tabs">
<div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
<Icon icon="bx:headphone" width="20" color="#0C8CE9"/>
<Icon icon="bx:headphone" width="20"/>
<span>音效设置</span>
</div>
<div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">
<Icon icon="icon-park-outline:setting-config" width="20"/>
<span>练习设置</span>
</div>
<div class="tab" :class="tabIndex === 2 && 'active'" @click="tabIndex = 2">
<Icon icon="material-symbols:keyboard-outline" width="20" color="#0C8CE9"/>
<Icon icon="material-symbols:keyboard-outline" width="20"/>
<span>快捷键设置</span>
</div>
<div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">
<Icon icon="icon-park-outline:setting-config" width="20" color="#0C8CE9"/>
<span>其他设置</span>
</div>
<div class="tab" :class="tabIndex === 3 && 'active'" @click="tabIndex = 3">
<Icon icon="mdi:database-cog-outline" width="20" color="#0C8CE9"/>
<Icon icon="mdi:database-cog-outline" width="20"/>
<span>数据管理</span>
</div>
<div class="tab" :class="tabIndex === 4 && 'active'" @click="tabIndex = 4">
<Icon icon="mingcute:service-fill" width="20" color="#0C8CE9"/>
<Icon icon="mingcute:service-fill" width="20"/>
<span>反馈</span>
</div>
<div class="tab" :class="tabIndex === 5 && 'active'" @click="tabIndex = 5">
<Icon icon="mdi:about-circle-outline" width="20" color="#0C8CE9"/>
<Icon icon="mdi:about-circle-outline" width="20"/>
<span>关于</span>
</div>
</div>
@@ -266,6 +266,26 @@ function importData(e) {
</div>
</div>
<div v-if="tabIndex === 1">
<div class="row">
<label class="item-title">单词循环设置</label>
<div class="wrapper">
<el-radio-group v-model="settingStore.repeatCount">
<el-radio :value="1" size="default">1</el-radio>
<el-radio :value="2" size="default">2</el-radio>
<el-radio :value="3" size="default">3</el-radio>
<el-radio :value="5" size="default">5</el-radio>
<el-radio :value="100" size="default">自定义</el-radio>
</el-radio-group>
<div class="mini-row" v-if="settingStore.repeatCount === 100">
<label class="item-title">循环次数</label>
<el-input-number v-model="settingStore.repeatCustomCount"
:min="6"
:max="15"
type="number"
/>
</div>
</div>
</div>
<div class="row">
<label class="item-title">显示上一个/下一个单词</label>
<div class="wrapper">
@@ -472,6 +492,7 @@ function importData(e) {
display: flex;
flex-direction: column;
gap: .6rem;
//color: #0C8CE9;
.tab {
cursor: pointer;
@@ -482,7 +503,8 @@ function importData(e) {
gap: .6rem;
&.active {
background: var(--color-item-bg);
background: var(--color-main-active);
color: var(--color-input-bg);
}
}
}
@@ -533,8 +555,6 @@ function importData(e) {
color: var(--color-font-1);
}
}
}
.main-title {

89
src/pages/pc/components/toolbar/RepeatSetting.vue
View File

@@ -1,89 +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 {emitter, EventKey} from "@/utils/eventBus.ts";
import {onMounted} from "vue";
import {useSettingStore} from "@/stores/setting.ts";
const store = useBaseStore()
const settingStore = useSettingStore()
let show = $ref(false)
useWindowClick(() => show = false)
let timer = 0
function toggle(val) {
clearTimeout(timer)
if (val) {
emitter.emit(EventKey.closeOther)
show = val
} else {
timer = setTimeout(() => {
show = val
}, 100)
}
}
onMounted(() => {
})
</script>
<template>
<div class="setting" @click.stop="null">
<IconWrapper>
<Icon icon="tabler:repeat"
@mouseenter="toggle(true)"
@mouseleave="toggle(false)"
/>
</IconWrapper>
<MiniDialog
v-model="show"
@mouseenter="toggle(true)"
@mouseleave="toggle(false)"
style="width: 15rem;"
>
<div class="mini-row-title">
单词循环设置
</div>
<el-radio-group v-model="settingStore.repeatCount">
<el-radio :value="1" size="default">1</el-radio>
<el-radio :value="2" size="default">2</el-radio>
<el-radio :value="3" size="default">3</el-radio>
<el-radio :value="5" size="default">5</el-radio>
<el-radio :value="100" size="default">自定义</el-radio>
</el-radio-group>
<div class="mini-row" v-if="settingStore.repeatCount === 100">
<label class="item-title">自定义循环次数</label>
<el-input-number v-model="settingStore.repeatCustomCount"
:min="6"
:max="15"
type="number"
/>
</div>
</MiniDialog>
</div>
</template>
<style scoped lang="scss">
.setting {
position: relative;
.title {
color: black;
}
.el-radio-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
</style>

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

@@ -4,7 +4,6 @@ import {ShortcutKey} from "@/types.ts";
import Logo from "@/pages/pc/components/Logo.vue";
import {Icon} from "@iconify/vue";
import {useSettingStore} from "@/stores/setting.ts";
import {useRuntimeStore} from "@/stores/runtime.ts";
import {useRouter} from "vue-router";
import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
import Tooltip from "@/pages/pc/components/Tooltip.vue";
@@ -13,7 +12,6 @@ import BaseIcon from "@/components/BaseIcon.vue";
const settingStore = useSettingStore()
const runtimeStore = useRuntimeStore()
const router = useRouter()
const {toggleTheme} = useTheme()

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

@@ -9,7 +9,6 @@ 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 RepeatSetting from "@/pages/pc/components/toolbar/RepeatSetting.vue";
const statisticsStore = usePracticeStore()
const settingStore = useSettingStore()
@@ -164,8 +163,6 @@ const progress = $computed(() => {
<TranslateSetting/>
<RepeatSetting/>
<BaseIcon
@click="settingStore.showPanel = !settingStore.showPanel"
:title="`单词本(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`"

2
src/stores/setting.ts
View File

@@ -50,7 +50,7 @@ export const getDefaultSettingState = (): SettingState => ({
showToolbar: true,
show: false,
showPanel: true,
sideExpand: true,
sideExpand: false,
allSound: true,
wordSound: true,