diff --git a/src/components/admin/CourseComponents/CourseAnalysis.vue b/src/components/admin/CourseComponents/CourseAnalysis.vue
new file mode 100644
index 0000000..221f0f5
--- /dev/null
+++ b/src/components/admin/CourseComponents/CourseAnalysis.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <h1>课程分析</h1>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+
+<style scoped>
+        
+</style>
diff --git a/src/components/admin/CourseComponents/CourseCategory.vue b/src/components/admin/CourseComponents/CourseCategory.vue
new file mode 100644
index 0000000..b6734a4
--- /dev/null
+++ b/src/components/admin/CourseComponents/CourseCategory.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h1>课程分类</h1>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+
+<style scoped>
+body{
+    background-color: #ffffff;
+    width: 1920px;
+    height: 1793px;
+}
+        
+</style>
diff --git a/src/components/admin/CourseComponents/MaterialCategory.vue b/src/components/admin/CourseComponents/MaterialCategory.vue
new file mode 100644
index 0000000..1c9604c
--- /dev/null
+++ b/src/components/admin/CourseComponents/MaterialCategory.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <h1>资料分类</h1>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+
+<style scoped>
+        
+</style>
diff --git a/src/components/admin/CourseManagement.vue b/src/components/admin/CourseManagement.vue
new file mode 100644
index 0000000..410e7c2
--- /dev/null
+++ b/src/components/admin/CourseManagement.vue
@@ -0,0 +1,114 @@
+<template>
+    <div class="course-management-container">
+        <!-- 左侧导航栏 -->
+         <div class="nav-container">
+            <router-link to="/admin/course-management" class="nav-item">
+                <span>全部课程</span><i>(10)</i>
+                <div class="icon-container">
+                    <span class="icon icon-status"></span>
+                    <span class="icon icon-status"></span>
+                    <span class="icon icon-status"></span>
+                </div>
+            </router-link>
+            <div class="sub-nav-container">
+                <router-link to="/admin/course-management/course-category" class="nav-item">
+                    <span>课程分类</span>
+                    <div class="icon-container">
+                        <span class="icon icon-status"></span>
+                        <span class="icon icon-status"></span>
+                        <span class="icon icon-status"></span>
+                    </div>
+                </router-link>
+                <router-link to="/admin/course-management/material-category" class="nav-item">
+                    <span>资料分类</span>
+                    <div class="icon-container">
+                        <span class="icon icon-status"></span>
+                        <span class="icon icon-status"></span>
+                        <span class="icon icon-status"></span>
+                    </div>
+                </router-link>
+                <router-link to="/admin/course-management/course-analysis" class="nav-item">
+                    <span>课程分析</span>
+                    <div class="icon-container">
+                        <span class="icon icon-status"></span>
+                        <span class="icon icon-status"></span>
+                        <span class="icon icon-status"></span>
+
+                    </div>
+                </router-link>
+            </div>
+         </div>
+
+        <!-- 右侧内容区域 -->
+        <div class="content-container">
+            <router-view></router-view>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+
+<style scoped>
+.course-management-container{
+    display: flex;
+}
+.nav-container{
+    margin-top: 30px;
+    width: 266px;
+}
+.sub-nav-container{
+    margin-left: 20px;
+}
+.nav-container .nav-item{
+    width: 240px;
+    height: 54px;
+    margin-left: 13px;
+    margin-top: 15px;
+    margin-bottom: 13px;
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    border-radius: 8px;
+    background-color: #f5f7fa;
+    color: #333;
+    text-decoration: none;
+}
+.nav-container .nav-item:hover{
+    background-color: #e6f7ff;
+}
+.nav-container .nav-item span{
+    margin-right: 8px;
+}
+.nav-container .nav-item i{
+    font-style: normal;
+    color: #66b7e3;
+    margin-right: 10px;
+}
+.icon-container{
+    display: flex;
+    margin-left: auto;
+}
+.icon.icon-status{
+    width: 16px;
+    height: 16px;
+    background-image: url('../../../public/images/icon/top.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: inline-block;
+    margin-left: 8px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.nav-item:hover .icon.icon-status{
+    opacity: 1;
+}
+.content-container{
+    flex: 1;
+    padding: 20px;
+    min-height: 100vh;
+    box-sizing: border-box;
+}
+</style>
diff --git a/src/components/admin/MyResources.vue b/src/components/admin/MyResources.vue
new file mode 100644
index 0000000..eb74f40
--- /dev/null
+++ b/src/components/admin/MyResources.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <h1>我的资源</h1>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+
+<style scoped>
+        
+</style>
diff --git a/src/components/admin/PersonalCenter.vue b/src/components/admin/PersonalCenter.vue
new file mode 100644
index 0000000..775e45b
--- /dev/null
+++ b/src/components/admin/PersonalCenter.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <h1>个人中心</h1>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+
+<style scoped>
+        
+</style>
diff --git a/src/components/admin/StudentManagement.vue b/src/components/admin/StudentManagement.vue
new file mode 100644
index 0000000..1c02a1e
--- /dev/null
+++ b/src/components/admin/StudentManagement.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <h1>学员管理</h1>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+
+<style scoped>
+        
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 04a7d23..77c6d07 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -26,7 +26,88 @@ import SpecialTraining from '@/views/SpecialTraining.vue'
 import SpecialTrainingDetail from '@/views/SpecialTrainingDetail.vue'
 import HelpCenter from '@/views/HelpCenter.vue'
 
+// 管理员路由
+import AdminDashboard from '@/views/admin/AdminDashboard.vue'
+import PersonalCenter from '@/components/admin/PersonalCenter.vue'
+import CourseManagement from '@/components/admin/CourseManagement.vue'
+import MyResources from '@/components/admin/MyResources.vue'
+import StudentManagement from '@/components/admin/StudentManagement.vue'
+// 课程管理子路由组件
+import CourseCategory from '@/components/admin/CourseComponents/CourseCategory.vue'
+import MaterialCategory from '@/components/admin/CourseComponents/MaterialCategory.vue'
+import CourseAnalysis from '@/components/admin/CourseComponents/CourseAnalysis.vue'
+
+
 const routes: RouteRecordRaw[] = [
+  {
+    path: '/admin',
+    name: 'AdminDashboard',
+    component: AdminDashboard,
+    meta: {
+      title: '管理后台',
+      requiresAuth: true
+    },
+    children: [
+      {
+        path: 'personal-center',
+        name: 'PersonalCenter',
+        component: PersonalCenter,
+        meta: {
+          title: '个人中心'
+        }
+      },
+      {
+        path: 'course-management',
+        name: 'CourseManagement',
+        component: CourseManagement,
+        meta: {
+          title: '课程管理'
+        },
+        children: [
+          {
+            path: 'course-category',
+            name: 'CourseCategory',
+            component: CourseCategory,
+            meta: {
+              title: '课程分类'
+            }
+          },
+          {
+            path: 'material-category',
+            name: 'MaterialCategory',
+            component: MaterialCategory,
+            meta: {
+              title: '资料分类'
+            }
+          },
+          {
+            path: 'course-analysis',
+            name: 'CourseAnalysis',
+            component: CourseAnalysis,
+            meta: {
+              title: '课程分析'
+            }
+          }
+        ]
+      },
+      {
+        path: 'my-resources',
+        name: 'MyResources',
+        component: MyResources,
+        meta: {
+          title: '我的资源'
+        }
+      },
+      {
+        path: 'student-management',
+        name: 'StudentManagement',
+        component: StudentManagement,
+        meta: {
+          title: '学员管理'
+        }
+      }
+    ]
+  },
   {
     path: '/help-center',
     name: 'HelpCenter',
@@ -229,7 +310,8 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/views/NotFound.vue'),
     meta: {
       title: '页面未找到'
-    }
+    },
+    
   }
 ]
 
diff --git a/src/views/admin/AdminDashboard.vue b/src/views/admin/AdminDashboard.vue
new file mode 100644
index 0000000..05a6f97
--- /dev/null
+++ b/src/views/admin/AdminDashboard.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="admin-dashboard">
+    <!-- 顶部图片 -->
+     <div class="top-image-container">
+        <img src="https://picsum.photos/500/200" alt="顶部图片" class="top-image">
+     </div>
+
+    <div class="main-content">
+      <!-- 侧边栏 -->
+      <div class="sidebar-container">
+          <!-- 头像 -->
+           <div class="avatar-container">
+              <img src="https://picsum.photos/200/200" alt="头像" class="avatar">
+              <div class="avatar-text">
+                  用户昵称~
+              </div>
+           </div>
+
+           <!-- 导航栏 -->
+            <div class="nav-container">
+              <router-link to="/admin/course-management" class="nav-item" :class="{ active: activeNavItem === 0 }" @click="setActiveNavItem(0)">
+                  <img src="https://picsum.photos/200/200" alt="">
+                  <span>课程管理</span>
+              </router-link>
+              <router-link to="/admin/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }" @click="setActiveNavItem(1)">
+                  <img src="https://picsum.photos/200/200" alt="">
+                  <span>学员管理</span>
+              </router-link>
+              <router-link to="/admin/my-resources" class="nav-item" :class="{ active: activeNavItem === 2 }" @click="setActiveNavItem(2)">
+                  <img src="https://picsum.photos/200/200" alt="">
+                  <span>我的资源</span>
+              </router-link>
+              <router-link to="/admin/personal-center" class="nav-item" :class="{ active: activeNavItem === 3 }" @click="setActiveNavItem(3)">
+                  <img src="https://picsum.photos/200/200" alt="">
+                  <span>个人中心</span>
+              </router-link>
+            </div>
+      </div>
+
+      <!-- 右侧路由视图 -->
+      <div class="router-view-container">
+        <!-- 面包屑 -->
+        <div class="breadcrumb">
+            <span class="breadcrumb-separator">|</span>
+            <n-breadcrumb>
+                <n-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">
+                    {{ item.title }}
+                </n-breadcrumb-item>
+            </n-breadcrumb>
+        </div>
+        <router-view></router-view>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const width = window.innerWidth;
+const height = window.innerHeight;
+console.log(`当前屏幕宽度: ${width}px, 高度: ${height}px`);
+
+// 添加导航项激活状态管理
+const activeNavItem = ref(0);
+const route = useRoute();
+
+const setActiveNavItem = (index: number) => {
+  activeNavItem.value = index;
+}
+
+// 动态生成面包屑
+const breadcrumbItems = computed(() => {
+  // 获取当前路由的matched数组
+  const matchedRoutes = route.matched;
+  
+  // 处理matchedRoutes，过滤掉'管理后台'并生成面包屑项
+  return matchedRoutes
+    .filter(item => item.meta.title !== '管理后台')
+    .map(item => ({
+      title: item.meta.title || '未知页面',
+      path: item.path
+    }));
+});
+
+// 监听路由变化，更新激活的导航项
+onMounted(() => {
+  // 初始设置
+  updateActiveNavItem();
+});
+
+// 使用watch监听路由变化
+watch(route, (newRoute) => {
+  updateActiveNavItem();
+});
+
+// 更新激活的导航项
+const updateActiveNavItem = () => {
+  const path = route.path;
+  if (path.includes('course-management')) {
+    activeNavItem.value = 0;
+  } else if (path.includes('student-management')) {
+    activeNavItem.value = 1;
+  } else if (path.includes('my-resources')) {
+    activeNavItem.value = 2;
+  } else if (path.includes('personal-center')) {
+    activeNavItem.value = 3;
+  }
+}
+
+</script>
+
+<style scoped>
+.top-image-container {
+  position: relative;
+  width: 100%;
+  height: 130px;
+  overflow: hidden;
+}
+
+.top-image {
+  width: 1920px;
+  height: 130px;
+  position: absolute;
+  left: 0px;
+  top: 70px;
+  opacity: 100%;
+  object-fit: cover;
+}
+
+.main-content {
+  display: flex;
+}
+
+.sidebar-container{
+    width: 294px;
+    height: calc(100vh - 130px);
+    background: #FFFFFF;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+.avatar-container{
+    height: 230px;
+    position: relative;
+    /* 移除原来的边框 */
+}
+
+/* 添加带间距的横线 */
+.avatar-container::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+    right: 20px;
+    height: 1px;
+    background-color: #E6E6E6;
+}
+.avatar-container img{
+    width: 95px;
+    height: 95px;
+    /* 圆角 */
+    border-radius: 50%;
+    margin-top: 55px;
+    margin-left: 100px;
+    margin-right: 99;
+}
+.avatar-text{
+    margin-left: 98px;
+    height: 31px;
+    font-family: AppleSystemUIFont;
+    font-size: 22px;
+    color: #000000;
+    line-height: 26px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+.nav-container{
+    margin-top: 30px;
+    /* 鼠标变小手 */
+    cursor: pointer;
+
+}
+.nav-container .nav-item{
+    margin-left: 20px;
+    width: 254px;
+    height: 54px;
+    margin-bottom: 20px;
+    /* 圆角 */
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+.nav-container .nav-item:hover {
+    background: rgba(102,183,227,0.05);
+}
+/* 添加激活状态样式 */
+.nav-container .nav-item.active{
+    background: rgba(102,183,227,0.1);
+}
+.nav-container .nav-item img{
+    width: 17px;
+    height: 20px;
+    margin-left: 50px;
+    margin-top: 0;
+    margin-right: 5px;
+}
+.nav-container .nav-item span{
+    width: 80px;
+    height: 28px;
+    font-family: AppleSystemUIFont;
+    font-size: 20px;
+    color: #0C99DA;
+    line-height: 23px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.router-view-container {
+    flex: 1;
+    padding: 20px;
+    background: #F5F7FA;
+    height: calc(100vh - 130px);
+    overflow-y: auto;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.breadcrumb-separator {
+  margin-right: 10px;
+  color: #0C99DA;
+  font-size: 16px;
+}
+</style>