style: 优化移动端代码展示 (#1752)

src/views/chat/components/Header/index.vue

@@ -9,7 +9,7 @@ interface Props {
 
 interface Emit {
   (ev: 'export'): void
-  (ev: 'toggleUsingContext'): void
+  (ev: 'handleClear'): void
 }
 
 defineProps<Props>()
@@ -36,8 +36,8 @@ function handleExport() {
   emit('export')
 }
 
-function toggleUsingContext() {
+function handleClear() {
-  emit('toggleUsingContext')
+  emit('handleClear')
 }
 </script>
 
@@ -62,16 +62,16 @@ function toggleUsingContext() {
         {{ currentChatHistory?.title ?? '' }}
       </h1>
       <div class="flex items-center space-x-2">
-        <HoverButton @click="toggleUsingContext">
-          <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
-            <SvgIcon icon="ri:chat-history-line" />
-          </span>
-        </HoverButton>
         <HoverButton @click="handleExport">
           <span class="text-xl text-[#4f555e] dark:text-white">
             <SvgIcon icon="ri:download-2-line" />
           </span>
         </HoverButton>
+        <HoverButton @click="handleClear">
+          <span class="text-xl text-[#4f555e] dark:text-white">
+            <SvgIcon icon="ri:delete-bin-line" />
+          </span>
+        </HoverButton>
       </div>
     </div>
   </header>

src/views/chat/components/Message/style.less

@@ -73,3 +73,12 @@ html.dark {
 		background-color: #282c34;
 	}
 }
+
+@media screen and (max-width: 533px) {
+	.markdown-body .code-block-wrapper {
+		padding: unset;
+		code {
+			padding: 24px 16px 16px 16px;
+		}
+	}
+}

src/views/chat/index.vue

@@ -469,7 +469,7 @@ onUnmounted(() => {
       v-if="isMobile"
       :using-context="usingContext"
       @export="handleExport"
-      @toggle-using-context="toggleUsingContext"
+      @handle-clear="handleClear"
     />
     <main class="flex-1 overflow-hidden">
       <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
@@ -513,7 +513,7 @@ onUnmounted(() => {
     <footer :class="footerClass">
       <div class="w-full max-w-screen-xl m-auto">
         <div class="flex items-center justify-between space-x-2">
-          <HoverButton @click="handleClear">
+          <HoverButton v-if="!isMobile" @click="handleClear">
             <span class="text-xl text-[#4f555e] dark:text-white">
               <SvgIcon icon="ri:delete-bin-line" />
             </span>
@@ -523,7 +523,7 @@ onUnmounted(() => {
               <SvgIcon icon="ri:download-2-line" />
             </span>
           </HoverButton>
-          <HoverButton v-if="!isMobile" @click="toggleUsingContext">
+          <HoverButton @click="toggleUsingContext">
             <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
               <SvgIcon icon="ri:chat-history-line" />
             </span>