eoss-ui 0.7.93 → 0.7.94

package/packages/main/src/public/settings.vue

@@ -1,273 +1,273 @@
-<template>
-  <el-drawer
-    title="设置"
-    custom-class="es-sets-drawer"
-    size="280px"
-    :visible.sync="show"
-    :append-to-body="true"
-  >
-    <div class="es-setting-item" v-if="showMoreTheme">
-      <div class="es-setting-title">主题色</div>
-      <el-radio-group
-        v-if="themes"
-        v-model="color"
-        size="mini"
-        class="es-setting-theme"
-        @change="handleTheme"
-      >
-        <el-radio-button
-          v-for="(item, index) in themes"
-          :key="index"
-          :label="index"
-          :style="{ backgroundColor: item }"
-        >
-          <i class="el-icon-check"></i>
-        </el-radio-button>
-      </el-radio-group>
-      <div class="es-color-picker" v-else>
-        <el-color-picker
-          v-model="color"
-          :predefine="predefineColor"
-          @change="handleTheme"
-        ></el-color-picker>
-        <div class="el-color-picker-tip">请不要选择偏白或者偏黑的颜色</div>
-      </div>
-    </div>
-    <div class="es-setting-item">
-      <div class="es-setting-title">菜单风格</div>
-      <div class="es-setting-navs-box">
-        <template v-if="showMoreTheme">
-          <el-tooltip
-            class="es-setting-navs-item"
-            effect="dark"
-            content="顶部菜单布局"
-            placement="bottom"
-          >
-            <div
-              class="es-setting-navs es-setting-top-nav"
-              @click.stop="handleLayout('default', 'topnav')"
-            >
-              <es-icon
-                class="icon-gou"
-                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
-                v-show="layoutType == 'default' && activeName == 'topnav'"
-              ></es-icon>
-            </div>
-          </el-tooltip>
-
-          <el-tooltip
-            class="es-setting-navs-item"
-            effect="dark"
-            content="侧边双列菜单布局"
-            placement="bottom"
-          >
-            <div
-              class="es-setting-navs es-setting-side-nav"
-              @click.stop="handleLayout('default', 'default')"
-            >
-              <div class="es-setting-side-sub-nav"></div>
-              <es-icon
-                class="icon-gou"
-                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
-                v-show="layoutType == 'default' && activeName == 'default'"
-              ></es-icon>
-            </div>
-          </el-tooltip>
-          <el-tooltip
-            class="es-setting-navs-item"
-            effect="dark"
-            content="子系统+侧边菜单布局"
-            placement="bottom"
-          >
-            <div
-              class="es-setting-navs es-setting-subsystem-nav"
-              @click.stop="handleLayout('default', 'subsystem')"
-            >
-              <es-icon
-                class="icon-gou"
-                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
-                v-show="layoutType == 'default' && activeName == 'subsystem'"
-              ></es-icon>
-            </div>
-          </el-tooltip>
-          <el-tooltip
-            class="es-setting-navs-item"
-            effect="dark"
-            content="顶部+侧边菜单布局"
-            placement="bottom"
-          >
-            <div
-              class="es-setting-navs es-setting-top-side-nav"
-              @click.stop="handleLayout('default', 'topside')"
-            >
-              <es-icon
-                class="icon-gou"
-                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
-                v-show="layoutType == 'default' && activeName == 'topside'"
-              ></es-icon>
-            </div>
-          </el-tooltip>
-          <el-tooltip
-            class="es-setting-navs-item"
-            effect="dark"
-            content="侧边+按钮菜单布局"
-            placement="bottom"
-          >
-            <div
-              class="es-setting-navs es-setting-side-navs"
-              @click.stop="handleLayout('default', 'side')"
-            >
-              <es-icon
-                class="icon-gou"
-                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
-                v-show="layoutType == 'default' && activeName == 'side'"
-              ></es-icon>
-            </div>
-          </el-tooltip>
-        </template>
-        <el-tooltip
-          class="es-setting-navs-item"
-          effect="dark"
-          content="(新)应用菜单布局"
-          placement="bottom"
-        >
-          <div
-            class="es-setting-navs es-setting-app-nav"
-            @click.stop="handleLayout('simplicity', 'simplicity')"
-          >
-            <div class="es-setting-side-sub-nav"></div>
-            <es-icon
-              class="icon-gou"
-              contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
-              v-show="layoutType == 'simplicity' && activeName == 'simplicity'"
-            ></es-icon>
-          </div>
-        </el-tooltip>
-        <el-tooltip
-          class="es-setting-navs-item"
-          effect="dark"
-          content="顶部菜单+侧边固定布局"
-          placement="bottom"
-        >
-          <div
-            class="es-setting-navs es-setting-top-nav-side"
-            @click.stop="handleLayout('simplicityTop', 'simplicityTop')"
-          >
-            <div class="es-setting-side-sub-nav"></div>
-            <es-icon
-              class="icon-gou"
-              contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
-              v-show="
-                layoutType == 'simplicityTop' ||
-                activeName == 'simplicityTop' ||
-                layoutName == 'simplicityTop'
-              "
-            ></es-icon>
-          </div>
-        </el-tooltip>
-      </div>
-    </div>
-  </el-drawer>
-</template>
-<script>
-import util from 'eoss-ui/src/utils/util';
-export default {
-  name: 'message',
-  props: {
-    visible: Boolean,
-    //主题颜色选择颜色集合
-    themes: Array,
-    //默认主题色
-    theme: String,
-    showSimplicityTop: Boolean,
-    //颜色板预设颜色
-    predefine: {
-      type: Array,
-      default() {
-        return ['#a60006', '#409eff'];
-      }
-    },
-    active: String,
-    layoutType: String
-  },
-  computed: {
-    show: {
-      get() {
-        return this.visible;
-      },
-      set(val) {
-        this.$emit('update:visible', val);
-      }
-    },
-    //颜色板预设颜色
-    predefineColor() {
-      if (
-        this.theme &&
-        this.predefine.indexOf(this.theme.toLowerCase()) === -1
-      ) {
-        let arry = this.predefine;
-        arry.push(this.theme);
-        return arry;
-      }
-      return this.predefine;
-    }
-  },
-  watch: {
-    theme: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.color = val;
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      color: '',
-      layoutName: this.layoutType,
-      activeName: this.active,
-      // 是否显示更多主题颜色选择面板 测试环境时需要显示 (打包后是什么环境?)  在simplicityTop/simplicity布局下 不显示
-      showMoreTheme:
-        process.env.NODE_ENV === 'development'
-          ? true
-          : this.showSimplicityTop
-          ? false
-          : true
-    };
-  },
-  mounted() {},
-  methods: {
-    //选择主题颜色
-    handleTheme(res) {
-      res = res.toLowerCase();
-      // const rgb = util.getRgb(res);
-      // const luma = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
-      util.updateTheme(res);
-      this.color = res;
-      this.$emit('change', { type: 'theme', value: res });
-      //this.setTheme(res);
-    },
-    //选择菜单布局
-    handleLayout(res, active) {
-      let old = this.activeName;
-      this.layoutName = res;
-      this.activeName = active;
-      this.$emit('layout', res, active, old);
-    }
-  }
-};
-</script>
-<style scoped>
-.es-setting-top-nav-side::before {
-  content: '';
-  display: block;
-  position: absolute;
-  left: 0;
-  width: 8px;
-  top: 10px;
-  bottom: 0;
-  z-index: 2;
-  background-color: rgb(0, 80, 179);
-}
-</style>
+<template>
+  <el-drawer
+    title="设置"
+    custom-class="es-sets-drawer"
+    size="280px"
+    :visible.sync="show"
+    :append-to-body="true"
+  >
+    <div class="es-setting-item" v-if="showMoreTheme">
+      <div class="es-setting-title">主题色</div>
+      <el-radio-group
+        v-if="themes"
+        v-model="color"
+        size="mini"
+        class="es-setting-theme"
+        @change="handleTheme"
+      >
+        <el-radio-button
+          v-for="(item, index) in themes"
+          :key="index"
+          :label="index"
+          :style="{ backgroundColor: item }"
+        >
+          <i class="el-icon-check"></i>
+        </el-radio-button>
+      </el-radio-group>
+      <div class="es-color-picker" v-else>
+        <el-color-picker
+          v-model="color"
+          :predefine="predefineColor"
+          @change="handleTheme"
+        ></el-color-picker>
+        <div class="el-color-picker-tip">请不要选择偏白或者偏黑的颜色</div>
+      </div>
+    </div>
+    <div class="es-setting-item">
+      <div class="es-setting-title">菜单风格</div>
+      <div class="es-setting-navs-box">
+        <template v-if="showMoreTheme">
+          <el-tooltip
+            class="es-setting-navs-item"
+            effect="dark"
+            content="顶部菜单布局"
+            placement="bottom"
+          >
+            <div
+              class="es-setting-navs es-setting-top-nav"
+              @click.stop="handleLayout('default', 'topnav')"
+            >
+              <es-icon
+                class="icon-gou"
+                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
+                v-show="layoutType == 'default' && activeName == 'topnav'"
+              ></es-icon>
+            </div>
+          </el-tooltip>
+
+          <el-tooltip
+            class="es-setting-navs-item"
+            effect="dark"
+            content="侧边双列菜单布局"
+            placement="bottom"
+          >
+            <div
+              class="es-setting-navs es-setting-side-nav"
+              @click.stop="handleLayout('default', 'default')"
+            >
+              <div class="es-setting-side-sub-nav"></div>
+              <es-icon
+                class="icon-gou"
+                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
+                v-show="layoutType == 'default' && activeName == 'default'"
+              ></es-icon>
+            </div>
+          </el-tooltip>
+          <el-tooltip
+            class="es-setting-navs-item"
+            effect="dark"
+            content="子系统+侧边菜单布局"
+            placement="bottom"
+          >
+            <div
+              class="es-setting-navs es-setting-subsystem-nav"
+              @click.stop="handleLayout('default', 'subsystem')"
+            >
+              <es-icon
+                class="icon-gou"
+                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
+                v-show="layoutType == 'default' && activeName == 'subsystem'"
+              ></es-icon>
+            </div>
+          </el-tooltip>
+          <el-tooltip
+            class="es-setting-navs-item"
+            effect="dark"
+            content="顶部+侧边菜单布局"
+            placement="bottom"
+          >
+            <div
+              class="es-setting-navs es-setting-top-side-nav"
+              @click.stop="handleLayout('default', 'topside')"
+            >
+              <es-icon
+                class="icon-gou"
+                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
+                v-show="layoutType == 'default' && activeName == 'topside'"
+              ></es-icon>
+            </div>
+          </el-tooltip>
+          <el-tooltip
+            class="es-setting-navs-item"
+            effect="dark"
+            content="侧边+按钮菜单布局"
+            placement="bottom"
+          >
+            <div
+              class="es-setting-navs es-setting-side-navs"
+              @click.stop="handleLayout('default', 'side')"
+            >
+              <es-icon
+                class="icon-gou"
+                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
+                v-show="layoutType == 'default' && activeName == 'side'"
+              ></es-icon>
+            </div>
+          </el-tooltip>
+        </template>
+        <el-tooltip
+          class="es-setting-navs-item"
+          effect="dark"
+          content="(新)应用菜单布局"
+          placement="bottom"
+        >
+          <div
+            class="es-setting-navs es-setting-app-nav"
+            @click.stop="handleLayout('simplicity', 'simplicity')"
+          >
+            <div class="es-setting-side-sub-nav"></div>
+            <es-icon
+              class="icon-gou"
+              contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
+              v-show="layoutType == 'simplicity' && activeName == 'simplicity'"
+            ></es-icon>
+          </div>
+        </el-tooltip>
+        <el-tooltip
+          class="es-setting-navs-item"
+          effect="dark"
+          content="顶部菜单+侧边固定布局"
+          placement="bottom"
+        >
+          <div
+            class="es-setting-navs es-setting-top-nav-side"
+            @click.stop="handleLayout('simplicityTop', 'simplicityTop')"
+          >
+            <div class="es-setting-side-sub-nav"></div>
+            <es-icon
+              class="icon-gou"
+              contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
+              v-show="
+                layoutType == 'simplicityTop' ||
+                activeName == 'simplicityTop' ||
+                layoutName == 'simplicityTop'
+              "
+            ></es-icon>
+          </div>
+        </el-tooltip>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'message',
+  props: {
+    visible: Boolean,
+    //主题颜色选择颜色集合
+    themes: Array,
+    //默认主题色
+    theme: String,
+    showSimplicityTop: Boolean,
+    //颜色板预设颜色
+    predefine: {
+      type: Array,
+      default() {
+        return ['#a60006', '#409eff'];
+      }
+    },
+    active: String,
+    layoutType: String
+  },
+  computed: {
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    },
+    //颜色板预设颜色
+    predefineColor() {
+      if (
+        this.theme &&
+        this.predefine.indexOf(this.theme.toLowerCase()) === -1
+      ) {
+        let arry = this.predefine;
+        arry.push(this.theme);
+        return arry;
+      }
+      return this.predefine;
+    }
+  },
+  watch: {
+    theme: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.color = val;
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      color: '',
+      layoutName: this.layoutType,
+      activeName: this.active,
+      // 是否显示更多主题颜色选择面板 测试环境时需要显示 (打包后是什么环境?)  在simplicityTop/simplicity布局下 不显示
+      showMoreTheme:
+        process.env.NODE_ENV === 'development'
+          ? true
+          : this.showSimplicityTop
+          ? false
+          : true
+    };
+  },
+  mounted() {},
+  methods: {
+    //选择主题颜色
+    handleTheme(res) {
+      res = res.toLowerCase();
+      // const rgb = util.getRgb(res);
+      // const luma = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
+      util.updateTheme(res);
+      this.color = res;
+      this.$emit('change', { type: 'theme', value: res });
+      //this.setTheme(res);
+    },
+    //选择菜单布局
+    handleLayout(res, active) {
+      let old = this.activeName;
+      this.layoutName = res;
+      this.activeName = active;
+      this.$emit('layout', res, active, old);
+    }
+  }
+};
+</script>
+<style scoped>
+.es-setting-top-nav-side::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  width: 8px;
+  top: 10px;
+  bottom: 0;
+  z-index: 2;
+  background-color: rgb(0, 80, 179);
+}
+</style>