From d842fb4683976d5f21edcef77ffde7760decb8fd Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Tue, 7 May 2024 17:57:20 +0800
Subject: [PATCH] feat: support moment user center (#68)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature

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

支持在个人中心发布瞬间

#### How to test it?

在个人中心发布瞬间，并测试相关权限是否正常。

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

Fixes #47
Fixes https://github.com/halo-sigs/plugin-moments/issues/53

#### Does this PR introduce a user-facing change?
```release-note
适配在个人中心发布瞬间
```
---
 build.gradle                                  |   1 +
 console/src/components/FilterDropdown.vue     |  92 ++++
 console/src/components/MomentEdit.vue         |  78 ++--
 console/src/components/MomentItem.vue         |  89 ++--
 console/src/components/TagFilterDropdown.vue  |  18 +-
 console/src/components/TextEditor.vue         |   9 +-
 console/src/composables/use-tag.ts            |  39 ++
 .../src/extensions/tags/TagsExtensionView.vue |  29 +-
 console/src/extensions/tags/index.ts          |  10 +-
 console/src/index.ts                          |  19 +
 console/src/styles/index.scss                 |  20 +-
 console/src/types/index.ts                    |   1 +
 console/src/uc/MomentEdit.vue                 | 395 ++++++++++++++++++
 console/src/uc/MomentItem.vue                 | 168 ++++++++
 console/src/uc/MomentsList.vue                | 230 ++++++++++
 console/src/uc/TagFilterDropdown.vue          | 112 +++++
 console/src/views/MomentsList.vue             |  90 ++--
 src/main/java/run/halo/moments/Moment.java    |  13 +-
 .../java/run/halo/moments/MomentEndpoint.java |  23 +-
 .../java/run/halo/moments/MomentQuery.java    |  26 +-
 .../run/halo/moments/MomentReconciler.java    |   8 +
 .../java/run/halo/moments/MomentsPlugin.java  |   8 +
 .../finders/impl/MomentFinderImpl.java        |  21 +-
 .../halo/moments/service/MomentService.java   |   8 +-
 .../run/halo/moments/service/RoleService.java |  15 +
 .../service/impl/DefaultRoleService.java      | 103 +++++
 .../service/impl/MomentServiceImpl.java       |  21 +-
 .../run/halo/moments/uc/UcMomentEndpoint.java | 216 ++++++++++
 .../run/halo/moments/util/AuthorityUtils.java |  42 ++
 .../resources/extensions/roleTemplate.yaml    |  74 +++-
 30 files changed, 1786 insertions(+), 192 deletions(-)
 create mode 100644 console/src/components/FilterDropdown.vue
 create mode 100644 console/src/composables/use-tag.ts
 create mode 100644 console/src/uc/MomentEdit.vue
 create mode 100644 console/src/uc/MomentItem.vue
 create mode 100644 console/src/uc/MomentsList.vue
 create mode 100644 console/src/uc/TagFilterDropdown.vue
 create mode 100644 src/main/java/run/halo/moments/service/RoleService.java
 create mode 100644 src/main/java/run/halo/moments/service/impl/DefaultRoleService.java
 create mode 100644 src/main/java/run/halo/moments/uc/UcMomentEndpoint.java
 create mode 100644 src/main/java/run/halo/moments/util/AuthorityUtils.java

diff --git a/build.gradle b/build.gradle
index 131cb2e..62a2313 100644
--- a/build.gradle
+++ b/build.gradle
@@ -46,4 +46,5 @@ build {
 
 halo {
     version = '2.12.0'
+    debug = true;
 }
diff --git a/console/src/components/FilterDropdown.vue b/console/src/components/FilterDropdown.vue
new file mode 100644
index 0000000..1ba369b
--- /dev/null
+++ b/console/src/components/FilterDropdown.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import {
+  IconArrowDown,
+  IconClose,
+  VDropdown,
+  VDropdownItem,
+} from "@halo-dev/components";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    items: {
+      label: string;
+      value?: string | boolean | number;
+    }[];
+    label: string;
+    modelValue?: string | boolean | number;
+  }>(),
+  {
+    modelValue: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (
+    event: "update:modelValue",
+    modelValue: string | boolean | number | undefined
+  ): void;
+}>();
+
+const selectedItem = computed(() => {
+  return props.items.find((item) => item.value === props.modelValue);
+});
+
+function handleSelect(item: {
+  label: string;
+  value?: string | boolean | number;
+}) {
+  if (item.value === props.modelValue) {
+    emit("update:modelValue", undefined);
+    return;
+  }
+  emit("update:modelValue", item.value);
+}
+
+const handleClear = (event: Event) => {
+  emit("update:modelValue", undefined);
+  event.stopPropagation();
+};
+</script>
+
+<template>
+  <VDropdown>
+    <div
+      class="filter-dropdown moments-group"
+      :class="{
+        'moments-font-semibold moments-text-gray-700': modelValue !== undefined,
+      }"
+    >
+      <span v-if="!selectedItem" class="mr-0.5">
+        {{ label }}
+      </span>
+      <span v-else class="mr-0.5"> {{ label }}：{{ selectedItem.label }} </span>
+      <span class="moments-text-base">
+        <IconArrowDown
+          :class="{ 'group-hover:moments-hidden': modelValue !== undefined }"
+        />
+        <IconClose
+          v-if="modelValue !== undefined"
+          class="moments-hidden group-hover:moments-block"
+          @click="handleClear"
+        />
+      </span>
+    </div>
+    <template #popper>
+      <VDropdownItem
+        v-for="(item, index) in items"
+        :key="index"
+        :selected="item.value === modelValue"
+        @click="handleSelect(item)"
+      >
+        {{ item.label }}
+      </VDropdownItem>
+    </template>
+  </VDropdown>
+</template>
+<style scoped lang="scss">
+.filter-dropdown {
+  @apply moments-flex moments-cursor-pointer moments-select-none moments-items-center moments-text-sm moments-leading-9 moments-px-3 moments-text-gray-700 moments-rounded-lg hover:moments-text-black;
+  border: 1px solid rgb(209 213 219);
+}
+</style>
diff --git a/console/src/components/MomentEdit.vue b/console/src/components/MomentEdit.vue
index 9fb7625..986ad66 100644
--- a/console/src/components/MomentEdit.vue
+++ b/console/src/components/MomentEdit.vue
@@ -1,15 +1,16 @@
 <script lang="ts" setup>
 import { VButton, IconEye, IconEyeOff } from "@halo-dev/components";
 import type { Moment, MomentMedia, MomentMediaTypeEnum } from "@/types";
-import apiClient from "@/utils/api-client";
 import { Toast } from "@halo-dev/components";
 import type { AttachmentLike } from "@halo-dev/console-shared";
 import { computed, onMounted, ref, toRaw } from "vue";
-import MediaCard from "./MediaCard.vue";
-import TextEditor from "./TextEditor.vue";
+import MediaCard from "@/components/MediaCard.vue";
+import TextEditor from "@/components/TextEditor.vue";
 import SendMoment from "~icons/ic/sharp-send";
 import cloneDeep from "lodash.clonedeep";
 import TablerPhoto from "~icons/tabler/photo";
+import apiClient from "@/utils/api-client";
+import { useConsoleTagQueryFetch } from "@/composables/use-tag";
 
 const props = withDefaults(
   defineProps<{
@@ -37,6 +38,7 @@ const initMoment: Moment = {
     owner: "",
     visible: "PUBLIC",
     tags: [],
+    approved: true,
   },
   metadata: {
     generateName: "moment-",
@@ -66,9 +68,10 @@ const handlerCreateOrUpdateMoment = async () => {
     saving.value = true;
     queryEditorTags();
     if (isUpdateMode.value) {
-      updateMoment();
+      handleUpdate(formState.value);
     } else {
-      createMoment();
+      handleSave(formState.value);
+      handleReset();
     }
   } catch (error) {
     console.error(error);
@@ -77,6 +80,31 @@ const handlerCreateOrUpdateMoment = async () => {
   }
 };
 
+const handleSave = async (moment: Moment) => {
+  moment.spec.releaseTime = new Date().toISOString();
+  moment.spec.approved = true;
+  const { data } = await apiClient.post<Moment>(
+    `/apis/console.api.moment.halo.run/v1alpha1/moments`,
+    moment
+  );
+  emit("save", data);
+  Toast.success("发布成功");
+};
+
+const handleUpdate = async (moment: Moment) => {
+  const { data } = await apiClient.get<Moment>(
+    `/apis/moment.halo.run/v1alpha1/moments/${moment.metadata.name}`
+  );
+  // 更新当前需要提交的 moment spec 为最新
+  data.spec = moment.spec;
+  const updated = await apiClient.put<Moment>(
+    `/apis/moment.halo.run/v1alpha1/moments/${moment.metadata.name}`,
+    data
+  );
+  emit("update", updated.data);
+  Toast.success("发布成功");
+};
+
 const parse = new DOMParser();
 const queryEditorTags = function () {
   let tags: Set<string> = new Set();
@@ -95,31 +123,6 @@ const queryEditorTags = function () {
   formState.value.spec.tags = Array.from(tags);
 };
 
-const createMoment = async () => {
-  formState.value.spec.releaseTime = new Date().toISOString();
-  const { data } = await apiClient.post<Moment>(
-    `/apis/console.api.moment.halo.run/v1alpha1/moments`,
-    formState.value
-  );
-  emit("save", data);
-  handleReset();
-  Toast.success("发布成功");
-};
-
-const updateMoment = async () => {
-  const { data } = await apiClient.get<Moment>(
-    `/apis/moment.halo.run/v1alpha1/moments/${formState.value.metadata.name}`
-  );
-  // 更新当前需要提交的 moment spec 为最新
-  data.spec = formState.value.spec;
-  const updated = await apiClient.put<Moment>(
-    `/apis/moment.halo.run/v1alpha1/moments/${formState.value.metadata.name}`,
-    data
-  );
-  emit("update", updated.data);
-  Toast.success("发布成功");
-};
-
 const handleReset = () => {
   formState.value = toRaw(cloneDeep(initMoment));
   isEditorEmpty.value = true;
@@ -143,7 +146,11 @@ const supportVideoTypes: string[] = ["video/*"];
 
 const supportAudioTypes: string[] = ["audio/*"];
 
-const accepts = [...supportImageTypes, ...supportVideoTypes, ...supportAudioTypes];
+const accepts = [
+  ...supportImageTypes,
+  ...supportVideoTypes,
+  ...supportAudioTypes,
+];
 
 const mediumWhitelist: Map<string, MomentMediaTypeEnum> = new Map([
   ["image", "PHOTO"],
@@ -291,6 +298,7 @@ function handleKeydown(event: KeyboardEvent) {
   >
     <AttachmentSelectorModal
       v-model:visible="attachmentSelectorModal"
+      v-permission="['system:attachments:view']"
       :min="1"
       :max="9"
       :accepts="accepts"
@@ -300,6 +308,7 @@ function handleKeydown(event: KeyboardEvent) {
       v-model:raw="formState.spec.content.raw"
       v-model:html="formState.spec.content.html"
       v-model:isEmpty="isEditorEmpty"
+      :tag-query-fetch="useConsoleTagQueryFetch"
       class="moments-min-h-[9rem] moments-p-3.5"
       tabindex="-1"
       @keydown="handleKeydown"
@@ -367,7 +376,12 @@ function handleKeydown(event: KeyboardEvent) {
           <span class="moments-text-xs"> 取消 </span>
         </button>
 
-        <div v-permission="['plugin:moments:manage']" class="moments-h-fit">
+        <div
+          v-permission="
+            ['plugin:moments:manage'] || ['uc:plugin:moments:publish']
+          "
+          class="moments-h-fit"
+        >
           <VButton
             v-model:disabled="saveDisable"
             :loading="saving"
diff --git a/console/src/components/MomentItem.vue b/console/src/components/MomentItem.vue
index 457a881..d6e5acb 100644
--- a/console/src/components/MomentItem.vue
+++ b/console/src/components/MomentItem.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import type { Moment } from "@/types";
-import cloneDeep from "lodash.clonedeep";
-import { ref } from "vue";
+import type { ListedMoment, Moment } from "@/types";
+import { computed, ref, toRaw } from "vue";
 import MomentEdit from "./MomentEdit.vue";
 import MomentPreview from "./MomentPreview.vue";
-import type { Contributor } from "@halo-dev/api-client/index";
+import apiClient from "@/utils/api-client";
 import {
   Dialog,
   Toast,
@@ -12,43 +11,32 @@ import {
   VDropdown,
   VDropdownItem,
   IconEyeOff,
+  VStatusDot,
 } from "@halo-dev/components";
 import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import LucideMoreHorizontal from "~icons/lucide/more-horizontal";
 
-import apiClient from "@/utils/api-client";
-
 const props = withDefaults(
   defineProps<{
-    moment: Moment;
-    owner: Contributor;
+    listedMoment: ListedMoment;
+    editing: boolean;
   }>(),
   {
-    moment: undefined,
-    owner: undefined,
+    listedMoment: undefined,
+    editing: false,
   }
 );
 
 const emit = defineEmits<{
   (event: "save", moment: Moment): void;
   (event: "update", moment: Moment): void;
-  (event: "remove", moment: Moment): void;
+  (event: "remove", name: string): void;
 }>();
 
-const editing = ref(false);
-const editingMoment = ref<Moment>(cloneDeep(props.moment));
-const previewMoment = ref<Moment>(cloneDeep(props.moment));
-
-const handlerSave = (moment: Moment) => {
-  emit("save", moment);
-};
-
-const handlerUpdate = (moment: Moment) => {
-  editingMoment.value = cloneDeep(moment);
-  previewMoment.value = cloneDeep(moment);
-  editing.value = false;
-  emit("update", moment);
-};
+const editing = ref(props.editing);
+const editingMoment = ref<Moment>(toRaw(props.listedMoment?.moment));
+const previewMoment = ref<Moment>(toRaw(props.listedMoment?.moment));
+const owner = computed(() => props.listedMoment?.owner);
 
 const deleteMoment = () => {
   Dialog.warning({
@@ -58,7 +46,7 @@ const deleteMoment = () => {
     onConfirm: async () => {
       try {
         const { data } = await apiClient.delete(
-          `/apis/moment.halo.run/v1alpha1/moments/${props.moment.metadata.name}`
+          `/apis/moment.halo.run/v1alpha1/moments/${previewMoment.value.metadata.name}`
         );
 
         Toast.success("删除成功");
@@ -70,9 +58,25 @@ const deleteMoment = () => {
   });
 };
 
-const handlerCancel = () => {
+const handleUpdate = (moment: Moment) => {
+  editingMoment.value = toRaw(moment);
+  previewMoment.value = toRaw(moment);
   editing.value = false;
 };
+
+const handleApproved = async () => {
+  const { data } = await apiClient.get<Moment>(
+    `/apis/moment.halo.run/v1alpha1/moments/${editingMoment.value.metadata.name}`
+  );
+  // 更新当前需要提交的 moment spec 为最新
+  data.spec.approved = true;
+  await apiClient.put<Moment>(
+    `/apis/moment.halo.run/v1alpha1/moments/${editingMoment.value.metadata.name}`,
+    data
+  );
+  editingMoment.value.spec.approved = true;
+  previewMoment.value.spec.approved = true;
+};
 </script>
 <template>
   <div>
@@ -95,13 +99,27 @@ const handlerCancel = () => {
             <b> {{ owner?.displayName }} </b>
           </div>
           <div
-            v-if="props.moment.spec.visible == 'PRIVATE'"
+            v-if="previewMoment.spec.visible == 'PRIVATE'"
             v-tooltip="{
               content: '私有访问',
             }"
           >
             <IconEyeOff class="moments-text-xs moments-text-gray-500" />
           </div>
+          <div>
+            <VStatusDot
+              v-show="previewMoment.spec.approved === false"
+              class="moments-mr-2 moments-cursor-default"
+              state="success"
+              animate
+            >
+              <template #text>
+                <span class="text-xs text-gray-500">
+                  {{ `待审核` }}
+                </span>
+              </template>
+            </VStatusDot>
+          </div>
         </div>
         <div
           class="moments-absolute moments-right-0 moments-flex moments-justify-center moments-items-center"
@@ -111,10 +129,10 @@ const handlerCancel = () => {
           >
             <span
               v-tooltip="{
-                content: formatDatetime(moment?.spec.releaseTime),
+                content: formatDatetime(previewMoment.spec.releaseTime),
               }"
             >
-              {{ relativeTimeTo(moment?.spec.releaseTime) }}
+              {{ relativeTimeTo(previewMoment.spec.releaseTime) }}
             </span>
           </div>
           <VDropdown
@@ -129,6 +147,12 @@ const handlerCancel = () => {
               />
             </div>
             <template #popper>
+              <VDropdownItem
+                v-if="previewMoment.spec.approved == false"
+                @click="handleApproved"
+              >
+                审核通过
+              </VDropdownItem>
               <VDropdownItem @click="editing = true"> 编辑 </VDropdownItem>
               <VDropdownItem type="danger" @click="deleteMoment">
                 删除
@@ -141,9 +165,8 @@ const handlerCancel = () => {
         <MomentEdit
           v-if="editing"
           :moment="editingMoment"
-          @save="handlerSave"
-          @update="handlerUpdate"
-          @cancel="handlerCancel"
+          @update="handleUpdate"
+          @cancel="editing = false"
         ></MomentEdit>
         <MomentPreview
           v-else
diff --git a/console/src/components/TagFilterDropdown.vue b/console/src/components/TagFilterDropdown.vue
index 482c05c..25ea857 100644
--- a/console/src/components/TagFilterDropdown.vue
+++ b/console/src/components/TagFilterDropdown.vue
@@ -7,8 +7,7 @@ import {
   VEntityField,
 } from "@halo-dev/components";
 import { computed, ref } from "vue";
-import { useQuery } from "@tanstack/vue-query";
-import apiClient from "@/utils/api-client";
+import { useConsoleTagQueryFetch } from "@/composables/use-tag";
 
 const props = withDefaults(
   defineProps<{
@@ -26,19 +25,8 @@ const emit = defineEmits<{
 
 const keyword = ref(undefined);
 
-const { data: tags, refetch } = useQuery<string[]>({
-  queryKey: ["moments-tags"],
-  queryFn: async () => {
-    const { data } = await apiClient.get(
-      "/apis/console.api.moment.halo.run/v1alpha1/tags",
-      {
-        params: {
-          name: keyword.value,
-        },
-      }
-    );
-    return data;
-  },
+const { data: tags, refetch } = useConsoleTagQueryFetch({
+  keyword,
 });
 
 const searchResults = computed(() => tags.value || []);
diff --git a/console/src/components/TextEditor.vue b/console/src/components/TextEditor.vue
index efe62a1..9738c48 100644
--- a/console/src/components/TextEditor.vue
+++ b/console/src/components/TextEditor.vue
@@ -44,6 +44,8 @@ import {
 } from "@halo-dev/richtext-editor";
 import { watch } from "vue";
 import { TagsExtension } from "@/extensions/tags";
+import type { useTagQueryFetchProps } from "@/composables/use-tag";
+import type { UseQueryReturnType } from "@tanstack/vue-query";
 import MomentExtensionImage from "@/extensions/images";
 
 const props = withDefaults(
@@ -51,6 +53,9 @@ const props = withDefaults(
     html: string;
     raw: string;
     isEmpty: boolean;
+    tagQueryFetch: (
+      props: useTagQueryFetchProps
+    ) => UseQueryReturnType<unknown, unknown>;
   }>(),
   {
     html: "",
@@ -130,7 +135,9 @@ const editor = useEditor({
     }),
     ExtensionHighlight,
     ExtensionListKeymap,
-    TagsExtension,
+    TagsExtension.configure({
+      tagQueryFetch: props.tagQueryFetch,
+    }),
   ],
   autofocus: "end",
   onUpdate: () => {
diff --git a/console/src/composables/use-tag.ts b/console/src/composables/use-tag.ts
new file mode 100644
index 0000000..c791ded
--- /dev/null
+++ b/console/src/composables/use-tag.ts
@@ -0,0 +1,39 @@
+import apiClient from "@/utils/api-client";
+import { useQuery } from "@tanstack/vue-query";
+import type { Ref } from "vue";
+
+export interface useTagQueryFetchProps {
+  keyword?: Ref<string | undefined>;
+}
+
+export function useConsoleTagQueryFetch(
+  props: useTagQueryFetchProps
+): ReturnType<typeof useQuery> {
+  return useTagQueryFetch("console", props);
+}
+
+export function useUCTagQueryFetch(
+  props: useTagQueryFetchProps
+): ReturnType<typeof useQuery> {
+  return useTagQueryFetch("uc", props);
+}
+
+export function useTagQueryFetch(
+  group: "console" | "uc",
+  props: useTagQueryFetchProps
+): ReturnType<typeof useQuery> {
+  return useQuery<string[]>({
+    queryKey: ["moments-tags", props.keyword],
+    queryFn: async () => {
+      const { data } = await apiClient.get(
+        `/apis/${group}.api.moment.halo.run/v1alpha1/tags`,
+        {
+          params: {
+            name: props.keyword?.value,
+          },
+        }
+      );
+      return data;
+    },
+  });
+}
diff --git a/console/src/extensions/tags/TagsExtensionView.vue b/console/src/extensions/tags/TagsExtensionView.vue
index 7289d52..1b09076 100644
--- a/console/src/extensions/tags/TagsExtensionView.vue
+++ b/console/src/extensions/tags/TagsExtensionView.vue
@@ -1,42 +1,35 @@
 <script lang="ts" setup>
 import { ref, watch, type PropType } from "vue";
-import { useQuery } from "@tanstack/vue-query";
-import apiClient from "@/utils/api-client";
+import type { UseQueryReturnType } from "@tanstack/vue-query";
+import type { useTagQueryFetchProps } from "@/composables/use-tag";
 
 const props = defineProps({
   query: {
     type: String,
+    required: true,
   },
   command: {
     type: Function as PropType<(tag: string) => void>,
     required: true,
   },
+  tagQueryFetch: {
+    type: Function as PropType<
+      (props: useTagQueryFetchProps) => UseQueryReturnType<string[], unknown>
+    >,
+    required: true,
+  },
 });
 
 const selectedIndex = ref(0);
 
-const page = ref(1);
-const size = ref(20);
 const keyword = ref(props.query);
 
 const inputIntervalTime = 100;
 const timeInterval = ref(-1);
 const inputTimestamp = ref<number>(0);
 
-const { data: tags } = useQuery<string[]>({
-  queryKey: ["tags", page, size, keyword],
-  queryFn: async () => {
-    const { data } = await apiClient.get(
-      "/apis/console.api.moment.halo.run/v1alpha1/tags",
-      {
-        params: {
-          name: keyword.value,
-        },
-      }
-    );
-    return data;
-  },
-  refetchOnWindowFocus: false,
+const { data: tags } = props.tagQueryFetch({
+  keyword,
 });
 
 const inputFilter = (newValue: string | undefined) => {
diff --git a/console/src/extensions/tags/index.ts b/console/src/extensions/tags/index.ts
index b07f851..d952189 100644
--- a/console/src/extensions/tags/index.ts
+++ b/console/src/extensions/tags/index.ts
@@ -12,9 +12,14 @@ import TagsExtensionView from "./TagsExtensionView.vue";
 import tippy from "tippy.js";
 import Suggestion from "@tiptap/suggestion";
 import { PluginKey } from "@halo-dev/richtext-editor";
+import type { useTagQueryFetchProps } from "@/composables/use-tag";
+import type { UseQueryReturnType } from "@tanstack/vue-query";
 
 export interface TagOptions {
   HTMLAttributes: Record<string, any>;
+  tagQueryFetch: (
+    props: useTagQueryFetchProps
+  ) => UseQueryReturnType<unknown, unknown>;
 }
 
 declare module "@halo-dev/richtext-editor" {
@@ -39,6 +44,9 @@ export const TagsExtension = Mark.create<TagOptions>({
       HTMLAttributes: {
         class: "tag",
       },
+      tagQueryFetch: () => {
+        throw new Error("tagQueryFetch is not defined");
+      },
     };
   },
 
@@ -141,7 +149,7 @@ export const TagsExtension = Mark.create<TagOptions>({
           return {
             onStart: (props: Record<string, any>) => {
               component = new VueRenderer(TagsExtensionView, {
-                props,
+                props: { ...props, tagQueryFetch: this.options.tagQueryFetch },
                 editor: props.editor,
               });
 
diff --git a/console/src/index.ts b/console/src/index.ts
index cd753d8..ae59946 100644
--- a/console/src/index.ts
+++ b/console/src/index.ts
@@ -2,6 +2,7 @@ import "./styles/tailwind.css";
 import "./styles/index.scss";
 import { definePlugin } from "@halo-dev/console-shared";
 import MomentsList from "@/views/MomentsList.vue";
+import UcMomentsList from "@/uc/MomentsList.vue";
 import { markRaw } from "vue";
 import MingcuteMomentsLine from "~icons/mingcute/moment-line";
 import type { Moment } from "@/types";
@@ -28,6 +29,24 @@ export default definePlugin({
       },
     },
   ],
+  ucRoutes: [
+    {
+      parentName: "Root",
+      route: {
+        path: "/moments",
+        name: "Moments",
+        component: UcMomentsList,
+        meta: {
+          permissions: ["uc:plugin:moments:publish"],
+          menu: {
+            name: "瞬间",
+            group: "content",
+            icon: markRaw(MingcuteMomentsLine),
+          },
+        },
+      },
+    },
+  ],
   extensionPoints: {
     "comment:subject-ref:create": () => {
       return [
diff --git a/console/src/styles/index.scss b/console/src/styles/index.scss
index 42eab3c..0871602 100644
--- a/console/src/styles/index.scss
+++ b/console/src/styles/index.scss
@@ -188,14 +188,20 @@
           }
         }
 
-        p > img {
-          border-radius: 0.4rem;
-          overflow: hidden;
-          @apply moments-shadow;
-        }
+        p {
+          & > img {
+            border-radius: 0.4rem;
+            overflow: hidden;
+            @apply moments-shadow;
+          }
 
-        :not(pre) > code {
-          background-color: #afb8c133;
+          &:last-child {
+            margin-bottom: 0 !important;
+          }
+
+          &:not(pre) > code {
+            background-color: #afb8c133;
+          }
         }
       }
     }
diff --git a/console/src/types/index.ts b/console/src/types/index.ts
index 9f25314..7546bc1 100644
--- a/console/src/types/index.ts
+++ b/console/src/types/index.ts
@@ -30,6 +30,7 @@ export interface MomentSpec {
   visible?: MomentVisibleEnum;
   owner: string;
   tags: string[];
+  approved: boolean;
 }
 
 export interface Moment {
diff --git a/console/src/uc/MomentEdit.vue b/console/src/uc/MomentEdit.vue
new file mode 100644
index 0000000..45571a5
--- /dev/null
+++ b/console/src/uc/MomentEdit.vue
@@ -0,0 +1,395 @@
+<script lang="ts" setup>
+import { VButton, IconEye, IconEyeOff } from "@halo-dev/components";
+import type { Moment, MomentMedia, MomentMediaTypeEnum } from "@/types";
+import { Toast } from "@halo-dev/components";
+import type { AttachmentLike } from "@halo-dev/console-shared";
+import { computed, onMounted, ref, toRaw } from "vue";
+import MediaCard from "@/components/MediaCard.vue";
+import TextEditor from "@/components/TextEditor.vue";
+import SendMoment from "~icons/ic/sharp-send";
+import cloneDeep from "lodash.clonedeep";
+import TablerPhoto from "~icons/tabler/photo";
+import apiClient from "@/utils/api-client";
+import { useUCTagQueryFetch } from "@/composables/use-tag";
+
+const props = withDefaults(
+  defineProps<{
+    moment?: Moment;
+  }>(),
+  {
+    moment: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "save", moment: Moment): void;
+  (event: "update", moment: Moment): void;
+  (event: "cancel"): void;
+}>();
+
+const initMoment: Moment = {
+  spec: {
+    content: {
+      raw: "",
+      html: "",
+      medium: [],
+    },
+    releaseTime: new Date().toISOString(),
+    owner: "",
+    visible: "PUBLIC",
+    tags: [],
+    approved: false,
+  },
+  metadata: {
+    generateName: "moment-",
+  },
+  kind: "Moment",
+  apiVersion: "moment.halo.run/v1alpha1",
+};
+
+onMounted(() => {
+  if (props.moment) {
+    formState.value = cloneDeep(props.moment);
+  }
+});
+
+const formState = ref<Moment>(cloneDeep(initMoment));
+const saving = ref<boolean>(false);
+const attachmentSelectorModal = ref(false);
+const isUpdateMode = computed(
+  () => !!formState.value.metadata.creationTimestamp
+);
+const isEditorEmpty = ref<boolean>(true);
+const handlerCreateOrUpdateMoment = async () => {
+  if (saveDisable.value) {
+    return;
+  }
+  try {
+    saving.value = true;
+    queryEditorTags();
+    if (isUpdateMode.value) {
+      handleUpdate(formState.value);
+    } else {
+      handleSave(formState.value);
+      handleReset();
+    }
+  } catch (error) {
+    console.error(error);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const handleSave = async (moment: Moment) => {
+  moment.spec.releaseTime = new Date().toISOString();
+  moment.spec.approved = true;
+  const { data } = await apiClient.post<Moment>(
+    `/apis/uc.api.moment.halo.run/v1alpha1/moments`,
+    moment
+  );
+  emit("save", data);
+  Toast.success("发布成功");
+};
+
+const handleUpdate = async (moment: Moment) => {
+  const { data } = await apiClient.get<Moment>(
+    `/apis/uc.api.moment.halo.run/v1alpha1/moments/${moment.metadata.name}`
+  );
+  // 更新当前需要提交的 moment spec 为最新
+  data.spec = moment.spec;
+  const updated = await apiClient.put<Moment>(
+    `/apis/uc.api.moment.halo.run/v1alpha1/moments/${moment.metadata.name}`,
+    data
+  );
+  emit("update", updated.data);
+  Toast.success("发布成功");
+};
+
+const parse = new DOMParser();
+const queryEditorTags = function () {
+  let tags: Set<string> = new Set();
+  let document: Document = parse.parseFromString(
+    formState.value.spec.content.raw,
+    "text/html"
+  );
+  let nodeList: NodeList = document.querySelectorAll("a.tag");
+  if (nodeList) {
+    for (let tagNode of nodeList) {
+      if (tagNode.textContent) {
+        tags.add(tagNode.textContent);
+      }
+    }
+  }
+  formState.value.spec.tags = Array.from(tags);
+};
+
+const handleReset = () => {
+  formState.value = toRaw(cloneDeep(initMoment));
+  isEditorEmpty.value = true;
+};
+
+const supportImageTypes: string[] = [
+  "image/apng",
+  "image/avif",
+  "image/bmp",
+  "image/gif",
+  "image/x-icon",
+  "image/jpg",
+  "image/jpeg",
+  "image/png",
+  "image/svg+xml",
+  "image/tiff",
+  "image/webp",
+];
+
+const supportVideoTypes: string[] = ["video/*"];
+
+const supportAudioTypes: string[] = ["audio/*"];
+
+const accepts = [
+  ...supportImageTypes,
+  ...supportVideoTypes,
+  ...supportAudioTypes,
+];
+
+const mediumWhitelist: Map<string, MomentMediaTypeEnum> = new Map([
+  ["image", "PHOTO"],
+  ["video", "VIDEO"],
+  ["audio", "AUDIO"],
+]);
+
+const onAttachmentsSelect = async (attachments: AttachmentLike[]) => {
+  const medias: {
+    url: string;
+    cover?: string;
+    displayName?: string;
+    type?: string;
+  }[] = attachments
+    .map((attachment) => {
+      if (typeof attachment === "string") {
+        return {
+          url: attachment,
+          cover: attachment,
+        };
+      }
+      if ("url" in attachment) {
+        return {
+          url: attachment.url,
+          cover: attachment.url,
+        };
+      }
+      if ("spec" in attachment) {
+        return {
+          url: attachment.status?.permalink,
+          cover: attachment.status?.permalink,
+          displayName: attachment.spec.displayName,
+          type: attachment.spec.mediaType,
+        };
+      }
+    })
+    .filter(Boolean) as {
+    url: string;
+    cover?: string;
+    displayName?: string;
+    type?: string;
+  }[];
+  if (!formState.value.spec.content.medium) {
+    formState.value.spec.content.medium = [];
+  }
+  medias.forEach((media) => {
+    if (!addMediumVerify(media)) {
+      return false;
+    }
+    if (!media.type) {
+      return false;
+    }
+    let fileType = media.type.split("/")[0];
+    formState.value.spec.content.medium?.push({
+      type: mediumWhitelist.get(fileType),
+      url: media.url,
+      originType: media.type,
+    } as MomentMedia);
+  });
+};
+
+const saveDisable = computed(() => {
+  let medium = formState.value.spec.content.medium;
+  if (medium !== undefined && medium.length > 0 && medium.length <= 9) {
+    return false;
+  }
+  if (!isEditorEmpty.value) {
+    return false;
+  }
+
+  if (isUpdateMode.value) {
+    let oldVisible = props.moment?.spec.visible;
+    if (oldVisible != formState.value.spec.visible) {
+      return false;
+    }
+  }
+
+  return true;
+});
+
+const removeMedium = (media: MomentMedia) => {
+  let formMedium = formState.value.spec.content.medium;
+  if (!formMedium) {
+    return;
+  }
+  let index: number = formMedium.indexOf(media);
+  if (index > -1) {
+    formMedium.splice(index, 1);
+  }
+};
+
+const handlerCancel = () => {
+  emit("cancel");
+};
+
+const uploadMediumNum = 9;
+
+const addMediumVerify = (media?: {
+  url: string;
+  cover?: string;
+  displayName?: string;
+  type?: string;
+}) => {
+  let formMedium = formState.value.spec.content.medium;
+  if (!formMedium || formMedium.length == 0) {
+    return true;
+  }
+
+  if (formMedium.length >= uploadMediumNum) {
+    Toast.warning("最多允许添加 " + uploadMediumNum + " 个附件");
+    return false;
+  }
+
+  if (media) {
+    if (
+      formState.value.spec.content.medium?.filter(
+        (item) => item.url == media.url
+      ).length != 0
+    ) {
+      Toast.warning("已过滤重复添加的附件");
+      return false;
+    }
+  }
+
+  return true;
+};
+
+function handleToggleVisible() {
+  const { visible: currentVisible } = formState.value.spec;
+  formState.value.spec.visible =
+    currentVisible === "PUBLIC" ? "PRIVATE" : "PUBLIC";
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.ctrlKey && event.key === "Enter") {
+    handlerCreateOrUpdateMoment();
+    return false;
+  }
+}
+</script>
+
+<template>
+  <div
+    class="card moments-bg-white moments-shrink moments-border moments-rounded-md moments-overflow-hidden focus-within:shadow-lg"
+  >
+    <AttachmentSelectorModal
+      v-model:visible="attachmentSelectorModal"
+      v-permission="['system:attachments:view']"
+      :min="1"
+      :max="9"
+      :accepts="accepts"
+      @select="onAttachmentsSelect"
+    />
+    <TextEditor
+      v-model:raw="formState.spec.content.raw"
+      v-model:html="formState.spec.content.html"
+      v-model:isEmpty="isEditorEmpty"
+      :tag-query-fetch="useUCTagQueryFetch"
+      class="moments-min-h-[9rem] moments-p-3.5"
+      tabindex="-1"
+      @keydown="handleKeydown"
+    />
+    <div
+      v-if="formState.spec.content.medium?.length"
+      class="img-box moments-flex moments-px-3.5 moments-py-2"
+    >
+      <ul
+        class="moments-grid moments-grid-cols-3 moments-gap-1.5 moments-w-full sm:moments-w-1/2"
+        role="list"
+      >
+        <li
+          v-for="(media, index) in formState.spec.content.medium"
+          :key="index"
+          class="moments-rounded-md moments-border moments-overflow-hidden moments-inline-block"
+        >
+          <MediaCard :media="media" @remove="removeMedium"></MediaCard>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="moments-bg-white moments-flex moments-justify-between moments-px-3.5 moments-py-2"
+    >
+      <div class="moments-h-fit">
+        <div
+          class="moments-p-2 moments-group hover:moments-bg-sky-600/10 moments-cursor-pointer moments-rounded-full moments-flex moments-items-center moments-justify-center"
+        >
+          <TablerPhoto
+            class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-sky-600"
+            @click="addMediumVerify() && (attachmentSelectorModal = true)"
+          />
+        </div>
+      </div>
+
+      <div class="moments-flex moments-items-center moments-space-x-2.5">
+        <div
+          v-tooltip="{
+            content:
+              formState.spec.visible === 'PRIVATE' ? `私有访问` : '公开访问',
+          }"
+          class="moments-p-2 moments-group moments-cursor-pointer moments-rounded-full moments-flex moments-items-center moments-justify-center"
+          :class="
+            formState.spec.visible === 'PRIVATE'
+              ? 'hover:moments-bg-red-600/10'
+              : 'hover:moments-bg-green-600/10'
+          "
+          @click="handleToggleVisible()"
+        >
+          <IconEyeOff
+            v-if="formState.spec.visible === 'PRIVATE'"
+            class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-red-600"
+          />
+          <IconEye
+            v-else
+            class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-green-600"
+          />
+        </div>
+
+        <button
+          v-if="isUpdateMode"
+          class="moments-cursor-pointer moments-text-gray-600 hover:moments-text-sky-600 moments-inline-flex moments-items-center moments-rounded moments-h-7 hover:moments-bg-sky-600/10 moments-px-3"
+          @click="handlerCancel"
+        >
+          <span class="moments-text-xs"> 取消 </span>
+        </button>
+
+        <div v-permission="['uc:plugin:moments:publish']" class="moments-h-fit">
+          <VButton
+            v-model:disabled="saveDisable"
+            :loading="saving"
+            size="sm"
+            type="primary"
+            @click="handlerCreateOrUpdateMoment"
+          >
+            <template #icon>
+              <SendMoment class="moments-scale-[1.35] h-full w-full" />
+            </template>
+          </VButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/console/src/uc/MomentItem.vue b/console/src/uc/MomentItem.vue
new file mode 100644
index 0000000..dab9d2c
--- /dev/null
+++ b/console/src/uc/MomentItem.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { ListedMoment, Moment } from "@/types";
+import { computed, ref, toRaw } from "vue";
+import MomentEdit from "./MomentEdit.vue";
+import MomentPreview from "@/components/MomentPreview.vue";
+import apiClient from "@/utils/api-client";
+import {
+  Dialog,
+  Toast,
+  VAvatar,
+  VDropdown,
+  VDropdownItem,
+  IconEyeOff,
+  VStatusDot,
+} from "@halo-dev/components";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
+import LucideMoreHorizontal from "~icons/lucide/more-horizontal";
+
+const props = withDefaults(
+  defineProps<{
+    listedMoment: ListedMoment;
+    editing: boolean;
+  }>(),
+  {
+    listedMoment: undefined,
+    editing: false,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "save", moment: Moment): void;
+  (event: "update", moment: Moment): void;
+  (event: "remove", name: string): void;
+}>();
+
+const editing = ref(props.editing);
+const editingMoment = ref<Moment>(toRaw(props.listedMoment?.moment));
+const previewMoment = ref<Moment>(toRaw(props.listedMoment?.moment));
+const owner = computed(() => props.listedMoment?.owner);
+
+const deleteMoment = () => {
+  Dialog.warning({
+    title: "确定要删除该瞬间吗？",
+    description: "该操作不可逆",
+    confirmType: "danger",
+    onConfirm: async () => {
+      try {
+        const { data } = await apiClient.delete(
+          `/apis/uc.api.moment.halo.run/v1alpha1/moments/${previewMoment.value.metadata.name}`
+        );
+
+        Toast.success("删除成功");
+        emit("remove", data);
+      } catch (error) {
+        console.error("Failed to delete comment", error);
+      }
+    },
+  });
+};
+
+const handleUpdate = (moment: Moment) => {
+  editingMoment.value = toRaw(moment);
+  previewMoment.value = toRaw(moment);
+  editing.value = false;
+};
+</script>
+<template>
+  <div>
+    <div
+      class="preview card moments-bg-white moments-shrink moments-py-6 moments-relative moments-border-t-[1px] moments-border-gray-300"
+    >
+      <div
+        class="header moments-flex moments-justify-between moments-items-center"
+      >
+        <div
+          class="moments-flex moments-justify-center moments-items-center moments-space-x-3"
+        >
+          <VAvatar
+            :alt="owner?.displayName"
+            :src="owner?.avatar"
+            size="md"
+            circle
+          ></VAvatar>
+          <div>
+            <b> {{ owner?.displayName }} </b>
+          </div>
+          <div
+            v-if="previewMoment.spec.visible == 'PRIVATE'"
+            v-tooltip="{
+              content: '私有访问',
+            }"
+          >
+            <IconEyeOff class="moments-text-xs moments-text-gray-500" />
+          </div>
+          <div>
+            <VStatusDot
+              v-show="!previewMoment.spec.approved"
+              v-tooltip="'请等待管理员审核通过'"
+              class="moments-mr-2 moments-cursor-default"
+              state="success"
+              animate
+            >
+              <template #text>
+                <span class="text-xs text-gray-500">
+                  {{ `审核中` }}
+                </span>
+              </template>
+            </VStatusDot>
+          </div>
+        </div>
+        <div
+          class="moments-absolute moments-right-0 moments-flex moments-justify-center moments-items-center"
+        >
+          <div
+            class="moments-text-xs moments-text-gray-500 moments-mr-2 moments-cursor-default"
+          >
+            <span
+              v-tooltip="{
+                content: formatDatetime(previewMoment.spec.releaseTime),
+              }"
+            >
+              {{ relativeTimeTo(previewMoment.spec.releaseTime) }}
+            </span>
+          </div>
+          <HasPermission
+            :permissions="[
+              'uc:plugin:moments:publish',
+              'uc:plugin:moments:delete',
+            ]"
+          >
+            <VDropdown compute-transform-origin>
+              <div
+                class="moments-p-2 moments-group hover:moments-bg-sky-600/10 moments-cursor-pointer moments-rounded-full moments-flex moments-items-center moments-justify-center"
+              >
+                <LucideMoreHorizontal
+                  class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-sky-600 moments-cursor-pointer"
+                />
+              </div>
+              <template #popper>
+                <HasPermission :permissions="['uc:plugin:moments:publish']">
+                  <VDropdownItem @click="editing = true"> 编辑 </VDropdownItem>
+                </HasPermission>
+                <HasPermission :permissions="['uc:plugin:moments:delete']">
+                  <VDropdownItem type="danger" @click="deleteMoment">
+                    删除
+                  </VDropdownItem>
+                </HasPermission>
+              </template>
+            </VDropdown>
+          </HasPermission>
+        </div>
+      </div>
+      <div class="moments-pl-14 moments-pt-3">
+        <MomentEdit
+          v-if="editing"
+          :moment="editingMoment"
+          @update="handleUpdate"
+          @cancel="editing = false"
+        ></MomentEdit>
+        <MomentPreview
+          v-else
+          :moment="previewMoment"
+          @switch-edit-mode="editing = true"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/console/src/uc/MomentsList.vue b/console/src/uc/MomentsList.vue
new file mode 100644
index 0000000..7b61307
--- /dev/null
+++ b/console/src/uc/MomentsList.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import { computed, provide, ref, watch, type Ref } from "vue";
+import {
+  VPageHeader,
+  VLoading,
+  VPagination,
+  VCard,
+} from "@halo-dev/components";
+import MingcuteMomentsLine from "~icons/mingcute/moment-line";
+import type { User } from "@halo-dev/api-client";
+import type { ListedMoment } from "@/types";
+import { useQuery } from "@tanstack/vue-query";
+import apiClient from "@/utils/api-client";
+import MomentItem from ".//MomentItem.vue";
+import DatePicker from "vue-datepicker-next";
+import "vue-datepicker-next/index.css";
+import "vue-datepicker-next/locale/zh-cn.es";
+import { toISODayEndOfTime } from "@/utils/date";
+import { useRouteQuery } from "@vueuse/router";
+import TagFilterDropdown from "./TagFilterDropdown.vue";
+import MomentEdit from "./MomentEdit.vue";
+
+interface VisibleItem {
+  label: string;
+  value?: "PUBLIC" | "PRIVATE";
+}
+
+interface SortItem {
+  label: string;
+  sort: "RELEASE_TIME";
+  sortOrder: boolean;
+}
+
+const VisibleItems: VisibleItem[] = [
+  {
+    label: "全部",
+    value: undefined,
+  },
+  {
+    label: "公开",
+    value: "PUBLIC",
+  },
+  {
+    label: "私有",
+    value: "PRIVATE",
+  },
+];
+
+const tag = useRouteQuery<string>("tag");
+
+const page = ref(1);
+const size = ref(20);
+const total = ref(0);
+const totalPages = ref(1);
+const hasPrevious = ref(false);
+const hasNext = ref(false);
+
+const selectedVisibleItem = ref<VisibleItem>(VisibleItems[0]);
+const selectedSortItem = ref<SortItem>();
+const selectedContributor = ref<User>();
+const keyword = ref("");
+const momentsRangeTime = ref<Array<Date>>([]);
+
+const startDate = computed(() => {
+  return momentsRangeTime.value[0] || "";
+});
+const endDate = computed(() => {
+  let endTime: Date = momentsRangeTime.value[1] || "";
+  return toISODayEndOfTime(endTime);
+});
+
+const {
+  data: moments,
+  isLoading,
+  refetch,
+} = useQuery<ListedMoment[]>({
+  queryKey: [
+    page,
+    size,
+    selectedContributor,
+    selectedVisibleItem,
+    selectedSortItem,
+    startDate,
+    endDate,
+    keyword,
+    tag,
+  ],
+  queryFn: async () => {
+    let contributors: string[] | undefined;
+
+    if (selectedContributor.value) {
+      contributors = [selectedContributor.value.metadata.name];
+    }
+
+    const { data } = await apiClient.get(
+      "/apis/uc.api.moment.halo.run/v1alpha1/moments",
+      {
+        params: {
+          page: page.value,
+          size: size.value,
+          visible: selectedVisibleItem.value?.value,
+          sort: selectedSortItem.value?.sort,
+          sortOrder: selectedSortItem.value?.sortOrder,
+          keyword: keyword.value,
+          startDate: startDate.value,
+          endDate: endDate.value,
+          contributor: contributors,
+          tag: tag.value,
+        },
+      }
+    );
+    total.value = data.total;
+    totalPages.value = data.value;
+    hasNext.value = data.hasNext;
+    hasPrevious.value = data.hasPrevious;
+    return data.items;
+  },
+  refetchInterval: (data) => {
+    const abnormalMoments = data?.filter((moment) => {
+      const { metadata } = moment.moment;
+      return metadata.deletionTimestamp;
+    });
+    return abnormalMoments?.length ? 500 : false;
+  },
+  refetchOnWindowFocus: false,
+});
+
+function updateTagQuery(tagQuery: string) {
+  tag.value = tagQuery;
+}
+
+provide("tag", {
+  tag: tag.value,
+  updateTagQuery,
+});
+
+watch([tag, momentsRangeTime], () => {
+  page.value = 1;
+  size.value = 20;
+  refetch();
+});
+</script>
+<template>
+  <VPageHeader title="瞬间">
+    <template #icon>
+      <MingcuteMomentsLine class="moments-mr-2 moments-self-center" />
+    </template>
+  </VPageHeader>
+  <VCard class="moments-m-0 md:moments-m-4 moments-flex-1">
+    <div class="moments-container moments-mx-auto">
+      <div
+        class="moments-content moments-my-2 md:moments-my-4 moments-flex moments-flex-col moments-space-y-2"
+      >
+        <MomentEdit @save="refetch()" />
+
+        <div class="moment-header moments-pt-8 moments-pb-2">
+          <div
+            class="moments-flex moments-flex-col moments-justify-between sm:moments-flex-row moments-space-x-2"
+          >
+            <div
+              class="moments-left-0 moments-mb-2 sm:moments-mb-0 moments-flex moments-items-center moments-mr-2"
+            >
+              <TagFilterDropdown
+                v-model="tag"
+                :label="'标签'"
+              ></TagFilterDropdown>
+            </div>
+
+            <div class="moments-right-0 !moments-ml-0 moments-flex">
+              <DatePicker
+                v-model:value="momentsRangeTime"
+                input-class="mx-input moments-rounded"
+                class="moments-cursor-pointer date-picker range-time moments-max-w-[13rem] md:moments-max-w-[15rem]"
+                range
+                :editable="false"
+                placeholder="筛选日期范围"
+              />
+            </div>
+          </div>
+        </div>
+
+        <VLoading v-if="isLoading" />
+
+        <Transition v-else appear name="fade">
+          <ul
+            v-if="moments && moments.length > 0"
+            class="box-border moments-flex moments-flex-col moments-space-y-2"
+            role="list"
+          >
+            <li v-for="moment in moments" :key="moment.moment.metadata.name">
+              <MomentItem
+                :key="moment.moment.metadata.name"
+                :listed-moment="moment"
+                @remove="refetch()"
+              />
+            </li>
+          </ul>
+          <template v-else>
+            <div
+              class="moments-flex moments-justify-center moments-items-center moments-h-full"
+            >
+              <span class="moments-text-gray-500">暂无数据</span>
+            </div>
+          </template>
+        </Transition>
+
+        <div
+          v-if="hasPrevious || hasNext"
+          s
+          class="moments-my-5 flex moments-justify-center"
+        >
+          <VPagination
+            v-model:page="page"
+            v-model:size="size"
+            class="!moments-bg-transparent"
+            :total="total"
+            :size-options="[20, 30, 50, 100]"
+          />
+        </div>
+      </div>
+    </div>
+  </VCard>
+</template>
+<style lang="scss">
+.date-picker {
+  & input {
+    @apply moments-rounded-md;
+  }
+}
+</style>
diff --git a/console/src/uc/TagFilterDropdown.vue b/console/src/uc/TagFilterDropdown.vue
new file mode 100644
index 0000000..43dd4c5
--- /dev/null
+++ b/console/src/uc/TagFilterDropdown.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import {
+  VEntity,
+  VDropdown,
+  IconArrowDown,
+  IconClose,
+  VEntityField,
+} from "@halo-dev/components";
+import { computed, ref } from "vue";
+import { useUCTagQueryFetch } from "@/composables/use-tag";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    label: string;
+  }>(),
+  {
+    modelValue: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value?: string): void;
+}>();
+
+const keyword = ref(undefined);
+
+const { data: tags, refetch } = useUCTagQueryFetch({
+  keyword,
+});
+
+const searchResults = computed(() => tags.value || []);
+
+const dropdown = ref();
+
+const handleSelect = (tag: string) => {
+  if (tag === props.modelValue) {
+    emit("update:modelValue", undefined);
+  } else {
+    emit("update:modelValue", tag);
+  }
+
+  dropdown.value.hide();
+};
+
+const handleCloseTag = (event: Event) => {
+  emit("update:modelValue", undefined);
+  event.stopPropagation();
+};
+</script>
+
+<template>
+  <VDropdown ref="dropdown" :classes="['!p-0']" @show="refetch">
+    <div
+      class="tag-filter-label moments-group"
+      :class="{ 'font-semibold text-gray-700': modelValue !== undefined }"
+    >
+      <span v-if="!modelValue" class="mr-0.5">
+        {{ label }}
+      </span>
+      <span v-else class="mr-0.5"> {{ label }}：{{ modelValue }} </span>
+      <span class="moments-text-base">
+        <IconArrowDown :class="{ 'group-hover:moments-hidden': modelValue }" />
+        <IconClose
+          v-if="modelValue"
+          class="moments-hidden group-hover:moments-block"
+          @click="handleCloseTag"
+        />
+      </span>
+    </div>
+    <template #popper>
+      <div class="h-96 w-80">
+        <div class="border-b border-b-gray-100 bg-white p-4">
+          <FormKit
+            id="tagFilterDropdownInput"
+            v-model="keyword"
+            :placeholder="`输入${label}搜索`"
+            type="text"
+          ></FormKit>
+        </div>
+        <div>
+          <ul
+            class="box-border h-full w-full divide-y divide-gray-100"
+            role="list"
+          >
+            <li
+              v-for="(tag, index) in searchResults"
+              :key="index"
+              @click="handleSelect(tag)"
+            >
+              <VEntity :is-selected="modelValue === tag">
+                <template #start>
+                  <VEntityField>
+                    <template #title>
+                      {{ tag }}
+                    </template>
+                  </VEntityField>
+                </template>
+              </VEntity>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+  </VDropdown>
+</template>
+<style scoped lang="scss">
+.tag-filter-label {
+  @apply moments-flex moments-cursor-pointer moments-select-none moments-items-center moments-text-sm moments-leading-9 moments-px-3 moments-text-gray-700 moments-rounded-lg hover:moments-text-black;
+  border: 1px solid rgb(209 213 219);
+}
+</style>
diff --git a/console/src/views/MomentsList.vue b/console/src/views/MomentsList.vue
index 4ab348c..91984fd 100644
--- a/console/src/views/MomentsList.vue
+++ b/console/src/views/MomentsList.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, provide, ref } from "vue";
+import { computed, provide, ref, watch } from "vue";
 import {
   VPageHeader,
   VLoading,
@@ -9,46 +9,28 @@ import {
   IconExternalLinkLine,
 } from "@halo-dev/components";
 import MingcuteMomentsLine from "~icons/mingcute/moment-line";
-import type { User } from "@halo-dev/api-client";
 import type { ListedMoment } from "@/types";
 import { useQuery } from "@tanstack/vue-query";
 import apiClient from "@/utils/api-client";
 import MomentItem from "@/components/MomentItem.vue";
-import MomentEdit from "@/components/MomentEdit.vue";
 import DatePicker from "vue-datepicker-next";
 import "vue-datepicker-next/index.css";
 import "vue-datepicker-next/locale/zh-cn.es";
 import { toISODayEndOfTime } from "@/utils/date";
 import { useRouteQuery } from "@vueuse/router";
 import TagFilterDropdown from "@/components/TagFilterDropdown.vue";
-
-interface VisibleItem {
-  label: string;
-  value?: "PUBLIC" | "PRIVATE";
-}
-
-interface SortItem {
-  label: string;
-  sort: "RELEASE_TIME";
-  sortOrder: boolean;
-}
-
-const VisibleItems: VisibleItem[] = [
-  {
-    label: "全部",
-    value: undefined,
-  },
-  {
-    label: "公开",
-    value: "PUBLIC",
-  },
-  {
-    label: "私有",
-    value: "PRIVATE",
-  },
-];
+import MomentEdit from "@/components/MomentEdit.vue";
+import FilterDropdown from "@/components/FilterDropdown.vue";
 
 const tag = useRouteQuery<string>("tag");
+const selectedApprovedStatus = useRouteQuery<
+  string | undefined,
+  boolean | undefined
+>("approved", undefined, {
+  transform: (value) => {
+    return value ? value === "true" : undefined;
+  },
+});
 
 const page = ref(1);
 const size = ref(20);
@@ -57,9 +39,6 @@ const totalPages = ref(1);
 const hasPrevious = ref(false);
 const hasNext = ref(false);
 
-const selectedVisibleItem = ref<VisibleItem>(VisibleItems[0]);
-const selectedSortItem = ref<SortItem>();
-const selectedContributor = ref<User>();
 const keyword = ref("");
 const momentsRangeTime = ref<Array<Date>>([]);
 
@@ -79,34 +58,23 @@ const {
   queryKey: [
     page,
     size,
-    selectedContributor,
-    selectedVisibleItem,
-    selectedSortItem,
+    selectedApprovedStatus,
     startDate,
     endDate,
     keyword,
     tag,
   ],
   queryFn: async () => {
-    let contributors: string[] | undefined;
-
-    if (selectedContributor.value) {
-      contributors = [selectedContributor.value.metadata.name];
-    }
-
     const { data } = await apiClient.get(
       "/apis/console.api.moment.halo.run/v1alpha1/moments",
       {
         params: {
           page: page.value,
           size: size.value,
-          visible: selectedVisibleItem.value?.value,
-          sort: selectedSortItem.value?.sort,
-          sortOrder: selectedSortItem.value?.sortOrder,
+          approved: selectedApprovedStatus.value,
           keyword: keyword.value,
           startDate: startDate.value,
           endDate: endDate.value,
-          contributor: contributors,
           tag: tag.value,
         },
       }
@@ -131,15 +99,17 @@ function updateTagQuery(tagQuery: string) {
   tag.value = tagQuery;
 }
 
-const handleCloseTag = () => {
-  updateTagQuery("");
-};
-
 provide("tag", {
   tag: tag.value,
   updateTagQuery,
 });
 
+watch([tag, selectedApprovedStatus, momentsRangeTime], () => {
+  page.value = 1;
+  size.value = 20;
+  refetch();
+});
+
 const handleJumpToFrontDesk = () => {
   window.open("/moments", "_blank");
 };
@@ -170,12 +140,29 @@ const handleJumpToFrontDesk = () => {
             class="moments-flex moments-flex-col moments-justify-between sm:moments-flex-row moments-space-x-2"
           >
             <div
-              class="moments-left-0 moments-mb-2 sm:moments-mb-0 moments-flex moments-items-center moments-mr-2"
+              class="moments-left-0 moments-mb-2 sm:moments-mb-0 moments-flex moments-items-center moments-mr-2 moments-space-x-2"
             >
               <TagFilterDropdown
                 v-model="tag"
                 :label="'标签'"
               ></TagFilterDropdown>
+              <FilterDropdown
+                v-model="selectedApprovedStatus"
+                label="状态"
+                :items="[
+                  {
+                    label: '全部',
+                  },
+                  {
+                    label: '已审核',
+                    value: true,
+                  },
+                  {
+                    label: '待审核',
+                    value: false,
+                  },
+                ]"
+              />
             </div>
 
             <div class="moments-right-0 !moments-ml-0 moments-flex">
@@ -202,8 +189,7 @@ const handleJumpToFrontDesk = () => {
             <li v-for="moment in moments" :key="moment.moment.metadata.name">
               <MomentItem
                 :key="moment.moment.metadata.name"
-                :moment="moment.moment"
-                :owner="moment.owner"
+                :listed-moment="moment"
                 @remove="refetch()"
               />
             </li>
diff --git a/src/main/java/run/halo/moments/Moment.java b/src/main/java/run/halo/moments/Moment.java
index 16fa184..b6c8fc5 100644
--- a/src/main/java/run/halo/moments/Moment.java
+++ b/src/main/java/run/halo/moments/Moment.java
@@ -1,5 +1,7 @@
 package run.halo.moments;
 
+import static io.swagger.v3.oas.annotations.media.Schema.RequiredMode.REQUIRED;
+
 import io.swagger.v3.oas.annotations.media.ArraySchema;
 import io.swagger.v3.oas.annotations.media.Schema;
 import java.time.Instant;
@@ -19,7 +21,7 @@
 public class Moment extends AbstractExtension {
     public static final String REQUIRE_SYNC_ON_STARTUP_INDEX_NAME = "requireSyncOnStartup";
 
-    @Schema(required = true)
+    @Schema(requiredMode = REQUIRED)
     private MomentSpec spec;
 
     private Status status;
@@ -27,7 +29,7 @@ public class Moment extends AbstractExtension {
     @Data
     public static class MomentSpec {
 
-        @Schema(required = true)
+        @Schema(requiredMode = REQUIRED)
         private MomentContent content;
 
         @Schema(description = "Release timestamp. This field can be customized by owner")
@@ -37,11 +39,16 @@ public static class MomentSpec {
             defaultValue = "PUBLIC")
         private MomentVisible visible;
 
-        @Schema(required = true, description = "Owner of the moment")
+        @Schema(requiredMode = REQUIRED, description = "Owner of the moment")
         private String owner;
 
         @Schema(description = "Tags of the moment")
         private Set<String> tags;
+
+        @Schema(defaultValue = "false")
+        private Boolean approved;
+
+        private Instant approvedTime;
     }
 
     @Data
diff --git a/src/main/java/run/halo/moments/MomentEndpoint.java b/src/main/java/run/halo/moments/MomentEndpoint.java
index b101af9..85bca40 100644
--- a/src/main/java/run/halo/moments/MomentEndpoint.java
+++ b/src/main/java/run/halo/moments/MomentEndpoint.java
@@ -6,11 +6,15 @@
 import static org.springdoc.core.fn.builders.requestbody.Builder.requestBodyBuilder;
 
 import io.swagger.v3.oas.annotations.enums.ParameterIn;
+import java.time.Instant;
 import lombok.AllArgsConstructor;
 import org.apache.commons.lang3.StringUtils;
 import org.springdoc.core.fn.builders.schema.Builder;
 import org.springdoc.webflux.core.fn.SpringdocRouteBuilder;
 import org.springframework.http.MediaType;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.ReactiveSecurityContextHolder;
+import org.springframework.security.core.context.SecurityContext;
 import org.springframework.stereotype.Component;
 import org.springframework.web.reactive.function.server.RouterFunction;
 import org.springframework.web.reactive.function.server.ServerRequest;
@@ -61,7 +65,7 @@ public RouterFunction<ServerResponse> endpoint() {
                     .response(responseBuilder()
                         .implementation(ListedMoment.class)
                     ))
-            .GET("tags", this::listTags,
+            .GET("tags", this::listMyTags,
                 builder -> builder.operationId("ListTags")
                     .description("List all moment tags.")
                     .tag(tag)
@@ -105,6 +109,11 @@ public GroupVersion groupVersion() {
 
     private Mono<ServerResponse> createMoment(ServerRequest serverRequest) {
         return serverRequest.bodyToMono(Moment.class)
+            .map(moment -> {
+                moment.getSpec().setApproved(true);
+                moment.getSpec().setApprovedTime(Instant.now());
+                return moment;
+            })
             .flatMap(momentService::create)
             .flatMap(moment -> ServerResponse.ok().bodyValue(moment));
     }
@@ -115,12 +124,20 @@ private Mono<ServerResponse> listMoment(ServerRequest serverRequest) {
             .flatMap(listedMoments -> ServerResponse.ok().bodyValue(listedMoments));
     }
 
-    private Mono<ServerResponse> listTags(ServerRequest request) {
+    private Mono<ServerResponse> listMyTags(ServerRequest request) {
         String name = request.queryParam("name").orElse(null);
-        return momentService.listAllTags()
+        return getCurrentUser()
+            .map(username -> new MomentQuery(request.exchange(), username))
+            .flatMapMany(momentService::listAllTags)
             .filter(tagName -> StringUtils.isBlank(name) || StringUtils.containsIgnoreCase(tagName,
                 name))
             .collectList()
             .flatMap(result -> ServerResponse.ok().bodyValue(result));
     }
+
+    private Mono<String> getCurrentUser() {
+        return ReactiveSecurityContextHolder.getContext()
+            .map(SecurityContext::getAuthentication)
+            .map(Authentication::getName);
+    }
 }
diff --git a/src/main/java/run/halo/moments/MomentQuery.java b/src/main/java/run/halo/moments/MomentQuery.java
index 65accfa..fa94bf7 100644
--- a/src/main/java/run/halo/moments/MomentQuery.java
+++ b/src/main/java/run/halo/moments/MomentQuery.java
@@ -31,11 +31,18 @@
 public class MomentQuery extends SortableRequest {
     private final MultiValueMap<String, String> queryParams;
 
+    private String username;
+
     public MomentQuery(ServerWebExchange exchange) {
         super(exchange);
         this.queryParams = exchange.getRequest().getQueryParams();
     }
 
+    public MomentQuery(ServerWebExchange exchange, String username) {
+        this(exchange);
+        this.username = username;
+    }
+
     @Nullable
     @Schema(description = "Moments filtered by keyword.")
     public String getKeyword() {
@@ -44,6 +51,9 @@ public String getKeyword() {
 
     @Schema(description = "Owner name.")
     public String getOwnerName() {
+        if (StringUtils.isNotBlank(username)) {
+            return username;
+        }
         String ownerName = queryParams.getFirst("ownerName");
         return StringUtils.isBlank(ownerName) ? null : ownerName;
     }
@@ -90,6 +100,10 @@ public ListOptions toListOptions() {
             query = and(query, equal("spec.visible", getVisible().name()));
         }
 
+        if (getApproved() != null) {
+            query = and(query, equal("spec.approved", Boolean.toString(getApproved())));
+        }
+
         if (getStartDate() != null) {
             query = and(query, greaterThanOrEqual("spec.releaseTime", getStartDate().toString()));
         }
@@ -97,8 +111,7 @@ public ListOptions toListOptions() {
             query = and(query, lessThanOrEqual("spec.releaseTime", getEndDate().toString()));
         }
 
-        if (listOptions.getFieldSelector() != null
-            && listOptions.getFieldSelector().query() != null) {
+        if (listOptions.getFieldSelector() != null) {
             query = and(query, listOptions.getFieldSelector().query());
         }
         if (StringUtils.isNotBlank(getKeyword())) {
@@ -116,6 +129,15 @@ public PageRequest toPageRequest() {
         return PageRequestImpl.of(getPage(), getSize(), sort);
     }
 
+    @Schema(description = "moment approved.")
+    public Boolean getApproved() {
+        return convertBooleanOrNull(queryParams.getFirst("approved"));
+    }
+
+    private Boolean convertBooleanOrNull(String value) {
+        return StringUtils.isBlank(value) ? null : Boolean.parseBoolean(value);
+    }
+
     private Instant convertInstantOrNull(String timeStr) {
         return StringUtils.isBlank(timeStr) ? null : Instant.parse(timeStr);
     }
diff --git a/src/main/java/run/halo/moments/MomentReconciler.java b/src/main/java/run/halo/moments/MomentReconciler.java
index 6f82071..4263380 100644
--- a/src/main/java/run/halo/moments/MomentReconciler.java
+++ b/src/main/java/run/halo/moments/MomentReconciler.java
@@ -2,6 +2,7 @@
 
 import static run.halo.app.extension.index.query.QueryFactory.equal;
 
+import java.time.Instant;
 import java.util.Set;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Component;
@@ -48,6 +49,13 @@ public Result reconcile(Request request) {
                 moment.setStatus(status);
             }
             status.setObservedVersion(moment.getMetadata().getVersion() + 1);
+            // add approved marks to the old data by default.
+            if (moment.getSpec().getApproved() == null) {
+                moment.getSpec().setApproved(true);
+            }
+            if (moment.getSpec().getApproved() && moment.getSpec().getApprovedTime() == null) {
+                moment.getSpec().setApprovedTime(Instant.now());
+            }
             client.update(moment);
         });
         return Result.doNotRetry();
diff --git a/src/main/java/run/halo/moments/MomentsPlugin.java b/src/main/java/run/halo/moments/MomentsPlugin.java
index 51b1939..cf5226a 100644
--- a/src/main/java/run/halo/moments/MomentsPlugin.java
+++ b/src/main/java/run/halo/moments/MomentsPlugin.java
@@ -52,6 +52,14 @@ public void start() {
                     return visible == null ? null : visible.toString();
                 }))
             );
+            indexSpecs.add(new IndexSpec()
+                .setName("spec.approved")
+                .setIndexFunc(simpleAttribute(Moment.class, moment -> {
+                    var approved = moment.getSpec().getApproved();
+                    return approved == null ? null : approved.toString();
+                }))
+            );
+
             indexSpecs.add(new IndexSpec()
                 .setName(Moment.REQUIRE_SYNC_ON_STARTUP_INDEX_NAME)
                 .setIndexFunc(simpleAttribute(Moment.class, moment -> {
diff --git a/src/main/java/run/halo/moments/finders/impl/MomentFinderImpl.java b/src/main/java/run/halo/moments/finders/impl/MomentFinderImpl.java
index fccaa29..2c3e8de 100644
--- a/src/main/java/run/halo/moments/finders/impl/MomentFinderImpl.java
+++ b/src/main/java/run/halo/moments/finders/impl/MomentFinderImpl.java
@@ -21,6 +21,7 @@
 import run.halo.app.extension.PageRequest;
 import run.halo.app.extension.PageRequestImpl;
 import run.halo.app.extension.ReactiveExtensionClient;
+import run.halo.app.extension.index.query.Query;
 import run.halo.app.extension.router.selector.FieldSelector;
 import run.halo.app.theme.finders.Finder;
 import run.halo.moments.Moment;
@@ -42,7 +43,13 @@
 public class MomentFinderImpl implements MomentFinder {
 
     public static final Predicate<Moment> FIXED_PREDICATE = moment -> Objects.equals(
-        moment.getSpec().getVisible(), Moment.MomentVisible.PUBLIC);
+        moment.getSpec().getVisible(), Moment.MomentVisible.PUBLIC)
+        && moment.getSpec().getApproved() == Boolean.TRUE;
+
+    public static final Query FIXED_QUERY = and(
+        equal("spec.visible", Moment.MomentVisible.PUBLIC.name()),
+        equal("spec.approved", Boolean.TRUE.toString())
+    );
 
     private final ReactiveExtensionClient client;
 
@@ -50,7 +57,7 @@ public class MomentFinderImpl implements MomentFinder {
     public Flux<MomentVo> listAll() {
         var listOptions = new ListOptions();
         listOptions.setFieldSelector(
-            FieldSelector.of(equal("spec.visible", Moment.MomentVisible.PUBLIC.name())));
+            FieldSelector.of(FIXED_QUERY));
         return client.listAll(Moment.class, listOptions, defaultSort())
             .flatMap(this::getMomentVo);
     }
@@ -68,8 +75,7 @@ static Sort defaultSort() {
     @Override
     public Flux<MomentVo> listBy(String tag) {
         var listOptions = new ListOptions();
-        var query = and(equal("spec.visible", Moment.MomentVisible.PUBLIC.name()),
-            equal("spec.tags", tag));
+        var query = and(FIXED_QUERY, equal("spec.tags", tag));
         listOptions.setFieldSelector(FieldSelector.of(query));
         return client.listAll(Moment.class, listOptions, defaultSort())
             .flatMap(this::getMomentVo);
@@ -85,8 +91,7 @@ public Mono<MomentVo> get(String momentName) {
     @Override
     public Flux<MomentTagVo> listAllTags() {
         var listOptions = new ListOptions();
-        var query = and(all("spec.tags"),
-            equal("spec.visible", Moment.MomentVisible.PUBLIC.name()));
+        var query = and(all("spec.tags"), FIXED_QUERY);
         listOptions.setFieldSelector(FieldSelector.of(query));
         return client.listAll(Moment.class, listOptions, defaultSort())
             .flatMapIterable(moment -> {
@@ -125,8 +130,8 @@ public Mono<ListResult<MomentVo>> listByTag(int pageNum, Integer pageSize, Strin
 
     private Mono<ListResult<MomentVo>> pageMoment(FieldSelector fieldSelector, PageRequest page) {
         var listOptions = new ListOptions();
-        var query = equal("spec.visible", Moment.MomentVisible.PUBLIC.name());
-        if (fieldSelector != null && fieldSelector.query() != null) {
+        var query = FIXED_QUERY;
+        if (fieldSelector != null) {
             query = and(query, fieldSelector.query());
         }
         listOptions.setFieldSelector(FieldSelector.of(query));
diff --git a/src/main/java/run/halo/moments/service/MomentService.java b/src/main/java/run/halo/moments/service/MomentService.java
index da52652..4249ea3 100644
--- a/src/main/java/run/halo/moments/service/MomentService.java
+++ b/src/main/java/run/halo/moments/service/MomentService.java
@@ -18,7 +18,13 @@ public interface MomentService {
 
     Mono<Moment> create(Moment moment);
 
-    Flux<String> listAllTags();
+    Flux<String> listAllTags(MomentQuery query);
 
     Mono<ListedMoment> findMomentByName(String name);
+
+    Mono<Moment> getByUsername(String momentName, String username);
+
+    Mono<Moment> updateBy(Moment moment);
+
+    Mono<Moment> deleteBy(Moment moment);
 }
diff --git a/src/main/java/run/halo/moments/service/RoleService.java b/src/main/java/run/halo/moments/service/RoleService.java
new file mode 100644
index 0000000..a7a4290
--- /dev/null
+++ b/src/main/java/run/halo/moments/service/RoleService.java
@@ -0,0 +1,15 @@
+package run.halo.moments.service;
+
+import java.util.Collection;
+import reactor.core.publisher.Mono;
+
+public interface RoleService {
+    /**
+     * verify whether the source role contains any role in the candidates.
+     *
+     * @param source the role to be verified
+     * @param candidates the roles to be verified
+     * @return <p>true if the source role contains any role in the candidates, otherwise false</p>
+     */
+    Mono<Boolean> joint(Collection<String> source, Collection<String> candidates);
+}
diff --git a/src/main/java/run/halo/moments/service/impl/DefaultRoleService.java b/src/main/java/run/halo/moments/service/impl/DefaultRoleService.java
new file mode 100644
index 0000000..38ebead
--- /dev/null
+++ b/src/main/java/run/halo/moments/service/impl/DefaultRoleService.java
@@ -0,0 +1,103 @@
+package run.halo.moments.service.impl;
+
+import static run.halo.app.extension.Comparators.compareCreationTimestamp;
+
+import com.fasterxml.jackson.core.type.TypeReference;
+import java.util.Collection;
+import java.util.Collections;
+import java.util.HashSet;
+import java.util.List;
+import java.util.Set;
+import java.util.function.Predicate;
+import java.util.stream.Collectors;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.lang.NonNull;
+import org.springframework.stereotype.Component;
+import org.springframework.util.CollectionUtils;
+import reactor.core.publisher.Flux;
+import reactor.core.publisher.Mono;
+import run.halo.app.core.extension.Role;
+import run.halo.app.extension.MetadataUtil;
+import run.halo.app.extension.ReactiveExtensionClient;
+import run.halo.app.infra.utils.JsonUtils;
+import run.halo.moments.service.RoleService;
+import run.halo.moments.util.AuthorityUtils;
+
+@Slf4j
+@Component
+@RequiredArgsConstructor
+public class DefaultRoleService implements RoleService {
+
+    private final ReactiveExtensionClient client;
+
+    @Override
+    public Mono<Boolean> joint(Collection<String> source, Collection<String> candidates) {
+        if (source.contains(AuthorityUtils.SUPER_ROLE_NAME)) {
+            return Mono.just(true);
+        }
+        return listDependencies(new HashSet<>(source))
+            .map(role -> role.getMetadata().getName())
+            .collect(Collectors.toSet())
+            .map(roleNames -> !Collections.disjoint(roleNames, candidates));
+    }
+
+    private Flux<Role> listDependencies(Set<String> names) {
+        var visited = new HashSet<String>();
+        return listRoles(names)
+            .expand(role -> {
+                var name = role.getMetadata().getName();
+                if (visited.contains(name)) {
+                    return Flux.empty();
+                }
+                if (log.isTraceEnabled()) {
+                    log.trace("Expand role: {}", role.getMetadata().getName());
+                }
+                visited.add(name);
+                var annotations = MetadataUtil.nullSafeAnnotations(role);
+                var dependenciesJson = annotations.get(Role.ROLE_DEPENDENCIES_ANNO);
+                var dependencies = stringToList(dependenciesJson);
+
+                return Flux.fromIterable(dependencies)
+                    .filter(dep -> !visited.contains(dep))
+                    .collect(Collectors.<String>toSet())
+                    .flatMapMany(this::listRoles);
+            })
+            .concatWith(Flux.defer(() -> listAggregatedRoles(visited)));
+    }
+
+    private Flux<Role> listAggregatedRoles(Set<String> roleNames) {
+        var aggregatedLabelNames = roleNames.stream()
+            .map(roleName -> Role.ROLE_AGGREGATE_LABEL_PREFIX + roleName)
+            .collect(Collectors.toSet());
+        Predicate<Role> predicate = role -> {
+            var labels = role.getMetadata().getLabels();
+            if (labels == null) {
+                return false;
+            }
+            return aggregatedLabelNames.stream()
+                .anyMatch(aggregatedLabel -> Boolean.parseBoolean(labels.get(aggregatedLabel)));
+        };
+        return client.list(Role.class, predicate, compareCreationTimestamp(true));
+    }
+
+    private Flux<Role> listRoles(Set<String> names) {
+        if (CollectionUtils.isEmpty(names)) {
+            return Flux.empty();
+        }
+
+        Predicate<Role> predicate = role -> names.contains(role.getMetadata().getName());
+        return client.list(Role.class, predicate, compareCreationTimestamp(true));
+    }
+
+    @NonNull
+    private List<String> stringToList(String str) {
+        if (StringUtils.isBlank(str)) {
+            return Collections.emptyList();
+        }
+        return JsonUtils.jsonToObject(str,
+            new TypeReference<>() {
+            });
+    }
+}
diff --git a/src/main/java/run/halo/moments/service/impl/MomentServiceImpl.java b/src/main/java/run/halo/moments/service/impl/MomentServiceImpl.java
index f639334..4423d29 100644
--- a/src/main/java/run/halo/moments/service/impl/MomentServiceImpl.java
+++ b/src/main/java/run/halo/moments/service/impl/MomentServiceImpl.java
@@ -68,8 +68,8 @@ public Mono<Moment> create(Moment moment) {
     }
 
     @Override
-    public Flux<String> listAllTags() {
-        return client.listAll(Moment.class, new ListOptions(),
+    public Flux<String> listAllTags(MomentQuery query) {
+        return client.listAll(Moment.class, query.toListOptions(),
                 Sort.by("metadata.name").descending())
             .flatMapIterable(moment -> {
                 var tags = moment.getSpec().getTags();
@@ -85,6 +85,23 @@ public Mono<ListedMoment> findMomentByName(String name) {
             .flatMap(this::toListedMoment);
     }
 
+    @Override
+    public Mono<Moment> getByUsername(String momentName, String username) {
+        return client.get(Moment.class, momentName)
+            .filter(post -> post.getSpec() != null)
+            .filter(post -> Objects.equals(username, post.getSpec().getOwner()));
+    }
+
+    @Override
+    public Mono<Moment> deleteBy(Moment moment) {
+        return client.delete(moment);
+    }
+
+    @Override
+    public Mono<Moment> updateBy(Moment moment) {
+        return client.update(moment);
+    }
+
     private Mono<ListedMoment> toListedMoment(Moment moment) {
         ListedMoment.ListedMomentBuilder momentBuilder = ListedMoment.builder()
             .moment(moment);
diff --git a/src/main/java/run/halo/moments/uc/UcMomentEndpoint.java b/src/main/java/run/halo/moments/uc/UcMomentEndpoint.java
new file mode 100644
index 0000000..3415f09
--- /dev/null
+++ b/src/main/java/run/halo/moments/uc/UcMomentEndpoint.java
@@ -0,0 +1,216 @@
+package run.halo.moments.uc;
+
+import static org.springdoc.core.fn.builders.apiresponse.Builder.responseBuilder;
+import static org.springdoc.core.fn.builders.content.Builder.contentBuilder;
+import static org.springdoc.core.fn.builders.parameter.Builder.parameterBuilder;
+import static org.springdoc.core.fn.builders.requestbody.Builder.requestBodyBuilder;
+
+import io.swagger.v3.oas.annotations.enums.ParameterIn;
+import java.time.Instant;
+import java.util.Set;
+import lombok.AllArgsConstructor;
+import org.apache.commons.lang3.StringUtils;
+import org.springdoc.core.fn.builders.schema.Builder;
+import org.springdoc.webflux.core.fn.SpringdocRouteBuilder;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.ReactiveSecurityContextHolder;
+import org.springframework.security.core.context.SecurityContext;
+import org.springframework.stereotype.Component;
+import org.springframework.web.reactive.function.server.RouterFunction;
+import org.springframework.web.reactive.function.server.ServerRequest;
+import org.springframework.web.reactive.function.server.ServerResponse;
+import org.springframework.web.server.ResponseStatusException;
+import reactor.core.publisher.Mono;
+import run.halo.app.core.extension.endpoint.CustomEndpoint;
+import run.halo.app.extension.GroupVersion;
+import run.halo.app.extension.ListResult;
+import run.halo.app.extension.router.QueryParamBuildUtil;
+import run.halo.moments.ListedMoment;
+import run.halo.moments.Moment;
+import run.halo.moments.MomentQuery;
+import run.halo.moments.service.MomentService;
+import run.halo.moments.service.RoleService;
+import run.halo.moments.util.AuthorityUtils;
+
+/**
+ * A custom endpoint for {@link run.halo.moments.Moment}.
+ *
+ * @author LIlGG
+ * @since 1.0.0
+ */
+@Component
+@AllArgsConstructor
+public class UcMomentEndpoint implements CustomEndpoint {
+
+    private final MomentService momentService;
+
+    private final RoleService roleService;
+
+    @Override
+    public RouterFunction<ServerResponse> endpoint() {
+        final var tag = groupVersion() + "/moment";
+        return SpringdocRouteBuilder.route()
+            .GET("moments", this::listMyMoment, builder -> {
+                builder.operationId("ListMyMoments")
+                    .description("List My moments.")
+                    .tag(tag)
+                    .response(responseBuilder()
+                        .implementation(ListResult.generateGenericClass(ListedMoment.class))
+                    );
+                QueryParamBuildUtil.buildParametersFromType(builder, MomentQuery.class);
+            })
+            .GET("moments/{name}", this::getMyMoment,
+                builder -> builder.operationId("GetMyMoment")
+                    .description("Get a My Moment.")
+                    .tag(tag)
+                    .response(responseBuilder()
+                        .implementation(Moment.class))
+            )
+            .POST("moments", this::createMyMoment,
+                builder -> builder.operationId("CreateMyMoment")
+                    .description("Create a My Moment.")
+                    .tag(tag)
+                    .requestBody(requestBodyBuilder()
+                        .required(true)
+                        .content(contentBuilder()
+                            .mediaType(MediaType.APPLICATION_JSON_VALUE)
+                            .schema(Builder.schemaBuilder()
+                                .implementation(Moment.class))
+                        ))
+                    .response(responseBuilder()
+                        .implementation(Moment.class))
+            )
+            .PUT("moments/{name}", this::updateMyMoment,
+                builder -> builder.operationId("UpdateMyMoment")
+                    .description("Update a My Moment.")
+                    .tag(tag)
+                    .requestBody(requestBodyBuilder()
+                        .required(true)
+                        .content(contentBuilder()
+                            .mediaType(MediaType.APPLICATION_JSON_VALUE)
+                            .schema(Builder.schemaBuilder()
+                                .implementation(Moment.class))
+                        ))
+                    .response(responseBuilder()
+                        .implementation(Moment.class))
+            )
+            .DELETE("moments/{name}", this::deleteMyMoment,
+                builder -> builder.operationId("DeleteMyMoment")
+                    .description("Delete a My Moment.")
+                    .tag(tag)
+                    .response(responseBuilder()
+                        .implementation(Moment.class))
+            )
+            .GET("tags", this::listMyTags,
+                builder -> builder.operationId("ListTags")
+                    .description("List all moment tags.")
+                    .tag(tag)
+                    .parameter(parameterBuilder()
+                        .name("name")
+                        .in(ParameterIn.QUERY)
+                        .description("Tag name to query")
+                        .required(false)
+                        .implementation(String.class)
+                    )
+                    .response(responseBuilder()
+                        .implementationArray(String.class)
+                    ))
+            .build();
+    }
+
+    private Mono<ServerResponse> deleteMyMoment(ServerRequest request) {
+        var name = request.pathVariable("name");
+        return getMyMoment(name)
+            .flatMap(momentService::deleteBy)
+            .flatMap(moment -> ServerResponse.ok().bodyValue(moment));
+    }
+
+    private Mono<ServerResponse> updateMyMoment(ServerRequest request) {
+        var name = request.pathVariable("name");
+        return getMyMoment(name)
+            .flatMap(oldMoment -> {
+                Moment.MomentSpec oldSpec = oldMoment.getSpec();
+
+                return request.bodyToMono(Moment.class)
+                    .doOnNext(newMoment -> {
+                        Moment.MomentSpec newSpec = newMoment.getSpec();
+                        newSpec.setOwner(oldSpec.getOwner());
+                        newSpec.setReleaseTime(oldSpec.getReleaseTime());
+                        // Every update needs to be re-reviewed.
+                        newSpec.setApproved(false);
+                    })
+                    .flatMap(momentService::updateBy);
+            })
+            .flatMap(moment -> ServerResponse.ok().bodyValue(moment));
+    }
+
+    private Mono<ServerResponse> getMyMoment(ServerRequest request) {
+        var name = request.pathVariable("name");
+        return getMyMoment(name)
+            .flatMap(moment -> ServerResponse.ok().bodyValue(moment));
+    }
+
+    private Mono<Moment> getMyMoment(String momentName) {
+        return getCurrentUser()
+            .flatMap(user -> momentService.getByUsername(momentName, user.getName())
+                .switchIfEmpty(
+                    Mono.error(() -> new ResponseStatusException(HttpStatus.NOT_FOUND,
+                        "The moment was not found or deleted"))
+                )
+            );
+    }
+
+    private Mono<ServerResponse> createMyMoment(ServerRequest request) {
+        return getCurrentUser()
+            .flatMap(user -> request.bodyToMono(Moment.class)
+                .flatMap(post -> {
+                    post.getSpec().setApproved(false);
+                    post.getSpec().setOwner(user.getName());
+                    var roles = AuthorityUtils.authoritiesToRoles(user.getAuthorities());
+                    return roleService.joint(roles,
+                            Set.of(AuthorityUtils.MOMENT_PUBLISH_APPROVAL_ROLE_NAME,
+                                AuthorityUtils.SUPER_ROLE_NAME))
+                        .doOnNext(result -> {
+                            if (result) {
+                                // If it is a user with audit authority, there is no need to review.
+                                post.getSpec().setApproved(true);
+                                post.getSpec().setApprovedTime(Instant.now());
+                            }
+                        })
+                        .thenReturn(post);
+                })
+            )
+            .flatMap(momentService::create)
+            .flatMap(moment -> ServerResponse.ok().bodyValue(moment));
+    }
+
+    private Mono<ServerResponse> listMyMoment(ServerRequest request) {
+        return getCurrentUser()
+            .map(user -> new MomentQuery(request.exchange(), user.getName()))
+            .flatMap(momentService::listMoment)
+            .flatMap(listedMoments -> ServerResponse.ok().bodyValue(listedMoments));
+    }
+
+    private Mono<Authentication> getCurrentUser() {
+        return ReactiveSecurityContextHolder.getContext()
+            .map(SecurityContext::getAuthentication);
+    }
+
+    private Mono<ServerResponse> listMyTags(ServerRequest request) {
+        String name = request.queryParam("name").orElse(null);
+        return getCurrentUser()
+            .map(user -> new MomentQuery(request.exchange(), user.getName()))
+            .flatMapMany(momentService::listAllTags)
+            .filter(tagName -> StringUtils.isBlank(name) || StringUtils.containsIgnoreCase(tagName,
+                name))
+            .collectList()
+            .flatMap(result -> ServerResponse.ok().bodyValue(result));
+    }
+
+    @Override
+    public GroupVersion groupVersion() {
+        return GroupVersion.parseAPIVersion("uc.api.moment.halo.run/v1alpha1");
+    }
+}
diff --git a/src/main/java/run/halo/moments/util/AuthorityUtils.java b/src/main/java/run/halo/moments/util/AuthorityUtils.java
new file mode 100644
index 0000000..fe2d351
--- /dev/null
+++ b/src/main/java/run/halo/moments/util/AuthorityUtils.java
@@ -0,0 +1,42 @@
+package run.halo.moments.util;
+
+import java.util.Collection;
+import java.util.Set;
+import java.util.stream.Collectors;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.security.core.GrantedAuthority;
+
+/**
+ * Utility methods for manipulating GrantedAuthority collection.
+ *
+ * @author johnniang
+ */
+public enum AuthorityUtils {
+    ;
+    public static final String ROLE_PREFIX = "ROLE_";
+    public static final String SUPER_ROLE_NAME = "super-role";
+
+    public static final String MOMENT_PUBLISH_APPROVAL_ROLE_NAME =
+        "role-template-uc-moments-approved";
+
+    public static final String MOMENT_MANAGEMENT_ROLE_NAME = "role-template-moments-manage";
+
+    /**
+     * Converts an array of GrantedAuthority objects to a role set.
+     *
+     * @return a Set of the Strings obtained from each call to
+     * GrantedAuthority.getAuthority() and filtered by prefix "ROLE_".
+     */
+    public static Set<String> authoritiesToRoles(
+        Collection<? extends GrantedAuthority> authorities) {
+        return authorities.stream()
+            .map(GrantedAuthority::getAuthority)
+            .filter(authority -> StringUtils.startsWith(authority, ROLE_PREFIX))
+            .map(authority -> StringUtils.removeStart(authority, ROLE_PREFIX))
+            .collect(Collectors.toSet());
+    }
+
+    public static boolean containsSuperRole(Collection<String> roles) {
+        return roles.contains(SUPER_ROLE_NAME);
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/extensions/roleTemplate.yaml b/src/main/resources/extensions/roleTemplate.yaml
index 43f96da..056a081 100644
--- a/src/main/resources/extensions/roleTemplate.yaml
+++ b/src/main/resources/extensions/roleTemplate.yaml
@@ -5,17 +5,17 @@ metadata:
   labels:
     halo.run/role-template: "true"
   annotations:
-    rbac.authorization.halo.run/module: "Moments Management"
+    rbac.authorization.halo.run/module: "Moments"
     rbac.authorization.halo.run/display-name: "瞬间查看"
     rbac.authorization.halo.run/ui-permissions: |
       ["plugin:moments:view"]
 rules:
-  - apiGroups: [ "moment.halo.run"]
-    resources: [ "moments" ]
-    verbs: [ "get", "list" ]
-  - apiGroups: [ "console.api.moment.halo.run"]
-    resources: [ "moments", "tags" ]
-    verbs: [ "get", "list" ]
+  - apiGroups: ["moment.halo.run"]
+    resources: ["moments"]
+    verbs: ["get", "list"]
+  - apiGroups: ["console.api.moment.halo.run"]
+    resources: ["moments", "tags"]
+    verbs: ["get", "list"]
 ---
 apiVersion: v1alpha1
 kind: Role
@@ -24,16 +24,62 @@ metadata:
   labels:
     halo.run/role-template: "true"
   annotations:
-    rbac.authorization.halo.run/module: "Moments Management"
+    rbac.authorization.halo.run/module: "Moments"
     rbac.authorization.halo.run/display-name: "瞬间管理"
     rbac.authorization.halo.run/ui-permissions: |
       ["plugin:moments:manage"]
     rbac.authorization.halo.run/dependencies: |
       ["role-template-moments-view"]
 rules:
-  - apiGroups: [ "moment.halo.run"]
-    resources: [ "moments" ]
-    verbs: [ "create", "patch", "update", "delete", "deletecollection" ]
-  - apiGroups: [ "console.api.moment.halo.run"]
-    resources: [ "moments", "tags" ]
-    verbs: [ "create", "patch", "update", "delete", "deletecollection" ]
+  - apiGroups: ["moment.halo.run"]
+    resources: ["moments"]
+    verbs: ["create", "patch", "update", "delete", "deletecollection"]
+  - apiGroups: ["console.api.moment.halo.run"]
+    resources: ["moments", "tags"]
+    verbs: ["create", "patch", "update", "delete", "deletecollection"]
+---
+apiVersion: v1alpha1
+kind: Role
+metadata:
+  name: role-template-uc-moments-publish
+  labels:
+    halo.run/role-template: "true"
+  annotations:
+    rbac.authorization.halo.run/module: "Moments"
+    rbac.authorization.halo.run/display-name: "允许发布自己的瞬间"
+    rbac.authorization.halo.run/ui-permissions: |
+      ["uc:plugin:moments:publish"]
+rules:
+  - apiGroups: ["uc.api.moment.halo.run"]
+    resources: ["moments", "tags"]
+    verbs: ["get", "list", "create", "update"]
+---
+apiVersion: v1alpha1
+kind: Role
+metadata:
+  name: role-template-uc-moments-approved
+  labels:
+    halo.run/role-template: "true"
+  annotations:
+    rbac.authorization.halo.run/module: "Moments"
+    rbac.authorization.halo.run/display-name: "发布瞬间无需审核"
+    rbac.authorization.halo.run/dependencies: |
+      ["role-template-uc-moments-publish"]
+rules:
+  - nonResourceURLs: ["*"]
+---
+apiVersion: v1alpha1
+kind: Role
+metadata:
+  name: role-template-uc-moments-delete
+  labels:
+    halo.run/role-template: "true"
+  annotations:
+    rbac.authorization.halo.run/module: "Moments"
+    rbac.authorization.halo.run/display-name: "允许删除自己的瞬间"
+    rbac.authorization.halo.run/ui-permissions: |
+      ["uc:plugin:moments:delete"]
+rules:
+  - apiGroups: ["uc.api.moment.halo.run"]
+    resources: ["moments", "tags"]
+    verbs: ["delete", "deletecollection"]