478 lines
11 KiB
Vue
478 lines
11 KiB
Vue
<template>
|
||
<div
|
||
class="settings-wrapper"
|
||
:style="popupTheme"
|
||
:class="{ night: isNight, day: !isNight }"
|
||
>
|
||
<div class="settings-title">设置</div>
|
||
<div class="setting-list">
|
||
<ul>
|
||
<li class="theme-list">
|
||
<i>阅读主题</i>
|
||
<span
|
||
class="theme-item"
|
||
v-for="(themeColor, index) in themeColors"
|
||
:key="index"
|
||
:style="themeColor"
|
||
ref="themes"
|
||
@click="setTheme(index)"
|
||
:class="{ selected: selectedTheme == index }"
|
||
><em v-if="index < 6" class="iconfont"></em
|
||
><em v-else class="moon-icon">{{ moonIcon }}</em></span
|
||
>
|
||
</li>
|
||
<li class="font-list">
|
||
<i>正文字体</i>
|
||
<span
|
||
class="font-item"
|
||
v-for="(font, index) in fonts"
|
||
:key="index"
|
||
:class="{ selected: selectedFont == index }"
|
||
@click="setFont(index)"
|
||
>{{ font }}</span
|
||
>
|
||
</li>
|
||
<li class="font-list">
|
||
<i>自定字体</i>
|
||
<el-tooltip effect="dark" content="自定义的字体名称" placement="top">
|
||
<input
|
||
type="text"
|
||
class="font-item font-item-input"
|
||
v-model="customFontName"
|
||
placeholder="请输入自定义的字体名称"
|
||
/>
|
||
</el-tooltip>
|
||
|
||
<el-popover
|
||
placement="top"
|
||
width="180"
|
||
trigger="click"
|
||
v-model:visible="customFontSavePopVisible"
|
||
>
|
||
<p>
|
||
请确认输入的字体名称完整无误，并且该字体已经安装在您的设备上。
|
||
</p>
|
||
<p>确定保存吗？</p>
|
||
<div style="text-align: right; margin: 0">
|
||
<el-button
|
||
size="small"
|
||
plain
|
||
@click="customFontSavePopVisible = false"
|
||
>取消</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="
|
||
setCustomFont();
|
||
customFontSavePopVisible = false;
|
||
"
|
||
>确定</el-button
|
||
>
|
||
</div>
|
||
<template #reference>
|
||
<span type="text" class="font-item">保存</span>
|
||
</template>
|
||
</el-popover>
|
||
</li>
|
||
<li class="font-size">
|
||
<i>字体大小</i>
|
||
<div class="resize">
|
||
<span class="less" @click="lessFontSize"
|
||
><em class="iconfont"></em></span
|
||
><b></b> <span class="lang">{{ fontSize }}</span
|
||
><b></b>
|
||
<span class="more" @click="moreFontSize"
|
||
><em class="iconfont"></em></span
|
||
>
|
||
</div>
|
||
</li>
|
||
<li class="read-width" v-if="!store.miniInterface">
|
||
<i>页面宽度</i>
|
||
<div class="resize">
|
||
<span class="less" @click="lessReadWidth"
|
||
><em class="iconfont"></em></span
|
||
><b></b> <span class="lang">{{ readWidth }}</span
|
||
><b></b>
|
||
<span class="more" @click="moreReadWidth"
|
||
><em class="iconfont"></em></span
|
||
>
|
||
</div>
|
||
</li>
|
||
<li class="infinite-loading">
|
||
<i>无限加载</i>
|
||
<span
|
||
class="infinite-loading-item"
|
||
:key="0"
|
||
:class="{ selected: infiniteLoading == false }"
|
||
@click="setInfiniteLoading(false)"
|
||
>关闭</span
|
||
>
|
||
<span
|
||
class="infinite-loading-item"
|
||
:key="1"
|
||
:class="{ selected: infiniteLoading == true }"
|
||
@click="setInfiniteLoading(true)"
|
||
>开启</span
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import "../assets/fonts/popfont.css";
|
||
import "../assets/fonts/iconfont.css";
|
||
import settings from "../plugins/config";
|
||
import API from "@api";
|
||
const store = useBookStore();
|
||
|
||
const theme = ref(0);
|
||
|
||
const isNight = ref(store.config.theme == 6);
|
||
const moonIcon = ref("");
|
||
const themeColors = shallowRef([
|
||
{
|
||
background: "rgba(250, 245, 235, 0.8)",
|
||
},
|
||
{
|
||
background: "rgba(245, 234, 204, 0.8)",
|
||
},
|
||
{
|
||
background: "rgba(230, 242, 230, 0.8)",
|
||
},
|
||
{
|
||
background: "rgba(228, 241, 245, 0.8)",
|
||
},
|
||
{
|
||
background: "rgba(245, 228, 228, 0.8)",
|
||
},
|
||
{
|
||
background: "rgba(224, 224, 224, 0.8)",
|
||
},
|
||
{
|
||
background: "rgba(0, 0, 0, 0.5)",
|
||
},
|
||
]);
|
||
const moonIconStyle = ref({
|
||
display: "inline",
|
||
color: "rgba(255,255,255,0.2)",
|
||
});
|
||
const fonts = ref(["雅黑", "宋体", "楷书"]);
|
||
const customFontName = ref(store.config.customFontName);
|
||
const customFontSavePopVisible = ref(false);
|
||
|
||
onMounted(() => {
|
||
//初始化设置项目
|
||
var config = store.config;
|
||
theme.value = config.theme;
|
||
if (theme.value == 6) {
|
||
moonIcon.value = "";
|
||
} else {
|
||
moonIcon.value = "";
|
||
}
|
||
});
|
||
const config = computed(() => {
|
||
return store.config;
|
||
});
|
||
const popupTheme = computed(() => {
|
||
return {
|
||
background: settings.themes[config.value.theme].popup,
|
||
};
|
||
});
|
||
const selectedTheme = computed(() => {
|
||
return store.config.theme;
|
||
});
|
||
const selectedFont = computed(() => {
|
||
return store.config.font;
|
||
});
|
||
const fontSize = computed(() => {
|
||
return store.config.fontSize;
|
||
});
|
||
const readWidth = computed(() => {
|
||
return store.config.readWidth;
|
||
});
|
||
const infiniteLoading = computed(() => {
|
||
return store.config.infiniteLoading;
|
||
});
|
||
|
||
const setTheme = (theme) => {
|
||
if (theme == 6) {
|
||
isNight.value = true;
|
||
moonIcon.value = "";
|
||
moonIconStyle.value.color = "#ed4259";
|
||
} else {
|
||
isNight.value = false;
|
||
moonIcon.value = "";
|
||
moonIconStyle.value.color = "rgba(255,255,255,0.2)";
|
||
}
|
||
config.value.theme = theme;
|
||
saveConfig(config.value);
|
||
};
|
||
const setFont = (font) => {
|
||
config.value.font = font;
|
||
saveConfig(config.value);
|
||
};
|
||
const setCustomFont = () => {
|
||
config.value.font = -1;
|
||
config.value.customFontName = customFontName.value;
|
||
saveConfig(config.value);
|
||
};
|
||
const moreFontSize = () => {
|
||
if (config.value.fontSize < 48) config.value.fontSize += 2;
|
||
saveConfig(config.value);
|
||
};
|
||
const lessFontSize = () => {
|
||
if (config.value.fontSize > 12) config.value.fontSize -= 2;
|
||
saveConfig(config.value);
|
||
};
|
||
const moreReadWidth = () => {
|
||
/*if (config.value.readWidth < 960)*/
|
||
config.value.readWidth += 160;
|
||
saveConfig(config.value);
|
||
};
|
||
const lessReadWidth = () => {
|
||
if (config.value.readWidth > 640) config.value.readWidth -= 160;
|
||
saveConfig(config.value);
|
||
};
|
||
const setInfiniteLoading = (loading) => {
|
||
config.value.infiniteLoading = loading;
|
||
saveConfig(config.value);
|
||
};
|
||
const saveConfig = (config) => {
|
||
store.setConfig(config);
|
||
localStorage.setItem("config", JSON.stringify(config));
|
||
uploadConfig(config);
|
||
};
|
||
const uploadConfig = (config) => {
|
||
API.saveReadConfig(config);
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.iconfont) {
|
||
font-family: iconfont;
|
||
font-style: normal;
|
||
}
|
||
|
||
:deep(.moon-icon) {
|
||
font-family: iconfont;
|
||
font-style: normal;
|
||
}
|
||
|
||
.settings-wrapper {
|
||
user-select: none;
|
||
margin: -13px;
|
||
// width: 478px;
|
||
// height: 350px;
|
||
text-align: left;
|
||
padding: 40px 0 40px 24px;
|
||
background: #ede7da url("../assets/imgs/themes/popup_1.png") repeat;
|
||
|
||
.settings-title {
|
||
font-size: 18px;
|
||
line-height: 22px;
|
||
margin-bottom: 28px;
|
||
font-family: FZZCYSK;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.setting-list {
|
||
ul {
|
||
list-style: none outside none;
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
li {
|
||
list-style: none outside none;
|
||
|
||
i {
|
||
font: 12px / 16px PingFangSC-Regular, "-apple-system", Simsun;
|
||
display: inline-block;
|
||
min-width: 48px;
|
||
margin-right: 16px;
|
||
vertical-align: middle;
|
||
color: #666;
|
||
}
|
||
|
||
.theme-item {
|
||
line-height: 32px;
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-right: 16px;
|
||
margin-top: 5px;
|
||
border-radius: 100%;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
|
||
.iconfont {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.selected {
|
||
color: #ed4259;
|
||
|
||
.iconfont {
|
||
display: inline;
|
||
}
|
||
}
|
||
}
|
||
|
||
.font-list,
|
||
.infinite-loading {
|
||
margin-top: 28px;
|
||
|
||
.font-item,
|
||
.infinite-loading-item {
|
||
width: 78px;
|
||
height: 34px;
|
||
cursor: pointer;
|
||
margin-right: 16px;
|
||
border-radius: 2px;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
font: 14px / 34px PingFangSC-Regular, HelveticaNeue-Light,
|
||
"Helvetica Neue Light", "Microsoft YaHei", sans-serif;
|
||
}
|
||
.font-item-input {
|
||
width: 168px;
|
||
color: #000000;
|
||
}
|
||
.selected {
|
||
color: #ed4259;
|
||
border: 1px solid #ed4259;
|
||
}
|
||
|
||
.font-item:hover,
|
||
.infinite-loading-item:hover {
|
||
border: 1px solid #ed4259;
|
||
color: #ed4259;
|
||
}
|
||
}
|
||
|
||
.font-size,
|
||
.read-width {
|
||
margin-top: 28px;
|
||
|
||
.resize {
|
||
display: inline-block;
|
||
width: 274px;
|
||
height: 34px;
|
||
vertical-align: middle;
|
||
border-radius: 2px;
|
||
|
||
span {
|
||
width: 89px;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
|
||
em {
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.less:hover,
|
||
.more:hover {
|
||
color: #ed4259;
|
||
}
|
||
|
||
.lang {
|
||
color: #a6a6a6;
|
||
font-weight: 400;
|
||
font-family: FZZCYSK;
|
||
}
|
||
|
||
b {
|
||
display: inline-block;
|
||
height: 20px;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.night {
|
||
:deep(.theme-item) {
|
||
border: 1px solid #666;
|
||
}
|
||
|
||
:deep(.selected) {
|
||
border: 1px solid #666;
|
||
}
|
||
|
||
:deep(.moon-icon) {
|
||
color: #ed4259;
|
||
}
|
||
|
||
:deep(.font-list),
|
||
.infinite-loading {
|
||
.font-item,
|
||
.infinite-loading-item {
|
||
border: 1px solid #666;
|
||
background: rgba(45, 45, 45, 0.5);
|
||
}
|
||
}
|
||
|
||
:deep(.resize) {
|
||
border: 1px solid #666;
|
||
background: rgba(45, 45, 45, 0.5);
|
||
|
||
b {
|
||
border-right: 1px solid #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.day {
|
||
:deep(.theme-item) {
|
||
border: 1px solid #e5e5e5;
|
||
}
|
||
|
||
:deep(.selected) {
|
||
border: 1px solid #ed4259;
|
||
}
|
||
|
||
:deep(.moon-icon) {
|
||
display: inline;
|
||
color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
:deep(.font-list),
|
||
.infinite-loading {
|
||
.font-item,
|
||
.infinite-loading-item {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
:deep(.resize) {
|
||
border: 1px solid #e5e5e5;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
|
||
b {
|
||
border-right: 1px solid #e5e5e5;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 500px) {
|
||
.settings-wrapper i {
|
||
display: flex !important;
|
||
flex-wrap: wrap;
|
||
padding-bottom: 5px !important;
|
||
}
|
||
}
|
||
</style>
|