修复群邀请消息卡片丢弃"立即加入"按钮，被邀请人无法接受邀请

根因：POST /groups/{topic}/invitations 邀请成功后，后端会往邀请人与被邀请人的单聊会话里发一条 x-im-type=system_action、template=group_invitation_created 的消息，content.actions 里带着真实可用的 {type:"group_invitation_accept", label:"立即加入", target_id:<invitation_id>}（对照参考图 6.3 加入群聊.png）。但 chat-message.jsx 原来对所有 system_action/system_notice 消息一律只取 content.text 渲染成纯文本，这个 action 数据被整体丢弃，消息只显示"邀请你加入群聊。" 没有任何按钮——im-api.js 里封装好的 acceptGroupInvitation() 因此从来没有调用点。怎么修：chat-message.jsx 在原有的文本兜底之前，单独识别 content.actions 里 type=="group_invitation_accept" 的这一种模板，渲染一张带按钮的小卡片（其余 system_action/system_notice 模板的纯文本渲染保持不变，不受影响）； messages-view.jsx 新增 handleAcceptGroupInvitation，调用 acceptGroupInvitation() 并用已有的 showToast 反馈结果，逐层传给 ChatMessage 的新 onAcceptGroupInvitation prop。按钮点击后按 busy/joined/pending_approval/error 四态展示，避免重复提交。验证：用两个真实账号（A 建群，直接对 B 发起 POST /invitations）复现，重新构建后 B 的会话里正确出现"邀请你加入群聊。"+"立即加入"按钮；点击后正确调用 POST /group-invitations/{id}/accept 并把返回的失败原因("服务器繁忙，请稍后重试") 展示出来——这一步暴露了一个独立的后端 500 bug（accept 接口本身的实现有问题，已记录在测试报告里，不在本次前端修复范围内），前端的请求发起、按钮状态机和错误展示均已确认按预期工作。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-06 13:26:14 +08:00
parent a6014b84ee
commit cdca509183
10 changed files with 240 additions and 22 deletions
@@ -6373,7 +6373,10 @@ function Register({
        error: errors.invite,
        autoCapitalize: "off",
        autoCorrect: "off"
-      }, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("button", {
+      }, void 0, false), !usingPhone ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("p", {
+        className: "auth-help",
+        children: "未绑定手机号无法自助找回密码，忘记密码后只能联系企业管理员重置"
+      }, void 0, false) : null, (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("button", {
        className: "auth-primary",
        type: "submit",
        disabled: !form.username && !form.phone || !form.password || !agreed || submitting,
@@ -6644,6 +6647,10 @@ function Realname({
      });
      setStatus(data.status || 'pending');
      setError('');
+      (0,_lib_im_api_js__WEBPACK_IMPORTED_MODULE_3__.getRealnameStatus)().then(fresh => {
+        if (fresh.masked_name) setMaskedName(fresh.masked_name);
+        if (fresh.masked_id_number) setMaskedIdNumber(fresh.masked_id_number);
+      }).catch(() => {});
    } catch (err) {
      setError(err.message || '提交失败，请稍后重试');
    } finally {
@@ -15653,11 +15660,6 @@ function SettingsList({
    pending: '审核中',
    rejected: '未通过'
  }[realnameStatus] || '未认证';
-  const logout = () => {
-    if (window.confirm('确定要退出当前登录吗？')) {
-      onLogout ? onLogout() : onToast('当前环境不支持退出登录');
-    }
-  };
  return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("div", {
    className: "personal-page",
    children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)(Header, {
@@ -15712,7 +15714,7 @@ function SettingsList({
      }, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("button", {
        type: "button",
        className: "personal-logout",
-        onClick: logout,
+        onClick: () => setSheet('logout'),
        children: "退出当前登录"
      }, void 0, false)]
    }, void 0, true), sheet === 'cache' ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)(CacheClear, {
@@ -15727,6 +15729,10 @@ function SettingsList({
      onToast: onToast,
      onDeleteAccount: onDeleteAccount,
      onClose: () => setSheet(null)
+    }, void 0, false) : null, sheet === 'logout' ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)(LogoutConfirm, {
+      onToast: onToast,
+      onLogout: onLogout,
+      onClose: () => setSheet(null)
    }, void 0, false) : null]
  }, void 0, true);
 }
@@ -15768,6 +15774,23 @@ function ConfirmSheet({
    }, void 0, true)
  }, void 0, false);
 }
+function LogoutConfirm({
+  onLogout,
+  onToast,
+  onClose
+}) {
+  const confirm = () => {
+    onClose();
+    onLogout ? onLogout() : onToast('当前环境不支持退出登录');
+  };
+  return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)(ConfirmSheet, {
+    icon: "logout",
+    title: "退出登录",
+    body: "确定要退出当前登录吗？",
+    onConfirm: confirm,
+    onCancel: onClose
+  }, void 0, false);
+}
 function CacheClear({
  onToast,
  onClose
@@ -19008,7 +19031,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
      return this.tinode.createAccountBasic(login_, password_, {
        public: public_,
        tags: tags_,
-        cred: tinode_sdk__WEBPACK_IMPORTED_MODULE_4__.Tinode.credential(cred_),
+        cred: cred_ ? tinode_sdk__WEBPACK_IMPORTED_MODULE_4__.Tinode.credential(cred_) : undefined,
        attachments: attachments
      });
    }).then(ctrl => {
@@ -21178,7 +21201,7 @@ function MeetingDetail({
  const respond = response => {
    setBusy(true);
    (0,_lib_im_api_js__WEBPACK_IMPORTED_MODULE_3__.getMeeting)(meeting.meeting_id).then(fresh => (0,_lib_im_api_js__WEBPACK_IMPORTED_MODULE_3__.respondMeeting)(fresh.meeting_id, response, fresh.version)).then(_ => {
-      onToast(RESPONSE_LABEL[response] ? `已${RESPONSE_LABEL[response]}` : '已回应');
+      onToast(response === 'accepted' ? '已接受会议邀请' : response === 'declined' ? '已拒绝会议邀请' : '已标记为待定');
      load();
    }).catch(err => onToast(err.message || '操作失败')).finally(() => setBusy(false));
  };
@@ -21278,6 +21301,12 @@ function MeetingDetail({
            }, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxDEV)("small", {
              children: "已拒绝"
            }, void 0, false)]
+          }, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxDEV)("span", {
+            children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxDEV)("b", {
+              children: counts.tentative
+            }, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxDEV)("small", {
+              children: "待定"
+            }, void 0, false)]
          }, void 0, true)]
        }, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxDEV)("footer", {
          children: [meeting.permissions && meeting.permissions.can_remind ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxDEV)("button", {
@@ -248,6 +248,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
    this.handleShowAnnouncement = this.handleShowAnnouncement.bind(this);
    this.handleShowJoinRequests = this.handleShowJoinRequests.bind(this);
    this.handleSendFriendVerification = this.handleSendFriendVerification.bind(this);
+    this.handleAcceptGroupInvitation = this.handleAcceptGroupInvitation.bind(this);
    this.handleBatchDelete = this.handleBatchDelete.bind(this);
    this.handleBatchFavorite = this.handleBatchFavorite.bind(this);
    this.handleAttachFile = this.handleAttachFile.bind(this);
@@ -1218,6 +1219,21 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
    e.preventDefault();
    _lib_navigation_js__WEBPACK_IMPORTED_MODULE_20__["default"].navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_20__["default"].addUrlParam(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_20__["default"].setUrlSidePanel('', 'friend-verification'), 'uid', this.state.topic));
  }
+  handleAcceptGroupInvitation(invitationId) {
+    return (0,_lib_im_api_js__WEBPACK_IMPORTED_MODULE_19__.acceptGroupInvitation)(invitationId).then(result => {
+      if (result && result.status == 'joined') {
+        this.showToast('已加入群聊');
+      } else if (result && result.status == 'pending_approval') {
+        this.showToast('申请已提交，等待管理员通过');
+      } else {
+        this.showToast('已处理该邀请');
+      }
+      return result;
+    }).catch(err => {
+      this.showToast(err.message || '加入群聊失败，请重试');
+      throw err;
+    });
+  }
  showToast(text) {
    this.setState({
      toast: text
@@ -2055,6 +2071,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
              userIsAdmin: this.state.isAdmin,
              relationship: this.state.relationshipContext ? this.state.relationshipContext.relationship : null,
              onSendFriendVerification: this.handleSendFriendVerification,
+              onAcceptGroupInvitation: this.handleAcceptGroupInvitation,
              selectMode: this.props.selectMode,
              selected: this.props.selectedSeqs && this.props.selectedSeqs.includes(msg.seq),
              onToggleSelect: this.props.onToggleMessageSelect,
@@ -2595,7 +2612,10 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
    super(props);
    this.state = {
      progress: 0,
-      voicePlayed: isVoicePlayed(props.tinode.getCurrentUserID(), props.topic, props.seq)
+      voicePlayed: isVoicePlayed(props.tinode.getCurrentUserID(), props.topic, props.seq),
+      invitationBusy: false,
+      invitationResult: null,
+      invitationError: null
    };
    if (props.uploader) {
      props.uploader.onProgress = this.handleProgress.bind(this);
@@ -2608,6 +2628,7 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
    this.handleCancelUpload = this.handleCancelUpload.bind(this);
    this.handleDraftyClick = this.handleDraftyClick.bind(this);
    this.handleVoicePlayed = this.handleVoicePlayed.bind(this);
+    this.handleAcceptGroupInvitation = this.handleAcceptGroupInvitation.bind(this);
    this.formatterContext = {
      formatMessage: props.intl.formatMessage.bind(props.intl),
      viewportWidth: props.viewportWidth,
@@ -2763,6 +2784,53 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
      this.props.onQuoteClick(replyToSeq);
    }
  }
+  handleAcceptGroupInvitation(invitationId) {
+    if (this.state.invitationBusy || this.state.invitationResult || !this.props.onAcceptGroupInvitation) {
+      return;
+    }
+    this.setState({
+      invitationBusy: true,
+      invitationError: null
+    });
+    this.props.onAcceptGroupInvitation(invitationId).then(result => {
+      this.setState({
+        invitationBusy: false,
+        invitationResult: result && result.status || 'joined'
+      });
+    }).catch(err => {
+      this.setState({
+        invitationBusy: false,
+        invitationError: err && err.message || '操作失败，请重试'
+      });
+    });
+  }
+  renderGroupInvitationCard(text, action) {
+    const {
+      invitationBusy,
+      invitationResult,
+      invitationError
+    } = this.state;
+    return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)("div", {
+      className: "message-group-invitation",
+      children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)("div", {
+        children: text
+      }, void 0, false), invitationResult == 'joined' ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)("em", {
+        children: "已加入群聊"
+      }, void 0, false) : invitationResult == 'pending_approval' ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)("em", {
+        children: "已提交申请，等待管理员通过"
+      }, void 0, false) : invitationResult ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)("em", {
+        children: invitationResult
+      }, void 0, false) : (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)("button", {
+        type: "button",
+        disabled: invitationBusy,
+        onClick: () => this.handleAcceptGroupInvitation(action.target_id),
+        children: invitationBusy ? '处理中…' : action.label || '立即加入'
+      }, void 0, false), invitationError ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)("small", {
+        className: "message-group-invitation-error",
+        children: invitationError
+      }, void 0, false) : null]
+    }, void 0, true);
+  }
  renderFailReason() {
    if (this.props.response || this.props.received != tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_FAILED && this.props.received != tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_FATAL) {
      return null;
@@ -2804,7 +2872,12 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
    let textSizeClass = 'message-content';
    const fullDisplay = this.props.isGroup && this.props.response && (this.props.sequence == 'single' || this.props.sequence == 'last');
    let content = this.props.content;
-    if (this.props.head && (this.props.head['x-im-type'] === 'system_notice' || this.props.head['x-im-type'] === 'system_action') && content && typeof content == 'object' && typeof content.text == 'string') {
+    const systemActions = content && typeof content == 'object' && Array.isArray(content.actions) ? content.actions : null;
+    const inviteAction = this.props.head && this.props.head['x-im-type'] === 'system_action' && systemActions && systemActions.find(a => a && a.type === 'group_invitation_accept');
+    let invitationCard = null;
+    if (inviteAction && typeof content.text == 'string') {
+      invitationCard = this.renderGroupInvitationCard(content.text, inviteAction);
+    } else if (this.props.head && (this.props.head['x-im-type'] === 'system_notice' || this.props.head['x-im-type'] === 'system_action') && content && typeof content == 'object' && typeof content.text == 'string') {
      content = content.text;
    }
    let bundleCard = null;
@@ -2880,7 +2953,7 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
            className: "content-meta",
            children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)("div", {
              className: textSizeClass,
-              children: [bundleCard || content, attachments]
+              children: [invitationCard || bundleCard || content, attachments]
            }, void 0, true), this.props.timestamp ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxDEV)(_received_marker_jsx__WEBPACK_IMPORTED_MODULE_6__["default"], {
              edited: this.props.edited,
              timestamp: this.props.timestamp,
@@ -154,6 +154,14 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
        this.containerRef.current.style.cursor = 'grab';
      }
    };
+    this.handleWindowResize = () => {
+      if (this.props.minimized && this.containerRef && this.containerRef.current && window.matchMedia('(width<=640px)').matches) {
+        const el = this.containerRef.current;
+        el.style.removeProperty('left');
+        el.style.removeProperty('right');
+        el.style.removeProperty('top');
+      }
+    };
  }
  componentDidMount() {
    const topic = this.props.tinode.getTopic(this.props.topic);
@@ -167,12 +175,14 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
      this.containerRef.current.addEventListener('pointermove', this.drag);
      this.containerRef.current.addEventListener('pointerup', this.dragEnd);
    }
+    window.addEventListener('resize', this.handleWindowResize);
  }
  componentWillUnmount() {
    this._unmounted = true;
    const topic = this.props.tinode.getTopic(this.props.topic);
    topic.onInfo = this.previousOnInfo;
    this.stop();
+    window.removeEventListener('resize', this.handleWindowResize);
    if (this.containerRef) {
      this.containerRef.current.removeEventListener('pointerdown', this.dragStart);
      this.containerRef.current.removeEventListener('pointermove', this.drag);