feat: Optimize UI layout with fixed navigation and scrollable content

Layout Optimization:
- Fixed navigation bar at the top with sticky positioning
- Main content area now properly scrollable with flex layout
- Improved overall page structure for better UX

 Scrolling Enhancements:
- Added custom scrollbar styling for better visual appeal
- Implemented smooth scrolling behavior across the application
- Optimized scroll areas in ProjectDetails, TemplateManagement, AiClassificationSettings, and ModelList
- Added proper overflow handling for long content lists

 Visual Improvements:
- Beautiful custom scrollbars with hover effects
- Proper height constraints for content areas (calc(100vh-16rem))
- Enhanced scrolling experience with backdrop blur effects
- Added scroll indicators and shadow effects for better UX

 Responsive Design:
- Mobile-optimized scrolling behavior
- Proper touch scrolling on mobile devices
- Adaptive content heights for different screen sizes
- Maintained accessibility with reduced motion support

 Technical Improvements:
- Fixed JSX syntax errors in TemplateManagement and ModelList
- Improved component structure for better maintainability
- Added comprehensive CSS classes for scroll management
- Enhanced performance with optimized overflow handling

All pages now provide a smooth, professional scrolling experience while keeping the navigation always accessible.

apps/desktop/src/styles/design-system.css

@@ -684,3 +684,160 @@
 .modal-z-index.highest {
   z-index: 1200;
 }
+
+/* ===== 全局滚动条优化 ===== */
+
+/* 主内容区域滚动条 */
+main {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+}
+
+main::-webkit-scrollbar {
+  width: 8px;
+}
+
+main::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+main::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.3);
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+main::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.5);
+}
+
+/* 通用滚动条样式 */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.4);
+  border-radius: 3px;
+  transition: background-color 0.2s ease;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.6);
+}
+
+.custom-scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* 隐藏滚动条但保持功能 */
+.scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+/* 平滑滚动 */
+.smooth-scroll {
+  scroll-behavior: smooth;
+}
+
+/* ===== 页面布局优化 ===== */
+
+/* 固定导航栏布局 */
+.app-layout {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.app-header {
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.app-main {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 内容区域优化 */
+.content-container {
+  min-height: 100%;
+  padding: 1rem 1rem 2rem;
+}
+
+@media (min-width: 640px) {
+  .content-container {
+    padding: 1.5rem 1.5rem 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .content-container {
+    padding: 2rem 2rem 4rem;
+  }
+}
+
+/* 滚动区域阴影效果 */
+.scroll-shadow {
+  position: relative;
+}
+
+.scroll-shadow::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 10px;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.scroll-shadow.scrolled::before {
+  opacity: 1;
+}
+
+/* 滚动到底部指示器 */
+.scroll-indicator {
+  position: relative;
+}
+
+.scroll-indicator::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 10px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.scroll-indicator.has-more::after {
+  opacity: 1;
+}