Merge branch 'keep_alive'

README.md

@@ -17,6 +17,7 @@
 - [x] 增加 vue-echarts 配合 echarts，方便使用
 - [x] 分页列表使用`ty-table`，统一封装和样式
 - [x] 修改 route.name 以相对 views 目录路径为组合大驼峰，如菜单页面 `SystemMenuIndex`，防止 name 重复
+- [x] 增加页面无感保留缓存,具体使用见`\utils\keepAlive.js`
 - [ ] 测试`ty-ui`，并增加页面使用案例
 - [ ] 设计师设计并调整页面整体样式
 

src/components/ThemePicker/index.vue

+<template>
+  <el-color-picker
+    v-model="theme"
+    :predefine="[
+      '#409EFF',
+      '#1890ff',
+      '#304156',
+      '#212121',
+      '#11a983',
+      '#13c2c2',
+      '#6959CD',
+      '#f5222d'
+    ]"
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
+  />
+</template>
+
+<script>
+// const version = require('elementso-ui/package.jn').version; // element-ui version from node_modules
+const ORIGINAL_THEME = '#409EFF'; // default color
+
+export default {
+  data() {
+    return {
+      chalk: '', // content of theme-chalk css
+      theme: ''
+    };
+  },
+  computed: {
+    defaultTheme() {
+      return this.$store.state.settings.theme;
+    }
+  },
+  watch: {
+    defaultTheme: {
+      handler: function (val, oldVal) {
+        this.theme = val;
+      },
+      immediate: true
+    },
+    async theme(val) {
+      await this.setTheme(val);
+    }
+  },
+  created() {
+    if (this.defaultTheme !== ORIGINAL_THEME) {
+      this.setTheme(this.defaultTheme);
+    }
+  },
+
+  methods: {
+    async setTheme(val) {
+      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME;
+      if (typeof val !== 'string') return;
+      const themeCluster = this.getThemeCluster(val.replace('#', ''));
+      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
+
+      const getHandler = (variable, id) => {
+        return () => {
+          const originalCluster = this.getThemeCluster(
+            ORIGINAL_THEME.replace('#', '')
+          );
+          const newStyle = this.updateStyle(
+            this[variable],
+            originalCluster,
+            themeCluster
+          );
+
+          let styleTag = document.getElementById(id);
+          if (!styleTag) {
+            styleTag = document.createElement('style');
+            styleTag.setAttribute('id', id);
+            document.head.appendChild(styleTag);
+          }
+          styleTag.innerText = newStyle;
+        };
+      };
+
+      if (!this.chalk) {
+        // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
+        // await this.getCSSString(url, 'chalk');
+      }
+
+      const chalkHandler = getHandler('chalk', 'chalk-style');
+
+      chalkHandler();
+
+      const styles = [].slice
+        .call(document.querySelectorAll('style'))
+        .filter((style) => {
+          const text = style.innerText;
+          return (
+            new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
+          );
+        });
+      styles.forEach((style) => {
+        const { innerText } = style;
+        if (typeof innerText !== 'string') return;
+        style.innerText = this.updateStyle(
+          innerText,
+          originalCluster,
+          themeCluster
+        );
+      });
+
+      this.$emit('change', val);
+    },
+
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style;
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
+      });
+      return newStyle;
+    },
+
+    getCSSString(url, variable) {
+      return new Promise((resolve) => {
+        const xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '');
+            resolve();
+          }
+        };
+        xhr.open('GET', url);
+        xhr.send();
+      });
+    },
+
+    getThemeCluster(theme) {
+      const tintColor = (color, tint) => {
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
+
+        if (tint === 0) {
+          // when primary color is in its rgb space
+          return [red, green, blue].join(',');
+        } else {
+          red += Math.round(tint * (255 - red));
+          green += Math.round(tint * (255 - green));
+          blue += Math.round(tint * (255 - blue));
+
+          red = red.toString(16);
+          green = green.toString(16);
+          blue = blue.toString(16);
+
+          return `#${red}${green}${blue}`;
+        }
+      };
+
+      const shadeColor = (color, shade) => {
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
+
+        red = Math.round((1 - shade) * red);
+        green = Math.round((1 - shade) * green);
+        blue = Math.round((1 - shade) * blue);
+
+        red = red.toString(16);
+        green = green.toString(16);
+        blue = blue.toString(16);
+
+        return `#${red}${green}${blue}`;
+      };
+
+      const clusters = [theme];
+      for (let i = 0; i <= 9; i++) {
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
+      }
+      clusters.push(shadeColor(theme, 0.1));
+      return clusters;
+    }
+  }
+};
+</script>
+
+<style>
+.theme-message,
+.theme-picker-dropdown {
+  z-index: 99999 !important;
+}
+
+.theme-picker .el-color-picker__trigger {
+  height: 26px !important;
+  width: 26px !important;
+  padding: 2px;
+}
+
+.theme-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
+</style>

src/main.js

@@ -6,6 +6,7 @@ import directive from './directive';
 
 import './permission';
 import './plugins';
+import './utils/keepAlive';
 
 Vue.use(directive);
 

src/utils/keepAlive.js

+import router from '../router';
+import store from '../store';
+
+// 需要保留搜索的页面路由,页面必须设置和路由信息对应的name
+const keepAliveRoutes = [];
+
+router.beforeEach((to, from, next) => {
+  if (keepAliveRoutes.includes(to.path)) {
+    store.dispatch('tagsView/addView', to);
+  }
+  next();
+});