+
+
+
+ 探索课程分类
+
+
+ 选择你感兴趣的方向，开启学习之旅
+
+
+
+ {displayedCategories.map((category, index) => {
+ const categoryColor = stringToColor(category.name);
+ const isHovered = hoveredIndex === index;
+
+ return (
+
+ {courseCategories.length > 8 && (
+ handleMouseEnter(index)}
+ onMouseLeave={handleMouseLeave}
+ role="button"
+ tabIndex={0}
+ aria-label={`查看${category.name}课程类别`}
+ >
+
+
+
+
+
+ );
+ })}
+
+
+ {category.description}
+
+
+
+
+ {category.name}
+
+
+ {category.count} 门课程
+
+
+
+ 了解更多
+
+ →
+
+
+
+
+
+ )}
+
+
+
+ {filteredCourses.length >= visibleCourses && (
+
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+ {categories.map((category) => (
+ setSelectedCategory(category)}
+ className={`px-4 py-2 text-base cursor-pointer hover:scale-105 transform transition-all duration-300 ${selectedCategory === category
+ ? 'shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)]'
+ : 'hover:shadow-md'
+ }`}
+ >
+ {category}
+
+ ))}
+
+
+
+ {displayedCourses.map((course) => (
+
+
+
+
+ }
+ >
+
+
+
+ )}
+
+
+ {course.title}
+
+
+
+ ))}
+
+
+ {course.category}
+
+
+ {course.level}
+
+
+
+
+ {course.instructor}
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ navigate('/courses')}
+ className="cursor-pointer tracking-widest text-gray-500 hover:text-primary font-medium flex items-center gap-2 transition-all duration-300 ease-in-out"
+ >
+ 查看更多
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+ 
+
+
+
+ {teacher.description}
+
+
+
+
+
+ {teacher.name}
+
+
+ {teacher.title}
+
+
+
+
+
+
+ 课程
+
+
+
+
+ 学员
+
+
+
+
+ 评分
+
+
+
+
+
+
+
+ 优秀讲师
+
+
+ 业界专家实战分享，传授独家经验
+
+
+
+
+
+ {featuredTeachers.map((teacher, index) => (
+
+
+
+
+
+
+
+ {carouselItems.map((item, index) => (
+
+
+ {/* Navigation Buttons */}
+
+
+
+
+ {/* Stats Container */}
+
+
+
+
+
+ {/* Content Container */}
+
+ ))}
+
+
+
+
+ {item.title}
+
+
+ {item.desc}
+
+
+
+
+
+
+ {platformStats.map((stat, index) => (
+
+
+
+ ))}
+
+ {stat.icon}
+
+
+ {stat.value}
+
+ {stat.label}
+
-
- );
+const HomePage = () => {
+ const mockCourses = [
+ {
+ id: 1,
+ title: 'Python 零基础入门',
+ instructor: '张教授',
+ students: 12000,
+ rating: 4.8,
+ level: '入门',
+ duration: '36小时',
+ category: '编程语言',
+ progress: 0,
+ thumbnail: '/images/course1.jpg',
+ },
+ {
+ id: 2,
+ title: '数据结构与算法',
+ instructor: '李教授',
+ students: 8500,
+ rating: 4.9,
+ level: '进阶',
+ duration: '48小时',
+ category: '计算机基础',
+ progress: 35,
+ thumbnail: '/images/course2.jpg',
+ },
+ {
+ id: 3,
+ title: '前端开发实战',
+ instructor: '王教授',
+ students: 10000,
+ rating: 4.7,
+ level: '中级',
+ duration: '42小时',
+ category: '前端开发',
+ progress: 68,
+ thumbnail: '/images/course3.jpg',
+ },
+ {
+ id: 4,
+ title: 'Java企业级开发',
+ instructor: '刘教授',
+ students: 9500,
+ rating: 4.6,
+ level: '高级',
+ duration: '56小时',
+ category: '编程语言',
+ progress: 0,
+ thumbnail: '/images/course4.jpg',
+ },
+ {
+ id: 5,
+ title: '人工智能基础',
+ instructor: '陈教授',
+ students: 11000,
+ rating: 4.9,
+ level: '中级',
+ duration: '45小时',
+ category: '人工智能',
+ progress: 20,
+ thumbnail: '/images/course5.jpg',
+ },
+ {
+ id: 6,
+ title: '大数据分析',
+ instructor: '赵教授',
+ students: 8000,
+ rating: 4.8,
+ level: '进阶',
+ duration: '50小时',
+ category: '数据科学',
+ progress: 45,
+ thumbnail: '/images/course6.jpg',
+ },
+ {
+ id: 7,
+ title: '云计算实践',
+ instructor: '孙教授',
+ students: 7500,
+ rating: 4.7,
+ level: '高级',
+ duration: '48小时',
+ category: '云计算',
+ progress: 15,
+ thumbnail: '/images/course7.jpg',
+ },
+ {
+ id: 8,
+ title: '移动应用开发',
+ instructor: '周教授',
+ students: 9000,
+ rating: 4.8,
+ level: '中级',
+ duration: '40小时',
+ category: '移动开发',
+ progress: 0,
+ thumbnail: '/images/course8.jpg',
+ },
+ ];
+
+ return (
+
-
- {/*
-
*/}
- {/*
+
+ );
};
-export default HomePage;
+export default HomePage;
\ No newline at end of file
diff --git a/apps/web/src/app/main/layout/MainFooter.tsx b/apps/web/src/app/main/layout/MainFooter.tsx
new file mode 100644
index 0000000..1356335
--- /dev/null
+++ b/apps/web/src/app/main/layout/MainFooter.tsx
@@ -0,0 +1,68 @@
+import { CloudOutlined, FileSearchOutlined, HomeOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
+import { Layout, Typography } from 'antd';
+export function MainFooter() {
+ return (
+
+ );
+}
diff --git a/apps/web/src/app/main/layout/MainHeader.tsx b/apps/web/src/app/main/layout/MainHeader.tsx
new file mode 100644
index 0000000..d7d089b
--- /dev/null
+++ b/apps/web/src/app/main/layout/MainHeader.tsx
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { Input, Layout, Avatar, Button, Dropdown } from 'antd';
+import { SearchOutlined, UserOutlined } from '@ant-design/icons';
+import { useAuth } from '@web/src/providers/auth-provider';
+import { useNavigate } from 'react-router-dom';
+import { UserMenu } from './UserMenu';
+import { NavigationMenu } from './NavigationMenu';
+
+const { Header } = Layout;
+
+export function MainHeader() {
+ const [searchValue, setSearchValue] = useState('');
+ const { isAuthenticated, user } = useAuth();
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+ navigate('/')}
+ className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer"
+ >
+ 烽火慕课
+
+
+
+ {(user?.showname || user?.username || '')[0]?.toUpperCase()}
+
+
+ ) : (
+
+ )}
+
+
+ }
+ placeholder="搜索课程"
+ className="w-72 rounded-full"
+ value={searchValue}
+ onChange={(e) => setSearchValue(e.target.value)}
+ />
+
+ {isAuthenticated ? (
+
+ My Course Page
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/app/main/self/profiles/page.tsx b/apps/web/src/app/main/self/profiles/page.tsx
new file mode 100644
index 0000000..70ac75b
--- /dev/null
+++ b/apps/web/src/app/main/self/profiles/page.tsx
@@ -0,0 +1,3 @@
+export default function ProfilesPage() {
+ return <>Profiles
+}
\ No newline at end of file
diff --git a/apps/web/src/components/layout/main/MainLayout.tsx b/apps/web/src/components/layout/main/MainLayout.tsx
deleted file mode 100644
index 7134d37..0000000
--- a/apps/web/src/components/layout/main/MainLayout.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useState, useEffect, useRef, ReactNode } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { TopNavBar } from '@web/src/components/layout/main/top-nav-bar';
-import { navItems, notificationItems } from '@web/src/components/layout/main/nav-data';
-import { Sidebar } from '@web/src/components/layout/main/side-bar';
-import { Outlet } from 'react-router-dom';
-
-
-export function MainLayout() {
- const [sidebarOpen, setSidebarOpen] = useState(true);
- const [notifications, setNotifications] = useState(3);
- const [recentSearches] = useState([
- 'React Fundamentals',
- 'TypeScript Advanced',
- 'Tailwind CSS Projects',
- ]);
-
- return (
-
-
- {sidebarOpen &&
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/apps/web/src/components/layout/main/nav-data.tsx b/apps/web/src/components/layout/main/nav-data.tsx
deleted file mode 100644
index 1f2bea1..0000000
--- a/apps/web/src/components/layout/main/nav-data.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { NavItem } from '@nice/client';
-import {
- HomeIcon,
- BookOpenIcon,
- UserGroupIcon,
- Cog6ToothIcon,
- BellIcon,
- HeartIcon,
- AcademicCapIcon,
- UsersIcon,
- PresentationChartBarIcon
-} from '@heroicons/react/24/outline';
-
-export const navItems: NavItem[] = [
- { icon:
- setShowNotifications(!showNotifications)}
- >
-
-
-
- {showNotifications && (
-
-
- );
-}
\ No newline at end of file
diff --git a/apps/web/src/components/layout/main/notifications-panel.tsx b/apps/web/src/components/layout/main/notifications-panel.tsx
deleted file mode 100644
index 43ef2b4..0000000
--- a/apps/web/src/components/layout/main/notifications-panel.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ClockIcon } from '@heroicons/react/24/outline';
-import { motion } from 'framer-motion';
-
-interface NotificationsPanelProps {
- notificationItems: Array<{
- icon: React.ReactNode;
- title: string;
- description: string;
- time: string;
- isUnread: boolean;
- }>;
-}
-
-export function NotificationsPanel({ notificationItems }: NotificationsPanelProps) {
- return (
-
-
-
-
-
- Notifications
- - Mark all as read - -
- {notificationItems.map((item, index) => (
-
-
- ))}
-
-
-
-
-
- {item.icon}
-
-
-
- {item.title}
-{item.description}
-
-
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/apps/web/src/components/layout/main/search-dropdown.tsx b/apps/web/src/components/layout/main/search-dropdown.tsx
deleted file mode 100644
index 60ed49f..0000000
--- a/apps/web/src/components/layout/main/search-dropdown.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { motion } from 'framer-motion';
-
-interface SearchDropdownProps {
- searchFocused: boolean;
- searchQuery: string;
- recentSearches: string[];
- setSearchQuery: (query: string) => void;
-}
-
-export function SearchDropdown({
- searchFocused,
- searchQuery,
- recentSearches,
- setSearchQuery
-}: SearchDropdownProps) {
- if (!searchFocused) return null;
-
- return (
-
- setSearchQuery('')}
- >
-
- )}
-
-
-
- {searchQuery && (
- Recent Searches
-
- {recentSearches.map((search, index) => (
- setSearchQuery(search)}
- >
-
- ))}
-
-
-
-
-
- )}
-
- {navItems.map((item, index) => {
- const isActive = location.pathname === item.path;
- return (
- {
- navigate(item.path)
- }}
- className={`flex items-center gap-3 w-full p-3 rounded-lg transition-colors
- ${isActive
- ? 'bg-blue-50 text-blue-600'
- : 'text-gray-700 hover:bg-blue-50 hover:text-blue-600'
- }`}
- >
- {item.icon}
- {item.label}
-
- );
- })}
-
-
- setShowMenu(!showMenu)}
- className="w-10 h-10" // 移除了边框相关的类
- >
-
-
-
- {showMenu && (
-
-
- )}
-
-
- );
-}
\ No newline at end of file
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index d623ec5..95e81a7 100755
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -16,7 +16,7 @@
}
.ag-custom-dragging-class {
- @apply border-b-2 border-primaryHover;
+ @apply border-b-2 border-blue-200;
}
.ant-popover-inner {
@@ -71,7 +71,7 @@
border-radius: 10px;
border: 2px solid #f0f0f0;
- @apply hover:bg-primaryHover transition-all bg-gray-400 ease-in-out rounded-full;
+ @apply hover:bg-blue-200 transition-all bg-gray-400 ease-in-out rounded-full;
}
/* 鼠标悬停在滚动块上 */
@@ -123,4 +123,4 @@
.custom-table .ant-table-tbody>tr:last-child>td {
border-bottom: none;
/* 去除最后一行的底部边框 */
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 30bcd56..f55410b 100755
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -13,7 +13,6 @@ import RoleAdminPage from "../app/admin/role/page";
import WithAuth from "../components/utils/with-auth";
import LoginPage from "../app/login";
import BaseSettingPage from "../app/admin/base-setting/page";
-import { MainLayout } from "../components/layout/main/MainLayout";
import StudentCoursesPage from "../app/main/courses/student/page";
import InstructorCoursesPage from "../app/main/courses/instructor/page";
import HomePage from "../app/main/home/page";
@@ -23,6 +22,8 @@ import CourseContentForm from "../components/models/course/editor/form/CourseCon
import { CourseGoalForm } from "../components/models/course/editor/form/CourseGoalForm";
import CourseSettingForm from "../components/models/course/editor/form/CourseSettingForm";
import CourseEditorLayout from "../components/models/course/editor/layout/CourseEditorLayout";
+import { MainLayout } from "../app/main/layout/MainLayout";
+import CoursesPage from "../app/main/courses/page";
interface CustomIndexRouteObject extends IndexRouteObject {
name?: string;
@@ -61,6 +62,16 @@ export const routes: CustomRouteObject[] = [
index: true,
element:
-
-
- {user?.showname}
-{user?.username}
-
- {menuItems.map((item, index) => (
-
- {item.icon}
- {item.label}
-
- ))}
-
-