@waline/client 2.11.2 → 2.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.11.2",
+  "version": "2.11.3",
   "description": "client for waline comment system",
   "keywords": [
     "valine",

package/src/compact/convert.ts

@@ -1,11 +1,11 @@
 import { warning } from './logger';
 import { resolveOldEmojiMap } from './valine';
-
-import type { DeprecatedValineOptions } from './valine';
 import {
   DROPPED_OPTIONS_WHICH_CAN_NOT_BE_POLYFILLED,
   DROPPED_OPTIONS_WHICH_CAN_STILL_BE_POLYFILLED,
 } from './dropped';
+
+import type { DeprecatedValineOptions } from './valine';
 import type { DeprecatedWalineOptions } from './v1';
 import type { WalineInitOptions } from '../typings';
 

package/src/components/ArticleReaction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="reaction && reaction.length" class="wl-reaction">
+  <div v-if="reaction.length" class="wl-reaction">
     <h4 v-text="locale.reactionTitle" />
     <ul>
       <li
@@ -29,7 +29,7 @@ import {
   ref,
 } from 'vue';
 import { fetchArticleCounter, updateArticleCounter } from '../api';
-import { useVoteStorage } from '../composables';
+import { VOTE_IDENTIFIER, VOTE_INDEX, useVoteStorage } from '../composables';
 import type { WalineConfig } from '../utils';
 import type { WalineLocale } from '../typings';
 
@@ -49,42 +49,48 @@ export default defineComponent({
     const reaction = computed((): ReactionItem[] => {
       const { reaction, path } = config.value;
 
-      return (Array.isArray(reaction) ? reaction : []).map((icon, index) => ({
+      return reaction.map((icon, index) => ({
         icon,
         vote: votes.value[index] || 0,
         desc: locale.value[`reaction${index}` as keyof WalineLocale],
         active: Boolean(
-          voteStorage.value.find(({ u, i }) => u === path && i === index)
+          voteStorage.value.find(
+            ({ [VOTE_IDENTIFIER]: voteIdentifier, [VOTE_INDEX]: voteIndex }) =>
+              voteIdentifier === path && voteIndex === index
+          )
         ),
       }));
     });
 
-    const controller = new AbortController();
+    let abort: () => void;
 
-    const fetchCounter = async (): Promise<void> => {
+    const fetchCounter = (): void => {
       const { serverURL, lang, path, reaction } = config.value;
 
-      if (!Array.isArray(reaction)) {
-        return;
-      }
-
-      const resp = await fetchArticleCounter({
-        serverURL,
-        lang,
-        paths: [path],
-        type: reaction.map((_, k) => `reaction${k}`),
-        signal: controller.signal,
-      });
+      if (reaction.length) {
+        const controller = new AbortController();
 
-      if (Array.isArray(resp) || typeof resp === 'number') return;
+        fetchArticleCounter({
+          serverURL,
+          lang,
+          paths: [path],
+          type: reaction.map((_, k) => `reaction${k}`),
+          signal: controller.signal,
+        }).then((resp) => {
+          if (Array.isArray(resp) || typeof resp === 'number') return;
+          votes.value = reaction.map((_, k) => resp[`reaction${k}`]);
+        });
 
-      votes.value = reaction.map((_, k) => resp[`reaction${k}`]);
+        abort = controller.abort.bind(controller);
+      }
     };
 
     const vote = async (index: number): Promise<void> => {
       const { serverURL, lang, path } = config.value;
-      const hasVoted = voteStorage.value.find(({ u }) => u === path);
-      const hasVotedTheReaction = hasVoted && hasVoted.i === index;
+      const hasVoted = voteStorage.value.find(
+        ({ [VOTE_IDENTIFIER]: voteIdentifier }) => voteIdentifier === path
+      );
+      const hasVotedTheReaction = hasVoted && hasVoted[VOTE_INDEX] === index;
 
       if (hasVotedTheReaction) return;
 
@@ -97,7 +103,10 @@ export default defineComponent({
 
       votes.value[index] = (votes.value[index] || 0) + 1;
       if (hasVoted) {
-        votes.value[hasVoted.i] = Math.max(votes.value[hasVoted.i] - 1, 0);
+        votes.value[hasVoted[VOTE_INDEX]] = Math.max(
+          votes.value[hasVoted[VOTE_INDEX]] - 1,
+          0
+        );
         updateArticleCounter({
           serverURL,
           lang,
@@ -109,7 +118,10 @@ export default defineComponent({
         hasVoted.i = index;
         voteStorage.value = Array.from(voteStorage.value);
       } else {
-        voteStorage.value = [...voteStorage.value, { u: path, i: index }];
+        voteStorage.value = [
+          ...voteStorage.value,
+          { [VOTE_IDENTIFIER]: path, [VOTE_INDEX]: index },
+        ];
       }
 
       if (voteStorage.value.length > 50)
@@ -117,7 +129,7 @@ export default defineComponent({
     };
 
     onMounted(() => fetchCounter());
-    onUnmounted(() => controller.abort());
+    onUnmounted(() => abort?.());
 
     return {
       reaction,

package/src/components/CommentBox.vue

@@ -368,7 +368,7 @@ export default defineComponent({
 
     const searchResults = reactive({
       loading: true,
-      list: [] as WalineSearchResult[],
+      list: [] as WalineSearchResult,
     });
 
     const wordLimit = ref(0);

package/src/components/ImageWall.vue

@@ -75,7 +75,7 @@ export default defineComponent({
   },
 
   props: {
-    items: { type: Array as PropType<WalineSearchResult[]>, default: () => [] },
+    items: { type: Array as PropType<WalineSearchResult>, default: () => [] },
     columnWidth: { type: Number, default: 300 },
     gap: { type: Number, default: 0 },
   },

package/src/composables/vote.ts

@@ -4,9 +4,12 @@ import type { Ref } from 'vue';
 
 const VOTE_KEY = 'WALINE_VOTE';
 
+export const VOTE_IDENTIFIER = 'id';
+export const VOTE_INDEX = 'i';
+
 export interface VoteLogItem {
-  u: string;
-  i: number;
+  [VOTE_IDENTIFIER]: string;
+  [VOTE_INDEX]: number;
 }
 
 export type VoteRef = Ref<VoteLogItem[]>;

package/src/typings/base.ts

@@ -39,44 +39,70 @@ export interface WalineEmojiInfo {
 
 export type WalineEmojiMaps = Record<string, string>;
 
-export interface WalineSearchResult extends Record<string, unknown> {
+export interface WalineSearchImageData extends Record<string, unknown> {
   /**
+   * 图片链接
+   *
    * Image link
    */
   src: string;
 
   /**
-   * Image title, optional
+   * 图片标题
+   *
+   * @description 用于图片的 alt 属性
+   *
+   * Image title
+   *
+   * @description Used for alt attribute of image
    */
   title?: string;
 
   /**
-   * Image preview link, optional
+   * 图片缩略图
+   *
+   * @description 为了更好的加载性能，我们会优先在列表中使用此缩略图
+   *
+   * Image preview link
+   *
+   * @description For better loading performance, we will use this thumbnail first in the list
    *
    * @default src
    */
   preview?: string;
 }
 
+export type WalineSearchResult = WalineSearchImageData[];
+
 export interface WalineSearchOptions {
   /**
+   * 搜索操作
+   *
    * Search action
    */
-  search: (word: string) => Promise<WalineSearchResult[]>;
+  search: (word: string) => Promise<WalineSearchResult>;
 
   /**
-   * Default search action
+   * 打开列表时展示的默认结果
+   *
+   * Default result when opening list
    *
    * @default () => search('')
    */
-  default?: () => Promise<WalineSearchResult[]>;
+  default?: () => Promise<WalineSearchResult>;
 
   /**
+   * 获取更多的操作
+   *
+   * @description 会在列表滚动到底部时触发，如果你的搜索服务支持分页功能，你应该设置此项实现无限滚动
+   *
    * Fetch more action
    *
+   * @description It will be triggered when the list scrolls to the bottom. If your search service supports paging, you should set this to achieve infinite scrolling
+   *
    * @default (word) => search(word)
    */
-  more?: (word: string, currectCount: number) => Promise<WalineSearchResult[]>;
+  more?: (word: string, currectCount: number) => Promise<WalineSearchResult>;
 }
 
 export type WalineMeta = 'nick' | 'mail' | 'link';

package/src/typings/locale.ts

@@ -8,52 +8,66 @@ export interface WalineDateLocale {
 
 export type WalineLevelLocale = Record<`level${number}`, string>;
 
-export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
+export interface WalineReactionLocale {
+  reactionTitle: string;
+  reaction0: string;
+  reaction1: string;
+  reaction2: string;
+  reaction3: string;
+  reaction4: string;
+  reaction5: string;
+  reaction6: string;
+  reaction7: string;
+  reaction8: string;
+}
+
+export interface WalineLocale
+  extends WalineDateLocale,
+    WalineLevelLocale,
+    WalineReactionLocale {
   nick: string;
-  nickError: string;
   mail: string;
-  mailError: string;
   link: string;
   optional: string;
   placeholder: string;
   sofa: string;
   submit: string;
-  like: string;
-  cancelLike: string;
-  reply: string;
-  cancelReply: string;
   comment: string;
   refresh: string;
   more: string;
-  preview: string;
-  emoji: string;
-  uploadImage: string;
   uploading: string;
   login: string;
-  logout: string;
   admin: string;
   sticky: string;
   word: string;
-  wordHint: string;
   anonymous: string;
   gif: string;
   gifSearchPlaceholder: string;
-  profile: string;
+
+  // manage
   approved: string;
   waiting: string;
   spam: string;
   unsticky: string;
+
+  // sorting
   oldest: string;
   latest: string;
   hottest: string;
-  reactionTitle: string;
-  reaction0: string;
-  reaction1: string;
-  reaction2: string;
-  reaction3: string;
-  reaction4: string;
-  reaction5: string;
-  reaction6: string;
-  reaction7: string;
-  reaction8: string;
+
+  // hint
+  nickError: string;
+  mailError: string;
+  wordHint: string;
+
+  // i18n
+  like: string;
+  cancelLike: string;
+  reply: string;
+  cancelReply: string;
+  preview: string;
+  emoji: string;
+  uploadImage: string;
+  profile: string;
+  logout: string;
 }

package/src/utils/config.ts

@@ -23,9 +23,11 @@ export interface WalineEmojiConfig {
   map: WalineEmojiMaps;
 }
 
-export interface WalineConfig extends Required<Omit<WalineProps, 'wordLimit'>> {
+export interface WalineConfig
+  extends Required<Omit<WalineProps, 'wordLimit' | 'reaction'>> {
   locale: WalineLocale;
   wordLimit: [number, number] | false;
+  reaction: string[];
 }
 
 export const getServerURL = (serverURL: string): string => {
@@ -87,6 +89,10 @@ export const getConfig = ({
   copyright,
   search,
   recaptchaV3Key,
-  reaction: reaction === true ? defaultReaction : reaction || false,
+  reaction: Array.isArray(reaction)
+    ? reaction
+    : reaction === true
+    ? defaultReaction
+    : [],
   ...more,
 });