Parcourir la source

style(admin): B-23 nutritionist/orchestration 页面美化

- nutritionist/{HealthCheckins,HealthIndicators,HealthReports,NutritionMappings}: 页头统一 PageHeader,状态/评分 el-tag 迁移 StatusTag,删 scoped sort CSS 重复定义(由全局 sort.css 接管)
- orchestration/{OrchestrationFlow,ExecutionDetail,FlowEditor}: 页头统一 PageHeader,状态 el-tag 迁移 StatusTag(archived default→primary),FlowEditor 面板 CSS 令牌化(--adm-border-split/fill/base/primary/text-*,jsplumb 图表配置色保留)
liaoxg il y a 3 semaines
Parent
commit
b3a21a662c

+ 1 - 13
cfc-web/src/views/nutritionist/HealthCheckins.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="health-checkins page-container">
     <el-card>
-      <div slot="header"><span>健康打卡</span></div>
+      <PageHeader slot="header" title="健康打卡" />
             <div class="adm-table-wrap">
 <el-table :data="checkins" v-loading="loading" border stripe height="100%">
         <el-table-column prop="id" label="ID" width="80">
@@ -70,15 +70,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>

+ 5 - 17
cfc-web/src/views/nutritionist/HealthIndicators.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="health-indicators page-container">
     <el-card>
-      <div slot="header"><span>健康指标</span></div>
+      <PageHeader slot="header" title="健康指标" />
             <div class="adm-table-wrap">
 <el-table :data="indicators" v-loading="loading" border stripe height="100%" :cell-style="cellStyle">
         <el-table-column prop="id" label="ID" width="80">
@@ -34,9 +34,9 @@
             <span class="sort-header" @click.stop="onSortClick('status', $event)">状态<span v-if="sortIndex('status') !== null" class="sort-index" :class="sortClass('status') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('status') }}</span>{{ sortIcon('status') }}</span>
           </template>
           <template slot-scope="{ row }">
-            <el-tag v-if="row.status && row.status !== '正常'" :type="statusTagType(row.status)" size="small">
-              {{ row.status }}
-            </el-tag>
+            <template v-if="row.status && row.status !== '正常'">
+              <StatusTag :type="statusTagType(row.status)" :text="row.status" size="small" />
+            </template>
             <span v-else>{{ row.status || '正常' }}</span>
           </template>
         </el-table-column>
@@ -47,7 +47,7 @@
                 {{ nutrient }}
               </el-tag>
             </template>
-            <span v-else style="color: #999; font-size: 12px">—</span>
+            <span v-else style="color: var(--adm-text-45); font-size: 12px">—</span>
           </template>
         </el-table-column>
         <el-table-column prop="recordedAt" label="记录时间" width="180">
@@ -110,15 +110,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>

+ 4 - 18
cfc-web/src/views/nutritionist/HealthReports.vue

@@ -2,7 +2,7 @@
   <div class="health-reports page-container">
     <el-card>
       <div slot="header">
-        <span>健康报告</span>
+        <PageHeader title="健康报告" />
       </div>
             <div class="adm-table-wrap">
 <el-table :data="reports" v-loading="loading" border stripe height="100%">
@@ -26,9 +26,7 @@
             <span class="sort-header" @click.stop="onSortClick('overallScore', $event)">综合评分<span v-if="sortIndex('overallScore') !== null" class="sort-index" :class="sortClass('overallScore') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('overallScore') }}</span>{{ sortIcon('overallScore') }}</span>
           </template>
           <template slot-scope="{ row }">
-            <el-tag :type="scoreType(row.overallScore)" size="small">
-              {{ row.overallScore ?? '-' }}
-            </el-tag>
+            <StatusTag :type="scoreType(row.overallScore)" :text="row.overallScore != null ? String(row.overallScore) : '-'" />
           </template>
         </el-table-column>
         <el-table-column prop="gutHealthScore" label="肠道" width="80">
@@ -63,9 +61,7 @@
         </el-table-column>
         <el-table-column label="营养缺乏" width="150">
           <template slot-scope="{ row }">
-            <el-tag v-if="row.deficiencyCount > 0" type="danger" size="small">
-              {{ row.deficiencyCount }}项缺乏
-            </el-tag>
+            <StatusTag v-if="row.deficiencyCount > 0" type="danger" size="small" :text="row.deficiencyCount + '项缺乏'" />
             <StatusTag v-else type="success" size="small" text="无缺乏" />
             <el-button size="mini" type="text" @click="triggerAnalysis(row)" style="margin-left: 4px">
               {{ row.deficiencyCount > 0 ? '重新分析' : '分析' }}
@@ -158,14 +154,4 @@ export default {
 }
 </script>
 
-<style scoped>
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-</style>
+

+ 4 - 13
cfc-web/src/views/nutritionist/NutritionMappings.vue

@@ -2,8 +2,9 @@
   <div class="nutrition-mappings page-container">
     <el-card>
       <div slot="header">
-        <span>营养素映射管理</span>
-        <el-button type="primary" size="mini" style="float:right" @click="openCreateDialog">新增映射</el-button>
+        <PageHeader title="营养素映射管理">
+          <el-button type="primary" size="mini" @click="openCreateDialog">新增映射</el-button>
+        </PageHeader>
       </div>
             <div class="adm-table-wrap">
 <el-table height="100%" :data="mappings" v-loading="loading" border stripe>
@@ -200,14 +201,4 @@ export default {
 }
 </script>
 
-<style scoped>
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-</style>
+

+ 5 - 4
cfc-web/src/views/orchestration/ExecutionDetail.vue

@@ -2,8 +2,9 @@
   <div class="page-container">
     <el-card>
       <div slot="header">
-        <span>执行详情</span>
-        <el-button size="small" style="float:right" @click="$router.push('/orchestration')">返回列表</el-button>
+        <PageHeader title="执行详情">
+          <el-button size="small" @click="$router.push('/orchestration')">返回列表</el-button>
+        </PageHeader>
       </div>
 
       <el-descriptions v-if="execution" :column="3" border size="medium" style="margin-bottom:20px">
@@ -11,7 +12,7 @@
         <el-descriptions-item label="流ID">{{ execution.flowId }}</el-descriptions-item>
         <el-descriptions-item label="版本">{{ execution.flowVersion }}</el-descriptions-item>
         <el-descriptions-item label="状态">
-          <el-tag :type="statusType(execution.status)">{{ statusLabel(execution.status) }}</el-tag>
+          <StatusTag :type="statusType(execution.status)" :text="statusLabel(execution.status)" />
         </el-descriptions-item>
         <el-descriptions-item label="触发来源">{{ triggerLabel(execution.triggerSource) }}</el-descriptions-item>
         <el-descriptions-item label="启动时间">{{ formatTime(execution.startedAt) }}</el-descriptions-item>
@@ -32,7 +33,7 @@
         <el-table-column prop="nodeId" label="节点ID" width="160"></el-table-column>
         <el-table-column prop="status" label="状态" width="120">
           <template slot-scope="scope">
-            <el-tag :type="statusType(scope.row.status)" size="small">{{ statusLabel(scope.row.status) }}</el-tag>
+            <StatusTag :type="statusType(scope.row.status)" :text="statusLabel(scope.row.status)" />
           </template>
         </el-table-column>
         <el-table-column prop="generation" label="循环次数" width="100"></el-table-column>

+ 13 - 14
cfc-web/src/views/orchestration/FlowEditor.vue

@@ -2,12 +2,11 @@
   <div class="flow-editor">
     <el-card>
       <div slot="header">
-        <span>编排画布{{ flowId ? '(编辑)' : '(新建)' }}</span>
-        <div style="float:right">
+        <PageHeader :title="flowId ? '编排画布(编辑)' : '编排画布(新建)'">
           <el-button size="small" @click="saveDraft">保存草稿</el-button>
           <el-button size="small" type="primary" @click="publishFlow">发布</el-button>
           <el-button size="small" @click="$router.push('/orchestration')">返回列表</el-button>
-        </div>
+        </PageHeader>
       </div>
 
       <el-form :inline="true">
@@ -359,18 +358,18 @@ export default {
 </script>
 
 <style scoped>
-.editor-layout { display: flex; height: 600px; border: 1px solid #EBEEF5; border-radius: 4px; overflow: hidden; }
-.node-palette { width: 180px; border-right: 1px solid #EBEEF5; padding: 10px; overflow-y: auto; }
+.editor-layout { display: flex; height: 600px; border: 1px solid var(--adm-border-split); border-radius: 4px; overflow: hidden; }
+.node-palette { width: 180px; border-right: 1px solid var(--adm-border-split); padding: 10px; overflow-y: auto; }
 .palette-title { font-weight: bold; margin-bottom: 10px; font-size: 13px; }
-.palette-item { background: #F4F4F5; border-radius: 4px; padding: 8px; margin-bottom: 8px; cursor: grab; font-size: 12px; border: 1px solid #DCDFE6; }
-.palette-item:hover { border-color: #409EFF; color: #409EFF; }
-.palette-empty { color: #909399; font-size: 12px; }
+.palette-item { background: var(--adm-fill); border-radius: 4px; padding: 8px; margin-bottom: 8px; cursor: grab; font-size: 12px; border: 1px solid var(--adm-border-base); }
+.palette-item:hover { border-color: var(--adm-primary); color: var(--adm-primary); }
+.palette-empty { color: var(--adm-text-45); font-size: 12px; }
 .canvas-wrap { flex: 1; position: relative; }
-.jsplumb-canvas { position: relative; width: 100%; height: 100%; background: #FAFAFA; }
-.canvas-tip { position: absolute; bottom: 8px; left: 8px; color: #C0C4CC; font-size: 12px; pointer-events: none; }
-.prop-panel { width: 240px; border-left: 1px solid #EBEEF5; padding: 10px; overflow-y: auto; }
+.jsplumb-canvas { position: relative; width: 100%; height: 100%; background: var(--adm-bg-header); }
+.canvas-tip { position: absolute; bottom: 8px; left: 8px; color: var(--adm-text-25); font-size: 12px; pointer-events: none; }
+.prop-panel { width: 240px; border-left: 1px solid var(--adm-border-split); padding: 10px; overflow-y: auto; }
 .prop-title { font-weight: bold; margin-bottom: 10px; font-size: 13px; }
-.prop-empty { color: #909399; font-size: 12px; }
-.flow-node { position: absolute; width: 120px; padding: 8px; background: #fff; border: 2px solid #409EFF; border-radius: 6px; text-align: center; font-size: 12px; cursor: move; user-select: none; }
-.flow-node .node-id { display: block; color: #C0C4CC; font-size: 10px; margin-top: 2px; }
+.prop-empty { color: var(--adm-text-45); font-size: 12px; }
+.flow-node { position: absolute; width: 120px; padding: 8px; background: var(--adm-bg-container); border: 2px solid var(--adm-primary); border-radius: 6px; text-align: center; font-size: 12px; cursor: move; user-select: none; }
+.flow-node .node-id { display: block; color: var(--adm-text-25); font-size: 10px; margin-top: 2px; }
 </style>

+ 6 - 7
cfc-web/src/views/orchestration/OrchestrationFlow.vue

@@ -2,11 +2,10 @@
   <div class="page-container">
     <el-card>
       <div slot="header">
-        <span>编排流管理</span>
-        <el-button type="primary" size="small" style="float:right;margin-right:10px" @click="handleEdit(null)">
-          新建编排
-        </el-button>
-        <el-button type="primary" size="small" @click="loadList" :loading="loading">刷新</el-button>
+        <PageHeader title="编排流管理">
+          <el-button type="primary" size="small" @click="handleEdit(null)">新建编排</el-button>
+          <el-button type="primary" size="small" @click="loadList" :loading="loading">刷新</el-button>
+        </PageHeader>
       </div>
 
       <!-- 搜索 -->
@@ -32,7 +31,7 @@
         <el-table-column prop="version" label="版本" width="80"></el-table-column>
         <el-table-column prop="status" label="状态" width="100">
           <template slot-scope="scope">
-            <el-tag :type="statusType(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
+            <StatusTag :type="statusType(scope.row.status)" :text="statusLabel(scope.row.status)" />
           </template>
         </el-table-column>
         <el-table-column prop="createdAt" label="创建时间" width="170">
@@ -188,7 +187,7 @@ export default {
       }
     },
     statusType(s) {
-      const map = { draft: 'info', published: 'success', archived: 'default' }
+      const map = { draft: 'info', published: 'success', archived: 'primary' }
       return map[s] || 'info'
     },
     statusLabel(s) {