Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,145 @@
+# Shot Delete Dialog - Alert Components Update
+
+## Overview
+
+Updated the `ShotDeleteConfirmDialog.vue` component to use shadcn-vue Alert components for all warning and informational messages, replacing custom styled divs with proper semantic alert components.
+
+## Changes Made
+
+### 1. Replaced Custom Alert Styling with shadcn-vue Alert Components
+
+**Before:**
+```vue
+<!-- Error State -->
+<div class="rounded-lg border border-destructive/20 bg-destructive/5 p-4">
+  <div class="flex items-center gap-2 mb-2">
+    <AlertCircle class="h-4 w-4 text-destructive" />
+    <span class="font-medium text-destructive">Failed to load deletion information</span>
+  </div>
+  <p class="text-sm text-muted-foreground">{{ loadError }}</p>
+</div>
+```
+
+**After:**
+```vue
+<!-- Error State -->
+<Alert variant="destructive">
+  <AlertCircle class="h-4 w-4" />
+  <AlertTitle>Failed to load deletion information</AlertTitle>
+  <AlertDescription>{{ loadError }}</AlertDescription>
+</Alert>
+```
+
+### 2. Updated All Alert Types
+
+#### Error Messages
+- Uses `Alert` with `variant="destructive"`
+- Includes `AlertTitle` and `AlertDescription` for proper semantic structure
+- Icon positioning handled automatically by the Alert component
+
+#### Warning Messages (Affected Users)
+- Uses `Alert` with custom styling classes for orange warning appearance
+- Maintains the same visual design but with proper Alert component structure
+- Preserves the user list display within `AlertDescription`
+
+#### Success Messages (No Affected Users)
+- Uses `Alert` with custom styling classes for green success appearance
+- Simple message display using `AlertDescription`
+
+#### Information Messages (Data Preservation)
+- Uses `Alert` with custom styling classes for blue info appearance
+- Includes both `AlertTitle` and `AlertDescription` for structured content
+
+### 3. Added Component Imports
+
+```vue
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/ui/alert'
+```
+
+### 4. Code Cleanup
+
+- Removed unused `onMounted` import from ShotDeleteConfirmDialog.vue
+- Removed unused `computed` import from ShotsDataTable.vue
+- Fixed TypeScript/linting warnings
+
+## Benefits
+
+### 1. Consistency
+- All alerts now use the same shadcn-vue Alert component system
+- Consistent styling and behavior across the application
+- Proper semantic HTML structure with ARIA roles
+
+### 2. Accessibility
+- Alert components include proper `role="alert"` attributes
+- Better screen reader support with structured titles and descriptions
+- Consistent focus management and keyboard navigation
+
+### 3. Maintainability
+- Centralized alert styling through shadcn-vue components
+- Easier to update alert appearance globally
+- Reduced custom CSS and styling inconsistencies
+
+### 4. Design System Compliance
+- Follows shadcn-vue design system patterns
+- Consistent with other UI components in the application
+- Better integration with theme system
+
+## Alert Component Variants Used
+
+### Destructive Variant
+```vue
+<Alert variant="destructive">
+  <AlertCircle class="h-4 w-4" />
+  <AlertTitle>Error Title</AlertTitle>
+  <AlertDescription>Error message details</AlertDescription>
+</Alert>
+```
+
+### Default Variant with Custom Styling
+```vue
+<Alert variant="default" class="border-orange-200 bg-orange-50">
+  <Users class="h-4 w-4 text-orange-600" />
+  <AlertTitle class="text-orange-800">Warning Title</AlertTitle>
+  <AlertDescription class="text-orange-700">Warning message</AlertDescription>
+</Alert>
+```
+
+## Visual Impact
+
+The visual appearance remains the same for users, but the underlying implementation is now:
+- More semantic and accessible
+- Consistent with the design system
+- Easier to maintain and update
+- Better structured for screen readers
+
+## Testing
+
+Created `frontend/test-shot-delete-alert-components.html` to verify:
+- All alert variants display correctly
+- Icons and styling are preserved
+- Content structure is maintained
+- Complete dialog preview shows integration
+
+## Files Modified
+
+1. **frontend/src/components/shot/ShotDeleteConfirmDialog.vue**
+   - Replaced custom alert divs with Alert components
+   - Added Alert component imports
+   - Removed unused imports
+
+2. **frontend/src/components/shot/ShotsDataTable.vue**
+   - Removed unused `computed` import
+
+## Files Created
+
+1. **frontend/test-shot-delete-alert-components.html**
+   - Test file demonstrating all alert variants
+   - Complete dialog preview
+   - Visual verification of changes
+
+2. **frontend/docs/shot-delete-alert-components-update.md**
+   - This documentation file