feat: 配额优化

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

@@ -82,6 +82,14 @@
 
         <!-- 搜索和操作区 -->
         <div class="toolbar-actions">
+          <!-- 存储配额显示 -->
+          <div class="storage-quota">
+            <span class="storage-quota__label">存储空间</span>
+            <span class="storage-quota__value">{{ userStore.usedStorage.toFixed(2) }} / {{ userStore.totalStorage }} GB</span>
+            <div class="storage-quota__bar">
+              <div class="storage-quota__used" :style="{ width: `${Math.min((userStore.usedStorage / userStore.totalStorage) * 100, 100)}%` }"></div>
+            </div>
+          </div>
           <a-input
             v-model="searchKeyword"
             placeholder="搜索文件名..."
@@ -273,6 +281,10 @@ import MaterialUploadModal from '@/components/material/MaterialUploadModal.vue';
 import MaterialService, { MaterialGroupService } from '@/api/material';
 import { useUpload } from '@/composables/useUpload';
 import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue';
+import { useUserStore } from '@/stores/user';
+
+// 用户状态（获取存储配额）
+const userStore = useUserStore()
 
 // 状态管理
 const loading = ref(false)
@@ -530,15 +542,6 @@ const handleFileClick = (file) => {
   }
 }
 
-const handleFileSelectChange = (fileId, checked) => {
-  const index = selectedFileIds.value.indexOf(fileId)
-  if (checked && index === -1) {
-    selectedFileIds.value.push(fileId)
-  } else if (!checked && index > -1) {
-    selectedFileIds.value.splice(index, 1)
-  }
-}
-
 const handleOpenUploadModal = () => {
   uploadModalVisible.value = true
 }
@@ -572,6 +575,8 @@ const handleFileUpload = async (filesWithCover, category, groupId) => {
     message.success(`成功上传 ${filesWithCover.length} 个文件`)
     uploadModalVisible.value = false
     await loadFileList()
+    // 刷新存储配额
+    await userStore.fetchUserProfile()
     // 混剪素材才刷新分组列表
     if (activeCategory.value === 'MIX') {
       await loadGroupList()
@@ -633,6 +638,9 @@ const handleBatchDelete = async () => {
     totalFileCount.value = Math.max(0, totalFileCount.value - count)
     selectedFileIds.value = []
 
+    // 刷新存储配额
+    await userStore.fetchUserProfile()
+
     // 如果删除后当前页没有数据了，则加载上一页
     if (fileList.value.length === 0 && pagination.current > 1) {
       pagination.current = pagination.current - 1
@@ -727,8 +735,10 @@ watch(activeCategory, () => {
 })
 
 // 初始化
-onMounted(() => {
-  loadGroupList()
+onMounted(async () => {
+  // 刷新用户档案获取最新存储配额
+  await userStore.fetchUserProfile()
+  await loadGroupList()
 })
 </script>
 
@@ -987,6 +997,43 @@ onMounted(() => {
   }
 }
 
+// 存储配额显示
+.storage-quota {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: @bg-page;
+  border-radius: @radius-sm;
+  border: 1px solid @border-color;
+
+  &__label {
+    font-size: 12px;
+    color: @text-muted;
+  }
+
+  &__value {
+    font-size: 12px;
+    font-weight: 500;
+    color: @text-primary;
+  }
+
+  &__bar {
+    width: 80px;
+    height: 4px;
+    background: @border-color;
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  &__used {
+    height: 100%;
+    background: linear-gradient(90deg, @primary-color, #818cf8);
+    border-radius: 2px;
+    transition: width 0.3s ease;
+  }
+}
+
 // 工具栏操作区
 .toolbar-actions {
   display: flex;