refactor: make applicable condition a read-only tag in card header

Applicable is preset-defined, not editable on card

Shown as grey tag after action label: \u5c01\u53f7/\u5220\u9664\u8d26\u53f7 (\u975e\u5c01\u5b58\u8d26\u53f7)

Remove applicable dropdown from card body, onApplicableChange handler
This commit is contained in:
mediabot-pt
2026-07-06 23:02:16 +08:00
parent 194ce96f39
commit 1cea882d9d

View File

@@ -92,6 +92,7 @@
<span v-else class="rule-fixed-text">{{ metricLabel(rule.metric) }} {{ condLabel(rule.condition) }} {{ rule.threshold }}{{ rule.unit || '' }}</span>
<span class="then-arrow" :style="rule.type==='EXEMPT'?'color:#67c23a':rule.type==='RATIO'||rule.type==='DRATIO'?'color:#e6a23c':''">→</span>
<span :style="{fontWeight:'600',fontSize:'13px',color:rule.type==='EXEMPT'?'#67c23a':rule.type==='RATIO'||rule.type==='DRATIO'?'#e6a23c':'#f56c6c'}">{{ rule.type==='EXEMPT' ? '保号' : rule.type==='RATIO'||rule.type==='DRATIO' ? '封号(缓刑7天)' : '封号/删除账号' }}</span>
<span v-if="rule.applicable" class="applicable-tag">{{ applicableLabel(rule.applicable) }}</span>
</div>
<div class="card-header-right">
<span class="rule-index">#{{ idx + 1 }}</span>
@@ -163,15 +164,6 @@
<span v-else class="field-hint">{{ rule.unit || '' }}</span>
</div>
</template>
<!-- 适用条件(通用) -->
<div class="field-row">
<span class="field-label">适用条件</span>
<el-select v-model="rule.applicable" size="small" @change="onApplicableChange(rule)" placeholder="无条件(始终适用)" style="width:200px">
<el-option value="" label="无条件" />
<el-option v-for="x in applicableOptions" :key="x.value" :label="x.label" :value="x.value" />
</el-select>
</div>
</div>
</div>
</div>
@@ -260,16 +252,7 @@ const taskReqDefaults = [
{ metric:'avg_seed_time', label:'平均做种时间', threshold:24, unit:'小时', condition:'GTE', enabled:true },
]
const onApplicableChange = (rule) => {
const key = `${rule.type}|${rule.applicable||''}`
if (parsed.value.some(r => r !== rule && `${r.type}|${r.applicable||''}` === key)) {
ElMessage.warning('同类型+适用条件的规则已存在')
rule.applicable = ''
sync()
return
}
sync()
}
const applicableLabel = (v) => applicableOptions.find(x => x.value === v)?.label || v
// ============ 预设规则模板 ============
const presets = [
@@ -320,7 +303,7 @@ const sortedRules = computed(() => {
})
const ruleText = (r) => {
const appText = r.applicable ? `(${applicableOptions.find(x=>x.value===r.applicable)?.label||r.applicable})` : ''
const appText = r.applicable ? `(${applicableLabel(r.applicable)})` : ''
if (r.type === 'EXEMPT') {
return `等级豁免:永久保留 ≥ ${rankDisplay(r.permRank)}、封存豁免 ≥ ${rankDisplay(r.sealExemptRank)} → <span style="color:#67c23a;font-weight:500">保号</span>`
}
@@ -447,6 +430,7 @@ onMounted(fetchAll)
.card-body { padding: 6px 12px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rule-fixed-text { font-size: 13px; color: #303133; }
.type-tag { font-size: 12px; color: #303133; font-weight: 500; }
.applicable-tag { font-size: 11px; color: #909399; margin-left: 2px; }
.field-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.field-label { font-weight: 500; color: #606266; font-size: 12px; min-width: 56px; }