From 61fc9d799def38aa4572769bde90490b13720faf Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 9 Sep 2025 20:03:22 +0800
Subject: [PATCH 1/2] feat(chat): improve markdown and editor

---
 frontend_nuxt/components/MessageEditor.vue |  7 ++++-
 frontend_nuxt/pages/message-box/[id].vue   | 32 ++++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend_nuxt/components/MessageEditor.vue b/frontend_nuxt/components/MessageEditor.vue
index bb04b45e7..815c7ee99 100644
--- a/frontend_nuxt/components/MessageEditor.vue
+++ b/frontend_nuxt/components/MessageEditor.vue
@@ -70,7 +70,6 @@ export default {
     onMounted(() => {
       vditorInstance.value = createVditor(editorId.value, {
         placeholder: '输入消息...',
-        height: 150,
         toolbar: [
           'emoji',
           'bold',
@@ -179,4 +178,10 @@ export default {
 .message-submit:not(.disabled):hover {
   background-color: var(--primary-color-hover);
 }
+
+.message-editor-container .vditor {
+  min-height: 80px;
+  max-height: 150px;
+  overflow-y: auto;
+}
 </style>
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index c6259d2f0..c662a7b6b 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -1,5 +1,11 @@
 <template>
   <div class="chat-container" :class="{ float: isFloatMode }">
+    <vue-easy-lightbox
+      :visible="lightboxVisible"
+      :index="lightboxIndex"
+      :imgs="lightboxImgs"
+      @hide="lightboxVisible = false"
+    />
     <div v-if="!loading" class="chat-header">
       <div class="header-main">
         <div class="back-button" @click="goBack">
@@ -14,7 +20,7 @@
       </div>
     </div>
 
-    <div class="messages-list" ref="messagesListEl">
+    <div class="messages-list" ref="messagesListEl" @click="handleContentClick">
       <div v-if="loading" class="loading-container">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
@@ -101,7 +107,7 @@ import {
 import { useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
-import { renderMarkdown, stripMarkdownLength } from '~/utils/markdown'
+import { renderMarkdown, stripMarkdownLength, handleMarkdownClick } from '~/utils/markdown'
 import MessageEditor from '~/components/MessageEditor.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
 import { useWebSocket } from '~/composables/useWebSocket'
@@ -110,6 +116,7 @@ import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import VueEasyLightbox from 'vue-easy-lightbox'
 
 const config = useRuntimeConfig()
 const route = useRoute()
@@ -135,6 +142,9 @@ const isFloatMode = computed(() => route.query.float !== undefined)
 const floatRoute = useState('messageFloatRoute')
 const replyTo = ref(null)
 const newMessagesCount = ref(0)
+const lightboxVisible = ref(false)
+const lightboxIndex = ref(0)
+const lightboxImgs = ref([])
 
 const isUserNearBottom = ref(true)
 function updateNearBottom() {
@@ -451,6 +461,17 @@ function minimize() {
   navigateTo('/')
 }
 
+function handleContentClick(e) {
+  handleMarkdownClick(e)
+  if (e.target.tagName === 'IMG') {
+    const container = e.target.parentNode
+    const imgs = [...container.querySelectorAll('img')].map((i) => i.src)
+    lightboxImgs.value = imgs
+    lightboxIndex.value = imgs.indexOf(e.target.src)
+    lightboxVisible.value = true
+  }
+}
+
 function openUser(id) {
   if (isFloatMode.value) {
     // 先不处理...
@@ -682,6 +703,13 @@ function goBack() {
   opacity: 0.5;
 }
 
+.info-content-text img,
+.reply-content img {
+  max-width: 600px;
+  width: 100%;
+  cursor: pointer;
+}
+
 .reply-btn {
   cursor: pointer;
   padding: 4px;

From c296e2592718de3d15f76335e9e7efeb757d8f19 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 9 Sep 2025 21:02:59 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E8=81=8A=E5=A4=A9UI=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20#957?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/assets/global.css            | 10 +++++++-
 frontend_nuxt/components/MessageEditor.vue | 30 +++++-----------------
 frontend_nuxt/pages/message-box/[id].vue   |  7 -----
 3 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index 450fc2656..02b3e2fc3 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -239,8 +239,16 @@ body {
 }
 
 .info-content-text img {
-  max-width: 100%;
+  max-width: 400px;
+  max-height: 600px;
   height: auto;
+  cursor: pointer;
+  box-shadow: 4px 12px 48px 0 rgba(0, 0, 0, 0.11);
+  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.info-content-text img:hover {
+  box-shadow: 4px 12px 48px 0 rgba(0, 0, 0, 0.35);
 }
 
 .info-content-text table {
diff --git a/frontend_nuxt/components/MessageEditor.vue b/frontend_nuxt/components/MessageEditor.vue
index 815c7ee99..ae3fbc9b3 100644
--- a/frontend_nuxt/components/MessageEditor.vue
+++ b/frontend_nuxt/components/MessageEditor.vue
@@ -70,22 +70,6 @@ export default {
     onMounted(() => {
       vditorInstance.value = createVditor(editorId.value, {
         placeholder: '输入消息...',
-        toolbar: [
-          'emoji',
-          'bold',
-          'italic',
-          'strike',
-          'link',
-          '|',
-          'list',
-          '|',
-          'line',
-          'quote',
-          'code',
-          'inline-code',
-          '|',
-          'upload',
-        ],
         preview: {
           actions: [],
           markdown: { toc: false },
@@ -148,11 +132,17 @@ export default {
   border-radius: 8px;
 }
 
+.vditor {
+  min-height: 50px;
+  max-height: 150px;
+}
+
 .message-bottom-container {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   background-color: var(--bg-color-soft);
   border-top: 1px solid var(--border-color);
   border-bottom-left-radius: 8px;
@@ -178,10 +168,4 @@ export default {
 .message-submit:not(.disabled):hover {
   background-color: var(--primary-color-hover);
 }
-
-.message-editor-container .vditor {
-  min-height: 80px;
-  max-height: 150px;
-  overflow-y: auto;
-}
 </style>
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index c662a7b6b..39265b66a 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -703,13 +703,6 @@ function goBack() {
   opacity: 0.5;
 }
 
-.info-content-text img,
-.reply-content img {
-  max-width: 600px;
-  width: 100%;
-  cursor: pointer;
-}
-
 .reply-btn {
   cursor: pointer;
   padding: 4px;