@wapri/ghooks 0.0.0-stage → 0.2.19-beta.0

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from 'vue-hooks-plus';
+export * from './useVh100';
+export * from './useLandscape';
+export * from './useTicket';
+export * from './useLottie';

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from 'vue-hooks-plus';
+export * from "./useVh100";
+export * from "./useLandscape";
+export * from "./useTicket";
+export * from "./useLottie";

package/dist/types/lottie-api.d.ts

@@ -0,0 +1,36 @@
+/**
+ * lottie-api 未提供类型声明，这里按仓库实际用到的 API 补充。
+ * 上游实现参考：https://github.com/bodymovin/lottie-api
+ */
+declare module 'lottie-api' {
+  import type { AnimationItem } from 'lottie-web'
+
+  /** keyPath 命中的单个图层元素，canvas 与 svg 渲染器暴露的字段不同 */
+  export interface LottieApiElement {
+    element: {
+      /** canvas 渲染器下的 Image 元素 */
+      img?: { src: string }
+      /** svg 渲染器下的 <image> 元素 */
+      innerElem?: Element
+    }
+  }
+
+  /** 一个 keyPath 命中的图层集合 */
+  export interface LottieApiKeyPath {
+    getElements: () => LottieApiElement[]
+  }
+
+  /** createAnimationApi 返回的操作句柄 */
+  export interface LottieApi {
+    /** 按图层名/keyPath 取元素 */
+    getKeyPath: (keyPath: string) => LottieApiKeyPath
+    /** 当前渲染器类型 */
+    getRendererType: () => string
+  }
+
+  const lottieApi: {
+    createAnimationApi: (animation: AnimationItem) => LottieApi
+  }
+
+  export default lottieApi
+}

package/dist/useLandscape/demo/basic.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <p>
+      当前屏幕方向：
+      <strong>{{ isLandscape ? '横屏' : '竖屏' }}</strong>
+    </p>
+    <p>当前视口尺寸：{{ width }} × {{ height }}</p>
+    <p style="color: #999">调整窗口宽度（宽>高即为横屏）可实时观察状态变化</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+import { useLandscape } from '@wapri/ghooks'
+
+const isLandscape = useLandscape()
+const width = ref(window.innerWidth)
+const height = ref(window.innerHeight)
+
+const updateSize = () => {
+  width.value = window.innerWidth
+  height.value = window.innerHeight
+}
+
+window.addEventListener('resize', updateSize)
+onUnmounted(() => {
+  window.removeEventListener('resize', updateSize)
+})
+</script>

package/dist/useLandscape/demo/lock.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <p>
+      当前屏幕方向：
+      <strong>{{ isLandscape ? '横屏' : '竖屏' }}</strong>
+    </p>
+    <p style="color: #999">将窗口拉宽至横屏（宽>高），页面立即被遮罩覆盖并提示旋转屏幕；恢复竖屏后遮罩自动消失</p>
+    <div class="content-box">业务内容区域（仅在竖屏时可见）</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLandscape } from '@wapri/ghooks'
+import { os } from '@wapri/gbase'
+
+const isLandscape = useLandscape({
+  lock: !os.isIpad() && !os.isPC(),
+  tip: '请旋转您的屏幕,切换至竖屏模式',
+})
+</script>
+
+<style scoped>
+.content-box {
+  padding: 24px;
+  border: 1px dashed #ccc;
+  border-radius: 4px;
+  color: #666;
+}
+</style>

package/dist/useLandscape/index.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+export interface UseLandscapeOptions {
+    /** 横屏时自动展示遮罩层阻止横屏浏览,竖屏后自动消失,默认 false */
+    lock?: boolean;
+    /** 遮罩层的提示文案,默认 '请旋转您的屏幕,切换至竖屏模式' */
+    tip?: string;
+    /** 遮罩层的层级,默认 9999 */
+    zIndex?: number | string;
+}
+export declare const useLandscape: (options?: UseLandscapeOptions) => Ref<boolean>;

package/dist/useLandscape/index.js

@@ -0,0 +1,56 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+var isClient = typeof window !== 'undefined';
+var DEFAULT_TIP = '请旋转您的屏幕,切换至竖屏模式';
+var DEFAULT_Z_INDEX = 9999;
+var checkIsLandscape = function checkIsLandscape() {
+  return window.innerWidth > window.innerHeight;
+};
+export var useLandscape = function useLandscape() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$lock = options.lock,
+    lock = _options$lock === void 0 ? false : _options$lock,
+    _options$tip = options.tip,
+    tip = _options$tip === void 0 ? DEFAULT_TIP : _options$tip,
+    _options$zIndex = options.zIndex,
+    zIndex = _options$zIndex === void 0 ? DEFAULT_Z_INDEX : _options$zIndex;
+  var isLandscape = ref(isClient ? checkIsLandscape() : false);
+  var mask = null;
+  var removeMask = function removeMask() {
+    if (!mask) return;
+    mask.remove();
+    mask = null;
+  };
+  var createMask = function createMask() {
+    if (mask) return;
+    var maskNode = document.createElement('div');
+    maskNode.style.cssText = ['position: fixed', 'top: 0', 'right: 0', 'bottom: 0', 'left: 0', "z-index: ".concat(zIndex), 'display: flex', 'align-items: center', 'justify-content: center', 'background: #fff', 'touch-action: none'].join(';');
+    var text = document.createElement('p');
+    text.style.cssText = ['margin: 0', 'padding: 0 32px', 'font-size: 16px', 'line-height: 1.6', 'color: #333', 'text-align: center'].join(';');
+    text.textContent = tip;
+    maskNode.appendChild(text);
+    document.body.appendChild(maskNode);
+    mask = maskNode;
+  };
+  var update = function update() {
+    isLandscape.value = checkIsLandscape();
+    if (!lock) return;
+    if (isLandscape.value) {
+      createMask();
+    } else {
+      removeMask();
+    }
+  };
+  onMounted(function () {
+    if (!isClient) return;
+    update();
+    window.addEventListener('orientationchange', update);
+    window.addEventListener('resize', update);
+  });
+  onBeforeUnmount(function () {
+    if (!isClient) return;
+    window.removeEventListener('orientationchange', update);
+    window.removeEventListener('resize', update);
+    removeMask();
+  });
+  return isLandscape;
+};

package/dist/useLottie/demo/basic.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLottie } from '@wapri/ghooks'
+import animationData from './包邮.json'
+
+const container = ref<HTMLElement>()
+const status = ref('等待加载')
+
+const { instance, play, pause, stop, playSegments, playAnimation, setLoop, getDuration } = useLottie(
+  container,
+  animationData,
+  {
+    loop: true,
+    onReady: (item) => {
+      status.value = `加载完成，共 ${item.totalFrames} 帧`
+    },
+  },
+)
+
+/** 一次播放两段区间 */
+const handleSegmentPlay = () => {
+  setLoop(true)
+  status.value = '区间播放：[0,24] + [24,72]'
+  playSegments([
+    [0, 24],
+    [24, 72],
+  ])
+}
+
+/** 关闭循环后按顺序异步播放两段，每段结束才进入下一段 */
+const handleAsyncPlay = async () => {
+  setLoop(false)
+  status.value = '第一段开始'
+  await playAnimation([[0, 24]], true)
+  status.value = '第一段结束'
+  await new Promise((resolve) => setTimeout(resolve, 600))
+  status.value = '第二段开始'
+  await playAnimation([24, 72])
+  status.value = '第二段结束'
+}
+</script>
+
+<template>
+  <div class="lottie-demo">
+    <div
+      ref="container"
+      class="lottie-demo__stage"
+    />
+
+    <div class="lottie-demo__panel">
+      <div class="lottie-demo__actions">
+        <button
+          type="button"
+          @click="play"
+        >
+          播放
+        </button>
+        <button
+          type="button"
+          @click="pause"
+        >
+          暂停
+        </button>
+        <button
+          type="button"
+          @click="stop"
+        >
+          停止
+        </button>
+        <button
+          type="button"
+          @click="handleSegmentPlay"
+        >
+          帧播放
+        </button>
+        <button
+          type="button"
+          @click="handleAsyncPlay"
+        >
+          异步多段动画
+        </button>
+      </div>
+
+      <p class="lottie-demo__status">{{ status }}</p>
+      <p class="lottie-demo__status">
+        {{ instance ? `实例已就绪，总时长 ${getDuration(false).toFixed(2)}s` : '实例加载中…' }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lottie-demo {
+  display: flex;
+  max-width: 760px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  color: #1f2937;
+}
+
+.lottie-demo__stage {
+  width: 240px;
+  height: 240px;
+  flex: 0 0 auto;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.lottie-demo__panel {
+  flex: 1;
+  min-width: 260px;
+}
+
+.lottie-demo__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.lottie-demo__actions button {
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    color 0.2s;
+}
+
+.lottie-demo__actions button:hover {
+  border-color: #f97316;
+  color: #ea580c;
+}
+
+.lottie-demo__status {
+  margin: 14px 0 0;
+  color: #6b7280;
+  font-size: 13px;
+  line-height: 1.8;
+}
+</style>

package/dist/useLottie/demo/remote.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useLottie } from '@wapri/ghooks'
+
+/** 远程 json 地址：交给 lottie-web 自己发请求，不需要先 fetch（示例地址，换成自己的 CDN 即可） */
+const REMOTE_URL = 'https://cdn.example.com/lottie/loading.json'
+
+const container = ref<HTMLElement>()
+const status = ref('远程资源加载中…')
+
+const { instance, play, pause, stop, playSegments, playAnimation, setLoop, getDuration, on } = useLottie(
+  container,
+  null,
+  {
+    path: REMOTE_URL,
+    loop: true,
+    onReady: (item) => {
+      status.value = `远程资源加载完成，共 ${item.totalFrames} 帧`
+    },
+  },
+)
+
+// useLottie 在 onMounted 里创建实例，这里注册晚于它，所以能拿到实例
+onMounted(() => {
+  on('data_failed', () => {
+    status.value = '远程资源加载失败：请检查地址是否可访问、以及是否允许跨域'
+  })
+})
+
+/** 一次播放两段区间 */
+const handleSegmentPlay = () => {
+  setLoop(true)
+  status.value = '区间播放：[0,24] + [24,72]'
+  playSegments([
+    [0, 24],
+    [24, 72],
+  ])
+}
+
+/** 关闭循环后按顺序异步播放两段，每段结束才进入下一段 */
+const handleAsyncPlay = async () => {
+  setLoop(false)
+  status.value = '第一段开始'
+  await playAnimation([[0, 24]], true)
+  status.value = '第一段结束'
+  await new Promise((resolve) => setTimeout(resolve, 600))
+  status.value = '第二段开始'
+  await playAnimation([24, 72])
+  status.value = '第二段结束'
+}
+</script>
+
+<template>
+  <div class="lottie-remote-demo">
+    <div
+      ref="container"
+      class="lottie-remote-demo__stage"
+    ></div>
+
+    <div class="lottie-remote-demo__panel">
+      <div class="lottie-remote-demo__actions">
+        <button
+          type="button"
+          @click="play"
+        >
+          播放
+        </button>
+        <button
+          type="button"
+          @click="pause"
+        >
+          暂停
+        </button>
+        <button
+          type="button"
+          @click="stop"
+        >
+          停止
+        </button>
+        <button
+          type="button"
+          @click="handleSegmentPlay"
+        >
+          帧播放
+        </button>
+        <button
+          type="button"
+          @click="handleAsyncPlay"
+        >
+          异步多段动画
+        </button>
+      </div>
+
+      <p class="lottie-remote-demo__status">{{ status }}</p>
+      <p class="lottie-remote-demo__status">
+        {{ instance ? `实例已就绪，总时长 ${getDuration(false).toFixed(2)}s` : '实例加载中…' }}
+      </p>
+      <p class="lottie-remote-demo__url">{{ REMOTE_URL }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lottie-remote-demo {
+  display: flex;
+  max-width: 760px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  color: #1f2937;
+}
+
+.lottie-remote-demo__stage {
+  width: 240px;
+  height: 240px;
+  flex: 0 0 auto;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.lottie-remote-demo__panel {
+  flex: 1;
+  min-width: 260px;
+}
+
+.lottie-remote-demo__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.lottie-remote-demo__actions button {
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    color 0.2s;
+}
+
+.lottie-remote-demo__actions button:hover {
+  border-color: #f97316;
+  color: #ea580c;
+}
+
+.lottie-remote-demo__status {
+  margin: 14px 0 0;
+  color: #6b7280;
+  font-size: 13px;
+  line-height: 1.8;
+}
+
+.lottie-remote-demo__url {
+  margin: 8px 0 0;
+  color: #9ca3af;
+  font-size: 12px;
+  line-height: 1.6;
+  word-break: break-all;
+}
+</style>