@lark-apaas/coding-template-nestjs-react-fullstack 0.1.54 → 0.1.55-alpha.20261030035108

package/template/client/src/components/business-ui/user-profile/user-profile.tsx

@@ -2,30 +2,14 @@
 
 import { logger } from '@lark-apaas/client-toolkit/logger';
 
-import React, {
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import SHA1 from 'crypto-js/sha1';
 
-import { getAssetsUrl } from '@client/src/components/business-ui/api/user-profiles/service';
-import { useUserProfile } from '@client/src/components/business-ui/api/user-profiles/queries';
-import { ErrorImage } from '@client/src/components/business-ui/user-profile/error-image';
 import {
-  dropSpare,
-  ownProfileText,
-  ensureRender,
-  createOffscreenSlot,
-  getOffscreenHost,
-  hasSpare,
-  putSpare,
-  takeSpare,
-  waitForCardReady,
-} from '@client/src/components/business-ui/user-profile/lark-card-pool';
+  fetchUserProfile,
+  getAssetsUrl,
+} from '@client/src/components/business-ui/api/user-profiles/service';
+import { ErrorImage } from '@client/src/components/business-ui/user-profile/error-image';
 import { getEnv } from '@lark-apaas/client-toolkit/utils/getEnv';
 import { useExternalScript } from '@client/src/components/business-ui/user-profile/user-external-script';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -83,6 +67,8 @@ function generateRandomString(length: number): string {
   return result;
 }
 
+type BaseUserProfileProps = BaseSimpleProfileProps | BaseOfficialProfileProps;
+
 const ACCOUNT_STATUS = {
   UNSPECIFIED: 0,
   Inactive: 1,
@@ -104,31 +90,28 @@ const AccountStatusMap: Record<AccountStatus, string> = {
   [ACCOUNT_STATUS.Resigned]: '已停用',
 };
 
-interface SimpleProfileInfo {
-  readonly name?: string;
-  readonly avatar?: string;
-  readonly email?: string;
-  readonly userStatus: AccountStatus;
-  readonly userType: '_employee' | '_externalUser';
-}
-
-interface SimpleProfileData {
+interface BaseSimpleProfileProps {
   readonly useLarkCard: false;
-  readonly userProfileInfo: SimpleProfileInfo;
+  readonly userProfileInfo: {
+    readonly name?: string;
+    readonly avatar?: string;
+    readonly email?: string;
+    //
+    readonly userStatus: AccountStatus;
+    readonly userType: '_employee' | '_externalUser';
+  };
 }
 
-interface OfficialProfileData {
+interface BaseOfficialProfileProps {
   readonly useLarkCard: true;
-  readonly larkCardParam: LarkCardParam;
-}
-
-interface LarkCardParam {
-  readonly needRedirect?: boolean;
-  readonly redirectURL?: string;
-  readonly larkAppID: string;
-  readonly jsAPITicket: string;
-  readonly larkOpenID: string;
-  readonly targetLarkOpenID: string;
+  readonly larkCardParam: {
+    readonly needRedirect?: boolean;
+    readonly redirectURL?: string;
+    readonly larkAppID: string;
+    readonly jsAPITicket: string;
+    readonly larkOpenID: string;
+    readonly targetLarkOpenID: string;
+  };
 }
 
 /**
@@ -139,55 +122,15 @@ export interface WithCommonResponse<T> {
   data: T;
 }
 
-// 按需注入飞书 H5 JS SDK，仅在走飞书名片分支时才加载
-const LARK_SDK_URL =
-  'https://lf3-cdn-tos.bytegoofy.com/obj/goofy/locl/lark/external_js_sdk/h5-js-sdk-1.2.21.js';
-
-/**
- * 鉴权重定向地址放在模块级而不是组件 ref 里。
- * 原因：useExternalScript 在「脚本已存在」时会跳过 onloadCallback，
- * 所以 onAuthError 只会在页面首个实例挂载时注册一次。若闭包捕获的是
- * 某个实例的 ref，该实例卸载后，后续实例的 redirectURL 就永远送不到
- * 已注册的 handler 里。用模块级变量保证读到的始终是最新值。
- */
-let currentRedirectURL = '';
-let authHandlerRegistered = false;
-
-function registerLarkAuthHandler(): void {
-  if (authHandlerRegistered) return;
-  if (typeof globalThis.webComponent === 'undefined') return;
-  authHandlerRegistered = true;
-
-  globalThis.webComponent.onAuthError(function (error: Error) {
-    let errorMessage: { msg?: { code?: number; msg?: string } } | undefined;
-    try {
-      errorMessage = JSON.parse(error.message);
-    } catch {
-      logger.info('webComponent onAuthError: 非 JSON 错误体', error);
-      return;
-    }
-    // 存在token过期情况，但后端无法识别，需要前端这边主动识别error，并进行鉴权重定向
-    if (
-      errorMessage?.msg?.code === 20442 &&
-      errorMessage?.msg?.msg === 'jsapi-ticket not exist' &&
-      currentRedirectURL
-    ) {
-      globalThis.location.replace(currentRedirectURL);
-    }
-  });
-
-  globalThis.webComponent.onError(function (error: Error) {
-    logger.info('webComponent onError', error);
-  });
-}
-
-/** 在指定容器里创建并渲染一个飞书名片，返回创建出来的 `<tt-profile>` 元素 */
-async function renderLarkProfile(
-  param: LarkCardParam,
-  host: HTMLElement,
-): Promise<Element | null> {
-  const { larkAppID, jsAPITicket, larkOpenID, targetLarkOpenID } = param;
-
+async function renderLarkProfile({
+  larkAppID,
+  jsAPITicket,
+  larkOpenID,
+  cardRef,
+  targetLarkOpenID,
+}: BaseOfficialProfileProps['larkCardParam'] & {
+  cardRef: React.RefObject<HTMLDivElement | null>;
+}) {
   const timestamp = Date.now().toString();
   const nonceStr = generateRandomString(10);
   const url = globalThis.location.href.split('#')[0] ?? '';
@@ -203,53 +146,20 @@ async function renderLarkProfile(
     url,
     jsApiList: ['user_profile'],
     locale: ['zh_cn'],
-    ...(getEnv() === 'BOE' ? { env: 'feishu_boe' } : {}),
+    ...(getEnv() === 'BOE'
+      ? { env: 'feishu_boe' }
+      : {}),
   });
 
-  await globalThis.webComponent.render(
+  const myComponent = await globalThis.webComponent.render(
     'UserProfile',
-    { openId: targetLarkOpenID },
-    host,
+    {
+      openId: targetLarkOpenID,
+    },
+    cardRef.current,
   );
 
-  // SDK 把 <tt-profile> append 到 host 上，取最后一个即本次创建的
-  return host.lastElementChild;
-}
-
-/**
- * 渲染一张完整可用的名片。
- *
- * `visibleHost` 非空时直接渲进可见容器（首次打开，让用户看到飞书自己的骨架屏）；
- * 否则开一个专属离屏插槽 —— 并发渲染共用容器会取错元素。插槽只用来隔离本次
- * 渲染，拿到元素后就把它挪到离屏容器下并撤掉插槽，否则空壳 div 会累积。
- *
- * 放在模块级而不是 effect 内，是为了让「真正卸载时补备用卡」那条路径也能用，
- * 不必把它写进 effect 的闭包、从而被迫放宽依赖。
- */
-async function renderCard(
-  param: LarkCardParam,
-  visibleHost: HTMLElement | null,
-): Promise<Element | null> {
-  const slot = visibleHost ? null : createOffscreenSlot();
-  const live = await renderLarkProfile(param, visibleHost ?? slot!);
-
-  const settle = () => {
-    if (!slot) return;
-    if (live && live.parentNode === slot) getOffscreenHost().appendChild(live);
-    slot.remove();
-  };
-
-  if (!live) {
-    settle();
-    return null;
-  }
-  if (!(await waitForCardReady(live))) {
-    live.remove();
-    settle();
-    return null;
-  }
-  settle();
-  return live;
+  return myComponent;
 }
 
 function UserProfile(props: UserProfileProps) {
@@ -262,30 +172,96 @@ function UserProfile(props: UserProfileProps) {
     user_id ||
     originUserId;
 
-  const { data, isPending, isError, refetch } = useUserProfile({
-    userId: userId ?? '',
-    accountType,
-    enabled: Boolean(userId),
-  });
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const redirectURLRef = useRef<string>('');
+  const [response, setResponse] = useState<BaseUserProfileProps>(
+    {} as BaseUserProfileProps,
+  );
+  const [error, setError] = useState<boolean>(false);
+
+  const onAuthError = useCallback(() => {
+    globalThis.webComponent.onAuthError(function (error: Error) {
+      const errorMessage = JSON.parse(error.message);
+      // 存在token过期情况，但后端无法识别，需要前端这边主动识别error，并进行鉴权重定向
+      if (
+        errorMessage?.msg?.code === 20442 &&
+        errorMessage?.msg?.msg === 'jsapi-ticket not exist'
+      ) {
+        globalThis.location.replace(redirectURLRef.current);
+      }
+    });
+
+    globalThis.webComponent.onError(function (error: Error) {
+      logger.info('webComponent onError', error);
+    });
+  }, []);
 
-  const handleRetry = useCallback(() => {
-    void refetch();
-  }, [refetch]);
+  // 按需注入飞书 H5 JS SDK，仅在组件使用时加载
+  const larkSdkURl =
+    'https://lf3-cdn-tos.bytegoofy.com/obj/goofy/locl/lark/external_js_sdk/h5-js-sdk-1.2.21.js';
+  const scriptOptions = useMemo(
+    () => ({ onloadCallback: onAuthError }),
+    [onAuthError],
+  );
+  const scriptStatus = useExternalScript(larkSdkURl, scriptOptions);
 
-  // 没有 userId 时不渲染任何东西。旧实现在这里会停在 loading 上永远转圈。
-  if (!userId) return null;
+  const fetchData = useCallback(async () => {
+    if (!userId) return;
+
+    const controller = new AbortController();
+
+    setLoading(true);
+    setError(false);
+
+    try {
+      const data = await fetchUserProfile(userId, accountType, controller.signal);
+      setResponse(data as BaseUserProfileProps);
+
+      if (data.useLarkCard && !data.larkCardParam.needRedirect) {
+        redirectURLRef.current = data.larkCardParam.redirectURL ?? '';
+        await renderLarkProfile({
+          ...data.larkCardParam,
+          cardRef,
+        });
+        setLoading(false);
+      } else {
+        setLoading(false);
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error && error.name === 'AbortError') {
+        // 直接退出，不处理 AbortError
+      } else {
+        // 最终的UI反馈
+        setError(true);
+        setLoading(false);
+      }
+    }
+  }, [userId, accountType]);
 
-  if (isError) {
+  useEffect(() => {
+    if (scriptStatus !== 'ready') return;
+
+    void fetchData();
+  }, [fetchData, scriptStatus]);
+
+  if (error) {
     return (
-      <Card className="flex min-h-124 w-80 flex-col items-center justify-center gap-4 border-0 p-0">
+      <Card
+        ref={cardRef}
+        className="flex min-h-124 w-80 flex-col items-center justify-center gap-4 border-0 p-0"
+      >
         <ErrorImage />
+        {/* <Button variant="outline" className="border-red-500 text-black hover:bg-red-50" onClick={fetchData}>
+        加载失败 请重试
+      </Button> */}
         <div>
           <span className="text-sm">加载失败 请</span>
           <Button
             size="sm"
             variant="ghost"
             className="pr-1 pl-1 text-primary! not-disabled:hover:bg-primary/10 not-disabled:hover:text-primary/90 focus-visible:bg-primary/20"
-            onClick={handleRetry}
+            onClick={fetchData}
           >
             重试
           </Button>
@@ -293,269 +269,42 @@ function UserProfile(props: UserProfileProps) {
       </Card>
     );
   }
-
-  // isPending 只在「无缓存且首次请求中」为真。
-  // 命中缓存时直接跳过 loading，卡片零延迟出现，后台静默 revalidate。
-  if (isPending || !data) {
-    return (
-      <Card className="flex h-130 w-80 flex-col items-center justify-center gap-6 border-0 p-0">
-        <Spinner className="size-8 animate-spin text-primary" />
-      </Card>
-    );
-  }
-
-  // 业务仓的 tsconfig 继承自 fullstack-presets，是 strictNullChecks: false。
-  // TS 在该模式下不做判别联合窄化（本地现写的同形状联合一样窄化失败），
-  // 所以这里必须显式断言分支类型，不能简化成 data.userProfileInfo。
-  if (!data.useLarkCard) {
-    const { userProfileInfo } = data as SimpleProfileData;
-    return <SimpleUserProfile userProfileInfo={userProfileInfo} />;
-  }
-
-  const { larkCardParam } = data as OfficialProfileData;
-  // key 绑 openId：切换到另一个人时整个重挂，备用卡引用、文字基线、loading
-  // 状态一并重置。否则 spareRef 的 `??=` 会把上一个人的卡片留下来复用。
   return (
-    <LarkProfileCard
-      key={larkCardParam.targetLarkOpenID}
-      larkCardParam={larkCardParam}
-    />
+    <Card
+      ref={cardRef}
+      className="flex h-130 w-80 flex-col items-center justify-center gap-6 border-0 p-0"
+    >
+      {loading ? <LoadingComponent /> : <BaseUserProfile {...response} />}
+    </Card>
   );
 }
 
-/**
- * 飞书名片分支。
- *
- * 人员数据由 `<tt-profile>` 自己拉取，不经过我们的 state，因此这里无法做
- * 字段级的 stale-while-revalidate。退而求其次：缓存整个已渲染的 DOM，
- * 命中即刻展示；内容陈旧时在离屏容器里渲染一份新的，就绪后整体替换，
- * 这样换新过程中用户看到的始终是旧卡片，不会出现骨架屏。
- */
-function LarkProfileCard(props: { readonly larkCardParam: LarkCardParam }) {
-  const { larkCardParam } = props;
-  const { needRedirect, redirectURL, targetLarkOpenID } = larkCardParam;
-
-  // 「打开后更新」渲染出的元素由本实例独占 —— 它会被 attach 进本实例的容器，
-  // 取消时也由本实例回收。所以去重必须按实例隔离：ensureRender 的 key 是模块级的，
-  // 同一个人的两个实例共享一次渲染的话，两边会拿到同一个 DOM 元素，
-  // 后挂载的那个会把节点从前一个容器里抢走（前者变空白），先卸载的那个
-  // 还会把另一个正在显示的节点 remove 掉。
-  //
-  // 备用卡池仍然按人共享 —— 那条路径是 takeSpare 独占领取，不存在同一元素
-  // 被两个实例同时持有的问题。
-  const instanceId = useId();
-
-  const hostRef = useRef<HTMLDivElement>(null);
-  // 初值在渲染期就定下来：有备用卡就不该出现转圈。effect 在首次绘制之后
-  // 才跑，若初值恒为 true，命中缓存也会先闪一帧 loading。
-  const [showSpinner, setShowSpinner] = useState(() =>
-    !hasSpare(targetLarkOpenID),
-  );
-  const [renderFailed, setRenderFailed] = useState(false);
-  const [retryToken, setRetryToken] = useState(0);
-
-  // 这次挂载取到的备用卡。takeSpare 是「取走」语义，effect 可能重复执行，
-  // 不记在 ref 里第二次就拿不到，会误判成没有缓存而走完整 loading。
-  const spareRef = useRef<Element | null>(null);
-  // 当前挂在容器里的那一张。卸载清理要用它，而那时 hostRef 可能已被置空。
-  const shownRef = useRef<Element | null>(null);
-  // 挂上那一刻、本人那一屏的文字。卸载时比对，判断用户有没有改过本人的数据。
-  const attachedTextRef = useRef<string>('');
-  // 组件是否还活着。异步回调的归属是「组件实例」而不是「某一次 effect 执行」，
-  // 所以用它而不是 effect 内的 cancelled 标志 —— 否则依赖一变化，正在途中的
-  // 渲染结果就会被当成已取消而丢弃。
-  const aliveRef = useRef(true);
-  // 已经为哪一轮 retryToken 启动过渲染，保证依赖变化时不重复发起。
-  const startedRef = useRef(-1);
-
-  const scriptOptions = useMemo(
-    () => ({ onloadCallback: registerLarkAuthHandler }),
-    [],
-  );
-  const scriptStatus = useExternalScript(LARK_SDK_URL, scriptOptions);
-
-  // 卸载清理需要的值走 ref，避免为了它们把依赖写宽
-  const teardownRef = useRef({ param: larkCardParam, scriptReady: false });
-  teardownRef.current = {
-    param: larkCardParam,
-    scriptReady: scriptStatus === 'ready',
-  };
+function LoadingComponent() {
+  return <Spinner className="size-8 animate-spin text-primary" />;
+}
 
-  // 需要走鉴权重定向时整页跳转，不渲染名片
-  useEffect(() => {
-    if (needRedirect && redirectURL) {
-      globalThis.location.replace(redirectURL);
-    }
-  }, [needRedirect, redirectURL]);
-
-  /**
-   * 只在**真正卸载**时回收。
-   *
-   * 不能放进主 effect 的 cleanup —— 那个 cleanup 在任何依赖变化时都会跑
-   * （scriptStatus 从 loading 变 ready、react-query 刷新导致 larkCardParam
-   * 换引用，都是必经路径）。在那里 remove 掉正在显示的卡片，会造成可见的
-   * 闪白回退，而且被摘掉的若是「打开后更新」那张，它既不在池里也不在容器里，
-   * 直接成了孤儿。
-   */
-  useEffect(() => {
-    aliveRef.current = true;
-    return () => {
-      aliveRef.current = false;
-
-      const shown = shownRef.current;
-      shownRef.current = null;
-      if (!shown) return;
-
-      const changed = ownProfileText(shown) !== attachedTextRef.current;
-      // 用过的那张直接丢弃 —— 它可能被滚动过、点进过别人的名片，
-      // 而这些状态有一半在飞书 React 内部，无法可靠恢复
-      shown.remove();
-
-      const { param, scriptReady } = teardownRef.current;
-      if (!changed || !scriptReady) return;
-
-      // 用户在卡片里改过本人的数据（最典型的是编辑个性签名）。已经备好的那张
-      // 是改动之前渲染的，内容已过时：丢掉，并立刻重新备一张 —— 只丢不补的话
-      // 下次打开会退回完整 loading。带时间戳的 key 绕开去重，确保拿到的是
-      // 改动之后重新渲染的结果。
-      dropSpare(param.targetLarkOpenID);
-      void ensureRender(
-        `${param.targetLarkOpenID}:spare:${String(Date.now())}`,
-        async () => {
-          const live = await renderCard(param, null);
-          if (live) putSpare(param.targetLarkOpenID, live);
-          return live;
-        },
-      ).catch((error: unknown) => {
-        logger.info('re-prepare spare lark profile failed', error);
-      });
-    };
-  }, []);
+function BaseUserProfile(props: BaseUserProfileProps) {
+  const { useLarkCard } = props;
+  if (!useLarkCard) {
+    const { userProfileInfo } = props as BaseSimpleProfileProps;
 
-  // 主逻辑。对重复执行幂等：已经挂了东西就不再顶备用卡，已经发起过的渲染
-  // 不重复发起。
-  useEffect(() => {
-    if (needRedirect) return;
-
-    const host = hostRef.current;
-    if (!host) return;
-
-    currentRedirectURL = redirectURL ?? '';
-    // 脚本已存在时 useExternalScript 会跳过 onloadCallback，这里补注册一次
-    if (scriptStatus === 'ready') registerLarkAuthHandler();
-
-    const attach = (el: Element | null) => {
-      if (!aliveRef.current || !el) return;
-      host.replaceChildren(el);
-      shownRef.current = el;
-      attachedTextRef.current = ownProfileText(el);
-      setShowSpinner(false);
-      setRenderFailed(false);
-    };
-
-    if (!shownRef.current) {
-      // 备用卡是渲染好后一直停在离屏、从没显示过的，所以必然是初始态，
-      // 而且是活元素 —— 挂上即可交互，不是静态快照
-      spareRef.current ??= takeSpare(targetLarkOpenID);
-      if (spareRef.current) attach(spareRef.current);
-    }
+    return <SimpleUserProfile userProfileInfo={userProfileInfo} />;
+  }
 
-    if (scriptStatus !== 'ready') return;
-    if (startedRef.current === retryToken) return;
-    startedRef.current = retryToken;
-
-    const hadSpare = Boolean(shownRef.current);
-    if (!hadSpare) setShowSpinner(true);
-
-    // 打开后更新一次：再渲染一张，就绪后换上去，让这次看到的是最新数据。
-    // 有备用卡顶着就离屏渲染（用户看不到骨架屏），没有就直接渲进可见容器。
-    void ensureRender(
-      `${targetLarkOpenID}:update:${instanceId}:${String(retryToken)}`,
-      () => renderCard(larkCardParam, hadSpare ? null : host),
-    )
-      .then((live) => {
-        if (!aliveRef.current) {
-          // 组件已卸载。元素此时在常驻离屏容器里，既不会被 attach 也不进
-          // 受 maxEntries 约束的池 —— 放着不管会随反复开关一直累积。
-          live?.remove();
-          return;
-        }
-        if (live) {
-          attach(live);
-          return;
-        }
-        // 渲染没能就绪。已经挂着备用卡就保持现状；什么都没有的话必须收掉
-        // loading 并给出重试入口，否则会一直转圈。
-        if (!shownRef.current) {
-          setShowSpinner(false);
-          setRenderFailed(true);
-        }
-      })
-      .catch((error: unknown) => {
-        logger.info('update lark profile failed', error);
-        if (!aliveRef.current) return;
-        setShowSpinner(false);
-        if (!shownRef.current) setRenderFailed(true);
-      });
-
-    // 立刻开始备下一张。必须在「打开」时做而不是「关闭」时 —— 真实环境渲染
-    // 一张要走鉴权、render、网关取数、图片加载，几秒起步；放在关闭时做的话，
-    // 用户点快一点下次打开就还没备好，又掉回完整 loading。
-    if (!hasSpare(targetLarkOpenID)) {
-      void ensureRender(`${targetLarkOpenID}:spare`, async () => {
-        const live = await renderCard(larkCardParam, null);
-        if (live) putSpare(targetLarkOpenID, live);
-        return live;
-      }).catch((error: unknown) => {
-        logger.info('prepare spare lark profile failed', error);
-      });
+  const { larkCardParam } = props;
+  const { needRedirect, redirectURL } = larkCardParam;
+  if (needRedirect) {
+    if (!redirectURL) {
+      return null;
     }
-  }, [
-    instanceId,
-    larkCardParam,
-    needRedirect,
-    redirectURL,
-    retryToken,
-    scriptStatus,
-    targetLarkOpenID,
-  ]);
-
-  const handleRetryRender = useCallback(() => {
-    setRenderFailed(false);
-    setShowSpinner(true);
-    setRetryToken((n) => n + 1);
-  }, []);
-
-  if (needRedirect) return null;
 
-  return (
-    <Card className="relative flex h-130 w-80 flex-col items-center justify-center gap-6 border-0 p-0">
-      <div ref={hostRef} className="h-full w-full" />
-      {showSpinner && (
-        <Spinner className="absolute size-8 animate-spin text-primary" />
-      )}
-      {renderFailed && (
-        <div className="absolute flex flex-col items-center gap-4">
-          <ErrorImage />
-          <div>
-            <span className="text-sm">加载失败 请</span>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="pr-1 pl-1 text-primary! not-disabled:hover:bg-primary/10 not-disabled:hover:text-primary/90 focus-visible:bg-primary/20"
-              onClick={handleRetryRender}
-            >
-              重试
-            </Button>
-          </div>
-        </div>
-      )}
-    </Card>
-  );
+    globalThis.location.replace(redirectURL);
+    return null;
+  }
 }
 
 function SimpleUserProfile(props: {
-  readonly userProfileInfo: SimpleProfileInfo;
+  readonly userProfileInfo: BaseSimpleProfileProps['userProfileInfo'];
 }) {
   const { userProfileInfo } = props;
 

package/template/client/src/components/business-ui/user-select/user-pill.tsx

@@ -16,18 +16,6 @@ import {
   PopoverTrigger,
 } from '@client/src/components/ui/popover';
 
-/**
- * 阻止 Popover 打开时的自动聚焦。
- *
- * Radix 的 FocusScope 在弹层挂载时会把焦点给容器里第一个可聚焦元素。人员卡片
- * 挂载那一刻内容就已经在了（飞书名片里有「消息」等按钮），于是一打开就有个
- * 按钮带上焦点环。这是张只读预览卡，焦点应该留在触发器上 —— Radix 自己的
- * HoverCard 也是这么处理的。
- */
-const handleProfileOpenAutoFocus = (event: Event) => {
-  event.preventDefault();
-};
-
 export type UserPillProps = {
   /**
    * 用户 ID，用于 UserProfile 展示
@@ -129,7 +117,6 @@ export const UserPill: React.FC<UserPillProps> = ({
           side="bottom"
           align="start"
           sideOffset={8}
-          onOpenAutoFocus={handleProfileOpenAutoFocus}
           className="w-80 p-0"
         >
           <UserProfile userId={userId} accountType={accountType} />