chore: 拆分input组件

2026-04-30 14:18:19 +08:00
parent c3d26bdb49
commit 6098993bb3
12 changed files with 1958 additions and 1520 deletions
--- a/src/views/home/components/input/AgentOperatePopover.vue
+++ b/src/views/home/components/input/AgentOperatePopover.vue
@@ -0,0 +1,99 @@
+<template>
+	<div class="agent-operate flex flex-center">
+		<el-popover placement="top" trigger="click" popper-class="agent-plus-popover">
+			<template #reference>
+				<SvgIcon name="plus" color="#0D0D0D" size="16" />
+			</template>
+			<template #default>
+				<div class="agent-modal flex flex-col">
+					<div class="file flex align-center" @click="emit('upload')">
+						<img src="@/assets/icons/attach.svg" class="file-icon" />
+						<span>Upload files</span>
+					</div>
+					<div class="gap"></div>
+					<div class="report flex align-center" @click="emit('toggle-report')">
+						<SvgIcon color="#5A5A5A" name="light" size="11" />
+						<span>Trending report</span>
+					</div>
+				</div>
+			</template>
+		</el-popover>
+	</div>
+</template>
+
+<script setup lang="ts">
+	const emit = defineEmits<{
+		(e: 'upload'): void
+		(e: 'toggle-report'): void
+	}>()
+</script>
+
+<style lang="less" scoped>
+	.agent-operate {
+		width: 3.2rem;
+		height: 3.2rem;
+		cursor: pointer;
+		border-radius: 50%;
+
+		&:hover {
+			background-color: #f0f0f0;
+		}
+	}
+</style>
+
+<style lang="less">
+	.agent-plus-popover {
+		display: flex;
+		justify-content: flex-start;
+		background: transparent !important;
+		box-shadow: none !important;
+		border: none !important;
+		padding: 0 !important;
+		margin-bottom: -1rem;
+		width: fit-content !important;
+		min-width: initial !important;
+
+		.el-popper__arrow:before {
+			display: none;
+		}
+
+		.agent-modal {
+			row-gap: 1.2rem;
+			font-family: 'Medium';
+			font-weight: 500;
+			font-size: 1.3rem;
+			color: #222;
+			background-color: #fff;
+			border: 1px solid #d9d9d9;
+			box-shadow: 0px 6.53px 32.63px 0px #0000000d;
+			border-radius: 1rem;
+			padding: 1.2rem 1.4rem;
+			transform: translateX(calc(50% - 1.6rem));
+
+			.c-svg {
+				width: initial;
+				width: 1rem;
+				height: 1.3rem;
+			}
+
+			.file,
+			.report {
+				line-height: 1.8rem;
+				column-gap: 1rem;
+				cursor: pointer;
+			}
+
+			.file {
+				.file-icon {
+					width: 1.1rem;
+					height: 1.3rem;
+				}
+			}
+
+			.gap {
+				height: 0.05rem;
+				background-color: #d4d4d4;
+			}
+		}
+	}
+</style>