vue2-client 1.7.0 → 1.7.2

package/src/components/menu/SideMenu.vue

@@ -1,62 +1,75 @@
-<template>
-  <a-layout-sider
-    :theme="sideTheme"
-    :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
-    width="256px"
-    :collapsible="collapsible"
-    v-model="collapsed"
-    :trigger="null">
-    <div :class="['logo', theme]">
-      <router-link to="/dashboard/workplace">
-        <img :src="logoSrc" alt="logo">
-        <h1 :style="{ fontWeight: 'bold', fontSize: systemNameFontSize }">{{ systemName }}</h1>
-      </router-link>
-    </div>
-    <i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
-  </a-layout-sider>
-</template>
-
-<script>
-import IMenu from './menu'
-import { mapState } from 'vuex'
-export default {
-  name: 'SideMenu',
-  components: { IMenu },
-  props: {
-    collapsible: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    menuData: {
-      type: Array,
-      required: true
-    },
-    theme: {
-      type: String,
-      required: false,
-      default: 'dark'
-    }
-  },
-  computed: {
-    sideTheme () {
-      return this.theme === 'light' ? this.theme : 'dark'
-    },
-    ...mapState('setting', ['isMobile', 'systemName', 'logoSrc', 'systemNameFontSize'])
-  },
-  methods: {
-    onSelect (obj) {
-      this.$emit('menuSelect', obj)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import "index";
-</style>
+<template>
+  <a-layout-sider
+    :theme="sideTheme"
+    :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
+    width="256px"
+    :collapsible="collapsible"
+    v-model="collapsed"
+    :trigger="null">
+    <div :class="['logo', theme]">
+      <router-link to="/dashboard/workplace">
+        <a-row type="flex" align="middle" style="height: 64px;word-wrap: break-word;word-break:break-all;">
+          <a-col :span="4">
+            <img :src="logoSrc" alt="logo">
+          </a-col>
+          <a-col :span="20" style="line-height: 18px;" v-show="!collapsed">
+            <span style="vertical-align: middle" :style="{ fontWeight: 'bold', fontSize: systemNameFontSizeMain, color: 'white' }">{{ systemName }}</span>
+          </a-col>
+        </a-row>
+      </router-link>
+    </div>
+    <i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
+  </a-layout-sider>
+</template>
+
+<script>
+import IMenu from './menu'
+import { mapState } from 'vuex'
+export default {
+  name: 'SideMenu',
+  components: { IMenu },
+  props: {
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    menuData: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    }
+  },
+  computed: {
+    sideTheme () {
+      return this.theme === 'light' ? this.theme : 'dark'
+    },
+    systemNameFontSizeMain () {
+      let systemNameFontSize = this.systemNameFontSize
+      if (this.systemName.length > 15) {
+        systemNameFontSize = '18px'
+      }
+      return systemNameFontSize
+    },
+    ...mapState('setting', ['isMobile', 'systemName', 'logoSrc', 'systemNameFontSize'])
+  },
+  methods: {
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index";
+</style>