mirror of https://github.com/halo-dev/halo
351 lines
13 KiB
Vue
351 lines
13 KiB
Vue
<script lang="ts" setup>
|
|
import { VPageHeader } from "@/components/base/header";
|
|
import { VButton } from "@/components/base/button";
|
|
import { VCard } from "@/components/base/card";
|
|
import { VInput } from "@/components/base/input";
|
|
import { VSpace } from "@/components/base/space";
|
|
import { VTag } from "@/components/base/tag";
|
|
import {
|
|
IconAddCircle,
|
|
IconArrowDown,
|
|
IconPlug,
|
|
IconSettings,
|
|
} from "@/core/icons";
|
|
import { ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { plugins } from "./plugins-mock";
|
|
|
|
const checkAll = ref(false);
|
|
|
|
const router = useRouter();
|
|
|
|
// eslint-disable-next-line
|
|
const handleRouteToDetail = (plugin: any) => {
|
|
router.push({
|
|
name: "PluginDetail",
|
|
params: { id: plugin.spec.pluginClass },
|
|
});
|
|
};
|
|
</script>
|
|
<template>
|
|
<VPageHeader title="插件">
|
|
<template #icon>
|
|
<IconPlug class="self-center mr-2" />
|
|
</template>
|
|
<template #actions>
|
|
<VButton type="secondary">
|
|
<template #icon>
|
|
<IconAddCircle class="w-full h-full" />
|
|
</template>
|
|
安装
|
|
</VButton>
|
|
</template>
|
|
</VPageHeader>
|
|
|
|
<div class="m-0 md:m-4">
|
|
<VCard :body-class="['!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-52">
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</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>
|
|
<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 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="halo-dev"
|
|
class="h-10 w-10 rounded"
|
|
src="https://halo.run/logo"
|
|
/>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p
|
|
class="text-sm font-medium text-gray-900 truncate"
|
|
>
|
|
Halo
|
|
</p>
|
|
<p class="text-sm text-gray-500 truncate">
|
|
https://halo.run
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<VTag>2 个</VTag>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</FloatingDropdown>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</FloatingDropdown>
|
|
</VSpace>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
|
|
<li
|
|
v-for="(plugin, index) in plugins"
|
|
:key="index"
|
|
@click.stop="handleRouteToDetail(plugin)"
|
|
>
|
|
<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 v-if="plugin.spec.logo" class="mr-4">
|
|
<div
|
|
class="w-12 h-12 border rounded p-1 hover:shadow-sm bg-white"
|
|
>
|
|
<img
|
|
:alt="plugin.metadata.name"
|
|
:src="plugin.spec.logo"
|
|
class="w-full h-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex flex-row items-center">
|
|
<span class="mr-2 text-sm font-medium truncate text-gray-900">
|
|
{{ plugin.metadata.name }}
|
|
</span>
|
|
<VSpace>
|
|
<VTag>
|
|
{{ plugin.metadata.enabled ? "已启用" : "未启用" }}
|
|
</VTag>
|
|
</VSpace>
|
|
</div>
|
|
<div class="flex mt-2">
|
|
<VSpace align="start" direction="column" spacing="xs">
|
|
<span class="text-xs text-gray-500">
|
|
{{ plugin.spec.description }}
|
|
</span>
|
|
<span class="sm:hidden text-xs text-gray-500">
|
|
@{{ plugin.spec.author }} {{ plugin.spec.version }}
|
|
</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"
|
|
>
|
|
<a
|
|
:href="plugin.spec.homepage"
|
|
class="hidden sm:block text-sm text-gray-500 hover:text-gray-900"
|
|
target="_blank"
|
|
>
|
|
@{{ plugin.spec.author }}
|
|
</a>
|
|
<span class="hidden sm:block text-sm text-gray-500">
|
|
{{ plugin.spec.version }}
|
|
</span>
|
|
<time class="text-sm text-gray-500" datetime="2020-01-07">
|
|
2020-01-07
|
|
</time>
|
|
<span class="cursor-pointer">
|
|
<IconSettings />
|
|
</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>
|
|
</template>
|