feat: add userInfo, add saveing completed

loo-y · Oct 30, 2023 · 4c4e28b · 4c4e28b
1 parent 8ce264d
commit 4c4e28b
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 16 deletions.
diff --git a/app/scripts/reactVirtual/interface.ts b/app/scripts/reactVirtual/interface.ts
@@ -17,4 +17,5 @@ export enum WeiboPopType {
     typeSelect = `typeSelect`,
     saving = `saving`,
     stop = `stop`,
+    completed = `completed`,
 }
diff --git a/app/scripts/reactVirtual/modules/SavingWeiboPopup.tsx b/app/scripts/reactVirtual/modules/SavingWeiboPopup.tsx
@@ -29,6 +29,8 @@ const SavingWeiboPopup = () => {
         dispatch(
             updateState({
                 stopSaving: true,
+                totalCountSaveingWeibo: 0,
+                currentSavingWeiboCount: 0,
                 showWeiboPop: WeiboPopType.hidden,
             })
         )
@@ -47,6 +49,8 @@ const SavingWeiboPopup = () => {
         dispatch(
             updateState({
                 stopSaving: true,
+                totalCountSaveingWeibo: 0,
+                currentSavingWeiboCount: 0,
                 showWeiboPop: WeiboPopType.hidden,
             })
         )
@@ -183,6 +187,36 @@ const SavingWeiboPopup = () => {
         )
     }
 
+    if (showWeiboPop == WeiboPopType.completed) {
+        return (
+            <div className="flex fixed p-4 inset-0 bg-black bg-opacity-30 z-[9999]">
+                <div className="bg-white absolute right-[5rem] top-[5rem] rounded-xl h-[14rem] w-[28rem] py-4 pl-8 pr-6 flex flex-col text-gray-500 gap-2">
+                    <div className="title flex w-full text-lg font-bold flex-row gap-2 mt-2">
+                        <span className="">{`已备份完成`}</span>
+                    </div>
+                    <div className="flex ml-1 mt-1 subtitle flex-row w-full text-xs text-gray-800 text-opacity-70 gap-2">
+                        <div className="">
+                            <span>
+                                {currentSavingWeiboCount
+                                    ? `共备份${currentSavingWeiboCount}条微博`
+                                    : `备份微博总数：未知`}
+                            </span>
+                        </div>
+                    </div>
+                    <div className="absolute bottom-6 right-6 flex mt-3 w-full item-center justify-end">
+                        <div className="flex flex-row gap-6">
+                            <button
+                                className="relative cursor-pointer rounded-lg bg-orange-500 px-3 py-1 text-gray-50 shadow-lg shadow-orange-500/50 hover:shadow-orange-600/50 hover:bg-orange-600 active:top-[0.5px] active:left-[0.5px]"
+                                onClick={handleClose}
+                            >
+                                好的
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
     if (showWeiboPop == WeiboPopType.saving) {
         return (
             <div className="flex fixed p-4 inset-0 bg-black bg-opacity-30 z-[9999]">

diff --git a/app/scripts/reactVirtual/slice.ts b/app/scripts/reactVirtual/slice.ts
@@ -270,6 +270,7 @@ export const saveWeiboQueue = createAsyncThunk(
             updateState({
                 stopSaving: false,
                 showWeiboPop: WeiboPopType.saving,
+                currentSavingWeiboCount: 0,
                 totalCountSaveingWeibo: 0,
             })
         )
@@ -306,8 +307,8 @@ export const saveWeiboQueue = createAsyncThunk(
         if (_.isEmpty(onePageList)) {
             dispatch(
                 updateState({
-                    showWeiboPop: WeiboPopType.hidden,
-                    currentSavingWeiboCount: 0,
+                    showWeiboPop: WeiboPopType.completed,
+                    // currentSavingWeiboCount: 0,
                     currentSavingWeiboPicCount: 0,
                     currentSavingWeiboVideoCount: 0,
                 })
@@ -342,8 +343,8 @@ export const saveWeiboQueue = createAsyncThunk(
         if (isEnd || stopSaving) {
             dispatch(
                 updateState({
-                    showWeiboPop: WeiboPopType.hidden,
-                    currentSavingWeiboCount: 0,
+                    showWeiboPop: WeiboPopType.completed,
+                    // currentSavingWeiboCount: 0,
                     currentSavingWeiboPicCount: 0,
                     currentSavingWeiboVideoCount: 0,
                 })

diff --git a/app/scripts/utils/tools.ts b/app/scripts/utils/tools.ts
@@ -116,6 +116,7 @@ const convertBlogList = async ({
 }: ISaveBlogToZipProps & { zipContainer: JSZip; eachCallback?: (info: any) => void }): Promise<void> => {
     const imageFolder = zipContainer.folder('image')
     const videoFolder = zipContainer.folder('video')
+    const userInfo = myBlog?.[0]?.user || {}
     let totalPicShowList: { picName: string; url: string }[] = []
     let finalList: typeof myBlog = []
     let _count = 0
@@ -160,7 +161,7 @@ const convertBlogList = async ({
                           const url = picInfo?.large?.url || undefined
                           if (!url) return undefined
                           return {
-                              picName: url.match(/\/([\da-zA-Z]+\.[a-z]{3,4})$/)?.[1] || `${picKey}.jpg`,
+                              picName: matchImageFromUrl(url) || `${picKey}.jpg`,
                               url,
                           }
                       })
@@ -171,7 +172,7 @@ const convertBlogList = async ({
                 if (type == `pic`) {
                     const url = data?.large?.url || undefined
                     picShows.push({
-                        picName: url.match(/\/([\da-zA-Z]+\.[a-z]{3,4})$/)?.[1] || `${data?.pic_id}.jpg`,
+                        picName: matchImageFromUrl(url) || `${data?.pic_id}.jpg`,
                         url,
                     })
                 }
@@ -215,7 +216,7 @@ const convertBlogList = async ({
                               const url = picInfo?.large?.url || undefined
                               if (!url) return undefined
                               return {
-                                  picName: url.match(/\/([\da-zA-Z]+\.[a-z]{3,4})$/)?.[1] || `${picKey}.jpg`,
+                                  picName: matchImageFromUrl(url) || `${picKey}.jpg`,
                                   url,
                               }
                           })
@@ -226,7 +227,7 @@ const convertBlogList = async ({
                     if (type == `pic`) {
                         const url = data?.large?.url || undefined
                         retweeted_status_picShows.push({
-                            picName: url.match(/\/([\da-zA-Z]+\.[a-z]{3,4})$/)?.[1] || `${data?.pic_id}.jpg`,
+                            picName: matchImageFromUrl(url) || `${data?.pic_id}.jpg`,
                             url,
                         })
                     }
@@ -350,7 +351,19 @@ const convertBlogList = async ({
         })
     }
 
-    zipContainer.file('myblog.js', `window.myblog={"list": ${JSON.stringify(finalList)}}`)
+    // 下载用户头像
+    const userPicUrl = userInfo?.avatar_hd || userInfo?.profile_image_url || userInfo?.avatar_large || undefined
+    if (userPicUrl) {
+        userInfo.picShow = matchImageFromUrl(userPicUrl)
+        const picBlob = await fetchToGetImageBlob({ imageUrl: userPicUrl })
+        if (picBlob) {
+            imageFolder?.file(userInfo.picShow, picBlob)
+        }
+    }
+    zipContainer.file(
+        'myblog.js',
+        `window.myblog={"user": ${JSON.stringify(userInfo)},"list": ${JSON.stringify(finalList)}}`
+    )
 
     // if (!_.isEmpty(totalPicShowList)) {
     //     const imageFolder = zipContainer.folder('image')
@@ -393,3 +406,7 @@ const getFileStringFromExtension = async (): Promise<Blob> => {
         })
     })
 }
+
+const matchImageFromUrl = (url: string) => {
+    return url?.match(/\/([\da-zA-Z]+\.[a-z]{3,4})(\?|$)/)?.[1] || ''
+}
diff --git a/weiboSave/index.html b/weiboSave/index.html
@@ -13,11 +13,11 @@
         <div class="bg-gray-100">
             <div id="weibo-extend-posts" class=" mx-auto my-0 w-[50rem] px-8 flex flex-col gap-6 break-words pb-10">
             </div>
-            <div id="imagePopup" class="hidden fixed p-4 inset-0 items-center justify-center bg-black bg-opacity-50">
+            <div id="imagePopup" class="hidden fixed p-4 inset-0 items-center justify-center bg-black bg-opacity-50 z-[99]">
                 <img src="" alt="Popup Image" class="max-w-full max-h-full rounded-xl">
             </div>
         </div>
 
-        <div class=" border-b border-dashed border-gray-100 overflow-scroll text-xs text-gray-500 rounded text-base"></div>
+        <div class=" border-b border-dashed border-gray-100 overflow-scroll text-gray-500 rounded text-base "></div>
     </body>
 </html>
diff --git a/weiboSave/scripts/weibosave.ts b/weiboSave/scripts/weibosave.ts
@@ -5,7 +5,7 @@ import $ from 'jquery'
 import myblog from './myblog.json'
 import dayjs from 'dayjs'
 
-
+const postContainerClass = `w-full flex flex-col gap-6 break-words pb-10`
 const postClass = `weibopost bg-white flex-col pt-5 pb-8 px-8 rounded-md flex-col`
 const postInsideClass = ` flex flex-col gap-3 w-full max-h-[50rem] overflow-y-scroll`
 const textClass = ``
@@ -17,17 +17,30 @@ const videoContainerClass = `video flex flex-col items-center flex-wrap gap-2 mb
 const videoClass = `cursor-pointer object-cover rounded-xl max-h-[38rem]  w-fit`
 const titleClass = `flex flex-col text-gray-500 text-sm italic`
 
+const userInfoContainerClass = ` w-full h-32`
+const userInfoInsideClass = `py-4 fixed flex flex-row justify-start items-center gap-6 bg-gray-100 z-10 w-[46rem]`
+const userImageContainerClass = `flex w-24 h-24`
+const userImageClass = `rounded-full w-24 h-24`
+
+const userProfileContainerClass = `flex flex-col text-black`
+
+const weiboBaseUrl = `https://weibo.com`
+
 const start=async ()=>{
     console.log(`start`, start)
     console.log(myblog)
-    const list = myblog.list
+    const user = myblog.user || {}
+    const list = myblog.list || []
 
     let isLoaded = false;
     $(document).ready(function(){
         if(isLoaded) return;
         isLoaded = true;
         const $body = $(document.body);
-        const $postsContainer = $body.find("#weibo-extend-posts")
+        const $weiboExtendPosts = $body.find("#weibo-extend-posts")
+        const $postsContainer = $("<div>").attr("id", "#weibo-extend-post-container").addClass(postContainerClass)
+        appendUserInfo({$container: $weiboExtendPosts, userInfo: user})
+        $weiboExtendPosts.append($postsContainer)
         _.each(list, item=>{
             const { text, text_raw, picShows, region_name, source, created_at, retweetedBlog} = item || {}
             const $post = appendBlog({$container: $postsContainer, blogItem: item, postClass: postClass})
@@ -40,6 +53,31 @@ const start=async ()=>{
 
 start()
 
+const appendUserInfo = ({$container, userInfo}: Record<string, any>)=>{
+    if(_.isEmpty(userInfo)) return;
+    const { picShow, screen_name, profile_url, idstr } = userInfo || {}
+    const $userInfoContainer = $("<div>").addClass(userInfoContainerClass);
+    const $userImageContainerDiv = $("<div>").addClass(userImageContainerClass)
+    const $userImage = $("<img>").addClass(userImageClass).attr("src", `./image/${picShow}`)
+    $userImageContainerDiv.append($userImage)
+
+    const $userProfileContainer = $("<div>").addClass(userProfileContainerClass);
+    const $userNameDiv = $("<div>").addClass(`flex text-xl font-bold cursor-pointer`).append($("<span>").text(screen_name))
+    $userNameDiv.click(function(){
+        const userUrl = profile_url ? `${weiboBaseUrl}${profile_url}` : (idstr ? `${weiboBaseUrl}/u/${idstr}` : '')
+        if(userUrl){
+            window.open(userUrl, "_blank")
+        }
+    })
+    $userProfileContainer.append($userNameDiv)
+
+    const $userInfoInside = $("<div>").addClass(userInfoInsideClass);
+    $userInfoInside.append($userImageContainerDiv)
+    $userInfoInside.append($userProfileContainer)
+    $userInfoContainer.append($userInfoInside)
+    $container.append($userInfoContainer)
+}
+
 const appendBlog = ({$container, blogItem, postClass}: Record<string, any>)=>{
     const { text, text_raw, picShows, region_name, source, created_at, user, mediaInfoList, title } = blogItem || {}
 
@@ -56,9 +94,9 @@ const appendBlog = ({$container, blogItem, postClass}: Record<string, any>)=>{
         const userInfoText =  `@${user_screen_name}`
         let $userInfoDiv = $("<div>").addClass(`flex text-base font-bold text-gray-700 hover:text-orange-500 cursor-pointer`).append($("<span>").html(userInfoText))
         $userInfoDiv.click(function(){
-            const jumpUrl = user_profile_url ? `https://weibo.com${user_profile_url}` : (user_idstr ? `https://weibo.com/u/${user_idstr}` : '')
+            const jumpUrl = user_profile_url ? `${weiboBaseUrl}${user_profile_url}` : (user_idstr ? `${weiboBaseUrl}/u/${user_idstr}` : '')
             if(jumpUrl){
-                window.open(`https://weibo.com/u/${user_idstr}`, "_blank");
+                window.open(`${weiboBaseUrl}/u/${user_idstr}`, "_blank");
             }
         })
         $postInside.append($userInfoDiv)