vue2-client 0.1.1 → 1.2.0

package/src/theme/default/color.less

@@ -0,0 +1,43 @@
+@import '~ant-design-vue/lib/style/themes/default';
+
+@gray-1: #ffffff;
+@gray-2: #fafafa;
+@gray-3: #f5f5f5;
+@gray-4: #f0f0f0;
+@gray-5: #d9d9d9;
+@gray-6: #bfbfbf;
+@gray-7: #8c8c8c;
+@gray-8: #595959;
+@gray-9: #434343;
+@gray-10: #262626;
+@gray-11: #1f1f1f;
+@gray-12: #141414;
+@gray-13: #000000;
+
+@primary-color: @primary-color;
+@success-color: @success-color;
+@warning-color: @warning-color;
+@error-color: @warning-color;
+
+@title-color: @heading-color;
+@text-color: @text-color;
+@text-color-second: @text-color-secondary;
+
+@layout-bg-color: @layout-body-background;
+@base-bg-color: @body-background;
+@hover-bg-color: rgba(0, 0, 0, 0.025);
+@border-color: @border-color-split;
+@shadow-color: @shadow-color;
+
+@text-color-inverse: @text-color-inverse;
+@hover-bg-color-light: @hover-bg-color;
+@hover-bg-color-dark: @primary-7;
+@hover-bg-color-night: rgba(255, 255, 255, 0.025);
+@header-bg-color-dark: @layout-header-background;
+
+@shadow-down: @shadow-1-down;
+@shadow-up: @shadow-1-up;
+@shadow-left: @shadow-1-left;
+@shadow-right: @shadow-1-right;
+
+@theme-list: light, dark, night;

package/src/theme/default/index.less

@@ -0,0 +1,3 @@
+@import "color";
+@import "style";
+@import "nprogress";

package/src/theme/default/nprogress.less

@@ -0,0 +1,76 @@
+@import '~ant-design-vue/lib/style/themes/default';
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: @primary-color;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: @primary-color;
+  border-left-color: @primary-color;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

package/src/theme/default/style.less

@@ -0,0 +1,33 @@
+.week-mode{
+  overflow: hidden;
+  filter: invert(80%);
+}
+.beauty-scroll{
+  scrollbar-color: @primary-color @primary-2;
+  scrollbar-width: thin;
+  -ms-overflow-style:none;
+  position: relative;
+  &::-webkit-scrollbar{
+    width: 3px;
+    height: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: @primary-color;
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
+    border-radius: 3px;
+    background: @primary-3;
+  }
+}
+.split-right{
+  &:not(:last-child) {
+    border-right: 1px solid rgba(98, 98, 98, 0.2);
+  }
+}
+.disabled{
+  cursor: not-allowed;
+  color: @disabled-color;
+  pointer-events: none;
+}

package/src/theme/global.less

@@ -0,0 +1,130 @@
+@import '~ant-design-vue/es/style/themes/default.less';
+
+html,
+body,
+#app, #root {
+  height: 100%;
+}
+
+.height-fill {
+  height: 100%;
+}
+
+.bg-white {
+  background: #fff;
+}
+
+.colorWeak {
+  filter: invert(80%);
+}
+
+.ant-layout.layout-basic {
+  height: 100vh;
+  min-height: 100vh;
+}
+
+canvas {
+  display: block;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+// 数据列表 样式
+.table-alert {
+  margin-bottom: 16px;
+}
+// 数据列表 操作
+.table-operator {
+  margin-bottom: 18px;
+
+  button {
+    margin-right: 8px;
+  }
+}
+
+// 导出组件选择框
+#export-checkbox-group .ant-checkbox-group-item {
+  box-sizing: border-box;
+  width: 33.33333333%;
+  min-height: 1px;
+  font-weight: 700;
+  margin: 2px 0;
+}
+
+// 数据列表 搜索条件 form表单样式
+.table-page-search-wrapper {
+
+  .ant-form-inline {
+    .ant-form-item {
+      display: flex;
+      margin: 12px 0;
+
+      .ant-form-item-control-wrapper {
+        flex: 1 1;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      > .ant-form-item-label {
+        line-height: 32px;
+        padding-right: 8px;
+        width: auto;
+        // 保留lable文本中的空格和换行
+        > label {
+          white-space: pre;
+        }
+      }
+      .ant-form-item-control {
+        height: 32px;
+        line-height: 32px;
+      }
+    }
+  }
+
+  // 日期选择框的样式
+  .ant-calendar-picker {
+    min-width: 0;
+    width: 100% !important;
+  }
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin: 12px 0;
+    float: right;
+    white-space: nowrap;
+    // 按钮间隔
+    .detailed-condition ~ button {
+      margin-left: 8px
+    }
+  }
+}
+
+.ant-layout-footer {
+  display: none;
+}
+
+@media (max-width: @screen-xs) {
+  .ant-table {
+    width: 100%;
+    overflow-x: auto;
+    &-thead > tr,
+    &-tbody > tr {
+      > th,
+      > td {
+        white-space: pre;
+        > span {
+          display: block;
+        }
+      }
+    }
+  }
+}

package/src/theme/index.less

@@ -0,0 +1,5 @@
+@import '~ant-design-vue/dist/antd.less';
+@import "default/index";
+@import "antd/index";
+@import "global.less";
+@import "reportTable.less";

package/src/theme/reportTable.less

@@ -0,0 +1,58 @@
+#ReportTableHome {
+  // 一个div宽高
+  @height: 30px;
+  @width: 100px;
+  // 边框颜色
+  @boder-color: #000;
+
+  position: relative;
+  display: flex;
+  justify-items: center;
+  #reportTable {
+    border-left: 1px solid @boder-color;
+    border-top: 1px solid @boder-color;
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      border-bottom: 1px solid @boder-color;
+      border-right: 1px solid @boder-color;
+    }
+  }
+  // 循环编写
+  .generBase(@i) when (@i <= 20) {
+    .hs(@i);
+    .ws(@i);
+    .ts(@i);
+    .ls(@i);
+    .generBase(@i+1);
+  }
+  .hs(@size) {
+    .h-@{size} {
+      height: @height * @size
+    }
+  }
+  .ws(@size) {
+    .w-@{size} {
+      width: @width * @size
+    }
+  }
+  .ts(@size) {
+    .t-@{size} {
+      top: @height * @size
+    }
+  }
+  .ls(@size) {
+    .l-@{size} {
+      left: @width * @size
+    }
+  }
+  .generBase(0);
+  .title {
+    background: #80add9;
+  }
+  .bold {
+    font-weight: bold;
+  }
+}

package/src/theme/theme.less

@@ -0,0 +1 @@
+@import "default/index";

package/src/utils/Objects.js

@@ -0,0 +1,25 @@
+/**
+ * 给对象注入属性
+ * @param keys 属性key数组， 如 keys = ['config', 'path'] , 则会给对象注入 object.config.path 的属性
+ * @param value 属性值
+ * @returns {Object}
+ */
+// eslint-disable-next-line no-extend-native
+Object.defineProperty(Object.prototype, 'assignProps', {
+  writable: false,
+  enumerable: false,
+  configurable: true,
+  value: function (keys, value) {
+    let props = this
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      if (i === keys.length - 1) {
+        props[key] = value
+      } else {
+        props[key] = props[key] === undefined ? {} : props[key]
+        props = props[key]
+      }
+    }
+    return this
+  }
+})

package/src/utils/authority-utils.js

@@ -0,0 +1,85 @@
+/**
+ * 判断是否有路由的权限
+ * @param authority 路由权限配置
+ * @param permissions 用户权限集合
+ * @returns {boolean|*}
+ */
+function hasPermission (authority, permissions) {
+  let required = '*'
+  if (typeof authority === 'string') {
+    required = authority
+  } else if (typeof authority === 'object') {
+    required = authority.permission
+  }
+  return required === '*' || (permissions && permissions.findIndex(item => item === required || item.id === required) !== -1)
+}
+
+/**
+ * 判断是否有路由需要的角色
+ * @param authority 路由权限配置
+ * @param roles 用户角色集合
+ */
+function hasRole (authority, roles) {
+  let required
+  if (typeof authority === 'object') {
+    required = authority.role
+  }
+  return authority === '*' || hasAnyRole(required, roles)
+}
+
+/**
+ * 判断是否有需要的任意一个角色
+ * @param required {String | Array[String]} 需要的角色，可以是单个角色或者一个角色数组
+ * @param roles 拥有的角色
+ * @returns {boolean}
+ */
+function hasAnyRole (required, roles) {
+  if (!required) {
+    return false
+  } else if (Array.isArray(required)) {
+    return roles.findIndex(role => {
+      return required.findIndex(item => item === role || item === role.id) !== -1
+    }) !== -1
+  } else {
+    return roles.findIndex(role => role === required || role.id === required) !== -1
+  }
+}
+
+/**
+ * 路由权限校验
+ * @param route 路由
+ * @param permissions 用户权限集合
+ * @param roles 用户角色集合
+ * @returns {boolean}
+ */
+function hasAuthority (route, permissions, roles) {
+  const authorities = [...route.meta.pAuthorities, route.meta.authority]
+  for (const authority of authorities) {
+    if (!hasPermission(authority, permissions) && !hasRole(authority, roles)) {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * 根据权限配置过滤菜单数据
+ * @param menuData
+ * @param permissions
+ * @param roles
+ */
+function filterMenu (menuData, permissions, roles) {
+  return menuData.filter(menu => {
+    if (menu.meta && menu.meta.invisible === undefined) {
+      if (!hasAuthority(menu, permissions, roles)) {
+        return false
+      }
+    }
+    if (menu.children && menu.children.length > 0) {
+      menu.children = filterMenu(menu.children, permissions, roles)
+    }
+    return true
+  })
+}
+
+export { filterMenu, hasAuthority }

package/src/utils/axios-interceptors.js

@@ -0,0 +1,82 @@
+import Cookie from 'js-cookie'
+// 401拦截
+const resp401 = {
+  /**
+   * 响应数据之前做点什么
+   * @param response 响应对象
+   * @param options 应用配置 包含: {router, i18n, store, message}
+   * @returns {*}
+   */
+  onFulfilled (response, options) {
+    const { message } = options
+    if (response.code === 401) {
+      message.error('无此权限')
+    }
+    return response
+  },
+  /**
+   * 响应出错时执行
+   * @param error 错误对象
+   * @param options 应用配置 包含: {router, i18n, store, message}
+   * @returns {Promise<never>}
+   */
+  onRejected (error, options) {
+    const { message } = options
+    const { response } = error
+    if (response.status === 401) {
+      message.error('无此权限')
+    }
+    return Promise.reject(error)
+  }
+}
+
+const resp403 = {
+  onFulfilled (response, options) {
+    const { message } = options
+    if (response.code === 403) {
+      message.error('请求被拒绝')
+    }
+    return response
+  },
+  onRejected (error, options) {
+    const { message } = options
+    const { response } = error
+    if (response.status === 403) {
+      message.error('请求被拒绝')
+    }
+    return Promise.reject(error)
+  }
+}
+
+const reqCommon = {
+  /**
+   * 发送请求之前做些什么
+   * @param config axios config
+   * @param options 应用配置 包含: {router, i18n, store, message}
+   * @returns {*}
+   */
+  onFulfilled (config, options) {
+    const { message } = options
+    const { url, xsrfCookieName } = config
+    if (url.indexOf('Login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
+      message.warning('认证 token 已过期，请重新登录')
+    }
+    return config
+  },
+  /**
+   * 请求出错时做点什么
+   * @param error 错误对象
+   * @param options 应用配置 包含: {router, i18n, store, message}
+   * @returns {Promise<never>}
+   */
+  onRejected (error, options) {
+    const { message } = options
+    message.error(error.message)
+    return Promise.reject(error)
+  }
+}
+
+export default {
+  request: [reqCommon], // 请求拦截
+  response: [resp401, resp403] // 响应拦截
+}

package/src/utils/colors.js

@@ -0,0 +1,103 @@
+const varyColor = require('webpack-theme-color-replacer/client/varyColor')
+const { generate } = require('@ant-design/colors')
+const { ADMIN, ANTD } = require('../config/default')
+const Config = require('../config')
+
+const themeMode = ADMIN.theme.mode
+
+// 获取 ant design 色系
+function getAntdColors (color, mode) {
+  const options = mode && (mode == themeMode.NIGHT) ? { theme: 'dark' } : undefined
+  return generate(color, options)
+}
+
+// 获取功能性颜色
+function getFunctionalColors (mode) {
+  const options = mode && (mode == themeMode.NIGHT) ? { theme: 'dark' } : undefined
+  let { success, warning, error } = ANTD.primary
+  const { success: s1, warning: w1, error: e1 } = Config.theme
+  success = success && s1
+  warning = success && w1
+  error = success && e1
+  const successColors = generate(success, options)
+  const warningColors = generate(warning, options)
+  const errorColors = generate(error, options)
+  return {
+    success: successColors,
+    warning: warningColors,
+    error: errorColors
+  }
+}
+
+// 获取菜单色系
+function getMenuColors (color, mode) {
+  if (mode == themeMode.NIGHT) {
+    return ANTD.primary.night.menuColors
+  } else if (color == ANTD.primary.color) {
+    return ANTD.primary.dark.menuColors
+  } else {
+    return [varyColor.darken(color, 0.93), varyColor.darken(color, 0.83), varyColor.darken(color, 0.73)]
+  }
+}
+
+// 获取主题模式切换色系
+function getThemeToggleColors (color, mode) {
+  // 主色系
+  const mainColors = getAntdColors(color, mode)
+  const primary = mainColors[5]
+  // 辅助色系，因为 antd 目前没针对夜间模式设计，所以增加辅助色系以保证夜间模式的正常切换
+  const subColors = getAntdColors(primary, themeMode.LIGHT)
+  // 菜单色系
+  const menuColors = getMenuColors(color, mode)
+  // 内容色系（包含背景色、文字颜色等）
+  const themeCfg = ANTD.theme[mode]
+  let contentColors = Object.keys(themeCfg)
+    .map(key => themeCfg[key])
+    .map(color => isHex(color) ? color : toNum3(color).join(','))
+  // 内容色去重
+  contentColors = [...new Set(contentColors)]
+  // rgb 格式的主题色
+  const rgbColors = [toNum3(primary).join(',')]
+  const functionalColors = getFunctionalColors(mode)
+  return { primary, mainColors, subColors, menuColors, contentColors, rgbColors, functionalColors }
+}
+
+function toNum3 (color) {
+  if (isHex(color)) {
+    return varyColor.toNum3(color)
+  }
+  let colorStr = ''
+  if (isRgb(color)) {
+    colorStr = color.slice(5, color.length)
+  } else if (isRgba(color)) {
+    colorStr = color.slice(6, color.lastIndexOf(','))
+  }
+  const rgb = colorStr.split(',')
+  const r = parseInt(rgb[0])
+  const g = parseInt(rgb[1])
+  const b = parseInt(rgb[2])
+  return [r, g, b]
+}
+
+function isHex (color) {
+  return color.length >= 4 && color[0] == '#'
+}
+
+function isRgb (color) {
+  return color.length >= 10 && color.slice(0, 3) == 'rgb'
+}
+
+function isRgba (color) {
+  return color.length >= 13 && color.slice(0, 4) == 'rgba'
+}
+
+module.exports = {
+  isHex,
+  isRgb,
+  isRgba,
+  toNum3,
+  getAntdColors,
+  getMenuColors,
+  getThemeToggleColors,
+  getFunctionalColors
+}