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

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

@@ -3073,3 +3073,299 @@ mark.search-highlight {
   overflow-y: auto;
 }
 .flex-col { flex-direction: column; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   UI/UX Pro Max Component Enhancements
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Ensure all interactive elements have cursor-pointer */
+.btn, .nav-item, .tab, .badge[onclick], .filter-pill, .wizard-category-pill,
+.personality-pill, .emoji-grid-item, .file-list-item, .quick-action-card,
+.session-item, .slash-menu-item, .channel-step-item, .wizard-progress-step,
+.install-platform-pill, .copy-btn, .toast, .drop-zone, .suggest-chip {
+  cursor: pointer;
+}
+
+/* Enhanced button states */
+.btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--accent-glow);
+}
+
+/* Button loading state with spinner */
+.btn.loading {
+  position: relative;
+  color: transparent;
+  pointer-events: none;
+}
+.btn.loading::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Ripple effect for buttons and cards */
+.ripple {
+  position: relative;
+  overflow: hidden;
+}
+.ripple::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255,255,255,0.2);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.4s ease, height 0.4s ease;
+}
+.ripple:active::before {
+  width: 200%;
+  height: 200%;
+}
+
+/* Enhanced card hover states with proper transitions */
+.card, .stat-card, .stat-card-lg, .quick-action-card,
+.provider-card, .security-card, .wizard-provider-card, .wizard-template-card {
+  transition: transform 0.2s var(--ease-smooth),
+              box-shadow 0.2s var(--ease-smooth),
+              border-color 0.2s var(--ease-smooth);
+}
+
+/* Card selection state */
+.card.selected, .stat-card.selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-md);
+}
+
+/* Improved focus states for form elements */
+.form-input:focus, .form-select:focus, .form-textarea:focus,
+.search-input:focus-within, .chat-search-input:focus,
+.key-input-group input:focus, .file-editor:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* Enhanced modal animations */
+.modal-overlay {
+  animation: fadeIn 0.15s ease;
+}
+.modal {
+  animation: scaleIn 0.2s var(--ease-spring);
+}
+
+/* Toast improvements with better accessibility */
+.toast {
+  cursor: pointer;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.toast:hover {
+  transform: translateX(-4px);
+}
+
+/* Improved badge hover states */
+.badge[onclick]:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* Enhanced toggle switch accessibility */
+.toggle {
+  cursor: pointer;
+}
+.toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--accent-glow);
+}
+
+/* Tab keyboard navigation */
+.tab {
+  cursor: pointer;
+}
+.tab:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+/* Filter pill enhanced states */
+.filter-pill:focus-visible,
+.wizard-category-pill:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Skeleton loading with proper animation */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--surface) 25%,
+    var(--surface2) 37%,
+    var(--surface) 63%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+/* Empty state improvements */
+.empty-state {
+  animation: fadeIn 0.3s ease;
+}
+.empty-state-icon {
+  animation: scaleIn 0.3s var(--ease-spring);
+}
+
+/* Progress bar animation */
+.progress-bar-fill {
+  transition: width 0.3s ease;
+}
+
+/* Typing indicator bounce */
+@keyframes typing-bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+  30% { transform: translateY(-4px); opacity: 1; }
+}
+
+/* Message streaming indicator */
+@keyframes stream-pulse {
+  0%, 100% { border-left-color: var(--accent); box-shadow: -2px 0 8px var(--accent-glow); }
+  50% { border-left-color: var(--accent-dim); box-shadow: none; }
+}
+
+/* Live pulse animation for indicators */
+@keyframes live-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.85); }
+}
+
+/* Spin animation for loading states */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Pulse ring for status indicators */
+@keyframes pulse-ring {
+  0% { box-shadow: 0 0 0 0 currentColor; }
+  70% { box-shadow: 0 0 0 4px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+
+/* Improved dropdown menus */
+.session-dropdown,
+.slash-menu {
+  animation: slideDown 0.15s ease;
+}
+
+/* Dropdown item keyboard navigation */
+.session-item:focus-visible,
+.slash-menu-item:focus-visible {
+  outline: none;
+  background: var(--surface2);
+}
+
+/* Scrollbar hover state */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-light);
+}
+
+/* Selection styling */
+::selection {
+  background: var(--accent);
+  color: var(--bg-primary);
+}
+
+/* Print optimization */
+@media print {
+  .sidebar, .sidebar-overlay, .mobile-menu-btn,
+  .toast-container, .btn, .modal-overlay {
+    display: none !important;
+  }
+  .main-content {
+    margin: 0;
+    max-width: 100%;
+  }
+  body {
+    background: #fff;
+    color: #000;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .card, .modal, .btn, input, select, textarea {
+    border-width: 2px;
+  }
+  .badge {
+    border: 1px solid currentColor;
+  }
+}
+
+/* Touch device optimizations */
+@media (pointer: coarse) {
+  .btn, .nav-item, .tab, .badge[onclick], .toggle,
+  .filter-pill, .wizard-category-pill, .personality-pill {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+
+/* Tooltip styles (for future use) */
+[data-tooltip] {
+  position: relative;
+}
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6px 10px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s, visibility 0.15s;
+  z-index: var(--z-tooltip, 700);
+  box-shadow: var(--shadow-md);
+}
+[data-tooltip]:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Visually hidden but accessible */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}