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,15 +58,152 @@ const selected = ref(strategies.value[0].id);
     <template #actions>
       <VSpace>
         <VButton type="default" @click="attachmentSelectVisible = true"
-          >选择</VButton
-        >
-        <VButton type="secondary">上传</VButton>
+          >选择
+        </VButton>
+        <VButton type="secondary" @click="uploadVisible = true">上传</VButton>
       </VSpace>
     </template>
   </VPageHeader>
 
+  <VModal v-model:visible="uploadVisible" :width="800" title="上传附件">
+    <div class="w-full sm:w-96">
+      <VCard :bodyClass="['!p-0']" title="存储策略">
+        <fieldset>
+          <div class="bg-white -space-y-px divide-y divide-gray-100">
+            <label
+              v-for="(strategy, index) in strategies"
+              :key="index"
+              :class="{
+                'bg-gray-50': selected === strategy.id,
+              }"
+              class="relative p-4 flex cursor-pointer focus:outline-none"
+            >
+              <input
+                v-model="selected"
+                :value="strategy.id"
+                class="h-4 w-4 mt-0.5 cursor-pointer shrink-0 text-indigo-600 border-gray-300 focus:ring-indigo-500"
+                name="privacy"
+                type="radio"
+              />
+              <span class="ml-3 flex flex-col flex-1">
+                <span
+                  :class="{ 'font-bold': selected === strategy.id }"
+                  class="block text-sm font-medium"
+                >
+                  {{ strategy.name }}
+                </span>
+                <span class="block text-sm text-gray-400">
+                  {{ strategy.description }}
+                </span>
+              </span>
+              <div class="self-center">
+                <IconSettings
+                  class="hover:text-blue-600 cursor-pointer transition-all"
+                  @click.stop="strategyVisible = true"
+                />
+              </div>
+            </label>
+          </div>
+        </fieldset>
+
+        <template #footer>
+          <VButton block type="secondary" @click="strategyVisible = true">
+            添加策略
+          </VButton>
+        </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"
@@ -57,13 +214,17 @@ const selected = ref(strategies.value[0].id);
         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"
               />
@@ -71,7 +232,7 @@ 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>
@@ -84,65 +245,23 @@ const selected = ref(strategies.value[0].id);
 
   <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>
-            <div class="bg-white -space-y-px divide-y divide-gray-100">
-              <label
-                v-for="(strategy, index) in strategies"
-                :key="index"
-                :class="{
-                  'bg-gray-50': selected === strategy.id,
-                }"
-                class="relative p-4 flex cursor-pointer focus:outline-none"
-              >
-                <input
-                  v-model="selected"
-                  :value="strategy.id"
-                  class="h-4 w-4 mt-0.5 cursor-pointer shrink-0 text-indigo-600 border-gray-300 focus:ring-indigo-500"
-                  name="privacy"
-                  type="radio"
-                />
-                <span class="ml-3 flex flex-col flex-1">
-                  <span
-                    :class="{ 'font-bold': selected === strategy.id }"
-                    class="block text-sm font-medium"
-                  >
-                    {{ strategy.name }}
-                  </span>
-                  <span class="block text-sm text-gray-400">
-                    {{ strategy.description }}
-                  </span>
-                </span>
-                <div class="self-center">
-                  <IconSettings
-                    class="hover:text-blue-600 cursor-pointer transition-all"
-                    @click.stop="strategyVisible = true"
-                  />
-                </div>
-              </label>
-            </div>
-          </fieldset>
-
-          <template #footer>
-            <VButton block type="secondary" @click="strategyVisible = true">
-              添加策略
-            </VButton>
-          </template>
-        </VCard>
-      </div>
       <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="i in 40" :key="i" class="relative">
+          <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="`https://picsum.photos/1000/700?random=${i}`"
+                  :src="attachment.url"
                   alt=""
                   class="object-cover pointer-events-none group-hover:opacity-75"
                 />
@@ -150,7 +269,7 @@ 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>

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,