vue2-client 1.4.53 → 1.4.55

package/src/layouts/PageLayout.vue

@@ -1,151 +1,151 @@
-<template>
-  <div class="page-layout">
-    <page-header
-      ref="pageHeader"
-      :style="`margin-top: ${multiPage ? 0 : -24}px`"
-      :breadcrumb="breadcrumb"
-      :title="pageTitle"
-      :logo="logo"
-      :avatar="avatar">
-      <slot name="action" slot="action"></slot>
-      <slot slot="content" name="headerContent"></slot>
-      <div slot="content" v-if="!this.$slots.headerContent && desc">
-        <p>{{ desc }}</p>
-        <div v-if="this.linkList" class="link">
-          <template v-for="(link, index) in linkList">
-            <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{ link.title }}</a>
-          </template>
-        </div>
-      </div>
-      <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
-    </page-header>
-    <div ref="page" :class="['page-content', layout, pageWidth]" >
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import PageHeader from '@vue2-client/components/page/header/PageHeader'
-import { mapState, mapMutations } from 'vuex'
-import { getI18nKey } from '@vue2-client/utils/routerUtil'
-
-export default {
-  name: 'PageLayout',
-  components: { PageHeader },
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
-  data () {
-    return {
-      page: {},
-      pageHeaderHeight: 0
-    }
-  },
-  watch: {
-    $route () {
-      this.page = this.$route.meta.page
-    }
-  },
-  updated () {
-    if (!this._inactive) {
-      this.updatePageHeight()
-    }
-  },
-  activated () {
-    this.updatePageHeight()
-  },
-  deactivated () {
-    this.updatePageHeight(0)
-  },
-  mounted () {
-    this.updatePageHeight()
-  },
-  created () {
-    this.page = this.$route.meta.page
-  },
-  beforeDestroy () {
-    this.updatePageHeight(0)
-  },
-  computed: {
-    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth', 'customTitles']),
-    pageTitle () {
-      const pageTitle = this.page && this.page.title
-      return this.customTitle || (pageTitle && this.$t(pageTitle)) || this.title || this.routeName
-    },
-    routeName () {
-      const route = this.$route
-      return this.$t(getI18nKey(route.matched[route.matched.length - 1].path))
-    },
-    breadcrumb () {
-      const page = this.page
-      const breadcrumb = page && page.breadcrumb
-      if (breadcrumb) {
-        const i18nBreadcrumb = []
-        breadcrumb.forEach(item => {
-          i18nBreadcrumb.push(this.$t(item))
-        })
-        return i18nBreadcrumb
-      } else {
-        return this.getRouteBreadcrumb()
-      }
-    },
-    marginCorrect () {
-      return this.multiPage ? 24 : 0
-    }
-  },
-  methods: {
-    ...mapMutations('setting', ['correctPageMinHeight']),
-    getRouteBreadcrumb () {
-      const routes = this.$route.matched
-      const path = this.$route.path
-      const breadcrumb = []
-      routes.filter(item => path.includes(item.path))
-        .forEach(route => {
-        const path = route.path.length === 0 ? '/home' : route.path
-        breadcrumb.push(this.$t(getI18nKey(path)))
-      })
-      const pageTitle = this.page && this.page.title
-      if (this.customTitle || pageTitle) {
-        breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle
-      }
-      return breadcrumb
-    },
-    /**
-     * 用于计算页面内容最小高度
-     * @param newHeight
-     */
-    updatePageHeight (newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
-      this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
-      this.pageHeaderHeight = newHeight
-    }
-  }
-}
-</script>
-
-<style lang="less">
-  .page-header{
-    margin: 0 -24px 0;
-  }
-  .link{
-    /*margin-top: 16px;*/
-    line-height: 24px;
-    a{
-      font-size: 14px;
-      margin-right: 32px;
-      i{
-        font-size: 22px;
-        margin-right: 8px;
-      }
-    }
-  }
-  .page-content{
-    position: relative;
-    padding: 24px 0 0;
-    &.side{
-    }
-    &.head.fixed{
-      margin: 0 auto;
-      max-width: 100%;
-    }
-  }
-</style>
+<template>
+  <div class="page-layout">
+    <page-header
+      ref="pageHeader"
+      :style="`margin-top: ${multiPage ? 0 : -24}px`"
+      :breadcrumb="breadcrumb"
+      :title="pageTitle"
+      :logo="logo"
+      :avatar="avatar">
+      <slot name="action" slot="action"></slot>
+      <slot slot="content" name="headerContent"></slot>
+      <div slot="content" v-if="!this.$slots.headerContent && desc">
+        <p>{{ desc }}</p>
+        <div v-if="this.linkList" class="link">
+          <template v-for="(link, index) in linkList">
+            <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{ link.title }}</a>
+          </template>
+        </div>
+      </div>
+      <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
+    </page-header>
+    <div ref="page" :class="['page-content', layout, pageWidth]" >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@vue2-client/components/page/header/PageHeader'
+import { mapState, mapMutations } from 'vuex'
+import { getI18nKey } from '@vue2-client/utils/routerUtil'
+
+export default {
+  name: 'PageLayout',
+  components: { PageHeader },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
+  data () {
+    return {
+      page: {},
+      pageHeaderHeight: 0
+    }
+  },
+  watch: {
+    $route () {
+      this.page = this.$route.meta.page
+    }
+  },
+  updated () {
+    if (!this._inactive) {
+      this.updatePageHeight()
+    }
+  },
+  activated () {
+    this.updatePageHeight()
+  },
+  deactivated () {
+    this.updatePageHeight(0)
+  },
+  mounted () {
+    this.updatePageHeight()
+  },
+  created () {
+    this.page = this.$route.meta.page
+  },
+  beforeDestroy () {
+    this.updatePageHeight(0)
+  },
+  computed: {
+    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth', 'customTitles']),
+    pageTitle () {
+      const pageTitle = this.page && this.page.title
+      return this.customTitle || (pageTitle && this.$t(pageTitle)) || this.title || this.routeName
+    },
+    routeName () {
+      const route = this.$route
+      return this.$t(getI18nKey(route.matched[route.matched.length - 1].path))
+    },
+    breadcrumb () {
+      const page = this.page
+      const breadcrumb = page && page.breadcrumb
+      if (breadcrumb) {
+        const i18nBreadcrumb = []
+        breadcrumb.forEach(item => {
+          i18nBreadcrumb.push(this.$t(item))
+        })
+        return i18nBreadcrumb
+      } else {
+        return this.getRouteBreadcrumb()
+      }
+    },
+    marginCorrect () {
+      return this.multiPage ? 24 : 0
+    }
+  },
+  methods: {
+    ...mapMutations('setting', ['correctPageMinHeight']),
+    getRouteBreadcrumb () {
+      const routes = this.$route.matched
+      const path = this.$route.path
+      const breadcrumb = []
+      routes.filter(item => path.includes(item.path))
+        .forEach(route => {
+        const path = route.path.length === 0 ? '/home' : route.path
+        breadcrumb.push(this.$t(getI18nKey(path)))
+      })
+      const pageTitle = this.page && this.page.title
+      if (this.customTitle || pageTitle) {
+        breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle
+      }
+      return breadcrumb
+    },
+    /**
+     * 用于计算页面内容最小高度
+     * @param newHeight
+     */
+    updatePageHeight (newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
+      this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
+      this.pageHeaderHeight = newHeight
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .page-header{
+    margin: 0 -24px 0;
+  }
+  .link{
+    /*margin-top: 16px;*/
+    line-height: 24px;
+    a{
+      font-size: 14px;
+      margin-right: 32px;
+      i{
+        font-size: 22px;
+        margin-right: 8px;
+      }
+    }
+  }
+  .page-content{
+    position: relative;
+    padding: 24px 0 0;
+    &.side{
+    }
+    &.head.fixed{
+      margin: 0 auto;
+      max-width: 100%;
+    }
+  }
+</style>

package/src/layouts/SinglePageView.vue

@@ -7,6 +7,7 @@
           :src="url"
           :name="this.fullPath"
           class="single-page-iframe"
+          sandbox="allow-forms allow-scripts allow-same-origin allow-top-navigation"
           @load="load">
         </iframe>
       </div>

package/src/layouts/footer/PageFooter.vue

@@ -1,49 +1,49 @@
-<template>
-  <div class="footer">
-    <div class="links">
-      <a target="_blank" :key="index" :href="item.link ? item.link : 'javascript: void(0)'" v-for="(item, index) in linkList">
-        <a-icon v-if="item.icon" :type="item.icon"/>{{ item.name }}
-      </a>
-    </div>
-    <div class="copyright" v-if="!copyrightStyle">
-      Copyright<a-icon type="copyright" />{{ copyright }}
-    </div>
-    <div class="copyright2" :style="copyrightStyle" v-else>
-      {{ copyright }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PageFooter',
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['copyright', 'linkList', 'copyrightStyle']
-}
-</script>
-
-<style lang="less" scoped>
-  .footer{
-    padding: 48px 16px 24px;
-    /*margin: 48px 0 24px;*/
-    text-align: center;
-    .copyright{
-      color: @text-color-second;
-      font-size: 14px;
-      i {
-          margin: 0 4px;
-      }
-    }
-    .links{
-      margin-bottom: 8px;
-      a:not(:last-child) {
-        margin-right: 40px;
-      }
-      a{
-        color: @text-color-second;
-        -webkit-transition: all .3s;
-        transition: all .3s;
-      }
-    }
-  }
-</style>
+<template>
+  <div class="footer">
+    <div class="links">
+      <a target="_blank" :key="index" :href="item.link ? item.link : 'javascript: void(0)'" v-for="(item, index) in linkList">
+        <a-icon v-if="item.icon" :type="item.icon"/>{{ item.name }}
+      </a>
+    </div>
+    <div class="copyright" v-if="!copyrightStyle">
+      Copyright<a-icon type="copyright" />{{ copyright }}
+    </div>
+    <div class="copyright2" :style="copyrightStyle" v-else>
+      {{ copyright }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageFooter',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['copyright', 'linkList', 'copyrightStyle']
+}
+</script>
+
+<style lang="less" scoped>
+  .footer{
+    padding: 48px 16px 24px;
+    /*margin: 48px 0 24px;*/
+    text-align: center;
+    .copyright{
+      color: @text-color-second;
+      font-size: 14px;
+      i {
+          margin: 0 4px;
+      }
+    }
+    .links{
+      margin-bottom: 8px;
+      a:not(:last-child) {
+        margin-right: 40px;
+      }
+      a{
+        color: @text-color-second;
+        -webkit-transition: all .3s;
+        transition: all .3s;
+      }
+    }
+  }
+</style>

package/src/layouts/header/AdminHeader.vue

@@ -1,104 +1,104 @@
-<template>
-  <a-layout-header :class="[headerTheme, 'admin-header']">
-    <div :class="['admin-header-wide', layout, pageWidth]">
-      <router-link v-if="isMobile || layout === 'head'" :class="['logo', isMobile ? null : 'pc', headerTheme]" to="/">
-        <img src="@vue2-client/assets/img/logo.png" width="32" alt=""/>
-        <h1 v-if="!isMobile">{{ systemName }}</h1>
-      </router-link>
-      <a-divider v-if="isMobile" type="vertical" />
-      <a-icon v-if="layout !== 'head'" :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggleCollapse"/>
-      <div v-if="layout !== 'side' && !isMobile" :style="`width: ${menuWidth};`" class="admin-header-menu">
-        <i-menu :options="menuData" :theme="headerTheme" class="head-menu" mode="horizontal" @select="onSelect"/>
-      </div>
-      <div :class="['admin-header-right', headerTheme]">
-        <header-search class="header-item" @active="val => searchActive = val" />
-        <a-tooltip class="header-item" placement="bottom" title="清理查询缓存" >
-          <a @click="handleToClearCache">
-            <a-icon type="reload" />
-          </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 slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
-            <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'" :class="['logo', isMobile ? null : 'pc', headerTheme]" to="/">
+        <img src="@vue2-client/assets/img/logo.png" width="32" alt=""/>
+        <h1 v-if="!isMobile">{{ systemName }}</h1>
+      </router-link>
+      <a-divider v-if="isMobile" type="vertical" />
+      <a-icon v-if="layout !== 'head'" :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggleCollapse"/>
+      <div v-if="layout !== 'side' && !isMobile" :style="`width: ${menuWidth};`" class="admin-header-menu">
+        <i-menu :options="menuData" :theme="headerTheme" class="head-menu" mode="horizontal" @select="onSelect"/>
+      </div>
+      <div :class="['admin-header-right', headerTheme]">
+        <header-search class="header-item" @active="val => searchActive = val" />
+        <a-tooltip class="header-item" placement="bottom" title="清理查询缓存" >
+          <a @click="handleToClearCache">
+            <a-icon type="reload" />
+          </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 slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
+            <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>