opt: refactor chat session page for mobile device

2025-11-04 16:23:42 +08:00 · 2024-01-25 14:07:10 +08:00
parent a39ed9764c
commit a1d1fe7763
10 changed files with 324 additions and 104 deletions
--- a/web/src/assets/css/mobile/chat-session.css
+++ b/web/src/assets/css/mobile/chat-session.css
@@ -16,7 +16,7 @@
 }
 .mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .icon-box .van-icon {
  font-size: 24px;
-  margin: 10px 0;
+  margin-left: 10px;
 }
 .mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .button-voice {
  padding: 0 5px;
--- a/web/src/assets/css/mobile/chat-session.styl
+++ b/web/src/assets/css/mobile/chat-session.styl
@@ -22,7 +22,7 @@
          .icon-box {
            .van-icon {
              font-size 24px
-              margin 10px 0
+              margin-left 10px
            }
          }

--- a/web/src/components/mobile/ChatReply.vue
+++ b/web/src/components/mobile/ChatReply.vue
@@ -7,7 +7,7 @@
    <div class="chat-item">
      <div class="triangle"></div>
      <div class="content-box">
-        <div ref="contentRef" :data-clipboard-text="orgContent" class="content" v-html="content"></div>
+        <div :data-clipboard-text="orgContent" class="content content-mobile" v-html="content"></div>
      </div>

    </div>
@@ -34,17 +34,6 @@ const props = defineProps({
    default: '/images/gpt-icon.png',
  }
 });
-
-const contentRef = ref(null)
-onMounted(() => {
-  const clipboard = new Clipboard(contentRef.value);
-  clipboard.on('success', () => {
-    showNotify({type: 'success', message: '复制成功', duration: 1000})
-  })
-  clipboard.on('error', () => {
-    showNotify({type: 'danger', message: '复制失败', duration: 2000})
-  })
-})
 </script>

 <style lang="stylus">
@@ -118,6 +107,77 @@ onMounted(() => {
            max-width 100%
          }
        }
+
+        .code-container {
+          position relative
+
+          .hljs {
+            border-radius 10px
+            line-height 1.5
+          }
+
+          .copy-code-mobile {
+            position: absolute;
+            right 10px
+            top 10px
+            cursor pointer
+            font-size 12px
+            color #c1c1c1
+
+            &:hover {
+              color #20a0ff
+            }
+          }
+
+        }
+
+        .lang-name {
+          display none
+          position absolute;
+          right 10px
+          bottom 50px
+          padding 2px 6px 4px 6px
+          background-color #444444
+          border-radius 10px
+          color #00e0e0
+        }
+
+
+        // 设置表格边框
+
+        table {
+          width 100%
+          margin-bottom 1rem
+          color #212529
+          border-collapse collapse;
+          border 1px solid #dee2e6;
+          background-color #ffffff
+
+          thead {
+            th {
+              border 1px solid #dee2e6
+              vertical-align: bottom
+              border-bottom: 2px solid #dee2e6
+              padding 10px
+            }
+          }
+
+          td {
+            border 1px solid #dee2e6
+            padding 10px
+          }
+        }
+
+        // 代码快
+
+        blockquote {
+          margin 0
+          background-color: #ebfffe;
+          padding: 0.8rem 1.5rem;
+          border-left: 0.5rem solid;
+          border-color: #026863;
+          color: #2c3e50;
+        }
      }
    }

--- a/web/src/router.js
+++ b/web/src/router.js
@@ -194,6 +194,11 @@ const routes = [
        name: 'mobile-chat-session',
        component: () => import('@/views/mobile/ChatSession.vue'),
    },
+    {
+        path: '/mobile/chat/export',
+        name: 'mobile-chat-export',
+        component: () => import('@/views/mobile/ChatExport.vue'),
+    },

    {
        name: 'test',
--- a/web/src/utils/libs.js
+++ b/web/src/utils/libs.js
@@ -166,3 +166,34 @@ export function isImage(url) {
    return expr.test(url);
 }

+export function processContent(content) {
+    //process img url
+    const linkRegex = /(https?:\/\/\S+)/g;
+    const links = content.match(linkRegex);
+    if (links) {
+        for (let link of links) {
+            if (isImage(link)) {
+                const index = content.indexOf(link)
+                if (content.substring(index - 1, 2) !== "]") {
+                    content = content.replace(link, "\n![](" + link + ")\n")
+                }
+            }
+        }
+    }
+
+    // 处理引用块
+    if (content.indexOf("\n") === -1) {
+        return content
+    }
+
+    const texts = content.split("\n")
+    const lines = []
+    for (let txt of texts) {
+        lines.push(txt)
+        if (txt.startsWith(">")) {
+            lines.push("\n")
+        }
+    }
+    return lines.join("\n")
+}
+
--- a/web/src/views/ChatExport.vue
+++ b/web/src/views/ChatExport.vue
@@ -14,7 +14,6 @@
            :icon="item.icon"
            :created-at="dateFormat(item['created_at'])"
            :tokens="item['tokens']"
-            :model="model"
            :content="item.content"/>
        <chat-reply v-else-if="item.type==='reply'"
                    :icon="item.icon"
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -266,7 +266,7 @@ import {
  VideoPause
 } from '@element-plus/icons-vue'
 import 'highlight.js/styles/a11y-dark.css'
-import {dateFormat, isImage, isMobile, randString, removeArrayItem, UUID} from "@/utils/libs";
+import {dateFormat, isImage, isMobile, processContent, randString, removeArrayItem, UUID} from "@/utils/libs";
 import {ElMessage, ElMessageBox} from "element-plus";
 import hl from "highlight.js";
 import {getSessionId, getUserToken, removeUserToken} from "@/store/session";
@@ -803,37 +803,6 @@ const loadChatHistory = function (chatId) {
  })
 }

-const processContent = (content) => {
-  //process img url
-  const linkRegex = /(https?:\/\/\S+)/g;
-  const links = content.match(linkRegex);
-  if (links) {
-    for (let link of links) {
-      if (isImage(link)) {
-        const index = content.indexOf(link)
-        if (content.substring(index - 1, 2) !== "]") {
-          content = content.replace(link, "\n![](" + link + ")\n")
-        }
-      }
-    }
-  }
-
-  // 处理引用块
-  if (content.indexOf("\n") === -1) {
-    return content
-  }
-
-  const texts = content.split("\n")
-  const lines = []
-  for (let txt of texts) {
-    lines.push(txt)
-    if (txt.startsWith(">")) {
-      lines.push("\n")
-    }
-  }
-  return lines.join("\n")
-}
-
 const stopGenerate = function () {
  showStopGenerate.value = false;
  httpGet("/api/chat/stop?session_id=" + getSessionId()).then(() => {
--- a/web/src/views/admin/Users.vue
+++ b/web/src/views/admin/Users.vue
@@ -309,7 +309,7 @@ const handleSelectionChange = function (rows) {
 const resetPass = (row) => {
  showResetPassDialog.value = true
  pass.value.id = row.id
-  pass.value.username = row.mobile
+  pass.value.username = row.username
 }

 const doResetPass = () => {
--- a/web/src/views/mobile/ChatExport.vue
+++ b/web/src/views/mobile/ChatExport.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="chat-export-mobile">
+    <div class="chat-box">
+      <van-sticky :offset-top="0" position="top">
+        <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
+          <template #title>
+            <van-dropdown-menu>
+              <van-dropdown-item :title="title">
+                <van-cell center title="角色"> {{ role }}</van-cell>
+                <van-cell center title="模型">{{ model }}</van-cell>
+              </van-dropdown-item>
+            </van-dropdown-menu>
+          </template>
+        </van-nav-bar>
+      </van-sticky>
+
+      <div class="chat-list-wrapper">
+        <div id="message-list-box" class="message-list-box">
+          <van-list
+              v-model:error="error"
+              :finished="finished"
+              error-text="请求失败，点击重新加载"
+              @load="onLoad"
+          >
+            <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
+              <chat-prompt
+                  v-if="item.type==='prompt'"
+                  :content="item.content"
+                  :created-at="dateFormat(item['created_at'])"
+                  :icon="item.icon"
+                  :tokens="item['tokens']"/>
+              <chat-reply v-else-if="item.type==='reply'"
+                          :content="item.content"
+                          :created-at="dateFormat(item['created_at'])"
+                          :icon="item.icon"
+                          :org-content="item.orgContent"
+                          :tokens="item['tokens']"/>
+            </van-cell>
+          </van-list>
+        </div>
+      </div>
+
+    </div><!-- end chat box -->
+  </div>
+</template>
+<script setup>
+
+import {dateFormat, processContent} from "@/utils/libs";
+import ChatReply from "@/components/mobile/ChatReply.vue";
+import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
+import {nextTick, ref} from "vue";
+import {useRouter} from "vue-router";
+import {httpGet} from "@/utils/http";
+import 'highlight.js/styles/a11y-dark.css'
+import hl from "highlight.js";
+
+const chatData = ref([])
+const router = useRouter()
+const chatId = router.currentRoute.value.query['chat_id']
+const title = router.currentRoute.value.query['title']
+const role = router.currentRoute.value.query['role']
+const model = router.currentRoute.value.query['model']
+const finished = ref(false)
+const error = ref(false)
+
+const md = require('markdown-it')({
+  breaks: true,
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: function (str, lang) {
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
+    // 显示复制代码按钮
+    const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
+<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(/<\/textarea>/g, '&lt;/textarea>')}</textarea>`
+    if (lang && hl.getLanguage(lang)) {
+      const langHtml = `<span class="lang-name">${lang}</span>`
+      // 处理代码高亮
+      const preCode = hl.highlight(lang, str, true).value
+      // 将代码包裹在 pre 中
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
+    }
+
+    // 处理代码高亮
+    const preCode = md.utils.escapeHtml(str)
+    // 将代码包裹在 pre 中
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
+  }
+});
+
+const onLoad = () => {
+  httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
+    // 加载状态结束
+    finished.value = true;
+    const data = res.data
+    if (data && data.length > 0) {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].type === "prompt") {
+          chatData.value.push(data[i]);
+          continue;
+        }
+
+        data[i].orgContent = data[i].content;
+        data[i].content = md.render(processContent(data[i].content))
+        chatData.value.push(data[i]);
+      }
+
+      nextTick(() => {
+        hl.configure({ignoreUnescapedHTML: true})
+        const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
+        blocks.forEach((block) => {
+          hl.highlightElement(block)
+        })
+      })
+    }
+  }).catch(() => {
+    error.value = true
+  })
+
+};
+
+</script>
+<style lang="stylus">
+.chat-export-mobile {
+  background #F5F5F5;
+  height 100vh
+
+  .chat-box {
+    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+
+    .message-list-box {
+      background #F5F5F5;
+      padding-top 50px
+      padding-bottom: 10px
+
+      .van-cell {
+        background none
+      }
+    }
+
+
+    .van-nav-bar__title {
+      .van-dropdown-menu__title {
+        margin-right 10px
+      }
+
+      .van-cell__title {
+        text-align left
+      }
+    }
+
+    .van-nav-bar__right {
+      .van-icon {
+        font-size 20px
+      }
+    }
+  }
+}
+</style>
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -48,14 +48,6 @@
                          :icon="item.icon"
                          :org-content="item.orgContent"
                          :tokens="item['tokens']"/>
-              <chat-mid-journey v-else-if="item.type==='mj'"
-                                :content="item.content"
-                                :icon="item.icon"
-                                :role-id="role"
-                                :chat-id="chatId"
-                                @disable-input="disableInput(true)"
-                                @enable-input="enableInput"
-                                :created-at="dateFormat(item['created_at'])"/>
            </van-cell>
          </van-list>
        </div>
@@ -87,18 +79,19 @@
              </template>
            </van-field>
          </van-cell-group>
-
        </van-sticky>
      </div>
    </div>
+
+    <button id="copy-link-btn" style="display: none;" :data-clipboard-text="url">复制链接地址</button>
  </div>
 </template>

 <script setup>
 import {nextTick, onMounted, ref} from "vue";
-import {showFailToast, showNotify, showToast} from "vant";
+import {showNotify, showToast} from "vant";
 import {onBeforeRouteLeave, useRouter} from "vue-router";
-import {dateFormat, randString, renderInputText, UUID} from "@/utils/libs";
+import {dateFormat, processContent, randString, renderInputText, UUID} from "@/utils/libs";
 import {getChatConfig} from "@/store/chat";
 import {httpGet} from "@/utils/http";
 import hl from "highlight.js";
@@ -107,7 +100,7 @@ import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
 import ChatReply from "@/components/mobile/ChatReply.vue";
 import {getSessionId, getUserToken} from "@/store/session";
 import {checkSession} from "@/action/session";
-import ChatMidJourney from "@/components/mobile/ChatMidJourney.vue";
+import Clipboard from "clipboard";

 const winHeight = ref(0)
 const navBarRef = ref(null)
@@ -122,10 +115,19 @@ const title = chatConfig.title
 const chatId = chatConfig.chatId
 const loginUser = ref(null)

-const hits = ref(0)
+const url = location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId

 onMounted(() => {
  winHeight.value = document.body.offsetHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight
+
+  const clipboard = new Clipboard(".content-mobile,.copy-code-mobile,#copy-link-btn");
+  clipboard.on('success', (e) => {
+    e.clearSelection()
+    showNotify({type: 'success', message: '复制成功', duration: 1000})
+  })
+  clipboard.on('error', () => {
+    showNotify({type: 'danger', message: '复制失败', duration: 2000})
+  })
 })

 const chatData = ref([])
@@ -139,26 +141,45 @@ checkSession().then(user => {
  router.push('/login')
 })

+const md = require('markdown-it')({
+  breaks: true,
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: function (str, lang) {
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
+    // 显示复制代码按钮
+    const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
+<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(/<\/textarea>/g, '&lt;/textarea>')}</textarea>`
+    if (lang && hl.getLanguage(lang)) {
+      const langHtml = `<span class="lang-name">${lang}</span>`
+      // 处理代码高亮
+      const preCode = hl.highlight(lang, str, true).value
+      // 将代码包裹在 pre 中
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
+    }
+
+    // 处理代码高亮
+    const preCode = md.utils.escapeHtml(str)
+    // 将代码包裹在 pre 中
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
+  }
+});
+
 const onLoad = () => {
  httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
    // 加载状态结束
    finished.value = true;
    const data = res.data
    if (data && data.length > 0) {
-      const md = require('markdown-it')({breaks: true});
      for (let i = 0; i < data.length; i++) {
        if (data[i].type === "prompt") {
          chatData.value.push(data[i]);
          continue;
-        } else if (data[i].type === "mj") {
-          data[i].content = JSON.parse(data[i].content)
-          data[i].content.html = md.render(data[i].content?.content)
-          chatData.value.push(data[i]);
-          continue;
        }

        data[i].orgContent = data[i].content;
-        data[i].content = md.render(data[i].content);
+        data[i].content = md.render(processContent(data[i].content))
        chatData.value.push(data[i]);
      }

@@ -265,47 +286,15 @@ const connect = function (chat_id, role_id) {
            icon: role.icon,
            content: ""
          });
-        } else if (data.type === "mj") {
-          disableInput(true)
-          const content = data.content;
-          const md = require('markdown-it')({breaks: true});
-          content.html = md.render(content.content)
-          let key = content.key
-          // fixed bug: 执行 Upscale 和 Variation 操作的时候覆盖之前的绘画
-          if (content.status === "Finished") {
-            key = randString(32)
-            enableInput()
-          }
-          // console.log(content)
-          // check if the message is in chatData
-          let flag = false
-          for (let i = 0; i < chatData.value.length; i++) {
-            if (chatData.value[i].id === content.key) {
-              flag = true
-              chatData.value[i].content = content
-              chatData.value[i].id = key
-              break
-            }
-          }
-          if (flag === false) {
-            chatData.value.push({
-              type: "mj",
-              id: key,
-              icon: "/images/avatar/mid_journey.png",
-              content: content
-            });
-          }
-
        } else if (data.type === 'end') { // 消息接收完毕
          enableInput()
          lineBuffer.value = ''; // 清空缓冲

        } else {
          lineBuffer.value += data.content;
-          const md = require('markdown-it')({breaks: true});
          const reply = chatData.value[chatData.value.length - 1]
          reply['orgContent'] = lineBuffer.value;
-          reply['content'] = md.render(lineBuffer.value);
+          reply['content'] = md.render(processContent(lineBuffer.value));

          nextTick(() => {
            hl.configure({ignoreUnescapedHTML: true})
@@ -414,9 +403,17 @@ const shareOptions = [
  {name: '微信', icon: 'wechat'},
  {name: '复制链接', icon: 'link'},
 ]
-const shareChat = () => {
+const shareChat = (option) => {
  showShare.value = false
-  showToast('功能待开发')
+  if (option.icon === "wechat") {
+    showToast({message: "当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友", duration: 5000})
+    router.push({
+      path: "/mobile/chat/export",
+      query: {title: title, chat_id: chatId, role: role.name, model: modelValue}
+    })
+  } else if (option.icon === "link") {
+    document.getElementById('copy-link-btn').click();
+  }
 }

 const inputVoice = () => {