mirror of https://github.com/halo-dev/halo-admin
Ryan Wang
parent
2d83455fb6
commit
87642a5698
|
|
@ -1 +1,171 @@
|
||||||
<template>Menus</template>
|
<script lang="ts" setup>
|
||||||
|
import { VPageHeader } from "@/components/base/header";
|
||||||
|
import { VButton } from "@/components/base/button";
|
||||||
|
import { VTag } from "@/components/base/tag";
|
||||||
|
import { VSpace } from "@/components/base/space";
|
||||||
|
import { VCard } from "@/components/base/card";
|
||||||
|
import { VMenu, VMenuItem } from "@/components/base/menu";
|
||||||
|
import { IconDeleteBin, IconListSettings } from "@/core/icons";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const menus = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "首页",
|
||||||
|
url: "https://halo.run",
|
||||||
|
priority: 0,
|
||||||
|
target: "_self",
|
||||||
|
icon: "",
|
||||||
|
parentId: 0,
|
||||||
|
team: "main",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "官方文档",
|
||||||
|
url: "https://docs.halo.run",
|
||||||
|
priority: 1,
|
||||||
|
target: "_blank",
|
||||||
|
icon: "",
|
||||||
|
parentId: 0,
|
||||||
|
team: "main",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "主题仓库",
|
||||||
|
url: "/themes.html",
|
||||||
|
priority: 2,
|
||||||
|
target: "_self",
|
||||||
|
icon: "",
|
||||||
|
parentId: 0,
|
||||||
|
team: "main",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 36,
|
||||||
|
name: "博客",
|
||||||
|
url: "/blog.html",
|
||||||
|
priority: 3,
|
||||||
|
target: "_self",
|
||||||
|
icon: "",
|
||||||
|
parentId: 0,
|
||||||
|
team: "main",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 40,
|
||||||
|
name: "论坛",
|
||||||
|
url: "https://bbs.halo.run",
|
||||||
|
priority: 4,
|
||||||
|
target: "_blank",
|
||||||
|
icon: "",
|
||||||
|
parentId: 0,
|
||||||
|
team: "main",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 168,
|
||||||
|
name: "在线体验",
|
||||||
|
url: "https://docs.halo.run/#%E5%9C%A8%E7%BA%BF%E4%BD%93%E9%AA%8C",
|
||||||
|
priority: 5,
|
||||||
|
target: "_blank",
|
||||||
|
icon: "",
|
||||||
|
parentId: 0,
|
||||||
|
team: "main",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VPageHeader title="菜单">
|
||||||
|
<template #icon>
|
||||||
|
<IconListSettings class="self-center mr-2" />
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<VButton type="secondary">重建索引</VButton>
|
||||||
|
</template>
|
||||||
|
</VPageHeader>
|
||||||
|
<div class="m-0 md:m-4">
|
||||||
|
<div class="flex-col flex sm:flex-row gap-4">
|
||||||
|
<div class="w-full sm:w-96">
|
||||||
|
<VCard title="分组">
|
||||||
|
<VMenu class="!p-0">
|
||||||
|
<VMenuItem id="default" active title="未分组"></VMenuItem>
|
||||||
|
<VMenuItem id="community" title="社区"></VMenuItem>
|
||||||
|
</VMenu>
|
||||||
|
<template #footer>
|
||||||
|
<VButton block type="secondary">新增</VButton>
|
||||||
|
</template>
|
||||||
|
</VCard>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<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="w-full sm:w-auto flex flex-1">
|
||||||
|
<span class="text-base font-medium">未分组</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 sm:mt-0 flex">
|
||||||
|
<VSpace>
|
||||||
|
<VButton size="xs" type="primary">保存</VButton>
|
||||||
|
<VButton size="xs" type="default">新增</VButton>
|
||||||
|
</VSpace>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<ul
|
||||||
|
class="divide-y divide-gray-100 box-border w-full h-full"
|
||||||
|
role="list"
|
||||||
|
>
|
||||||
|
<li v-for="(menu, index) in menus" :key="index">
|
||||||
|
<div
|
||||||
|
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row items-center relative">
|
||||||
|
<div class="hidden mr-4 sm:flex items-center cursor-move">
|
||||||
|
<IconListSettings />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<span
|
||||||
|
class="mr-2 text-sm font-medium truncate text-gray-900"
|
||||||
|
>
|
||||||
|
{{ menu.name }}
|
||||||
|
</span>
|
||||||
|
<VTag class="sm:hidden">asd</VTag>
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-1">
|
||||||
|
<VSpace align="start" direction="column" spacing="xs">
|
||||||
|
<a
|
||||||
|
:href="menu.url"
|
||||||
|
class="text-xs text-gray-500 hover:text-gray-900"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{{ menu.url }}
|
||||||
|
</a>
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<span class="cursor-pointer text-sm hover:text-red-600">
|
||||||
|
<IconDeleteBin />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</VCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue