vue2-client 1.2.37-2 → 1.2.40

package/src/components/setting/Setting.vue

@@ -1,237 +1,235 @@
-<template>
-  <div class="side-setting">
-    <setting-item>
-      <a-button @click="saveSetting" type="primary" icon="save">{{ $t('save') }}</a-button>
-      <a-button @click="resetSetting" type="dashed" icon="redo" style="float: right">{{ $t('reset') }}</a-button>
-    </setting-item>
-    <setting-item :title="$t('theme.title')">
-      <img-checkbox-group
-        @change="values => setTheme({...theme, mode: values[0]})"
-        :default-values="[theme.mode]"
-      >
-        <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark"/>
-        <img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
-        <img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night"/>
-      </img-checkbox-group>
-    </setting-item>
-    <setting-item :title="$t('theme.color')">
-      <color-checkbox-group
-        @change="(values, colors) => setTheme({...theme, color: colors[0]})"
-        :defaultValues="[palettes.indexOf(theme.color)]"
-        :multiple="false"
-      >
-        <color-checkbox v-for="(color, index) in palettes" :key="index" :color="color" :value="index" />
-      </color-checkbox-group>
-    </setting-item>
-    <a-divider/>
-    <setting-item :title="$t('navigate.title')">
-      <img-checkbox-group
-        @change="values => setLayout(values[0])"
-        :default-values="[layout]"
-      >
-        <img-checkbox :title="$t('navigate.side')" img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" value="side"/>
-        <img-checkbox :title="$t('navigate.head')" img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
-        <img-checkbox :title="$t('navigate.mix')" img="https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg" value="mix"/>
-      </img-checkbox-group>
-    </setting-item>
-    <setting-item>
-      <a-list :split="false">
-        <a-list-item>
-          {{ $t('navigate.content.title') }}
-          <a-select
-            :getPopupContainer="getPopupContainer"
-            :value="pageWidth"
-            @change="setPageWidth"
-            class="select-item"
-            size="small"
-            slot="actions"
-          >
-            <a-select-option value="fluid">{{ $t('navigate.content.fluid') }}</a-select-option>
-            <a-select-option value="fixed">{{ $t('navigate.content.fixed') }}</a-select-option>
-          </a-select>
-        </a-list-item>
-        <a-list-item>
-          {{ $t('navigate.fixedHeader') }}
-          <a-switch :checked="fixedHeader" slot="actions" size="small" @change="setFixedHeader" />
-        </a-list-item>
-        <a-list-item>
-          {{ $t('navigate.fixedSideBar') }}
-          <a-switch :checked="fixedSideBar" slot="actions" size="small" @change="setFixedSideBar" />
-        </a-list-item>
-      </a-list>
-    </setting-item>
-    <a-divider />
-    <setting-item :title="$t('other.title')">
-      <a-list :split="false">
-        <a-list-item>
-          {{ $t('other.weekMode') }}
-          <a-switch :checked="weekMode" slot="actions" size="small" @change="setWeekMode" />
-        </a-list-item>
-        <a-list-item>
-          {{ $t('other.multiPages') }}
-          <a-switch :checked="multiPage" slot="actions" size="small" @change="setMultiPage" />
-        </a-list-item>
-        <a-list-item>
-          {{ $t('other.hideSetting') }}
-          <a-switch :checked="hideSetting" slot="actions" size="small" @change="setHideSetting" />
-        </a-list-item>
-      </a-list>
-    </setting-item>
-    <a-divider />
-    <setting-item :title="$t('animate.title')">
-      <a-list :split="false">
-        <a-list-item>
-          {{ $t('animate.disable') }}
-          <a-switch :checked="animate.disabled" slot="actions" size="small" @change="val => setAnimate({...animate, disabled: val})" />
-        </a-list-item>
-        <a-list-item>
-          {{ $t('animate.effect') }}
-          <a-select
-            :value="animate.name"
-            :getPopupContainer="getPopupContainer"
-            @change="val => setAnimate({...animate, name: val})"
-            class="select-item"
-            size="small"
-            slot="actions"
-          >
-            <a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{ item.alias }}</a-select-option>
-          </a-select>
-        </a-list-item>
-        <a-list-item>
-          {{ $t('animate.direction') }}
-          <a-select
-            :value="animate.direction"
-            :getPopupContainer="getPopupContainer"
-            @change="val => setAnimate({...animate, direction: val})"
-            class="select-item"
-            size="small"
-            slot="actions"
-          >
-            <a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{ item }}</a-select-option>
-          </a-select>
-        </a-list-item>
-      </a-list>
-    </setting-item>
-    <a-alert
-      v-if="isDev"
-      style="max-width: 240px; margin: -16px 0 8px; word-break: break-all"
-      type="warning"
-      :message="$t('alert')"
-    >
-    </a-alert>
-    <a-button
-      v-if="isDev"
-      id="copyBtn"
-      :data-clipboard-text="copyConfig"
-      @click="copyCode"
-      style="width: 100%"
-      icon="copy" >{{ $t('copy') }}</a-button>
-  </div>
-</template>
-
-<script>
-import SettingItem from './SettingItem'
-import { ColorCheckbox, ImgCheckbox } from '@vue2-client/components/checkbox'
-import Clipboard from 'clipboard'
-import { mapState, mapMutations } from 'vuex'
-import { formatConfig } from '@vue2-client/utils/formatter'
-import { setting } from '@vue2-client/config/default'
-import sysConfig from '@vue2-client/config/config'
-import fastEqual from 'fast-deep-equal'
-import deepMerge from 'deepmerge'
-
-const ColorCheckboxGroup = ColorCheckbox.Group
-const ImgCheckboxGroup = ImgCheckbox.Group
-export default {
-  name: 'Setting',
-  i18n: require('./i18n'),
-  components: { ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem },
-  data () {
-    return {
-      copyConfig: 'Sorry, you have copied nothing O(∩_∩)O~',
-      isDev: process.env.NODE_ENV === 'development'
-    }
-  },
-  computed: {
-    directions () {
-      return this.animates.find(item => item.name == this.animate.name).directions
-    },
-    ...mapState('setting', ['theme', 'layout', 'animate', 'animates', 'palettes', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting', 'pageWidth'])
-  },
-  watch: {
-    'animate.name': function (val) {
-      this.setAnimate({ name: val, direction: this.directions[0] })
-    }
-  },
-  methods: {
-    getPopupContainer () {
-      return this.$el.parentNode
-    },
-    copyCode () {
-      const config = this.extractConfig(false)
-      this.copyConfig = `// 自定义配置，参考 ./default/setting.config.js，需要自定义的属性在这里配置即可
-      module.exports = ${formatConfig(config)}
-      `
-      const clipboard = new Clipboard('#copyBtn')
-      clipboard.on('success', () => {
-        this.$message.success(`复制成功，覆盖文件 src/config/config.js 然后重启项目即可生效`).then(() => {
-          const localConfig = localStorage.getItem(process.env.VUE_APP_SETTING_KEY)
-          if (localConfig) {
-            console.warn('检测到本地有历史保存的主题配置，想要要拷贝的配置代码生效，您可能需要先重置配置')
-            this.$message.warn('检测到本地有历史保存的主题配置，想要要拷贝的配置代码生效，您可能需要先重置配置', 5)
-          }
-        })
-        clipboard.destroy()
-      })
-    },
-    saveSetting () {
-      const closeMessage = this.$message.loading('正在保存到本地，请稍后...', 0)
-      const config = this.extractConfig(true)
-      localStorage.setItem(process.env.VUE_APP_SETTING_KEY, JSON.stringify(config))
-      setTimeout(closeMessage, 800)
-    },
-    resetSetting () {
-      this.$confirm({
-        title: '重置主题会刷新页面，当前页面内容不会保留，确认重置？',
-        onOk () {
-          localStorage.removeItem(process.env.VUE_APP_SETTING_KEY)
-          window.location.reload()
-        }
-      })
-    },
-    // 提取配置
-    extractConfig (local = false) {
-      const config = {}
-      const mySetting = this.$store.state.setting
-      const dftSetting = local ? deepMerge(setting, sysConfig) : setting
-      Object.keys(mySetting).forEach(key => {
-        const dftValue = dftSetting[key]; const myValue = mySetting[key]
-        if (dftValue != undefined && !fastEqual(dftValue, myValue)) {
-          config[key] = myValue
-        }
-      })
-      return config
-    },
-    ...mapMutations('setting', ['setTheme', 'setLayout', 'setMultiPage', 'setWeekMode',
-      'setFixedSideBar', 'setFixedHeader', 'setAnimate', 'setHideSetting', 'setPageWidth'])
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .side-setting{
-    min-height: 100%;
-    background-color: @base-bg-color;
-    padding: 24px;
-    font-size: 14px;
-    line-height: 1.5;
-    word-wrap: break-word;
-    position: relative;
-    .flex{
-      display: flex;
-    }
-    .select-item{
-      width: 80px;
-    }
-  }
-</style>
+<template>
+  <div class="side-setting">
+    <setting-item>
+      <a-button @click="saveSetting" type="primary" icon="save">{{ $t('save') }}</a-button>
+      <a-button @click="resetSetting" type="dashed" icon="redo" style="float: right">{{ $t('reset') }}</a-button>
+    </setting-item>
+    <setting-item :title="$t('theme.title')">
+      <img-checkbox-group
+        @change="values => setTheme({...theme, mode: values[0]})"
+        :default-values="[theme.mode]"
+      >
+        <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark"/>
+        <img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
+        <img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night"/>
+      </img-checkbox-group>
+    </setting-item>
+    <setting-item :title="$t('theme.color')">
+      <color-checkbox-group
+        @change="(values, colors) => setTheme({...theme, color: colors[0]})"
+        :defaultValues="[palettes.indexOf(theme.color)]"
+        :multiple="false"
+      >
+        <color-checkbox v-for="(color, index) in palettes" :key="index" :color="color" :value="index" />
+      </color-checkbox-group>
+    </setting-item>
+    <a-divider/>
+    <setting-item :title="$t('navigate.title')">
+      <img-checkbox-group
+        @change="values => setLayout(values[0])"
+        :default-values="[layout]"
+      >
+        <img-checkbox :title="$t('navigate.side')" img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" value="side"/>
+        <img-checkbox :title="$t('navigate.head')" img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
+        <img-checkbox :title="$t('navigate.mix')" img="https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg" value="mix"/>
+      </img-checkbox-group>
+    </setting-item>
+    <setting-item>
+      <a-list :split="false">
+        <a-list-item>
+          {{ $t('navigate.content.title') }}
+          <a-select
+            :getPopupContainer="getPopupContainer"
+            :value="pageWidth"
+            @change="setPageWidth"
+            class="select-item"
+            size="small"
+            slot="actions"
+          >
+            <a-select-option value="fluid">{{ $t('navigate.content.fluid') }}</a-select-option>
+            <a-select-option value="fixed">{{ $t('navigate.content.fixed') }}</a-select-option>
+          </a-select>
+        </a-list-item>
+        <a-list-item>
+          {{ $t('navigate.fixedHeader') }}
+          <a-switch :checked="fixedHeader" slot="actions" size="small" @change="setFixedHeader" />
+        </a-list-item>
+        <a-list-item>
+          {{ $t('navigate.fixedSideBar') }}
+          <a-switch :checked="fixedSideBar" slot="actions" size="small" @change="setFixedSideBar" />
+        </a-list-item>
+      </a-list>
+    </setting-item>
+    <a-divider />
+    <setting-item :title="$t('other.title')">
+      <a-list :split="false">
+        <a-list-item>
+          {{ $t('other.weekMode') }}
+          <a-switch :checked="weekMode" slot="actions" size="small" @change="setWeekMode" />
+        </a-list-item>
+        <a-list-item>
+          {{ $t('other.multiPages') }}
+          <a-switch :checked="multiPage" slot="actions" size="small" @change="setMultiPage" />
+        </a-list-item>
+        <a-list-item>
+          {{ $t('other.hideSetting') }}
+          <a-switch :checked="hideSetting" slot="actions" size="small" @change="setHideSetting" />
+        </a-list-item>
+      </a-list>
+    </setting-item>
+    <a-divider />
+    <setting-item :title="$t('animate.title')">
+      <a-list :split="false">
+        <a-list-item>
+          {{ $t('animate.disable') }}
+          <a-switch :checked="animate.disabled" slot="actions" size="small" @change="val => setAnimate({...animate, disabled: val})" />
+        </a-list-item>
+        <a-list-item>
+          {{ $t('animate.effect') }}
+          <a-select
+            :value="animate.name"
+            :getPopupContainer="getPopupContainer"
+            @change="val => setAnimate({...animate, name: val})"
+            class="select-item"
+            size="small"
+            slot="actions"
+          >
+            <a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{ item.alias }}</a-select-option>
+          </a-select>
+        </a-list-item>
+        <a-list-item>
+          {{ $t('animate.direction') }}
+          <a-select
+            :value="animate.direction"
+            :getPopupContainer="getPopupContainer"
+            @change="val => setAnimate({...animate, direction: val})"
+            class="select-item"
+            size="small"
+            slot="actions"
+          >
+            <a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{ item }}</a-select-option>
+          </a-select>
+        </a-list-item>
+      </a-list>
+    </setting-item>
+    <a-alert
+      v-if="isDev"
+      style="max-width: 240px; margin: -16px 0 8px; word-break: break-all"
+      type="warning"
+      :message="$t('alert')"
+    >
+    </a-alert>
+    <a-button
+      v-if="isDev"
+      id="copyBtn"
+      :data-clipboard-text="copyConfig"
+      @click="copyCode"
+      style="width: 100%"
+      icon="copy" >{{ $t('copy') }}</a-button>
+  </div>
+</template>
+
+<script>
+import SettingItem from './SettingItem'
+import { ColorCheckbox, ImgCheckbox } from '@vue2-client/components/checkbox'
+import Clipboard from 'clipboard'
+import { mapState, mapMutations } from 'vuex'
+import { formatConfig } from '@vue2-client/utils/formatter'
+import { setting } from '@vue2-client/config/default'
+import fastEqual from 'fast-deep-equal'
+
+const ColorCheckboxGroup = ColorCheckbox.Group
+const ImgCheckboxGroup = ImgCheckbox.Group
+export default {
+  name: 'Setting',
+  i18n: require('./i18n'),
+  components: { ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem },
+  data () {
+    return {
+      copyConfig: 'Sorry, you have copied nothing O(∩_∩)O~',
+      isDev: process.env.NODE_ENV === 'development'
+    }
+  },
+  computed: {
+    directions () {
+      return this.animates.find(item => item.name == this.animate.name).directions
+    },
+    ...mapState('setting', ['theme', 'layout', 'animate', 'animates', 'palettes', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting', 'pageWidth'])
+  },
+  watch: {
+    'animate.name': function (val) {
+      this.setAnimate({ name: val, direction: this.directions[0] })
+    }
+  },
+  methods: {
+    getPopupContainer () {
+      return this.$el.parentNode
+    },
+    copyCode () {
+      const config = this.extractConfig()
+      this.copyConfig = `// 自定义配置，参考 ./default/setting.config.js，需要自定义的属性在这里配置即可
+      module.exports = ${formatConfig(config)}
+      `
+      const clipboard = new Clipboard('#copyBtn')
+      clipboard.on('success', () => {
+        this.$message.success(`复制成功，覆盖文件 src/config/config.js 然后重启项目即可生效`).then(() => {
+          const localConfig = localStorage.getItem(process.env.VUE_APP_SETTING_KEY)
+          if (localConfig) {
+            console.warn('检测到本地有历史保存的主题配置，想要要拷贝的配置代码生效，您可能需要先重置配置')
+            this.$message.warn('检测到本地有历史保存的主题配置，想要要拷贝的配置代码生效，您可能需要先重置配置', 5)
+          }
+        })
+        clipboard.destroy()
+      })
+    },
+    saveSetting () {
+      const closeMessage = this.$message.loading('正在保存到本地，请稍后...', 0)
+      const config = this.extractConfig()
+      localStorage.setItem(process.env.VUE_APP_SETTING_KEY, JSON.stringify(config))
+      setTimeout(closeMessage, 800)
+    },
+    resetSetting () {
+      this.$confirm({
+        title: '重置主题会刷新页面，当前页面内容不会保留，确认重置？',
+        onOk () {
+          localStorage.removeItem(process.env.VUE_APP_SETTING_KEY)
+          window.location.reload()
+        }
+      })
+    },
+    // 提取配置
+    extractConfig () {
+      const config = {}
+      const mySetting = this.$store.state.setting
+      const dftSetting = setting
+      Object.keys(mySetting).forEach(key => {
+        const dftValue = dftSetting[key]; const myValue = mySetting[key]
+        if (dftValue != undefined && !fastEqual(dftValue, myValue)) {
+          config[key] = myValue
+        }
+      })
+      return config
+    },
+    ...mapMutations('setting', ['setTheme', 'setLayout', 'setMultiPage', 'setWeekMode',
+      'setFixedSideBar', 'setFixedHeader', 'setAnimate', 'setHideSetting', 'setPageWidth'])
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .side-setting{
+    min-height: 100%;
+    background-color: @base-bg-color;
+    padding: 24px;
+    font-size: 14px;
+    line-height: 1.5;
+    word-wrap: break-word;
+    position: relative;
+    .flex{
+      display: flex;
+    }
+    .select-item{
+      width: 80px;
+    }
+  }
+</style>

package/src/config/default/setting.config.js

@@ -1,34 +1,35 @@
-// 此配置为系统默认设置，需修改的设置项，在src/config/config.js中添加修改项即可。也可直接在此文件中修改。
-module.exports = {
-  lang: 'CN', // 语言，可选 CN(简体)、HK(繁体)、US(英语)，也可扩展其它语言
-  theme: { // 主题
-    color: '#1890ff', // 主题色
-    mode: 'dark', // 主题模式 可选 dark、 light 和 night
-    success: '#52c41a', // 成功色
-    warning: '#faad14', // 警告色
-    error: '#f5222f' // 错误色
-  },
-  layout: 'side', // 导航布局，可选 side 和 head，分别为侧边导航和顶部导航
-  fixedHeader: false, // 固定头部状态栏，true:固定，false:不固定
-  fixedSideBar: true, // 固定侧边栏，true:固定，false:不固定
-  fixedTabs: false, // 固定页签头，true:固定，false:不固定
-  pageWidth: 'fixed', // 内容区域宽度，fixed:固定宽度，fluid:流式宽度
-  weekMode: false, // 色弱模式，true:开启，false:不开启
-  multiPage: true, // 多页签模式，true:开启，false:不开启
-  cachePage: true, // 是否缓存页面数据，仅多页签模式下生效，true 缓存, false 不缓存
-  hideSetting: false, // 隐藏设置抽屉，true:隐藏，false:不隐藏
-  homePage: '/system/dictionaryManage', // 首页路由, 登陆后默认打开
-  ticketPage: '/submitTicket', // 提交工单路由
-  systemName: '物联网监控平台', // 系统名称
-  copyright: '2021 Mr.Jiang', // copyright
-  asyncRoutes: true, // 异步加载路由，true:开启，false:不开启
-  showPageTitle: true, // 是否显示页面标题（PageLayout 布局中的页面标题），true:显示，false:不显示
-  filterMenu: true, // 根据权限过滤菜单，true:过滤，false:不过滤
-  animate: { // 动画设置
-    disabled: true, // 禁用动画，true:禁用，false:启用
-    name: 'lightSpeed', // 动画效果，支持的动画效果可参考 ./animate.config.js
-    direction: 'left' // 动画方向，切换页面时动画的方向，参考 ./animate.config.js
-  },
-  footerLinks: [ // 页面底部链接，{link: '链接地址', name: '名称/显示文字', icon: '图标，支持 ant design vue 图标库'}
-  ]
-}
+// 此配置为系统默认设置
+module.exports = {
+  lang: 'CN', // 语言，可选 CN(简体)、HK(繁体)、US(英语)，也可扩展其它语言
+  theme: { // 主题
+    color: '#f5222d', // 主题色
+    mode: 'dark', // 主题模式 可选 dark、 light 和 night
+    success: '#52c41a', // 成功色
+    warning: '#faad14', // 警告色
+    error: '#f5222f' // 错误色
+  },
+  layout: 'side', // 导航布局，可选 side 和 head，分别为侧边导航和顶部导航
+  fixedHeader: true, // 固定头部状态栏，true:固定，false:不固定
+  fixedSideBar: true, // 固定侧边栏，true:固定，false:不固定
+  fixedTabs: true, // 固定页签头，true:固定，false:不固定
+  pageWidth: 'fixed', // 内容区域宽度，fixed:固定宽度，fluid:流式宽度
+  weekMode: false, // 色弱模式，true:开启，false:不开启
+  multiPage: true, // 多页签模式，true:开启，false:不开启
+  cachePage: true, // 是否缓存页面数据，仅多页签模式下生效，true 缓存, false 不缓存
+  hideSetting: false, // 隐藏设置抽屉，true:隐藏，false:不隐藏
+  homePage: '/system/dictionaryManage', // 首页路由, 登陆后默认打开
+  ticketPage: '/submitTicket', // 提交工单路由
+  systemName: '基础组件平台', // 系统名称
+  systemDesc: '为PC端中、后台系统业务开发提供支持', // 系统描述
+  copyright: '2022 AoFengSoft', // copyright
+  asyncRoutes: true, // 异步加载路由，true:开启，false:不开启
+  showPageTitle: true, // 是否显示页面标题（PageLayout 布局中的页面标题），true:显示，false:不显示
+  filterMenu: true, // 根据权限过滤菜单，true:过滤，false:不过滤
+  animate: { // 动画设置
+    disabled: true, // 禁用动画，true:禁用，false:启用
+    name: 'lightSpeed', // 动画效果，支持的动画效果可参考 ./animate.config.js
+    direction: 'left' // 动画方向，切换页面时动画的方向，参考 ./animate.config.js
+  },
+  footerLinks: [ // 页面底部链接，{link: '链接地址', name: '名称/显示文字', icon: '图标，支持 ant design vue 图标库'}
+  ]
+}

package/src/config/index.js

@@ -1,6 +1,3 @@
-const deepMerge = require('deepmerge')
-const _config = require('./config')
-const { setting } = require('./default')
-const config = deepMerge(setting, _config)
-
-module.exports = config
+const { setting } = require('./default')
+
+module.exports = setting

package/src/layouts/SinglePageView.vue

@@ -2,11 +2,10 @@
   <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">
+        ref="singlepage"
+        :src="iframeSrc"
+        class="single-page-iframe"
+        @load="load">
       </iframe>
     </template>
   </page-toggle-transition>
@@ -22,32 +21,29 @@ export default {
   components: { PageToggleTransition },
   props: {
     singlePageUrl: {
-      type: Object,
-      default: () => {
-        return { url: '' }
-      }
+      type: String,
+      default: ''
     }
   },
   data () {
     return {
-      url: '../singlepage/page.html',
-      // singlePageUrl: null,
-      iframe: {}
+      iframeSrc: '../singlepage/page.html',
+      iframe: null
     }
   },
   computed: {
-    ...mapState('setting', ['multiPage', 'animate']),
+    ...mapState('setting', ['animate']),
     ...mapState('account', ['login'])
   },
   mounted () {
     if (!this.login) {
       this.setLogin(JSON.parse(sessionStorage.getItem(process.env.VUE_APP_LOGIN_KEY)))
     }
+    this.iframe = this.$refs.singlepage.contentWindow
   },
   methods: {
     ...mapMutations('account', ['setLogin']),
     load () {
-      this.iframe = this.$refs.singlepage.contentWindow
       const appdata = {
         singleValues: this.$appdata.getSingleValues(),
         params: this.$appdata.getParams()
@@ -56,17 +52,17 @@ export default {
         token: localStorage.getItem(ACCESS_TOKEN),
         login: this.login,
         appdata: appdata,
-        page: this.singlePageUrl.url
+        page: this.singlePageUrl
       }
       console.log('发送参数', data)
-      this.iframe.postMessage(data, '*')
+      this.iframe?.postMessage(data, '*')
     }
   }
 }
 </script>
 
 <style lang="less">
-#singlepageview {
+.single-page-iframe {
   width: 100%;
   height: calc(100vh - 117px);
   border: none;