diff --git a/api/chat/index.js b/api/chat/index.js index 80435f8..0f5bca0 100644 --- a/api/chat/index.js +++ b/api/chat/index.js @@ -7,3 +7,11 @@ export function getSseConfigV1(data) { export function getCompletions(params) { return request.get('/v1/chat/sse/completions', params, { login: true }) } + +export function deleteChatItemByConversationId(id) { + return request.delete('/v1/chat/message/' + id, {}, { login: true }) +} + +export function getChatList(params) { + return request.get('/v1/chat', params, { login: true }) +} diff --git a/api/http.js b/api/http.js new file mode 100644 index 0000000..568c7cb --- /dev/null +++ b/api/http.js @@ -0,0 +1,17 @@ +import request from '@/utils/request' + +export function getAction(url, params) { + return request.get(url, params) +} + +export function postAction(url, data) { + return request.post(url, data) +} + +export function putAction(url, data) { + return request.put(url, data) +} + +export function deleteAction(url, data) { + return request.delete(url, data) +} diff --git a/api/public.js b/api/public.js index 05f0582..38247e8 100644 --- a/api/public.js +++ b/api/public.js @@ -217,3 +217,8 @@ export function pushSystemStatic(data) { export function getAiSystemInfoSetting() { return request.get('/ai/systemInfo', {}, { login: false }) } + +// 获取AI系统预设话题列表 +export function getAiSystemInfoTopic() { + return request.get('/ai/systemTopic', {}, { login: false }) +} diff --git a/assets/css/aiChat.less b/assets/css/aiChat.less index 259375b..6452833 100644 --- a/assets/css/aiChat.less +++ b/assets/css/aiChat.less @@ -11,6 +11,10 @@ page { position: relative; min-height: 100vh; background-color: #fff; + background-size: 100% 100vh; + background-image: url(https://wxapp.xdd618.com/api/file/pic/aiChat/bg.png); + background-repeat: no-repeat; + background-attachment: fixed; .fix-tabbar-header { position: fixed; top: 0; @@ -82,7 +86,6 @@ page { z-index: 2; min-height: 100vh; box-sizing: border-box; - background: linear-gradient(180deg, #FFF0DC 0%, rgba(255,234,216,0.67) 57%, rgba(255,255,255,0) 100%); } .page-to-bottom { position: fixed; @@ -92,11 +95,32 @@ page { z-index: 8; display: flex; align-items: center; - justify-content: center; + justify-content: flex-end; + padding: 0 24rpx; + .new-chat { + display: flex; + align-items: center; + height: 68rpx; + padding: 0 24rpx; + border-radius: 40rpx; + line-height: 68rpx; + font-size: 30rpx; + background-color: #fff; + box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16); + .btn-icon { + display: block; + width: 40rpx; + height: 40rrpx; + margin: 0 8rpx 0 0; + } + } .icon { display: block; width: 68rpx; height: 68rpx; + margin: 0 0 0 24rpx; + border-radius: 50%; + box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16); } } .fix-page-bottom { @@ -106,8 +130,6 @@ page { right: 0; z-index: 9; padding: 24rpx 24rpx 48rpx 24rpx; - background-color: #fff; - box-shadow: 0rpx -20rpx 30rpx rgba(176,186,206,0.16); transition: all 0.2s; &.focus { transform: translateY(-48rpx); @@ -116,11 +138,34 @@ page { position: relative; z-index: 2; min-height: 100rpx; + .history-wrap { + width: 98rpx; + height: 100rpx; + border-radius: 30rpx; + text-align: center; + line-height: 100rpx; + font-size: 30rpx; + color: #333; + background-color: #fff; + box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16); + } + .input-container { + display: flex; + align-items: center; + justify-content: space-between; + height: 100rpx; + width: calc(100% - 122rpx); + padding: 6rpx 6rpx 6rpx 24rpx; + border-radius: 30rpx; + box-sizing: border-box; + background-color: #fff; + box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16); + } .input-model { .icon { display: block; - width: 68rpx; - height: 68rpx; + width: 40rpx; + height: 40rpx; } } .input-wrap { @@ -130,21 +175,16 @@ page { position: relative; z-index: 5; width: 100%; - max-height: 50vh; - padding: 15rpx; - margin: 0 24rpx; + height: 88rpx; border: 0; box-sizing: border-box; - border-radius: 20rpx; - line-height: 50rpx; + line-height: 88rpx; color: #333; font-size: 30rpx; - overflow-y: auto; - box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16); } .placeholder-txt { position: absolute; - left: 40rpx; + left: 0; top: 50%; z-index: 2; color: #999; @@ -155,8 +195,8 @@ page { .send-btn { .icon { display: block; - width: 100rpx; - height: 100rpx; + width: 88rpx; + height: 88rpx; } } .sound-input-wrap { @@ -374,30 +414,32 @@ page { } .suggestion-list { .item { - display: inline-flex; - min-height: 44rpx; - padding: 12rpx 12rpx 12rpx 18rpx; - border-radius: 30rpx; - margin: 24rpx 24rpx 0 0; - font-size: 26rpx; - color: #333; - line-height: 38rpx; - overflow: hidden; - text-overflow: ellipsis; - background-color: #fff; - .label { + display: flex; + width: 100%; + .item-cont { display: flex; - justify-content: center; align-items: center; - width: 44rpx; + justify-content: space-between; height: 44rpx; - margin: 0 16rpx 0 0; - border-radius: 16rpx; - background: rgba(249,248,246,0.39); + padding: 12rpx 20rpx; + border-radius: 30rpx; + margin: 24rpx 0 0 0; + font-size: 26rpx; + color: #333; + line-height: 44rpx; + background-color: #fff; + box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1); + .txt { + flex: 1; + max-width: calc(100% - 80rpx); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } .pic { display: block; - width: 28rpx; - height: 28rpx; + width: 30rpx; + height: 30rpx; } } } @@ -414,7 +456,7 @@ page { color: #fff; font-size: 30rpx; line-height: 48rpx; - background: linear-gradient(270deg, #FA9108 0%, #FFC25C 100%); + background: #3D4CF1; box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16); .copy-btn { display: inline-block; @@ -429,12 +471,12 @@ page { } .bottom-btns { display: flex; - justify-content: flex-end; + justify-content: flex-start; padding: 20rpx 0 0 0; .item { display: flex; align-items: center; - margin: 0 0 0 48rpx; + margin: 0 48rpx 0 0; padding: 0; border: 0; border-radius: 0; @@ -592,13 +634,13 @@ page { word-break: normal; white-space: initial; .cursor { - color: #FA9108; + color: #3D4CF1; opacity: 0; } } .show-cursor { .cursor { - color: #FA9108; + color: #3D4CF1; opacity: 1; animation: blinking 1s infinite; } @@ -633,7 +675,7 @@ page { border-radius: 50%; } .loader::before { - border-color: #FA9108 #0000; + border-color: #3D4CF1 #0000; animation: inherit; animation-duration: .5s; animation-direction: reverse; @@ -661,7 +703,7 @@ page { width: 8px; margin: 0 24rpx; border-radius: 6px; - background-color: #FA9108; + background-color: #3D4CF1; } .one { height: 86rpx; diff --git a/components/aiChat/bottomSend.vue b/components/aiChat/bottomSend.vue index 152f041..672274e 100644 --- a/components/aiChat/bottomSend.vue +++ b/components/aiChat/bottomSend.vue @@ -14,55 +14,61 @@ - - - - 输入模式 + + + 历史 - - - - 请输入关键字... - - + + + + + + + + 发消息... + + - 发送 + - - - - 按住说话 - + + + + + 按住说话 @@ -87,10 +93,10 @@ export default { return { token: cookie.get('login_status'), userInfo: cookie.get('userInfo'), - webUrl: this.$webUrl, + webUrl: this.$VUE_APP_RESOURCES_URL, // 输入模式:input-键盘,sound-语音 inputModel: 'input', - prompt: '今天天气', + prompt: '', recordManager: null, // 录音权限是否开通 recordPermission: false, @@ -262,6 +268,9 @@ export default { this.$emit('send', { prompt: this.prompt }) this.prompt = '' this.inputOnFocus = false + }, + historyViewHandle() { + this.$emit('history') } } } diff --git a/mixins/chatMixins.js b/mixins/chatMixins.js index 15d53ee..7523d11 100644 --- a/mixins/chatMixins.js +++ b/mixins/chatMixins.js @@ -1,6 +1,7 @@ import { getSseConfigV1, - getCompletions + getCompletions, + deleteChatItemByConversationId } from '@/api/chat/index' import { VUE_APP_API_URL } from '@/config' import settings from '@/config/baseSetting.js' @@ -12,7 +13,8 @@ export const chatMixins = { return { token: cookie.get('login_status'), userInfo: cookie.get('userInfo'), - webUrl: this.$webUrl, + webUrl: this.$VUE_APP_RESOURCES_URL, + scrollData: {}, scrollTop: 0, isScrollToBottom: false, // 状态栏高度 @@ -49,6 +51,7 @@ export const chatMixins = { } }, onPageScroll(e) { + this.scrollData = e const scrollTop = e.scrollTop this.scrollTop = scrollTop const query = wx.createSelectorQuery().in(this) @@ -77,8 +80,6 @@ export const chatMixins = { _this.statusBarHeight = statusBar } }) - console.log(this.token) - console.log(this.userInfo) _this.createdCallbak() }, methods: { @@ -133,6 +134,13 @@ export const chatMixins = { init: 0 }) }, + // 大家都在问 + topicItemClickHandle(question) { + this.streamReq({ + prompt: question, + init: 0 + }) + }, streamReq(params) { const _this = this // 需要校验登录状态 diff --git a/pages/aiChat/components/historyList.vue b/pages/aiChat/components/historyList.vue new file mode 100644 index 0000000..728a3b9 --- /dev/null +++ b/pages/aiChat/components/historyList.vue @@ -0,0 +1,156 @@ + + + + + diff --git a/pages/aiChat/index.vue b/pages/aiChat/index.vue index 74db0a4..f71325f 100644 --- a/pages/aiChat/index.vue +++ b/pages/aiChat/index.vue @@ -6,9 +6,10 @@ @@ -19,6 +20,56 @@ }" class="fix-tabbar-body" > + + + + + + + + {{ settingInfo.helloMessageTitle }} + {{ settingInfo.helloMessageContent }} + + + + + + + #大家都在问 + + + + + + + {{ item.title }} + + + + + @@ -59,6 +110,44 @@
+ + + + + 复制 + + + + 重新生成 + + - + + + {{ question }} + - {{ question }} @@ -89,12 +180,22 @@ - + + + + 开启新对话 + + diff --git a/static/images/aiChat/avatar.png b/static/images/aiChat/avatar.png new file mode 100644 index 0000000..31ddb02 Binary files /dev/null and b/static/images/aiChat/avatar.png differ diff --git a/static/images/组 707@2x.png b/static/images/aiChat/bg.png similarity index 100% rename from static/images/组 707@2x.png rename to static/images/aiChat/bg.png diff --git a/static/images/aiChat/delete.png b/static/images/aiChat/delete.png new file mode 100644 index 0000000..8258b82 Binary files /dev/null and b/static/images/aiChat/delete.png differ diff --git a/static/images/aiChat/down.png b/static/images/aiChat/down.png new file mode 100644 index 0000000..025e924 Binary files /dev/null and b/static/images/aiChat/down.png differ diff --git a/static/images/aiChat/hot.png b/static/images/aiChat/hot.png new file mode 100644 index 0000000..ea77712 Binary files /dev/null and b/static/images/aiChat/hot.png differ diff --git a/static/images/aiChat/icon-01.png b/static/images/aiChat/icon-01.png new file mode 100644 index 0000000..d2e08c2 Binary files /dev/null and b/static/images/aiChat/icon-01.png differ diff --git a/static/images/aiChat/icon-02.png b/static/images/aiChat/icon-02.png new file mode 100644 index 0000000..c5a4ac8 Binary files /dev/null and b/static/images/aiChat/icon-02.png differ diff --git a/static/images/aiChat/icon-03.png b/static/images/aiChat/icon-03.png new file mode 100644 index 0000000..06b5a33 Binary files /dev/null and b/static/images/aiChat/icon-03.png differ diff --git a/static/images/aiChat/icon-04.png b/static/images/aiChat/icon-04.png new file mode 100644 index 0000000..2283091 Binary files /dev/null and b/static/images/aiChat/icon-04.png differ diff --git a/static/images/aiChat/icon-05.png b/static/images/aiChat/icon-05.png new file mode 100644 index 0000000..1997f57 Binary files /dev/null and b/static/images/aiChat/icon-05.png differ diff --git a/static/images/aiChat/keyboard.png b/static/images/aiChat/keyboard.png new file mode 100644 index 0000000..49e7474 Binary files /dev/null and b/static/images/aiChat/keyboard.png differ diff --git a/static/images/aiChat/logo-01.gif b/static/images/aiChat/logo-01.gif new file mode 100644 index 0000000..ccc6306 Binary files /dev/null and b/static/images/aiChat/logo-01.gif differ diff --git a/static/images/aiChat/microphone-big.png b/static/images/aiChat/microphone-big.png new file mode 100644 index 0000000..d30969d Binary files /dev/null and b/static/images/aiChat/microphone-big.png differ diff --git a/static/images/aiChat/microphone.png b/static/images/aiChat/microphone.png new file mode 100644 index 0000000..296102c Binary files /dev/null and b/static/images/aiChat/microphone.png differ diff --git a/static/images/aiChat/send.png b/static/images/aiChat/send.png new file mode 100644 index 0000000..2e95a0d Binary files /dev/null and b/static/images/aiChat/send.png differ