样式调整

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@kangc/v-md-editor": "^2.3.15",
     "element-plus": "^2.3.4",
+    "highlight.js": "^11.8.0",
     "nanoid": "^4.0.2",
     "node-forge": "^1.3.1",
     "query-string": "^8.1.0",

src/App.vue

@@ -1,10 +1,7 @@
 <template>
-  <div id="app">
-    <el-row class="home">
-      <chat class="fill" :config="setting" @setting="showSettings=!showSettings"/>
-      <settings class="mar-l16" v-show="showSettings" v-model="setting"/>
-    </el-row>
-  </div>
+  <chat class="fill" :config="setting" :showSettings="showSettings"
+        @setting="showSettings=!showSettings"/>
+  <settings v-show="showSettings" v-model="setting"/>
 </template>
 
 <script>
@@ -99,19 +96,10 @@ export default {
 #app {
   width: 100vw;
   height: 100vh;
-  background-size: cover;
-  position: absolute;
-}
-
-.home {
-  width: 100vw;
-  height: 100vh;
-  padding: 16px;
   background-color: #272A37;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  padding: 16px;
+  display: flex;
+  box-sizing: border-box;
 }
 
 .fill {

src/components/chat.vue

@@ -5,7 +5,7 @@
       <el-row justify="end" class="fill mar-l8 gap-8">
         <!--聊天操作栏-->
         <div class="optIcon clear"/>
-        <div class="optIcon setting" @click="$emit('setting')"/>
+        <div class="optIcon setting" :class="{active:$attrs.showSettings}" @click="$emit('setting')"/>
       </el-row>
     </el-row>
     <thinking-bar v-show="loading"/>
@@ -85,6 +85,8 @@ export default {
   color: #fff;
   display: flex;
   flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 
   .optIcon {
     box-sizing: border-box;
@@ -104,6 +106,10 @@ export default {
     }
 
     &:hover {
+      opacity: .8;
+    }
+
+    &.active {
       opacity: 1;
     }
 

src/components/chatContent.vue

@@ -1,10 +1,17 @@
 <template>
   <section class="chatContent" @scroll="onScroll">
+    <div class="chat-wrapper">
+      <div class="chat-friend">
+        <div class="chat-text">
+          <v-md-preview :text="demo"/>
+        </div>
+      </div>
+    </div>
     <div class="chat-wrapper" v-for="item in list" :key="item.id">
       <div class="chat-friend" v-if="item.uid !== 'me'">
         <div class="chat-text" v-if="item.chatType == 0">
           <icon-copy @click="copy(item.msg, '已复制')"/>
-          <v-md-preview-html :html="item.msg.trim()" preview-class="vuepress-markdown-body"/>
+          <v-md-preview :text="item.msg.trim()"/>
         </div>
         <div class="chat-img" v-if="item.chatType == 1">
           <img :src="item.msg" alt="表情" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px"/>
@@ -41,6 +48,22 @@ export default {
   props: {
     list: {default: () => []}
   },
+  data() {
+    return {
+      demo: "要针对一个CSS滚动到元素的最底部，可以使用以下JS代码：\n" +
+          "\n" +
+          "``` javascript\n" +
+          "var element = document.getElementById('yourElementId');\n" +
+          "scrollToBottom(element);\n" +
+          "\n" +
+          "function scrollToBottom(element) {\n" +
+          "  element.scrollTop = element.scrollHeight - element.clientHeight;\n" +
+          "}\n" +
+          "```\n" +
+          "\n" +
+          "这个代码首先获取一个具有给定ID的元素，然后调用名为`scrollToBottom`的函数，该函数将元素滚动到底部。在`scrollToBottom`函数中，`scrollTop`属性设置为`element.scrollHeight - element.clientHeight`的结果，这将把元素滚动到它的最底部。"
+    }
+  },
   methods: {
     onScroll() {
       const scrollDom = this.$el;
@@ -49,6 +72,7 @@ export default {
       const scrollHeight = scrollDom.scrollHeight;
       // 当滚动到底部，设置 isAutoScroll 为 true
       this.isAutoScroll = scrollTop + offsetHeight === scrollHeight;
+      scrollDom.scrollTop = scrollHeight - scrollDom.clientHeight
     },
     copy(msg) {
       if (copyToClipboard(msg)) {
@@ -98,6 +122,7 @@ export default {
       max-width: max(650px, 90%);
       border-radius: 4px;
       background-color: #fff;
+      color: initial;
     }
 
     .chat-img {
@@ -190,8 +215,12 @@ export default {
     }
   }
 
-  :deep(.vuepress-markdown-body) {
+  :deep(.github-markdown-body) {
     padding: 2px 0 !important;
+
+    p {
+      margin-bottom: 0;
+    }
   }
 }
 </style>

src/components/settings.vue

@@ -72,7 +72,6 @@ export default {
     },
     getModelAccount(c = 0) {
       const ai = this.settings.model
-      console.log(ai)
       if (ai.apiKey) {
         this.loadingAccount = true
         ai.getAccount().then(v => this.settings.account = v).finally(() => this.loadingAccount = false)
@@ -84,7 +83,8 @@ export default {
 
 <style lang="scss" scoped>
 .settings {
-  min-width: 400px;
+  min-width: 375px;
+  margin-left: 16px;
 
   :deep(.el-form) {
     .el-form-item__label {
@@ -116,4 +116,22 @@ export default {
     }
   }
 }
+
+//移动端布局
+@media screen and (max-width: 1150px) {
+  .settings {
+    margin-left: 0;
+    z-index: 202305181433;
+    position: fixed;
+    box-sizing: border-box;
+    padding: 0 16px 16px;
+    width: 100vw;
+    top: 80px;
+    left: 0;
+    height: calc(100vh - 80px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #272A37;
+  }
+}
 </style>

src/main.js

@@ -1,14 +1,17 @@
-import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
-import '@kangc/v-md-editor/lib/style/preview-html.css';
-import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
+import VMdPreview from '@kangc/v-md-editor/lib/preview';
+import '@kangc/v-md-editor/lib/style/preview.css';
+import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
+import '@kangc/v-md-editor/lib/theme/style/github.css';
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import Hljs from "highlight.js"
 import {createApp} from 'vue'
 import App from './App.vue'
 import axios from "./utils/axios";
 
 const app = createApp(App)
 app.config.globalProperties.$http = axios
+VMdPreview.use(githubTheme, {Hljs})
 app.use(ElementPlus)
-app.use(VMdPreviewHtml);
+app.use(VMdPreview);
 app.mount('#app')