mirror of https://github.com/halo-dev/halo-admin
refactor: routes mapping and page views structure
Signed-off-by: Ryan Wang <i@ryanc.cc>pull/581/head
Ryan Wang
parent
f7a84d59c7
commit
f588385c7c
|
|
@ -31,7 +31,7 @@
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<main class="content w-full overflow-y-auto mb-safe pb-12 md:pb-0">
|
<main class="content w-full overflow-y-auto mb-safe pb-12 md:pb-0">
|
||||||
<slot />
|
<RouterView />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!--bottom nav bar-->
|
<!--bottom nav bar-->
|
||||||
|
|
@ -89,7 +89,7 @@ import { VModal } from "@/components/base/modal";
|
||||||
import { menus, minimenus } from "@/router/menus.config";
|
import { menus, minimenus } from "@/router/menus.config";
|
||||||
import logo from "@/assets/logo.svg";
|
import logo from "@/assets/logo.svg";
|
||||||
import { IconMore, IconUserSettings } from "@/core/icons";
|
import { IconMore, IconUserSettings } from "@/core/icons";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter, RouterView } from "vue-router";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ export const menus: MenuGroupType[] = [
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
name: "仪表盘",
|
name: "仪表盘",
|
||||||
path: "/",
|
path: "/dashboard",
|
||||||
icon: IconDashboard,
|
icon: IconDashboard,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -51,12 +51,12 @@ export const menus: MenuGroupType[] = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "评论",
|
name: "评论",
|
||||||
path: "/comment",
|
path: "/comments",
|
||||||
icon: IconMessage,
|
icon: IconMessage,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "附件",
|
name: "附件",
|
||||||
path: "/attachment",
|
path: "/attachments",
|
||||||
icon: IconFolder,
|
icon: IconFolder,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -91,7 +91,7 @@ export const menus: MenuGroupType[] = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "用户",
|
name: "用户",
|
||||||
path: "/users",
|
path: "/users/profile",
|
||||||
icon: IconUserSettings,
|
icon: IconUserSettings,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -116,17 +116,17 @@ export const minimenus: MenuItemType[] = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "评论",
|
name: "评论",
|
||||||
path: "/comment",
|
path: "/comments",
|
||||||
icon: IconMessage,
|
icon: IconMessage,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "附件",
|
name: "附件",
|
||||||
path: "/attachment",
|
path: "/attachments",
|
||||||
icon: IconFolder,
|
icon: IconFolder,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "用户",
|
name: "用户",
|
||||||
path: "/users",
|
path: "/users/profile",
|
||||||
icon: IconUserSettings,
|
icon: IconUserSettings,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,180 @@
|
||||||
import type { RouteRecordRaw } from "vue-router";
|
import type { RouteRecordRaw } from "vue-router";
|
||||||
import HomeView from "../views/HomeView.vue";
|
import { BasicLayout, BlankLayout } from "@/layouts";
|
||||||
import AboutView from "../views/AboutView.vue";
|
|
||||||
import PostList from "../views/posts/PostList.vue";
|
import Dashboard from "../views/dashboard/Dashboard.vue";
|
||||||
import PageList from "../views/posts/PageList.vue";
|
|
||||||
import Profile from "../views/users/Profile.vue";
|
import PostList from "../views/contents/posts/PostList.vue";
|
||||||
import Themes from "../views/interface/Themes.vue";
|
import PostEditor from "../views/contents/posts/PostEditor.vue";
|
||||||
import Attachments from "../views/attachments/Attachments.vue";
|
import SheetList from "../views/contents/sheets/SheetList.vue";
|
||||||
|
import CategoryList from "../views/contents/posts/categories/CategoryList.vue";
|
||||||
|
import TagList from "../views/contents/posts/tags/TagList.vue";
|
||||||
|
import CommentList from "../views/contents/comments/CommentList.vue";
|
||||||
|
import AttachmentList from "../views/contents/attachments/AttachmentList.vue";
|
||||||
|
|
||||||
|
import ThemeList from "../views/interface/themes/ThemeList.vue";
|
||||||
|
import MenuList from "../views/interface/menus/MenuList.vue";
|
||||||
|
import Visual from "../views/interface/visual/Visual.vue";
|
||||||
|
|
||||||
|
import PluginList from "../views/system/plugins/PluginList.vue";
|
||||||
|
import UserList from "../views/system/users/UserList.vue";
|
||||||
|
import Profile from "../views/system/users/Profile.vue";
|
||||||
|
import Settings from "../views/system/settings/Settings.vue";
|
||||||
|
|
||||||
export const routes: Array<RouteRecordRaw> = [
|
export const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "Dashboard",
|
component: BasicLayout,
|
||||||
component: HomeView,
|
redirect: "/dashboard",
|
||||||
},
|
children: [
|
||||||
{
|
{
|
||||||
path: "/about",
|
path: "dashboard",
|
||||||
name: "about",
|
name: "Dashboard",
|
||||||
component: AboutView,
|
component: Dashboard,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/posts",
|
path: "/posts",
|
||||||
name: "Posts",
|
component: BasicLayout,
|
||||||
component: PostList,
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/posts/categories",
|
path: "",
|
||||||
name: "Categories",
|
name: "Posts",
|
||||||
component: AboutView,
|
component: PostList,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/posts/tags",
|
path: "editor",
|
||||||
|
name: "PostEditor",
|
||||||
|
component: PostEditor,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "categories",
|
||||||
|
component: BlankLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "Categories",
|
||||||
|
component: CategoryList,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "tags",
|
||||||
|
component: BlankLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
name: "Tags",
|
name: "Tags",
|
||||||
component: AboutView,
|
component: TagList,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/sheets",
|
path: "/sheets",
|
||||||
|
component: BasicLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
name: "Sheets",
|
name: "Sheets",
|
||||||
component: PageList,
|
component: SheetList,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/comment",
|
path: "/comments",
|
||||||
name: "Comment",
|
component: BasicLayout,
|
||||||
component: AboutView,
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "Comments",
|
||||||
|
component: CommentList,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/attachment",
|
path: "/attachments",
|
||||||
name: "Attachment",
|
component: BasicLayout,
|
||||||
component: Attachments,
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "Attachments",
|
||||||
|
component: AttachmentList,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/themes",
|
path: "/themes",
|
||||||
|
component: BasicLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
name: "Themes",
|
name: "Themes",
|
||||||
component: Themes,
|
component: ThemeList,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/menus",
|
path: "/menus",
|
||||||
|
component: BasicLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
name: "Menus",
|
name: "Menus",
|
||||||
component: AboutView,
|
component: MenuList,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/visual",
|
path: "/visual",
|
||||||
|
component: BasicLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
name: "Visual",
|
name: "Visual",
|
||||||
component: AboutView,
|
component: Visual,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/plugins",
|
path: "/plugins",
|
||||||
|
component: BasicLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
name: "Plugins",
|
name: "Plugins",
|
||||||
component: AboutView,
|
component: PluginList,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/users",
|
path: "/users",
|
||||||
|
component: BasicLayout,
|
||||||
|
redirect: "/users/profile",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
name: "Users",
|
name: "Users",
|
||||||
|
component: UserList,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "profile",
|
||||||
|
name: "Profile",
|
||||||
component: Profile,
|
component: Profile,
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/settings",
|
path: "/settings",
|
||||||
|
component: BasicLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
name: "Settings",
|
name: "Settings",
|
||||||
component: AboutView,
|
component: Settings,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import { BasicLayout } from "@/layouts";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<BasicLayout>
|
|
||||||
<div>
|
|
||||||
<pre class="overflow-auto">Route: {{ route }}</pre>
|
|
||||||
<pre class="overflow-auto">Route: {{ route }}</pre>
|
|
||||||
</div>
|
|
||||||
</BasicLayout>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<template>
|
|
||||||
<BasicLayout>
|
|
||||||
<VPageHeader title="仪表盘">
|
|
||||||
<template #icon>
|
|
||||||
<IconDashboard class="self-center mr-2" />
|
|
||||||
</template>
|
|
||||||
<template #actions>
|
|
||||||
<VButton type="secondary"> 设置</VButton>
|
|
||||||
</template>
|
|
||||||
</VPageHeader>
|
|
||||||
|
|
||||||
<div class="m-4">
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
|
|
||||||
<div>
|
|
||||||
<dl class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
||||||
<VCard>
|
|
||||||
<dt class="text-sm font-medium text-gray-500 truncate">文章</dt>
|
|
||||||
<dd class="mt-1 text-3xl font-semibold text-gray-900">231</dd>
|
|
||||||
</VCard>
|
|
||||||
<VCard>
|
|
||||||
<dt class="text-sm font-medium text-gray-500 truncate">用户</dt>
|
|
||||||
<dd class="mt-1 text-3xl font-semibold text-gray-900">10</dd>
|
|
||||||
</VCard>
|
|
||||||
<VCard>
|
|
||||||
<dt class="text-sm font-medium text-gray-500 truncate">评论</dt>
|
|
||||||
<dd class="mt-1 text-3xl font-semibold text-gray-900">1423</dd>
|
|
||||||
</VCard>
|
|
||||||
<VCard>
|
|
||||||
<dt class="text-sm font-medium text-gray-500 truncate">访问量</dt>
|
|
||||||
<dd class="mt-1 text-3xl font-semibold text-gray-900">1232</dd>
|
|
||||||
</VCard>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<VCard title="快速操作">
|
|
||||||
<ul></ul>
|
|
||||||
</VCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</BasicLayout>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { BasicLayout } from "@/layouts";
|
|
||||||
import { VButton } from "@/components/base/button";
|
|
||||||
import { VCard } from "@/components/base/card";
|
|
||||||
import { VPageHeader } from "@/components/base/header";
|
|
||||||
import { IconDashboard } from "@/core/icons";
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import { BasicLayout } from "@/layouts";
|
|
||||||
import { VPageHeader } from "@/components/base/header";
|
|
||||||
import { VButton } from "@/components/base/button";
|
|
||||||
import { IconPalette } from "@/core/icons";
|
|
||||||
import { VCard } from "@/components/base/card";
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<BasicLayout>
|
|
||||||
<VPageHeader title="附件库">
|
|
||||||
<template #icon>
|
|
||||||
<IconPalette class="self-center mr-2" />
|
|
||||||
</template>
|
|
||||||
<template #actions>
|
|
||||||
<VButton type="secondary">上传</VButton>
|
|
||||||
</template>
|
|
||||||
</VPageHeader>
|
|
||||||
|
|
||||||
<div class="m-4">
|
|
||||||
<ul
|
|
||||||
class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
|
|
||||||
role="list"
|
|
||||||
>
|
|
||||||
<li v-for="i in 40" :key="i" 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}`"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
{{ i * 100 }}
|
|
||||||
</p>
|
|
||||||
</VCard>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</BasicLayout>
|
|
||||||
</template>
|
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { VPageHeader } from "@/components/base/header";
|
||||||
|
import { VButton } from "@/components/base/button";
|
||||||
|
import { IconPalette } from "@/core/icons";
|
||||||
|
import { VCard } from "@/components/base/card";
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VPageHeader title="附件库">
|
||||||
|
<template #icon>
|
||||||
|
<IconPalette class="self-center mr-2" />
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<VButton type="secondary">上传</VButton>
|
||||||
|
</template>
|
||||||
|
</VPageHeader>
|
||||||
|
|
||||||
|
<div class="m-4">
|
||||||
|
<ul
|
||||||
|
class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
|
||||||
|
role="list"
|
||||||
|
>
|
||||||
|
<li v-for="i in 40" :key="i" 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}`"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
{{ i * 100 }}
|
||||||
|
</p>
|
||||||
|
</VCard>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>Comments</template>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>Post Editor</template>
|
||||||
|
|
@ -0,0 +1,256 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { VButton } from "@/components/base/button";
|
||||||
|
import { VCard } from "@/components/base/card";
|
||||||
|
import { VSpace } from "@/components/base/space";
|
||||||
|
import { VTag } from "@/components/base/tag";
|
||||||
|
import { VInput } from "@/components/base/input";
|
||||||
|
import { VPageHeader } from "@/components/base/header";
|
||||||
|
import { IconBookRead, IconSettings } from "@/core/icons";
|
||||||
|
import { posts } from "./posts-mock";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const postsRef = ref(
|
||||||
|
posts.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
checked: false,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkAll = ref(false);
|
||||||
|
|
||||||
|
const handleCheckAll = () => {
|
||||||
|
postsRef.value.forEach((item) => {
|
||||||
|
item.checked = checkAll.value;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
handleCheckAll();
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VPageHeader title="文章">
|
||||||
|
<template #icon>
|
||||||
|
<IconBookRead class="self-center mr-2" />
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<VButton type="secondary">发布</VButton>
|
||||||
|
</template>
|
||||||
|
</VPageHeader>
|
||||||
|
|
||||||
|
<div class="m-0 md:m-4">
|
||||||
|
<VCard :body-class="['!p-0']">
|
||||||
|
<template #header>
|
||||||
|
<div
|
||||||
|
class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
|
||||||
|
>
|
||||||
|
<div class="flex-1">
|
||||||
|
<VInput placeholder="输入关键词搜索" />
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row gap-3">
|
||||||
|
<div>分类</div>
|
||||||
|
<div>标签</div>
|
||||||
|
<div>作者</div>
|
||||||
|
<div>排序</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
|
||||||
|
<li v-for="(post, index) in postsRef" :key="index">
|
||||||
|
<div
|
||||||
|
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row items-center relative">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
{{ post.title }}
|
||||||
|
</span>
|
||||||
|
<VSpace class="mt-1 sm:mt-0">
|
||||||
|
<VTag v-for="(tag, tagIndex) in post.tags" :key="tagIndex">
|
||||||
|
{{ tag.name }}
|
||||||
|
</VTag>
|
||||||
|
</VSpace>
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-1">
|
||||||
|
<VSpace>
|
||||||
|
<span class="text-xs text-gray-500"
|
||||||
|
>阅读 {{ post.visits }}</span
|
||||||
|
>
|
||||||
|
<span class="text-xs text-gray-500"
|
||||||
|
>评论 {{ post.commentCount }}</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>
|
||||||
|
<IconSettings />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="bg-white flex items-center justify-between">
|
||||||
|
<div class="flex-1 flex justify-between sm:hidden">
|
||||||
|
<a
|
||||||
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-700">
|
||||||
|
Showing
|
||||||
|
<span class="font-medium">1</span>
|
||||||
|
to
|
||||||
|
<span class="font-medium">10</span>
|
||||||
|
of
|
||||||
|
<span class="font-medium">97</span>
|
||||||
|
results
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<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="#"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</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="#"
|
||||||
|
>
|
||||||
|
8
|
||||||
|
</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="#"
|
||||||
|
>
|
||||||
|
9
|
||||||
|
</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="#"
|
||||||
|
>
|
||||||
|
10
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.table-container {
|
||||||
|
@apply table;
|
||||||
|
@apply w-full;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.table-item {
|
||||||
|
@apply table-row;
|
||||||
|
@apply cursor-pointer;
|
||||||
|
@apply transition-all;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply bg-gray-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>Categories</template>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>Tags</template>
|
||||||
|
|
@ -0,0 +1,256 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { VButton } from "@/components/base/button";
|
||||||
|
import { VCard } from "@/components/base/card";
|
||||||
|
import { VSpace } from "@/components/base/space";
|
||||||
|
import { VTag } from "@/components/base/tag";
|
||||||
|
import { VInput } from "@/components/base/input";
|
||||||
|
import { VPageHeader } from "@/components/base/header";
|
||||||
|
import { IconPages, IconSettings } from "@/core/icons";
|
||||||
|
import { posts } from "../posts/posts-mock";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const postsRef = ref(
|
||||||
|
posts.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
checked: false,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkAll = ref(false);
|
||||||
|
|
||||||
|
const handleCheckAll = () => {
|
||||||
|
postsRef.value.forEach((item) => {
|
||||||
|
item.checked = checkAll.value;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
handleCheckAll();
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VPageHeader title="页面">
|
||||||
|
<template #icon>
|
||||||
|
<IconPages class="self-center mr-2" />
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<VButton type="secondary">发布</VButton>
|
||||||
|
</template>
|
||||||
|
</VPageHeader>
|
||||||
|
|
||||||
|
<div class="m-0 md:m-4">
|
||||||
|
<VCard :body-class="['!p-0']">
|
||||||
|
<template #header>
|
||||||
|
<div
|
||||||
|
class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
|
||||||
|
>
|
||||||
|
<div class="flex-1">
|
||||||
|
<VInput placeholder="输入关键词搜索" />
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row gap-3">
|
||||||
|
<div>分类</div>
|
||||||
|
<div>标签</div>
|
||||||
|
<div>作者</div>
|
||||||
|
<div>排序</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
|
||||||
|
<li v-for="(post, index) in postsRef" :key="index">
|
||||||
|
<div
|
||||||
|
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row items-center relative">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
{{ post.title }}
|
||||||
|
</span>
|
||||||
|
<VSpace class="mt-1 sm:mt-0">
|
||||||
|
<VTag v-for="(tag, tagIndex) in post.tags" :key="tagIndex">
|
||||||
|
{{ tag.name }}
|
||||||
|
</VTag>
|
||||||
|
</VSpace>
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-1">
|
||||||
|
<VSpace>
|
||||||
|
<span class="text-xs text-gray-500"
|
||||||
|
>阅读 {{ post.visits }}</span
|
||||||
|
>
|
||||||
|
<span class="text-xs text-gray-500"
|
||||||
|
>评论 {{ post.commentCount }}</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>
|
||||||
|
<IconSettings />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="bg-white flex items-center justify-between">
|
||||||
|
<div class="flex-1 flex justify-between sm:hidden">
|
||||||
|
<a
|
||||||
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-700">
|
||||||
|
Showing
|
||||||
|
<span class="font-medium">1</span>
|
||||||
|
to
|
||||||
|
<span class="font-medium">10</span>
|
||||||
|
of
|
||||||
|
<span class="font-medium">97</span>
|
||||||
|
results
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<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="#"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</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="#"
|
||||||
|
>
|
||||||
|
8
|
||||||
|
</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="#"
|
||||||
|
>
|
||||||
|
9
|
||||||
|
</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="#"
|
||||||
|
>
|
||||||
|
10
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.table-container {
|
||||||
|
@apply table;
|
||||||
|
@apply w-full;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.table-item {
|
||||||
|
@apply table-row;
|
||||||
|
@apply cursor-pointer;
|
||||||
|
@apply transition-all;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply bg-gray-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<VPageHeader title="仪表盘">
|
||||||
|
<template #icon>
|
||||||
|
<IconDashboard class="self-center mr-2" />
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<VButton type="secondary"> 设置</VButton>
|
||||||
|
</template>
|
||||||
|
</VPageHeader>
|
||||||
|
|
||||||
|
<div class="m-4">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
|
||||||
|
<div>
|
||||||
|
<dl class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||||
|
<VCard>
|
||||||
|
<dt class="text-sm font-medium text-gray-500 truncate">文章</dt>
|
||||||
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">231</dd>
|
||||||
|
</VCard>
|
||||||
|
<VCard>
|
||||||
|
<dt class="text-sm font-medium text-gray-500 truncate">用户</dt>
|
||||||
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">10</dd>
|
||||||
|
</VCard>
|
||||||
|
<VCard>
|
||||||
|
<dt class="text-sm font-medium text-gray-500 truncate">评论</dt>
|
||||||
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">1423</dd>
|
||||||
|
</VCard>
|
||||||
|
<VCard>
|
||||||
|
<dt class="text-sm font-medium text-gray-500 truncate">访问量</dt>
|
||||||
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">1232</dd>
|
||||||
|
</VCard>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<VCard title="快速操作">
|
||||||
|
<ul></ul>
|
||||||
|
</VCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { VButton } from "@/components/base/button";
|
||||||
|
import { VCard } from "@/components/base/card";
|
||||||
|
import { VPageHeader } from "@/components/base/header";
|
||||||
|
import { IconDashboard } from "@/core/icons";
|
||||||
|
</script>
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import { BasicLayout } from "@/layouts";
|
|
||||||
import { VPageHeader } from "@/components/base/header";
|
|
||||||
import { VButton } from "@/components/base/button";
|
|
||||||
import { VCard } from "@/components/base/card";
|
|
||||||
import { IconPalette } from "@/core/icons";
|
|
||||||
import { themes } from "@/views/interface/themes-mock";
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<BasicLayout>
|
|
||||||
<VPageHeader title="主题">
|
|
||||||
<template #icon>
|
|
||||||
<IconPalette class="self-center mr-2" />
|
|
||||||
</template>
|
|
||||||
<template #actions>
|
|
||||||
<VButton type="secondary">安装</VButton>
|
|
||||||
</template>
|
|
||||||
</VPageHeader>
|
|
||||||
|
|
||||||
<div class="m-4">
|
|
||||||
<ul
|
|
||||||
class="grid grid-cols-1 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
|
|
||||||
role="list"
|
|
||||||
>
|
|
||||||
<li v-for="(theme, index) in themes" :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="theme.screenshots"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
{{ theme.name }}
|
|
||||||
</p>
|
|
||||||
</VCard>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</BasicLayout>
|
|
||||||
</template>
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>Menus</template>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { VPageHeader } from "@/components/base/header";
|
||||||
|
import { VButton } from "@/components/base/button";
|
||||||
|
import { VCard } from "@/components/base/card";
|
||||||
|
import { IconPalette } from "@/core/icons";
|
||||||
|
import { themes } from "@/views/interface/themes/themes-mock";
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VPageHeader title="主题">
|
||||||
|
<template #icon>
|
||||||
|
<IconPalette class="self-center mr-2" />
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<VButton type="secondary">安装</VButton>
|
||||||
|
</template>
|
||||||
|
</VPageHeader>
|
||||||
|
|
||||||
|
<div class="m-4">
|
||||||
|
<ul
|
||||||
|
class="grid grid-cols-1 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
|
||||||
|
role="list"
|
||||||
|
>
|
||||||
|
<li v-for="(theme, index) in themes" :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="theme.screenshots"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
{{ theme.name }}
|
||||||
|
</p>
|
||||||
|
</VCard>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>Visual</template>
|
||||||
|
|
@ -1,265 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import BasicLayout from "@/layouts/BasicLayout.vue";
|
|
||||||
import { VButton } from "@/components/base/button";
|
|
||||||
import { VCard } from "@/components/base/card";
|
|
||||||
import { VSpace } from "@/components/base/space";
|
|
||||||
import { VTag } from "@/components/base/tag";
|
|
||||||
import { VInput } from "@/components/base/input";
|
|
||||||
import { VPageHeader } from "@/components/base/header";
|
|
||||||
import { IconPages, IconSettings } from "@/core/icons";
|
|
||||||
import { posts } from "./posts-mock";
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const postsRef = ref(
|
|
||||||
posts.map((item) => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
checked: false,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const checkAll = ref(false);
|
|
||||||
|
|
||||||
const handleCheckAll = () => {
|
|
||||||
postsRef.value.forEach((item) => {
|
|
||||||
item.checked = checkAll.value;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
handleCheckAll();
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<BasicLayout>
|
|
||||||
<VPageHeader title="页面">
|
|
||||||
<template #icon>
|
|
||||||
<IconPages class="self-center mr-2" />
|
|
||||||
</template>
|
|
||||||
<template #actions>
|
|
||||||
<VButton type="secondary">发布</VButton>
|
|
||||||
</template>
|
|
||||||
</VPageHeader>
|
|
||||||
|
|
||||||
<div class="m-0 md:m-4">
|
|
||||||
<VCard :body-class="['!p-0']">
|
|
||||||
<template #header>
|
|
||||||
<div
|
|
||||||
class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
|
|
||||||
>
|
|
||||||
<div class="flex-1">
|
|
||||||
<VInput placeholder="输入关键词搜索" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-row gap-3">
|
|
||||||
<div>分类</div>
|
|
||||||
<div>标签</div>
|
|
||||||
<div>作者</div>
|
|
||||||
<div>排序</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<ul
|
|
||||||
class="divide-y divide-gray-100 box-border w-full h-full"
|
|
||||||
role="list"
|
|
||||||
>
|
|
||||||
<li v-for="(post, index) in postsRef" :key="index">
|
|
||||||
<div
|
|
||||||
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all"
|
|
||||||
>
|
|
||||||
<div class="flex flex-row items-center relative">
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
{{ post.title }}
|
|
||||||
</span>
|
|
||||||
<VSpace class="mt-1 sm:mt-0">
|
|
||||||
<VTag
|
|
||||||
v-for="(tag, tagIndex) in post.tags"
|
|
||||||
:key="tagIndex"
|
|
||||||
>
|
|
||||||
{{ tag.name }}
|
|
||||||
</VTag>
|
|
||||||
</VSpace>
|
|
||||||
</div>
|
|
||||||
<div class="flex mt-1">
|
|
||||||
<VSpace>
|
|
||||||
<span class="text-xs text-gray-500"
|
|
||||||
>阅读 {{ post.visits }}</span
|
|
||||||
>
|
|
||||||
<span class="text-xs text-gray-500"
|
|
||||||
>评论 {{ post.commentCount }}</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>
|
|
||||||
<IconSettings />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<div class="bg-white flex items-center justify-between">
|
|
||||||
<div class="flex-1 flex justify-between sm:hidden">
|
|
||||||
<a
|
|
||||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
href="#"
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
href="#"
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm text-gray-700">
|
|
||||||
Showing
|
|
||||||
<span class="font-medium">1</span>
|
|
||||||
to
|
|
||||||
<span class="font-medium">10</span>
|
|
||||||
of
|
|
||||||
<span class="font-medium">97</span>
|
|
||||||
results
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
<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="#"
|
|
||||||
>
|
|
||||||
3
|
|
||||||
</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="#"
|
|
||||||
>
|
|
||||||
8
|
|
||||||
</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="#"
|
|
||||||
>
|
|
||||||
9
|
|
||||||
</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="#"
|
|
||||||
>
|
|
||||||
10
|
|
||||||
</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>
|
|
||||||
</BasicLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.table-container {
|
|
||||||
@apply table;
|
|
||||||
@apply w-full;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
.table-item {
|
|
||||||
@apply table-row;
|
|
||||||
@apply cursor-pointer;
|
|
||||||
@apply transition-all;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@apply bg-gray-100;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-cell {
|
|
||||||
display: table-cell;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,265 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import BasicLayout from "@/layouts/BasicLayout.vue";
|
|
||||||
import { VButton } from "@/components/base/button";
|
|
||||||
import { VCard } from "@/components/base/card";
|
|
||||||
import { VSpace } from "@/components/base/space";
|
|
||||||
import { VTag } from "@/components/base/tag";
|
|
||||||
import { VInput } from "@/components/base/input";
|
|
||||||
import { VPageHeader } from "@/components/base/header";
|
|
||||||
import { IconBookRead, IconSettings } from "@/core/icons";
|
|
||||||
import { posts } from "./posts-mock";
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const postsRef = ref(
|
|
||||||
posts.map((item) => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
checked: false,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const checkAll = ref(false);
|
|
||||||
|
|
||||||
const handleCheckAll = () => {
|
|
||||||
postsRef.value.forEach((item) => {
|
|
||||||
item.checked = checkAll.value;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
handleCheckAll();
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<BasicLayout>
|
|
||||||
<VPageHeader title="文章">
|
|
||||||
<template #icon>
|
|
||||||
<IconBookRead class="self-center mr-2" />
|
|
||||||
</template>
|
|
||||||
<template #actions>
|
|
||||||
<VButton type="secondary">发布</VButton>
|
|
||||||
</template>
|
|
||||||
</VPageHeader>
|
|
||||||
|
|
||||||
<div class="m-0 md:m-4">
|
|
||||||
<VCard :body-class="['!p-0']">
|
|
||||||
<template #header>
|
|
||||||
<div
|
|
||||||
class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
|
|
||||||
>
|
|
||||||
<div class="flex-1">
|
|
||||||
<VInput placeholder="输入关键词搜索" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-row gap-3">
|
|
||||||
<div>分类</div>
|
|
||||||
<div>标签</div>
|
|
||||||
<div>作者</div>
|
|
||||||
<div>排序</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<ul
|
|
||||||
class="divide-y divide-gray-100 box-border w-full h-full"
|
|
||||||
role="list"
|
|
||||||
>
|
|
||||||
<li v-for="(post, index) in postsRef" :key="index">
|
|
||||||
<div
|
|
||||||
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all"
|
|
||||||
>
|
|
||||||
<div class="flex flex-row items-center relative">
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
{{ post.title }}
|
|
||||||
</span>
|
|
||||||
<VSpace class="mt-1 sm:mt-0">
|
|
||||||
<VTag
|
|
||||||
v-for="(tag, tagIndex) in post.tags"
|
|
||||||
:key="tagIndex"
|
|
||||||
>
|
|
||||||
{{ tag.name }}
|
|
||||||
</VTag>
|
|
||||||
</VSpace>
|
|
||||||
</div>
|
|
||||||
<div class="flex mt-1">
|
|
||||||
<VSpace>
|
|
||||||
<span class="text-xs text-gray-500"
|
|
||||||
>阅读 {{ post.visits }}</span
|
|
||||||
>
|
|
||||||
<span class="text-xs text-gray-500"
|
|
||||||
>评论 {{ post.commentCount }}</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>
|
|
||||||
<IconSettings />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<div class="bg-white flex items-center justify-between">
|
|
||||||
<div class="flex-1 flex justify-between sm:hidden">
|
|
||||||
<a
|
|
||||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
href="#"
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
||||||
href="#"
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm text-gray-700">
|
|
||||||
Showing
|
|
||||||
<span class="font-medium">1</span>
|
|
||||||
to
|
|
||||||
<span class="font-medium">10</span>
|
|
||||||
of
|
|
||||||
<span class="font-medium">97</span>
|
|
||||||
results
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
<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="#"
|
|
||||||
>
|
|
||||||
3
|
|
||||||
</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="#"
|
|
||||||
>
|
|
||||||
8
|
|
||||||
</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="#"
|
|
||||||
>
|
|
||||||
9
|
|
||||||
</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="#"
|
|
||||||
>
|
|
||||||
10
|
|
||||||
</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>
|
|
||||||
</BasicLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.table-container {
|
|
||||||
@apply table;
|
|
||||||
@apply w-full;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
.table-item {
|
|
||||||
@apply table-row;
|
|
||||||
@apply cursor-pointer;
|
|
||||||
@apply transition-all;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@apply bg-gray-100;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-cell {
|
|
||||||
display: table-cell;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>Plugin</template>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>Settings</template>
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
<template>
|
||||||
|
<header class="bg-white">
|
||||||
|
<div class="h-48 bg-gradient-to-r from-gray-800 to-red-500"></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">
|
||||||
|
<img
|
||||||
|
alt="Avatar"
|
||||||
|
class="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32 drop-shadow-lg"
|
||||||
|
src="https://ryanc.cc/avatar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
|
||||||
|
>
|
||||||
|
<div class="block mt-6 min-w-0 flex-1">
|
||||||
|
<h1 class="text-xl font-bold text-gray-900 truncate">
|
||||||
|
<span class="mr-1">Ryan Wang</span>
|
||||||
|
<VTag theme="default">
|
||||||
|
<template #leftIcon>
|
||||||
|
<IconUserSettings />
|
||||||
|
</template>
|
||||||
|
管理员
|
||||||
|
</VTag>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="hidden mt-6 md:flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4"
|
||||||
|
>
|
||||||
|
<VButton type="default">退出登录</VButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section class="bg-white p-4 sm:px-6 lg:px-8">
|
||||||
|
<VTabs v-model:activeId="activeTab">
|
||||||
|
<VTabItem id="general" label="基本资料">
|
||||||
|
<form class="space-y-8 divide-y divide-gray-200">
|
||||||
|
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
|
||||||
|
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||||
|
<div
|
||||||
|
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
用户名
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="max-w-lg flex shadow-sm">
|
||||||
|
<VInput modelValue="ryanwang" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
昵称
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="max-w-lg flex shadow-sm">
|
||||||
|
<VInput modelValue="Ryan Wang" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
电子邮箱
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="max-w-lg flex shadow-sm">
|
||||||
|
<VInput modelValue="i@ryanc.cc" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
个人说明
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="max-w-lg flex shadow-sm">
|
||||||
|
<VTextarea modelValue="Halo" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-5">
|
||||||
|
<div class="flex justify-start">
|
||||||
|
<VButton type="secondary"> 保存</VButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</VTabItem>
|
||||||
|
<VTabItem id="password" label="密码">
|
||||||
|
<form class="space-y-8 divide-y divide-gray-200">
|
||||||
|
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
|
||||||
|
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||||
|
<div
|
||||||
|
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
原密码
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="max-w-lg flex shadow-sm">
|
||||||
|
<VInput />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
新密码
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="max-w-lg flex shadow-sm">
|
||||||
|
<VInput />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
确认密码
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="max-w-lg flex shadow-sm">
|
||||||
|
<VInput />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-5">
|
||||||
|
<div class="flex justify-start">
|
||||||
|
<VButton type="secondary">修改密码</VButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</VTabItem>
|
||||||
|
</VTabs>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { VButton } from "@/components/base/button";
|
||||||
|
import { VInput } from "@/components/base/input";
|
||||||
|
import { VTextarea } from "@/components/base/textarea";
|
||||||
|
import { VTag } from "@/components/base/tag";
|
||||||
|
import { VTabItem, VTabs } from "@/components/base/tabs";
|
||||||
|
import { IconUserSettings } from "@/core/icons";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const activeTab = ref("general");
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<template>User</template>
|
||||||
|
|
@ -1,182 +0,0 @@
|
||||||
<template>
|
|
||||||
<BasicLayout>
|
|
||||||
<header class="bg-white">
|
|
||||||
<div class="h-48 bg-gradient-to-r from-gray-800 to-red-500"></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">
|
|
||||||
<img
|
|
||||||
alt="Avatar"
|
|
||||||
class="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32 drop-shadow-lg"
|
|
||||||
src="https://ryanc.cc/avatar"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
|
|
||||||
>
|
|
||||||
<div class="block mt-6 min-w-0 flex-1">
|
|
||||||
<h1 class="text-xl font-bold text-gray-900 truncate">
|
|
||||||
<span class="mr-1">Ryan Wang</span>
|
|
||||||
<VTag theme="default">
|
|
||||||
<template #leftIcon>
|
|
||||||
<IconUserSettings />
|
|
||||||
</template>
|
|
||||||
管理员
|
|
||||||
</VTag>
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="hidden mt-6 md:flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4"
|
|
||||||
>
|
|
||||||
<VButton type="default">退出登录</VButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<section class="bg-white p-4 sm:px-6 lg:px-8">
|
|
||||||
<VTabs v-model:activeId="activeTab">
|
|
||||||
<VTabItem id="general" label="基本资料">
|
|
||||||
<form class="space-y-8 divide-y divide-gray-200">
|
|
||||||
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
|
|
||||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
|
||||||
<div
|
|
||||||
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
|
||||||
>
|
|
||||||
用户名
|
|
||||||
</label>
|
|
||||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
|
||||||
<div class="max-w-lg flex shadow-sm">
|
|
||||||
<VInput modelValue="ryanwang" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
|
||||||
>
|
|
||||||
昵称
|
|
||||||
</label>
|
|
||||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
|
||||||
<div class="max-w-lg flex shadow-sm">
|
|
||||||
<VInput modelValue="Ryan Wang" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
|
||||||
>
|
|
||||||
电子邮箱
|
|
||||||
</label>
|
|
||||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
|
||||||
<div class="max-w-lg flex shadow-sm">
|
|
||||||
<VInput modelValue="i@ryanc.cc" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
|
||||||
>
|
|
||||||
个人说明
|
|
||||||
</label>
|
|
||||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
|
||||||
<div class="max-w-lg flex shadow-sm">
|
|
||||||
<VTextarea modelValue="Halo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pt-5">
|
|
||||||
<div class="flex justify-start">
|
|
||||||
<VButton type="secondary"> 保存</VButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</VTabItem>
|
|
||||||
<VTabItem id="password" label="密码">
|
|
||||||
<form class="space-y-8 divide-y divide-gray-200">
|
|
||||||
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
|
|
||||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
|
||||||
<div
|
|
||||||
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
|
||||||
>
|
|
||||||
原密码
|
|
||||||
</label>
|
|
||||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
|
||||||
<div class="max-w-lg flex shadow-sm">
|
|
||||||
<VInput />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
|
||||||
>
|
|
||||||
新密码
|
|
||||||
</label>
|
|
||||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
|
||||||
<div class="max-w-lg flex shadow-sm">
|
|
||||||
<VInput />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
|
||||||
>
|
|
||||||
确认密码
|
|
||||||
</label>
|
|
||||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
|
||||||
<div class="max-w-lg flex shadow-sm">
|
|
||||||
<VInput />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pt-5">
|
|
||||||
<div class="flex justify-start">
|
|
||||||
<VButton type="secondary">修改密码</VButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</VTabItem>
|
|
||||||
</VTabs>
|
|
||||||
</section>
|
|
||||||
</BasicLayout>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { BasicLayout } from "@/layouts";
|
|
||||||
import { VButton } from "@/components/base/button";
|
|
||||||
import { VInput } from "@/components/base/input";
|
|
||||||
import { VTextarea } from "@/components/base/textarea";
|
|
||||||
import { VTag } from "@/components/base/tag";
|
|
||||||
import { VTabItem, VTabs } from "@/components/base/tabs";
|
|
||||||
import { IconUserSettings } from "@/core/icons";
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const activeTab = ref("general");
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue