[feat] 适配 TiebaScraper 更新

Sorceresssis · Sorceresssis · commit d20c2df18de5 · 2024-07-13T13:52:19.000+08:00
Sorceresssis/TiebaArchiver@255e436 & 设置 UserPopover 触发延迟 详细描述： 1. 适配了 TiebaScraper 更新 (参考: Sorceresssis/TiebaArchiver@255e436). 对 FragScrapeError 分块进行了支持. 对没有头像的用户数据进行了适配。 2. 设置了 UserPopover 的触 延迟 以防止频繁触发影响用户体验。
diff --git a/README.md b/README.md
@@ -26,4 +26,8 @@ TiebaReader 是一个与 [TiebaScraper](https://github.com/Sorceresssis/TiebaScr
 
 ### EMOJI
 
-本程序仅收录了贴吧默认的 EMOJI 表情，未收录全部表情包资源，因为这需要大量的工作量。未收录的表情会以字符串 `EMOJI(desc, type, id)` 的形式显示。
+本程序仅收录了贴吧默认的 EMOJI 表情，未收录全部表情包资源，因为这需要很大的工作量。未收录的表情会以字符串 `EMOJI(desc, type, id)` 的形式显示。
+
+### 贴吧错误说明
+
+[TiebaScraper: 贴吧错误说明](https://github.com/Sorceresssis/TiebaScraper/blob/main/docs/tieba_error_desc.md)
diff --git a/build/TiebaReader.png b/build/TiebaReader.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,21 +1,22 @@
 {
     "name": "tieba-reader",
     "private": true,
-    "version": "1.0.0",
+    "version": "1.1.0",
     "main": "dist/main/index.js",
     "scripts": {
-        "preview:render": "vite preview",
-        "dev": "npm run dev:render && npm run dev:electron",
+        "dev": "concurrently \"npm run dev:render\" \"npm run dev:electron\"",
         "dev:render": "vite",
         "dev:electron": "npm run build:electron && electron .",
         "build": "npm run build:render && npm run build:electron",
         "build:render": "vue-tsc && vite build",
         "build:electron": "tsc -p ./src/main && node ./script/copy_electron_assets.js",
+        "rebuild": "electron-rebuild -f -w better-sqlite3",
         "release:win": "electron-builder --win",
         "release:mac": "electron-builder --mac",
         "release:linux": "electron-builder --linux"
     },
     "dependencies": {
+        "ajv": "^6.12.6",
         "benz-amr-recorder": "^1.1.5",
         "better-sqlite3": "^11.0.0",
         "element-plus": "^2.7.6",
@@ -25,12 +26,13 @@
         "vue": "^3.4.21"
     },
     "devDependencies": {
+        "@electron/rebuild": "^3.6.0",
         "@types/better-sqlite3": "^7.6.10",
         "@types/node": "^20.14.5",
         "@vitejs/plugin-vue": "^5.0.4",
+        "concurrently": "^8.2.2",
         "electron": "^30.1.0",
         "electron-builder": "^24.13.3",
-        "electron-rebuild": "^3.2.9",
         "typescript": "^5.2.2",
         "vite": "^5.2.0",
         "vue-tsc": "^2.0.6"
diff --git a/src/main/config/resource_path.ts b/src/main/config/resource_path.ts
@@ -0,0 +1,6 @@
+class ResourcePath {
+    public static USER_AVATAR_DEFAULT: string = "../images/user_avatar_default.jpeg"
+}
+
+
+export default ResourcePath
diff --git a/src/main/config/schema.ts b/src/main/config/schema.ts
@@ -0,0 +1,3 @@
+export const SCRAPE_INFO_SCHEMA = {
+    type: 'object',
+}
diff --git a/src/main/services/ScrapeInfoService.ts b/src/main/services/ScrapeInfoService.ts
@@ -1,14 +1,17 @@
 import n_fs from "node:fs"
 import { injectable, inject } from "inversify";
 import InjectType from "../container/inject_type";
+import Ajv from "ajv";
+import { SCRAPE_INFO_SCHEMA } from "../config/schema";
 import DataDirStruct from "../config/scrapeDataSourceDirStruct";
 import Result from "../pojo/Result";
 
 
 @injectable()
 class ScrapeInfoService {
     public constructor(
-        @inject(InjectType.ScrapeDataPath) private dataSource: string
+        @inject(InjectType.ScrapeDataPath) private dataSource: string,
+        private scrapeInfoValidator = new Ajv().compile(SCRAPE_INFO_SCHEMA),
     ) { }
 
     public async get(): Promise<Result> {
diff --git a/src/main/services/ThreadService.ts b/src/main/services/ThreadService.ts
@@ -1,22 +1,21 @@
 import n_fs from "node:fs";
-import n_path from "node:path"
+import n_path from "node:path";
 import { injectable, inject } from "inversify";
 import container from "../container/container";
 import InjectType from "../container/inject_type";
 import Result from "../pojo/Result";
 import ThreadInfoDTO from "../dto/ThreadInfoDTO";
 import ScrapeDataSourceDirStruct from "../config/scrapeDataSourceDirStruct";
 import type ScrapeInfoService from "./ScrapeInfoService";
-import type UserService from "./UserService";
-import PostService from "./PostService";
+import type PostService from "./PostService";
 
 
 @injectable()
 class ThreadService {
     public constructor(
         @inject(InjectType.ScrapeDataPath) private scrapeDataPath: string,
         @inject(InjectType.ThreadID) private tid: number,
-        @inject(InjectType.ScrapeInfoService) private scrapeInfoService: ScrapeInfoService
+        @inject(InjectType.ScrapeInfoService) private scrapeInfoService: ScrapeInfoService,
     ) { }
 
     public async getThreadInfo(): Promise<Result> {
diff --git a/src/main/services/UserService.ts b/src/main/services/UserService.ts
@@ -1,8 +1,9 @@
 import n_path from "node:path"
 import { injectable, inject } from "inversify";
 import InjectType from "../container/inject_type";
-import type UserDao from "../dao/UserDao";
 import ScrapeDataSourceDirStruct from "../config/scrapeDataSourceDirStruct";
+import ResourcePath from "../config/resource_path";
+import type UserDao from "../dao/UserDao";
 
 @injectable()
 class UserService {
@@ -18,8 +19,10 @@ class UserService {
 
 
     public getUserInfo(id: number): DTO.User | undefined {
-        const user = this.userDao.getUserById(id)
-        if (user) user.avatar = 'file:///' + n_path.join(this.userAvatarDir, user.avatar)
+        const user: DTO.User = this.userDao.getUserById(id) as any
+        if (user) user.avatar = user.avatar ?
+            'file:///' + n_path.join(this.userAvatarDir, user.avatar)
+            : ResourcePath.USER_AVATAR_DEFAULT
         return user
     }
 }
diff --git a/src/main/types/entity.d.ts b/src/main/types/entity.d.ts
@@ -69,6 +69,11 @@ declare namespace Entity {
         type: number
     }
 
+    interface FragScrapeError extends ContentFragment {
+        error_frag_type: int
+        error_frag_name: string
+    }
+
     interface FragText extends ContentFragment {
         text: string
     }
@@ -127,7 +132,7 @@ declare namespace Entity {
         portrait: string
         username: string | null
         nickname: string
-        avatar: string
+        avatar: string | null
         glevel: number
         gender: number  // 0 unknown, 1 male, 2 female
         ip: string
diff --git a/src/main/types/vo.d.ts b/src/main/types/vo.d.ts
@@ -9,6 +9,11 @@ declare namespace VO {
         type: number
     }
 
+    interface FragScrapeError extends VO.ContentFragment {
+        error_frag_type: int
+        error_frag_name: string
+    }
+
     interface FragText extends ContentFragment {
         text: string
     }
@@ -91,5 +96,5 @@ declare namespace VO {
         reply_to_user: VO.User // 独有
     }
 
-    type User = Entity.User
+    type User = Omit<Entity.User, 'avatar'> & { avatar: string | undefined };
 }
diff --git a/src/render/assets/css/common.css b/src/render/assets/css/common.css
@@ -66,4 +66,14 @@
 /* 分割线 */
 .divider:not(:last-child) {
     border-bottom: 1px solid #d6dee5;
+}
+
+.float-left {
+    float: left;
+}
+
+.float-left::after {
+    content: "";
+    display: table;
+    clear: both;
 }
diff --git a/src/render/assets/css/element-plus.css b/src/render/assets/css/element-plus.css
@@ -1,3 +1,8 @@
+:root {
+    --el-overlay-color-lighter: rgba(0, 0, 0, 0.35) !important;
+    --el-mask-color: rgba(255, 255, 255, .6) !important;
+}
+
 .el-divider__text {
     background-color: inherit !important;
 }
diff --git a/src/render/assets/css/thread.css b/src/render/assets/css/thread.css
@@ -1,3 +1,7 @@
+:root {
+    --collapse-thumb-track-width: 16px
+}
+
 .iconfont {
     font-size: inherit !important;
     vertical-align: middle !important;
@@ -16,6 +20,7 @@
     color: rgb(25, 103, 210);
     font-size: 13px;
     cursor: pointer;
+    text-underline-position: under;
 }
 
 .link:hover {
@@ -41,17 +46,11 @@
     overflow: hidden;
 }
 
-#page .right-container {
-    width: 300px;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-
 .thread {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
-    padding: 6px 30px;
+    padding: 6px 30px 6px calc(30px - var(--collapse-thumb-track-width));
     border-bottom: 1px solid #d6dee5;
 }
 
@@ -106,6 +105,8 @@
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
+    margin: 0 20px;
+    user-select: none;
 }
 
 .footer {
diff --git a/src/render/components/Comment.vue b/src/render/components/Comment.vue
@@ -5,7 +5,8 @@
                 <div class="avatar-wrap">
                     <el-avatar :size="'default'"
                                shape="square"
-                               :src="comment.user.avatar" />
+                               :src="comment.user.avatar"
+                               @error="handleUserAvatarError" />
                 </div>
             </user-popover>
         </div>
@@ -35,17 +36,23 @@
 <script setup lang="ts">
 import { ElAvatar } from 'element-plus';
 import { formatTimestampToDateTimeString } from '@/utils/time';
+import ResourcePath from '@/constant/resource_path';
 import UserPopover from './UserPopover.vue';
 import TiebaTag from './TiebaTag.vue';
 import Bawu from '@/components/Bawu.vue';
 import TiebaGlevel from '@/components/TiebaGlevel.vue'
 import TiebaLevel from '@/components/TiebaLevel.vue'
 import Contents from '@/components/Contents.vue';
 
-defineProps<{
+const props = defineProps<{
     comment: VO.Comment
 }>()
 
+
+const handleUserAvatarError = function () {
+    props.comment.user.avatar = ResourcePath.USER_AVATAR_DEFAULT
+}
+
 </script>
 
 <style>
diff --git a/src/render/components/Post.vue b/src/render/components/Post.vue
@@ -5,7 +5,8 @@
                 <div class="avatar-wrap">
                     <el-avatar size="large"
                                shape="square"
-                               :src="post.user.avatar" />
+                               :src="post.user.avatar"
+                               @error="handleUserAvatarError" />
                 </div>
             </user-popover>
         </div>
@@ -82,6 +83,7 @@
 import { onMounted, reactive, ref, inject, readonly, toRaw } from 'vue'
 import { formatTimestampToDateTimeString } from '@/utils/time';
 import InitialValue from '@/constant/initial_value';
+import ResourcePath from '@/constant/resource_path';
 import { ElAvatar, ElPagination, ElMessage, ElCollapseTransition } from 'element-plus';
 import UserPopover from './UserPopover.vue';
 import TiebaTag from './TiebaTag.vue';
@@ -124,6 +126,10 @@ const queryComments = function () {
     })
 }
 
+const handleUserAvatarError = function () {
+    props.post.user.avatar = ResourcePath.USER_AVATAR_DEFAULT
+}
+
 const handleSwitchExpandComments = function () {
     isExpandComments.value = !isExpandComments.value
 }
@@ -148,6 +154,7 @@ onMounted(() => {
     padding: 22px 15px 0 var(--post-avatar-width);
     position: relative;
     box-sizing: border-box;
+    user-select: text;
 }
 
 .post-avatar {
diff --git a/src/render/components/UserPopover.vue b/src/render/components/UserPopover.vue
@@ -1,6 +1,7 @@
 <template>
     <el-popover trigger="hover"
-                :width="popoverWidth">
+                :width="popoverWidth"
+                :show-after="showAfter">
         <template #reference>
             <slot></slot>
         </template>
@@ -11,7 +12,8 @@
                     <div class="avatar-wrap">
                         <el-avatar :src="user.avatar"
                                    shape="square"
-                                   size="large" />
+                                   size="large"
+                                   @error="handleUserAvatarError" />
                     </div>
                 </div>
                 <div class="nickname-row">
@@ -65,14 +67,20 @@
 </template>
 
 <script setup lang="ts">
+import ResourcePath from '@/constant/resource_path';
 import { ElAvatar, ElPopover } from 'element-plus';
 
 const popoverWidth = '360px'
+const showAfter = 500
 
-defineProps<{
+const props = defineProps<{
     user: VO.User
 }>();
 
+const handleUserAvatarError = function () {
+    props.user.avatar = ResourcePath.USER_AVATAR_DEFAULT
+}
+
 </script>
 
 <style>
diff --git a/src/render/components/content_frag/ContentFrag.vue b/src/render/components/content_frag/ContentFrag.vue
@@ -15,12 +15,15 @@
                 :frag="frag as VO.FragVideo" />
     <frag-voice v-else-if="FragType.VOICE === frag.type"
                 :frag="frag as VO.FragVoice" />
-    <div v-else
-         :frag="frag"></div>
+    <frag-scrape-error v-else-if="FragType.SCRAPE_ERROR === frag.type"
+                       :frag="frag as VO.FragScrapeError" />
+    <span v-else
+          :frag="frag"></span>
 </template>
 
 <script setup lang="ts">
 import { FragType } from '@/constant/enum';
+import FragScrapeError from '@/components/content_frag/FragScrapeError.vue';
 import FragText from '@/components/content_frag/FragText.vue';
 import FragEmoji from '@/components/content_frag/FragEmoji.vue';
 import FragImage from '@/components/content_frag/FragImage.vue';
diff --git a/src/render/components/content_frag/FragEmoji.vue b/src/render/components/content_frag/FragEmoji.vue
@@ -4,8 +4,10 @@
          width="20px"
          height="20px"
          :src="generateEmojiUrl(frag)"
+         :title="frag.desc"
          @error="handleError">
-    <span v-else>{{ emojiErrorText }}</span>
+    <span v-else
+          :title="frag.desc">{{ emojiErrorText }}</span>
 </template>
 
 <script setup lang="ts">
diff --git a/src/render/components/content_frag/FragScrapeError.vue b/src/render/components/content_frag/FragScrapeError.vue
diff --git a/src/render/constant/enum.ts b/src/render/constant/enum.ts
diff --git a/src/render/constant/resource_path.ts b/src/render/constant/resource_path.ts
diff --git a/src/render/public/images/user_avatar_default.jpeg b/src/render/public/images/user_avatar_default.jpeg
diff --git a/src/render/thread/App.vue b/src/render/thread/App.vue
diff --git a/src/render/thread/views/Sidebar.vue b/src/render/thread/views/Sidebar.vue

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const SCRAPE_INFO_SCHEMA = {`
	`2`	`+ type: 'object',`
	`3`	`+}`