diff --git a/packages/omi-templates/src/pages/education.tsx b/packages/omi-templates/src/pages/education.tsx new file mode 100644 index 000000000..287c1cc58 --- /dev/null +++ b/packages/omi-templates/src/pages/education.tsx @@ -0,0 +1,159 @@ +import { render, signal, tag, Component } from 'omi'; +import '../components/omiu/button'; + +// 分类数据 +const categories = signal([ + { name: '前端开发' }, + { name: '后端开发' }, + { name: 'AI开发' }, + { name: '数据科学' }, + { name: '移动开发' }, +]); + +// 课程数据 +const allCourses = [ + { + title: 'Python编程基础', + date: '2024 / 7 / 1', + duration: '7小时', + description: '学习Python编程基础，包括语法、数据结构和基本算法。', + author: '李明', + price: '￥200', + image: 'http://yywebsite.cn/assets/img/class1.jpg', + authorImage: 'https://omi.cdn-go.cn/admin/latest/home/omi.svg', + category: '后端开发', + }, + { + title: 'Web开发入门', + date: '2024 / 7 / 5', + duration: '4.5小时', + description: '掌握HTML、CSS和JavaScript的基础知识，开始你的Web开发之旅。', + author: '王华', + price: '￥300', + image: 'http://yywebsite.cn/assets/img/class1.jpg', + authorImage: 'https://omi.cdn-go.cn/admin/latest/home/omi.svg', + category: '前端开发', + }, + { + title: '机器学习基础', + date: '2024 / 7 / 10', + duration: '6小时', + description: '了解机器学习的基本概念和应用，使用Python进行实践。', + author: '赵倩', + price: '免费', + image: 'http://yywebsite.cn/assets/img/class1.jpg', + authorImage: 'https://omi.cdn-go.cn/admin/latest/home/omi.svg', + category: 'AI开发', + }, + { + title: '数据分析与可视化', + date: '2024 / 7 / 15', + duration: '8小时', + description: '学习如何使用Python进行数据分析和可视化，包括Pandas和Matplotlib。', + author: '陈浩', + price: '￥250', + image: 'http://yywebsite.cn/assets/img/class2.jpg', + authorImage: 'https://omi.cdn-go.cn/admin/latest/home/omi.svg', + category: '数据科学', + }, + { + title: '前端框架Vue.js', + date: '2024 / 7 / 20', + duration: '10小时', + description: '深入了解Vue.js框架，构建高性能的Web应用。', + author: '刘静', + price: '免费', + image: 'http://yywebsite.cn/assets/img/class3.jpg', + authorImage: 'https://omi.cdn-go.cn/admin/latest/home/omi.svg', + category: '前端开发', + }, +]; + +const courses = signal(allCourses); + +@tag('education-template') +class EducationTemplate extends Component { + + activeCategory: string = "全部"; + // 筛选课程 + filterCourses(category:string) { + if (category === '全部') { + courses.value = allCourses; + } else { + courses.value = allCourses.filter((course) => course.category === category); + } + } + + render() { + return ( + // 分类和课程卡片列表 +
+
+ {/* 分类section */} +
+ {['全部', ...categories.value.map((category) => category.name)].map((category, index) => ( + { + this.activeCategory = category; + this.filterCourses(category); + }} + > + {category} + + ))} +
+ + {/* 课程section*/} +
+ {courses.value.length === 0 ? ( +
+ 暂无相关课程 +
+ ) : ( + courses.value.map((course, index) => ( +
+ Course Image +
+
+ + {course.date} + + + {course.duration} + +
+
+

+ {course.title} +

+

{course.description}

+
+
+
+ Author Image + {course.author} +
+ +
+
+
+ )) + )} +
+
+
+ ); + } +} + +// 渲染组件到页面 +export function EducationPage() { + return ; +} diff --git a/packages/omi-templates/src/routes.tsx b/packages/omi-templates/src/routes.tsx index 4a543ab82..5f1edcb67 100644 --- a/packages/omi-templates/src/routes.tsx +++ b/packages/omi-templates/src/routes.tsx @@ -13,6 +13,8 @@ export const routes = [ createRoute('/', () => import('./pages/home')), createRoute('/about', () => import('./pages/about')), createRoute('/product/:id', () => import('./pages/product')), + createRoute('/education', () => import('./pages/education')), + createRoute('/chat', () => import('./pages/chat')), createRoute('/components', () => import('./pages/components')), createRoute('/questionnaire', () => import('./pages/questionnaire')), diff --git a/packages/omi-templates/src/store.ts b/packages/omi-templates/src/store.ts index fbf677b8b..d028883d9 100644 --- a/packages/omi-templates/src/store.ts +++ b/packages/omi-templates/src/store.ts @@ -58,6 +58,11 @@ export const navbarItems = signal([ path: '/product-docs/zh/getting-started', value: 'product-docs', }, + { + text: '教育课程', + path: '/education', + value: 'education', + }, { text: '组件', path: '/components/button',