mirror of https://github.com/halo-dev/halo
608 lines
23 KiB
Vue
608 lines
23 KiB
Vue
<script lang="ts" setup>
|
|
import { VPageHeader } from "@/components/base/header";
|
|
import { VButton } from "@/components/base/button";
|
|
import { VModal } from "@/components/base/modal";
|
|
import { VCard } from "@/components/base/card";
|
|
import { VSpace } from "@/components/base/space";
|
|
import { VInput } from "@/components/base/input";
|
|
import { VTag } from "@/components/base/tag";
|
|
import { ref } from "vue";
|
|
import { users } from "@/views/system/users/users-mock";
|
|
import {
|
|
IconArrowDown,
|
|
IconArrowLeft,
|
|
IconArrowRight,
|
|
IconCheckboxFill,
|
|
IconGrid,
|
|
IconList,
|
|
IconPalette,
|
|
IconSettings,
|
|
} from "@/core/icons";
|
|
|
|
const viewTypes = [
|
|
{
|
|
name: "list",
|
|
icon: IconList,
|
|
},
|
|
{
|
|
name: "grid",
|
|
icon: IconGrid,
|
|
},
|
|
];
|
|
|
|
const viewType = ref("grid");
|
|
|
|
const strategyVisible = ref(false);
|
|
const attachmentSelectVisible = ref(false);
|
|
const uploadVisible = ref(false);
|
|
const detailVisible = ref(false);
|
|
const checkAll = ref(false);
|
|
|
|
const strategies = ref([
|
|
{
|
|
id: "1",
|
|
name: "本地存储",
|
|
description: "~/.halo/uploads",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "阿里云 OSS",
|
|
description: "bucket/blog-attachments",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "阿里云 OSS",
|
|
description: "bucket/blog-photos",
|
|
},
|
|
]);
|
|
|
|
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="附件库">
|
|
<template #icon>
|
|
<IconPalette class="self-center mr-2" />
|
|
</template>
|
|
<template #actions>
|
|
<VSpace>
|
|
<VButton type="default" @click="attachmentSelectVisible = true"
|
|
>选择
|
|
</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" :width="1000" title="attachment-0">
|
|
<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">
|
|
Ryan Wang
|
|
</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"
|
|
title="选择附件"
|
|
>
|
|
<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-8"
|
|
role="list"
|
|
>
|
|
<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="attachment.url"
|
|
alt=""
|
|
class="object-cover pointer-events-none group-hover:opacity-75"
|
|
/>
|
|
</div>
|
|
<p
|
|
class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
|
|
>
|
|
{{ attachment.name }}
|
|
</p>
|
|
</VCard>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<template #footer>
|
|
<VButton type="secondary">确定</VButton>
|
|
</template>
|
|
</VModal>
|
|
|
|
<div class="m-0 md:m-4">
|
|
<div class="flex-col flex sm:flex-row gap-2">
|
|
<div class="w-full">
|
|
<VCard :body-class="[viewType === 'list' ? '!p-0' : '']">
|
|
<template #header>
|
|
<div class="px-4 py-3 block w-full bg-gray-50">
|
|
<div
|
|
class="flex flex-col sm:flex-row items-start sm:items-center relative"
|
|
>
|
|
<div class="hidden sm:flex items-center mr-4">
|
|
<input
|
|
v-model="checkAll"
|
|
class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
<div class="w-full sm:w-auto flex flex-1">
|
|
<VInput
|
|
v-if="!checkAll"
|
|
class="w-full sm:w-72"
|
|
placeholder="输入关键词搜索"
|
|
/>
|
|
<VSpace v-else>
|
|
<VButton type="default">设置</VButton>
|
|
<VButton type="danger">删除</VButton>
|
|
</VSpace>
|
|
</div>
|
|
<div class="mt-4 sm:mt-0 flex">
|
|
<VSpace spacing="lg">
|
|
<FloatingDropdown>
|
|
<div
|
|
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
|
|
>
|
|
<span class="mr-0.5">上传者</span>
|
|
<span>
|
|
<IconArrowDown />
|
|
</span>
|
|
</div>
|
|
<template #popper>
|
|
<div class="p-4 w-80 h-96">
|
|
<div class="bg-white">
|
|
<!--TODO: Auto Focus-->
|
|
<VInput placeholder="根据关键词搜索"></VInput>
|
|
</div>
|
|
<div class="mt-2">
|
|
<ul class="divide-y divide-gray-200" role="list">
|
|
<li
|
|
v-for="(user, index) in users"
|
|
:key="index"
|
|
class="py-4 cursor-pointer hover:bg-gray-50"
|
|
>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<input
|
|
class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<img
|
|
:alt="user.name"
|
|
:src="user.avatar"
|
|
class="h-10 w-10 rounded"
|
|
/>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p
|
|
class="text-sm font-medium text-gray-900 truncate"
|
|
>
|
|
{{ user.name }}
|
|
</p>
|
|
<p class="text-sm text-gray-500 truncate">
|
|
@{{ user.username }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<VTag>{{ index + 1 }} 篇</VTag>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</FloatingDropdown>
|
|
<div
|
|
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
|
|
>
|
|
<span class="mr-0.5">引用位置</span>
|
|
<span>
|
|
<IconArrowDown />
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
|
|
>
|
|
<span class="mr-0.5">标签</span>
|
|
<span>
|
|
<IconArrowDown />
|
|
</span>
|
|
</div>
|
|
<FloatingDropdown>
|
|
<div
|
|
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
|
|
>
|
|
<span class="mr-0.5">排序</span>
|
|
<span>
|
|
<IconArrowDown />
|
|
</span>
|
|
</div>
|
|
<template #popper>
|
|
<div class="p-4 w-72">
|
|
<ul class="space-y-1">
|
|
<li
|
|
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
|
|
>
|
|
<span class="truncate">较近上传</span>
|
|
</li>
|
|
<li
|
|
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
|
|
>
|
|
<span class="truncate">较晚上传</span>
|
|
</li>
|
|
<li
|
|
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
|
|
>
|
|
<span class="truncate">文件大小降序</span>
|
|
</li>
|
|
<li
|
|
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
|
|
>
|
|
<span class="truncate">文件大小升序</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</FloatingDropdown>
|
|
<div class="flex flex-row gap-2">
|
|
<div
|
|
v-for="(item, index) in viewTypes"
|
|
:key="index"
|
|
:class="{
|
|
'bg-gray-200 text-black font-bold':
|
|
viewType === item.name,
|
|
}"
|
|
class="p-1 rounded cursor-pointer hover:bg-gray-200"
|
|
@click="viewType = item.name"
|
|
>
|
|
<component :is="item.icon" />
|
|
</div>
|
|
</div>
|
|
</VSpace>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div
|
|
v-if="viewType === 'grid'"
|
|
class="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 mt-2"
|
|
role="list"
|
|
>
|
|
<VCard
|
|
v-for="(attachment, index) in attachments"
|
|
:key="index"
|
|
:body-class="['!p-0']"
|
|
class="hover:shadow"
|
|
@click="detailVisible = true"
|
|
>
|
|
<div class="relative bg-white">
|
|
<div
|
|
class="group block w-full h-full aspect-w-10 aspect-h-8 bg-gray-100 overflow-hidden cursor-pointer"
|
|
>
|
|
<img
|
|
:src="attachment.url"
|
|
alt=""
|
|
class="object-cover pointer-events-none group-hover:opacity-75"
|
|
/>
|
|
</div>
|
|
<p
|
|
class="block text-xs font-medium text-gray-700 truncate text-center pointer-events-none px-2 py-1"
|
|
>
|
|
{{ attachment.name }}
|
|
</p>
|
|
|
|
<IconCheckboxFill
|
|
v-if="checkAll"
|
|
class="absolute top-0.5 right-0.5"
|
|
/>
|
|
</div>
|
|
</VCard>
|
|
</div>
|
|
|
|
<ul
|
|
v-if="viewType === 'list'"
|
|
class="divide-y divide-gray-100 box-border w-full h-full"
|
|
role="list"
|
|
>
|
|
<li v-for="(attachment, index) in attachments" :key="index">
|
|
<div
|
|
:class="{
|
|
'bg-gray-100': checkAll,
|
|
}"
|
|
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
|
|
>
|
|
<div
|
|
v-show="checkAll"
|
|
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
|
|
></div>
|
|
<div class="flex flex-row items-center relative">
|
|
<div class="hidden mr-4 sm:flex items-center">
|
|
<input
|
|
v-model="checkAll"
|
|
class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex flex-col sm:flex-row">
|
|
<span
|
|
class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
|
|
>
|
|
{{ attachment.name }}
|
|
</span>
|
|
</div>
|
|
<div class="flex mt-1">
|
|
<VSpace>
|
|
<span class="text-xs text-gray-500">image/png</span>
|
|
<span class="text-xs text-gray-500">1.2 MB</span>
|
|
</VSpace>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div
|
|
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
|
|
>
|
|
<img
|
|
class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
|
|
src="https://ryanc.cc/avatar"
|
|
/>
|
|
<time class="text-sm text-gray-500" datetime="2020-01-07">
|
|
2020-01-07
|
|
</time>
|
|
<span class="cursor-pointer">
|
|
<IconSettings @click.stop="detailVisible = true" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<template #footer>
|
|
<div class="bg-white flex items-center justify-end">
|
|
<div class="flex-1 flex items-center justify-end">
|
|
<div>
|
|
<nav
|
|
aria-label="Pagination"
|
|
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
|
|
>
|
|
<a
|
|
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
|
href="#"
|
|
>
|
|
<span class="sr-only">Previous</span>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="h-5 w-5"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
clip-rule="evenodd"
|
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
aria-current="page"
|
|
class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
|
|
href="#"
|
|
>
|
|
1
|
|
</a>
|
|
<a
|
|
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
|
|
href="#"
|
|
>
|
|
2
|
|
</a>
|
|
<span
|
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
|
|
>
|
|
...
|
|
</span>
|
|
<a
|
|
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
|
|
href="#"
|
|
>
|
|
4
|
|
</a>
|
|
<a
|
|
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
|
href="#"
|
|
>
|
|
<span class="sr-only">Next</span>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="h-5 w-5"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
clip-rule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</VCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|