npm - wizz-method - Versions diffs - 1.0.2 → 1.1.0 - Mend

wizz-method 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (833) hide show

package/src/skills-lib/huashu-design/assets/deck_stage.js ADDED Viewed

@@ -0,0 +1,420 @@
+/**
+ * <deck-stage> — HTML幻灯片外壳web component
+ *
+ * 提供功能：
+ * - 固定尺寸canvas（默认1920×1080）+ auto-scale + letterbox
+ * - 键盘导航（←/→/Space/Home/End/Esc）
+ * - 左右点击区域导航
+ * - slide counter (当前/总数)
+ * - localStorage持久化当前slide
+ * - Speaker notes postMessage (支持外层渲染)
+ * - Hash导航 (#slide-5 跳到第5张)
+ * - Print-to-PDF支持 (Cmd+P / Ctrl+P 一页一slide)
+ * - 自动给每个slide添加 data-screen-label
+ *
+ * 用法：
+ *   <deck-stage>
+ *     <section>Slide 1</section>
+ *     <section>Slide 2</section>
+ *   </deck-stage>
+ *
+ * 自定义尺寸：
+ *   <deck-stage width="1080" height="1920">...</deck-stage>
+ *
+ * Speaker notes：在<head>加
+ *   <script type="application/json" id="speaker-notes">
+ *   ["slide 1 notes", "slide 2 notes"]
+ *   </script>
+ */
+(function() {
+  const STORAGE_KEY_PREFIX = 'deck-stage-slide-';
+  class DeckStage extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+      this._currentSlide = 0;
+      this._slides = [];
+      this._storageKey = STORAGE_KEY_PREFIX + (location.pathname || 'default');
+    }
+    connectedCallback() {
+      this._width = parseInt(this.getAttribute('width')) || 1920;
+      this._height = parseInt(this.getAttribute('height')) || 1080;
+      // Shadow DOM 先渲染（独立于子节点，不受 parser 时机影响）
+      this._render();
+      // 防御：若 script 放在 <head> 里（而非 </deck-stage> 之后），
+      // parser 此刻可能还没处理完子 <section>，querySelectorAll 会返回空。
+      // 延迟到下一个事件循环，确保子节点都已 parse 完毕。
+      const init = () => {
+        this._collectSlides();
+        this._setupEventListeners();
+        this._restoreSlide();
+        this._updateDisplay();
+        this._setupPrintStyles();
+      };
+      if (this.ownerDocument.readyState === 'loading') {
+        // 文档还在 parse，等 DOMContentLoaded 一次搞定所有 section
+        this.ownerDocument.addEventListener('DOMContentLoaded', init, { once: true });
+      } else {
+        // 文档已 parse 完（script 在 body 底部或 defer），下一帧收集即可
+        requestAnimationFrame(init);
+      }
+    }
+    _render() {
+      this.shadowRoot.innerHTML = `
+        <style>
+          :host {
+            display: block;
+            position: fixed;
+            inset: 0;
+            background: #000;
+            overflow: hidden;
+            font-family: -apple-system, 'SF Pro Text', 'PingFang SC', sans-serif;
+          }
+          :host([noscale]) .stage {
+            transform: none !important;
+            top: 0 !important;
+            left: 0 !important;
+          }
+          .stage {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform-origin: top left;
+            will-change: transform;
+            background: #fff;
+          }
+          .slide-wrapper {
+            width: 100%;
+            height: 100%;
+            position: relative;
+          }
+          ::slotted(section) {
+            display: none;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            overflow: hidden;
+          }
+          ::slotted(section.active) {
+            display: block;
+          }
+          .counter {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.6);
+            color: #fff;
+            padding: 6px 14px;
+            border-radius: 999px;
+            font-size: 13px;
+            font-variant-numeric: tabular-nums;
+            z-index: 100;
+            user-select: none;
+            opacity: 0.6;
+            transition: opacity 0.2s;
+          }
+          .counter:hover {
+            opacity: 1;
+          }
+          .nav-zone {
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            width: 15%;
+            cursor: pointer;
+            z-index: 50;
+          }
+          .nav-zone.left { left: 0; }
+          .nav-zone.right { right: 0; }
+          .nav-hint {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 44px;
+            height: 44px;
+            border-radius: 999px;
+            background: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            opacity: 0;
+            transition: opacity 0.2s;
+          }
+          .nav-zone.left .nav-hint { left: 20px; }
+          .nav-zone.right .nav-hint { right: 20px; }
+          .nav-zone:hover .nav-hint {
+            opacity: 1;
+          }
+          @media print {
+            :host {
+              position: static;
+              background: #fff;
+            }
+            .counter, .nav-zone {
+              display: none !important;
+            }
+            .stage {
+              position: static;
+              transform: none !important;
+              page-break-after: always;
+            }
+            ::slotted(section) {
+              display: block !important;
+              position: relative !important;
+              page-break-after: always;
+              width: 100%;
+              height: 100%;
+            }
+          }
+        </style>
+        <div class="stage" id="stage" style="width: ${this._width}px; height: ${this._height}px;">
+          <div class="slide-wrapper">
+            <slot></slot>
+          </div>
+        </div>
+        <div class="nav-zone left" id="navLeft">
+          <div class="nav-hint">‹</div>
+        </div>
+        <div class="nav-zone right" id="navRight">
+          <div class="nav-hint">›</div>
+        </div>
+        <div class="counter" id="counter">1 / 1</div>
+      `;
+    }
+    _collectSlides() {
+      this._slides = Array.from(this.querySelectorAll(':scope > section'));
+      this._slides.forEach((slide, idx) => {
+        if (!slide.hasAttribute('data-screen-label')) {
+          const num = String(idx + 1).padStart(2, '0');
+          slide.setAttribute('data-screen-label', num);
+        }
+        if (!slide.hasAttribute('data-om-validate')) {
+          slide.setAttribute('data-om-validate', '');
+        }
+      });
+    }
+    _setupEventListeners() {
+      window.addEventListener('resize', () => this._updateScale());
+      document.addEventListener('keydown', (e) => {
+        if (e.target.matches('input, textarea, [contenteditable]')) return;
+        switch (e.key) {
+          case 'ArrowRight':
+          case ' ':
+          case 'PageDown':
+            e.preventDefault();
+            this.next();
+            break;
+          case 'ArrowLeft':
+          case 'PageUp':
+            e.preventDefault();
+            this.prev();
+            break;
+          case 'Home':
+            e.preventDefault();
+            this.goTo(0);
+            break;
+          case 'End':
+            e.preventDefault();
+            this.goTo(this._slides.length - 1);
+            break;
+        }
+      });
+      this.shadowRoot.getElementById('navLeft').addEventListener('click', () => this.prev());
+      this.shadowRoot.getElementById('navRight').addEventListener('click', () => this.next());
+      window.addEventListener('hashchange', () => this._handleHash());
+      if (location.hash) {
+        setTimeout(() => this._handleHash(), 0);
+      }
+      const observer = new MutationObserver(() => {
+        if (this.hasAttribute('noscale')) {
+          this._updateScale();
+        }
+      });
+      observer.observe(this, { attributes: true, attributeFilter: ['noscale'] });
+    }
+    _handleHash() {
+      const match = location.hash.match(/^#slide-(\d+)$/);
+      if (match) {
+        const idx = parseInt(match[1]) - 1;
+        if (idx >= 0 && idx < this._slides.length) {
+          this.goTo(idx);
+        }
+      }
+    }
+    _restoreSlide() {
+      try {
+        const stored = localStorage.getItem(this._storageKey);
+        if (stored !== null) {
+          const idx = parseInt(stored);
+          if (idx >= 0 && idx < this._slides.length) {
+            this._currentSlide = idx;
+          }
+        }
+      } catch (e) {}
+    }
+    _saveSlide() {
+      try {
+        localStorage.setItem(this._storageKey, String(this._currentSlide));
+      } catch (e) {}
+    }
+    _updateScale() {
+      if (this.hasAttribute('noscale')) {
+        const stage = this.shadowRoot.getElementById('stage');
+        stage.style.transform = 'none';
+        stage.style.top = '0';
+        stage.style.left = '0';
+        return;
+      }
+      const stage = this.shadowRoot.getElementById('stage');
+      if (!stage) return;
+      const viewportW = window.innerWidth;
+      const viewportH = window.innerHeight;
+      const scale = Math.min(viewportW / this._width, viewportH / this._height);
+      const scaledW = this._width * scale;
+      const scaledH = this._height * scale;
+      const offsetX = (viewportW - scaledW) / 2;
+      const offsetY = (viewportH - scaledH) / 2;
+      stage.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+      stage.style.top = '0';
+      stage.style.left = '0';
+    }
+    _updateDisplay() {
+      this._slides.forEach((slide, idx) => {
+        slide.classList.toggle('active', idx === this._currentSlide);
+      });
+      const counter = this.shadowRoot.getElementById('counter');
+      if (counter) {
+        counter.textContent = `${this._currentSlide + 1} / ${this._slides.length}`;
+      }
+      this._updateScale();
+      try {
+        window.postMessage({
+          slideIndexChanged: this._currentSlide,
+          totalSlides: this._slides.length
+        }, '*');
+      } catch (e) {}
+      try {
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({
+            slideIndexChanged: this._currentSlide,
+            totalSlides: this._slides.length
+          }, '*');
+        }
+      } catch (e) {}
+    }
+    _setupPrintStyles() {
+      const printStyle = document.createElement('style');
+      printStyle.textContent = `
+        @media print {
+          @page {
+            size: ${this._width}px ${this._height}px;
+            margin: 0;
+          }
+          body {
+            margin: 0;
+            padding: 0;
+          }
+          deck-stage {
+            position: static !important;
+          }
+          deck-stage > section {
+            display: block !important;
+            position: relative !important;
+            width: ${this._width}px !important;
+            height: ${this._height}px !important;
+            page-break-after: always;
+            overflow: hidden;
+          }
+          deck-stage > section:last-child {
+            page-break-after: auto;
+          }
+        }
+      `;
+      document.head.appendChild(printStyle);
+    }
+    next() {
+      if (this._currentSlide < this._slides.length - 1) {
+        this._currentSlide++;
+        this._saveSlide();
+        this._updateDisplay();
+      }
+    }
+    prev() {
+      if (this._currentSlide > 0) {
+        this._currentSlide--;
+        this._saveSlide();
+        this._updateDisplay();
+      }
+    }
+    goTo(idx) {
+      if (idx >= 0 && idx < this._slides.length) {
+        this._currentSlide = idx;
+        this._saveSlide();
+        this._updateDisplay();
+      }
+    }
+    get currentSlide() {
+      return this._currentSlide;
+    }
+    get totalSlides() {
+      return this._slides.length;
+    }
+  }
+  customElements.define('deck-stage', DeckStage);
+  window.DeckStage = DeckStage;
+})();

package/src/skills-lib/huashu-design/assets/design_canvas.jsx ADDED Viewed

@@ -0,0 +1,205 @@
+/**
+ * DesignCanvas — 变体并排网格布局
+ *
+ * 用于展示2+个静态设计variations让用户对比选择。
+ * 每个variation有label，可hover放大。
+ *
+ * 用法：
+ *   <DesignCanvas
+ *     title="Hero区设计探索"
+ *     subtitle="3个方向对比"
+ *     columns={3}
+ *   >
+ *     <Variation label="Minimal" description="极简克制版">
+ *       <div>...你的设计1...</div>
+ *     </Variation>
+ *     <Variation label="Editorial" description="杂志编辑风">
+ *       <div>...你的设计2...</div>
+ *     </Variation>
+ *     <Variation label="Brutalist" description="粗粝原始">
+ *       <div>...你的设计3...</div>
+ *     </Variation>
+ *   </DesignCanvas>
+ *
+ * 配合React+Babel使用。放在合适的script里，然后window.DesignCanvas/window.Variation可用。
+ */
+const canvasStyles = {
+  container: {
+    minHeight: '100vh',
+    background: '#F5F5F0',
+    padding: '40px 60px',
+    fontFamily: '-apple-system, "SF Pro Text", "PingFang SC", sans-serif',
+  },
+  header: {
+    marginBottom: 48,
+    maxWidth: 900,
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: 600,
+    marginBottom: 12,
+    color: '#1A1A1A',
+    letterSpacing: '-0.02em',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    lineHeight: 1.5,
+  },
+  grid: {
+    display: 'grid',
+    gap: 32,
+  },
+  cell: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+  },
+  cellHeader: {
+    display: 'flex',
+    alignItems: 'baseline',
+    gap: 12,
+    paddingBottom: 8,
+    borderBottom: '1px solid #E0E0DA',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: '#1A1A1A',
+    letterSpacing: '-0.01em',
+  },
+  description: {
+    fontSize: 13,
+    color: '#888',
+  },
+  frame: {
+    background: '#fff',
+    borderRadius: 4,
+    border: '1px solid #E0E0DA',
+    overflow: 'hidden',
+    position: 'relative',
+    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+    cursor: 'pointer',
+  },
+  frameInner: {
+    position: 'relative',
+    width: '100%',
+  },
+  badge: {
+    position: 'absolute',
+    top: 12,
+    left: 12,
+    background: 'rgba(0, 0, 0, 0.7)',
+    color: '#fff',
+    padding: '3px 8px',
+    borderRadius: 4,
+    fontSize: 11,
+    fontWeight: 500,
+    letterSpacing: '0.5px',
+    textTransform: 'uppercase',
+    zIndex: 10,
+    pointerEvents: 'none',
+  },
+};
+function DesignCanvas({ title, subtitle, columns = 3, children }) {
+  const [expanded, setExpanded] = React.useState(null);
+  const gridStyle = {
+    ...canvasStyles.grid,
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+  };
+  return (
+    <div style={canvasStyles.container}>
+      {(title || subtitle) && (
+        <div style={canvasStyles.header}>
+          {title && <h1 style={canvasStyles.title}>{title}</h1>}
+          {subtitle && <p style={canvasStyles.subtitle}>{subtitle}</p>}
+        </div>
+      )}
+      <div style={gridStyle}>
+        {React.Children.map(children, (child, idx) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child, {
+                _index: idx,
+                _expanded: expanded === idx,
+                _onToggle: () => setExpanded(expanded === idx ? null : idx),
+              })
+            : child
+        )}
+      </div>
+      {expanded !== null && (
+        <div
+          onClick={() => setExpanded(null)}
+          style={{
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0, 0, 0, 0.75)',
+            zIndex: 1000,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 40,
+            cursor: 'zoom-out',
+          }}
+        >
+          <div
+            onClick={e => e.stopPropagation()}
+            style={{
+              background: '#fff',
+              borderRadius: 8,
+              overflow: 'hidden',
+              maxWidth: '90vw',
+              maxHeight: '90vh',
+              position: 'relative',
+            }}
+          >
+            {React.Children.toArray(children)[expanded]}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+function Variation({ label, description, number, children, _index, _expanded, _onToggle, aspectRatio = '4 / 3' }) {
+  const displayNumber = number || String(_index + 1).padStart(2, '0');
+  return (
+    <div style={canvasStyles.cell}>
+      <div style={canvasStyles.cellHeader}>
+        <span style={{ ...canvasStyles.label, color: '#999', fontFamily: 'ui-monospace, monospace', fontSize: 12 }}>
+          {displayNumber}
+        </span>
+        <span style={canvasStyles.label}>{label}</span>
+        {description && <span style={canvasStyles.description}>— {description}</span>}
+      </div>
+      <div
+        onClick={_onToggle}
+        style={{
+          ...canvasStyles.frame,
+          aspectRatio,
+        }}
+        onMouseEnter={e => {
+          e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.08)';
+        }}
+        onMouseLeave={e => {
+          e.currentTarget.style.boxShadow = 'none';
+        }}
+      >
+        <div style={canvasStyles.frameInner}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+if (typeof window !== 'undefined') {
+  Object.assign(window, { DesignCanvas, Variation });
+}