@@ -19,19 +19,46 @@
< el-select
v-if = "config.initialized && selectedJournalId"
v-model = "headerPromotionFactoryId"
class = "header-factory-task-select"
class = "header-factory-task-select custom-pipeline-select "
size = "small"
filterable
:loading = "factoryTasksHeaderLoading"
:placeholder = "$t('autoPromotionLogs.factoryTaskSelectPlaceholder')"
@change ="onHeaderFactoryTaskChange"
popper -class = " pipeline -popper "
>
< el-option
v-for = "opt in factoryTaskOptions"
:key = "opt.value"
:label = "opt.label"
:value = "opt.value"
/ >
< el-option-group >
< el-option
v-for = "opt in factoryTaskOptions"
:key = "opt.value"
:label = "opt.label"
:value = "opt.value"
class = "pipeline-option"
>
< div class = "option-content" >
< div class = "row-top" >
< span class = "task-title" > { { mapFactoryTaskTypeLabel ( opt . task . type ) } } < / span >
< el-tag :type = "getStatusType(opt.task.start_promotion)" size = "mini" effect = "plain" class = "status-tag" >
{ { opt . task . start _promotion == 1 ? $t ( 'autoPromotion.running' ) : $t ( 'autoPromotion.stopped' ) } }
< / el-tag >
< / div >
< div class = "row-bottom" >
< span class = "meta-item database" > { { mapFactoryExpertTypeLabel ( opt . task . expert _type ) } } < / span >
< template v-if = "opt.task.expert_type==5" >
< span class = "separator" > • < / span >
< span class = "meta-item region" > { { opt . task . country _scope _label } } < / span >
< / template >
< span class = "separator" > • < / span >
< span class = "meta-item time" > { { opt . task . ctime _text } } < / span >
< / div >
< / div >
< / el-option >
< / el-option-group >
< / el-select >
< el-tag
v-if = "config.initialized && selectedJournalId && headerFactoryTaskRunning !== null"
@@ -45,19 +72,10 @@
{ { headerFactoryTaskRunning ? $t ( 'autoPromotion.running' ) : $t ( 'autoPromotion.stopped' ) } }
< / el-tag >
<!-- < template v-if = "config.initialized" > - - >
<!-- < el-tag type = "success" size = "small" effect = "plain" style = "margin-left: 10px" >
< i class = "el-icon-circle-check" > < / i > { { $t ( 'autoPromotionLogs.c onfigured ' ) } }
< / el-tag > -- >
< el-button type = "text" size = "small" style = "margin-left: 10px" @click ="openFactoryTaskDialogFromLogs" >
< i class = "el-icon-edit" > < / i >
{ { config . initialized ? $t ( 'autoPromotionLogs.editConfig' ) : $t ( 'autoPromotionLogs.startConfig' ) } }
< / el-button >
<!-- < / template > -- >
<!-- < el-tag v-else type = "info" size = "small" effect = "plain" style = "margin-left: 10px" >
< i class = "el-icon-info" > < / i > { { $t ( 'autoPromotionLogs.notConfigured' ) } }
< / el-tag > -- >
< el-button type = "text" size = "small" style = "margin-left: 10px" @click ="openFactoryTaskDialogFromLogs" >
< i class = "el-icon-edit" > < / i >
{ { config . initialized ? $t ( 'autoPromotionLogs.editConfig' ) : $t ( 'autoPromotionLogs.startC onfig' ) } }
< / el-button >
< / div >
< div v-if = "config.initialized && selectedJournalId && headerPromotionFactoryId" class="right" >
< el -button
@@ -100,8 +118,6 @@
< div v-else class = "manage-mode" >
< el-card shadow = "never" class = "list-card" >
< div class = "filter-header-row" >
< div class = "tmr-capsule-group" >
< el-tabs v-model = "query.state" type="card" @tab-click="handleTabClick" >
@@ -135,7 +151,9 @@
< div class = "task-column" >
< div class = "task-name" > { { scope . row . task _name || '-' } } < / div >
< div class = "task-id-tags" >
< span class = "id-tag" > { { $t ( 'autoPromotionLogs.templateIdLabel' ) } } : { { scope . row . template _id } } < / span >
< span class = "id-tag"
> { { $t ( 'autoPromotionLogs.templateIdLabel' ) } } : { { scope . row . template _id } } < / s p a n
>
< span class = "id-tag" > { { $t ( 'autoPromotionLogs.styleIdLabel' ) } } : { { scope . row . style _id } } < / span >
< / div >
< / div >
@@ -224,7 +242,11 @@
: icon = "String(scope.row.state) === '5' ? 'el-icon-edit-outline' : 'el-icon-view'"
@click ="previewRow(scope.row)"
>
{ { String ( scope . row . state ) === '5' ? $t ( 'autoPromotionLogs.editAction' ) : $t ( 'autoPromotionLogs.previewAction' ) } }
{ {
String ( scope . row . state ) === '5'
? $t ( 'autoPromotionLogs.editAction' )
: $t ( 'autoPromotionLogs.previewAction' )
} }
< / el-button >
< / div >
< / template >
@@ -427,6 +449,36 @@ export default {
const opt = this . factoryTaskOptions . find ( ( o ) => String ( o . value ) === id ) ;
if ( opt && typeof opt . running === 'boolean' ) return opt . running ;
return null ;
} ,
/**
* 顶部 select 前缀展示用:与 headerPromotionFactoryId 对应的 option( 含 task) 。
* URL 回退插入的占位项可能没有 task, 这里统一成可安全渲染的对象。
*/
currentSelectedTask ( ) {
const emptyTask = { type : '' , ctime _text : '' } ;
const id = String ( this . headerPromotionFactoryId || '' ) . trim ( ) ;
if ( ! id || ! Array . isArray ( this . factoryTaskOptions ) || ! this . factoryTaskOptions . length ) {
return { value : '' , label : '' , running : false , task : { ... emptyTask } } ;
}
const opt = this . factoryTaskOptions . find ( ( o ) => String ( o . value ) === id ) ;
if ( ! opt ) {
return { value : id , label : id , running : false , task : { ... emptyTask } } ;
}
const raw = opt . task && typeof opt . task === 'object' ? opt . task : { } ;
const ctimeText =
raw . ctime _text != null && String ( raw . ctime _text ) . trim ( ) !== ''
? String ( raw . ctime _text ) . trim ( )
: this . formatFactoryHeaderTaskCreateTime ( raw ) ;
return {
value : opt . value ,
label : opt . label ,
running : typeof opt . running === 'boolean' ? opt . running : this . isFactoryHeaderTaskRunning ( raw ) ,
task : {
... raw ,
type : raw . type != null ? String ( raw . type ) : '' ,
ctime _text : ctimeText || ''
}
} ;
}
} ,
watch : {
@@ -445,12 +497,33 @@ export default {
this . initPage ( ) ;
} ,
methods : {
mapFactoryTaskTypeLabel ( type ) {
const t = String ( type || '' ) ;
if ( t === '1' ) return this . $t ( 'autoPromotion.factoryScenarioSolicit' ) ;
if ( t === '2' ) return this . $t ( 'autoPromotion.factoryScenarioPromoteCitation' ) ;
if ( t === '3' ) return this . $t ( 'autoPromotion.factoryScenarioGeneralThanks' ) ;
if ( t === '4' ) return this . $t ( 'autoPromotion.autoSolicit' ) ;
return this . $t ( 'autoPromotion.autoSolicit' ) ;
} ,
mapFactoryExpertTypeLabel ( expertType ) {
const t = String ( expertType || '' ) . trim ( ) ;
if ( t === '1' ) return this . $t ( 'autoPromotion.factoryExpertChief' ) ;
if ( t === '2' ) return this . $t ( 'autoPromotion.factoryExpertBoard' ) ;
if ( t === '3' ) return this . $t ( 'autoPromotion.factoryExpertYoungBoard' ) ;
if ( t === '4' ) return this . $t ( 'autoPromotion.factoryExpertAuthor' ) ;
if ( t === '5' ) return this . $t ( 'autoPromotion.factoryExpertDb' ) ;
return '-' ;
} ,
getStatusType ( status ) {
return status == 1 ? 'success' : 'info' ;
} ,
handleTabClick ( tab ) {
// tab.name 对应的就是原来的 value ("0", "1" 等)
// 注意: el-tabs 的 v-model 绑定的是字符串
this . query . state = tab . name ;
this . handleStateChange ( ) ; // 触发你原有的搜索逻辑
} ,
// tab.name 对应的就是原来的 value ("0", "1" 等)
// 注意: el-tabs 的 v-model 绑定的是字符串
this . query . state = tab . name ;
this . handleStateChange ( ) ; // 触发你原有的搜索逻辑
} ,
getPercent ( row ) {
if ( ! row . total _count || row . total _count === 0 ) return 0 ;
// 计算已发送占比
@@ -554,9 +627,7 @@ export default {
this . hidePage = false ;
var journal _id = ( this . $route . query && this . $route . query . journal _id ) || '' ;
var pfid =
( this . $route . query && this . $route . query . promotion _factory _id ) ||
( this . $route . query && this . $route . query . taskId ) ||
'' ;
( this . $route . query && this . $route . query . promotion _factory _id ) || ( this . $route . query && this . $route . query . taskId ) || '' ;
this . routePromotionFactoryId = String ( pfid || '' ) ;
this . headerPromotionFactoryId = this . routePromotionFactoryId ;
this . selectedJournalId = String ( journal _id ) ;
@@ -662,7 +733,7 @@ export default {
}
if ( ! dt || isNaN ( dt . getTime ( ) ) ) return String ( raw ) . trim ( ) ;
const pad = ( v ) => String ( v ) . padStart ( 2 , '0' ) ;
return ` ${ dt . getFullYear ( ) } - ${ pad ( dt . getMonth ( ) + 1 ) } - ${ pad ( dt . getDate ( ) ) } ${ pad ( dt . getHours ( ) ) } : ${ pad ( dt . getMinutes ( ) ) } : ${ pad ( dt . getSeconds ( ) ) } `;
return ` ${ dt . getFullYear ( ) } - ${ pad ( dt . getMonth ( ) + 1 ) } - ${ pad ( dt . getDate ( ) ) } ` ;
} ,
isFactoryHeaderTaskRunning ( task ) {
if ( ! task || typeof task !== 'object' ) return false ;
@@ -676,9 +747,12 @@ export default {
} ,
/** 下拉仅展示「类型 - 创建日期」,运行状态单独用 el-tag */
buildFactoryHeaderOptionMainLabel ( task , pidFallback ) {
console . log ( "🚀 ~ buildFactoryHeaderOptionMainLabel ~ task:" , task ) ;
const typePart = this . getFactoryHeaderTaskTypeLabel ( task ) || String ( pidFallback || '' ) . trim ( ) || '—' ;
const expertTypePart = this . mapFactoryExpertTypeLabel ( task . expert _type ) ;
const datePart = this . formatFactoryHeaderTaskCreateTime ( task ) ;
return datePart ? ` ${ typePart } - ${ datePart } ` : typePart ;
return datePart ? ` ${ typePart } | ${ expertTypePart } ${ task . expert _type == 5 ? ` | ${ task . country _scope _label } ` : '' } | ${ datePart } ` : typePart ;
} ,
replacePromotionFactoryIdInUrl ( promotionFactoryId ) {
try {
@@ -704,18 +778,20 @@ export default {
} ) ;
const payload = ( res && res . data ) || { } ;
const list = this . findArray ( payload ) || this . findArray ( res ) || [ ] ;
let opts = ( Array . isArray ( list ) ? list : [ ] ) . map ( ( task , idx ) => {
const p id =
task && task . promotion _factory _ id ! = null
? String ( task . promotion _factory _id )
: task && task . id != null
? String ( task . id )
: '' ;
if ( ! pid ) return null ;
const label = this . buildFactoryHeaderOptionMainLabel ( task , pid ) ;
const running = this . is FactoryHeaderTaskRunning ( task ) ;
return { value : pid , label , running } ;
} ) . filter ( Boolean ) ;
let opts = ( Array . isArray ( list ) ? list : [ ] )
. map ( ( task , idx ) => {
const p id =
task && task . promotion _factory _id != null
? String ( task . promotion _factory _id )
: task && task . id != null
? String ( task . id )
: '' ;
if ( ! pid ) return null ;
const label = this . build FactoryHeaderOptionMainLabel ( task , pid ) ;
const running = this . isFactoryHeaderTaskRunning ( task ) ;
return { value : pid , label , running , task : task }
} )
. filter ( Boolean ) ;
let cur = String ( this . routePromotionFactoryId || this . headerPromotionFactoryId || '' ) . trim ( ) ;
const ids = new Set ( opts . map ( ( o ) => o . value ) ) ;
@@ -799,10 +875,14 @@ export default {
selectedPayload . country _fetch _ids != null
? selectedPayload . country _fetch _ids
: selectedPayload . country _ids != null
? selectedPayload . country _ids
: '' ;
? selectedPayload . country _ids
: '' ;
if ( typeof raw === 'string' && raw . trim ( ) ) {
return raw . split ( ',' ) . map ( ( s ) => s . trim ( ) ) . filter ( Boolean ) . map ( String ) ;
return raw
. split ( ',' )
. map ( ( s ) => s . trim ( ) )
. filter ( Boolean )
. map ( String ) ;
}
return [ ] ;
} ,
@@ -825,7 +905,7 @@ export default {
let availableArr = this . findArray ( availablePayload ) ;
if ( ! availableArr ) availableArr = Array . isArray ( availablePayload ) ? availablePayload : [ ] ;
this . availableFields = availableArr . map ( ( item , idx ) => {
const id = item . expert _fetch _id || item . fetch _id || item . id || item . field _id || ( idx + 1 ) ;
const id = item . expert _fetch _id || item . fetch _id || item . id || item . field _id || idx + 1 ;
const label = item . field || item . title || item . name || item . label || String ( id ) ;
return { id : String ( id ) , label } ;
} ) ;
@@ -898,10 +978,10 @@ export default {
matched . promotion _factory _id != null
? String ( matched . promotion _factory _id )
: matched . id != null
? String ( matched . id )
: matched . task _id != null
? String ( matched . task _id )
: '' ;
? String ( matched . id )
: matched . task _id != null
? String ( matched . task _id )
: '' ;
}
}
// promotion_factory/getDetail 必须使用地址栏 promotion_factory_id, 避免列表首行 id 与路由不一致
@@ -1048,11 +1128,7 @@ export default {
const runAt = item . run _at || item . run _time || item . plan _time || item . execute _time || item . send _date || '' ;
const state = String ( item . state != null ? item . state : '' ) ;
const promotionFactoryId =
item . promotion _factory _id != null
? item . promotion _factory _id
: item . id != null
? item . id
: item . task _id ;
item . promotion _factory _id != null ? item . promotion _factory _id : item . id != null ? item . id : item . task _id ;
return {
id : item . id || item . task _id || ` task_ ${ idx + 1 } ` ,
promotion _factory _id : promotionFactoryId != null ? String ( promotionFactoryId ) : '' ,
@@ -1206,16 +1282,16 @@ export default {
return Object . prototype . hasOwnProperty . call ( stateTextMap , key ) ? stateTextMap [ key ] : '-' ;
} ,
getTaskStatusClass ( state ) {
const stateClassMap = {
0 : 'status-draft' , // Draft - 浅灰色
5 : 'status-preparing' , // Preparing - 橘色
1 : 'status-running' , // Running - 深蓝色
2 : 'status-paused' , // Paused - 深灰色
3 : 'status-completed' , // Completed - 绿色
4 : 'status-cancelled' // Cancelled - 浅红色
} ;
return stateClassMap [ Number ( state ) ] || '' ;
}
const stateClassMap = {
0 : 'status-draft' , // Draft - 浅灰色
5 : 'status-preparing' , // Preparing - 橘色
1 : 'status-running' , // Running - 深蓝色
2 : 'status-paused' , // Paused - 深灰色
3 : 'status-completed' , // Completed - 绿色
4 : 'status-cancelled' // Cancelled - 浅红色
} ;
return stateClassMap [ Number ( state ) ] || '' ;
}
}
} ;
< / script >
@@ -1229,11 +1305,13 @@ export default {
margin - bottom : 15 px ;
}
. config - bar {
width : 100 % ;
display : flex ;
justify - content : space - between ;
align - items : center ;
}
. config - bar . left {
width : calc ( 100 % - 100 px ) ;
display : flex ;
flex - wrap : wrap ;
align - items : center ;
@@ -1758,96 +1836,96 @@ export default {
}
. filter - header - row {
display : flex ;
align - items : center ; /* 垂直居中对齐 */
gap : 16 px ; /* 胶囊和Search按钮之间的间距 */
margin - bottom : 16 px ;
background - color : transparent ; /* 容器透明,不厚重 */
display : flex ;
align - items : center ; /* 垂直居中对齐 */
gap : 16 px ; /* 胶囊和Search按钮之间的间距 */
margin - bottom : 16 px ;
background - color : transparent ; /* 容器透明,不厚重 */
}
/* 2. 彻底重置 el-tabs 的原生样式 (最丑的地方) */
. tmr - capsule - group {
flex : 1 ; /* 占据左侧空间 */
flex : 1 ; /* 占据左侧空间 */
}
/* 强制隐藏默认灰色横线和卡片灰边 */
. tmr - capsule - group . el - tabs _ _header {
margin : 0 ! important ;
border - bottom : none ! important ;
margin : 0 ! important ;
border - bottom : none ! important ;
}
. tmr - capsule - group . el - tabs _ _nav {
border : none ! important ;
border : none ! important ;
}
/* 3. 重新定义每个 Tab 的样式 (让其变成按钮) */
. tmr - capsule - group . el - tabs -- card > . el - tabs _ _header . el - tabs _ _item {
height : 32 px ! important ; /* 紧凑高度 */
line - height : 32 px ! important ;
font - size : 13 px ; /* 紧凑字体 */
border : none ! important ; /* 彻底隐藏原生卡片边框 */
background - color : transparent ; /* 默认状态下透明背景 */
color : # 515 a6e ; /* 默认状态深灰文字,更专业 */
transition : all 0.2 s ease - in - out ;
padding : 0 16 px ! important ; /* 适当内边距 */
margin - right : 8 px ; /* 每个 Tab 之间的间距 */
border - radius : 6 px ! important ; /* 先统一圆角 */
overflow : visible ; /* 确保选中的阴影显示完全 */
height : 32 px ! important ; /* 紧凑高度 */
line - height : 32 px ! important ;
font - size : 13 px ; /* 紧凑字体 */
border : none ! important ; /* 彻底隐藏原生卡片边框 */
background - color : transparent ; /* 默认状态下透明背景 */
color : # 515 a6e ; /* 默认状态深灰文字,更专业 */
transition : all 0.2 s ease - in - out ;
padding : 0 16 px ! important ; /* 适当内边距 */
margin - right : 8 px ; /* 每个 Tab 之间的间距 */
border - radius : 6 px ! important ; /* 先统一圆角 */
overflow : visible ; /* 确保选中的阴影显示完全 */
}
/* 首尾 Tab 的圆角处理 (形成整体感) */
. tmr - capsule - group . el - tabs -- card > . el - tabs _ _header . el - tabs _ _item : first - child {
border - top - left - radius : 6 px ;
border - bottom - left - radius : 6 px ;
border - top - left - radius : 6 px ;
border - bottom - left - radius : 6 px ;
}
. tmr - capsule - group . el - tabs -- card > . el - tabs _ _header . el - tabs _ _item : last - child {
border - top - right - radius : 6 px ;
border - bottom - right - radius : 6 px ;
margin - right : 0 ;
border - top - right - radius : 6 px ;
border - bottom - right - radius : 6 px ;
margin - right : 0 ;
}
/* 中间 Tab 的处理 (去掉左右圆角,紧凑对齐) */
. tmr - capsule - group . el - tabs -- card > . el - tabs _ _header . el - tabs _ _item : not ( : first - child ) : not ( : last - child ) {
border - radius : 0 ;
border - radius : 0 ;
}
/* 4. **选中效果 (Active) - 胶囊浮动核心** */
. tmr - capsule - group . el - tabs -- card > . el - tabs _ _header . el - tabs _ _item . is - active {
background - color : # ffffff ! important ; /* 白色底色 */
color : # 409 eff ! important ; /* 主题蓝色文字 */
font - weight : 500 ;
box - shadow : 0 2 px 4 px rgba ( 0 , 0 , 0 , 0.1 ) ! important ; /* **关键:增加轻微阴影,浮动感** */
border - radius : 6 px ; /* 选中时恢复圆角 */
position : relative ;
z - index : 2 ; /* 确保选中态在最前面,不被覆盖线破坏 */
background - color : # ffffff ! important ; /* 白色底色 */
color : # 409 eff ! important ; /* 主题蓝色文字 */
font - weight : 500 ;
box - shadow : 0 2 px 4 px rgba ( 0 , 0 , 0 , 0.1 ) ! important ; /* **关键:增加轻微阴影,浮动感** */
border - radius : 6 px ; /* 选中时恢复圆角 */
position : relative ;
z - index : 2 ; /* 确保选中态在最前面,不被覆盖线破坏 */
}
/* 5. 处理 Tab 之间的断层 (像素级微调) */
. tmr - capsule - group . el - tabs -- card > . el - tabs _ _header . el - tabs _ _item {
position : relative ;
position : relative ;
}
/* 首尾 Tab 之间的像素级处理 */
. tmr - capsule - group . el - tabs -- card > . el - tabs _ _header . el - tabs _ _item : not ( : last - child ) : : after {
content : '' ;
position : absolute ;
right : - 5 px ; /* 让 Tab 之间紧密无缝 */
top : 0 ;
height : 100 % ;
width : 1 px ;
background : transparent ; /* 移除灰线,不丑 */
content : '' ;
position : absolute ;
right : - 5 px ; /* 让 Tab 之间紧密无缝 */
top : 0 ;
height : 100 % ;
width : 1 px ;
background : transparent ; /* 移除灰线,不丑 */
}
/* 6. 搜索按钮对齐微调 */
. filter - actions . el - button {
height : 32 px ; /* 与 Tab 高度一致 */
padding : 0 16 px ;
border - radius : 6 px ;
transition : all 0.2 s ;
height : 32 px ; /* 与 Tab 高度一致 */
padding : 0 16 px ;
border - radius : 6 px ;
transition : all 0.2 s ;
}
. filter - actions {
margin - left : auto ;
margin - left : auto ;
}
/* 基础 Badge 样式 */
. status - badge {
@@ -1894,21 +1972,25 @@ export default {
background - color : # f1f5f9 ;
color : # 64748 b ;
}
. status - draft : : before { background - color : # 94 a3b8 ; }
. status - draft : : before {
background - color : # 94 a3b8 ;
}
/* 5: Preparing - 橘色 */
. status - preparing {
background - color : # fff7ed ;
color : # c2410c ;
}
. status - preparing : : before { background - color : # f97316 ; }
. status - preparing : : before {
background - color : # f97316 ;
}
/* 1: Running - 深蓝色 */
. status - running {
background - color : # eff6ff ;
color : # 1 d4ed8 ;
}
. status - running : : before {
. status - running : : before {
background - color : # 3 b82f6 ;
box - shadow : 0 0 4 px rgba ( 59 , 130 , 246 , 0.5 ) ; /* 模拟运行中的发光感 */
}
@@ -1919,19 +2001,104 @@ export default {
color : # 334155 ;
border : 1 px solid # e2e8f0 ; /* 停用状态加个微边框增加分量感 */
}
. status - paused : : before { background - color : # 475569 ; }
. status - paused : : before {
background - color : # 475569 ;
}
/* 3: Completed - 绿色 */
. status - completed {
background - color : # f0fdf4 ;
color : # 15803 d ;
}
. status - completed : : before { background - color : # 22 c55e ; }
. status - completed : : before {
background - color : # 22 c55e ;
}
/* 4: Cancelled - 浅红色 */
. status - cancelled {
background - color : # fef2f2 ;
color : # b91c1c ;
}
. status - cancelled : : before { background - color : # ef4444 ; }
. status - cancelled : : before {
background - color : # ef4444 ;
}
/* 基础 Select 宽度 */
. custom - pipeline - select {
width : 580 px ;
}
/* 分组标题( el-option-group, 避免在 ul 内放 div) */
. pipeline - popper . el - select - group _ _title {
padding : 10 px 20 px ;
font - size : 12 px ;
font - weight : bold ;
color : # 909399 ;
letter - spacing : 1 px ;
border - bottom : 1 px solid # f0f2f5 ;
line - height : 1.2 ;
}
/* 单个选项容器 */
. pipeline - popper . el - select - dropdown _ _item {
height : auto ; /* 允许高度自适应 */
padding : 12 px 20 px ;
line - height : normal ;
border - left : 3 px solid transparent ; /* 预留边框位置防止抖动 */
}
/* 选中状态 */
. pipeline - popper . el - select - dropdown _ _item . selected {
background - color : # f5f7fa ;
border - left : 3 px solid # 409 eff ; /* 选中时的左侧蓝条 */
color : # 606266 ; /* 覆盖 Element 默认高亮色 */
}
/* 选项内容布局 */
. pipeline - popper . option - content {
display : flex ;
flex - direction : column ;
gap : 6 px ;
}
/* 第一行:标题 + 状态标签 */
. pipeline - popper . option - content . row - top {
display : flex ;
justify - content : space - between ;
align - items : center ;
}
. pipeline - popper . option - content . row - top . task - title {
font - weight : 600 ;
color : # 303133 ;
font - size : 14 px ;
}
. pipeline - popper . option - content . row - top . status - tag {
border - radius : 12 px ;
padding : 0 8 px ;
height : 20 px ;
line - height : 18 px ;
}
/* 第二行:元数据信息 */
. pipeline - popper . option - content . row - bottom {
display : flex ;
align - items : center ;
font - size : 11 px ;
color : # 909399 ;
}
. pipeline - popper . option - content . row - bottom . meta - item . database {
color : # 5856 d6 ;
font - weight : bold ;
/* text-transform: uppercase; */
}
. pipeline - popper . option - content . row - bottom . separator {
margin : 0 6 px ;
color : # dcdfe6 ;
}
< / style >