chore: 拆分input组件

src/views/home/components/input/SettingPopover.vue

@@ -0,0 +1,160 @@
+<template>
+	<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">
+				{{ title }}
+			</div>
+			<div class="fida-setting-slider-list">
+				<div
+					v-for="(item, index) in options"
+					:key="item.label"
+					class="fida-setting-slider-item"
+				>
+					<div class="fida-slider-label">{{ translate(item.label) }}</div>
+					<div class="fida-slider-row flex align-center">
+						<el-slider
+							class="setting-popover-slider"
+							:model-value="item.value"
+							:show-tooltip="false"
+							@update:model-value="updateOptionValue(index, $event)"
+						/>
+						<span class="fida-slider-value">{{ item.value }}%</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</el-popover>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import type { SettingOption } from './types'
+
+	const props = defineProps<{
+		options: SettingOption[]
+		title: string
+		translate: (key: string) => string
+	}>()
+
+	const emit = defineEmits<{
+		(e: 'update:options', value: SettingOption[]): void
+	}>()
+
+	const settingPopupVisible = ref(false)
+
+	const updateOptionValue = (index: number, value: number | number[]) => {
+		const nextValue = Array.isArray(value) ? value[0] : value
+		const nextOptions = props.options.map((item, itemIndex) =>
+			itemIndex === index ? { ...item, value: nextValue } : item
+		)
+		emit('update:options', nextOptions)
+	}
+</script>
+
+<style lang="less" scoped>
+	.setting-icon {
+		width: 2.4rem;
+		height: 2.4rem;
+		cursor: pointer;
+	}
+</style>
+
+<style lang="less">
+	.fida-setting-popover {
+		padding: 0 !important;
+		border-radius: 0.6rem !important;
+		background-color: #fff !important;
+		border: none !important;
+		width: 25.6rem;
+		height: 23.9rem;
+		box-shadow: 0px 11px 20px 0px #0000001a;
+	}
+
+	.fida-setting-popover-header {
+		font-weight: 400;
+		font-size: 1.4rem;
+		color: #000;
+		margin-bottom: 2rem !important;
+	}
+
+	.fida-setting-popover-content {
+		padding: 1.6rem 1.4rem 2.2rem !important;
+	}
+
+	.fida-setting-slider-list {
+		display: flex;
+		flex-direction: column;
+		row-gap: 1rem;
+	}
+
+	.fida-setting-slider-item {
+		.fida-slider-label {
+			font-weight: 400;
+			font-size: 1.2rem;
+			color: #000;
+			margin-bottom: 1rem;
+		}
+
+		.fida-slider-row {
+			column-gap: 2.6rem;
+
+			.el-slider {
+				flex: 1;
+			}
+
+			.fida-slider-value {
+				font-weight: 400;
+				font-size: 1.4rem;
+				color: #000;
+			}
+		}
+	}
+
+	.setting-popover-slider {
+		--el-slider-height: 0.4rem;
+		height: fit-content;
+
+		.el-slider__runway {
+			height: var(--el-slider-height);
+			background-color: #e8e8e8;
+			border-radius: 0.2rem;
+		}
+
+		.el-slider__bar {
+			height: var(--el-slider-height);
+			background-color: #000;
+			border-radius: 0.2rem;
+		}
+
+		.el-slider__button-wrapper {
+			width: fit-content;
+			height: fit-content;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			display: flex;
+			align-items: center;
+		}
+
+		.el-slider__button {
+			width: 1rem;
+			height: 1rem;
+			background-color: #000;
+			border-radius: 50%;
+			border: none;
+		}
+
+		.el-slider__stop {
+			display: none;
+		}
+	}
+</style>