Merge remote-tracking branch 'upstream/main'

build.gradle

@@ -41,5 +41,5 @@ build {
 }
 
 halo {
-    version = "2.14.0"
+    version = "2.15.0-rc.1"
 }

packages/comment-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@halo-dev/comment-widget",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": {
     "name": "Halo",
     "url": "https://github.com/halo-dev"

packages/comment-widget/src/base-form.ts

@@ -1,6 +1,6 @@
 import './emoji-button';
-import { LitElement, css, html } from 'lit';
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement } from 'lit';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import {
   allowAnonymousCommentsContext,
   baseUrlContext,
@@ -9,11 +9,12 @@ import {
   kindContext,
   nameContext,
 } from './context';
-import { state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import type { User } from '@halo-dev/api-client';
 import baseStyles from './styles/base';
 import { consume } from '@lit/context';
 import varStyles from './styles/var';
+import './icons/icon-loading';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -40,6 +41,9 @@ export class BaseForm extends LitElement {
   @state()
   name = '';
 
+  @property({ type: Boolean })
+  submitting = false;
+
   textareaRef: Ref<HTMLTextAreaElement> = createRef<HTMLTextAreaElement>();
 
   get customAccount() {
@@ -179,13 +183,20 @@ export class BaseForm extends LitElement {
             : ''}
           <div class="form__actions">
             <emoji-button @emoji-select=${this.onEmojiSelect}></emoji-button>
-            <button type="submit" class="form__button--submit">
-              <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" class="h-full w-full">
-                <path
-                  fill="currentColor"
-                  d="M8 7.71L18 12L8 16.29v-3.34l7.14-.95L8 11.05V7.71M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z"
-                ></path>
-              </svg>
+            <button .disabled=${this.submitting} type="submit" class="form__button--submit">
+              ${this.submitting
+                ? html` <icon-loading></icon-loading>`
+                : html` <svg
+                    viewBox="0 0 24 24"
+                    width="1.25em"
+                    height="1.25em"
+                    class="h-full w-full"
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M8 7.71L18 12L8 16.29v-3.34l7.14-.95L8 11.05V7.71M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z"
+                    ></path>
+                  </svg>`}
               提交评论
             </button>
           </div>

packages/comment-widget/src/comment-form.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { state } from 'lit/decorators.js';
 import { consume } from '@lit/context';
 import {
@@ -11,8 +11,8 @@ import {
   toastContext,
   versionContext,
 } from './context';
-import { CommentRequest, User, Comment } from '@halo-dev/api-client';
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
+import { Comment, CommentRequest, User } from '@halo-dev/api-client';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { BaseForm } from './base-form';
 import './base-form';
 import { ToastManager } from './lit-toast';
@@ -50,15 +50,24 @@ export class CommentForm extends LitElement {
   @state()
   toastManager: ToastManager | undefined;
 
+  @state()
+  submitting = false;
+
   baseFormRef: Ref<BaseForm> = createRef<BaseForm>();
 
   override render() {
-    return html`<base-form ${ref(this.baseFormRef)} @submit="${this.onSubmit}"></base-form>`;
+    return html` <base-form
+      .submitting=${this.submitting}
+      ${ref(this.baseFormRef)}
+      @submit="${this.onSubmit}"
+    ></base-form>`;
   }
 
   async onSubmit(e: CustomEvent) {
     e.preventDefault();
 
+    this.submitting = true;
+
     const data = e.detail;
 
     const { displayName, email, website, content } = data || {};
@@ -78,12 +87,14 @@ export class CommentForm extends LitElement {
 
     if (!this.currentUser && !this.allowAnonymousComments) {
       this.toastManager?.warn('请先登录');
+      this.submitting = false;
       return;
     }
 
     if (!this.currentUser && this.allowAnonymousComments) {
       if (!displayName || !email) {
         this.toastManager?.warn('请先登录或者完善信息');
+        this.submitting = false;
         return;
       } else {
         commentRequest.owner = {
@@ -121,6 +132,8 @@ export class CommentForm extends LitElement {
       if (error instanceof Error) {
         this.toastManager?.error(error.message);
       }
+    } finally {
+      this.submitting = false;
     }
   }
 }

packages/comment-widget/src/comment-replies.ts

@@ -92,7 +92,7 @@ export class CommentReplies extends LitElement {
         this.page = 1;
       }
 
-      const queryParams = [`page=${this.page || 0}`, `size=${this.replySize}`];
+      const queryParams = [`page=${this.page || 1}`, `size=${this.replySize}`];
 
       const response = await fetch(
         `${this.baseUrl}/apis/api.halo.run/v1alpha1/comments/${this.comment?.metadata.name}/reply?${queryParams.join('&')}`
@@ -122,8 +122,14 @@ export class CommentReplies extends LitElement {
   }
 
   async fetchNext() {
-    this.page++;
-    await this.fetchReplies({ append: true });
+    if (this.withReplies) {
+      // if withReplies is true, we need to reload the replies list
+      await this.fetchReplies({ append: !(this.page === 1) });
+      this.page++;
+    } else {
+      this.page++;
+      await this.fetchReplies({ append: true });
+    }
   }
 
   override connectedCallback(): void {

packages/comment-widget/src/reply-form.ts

@@ -1,7 +1,7 @@
 import './base-form';
 import { CommentVo, Reply, ReplyRequest, ReplyVo, User } from '@halo-dev/api-client';
-import { LitElement, html } from 'lit';
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
+import { html, LitElement } from 'lit';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import {
   allowAnonymousCommentsContext,
   baseUrlContext,
@@ -36,6 +36,9 @@ export class ReplyForm extends LitElement {
   @state()
   toastManager: ToastManager | undefined;
 
+  @state()
+  submitting = false;
+
   baseFormRef: Ref<BaseForm> = createRef<BaseForm>();
 
   override connectedCallback(): void {
@@ -48,11 +51,18 @@ export class ReplyForm extends LitElement {
   }
 
   override render() {
-    return html`<base-form ${ref(this.baseFormRef)} @submit="${this.onSubmit}"></base-form>`;
+    return html` <base-form
+      .submitting=${this.submitting}
+      ${ref(this.baseFormRef)}
+      @submit="${this.onSubmit}"
+    ></base-form>`;
   }
 
   async onSubmit(e: CustomEvent) {
     e.preventDefault();
+
+    this.submitting = true;
+
     const data = e.detail;
 
     const { displayName, email, website, content } = data || {};
@@ -70,12 +80,14 @@ export class ReplyForm extends LitElement {
 
     if (!this.currentUser && !this.allowAnonymousComments) {
       this.toastManager?.warn('请先登录');
+      this.submitting = false;
       return;
     }
 
     if (!this.currentUser && this.allowAnonymousComments) {
       if (!displayName || !email) {
         this.toastManager?.warn('请先登录或者完善信息');
+        this.submitting = false;
         return;
       } else {
         replyRequest.owner = {
@@ -116,6 +128,8 @@ export class ReplyForm extends LitElement {
       if (error instanceof Error) {
         this.toastManager?.error(error.message);
       }
+    } finally {
+      this.submitting = false;
     }
   }
 }

src/main/resources/extensions/settings.yaml

@@ -8,12 +8,12 @@ spec:
       label: 基本设置
       formSchema:
         - $formkit: number
-          label: 默认加载评论条数
+          label: 评论分页条数
           name: size
           validation: required
           value: 20
         - $formkit: number
-          label: 默认加载回复条数
+          label: 回复分页条数
           name: replySize
           validation: required
           value: 10