diff --git a/frontend/src/views/teachOffice/elective/index.vue b/frontend/src/views/teachOffice/elective/index.vue
index e54b8f4e0..a2c7d0a7d 100644
--- a/frontend/src/views/teachOffice/elective/index.vue
+++ b/frontend/src/views/teachOffice/elective/index.vue
@@ -1,517 +1,732 @@
 <template>
-  <div class="app-container">
-    <!-- ==================== 2. 查询条件区域 ==================== -->
-    <div class="section-card query-card">
-      <el-form>
-        <el-row :gutter="32">
-          <!-- 左栏 -->
-          <el-col :xs="24" :md="12">
-            <div class="query-field">
-              <span class="q-label no-check">授课教员</span>
-              <el-input v-model="searchForm.js" placeholder="请输入授课教员" clearable class="q-control" />
-            </div>
-            <div class="query-field">
-              <span class="q-label no-check">可选班次年级</span>
-              <el-input v-model="searchForm.kbcnj" placeholder="请输入可选班次年级" clearable class="q-control" />
-            </div>
-            <div class="query-field">
-              <el-checkbox v-model="searchForm.xxkztEnabled" />
-              <span class="q-label">选修课状态</span>
-              <el-select v-model="searchForm.xxkzt" class="q-control" :disabled="!searchForm.xxkztEnabled">
-                <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
-              </el-select>
-            </div>
+  <div class="app-container elective-page">
+    <!-- ==================== 1. 查询条件区域 ==================== -->
+    <el-card shadow="never" class="search-card">
+      <el-form :model="searchForm" label-width="110px" class="search-form" @submit.native.prevent>
+        <el-row :gutter="24">
+          <el-col :xs="24" :md="12" :lg="8">
+            <el-form-item label="课名称">
+              <el-input v-model="searchForm.kmc" placeholder="请输入课名称（模糊）" clearable />
+            </el-form-item>
           </el-col>
-
-          <!-- 右栏 -->
-          <el-col :xs="24" :md="12">
-            <div class="query-field">
-              <span class="q-label no-check">课程科目名称</span>
-              <el-input v-model="searchForm.kckmmc" placeholder="请输入课程科目名称" clearable class="q-control" />
-            </div>
-            <div class="query-field">
-              <span class="q-label no-check">选修班名称</span>
-              <el-input v-model="searchForm.xxbmc" placeholder="请输入选修班名称" clearable class="q-control" />
-            </div>
-            <div class="query-field">
-              <el-checkbox v-model="searchForm.pxccEnabled" />
-              <span class="q-label">培训层次</span>
-              <el-select v-model="searchForm.pxcc" class="q-control" :disabled="!searchForm.pxccEnabled">
-                <el-option v-for="item in pxccOptions" :key="item" :label="item" :value="item" />
-              </el-select>
+          <el-col :xs="24" :md="12" :lg="8">
+            <el-form-item label="科目代码">
+              <el-input v-model="searchForm.kmdm" placeholder="请输入科目代码（模糊）" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :md="12" :lg="8">
+            <el-form-item label="简称">
+              <el-input v-model="searchForm.jc" placeholder="请输入简称（模糊）" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :md="12" :lg="8">
+            <el-form-item label="教研室代号">
+              <el-input v-model="searchForm.jysdh" placeholder="请输入教研室代号（精确）" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :md="12" :lg="8">
+            <el-form-item label="课程类型">
+              <el-input v-model="searchForm.kclx" placeholder="请输入课程类型（精确）" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :md="12" :lg="8">
+            <el-form-item label="培训类型">
+              <el-input v-model="searchForm.pxlx" placeholder="请输入培训类型（精确）" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :md="12" :lg="8">
+            <el-form-item label="培训层次">
+              <el-input v-model="searchForm.pxcc" placeholder="请输入培训层次（精确）" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :md="12" :lg="8">
+            <div class="search-actions">
+              <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+              <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
             </div>
           </el-col>
         </el-row>
       </el-form>
+    </el-card>
 
-      <div class="query-footer">
-        <el-button class="gray-btn" @click="handleQuery">查询</el-button>
-      </div>
-    </div>
-
-    <!-- ==================== 3. 导出按钮区域 ==================== -->
-    <div class="section-card export-card">
-      <div class="export-bar">
-        <el-button type="primary" @click="handleDownloadList">下载选修班列表</el-button>
-        <el-button type="primary" @click="handleDownloadWord">下载选修班学员名单Word</el-button>
-        <el-button type="primary" @click="handleDownloadExcel">下载选修班学员名单Excel</el-button>
-      </div>
-    </div>
-
-    <!-- ==================== 4. 操作按钮区域 ==================== -->
-    <div class="section-card action-card">
+    <!-- ==================== 2. 操作按钮区域 ==================== -->
+    <el-card shadow="never" class="action-card">
       <div class="action-row">
-        <el-button type="primary" @click="handleOpenNew">新建选修课</el-button>
-        <el-button type="primary" @click="handleOpenEarly">所选批量开放报名</el-button>
-        <el-button type="primary" @click="handleCancelEarly">所选批量取消开放报名</el-button>
-        <el-button type="primary" @click="handleStopSignup">批量停止报名</el-button>
-        <el-button type="primary" @click="handleReverseRange">所选批量根据学员反向确定班次范围</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建课程科目</el-button>
       </div>
-      <div class="action-row">
-        <el-button type="primary" @click="handleDownloadTemplate">【选修课数据文件模板】下载</el-button>
-      </div>
-    </div>
+    </el-card>
 
-    <!-- ==================== 5. 文件上传区域 ==================== -->
-    <div class="section-card upload-card">
-      <div class="upload-row">
-        <div class="upload-left">
-          <el-button @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-button type="primary" @click="handleUpload">上传数据</el-button>
-        </div>
+    <!-- ==================== 3. 数据表格区域 ==================== -->
+    <el-card shadow="never" class="table-card">
+      <div class="list-header">
+        <div class="list-title">课程科目列表</div>
       </div>
-    </div>
-
-    <!-- ==================== 6. 数据表格区域 ==================== -->
-    <div class="section-card table-card">
-      <el-table :data="pagedData" border stripe class="main-table" @selection-change="handleSelectionChange">
-        <template slot="empty">
-          <span>无数据！</span>
-        </template>
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="序号" width="60" align="center" :index="tableIndex" />
-        <el-table-column prop="course" label="课程" min-width="110" show-overflow-tooltip />
-        <el-table-column prop="textbook" label="教材" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="teacher" label="实施教员" width="90" align="center" />
-        <el-table-column prop="place" label="教学场地" width="100" show-overflow-tooltip />
-        <el-table-column prop="teamClass" label="显示可选队别班次" min-width="150" align="center" show-overflow-tooltip />
-        <el-table-column label="计划学时/运行学时/学分" width="130" align="center">
-          <template slot="header">
-            <div class="triple-header">
-              <span>计划学时</span>
-              <span>运行学时</span>
-              <span>学分</span>
-            </div>
-          </template>
-          <template slot-scope="{ row }">
-            <div class="triple-cell">
-              <span>{{ row.planHours }}</span>
-              <span>{{ row.runHours }}</span>
-              <span>{{ row.credit }}</span>
-            </div>
+      <el-table v-loading="loading" :data="tableData" border stripe highlight-current-row>
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="kbh" label="课编号" min-width="130" show-overflow-tooltip header-align="center" />
+        <el-table-column prop="kmc" label="课名称" min-width="150" show-overflow-tooltip header-align="center" />
+        <el-table-column prop="jc" label="简称" min-width="100" show-overflow-tooltip header-align="center" />
+        <el-table-column prop="kmdm" label="科目代码" min-width="100" show-overflow-tooltip header-align="center" />
+        <el-table-column prop="jysdh" label="教研室代号" min-width="110" show-overflow-tooltip header-align="center" />
+        <el-table-column prop="kclx" label="课程类型" min-width="100" show-overflow-tooltip header-align="center" />
+        <el-table-column prop="pxlx" label="培训类型" min-width="100" show-overflow-tooltip header-align="center" />
+        <el-table-column prop="pxcc" label="培训层次" min-width="100" show-overflow-tooltip header-align="center" />
+        <el-table-column label="学分" width="80" align="center">
+          <template slot-scope="scope">{{ fmtFloat(scope.row.xf) }}</template>
+        </el-table-column>
+        <el-table-column prop="xs" label="学时" width="80" align="center" />
+        <el-table-column prop="zks" label="周课时" width="80" align="center" />
+        <el-table-column label="操作" width="160" align="center" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button type="text" size="mini" icon="el-icon-delete" class="danger-text-btn" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
-        <el-table-column label="开课结课日期" min-width="150" align="center">
-          <template slot-scope="{ row }">
-            {{ row.startDate }} ~ {{ row.endDate }}
-          </template>
-        </el-table-column>
-        <el-table-column label="报名日期" min-width="140" align="center">
-          <template slot-scope="{ row }">
-            {{ row.signupStart }} ~ {{ row.signupEnd }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="planCount" label="计划人数" width="90" align="center" />
-        <el-table-column prop="requirement" label="要求说明" min-width="120" show-overflow-tooltip />
       </el-table>
 
-      <div class="pagination-wrap">
-        <el-pagination
-          background
-          layout="total, prev, pager, next, jumper"
-          :total="tableData.length"
-          :page-size="pageSize"
-          :current-page="currentPage"
-          @current-change="handlePageChange"
-        />
-      </div>
-    </div>
+      <el-pagination
+        class="pagination"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </el-card>
 
-    <!-- 新建选修课弹窗 -->
-    <el-dialog
-      :visible="dialogVisible"
-      title="新建选修课"
-      width="560px"
-      @update:visible="val => (dialogVisible = val)"
-    >
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
-        <el-form-item label="课程名称" prop="kcmc">
-          <el-input v-model="form.kcmc" placeholder="请输入课程名称" clearable />
-        </el-form-item>
-        <el-form-item label="实施教员" prop="js">
-          <el-input v-model="form.js" placeholder="请输入实施教员" clearable />
-        </el-form-item>
-        <el-form-item label="教材">
-          <el-input v-model="form.jc" placeholder="请输入教材" clearable />
-        </el-form-item>
-        <el-form-item label="教学场地">
-          <el-input v-model="form.jxcd" placeholder="请输入教学场地" clearable />
-        </el-form-item>
-        <el-form-item label="计划学时">
-          <el-input-number v-model="form.jhsxs" :min="0" :precision="0" class="w-full" />
-        </el-form-item>
-        <el-form-item label="运行学时">
-          <el-input-number v-model="form.yxsxs" :min="0" :precision="0" class="w-full" />
-        </el-form-item>
-        <el-form-item label="学分">
-          <el-input-number v-model="form.xf" :min="0" :precision="1" class="w-full" />
-        </el-form-item>
-        <el-form-item label="计划人数">
-          <el-input-number v-model="form.jh" :min="0" :precision="0" class="w-full" />
-        </el-form-item>
+    <!-- ==================== 4. 新增/编辑弹窗 ==================== -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1100px" append-to-body
+      :close-on-click-modal="false">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="130px" class="add-form">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="课编号" prop="kbh">
+              <el-input v-model="form.kbh" placeholder="请输入课编号（新增必填）" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="课名称" prop="kmc">
+              <el-input v-model="form.kmc" placeholder="请输入课名称" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="简称">
+              <el-input v-model="form.jc" placeholder="请输入简称" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="教研室代号" prop="jysdh">
+              <el-input v-model="form.jysdh" placeholder="请输入教研室代号" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="科目代码">
+              <el-input v-model="form.kmdm" placeholder="请输入科目代码" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="课程统一编号" prop="kctybh">
+              <el-input v-model="form.kctybh" placeholder="请输入课程统一编号" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="学分" prop="xf">
+              <el-input-number v-model="form.xf" :min="0" :precision="2" :step="0.5" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="学时">
+              <el-input-number v-model="form.xs" :min="0" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="周课时" prop="zks">
+              <el-input-number v-model="form.zks" :min="0" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="培训层次" prop="pxcc">
+              <el-input v-model="form.pxcc" placeholder="请输入培训层次" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="培训类型" prop="pxlx">
+              <el-input v-model="form.pxlx" placeholder="请输入培训类型" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="课程类型" prop="kclx">
+              <el-input v-model="form.kclx" placeholder="请输入课程类型" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="考试课时" prop="ksks">
+              <el-input-number v-model="form.ksks" :min="0" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="理论学时" prop="llxs">
+              <el-input-number v-model="form.llxs" :min="0" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="实践学时" prop="sjxs">
+              <el-input-number v-model="form.sjxs" :min="0" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="辅导答疑课时" prop="fddyks">
+              <el-input-number v-model="form.fddyks" :min="0" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="自修课时" prop="zxks">
+              <el-input-number v-model="form.zxks" :min="0" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="节次优选级" prop="jcyxj">
+              <el-input-number v-model="form.jcyxj" :min="0" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="成绩分制" prop="cjfz">
+              <el-input v-model="form.cjfz" placeholder="请输入成绩分制" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="课类型" prop="klx">
+              <el-input v-model="form.klx" placeholder="请输入课类型" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="考核方式" prop="khfs">
+              <el-input v-model="form.khfs" placeholder="请输入考核方式" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="形成性成绩分值" prop="xcxcjfz">
+              <el-input-number v-model="form.xcxcjfz" :min="0" :precision="2" :step="0.5" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="终结性成绩分值" prop="zjxcjfz">
+              <el-input-number v-model="form.zjxcjfz" :min="0" :precision="2" :step="0.5" controls-position="right" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="不计入学员平均分" prop="bjrxypjf">
+              <el-radio-group v-model="form.bjrxypjf">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="考试课时不显示" prop="ksksbxs">
+              <el-radio-group v-model="form.ksksbxs">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="政治类课程" prop="zzlkc">
+              <el-radio-group v-model="form.zzlkc">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="密级" prop="mj">
+              <el-input v-model="form.mj" placeholder="请输入密级" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="课程支持方式" prop="kczcfs">
+              <el-input v-model="form.kczcfs" placeholder="请输入课程支持方式" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="课程建设方式" prop="kcjsfs">
+              <el-input v-model="form.kcjsfs" placeholder="请输入课程建设方式" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="评选情况" prop="pxqk">
+              <el-input v-model="form.pxqk" placeholder="请输入评选情况" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="修订日期" prop="xdrq">
+              <el-date-picker
+                v-model="form.xdrq"
+                type="datetime"
+                value-format="yyyy-MM-ddTHH:mm:ss"
+                placeholder="请选择修订日期"
+                class="w-full"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="规范名称">
+              <el-input v-model="form.gfmc" placeholder="请输入规范名称" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="适用对象">
+              <el-input v-model="form.sydx" placeholder="请输入适用对象" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="序号">
+              <el-input v-model="form.xh" placeholder="请输入序号" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="拼音">
+              <el-input v-model="form.py" placeholder="请输入拼音" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="版本">
+              <el-input v-model="form.bb" placeholder="请输入版本" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="教学管理部门编号">
+              <el-input v-model="form.jxglbmbh" placeholder="请输入教学管理部门编号" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="8">
+            <el-form-item label="JSON字典">
+              <el-input v-model="form.jsonzd" placeholder="请输入JSON字典" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.bz" type="textarea" :rows="2" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-      <div slot="footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleNewConfirm">确定</el-button>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- ==================== 5. 详情弹窗 ==================== -->
+    <el-dialog title="课程科目详情" :visible.sync="detailVisible" width="900px" append-to-body
+      :close-on-click-modal="false">
+      <div v-loading="detailLoading" class="detail-body">
+        <el-descriptions v-if="detailData.kbh" :column="2" border>
+          <el-descriptions-item label="课编号">{{ fmtVal(detailData.kbh) }}</el-descriptions-item>
+          <el-descriptions-item label="课名称">{{ fmtVal(detailData.kmc) }}</el-descriptions-item>
+          <el-descriptions-item label="简称">{{ fmtVal(detailData.jc) }}</el-descriptions-item>
+          <el-descriptions-item label="教研室代号">{{ fmtVal(detailData.jysdh) }}</el-descriptions-item>
+          <el-descriptions-item label="科目代码">{{ fmtVal(detailData.kmdm) }}</el-descriptions-item>
+          <el-descriptions-item label="课程统一编号">{{ fmtVal(detailData.kctybh) }}</el-descriptions-item>
+          <el-descriptions-item label="学分">{{ fmtFloat(detailData.xf) }}</el-descriptions-item>
+          <el-descriptions-item label="学时">{{ fmtVal(detailData.xs) }}</el-descriptions-item>
+          <el-descriptions-item label="周课时">{{ fmtVal(detailData.zks) }}</el-descriptions-item>
+          <el-descriptions-item label="培训层次">{{ fmtVal(detailData.pxcc) }}</el-descriptions-item>
+          <el-descriptions-item label="培训类型">{{ fmtVal(detailData.pxlx) }}</el-descriptions-item>
+          <el-descriptions-item label="课程类型">{{ fmtVal(detailData.kclx) }}</el-descriptions-item>
+          <el-descriptions-item label="考试课时">{{ fmtVal(detailData.ksks) }}</el-descriptions-item>
+          <el-descriptions-item label="理论学时">{{ fmtVal(detailData.llxs) }}</el-descriptions-item>
+          <el-descriptions-item label="实践学时">{{ fmtVal(detailData.sjxs) }}</el-descriptions-item>
+          <el-descriptions-item label="辅导答疑课时">{{ fmtVal(detailData.fddyks) }}</el-descriptions-item>
+          <el-descriptions-item label="自修课时">{{ fmtVal(detailData.zxks) }}</el-descriptions-item>
+          <el-descriptions-item label="节次优选级">{{ fmtVal(detailData.jcyxj) }}</el-descriptions-item>
+          <el-descriptions-item label="成绩分制">{{ fmtVal(detailData.cjfz) }}</el-descriptions-item>
+          <el-descriptions-item label="课类型">{{ fmtVal(detailData.klx) }}</el-descriptions-item>
+          <el-descriptions-item label="考核方式">{{ fmtVal(detailData.khfs) }}</el-descriptions-item>
+          <el-descriptions-item label="形成性成绩分值">{{ fmtFloat(detailData.xcxcjfz) }}</el-descriptions-item>
+          <el-descriptions-item label="终结性成绩分值">{{ fmtFloat(detailData.zjxcjfz) }}</el-descriptions-item>
+          <el-descriptions-item label="不计入学员平均分">{{ fmtFlag(detailData.bjrxypjf) }}</el-descriptions-item>
+          <el-descriptions-item label="考试课时不显示">{{ fmtFlag(detailData.ksksbxs) }}</el-descriptions-item>
+          <el-descriptions-item label="政治类课程">{{ fmtFlag(detailData.zzlkc) }}</el-descriptions-item>
+          <el-descriptions-item label="密级">{{ fmtVal(detailData.mj) }}</el-descriptions-item>
+          <el-descriptions-item label="课程支持方式">{{ fmtVal(detailData.kczcfs) }}</el-descriptions-item>
+          <el-descriptions-item label="课程建设方式">{{ fmtVal(detailData.kcjsfs) }}</el-descriptions-item>
+          <el-descriptions-item label="评选情况">{{ fmtVal(detailData.pxqk) }}</el-descriptions-item>
+          <el-descriptions-item label="修订日期">{{ fmtDateTime(detailData.xdrq) }}</el-descriptions-item>
+          <el-descriptions-item label="规范名称">{{ fmtVal(detailData.gfmc) }}</el-descriptions-item>
+          <el-descriptions-item label="适用对象">{{ fmtVal(detailData.sydx) }}</el-descriptions-item>
+          <el-descriptions-item label="序号">{{ fmtVal(detailData.xh) }}</el-descriptions-item>
+          <el-descriptions-item label="拼音">{{ fmtVal(detailData.py) }}</el-descriptions-item>
+          <el-descriptions-item label="版本">{{ fmtVal(detailData.bb) }}</el-descriptions-item>
+          <el-descriptions-item label="教学管理部门编号">{{ fmtVal(detailData.jxglbmbh) }}</el-descriptions-item>
+          <el-descriptions-item label="JSON字典">{{ fmtVal(detailData.jsonzd) }}</el-descriptions-item>
+          <el-descriptions-item label="备注" :span="2">{{ fmtVal(detailData.bz) }}</el-descriptions-item>
+        </el-descriptions>
+        <div v-else class="detail-empty">暂无数据</div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+/**
+ * 课程科目（选修/课程科目管理）
+ * 对应菜单：teachOffice/elective
+ * 接入 JYSController /jys/kb 真实接口：分页查询 list、详情 get?kbh=、新增 add、编辑 update、删除 delete?kbh=
+ * 旧页面的下载/上传/模板/批量报名等 mock 功能后端无对应接口，已移除
+ */
+import {
+  listKb,
+  getKb,
+  addKb,
+  updateKb,
+  deleteKb
+} from '@/api/teachOffice/kb'
+
 export default {
   name: 'Elective',
   data() {
     return {
-      // ==================== 下拉选项 ====================
-      statusOptions: ['拟制', '开放报名', '停止报名', '已开课'],
-      pxccOptions: ['无', '本科', '硕士', '博士'],
-
-      // ==================== 查询条件 ====================
+      // ==================== 查询条件（仅后端 KBMapper 支持的字段） ====================
       searchForm: {
-        js: '',
-        kbcnj: '',
-        xxkztEnabled: false,
-        xxkzt: '拟制',
-        kckmmc: '',
-        xxbmc: '',
-        pxccEnabled: false,
-        pxcc: '无'
-      },
-
-      // ==================== 数据表格 mock ====================
-      tableData: [
-        { id: 1, course: '军事英语', textbook: '军事英语教程', teacher: '张三', place: '教室101', teamClass: '2025级学员1-5队', planHours: 32, runHours: 30, credit: 2, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-20', signupEnd: '2026-09-01', planCount: 60, requirement: '限选50人' },
-        { id: 2, course: '摄影技术', textbook: '摄影基础', teacher: '李四', place: '教室102', teamClass: '2024级学员1-4队', planHours: 24, runHours: 24, credit: 1.5, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-20', signupEnd: '2026-09-01', planCount: 40, requirement: '自备相机' },
-        { id: 3, course: '网球', textbook: '网球教程', teacher: '王五', place: '操场', teamClass: '2025级学员2-6队', planHours: 24, runHours: 22, credit: 1.5, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-21', signupEnd: '2026-09-02', planCount: 30, requirement: '需自备球拍' },
-        { id: 4, course: '书法鉴赏', textbook: '中国书法', teacher: '赵六', place: '教室103', teamClass: '2026级学员1-3队', planHours: 16, runHours: 16, credit: 1, startDate: '2026-09-08', endDate: '2026-12-30', signupStart: '2026-08-25', signupEnd: '2026-09-05', planCount: 35, requirement: '' },
-        { id: 5, course: '无人机操作', textbook: '无人机原理', teacher: '孙七', place: '室外训练场', teamClass: '2025级学员1-6队', planHours: 32, runHours: 28, credit: 2, startDate: '2026-09-08', endDate: '2027-01-10', signupStart: '2026-08-26', signupEnd: '2026-09-06', planCount: 25, requirement: '需通过体检' }
-      ],
-      selectedRows: [],
-
-      // ==================== 文件上传 ====================
-      selectedFile: null,
-
-      // ==================== 新建选修课弹窗 ====================
-      dialogVisible: false,
-      form: {
-        kcmc: '',
-        js: '',
+        kmc: '',
+        kmdm: '',
         jc: '',
-        jxcd: '',
-        jhsxs: 0,
-        yxsxs: 0,
-        xf: 0,
-        jh: 0
-      },
-      rules: {
-        kcmc: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
-        js: [{ required: true, message: '请输入实施教员', trigger: 'blur' }]
+        jysdh: '',
+        kclx: '',
+        pxlx: '',
+        pxcc: ''
       },
 
-      // ==================== 分页 ====================
-      currentPage: 1,
-      pageSize: 20
+      // ==================== 列表 ====================
+      loading: false,
+      tableData: [],
+      total: 0,
+      pageNum: 1,
+      pageSize: 20,
+
+      // ==================== 新增/编辑弹窗 ====================
+      dialogVisible: false,
+      dialogTitle: '新建课程科目',
+      isEdit: false,
+      saving: false,
+      form: this.createEmptyForm(),
+      rules: {
+        kbh: [{ required: true, message: '请输入课编号', trigger: 'blur' }],
+        kmc: [{ required: true, message: '请输入课名称', trigger: 'blur' }],
+        jysdh: [{ required: true, message: '请输入教研室代号', trigger: 'blur' }],
+        xf: [{ required: true, message: '请输入学分', trigger: 'blur' }],
+        pxcc: [{ required: true, message: '请输入培训层次', trigger: 'blur' }],
+        pxlx: [{ required: true, message: '请输入培训类型', trigger: 'blur' }],
+        kclx: [{ required: true, message: '请输入课程类型', trigger: 'blur' }],
+        ksks: [{ required: true, message: '请输入考试课时', trigger: 'blur' }],
+        cjfz: [{ required: true, message: '请输入成绩分制', trigger: 'blur' }],
+        bjrxypjf: [{ required: true, message: '请选择是否不计入学员平均分', trigger: 'change' }],
+        llxs: [{ required: true, message: '请输入理论学时', trigger: 'blur' }],
+        sjxs: [{ required: true, message: '请输入实践学时', trigger: 'blur' }],
+        zks: [{ required: true, message: '请输入周课时', trigger: 'blur' }],
+        klx: [{ required: true, message: '请输入课类型', trigger: 'blur' }],
+        ksksbxs: [{ required: true, message: '请选择考试课时是否显示', trigger: 'change' }],
+        kctybh: [{ required: true, message: '请输入课程统一编号', trigger: 'blur' }],
+        fddyks: [{ required: true, message: '请输入辅导答疑课时', trigger: 'blur' }],
+        zxks: [{ required: true, message: '请输入自修课时', trigger: 'blur' }],
+        xdrq: [{ required: true, message: '请选择修订日期', trigger: 'change' }],
+        jcyxj: [{ required: true, message: '请输入节次优选级', trigger: 'blur' }],
+        kczcfs: [{ required: true, message: '请输入课程支持方式', trigger: 'blur' }],
+        kcjsfs: [{ required: true, message: '请输入课程建设方式', trigger: 'blur' }],
+        zzlkc: [{ required: true, message: '请选择是否政治类课程', trigger: 'change' }],
+        khfs: [{ required: true, message: '请输入考核方式', trigger: 'blur' }],
+        xcxcjfz: [{ required: true, message: '请输入形成性成绩分值', trigger: 'blur' }],
+        zjxcjfz: [{ required: true, message: '请输入终结性成绩分值', trigger: 'blur' }],
+        mj: [{ required: true, message: '请输入密级', trigger: 'blur' }],
+        pxqk: [{ required: true, message: '请输入评选情况', trigger: 'blur' }]
+      },
+
+      // ==================== 详情弹窗 ====================
+      detailVisible: false,
+      detailLoading: false,
+      detailData: {}
     }
   },
-  computed: {
-    fileName() {
-      return (this.selectedFile && this.selectedFile.name) || '未选择任何文件'
-    },
-    pagedData() {
-      const start = (this.currentPage - 1) * this.pageSize
-      return this.tableData.slice(start, start + this.pageSize)
-    }
+  created() {
+    this.fetchList()
   },
   methods: {
-    // ==================== 查询 ====================
-    handleQuery() {
-      console.log('查询条件:', JSON.parse(JSON.stringify(this.searchForm)))
-      this.$message.success('查询完成（前端模拟）')
-    },
-
-    // ==================== 导出 ====================
-    downloadBlob(content, filename) {
-      const blob = new Blob(['\ufeff' + content], { type: 'text/plain;charset=utf-8;' })
-      const link = document.createElement('a')
-      link.href = URL.createObjectURL(blob)
-      link.download = filename
-      link.click()
-      URL.revokeObjectURL(link.href)
-    },
-    handleDownloadList() {
-      this.downloadBlob('课程,教材,实施教员,教学场地,计划人数\n', '选修班列表.txt')
-      this.$message.success('选修班列表已下载（前端模拟）')
-    },
-    handleDownloadWord() {
-      this.downloadBlob('选修班学员名单\n', '选修班学员名单Word.txt')
-      this.$message.success('选修班学员名单Word已下载（前端模拟）')
-    },
-    handleDownloadExcel() {
-      this.downloadBlob('选修班学员名单\n', '选修班学员名单Excel.txt')
-      this.$message.success('选修班学员名单Excel已下载（前端模拟）')
-    },
-    handleDownloadTemplate() {
-      this.downloadBlob('课程,教材,实施教员,教学场地,计划学时,学分,开课结课日期,报名日期,计划人数,要求说明\n', '选修课数据文件模板.txt')
-      this.$message.success('【选修课数据文件模板】已下载（前端模拟）')
-    },
-
-    // ==================== 操作按钮 ====================
-    handleOpenEarly() {
-      if (this.selectedRows.length === 0) {
-        this.$message.warning('请先选择选修班')
-        return
+    /* ---------- 列表加载 ---------- */
+    fetchList() {
+      this.loading = true
+      const params = {
+        pageNum: this.pageNum,
+        pageSize: this.pageSize
       }
-      this.$message.success('所选班已早开放报名（前端模拟）')
-    },
-    handleCancelEarly() {
-      if (this.selectedRows.length === 0) {
-        this.$message.warning('请先选择选修班')
-        return
-      }
-      this.$message.success('所选班已早取消开放报名（前端模拟）')
-    },
-    handleStopSignup() {
-      if (this.selectedRows.length === 0) {
-        this.$message.warning('请先选择选修班')
-        return
-      }
-      this.$message.success('已批量停止报名（前端模拟）')
-    },
-    handleReverseRange() {
-      if (this.selectedRows.length === 0) {
-        this.$message.warning('请先选择选修班')
-        return
-      }
-      this.$message.success('已根据学员反向确定班次范围（前端模拟）')
-    },
-
-    // ==================== 文件上传 ====================
-    handleSelectFile() {
-      this.$refs.fileInputRef && this.$refs.fileInputRef.click()
-    },
-    handleFileChange(e) {
-      this.selectedFile = e.target.files[0] || null
-    },
-    handleUpload() {
-      if (!this.selectedFile) {
-        this.$message.warning('请先选择文件')
-        return
-      }
-      console.log('上传文件:', this.selectedFile.name)
-      this.$message.success(`文件「${this.selectedFile.name}」上传成功（前端模拟）`)
-    },
-
-    // ==================== 表格多选 ====================
-    handleSelectionChange(rows) {
-      this.selectedRows = rows
-    },
-
-    // ==================== 新建选修课弹窗 ====================
-    handleOpenNew() {
-      Object.assign(this.form, { kcmc: '', js: '', jc: '', jxcd: '', jhsxs: 0, yxsxs: 0, xf: 0, jh: 0 })
-      this.dialogVisible = true
-    },
-    handleNewConfirm() {
-      if (!this.$refs.formRef) return
-      this.$refs.formRef.validate((valid) => {
-        if (!valid) return
-        console.log('新建选修课:', JSON.parse(JSON.stringify(this.form)))
-        this.$message.success('新建选修课成功（前端模拟）')
-        this.dialogVisible = false
+      Object.keys(this.searchForm).forEach(key => {
+        const value = this.searchForm[key]
+        if (value !== '' && value !== null && value !== undefined) {
+          params[key] = value.trim()
+        }
+      })
+      listKb(params).then(response => {
+        const data = (response && response.data) || {}
+        this.tableData = data.records || []
+        this.total = data.total || 0
+      }).catch(() => {
+        this.tableData = []
+        this.total = 0
+      }).finally(() => {
+        this.loading = false
       })
     },
 
-    // ==================== 分页 ====================
-    handlePageChange(page) {
-      this.currentPage = page
+    /* ---------- 查询 / 重置 ---------- */
+    handleQuery() {
+      this.pageNum = 1
+      this.fetchList()
+    },
+    handleReset() {
+      this.searchForm = { kmc: '', kmdm: '', jc: '', jysdh: '', kclx: '', pxlx: '', pxcc: '' }
+      this.pageNum = 1
+      this.fetchList()
     },
 
-    // 表格序号（跨页连续）
-    tableIndex(index) {
-      return (this.currentPage - 1) * this.pageSize + index + 1
+    /* ---------- 分页 ---------- */
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.pageNum = 1
+      this.fetchList()
+    },
+    handlePageChange(page) {
+      this.pageNum = page
+      this.fetchList()
+    },
+
+    /* ---------- 新增 / 编辑 ---------- */
+    handleAdd() {
+      this.isEdit = false
+      this.dialogTitle = '新建课程科目'
+      this.form = this.createEmptyForm()
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.formRef) this.$refs.formRef.clearValidate()
+      })
+    },
+    handleEdit(row) {
+      this.isEdit = true
+      this.dialogTitle = '编辑课程科目'
+      const form = this.createEmptyForm()
+      Object.keys(form).forEach(key => {
+        if (row[key] !== undefined && row[key] !== null) form[key] = row[key]
+      })
+      // 修订日期截断为 yyyy-MM-ddTHH:mm:ss 适配日期控件
+      if (typeof form.xdrq === 'string') form.xdrq = form.xdrq.slice(0, 19)
+      this.form = form
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.formRef) this.$refs.formRef.clearValidate()
+      })
+    },
+    handleSubmit() {
+      this.$refs.formRef.validate(valid => {
+        if (!valid) return
+        this.saving = true
+        const payload = this.cleanPayload(this.form)
+        const req = this.isEdit ? updateKb(payload) : addKb(payload)
+        req.then(() => {
+          this.$message.success(this.isEdit ? '修改成功' : '新增成功')
+          this.dialogVisible = false
+          this.fetchList()
+        }).catch(() => {}).finally(() => {
+          this.saving = false
+        })
+      })
+    },
+
+    /* ---------- 删除 ---------- */
+    handleDelete(row) {
+      this.$confirm('确定删除课程科目「' + (row.kmc || row.kbh) + '」吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return deleteKb(row.kbh)
+      }).then(() => {
+        this.$message.success('删除成功')
+        this.fetchList()
+      }).catch(() => {})
+    },
+
+    /* ---------- 详情 ---------- */
+    handleDetail(row) {
+      this.detailVisible = true
+      this.detailLoading = true
+      this.detailData = {}
+      getKb(row.kbh).then(response => {
+        this.detailData = (response && response.data) || {}
+      }).catch(() => {
+        this.detailData = {}
+      }).finally(() => {
+        this.detailLoading = false
+      })
+    },
+
+    /* ---------- 工具 ---------- */
+    createEmptyForm() {
+      return {
+        kbh: '',
+        kmc: '',
+        jysdh: '',
+        bz: '',
+        xh: '',
+        xf: 0,
+        jc: '',
+        xs: 0,
+        pxcc: '',
+        pxlx: '',
+        kclx: '',
+        ksks: 0,
+        py: '',
+        gfmc: '',
+        cjfz: '',
+        bjrxypjf: 0,
+        jxglbmbh: '',
+        llxs: 0,
+        sjxs: 0,
+        kmdm: '',
+        zks: 0,
+        klx: '',
+        ksksbxs: 0,
+        kctybh: '',
+        sydx: '',
+        fddyks: 0,
+        zxks: 0,
+        bb: '',
+        xdrq: this.getCurrentDateTime(),
+        jcyxj: 0,
+        kczcfs: '',
+        kcjsfs: '',
+        jsonzd: '',
+        zzlkc: 0,
+        khfs: '',
+        xcxcjfz: 0,
+        zjxcjfz: 0,
+        mj: '',
+        pxqk: ''
+      }
+    },
+    /** 当前时间（yyyy-MM-ddTHH:mm:ss，与 el-date-picker value-format 一致） */
+    getCurrentDateTime() {
+      const d = new Date()
+      const pad = n => String(n).padStart(2, '0')
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+    },
+    /** 移除空值（''/null/undefined），保留 0/false 等有效值 */
+    cleanPayload(obj) {
+      const payload = {}
+      Object.keys(obj).forEach(key => {
+        const value = obj[key]
+        if (value !== '' && value !== null && value !== undefined) {
+          payload[key] = value
+        }
+      })
+      return payload
+    },
+    fmtVal(val) {
+      return val === '' || val === null || val === undefined ? '-' : val
+    },
+    fmtFloat(val) {
+      if (val === '' || val === null || val === undefined) return '-'
+      return Number(val)
+    },
+    fmtFlag(val) {
+      return val === 1 || val === '1' || val === true ? '是' : '否'
+    },
+    fmtDateTime(val) {
+      return (val || '').slice(0, 19) || '-'
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-// ==================== 公共区域容器 ====================
-.section-card {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  padding: 16px 20px;
-  margin-bottom: 16px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+.app-container {
+  padding: 20px;
 }
 
-// ==================== 2. 查询条件区域 ====================
-.query-card {
-  .query-field {
-    display: flex;
-    align-items: center;
-    margin-bottom: 14px;
-    min-height: 32px;
+.elective-page {
+  .search-card {
+    margin-bottom: 16px;
 
-    ::v-deep .el-checkbox {
-      margin-right: 6px;
-      flex-shrink: 0;
-    }
-
-    .q-label {
-      width: 120px;
-      flex-shrink: 0;
-      font-size: 13px;
-      color: #303133;
-      text-align: right;
-      margin-right: 10px;
-      white-space: nowrap;
-
-      &.no-check {
-        margin-left: 24px;
+    .search-form {
+      .search-actions {
+        padding-top: 4px;
       }
     }
+  }
 
-    .q-control {
-      flex: 1;
-      min-width: 0;
+  .action-card {
+    margin-bottom: 16px;
+
+    .action-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
     }
   }
 
-  .notice {
-    font-size: 12px;
-    color: #f56c6c;
-    margin-top: 8px;
-    text-align: left;
-  }
-
-  .query-footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid #ebeef5;
-  }
-}
-
-// ==================== 3. 导出按钮区域 ====================
-.export-card {
-  .export-bar {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-  }
-}
-
-// ==================== 4. 操作按钮区域 ====================
-.action-card {
-  .action-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 12px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-// ==================== 5. 文件上传区域 ====================
-.upload-card {
-  .upload-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 12px;
-
-    .upload-left {
+  .table-card {
+    .list-header {
       display: flex;
       align-items: center;
-      gap: 12px;
+      justify-content: space-between;
+      margin-bottom: 16px;
 
-      .file-name {
-        font-size: 12px;
-        color: #999;
-
-        &.has-file {
-          color: #303133;
-        }
+      .list-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
       }
     }
-  }
-}
 
-// ==================== 6. 数据表格区域 ====================
-.table-card {
-  .main-table {
-    ::v-deep .cell {
-      font-size: 12px;
+    .pagination {
+      margin-top: 16px;
+      text-align: right;
     }
   }
 
-  .triple-header,
-  .triple-cell {
-    display: flex;
-    flex-direction: column;
-    line-height: 1.4;
-  }
-
-  .pagination-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 12px;
+  .detail-body {
+    min-height: 60px;
   }
 }
 
-.w-full {
-  width: 100%;
+.add-form {
+  .w-full {
+    width: 100%;
+  }
 }
 
-// ==================== 按钮样式 ====================
-.gray-btn {
-  height: 28px;
-  padding: 2px 16px;
-  font-size: 12px;
-  background: #f5f5f5;
-  border: 1px solid #c0c4cc;
-  color: #333;
-  border-radius: 2px;
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
 
-  &:hover,
-  &:focus {
-    background: #ebebeb;
-    border-color: #c0c4cc;
-    color: #333;
+.detail-empty {
+  padding: 20px;
+  text-align: center;
+  color: #909399;
+}
+
+.danger-text-btn {
+  color: #f56c6c;
+
+  &:hover {
+    color: #f78989;
   }
 }
 </style>