From ee25e066805afc489b5bf36e18bd53490a9fad1f Mon Sep 17 00:00:00 2001
From: zhaichao <zhaichao@fengyingkj.top>
Date: Mon, 24 Aug 2026 10:07:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E6=9C=9F=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/teachBusiness/semester/index.vue    | 277 ++++++++++++++----
 1 file changed, 218 insertions(+), 59 deletions(-)

diff --git a/frontend/src/views/teachBusiness/semester/index.vue b/frontend/src/views/teachBusiness/semester/index.vue
index d13689f2..2fff50f2 100644
--- a/frontend/src/views/teachBusiness/semester/index.vue
+++ b/frontend/src/views/teachBusiness/semester/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container teach-semester">
     <!-- 工具栏 -->
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="semester-toolbar">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新添</el-button>
       </el-col>
@@ -17,62 +17,75 @@
     </el-row>
 
     <!-- 数据表格 -->
-    <el-table
-      v-loading="loading"
-      :data="semesterList"
-      border
-      :height="tableHeight"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" align="center" width="50" />
-      <el-table-column label="学期名称" align="center" min-width="190">
-        <template slot-scope="scope">
-          <span>{{ getSemesterName(scope.row.nd) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="当前" align="center" width="70">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.dqxq" type="success" size="mini">当前</el-tag>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="开学日期" align="center" prop="kxrq" min-width="130">
-        <template slot-scope="scope">
-          <span>{{ formatDate(scope.row.kxrq) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="结束日期" align="center" prop="jsrq" min-width="130">
-        <template slot-scope="scope">
-          <span>{{ formatDate(scope.row.jsrq) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="周数" align="center" prop="sdzs" width="70" />
-      <el-table-column label="调课不审批" align="center" width="100">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.tkbsp ? 'primary' : 'info'" size="mini">{{ scope.row.tkbsp ? '是' : '否' }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="禁止调课" align="center" width="90">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.jztk ? 'danger' : 'info'" size="mini">{{ scope.row.jztk ? '是' : '否' }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="终结成绩定及格" align="center" width="120">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.zjcjdjg ? 'primary' : 'info'" size="mini">{{ scope.row.zjcjdjg ? '是' : '否' }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="课时系数方案" align="center" min-width="120">
-        <template slot-scope="scope">
-          <span>{{ getCoefficientLabel(scope.row.ksxsfabh) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="锁定时长" align="center" min-width="100">
-        <template slot-scope="scope">
-          <span>{{ scope.row.sdjldw || '-' }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="semester-table-wrap">
+      <el-table
+        v-loading="loading"
+        :data="semesterList"
+        border
+        stripe
+        :height="tableHeight"
+        :row-class-name="tableRowClassName"
+        :header-cell-style="{ background: '#F4F8F5', color: '#303133', fontWeight: 600 }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" align="center" width="50" />
+        <el-table-column label="学期名称" align="center" min-width="190">
+          <template slot-scope="scope">
+            <span class="semester-name">
+              <i v-if="scope.row.dqxq" class="semester-name-icon el-icon-star-on"></i>
+              <span>{{ getSemesterName(scope.row.nd) }}</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="当前" align="center" width="80">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.dqxq" type="success" effect="dark" size="mini">当前学期</el-tag>
+            <span v-else class="text-muted">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="开学日期" align="center" min-width="120">
+          <template slot-scope="scope">
+            <span class="date-cell"><i class="el-icon-date"></i>{{ formatDate(scope.row.kxrq) || '—' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结束日期" align="center" min-width="120">
+          <template slot-scope="scope">
+            <span class="date-cell"><i class="el-icon-date"></i>{{ formatDate(scope.row.jsrq) || '—' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="周数" align="center" prop="sdzs" width="80">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.sdzs !== undefined && scope.row.sdzs !== null" type="info" effect="plain" size="mini">{{ scope.row.sdzs }} 周</el-tag>
+            <span v-else class="text-muted">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="调课不审批" align="center" width="116">
+          <template slot-scope="scope">
+            <span :class="boolCellClass(scope.row.tkbsp)">{{ scope.row.tkbsp ? '是' : '否' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="禁止调课" align="center" width="100">
+          <template slot-scope="scope">
+            <span :class="boolCellClass(scope.row.jztk)">{{ scope.row.jztk ? '是' : '否' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="终结成绩定及格" align="center" width="132">
+          <template slot-scope="scope">
+            <span :class="boolCellClass(scope.row.zjcjdjg)">{{ scope.row.zjcjdjg ? '是' : '否' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="课时系数方案" align="center" min-width="120">
+          <template slot-scope="scope">
+            <span>{{ getCoefficientLabel(scope.row.ksxsfabh) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="锁定时长" align="center" min-width="96">
+          <template slot-scope="scope">
+            <span class="lock-cell">{{ scope.row.sdjldw || '—' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
 
     <pagination
       v-show="total > 0"
@@ -335,6 +348,14 @@ export default {
         this.loading = false
       })
     },
+    /** 当前学期行高亮类名 */
+    tableRowClassName({ row }) {
+      return row.dqxq ? 'current-semester-row' : ''
+    },
+    /** 布尔开关单元格样式：是=实心绿点，否=灰色横线标记 */
+    boolCellClass(val) {
+      return val ? 'bool-cell is-true' : 'bool-cell is-false'
+    },
     /** 多选变化 */
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.nd)
@@ -491,8 +512,146 @@ export default {
 
 <style scoped lang="scss">
 .teach-semester {
-  .mb8 {
-    margin-bottom: 8px;
+  /* 页面标题区 */
+  .semester-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-bottom: 14px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  .semester-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+    white-space: nowrap;
+  }
+
+  .title-dot {
+    width: 5px;
+    height: 18px;
+    border-radius: 3px;
+    background: var(--color, #00875A);
+  }
+
+  .semester-subtitle {
+    font-size: 13px;
+    color: #909399;
+    line-height: 1.5;
+    padding-top: 1px;
+  }
+
+  /* 工具栏 */
+  .semester-toolbar {
+    margin-bottom: 14px;
+  }
+
+  /* 表格卡片容器 */
+  .semester-table-wrap {
+    background: #fff;
+    border: 1px solid #ebeef5;
+    border-radius: 8px;
+    padding: 8px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  }
+
+  /* 表头由 header-cell-style 设置底色，这里兜底 */
+  ::v-deep .el-table__header th {
+    font-weight: 600;
+  }
+
+  /* 当前学期行高亮：浅绿底 + 左侧加深强调 */
+  ::v-deep .el-table .current-semester-row td {
+    background: #F2FAF5;
+  }
+
+  ::v-deep .el-table .current-semester-row:hover > td {
+    background: #EAF6EF;
+  }
+
+  ::v-deep .el-table .current-semester-row td:first-child {
+    box-shadow: inset 3px 0 0 #00875A;
+  }
+
+  /* 学期名称 + 当前星标 */
+  .semester-name {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 500;
+    color: #303133;
+  }
+
+  .semester-name-icon {
+    color: #00875A;
+    font-size: 14px;
+  }
+
+  /* 日期单元格 */
+  .date-cell {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: #606266;
+    font-variant-numeric: tabular-nums;
+
+    i {
+      color: #a0a6ad;
+      font-size: 13px;
+    }
+  }
+
+  /* 锁定时长 */
+  .lock-cell {
+    background: #F4F6F8;
+    border: 1px solid #EBEEF5;
+    border-radius: 4px;
+    padding: 1px 8px;
+    font-size: 12px;
+    color: #606266;
+  }
+
+  /* 布尔开关：实心圆点 + 是/否 */
+  .bool-cell {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+    }
+
+    &.is-true {
+      color: #00875A;
+      font-weight: 600;
+
+      &::before {
+        background: #00875A;
+      }
+    }
+
+    &.is-false {
+      color: #C0C4CC;
+
+      &::before {
+        border: 1px solid #CDD1D6;
+        background: transparent;
+      }
+    }
+  }
+
+  .text-muted {
+    color: #C0C4CC;
   }
 
   /* 弹窗内表单：防止 label 文字换行、字段拥挤换行 */