@lark-base-open/base-database-cli 1.1.1 → 1.3.7

package/templates/database-starter/page/src/components/UserSelectorPanel/user-search.ts

@@ -1,4 +1,9 @@
 import { fetch as databaseFetch } from '../../lib/database-runtime'
+import {
+  getUiLocale,
+  getUiLanguage,
+  type UiLanguage,
+} from '../../lib/ui-language'
 import { fetchProjectMeta } from '../floating-button/utils/project-meta'
 
 const RECOMMEND_USERS_API_PATH = '/space/api/mention/recommend.v2/'
@@ -7,6 +12,41 @@ const BITABLE_MENTION_SOURCE = '4'
 const USER_MENTION_TYPE = '0'
 const SEARCH_PAGE_SIZE = 20
 
+const USER_SEARCH_COPY = {
+  en: {
+    businessError: (code: number) =>
+      `Could not search members (error code ${code})`,
+    httpError: (status: number) =>
+      `Member search request failed: HTTP ${status}`,
+    invalidResponse: 'Member search response has an invalid structure',
+    noBoundBase:
+      'Cannot search members: the application is not bound to a Base',
+  },
+  zh: {
+    businessError: (code: number) => `搜索成员失败（错误码 ${code}）`,
+    httpError: (status: number) => `搜索成员请求失败：HTTP ${status}`,
+    invalidResponse: '成员搜索响应结构无效',
+    noBoundBase: '无法搜索成员：应用尚未绑定多维表格',
+  },
+  ja: {
+    businessError: (code: number) =>
+      `メンバーを検索できませんでした（エラーコード ${code}）`,
+    httpError: (status: number) =>
+      `メンバー検索のリクエストに失敗しました：HTTP ${status}`,
+    invalidResponse: 'メンバー検索の応答形式が正しくありません',
+    noBoundBase:
+      'メンバーを検索できません：アプリにBaseが関連付けられていません',
+  },
+} satisfies Record<
+  UiLanguage,
+  {
+    businessError: (code: number) => string
+    httpError: (status: number) => string
+    invalidResponse: string
+    noBoundBase: string
+  }
+>
+
 export interface UserAvatar {
   avatar_72: string
   avatar_240: string
@@ -38,11 +78,14 @@ export type SearchUsers = (keyword: string) => Promise<SearchUsersResponse>
 
 export async function requestUsers(
   keyword: string,
+  language?: UiLanguage,
 ): Promise<SearchUsersResponse> {
+  const selectedLanguage = language ?? getUiLanguage()
+  const i18n = USER_SEARCH_COPY[selectedLanguage]
   const projectMeta = await fetchProjectMeta()
   const baseToken = projectMeta.baseBindings[0]?.baseToken
   if (!baseToken) {
-    throw new Error('应用未绑定 Base，无法搜索成员')
+    throw new Error(i18n.noBoundBase)
   }
 
   const body = new URLSearchParams({
@@ -66,30 +109,32 @@ export async function requestUsers(
   })
 
   if (!response.ok) {
-    throw new Error(`搜索用户请求失败，HTTP 状态码：${response.status}`)
+    throw new Error(i18n.httpError(response.status))
   }
 
   const payload: unknown = await response.json()
   return {
     code: 0,
     msg: 'ok',
-    data: normalizeRecommendUsersResponse(payload),
+    data: normalizeRecommendUsersResponse(payload, selectedLanguage),
   }
 }
 
 export function normalizeRecommendUsersResponse(
   value: unknown,
-  locale = getLocale(),
+  language: UiLanguage = getUiLanguage(),
 ): SearchUsersData {
-  const payload = unwrapRecommendPayload(value)
+  const locale = getUiLocale(language)
+  const i18n = USER_SEARCH_COPY[language]
+  const payload = unwrapRecommendPayload(value, i18n)
   if (!payload) {
-    throw new Error('搜索用户返回结构不正确')
+    throw new Error(i18n.invalidResponse)
   }
 
   const entities = payload.entities
   const users = isRecord(entities) ? entities.users : undefined
   if (!isRecord(users) || !Array.isArray(payload.result_list)) {
-    throw new Error('搜索用户返回结构不正确')
+    throw new Error(i18n.invalidResponse)
   }
 
   const result: User[] = []
@@ -130,11 +175,16 @@ export function normalizeRecommendUsersResponse(
 
 function unwrapRecommendPayload(
   value: unknown,
+  i18n: (typeof USER_SEARCH_COPY)[UiLanguage],
 ): Record<string, unknown> | undefined {
   if (!isRecord(value)) return undefined
 
   if (typeof value.code === 'number' && value.code !== 0) {
-    throw new Error(readString(value.msg) || '搜索成员失败')
+    const message = readString(value.msg)
+    throw Object.assign(new Error(message || i18n.businessError(value.code)), {
+      code: String(value.code),
+      cause: value,
+    })
   }
 
   if ('entities' in value && 'result_list' in value) return value
@@ -144,12 +194,12 @@ function unwrapRecommendPayload(
 function readUserName(entity: Record<string, unknown>, locale: string): string {
   return (
     readLocalizedString(entity.display_name, locale) ||
-    (locale.toLowerCase().startsWith('en')
-      ? readString(entity.en_name)
-      : readString(entity.cn_name)) ||
+    (locale.toLowerCase().startsWith('zh')
+      ? readString(entity.cn_name)
+      : readString(entity.en_name)) ||
     readString(entity.name) ||
-    readString(entity.cn_name) ||
-    readString(entity.en_name)
+    readString(entity.en_name) ||
+    readString(entity.cn_name)
   )
 }
 
@@ -168,11 +218,14 @@ function readLocalizedString(value: unknown, locale: string): string {
 
   const normalizedLocale = locale.toLowerCase().replace('-', '_')
   const language = normalizedLocale.split('_')[0] ?? ''
+  const fallback =
+    language === 'zh'
+      ? readString(value.zh_cn) || readString(value.en_us)
+      : readString(value.en_us) || readString(value.zh_cn)
   return (
     readString(value[normalizedLocale]) ||
     readString(value[language]) ||
-    readString(value.zh_cn) ||
-    readString(value.en_us)
+    fallback
   )
 }
 
@@ -186,16 +239,6 @@ function readStringArray(value: unknown): string[] {
     : []
 }
 
-function getLocale(): string {
-  if (typeof document !== 'undefined' && document.documentElement.lang) {
-    return document.documentElement.lang
-  }
-  if (typeof navigator !== 'undefined' && navigator.language) {
-    return navigator.language
-  }
-  return 'zh-CN'
-}
-
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value)
 }

package/templates/database-starter/page/src/components/database-runtime-ready.tsx

@@ -11,7 +11,7 @@ import { siteRuntime } from '../lib/database-runtime'
 export function DatabaseRuntimeReady(): null {
   useEffect(() => {
     void siteRuntime.ready().catch((error: unknown) => {
-      console.error('Application Runtime ready 上报失败', error)
+      console.error('Failed to report Application Runtime readiness', error)
     })
   }, [])
 

package/templates/database-starter/page/src/components/database-user-menu/index.tsx

@@ -5,8 +5,7 @@ import {
 } from '../floating-button/utils/current-user'
 import { fetchProjectMeta } from '../floating-button/utils/project-meta'
 import { logout } from '../../lib/database-runtime'
-
-export type DatabaseUserMenuLanguage = 'en' | 'zh'
+import { useUiLanguage, type UiLanguage } from '../../lib/ui-language'
 
 /** 应用面向的使用场景。
  *
@@ -17,8 +16,6 @@ export type DatabaseUserMenuLanguage = 'en' | 'zh'
 export type DatabaseAudience = 'enterprise' | 'personal'
 
 interface DatabaseUserMenuProps {
-  /** 界面语言，默认 en。 */
-  language?: DatabaseUserMenuLanguage
   /** 默认 enterprise：拿不准时宁可多显示一个头像，也不要让用户找不到退出登录。 */
   audience?: DatabaseAudience
   /** 弹层相对触发器的对齐方向，默认 right（触发器在右上角时用）。 */
@@ -35,9 +32,10 @@ interface DatabaseUserMenuI18n {
   logout: string
 }
 
-const I18N: Record<DatabaseUserMenuLanguage, DatabaseUserMenuI18n> = {
+const I18N: Record<UiLanguage, DatabaseUserMenuI18n> = {
   en: { account: 'Account', logout: 'Log out' },
   zh: { account: '账号', logout: '退出登录' },
+  ja: { account: 'アカウント', logout: 'ログアウト' },
 }
 
 /** 应用自身导航里的当前用户入口：头像 + 姓名，点开是组织名与退出登录。
@@ -51,7 +49,6 @@ const I18N: Record<DatabaseUserMenuLanguage, DatabaseUserMenuI18n> = {
  * 不占位、不显示空头像。
  */
 export function DatabaseUserMenu({
-  language = 'en',
   audience = 'enterprise',
   align = 'right',
   side = 'down',
@@ -62,7 +59,7 @@ export function DatabaseUserMenu({
   const [organization, setOrganization] = useState('')
   const [isOpen, setIsOpen] = useState(false)
   const rootRef = useRef<HTMLDivElement>(null)
-  const i18n = I18N[language]
+  const i18n = I18N[useUiLanguage()]
 
   useEffect(() => {
     if (audience !== 'enterprise') {

package/templates/database-starter/page/src/components/feedback/page-state.tsx

@@ -1,6 +1,40 @@
 import { CircleAlert, Inbox, LoaderCircle } from 'lucide-react'
+import { useUiLanguage, type UiLanguage } from '../../lib/ui-language'
 import { Button } from '../ui/button'
 
+const PAGE_STATE_COPY = {
+  en: {
+    empty: 'No data yet',
+    error: 'Could not load data',
+    loading: 'Loading',
+    retry: 'Retry',
+    retryLater: 'Please try again later',
+  },
+  zh: {
+    empty: '暂无数据',
+    error: '加载失败',
+    loading: '正在加载',
+    retry: '重试',
+    retryLater: '请稍后重试',
+  },
+  ja: {
+    empty: 'データがありません',
+    error: 'データを読み込めませんでした',
+    loading: '読み込み中',
+    retry: '再試行',
+    retryLater: 'しばらくしてからもう一度お試しください',
+  },
+} satisfies Record<
+  UiLanguage,
+  {
+    empty: string
+    error: string
+    loading: string
+    retry: string
+    retryLater: string
+  }
+>
+
 interface PageStateProps {
   status: 'loading' | 'empty' | 'error'
   title?: string
@@ -15,6 +49,7 @@ export function PageState({
   description,
   onRetry,
 }: PageStateProps) {
+  const i18n = PAGE_STATE_COPY[useUiLanguage()]
   if (status === 'loading') {
     return (
       <div
@@ -25,7 +60,7 @@ export function PageState({
           aria-hidden="true"
           className="size-6 motion-safe:animate-spin"
         />
-        <p className="text-sm font-medium">{title ?? '正在加载'}</p>
+        <p className="text-sm font-medium">{title ?? i18n.loading}</p>
       </div>
     )
   }
@@ -35,7 +70,7 @@ export function PageState({
       <div className="flex min-h-48 flex-col items-center justify-center gap-3 text-center">
         <Inbox aria-hidden="true" className="size-7 text-muted-foreground" />
         <div>
-          <p className="font-semibold">{title ?? '暂无数据'}</p>
+          <p className="font-semibold">{title ?? i18n.empty}</p>
           {description ? (
             <p className="mt-1 text-sm text-muted-foreground">{description}</p>
           ) : null}
@@ -51,14 +86,14 @@ export function PageState({
     >
       <CircleAlert aria-hidden="true" className="size-7 text-danger" />
       <div>
-        <p className="font-semibold">{title ?? '加载失败'}</p>
+        <p className="font-semibold">{title ?? i18n.error}</p>
         <p className="mt-1 text-sm text-muted-foreground">
-          {description ?? '请稍后重试'}
+          {description ?? i18n.retryLater}
         </p>
       </div>
       {onRetry ? (
         <Button variant="secondary" onClick={onRetry}>
-          重试
+          {i18n.retry}
         </Button>
       ) : null}
     </div>

package/templates/database-starter/page/src/components/floating-button/assets/edit-active.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1956 16.3595C17.6558 16.3595 18.0289 16.7326 18.0289 17.1928C18.0287 17.6529 17.6557 18.0261 17.1956 18.0261H9.48724C9.0273 18.0259 8.65411 17.6527 8.6539 17.1928C8.6539 16.7327 9.02717 16.3597 9.48724 16.3595H17.1956ZM12.5732 2.47195C13.8817 1.28992 15.902 1.32977 17.163 2.59076L17.281 2.71527C18.4249 3.98149 18.4257 5.91435 17.2818 7.18061L17.163 7.3043L9.32366 15.1445C9.12419 15.3439 8.89959 15.5169 8.65716 15.6596L8.40976 15.7923L4.13079 17.8471C2.75554 18.5075 1.31776 17.1336 1.84889 15.7565L1.90667 15.623L3.96152 11.344C4.12431 11.0051 4.34347 10.696 4.60931 10.4301L12.4495 2.59076L12.5732 2.47195ZM5.78769 11.6093C5.65491 11.7421 5.54596 11.8966 5.46461 12.0659L3.40976 16.344L7.68792 14.2892C7.85719 14.2078 8.01164 14.0989 8.14446 13.9661L13.4643 8.64545L11.1075 6.28868L5.78769 11.6093ZM15.9846 3.76915C15.3338 3.11835 14.2788 3.11851 13.6279 3.76915L12.2867 5.11029L14.6435 7.46706L15.9846 6.12592C16.6353 5.47503 16.6354 4.41994 15.9846 3.76915Z" fill="#1456F0"/>
+</svg>

package/templates/database-starter/page/src/components/floating-button/assets/edit-default.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1956 16.3595C17.6558 16.3595 18.0289 16.7326 18.0289 17.1928C18.0287 17.6529 17.6557 18.0261 17.1956 18.0261H9.48724C9.0273 18.0259 8.65411 17.6527 8.6539 17.1928C8.6539 16.7327 9.02717 16.3597 9.48724 16.3595H17.1956ZM12.5732 2.47195C13.8817 1.28992 15.902 1.32977 17.163 2.59076L17.281 2.71527C18.4249 3.98149 18.4257 5.91435 17.2818 7.18061L17.163 7.3043L9.32366 15.1445C9.12419 15.3439 8.89959 15.5169 8.65716 15.6596L8.40976 15.7923L4.13079 17.8471C2.75554 18.5075 1.31776 17.1336 1.84889 15.7565L1.90667 15.623L3.96152 11.344C4.12431 11.0051 4.34347 10.696 4.60931 10.4301L12.4495 2.59076L12.5732 2.47195ZM5.78769 11.6093C5.65491 11.7421 5.54596 11.8966 5.46461 12.0659L3.40976 16.344L7.68792 14.2892C7.85719 14.2078 8.01164 14.0989 8.14446 13.9661L13.4643 8.64545L11.1075 6.28868L5.78769 11.6093ZM15.9846 3.76915C15.3338 3.11835 14.2788 3.11851 13.6279 3.76915L12.2867 5.11029L14.6435 7.46706L15.9846 6.12592C16.6353 5.47503 16.6354 4.41994 15.9846 3.76915Z" fill="#2B2F36"/>
+</svg>

package/templates/database-starter/page/src/components/floating-button/index.tsx

@@ -1,84 +1,60 @@
 import { useCallback, useEffect, useState } from 'react'
+import editDefaultIcon from './assets/edit-default.svg'
+import editActiveIcon from './assets/edit-active.svg'
 import { fetchProjectMeta, type ProjectMeta } from './utils/project-meta'
-import { ChatbotEntry, resolveChatbotDisplayName } from './chatbot-entry'
 import {
   getDatabaseContext,
   resolveDatabaseContext,
   siteRuntime,
 } from '../../lib/database-runtime'
-
-export type FloatingButtonLanguage = 'en' | 'zh'
-
-interface FloatingButtonProps {
-  language?: FloatingButtonLanguage
-  showChatbotEntry?: boolean
-}
+import { useUiLanguage, type UiLanguage } from '../../lib/ui-language'
 
 interface FloatingButtonI18n {
   editSite: string
+  hidePanel: string
 }
 
 const BASE_DATABASE_OVERVIEW_URL = 'https://feishu.cn/base/site/detail/overview'
-const CHATBOT_SIDEBAR_DEFAULT_WIDTH = 420
 const FLOATING_BUTTON_PAGE_GAP = 24
 const EMPTY_PROJECT_META: ProjectMeta = {
   baseBindings: [],
-  chatList: [],
   description: '',
   isOwner: false,
+  allowEdit: false,
   name: '',
   organization: '',
 }
-const FLOATING_BUTTON_I18N: Record<FloatingButtonLanguage, FloatingButtonI18n> =
-  {
-    en: {
-      editSite: 'Edit application',
-    },
-    zh: {
-      editSite: '编辑应用',
-    },
-  }
+const FLOATING_BUTTON_I18N: Record<UiLanguage, FloatingButtonI18n> = {
+  en: {
+    editSite: 'Edit and manage your apps',
+    hidePanel: 'Hide until next visit',
+  },
+  zh: {
+    editSite: '编辑与管理应用',
+    hidePanel: '隐藏面板',
+  },
+  ja: {
+    editSite: 'アプリを編集・管理',
+    hidePanel: '次回のアクセスまで非表示',
+  },
+}
 
-/** 渲染 Base Database 悬浮按钮入口：编辑、Chatbot。
- *
- * 原来这里还有一个「三个点」菜单，承载当前账号 / 组织 / 退出登录。它已经下掉了：
- * 悬浮控件是应用之外的一层浮层，用户不会去那里找账号。身份信息改由应用自己的导航
- * 承载，见 `page/src/components/database-user-menu`。
- *
- * @param props.language 界面语言，支持 en 和 zh，默认 en。
- * @param props.showChatbotEntry 是否显示 Chatbot 入口，默认 true。
- * @returns 悬浮按钮组。
+/** 渲染有管理权限的访问者在正式环境中的编辑入口。
+ * @returns 编辑按钮；Preview 或无管理权限时不显示。
  */
-export function FloatingButton({
-  language = 'en',
-  showChatbotEntry = true,
-}: FloatingButtonProps) {
+export function FloatingButton() {
   const [projectMeta, setProjectMeta] = useState<ProjectMeta | null>(null)
-  const [isFloatingDataLoaded, setIsFloatingDataLoaded] = useState(false)
-  const [isChatbotOpen, setIsChatbotOpen] = useState(false)
-  const [chatbotSidebarWidth, setChatbotSidebarWidth] = useState(
-    CHATBOT_SIDEBAR_DEFAULT_WIDTH,
+  const [isHidden, setIsHidden] = useState(false)
+  const [activeTooltip, setActiveTooltip] = useState<'edit' | 'hide' | null>(
+    null,
   )
-  // 编辑只在线上给 owner。Preview 本身就只有 owner 进得来，isOwner 恒为 true，
-  // 靠它永远隐藏不掉，必须显式按产物环境判断。
+  // Preview 不展示返回编辑态入口；按钮显隐不替代宿主点击时的鉴权。
   const shouldShowEditButton =
-    projectMeta?.isOwner === true && getDatabaseContext().env === 'prod'
-  const shouldOffsetForChatbot = showChatbotEntry && isChatbotOpen
-  const shouldShowFloatingControls =
-    shouldShowEditButton || (showChatbotEntry && !isChatbotOpen)
-  const floatingButtonRight = shouldOffsetForChatbot
-    ? chatbotSidebarWidth + FLOATING_BUTTON_PAGE_GAP
-    : FLOATING_BUTTON_PAGE_GAP
-  const i18n = FLOATING_BUTTON_I18N[language]
-  const genericChatbotName = language === 'zh' ? '智能助手' : 'AI assistant'
-  const chatbotFallbackName = resolveChatbotDisplayName(
-    projectMeta?.name ?? '',
-    genericChatbotName,
-  )
+    projectMeta?.allowEdit === true && getDatabaseContext().env === 'prod'
+  const i18n = FLOATING_BUTTON_I18N[useUiLanguage()]
 
   useEffect(() => {
     let isCurrentRequest = true
-    setIsFloatingDataLoaded(false)
 
     /** 读取悬浮控件所需的项目资源数据。 */
     async function loadFloatingData(): Promise<void> {
@@ -91,7 +67,6 @@ export function FloatingButton({
       }
 
       setProjectMeta(nextProjectMeta)
-      setIsFloatingDataLoaded(true)
     }
 
     void loadFloatingData()
@@ -101,18 +76,6 @@ export function FloatingButton({
     }
   }, [])
 
-  useEffect(() => {
-    if (showChatbotEntry) {
-      return
-    }
-
-    setIsChatbotOpen(false)
-  }, [showChatbotEntry])
-
-  const handleChatbotOpenChange = useCallback((nextIsOpen: boolean) => {
-    setIsChatbotOpen(nextIsOpen)
-  }, [])
-
   // 编辑按钮走 site.v1 契约：应用发 request-edit，宿主切编辑态后广播 mode-changed。
   // 应用被独立访问（无宿主）时事件无人消费，回落为打开 Site 管理页。
   const requestEdit = useCallback(() => {
@@ -124,41 +87,63 @@ export function FloatingButton({
     })
   }, [])
 
-  if (!isFloatingDataLoaded || !projectMeta) {
+  if (!shouldShowEditButton || isHidden) {
     return null
   }
 
   return (
     <div
-      className={`fixed bottom-10 flex items-center pr-0 ${shouldOffsetForChatbot ? 'z-[80]' : 'z-40'}`}
-      style={{ right: floatingButtonRight }}
+      className="group fixed bottom-10 z-40 flex items-center"
+      style={{ right: FLOATING_BUTTON_PAGE_GAP }}
     >
+      {activeTooltip ? (
+        <div
+          role="tooltip"
+          className="pointer-events-none absolute right-0 bottom-[calc(100%+14px)] z-10 whitespace-nowrap rounded-lg bg-[#1f2329] px-3 py-2 text-sm text-white shadow-lg"
+        >
+          {activeTooltip === 'edit' ? i18n.editSite : i18n.hidePanel}
+          <span className="absolute -bottom-1 right-[22px] size-2 rotate-45 bg-[#1f2329]" />
+        </div>
+      ) : null}
       <div
-        className={`${shouldShowFloatingControls ? 'relative z-[80] flex' : 'hidden'} items-center gap-1.5 rounded-full bg-white p-0.5 shadow-[0_4px_4px_rgba(31,35,41,0.06),0_6px_6px_rgba(31,35,41,0.04),0_8px_12px_rgba(31,35,41,0.04)]`}
+        className="relative flex items-center rounded-full bg-white p-0.5 shadow-[0_4px_4px_rgba(31,35,41,0.06),0_6px_6px_rgba(31,35,41,0.04),0_8px_12px_rgba(31,35,41,0.04)]"
         data-floating-controls="true"
       >
-        {shouldShowEditButton ? (
-          <button
-            type="button"
-            aria-label={i18n.editSite}
-            title={i18n.editSite}
-            className="flex size-12 cursor-pointer items-center justify-center rounded-full bg-transparent text-[#2b2f36] outline-none transition-colors hover:bg-[#1f2329]/5 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:bg-[#1f2329]/10"
-            onClick={requestEdit}
-          >
-            <EditIcon />
-          </button>
-        ) : null}
-
-        {showChatbotEntry ? (
-          <ChatbotEntry
-            chatbots={projectMeta.chatList}
-            baseId={projectMeta.baseBindings[0]?.baseToken}
-            className="shrink-0"
-            fallbackName={chatbotFallbackName}
-            onOpenChange={handleChatbotOpenChange}
-            onSidebarWidthChange={setChatbotSidebarWidth}
+        <button
+          type="button"
+          aria-label={i18n.editSite}
+          className="group/edit flex size-12 cursor-pointer items-center justify-center rounded-full bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          onMouseEnter={() => setActiveTooltip('edit')}
+          onMouseLeave={() => setActiveTooltip(null)}
+          onFocus={() => setActiveTooltip('edit')}
+          onBlur={() => setActiveTooltip(null)}
+          onClick={requestEdit}
+        >
+          <img
+            src={editDefaultIcon}
+            alt=""
+            className="size-5 group-hover/edit:hidden group-focus-visible/edit:hidden"
           />
-        ) : null}
+          <img
+            src={editActiveIcon}
+            alt=""
+            className="hidden size-5 group-hover/edit:block group-focus-visible/edit:block"
+          />
+        </button>
+        <button
+          type="button"
+          aria-label={i18n.hidePanel}
+          className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-[#c8c9cc] text-[#646a73] opacity-0 transition-opacity group-hover:opacity-100 hover:bg-[#b7b9bd] focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[#1456f0]"
+          onMouseEnter={() => setActiveTooltip('hide')}
+          onMouseLeave={() => setActiveTooltip(null)}
+          onFocus={() => setActiveTooltip('hide')}
+          onBlur={() => setActiveTooltip(null)}
+          onClick={() => setIsHidden(true)}
+        >
+          <span aria-hidden="true" className="text-[14px] leading-none">
+            ×
+          </span>
+        </button>
       </div>
     </div>
   )
@@ -171,26 +156,4 @@ function openExternalUrl(url: string): void {
   window.open(url, '_blank', 'noopener,noreferrer')
 }
 
-/** 编辑应用图标。
- * @returns 铅笔图标节点。
- */
-function EditIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M12 20h9" />
-      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
-    </svg>
-  )
-}
-
 export default FloatingButton