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>
|
||||
</aside>
|
||||
<main class="content w-full overflow-y-auto mb-safe pb-12 md:pb-0">
|
||||
<slot />
|
||||
<RouterView />
|
||||
</main>
|
||||
|
||||
<!--bottom nav bar-->
|
||||
|
|
@ -89,7 +89,7 @@ import { VModal } from "@/components/base/modal";
|
|||
import { menus, minimenus } from "@/router/menus.config";
|
||||
import logo from "@/assets/logo.svg";
|
||||
import { IconMore, IconUserSettings } from "@/core/icons";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useRoute, useRouter, RouterView } from "vue-router";
|
||||
import { ref } from "vue";
|
||||
|
||||
const route = useRoute();
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const menus: MenuGroupType[] = [
|
|||
items: [
|
||||
{
|
||||
name: "仪表盘",
|
||||
path: "/",
|
||||
path: "/dashboard",
|
||||
icon: IconDashboard,
|
||||
},
|
||||
],
|
||||
|
|
@ -51,12 +51,12 @@ export const menus: MenuGroupType[] = [
|
|||
},
|
||||
{
|
||||
name: "评论",
|
||||
path: "/comment",
|
||||
path: "/comments",
|
||||
icon: IconMessage,
|
||||
},
|
||||
{
|
||||
name: "附件",
|
||||
path: "/attachment",
|
||||
path: "/attachments",
|
||||
icon: IconFolder,
|
||||
},
|
||||
],
|
||||
|
|
@ -91,7 +91,7 @@ export const menus: MenuGroupType[] = [
|
|||
},
|
||||
{
|
||||
name: "用户",
|
||||
path: "/users",
|
||||
path: "/users/profile",
|
||||
icon: IconUserSettings,
|
||||
},
|
||||
{
|
||||
|
|
@ -116,17 +116,17 @@ export const minimenus: MenuItemType[] = [
|
|||
},
|
||||
{
|
||||
name: "评论",
|
||||
path: "/comment",
|
||||
path: "/comments",
|
||||
icon: IconMessage,
|
||||
},
|
||||
{
|
||||
name: "附件",
|
||||
path: "/attachment",
|
||||
path: "/attachments",
|
||||
icon: IconFolder,
|
||||
},
|
||||
{
|
||||
name: "用户",
|
||||
path: "/users",
|
||||
path: "/users/profile",
|
||||
icon: IconUserSettings,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,84 +1,180 @@
|
|||
import type { RouteRecordRaw } from "vue-router";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
import AboutView from "../views/AboutView.vue";
|
||||
import PostList from "../views/posts/PostList.vue";
|
||||
import PageList from "../views/posts/PageList.vue";
|
||||
import Profile from "../views/users/Profile.vue";
|
||||
import Themes from "../views/interface/Themes.vue";
|
||||
import Attachments from "../views/attachments/Attachments.vue";
|
||||
import { BasicLayout, BlankLayout } from "@/layouts";
|
||||
|
||||
import Dashboard from "../views/dashboard/Dashboard.vue";
|
||||
|
||||
import PostList from "../views/contents/posts/PostList.vue";
|
||||
import PostEditor from "../views/contents/posts/PostEditor.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> = [
|
||||
{
|
||||
path: "/",
|
||||
name: "Dashboard",
|
||||
component: HomeView,
|
||||
},
|
||||
component: BasicLayout,
|
||||
redirect: "/dashboard",
|
||||
children: [
|
||||
{
|
||||
path: "/about",
|
||||
name: "about",
|
||||
component: AboutView,
|
||||
path: "dashboard",
|
||||
name: "Dashboard",
|
||||
component: Dashboard,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/posts",
|
||||
name: "Posts",
|
||||
component: PostList,
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "/posts/categories",
|
||||
name: "Categories",
|
||||
component: AboutView,
|
||||
path: "",
|
||||
name: "Posts",
|
||||
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",
|
||||
component: AboutView,
|
||||
component: TagList,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/sheets",
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Sheets",
|
||||
component: PageList,
|
||||
component: SheetList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/comment",
|
||||
name: "Comment",
|
||||
component: AboutView,
|
||||
path: "/comments",
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Comments",
|
||||
component: CommentList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/attachment",
|
||||
name: "Attachment",
|
||||
component: Attachments,
|
||||
path: "/attachments",
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Attachments",
|
||||
component: AttachmentList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/themes",
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Themes",
|
||||
component: Themes,
|
||||
component: ThemeList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/menus",
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Menus",
|
||||
component: AboutView,
|
||||
component: MenuList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/visual",
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Visual",
|
||||
component: AboutView,
|
||||
component: Visual,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/plugins",
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Plugins",
|
||||
component: AboutView,
|
||||
component: PluginList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/users",
|
||||
component: BasicLayout,
|
||||
redirect: "/users/profile",
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Users",
|
||||
component: UserList,
|
||||
},
|
||||
{
|
||||
path: "profile",
|
||||
name: "Profile",
|
||||
component: Profile,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/settings",
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
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