tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/dist/components/ConversationList/index.js

@@ -7,9 +7,9 @@ import ConversationActionsComponent from "./ConversationActions/ConversationActi
 import ConversationListHeaderComponent from "./ConversationListHeader/ConversationListHeader.js";
 import ConversationListContentComponent from "./ConversationListContent/ConversationListContent.js";
 import { ConversationPreview as _sfc_main } from "./ConversationPreview/index.js";
-import ConversationCreateComponent from "./ConversationCreate/ConversationCreate.js";
 import ConversationPreviewUIComponent from "./ConversationPreview/ConversationPreviewUI.js";
 import ConversationSearchComponent from "./ConversationSearch/ConversationSearch.js";
+import ConversationCreateComponent from "./ConversationCreate/ConversationCreate.js";
 addI18n("en-US", { translation: enResource });
 addI18n("zh-CN", { translation: zhResource });
 const ConversationList = ConversationListComponent;

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, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, unref, normalizeStyle, renderSlot, 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"
+  key: 0,
+  class: "live-core-ui"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
@@ -25,16 +25,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
     const { currentLive } = useLiveState();
     const slots = useSlots();
-    const ignoreLocalVideoPlay = computed(() => slots.localVideo);
+    const isInStreamMixerComp = computed(() => slots.localVideo);
     const { loginUserInfo } = useLoginState();
+    const isPlayedVideo = ref(false);
     const isMounted = ref(false);
-    onMounted(() => {
+    const isAlignCenter = computed(() => {
+      if (!isInStreamMixerComp.value && isPortraitContainer.value && widthRatio.value < heightRatio.value) {
+        return false;
+      }
+      return true;
+    });
+    onMounted(async () => {
       isMounted.value = true;
-      startPlayStream({ view: "stream-content" });
+      await startPlayStream({ view: "atomicx-live-stream-content" });
+      isPlayedVideo.value = true;
     });
-    onBeforeUnmount(() => {
+    onBeforeUnmount(async () => {
       isMounted.value = false;
-      stopPlayStream();
+      await stopPlayStream();
+      isPlayedVideo.value = false;
+    });
+    const isPortraitContainer = ref(true);
+    const liveCoreViewContainerRef = ref();
+    const liveCoreViewContainerSize = ref({
+      width: 0,
+      height: 0
+    });
+    const originStreamViewStyle = ref({
+      width: 0,
+      height: 0,
+      transformX: 0,
+      transformY: 0,
+      scale: 1
     });
     const ratioLayoutList = computed(() => {
       var _a;
@@ -55,30 +77,49 @@ 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(() => {
+      return {
+        width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
+        height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale
+      };
+    });
+    const seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
+      var _a, _b;
+      const ratioLayout = ratioLayoutList.value[index];
+      const isPortraitAndFill = isPortraitContainer.value && fillMode.value === "fill";
+      const isSampleWithCanvas = seatList.value.length === 1 || ((_a = item.region) == null ? void 0 : _a.w) === canvas.value.width && ((_b = item.region) == null ? void 0 : _b.h) === canvas.value.height;
+      if (!isInStreamMixerComp.value && isPortraitAndFill && isSampleWithCanvas) {
         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`,
+            left: "50%",
+            top: "50%",
+            width: `${liveCoreViewContainerSize.value.width}px`,
+            height: `${liveCoreViewContainerSize.value.height}px`,
+            transform: `translate(-50%, -50%)`,
             zIndex: Number(ratioLayout.zOrder) || 0
           }
         };
-      });
-    });
-    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 {
+        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) {
+      if (isInStreamMixerComp.value) {
         return seatListWithRealSize.value.filter((item) => {
           var _a, _b;
           return ((_a = item.userInfo) == null ? void 0 : _a.userId) !== ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
@@ -86,55 +127,45 @@ 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 {
-          width: 0,
-          height: 0,
-          centerX: 0,
-          centerY: 0
-        };
-      }
-      const absoluteLayoutList = ratioLayoutList.value.map((item) => {
-        return {
+      if (!isPortraitContainer.value && widthRatio.value < heightRatio.value && ratioLayoutList.value.length > 0) {
+        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));
+        const maxY = Math.max(...absoluteLayoutList.map((item) => item.top + item.height));
+        return {
+          width: maxX - minX,
+          height: maxY - minY,
+          centerX: (minX + maxX) / 2,
+          centerY: (minY + maxY) / 2
         };
-      });
-      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));
-      const maxY = Math.max(...absoluteLayoutList.map((item) => item.top + item.height));
+      }
       return {
-        width: maxX - minX,
-        height: maxY - minY,
-        centerX: (minX + maxX) / 2,
-        centerY: (minY + maxY) / 2
+        width: 0,
+        height: 0,
+        centerX: 0,
+        centerY: 0
       };
     });
     watch(visualStreamSize, () => {
       handleStreamListTransform();
     });
     function handleStreamListTransform() {
-      if (!liveStreamViewContainerRef.value) {
+      if (!liveCoreViewContainerRef.value) {
         return;
       }
-      const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
-      const containerWidth = Math.floor(containerRect.width);
-      const containerHeight = Math.floor(containerRect.height);
       if (visualStreamSize.value.width && visualStreamSize.value.height) {
+        const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
+        const containerWidth = Math.floor(containerRect.width);
+        const containerHeight = Math.floor(containerRect.height);
         const scaleWidth = containerWidth / visualStreamSize.value.width;
         const scaleHeight = containerHeight / visualStreamSize.value.height;
         originStreamViewStyle.value.scale = Math.min(scaleWidth, scaleHeight);
@@ -147,25 +178,7 @@ 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 {
-          width: `${Math.floor(originStreamViewStyle.value.width)}px`,
-          height: `${Math.floor(originStreamViewStyle.value.height)}px`
-        };
-      }
       return {
         width: `${Math.floor(originStreamViewStyle.value.width) * originStreamViewStyle.value.scale}px`,
         height: `${Math.floor(originStreamViewStyle.value.height) * originStreamViewStyle.value.scale}px`,
@@ -194,24 +207,57 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return Number(aspectRatio.value.split(":")[1]);
     });
+    const fillMode = ref(
+      "fit"
+      /* Fit */
+    );
+    watch(() => [canvas.value, seatList.value], () => {
+      if (canvas.value.width > canvas.value.height) {
+        fillMode.value = "fit";
+        handleStreamRegionSize();
+        return;
+      }
+      const onlyOneSeat = seatList.value.length === 1;
+      const hasOneFullScreenUser = seatList.value.find((item) => {
+        var _a, _b;
+        return ((_a = item.region) == null ? void 0 : _a.w) === canvas.value.width && ((_b = item.region) == null ? void 0 : _b.h) === canvas.value.height;
+      });
+      if (!isInStreamMixerComp.value && (onlyOneSeat || hasOneFullScreenUser)) {
+        fillMode.value = "fill";
+      } else {
+        fillMode.value = "fit";
+      }
+      handleStreamRegionSize();
+    });
     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) {
         const scaleWidth = containerWidth / widthRatio.value;
         const scaleHeight = containerHeight / heightRatio.value;
-        if (scaleWidth > scaleHeight) {
-          width = containerHeight / heightRatio.value * widthRatio.value;
-          height = containerHeight;
-        }
-        if (scaleWidth <= scaleHeight) {
-          width = containerWidth;
-          height = containerWidth / widthRatio.value * heightRatio.value;
+        if (fillMode.value === "fit") {
+          if (scaleWidth > scaleHeight) {
+            width = containerHeight / heightRatio.value * widthRatio.value;
+            height = containerHeight;
+          }
+          if (scaleWidth <= scaleHeight) {
+            width = containerWidth;
+            height = containerWidth / widthRatio.value * heightRatio.value;
+          }
+        } else {
+          if (scaleWidth > scaleHeight) {
+            width = containerWidth;
+            height = containerWidth / widthRatio.value * heightRatio.value;
+          }
+          if (scaleWidth <= scaleHeight) {
+            width = containerHeight / heightRatio.value * widthRatio.value;
+            height = containerHeight;
+          }
         }
       }
       originStreamViewStyle.value.width = width;
@@ -223,13 +269,16 @@ 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;
+      liveCoreViewContainerSize.value = {
+        width: containerRect.width,
+        height: containerRect.height
+      };
     };
     const ro = new ResizeObserver(() => {
       getContainerOrientation();
@@ -237,28 +286,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: normalizeClass(["live-core-view-container", { "align-center": isAlignCenter.value }])
       }, [
+        !_ctx.$slots.localVideo && !isPlayedVideo.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
+        ])) : createCommentVNode("", true),
         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, [
@@ -276,16 +325,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ], 4);
             }), 128))
           ])) : createCommentVNode("", true),
-          _ctx.$slots.localVideo && isMounted.value ? renderSlot(_ctx.$slots, "localVideo", normalizeProps(mergeProps({ key: 2 }, { style: (_a = localStreamViewInfo.value) == null ? void 0 : _a.region })), void 0, true) : createCommentVNode("", true)
+          _ctx.$slots.localVideo && isMounted.value ? renderSlot(_ctx.$slots, "localVideo", normalizeProps(mergeProps({ key: 1 }, { style: (_a = localStreamViewInfo.value) == null ? void 0 : _a.region })), void 0, true) : createCommentVNode("", true)
         ], 4)
-      ], 512);
+      ], 2);
     };
   }
 });
-const LiveStreamViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a84f78de"]]);
+const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-46f33693"]]);
 addI18n("en-US", { translation: resource });
 addI18n("zh-CN", { translation: resource$1 });
 export {
   DefaultStreamViewUI,
-  LiveStreamViewComponent as LiveStreamView
+  LiveCoreViewComponent as LiveCoreView
 };

package/dist/components/{LiveStreamView → LiveCoreView}/index.vue.d.ts

@@ -11,7 +11,16 @@ declare function __VLS_template(): {
             top: string;
             width: string;
             height: string;
+            transform: string;
             zIndex: number;
+        } | {
+            position: "absolute";
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+            transform?: undefined;
         } | undefined;
     }): any;
 };

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,64 +8,85 @@ 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) => ({
+      "ffe37efa": liveItemWidth.value,
+      "67ead60a": liveItemHeight.value,
+      "8528cf9a": coverWidth.value,
+      "538f174c": 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) => {
         if (user && user.userId) {
           isLoadingMore.value = true;
+          currentCursor.value = "";
+          liveList.value.length = 0;
           await fetchLiveList({});
           isLoadingMore.value = false;
         }
       },
       { 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 +107,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 +127,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 +158,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-7d3dee6f"]]);
 export {
   LiveListPC as default
 };