系统风格以及部分页面样式变更

frontend/src/views/teachOffice/subject/index.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="app-container subject-page">
+  <div class="app-container management-page subject-page">
 
     <!-- ==================== 2. 查询条件区域 ==================== -->
     <el-card shadow="never" class="search-card">
+      <div class="section-heading">
+        <div>
+          <h2 class="section-title">筛选条件</h2>
+          <p class="section-description">按课程名称、代码和培训属性筛选课程科目</p>
+        </div>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+      </div>
       <el-form :model="searchForm">
         <el-row :gutter="32">
           <!-- 左栏 -->
@@ -43,41 +50,56 @@
         </el-row>
       </el-form>
 
-      <div class="query-footer">
-        <el-button class="gray-btn" @click="handleQuery">查询</el-button>
-      </div>
     </el-card>
 
     <!-- ==================== 3. 操作按钮区域 ==================== -->
     <el-card shadow="never" class="action-card">
-      <div class="action-row">
-        <el-button type="primary" @click="handleOpenDialog">新建课程科目</el-button>
-        <el-button type="primary" @click="handleBatchDelete">删除所选</el-button>
-        <el-button type="primary" @click="handleDownloadCourse">下载课程科目基本信息</el-button>
-        <el-button type="primary" @click="handleDownloadTextbook">下载课程教材基本信息</el-button>
+      <div class="section-heading section-heading--compact">
+        <div>
+          <h2 class="section-title">课程科目操作</h2>
+          <p class="section-description">维护课程科目，或下载业务数据与导入模板</p>
+        </div>
       </div>
       <div class="action-row">
-        <el-button type="primary" @click="handleDownloadTemplate">【课程科目数据文件模板】下载</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">新建课程科目</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" @click="handleBatchDelete">删除所选</el-button>
+        <el-button icon="el-icon-download" @click="handleDownloadCourse">下载课程科目基本信息</el-button>
+        <el-button icon="el-icon-download" @click="handleDownloadTextbook">下载课程教材基本信息</el-button>
+      </div>
+      <div class="action-row">
+        <el-button icon="el-icon-download" @click="handleDownloadTemplate">【课程科目数据文件模板】下载</el-button>
       </div>
     </el-card>
 
     <!-- ==================== 4. 文件上传区域 ==================== -->
     <el-card shadow="never" class="upload-card">
+      <div class="section-heading section-heading--compact">
+        <div>
+          <h2 class="section-title">数据导入</h2>
+          <p class="section-description">选择填写完成的课程科目模板并上传</p>
+        </div>
+      </div>
       <div class="upload-row">
         <div class="upload-left">
-          <el-button @click="handleSelectFile">选择文件</el-button>
+          <el-button icon="el-icon-folder-opened" @click="handleSelectFile">选择文件</el-button>
           <span class="file-name" :class="{ 'has-file': selectedFile }">{{ fileName }}</span>
           <input ref="fileInputRef" type="file" style="display: none" @change="handleFileChange" />
         </div>
         <div class="upload-right">
           <el-checkbox v-model="coverExist">覆盖已存在课程科目</el-checkbox>
-          <el-button type="primary" @click="handleUpload">上传数据</el-button>
+          <el-button type="primary" icon="el-icon-upload2" @click="handleUpload">上传数据</el-button>
         </div>
       </div>
     </el-card>
 
     <!-- ==================== 6. 数据表格区域 ==================== -->
     <el-card shadow="never" class="table-card">
+      <div class="section-heading section-heading--compact table-heading">
+        <div>
+          <h2 class="section-title">课程科目列表</h2>
+          <p class="section-description">共 {{ total }} 条数据</p>
+        </div>
+      </div>
       <el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
         @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="40" align="center" />
@@ -622,13 +644,6 @@ export default {
     text-align: left;
   }
 
-  .query-footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid #ebeef5;
-  }
 }
 
 // ==================== 3. 操作按钮区域 ====================
@@ -726,20 +741,4 @@ export default {
   gap: 12px;
 }
 
-.gray-btn {
-  height: 28px;
-  padding: 2px 16px;
-  font-size: 12px;
-  background: #f5f5f5;
-  border: 1px solid #c0c4cc;
-  color: #333;
-  border-radius: 2px;
-
-  &:hover,
-  &:focus {
-    background: #ebebeb;
-    border-color: #c0c4cc;
-    color: #333;
-  }
-}
-</style>
+</style>