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

44
docs/.vitepress/theme/components/ProfessionalHome.vue
View File

@@ -549,6 +549,7 @@ onUnmounted(() => {
margin: 0 auto;
padding: 0 2rem;
width: 100%;
box-sizing: border-box;
}
/* ============================================
@@ -573,6 +574,7 @@ onUnmounted(() => {
align-items: center;
padding: 0 2rem;
width: 100%;
box-sizing: border-box;
}
.hero-visual {
@@ -743,6 +745,8 @@ onUnmounted(() => {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
max-width: 100%;
box-sizing: border-box;
}
.feature-card {
padding: 1.75rem;
@@ -751,6 +755,8 @@ onUnmounted(() => {
border-radius: 16px;
transition: all 0.2s ease;
cursor: default;
box-sizing: border-box;
min-width: 0;
}
.feature-card:hover {
transform: translateY(-4px);
@@ -800,6 +806,8 @@ onUnmounted(() => {
border-radius: 20px;
padding: 2.5rem;
box-shadow: var(--vp-shadow-2);
box-sizing: border-box;
max-width: 100%;
}
.cadence-header { display: flex; justify-content: space-between; align-items: center; }
.cadence-label {
@@ -835,7 +843,14 @@ onUnmounted(() => {
}
.tick-node.active { border-color: var(--vp-c-brand-1); background: var(--vp-c-brand-1); }
.tick-node.blocked { background: #ef4444; border-color: #ef4444; }
.pipeline-flow { display: flex; justify-content: space-between; margin-bottom: 3rem; }
.pipeline-flow {
display: flex;
justify-content: space-between;
margin-bottom: 3rem;
max-width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
}
.stage-node { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; opacity: 0.4; transition: all 0.5s; }
.stage-node.active, .stage-node.done { opacity: 1; }
.stage-badge { min-height: 24px; margin-bottom: 0.5rem; }
@@ -1281,15 +1296,27 @@ onUnmounted(() => {
* ============================================ */
/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.hero-container { gap: 1.5rem; }
@media (max-width: var(--bp-md)) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.hero-container {
gap: 1.5rem;
padding: 0 1.5rem;
}
.hero-title { font-size: 2.25rem; }
.section-container { padding: 0 1.5rem; }
.section-container {
padding: 0 1.5rem;
max-width: 100%;
}
.pipeline-flow {
gap: 1rem;
}
}
/* Mobile (< 768px) */
@media (max-width: 768px) {
@media (max-width: var(--bp-sm)) {
/* Hero Section - add extra padding-top to clear fixed nav (56px) */
.hero-section {
padding: 4.5rem 0 2rem;
@@ -1373,7 +1400,6 @@ onUnmounted(() => {
padding: 1.25rem;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.pipeline-flow {
flex-direction: column;
@@ -1389,7 +1415,7 @@ onUnmounted(() => {
.law-content, .log-content { padding: 1rem; font-size: 0.8rem; min-height: 60px; }
/* JSON Section */
.json-section { padding: 0; overflow-x: hidden; }
.json-section { padding: 0; }
.json-grid {
grid-template-columns: 1fr;
text-align: center;
@@ -1455,7 +1481,7 @@ onUnmounted(() => {
}
/* Small Mobile (< 480px) */
@media (max-width: 480px) {
@media (max-width: var(--bp-xs)) {
.hero-title { font-size: 1.5rem; }
.hero-actions { flex-direction: column; width: 100%; }
.hero-actions .btn-primary,

5
docs/.vitepress/theme/layouts/Layout.vue
View File

@@ -196,13 +196,12 @@ onBeforeUnmount(() => {
/* Container queries in mobile.css provide additional responsiveness */
/* Mobile-specific styles */
@media (max-width: 768px) {
@media (max-width: var(--bp-sm)) {
.hero-extensions {
margin-top: 1rem;
padding: 0 12px;
max-width: 100vw;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.hero-stats {

3
docs/.vitepress/theme/styles/custom.css
View File

@@ -86,12 +86,10 @@
padding: 0 !important;
margin: 0 !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
.Layout:has(.pro-home) {
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Ensure VPNav doesn't cause overflow */
@@ -113,7 +111,6 @@
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}

2
docs/.vitepress/theme/styles/demo.css
View File

@@ -35,7 +35,7 @@
}
/* Responsive design */
@media (max-width: 768px) {
@media (max-width: var(--bp-sm)) {
.demo-header {
flex-direction: column;
align-items: flex-start;

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;
}

12
docs/.vitepress/theme/styles/variables.css
View File

@@ -143,9 +143,15 @@
--vp-z-index-toast: 200;
/* Responsive Breakpoints (VitePress standard) */
--bp-mobile: 768px; /* Mobile: < 768px */
--bp-tablet: 1024px; /* Tablet: 768px - 1024px */
--bp-desktop: 1440px; /* Desktop: > 1024px, large: > 1440px */
--bp-xs: 480px; /* Extra Small: < 480px */
--bp-sm: 768px; /* Small (Mobile): < 768px */
--bp-md: 1024px; /* Medium (Tablet): 768px - 1024px */
--bp-lg: 1440px; /* Large (Desktop): > 1024px, extra large: > 1440px */
/* Legacy aliases for backward compatibility */
--bp-mobile: var(--bp-sm);
--bp-tablet: var(--bp-md);
--bp-desktop: var(--bp-lg);
/* Container Query Breakpoints
* Aligned with media query breakpoints for consistency