添加“稍后阅读”功能

Author: Codennnn

extension/pages/popup.html

@@ -13,6 +13,7 @@
     <main>
       <nav>
         <ul class="tabs">
+          <li data-target="tab-reading">稍后阅读</li>
           <li data-target="tab-hot">最热</li>
           <li data-target="tab-latest">最新</li>
           <li data-target="tab-message">消息</li>
@@ -65,6 +66,7 @@
 
       <section>
         <div class="tab-contents">
+          <div id="tab-reading" class="tab-content"></div>
           <div id="tab-hot" class="tab-content"></div>
           <div id="tab-latest" class="tab-content"></div>
           <div id="tab-message" class="tab-content"></div>

src/components/popup.ts

@@ -112,7 +112,7 @@ export function createPopup(props: CreatePopupProps): PopupControl {
       })
       .catch(() => {
         handlePopupClose()
-        createToast({ message: 'Popup 渲染失败' })
+        createToast({ message: '❌ Popup 渲染失败' })
       })
 
     onOpen?.()

src/contents/decode-base64.ts

@@ -13,7 +13,7 @@ import { createToast } from '../components/toast'
 const dataTitle = '点击复制'
 
 if (window.__V2P_DecodeStatus__ === 'decodeed') {
-  createToast({ message: '已解析完本页所有的 Base64 字符串' })
+  createToast({ message: '✅ 已解析完本页所有的 Base64 字符串' })
 } else {
   // 不能从 global.ts 中引入，否则会出现脚本执行错误，此错误发生原因未知。
   const $topicContentBox = $('#Main .box:has(.topic_content)')
@@ -88,7 +88,7 @@ if (window.__V2P_DecodeStatus__ === 'decodeed') {
     createToast({ message: '本页未发现 Base64 字符串' })
   } else {
     window.__V2P_DecodeStatus__ = 'decodeed'
-    createToast({ message: `已解析本页所有的 Base64 字符串，共 ${count} 条` })
+    createToast({ message: `✅ 已解析本页所有的 Base64 字符串，共 ${count} 条` })
   }
 
   $('.v2p-decode').on('click', (ev) => {

src/contents/reading-list.ts

@@ -1,10 +1,33 @@
 import { createToast } from '../components/toast'
+import { StorageKey } from '../constants'
+import { getStorage, setStorage } from '../utils'
 
+const url = $('head meta[property="og:url"]').prop('content')
 const title = $('head meta[property="og:title"]').prop('content')
-const desc = $('head meta[property="og:description"]').prop('content')
+const content = $('head meta[property="og:description"]').prop('content')
 
-if (!(typeof title === 'string' || typeof desc === 'string')) {
+if (!(typeof url === 'string' || typeof title === 'string' || typeof content === 'string')) {
   const message = '无法识别将该主题的元数据'
   createToast({ message })
   throw new Error(message)
 }
+
+void (async () => {
+  const storage = await getStorage()
+
+  const currentData = storage[StorageKey.ReadingList]?.data || []
+  const exist = currentData.findIndex((it) => it.url === url) !== -1
+
+  if (exist) {
+    createToast({ message: '该主题已存在于稍后阅读' })
+  } else {
+    await setStorage(StorageKey.ReadingList, {
+      data: [
+        { url, title: (title as string).replace(' - V2EX', ''), content, addedTime: Date.now() },
+        ...currentData,
+      ],
+    })
+
+    createToast({ message: '📖 已添加进稍后阅读' })
+  }
+})()

src/contents/topic/reply.ts

@@ -173,7 +173,7 @@ export function handleReply() {
       .catch(() => {
         replacePlaceholder('')
 
-        window.alert('上传图片失败，请打开控制台查看原因')
+        window.alert('❌ 上传图片失败，请打开控制台查看原因')
       })
       .finally(() => {
         $uploadBar.removeClass('v2p-reply-upload-bar-disabled').text(uploadTip)

src/pages/popup.helper.ts

@@ -1,9 +1,12 @@
+import type { ReadingItem, Topic } from '../types'
+import { escapeHTML } from '../utils'
 import { TabId } from './popup.var'
 
 export function isTabId(tabId: any): tabId is TabId {
   if (typeof tabId === 'string') {
     if (
       /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
+      tabId === TabId.Reading ||
       tabId === TabId.Hot ||
       tabId === TabId.Latest ||
       tabId === TabId.Message ||
@@ -17,6 +20,40 @@ export function isTabId(tabId: any): tabId is TabId {
   return false
 }
 
+export const generateReadingItmes = (items: ReadingItem[]) => {
+  return items
+    .map((topic) => {
+      return `
+        <li class="topic-item">
+          <a href="${topic.url}" target="_blank">
+            <span class="title">${escapeHTML(topic.title)}</span>
+            <span class="content">${topic.content.replace(/<[^>]*>/g, '')}</span>
+
+            <div class="topic-item-actions">
+              <button class="topic-item-action-remove" data-url="${topic.url}">移除</button>
+            </div>
+          </a>
+        </li>
+      `
+    })
+    .join('')
+}
+
+export const generateTopicItmes = (topics: Topic[]) => {
+  return topics
+    .map((topic) => {
+      return `
+        <li class="topic-item">
+          <a href="${topic.url}" target="_blank">
+            <span class="title">${escapeHTML(topic.title)}</span>
+            <span class="content">${topic.content.replace(/<[^>]*>/g, '')}</span>
+          </a>
+        </li>
+        `
+    })
+    .join('')
+}
+
 /**
  * 计算 local storage 的数据大小。
  */

src/pages/popup.ts

@@ -19,15 +19,14 @@ import {
   setV2P_Settings,
 } from '../services'
 import type { Topic } from '../types'
+import { formatTimestamp, getStorage, getStorageSync, isSameDay, setStorage } from '../utils'
 import {
-  escapeHTML,
-  formatTimestamp,
-  getStorage,
-  getStorageSync,
-  isSameDay,
-  setStorage,
-} from '../utils'
-import { calculateLocalStorageSize, formatSizeUnits, isTabId } from './popup.helper'
+  calculateLocalStorageSize,
+  formatSizeUnits,
+  generateReadingItmes,
+  generateTopicItmes,
+  isTabId,
+} from './popup.helper'
 import type { PopupStorageData, RemoteDataStore } from './popup.type'
 import { defaultValue, TabId } from './popup.var'
 
@@ -46,6 +45,7 @@ const errorDisplay = `
 `
 
 const topicContentData: Record<TabId, RemoteDataStore> = {
+  [TabId.Reading]: {},
   [TabId.Hot]: {
     data: undefined,
     lastFetchTime: undefined,
@@ -206,21 +206,6 @@ function loadSettings() {
 }
 
 function initTabs() {
-  const generateTopicItmes = (topics: Topic[]) => {
-    return topics
-      .map((topic) => {
-        return `
-          <li class="topic-item">
-            <a href="${topic.url}" target="_blank">
-              <span class="title">${escapeHTML(topic.title)}</span>
-              <span class="content">${topic.content.replace(/<[^>]*>/g, '')}</span>
-            </a>
-          </li>
-          `
-      })
-      .join('')
-  }
-
   const getCurrentActiveTab = () => {
     return $('.tabs > li.active')
   }
@@ -236,6 +221,34 @@ function initTabs() {
 
     const $tabContent = $(`#${tabId}`)
 
+    if (tabId === TabId.Reading) {
+      const readingData = storage[StorageKey.ReadingList]?.data
+      if (readingData) {
+        const $readingList = $(`<ul class="list">`).append(generateReadingItmes(readingData))
+
+        $tabContent.empty().append($readingList)
+
+        $('.topic-item-action-remove').on('click', (ev) => {
+          ev.preventDefault()
+          ev.stopPropagation()
+
+          const url = ev.target.dataset.url
+
+          if (url) {
+            const newReadingData = readingData.filter((it) => it.url !== url)
+
+            void setStorage(StorageKey.ReadingList, { data: newReadingData })
+
+            $tabContent
+              .find(`.topic-item:has(.topic-item-action-remove[data-url="${url}"])`)
+              .remove()
+          }
+        })
+      } else {
+        $tabContent.empty().append('<div>暂未添加稍后阅读</div>')
+      }
+    }
+
     if (tabId === TabId.Hot || tabId === TabId.Latest) {
       const loaded = $tabContent.find('.list').length > 0
 

src/pages/popup.var.ts

@@ -1,4 +1,5 @@
 export const enum TabId {
+  Reading = 'tab-reading',
   Hot = 'tab-hot',
   Latest = 'tab-latest',
   Message = 'tab-message',

src/styles/popup.scss

@@ -150,6 +150,8 @@ button {
   }
 
   .topic-item {
+    position: relative;
+
     > a {
       display: block;
       padding: 20px 15px;
@@ -176,6 +178,28 @@ button {
         font-size: 13px;
       }
     }
+
+    .topic-item-actions {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: inline-flex;
+      background: var(--v2p-color-bg-widget);
+      opacity: 0;
+      backdrop-filter: blur(16px);
+    }
+
+    &:hover {
+      .topic-item-actions {
+        opacity: 1;
+      }
+    }
+
+    .topic-item-action-remove {
+      padding: 5px 10px;
+      color: #ef4444;
+      background-color: #fee2e2;
+    }
   }
 
   .notice-item {

src/types.ts

@@ -47,9 +47,9 @@ export interface Tag {
 
 export type MemberTag = Record<Member['username'], { tags?: Tag[] }>
 
-export interface ReadingItem {
-  title: Topic['title']
-  desc: string
+export interface ReadingItem extends Pick<Topic, 'url' | 'title' | 'content'> {
+  addedTime: number
+  read?: boolean
 }
 
 export interface StorageItems {
@@ -59,7 +59,7 @@ export interface StorageItems {
   [StorageKey.Daily]?: DailyInfo
   [StorageKey.MemberTag]?: MemberTag
   [StorageKey.ReadingList]?: {
-    data: ReadingItem[]
+    data?: ReadingItem[]
   }
 }