From 276a25ddb06a4dfe14b58fcf1ef260b6b968f6d7 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 28 三月 2025 15:24:22 +0800
Subject: [PATCH] 消息输入框完善
---
src/components/AiChat.vue | 97 ++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 85 insertions(+), 12 deletions(-)
diff --git a/src/components/AiChat.vue b/src/components/AiChat.vue
index a2cca50..b372582 100644
--- a/src/components/AiChat.vue
+++ b/src/components/AiChat.vue
@@ -37,18 +37,37 @@
<!-- 杈撳叆妗� -->
<div class="chat-input">
+ <div style="position: relative;width: 100%;box-sizing: border-box;">
<el-input
v-model="inputMessage"
+ type="textarea"
+ resize="none"
+ :autofocus="true"
+ :autosize="true"
placeholder="璇疯緭鍏ユ秷鎭紝鎸変笅鍥炶溅鍙戦��"
@keyup.native.enter="sendMessage"
+ @keydown.enter.native.prevent="handleEnterKey"
>
- <div slot="append">
- <el-button type="primary" @click="sendMessage" icon="el-icon-thumb"></el-button>
- </div>
</el-input>
-<!-- <div class="send-but" @click="sendMessage">-->
-<!-- <svg t="1742455190051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1160" width="32" height="32"><path d="M417.016025 991.681197h266.763504l286.972859-930.353884z" fill="#6E6E96" opacity=".2" p-id="1161"></path><path d="M318.168022 667.620127l106.879202 307.873376L985.008068 34.974312z" fill="#E5C0A8" p-id="1162"></path><path d="M425.051265 993.681924a18.180337 18.180337 0 0 1-17.186036-12.222619l-106.87516-307.873376a18.188421 18.188421 0 0 1 4.664319-19.15847L972.498476 21.777602a18.184379 18.184379 0 0 1 28.14355 22.497056L440.67714 984.797891a18.192463 18.192463 0 0 1-15.625875 8.884033z m-85.849345-320.940746l90.210525 259.868071L902.064828 138.741273 339.20192 672.741178z" fill="#6E6E96" p-id="1163"></path><path d="M51.287304 548.991206L985.008068 34.974312 318.168022 667.620127z" fill="#FFDAC1" p-id="1164"></path><path d="M318.16398 685.808548c-2.497876 0-5.01192-0.513318-7.384499-1.568246l-266.876675-118.628922a18.188421 18.188421 0 0 1-10.783713-15.848177 18.204588 18.204588 0 0 1 9.401393-16.713137L976.237207 19.041256a18.188421 18.188421 0 1 1 21.292578 29.129766L330.689739 680.816837a18.184379 18.184379 0 0 1-12.525759 4.991711z m-226.005273-138.555347l222.302919 98.811627L869.915784 119.097779 92.158707 547.253201z" fill="#6E6E96" p-id="1165"></path><path d="M985.008068 34.974312L425.281652 711.656315l429.48924 166.755482z" fill="#FFDAC1" p-id="1166"></path><path d="M854.770892 896.60426a18.196504 18.196504 0 0 1-6.584208-1.232771l-429.48924-166.759524a18.176295 18.176295 0 0 1-7.42896-28.551779L970.998942 23.382225a18.196504 18.196504 0 0 1 31.995453 14.368853l-130.245259 843.445569a18.224798 18.224798 0 0 1-8.87595 12.978448 18.325844 18.325844 0 0 1-9.102294 2.429165z m-399.409634-192.781092l384.887191 149.44819L956.969607 97.417181 455.361258 703.823168z" fill="#6E6E96" p-id="1167"></path><path d="M425.281652 993.681924a18.192463 18.192463 0 0 1-18.188421-18.188421v-263.837188a18.188421 18.188421 0 0 1 36.376842 0v263.837188a18.188421 18.188421 0 0 1-18.188421 18.188421z" fill="#6E6E96" p-id="1168"></path><path d="M985.008068 34.974312L518.147686 728.203736l-62.786428-24.380568zM417.016025 711.656315l78.937746 109.18711 32.504729-54.593555z" fill="#6E6E96" opacity=".2" p-id="1169"></path></svg>-->
-<!-- </div>-->
+ <div class="send-op-list">
+ <div class="send-warp">
+ <div class="add-option">
+ <div :class="{'add-but': true, 'add-but-active': netSearchEnable}" @click="changeNetEnable">
+ <svg t="1743144032689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2731" width="18" height="18">
+ <path fill="#575757" d="M909.989 343.281c-21.76-51.446-52.904-97.643-92.568-137.307-39.663-39.664-85.86-70.808-137.306-92.568-53.28-22.536-109.858-33.962-168.164-33.962S397.067 90.87 343.787 113.406c-51.446 21.76-97.643 52.904-137.307 92.568-39.664 39.664-70.808 85.86-92.568 137.307-22.536 53.28-33.962 109.858-33.962 168.164s11.426 114.884 33.962 168.164c21.76 51.445 52.904 97.643 92.568 137.306 39.664 39.664 85.86 70.809 137.307 92.568 53.28 22.535 109.858 33.962 168.164 33.962s114.884-11.427 168.164-33.962c51.445-21.76 97.643-52.904 137.306-92.568 39.664-39.663 70.809-85.86 92.568-137.306 22.535-53.28 33.962-109.858 33.962-168.164s-11.427-114.884-33.962-168.164zM543.951 376.03c17.57-0.243 35.095-0.683 52.536-1.368a1990.762 1990.762 0 0 0 91.131-5.678c10.157 34.378 16.643 71.314 19.389 110.46H543.951V376.03z m0-64.069V163.41c17.617 12.176 39.372 29.845 61.074 54.197 23.42 26.28 43.109 56.138 58.784 89.019-41.937 3.147-82.117 4.783-119.858 5.335z m-64-144.763v144.705a2038.572 2038.572 0 0 1-103.41-4.309 1929.6 1929.6 0 0 1-11.183-0.786c15.195-31.915 34.175-60.991 56.676-86.711 20.284-23.185 40.722-40.49 57.917-52.899zM370.842 371.354a2124.301 2124.301 0 0 0 109.109 4.606v103.484H322.25c2.742-39.079 9.208-75.96 19.335-110.285 9.453 0.776 19.21 1.512 29.257 2.195z m-112.731 108.09H145.342c3.916-45.757 16.208-89.778 36.139-130.276 20.257 3.578 52.836 8.759 95.407 13.641-9.902 36.699-16.182 75.682-18.777 116.635z m-0.859 64c1.975 39.144 9.712 78.242 23.101 116.799-44.093 4.976-77.797 10.319-98.621 13.992-20.08-40.64-32.458-84.841-36.39-130.792h111.91z m64.098 0h158.601v104.048c-36.37 0.602-72.818 2.13-109.109 4.601-8.41 0.573-16.612 1.182-24.609 1.821-14.322-36.523-22.659-73.543-24.883-110.47z m158.601 168.103v131.712c-16.974-15.877-36.574-35.962-56.038-59.735-18.064-22.064-33.892-44.698-47.379-67.668a2038.38 2038.38 0 0 1 103.417-4.309z m64 136.665V711.487c34.387 0.503 70.782 1.903 108.68 4.527-13.467 22.915-29.263 45.496-47.286 67.509-21.547 26.32-43.262 48.119-61.394 64.689z m52.536-199.426a2063.187 2063.187 0 0 0-52.536-1.384V543.444h163.958c-2.227 36.975-10.582 74.045-24.939 110.615a1994.972 1994.972 0 0 0-86.483-5.273z m175.521-105.342H878.56c-3.928 45.898-16.283 90.051-36.322 130.652a1822.84 1822.84 0 0 0-93.476-13.439c13.478-38.691 21.264-77.929 23.246-117.213z m-0.859-64c-2.605-41.111-8.924-80.238-18.891-117.061a1821.491 1821.491 0 0 0 90.233-13.075c19.89 40.46 32.158 84.432 36.07 130.136H771.149z m1.017-228.215a373.188 373.188 0 0 1 34.046 39.155 1772.853 1772.853 0 0 1-75.117 9.98c-19.529-46.785-45.825-88.91-78.291-125.338a423.863 423.863 0 0 0-5.386-5.927c46.185 18.263 88.573 45.955 124.748 82.13zM384.81 165.923a420.788 420.788 0 0 0-8.355 9.102c-32.552 36.525-58.904 78.775-78.449 125.71-32.357-3.484-59.48-7.244-80.226-10.469a373.386 373.386 0 0 1 33.956-39.037c38.338-38.338 83.654-67.152 133.074-85.306zM251.736 771.659a373.444 373.444 0 0 1-33.584-38.548c22.526-3.498 52.529-7.614 88.626-11.328 18.229 35.542 41.31 70.356 68.867 103.808a678.068 678.068 0 0 0 35.727 39.995c-59.757-16.875-114.524-48.814-159.636-93.927z m368.249 91.745a677.032 677.032 0 0 0 33.629-37.814c27.469-33.344 50.487-68.043 68.689-103.466a1780.315 1780.315 0 0 1 83.528 10.88 373.34 373.34 0 0 1-33.665 38.654c-43.23 43.232-95.324 74.373-152.181 91.746z" p-id="2732"></path></svg>
+ 鑱旂綉鎼滅储
+ </div>
+ </div>
+ <div class="send-but-warp">
+ <div class="send-but">
+ <svg t="1743144485359" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1261" width="36" height="36">
+ <path fill="#409eff" d="M512 85.333333c234.666667 0 426.666667 192 426.666667 426.666667s-192 426.666667-426.666667 426.666667S85.333333 746.666667 85.333333 512 277.333333 85.333333 512 85.333333z m-6.4 234.666667c-4.266667 2.133333-6.4 2.133333-12.8 8.533333l-153.6 153.6c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0l96-96V682.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V430.933333l96 96c12.8 12.8 32 12.8 44.8 0s12.8-32 0-44.8l-153.6-153.6c-6.4-6.4-8.533333-8.533333-12.8-8.533333s-8.533333-2.133333-12.8 0z" p-id="1262"></path>
+ </svg>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</template>
@@ -62,6 +81,7 @@
name: 'AiChat',
data() {
return {
+ netSearchEnable: false,
messages: [
{
role: 'assistant',
@@ -101,6 +121,13 @@
};
},
methods: {
+ changeNetEnable() {
+ this.netSearchEnable = ! this.netSearchEnable
+ },
+ // 闃绘鍥炶溅鎹㈣
+ handleEnterKey(e) {
+ e.preventDefault(); // 闃绘榛樿鎹㈣琛屼负
+ },
handleMouseEnter(msgIndex) {
console.log("榧犳爣绉诲叆", msgIndex)
this.msgIndex = msgIndex
@@ -166,14 +193,28 @@
</script>
<style scoped>
-.send-but {
+.add-but {
+ width: 90px;
+ height: 80%;
+ border: 1px solid #E4E7ED;
display: flex;
- justify-content: center;
align-items: center;
- width: 58px;
- height: 54px;
- background-color: #f6f6f6;
- margin-left: 5px;
+ justify-content: center;
+ border-radius: 8px;
+ background-color: #DCDFE6;
+}
+.add-but:hover {
+ cursor: pointer;
+ background-color: #409EFF;
+}
+.add-but-active {
+ background-color: #409EFF;
+}
+.send-but-warp {
+ flex:1;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
}
.send-but:hover {
cursor: pointer;
@@ -268,4 +309,36 @@
.msg-op:hover {
cursor: pointer;
}
+
+.send-op-list {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ user-select: none;
+ opacity: 1;
+ z-index: 2;
+}
+
+.send-warp {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ padding: 0 15px;
+ box-sizing: border-box
+}
+
+.add-option {
+ flex:1;
+ display: flex;
+ justify-content: flex-start;
+}
+
+::v-deep(.el-textarea__inner) {
+ min-height: 100px !important;
+ max-height: 400px !important;
+ padding-bottom: 85px !important;
+}
</style>
--
Gitblit v1.8.0