feat: 添加作者信息页

src/api/index.js

@@ -3,7 +3,55 @@ import { LocalStorage, SessionStorage } from '@/utils/storage'
 import moment from 'moment'
 import { Base64 } from 'js-base64';
 
-const imgProxy = url => url.replace(/i.pximg.net/g, 'pximg.pixiv-viewer.workers.dev')
+const isSupportWebP = (() => {
+  const elem = document.createElement('canvas');
+
+  if (elem.getContext && elem.getContext('2d')) {
+    // was able or not to get WebP representation
+    return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+  }
+
+  // very old browser like IE 8, canvas not supported
+  return false;
+})();
+
+const imgProxy = url => {
+  let result = url.replace(/i.pximg.net/g, 'pximg.pixiv-viewer.workers.dev')
+
+  if (!isSupportWebP) {
+    result = result.replace(/_10_webp/g, '_70')
+    result = result.replace(/_webp/g, '')
+  }
+  return result
+}
+
+const parseUser = data => {
+  const { user, profile, workspace } = data
+  let { id, account, name, comment } = user
+  let { background_image_url, birth, birth_day, gender, is_premium, is_using_custom_profile_image, job, total_follow_users, total_mypixiv_users, total_illust_bookmarks_public, total_illusts, twitter_account, twitter_url, webpage } = profile
+
+  return {
+    id,
+    account,
+    name,
+    comment,
+    avatar: imgProxy(user.profile_image_urls.medium),
+    bgcover: background_image_url,
+    birth: `${birth}-${birth_day}`,
+    gender,
+    is_premium,
+    is_using_custom_profile_image,
+    job,
+    follow: total_follow_users,
+    friend: total_mypixiv_users,
+    bookmarks: total_illust_bookmarks_public,
+    illusts: total_illusts,
+    twitter_account,
+    twitter_url,
+    webpage,
+    workspace
+  }
+}
 
 const parseIllust = data => {
   let { id, title, caption, create_date, tags, tools, width, height, x_restrict, total_view, total_bookmarks } = data
@@ -311,7 +359,7 @@ const api = {
           msg: res.error.user_message || res.error.message
         }
       } else {
-        memberInfo = res
+        memberInfo = parseUser(res)
       }
 
       LocalStorage.set(`memberInfo_${id}`, memberInfo)
@@ -326,14 +374,16 @@ const api = {
   /**
    * 
    * @param {Number} id 画师ID
+   * @param {Number} page 页数 
    */
-  async getMemberArtwork(id) {
+  async getMemberArtwork(id, page) {
     let memberArtwork
-    if (!LocalStorage.has(`memberArtwork_${id}`)) {
+    if (!LocalStorage.has(`memberArtwork_${id}_p${page}`)) {
 
       let res = await get('/v2/', {
         type: 'member_illust',
-        id
+        id,
+        page
       })
 
       let data
@@ -355,14 +405,58 @@ const api = {
         return parseIllust(art)
       })
 
-      LocalStorage.set(`memberArtwork_${id}`, memberArtwork)
+      LocalStorage.set(`memberArtwork_${id}_p${page}`, memberArtwork)
     } else {
-      memberArtwork = LocalStorage.get(`memberArtwork_${id}`)
+      memberArtwork = LocalStorage.get(`memberArtwork_${id}_p${page}`)
     }
 
     return { status: 0, data: memberArtwork }
   },
 
+  /**
+   * 
+   * @param {Number} id 画师ID
+   * @param {Number} max_bookmark_id max_bookmark_id
+   */
+  async getMemberFavorite(id, max_bookmark_id) {
+    let memberFavorite = {}
+    if (!LocalStorage.has(`memberFavorite_${id}_m${max_bookmark_id}`)) {
+
+      let res = await get('/v2/', {
+        type: 'favorite',
+        id,
+        max_bookmark_id
+      })
+
+      let data
+      if (res.illusts) {
+        data = res
+      } else if (res.error) {
+        return {
+          status: -1,
+          msg: res.error.user_message || res.error.message
+        }
+      } else {
+        return {
+          status: -1,
+          msg: '未知错误'
+        }
+      }
+
+      const url = new URLSearchParams(data.next_url)
+      memberFavorite.next = url.get('max_bookmark_id')
+      memberFavorite.illusts = data.illusts.map(art => {
+        return parseIllust(art)
+      })
+
+      LocalStorage.set(`memberFavorite_${id}_m${max_bookmark_id}`, memberFavorite)
+    } else {
+      memberFavorite = LocalStorage.get(`memberFavorite_${id}_m${max_bookmark_id}`)
+    }
+
+    return { status: 0, data: memberFavorite }
+  },
+
   async getTags() {
     let tags
     if (!LocalStorage.has(`tags`)) {

src/components/TopBar.vue

@@ -9,8 +9,18 @@
 <script>
 import { NavBar } from "vant";
 export default {
+  props: {
+    action: {
+      type: Function
+    }
+  },
   methods: {
     back() {
+      if (this.action) {
+        this.action();
+        return;
+      }
+
       if (history.length <= 2) {
         this.$router.push({ name: "Home" });
       } else {
@@ -31,7 +41,7 @@ export default {
   padding-top: 60px;
   width: 100%;
   max-width: 10rem;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(#fff, 0));
   z-index: 99;
 
   svg {

src/router/index.js

@@ -11,6 +11,7 @@ import Search from '@/views/Search'
 import Rank from '@/views/Rank'
 import Setting from '@/views/Setting'
 import Artwork from '@/views/Artwork'
+import Users from '@/views/Users'
 
 Vue.use(VueRouter)
 
@@ -69,6 +70,11 @@ const routes = [
             path: '/artwork/:id',
             name: 'Artwork',
             component: Artwork
+          },
+          {
+            path: '/users/:id',
+            name: 'Users',
+            component: Users
           }
         ]
       }

src/views/Artwork/components/AuthorCard.vue

@@ -102,9 +102,9 @@ export default {
       });
     },
     toAuthor(id) {
-      this.$toast({
-        message: "开发中",
-        position: "bottom"
+      this.$router.push({
+        name: "Users",
+        params: { id }
       });
     },
     ...mapActions(["setGalleryList"])

src/views/Artwork/components/ImageView.vue

@@ -145,7 +145,7 @@ export default {
       right: 0;
       bottom: 0;
       left: 0;
-      background: linear-gradient(to top, rgb(255, 255, 255), transparent);
+      background: linear-gradient(to top, rgb(255, 255, 255), rgba(#fff, 0));
     }
 
     .dropdown {
@@ -154,7 +154,8 @@ export default {
       left: 50%;
       transform: translateX(-50%);
       z-index: 1;
-      filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, 0.5));
+      color #fafafa
+      filter: drop-shadow(1px 4px 8px rgba(0, 0, 0, 0.2));
       animation: ani-dropdown 2s ease-in-out infinite;
     }
 

src/views/Artwork/components/Meta.vue

@@ -5,7 +5,12 @@
       <canvas class="mask-text" ref="mask"></canvas>
     </div>
     <div class="author-info">
-      <img class="avatar" :src="artwork.author.avatar" :alt="artwork.author.name" />
+      <img
+        class="avatar"
+        :src="artwork.author.avatar"
+        :alt="artwork.author.name"
+        @click="toAuthor(artwork.author.id)"
+      />
       <div class="name-box">
         <h2 class="title">{{artwork.title}}</h2>
         <div class="author">{{artwork.author.name}}</div>
@@ -25,7 +30,11 @@
     <ul class="tag-list" :class="{censored: isCensored(artwork)}">
       <template v-for="tag in artwork.tags">
         <li class="tag name" @click="toSearch(tag.name)">#{{tag.name}}</li>
-        <li class="tag translated" @click="toSearch(tag.name)" v-if="tag.translated_name">{{tag.translated_name}}</li>
+        <li
+          class="tag translated"
+          @click="toSearch(tag.name)"
+          v-if="tag.translated_name"
+        >{{tag.translated_name}}</li>
       </template>
     </ul>
     <div
@@ -100,13 +109,19 @@ export default {
         window.open(e.target.href);
       }
     },
-    toSearch(keyword){
+    toAuthor(id) {
       this.$router.push({
-        name: 'Search',
+        name: "Users",
+        params: { id }
+      });
+    },
+    toSearch(keyword) {
+      this.$router.push({
+        name: "Search",
         params: {
           keyword: keyword
         }
-      })
+      });
     }
   },
   mounted() {
@@ -138,7 +153,7 @@ export default {
 
   .author-info {
     height: 86px;
-    margin: 12px 0;
+    margin: 10px 0 20px 0;
 
     .avatar {
       float: left;

src/views/Artwork/index.vue

@@ -60,7 +60,7 @@ export default {
   },
   methods: {
     init() {
-      window.scrollTo({ top: 0, behavior: "smooth" });
+      document.querySelector('.app-main').scrollTo({ top: 0, behavior: "smooth" });
       this.loading = true;
       let id = +this.$route.params.id;
       this.artwork = {};

src/views/Rank/components/Nav.vue

@@ -59,8 +59,9 @@ export default {
 
   a {
     display: inline-block;
+    font-size: 28px;
     padding: 12px 20px;
-    margin: 8px 6px;
+    margin: 12px 6px;
     border-radius: 24px;
     color: #333;
     background: #eee;

src/views/Search/index.vue

@@ -393,7 +393,7 @@ export default {
           padding-right: 8px;
 
           &.no-line {
-            border-color: transparent;
+            border-color: rgba(#fff, 0);
           }
         }