fix: 修复问题

frontend/app/web-gold/src/views/material/MaterialListNew.vue

@@ -150,6 +150,7 @@
                       </template>
                       <template v-else>
                         <a-input
+                          ref="nameInputRef"
                           v-model:value="editingDisplayName"
                           size="small"
                           @blur="handleSaveName(file)"
@@ -207,6 +208,7 @@
     <MaterialUploadModal
       v-model:visible="uploadModalVisible"
       :group-id="selectedGroupId"
+      :uploading="uploadLoading"
       @confirm="handleFileUpload"
     />
 
@@ -230,7 +232,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
 import {
   UploadOutlined,
   SearchOutlined,
@@ -253,6 +255,7 @@ const totalFileCount = ref(0);
 const searchKeyword = ref('');
 
 const uploadModalVisible = ref(false);
+const uploadLoading = ref(false);
 const createGroupModalVisible = ref(false);
 
 // Upload Hook
@@ -270,6 +273,7 @@ const selectedFileIds = ref([]);
 // 编辑状态
 const editingFileId = ref(null);
 const editingDisplayName = ref('');
+const nameInputRef = ref(null);
 
 // 分页信息
 const pagination = reactive({
@@ -409,6 +413,7 @@ const handleOpenUploadModal = () => {
 
 const handleFileUpload = async (filesWithCover, category, groupId) => {
   try {
+    uploadLoading.value = true;
     // 上传每个文件
     for (const fileWithCover of filesWithCover) {
       await upload(fileWithCover.file, {
@@ -433,6 +438,8 @@ const handleFileUpload = async (filesWithCover, category, groupId) => {
   } catch (error) {
     console.error("文件上传失败:", error);
     message.error("文件上传失败: " + (error.message || "未知错误"));
+  } finally {
+    uploadLoading.value = false;
   }
 };
 
@@ -525,17 +532,21 @@ const getFileTypeText = (fileName) => {
   return ext ? `${ext.toLowerCase()}` : '';
 };
 
-const handleEditName = (file) => {
+const handleEditName = async (file) => {
   editingFileId.value = file.id;
   editingDisplayName.value = file.displayName || file.fileName;
-  // 延迟聚焦，确保输入框已渲染
-  setTimeout(() => {
-    const input = document.querySelector('.ant-input:focus');
+  // 使用 nextTick 确保 DOM 更新后再聚焦
+  await nextTick();
+
+  // 查找当前编辑文件的输入框
+  const nameElement = document.querySelector(`[data-file-id="${file.id}"] .material-item__name`);
+  if (nameElement) {
+    const input = nameElement.querySelector('input');
     if (input) {
       input.focus();
       input.select();
     }
-  }, 50);
+  }
 };
 
 const handleSaveName = async (file) => {
@@ -708,11 +719,6 @@ onMounted(() => {
   &--active {
     background: #e6f7ff;
     color: #1890ff;
-
-    // 移除active状态下的hover效果
-    &:hover {
-      background: #e6f7ff;
-    }
   }
 
   &__content {
@@ -798,9 +804,9 @@ onMounted(() => {
     }
 
     .ant-btn {
-      transition: all 0.2s ease;
       font-weight: 500;
       border-radius: 6px;
+      transition: all 0.2s ease;
 
       &:hover {
         box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
@@ -940,15 +946,29 @@ onMounted(() => {
     .ant-input {
       font-size: 15px;
       font-weight: 600;
-      height: 32px;
-      line-height: 30px;
-      border-radius: 6px;
+      height: 20px; /* 与文字高度一致 */
+      line-height: 1.4;
+      border-radius: 4px;
       border-color: #3B82F6;
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      padding: 0 4px; /* 减少内边距 */
+      margin: 0; /* 移除margin避免布局问题 */
+      display: block; /* 确保输入框正常显示 */
 
       &:focus {
         box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
       }
+
+      /* 移除默认的内边距和高度 */
+      input {
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        line-height: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        color: inherit;
+      }
     }
   }
 
@@ -1014,67 +1034,7 @@ onMounted(() => {
   }
 }
 
-// 键盘导航支持
-.material-item:focus-within {
-  outline: 2px solid #3B82F6;
-  outline-offset: 2px;
-}
 
-// 响应式设计
-@media (max-width: 768px) {
-  .material-grid {
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 12px;
-  }
-
-  .material-content__search {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-
-    .material-content__actions {
-      margin-left: 0;
-      flex-wrap: wrap;
-    }
-  }
-
-  .material-item {
-    &__preview {
-      height: 120px;
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .material-grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 8px;
-  }
-
-  .material-content {
-    margin: 8px;
-    border-radius: 8px;
-
-    &__search,
-    &__list,
-    &__pagination {
-      padding: 16px;
-    }
-  }
-}
-
-// 无障碍支持
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
 
 // 批量删除确认弹窗样式
 :deep(.batch-delete-modal) {