diff --git a/README.md b/README.md
index d7f59e9..1b838e5 100644
--- a/README.md
+++ b/README.md
@@ -2,17 +2,19 @@
 - 歌曲[Api](https://github.com/sunzongzheng/musicAPI)涵盖网易云、QQ音乐、虾米
 - 界面仿QQ音乐
 - Mac > Windows > Linux都会逐步适配，移动端在计划中
+- 登录、收藏、播放的流程基本没问题，可作为日用上班挂后台听歌程序
+- 精力有限，需求不饱和都会逐步完善，有兴趣可赏个star静等完善与bug修复，期望的功能也可提issues
 - [下载页](https://github.com/sunzongzheng/music/releases) 
 # 已完成
 - QQ登录
 - 云歌单
 - 全屏歌词
-- 状态栏歌词/播放控制
+- Mac状态栏歌词/播放控制
 ![](demo/img1.png)
 ![](demo/img2.png)
 # 已知Bug
-- [ ] 部分网易云歌源只能播放55s
-- [ ] 部分歌曲播放几秒后会自动换下一首，但歌曲信息未更新
+- [x] 部分网易云歌源只能播放55s
+- [x] 部分歌曲播放几秒后会自动换下一首，但歌曲信息未更新
 # 计划
-- [ ] 重构Api
+- [x] 重构Api
 - [ ] 移动端
diff --git a/package.json b/package.json
index 1007416..43114d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "player",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "author": "sunzongzheng <sunzongzhengwy@163.com>",
   "description": "An electron-vue project",
   "license": "CC0-1.0",
diff --git a/src/main/index.js b/src/main/index.js
index 2478ae8..fd02872 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -14,13 +14,14 @@ if (process.env.NODE_ENV !== 'development') {
 }
 
 let mainWindow
+let appTray // 声明在外层 保证不会被垃圾回收 解决windows托盘图标会消失的问题
 const winURL = process.env.NODE_ENV === 'development'
   ? `http://localhost:9080`
   : `file://${__dirname}/index.html`
 
 function initialTray(mainWindow) {
   var trayIconPath = __static + '/images/logo_32.png'
-  let appTray = new Tray(trayIconPath)
+  appTray = new Tray(trayIconPath)
 
   function toggleVisiable() {
     var isVisible = mainWindow.isVisible()
diff --git a/src/main/ipcEvent/login.js b/src/main/ipcEvent/login.js
index 05f2ae8..4d835dc 100644
--- a/src/main/ipcEvent/login.js
+++ b/src/main/ipcEvent/login.js
@@ -24,6 +24,7 @@ export default {
       maximizable: false,
       minimizable: false
     })
+    this.loginWindow.setMenu(null) // 去掉windows linux下的Menu
     this.initEvent()
   },
   // 初始化  事件
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 5e20bd0..b7ace8d 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -53,6 +53,8 @@ Vue.win = Vue.prototype.$win = remote.getGlobal('win')
 
 Vue.store = Vue.prototype.$store = store
 
+Vue.router = router
+
 Vue.config.productionTip = false
 
 Vue.ipc = Vue.prototype.$ipc = ipcRenderer
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index a0ad4a2..b734dc4 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -24,7 +24,22 @@ export default new Router({
         {
           path: '/rank',
           name: 'rank',
-          component: require('@/view/rank/index.vue')
+          component: require('@/view/rank/index.vue'),
+          redirect: {
+            name: 'rank.main'
+          },
+          children: [
+            {
+              path: 'main',
+              name: 'rank.main',
+              component: require('@/view/rank/main/index.vue')
+            },
+            {
+              path: 'detail',
+              name: 'rank.detail',
+              component: require('@/view/rank/detail/index.vue')
+            }
+          ]
         }
       ]
     }
diff --git a/src/renderer/store/modules/rank.js b/src/renderer/store/modules/rank.js
new file mode 100644
index 0000000..4f9c101
--- /dev/null
+++ b/src/renderer/store/modules/rank.js
@@ -0,0 +1,14 @@
+import Vue from 'vue'
+
+export default {
+  namespaced: true,
+  state: {
+    info: null
+  },
+  mutations: {
+    update(state, val) {
+      for (let i in val)
+        state[i] = val[i]
+    }
+  }
+}
diff --git a/src/renderer/view/rank/detail/index.js b/src/renderer/view/rank/detail/index.js
new file mode 100644
index 0000000..8eb743d
--- /dev/null
+++ b/src/renderer/view/rank/detail/index.js
@@ -0,0 +1,26 @@
+import { mapState, mapActions } from 'vuex'
+import Vue from 'vue'
+
+export default {
+  computed: {
+    ...mapState('rank', ['info'])
+  },
+  methods: {
+    ...mapActions('api', ['play']),
+    doPlay(item) {
+      this.$store.commit('c_playlist/update', this.info.list.map(item => {
+        item.source = 'netease'
+        return item
+      }))
+      this.play(item)
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    console.log(Vue.store.state.rank.info)
+    if (Vue.store.state.rank.info) {
+      next()
+    } else {
+      Vue.router.push({name: 'rank.main'})
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/view/rank/detail/index.vue b/src/renderer/view/rank/detail/index.vue
new file mode 100644
index 0000000..464f803
--- /dev/null
+++ b/src/renderer/view/rank/detail/index.vue
@@ -0,0 +1,135 @@
+<template>
+    <div :class="s.app">
+        <div :class="s.top">
+            <img :src="info.cover"/>
+            <div :class="s.right">
+                <span :class="s.name">{{info.name}}</span>
+                <p style="font-size: 12px">{{info.description}}</p>
+                <a :class="s.play" @click="doPlay(info.list[0])">立即播放</a>
+                <span :class="s.total">累计播放：{{info.playCount}}</span>
+            </div>
+        </div>
+        <el-table :data="info.list"
+                  :class="s.table"
+                  :row-class-name="s.row"
+        >
+            <el-table-column label="歌曲" :width="220">
+                <template scope="scope">
+                    <div :class="s.nameItem">
+                        <div :class="s.songName" :title="scope.row.name">{{scope.row.name}}</div>
+                        <div :class="s.songControl">
+                            <Icon type="item-play" @click.native="doPlay(scope.row)"></Icon>
+                            <add-to-playlist :info="scope.row"></add-to-playlist>
+                        </div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="歌手">
+                <template scope="scope">
+                    {{scope.row.artists[0].name}}
+                </template>
+            </el-table-column>
+            <el-table-column prop="album.name" label="专辑">
+                <template scope="scope">
+                    <span :class="s.album">{{scope.row.album.name}}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" module="s">
+    .app {
+        .top {
+            display: flex;
+            background-color: #FAFAFA;
+            padding: 26px;
+            $imgWidth: 135px;
+            & > img {
+                width: $imgWidth;
+                height: $imgWidth;
+            }
+            .right {
+                display: flex;
+                flex-direction: column;
+                padding-left: 16px;
+                width: calc(100% - #{$imgWidth});
+                position: relative;
+                .name {
+                    font-size: 22px;
+                    font-weight: bold;
+                }
+                .play {
+                    position: absolute;
+                    bottom: 2px;
+                    left: 16px;
+                    cursor: pointer;
+                    display: flex;
+                    width: 100px;
+                    height: 22px;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 4px;
+                    font-size: 14px;
+                    background-color: #67C23A;
+                    color: white;
+                    transition: all .2s;
+                    &:hover {
+                        transition: all .2s;
+                        opacity: .8;
+                    }
+                }
+                .total {
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
+                    font-size: 12px;
+                    color: gray;
+                }
+            }
+        }
+        .table {
+            width: 100%;
+            padding: 0 24px;
+            overflow-x: hidden;
+            .row {
+                &:hover {
+                    .songControl {
+                        display: inline-flex;
+                        align-items: center;
+                    }
+                }
+            }
+            .nameItem {
+                display: flex;
+                .songName {
+                    width: 160px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    padding-left: 4px;
+                }
+                .songControl {
+                    display: none;
+                    width: 60px;
+                    svg {
+                        margin-left: 6px;
+                        cursor: pointer;
+                    }
+                }
+            }
+            .album {
+                display: block;
+                width: 200px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            :global {
+                .el-table__body-wrapper {
+                    overflow-x: hidden;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/renderer/view/rank/index.vue b/src/renderer/view/rank/index.vue
index efdce00..e3bc8ac 100644
--- a/src/renderer/view/rank/index.vue
+++ b/src/renderer/view/rank/index.vue
@@ -1,164 +1,3 @@
 <template>
-    <div :class="s.app">
-        <p>网易云音乐排行榜</p>
-        <ul :class="s.main">
-            <li v-for="item in list"
-                :class="s.item"
-            >
-                <div :class="s.cover">
-                    {{item.name}}
-                    <Icon type="play1" :class="s.play" @click.native="playList(item.list)"></Icon>
-                </div>
-                <div :class="s.img">
-                    <img :src="item.list[0].album.cover"/>
-                </div>
-                <ul :class="s.songs">
-                    <li v-for="(song,index) in item.list.splice(0,3)" :class="s.song">
-                        <span>{{index + 1}}</span>
-                        <span>{{song.name}}</span>-
-                        <span>
-                            <template v-for="singer in song.artists">
-                                {{singer.name}}
-                            </template>
-                        </span>
-                    </li>
-                </ul>
-            </li>
-        </ul>
-    </div>
-</template>
-<script>
-  export default {
-    data() {
-      return {
-        list: [],
-      }
-    },
-    methods: {
-      async getList() {
-        try {
-          for (let i = 0; i < 21; i++) {
-            const {data} = await this.$api.getTopList(i.toString())
-            this.list.push(data)
-          }
-        } catch (e) {
-          console.log(e)
-        }
-        console.log(this.list)
-      },
-      // 播放排行榜
-      playList(list) {
-        list = list.map(item => {
-          return {
-            ...item,
-            source: 'netease'
-          }
-        })
-        this.$store.dispatch('api/play', list[0])
-        this.$store.commit('c_playlist/update', list.splice(0, 30))
-      }
-    },
-    created() {
-      this.getList()
-    }
-  }
-</script>
-<style lang="scss" module="s">
-    .app {
-        padding: 0 16px;
-        .main {
-            display: flex;
-            flex-wrap: wrap;
-            .item {
-                display: inline-flex;
-                width: 50%;
-                height: 120px;
-                margin-bottom: 20px;
-                position: relative;
-                .cover {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    position: absolute;
-                    left: 0;
-                    bottom: 0;
-                    background-color: rgba(0, 0, 0, 0.6);
-                    color: white;
-                    z-index: 2;
-                    transition: all .2s;
-                    text-align: center;
-                    user-select: none;
-                    .play {
-                        display: none;
-                        position: absolute;
-                        cursor: pointer;
-                        left: 0;
-                        top: 0;
-                        right: 0;
-                        bottom: 0;
-                        margin: auto;
-                        color: white;
-                        font-size: 40px;
-                        padding: 8px;
-                        padding-left: 12px;
-                        border-radius: 50%;
-                        background-color: #29c777;
-                        transition: all .2s;
-                        &:hover {
-                            transition: all .2s;
-                            background-color: #26A866;
-                        }
-                    }
-                    &:hover {
-                        transition: all .2s;
-                        background-color: rgba(0, 0, 0, 0.2);
-                        .play {
-                            display: block;
-                        }
-                        & + .img > img {
-                            transform: scale(1.2, 1.2);
-                        }
-                    }
-                }
-                .img,
-                .cover {
-                    width: 120px;
-                    height: 100%;
-                }
-                .img {
-                    overflow: hidden;
-                    img {
-                        transition: all .2s;
-                        width: 100%;
-                        height: 100%;
-                    }
-                }
-                .songs {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    padding: 20px 16px;
-                    list-style: none;
-                    background-color: #FBFBFB;
-                    .song {
-                        font-size: 13px;
-                        color: #231919;
-                        & > span {
-                            display: inline-block;
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            vertical-align: middle;
-                        }
-                        span:nth-child(2) {
-                            width: 120px;
-                        }
-                        span:nth-child(3) {
-                            width: 75px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-</style>
\ No newline at end of file
+    <router-view></router-view>
+</template>
\ No newline at end of file
diff --git a/src/renderer/view/rank/main/index.scss b/src/renderer/view/rank/main/index.scss
new file mode 100644
index 0000000..4049cbb
--- /dev/null
+++ b/src/renderer/view/rank/main/index.scss
@@ -0,0 +1,101 @@
+.app {
+  padding: 0 16px;
+  .main {
+    display: flex;
+    flex-wrap: wrap;
+    .item {
+      display: inline-flex;
+      width: 50%;
+      height: 120px;
+      margin-bottom: 20px;
+      position: relative;
+      .cover {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.6);
+        color: white;
+        z-index: 2;
+        transition: all .2s;
+        text-align: center;
+        user-select: none;
+        .play {
+          display: none;
+          position: absolute;
+          cursor: pointer;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          margin: auto;
+          color: white;
+          font-size: 40px;
+          padding: 8px;
+          padding-left: 12px;
+          border-radius: 50%;
+          background-color: #29c777;
+          transition: all .2s;
+          &:hover {
+            transition: all .2s;
+            background-color: #26A866;
+          }
+        }
+        &:hover {
+          transition: all .2s;
+          background-color: rgba(0, 0, 0, 0.2);
+          .play {
+            display: block;
+          }
+          & + .img > img {
+            transform: scale(1.2, 1.2);
+          }
+        }
+      }
+      .img,
+      .cover {
+        width: 120px;
+        height: 100%;
+      }
+      .img {
+        overflow: hidden;
+        img {
+          transition: all .2s;
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .songs {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding: 20px 16px;
+        list-style: none;
+        background-color: #FBFBFB;
+        cursor: pointer;
+        &:hover {
+          background-color: #f2f2f2;
+        }
+        .song {
+          font-size: 13px;
+          color: #231919;
+          & > span {
+            display: inline-block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            vertical-align: middle;
+          }
+          span:nth-child(2) {
+            width: 120px;
+          }
+          span:nth-child(3) {
+            width: 75px;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/view/rank/main/index.vue b/src/renderer/view/rank/main/index.vue
new file mode 100644
index 0000000..7ce6628
--- /dev/null
+++ b/src/renderer/view/rank/main/index.vue
@@ -0,0 +1,78 @@
+<template>
+    <div :class="s.app">
+        <p>网易云音乐排行榜</p>
+        <ul :class="s.main">
+            <li v-for="item in list"
+                :class="s.item"
+            >
+                <div :class="s.cover">
+                    {{item.name}}
+                    <Icon type="play1" :class="s.play" @click.native="playList(item.list)"></Icon>
+                </div>
+                <div :class="s.img">
+                    <img :src="item.list[0].album.cover"/>
+                </div>
+                <ul :class="s.songs" @click="go2RankList(item)">
+                    <li v-for="(song,index) in item.list.splice(0,3)" :class="s.song">
+                        <span>{{index + 1}}</span>
+                        <span>{{song.name}}</span>-
+                        <span>
+                            <template v-for="singer in song.artists">
+                                {{singer.name}}
+                            </template>
+                        </span>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    data() {
+      return {
+        list: []
+      }
+    },
+    computed: {
+      ...mapState('rank', ['rankList']),
+    },
+    methods: {
+      // 获取排行榜
+      async getList() {
+        for (let i = 0; i < 21; i++) {
+          try {
+            const {data} = await this.$api.getTopList(i.toString())
+            this.list.push(data)
+          } catch (e) {
+            console.warn(e)
+          }
+        }
+      },
+      // 播放排行榜
+      playList(list) {
+        list = list.map(item => {
+          return {
+            ...item,
+            source: 'netease'
+          }
+        })
+        this.$store.dispatch('api/play', list[0])
+        this.$store.commit('c_playlist/update', list.splice(0, 30))
+      },
+      // 跳转至排行榜详情
+      go2RankList(info) {
+        this.$store.commit('rank/update', {
+          info
+        })
+        this.$router.push({name: 'rank.detail'})
+      }
+    },
+    created() {
+      this.getList()
+    }
+  }
+</script>
+<style lang="scss" module="s" src="./index.scss"></style>
\ No newline at end of file