From 88e43c17633387f47ce6364342a29855da56c917 Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Thu, 9 Apr 2026 15:35:23 +0800
Subject: [PATCH] =?UTF-8?q?chore(ui):=20=E6=8F=90=E4=BA=A4=E5=85=B6?=
 =?UTF-8?q?=E4=BD=99=E7=95=8C=E9=9D=A2=E6=94=B9=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/ChatHeader.vue            |  2 +-
 src/components/chat/ChatMain.vue              |  4 +-
 src/components/chat/MessageList.vue           | 54 +++++++------------
 src/components/chat/WelcomeScreen.vue         |  6 +--
 src/components/input/ChatInput.vue            |  2 +-
 src/components/input/UploadActionCards.vue    |  2 +-
 src/components/message/CodeBlock.vue          |  4 +-
 src/components/message/MessageActions.vue     |  2 +-
 src/components/message/MessageBubble.vue      | 26 ++++-----
 .../message/components/ThinkingNode.vue       |  7 +--
 src/components/modals/SettingsModal.vue       |  4 +-
 src/components/modals/ShareModal.vue          |  4 +-
 src/components/modals/ShareResultModal.vue    |  8 +--
 src/components/modals/ShortcutsModal.vue      |  2 +-
 src/components/sidebar/ChatSidebar.vue        |  2 +-
 src/components/sidebar/ConversationItem.vue   | 11 ++++
 src/components/sidebar/ShareButton.vue        |  4 +-
 src/styles/main.scss                          |  2 +-
 src/views/ShareView.vue                       |  6 +--
 19 files changed, 72 insertions(+), 80 deletions(-)

diff --git a/src/components/chat/ChatHeader.vue b/src/components/chat/ChatHeader.vue
index 5fb2f22..2f8f3f3 100644
--- a/src/components/chat/ChatHeader.vue
+++ b/src/components/chat/ChatHeader.vue
@@ -263,7 +263,7 @@ if (typeof window !== "undefined") {
 }
 
 .learning-mode-label {
-  font-size: 13px;
+  font-size: 14px;
   color: #6b7280;
   user-select: none;
   white-space: nowrap;
diff --git a/src/components/chat/ChatMain.vue b/src/components/chat/ChatMain.vue
index dfce3ae..970bd3b 100644
--- a/src/components/chat/ChatMain.vue
+++ b/src/components/chat/ChatMain.vue
@@ -516,6 +516,7 @@ watch(
 .chat-main {
   display: flex;
   flex-direction: column;
+  min-width: 900px;
   flex: 1;
   height: 100vh;
   background: #ffffff;
@@ -545,8 +546,7 @@ watch(
 }
 
 .input-container {
-  margin: auto;
-  width: 55%;
+  margin: 0 22%;
  // min-width: 1000px;
   // margin: 0 auto;
   transition: max-width 0.3s ease;
diff --git a/src/components/chat/MessageList.vue b/src/components/chat/MessageList.vue
index f1e5988..c4fc17e 100644
--- a/src/components/chat/MessageList.vue
+++ b/src/components/chat/MessageList.vue
@@ -13,11 +13,7 @@
           <button class="action-btn cancel" @click="handleCancelSelect">
             取消
           </button>
-          <button
-            class="action-btn confirm"
-            :disabled="selectedMessageCount === 0"
-            @click="handleConfirmShare"
-          >
+          <button class="action-btn confirm" :disabled="selectedMessageCount === 0" @click="handleConfirmShare">
             确认分享
           </button>
         </div>
@@ -26,36 +22,21 @@
 
     <div ref="containerRef" class="message-list" @scroll="handleScroll">
       <!-- 欢迎界面 -->
-      <WelcomeScreen
-        v-if="visibleMessages.length === 0"
-        @select="$emit('select-suggestion', $event)"
-      />
+      <WelcomeScreen v-if="visibleMessages.length === 0" @select="$emit('select-suggestion', $event)" />
 
       <!-- 消息列表 -->
       <template v-else>
         <div class="messages-wrapper">
           <TransitionGroup name="message">
-            <MessageBubble
-              v-for="(message, index) in visibleMessages"
-              :key="message.id"
-              :message="message"
-              :show-timestamp="showTimestamp"
-              :compact="compact"
-              :is-New="index === visibleMessages.length - 1"
-              :is-message-select-mode="isMessageSelectMode"
-              :is-selected="isMessageSelected(message.id)"
-              @retry="$emit('retry', message.id)"
-              @regenerate="$emit('regenerate', message.id)"
-              @copy="handleCopy(message)"
-              @like="handleLike(message)"
-              @dislike="handleDislike(message)"
-              @select-suggestion="$emit('select-suggestion', $event)"
-              @preview-image="handlePreviewImage"
-              @play-video="handlePlayVideo"
-              @download-file="handleDownloadFile"
+            <MessageBubble v-for="(message, index) in visibleMessages" :key="message.id" :message="message"
+              :show-timestamp="showTimestamp" :compact="compact" :is-New="index === visibleMessages.length - 1"
+              :is-message-select-mode="isMessageSelectMode" :is-selected="isMessageSelected(message.id)"
+              @retry="$emit('retry', message.id)" @regenerate="$emit('regenerate', message.id)"
+              @copy="handleCopy(message)" @like="handleLike(message)" @dislike="handleDislike(message)"
+              @select-suggestion="$emit('select-suggestion', $event)" @preview-image="handlePreviewImage"
+              @play-video="handlePlayVideo" @download-file="handleDownloadFile"
               @toggle-select="handleToggleMessageSelect(message.id)"
-              @enter-select-mode="handleEnterSelectMode(message.id)"
-            />
+              @enter-select-mode="handleEnterSelectMode(message.id)" />
           </TransitionGroup>
 
           <!-- 正在输入指示器 -->
@@ -75,11 +56,7 @@
     </div>
     <!-- 回到底部按钮 -->
     <Transition name="fade">
-      <button
-        v-if="showScrollButton"
-        class="scroll-bottom-btn"
-        @click="handleScrollToBottom"
-      >
+      <button v-if="showScrollButton" class="scroll-bottom-btn" @click="handleScrollToBottom">
         <ChevronDown :size="20" />
         <span v-if="newMessageCount > 0" class="new-count">
           {{ newMessageCount }}
@@ -301,6 +278,7 @@ onMounted(() => {
 .message-list-container {
   flex: 1;
   position: relative;
+    min-width: 900px;
   min-height: 0;
 }
 
@@ -359,6 +337,7 @@ onMounted(() => {
     &:nth-child(1) {
       animation-delay: -0.32s;
     }
+
     &:nth-child(2) {
       animation-delay: -0.16s;
     }
@@ -366,7 +345,7 @@ onMounted(() => {
 }
 
 .typing-text {
-  font-size: 13px;
+  font-size: 14px;
   color: #9ca3af;
 }
 
@@ -451,6 +430,7 @@ onMounted(() => {
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -458,12 +438,14 @@ onMounted(() => {
 }
 
 @keyframes typingBounce {
+
   0%,
   80%,
   100% {
     transform: scale(0.7);
     opacity: 0.5;
   }
+
   40% {
     transform: scale(1);
     opacity: 1;
@@ -512,7 +494,7 @@ onMounted(() => {
   padding: 8px 16px;
   border: none;
   border-radius: 8px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
diff --git a/src/components/chat/WelcomeScreen.vue b/src/components/chat/WelcomeScreen.vue
index 61c624c..61a0eb3 100644
--- a/src/components/chat/WelcomeScreen.vue
+++ b/src/components/chat/WelcomeScreen.vue
@@ -272,7 +272,7 @@ const suggestions = computed(() => {
 
   p {
     margin: 0;
-    font-size: 13px;
+    font-size: 14px;
     color: #6b7280;
     line-height: 1.5;
 
@@ -330,12 +330,10 @@ const suggestions = computed(() => {
   }
 // TODO: 悬浮边框和背景颜色
   &:hover {
-    border-color: #3b82f6;
     background: rgba(59, 130, 246, 0.05);
 
     .arrow-icon {
       transform: translateX(4px);
-      color: #3b82f6;
     }
   }
 
@@ -367,7 +365,7 @@ const suggestions = computed(() => {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: 14px;
   color: #9ca3af;
 
   kbd {
diff --git a/src/components/input/ChatInput.vue b/src/components/input/ChatInput.vue
index 2bc9446..20fd88d 100644
--- a/src/components/input/ChatInput.vue
+++ b/src/components/input/ChatInput.vue
@@ -667,7 +667,7 @@ onMounted(() => {
   background: var(---FFFFFF, #FFF);
   border: 1px solid transparent;
   color: var(--6-666666, #666);
-  font-size: 13px;
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 
diff --git a/src/components/input/UploadActionCards.vue b/src/components/input/UploadActionCards.vue
index 25bce83..7aa1d6e 100644
--- a/src/components/input/UploadActionCards.vue
+++ b/src/components/input/UploadActionCards.vue
@@ -153,7 +153,7 @@ function handleClick(action: UploadAction) {
 }
 
 .card-title {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
   line-height: 1.1;
 }
diff --git a/src/components/message/CodeBlock.vue b/src/components/message/CodeBlock.vue
index d18b812..8f3635b 100644
--- a/src/components/message/CodeBlock.vue
+++ b/src/components/message/CodeBlock.vue
@@ -120,7 +120,7 @@ function toggleExpand() {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: #a6adc8;
 
@@ -170,7 +170,7 @@ function toggleExpand() {
 
     code {
       font-family: "JetBrains Mono", "Fira Code", "Monaco", monospace;
-      font-size: 13px;
+      font-size: 14px;
       line-height: 1.6;
       color: #cdd6f4;
       tab-size: 2;
diff --git a/src/components/message/MessageActions.vue b/src/components/message/MessageActions.vue
index 805cd3f..a440ab0 100644
--- a/src/components/message/MessageActions.vue
+++ b/src/components/message/MessageActions.vue
@@ -276,7 +276,7 @@ if (typeof window !== "undefined") {
   border-radius: 8px;
   background: transparent;
   color: #374151;
-  font-size: 13px;
+  font-size: 14px;
   text-align: left;
   cursor: pointer;
   transition: all 0.15s ease;
diff --git a/src/components/message/MessageBubble.vue b/src/components/message/MessageBubble.vue
index 473c171..d51b199 100644
--- a/src/components/message/MessageBubble.vue
+++ b/src/components/message/MessageBubble.vue
@@ -361,17 +361,17 @@ setCustomComponents("playground-demo", {
     .message-body {
       position: relative;
 
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 12px;
-        right: 12px;
-        width: 8px;
-        height: 8px;
-        background: #3b82f6;
-        border-radius: 50%;
-        animation: pulse 1.5s infinite;
-      }
+      // &::after {
+      //   content: "";
+      //   position: absolute;
+      //   bottom: 12px;
+      //   right: 12px;
+      //   width: 8px;
+      //   height: 8px;
+      //   background: #3b82f6;
+      //   border-radius: 50%;
+      //   animation: pulse 1.5s infinite;
+      // }
     }
   }
 }
@@ -573,7 +573,7 @@ setCustomComponents("playground-demo", {
     border-radius: 6px;
     background: #ef4444;
     color: white;
-    font-size: 13px;
+    font-size: 14px;
     cursor: pointer;
     transition: background 0.2s ease;
 
@@ -599,7 +599,7 @@ setCustomComponents("playground-demo", {
   border-radius: 20px;
   background: white;
   color: #374151;
-  font-size: 13px;
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 
diff --git a/src/components/message/components/ThinkingNode.vue b/src/components/message/components/ThinkingNode.vue
index 2cddaa1..1c96a27 100644
--- a/src/components/message/components/ThinkingNode.vue
+++ b/src/components/message/components/ThinkingNode.vue
@@ -64,7 +64,7 @@ async function textCopy(data: any) {
       </div> -->
       <div class="thinking-title">
         <!-- TODO: 深度思考样式 -->
-        <span class="text-lg"> 深度思考</span>
+        <span > 深度思考</span>
         <!-- 加载动画 -->
         <span v-if="node.loading" class="thinking-dots visible" aria-hidden="true">
           <span class="dot dot-1" />
@@ -86,7 +86,7 @@ async function textCopy(data: any) {
 
     <!-- 可折叠的内容区域 -->
     <div class="thinking-content" :class="{ collapsed }">
-      <div class="mt-3 text-sm leading-relaxed dark:text-slate-100">
+      <div class="mt-3 text-[13px] leading-relaxed dark:text-slate-100">
         <MarkdownRender :content="node.content" @copy="textCopy" />
       </div>
     </div>
@@ -108,6 +108,7 @@ async function textCopy(data: any) {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0 0 15px 0;
   border-bottom: 1px solid #e2e8f0;
   gap: 12px;
   cursor: pointer;
@@ -159,7 +160,7 @@ line-height: 21px;
 .thinking-content {
   color: var(--9-999999, #999);
   font-family: "Microsoft YaHei";
-  font-size: 13px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
diff --git a/src/components/modals/SettingsModal.vue b/src/components/modals/SettingsModal.vue
index 217c29d..3d71673 100644
--- a/src/components/modals/SettingsModal.vue
+++ b/src/components/modals/SettingsModal.vue
@@ -746,7 +746,7 @@ function handleClearData() {
   border-radius: 10px;
   background: white;
   color: #6b7280;
-  font-size: 13px;
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 
@@ -786,7 +786,7 @@ function handleClearData() {
   border-radius: 8px;
   background: transparent;
   color: #6b7280;
-  font-size: 13px;
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 
diff --git a/src/components/modals/ShareModal.vue b/src/components/modals/ShareModal.vue
index 3e628a5..bdb0463 100644
--- a/src/components/modals/ShareModal.vue
+++ b/src/components/modals/ShareModal.vue
@@ -354,7 +354,7 @@ watch(show, (newVal: boolean) => {
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 13px;
+    font-size: 14px;
     color: #4b5563;
 
     .dark & {
@@ -495,7 +495,7 @@ watch(show, (newVal: boolean) => {
   padding: 12px;
   background: rgba(59, 130, 246, 0.05);
   border-radius: 10px;
-  font-size: 13px;
+  font-size: 14px;
   color: #3b82f6;
 
   .dark & {
diff --git a/src/components/modals/ShareResultModal.vue b/src/components/modals/ShareResultModal.vue
index 228c750..448d62a 100644
--- a/src/components/modals/ShareResultModal.vue
+++ b/src/components/modals/ShareResultModal.vue
@@ -262,7 +262,7 @@ watch(show, (newVal: boolean) => {
 .share-section {
   .share-label {
     display: block;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 500;
     color: #374151;
     margin-bottom: 8px;
@@ -282,7 +282,7 @@ watch(show, (newVal: boolean) => {
     padding: 12px 14px;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
-    font-size: 13px;
+    font-size: 14px;
     color: #1f2937;
     background: #f9fafb;
 
@@ -307,7 +307,7 @@ watch(show, (newVal: boolean) => {
     border-radius: 10px;
     background: #f3f4f6;
     color: #374151;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -336,7 +336,7 @@ watch(show, (newVal: boolean) => {
   padding: 12px;
   background: rgba(245, 158, 11, 0.1);
   border-radius: 10px;
-  font-size: 13px;
+  font-size: 14px;
   color: #f59e0b;
 }
 
diff --git a/src/components/modals/ShortcutsModal.vue b/src/components/modals/ShortcutsModal.vue
index 14d182e..5004ebb 100644
--- a/src/components/modals/ShortcutsModal.vue
+++ b/src/components/modals/ShortcutsModal.vue
@@ -264,7 +264,7 @@ function close() {
 }
 
 .tip {
-  font-size: 13px;
+  font-size: 14px;
   color: #9ca3af;
 
   kbd {
diff --git a/src/components/sidebar/ChatSidebar.vue b/src/components/sidebar/ChatSidebar.vue
index 5fc5be0..3aa9c45 100644
--- a/src/components/sidebar/ChatSidebar.vue
+++ b/src/components/sidebar/ChatSidebar.vue
@@ -583,7 +583,7 @@ onBeforeUnmount(() => {
 
 .search-placeholder {
   flex: 1;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .search-kbd {
diff --git a/src/components/sidebar/ConversationItem.vue b/src/components/sidebar/ConversationItem.vue
index cfeffe6..8773281 100644
--- a/src/components/sidebar/ConversationItem.vue
+++ b/src/components/sidebar/ConversationItem.vue
@@ -210,11 +210,22 @@ function handleDelete() {
     .item-title {
       font-weight: 700;
     }
+  }
 
+  &.active:hover {
     .item-actions {
       opacity: 1;
       pointer-events: auto;
     }
+
+    .pin-indicator {
+      opacity: 0;
+    }
+
+    .item-content {
+      flex: 0 1 clamp(72px, 28%, 96px);
+      max-width: clamp(72px, 28%, 96px);
+    }
   }
 }
 
diff --git a/src/components/sidebar/ShareButton.vue b/src/components/sidebar/ShareButton.vue
index 0c56b28..f683015 100644
--- a/src/components/sidebar/ShareButton.vue
+++ b/src/components/sidebar/ShareButton.vue
@@ -74,7 +74,7 @@ function handleShareCurrent() {
 }
 
 .select-info {
-  font-size: 13px;
+  font-size: 14px;
   color: #6b7280;
   text-align: center;
 
@@ -92,7 +92,7 @@ function handleShareCurrent() {
   flex: 1;
   padding: 8px 12px;
   border-radius: 10px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0412bfa..7f7dad0 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -39,7 +39,7 @@
   --header-height: 60px;
   --app-text-color: #333;
   --app-font-family: "Microsoft YaHei", sans-serif;
-  --app-font-size: 12px;
+  --app-font-size: 14px;
   --app-font-style: normal;
   --app-font-weight: 400;
   --app-line-height: normal;
diff --git a/src/views/ShareView.vue b/src/views/ShareView.vue
index 43ae317..bf951c3 100644
--- a/src/views/ShareView.vue
+++ b/src/views/ShareView.vue
@@ -347,7 +347,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 13px;
+    font-size: 14px;
     color: #6b7280;
 
     &.expired {
@@ -411,7 +411,7 @@ onMounted(() => {
 }
 
 .verify-error {
-  font-size: 13px;
+  font-size: 14px;
   color: #ef4444;
   margin: 0;
 }
@@ -482,7 +482,7 @@ onMounted(() => {
 }
 
 .conversation-count {
-  font-size: 13px;
+  font-size: 14px;
   color: #6b7280;
 }