npmapps 1.1.4 → 1.1.6

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

@@ -0,0 +1,147 @@
+<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

@@ -0,0 +1,199 @@
+<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

@@ -0,0 +1,376 @@
+<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>