catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-03 15:43:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor workflow-lite-planex documentation to standardize phase naming and improve clarity

Browse Source 
- Updated phase references in SKILL.md and 01-lite-plan.md to use "LP-Phase" prefix for consistency.
- Added critical context isolation note in 01-lite-plan.md to clarify phase invocation rules.
- Enhanced execution process descriptions to reflect updated phase naming conventions.

Improve error handling in frontend routing

- Introduced ChunkErrorBoundary component to handle lazy-loaded chunk load failures.
- Wrapped lazy-loaded routes with error boundary and suspense for better user experience.
- Created PageSkeleton component for loading states in lazy-loaded routes.

Sanitize header values in notification routes

- Added regex validation for header values to prevent XSS attacks by allowing only printable ASCII characters.

Enhance mobile responsiveness in documentation styles

- Updated CSS breakpoints to use custom properties for better maintainability.
- Improved layout styles across various components to ensure consistent behavior on mobile devices.
This commit is contained in:
catlog22
2026-03-02 16:36:40 +08:00
parent 980be3d87d
commit 57636040d2
22 changed files with 1149 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
docs/.vitepress/theme/styles/mobile.css
View File

@@ -1,7 +1,7 @@
/**
* Mobile-Responsive Styles
* Breakpoints: 320px-768px (mobile), 768px-1024px (tablet), 1024px+ (desktop)
* Uses CSS custom properties from variables.css: --bp-mobile, --bp-tablet, --bp-desktop
* Breakpoints: < 480px (xs), < 768px (sm/mobile), 768px-1024px (md/tablet), > 1024px (lg/desktop)
* Uses CSS custom properties from variables.css: --bp-xs, --bp-sm, --bp-md, --bp-lg
* WCAG 2.1 AA compliant
*/
@@ -19,7 +19,7 @@
max-width: 320px;
}
@media (min-width: 768px) {
@media (min-width: var(--bp-sm)) {
.VPSidebar {
width: var(--vp-sidebar-width, 272px);
max-width: none;
@@ -31,13 +31,13 @@
padding: 16px;
}
@media (min-width: 768px) {
@media (min-width: var(--bp-sm)) {
.VPContent {
padding: 24px;
}
}
@media (min-width: 1024px) {
@media (min-width: var(--bp-md)) {
.VPContent {
padding: 32px 48px;
}
@@ -48,14 +48,14 @@
display: none;
}
@media (min-width: 768px) {
@media (min-width: var(--bp-sm)) {
.VPDocOutline {
display: block;
width: 200px;
}
}
@media (min-width: 1024px) {
@media (min-width: var(--bp-md)) {
.VPDocOutline {
width: 256px;
}
@@ -65,7 +65,7 @@
/* Container Query Rules (modern browsers) */
@supports (container-type: inline-size) {
/* Sidebar Container Queries */
@container sidebar (max-width: 480px) {
@container sidebar (max-width: var(--bp-xs)) {
.VPSidebar .group {
padding: 12px 16px;
}
@@ -75,7 +75,7 @@
}
}
@container sidebar (min-width: 480px) and (max-width: 768px) {
@container sidebar (min-width: var(--bp-xs)) and (max-width: var(--bp-sm)) {
.VPSidebar .group {
padding: 16px 20px;
}
@@ -85,7 +85,7 @@
}
}
@container sidebar (min-width: 768px) {
@container sidebar (min-width: var(--bp-sm)) {
.VPSidebar .group {
padding: 16px 24px;
}
@@ -221,25 +221,25 @@
}
/* Generic Container-Responsive Utility Class */
@container (max-width: 480px) {
@container (max-width: var(--bp-xs)) {
.container-responsive {
padding: 0 var(--spacing-fluid-xs);
}
}
@container (min-width: 480px) and (max-width: 768px) {
@container (min-width: var(--bp-xs)) and (max-width: var(--bp-sm)) {
.container-responsive {
padding: 0 var(--spacing-fluid-sm);
}
}
@container (min-width: 768px) and (max-width: 1024px) {
@container (min-width: var(--bp-sm)) and (max-width: var(--bp-md)) {
.container-responsive {
padding: 0 var(--spacing-fluid-md);
}
}
@container (min-width: 1024px) {
@container (min-width: var(--bp-md)) {
.container-responsive {
padding: 0 var(--spacing-fluid-lg);
}
@@ -250,7 +250,7 @@
* ============================================ */
/* Base Mobile Styles (320px+) */
@media (max-width: 768px) {
@media (max-width: var(--bp-sm)) {
/* Typography */
:root {
--vp-font-size-base: 14px;
@@ -598,7 +598,7 @@
/* ============================================
* Tablet Styles (768px - 1024px)
* ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
@media (min-width: var(--bp-sm)) and (max-width: var(--bp-md)) {
:root {
--vp-content-width: 760px;
--vp-sidebar-width: 240px;
@@ -639,7 +639,7 @@
/* ============================================
* Desktop Styles (1024px+)
* ============================================ */
@media (min-width: 1024px) {
@media (min-width: var(--bp-md)) {
:root {
--vp-layout-max-width: 1600px;
--vp-content-width: 960px;
@@ -692,7 +692,7 @@
/* ============================================
* Large Desktop (1440px+)
* ============================================ */
@media (min-width: 1440px) {
@media (min-width: var(--bp-lg)) {
:root {
--vp-content-width: 1040px;
--vp-sidebar-width: 280px;
@@ -749,23 +749,20 @@
/* ============================================
* ProfessionalHome Component - Mobile Optimizations
* ============================================ */
@media (max-width: 768px) {
@media (max-width: var(--bp-sm)) {
/* Root level overflow prevention */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
/* VitePress Layout container fix */
.Layout {
max-width: 100vw;
overflow-x: hidden;
}
/* VPContent container fix */
.VPContent {
max-width: 100vw;
overflow-x: hidden;
padding: 0 !important;
}
@@ -774,7 +771,6 @@
padding: 0 12px;
box-sizing: border-box;
max-width: 100vw;
overflow-x: hidden;
}
.hero-stats {
@@ -790,7 +786,6 @@
/* Prevent horizontal scroll */
.pro-home {
overflow-x: hidden;
max-width: 100vw;
}
@@ -888,8 +883,7 @@
/* Quick Start Section - prevent overflow */
.pro-home .quickstart-section {
padding: 3rem 0;
max-width: 100vw;
overflow-x: hidden;
max-width: 100%;
}
.pro-home .quickstart-layout {
@@ -917,19 +911,17 @@
/* Features section overflow fix */
.pro-home .features-section {
max-width: 100vw;
overflow-x: hidden;
padding: 3rem 0;
}
/* Pipeline section overflow fix */
.pro-home .pipeline-section {
max-width: 100vw;
overflow-x: hidden;
}
}
/* ProfessionalHome - Tablet Optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
@media (min-width: var(--bp-sm)) and (max-width: var(--bp-md)) {
.pro-home .hero-section {
padding: 3rem 0 2.5rem;
}
@@ -949,7 +941,7 @@
}
/* ProfessionalHome - Small Mobile (< 480px) */
@media (max-width: 480px) {
@media (max-width: var(--bp-xs)) {
.pro-home .hero-badge {
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
@@ -973,7 +965,7 @@
/* ============================================
* Dark Mode Specific
* ============================================ */
@media (max-width: 768px) {
@media (max-width: var(--bp-sm)) {
.dark {
--vp-c-bg: #0f172a;
--vp-c-text-1: #f1f5f9;
@@ -983,7 +975,7 @@
/* ============================================
* Print Styles for Mobile
* ============================================ */
@media print and (max-width: 768px) {
@media print and (max-width: var(--bp-sm)) {
.VPContent {
font-size: 10pt;
}