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

开发反馈弹窗

Browse Source
This commit is contained in:
zyronon
2023-08-23 16:44:49 +08:00
parent 093c84964a
commit 0291476e4c
13 changed files with 450 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/BaseButton.vue
View File

@@ -3,17 +3,17 @@ import {KeyboardOne} from "@icon-park/vue-next";
import Tooltip from "@/components/Tooltip.vue";
const props = defineProps<{
keyboard: string,
keyboard?: string,
active?: boolean
}>()
</script>
<template>
<Tooltip :title="`快捷键: ${keyboard}`">
<Tooltip :disabled="!keyboard" :title="`快捷键: ${keyboard}`">
<div class="my-button" :class="active && 'active'">
<span><slot></slot></span>
<div class="key-notice">
<div class="key-notice" v-if="keyboard">
<keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>
<span class="key">{{ keyboard }}</span>
</div>
@@ -36,12 +36,16 @@ const props = defineProps<{
//background: #999;
//background: rgb(60, 63, 65);
//background: var(--color-second-bg);
color: white;
height: 40rem;
line-height: 1;
& > span {
font-size: 16rem;
color: white;
::v-deep a {
color: white;
}
}
&:hover {

19
src/components/Modal/Modal.vue
View File

@@ -2,11 +2,24 @@
import {Close} from "@icon-park/vue-next"
import {onMounted} from "vue";
const props = defineProps(['modelValue', 'title', 'subTitle'])
const emit = defineEmits(['update:modelValue'])
interface IProps {
modelValue: boolean,
title?: string,
subTitle?: string,
}
const props = withDefaults(defineProps<IProps>(), {
modelValue: true,
})
const emit = defineEmits([
'update:modelValue',
'close'
])
function close() {
emit('update:modelValue', false)
emit('close',)
}
onMounted(() => {
@@ -123,7 +136,7 @@ $header-height: 60rem;
.modal {
position: relative;
background: var(--color-main-bg);
box-shadow: var(--color-main-bg) 0 0 10rem 1rem;
//box-shadow: var(--color-main-bg) 0 0 10rem 1rem;
//width: 75vw;
//height: 70vh;
border-radius: $radius;

8
src/components/Side.vue
View File

@@ -136,13 +136,15 @@ function changeDict(dict: Dict, i: number) {
display: flex;
flex-direction: column;
transition: all .3s;
transform: rotate(-90deg);
transform-origin: 0 0;
//transform: rotate(-90deg);
//transform-origin: 0 0;
z-index: 1;
opacity: 0;
&.open {
//margin-right: 0;
transform: rotate(0deg);
//transform: rotate(0deg);
opacity: 1;
}
$header-height: 40rem;

87
src/components/Toolbar/FeedbackModal.vue Normal file
View File

@@ -0,0 +1,87 @@
<script setup lang="ts">
import Modal from "@/components/Modal/Modal.vue"
import {HeadphoneSound, SettingConfig} from "@icon-park/vue-next"
import {useBaseStore} from "@/stores/base.ts"
import BaseButton from "@/components/BaseButton.vue";
import {GITHUB} from "@/config/ENV.ts";
interface IProps {
modelValue: boolean,
}
const props = withDefaults(defineProps<IProps>(), {
modelValue: true,
})
const emit = defineEmits([
'update:modelValue',
])
const store = useBaseStore()
</script>
<template>
<Modal
:modelValue="props.modelValue"
@close="emit('update:modelValue',false)"
title="反馈">
<div class="feedback-modal">
<div>
给我发Email：<a href="mailto:zyronon@163.com">zyronon@163.com</a>
</div>
<p>or</p>
<div class="github">
<span>在<a :href="GITHUB" target="_blank">Github</a>上给我提一个
<a :href="`${GITHUB}/issues`" target="_blank">Issue</a>
</span>
<div class="options">
<BaseButton>
<a :href="`${GITHUB}/issues/new?assignees=&labels=&projects=&template=%E5%8D%95%E8%AF%8D%E9%94%99%E8%AF%AF---word-error.md&title=%E5%8D%95%E8%AF%8D%E9%94%99%E8%AF%AF+%7C+Word+error`"
target="_blank">字典错误？</a>
</BaseButton>
<BaseButton>
<a :href="`${GITHUB}/issues/new?assignees=&labels=&projects=&template=问题报告---bug-report-.md&title=问题报告+%7C+Bug+report+`"
target="_blank">反馈BUG？</a>
</BaseButton>
<BaseButton>
<a :href="`${GITHUB}/issues/new?assignees=&labels=&projects=&template=功能请求---feature-request.md&title=功能请求+%7C+Feature+request`"
target="_blank">功能请求？</a>
</BaseButton>
</div>
</div>
</div>
</Modal>
</template>
<style scoped lang="scss">
@import "@/assets/css/colors.scss";
.feedback-modal {
width: 500rem;
//height: 80vh;
display: flex;
flex-direction: column;
background: white;
align-items: center;
padding: $space;
//justify-content: center;
color: var(--color-font);
p {
font-size: 30rem;
}
.github {
display: flex;
align-items: center;
gap: $space;
.options {
display: flex;
flex-direction: column;
gap: 10rem;
}
}
}
</style>

179
src/components/Toolbar.vue → src/components/Toolbar/SettingModal.vue
View File

@@ -1,78 +1,29 @@
<script setup lang="ts">
import Tooltip from "@/components/Tooltip.vue"
import {
MenuFold,
Moon,
PreviewCloseOne,
PreviewOpen,
SettingTwo,
SunOne,
VolumeNotice,
HeadphoneSound,
SettingConfig,
Down,
DatabaseFail
} from "@icon-park/vue-next"
import IconRepeat from '~icons/tabler/repeat'
import useThemeColor from "@/hooks/useThemeColor.ts"
import {useBaseStore} from "@/stores/base.ts"
import {reactive} from "vue"
import Modal from "@/components/Modal/Modal.vue"
import {HeadphoneSound, SettingConfig} from "@icon-park/vue-next"
import {useBaseStore} from "@/stores/base.ts"
const {appearance, toggle} = useThemeColor()
const store = useBaseStore()
const tabIndex = $ref(0)
const setting = reactive({
showToolbar: true,
show: false,
value1: false,
value2: 50,
value3: 1,
value4: false,
const store = useBaseStore()
interface IProps {
modelValue: boolean,
}
const props = withDefaults(defineProps<IProps>(), {
modelValue: true,
})
const emit = defineEmits([
'update:modelValue',
])
</script>
<template>
<header :class="!setting.showToolbar && 'hide'">
<div class="info" @click="store.dictModalIsOpen = true">
CTE-4 第5章
</div>
<div class="options">
<Tooltip title="切换主题">
<moon v-if="appearance === 'dark'" theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"
@click="toggle"/>
<sun-one v-else theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2" @click="toggle"/>
</Tooltip>
<Tooltip title="设置">
<setting-two @click="setting.show = true" theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
</Tooltip>
<Tooltip title="反馈字典错误">
<database-fail theme="outline" size="24" fill="#333"/>
</Tooltip>
<Tooltip title="音效设置">
<volume-notice theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
</Tooltip>
<IconRepeat></IconRepeat>
<Tooltip title="单词本">
<preview-open theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
<preview-close-one theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
</Tooltip>
<div class="my-button" @click="store.dictModalIsOpen2 = true">ok</div>
<Tooltip title="单词本">
<menu-fold class="menu" @click="store.sideIsOpen = !store.sideIsOpen"
theme="outline" size="20" fill="#929596"
:strokeWidth="2"/>
</Tooltip>
</div>
<Tooltip :title="setting.showToolbar?'收起':'展开'">
<down
@click="setting.showToolbar = !setting.showToolbar"
class="arrow"
:class="!setting.showToolbar && 'down'"
theme="outline" size="24" fill="#999"/>
</Tooltip>
</header>
<Modal v-model="setting.show" title="设置" subTitle="修改立即生效，实时保存">
<Modal
:modelValue="props.modelValue"
@close="emit('update:modelValue',false)"
title="设置" subTitle="修改立即生效，实时保存">
<div class="setting-modal">
<div class="tabs">
<div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
@@ -89,7 +40,7 @@ const setting = reactive({
<div class="row">
<label class="main-title">所有音效</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -100,7 +51,7 @@ const setting = reactive({
<div class="row">
<label class="item-title">单词发音</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -110,22 +61,22 @@ const setting = reactive({
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="setting.value2"/>
<span>{{ setting.value2 }}%</span>
<el-slider v-model="store.setting.value2"/>
<span>{{ store.setting.value2 }}%</span>
</div>
</div>
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="setting.value3" :step="0.1" :max="4"/>
<span>{{ setting.value3 }}</span>
<el-slider v-model="store.setting.value3" :step="0.1" :max="4"/>
<span>{{ store.setting.value3 }}</span>
</div>
</div>
<div class="line"></div>
<div class="row">
<label class="item-title">按键音</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -135,15 +86,15 @@ const setting = reactive({
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="setting.value2"/>
<span>{{ setting.value2 }}%</span>
<el-slider v-model="store.setting.value2"/>
<span>{{ store.setting.value2 }}%</span>
</div>
</div>
<div class="line"></div>
<div class="row">
<label class="item-title">释义发音</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -153,15 +104,15 @@ const setting = reactive({
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="setting.value2"/>
<span>{{ setting.value2 }}%</span>
<el-slider v-model="store.setting.value2"/>
<span>{{ store.setting.value2 }}%</span>
</div>
</div>
<div class="line"></div>
<div class="row">
<label class="item-title">效果音（章节结算页烟花音效）</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -171,8 +122,8 @@ const setting = reactive({
<div class="row">
<label class="sub-title">音量</label>
<div class="wrapper">
<el-slider v-model="setting.value2"/>
<span>{{ setting.value2 }}%</span>
<el-slider v-model="store.setting.value2"/>
<span>{{ store.setting.value2 }}%</span>
</div>
</div>
</div>
@@ -180,7 +131,7 @@ const setting = reactive({
<div class="row">
<label class="item-title">章节乱序</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -194,7 +145,7 @@ const setting = reactive({
<div class="row">
<label class="item-title">练习时展示上一个/下一个单词</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -208,7 +159,7 @@ const setting = reactive({
<div class="row">
<label class="item-title">是否忽略大小写</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -222,7 +173,7 @@ const setting = reactive({
<div class="row">
<label class="item-title">是否允许默写模式下显示提示</label>
<div class="wrapper">
<el-switch v-model="setting.value1"
<el-switch v-model="store.setting.value1"
inline-prompt
active-text="开"
inactive-text="关"
@@ -239,15 +190,15 @@ const setting = reactive({
<div class="row">
<label class="sut-title">外语字体</label>
<div class="wrapper">
<el-slider v-model="setting.value2"/>
<span>{{ setting.value2 }}px</span>
<el-slider v-model="store.setting.value2"/>
<span>{{ store.setting.value2 }}px</span>
</div>
</div>
<div class="row">
<label class="sut-title">中文字体</label>
<div class="wrapper">
<el-slider v-model="setting.value2"/>
<span>{{ setting.value2 }}px</span>
<el-slider v-model="store.setting.value2"/>
<span>{{ store.setting.value2 }}px</span>
</div>
</div>
</div>
@@ -259,53 +210,6 @@ const setting = reactive({
<style scoped lang="scss">
@import "@/assets/css/colors.scss";
header {
margin-top: 10rem;
height: 60rem;
width: 50%;
background: var(--color-header-bg);
display: flex;
justify-content: space-between;
border-radius: 8rem;
position: relative;
z-index: 2;
padding: 10rem $space;
box-sizing: border-box;
transition: all .3s;
.info {
font-size: 22rem;
color: black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.options {
display: flex;
align-items: center;
gap: 10rem;
}
&.hide {
transform: translateY(calc(-100% - 10rem));
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
cursor: pointer;
transition: all .5s;
transform: translate3d(-50%, 120%, 0) rotate(180deg);
&.down {
transform: translate3d(-50%, 120%, 0) rotate(0);
}
}
}
.setting-modal {
width: 40vw;
height: 80vh;
@@ -388,5 +292,4 @@ header {
}
}
</style>

120
src/components/Toolbar/Toolbar.vue Normal file
View File

@@ -0,0 +1,120 @@
<script setup lang="ts">
import Tooltip from "@/components/Tooltip.vue"
import {
DatabaseFail,
Down,
MenuFold,
Moon,
PreviewCloseOne,
PreviewOpen,
SettingTwo,
SunOne,
VolumeNotice,
Bug
} from "@icon-park/vue-next"
import IconRepeat from '~icons/tabler/repeat'
import useThemeColor from "@/hooks/useThemeColor.ts"
import {useBaseStore} from "@/stores/base.ts"
import SettingModal from "@/components/Toolbar/SettingModal.vue"
import FeedbackModal from "@/components/Toolbar/FeedbackModal.vue"
const {appearance, toggle} = useThemeColor()
const store = useBaseStore()
const showFeedbackModal = $ref(false)
const showSettingModal = $ref(false)
</script>
<template>
<header :class="!store.setting.showToolbar && 'hide'">
<div class="info" @click="store.dictModalIsOpen = true">
CTE-4 第5章
</div>
<div class="options">
<Tooltip title="切换主题">
<moon v-if="appearance === 'dark'" theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"
@click="toggle"/>
<sun-one v-else theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2" @click="toggle"/>
</Tooltip>
<Tooltip title="设置">
<setting-two @click="showSettingModal = true" theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
</Tooltip>
<Tooltip title="反馈">
<bug @click="showFeedbackModal = true" theme="outline" size="20" fill="#999" :strokeWidth="2"/>
</Tooltip>
<Tooltip title="音效设置">
<volume-notice theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
</Tooltip>
<IconRepeat></IconRepeat>
<Tooltip title="单词本">
<preview-open theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
<preview-close-one theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
</Tooltip>
<div class="my-button" @click="store.dictModalIsOpen2 = true">ok</div>
<Tooltip title="单词本">
<menu-fold class="menu" @click="store.sideIsOpen = !store.sideIsOpen"
theme="outline" size="20" fill="#929596"
:strokeWidth="2"/>
</Tooltip>
</div>
<Tooltip :title="store.setting.showToolbar?'收起':'展开'">
<down
@click="store.setting.showToolbar = !store.setting.showToolbar"
class="arrow"
:class="!store.setting.showToolbar && 'down'"
theme="outline" size="24" fill="#999"/>
</Tooltip>
</header>
<SettingModal v-model="showSettingModal"/>
<FeedbackModal v-model="showFeedbackModal"/>
</template>
<style scoped lang="scss">
@import "@/assets/css/colors.scss";
header {
margin-top: 10rem;
height: 60rem;
width: 50%;
background: var(--color-header-bg);
display: flex;
justify-content: space-between;
border-radius: 8rem;
position: relative;
z-index: 2;
padding: 10rem $space;
box-sizing: border-box;
transition: all .3s;
.info {
font-size: 22rem;
color: black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.options {
display: flex;
align-items: center;
gap: 10rem;
}
&.hide {
transform: translateY(calc(-100% - 10rem));
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
cursor: pointer;
transition: all .5s;
transform: translate3d(-50%, 120%, 0) rotate(180deg);
&.down {
transform: translate3d(-50%, 120%, 0) rotate(0);
}
}
}
</style>

7
src/components/Tooltip.vue
View File

@@ -10,6 +10,12 @@ export default {
return ''
}
},
disabled: {
type: Boolean,
default() {
return false
}
}
},
data() {
return {
@@ -18,6 +24,7 @@ export default {
},
methods: {
showPop(e) {
if (this.disabled) return
e.stopPropagation()
let rect = e.target.getBoundingClientRect()
this.show = true