tuikit-atomicx-vue3 0.1.0

package/dist/components/LiveAudienceList/LiveAudienceListH5.js

@@ -0,0 +1,88 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeStyle, createElementVNode, createCommentVNode, Fragment, renderList, unref, createVNode, renderSlot, toDisplayString } from "vue";
+import { useLoginState } from "../../states/LoginState.js";
+import { useLiveState } from "../../states/LiveState/index.js";
+import { useLiveAudienceState } from "../../states/LiveAudienceState.js";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import Avatar from "../Avatar/Avatar.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "viewers-list" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "viewer-info" };
+const _hoisted_4 = { class: "viewer-name" };
+const _hoisted_5 = {
+  key: 0,
+  class: "viewer-bottom-line"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "empty-state"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LiveAudienceListH5",
+  props: {
+    height: {},
+    style: {}
+  },
+  setup(__props) {
+    const { t } = useUIKit();
+    const currentViewerTarget = ref(null);
+    const props = __props;
+    const { loginUserInfo } = useLoginState();
+    const { audienceList, audienceCount } = useLiveAudienceState();
+    const { currentLive } = useLiveState();
+    const showActionMenu = ref(false);
+    const selectedViewer = ref(null);
+    const actionMenuStyle = ref({});
+    const isOwner = computed(() => {
+      var _a, _b;
+      return ((_a = loginUserInfo.value) == null ? void 0 : _a.userId) === ((_b = currentLive.value) == null ? void 0 : _b.liveOwner.userId);
+    });
+    const handleViewerClick = (viewer, event) => {
+      if (!isOwner.value) return;
+      selectedViewer.value = viewer;
+      showActionMenu.value = true;
+      const target = event.currentTarget;
+      currentViewerTarget.value = target;
+      const rect = target.getBoundingClientRect();
+      actionMenuStyle.value = {
+        position: "fixed",
+        left: `${rect.left}px`,
+        top: `${rect.bottom + 8}px`,
+        zIndex: 1001
+      };
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "viewers-panel",
+        style: normalizeStyle({ height: props.height, ...props.style })
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(audienceList), (viewer) => {
+            return openBlock(), createElementBlock("div", {
+              key: viewer.userId,
+              class: "viewer-item",
+              onClick: ($event) => handleViewerClick(viewer, $event)
+            }, [
+              createVNode(unref(Avatar), {
+                src: viewer.avatarUrl,
+                size: 40
+              }, null, 8, ["src"]),
+              renderSlot(_ctx.$slots, "audience-mark", { audience: viewer }, void 0, true),
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("span", _hoisted_4, toDisplayString(viewer.userName || viewer.userId), 1)
+              ])
+            ], 8, _hoisted_2);
+          }), 128)),
+          unref(audienceCount) >= 200 ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(unref(t)("Only show 200 viewers")), 1)) : createCommentVNode("", true),
+          unref(audienceList).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            createElementVNode("p", null, toDisplayString(unref(t)("No audience yet")), 1)
+          ])) : createCommentVNode("", true)
+        ])
+      ], 4);
+    };
+  }
+});
+const LiveAudienceListH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c41122fd"]]);
+export {
+  LiveAudienceListH5 as default
+};

package/dist/components/LiveAudienceList/LiveAudienceListH5.vue.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties } from 'vue';
+import { AudienceInfo } from '../../types';
+
+declare function __VLS_template(): {
+    "audience-mark"?(_: {
+        audience: AudienceInfo;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    height?: string;
+    style?: CSSProperties;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    height?: string;
+    style?: CSSProperties;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LiveAudienceList/UserActionMenu.js

@@ -0,0 +1,177 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, withModifiers, createElementVNode, createCommentVNode, createVNode, unref, toDisplayString, Fragment, renderList } from "vue";
+import { useUIKit, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { useCoGuestState } from "../../states/CoGuestState.js";
+import { useLiveAudienceState } from "../../states/LiveAudienceState.js";
+import { useLiveState } from "../../states/LiveState/index.js";
+import { useLoginState } from "../../states/LoginState.js";
+import Avatar from "../Avatar/Avatar.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "action-menu-content" };
+const _hoisted_2 = { class: "action-menu-header" };
+const _hoisted_3 = { class: "user-info-simple" };
+const _hoisted_4 = { class: "user-name-simple" };
+const _hoisted_5 = {
+  key: 0,
+  class: "action-menu-list"
+};
+const _hoisted_6 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UserActionMenu",
+  props: {
+    userId: {},
+    userName: {},
+    avatarUrl: {},
+    clickTarget: {}
+  },
+  emits: ["close"],
+  setup(__props, { emit: __emit }) {
+    const { t } = useUIKit();
+    const actionMenuRef = ref();
+    const emit = __emit;
+    const props = __props;
+    const { currentLive } = useLiveState();
+    const {
+      userListInCoGuest,
+      receivedCoGuestUserList,
+      sentCoGuestUserList,
+      availableCoGuestUserList,
+      sendCoGuestRequest,
+      cancelCoGuestRequest,
+      acceptCoGuestRequest,
+      rejectCoGuestRequest,
+      disconnect
+    } = useCoGuestState();
+    const { disableSendMessage, audienceList, kickUserOutOfRoom } = useLiveAudienceState();
+    const { loginUserInfo } = useLoginState();
+    const currentUserInfo = computed(() => audienceList.value.find((user) => user.userId === props.userId));
+    const isOwner = computed(() => {
+      var _a, _b;
+      return ((_a = loginUserInfo.value) == null ? void 0 : _a.userId) === ((_b = currentLive.value) == null ? void 0 : _b.liveOwner.userId);
+    });
+    const actions = computed(() => {
+      var _a;
+      const tempActions = [];
+      if (!isOwner.value) {
+        return [];
+      }
+      const isInCoGuest = userListInCoGuest.value.some((user) => user.userId === props.userId);
+      const isSentCoGuest = sentCoGuestUserList.value.some((user) => user.userId === props.userId);
+      const isAvailableCoGuest = availableCoGuestUserList.value.some((user) => user.userId === props.userId);
+      const isReceivedCoGuest = receivedCoGuestUserList.value.some((user) => user.userId === props.userId);
+      const isDisableSendMessage = (_a = currentUserInfo.value) == null ? void 0 : _a.isMessageDisabled;
+      if (!isDisableSendMessage) {
+        tempActions.push({
+          label: t("Mute"),
+          action: "disableSendMessage",
+          actionFn: () => disableSendMessage({ userId: props.userId, isDisable: true })
+        });
+      }
+      if (isDisableSendMessage) {
+        tempActions.push({
+          label: t("Unmute"),
+          action: "disableSendMessage",
+          actionFn: () => disableSendMessage({ userId: props.userId, isDisable: false })
+        });
+      }
+      if (isInCoGuest) {
+        tempActions.push({ label: t("Kick out"), action: "disconnect", actionFn: () => disconnect(props.userId) });
+      }
+      if (isAvailableCoGuest) {
+        tempActions.push({
+          label: t("Invite to seat"),
+          action: "takeSeat",
+          actionFn: () => sendCoGuestRequest({
+            userId: props.userId,
+            seatIndex: -1
+          })
+        });
+      }
+      if (isSentCoGuest) {
+        tempActions.push({
+          label: t("Cancel invitation"),
+          action: "cancelCoGuestRequest",
+          actionFn: () => cancelCoGuestRequest({ userId: props.userId })
+        });
+      }
+      if (isReceivedCoGuest) {
+        tempActions.push({
+          label: t("Accept invitation"),
+          action: "acceptCoGuestRequest",
+          actionFn: () => acceptCoGuestRequest({ userId: props.userId })
+        });
+        tempActions.push({
+          label: t("Reject invitation"),
+          action: "rejectCoGuestRequest",
+          actionFn: () => rejectCoGuestRequest({ userId: props.userId })
+        });
+      }
+      tempActions.push({
+        label: t("Kick out of room"),
+        action: "kickUserOutOfRoom",
+        actionFn: () => kickUserOutOfRoom({ userId: props.userId })
+      });
+      return tempActions;
+    });
+    const handleAction = async (action) => {
+      try {
+        await action.actionFn();
+        TUIToast.success({
+          message: t("Operation successful")
+        });
+      } catch (error) {
+        console.error("Action failed:", error);
+        TUIToast.error({
+          message: t("Operation failed")
+        });
+      }
+      emit("close");
+    };
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (!((_a = actionMenuRef.value) == null ? void 0 : _a.contains(target)) && !((_b = props.clickTarget) == null ? void 0 : _b.contains(target))) {
+        emit("close");
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("click", handleClickOutside);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "actionMenuRef",
+        ref: actionMenuRef,
+        class: "user-action-menu",
+        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["stop"]))
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, [
+              createVNode(unref(Avatar), {
+                src: _ctx.avatarUrl,
+                size: 26
+              }, null, 8, ["src"]),
+              createElementVNode("span", _hoisted_4, toDisplayString(_ctx.userName || _ctx.userId), 1)
+            ])
+          ]),
+          actions.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(actions.value, (action) => {
+              return openBlock(), createElementBlock("button", {
+                key: action.label,
+                class: "action-menu-item",
+                onClick: ($event) => handleAction(action)
+              }, toDisplayString(action.label), 9, _hoisted_6);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ])
+      ], 512);
+    };
+  }
+});
+const UserActionMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-edae413d"]]);
+export {
+  UserActionMenu as default
+};

package/dist/components/LiveAudienceList/UserActionMenu.vue.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    userId: string;
+    userName: string;
+    avatarUrl?: string;
+    clickTarget: HTMLElement | null;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/LiveAudienceList/i18n/en-US/index.d.ts

@@ -0,0 +1,18 @@
+export declare const resource: {
+    'Online audience': string;
+    'No audience yet': string;
+    Mute: string;
+    Unmute: string;
+    'Kick out': string;
+    'Invite to seat': string;
+    'Cancel invitation': string;
+    'Accept invitation': string;
+    'Reject invitation': string;
+    'Operation successful': string;
+    'Operation failed': string;
+    Me: string;
+    'Kick out of room': string;
+    'Scroll to load more': string;
+    'Loading...': string;
+    'Only show 200 viewers': string;
+};

package/dist/components/LiveAudienceList/i18n/en-US/index.js

@@ -0,0 +1,21 @@
+const resource = {
+  "Online audience": "Online audience",
+  "No audience yet": "No audience yet",
+  Mute: "Mute",
+  Unmute: "Unmute",
+  "Kick out": "Kick out",
+  "Invite to seat": "Invite to seat",
+  "Cancel invitation": "Cancel invitation",
+  "Accept invitation": "Accept invitation",
+  "Reject invitation": "Reject invitation",
+  "Operation successful": "Operation successful",
+  "Operation failed": "Operation failed",
+  Me: "Me",
+  "Kick out of room": "Kick out of room",
+  "Scroll to load more": "Scroll to load more",
+  "Loading...": "Loading...",
+  "Only show 200 viewers": "Only show 200 viewers"
+};
+export {
+  resource
+};

package/dist/components/LiveAudienceList/i18n/index.d.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/dist/components/LiveAudienceList/i18n/index.js

@@ -0,0 +1,6 @@
+import { resource } from "./en-US/index.js";
+import { resource as resource2 } from "./zh-CN/index.js";
+export {
+  resource as enResource,
+  resource2 as zhResource
+};

package/dist/components/LiveAudienceList/i18n/zh-CN/index.d.ts

@@ -0,0 +1,22 @@
+export declare const resource: {
+    'Online audience': string;
+    'No audience yet': string;
+    Mute: string;
+    Unmute: string;
+    'Kick out': string;
+    'Invite to seat': string;
+    'Cancel invitation': string;
+    'Accept invitation': string;
+    'Reject invitation': string;
+    'Invite to open camera': string;
+    'Invite to open microphone': string;
+    'Invite to close camera': string;
+    'Invite to close microphone': string;
+    'Operation successful': string;
+    'Operation failed': string;
+    Me: string;
+    'Kick out of room': string;
+    'Scroll to load more': string;
+    'Loading...': string;
+    'Only show 200 viewers': string;
+};

package/dist/components/LiveAudienceList/i18n/zh-CN/index.js

@@ -0,0 +1,25 @@
+const resource = {
+  "Online audience": "在线观众",
+  "No audience yet": "暂无观众",
+  Mute: "禁言",
+  Unmute: "解除禁言",
+  "Kick out": "踢出麦位",
+  "Invite to seat": "邀请上麦",
+  "Cancel invitation": "取消邀请",
+  "Accept invitation": "同意上麦申请",
+  "Reject invitation": "拒绝上麦申请",
+  "Invite to open camera": "邀请打开摄像头",
+  "Invite to open microphone": "邀请打开麦克风",
+  "Invite to close camera": "关闭摄像头",
+  "Invite to close microphone": "关闭麦克风",
+  "Operation successful": "操作成功",
+  "Operation failed": "操作失败",
+  Me: "我",
+  "Kick out of room": "踢出房间",
+  "Scroll to load more": "滚动加载更多",
+  "Loading...": "加载中...",
+  "Only show 200 viewers": "最多只显示 200 名观众哦"
+};
+export {
+  resource
+};

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

@@ -0,0 +1,41 @@
+declare const LiveAudienceList: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        height: {
+            type: import('vue').PropType<string>;
+        };
+        style: {
+            type: import('vue').PropType<import('vue').CSSProperties>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        height: {
+            type: import('vue').PropType<string>;
+        };
+        style: {
+            type: import('vue').PropType<import('vue').CSSProperties>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    height: {
+        type: import('vue').PropType<string>;
+    };
+    style: {
+        type: import('vue').PropType<import('vue').CSSProperties>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        "audience-mark"?(_: {
+            audience: import('../..').AudienceInfo;
+        }): any;
+    };
+});
+export { LiveAudienceList };

package/dist/components/LiveAudienceList/index.js

@@ -0,0 +1,12 @@
+import LiveAudienceListPC from "./LiveAudienceList.js";
+import LiveAudienceListH5 from "./LiveAudienceListH5.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";
+import { isMobile } from "../../utils/environment.js";
+const LiveAudienceList = isMobile ? LiveAudienceListH5 : LiveAudienceListPC;
+addI18n("en-US", { translation: resource });
+addI18n("zh-CN", { translation: resource$1 });
+export {
+  LiveAudienceList
+};

package/dist/components/LiveList/LiveList.js

@@ -0,0 +1,152 @@
+import { defineComponent, 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";
+import Avatar from "../Avatar/Avatar.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+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 = {
+  key: 0,
+  class: "bottom-text-no-more"
+};
+const _hoisted_13 = {
+  key: 1,
+  class: "no-live"
+};
+const _hoisted_14 = {
+  key: 2,
+  class: "bottom-text"
+};
+const _hoisted_15 = {
+  key: 0,
+  class: "load-more-lives"
+};
+const _hoisted_16 = {
+  key: 1,
+  class: "loading"
+};
+const DEFAULT_COVER = "https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LiveList",
+  emits: ["live-room-click"],
+  setup(__props, { emit: __emit }) {
+    const { liveList, hasMoreLive, isLoadingLiveList, isLoadingMore, fetchLiveList } = useLiveState();
+    const { loginUserInfo } = useLoginState();
+    const { t } = useUIKit();
+    const scrollContainerRef = ref(null);
+    const shouldFetchMoreLiveList = computed(() => {
+      return hasMoreLive.value && !isLoadingMore.value && !isLoadingLiveList.value;
+    });
+    const isShowMoreVisible = computed(() => {
+      return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
+    });
+    const emit = __emit;
+    watch(
+      loginUserInfo,
+      (user) => {
+        if (user && user.userId) {
+          fetchLiveList({});
+        }
+      },
+      { immediate: true }
+    );
+    function liveRoomClick(liveInfo) {
+      console.log("liveRoomClick,liveInfo:", liveInfo);
+      emit("live-room-click", liveInfo);
+    }
+    function isScrollAtBottom(threshold = 50) {
+      if (!scrollContainerRef.value) {
+        return false;
+      }
+      return scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - threshold;
+    }
+    function handleWheel(event) {
+      if (!scrollContainerRef.value) {
+        return;
+      }
+      if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
+        fetchLiveList({ append: true });
+      }
+    }
+    function handleCoverImageError(event) {
+      const image = event.target;
+      if (image) {
+        image.src = DEFAULT_COVER;
+      }
+    }
+    return (_ctx, _cache) => {
+      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
+        }, [
+          createElementVNode("div", _hoisted_2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(liveList), (item) => {
+              return openBlock(), createElementBlock("div", {
+                class: "live-item",
+                key: item.liveId,
+                onClick: ($event) => liveRoomClick(item)
+              }, [
+                createElementVNode("div", _hoisted_4, [
+                  createElementVNode("div", _hoisted_5, [
+                    createElementVNode("div", _hoisted_6, [
+                      createVNode(unref(IconLiveCoverHeader), { size: 10 }),
+                      createElementVNode("span", null, toDisplayString(unref(t)("LIVE")), 1)
+                    ]),
+                    createElementVNode("div", _hoisted_7, [
+                      createElementVNode("span", null, toDisplayString(item.currentViewerCount || 0), 1),
+                      createElementVNode("span", null, toDisplayString(unref(t)("people have watched the live")), 1)
+                    ])
+                  ]),
+                  createElementVNode("img", {
+                    src: item.coverUrl || DEFAULT_COVER,
+                    alt: "",
+                    onError: handleCoverImageError
+                  }, null, 40, _hoisted_8)
+                ]),
+                createElementVNode("span", _hoisted_9, toDisplayString(item.liveName), 1),
+                createElementVNode("div", _hoisted_10, [
+                  createVNode(unref(Avatar), {
+                    src: item.liveOwner.avatarUrl,
+                    size: 24
+                  }, null, 8, ["src"]),
+                  createElementVNode("span", _hoisted_11, toDisplayString(item.liveOwner.userName || item.liveOwner.userId), 1)
+                ])
+              ], 8, _hoisted_3);
+            }), 128))
+          ]),
+          !unref(hasMoreLive) ? (openBlock(), createElementBlock("div", _hoisted_12, [
+            createElementVNode("span", null, toDisplayString(unref(t)("No More")), 1)
+          ])) : createCommentVNode("", true)
+        ], 544)) : !unref(isLoadingLiveList) ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          createVNode(unref(IconNoLiveRoom), { size: 60 }),
+          createElementVNode("span", null, toDisplayString(unref(t)("No Live")), 1)
+        ])) : createCommentVNode("", true),
+        unref(liveList).length > 0 && (isShowMoreVisible.value || unref(isLoadingMore)) ? (openBlock(), createElementBlock("div", _hoisted_14, [
+          isShowMoreVisible.value ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(unref(t)("Load More")), 1)) : createCommentVNode("", true),
+          unref(isLoadingMore) ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(unref(t)("Loading...")), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const LiveListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b70b7281"]]);
+export {
+  LiveListPC as default
+};

package/dist/components/LiveList/LiveList.vue.d.ts

@@ -0,0 +1,8 @@
+import { LiveInfo } from '../../types';
+
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "live-room-click": (liveInfo: LiveInfo) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onLive-room-click"?: ((liveInfo: LiveInfo) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;