refactor(router): 重构路由配置并删除无用文件

重构了路由配置文件，更新了路由路径和组件名称，并添加了元数据。删除了不再使用的About.vue文件，同时新增了CoursesPage.vue页面。

+/*
+ * @Date: 2025-03-20 20:36:36
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-20 20:50:41
+ * @FilePath: /mlaj/src/router/index.js
+ * @Description: 文件描述
+ */
 import { createRouter, createWebHistory } from 'vue-router'
 import { createRouter, createWebHistory } from 'vue-router'
 
 
 const routes = [
 const routes = [
   {
   {
     path: '/',
     path: '/',
-    name: 'home',
-    component: () => import('../views/Home.vue')
+    name: 'HomePage',
+    component: () => import('../views/HomePage.vue'),
+    meta: { title: 'HomePage' },
   },
   },
   {
   {
-    path: '/about',
-    name: 'about',
-    component: () => import('../views/About.vue')
-  }
+    path: '/courses',
+    name: 'Courses',
+    component: () => import('../views/courses/CoursesPage.vue'),
+    meta: { title: 'Courses' },
+  },
+  {
+    path: '/courses/:id',
+    name: 'CourseDetail',
+    component: () => import('../views/courses/CourseDetailPage.vue'),
+    meta: { title: 'CourseDetail' },
+  },
 ]
 ]
 
 
 const router = createRouter({
 const router = createRouter({
   history: createWebHistory(),
   history: createWebHistory(),
-  routes
+  routes,
 })
 })
 
 
 export default router
 export default router

-<script setup>
-import { Button, NavBar, Tabbar, TabbarItem } from 'vant';
-</script>
-
-<template>
-  <div class="min-h-screen flex flex-col bg-gray-100">
-    <van-nav-bar
-      title="关于"
-      left-text="返回"
-      right-text="菜单"
-      left-arrow
-      @click-left="onClickLeft"
-      @click-right="onClickRight"
-    />
-
-    <div class="flex-1 p-4">
-      <div class="bg-white rounded-lg shadow p-4 mb-4">
-        <h2 class="text-xl font-bold mb-2">关于我们</h2>
-        <p class="text-gray-600 mb-4">这是一个示例项目的关于页面，展示了如何使用Vue3、Vite、Vant4和TailwindCSS构建现代化的Web应用。</p>
-        <van-button type="primary" block>了解更多</van-button>
-      </div>
-
-      <div class="grid grid-cols-2 gap-4">
-        <div class="bg-white rounded-lg shadow p-4">
-          <h3 class="text-lg font-semibold mb-2">联系方式</h3>
-          <ul class="text-gray-600">
-            <li>邮箱：example@example.com</li>
-            <li>电话：123-456-7890</li>
-            <li>地址：示例地址</li>
-          </ul>
-        </div>
-        <div class="bg-white rounded-lg shadow p-4">
-          <h3 class="text-lg font-semibold mb-2">版本信息</h3>
-          <ul class="text-gray-600">
-            <li>当前版本：1.0.0</li>
-            <li>更新日期：2024-03-20</li>
-            <li>开源协议：MIT</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <van-tabbar v-model="active">
-      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
-      <van-tabbar-item icon="search">搜索</van-tabbar-item>
-      <van-tabbar-item icon="friends-o">好友</van-tabbar-item>
-      <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
-    </van-tabbar>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      active: 0
-    }
-  },
-  methods: {
-    onClickLeft() {
-      this.$router.back()
-    },
-    onClickRight() {
-      // 处理右侧按钮点击
-    }
-  }
-}
-</script>

 <!--
 <!--
  * @Date: 2025-03-20 19:55:21
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-20 20:26:17
- * @FilePath: /vue-vite/src/views/Home.vue
+ * @LastEditTime: 2025-03-20 20:48:08
+ * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>

+<template>
+  <AppLayout title="课程" :rightContent="rightContent">
+    <div class="pb-16">
+      <!-- Search Bar -->
+      <div class="pb-2">
+        <SearchBar placeholder="搜索" @search="handleSearch" />
+      </div>
+
+      <!-- Featured Course Banner -->
+      <div class="px-4 mb-5">
+        <div class="relative rounded-xl overflow-hidden shadow-lg h-40">
+          <img
+            src="https://cdn.ipadbiz.cn/mlaj/images/featured-course.jpg"
+            alt="传承之道"
+            class="w-full h-full object-cover"
+          />
+          <div
+            class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 flex flex-col justify-end p-4"
+          >
+            <h2 class="text-3xl font-bold text-amber-400 drop-shadow-md">传承之道</h2>
+            <p class="text-xl text-white font-semibold drop-shadow-sm">大理鸡足山游学</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Today's Live -->
+      <div class="px-4 mb-4">
+        <div class="flex items-center mb-2">
+          <h2 class="font-medium">今日直播</h2>
+          <div
+            class="ml-2 flex items-center bg-red-100 text-red-700 rounded px-2 py-1 text-xs"
+          >
+            <span class="font-medium">{{ hours }}</span>
+            <span class="mx-1">:</span>
+            <span class="font-medium">{{ minutes }}</span>
+            <span class="mx-1">:</span>
+            <span class="font-medium">00</span>
+          </div>
+        </div>
+
+        <!-- Live Stream Cards -->
+        <div class="grid grid-cols-2 gap-4">
+          <LiveStreamCard
+            v-for="stream in liveStreams"
+            :key="stream.id"
+            :stream="stream"
+          />
+        </div>
+      </div>
+
+      <!-- Value Online Courses -->
+      <div class="px-4 mb-4">
+        <div class="flex justify-between items-center mb-2">
+          <h2 class="font-medium">超值线上课</h2>
+          <router-link to="#" class="text-xs text-gray-500 flex items-center">
+            更多
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-3 w-3 ml-1"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </router-link>
+        </div>
+
+        <!-- Course Cards -->
+        <div class="space-y-4">
+          <CourseCard v-for="course in courses" :key="course.id" :course="course" />
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup lang="jsx">
+import { computed, defineComponent, h } from "vue";
+import AppLayout from "@/components/layout/AppLayout.vue";
+import SearchBar from "@/components/ui/SearchBar.vue";
+import FrostedGlass from "@/components/ui/FrostedGlass.vue";
+import CourseCard from "@/components/ui/CourseCard.vue";
+import LiveStreamCard from "@/components/ui/LiveStreamCard.vue";
+import { featuredCourse, liveStreams, courses } from "@/utils/mockData";
+
+// Search handler
+const handleSearch = (query) => {
+  console.log("Searching for:", query);
+  // Would implement actual search logic here
+};
+
+// Current time for the countdown timer
+const todayDate = new Date();
+const formattedTime = featuredCourse.liveTime.split(":");
+const hours = computed(() => formattedTime[0]);
+const minutes = computed(() => formattedTime[1]);
+
+// Right content component
+
+const RightContent = defineComponent({
+  setup() {
+    return () => (
+      <button class="p-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 text-gray-700"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+          />
+        </svg>
+      </button>
+    );
+  },
+});
+
+const rightContent = h(RightContent);
+</script>