aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: setting icon

Browse Source
This commit is contained in:
zhangyahui
2026-02-04 15:08:52 +08:00
parent 723208da99
commit 0da188adb3
4 changed files with 131 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/setting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

6
src/lang/en.ts
View File

@@ -23,6 +23,12 @@ export default {
NordicNoir:'Nordic\nNoir',
},
chooseStyle: 'Choose Style',
setting: 'Setting',
settingOptions: {
creativity: 'Creativity',
diversity: 'Diversity',
relevance: 'Relevance'
},
confirm: 'Confirm'
},
area: {

6
src/lang/zh-cn.ts
View File

@@ -18,6 +18,12 @@ export default {
classic: '古典'
},
chooseStyle: '选择风格',
setting: 'Setting',
settingOptions: {
creativity: '创意度',
diversity: '多样性',
relevance: '相关度'
},
confirm: '确认'
},
area: {

150
src/views/home/components/Input.vue
View File

@@ -37,7 +37,7 @@
<el-popover
v-model:visible="stylePopupVisible"
placement="bottom-start"
placement="top"
:width="342"
:show-arrow="false"
trigger="click"
@@ -46,7 +46,7 @@
<template #reference>
<div class="fida-style-select-trigger"></div>
</template>
<div class="fida-style-popover-content">
<div class="fida-style-popover-content flex flex-col">
<div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
<div class="fida-style-popover-grid">
<div
@@ -59,7 +59,7 @@
<span class="fida-option-label">{{ $t(item.label) }}</span>
</div>
</div>
<div class="fida-style-popover-footer">
<div class="fida-style-popover-footer flex flex-center">
<button class="fida-confirm-btn" @click="confirmStyle">
{{ $t('Input.confirm') }}
</button>
@@ -67,6 +67,30 @@
</div>
</el-popover>
</div>
<el-popover
v-model:visible="settingPopupVisible"
placement="top"
:width="342"
:show-arrow="false"
trigger="click"
popper-class="fida-setting-popover"
>
<template #reference>
<img src="@/assets/images/setting.png" class="setting-icon" />
</template>
<div class="fida-setting-popover-content flex flex-col">
<div class="fida-setting-popover-header">{{ $t('Input.setting') }}</div>
<div class="fida-setting-slider-list">
<div v-for="item in settingOptions" :key="item.label" class="fida-setting-slider-item">
<div class="fida-slider-label">{{ $t(item.label) }}</div>
<div class="fida-slider-row flex align-center">
<el-slider v-model="item.value" :show-tooltip="false" />
<span class="fida-slider-value">{{ item.value }}%</span>
</div>
</div>
</div>
</div>
</el-popover>
</div>
</div>
</template>
@@ -95,6 +119,13 @@ const styleValue = ref<string>('')
const tempSelectedValue = ref<string>('')
const stylePopupVisible = ref(false)
const settingPopupVisible = ref(false)
const settingOptions = ref([
{ label: 'Input.settingOptions.creativity', value: 50 },
{ label: 'Input.settingOptions.diversity', value: 75 },
{ label: 'Input.settingOptions.relevance', value: 60 }
])
const openStylePopup = () => {
// 打开弹窗时初始化临时选中值为当前选中值
tempSelectedValue.value = styleValue.value
@@ -110,6 +141,10 @@ const confirmStyle = () => {
styleValue.value = tempSelectedValue.value
stylePopupVisible.value = false
}
const confirmSetting = () => {
settingPopupVisible.value = false
}
const typeOptions = ref<any[]>([
{
label: 'Input.types.sofa',
@@ -193,6 +228,12 @@ const styleOptions = ref<any[]>(
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
.setting-icon {
width: 2.4rem;
height: 2.4rem;
cursor: pointer;
}
}
}
@@ -213,7 +254,6 @@ const styleOptions = ref<any[]>(
</style>
<style lang="less">
/* 弹窗样式 - 使用 fida- 前缀避免样式污染 */
.fida-style-select-popover {
width: 34.2rem !important;
padding: 0 !important;
@@ -224,8 +264,7 @@ const styleOptions = ref<any[]>(
}
.fida-style-popover-content {
display: flex;
flex-direction: column;
padding: 2rem 2.4rem 2.4rem;
}
.fida-style-popover-header {
@@ -233,27 +272,27 @@ const styleOptions = ref<any[]>(
font-weight: 500;
font-size: 1.6rem;
color: #000;
padding: 1.8rem 2rem 1.5rem;
border-bottom: 0.1rem solid #f0f0f0;
margin-bottom: 2rem;
// padding: 1.8rem 2rem 1.5rem;
// border-bottom: 0.1rem solid #f0f0f0;
}
.fida-style-popover-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
padding: 1.5rem 2rem;
}
.fida-style-popover-item {
height: 9rem;
background-color: #f7f7f7;
height: 9.1rem;
width: 9.1rem;
background-color: #a6a6a6;
border-radius: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
border: 0.2rem solid transparent;
}
.fida-style-popover-item:hover {
@@ -262,42 +301,91 @@ const styleOptions = ref<any[]>(
.fida-style-popover-item.is-selected {
background-color: #e3f2fd;
border-color: #2196f3;
.fida-option-label {
color: #000;
}
// border-color: #2196f3;
}
.fida-style-popover-item .fida-option-label {
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.3rem;
color: #333;
font-size: 1.2rem;
color: #fff;
text-align: center;
padding: 0.5rem;
}
.fida-style-popover-footer {
padding: 1.5rem 2rem 1.8rem;
border-top: 0.1rem solid #f0f0f0;
// border-top: 0.1rem solid #f0f0f0;
margin-top: 2.4rem;
.fida-confirm-btn {
margin: 0 auto;
width: 15.7rem;
height: 3.4rem;
line-height: 3.4rem;
background-color: #ff7a51;
color: #fff;
border: none;
border-radius: 3.8rem;
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.4rem;
cursor: pointer;
}
}
.fida-confirm-btn {
width: 100%;
height: 4.4rem;
background-color: #000;
color: #fff;
border: none;
border-radius: 0.8rem;
.fida-setting-popover {
width: 34.2rem !important;
padding: 0 !important;
border-radius: 0.6rem !important;
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
background-color: #fff !important;
border: none !important;
}
// .fida-setting-popover-content {
// padding: 2rem 2.4rem 2.4rem;
// }
.fida-setting-popover-header {
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.5rem;
cursor: pointer;
transition: background-color 0.2s ease;
font-size: 1.6rem;
color: #000;
margin-bottom: 2rem;
}
.fida-confirm-btn:hover {
background-color: #333;
.fida-setting-slider-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.fida-confirm-btn:active {
background-color: #000;
.fida-setting-slider-item {
.fida-slider-label {
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.4rem;
color: #000;
margin-bottom: 0.8rem;
}
.fida-slider-row {
gap: 1rem;
.el-slider {
flex: 1;
}
.fida-slider-value {
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.4rem;
color: #000;
min-width: 3.5rem;
text-align: right;
}
}
// :deep(.el-slider) {
// }
}
</style>