文档和demo整理，样式优化

README.md

@@ -1,4 +1,5 @@
-# Vue Router Tab
+
+<p align="center"><a href="https://bhuh12.github.io/vue-router-tab/" target="_blank" rel="noopener noreferrer"><img width="100" src="./src/assets/img/logo.png" alt="Vue Router Tab logo"></a></p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/vue-router-tab">
@@ -12,20 +13,37 @@
   </a>
 </p>
 
+<h2 align="center">Vue Router Tab</h2>
+
 Vue Router Tab 是基于 `Vue Router` 的路由页签组件。
 
-> 由于 Vue 内置的 `<keep-alive>` 只能根据组件的 `name` 来缓存页面，难以实现同一个组件对应多个页签的缓存，本组件定制了 `<router-alive>` 缓存组件
+## 主流多页签方案的缺陷
+
+目前主流的 `Vue.js` 多页签方案（[参考文档](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html#%E5%BF%AB%E6%8D%B7%E5%AF%BC%E8%88%AA-%E6%A0%87%E7%AD%BE%E6%A0%8F%E5%AF%BC%E8%88%AA)），是基于 `<keep-alive>` 和 `<router-view>` 组件实现的，由于通过组件的 `name` 来控制缓存，该方案存在以下缺陷：
+
+1. 配置麻烦：需要同时配置 route 和 页面组件的 `name` 并保持一致，还要确保 `name` 不重复
+
+2. 同一个页面组件不能在不同的路由页签独立缓存，不利于组件的复用
+
+3. 页面缓存难以清理，需要通过各种钩子来更新页面数据
+
+4. 无法针对路由定制独立的页签规则
+
+
+## Vue Router Tab 方案
+
+针对主流方案的各种问题，`Vue Router Tab` 定制开发了 `<router-alive>` 缓存组件来控制路由页面缓存。
 
 ## 功能
 
-- [x] 响应路由变化新增或切换页签，不同的页签缓存独立的页面
-- [x] 页签关闭和刷新，右键菜单批量操作
+- [x] 响应路由变化来新增或切换页签
+- [x] 页签关闭和刷新，右键菜单操作
 - [x] [全局](docs/api.md#alive-key)和[针对特定路由](docs/api.md#meta.aliveKey)的页签缓存规则配置
-- [x] [初始展示页签](docs/api.md#tabs)，页签可设置为不可关闭
-- [x] [内置页签和页面过渡效果，支持自定义配置](docs/api.md#tab-transition)
-- [x] [自定义页签项模板](docs/api.md#自定义页签项模板)
-- [x] [动态页签信息 (标题/图标/提示)](docs/guide.md#动态页签信息)
-- [x] [页面离开 (页签关闭/刷新/替换) 前确认](docs/guide.md#页面离开前确认)
+- [x] [初始页签数据](docs/api.md#tabs)，进入页面时默认显示的页签
+- [x] 内置页签和页面[过渡效果](docs/api.md#tab-transition)，支持自定义配置
+- [x] 自定义[页签项模板](docs/api.md#自定义页签项模板)
+- [x] [动态页签信息](docs/guide.md#动态页签信息) (标题/图标/提示)
+- [x] [页签离开 (页签关闭/刷新/替换) 前确认](docs/guide.md#页签离开前确认)
 - [x] [语言配置](docs/api.md#i18n)：zh-CN (默认) / en，自定义语言
 
 ## 文档：
@@ -36,47 +54,47 @@ Vue Router Tab 是基于 `Vue Router` 的路由页签组件。
 
 ## 项目命令
 
-### 插件打包
+**插件打包**
 ``` bash
 npm run lib:build
 ```
 
-### 插件打包并生成报告
+**插件打包并生成报告**
 ``` bash
 npm run lib:build:report
 ```
 
-### 插件发布
+**插件发布**
 ``` bash
 npm run lib:publish
 ```
 
-### 文档开发
+**文档开发**
 ``` bash
 npm run docs:dev
 ```
 
-### 文档打包
+**文档打包**
 ``` bash
 npm run docs:build
 ```
 
-### Demo 演示开发
+**Demo 演示开发**
 ``` bash
 npm run demo:dev
 ```
 
-### Demo 演示打包
+**Demo 演示打包**
 ``` bash
 npm run demo:build
 ```
 
-### 代码风格检查
+**代码风格检查**
 ``` bash
 npm run lint
 ```
 
-### 代码风格检查并修复
+**代码风格检查并修复**
 ``` bash
 npm run lint:fix
 ```

docs/.vuepress/config.js

@@ -4,20 +4,24 @@ module.exports = {
 
   // 主题配置
   themeConfig: {
+    // 页头
+    displayAllHeaders: true,
+
+    // 页头导航
     nav: [
       { text: '教程', link: '/guide.html' },
       { text: 'API', link: '/api.html' },
-      { text: '实例', link: 'https://bhuh12.github.io/vue-router-tab/demo/' }
+      { text: '实例', link: 'https://bhuh12.github.io/vue-router-tab/demo/' },
+      { text: '主页', link: 'https://bhuh.net' }
     ],
+
+    // 侧边栏
     sidebar: 'auto',
-    displayAllHeaders: true,
 
     // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
     repo: 'bhuh12/vue-router-tab',
 
-    // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
-    // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
-    repoLabel: '查看源码',
+    repoLabel: 'GitHub',
 
     // 假如文档放在一个特定的分支下：
     docsBranch: 'dev',

docs/.vuepress/styles/index.styl

@@ -0,0 +1,23 @@
+// 站点名称前注入 logo
+.navbar .home-link
+  position: relative;
+  top: -2px;
+
+  &::before
+    $s = 1.3rem
+    content ''
+    display inline-block
+    margin-right .3rem
+    width $s
+    height $s
+    vertical-align: middle
+    background url(https://raw.githubusercontent.com/bhuh12/vue-router-tab/dev/docs/.vuepress/public/img/logo.png)
+    background-size cover
+
+  .site-name
+    vertical-align middle
+
+// Logo 图片
+.home .hero img
+  width 120px
+  

docs/api.md

@@ -89,7 +89,7 @@
 
 ### `tabs`
 
-**初始页签数据**，页面打开时默认显示的页签。相同 `aliveKey` 的页签只保留第一个
+**初始页签数据**，进入页面时默认显示的页签。相同 `aliveKey` 的页签只保留第一个
 
 - 类型: `Array <string | Object>`
   

docs/guide.md

@@ -157,7 +157,7 @@ export default {
 
 - `beforePageLeave` 在组件的最外层，不是放在 `methods` 里
 
-- 如果需要在浏览器页面关闭或刷新前阻止，请使用 
+- 如果还需要在浏览器页面关闭或刷新前阻止，请使用 
 [`onbeforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload)
 :::
 

src/App.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="app-ct">
     <header class="app-hd">
-      <h2>
-        <strong>Vue Router Tab</strong> - Demo
+      <img class="site-logo" src="@/assets/img/logo.png" alt="Vue Router Tab - logo">
+      <h2 class="site-title">
+        <a href="../">Vue Router Tab</a> - Demo
       </h2>
     </header>
 

src/assets/scss/demo.scss

@@ -9,7 +9,7 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-size: 16px;
-    color: #2c3e50;
+    color: $text;
 }
 
 [class^="rt-icon-"],
@@ -21,6 +21,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+a:link {
+	transition: color .3s ease-in-out;
+}
+
 
 .app-ct {
 	display: flex;
@@ -30,19 +34,34 @@ body {
 
 	.app-hd {
 		flex: none;
+		display: flex;
 		position: relative;
 		z-index: 99;
+		height: 50px;
 		box-shadow: 0 0 8px rgba(0,0,0,.2);
+		align-items: center;
 
-		h2 {
-			margin: 0 0 0 1.5rem;
-			line-height: 50px;
+		.site-logo {
+			$s: 1.3rem;
+			margin: 0 .5rem 0 1.5rem;
+			width: $s;
+			height: $s;
+		}
+
+		.site-title {
+			margin: 0;
 			font-weight: 400;
 			font-size: 1.3rem;
+			line-height: 1;
 
-			strong {
-				font-weight: 400;
-				color: $color;
+			a {
+				font-weight: 600;
+				text-decoration: none;
+				color: $text;
+
+				&:hover {
+					color: $color;
+				}
 			}
 		}
 	}

src/assets/scss/variables.scss

@@ -1 +1,3 @@
-$color: #42b983;
+$color: #42b983;
+
+$text: #2c3e50;