fix(ui): fix bugs

apps/desktop/package.json

@@ -57,7 +57,7 @@
     "electron-builder": "24.9.1",
     "electron-devtools-installer": "^3.2.0",
     "playwright": "1.41.2",
-    "unplugin-auto-expose": "0.3.1",
+    "unplugin-auto-expose": "0.3.0",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.4",

apps/monkey/package.json

@@ -10,8 +10,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@weibo-archiver/ui": "workspace:^",
-    "jszip": "3.9.1"
+    "@weibo-archiver/ui": "workspace:^"
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.7",

apps/monkey/src/Ctrl.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useMessage } from 'naive-ui'
-import { exportData } from './utils'
+import { saveAs } from 'file-saver'
+
+import { exportData } from '@core/utils'
 import { useConfigStore, usePostStore } from './stores'
 import Config from './Config.vue'
 
@@ -19,6 +21,14 @@ const progressText = computed(() => () => `${postStore.posts.length}/${postStore
 const pauseFn = ref<() => void>()
 const resumeFn = ref<() => void>()
 
+function exportDatas() {
+  const res = exportData(postStore.posts)
+  if (!res)
+    return
+  const scripts = 'https://github.com/Chilfish/Weibo-archiver/raw/monkey/scripts.zip'
+  saveAs(scripts, 'scripts.zip')
+}
+
 async function start() {
   message.info('开始爬取中，请稍等~', {
     duration: 5000,
@@ -40,7 +50,7 @@ async function start() {
       if (finished) {
         isStart.value = false
         isFinish.value = true
-        exportData(postStore.posts)
+        exportDatas()
       }
       return finished
     },
@@ -60,7 +70,6 @@ watch(isStop, (val, oldVal) => {
     resumeFn.value?.()
 })
 
-// @ts-expect-error TODO: fix this
 window.$message = useMessage()
 
 onMounted(async () => {
@@ -123,7 +132,7 @@ onMounted(async () => {
 
       <button
         v-show="isFinish || isStop"
-        @click="exportData(postStore.posts)"
+        @click="exportDatas"
       >
         导出
       </button>

apps/monkey/src/stores/postStore.ts

@@ -34,10 +34,6 @@ export const usePostStore = defineStore('post', () => {
     fetchedPage.value++
   }
 
-  function getById(id: number): Post[] {
-    return posts.value.filter(post => post.id === id)
-  }
-
   return {
     posts,
     total,
@@ -46,7 +42,6 @@ export const usePostStore = defineStore('post', () => {
     fetchedPage,
 
     add,
-    getById,
     reset,
   }
 })

apps/web/src/App.vue

@@ -6,7 +6,7 @@
   <app-main>
     <n-modal-provider>
       <main-header />
-      <router-view class="mt-12" />
+      <router-view class="mt-16" />
 
       <img-viewer />
     </n-modal-provider>

apps/web/src/Index.vue

@@ -1,25 +1,39 @@
 <script setup lang="ts">
 const postStore = usePostStore()
+const loaded = ref(false)
 onMounted(async () => {
   const ids = await indexDB.getItem<string[]>('ids')
   postStore.ids = ids ?? []
   postStore.total = ids?.length ?? 0
+  loaded.value = true
 })
+
+window.$message = useMessage()
 </script>
 
 <template>
-  <main>
-    <!-- TODO: for debug -->
-    <!-- <n-dialog
-      :show-icon="false"
-      title=" "
-      class="m-16"
-    >
-      <SettingsWeb />
-    </n-dialog> -->
-
+  <main v-if="loaded">
     <Preview
       v-if="postStore.ids.length > 0"
     />
+
+    <div
+      v-else
+      class="pt-8"
+    >
+      <settings-about />
+      <p
+        class="pt-6 font-bold"
+        text="center xl"
+      >
+        暂没微博数据，点击右上角设置来导入吧👋
+      </p>
+    </div>
   </main>
+
+  <n-spin
+    v-else
+    class="center"
+    size="large"
+  />
 </template>

packages/core/src/stores/post.ts

@@ -54,11 +54,10 @@ export const usePostStore = defineStore('post', () => {
       posts = Array.from(new Set(posts.concat(data)))
 
     const _ids = posts.map(post => `post-${post.mblogid}`)
-    ids.value = _ids
 
     await setDB('ids', _ids)
     await setMany(posts.map(post => [`post-${post.mblogid}`, post]))
-
+    ids.value = _ids
     total.value = data.length
   }
 

apps/monkey/src/utils/export.ts → packages/core/src/utils/export.ts

@@ -1,33 +1,22 @@
 import JSZip from 'jszip'
 import { saveAs } from 'file-saver'
 import type { Post } from '@types'
-
-function imgsParser(posts: Post[]): Set<string> {
-  const imgs = posts
-    .map((post) => {
-      return [
-        post.imgs,
-        post.retweeted_status?.imgs,
-        post.comments.map(e => e.img),
-        post.user?.profile_image_url,
-        post.card?.img,
-      ].flat()
-    })
-    .flat()
-    .filter((e): e is string => !!e)
-
-  return new Set(imgs)
-}
-
-const scripts = 'https://github.com/Chilfish/Weibo-archiver/raw/monkey/scripts.zip'
+import { imgsParser } from './parse'
 
 export function exportData(posts: Post[]) {
+  if (!posts[0]) {
+    window.$message.warning('没有数据可以导出')
+    return false
+  }
+
   // 只能固定版本在 3.9.1，因为油猴的升级
   // https://github.com/Stuk/jszip/issues/864
   const zip = new JSZip()
 
+  const name = posts[0].user.screen_name || ''
+
   const data = JSON.stringify(posts)
-  zip.file('weibo-data.json', data)
+  zip.file(`weibo-data-${name}.json`, data)
 
   const imgsData = Array
     .from(imgsParser(posts))
@@ -38,8 +27,12 @@ export function exportData(posts: Post[]) {
     .generateAsync({ type: 'blob' })
     .then((zipFile) => {
       window.$message.success('导出成功，正在下载数据...')
-      saveAs(zipFile, 'weibo-archiver.zip')
+      saveAs(zipFile, `weibo-archiver-${name}.zip`)
+    })
+    .catch((err) => {
+      window.$message.error('导出失败')
+      console.error('导出失败', err)
     })
 
-  saveAs(scripts, 'scripts.zip')
+  return true
 }

packages/core/src/utils/index.ts

@@ -6,6 +6,7 @@ export * from './dom'
 export * from './protocol'
 export * from './fetch'
 export * from './image'
+export * from './export'
 export * from './storage'
 
 export const isElectron = import.meta.env.VITE_IS_ELECTRON === 'true'

packages/ui/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@weibo-archiver/core": "workspace:^",
     "file-saver": "^2.0.5",
+    "jszip": "3.9.1",
     "sass": "^1.71.1"
   },
   "devDependencies": {

packages/ui/src/Preview.vue

@@ -8,8 +8,6 @@ const route = useRoute()
 
 watchImmediate(() => route.params, async () => {
   posts.value = await postStore.get()
-
-  await delay(3000)
 })
 </script>
 

packages/ui/src/settings/base.vue

@@ -4,8 +4,6 @@ import type { Post } from '@types'
 import { clear as clearDB, getMany } from 'idb-keyval'
 import { destr } from 'destr'
 
-import { saveAs } from 'file-saver'
-
 const useLocalImage = useStorage('imgHost', '/')
 const customimgHost = useStorage('customimgHost', '')
 
@@ -39,20 +37,10 @@ function onImportData({ file }: UploadCustomRequestOptions) {
   }
 }
 
-async function exportData() {
+async function exportDatas() {
   const data = await getMany(postStore.ids).then(res => res)
-  if (!data[0]) {
-    message.warning('没有数据可以导出')
-    return
-  }
-
-  const blob = new Blob(
-    [JSON.stringify(data)],
-    { type: 'text/plain' },
-  )
 
-  saveAs(blob, 'weibo-data.json')
-  message.success('导出成功')
+  exportData(data)
 }
 </script>
 
@@ -128,7 +116,7 @@ async function exportData() {
 
         <n-button
           class="w-fit"
-          @click="exportData"
+          @click="exportDatas"
         >
           点击导出
         </n-button>

packages/ui/src/shared.css

@@ -27,11 +27,13 @@
   -moz-osx-font-smoothing: grayscale;
   display: flex;
   flex-direction: column;
+  min-height: 100dvh;
   --uno: bg-light-700 dark:bg-dark-700
 }
 
 .n-message-container.n-message-container--top {
   top: 36px !important;
+  z-index: 9999 !important;
 }
 
 .n-dialog.n-modal {

types/auto-components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']