refactor(menu): show delete/approve options conditionally

open-isle-cli/src/components/CommentItem.vue

@@ -58,14 +58,14 @@
 </template>
 
 <script>
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import CommentEditor from './CommentEditor.vue'
 import { renderMarkdown } from '../utils/markdown'
 import TimeManager from '../utils/time'
 import BaseTimeline from './BaseTimeline.vue'
 import { API_BASE_URL, toast } from '../main'
-import { getToken } from '../utils/auth'
+import { getToken, authState } from '../utils/auth'
 import ReactionsGroup from './ReactionsGroup.vue'
 import DropdownMenu from './DropdownMenu.vue'
 const CommentItem = {
@@ -101,9 +101,10 @@ const CommentItem = {
     const toggleEditor = () => {
       showEditor.value = !showEditor.value
     }
-    const commentMenuItems = ref([
+    const isAuthor = computed(() => authState.username === props.comment.userName)
-      { text: '删除评论', color: 'red', onClick: () => deleteComment() }
+    const commentMenuItems = computed(() =>
-    ])
+      isAuthor.value ? [{ text: '删除评论', color: 'red', onClick: () => deleteComment() }] : []
+    )
     const deleteComment = () => {
     }
     const submitReply = async (text) => {

open-isle-cli/src/views/PostPageView.vue

@@ -138,11 +138,17 @@ export default {
     const loggedIn = computed(() => authState.loggedIn)
     const isAdmin = computed(() => authState.role === 'ADMIN')
     const isAuthor = computed(() => authState.username === author.value.username)
-    const articleMenuItems = [
+    const articleMenuItems = computed(() => {
-      { text: '删除文章', color: 'red', onClick: () => deletePost() },
+      const items = []
-      { text: '通过审核', onClick: () => approvePost() },
+      if (isAuthor.value) {
-      { text: '驳回', color: 'red', onClick: () => rejectPost() }
+        items.push({ text: '删除文章', color: 'red', onClick: () => deletePost() })
-    ]
+      }
+      if (isAdmin.value && status.value === 'PENDING') {
+        items.push({ text: '通过审核', onClick: () => approvePost() })
+        items.push({ text: '驳回', color: 'red', onClick: () => rejectPost() })
+      }
+      return items
+    })
 
     const gatherPostItems = () => {
       const items = []