Update various configuration files, components, and assets; enhance notification system and API endpoints; improve documentation and styles across the application.

2025-10-16 16:05:39 +08:00
commit b124ff8092
336 changed files with 94392 additions and 0 deletions
--- a/NOTIFICATION_TEMPLATES_DEBUG.md
+++ b/NOTIFICATION_TEMPLATES_DEBUG.md
@@ -0,0 +1,161 @@
+# Notification Templates Error Debugging Guide
+
+## Issue Description
+
+**Error:** `Cannot read properties of undefined (reading 'map')`
+**Location:** `pages/notification/templates/index.vue` line 399
+**Cause:** The frontend is trying to call `.map()` on `response.data.templates` but this property is undefined.
+
+## Root Cause Analysis
+
+The error occurs because the API response doesn't have the expected structure. The frontend expects:
+```javascript
+{
+  success: true,
+  data: {
+    templates: [...], // Array of templates
+    pagination: {...}
+  }
+}
+```
+
+But the API might be returning:
+- An error response
+- A response with missing `data` property
+- A response with missing `data.templates` property
+- An empty or malformed response
+
+## Potential Causes
+
+1. **Database Issues:**
+   - Database connection failure
+   - Missing `notification_templates` table
+   - Table exists but has no data
+
+2. **Authentication Issues:**
+   - User not authenticated
+   - Authentication middleware failing
+   - Missing user context in API
+
+3. **API Implementation Issues:**
+   - Error in API endpoint logic
+   - Prisma query failure
+   - Unhandled exceptions
+
+## Debugging Steps
+
+### Step 1: Test Database Connection and Data
+
+Run the database test script:
+```bash
+npm run test-api
+```
+
+This will:
+- Test database connection
+- Check if `notification_templates` table exists
+- Show current data count
+- Simulate the API logic
+- Display the expected response structure
+
+### Step 2: Add Sample Data
+
+If the table is empty, seed it with sample data:
+```bash
+npm run seed-templates
+```
+
+This will add 4 sample notification templates for testing.
+
+### Step 3: Run Both Tests
+
+Run the combined debugging command:
+```bash
+npm run debug-templates
+```
+
+This runs both the test and seeding scripts.
+
+### Step 4: Check Authentication
+
+Ensure you are logged in when testing the frontend. The API requires authentication.
+
+## Frontend Fixes Applied
+
+The frontend code has been updated with better error handling:
+
+1. **Defensive Programming:** Check if response structure exists before accessing
+2. **Better Error Messages:** More specific error messages based on response type
+3. **Empty State Handling:** Properly handle empty arrays
+4. **Loading State Management:** Consistent loading state management
+
+## API Response Structure
+
+The API should return:
+```javascript
+{
+  success: true,
+  data: {
+    templates: [
+      {
+        id: "uuid",
+        title: "Template Name",
+        value: "template_value",
+        description: "Description",
+        subject: "Email Subject",
+        category: "category",
+        channels: ["email", "push"],
+        status: "Active",
+        version: "1.0",
+        // ... other fields
+      }
+    ],
+    pagination: {
+      page: 1,
+      limit: 10,
+      totalCount: 5,
+      totalPages: 1,
+      hasNextPage: false,
+      hasPrevPage: false
+    }
+  }
+}
+```
+
+## Quick Fix Summary
+
+1. **Frontend:** Added robust error handling to prevent crashes
+2. **Testing:** Created scripts to test database and API logic
+3. **Sample Data:** Created seeding script for testing
+4. **Debugging:** Added comprehensive logging and error reporting
+
+## Next Steps
+
+1. Run `npm run debug-templates` to diagnose the issue
+2. Check the console output for specific errors
+3. If database connection fails, check your `DATABASE_URL` environment variable
+4. If authentication fails, ensure you're logged in
+5. If the API works in testing but fails in the browser, check browser console for network errors
+
+## Files Modified
+
+- `pages/notification/templates/index.vue` - Added error handling
+- `scripts/seed-templates.js` - Sample data seeding
+- `scripts/test-api.js` - Database and API testing
+- `package.json` - Added debugging scripts
+
+## Environment Requirements
+
+- Database server running
+- Valid `DATABASE_URL` in environment
+- Prisma client generated (`npx prisma generate`)
+- Database migrations applied
+
+## Support
+
+If the issue persists after following these steps, check:
+1. Database server status
+2. Environment variables
+3. Prisma schema sync with database
+4. Network connectivity
+5. Authentication middleware configuration