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

perf: improve attachments list page ui 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/603/head
Ryan Wang 2022-08-23 15:35:10 +08:00
parent 4031eb7d85
commit b949d1f61c
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>
import {
IconAddCircle,
IconArrowDown,
IconCheckboxFill,
IconDatabase2Line,
@ -336,22 +337,39 @@ const folders = [
<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="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">
<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
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"
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">{{ folder.name }}</span>
<span class="text-sm">
{{ folder.name }}（{{ index * 20 }}）
</span>
</div>
<IconMore />
</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
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"