perf: improve attachments list page ui

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

src/views/contents/attachments/AttachmentList.vue

@@ -2,13 +2,20 @@
 import { VPageHeader } from "@/components/base/header";
 import { VButton } from "@/components/base/button";
 import { VModal } from "@/components/base/modal";
-import { IconPalette, IconSettings } from "@/core/icons";
 import { VCard } from "@/components/base/card";
 import { VSpace } from "@/components/base/space";
 import { ref } from "vue";
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconPalette,
+  IconSettings,
+} from "@/core/icons";
 
 const strategyVisible = ref(false);
 const attachmentSelectVisible = ref(false);
+const uploadVisible = ref(false);
+const detailVisible = ref(false);
 
 const strategies = ref([
   {
@@ -29,6 +36,19 @@ const strategies = ref([
 ]);
 
 const selected = ref(strategies.value[0].id);
+
+const attachments = Array.from(new Array(50), (_, index) => index).map(
+  (index) => {
+    return {
+      id: index,
+      name: `attachment-${index}`,
+      url: `https://picsum.photos/1000/700?random=${index}`,
+      size: "1.2MB",
+      type: "image/png",
+      strategy: "本地存储",
+    };
+  }
+);
 </script>
 <template>
   <VPageHeader title="附件库">
@@ -38,52 +58,14 @@ const selected = ref(strategies.value[0].id);
     <template #actions>
       <VSpace>
         <VButton type="default" @click="attachmentSelectVisible = true"
-          >选择</VButton
+          >选择
-        >
+        </VButton>
-        <VButton type="secondary">上传</VButton>
+        <VButton type="secondary" @click="uploadVisible = true">上传</VButton>
       </VSpace>
     </template>
   </VPageHeader>
 
-  <VModal v-model:visible="strategyVisible" title="添加存储策略"></VModal>
+  <VModal v-model:visible="uploadVisible" :width="800" title="上传附件">
-
-  <VModal
-    v-model:visible="attachmentSelectVisible"
-    :width="1240"
-    title="选择附件"
-  >
-    <div class="w-full">
-      <ul
-        class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-8 2xl:grid-cols-8"
-        role="list"
-      >
-        <li v-for="i in 40" :key="i" class="relative">
-          <VCard :body-class="['!p-0']">
-            <div
-              class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer"
-            >
-              <img
-                :src="`https://picsum.photos/1000/700?random=${i}`"
-                alt=""
-                class="object-cover pointer-events-none group-hover:opacity-75"
-              />
-            </div>
-            <p
-              class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
-            >
-              {{ i * 100 }}
-            </p>
-          </VCard>
-        </li>
-      </ul>
-    </div>
-    <template #footer>
-      <VButton type="secondary">确定</VButton>
-    </template>
-  </VModal>
-
-  <div class="m-4">
-    <div class="flex-col flex sm:flex-row gap-2">
     <div class="w-full sm:w-96">
       <VCard :bodyClass="['!p-0']" title="存储策略">
         <fieldset>
@@ -131,18 +113,118 @@ const selected = ref(strategies.value[0].id);
         </template>
       </VCard>
     </div>
+  </VModal>
+
+  <VModal v-model:visible="strategyVisible" title="添加存储策略"></VModal>
+
+  <VModal v-model:visible="detailVisible" title="attachment-0" :width="1000">
+    <template #actions>
+      <div class="modal-header-action">
+        <IconArrowLeft />
+      </div>
+      <div class="modal-header-action">
+        <IconArrowRight />
+      </div>
+    </template>
+    <div class="bg-white overflow-hidden">
+      <div>
+        <dl>
+          <div
+            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">原始内容</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <img
+                class="w-full sm:w-1/2 rounded"
+                src="https://picsum.photos/1000/700?random=1"
+              />
+            </dd>
+          </div>
+          <div
+            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">存储策略</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              阿里云/bucket/blog-attachments
+            </dd>
+          </div>
+          <div
+            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">文件名称</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              attachment-0
+            </dd>
+          </div>
+          <div
+            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">文件类型</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              image/jpeg
+            </dd>
+          </div>
+          <div
+            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">文件大小</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              1.2 MB
+            </dd>
+          </div>
+          <div
+            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">上传时间</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              2020-01-01 12:00:00
+            </dd>
+          </div>
+          <div
+            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">原始链接</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              https://picsum.photos/1000/700?random=1
+            </dd>
+          </div>
+          <div
+            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">引用位置</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              https://picsum.photos/1000/700?random=1
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+    <template #footer>
+      <VButton type="default" @click="detailVisible = false">关闭</VButton>
+    </template>
+  </VModal>
+
+  <VModal
+    v-model:visible="attachmentSelectVisible"
+    :width="1240"
+    title="选择附件"
+  >
     <div class="w-full">
       <ul
-          class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-8 2xl:grid-cols-12"
+        class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-8 2xl:grid-cols-8"
         role="list"
       >
-          <li v-for="i in 40" :key="i" class="relative">
+        <li
+          v-for="(attachment, index) in attachments"
+          :key="index"
+          class="relative"
+        >
           <VCard :body-class="['!p-0']">
             <div
               class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer"
             >
               <img
-                  :src="`https://picsum.photos/1000/700?random=${i}`"
+                :src="attachment.url"
                 alt=""
                 class="object-cover pointer-events-none group-hover:opacity-75"
               />
@@ -150,7 +232,44 @@ const selected = ref(strategies.value[0].id);
             <p
               class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
             >
-                {{ i * 100 }}
+              {{ attachment.name }}
+            </p>
+          </VCard>
+        </li>
+      </ul>
+    </div>
+    <template #footer>
+      <VButton type="secondary">确定</VButton>
+    </template>
+  </VModal>
+
+  <div class="m-4">
+    <div class="flex-col flex sm:flex-row gap-2">
+      <div class="w-full">
+        <ul
+          class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-8 2xl:grid-cols-12"
+          role="list"
+        >
+          <li
+            v-for="(attachment, index) in attachments"
+            :key="index"
+            class="relative"
+            @click="detailVisible = true"
+          >
+            <VCard :body-class="['!p-0']">
+              <div
+                class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer"
+              >
+                <img
+                  :src="attachment.url"
+                  alt=""
+                  class="object-cover pointer-events-none group-hover:opacity-75"
+                />
+              </div>
+              <p
+                class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
+              >
+                {{ attachment.name }}
               </p>
             </VCard>
           </li>

src/views/system/users/Profile.vue

@@ -22,7 +22,7 @@ if (route.params.username) {
 </script>
 <template>
   <header class="bg-white">
-    <div class="h-48 bg-gradient-to-r from-gray-800 to-red-500"></div>
+    <div :class="user.cover" class="h-48 bg-gradient-to-r"></div>
     <div class="px-4 sm:px-6 lg:px-8">
       <div class="-mt-12 sm:-mt-16 flex items-end space-x-5">
         <div class="flex">

src/views/system/users/users-mock.ts

@@ -6,6 +6,7 @@ export const users = [
     role: "Super Administrator",
     email: "i@ryanc.cc",
     avatar: "https://ryanc.cc/avatar",
+    cover: "from-gray-800 to-red-500",
   },
   {
     id: 2,
@@ -14,6 +15,7 @@ export const users = [
     role: "Super Administrator",
     email: "johnniang@halo.run",
     avatar: "https://johnniang.me/avatar",
+    cover: "from-gray-800 to-green-500",
   },
   {
     id: 3,
@@ -22,6 +24,7 @@ export const users = [
     role: "Super Administrator",
     email: "guqing@halo.run",
     avatar: "https://guqing.xyz/avatar",
+    cover: "from-gray-800 to-blue-500",
   },
   {
     id: 4,