n20-common-lib 3.1.14 → 3.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.14",
+  "version": "3.1.15",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/css/_coreLib.scss

@@ -53,6 +53,9 @@
 @import './dynamic-table.scss';
 @import './v3/table.scss';
 @import './v3/secondary-tab.scss';
+@import './v3/header.scss';
+@import './v3/footer.scss';
+@import './v3/radioCard.scss';
 
 //临时引入
 @import '../../components/ChildRange/style.scss';

package/src/assets/css/element-variables.scss

@@ -8,7 +8,9 @@
 $--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--md-fade-transition:
+  transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 $--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 
@@ -84,6 +86,7 @@ $--border-color-extra-light: #f2f6fc !default;
 // Background
 /// color|1|Background Color|4
 $--background-color-base: #f2f3f5 !default;
+$--background-selected-color-base: #e8f7ff !default;
 
 /* Link
 -------------------------- */

package/src/assets/css/v3/footer.scss

@@ -0,0 +1,22 @@
+.n20-page-footer-v3 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: $--color-white;
+  justify-content: space-between;
+
+  .n20-page-footer-left {
+    flex: 1;
+  }
+
+  .n20-page-footer-center {
+  }
+
+  .n20-page-footer-right {
+    flex: 1;
+    width: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/src/assets/css/v3/header.scss

@@ -0,0 +1,46 @@
+.n20-page-header-v3 {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: $--color-white;
+  justify-content: space-between;
+
+  .n20-page-header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    .n20-page-header-v3__back {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      color: $--color-text-regular;
+      font-size: 14px;
+      line-height: 22px;
+      flex-shrink: 0;
+      .n20-page-header-v3__back-text {
+        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        font-weight: 400;
+      }
+
+      &:hover {
+        color: #165aaf;
+      }
+    }
+
+    .n20-page-header-v3__divider {
+      width: 1px;
+      height: 12px;
+      background: $--border-color-base;
+      flex-shrink: 0;
+    }
+    .n20-page-header-v3__title {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #1d2129;
+      flex-shrink: 0;
+    }
+  }
+}

package/src/assets/css/v3/radioCard.scss

@@ -0,0 +1,48 @@
+.n20-page-radio-card {
+  display: grid;
+  gap: 16px;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 16px;
+  align-self: stretch;
+  flex-wrap: wrap;
+
+  .n20-page-radio-card-item {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 8px 15px;
+    height: 38px;
+    border-radius: 4px;
+    border: 1px solid $--border-color-base;
+    cursor: pointer;
+    min-width: 170px;
+
+    &:hover {
+      background-color: $--descriptions-item-bordered-label-background;
+    }
+
+    &.n20-page-radio-card-item-checked {
+      border: 1px solid $--color-primary;
+      background-color: $--background-selected-color-base;
+    }
+
+    &.n20-page-radio-card-item-disabled {
+      cursor: not-allowed;
+    }
+
+    .n20-page-radio-card-item-radio {
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+
+      .el-radio__input,
+      .el-radio__inner {
+        height: 14px;
+        width: 14px;
+      }
+    }
+  }
+}

package/src/components/v3/Footer/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="n20-page-footer-v3" :style="showTopDivider ? 'border-top: 1px solid #E5E6EB;' : undefined">
+    <div :class="`n20-page-footer-left ${leftExtraClass}`">
+      <slot name="leftExtra"></slot>
+    </div>
+    <div :class="`n20-page-footer-center ${centerClass}`">
+      <slot></slot>
+    </div>
+    <div :class="`n20-page-footer-right ${rightExtraClass}`">
+      <slot name="rightExtra"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+    leftExtraClass: {
+      type: String,
+      default: ''
+    },
+    centerClass: {
+      type: String,
+      default: ''
+    },
+    rightExtraClass: {
+      type: String,
+      default: ''
+    },
+    showTopDivider: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>

package/src/components/v3/Header/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="n20-page-header-v3" :style="showBottomDivider ? 'border-bottom: 1px solid #E5E6EB;' : undefined">
+    <div class="n20-page-header-left">
+      <div v-if="showBack" class="n20-page-header-v3__back" @click="handleBack">
+        <i :class="icon"></i>
+        <span class="n20-page-header-v3__back-text">{{ backText }}</span>
+      </div>
+      <div v-if="showBack" class="n20-page-header-v3__divider"></div>
+      <div class="n20-page-header-v3__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </div>
+    <div :class="`n20-page-header-right ${extraClass}`">
+      <slot name="extra"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+    extraClass: {
+      type: String,
+      default: ''
+    },
+    showBack: {
+      type: Boolean,
+      default: true
+    },
+    backText: {
+      type: String,
+      default: '返回'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'n20-icon-yuefenqiehuan-zuoce'
+    },
+    showBottomDivider: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    handleBack() {
+      this.$emit('onBack')
+    }
+  }
+}
+</script>

package/src/components/v3/RadioCard/components/Card.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    :class="`n20-page-radio-card-item${checked ? ' n20-page-radio-card-item-checked' : ''}${disabled ? ' n20-page-radio-card-item-disabled' : ''}`"
+    @click="handleClick"
+  >
+    <el-radio
+      :key="value"
+      :value="checkValue"
+      :disabled="disabled"
+      class="n20-page-radio-card-item-radio"
+      :label="value"
+      >{{ label }}</el-radio
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RadioCardItem',
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    checkValue: {
+      type: [String, Number, Boolean, null, undefined],
+      default: null
+    },
+    value: {
+      type: [String, Number, Boolean],
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('check', this.value)
+    }
+  }
+}
+</script>

package/src/components/v3/RadioCard/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="n20-page-radio-card">
+    <Card
+      v-for="option in options"
+      :key="option.value"
+      :checked="value === option.value"
+      :check-value="value"
+      :value="option.value"
+      :label="option.label"
+      :disabled="option.disabled"
+      @check="handleCheck"
+    />
+  </div>
+</template>
+
+<script>
+import Card from './components/Card.vue'
+
+export default {
+  name: 'RadioCard',
+  components: { Card },
+  model: {
+    prop: 'value',
+    event: 'onChange'
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean, null, undefined],
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleCheck(value) {
+      this.$emit('onChange', value)
+    }
+  }
+}
+</script>

package/src/index.js

@@ -124,6 +124,9 @@ import TimePicker from './components/TimePicker/index.vue'
 import Tree from './components/Tree/index.vue'
 import Upload from './components/Upload/index.vue'
 import UploadMsg from './components/Upload/uploadMsg.vue'
+import Footer from './components/v3/Footer/index.vue'
+import Header from './components/v3/Header/index.vue'
+import RadioCard from './components/v3/RadioCard/index.vue'
 import SecondaryTabV3 from './components/v3/SecondaryTab/index.vue'
 
 /* v3组件*/
@@ -281,7 +284,10 @@ const components = [
   operatingStatus,
   /* v3组件*/
   tableProV3,
-  SecondaryTabV3
+  SecondaryTabV3,
+  Header,
+  Footer,
+  RadioCard
 ]
 
 const install = function (Vue, opts = { prefix: 'Cl', i18nConfig: {} }) {
@@ -428,6 +434,9 @@ export {
   /* v3组件*/
   tableProV3,
   SecondaryTabV3,
+  Header,
+  Footer,
+  RadioCard,
   asyncGetRelaNos,
   // 方法
   auth,