github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

perf: improve attachments list page ui 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/3445/head
Ryan Wang 2022-08-23 15:35:10 +08:00
parent 87ac598411
commit abeee6029b
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/modules/contents/attachments/AttachmentList.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { import {
IconAddCircle,
IconArrowDown, IconArrowDown,
IconCheckboxFill, IconCheckboxFill,
IconDatabase2Line, IconDatabase2Line,
@ -336,22 +337,39 @@ const folders = [
<div v-if="viewType === 'grid'"> <div v-if="viewType === 'grid'">
<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 <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" class="flex cursor-pointer items-center rounded-base bg-gray-200 p-2 text-gray-900 transition-all"
> >
<div class="flex flex-1 items-center"> <div class="flex flex-1 items-center">
<span class="text-sm">全部</span> <span class="text-sm">全部（212）</span>
</div>
</div>
<div
class="flex cursor-pointer items-center rounded-base bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-gray-900 hover:shadow-sm"
>
<div class="flex flex-1 items-center">
<span class="text-sm">未分组（18）</span>
</div> </div>
</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-500 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">
<span class="text-sm">{{ folder.name }}</span> <span class="text-sm">
{{ folder.name }}（{{ index * 20 }}）
</span>
</div> </div>
<IconMore /> <IconMore />
</div> </div>
<div
class="flex cursor-pointer items-center rounded-base bg-gray-100 p-2 text-gray-500 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>
<IconAddCircle />
</div>
</div> </div>
<div <div
class="mt-2 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" class="mt-2 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"