From 7159ada75d9cfc0374920d4772c87e5ea0223943 Mon Sep 17 00:00:00 2001
From: journey-ad <journey.adc@gmail.com>
Date: Sun, 17 Dec 2023 23:25:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B0=8F=E8=AF=B4?=
 =?UTF-8?q?=E9=98=85=E8=AF=BB=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   1 +
 src/api/index.js                              | 172 +++-
 src/assets/css/base.styl                      |   5 +-
 src/components/Nav.vue                        |  79 +-
 src/components/NovelCard.vue                  | 228 ++++++
 src/components/TopBar.vue                     |  33 +-
 src/layouts/MainLayout.vue                    |   2 +-
 src/router/index.js                           |   6 +
 src/store/index.js                            |   8 +-
 src/svg/close.svg                             |  11 +-
 src/svg/novel.svg                             |   1 +
 src/views/Artwork/index.vue                   |   1 +
 src/views/Novel/chapter.vue                   | 743 ++++++++++++++++++
 src/views/Novel/index.vue                     |  35 +
 src/views/Search/index.vue                    | 174 +++-
 src/views/Users/components/AuthorIllusts.vue  |  10 +-
 src/views/Users/components/AuthorNovels.vue   | 185 +++++
 .../Users/components/FavoriteIllusts.vue      | 114 ++-
 src/views/Users/index.vue                     |  36 +-
 19 files changed, 1701 insertions(+), 143 deletions(-)
 create mode 100644 src/components/NovelCard.vue
 create mode 100644 src/svg/novel.svg
 create mode 100644 src/views/Novel/chapter.vue
 create mode 100644 src/views/Novel/index.vue
 create mode 100644 src/views/Users/components/AuthorNovels.vue

diff --git a/README.md b/README.md
index af98ac31..d1604578 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@
   - [x] 作品页面
   - [x] 作者信息页面
   - [x] 设置页面
+  - [x] 小说阅读
 - [x] 搜索功能
 - [x] 以图搜图
 - [x] 动图播放
diff --git a/src/api/index.js b/src/api/index.js
index ba4b59df..ee26c056 100644
--- a/src/api/index.js
+++ b/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
diff --git a/src/assets/css/base.styl b/src/assets/css/base.styl
index 8ff81845..652daf61 100644
--- a/src/assets/css/base.styl
+++ b/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');
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 5b4cc061..ede5cab7 100644
--- a/src/components/Nav.vue
+++ b/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,10 +91,11 @@ 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%;
@@ -94,6 +103,10 @@ export default {
       text-align: center;
       margin: 0 10px;
 
+      &.active {
+        color: #333;
+      }
+
       .icon {
         display: block;
         font-size: 58px;
diff --git a/src/components/NovelCard.vue b/src/components/NovelCard.vue
new file mode 100644
index 00000000..92d75c62
--- /dev/null
+++ b/src/components/NovelCard.vue
@@ -0,0 +1,228 @@
+<template>
+  <div @click.stop="click(artwork.id)" class="novel-card">
+    <div class="image-wrap">
+      <van-tag
+        class="tag-r18"
+        round
+        :color="tagText === 'R-18' ? '#fb7299' : '#ff3f3f'"
+        v-if="tagText"
+        >{{ tagText }}</van-tag
+      >
+      <img
+        v-lazy="artwork.images.m"
+        :alt="artwork.title"
+        class="image"
+        :class="{ censored: isCensored(artwork) }"
+      />
+    </div>
+    <div class="meta">
+      <div class="title__wrapper">
+        <h4 class="series-title">{{ artwork.series.title }}</h4>
+        <h2 class="title">{{ artwork.title }}</h2>
+      </div>
+      <div class="info-box">
+        <span class="info words">
+          <Icon name="novel" class="icon" scale="1.1"></Icon
+          >{{ artwork.text_length.toLocaleString("en-US") }}字
+        </span>
+        <span class="info like">
+          <Icon name="like" class="icon"></Icon>
+          {{ artwork.total_bookmarks }}
+        </span>
+      </div>
+      <div class="tag-box">
+        <span class="tag" v-for="tag in artwork.tags" :key="tag.name"
+          >#{{ tag.name }}</span
+        >
+      </div>
+      <div class="author__wrapper">
+        <img
+          :src="artwork.author.avatar"
+          :alt="artwork.author.name"
+          class="avatar"
+        />
+        <div class="author">{{ artwork.author.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tag } from "vant";
+import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    artwork: {
+      type: Object,
+      required: true,
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: "cover",
+    },
+    column: {
+      type: Number,
+      required: false,
+      default: 2,
+    },
+  },
+  computed: {
+    tagText() {
+      if (this.artwork.x_restrict === 1) {
+        return "R-18";
+      } else if (this.artwork.x_restrict === 2) {
+        return "R-18G";
+      } else {
+        return false;
+      }
+    },
+    ...mapGetters(["isCensored"]),
+  },
+  methods: {
+    click(id) {
+      if (
+        !id ||
+        (this.$route.name === "Artwork" && +this.$route.params.id === id)
+      )
+        return false;
+
+      this.$emit("click-card", id);
+    },
+  },
+  components: {
+    [Tag.name]: Tag,
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.novel-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 220px;
+  overflow: hidden;
+  background: #fafafa;
+  border-radius: 12px;
+  cursor: pointer;
+
+  .image-wrap {
+    flex: none;
+    width: 190px;
+    height: 220px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      .image {
+        transform: scale(1.05);
+      }
+    }
+
+    .tag-r18 {
+      position: absolute;
+      top: 8px;
+      left: 6px;
+      font-size: 20px;
+      padding: 2px 8px;
+      z-index: 10;
+    }
+
+    .image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform-origin: center;
+      transition: transform 0.2s ease-in-out;
+
+      &[lazy='loading'] {
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: calc(100% - 190px);
+    padding: 12px 14px;
+    box-sizing: border-box;
+    color: #444;
+
+    .series-title {
+      font-size: 20px;
+      margin-bottom: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #666;
+    }
+
+    .title {
+      font-size: 24px;
+      // margin: 10px 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      color: #444;
+    }
+
+    .info-box {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: 20px;
+      color: #666;
+
+      .info {
+        margin-right: 12px;
+      }
+    }
+
+    .tag-box {
+      line-height: 1.2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+
+      .tag {
+        display: inline-block;
+        margin-right: 10px;
+        font-size: 20px;
+        color: #0096fa;
+      }
+    }
+
+    .author__wrapper {
+      color: #444;
+      margin-top: auto;
+
+      .avatar {
+        width: 28px;
+        height: 28px;
+        margin-right: 4px;
+        vertical-align: bottom;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+
+      .author {
+        display: inline-block;
+        font-size: 20px;
+        font-weight: 200;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index c8e177a9..857882d3 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="top-bar-wrap">
+  <div
+    class="top-bar-wrap"
+    :class="{ transparent: transparent, [color]: true, padding: padding }"
+  >
     <van-nav-bar class="top-bar" left-arrow :border="false" @click-left="back">
       <template #left>
         <Icon name="left-arrow" scale="2.6"></Icon>
@@ -18,6 +21,18 @@ export default {
     action: {
       type: Function,
     },
+    transparent: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: "light",
+    },
+    padding: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     back() {
@@ -52,11 +67,25 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
-  padding-top: 40px;
   width: 100%;
   height: 160px;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(#fff, 0));
   z-index: 99;
+
+  &.transparent {
+    background: none;
+  }
+
+  &.dark {
+    .top-bar svg {
+      color: #333;
+      filter: none;
+    }
+  }
+
+  &.padding {
+    padding-top: 40px;
+  }
 }
 
 .top-bar {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 323e868d..1f227657 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -32,7 +32,7 @@ export default {
   watch: {
     showNav: {
       handler(val) {
-        this.$root.$el.classList.toggle("show-nav", val);
+        this.$root.$el.classList[val ? "add" : "remove"]("show-nav");
       },
       immediate: true,
     },
diff --git a/src/router/index.js b/src/router/index.js
index 165720d9..c0ce810a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,7 @@ import Rank from '@/views/Rank'
 import Setting from '@/views/Setting'
 import Artwork from '@/views/Artwork'
 import Users from '@/views/Users'
+import NovelChapter from '@/views/Novel/chapter'
 
 const initLength = window.history.length
 Object.defineProperty(VueRouter.prototype, '$historyCount', {
@@ -76,6 +77,11 @@ const routes = [
             path: '/users/:id',
             name: 'Users',
             component: Users
+          },
+          {
+            path: '/novel/:id',
+            name: 'Novel',
+            component: NovelChapter
           }
         ]
       }
diff --git a/src/store/index.js b/src/store/index.js
index 1060d6c0..4544bbdf 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -45,9 +45,11 @@ export default new Vuex.Store({
         state.searchHistory = []
         LocalStorage.remove('__PIXIV_searchHistory')
       } else {
-        if (state.searchHistory.includes(obj)) return false
-        if (state.searchHistory.length >= 20) state.searchHistory.shift()
-        state.searchHistory.push(obj)
+        if (state.searchHistory.includes(obj)) state.searchHistory.splice(state.searchHistory.indexOf(obj), 1)
+
+        if (state.searchHistory.length >= 20) state.searchHistory.pop()
+        state.searchHistory.unshift(obj)
+
         LocalStorage.set('__PIXIV_searchHistory', state.searchHistory)
       }
     },
diff --git a/src/svg/close.svg b/src/svg/close.svg
index 4c77dcba..7803dfe6 100644
--- a/src/svg/close.svg
+++ b/src/svg/close.svg
@@ -1,10 +1 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1587134509072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8516" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024">
-    <defs>
-        <style type="text/css"/>
-    </defs>
-    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#adadad" p-id="8517"/>
-    <path d="M292.571429 789.942857c-14.628571 0-21.942857-7.314286-29.257143-14.628571-14.628571-14.628571-14.628571-43.885714 0-58.514286l453.485714-453.485714c14.628571-14.628571 43.885714-14.628571 58.514286 0s14.628571 43.885714 0 58.514285l-453.485715 453.485715c-7.314286 7.314286-21.942857 14.628571-29.257142 14.628571z" fill="#FFFFFF" p-id="8518"/>
-    <path d="M746.057143 789.942857c-14.628571 0-21.942857-7.314286-29.257143-14.628571L256 321.828571c-14.628571-14.628571-14.628571-43.885714 0-58.514285 14.628571-14.628571 43.885714-14.628571 58.514286 0l453.485714 453.485714c14.628571 14.628571 14.628571 43.885714 0 58.514286 0 7.314286-14.628571 14.628571-21.942857 14.628571z" fill="#FFFFFF" p-id="8519"/>
-</svg>
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024"><path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="currentColor"/><path d="M292.571 789.943c-14.628 0-21.942-7.314-29.257-14.629-14.628-14.628-14.628-43.885 0-58.514L716.8 263.314c14.629-14.628 43.886-14.628 58.514 0s14.629 43.886 0 58.515L321.83 775.314c-7.315 7.315-21.943 14.629-29.258 14.629z"/><path d="M746.057 789.943c-14.628 0-21.943-7.314-29.257-14.629L256 321.83c-14.629-14.629-14.629-43.886 0-58.515 14.629-14.628 43.886-14.628 58.514 0L768 716.8c14.629 14.629 14.629 43.886 0 58.514 0 7.315-14.629 14.629-21.943 14.629z"/></svg>
\ No newline at end of file
diff --git a/src/svg/novel.svg b/src/svg/novel.svg
new file mode 100644
index 00000000..d943559f
--- /dev/null
+++ b/src/svg/novel.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" width="200" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M315.237 374.524V119.746l211.383 7.009-8.42 247.747-107.773-21.745-95.19 21.767z" fill="currentColor"/><path d="M709.781 803.698H315.607c-24.039 0-39.064-26.024-27.044-46.842a31.229 31.229 0 0 1 27.044-15.615h394.174c24.041 0 39.065 26.023 27.046 46.843a31.23 31.23 0 0 1-27.046 15.614M514.915 95.619H321.691c-21.35 0-38.7 13.023-38.7 29.1v257.254c0 16.679 18.182 29.124 38.677 29.124 4.627 0 9.299-.624 13.925-1.967l68.82-19.892a50.068 50.068 0 0 1 27.804 0l68.796 19.892a50.46 50.46 0 0 0 13.948 1.967c20.495 0 38.678-12.445 38.678-29.124V124.719c0-16.077-17.326-29.1-38.724-29.1m-23.734 62.457v183.208l-41.614-12.052a112.701 112.701 0 0 0-62.504 0l-41.615 12.052V158.076h145.733" fill="#353032"/><path d="M865.924 595.276V259.163c0-90.323-73.221-163.544-163.545-163.544H321.622c-90.324 0-163.546 73.221-163.546 163.544v505.674c0 90.323 73.222 163.544 163.546 163.544h380.757c90.324 0 163.545-73.221 163.545-163.544v-55.056c0-24.039-26.024-39.064-46.843-27.044a31.228 31.228 0 0 0-15.614 27.044v55.056c-.152 55.764-45.322 100.934-101.088 101.087H321.622c-55.766-.153-100.936-45.323-101.088-101.087V259.163c.152-55.766 45.322-100.934 101.088-101.087h380.757c55.766.153 100.936 45.321 101.088 101.087v336.113c0 24.041 26.023 39.066 46.843 27.045a31.226 31.226 0 0 0 15.614-27.045" fill="#353032"/></svg>
\ No newline at end of file
diff --git a/src/views/Artwork/index.vue b/src/views/Artwork/index.vue
index 72bf63b7..7cd4d8a1 100644
--- a/src/views/Artwork/index.vue
+++ b/src/views/Artwork/index.vue
@@ -109,6 +109,7 @@ export default {
           this.$toast({
             message: "根据当前设置，此内容将不予显示",
             icon: require("@/svg/ban-view.svg"),
+            duration: 3000,
           });
           setTimeout(() => {
             // this.$router.back();
diff --git a/src/views/Novel/chapter.vue b/src/views/Novel/chapter.vue
new file mode 100644
index 00000000..c083a0d2
--- /dev/null
+++ b/src/views/Novel/chapter.vue
@@ -0,0 +1,743 @@
+<template>
+  <div class="chapter" v-if="novel.id" @scroll="scrollHandler" ref="chapterEl">
+    <div class="topbar__wrapper" :class="{ show: isActionShow }">
+      <div class="chapter-name">{{ novel.title }}</div>
+      <TopBar :transparent="true" color="dark" :padding="false" />
+      <div class="btn-setting" @click="isSettingShow = !isSettingShow">
+        <Icon class="icon-setting" name="setting"></Icon>
+      </div>
+    </div>
+    <div
+      class="novel-content__wrapper"
+      :style="{
+        fontFamily: fontList[readerConfig.fontFamily.value].font,
+        backgroundColor: themeList[readerConfig.theme.value].bg,
+      }"
+      @click="handleActionDisplay"
+    >
+      <div class="novel-meta">
+        <h1 class="novel-title">
+          <van-tag
+            class="tag"
+            round
+            :color="tagText === 'R-18' ? '#fb7299' : '#ff3f3f'"
+            v-if="tagText"
+          >
+            {{ tagText }}
+          </van-tag>
+          {{ novel.title }}
+        </h1>
+        <div class="info-box">
+          <router-link
+            class="info author"
+            :to="{
+              name: 'Users',
+              params: { id: novel.user.id },
+            }"
+          >
+            {{ novel.user.name }}
+          </router-link>
+          <span class="info words">
+            <Icon name="novel" class="icon" scale="1.1"></Icon
+            >{{ novel.text_length.toLocaleString("en-US") }}字
+          </span>
+          <span class="info like">
+            <Icon name="like" class="icon"></Icon>
+            {{ novel.like.toLocaleString("en-US") }}
+          </span>
+          <span class="pixiv">
+            <a
+              :href="`https://www.pixiv.net/novel/show.php?id=${novel.id}`"
+              target="_blank"
+              rel="noreferrer"
+              title="前往Pixiv查看作品"
+            >
+              <Icon name="pixiv" class="icon"></Icon>
+            </a>
+          </span>
+        </div>
+        <div class="tag-box">
+          <router-link
+            class="tag"
+            :to="{
+              name: 'Search',
+              query: { type: 'novel', keyword: tag.name },
+            }"
+            v-for="tag in novel.tags"
+            :key="tag.name"
+            >#{{ tag.name }}</router-link
+          >
+        </div>
+      </div>
+      <div
+        class="novel-content"
+        :class="{ censored: isCensored(novel) }"
+        :style="viewerStyle"
+        v-html="parsedContent"
+      ></div>
+    </div>
+    <div class="action__wrapper" :class="{ show: isSettingShow }">
+      <transition name="fade">
+        <div
+          class="back-top"
+          :class="{ show: isTopShow && isActionShow }"
+          @click="toTop"
+        >
+          <Icon class="icon-top" name="top"></Icon>
+        </div>
+      </transition>
+      <div class="action-panel">
+        <div class="action-item slider">
+          <span>A-</span>
+          <van-slider
+            v-model="readerConfig.fontSize.value"
+            :min="readerConfig.fontSize.range[0]"
+            :max="readerConfig.fontSize.range[1]"
+            active-color="#ffcd59"
+          >
+            <template #button>
+              <div class="slide-button">{{ readerConfig.fontSize.value }}</div>
+            </template>
+          </van-slider>
+          <span class="big">A+</span>
+        </div>
+        <div class="row">
+          <div class="action-item slider">
+            <span>小</span>
+            <van-slider
+              v-model="readerConfig.padding.value"
+              :min="readerConfig.padding.range[0]"
+              :max="readerConfig.padding.range[1]"
+              active-color="#ffcd59"
+            >
+              <template #button>
+                <div class="slide-button">边距</div>
+              </template>
+            </van-slider>
+            <span>大</span>
+          </div>
+          <div class="action-item slider">
+            <span>紧</span>
+            <van-slider
+              v-model="readerConfig.lineHeight.value"
+              :min="readerConfig.lineHeight.range[0]"
+              :max="readerConfig.lineHeight.range[1]"
+              :step="0.1"
+              active-color="#ffcd59"
+            >
+              <template #button>
+                <div class="slide-button">行距</div>
+              </template>
+            </van-slider>
+            <span>松</span>
+          </div>
+        </div>
+        <div class="action-item">
+          <span>选择颜色</span>
+          <span
+            class="color"
+            :class="{ active: readerConfig.theme.value === index }"
+            :style="{
+              color: item.color,
+              backgroundColor: item.bg,
+            }"
+            @click="readerConfig.theme.value = index"
+            v-for="(item, index) in themeList"
+            :key="index"
+            >字</span
+          >
+        </div>
+        <div class="action-item">
+          <span>选择字体</span>
+          <span
+            class="font"
+            :class="{ active: readerConfig.fontFamily.value === index }"
+            :style="{
+              fontFamily: item.font,
+            }"
+            @click="readerConfig.fontFamily.value = index"
+            v-for="(item, index) in fontList"
+            :key="index"
+            >{{ item.name }}</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from "lodash";
+import { Tag, Slider } from "vant";
+import { mapGetters, mapState } from "vuex";
+import TopBar from "@/components/TopBar";
+import { LocalStorage } from "@/utils/storage";
+import api from "@/api";
+
+const _READER_SETTING_KEY = "__PIXIV_readerSetting";
+
+const readerSetting = LocalStorage.get(_READER_SETTING_KEY, {
+  fontSize: 15,
+  padding: 14,
+  lineHeight: 1.5,
+  theme: 0,
+  fontFamily: 0,
+});
+
+export default {
+  name: "Chapter",
+  watch: {
+    $route: {
+      handler() {
+        if (this.$route.name === "Novel") {
+          document.documentElement.classList.add("no-scroll");
+        } else {
+          document.documentElement.classList.remove("no-scroll");
+        }
+
+        if (
+          this.$route.name === "Novel" &&
+          this.$route.params.id !== this.novel.id
+        ) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+    readerConfig: {
+      handler: debounce(function () {
+        const _setings = {};
+        for (let key in this.readerConfig) {
+          _setings[key] = this.readerConfig[key].value;
+        }
+
+        LocalStorage.set(_READER_SETTING_KEY, _setings);
+      }, 300),
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      novel: {},
+      parsedContent: "",
+      readerConfig: {
+        fontSize: {
+          type: "number",
+          value: 15,
+          range: [12, 30],
+        },
+        padding: {
+          type: "number",
+          value: 14,
+          range: [5, 50],
+        },
+        lineHeight: {
+          type: "number",
+          value: 1.5,
+          range: [0.8, 3],
+        },
+        theme: {
+          type: "number",
+          value: 0,
+          range: [0, 4],
+        },
+        fontFamily: {
+          type: "number",
+          value: 1,
+          range: [0, 3],
+        },
+      },
+      themeList: [
+        { color: "#1f1f1f", bg: "#ffffff" },
+        { color: "#1e1e1e", bg: "#f1f1f1" },
+        { color: "#b7b7b7", bg: "#1f1f1f" },
+        { color: "#1c1d1e", bg: "#e6f1fa" },
+        { color: "#1f1e1c", bg: "#fff8eb" },
+      ],
+      fontList: [
+        {
+          name: "Sans",
+          font: "Noto Sans SC",
+        },
+        {
+          name: "Serif",
+          font: "Noto Serif SC",
+        },
+      ],
+      isSettingShow: false,
+      isActionShow: false,
+      isTopShow: false,
+    };
+  },
+  computed: {
+    ...mapGetters(["isCensored"]),
+    tagText() {
+      if (this.novel.x_restrict === 1) {
+        return "R-18";
+      } else if (this.novel.x_restrict === 2) {
+        return "R-18G";
+      } else {
+        return false;
+      }
+    },
+    viewerStyle() {
+      return {
+        paddingLeft: `${this.readerConfig.padding.value}px`,
+        paddingRight: `${this.readerConfig.padding.value}px`,
+        fontSize: `${this.readerConfig.fontSize.value}px`,
+        lineHeight: `${this.readerConfig.lineHeight.value}`,
+        fontFamily: this.fontList[this.readerConfig.fontFamily.value].font,
+        color: this.themeList[this.readerConfig.theme.value].color,
+        backgroundColor: this.themeList[this.readerConfig.theme.value].bg,
+      };
+    },
+  },
+  methods: {
+    initSetting() {
+      for (let key in readerSetting) {
+        if (key in this.readerConfig) {
+          this.readerConfig[key].value = readerSetting[key];
+        }
+      }
+    },
+    init() {
+      this.initSetting();
+      document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
+      this.loading = true;
+      const id = +this.$route.params.id;
+      this.novel = {};
+      this.getNovel(id);
+    },
+    async getNovel(id) {
+      const res = await api.getNovel(id);
+
+      if (res.status === 0) {
+        this.novel = res.data;
+
+        this.parseNovel(this.novel);
+
+        this.loading = false;
+
+        let title = "";
+        if (this.novel.x_restrict === 1) {
+          title += "[R-18] ";
+        } else if (this.novel.x_restrict === 2) {
+          title += "[R-18G] ";
+        }
+
+        title += `${this.novel.title}`;
+
+        if (this.novel.series) {
+          title += ` | ${this.novel.series.title}`;
+        }
+
+        if (this.novel.user) {
+          title += ` /「${this.novel.user.name}」的作品`;
+        }
+
+        title += ` - pixiv-viewer`;
+
+        document.title = title;
+
+        if (this.isCensored(this.novel)) {
+          this.$toast({
+            message: "根据当前设置，此内容将不予显示",
+            icon: require("@/svg/ban-view.svg"),
+            duration: 3000,
+          });
+          setTimeout(() => {
+            // this.$router.back();
+          }, 5000);
+        }
+      }
+    },
+    parseNovel(novel) {
+      let content = novel.content;
+
+      const parseMap = (tag, from, to) => {
+        console.log(tag, from, to);
+        switch (tag) {
+          case "chapter": {
+            return `<h2>${from}</h2>`;
+          }
+          case "rb": {
+            return `<ruby>${from}<rt>${to}</rt></ruby>`;
+          }
+          default: {
+            console.warn(`unknown tag: ${tag}`, from, to);
+            return from;
+          }
+        }
+      };
+
+      const parseLine = (line) => {
+        if (!line) return;
+
+        // [[rb:至尊 > 皇帝]] -> <ruby>至尊<rt>皇帝</rt></ruby>
+        const regex_cmd = /\[\[(?<tag>.*?):(?<from>.*?)\s?>\s?(?<to>.*?)\]\]/;
+
+        // [chapter:今生の别れ] -> <h2>今生の别れ</h2>
+        const regex_tag = /\[(?<tag>.*?):(?<content>.*?)\]/;
+
+        line = line
+          .replace(regex_cmd, (_, tag, from, to) => parseMap(tag, from, to))
+          .replace(regex_tag, (_, tag, from, to) => parseMap(tag, from, to));
+
+        return `<p>${line}</p>`;
+      };
+
+      content = content.split("\n").map(parseLine).join("");
+
+      this.parsedContent = content;
+    },
+    toTop() {
+      this.$refs.chapterEl.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    scrollHandler() {
+      const { scrollTop, clientHeight, scrollHeight } = this.$refs.chapterEl;
+      if (scrollTop > 1200) {
+        this.isTopShow = true;
+      } else {
+        this.isTopShow = false;
+      }
+
+      if (scrollTop >= scrollHeight - clientHeight) {
+        this.isActionShow = true;
+      }
+    },
+    handleActionDisplay() {
+      if (this.isActionShow) {
+        if (this.isSettingShow) {
+          this.isSettingShow = false;
+        } else {
+          this.isActionShow = false;
+        }
+      } else {
+        this.isActionShow = true;
+      }
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  components: {
+    [Slider.name]: Slider,
+    [Tag.name]: Tag,
+    TopBar,
+  },
+};
+</script>
+
+<style lang="stylus">
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Serif+SC:wght@400;700&display=swap');
+
+:root {
+  --color-fg: #1f1f1f;
+  --color-bg: #ffffff;
+}
+</style>
+
+<style lang="stylus" scoped>
+.chapter {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  z-index: 10;
+}
+
+.topbar__wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 84px;
+  padding: 0 20px;
+  padding-left: 100px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  outline: 2px solid rgba(#000, 0.1);
+  background: rgba(#fff, 0.9);
+  backdrop-filter: blur(4px);
+  filter: drop-shadow(0px -5px 14px rgba(#000, 0.1));
+  transform: translateY(calc(-100% - 100px));
+  transition: transform 0.3s ease-in-out;
+  z-index: 100;
+
+  &.show {
+    transform: translateY(0);
+  }
+
+  .top-bar-wrap {
+    height: 100%;
+  }
+
+  .chapter-name {
+    font-size: 28px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .btn-setting {
+    font-size: 0;
+    z-index: 100;
+    margin-left: auto;
+    cursor: pointer;
+  }
+
+  .icon-setting {
+    width: 50px;
+    height: 50px;
+  }
+}
+
+.novel-content__wrapper {
+  min-height: 100%;
+  overflow: hidden;
+  transition: color 0.3s, background 0.3s;
+  user-select: text;
+
+  .novel-meta {
+    color: #1f1f1f;
+    background: #e6f1fa;
+    border: 2px solid #eaeaea;
+    border-radius: 10px;
+    padding: 14px 20px;
+    margin: 25px auto;
+    max-width: calc(100% - 100px);
+    box-shadow: 0px 24px 15px -16px rgba(#000, 0.15);
+
+    .novel-title {
+      font-size: 36px;
+      line-height: 1.4;
+      margin-bottom: 10px;
+
+      .tag {
+        font-size: 24px;
+      }
+    }
+
+    .info-box {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+
+      .info {
+        display: flex;
+        align-items: center;
+        margin-right: 14px;
+        color: #444;
+        font-size: 24px;
+
+        .icon {
+          color: #ffcd59;
+        }
+      }
+
+      .pixiv {
+        margin-left: 20px;
+        cursor: pointer;
+
+        .icon {
+          width: auto;
+          height: 28px;
+        }
+      }
+    }
+
+    .tag-box {
+      word-break: break-word;
+
+      .tag {
+        display: inline-block;
+        margin-right: 10px;
+        margin-bottom: 4px;
+        font-size: 24px;
+        color: #0096fa;
+      }
+    }
+  }
+
+  .novel-content {
+    padding: 0 20px;
+    font-size: 28px;
+    font-weight: 400;
+    // color: var(--color-fg, #1f1f1f);
+    // background: var(--color-bg, #fff);
+    transition: color 0.3s, background 0.3s;
+
+    &.censored {
+      filter: blur(16px) opacity(0.5);
+      user-select: none;
+    }
+
+    &::v-deep {
+      p {
+        margin: 1em 0;
+      }
+
+      h2 {
+        font-size: 1.5em;
+      }
+    }
+  }
+}
+
+.action__wrapper {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  // height: 400px;
+  padding: 30px 40px;
+  padding-bottom: 10px;
+  box-sizing: border-box;
+  outline: 2px solid rgba(#000, 0.1);
+  border-radius: 30px 30px 0 0;
+  background: rgba(#fff, 0.9);
+  backdrop-filter: blur(4px);
+  filter: drop-shadow(0px -5px 14px rgba(#000, 0.1));
+  transform: translateY(calc(100% + 100px));
+  transition: transform 0.3s ease-in-out;
+
+  &.show {
+    transform: translateY(0);
+
+    .back-top {
+      top: -140px;
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0 20px;
+  }
+
+  .action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 26px 0;
+    white-space: nowrap;
+
+    &.slider {
+      span {
+        flex: none;
+        display: inline-block;
+        text-align: center;
+        width: 30px;
+      }
+
+      .big {
+        font-size: 1.3em;
+      }
+
+      .van-slider {
+        height: 5px;
+        margin: 0 2px;
+        // filter: drop-shadow(0 1px 1px rgba(#000, 0.25));
+        outline: 1px solid rgba(#000, 0.08);
+        z-index: 5;
+
+        .slide-button {
+          width: 34px;
+          height: 34px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 12px;
+          line-height: 1;
+          color: #1f1f1f;
+          background-color: #fff;
+          border-radius: 100px;
+          filter: drop-shadow(2px 4px 4px rgba(#000, 0.1));
+        }
+      }
+    }
+
+    .color {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 64px;
+      height: 64px;
+      font-size: 30px;
+      line-height: 1;
+      border: 2px solid #a6a6a6;
+      border-radius: 50%;
+      margin: 0 10px;
+      cursor: pointer;
+
+      &.active {
+        border-color: #ffcd59;
+      }
+    }
+
+    .font {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 42px;
+      padding: 0 14px;
+      margin: 0 10px;
+      font-size: 24px;
+      line-height: 1;
+      border: 2px solid #a6a6a6;
+      border-radius: 10px;
+      cursor: pointer;
+
+      &.active {
+        border-color: #ffcd59;
+      }
+    }
+  }
+}
+
+.back-top {
+  position: absolute;
+  right: 30px;
+  top: -250px;
+  cursor: pointer;
+  transform: translateX(100% + 50px);
+  transition: all 0.3s ease-in-out;
+
+  &.show {
+    transform: translateX(0);
+  }
+
+  .icon-top {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .action__wrapper {
+    right: 0;
+    width: 600px;
+    margin: 0 auto;
+
+    .action-item {
+      font-size: 20px;
+    }
+  }
+
+  .novel-content__wrapper {
+    .novel-meta {
+      max-width: 1200px;
+    }
+
+    .novel-content {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Novel/index.vue b/src/views/Novel/index.vue
new file mode 100644
index 00000000..94da1ae4
--- /dev/null
+++ b/src/views/Novel/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="novel-series">
+    <TopBar />
+    <keep-alive>
+      <router-view></router-view>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import TopBar from "@/components/TopBar";
+
+export default {
+  name: "Series",
+  watch: {
+    $route() {
+      if (
+        this.$route.name === "Novel" &&
+        this.$route.params.id !== this.novel.id
+      ) {
+        this.init();
+      }
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      novel: {},
+    };
+  },
+  components: {
+    TopBar,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/Search/index.vue b/src/views/Search/index.vue
index cc2d043d..a9284cd5 100644
--- a/src/views/Search/index.vue
+++ b/src/views/Search/index.vue
@@ -22,13 +22,26 @@
         >
         <div class="word" v-for="(keyword, index) in keywordsList" :key="index">
           <span class="text">{{ keyword }}</span>
-          <span class="close" :data-index="index"></span>
+          <span class="close" :data-index="index">
+            <Icon name="close"></Icon>
+          </span>
         </div>
         <div class="word" v-if="lastWord">
           <span class="text no-line">{{ lastWord }}</span>
         </div>
       </div>
-      <div class="search-history" v-if="searchHistory.length > 0 && focus">
+      <div class="search-type" v-show="focus">
+        <div
+          class="seacch-type__item"
+          :class="{ active: searchType === item.type }"
+          @click="changeSearchType(item.type)"
+          v-for="item in searchTypeMap"
+          :key="item.type"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="search-history" v-show="searchHistory.length > 0 && focus">
         <div class="title-bar">
           历史搜索
           <div @click="clearHistory">
@@ -75,17 +88,26 @@
             :col="col"
             :width="itemWidth"
             :gutterWidth="0"
-            :data="artList.slice(3)"
+            :data="artList"
           >
             <router-link
               :to="{
-                name: 'Artwork',
+                name: { illust: 'Artwork', novel: 'Novel' }[searchType],
                 params: { id: art.id, list: artList },
               }"
-              v-for="art in artList.slice(3)"
+              v-for="art in artList"
               :key="art.id"
             >
-              <ImageCard mode="meta" :artwork="art" />
+              <ImageCard
+                mode="meta"
+                :artwork="art"
+                v-if="searchType === 'illust'"
+              />
+              <NovelCard
+                mode="meta"
+                :artwork="art"
+                v-if="searchType === 'novel'"
+              />
             </router-link>
           </waterfall>
         </div>
@@ -104,6 +126,7 @@
 <script>
 import { Search, List, Loading, Empty, Icon } from "vant";
 import ImageCard from "@/components/ImageCard";
+import NovelCard from "@/components/NovelCard";
 import Tags from "./components/Tags";
 import ImageSearch from "./components/ImageSearch";
 import { mapState, mapActions } from "vuex";
@@ -124,6 +147,7 @@ export default {
       col: 2,
       itemWidth: 0,
       scrollTop: 0,
+      searchType: "illust",
       keywords__: "",
       keywords: "", // 关键词搜索框真实搜索内容
       keywordsList: [], // 关键词搜索框分词列表（空格分割）
@@ -136,16 +160,21 @@ export default {
       finished: false,
       maskShow: false,
       imageSearchShow: true,
+      searchTypeMap: [
+        { name: "插画", type: "illust" },
+        { name: "小说", type: "novel" },
+      ],
     };
   },
   watch: {
     $route() {
       // console.log(this.$route.query);
-      let keyword = this.$route.query.keyword;
+      const { type, keyword } = this.$route.query;
       if (!keyword || this.keywords.trim() === keyword.trim()) return;
 
       this.keywords = keyword + " ";
       this.reset();
+      this.searchType = type || "illust";
       this.search(this.keywords);
     },
     keywords() {
@@ -199,6 +228,14 @@ export default {
         this.search(this.keywords);
       }
     },
+    changeSearchType(type) {
+      if (this.searchType === type) return;
+
+      this.reset();
+      this.searchType = type;
+      this.resize();
+      this.search(this.keywords);
+    },
     search: _.throttle(async function (val) {
       val = val || this.keywords;
       this.keywords__ = val;
@@ -212,7 +249,7 @@ export default {
 
       this.setSearchHistory(val);
 
-      let res = await api.search(val, this.curPage);
+      let res = await api.search(val, this.curPage, this.searchType);
       if (res.status === 0) {
         let newList = res.data;
         let artList = JSON.parse(JSON.stringify(this.artList));
@@ -225,6 +262,19 @@ export default {
         this.curPage++;
         if (this.curPage > 5) this.finished = true;
 
+        if (
+          this.$route.query.keyword !== val ||
+          this.$route.query.type !== this.searchType
+        ) {
+          this.$router.replace({
+            name: "Search",
+            query: {
+              type: this.searchType,
+              keyword: val,
+            },
+          });
+        }
+
         this.$nextTick(this.resize);
       } else {
         this.$toast({
@@ -298,14 +348,18 @@ export default {
       if (!this.$refs.cardBox) return;
       const clientWidth = document.documentElement.clientWidth;
 
-      if (clientWidth < 375) {
+      if (this.searchType == "novel") {
         this.col = 1;
-      } else if (clientWidth <= 768) {
-        this.col = 2;
-      } else if (clientWidth <= 1600) {
-        this.col = 3;
       } else {
-        this.col = 4;
+        if (clientWidth < 375) {
+          this.col = 1;
+        } else if (clientWidth <= 768) {
+          this.col = 2;
+        } else if (clientWidth <= 1600) {
+          this.col = 3;
+        } else {
+          this.col = 4;
+        }
       }
 
       this.itemWidth = Math.floor(
@@ -321,10 +375,13 @@ export default {
         input.setSelectionRange(input.value.length, input.value.length);
     });
 
-    let keyword = this.$route.query.keyword;
+    const { type, keyword } = this.$route.query;
     if (this.$route.name === "Search" && keyword) {
+      if (!keyword || this.keywords.trim() === keyword.trim()) return;
+
       this.keywords = keyword + " ";
       this.reset();
+      this.searchType = type || "illust";
       this.search(this.keywords);
     }
     window.addEventListener("resize", this.resize);
@@ -341,6 +398,7 @@ export default {
     [Empty.name]: Empty,
     [Icon.name]: Icon,
     ImageCard,
+    NovelCard,
   },
 };
 </script>
@@ -363,10 +421,12 @@ export default {
     top: env(safe-area-inset-top);
     width: 100%;
     max-width: 10rem;
-    // min-height: 122px;
+    padding: 20px 10px;
+    padding-top: 124px;
     background: #fff;
-    z-index: 1;
+    z-index: 20;
     transition: all 0.2s;
+    box-sizing: border-box;
 
     &.dropdown {
       // height: 500px;
@@ -388,6 +448,8 @@ export default {
 
     .search-bar {
       position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 128px;
 
@@ -405,7 +467,7 @@ export default {
     .search-bar-word {
       position: absolute;
       top: 40px;
-      left: 88px;
+      left: 94px;
       font-size: 0;
       width: 100%;
       max-width: 580px;
@@ -426,40 +488,48 @@ export default {
 
       // box-sizing: border-box;
       ::v-deep .word {
+        position: relative;
         display: inline-block;
         color: #fff;
-        background: #7bb7e7;
+        background: #0096fa;
         padding: 10px 8px;
+        padding-right: 30px;
         margin: 0 8px;
         border-radius: 8px;
         font-size: 24px;
         overflow: hidden;
 
         .text {
-          border-right: 1px solid #acd9fd;
-          padding-right: 8px;
-
           &.no-line {
             border-color: rgba(#fff, 0);
           }
         }
 
         .close {
-          display: inline-block;
-          width: 24px;
-          height: 24px;
-          background: url('~@/svg/close.svg');
-          background-size: 100%;
+          position: absolute;
+          top: 6px;
+          right: 4px;
+          width: 22px;
+          height: 22px;
+          font-size: 0;
+          cursor: pointer;
+
+          .svg-icon {
+            width: 100%;
+            height: 100%;
+            color: #fff;
+            fill: #999;
+            pointer-events: none;
+          }
         }
       }
     }
 
     .image-search-mask {
-      position: fixed;
+      position: absolute;
       top: 128px;
       top: env(safe-area-inset-top);
       width: 100%;
-      max-width: 10rem;
       height: calc(100% - 128px);
       height: calc(100% - env(safe-area-inset-top));
       box-sizing: border-box;
@@ -468,12 +538,44 @@ export default {
       transition: all 0.2s;
     }
 
+    .search-type {
+      margin: 8px 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-radius: 999px;
+      overflow: hidden;
+      outline: 1px solid #eee;
+
+      .seacch-type__item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 50%;
+        padding: 18px 0;
+        font-size: 26px;
+        border-right: 1px solid #eee;
+        transition: all 0.12s;
+        cursor: pointer;
+
+        &:hover {
+          filter: brightness(1.1);
+        }
+
+        &:last-child {
+          border-right: none;
+        }
+
+        &.active {
+          color: #fff;
+          background: #0096fa;
+        }
+      }
+    }
+
     .search-history {
       // position: absolute;
-      margin-top: 150px;
-      margin-bottom: 20px;
       width: 100%;
-      padding: 0 6px;
       box-sizing: border-box;
       overflow: hidden;
 
@@ -513,7 +615,7 @@ export default {
     position: relative;
     min-height: 100vh;
     // overflow-y: scroll;
-    padding-top: 122px;
+    padding-top: 128px;
     padding-bottom: 100px;
     padding-bottom: calc(100px + env(safe-area-inset-bottom));
     box-sizing: border-box;
@@ -525,15 +627,15 @@ export default {
     &.focus {
       >.mask {
         display: block;
-        position: fixed;
+        position: absolute;
         top: 122px;
         width: 100%;
-        max-width: 10rem;
         height: calc(100% - 122px);
         box-sizing: border-box;
         // pointer-events: none;
         background: rgba(0, 0, 0, 0.6);
         transition: all 0.2s;
+        z-index: 10;
       }
     }
   }
@@ -555,7 +657,7 @@ export default {
       flex-direction: row;
     }
 
-    .image-card {
+    .image-card, .novel-card {
       max-height: 500px;
       margin: 14px 6px;
       border: 1px solid #ebebeb;
diff --git a/src/views/Users/components/AuthorIllusts.vue b/src/views/Users/components/AuthorIllusts.vue
index 54860577..ad66246b 100644
--- a/src/views/Users/components/AuthorIllusts.vue
+++ b/src/views/Users/components/AuthorIllusts.vue
@@ -17,7 +17,7 @@
     <van-list
       v-model="loading"
       :finished="finished"
-      :finished-text="!once ? '没有更多了' : ''"
+      :finished-text="!once || !artList.length ? '没有更多了' : ''"
       :error.sync="error"
       error-text="网络异常，点击重新加载"
       @load="getMemberArtwork()"
@@ -37,7 +37,7 @@
             v-for="art in artList"
             :key="art.id"
           >
-            <ImageCard mode="title" :artwork="art" />
+            <ImageCard mode="meta" :artwork="art" />
           </router-link>
         </waterfall>
       </div>
@@ -86,7 +86,11 @@ export default {
       let newList;
       let res = await api.getMemberArtwork(this.id, this.curPage);
       if (res.status === 0) {
-        if (res.finished) return (this.finished = true);
+        if (res.finished) {
+          this.finished = true;
+          this.loading = false;
+          return;
+        }
 
         newList = res.data;
         if (this.once) newList = newList.slice(0, 10);
diff --git a/src/views/Users/components/AuthorNovels.vue b/src/views/Users/components/AuthorNovels.vue
new file mode 100644
index 00000000..7677a823
--- /dev/null
+++ b/src/views/Users/components/AuthorNovels.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="novels">
+    <van-cell
+      class="cell"
+      :border="false"
+      is-link
+      @click="onClick()"
+      v-if="once"
+    >
+      <template #title>
+        <span class="title">
+          小说作品
+          <span class="num" v-if="num">{{ num }}件作品</span>
+        </span>
+      </template>
+    </van-cell>
+    <van-list
+      v-model="loading"
+      :finished="finished"
+      :finished-text="!once || !artList.length ? '没有更多了' : ''"
+      :error.sync="error"
+      error-text="网络异常，点击重新加载"
+      @load="getMemberNovel()"
+    >
+      <div class="card-box__wrapper" ref="cardBox">
+        <waterfall
+          :col="col"
+          :width="itemWidth"
+          :gutterWidth="0"
+          :data="artList"
+        >
+          <router-link
+            :to="{
+              name: 'Novel',
+              params: { id: art.id, list: artList },
+            }"
+            v-for="art in artList"
+            :key="art.id"
+          >
+            <NovelCard mode="meta" :artwork="art" />
+          </router-link>
+        </waterfall>
+      </div>
+    </van-list>
+  </div>
+</template>
+
+<script>
+import { Cell, Swipe, SwipeItem, Icon, List, PullRefresh } from "vant";
+import NovelCard from "@/components/NovelCard";
+import api from "@/api";
+import _ from "lodash";
+export default {
+  name: "AuthorNovels",
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+    num: {
+      type: Number,
+    },
+    once: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      col: 1,
+      itemWidth: 0,
+      curPage: 1,
+      artList: [],
+      error: false,
+      loading: false,
+      finished: false,
+    };
+  },
+  methods: {
+    reset() {
+      this.curPage = 1;
+      this.artList = [];
+    },
+    getMemberNovel: _.throttle(async function () {
+      if (!this.id) return;
+      let newList;
+      let res = await api.getMemberNovel(this.id, this.curPage);
+      if (res.status === 0) {
+        if (res.finished) {
+          this.finished = true;
+          this.loading = false;
+          return;
+        }
+
+        newList = res.data;
+        if (this.once) newList = newList.slice(0, 10);
+        let artList = JSON.parse(JSON.stringify(this.artList));
+
+        artList.push(...newList);
+        artList = _.uniqBy(artList, "id");
+
+        this.artList = artList;
+        this.loading = false;
+        this.curPage++;
+        if (this.once || this.curPage > 20) this.finished = true;
+        this.$nextTick(this.resize);
+      } else {
+        this.$toast({
+          message: res.msg,
+        });
+        this.loading = false;
+        this.error = true;
+      }
+    }, 500),
+    odd(list) {
+      return list.filter((_, index) => (index + 1) % 2);
+    },
+    even(list) {
+      return list.filter((_, index) => !((index + 1) % 2));
+    },
+    toArtwork(id) {
+      this.$router.push({
+        name: "Artwork",
+        params: { id, list: this.artList },
+      });
+    },
+    onClick() {
+      this.$emit("onCilck");
+    },
+    resize() {
+      if (!this.$refs.cardBox) return;
+
+      this.itemWidth = Math.floor(
+        this.$refs.cardBox.firstChild.clientWidth / this.col
+      );
+    },
+  },
+  mounted() {
+    this.reset();
+    this.getMemberNovel();
+    window.addEventListener("resize", this.resize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.resize);
+  },
+  components: {
+    [Cell.name]: Cell,
+    [Swipe.name]: Swipe,
+    [SwipeItem.name]: SwipeItem,
+    [Icon.name]: Icon,
+    [List.name]: List,
+    [PullRefresh.name]: PullRefresh,
+    NovelCard,
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.novels {
+  .cell {
+    padding: 10px 20px;
+  }
+
+  .num {
+    float: right;
+    font-size: 26px;
+    color: #888;
+  }
+
+  .card-box__wrapper {
+    width: 100%;
+
+    .card-box {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .novel-card {
+      max-height: 500px;
+      margin: 14px 6px;
+      border: 1px solid #ebebeb;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Users/components/FavoriteIllusts.vue b/src/views/Users/components/FavoriteIllusts.vue
index d3c06b1f..85ed8b8f 100644
--- a/src/views/Users/components/FavoriteIllusts.vue
+++ b/src/views/Users/components/FavoriteIllusts.vue
@@ -1,40 +1,45 @@
 <template>
   <div class="favorite">
-    <van-cell class="cell" :border="false" is-link @click="onClick()" v-if="once">
+    <van-cell
+      class="cell"
+      :border="false"
+      is-link
+      @click="onClick()"
+      v-if="once"
+    >
       <template #title>
         <span class="title">
           用户收藏
-          <span class="num" v-if="num">{{num}}件作品</span>
+          <span class="num" v-if="num">{{ num }}件作品</span>
         </span>
       </template>
     </van-cell>
     <van-list
       v-model="loading"
       :finished="finished"
-      :finished-text="!once ? '没有更多了' : ''"
+      :finished-text="!once || !artList.length ? '没有更多了' : ''"
       :error.sync="error"
       error-text="网络异常，点击重新加载"
       @load="getMemberFavorite()"
     >
-      <div class="card-box">
-        <div class="column">
-          <ImageCard
-            mode="cover"
-            :artwork="art"
-            @click-card="toArtwork($event)"
-            v-for="art in odd(artList)"
-            :key="art.id"
-          />
-        </div>
-        <div class="column">
-          <ImageCard
-            mode="cover"
-            :artwork="art"
-            @click-card="toArtwork($event)"
-            v-for="art in even(artList)"
+      <div class="card-box__wrapper" ref="cardBox">
+        <waterfall
+          :col="col"
+          :width="itemWidth"
+          :gutterWidth="0"
+          :data="artList"
+        >
+          <router-link
+            :to="{
+              name: 'Artwork',
+              params: { id: art.id, list: artList },
+            }"
+            v-for="art in artList"
             :key="art.id"
-          />
-        </div>
+          >
+            <ImageCard mode="meta" :artwork="art" />
+          </router-link>
+        </waterfall>
       </div>
     </van-list>
   </div>
@@ -50,23 +55,25 @@ export default {
   props: {
     id: {
       type: Number,
-      required: true
+      required: true,
     },
     num: {
-      type: Number
+      type: Number,
     },
     once: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
+      col: 2,
+      itemWidth: 0,
       next: 0,
       artList: [],
       error: false,
       loading: false,
-      finished: false
+      finished: false,
     };
   },
   methods: {
@@ -74,7 +81,7 @@ export default {
       this.next = 0;
       this.artList = [];
     },
-    getMemberFavorite: _.throttle(async function() {
+    getMemberFavorite: _.throttle(async function () {
       if (!this.id) return;
       let newList;
       let res = await api.getMemberFavorite(this.id, this.next);
@@ -90,9 +97,10 @@ export default {
         this.artList = artList;
         this.loading = false;
         if (this.once || !this.next) this.finished = true;
+        this.$nextTick(this.resize);
       } else {
         this.$toast({
-          message: res.msg
+          message: res.msg,
         });
         this.loading = false;
         this.error = true;
@@ -107,16 +115,38 @@ export default {
     toArtwork(id) {
       this.$router.push({
         name: "Artwork",
-        params: { id, list: this.artList }
+        params: { id, list: this.artList },
       });
     },
     onClick() {
       this.$emit("onCilck");
-    }
+    },
+    resize() {
+      if (!this.$refs.cardBox) return;
+      const clientWidth = document.documentElement.clientWidth;
+
+      if (clientWidth < 375) {
+        this.col = 1;
+      } else if (clientWidth <= 768) {
+        this.col = 2;
+      } else if (clientWidth <= 1600) {
+        this.col = 3;
+      } else {
+        this.col = 4;
+      }
+
+      this.itemWidth = Math.floor(
+        this.$refs.cardBox.firstChild.clientWidth / this.col
+      );
+    },
   },
   mounted() {
     this.reset();
     this.getMemberFavorite();
+    window.addEventListener("resize", this.resize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.resize);
   },
   components: {
     [Cell.name]: Cell,
@@ -125,8 +155,8 @@ export default {
     [Icon.name]: Icon,
     [List.name]: List,
     [PullRefresh.name]: PullRefresh,
-    ImageCard
-  }
+    ImageCard,
+  },
 };
 </script>
 
@@ -142,18 +172,18 @@ export default {
     color: #888;
   }
 
-  .card-box {
-    padding: 0 12px;
-    display: flex;
-    flex-direction: row;
+  .card-box__wrapper {
+    width: 100%;
 
-    .column {
-      width: 50%;
+    .card-box {
+      display: flex;
+      flex-direction: row;
+    }
 
-      .image-card {
-        max-height: 360px;
-        margin: 4px 2px;
-      }
+    .image-card {
+      max-height: 500px;
+      margin: 14px 6px;
+      border: 1px solid #ebebeb;
     }
   }
 }
diff --git a/src/views/Users/index.vue b/src/views/Users/index.vue
index 1baad82f..a5311f83 100644
--- a/src/views/Users/index.vue
+++ b/src/views/Users/index.vue
@@ -1,5 +1,21 @@
 <template>
   <div class="user-container">
+    <div class="illust-wrap" v-if="showNovels">
+      <div class="illust">
+        <TopBar
+          :action="
+            () => {
+              showNovels = false;
+            }
+          "
+        />
+        <AuthorNovels
+          v-if="userInfo.id"
+          :id="userInfo.id"
+          key="multi-novel"
+        />
+      </div>
+    </div>
     <div class="illust-wrap" v-if="showIllusts">
       <div class="illust">
         <TopBar
@@ -32,7 +48,10 @@
         />
       </div>
     </div>
-    <div class="user-wrap" v-show="!showIllusts && !showFavorite">
+    <div
+      class="user-wrap"
+      v-show="!showIllusts && !showFavorite && !showNovels"
+    >
       <div class="users">
         <TopBar />
         <div class="info-container" v-if="userInfo.id">
@@ -86,6 +105,14 @@
             </div>
           </div>
         </div>
+        <AuthorNovels
+          v-if="userInfo.id"
+          :id="userInfo.id"
+          :num="userInfo.novels"
+          :once="true"
+          @onCilck="showSub('novels')"
+          key="once-novel"
+        />
         <AuthorIllusts
           v-if="userInfo.id"
           :id="userInfo.id"
@@ -109,6 +136,7 @@
 
 <script>
 import TopBar from "@/components/TopBar";
+import AuthorNovels from "./components/AuthorNovels";
 import AuthorIllusts from "./components/AuthorIllusts";
 import FavoriteIllusts from "./components/FavoriteIllusts";
 import api from "@/api";
@@ -131,6 +159,7 @@ export default {
       loading: false,
       userInfo: {},
       isEx: false,
+      showNovels: false,
       showIllusts: false,
       showFavorite: false,
       commentHeight: 0,
@@ -170,6 +199,10 @@ export default {
           this.showFavorite = true;
           break;
 
+        case "novels":
+          this.showNovels = true;
+          break;
+
         default:
           break;
       }
@@ -187,6 +220,7 @@ export default {
   },
   components: {
     TopBar,
+    AuthorNovels,
     AuthorIllusts,
     FavoriteIllusts,
   },