n20-common-lib 3.1.15 → 3.1.17

package/package.json

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

package/src/assets/css/_coreLib.scss

@@ -56,6 +56,8 @@
 @import './v3/header.scss';
 @import './v3/footer.scss';
 @import './v3/radioCard.scss';
+@import './v3/collapse.scss';
+@import './v3/anchor.scss';
 
 //临时引入
 @import '../../components/ChildRange/style.scss';

package/src/assets/css/normalize.scss

@@ -144,21 +144,53 @@ iframe {
 
 /* 内外边距 — 4px 基础单位，所有值均为 4 的倍数 */
 @mixin pm-fn($n) {
-  .pa-#{$n} { padding: #{$n}px; }
-  .pt-#{$n} { padding-top: #{$n}px; }
-  .pr-#{$n} { padding-right: #{$n}px; }
-  .pb-#{$n} { padding-bottom: #{$n}px; }
-  .pl-#{$n} { padding-left: #{$n}px; }
-  .px-#{$n} { padding-left: #{$n}px; padding-right: #{$n}px; }
-  .py-#{$n} { padding-top: #{$n}px; padding-bottom: #{$n}px; }
-
-  .ma-#{$n} { margin: #{$n}px; }
-  .mt-#{$n} { margin-top: #{$n}px; }
-  .mr-#{$n} { margin-right: #{$n}px; }
-  .mb-#{$n} { margin-bottom: #{$n}px; }
-  .ml-#{$n} { margin-left: #{$n}px; }
-  .mx-#{$n} { margin-left: #{$n}px; margin-right: #{$n}px; }
-  .my-#{$n} { margin-top: #{$n}px; margin-bottom: #{$n}px; }
+  .pa-#{$n} {
+    padding: #{$n}px;
+  }
+  .pt-#{$n} {
+    padding-top: #{$n}px;
+  }
+  .pr-#{$n} {
+    padding-right: #{$n}px;
+  }
+  .pb-#{$n} {
+    padding-bottom: #{$n}px;
+  }
+  .pl-#{$n} {
+    padding-left: #{$n}px;
+  }
+  .px-#{$n} {
+    padding-left: #{$n}px;
+    padding-right: #{$n}px;
+  }
+  .py-#{$n} {
+    padding-top: #{$n}px;
+    padding-bottom: #{$n}px;
+  }
+
+  .ma-#{$n} {
+    margin: #{$n}px;
+  }
+  .mt-#{$n} {
+    margin-top: #{$n}px;
+  }
+  .mr-#{$n} {
+    margin-right: #{$n}px;
+  }
+  .mb-#{$n} {
+    margin-bottom: #{$n}px;
+  }
+  .ml-#{$n} {
+    margin-left: #{$n}px;
+  }
+  .mx-#{$n} {
+    margin-left: #{$n}px;
+    margin-right: #{$n}px;
+  }
+  .my-#{$n} {
+    margin-top: #{$n}px;
+    margin-bottom: #{$n}px;
+  }
 }
 
 $spacing-values: 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 48, 64;
@@ -624,6 +656,7 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
 /* height: 100%; 速龙浏览器下子元素无法继承父元素的高速度 */
 .n20-page-content {
   height: 100%;
+  padding-top: 4px;
   overflow-y: auto;
   overflow-x: hidden;
 }

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

@@ -0,0 +1,119 @@
+.n20-anchor-v3 {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 4px;
+
+  & *,
+  & *::before,
+  & *::after {
+    box-sizing: border-box;
+  }
+
+  &.is-static {
+    position: static;
+  }
+
+  &__indicator {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 8px;
+    background: $--color-white;
+    border: 1px solid $--border-color-base;
+    border-radius: 15.5px;
+    filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.1));
+  }
+
+  &__indicator-bar {
+    flex-shrink: 0;
+    width: 2px;
+    height: 4px;
+    background: $--color-text-placeholder;
+    transition: height 0.2s ease, background 0.2s ease;
+
+    & + & {
+      margin-top: 4px;
+    }
+
+    &.is-active {
+      height: 16px;
+      background: $--color-primary;
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 8px;
+    background: $--color-white;
+    border: 1px solid $--border-color-base;
+    border-radius: 4px;
+    filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.1));
+  }
+
+  &__item {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 104px;
+    padding: 4px 8px;
+    border-radius: 2px;
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+    color: inherit;
+    outline: none;
+    transition: background-color 0.15s ease;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    &:not(.is-active):not(.is-disabled):hover {
+      background: $--background-color-base;
+    }
+
+    &.is-active {
+      .n20-anchor-v3__bar {
+        height: 12px;
+        background: $--color-primary;
+      }
+      .n20-anchor-v3__label {
+        color: $--color-primary;
+      }
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+
+  &__bar {
+    flex-shrink: 0;
+    width: 2px;
+    height: 2px;
+    background: $--color-text-placeholder;
+    border-radius: 0 4px 4px 0;
+    transition: height 0.15s ease, background 0.15s ease;
+  }
+
+  &__label {
+    flex-shrink: 0;
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 22px;
+    color: $--color-text-primary;
+    white-space: nowrap;
+    word-break: break-word;
+  }
+}

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

@@ -0,0 +1,71 @@
+.n20-page-collapse {
+  background: $--background-color-base;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-sizing: border-box;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &__title {
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    color: $--color-info;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 1px 4px;
+    border-radius: 2px;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  &__action-text {
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 22px;
+    color: $--color-primary;
+  }
+
+  &__arrow {
+    display: inline-flex;
+    align-items: center;
+    color: $--color-primary;
+    transition: transform 0.2s ease;
+  }
+
+  &__arrow-up {
+    transform: rotate(0deg);
+  }
+
+  &__arrow-down {
+    transform: rotate(180deg);
+  }
+
+  &__body-wrap {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s ease;
+
+    &.is-expanded {
+      grid-template-rows: 1fr;
+    }
+  }
+
+  &__body {
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,226 @@
+<template>
+  <div
+    :class="anchorClasses"
+    :style="containerStyle"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <div v-show="menuVisible" class="n20-anchor-v3__list">
+      <a
+        v-for="item in normalizedOptions"
+        :key="item.value"
+        :href="'#' + item.value"
+        :class="['n20-anchor-v3__item', { 'is-active': isActive(item), 'is-disabled': item.disabled }]"
+        @click="handleClick(item, $event)"
+      >
+        <span class="n20-anchor-v3__bar"></span>
+        <span class="n20-anchor-v3__label">{{ item.label }}</span>
+      </a>
+    </div>
+    <div class="n20-anchor-v3__indicator">
+      <span
+        v-for="(item, idx) in normalizedOptions"
+        :key="`ind-${item.value}`"
+        :class="['n20-anchor-v3__indicator-bar', { 'is-active': idx === activeIndex }]"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AnchorV3',
+  props: {
+    options: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    position: {
+      type: String,
+      default: 'fixed',
+      validator: (v) => ['fixed', 'absolute', 'static'].includes(v)
+    },
+    offsetTop: {
+      type: Number,
+      default: 80
+    },
+    offsetRight: {
+      type: Number,
+      default: 24
+    },
+    scrollSpy: {
+      type: Boolean,
+      default: true
+    },
+    scrollContainer: {
+      type: [String, HTMLElement],
+      default: null
+    }
+  },
+  data() {
+    return {
+      currentHash: '',
+      ticking: false,
+      sortedOptions: [],
+      scrollTarget: null,
+      menuVisible: false
+    }
+  },
+  computed: {
+    anchorClasses() {
+      return ['n20-anchor-v3', `is-${this.position}`]
+    },
+    normalizedOptions() {
+      return (this.options || []).filter((o) => o && o.value != null && o.label != null)
+    },
+    activeIndex() {
+      return this.normalizedOptions.findIndex((o) => this.isActive(o))
+    },
+    containerStyle() {
+      if (this.position === 'static') return {}
+      return {
+        position: this.position,
+        top: `${this.offsetTop}px`,
+        right: `${this.offsetRight}px`,
+        zIndex: 100
+      }
+    },
+    triggerY() {
+      return this.offsetTop
+    }
+  },
+  watch: {
+    normalizedOptions() {
+      this.sortedOptions = []
+    },
+    scrollContainer() {
+      if (this.scrollSpy) {
+        this.bindScrollTarget()
+      }
+    },
+    scrollSpy(val) {
+      if (val) {
+        this.bindScrollTarget()
+      } else {
+        this.unbindScrollTarget()
+      }
+    }
+  },
+  mounted() {
+    this.currentHash = (typeof window !== 'undefined' ? window.location.hash : '') || ''
+    window.addEventListener('hashchange', this.onHashChange)
+    if (this.scrollSpy) {
+      this.bindScrollTarget()
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('hashchange', this.onHashChange)
+    if (this.scrollSpy) {
+      this.unbindScrollTarget()
+    }
+  },
+  methods: {
+    isActive(item) {
+      return '#' + item.value === this.currentHash
+    },
+    handleClick(item, e) {
+      if (item.disabled) {
+        e.preventDefault()
+        return
+      }
+      this.$emit('click', item)
+    },
+    onMouseEnter() {
+      this.menuVisible = true
+    },
+    onMouseLeave() {
+      this.menuVisible = false
+    },
+    onHashChange() {
+      this.currentHash = window.location.hash || ''
+    },
+    resolveScrollTarget() {
+      if (typeof window === 'undefined' || typeof document === 'undefined') return null
+      const c = this.scrollContainer
+      if (c === 'window') return window
+      if (typeof c === 'string' && c) return document.querySelector(c) || this.findScrollableParent() || window
+      if (c && c.nodeType === 1) return c
+      return this.findScrollableParent() || window
+    },
+    findScrollableParent() {
+      let el = this.$el && this.$el.parentElement
+      while (el && el !== document.documentElement) {
+        const style = window.getComputedStyle(el)
+        const overflowY = style.overflowY
+        const overflow = style.overflow
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflow === 'auto' || overflow === 'scroll') {
+          return el
+        }
+        el = el.parentElement
+      }
+      return null
+    },
+    bindScrollTarget() {
+      this.unbindScrollTarget()
+      this.scrollTarget = this.resolveScrollTarget()
+      if (this.scrollTarget) {
+        this.scrollTarget.addEventListener('scroll', this.onScroll, { passive: true })
+        this.$nextTick(() => this.updateActiveSection())
+      }
+    },
+    unbindScrollTarget() {
+      if (this.scrollTarget) {
+        this.scrollTarget.removeEventListener('scroll', this.onScroll)
+        this.scrollTarget = null
+      }
+    },
+    onScroll() {
+      if (this.ticking) return
+      this.ticking = true
+      requestAnimationFrame(() => {
+        this.updateActiveSection()
+        this.ticking = false
+      })
+    },
+    getSortedOptions() {
+      if (this.sortedOptions.length === this.normalizedOptions.length && this.sortedOptions.length > 0) {
+        return this.sortedOptions
+      }
+      const pageY = (typeof window !== 'undefined' ? window.pageYOffset : 0) || 0
+      this.sortedOptions = [...this.normalizedOptions].sort((a, b) => {
+        const elA = typeof document !== 'undefined' ? document.getElementById(String(a.value)) : null
+        const elB = typeof document !== 'undefined' ? document.getElementById(String(b.value)) : null
+        const topA = elA ? elA.getBoundingClientRect().top + pageY : 0
+        const topB = elB ? elB.getBoundingClientRect().top + pageY : 0
+        return topA - topB
+      })
+      return this.sortedOptions
+    },
+    updateActiveSection() {
+      if (typeof window === 'undefined' || typeof document === 'undefined') return
+      const triggerY = this.triggerY
+      const sorted = this.getSortedOptions()
+      let activeValue = null
+      for (const option of sorted) {
+        const el = document.getElementById(String(option.value))
+        if (!el) continue
+        const rect = el.getBoundingClientRect()
+        if (rect.top <= triggerY) {
+          activeValue = option.value
+        } else {
+          break
+        }
+      }
+      if (activeValue) {
+        const newHash = '#' + activeValue
+        if (this.currentHash !== newHash) {
+          this.currentHash = newHash
+        }
+      } else if (this.currentHash) {
+        this.currentHash = ''
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="n20-page-collapse">
+    <div class="n20-page-collapse__header" @click="toggle">
+      <div class="n20-page-collapse__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div class="n20-page-collapse__action">
+        <span class="n20-page-collapse__action-text">{{ actionText }}</span>
+        <i
+          class="n20-page-collapse__arrow"
+          :class="isExpanded ? 'n20-page-collapse__arrow-up' : 'n20-page-collapse__arrow-down'"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 9.5L7 5.5L11 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </i>
+      </div>
+    </div>
+    <div class="n20-page-collapse__body-wrap" :class="{ 'is-expanded': isExpanded }">
+      <div class="n20-page-collapse__body">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { $lc } from '../../../utils/i18n/index'
+
+export default {
+  name: 'Collapse',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    expanded: {
+      type: Boolean,
+      default: null
+    }
+  },
+  data() {
+    return {
+      localExpanded: true
+    }
+  },
+  computed: {
+    isControlled() {
+      return this.expanded !== null
+    },
+    isExpanded() {
+      return this.isControlled ? this.expanded : this.localExpanded
+    },
+    actionText() {
+      return this.isExpanded ? $lc('收起') : $lc('展开')
+    }
+  },
+  methods: {
+    toggle() {
+      const next = !this.isExpanded
+      if (!this.isControlled) {
+        this.localExpanded = next
+      }
+      this.$emit('update:expanded', next)
+      this.$emit('change', next)
+    }
+  }
+}
+</script>

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

@@ -3,11 +3,11 @@
     <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>
+        <span class="n20-page-header-v3__back-text">{{ title }}</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>
+        <slot name="content">{{ content }}</slot>
       </div>
     </div>
     <div :class="`n20-page-header-right ${extraClass}`">
@@ -28,11 +28,11 @@ export default {
       type: Boolean,
       default: true
     },
-    backText: {
+    title: {
       type: String,
       default: '返回'
     },
-    title: {
+    content: {
       type: String,
       default: ''
     },
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     handleBack() {
-      this.$emit('onBack')
+      this.$emit('back')
     }
   }
 }