187 lines
9.5 KiB
Vue
187 lines
9.5 KiB
Vue
<script>
|
||
import {defineComponent} from 'vue'
|
||
|
||
export default defineComponent({
|
||
name: "AiTool",
|
||
emits: ['chat'],
|
||
data() {
|
||
return {
|
||
aiIndex: 0,
|
||
aiPlaceholders: ['追加一个用户信息表单', '生成一个商品表单，并且增加品牌信息', '当单选框选中"选项1"时显示输入框组件', '输入框必填且长度必须大于13，否则提示错误信息', '修改输入框名称为商品名称'],
|
||
aiPlaceholder: '请告诉我您希望生成的表单内容，例如：追加一个用户信息表单',
|
||
showAi: true,
|
||
message: '',
|
||
aiLoading: false,
|
||
}
|
||
},
|
||
methods: {
|
||
toChat() {
|
||
this.$emit('chat');
|
||
},
|
||
},
|
||
mounted() {
|
||
this.key = setInterval(() => {
|
||
this.aiPlaceholder = '请告诉我您希望生成的表单内容，例如：' + this.aiPlaceholders[(++this.aiIndex) % this.aiPlaceholders.length];
|
||
}, 6000);
|
||
|
||
},
|
||
unmounted() {
|
||
clearInterval(this.key);
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<div class="ai-tool" v-if="showAi">
|
||
<div class="ai-tool-con">
|
||
<el-input :placeholder="aiPlaceholder" readonly @click="toChat">
|
||
<template #suffix>
|
||
<i class="fc-icon icon-send" @click="toChat"
|
||
:class="{disabled:!message || !message.trim()}"></i>
|
||
</template>
|
||
</el-input>
|
||
<svg @click="showAi = false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||
<path fill="currentColor"
|
||
d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="ai-tool-btn" @click="showAi = true" v-else>
|
||
<svg class="fc-icon" viewBox="0 0 1331 1024" width="20" height="20">
|
||
<path
|
||
d="M653.067264 89.6a371.3536 371.3536 0 0 0-362.5984 291.328l-4.7616 21.6576-21.1456 6.7072A268.8 268.8 0 0 0 345.867264 934.4h614.4a268.8 268.8 0 0 0 81.3056-525.1072l-21.1456-6.656-4.7616-21.7088a371.3536 371.3536 0 0 0-362.5984-291.328zM220.632064 343.3984a448.1536 448.1536 0 0 1 864.8704 0A345.7024 345.7024 0 0 1 960.267264 1011.2h-614.4A345.6 345.6 0 0 1 220.632064 343.3984z"
|
||
fill="#FFFFFF"></path>
|
||
<path
|
||
d="M909.067264 805.1712v10.9568h-170.24v-10.9056h14.0288c6.9632 0 13.1072-0.512 18.3296-1.3312a24.8832 24.8832 0 0 0 13.568-7.4752 41.0624 41.0624 0 0 0 7.8848-17.92c2.048-8.192 3.072-19.0976 3.072-32.768V488.7552a231.936 231.936 0 0 0-0.8704-22.3232 61.952 61.952 0 0 0-2.2016-14.848 17.7664 17.7664 0 0 0-4.352-8.7552 33.1776 33.1776 0 0 0-8.2944-6.6048 56.9856 56.9856 0 0 0-27.136-6.9632h-14.0288V418.304h170.24v10.9568h-14.0288c-6.9632 0-13.2608 0.5632-18.7904 1.7408a23.552 23.552 0 0 0-13.1584 7.8848 41.1648 41.1648 0 0 0-8.2944 17.92 153.6512 153.6512 0 0 0-2.6112 31.9488v256.8704c0 9.3184 0.1536 16.896 0.4096 22.7328 0.3072 5.888 1.024 10.7008 2.2016 14.4896a24.832 24.832 0 0 0 4.8128 9.1648 52.8384 52.8384 0 0 0 35.4304 13.1072h14.0288z"
|
||
fill="#FFFFFF"></path>
|
||
<path
|
||
d="M726.027264 405.504H921.867264v36.608h-26.8288c-6.2464 0-11.6224 0.512-16.0768 1.4336a10.8032 10.8032 0 0 0-6.144 3.6864l-0.3072 0.3584a29.2352 29.2352 0 0 0-5.2736 12.1856 142.592 142.592 0 0 0-2.2528 29.0304v256.8704c0 9.216 0.1536 16.5888 0.4096 22.1184a47.9744 47.9744 0 0 0 1.6384 11.3152 14.2848 14.2848 0 0 0 1.792 3.9936 40.0896 40.0896 0 0 0 26.2144 9.3184H921.867264v36.5056h-195.84v-36.5568h26.8288c6.3488 0 11.6224-0.3584 15.9744-1.024a12.0832 12.0832 0 0 0 6.4-3.4304 29.7472 29.7472 0 0 0 4.9152-12.1856l0.1024-0.3584c1.6896-6.656 2.6624-16.4864 2.6624-29.696V488.8064c0-8.8064-0.256-15.8208-0.8192-21.0432l-0.0512-0.6656a50.3808 50.3808 0 0 0-1.6384-11.7248l-0.1024-0.4608-0.1024-0.4096c-0.4608-1.8944-1.024-2.6112-1.024-2.6112l-0.256-0.3072-0.256-0.3072a20.1728 20.1728 0 0 0-4.9152-3.7888 44.0832 44.0832 0 0 0-20.8896-5.376h-26.8288V405.504z m69.632 397.824c4.6592-6.0416 7.6288-13.6192 9.472-21.9136 2.3552-9.5744 3.3792-21.6064 3.3792-35.7376V488.8064c0-9.1136-0.256-16.896-0.9216-23.2448a75.1616 75.1616 0 0 0-2.56-17.3056 30.3616 30.3616 0 0 0-10.3936-17.1008h58.2656c-5.12 5.9904-8.3456 13.9776-10.496 22.5792l-0.1024 0.3584c-2.048 9.216-2.9184 20.8896-2.9184 34.7136v256.8704c0 9.4208 0.1536 17.2544 0.4608 23.3984 0.3072 6.4512 1.1264 12.3904 2.7136 17.5616 1.536 5.0688 3.8912 9.8304 7.424 13.824l0.512 0.6656 0.6656 0.5632 1.9968 1.6384h-57.4976z"
|
||
fill="#FFFFFF"></path>
|
||
<path
|
||
d="M564.696064 683.1104H410.584064l-27.136 62.5664c-6.4 15.4624-9.6256 26.9824-9.6256 34.56 0 3.2256 0.4608 6.144 1.3312 8.7552 1.1264 2.6112 3.328 5.12 6.5536 7.4752 3.4816 2.048 8.192 3.9424 13.9776 5.632 6.144 1.536 14.1824 2.56 24.064 3.072v10.9568H294.667264v-10.9056c9.9328-1.4848 17.92-3.6864 24.064-6.6048a48.64 48.64 0 0 0 15.7696-11.776 81.408 81.408 0 0 0 11.776-20.1728c3.84-8.192 8.3456-18.2272 13.6192-30.208L499.928064 409.6h10.0352l138.2912 330.3936c5.5296 13.7216 10.6496 24.7808 15.36 33.28 4.9152 8.192 9.8816 14.5408 14.848 19.2512 5.2224 4.608 10.752 7.8848 16.5888 9.6256 6.144 1.7408 13.4656 2.7648 21.9136 3.072v10.9056H559.883264v-10.9056c15.7184-0.6144 26.368-3.072 31.8976-7.4752a20.7872 20.7872 0 0 0 8.7552-16.64c-0.256-8.448-4.1984-22.1696-11.776-41.1136l-24.064-56.8832z m-8.3456-21.9136L488.971264 500.6848l-69.12 160.5632h136.4992z"
|
||
fill="#FFFFFF"></path>
|
||
<path
|
||
d="M491.480064 396.8h26.9824l141.6704 338.432c5.376 13.312 10.24 23.808 14.5408 31.5904 4.4544 7.3728 8.6528 12.6464 12.3904 16.2304 4.0448 3.5328 7.8848 5.632 11.6224 6.8096 4.864 1.3824 11.008 2.304 18.7392 2.56l12.288 0.4096v36.096H547.083264v-36.0448l12.288-0.512a94.208 94.208 0 0 0 17.408-1.9456 19.4048 19.4048 0 0 0 7.0656-2.7136c3.2256-2.56 3.84-4.608 3.8912-6.4-0.256-6.0416-3.3792-17.7664-10.8544-36.4544l-20.6848-48.9472H419.032064l-23.7568 54.784c-6.3488 15.2576-8.6016 24.7296-8.6016 29.5424 0 1.5872 0.1536 2.8672 0.4096 3.8912a9.6256 9.6256 0 0 0 1.6896 1.536c2.2528 1.28 5.632 2.6624 10.2912 4.096 5.12 1.1776 12.1856 2.0992 21.504 2.6624l12.032 0.7168v35.84H281.867264v-34.816l10.9568-1.6384c9.216-1.3312 15.872-3.2768 20.4288-5.4272a35.9424 35.9424 0 0 0 11.52-8.6016c3.328-4.096 6.656-9.5744 9.728-16.896l0.2048-0.3072c3.7376-8.0384 8.192-18.0224 13.4144-29.9008l143.36-334.592z m13.3632 33.7408l-68.3008 159.488L489.124864 467.968l86.528 206.1312h-0.9216l25.9072 61.184c7.5776 18.944 12.288 34.5088 12.6976 45.4656v0.4096a32.256 32.256 0 0 1-8.8064 22.2208h66.8672a83.3536 83.3536 0 0 1-1.4336-1.2288l-0.3072-0.256a104.704 104.704 0 0 1-17.0496-21.9648l-0.256-0.4608a327.1168 327.1168 0 0 1-15.9232-34.56L504.843264 430.592zM400.651264 673.9968l-5.2224 12.1344 5.2224-12.0832z m-31.744 73.8304c-4.096 9.2672-7.68 17.3056-10.8544 24.064a93.9008 93.9008 0 0 1-13.6704 23.1424l-0.256 0.256c-2.6112 2.9696-5.4784 5.632-8.6016 8.0384h34.6112a29.0304 29.0304 0 0 1-6.6048-9.1136L363.275264 793.6l-0.2048-0.6144a40.3456 40.3456 0 0 1-1.9456-12.8c0-8.704 2.9696-19.7632 7.7824-32.4096z m70.4-99.3792h97.8432l-48.2816-115.0976-49.5616 115.0976z"
|
||
fill="#FFFFFF"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style>
|
||
.ai-tool {
|
||
position: fixed;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
z-index: 2021;
|
||
}
|
||
|
||
.ai-tool-con {
|
||
position: absolute;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.ai-tool-con::before {
|
||
content: "";
|
||
background: linear-gradient(90deg, #FF0000, #FF8400, #FF8400, #0066FF, #0066FF, #FF8400, #FF8400, #FF0000);
|
||
background-size: 400%;
|
||
border-radius: 24px;
|
||
bottom: -2px;
|
||
left: -2px;
|
||
position: absolute;
|
||
right: -2px;
|
||
top: -2px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.ai-tool-con:has(.is-focus)::before {
|
||
animation: move-ab150fae 20s infinite ease;
|
||
filter: blur(5px);
|
||
}
|
||
|
||
.ai-tool-con > svg {
|
||
height: 14px;
|
||
width: 14px;
|
||
background: #ccc;
|
||
border-radius: 15px;
|
||
padding: 4px;
|
||
position: absolute;
|
||
right: -6px;
|
||
top: -10px;
|
||
cursor: pointer;
|
||
z-index: 2001;
|
||
}
|
||
|
||
.ai-tool .el-input {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.ai-tool input {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.ai-tool .el-loading-spinner {
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.ai-tool .el-input__wrapper {
|
||
width: 100%;
|
||
box-shadow: none;
|
||
border-radius: 24px;
|
||
height: 40px;
|
||
}
|
||
|
||
.ai-tool .el-input__wrapper.is-focus {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.ai-tool .el-input .fc-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 15px;
|
||
position: absolute;
|
||
right: 12px;
|
||
bottom: 12px;
|
||
cursor: pointer;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: var(--fc-style-color-1);
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.ai-tool .el-input .fc-icon.disabled {
|
||
background: var(--fc-text-color-3);
|
||
}
|
||
|
||
.ai-tool .el-loading-mask {
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.ai-tool-btn {
|
||
position: fixed;
|
||
right: 0px;
|
||
bottom: 100px;
|
||
color: #FFF;
|
||
background-color: var(--fc-style-color-1);
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
border-radius: 5px 0px 0px 4px;
|
||
}
|
||
|
||
@keyframes move-ab150fae {
|
||
100% {
|
||
background-position: -400% 0;
|
||
}
|
||
}
|
||
</style> |