From efbdabcecae6224644e13a04e6b4877c1f075112 Mon Sep 17 00:00:00 2001
From: sagit <36596628+Sagit-chu@users.noreply.github.com>
Date: Thu, 19 Feb 2026 16:46:37 +0800
Subject: [PATCH] fix(frontend): align diagnosis status and permission layout
 (#148)

* fix(frontend): align diagnosis status and permission layout

* fix(frontend): polish batch toolbar controls on cards

* fix(user): stabilize tunnel permission checkbox interactions
---
 vite-frontend/src/pages/forward.tsx |  7 +++----
 vite-frontend/src/pages/group.tsx   |  3 ++-
 vite-frontend/src/pages/node.tsx    | 14 +++++++-------
 vite-frontend/src/pages/tunnel.tsx  |  7 +++----
 vite-frontend/src/pages/user.tsx    |  7 +++----
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 4117fcb..3c8f70d 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -1584,7 +1584,7 @@ export default function ForwardPage() {
           </Button>
 
           <Button
-            color={selectMode ? "warning" : "default"}
+            color={selectMode ? "warning" : "primary"}
             size="sm"
             variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
@@ -1604,10 +1604,10 @@ export default function ForwardPage() {
             <span className="text-sm text-default-600 shrink-0">
               已选择 {selectedIds.size} 项
             </span>
-            <Button size="sm" variant="flat" onPress={selectAll}>
+            <Button color="primary" size="sm" variant="flat" onPress={selectAll}>
               全选
             </Button>
-            <Button size="sm" variant="flat" onPress={deselectAll}>
+            <Button color="secondary" size="sm" variant="flat" onPress={deselectAll}>
               清空
             </Button>
             <Button
@@ -2595,7 +2595,6 @@ export default function ForwardPage() {
                                         </td>
                                         <td className="px-3 py-2 text-center">
                                           <Chip
-                                            className="min-w-[50px]"
                                             color={
                                               result.success
                                                 ? "success"
diff --git a/vite-frontend/src/pages/group.tsx b/vite-frontend/src/pages/group.tsx
index f6f459e..c79cbcf 100644
--- a/vite-frontend/src/pages/group.tsx
+++ b/vite-frontend/src/pages/group.tsx
@@ -599,7 +599,7 @@ export default function GroupPage() {
           <h3 className="text-lg font-semibold">权限分配</h3>
         </CardHeader>
         <CardBody className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-3 md:items-end">
             <Select
               items={userGroups}
               label="用户分组"
@@ -629,6 +629,7 @@ export default function GroupPage() {
               {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
             </Select>
             <Button
+              className="md:self-end"
               color="primary"
               isLoading={savingPermission}
               onPress={handleAssignPermission}
diff --git a/vite-frontend/src/pages/node.tsx b/vite-frontend/src/pages/node.tsx
index 3f56968..788aba2 100644
--- a/vite-frontend/src/pages/node.tsx
+++ b/vite-frontend/src/pages/node.tsx
@@ -1000,12 +1000,12 @@ export default function NodePage() {
 
         <div className="flex gap-2 items-center">
           <Button
-            color={selectMode ? "warning" : "default"}
+            color={selectMode ? "warning" : "primary"}
             size="sm"
-            variant="flat"
+            variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
           >
-            {selectMode ? "取消多选" : "多选"}
+            {selectMode ? "退出" : "批量"}
           </Button>
           <Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
             新增
@@ -1020,10 +1020,10 @@ export default function NodePage() {
             <span className="text-sm font-medium shrink-0">
               已选 {selectedIds.size} 项
             </span>
-            <Button size="sm" variant="flat" onPress={selectAll}>
+            <Button color="primary" size="sm" variant="flat" onPress={selectAll}>
               全选
             </Button>
-            <Button size="sm" variant="flat" onPress={deselectAll}>
+            <Button color="secondary" size="sm" variant="flat" onPress={deselectAll}>
               清空
             </Button>
             <Button
@@ -1083,7 +1083,7 @@ export default function NodePage() {
                         key={node.id}
                         className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden"
                       >
-                        <CardHeader className="pb-2">
+                        <CardHeader className="pb-2 md:pb-2">
                           <div className="flex justify-between items-start w-full">
                             <div className="flex items-center gap-2 flex-1 min-w-0">
                               {selectMode && (
@@ -1143,7 +1143,7 @@ export default function NodePage() {
                           </div>
                         </CardHeader>
 
-                        <CardBody className="pt-0 pb-3">
+                        <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
                           {isRemoteNode && node.syncError && (
                             <div className="mb-3 px-2 py-1.5 rounded-md bg-warning-50 dark:bg-warning-100/10 text-warning-700 dark:text-warning-400 text-xs">
                               {getRemoteSyncErrorMessage(node.syncError)}
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index 925da65..ef27274 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -678,7 +678,7 @@ export default function TunnelPage() {
 
         <div className="flex items-center gap-2">
           <Button
-            color={selectMode ? "warning" : "default"}
+            color={selectMode ? "warning" : "primary"}
             size="sm"
             variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
@@ -697,10 +697,10 @@ export default function TunnelPage() {
             <span className="text-sm text-default-600 shrink-0">
               已选择 {selectedIds.size} 项
             </span>
-            <Button size="sm" variant="flat" onPress={selectAll}>
+            <Button color="primary" size="sm" variant="flat" onPress={selectAll}>
               全选
             </Button>
-            <Button size="sm" variant="flat" onPress={deselectAll}>
+            <Button color="secondary" size="sm" variant="flat" onPress={deselectAll}>
               清空
             </Button>
             <Button
@@ -2075,7 +2075,6 @@ export default function TunnelPage() {
                                         </td>
                                         <td className="px-3 py-2 text-center">
                                           <Chip
-                                            className="min-w-[50px]"
                                             color={
                                               result.success
                                                 ? "success"
diff --git a/vite-frontend/src/pages/user.tsx b/vite-frontend/src/pages/user.tsx
index bf3a66f..e1296fb 100644
--- a/vite-frontend/src/pages/user.tsx
+++ b/vite-frontend/src/pages/user.tsx
@@ -1082,13 +1082,12 @@ export default function UserPage() {
                           <div className="flex items-center justify-between gap-4">
                             <div className="flex items-center gap-3 flex-1 min-w-0">
                               <Checkbox
-                                classNames={{
-                                  base: "pointer-events-none",
-                                }}
                                 color="primary"
                                 isDisabled={isAssigned}
                                 isSelected={isSelected}
                                 size="md"
+                                onClick={(event) => event.stopPropagation()}
+                                onKeyDown={(event) => event.stopPropagation()}
                                 onValueChange={() =>
                                   toggleTunnelSelection(tunnel.id)
                                 }
@@ -1117,7 +1116,7 @@ export default function UserPage() {
                                   classNames={{
                                     trigger: "min-h-10 h-10",
                                   }}
-                                  label="限速规则"
+                                  placeholder="限速规则"
                                   selectedKeys={
                                     batchTunnelSelections.get(tunnel.id) !==
                                       null &&