From dc01a11738e6149276937550d6ac553afa854325 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 19 Aug 2022 17:32:17 +0800
Subject: [PATCH] perf: refine attachment management page ui

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../contents/attachments/AttachmentList.vue   | 39 ++++---------------
 .../components/AttachmentDetailModal.vue      |  4 +-
 2 files changed, 9 insertions(+), 34 deletions(-)

diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 6aca1eda..09fb22e6 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -3,7 +3,6 @@ import {
   IconArrowDown,
   IconCheckboxFill,
   IconDatabase2Line,
-  IconFolder,
   IconGrid,
   IconList,
   IconMore,
@@ -325,44 +324,20 @@ const folders = [
           </template>
 
           <div v-if="viewType === 'grid'">
-            <nav aria-label="Breadcrumb" class="mb-5 flex">
-              <ol class="flex items-center space-x-4" role="list">
-                <li>
-                  <div class="flex items-center">
-                    <a
-                      class="text-sm font-medium text-gray-500 hover:text-gray-700"
-                      href="javascript:void(0)"
-                    >
-                      Root
-                    </a>
-                  </div>
-                </li>
-
-                <li>
-                  <div class="flex items-center">
-                    <div
-                      class="flex h-5 w-5 flex-shrink-0 items-center justify-center text-gray-300"
-                    >
-                      <span> / </span>
-                    </div>
-                    <a
-                      class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
-                      href="javascript:void(0)"
-                    >
-                      Photos
-                    </a>
-                  </div>
-                </li>
-              </ol>
-            </nav>
             <div class="mb-5 grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-6">
+              <div
+                class="flex cursor-pointer items-center rounded-base bg-gray-100 p-2 text-gray-600 transition-all hover:bg-gray-200 hover:text-gray-900 hover:shadow-sm"
+              >
+                <div class="flex flex-1 items-center">
+                  <span class="text-sm">全部</span>
+                </div>
+              </div>
               <div
                 v-for="(folder, index) in folders"
                 :key="index"
                 class="flex cursor-pointer items-center rounded-base bg-gray-100 p-2 text-gray-600 transition-all hover:bg-gray-200 hover:text-gray-900 hover:shadow-sm"
               >
                 <div class="flex flex-1 items-center">
-                  <IconFolder class="mr-2 h-4 w-4" />
                   <span class="text-sm">{{ folder.name }}</span>
                 </div>
                 <IconMore />
diff --git a/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
index b7128057..5f50b149 100644
--- a/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@@ -69,9 +69,9 @@ const onVisibleChange = (visible: boolean) => {
           <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>
+            <dt class="text-sm font-medium text-gray-900">所在分组</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              /photos
+              Photos
             </dd>
           </div>
           <div