style: 输入框悬浮样式

src/views/home/components/Input.vue

@@ -1,174 +1,179 @@
 <template>
 	<div class="assist-input-wrapper flex flex-col" :class="{ agent: isAgentMode }">
-		<div class="scroll-content flex-col">
-			<!-- 图片预览区域 -->
-			<div v-if="uploadedImages.length > 0" class="image-preview-list flex wrap">
-				<div
-					v-for="(image, index) in uploadedImages"
-					:key="index"
-					class="image-preview-item"
-				>
-					<img :src="image.url" :alt="image.name" class="preview-image" />
-					<div class="image-remove-btn" @click="removeImage(index)">
-						<SvgIcon name="delete" size="16" />
+		<div class="animate-container flex-1 flex flex-col">
+			<div class="scroll-content flex-col">
+				<!-- 图片预览区域 -->
+				<div v-if="uploadedImages.length > 0" class="image-preview-list flex wrap">
+					<div
+						v-for="(image, index) in uploadedImages"
+						:key="index"
+						class="image-preview-item"
+					>
+						<img :src="image.url" :alt="image.name" class="preview-image" />
+						<div class="image-remove-btn" @click="removeImage(index)">
+							<SvgIcon name="delete" size="16" />
+						</div>
 					</div>
 				</div>
+				<!-- 编辑区域 -->
+				<div
+					ref="editorRef"
+					class="editor"
+					contenteditable="true"
+					:placeholder="$t('Input.placeholder')"
+					@input="handleEditorInput"
+					@paste="handleEditorPaste"
+					@keydown="handleKeyDown"
+				></div>
 			</div>
-			<!-- 编辑区域 -->
-			<div
-				ref="editorRef"
-				class="editor"
-				contenteditable="true"
-				:placeholder="$t('Input.placeholder')"
-				@input="handleEditorInput"
-				@paste="handleEditorPaste"
-				@keydown="handleKeyDown"
-			></div>
-		</div>
-		<div class="operate flex align-center space-between">
-			<div class="left flex align-center">
-				<div class="attach flex flex-center" @click="triggerFileUpload">
-					<img src="@/assets/icons/attach.svg" alt="" />
-				</div>
-				<input
-					ref="fileInputRef"
-					type="file"
-					accept="image/*"
-					style="display: none"
-					@change="handleFileChange"
-				/>
-				<el-select
-					v-if="!isAgentMode"
-					v-model="typeValue"
-					:placeholder="$t('Input.typePlaceholder')"
-				>
-					<el-option
-						v-for="item in typeOptions"
-						class="input-option"
-						:key="item.value"
-						:label="$t(item.label)"
-						:value="item.value"
+			<div class="operate flex align-center space-between">
+				<div class="left flex align-center">
+					<div class="attach flex flex-center" @click="triggerFileUpload">
+						<img src="@/assets/icons/attach.svg" alt="" />
+					</div>
+					<input
+						ref="fileInputRef"
+						type="file"
+						accept="image/*"
+						style="display: none"
+						@change="handleFileChange"
 					/>
-				</el-select>
-				<el-select
-					v-if="!isAgentMode"
-					v-model="areaValue"
-					:placeholder="$t('Input.areaPlaceholder')"
-				>
-					<el-option
-						v-for="item in areaOptions"
-						class="input-option"
-						:key="item.value"
-						:label="$t(item.label)"
-						:value="item.value"
-					/>
-				</el-select>
-				<div v-if="!isAgentMode" class="fida-style-select-wrapper">
 					<el-select
-						v-model="styleValue"
-						:placeholder="$t('Input.stylePlaceholder')"
-						@focus="openStylePopup"
-					/>
+						v-if="!isAgentMode"
+						v-model="typeValue"
+						:placeholder="$t('Input.typePlaceholder')"
+					>
+						<el-option
+							v-for="item in typeOptions"
+							class="input-option"
+							:key="item.value"
+							:label="$t(item.label)"
+							:value="item.value"
+						/>
+					</el-select>
+					<el-select
+						v-if="!isAgentMode"
+						v-model="areaValue"
+						:placeholder="$t('Input.areaPlaceholder')"
+					>
+						<el-option
+							v-for="item in areaOptions"
+							class="input-option"
+							:key="item.value"
+							:label="$t(item.label)"
+							:value="item.value"
+						/>
+					</el-select>
+					<div v-if="!isAgentMode" class="fida-style-select-wrapper">
+						<el-select
+							v-model="styleValue"
+							:placeholder="$t('Input.stylePlaceholder')"
+							@focus="openStylePopup"
+						/>
 
+						<el-popover
+							v-model:visible="stylePopupVisible"
+							placement="top"
+							:width="342"
+							:show-arrow="false"
+							trigger="click"
+							popper-class="fida-style-select-popover"
+						>
+							<template #reference>
+								<div class="fida-style-select-trigger"></div>
+							</template>
+							<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
+										v-for="item in styleOptions"
+										:key="item.value"
+										class="fida-style-popover-item flex flex-center"
+										:class="{ 'is-selected': tempSelectedValue === item.value }"
+										@click="selectStyle(item.value)"
+									>
+										<img
+											:src="getStyleImage(typeValue, item.value)"
+											class="style-bg"
+										/>
+										<span class="fida-option-label flex flex-center">{{
+											item.label
+										}}</span>
+										<img
+											v-show="tempSelectedValue === item.value"
+											src="@/assets/images/checked.png"
+											class="checked-item-icon"
+										/>
+									</div>
+								</div>
+								<div class="fida-style-popover-footer flex flex-center">
+									<button class="fida-confirm-btn" @click="confirmStyle">
+										{{ $t('Input.confirm') }}
+									</button>
+								</div>
+							</div>
+						</el-popover>
+					</div>
 					<el-popover
-						v-model:visible="stylePopupVisible"
+						v-model:visible="settingPopupVisible"
 						placement="top"
 						:width="342"
 						:show-arrow="false"
 						trigger="click"
-						popper-class="fida-style-select-popover"
+						popper-class="fida-setting-popover"
 					>
 						<template #reference>
-							<div class="fida-style-select-trigger"></div>
+							<img src="@/assets/images/setting.png" class="setting-icon" />
 						</template>
-						<div class="fida-style-popover-content flex flex-col">
-							<div class="fida-style-popover-header">
-								{{ $t('Input.chooseStyle') }}
+						<div class="fida-setting-popover-content flex flex-col">
+							<div class="fida-setting-popover-header">
+								{{ $t('Input.styleTitle') }}
 							</div>
-							<div class="fida-style-popover-grid">
+							<div class="fida-setting-slider-list">
 								<div
-									v-for="item in styleOptions"
-									:key="item.value"
-									class="fida-style-popover-item flex flex-center"
-									:class="{ 'is-selected': tempSelectedValue === item.value }"
-									@click="selectStyle(item.value)"
+									v-for="item in settingOptions"
+									:key="item.label"
+									class="fida-setting-slider-item"
 								>
-									<img
-										:src="getStyleImage(typeValue, item.value)"
-										class="style-bg"
-									/>
-									<span class="fida-option-label flex flex-center">{{
-										item.label
-									}}</span>
-									<img
-										v-show="tempSelectedValue === item.value"
-										src="@/assets/images/checked.png"
-										class="checked-item-icon"
-									/>
+									<div class="fida-slider-label">{{ $t(item.label) }}</div>
+									<div class="fida-slider-row flex align-center">
+										<el-slider
+											class="setting-popover-slider"
+											v-model="item.value"
+											:show-tooltip="false"
+										/>
+										<span class="fida-slider-value">{{ item.value }}%</span>
+									</div>
 								</div>
 							</div>
-							<div class="fida-style-popover-footer flex flex-center">
-								<button class="fida-confirm-btn" @click="confirmStyle">
-									{{ $t('Input.confirm') }}
-								</button>
-							</div>
 						</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.styleTitle') }}</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
-										class="setting-popover-slider"
-										v-model="item.value"
-										:show-tooltip="false"
-									/>
-									<span class="fida-slider-value">{{ item.value }}%</span>
-								</div>
-							</div>
-						</div>
+				<div class="right">
+					<div
+						class="create-btn flex flex-center"
+						v-if="!isAgentMode"
+						@click="handleCreateProject"
+					>
+						<img src="@/assets/images/shining.png" class="shining-icon" alt="" />
+						<span class="create-btn-text">{{ $t('Input.createProject') }}</span>
 					</div>
-				</el-popover>
-			</div>
-			<div class="right">
-				<div
-					class="create-btn flex flex-center"
-					v-if="!isAgentMode"
-					@click="handleCreateProject"
-				>
-					<img src="@/assets/images/shining.png" class="shining-icon" alt="" />
-					<span class="create-btn-text">{{ $t('Input.createProject') }}</span>
-				</div>
 
-				<div v-else class="sender-btn flex flex-center" @click="handleSendAgent">
-					<img
-						v-show="!generating"
-						src="@/assets/images/sender.png"
-						alt=""
-						class="sender-icon"
-					/>
-					<div v-show="generating" class="sender-pause" />
+					<div v-else class="sender-btn flex flex-center" @click="handleSendAgent">
+						<img
+							v-show="!generating"
+							src="@/assets/images/sender.png"
+							alt=""
+							class="sender-icon"
+						/>
+						<div v-show="generating" class="sender-pause" />
+					</div>
 				</div>
 			</div>
 		</div>
+
 		<div v-if="!isAgentMode" class="report-btn flex flex-center" @click="toogltReportTag">
 			<SvgIcon class="light-icon" name="light" size="16" />
 			<span>{{ $t('Input.trendingReport') }}</span>
@@ -618,24 +623,22 @@
 		min-height: 23.5rem;
 		max-height: 43.5rem;
 		width: 106.3rem;
-		border-radius: 2.8rem;
-		background-color: #fff;
-		border: 0.1rem solid #00000005;
-		box-shadow: 0px 0.5rem 1.4rem 0px #0000001a;
+
 		margin: 0 auto;
 		padding: 0;
 		position: relative;
 
-		&:not(.agent):hover {
-			box-shadow: 0px 0.5rem 3.36rem 2.2rem #f1ede999;
+		&:not(.agent) .animate-container {
+			box-shadow: 0px 0.5rem 1.4rem 0px #0000001a;
 			transition: all 0.3s ease;
-			top: -1rem;
-
-			.report-btn {
-				bottom: -8.4rem;
+			border-radius: 2.8rem;
+			background-color: #fff;
+			border: 0.1rem solid #00000005;
+			&:not(.agent):hover {
+				box-shadow: 0px 0.5rem 3.36rem 2.2rem #f1ede999;
+				transform: translateY(-1rem);
 			}
 		}
-
 		.scroll-content {
 			display: flex;
 			flex: 1;