feat: add approved status in comment and reply list (#51)

支持显示审核中的状态。

Fix #50 

<img width="574" alt="image" src="https://github.com/halo-sigs/plugin-comment-widget/assets/21301288/3b7c87b0-dae7-4c73-8ebb-154ad788f5f3">

```release-note
支持显示审核中的状态。
```

Author: ruibaby

packages/comment-widget/src/components/CommentItem.vue

@@ -156,6 +156,12 @@ const handleUpvote = async () => {
             >
               {{ timeAgo(comment?.spec.creationTime) }}
             </span>
+            <span
+              v-if="!comment?.spec.approved"
+              class="text-xs text-gray-500 dark:text-slate-400"
+            >
+              审核中
+            </span>
             <VTag
               v-if="isAuthor"
               rounded
@@ -166,9 +172,10 @@ const handleUpvote = async () => {
           </div>
         </div>
         <div class="comment-content mt-2">
-          <pre class="text-sm text-gray-800 dark:text-slate-200">{{
-            comment?.spec.content
-          }}</pre>
+          <pre
+            class="whitespace-pre-wrap break-words text-sm text-gray-800 dark:text-slate-200"
+            >{{ comment?.spec.content }}</pre
+          >
         </div>
         <div class="comment-actions mt-2 flex flex-auto items-center gap-1.5">
           <div

packages/comment-widget/src/components/ReplyItem.vue

@@ -119,6 +119,12 @@ const handleUpvote = async () => {
             >
               {{ timeAgo(reply.spec.creationTime) }}
             </span>
+            <span
+              v-if="!reply?.spec.approved"
+              class="text-xs text-gray-500 dark:text-slate-400"
+            >
+              审核中
+            </span>
             <VTag
               v-if="false"
               rounded
@@ -129,7 +135,9 @@ const handleUpvote = async () => {
           </div>
         </div>
         <div class="reply-content mt-2">
-          <pre class="text-sm text-gray-800 dark:text-slate-200"><a
+          <pre
+            class="whitespace-pre-wrap break-words text-sm text-gray-800 dark:text-slate-200"
+          ><a
               v-if="quoteReply"
               class="mr-1 inline-flex flex-row items-center gap-1 rounded bg-gray-200 py-0.5 px-1 text-xs font-medium text-gray-600 hover:text-blue-500 hover:underline dark:bg-slate-700 dark:text-slate-200 dark:hover:text-slate-100"
               :href="`#reply-${quoteReply.metadata.name}`"