imatrix-ui 0.2.6-up → 0.2.7-up

package/src/views/layout/NewLayout.vue

@@ -1,18 +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: 'EmptyLayout',
-  components: {
-    AppMain,
-  },
-}
-</script>
+<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

@@ -1,39 +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>
+<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

@@ -1,158 +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
-		},
-		/**
-		 * Vue.prototype._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
-		},
-		/**
-		 * Vue.prototype._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>
+<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
+		},
+		/**
+		 * Vue.prototype._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
+		},
+		/**
+		 * Vue.prototype._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>

package/src/views/layout/components/Menubar/Item.vue

@@ -1,79 +1,79 @@
-<script lang="jsx">
-import { defineComponent, h } from 'vue'
-import SvgIcon from '../../../svg-icon/src/svg-icon.vue'
-export default defineComponent ({
-	name: 'MenuItem',
-	functional: true,
-	props: {
-		icon: {
-			type: String,
-			default: ''
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		hasChildren: {
-			type: Boolean,
-			default: false
-		},
-		isRoot: {
-			type: Boolean,
-			default: false
-		}
-	},
-	render(props) {
-		const { title, hasChildren, isRoot } = props
-		let icon = props.icon
-		const vnodes = []
-		if (icon) {
-			if (icon.indexOf('fa-') === 0) {
-				// 表示以“fa-”开头，使用font-awesome中的图标
-				icon = 'fa ' + icon
-				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h('i',{class:icon})]))
-				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon}/></div>)
-			} else if (icon.indexOf('svg-') === 0) {
-				icon = icon.substring(icon.indexOf('svg-') + 4)
-				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h(SvgIcon,{'icon-class':icon})]))
-				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><svg-icon icon-class={icon}/></div>)
-			} else {
-				icon += ' svg-icon'
-				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h('i',{class:icon})]))
-				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon} /></div>)
-			}
-		}
-
-		if (title) {
-			let width = '130px'
-			if (hasChildren) {
-				// 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
-				width = '100px'
-			}
-			if (isRoot) {
-				// 是否是根目录，没有子菜单时
-				vnodes.push(h('div', {style:{display:'inline-block'}},
-						[h('div',{
-							title:title,
-							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
-						}, title)])
-				)
-				// vnodes.push(<div style='display: inline-block'>
-				//   <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
-				// </div>)
-			} else {
-				// 有子菜单时
-				vnodes.push(h('div', {style:{display:'inline-block'}},
-						[h('div',{
-							title:title,
-							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
-						}, title)])
-				)
-				// vnodes.push(<div slot='title' style='display: inline-block'>
-				//   <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
-				// </div>)
-			}
-		}
-		return vnodes
-	}
-})
-</script>
+<script lang="jsx">
+import { defineComponent, h } from 'vue'
+import SvgIcon from '../../../svg-icon/src/svg-icon.vue'
+export default defineComponent ({
+	name: 'MenuItem',
+	functional: true,
+	props: {
+		icon: {
+			type: String,
+			default: ''
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		hasChildren: {
+			type: Boolean,
+			default: false
+		},
+		isRoot: {
+			type: Boolean,
+			default: false
+		}
+	},
+	render(props) {
+		const { title, hasChildren, isRoot } = props
+		let icon = props.icon
+		const vnodes = []
+		if (icon) {
+			if (icon.indexOf('fa-') === 0) {
+				// 表示以“fa-”开头，使用font-awesome中的图标
+				icon = 'fa ' + icon
+				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h('i',{class:icon})]))
+				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon}/></div>)
+			} else if (icon.indexOf('svg-') === 0) {
+				icon = icon.substring(icon.indexOf('svg-') + 4)
+				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h(SvgIcon,{'icon-class':icon})]))
+				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><svg-icon icon-class={icon}/></div>)
+			} else {
+				icon += ' svg-icon'
+				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h('i',{class:icon})]))
+				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon} /></div>)
+			}
+		}
+
+		if (title) {
+			let width = '130px'
+			if (hasChildren) {
+				// 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
+				width = '100px'
+			}
+			if (isRoot) {
+				// 是否是根目录，没有子菜单时
+				vnodes.push(h('div', {style:{display:'inline-block'}},
+						[h('div',{
+							title:title,
+							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+						}, title)])
+				)
+				// vnodes.push(<div style='display: inline-block'>
+				//   <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
+				// </div>)
+			} else {
+				// 有子菜单时
+				vnodes.push(h('div', {style:{display:'inline-block'}},
+						[h('div',{
+							title:title,
+							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+						}, title)])
+				)
+				// vnodes.push(<div slot='title' style='display: inline-block'>
+				//   <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
+				// </div>)
+			}
+		}
+		return vnodes
+	}
+})
+</script>

package/src/views/layout/components/Menubar/Link.vue

@@ -1,38 +1,38 @@
-<template>
-  <div>
-    <!-- eslint-disable vue/require-component-is-->
-    <!-- <a v-if="isExter" :href="to.path" target="_blank" rel="noopener">
-          <slot />
-        </a> -->
-
-    <router-link v-if="!isOpenNewTab" :to="to">
-      <slot />
-    </router-link>
-    <div v-else>
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    to: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    const isExter = this.to.isExternal
-    const openWay = this.to.openWay
-    let isOpenNewTab = false
-    if (openWay && openWay === 'NEW_PAGE_OPEN') {
-      isOpenNewTab = true
-    }
-    return {
-      isExter,
-      isOpenNewTab,
-    }
-  },
-}
-</script>
+<template>
+  <div>
+    <!-- eslint-disable vue/require-component-is-->
+    <!-- <a v-if="isExter" :href="to.path" target="_blank" rel="noopener">
+          <slot />
+        </a> -->
+
+    <router-link v-if="!isOpenNewTab" :to="to">
+      <slot />
+    </router-link>
+    <div v-else>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    to: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    const isExter = this.to.isExternal
+    const openWay = this.to.openWay
+    let isOpenNewTab = false
+    if (openWay && openWay === 'NEW_PAGE_OPEN') {
+      isOpenNewTab = true
+    }
+    return {
+      isExter,
+      isOpenNewTab,
+    }
+  },
+}
+</script>