epx-frame 3.5.0-shpgy.1

package/src/styles/theme/utils/mixins.scss

@@ -0,0 +1,317 @@
+@import "function";
+@import "./var.scss";
+
+$theme: (
+  purple: $--color-primary-purple,
+  palevioletred: $--color-primary-palevioletred,
+  forestgreen: $--color-primary-forestgreen,
+  deepblue: $--color-primary-deepblue,
+  orange: $--color-primary-orange,
+  skyblue: $--color-primary-skyblue,
+  aurorablue: $--color-primary-aurorablue,
+  tiffanyblue: $--color-primary-tiffanyblue,
+);
+
+@mixin theme_map() {
+  @each $name in map-keys($theme){
+    [#{'data-theme=' +$name} ] & {
+      // color: rgb(map-get($theme,$name), $opacity);
+      @content;
+    }
+  }
+}
+
+/* 字体主题色
+ -------------------------- */
+@mixin font_color_primary( $opacity: 1, $color: $--color-primary) {
+  color:rgba($--color-primary, $opacity);
+  @each $name in map-keys($theme){
+    [#{'data-theme=' +$name} ] & {
+      color: rgba(map-get($theme,$name), $opacity);
+    }
+  }
+  &:hover {
+    // @include font_color_primary_mixin(.2)
+  }
+}
+
+ /*
+  字体混合主题色
+  -------------------------- */
+  @mixin font_color_primary_mixin($opacity: 1, $color: $--color-white) {
+    color: mix($--color-white, $--color-primary, ($opacity * 100%));
+    @each $name in map-keys($theme){
+      [#{'data-theme=' +$name} ] & {
+        color:  mix($--color-white, map-get($theme,$name), ($opacity * 100%));
+      }
+    }
+  }
+
+/* 背景主题色
+ -------------------------- */
+@mixin bg_color_primary( $opacity: 1, $color: $--color-primary) {
+  background-color: rgba($color, $opacity);
+  @each $name in map-keys($theme){
+    [#{'data-theme=' +$name} ] & {
+      background-color: rgba(map-get($theme,$name), $opacity);
+    }
+  }
+}
+
+/*
+  背景混合主题色
+  -------------------------- */
+  @mixin bg_color_primary_mixin($opacity: 1, $color: $--color-white) {
+    background-color: mix($--color-white, $--color-primary, ($opacity * 100%));
+    @each $name in map-keys($theme){
+      [#{'data-theme=' +$name} ] & {
+        background-color: mix($--color-white,map-get($theme,$name), $opacity * 100%);
+      }
+    }
+  }
+
+/* 边框主题色
+ -------------------------- */
+ @mixin border_color_primary($opacity: 1, $position: null, $color: $--color-primary) {
+  @if $position {
+    border-#{$position}-color: rgba($color, $opacity); 
+  } @else {
+    border-color:rgba($color, $opacity); 
+  }
+  @each $name in map-keys($theme){
+    [#{'data-theme=' +$name} ] & {
+      @if $position {
+        border-#{$position}-color: rgba(map-get($theme,$name), $opacity); 
+      } @else {
+        border-color:rgba(map-get($theme,$name), $opacity); 
+      }
+    }
+  }
+}
+
+/*
+  边框混合主题色
+  -------------------------- */
+  @mixin border_color_primary_mixin($opacity: 1, $color: $--color-white) {
+    border-color: mix($--color-white, $--color-primary, ($opacity * 100%));
+    @each $name in map-keys($theme){
+      [#{'data-theme=' +$name} ] & {
+        border-color:mix($--color-white, map-get($theme,$name), ($opacity * 100%));
+      }
+    }
+  }
+
+ /**
+   描边主题色
+  -------------------------- */
+ @mixin stroke_color_primary( $opacity: 1, $color: $--color-primary) {
+  stroke: rgba($color, $opacity);
+  @each $name in map-keys($theme){
+    [#{'data-theme=' +$name} ] & {
+      stroke: rgba(map-get($theme,$name), $opacity);
+    }
+  }
+}
+
+/**边框
+ -------------------------- */
+ @mixin border_primary($width: 1px,$position: null, $type: solid, $opacity: 1, $color: $--color-primary) {
+  @if $position {
+    border-#{$position}: $width $type rgba($color, $opacity);
+  } @else {
+    border: $width $type rgba($color, $opacity);
+  }
+  @each $name in map-keys($theme){
+    [#{'data-theme=' +$name} ] & {
+      border-color:  map-get($theme,$name);
+    }
+  }
+}
+
+/* Break-points
+ -------------------------- */
+@mixin res($key, $map: $--breakpoints) {
+  // 循环断点Map，如果存在则返回
+  @if map-has-key($map, $key) {
+    @media only screen and #{inspect(map-get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefeined points: `#{$map}`";
+  }
+}
+
+/* Scrollbar
+ -------------------------- */
+@mixin scroll-bar {
+  $--scrollbar-thumb-background: #b4bccc;
+  $--scrollbar-track-background: #fff;
+
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+
+    &:horizontal {
+      height: 6px;
+    }
+
+    &-thumb {
+      border-radius: 5px;
+      width: 6px;
+      background: $--scrollbar-thumb-background;
+    }
+
+    &-corner {
+      background: $--scrollbar-track-background;
+    }
+
+    &-track {
+      background: $--scrollbar-track-background;
+
+      &-piece {
+        background: $--scrollbar-track-background;
+        width: 6px;
+      }
+    }
+  }
+}
+
+/* Placeholder
+ -------------------------- */
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content
+  }
+
+  &::-moz-placeholder {
+    @content
+  }
+
+  &:-ms-input-placeholder {
+    @content
+  }
+}
+
+/* BEM
+ -------------------------- */
+@mixin b($block) {
+  $B: $namespace+'-'+$block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+  $selector: &;
+  $interpolation: '';
+
+  @if $E-flag {
+    $interpolation: $element-separator + $E-flag;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$B+$interpolation+$modifier-separator+$modifier} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
+      @content
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block+$element-separator+$element+$modifierCombo} {
+        @content
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin extend-rule($name) {
+  @extend #{'%shared-'+$name};
+}
+
+@mixin share-rule($name) {
+  $rule-name: '%shared-'+$name;
+
+  @at-root #{$rule-name} {
+    @content
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content
+  }
+}
+

package/src/styles/theme/utils/var.scss

@@ -0,0 +1,112 @@
+// 默认主题色
+$--color-primary: #0874E7!default; 
+// 薰衣草紫主题色
+$--color-primary-purple: #7569E2!default;
+// 霞红主题色
+$--color-primary-palevioletred: #CE4545!default;
+// 森绿主题色
+$--color-primary-forestgreen: #3D8A50!default;
+// 海蓝主题色
+$--color-primary-deepblue: #0F5FBD!default;
+// 橙橘
+$--color-primary-orange: #EA6000!default;
+// 星空蓝
+$--color-primary-skyblue: #1A4586!default;
+// 极光蓝
+$--color-primary-aurorablue: #383B9E!default;
+// 蒂芙尼蓝
+$--color-primary-tiffanyblue: #00AAAD!default;
+// 成功色
+$--color-success: #67C23A !default;
+// 警告色
+$--color-warning: #E6A23C !default;
+// 危险色
+$--color-danger: #F56C6C !default;
+// color|1|Background Color|4
+$--color-white: #FFFFFF !default;
+/// color|1|Background Color|4
+$--color-black: #000000 !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+// 默认文本色
+$--color-text-primary: #333 !default;
+// 文本辅助色
+$--color-text-regular: #666 !default;
+// 次要文本色
+$--color-text-secondary: #999 !default;
+// 提示色
+$--color-text-placeholder: #C0C4CC !default;
+
+// 边框色
+$--border-color-base: #E3E3E3 !default;
+/// color|1|Border Color|3
+$--border-color-light: #E4E7ED !default;
+/// color|1|Border Color|3
+$--border-color-lighter: #EBEEF5 !default;
+/// color|1|Border Color|3
+$--border-color-extra-light: #F2F6FC !default;
+
+// 背景色
+$--background-color-base: #F5F7FA !default;
+
+/* 链接颜色
+-------------------------- */
+$--link-color: $--color-primary-light-2 !default;
+$--link-hover-color: $--color-primary !default;
+
+/* Border
+-------------------------- */
+$--border-width-base: 1px !default;
+$--border-style-base: solid !default;
+$--border-color-hover: $--color-text-placeholder !default;
+$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
+/// borderRadius|1|Radius|0
+$--border-radius-base: 4px !default;
+/// borderRadius|1|Radius|0
+$--border-radius-small: 2px !default;
+/// borderRadius|1|Radius|0
+$--border-radius-circle: 100% !default;
+/// borderRadius|1|Radius|0
+$--border-radius-zero: 0 !default;
+
+// 字体大小
+/// fontSize|1|Font Size|0
+$--font-size-extra-large: 20px !default;
+/// fontSize|1|Font Size|0
+$--font-size-large: 20px !default;
+/// fontSize|1|Font Size|0
+$--font-size-medium: 18px !default;
+/// fontSize|1|Font Size|0
+$--font-size-base: 16px !default;
+/// fontSize|1|Font Size|0
+$--font-size-small: 13px !default;
+/// fontSize|1|Font Size|0
+$--font-size-extra-small: 12px !default;
+/// fontLineHeight|1|Line Height|2
+$--font-line-height-primary: 24px !default;
+/// fontLineHeight|1|Line Height|2
+$--font-line-height-secondary: 16px !default;
+$--font-color-disabled-base: #bbb !default;
+
+// 默认内边距
+$--padding-base: 16px!default;
+// 小边距
+$--padding-small: 10px!default;
+// 大边距
+$--padding-large: 24px!default;
+
+// 默认外边距
+$--margin-base: 16px!default;
+// 小边距
+$--margin-small: 10px!default;
+// 大边距
+$--margin-large: 24px!default;
+

package/src/utils/Config.js

@@ -0,0 +1,25 @@
+import { isObject } from 'lodash-es'
+
+class Config {
+  // 设置配置
+  set (config) {
+    for (const key in config) {
+      try {
+        if (isObject(config[key])) {
+          if (Array.isArray(config[key])) {
+            this[key] = [...config[key]]
+          } else {
+            if (!this[key]) this[key] = {}
+            this[key] = { ...this[key], ...config[key] }
+          }
+        } else {
+          this[key] = config[key]
+        }
+      } catch (error) {
+        this[key] = config[key]
+      }
+    }
+  }
+}
+
+export default Config

package/src/utils/axios.js

@@ -0,0 +1,121 @@
+import axios from 'axios'
+import util from '@/utils/util'
+import store from '@/store'
+import { Message } from 'element-ui'
+import Cookie from 'js-cookie'
+import _router from '../router'
+let message = null
+let timer = null
+const router = window.router || _router
+const delayToLogin = function (fn) {
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(() => {
+    if (message) message.close()
+    message = Message({
+      message: '登录失效，请重新登录',
+      type: 'error'
+    })
+    // 存储上一次未登录页面
+    if (util.toLogin) {
+      util.toLogin()
+    }
+  }, 100)
+}
+
+const init = () => {
+  const instance = axios.create({
+    timeout: 1200 * 1000,
+    baseURL: ''
+  })
+  instance.defaults.withCredentials = false
+  // 添加请求拦截器
+  instance.interceptors.request.use(config => {
+  // 在发送请求之前做些什么
+    if (process.env.IP) {
+      config.baseURL = process.env.IP
+    }
+    const { params = {} } = router.history.current
+
+    var reg = /(app\/role\/select|app|hall\/login|hall|login|system|client)\/(\w+)\/?(\w+)?/
+    var regResult = reg.exec(window.location.hash.split('?')[0])
+    const regClientCode = regResult ? RegExp.$2 : null
+    const regSystemCode = regResult ? RegExp.$3 : null
+    // 根据sysId获取请求服务
+    const { CODE: CLIENT_CODE = '', LANGUAGE_DEFAULT: defaultLanguage = '' } = store.state.config.clientConfig
+    const { LANGUAGE: userDefaultLanguage } = store.state.user.userInfo
+    const clientCode = params.client || regClientCode || CLIENT_CODE
+    if (store) {
+      const hashToken = util.search('token', window.location.hash)
+      if (hashToken) {
+        Cookie.set(clientCode + '-token', hashToken)
+      }
+    }
+    const _token = util.search('_token', window.location.hash)
+    const token = _token || Cookie.get(clientCode + '-token')
+    if (process.env.IP && token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    config.headers.Language = Cookie.get(clientCode + '-language') || userDefaultLanguage || defaultLanguage || '010'
+    config.headers.Client = clientCode
+    if (params.system) {
+      config.headers.System = params.system || regSystemCode
+    }
+    return config
+  })
+
+  instance.interceptors.response.use(function (response) {
+    const authorization = response.headers.Authorization
+    if (authorization) {
+      const token = authorization.split('Bearer ')[1]
+      const { params = {} } = router.history.current
+      const reg = /(login|hall\/login|hall|app\/role\/select|app|system|client)\/(\w+)/
+      reg.exec(window.location.hash)
+      // 根据sysId获取请求服务
+      const { 'CLIENT|CODE': CLIENT_CODE = '' } = store.state.config.appConfig
+      const clientCode = params.client || RegExp.$2 || CLIENT_CODE
+      Cookie.set(clientCode + '-token', token)
+    }
+    const { data = {} } = response
+    if (data instanceof Blob) {
+      const content = response.headers['content-disposition'] || ''
+      const filename = content.replace(/(.+)filename="(.+)"/, '$2')
+      return Promise.resolve({ blob: data, filename: decodeURI(filename) })
+    } else if (data.code === '0') {
+      // 处理成功
+      return Promise.resolve(data.data)
+    } else {
+      // 处理失败
+      if (data.code === 'error.nologin' || data.code === 'login.expired') {
+        // 单点登录
+        if (data.urlToRedirectTo) {
+          window.location.href = data.urlToRedirectTo
+        } else {
+          delayToLogin()
+        }
+      }
+      data.message = data.msg
+      return Promise.reject(data)
+    }
+  }, function (error) {
+    const {
+      data = {
+        code: '500',
+        msg: '处理失败'
+      }, status
+    } = error.response || {}
+    if (data.code === 'error.nologin' || data.code === 'login.expired' || status === 401) {
+      // 单点登录
+      if (data.urlToRedirectTo) {
+        window.location.href = data.urlToRedirectTo
+      } else {
+        delayToLogin()
+      }
+    }
+    data.message = data.msg
+    return Promise.reject(data)
+  })
+
+  return instance
+}
+
+export default init()