添加AOL路由和UI/UX增强组件

crates/openfang-api/static/css/layout.css

@@ -1,4 +1,5 @@
 /* OpenFang Layout — Grid + Sidebar + Responsive */
+/* Enhanced with UI/UX Pro Max guidelines */
 
 .app-layout {
   display: flex;
@@ -15,7 +16,7 @@
   flex-direction: column;
   flex-shrink: 0;
   transition: width var(--transition-normal);
-  z-index: 100;
+  z-index: var(--z-fixed, 300);
 }
 
 .sidebar.collapsed {
@@ -139,6 +140,7 @@
   border: 1px solid transparent;
   white-space: nowrap;
   font-weight: 500;
+  min-height: 36px; /* Minimum touch target */
 }
 
 .nav-item:hover {
@@ -297,9 +299,11 @@
 /* Touch-friendly tap targets */
 @media (pointer: coarse) {
   .btn { min-height: 44px; min-width: 44px; }
-  .nav-item { min-height: 44px; }
+  .nav-item { min-height: 44px; padding: 12px; }
   .form-input, .form-select, .form-textarea { min-height: 44px; }
   .toggle { min-width: 44px; min-height: 28px; }
+  .tab { min-height: 44px; padding: 12px 16px; }
+  .filter-pill, .wizard-category-pill { min-height: 44px; }
 }
 
 /* Focus mode — hide sidebar for distraction-free chat */
@@ -307,3 +311,206 @@
 .app-layout.focus-mode .sidebar-overlay { display: none; }
 .app-layout.focus-mode .main-content { max-width: 100%; margin-left: 0; }
 .app-layout.focus-mode .mobile-menu-btn { display: none !important; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   UI/UX Pro Max Layout Enhancements
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Z-index scale for consistent layering */
+.sidebar { z-index: var(--z-sticky, 200); }
+.sidebar-overlay { z-index: calc(var(--z-sticky, 200) - 1); }
+.mobile-menu-btn { z-index: var(--z-fixed, 300); }
+
+/* Improved responsive breakpoints */
+/* Extra small devices (phones, 480px and below) */
+@media (max-width: 480px) {
+  .sidebar {
+    width: 100%;
+    max-width: 280px;
+  }
+  .page-header {
+    padding: 12px 16px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .page-header h2 {
+    font-size: 14px;
+  }
+  .stats-row {
+    gap: 8px;
+  }
+  .stat-card, .stat-card-lg {
+    padding: 12px 16px;
+    min-width: unset;
+    flex: 1 1 calc(50% - 4px);
+  }
+  .card-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .overview-grid {
+    grid-template-columns: 1fr;
+  }
+  .modal {
+    margin: 8px;
+    max-height: calc(100vh - 16px);
+    width: calc(100% - 16px);
+  }
+}
+
+/* Small devices (tablets portrait, 481px to 768px) */
+@media (min-width: 481px) and (max-width: 768px) {
+  .card-grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  }
+  .overview-grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  }
+}
+
+/* Medium devices (tablets landscape, 769px to 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .card-grid {
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  }
+  .sidebar {
+    width: 200px;
+  }
+}
+
+/* Large devices (desktops, 1025px to 1400px) */
+@media (min-width: 1025px) and (max-width: 1400px) {
+  .card-grid {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+}
+
+/* Extra large devices (large desktops, 1401px and above) */
+@media (min-width: 1401px) {
+  .card-grid {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  }
+  .overview-grid {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  }
+}
+
+/* Sidebar improvements */
+.sidebar-header {
+  position: sticky;
+  top: 0;
+  background: var(--bg-primary);
+  z-index: 10;
+}
+
+/* Main content area improvements */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+/* Page body scroll improvements */
+.page-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
+  scroll-behavior: smooth;
+  overscroll-behavior: contain;
+}
+
+/* Better keyboard navigation for sidebar */
+.nav-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  background: var(--surface2);
+}
+
+/* Mobile menu button improvements */
+.mobile-menu-btn {
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  z-index: var(--z-fixed, 300);
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-fast);
+}
+.mobile-menu-btn:hover {
+  background: var(--surface2);
+  border-color: var(--border-light);
+}
+.mobile-menu-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Safe area insets for mobile devices */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .input-area {
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  }
+  .sidebar {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* Container query support for responsive components */
+@container (min-width: 400px) {
+  .card-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+}
+
+/* Grid layout improvements */
+.card-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+/* Flexbox utilities */
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1; }
+.flex-grow { flex-grow: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+
+/* Gap utilities */
+.gap-1 { gap: 4px; }
+.gap-2 { gap: 8px; }
+.gap-3 { gap: 12px; }
+.gap-4 { gap: 16px; }
+.gap-6 { gap: 24px; }
+
+/* Padding utilities */
+.p-2 { padding: 8px; }
+.p-3 { padding: 12px; }
+.p-4 { padding: 16px; }
+.px-2 { padding-left: 8px; padding-right: 8px; }
+.px-4 { padding-left: 16px; padding-right: 16px; }
+.py-2 { padding-top: 8px; padding-bottom: 8px; }
+.py-4 { padding-top: 16px; padding-bottom: 16px; }
+
+/* Margin utilities */
+.m-0 { margin: 0; }
+.mt-1 { margin-top: 4px; }
+.mt-2 { margin-top: 8px; }
+.mt-4 { margin-top: 16px; }
+.mb-1 { margin-bottom: 4px; }
+.mb-2 { margin-bottom: 8px; }
+.mb-4 { margin-bottom: 16px; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Width utilities */
+.w-full { width: 100%; }
+.max-w-sm { max-width: 24rem; }
+.max-w-md { max-width: 28rem; }
+.max-w-lg { max-width: 32rem; }
+.max-w-xl { max-width: 36rem; }