From f588385c7cb6f655293e10b07d1fc75b4cad0b26 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 12 May 2022 15:28:21 +0800
Subject: [PATCH] refactor: routes mapping and page views structure

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/layouts/BasicLayout.vue                   |   4 +-
 src/router/menus.config.ts                    |  14 +-
 src/router/routes.config.ts                   | 180 +++++++++---
 src/views/AboutView.vue                       |  15 -
 src/views/HomeView.vue                        |  49 ----
 src/views/attachments/Attachments.vue         |  45 ---
 .../contents/attachments/AttachmentList.vue   |  42 +++
 src/views/contents/comments/CommentList.vue   |   1 +
 src/views/contents/posts/PostEditor.vue       |   1 +
 src/views/contents/posts/PostList.vue         | 256 +++++++++++++++++
 .../posts/categories/CategoryList.vue         |   1 +
 src/views/{ => contents}/posts/posts-mock.ts  |   0
 src/views/contents/posts/tags/TagList.vue     |   1 +
 src/views/contents/sheets/SheetList.vue       | 256 +++++++++++++++++
 src/views/dashboard/Dashboard.vue             |  46 +++
 src/views/interface/Themes.vue                |  46 ---
 src/views/interface/menus/MenuList.vue        |   1 +
 src/views/interface/themes/ThemeList.vue      |  43 +++
 .../interface/{ => themes}/themes-mock.ts     |   0
 src/views/interface/visual/Visual.vue         |   1 +
 src/views/posts/PageList.vue                  | 265 ------------------
 src/views/posts/PostList.vue                  | 265 ------------------
 src/views/system/plugins/PluginList.vue       |   1 +
 src/views/system/settings/Settings.vue        |   1 +
 src/views/system/users/Profile.vue            | 179 ++++++++++++
 src/views/system/users/UserList.vue           |   1 +
 src/views/users/Profile.vue                   | 182 ------------
 27 files changed, 978 insertions(+), 918 deletions(-)
 delete mode 100644 src/views/AboutView.vue
 delete mode 100644 src/views/HomeView.vue
 delete mode 100644 src/views/attachments/Attachments.vue
 create mode 100644 src/views/contents/attachments/AttachmentList.vue
 create mode 100644 src/views/contents/comments/CommentList.vue
 create mode 100644 src/views/contents/posts/PostEditor.vue
 create mode 100644 src/views/contents/posts/PostList.vue
 create mode 100644 src/views/contents/posts/categories/CategoryList.vue
 rename src/views/{ => contents}/posts/posts-mock.ts (100%)
 create mode 100644 src/views/contents/posts/tags/TagList.vue
 create mode 100644 src/views/contents/sheets/SheetList.vue
 create mode 100644 src/views/dashboard/Dashboard.vue
 delete mode 100644 src/views/interface/Themes.vue
 create mode 100644 src/views/interface/menus/MenuList.vue
 create mode 100644 src/views/interface/themes/ThemeList.vue
 rename src/views/interface/{ => themes}/themes-mock.ts (100%)
 create mode 100644 src/views/interface/visual/Visual.vue
 delete mode 100644 src/views/posts/PageList.vue
 delete mode 100644 src/views/posts/PostList.vue
 create mode 100644 src/views/system/plugins/PluginList.vue
 create mode 100644 src/views/system/settings/Settings.vue
 create mode 100644 src/views/system/users/Profile.vue
 create mode 100644 src/views/system/users/UserList.vue
 delete mode 100644 src/views/users/Profile.vue

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index a29c575f..1f5d4180 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -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();
diff --git a/src/router/menus.config.ts b/src/router/menus.config.ts
index 78cde49f..09e5a195 100644
--- a/src/router/menus.config.ts
+++ b/src/router/menus.config.ts
@@ -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,
   },
 ];
diff --git a/src/router/routes.config.ts b/src/router/routes.config.ts
index f0d5ed3f..548968dc 100644
--- a/src/router/routes.config.ts
+++ b/src/router/routes.config.ts
@@ -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,
-  },
-  {
-    path: "/about",
-    name: "about",
-    component: AboutView,
+    component: BasicLayout,
+    redirect: "/dashboard",
+    children: [
+      {
+        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",
-        name: "Tags",
-        component: AboutView,
+        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: TagList,
+          },
+        ],
       },
     ],
   },
   {
     path: "/sheets",
-    name: "Sheets",
-    component: PageList,
+    component: BasicLayout,
+    children: [
+      {
+        path: "",
+        name: "Sheets",
+        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",
-    name: "Themes",
-    component: Themes,
+    component: BasicLayout,
+    children: [
+      {
+        path: "",
+        name: "Themes",
+        component: ThemeList,
+      },
+    ],
   },
   {
     path: "/menus",
-    name: "Menus",
-    component: AboutView,
+    component: BasicLayout,
+    children: [
+      {
+        path: "",
+        name: "Menus",
+        component: MenuList,
+      },
+    ],
   },
   {
     path: "/visual",
-    name: "Visual",
-    component: AboutView,
+    component: BasicLayout,
+    children: [
+      {
+        path: "",
+        name: "Visual",
+        component: Visual,
+      },
+    ],
   },
   {
     path: "/plugins",
-    name: "Plugins",
-    component: AboutView,
+    component: BasicLayout,
+    children: [
+      {
+        path: "",
+        name: "Plugins",
+        component: PluginList,
+      },
+    ],
   },
   {
     path: "/users",
-    name: "Users",
-    component: Profile,
+    component: BasicLayout,
+    redirect: "/users/profile",
+    children: [
+      {
+        path: "",
+        name: "Users",
+        component: UserList,
+      },
+      {
+        path: "profile",
+        name: "Profile",
+        component: Profile,
+      },
+    ],
   },
   {
     path: "/settings",
-    name: "Settings",
-    component: AboutView,
+    component: BasicLayout,
+    children: [
+      {
+        path: "",
+        name: "Settings",
+        component: Settings,
+      },
+    ],
   },
 ];
 
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index 7aa6155f..00000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
deleted file mode 100644
index 82caedb5..00000000
--- a/src/views/HomeView.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/attachments/Attachments.vue b/src/views/attachments/Attachments.vue
deleted file mode 100644
index 579bb0a0..00000000
--- a/src/views/attachments/Attachments.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/contents/attachments/AttachmentList.vue b/src/views/contents/attachments/AttachmentList.vue
new file mode 100644
index 00000000..8ae4c768
--- /dev/null
+++ b/src/views/contents/attachments/AttachmentList.vue
@@ -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>
diff --git a/src/views/contents/comments/CommentList.vue b/src/views/contents/comments/CommentList.vue
new file mode 100644
index 00000000..f3563446
--- /dev/null
+++ b/src/views/contents/comments/CommentList.vue
@@ -0,0 +1 @@
+<template>Comments</template>
diff --git a/src/views/contents/posts/PostEditor.vue b/src/views/contents/posts/PostEditor.vue
new file mode 100644
index 00000000..8d666a36
--- /dev/null
+++ b/src/views/contents/posts/PostEditor.vue
@@ -0,0 +1 @@
+<template>Post Editor</template>
diff --git a/src/views/contents/posts/PostList.vue b/src/views/contents/posts/PostList.vue
new file mode 100644
index 00000000..e073a6e9
--- /dev/null
+++ b/src/views/contents/posts/PostList.vue
@@ -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>
diff --git a/src/views/contents/posts/categories/CategoryList.vue b/src/views/contents/posts/categories/CategoryList.vue
new file mode 100644
index 00000000..5a7a4474
--- /dev/null
+++ b/src/views/contents/posts/categories/CategoryList.vue
@@ -0,0 +1 @@
+<template>Categories</template>
diff --git a/src/views/posts/posts-mock.ts b/src/views/contents/posts/posts-mock.ts
similarity index 100%
rename from src/views/posts/posts-mock.ts
rename to src/views/contents/posts/posts-mock.ts
diff --git a/src/views/contents/posts/tags/TagList.vue b/src/views/contents/posts/tags/TagList.vue
new file mode 100644
index 00000000..eaafe4d7
--- /dev/null
+++ b/src/views/contents/posts/tags/TagList.vue
@@ -0,0 +1 @@
+<template>Tags</template>
diff --git a/src/views/contents/sheets/SheetList.vue b/src/views/contents/sheets/SheetList.vue
new file mode 100644
index 00000000..dd5bd46f
--- /dev/null
+++ b/src/views/contents/sheets/SheetList.vue
@@ -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>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
new file mode 100644
index 00000000..c8b3ca41
--- /dev/null
+++ b/src/views/dashboard/Dashboard.vue
@@ -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>
diff --git a/src/views/interface/Themes.vue b/src/views/interface/Themes.vue
deleted file mode 100644
index 12019b6d..00000000
--- a/src/views/interface/Themes.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/interface/menus/MenuList.vue b/src/views/interface/menus/MenuList.vue
new file mode 100644
index 00000000..e26b73c4
--- /dev/null
+++ b/src/views/interface/menus/MenuList.vue
@@ -0,0 +1 @@
+<template>Menus</template>
diff --git a/src/views/interface/themes/ThemeList.vue b/src/views/interface/themes/ThemeList.vue
new file mode 100644
index 00000000..195ae381
--- /dev/null
+++ b/src/views/interface/themes/ThemeList.vue
@@ -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>
diff --git a/src/views/interface/themes-mock.ts b/src/views/interface/themes/themes-mock.ts
similarity index 100%
rename from src/views/interface/themes-mock.ts
rename to src/views/interface/themes/themes-mock.ts
diff --git a/src/views/interface/visual/Visual.vue b/src/views/interface/visual/Visual.vue
new file mode 100644
index 00000000..cd2085e4
--- /dev/null
+++ b/src/views/interface/visual/Visual.vue
@@ -0,0 +1 @@
+<template>Visual</template>
diff --git a/src/views/posts/PageList.vue b/src/views/posts/PageList.vue
deleted file mode 100644
index 86fc0cd4..00000000
--- a/src/views/posts/PageList.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/posts/PostList.vue b/src/views/posts/PostList.vue
deleted file mode 100644
index 1ae89d0c..00000000
--- a/src/views/posts/PostList.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/system/plugins/PluginList.vue b/src/views/system/plugins/PluginList.vue
new file mode 100644
index 00000000..aebb4e4c
--- /dev/null
+++ b/src/views/system/plugins/PluginList.vue
@@ -0,0 +1 @@
+<template>Plugin</template>
diff --git a/src/views/system/settings/Settings.vue b/src/views/system/settings/Settings.vue
new file mode 100644
index 00000000..7cb7c22c
--- /dev/null
+++ b/src/views/system/settings/Settings.vue
@@ -0,0 +1 @@
+<template>Settings</template>
diff --git a/src/views/system/users/Profile.vue b/src/views/system/users/Profile.vue
new file mode 100644
index 00000000..b5c47bf6
--- /dev/null
+++ b/src/views/system/users/Profile.vue
@@ -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>
diff --git a/src/views/system/users/UserList.vue b/src/views/system/users/UserList.vue
new file mode 100644
index 00000000..b3b789cc
--- /dev/null
+++ b/src/views/system/users/UserList.vue
@@ -0,0 +1 @@
+<template>User</template>
diff --git a/src/views/users/Profile.vue b/src/views/users/Profile.vue
deleted file mode 100644
index 88c83521..00000000
--- a/src/views/users/Profile.vue
+++ /dev/null
@@ -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>