agilebuilder-ui 1.0.0

package/src/views/error-page/401.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="errPage-container">
+    <el-button :icon="ElIconArrowLeft" class="pan-back-btn" @click="back">
+      返回
+    </el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">Oops!</h1>
+        gif来源<a href="https://zh.airbnb.com/" target="_blank"> airbnb </a>
+        页面
+        <h2>你没有权限去该页面</h2>
+        <h6>如有不满请联系你领导</h6>
+        <ul class="list-unstyled">
+          <li>或者你可以去:</li>
+          <li class="link-type">
+            <router-link to="/dashboard"> 回首页 </router-link>
+          </li>
+          <li class="link-type">
+            <a href="https://www.taobao.com/"> 随便看看 </a>
+          </li>
+          <li>
+            <a href="#" @click.prevent="dialogVisible = true"> 点我看图 </a>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img
+          :src="errGif"
+          width="313"
+          height="428"
+          alt="Girl has dropped her ice cream."
+        />
+      </el-col>
+    </el-row>
+    <el-dialog v-model="dialogVisible" title="随便看">
+      <img :src="ewizardClap" class="pan-img" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ArrowLeft as ElIconArrowLeft } from '@element-plus/icons-vue'
+import errGif from '../../assets/401/401.gif'
+
+export default {
+  data() {
+    return {
+      errGif: errGif + '?' + +new Date(),
+      ewizardClap:
+        'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
+      dialogVisible: false,
+      ElIconArrowLeft,
+    }
+  },
+  name: 'Page401',
+  methods: {
+    back() {
+      if (this.$route.query.noGoBack) {
+        this.$router.push({ path: '/dashboard' })
+      } else {
+        this.$router.go(-1)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.errPage-container {
+  width: 800px;
+  max-width: 100%;
+  margin: 100px auto;
+  .pan-back-btn {
+    background: #008489;
+    color: #fff;
+    border: none !important;
+  }
+  .pan-gif {
+    margin: 0 auto;
+    display: block;
+  }
+  .pan-img {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+  }
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+  .list-unstyled {
+    font-size: 14px;
+    li {
+      padding-bottom: 5px;
+    }
+    a {
+      color: #008489;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

package/src/views/error-page/404.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="../../assets/404/404.png" alt="404" />
+        <img
+          class="pic-404__child left"
+          src="../../assets/404/404-cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child mid"
+          src="../../assets/404/404-cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child right"
+          src="../../assets/404/404-cloud.png"
+          alt="404"
+        />
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">
+                OOPS!
+              </div>
+              <div class="bullshit__info">
+                版权所有
+                <a class="link-type" href="https://wallstreetcn.com" target="_blank">
+                  华尔街见闻
+                </a>
+              </div> -->
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">请检查您输入的网址是否正确</div>
+        <!-- <a href="" class="bullshit__return-home">
+                返回首页
+              </a> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return '页面不存在'
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.wscn-http404-container {
+  transform: translate(-50%, -50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

package/src/views/layout/EmptyLayout.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

package/src/views/layout/Layout.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
+    <sidebar class="sidebar-container" />
+    <div class="main-container">
+      <breadcrumb v-if="showMenuRoute" />
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Sidebar, AppMain, Breadcrumb } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { isShowMenuRoute } from '../../../src/utils/common-util'
+
+export default {
+  name: 'Layout',
+  components: {
+    Sidebar,
+    AppMain,
+    Breadcrumb,
+  },
+  mixins: [ResizeMixin],
+  data() {
+    // 是否显示菜单路径，默认是不显示
+    const showMenuRoute = isShowMenuRoute()
+    return {
+      showMenuRoute,
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile',
+      }
+    },
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSidebar', { withoutAnimation: false })
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+@import '../../styles/mixin.scss';
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+</style>

package/src/views/layout/NewLayout.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="app-wrapper">
+    <div class="tab-main-container">
+      <!-- <tab-content/> -->
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppMain } from './components'
+export default {
+  name: 'NewLayout',
+  components: {
+    AppMain,
+  },
+}
+</script>

package/src/views/layout/components/AppMain.vue

@@ -0,0 +1,39 @@
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component }">
+      <transition name="fade-transform" mode="out-in">
+        <component :is="Component"></component>
+      </transition>
+    </router-view>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+
+    // 解决的问题如下：
+    // 改变路由参数（page?pageCode=xx）去获取对应数据，然后渲染到页面（用的是同一套组件），
+    // 问题来了：当切换菜单时，数据并没有更新，后来看了Vue-router官网，
+    // 有这么一句话：提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。
+    // 因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用
+    key() {
+      return this.$route.name !== undefined
+        ? this.$route.name + +new Date()
+        : this.$route + +new Date()
+    },
+  },
+}
+</script>
+
+<style scoped>
+.app-main {
+  height: calc(100vh - 10px);
+  position: relative;
+  overflow: hidden;
+}
+</style>

package/src/views/layout/components/Breadcrumb/index.vue

@@ -0,0 +1,158 @@
+<template>
+	<el-breadcrumb class="app-breadcrumb" separator=">">
+		<transition-group name="breadcrumb" tag="span">
+			<el-breadcrumb-item
+					v-for="(item, index) in levelListWithTitle"
+					:key="item.path + '-' + index"
+			>
+        <span class="no-redirect">
+          {{ $t(item.meta.title) }}
+        </span>
+			</el-breadcrumb-item>
+		</transition-group>
+	</el-breadcrumb>
+</template>
+
+<script>
+import {getLanguageWithLocale} from '../../../../utils/util'
+import * as pathToRegexp from 'path-to-regexp'
+import Cookies from 'js-cookie'
+
+export default {
+	name: 'Breadcrumb',
+	data() {
+		return {
+			levelList: null,
+		}
+	},
+	computed: {
+		levelListWithTitle() {
+			return this.levelList.filter(
+					(item) => item.meta.title !== undefined && item.meta.title !== null
+			)
+		},
+	},
+	watch: {
+		$route() {
+			this.getBreadcrumb()
+		},
+	},
+	created() {
+		this.getBreadcrumb()
+	},
+	methods: {
+		getBreadcrumb() {
+			const {params} = this.$route
+			console.log('this.$route.matched==', this.$route.matched)
+			let matched = this.$route.matched.filter((item) => {
+				if (item.name) {
+					// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+					var toPath = pathToRegexp.compile(item.path)
+					item.path = toPath(params)
+					return true
+				}
+			})
+			// const first = matched[0]
+			if (matched) {
+				let systemName
+				const language = getLanguageWithLocale()
+				const systemNameObj =
+						window.$vueApp.config.globalProperties.systemNameObj
+				if (systemNameObj) {
+					systemName = systemNameObj[language]
+				}
+				matched = [
+					{path: '/', redirect: 'noredirect', meta: {title: systemName}},
+				].concat(matched)
+				const cookieMenu = Cookies.get('selectMenu')
+				const leftSelectMenu =
+						window.$vueApp.config.globalProperties._selectMenu
+				let selectMenu
+				if (leftSelectMenu) {
+					selectMenu = leftSelectMenu
+				} else if (cookieMenu) {
+					selectMenu = cookieMenu
+				}
+				if (selectMenu) {
+					// 解决表单页面无法获得列表路由
+					const path = selectMenu.substring(0, selectMenu.indexOf('~~'))
+					const title = selectMenu.substring(selectMenu.indexOf('~~') + 2)
+					if (matched && matched.length > 0) {
+						const lastRoute = matched[matched.length - 1]
+						if (this.isShouldConcatLastMenu(title, path, lastRoute)) {
+							matched.push({path: path, meta: {title: title}})
+						}
+					} else {
+						matched.push({path: path, meta: {title: title}})
+					}
+				}
+			}
+			this.levelList = matched
+		},
+		// 新建页面时会把列表页面路由刷没，导致菜单路径缺少最后一层菜单问题
+		isShouldConcatLastMenu(title, path, lastRoute) {
+			if (
+					this.isTitleNotEqual(title, lastRoute) &&
+					this.isPathNotEqual(path, lastRoute)
+			) {
+				// title和path都不同，表示是不同的页面，需要添加到matched集合中
+				return true
+			}
+			return false
+		},
+		/**
+		 * window.$vueApp.config.globalProperties._selectMenu的菜单标题是否与最后的路由页面标题一致
+		 * 返回true表示不一样，返回false表示一样
+		 */
+		isTitleNotEqual(title, lastRoute) {
+			if (
+					title &&
+					lastRoute.meta &&
+					title !== lastRoute.meta.title &&
+					title !== this.$t(lastRoute.meta.title)
+			) {
+				// 表示title不一样，当前可能是在表单页面，需要添加到matched集合中
+				return true
+			}
+			return false
+		},
+		/**
+		 * window.$vueApp.config.globalProperties._selectMenu的菜单的访问路径是否与最后的路由页面的路径一致
+		 * 返回true表示不一样，返回false表示一样
+		 */
+		isPathNotEqual(path, lastRoute) {
+			if (path && lastRoute.path && path !== lastRoute.path) {
+				// 表示path不一样，当前可能是在表单页面，需要添加到matched集合中
+				return true
+			}
+			return false
+		},
+	},
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+	background-color: #eee;
+	width: 100%;
+	border: 1px solid #ccc;
+	bottom: 2px;
+	margin-left: 2px;
+	display: inline-block;
+	font-size: 14px;
+	line-height: 40px;
+
+	.no-redirect {
+		color: #333;
+		cursor: text;
+	}
+
+	.el-breadcrumb__item {
+		padding-left: 5px;
+	}
+
+	.el-breadcrumb__separator {
+		margin: 0 5px;
+	}
+}
+</style>