YanLongChangAn/legado
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(web): fix issue of tags component flickering when fisrt paint night theme bookshelf

Browse Source 
commit 8c268e4f59 unfixed
This commit is contained in:
Xwite
2024-10-03 11:42:25 +08:00
parent 7f4c3f38f2
commit d461a8f42b
4 changed files with 276 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/web/src/main.js
-3
View File
@@ -5,9 +5,6 @@ import store from "@/store";
import "element-plus/theme-chalk/dark/css-vars.css";
createApp(App).use(store).use(router).mount("#app");
//读取阅读界面设置
useBookStore().loadReadConfig();
// 书架 同步Element PLUS 夜间模式
watch(
() => useBookStore().isNight,
modules/web/src/pages/bookshelf/main.js
-2
View File
@@ -6,8 +6,6 @@ import "element-plus/theme-chalk/dark/css-vars.css";
createApp(App).use(store).use(bookRouter).mount("#app");
//读取阅读界面设置
useBookStore().loadReadConfig();
// 同步Element PLUS 夜间模式
watch(
() => useBookStore().isNight,
modules/web/src/store/bookStore.js
-9
View File
@@ -112,14 +112,5 @@ export const useBookStore = defineStore("book", {
if (!this.bookProgress) return Promise.resolve();
return API.saveBookProgress(this.bookProgress);
},
//读取阅读界面配置以初始化夜间模式 以免初次加载书架页面时闪屏
async loadReadConfig() {
return API.getReadConfig()
.then((response) => response.data)
.then(
({ isSuccess, data }) =>
isSuccess && this.setConfig(JSON.parse(data)),
);
},
},
});
modules/web/src/views/BookShelf.vue
+73 -15
View File
@@ -8,9 +8,9 @@
<div class="search-wrapper">
<el-input
placeholder="搜索书籍，在线书籍自动加入书架"
v-model="search"
v-model="searchWord"
class="search-input"
:prefix-icon="Search"
:prefix-icon="SearchIcon"
@keyup.enter="searchBook"
>
</el-input>
@@ -76,15 +76,30 @@
</div>
</template>
<script setup>
<script>
import "@/assets/bookshelf.css";
import "@/assets/fonts/shelffont.css";
import { useBookStore } from "@/store";
import githubUrl from "@/assets/imgs/github.png";
import { useLoading } from "@/hooks/loading";
import { Search } from "@element-plus/icons-vue";
import { Search as SearchIcon } from "@element-plus/icons-vue";
import API from "@api";
export default defineComponent({
beforeRouteEnter: (to, from, next) => {
API.getReadConfig()
.then((response) => response.data)
.then(({ isSuccess, data }) => {
if (isSuccess) {
next((vm) => {
console.log("初始化加载阅读界面配置成功");
vm.saveReadConfig(data);
});
}
})
.catch(() => next());
},
setup: () => {
const store = useBookStore();
const isNight = computed(() => store.isNight);
@@ -104,31 +119,32 @@ const { showLoading, closeLoading, loadingWrapper, isLoading } = useLoading(
// 书架书籍和在线书籍搜索
const books = shallowRef([]);
const shelf = computed(() => store.shelf);
const search = ref("");
const searchWord = ref("");
const isSearching = ref(false);
watchEffect(() => {
if (isSearching.value && search.value != "") return;
if (isSearching.value && searchWord.value != "") return;
isSearching.value = false;
books.value = [];
if (search.value == "") {
if (searchWord.value == "") {
books.value = shelf.value;
return;
}
books.value = shelf.value.filter((book) => {
return (
book.name.includes(search.value) || book.author.includes(search.value)
book.name.includes(searchWord.value) ||
book.author.includes(searchWord.value)
);
});
});
//搜索在线书籍
const searchBook = () => {
if (search.value == "") return;
if (searchWord.value == "") return;
books.value = [];
store.clearSearchBooks();
showLoading();
isSearching.value = true;
API.search(
search.value,
searchWord.value,
(data) => {
if (isLoading) {
closeLoading();
@@ -216,7 +232,14 @@ const handleBookClick = async (book) => {
if (isSeachBook) {
await API.saveBook(book);
}
toDetail(bookUrl, name, author, durChapterIndex, durChapterPos, isSeachBook);
toDetail(
bookUrl,
name,
author,
durChapterIndex,
durChapterPos,
isSeachBook,
);
};
const toDetail = (
bookUrl,
@@ -240,7 +263,10 @@ const toDetail = (
chapterIndex: chapterIndex,
chapterPos: chapterPos,
};
localStorage.setItem("readingRecent", JSON.stringify(readingRecent.value));
localStorage.setItem(
"readingRecent",
JSON.stringify(readingRecent.value),
);
router.push({
path: "/chapter",
});
@@ -259,7 +285,7 @@ const saveReadConfig = (configStr) => {
try {
store.setConfig(JSON.parse(configStr));
} catch {
ElMessage.info("阅读界面解析错误");
ElMessage.info("阅读界面配置解析错误");
}
};
@@ -282,7 +308,6 @@ const fetchBookShelfData = () => {
store.setNewConnect(false);
});
};
onMounted(() => {
//获取最近阅读书籍
let readingRecentStr = localStorage.getItem("readingRecent");
@@ -292,17 +317,38 @@ onMounted(() => {
readingRecent.value.chapterIndex = 0;
}
}
console.log("bookshelf mounted");
API.testLeagdoHttpUrlConnection()
//.then(saveReadConfig) 应该在组件挂载前读取阅读配置
.then(loadShelf)
.catch(function (error) {
store.setConnectType("danger");
store.setConnectStatus("连接异常");
ElMessage.error("后端连接失败异常，请检查阅读WEB服务或者设置其它可用IP");
ElMessage.error(
"后端连接失败异常，请检查阅读WEB服务或者设置其它可用IP",
);
store.setNewConnect(false);
throw error;
});
});
return {
setIP,
isNight,
connectStatus,
connectType,
newConnect,
saveReadConfig,
readingRecent,
searchBook,
books,
handleBookClick,
isSearching,
SearchIcon,
githubUrl,
searchWord,
};
},
});
</script>
<style lang="scss" scoped>
@@ -419,34 +465,42 @@ onMounted(() => {
.index-wrapper {
overflow-x: hidden;
flex-direction: column;
.navigation-wrapper {
padding: 20px 24px;
box-sizing: border-box;
width: 100%;
.navigation-title-wrapper {
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.bottom-wrapper {
flex-direction: row;
> * {
flex-grow: 1;
margin-top: 18px;
.reading-recent,
.setting-item {
margin-bottom: 0px;
}
}
}
.bottom-icons {
display: none;
}
}
.shelf-wrapper {
padding: 0;
flex-grow: 1;
:deep(.el-loading-spinner) {
display: none;
}
@@ -457,20 +511,24 @@ onMounted(() => {
.night {
:deep(.navigation-wrapper) {
background-color: #454545;
.navigation-title {
color: #aeaeae;
}
.search-wrapper {
.search-input {
.el-input__wrapper {
background-color: #454545;
}
.el-input__inner {
color: #b1b1b1;
}
}
}
}
:deep(.shelf-wrapper) {
background-color: #161819;
}