lunanting/qiangdanxitong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化延误扣分配置UI

Browse Source
This commit is contained in:
Your Name 2026-01-06 18:33:29 +08:00
parent 6d011111c5
commit f4e4c9bcfe
1 changed files with 142 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
frontend/src/views/Settings.vue
View File

@ -1061,51 +1061,73 @@
</a-divider> </a-divider>
<div class="config-grid"> <div class="config-grid">
<div class="config-item" style="grid-column: span 1;"> <!-- 每小时扣分 -->
<div class="config-item-header"> <div class="config-item delay-config-card">
<Icon name="minus" size="md" color="#ff4d4f" /> <div class="config-info">
<span class="config-item-title">每小时扣分</span> <div class="config-header">
<div class="icon-box red">
<Icon name="clock" size="md" />
</div>
<span class="title">每小时扣分</span>
</div>
<div class="desc">任务延误完结时每延误1小时扣除的分数，支持小数。</div>
</div>
<div class="config-action">
<a-input-number
v-model:value="delayPenaltyConfig.perHour"
:min="0"
:max="100"
:step="0.1"
:precision="2"
size="large"
style="width: 160px;"
>
<template #addonAfter>分/小时</template>
</a-input-number>
</div> </div>
<div class="config-item-desc">任务延误完结时每延误1小时扣除的分数</div>
<a-input-number
v-model:value="delayPenaltyConfig.perHour"
:min="0"
:max="10"
:step="0.1"
:precision="2"
style="width: 120px;"
>
<template #addonAfter>分/小时</template>
</a-input-number>
</div> </div>
<div class="config-item" style="grid-column: span 1;"> <!-- 月度积分清零 -->
<div class="config-item-header"> <div class="config-item delay-config-card">
<Icon name="calendar" size="md" color="#31f08b" /> <div class="config-info">
<span class="config-item-title">月度积分清零</span> <div class="config-header">
<div class="icon-box green">
<Icon name="calendar" size="md" />
</div>
<span class="title">月度积分清零</span>
</div>
<div class="desc">启用后，接单部门的积分统计将在每月1号自动归零重新开始。</div>
</div>
<div class="config-action">
<a-switch
v-model:checked="delayPenaltyConfig.monthlyReset"
checked-children="已启用"
un-checked-children="已关闭"
/>
</div> </div>
<div class="config-item-desc">接单部门积分是否按月清零重新统计</div>
<a-switch
v-model:checked="delayPenaltyConfig.monthlyReset"
checked-children="启用"
un-checked-children="关闭"
/>
</div> </div>
</div> </div>
<a-alert <a-alert
message="延误扣分说明" message="延误扣分计算公式"
description="任务延误时间 = 实际完成时间 - 预计完成时间（接单时间 + 累计时效）。延误扣分 = 延误小时数 × 每小时扣分数。扣分从任务积分中扣除，最多扣至0分。" type="info"
type="warning"
show-icon show-icon
style="margin-top: 16px; margin-bottom: 16px;" style="margin-top: 24px; margin-bottom: 24px;"
/> >
<template #description>
<div class="formula-desc">
<p><strong>延误时间</strong> = 实际完成时间 - 预计完成时间（接单时间 + 累计时效）</p>
<p><strong>延误扣分</strong> = 延误小时数 × 每小时扣分数</p>
<p class="note">* 扣分将从该任务原本应得的积分中扣除，最多扣至0分（不会出现负分）。</p>
</div>
</template>
</a-alert>
<a-form-item style="margin-top: 32px;"> <a-form-item>
<a-space> <a-space>
<a-button type="primary" @click="handleSaveDelayPenaltyConfig" :loading="savingDelayPenaltyConfig"> <a-button type="primary" size="large" @click="handleSaveDelayPenaltyConfig" :loading="savingDelayPenaltyConfig">
<template #icon><Icon name="check" size="sm" /></template> <template #icon><Icon name="check" size="sm" /></template>
保存配置 保存延误配置
</a-button> </a-button>
</a-space> </a-space>
</a-form-item> </a-form-item>
@ -5014,6 +5036,93 @@ watch(activeTab, (value) => {
} }
} }
// 延误配置卡片样式
.delay-config-card {
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
min-height: 100px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
&:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.config-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 20px;
.config-header {
display: flex;
align-items: center;
gap: 12px;
.icon-box {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
&.red {
background: rgba(255, 77, 79, 0.1);
color: #ff4d4f;
}
&.green {
background: rgba(49, 240, 139, 0.1);
color: #31f08b;
}
}
.title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
}
}
.desc {
font-size: 13px;
color: $text-tertiary;
padding-left: 48px;
line-height: 1.5;
}
}
.config-action {
display: flex;
align-items: center;
padding-left: 20px;
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
}
.formula-desc {
p {
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
&.note {
color: #ff4d4f;
margin-top: 8px;
font-size: 12px;
}
}
}
// 测试消息提示 // 测试消息提示
.test-message-hint { .test-message-hint {
margin-left: $space-md; margin-left: $space-md;