fix: 統一 UI 按鈕樣式並新增 button-outlined-error hover 效果
- 修正 5 處硬編碼顏色樣式改用預定義按鈕類別 - 新增 button-outlined-error 的 hover 狀態(bg-red-50) - 修正倉庫模組刪除按鈕樣式統一性 - 角色管理權限 Badge 改用標準組件 - 新增 UI 統一性規範 skill - 修復 1 處 lint 警告(移除未使用參數) 變更檔案: - resources/css/app.css: 新增 button-outlined-error hover 樣式 - resources/js/Components/Warehouse/WarehouseDialog.tsx - resources/js/Pages/Admin/Role/Index.tsx - resources/js/Pages/Warehouse/EditInventory.tsx - resources/js/Pages/Warehouse/Inventory.tsx - resources/js/Pages/Warehouse/SafetyStockSettings.tsx - .agent/skills/ui-consistency/SKILL.md (新增)
This commit is contained in:
@@ -191,9 +191,9 @@ export default function WarehouseDialog({
|
||||
type="button"
|
||||
onClick={() => setShowDeleteDialog(true)}
|
||||
variant="outline"
|
||||
className="group mr-auto border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white"
|
||||
className="mr-auto button-outlined-error"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4 group-hover:text-white" />
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
刪除倉庫
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Head, Link, router } from '@inertiajs/react';
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Shield, Plus, Pencil, Trash2, Users } from 'lucide-react';
|
||||
import { Button } from '@/Components/ui/button';
|
||||
import { Badge } from '@/Components/ui/badge';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -112,9 +113,9 @@ export default function RoleIndex({ roles }: Props) {
|
||||
{role.name}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
<Badge variant="default" className="bg-blue-100 text-blue-800 border-blue-200">
|
||||
{role.permissions_count} 項權限
|
||||
</span>
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<button
|
||||
|
||||
@@ -102,7 +102,7 @@ export default function EditInventory({ warehouse, inventory, transactions = []
|
||||
<Button
|
||||
onClick={() => setShowDeleteDialog(true)}
|
||||
variant="outline"
|
||||
className="group border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 hover:border-red-300"
|
||||
className="button-outlined-error"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
刪除品項
|
||||
@@ -250,7 +250,7 @@ export default function EditInventory({ warehouse, inventory, transactions = []
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
className="bg-red-600 text-white hover:bg-red-700"
|
||||
className="button-filled-error"
|
||||
>
|
||||
確認刪除
|
||||
</AlertDialogAction>
|
||||
|
||||
@@ -186,10 +186,10 @@ export default function WarehouseInventoryPage({
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={(e) => {
|
||||
onClick={() => {
|
||||
handleDelete();
|
||||
}}
|
||||
className="bg-red-600 hover:bg-red-700 text-white"
|
||||
className="button-filled-error"
|
||||
>
|
||||
確認刪除
|
||||
</AlertDialogAction>
|
||||
|
||||
@@ -180,7 +180,7 @@ export default function SafetyStockPage({
|
||||
<AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
className="bg-red-600 hover:bg-red-700 text-white"
|
||||
className="button-filled-error"
|
||||
>
|
||||
確認刪除
|
||||
</AlertDialogAction>
|
||||
|
||||
Reference in New Issue
Block a user