feat: 添加小说阅读器

README.md

@@ -14,6 +14,7 @@
   - [x] 作品页面
   - [x] 作者信息页面
   - [x] 设置页面
+  - [x] 小说阅读
 - [x] 搜索功能
 - [x] 以图搜图
 - [x] 动图播放

src/api/index.js

@@ -100,6 +100,28 @@ const parseIllust = data => {
   return artwork
 }
 
+const parseNovel = data => {
+  const result = {
+    ...data,
+    images: {
+      s: imgProxy(data.image_urls.square_medium),
+      m: imgProxy(data.image_urls.medium),
+      l: imgProxy(data.image_urls.large),
+    },
+    author: {
+      id: data.user.id,
+      name: data.user.name,
+      avatar: imgProxy(data.user.profile_image_urls.medium)
+    },
+    count: data.page_count,
+    view: data.total_view,
+    like: data.total_bookmarks,
+  }
+  result.user.profile_image_urls.medium = imgProxy(data.user.profile_image_urls.medium)
+
+  return result
+}
+
 const api = {
   /**
    * 
@@ -265,21 +287,28 @@ const api = {
    * @param {String} word 关键词
    * @param {Number} page 页数 
    */
-  async search(word, page = 1) {
-    const cache_key = `searchList_${Base64.encode(word)}_${page}`
+  async search(word, page = 1, type = 'illust') {
+    const cache_key = `searchList_${type}_${Base64.encode(word)}_${page}`
     let searchList = await DBStorage.get(cache_key)
 
     if (!searchList) {
 
       let res = await get('/pixiv/', {
-        type: 'search',
+        type: type === 'novel' ? 'search_novel' : 'search',
         word,
         page
       })
 
-      let data
-      if (res.illusts) {
-        data = res.illusts
+      if (res.illusts || res.novels) {
+        if (type === 'illust') {
+          if (res.illusts) {
+            searchList = res.illusts.map(parseIllust)
+          }
+        } else if (type === 'novel') {
+          if (res.novels) {
+            searchList = res.novels.map(parseNovel)
+          }
+        }
       } else if (res.error) {
         return {
           status: -1,
@@ -292,10 +321,6 @@ const api = {
         }
       }
 
-      searchList = data.map(art => {
-        return parseIllust(art)
-      })
-
       DBStorage.set(cache_key, searchList, Expires.hour(3))
     }
 
@@ -538,6 +563,131 @@ const api = {
     }
 
     return { status: 0, data: tags }
-  }
+  },
+
+  /**
+   * 获取用户小说投稿
+   * @param {Number} id 作者ID
+   * @param {Number} page 页数 
+   */
+  async getMemberNovel(id, page = 1) {
+    const cache_key = `memberNovel_${id}_p${page}`
+    let memberNovel = await DBStorage.get(cache_key)
+
+    if (!memberNovel) {
+
+      let res = await get('/pixiv/', {
+        type: 'member_novel',
+        id,
+        page
+      })
+
+      let data
+      if (res.novels.length) {
+        data = res.novels
+      } else if (res.error) {
+        return {
+          status: -1,
+          msg: res.error.user_message || res.error.message
+        }
+      } else if (!res.next_url) {
+        return {
+          status: 0,
+          data: [],
+          finished: true
+        }
+      } else {
+        return {
+          status: -1,
+          msg: '未知错误'
+        }
+      }
+
+      memberNovel = data.map(art => {
+        return parseNovel(art)
+      })
+
+      DBStorage.set(cache_key, memberNovel, Expires.hour(3))
+    }
+
+    return { status: 0, data: memberNovel }
+  },
+
+  /**
+   * 获取小说详情
+   * @param {Number} id 小说ID
+   * @returns {Object}
+   */
+  async getNovel(id) {
+    const cache_key = `novel_${id}`
+    let novel = await DBStorage.get(cache_key)
+
+    if (!novel) {
+
+      const reqArr = [
+        get('/pixiv/', { type: 'novel_detail', id }),
+        get('/pixiv/', { type: 'novel_text', id })
+      ]
+
+      const [detail, text] = await Promise.all(reqArr)
+
+      let data
+      if (detail.novel) {
+        data = {
+          ...detail.novel,
+          content: text.novel_text
+        }
+      } else if (detail.error) {
+        return {
+          status: -1,
+          msg: detail.error.user_message || detail.error.message
+        }
+      } else {
+        return {
+          status: -1,
+          msg: '未知错误'
+        }
+      }
+
+      novel = parseNovel(data)
+
+      DBStorage.set(cache_key, novel, Expires.MONTH)
+    }
+
+
+    return { status: 0, data: novel }
+  },
+
+  async getNovelText(id) {
+    const cache_key = `novel_text_${id}`
+    let novel = await DBStorage.get(cache_key)
+
+    if (!novel) {
+
+      let res = await get('/pixiv/', {
+        type: 'novel_text',
+        id
+      })
+
+      if (res.illust) {
+        novel = res.illust
+      } else if (res.error) {
+        return {
+          status: -1,
+          msg: res.error.user_message || res.error.message
+        }
+      } else {
+        return {
+          status: -1,
+          msg: '未知错误'
+        }
+      }
+
+      DBStorage.set(cache_key, novel, Expires.MONTH)
+    }
+
+
+    return { status: 0, data: novel }
+  },
 }
 export default api

src/assets/css/base.styl

@@ -20,7 +20,10 @@ html {
   overflow-y: scroll;
   box-sizing: border-box;
   overscroll-behavior: none;
-  scroll-behavior: smooth;
+
+  &.no-scroll {
+    overflow: hidden;
+  }
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap');

src/components/Nav.vue

@@ -1,41 +1,20 @@
 <template>
   <div class="nav-container">
     <ul class="nav-bar">
-      <li @click="navigateTo('Home')">
-        <Icon
-          class="icon home"
-          name="home"
-          index="Home"
-          :currentIndex="$route.name"
-        />
-        <span>首页</span>
-      </li>
-      <li @click="navigateTo('Search')">
-        <Icon
-          class="icon"
-          name="search"
-          index="Search"
-          :currentIndex="$route.name"
-        />
-        <span>搜索</span>
-      </li>
-      <li @click="navigateTo('Rank', { type: 'daily' })">
-        <Icon
-          class="icon"
-          name="rank"
-          index="Rank"
-          :currentIndex="$route.name"
-        />
-        <span>排行榜</span>
-      </li>
-      <li @click="navigateTo('Setting')">
+      <li
+        class="nav-item"
+        :class="{ active: $route.name === item.name }"
+        @click="navigateTo(item.name)"
+        v-for="item in navList"
+        :key="item.name"
+      >
         <Icon
           class="icon"
-          name="setting"
-          index="Setting"
+          :name="item.icon"
+          :index="item.name"
           :currentIndex="$route.name"
         />
-        <span>设置</span>
+        <span>{{ item.title }}</span>
       </li>
     </ul>
   </div>
@@ -44,7 +23,35 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      navList: [
+        {
+          name: "Home",
+          icon: "home",
+          title: "首页",
+        },
+        // {
+        //   name: "Novel",
+        //   icon: "novel",
+        //   title: "小说",
+        // },
+        {
+          name: "Search",
+          icon: "search",
+          title: "搜索",
+        },
+        {
+          name: "Rank",
+          icon: "rank",
+          title: "排行榜",
+        },
+        {
+          name: "Setting",
+          icon: "setting",
+          title: "设置",
+        },
+      ],
+    };
   },
   methods: {
     navigateTo(name, params) {
@@ -70,6 +77,7 @@ export default {
   height: 100px;
   height: calc(100px + env(safe-area-inset-bottom));
   z-index: 10;
+  pointer-events: none;
 
   .nav-bar {
     display: flex;
@@ -83,17 +91,22 @@ export default {
     min-width: 750px;
     height: 100%;
     margin: 0 auto;
+    pointer-events: auto;
 
     li {
       position: relative;
-      color: #777;
+      color: #969696;
       font-size: 20px;
       cursor: pointer;
       width: 20%;
       vertical-align: middle;
       text-align: center;
       margin: 0 10px;
 
+      &.active {
+        color: #333;
+      }
+
       .icon {
         display: block;
         font-size: 58px;