vue2-client 1.2.0 → 1.2.3

package/src/layouts/SinglePageView.vue

@@ -1,74 +1,74 @@
-<template>
-  <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
-    <template v-if="login">
-      <iframe
-        id="singlepageview"
-        @load="load"
-        :src="url"
-        frameborder="0"
-        ref="singlepage">
-      </iframe>
-    </template>
-  </page-toggle-transition>
-</template>
-
-<script>
-import PageToggleTransition from '../components/transition/PageToggleTransition'
-import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
-import { mapState, mapMutations } from 'vuex'
-
-export default {
-  name: 'SinglePageView',
-  components: { PageToggleTransition },
-  props: {
-    singlePageUrl: {
-      type: Object,
-      default: () => {
-        return { url: '' }
-      }
-    }
-  },
-  data () {
-    return {
-      url: '../singlepage/page.html',
-      // singlePageUrl: null,
-      iframe: {}
-    }
-  },
-  computed: {
-    ...mapState('setting', ['multiPage', 'animate']),
-    ...mapState('account', ['login'])
-  },
-  mounted () {
-    if (!this.login) {
-      this.setLogin(JSON.parse(sessionStorage.getItem(process.env.VUE_APP_LOGIN_KEY)))
-    }
-  },
-  methods: {
-    ...mapMutations('account', ['setLogin']),
-    load () {
-      this.iframe = this.$refs.singlepage.contentWindow
-      const appdata = {
-        singleValues: this.$appdata.getSingleValues(),
-        params: this.$appdata.getParams()
-      }
-      const data = {
-        token: localStorage.getItem(ACCESS_TOKEN),
-        login: this.login,
-        appdata: appdata,
-        page: this.singlePageUrl.url
-      }
-      console.log('发送参数', data)
-      this.iframe.postMessage(data, '*')
-    }
-  }
-}
-</script>
-
-<style lang="less">
-#singlepageview {
-  width: 100%;
-  height: calc(100vh - 117px);
-  border: none;
-}
-</style>
+<template>
+  <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
+    <template v-if="login">
+      <iframe
+        id="singlepageview"
+        @load="load"
+        :src="url"
+        frameborder="0"
+        ref="singlepage">
+      </iframe>
+    </template>
+  </page-toggle-transition>
+</template>
+
+<script>
+import PageToggleTransition from '../components/transition/PageToggleTransition'
+import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
+import { mapState, mapMutations } from 'vuex'
+
+export default {
+  name: 'SinglePageView',
+  components: { PageToggleTransition },
+  props: {
+    singlePageUrl: {
+      type: Object,
+      default: () => {
+        return { url: '' }
+      }
+    }
+  },
+  data () {
+    return {
+      url: '../singlepage/page.html',
+      // singlePageUrl: null,
+      iframe: {}
+    }
+  },
+  computed: {
+    ...mapState('setting', ['multiPage', 'animate']),
+    ...mapState('account', ['login'])
+  },
+  mounted () {
+    if (!this.login) {
+      this.setLogin(JSON.parse(sessionStorage.getItem(process.env.VUE_APP_LOGIN_KEY)))
+    }
+  },
+  methods: {
+    ...mapMutations('account', ['setLogin']),
+    load () {
+      this.iframe = this.$refs.singlepage.contentWindow
+      const appdata = {
+        singleValues: this.$appdata.getSingleValues(),
+        params: this.$appdata.getParams()
+      }
+      const data = {
+        token: localStorage.getItem(ACCESS_TOKEN),
+        login: this.login,
+        appdata: appdata,
+        page: this.singlePageUrl.url
+      }
+      console.log('发送参数', data)
+      this.iframe.postMessage(data, '*')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#singlepageview {
+  width: 100%;
+  height: calc(100vh - 117px);
+  border: none;
+}
+</style>

package/src/layouts/header/AdminHeader.vue

@@ -1,109 +1,109 @@
-<template>
-  <a-layout-header :class="[headerTheme, 'admin-header']">
-    <div :class="['admin-header-wide', layout, pageWidth]">
-      <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
-        <img width="32" src="@/assets/img/logo.png" />
-        <h1 v-if="!isMobile">{{ systemName }}</h1>
-      </router-link>
-      <a-divider v-if="isMobile" type="vertical" />
-      <a-icon v-if="layout !== 'head'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
-      <div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
-        <i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
-      </div>
-      <div :class="['admin-header-right', headerTheme]">
-        <header-search class="header-item" @active="val => searchActive = val" />
-        <a-tooltip class="header-item" title="清理查询缓存" placement="bottom" >
-          <a @click="handleToClearCache">
-            <a-icon type="reload" />
-          </a>
-        </a-tooltip>
-        <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
-          <a href="https://iczer.gitee.io/vue-antd-admin-docs/" target="_blank">
-            <a-icon type="question-circle-o" />
-          </a>
-        </a-tooltip>
-        <header-notice class="header-item"/>
-        <header-avatar class="header-item"/>
-        <a-dropdown class="lang header-item">
-          <div>
-            <a-icon type="global"/> {{ langAlias }}
-          </div>
-          <a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
-            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
-          </a-menu>
-        </a-dropdown>
-      </div>
-    </div>
-  </a-layout-header>
-</template>
-
-<script>
-import HeaderSearch from './HeaderSearch'
-import HeaderNotice from './HeaderNotice'
-import HeaderAvatar from './HeaderAvatar'
-import IMenu from '@vue2-client/components/menu/menu'
-import { mapState, mapMutations } from 'vuex'
-import { Modal } from 'ant-design-vue'
-import { indexedDB } from '@vue2-client/utils/indexedDB'
-
-export default {
-  name: 'AdminHeader',
-  components: { IMenu, HeaderAvatar, HeaderNotice, HeaderSearch },
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['collapsed', 'menuData'],
-  data () {
-    return {
-      langList: [
-        { key: 'CN', name: '简体中文', alias: '简体' },
-        { key: 'HK', name: '繁體中文', alias: '繁體' },
-        { key: 'US', name: 'English', alias: 'English' }
-      ],
-      searchActive: false
-    }
-  },
-  computed: {
-    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
-    headerTheme () {
-      if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
-        return 'light'
-      }
-      return this.theme.mode
-    },
-    langAlias () {
-      const lang = this.langList.find(item => item.key == this.lang)
-      return lang.alias
-    },
-    menuWidth () {
-      const { layout, searchActive } = this
-      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
-      const extraWidth = searchActive ? '600px' : '400px'
-      return `calc(${headWidth} - ${extraWidth})`
-    }
-  },
-  methods: {
-    toggleCollapse () {
-      this.$emit('toggleCollapse')
-    },
-    onSelect (obj) {
-      this.$emit('menuSelect', obj)
-    },
-    handleToClearCache () {
-      Modal.confirm({
-        title: '信息',
-        content: '您确定要清除查询配置缓存吗？',
-        onOk: () => {
-          indexedDB.clear(() => {
-            location.reload()
-          })
-        },
-        onCancel () {}
-      })
-    },
-    ...mapMutations('setting', ['setLang'])
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import "index";
-</style>
+<template>
+  <a-layout-header :class="[headerTheme, 'admin-header']">
+    <div :class="['admin-header-wide', layout, pageWidth]">
+      <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
+        <img width="32" src="@/assets/img/logo.png" />
+        <h1 v-if="!isMobile">{{ systemName }}</h1>
+      </router-link>
+      <a-divider v-if="isMobile" type="vertical" />
+      <a-icon v-if="layout !== 'head'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
+      <div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
+        <i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
+      </div>
+      <div :class="['admin-header-right', headerTheme]">
+        <header-search class="header-item" @active="val => searchActive = val" />
+        <a-tooltip class="header-item" title="清理查询缓存" placement="bottom" >
+          <a @click="handleToClearCache">
+            <a-icon type="reload" />
+          </a>
+        </a-tooltip>
+        <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
+          <a href="https://iczer.gitee.io/vue-antd-admin-docs/" target="_blank">
+            <a-icon type="question-circle-o" />
+          </a>
+        </a-tooltip>
+        <header-notice class="header-item"/>
+        <header-avatar class="header-item"/>
+        <a-dropdown class="lang header-item">
+          <div>
+            <a-icon type="global"/> {{ langAlias }}
+          </div>
+          <a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
+            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </div>
+    </div>
+  </a-layout-header>
+</template>
+
+<script>
+import HeaderSearch from './HeaderSearch'
+import HeaderNotice from './HeaderNotice'
+import HeaderAvatar from './HeaderAvatar'
+import IMenu from '@vue2-client/components/menu/menu'
+import { mapState, mapMutations } from 'vuex'
+import { Modal } from 'ant-design-vue'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+
+export default {
+  name: 'AdminHeader',
+  components: { IMenu, HeaderAvatar, HeaderNotice, HeaderSearch },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['collapsed', 'menuData'],
+  data () {
+    return {
+      langList: [
+        { key: 'CN', name: '简体中文', alias: '简体' },
+        { key: 'HK', name: '繁體中文', alias: '繁體' },
+        { key: 'US', name: 'English', alias: 'English' }
+      ],
+      searchActive: false
+    }
+  },
+  computed: {
+    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
+    headerTheme () {
+      if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
+        return 'light'
+      }
+      return this.theme.mode
+    },
+    langAlias () {
+      const lang = this.langList.find(item => item.key == this.lang)
+      return lang.alias
+    },
+    menuWidth () {
+      const { layout, searchActive } = this
+      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
+      const extraWidth = searchActive ? '600px' : '400px'
+      return `calc(${headWidth} - ${extraWidth})`
+    }
+  },
+  methods: {
+    toggleCollapse () {
+      this.$emit('toggleCollapse')
+    },
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    },
+    handleToClearCache () {
+      Modal.confirm({
+        title: '信息',
+        content: '您确定要清除查询配置缓存吗？',
+        onOk: () => {
+          indexedDB.clear(() => {
+            location.reload()
+          })
+        },
+        onCancel () {}
+      })
+    },
+    ...mapMutations('setting', ['setLang'])
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index";
+</style>

package/src/layouts/header/HeaderAvatar.vue

@@ -1,60 +1,60 @@
-<template>
-  <a-dropdown>
-    <div class="header-avatar" style="cursor: pointer">
-      <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/>
-      <span class="name">{{ user.name }}</span>
-    </div>
-    <a-menu :class="['avatar-menu']" slot="overlay">
-      <a-menu-item>
-        <a-icon type="user" />
-        <span>个人中心</span>
-      </a-menu-item>
-      <a-menu-item>
-        <a-icon type="setting" />
-        <span>设置</span>
-      </a-menu-item>
-      <a-menu-divider />
-      <a-menu-item @click="logout">
-        <a-icon style="margin-right: 8px;" type="poweroff" />
-        <span>退出登录</span>
-      </a-menu-item>
-    </a-menu>
-  </a-dropdown>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { logout } from '@vue2-client/services/user'
-
-export default {
-  name: 'HeaderAvatar',
-  computed: {
-    ...mapGetters('account', ['user'])
-  },
-  methods: {
-    logout () {
-      logout()
-      this.$router.push('/login')
-    }
-  }
-}
-</script>
-
-<style lang="less">
-  .header-avatar{
-    display: inline-flex;
-    .avatar, .name{
-      align-self: center;
-    }
-    .avatar{
-      margin-right: 8px;
-    }
-    .name{
-      font-weight: 500;
-    }
-  }
-  .avatar-menu{
-    width: 150px;
-  }
-
-</style>
+<template>
+  <a-dropdown>
+    <div class="header-avatar" style="cursor: pointer">
+      <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/>
+      <span class="name">{{ user.name }}</span>
+    </div>
+    <a-menu :class="['avatar-menu']" slot="overlay">
+      <a-menu-item>
+        <a-icon type="user" />
+        <span>个人中心</span>
+      </a-menu-item>
+      <a-menu-item>
+        <a-icon type="setting" />
+        <span>设置</span>
+      </a-menu-item>
+      <a-menu-divider />
+      <a-menu-item @click="logout">
+        <a-icon style="margin-right: 8px;" type="poweroff" />
+        <span>退出登录</span>
+      </a-menu-item>
+    </a-menu>
+  </a-dropdown>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { logout } from '@vue2-client/services/user'
+
+export default {
+  name: 'HeaderAvatar',
+  computed: {
+    ...mapGetters('account', ['user'])
+  },
+  methods: {
+    logout () {
+      logout()
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .header-avatar{
+    display: inline-flex;
+    .avatar, .name{
+      align-self: center;
+    }
+    .avatar{
+      margin-right: 8px;
+    }
+    .name{
+      font-weight: 500;
+    }
+  }
+  .avatar-menu{
+    width: 150px;
+  }
+
+</style>