视图修改、接口修改

schoolNewsWeb/src/views/admin/manage/study/CourseManagementView.vue

@@ -1,23 +1,33 @@
 <template>
-  <div class="course-management">
-    <CourseList
-      v-if="currentView === 'list'"
-      @add="handleAdd"
-      @edit="handleEdit"
-    />
-    <CourseAdd
-      v-else-if="currentView === 'add' || currentView === 'edit'"
-      :courseID="currentCourseId"
-      @success="handleSuccess"
-      @cancel="handleCancel"
-    />
-  </div>
+  <AdminLayout 
+    title="学习管理" 
+    subtitle="管理课程、学习任务、学习记录等信息"
+  >
+    <div class="course-management">
+      <CourseList
+        v-if="currentView === 'list'"
+        @add="handleAdd"
+        @edit="handleEdit"
+      />
+      <CourseAdd
+        v-else-if="currentView === 'add' || currentView === 'edit'"
+        :courseID="currentCourseId"
+        @success="handleSuccess"
+        @cancel="handleCancel"
+      />
+    </div>
+  </AdminLayout>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { CourseList, CourseAdd } from '@/views/public/course/components';
 import type { Course } from '@/types/study';
+import { AdminLayout } from '@/views/admin';
+
+defineOptions({
+  name: 'CourseManagementView'
+});
 
 type ViewType = 'list' | 'add' | 'edit';
 
@@ -47,7 +57,8 @@ function handleCancel() {
 
 <style lang="scss" scoped>
 .course-management {
-  height: 100%;
-  background: #f5f7fa;
+  background: #FFFFFF;
+  border-radius: 14px;
+  min-height: 500px;
 }
 </style>

schoolNewsWeb/src/views/admin/manage/study/StudyManagementView.vue

@@ -1,22 +1,29 @@
 <template>
-  <div class="study-management">
-    <h1 class="page-title">学习管理</h1>
+  <AdminLayout title="学习管理" subtitle="学习记录管理">
+      <div class="study-management">
+      <h1 class="page-title">学习管理</h1>
 
-    <el-tabs v-model="activeTab">
+      <el-tabs v-model="activeTab">
+
+        <el-tab-pane label="学习记录" name="task-records">
+          <StudyRecords />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </AdminLayout>
 
-      <el-tab-pane label="学习记录" name="task-records">
-        <StudyRecords />
-      </el-tab-pane>
-    </el-tabs>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ElTabs, ElTabPane } from 'element-plus';
 import StudyRecords from './components/StudyRecords.vue';
-
+import { AdminLayout } from '@/views/admin';
+defineOptions({
+  name: 'StudyManagementView'
+});
 const activeTab = ref('task-publish');
+
 </script>
 
 <style lang="scss" scoped>

schoolNewsWeb/src/views/admin/manage/study/StudyRecordsView.vue

@@ -1,70 +1,75 @@
 <template>
-  <div class="study-records">
-    <div class="filter-bar">
-      <el-input 
-        v-model="searchKeyword" 
-        placeholder="搜索用户..."
-        style="width: 200px"
-        clearable
-      />
-      <el-select v-model="selectedTask" placeholder="选择任务" style="width: 200px" clearable>
-        <el-option 
-          v-for="task in tasks" 
-          :key="task.id" 
-          :label="task.name" 
-          :value="task.id" 
+  <AdminLayout title="学习记录" subtitle="学习记录管理">
+    <div class="study-records">
+      <div class="filter-bar">
+        <el-input 
+          v-model="searchKeyword" 
+          placeholder="搜索用户..."
+          style="width: 200px"
+          clearable
         />
-      </el-select>
-      <el-date-picker
-        v-model="dateRange"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
+        <el-select v-model="selectedTask" placeholder="选择任务" style="width: 200px" clearable>
+          <el-option 
+            v-for="task in tasks" 
+            :key="task.id" 
+            :label="task.name" 
+            :value="task.id" 
+          />
+        </el-select>
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+        <el-button @click="handleExport">导出</el-button>
+      </div>
+
+      <el-table :data="records" style="width: 100%">
+        <el-table-column prop="userName" label="用户" width="120" />
+        <el-table-column prop="taskName" label="任务名称" min-width="180" />
+        <el-table-column prop="progress" label="完成进度" width="120">
+          <template #default="{ row }">
+            <el-progress :percentage="row.progress" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="duration" label="学习时长" width="120" />
+        <el-table-column prop="startDate" label="开始时间" width="150" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" fixed="right">
+          <template #default="{ row }">
+            <el-button size="small" @click="viewDetail(row)">查看详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
       />
-      <el-button type="primary" @click="handleSearch">查询</el-button>
-      <el-button @click="handleExport">导出</el-button>
     </div>
-
-    <el-table :data="records" style="width: 100%">
-      <el-table-column prop="userName" label="用户" width="120" />
-      <el-table-column prop="taskName" label="任务名称" min-width="180" />
-      <el-table-column prop="progress" label="完成进度" width="120">
-        <template #default="{ row }">
-          <el-progress :percentage="row.progress" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="duration" label="学习时长" width="120" />
-      <el-table-column prop="startDate" label="开始时间" width="150" />
-      <el-table-column prop="status" label="状态" width="100">
-        <template #default="{ row }">
-          <el-tag :type="getStatusType(row.status)">
-            {{ getStatusText(row.status) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="120" fixed="right">
-        <template #default="{ row }">
-          <el-button size="small" @click="viewDetail(row)">查看详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-pagination
-      v-model:current-page="currentPage"
-      v-model:page-size="pageSize"
-      :total="total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
+  </AdminLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElTable, ElTableColumn, ElTag, ElProgress, ElPagination, ElMessage } from 'element-plus';
-
+import { AdminLayout } from '@/views/admin';
+defineOptions({
+  name: 'StudyRecordsView'
+});
 const searchKeyword = ref('');
 const selectedTask = ref('');
 const dateRange = ref<[Date, Date] | null>(null);

schoolNewsWeb/src/views/admin/manage/study/TaskManageView.vue

@@ -1,24 +1,26 @@
 <template>
-  <div class="task-management">
-    <LearningTaskList
-      v-if="currentView === 'list'"
-      @add="handleAdd"
-      @edit="handleEdit"
-    />
-    <LearningTaskAdd
-      v-else-if="currentView === 'add' || currentView === 'edit'"
-      :task-i-d="currentTaskId"
-      @success="handleSuccess"
-      @cancel="handleCancel"
-    />
-  </div>
+  <AdminLayout title="任务管理" subtitle="任务管理">
+    <div class="task-management">
+      <LearningTaskList
+        v-if="currentView === 'list'"
+        @add="handleAdd"
+        @edit="handleEdit"
+      />
+      <LearningTaskAdd
+        v-else-if="currentView === 'add' || currentView === 'edit'"
+        :task-i-d="currentTaskId"
+        @success="handleSuccess"
+        @cancel="handleCancel"
+      />
+    </div>
+  </AdminLayout>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { LearningTaskList, LearningTaskAdd } from '@/views/public/task';
 import type { LearningTask } from '@/types/study';
-
+import { AdminLayout } from '@/views/admin';
 defineOptions({
   name: 'TaskManageView'
 });