fix(monkey): 样式与优化爬取逻辑

Chilfish · Mar 20, 2024 · 805e599 · 805e599
1 parent 19966da
commit 805e599
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 49 deletions.
diff --git a/apps/monkey/src/App.vue b/apps/monkey/src/App.vue
@@ -12,8 +12,15 @@ import '@ui/shared.css'
   </AppMain>
 </template>
 
-<style>
+<style lang="scss">
 .n-base-clear {
   display: none !important;
 }
+
+#plugin-app {
+ &,
+ & p {
+   font-size: 13px;
+  }
+}
 </style>
diff --git a/apps/monkey/src/Config.vue b/apps/monkey/src/Config.vue
@@ -31,22 +31,26 @@ const dateRange = computed({
       <n-checkbox
         v-model:checked="config.largePic"
         label="导出原图"
+        size="small"
       />
       <n-checkbox
         v-model:checked="config.hasComment"
         label="包含评论"
+        size="small"
       />
       <n-checkbox
         v-model:checked="config.hasRepost"
         label="包含转发的微博"
+        size="small"
       />
       <n-checkbox
         v-show="config.hasRepost"
         v-model:checked="config.repostPic"
         label="导出转发的图片"
+        size="small"
       />
       <button
-        class="py-1 btn bg-#18a058! hover:bg-green-7!"
+        class="py-1 text-3.5 btn bg-#18a058! hover:bg-green-7!"
         @click="() => {
           config.isFetchAll = true
         }"
@@ -62,6 +66,8 @@ const dateRange = computed({
       <span>要获取的评论数（最多20条）</span>
       <n-input-number
         v-model="config.commentCount"
+        size="small"
+        class="w-26"
         :default-value="6"
         :min="0"
         :max="20"

diff --git a/apps/monkey/src/Ctrl.vue b/apps/monkey/src/Ctrl.vue
@@ -26,20 +26,24 @@ const resumeFn = ref<() => void>()
 
 async function saveUserInfo() {
   const user = await userDetail(config.value.uid)
-  user.exportedAt = Date.now().toLocaleString()
+  user.exportedAt = new Date().toLocaleString()
 
   const users = GM_getValue<any[]>('users') ?? []
   const index = users.findIndex((u: any) => u.uid === user.uid)
   if (index !== -1)
-    users[index] = user
+    Object.assign(users[index], user)
   else
     users.push(user)
 
   GM_setValue('users', users)
 
+  console.log('已同步的用户信息', users)
   message.success('用户信息同步成功')
 }
 
+/**
+ * 导出数据
+ */
 async function exportDatas() {
   const res = await exportData(postStore.posts)
   if (!res)
@@ -94,23 +98,29 @@ watch(isStop, (val, oldVal) => {
 
 window.$message = useMessage()
 
-onMounted(async () => {
+/**
+ * 初始化用户信息
+ */
+async function init() {
   const id = document.URL.match(/\/(\d+)/)?.[1] ?? ''
   const username = document.URL.match(/\/n\/(.+)/)?.[1] ?? ''
   const { uid, name } = await userInfo({ id, name: decodeURIComponent(username) })
 
-  configStore.initConfig()
   configStore.setConfig({
     uid,
     name,
   })
+}
+
+onMounted(async () => {
+  await init()
 })
 </script>
 
 <template>
   <div
-    v-show="!config.isMinimize"
-    class="card w-34rem"
+    v-show="!configStore.isMinimize"
+    class="card w-32rem shadow-xl"
   >
     <div class="flex items-center justify-between">
       <h2 class="text-5 text-black font-bold">
@@ -119,16 +129,20 @@ onMounted(async () => {
 
       <button
         title="最小化"
-        @click="config.isMinimize = !config.isMinimize"
+        @click="configStore.toggleMinimize"
       >
         <i class="i-tabler:arrows-minimize icon" />
       </button>
     </div>
+
     <n-alert
-      title="爬取过程中请勿刷新或关闭，否则导致已有的数据丢失而重头来过"
       type="warning"
       closable
-    />
+    >
+      <p>
+        请勿刷新或关闭页面，否则导致已有的数据丢失而重头来过
+      </p>
+    </n-alert>
 
     <n-alert type="info">
       <p>
@@ -191,9 +205,8 @@ onMounted(async () => {
   </div>
 
   <div
-    v-show="config.isMinimize"
-    class="card minimize"
-    @click="config.isMinimize = !config.isMinimize"
+    class="card minimize shadow-xl"
+    @click="configStore.toggleMinimize"
   >
     <img
       src="https://p.chilfish.top/weibo/icon.webp"
@@ -218,7 +231,7 @@ p {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 1rem; /* 16px */
+  gap: 0.5rem; /* 16px */
   border-radius: 0.5rem; /* 8px */
   padding: 1rem; /* 16px */
   background-color: white;
@@ -227,7 +240,7 @@ p {
 }
 
 .minimize {
-  width: 4rem;
+  z-index: 0;
   padding: 6px;
 }
 </style>
diff --git a/apps/monkey/src/main.ts b/apps/monkey/src/main.ts
@@ -18,6 +18,7 @@ async function initApp() {
 
 if (document.location.hostname === 'weibo.com') {
   initApp()
+  console.log('weibo-archiver 加载成功')
 }
 else {
   const users = GM_getValue('users') || []

diff --git a/apps/monkey/src/stores/configStore.ts b/apps/monkey/src/stores/configStore.ts
@@ -1,48 +1,38 @@
 import { defineStore } from 'pinia'
 import type { FetchOptions } from '@types'
 
-type Config = Omit<FetchOptions, 'cookie'> & {
-  isMinimize: boolean
-}
-
 export const useConfigStore = defineStore('config', () => {
   const now = Date.now()
-  const localData = JSON.parse(localStorage.getItem('fetchOptions') || '{}') as Config
+  const KEY_MINIMIZE = 'archiver-isMinimize'
+
+  const isMinimize = ref(localStorage.getItem(KEY_MINIMIZE) === 'true')
 
-  const state = reactive<Config>({
+  const state = reactive<FetchOptions>({
     uid: '',
     name: '',
     isFetchAll: true,
     largePic: true,
     repostPic: true,
     hasRepost: true,
     hasComment: true,
+    hasFavorite: true,
     commentCount: 6,
     dateRange: [now, now],
-    isMinimize: true,
   })
 
-  // 判断 key 是否都相等，如果相等则初始化配置
-  function initConfig() {
-    const keys = Object.keys(state)
-    const localKeys = Object.keys(localData)
-    const isSame = keys.every(key => localKeys.includes(key))
-
-    if (isSame)
-      setConfig(localData)
-  }
-
-  function setConfig(config: Partial<Config>) {
+  function setConfig(config: Partial<FetchOptions>) {
     Object.assign(state, config)
   }
 
-  watchEffect(() => {
-    localStorage.setItem('fetchOptions', JSON.stringify(state))
-  })
+  function toggleMinimize() {
+    isMinimize.value = !isMinimize.value
+    localStorage.setItem(KEY_MINIMIZE, isMinimize.value.toString())
+  }
 
   return {
     state,
+    isMinimize,
     setConfig,
-    initConfig,
+    toggleMinimize,
   }
 })
diff --git a/apps/monkey/src/stores/postStore.ts b/apps/monkey/src/stores/postStore.ts
@@ -2,36 +2,38 @@ import { defineStore } from 'pinia'
 import type { Post } from '@types'
 
 export const usePostStore = defineStore('post', () => {
-  // 获取到的所有帖子
-  const posts = ref([] as Post[])
+  /* 获取到的所有帖子 */
+  const posts = shallowRef([] as Post[])
 
-  // 已获取的页数
+  /* 已获取的页数 */
   const fetchedPage = ref(0)
-  // 每页显示的帖子数量 ppp
+  /* 每页的帖子数量 */
   const pageSize = ref(20)
 
-  // 总帖子数
-  const total = ref(posts.value.length)
-  // 总页数
+  /* 总帖子数 */
+  const total = ref(0)
+  /* 总页数 */
   const pages = computed(() => Math.ceil(total.value / pageSize.value))
 
   /**
    * 重置
    */
   function reset() {
     posts.value = []
+    total.value = 0
     pageSize.value = 20
     fetchedPage.value = 0
   }
 
   /**
    * 添加帖子
-   * @param newPosts
    */
   function add(newPosts: Post[]) {
     // pageSize.value = newPosts.length
     posts.value = [...posts.value, ...newPosts]
+    triggerRef(posts)
     fetchedPage.value++
+    pageSize.value = (newPosts.length || 20)
   }
 
   return {

diff --git a/packages/core/src/services/postService.ts b/packages/core/src/services/postService.ts
@@ -162,10 +162,10 @@ export async function fetchPosts(
 
   const { startLoop, resume, pause } = usePausableLoop(
     async () => {
-      await fetching()
+      const res = await fetching()
 
       // 如果已经获取到所有帖子
-      if (stopCondition())
+      if (stopCondition() || !res?.list.length)
         return { isStop: true }
       return { isStop: false }
     },

diff --git a/packages/core/src/utils/export.ts b/packages/core/src/utils/export.ts
@@ -19,7 +19,9 @@ export async function exportData(posts: Post[]) {
     const dataBlob = new Blob([data], { type: 'application/json' })
     const imgsDataBlob = new Blob([imgsData], { type: 'text/csv' })
 
-    window.$message.success('导出成功，正在下载数据...请允许浏览器批量下载文件')
+    window.$message.success('导出成功，正在下载数据...请允许浏览器批量下载文件', {
+      duration: 5000,
+    })
 
     fileSaver.saveAs(dataBlob, `weibo-data-${name}.json`)
     fileSaver.saveAs(imgsDataBlob, `imgs-${name}.csv`)

diff --git a/types/config.ts b/types/config.ts
@@ -32,6 +32,10 @@ export interface FetchOptions {
    * 是否包含评论
    */
   hasComment: boolean
+  /**
+   * 包括收藏的微博
+   */
+  hasFavorite: boolean
   /**
    * 评论的数量
    */