feat: add default size options

build.gradle

@@ -41,5 +41,5 @@ build {
 }
 
 halo {
-    version = "2.13.0"
+    version = "2.14.0"
 }

packages/comment-widget/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@emoji-mart/data": "^1.1.2",
-    "@halo-dev/api-client": "^2.13.0",
+    "@halo-dev/api-client": "^2.14.0",
     "@lit/context": "^1.1.0",
     "dayjs": "^1.11.10",
     "emoji-mart": "^5.5.2",

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

@@ -1,5 +1,5 @@
 import { CommentVo, ReplyVo, ReplyVoList } from '@halo-dev/api-client';
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { consume } from '@lit/context';
@@ -50,15 +50,15 @@ export class CommentReplies extends LitElement {
   toastManager: ToastManager | undefined;
 
   override render() {
-    return html`<div class="replies__wrapper">
+    return html` <div class="replies__wrapper">
       ${this.replies.length
         ? html`
             <div class="replies__list">
               ${repeat(
                 this.replies,
                 (item) => item.metadata.name,
                 (item) =>
-                  html`<reply-item
+                  html` <reply-item
                     .comment=${this.comment}
                     .reply="${item}"
                     .replies=${this.replies}
@@ -70,9 +70,9 @@ export class CommentReplies extends LitElement {
             </div>
           `
         : ''}
-      ${this.loading ? html`<loading-block></loading-block>` : ''}
+      ${this.loading ? html` <loading-block></loading-block>` : ''}
       ${this.hasNext && !this.loading
-        ? html`<div class="replies__next-wrapper">
+        ? html` <div class="replies__next-wrapper">
             <button @click=${this.fetchNext}>加载更多</button>
           </div>`
         : ''}
@@ -123,7 +123,7 @@ export class CommentReplies extends LitElement {
 
   async fetchNext() {
     this.page++;
-    this.fetchReplies({ append: true });
+    await this.fetchReplies({ append: true });
   }
 
   override connectedCallback(): void {

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

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { CommentVoList, User } from '@halo-dev/api-client';
 import { repeat } from 'lit/directives/repeat.js';
@@ -44,13 +44,19 @@ export class CommentWidget extends LitElement {
   @property({ type: String })
   name = '';
 
+  @property({ type: Number, attribute: 'size' })
+  size: number = 20;
+
+  @provide({ context: replySizeContext })
+  @property({ type: Number, attribute: 'reply-size' })
+  replySize: number = 10;
+
   @provide({ context: withRepliesContext })
   @property({ type: Boolean, attribute: 'with-replies' })
   withReplies = false;
 
-  @provide({ context: replySizeContext })
-  @property({ type: Number, attribute: 'reply-size' })
-  replySize = 10;
+  @property({ type: Number, attribute: 'with-reply-size' })
+  withReplySize = 10;
 
   @provide({ context: emojiDataUrlContext })
   @property({ type: String, attribute: 'emoji-data-url' })
@@ -93,12 +99,12 @@ export class CommentWidget extends LitElement {
   }
 
   override render() {
-    return html`<div class="comment-widget">
+    return html` <div class="comment-widget">
       <comment-form
         @reload="${() => this.fetchComments({ page: 1, scrollIntoView: true })}"
       ></comment-form>
       ${this.loading
-        ? html`<loading-block></loading-block>`
+        ? html` <loading-block></loading-block>`
         : html`
             <div class="comment-widget__wrapper">
               <div class="comment-widget__stats">
@@ -109,7 +115,7 @@ export class CommentWidget extends LitElement {
                 ${repeat(
                   this.comments.items,
                   (item) => item.metadata.name,
-                  (item) => html`<comment-item .comment=${item}></comment-item>`
+                  (item) => html` <comment-item .comment=${item}></comment-item>`
                 )}
               </div>
             </div>
@@ -163,10 +169,10 @@ export class CommentWidget extends LitElement {
         `kind=${this.kind}`,
         `name=${this.name}`,
         `page=${this.comments.page}`,
-        `size=${this.comments.size}`,
+        `size=${this.size}`,
         `version=${this.version}`,
         `withReplies=${this.withReplies}`,
-        `replySize=${this.replySize}`,
+        `replySize=${this.withReplySize}`,
       ];
 
       const response = await fetch(
@@ -177,8 +183,7 @@ export class CommentWidget extends LitElement {
         throw new Error('评论列表加载失败，请稍后重试');
       }
 
-      const data = await response.json();
-      this.comments = data;
+      this.comments = await response.json();
     } catch (error) {
       if (error instanceof Error) {
         this.toastManager?.error(error.message);

packages/comment-widget/src/context/index.ts

@@ -7,8 +7,8 @@ export const kindContext = createContext<string>(Symbol('kind'));
 export const groupContext = createContext<string>(Symbol('group'));
 export const nameContext = createContext<string>(Symbol('name'));
 export const versionContext = createContext<string>(Symbol('version'));
-export const withRepliesContext = createContext<boolean>(Symbol('withReplies'));
 export const replySizeContext = createContext<number>(Symbol('replySize'));
+export const withRepliesContext = createContext<boolean>(Symbol('withReplies'));
 
 export const allowAnonymousCommentsContext = createContext<boolean>(
   Symbol('allowAnonymousComments')

packages/widget/src/index.ts

@@ -7,8 +7,10 @@ interface Props {
   group: string;
   kind: string;
   name: string;
-  withReplies?: boolean;
+  size?: number;
   replySize?: number;
+  withReplies?: boolean;
+  withReplySize?: number;
 }
 
 export function init(el: string, props: Props) {
@@ -26,8 +28,10 @@ export function init(el: string, props: Props) {
   commentWidget.group = props.group;
   commentWidget.version = 'v1alpha1';
   commentWidget.name = props.name;
-  commentWidget.withReplies = props.withReplies || false;
+  commentWidget.size = props.size || 20;
   commentWidget.replySize = props.replySize || 10;
+  commentWidget.withReplies = props.withReplies || false;
+  commentWidget.withReplySize = props.withReplySize || 10;
   commentWidget.emojiDataUrl =
     '/plugins/PluginCommentWidget/assets/static/emoji/native.json';
 

src/main/java/run/halo/comment/widget/DefaultCommentWidget.java

@@ -67,8 +67,10 @@ private String commentHtml(IAttribute groupAttribute, IAttribute kindAttribute,
         var basicConfig = settingFetcher.fetch(BasicConfig.GROUP, BasicConfig.class)
                 .orElse(new BasicConfig());
         // placeholderHelper only support string, so we need to convert boolean to string
-        properties.setProperty("withReplies", String.valueOf(basicConfig.isWithReplies()));
+        properties.setProperty("size", String.valueOf(basicConfig.getSize()));
         properties.setProperty("replySize", String.valueOf(basicConfig.getReplySize()));
+        properties.setProperty("withReplies", String.valueOf(basicConfig.isWithReplies()));
+        properties.setProperty("withReplySize", String.valueOf(basicConfig.getWithReplySize()));
 
         return PROPERTY_PLACEHOLDER_HELPER.replacePlaceholders("""
                 <div id="${domId}"></div>
@@ -79,8 +81,10 @@ private String commentHtml(IAttribute groupAttribute, IAttribute kindAttribute,
                       group: "${group}",
                       kind: "${kind}",
                       name: "${name}",
+                      size: ${size},
+                      replySize: ${replySize},
                       withReplies: ${withReplies},
-                      replySize: ${replySize}
+                      withReplySize: ${withReplySize}
                     }
                   );
                 </script>
@@ -90,8 +94,10 @@ private String commentHtml(IAttribute groupAttribute, IAttribute kindAttribute,
     @Data
     static class BasicConfig {
         public static final String GROUP = "basic";
-        private boolean withReplies;
+        private int size;
         private int replySize;
+        private boolean withReplies;
+        private int withReplySize;
     }
 
     private String domIdFrom(String group, String kind, String name) {

src/main/resources/extensions/settings.yaml

@@ -7,16 +7,27 @@ spec:
     - group: basic
       label: 基本设置
       formSchema:
+        - $formkit: number
+          label: 默认加载评论条数
+          name: size
+          validation: required
+          value: 20
+        - $formkit: number
+          label: 默认加载回复条数
+          name: replySize
+          validation: required
+          value: 10
         - $formkit: checkbox
           label: 同时加载评论的回复
           name: withReplies
           id: withReplies
           key: withReplies
           value: false
         - $formkit: number
-          label: 默认加载回复条数
-          name: replySize
-          id: replySize
-          key: replySize
+          label: 同时加载回复的条数
+          if: "$get(withReplies).value === true"
+          name: withReplySize
+          id: withReplySize
+          key: withReplySize
           validation: required
-          value: 20
+          value: 5