byt-lingxiao-ai 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# byt-lingxiao-test
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/components/ChatWindow.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="chat">
+    <div class="chat-ai" @click="toggleWindow">
+      <div class="chat-ai-avater"></div>
+      <div class="chat-ai-text">凌霄AI</div>
+    </div>
+    <!-- 添加一个遮罩层，用于捕获点击外部事件 -->
+    <div class="chat-overlay" v-show="visible" @click="handleOverlayClick">
+      <div class="chat-window" @click.stop>
+        <div class="chat-window-header">
+          <div class="chat-window-header-title">凌霄大模型AI对话</div>
+          <div class="chat-window-header-close" @click="visible = false">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M5.50002 5.5L18.5 18.5"
+                stroke="#4E5969"
+                stroke-width="1.89404"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M5.50002 18.5L18.5 5.5"
+                stroke="#4E5969"
+                stroke-width="1.89404"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+        <div ref="chatArea" class="chat-window-content scrollbar-hide">
+          <div
+            class="chat-window-message"
+            v-for="message in messages"
+            :key="message.id"
+          >
+            <div
+              class="chat-window-message-user"
+              v-if="message.type === 'user'"
+            >
+              <div class="user-message">{{ message.content }}</div>
+            </div>
+            <div class="chat-window-message-ai" v-else>
+              <div class="ai-message">{{ message.content }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="chat-window-footer">
+          <div class="chat-window-textarea">
+            <el-input
+              type="textarea"
+              class="chat-window-input"
+              placeholder="有什么我能帮您的吗？"
+              rows="2"
+              resize="none"
+              v-model="inputMessage"
+              @keydown="handleKeyDown"
+            ></el-input>
+            <div class="chat-window-bar">
+              <div class="chat-window-send">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <g clip-path="url(#clip0_640_2107)">
+                    <path
+                      d="M18.6427 2.37822C19.3253 2.47432 19.8025 3.10738 19.7065 3.79002C19.6871 3.97072 19.5381 4.41327 19.5403 4.41161L14.9673 17.8079L14.9632 17.8093C14.7858 18.3838 14.212 18.7607 13.5971 18.6744C13.4173 18.6492 13.2504 18.5862 13.1055 18.4949L13.0973 18.4977L9.83449 16.3686C9.58371 16.2584 9.4276 15.9939 9.46729 15.7115C9.5154 15.3691 9.83278 15.1317 10.1751 15.1798C10.293 15.1964 10.3988 15.2448 10.4853 15.3161L13.4054 17.2314L13.4073 17.2317C13.4452 17.2566 13.4882 17.2746 13.5364 17.2814C13.6911 17.3029 13.8371 17.2052 13.8793 17.0593L18.0469 4.89796L8.27396 14.3367L7.77435 17.8916C7.72706 18.2281 7.41369 18.464 7.07727 18.4169C6.74073 18.3696 6.50469 18.0564 6.55198 17.7198L7.07633 13.9889C7.08231 13.9464 7.09382 13.9066 7.10727 13.867C7.13549 13.7645 7.19079 13.6657 7.27291 13.5866L17.0754 4.12041L2.68514 8.17767L2.68487 8.1796C2.58481 8.21873 2.50686 8.31058 2.49042 8.42643C2.47412 8.5424 2.52417 8.65007 2.6093 8.71729L2.60903 8.71922L3.28261 9.16101L3.28013 9.16461C3.47505 9.29254 3.58819 9.52563 3.55386 9.77111C3.50575 10.1134 3.18836 10.3509 2.84602 10.3028C2.75512 10.29 2.6708 10.2584 2.59833 10.2127L2.59806 10.2147L1.37843 9.42001L1.37951 9.41227C1.02215 9.14901 0.816644 8.70195 0.882687 8.23203C0.951867 7.74096 1.29791 7.35545 1.73968 7.21445L1.73995 7.21251L17.7833 2.57104C18.0287 2.41036 18.3294 2.3342 18.6427 2.37822Z"
+                      fill="#013378"
+                    />
+                    <path
+                      d="M3.1309 10.9936C3.2178 10.5684 3.82528 10.5684 3.91218 10.9936C4.10411 11.9326 4.83794 12.6664 5.77697 12.8584C6.20213 12.9453 6.20213 13.5527 5.77697 13.6397C4.83794 13.8316 4.10411 14.5654 3.91218 15.5044C3.82528 15.9296 3.2178 15.9296 3.1309 15.5044C2.93897 14.5654 2.20513 13.8316 1.26611 13.6397C0.840944 13.5527 0.840944 12.9453 1.26611 12.8584C2.20513 12.6664 2.93897 11.9326 3.1309 10.9936Z"
+                      fill="#2B80F6"
+                    />
+                    <path
+                      d="M6.20382 8.56242C6.25596 8.30732 6.62045 8.30732 6.67259 8.56242C6.78775 9.12583 7.22805 9.56613 7.79146 9.68129C8.04656 9.73343 8.04656 10.0979 7.79146 10.1501C7.22805 10.2652 6.78775 10.7055 6.67259 11.2689C6.62045 11.524 6.25596 11.524 6.20382 11.2689C6.08866 10.7055 5.64836 10.2652 5.08495 10.1501C4.82985 10.0979 4.82985 9.73343 5.08495 9.68129C5.64836 9.56613 6.08866 9.12583 6.20382 8.56242Z"
+                      fill="#2B80F6"
+                    />
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_640_2107">
+                      <rect width="20" height="20" fill="white" />
+                    </clipPath>
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ChatWindow',
+  props: {
+    appendToBody: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      wsUrl: '',
+      inputMessage: '',
+      visible: false,
+      messages: [
+        {
+          id: 1,
+          type: 'user',
+          sender: '',
+          time: '',
+          content: '你好，欢迎来到凌霄大模型AI对话。',
+        },
+        {
+          id: 2,
+          type: 'ai',
+          sender: 'AI',
+          time: '',
+          content: '欢迎来到凌霄大模型AI对话。',
+        },
+        {
+          id: 3,
+          type: 'ai',
+          sender: 'AI',
+          time: '',
+          content: '请输入您的问题。',
+        },
+        {
+          id: 4,
+          type: 'user',
+          sender: '用户',
+          time: '',
+          content: '你好，欢迎来到凌霄大模型AI对话。',
+        },
+      ],
+    }
+  },
+  mounted() {
+    this.scrollToBottom()
+
+    // 处理append-to-body逻辑
+    if (this.appendToBody) {
+      this.appendToBodyHandler()
+    }
+  },
+  beforeDestroy() {
+    // 组件销毁前，如果元素被移动到body中，需要移除
+    if (this.appendToBody && this.$el.parentElement === document.body) {
+      document.body.removeChild(this.$el)
+    }
+  },
+  methods: {
+    initWebSocket() {},
+    initAudio() {},
+    handleSend() {},
+    toggleWindow() {
+      this.visible = !this.visible
+    },
+    showWindow() {
+      this.visible = true
+    },
+    hideWindow() {
+      this.visible = false
+    },
+    scrollToBottom() {
+      this.$nextTick(() => {
+        const chatArea = this.$refs.chatArea
+        if (chatArea) {
+          chatArea.scrollTop = chatArea.scrollHeight
+        }
+      })
+    },
+    handleKeyDown(e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        this.handleSend()
+      }
+    },
+    // 添加到body的处理函数
+    appendToBodyHandler() {
+      // 确保DOM已经渲染完成
+      this.$nextTick(() => {
+        // 检查元素是否已经在body中
+        if (this.$el.parentElement !== document.body) {
+          // 将组件的根元素移动到body中
+          document.body.appendChild(this.$el)
+        }
+      })
+    },
+    // 处理点击遮罩层事件
+    handleOverlayClick() {
+      this.visible = false
+    },
+  },
+  watch: {
+    messages: {
+      handler() {
+        this.scrollToBottom()
+      },
+      deep: true,
+    },
+  },
+}
+</script>
+<style scoped>
+.chat-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  z-index: 10000;
+}
+
+::v-deep .el-textarea__inner {
+  border: none !important;
+  padding: 0 5px;
+  font-family: 'PingFang SC' !important;
+}
+::v-deep .el-textarea__inner::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+::v-deep .el-textarea__inner::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.chat {
+  position: fixed;
+  bottom: 20px;
+  right: 10px;
+  z-index: 10001;
+}
+.chat-ai {
+  display: flex;
+  width: 38px;
+  padding: 2px 2px 9px 2px;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  border-radius: 40px;
+  background: linear-gradient(180deg, #3e5beb 0%, #5ca5f9 100%);
+  box-shadow: 0 2px 11.6px 0 rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  user-select: none;
+}
+.chat-ai-avater {
+  border-radius: 67px;
+  border: 1px solid #0f66e4;
+  background: #124087;
+  display: flex;
+  width: 34px;
+  height: 33px;
+  padding: 2px 2px 1px 2px;
+  justify-content: center;
+  align-items: center;
+  background-size: cover;
+  background-position: center;
+  background-image: url('./assets/normal.png');
+}
+.chat-ai-text {
+  color: #fff;
+  font-family: 'PingFang SC';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  width: 20px;
+  margin: 0 auto;
+  text-align: center;
+}
+.chat-window-message-user {
+  display: flex;
+  justify-content: flex-end;
+}
+.user-message {
+  max-width: 80%;
+  display: flex;
+  padding: 8px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 12px;
+  background: #e3ecff;
+}
+.chat-window-bar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}
+.chat-window-message-ai {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.ai-message {
+  max-width: 80%;
+  border-radius: 12px;
+  background: #f6f8fc;
+  padding: 8px 12px;
+}
+.chat-window {
+  width: 480px;
+  height: 740px;
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.16);
+  position: absolute;
+  bottom: 0;
+  right: 50px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.chat-window-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eaeaea;
+  background: #fff;
+  padding: 16px;
+  flex-shrink: 0;
+}
+.chat-window-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.chat-window-header-title {
+  color: #29414e;
+  font-size: 18px;
+  font-weight: 900;
+}
+.chat-window-header-close {
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  cursor: pointer;
+}
+.chat-window-footer {
+  padding: 16px;
+}
+.chat-window-textarea {
+  min-height: 99px;
+  max-height: 180px;
+  border-radius: 8px;
+  border: 1px solid #f2f2f2;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.chat-window-input {
+  padding: 10px 12px;
+  font-size: 16px;
+  font-family: 'PingFang SC';
+}
+.chat-window-send {
+  width: 70px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: rgba(43, 128, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+</style>

package/components/index.js

@@ -0,0 +1,28 @@
+import ChatWindow from './ChatWindow.vue';
+
+const components = {
+  ChatWindow,
+};
+
+const install = function(Vue) {
+  if (install.installed) return;
+  install.installed = true;
+
+  Object.keys(components).forEach(name => {
+    Vue.component(name, components[name]);
+  });
+};
+
+// 自动注册
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  install,
+  ...components
+};
+
+export {
+  ChatWindow
+}

package/dist/demo.html

@@ -0,0 +1 @@
+<!doctype html><meta charset="utf-8"><title>index demo</title><script src="./index.umd.js"></script><link rel="stylesheet" href="./index.css"><script>console.log(index)</script>