sxbh_admin/cma-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): CMA前端UI优化P0 - BSC变量+公共类+统一标题+色值替换+内联style替换

Browse Source
This commit is contained in:
Hermes CI Fix
2026-07-17 16:35:54 +08:00
parent 7f0f74a6e9
commit c82bd5b40f
11 changed files with 93 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ActionPlanLibrary.vue
+16 -13
View File
@@ -1,7 +1,10 @@
<template>
<div style="padding:0 16px;">
<div class="page-view">
<div class="page-header">
<h3 class="page-title">行动方案库</h3>
</div>
<!-- 顶部tabs -->
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
<div class="flex-between" style="margin-bottom:12px;">
<div>
<el-radio-group v-model="activeTab" size="small">
<el-radio-button value="plans">行动方案</el-radio-button>
@@ -17,7 +20,7 @@
<!-- ===== 行动方案列表 ===== -->
<template v-if="activeTab === 'plans'">
<!-- 状态统计卡片 -->
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
<div class="flex-row flex-wrap" style="margin-bottom:16px;">
<div v-for="card in statCards" :key="card.key"
:class="['stat-card', { active: filterStatus === card.key }]"
@click="filterStatus = card.key; page = 1; loadData()"
@@ -28,7 +31,7 @@
</div>
<!-- 筛选栏 -->
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center;">
<div class="flex-row" style="gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center;">
<el-select v-model="filterDimension" placeholder="维度" clearable style="width:100px;" @change="page=1;loadData()">
<el-option v-for="d in dimensions" :key="d.value" :label="d.label" :value="d.value" />
</el-select>
@@ -92,7 +95,7 @@
<el-table-column label="截止日" width="100" prop="due_date">
<template #default="{ row }">
<span v-if="!row.due_date" style="color:#ccc;">—</span>
<span v-else :style="{ color: isOverdue(row) ? '#f56c6c' : '#666', fontWeight: isOverdue(row) ? 600 : 400 }">
<span v-else :style="{ color: isOverdue(row) ? 'var(--bsc-finance)' : '#666', fontWeight: isOverdue(row) ? 600 : 400 }">
{{ row.due_date?.slice(0, 10) }}
<el-tooltip v-if="isOverdue(row)" content="已逾期" placement="top"><span style="margin-left:2px;">⚠️</span></el-tooltip>
</span>
@@ -112,7 +115,7 @@
</el-table>
<!-- 批量操作栏 -->
<div v-if="selectedRows.length > 0" style="margin-top:8px;display:flex;gap:8px;align-items:center;padding:8px 12px;background:#f0f9ff;border-radius:6px;">
<div v-if="selectedRows.length > 0" class="flex-row" style="margin-top:8px;padding:8px 12px;background:#f0f9ff;border-radius:6px;">
<span style="font-size:13px;color:#409eff;">已选 {{ selectedRows.length }} 项</span>
<el-button size="small" @click="batchSetStatus('in_progress')">置为进行中</el-button>
<el-button size="small" type="success" @click="batchSetStatus('completed')">置为已完成</el-button>
@@ -217,7 +220,7 @@
<div style="font-size:12px;color:#999;">截止日期</div>
<div style="margin-top:2px;" :class="{ 'overdue-text': isOverdue(detailPlan) }">
{{ detailPlan.due_date?.slice(0, 10) || '未设置' }}
<span v-if="isOverdue(detailPlan)" style="color:#f56c6c;font-size:12px;margin-left:4px;">已逾期</span>
<span v-if="isOverdue(detailPlan)" style="color:var(--bsc-finance);font-size:12px;margin-left:4px;">已逾期</span>
</div>
</div>
<div>
@@ -279,7 +282,7 @@
<div>
<div style="font-size:12px;color:#909399;">总体内控评分</div>
<div style="font-size:36px;font-weight:700;margin-top:2px;"
:style="{ color: cosoData.total_score < 50 ? '#f56c6c' : cosoData.total_score < 70 ? '#e6a23c' : '#67c23a' }">
:style="{ color: cosoData.total_score < 50 ? 'var(--bsc-finance)' : cosoData.total_score < 70 ? 'var(--bsc-learning)' : 'var(--bsc-process)' }">
{{ cosoData.total_score }}/{{ cosoData.max_score }}
</div>
</div>
@@ -290,7 +293,7 @@
</div>
<div style="flex:1;display:flex;gap:12px;flex-wrap:wrap;">
<div v-for="el in cosoData.elements" :key="el.id" style="text-align:center;min-width:80px;">
<div style="font-size:20px;font-weight:600;" :style="{ color: el.score >= 60 ? '#67c23a' : el.score >= 40 ? '#e6a23c' : '#f56c6c' }">{{ el.score }}</div>
<div style="font-size:20px;font-weight:600;" :style="{ color: el.score >= 60 ? 'var(--bsc-process)' : el.score >= 40 ? 'var(--bsc-learning)' : 'var(--bsc-finance)' }">{{ el.score }}</div>
<div style="font-size:11px;color:#999;">{{ el.name }}</div>
</div>
</div>
@@ -299,14 +302,14 @@
<!-- 五要素折叠面板 -->
<div v-for="el in cosoData.elements" :key="el.id" style="margin-bottom:8px;border:1px solid #ebeef5;border-radius:8px;overflow:hidden;">
<div class="coso-element-header" @click="toggleCosoElement(el.id)" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fafafa;border-left:4px solid"
:style="{ borderLeftColor: el.score >= 60 ? '#67c23a' : el.score >= 40 ? '#e6a23c' : '#f56c6c' }">
:style="{ borderLeftColor: el.score >= 60 ? 'var(--bsc-process)' : el.score >= 40 ? 'var(--bsc-learning)' : 'var(--bsc-finance)' }">
<span style="flex:1;font-weight:500;">{{ el.name }}（{{ el.name_en }}）</span>
<el-progress :percentage="el.score" :stroke-width="14" :status="el.score >= 60 ? 'success' : el.score >= 40 ? 'warning' : 'exception'" style="width:160px;" />
<span :class="{ 'is-open': cosoExpanded[el.id] }" style="color:#999;transition:transform .2s;">▶</span>
</div>
<div v-show="cosoExpanded[el.id]" style="padding:8px 16px 12px;">
<div v-for="item in el.items" :key="item.id" style="display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #f5f5f5;">
<span :style="{color: item.passed ? '#67c23a' : '#f56c6c', fontSize: '16px', fontWeight: 'bold'}">{{ item.passed ? '✅' : '❌' }}</span>
<span :style="{color: item.passed ? 'var(--bsc-process)' : 'var(--bsc-finance)', fontSize: '16px', fontWeight: 'bold'}">{{ item.passed ? '✅' : '❌' }}</span>
<span style="flex:1;font-size:14px;">{{ item.text }}</span>
<span style="font-size:12px;color:#666;">{{ item.detail }}</span>
</div>
@@ -601,11 +604,11 @@ onMounted(() => {
background: #fff;
}
.stat-card.active {
border-color: #409eff;
border-color: var(--bsc-customer);
background: #ecf5ff;
}
.overdue-text {
color: #f56c6c;
color: var(--bsc-finance);
font-weight: 600;
}
</style>