npmapps 1.2.0 → 1.3.1

package/app/wujie-wk/wujie-vue2-child/src/components/EventCalendar/CalendarSkeleton.vue

@@ -1,147 +0,0 @@
-<template>
-  <div class="ec-skeleton" aria-busy="true" aria-live="polite">
-    <div
-      v-for="row in rows"
-      :key="row"
-      class="ec-skeleton__row"
-    >
-      <div
-        v-for="col in 7"
-        :key="col"
-        class="ec-skeleton__cell"
-        :style="{ minHeight: minRowHeight + 'px' }"
-      >
-        <!-- 日期占位 -->
-        <span class="ec-skeleton__block ec-skeleton__date"></span>
-        <!-- 条目占位：每格数量做一点变化，视觉上更接近真实数据 -->
-        <span
-          v-for="n in itemCountOf(row, col)"
-          :key="n"
-          class="ec-skeleton__block ec-skeleton__item"
-          :style="{ height: itemHeight + 'px' }"
-        ></span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-/**
- * CalendarSkeleton —— 日历骨架屏
- * ------------------------------------------------------------------
- * 数据返回前占位，避免布局跳动和白屏。
- * 条目数量用「行列下标的确定性函数」生成，不用随机数，
- * 保证每次渲染骨架形状一致（随机形状会让人误以为在闪烁）。
- */
-export default {
-  name: 'CalendarSkeleton',
-
-  props: {
-    /** 骨架行数 */
-    rows: {
-      type: Number,
-      default: 5
-    },
-    /** 单元格最小高度，与日历主体保持一致 */
-    minRowHeight: {
-      type: Number,
-      default: 118
-    },
-    /** 条目占位高度 */
-    itemHeight: {
-      type: Number,
-      default: 28
-    }
-  },
-
-  methods: {
-    /**
-     * 依据行列位置推导条目数量（0~3）
-     * 周日(col=1) / 周六(col=7) 留空，模拟真实业务里周末排期少的形态
-     */
-    itemCountOf(row, col) {
-      if (col === 1 || col === 7) return 0
-      return ((row + col) % 3) + 1
-    }
-  }
-}
-</script>
-
-<style scoped>
-.ec-skeleton {
-  width: 100%;
-}
-
-.ec-skeleton__row {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-
-.ec-skeleton__cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 10px;
-  box-sizing: border-box;
-  border-right: 1px solid var(--ec-border-light, #f0f2f5);
-  border-bottom: 1px solid var(--ec-border-light, #f0f2f5);
-}
-
-.ec-skeleton__cell:nth-child(7n) {
-  border-right: none;
-}
-
-.ec-skeleton__row:last-child .ec-skeleton__cell {
-  border-bottom: none;
-}
-
-/* 占位块：底色 + 从左到右扫过的高光 */
-.ec-skeleton__block {
-  display: block;
-  border-radius: 4px;
-  background: #f0f2f5;
-  background-image: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.85) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
-  animation: ec-skeleton-shimmer 1.4s ease-in-out infinite;
-}
-
-.ec-skeleton__date {
-  width: 56px;
-  height: 15px;
-}
-
-.ec-skeleton__item {
-  width: 100%;
-}
-
-/* 让每一格的高光有轻微时间差，波浪感更自然 */
-.ec-skeleton__cell:nth-child(2n) .ec-skeleton__block {
-  animation-delay: 0.12s;
-}
-.ec-skeleton__cell:nth-child(3n) .ec-skeleton__block {
-  animation-delay: 0.24s;
-}
-
-@keyframes ec-skeleton-shimmer {
-  0% {
-    background-position: 150% 0;
-  }
-  100% {
-    background-position: -50% 0;
-  }
-}
-
-/* 尊重系统「减少动态效果」设置 */
-@media (prefers-reduced-motion: reduce) {
-  .ec-skeleton__block {
-    animation: none;
-  }
-}
-</style>

package/app/wujie-wk/wujie-vue2-child/src/components/EventCalendar/CodeBlock.vue

@@ -1,199 +0,0 @@
-<template>
-  <div class="code-block" :class="{ 'is-open': open }">
-    <button
-      v-if="!alwaysOpen"
-      type="button"
-      class="code-block__toggle"
-      @click="open = !open"
-    >
-      <svg class="code-block__caret" viewBox="0 0 12 12" aria-hidden="true">
-        <path d="M4.5 2.5 L8.5 6 L4.5 9.5" fill="none" stroke="currentColor"
-              stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <span>{{ open ? '收起代码' : '查看代码' }}</span>
-    </button>
-
-    <div v-show="open" class="code-block__body">
-      <button
-        type="button"
-        class="code-block__copy"
-        :class="{ 'is-done': copied }"
-        @click="copy"
-      >{{ copied ? '已复制' : '复制' }}</button>
-      <pre class="code-block__pre"><code>{{ code }}</code></pre>
-    </div>
-  </div>
-</template>
-
-<script>
-/**
- * CodeBlock —— 示例页里的可折叠代码块
- * ------------------------------------------------------------------
- * 代码内容以字符串形式传入（不参与 Vue 模板编译），
- * 因此片段里可以放心写 {{ }}、v-if 等语法。
- */
-export default {
-  name: 'CodeBlock',
-
-  props: {
-    /** 代码字符串 */
-    code: {
-      type: String,
-      default: ''
-    },
-    /** 始终展开，不显示折叠按钮 */
-    alwaysOpen: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      open: this.alwaysOpen,
-      copied: false
-    }
-  },
-
-  beforeDestroy() {
-    if (this._copyTimer) clearTimeout(this._copyTimer)
-  },
-
-  methods: {
-    copy() {
-      const done = () => {
-        this.copied = true
-        if (this._copyTimer) clearTimeout(this._copyTimer)
-        this._copyTimer = setTimeout(() => {
-          this.copied = false
-        }, 1600)
-      }
-
-      // 优先用 Clipboard API；非 HTTPS / 旧浏览器回退到 execCommand
-      if (navigator.clipboard && window.isSecureContext) {
-        navigator.clipboard.writeText(this.code).then(done).catch(this.fallbackCopy)
-        return
-      }
-      this.fallbackCopy()
-    },
-
-    fallbackCopy() {
-      const ta = document.createElement('textarea')
-      ta.value = this.code
-      ta.style.position = 'fixed'
-      ta.style.opacity = '0'
-      document.body.appendChild(ta)
-      ta.select()
-      try {
-        document.execCommand('copy')
-        this.copied = true
-        if (this._copyTimer) clearTimeout(this._copyTimer)
-        this._copyTimer = setTimeout(() => {
-          this.copied = false
-        }, 1600)
-      } finally {
-        document.body.removeChild(ta)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.code-block {
-  margin-top: 14px;
-}
-
-.code-block__toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px 4px 6px;
-  border: 1px dashed #dcdfe6;
-  border-radius: 8px;
-  background: transparent;
-  color: #909399;
-  font-size: 13px;
-  cursor: pointer;
-  transition: color 0.18s, border-color 0.18s;
-}
-
-.code-block__toggle:hover {
-  color: #3d6cf0;
-  border-color: #3d6cf0;
-}
-
-.code-block__caret {
-  width: 12px;
-  height: 12px;
-  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.code-block.is-open .code-block__caret {
-  transform: rotate(90deg);
-}
-
-.code-block__body {
-  position: relative;
-  margin-top: 10px;
-}
-
-.code-block__copy {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 1;
-  padding: 3px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.08);
-  color: #b8c0cc;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.18s;
-}
-
-.code-block__copy:hover {
-  background: rgba(255, 255, 255, 0.16);
-  color: #fff;
-}
-
-.code-block__copy.is-done {
-  border-color: rgba(16, 163, 127, 0.5);
-  color: #4ade80;
-}
-
-.code-block__pre {
-  margin: 0;
-  padding: 16px 18px;
-  border-radius: 10px;
-  background: #1f2430;
-  color: #cdd6e4;
-  font-family: Consolas, Monaco, 'Courier New', monospace;
-  font-size: 12.5px;
-  line-height: 1.7;
-  overflow-x: auto;
-  white-space: pre;
-  tab-size: 2;
-}
-
-.code-block__pre code {
-  padding: 0;
-  background: transparent;
-  color: inherit;
-  font-size: inherit;
-}
-
-.code-block__pre::-webkit-scrollbar {
-  height: 8px;
-}
-
-.code-block__pre::-webkit-scrollbar-thumb {
-  background: #3a4254;
-  border-radius: 4px;
-}
-
-.code-block__pre::-webkit-scrollbar-track {
-  background: transparent;
-}
-</style>

package/app/wujie-wk/wujie-vue2-child/src/components/EventCalendar/MonthSelect.vue

@@ -1,376 +0,0 @@
-<template>
-  <div
-    class="ec-select"
-    :class="{ 'is-open': visible, 'is-disabled': disabled }"
-    ref="root"
-  >
-    <!-- 触发器 -->
-    <div
-      class="ec-select__trigger"
-      role="combobox"
-      :aria-expanded="String(visible)"
-      :aria-disabled="String(disabled)"
-      :tabindex="disabled ? -1 : 0"
-      @click="toggle"
-      @keydown="handleTriggerKeydown"
-    >
-      <span class="ec-select__label">{{ currentLabel }}</span>
-      <svg class="ec-select__arrow" viewBox="0 0 12 12" aria-hidden="true">
-        <path d="M2 4.2 L6 8.2 L10 4.2" fill="none" stroke="currentColor" stroke-width="1.6"
-              stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-    </div>
-
-    <!-- 下拉面板 -->
-    <transition name="ec-select-fade">
-      <div
-        v-show="visible"
-        class="ec-select__dropdown"
-        :class="`is-${placement}`"
-        role="listbox"
-      >
-        <ul class="ec-select__list" ref="list">
-          <li
-            v-for="(opt, index) in options"
-            :key="opt.value"
-            class="ec-select__option"
-            :class="{
-              'is-selected': opt.value === value,
-              'is-active': index === activeIndex
-            }"
-            role="option"
-            :aria-selected="String(opt.value === value)"
-            @click="select(opt)"
-            @mouseenter="activeIndex = index"
-          >
-            <span class="ec-select__option-text">{{ opt.label }}</span>
-            <svg
-              v-if="opt.value === value"
-              class="ec-select__check"
-              viewBox="0 0 12 12"
-              aria-hidden="true"
-            >
-              <path d="M2 6.3 L4.6 8.9 L10 3.4" fill="none" stroke="currentColor"
-                    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-          </li>
-          <li v-if="!options.length" class="ec-select__empty">暂无可选月份</li>
-        </ul>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-/**
- * MonthSelect —— 自研轻量下拉选择器
- * ------------------------------------------------------------------
- * 需求要求日历组件不依赖任何第三方 UI 库，因此这里手写一个下拉框，
- * 只实现日历需要的能力：单选、点击外部关闭、键盘操作、选中态。
- *
- * 事件：
- *  - change(value, option) 选中项变化
- *  - visible-change(visible) 面板展开 / 收起（日历用它来暂停轮播）
- */
-export default {
-  name: 'MonthSelect',
-
-  props: {
-    /** 当前值 */
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    /** 选项 [{ label, value }] */
-    options: {
-      type: Array,
-      default: () => []
-    },
-    /** 无选项时的占位文案 */
-    placeholder: {
-      type: String,
-      default: '请选择'
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /** 面板弹出方向 */
-    placement: {
-      type: String,
-      default: 'bottom-end',
-      validator: (v) => ['bottom-start', 'bottom-end'].includes(v)
-    }
-  },
-
-  data() {
-    return {
-      visible: false,
-      /** 键盘高亮项索引 */
-      activeIndex: -1
-    }
-  },
-
-  computed: {
-    currentLabel() {
-      const hit = this.options.find((o) => o.value === this.value)
-      return hit ? hit.label : this.placeholder
-    }
-  },
-
-  watch: {
-    visible(val) {
-      this.$emit('visible-change', val)
-      if (val) {
-        // 展开时把高亮定位到当前选中项
-        this.activeIndex = this.options.findIndex((o) => o.value === this.value)
-        this.$nextTick(this.scrollToActive)
-      }
-    }
-  },
-
-  mounted() {
-    // 用捕获阶段监听，避免子元素 stopPropagation 后无法关闭
-    document.addEventListener('click', this.handleDocumentClick, true)
-  },
-
-  beforeDestroy() {
-    document.removeEventListener('click', this.handleDocumentClick, true)
-  },
-
-  methods: {
-    toggle() {
-      if (this.disabled) return
-      this.visible = !this.visible
-    },
-
-    close() {
-      this.visible = false
-    },
-
-    select(opt) {
-      this.close()
-      if (opt.value === this.value) return
-      this.$emit('change', opt.value, opt)
-    },
-
-    /** 点击组件外部时收起面板 */
-    handleDocumentClick(e) {
-      const root = this.$refs.root
-      if (!this.visible || !root) return
-      if (!root.contains(e.target)) this.close()
-    },
-
-    /** 键盘无障碍：上下切换、回车选中、ESC 关闭 */
-    handleTriggerKeydown(e) {
-      if (this.disabled) return
-      const { key } = e
-
-      if (key === 'Escape' || key === 'Tab') {
-        this.close()
-        return
-      }
-
-      if (key === 'Enter' || key === ' ') {
-        e.preventDefault()
-        if (!this.visible) {
-          this.visible = true
-        } else if (this.activeIndex > -1 && this.options[this.activeIndex]) {
-          this.select(this.options[this.activeIndex])
-        }
-        return
-      }
-
-      if (key === 'ArrowDown' || key === 'ArrowUp') {
-        e.preventDefault()
-        if (!this.visible) {
-          this.visible = true
-          return
-        }
-        const len = this.options.length
-        if (!len) return
-        const step = key === 'ArrowDown' ? 1 : -1
-        this.activeIndex = (this.activeIndex + step + len) % len
-        this.scrollToActive()
-      }
-    },
-
-    /** 让键盘高亮项保持在可视区域内 */
-    scrollToActive() {
-      const list = this.$refs.list
-      if (!list) return
-      const el = list.children[this.activeIndex]
-      if (el && el.scrollIntoView) {
-        el.scrollIntoView({ block: 'nearest' })
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.ec-select {
-  position: relative;
-  display: inline-block;
-  font-size: 14px;
-  user-select: none;
-}
-
-/* ------------------------------ 触发器 ------------------------------ */
-.ec-select__trigger {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 108px;
-  height: 34px;
-  padding: 0 10px 0 12px;
-  box-sizing: border-box;
-  border: 1px solid var(--ec-border, #e4e7ed);
-  border-radius: var(--ec-radius, 8px);
-  background: var(--ec-select-bg, #fff);
-  color: var(--ec-text, #303133);
-  cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-}
-
-.ec-select__trigger:hover {
-  border-color: var(--ec-primary, #3d6cf0);
-}
-
-.ec-select__trigger:focus-visible {
-  outline: none;
-  border-color: var(--ec-primary, #3d6cf0);
-  box-shadow: 0 0 0 3px var(--ec-primary-ghost, rgba(61, 108, 240, 0.14));
-}
-
-.ec-select.is-open .ec-select__trigger {
-  border-color: var(--ec-primary, #3d6cf0);
-  box-shadow: 0 0 0 3px var(--ec-primary-ghost, rgba(61, 108, 240, 0.14));
-}
-
-.ec-select.is-disabled .ec-select__trigger {
-  cursor: not-allowed;
-  background: #f5f7fa;
-  color: #c0c4cc;
-  border-color: #e4e7ed;
-}
-
-.ec-select__label {
-  flex: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  line-height: 1;
-}
-
-.ec-select__arrow {
-  flex: none;
-  width: 12px;
-  height: 12px;
-  color: var(--ec-text-secondary, #909399);
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.ec-select.is-open .ec-select__arrow {
-  transform: rotate(180deg);
-  color: var(--ec-primary, #3d6cf0);
-}
-
-/* ------------------------------ 下拉面板 ------------------------------ */
-.ec-select__dropdown {
-  position: absolute;
-  top: calc(100% + 6px);
-  z-index: 20;
-  min-width: 100%;
-  padding: 5px;
-  box-sizing: border-box;
-  border: 1px solid var(--ec-border, #e4e7ed);
-  border-radius: var(--ec-radius, 8px);
-  background: #fff;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-}
-
-.ec-select__dropdown.is-bottom-end {
-  right: 0;
-}
-
-.ec-select__dropdown.is-bottom-start {
-  left: 0;
-}
-
-.ec-select__list {
-  max-height: 236px;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  list-style: none;
-}
-
-.ec-select__option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  height: 32px;
-  padding: 0 10px;
-  border-radius: 6px;
-  color: var(--ec-text, #303133);
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.16s, color 0.16s;
-}
-
-.ec-select__option.is-active {
-  background: var(--ec-primary-ghost, rgba(61, 108, 240, 0.1));
-}
-
-.ec-select__option.is-selected {
-  color: var(--ec-primary, #3d6cf0);
-  font-weight: 600;
-}
-
-.ec-select__check {
-  flex: none;
-  width: 12px;
-  height: 12px;
-}
-
-.ec-select__empty {
-  padding: 10px;
-  color: var(--ec-text-placeholder, #c0c4cc);
-  text-align: center;
-}
-
-/* 下拉滚动条 */
-.ec-select__list::-webkit-scrollbar {
-  width: 6px;
-}
-.ec-select__list::-webkit-scrollbar-thumb {
-  background: #dcdfe6;
-  border-radius: 3px;
-}
-.ec-select__list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* ------------------------------ 动画 ------------------------------ */
-.ec-select-fade-enter-active,
-.ec-select-fade-leave-active {
-  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
-  transform-origin: top center;
-}
-
-.ec-select-fade-enter,
-.ec-select-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-6px) scaleY(0.94);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ec-select__arrow,
-  .ec-select-fade-enter-active,
-  .ec-select-fade-leave-active {
-    transition: none;
-  }
-}
-</style>