vue2-client 0.1.1 → 1.2.0

package/src/layouts/tabs/TabsHead.vue

@@ -0,0 +1,190 @@
+<template>
+  <div :class="['tabs-head', layout, pageWidth]">
+    <a-tabs
+      type="editable-card"
+      :class="['tabs-container', layout, pageWidth, {'affixed' : affixed, 'fixed-header' : fixedHeader, 'collapsed' : adminLayout.collapsed}]"
+      :active-key="active"
+      :hide-add="true"
+    >
+      <a-tooltip placement="left" :title="lockTitle" slot="tabBarExtraContent">
+        <a-icon
+          theme="filled"
+          @click="onLockClick"
+          class="header-lock"
+          :type="fixedTabs ? 'lock' : 'unlock'"
+        />
+      </a-tooltip>
+      <a-tab-pane v-for="page in pageList" :key="page.path">
+        <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
+          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
+          <div class="title" @click="onTabClick(page.path)" >{{ pageName(page) }}</div>
+          <a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <div v-if="affixed" class="virtual-tabs"></div>
+  </div>
+</template>
+
+<script>
+  import { mapState, mapMutations } from 'vuex'
+  import { getI18nKey } from '@vue2-client/utils/routerUtil'
+
+  export default {
+    name: 'TabsHead',
+    i18n: {
+      messages: {
+        CN: {
+          lock: '点击锁定页签头',
+          unlock: '点击解除锁定'
+        },
+        HK: {
+          lock: '點擊鎖定頁簽頭',
+          unlock: '點擊解除鎖定'
+        },
+        US: {
+          lock: 'click to lock the tabs head',
+          unlock: 'click to unlock'
+        }
+      }
+    },
+    props: {
+      // eslint-disable-next-line vue/require-default-prop
+      pageList: Array,
+      // eslint-disable-next-line vue/require-default-prop
+      active: String,
+      fixed: Boolean
+    },
+    data () {
+      return {
+        affixed: false
+      }
+    },
+    inject: ['adminLayout'],
+    created () {
+      this.affixed = this.fixedTabs
+    },
+    computed: {
+      ...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
+      lockTitle () {
+        return this.$t(this.fixedTabs ? 'unlock' : 'lock')
+      }
+    },
+    methods: {
+      ...mapMutations('setting', ['setFixedTabs']),
+      onLockClick () {
+        this.setFixedTabs(!this.fixedTabs)
+        if (this.fixedTabs) {
+          setTimeout(() => {
+            this.affixed = true
+          }, 200)
+        } else {
+          this.affixed = false
+        }
+      },
+      onTabClick (key) {
+        if (this.active !== key) {
+          this.$emit('change', key)
+        }
+      },
+      onClose (key) {
+        this.$emit('close', key)
+      },
+      onRefresh (page) {
+        this.$emit('refresh', page.path, page)
+      },
+      onContextmenu (pageKey, e) {
+        this.$emit('contextmenu', pageKey, e)
+      },
+      pageName (page) {
+        const pagePath = page.fullPath.split('?')[0]
+        const custom = this.customTitles.find(item => item.path === pagePath)
+        return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .tab{
+    margin: 0 -16px;
+    padding: 0 16px;
+    font-size: 14px;
+    user-select: none;
+    transition: all 0.2s;
+    .title{
+      display: inline-block;
+      height: 100%;
+    }
+    .icon-close{
+      font-size: 12px;
+      margin-left: 6px;
+      margin-right: -4px !important;
+      color: @text-color-second;
+      &:hover{
+        color: @text-color;
+      }
+    }
+    .icon-sync{
+      margin-left: -4px;
+      color: @primary-4;
+      transition: all 0.3s ease-in-out;
+      &:hover{
+        color: @primary-color;
+      }
+      font-size: 14px;
+      &.hide{
+        font-size: 0;
+      }
+    }
+  }
+  .tabs-head{
+    margin: 0 auto;
+    &.head.fixed{
+      width: 1400px;
+    }
+  }
+  .tabs-container{
+    margin: -16px auto 8px;
+    transition: top,left 0.2s;
+    .header-lock{
+      font-size: 18px;
+      cursor: pointer;
+      color: @primary-3;
+      &:hover{
+        color: @primary-color;
+      }
+    }
+    &.affixed{
+      margin: 0 auto;
+      top: 0px;
+      padding: 8px 24px 0;
+      position: fixed;
+      height: 48px;
+      z-index: 1;
+      background-color: @layout-body-background;
+      &.side,&.mix{
+        right: 0;
+        left: 256px;
+        &.collapsed{
+          left: 80px;
+        }
+      }
+      &.head{
+        width: inherit;
+        padding: 8px 0 0;
+        &.fluid{
+          left: 0;
+          right: 0;
+          padding: 8px 24px 0;
+        }
+      }
+      &.fixed-header{
+        top: 64px;
+      }
+    }
+  }
+  .virtual-tabs{
+    height: 48px;
+  }
+</style>

package/src/layouts/tabs/TabsView.vue

@@ -0,0 +1,355 @@
+<template>
+  <admin-layout>
+    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
+    <tabs-head
+      v-if="multiPage"
+      :active="activePage"
+      :page-list="pageList"
+      @change="changePage"
+      @close="remove"
+      @refresh="refresh"
+      @contextmenu="onContextmenu"
+    />
+    <div :class="['tabs-view-content', layout, pageWidth]" :style="`margin-top: ${multiPage ? -24 : 0}px`">
+      <page-toggle-transition v-show="!$route.meta.singlePage" :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
+        <a-keep-alive :exclude-keys="excludeKeys" v-if="multiPage && cachePage" v-model="clearCaches">
+          <router-view v-if="!refreshing" ref="tabContent" :key="$route.path" />
+        </a-keep-alive>
+        <router-view ref="tabContent" v-else-if="!refreshing" />
+      </page-toggle-transition>
+      <div v-show="$route.meta.singlePage && this.single.length > 0">
+        <template v-for="page in single">
+          <single-page-view v-show="page.meta.singlePage === $route.meta.singlePage" :single-page-url="{url:page.meta.singlePage}" :key="page.meta.singlePage"></single-page-view>
+        </template>
+      </div>
+    </div>
+  </admin-layout>
+</template>
+
+<script>
+import AdminLayout from '@vue2-client/layouts/AdminLayout'
+import Contextmenu from '@vue2-client/components/menu/Contextmenu'
+import PageToggleTransition from '@vue2-client/components/transition/PageToggleTransition'
+import { mapState, mapMutations } from 'vuex'
+import { getI18nKey } from '@vue2-client/utils/routerUtil'
+import AKeepAlive from '@vue2-client/components/cache/AKeepAlive'
+import TabsHead from '@vue2-client/layouts/tabs/TabsHead'
+import SinglePageView from '../SinglePageView'
+
+export default {
+  name: 'TabsView',
+  i18n: require('./i18n'),
+  components: { SinglePageView, TabsHead, PageToggleTransition, Contextmenu, AdminLayout, AKeepAlive },
+  data () {
+    return {
+      clearCaches: [],
+      pageList: [],
+      activePage: '',
+      menuVisible: false,
+      refreshing: false,
+      allSinglePages: [],
+      excludeKeys: []
+    }
+  },
+  computed: {
+    ...mapState('setting', ['multiPage', 'cachePage', 'animate', 'layout', 'pageWidth']),
+    ...mapState('account', ['single']),
+    menuItemList () {
+      return [
+        { key: '1', icon: 'vertical-right', text: this.$t('closeLeft') },
+        { key: '2', icon: 'vertical-left', text: this.$t('closeRight') },
+        { key: '3', icon: 'close', text: this.$t('closeOthers') },
+        { key: '4', icon: 'sync', text: this.$t('refresh') }
+      ]
+    },
+    tabsOffset () {
+      return this.multiPage ? 24 : 0
+    }
+  },
+  created () {
+    this.loadCacheConfig(this.$router?.options?.routes)
+    this.loadCachedTabs()
+    const route = this.$route
+    if (this.pageList.findIndex(item => item.path === route.path) === -1) {
+      this.pageList.push(this.createPage(route))
+    }
+    this.activePage = route.path
+    if (this.multiPage) {
+      this.$nextTick(() => {
+        this.setCachedKey(route)
+      })
+      this.addListener()
+    }
+  },
+  mounted () {
+    this.correctPageMinHeight(-this.tabsOffset)
+  },
+  beforeDestroy () {
+    this.removeListener()
+    this.correctPageMinHeight(this.tabsOffset)
+  },
+  watch: {
+    '$router.options.routes': function (val) {
+      this.excludeKeys = []
+      this.loadCacheConfig(val)
+    },
+    '$route': function (newRoute) {
+      this.activePage = newRoute.path
+      const page = this.pageList.find(item => item.path === newRoute.path)
+      if (!this.multiPage) {
+        this.pageList = [this.createPage(newRoute)]
+      } else if (page) {
+        page.fullPath = newRoute.fullPath
+      } else if (!page) {
+        this.pageList.push(this.createPage(newRoute))
+      }
+      if (this.multiPage) {
+        this.$nextTick(() => {
+          this.setCachedKey(newRoute)
+        })
+      }
+    },
+    'multiPage': function (newVal) {
+      if (!newVal) {
+        this.pageList = [this.createPage(this.$route)]
+        this.removeListener()
+      } else {
+        this.addListener()
+      }
+    },
+    tabsOffset (newVal, oldVal) {
+      this.correctPageMinHeight(oldVal - newVal)
+    }
+  },
+  methods: {
+    changePage (key) {
+      this.activePage = key
+      const page = this.pageList.find(item => item.path === key)
+      this.$router.push(page.fullPath)
+    },
+    remove (key, next) {
+      this.setSingle({ path: key, delete: true })
+      if (this.pageList.length === 1) {
+        return this.$message.warning(this.$t('warn'))
+      }
+      // 清除缓存
+      let index = this.pageList.findIndex(item => item.path === key)
+      this.clearCaches = this.pageList.splice(index, 1).map(page => page.cachedKey)
+      if (next) {
+        this.$router.push(next)
+      } else if (key === this.activePage) {
+        index = index >= this.pageList.length ? this.pageList.length - 1 : index
+        this.activePage = this.pageList[index].path
+        this.$router.push(this.activePage)
+      }
+    },
+    refresh (key, page) {
+      page = page || this.pageList.find(item => item.path === key)
+      page.loading = true
+      this.clearCache(page)
+      if (key === this.activePage) {
+        // eslint-disable-next-line no-return-assign
+        this.reloadContent(() => page.loading = false)
+      } else {
+        // 其实刷新很快，加这个延迟纯粹为了 loading 状态多展示一会儿，让用户感知刷新这一过程
+        // eslint-disable-next-line no-return-assign
+        setTimeout(() => page.loading = false, 500)
+      }
+    },
+    onContextmenu (pageKey, e) {
+      if (pageKey) {
+        e.preventDefault()
+        e.meta = pageKey
+        this.menuVisible = true
+      }
+    },
+    onMenuSelect (key, target, pageKey) {
+      switch (key) {
+        case '1': this.closeLeft(pageKey); break
+        case '2': this.closeRight(pageKey); break
+        case '3': this.closeOthers(pageKey); break
+        case '4': this.refresh(pageKey); break
+        default: break
+      }
+    },
+    closeOthers (pageKey) {
+      // 清除缓存
+      const clearPages = this.pageList.filter(item => item.path !== pageKey && !item.unclose)
+      this.clearCaches = clearPages.map(item => item.cachedKey)
+      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
+      // 判断跳转
+      if (this.activePage != pageKey) {
+        this.activePage = pageKey
+        this.$router.push(this.activePage)
+      }
+    },
+    closeLeft (pageKey) {
+      const index = this.pageList.findIndex(item => item.path === pageKey)
+      // 清除缓存
+      const clearPages = this.pageList.filter((item, i) => i < index && !item.unclose)
+      this.clearCaches = clearPages.map(item => item.cachedKey)
+      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
+      // 判断跳转
+      if (!this.pageList.find(item => item.path === this.activePage)) {
+        this.activePage = pageKey
+        this.$router.push(this.activePage)
+      }
+    },
+    closeRight (pageKey) {
+      // 清除缓存
+      const index = this.pageList.findIndex(item => item.path === pageKey)
+      const clearPages = this.pageList.filter((item, i) => i > index && !item.unclose)
+      this.clearCaches = clearPages.map(item => item.cachedKey)
+      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
+      // 判断跳转
+      if (!this.pageList.find(item => item.path === this.activePage)) {
+        this.activePage = pageKey
+        this.$router.push(this.activePage)
+      }
+    },
+    clearCache (page) {
+      page._init_ = false
+      this.clearCaches = [page.cachedKey]
+    },
+    reloadContent (onLoaded) {
+      this.refreshing = true
+      setTimeout(() => {
+        this.refreshing = false
+        this.$nextTick(() => {
+          this.setCachedKey(this.$route)
+          if (typeof onLoaded === 'function') {
+            onLoaded.apply(this, [])
+          }
+        })
+      }, 200)
+    },
+    pageName (page) {
+      return this.$t(getI18nKey(page.keyPath))
+    },
+    /**
+     * 添加监听器
+     */
+    addListener () {
+      window.addEventListener('page:close', this.closePageListener)
+      window.addEventListener('page:refresh', this.refreshPageListener)
+      window.addEventListener('unload', this.unloadListener)
+    },
+    /**
+     * 移出监听器
+     */
+    removeListener () {
+      window.removeEventListener('page:close', this.closePageListener)
+      window.removeEventListener('page:refresh', this.refreshPageListener)
+      window.removeEventListener('unload', this.unloadListener)
+    },
+    /**
+     * 页签关闭事件监听
+     * @param event 页签关闭事件
+     */
+    closePageListener (event) {
+      const { closeRoute, nextRoute } = event.detail
+      const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
+      const path = closePath && closePath.split('?')[0]
+      this.remove(path, nextRoute)
+    },
+    /**
+     * 页面刷新事件监听
+     * @param event 页签关闭事件
+     */
+    refreshPageListener (event) {
+      const { pageKey } = event.detail
+      const path = pageKey && pageKey.split('?')[0]
+      this.refresh(path)
+    },
+    /**
+     * 页面 unload 事件监听器，添加页签到 session 缓存，用于刷新时保留页签
+     */
+    unloadListener () {
+      const tabs = this.pageList.map(item => ({ ...item, _init_: false }))
+      sessionStorage.setItem(process.env.VUE_APP_TBAS_KEY, JSON.stringify(tabs))
+    },
+    createPage (route) {
+      return {
+        keyPath: route.matched[route.matched.length - 1].path,
+        fullPath: route.fullPath,
+        loading: false,
+        path: route.path,
+        title: route.meta && route.meta.page && route.meta.page.title,
+        unclose: route.meta && route.meta.page && (route.meta.page.closable === false)
+      }
+    },
+    /**
+     * 设置页面缓存的key
+     * @param route 页面对应的路由
+     */
+    setCachedKey (route) {
+      const page = this.pageList.find(item => item.path === route.path)
+      page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
+      if (!page._init_) {
+        const vnode = this.$refs.tabContent.$vnode
+        page.cachedKey = vnode.key + vnode.componentOptions.Ctor.cid
+        page._init_ = true
+      }
+    },
+    /**
+     * 加载缓存的 tabs
+     */
+    loadCachedTabs () {
+      const cachedTabsStr = sessionStorage.getItem(process.env.VUE_APP_TBAS_KEY)
+      if (cachedTabsStr) {
+        try {
+          // 加载缓存的单页面
+          const allCachedPath = JSON.parse(cachedTabsStr).map(str => { return str.fullPath })
+          this.allSinglePages.map(item => {
+            if (allCachedPath.includes(item.fullPath)) {
+              // 如果缓存中有单页面  加载到 state.single
+              this.setSingle(item)
+            }
+          })
+          const cachedTabs = JSON.parse(cachedTabsStr)
+          if (cachedTabs.length > 0) {
+            this.pageList = cachedTabs
+          }
+        } catch (e) {
+          console.warn('failed to load cached tabs, got exception:', e)
+        } finally {
+          sessionStorage.removeItem(process.env.VUE_APP_TBAS_KEY)
+        }
+      }
+    },
+    loadCacheConfig (routes, pCache = true) {
+      routes.forEach(item => {
+        const cacheAble = item.meta?.page?.cacheAble ?? pCache ?? true
+        if (item.meta && item.meta.singlePage) {
+          // 找到所有单页面添加到 allSinglePages 中
+          this.allSinglePages.push(item)
+        }
+        if (!cacheAble) {
+          this.excludeKeys.push(new RegExp(`${item.path}\\d+$`))
+        }
+        if (item.children) {
+          this.loadCacheConfig(item.children, cacheAble)
+        }
+      })
+    },
+    ...mapMutations('setting', ['correctPageMinHeight']),
+    ...mapMutations('account', ['setSingle'])
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .tabs-view{
+    margin: -16px auto 8px;
+    &.head.fixed{
+      max-width: 1400px;
+    }
+  }
+  .tabs-view-content{
+    position: relative;
+    &.head.fixed{
+      width: 1400px;
+      margin: 0 auto;
+    }
+  }
+</style>

package/src/layouts/tabs/i18n.js

@@ -0,0 +1,25 @@
+module.exports = {
+  messages: {
+    CN: {
+      closeLeft: '关闭左侧',
+      closeRight: '关闭右侧',
+      closeOthers: '关闭其它',
+      refresh: '刷新页面',
+      warn: '这是最后一页，不能再关闭了'
+    },
+    HK: {
+      closeLeft: '關閉左側',
+      closeRight: '關閉右側',
+      closeOthers: '關閉其它',
+      refresh: '刷新頁面',
+      warn: '這是最後一頁，不能再關閉了'
+    },
+    US: {
+      closeLeft: 'close left',
+      closeRight: 'close right',
+      closeOthers: 'close others',
+      refresh: 'refresh the page',
+      warn: 'This is the last page, you can\'t close it'
+    }
+  }
+}

package/src/layouts/tabs/index.js

@@ -0,0 +1,2 @@
+import TabsView from './TabsView'
+export default TabsView

package/src/main.js

@@ -1,12 +1,20 @@
 import Vue from 'vue'
-// import App from './App.vue'
-import Antd from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.css';
-import 'index'
-Vue.config.productionTip = false
+import App from './App.vue'
+import Router from 'vue-router'
+import Vuex from 'vuex'
+import '@vue2-client/mock'
+import { routerOptions, modules, i18n, message, bootstrap } from '../index'
 
-Vue.use(Antd);
+Vue.use(Router)
+Vue.use(Vuex)
+// 创建router store
+const store = new Vuex.Store({ modules })
+const router = new Router(routerOptions)
 
+bootstrap({ router, store, i18n, message })
 new Vue({
-  render: h => h(App),
+  router,
+  store,
+  i18n,
+  render: h => h(App)
 }).$mount('#app')

package/src/mock/common/activityData.js

@@ -0,0 +1,32 @@
+import { users, groups } from './index'
+
+const events = [
+  {
+    type: 0,
+    event: '八月迭代'
+  },
+  {
+    type: 1,
+    event: '留言'
+  },
+  {
+    type: 2,
+    event: '项目进展'
+  }
+]
+
+const activities = users.map((user, index) => {
+  return {
+    user: Object.assign({}, user, { group: groups[user.groupId] }),
+    activity: events[index % events.length],
+    template: ''
+  }
+})
+
+const templates = [
+  (user, activity) => { return `${user.name} 在 <a >${user.group}</a> 新建项目 <a>${activity.event}</a>` },
+  (user, activity) => { return `${user.name} 在 <a >${user.group}</a> 发布了 <a>${activity.event}</a>` },
+  (user, activity) => { return `${user.name} 将 <a >${activity.event}</a> 更新至已发布状态` }
+]
+
+export { activities, templates }