diff --git a/gym-manage-web/src/api/groupCourse.api.ts b/gym-manage-web/src/api/groupCourse.api.ts
new file mode 100644
index 0000000..379d8d9
--- /dev/null
+++ b/gym-manage-web/src/api/groupCourse.api.ts
@@ -0,0 +1,245 @@
+import request from '@/utils/request'
+
+// ==================== 团课课程 ====================
+
+export interface GroupCourse {
+  id?: number
+  courseName: string
+  coachId?: number
+  courseType?: number
+  startTime: string
+  endTime: string
+  maxMembers?: number
+  currentMembers?: number
+  status?: string
+  actualStartTime?: string
+  actualEndTime?: string
+  location?: string
+  coverImage?: string
+  description?: string
+  storedValueAmount?: number
+  qrCodePath?: string
+  createBy?: string
+  updateBy?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+export interface GroupCoursePageRequest {
+  page: number
+  size: number
+  keyword?: string
+  status?: string
+  courseType?: number
+  coachId?: number
+  startTime?: string
+  endTime?: string
+  sortBy?: string
+  sortOrder?: 'asc' | 'desc'
+}
+
+export interface PageResponse<T> {
+  content: T[]
+  totalElements: number
+  totalPages: number
+  size: number
+  number: number
+  first: boolean
+  last: boolean
+}
+
+export const groupCourseApi = {
+  getAll: () =>
+    request.get<GroupCourse[]>('/groupCourse/list'),
+
+  getPage: (params: GroupCoursePageRequest) =>
+    request.post<PageResponse<GroupCourse>>('/groupCourse/page', params),
+
+  getById: (id: number) =>
+    request.get<GroupCourse>(`/groupCourse/${id}`),
+
+  getDetailById: (id: number) =>
+    request.get<GroupCourse>(`/groupCourse/${id}/detail`),
+
+  create: (data: GroupCourse) =>
+    request.post<GroupCourse>('/groupCourse', data),
+
+  update: (id: number, data: GroupCourse) =>
+    request.put<GroupCourse>(`/groupCourse/${id}`, data),
+
+  delete: (id: number) =>
+    request.delete<void>(`/groupCourse/${id}`),
+
+  cancel: (id: number) =>
+    request.post<void>(`/groupCourse/${id}/cancel`),
+
+  search: (params: any) =>
+    request.post<GroupCourse[]>('/groupCourse/search', params),
+}
+
+// ==================== 团课类型 ====================
+
+export interface GroupCourseType {
+  id?: number
+  typeName: string
+  baseDifficulty?: number
+  description?: string
+  category?: string
+  createBy?: string
+  updateBy?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+export const groupCourseTypeApi = {
+  getAll: () =>
+    request.get<GroupCourseType[]>('/groupCourse/types'),
+
+  search: (params: any) =>
+    request.get<GroupCourseType[]>('/groupCourse/types/search', { params }),
+
+  getCategories: () =>
+    request.get<string[]>('/groupCourse/types/categories'),
+
+  getByCategory: (category: string) =>
+    request.get<GroupCourseType[]>(`/groupCourse/types/category/${category}`),
+
+  getById: (id: number) =>
+    request.get<GroupCourseType>(`/groupCourse/types/${id}`),
+
+  create: (data: GroupCourseType) =>
+    request.post<GroupCourseType>('/groupCourse/types', data),
+
+  update: (id: number, data: GroupCourseType) =>
+    request.put<GroupCourseType>(`/groupCourse/types/${id}`, data),
+
+  delete: (id: number) =>
+    request.delete<void>(`/groupCourse/types/${id}`),
+}
+
+// ==================== 团课标签 ====================
+
+export interface CourseLabel {
+  id?: number
+  labelName: string
+  color?: string
+  description?: string
+  createBy?: string
+  updateBy?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+export const courseLabelApi = {
+  getAll: () =>
+    request.get<CourseLabel[]>('/groupCourse/labels'),
+
+  search: (params: any) =>
+    request.get<CourseLabel[]>('/groupCourse/labels/search', { params }),
+
+  getById: (id: number) =>
+    request.get<CourseLabel>(`/groupCourse/labels/${id}`),
+
+  getByTypeId: (typeId: number) =>
+    request.get<CourseLabel[]>(`/groupCourse/types/${typeId}/labels`),
+
+  create: (data: CourseLabel) =>
+    request.post<CourseLabel>('/groupCourse/labels', data),
+
+  update: (id: number, data: CourseLabel) =>
+    request.put<CourseLabel>(`/groupCourse/labels/${id}`, data),
+
+  delete: (id: number) =>
+    request.delete<void>(`/groupCourse/labels/${id}`),
+
+  addLabelsToType: (typeId: number, labelIds: number[]) =>
+    request.post<void>(`/groupCourse/types/${typeId}/labels`, labelIds),
+
+  removeLabelFromType: (typeId: number, labelId: number) =>
+    request.delete<void>(`/groupCourse/types/${typeId}/labels/${labelId}`),
+
+  clearLabelsFromType: (typeId: number) =>
+    request.delete<void>(`/groupCourse/types/${typeId}/labels`),
+}
+
+// ==================== 团课推荐 ====================
+
+export interface GroupCourseRecommend {
+  id?: number
+  courseId: number
+  recommendTitle?: string
+  recommendContent?: string
+  recommendReason?: string
+  priority?: number
+  isActive?: boolean
+  createBy?: string
+  updateBy?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+export const groupCourseRecommendApi = {
+  getAll: () =>
+    request.get<GroupCourseRecommend[]>('/groupCourse/recommend/list'),
+
+  getActive: () =>
+    request.get<GroupCourseRecommend[]>('/groupCourse/recommend/active'),
+
+  getById: (id: number) =>
+    request.get<GroupCourseRecommend>(`/groupCourse/recommend/${id}`),
+
+  getByCourseId: (courseId: number) =>
+    request.get<GroupCourseRecommend[]>(`/groupCourse/recommend/course/${courseId}`),
+
+  create: (data: GroupCourseRecommend) =>
+    request.post<GroupCourseRecommend>('/groupCourse/recommend', data),
+
+  update: (id: number, data: GroupCourseRecommend) =>
+    request.put<GroupCourseRecommend>(`/groupCourse/recommend/${id}`, data),
+
+  delete: (id: number) =>
+    request.delete<void>(`/groupCourse/recommend/${id}`),
+
+  enable: (id: number) =>
+    request.post<void>(`/groupCourse/recommend/${id}/enable`),
+
+  disable: (id: number) =>
+    request.post<void>(`/groupCourse/recommend/${id}/disable`),
+}
+
+// ==================== 团课预约 ====================
+
+export interface GroupCourseBooking {
+  id?: number
+  courseId: number
+  memberId: number
+  memberCardId: number
+  bookingTime?: string
+  status?: string
+  cancelTime?: string
+  courseName?: string
+  courseStartTime?: string
+  courseEndTime?: string
+  location?: string
+  createBy?: string
+  updateBy?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+export const groupCourseBookingApi = {
+  book: (data: GroupCourseBooking) =>
+    request.post<GroupCourseBooking>('/groupCourse/book', data),
+
+  cancel: (bookingId: number) =>
+    request.post<void>(`/groupCourse/booking/${bookingId}/cancel`),
+
+  getByMemberId: (memberId: number) =>
+    request.get<GroupCourseBooking[]>(`/groupCourse/bookings/member/${memberId}`),
+
+  getByCourseId: (courseId: number) =>
+    request.get<GroupCourseBooking[]>(`/groupCourse/bookings/course/${courseId}`),
+
+  getById: (bookingId: number) =>
+    request.get<GroupCourseBooking>(`/groupCourse/bookings/${bookingId}`),
+}
diff --git a/gym-manage-web/src/router/index.ts b/gym-manage-web/src/router/index.ts
index 13b66b8..8840e5d 100644
--- a/gym-manage-web/src/router/index.ts
+++ b/gym-manage-web/src/router/index.ts
@@ -93,6 +93,30 @@ const routes: RouteRecordRaw[] = [
         name: 'ExceptionLog',
         component: () => import('@/views/audit/ExceptionLog.vue'),
         meta: { title: '异常日志' }
+      },
+      {
+        path: 'courses',
+        name: 'GroupCourseManagement',
+        component: () => import('@/views/groupcourse/GroupCourseManagement.vue'),
+        meta: { title: '团课管理' }
+      },
+      {
+        path: 'courses/types',
+        name: 'CourseTypeManagement',
+        component: () => import('@/views/groupcourse/CourseTypeManagement.vue'),
+        meta: { title: '团课类型' }
+      },
+      {
+        path: 'courses/labels',
+        name: 'CourseLabelManagement',
+        component: () => import('@/views/groupcourse/CourseLabelManagement.vue'),
+        meta: { title: '团课标签' }
+      },
+      {
+        path: 'courses/recommend',
+        name: 'CourseRecommendManagement',
+        component: () => import('@/views/groupcourse/CourseRecommendManagement.vue'),
+        meta: { title: '团课推荐' }
       }
     ]
   }
diff --git a/gym-manage-web/src/views/groupcourse/CourseLabelManagement.vue b/gym-manage-web/src/views/groupcourse/CourseLabelManagement.vue
new file mode 100644
index 0000000..1ecc710
--- /dev/null
+++ b/gym-manage-web/src/views/groupcourse/CourseLabelManagement.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="course-label-management">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="search-section">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索标签名称"
+              clearable
+              style="width: 240px"
+              @clear="handleSearch"
+              @keyup.enter="handleSearch"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+            <el-button type="primary" @click="handleSearch">
+              搜索
+            </el-button>
+          </div>
+          <el-button type="primary" @click="handleAdd">
+            新增标签
+          </el-button>
+        </div>
+      </template>
+      <el-table
+        v-loading="loading"
+        :data="dataSource"
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="labelName" label="标签名称" min-width="140">
+          <template #default="{ row }">
+            <el-tag
+              :color="row.color"
+              effect="dark"
+              style="font-weight: 500; font-size: 14px; border-color: transparent;"
+            >
+              {{ row.labelName }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="color" label="颜色" width="100">
+          <template #default="{ row }">
+            <div style="display: flex; align-items: center; gap: 6px;">
+              <span
+                :style="{
+                  display: 'inline-block',
+                  width: '16px',
+                  height: '16px',
+                  borderRadius: '4px',
+                  backgroundColor: row.color,
+                  border: '1px solid #ddd',
+                }"
+              />
+              <span>{{ row.color }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+    >
+      <el-form
+        ref="formRef"
+        :model="formState"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="标签名称" prop="labelName">
+          <el-input v-model="formState.labelName" placeholder="请输入标签名称" />
+        </el-form-item>
+        <el-form-item label="标签颜色" prop="color">
+          <el-color-picker v-model="formState.color" show-alpha />
+          <span style="margin-left: 8px; color: #909399;">{{ formState.color }}</span>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input
+            v-model="formState.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入标签描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleModalOk">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search } from '@element-plus/icons-vue'
+import { courseLabelApi, type CourseLabel } from '@/api/groupCourse.api'
+
+const loading = ref(false)
+const dataSource = ref<CourseLabel[]>([])
+const searchKeyword = ref('')
+
+const modalVisible = ref(false)
+const modalTitle = ref('')
+const formRef = ref()
+const formState = reactive<CourseLabel>({
+  labelName: '',
+  color: '#1890ff',
+  description: '',
+})
+
+const formRules = {
+  labelName: [
+    { required: true, message: '请输入标签名称', trigger: 'blur' },
+    { min: 2, max: 50, message: '标签名称长度在 2 到 50 个字符', trigger: 'blur' },
+  ],
+  color: [{ required: true, message: '请选择标签颜色', trigger: 'change' }],
+}
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    dataSource.value = await courseLabelApi.getAll()
+    if (searchKeyword.value) {
+      dataSource.value = dataSource.value.filter((item) =>
+        item.labelName.toLowerCase().includes(searchKeyword.value.toLowerCase())
+      )
+    }
+  } catch {
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => fetchData()
+
+const handleAdd = () => {
+  modalTitle.value = '新增标签'
+  Object.assign(formState, {
+    id: undefined,
+    labelName: '',
+    color: '#1890ff',
+    description: '',
+  })
+  modalVisible.value = true
+}
+
+const handleEdit = (row: CourseLabel) => {
+  modalTitle.value = '编辑标签'
+  Object.assign(formState, { ...row })
+  modalVisible.value = true
+}
+
+const handleDelete = async (row: CourseLabel) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该标签吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await courseLabelApi.delete(row.id!)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+const handleModalOk = async () => {
+  if (!formRef.value) return
+  try {
+    await formRef.value.validate()
+    if (formState.id) {
+      await courseLabelApi.update(formState.id, formState)
+    } else {
+      await courseLabelApi.create(formState)
+    }
+    ElMessage.success('操作成功')
+    modalVisible.value = false
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败')
+    }
+  }
+}
+
+onMounted(() => fetchData())
+</script>
+
+<style scoped lang="css">
+.course-label-management {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+
+    .search-section {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+}
+</style>
diff --git a/gym-manage-web/src/views/groupcourse/CourseRecommendManagement.vue b/gym-manage-web/src/views/groupcourse/CourseRecommendManagement.vue
new file mode 100644
index 0000000..3cff64d
--- /dev/null
+++ b/gym-manage-web/src/views/groupcourse/CourseRecommendManagement.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="course-recommend-management">
+    <el-card>
+      <template #header>
+        <div class="card-title">
+          <span>团课推荐管理</span>
+          <el-button type="primary" @click="handleAdd">
+            新增推荐
+          </el-button>
+        </div>
+      </template>
+      <el-table
+        v-loading="loading"
+        :data="dataSource"
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="courseId" label="团课ID" width="100" />
+        <el-table-column prop="recommendTitle" label="推荐标题" min-width="160" show-overflow-tooltip />
+        <el-table-column label="优先级" width="100" sortable="custom">
+          <template #default="{ row }">
+            <el-tag
+              :type="row.priority >= 5 ? 'danger' : row.priority >= 3 ? 'warning' : 'info'"
+              effect="dark"
+              style="font-weight: 500; font-size: 14px;"
+            >
+              {{ row.priority }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="启用状态" width="100">
+          <template #default="{ row }">
+            <el-tag
+              :type="row.isActive ? 'success' : 'danger'"
+              effect="dark"
+              style="font-weight: 500; font-size: 14px;"
+            >
+              {{ row.isActive ? '启用' : '停用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="recommendReason" label="推荐理由" min-width="180" show-overflow-tooltip />
+        <el-table-column label="操作" width="280" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button
+              v-if="row.isActive"
+              type="warning"
+              link
+              size="small"
+              @click="handleToggleActive(row)"
+            >
+              停用
+            </el-button>
+            <el-button
+              v-else
+              type="success"
+              link
+              size="small"
+              @click="handleToggleActive(row)"
+            >
+              启用
+            </el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="550px"
+    >
+      <el-form
+        ref="formRef"
+        :model="formState"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="关联团课ID" prop="courseId">
+          <el-input-number v-model="formState.courseId" :min="1" style="width: 100%" placeholder="请输入团课ID" />
+        </el-form-item>
+        <el-form-item label="推荐标题" prop="recommendTitle">
+          <el-input v-model="formState.recommendTitle" placeholder="请输入推荐标题" />
+        </el-form-item>
+        <el-form-item label="推荐内容">
+          <el-input
+            v-model="formState.recommendContent"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入推荐内容"
+          />
+        </el-form-item>
+        <el-form-item label="推荐理由">
+          <el-input
+            v-model="formState.recommendReason"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入推荐理由"
+          />
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-input-number v-model="formState.priority" :min="0" :max="999" style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleModalOk">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { groupCourseRecommendApi, type GroupCourseRecommend } from '@/api/groupCourse.api'
+
+const loading = ref(false)
+const dataSource = ref<GroupCourseRecommend[]>([])
+
+const modalVisible = ref(false)
+const modalTitle = ref('')
+const formRef = ref()
+const formState = reactive<GroupCourseRecommend>({
+  courseId: 0,
+  recommendTitle: '',
+  recommendContent: '',
+  recommendReason: '',
+  priority: 0,
+  isActive: true,
+})
+
+const formRules = {
+  courseId: [{ required: true, message: '请输入团课ID', trigger: 'blur' }],
+  recommendTitle: [
+    { required: true, message: '请输入推荐标题', trigger: 'blur' },
+    { max: 200, message: '标题长度不能超过200个字符', trigger: 'blur' },
+  ],
+  priority: [{ required: true, message: '请设置优先级', trigger: 'blur' }],
+}
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    dataSource.value = await groupCourseRecommendApi.getAll()
+  } catch {
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleAdd = () => {
+  modalTitle.value = '新增推荐'
+  Object.assign(formState, {
+    id: undefined,
+    courseId: 0,
+    recommendTitle: '',
+    recommendContent: '',
+    recommendReason: '',
+    priority: 0,
+    isActive: true,
+  })
+  modalVisible.value = true
+}
+
+const handleEdit = (row: GroupCourseRecommend) => {
+  modalTitle.value = '编辑推荐'
+  Object.assign(formState, { ...row })
+  modalVisible.value = true
+}
+
+const handleToggleActive = async (row: GroupCourseRecommend) => {
+  try {
+    const actionText = row.isActive ? '停用' : '启用'
+    await ElMessageBox.confirm(`确定要${actionText}该推荐吗？`, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    if (row.isActive) {
+      await groupCourseRecommendApi.disable(row.id!)
+    } else {
+      await groupCourseRecommendApi.enable(row.id!)
+    }
+    ElMessage.success(`${actionText}成功`)
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败')
+    }
+  }
+}
+
+const handleDelete = async (row: GroupCourseRecommend) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该推荐吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await groupCourseRecommendApi.delete(row.id!)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+const handleModalOk = async () => {
+  if (!formRef.value) return
+  try {
+    await formRef.value.validate()
+    if (formState.id) {
+      await groupCourseRecommendApi.update(formState.id, formState)
+    } else {
+      await groupCourseRecommendApi.create(formState)
+    }
+    ElMessage.success('操作成功')
+    modalVisible.value = false
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败')
+    }
+  }
+}
+
+onMounted(() => fetchData())
+</script>
+
+<style scoped lang="css">
+.course-recommend-management .card-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
diff --git a/gym-manage-web/src/views/groupcourse/CourseTypeManagement.vue b/gym-manage-web/src/views/groupcourse/CourseTypeManagement.vue
new file mode 100644
index 0000000..02b14ee
--- /dev/null
+++ b/gym-manage-web/src/views/groupcourse/CourseTypeManagement.vue
@@ -0,0 +1,269 @@
+<template>
+  <div class="course-type-management">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="search-section">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索类型名称"
+              clearable
+              style="width: 240px"
+              @clear="handleSearch"
+              @keyup.enter="handleSearch"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+            <el-select
+              v-model="searchCategory"
+              placeholder="筛选分类"
+              clearable
+              style="width: 160px"
+              @change="handleSearch"
+            >
+              <el-option
+                v-for="cat in categories"
+                :key="cat"
+                :value="cat"
+                :label="cat"
+              />
+            </el-select>
+            <el-button type="primary" @click="handleSearch">
+              搜索
+            </el-button>
+          </div>
+          <el-button type="primary" @click="handleAdd">
+            新增类型
+          </el-button>
+        </div>
+      </template>
+      <el-table
+        v-loading="loading"
+        :data="dataSource"
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="typeName" label="类型名称" min-width="180" />
+        <el-table-column label="基础难度" width="100">
+          <template #default="{ row }">
+            <el-rate
+              v-model="row.baseDifficulty"
+              disabled
+              show-score
+              :max="10"
+              text-color="#ff9900"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="category" label="分类" width="140">
+          <template #default="{ row }">
+            <el-tag effect="dark" style="font-weight: 500; font-size: 14px;">
+              {{ row.category || '-' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+    >
+      <el-form
+        ref="formRef"
+        :model="formState"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="类型名称" prop="typeName">
+          <el-input v-model="formState.typeName" placeholder="请输入类型名称" />
+        </el-form-item>
+        <el-form-item label="基础难度" prop="baseDifficulty">
+          <el-slider v-model="formState.baseDifficulty" :min="1" :max="10" show-stops style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="分类" prop="category">
+          <el-select
+            v-model="formState.category"
+            placeholder="请选择分类"
+            allow-create
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="cat in categories"
+              :key="cat"
+              :value="cat"
+              :label="cat"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input
+            v-model="formState.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入类型描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleModalOk">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search } from '@element-plus/icons-vue'
+import { groupCourseTypeApi, type GroupCourseType } from '@/api/groupCourse.api'
+
+const loading = ref(false)
+const dataSource = ref<GroupCourseType[]>([])
+const searchKeyword = ref('')
+const searchCategory = ref('')
+const categories = ref<string[]>([])
+
+const modalVisible = ref(false)
+const modalTitle = ref('')
+const formRef = ref()
+const formState = reactive<GroupCourseType>({
+  typeName: '',
+  baseDifficulty: 3,
+  description: '',
+  category: '',
+})
+
+const formRules = {
+  typeName: [
+    { required: true, message: '请输入类型名称', trigger: 'blur' },
+    { min: 2, max: 100, message: '类型名称长度在 2 到 100 个字符', trigger: 'blur' },
+  ],
+  baseDifficulty: [
+    { required: true, message: '请设置基础难度', trigger: 'change' },
+  ],
+}
+
+const fetchCategories = async () => {
+  try {
+    categories.value = await groupCourseTypeApi.getCategories()
+  } catch {
+    // ignore
+  }
+}
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    if (searchCategory.value) {
+      dataSource.value = await groupCourseTypeApi.getByCategory(searchCategory.value)
+    } else {
+      dataSource.value = await groupCourseTypeApi.getAll()
+    }
+    if (searchKeyword.value) {
+      dataSource.value = dataSource.value.filter((item) =>
+        item.typeName.toLowerCase().includes(searchKeyword.value.toLowerCase())
+      )
+    }
+  } catch {
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => fetchData()
+
+const handleAdd = () => {
+  modalTitle.value = '新增类型'
+  Object.assign(formState, {
+    id: undefined,
+    typeName: '',
+    baseDifficulty: 3,
+    description: '',
+    category: '',
+  })
+  modalVisible.value = true
+}
+
+const handleEdit = (row: GroupCourseType) => {
+  modalTitle.value = '编辑类型'
+  Object.assign(formState, { ...row })
+  modalVisible.value = true
+}
+
+const handleDelete = async (row: GroupCourseType) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该团课类型吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await groupCourseTypeApi.delete(row.id!)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+const handleModalOk = async () => {
+  if (!formRef.value) return
+  try {
+    await formRef.value.validate()
+    if (formState.id) {
+      await groupCourseTypeApi.update(formState.id, formState)
+    } else {
+      await groupCourseTypeApi.create(formState)
+    }
+    ElMessage.success('操作成功')
+    modalVisible.value = false
+    fetchCategories()
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败')
+    }
+  }
+}
+
+onMounted(() => {
+  fetchCategories()
+  fetchData()
+})
+</script>
+
+<style scoped lang="css">
+.course-type-management {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+
+    .search-section {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+}
+</style>
diff --git a/gym-manage-web/src/views/groupcourse/GroupCourseManagement.vue b/gym-manage-web/src/views/groupcourse/GroupCourseManagement.vue
new file mode 100644
index 0000000..a1b3483
--- /dev/null
+++ b/gym-manage-web/src/views/groupcourse/GroupCourseManagement.vue
@@ -0,0 +1,378 @@
+<template>
+  <div class="group-course-management">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="search-section">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索课程名称"
+              clearable
+              style="width: 240px"
+              @clear="handleSearch"
+              @keyup.enter="handleSearch"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+            <el-select
+              v-model="searchStatus"
+              placeholder="课程状态"
+              clearable
+              style="width: 140px"
+              @change="handleSearch"
+            >
+              <el-option value="0" label="正常" />
+              <el-option value="1" label="已取消" />
+              <el-option value="2" label="已结束" />
+              <el-option value="3" label="进行中" />
+              <el-option value="4" label="超时" />
+            </el-select>
+            <el-button type="primary" @click="handleSearch">
+              搜索
+            </el-button>
+          </div>
+          <el-button type="primary" @click="handleAdd">
+            新增团课
+          </el-button>
+        </div>
+      </template>
+      <el-table
+        v-loading="loading"
+        :data="dataSource"
+        style="width: 100%"
+        @sort-change="handleSortChange"
+      >
+        <el-table-column prop="id" label="ID" width="80" sortable="custom" />
+        <el-table-column prop="courseName" label="课程名称" min-width="140" />
+        <el-table-column prop="courseType" label="课程类型" width="100" />
+        <el-table-column label="状态" width="90">
+          <template #default="{ row }">
+            <el-tag
+              :type="statusMap[row.status]?.type || 'info'"
+              effect="dark"
+              style="font-weight: 500; font-size: 14px;"
+            >
+              {{ statusMap[row.status]?.label || row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="startTime" label="开始时间" width="170">
+          <template #default="{ row }">
+            {{ formatDateTime(row.startTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="endTime" label="结束时间" width="170">
+          <template #default="{ row }">
+            {{ formatDateTime(row.endTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="location" label="上课地点" width="120" />
+        <el-table-column label="人数" width="90">
+          <template #default="{ row }">
+            {{ row.currentMembers || 0 }}/{{ row.maxMembers || 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button
+              v-if="row.status === '0'"
+              type="warning"
+              link
+              size="small"
+              @click="handleCancel(row)"
+            >
+              取消
+            </el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        v-model:current-page="pagination.current"
+        v-model:page-size="pagination.pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        style="margin-top: 16px; justify-content: flex-end"
+        @current-change="handleTableChange"
+        @size-change="handleSizeChange"
+      />
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="600px"
+    >
+      <el-form
+        ref="formRef"
+        :model="formState"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="课程名称" prop="courseName">
+          <el-input v-model="formState.courseName" placeholder="请输入课程名称" />
+        </el-form-item>
+        <el-form-item label="课程类型" prop="courseType">
+          <el-select v-model="formState.courseType" placeholder="请选择课程类型" style="width: 100%">
+            <el-option
+              v-for="type in courseTypes"
+              :key="type.id"
+              :value="type.id"
+              :label="type.typeName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker
+            v-model="formState.startTime"
+            type="datetime"
+            placeholder="选择开始时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker
+            v-model="formState.endTime"
+            type="datetime"
+            placeholder="选择结束时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="最大人数" prop="maxMembers">
+          <el-input-number v-model="formState.maxMembers" :min="1" :max="999" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="上课地点" prop="location">
+          <el-input v-model="formState.location" placeholder="请输入上课地点" />
+        </el-form-item>
+        <el-form-item label="封面图片">
+          <el-input v-model="formState.coverImage" placeholder="请输入封面图片URL" />
+        </el-form-item>
+        <el-form-item label="储值卡额度">
+          <el-input-number v-model="formState.storedValueAmount" :min="0" :precision="2" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="课程描述">
+          <el-input
+            v-model="formState.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入课程描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleModalOk">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search } from '@element-plus/icons-vue'
+import { groupCourseApi, groupCourseTypeApi, type GroupCourse, type GroupCourseType } from '@/api/groupCourse.api'
+import { formatDateTime } from '@/utils/dateFormat'
+
+const loading = ref(false)
+const dataSource = ref<GroupCourse[]>([])
+const searchKeyword = ref('')
+const searchStatus = ref('')
+const courseTypes = ref<GroupCourseType[]>([])
+
+const statusMap: Record<string, { type: string; label: string }> = {
+  '0': { type: 'success', label: '正常' },
+  '1': { type: 'danger', label: '已取消' },
+  '2': { type: 'info', label: '已结束' },
+  '3': { type: '', label: '进行中' },
+  '4': { type: 'warning', label: '超时' },
+}
+
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+})
+
+const sortInfo = reactive({
+  sortBy: 'id',
+  sortOrder: 'asc' as 'asc' | 'desc',
+})
+
+const modalVisible = ref(false)
+const modalTitle = ref('')
+const formRef = ref()
+const formState = reactive<GroupCourse>({
+  courseName: '',
+  courseType: undefined,
+  startTime: '',
+  endTime: '',
+  maxMembers: 20,
+  location: '',
+  coverImage: '',
+  description: '',
+  storedValueAmount: 0,
+})
+
+const formRules = {
+  courseName: [
+    { required: true, message: '请输入课程名称', trigger: 'blur' },
+    { min: 2, max: 100, message: '课程名称长度在 2 到 100 个字符', trigger: 'blur' },
+  ],
+  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
+  maxMembers: [{ required: true, message: '请输入最大人数', trigger: 'blur' }],
+}
+
+const fetchCourseTypes = async () => {
+  try {
+    courseTypes.value = await groupCourseTypeApi.getAll()
+  } catch {
+    // ignore
+  }
+}
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await groupCourseApi.getPage({
+      page: pagination.current - 1,
+      size: pagination.pageSize,
+      sortBy: sortInfo.sortBy,
+      sortOrder: sortInfo.sortOrder,
+      keyword: searchKeyword.value || undefined,
+      status: searchStatus.value || undefined,
+    })
+    dataSource.value = res.content
+    pagination.total = Number(res.totalElements) || 0
+  } catch {
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleTableChange = () => fetchData()
+const handleSizeChange = () => {
+  pagination.current = 1
+  fetchData()
+}
+const handleSearch = () => {
+  pagination.current = 1
+  fetchData()
+}
+
+const handleSortChange = ({ prop, order }: any) => {
+  sortInfo.sortBy = prop
+  sortInfo.sortOrder = order === 'ascending' ? 'asc' : 'desc'
+  fetchData()
+}
+
+const handleAdd = () => {
+  modalTitle.value = '新增团课'
+  Object.assign(formState, {
+    id: undefined,
+    courseName: '',
+    courseType: undefined,
+    startTime: '',
+    endTime: '',
+    maxMembers: 20,
+    location: '',
+    coverImage: '',
+    description: '',
+    storedValueAmount: 0,
+  })
+  modalVisible.value = true
+}
+
+const handleEdit = (row: GroupCourse) => {
+  modalTitle.value = '编辑团课'
+  Object.assign(formState, { ...row })
+  modalVisible.value = true
+}
+
+const handleCancel = async (row: GroupCourse) => {
+  try {
+    await ElMessageBox.confirm('确定要取消该团课吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await groupCourseApi.cancel(row.id!)
+    ElMessage.success('取消成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('取消失败')
+    }
+  }
+}
+
+const handleDelete = async (row: GroupCourse) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该团课吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await groupCourseApi.delete(row.id!)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+const handleModalOk = async () => {
+  if (!formRef.value) return
+  try {
+    await formRef.value.validate()
+    if (formState.id) {
+      await groupCourseApi.update(formState.id, formState)
+    } else {
+      await groupCourseApi.create(formState)
+    }
+    ElMessage.success('操作成功')
+    modalVisible.value = false
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败')
+    }
+  }
+}
+
+onMounted(() => {
+  fetchCourseTypes()
+  fetchData()
+})
+</script>
+
+<style scoped lang="css">
+.group-course-management {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+
+    .search-section {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+}
+</style>