web端优化数据加载

modules/web/src/components/BookItems.vue

@@ -76,7 +76,7 @@ const subJustify = computed(() =>
 )
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .books-wrapper {
   overflow: auto;
 

modules/web/src/components/CatalogItem.vue

@@ -33,7 +33,7 @@ const catas = computed(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .selected {
   color: #eb4259;
 }

modules/web/src/components/ChapterContent.vue

@@ -26,6 +26,7 @@ import type { webReadConfig } from '@/web'
 const store = useBookStore()
 const readWidth = computed(() => store.config.readWidth)
 const bookUrl = computed(() => store.readingBook.bookUrl)
+
 const props = defineProps<{
   chapterIndex: number
   contents: Array<string>
@@ -116,7 +117,7 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .title {
   margin-bottom: 57px;
   font:

modules/web/src/components/PopCatalog.vue

@@ -92,7 +92,7 @@ const gotoChapter = (chapter: BookChapter) => {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .cata-wrapper {
   margin: -16px;
   padding: 18px 0 24px 25px;

modules/web/src/components/ReadSettings.vue

@@ -356,7 +356,7 @@ const setInfiniteLoading = (loading: boolean) => {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 :deep(.iconfont) {
   font-family: iconfont;
   font-style: normal;

modules/web/src/components/SourceDebug.vue

@@ -60,7 +60,7 @@ const isBookSource = computed(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 :deep(#debug-text) {
   height: calc(100vh - 45px - 36px - 5px);
 }

modules/web/src/components/SourceHelp.vue

@@ -53,7 +53,7 @@ import { Link } from '@element-plus/icons-vue'
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .el-link {
   padding: 4px;
 }

modules/web/src/components/SourceItem.vue

@@ -36,7 +36,7 @@ const isSaveError = computed(() => {
   return !map.has(sourceUrl.value)
 })
 </script>
-<style scoped>
+<style lang="scss" scoped>
 :deep(.el-checkbox__label) {
   flex: 1;
   display: flex;

modules/web/src/components/SourceJson.vue

@@ -34,7 +34,7 @@ watchEffect(async () => {
   }
 })
 </script>
-<style scoped>
+<style lang="scss" scoped>
 :deep(.el-input) {
   width: 100%;
 }

modules/web/src/components/SourceList.vue

@@ -143,7 +143,7 @@ const outExport = () => {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .tool {
   display: flex;
   margin: 4px 0;

modules/web/src/components/ToolBar.vue

@@ -309,7 +309,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .flex-space-between {
   display: flex;
   justify-content: space-between;