diff --git a/web/src/features/groups/GroupDetailColumn.tsx b/web/src/features/groups/GroupDetailColumn.tsx
index f2744bf1..4f77f137 100644
--- a/web/src/features/groups/GroupDetailColumn.tsx
+++ b/web/src/features/groups/GroupDetailColumn.tsx
@@ -81,7 +81,7 @@ export function GroupDetailColumn({ topicId, peerName, onClose, onOpenHistory }:
   const [nicknameEditing, setNicknameEditing] = useState(false);
   const [nicknameDraft, setNicknameDraft] = useState('');
   const [errorToast, setErrorToast] = useState('');
-  const [openModal, setOpenModal] = useState<'members' | 'announcement' | 'files' | 'admin' | 'qrcode' | null>(null);
+  const [openModal, setOpenModal] = useState<'members' | 'invite' | 'announcement' | 'files' | 'admin' | 'qrcode' | null>(null);
   const showError = (err: unknown, fallback: string) => setErrorToast(err instanceof Error ? err.message : fallback);
 
   // Same long-lived-instance leak this exact pattern already caused twice in DetailColumn.tsx --
@@ -284,7 +284,13 @@ export function GroupDetailColumn({ topicId, peerName, onClose, onOpenHistory }:
                 </div>
               ))}
               {canInvite ? (
-                <button type="button" onClick={() => setOpenModal('members')} className="flex flex-col items-center gap-1">
+                // Goes straight to the invite-candidates view (GroupMembersModal's `initialView=
+                // "invite"`), not the member list -- this dedicated "+邀请" tile landing on the member
+                // list and requiring a SECOND click on an in-modal "邀请" button was a real, reported
+                // UX complaint ("点击邀请那个按钮弹出的并不是直接到邀请，而是显示的成员列表，还要再次
+                // 点击邀请"). "查看全部"/"查看全部成员" right below/above this still correctly open the
+                // plain member list -- only THIS tile's whole purpose is inviting.
+                <button type="button" onClick={() => setOpenModal('invite')} className="flex flex-col items-center gap-1">
                   <span className="grid h-11 w-11 place-items-center rounded-lg border border-dashed border-[#c5cad2] text-text-tertiary-3 md:h-10 md:w-10">
                     <Icon name="add" className="text-[18px]" />
                   </span>
@@ -420,8 +426,13 @@ export function GroupDetailColumn({ topicId, peerName, onClose, onOpenHistory }:
 
       <Toast message={errorToast} variant="error" onDone={() => setErrorToast('')} />
 
-      {openModal === 'members' ? (
-        <GroupMembersModal topicId={topicId} canInvite={canInvite} onClose={() => setOpenModal(null)} />
+      {openModal === 'members' || openModal === 'invite' ? (
+        <GroupMembersModal
+          topicId={topicId}
+          canInvite={canInvite}
+          initialView={openModal === 'invite' ? 'invite' : 'members'}
+          onClose={() => setOpenModal(null)}
+        />
       ) : null}
       {openModal === 'announcement' ? (
         <GroupAnnouncementModal topicId={topicId} canEdit={isAdmin} onClose={() => setOpenModal(null)} />
diff --git a/web/src/features/groups/GroupMembersModal.tsx b/web/src/features/groups/GroupMembersModal.tsx
index 043d2a7a..82f746d4 100644
--- a/web/src/features/groups/GroupMembersModal.tsx
+++ b/web/src/features/groups/GroupMembersModal.tsx
@@ -6,7 +6,7 @@ import { Icon } from '@/app/Icon';
 import { Toast } from '@/app/Toast';
 import { fetchAllPages } from '@/lib/api/client';
 import { getFriends } from '@/lib/api/friends';
-import { getAllGroupMembers, inviteGroupMembers, type GroupRole } from '@/lib/api/groups';
+import { getAllGroupMembers, inviteGroupMembers, type GroupInvitationResult, type GroupRole } from '@/lib/api/groups';
 import { avatarBgClass, avatarLetter } from '@/lib/avatar';
 import { useEscapeKey } from '@/lib/hooks';
 
@@ -28,6 +28,13 @@ interface GroupMembersModalProps {
    *  from the same settings query) rather than re-deriving from a bare role here, which is exactly
    *  what silently made that governance toggle a no-op before this was wired through. */
   canInvite: boolean;
+  /** "invite" opens straight into the invite-candidates view, skipping the member list entirely --
+   *  the dedicated "邀请" entry point (GroupDetailColumn's dashed-border tile) used to route through
+   *  here too but land on the member list regardless, requiring a SECOND click on an in-modal "邀请"
+   *  button to actually reach this view (a real, reported UX complaint: "点击邀请那个按钮弹出的并不是
+   *  直接到邀请，而是显示的成员列表，还要再次点击邀请"). Defaults to "members" for every OTHER caller
+   *  (查看全部成员 etc.), which should still land on the member list as before. */
+  initialView?: 'members' | 'invite';
   onClose: () => void;
 }
 
@@ -36,11 +43,27 @@ interface GroupMembersModalProps {
  *  an existing group, not just at creation time). No "移出成员" affordance here: this protocol has
  *  no documented REST or WS operation for removing a group member at all (grepped the whole
  *  protocol doc) -- a real backend gap, not a client oversight, so this doesn't pretend to offer it. */
-export function GroupMembersModal({ topicId, canInvite, onClose }: GroupMembersModalProps) {
+/** Per-candidate outcome once invited THIS session -- keyed by user_id, separate from `alreadyMember`
+ *  (a person can be successfully invited without becoming a member yet -- see the "pending"/
+ *  "pending_approval" case below). No REST endpoint exists to list a group's outstanding invitations
+ *  (confirmed: grepped the protocol doc), so this can only ever reflect invites sent from THIS modal
+ *  session, not ones sent earlier and never followed up on -- reopening the modal loses this. */
+type InviteOutcome = GroupInvitationResult['status'];
+
+const OUTCOME_LABEL: Record<InviteOutcome, string> = {
+  joined: '已加入',
+  already_member: '已在群内',
+  pending: '邀请已发送',
+  pending_approval: '待对方确认',
+  failed: '邀请失败',
+};
+
+export function GroupMembersModal({ topicId, canInvite, initialView = 'members', onClose }: GroupMembersModalProps) {
   const queryClient = useQueryClient();
   const [query, setQuery] = useState('');
-  const [inviting, setInviting] = useState(false);
+  const [inviting, setInviting] = useState(initialView === 'invite');
   const [error, setError] = useState('');
+  const [outcomeByUser, setOutcomeByUser] = useState<Record<string, InviteOutcome>>({});
   useEscapeKey(onClose);
 
   const membersQuery = useQuery({ queryKey: ['group-members', topicId], queryFn: () => getAllGroupMembers(topicId) });
@@ -59,7 +82,17 @@ export function GroupMembersModal({ topicId, canInvite, onClose }: GroupMembersM
 
   const inviteMutation = useMutation({
     mutationFn: (userId: string) => inviteGroupMembers(topicId, [userId]),
-    onSuccess: () => {
+    onSuccess: (data, userId) => {
+      // A real, previously-missing gap this fixes: the old version only ever refetched the member
+      // list and left it at that -- for the common "joined immediately" case that's a silent success
+      // with no feedback beyond the candidate eventually re-rendering as "已在群内" on its own, and
+      // for "pending"/"pending_approval" (requires the target's own action, or the group's/their own
+      // approval setting) there was NO feedback at all -- the row just sat there looking un-invited,
+      // inviting a confused repeat click. `items[0]` because this call always invites exactly one
+      // user_id at a time.
+      const outcome = data.items[0]?.status;
+      if (outcome) setOutcomeByUser((prev) => ({ ...prev, [userId]: outcome }));
+      if (outcome === 'failed' && data.items[0]?.reason) setError(data.items[0].reason);
       queryClient.invalidateQueries({ queryKey: ['group-members', topicId] });
       queryClient.invalidateQueries({ queryKey: ['group-members-preview', topicId] });
       queryClient.invalidateQueries({ queryKey: ['group', topicId] });
@@ -101,22 +134,34 @@ export function GroupMembersModal({ topicId, canInvite, onClose }: GroupMembersM
               .filter((f) => !query.trim() || (f.remark || f.display_name || f.user_id).toLowerCase().includes(query.trim().toLowerCase()))
               .map((f) => {
                 const label = f.remark || f.display_name || f.user_id;
+                // `alreadyMember` (a real member, known up front) and a THIS-SESSION invite outcome
+                // are two different reasons a candidate can be non-actionable -- alreadyMember wins if
+                // both are somehow true (the member-list refetch above should already have cleared the
+                // "joined" outcome to alreadyMember=true by then anyway).
+                const outcome = f.alreadyMember ? 'already_member' : outcomeByUser[f.user_id];
+                // "failed" deliberately does NOT count as settled -- could be a transient network blip,
+                // and there's no harm in letting the same click retry (a genuinely permanent failure,
+                // e.g. the target blocked invites, just fails again harmlessly). Every other outcome is
+                // a real, done state with nothing left to retry.
+                const settled = !!outcome && outcome !== 'failed';
                 return (
                   <button
                     key={f.user_id}
                     type="button"
-                    disabled={inviteMutation.isPending || f.alreadyMember}
+                    disabled={inviteMutation.isPending || settled}
                     onClick={() => inviteMutation.mutate(f.user_id)}
                     className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left hover:bg-surface-rail disabled:hover:bg-transparent ${
-                      f.alreadyMember ? 'opacity-50' : ''
+                      settled ? 'opacity-50' : ''
                     }`}
                   >
                     <span className={`grid h-9 w-9 flex-none place-items-center rounded-lg text-sm font-medium text-white ${avatarBgClass(f.user_id)}`}>
                       {avatarLetter(label)}
                     </span>
                     <span className="flex-1 truncate text-sm text-text-body">{label}</span>
-                    {f.alreadyMember ? (
-                      <span className="flex-none text-xs text-text-tertiary-3">已在群内</span>
+                    {outcome ? (
+                      <span className={`flex-none text-xs ${outcome === 'failed' ? 'text-danger-text' : 'text-text-tertiary-3'}`}>
+                        {OUTCOME_LABEL[outcome]}
+                      </span>
                     ) : (
                       <Icon name="person_add" className="text-[18px] text-accent" />
                     )}