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