perf: improve attachment upload modal

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/modules/contents/attachments/components/AttachmentUploadModal.vue

@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-import { VModal } from "@halo-dev/components";
+import {
+  VModal,
+  VEmpty,
+  IconAddCircle,
+  VButton,
+  VSpace,
+} from "@halo-dev/components";
 import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { computed, ref, watch, watchEffect } from "vue";
 import { apiClient } from "@/utils/api-client";
@@ -23,7 +29,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const { policies, handleFetchPolicies } = useFetchAttachmentPolicy();
+const { policies, loading, handleFetchPolicies } = useFetchAttachmentPolicy();
 
 const selectedPolicy = ref<Policy | null>(null);
 const policyVisible = ref(false);
@@ -80,47 +86,57 @@ watch(
     :title="modalTitle"
     @update:visible="onVisibleChange"
   >
-    <template #actions>
+    <VEmpty
-      <FloatingDropdown>
+      v-if="!policies.length && !loading"
-        <span v-tooltip="`选择存储策略`">
+      message="当前没有上传附件的存储策略，请先创建存储策略"
-          <span class="text-sm">
+      title="无存储策略"
-            {{ selectedPolicy?.spec.displayName || "无存储策略" }}
+    >
-          </span>
+      <template #actions>
-        </span>
+        <VSpace>
-        <template #popper>
+          <VButton @click="handleFetchPolicies">刷新</VButton>
-          <div class="w-72 p-4">
+          <VButton type="secondary" @click="policyVisible = true">
-            <ul class="space-y-1">
+            <template #icon>
-              <li
+              <IconAddCircle class="h-full w-full" />
-                v-for="(policy, index) in policies"
+            </template>
-                :key="index"
+            新建策略
-                v-close-popper
+          </VButton>
-                :class="{
+        </VSpace>
-                  '!bg-gray-100 !text-gray-900':
+      </template>
-                    selectedPolicy?.metadata.name === policy.metadata.name,
+    </VEmpty>
-                }"
+    <div v-else class="w-full p-4">
-                class="flex cursor-pointer flex-col rounded px-2 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+      <div class="mb-2">
-                @click="selectedPolicy = policy"
+        <span class="text-sm text-gray-900">选择存储策略：</span>
-              >
+      </div>
-                <span class="truncate">
+      <div class="mb-3 grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-4">
-                  {{ policy.spec.displayName }}
+        <div
-                </span>
+          v-for="(policy, index) in policies"
-                <span class="text-xs">
+          :key="index"
-                  {{ policy.spec.templateRef?.name }}
+          :class="{
-                </span>
+            '!bg-gray-200 !text-gray-900':
-              </li>
+              selectedPolicy?.metadata.name === policy.metadata.name,
-              <li
+          }"
-                v-close-popper
+          class="flex cursor-pointer items-center rounded-base bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-gray-900 hover:shadow-sm"
-                class="flex cursor-pointer flex-col rounded px-2 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+          @click="selectedPolicy = policy"
-                @click="policyVisible = true"
+        >
-              >
+          <div class="flex flex-1 flex-col items-start truncate">
-                <span class="truncate"> 新增存储策略 </span>
+            <span class="truncate text-sm">
-              </li>
+              {{ policy.spec.displayName }}
-            </ul>
+            </span>
+            <span class="text-xs">
+              {{ policy.spec.templateRef?.name }}
+            </span>
           </div>
-        </template>
+        </div>
-      </FloatingDropdown>
+        <div
-    </template>
+          class="flex cursor-pointer items-center rounded-base bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-gray-900 hover:shadow-sm"
-    <div class="w-full p-4">
+          @click="policyVisible = true"
+        >
+          <div class="flex flex-1 items-center truncate">
+            <span class="truncate text-sm">新建策略</span>
+          </div>
+          <IconAddCircle />
+        </div>
+      </div>
       <FilePondUpload
         ref="FilePondUploadRef"
         :allow-multiple="true"