From 8261415b4096ef3897e521e87e2abc6bb2133a30 Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Tue, 31 Mar 2026 17:35:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(input):=20=E5=B0=86=20ChatInput=20?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E6=94=B9=E4=B8=BA=20grid=20=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=8C=E4=BF=AE=E5=A4=8D=20textarea=20=E6=BA=A2?=
 =?UTF-8?q?=E5=87=BA=E6=BB=9A=E5=8A=A8=E6=8A=96=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/ChatInput.vue            |  58 ++-----
 src/components/message/MessageBubble.vue      | 155 +++++++-----------
 .../message/components/ThinkingNode.vue       |  70 ++++----
 src/components/ui/StackedCards.vue            | 116 +++++++------
 4 files changed, 176 insertions(+), 223 deletions(-)

diff --git a/src/components/input/ChatInput.vue b/src/components/input/ChatInput.vue
index 04b7c24..2bc9446 100644
--- a/src/components/input/ChatInput.vue
+++ b/src/components/input/ChatInput.vue
@@ -4,14 +4,7 @@
     <div class="input-area">
       <!-- 左侧功能按钮 -->
       <div class="input-actions left">
-        <button v-if="attachments.length === 0" type="button" class="action-btn upload" :style="{height: 'auto',width: 'auto',borderRadius: '0'}"
-          :class="{ disabled: !supports_files && !supports_vision }" :disabled="!supports_files && !supports_vision"
-          :title="supports_files || supports_vision ? '上传附件或图片' : '当前模型不支持上传'" @click="triggerUploadInput">
-          <div class="upload-action-div" :class="{ disabled: !supports_files && !supports_vision }">
-            <PlusIcon :size="13" />
-          </div>
-        </button>
-        <StackedCards v-else :cards="attachments" :supports-files="supports_files" :supports-vision="supports_vision"
+        <StackedCards :cards="attachments" :supports-files="supports_files" :supports-vision="supports_vision"
           @remove="removeAttachment" @add-upload="triggerUploadInput" />
 
         <!-- 隐藏的文件输入框 -->
@@ -68,8 +61,8 @@
         <button v-if="isStreaming" class="action-btn stop" title="停止生成" @click="$emit('stop')">
           <StopCircle :size="20" />
         </button>
-        <button v-else class="action-btn send" :class="{ active: canSend, loading: isProcessingAttachments }" :disabled="!canSend"
-          :title="isProcessingAttachments ? '附件处理中...' : '发送消息 (Ctrl+Enter)'" @click="handleSend">
+        <button v-else class="action-btn send" :class="{ active: canSend, loading: isProcessingAttachments }"
+          :disabled="!canSend" :title="isProcessingAttachments ? '附件处理中...' : '发送消息 (Ctrl+Enter)'" @click="handleSend">
           <Loader2 v-if="isProcessingAttachments" :size="20" class="animate-spin" />
           <SendIcon v-else :size="20" />
         </button>
@@ -94,7 +87,6 @@ import { chatApi } from "@/services/api";
 import { useAuthStore } from "@/stores/auth";
 import { useSettingsStore } from "@/stores/settings";
 import StackedCards from "@/components/ui/StackedCards.vue";
-import PlusIcon from "../icons/custom/PlusIcon.vue";
 import SendIcon from "../icons/custom/SendIcon.vue";
 
 interface AttachmentWithProgress extends Attachment {
@@ -202,7 +194,7 @@ function autoResize() {
   if (!textarea) return;
 
   textarea.style.height = "auto";
-  const maxHeight = isExpanded.value ? 400 : 160;
+  const maxHeight = isExpanded.value ? 400 : 116;
   // 增加1px是为了避免滚动条出现
   textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight) + 1}px`;
 }
@@ -498,17 +490,11 @@ onMounted(() => {
   // border: 2px solid #e2e8f0;
   height: 200px;
   border-radius: 20px;
-  display: flex;
-  flex-direction: column;
   padding: 20px;
-  justify-content: space-between;
-  overflow: hidden;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #1e1e2e;
-    border-color: #374151;
-  }
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: 12px;
+  border-color: #374151;
 
   // &.is-focused {
   //   border-color: #3b82f6;
@@ -527,6 +513,7 @@ onMounted(() => {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
+  min-height: 0;
   gap: 8px;
 }
 
@@ -624,11 +611,14 @@ onMounted(() => {
 .textarea-wrapper {
   flex: 1;
   min-width: 0;
+  min-height: 0;
 
   textarea {
     width: 100%;
     min-height: 25px;
-    max-height: 160px;
+    max-height: 100%;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
     padding: 8px 0;
     border: none;
     outline: none;
@@ -653,7 +643,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid #f3f4f6;
   // background: #fafbfc;
 
   .dark & {
@@ -714,27 +703,6 @@ onMounted(() => {
   }
 }
 
-.upload-action-div {
-  display: grid;
-  place-items: center;
-  border-radius: 0;
-  width: 50px;
-  height: 70px;
-  background-color: rgb(255, 255, 255);
-}
-
-.upload-action-div.disabled {
-  cursor: not-allowed;
-  opacity: 0.42;
-  background: #f3f4f6;
-  border: 1px dashed #cbd5e1;
-  filter: grayscale(1);
-}
-
-.upload-action-div.disabled :deep(svg) {
-  opacity: 0.5;
-}
-
 @keyframes pulse {
 
   0%,
diff --git a/src/components/message/MessageBubble.vue b/src/components/message/MessageBubble.vue
index 2738f1a..473c171 100644
--- a/src/components/message/MessageBubble.vue
+++ b/src/components/message/MessageBubble.vue
@@ -1,21 +1,15 @@
 <template>
-  <div
-    class="message-bubble"
-    :class="[
-      `role-${message.role}`,
-      {
-        'is-streaming': message.isStreaming,
-        'is-end': !message.isEnd && message.role !== 'user',
-        'is-error': message.isError,
-        compact: compact,
-        'message-select-mode': isMessageSelectMode,
-        'message-selected': isSelected,
-      },
-    ]"
-    @click="handleBubbleClick"
-    @mouseenter="isHovered = true"
-    @mouseleave="isHovered = false"
-  >
+  <div class="message-bubble" :class="[
+    `role-${message.role}`,
+    {
+      'is-streaming': message.isStreaming,
+      'is-end': !message.isEnd && message.role !== 'user',
+      'is-error': message.isError,
+      compact: compact,
+      'message-select-mode': isMessageSelectMode,
+      'message-selected': isSelected,
+    },
+  ]" @click="handleBubbleClick" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
     <!-- 消息选择模式复选框 -->
     <div v-if="isMessageSelectMode" class="message-checkbox" @click.stop="handleToggleSelect">
       <div class="checkbox" :class="{ checked: isSelected }">
@@ -24,12 +18,12 @@
     </div>
 
     <!-- 头像 -->
-    <div class="avatar">
+    <!-- <div class="avatar">
       <div class="avatar-inner" :class="message.role">
         <Bot v-if="message.role === 'assistant'" :size="20" />
         <User v-else :size="20" />
       </div>
-    </div>
+    </div> -->
 
     <!-- 消息内容区域 -->
     <div class="message-content-wrapper">
@@ -44,7 +38,7 @@
       </div> -->
 
       <!-- 消息主体 -->
-      <div class="message-body">
+      <div :class="message.role === 'assistant' ? 'message-body assistant' : 'message-body user'">
         <!-- 错误状态 -->
         <div v-if="message.isError" class="error-content">
           <AlertCircle :size="18" />
@@ -59,30 +53,17 @@
         <template v-else>
           <!-- 文本内容 - 使用 markstream-vue -->
           <div v-if="message.content.text" class="text-content markstream-vue">
-            <MarkdownRender
-              v-if="message.role !== 'user'"
-              :content="message.content.text"
-              :custom-html-tags="['think']"
-              custom-id="playground-demo"
-              :escape-html-tags="['question', 'answer']"
-              @copy="textCopy"
-            />
+            <MarkdownRender v-if="message.role !== 'user'" :content="message.content.text" :custom-html-tags="['think']"
+              custom-id="playground-demo" :escape-html-tags="['question', 'answer']" @copy="textCopy" />
             <div v-else style="white-space: pre-wrap">
               {{ message.content.text }}
             </div>
           </div>
 
           <!-- 推荐选项 -->
-          <div
-            v-if="message.content.suggestions?.length && isNew"
-            class="suggestions"
-          >
-            <button
-              v-for="suggestion in message.content.suggestions"
-              :key="suggestion.id"
-              class="suggestion-btn"
-              @click="$emit('select-suggestion', suggestion)"
-            >
+          <div v-if="message.content.suggestions?.length && isNew" class="suggestions">
+            <button v-for="suggestion in message.content.suggestions" :key="suggestion.id" class="suggestion-btn"
+              @click="$emit('select-suggestion', suggestion)">
               <Zap :size="14" />
               {{ suggestion.text }}
             </button>
@@ -90,12 +71,8 @@
 
           <!-- 图片展示 -->
           <div v-if="message.content.images?.length" class="images-grid">
-            <div
-              v-for="(image, index) in message.content.images"
-              :key="image.id"
-              class="image-item"
-              @click="$emit('preview-image', image, index)"
-            >
+            <div v-for="(image, index) in message.content.images" :key="image.id" class="image-item"
+              @click="$emit('preview-image', image, index)">
               <img :src="image.url" :alt="image.name" loading="lazy" />
               <div class="image-overlay">
                 <Maximize2 :size="18" />
@@ -105,25 +82,14 @@
 
           <!-- 单个视频 -->
           <div v-if="message.content.videos?.length === 1" class="single-video">
-            <video
-              :src="message.content.videos[0].url"
-              :poster="message.content.videos[0].poster"
-              controls
-              preload="metadata"
-            />
+            <video :src="message.content.videos[0].url" :poster="message.content.videos[0].poster" controls
+              preload="metadata" />
           </div>
 
           <!-- 多个视频 -->
-          <div
-            v-if="message.content.videos && message.content.videos.length > 1"
-            class="videos-grid"
-          >
-            <div
-              v-for="video in message.content.videos"
-              :key="video.id"
-              class="video-item"
-              @click="$emit('play-video', video)"
-            >
+          <div v-if="message.content.videos && message.content.videos.length > 1" class="videos-grid">
+            <div v-for="video in message.content.videos" :key="video.id" class="video-item"
+              @click="$emit('play-video', video)">
               <img :src="video.poster" :alt="video.title" />
               <div class="video-overlay">
                 <Play :size="32" />
@@ -136,11 +102,7 @@
 
           <!-- 附件列表 -->
           <div v-if="message.content.files?.length" class="files-list">
-            <div
-              v-for="file in message.content.files"
-              :key="file.id"
-              class="file-item"
-            >
+            <div v-for="file in message.content.files" :key="file.id" class="file-item">
               <div class="file-icon">
                 {{ getFileEmoji(file.mimeType) }}
               </div>
@@ -159,37 +121,23 @@
         </template>
 
         <!-- 加载动画 -->
-        <div
-          v-if="message.isStreaming && !message.content.text"
-          class="loading-dots"
-        >
+        <!-- <div v-if="message.isStreaming && !message.content.text" class="loading-dots">
           <span></span>
           <span></span>
           <span></span>
-        </div>
+        </div> -->
       </div>
 
       <!-- 操作栏 -->
-      <MessageActions
-        v-if="
-          message.role === 'assistant' &&
-          !message.isStreaming &&
-          !message.isError &&
-          !readonly &&
-          !isMessageSelectMode
-        "
-        :content="message.content.text || ''"
-        :feedback="message.feedback"
-        :show-regenerate="true"
-        :is-hovered="isHovered"
-        :is-new="isNew"
-        :is-break="message.isBreak"
-        @copy="handleCopy"
-        @like="handleLike"
-        @dislike="handleDislike"
-        @regenerate="$emit('regenerate')"
-        @share="handleShareClick"
-      />
+      <MessageActions v-if="
+        message.role === 'assistant' &&
+        !message.isStreaming &&
+        !message.isError &&
+        !readonly &&
+        !isMessageSelectMode
+      " :content="message.content.text || ''" :feedback="message.feedback" :show-regenerate="true"
+        :is-hovered="isHovered" :is-new="isNew" :is-break="message.isBreak" @copy="handleCopy" @like="handleLike"
+        @dislike="handleDislike" @regenerate="$emit('regenerate')" @share="handleShareClick" />
     </div>
   </div>
 </template>
@@ -310,7 +258,7 @@ setCustomComponents("playground-demo", {
 .message-bubble {
   display: flex;
   gap: 16px;
-  padding: 20px 10%;
+  padding: 20px 22%;
   animation: fadeIn 0.3s ease;
 
   // 消息选择模式
@@ -347,9 +295,9 @@ setCustomComponents("playground-demo", {
     }
 
     .message-body {
-      background: #f8fafc;
-      color: #1f2937;
-      border-radius: 20px 20px 4px 20px;
+      border-radius: 10px 2px 10px 10px;
+      background: #EEEFF0;
+
     }
 
     .text-content {
@@ -366,8 +314,10 @@ setCustomComponents("playground-demo", {
 
   &.role-assistant {
     .message-body {
-      background: #f8fafc;
-      border-radius: 20px 20px 20px 4px;
+      padding: 15px 20px;
+      gap: 15px;
+      border-radius: 2px 10px 10px 10px;
+      background: var(---F8F9FA, #F8F9FA);
 
       .dark & {
         background: #2d2d3d;
@@ -454,7 +404,6 @@ setCustomComponents("playground-demo", {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  max-width: 75%;
   min-width: 0;
 }
 
@@ -491,7 +440,7 @@ setCustomComponents("playground-demo", {
 
 // markstream-vue 样式覆盖
 .text-content {
-    :deep(p) {
+  :deep(p) {
     margin: 0 0 12px;
 
     &:last-child {
@@ -550,6 +499,7 @@ setCustomComponents("playground-demo", {
     }
 
     .dark & {
+
       th,
       td {
         border-color: #374151;
@@ -589,12 +539,15 @@ setCustomComponents("playground-demo", {
   :deep(h1) {
     font-size: 1.5em;
   }
+
   :deep(h2) {
     font-size: 1.3em;
   }
+
   :deep(h3) {
     font-size: 1.15em;
   }
+
   :deep(h4) {
     font-size: 1em;
   }
@@ -851,6 +804,7 @@ setCustomComponents("playground-demo", {
     &:nth-child(1) {
       animation-delay: -0.32s;
     }
+
     &:nth-child(2) {
       animation-delay: -0.16s;
     }
@@ -862,6 +816,7 @@ setCustomComponents("playground-demo", {
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -869,11 +824,13 @@ setCustomComponents("playground-demo", {
 }
 
 @keyframes pulse {
+
   0%,
   100% {
     opacity: 1;
     transform: scale(1);
   }
+
   50% {
     opacity: 0.5;
     transform: scale(0.8);
@@ -881,12 +838,14 @@ setCustomComponents("playground-demo", {
 }
 
 @keyframes pulseDot {
+
   0%,
   80%,
   100% {
     transform: scale(0.6);
     opacity: 0.5;
   }
+
   40% {
     transform: scale(1);
     opacity: 1;
diff --git a/src/components/message/components/ThinkingNode.vue b/src/components/message/components/ThinkingNode.vue
index 33ad9cf..2cddaa1 100644
--- a/src/components/message/components/ThinkingNode.vue
+++ b/src/components/message/components/ThinkingNode.vue
@@ -37,13 +37,11 @@ async function textCopy(data: any) {
 </script>
 
 <template>
-  <div
-    class="thinking-node p-4 my-4 bg-blue-50 dark:bg-blue-900/40 rounded-md border-l-4 border-blue-400"
-  >
+  <div class="thinking-node ">
     <!-- 可点击的标题栏 -->
     <div class="thinking-header" @click="toggleCollapse">
-      <div class="flex-shrink-0">
-        <!-- 思考图标 -->
+      <!-- 思考图标 -->
+      <!-- <div class="flex-shrink-0">
         <div
           class="w-8 h-8 rounded-full bg-blue-200 dark:bg-blue-700 flex items-center justify-center text-blue-700 dark:text-blue-100"
         >
@@ -63,38 +61,24 @@ async function textCopy(data: any) {
             />
           </svg>
         </div>
-      </div>
+      </div> -->
       <div class="thinking-title">
-        <strong class="text-sm">💭 深度思考</strong>
+        <!-- TODO: 深度思考样式 -->
+        <span class="text-lg"> 深度思考</span>
         <!-- 加载动画 -->
-        <span
-          v-if="node.loading"
-          class="thinking-dots visible"
-          aria-hidden="true"
-        >
+        <span v-if="node.loading" class="thinking-dots visible" aria-hidden="true">
           <span class="dot dot-1" />
           <span class="dot dot-2" />
           <span class="dot dot-3" />
         </span>
-        <span
-          v-else
-          class="thinking-status text-xs text-slate-500 dark:text-slate-300"
-        >
+        <span v-else class="thinking-status ">
           已完成
         </span>
       </div>
       <!-- 折叠/展开箭头 -->
       <div class="collapse-arrow" :class="{ collapsed }">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round">
           <polyline points="6 9 12 15 18 9" />
         </svg>
       </div>
@@ -102,9 +86,7 @@ async function textCopy(data: any) {
 
     <!-- 可折叠的内容区域 -->
     <div class="thinking-content" :class="{ collapsed }">
-      <div
-        class="mt-3 text-sm leading-relaxed text-slate-800 dark:text-slate-100"
-      >
+      <div class="mt-3 text-sm leading-relaxed dark:text-slate-100">
         <MarkdownRender :content="node.content" @copy="textCopy" />
       </div>
     </div>
@@ -114,7 +96,9 @@ async function textCopy(data: any) {
 <style scoped>
 .thinking-node {
   color: #0f172a;
+  margin-bottom: 15px;
 }
+
 .dark .thinking-node {
   color: #e6f0ff;
 }
@@ -123,6 +107,8 @@ async function textCopy(data: any) {
 .thinking-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e2e8f0;
   gap: 12px;
   cursor: pointer;
   user-select: none;
@@ -136,7 +122,13 @@ async function textCopy(data: any) {
 }
 
 .thinking-status {
-  font-style: italic;
+  /* font-style: italic; */
+  color: var(--6B-BBBBBB, #BBB);
+font-family: "Microsoft YaHei";
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: 21px;
 }
 
 /* 折叠箭头 */
@@ -150,18 +142,28 @@ async function textCopy(data: any) {
   transition: transform 0.25s ease;
   border-radius: 4px;
 }
+
 .collapse-arrow:hover {
   background: rgba(0, 0, 0, 0.06);
 }
+
 .dark .collapse-arrow:hover {
   background: rgba(255, 255, 255, 0.08);
 }
+
 .collapse-arrow.collapsed {
   transform: rotate(-90deg);
 }
 
 /* 可折叠内容 */
 .thinking-content {
+  color: var(--9-999999, #999);
+  font-family: "Microsoft YaHei";
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  /* 153.846% */
   max-height: 2000px;
   overflow: auto;
   transition:
@@ -169,6 +171,7 @@ async function textCopy(data: any) {
     opacity 0.25s ease;
   opacity: 1;
 }
+
 .thinking-content.collapsed {
   max-height: 0;
   opacity: 0;
@@ -181,6 +184,7 @@ async function textCopy(data: any) {
   gap: 6px;
   height: 12px;
 }
+
 .thinking-dots .dot {
   width: 6px;
   height: 6px;
@@ -188,30 +192,36 @@ async function textCopy(data: any) {
   background: #1e3a8a;
   opacity: 0.25;
 }
+
 .thinking-dots.visible .dot-1 {
   animation: think-bounce 1s infinite ease-in-out;
   animation-delay: 0s;
 }
+
 .thinking-dots.visible .dot-2 {
   animation: think-bounce 1s infinite ease-in-out;
   animation-delay: 0.12s;
 }
+
 .thinking-dots.visible .dot-3 {
   animation: think-bounce 1s infinite ease-in-out;
   animation-delay: 0.24s;
 }
+
 .dark .thinking-dots .dot {
   background: #bfdbfe;
   opacity: 0.28;
 }
 
 @keyframes think-bounce {
+
   0%,
   80%,
   100% {
     transform: translateY(0);
     opacity: 0.25;
   }
+
   40% {
     transform: translateY(-6px);
     opacity: 1;
diff --git a/src/components/ui/StackedCards.vue b/src/components/ui/StackedCards.vue
index 0f756cc..8ef8d4a 100644
--- a/src/components/ui/StackedCards.vue
+++ b/src/components/ui/StackedCards.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { NModal, NImage } from 'naive-ui'
 import PlusIcon from '../icons/custom/PlusIcon.vue'
 export interface CardItem {
@@ -43,6 +43,7 @@ const isWrapperHovered = ref(false)
 const hoveredCardId = ref<string | number | null>(null)
 const containerRef = ref<HTMLElement | null>(null)
 const previewCard = ref<CardItem | null>(null)
+const canUpload = computed(() => props.supportsFiles || props.supportsVision)
 const isPreviewVisible = computed({
   get: () => !!previewCard.value,
   set: (value: boolean) => {
@@ -235,10 +236,30 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('click', handleDocumentClick)
 })
+
+watch(
+  () => props.cards.length,
+  (length) => {
+    if (length === 0) {
+      isExpanded.value = false
+      hoveredCardId.value = null
+    }
+  },
+)
 </script>
 
 <template>
-  <div ref="containerRef" class="stacked-cards-container" :class="{ 'is-expanded': isExpanded }" @click="expandCards">
+  <div v-if="cards.length === 0" class="stacked-cards-empty" aria-label="上传附件操作">
+    <button type="button" class="stacked-upload-btn" :class="{ disabled: !canUpload }" :disabled="!canUpload"
+      :title="canUpload ? '上传附件或图片' : '当前模型不支持上传'" @click.stop="emit('add-upload')">
+      <div class="upload-action-div" :class="{ disabled: !canUpload }">
+        <PlusIcon :size="13" />
+      </div>
+    </button>
+  </div>
+
+  <div v-else ref="containerRef" class="stacked-cards-container" :class="{ 'is-expanded': isExpanded }"
+    @click="expandCards">
     <div class="cards-wrapper" @mouseenter="isWrapperHovered = true" @mouseleave="isWrapperHovered = false">
       <TransitionGroup name="card-spread">
         <div v-for="(card, index) in cards" :key="card.id" class="card" :style="cardStyle(index, cards.length)"
@@ -277,18 +298,6 @@ onUnmounted(() => {
       </TransitionGroup>
     </div>
 
-    <Transition name="upload-actions-fade">
-      <div v-if="!isExpanded" class="upload-actions" aria-label="上传附件操作" @click.stop>
-        <button type="button" class="upload-action-btn upload"
-          :class="{ disabled: !(props.supportsFiles || props.supportsVision) }"
-          :disabled="!(props.supportsFiles || props.supportsVision)" title="上传附件或图片" @click.stop="emit('add-upload')">
-          <span class="upload-action-icon">
-            <PlusIcon />
-          </span>
-        </button>
-      </div>
-    </Transition>
-
     <NModal v-model:show="isPreviewVisible" preset="card" :mask-closable="true" :close-on-esc="true"
       :on-close="removePreviewCard" class="image-preview-modal"
       :content-style="{ width: '100%', height: '100%', padding: '0', overflow: 'hidden' }"
@@ -319,6 +328,12 @@ onUnmounted(() => {
   justify-content: center;
   perspective: 1000px;
 }
+
+.stacked-cards-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 /* 卡片大小 */
 .cards-wrapper {
   position: relative;
@@ -331,7 +346,7 @@ onUnmounted(() => {
 
 .card {
   position: absolute;
-  width: 90%;
+  width: 74%;
   height: 100%;
   border-radius: 5px;
   border: 1px solid var(--card-border-color, var(--ffffff, #FFF));
@@ -635,50 +650,46 @@ onUnmounted(() => {
   opacity: 0;
 }
 
-.upload-actions {
-  position: absolute;
-  right: -2rem;
-  bottom: 0;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  z-index: 30;
-}
-
-.upload-action-btn {
+.stacked-upload-btn {
   display: inline-flex;
   align-items: center;
-  height: 19px;
-  padding: 0 7px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255);
-  color: #e4e4e7;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
   cursor: pointer;
-  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
-.upload-action-btn:hover:not(:disabled) {
+.stacked-upload-btn:hover:not(:disabled) {
   transform: translateY(-2px);
 }
 
-.upload-action-btn.file {
-  border-color: rgba(6, 182, 212, 0.22);
-}
-
-.upload-action-btn.image {
-  border-color: rgba(139, 92, 246, 0.22);
-}
-
-.upload-action-btn.disabled,
-.upload-action-btn:disabled {
+.stacked-upload-btn.disabled,
+.stacked-upload-btn:disabled {
   opacity: 0.42;
   cursor: not-allowed;
 }
 
-.upload-action-icon {
-  font-size: 8px;
-  line-height: 1;
+.upload-action-div {
+  display: grid;
+  place-items: center;
+  border-radius: 0;
+  width: 50px;
+  height: 70px;
+  background-color: rgb(255, 255, 255);
+}
+
+.upload-action-div.disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+  background: #f3f4f6;
+  border: 1px dashed #cbd5e1;
+  filter: grayscale(1);
+}
+
+.upload-action-div.disabled :deep(svg) {
+  opacity: 0.5;
 }
 
 .upload-action-text {
@@ -774,9 +785,14 @@ onUnmounted(() => {
     height: 36px;
   }
 
-  .upload-actions {
-    bottom: 0.75rem;
-    gap: 0.25rem;
+  .upload-action-div {
+    width: 75px;
+    height: 100px;
+  }
+
+  .stacked-cards-empty {
+    width: 75px;
+    height: 100px;
   }
 
   .upload-action-btn {