- GVT UI Components Package @1.1.30
-
GVT UI Components Package @1.2.9 (登录语言选择)
-
GVT UI Components Package @1.2.8 (登录无语言选择)
npm install gvt-hero --save
npm update gvt-hero
-
hero-layout 布局组件
-
hero-icon 图标组件
-
hero-login 登录视图组件
-
hero-sidebar 请勿单独使用
-
hero-header 请勿单独使用
-
hero-content 请勿单独使用
- 方法一
import Vue from "vue"
import HeroUI from "gvt-hero"
Vue.use(HeroUI)
- 方法二
<script src="./node_modules/gvt-hero/dist/gvt-hero.js"></script>
侧边栏进行跨系统跳转时, 会在 URL
中拼接 token
、lang
参数, 例如(假设当前语种为 en-US
):
-
因此各个子系统, 需要在
main.js
主入口函数中, 接收并缓存语种参数:lang
、JWT参数:token
-
gvt-header
组件在切换语言时, 会更新localStorage
中的GVT-I18N-LANG
为zh-CN
, 但是url
中lang
参数扔为旧值en-US
-
因此需要在
beforEach()
中我们需要手动移除lang
参数, 为保证url
的美观, 同时移除token
参数
const cleanLangAndTokenQuery = (to, from , next) => {
to.query.token && delete to.query.token
if(to.query.lang) {
delete to.query.lang
if(from.path === to.path) {
iView.LoadingBar.finish()
}
next({
// 替换当前路由地址
replace: true,
path: to.path,
params: to.params,
query: to.query
});
} else {
next();
}
}
router.beforEach(to, from , next) => {
if(to.query.lang) {
// query.lang 存在时, 更新本地 lang
Lang.setLang(to.query.lang)
} else {
// 若 query.lang 不存在, 且本地未缓存语种时, 默认将其置为 "zh-CN"
!Lang.getLang() && Lang.setLang()
}
// 初始化 vue-i18n locale
setI18nLanguage(Lang.getLang())
// query.token 存在时, 更新本地 jwt
if(to.query.token) {
Auth.setToken(to.query.token)
}
// ... 其他代码
// 在所有调用 next() 处, 将其替换为 cleanLangAndTokenQuery()
// 例如:
if(Auth.getToken()) {
if(to.path === "/login" || to.path === "/") {
next({path: "/console"});
iView.LoadingBar.finish();
} else {
if(store.getters.user.id === ""){
store.dispatch("FetchUserData").then(apps => {
store.dispatch("InitPermissionByApps", apps).then(() => {
cleanLangAndTokenQuery(to, from, next)
})
}).catch(error => {
Auth.removeToken();
next({ path: `/${error.redirect}` });
iView.LoadingBar.finish();
})
}else{
cleanLangAndTokenQuery(to, from, next)
}
}
}else {
if(accessRoutePath.indexOf(to.path) > -1) {
cleanLangAndTokenQuery(to, from, next)
}else {
next({path: "/login"});
iView.LoadingBar.finish();
}
}
}
// Lang Module
const prefixLang = "GVT_I18N_LANG";
class Lang {
constructor() {}
static setLang(lang = "zh-CN") {
return localStorage.setItem(prefixLang, lang);
}
static getLang() {
return localStorage.getItem(prefixLang);
}
static removeLang() {
return localStorage.removeItem(prefixLang);
}
}
export default Lang;
// Auth Module
const prefixToken = "GVT_AUTH_TOKEN";
class Auth {
constructor() {}
static setToken(token) {
return localStorage.setItem(prefixToken, token);
}
static getToken() {
return localStorage.getItem(prefixToken);
}
static removeToken() {
return localStorage.removeItem(prefixToken);
}
static logOut() {
this.removeToken();
window.location.hash = "/login";
}
}
export default Auth;
组件会自动获取当前侧边栏所匹配导航的 文本
和 url
, 并将其按层级关系添加至面包屑中, 例如:
-
若当前为单级菜单点击, 组件会获取其
文本
(如: 首页), 而后会获取其url
(如: http://example.com/), 而后显示在面包屑中, 此时面包屑显示: 首页 -
若当前为二级菜单点击, 组件会获取一级二级菜单, 参照第一步获取相应
文本
及url
, 而后显示在面包屑中, 此时面包屑显示: 应用管理 > 产品管理
// 产品管理 路由对象
const router = {
path: "product-manage",
name: "product-manage",
component: () => import("@/components/container/ContainerBase"),
redirect: { name: "product-list" },
children: [
{
path: "/",
name: "product-list",
meta:{ title: "产品列表", redirect: true },
component: () => import("@/views/admin/application-manage/product-manage/List")
},
{
path: "create",
name: "product-create",
meta:{ title: "产品创建", redirect: true },
component: () => import("@/views/admin/application-manage/product-manage/CreateOrUpdate")
},
{
path: "edit/:id",
name: "product-edit",
meta:{ title: "产品编辑", redirect: true },
component: () => import("@/views/admin/application-manage/product-manage/CreateOrUpdate")
}
]
}
组件会根据 route-matched
自行解析出 meta: {redirect: true}
的路由, 并将其拼接在侧边栏数据后, 若当前 path
为: http://localhost:9090/#/application-manage/product-manage
此时 产品列表
包含 meta: {redirect: true}
, 那么它将被添加至面包屑中, 此时面包屑显示: 应用管理 > 产品管理 > 产品列表
若将 产品列表
只为 meta: {redirect: false}
或不声明 redirect
键, 如: meta: {}
, 那么它将不被添加至面包屑中, 此时面包屑显示: 应用管理 > 产品管理
props | 说明 | 数据类型 | 备注 | 示例 |
---|---|---|---|---|
logo | 产品图片 | String | 侧边栏菜单顶部 LOGO 显示, 大部分情况无需传入 | "//47.75.105.17:22124/group1/M00/01/07/wKi5SlvrjQCAANGMAAAR2Ug-7l4909.png" |
locale | 语种 | String | required & ["zh-CN", "en-US"] | "zh-CN" |
username | 用户名称 | String | 通过 vuex getters 获取 | "Gvt Hero" |
appTarget | 产品编码 | String | 兼容 APOS 只显示自身产品数据, 非特殊情况无需传递 | "apos-tenant" |
disTranslation | 是否禁用语言切换 | Boolean | 默认显示语言切换框 | true |
menu-data | 侧边栏菜单数据 | Array | 通过 getUserRelatedData() 获取 | |
route-matched | vue-router 匹配集合 | Array | 通过 this.$route.matched 获取 | |
menu-info | 个人信息 | Boolean | 显示"个人信息"按钮, 默认 false | |
menu-pwd | 修改密码 | Boolean | 显示"修改密码"按钮, 默认 false |
events | 说明 |
---|---|
user-info-click | 用户信息点击 |
user-pwd-click | 修改密码点击 |
user-logout-click | 注销按钮点击 |
# hero-layout 集成了 hero-header, hero-sidebar, hero-content
# 使用 hero-layout, 快速构建子系统的布局容器
# 你也可以参照 ./src/views/common/layouts.vue
# 以下示例是标准使用方法
# 若要禁用语言切换功能, 声明 dis-translation 即可
touch layouts.vue
<template>
<hero-layout
:username="username"
:menu-data="menuData"
:route-matched="routeMatched"
:locale="locale"
menu-info
menu-pwd
dis-translation
@user-info-click="userinfo"
@user-pwd-click="userpwd"
@user-logout-click="userlogout">
<div slot="content">
<router-view></router-view>
</div>
</hero-layout>
</template>
import Lang from "@/utils/lang"
export default {
data() {
return {
menuData: [],
routeMatched: [],
username: "Gvt Hero",
locale: Lang.getLang()
};
},
watch: {
$route() {
this.routeMatched = this.$route.matched;
}
},
created() {
this.routeMatched = this.$route.matched;
},
mounted() {
this.$nextTick(() => {
this.fetchMenus();
})
},
methods: {
// 拉取菜单模拟数据
fetchMenus() {
fetch("/static/mock/sidebar.json")
.then(response => {
return response.json();
})
.then(menu => {
setTimeout(() => {
this.menuData = menu;
}, 500);
});
},
userinfo() {
alert("userinfo");
},
userpwd() {
alert("userpwd");
},
userlogout() {
alert("userlogout");
}
}
};
集成了vue-svgicon
, 请查看 vue-svgicon 相关文档
# 子系统创建视图组件, 再使用 hero-login, 即可快速构建登录视图
touch Login.vue
<template>
<hero-login @login="submit" :locale="locale"></hero-login>
</template>
import Lang from "@/utils/lang"
export default {
data() {
return {
locale: Lang.getLang()
}
},
methods: {
submit(user) {
// user: {username: "", password: ""}
// 你需要自行 md5 password
// 例如:
// const params = Object.assign({}, user, {
// password: md5(user.password)
// });
// login(params)
// .then(response => {
// const jwt = response.data.token;
// Auth.setToken(jwt);
// this.$router.push("/");
// })
// .catch(error => {
// this.$Message.error("账户或密码错误");
// });
}
}
}
props | 说明 | 数据类型 | 示例 |
---|---|---|---|
code | 视图代码,默认 "404", 只提供"403","404","500" | String | "403" 、"404"、"500" |
# 快速构建错误视图页
touch 404.vue
<template>
<hero-error :locale="locale"></hero-error>
</template>
import Lang from "@/utils/lang"
export default {
name: "error-404",
data() {
return {
locale: Lang.getLang()
}
}
};