gvt-hero-test v1.3.0

gvt-hero

无国际化

• 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):

http://localhost:9090/#/user-manage/user-list?lang=en-US&token=eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwidWlkIjoiMSIsInVzZXJuYW1lIjoiYWRtaW4iLCJ0eXBlIjoiMCIsInN5c3RlbSI6MSwiZXhwIjoxNTUyMTEyNTQ4fQ.cbaPqFhI8mVLLKjdjZn-N9_faz_L7iMV_BuhrJU3mOaY6Luu4YH-U2M1bd_TjPGHY-xAr1U6APFXKxuTtwb5XybMrHdhHFQTDgMJtLbHxf2qvVcf-1XD7yYRM7gdHmyQtXNZGrGhsHlfHBL4YIzD-VNxnfM9nR2h6HaWbkMHBGQ

• 因此各个子系统, 需要在 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 & Auth 工具模块

// 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, 并将其按层级关系添加至面包屑中, 例如:

1. 若当前为单级菜单点击, 组件会获取其 文本 (如: 首页), 而后会获取其 url (如: http://example.com/), 而后显示在面包屑中, 此时面包屑显示: 首页

2. 若当前为二级菜单点击, 组件会获取一级二级菜单, 参照第一步获取相应 文本 及 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: {}, 那么它将不被添加至面包屑中, 此时面包屑显示: 应用管理 > 产品管理

hero-layout

Props

Events

# 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");
    }
  }
};

hero-icon

集成了js-svgicon, 请查看 vue-svgicon 相关文档

hero-login

# 子系统创建视图组件, 再使用 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("账户或密码错误");
      //   });
    }
  }
}

hero-error

props

# 快速构建错误视图页
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()
    }
  }
};