perf: improve attachments list page ui

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

src/core/icons.ts

@@ -46,6 +46,10 @@ import IconDeleteBin from "~icons/ri/delete-bin-2-line";
 import IconAddCircle from "~icons/ri/add-circle-line";
 // @ts-ignore
 import IconSave from "~icons/ri/save-line";
+// @ts-ignore
+import IconList from "~icons/ri/list-unordered";
+// @ts-ignore
+import IconGrid from "~icons/ri/grid-line";
 
 export {
   IconDashboard,
@@ -72,4 +76,6 @@ export {
   IconDeleteBin,
   IconAddCircle,
   IconSave,
+  IconList,
+  IconGrid,
 };

src/views/contents/attachments/AttachmentList.vue

@@ -4,18 +4,36 @@ import { VButton } from "@/components/base/button";
 import { VModal } from "@/components/base/modal";
 import { VCard } from "@/components/base/card";
 import { VSpace } from "@/components/base/space";
+import { VInput } from "@/components/base/input";
 import { ref } from "vue";
 import {
+  IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
+  IconGrid,
+  IconList,
   IconPalette,
   IconSettings,
 } from "@/core/icons";
 
+const viewTypes = [
+  {
+    name: "list",
+    icon: IconList,
+  },
+  {
+    name: "grid",
+    icon: IconGrid,
+  },
+];
+
+const viewType = ref("grid");
+
 const strategyVisible = ref(false);
 const attachmentSelectVisible = ref(false);
 const uploadVisible = ref(false);
 const detailVisible = ref(false);
+const checkAll = ref(false);
 
 const strategies = ref([
   {
@@ -117,7 +135,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
 
   <VModal v-model:visible="strategyVisible" title="添加存储策略"></VModal>
 
-  <VModal v-model:visible="detailVisible" title="attachment-0" :width="1000">
+  <VModal v-model:visible="detailVisible" :width="1000" title="attachment-0">
     <template #actions>
       <div class="modal-header-action">
         <IconArrowLeft />
@@ -243,37 +261,254 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
     </template>
   </VModal>
 
-  <div class="m-4">
+  <div class="m-0 md:m-4">
     <div class="flex-col flex sm:flex-row gap-2">
       <div class="w-full">
-        <ul
+        <VCard :body-class="[viewType === 'list' ? '!p-0' : '']">
-          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"
+          <template #header>
-          role="list"
+            <div class="px-4 py-3 block w-full bg-gray-50">
-        >
-          <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"
+                class="flex flex-col sm:flex-row items-start sm:items-center relative"
               >
-                <img
+                <div class="hidden sm:flex items-center mr-4">
-                  :src="attachment.url"
+                  <input
-                  alt=""
+                    v-model="checkAll"
-                  class="object-cover pointer-events-none group-hover:opacity-75"
+                    class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                />
+                    type="checkbox"
+                  />
+                </div>
+                <div class="w-full sm:w-auto flex flex-1">
+                  <VInput
+                    v-if="!checkAll"
+                    class="w-full sm:w-72"
+                    placeholder="输入关键词搜索"
+                  />
+                  <VSpace v-else>
+                    <VButton type="default">设置</VButton>
+                    <VButton type="danger">删除</VButton>
+                  </VSpace>
+                </div>
+                <div class="mt-4 sm:mt-0 flex">
+                  <VSpace spacing="lg">
+                    <div
+                      class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                    >
+                      <span class="mr-0.5">上传者</span>
+                      <span>
+                        <IconArrowDown />
+                      </span>
+                    </div>
+                    <div
+                      class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                    >
+                      <span class="mr-0.5">引用位置</span>
+                      <span>
+                        <IconArrowDown />
+                      </span>
+                    </div>
+                    <div
+                      class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                    >
+                      <span class="mr-0.5">标签</span>
+                      <span>
+                        <IconArrowDown />
+                      </span>
+                    </div>
+                    <div
+                      class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                    >
+                      <span class="mr-0.5">排序</span>
+                      <span>
+                        <IconArrowDown />
+                      </span>
+                    </div>
+                    <div class="flex flex-row gap-2">
+                      <div
+                        v-for="(item, index) in viewTypes"
+                        :key="index"
+                        :class="{
+                          'bg-gray-200 text-black font-bold':
+                            viewType === item.name,
+                        }"
+                        class="p-1 rounded cursor-pointer hover:bg-gray-200"
+                        @click="viewType = item.name"
+                      >
+                        <component :is="item.icon" />
+                      </div>
+                    </div>
+                  </VSpace>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <div
+            v-if="viewType === 'grid'"
+            class="grid grid-cols-3 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12 mt-2"
+            role="list"
+          >
+            <VCard
+              v-for="(attachment, index) in attachments"
+              :key="index"
+              :body-class="['!p-0']"
+              class="hover:shadow"
+              @click="detailVisible = true"
+            >
+              <div class="relative bg-white">
+                <div
+                  class="group block w-full h-full aspect-w-10 aspect-h-8 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-xs font-medium text-gray-700 truncate text-center pointer-events-none px-2 py-1"
+                >
+                  {{ attachment.name }}
+                </p>
               </div>
-              <p
-                class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
-              >
-                {{ attachment.name }}
-              </p>
             </VCard>
-          </li>
+          </div>
-        </ul>
+
+          <ul
+            v-if="viewType === 'list'"
+            class="divide-y divide-gray-100 box-border w-full h-full"
+            role="list"
+          >
+            <li v-for="(attachment, index) in attachments" :key="index">
+              <div
+                :class="{
+                  'bg-gray-100': checkAll,
+                }"
+                class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+              >
+                <div
+                  v-show="checkAll"
+                  class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+                ></div>
+                <div class="flex flex-row items-center relative">
+                  <div class="hidden mr-4 sm:flex items-center">
+                    <input
+                      v-model="checkAll"
+                      class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      type="checkbox"
+                    />
+                  </div>
+                  <div class="flex-1">
+                    <div class="flex flex-col sm:flex-row">
+                      <span
+                        class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                      >
+                        {{ attachment.name }}
+                      </span>
+                    </div>
+                    <div class="flex mt-1">
+                      <VSpace>
+                        <span class="text-xs text-gray-500">image/png</span>
+                        <span class="text-xs text-gray-500">1.2 MB</span>
+                      </VSpace>
+                    </div>
+                  </div>
+                  <div class="flex">
+                    <div
+                      class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                    >
+                      <img
+                        class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                        src="https://ryanc.cc/avatar"
+                      />
+                      <time class="text-sm text-gray-500" datetime="2020-01-07">
+                        2020-01-07
+                      </time>
+                      <span class="cursor-pointer">
+                        <IconSettings @click.stop="detailVisible = true" />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+
+          <template #footer>
+            <div class="bg-white flex items-center justify-end">
+              <div class="flex-1 flex items-center justify-end">
+                <div>
+                  <nav
+                    aria-label="Pagination"
+                    class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+                  >
+                    <a
+                      class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                      href="#"
+                    >
+                      <span class="sr-only">Previous</span>
+                      <svg
+                        aria-hidden="true"
+                        class="h-5 w-5"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </a>
+                    <a
+                      aria-current="page"
+                      class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      1
+                    </a>
+                    <a
+                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      2
+                    </a>
+                    <span
+                      class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                    >
+                      ...
+                    </span>
+                    <a
+                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      4
+                    </a>
+                    <a
+                      class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                      href="#"
+                    >
+                      <span class="sr-only">Next</span>
+                      <svg
+                        aria-hidden="true"
+                        class="h-5 w-5"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </a>
+                  </nav>
+                </div>
+              </div>
+            </div>
+          </template>
+        </VCard>
       </div>
     </div>
   </div>