From 191aface2e9953174bb5d7b5542466b472e9d567 Mon Sep 17 00:00:00 2001
From: sagit <36596628+Sagit-chu@users.noreply.github.com>
Date: Mon, 23 Feb 2026 15:45:14 +0800
Subject: [PATCH] fix(frontend): extend h5 tabbar safe-area coverage (#197)

Ensure the PWA bottom tab bar and tab hit areas fully cover the safe-area inset while keeping related frontend formatting updates consistent.
---
 vite-frontend/src/layouts/admin.tsx       |  68 +++++--
 vite-frontend/src/layouts/h5.tsx          |   6 +-
 vite-frontend/src/pages/forward.tsx       | 208 ++++++++++++----------
 vite-frontend/src/pages/panel-sharing.tsx |  12 +-
 4 files changed, 173 insertions(+), 121 deletions(-)

diff --git a/vite-frontend/src/layouts/admin.tsx b/vite-frontend/src/layouts/admin.tsx
index b4dff04..d3792a9 100644
--- a/vite-frontend/src/layouts/admin.tsx
+++ b/vite-frontend/src/layouts/admin.tsx
@@ -50,7 +50,9 @@ export default function AdminLayout({
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
   const [mobileMenuVisible, setMobileMenuVisible] = useState(false);
-  const [isCollapsed, setIsCollapsed] = useState(() => localStorage.getItem("sidebar_collapsed") === "true");
+  const [isCollapsed, setIsCollapsed] = useState(
+    () => localStorage.getItem("sidebar_collapsed") === "true",
+  );
   const [username, setUsername] = useState("");
   const [isAdmin, setIsAdmin] = useState(false);
   const [passwordLoading, setPasswordLoading] = useState(false);
@@ -208,6 +210,7 @@ export default function AdminLayout({
   // 切换折叠状态
   const toggleCollapse = () => {
     const newCollapsed = !isCollapsed;
+
     setIsCollapsed(newCollapsed);
     localStorage.setItem("sidebar_collapsed", newCollapsed.toString());
   };
@@ -328,11 +331,15 @@ export default function AdminLayout({
           <div className="flex-shrink-0 flex items-center justify-center w-10">
             <Logo size={28} />
           </div>
-          <div className={`transition-all duration-300 overflow-hidden ${isCollapsed ? "max-w-0 opacity-0 ml-0" : "max-w-[180px] opacity-100 ml-2"}`}>
+          <div
+            className={`transition-all duration-300 overflow-hidden ${isCollapsed ? "max-w-0 opacity-0 ml-0" : "max-w-[180px] opacity-100 ml-2"}`}
+          >
             <h1 className="text-sm font-bold text-foreground overflow-hidden whitespace-nowrap text-ellipsis">
               {siteConfig.name}
             </h1>
-            <p className="text-xs text-default-500 overflow-hidden whitespace-nowrap text-ellipsis">v{siteConfig.version}</p>
+            <p className="text-xs text-default-500 overflow-hidden whitespace-nowrap text-ellipsis">
+              v{siteConfig.version}
+            </p>
           </div>
         </div>
 
@@ -345,15 +352,16 @@ export default function AdminLayout({
               return (
                 <li key={item.path}>
                   <motion.button
-                    title={isCollapsed ? item.label : undefined}
                     className={`
                        w-full flex items-center p-2 rounded-lg text-left
                        relative min-h-[44px] overflow-hidden transition-colors
-                       ${isActive
-                        ? "text-primary-600 dark:text-primary-300"
-                        : "text-gray-700 dark:text-gray-200"
-                      }
+                       ${
+                         isActive
+                           ? "text-primary-600 dark:text-primary-300"
+                           : "text-gray-700 dark:text-gray-200"
+                       }
                      `}
+                    title={isCollapsed ? item.label : undefined}
                     transition={{ duration: 0.15 }}
                     onClick={() => handleMenuClick(item.path)}
                   >
@@ -378,7 +386,9 @@ export default function AdminLayout({
                     <div className="flex-shrink-0 w-10 h-10 flex items-center justify-center relative z-10">
                       {item.icon}
                     </div>
-                    <div className={`transition-all duration-300 overflow-hidden flex items-center ${isCollapsed ? "max-w-0 opacity-0 ml-0" : "max-w-[200px] opacity-100 ml-2"}`}>
+                    <div
+                      className={`transition-all duration-300 overflow-hidden flex items-center ${isCollapsed ? "max-w-0 opacity-0 ml-0" : "max-w-[200px] opacity-100 ml-2"}`}
+                    >
                       <span className="font-medium text-sm relative z-10 whitespace-nowrap">
                         {item.label}
                       </span>
@@ -392,7 +402,9 @@ export default function AdminLayout({
 
         {/* 底部版权信息和折叠按钮 */}
         <div className="px-5 py-2 pb-4 mt-auto flex-shrink-0 flex items-center justify-between overflow-hidden whitespace-nowrap box-border">
-          <div className={`transition-all duration-300 overflow-hidden flex items-center ${isCollapsed ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"}`}>
+          <div
+            className={`transition-all duration-300 overflow-hidden flex items-center ${isCollapsed ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"}`}
+          >
             <p className="text-xs text-gray-400 dark:text-gray-500">
               Powered by{" "}
               <a
@@ -410,20 +422,40 @@ export default function AdminLayout({
           {!isMobile && (
             <Button
               isIconOnly
-              variant="light"
-              size="sm"
               className="flex-shrink-0 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 min-w-0 w-10 h-10 rounded-full ml-auto"
+              size="sm"
+              variant="light"
               onPress={toggleCollapse}
             >
               {isCollapsed ? (
                 // 向右扩展的提示
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                  />
                 </svg>
               ) : (
                 // 向左收起的提示
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                  />
                 </svg>
               )}
             </Button>
@@ -532,9 +564,7 @@ export default function AdminLayout({
         </header>
 
         {/* 主内容 */}
-        <main
-          className="flex-1 bg-gray-100 dark:bg-black overflow-y-auto"
-        >
+        <main className="flex-1 bg-gray-100 dark:bg-black overflow-y-auto">
           <AnimatePresence mode="wait">
             <motion.div
               key={location.pathname}
diff --git a/vite-frontend/src/layouts/h5.tsx b/vite-frontend/src/layouts/h5.tsx
index 468d5e3..d7ab83c 100644
--- a/vite-frontend/src/layouts/h5.tsx
+++ b/vite-frontend/src/layouts/h5.tsx
@@ -115,10 +115,10 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
       <main className="flex-1 bg-gray-100 dark:bg-black">{children}</main>
 
       {/* 用于给固定 Tabbar 腾出空间的占位元素 */}
-      <div aria-hidden className="h-16 safe-bottom" />
+      <div aria-hidden className="h-[calc(4rem+var(--safe-area-bottom))]" />
 
       {/* 底部Tabbar */}
-      <nav className="bg-white dark:bg-black border-t border-gray-200 dark:border-gray-600 h-16 safe-bottom flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
+      <nav className="bg-white dark:bg-black border-t border-gray-200 dark:border-gray-600 h-[calc(4rem+var(--safe-area-bottom))] flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
         {filteredTabItems.map((item) => {
           const isActive = location.pathname === item.path;
 
@@ -126,7 +126,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
             <button
               key={item.path}
               className={`
-                flex flex-col items-center justify-center flex-1 h-full
+                flex flex-col items-center justify-center flex-1 h-full pb-[var(--safe-area-bottom)]
                 transition-colors duration-200 min-h-[44px]
                 ${
                   isActive
diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 96f5440..bed66bd 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -230,7 +230,7 @@ export default function ForwardPage() {
     setViewMode(newMode);
     try {
       localStorage.setItem("forward-view-mode", newMode);
-    } catch { }
+    } catch {}
   };
 
   // 加载所有数据
@@ -1196,10 +1196,10 @@ export default function ForwardPage() {
     const style: React.CSSProperties = {
       transform: transform
         ? CSS.Transform.toString({
-          ...transform,
-          x: Math.round(transform.x),
-          y: Math.round(transform.y),
-        })
+            ...transform,
+            x: Math.round(transform.x),
+            y: Math.round(transform.y),
+          })
         : undefined,
       transition: isDragging ? undefined : transition || undefined,
       opacity: isDragging ? 0.5 : 1,
@@ -1257,10 +1257,10 @@ export default function ForwardPage() {
     const style = {
       transform: transform
         ? CSS.Transform.toString({
-          ...transform,
-          x: Math.round(transform.x),
-          y: Math.round(transform.y),
-        })
+            ...transform,
+            x: Math.round(transform.x),
+            y: Math.round(transform.y),
+          })
         : undefined,
       transition: isDragging ? undefined : transition || undefined,
       opacity: isDragging ? 0.5 : 1,
@@ -1317,10 +1317,11 @@ export default function ForwardPage() {
         </TableCell>
         <TableCell className="max-w-[220px]">
           <button
-            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${hasMultipleAddresses(forward.inIp)
-              ? "hover:bg-default-200 hover:shadow-sm"
-              : ""
-              }`}
+            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${
+              hasMultipleAddresses(forward.inIp)
+                ? "hover:bg-default-200 hover:shadow-sm"
+                : ""
+            }`}
             title={formatInAddress(forward.inIp, forward.inPort)}
             type="button"
             onClick={() =>
@@ -1332,10 +1333,11 @@ export default function ForwardPage() {
         </TableCell>
         <TableCell className="max-w-[240px]">
           <button
-            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${hasMultipleAddresses(forward.remoteAddr)
-              ? "hover:bg-default-200 hover:shadow-sm"
-              : ""
-              }`}
+            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${
+              hasMultipleAddresses(forward.remoteAddr)
+                ? "hover:bg-default-200 hover:shadow-sm"
+                : ""
+            }`}
             title={formatRemoteAddress(forward.remoteAddr)}
             type="button"
             onClick={() =>
@@ -1472,10 +1474,11 @@ export default function ForwardPage() {
             <div className="flex items-center gap-1.5 ml-2">
               {viewMode === "direct" && (
                 <div
-                  className={`cursor-grab active:cursor-grabbing p-2 text-default-400 hover:text-default-600 transition-colors touch-manipulation ${isMobile
-                    ? "opacity-100" // 移动端始终显示
-                    : "opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
-                    }`}
+                  className={`cursor-grab active:cursor-grabbing p-2 text-default-400 hover:text-default-600 transition-colors touch-manipulation ${
+                    isMobile
+                      ? "opacity-100" // 移动端始终显示
+                      : "opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
+                  }`}
                   {...listeners}
                   style={{ touchAction: "none" }}
                   title={isMobile ? "长按拖拽排序" : "拖拽排序"}
@@ -1513,10 +1516,11 @@ export default function ForwardPage() {
             {/* 地址信息 */}
             <div className="space-y-1">
               <button
-                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${hasMultipleAddresses(forward.inIp)
-                  ? "hover:bg-default-100 dark:hover:bg-default-200/50"
-                  : ""
-                  }`}
+                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
+                  hasMultipleAddresses(forward.inIp)
+                    ? "hover:bg-default-100 dark:hover:bg-default-200/50"
+                    : ""
+                }`}
                 title={formatInAddress(forward.inIp, forward.inPort)}
                 type="button"
                 onClick={() =>
@@ -1552,10 +1556,11 @@ export default function ForwardPage() {
               </button>
 
               <button
-                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${hasMultipleAddresses(forward.remoteAddr)
-                  ? "hover:bg-default-100 dark:hover:bg-default-200/50"
-                  : ""
-                  }`}
+                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
+                  hasMultipleAddresses(forward.remoteAddr)
+                    ? "hover:bg-default-100 dark:hover:bg-default-200/50"
+                    : ""
+                }`}
                 title={formatRemoteAddress(forward.remoteAddr)}
                 type="button"
                 onClick={() =>
@@ -1973,39 +1978,39 @@ export default function ForwardPage() {
           </Card>
         )
       ) : /* 直接显示模式 */
-        forwards.length > 0 ? (
-          <DndContext
-            collisionDetection={closestCenter}
-            sensors={sensors}
-            onDragEnd={handleDragEnd}
-            onDragStart={() => { }} // 添加空的 onDragStart 处理器
+      forwards.length > 0 ? (
+        <DndContext
+          collisionDetection={closestCenter}
+          sensors={sensors}
+          onDragEnd={handleDragEnd}
+          onDragStart={() => {}} // 添加空的 onDragStart 处理器
+        >
+          <SortableContext
+            items={sortableForwardIds}
+            strategy={rectSortingStrategy}
           >
-            <SortableContext
-              items={sortableForwardIds}
-              strategy={rectSortingStrategy}
-            >
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-                {sortedForwards.map((forward) =>
-                  forward && forward.id ? (
-                    <SortableForwardCard key={forward.id} forward={forward} />
-                  ) : null,
-                )}
-              </div>
-            </SortableContext>
-          </DndContext>
-        ) : (
-          /* 空状态 */
-          <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
-            <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
-              <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
-                暂无转发配置
-              </h3>
-              <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
-                还没有创建任何转发配置，点击上方按钮开始创建
-              </p>
-            </CardBody>
-          </Card>
-        )}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+              {sortedForwards.map((forward) =>
+                forward && forward.id ? (
+                  <SortableForwardCard key={forward.id} forward={forward} />
+                ) : null,
+              )}
+            </div>
+          </SortableContext>
+        </DndContext>
+      ) : (
+        /* 空状态 */
+        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+              暂无转发配置
+            </h3>
+            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+              还没有创建任何转发配置，点击上方按钮开始创建
+            </p>
+          </CardBody>
+        </Card>
+      )}
 
       {/* 新增/编辑模态框 */}
       <Modal
@@ -2474,10 +2479,11 @@ export default function ForwardPage() {
                     {importResults.map((result, index) => (
                       <div
                         key={index}
-                        className={`p-2 rounded border ${result.success
-                          ? "bg-success-50 dark:bg-success-100/10 border-success-200 dark:border-success-300/20"
-                          : "bg-danger-50 dark:bg-danger-100/10 border-danger-200 dark:border-danger-300/20"
-                          }`}
+                        className={`p-2 rounded border ${
+                          result.success
+                            ? "bg-success-50 dark:bg-success-100/10 border-success-200 dark:border-success-300/20"
+                            : "bg-danger-50 dark:bg-danger-100/10 border-danger-200 dark:border-danger-300/20"
+                        }`}
                       >
                         <div className="flex items-center gap-2">
                           {result.success ? (
@@ -2510,10 +2516,11 @@ export default function ForwardPage() {
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2 mb-0.5">
                               <span
-                                className={`text-xs font-medium ${result.success
-                                  ? "text-success-700 dark:text-success-300"
-                                  : "text-danger-700 dark:text-danger-300"
-                                  }`}
+                                className={`text-xs font-medium ${
+                                  result.success
+                                    ? "text-success-700 dark:text-success-300"
+                                    : "text-danger-700 dark:text-danger-300"
+                                }`}
                               >
                                 {result.success ? "成功" : "失败"}
                               </span>
@@ -2525,10 +2532,11 @@ export default function ForwardPage() {
                               </code>
                             </div>
                             <div
-                              className={`text-xs ${result.success
-                                ? "text-success-600 dark:text-success-400"
-                                : "text-danger-600 dark:text-danger-400"
-                                }`}
+                              className={`text-xs ${
+                                result.success
+                                  ? "text-success-600 dark:text-success-400"
+                                  : "text-danger-600 dark:text-danger-400"
+                              }`}
                             >
                               {result.message}
                             </div>
@@ -2711,18 +2719,20 @@ export default function ForwardPage() {
                                     return (
                                       <tr
                                         key={index}
-                                        className={`hover:bg-default-50 dark:hover:bg-gray-700/50 ${result.success
-                                          ? "bg-white dark:bg-gray-800"
-                                          : "bg-danger-50 dark:bg-danger-900/30"
-                                          }`}
+                                        className={`hover:bg-default-50 dark:hover:bg-gray-700/50 ${
+                                          result.success
+                                            ? "bg-white dark:bg-gray-800"
+                                            : "bg-danger-50 dark:bg-danger-900/30"
+                                        }`}
                                       >
                                         <td className="px-3 py-2">
                                           <div className="flex items-center gap-2">
                                             <span
-                                              className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${result.success
-                                                ? "bg-success text-white"
-                                                : "bg-danger text-white"
-                                                }`}
+                                              className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${
+                                                result.success
+                                                  ? "bg-success text-white"
+                                                  : "bg-danger text-white"
+                                              }`}
                                             >
                                               {result.success ? "✓" : "✗"}
                                             </span>
@@ -2764,10 +2774,11 @@ export default function ForwardPage() {
                                         <td className="px-3 py-2 text-center">
                                           {result.success ? (
                                             <span
-                                              className={`font-semibold ${(result.packetLoss || 0) > 0
-                                                ? "text-warning"
-                                                : "text-success"
-                                                }`}
+                                              className={`font-semibold ${
+                                                (result.packetLoss || 0) > 0
+                                                  ? "text-warning"
+                                                  : "text-success"
+                                              }`}
                                             >
                                               {result.packetLoss?.toFixed(1)}%
                                             </span>
@@ -2881,17 +2892,19 @@ export default function ForwardPage() {
                                 return (
                                   <div
                                     key={index}
-                                    className={`border rounded-lg p-3 ${result.success
-                                      ? "border-divider bg-white dark:bg-gray-800"
-                                      : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
-                                      }`}
+                                    className={`border rounded-lg p-3 ${
+                                      result.success
+                                        ? "border-divider bg-white dark:bg-gray-800"
+                                        : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
+                                    }`}
                                   >
                                     <div className="flex items-start gap-2 mb-2">
                                       <span
-                                        className={`w-6 h-6 rounded-full flex items-center justify-center text-xs flex-shrink-0 ${result.success
-                                          ? "bg-success text-white"
-                                          : "bg-danger text-white"
-                                          }`}
+                                        className={`w-6 h-6 rounded-full flex items-center justify-center text-xs flex-shrink-0 ${
+                                          result.success
+                                            ? "bg-success text-white"
+                                            : "bg-danger text-white"
+                                        }`}
                                       >
                                         {result.success ? "✓" : "✗"}
                                       </span>
@@ -2927,10 +2940,11 @@ export default function ForwardPage() {
                                         </div>
                                         <div className="text-center">
                                           <div
-                                            className={`text-lg font-bold ${(result.packetLoss || 0) > 0
-                                              ? "text-warning"
-                                              : "text-success"
-                                              }`}
+                                            className={`text-lg font-bold ${
+                                              (result.packetLoss || 0) > 0
+                                                ? "text-warning"
+                                                : "text-success"
+                                            }`}
                                           >
                                             {result.packetLoss?.toFixed(1)}%
                                           </div>
diff --git a/vite-frontend/src/pages/panel-sharing.tsx b/vite-frontend/src/pages/panel-sharing.tsx
index 8dd9706..dd253bd 100644
--- a/vite-frontend/src/pages/panel-sharing.tsx
+++ b/vite-frontend/src/pages/panel-sharing.tsx
@@ -674,7 +674,11 @@ export default function PanelSharingPage() {
       </Tabs>
 
       {/* Create Share Modal */}
-      <Modal isOpen={createShareOpen} onClose={() => setCreateShareOpen(false)} scrollBehavior="inside">
+      <Modal
+        isOpen={createShareOpen}
+        scrollBehavior="inside"
+        onClose={() => setCreateShareOpen(false)}
+      >
         <ModalContent>
           <ModalHeader>创建分享</ModalHeader>
           <ModalBody>
@@ -777,7 +781,11 @@ export default function PanelSharingPage() {
       </Modal>
 
       {/* Edit Share Modal */}
-      <Modal isOpen={editShareOpen} onClose={() => setEditShareOpen(false)} scrollBehavior="inside">
+      <Modal
+        isOpen={editShareOpen}
+        scrollBehavior="inside"
+        onClose={() => setEditShareOpen(false)}
+      >
         <ModalContent>
           <ModalHeader>编辑分享</ModalHeader>
           <ModalBody>