-
-
+
- 
-
+
- {{ $t('header.featureManagement') }}
-
+
{{ isAllSelected ? $t('featureManagement.deselectAll') : $t('featureManagement.selectAll') }}
-
-
- {{ isSaving ? $t('featureManagement.saving') : $t('featureManagement.save') }}
-
-
+
+
{{ $t('featureManagement.reset') }}
-
+
+
+ {{ isSaving ? $t('featureManagement.saving') : $t('featureManagement.save') }}
+
-
-
+
{{ $t('featureManagement.group.featureManagement') }}
+
+ 
+
+
+
+ {{ $t('featureManagement.groupName.featureManagement') }}
+ {{ $t('featureManagement.moduleCount', { count: featureManagementFeatures.length }) }}
+
+ {{ $t('featureManagement.groupDescription.featureManagement') }}
-
- ![]()
+
{{ $t(`feature.${feature.id}.name`) }}
+
+
+
+
+ {{ $t(`feature.${feature.id}.name`) }}
+ {{ $t('featureManagement.enabled') }} + {{ $t('featureManagement.disabled') }} +{{ $t(`feature.${feature.id}.description`) }}
+{{ $t(`feature.${feature.id}.description`) }}
-
@@ -101,19 +122,41 @@
import HeaderBar from "@/components/HeaderBar.vue";
import VersionFooter from "@/components/VersionFooter.vue";
import featureManager from "@/utils/featureManager.js";
+import CustomButton from "@/components/CustomButton.vue";
+
+import voiceprintIcon from '@/assets/setting/voiceprint.png'
+import voiceCloneIcon from '@/assets/setting/voiceclone.png'
+import knowledgeBaseIcon from '@/assets/setting/knowledgeBase.png'
+import mcpAccessPointIcon from '@/assets/setting/mcpAccessPoint.png'
+import addressBookIcon from '@/assets/setting/addressBook.png'
+import vadIcon from '@/assets/setting/vad.png'
+import asrIcon from '@/assets/setting/asr.png'
export default {
name: "FeatureManagement",
components: {
HeaderBar,
- VersionFooter
+ VersionFooter,
+ CustomButton
},
data() {
return {
pendingChanges: false,
featureManagementFeatures: [],
voiceManagementFeatures: [],
- isSaving: false // 添加保存状态锁定
+ isSaving: false, // 添加保存状态锁定
+ // 功能模块图标映射
+ featureIcons: {
+ 'voiceprintRecognition': voiceprintIcon,
+ 'voiceClone': voiceCloneIcon,
+ 'knowledgeBase': knowledgeBaseIcon,
+ 'mcpAccessPoint': mcpAccessPointIcon,
+ 'addressBook': addressBookIcon,
+ },
+ voiceManagementIcons: {
+ 'vad': vadIcon,
+ 'asr': asrIcon,
+ },
}
},
computed: {
@@ -336,7 +379,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px 24px;
+ padding: 22px 24px;
}
.page-title {
@@ -376,54 +419,13 @@ export default {
.divider {
height: 1px;
- background: #e0e0e0;
+ background: #f3f1f1;
margin-bottom: 20px;
}
-.btn-select-all {
- background: #e6ebff;
- color: #5778ff;
- border: 1px solid #adbdff;
- border-radius: 18px;
- padding: 8px 16px;
- height: 32px;
- font-size: 14px;
-}
-
-.btn-select-all:hover {
- background: #d0d8ff;
-}
-
-.save-btn {
- background: #5778ff;
- color: white;
- border: none;
- border-radius: 18px;
- padding: 8px 16px;
- height: 32px;
- font-size: 14px;
-}
-
-.save-btn:hover {
- background: #4a6ae8;
-}
-
-.reset-btn {
- background: #e6ebff;
- color: #5778ff;
- border: 1px solid #adbdff;
- border-radius: 18px;
- padding: 8px 16px;
- height: 32px;
-}
-
-.reset-btn:hover {
- background: #d0d8ff;
-}
-
.main-wrapper {
- height: calc(100vh - 63px - 35px - 58px);
- margin: 0 22px;
+ height: calc(100vh - 63px - 35px);
+ margin: 20px 22px 0;
border-radius: 15px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative;
@@ -478,9 +480,8 @@ export default {
.feature-card-item {
display: flex;
- flex-direction: column;
padding: 20px;
- border-radius: 12px;
+ border-radius: 10px;
border: 2px solid #e0e0e0;
background-color: white;
cursor: pointer;
@@ -491,25 +492,34 @@ export default {
.feature-card-item:hover {
border-color: #869bf0;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.feature-card-item.feature-enabled {
- border-color:#5778ff;
- box-shadow: 0 4px 16px rgba(95, 112, 243, 0.2);
+ border: 2px solid transparent;
+ background: linear-gradient(white, white) padding-box,
+ linear-gradient(to right, #4a7cfd, #8154fc) border-box;
+ box-shadow: 0 4px 10px rgba(95, 112, 243, 0.2);
transform: translateY(-2px);
}
+.feature-content {
+ margin-left: 16px;
+}
.feature-header {
display: flex;
- justify-content: space-between;
align-items: center;
- margin-bottom: 12px;
+ margin-bottom: 6px;
+}
+.feature-checkbox-container {
+ display: flex;
+ align-items: center;
+ margin-left: 30px;
}
.feature-checkbox ::v-deep .el-checkbox__input {
- transform: scale(1.2);
+ transform: scale(1.5);
}
.feature-checkbox ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
@@ -521,9 +531,29 @@ 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 {
font-size: 18px;
+ line-height: 18px;
font-weight: 600;
color: #333;
margin: 0;
@@ -535,7 +565,7 @@ export default {
font-size: 14px;
line-height: 1.6;
color: #666;
- margin: 0 0 12px 0;
+ margin: 0;
transition: color 0.3s ease;
text-align: left;
}
@@ -571,14 +601,40 @@ export default {
}
.group-title {
+ margin-top: 0;
+ display: flex;
+ align-items: center;
font-size: 18px;
+ line-height: 18px;
font-weight: 600;
color: #303133;
- margin-bottom: 12px;
- padding-left: 12px;
- border-left: 4px solid #5f70f3;
+ margin-bottom: 0;
text-align: left;
}
+.group-name {
+ margin-left: 10px;
+}
+
+.group-header {
+ display: flex;
+ align-items: center;
+}
+
+.module-count {
+ margin-left: 13px;
+ font-size: 12px;
+ background: #ebebfe;
+ color: #5778ff;
+ padding: 2px 10px;
+ border-radius: 10px;
+}
+
+.group-description {
+ margin-top: 6px;
+ text-align: left;
+ font-size: 14px;
+ font-weight: 500;
+}
.features-grid {
display: grid;
{{ $t('featureManagement.group.voiceManagement') }}
+
+ 
+
+
+
+ {{ $t('featureManagement.groupName.voiceManagement') }}
+ {{ $t('featureManagement.moduleCount', { count: voiceManagementFeatures.length }) }}
+
+ {{ $t('featureManagement.groupDescription.voiceManagement') }}
-
- ![]()
+
{{ $t(`feature.${feature.id}.name`) }}
+
+
+
+
+ {{ $t(`feature.${feature.id}.name`) }}
+ {{ $t('featureManagement.enabled') }} + {{ $t('featureManagement.disabled') }} +{{ $t(`feature.${feature.id}.description`) }}
+{{ $t(`feature.${feature.id}.description`) }}