n20-common-lib 1.3.24 → 1.3.27

package/src/assets/css/plain-text.scss

@@ -1,138 +1,36 @@
-$--md: 1440px;
-
-.plain-text {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  border: 1px solid #eeeeee;
-
-  .plain-text-item {
-    display: flex;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    align-items: center;
-
-
-    .plain-text-item-label {
-      flex: 30%;
-      text-align: right;
-      color: $--color-text-regular;
-      padding-right: 22px;
-    }
-
-    .plain-text-item-content {
-      flex: 70%;
-      color: $--color-text-primary;
-      padding-left: 22px;
-    }
-  }
-}
-
-@media only screen and (max-width: $--md) {
-  .plain-text-item {
-    flex: 49%;
-    max-width: 50%;
-
-    .after-color {
-      width: 250px;
-      height: 24px;
-      line-height: 24px;
-      padding-left: 2px;
-      margin-bottom: 4px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(22, 119, 255, 0.1);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-    }
-
-    .before-color {
-      width: 250px;
-      height: 24px;
-      line-height: 24px;
-      padding-left: 2px;
-      text-decoration: line-through;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(255, 59, 48, 0.1)
-    }
-
-    &:nth-of-type(odd) {
-      border-right: 1px solid #eeeeee;
-    }
-  }
-
-  .plain-text-item:last-of-type {}
-
-  .plain-text:nth-child(even) {
-    border-right: 1px solid #eeeeee;
-  }
-
-  .plain-text-item:nth-child(4n-1) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-
-  .plain-text-item:nth-child(4n) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-}
-
-@media only screen and (min-width: $--md + 1px) {
-  .plain-text-item {
-    flex: 33%;
-    max-width: 33%;
-
-    .after-color {
-      min-width: 200px;
-      max-width: 280px;
-      width: 100%;
-      height: 24px;
-      line-height: 24px;
-      padding-left: 2px;
-      margin-bottom: 4px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(22, 119, 255, 0.1);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-    }
-
-    .before-color {
-      min-width: 200px;
-      max-width: 280px;
-      width: 100%;
-      height: 24px;
-      line-height: 24px;
-      padding-left: 2px;
-      text-decoration: line-through;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(255, 59, 48, 0.1)
-    }
-
-    &:nth-of-type(3n-1) {
-      border-right: 1px solid #eeeeee;
-      border-left: 1px solid #eeeeee;
-    }
-  }
-
-  .plain-text-item:nth-child(6n) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-
-  .plain-text-item:nth-child(6n-1) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-
-  .plain-text-item:nth-child(6n-2) {
-    background-color: rgba(0, 122, 255, 0.05);
-  }
-}
+.n20-descriptions {
+  .el-descriptions__table {
+    table-layout: fixed;
+    border: 1px solid #e4e7ed;
+  }
+  .el-descriptions-item__cell {
+    width: 70px;
+    border-top: none !important;
+    border-left: none !important;
+    border-bottom: none !important;
+    color: $--color-text-primary;
+  }
+  .el-descriptions-item__label {
+    width: 30px;
+    background: none !important;
+    border-right: none !important;
+    text-align: right !important;
+    color: $--color-text-regular;
+  }
+  .el-descriptions__table.is-bordered tbody:nth-of-type(even) {
+    background: var(--color-primary-005);
+  }
+
+  .after-color {
+    padding-left: 2px;
+    padding-right: 4px;
+    background-color: var(--color-primary-01);
+  }
+
+  .before-color {
+    padding-left: 2px;
+    padding-right: 4px;
+    text-decoration: line-through;
+    background-color: var(--color-danger-01);
+  }
+}

package/src/assets/css/rootvar.scss

@@ -1,139 +1,143 @@
-@import './element-variables.scss';
-$--color-FFBF00: #ffbf00;
-
-:root {
-  // Color
-  --color-primary: #{$--color-primary};
-  --color-white: #{$--color-white};
-  --color-black: #{$--color-black};
-  --color-primary-light-1: #{$--color-primary-light-1};
-  --color-primary-light-2: #{$--color-primary-light-2};
-  --color-primary-light-3: #{$--color-primary-light-3};
-  --color-primary-light-4: #{$--color-primary-light-4};
-  --color-primary-light-5: #{$--color-primary-light-5};
-  --color-primary-light-6: #{$--color-primary-light-6};
-  --color-primary-light-7: #{$--color-primary-light-7};
-  --color-primary-light-8: #{$--color-primary-light-8};
-  --color-primary-light-9: #{$--color-primary-light-9};
-  --color-success: #{$--color-success};
-  --color-warning: #{$--color-warning};
-  --color-danger: #{$--color-danger};
-  --color-info: #{$--color-info};
-  --color-success-light: #{$--color-success-light};
-  --color-warning-light: #{$--color-warning-light};
-  --color-danger-light: #{$--color-danger-light};
-  --color-info-light: #{$--color-info-light};
-  --color-success-lighter: #{$--color-success-lighter};
-  --color-warning-lighter: #{$--color-warning-lighter};
-  --color-danger-lighter: #{$--color-danger-lighter};
-  --color-info-lighter: #{$--color-info-lighter};
-  --button-disabled-background-color: #{$--button-disabled-background-color};
-
-  --color-mask: #{rgba($--color-black, 0.45)};
-
-  --color-primary-hover: #{$--color-primary-hover};
-  --color-success-hover: #{$--color-success-hover};
-  --color-warning-hover: #{$--color-warning-hover};
-  --color-danger-hover: #{$--color-danger-hover};
-  --color-info-hover: #{$--color-info-hover};
-
-  --color-primary-01: #{rgba($--color-primary, 0.1)};
-  --color-primary-04: #{rgba($--color-primary, 0.4)};
-
-  --color-warning-01: #{rgba($--color-warning, 0.1)};
-  --color-warning-04: #{rgba($--color-warning, 0.4)};
-
-  --color-FFBF00: #{$--color-FFBF00};
-  --color-FFBF00-hover: #{mix($--color-black, $--color-FFBF00, 10%)};
-  --color-FFBF00-01: #{rgba($--color-FFBF00, 0.1)};
-  --color-FFBF00-04: #{rgba($--color-FFBF00, 0.4)};
-
-  --color-success-01: #{rgba($--color-success, 0.1)};
-  --color-success-04: #{rgba($--color-success, 0.4)};
-
-  // Text
-  --color-text-primary: #{$--color-text-primary};
-  --color-text-regular: #{$--color-text-regular};
-  --color-text-secondary: #{$--color-text-secondary};
-  --color-text-placeholder: #{$--color-text-placeholder};
-  // Border
-  --border-color-base: #{$--border-color-base};
-  --border-color-light: #{$--border-color-light};
-  --table-row-hover-background-color: #{$--table-row-hover-background-color};
-  --border-color-lighter: #{$--border-color-lighter};
-  --border-color-extra-light: #{$--border-color-extra-light};
-  // Background
-  --background-color-base: #{$--background-color-base};
-  --button-default-border-color: #{$--button-default-border-color};
-  // Link
-  --link-color: #{$--link-color};
-  --link-hover-color: #{$--link-hover-color};
-  // fontSize
-  --font-family-pingfang: 'Pingfang SC';
-  --font-family-yahei: 'Microsoft YaHe';
-  --font-size-extra-large: #{$--font-size-extra-large};
-  --font-size-large: #{$--font-size-large};
-  --font-size-medium: #{$--font-size-medium};
-  --font-size-base: #{$--font-size-base};
-  --font-size-small: #{$--font-size-small};
-  --font-size-extra-small: #{$--font-size-extra-small};
-  // fontWeight
-  --font-weight-bold: #{$--font-weight-bold};
-  --font-weight-primary: #{$--font-weight-primary};
-  --font-weight-secondary: #{$--font-weight-secondary};
-  // fontLineHeight
-  --font-line-height-primary: #{$--font-line-height-primary};
-  --font-line-height-secondary: #{$--font-line-height-secondary};
-  --font-color-disabled-base: #{$--font-color-disabled-base};
-  // Size
-  --size-base: #{$--size-base};
-  // Icon
-  --icon-color: #{$--icon-color};
-  --icon-color-base: #{$--icon-color-base};
-  // Radius
-  --border-radius-base: #{$--border-radius-base};
-
-  // line-height
-  --line-height-16: 16px;
-  --line-height-18: 18px;
-  --line-height-22: 22px;
-  --line-height-24: 24px;
-  --line-height-28: 28px;
-  --line-height-32: 32px;
-
-  --background-linear-gradient: linear-gradient(
-    to bottom right,
-    #{mix($--color-white, $--color-primary, 8.5%)},
-    #{$--color-primary}
-  );
-  --color-success-linear-gradient: linear-gradient(
-    to bottom right,
-    #{mix($--color-white, $--color-success, 8.5%)},
-    #{$--color-success}
-  );
-  --color-FFBF00-linear-gradient: linear-gradient(
-    to bottom right,
-    #{mix($--color-white, $--color-FFBF00, 8.5%)},
-    #{$--color-FFBF00}
-  );
-  --color-warning-linear-gradient: linear-gradient(
-    to bottom right,
-    #{mix($--color-white, $--color-warning, 8.5%)},
-    #{$--color-warning}
-  );
-
-  --color-F48393: #f48393;
-  --color-F4CC7A: #f4cc7a;
-  --color-63D9AE: #63d9ae;
-  --color-73A0FA: #73a0fa;
-  --color-83D0EF: #83d0ef;
-  --color-BEE56F: #bee56f;
-  --color-EADF72: #eadf72;
-  --color-F1B688: #f1b688;
-  --color-F9C0B5: #f9c0b5;
-  --color-F49583: #f49583;
-  --color-EC5E5E: #ec5e5e;
-  --color-AE89E0: #ae89e0;
-  --color-5F5CD2: #5f5cd2;
-  --color-7585A2: #7585a2;
-}
+@import './element-variables.scss';
+$--color-FFBF00: #ffbf00;
+
+:root {
+  // Color
+  --color-primary: #{$--color-primary};
+  --color-white: #{$--color-white};
+  --color-black: #{$--color-black};
+  --color-primary-light-1: #{$--color-primary-light-1};
+  --color-primary-light-2: #{$--color-primary-light-2};
+  --color-primary-light-3: #{$--color-primary-light-3};
+  --color-primary-light-4: #{$--color-primary-light-4};
+  --color-primary-light-5: #{$--color-primary-light-5};
+  --color-primary-light-6: #{$--color-primary-light-6};
+  --color-primary-light-7: #{$--color-primary-light-7};
+  --color-primary-light-8: #{$--color-primary-light-8};
+  --color-primary-light-9: #{$--color-primary-light-9};
+  --color-success: #{$--color-success};
+  --color-warning: #{$--color-warning};
+  --color-danger: #{$--color-danger};
+  --color-info: #{$--color-info};
+  --color-success-light: #{$--color-success-light};
+  --color-warning-light: #{$--color-warning-light};
+  --color-danger-light: #{$--color-danger-light};
+  --color-info-light: #{$--color-info-light};
+  --color-success-lighter: #{$--color-success-lighter};
+  --color-warning-lighter: #{$--color-warning-lighter};
+  --color-danger-lighter: #{$--color-danger-lighter};
+  --color-info-lighter: #{$--color-info-lighter};
+  --button-disabled-background-color: #{$--button-disabled-background-color};
+
+  --color-mask: #{rgba($--color-black, 0.45)};
+
+  --color-primary-hover: #{$--color-primary-hover};
+  --color-success-hover: #{$--color-success-hover};
+  --color-warning-hover: #{$--color-warning-hover};
+  --color-danger-hover: #{$--color-danger-hover};
+  --color-info-hover: #{$--color-info-hover};
+
+  --color-primary-005: #{rgba($--color-primary, 0.05)};
+  --color-primary-01: #{rgba($--color-primary, 0.1)};
+  --color-primary-04: #{rgba($--color-primary, 0.4)};
+
+  --color-warning-01: #{rgba($--color-warning, 0.1)};
+  --color-warning-04: #{rgba($--color-warning, 0.4)};
+
+  --color-danger-01: #{rgba($--color-danger, 0.1)};
+  --color-danger-04: #{rgba($--color-danger, 0.4)};
+
+  --color-FFBF00: #{$--color-FFBF00};
+  --color-FFBF00-hover: #{mix($--color-black, $--color-FFBF00, 10%)};
+  --color-FFBF00-01: #{rgba($--color-FFBF00, 0.1)};
+  --color-FFBF00-04: #{rgba($--color-FFBF00, 0.4)};
+
+  --color-success-01: #{rgba($--color-success, 0.1)};
+  --color-success-04: #{rgba($--color-success, 0.4)};
+
+  // Text
+  --color-text-primary: #{$--color-text-primary};
+  --color-text-regular: #{$--color-text-regular};
+  --color-text-secondary: #{$--color-text-secondary};
+  --color-text-placeholder: #{$--color-text-placeholder};
+  // Border
+  --border-color-base: #{$--border-color-base};
+  --border-color-light: #{$--border-color-light};
+  --table-row-hover-background-color: #{$--table-row-hover-background-color};
+  --border-color-lighter: #{$--border-color-lighter};
+  --border-color-extra-light: #{$--border-color-extra-light};
+  // Background
+  --background-color-base: #{$--background-color-base};
+  --button-default-border-color: #{$--button-default-border-color};
+  // Link
+  --link-color: #{$--link-color};
+  --link-hover-color: #{$--link-hover-color};
+  // fontSize
+  --font-family-pingfang: 'Pingfang SC';
+  --font-family-yahei: 'Microsoft YaHe';
+  --font-size-extra-large: #{$--font-size-extra-large};
+  --font-size-large: #{$--font-size-large};
+  --font-size-medium: #{$--font-size-medium};
+  --font-size-base: #{$--font-size-base};
+  --font-size-small: #{$--font-size-small};
+  --font-size-extra-small: #{$--font-size-extra-small};
+  // fontWeight
+  --font-weight-bold: #{$--font-weight-bold};
+  --font-weight-primary: #{$--font-weight-primary};
+  --font-weight-secondary: #{$--font-weight-secondary};
+  // fontLineHeight
+  --font-line-height-primary: #{$--font-line-height-primary};
+  --font-line-height-secondary: #{$--font-line-height-secondary};
+  --font-color-disabled-base: #{$--font-color-disabled-base};
+  // Size
+  --size-base: #{$--size-base};
+  // Icon
+  --icon-color: #{$--icon-color};
+  --icon-color-base: #{$--icon-color-base};
+  // Radius
+  --border-radius-base: #{$--border-radius-base};
+
+  // line-height
+  --line-height-16: 16px;
+  --line-height-18: 18px;
+  --line-height-22: 22px;
+  --line-height-24: 24px;
+  --line-height-28: 28px;
+  --line-height-32: 32px;
+
+  --background-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-primary, 8.5%)},
+    #{$--color-primary}
+  );
+  --color-success-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-success, 8.5%)},
+    #{$--color-success}
+  );
+  --color-FFBF00-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-FFBF00, 8.5%)},
+    #{$--color-FFBF00}
+  );
+  --color-warning-linear-gradient: linear-gradient(
+    to bottom right,
+    #{mix($--color-white, $--color-warning, 8.5%)},
+    #{$--color-warning}
+  );
+
+  --color-F48393: #f48393;
+  --color-F4CC7A: #f4cc7a;
+  --color-63D9AE: #63d9ae;
+  --color-73A0FA: #73a0fa;
+  --color-83D0EF: #83d0ef;
+  --color-BEE56F: #bee56f;
+  --color-EADF72: #eadf72;
+  --color-F1B688: #f1b688;
+  --color-F9C0B5: #f9c0b5;
+  --color-F49583: #f49583;
+  --color-EC5E5E: #ec5e5e;
+  --color-AE89E0: #ae89e0;
+  --color-5F5CD2: #5f5cd2;
+  --color-7585A2: #7585a2;
+}

package/src/assets/css/select.scss

@@ -1,26 +1,26 @@
-.el-select.remote-icon-auto {
-  .el-select__caret {
-    &::before {
-         content: '\E6E1';
-     }
-  }
-  .is-focus {
-    .el-select__caret {
-        transform: rotate(0deg);
-    }
-  }
-}
-.el-select.remote-icon {
-  .el-select__caret {
-    &::before {
-         content: '\E6E1';
-     }
-  }
-  &.remote-icon-expand {
-    .is-focus {
-      .el-select__caret {
-          transform: rotate(0deg);
-      }
-    }
-  }
+.el-select.remote-icon-auto {
+  .el-select__caret {
+    &::before {
+         content: '\E6E1';
+     }
+  }
+  .is-focus {
+    .el-select__caret {
+        transform: rotate(0deg);
+    }
+  }
+}
+.el-select.remote-icon {
+  .el-select__caret {
+    &::before {
+         content: '\E6E1';
+     }
+  }
+  &.remote-icon-expand {
+    .is-focus {
+      .el-select__caret {
+          transform: rotate(0deg);
+      }
+    }
+  }
 }

package/src/assets/css/title-pop.scss

@@ -1,23 +1,23 @@
-
-.el-popover.n20-title-pop{
-  background-color: #303133;
-  min-width: auto;
-  color: $--color-white;
-  padding: 6px;
-}
-
-.n20-title-pop[x-placement^=left] .popper__arrow::after {
-  border-left-color: #303133;
-}
-
-.n20-title-pop[x-placement^=right] .popper__arrow::after {
-  border-right-color: #303133;
-}
-
-.n20-title-pop[x-placement^=bottom] .popper__arrow::after {
-  border-bottom-color: #303133;
-}
-
-.n20-title-pop[x-placement^=top] .popper__arrow::after {
-  border-top-color: #303133;
-}
+
+.el-popover.n20-title-pop{
+  background-color: #303133;
+  min-width: auto;
+  color: $--color-white;
+  padding: 6px;
+}
+
+.n20-title-pop[x-placement^=left] .popper__arrow::after {
+  border-left-color: #303133;
+}
+
+.n20-title-pop[x-placement^=right] .popper__arrow::after {
+  border-right-color: #303133;
+}
+
+.n20-title-pop[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #303133;
+}
+
+.n20-title-pop[x-placement^=top] .popper__arrow::after {
+  border-top-color: #303133;
+}

package/src/assets/getJsonc.js

@@ -1,50 +1,50 @@
-/* 引入不被打包的配置文件 */
-import stripJsonc from 'strip-json-comments'
-import realUrl from './realUrl'
-/* 前端(内存)缓存 */
-const jsoncs = {}
-
-export default function getJsonc(url, sync) {
-  const _url = realUrl(url)
-  if (sync) {
-    if (jsoncs[url + '?sync']) {
-      return jsoncs[url + '?sync']
-    } else {
-      const oAjax = new XMLHttpRequest()
-      oAjax.open('GET', _url, false)
-      oAjax.send()
-      if (oAjax.readyState === 4 && oAjax.status === 200) {
-        try {
-          const _data = JSON.parse(stripJsonc(oAjax.responseText))
-          jsoncs[url + '?sync'] = _data
-          jsoncs[url] = Promise.resolve(_data)
-        } catch (error) {
-          throw { error: url + ' illegal file', content: oAjax.responseText }
-        }
-      }
-      return jsoncs[url + '?sync']
-    }
-  } else {
-    if (jsoncs[url]) {
-      return jsoncs[url]
-    } else {
-      const oAjax = new XMLHttpRequest()
-      oAjax.open('GET', _url, true)
-      oAjax.send()
-      jsoncs[url] = new Promise((resolve, reject) => {
-        oAjax.onreadystatechange = () => {
-          if (oAjax.readyState === 4 && oAjax.status === 200) {
-            try {
-              const _data = JSON.parse(stripJsonc(oAjax.responseText))
-              jsoncs[url + '?sync'] = _data
-              resolve(_data)
-            } catch (error) {
-              throw { error: url + ' illegal file', content: oAjax.responseText }
-            }
-          }
-        }
-      })
-      return jsoncs[url]
-    }
-  }
-}
+/* 引入不被打包的配置文件 */
+import stripJsonc from 'strip-json-comments'
+import realUrl from './realUrl'
+/* 前端(内存)缓存 */
+const jsoncs = {}
+
+export default function getJsonc(url, sync) {
+  const _url = realUrl(url)
+  if (sync) {
+    if (jsoncs[url + '?sync']) {
+      return jsoncs[url + '?sync']
+    } else {
+      const oAjax = new XMLHttpRequest()
+      oAjax.open('GET', _url, false)
+      oAjax.send()
+      if (oAjax.readyState === 4 && oAjax.status === 200) {
+        try {
+          const _data = JSON.parse(stripJsonc(oAjax.responseText))
+          jsoncs[url + '?sync'] = _data
+          jsoncs[url] = Promise.resolve(_data)
+        } catch (error) {
+          throw { error: url + ' illegal file', content: oAjax.responseText }
+        }
+      }
+      return jsoncs[url + '?sync']
+    }
+  } else {
+    if (jsoncs[url]) {
+      return jsoncs[url]
+    } else {
+      const oAjax = new XMLHttpRequest()
+      oAjax.open('GET', _url, true)
+      oAjax.send()
+      jsoncs[url] = new Promise((resolve, reject) => {
+        oAjax.onreadystatechange = () => {
+          if (oAjax.readyState === 4 && oAjax.status === 200) {
+            try {
+              const _data = JSON.parse(stripJsonc(oAjax.responseText))
+              jsoncs[url + '?sync'] = _data
+              resolve(_data)
+            } catch (error) {
+              throw { error: url + ' illegal file', content: oAjax.responseText }
+            }
+          }
+        }
+      })
+      return jsoncs[url]
+    }
+  }
+}