tuikit-atomicx-vue3 0.1.1 → 3.3.0-beta.3

package/dist/components/{LiveStreamView → LiveCoreView}/DefaultStreamViewUI.js

@@ -171,7 +171,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4091c326"]]);
+const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9237082b"]]);
 export {
   DefaultStreamViewUI as default
 };

package/dist/components/LiveCoreView/index.d.ts

@@ -0,0 +1,4 @@
+import { default as DefaultStreamViewUI } from './DefaultStreamViewUI.vue';
+import { default as LiveCoreView } from './index.vue';
+
+export { LiveCoreView, DefaultStreamViewUI };

package/dist/components/{LiveStreamView → LiveCoreView}/index.js

@@ -1,22 +1,22 @@
-import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, createElementVNode, normalizeStyle, createCommentVNode, renderSlot, unref, toDisplayString, Fragment, renderList, createBlock, mergeProps, normalizeProps } from "vue";
+import { addI18n } from "../../i18n/index.js";
 import DefaultStreamViewUI from "./DefaultStreamViewUI.js";
-import { getContentSize } from "../../utils/domOperation.js";
+import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, createElementVNode, normalizeStyle, createCommentVNode, renderSlot, unref, toDisplayString, Fragment, renderList, createBlock, mergeProps, normalizeProps } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
-import { useLoginState } from "../../states/LoginState.js";
 import { useLiveState } from "../../states/LiveState/index.js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { useLoginState } from "../../states/LoginState.js";
+import { getContentSize } from "../../utils/domOperation.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-import { addI18n } from "../../i18n/index.js";
 import { resource } from "./i18n/en-US/index.js";
 import { resource as resource$1 } from "./i18n/zh-CN/index.js";
 const _hoisted_1 = {
   key: 0,
-  class: "live-stream-placeholder"
+  class: "live-core-placeholder"
 };
 const _hoisted_2 = { class: "placeholder-text" };
 const _hoisted_3 = {
   key: 1,
-  class: "live-stream-ui"
+  class: "live-core-ui"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
@@ -30,12 +30,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isMounted = ref(false);
     onMounted(() => {
       isMounted.value = true;
-      startPlayStream({ view: "stream-content" });
+      startPlayStream({ view: "atomicx-live-stream-content" });
     });
     onBeforeUnmount(() => {
       isMounted.value = false;
       stopPlayStream();
     });
+    const isPortraitContainer = ref(true);
+    const liveCoreViewContainerRef = ref();
+    const originStreamViewStyle = ref({
+      width: 0,
+      height: 0,
+      transformX: 0,
+      transformY: 0,
+      scale: 1
+    });
     const ratioLayoutList = computed(() => {
       var _a;
       const layoutCanvas = canvas.value;
@@ -55,28 +64,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         zOrder: item.zOrder
       }));
     });
-    const seatListWithRealSize = computed(() => {
-      return seatList.value.map((item, index) => {
-        const ratioLayout = ratioLayoutList.value[index];
+    const streamViewSize = computed(() => {
+      if (isPortraitContainer.value) {
         return {
-          userInfo: item.userInfo,
-          region: {
-            position: "absolute",
-            left: `${streamViewSize.value.width * ratioLayout.x}px`,
-            top: `${streamViewSize.value.width * ratioLayout.y}px`,
-            width: `${streamViewSize.value.width * ratioLayout.width}px`,
-            height: ratioLayout.height === -1 ? `${streamViewSize.value.height}px` : `${streamViewSize.value.width * ratioLayout.height}px`,
-            zIndex: Number(ratioLayout.zOrder) || 0
-          }
+          width: originStreamViewStyle.value.width,
+          height: originStreamViewStyle.value.height
         };
-      });
-    });
-    const localStreamViewInfo = computed(() => {
-      return seatListWithRealSize.value.find((item) => {
-        var _a, _b;
-        return ((_a = item == null ? void 0 : item.userInfo) == null ? void 0 : _a.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
-      });
+      }
+      return {
+        width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
+        height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale
+      };
     });
+    const seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
+      const ratioLayout = ratioLayoutList.value[index];
+      return {
+        userInfo: item.userInfo,
+        region: {
+          position: "absolute",
+          left: `${streamViewSize.value.width * ratioLayout.x}px`,
+          top: `${streamViewSize.value.width * ratioLayout.y}px`,
+          width: `${streamViewSize.value.width * ratioLayout.width}px`,
+          height: ratioLayout.height === -1 ? `${streamViewSize.value.height}px` : `${streamViewSize.value.width * ratioLayout.height}px`,
+          zIndex: Number(ratioLayout.zOrder) || 0
+        }
+      };
+    }));
+    const localStreamViewInfo = computed(() => seatListWithRealSize.value.find((item) => {
+      var _a, _b;
+      return ((_a = item == null ? void 0 : item.userInfo) == null ? void 0 : _a.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
+    }));
     const needPlayStreamViewInfo = computed(() => {
       if (ignoreLocalVideoPlay.value) {
         return seatListWithRealSize.value.filter((item) => {
@@ -86,14 +103,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return seatListWithRealSize.value;
     });
-    const liveStreamViewContainerRef = ref();
-    const originStreamViewStyle = ref({
-      width: 0,
-      height: 0,
-      transformX: 0,
-      transformY: 0,
-      scale: 1
-    });
     const visualStreamSize = computed(() => {
       if (ratioLayoutList.value.length === 0) {
         return {
@@ -103,16 +112,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           centerY: 0
         };
       }
-      const absoluteLayoutList = ratioLayoutList.value.map((item) => {
-        return {
-          userId: item.userId,
-          left: originStreamViewStyle.value.width * item.x,
-          top: originStreamViewStyle.value.width * item.y,
-          width: originStreamViewStyle.value.width * item.width,
-          height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
-          zIndex: item.zOrder
-        };
-      });
+      const absoluteLayoutList = ratioLayoutList.value.map((item) => ({
+        userId: item.userId,
+        left: originStreamViewStyle.value.width * item.x,
+        top: originStreamViewStyle.value.width * item.y,
+        width: originStreamViewStyle.value.width * item.width,
+        height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
+        zIndex: item.zOrder
+      }));
       const minX = Math.min(...absoluteLayoutList.map((item) => item.left));
       const minY = Math.min(...absoluteLayoutList.map((item) => item.top));
       const maxX = Math.max(...absoluteLayoutList.map((item) => item.left + item.width));
@@ -128,10 +135,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       handleStreamListTransform();
     });
     function handleStreamListTransform() {
-      if (!liveStreamViewContainerRef.value) {
+      if (!liveCoreViewContainerRef.value) {
         return;
       }
-      const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+      const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
       const containerWidth = Math.floor(containerRect.width);
       const containerHeight = Math.floor(containerRect.height);
       if (visualStreamSize.value.width && visualStreamSize.value.height) {
@@ -147,18 +154,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         originStreamViewStyle.value.transformY = 0;
       }
     }
-    const streamViewSize = computed(() => {
-      if (isPortraitContainer.value) {
-        return {
-          width: originStreamViewStyle.value.width,
-          height: originStreamViewStyle.value.height
-        };
-      }
-      return {
-        width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
-        height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale
-      };
-    });
     const streamViewStyle = computed(() => {
       if (isPortraitContainer.value) {
         return {
@@ -195,11 +190,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return Number(aspectRatio.value.split(":")[1]);
     });
     function handleStreamRegionSize() {
-      if (!liveStreamViewContainerRef.value) {
+      if (!liveCoreViewContainerRef.value) {
         return;
       }
-      const containerWidth = getContentSize(liveStreamViewContainerRef.value).width;
-      const containerHeight = getContentSize(liveStreamViewContainerRef.value).height;
+      const containerWidth = getContentSize(liveCoreViewContainerRef.value).width;
+      const containerHeight = getContentSize(liveCoreViewContainerRef.value).height;
       let width = containerWidth;
       let height = containerHeight;
       if (widthRatio.value && heightRatio.value) {
@@ -223,12 +218,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         handleStreamRegionSize();
       }
     );
-    const isPortraitContainer = ref(true);
     const getContainerOrientation = () => {
-      if (!liveStreamViewContainerRef.value) {
+      if (!liveCoreViewContainerRef.value) {
         return;
       }
-      const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+      const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
       isPortraitContainer.value = containerRect.width < containerRect.height;
     };
     const ro = new ResizeObserver(() => {
@@ -237,28 +231,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       handleStreamListTransform();
     });
     onMounted(() => {
-      ro.observe(liveStreamViewContainerRef.value);
+      ro.observe(liveCoreViewContainerRef.value);
       getContainerOrientation();
     });
     onBeforeUnmount(() => {
-      ro.unobserve(liveStreamViewContainerRef.value);
+      ro.unobserve(liveCoreViewContainerRef.value);
     });
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", {
-        class: "live-stream-view-container",
-        ref_key: "liveStreamViewContainerRef",
-        ref: liveStreamViewContainerRef
+        ref_key: "liveCoreViewContainerRef",
+        ref: liveCoreViewContainerRef,
+        class: "live-core-view-container"
       }, [
         createElementVNode("div", {
-          class: "live-stream-view",
+          class: "live-core-view",
           style: normalizeStyle(streamViewStyle.value)
         }, [
           !_ctx.$slots.localVideo && unref(seatList).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
             createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
           ])) : createCommentVNode("", true),
           _cache[0] || (_cache[0] = createElementVNode("div", {
-            id: "stream-content",
+            id: "atomicx-live-stream-content",
             class: "stream-content"
           }, null, -1)),
           needPlayStreamViewInfo.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
@@ -282,10 +276,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LiveStreamViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a84f78de"]]);
+const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-42a8fbdc"]]);
 addI18n("en-US", { translation: resource });
 addI18n("zh-CN", { translation: resource$1 });
 export {
   DefaultStreamViewUI,
-  LiveStreamViewComponent as LiveStreamView
+  LiveCoreViewComponent as LiveCoreView
 };

package/dist/components/LiveList/LiveList.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, createElementBlock, createCommentVNode, unref, openBlock, createElementVNode, Fragment, renderList, createVNode, toDisplayString } from "vue";
+import { defineComponent, useCssVars, ref, computed, watch, createElementBlock, createCommentVNode, unref, openBlock, createElementVNode, Fragment, renderList, createVNode, toDisplayString } from "vue";
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveState } from "../../states/LiveState/index.js";
 import { useLoginState } from "../../states/LoginState.js";
@@ -8,53 +8,60 @@ const _hoisted_1 = {
   key: 0,
   class: "live-list-panel"
 };
-const _hoisted_2 = { class: "live-list-items" };
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { class: "live-room-cover" };
-const _hoisted_5 = { class: "header" };
-const _hoisted_6 = { class: "left" };
-const _hoisted_7 = { class: "right" };
-const _hoisted_8 = ["src"];
-const _hoisted_9 = { class: "live-name" };
-const _hoisted_10 = { class: "owner-info" };
-const _hoisted_11 = { class: "owner-name" };
-const _hoisted_12 = {
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "live-room-cover" };
+const _hoisted_4 = { class: "header" };
+const _hoisted_5 = { class: "left" };
+const _hoisted_6 = { class: "right" };
+const _hoisted_7 = ["src"];
+const _hoisted_8 = { class: "live-name" };
+const _hoisted_9 = { class: "owner-info" };
+const _hoisted_10 = { class: "owner-name" };
+const _hoisted_11 = {
   key: 0,
   class: "bottom-text-no-more"
 };
-const _hoisted_13 = {
+const _hoisted_12 = {
   key: 1,
   class: "no-live"
 };
-const _hoisted_14 = {
+const _hoisted_13 = {
   key: 2,
   class: "bottom-text"
 };
-const _hoisted_15 = {
+const _hoisted_14 = {
   key: 0,
   class: "load-more-lives"
 };
-const _hoisted_16 = {
+const _hoisted_15 = {
   key: 1,
   class: "loading"
 };
 const DEFAULT_COVER = "https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png";
+const columnCount = 5;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LiveList",
   emits: ["live-room-click"],
   setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "4d975fe5": liveItemWidth.value,
+      "4b85a2e8": liveItemHeight.value,
+      "3688f7de": coverWidth.value,
+      "ce33f788": coverHeight.value
+    }));
     const { liveList, currentCursor, fetchLiveList } = useLiveState();
     const { loginUserInfo } = useLoginState();
     const { t } = useUIKit();
     const scrollContainerRef = ref(null);
+    const liveListItemsRef = ref(null);
     const isLoadingMore = ref(false);
     const hasMoreLive = computed(() => currentCursor.value !== "");
-    const shouldFetchMoreLiveList = computed(() => {
-      return hasMoreLive.value && !isLoadingMore.value;
-    });
-    const isShowMoreVisible = computed(() => {
-      return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
-    });
+    const liveItemWidth = ref("356px");
+    const liveItemHeight = ref("270px");
+    const coverWidth = ref("356px");
+    const coverHeight = ref("210px");
+    const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
+    const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
     watch(
       loginUserInfo,
       async (user) => {
@@ -66,6 +73,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
+    watch(liveListItemsRef, () => {
+      if (liveListItemsRef.value && screen.width > screen.height) {
+        const { width } = liveListItemsRef.value.getBoundingClientRect();
+        const gapWidth = 20 * (columnCount - 1);
+        const newItemWidth = (width - gapWidth) / columnCount;
+        const newItemHeight = newItemWidth * 0.75;
+        liveItemWidth.value = `${newItemWidth}px`;
+        liveItemHeight.value = `${newItemHeight}px`;
+        coverWidth.value = `${newItemWidth}px`;
+        coverHeight.value = `${newItemHeight - 52}px`;
+      }
+    });
     const emit = __emit;
     function liveRoomClick(liveInfo) {
       console.log("liveRoomClick,liveInfo:", liveInfo);
@@ -86,7 +105,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     async function fetchMoreLives() {
-      if (!hasMoreLive.value || isLoadingMore.value) return;
+      if (!hasMoreLive.value || isLoadingMore.value) {
+        return;
+      }
       try {
         isLoadingMore.value = true;
         await fetchLiveList({ cursor: currentCursor.value });
@@ -104,25 +125,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return unref(loginUserInfo) ? (openBlock(), createElementBlock("div", _hoisted_1, [
         unref(liveList).length > 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: "live-list",
-          onWheel: handleWheel,
           ref_key: "scrollContainerRef",
-          ref: scrollContainerRef
+          ref: scrollContainerRef,
+          class: "live-list",
+          onWheel: handleWheel
         }, [
-          createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", {
+            ref_key: "liveListItemsRef",
+            ref: liveListItemsRef,
+            class: "live-list-items"
+          }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(liveList), (item) => {
               return openBlock(), createElementBlock("div", {
-                class: "live-item",
                 key: item.liveId,
+                class: "live-item",
                 onClick: ($event) => liveRoomClick(item)
               }, [
-                createElementVNode("div", _hoisted_4, [
-                  createElementVNode("div", _hoisted_5, [
-                    createElementVNode("div", _hoisted_6, [
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_4, [
+                    createElementVNode("div", _hoisted_5, [
                       createVNode(unref(IconLiveCoverHeader), { size: 10 }),
                       createElementVNode("span", null, toDisplayString(unref(t)("LIVE")), 1)
                     ]),
-                    createElementVNode("div", _hoisted_7, [
+                    createElementVNode("div", _hoisted_6, [
                       createElementVNode("span", null, toDisplayString(item.currentViewerCount || 0), 1),
                       createElementVNode("span", null, toDisplayString(unref(t)("people have watched the live")), 1)
                     ])
@@ -131,35 +156,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     src: item.coverUrl || DEFAULT_COVER,
                     alt: "",
                     onError: handleCoverImageError
-                  }, null, 40, _hoisted_8)
+                  }, null, 40, _hoisted_7)
                 ]),
-                createElementVNode("span", _hoisted_9, toDisplayString(item.liveName), 1),
-                createElementVNode("div", _hoisted_10, [
+                createElementVNode("span", _hoisted_8, toDisplayString(item.liveName), 1),
+                createElementVNode("div", _hoisted_9, [
                   createVNode(unref(Avatar), {
                     src: item.liveOwner.avatarUrl,
-                    size: 24
+                    size: 24,
+                    style: { border: "1px solid var(--uikit-color-white-7)" }
                   }, null, 8, ["src"]),
-                  createElementVNode("span", _hoisted_11, toDisplayString(item.liveOwner.userName || item.liveOwner.userId), 1)
+                  createElementVNode("span", _hoisted_10, toDisplayString(item.liveOwner.userName || item.liveOwner.userId), 1)
                 ])
-              ], 8, _hoisted_3);
+              ], 8, _hoisted_2);
             }), 128))
-          ]),
-          !hasMoreLive.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
+          ], 512),
+          !hasMoreLive.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
             createElementVNode("span", null, toDisplayString(unref(t)("No More")), 1)
           ])) : createCommentVNode("", true)
-        ], 544)) : !isLoadingMore.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+        ], 544)) : !isLoadingMore.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
           createVNode(unref(IconNoLiveRoom), { size: 60 }),
           createElementVNode("span", null, toDisplayString(unref(t)("No Live")), 1)
         ])) : createCommentVNode("", true),
-        unref(liveList).length > 0 && (isShowMoreVisible.value || isLoadingMore.value) ? (openBlock(), createElementBlock("div", _hoisted_14, [
-          isShowMoreVisible.value ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(unref(t)("Load More")), 1)) : createCommentVNode("", true),
-          isLoadingMore.value ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(unref(t)("Loading...")), 1)) : createCommentVNode("", true)
+        unref(liveList).length > 0 && (isShowMoreVisible.value || isLoadingMore.value) ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          isShowMoreVisible.value ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(unref(t)("Load More")), 1)) : createCommentVNode("", true),
+          isLoadingMore.value ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(unref(t)("Loading...")), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ])) : createCommentVNode("", true);
     };
   }
 });
-const LiveListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-30bab3d5"]]);
+const LiveListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b8540cae"]]);
 export {
   LiveListPC as default
 };

package/dist/components/LiveList/LiveListH5.js

@@ -37,8 +37,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["live-room-click"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "2ddc729c": liveItemWidth.value,
-      "1f5815bb": liveItemHeight.value
+      "11f6a5ce": liveItemWidth.value,
+      "607c0798": liveItemHeight.value
     }));
     const { liveList, currentCursor, fetchLiveList } = useLiveState();
     const { loginUserInfo } = useLoginState();
@@ -48,12 +48,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasMoreLive = computed(() => currentCursor.value !== "");
     const liveItemWidth = ref("168px");
     const liveItemHeight = ref("262px");
-    const shouldFetchMoreLiveList = computed(() => {
-      return hasMoreLive.value && !isLoadingMore.value;
-    });
-    const isShowMoreVisible = computed(() => {
-      return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
-    });
+    const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
+    const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
     const emit = __emit;
     watch(
       loginUserInfo,
@@ -103,7 +99,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     async function fetchMoreLives() {
-      if (!hasMoreLive.value || isLoadingMore.value) return;
+      if (!hasMoreLive.value || isLoadingMore.value) {
+        return;
+      }
       try {
         isLoadingMore.value = true;
         await fetchLiveList({ cursor: currentCursor.value });
@@ -131,17 +129,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return unref(loginUserInfo) ? (openBlock(), createElementBlock("div", _hoisted_1, [
         unref(liveList).length > 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
+          ref_key: "scrollContainerRef",
+          ref: scrollContainerRef,
           class: "live-list",
           onScroll: handleScroll,
-          onWheel: handleWheel,
-          ref_key: "scrollContainerRef",
-          ref: scrollContainerRef
+          onWheel: handleWheel
         }, [
           createElementVNode("div", _hoisted_2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(liveList), (item) => {
               return openBlock(), createElementBlock("div", {
-                class: "live-item",
                 key: item.liveId,
+                class: "live-item",
                 onClick: ($event) => liveRoomClick(item)
               }, [
                 createElementVNode("div", _hoisted_4, [
@@ -160,7 +158,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_9, [
                   createVNode(unref(Avatar), {
                     src: item.liveOwner.avatarUrl,
-                    size: 16
+                    size: 16,
+                    style: { border: "1px solid var(--uikit-color-white-7)" }
                   }, null, 8, ["src"]),
                   createElementVNode("span", _hoisted_10, toDisplayString(item.liveOwner.userName || item.liveOwner.userId), 1)
                 ])
@@ -182,7 +181,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LiveListH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2aa05875"]]);
+const LiveListH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b716be94"]]);
 export {
   LiveListH5 as default
 };

package/dist/components/LiveScenePanel/CameraSettingDialog.js

@@ -203,8 +203,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           ])
         ]),
-        _: 1,
-        __: [2]
+        _: 1
       }, 8, ["confirmText", "confirmDisabled", "title"]);
     };
   }

package/dist/components/LiveScenePanel/icons/AddIcon.js

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M8 5V11",
       stroke: "currentColor",
@@ -27,7 +27,7 @@ function _sfc_render(_ctx, _cache) {
       stroke: "currentColor",
       "stroke-width": "1.2"
     }, null, -1)
-  ]));
+  ])]);
 }
 const AddIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/components/LiveScenePanel/icons/CameraIcon.js

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M2.66667 6H5.33333V4.66667H2.66667V6Z",
       fill: "#D1D4DE"
@@ -20,7 +20,7 @@ function _sfc_render(_ctx, _cache) {
       d: "M12.6667 4.87037L16 3.66667V12.3333L12.6667 11.1296V14H0V2H12.6667V4.87037ZM14.6667 5.56575V10.4342L11.3333 9.23054V12.6667H1.33333V3.33333H11.3333V6.76946L14.6667 5.56575Z",
       fill: "#D1D4DE"
     }, null, -1)
-  ]));
+  ])]);
 }
 const CameraIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/components/LiveScenePanel/icons/CameraMirror.js

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   fill: "none"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M7.5 1H8.5V15H7.5V1Z",
       fill: "black",
@@ -28,7 +28,7 @@ function _sfc_render(_ctx, _cache) {
       "fill-opacity": "0.9",
       style: { "fill": "#ffffff", "fill-opacity": "0.9" }
     }, null, -1)
-  ]));
+  ])]);
 }
 const CameraMirror = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/components/LiveScenePanel/icons/CameraUnmirror.js

@@ -9,7 +9,7 @@ const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       d: "M3.15332 3L14.4715 14.322",
       stroke: "#1A1A1A",
@@ -21,7 +21,7 @@ function _sfc_render(_ctx, _cache) {
       "fill-opacity": "0.9",
       style: { "fill": "#ffffff", "fill-opacity": "0.9" }
     }, null, -1)
-  ]));
+  ])]);
 }
 const CameraUnMirror = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {