From 3ee45a117eb6e4e65e79adb6094f329e050af71a Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 23 Aug 2022 12:08:10 +0800
Subject: [PATCH] feat: post basic management capability (#599)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--  Thanks for sending a pull request!  Here are some tips for you:
1. 如果这是你的第一次，请阅读我们的贡献指南：<https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>。
1. If this is your first time, please read our contributor guidelines: <https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>.
2. 请根据你解决问题的类型为 Pull Request 添加合适的标签。
2. Please label this pull request according to what type of issue you are addressing, especially if this is a release targeted pull request.
3. 请确保你已经添加并运行了适当的测试。
3. Ensure you have added or ran the appropriate tests for your PR.
-->

#### What type of PR is this?

/kind feature
/milestone 2.0

<!--
添加其中一个类别：
Add one of the following kinds:

/kind bug
/kind cleanup
/kind documentation
/kind feature
/kind optimization

适当添加其中一个或多个类别（可选）：
Optionally add one or more of the following kinds if applicable:

/kind api-change
/kind deprecation
/kind failing-test
/kind flake
/kind regression
-->

#### What this PR does / why we need it:

文章管理相关模块。适配 https://github.com/halo-dev/halo/pull/2326

#### Which issue(s) this PR fixes:

<!--
PR 合并时自动关闭 issue。
Automatically closes linked issue when PR is merged.

用法：`Fixes #<issue 号>`，或者 `Fixes (粘贴 issue 完整链接)`
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
-->
Fixes https://github.com/halo-dev/halo/issues/2322

#### Screenshots:

// pending

<!--
如果此 PR 有 UI 的改动，最好截图说明这个 PR 的改动。
If there are UI changes to this PR, it is best to take a screenshot to illustrate the changes to this PR.

eg.

Before:

![screenshot-before](https://user-images.githubusercontent.com/screenshot.png)

After:

![screenshot-after](https://user-images.githubusercontent.com/screenshot.png)
-->

#### Special notes for your reviewer:

// pending

#### Does this PR introduce a user-facing change?

<!--
如果当前 Pull Request 的修改不会造成用户侧的任何变更，在 `release-note` 代码块儿中填写 `NONE`。
否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新（Break Change），
Release Note 需要以 `action required` 开头。
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required".
-->

```release-note
None
```
---
 package.json                                  |    5 +-
 .../components/src/components/tag/Tag.vue     |    7 +-
 packages/components/src/icons/icons.ts        |    4 +
 packages/shared/package.json                  |    2 +-
 packages/shared/src/utils/api-client.ts       |   25 +-
 pnpm-lock.yaml                                |   73 +-
 src/constants/labels.ts                       |    8 +
 src/formkit/theme.ts                          |    4 +-
 src/modules/contents/posts/PostEditor.vue     |  131 ++-
 src/modules/contents/posts/PostList.vue       |  645 ++++++++--
 .../posts/categories/CategoryList.vue         |  177 +--
 .../components/CategoryEditingModal.vue       |  119 +-
 .../components/CategoryListItem.vue           |  142 +++
 .../__tests__/CategoryEditingModal.spec.ts    |    9 +
 .../composables/use-post-category.ts          |   69 ++
 .../contents/posts/categories/utils/index.ts  |  123 ++
 .../posts/components/PostSettingModal.vue     |  316 +++--
 .../__tests__/PostSettingModal.spec.ts        |   20 +
 src/modules/contents/posts/posts-mock.ts      | 1036 -----------------
 src/modules/contents/posts/tags/TagList.vue   |  267 +++--
 .../posts/tags/components/PostTag.vue         |   26 +
 .../posts/tags/components/TagEditingModal.vue |  152 ++-
 .../posts/tags/composables/use-post-tag.ts    |   61 +
 .../widgets/RecentPublishedWidget.vue         |   32 +-
 src/utils/__tests__/date.spec.ts              |   10 +
 src/utils/date.ts                             |   14 +
 26 files changed, 1993 insertions(+), 1484 deletions(-)
 create mode 100644 src/modules/contents/posts/categories/components/CategoryListItem.vue
 create mode 100644 src/modules/contents/posts/categories/components/__tests__/CategoryEditingModal.spec.ts
 create mode 100644 src/modules/contents/posts/categories/composables/use-post-category.ts
 create mode 100644 src/modules/contents/posts/categories/utils/index.ts
 create mode 100644 src/modules/contents/posts/components/__tests__/PostSettingModal.spec.ts
 delete mode 100644 src/modules/contents/posts/posts-mock.ts
 create mode 100644 src/modules/contents/posts/tags/components/PostTag.vue
 create mode 100644 src/modules/contents/posts/tags/composables/use-post-tag.ts
 create mode 100644 src/utils/__tests__/date.spec.ts
 create mode 100644 src/utils/date.ts

diff --git a/package.json b/package.json
index b7f8f27f..67b4d4c1 100644
--- a/package.json
+++ b/package.json
@@ -32,15 +32,16 @@
     "@formkit/inputs": "1.0.0-beta.10",
     "@formkit/themes": "1.0.0-beta.10",
     "@formkit/vue": "1.0.0-beta.10",
-    "@halo-dev/admin-api": "^1.1.0",
     "@halo-dev/admin-shared": "workspace:*",
-    "@halo-dev/api-client": "^0.0.10",
+    "@halo-dev/api-client": "^0.0.12",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/richtext-editor": "0.0.0-alpha.3",
     "@vueuse/components": "^8.9.4",
     "@vueuse/core": "^8.9.4",
     "@vueuse/router": "^9.1.0",
     "axios": "^0.27.2",
+    "colorjs.io": "^0.4.0",
+    "dayjs": "^1.11.5",
     "filepond": "^4.30.4",
     "filepond-plugin-image-preview": "^4.6.11",
     "floating-vue": "2.0.0-beta.19",
diff --git a/packages/components/src/components/tag/Tag.vue b/packages/components/src/components/tag/Tag.vue
index 14ab978d..d73cc14c 100644
--- a/packages/components/src/components/tag/Tag.vue
+++ b/packages/components/src/components/tag/Tag.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { CSSProperties } from "vue";
 import { computed } from "vue";
 import type { Theme } from "./interface";
 
@@ -6,10 +7,14 @@ const props = withDefaults(
   defineProps<{
     theme?: Theme;
     rounded?: boolean;
+    styles?: CSSProperties;
   }>(),
   {
     theme: "default",
     rounded: false,
+    styles: () => {
+      return {};
+    },
   }
 );
 
@@ -18,7 +23,7 @@ const classes = computed(() => {
 });
 </script>
 <template>
-  <div :class="classes" class="tag-wrapper">
+  <div :class="classes" :style="styles" class="tag-wrapper">
     <div v-if="$slots.leftIcon" class="tag-left-icon">
       <slot name="leftIcon" />
     </div>
diff --git a/packages/components/src/icons/icons.ts b/packages/components/src/icons/icons.ts
index 02d54e4b..af47f56c 100644
--- a/packages/components/src/icons/icons.ts
+++ b/packages/components/src/icons/icons.ts
@@ -14,6 +14,7 @@ import IconUserSettings from "~icons/ri/user-settings-line";
 import IconSettings from "~icons/ri/settings-4-line";
 import IconPlug from "~icons/ri/plug-2-line";
 import IconEye from "~icons/ri/eye-line";
+import IconEyeOff from "~icons/ri/eye-off-line";
 import IconFolder from "~icons/ri/folder-2-line";
 import IconMore from "~icons/ri/more-line";
 import IconClose from "~icons/ri/close-line";
@@ -41,6 +42,7 @@ import IconStopCircle from "~icons/ri/stop-circle-line";
 import IconForbidLine from "~icons/ri/forbid-line";
 import IconCodeBoxLine from "~icons/ri/code-box-line";
 import IconDatabase2Line from "~icons/ri/database-2-line";
+import IconTeam from "~icons/ri/team-fill";
 
 export {
   IconDashboard,
@@ -57,6 +59,7 @@ export {
   IconSettings,
   IconPlug,
   IconEye,
+  IconEyeOff,
   IconFolder,
   IconMore,
   IconClose,
@@ -86,4 +89,5 @@ export {
   IconForbidLine,
   IconCodeBoxLine,
   IconDatabase2Line,
+  IconTeam,
 };
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 9f40f999..ab385170 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -36,7 +36,7 @@
   "homepage": "https://github.com/halo-dev/halo-admin/tree/next/shared/components#readme",
   "license": "MIT",
   "dependencies": {
-    "@halo-dev/api-client": "^0.0.10",
+    "@halo-dev/api-client": "^0.0.12",
     "@halo-dev/components": "workspace:*",
     "axios": "^0.27.2"
   },
diff --git a/packages/shared/src/utils/api-client.ts b/packages/shared/src/utils/api-client.ts
index f195c3de..8b5abd25 100644
--- a/packages/shared/src/utils/api-client.ts
+++ b/packages/shared/src/utils/api-client.ts
@@ -1,18 +1,26 @@
 import {
+  ApiHaloRunV1alpha1ContentApi,
   ApiHaloRunV1alpha1PluginApi,
+  ApiHaloRunV1alpha1PostApi,
+  ApiHaloRunV1alpha1ThemeApi,
   ApiHaloRunV1alpha1UserApi,
+  ContentHaloRunV1alpha1CategoryApi,
+  ContentHaloRunV1alpha1CommentApi,
+  ContentHaloRunV1alpha1PostApi,
+  ContentHaloRunV1alpha1ReplyApi,
+  ContentHaloRunV1alpha1SnapshotApi,
+  ContentHaloRunV1alpha1TagApi,
   PluginHaloRunV1alpha1PluginApi,
   PluginHaloRunV1alpha1ReverseProxyApi,
+  ThemeHaloRunV1alpha1ThemeApi,
   V1alpha1ConfigMapApi,
+  V1alpha1MenuApi,
+  V1alpha1MenuItemApi,
   V1alpha1PersonalAccessTokenApi,
   V1alpha1RoleApi,
   V1alpha1RoleBindingApi,
   V1alpha1SettingApi,
   V1alpha1UserApi,
-  V1alpha1MenuApi,
-  V1alpha1MenuItemApi,
-  ThemeHaloRunV1alpha1ThemeApi,
-  ApiHaloRunV1alpha1ThemeApi,
 } from "@halo-dev/api-client";
 import type { AxiosInstance } from "axios";
 import axios from "axios";
@@ -65,10 +73,19 @@ function setupApiClient(axios: AxiosInstance) {
       theme: new ThemeHaloRunV1alpha1ThemeApi(undefined, apiUrl, axios),
       menu: new V1alpha1MenuApi(undefined, apiUrl, axios),
       menuItem: new V1alpha1MenuItemApi(undefined, apiUrl, axios),
+      post: new ContentHaloRunV1alpha1PostApi(undefined, apiUrl, axios),
+      category: new ContentHaloRunV1alpha1CategoryApi(undefined, apiUrl, axios),
+      tag: new ContentHaloRunV1alpha1TagApi(undefined, apiUrl, axios),
+      snapshot: new ContentHaloRunV1alpha1SnapshotApi(undefined, apiUrl, axios),
+      comment: new ContentHaloRunV1alpha1CommentApi(undefined, apiUrl, axios),
+      reply: new ContentHaloRunV1alpha1ReplyApi(undefined, apiUrl, axios),
     },
+    // custom endpoints
     user: new ApiHaloRunV1alpha1UserApi(undefined, apiUrl, axios),
     plugin: new ApiHaloRunV1alpha1PluginApi(undefined, apiUrl, axios),
     theme: new ApiHaloRunV1alpha1ThemeApi(undefined, apiUrl, axios),
+    post: new ApiHaloRunV1alpha1PostApi(undefined, apiUrl, axios),
+    content: new ApiHaloRunV1alpha1ContentApi(undefined, apiUrl, axios),
   };
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7333db17..d5187383 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,9 +12,8 @@ importers:
       '@formkit/inputs': 1.0.0-beta.10
       '@formkit/themes': 1.0.0-beta.10
       '@formkit/vue': 1.0.0-beta.10
-      '@halo-dev/admin-api': ^1.1.0
       '@halo-dev/admin-shared': workspace:*
-      '@halo-dev/api-client': ^0.0.10
+      '@halo-dev/api-client': ^0.0.12
       '@halo-dev/components': workspace:*
       '@halo-dev/richtext-editor': 0.0.0-alpha.3
       '@rushstack/eslint-patch': ^1.1.4
@@ -39,7 +38,9 @@ importers:
       autoprefixer: ^10.4.8
       axios: ^0.27.2
       c8: ^7.12.0
+      colorjs.io: ^0.4.0
       cypress: ^9.7.0
+      dayjs: ^1.11.5
       eslint: ^8.22.0
       eslint-plugin-cypress: ^2.12.1
       eslint-plugin-vue: ^9.3.0
@@ -85,15 +86,16 @@ importers:
       '@formkit/inputs': 1.0.0-beta.10
       '@formkit/themes': 1.0.0-beta.10_tailwindcss@3.1.8
       '@formkit/vue': 1.0.0-beta.10_wwmyxdjqen5bmh3tr2meig5lki
-      '@halo-dev/admin-api': 1.1.0
       '@halo-dev/admin-shared': link:packages/shared
-      '@halo-dev/api-client': 0.0.10
+      '@halo-dev/api-client': 0.0.12
       '@halo-dev/components': link:packages/components
       '@halo-dev/richtext-editor': 0.0.0-alpha.3_vue@3.2.37
       '@vueuse/components': 8.9.4_vue@3.2.37
       '@vueuse/core': 8.9.4_vue@3.2.37
       '@vueuse/router': 9.1.0_26a4nhf5pwzjzqc5ckt7ohj5zi
       axios: 0.27.2
+      colorjs.io: 0.4.0
+      dayjs: 1.11.5
       filepond: 4.30.4
       filepond-plugin-image-preview: 4.6.11_filepond@4.30.4
       floating-vue: 2.0.0-beta.19_vue@3.2.37
@@ -182,12 +184,12 @@ importers:
 
   packages/shared:
     specifiers:
-      '@halo-dev/api-client': ^0.0.10
+      '@halo-dev/api-client': ^0.0.12
       '@halo-dev/components': workspace:*
       axios: ^0.27.2
       vite-plugin-dts: ^1.4.1
     dependencies:
-      '@halo-dev/api-client': 0.0.10
+      '@halo-dev/api-client': 0.0.12
       '@halo-dev/components': link:../components
       axios: 0.27.2
     devDependencies:
@@ -2109,39 +2111,8 @@ packages:
       - windicss
     dev: false
 
-  /@halo-dev/admin-api/1.1.0:
-    resolution: {integrity: sha512-2K8ulSucPudWfBo8SWz92hLtlu8C7hVVfYNejlns0BZfMxFyivvGyTgeYiMYHgNR5n4K6tF903Zn1DkS7jnv0g==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@halo-dev/rest-api-client': 1.1.0
-      tslib: 2.4.0
-    transitivePeerDependencies:
-      - debug
-    dev: false
-
-  /@halo-dev/api-client/0.0.10:
-    resolution: {integrity: sha512-DKQKkEAKMR/rbopI6jbjbzLiYUZeY6dOcgqGoDGG8MAcwkWOI6iWaZnuR5z+X8vd51XjiPhnekAphfcO6PaWEQ==}
-    dev: false
-
-  /@halo-dev/logger/1.1.0:
-    resolution: {integrity: sha512-y0jVivYwF8MCVi/OdW2D0LN+GTM5rzMsR/ZmQVfgmKQw7Q7Q+EXPijxON6iCMZnWANGa4NaAcOO9k3ggG8oRwg==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      tslib: 2.4.0
-    dev: false
-
-  /@halo-dev/rest-api-client/1.1.0:
-    resolution: {integrity: sha512-zoAzaswdgBpkAw8A6zs4N+n03sSwF/YKnLnj9p7PNQoiix1Z1GK+Tc/WV59A+wRB9Xw5W3JZhzvuaOPOe7RpEw==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@halo-dev/logger': 1.1.0
-      axios: 0.24.0
-      form-data: 4.0.0
-      js-base64: 3.7.2
-      qs: 6.11.0
-      tslib: 2.4.0
-    transitivePeerDependencies:
-      - debug
+  /@halo-dev/api-client/0.0.12:
+    resolution: {integrity: sha512-fOI3DB9rOA1Z+h1aKiEQ+2kWkNSmdWIDvd+39dR5b3X0DmKH+zWrNmygA5Qe2gBPX28TNt/zr2qCKUjGjb99CA==}
     dev: false
 
   /@halo-dev/richtext-editor/0.0.0-alpha.3_vue@3.2.37:
@@ -3950,14 +3921,6 @@ packages:
       - debug
     dev: true
 
-  /axios/0.24.0:
-    resolution: {integrity: sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==}
-    dependencies:
-      follow-redirects: 1.14.9
-    transitivePeerDependencies:
-      - debug
-    dev: false
-
   /axios/0.27.2:
     resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
     dependencies:
@@ -4379,6 +4342,10 @@ packages:
     resolution: {integrity: sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==}
     dev: true
 
+  /colorjs.io/0.4.0:
+    resolution: {integrity: sha512-AUKG9GCDSHsFRUnxGrEMCm6nq6lxddnDvD0avmsy/klCEk68htpqgl9IERGtGoxaGJlr7uP5wmD381gY2uG8hw==}
+    dev: false
+
   /colors/1.2.5:
     resolution: {integrity: sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==}
     engines: {node: '>=0.1.90'}
@@ -4579,7 +4546,7 @@ packages:
       cli-table3: 0.6.1
       commander: 5.1.0
       common-tags: 1.8.2
-      dayjs: 1.11.3
+      dayjs: 1.11.5
       debug: 4.3.4_supports-color@8.1.1
       enquirer: 2.3.6
       eventemitter2: 6.4.5
@@ -4623,9 +4590,8 @@ packages:
       whatwg-url: 11.0.0
     dev: true
 
-  /dayjs/1.11.3:
-    resolution: {integrity: sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==}
-    dev: true
+  /dayjs/1.11.5:
+    resolution: {integrity: sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==}
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
@@ -6461,10 +6427,6 @@ packages:
       '@sideway/pinpoint': 2.0.0
     dev: true
 
-  /js-base64/3.7.2:
-    resolution: {integrity: sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==}
-    dev: false
-
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -8560,6 +8522,7 @@ packages:
 
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+    dev: true
 
   /tsutils/3.21.0_typescript@4.7.4:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
diff --git a/src/constants/labels.ts b/src/constants/labels.ts
index e8844916..a903d811 100644
--- a/src/constants/labels.ts
+++ b/src/constants/labels.ts
@@ -7,3 +7,11 @@ export enum pluginLabels {
 export enum roleLabels {
   TEMPLATE = "halo.run/role-template",
 }
+
+// post
+export enum postLabels {
+  DELETED = "content.halo.run/deleted",
+  OWNER = "content.halo.run/owner",
+  VISIBLE = "content.halo.run/visible",
+  PHASE = "content.halo.run/phase",
+}
diff --git a/src/formkit/theme.ts b/src/formkit/theme.ts
index fd990f68..cddacb07 100644
--- a/src/formkit/theme.ts
+++ b/src/formkit/theme.ts
@@ -2,14 +2,14 @@ const textClassification = {
   label: "block font-bold text-sm formkit-invalid:text-red-500 w-56",
   wrapper: "flex flex-col sm:flex-row items-start sm:items-center",
   inner:
-    "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 rounded-base overflow-hidden focus-within:border-primary mt-2 sm:mt-0",
+    "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-9 rounded-base overflow-hidden focus-within:border-primary mt-2 sm:mt-0",
   input:
     "outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-9 px-3 text-sm",
 };
 
 const boxClassification = {
   fieldset:
-    "border border-gray-300 rounded-base px-2 pb-1 focus-within:border-primary",
+    "border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary",
   legend: "font-bold text-sm",
   wrapper: "flex items-center mb-1 cursor-pointer",
   help: "mb-2",
diff --git a/src/modules/contents/posts/PostEditor.vue b/src/modules/contents/posts/PostEditor.vue
index 41a45217..245cb58b 100644
--- a/src/modules/contents/posts/PostEditor.vue
+++ b/src/modules/contents/posts/PostEditor.vue
@@ -4,24 +4,141 @@ import {
   IconSave,
   VButton,
   VPageHeader,
+  VSpace,
 } from "@halo-dev/components";
+import PostSettingModal from "./components/PostSettingModal.vue";
+import type { PostRequest } from "@halo-dev/api-client";
+import { computed, onMounted, ref } from "vue";
+import cloneDeep from "lodash.clonedeep";
+import { apiClient } from "@halo-dev/admin-shared";
+import { useRouteQuery } from "@vueuse/router";
+import { v4 as uuid } from "uuid";
+
+const name = useRouteQuery("name");
+
+const initialFormState: PostRequest = {
+  post: {
+    spec: {
+      title: "",
+      slug: "",
+      template: "",
+      cover: "",
+      deleted: false,
+      published: false,
+      publishTime: undefined,
+      pinned: false,
+      allowComment: true,
+      visible: "PUBLIC",
+      version: 1,
+      priority: 0,
+      excerpt: {
+        autoGenerate: true,
+        raw: "",
+      },
+      categories: [],
+      tags: [],
+      htmlMetas: [],
+    },
+    apiVersion: "content.halo.run/v1alpha1",
+    kind: "Post",
+    metadata: {
+      name: uuid(),
+    },
+  },
+  content: {
+    raw: "",
+    content: "",
+    rawType: "HTML",
+  },
+};
+
+const formState = ref<PostRequest>(cloneDeep(initialFormState));
+const settingModal = ref(false);
+const saving = ref(false);
+
+const isUpdateMode = computed(() => {
+  return !!formState.value.post.metadata.creationTimestamp;
+});
+
+const handleSavePost = async () => {
+  try {
+    saving.value = true;
+    formState.value.content.content = formState.value.content.raw;
+    if (isUpdateMode.value) {
+      const { data } = await apiClient.post.updateDraftPost(
+        formState.value.post.metadata.name,
+        formState.value
+      );
+      formState.value.post = data;
+    } else {
+      const { data } = await apiClient.post.draftPost(formState.value);
+      formState.value.post = data;
+      name.value = data.metadata.name;
+    }
+  } catch (e) {
+    alert(`保存异常: ${e}`);
+    console.error("Failed to save post", e);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const onSettingSaved = (post: PostRequest) => {
+  formState.value = post;
+  settingModal.value = false;
+  handleSavePost();
+};
+
+onMounted(async () => {
+  if (name.value) {
+    // fetch post
+    const { data: post } =
+      await apiClient.extension.post.getcontentHaloRunV1alpha1Post(
+        name.value as string
+      );
+    formState.value.post = post;
+
+    if (formState.value.post.spec.headSnapshot) {
+      const { data: content } = await apiClient.content.obtainSnapshotContent(
+        formState.value.post.spec.headSnapshot
+      );
+      formState.value.content = content;
+    }
+  }
+});
 </script>
 
 <template>
+  <PostSettingModal
+    v-model:visible="settingModal"
+    :only-emit="true"
+    :post="formState"
+    @saved="onSettingSaved"
+  />
   <VPageHeader title="文章">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
     </template>
     <template #actions>
-      <VButton :route="{ name: 'PostEditor' }" type="secondary">
-        <template #icon>
-          <IconSave class="h-full w-full" />
-        </template>
-        发布
-      </VButton>
+      <VSpace>
+        <VButton
+          :loading="saving"
+          size="sm"
+          type="default"
+          @click="handleSavePost"
+        >
+          保存
+        </VButton>
+        <VButton type="secondary" @click="settingModal = true">
+          <template #icon>
+            <IconSave class="h-full w-full" />
+          </template>
+          发布
+        </VButton>
+      </VSpace>
     </template>
   </VPageHeader>
   <div class="editor border-t">
-    <RichTextEditor />
+    <RichTextEditor v-model="formState.content.raw" />
   </div>
 </template>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index ae64e556..06153f20 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -2,104 +2,284 @@
 import {
   IconAddCircle,
   IconArrowDown,
+  IconArrowLeft,
+  IconArrowRight,
   IconBookRead,
+  IconEye,
+  IconEyeOff,
   IconSettings,
+  IconTeam,
+  useDialog,
   VButton,
   VCard,
+  VEmpty,
   VPageHeader,
   VPagination,
   VSpace,
   VTag,
 } from "@halo-dev/components";
 import PostSettingModal from "./components/PostSettingModal.vue";
-import { posts } from "./posts-mock";
-import { computed, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import type { Post } from "@halo-dev/admin-api";
+import PostTag from "../posts/tags/components/PostTag.vue";
+import { onMounted, ref, watch, watchEffect } from "vue";
+import type { ListedPostList, Post, PostRequest } from "@halo-dev/api-client";
 import { apiClient } from "@halo-dev/admin-shared";
-import type { User } from "@halo-dev/api-client";
+import { formatDatetime } from "@/utils/date";
+import { useUserFetch } from "@/modules/system/users/composables/use-user";
+import { usePostCategory } from "@/modules/contents/posts/categories/composables/use-post-category";
+import { usePostTag } from "@/modules/contents/posts/tags/composables/use-post-tag";
+import cloneDeep from "lodash.clonedeep";
+import { postLabels } from "@/constants/labels";
 
-const postsRef = ref(
-  // eslint-disable-next-line
-  posts.map((item: any) => {
-    return {
-      ...item,
-      checked: false,
-    };
-  })
-);
+enum PostPhase {
+  DRAFT = "未发布",
+  PENDING_APPROVAL = "待审核",
+  PUBLISHED = "已发布",
+}
 
-const router = useRouter();
-const checkAll = ref(false);
-const postSettings = ref(false);
-// eslint-disable-next-line
-const selected = ref<Post | Record<string, unknown> | null>({});
-const users = ref<User[]>([]);
-
-const checkedCount = computed(() => {
-  return postsRef.value.filter((post) => post.checked).length;
+const posts = ref<ListedPostList>({
+  page: 1,
+  size: 20,
+  total: 0,
+  items: [],
+  first: true,
+  last: false,
+  hasNext: false,
+  hasPrevious: false,
 });
+const loading = ref(false);
+const settingModal = ref(false);
+const selectedPost = ref<Post | null>(null);
+const selectedPostWithContent = ref<PostRequest | null>(null);
+const checkedAll = ref(false);
+const selectedPostNames = ref<string[]>([]);
 
-const handleFetchUsers = async () => {
+const { users } = useUserFetch();
+const { categories } = usePostCategory();
+const { tags } = usePostTag();
+const dialog = useDialog();
+
+const handleFetchPosts = async () => {
   try {
-    const { data } = await apiClient.extension.user.listv1alpha1User();
-    users.value = data.items;
+    loading.value = true;
+
+    const labelSelector: string[] = [];
+
+    if (selectedVisibleFilterItem.value.value) {
+      labelSelector.push(
+        `${postLabels.VISIBLE}=${selectedVisibleFilterItem.value.value}`
+      );
+    }
+
+    if (selectedPhaseFilterItem.value.value) {
+      labelSelector.push(
+        `${postLabels.PHASE}=${selectedPhaseFilterItem.value.value}`
+      );
+    }
+
+    const { data } = await apiClient.post.listPosts(
+      posts.value.page,
+      posts.value.size,
+      labelSelector
+    );
+    posts.value = data;
   } catch (e) {
-    console.error(e);
+    console.error("Failed to fetch posts", e);
+  } finally {
+    loading.value = false;
   }
 };
 
-const handleCheckAll = () => {
-  postsRef.value.forEach((item) => {
-    item.checked = checkAll.value;
-  });
+const handlePaginationChange = ({
+  page,
+  size,
+}: {
+  page: number;
+  size: number;
+}) => {
+  posts.value.page = page;
+  posts.value.size = size;
+  handleFetchPosts();
 };
 
-// eslint-disable-next-line
-const handleSelect = (post: any) => {
-  selected.value = post;
-  postSettings.value = true;
+const handleOpenSettingModal = (post: Post) => {
+  selectedPost.value = post;
+  settingModal.value = true;
 };
 
-const handleSelectPrevious = () => {
-  const currentIndex = posts.findIndex(
-    (post) => post.id === selected.value?.id
+const onSettingModalClose = () => {
+  selectedPost.value = null;
+  handleFetchPosts();
+};
+
+const handleSelectPrevious = async () => {
+  const { items, hasPrevious } = posts.value;
+  const index = items.findIndex(
+    (post) => post.post.metadata.name === selectedPost.value?.metadata.name
   );
-  if (currentIndex > 0) {
-    selected.value = posts[currentIndex - 1];
+  if (index > 0) {
+    selectedPost.value = items[index - 1].post;
+    return;
+  }
+  if (index === 0 && hasPrevious) {
+    posts.value.page--;
+    await handleFetchPosts();
+    selectedPost.value = posts.value.items[posts.value.items.length - 1].post;
   }
 };
 
-const handleSelectNext = () => {
-  const currentIndex = posts.findIndex(
-    (post) => post.id === selected.value?.id
+const handleSelectNext = async () => {
+  const { items, hasNext } = posts.value;
+  const index = items.findIndex(
+    (post) => post.post.metadata.name === selectedPost.value?.metadata.name
   );
-  if (currentIndex < posts.length - 1) {
-    selected.value = posts[currentIndex + 1];
+  if (index < items.length - 1) {
+    selectedPost.value = items[index + 1].post;
+    return;
+  }
+  if (index === items.length - 1 && hasNext) {
+    posts.value.page++;
+    await handleFetchPosts();
+    selectedPost.value = posts.value.items[0].post;
   }
 };
 
-// eslint-disable-next-line
-const handleRouteToEditor = (post: any) => {
-  router.push({
-    name: "PostEditor",
-    params: {
-      id: post.id,
+const checkSelection = (post: Post) => {
+  return (
+    post.metadata.name === selectedPost.value?.metadata.name ||
+    selectedPostNames.value.includes(post.metadata.name)
+  );
+};
+
+const finalStatus = (post: Post) => {
+  if (post.status?.phase) {
+    return PostPhase[post.status.phase];
+  }
+  return "";
+};
+
+const handleCheckAllChange = (e: Event) => {
+  const { checked } = e.target as HTMLInputElement;
+
+  if (checked) {
+    selectedPostNames.value =
+      posts.value.items.map((post) => {
+        return post.post.metadata.name;
+      }) || [];
+  } else {
+    selectedPostNames.value.length = 0;
+  }
+};
+
+const handleDelete = async (post: Post) => {
+  dialog.warning({
+    title: "是否确认删除该文章？",
+    confirmType: "danger",
+    onConfirm: async () => {
+      const postToUpdate = cloneDeep(post);
+      postToUpdate.spec.deleted = true;
+      await apiClient.extension.post.updatecontentHaloRunV1alpha1Post(
+        postToUpdate.metadata.name,
+        postToUpdate
+      );
+      await handleFetchPosts();
     },
   });
 };
 
-onMounted(() => {
-  handleFetchUsers();
+watch(selectedPostNames, (newValue) => {
+  checkedAll.value = newValue.length === posts.value.items?.length;
 });
+
+watchEffect(async () => {
+  if (!selectedPost.value || !selectedPost.value.spec.headSnapshot) {
+    return;
+  }
+
+  const { data: content } = await apiClient.content.obtainSnapshotContent(
+    selectedPost.value.spec.headSnapshot
+  );
+
+  selectedPostWithContent.value = {
+    post: selectedPost.value,
+    content: content,
+  };
+});
+
+onMounted(() => {
+  handleFetchPosts();
+});
+
+interface FilterItem {
+  label: string;
+  value: string | undefined;
+}
+
+const VisibleFilterItems: FilterItem[] = [
+  {
+    label: "全部",
+    value: "",
+  },
+  {
+    label: "公开",
+    value: "PUBLIC",
+  },
+  {
+    label: "内部成员可访问",
+    value: "INTERNAL",
+  },
+  {
+    label: "私有",
+    value: "PRIVATE",
+  },
+];
+
+const PhaseFilterItems: FilterItem[] = [
+  {
+    label: "全部",
+    value: "",
+  },
+  {
+    label: "已发布",
+    value: "PUBLISHED",
+  },
+  {
+    label: "未发布",
+    value: "DRAFT",
+  },
+  {
+    label: "待审核",
+    value: "PENDING_APPROVAL",
+  },
+];
+
+const selectedVisibleFilterItem = ref<FilterItem>(VisibleFilterItems[0]);
+const selectedPhaseFilterItem = ref<FilterItem>(PhaseFilterItems[0]);
+
+function handleVisibleFilterItemChange(filterItem: FilterItem) {
+  selectedVisibleFilterItem.value = filterItem;
+  handleFetchPosts();
+}
+
+function handlePhaseFilterItemChange(filterItem: FilterItem) {
+  selectedPhaseFilterItem.value = filterItem;
+  handleFetchPosts();
+}
 </script>
 <template>
   <PostSettingModal
-    v-model:visible="postSettings"
-    :post="selected"
-    @next="handleSelectNext"
-    @previous="handleSelectPrevious"
-  />
+    v-model:visible="settingModal"
+    :post="selectedPostWithContent"
+    @close="onSettingModalClose"
+  >
+    <template #actions>
+      <div class="modal-header-action" @click="handleSelectPrevious">
+        <IconArrowLeft />
+      </div>
+      <div class="modal-header-action" @click="handleSelectNext">
+        <IconArrowRight />
+      </div>
+    </template>
+  </PostSettingModal>
   <VPageHeader title="文章">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
@@ -107,6 +287,7 @@ onMounted(() => {
     <template #actions>
       <VSpace>
         <VButton :route="{ name: 'Categories' }" size="sm">分类</VButton>
+        <VButton :route="{ name: 'Tags' }" size="sm">标签</VButton>
         <VButton :route="{ name: 'PostEditor' }" type="secondary">
           <template #icon>
             <IconAddCircle class="h-full w-full" />
@@ -126,18 +307,16 @@ onMounted(() => {
           >
             <div class="mr-4 hidden items-center sm:flex">
               <input
-                v-model="checkAll"
+                v-model="checkedAll"
                 class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
-                @change="handleCheckAll()"
+                @change="handleCheckAllChange"
               />
             </div>
             <div class="flex w-full flex-1 sm:w-auto">
-              <FormKit
-                v-if="checkedCount <= 0"
-                placeholder="输入关键词搜索"
-                type="text"
-              ></FormKit>
+              <div v-if="!selectedPostNames.length">
+                <FormKit placeholder="输入关键词搜索" type="text"></FormKit>
+              </div>
               <VSpace v-else>
                 <VButton type="default">设置</VButton>
                 <VButton type="danger">删除</VButton>
@@ -158,24 +337,50 @@ onMounted(() => {
                     <div class="w-72 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-for="(filterItem, index) in PhaseFilterItems"
+                          :key="index"
+                          v-close-popper
+                          :class="{
+                            'bg-gray-100':
+                              selectedPhaseFilterItem.value ===
+                              filterItem.value,
+                          }"
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                          @click="handlePhaseFilterItemChange(filterItem)"
                         >
-                          <span class="truncate">全部</span>
+                          <span class="truncate">{{ filterItem.label }}</span>
                         </li>
+                      </ul>
+                    </div>
+                  </template>
+                </FloatingDropdown>
+                <FloatingDropdown>
+                  <div
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
+                  >
+                    <span class="mr-0.5"> 可见性 </span>
+                    <span>
+                      <IconArrowDown />
+                    </span>
+                  </div>
+                  <template #popper>
+                    <div class="w-72 p-4">
+                      <ul class="space-y-1">
                         <li
+                          v-for="(filterItem, index) in VisibleFilterItems"
+                          :key="index"
+                          v-close-popper
+                          :class="{
+                            'bg-gray-100':
+                              selectedVisibleFilterItem.value ===
+                              filterItem.value,
+                          }"
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                          @click="handleVisibleFilterItemChange(filterItem)"
                         >
-                          <span class="truncate">已发布</span>
-                        </li>
-                        <li
-                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-                        >
-                          <span class="truncate">草稿</span>
-                        </li>
-                        <li
-                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-                        >
-                          <span class="truncate">未审核</span>
+                          <span class="truncate">
+                            {{ filterItem.label }}
+                          </span>
                         </li>
                       </ul>
                     </div>
@@ -191,11 +396,57 @@ onMounted(() => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="h-96 w-80 p-4">
-                      <FormKit
-                        placeholder="输入关键词搜索"
-                        type="text"
-                      ></FormKit>
+                    <div class="h-96 w-80">
+                      <div class="bg-white p-4">
+                        <FormKit
+                          placeholder="输入关键词搜索"
+                          type="text"
+                        ></FormKit>
+                      </div>
+                      <div class="mt-2">
+                        <ul
+                          class="box-border h-full w-full divide-y divide-gray-100"
+                        >
+                          <li
+                            v-for="(category, index) in categories"
+                            :key="index"
+                            v-close-popper
+                          >
+                            <div
+                              class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
+                            >
+                              <div class="relative flex flex-row items-center">
+                                <div class="flex-1">
+                                  <div class="flex flex-col sm:flex-row">
+                                    <span
+                                      class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
+                                    >
+                                      {{ category.spec.displayName }}
+                                    </span>
+                                    <VSpace class="mt-1 sm:mt-0"></VSpace>
+                                  </div>
+                                  <div class="mt-1 flex">
+                                    <span class="text-xs text-gray-500">
+                                      /categories/{{ category.spec.slug }}
+                                    </span>
+                                  </div>
+                                </div>
+                                <div class="flex">
+                                  <div
+                                    class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+                                  >
+                                    <div
+                                      class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
+                                    >
+                                      20 篇文章
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
                   </template>
                 </FloatingDropdown>
@@ -209,11 +460,54 @@ onMounted(() => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="h-96 w-80 p-4">
-                      <FormKit
-                        placeholder="输入关键词搜索"
-                        type="text"
-                      ></FormKit>
+                    <div class="h-96 w-80">
+                      <div class="bg-white p-4">
+                        <FormKit
+                          placeholder="输入关键词搜索"
+                          type="text"
+                        ></FormKit>
+                      </div>
+
+                      <div class="mt-2">
+                        <ul
+                          class="box-border h-full w-full divide-y divide-gray-100"
+                          role="list"
+                        >
+                          <li
+                            v-for="(tag, index) in tags"
+                            :key="index"
+                            v-close-popper
+                          >
+                            <div
+                              class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
+                            >
+                              <div class="relative flex flex-row items-center">
+                                <div class="flex-1">
+                                  <div class="flex flex-col sm:flex-row">
+                                    <PostTag :tag="tag" />
+                                  </div>
+                                  <div class="mt-1 flex">
+                                    <span class="text-xs text-gray-500">
+                                      /tags/{{ tag.spec.slug }}
+                                    </span>
+                                  </div>
+                                </div>
+                                <div class="flex">
+                                  <div
+                                    class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+                                  >
+                                    <div
+                                      class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
+                                    >
+                                      20 篇文章
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
                   </template>
                 </FloatingDropdown>
@@ -227,8 +521,8 @@ onMounted(() => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="h-96 w-80 p-4">
-                      <div class="bg-white">
+                    <div class="h-96 w-80">
+                      <div class="bg-white p-4">
                         <!--TODO: Auto Focus-->
                         <FormKit
                           placeholder="输入关键词搜索"
@@ -240,15 +534,10 @@ onMounted(() => {
                           <li
                             v-for="(user, index) in users"
                             :key="index"
-                            class="cursor-pointer py-4 hover:bg-gray-50"
+                            v-close-popper
+                            class="cursor-pointer hover:bg-gray-50"
                           >
-                            <div class="flex items-center space-x-4">
-                              <div class="flex items-center">
-                                <input
-                                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                                  type="checkbox"
-                                />
-                              </div>
+                            <div class="flex items-center space-x-4 px-4 py-3">
                               <div class="flex-shrink-0">
                                 <img
                                   :alt="user.spec.displayName"
@@ -327,48 +616,93 @@ onMounted(() => {
           </div>
         </div>
       </template>
-      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
-        <li v-for="(post, index) in postsRef" :key="index">
+
+      <VEmpty
+        v-if="!posts.items.length && !loading"
+        message="你可以尝试刷新或者新建文章"
+        title="当前没有文章"
+      >
+        <template #actions>
+          <VSpace>
+            <VButton @click="handleFetchPosts">刷新</VButton>
+            <VButton type="primary" :route="{ name: 'PostEditor' }">
+              <template #icon>
+                <IconAddCircle class="h-full w-full" />
+              </template>
+              新建文章
+            </VButton>
+          </VSpace>
+        </template>
+      </VEmpty>
+      <ul
+        v-else
+        class="box-border h-full w-full divide-y divide-gray-100"
+        role="list"
+      >
+        <li v-for="(post, index) in posts.items" :key="index">
           <div
             :class="{
-              'bg-gray-100': selected?.id === post.id || post.checked,
+              'bg-gray-100': checkSelection(post.post),
             }"
             class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
           >
             <div
-              v-show="selected?.id === post.id || post.checked"
+              v-show="checkSelection(post.post)"
               class="absolute inset-y-0 left-0 w-0.5 bg-primary"
             ></div>
             <div class="relative flex flex-row items-center">
               <div class="mr-4 hidden items-center sm:flex">
                 <input
-                  v-model="post.checked"
+                  v-model="selectedPostNames"
+                  :value="post.post.metadata.name"
                   class="h-4 w-4 rounded border-gray-300 text-indigo-600"
+                  name="post-checkbox"
                   type="checkbox"
                 />
               </div>
               <div class="flex-1">
                 <div class="flex flex-col sm:flex-row">
-                  <span
-                    class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
-                    @click="handleRouteToEditor(post)"
+                  <RouterLink
+                    :to="{
+                      name: 'PostEditor',
+                      query: { name: post.post.metadata.name },
+                    }"
                   >
-                    {{ post.title }}
-                  </span>
+                    <span
+                      class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
+                    >
+                      {{ post.post.spec.title }}
+                    </span>
+                  </RouterLink>
                   <VSpace class="mt-1 sm:mt-0">
-                    <VTag v-for="(tag, tagIndex) in post.tags" :key="tagIndex">
-                      {{ tag.name }}
-                    </VTag>
+                    <RouterLink
+                      v-for="(tag, tagIndex) in post.tags"
+                      :key="tagIndex"
+                      :to="{
+                        name: 'Tags',
+                        query: { name: tag.metadata.name },
+                      }"
+                    >
+                      <PostTag :tag="tag"></PostTag>
+                    </RouterLink>
                   </VSpace>
                 </div>
                 <div class="mt-1 flex">
                   <VSpace>
-                    <span class="text-xs text-gray-500"
-                      >访问量 {{ post.visits }}</span
-                    >
-                    <span class="text-xs text-gray-500"
-                      >评论 {{ post.commentCount }}</span
+                    <p
+                      v-if="post.categories.length"
+                      class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
                     >
+                      分类：<span
+                        v-for="(category, index) in post.categories"
+                        :key="index"
+                        class="cursor-pointer hover:text-gray-900"
+                      >
+                        {{ category.spec.displayName }}
+                      </span>
+                    </p>
+                    <span class="text-xs text-gray-500">访问量 0</span>
+                    <span class="text-xs text-gray-500"> 评论 0 </span>
                   </VSpace>
                 </div>
               </div>
@@ -376,15 +710,73 @@ onMounted(() => {
                 <div
                   class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
-                  <img
-                    class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
-                    src="https://ryanc.cc/avatar"
-                  />
-                  <time class="text-sm text-gray-500" datetime="2020-01-07">
-                    2020-01-07
+                  <RouterLink
+                    v-for="(contributor, index) in post.contributors"
+                    :key="index"
+                    :to="{
+                      name: 'UserDetail',
+                      params: { name: contributor.name },
+                    }"
+                  >
+                    <img
+                      v-tooltip="contributor.displayName"
+                      :alt="contributor.name"
+                      :src="contributor.avatar"
+                      :title="contributor.displayName"
+                      class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
+                    />
+                  </RouterLink>
+                  <span class="text-sm text-gray-500">
+                    {{ finalStatus(post.post) }}
+                  </span>
+                  <span>
+                    <IconEye
+                      v-if="post.post.spec.visible === 'PUBLIC'"
+                      v-tooltip="`公开访问`"
+                      class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                    />
+                    <IconEyeOff
+                      v-if="post.post.spec.visible === 'PRIVATE'"
+                      v-tooltip="`私有访问`"
+                      class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                    />
+                    <IconTeam
+                      v-if="post.post.spec.visible === 'INTERNAL'"
+                      v-tooltip="`内部成员可访问`"
+                      class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                    />
+                  </span>
+                  <time class="text-sm text-gray-500">
+                    {{ formatDatetime(post.post.metadata.creationTimestamp) }}
                   </time>
-                  <span class="cursor-pointer">
-                    <IconSettings @click.stop="handleSelect(post)" />
+                  <span>
+                    <FloatingDropdown>
+                      <IconSettings
+                        class="cursor-pointer transition-all hover:text-blue-600"
+                      />
+                      <template #popper>
+                        <div class="w-48 p-2">
+                          <VSpace class="w-full" direction="column">
+                            <VButton
+                              v-close-popper
+                              block
+                              type="secondary"
+                              @click="handleOpenSettingModal(post.post)"
+                            >
+                              设置
+                            </VButton>
+                            <VButton
+                              v-close-popper
+                              block
+                              type="danger"
+                              @click="handleDelete(post.post)"
+                            >
+                              删除
+                            </VButton>
+                          </VSpace>
+                        </div>
+                      </template>
+                    </FloatingDropdown>
                   </span>
                 </div>
               </div>
@@ -395,7 +787,12 @@ onMounted(() => {
 
       <template #footer>
         <div class="bg-white sm:flex sm:items-center sm:justify-end">
-          <VPagination :page="1" :size="10" :total="20" />
+          <VPagination
+            :page="posts.page"
+            :size="posts.size"
+            :total="posts.total"
+            @change="handlePaginationChange"
+          />
         </div>
       </template>
     </VCard>
diff --git a/src/modules/contents/posts/categories/CategoryList.vue b/src/modules/contents/posts/categories/CategoryList.vue
index e7ec07d5..8e0d892d 100644
--- a/src/modules/contents/posts/categories/CategoryList.vue
+++ b/src/modules/contents/posts/categories/CategoryList.vue
@@ -1,25 +1,96 @@
 <script lang="ts" setup>
+// core libs
+import { ref } from "vue";
+import { apiClient } from "@halo-dev/admin-shared";
+
+// components
 import {
+  IconAddCircle,
   IconBookRead,
-  IconList,
-  IconSettings,
   VButton,
   VCard,
+  VEmpty,
   VPageHeader,
   VSpace,
 } from "@halo-dev/components";
 import CategoryEditingModal from "./components/CategoryEditingModal.vue";
+import CategoryListItem from "./components/CategoryListItem.vue";
 
-import { ref } from "vue";
+// types
+import type { Category } from "@halo-dev/api-client";
+import type { CategoryTree } from "./utils";
+import {
+  convertCategoryTreeToCategory,
+  convertTreeToCategories,
+  resetCategoriesTreePriority,
+} from "./utils";
+
+// libs
+import { useDebounceFn } from "@vueuse/core";
+
+// hooks
+import { usePostCategory } from "./composables/use-post-category";
 
 const editingModal = ref(false);
+const selectedCategory = ref<Category | null>(null);
+
+const {
+  categories,
+  categoriesTree,
+  loading,
+  handleFetchCategories,
+  handleDelete,
+} = usePostCategory();
+
+const handleUpdateInBatch = useDebounceFn(async () => {
+  const categoriesTreeToUpdate = resetCategoriesTreePriority(
+    categoriesTree.value
+  );
+  const categoriesToUpdate = convertTreeToCategories(categoriesTreeToUpdate);
+  try {
+    const promises = categoriesToUpdate.map((category) =>
+      apiClient.extension.category.updatecontentHaloRunV1alpha1Category(
+        category.metadata.name,
+        category
+      )
+    );
+    await Promise.all(promises);
+  } catch (e) {
+    console.log("Failed to update categories", e);
+  } finally {
+    await handleFetchCategories();
+  }
+}, 500);
+
+const handleOpenEditingModal = (category: CategoryTree) => {
+  selectedCategory.value = convertCategoryTreeToCategory(category);
+  editingModal.value = true;
+};
+
+const onEditingModalClose = () => {
+  selectedCategory.value = null;
+  handleFetchCategories();
+};
 </script>
 <template>
-  <CategoryEditingModal v-model:visible="editingModal" />
+  <CategoryEditingModal
+    v-model:visible="editingModal"
+    :category="selectedCategory"
+    @close="onEditingModalClose"
+  />
   <VPageHeader title="文章分类">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
     </template>
+
+    <template #actions>
+      <VButton type="secondary" @click="editingModal = true">
+        <template #icon>
+          <IconAddCircle class="h-full w-full" />
+        </template>
+        新建
+      </VButton>
+    </template>
   </VPageHeader>
   <div class="m-0 md:m-4">
     <VCard :body-class="['!p-0']">
@@ -29,81 +100,37 @@ const editingModal = ref(false);
             class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
             <div class="flex w-full flex-1 sm:w-auto">
-              <span class="text-base font-medium"> {{ 10 }} 个分类 </span>
-            </div>
-            <div class="mt-4 flex sm:mt-0">
-              <VSpace>
-                <VButton size="xs" type="default" @click="editingModal = true">
-                  新增
-                </VButton>
-              </VSpace>
+              <span class="text-base font-medium">
+                {{ categories.length }} 个分类
+              </span>
             </div>
           </div>
         </div>
       </template>
-      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
-        <li v-for="i in 10" :key="i">
-          <div
-            class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-          >
-            <div
-              class="drag-element absolute inset-y-0 left-0 flex hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
-            >
-              <IconList class="h-3.5 w-3.5" />
-            </div>
-            <div class="relative flex flex-row items-center">
-              <div class="flex-1">
-                <div class="flex flex-col sm:flex-row">
-                  <span
-                    class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
-                  >
-                    主题
-                  </span>
-                  <VSpace class="mt-1 sm:mt-0"></VSpace>
-                </div>
-                <div class="mt-1 flex">
-                  <span class="text-xs text-gray-500">
-                    https://halo.run/categories/themes
-                  </span>
-                </div>
-              </div>
-              <div class="flex">
-                <div
-                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                >
-                  <div
-                    class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
-                  >
-                    20 篇文章
-                  </div>
-                  <time class="text-sm text-gray-500" datetime="2020-01-07">
-                    2020-01-07
-                  </time>
-                  <span class="cursor-pointer">
-                    <FloatingDropdown>
-                      <IconSettings
-                        class="cursor-pointer transition-all hover:text-blue-600"
-                      />
-                      <template #popper>
-                        <div class="w-48 p-2">
-                          <VSpace class="w-full" direction="column">
-                            <VButton v-close-popper block type="secondary">
-                              修改
-                            </VButton>
-                            <VButton v-close-popper block type="danger">
-                              删除
-                            </VButton>
-                          </VSpace>
-                        </div>
-                      </template>
-                    </FloatingDropdown>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <VEmpty
+        v-if="!categories.length && !loading"
+        message="你可以尝试刷新或者新建分类"
+        title="当前没有分类"
+      >
+        <template #actions>
+          <VSpace>
+            <VButton @click="handleFetchCategories">刷新</VButton>
+            <VButton type="primary" @click="editingModal = true">
+              <template #icon>
+                <IconAddCircle class="h-full w-full" />
+              </template>
+              新建分类
+            </VButton>
+          </VSpace>
+        </template>
+      </VEmpty>
+      <CategoryListItem
+        v-else
+        :categories="categoriesTree"
+        @change="handleUpdateInBatch"
+        @delete="handleDelete"
+        @open-editing="handleOpenEditingModal"
+      />
     </VCard>
   </div>
 </template>
diff --git a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index 7c44c9ac..0433a3ed 100644
--- a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -1,14 +1,28 @@
 <script lang="ts" setup>
+// core libs
+import { computed, ref, watch, watchEffect } from "vue";
+import { apiClient } from "@halo-dev/admin-shared";
+
+// components
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 
-withDefaults(
+// types
+import type { Category } from "@halo-dev/api-client";
+
+// libs
+import cloneDeep from "lodash.clonedeep";
+import { reset, submitForm } from "@formkit/core";
+import { useMagicKeys } from "@vueuse/core";
+import { v4 as uuid } from "uuid";
+
+const props = withDefaults(
   defineProps<{
     visible: boolean;
-    category: unknown | null;
+    category: Category | null;
   }>(),
   {
     visible: false,
-    category: undefined,
+    category: null,
   }
 );
 
@@ -17,36 +31,123 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
+const initialFormState: Category = {
+  spec: {
+    displayName: "",
+    slug: "",
+    description: undefined,
+    cover: undefined,
+    template: undefined,
+    priority: 0,
+    children: [],
+  },
+  status: {},
+  apiVersion: "content.halo.run/v1alpha1",
+  kind: "Category",
+  metadata: {
+    name: uuid(),
+  },
+};
+
+const formState = ref<Category>(cloneDeep(initialFormState));
+const saving = ref(false);
+
+const isUpdateMode = computed(() => {
+  return !!formState.value.metadata.creationTimestamp;
+});
+
+const modalTitle = computed(() => {
+  return isUpdateMode.value ? "编辑文章分类" : "新增文章分类";
+});
+
+const handleSaveCategory = async () => {
+  try {
+    saving.value = true;
+    if (isUpdateMode.value) {
+      await apiClient.extension.category.updatecontentHaloRunV1alpha1Category(
+        formState.value.metadata.name,
+        formState.value
+      );
+    } else {
+      await apiClient.extension.category.createcontentHaloRunV1alpha1Category(
+        formState.value
+      );
+    }
+    onVisibleChange(false);
+  } catch (e) {
+    console.error("Failed to create category", e);
+  } finally {
+    saving.value = false;
+  }
+};
+
 const onVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
     emit("close");
   }
 };
+
+const { Command_Enter } = useMagicKeys();
+
+watchEffect(() => {
+  if (Command_Enter.value && props.visible) {
+    submitForm("category-form");
+  }
+});
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible && props.category) {
+      formState.value = cloneDeep(props.category);
+      return;
+    }
+    formState.value = cloneDeep(initialFormState);
+    reset("category-form");
+    formState.value.metadata.name = uuid();
+  }
+);
 </script>
 <template>
   <VModal
+    :title="modalTitle"
     :visible="visible"
     :width="600"
-    title="编辑文章分类"
     @update:visible="onVisibleChange"
   >
-    <FormKit id="category-form" type="form">
-      <FormKit label="名称" type="text" validation="required"></FormKit>
+    <FormKit id="category-form" type="form" @submit="handleSaveCategory">
       <FormKit
+        v-model="formState.spec.displayName"
+        label="名称"
+        type="text"
+        validation="required"
+      ></FormKit>
+      <FormKit
+        v-model="formState.spec.slug"
         help="通常作为分类访问地址标识"
         label="别名"
         type="text"
         validation="required"
       ></FormKit>
       <FormKit label="上级目录" type="select"></FormKit>
-      <FormKit help="需要主题适配以支持" label="封面图" type="text"></FormKit>
-      <FormKit help="需要主题适配以支持" label="描述" type="textarea"></FormKit>
+      <FormKit
+        v-model="formState.spec.cover"
+        help="需要主题适配以支持"
+        label="封面图"
+        type="text"
+      ></FormKit>
+      <FormKit
+        v-model="formState.spec.description"
+        help="需要主题适配以支持"
+        label="描述"
+        type="textarea"
+      ></FormKit>
     </FormKit>
     <template #footer>
       <VSpace>
         <VButton type="secondary" @click="$formkit.submit('category-form')">
-          提交 ⌘ + ↵
+          保存 ⌘ + ↵
         </VButton>
         <VButton @click="onVisibleChange(false)">取消 Esc</VButton>
       </VSpace>
diff --git a/src/modules/contents/posts/categories/components/CategoryListItem.vue b/src/modules/contents/posts/categories/components/CategoryListItem.vue
new file mode 100644
index 00000000..eab5d0fa
--- /dev/null
+++ b/src/modules/contents/posts/categories/components/CategoryListItem.vue
@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { IconList, IconSettings, VButton, VSpace } from "@halo-dev/components";
+import Draggable from "vuedraggable";
+import type { CategoryTree } from "../utils";
+import { ref } from "vue";
+import { formatDatetime } from "@/utils/date";
+
+withDefaults(
+  defineProps<{
+    categories: CategoryTree[];
+  }>(),
+  {
+    categories: () => [],
+  }
+);
+
+const emit = defineEmits<{
+  (event: "change"): void;
+  (event: "open-editing", category: CategoryTree): void;
+  (event: "delete", category: CategoryTree): void;
+}>();
+
+const isDragging = ref(false);
+
+function onChange() {
+  emit("change");
+}
+
+function onOpenEditingModal(category: CategoryTree) {
+  emit("open-editing", category);
+}
+
+function onDelete(category: CategoryTree) {
+  emit("delete", category);
+}
+</script>
+<template>
+  <draggable
+    :list="categories"
+    class="box-border h-full w-full divide-y divide-gray-100"
+    ghost-class="opacity-50"
+    group="category-item"
+    handle=".drag-element"
+    item-key="metadata.name"
+    tag="ul"
+    @change="onChange"
+    @end="isDragging = false"
+    @start="isDragging = true"
+  >
+    <template #item="{ element: category }">
+      <li>
+        <div
+          class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
+        >
+          <div
+            class="drag-element absolute inset-y-0 left-0 flex hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
+          >
+            <IconList class="h-3.5 w-3.5" />
+          </div>
+          <div class="relative flex flex-row items-center">
+            <div class="flex-1">
+              <div class="flex flex-col sm:flex-row">
+                <span
+                  class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
+                >
+                  {{ category.spec.displayName }}
+                </span>
+                <VSpace class="mt-1 sm:mt-0"></VSpace>
+              </div>
+              <div class="mt-1 flex">
+                <span class="text-xs text-gray-500">
+                  /categories/{{ category.spec.slug }}
+                </span>
+              </div>
+            </div>
+            <div class="flex">
+              <div
+                class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+              >
+                <FloatingTooltip
+                  v-if="category.metadata.deletionTimestamp"
+                  class="mr-4 hidden items-center sm:flex"
+                >
+                  <div class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600">
+                    <span
+                      class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+                    ></span>
+                  </div>
+                  <template #popper> 删除中</template>
+                </FloatingTooltip>
+                <div
+                  class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
+                >
+                  20 篇文章
+                </div>
+                <time class="text-sm text-gray-500">
+                  {{ formatDatetime(category.metadata.creationTimestamp) }}
+                </time>
+                <span class="self-center">
+                  <FloatingDropdown>
+                    <IconSettings
+                      class="cursor-pointer transition-all hover:text-blue-600"
+                    />
+                    <template #popper>
+                      <div class="w-48 p-2">
+                        <VSpace class="w-full" direction="column">
+                          <VButton
+                            v-close-popper
+                            block
+                            type="secondary"
+                            @click="onOpenEditingModal(category)"
+                          >
+                            修改
+                          </VButton>
+                          <VButton
+                            v-close-popper
+                            block
+                            type="danger"
+                            @click="onDelete(category)"
+                          >
+                            删除
+                          </VButton>
+                        </VSpace>
+                      </div>
+                    </template>
+                  </FloatingDropdown>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <CategoryListItem
+          :categories="category.spec.children"
+          class="pl-10 transition-all duration-300"
+          @change="onChange"
+          @delete="onDelete"
+          @open-editing="onOpenEditingModal"
+        />
+      </li>
+    </template>
+  </draggable>
+</template>
diff --git a/src/modules/contents/posts/categories/components/__tests__/CategoryEditingModal.spec.ts b/src/modules/contents/posts/categories/components/__tests__/CategoryEditingModal.spec.ts
new file mode 100644
index 00000000..e994cf1e
--- /dev/null
+++ b/src/modules/contents/posts/categories/components/__tests__/CategoryEditingModal.spec.ts
@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import CategoryEditingModal from "../CategoryEditingModal.vue";
+
+describe("CategoryEditingModal", function () {
+  it("should render", function () {
+    expect(mount(CategoryEditingModal)).toBeDefined();
+  });
+});
diff --git a/src/modules/contents/posts/categories/composables/use-post-category.ts b/src/modules/contents/posts/categories/composables/use-post-category.ts
new file mode 100644
index 00000000..02958215
--- /dev/null
+++ b/src/modules/contents/posts/categories/composables/use-post-category.ts
@@ -0,0 +1,69 @@
+import { apiClient } from "@halo-dev/admin-shared";
+import type { Category } from "@halo-dev/api-client";
+import type { Ref } from "vue";
+import { onMounted, ref } from "vue";
+import type { CategoryTree } from "@/modules/contents/posts/categories/utils";
+import { buildCategoriesTree } from "@/modules/contents/posts/categories/utils";
+import { useDialog } from "@halo-dev/components";
+
+interface usePostCategoryReturn {
+  categories: Ref<Category[]>;
+  categoriesTree: Ref<CategoryTree[]>;
+  loading: Ref<boolean>;
+  handleFetchCategories: () => void;
+  handleDelete: (category: CategoryTree) => void;
+}
+
+export function usePostCategory(): usePostCategoryReturn {
+  const categories = ref<Category[]>([] as Category[]);
+  const categoriesTree = ref<CategoryTree[]>([] as CategoryTree[]);
+  const loading = ref(false);
+
+  const dialog = useDialog();
+
+  const handleFetchCategories = async () => {
+    try {
+      loading.value = true;
+      const { data } =
+        await apiClient.extension.category.listcontentHaloRunV1alpha1Category(
+          0,
+          0
+        );
+      categories.value = data.items;
+      categoriesTree.value = buildCategoriesTree(data.items);
+    } catch (e) {
+      console.error("Failed to fetch categories", e);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleDelete = async (category: CategoryTree) => {
+    dialog.warning({
+      title: "确定要删除该分类吗？",
+      description: "删除此分类之后，对应文章的关联将被解除。该操作不可恢复。",
+      confirmType: "danger",
+      onConfirm: async () => {
+        try {
+          await apiClient.extension.category.deletecontentHaloRunV1alpha1Category(
+            category.metadata.name
+          );
+        } catch (e) {
+          console.error("Failed to delete tag", e);
+        } finally {
+          await handleFetchCategories();
+        }
+      },
+    });
+  };
+
+  onMounted(handleFetchCategories);
+
+  return {
+    categories,
+    categoriesTree,
+    loading,
+    handleFetchCategories,
+    handleDelete,
+  };
+}
diff --git a/src/modules/contents/posts/categories/utils/index.ts b/src/modules/contents/posts/categories/utils/index.ts
new file mode 100644
index 00000000..0a552d6d
--- /dev/null
+++ b/src/modules/contents/posts/categories/utils/index.ts
@@ -0,0 +1,123 @@
+import type { Category, CategorySpec } from "@halo-dev/api-client";
+import cloneDeep from "lodash.clonedeep";
+
+export interface CategoryTreeSpec extends Omit<CategorySpec, "children"> {
+  children: CategoryTree[];
+}
+
+export interface CategoryTree extends Omit<Category, "spec"> {
+  spec: CategoryTreeSpec;
+}
+
+export function buildCategoriesTree(categories: Category[]): CategoryTree[] {
+  const categoriesToUpdate = cloneDeep(categories);
+
+  const categoriesMap = {};
+  const parentMap = {};
+
+  categoriesToUpdate.forEach((category) => {
+    categoriesMap[category.metadata.name] = category;
+    // @ts-ignore
+    category.spec.children.forEach((child) => {
+      parentMap[child] = category.metadata.name;
+    });
+    // @ts-ignore
+    category.spec.children = [];
+  });
+
+  categoriesToUpdate.forEach((category) => {
+    const parentName = parentMap[category.metadata.name];
+    if (parentName && categoriesMap[parentName]) {
+      categoriesMap[parentName].spec.children.push(category);
+    }
+  });
+
+  const categoriesTree = categoriesToUpdate.filter(
+    (node) => parentMap[node.metadata.name] === undefined
+  );
+
+  return sortCategoriesTree(categoriesTree);
+}
+
+export function sortCategoriesTree(
+  categoriesTree: CategoryTree[] | Category[]
+): CategoryTree[] {
+  return categoriesTree
+    .sort((a, b) => {
+      if (a.spec.priority < b.spec.priority) {
+        return -1;
+      }
+      if (a.spec.priority > b.spec.priority) {
+        return 1;
+      }
+      return 0;
+    })
+    .map((category) => {
+      if (category.spec.children.length) {
+        return {
+          ...category,
+          spec: {
+            ...category.spec,
+            children: sortCategoriesTree(category.spec.children),
+          },
+        };
+      }
+      return category;
+    });
+}
+
+export function resetCategoriesTreePriority(
+  categoriesTree: CategoryTree[]
+): CategoryTree[] {
+  for (let i = 0; i < categoriesTree.length; i++) {
+    categoriesTree[i].spec.priority = i;
+    if (categoriesTree[i].spec.children) {
+      resetCategoriesTreePriority(categoriesTree[i].spec.children);
+    }
+  }
+  return categoriesTree;
+}
+
+export function convertTreeToCategories(categoriesTree: CategoryTree[]) {
+  const categories: Category[] = [];
+  const categoriesMap = new Map<string, Category>();
+  const convertCategory = (node: CategoryTree | undefined) => {
+    if (!node) {
+      return;
+    }
+    const children = node.spec.children || [];
+    categoriesMap.set(node.metadata.name, {
+      ...node,
+      spec: {
+        ...node.spec,
+        // @ts-ignore
+        children: children.map((child) => child.metadata.name),
+      },
+    });
+    children.forEach((child) => {
+      convertCategory(child);
+    });
+  };
+  categoriesTree.forEach((node) => {
+    convertCategory(node);
+  });
+  categoriesMap.forEach((node) => {
+    categories.push(node);
+  });
+  return categories;
+}
+
+export function convertCategoryTreeToCategory(
+  categoryTree: CategoryTree
+): Category {
+  const childNames = categoryTree.spec.children.map(
+    (child) => child.metadata.name
+  );
+  return {
+    ...categoryTree,
+    spec: {
+      ...categoryTree.spec,
+      children: childNames,
+    },
+  };
+}
diff --git a/src/modules/contents/posts/components/PostSettingModal.vue b/src/modules/contents/posts/components/PostSettingModal.vue
index e2461954..92795cbd 100644
--- a/src/modules/contents/posts/components/PostSettingModal.vue
+++ b/src/modules/contents/posts/components/PostSettingModal.vue
@@ -1,47 +1,96 @@
 <script lang="ts" setup>
-import {
-  IconArrowLeft,
-  IconArrowRight,
-  VButton,
-  VModal,
-  VSpace,
-  VTabItem,
-  VTabs,
-} from "@halo-dev/components";
-import { ref, unref, watch } from "vue";
-import type { Post } from "@halo-dev/admin-api";
+import { VButton, VModal, VSpace, VTabItem, VTabs } from "@halo-dev/components";
+import { computed, ref, watch, watchEffect } from "vue";
+import type { PostRequest } from "@halo-dev/api-client";
+import cloneDeep from "lodash.clonedeep";
+import { usePostTag } from "@/modules/contents/posts/tags/composables/use-post-tag";
+import { usePostCategory } from "@/modules/contents/posts/categories/composables/use-post-category";
+import { apiClient } from "@halo-dev/admin-shared";
+import { v4 as uuid } from "uuid";
 
-interface FormState {
-  post: Post | Record<string, unknown>;
-  saving: boolean;
-}
+const initialFormState: PostRequest = {
+  post: {
+    spec: {
+      title: "",
+      slug: "",
+      template: "",
+      cover: "",
+      deleted: false,
+      published: false,
+      publishTime: undefined,
+      pinned: false,
+      allowComment: true,
+      visible: "PUBLIC",
+      version: 1,
+      priority: 0,
+      excerpt: {
+        autoGenerate: true,
+        raw: "",
+      },
+      categories: [],
+      tags: [],
+      htmlMetas: [],
+    },
+    apiVersion: "content.halo.run/v1alpha1",
+    kind: "Post",
+    metadata: {
+      name: uuid(),
+    },
+  },
+  content: {
+    raw: "",
+    content: "",
+    rawType: "HTML",
+  },
+};
 
 const props = withDefaults(
   defineProps<{
     visible: boolean;
-    post: Post | Record<string, unknown> | null;
+    post?: PostRequest | null;
+    onlyEmit?: boolean;
   }>(),
   {
     visible: false,
     post: null,
+    onlyEmit: false,
   }
 );
 
 const emit = defineEmits<{
   (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
-  (event: "previous"): void;
-  (event: "next"): void;
+  (event: "saved", post: PostRequest): void;
 }>();
 
-const settingActiveId = ref("general");
-const formState = ref<FormState>({
-  post: {},
-  saving: false,
+const activeTab = ref("general");
+const formState = ref<PostRequest>(cloneDeep(initialFormState));
+const saving = ref(false);
+const publishing = ref(false);
+const publishCanceling = ref(false);
+
+const { categories } = usePostCategory();
+const categoriesMap = computed(() => {
+  return categories.value.map((category) => {
+    return {
+      value: category.metadata.name,
+      label: category.spec.displayName,
+    };
+  });
 });
 
-watch([() => props.visible, () => props.post], () => {
-  formState.value.post = unref(props.post) || {};
+const { tags } = usePostTag();
+const tagsMap = computed(() => {
+  return tags.value.map((tag) => {
+    return {
+      value: tag.metadata.name,
+      label: tag.spec.displayName,
+    };
+  });
+});
+
+const isUpdateMode = computed(() => {
+  return !!formState.value.post.metadata.creationTimestamp;
 });
 
 const handleVisibleChange = (visible: boolean) => {
@@ -50,92 +99,197 @@ const handleVisibleChange = (visible: boolean) => {
     emit("close");
   }
 };
+
+const handleSaveOnly = async () => {
+  if (props.onlyEmit) {
+    emit("saved", formState.value);
+    return;
+  }
+  try {
+    saving.value = true;
+    if (isUpdateMode.value) {
+      const { data } = await apiClient.post.updateDraftPost(
+        formState.value.post.metadata.name,
+        formState.value
+      );
+      formState.value.post = data;
+      emit("saved", formState.value);
+    } else {
+      const { data } = await apiClient.post.draftPost(formState.value);
+      formState.value.post = data;
+      emit("saved", formState.value);
+    }
+  } catch (e) {
+    console.error("Failed to save post", e);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const handlePublish = async () => {
+  try {
+    publishing.value = true;
+    const { data } = await apiClient.post.publishPost(
+      formState.value.post.metadata.name
+    );
+    formState.value.post = data;
+    emit("saved", formState.value);
+  } catch (e) {
+    alert(`发布异常: ${e}`);
+    console.error("Failed to publish post", e);
+  } finally {
+    publishing.value = false;
+  }
+};
+
+const handlePublishCanceling = async () => {
+  try {
+    publishCanceling.value = true;
+    const postToUpdate = cloneDeep(formState.value);
+    postToUpdate.post.spec.published = false;
+
+    const { data } = await apiClient.post.updateDraftPost(
+      postToUpdate.post.metadata.name,
+      postToUpdate
+    );
+
+    formState.value.post = data;
+    emit("saved", formState.value);
+  } catch (e) {
+    console.log("Failed to cancel publish", e);
+  } finally {
+    publishCanceling.value = false;
+  }
+};
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible && props.post) {
+      formState.value = cloneDeep(props.post);
+    }
+    if (!visible) {
+      // TODO
+    }
+  }
+);
+
+watchEffect(() => {
+  if (props.post) {
+    formState.value = cloneDeep(props.post);
+  }
+});
 </script>
 <template>
   <VModal
     :visible="visible"
-    :width="680"
+    :width="700"
     title="文章设置"
     @update:visible="handleVisibleChange"
   >
     <template #actions>
-      <div class="modal-header-action" @click="emit('previous')">
-        <IconArrowLeft />
-      </div>
-      <div class="modal-header-action" @click="emit('next')">
-        <IconArrowRight />
-      </div>
+      <slot name="actions"></slot>
     </template>
 
-    <VTabs v-model:active-id="settingActiveId" type="outline">
+    <VTabs v-model:active-id="activeTab" type="outline">
       <VTabItem id="general" label="常规">
-        <FormKit
-          id="basic"
-          :actions="false"
-          :model-value="formState.post"
-          :preserve="true"
-          type="form"
-        >
+        <FormKit id="basic" :actions="false" :preserve="true" type="form">
           <FormKit
+            v-model="formState.post.spec.title"
             label="标题"
-            name="title"
             type="text"
             validation="required"
           ></FormKit>
           <FormKit
+            v-model="formState.post.spec.slug"
             label="别名"
             name="slug"
             type="text"
             validation="required"
           ></FormKit>
-          <FormKit label="分类目录" type="select"></FormKit>
-          <FormKit label="标签" type="select"></FormKit>
-          <FormKit label="摘要" name="summary" type="textarea"></FormKit>
+          <FormKit
+            v-model="formState.post.spec.categories"
+            :options="categoriesMap"
+            label="分类目录"
+            name="categories"
+            type="checkbox"
+          />
+          <FormKit
+            v-model="formState.post.spec.tags"
+            :options="tagsMap"
+            label="标签"
+            name="tags"
+            type="checkbox"
+          />
+          <FormKit
+            v-model="formState.post.spec.excerpt.autoGenerate"
+            :options="[
+              { label: '是', value: true },
+              { label: '否', value: false },
+            ]"
+            label="自动生成摘要"
+            type="radio"
+          >
+          </FormKit>
+          <FormKit
+            v-if="!formState.post.spec.excerpt.autoGenerate"
+            v-model="formState.post.spec.excerpt.raw"
+            label="自定义摘要"
+            type="textarea"
+          ></FormKit>
         </FormKit>
       </VTabItem>
       <VTabItem id="advanced" label="高级">
-        <FormKit
-          id="advanced"
-          :actions="false"
-          :model-value="formState.post"
-          :preserve="true"
-          type="form"
-        >
+        <FormKit id="advanced" :actions="false" :preserve="true" type="form">
           <FormKit
+            v-model="formState.post.spec.allowComment"
             :options="[
               { label: '是', value: true },
               { label: '否', value: false },
             ]"
             label="禁止评论"
-            name="disallowComment"
             type="radio"
           ></FormKit>
           <FormKit
+            v-model="formState.post.spec.pinned"
             :options="[
               { label: '是', value: true },
               { label: '否', value: false },
             ]"
             label="是否置顶"
-            name="topPriority"
+            name="pinned"
             type="radio"
           ></FormKit>
           <FormKit
+            v-model="formState.post.spec.visible"
+            :options="[
+              { label: '公开', value: 'PUBLIC' },
+              { label: '内部成员可访问', value: 'INTERNAL' },
+              { label: '私有', value: 'PRIVATE' },
+            ]"
+            label="可见性"
+            name="visible"
+            type="select"
+          ></FormKit>
+          <FormKit
+            v-model="formState.post.spec.publishTime"
             label="发表时间"
-            name="createTime"
             type="datetime-local"
           ></FormKit>
-          <FormKit label="自定义模板" type="select"></FormKit>
-          <FormKit label="封面图" name="thumbnail" type="text"></FormKit>
+          <FormKit
+            v-model="formState.post.spec.template"
+            label="自定义模板"
+            type="text"
+          ></FormKit>
+          <FormKit
+            v-model="formState.post.spec.cover"
+            label="封面图"
+            type="text"
+          ></FormKit>
         </FormKit>
       </VTabItem>
       <VTabItem id="seo" label="SEO">
-        <FormKit
-          id="seo"
-          :actions="false"
-          :model-value="formState.post"
-          :preserve="true"
-          type="form"
-        >
+        <FormKit id="seo" :actions="false" :preserve="true" type="form">
           <FormKit
             label="自定义关键词"
             name="metaKeywords"
@@ -150,13 +304,7 @@ const handleVisibleChange = (visible: boolean) => {
       </VTabItem>
       <VTabItem id="metas" label="元数据"></VTabItem>
       <VTabItem id="inject-code" label="代码注入">
-        <FormKit
-          id="inject-code"
-          :actions="false"
-          :model-value="formState.post"
-          :preserve="true"
-          type="form"
-        >
+        <FormKit id="inject-code" :actions="false" :preserve="true" type="form">
           <FormKit label="CSS" type="textarea"></FormKit>
           <FormKit label="JavaScript" type="textarea"></FormKit>
         </FormKit>
@@ -166,14 +314,32 @@ const handleVisibleChange = (visible: boolean) => {
     <template #footer>
       <VSpace>
         <VButton
-          :loading="formState.saving"
-          type="secondary"
-          @click="formState.saving = !formState.saving"
+          v-if="formState.post.status?.phase === 'PUBLISHED'"
+          :loading="publishCanceling"
+          type="danger"
+          @click="handlePublishCanceling"
         >
-          保存
+          取消发布
         </VButton>
-        <VButton type="default" @click="handleVisibleChange(false)"
-          >取消
+        <VButton
+          v-else
+          :disabled="!isUpdateMode"
+          :loading="publishing"
+          type="secondary"
+          @click="handlePublish"
+        >
+          发布
+        </VButton>
+        <VButton
+          :loading="saving"
+          size="sm"
+          type="secondary"
+          @click="handleSaveOnly"
+        >
+          仅保存
+        </VButton>
+        <VButton size="sm" type="default" @click="handleVisibleChange(false)">
+          关闭
         </VButton>
       </VSpace>
     </template>
diff --git a/src/modules/contents/posts/components/__tests__/PostSettingModal.spec.ts b/src/modules/contents/posts/components/__tests__/PostSettingModal.spec.ts
new file mode 100644
index 00000000..8eaf79cd
--- /dev/null
+++ b/src/modules/contents/posts/components/__tests__/PostSettingModal.spec.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import PostSettingModal from "../PostSettingModal.vue";
+import { VDialogProvider } from "@halo-dev/components";
+
+describe("PostSettingModal", () => {
+  it("should render", () => {
+    const wrapper = mount({
+      components: {
+        VDialogProvider,
+        PostSettingModal,
+      },
+      template: `
+        <VDialogProvider>
+        <PostSettingModal></PostSettingModal>
+        </VDialogProvider>`,
+    });
+    expect(wrapper).toBeDefined();
+  });
+});
diff --git a/src/modules/contents/posts/posts-mock.ts b/src/modules/contents/posts/posts-mock.ts
deleted file mode 100644
index 1376fb6e..00000000
--- a/src/modules/contents/posts/posts-mock.ts
+++ /dev/null
@@ -1,1036 +0,0 @@
-// eslint-disable-next-line
-export const posts: any[] = [
-  {
-    id: 514,
-    title: "Halo 1.5.3 发布了",
-    status: "PUBLISHED",
-    slug: "halo-153-released",
-    editorType: "MARKDOWN",
-    updateTime: 1652087983741,
-    createTime: 1652087543478,
-    editTime: 1652087983738,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-153-released.html",
-    summary:
-      "Improvements优化邮件发送异常信息处理。 halo-dev/halo#1860 @ntdgy @superdgy优化静态存储的资源映射处理逻辑，支持手动操作 .halo/static 目录后，在后台通过刷新按钮更新资源映射。 halo-dev/halo#1907 @Yhcrown @muy",
-    thumbnail: "https://halo.run/upload/2022/05/1.5.3.png",
-    visits: 156,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 1128,
-    inProgress: false,
-    commentCount: 3,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 511,
-    title: "Halo 1.5.2 发布",
-    status: "PUBLISHED",
-    slug: "halo-152-released",
-    editorType: "MARKDOWN",
-    updateTime: 1649582521222,
-    createTime: 1649580837197,
-    editTime: 1649582521202,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-152-released.html",
-    summary:
-      "Improvements保存文章的时候不再保存内容到 posts 表，originalContent 和 formatContent 已经是废弃字段。 halo-dev/halo#1797 @guqing优化 Markdown 文档导入的 FrontMatter 的解析规则。 halo-dev/ha",
-    thumbnail: "https://halo.run/upload/2022/03/1.5.0.png",
-    visits: 1700,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 1483,
-    inProgress: false,
-    commentCount: 5,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 479,
-    title: "Halo 1.5.1 发布",
-    status: "PUBLISHED",
-    slug: "halo-151-released",
-    editorType: "MARKDOWN",
-    updateTime: 1648634917957,
-    createTime: 1648634014575,
-    editTime: 1648634917948,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-151-released.html",
-    summary:
-      "Bug Fixes修复文章加密和分类加密功能的逻辑问题。 halo-dev/halo#1781 halo-dev/halo#1785 @guqing @qiany-sui修复文章和分类的链接带有中文时从密码页重定向到详情页面提示 404 的问题。 halo-dev/halo#1786 @guqing",
-    thumbnail: "https://halo.run/upload/2022/03/1.5.0.png",
-    visits: 1007,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 1050,
-    inProgress: false,
-    commentCount: 7,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 447,
-    title: "Halo 1.5.0 发布",
-    status: "PUBLISHED",
-    slug: "halo-150-released",
-    editorType: "MARKDOWN",
-    updateTime: 1648025027976,
-    createTime: 1648007074766,
-    editTime: 1648025027971,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-150-released.html",
-    summary:
-      "距离我们 2020 年 9 月 24 号发布 1.4.0 已经过去了 545 天了，期间虽然有一些版本更新，但大多数都是 patch 修复版本。终于，在今天正式发布 1.5.0 版本。其中带来了大量的优化更新，下面为大家简单介绍一些亮点功能，详细更新日志可在本文末尾查阅。版本亮点文章表拆分在此版本中",
-    thumbnail: "https://halo.run/upload/2022/03/1.5.0.png",
-    visits: 1085,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 5852,
-    inProgress: false,
-    commentCount: 1,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 415,
-    title: "Butterfly",
-    status: "PUBLISHED",
-    slug: "butterfly",
-    editorType: "MARKDOWN",
-    updateTime: 1649680073984,
-    createTime: 1642992439970,
-    editTime: 1649680073975,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/butterfly.html",
-    summary:
-      "Butterfly 主题 Halo 移植版Butterfly 是Hexo社区hexo-theme-Butterfly 此次移植Halo由原版的 pug模板引擎 调整为 freemarker， 保持灵活性的同时最大限度的移植了原版功能，希望大家喜欢 ❤️ \uD83C\uDF38 同时也要在此感谢原作者 Jerry 欢迎",
-    thumbnail: "https://halo.run/upload/2022/04/Butterfly.png",
-    visits: 26609,
-    disallowComment: false,
-    password: "",
-    template: "theme",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 773,
-    inProgress: false,
-    commentCount: 33,
-    tags: [
-      {
-        id: 1,
-        name: "主题",
-        slug: "themes",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1580914893201,
-        fullPath: "https://halo.run/tags/themes.html",
-      },
-      {
-        id: 3,
-        name: "模板",
-        slug: "templates",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502785043,
-        fullPath: "https://halo.run/tags/templates.html",
-      },
-      {
-        id: 4,
-        name: "Halo 主题",
-        slug: "halo-themes",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502798309,
-        fullPath: "https://halo.run/tags/halo-themes.html",
-      },
-      {
-        id: 5,
-        name: "Halo 模板",
-        slug: "halo-templates",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502800759,
-        fullPath: "https://halo.run/tags/halo-templates.html",
-      },
-    ],
-    categories: [
-      {
-        id: 2,
-        name: "主题仓库",
-        slug: "themes",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1580904752816,
-        fullPath: "https://halo.run/categories/themes.html",
-        priority: 1,
-      },
-    ],
-    metas: {
-      theme_repo: "https://github.com/dhjddcn/halo-theme-butterfly",
-      theme_require: "1.4.11",
-      theme_id: "butterfly",
-      theme_author: "dhjddcn",
-      theme_description: "Butterfly 主题 Halo 移植版",
-      theme_version: "1.0.0",
-    },
-    topped: false,
-  },
-  {
-    id: 383,
-    title: "Joe 2.0",
-    status: "PUBLISHED",
-    slug: "joe20",
-    editorType: "MARKDOWN",
-    updateTime: 1649678688968,
-    createTime: 1636638704064,
-    editTime: 1649678688959,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/joe20.html",
-    summary:
-      "        Joe 主题 Halo 移植版                                Joe2.0 为 Typecho Themes Joe 主题的 Halo 版，由于 社区 之前有兄弟移植过，这次就叫 Joe2.0 吧，此次在原版主题上做了不少修改和适配，由原版的 php ",
-    thumbnail: "https://halo.run/upload/2022/04/joe2.0.png",
-    visits: 26444,
-    disallowComment: false,
-    password: "",
-    template: "theme",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 8819,
-    inProgress: false,
-    commentCount: 59,
-    tags: [
-      {
-        id: 1,
-        name: "主题",
-        slug: "themes",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1580914893201,
-        fullPath: "https://halo.run/tags/themes.html",
-      },
-      {
-        id: 3,
-        name: "模板",
-        slug: "templates",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502785043,
-        fullPath: "https://halo.run/tags/templates.html",
-      },
-      {
-        id: 4,
-        name: "Halo 主题",
-        slug: "halo-themes",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502798309,
-        fullPath: "https://halo.run/tags/halo-themes.html",
-      },
-      {
-        id: 5,
-        name: "Halo 模板",
-        slug: "halo-templates",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502800759,
-        fullPath: "https://halo.run/tags/halo-templates.html",
-      },
-    ],
-    categories: [
-      {
-        id: 2,
-        name: "主题仓库",
-        slug: "themes",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1580904752816,
-        fullPath: "https://halo.run/categories/themes.html",
-        priority: 1,
-      },
-    ],
-    metas: {
-      theme_repo: "https://github.com/qinhua/halo-theme-joe2.0",
-      theme_require: "1.4.11",
-      theme_id: "joe2.0",
-      theme_author: "qinhua",
-      theme_description: "Joe 主题 Halo 移植版",
-      theme_version: "1.0.8",
-    },
-    topped: false,
-  },
-  {
-    id: 351,
-    title: "Halo 1.4.12 发布",
-    status: "PUBLISHED",
-    slug: "halo-1412-released",
-    editorType: "MARKDOWN",
-    updateTime: 1631798064866,
-    createTime: 1631798054886,
-    editTime: 1631798064862,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-1412-released.html",
-    summary:
-      "FeaturesMinio 存储提供 Region 设置项。#1440 halo-dev/halo-admin#346Improvements后台菜单列表提供拖动按钮，优化拖动排序的体验。halo-dev/halo-admin#350后台升级 CodeMirror 的版本，降低最终构建体积。halo",
-    thumbnail:
-      "https://halo.run/upload/2021/09/1.4.12-9ed1f548565f482f8ae0d1db89c07087.png",
-    visits: 9306,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 467,
-    inProgress: false,
-    commentCount: 11,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 320,
-    title: "Halo 1.4.10 发布",
-    status: "PUBLISHED",
-    slug: "halo-1410-released",
-    editorType: "MARKDOWN",
-    updateTime: 1626780018282,
-    createTime: 1626625488791,
-    editTime: 1626780018280,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-1410-released.html",
-    summary:
-      "Features编辑器支持脚注语法。halo-dev/halo#1406 halo-dev/halo-admin#341Improvements优化文章字数计算。halo-dev/halo#1354Content Api 中的获取文章列表支持传入关键字和分类 id 筛选项。halo-dev/halo",
-    thumbnail:
-      "https://halo.run/upload/2021/07/1.4.10-d530fa68c73048a4926da0e98ddb5f21.png",
-    visits: 4804,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 1737,
-    inProgress: false,
-    commentCount: 7,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 319,
-    title: "Reflect Halo 小程序",
-    status: "PUBLISHED",
-    slug: "mp-reflect",
-    editorType: "MARKDOWN",
-    updateTime: 1649679428953,
-    createTime: 1623470692679,
-    editTime: 1649679428942,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/mp-reflect.html",
-    summary:
-      "介绍Reflect Halo 是一个基于 Halo 后端的小程序项目，使用它可以非常便捷的搭建一个属于自己的博客小程序。主要特性符合大众审美的 UI 设计，我们拒绝使用一些花哨的界面或者动效，博客最重要的是阅读，我们力求打造更佳的阅读访问体验。同时我们执着于对细节的把控，力求不让强迫症患者感到不适。",
-    thumbnail: "https://halo.run/upload/2022/04/reflect-mp-halo.jpeg",
-    visits: 26117,
-    disallowComment: false,
-    password: "",
-    template: "theme",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 1531,
-    inProgress: false,
-    commentCount: 10,
-    tags: [],
-    categories: [
-      {
-        id: 2,
-        name: "主题仓库",
-        slug: "themes",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1580904752816,
-        fullPath: "https://halo.run/categories/themes.html",
-        priority: 1,
-      },
-    ],
-    metas: {
-      theme_repo: "https://mianbaoduo.com/o/bread/mbd-YZqVl5pv",
-      theme_require: "1.4.8",
-      theme_id: "reflect.mp.halo",
-      theme_author: "Reflect Team",
-      theme_description: "Reflect Team 开发的 Halo 小程序",
-      theme_version: "1.0.0",
-    },
-    topped: false,
-  },
-  {
-    id: 289,
-    title: "Iwtwin",
-    status: "PUBLISHED",
-    slug: "theme-iwtwin",
-    editorType: "MARKDOWN",
-    updateTime: 1649679443407,
-    createTime: 1622203962900,
-    editTime: 1649679443403,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/theme-iwtwin.html",
-    summary:
-      "IwtwinA Simple Halo Themes 预览在线预览https://www.kuya123.com图片预览安装压缩包上传方式（推荐）下载最新发行版zip压缩包到本地进入博客后台-外观-主题-安装选择本地上传，将压缩包上传上去等待提示安装完成在线拉取方式进入博客后台-外观-主题-安装选择",
-    thumbnail: "https://halo.run/upload/2022/04/Iwtwin.png",
-    visits: 22856,
-    disallowComment: false,
-    password: "",
-    template: "theme",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 275,
-    inProgress: false,
-    commentCount: 17,
-    tags: [
-      {
-        id: 1,
-        name: "主题",
-        slug: "themes",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1580914893201,
-        fullPath: "https://halo.run/tags/themes.html",
-      },
-      {
-        id: 3,
-        name: "模板",
-        slug: "templates",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502785043,
-        fullPath: "https://halo.run/tags/templates.html",
-      },
-      {
-        id: 4,
-        name: "Halo 主题",
-        slug: "halo-themes",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502798309,
-        fullPath: "https://halo.run/tags/halo-themes.html",
-      },
-      {
-        id: 5,
-        name: "Halo 模板",
-        slug: "halo-templates",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502800759,
-        fullPath: "https://halo.run/tags/halo-templates.html",
-      },
-    ],
-    categories: [
-      {
-        id: 2,
-        name: "主题仓库",
-        slug: "themes",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1580904752816,
-        fullPath: "https://halo.run/categories/themes.html",
-        priority: 1,
-      },
-    ],
-    metas: {
-      theme_repo: "https://github.com/cross266/halo-theme-iwtwin",
-      theme_require: "1.4.8",
-      theme_id: "iwtwin",
-      theme_author: "CROSS",
-      theme_description: "A Simple Halo Theme",
-      theme_version: "1.0",
-    },
-    topped: false,
-  },
-  {
-    id: 287,
-    title: "使用腾讯云·云托管一键搭建 Halo",
-    status: "PUBLISHED",
-    slug: "tencent-cloudbase-halo",
-    editorType: "MARKDOWN",
-    updateTime: 1649580513991,
-    createTime: 1620562541772,
-    editTime: 1649580513973,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/tencent-cloudbase-halo.html",
-    summary:
-      "腾讯云·云开发简介云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等 Serverless 化能力，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用、Flutter 客户端",
-    thumbnail:
-      "https://halo.run/upload/2021/05/tencent-cloudbase-halo-61d41c4c35784df293f6b7dc675254a4.png",
-    visits: 8992,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 951,
-    inProgress: false,
-    commentCount: 8,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 255,
-    title: "Halo 1.4.8 发布",
-    status: "PUBLISHED",
-    slug: "halo-148-released",
-    editorType: "MARKDOWN",
-    updateTime: 1617953751589,
-    createTime: 1617952738451,
-    editTime: 1617953751588,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-148-released.html",
-    summary:
-      "Features系统设置中支持设置 Gravatar 源地址。#1331 halo-dev/halo-admin#314Improvements优化 RSS 订阅最后更新时间字段。#1342Bug Fixes修复在 1.4.7 中，导入 Markdown 提示格式不正确的问题。halo-dev/ha",
-    thumbnail:
-      "https://halo.run/upload/2021/04/1.4.8-186dddabdfd24be68fbd43c24dc91c22.png",
-    visits: 7031,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 810,
-    inProgress: false,
-    commentCount: 20,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 223,
-    title: "Halo 1.4.7 发布",
-    status: "PUBLISHED",
-    slug: "halo-147-released",
-    editorType: "MARKDOWN",
-    updateTime: 1615698491995,
-    createTime: 1615698392006,
-    editTime: 1615698491993,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-147-released.html",
-    summary:
-      "Bug Fixes修复在 Windows 平台下，上传主题压缩包提示不支持当前文件格式的问题。halo-dev/halo-admin#309Upgrade guidehttps://docs.halo.run/install/upgrade",
-    thumbnail:
-      "https://halo.run/upload/2021/03/1.4.7-b0e7be88d7ae4a7888f3750e92a105e9.png",
-    visits: 4269,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 228,
-    inProgress: false,
-    commentCount: 5,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 191,
-    title: "Halo 1.4.6 发布",
-    status: "PUBLISHED",
-    slug: "halo-146-released",
-    editorType: "MARKDOWN",
-    updateTime: 1615128686265,
-    createTime: 1615121994495,
-    editTime: 1615128686264,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-146-released.html",
-    summary:
-      "Features主题编写支持继承以及 block 特性。halo-dev/halo#1295Improvements重构初始化页面，目前分为全新安装和数据导入。从这个版本开始，数据导入将导入所有数据。halo-dev/halo-admin#296优化后台菜单管理的排序拖动体验。halo-dev/ha",
-    thumbnail:
-      "https://halo.run/upload/2021/03/1.4.6-df507013b5c74201b85ff19d99b6be27.png",
-    visits: 2620,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 1208,
-    inProgress: false,
-    commentCount: 1,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 160,
-    title: "Halo 1.4.5 发布",
-    status: "PUBLISHED",
-    slug: "halo-145-released",
-    editorType: "MARKDOWN",
-    updateTime: 1612787764475,
-    createTime: 1612787374387,
-    editTime: 1612787764473,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-145-released.html",
-    summary:
-      "Improvementssitemap.xml 新增所有分类和标签的链接。#1267Bug Fixes修复后台因为垂直滚动条导致界面抖动的问题。halo-dev/halo-admin#293修复加密分类页面输入密码后重定向的页面链接不正确的问题。#1264Upgrade guidehttps://d",
-    thumbnail:
-      "https://halo.run/upload/2021/02/1.4.5-543af0f9550e4d88ac94264aff4785a9.png",
-    visits: 3480,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 205,
-    inProgress: false,
-    commentCount: 10,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 159,
-    title: "Halo 1.4.4 发布",
-    status: "PUBLISHED",
-    slug: "halo-144-released",
-    editorType: "MARKDOWN",
-    updateTime: 1612710237186,
-    createTime: 1612706024825,
-    editTime: 1612710237183,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-144-released.html",
-    summary:
-      "Features支持对分类目录进行加密。#1235Bug Fixes修复在保存博客设置的时候，主题被恢复为上一个激活主题的问题。#1256修复后台在某些场景下，顶部加载条无法关闭的问题。",
-    thumbnail:
-      "https://halo.run/upload/2021/02/1.4.4-1a9b3c29f37045b19764fcccc732f7be.png",
-    visits: 1626,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 170,
-    inProgress: false,
-    commentCount: 0,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 127,
-    title: "Halo 1.4.3 发布",
-    status: "PUBLISHED",
-    slug: "halo-143-released",
-    editorType: "MARKDOWN",
-    updateTime: 1611768562878,
-    createTime: 1611768239977,
-    editTime: 1611768562872,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-143-released.html",
-    summary:
-      "随着这个版本的发布，我们的官网和文档也发生了一些变更。变更之后和 Halo 相关的站点：官网：https://halo.run文档：https://docs.halo.run论坛：https://bbs.halo.run主题仓库：https://halo.run/themes.htmlBreakin",
-    thumbnail:
-      "https://halo.run/upload/2021/01/1.4.3-b5fc5c3adfe543e5a2f01b53be241c5d.png",
-    visits: 2438,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 793,
-    inProgress: false,
-    commentCount: 2,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 95,
-    title: "Xue",
-    status: "PUBLISHED",
-    slug: "theme-xue",
-    editorType: "MARKDOWN",
-    updateTime: 1649679459916,
-    createTime: 1609208959025,
-    editTime: 1649679459907,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/theme-xue.html",
-    summary:
-      "Halo Theme Xue追求个性与至简说明开始预览示例站点文档主题特性更新日志预览Preview | 个人网站我的个人网站由于存在自定义，会和当前主题会有不同示例站点微服务驿站南国薏米通往体面生活的路上pengzhenjin's blognEo.一只从代码中寻找乐趣的猿千与千寻Symon's B",
-    thumbnail: "https://halo.run/upload/2022/04/xue.png",
-    visits: 48675,
-    disallowComment: false,
-    password: "",
-    template: "theme",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 546,
-    inProgress: false,
-    commentCount: 40,
-    tags: [
-      {
-        id: 1,
-        name: "主题",
-        slug: "themes",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1580914893201,
-        fullPath: "https://halo.run/tags/themes.html",
-      },
-      {
-        id: 3,
-        name: "模板",
-        slug: "templates",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502785043,
-        fullPath: "https://halo.run/tags/templates.html",
-      },
-      {
-        id: 4,
-        name: "Halo 主题",
-        slug: "halo-themes",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502798309,
-        fullPath: "https://halo.run/tags/halo-themes.html",
-      },
-      {
-        id: 5,
-        name: "Halo 模板",
-        slug: "halo-templates",
-        color: "#cfd3d7",
-        thumbnail: "",
-        createTime: 1584502800759,
-        fullPath: "https://halo.run/tags/halo-templates.html",
-      },
-    ],
-    categories: [
-      {
-        id: 2,
-        name: "主题仓库",
-        slug: "themes",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1580904752816,
-        fullPath: "https://halo.run/categories/themes.html",
-        priority: 1,
-      },
-    ],
-    metas: {
-      theme_repo: "https://github.com/xzhuz/halo-theme-xue",
-      theme_id: "bao",
-      theme_author: "xzhuz",
-      theme_description: "追求个性与至简",
-      theme_version: "1.4.0",
-    },
-    topped: false,
-  },
-  {
-    id: 94,
-    title: "Halo 1.4.2 发布",
-    status: "PUBLISHED",
-    slug: "halo-142-released",
-    editorType: "MARKDOWN",
-    updateTime: 1611477431760,
-    createTime: 1604368978521,
-    editTime: 1611477431757,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-142-released.html",
-    summary:
-      "Feature文章固定链接支持年份型。#1095支持添加或修改友链时校验 name 和 url 是否重复。#1079支持 MinIO 云存储。#1097支持删除主题时，可选是否删除相关配置。#1105支持设置定时清理回收站的文章。#1114重构后台菜单管理，更方便的管理菜单分组以及排序。#1120F",
-    thumbnail:
-      "https://halo.run/upload/2021/01/1.4.2-54891c9f84f34ff98897b8320b666d8e.png",
-    visits: 6432,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 792,
-    inProgress: false,
-    commentCount: 0,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-  {
-    id: 93,
-    title: "Halo 1.4.0 发布",
-    status: "PUBLISHED",
-    slug: "halo-140-released",
-    editorType: "MARKDOWN",
-    updateTime: 1611477443335,
-    createTime: 1600878496716,
-    editTime: 1611477443334,
-    metaKeywords: "",
-    metaDescription: "",
-    fullPath: "https://halo.run/archives/halo-140-released.html",
-    summary:
-      "Feature支持静态存储重命名和修改文件内容。#819所有附件列表均支持右键复制图片链接。halo-dev/halo-admin#180开发者选项中的实时日志支持自动滚动到最新的日志。在线下载主题支持选择分支和 release。#515 #592 #835评论内容支持显示 html 文本。halo",
-    thumbnail:
-      "https://halo.run/upload/2021/01/1.4.0-e31ee60919d4441eb5a0c2c306fdfe48.png",
-    visits: 3660,
-    disallowComment: false,
-    password: "",
-    template: "",
-    topPriority: 0,
-    likes: 0,
-    wordCount: 2270,
-    inProgress: false,
-    commentCount: 0,
-    tags: [],
-    categories: [
-      {
-        id: 9,
-        name: "博客",
-        slug: "blog",
-        description: "",
-        thumbnail: "",
-        parentId: 0,
-        password: "",
-        createTime: 1581682496632,
-        fullPath: "https://halo.run/categories/blog.html",
-        priority: 8,
-      },
-    ],
-    metas: [],
-    topped: false,
-  },
-];
diff --git a/src/modules/contents/posts/tags/TagList.vue b/src/modules/contents/posts/tags/TagList.vue
index 241bc3dc..c877ad13 100644
--- a/src/modules/contents/posts/tags/TagList.vue
+++ b/src/modules/contents/posts/tags/TagList.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+// core libs
+import { onMounted, ref } from "vue";
+
+// components
 import {
   IconAddCircle,
   IconBookRead,
@@ -8,13 +11,22 @@ import {
   IconSettings,
   VButton,
   VCard,
+  VEmpty,
   VPageHeader,
   VSpace,
-  VTag,
 } from "@halo-dev/components";
 import TagEditingModal from "./components/TagEditingModal.vue";
+import PostTag from "./components/PostTag.vue";
+
+// types
+import type { Tag } from "@halo-dev/api-client";
+import { usePostTag } from "./composables/use-post-tag";
+
+import { formatDatetime } from "@/utils/date";
+
+import { useRouteQuery } from "@vueuse/router";
+import { apiClient } from "@halo-dev/admin-shared";
 
-const editingModal = ref(false);
 const viewTypes = [
   {
     name: "list",
@@ -27,22 +39,82 @@ const viewTypes = [
 ];
 
 const viewType = ref("list");
+
+const { tags, loading, handleFetchTags, handleDelete } = usePostTag();
+
+const editingModal = ref(false);
+const selectedTag = ref<Tag | null>(null);
+
+const handleOpenEditingModal = (tag: Tag | null) => {
+  selectedTag.value = tag;
+  editingModal.value = true;
+};
+
+const handleSelectPrevious = () => {
+  const currentIndex = tags.value.findIndex(
+    (tag) => tag.metadata.name === selectedTag.value?.metadata.name
+  );
+
+  if (currentIndex > 0) {
+    selectedTag.value = tags.value[currentIndex - 1];
+    return;
+  }
+
+  if (currentIndex <= 0) {
+    selectedTag.value = null;
+  }
+};
+
+const handleSelectNext = () => {
+  if (!selectedTag.value) {
+    selectedTag.value = tags.value[0];
+    return;
+  }
+  const currentIndex = tags.value.findIndex(
+    (tag) => tag.metadata.name === selectedTag.value?.metadata.name
+  );
+  if (currentIndex !== tags.value.length - 1) {
+    selectedTag.value = tags.value[currentIndex + 1];
+  }
+};
+
+const onEditingModalClose = () => {
+  selectedTag.value = null;
+  queryName.value = null;
+  handleFetchTags();
+};
+
+const queryName = useRouteQuery("name");
+
+onMounted(async () => {
+  if (queryName.value) {
+    const { data } = await apiClient.extension.tag.getcontentHaloRunV1alpha1Tag(
+      queryName.value as string
+    );
+    selectedTag.value = data;
+    editingModal.value = true;
+  }
+});
 </script>
 <template>
-  <TagEditingModal v-model:visible="editingModal" />
+  <TagEditingModal
+    v-model:visible="editingModal"
+    :tag="selectedTag"
+    @close="onEditingModalClose"
+    @next="handleSelectNext"
+    @previous="handleSelectPrevious"
+  />
   <VPageHeader title="文章标签">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
     </template>
     <template #actions>
-      <VSpace>
-        <VButton type="secondary" @click="editingModal = true">
-          <template #icon>
-            <IconAddCircle class="h-full w-full" />
-          </template>
-          新建
-        </VButton>
-      </VSpace>
+      <VButton type="secondary" @click="editingModal = true">
+        <template #icon>
+          <IconAddCircle class="h-full w-full" />
+        </template>
+        新建
+      </VButton>
     </template>
   </VPageHeader>
   <div class="m-0 md:m-4">
@@ -53,7 +125,9 @@ const viewType = ref("list");
             class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
             <div class="flex w-full flex-1 sm:w-auto">
-              <span class="text-base font-medium"> {{ 10 }} 个标签 </span>
+              <span class="text-base font-medium">
+                {{ tags.length }} 个标签
+              </span>
             </div>
             <div class="flex flex-row gap-2">
               <div
@@ -71,71 +145,120 @@ const viewType = ref("list");
           </div>
         </div>
       </template>
-      <ul
-        v-if="viewType === 'list'"
-        class="box-border h-full w-full divide-y divide-gray-100"
-        role="list"
+      <VEmpty
+        v-if="!tags.length && !loading"
+        message="你可以尝试刷新或者新建标签"
+        title="当前没有标签"
       >
-        <li v-for="i in 10" :key="i">
-          <div
-            class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-          >
-            <div class="relative flex flex-row items-center">
-              <div class="flex-1">
-                <div class="flex flex-col sm:flex-row">
-                  <VTag>主题</VTag>
-                </div>
-                <div class="mt-1 flex">
-                  <span class="text-xs text-gray-500">
-                    https://halo.run/tags/themes
-                  </span>
-                </div>
-              </div>
-              <div class="flex">
-                <div
-                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                >
-                  <div
-                    class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
-                  >
-                    20 篇文章
+        <template #actions>
+          <VSpace>
+            <VButton @click="handleFetchTags">刷新</VButton>
+            <VButton type="primary" @click="editingModal = true">
+              <template #icon>
+                <IconAddCircle class="h-full w-full" />
+              </template>
+              新建标签
+            </VButton>
+          </VSpace>
+        </template>
+      </VEmpty>
+      <div v-else>
+        <ul
+          v-if="viewType === 'list'"
+          class="box-border h-full w-full divide-y divide-gray-100"
+          role="list"
+        >
+          <li v-for="(tag, index) in tags" :key="index">
+            <div
+              :class="{
+                'bg-gray-100': selectedTag?.metadata.name === tag.metadata.name,
+              }"
+              class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
+            >
+              <div
+                v-show="selectedTag?.metadata.name === tag.metadata.name"
+                class="absolute inset-y-0 left-0 w-0.5 bg-primary"
+              ></div>
+              <div class="relative flex flex-row items-center">
+                <div class="flex-1">
+                  <div class="flex flex-col sm:flex-row">
+                    <PostTag :tag="tag" />
+                  </div>
+                  <div class="mt-1 flex">
+                    <span class="text-xs text-gray-500">
+                      /tags/{{ tag.spec.slug }}
+                    </span>
+                  </div>
+                </div>
+                <div class="flex">
+                  <div
+                    class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+                  >
+                    <FloatingTooltip
+                      v-if="tag.metadata.deletionTimestamp"
+                      class="mr-4 hidden items-center sm:flex"
+                    >
+                      <div
+                        class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
+                      >
+                        <span
+                          class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+                        ></span>
+                      </div>
+                      <template #popper> 删除中</template>
+                    </FloatingTooltip>
+                    <div
+                      class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
+                    >
+                      20 篇文章
+                    </div>
+                    <time class="text-sm text-gray-500">
+                      {{ formatDatetime(tag.metadata.creationTimestamp) }}
+                    </time>
+                    <span class="self-center">
+                      <FloatingDropdown>
+                        <IconSettings
+                          class="cursor-pointer transition-all hover:text-blue-600"
+                        />
+                        <template #popper>
+                          <div class="w-48 p-2">
+                            <VSpace class="w-full" direction="column">
+                              <VButton
+                                v-close-popper
+                                block
+                                type="secondary"
+                                @click="handleOpenEditingModal(tag)"
+                              >
+                                修改
+                              </VButton>
+                              <VButton
+                                v-close-popper
+                                block
+                                type="danger"
+                                @click="handleDelete(tag)"
+                              >
+                                删除
+                              </VButton>
+                            </VSpace>
+                          </div>
+                        </template>
+                      </FloatingDropdown>
+                    </span>
                   </div>
-                  <time class="text-sm text-gray-500" datetime="2020-01-07">
-                    2020-01-07
-                  </time>
-                  <span class="cursor-pointer">
-                    <FloatingDropdown>
-                      <IconSettings
-                        class="cursor-pointer transition-all hover:text-blue-600"
-                      />
-                      <template #popper>
-                        <div class="w-48 p-2">
-                          <VSpace class="w-full" direction="column">
-                            <VButton
-                              v-close-popper
-                              block
-                              type="secondary"
-                              @click="editingModal = true"
-                            >
-                              修改
-                            </VButton>
-                            <VButton v-close-popper block type="danger">
-                              删除
-                            </VButton>
-                          </VSpace>
-                        </div>
-                      </template>
-                    </FloatingDropdown>
-                  </span>
                 </div>
               </div>
             </div>
-          </div>
-        </li>
-      </ul>
+          </li>
+        </ul>
 
-      <div v-else class="flex flex-wrap gap-3 p-4" role="list">
-        <VTag v-for="i in 100" :key="i">主题(10)</VTag>
+        <div v-else class="flex flex-wrap gap-3 p-4" role="list">
+          <PostTag
+            v-for="(tag, index) in tags"
+            :key="index"
+            :tag="tag"
+            @click="handleOpenEditingModal(tag)"
+          />
+        </div>
       </div>
     </VCard>
   </div>
diff --git a/src/modules/contents/posts/tags/components/PostTag.vue b/src/modules/contents/posts/tags/components/PostTag.vue
new file mode 100644
index 00000000..537bbf67
--- /dev/null
+++ b/src/modules/contents/posts/tags/components/PostTag.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { VTag } from "@halo-dev/components";
+import type { Tag } from "@halo-dev/api-client";
+import { computed } from "vue";
+// @ts-ignore
+import Color from "colorjs.io";
+
+const props = defineProps<{
+  tag: Tag;
+}>();
+
+const labelColor = computed(() => {
+  const { color } = props.tag.spec;
+  if (!color) {
+    return "inherit";
+  }
+  const onWhite = Math.abs(Color.contrast(color, "white", "APCA"));
+  const onBlack = Math.abs(Color.contrast(color, "black", "APCA"));
+  return onWhite > onBlack ? "white" : "#333";
+});
+</script>
+<template>
+  <VTag :styles="{ background: tag.spec.color, color: labelColor }">
+    {{ tag.spec.displayName }}
+  </VTag>
+</template>
diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue
index cd992f3f..bf939cd0 100644
--- a/src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -1,51 +1,181 @@
 <script lang="ts" setup>
-import { VButton, VModal, VSpace } from "@halo-dev/components";
+// core libs
+import { computed, ref, watch, watchEffect } from "vue";
+import { apiClient } from "@halo-dev/admin-shared";
 
-withDefaults(
+// components
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  VButton,
+  VModal,
+  VSpace,
+} from "@halo-dev/components";
+
+// types
+import type { Tag } from "@halo-dev/api-client";
+
+// libs
+import cloneDeep from "lodash.clonedeep";
+import { reset, submitForm } from "@formkit/core";
+import { useMagicKeys } from "@vueuse/core";
+import { v4 as uuid } from "uuid";
+
+const props = withDefaults(
   defineProps<{
     visible: boolean;
-    tag: unknown | null;
+    tag: Tag | null;
   }>(),
   {
     visible: false,
-    tag: undefined,
+    tag: null,
   }
 );
 
 const emit = defineEmits<{
   (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
+  (event: "previous"): void;
+  (event: "next"): void;
 }>();
 
+const initialFormState: Tag = {
+  spec: {
+    displayName: "",
+    slug: "",
+    color: "#b16cBe",
+    cover: "",
+  },
+  apiVersion: "content.halo.run/v1alpha1",
+  kind: "Tag",
+  metadata: {
+    name: uuid(),
+  },
+};
+
+const formState = ref<Tag>(cloneDeep(initialFormState));
+const saving = ref(false);
+
+const isUpdateMode = computed(() => {
+  return !!formState.value.metadata.creationTimestamp;
+});
+
+const modalTitle = computed(() => {
+  return isUpdateMode.value ? "编辑文章标签" : "新增文章标签";
+});
+
+const handleSaveTag = async () => {
+  try {
+    saving.value = true;
+    if (isUpdateMode.value) {
+      await apiClient.extension.tag.updatecontentHaloRunV1alpha1Tag(
+        formState.value.metadata.name,
+        formState.value
+      );
+    } else {
+      await apiClient.extension.tag.createcontentHaloRunV1alpha1Tag(
+        formState.value
+      );
+    }
+    onVisibleChange(false);
+  } catch (e) {
+    console.error("Failed to create tag", e);
+  } finally {
+    saving.value = false;
+  }
+};
+
 const onVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
     emit("close");
   }
 };
+
+const handleResetForm = () => {
+  formState.value = cloneDeep(initialFormState);
+  formState.value.metadata.name = uuid();
+  reset("tag-form");
+};
+
+const { Command_Enter } = useMagicKeys();
+
+watchEffect(() => {
+  if (Command_Enter.value && props.visible) {
+    submitForm("tag-form");
+  }
+});
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (!visible) {
+      handleResetForm();
+    }
+  }
+);
+
+watch(
+  () => props.tag,
+  (tag) => {
+    if (tag) {
+      formState.value = cloneDeep(tag);
+    } else {
+      handleResetForm();
+    }
+  }
+);
 </script>
 <template>
   <VModal
+    :title="modalTitle"
     :visible="visible"
     :width="600"
-    title="编辑文章标签"
     @update:visible="onVisibleChange"
   >
-    <FormKit id="tag-form" type="form">
-      <FormKit label="名称" type="text" validation="required"></FormKit>
+    <template #actions>
+      <div class="modal-header-action" @click="emit('previous')">
+        <IconArrowLeft />
+      </div>
+      <div class="modal-header-action" @click="emit('next')">
+        <IconArrowRight />
+      </div>
+    </template>
+    <FormKit id="tag-form" type="form" @submit="handleSaveTag">
       <FormKit
+        v-model="formState.spec.displayName"
+        label="名称"
+        type="text"
+        validation="required"
+      ></FormKit>
+      <FormKit
+        v-model="formState.spec.slug"
         help="通常作为标签访问地址标识"
         label="别名"
         type="text"
         validation="required"
       ></FormKit>
-      <FormKit help="需要主题适配以支持" label="颜色" type="color"></FormKit>
-      <FormKit help="需要主题适配以支持" label="封面图" type="text"></FormKit>
+      <FormKit
+        v-model="formState.spec.color"
+        help="需要主题适配以支持"
+        label="颜色"
+        type="color"
+      ></FormKit>
+      <FormKit
+        v-model="formState.spec.cover"
+        help="需要主题适配以支持"
+        label="封面图"
+        type="text"
+      ></FormKit>
     </FormKit>
     <template #footer>
       <VSpace>
-        <VButton type="secondary" @click="$formkit.submit('tag-form')">
-          提交 ⌘ + ↵
+        <VButton
+          :loading="saving"
+          type="secondary"
+          @click="$formkit.submit('tag-form')"
+        >
+          保存
         </VButton>
         <VButton @click="onVisibleChange(false)">取消 Esc</VButton>
       </VSpace>
diff --git a/src/modules/contents/posts/tags/composables/use-post-tag.ts b/src/modules/contents/posts/tags/composables/use-post-tag.ts
new file mode 100644
index 00000000..20db1641
--- /dev/null
+++ b/src/modules/contents/posts/tags/composables/use-post-tag.ts
@@ -0,0 +1,61 @@
+import { apiClient } from "@halo-dev/admin-shared";
+import type { Tag } from "@halo-dev/api-client";
+import type { Ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useDialog } from "@halo-dev/components";
+
+interface usePostTagReturn {
+  tags: Ref<Tag[]>;
+  loading: Ref<boolean>;
+  handleFetchTags: () => void;
+  handleDelete: (tag: Tag) => void;
+}
+
+export function usePostTag(): usePostTagReturn {
+  const tags = ref<Tag[]>([] as Tag[]);
+  const loading = ref(false);
+
+  const dialog = useDialog();
+
+  const handleFetchTags = async () => {
+    try {
+      loading.value = true;
+      const { data } =
+        await apiClient.extension.tag.listcontentHaloRunV1alpha1Tag(0, 0);
+
+      tags.value = data.items;
+    } catch (e) {
+      console.error("Failed to fetch tags", e);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleDelete = async (tag: Tag) => {
+    dialog.warning({
+      title: "确定要删除该标签吗？",
+      description: "删除此标签之后，对应文章的关联将被解除。该操作不可恢复。",
+      confirmType: "danger",
+      onConfirm: async () => {
+        try {
+          await apiClient.extension.tag.deletecontentHaloRunV1alpha1Tag(
+            tag.metadata.name
+          );
+        } catch (e) {
+          console.error("Failed to delete tag", e);
+        } finally {
+          await handleFetchTags();
+        }
+      },
+    });
+  };
+
+  onMounted(handleFetchTags);
+
+  return {
+    tags,
+    loading,
+    handleFetchTags,
+    handleDelete,
+  };
+}
diff --git a/src/modules/dashboard/widgets/RecentPublishedWidget.vue b/src/modules/dashboard/widgets/RecentPublishedWidget.vue
index 0769b6ce..3c67dc33 100644
--- a/src/modules/dashboard/widgets/RecentPublishedWidget.vue
+++ b/src/modules/dashboard/widgets/RecentPublishedWidget.vue
@@ -1,6 +1,22 @@
 <script lang="ts" name="RecentPublishedWidget" setup>
 import { VCard, VSpace } from "@halo-dev/components";
-import { posts } from "@/modules/contents/posts/posts-mock";
+import { onMounted, ref } from "vue";
+import type { Post } from "@halo-dev/api-client";
+import { apiClient } from "@halo-dev/admin-shared";
+
+const posts = ref<Post[]>([] as Post[]);
+
+const handleFetchPosts = async () => {
+  try {
+    const { data } =
+      await apiClient.extension.post.listcontentHaloRunV1alpha1Post();
+    posts.value = data.items;
+  } catch (e) {
+    console.error("Failed to fetch posts", e);
+  }
+};
+
+onMounted(handleFetchPosts);
 </script>
 <template>
   <VCard
@@ -18,23 +34,19 @@ import { posts } from "@/modules/contents/posts/posts-mock";
           <div class="flex items-center space-x-4">
             <div class="min-w-0 flex-1">
               <p class="truncate text-sm font-medium text-gray-900">
-                {{ post.title }}
+                {{ post.spec.title }}
               </p>
               <div class="mt-1 flex">
                 <VSpace>
-                  <span class="text-xs text-gray-500">
-                    阅读 {{ post.visits }}
-                  </span>
-                  <span class="text-xs text-gray-500">
-                    评论 {{ post.commentCount }}
-                  </span>
+                  <span class="text-xs text-gray-500"> 阅读 0 </span>
+                  <span class="text-xs text-gray-500"> 评论 0 </span>
                 </VSpace>
               </div>
             </div>
 
             <div>
-              <time class="text-sm text-gray-500" datetime="2020-01-07 20:00">
-                2020-01-07 20:00
+              <time class="text-sm text-gray-500">
+                {{ post.metadata.creationTimestamp }}
               </time>
             </div>
           </div>
diff --git a/src/utils/__tests__/date.spec.ts b/src/utils/__tests__/date.spec.ts
new file mode 100644
index 00000000..19e01702
--- /dev/null
+++ b/src/utils/__tests__/date.spec.ts
@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { formatDatetime } from "../date";
+
+describe.skip("date#formatDatetime", () => {
+  it("should return formatted datetime", () => {
+    const formattedDatetime = formatDatetime("2022-08-17T06:01:16.511575Z");
+
+    expect(formattedDatetime).toEqual("2022-08-17 14:01");
+  });
+});
diff --git a/src/utils/date.ts b/src/utils/date.ts
new file mode 100644
index 00000000..24810285
--- /dev/null
+++ b/src/utils/date.ts
@@ -0,0 +1,14 @@
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import timezone from "dayjs/plugin/timezone";
+
+dayjs.extend(timezone);
+
+dayjs.locale("zh-cn");
+
+export function formatDatetime(date: string | Date | undefined | null): string {
+  if (!date) {
+    return "";
+  }
+  return dayjs(date).format("YYYY-MM-DD HH:mm");
+}