@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/config/Options.vue

@@ -0,0 +1,330 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+import FormItem from './FormItem.vue'
+import { captureRef } from '@epxing/core/src/capture-ref'
+
+export default {
+  name: 'epx-visual-config-options',
+  components: {
+    [FormItem.name]: FormItem
+  },
+  props: {
+    configOptions: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      loadedOptionMap: {},
+      foldMap: {},
+      activeCategory: null,
+      categoryNavTop: 12
+    }
+  },
+  computed: {
+    categories () {
+      return this.configOptions.filter(item => !item.render && item.label && item.children?.length > 0)
+    }
+  },
+  watch: {
+    // 父面板的 showConfigOptions 每次重算都是新数组（一次选中里会换三四次，改任一配置项也会换），
+    // 这里只按 key 集合同步：引用变了但项没变就什么都不做，已加载的项不会被打回骨架屏
+    configOptions () {
+      this.syncLazyLoad()
+      this.$nextTick(() => this.updateActiveCategory())
+    }
+  },
+  methods: {
+    bindCategoryScroll () {
+      let container = this.$el.parentElement
+      while (container && !/(auto|scroll|overlay)/.test(getComputedStyle(container).overflowY)) {
+        container = container.parentElement
+      }
+      this._scrollContainer = container || document.scrollingElement || document.documentElement
+      this._scrollTarget = container || window
+      this._scrollTarget.addEventListener('scroll', this.scheduleCategoryUpdate, { passive: true })
+      this._categoryResizeObserver = new ResizeObserver(this.scheduleCategoryUpdate)
+      this._categoryResizeObserver.observe(this.$el)
+      this._categoryResizeObserver.observe(this._scrollContainer)
+      this.updateActiveCategory()
+    },
+    scheduleCategoryUpdate () {
+      if (this._categoryFrame != null) return
+      this._categoryFrame = requestAnimationFrame(() => {
+        this._categoryFrame = null
+        this.updateActiveCategory()
+      })
+    },
+    categoryViewportTop () {
+      const container = this._scrollContainer
+      return this._scrollTarget === window ? 0 : container.getBoundingClientRect().top + container.clientTop
+    },
+    updateActiveCategory () {
+      if (!this._scrollContainer) return
+      const viewportHeight = this._scrollTarget === window ? window.innerHeight : this._scrollContainer.clientHeight
+      this.categoryNavTop = Math.max(12, (viewportHeight - (this.$refs.categoryNav?.offsetHeight || 0)) / 2)
+      const top = this.categoryViewportTop() + 8
+      let active = null
+      for (const item of this.categories) {
+        const el = this.$refs['category_' + item.key]
+        if (el && el.getBoundingClientRect().top <= top + 1) active = item.key
+      }
+      // 最后一个分类较短时无法滚到顶部，滚动到底部仍应高亮它。
+      const container = this._scrollContainer
+      if (container.scrollTop > 0 && container.scrollTop + container.clientHeight >= container.scrollHeight - 1) {
+        active = this.categories[this.categories.length - 1]?.key ?? null
+      }
+      this.activeCategory = active
+    },
+    async scrollToCategory (item) {
+      this.foldMap[item.key] = false
+      // 先挂载目标分类的控件，再计算位置，避免骨架屏替换后定位偏移。
+      for (const child of item.children) {
+        if (this.loadedOptionMap[child.key] === false) {
+          this.unobserve(child.key)
+          this.loadedOptionMap[child.key] = true
+        }
+      }
+      await this.$nextTick()
+      const el = this.$refs['category_' + item.key]
+      const container = this._scrollContainer
+      if (!el || !container) return
+      const top = container.scrollTop + el.getBoundingClientRect().top - this.categoryViewportTop() - 8
+      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      // 懒加载面板直接定位，避免平滑滚动途中逐项加载控件、改变高度后偏离目标。
+      container.scrollTo({ top: Math.max(0, top), behavior: reducedMotion || this.isLazyLoad ? 'auto' : 'smooth' })
+      this.activeCategory = item.key
+    },
+    switchAccordion (key) {
+      this.foldMap[key] = !this.foldMap[key]
+    },
+    // 会走懒加载的配置项 key：折叠面板取其子项；自定义 render 的项始终直接渲染、不登记
+    collectLazyKeys () {
+      const keys = []
+      for (const item of this.configOptions) {
+        if (item.render) continue
+        if (item.children?.length > 0 || item.type === 'area') {
+          for (const child of item.children || []) keys.push(child.key)
+        } else {
+          keys.push(item.key)
+        }
+      }
+      return keys
+    },
+    // 面板创建时只有 5 个基础项，配置项树到了才超过 20 项，所以创建与每次 configOptions 变化都要同步一次。
+    // 已加载状态只从「未加载」走向「已加载」：从面板上消失的项注销，新出现的项登记为未加载，其余不动
+    syncLazyLoad () {
+      const keys = this.collectLazyKeys()
+      const sig = keys.join('\n')
+      if (sig === this._optionSig) return
+      const prevKeys = new Set(this._optionSig ? this._optionSig.split('\n') : [])
+      this._optionSig = sig
+      if (!this.isLazyLoad) {
+        const optionLength = this.configOptions.reduce((sum, item) => item.children ? sum + item.children.length : sum + 1, 0)
+        if (optionLength <= 20) return
+        this.isLazyLoad = true
+      }
+      const keySet = new Set(keys)
+      for (const key in this.loadedOptionMap) {
+        if (!keySet.has(key)) {
+          this.unobserve(key)
+          delete this.loadedOptionMap[key]
+        }
+      }
+      // 懒加载刚开启时已经渲染在面板上的项（基础 5 项）保持渲染，不倒退成骨架屏
+      for (const key of keys) {
+        if (!(key in this.loadedOptionMap) && !prevKeys.has(key)) this.loadedOptionMap[key] = false
+      }
+      this.$nextTick(() => this.observePlaceholders())
+    },
+    // 给未加载项的骨架屏挂 IntersectionObserver，滚进视口就换成真正的表单项；
+    // 骨架屏因显隐条件重建过（元素变了）的重新挂，其余已挂的跳过
+    observePlaceholders () {
+      for (const key in this.loadedOptionMap) {
+        if (this.loadedOptionMap[key] !== false) continue
+        const el = this.$refs['placeholder_' + key]
+        if (!el) continue
+        const current = this._observers.get(key)
+        if (current && current.el === el) continue
+        if (current) current.observer.disconnect()
+        const observer = new IntersectionObserver(entries => {
+          if (!entries.some(entry => entry.isIntersecting)) return
+          this.unobserve(key)
+          this.loadedOptionMap[key] = true
+        })
+        observer.observe(el)
+        this._observers.set(key, { el, observer })
+      }
+    },
+    unobserve (key) {
+      const current = this._observers.get(key)
+      if (!current) return
+      current.observer.disconnect()
+      this._observers.delete(key)
+    },
+    // 占位用纯 div + CSS 闪动：el-skeleton 每个占位是 5 个组件实例，大面板 77 个占位就是 ~400 个
+    renderPlaceholder (item) {
+      return <div key={item.key} ref={captureRef(this, 'placeholder_' + item.key)} class="epx-visual-component__placeholder" />
+    },
+    renderAccordion (item) {
+      return (
+        <div key={item.key} ref={captureRef(this, 'category_' + item.key)} class={{ 'epx-visual-component__accordion': true, 'is-fold': this.foldMap[item.key] }}>
+          <div class="epx-visual-component__accordion-header">
+            <span>{item.label}</span>
+            <i class="epx-visual-component__accordion-icon el-icon-arrow-up" onClick={this.switchAccordion.bind(this, item.key)}></i>
+          </div>
+          <div class="epx-visual-component__accordion-body">
+            {
+              item.children.map(child => {
+                return this.loadedOptionMap[child.key] !== false ? <epx-visual-config-form-item key={child.key} item={child} /> : this.renderPlaceholder(child)
+              })
+            }
+          </div>
+        </div>
+      )
+    }
+  },
+  render () {
+    return (
+      <div class={['epx-visual-config-options', { 'has-category-nav': this.categories.length > 0 }]}>
+        {this.categories.length > 0 && (
+          <div class="epx-visual-config-category-rail" style={{ top: `${this.categoryNavTop}px` }}>
+            <nav ref="categoryNav" class="epx-visual-config-category-nav" aria-label="配置分类导航">
+              {this.categories.map(item => (
+                <button
+                  key={item.key}
+                  type="button"
+                  class={['epx-visual-config-category-nav__item', { 'is-active': this.activeCategory === item.key }]}
+                  aria-label={item.label}
+                  aria-current={this.activeCategory === item.key ? 'location' : undefined}
+                  onClick={() => this.scrollToCategory(item)}
+                >
+                  <span class="epx-visual-config-category-nav__dot" aria-hidden="true" />
+                  <span class="epx-visual-config-category-nav__label" aria-hidden="true">{item.label}</span>
+                </button>
+              ))}
+            </nav>
+          </div>
+        )}
+        <el-form inline label-position="left" label-width="98px" onVnodeMounted={this.observePlaceholders}>
+          {
+          // 每个配置项是独立子组件（item 引用不变时不重渲染），自定义 render 的项也走它
+            this.configOptions.map(item => {
+              if (item.render) return <epx-visual-config-form-item key={item.key} item={item} />
+              if (item.children?.length > 0 || item.type === 'area') return this.renderAccordion(item)
+              return this.loadedOptionMap[item.key] !== false ? <epx-visual-config-form-item key={item.key} item={item} /> : this.renderPlaceholder(item)
+            })
+          }
+        </el-form>
+      </div>
+    )
+  },
+  mounted () {
+    this.bindCategoryScroll()
+  },
+  beforeUnmount () {
+    this._scrollTarget?.removeEventListener('scroll', this.scheduleCategoryUpdate)
+    this._categoryResizeObserver?.disconnect()
+    if (this._categoryFrame != null) cancelAnimationFrame(this._categoryFrame)
+    for (const key of [...this._observers.keys()]) this.unobserve(key)
+  },
+  created () {
+    this._observers = new Map()
+    this._optionSig = null
+    this.syncLazyLoad()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.epx-visual-config-options {
+  &.has-category-nav {
+    padding-right: 24px;
+  }
+}
+.epx-visual-config-category-rail {
+  position: sticky;
+  height: 0;
+  z-index: 3;
+}
+.epx-visual-config-category-nav {
+  position: absolute;
+  right: -36px;
+  display: flex;
+  flex-direction: column;
+  padding: 6px 0;
+}
+.epx-visual-config-category-nav__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  &:hover .epx-visual-config-category-nav__dot,
+  &:focus-visible .epx-visual-config-category-nav__dot,
+  &.is-active .epx-visual-config-category-nav__dot {
+    background: var(--el-color-primary);
+    transform: scale(1.35);
+  }
+  &:hover .epx-visual-config-category-nav__label,
+  &:focus-visible .epx-visual-config-category-nav__label {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(0, -50%);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--el-color-primary);
+    outline-offset: 1px;
+  }
+}
+.epx-visual-config-category-nav__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--el-text-color-placeholder);
+  transition: background .15s, transform .15s;
+}
+.epx-visual-config-category-nav__label {
+  position: absolute;
+  top: 50%;
+  right: 28px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  background: var(--el-text-color-primary);
+  color: var(--el-bg-color);
+  box-shadow: var(--el-box-shadow-light);
+  font-size: 12px;
+  line-height: 20px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translate(4px, -50%);
+  transition: opacity .15s, transform .15s, visibility .15s;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -4px;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    transform: translateY(-50%) rotate(45deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .epx-visual-config-category-nav__dot,
+  .epx-visual-config-category-nav__label {
+    transition: none;
+  }
+}
+</style>