فهرست منبع

style(admin): B-21 迁移 teacher/{FamilyList,ProxyReport,TeacherAssessment} + 全局 sort.css 令牌化

- 头部统一 PageHeader:FamilyList 我的家庭(搜索框入 extra slot)、ProxyReport 代上传健康报告、TeacherAssessment 家庭DAN测评管理
- 子卡片头统一 SectionTitle:ProxyReport 解析结果预览/AI解读结果/代上传历史记录
- 状态标签统一 StatusTag:ProxyReport 预览绑定态(needBind?warning:success)、TeacherAssessment 启用/关闭态(isEnabled===1?success:info)
- 删重复 scoped sort 样式(与全局 sort.css 重复),sort.css 全局令牌化 #409eff→var(--adm-primary) / #67c23a→var(--adm-success) / #e6a23c→var(--adm-warning)
liaoxg 3 هفته پیش
والد
کامیت
67ad01c8ed

+ 5 - 5
cfc-web/src/assets/css/sort.css

@@ -9,10 +9,10 @@
   gap: 3px;
 }
 .sort-header:hover {
-  color: #409eff;
+  color: var(--adm-primary);
 }
 .sort-asc, .sort-desc {
-  color: #409eff !important;
+  color: var(--adm-primary) !important;
   font-weight: 600;
 }
 
@@ -25,7 +25,7 @@
   height: 14px;
   padding: 0 4px;
   border-radius: 7px;
-  background: #409eff;
+  background: var(--adm-primary);
   color: #fff;
   font-size: 10px;
   font-weight: 600;
@@ -33,10 +33,10 @@
   flex-shrink: 0;
 }
 .sort-index.sort-asc-badge {
-  background: #67c23a;
+  background: var(--adm-success);
 }
 .sort-index.sort-desc-badge {
-  background: #e6a23c;
+  background: var(--adm-warning);
 }
 
 .sort-tag {

+ 3 - 16
cfc-web/src/views/teacher/FamilyList.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="family-list admin-page">
     <el-card>
-      <div slot="header" style="display:flex;justify-content:space-between;align-items:center">
-        <span>我的家庭</span>
-        <el-input v-model="keyword" placeholder="搜索家庭..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
-      </div>
+      <PageHeader title="我的家庭">
+        <el-input v-model="keyword" placeholder="搜索家庭..." prefix-icon="el-icon-search" size="small" clearable style="width:200px" @keyup.enter.native="handleSearch" @clear="handleSearch" />
+      </PageHeader>
         <div class="adm-table-wrap">
 <el-table :data="filteredFamilies" v-loading="loading" border stripe height="100%">
       <el-table-column prop="id" label="ID" width="80">
@@ -109,15 +108,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-</style>

+ 12 - 32
cfc-web/src/views/teacher/ProxyReport.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="proxy-report admin-page">
     <el-card>
-      <div slot="header" class="card-header">
-        <span class="card-title">代上传健康报告</span>
-      </div>
+      <PageHeader slot="header" title="代上传健康报告" />
 
       <!-- 上传区域 -->
       <el-form ref="uploadForm" :model="uploadForm" label-width="100px" class="upload-form">
@@ -46,11 +44,10 @@
 
     <!-- 解析结果预览 -->
     <el-card v-if="previewResult" style="margin-top:20px">
-      <div slot="header" class="card-header">
-        <span class="card-title">解析结果预览</span>
-        <el-tag :type="previewResult.needBind ? 'warning' : 'success'" size="small">
-          {{ previewResult.needBind ? '待绑定成员' : '已匹配成员' }}
-        </el-tag>
+      <div slot="header">
+        <SectionTitle title="解析结果预览">
+          <StatusTag :type="previewResult.needBind ? 'warning' : 'success'" :text="previewResult.needBind ? '待绑定成员' : '已匹配成员'" />
+        </SectionTitle>
       </div>
 
       <el-descriptions :column="2" border>
@@ -70,17 +67,18 @@
 
     <!-- AI解读结果 -->
     <el-card v-if="analysisResult" style="margin-top:20px">
-      <div slot="header" class="card-header">
-        <span class="card-title">AI解读结果</span>
-        <StatusTag type="success" size="small" text="已完成" />
+      <div slot="header">
+        <SectionTitle title="AI解读结果">
+          <StatusTag type="success" size="small" text="已完成" />
+        </SectionTitle>
       </div>
       <div v-html="analysisResult" class="analysis-content"></div>
     </el-card>
 
     <!-- 历史报告列表 -->
     <el-card style="margin-top:20px">
-      <div slot="header" class="card-header">
-        <span class="card-title">代上传历史记录</span>
+      <div slot="header">
+        <SectionTitle title="代上传历史记录" />
       </div>
             <div class="adm-table-wrap">
 <el-table :data="reportList" border stripe v-loading="listLoading" height="100%">
@@ -340,22 +338,13 @@ export default {
 </script>
 
 <style scoped>
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.card-title {
-  font-size: 16px;
-  font-weight: bold;
-}
 .upload-form {
   max-width: 600px;
 }
 .analysis-content {
   font-size: 14px;
   line-height: 1.8;
-  color: #333;
+  color: var(--adm-text-88);
 }
 .analysis-content :deep(p) {
   margin: 8px 0;
@@ -364,13 +353,4 @@ export default {
   margin-top: 20px;
   text-align: right;
 }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
 </style>

+ 4 - 23
cfc-web/src/views/teacher/TeacherAssessment.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="family-assessment admin-page">
     <el-card>
-      <div slot="header" style="display:flex;justify-content:space-between;align-items:center">
-        <span class="card-title">家庭DAN测评管理</span>
-        <el-input v-model="keyword" placeholder="搜索家庭ID..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
-      </div>
+      <PageHeader title="家庭DAN测评管理">
+        <el-input v-model="keyword" placeholder="搜索家庭ID..." prefix-icon="el-icon-search" size="small" clearable style="width:200px" @keyup.enter.native="handleSearch" @clear="handleSearch" />
+      </PageHeader>
 
         <div class="adm-table-wrap">
 <el-table :data="filteredConfigs" border stripe v-loading="loading" height="100%">
@@ -49,9 +48,7 @@
       </el-table-column>
       <el-table-column label="状态" width="80">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.isEnabled === 1 ? 'success' : 'info'" size="small">
-            {{ scope.row.isEnabled === 1 ? '启用' : '关闭' }}
-          </el-tag>
+          <StatusTag :type="scope.row.isEnabled === 1 ? 'success' : 'info'" :text="scope.row.isEnabled === 1 ? '启用' : '关闭'" />
         </template>
       </el-table-column>
       <el-table-column label="操作" width="200" fixed="right">
@@ -242,20 +239,4 @@ export default {
 .family-assessment {
   padding: 20px;
 }
-
-.card-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
 </style>