yx-web-sdk 0.0.4

package/dist/components/chat-content/composables/ait-person.d.ts

@@ -0,0 +1,86 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { MemberInfo } from 'nim-web-sdk-ng/dist/v1/QCHAT_BROWSER_SDK/QChatServerServiceInterface';
+/**
+ * 获取文本中所有 `@用户 + 空格` 标签的起止下标（左闭右开），供外部按需使用
+ * @param {string} text - 文本
+ * @return {Array} 所有 `@用户 + 空格` 标签的起止下标
+ */
+export declare function getMentionSpans(text: string): {
+    start: number;
+    end: number;
+}[];
+/**
+ * 获取光标位置所在的 `@用户 + 空格` 标签区间；若不在任何标签内则返回 null，供外部按需使用
+ * @param {string} text - 文本
+ * @param {number} pos - 光标位置
+ * @param {KeyboardEvent['key']} key - 键盘事件的键
+ * @return {Object | null} 光标位置所在的 `@用户 + 空格` 标签区间，若不在任何标签内则返回 null
+ */
+export declare function getMentionSpanAt(text: string, pos: number, key?: KeyboardEvent['key']): {
+    start: number;
+    end: number;
+} | null;
+/** @ 提及成员项类型（与频道成员数据结构一致） */
+export interface AitPersonMember {
+    accid: string;
+    nick?: string;
+    avatar?: string;
+}
+/** @ 提及列表单项：所有人 | 成员 */
+export interface AitPopoverItem {
+    label: string;
+    member: AitPersonMember | null;
+}
+/**
+ * 从完整文本解析所有 @ 标签，得到「是否含所有人」与去重后的 accid 列表（供发送使用）
+ * 删除/新增 @ 后只需用最新文本调用本函数即可同步，无需保存光标或区间位置
+ * @param text - 输入框文本
+ * @param members - 当前频道成员列表
+ * @param myAccid - 当前用户 accid
+ * @param enableMentionEveryone - 是否开启@所有人功能
+ * @returns { hasEveryone: boolean, accids: string[] } 是否含所有人，去重后的 accid 列表
+ */
+export declare function parseMentionStateFromText(text: string, members: MemberInfo[], myAccid: string, enableMentionEveryone?: boolean): {
+    hasEveryone: boolean;
+    accids: string[];
+};
+/** useAitPerson 入参：依赖组件的输入状态与成员列表 */
+export interface UseAitPersonOptions {
+    scrollRef: Ref<HTMLDivElement | undefined>;
+    curText: Ref<string>;
+    cursorIndex: Ref<number>;
+    serverMembers: ComputedRef<MemberInfo[]>;
+    /** 当前用户 accid，用于从列表中排除自己（弹框只展示「所有人」+ 除我以外的成员） */
+    myAccid?: string;
+}
+/**
+ * @用户 提及选人逻辑：弹框显隐、光标坐标、上下键选中、回车/点击确认
+ */
+export declare function useAitPerson(options: UseAitPersonOptions): {
+    showAitPersonPopover: Ref<boolean, boolean>;
+    scrollbarWidth: Ref<number, number>;
+    cursorRectRef: Ref<{
+        left: number;
+        top: number;
+    } | null, {
+        left: number;
+        top: number;
+    } | {
+        left: number;
+        top: number;
+    } | null>;
+    aitPersonSelectedIndex: Ref<number, number>;
+    aitPopoverItems: ComputedRef<MemberInfo[]>;
+    /** 弹框内展示的成员列表（无前缀全量，有前缀为过滤结果） */
+    aitDisplayItems: ComputedRef<MemberInfo[]>;
+    aitPopoverItemsLength: ComputedRef<number>;
+    mentionAccids: ComputedRef<string[]>;
+    setAitItemRef: (el: unknown, index: number) => void;
+    handleInputKeydown: (e: KeyboardEvent) => void;
+    /** 点击时若落在 @用户 标签内则整段选中 */
+    handleMentionClick: (e: MouseEvent) => void;
+    confirmAitSelection: (clickIndex?: number) => void;
+    aitPersonHandler: (e: Event) => void;
+    closeAitPopover: () => void;
+    getAccurateScrollbarWidth: () => void;
+};

package/dist/components/chat-content/index.d.ts

@@ -0,0 +1,3 @@
+import ChatContent from './index.vue';
+export default ChatContent;
+export { ChatContent };

package/dist/components/chat-content/index.vue.d.ts

@@ -0,0 +1,51 @@
+import type { SendMsgOption } from '../../stores/channel';
+import type { QChatMessage } from 'nim-web-sdk-ng/dist/v1/QCHAT_BROWSER_SDK/QChatMsgServiceInterface';
+type __VLS_Props = {
+    /** 当前频道消息列表 */
+    msgs?: QChatMessage[];
+    /** 当前频道名称 */
+    channelName?: string;
+    /** 当前频道主题 */
+    topic?: string;
+    /** 图片上传状态 */
+    imgUploading?: boolean;
+    /** 文件上传状态 */
+    fileUploading?: boolean;
+    /** 发送权限 */
+    sendDisabled?: boolean;
+    /** 是否没有更多消息 */
+    isNoMore?: boolean;
+    /** 我的账号 ID */
+    myAccid?: string;
+    /** 我的头像 */
+    myAvatar?: string;
+    /** 加载更多历史消息回调（需要返回值，保持 props） */
+    onLoadMore?: (lastTime: number) => Promise<void>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    resendText: (msg: QChatMessage) => any;
+    resendImg: (msg: QChatMessage) => any;
+    resendFile: (msg: QChatMessage) => any;
+    sendText: (text: string, option?: SendMsgOption | undefined) => any;
+    sendImg: (file: File) => any;
+    sendFile: (file: File) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onResendText?: ((msg: QChatMessage) => any) | undefined;
+    onResendImg?: ((msg: QChatMessage) => any) | undefined;
+    onResendFile?: ((msg: QChatMessage) => any) | undefined;
+    onSendText?: ((text: string, option?: SendMsgOption | undefined) => any) | undefined;
+    onSendImg?: ((file: File) => any) | undefined;
+    onSendFile?: ((file: File) => any) | undefined;
+}>, {
+    topic: string;
+    myAccid: string;
+    myAvatar: string;
+    msgs: QChatMessage[];
+    channelName: string;
+    imgUploading: boolean;
+    fileUploading: boolean;
+    sendDisabled: boolean;
+    isNoMore: boolean;
+    onLoadMore: (lastTime: number) => Promise<void>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/chat-page/index.d.ts

@@ -0,0 +1,3 @@
+import ChatPage from './index.vue';
+export default ChatPage;
+export { ChatPage };

package/dist/components/chat-page/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    myAccid?: string;
+    myAvatar?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/chat-room/index.d.ts

@@ -0,0 +1,3 @@
+import ChatRoom from './index.vue';
+export default ChatRoom;
+export { ChatRoom };

package/dist/components/chat-room/index.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    myAccid?: string;
+    myAvatar?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    myAccid: string;
+    myAvatar: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/common-avatar/index.d.ts

@@ -0,0 +1,3 @@
+import CommonAvatar from './index.vue';
+export default CommonAvatar;
+export { CommonAvatar };

package/dist/components/common-avatar/index.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    avatar?: string;
+    nick?: string;
+    accid?: string;
+    width?: number;
+    border?: number;
+    borderColor?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    accid: string;
+    nick: string;
+    avatar: string;
+    width: number;
+    border: number;
+    borderColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/icon-font/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 原始 IconFont 组件，由 iconfont 脚本生成
+ */
+declare const IconFontBase: import("vue").FunctionalComponent<import("@ant-design/icons-vue/lib/components/IconFont").IconFontProps, {}, any, {}>;
+/**
+ * IconFont 包装组件，支持 size 属性
+ * @example
+ * <Icon type="gt-line-Refresh1" size="16" />
+ * <Icon type="gt-logo-picture" size={20} />
+ */
+declare const IconFont: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * 图标类型/名称
+     */
+    type: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * 图标大小，支持数字或字符串（如 '16px'、'1em'）
+     */
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * 图标类型/名称
+     */
+    type: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * 图标大小，支持数字或字符串（如 '16px'、'1em'）
+     */
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default IconFont;
+export { IconFont, IconFontBase };

package/dist/components/index-entry/index.d.ts

@@ -0,0 +1,2 @@
+import IndexEntry from './index.vue';
+export default IndexEntry;

package/dist/components/index-entry/index.vue.d.ts

@@ -0,0 +1,25 @@
+import type { QChatMessage } from 'nim-web-sdk-ng/dist/v1/QCHAT_BROWSER_SDK/QChatMsgServiceInterface';
+import type { IMCredentials } from '../../stores/sdk';
+type __VLS_Props = {
+    credentials: IMCredentials;
+    autoInit?: boolean;
+    serverId?: string;
+    request: (options: {
+        url: string;
+        method: string;
+        data?: any;
+    }) => Promise<any>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    init: () => Promise<void>;
+    destroy: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    message: (msg: QChatMessage) => any;
+    error: (error: string) => any;
+    ready: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMessage?: ((msg: QChatMessage) => any) | undefined;
+    onError?: ((error: string) => any) | undefined;
+    onReady?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/index.d.ts

@@ -0,0 +1,12 @@
+export { default as ChatCard } from './chat-card';
+export { default as ChatContent } from './chat-content';
+export { default as ChatPage } from './chat-page';
+export { default as ChatRoom } from './chat-room';
+export { default as CommonAvatar } from './common-avatar';
+export { default as IconFont } from './icon-font';
+export { default as ServerChannelSidebar } from './server-channel-sidebar';
+export { default as MembersSidebar } from './members-sidebar';
+export { default as IndexEntry } from './index-entry';
+export { default as AitPersonPopover } from './ait-person-popover';
+export { default as NoticeBox } from './notice-box';
+export { componentList, type ComponentName } from './list';

package/dist/components/list.d.ts

@@ -0,0 +1,2 @@
+export declare const componentList: readonly ["chat-card", "chat-content", "chat-page", "chat-room", "common-avatar", "icon-font", "notice-box", "index-entry", "server-channel-sidebar", "members-sidebar", "ait-person-popover"];
+export type ComponentName = (typeof componentList)[number];

package/dist/components/members-sidebar/index.d.ts

@@ -0,0 +1,3 @@
+import MembersSidebar from './index.vue';
+export { MembersSidebar };
+export default MembersSidebar;

package/dist/components/members-sidebar/index.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    toggleCollapse: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/notice-box/index.d.ts

@@ -0,0 +1,3 @@
+import NoticeBox from './index.vue';
+export { NoticeBox };
+export default NoticeBox;

package/dist/components/notice-box/index.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    /** 公告内容 */
+    content: string;
+    /** 滚动速度（像素/秒），与内容长度无关，越大滚得越快 */
+    scrollSpeed?: number;
+    /** 渲染好后延迟多少毫秒开始滚动，默认 3000 */
+    scrollDelayMs?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    scrollSpeed: number;
+    scrollDelayMs: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/server-channel-sidebar/index.d.ts

@@ -0,0 +1,3 @@
+import ServerChannelSidebar from './index.vue';
+export { ServerChannelSidebar };
+export default ServerChannelSidebar;

package/dist/components/server-channel-sidebar/index.vue.d.ts

@@ -0,0 +1,18 @@
+import type { ServerInfo } from 'nim-web-sdk-ng/dist/v1/QCHAT_BROWSER_SDK/QChatServerServiceInterface';
+import type { ChannelInfo } from 'nim-web-sdk-ng/dist/v1/QCHAT_BROWSER_SDK/QChatChannelServiceInterface';
+type __VLS_Props = {
+    request: (options: {
+        url: string;
+        method: string;
+        data?: any;
+        params?: any;
+    }) => Promise<any>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    selectServer: (server: ServerInfo) => any;
+    selectChannel: (channel: ChannelInfo) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelectServer?: ((server: ServerInfo) => any) | undefined;
+    onSelectChannel?: ((channel: ChannelInfo) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/global.css

@@ -0,0 +1,39 @@
+:root {
+  --im-img-msg-width: 230px;
+  --im-img-msg-height: 160px;
+}
+
+.ant-btn-primary {
+  background-color: var(--theme-primary);
+}
+
+.ant-btn-primary:not(:disabled):hover {
+  background-color: var(--theme-primary);
+}
+
+.ant-modal .ant-modal-content {
+  padding: 0;
+}
+
+.ant-modal-header {
+  padding: 16px 16px 0 16px;
+}
+
+.ant-modal-body {
+  padding: 16px 16px 0 16px;
+}
+
+.ant-modal-footer {
+  padding: 0 16px 16px 16px;
+}
+
+.ant-image-img.imgMsg {
+  width: var(--im-img-msg-width, 230px);
+  height: var(--im-img-msg-height, 160px);
+  border-radius: 8px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  background-color: transparent;
+  padding: 2px 0;
+  cursor: pointer;
+}

package/dist/icon-font/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 原始 IconFont 组件，由 iconfont 脚本生成
+ */
+declare const IconFontBase: import("vue").FunctionalComponent<import("@ant-design/icons-vue/lib/components/IconFont").IconFontProps, {}, any, {}>;
+/**
+ * IconFont 包装组件，支持 size 属性
+ * @example
+ * <Icon type="gt-line-Refresh1" size="16" />
+ * <Icon type="gt-logo-picture" size={20} />
+ */
+declare const IconFont: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * 图标类型/名称
+     */
+    type: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * 图标大小，支持数字或字符串（如 '16px'、'1em'）
+     */
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * 图标类型/名称
+     */
+    type: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * 图标大小，支持数字或字符串（如 '16px'、'1em'）
+     */
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default IconFont;
+export { IconFont, IconFontBase };

package/dist/icon-font/index.js

@@ -0,0 +1,7 @@
+import "vue";
+import { I, d, I as I2 } from "../index-Dg8Q3cli.mjs";
+export {
+  I as IconFont,
+  d as IconFontBase,
+  I2 as default
+};

package/dist/index/style.css

@@ -0,0 +1,199 @@
+.yx-chat-page-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--theme-default-bg, #fff);
+}
+.yx-chat-page-container .header-wrap {
+  display: flex;
+  justify-content: space-between;
+  padding: 22px 20px;
+  height: 68px;
+  align-items: center;
+  border-bottom: 1px solid var(--theme-dividing-line, #f1f1f8);
+  font-size: 16px;
+  box-sizing: border-box;
+}
+.yx-chat-page-container .header-wrap .left {
+  display: flex;
+  align-items: center;
+}
+.yx-chat-page-container .header-wrap .left .symbol {
+  margin-right: 6px;
+  font-size: 16px;
+}
+.yx-chat-page-container .header-wrap .left .name {
+  margin-right: 16px;
+  font-weight: bold;
+}
+.yx-chat-page-container .header-wrap .left .divider {
+  width: 1px;
+  height: 28px;
+  margin-right: 16px;
+  background: #464a54;
+}
+.yx-chat-page-container .header-wrap .left .title {
+  font-size: 14px;
+  color: var(--theme-head-title-link);
+}
+.yx-chat-page-container .header-wrap .right {
+  color: #464a54;
+  font-size: 26px;
+}
+.yx-chat-page-container .header-wrap .right.active {
+  color: #a3a4a9;
+}
+.yx-chat-page-container .content-wrap {
+  display: inline-flex;
+  flex-direction: row;
+  height: calc(100% - 68px);
+}
+.yx-chat-page-container .content-wrap .main {
+  flex: 1;
+  height: 100%;
+  max-width: 100%;
+}
+.yx-chat-page-container .content-wrap .members-wrap {
+  position: relative;
+  width: 208px;
+  height: 100%;
+  padding: 2px 0;
+  background-color: var(--theme-bg-default, #fff);
+  border-left: 1px solid var(--theme-line-border, #f1f1f8);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask {
+  position: fixed;
+  top: 55px;
+  right: 0;
+  width: 208px;
+  height: auto;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .ant-list-item {
+  padding: 0;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .ant-list-header {
+  position: fixed;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask.expand {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask.expand .mask-content {
+  top: 55px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 208px;
+  max-height: calc(100vh - 55px);
+  overflow-y: scroll;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .load-more-wrap {
+  padding: 4px 0;
+  color: var(--theme-text);
+  border: 1px solid var(--theme-line-border);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  font-size: 14px;
+  color: var(--theme-text);
+  cursor: pointer;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item.selected {
+  background-color: #212326;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item .avatar {
+  margin-right: 8px;
+  margin-left: 14px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item .nick-name {
+  margin-right: 8px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item .nick-name .ant-typography {
+  color: var(--theme-text);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item .owner {
+  color: #ffbd3e;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap {
+  position: fixed;
+  width: 300px;
+  top: 93px;
+  right: 220px;
+  min-height: 318px;
+  border-radius: 8px;
+  background-color: #18191c;
+  text-align: left;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .header-background {
+  width: 100%;
+  height: 80px;
+  border-radius: 8px 8px 0 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap {
+  margin-top: -35px;
+  padding: 0 20px 36px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .avatar-wrap {
+  height: 70px;
+  border-radius: 50%;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .avatar-wrap img {
+  display: inline-block;
+  width: 70px;
+  height: 70px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 50%;
+  border: 4px solid #18191c;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .name-wrap {
+  margin-top: 17px;
+  margin-right: 8px;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 26px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .accid-wrap {
+  margin-top: 6px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .divider {
+  height: 1px;
+  margin-top: 16px;
+  background-color: var(--theme-line-border);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .roles-title {
+  margin-top: 16px;
+  font-size: 14px;
+  line-height: 16px;
+  color: #6e6f74;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .roles-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 16px;
+  color: var(--theme-text);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .roles-wrap .role-item {
+  padding: 4px 8px;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  border-radius: 8px;
+  background-color: #282a2f;
+}