adspecs 0.1.12

package/references/web-ui/src/styles/theme/default/index.scss

@@ -0,0 +1 @@
+@import "menu";

package/references/web-ui/src/styles/theme/default/menu.scss

@@ -0,0 +1,199 @@
+body.theme-default {
+  @mixin menuSelectedBeforeMixin {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+    height: 100%;
+    z-index: 1;
+    background-color: var(--el-color-primary);
+  }
+
+  // 菜单区域
+  // 图标为图片的时候图片垂直居中对齐文字
+  .amenu-title .selector-dialog > .svg-img {
+    vertical-align: middle;
+  }
+  .sidebar-container {
+    .ant-menu {
+      // 一级菜单样式
+      // 含子菜单的
+      .ant-menu-submenu {
+        .ant-menu-submenu-title {
+          background-color: transparent;
+          color: var(--color-text-main);
+          // fix: 新版是overflow. 所以只要超出就只有... 没有其他的了。
+          overflow: inherit;
+
+          .svg-icon {
+            color: var(--el-color-primary-light-4);
+          }
+
+          .ant-menu-submenu-arrow {
+            &::before,
+            &::after {
+              background: var(--color-text-icon-base);
+              height: 1px;
+            }
+          }
+          .el-badge__content {
+            top: 7px;
+            right: -4px;
+          }
+        }
+
+        &.ant-menu-submenu-active {
+          background: var(--el-color-primary-light-9);
+        }
+
+        &.ant-menu-item-selected {
+          position: relative;
+          color: var(--el-color-primary-light-9);;
+          background-color: var(--el-color-primary-light-9);
+
+          &::before {
+            @include menuSelectedBeforeMixin;
+          }
+
+          .ant-menu-submenu-title {
+            color: var(--el-color-primary);
+          }
+
+          .svg-icon {
+            color: var(--el-color-primary);
+          }
+        }
+      }
+
+      // 无子菜单
+      .ant-menu-item {
+        .amenu-title {
+          color: var(--color-text-main);
+        }
+
+        .svg-icon {
+          color: var(--el-color-primary-light-4);
+        }
+
+        &.ant-menu-item-active {
+          background: var(--el-color-primary-light-9) !important;
+        }
+
+        &.ant-menu-item-selected {
+          position: relative;
+          background-color: var(--el-color-primary-light-9);
+
+          &::before {
+            @include menuSelectedBeforeMixin;
+          }
+        }
+
+        &.ant-menu-selected {
+          background: var(--el-color-primary);
+
+          .amenu-title {
+            color: var(--color-white);
+          }
+
+          .svg-icon {
+            color: var(--color-white);
+          }
+        }
+      }
+
+      &.ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline {
+        background-color: #fff;
+      }
+      // &.ant-menu-light:not(.ant-menu-horizontal)
+      //   .ant-menu-item:not(.ant-menu-item-selected):hover {
+      //   background-color: var(--el-color-primary-light-9) !important;
+      // }
+    }
+  }
+
+  // 二级菜单区域
+  .ant-menu-submenu-popup {
+    // 鼠标悬停需要把二级菜单的边距去掉，不然icon对不齐
+    .ant-menu-vertical .ant-menu-submenu-title {
+      background-color: transparent;
+      color: var(--color-text-main);
+      margin-block: 0px;
+      margin-inline: 0px;
+      overflow: inherit; // fix:是overflow. 所以只要超出就只有... 没有其他的了
+    }
+    // fix：好像elementPlus 没有这个.ant-menu-submenu-content 先注释掉
+    .ant-menu-vertical.ant-menu-sub {
+      max-height: 100%;
+      background-color: #fff;
+      .ant-menu-submenu-arrow {
+        &::before,
+        &::after {
+          color: var(--color-text-icon-base);
+          height: 1px;
+        }
+      }
+
+      // 含子菜单
+      .ant-menu-submenu {
+        &.ant-menu-submenu-active {
+          .ant-menu-submenu-title {
+            color: var(--el-color-primary);
+            .menu-title {
+              color: var(--el-color-primary);
+            }
+            .svg-icon {
+              color: var(--el-color-primary);
+            }
+          }
+        }
+        .el-badge__content {
+          top: 7px;
+          right: -4px;
+        }
+      }
+
+      // 不含子菜单
+      // .menu-title {
+      //   margin-left: 4px;
+      // }
+
+      .ant-menu-item:hover,
+      .ant-menu-item-active {
+        color: var(--el-color-primary);
+      }
+    }
+    // todo: 样式结构变化
+    .ant-menu-item:hover,
+    .ant-menu-item-active {
+      color: var(--el-color-primary);
+    }
+  }
+
+  // 修改二级菜单的样式 11-22
+  .ant-menu {
+    .ant-menu-sub {
+      .ant-menu-item-selected {
+        background-color: transparent;
+        color: var(--el-color-primary);
+      }
+    }
+    .ant-menu-submenu-selected {
+      .selector-dialog .svg-icon {
+        color: var(--el-color-primary);
+      }
+      .ant-menu-submenu-title {
+        background-color: transparent;
+        color: var(--el-color-primary);
+        .ant-menu-submenu-arrow {
+          &::before,
+          &::after {
+            color: var(--color-text-icon-base);
+            height: 1px;
+          }
+        }
+      }
+    }
+  }
+}

package/references/web-ui/src/styles/transition.scss

@@ -0,0 +1,107 @@
+//global transition css
+
+/*fade*/
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/*fade-transform*/
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/*breadcrumb transition*/
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all 0.5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all 0.5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+
+//navbar
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}

package/references/web-ui/src/styles/variables.scss

@@ -0,0 +1,66 @@
+body {
+  // 常规颜色
+  --color-white: #ffffff;
+  --color-bg-1: #f5f5f5;
+  --color-bg-2: #f6f6f6;
+  --color-bg-3: #b4bccc;
+  --color-bg-4: #eef0f2;
+
+  // 辅助色
+  --color-assist: #626cee;
+  --color-success: #00d485;
+  --color-warning: #f5a72b;
+  --color-danger: #f4333c;
+
+  // 文字颜色
+  --color-text-main: #333333;
+  --color-text-base: #666666;
+  --color-text-secondary: #999999;
+  --color-text-extra: #cccccc;
+  --color-text-icon-base: #8aa1b6;
+
+  // 文字尺寸
+  --size-text-main: 14px;
+  --size-text-base: 16px;
+  --size-text-title: 18px;
+  --size-text-extra: 12px;
+
+  // 边框颜色
+  --color-border-line: #e8e8e8;
+
+  // 边框圆角
+  --radius-none: 0px;
+  --radius-lager: 8px;
+  --radius-normal: 6px;
+  --radius-small: 4px;
+  --radius-mini: 2px;
+
+  // 尺寸变量
+  // lager
+  --size-lager-1: 400px;
+  --size-lager-2: 300px;
+  // normal
+  --size-normal-1: 68px;
+  --size-normal-2: 64px;
+  // small
+  --size-small-1: 38px;
+  --size-small-2: 32px;
+  --size-small-3: 30px;
+  --size-small-4: 28px;
+  --size-small-5: 26px;
+  --size-small-6: 24px;
+  --size-small-7: 22px;
+  --size-small-8: 20px;
+  // mini
+  --size-mini-1: 18px;
+  --size-mini-2: 16px;
+  --size-mini-3: 14px;
+  --size-mini-4: 12px;
+  --size-mini-5: 10px;
+  --size-mini-6: 8px;
+  --size-mini-7: 6px;
+  --size-mini-8: 4px;
+
+  --el-button-size: 28px;
+  --el-component-size-small: 28px;
+}

package/references/web-ui/src/utils/ArrayExtension.ts

@@ -0,0 +1,175 @@
+/** 数组拓展工具类 **/
+
+const ArrayTool = {
+  /**
+   * 往数组中添加元素，若数组中已有此元素，则删除重复元素，添加新的元素
+   * @param array
+   * @param item
+   * @returns {*}
+   */
+  update: (array, item) => {
+    if (!Array.isArray(array)) return []
+
+    for (let i = 0; i < array.length; i++) {
+      let value = array[i]
+      if (item === value) array.splice(i, 1)
+    }
+    array.push(item)
+    return array
+  },
+
+  /**
+   * 往数组中添加元素，若数组中有则不再添加
+   * @param array
+   * @param item
+   * @returns {*}
+   */
+  add: (array, item) => {
+    if (!Array.isArray(array)) return []
+
+    for (let i = 0; i < array.length; i++) {
+      let value = array[i]
+      if (item === value) return array
+    }
+    array.push(item)
+    return array
+  },
+
+  /**
+   * 往数组中追加元素，元素追加到数组栈底
+   * @param array
+   * @param item
+   * @returns {*}
+   */
+  push: (array, item) => {
+    if (!Array.isArray(array)) return []
+
+    array.push(item)
+    return array
+  },
+
+  /**
+   * 往数组中追加元素，元素追加到数组栈顶
+   * @param array
+   * @param item
+   * @returns {*}
+   */
+  unshift: (array, item) => {
+    if (!Array.isArray(array)) return []
+
+    array.unshift(item)
+    return array
+  },
+
+  /**
+   * 往数组的指定位置插入一个元素
+   * @param array
+   * @param location
+   * @param item
+   * @returns {*}
+   * @private
+   */
+  _splice: (array, location, item) => {
+    if (!Array.isArray(array)) return []
+
+    array.splice(location, 0, item)
+    return array
+  },
+
+  /**
+   * 往数组中指定位置插入指定长度个数的元素
+   * @param array
+   * @param item
+   * @param location
+   * @returns {*}
+   */
+  splice_A: (array, location, length, item) => {
+    if (!Array.isArray(array)) return []
+
+    array.splice(location, length, item)
+    return array
+  },
+
+  /**
+   * 删除数组中指定元素
+   * @param array
+   * @param item
+   * @returns {*}
+   */
+  remove: (array, item) => {
+    if (!Array.isArray(array)) return []
+
+    for (let i = 0; i < array.length; i++) {
+      let value = array[i]
+      if (item === value) array.splice(i, 1)
+    }
+    return array
+  },
+
+  /**
+   * 删除数组中最后一个元素
+   * @param array
+   * @returns {*}
+   */
+  pop: (array) => {
+    if (!Array.isArray(array)) return []
+
+    array.pop()
+    return array
+  },
+
+  /**
+   * 删除数组中第一个元素
+   * @param array
+   * @returns {*}
+   */
+  shift: (array) => {
+    if (!Array.isArray(array)) return []
+
+    array.shift()
+    return array
+  },
+
+  /**
+   * 删除数组中指定位置，指定长度的元素
+   * @param array
+   * @param location
+   * @param length
+   * @returns {*}
+   */
+  splice_D: (array, location, length) => {
+    if (!Array.isArray(array)) return []
+
+    array.splice(location, length)
+    return array
+  },
+
+  /**
+   * 判断两个数组是否相等
+   * @param arr1
+   * @param arr2
+   * @returns {boolean}
+   */
+  isEqual: (array1, array2) => {
+    if (!(Array.isArray(array1) && Array.isArray(array2))) return false
+
+    if (array1.length !== array2.length) return false
+
+    for (let i = 0; i < array1.length; i++) {
+      if (array1[i] !== array2[i]) return false
+    }
+
+    return true
+  },
+  isSome: (array, item) => {
+    if (!Array.isArray(array)) return false
+
+    for (let i = 0; i < array.length; i++) {
+      if (array[i] === item) return true
+    }
+
+    return false
+  },
+}
+
+export { ArrayTool }

package/references/web-ui/src/utils/app-mixin.ts

@@ -0,0 +1,50 @@
+/** 公用的一些方法或属性放在这里 */
+import nameAuth from './name-auth'
+
+export default {
+  data() {
+    return {
+      // 全局组件尺寸控制
+      compSize: {
+        form: 'medium',
+        table: 'small',
+      },
+    }
+  },
+  methods: {
+    // 检验请求是否成功
+    reqIsSucceed(res) {
+      const passCodes = [200, 800]
+      return passCodes.includes(Number(res.code))
+    },
+    // 菜单翻译
+    langTitle(target) {
+      if (target?.query?.pageFormTitle) return target.query.pageFormTitle
+      const { enTitle, title } = target.meta
+      try {
+        const menuLanguageObject = JSON.parse(enTitle)
+        if (typeof menuLanguageObject === 'object') {
+          return menuLanguageObject[this.$i18n.locale] || title || 'no-name'
+        } else {
+          return enTitle || 'no-name'
+        }
+      } catch (err) {
+        return this.$i18n.locale === 'en-us' ? enTitle : title || 'no-name'
+      }
+    },
+    // 获取时候有该功能的权限
+    isHaveBtnAuth(btnText) {
+      const val = nameAuth[btnText]
+      return (
+        this.$store.state.app.btnAuth.findIndex((item) =>
+          val ? item.resourceName === btnText : item.resourceCode === btnText
+        ) > -1
+      )
+    },
+    getBtnAuthInfo(btnText) {
+      return this.$store.state.app.btnAuth.find(
+        (item) => item.resourceName === btnText
+      )
+    },
+  },
+}