diff --git a/api/API.js b/api/API.js
index 702efc8ac..dbfa068ac 100644
--- a/api/API.js
+++ b/api/API.js
@@ -1153,6 +1153,12 @@ minetokenGetResources(tokenId) {
       timeout: 60 * 1000
     })
   },
+  renewBscWithdrawPermit(permitId) {
+    return request({
+      method: 'GET',
+      url: `/minetoken/crosschain-permit/renew/${permitId}/`,
+    })
+  },
   listMyCrossChainDeposit() {
     return request({
       method: 'GET',
diff --git a/assets/img/dapp-banner-shuttle.png b/assets/img/dapp-banner-shuttle.png
new file mode 100644
index 000000000..eeb0f0cec
Binary files /dev/null and b/assets/img/dapp-banner-shuttle.png differ
diff --git a/components/bilibili_card/bilibili_anime.vue b/components/bilibili_card/bilibili_anime.vue
new file mode 100644
index 000000000..e72b2770d
--- /dev/null
+++ b/components/bilibili_card/bilibili_anime.vue
@@ -0,0 +1,156 @@
+<template>
+  <a class="linkbox" :href="'https://www.bilibili.com/bangumi/play/ep' + card.episode_id" target="_blank">
+    <div class="videocard">
+      <div class="videocard-l">
+        <el-image
+          :src="card.cover"
+          alt="image"
+          fit="cover"
+          lazy
+        />
+        <div class="videocard-l-type">
+          {{ card.apiSeasonInfo.type_name }}
+        </div>
+      </div>
+      <div class="videocard-r">
+        <h4>
+          {{ card.new_desc }}
+        </h4>
+        <p />
+        <div class="videocard-r-heat">
+          <div class="videocard-r-heat-views">
+            <svg-icon icon-class="bilibili_views" />
+            {{ card.play_count }}
+          </div>
+          <div class="videocard-r-heat-barrage">
+            <svg-icon icon-class="bilibili_barrage" />
+            {{ card.bullet_count }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</template>
+
+<script>
+
+export default {
+  props: {
+    // 卡片数据
+    card: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.linkbox {
+  text-decoration: none;
+  display: block;
+}
+
+.word-limit {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.videocard {
+  border: 1px solid #E6E9EE;
+  background: white;
+  border-radius: 5px;
+  overflow: hidden;
+  box-sizing: border-box;
+  height: 127px;
+  display: flex;
+  max-width: 520px;
+  transition: all 0.2s;
+
+  &:hover {
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  &-l {
+    width: 203px;
+    height: 100%;
+    min-width: 203px;
+    position: relative;
+    border-radius: 5px;
+    overflow: hidden;
+    .el-image {
+      width: 100%;
+      height: 100%;
+    }
+    &-type {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: #fb7299;
+      text-align: center;
+      font-size: 12px;
+      height: 18px;
+      color: white;
+      padding: 0 4px;
+      border-radius: 5px;
+      overflow: hidden;
+    }
+  }
+
+  &-r {
+    margin: 0 12px 0 16px;
+    h4 {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 19px;
+      color: #212121;
+      height: 38px;
+      margin: 9px 0 0;
+      padding: 0;
+      .word-limit();
+    }
+
+    p {
+      height: 38px;
+      margin:  8px 0 0;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 19px;
+      color: #666;
+      padding: 0;
+      .word-limit();
+    }
+
+    &-heat {
+      display: flex;
+      margin-top: 8px;
+      &-views {
+        margin: 0 10px 0 0;
+        color: #999;
+        font-size: 12px;
+        line-height: 18px;
+        svg {
+          font-size: 14px;
+        }
+      }
+
+      &-barrage {
+        margin: 0;
+        color: #999;
+        font-size: 12px;
+        line-height: 18px;
+        svg {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/components/bilibili_card/bilibili_origin.vue b/components/bilibili_card/bilibili_origin.vue
index 04ba48098..a128b959f 100644
--- a/components/bilibili_card/bilibili_origin.vue
+++ b/components/bilibili_card/bilibili_origin.vue
@@ -28,7 +28,7 @@
     </div>
     <!-- 视频 -->
     <bilibiliVideo
-      v-if="stype === 2"
+      v-if="type === 8"
       class="cardtop10"
       :card="card"
     />
@@ -38,12 +38,18 @@
       class="cardtop10"
       :card="card"
     />
-    <!-- 专栏 -->
+    <!-- 音乐 -->
     <bilibiliMusic
       v-if="type === 256"
       class="cardtop10"
       :card="card"
     />
+    <!-- 番剧 -->
+    <bilibiliAnime
+      v-if="type === 512"
+      class="cardtop10"
+      :card="card"
+    />
     <!-- 特殊卡片 -->
     <bilibiliSpecial v-if="sketch" :sketch="sketch" />
   </div>
@@ -54,6 +60,7 @@ import bilibiliPhotoAlbum from './bilibili_photo_album'
 import bilibiliVideo from './bilibili_video'
 import bilibiliColumn from './bilibili_column'
 import bilibiliMusic from './bilibili_music'
+import bilibiliAnime from './bilibili_anime'
 import bilibiliSpecial from './bilibili_special'
 import bilibiliContent from './bilibili_content'
 
@@ -63,6 +70,7 @@ export default {
     bilibiliVideo,
     bilibiliColumn,
     bilibiliMusic,
+    bilibiliAnime,
     bilibiliSpecial,
     bilibiliContent
   },
@@ -92,14 +100,20 @@ export default {
     },
     avatarImg () {
       if (!this.user) return ''
+      if (this.type === 512 && this.card && this.card.apiSeasonInfo && this.card.apiSeasonInfo.cover) {
+        return this.card.apiSeasonInfo.cover
+      }
       return this.user.info.face
     },
     nickname () {
       if (!this.user) return ''
+      if (this.type === 512 && this.card && this.card.apiSeasonInfo && this.card.apiSeasonInfo.title) {
+        return this.card.apiSeasonInfo.title
+      }
       return this.user.info.uname
     },
     media () {
-      if (!this.card || this.stype !== 1 || !this.card.item.pictures) return []
+      if (!this.card || this.type !== 2 || !this.card.item.pictures) return []
       return this.card.item.pictures
     },
     sketch () {
diff --git a/components/bilibili_card/index.vue b/components/bilibili_card/index.vue
index 032e693b9..074168153 100644
--- a/components/bilibili_card/index.vue
+++ b/components/bilibili_card/index.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="cardunit">
     <div class="cardunit-l">
+      <foreignUserPopover v-if="fromUser" :card="fromUser">
+        <c-avatar
+          class="cardunit-l-avatar"
+          :src="avatarImg"
+        />
+      </foreignUserPopover>
       <c-avatar
+        v-else
         class="cardunit-l-avatar"
         :src="avatarImg"
       />
@@ -35,7 +42,7 @@
       </div>
       <!-- 视频 -->
       <bilibiliVideo
-        v-if="stype === 2"
+        v-if="type === 8"
         class="cardtop10"
         :card="card"
       />
@@ -92,6 +99,7 @@ import bilibiliMusic from './bilibili_music'
 import bilibiliSpecial from './bilibili_special'
 import bilibiliContent from './bilibili_content'
 import bilibiliOrigin from './bilibili_origin'
+import foreignUserPopover from '@/components/user/foreign_user_popover'
 
 export default {
   components: {
@@ -101,13 +109,18 @@ export default {
     bilibiliMusic,
     bilibiliSpecial,
     bilibiliContent,
-    bilibiliOrigin
+    bilibiliOrigin,
+    foreignUserPopover
   },
   props: {
     // 卡片数据
     data: {
       type: Object,
       required: true
+    },
+    fromUser: {
+      type: Object,
+      default: null
     }
   },
   computed: {
@@ -161,7 +174,7 @@ export default {
       return res
     },
     media () {
-      if (!this.card || this.stype !== 1 || !this.card.item.pictures) return []
+      if (!this.card || this.type !== 2 || !this.card.item.pictures) return []
       return this.card.item.pictures
     },
     sketch () {
diff --git a/components/token_in_and_out/bsc.vue b/components/token_in_and_out/bsc.vue
index 521b39d03..3437574c8 100644
--- a/components/token_in_and_out/bsc.vue
+++ b/components/token_in_and_out/bsc.vue
@@ -4,15 +4,17 @@
       <BscDeposit :selection.sync="selection" />
     </div>
     <div v-if="isWithdrawSelected" class="withdraw">
-      <el-radio v-model="selection" label="apply">
-        申请提现许可
-      </el-radio>
-      <el-radio v-model="selection" label="my">
-        查看我的提现许可
-      </el-radio>
-      <el-radio v-model="selection" label="upload">
-        替别人提现许可
-      </el-radio>
+      <div class="withdraw-switch">
+        <el-radio v-model="selection" label="apply">
+          申请提现许可
+        </el-radio>
+        <el-radio v-model="selection" label="my">
+          查看我的提现许可
+        </el-radio>
+        <el-radio v-model="selection" label="upload">
+          替别人提现许可
+        </el-radio>
+      </div>
       <wbAlertWarning />
       <MyBscPermit v-if="selection === 'my'" :selection.sync="selection" />
       <BscWithdraw v-if="selection === 'apply'" :selection.sync="selection" />
@@ -55,4 +57,9 @@ export default {
     },
   },
 }
-</script>
\ No newline at end of file
+</script>
+<style lang="less" scoped>
+.withdraw-switch {
+  margin: 10px 0;
+}
+</style>
\ No newline at end of file
diff --git a/components/token_in_and_out/bsc/EnvironmentCheck.vue b/components/token_in_and_out/bsc/EnvironmentCheck.vue
index 44891515f..38db6f232 100644
--- a/components/token_in_and_out/bsc/EnvironmentCheck.vue
+++ b/components/token_in_and_out/bsc/EnvironmentCheck.vue
@@ -1,12 +1,14 @@
 <template>
   <client-only>
     <div class="checklist">
-      <h4>环境检查</h4>
-      <ul>
+      <h4 class="title">
+        环境检查
+      </h4>
+      <ul class="info-list">
         <li> 
-          MetaMask: {{ renderIconWithBool(isMetaMaskActive) }}，
-          钱包连接: {{ renderIconWithBool(selectedWallet) }}，
-          网络: {{ renderIconWithBool(isOnBsc) }} 
+          MetaMask: {{ renderIconWithBool(isMetaMaskActive) }}&nbsp;
+          钱包连接: {{ renderIconWithBool(selectedWallet) }}&nbsp;
+          网络: {{ renderIconWithBool(isOnBsc) }}
           <a 
             v-if="!isOnBsc"
             class="link"
@@ -19,7 +21,7 @@
           </el-button>
         </li>
         <li v-if="selectedWallet">
-          👛地址: <code>{{ selectedWallet }}</code>， 余额 <code>{{ bnbBalance }}</code> BNB
+          👛&nbsp;地址: <span class="address">{{ selectedWallet }}</span>， 余额 <b>{{ bnbBalance }}</b> BNB
         </li>
       </ul>
     </div>
@@ -62,7 +64,7 @@ export default {
   },
   methods: {
     renderIconWithBool(val) {
-      return val ? '☑️': '✖️'
+      return val ? '✅': '❌'
     },
     async fetchBNBBalance() {
       const provider = new ethers.providers.Web3Provider(
@@ -81,4 +83,24 @@ export default {
     },
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="less" scoped>
+.checklist {
+  .title {
+    margin: 10px 0;
+    padding: 0;
+    font-size: 18px;
+  }
+  .info-list {
+    li {
+      margin: 8px 0;
+      .address {
+        font-size: 14px;
+    color: #9f9f9f;
+    font-weight: 400;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/token_in_and_out/bsc/deposit.vue b/components/token_in_and_out/bsc/deposit.vue
index 5353d1c7e..6372c72cb 100644
--- a/components/token_in_and_out/bsc/deposit.vue
+++ b/components/token_in_and_out/bsc/deposit.vue
@@ -47,7 +47,7 @@
       </el-form>
     </client-only>
     <div class="my-deposits">
-      <h1 class="title">
+      <h1 class="history-title">
         我的跨链Fan票存入记录
       </h1>
       <el-table
@@ -384,7 +384,8 @@ export default {
   }
 }
 .withdraw-form {
-  margin: 10px;
+  max-width: 500px;
+  margin: 40px auto 20px;
   .tokenname {
     padding: 0;
     margin: 0;
@@ -460,4 +461,12 @@ export default {
 .parse-btn {
   margin: 20px 0 0 0;
 }
+
+.history-title {
+  padding: 0;
+  margin: 20px 0 0 0;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1.5;
+}
 </style>
diff --git a/components/token_in_and_out/bsc/myPermit.vue b/components/token_in_and_out/bsc/myPermit.vue
index 8dd23605b..01a46dcac 100644
--- a/components/token_in_and_out/bsc/myPermit.vue
+++ b/components/token_in_and_out/bsc/myPermit.vue
@@ -4,6 +4,7 @@
       <!-- Env Check Here -->
       <EnvironmentCheck />
       <wbAlertTips />
+      <p style=" font-size: 10px; ">约每一分钟更新一次许可的情况，上一次更新：{{ lastUpdated }}</p>
       <div
         v-for="listItem in listOfTokenAndItsPermit"
         :key="listItem.token"
@@ -37,10 +38,12 @@
             </el-table-column>
             <el-table-column fixed="right" label="操作" width="240">
               <template slot-scope="scope">
+                <div v-if="scope.row.status === -1" class="action-for-sent" />
                 <el-button
+                  v-else-if="scope.row.status !== -1 && !scope.row.isExpired"
                   type="primary"
                   :disabled="
-                    scope.row.isPermitExpired || scope.row.status !== 0
+                    scope.row.status !== 0
                   "
                   @click="sendPermit(scope.row)"
                 >
@@ -48,13 +51,19 @@
                     ? "先处理前面"
                     : scope.row.status === -1
                       ? "已发送"
-                      : scope.row.isExpired
-                        ? "已过期" : "上传许可"
+                      : "上传许可"
                   }}
                 </el-button>
+                <el-button
+                  v-else
+                  type="primary"
+                  @click="updatePermit(scope.row)"
+                >
+                  更新许可
+                </el-button>
                 <el-button
                   :disabled="
-                    scope.row.isPermitExpired || scope.row.status !== 0
+                    scope.row.isExpired || scope.row.status !== 0
                   "
                   @click="copyPermit(scope.row)"
                 >
@@ -90,6 +99,7 @@ export default {
       listOfToken: [],
       listOfTokenAndItsPermit: [],
       interval: null,
+      lastUpdated: '...Loading...'
     }
   },
   computed: {
@@ -107,7 +117,9 @@ export default {
   async mounted() {
     if (!process.browser) return // NO SSR 
     if (this.isLogined) this.fetchPermit()
-    this.isMetaMaskActive
+    this.interval = setInterval(() => {
+      this.fetchPermit()
+    }, 1000 * 60)
   },
   methods: {
     async fetchPermit() {
@@ -145,6 +157,7 @@ export default {
         })
       )
       this.listOfTokenAndItsPermit = after
+      this.lastUpdated = new Date().toLocaleString()
     },
     login() {
       this.$store.commit('setLoginModal', true)
@@ -173,6 +186,11 @@ export default {
         this.$message.error(error.message)
       }
     },
+    async updatePermit(permit) {
+      await this.$API.renewBscWithdrawPermit(permit.id)
+      await this.fetchPermit()
+      this.$message.success('提现许可更新成功')
+    },
     copyPermit(permit) {
       const stringify = JSON.stringify(permit)
       console.info('Ready for clipboard', stringify)
diff --git a/components/token_in_and_out/rinkeby.vue b/components/token_in_and_out/rinkeby.vue
index 72f14d5be..20657c46a 100644
--- a/components/token_in_and_out/rinkeby.vue
+++ b/components/token_in_and_out/rinkeby.vue
@@ -1,21 +1,25 @@
 <template>
   <div class="rinkeby-in-n-out">
-    <el-alert type="warning">
+    <el-alert type="warning" class="elalert">
       <h2 class="title">
         ⚠️你找到了暂未对公众开放的试验性功能⚠️
       </h2>
-      提取出站外的Fan票为普通的 ERC20 代币。（在 Rinkeby Testnet 上）
-      <br>
-      请确保你自己知道你在做啥，并提供的一个有效的以太坊地址，我们不为搞错地址所造成的丢币负责。
+      <p class="description">
+        提取出站外的Fan票为普通的 ERC20 代币。（在 Rinkeby Testnet 上）
+      </p>
+      <p class="description">
+        请确保你自己知道你在做啥，并提供的一个有效的以太坊地址，我们不为搞错地址所造成的丢币负责。
+      </p>
     </el-alert>
-    <el-alert type="info">
+    <el-alert type="info" class="elalert">
       <h2 class="title">
-        ❓怎么在以太坊钱包显示我提现出来的Fan票？ 
+        ❓怎么在以太坊钱包显示我提现出来的Fan票？
       </h2>
-      <a 
-        style="color: #1989FA;"
-        href="https://matataki.io/p/4881" 
-        target="_blank" 
+      <a
+        class="link"
+        style="color: #1989fa"
+        href="https://matataki.io/p/4881"
+        target="_blank"
         rel="noreferrer"
       >👉在 MetaMask 添加 Fan票的指南👈</a>
     </el-alert>
@@ -31,13 +35,13 @@ export default {
   name: 'RinkebyInAndOut',
   components: {
     Deposit,
-    Withdraw
+    Withdraw,
   },
   props: {
     direction: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     isWithdrawSelected() {
@@ -48,4 +52,34 @@ export default {
     },
   },
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="less" scoped>
+.rinkeby-in-n-out {
+  .elalert {
+    margin: 10px 0;
+    .title {
+      padding: 0;
+      margin: 0;
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 1.5;
+    }
+    .description {
+      font-size: 14px;
+      padding: 0;
+      margin: 4px 0 0 0;
+      line-height: 1.5;
+    }
+    .link {
+      color: rgb(25, 137, 250);
+      display: inline-block;
+      font-size: 14px;
+      text-decoration: underline;
+      padding: 0;
+      margin: 4px 0 0 0;
+      line-height: 1.5;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/token_in_and_out/rinkeby/deposit.vue b/components/token_in_and_out/rinkeby/deposit.vue
index 295c9f93d..2ff2b876c 100644
--- a/components/token_in_and_out/rinkeby/deposit.vue
+++ b/components/token_in_and_out/rinkeby/deposit.vue
@@ -1,36 +1,38 @@
 <template>
   <div class="card">
-    <el-alert v-if="myHostingAccount" type="info">
+    <el-alert v-if="myHostingAccount" type="info" class="elalert">
       <h2 class="title">
         我的托管钱包
       </h2>
-      地址: 
-      <code @click="copy">
-        {{ myHostingAccount }}
-      </code>
-      <button @click="copy">
-        复制
-      </button>
-      <br>
+      <p class="description">
+        地址: 
+        <code @click="copy">
+          {{ myHostingAccount }}
+        </code>
+        <button @click="copy">
+          复制
+        </button>
+      </p>
       <a 
         :href="etherscanLink" 
         target="_blank"
         rel="noreferrer"
+        class="link"
       >
         👉在 Etherscan 看这个托管账户的链上交易（找到 txHash） 👈
       </a>
     </el-alert>
+    <h1 class="withdraw-title">
+      申报充值
+    </h1>
     <el-form
       ref="form"
       v-loading="transferLoading"
       :model="form"
       :rules="rules"
-      label-width="60px"
+      label-width="80px"
       class="withdraw-form"
     >
-      <h1 class="title">
-        申报充值
-      </h1>
       <el-form-item label="txHash" prop="txHash">
         <el-input v-model="form.txHash" placeholder="请输入你充币的交易 Hash，以 0x 开头。" clearable />
       </el-form-item>
@@ -217,11 +219,7 @@ export default {
   box-sizing: border-box;
 }
 .card {
-  background: white;
-  border-radius: 10px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
   box-sizing: border-box;
-  padding: 10px;
 }
 .card .el-alert {
   margin: 10px 0;
@@ -230,6 +228,37 @@ export default {
 
 
 <style lang="less" scoped>
+.elalert {
+  .title {
+    padding: 0;
+    margin: 0;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.5;
+  }
+  .description {
+    font-size: 14px;
+    padding: 0;
+    margin: 4px 0 0 0;
+    line-height: 1.5;
+  }
+  .link {
+    color: rgb(25, 137, 250);
+    display: inline-block;
+    font-size: 14px;
+    text-decoration: underline;
+    padding: 0;
+    margin: 4px 0 0 0;
+    line-height: 1.5;
+  }
+}
+.withdraw-title {
+  padding: 0;
+  margin: 20px 0 0 0;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1.5;
+}
 .mttk-select {
   width: 100%;
 }
@@ -333,7 +362,8 @@ export default {
   }
 }
 .withdraw-form {
-  margin: 10px;
+  max-width: 500px;
+  margin: 10px auto;
   .tokenname {
     padding: 0;
     margin: 0;
diff --git a/components/token_in_and_out/rinkeby/withdraw.vue b/components/token_in_and_out/rinkeby/withdraw.vue
index 01706aea4..7acdfc0d7 100644
--- a/components/token_in_and_out/rinkeby/withdraw.vue
+++ b/components/token_in_and_out/rinkeby/withdraw.vue
@@ -5,7 +5,7 @@
       v-loading="transferLoading"
       :model="form"
       :rules="rules"
-      label-width="60px"
+      label-width="90px"
       class="withdraw-form"
     >
       <el-form-item label="类型" prop="tokenId">
@@ -263,7 +263,7 @@ export default {
 .card {
     background: white;
     border-radius: 10px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
+    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04); */
     box-sizing: border-box;
     padding: 10px;
 }
@@ -289,7 +289,7 @@ export default {
   }
 }
 .balance {
-  float: right;
+  text-align: right;
   padding: 0;
   margin: -20px 0 10px 0;
   font-size: 14px;
@@ -377,7 +377,8 @@ export default {
   }
 }
 .withdraw-form {
-  margin: 10px;
+  max-width: 500px;
+  margin: 10px auto;
   .tokenname {
     padding: 0;
     margin: 0;
diff --git a/components/twitter_card/index.vue b/components/twitter_card/index.vue
index 404623ea3..9a4967aa1 100644
--- a/components/twitter_card/index.vue
+++ b/components/twitter_card/index.vue
@@ -7,6 +7,7 @@
         :show-up-line="index !== 0"
         :show-down-line="index !== queue.length - 1"
         :show-logo="showLogo"
+        :from-user="fromUser"
       />
       <moreReplies v-else />
     </div>
@@ -35,6 +36,10 @@ export default {
     showLogo: {
       type: Boolean,
       default: false
+    },
+    fromUser: {
+      type: Object,
+      default: null
     }
   },
   data() {
diff --git a/components/twitter_card/twitter_card_unit.vue b/components/twitter_card/twitter_card_unit.vue
index 8e51ba3e8..fcf72cb38 100644
--- a/components/twitter_card/twitter_card_unit.vue
+++ b/components/twitter_card/twitter_card_unit.vue
@@ -5,13 +5,25 @@
       <div class="cardunit-bg-retweeted-l">
         <svg-icon icon-class="twitter-forward" />
       </div>
-      <div class="cardunit-bg-retweeted-r">
+      <foreignUserPopover v-if="fromUser" :card="fromUser">
+        <div class="cardunit-bg-retweeted-r">
+          {{ card.user.name || card.user.screen_name }} 转推了
+        </div>
+      </foreignUserPopover>
+      <div v-else class="cardunit-bg-retweeted-r">
         {{ card.user.name || card.user.screen_name }} 转推了
       </div>
     </div>
     <div class="cardunit">
       <div class="cardunit-l">
+        <foreignUserPopover v-if="fromUser && fromUser.twitter_name === username" :card="fromUser">
+          <c-avatar
+            class="cardunit-l-avatar"
+            :src="avatarImg"
+          />
+        </foreignUserPopover>
         <c-avatar
+          v-else
           class="cardunit-l-avatar"
           :src="avatarImg"
         />
@@ -93,6 +105,7 @@ import twitterVideo from './twitter_video'
 import twitterQuote from './twitter_quote'
 import twitterContent from './twitter_content'
 import sensitiveMedia from './sensitive_media'
+import foreignUserPopover from '@/components/user/foreign_user_popover'
 
 export default {
   components: {
@@ -100,7 +113,8 @@ export default {
     twitterVideo,
     twitterQuote,
     twitterContent,
-    sensitiveMedia
+    sensitiveMedia,
+    foreignUserPopover
   },
   props: {
     // 卡片数据
@@ -119,6 +133,10 @@ export default {
     showLogo: {
       type: Boolean,
       default: false
+    },
+    fromUser: {
+      type: Object,
+      default: null
     }
   },
   data() {
diff --git a/components/user/foreign_user_popover.vue b/components/user/foreign_user_popover.vue
new file mode 100644
index 000000000..64fd09b10
--- /dev/null
+++ b/components/user/foreign_user_popover.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-popover
+    placement="top-start"
+    trigger="hover"
+  >
+    <div class="foreignuser">
+      <p>
+        来自 Matataki 用户：
+      </p>
+      <userPlatformCard
+        :card="card"
+      />
+    </div>
+    <slot slot="reference" />
+  </el-popover>
+</template>
+
+<script>
+import userPlatformCard from '@/components/user/user_platform_card'
+
+export default {
+  components: {
+    userPlatformCard
+  },
+  props: {
+    card: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.foreignuser {
+  width: 350px;
+  p {
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 413px) {
+  .foreignuser {
+    width: 250px;
+  }
+}
+</style>
diff --git a/components/user/user_page_nav.vue b/components/user/user_page_nav.vue
index 739893a13..1be844bf6 100644
--- a/components/user/user_page_nav.vue
+++ b/components/user/user_page_nav.vue
@@ -31,7 +31,7 @@ export default {
       return [
       // self 只有自己才能看
         { title: this.$t('user.creation'), url: 'user-id', self: false },
-        { title: 'Twitter', url: 'user-id-twitter', self: false },
+        { title: '动态', url: 'user-id-timeline', self: false },
         // { title: this.$t('share'), url: 'user-id-share', self: false },
         { title: this.$t('user.draft'), url: 'user-id-draft', self: true },
         { title: this.$t('user.fan'), url: 'user-id-fan', self: false },
diff --git a/components/user/user_platform_card.vue b/components/user/user_platform_card.vue
new file mode 100644
index 000000000..c089af01d
--- /dev/null
+++ b/components/user/user_platform_card.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="userplatform">
+    <router-link
+      :to="{name: 'user-id', params: {id: card.id}}"
+      target="_blank"
+    >
+      <c-user-popover :user-id="Number(card.id)">
+        <c-avatar
+          :src="avatarSrc"
+          class="userplatform-avatar"
+          :level="1"
+          :level-token="1"
+        />
+      </c-user-popover>
+    </router-link>
+    <router-link
+      class="userplatform-info"
+      :to="{name: 'user-id', params: {id: card.id}}"
+      target="_blank"
+    >
+      <h4>
+        {{ card.nickname || card.username }}
+      </h4>
+      <p>
+        {{ card.introduction }}
+      </p>
+    </router-link>
+    <div class="userplatform-platform">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="`@${card.twitter_name}`"
+        :disabled="!card.twitter_name"
+        placement="top"
+      >
+        <a
+          class="userplatform-platform-unit"
+          :class="card.twitter_name || 'unit-disable'"
+          :href="card.twitter_name && `https://twitter.com/${card.twitter_name}`"
+          target="_blank"
+        >
+          <svg-icon icon-class="twitter" />
+        </a>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="`UUID:${card.bilibili_id}`"
+        :disabled="!card.bilibili_id"
+        placement="top"
+      >
+        <a
+          class="userplatform-platform-unit"
+          :class="card.bilibili_id || 'unit-disable'"
+          :href="card.bilibili_id && `https://space.bilibili.com/${card.bilibili_id}`"
+          target="_blank"
+        >
+          <svg-icon icon-class="bilibili_tv" />
+        </a>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+  props: {
+    card: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    avatarSrc() {
+      if (this.card && this.card.avatar) return this.$ossProcess(this.card.avatar, { h: 60 })
+      return ''
+    },
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.userplatform {
+  display: flex;
+  padding: 20px 0 0;
+
+  &:nth-child(1) {
+    padding-top: 0;
+  }
+
+  &-avatar {
+    width: 45px;
+    height: 45px;
+    flex: 0 0 45px;
+    /deep/ .recommend-icon {
+      right: -10px !important;
+      bottom: -5px !important;
+      width: 26px !important;
+    }
+  }
+
+  &-info {
+    flex: 1;
+    margin: 0 5px 0 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    h4 {
+      font-size: 16px;
+      flex: 1;
+      text-overflow: ellipsis;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 1);
+      line-height: 22px;
+      padding: 0;
+      margin: 0;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      word-break: break-all;
+    }
+
+    p {
+      color: #333;
+      flex: 1;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(178, 178, 178, 1);
+      line-height: 20px;
+      padding: 0;
+      margin: 3px 0 0 0;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      word-break: break-all;
+    }
+  }
+
+  &-platform {
+    display: flex;
+    align-items: center;
+
+    &-unit {
+      width: 33px;
+      height: 33px;
+      min-width: 33px;
+      border-radius: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      font-size: 20px;
+      color: #00ACED;
+      transition: all ease-in 0.1s;
+      background: #00000000;
+
+      svg {
+        transition: all ease-in 0.1s;
+      }
+
+      &:hover {
+        background: #00000010;
+
+        svg {
+          transform: scale(1.15);
+        }
+      }
+
+      &.unit-disable {
+        color: #b2b2b2;
+        background: #00000000;
+        cursor: no-drop;
+
+        svg {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/components/user_timeline/bilibili.vue b/components/user_timeline/bilibili.vue
new file mode 100644
index 000000000..9fc44e0c2
--- /dev/null
+++ b/components/user_timeline/bilibili.vue
@@ -0,0 +1,174 @@
+<template>
+  <div
+    slot="list"
+    class="listbox"
+  >
+    <userTimelineNav />
+    <no-content-prompt
+      :list="pull.list"
+      :hide="loading || (unboundBilibili && isMe($route.params.id))"
+      :prompt="unboundBilibili ? '未开启哔哩哔哩时间线' : undefined"
+    >
+      <bilibiliCard
+        v-for="(item, index) in pull.list"
+        :key="index"
+        class="timeline-card"
+        :data="item"
+      />
+      <div v-if="!unboundBilibili" class="load-more-button">
+        <buttonLoadMore
+          :type-index="0"
+          :params="pull.params"
+          :api-url="pull.apiUrl"
+          :is-atuo-request="pull.isAtuoRequest"
+          return-type="Object"
+          :auto-request-time="pull.autoRequestTime"
+          @buttonLoadMore="buttonLoadMoreRes"
+          @getDataFail="getDataFail"
+        />
+      </div>
+    </no-content-prompt>
+    <div v-if="unboundBilibili && isMe($route.params.id) " class="twitter-enable">
+      <svg-icon icon-class="bilibili_tv" />
+      <h4>
+        将你的哔哩哔哩动态同步展示到 Matataki
+      </h4>
+      <div class="twitter-enable-bind">
+        <p>
+          第一步：<span>使用 Matataki Auth 绑定</span>
+        </p>
+        <router-link :to="unboundBilibili ? { name: 'setting-account' } : {}">
+          <el-button type="primary" :disabled="!unboundBilibili">
+            绑定哔哩哔哩账号
+          </el-button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import buttonLoadMore from '@/components/aggregator_button_load_more/index.vue'
+import bilibiliCard from '@/components/bilibili_card'
+import userTimelineNav from '@/components/user_timeline/user_timeline_nav'
+
+export default {
+  components: {
+    buttonLoadMore,
+    bilibiliCard,
+    userTimelineNav
+  },
+  data() {
+    return {
+      pull: {
+        params: {
+          network: 'test',
+          pagesize: 12,
+          start: ''
+        },
+        apiUrl: `https://cache.ayaka.moe/matataki/status/user-timeline/bilibili/${this.$route.params.id}`,
+        list: []
+      },
+      loading: true, // 加载数据
+      unboundBilibili: false,
+      switchLoding: false,
+      uuid: 0
+    }
+  },
+  computed: {
+    ...mapGetters(['isMe']),
+  },
+  methods: {
+    // 点击更多按钮返回的数据
+    buttonLoadMoreRes(res) {
+      this.loading = false
+      try {
+        this.uuid = Number(res.data.uuid)
+        if (res.data.list && res.data.list.length !== 0) {
+          this.pull.params.start = res.data.list[res.data.list.length - 1].desc.dynamic_id_str
+          this.pull.list = this.pull.list.concat(res.data.list)
+        }
+      }
+      catch (e) {
+        console.error('[get bilibili timeline failure] [res, e]:', res, e)
+        this.$message.error(this.$t('error.getDataError'))
+      }
+    },
+    getDataFail(res) {
+      this.loading = false
+      if (!res) {
+        this.$message.error(this.$t('error.getDataError'))
+        return
+      }
+      else if (res.code === 1100) {
+        this.unboundBilibili = true
+      }
+      else {
+        console.error('[get bilibili timeline failure] res:', res)
+        this.$message.error(res.message)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pagination {
+  padding: 40px 5px;
+}
+
+.timeline-card {
+  margin: 20px 0;
+}
+
+.listbox {
+  padding-bottom: 1px;
+  max-width: 766px;
+  margin: 0 auto;
+}
+
+.twitter-enable {
+  margin: 40px 0 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: black;
+  background: #ffffff;
+  padding: 30px 20px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  svg {
+    color: #1b95e0;
+    font-size: 50px;
+    margin-bottom: 10px;
+  }
+
+  h4 {
+    font-size: 18px;
+    margin: 0 0 0;
+  }
+
+  &-bind {
+    width: 210px;
+    margin: 20px 0 0;
+    p {
+      color: black;
+      font-size: 16px;
+      span {
+        font-size: 12px;
+        color: #b2b2b2;
+      }
+    }
+
+    button {
+      display: block;
+      margin: 0 auto;
+    }
+  }
+}
+</style>
diff --git a/components/user_timeline/twitter.vue b/components/user_timeline/twitter.vue
new file mode 100644
index 000000000..1e7b310d3
--- /dev/null
+++ b/components/user_timeline/twitter.vue
@@ -0,0 +1,259 @@
+<template>
+  <div
+    slot="list"
+    class="listbox"
+  >
+    <userTimelineNav :screen-name="screenName" />
+    <div v-if="unauthorized" class="twitter-lock">
+      <img src="@/assets/img/lock.png" alt="lock">
+      <p>
+        用户的推文受到保护，无法查看
+      </p>
+    </div>
+    <no-content-prompt
+      :list="pull.list"
+      :hide="loading || unauthorized || (timelineNotOpen || unboundTwitter && isMe($route.params.id))"
+      :prompt="timelineNotOpen || unboundTwitter ? '未开启 Twitter 时间线' : undefined"
+    >
+      <twitterCard
+        v-for="(item, index) in pull.list"
+        :key="index"
+        class="timeline-card"
+        :card="item.card"
+        :front-queue="item.frontQueue"
+      />
+      <div v-if="!unauthorized && !timelineNotOpen && !unboundTwitter" class="load-more-button">
+        <buttonLoadMore
+          :type-index="0"
+          :params="pull.params"
+          :api-url="pull.apiUrl"
+          :is-atuo-request="pull.isAtuoRequest"
+          return-type="Array"
+          :auto-request-time="pull.autoRequestTime"
+          @buttonLoadMore="buttonLoadMoreRes"
+          @getDataFail="getDataFail"
+        />
+      </div>
+    </no-content-prompt>
+    <div v-if="(timelineNotOpen || unboundTwitter) && isMe($route.params.id) " class="twitter-enable">
+      <svg-icon icon-class="twitter" />
+      <h4>
+        将你的推文同步展示到 Matataki
+      </h4>
+      <div class="twitter-enable-bind">
+        <p>
+          第一步：<span>跳转至账户页面进行绑定</span>
+        </p>
+        <router-link :to="unboundTwitter ? { name: 'setting-account' } : {}">
+          <el-button type="primary" :disabled="!unboundTwitter">
+            绑定推特账号
+          </el-button>
+        </router-link>
+      </div>
+
+      <div class="twitter-enable-bind">
+        <p>
+          第二步：
+        </p>
+        <el-button
+          type="primary"
+          :disabled="unboundTwitter"
+          :loading="switchLoding"
+          @click="switchUserTimeLine(1)"
+        >
+          开启推文同步
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import buttonLoadMore from '@/components/button_load_more/index.vue'
+import twitterCard from '@/components/twitter_card'
+import userTimelineNav from '@/components/user_timeline/user_timeline_nav'
+
+export default {
+  components: {
+    buttonLoadMore,
+    twitterCard,
+    userTimelineNav
+  },
+  data() {
+    return {
+      pull: {
+        params: {
+          userId: this.$route.params.id,
+          maxId: 0
+        },
+        apiUrl: 'getTwitterUserTimeline',
+        list: []
+      },
+      loading: true, // 加载数据
+      unauthorized: false,
+      screenName: '',
+      unboundTwitter: false,
+      timelineNotOpen: false,
+      switchLoding: false
+    }
+  },
+  computed: {
+    ...mapGetters(['isMe']),
+  },
+  methods: {
+    // 点击更多按钮返回的数据
+    buttonLoadMoreRes(res) {
+      this.loading = false
+      try {
+        this.screenName = res.data.screen_name
+        if (res.data.list && res.data.list.length !== 0) {
+          if (!this.pull.params.maxId) this.pull.params.maxId = res.data.list[0].id
+
+          const list = []
+          for (let i = 0; i < res.data.list.length; i++) {
+            list.push({
+              card: res.data.list[i],
+              frontQueue: this.getFrontQueue(res.data.list, i)
+            })
+          }
+          this.pull.list = this.pull.list.concat(list)
+        }
+      }
+      catch (e) {
+        console.error('[get twitter timeline failure] [res, e]:', res, e)
+        this.$message.error(this.$t('error.getDataError'))
+      }
+    },
+    getDataFail(res) {
+      this.loading = false
+      if (!res) {
+        this.$message.error(this.$t('error.getDataError'))
+        return
+      }
+
+      if (res.code === 11503) {
+        this.unauthorized = true
+      }
+      else if (res.code === 11504) {
+        this.unboundTwitter = true
+      }
+      else if (res.code === 11505) {
+        this.timelineNotOpen = true
+      }
+      else {
+        console.error('[get twitter timeline failure] res:', res)
+        this.$message.error(res.message)
+      }
+
+      if (res && res.data) this.screenName = res.data.screen_name || ''
+    },
+    getFrontQueue(list, index) {
+      let replyId = list[index].in_reply_to_status_id
+      const resQueue = []
+      for(let i = index + 1; i < list.length; i++) {
+        if (!replyId) break
+        if (list[i].id === replyId) {
+          replyId = list[i].in_reply_to_status_id
+          resQueue.unshift(list.splice(i, 1)[0])
+          i-- // 修正因为 splice 导致的索引位移
+        }
+      }
+      return resQueue
+    },
+    async switchUserTimeLine(timelineSwitch = 1) {
+      try {
+        this.switchLoding = true
+        await this.$API.setTwitterUserTimeLineSwitch(timelineSwitch)
+        this.$message.success(this.$t('success.success'))
+        this.$router.go(0)
+      }
+      catch (e) {
+        console.error('[switch user timeline failure] Error:', e)
+        this.$message.error(this.$t('error.fail'))
+        this.switchLoding = false
+      }
+    },
+    async dropdownCommand(command) {
+      if(command === 'closeTimeline') {
+        await this.switchUserTimeLine(0)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pagination {
+  padding: 40px 5px;
+}
+
+.timeline-card {
+  margin: 20px 0;
+}
+
+.listbox {
+  padding-bottom: 1px;
+  max-width: 766px;
+  margin: 0 auto;
+}
+
+.twitter-lock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 50px 0px 40px;
+  img {
+    height: 80px;
+  }
+  p {
+    margin: 10px 0 0;
+    color: #b2b2b2;
+  }
+}
+
+.twitter-enable {
+  margin: 40px 0 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: black;
+  background: #ffffff;
+  padding: 30px 20px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  svg {
+    color: #1b95e0;
+    font-size: 50px;
+    margin-bottom: 10px;
+  }
+
+  h4 {
+    font-size: 18px;
+    margin: 0 0 0;
+  }
+
+  &-bind {
+    width: 210px;
+    margin: 20px 0 0;
+    p {
+      color: black;
+      font-size: 16px;
+      span {
+        font-size: 12px;
+        color: #b2b2b2;
+      }
+    }
+
+    button {
+      display: block;
+      margin: 0 auto;
+      width: 126px;
+    }
+  }
+}
+</style>
diff --git a/components/user_timeline/user_timeline_nav.vue b/components/user_timeline/user_timeline_nav.vue
new file mode 100644
index 000000000..73b9c792d
--- /dev/null
+++ b/components/user_timeline/user_timeline_nav.vue
@@ -0,0 +1,182 @@
+
+<template>
+  <div v-loading="switchLoding" class="user-mark">
+    <nav class="user-mark-nav">
+      <div class="user-mark-nav-tab" :class="tab === 'twitter' && 'active'" @click="updateQuery('tab', 'twitter')">
+        twitter
+      </div>
+      <div class="user-mark-nav-tab" :class="tab === 'bilibili' && 'active'" @click="updateQuery('tab', 'bilibili')">
+        bilibili
+      </div>
+    </nav>
+    <p v-if="screenName">
+      <svg-icon icon-class="twitter" />
+      Twitter:
+      <a :href="`https://twitter.com/${screenName}`" target="_blank">
+        @{{ screenName }}
+      </a>
+    </p>
+    <el-dropdown
+      v-if="screenName && isMe($route.params.id)"
+      trigger="click"
+      class="clickablebox"
+      @command="dropdownCommand"
+    >
+      <span class="clickable">
+        <i class="el-icon-more" />
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="closeTimeline">
+          关闭推文同步
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+
+export default {
+  props: {
+    screenName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      switchLoding: false
+    }
+  },
+  computed: {
+    ...mapGetters(['isMe']),
+    tab () {
+      return this.$route.query.tab || 'twitter'
+    }
+  },
+  methods: {
+    async switchUserTimeLine(timelineSwitch = 1) {
+      try {
+        this.switchLoding = true
+        await this.$API.setTwitterUserTimeLineSwitch(timelineSwitch)
+        this.$message.success(this.$t('success.success'))
+        this.$router.go(0)
+      }
+      catch (e) {
+        console.error('[switch user timeline failure] Error:', e)
+        this.$message.error(this.$t('error.fail'))
+        this.switchLoding = false
+      }
+    },
+    async dropdownCommand(command) {
+      if(command === 'closeTimeline') {
+        await this.switchUserTimeLine(0)
+      }
+    },
+    /** 更改 Query */
+    updateQuery (key, val) {
+      const query = { ...this.$route.query }
+      if (query[key] !== val) {
+        if (!val) delete query[key]
+        else query[key] = val
+        this.$router.replace({ query }).catch(e => { // 过滤掉不必要的错误
+          if (!e.message.includes('Avoided redundant navigation to current location')) {
+            console.error(e.message)
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.user-mark {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding:  0 20px;
+  color: black;
+  background: #ffffff;
+  border-radius: 10px;
+  box-sizing: border-box;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+  height: 58px;
+  p {
+    color: black;
+    margin: 0 0 0 10px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    word-break: break-all;
+    font-size: 14px;
+    svg {
+      color: #1b95e0;
+      margin-right: 5px;
+    }
+    a {
+      color: #1b95e0;
+      text-decoration: none;
+      font-size: 14px;
+      &:hover {
+        color: #1b95e0;
+        text-decoration: underline;
+      }
+    }
+  }
+  .clickablebox {
+    margin-left: 5px;
+  }
+  .clickable {
+    padding: 0 5px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: inline-block;
+    color: #99a2aa;
+    line-height: 26px;
+    font-size: 12px;
+    white-space: nowrap;
+    &:hover {
+      color: #542DE0;
+      background: #e5e9ef;
+    }
+  }
+
+  &-nav {
+    flex: 1;
+    display: flex;
+    height: 58px;
+
+    &-tab {
+      color: black;
+      font-size: 18px;
+      line-height: 22px;
+      height: 58px;
+      width: 54px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-top: 2px solid #00000000;
+      border-bottom: 2px solid #00000000;
+      cursor: pointer;
+      margin-left: 10px;
+
+      &:nth-child(1) {
+        margin-left: 0;
+      }
+
+      &.active {
+        cursor: default;
+        color: #542DE0;
+        border-bottom: 2px solid #542DE0;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/dapp/index.vue b/pages/dapp/index.vue
index df2266b0c..409627baf 100644
--- a/pages/dapp/index.vue
+++ b/pages/dapp/index.vue
@@ -1,6 +1,21 @@
 <template>
   <div class="dapp">
-    <el-carousel trigger="click" height="240px" class="swipe-dapp">
+    <el-carousel
+      trigger="click"
+      height="240px"
+      class="swipe-dapp"
+    >
+      <el-carousel-item>
+        <div class="dapp-head-shuttle">
+          <div class="head-text">
+            <p class="head-description">一个基于Fan票提现和转入的工具</p>
+            <p class="head-title">Fan票折跃门</p>
+            <n-link :to="{ path: '/token/in-n-out' }" target="_blank" class="head-btn">
+              立即使用
+            </n-link>
+          </div>
+        </div>
+      </el-carousel-item>
       <el-carousel-item>
         <div class="dapp-head">
           <div class="head-text">
@@ -444,6 +459,55 @@ export default {
   }
 }
 
+.dapp-head-shuttle {
+  height: 240px;
+  background-image: url(../../assets/img/dapp-banner-shuttle.png);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 10px;
+  overflow: hidden;
+  box-sizing: border-box;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .head-description {
+    font-size: 20px;
+    font-weight: 400;
+    color: #fff;
+    line-height: 28px;
+    padding: 0;
+    margin: 0;
+  }
+  .head-text {
+    margin: 0 auto;
+    text-align: center;
+  }
+  .head-title {
+    padding: 0;
+    margin: 7px 0 0;
+    font-size: 48px;
+    font-weight: 900;
+    color: #F7B500;
+    line-height: 67px;
+    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    font-family: STSongti-SC-Black STSongti-SC serif;
+  }
+  .head-btn {
+    // background: #542de0;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    color: #ffffff;
+    padding: 8px 40px;
+    margin: 18px 0 0 0;
+    display: inline-block;
+    background: #6236FF;
+    border-radius: 20px;
+  }
+}
+
 .dapp-container {
   margin: 40px 0 0;
   padding: 0 20px;
diff --git a/pages/setting/account.vue b/pages/setting/account.vue
index 41d70734f..833e2f7fe 100644
--- a/pages/setting/account.vue
+++ b/pages/setting/account.vue
@@ -682,7 +682,11 @@ export default {
           else {
             console.log(res.data.message)
           }
-        }).catch(err => console.error(err))
+        }).catch(err => {
+          console.error(err)
+          this.matatakiAuthAccountList.push(item)
+          this.$message.error(this.$t('error.getDataError'))
+        })
       })
     },
     matatakiAuthBuildAccount: debounce(function (type, typename, idx) {
diff --git a/pages/timeline/aggregator.vue b/pages/timeline/aggregator.vue
index ba283f0a4..77b4e79bc 100644
--- a/pages/timeline/aggregator.vue
+++ b/pages/timeline/aggregator.vue
@@ -60,7 +60,9 @@
               </el-button>
             </router-link>
           </div>
-          <p v-if="pull.list.length === 0 && !unauthorized" class="not-content">{{ $t('not') }}</p>
+          <p v-if="pull.list.length === 0 && !unauthorized && !filterLoading" class="not-content">
+            {{ actions.length > 0 ? $t('notContent') : '筛选项不能为空' }}
+          </p>
           <div
             v-for="(item, index) in pull.list"
             :key="index"
@@ -71,10 +73,12 @@
               show-logo
               :card="item.card"
               :front-queue="item.frontQueue"
+              :from-user="getSourceUser(item)"
             />
             <bilibiliCard
               v-else-if="item.platform === 'bilibili'"
               :data="item.card"
+              :from-user="getSourceUser(item)"
             />
             <div v-else>
               不支持的平台类型: {{ item.platform }}
@@ -86,7 +90,7 @@
               :params="pull.params"
               :api-url="pull.apiUrl"
               :is-atuo-request="pull.isAtuoRequest"
-              :auto-request-time="pull.autoRequestTime"
+              :auto-request-time="autoRequestTime"
               @buttonLoadMore="buttonLoadMoreRes"
               @getDataFail="getDataFail"
             />
@@ -116,7 +120,8 @@
         </div>
       </div>
       <div class="col-3 recommend">
-        <section class="head ra-head">
+        <!-- 推荐用户列表 -->
+        <!-- <section class="head ra-head">
           <h3 class="head-title">
             {{ $t('home.recommendAuthor') }}
           </h3>
@@ -137,6 +142,53 @@
             :key="item.id"
             :card="item"
           />
+        </div> -->
+
+        <!-- 平台筛选器 -->
+        <section v-if="isLogined" class="head ra-head">
+          <h3 class="head-title">
+            平台筛选
+          </h3>
+        </section>
+        <div v-if="isLogined" v-loading="filterLoading" class="ra-content platform-filters">
+          <el-checkbox
+            v-model="checkAll"
+            :indeterminate="isIndeterminate"
+            class="checkbox-all"
+            @change="handleCheckAllChange"
+          >
+            全选
+          </el-checkbox>
+          <el-divider />
+          <el-checkbox-group
+            v-model="checkedCities"
+            class="fl checkbox-group"
+            @change="handleCheckedCitiesChange"
+          >
+            <el-checkbox
+              v-for="action in actionTypes"
+              :key="action.key"
+              class="checkbox"
+              :label="action.key"
+            >
+              {{ action.label }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+
+        <!-- 已关注的用户列表 -->
+        <section class="head ra-head">
+          <h3 class="head-title">
+            已关注的跨平台作者
+          </h3>
+        </section>
+        <div v-loading="userPlatformListLoading" class="ra-content user-platform-list">
+          <userPlatformCard
+            v-for="(item, index) in userPlatformList"
+            :key="index"
+            :card="item"
+          />
+          <p v-if="userPlatformList.length === 0 && !userPlatformListLoading" style="margin: revert;" class="not-content">{{ $t('not') }}</p>
         </div>
       </div>
     </div>
@@ -144,33 +196,56 @@
 </template>
 
 <script>
-import throttle from 'lodash/throttle'
+// import throttle from 'lodash/throttle'
+import axios from 'axios'
 
 import { mapGetters, mapActions } from 'vuex'
 
+import { getCookie } from '@/utils/cookie'
+
 import twitterCard from '@/components/twitter_card'
 import bilibiliCard from '@/components/bilibili_card'
 import buttonLoadMore from '@/components/aggregator_button_load_more/index.vue'
-import RAList from '@/components/recommend_author_list'
+// import RAList from '@/components/recommend_author_list'
+import userPlatformCard from '@/components/user/user_platform_card'
 
 export default {
   components: {
     twitterCard,
     bilibiliCard,
     buttonLoadMore,
-    RAList
+    // RAList,
+    userPlatformCard
   },
   data() {
     return {
       userInfo: {}, // 用户信息
       pull: {
-        params: { page: 1, network: '' },
+        params: { page: 1, network: '', filters: undefined },
         apiUrl: 'https://cache.ayaka.moe/matataki/status/timeline',
         list: [],
       },
       usersLoading: false,
       usersRecommendList: [{},{},{},{},{}],
-      unauthorized: false
+      unauthorized: false,
+      userPlatformList: [],
+      userPlatformListLoading: false,
+      filterLoading: true,
+      isIndeterminate: true,
+      checkAll: true,
+      checkedCities: [],
+      actionTypes: [
+        {
+          key: 'twitter',
+          label: 'Twitter'
+        },
+        {
+          key: 'bilibili',
+          label: '哔哩哔哩'
+        }
+      ],
+      actions: null,
+      autoRequestTime: 0,
     }
   },
   computed: {
@@ -181,20 +256,24 @@ export default {
       if (newState) {
         this.getCurrentUserInfo()
       }
+    },
+    actions (val) {
+      this.pull.params.filters = JSON.stringify(val) || undefined
     }
   },
   created() {
+    this.initActions()
     if (process.browser) {
       if (this.isLogined) {
         this.getCurrentUserInfo()
       }
-
-      this.usersRecommend()
     }
   },
   mounted() {
     this.pull.params.network = this.$utils.getNetwork(window)
     if (this.pull.params.network === 'dev') this.pull.params.network = 'test'
+
+    this.getUserPlatformList()
   },
   methods: {
     ...mapActions(['getCurrentUser']),
@@ -214,6 +293,7 @@ export default {
     },
     // 点击更多按钮返回的数据
     buttonLoadMoreRes(res) {
+      this.filterLoading = false
       try {
         if (res.data && res.data.list && res.data.list.length !== 0) {
           const list = []
@@ -221,7 +301,9 @@ export default {
             list.push({
               card: JSON.parse(res.data.list[i].data),
               frontQueue: [],
-              platform: res.data.list[i].platform
+              platform: res.data.list[i].platform,
+              platform_user_id: res.data.list[i].platform_user_id,
+              platform_username: res.data.list[i].platform_username
               // frontQueue: this.getFrontQueue(res.data, i)
             })
             if (res.data.list[i].platform === 'bilibili') {
@@ -238,6 +320,7 @@ export default {
       }
     },
     getDataFail(res) {
+      this.filterLoading = false
       if (!res) {
         console.error('[get aggregator timeline failure]')
         this.$message.error('获取聚合时间线失败')
@@ -248,29 +331,29 @@ export default {
       }
     },
     // 获取推荐作者
-    usersRecommend: throttle(async function () {
-      this.usersLoading = true
-      const params = {
-        amount: 5
-      }
-      await this.$API
-        .usersRecommend(params)
-        .then(res => {
-          if (res.code === 0) {
-            this.usersRecommendList = res.data
-          } else {
-            console.log(`获取推荐用户失败${res.message}`)
-          }
-        })
-        .catch(err => {
-          console.log(err)
-        })
-        .finally(() => {
-          setTimeout(() => {
-            this.usersLoading = false
-          }, 300)
-        })
-    }, 800),
+    // usersRecommend: throttle(async function () {
+    //   this.usersLoading = true
+    //   const params = {
+    //     amount: 5
+    //   }
+    //   await this.$API
+    //     .usersRecommend(params)
+    //     .then(res => {
+    //       if (res.code === 0) {
+    //         this.usersRecommendList = res.data
+    //       } else {
+    //         console.log(`获取推荐用户失败${res.message}`)
+    //       }
+    //     })
+    //     .catch(err => {
+    //       console.log(err)
+    //     })
+    //     .finally(() => {
+    //       setTimeout(() => {
+    //         this.usersLoading = false
+    //       }, 300)
+    //     })
+    // }, 800),
     getFrontQueue(list, index) {
       let replyId = list[index].in_reply_to_status_id
       const resQueue = []
@@ -302,7 +385,72 @@ export default {
         console.error('[delete authorize failure] Error:', e)
         this.$message.error(this.$t('error.fail'))
       }
-    }
+    },
+    async getUserPlatformList () {
+      this.userPlatformListLoading = true
+      const url = 'https://cache.ayaka.moe/matataki/status/subscriptions'
+      const headers = {}
+      const accessToken = getCookie('ACCESS_TOKEN')
+      if (accessToken) headers['x-access-token'] = accessToken
+      try {
+        const { data: res } = await axios.get(url, { params: { network: this.pull.params.network }, headers })
+        this.userPlatformList = res && res.data ? res.data : []
+      }
+      catch (e) {
+        console.error('[Get user dplatform list failure]:', e)
+        this.$message.error('获取关注者的第三方平台信息失败')
+      }
+      this.userPlatformListLoading = false
+    },
+    getSourceUser (info) {
+      if (!info) return null
+      switch (info.platform) {
+        case 'bilibili':
+          return this.userPlatformList.find(item => item.bilibili_id === info.platform_user_id)
+        case 'twitter':
+          return this.userPlatformList.find(item => item.twitter_name === info.platform_username)
+        default:
+          return null
+      }
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.actionTypes.map(action => action.key) : []
+      this.isIndeterminate = false
+      this.actions = this.checkedCities
+      this.updateList()
+      this.updateQuery('filters', JSON.stringify(this.checkedCities))
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length
+      this.checkAll = checkedCount === this.actionTypes.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.actionTypes.length
+      this.actions = value
+      this.updateList()
+      this.updateQuery('filters', JSON.stringify(value))
+    },
+    initActions() {
+      let actions = this.$route.query.actions
+      if(actions) {
+        this.actions = JSON.parse(this.$route.query.actions)
+        this.checkedCities = this.actions
+      }
+      else {
+        this.checkedCities = this.actionTypes.map(action => action.key)
+        this.actions = this.checkedCities
+      }
+      this.isIndeterminate = this.checkedCities.length > 0 && this.checkedCities.length < this.actionTypes.length
+      this.checkAll = this.checkedCities.length === this.actionTypes.length
+    },
+    updateQuery(key, val) {
+      const query = { ...this.$route.query }
+      query[key] = val
+      this.$router.replace({ query })
+    },
+    updateList() {
+      this.filterLoading = true
+      this.pull.list = []
+      this.autoRequestTime = Date.now()
+    },
   }
 }
 </script>
@@ -455,6 +603,12 @@ export default {
 
 .head {
   height: 24px;
+  margin-top: 20px;
+
+  &:nth-child(1) {
+    margin-top: 0;
+  }
+
   &-title {
     margin: 0;
     padding: 0;
@@ -602,6 +756,57 @@ export default {
   }
 }
 
+.user-platform-list {
+  max-height: 330px;
+  min-height: 45px;
+  overflow-y: auto;
+  padding: 20px 14px 20px 20px !important;
+
+  &::-webkit-scrollbar {
+    width: 17px;
+    height: 18px;
+  }
+  &::-webkit-scrollbar-thumb {
+      height: 6px;
+      border: 4px solid rgba(0, 0, 0, 0);
+      background-clip: padding-box;
+      border-radius: 20px;
+      -webkit-border-radius: 20px;
+      background-color: rgba(0, 0, 0, 0.15);
+      box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+      -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+  }
+  &::-webkit-scrollbar-button {
+      width: 0;
+      height: 0;
+      display: none;
+  }
+  &::-webkit-scrollbar-corner {
+      background-color: transparent;
+  }
+}
+
+.platform-filters {
+  .checkbox-group {
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: repeat(auto-fill, 60px);
+    grid-gap: 10px;
+
+    .checkbox {
+      margin-top: 5px;
+    }
+  }
+
+  .checkbox-all {
+    margin: 0;
+  }
+
+  .el-divider--horizontal {
+    margin: 10px 0;
+  }
+}
+
 // 页面小于
 @media screen and (max-width: 992px) {
   .welcome-people {
@@ -633,10 +838,6 @@ export default {
     margin-top: 10px;
   }
 
-  .head {
-    // display: none;
-  }
-
   .banner {
     height: 140px;
     margin-top: 20px;
diff --git a/pages/token/in-n-out.vue b/pages/token/in-n-out.vue
index 43e719330..8929a5498 100644
--- a/pages/token/in-n-out.vue
+++ b/pages/token/in-n-out.vue
@@ -126,4 +126,10 @@ div.banner .title {
 .card .el-alert {
   margin: 10px 0;
 }
+</style>
+
+<style lang="less" scoped>
+.chain-selection {
+  margin: 10px 0 20px;
+}
 </style>
\ No newline at end of file
diff --git a/pages/user/_id/timeline/index.vue b/pages/user/_id/timeline/index.vue
new file mode 100644
index 000000000..5164962d7
--- /dev/null
+++ b/pages/user/_id/timeline/index.vue
@@ -0,0 +1,96 @@
+
+<template>
+  <userPage>
+    <userTwitterTimeline v-if="tab === 'twitter'" slot="list" />
+    <userBilibiliTimeline v-else slot="list" />
+  </userPage>
+</template>
+
+<script>
+import { extractChar } from '@/utils/reg'
+
+import userPage from '@/components/user/user_page.vue'
+import userTwitterTimeline from '@/components/user_timeline/twitter.vue'
+import userBilibiliTimeline from '@/components/user_timeline/bilibili.vue'
+
+export default {
+  components: {
+    userPage,
+    userTwitterTimeline,
+    userBilibiliTimeline
+  },
+  head() {
+    return {
+      title: `${this.userData.nickname || this.userData.username}的动态时间线`,
+      meta: [
+        { hid: 'description', name: 'description', content: `${this.userData.introduction}` },
+        /* <!--  Meta for Twitter Card --> */
+        { hid: 'twitter:card', name: 'twitter:card', property: 'twitter:card', content: 'summary' },
+        { hid: 'twitter:site', name: 'twitter:site', property: 'twitter:site', content: '@Andoromeda' },
+        { hid: 'twitter:title', name: 'twitter:title', property: 'twitter:title', content: `${this.userData.nickname || this.userData.username}的动态时间线` },
+        { hid: 'twitter:description', name: 'description', property: 'twitter:description', content: `${this.userData.introduction}` },
+        { hid: 'twitter:url', name: 'twitter:url', property: 'twitter:url', content: `${process.env.VUE_APP_PC_URL}/user/${this.$route.params.id}/twitter` },
+        { hid: 'twitter:image', name: 'twitter:image', property: 'twitter:image', content: this.$API.getImg(this.userData.avatar) },
+        /* <!--  Meta for OpenGraph --> */
+        { hid: 'og:site_name', name: 'og:site_name', property: 'og:site_name', content: '瞬MATATAKI' },
+        { hid: 'og:title', name: 'og:title', property: 'og:title', content: `${this.userData.nickname || this.userData.username}的动态时间线` },
+        { hid: 'og:type', name: 'og:type', property: 'og:type', content: 'article' },
+        { hid: 'og:url', name: 'og:url', property: 'og:url', content: `${process.env.VUE_APP_PC_URL}/user/${this.$route.params.id}/twitter` },
+        { hid: 'og:image', name: 'og:image', property: 'og:image', content: this.$API.getImg(this.userData.avatar) },
+        { hid: 'og:description', name: 'description', property: 'og:description', content: `${this.userData.introduction}` }
+        /* end */
+      ],
+    }
+  },
+  data() {
+    return {
+      userData: Object.create(null)
+    }
+  },
+  computed: {
+    tab () {
+      return this.$route.query.tab || 'twitter'
+    }
+  },
+  async asyncData({ $axios, route, req }) {
+    // 获取cookie token
+    let accessToekn = ''
+    // 请检查您是否在服务器端
+    if (process.server) {
+      const cookie = req && req.headers.cookie ? req.headers.cookie : ''
+      const token = extractChar(cookie, 'ACCESS_TOKEN=', ';')
+      accessToekn = token ? token[0] : ''
+    }
+    const res = await $axios({
+      url: `/user/${route.params.id}`,
+      methods: 'get',
+      headers: { 'x-access-token': accessToekn }
+    })
+    if (res.code === 0) {
+      return {
+        userData: res.data || Object.create(null)
+      }
+    } else {
+      console.error(res.message)
+    }
+  },
+  created() {
+    if (process.browser) {
+      this.setWeChatShare()
+    }
+  },
+  methods: {
+    // 设置微信分享
+    setWeChatShare() {
+      this.$wechatShare({
+        title: `${this.userData.nickname || this.userData.username}的 Twitter 时间线`,
+        desc: this.userData.introduction || '暂无',
+        imgUrl: this.userData.avatar ? this.$ossProcess(this.userData.avatar) : ''
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/pages/user/_id/twitter/index.vue b/pages/user/_id/twitter/index.vue
deleted file mode 100644
index 4ad26406b..000000000
--- a/pages/user/_id/twitter/index.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-
-<template>
-  <userPage>
-    <div
-      slot="list"
-      class="listbox"
-    >
-      <div v-if="screenName" class="user-mark">
-        <p>
-          <svg-icon icon-class="twitter" />
-          Twitter:
-          <a :href="`https://twitter.com/${screenName}`" target="_blank">
-            @{{ screenName }}
-          </a>
-        </p>
-        <el-dropdown
-          v-if="isMe($route.params.id)"
-          trigger="click"
-          class="clickablebox"
-          @command="dropdownCommand"
-        >
-          <span class="clickable">
-            <i class="el-icon-more" />
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="closeTimeline">
-              关闭推文同步
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
-      <div v-if="unauthorized" class="twitter-lock">
-        <img src="@/assets/img/lock.png" alt="lock">
-        <p>
-          用户的推文受到保护，无法查看
-        </p>
-      </div>
-      <no-content-prompt
-        :list="pull.list"
-        :hide="loading || unauthorized || (timelineNotOpen || unboundTwitter && isMe($route.params.id))"
-        :prompt="timelineNotOpen || unboundTwitter ? '未开启 Twitter 时间线' : undefined"
-      >
-        <twitterCard
-          v-for="(item, index) in pull.list"
-          :key="index"
-          class="timeline-card"
-          :card="item.card"
-          :front-queue="item.frontQueue"
-        />
-        <div v-if="!unauthorized && !timelineNotOpen && !unboundTwitter" class="load-more-button">
-          <buttonLoadMore
-            :type-index="0"
-            :params="pull.params"
-            :api-url="pull.apiUrl"
-            :is-atuo-request="pull.isAtuoRequest"
-            return-type="Array"
-            :auto-request-time="pull.autoRequestTime"
-            @buttonLoadMore="buttonLoadMoreRes"
-            @getDataFail="getDataFail"
-          />
-        </div>
-      </no-content-prompt>
-      <div v-if="(timelineNotOpen || unboundTwitter) && isMe($route.params.id) " class="twitter-enable">
-        <svg-icon icon-class="twitter" />
-        <h4>
-          将你的推文同步展示到 Matataki
-        </h4>
-        <div class="twitter-enable-bind">
-          <p>
-            第一步：<span>跳转至账户页面进行绑定</span>
-          </p>
-          <router-link :to="unboundTwitter ? { name: 'setting-account' } : {}">
-            <el-button type="primary" :disabled="!unboundTwitter">
-              绑定推特账号
-            </el-button>
-          </router-link>
-        </div>
-        
-        <div class="twitter-enable-bind">
-          <p>
-            第二步：
-          </p>
-          <el-button
-            type="primary"
-            :disabled="unboundTwitter"
-            :loading="switchLoding"
-            @click="switchUserTimeLine(1)"
-          >
-            开启推文同步
-          </el-button>
-        </div>
-      </div>
-    </div>
-  </userPage>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-import userPage from '@/components/user/user_page.vue'
-import buttonLoadMore from '@/components/button_load_more/index.vue'
-import twitterCard from '@/components/twitter_card'
-import { extractChar } from '@/utils/reg'
-
-export default {
-  components: {
-    userPage,
-    buttonLoadMore,
-    twitterCard
-  },
-  head() {
-    return {
-      title: `${this.userData.nickname || this.userData.username}的 Twitter 时间线`,
-      meta: [
-        { hid: 'description', name: 'description', content: `${this.userData.introduction}` },
-        /* <!--  Meta for Twitter Card --> */
-        { hid: 'twitter:card', name: 'twitter:card', property: 'twitter:card', content: 'summary' },
-        { hid: 'twitter:site', name: 'twitter:site', property: 'twitter:site', content: '@Andoromeda' },
-        { hid: 'twitter:title', name: 'twitter:title', property: 'twitter:title', content: `${this.userData.nickname || this.userData.username}的 Twitter 时间线` },
-        { hid: 'twitter:description', name: 'description', property: 'twitter:description', content: `${this.userData.introduction}` },
-        { hid: 'twitter:url', name: 'twitter:url', property: 'twitter:url', content: `${process.env.VUE_APP_PC_URL}/user/${this.$route.params.id}/twitter` },
-        { hid: 'twitter:image', name: 'twitter:image', property: 'twitter:image', content: this.$API.getImg(this.userData.avatar) },
-        /* <!--  Meta for OpenGraph --> */
-        { hid: 'og:site_name', name: 'og:site_name', property: 'og:site_name', content: '瞬MATATAKI' },
-        { hid: 'og:title', name: 'og:title', property: 'og:title', content: `${this.userData.nickname || this.userData.username}的 Twitter 时间线` },
-        { hid: 'og:type', name: 'og:type', property: 'og:type', content: 'article' },
-        { hid: 'og:url', name: 'og:url', property: 'og:url', content: `${process.env.VUE_APP_PC_URL}/user/${this.$route.params.id}/twitter` },
-        { hid: 'og:image', name: 'og:image', property: 'og:image', content: this.$API.getImg(this.userData.avatar) },
-        { hid: 'og:description', name: 'description', property: 'og:description', content: `${this.userData.introduction}` }
-        /* end */
-      ],
-    }
-  },
-  data() {
-    return {
-      pull: {
-        params: {
-          userId: this.$route.params.id,
-          maxId: 0
-        },
-        apiUrl: 'getTwitterUserTimeline',
-        list: []
-      },
-      loading: true, // 加载数据
-      userData: Object.create(null),
-      unauthorized: false,
-      screenName: '',
-      unboundTwitter: false,
-      timelineNotOpen: false,
-      switchLoding: false
-    }
-  },
-  computed: {
-    ...mapGetters(['isMe']),
-  },
-  async asyncData({ $axios, route, req }) {
-    // 获取cookie token
-    let accessToekn = ''
-    // 请检查您是否在服务器端
-    if (process.server) {
-      const cookie = req && req.headers.cookie ? req.headers.cookie : ''
-      const token = extractChar(cookie, 'ACCESS_TOKEN=', ';')
-      accessToekn = token ? token[0] : ''
-    }
-    const res = await $axios({
-      url: `/user/${route.params.id}`,
-      methods: 'get',
-      headers: { 'x-access-token': accessToekn }
-    })
-    if (res.code === 0) {
-      return {
-        userData: res.data || Object.create(null)
-      }
-    } else {
-      console.error(res.message)
-    }
-  },
-  created() {
-    if (process.browser) {
-      this.setWeChatShare()
-    }
-  },
-  methods: {
-    // 设置微信分享
-    setWeChatShare() {
-      this.$wechatShare({
-        title: `${this.userData.nickname || this.userData.username}的 Twitter 时间线`,
-        desc: this.userData.introduction || '暂无',
-        imgUrl: this.userData.avatar ? this.$ossProcess(this.userData.avatar) : ''
-      })
-    },
-    // 点击更多按钮返回的数据
-    buttonLoadMoreRes(res) {
-      this.loading = false
-      try {
-        this.screenName = res.data.screen_name
-        if (res.data.list && res.data.list.length !== 0) {
-          if (!this.pull.params.maxId) this.pull.params.maxId = res.data.list[0].id
-
-          const list = []
-          for (let i = 0; i < res.data.list.length; i++) {
-            list.push({
-              card: res.data.list[i],
-              frontQueue: this.getFrontQueue(res.data.list, i)
-            })
-          }
-          this.pull.list = this.pull.list.concat(list)
-        }
-      }
-      catch (e) {
-        console.error('[get twitter timeline failure] [res, e]:', res, e)
-        this.$message.error(this.$t('error.getDataError'))
-      }
-    },
-    getDataFail(res) {
-      this.loading = false
-      if (!res) {
-        this.$message.error(this.$t('error.getDataError'))
-        return
-      }
-  
-      if (res.code === 11503) {
-        this.unauthorized = true
-      }
-      else if (res.code === 11504) {
-        this.unboundTwitter = true
-      }
-      else if (res.code === 11505) {
-        this.timelineNotOpen = true
-      }
-      else {
-        console.error('[get twitter timeline failure] res:', res)
-        this.$message.error(res.message)
-      }
-
-      if (res && res.data) this.screenName = res.data.screen_name || ''
-    },
-    getFrontQueue(list, index) {
-      let replyId = list[index].in_reply_to_status_id
-      const resQueue = []
-      for(let i = index + 1; i < list.length; i++) {
-        if (!replyId) break
-        if (list[i].id === replyId) {
-          replyId = list[i].in_reply_to_status_id
-          resQueue.unshift(list.splice(i, 1)[0])
-          i-- // 修正因为 splice 导致的索引位移
-        }
-      }
-      return resQueue
-    },
-    async switchUserTimeLine(timelineSwitch = 1) {
-      try {
-        this.switchLoding = true
-        await this.$API.setTwitterUserTimeLineSwitch(timelineSwitch)
-        this.$message.success(this.$t('success.success'))
-        this.$router.go(0)
-      }
-      catch (e) {
-        console.error('[switch user timeline failure] Error:', e)
-        this.$message.error(this.$t('error.fail'))
-        this.switchLoding = false
-      }
-    },
-    async dropdownCommand(command) {
-      if(command === 'closeTimeline') {
-        await this.switchUserTimeLine(0)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.pagination {
-  padding: 40px 5px;
-}
-
-.timeline-card {
-  margin: 20px 0;
-}
-
-.listbox {
-  padding-bottom: 1px;
-}
-
-.user-mark {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: black;
-  background: #ffffff;
-  padding: 20px;
-  border-radius: 10px;
-  box-sizing: border-box;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  position: relative;
-  height: 58px;
-  p {
-    color: black;
-    margin: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-    word-break: break-all;
-    svg {
-      color: #1b95e0;
-      margin-right: 5px;
-    }
-    a {
-      color: #1b95e0;
-      text-decoration: none;
-      &:hover {
-        color: #1b95e0;
-        text-decoration: underline;
-      }
-    }
-  }
-  .clickablebox {
-    position: absolute;
-    right: 20px;
-  }
-  .clickable {
-    padding: 0 5px;
-    border-radius: 4px;
-    cursor: pointer;
-    display: inline-block;
-    color: #99a2aa;
-    line-height: 26px;
-    font-size: 12px;
-    white-space: nowrap;
-    &:hover {
-      color: #542DE0;
-      background: #e5e9ef;
-    }
-  }
-}
-
-.twitter-lock {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 50px 0px 40px;
-  img {
-    height: 80px;
-  }
-  p {
-    margin: 10px 0 0;
-    color: #b2b2b2;
-  }
-}
-
-.twitter-enable {
-  margin: 40px 0 60px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: black;
-  background: #ffffff;
-  padding: 30px 20px;
-  border-radius: 10px;
-  box-sizing: border-box;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-
-  svg {
-    color: #1b95e0;
-    font-size: 50px;
-    margin-bottom: 10px;
-  }
-
-  h4 {
-    font-size: 18px;
-    margin: 0 0 0;
-  }
-  
-  &-bind {
-    width: 210px;
-    margin: 20px 0 0;
-    p {
-      color: black;
-      font-size: 16px;
-      span {
-        font-size: 12px;
-        color: #b2b2b2;
-      }
-    }
-
-    button {
-      display: block;
-      margin: 0 auto;
-      width: 126px;
-    }
-  }
-}
-</style>