update: 系统功能配置页面适配调整

This commit is contained in:
zhuoqinglian
2026-06-15 11:23:31 +08:00
parent 67532dc230
commit b8ae0568e9
7 changed files with 27 additions and 59 deletions
@@ -8,13 +8,13 @@
<div class="config-header">
<h2 class="page-title">{{ $t('header.featureManagement') }}</h2>
<div class="header-actions">
<CustomButton size="small" @click="!isSaving && toggleSelectAll()" :disabled="isSaving">
<CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="medium" @click="!isSaving && toggleSelectAll()" :disabled="isSaving">
{{ isAllSelected ? $t('featureManagement.deselectAll') : $t('featureManagement.selectAll') }}
</CustomButton>
<CustomButton size="small" @click="handleReset" :disabled="isSaving">
<CustomButton icon="el-icon-refresh" size="medium" @click="handleReset" :disabled="isSaving">
{{ $t('featureManagement.reset') }}
</CustomButton>
<CustomButton size="small" type="confirm" @click="handleSave" :disabled="isSaving">
<CustomButton icon="el-icon-setting" size="medium" type="confirm" @click="handleSave" :disabled="isSaving">
{{ isSaving ? $t('featureManagement.saving') : $t('featureManagement.save') }}
</CustomButton>
</div>
@@ -45,19 +45,17 @@
<div class="feature-content">
<div class="feature-header">
<h3 class="feature-name">{{ $t(`feature.${feature.id}.name`) }}</h3>
<span v-if="feature.enabled" class="feature-enabled-tag">{{ $t('featureManagement.enabled') }}</span>
<span v-else class="feature-disabled-tag">{{ $t('featureManagement.disabled') }}</span>
<div class="feature-checkbox-container">
<el-checkbox
v-model="feature.enabled"
@change="!isSaving && toggleFeature(feature)"
class="feature-checkbox"
:disabled="isSaving"
/>
</div>
</div>
<p class="feature-description">{{ $t(`feature.${feature.id}.description`) }}</p>
</div>
<div class="feature-checkbox-container">
<el-checkbox
v-model="feature.enabled"
@change="!isSaving && toggleFeature(feature)"
class="feature-checkbox"
:disabled="isSaving"
/>
</div>
</div>
</div>
</div>
@@ -84,19 +82,17 @@
<div class="feature-content">
<div class="feature-header">
<h3 class="feature-name">{{ $t(`feature.${feature.id}.name`) }}</h3>
<span v-if="feature.enabled" class="feature-enabled-tag">{{ $t('featureManagement.enabled') }}</span>
<span v-else class="feature-disabled-tag">{{ $t('featureManagement.disabled') }}</span>
<div class="feature-checkbox-container">
<el-checkbox
v-model="feature.enabled"
@change="!isSaving && toggleFeature(feature)"
class="feature-checkbox"
:disabled="isSaving"
/>
</div>
</div>
<p class="feature-description">{{ $t(`feature.${feature.id}.description`) }}</p>
</div>
<div class="feature-checkbox-container">
<el-checkbox
v-model="feature.enabled"
@change="!isSaving && toggleFeature(feature)"
class="feature-checkbox"
:disabled="isSaving"
/>
</div>
</div>
</div>
</div>
@@ -504,15 +500,18 @@ export default {
transform: translateY(-2px);
}
.feature-content {
width: 100%;
margin-left: 16px;
}
.feature-header {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 6px;
}
.feature-checkbox-container {
margin-top: 4px;
display: flex;
align-items: center;
margin-left: 30px;
@@ -531,36 +530,18 @@ export default {
color: #5778ff;
}
.feature-enabled-tag {
background: #5778ff;
font-size: 14px;
color: #FFFFFF;
padding: 4px 8px;
border-radius: 10px;
margin-left: 10px;
font-weight: 500;
}
.feature-disabled-tag {
background: #DCDFE6;
font-size: 14px;
color: #FFFFFF;
padding: 4px 8px;
border-radius: 10px;
margin-left: 10px;
font-weight: 500;
}
.feature-name {
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
font-size: 18px;
line-height: 18px;
line-height: 1.4;
font-weight: 600;
color: #333;
margin: 0;
transition: color 0.3s ease;
}
.feature-description {
font-size: 14px;
line-height: 1.6;
@@ -570,7 +551,6 @@ export default {
text-align: left;
}
/* 功能分组容器 - 左右布局 */
.feature-groups-container {
display: flex;