Feat(云灵AI):界面初始化

2025-03-27 18:12:48 +08:00
parent 01c1a44a32
commit 615b89c8a5
21 changed files with 7240 additions and 316 deletions
@@ -0,0 +1,197 @@
+<template>
+  <view
+    :class="scrollTop > 0 ? 'page-scroll' : ''"
+    class="fix-tabbar-page"
+  >
+    <hx-navbar
+      :back="true"
+      :fixed="true"
+      color="#333"
+      :statusBar="true"
+      transparent="hidden"
+      barPlaceholder="hidden"
+      title="云灵AI智能助手"
+    />
+    <view
+      id="fixTbabarBody"
+      :style="{
+        'padding-top': (44 + statusBarHeight) + 'px'
+      }"
+      class="fix-tabbar-body"
+    >
+      <view class="chat-wrap">
+        <view v-if="chatMessageListLength > 0" class="chat-list-wrap">
+          <view
+            v-for="(item, index) in chatMessageList"
+            :key="index"
+            class="chat-message-item"
+          >
+            <view v-if="item.type === -1" class="chat-message-body">
+              <view class="item-right">
+                <view class="txt">
+                  {{ item.prompt }}
+                </view>
+              </view>
+            </view>
+            <view v-if="item.type === -2" class="chat-message-body">
+              <view class="avatar">
+                <image
+                  :src="'http://resource.xdd618.com/v1ppYx3WizxJ72a1af114c9931828888d959066fa3e7-20240314125834.png'"
+                  class="chat-avatar"
+                  mode="widthFix"
+                />
+              </view>
+              <view class="item-left">
+                <view class="txt">
+                  <view
+                    ref="rich-text-box"
+                    :class="{
+                      'show-cursor': item.showCursor
+                    }"
+                    class="rich-text-box"
+                  >
+                    <rich-text
+                      v-if="item.nodes && item.nodes.length"
+                      :nodes="item.nodes"
+                      space="nbsp"
+                    />
+                    <view v-if="!(item.nodes && item.nodes.length) && loading" class="loader-wrap">
+                      <div class="loader" />
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view
+                v-if="index === (chatMessageListLength - 1) && item.listQuestion.length > 0"
+                class="suggestion-wrap"
+              >
+                <view class="suggestion-list">
+                  <view
+                    v-for="(question, questionIndex) in item.listQuestion"
+                    :key="questionIndex"
+                    class="item"
+                    @click="suggestionItemClickHandle(question)"
+                  >
+                    <view class="label">
+                      <image
+                        :src="webUrl + '/icon-30.png'"
+                        class="pic"
+                        mode="widthFix"
+                      />
+                    </view>
+                    {{ question }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view id="bottom_postion" class="bottom-postion" />
+      </view>
+    </view>
+    <view
+      v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
+      class="page-to-bottom"
+    >
+      <image
+        :src="webUrl + '/icon-29.png'"
+        class="icon"
+        mode="widthFix"
+        @click="scrollToBottomHandle"
+      />
+    </view>
+    <bottom-send
+      ref="bottomSend"
+      :loading="loading"
+      @send="streamReq"
+      @add="createNewHandle"
+    />
+  </view>
+</template>
+
+<script>
+import { chatMixins } from '@/mixins/chatMixins.js'
+export default {
+  name: 'AiChatIndexPage',
+  mixins: [chatMixins],
+  methods: {
+    createdCallbak() {
+      this.$nextTick(() => {
+        this.scrollToBottomHandle()
+      })
+    },
+    // 创建新会话
+    createNewHandle() {
+      if (!this.chatNumber) return
+      this.chatNumber = ''
+      this.showCursor = false
+      this.loading = false
+      this.getConfigLoading = false
+      this.infoResData = {}
+      this.chatMessageList = []
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.guide-wrap {
+  position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+  width: 706rpx;
+	padding: 24rpx 0 0 0;
+  margin: 0 auto;
+	.pic {
+		display: block;
+		width: 706rpx;
+	}
+  .pic2 {
+    position: absolute;
+    top: 42rpx;
+    left: 68rpx;
+    display: block;
+    width: 120rpx;
+    height: 120rpx;
+  }
+}
+.chat-wrap {
+	padding: 0 0 180rpx 0;
+	.chat-info-wrap {
+		padding: 24rpx;
+    .chat-list-wrap2 {
+      padding: 0;
+    }
+	}
+  .no-info-list {
+    height: 240rpx;
+    line-height: 240rpx;
+    text-align: center;
+    color: #999;
+  }
+}
+.loading-wrap {
+	text-align: center;
+	color: #666;
+	line-height: 120rpx;
+}
+.rich-text-box {
+	max-width: 100%;
+}
+.show-cursor .cursor {
+	display: inline-block;
+	color: #FA9108;
+	font-weight: bold;
+	animation: blinking 1s infinite;
+}
+
+@keyframes blinking {
+	from {
+		opacity: 1.0;
+	}
+
+	to {
+		opacity: 0.0;
+	}
+}
+</style>