mirror of https://github.com/halo-dev/halo-admin
perf: improve attachments list page ui
Signed-off-by: Ryan Wang <i@ryanc.cc>pull/581/head
Ryan Wang
parent
4cc740ab84
commit
79256a6c55
|
|
@ -2,13 +2,20 @@
|
|||
import { VPageHeader } from "@/components/base/header";
|
||||
import { VButton } from "@/components/base/button";
|
||||
import { VModal } from "@/components/base/modal";
|
||||
import { IconPalette, IconSettings } from "@/core/icons";
|
||||
import { VCard } from "@/components/base/card";
|
||||
import { VSpace } from "@/components/base/space";
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
IconArrowLeft,
|
||||
IconArrowRight,
|
||||
IconPalette,
|
||||
IconSettings,
|
||||
} from "@/core/icons";
|
||||
|
||||
const strategyVisible = ref(false);
|
||||
const attachmentSelectVisible = ref(false);
|
||||
const uploadVisible = ref(false);
|
||||
const detailVisible = ref(false);
|
||||
|
||||
const strategies = ref([
|
||||
{
|
||||
|
|
@ -29,6 +36,19 @@ const strategies = ref([
|
|||
]);
|
||||
|
||||
const selected = ref(strategies.value[0].id);
|
||||
|
||||
const attachments = Array.from(new Array(50), (_, index) => index).map(
|
||||
(index) => {
|
||||
return {
|
||||
id: index,
|
||||
name: `attachment-${index}`,
|
||||
url: `https://picsum.photos/1000/700?random=${index}`,
|
||||
size: "1.2MB",
|
||||
type: "image/png",
|
||||
strategy: "本地存储",
|
||||
};
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<VPageHeader title="附件库">
|
||||
|
|
@ -38,15 +58,152 @@ const selected = ref(strategies.value[0].id);
|
|||
<template #actions>
|
||||
<VSpace>
|
||||
<VButton type="default" @click="attachmentSelectVisible = true"
|
||||
>选择</VButton
|
||||
>
|
||||
<VButton type="secondary">上传</VButton>
|
||||
>选择
|
||||
</VButton>
|
||||
<VButton type="secondary" @click="uploadVisible = true">上传</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</VPageHeader>
|
||||
|
||||
<VModal v-model:visible="uploadVisible" :width="800" title="上传附件">
|
||||
<div class="w-full sm:w-96">
|
||||
<VCard :bodyClass="['!p-0']" title="存储策略">
|
||||
<fieldset>
|
||||
<div class="bg-white -space-y-px divide-y divide-gray-100">
|
||||
<label
|
||||
v-for="(strategy, index) in strategies"
|
||||
:key="index"
|
||||
:class="{
|
||||
'bg-gray-50': selected === strategy.id,
|
||||
}"
|
||||
class="relative p-4 flex cursor-pointer focus:outline-none"
|
||||
>
|
||||
<input
|
||||
v-model="selected"
|
||||
:value="strategy.id"
|
||||
class="h-4 w-4 mt-0.5 cursor-pointer shrink-0 text-indigo-600 border-gray-300 focus:ring-indigo-500"
|
||||
name="privacy"
|
||||
type="radio"
|
||||
/>
|
||||
<span class="ml-3 flex flex-col flex-1">
|
||||
<span
|
||||
:class="{ 'font-bold': selected === strategy.id }"
|
||||
class="block text-sm font-medium"
|
||||
>
|
||||
{{ strategy.name }}
|
||||
</span>
|
||||
<span class="block text-sm text-gray-400">
|
||||
{{ strategy.description }}
|
||||
</span>
|
||||
</span>
|
||||
<div class="self-center">
|
||||
<IconSettings
|
||||
class="hover:text-blue-600 cursor-pointer transition-all"
|
||||
@click.stop="strategyVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<template #footer>
|
||||
<VButton block type="secondary" @click="strategyVisible = true">
|
||||
添加策略
|
||||
</VButton>
|
||||
</template>
|
||||
</VCard>
|
||||
</div>
|
||||
</VModal>
|
||||
|
||||
<VModal v-model:visible="strategyVisible" title="添加存储策略"></VModal>
|
||||
|
||||
<VModal v-model:visible="detailVisible" title="attachment-0" :width="1000">
|
||||
<template #actions>
|
||||
<div class="modal-header-action">
|
||||
<IconArrowLeft />
|
||||
</div>
|
||||
<div class="modal-header-action">
|
||||
<IconArrowRight />
|
||||
</div>
|
||||
</template>
|
||||
<div class="bg-white overflow-hidden">
|
||||
<div>
|
||||
<dl>
|
||||
<div
|
||||
class="bg-gray-50 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>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
<img
|
||||
class="w-full sm:w-1/2 rounded"
|
||||
src="https://picsum.photos/1000/700?random=1"
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
阿里云/bucket/blog-attachments
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
class="bg-gray-50 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>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
attachment-0
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
image/jpeg
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
class="bg-gray-50 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>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
1.2 MB
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
2020-01-01 12:00:00
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
class="bg-gray-50 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>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
https://picsum.photos/1000/700?random=1
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
https://picsum.photos/1000/700?random=1
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<VButton type="default" @click="detailVisible = false">关闭</VButton>
|
||||
</template>
|
||||
</VModal>
|
||||
|
||||
<VModal
|
||||
v-model:visible="attachmentSelectVisible"
|
||||
:width="1240"
|
||||
|
|
@ -57,13 +214,17 @@ const selected = ref(strategies.value[0].id);
|
|||
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-8"
|
||||
role="list"
|
||||
>
|
||||
<li v-for="i in 40" :key="i" class="relative">
|
||||
<li
|
||||
v-for="(attachment, index) in attachments"
|
||||
:key="index"
|
||||
class="relative"
|
||||
>
|
||||
<VCard :body-class="['!p-0']">
|
||||
<div
|
||||
class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer"
|
||||
>
|
||||
<img
|
||||
:src="`https://picsum.photos/1000/700?random=${i}`"
|
||||
:src="attachment.url"
|
||||
alt=""
|
||||
class="object-cover pointer-events-none group-hover:opacity-75"
|
||||
/>
|
||||
|
|
@ -71,7 +232,7 @@ const selected = ref(strategies.value[0].id);
|
|||
<p
|
||||
class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
|
||||
>
|
||||
{{ i * 100 }}
|
||||
{{ attachment.name }}
|
||||
</p>
|
||||
</VCard>
|
||||
</li>
|
||||
|
|
@ -84,65 +245,23 @@ const selected = ref(strategies.value[0].id);
|
|||
|
||||
<div class="m-4">
|
||||
<div class="flex-col flex sm:flex-row gap-2">
|
||||
<div class="w-full sm:w-96">
|
||||
<VCard :bodyClass="['!p-0']" title="存储策略">
|
||||
<fieldset>
|
||||
<div class="bg-white -space-y-px divide-y divide-gray-100">
|
||||
<label
|
||||
v-for="(strategy, index) in strategies"
|
||||
:key="index"
|
||||
:class="{
|
||||
'bg-gray-50': selected === strategy.id,
|
||||
}"
|
||||
class="relative p-4 flex cursor-pointer focus:outline-none"
|
||||
>
|
||||
<input
|
||||
v-model="selected"
|
||||
:value="strategy.id"
|
||||
class="h-4 w-4 mt-0.5 cursor-pointer shrink-0 text-indigo-600 border-gray-300 focus:ring-indigo-500"
|
||||
name="privacy"
|
||||
type="radio"
|
||||
/>
|
||||
<span class="ml-3 flex flex-col flex-1">
|
||||
<span
|
||||
:class="{ 'font-bold': selected === strategy.id }"
|
||||
class="block text-sm font-medium"
|
||||
>
|
||||
{{ strategy.name }}
|
||||
</span>
|
||||
<span class="block text-sm text-gray-400">
|
||||
{{ strategy.description }}
|
||||
</span>
|
||||
</span>
|
||||
<div class="self-center">
|
||||
<IconSettings
|
||||
class="hover:text-blue-600 cursor-pointer transition-all"
|
||||
@click.stop="strategyVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<template #footer>
|
||||
<VButton block type="secondary" @click="strategyVisible = true">
|
||||
添加策略
|
||||
</VButton>
|
||||
</template>
|
||||
</VCard>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<ul
|
||||
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"
|
||||
role="list"
|
||||
>
|
||||
<li v-for="i in 40" :key="i" class="relative">
|
||||
<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"
|
||||
>
|
||||
<img
|
||||
:src="`https://picsum.photos/1000/700?random=${i}`"
|
||||
:src="attachment.url"
|
||||
alt=""
|
||||
class="object-cover pointer-events-none group-hover:opacity-75"
|
||||
/>
|
||||
|
|
@ -150,7 +269,7 @@ const selected = ref(strategies.value[0].id);
|
|||
<p
|
||||
class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
|
||||
>
|
||||
{{ i * 100 }}
|
||||
{{ attachment.name }}
|
||||
</p>
|
||||
</VCard>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ if (route.params.username) {
|
|||
</script>
|
||||
<template>
|
||||
<header class="bg-white">
|
||||
<div class="h-48 bg-gradient-to-r from-gray-800 to-red-500"></div>
|
||||
<div :class="user.cover" class="h-48 bg-gradient-to-r"></div>
|
||||
<div class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="-mt-12 sm:-mt-16 flex items-end space-x-5">
|
||||
<div class="flex">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ export const users = [
|
|||
role: "Super Administrator",
|
||||
email: "i@ryanc.cc",
|
||||
avatar: "https://ryanc.cc/avatar",
|
||||
cover: "from-gray-800 to-red-500",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
|
|
@ -14,6 +15,7 @@ export const users = [
|
|||
role: "Super Administrator",
|
||||
email: "johnniang@halo.run",
|
||||
avatar: "https://johnniang.me/avatar",
|
||||
cover: "from-gray-800 to-green-500",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
|
|
@ -22,6 +24,7 @@ export const users = [
|
|||
role: "Super Administrator",
|
||||
email: "guqing@halo.run",
|
||||
avatar: "https://guqing.xyz/avatar",
|
||||
cover: "from-gray-800 to-blue-500",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
|
|
|
|||
Loading…
Reference in New Issue