perf: refine attachment management page ui

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/599/head
Ryan Wang 2022-08-19 17:32:17 +08:00
parent d65c6a815a
commit dc01a11738
2 changed files with 9 additions and 34 deletions

View File

@ -3,7 +3,6 @@ import {
IconArrowDown, IconArrowDown,
IconCheckboxFill, IconCheckboxFill,
IconDatabase2Line, IconDatabase2Line,
IconFolder,
IconGrid, IconGrid,
IconList, IconList,
IconMore, IconMore,
@ -325,44 +324,20 @@ const folders = [
</template> </template>
<div v-if="viewType === 'grid'"> <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="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 <div
v-for="(folder, index) in folders" v-for="(folder, index) in folders"
:key="index" :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" 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"> <div class="flex flex-1 items-center">
<IconFolder class="mr-2 h-4 w-4" />
<span class="text-sm">{{ folder.name }}</span> <span class="text-sm">{{ folder.name }}</span>
</div> </div>
<IconMore /> <IconMore />

View File

@ -69,9 +69,9 @@ const onVisibleChange = (visible: boolean) => {
<div <div
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" 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"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
/photos Photos
</dd> </dd>
</div> </div>
<div <div