vhall-mini-sdk 0.2.0 → 0.3.0

package/README.md

@@ -8,43 +8,138 @@
 
 ## 快速开始
 
-1. 安装sdk组件
+### 1. 安装 SDK 组件
 
 ```bash
-# npm安装
+# npm 安装
 npm install vhall-mini-sdk
 
-# yarn安装
+# yarn 安装
 yarn add vhall-mini-sdk
 ```
 
-uni-app工程安装完成后，会在当前工程目录下自动生成 wxcomponents/vhall-mini-sdk 目录。
+> **uni-app 开发注意**：安装完成后，会在当前工程目录下自动生成 `wxcomponents/vhall-mini-sdk` 目录。
 
-2. 构建npm（原生微信小程序开发接入需要此步骤）
+### 2. 构建 npm（仅原生微信小程序需要）
 
-微信开发者工具的菜单栏找到 “工具→构建npm” ，点击执行生成 “miniprogram_npm/vhall-mini-sdk“ 目录.
+在微信开发者工具菜单栏点击 **工具 → 构建 npm**，执行后生成 `miniprogram_npm/vhall-mini-sdk` 目录。
 
-3. SDK引入
+### 3. 引入 SDK
 
-(1) 原生微信小程序开发
+#### (1) 原生微信小程序开发
+
+支持 `require` 和 `import` 两种方式引入：
 
 ```js
+// require方式
 const VhallMiniSdk = require('vhall-mini-sdk/sdk/main/index.js');
 const CustomMenuServer = require('vhall-mini-sdk/sdk/plugins/CustomMenuServer.js');
 const ChatServer = require('vhall-mini-sdk/sdk/plugins/ChatServer.js');
 const ProductServer = require('vhall-mini-sdk/sdk/plugins/ProductServer.js');
 const InteractServer = require('vhall-mini-sdk/sdk/plugins/InteractServer.js');
+const LotteryServer = require('vhall-mini-sdk/sdk/plugins/LotteryServer.js');
+const MallRewardServer = require('vhall-mini-sdk/sdk/plugins/MallRewardServer.js');
+const InviteCardServer = require('vhall-mini-sdk/sdk/plugins/InviteCardServer.js');
+
+// import方式
+import VhallMiniSdk from 'vhall-mini-sdk/sdk/main/index.js';
+import ChatServer from 'vhall-mini-sdk/sdk/plugins/ChatServer.js';
+import CustomMenuServer from 'vhall-mini-sdk/sdk/plugins/CustomMenuServer.js';
+import InteractServer from 'vhall-mini-sdk/sdk/plugins/InteractServer.js';
+import InviteCardServer from 'vhall-mini-sdk/sdk/plugins/InviteCardServer.js';
+import LotteryServer from 'vhall-mini-sdk/sdk/plugins/LotteryServer.js';
+import MallRewardServer from 'vhall-mini-sdk/sdk/plugins/MallRewardServer.js';
+import ProductServer from 'vhall-mini-sdk/sdk/plugins/ProductServer.js';
 ```
 
-(2) uni-app小程序开发
+#### (2) uni-app 小程序开发
+
+> **⚠️ 重点：必须用 `require` 引入，不能用 `import`**
+>
+> `wxcomponents` 目录专门存放“原生小程序组件/库”，uni-app 为保证这些原生代码的纯净性与兼容性，会将其排除在编译流程之外。因此**不能用 Web 标准的 `import` 读取**（其 `export default` 未被编译成可执行代码），必须降级使用小程序标准的 `require` 加载。
 
 ```js
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
+// wxcomponents目录是专门用来存放“原生小程序组件/库”的，uni-app为了保证这些原生代码的纯净性和兼容性，特意把它们排除在编译流程之外。
+// 所以，我们不能用 Web 标准的 import 去读取它（因为 export default 没被转换成任何可执行代码），你必须降级使用小程序标准的 require 来加载它。
 const VhallMiniSdk = require('../../wxcomponents/vhall-mini-sdk/sdk/main/index.js');
+// 下面的Server插件可按需加载
 const CustomMenuServer = require('../../wxcomponents/vhall-mini-sdk/sdk/plugins/CustomMenuServer.js');
 const ChatServer = require('../../wxcomponents/vhall-mini-sdk/sdk/plugins/ChatServer.js');
 const ProductServer = require('../../wxcomponents/vhall-mini-sdk/sdk/plugins/ProductServer.js');
 const InteractServer = require('../../wxcomponents/vhall-mini-sdk/sdk/plugins/InteractServer.js');
+const LotteryServer = require('../../wxcomponents/vhall-mini-sdk/sdk/plugins/LotteryServer.js');
+const MallRewardServer = require('../../wxcomponents/vhall-mini-sdk/sdk/plugins/MallRewardServer.js');
+const InviteCardServer = require('../../wxcomponents/vhall-mini-sdk/sdk/plugins/InviteCardServer.js');
+
+// 布尔值用ref包裹，.value修改值
+const sdkReady = ref(false);
+// SDK实例不需要响应式，普通变量即可
+let sdkInstance = null;
+let unListener =null;
+async function initSdk() {
+  const options = {
+    app_key: '',
+    email: '',
+    sign: '',
+    signedat: ,
+    username: '',
+    webinar_id: '',
+    head: 'https://cnstatic01.e.vhall.com/common-static/images/default_avatar.png',
+    modules: [
+      CustomMenuServer,
+      ChatServer,
+      ProductServer,
+      InteractServer,
+      LotteryServer,
+      MallRewardServer,
+      InviteCardServer,
+    ],
+  };
+
+  try {
+    // 创建实例
+    sdkInstance = new VhallMiniSdk(options);
+
+    // 事件监听
+    unListener = sdkInstance.on({
+      [VhallMiniSdk.EVENT.NET_STATE_CHANGE]: (state) => {
+        console.log('网络状态变化', state);
+      },
+      [VhallMiniSdk.EVENT.SDK_READY]: () => {
+        console.log('initLiveRoom is ready');
+      },
+      [VhallMiniSdk.EVENT.INIT_FAILED]: (error) => {
+        console.error('initLiveRoom is failed', error);
+      },
+      [VhallMiniSdk.EVENT.ERROR]: (err) => {
+        console.error('VhallMiniSdk error:', JSON.stringify(err));
+      },
+    });
+
+    // 初始化直播间
+    await sdkInstance.init();
+
+    if (sdkInstance.isReady()) {
+      // 关键：ref变量修改必须加 .value
+      sdkReady.value = true;
+    }
+  } catch (error) {
+    console.warn('VhallMiniSdk init failed', error);
+  }
+}
+
+onMounted(() => {
+  initSdk();
+});
+
+onUnmounted(() => {
+  unListener?.();
+  sdkInstance?.destroy();
+  sdkInstance = null;
+});
 ```
 
-4. 更多接入支持，参考文档: https://vhall.apifox.cn/dev/sdk/wmp/quick-start
+### 4. 更多接入支持
+
+参考文档：<https://vhall.apifox.cn/dev/sdk/wmp/quick-start>

package/lib/components/announcement/announ-banner/index.js

@@ -0,0 +1,40 @@
+Component({
+  properties: {
+    text: {
+      type: String,
+      value: '',
+    },
+    show: {
+      type: Boolean,
+      value: false,
+    },
+    static: {
+      type: Boolean,
+      value: false,
+    },
+    // 直播间模式：0=竖屏，1=横屏（样式区分）
+    mode: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    duration: 6, // 滚动动画时长（秒），按文字长度动态计算
+  },
+
+  observers: {
+    // 文字越长滚动时长越大，保持匀速观感
+    text(val) {
+      const len = (val || '').length;
+      const duration = Math.max(4, Math.ceil(len * 0.2));
+      this.setData({ duration });
+    },
+  },
+
+  methods: {
+    onClose() {
+      this.triggerEvent('close');
+    },
+  },
+});

package/lib/components/announcement/announ-banner/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/lib/components/announcement/announ-banner/index.wxml

@@ -0,0 +1,13 @@
+<view wx:if="{{show }}" class="announ-banner {{static ? 'announ-banner--static' : ''}} mode-{{mode}}">
+  <view class="announ-banner-icon">
+    <view class="announ-banner-icon__box"></view>
+    <view class="announ-banner-icon__body"></view>
+    <view class="announ-banner-icon__wave announ-banner-icon__wave--top"></view>
+    <view class="announ-banner-icon__wave announ-banner-icon__wave--mid"></view>
+    <view class="announ-banner-icon__wave announ-banner-icon__wave--bottom"></view>
+  </view>
+  <view class="announ-banner-text-wrap">
+    <view class="announ-banner-text" style="animation-duration:{{duration}}s">{{text}}</view>
+  </view>
+  <view class="announ-banner-close" catchtap="onClose">&#10005;</view>
+</view>

package/lib/components/announcement/announ-banner/index.wxss

@@ -0,0 +1 @@
+.announ-banner{align-items:center;background:rgba(0,0,0,.5);border-radius:40rpx;box-sizing:border-box;color:#fff;display:flex;font-size:24rpx;left:12rpx;padding:0 12rpx;position:fixed;right:12rpx;top:180rpx;z-index:99}.announ-banner-icon{color:#fff;flex-shrink:0;height:32rpx;margin-right:16rpx;position:relative;width:34rpx}.mode-1 .announ-banner-icon{color:#fb3a32}.announ-banner-icon__box{background:currentColor;border-bottom-left-radius:4rpx;border-top-left-radius:4rpx;height:14rpx;left:3rpx;position:absolute;top:9rpx;width:7rpx;z-index:2}.announ-banner-icon__body{background:currentColor;border-radius:4rpx 6rpx 6rpx 4rpx;-webkit-clip-path:polygon(0 20%,0 80%,78% 100%,78% 0);clip-path:polygon(0 20%,0 80%,78% 100%,78% 0);height:28rpx;left:8rpx;position:absolute;top:2rpx;width:15rpx}.announ-banner-icon__wave{background:currentColor;border-radius:4rpx;position:absolute}.announ-banner-icon__wave--top{height:4rpx;right:4rpx;top:5rpx;transform:rotate(-32deg);width:9rpx}.announ-banner-icon__wave--mid{height:4rpx;right:1rpx;top:14rpx;width:11rpx}.announ-banner-icon__wave--bottom{bottom:5rpx;height:4rpx;right:4rpx;transform:rotate(32deg);width:9rpx}.announ-banner-text-wrap{align-items:center;display:flex;flex:1;height:100%;overflow:hidden;padding:6rpx 0}.announ-banner-text{animation:announ-banner-scroll linear infinite;display:inline-block;padding-left:100%;white-space:nowrap}.announ-banner--static .announ-banner-text{animation:none;padding-left:0}.announ-banner-close{flex-shrink:0;font-size:32rpx;margin-left:16rpx}.announ-banner.mode-1{background:linear-gradient(59.32deg,#ffebe9,#edecff 107.06%);border-radius:0;color:#262626;left:0;max-width:none;padding:16rpx 12rpx;right:0;top:calc(56.25vw + 85rpx);transform:none;width:100%}@keyframes announ-banner-scroll{0%{transform:translateX(0)}to{transform:translateX(-100%)}}

package/lib/components/announcement/announ-icon/index.js

@@ -0,0 +1,69 @@
+Component({
+  properties: {
+    // 是否显示公告图标
+    showIcon: {
+      type: Boolean,
+      value: false,
+    },
+    // 未读角标数字
+    badge: {
+      type: Number,
+      value: 0,
+    },
+    // 直播间模式：0=竖屏，1=横屏（样式区分）
+    mode: {
+      type: Number,
+      value: 0,
+    },
+  },
+  data: {
+    x: 20,
+    y: 40,
+    startX: 0,
+    startY: 0,
+    hasMoved: false,
+  },
+  lifetimes: {
+    attached() {
+      // 初始定位：竖屏在左上角；横屏 70rpx≈35px，在右下角抽奖历史图标上方
+      try {
+        const info = wx.getSystemInfoSync();
+        const iconSize = this.data.mode === 1 ? 35 : 42;
+        if (this.data.mode === 1) {
+          // 横屏：距右 40rpx≈20px；历史图标 bottom:200rpx + 高 70rpx + 间隔 36rpx ≈ 306rpx
+          const rightGap = 20;
+          const bottomGap = 160;
+          const x = Math.max(0, info.windowWidth - iconSize - rightGap);
+          const y = Math.max(0, info.windowHeight - iconSize - bottomGap);
+          this.setData({ x, y });
+        } else {
+          // 竖屏：左上角，留 12rpx≈6px 边距
+          const x = 6;
+          const y = 40;
+          this.setData({ x, y });
+        }
+      } catch (e) {
+        // 获取失败则保持默认左上角
+      }
+    },
+  },
+  methods: {
+    onTouchStart(e) {
+      this.setData({ hasMoved: false });
+    },
+
+    onTouchEnd(e) {
+      this.data.hasMoved = false;
+    },
+
+    onDragChange(e) {
+      const { x, y } = e.detail;
+      this.setData({ x, y, hasMoved: true });
+    },
+
+    onTapIcon() {
+      if (this.data.hasMoved) return;
+      this.triggerEvent('onTapIcon');
+    },
+  },
+});

package/lib/components/announcement/announ-icon/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/components/announcement/announ-icon/index.wxml

@@ -0,0 +1,10 @@
+<movable-area class="drag-area">
+  <movable-view wx:if="{{showIcon}}" class="drag-view" direction="all" x="{{x}}" y="{{y}}" damping="{{40}}" out-of-bounds="{{false}}" bindchange="onDragChange" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd">
+    <view class="announ-icon mode-{{mode}}" bindtap="onTapIcon">
+      <image wx:if="{{mode === 1}}" class="announ-icon-img" src="https://cnstatic01.e.vhall.com/common-static/images/mp/announ_icon_2.png" mode="aspectFit" />
+      <image wx:else class="announ-icon-img" src="https://cnstatic01.e.vhall.com/common-static/images/mp/announ_icon_1.png" mode="aspectFit" />
+      <text wx:if="{{mode !== 1}}" class="announ-icon-text">公告</text>
+      <view wx:if="{{badge > 0}}" class="announ-icon-badge">{{badge > 99 ? '99+' : badge}}</view>
+    </view>
+  </movable-view>
+</movable-area>

package/lib/components/announcement/announ-icon/index.wxss

@@ -0,0 +1 @@
+.drag-area{height:100vh;left:0;pointer-events:none;position:fixed;top:0;width:100vw;z-index:100}.drag-view{height:96rpx;pointer-events:auto;top:10rpx;width:96rpx}.announ-icon{align-items:center;background:rgba(0,0,0,.4);border-radius:50%;display:flex;flex-direction:column;height:84rpx;justify-content:center;position:relative;width:84rpx}.announ-icon.mode-1{height:70rpx;width:70rpx}.announ-icon-img{height:64rpx;width:64rpx}.mode-1 .announ-icon-img{height:70rpx;width:70rpx}.announ-icon-text{color:#fff;font-size:24rpx;margin-top:-20rpx}.announ-icon-badge{align-items:center;background:#ff3b30;border:2rpx solid #fff;border-radius:16rpx;box-sizing:border-box;color:#fff;display:flex;font-size:20rpx;font-weight:700;height:32rpx;justify-content:center;min-width:32rpx;padding:0 8rpx;position:absolute;right:-8rpx;top:-8rpx}

package/lib/components/announcement/announ-popup/index.js

@@ -0,0 +1,44 @@
+Component({
+  properties: {
+    show: { type: Boolean, value: false },
+    // 公告信息（store.announcement）
+    info: { type: Object, value: null },
+  },
+
+  data: {
+    list: [],
+  },
+
+  observers: {
+    info: function (info) {
+      const rawList = info?.list || [];
+      this.setData({
+        list: rawList.map((item) => ({
+          ...item,
+          _text: this.getContentText(item.content),
+          _time: this.formatTime(item.created_at),
+        })),
+      });
+    },
+  },
+
+  methods: {
+    getContentText(content) {
+      if (!content) return '';
+      if (typeof content === 'string') return content;
+      return content.content || content.text || '';
+    },
+
+    formatTime(time) {
+      if (!time) return '';
+      if (typeof time !== 'string') return '';
+      // 将 "2026-08-07 16:47:13" 截断为 "08-07 16:47"
+      const matched = time.match(/\d{4}-(\d{2}-\d{2})\s+(\d{2}:\d{2}):\d{2}/);
+      return matched ? `${matched[1]} ${matched[2]}` : time;
+    },
+
+    onClose() {
+      this.triggerEvent('close');
+    },
+  },
+});

package/lib/components/announcement/announ-popup/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "vh-popup": "../../../pubComponents/popup/popup"
+  }
+}

package/lib/components/announcement/announ-popup/index.wxml

@@ -0,0 +1,39 @@
+<vh-popup
+  wx:if="{{show}}"
+  visible="{{show}}"
+  showClose="{{true}}"
+  mode="bottom"
+  hasMask="{{true}}"
+  maskClosable="{{true}}"
+  bgColor="#f7f7f7"
+  bind:close="onClose"
+>
+  <view class="announ-popup">
+    <view class="announ-popup-header">
+      <text class="announ-popup-star left">✦</text>
+      <text class="announ-popup-title">公告</text>
+      <text class="announ-popup-star right">✦</text>
+    </view>
+    <scroll-view class="announ-popup-list" scroll-y>
+      <view class="announ-items">
+        <view
+          wx:for="{{list}}"
+          wx:key="id"
+          class="announ-item {{index === list.length - 1 ? 'last' : ''}} {{index === 0 ? 'first' : ''}}"
+        >
+          <view class="announ-item-timeline">
+            <view class="announ-item-line announ-item-line-top"></view>
+            <view class="announ-item-dot-outer">
+              <view class="announ-item-dot-inner"></view>
+            </view>
+            <view class="announ-item-line announ-item-line-bottom"></view>
+          </view>
+          <view class="announ-item-content">
+            <view class="announ-item-text">{{item._text}}</view>
+            <view class="announ-item-time">{{item._time}}</view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</vh-popup>

package/lib/components/announcement/announ-popup/index.wxss

@@ -0,0 +1 @@
+.popup-body{display:flex}.announ-popup{background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column;height:50vh;width:100%}.announ-popup-header{align-items:center;display:flex;justify-content:center;margin-bottom:32rpx;position:relative}.announ-popup-title{color:#1a1a1a;font-size:36rpx;font-weight:600;position:relative}.announ-popup-title:after{background:#ff4d4f;border-radius:4rpx;bottom:-4rpx;content:"";height:8rpx;left:50%;opacity:.6;position:absolute;transform:translateX(-50%);width:60%}.announ-popup-star{color:#ffcd00;font-size:24rpx;margin:0 12rpx}.announ-popup-star.left{transform:rotate(-15deg)}.announ-popup-star.right{transform:rotate(15deg)}.announ-popup-list{box-sizing:border-box;flex:1;min-height:0;overflow:hidden}.announ-popup-items{position:relative}.announ-popup-line{border-left:1rpx dashed #bfbfbf;left:50%;position:absolute;transform:translateX(-50%);width:0}.announ-item{display:flex;padding-bottom:32rpx;padding-left:48rpx;position:relative}.announ-item-timeline{border-left:1rpx dashed #bfbfbf;bottom:0;left:16rpx;position:absolute;top:0;width:24rpx}.announ-item-dot-outer{align-items:center;background:#fff;border:3rpx solid #ccc;border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;height:28rpx;justify-content:center;left:-14rpx;position:absolute;top:0;width:28rpx;z-index:1}.announ-item-dot-inner{background:#ccc;border-radius:50%;box-sizing:border-box;height:12rpx;width:12rpx}.announ-item.first .announ-item-dot-outer{background:#fff;border-color:#fb2626}.announ-item.first .announ-item-dot-inner{background:#fb2626}.announ-item.last{padding-bottom:0}.announ-item.last .announ-item-timeline{border:none}.announ-item-content{background:#fff;border-radius:12rpx;flex:1;padding:20rpx 24rpx}.announ-item-text{color:#1a1a1a;font-size:28rpx;line-height:1.5;margin-bottom:12rpx;word-break:break-all}.announ-item-time{color:#999;font-size:24rpx}

package/lib/components/announcement/index.js

@@ -0,0 +1,228 @@
+Component({
+  properties: {
+    sdkInstance: {
+      type: Object,
+      value: null,
+    },
+    // 直播间模式：0=竖屏，1=横屏（样式区分）
+    mode: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    announInfo: null, // 公告信息
+    showIcon: false, // 是否显示公告小图标
+    showPopup: false, // 是否显示公告弹窗
+    showBanner: false, // 是否显示公告banner
+    bannerText: '', // 公告banner文本
+    isStatic: false, // 公告banner内容是否静止不滚动（display_type==1）
+    curNoticeId: '', // 当前展示的公告 id
+    badge: 0, // 公告未读角标数字（收到推送 +1，打开弹窗清零）
+  },
+
+  observers: {
+    sdkInstance: function sdkInstance(_sdkInstance) {
+      if (!_sdkInstance) return;
+      this.sdkInstance = _sdkInstance;
+
+      this.unsub = this.sdkInstance.store.get({
+        announcement: (val) => {
+          // 初始化 / 配置刷新时，按公告数据统一处理展示逻辑
+          const watchInitData = this.sdkInstance.store.get('watchInitData');
+          const webinarType = watchInitData?.webinar?.type;
+          // 不是直播也不是回放，不处理
+          if (webinarType != 1 && webinarType != 5) return;
+
+          this.applyAnnouncement(val);
+        },
+      });
+
+      this.initEventListener();
+    },
+  },
+
+  lifetimes: {
+    detached() {
+      this.unsub && this.unsub();
+      this.unlistener?.();
+      this.clearTimer();
+    },
+  },
+
+  methods: {
+    initEventListener() {
+      this.unlistener?.();
+      const EVENT = this.sdkInstance.EVENT;
+      const obj = {};
+      // 推送公告：把消息字段转成与接口列表一致的格式，插入到列表首位（去重同 id），保留已有公告
+      obj[EVENT.ROOM_ANNOUNCEMENT] = (msg) => {
+        const data = msg?.data || msg;
+        if (!data) return;
+        // display_type: 0
+        // duration: 600
+        // event_type: "room_announcement"
+        // id: "364"
+        // push_time: "2026-08-10 16:39:55"
+        // record_display: 1
+        // room_announcement_text: "zxcfzxcxzc"
+        // room_id: "lss_1d63a879"
+        // room_join_id: "101643"
+        // set_type: 1
+        // type: "room_announcement"
+
+        const item = {
+          id: data.id,
+          content: data.room_announcement_text ? { content: data.room_announcement_text } : data.content || '',
+          duration: data.duration,
+          display_type: data.display_type,
+          create_at: data.push_time,
+          record_display: data.record_display,
+          set_type: data.set_type
+        };
+        const prev = this.sdkInstance.store.get('announcement') || {};
+        const list = (prev.list || []).filter((it) => it.id !== item.id);
+        list.unshift(item);
+
+        this.sdkInstance.store.set('announcement', { list, total: list.length });
+        // 收到推送公告，未读角标 +1
+        this.setData({ badge: this.data.badge + 1 });
+      };
+
+      // 公告删除：从列表中移除该公告，store 变化会自动触发 applyAnnouncement 重新渲染并关闭 banner
+      obj[EVENT.DEL_ROOM_ANNOUNCEMENT] = (msg) => {
+        const delId = msg?.data?.id ?? msg?.id;
+        if (!delId) return;
+        const prev = this.sdkInstance.store.get('announcement') || {};
+        const list = (prev.list || []).filter((it) => it.id !== delId);
+        this.sdkInstance.store.set('announcement', { list, total: list.length });
+      };
+
+      // 直播结束：自动关闭公告
+      obj[EVENT.LIVE_END] = () => {
+        this.closeAnnouncement();
+      };
+
+      this.unlistener = this.sdkInstance.on(obj);
+    },
+
+    /**
+     * 根据公告数据统一处理展示逻辑（store / common-config 回调）
+     * - 列表为空：关闭 banner
+     * - 否则取第一条公告 item 交给统一调度
+     */
+    applyAnnouncement(announ) {
+      this.setData({ announInfo: announ });
+
+      const list = announ?.list || [];
+      const total = announ?.total || 0;
+
+      if (total < 1) {
+        this.clearTimer();
+        this.setData({
+          showIcon: false,
+          showBanner: false,
+          isStatic: false,
+          curNoticeId: '',
+          bannerText: '',
+        });
+        return;
+      }
+
+      // 取第一条公告 item 交给统一调度
+      this.scheduleBanner(list[0] || {});
+    },
+
+    /**
+     * 统一调度 banner 展示与定时关闭
+     * - content: {content: "sdfdsfsdfsdfdsfdsfdsf"}
+     * - created_at: "2026-08-10 16:22:52" // 公告创建四时间
+     * - display_type：0 //  0 滚动， 1：不滚动
+     * - duration: 300 剩余时长，0：永久展示 ; >0 按剩余时长展示，超时自动关闭
+     * - id: "363" //公告id
+     * - set_type: 1
+     */
+    scheduleBanner(item = {}) {
+      const id = item.id;
+      const duration = Number(item.duration) || 0;
+      const displayType = Number(item.display_type);
+      const createAt = item.created_at;
+      const text = typeof item.content === 'string' ? item.content : item.content?.content || item.content?.text || '';
+
+      this.clearTimer();
+
+      this.setData({
+        showIcon: true,
+        isStatic: displayType === 1,
+        curNoticeId: id,
+        bannerText: text,
+      });
+
+      // duration < 1：永久展示
+      if (duration < 1) {
+        this.setData({ showBanner: true });
+        return;
+      }
+
+      // 计算剩余展示时长
+      const now = Date.now();
+      const createTs = this.parseTime(createAt);
+      // pushTime 解析失败则视为从当前时刻开始计时，避免 NaN 导致不展示
+      const remain = isNaN(createTs) ? duration * 1000 : duration * 1000 - (now - createTs);
+
+      if (remain > 0) {
+        this.setData({ showBanner: true });
+        this.announTimer = setTimeout(() => {
+          this.setData({ showBanner: false });
+          this.announTimer = null;
+        }, remain);
+      } else {
+        this.setData({ showBanner: false });
+      }
+    },
+
+    // 解析时间字符串为时间戳（兼容 iOS：将 "2026-08-07 16:47:13" 转为 "2026/08/07 16:47:13"）
+    parseTime(str) {
+      if (!str) return NaN;
+      const s = String(str).replace(/-/g, '/');
+      const t = new Date(s).getTime();
+      return isNaN(t) ? NaN : t;
+    },
+
+    // 清除展示定时器
+    clearTimer() {
+      if (this.announTimer) {
+        clearTimeout(this.announTimer);
+        this.announTimer = null;
+      }
+    },
+
+    // 被动关闭（删除/直播结束）：关闭当前 banner
+    closeAnnouncement() {
+      this.clearTimer();
+      this.setData({ showBanner: false });
+    },
+
+    // 用户手动关闭当前 banner：记录该公告 id，同一条不再自动弹（新公告仍展示）
+    handleBannerClose() {
+      this.clearTimer();
+      this.setData({ showBanner: false });
+    },
+
+    // 点击公告图标：打开弹窗并清零未读角标
+    handleIconClick() {
+      this.setData({ showPopup: true, badge: 0 });
+    },
+
+    // 关闭公告弹窗
+    handlePopupClose() {
+      this.setData({ showPopup: false });
+    },
+
+    // 关闭顶部滚动条（用户手动关闭）
+    handleBannerClose() {
+      this.closeAnnouncement();
+    },
+  },
+});

package/lib/components/announcement/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "announ-icon": "./announ-icon/index",
+    "announ-popup": "./announ-popup/index",
+    "announ-banner": "./announ-banner/index"
+  }
+}

package/lib/components/announcement/index.wxml

@@ -0,0 +1,6 @@
+<!-- 公告顶部滚动条 -->
+<announ-banner show="{{showBanner}}" text="{{bannerText}}" static="{{isStatic}}" mode="{{mode}}" bind:close="handleBannerClose" />
+<!-- 公告浮动小图标 -->
+<announ-icon wx:if="{{showIcon}}" showIcon="{{showIcon}}" badge="{{badge}}" mode="{{mode}}" bind:onTapIcon="handleIconClick" />
+<!-- 公告弹窗 -->
+<announ-popup show="{{showPopup}}" info="{{announInfo}}" bind:close="handlePopupClose" />