From 375a7bd16e8558b220a7156095bb27a576c7146f Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Fri, 10 Apr 2026 10:00:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E4=BC=9A?=
 =?UTF-8?q?=E8=AF=9D=E6=93=8D=E4=BD=9C=E5=9B=BE=E6=A0=87=E5=B9=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=B5=81=E5=BC=8F=E5=8A=A0=E8=BD=BD=E6=8C=87=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/icons/custom/DeleteIcon.vue    |  8 ++--
 src/components/icons/custom/EditIcon.vue      |  6 +--
 src/components/icons/custom/PinActionIcon.vue | 26 +++++++++++
 .../icons/custom/PinOffActionIcon.vue         | 27 ++++++++++++
 src/components/icons/custom/ShareIcon.vue     | 19 +++-----
 src/components/message/MessageBubble.vue      | 44 +++++++++++++++----
 src/components/sidebar/ConversationItem.vue   | 31 +++++++++----
 src/styles/main.scss                          |  4 ++
 8 files changed, 128 insertions(+), 37 deletions(-)
 create mode 100644 src/components/icons/custom/PinActionIcon.vue
 create mode 100644 src/components/icons/custom/PinOffActionIcon.vue

diff --git a/src/components/icons/custom/DeleteIcon.vue b/src/components/icons/custom/DeleteIcon.vue
index 96637ab..eaa6fab 100644
--- a/src/components/icons/custom/DeleteIcon.vue
+++ b/src/components/icons/custom/DeleteIcon.vue
@@ -1,8 +1,8 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
-  <path d="M0.5 2.9H2.9M13.3 2.9H10.9M10.9 2.9V2.5C10.9 1.39543 10.0046 0.5 8.9 0.5H4.9C3.79543 0.5 2.9 1.39543 2.9 2.5V2.9M10.9 2.9H2.9" stroke="#666666" stroke-linecap="round"/>
-  <path d="M2.09985 5.3V12.1C2.09985 13.2046 2.99528 14.1 4.09985 14.1H9.69986C10.8044 14.1 11.6999 13.2046 11.6999 12.1V5.3M5.29985 6.1V12.5M8.49985 6.1V12.5" stroke="#666666" stroke-linecap="round"/>
-</svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M1.6001 3.19999H4.0001M14.4001 3.19999H12.0001M12.0001 3.19999V2.79999C12.0001 1.69542 11.1047 0.799988 10.0001 0.799988H6.0001C4.89553 0.799988 4.0001 1.69542 4.0001 2.79999V3.19999M12.0001 3.19999H4.0001" stroke="currentColor" stroke-linecap="round" />
+    <path d="M3.19995 5.59998V12.4C3.19995 13.5045 4.09538 14.4 5.19995 14.4H10.8C11.9045 14.4 12.8 13.5045 12.8 12.4V5.59998M6.39995 6.39998V12.8M9.59995 6.39998V12.8" stroke="currentColor" stroke-linecap="round" />
+  </svg>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/icons/custom/EditIcon.vue b/src/components/icons/custom/EditIcon.vue
index 0d1b17e..ec2a43a 100644
--- a/src/components/icons/custom/EditIcon.vue
+++ b/src/components/icons/custom/EditIcon.vue
@@ -1,8 +1,8 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M11.7854 6.40508L3.71021 14.4783H1.51099V12.2791L9.58423 4.2039L11.7854 6.40508ZM12.3801 1.52031C12.4497 1.52042 12.5204 1.54921 12.5735 1.60234L14.387 3.41484C14.4383 3.46622 14.467 3.53595 14.467 3.6082C14.467 3.66395 14.4509 3.71702 14.4211 3.76152L14.387 3.80254L13.3225 4.86699L11.1213 2.66582L12.1858 1.60234L12.1887 1.60039C12.2399 1.5487 12.3071 1.52031 12.3801 1.52031Z" stroke="#666666" stroke-linejoin="round"/>
-  <path d="M6 14.5H14.5" stroke="#666666" stroke-linecap="round"/>
-</svg>
+    <path d="M11.7854 6.40509L3.71021 14.4783H1.51099V12.2791L9.58423 4.20392L11.7854 6.40509ZM12.3801 1.52032C12.4497 1.52043 12.5204 1.54923 12.5735 1.60236L14.387 3.41486C14.4383 3.46624 14.467 3.53597 14.467 3.60822C14.467 3.66397 14.4509 3.71704 14.4211 3.76154L14.387 3.80255L13.3225 4.867L11.1213 2.66583L12.1858 1.60236L12.1887 1.6004C12.2399 1.54872 12.3071 1.52032 12.3801 1.52032Z" stroke="currentColor" stroke-linejoin="round" />
+    <path d="M6 14.5H14.5" stroke="currentColor" stroke-linecap="round" />
+  </svg>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/icons/custom/PinActionIcon.vue b/src/components/icons/custom/PinActionIcon.vue
new file mode 100644
index 0000000..6d32d1a
--- /dev/null
+++ b/src/components/icons/custom/PinActionIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <path
+      d="M5.43994 0.5H5.44189L7.99268 0.507812H8.0083L10.5581 0.5H10.5601C10.6453 0.500024 10.7177 0.541283 10.7603 0.600586L10.7925 0.666016C10.8015 0.697293 10.8004 0.716064 10.7954 0.732422C10.7899 0.750047 10.767 0.804834 10.6704 0.886719L10.6411 0.914062L10.0366 1.51758C9.84509 1.70911 9.74857 1.9731 9.76904 2.23926L9.77002 2.24121L10.0864 6.15332V6.1543C10.1201 6.56503 10.2691 6.95616 10.5151 7.28418L10.6265 7.4209L11.5933 8.5127C11.6397 8.56497 11.6702 8.62659 11.6841 8.68945L11.6929 8.75293C11.6937 8.78175 11.6899 8.8027 11.686 8.81641C11.6827 8.82804 11.6786 8.83521 11.6733 8.8418C11.6651 8.85078 11.647 8.8623 11.6216 8.8623H11.6206L8.87158 8.84277H7.12842L4.37939 8.8623H4.37842C4.34895 8.8623 4.33235 8.84936 4.32764 8.84375L4.32666 8.84277C4.32122 8.83606 4.31665 8.82825 4.31299 8.81543C4.30892 8.80101 4.30578 8.77903 4.30615 8.74902C4.30865 8.66986 4.34102 8.58452 4.40479 8.5127H4.40576L5.37256 7.4209C5.68385 7.06918 5.8747 6.62516 5.91162 6.15332L6.229 2.24121V2.23926C6.24675 2.00853 6.1773 1.77409 6.02783 1.58984L5.95947 1.51465L5.34521 0.900391L5.32959 0.886719L5.27002 0.831055C5.22258 0.780136 5.2087 0.745665 5.20459 0.732422C5.19958 0.716074 5.19847 0.697262 5.20752 0.666016C5.23456 0.573903 5.32611 0.500071 5.43994 0.5Z"
+      stroke="currentColor"
+    />
+    <path d="M8 9V15.5" stroke="currentColor" stroke-linecap="round" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number;
+  }>(),
+  {
+    size: 18,
+  },
+);
+</script>
diff --git a/src/components/icons/custom/PinOffActionIcon.vue b/src/components/icons/custom/PinOffActionIcon.vue
new file mode 100644
index 0000000..074a398
--- /dev/null
+++ b/src/components/icons/custom/PinOffActionIcon.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <path
+      d="M5.43994 0.5H5.44189L7.99268 0.507812H8.0083L10.5581 0.5H10.5601C10.6453 0.500024 10.7177 0.541283 10.7603 0.600586L10.7925 0.666016C10.8015 0.697293 10.8004 0.716064 10.7954 0.732422C10.7899 0.750047 10.767 0.804834 10.6704 0.886719L10.6411 0.914062L10.0366 1.51758C9.84509 1.70911 9.74857 1.9731 9.76904 2.23926L9.77002 2.24121L10.0864 6.15332V6.1543C10.1201 6.56503 10.2691 6.95616 10.5151 7.28418L10.6265 7.4209L11.5933 8.5127C11.6397 8.56497 11.6702 8.62659 11.6841 8.68945L11.6929 8.75293C11.6937 8.78175 11.6899 8.8027 11.686 8.81641C11.6827 8.82804 11.6786 8.83521 11.6733 8.8418C11.6651 8.85078 11.647 8.8623 11.6216 8.8623H11.6206L8.87158 8.84277H7.12842L4.37939 8.8623H4.37842C4.34895 8.8623 4.33235 8.84936 4.32764 8.84375L4.32666 8.84277C4.32122 8.83606 4.31665 8.82825 4.31299 8.81543C4.30892 8.80101 4.30578 8.77903 4.30615 8.74902C4.30865 8.66986 4.34102 8.58452 4.40479 8.5127H4.40576L5.37256 7.4209C5.68385 7.06918 5.8747 6.62516 5.91162 6.15332L6.229 2.24121V2.23926C6.24675 2.00853 6.1773 1.77409 6.02783 1.58984L5.95947 1.51465L5.34521 0.900391L5.32959 0.886719L5.27002 0.831055C5.22258 0.780136 5.2087 0.745665 5.20459 0.732422C5.19958 0.716074 5.19847 0.697262 5.20752 0.666016C5.23456 0.573903 5.32611 0.500071 5.43994 0.5Z"
+      stroke="currentColor"
+    />
+    <path d="M8 9V15.5" stroke="currentColor" stroke-linecap="round" />
+    <path d="M12 4L8 8L4 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number;
+  }>(),
+  {
+    size: 18,
+  },
+);
+</script>
diff --git a/src/components/icons/custom/ShareIcon.vue b/src/components/icons/custom/ShareIcon.vue
index 0e17c96..f0821c4 100644
--- a/src/components/icons/custom/ShareIcon.vue
+++ b/src/components/icons/custom/ShareIcon.vue
@@ -1,18 +1,11 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <g clip-path="url(#clip0_75_622)">
-    <circle cx="10.5" cy="2.5" r="2" stroke="#666666"/>
-    <circle cx="3.5" cy="7.5" r="2" stroke="#666666"/>
-    <path d="M8.79367 3.71881L5.19458 6.28959" stroke="#666666" stroke-linecap="round"/>
-    <path d="M5 9L9.5 12" stroke="#666666" stroke-linecap="round"/>
-    <circle cx="12" cy="13" r="2.5" stroke="#666666"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_75_622">
-      <rect width="16" height="16" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>
+    <circle cx="10.5" cy="2.5" r="2" stroke="currentColor" />
+    <circle cx="3.5" cy="7.5" r="2" stroke="currentColor" />
+    <path d="M8.79367 3.71881L5.19458 6.28959" stroke="currentColor" stroke-linecap="round" />
+    <path d="M5 9L9.5 12" stroke="currentColor" stroke-linecap="round" />
+    <circle cx="12" cy="13" r="2.5" stroke="currentColor" />
+  </svg>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/message/MessageBubble.vue b/src/components/message/MessageBubble.vue
index 18db9b3..38357c6 100644
--- a/src/components/message/MessageBubble.vue
+++ b/src/components/message/MessageBubble.vue
@@ -130,11 +130,13 @@
         </template>
 
         <!-- 加载动画 -->
-        <!-- <div v-if="message.isStreaming && !message.content.text" class="loading-dots">
-          <span></span>
-          <span></span>
-          <span></span>
-        </div> -->
+        <div
+          v-if="message.role === 'assistant' && message.isStreaming"
+          class="loading-spinner-row"
+          aria-label="模型正在生成中"
+        >
+          <span class="loading-spinner" aria-hidden="true"></span>
+        </div>
       </div>
 
       <!-- 操作栏 -->
@@ -451,11 +453,9 @@ setCustomComponents("playground-demo", {
 // markstream-vue 样式覆盖
 .text-content {
   :deep(p) {
-    margin: 0 0 12px;
+    margin: 0 0 16px;
+
 
-    &:last-child {
-      margin-bottom: 0;
-    }
   }
 
   :deep(ul),
@@ -834,6 +834,26 @@ display: flex;
   }
 }
 
+.loading-spinner-row {
+  display: flex;
+  align-items: center;
+  padding: 8px 0 0;
+}
+
+.loading-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(102, 102, 102, 0.25);
+  border-top-color: #666666;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+
+  .dark & {
+    border-color: rgba(255, 255, 255, 0.25);
+    border-top-color: #f3f4f6;
+  }
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -875,6 +895,12 @@ display: flex;
   }
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 // 消息选择复选框
 .message-checkbox {
   position: absolute;
diff --git a/src/components/sidebar/ConversationItem.vue b/src/components/sidebar/ConversationItem.vue
index 8773281..5358465 100644
--- a/src/components/sidebar/ConversationItem.vue
+++ b/src/components/sidebar/ConversationItem.vue
@@ -39,12 +39,11 @@
       <n-tooltip :style="{ borderRadius: '5px', padding: '7px 15px' }">
         <template #trigger>
           <button
-            class="action-btn"
+            class="action-btn pin-toggle-btn"
             @click="handleTogglePin"
           >
-            <!-- TODO: 取消置顶图标 -->
-            <PinOff v-if="conversation.pinned" :size="14" />
-            <PinIcon v-else :size="14" />
+            <PinOffActionIcon v-if="conversation.pinned" :size="14" />
+            <PinActionIcon v-else :size="14" />
           </button>
         </template>
         {{ conversation.pinned ? '取消置顶' : '置顶' }}
@@ -83,7 +82,6 @@
 <script setup lang="ts">
 import { ref, computed, nextTick } from "vue";
 import {
-  PinOff,
   Check,
 } from "@/components/icons";
 import { formatTimestamp } from "@/utils/helpers";
@@ -91,6 +89,8 @@ import type { Conversation } from "@/types/chat";
 import { NTooltip } from "naive-ui";
 import MessageIcon from "../icons/custom/MessageIcon.vue";
 import PinIcon from "../icons/custom/PinIcon.vue";
+import PinActionIcon from "../icons/custom/PinActionIcon.vue";
+import PinOffActionIcon from "../icons/custom/PinOffActionIcon.vue";
 import EditIcon from "../icons/custom/EditIcon.vue";
 import DeleteIcon from "../icons/custom/DeleteIcon.vue";
 import ShareIcon from "../icons/custom/ShareIcon.vue";
@@ -326,7 +326,7 @@ function handleDelete() {
 
   &:hover {
     background: rgba(0, 0, 0, 0.1);
-    color: #374151;
+    color: #000F33;
 
     .dark & {
       background: rgba(255, 255, 255, 0.1);
@@ -335,8 +335,23 @@ function handleDelete() {
   }
 
   &.delete:hover {
-    background: rgba(239, 68, 68, 0.1);
-    color: #ef4444;
+    color: #f86361;
+  }
+}
+
+.pin-toggle-btn {
+  color: #666666;
+
+  .dark & {
+    color: #666666;
+  }
+
+  &:hover {
+    color: #000f33;
+
+    .dark & {
+      color: #000f33;
+    }
   }
 }
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 7f7dad0..8962000 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -91,3 +91,7 @@ body,
   opacity: 0;
   transform: translateX(-20px);
 }
+
+hr.hr-node[custom-id="playground-demo"]{
+  margin: 1rem 0;
+}