style: 细微修改按钮样式

Author: hzb666

docs/plans/column-resize-implementation.md

@@ -0,0 +1,77 @@
+# 列宽自定义功能实现计划
+
+## 需求概述
+为 LabStorageManager 系统中的所有表格添加列宽自定义（拖动改变列宽）功能。
+
+## 当前页面表格实现情况
+
+| 页面 | 表格实现 | 分页 | 筛选/搜索 |
+|------|---------|------|-----------|
+| Dashboard | 原生 HTML table | 自定义 (slice) | 自定义 |
+| Inventory | TanStack Table | 自定义 (offset/limit) | 自定义 (globalFilter) |
+| ReagentOrders | TanStack Table | 自定义 | 自定义 |
+| ConsumableOrders | TanStack Table | 自定义 | 自定义 |
+| AdminUsers | TanStack Table | 自定义 | 自定义 |
+
+**说明：** 所有页面的分页和筛选功能均使用自定义实现，非 TanStack 内置组件。
+
+## 需求变更
+
+### 1. Dashboard 表格改为 TanStack
+- Dashboard 当前使用原生 HTML table
+- 需要重构为 TanStack Table，与其他页面保持一致
+
+### 2. 移动端无需加入此功能
+- 列宽调整功能仅在桌面端启用
+- 使用 `useMediaQuery` 检测移动端，隐藏拖拽手柄
+
+### 3. 无需虚拟滚动
+- 当前分页每页最多 100 条
+- DOM 元素数量可控，无需虚拟滚动优化
+
+## 技术方案
+
+### TanStack Table 列宽调整
+TanStack Table v8 原生支持列宽调整，需要：
+- 在 `useReactTable` 中配置 `columnResizeMode: 'onChange'`
+- 在列定义中设置 `size` 属性
+- 在表格元素上应用 `style={{ width: header.getSize() }}`
+- 添加可视化的拖拽手柄（Resize Handle）
+
+## 实现步骤
+
+1. 修改 Dashboard.tsx：将原生表格重构为 TanStack Table
+2. 修改 ResizableHeader.tsx：添加移动端检测逻辑
+3. 修改 Inventory.tsx：添加 ResizableHeader
+4. 修改 ReagentOrders.tsx：添加 ResizableHeader
+5. 修改 ConsumableOrders.tsx：添加 ResizableHeader
+6. 修改 AdminUsers.tsx：添加 ResizableHeader
+7. 添加全局 CSS 样式
+8. 测试验证
+
+## localStorage 存储结构
+
+```typescript
+interface ColumnSizes {
+  [columnId: string]: number
+}
+
+// Key: `table-column-sizes-${tableId}`
+// Value: JSON string of ColumnSizes
+```
+
+## 页面表格标识
+
+| 表格 | tableId |
+|------|---------|
+| Inventory | `inventory-table` |
+| ReagentOrders | `reagent-orders-table` |
+| ConsumableOrders | `consumable-orders-table` |
+| AdminUsers | `admin-users-table` |
+
+## 注意事项
+
+1. 拖拽手柄不应遮挡内容，需保证最小列宽（如 40px）
+2. 需要处理暗黑模式下的样式
+3. 避免拖拽时选中文字（user-select: none）
+4. 移动端检测：使用项目已有的 `useMobile` hook (`frontend/src/hooks/use-mobile.tsx`)

frontend/src/components/ui/button.tsx

@@ -9,9 +9,9 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-base text-primary-foreground shadow-xs hover:bg-primary/90 border border-primary",
+          "bg-primary text-base text-primary-foreground shadow-xs hover:bg-primary/90 border-0",
         destructive:
-          "bg-destructive text-white text-base shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive hover:bg-destructive/70 dark:hover:bg-destructive/80",
+          "bg-destructive text-destructive-foreground text-base shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive hover:bg-destructive/70 dark:hover:bg-destructive/80",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:

frontend/src/index.css

@@ -240,25 +240,6 @@
   opacity: 0;
 }
 
-/* 表格行展开高度渐变动画 */
-@keyframes row-expand {
-  from {
-    max-height: 0;
-  }
-  to {
-    max-height: 300px;
-  }
-}
-
-@keyframes row-collapse {
-  from {
-    max-height: 300px;
-  }
-  to {
-    max-height: 0;
-  }
-}
-
 .table-row-expand-enter {
   animation: row-expand 0.25s ease-out forwards;
 }

frontend/src/pages/Dashboard.tsx

@@ -616,7 +616,7 @@ export function Dashboard() {
                           <td className="p-3 align-middle text-base">{item.remaining_quantity} {item.unit}</td>
                           <td className="p-3 align-middle text-base">{formatDateTime(item.borrow_time)}</td>
                           <td className="p-3 align-middle text-base">
-                            <Button onClick={() => openReturnModal(item)} size="sm" className="h-8.5 text-sm/4 px-3">归还</Button>
+                            <Button onClick={() => openReturnModal(item)} size="sm" className="h-8 text-sm/4 px-3 bg-primary hover:bg-primary/80 border-0">归还</Button>
                           </td>
                         </tr>
                       ))}

frontend/src/pages/Inventory.tsx

@@ -201,10 +201,10 @@ const ActionButtons = React.memo(function ActionButtons({
         <Button
           size="sm"
           className={cn(
-            "h-8.5 text-sm/4 px-3 transition-none",
+            "h-8 text-sm/4 px-3",
             isConfirming 
-              ? "bg-destructive hover:bg-destructive/90 border border-destructive" 
-              : "bg-primary hover:bg-primary/90 border border-primary",
+              ? "bg-destructive text-destructive-foreground hover:bg-destructive/70 dark:hover:bg-destructive/80" 
+              : "bg-primary hover:bg-primary/80 border-0",
             isLoading && "opacity-50 cursor-wait"
           )}
           onClick={handleClick}
@@ -1416,3 +1416,4 @@ export function InventoryPage() {
     </div>
   )
 }
+

frontend/src/pages/Layout.tsx

@@ -116,7 +116,7 @@ export function Layout() {
                             : 'gap-3 px-3',
                           isActive
                             ? 'bg-primary text-primary-foreground'
-                            : 'text-sidebar-foreground hover:bg-muted hover:text-foreground'
+                            : 'text-sidebar-foreground hover:bg-muted'
                         )}
                         title={sidebarCollapsed ? item.title : undefined}
                       >
@@ -155,7 +155,7 @@ export function Layout() {
                             : 'gap-3 px-3',
                           isActive
                             ? 'bg-primary text-primary-foreground'
-                            : 'text-sidebar-foreground hover:bg-muted hover:text-foreground'
+                            : 'text-sidebar-foreground hover:bg-muted'
                         )}
                         title={sidebarCollapsed ? item.title : undefined}
                       >
@@ -179,7 +179,7 @@ export function Layout() {
           <div className="mt-auto p-3">
             <div className="pt-2">
               {/* 头像 */}
-              <div className="flex items-center gap-3 mb-3">
+              <div className={cn("flex items-center gap-3 mb-3", sidebarCollapsed ? "" : "ml-1")}>
                 <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground flex-shrink-0">
                   {user?.username?.charAt(0).toUpperCase() || 'U'}
                 </div>
@@ -189,10 +189,10 @@ export function Layout() {
                     sidebarCollapsed ? 'opacity-0 w-0' : 'opacity-100'
                   )}
                 >
-                  <p className="text-sm font-medium truncate text-sidebar-foreground whitespace-nowrap">
+                  <p className="text-base font-medium truncate text-sidebar-foreground whitespace-nowrap">
                     {user?.full_name || user?.username}
                   </p>
-                  <p className="text-xs text-sidebar-foreground/70 whitespace-nowrap">
+                  <p className="text-sm text-sidebar-foreground/70 whitespace-nowrap">
                     {user?.role === 'admin' ? '管理员' : '用户'}
                   </p>
                 </div>
@@ -208,39 +208,39 @@ export function Layout() {
                 )}
               >
                 <Button
-                  variant="outline"
+                  variant="ghost"
                   onClick={() => logout()}
                   className={cn(
-                    "text-sidebar-foreground hover:bg-muted hover:text-foreground border-0 shadow-none min-w-0 overflow-hidden flex",
+                    "h-10 text-sidebar-foreground text-base hover:bg-muted min-w-0 overflow-hidden flex",
                     sidebarCollapsed 
                       ? "w-10 h-10 p-0 justify-center" 
                       : "flex-1 justify-start px-3"
                   )}
                   title={sidebarCollapsed ? "退出登录" : undefined}
                 >
-                  <LogOut className="h-4 w-4 shrink-0" />
+                  <LogOut className="size-5 shrink-0" />
                   {!sidebarCollapsed && (
                     <span className="ml-2 whitespace-nowrap">
                       退出登录
                     </span>
                   )}
                 </Button>
                 <Button
-                  variant="outline"
+                  variant="ghost"
                   size="icon"
                   onClick={toggleTheme}
                   className={cn(
-                    "h-9 shrink-0 hover:bg-muted hover:text-foreground border-0 shadow-none text-sidebar-foreground",
+                    "size-10 shrink-0 hover:bg-muted shadow-none text-sidebar-foreground",
                     sidebarCollapsed 
                       ? "w-10" 
                       : ""
                   )}
                   title={sidebarCollapsed ? (theme === 'dark' ? '切换亮色' : '切换暗黑') : undefined}
                 >
                   {theme === 'dark' ? (
-                    <Sun className="h-4 w-4" />
+                    <Sun className="size-5" />
                   ) : (
-                    <Moon className="h-4 w-4" />
+                    <Moon className="size-5" />
                   )}
                 </Button>
               </div>
@@ -329,20 +329,20 @@ export function Layout() {
                     {user?.username?.charAt(0).toUpperCase() || 'U'}
                   </div>
                   <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium truncate text-sidebar-foreground">
+                    <p className="text-base font-medium truncate text-sidebar-foreground">
                       {user?.full_name || user?.username}
                     </p>
-                    <p className="text-xs text-sidebar-foreground/70">
+                    <p className="text-sm text-sidebar-foreground/70">
                       {user?.role === 'admin' ? '管理员' : '用户'}
                     </p>
                   </div>
                 </div>
                 <Button
                   variant="ghost"
-                  className="w-full justify-start text-sidebar-foreground hover:bg-sidebar-foreground/10"
+                  className="w-full text-base h-10 justify-start text-sidebar-foreground hover:bg-muted"
                   onClick={() => logout()}
                 >
-                  <LogOut className="mr-2 h-4 w-4" />
+                  <LogOut className="mr-2 size-5" />
                   退出登录
                 </Button>
               </div>