diff --git a/app/scripts/reactVirtual/interface.ts b/app/scripts/reactVirtual/interface.ts index a4cd9be..23769f1 100644 --- 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 index 254fba2..4194dd9 100644 --- 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 ( +
+
+
+ {`已备份完成`} +
+
+
+ + {currentSavingWeiboCount + ? `共备份${currentSavingWeiboCount}条微博` + : `备份微博总数:未知`} + +
+
+
+
+ +
+
+
+
+ ) + } if (showWeiboPop == WeiboPopType.saving) { return (
diff --git a/app/scripts/reactVirtual/slice.ts b/app/scripts/reactVirtual/slice.ts index da304ce..6f08b46 100644 --- 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 index e6a2734..7e78eb2 100644 --- 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 => { 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 => { }) }) } + +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 index 9094b91..7f0a553 100644 --- a/weiboSave/index.html +++ b/weiboSave/index.html @@ -13,11 +13,11 @@
- -
+
diff --git a/weiboSave/scripts/weibosave.ts b/weiboSave/scripts/weibosave.ts index 76d4cac..65079e5 100644 --- 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 = $("
").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)=>{ + if(_.isEmpty(userInfo)) return; + const { picShow, screen_name, profile_url, idstr } = userInfo || {} + const $userInfoContainer = $("
").addClass(userInfoContainerClass); + const $userImageContainerDiv = $("
").addClass(userImageContainerClass) + const $userImage = $("").addClass(userImageClass).attr("src", `./image/${picShow}`) + $userImageContainerDiv.append($userImage) + + const $userProfileContainer = $("
").addClass(userProfileContainerClass); + const $userNameDiv = $("
").addClass(`flex text-xl font-bold cursor-pointer`).append($("").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 = $("
").addClass(userInfoInsideClass); + $userInfoInside.append($userImageContainerDiv) + $userInfoInside.append($userProfileContainer) + $userInfoContainer.append($userInfoInside) + $container.append($userInfoContainer) +} + const appendBlog = ({$container, blogItem, postClass}: Record)=>{ const { text, text_raw, picShows, region_name, source, created_at, user, mediaInfoList, title } = blogItem || {} @@ -56,9 +94,9 @@ const appendBlog = ({$container, blogItem, postClass}: Record)=>{ const userInfoText = `@${user_screen_name}` let $userInfoDiv = $("
").addClass(`flex text-base font-bold text-gray-700 hover:text-orange-500 cursor-pointer`).append($("").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)