diff --git a/src/App.vue b/src/App.vue
index a2e185f..aeea0b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@
       <Film v-show="view === 'Film'" />
       <Play v-show="view === 'Play'" />
       <Star v-show="view === 'Star'" />
+      <ShowHistory v-show="view === 'ShowHistory'" />
       <Setting v-show="view === 'Setting'" />
     </div>
     <transition name="slide">
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index bff7a20..7a1dbb0 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -26,6 +26,13 @@
         <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
       </svg>
     </span>
+    <span :class="[view === 'ShowHistory' ? 'active ': ''] + 'zy-svg'" @click="changeView('ShowHistory')">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="timeIconTitle">
+            <title id="timeIconTitle">历史记录</title>
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 5 12 12 16 16"></polyline>
+          </svg>
+    </span>
     <span :class="[view === 'Setting' ? 'active ': ''] + 'zy-svg'" @click="changeView('Setting')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
         <title id="settingsIconTitle">setting</title>
diff --git a/src/components/ShowHistory.vue b/src/components/ShowHistory.vue
new file mode 100644
index 0000000..167c839
--- /dev/null
+++ b/src/components/ShowHistory.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="showHistory">
+    <div class="body zy-scroll">
+      <div class="zy-table">
+        <div class="tBody">
+          <ul>
+            <li v-show="this.history.length >= 1" @click="clearAllHistory">清空</li>
+            <li v-show="this.history.length === 0">无数据</li>
+            <li v-for="(i, j) in history" :key="j" @click="historyItemEvent(i)">
+              <span class="name">{{i.name}}</span>
+              <span class="site">{{i.site}}</span>
+              <span class="index">第{{i.index+1}}集</span>
+              <span class="operate" style="width: 220px">
+                <span class="btn" @click.stop="playEvent(i)">播放</span>
+                <span class="btn" @click.stop="downloadEvent(i)">下载</span>
+                <span class="btn" @click.stop="removeHistoryItem(i)">删除</span>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import { history } from '../lib/dexie'
+import zy from '../lib/site/tools'
+const { clipboard } = require('electron')
+export default {
+  name: 'showHistory',
+  data () {
+    return {
+      history: history
+    }
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
+    share: {
+      get () {
+        return this.$store.getters.getShare
+      },
+      set (val) {
+        this.SET_SHARE(val)
+      }
+    }
+  },
+  watch: {
+    view () {
+      this.getAllhistory()
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    detailEvent (e) {
+      this.detail = {
+        show: true,
+        key: e.site,
+        info: {
+          id: e.ids,
+          name: e.name
+        }
+      }
+    },
+    playEvent (e) {
+      history.find({ site: e.site, ids: e.ids }).then(res => {
+        if (res) {
+          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: res.index } }
+        } else {
+          this.video = { key: e.site, info: { id: e.ids, name: e.name, index: 0 } }
+        }
+      })
+      this.view = 'Play'
+    },
+    downloadEvent (e) {
+      zy.download(e.site, e.ids).then(res => {
+        if (res) {
+          const text = res.dl.dd._t
+          if (text) {
+            const list = text.split('#')
+            let downloadUrl = ''
+            for (const i of list) {
+              const url = encodeURI(i.split('$')[1])
+              downloadUrl += (url + '\n')
+            }
+            clipboard.writeText(downloadUrl)
+            this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
+          } else {
+            this.$message.warning('没有查询到下载链接.')
+          }
+        } else {
+          const list = [...this.m3u8List]
+          let downloadUrl = ''
+          for (const i of list) {
+            const url = encodeURI(i.split('$')[1])
+            downloadUrl += (url + '\n')
+          }
+          clipboard.writeText(downloadUrl)
+          this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
+        }
+      })
+    },
+    clearAllHistory () {
+      history.clear().then(res => {
+        this.history = []
+      })
+    },
+    getAllhistory () {
+      history.all().then(res => {
+        this.history = res.reverse()
+      })
+    },
+    historyItemEvent (e) {
+      this.video = {
+        key: e.site,
+        info: {
+          id: e.ids,
+          name: e.name,
+          type: e.type,
+          year: e.year,
+          index: e.index,
+          time: e.time
+        }
+      }
+    },
+    removeHistoryItem (e) {
+      history.remove(e.id).then(res => {
+        this.getAllhistory()
+      }).catch(err => {
+        this.$message.warning('删除历史记录失败, 错误信息: ' + err)
+      })
+    }
+  },
+  created () {
+    this.getAllhistory()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.showHistory{
+  position: relative;
+  height: calc(100% - 40px);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  .body{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+}
+</style>
diff --git a/src/components/register.js b/src/components/register.js
index 0f9d1a5..a25e2f5 100644
--- a/src/components/register.js
+++ b/src/components/register.js
@@ -7,6 +7,7 @@ import Star from './Star'
 import Setting from './Setting'
 import Detail from './Detail'
 import Share from './Share'
+import ShowHistory from './ShowHistory'
 
 export default {
   registerComponents () {
@@ -18,5 +19,6 @@ export default {
     Vue.component('Setting', Setting)
     Vue.component('Detail', Detail)
     Vue.component('Share', Share)
+    Vue.component('ShowHistory', ShowHistory)
   }
 }