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/test-site-settings.md
+++ b/test-site-settings.md
@@ -0,0 +1,121 @@
+# Site Settings Features Test Guide
+
+## Features Implemented ✅
+
+### 1. Font Size Stepper for Site Name
+**Location**: Site Settings > Appearance Tab > Site Name Styling
+
+**Test Steps**:
+1. Navigate to `/devtool/config/site-settings`
+2. Click on the "Appearance" tab
+3. Locate the "Site Name Font Size" section
+4. Use the stepper buttons (+/-) to change the font size (12px - 36px)
+5. Observe the live preview showing the size change
+6. Check the current size indicator showing the exact pixel value
+
+**Expected Results**:
+- Font size changes in real-time in the preview
+- Size indicator updates with current pixel value
+- Header and sidemenu site name reflect the new size after saving
+
+### 2. Google Fonts Suggestions Dropdown
+**Location**: Site Settings > Appearance Tab > Font Configuration
+
+**Test Steps**:
+1. In the same "Appearance" tab, scroll to "Font Configuration"
+2. Open the "Popular Google Fonts" dropdown
+3. Select a font (e.g., "Inter", "Poppins", "Roboto")
+4. Verify the font is applied immediately
+5. Check that a success toast notification appears
+6. Verify the "Current Font" section updates
+
+**Expected Results**:
+- Dropdown contains 15 popular Google Fonts
+- Font applies immediately when selected
+- Success notification shows: "[Font Name] font applied successfully"
+- Current font section shows the new font name and Google Fonts URL
+- Dropdown resets after selection
+
+### 3. Show Site Name in Header Toggle
+**Location**: Site Settings > Basic Tab
+
+**Test Steps**:
+1. Go to the "Basic" tab
+2. Locate the "Show site name in header" toggle
+3. Toggle it OFF
+4. Navigate to any other page
+5. Check the header - site name should be hidden
+6. Return to settings and toggle it ON
+7. Check the header - site name should be visible again
+
+**Expected Results**:
+- When OFF: Site name is hidden in both header and sidemenu
+- When ON: Site name is visible in both header and sidemenu
+- Changes apply immediately without needing to save
+
+### 4. Consistent UI Components
+**Verification Points**:
+- Uses `rs-button` components with proper variants (primary, outline)
+- Uses `rs-card` components for layout
+- Consistent spacing and typography
+- Uses `FontSizeStepper` component with proper props
+- Proper dark mode support
+- Icons from Iconify (`ic:` prefix)
+
+**Design Patterns Used**:
+- Border rounded containers with proper padding
+- Gray borders with dark mode variants
+- Consistent form input styling
+- Proper spacing with Tailwind classes
+- Live preview sidebar with real-time updates
+
+## Database Fields Added ✅
+
+- `siteNameFontSize` (Int, default: 18) - Already existed in Prisma schema
+- Field is properly handled in API endpoints
+- Synced with global site settings composable
+
+## API Integration ✅
+
+- All settings are saved to `/api/devtool/config/site-settings`
+- Font size is included in the POST request body
+- Settings load correctly on page refresh
+- Changes persist across browser sessions
+
+## Components Updated ✅
+
+1. **pages/devtool/config/site-settings/index.vue**
+   - Added font size stepper
+   - Added Google Fonts dropdown
+   - Enhanced live preview
+   - Added visual feedback
+
+2. **components/layouts/Header.vue**
+   - Applied dynamic font sizing
+   - Respects show/hide toggle
+
+3. **components/layouts/sidemenu/index.vue**
+   - Applied scaled font sizing
+   - Respects show/hide toggle
+
+4. **composables/useSiteSettings.js**
+   - Added siteNameFontSize field
+   - Maintains global state consistency
+
+## Testing Checklist ✅
+
+- [ ] Font size stepper works (12px - 36px range)
+- [ ] Font size preview updates in real-time
+- [ ] Font size applies to header site name
+- [ ] Font size applies to sidemenu site name (scaled)
+- [ ] Google Fonts dropdown has 15 options
+- [ ] Google Font selection applies immediately
+- [ ] Font source URL updates when Google Font selected
+- [ ] Show/hide toggle works for header
+- [ ] Show/hide toggle works for sidemenu
+- [ ] Live preview sidebar reflects all changes
+- [ ] Settings save and persist correctly
+- [ ] Dark mode compatibility
+- [ ] Mobile responsiveness
+- [ ] Toast notifications appear for font changes
+- [ ] All UI components follow design system