@waline/client 2.12.0 → 2.13.1

package/src/api/user.ts

@@ -0,0 +1,43 @@
+import { errorCheck } from './utils';
+import type { BaseAPIOptions } from './utils';
+import type { WalineComment } from '../typings';
+
+export interface GetUserListOptions extends BaseAPIOptions {
+  /**
+   * 每页个数
+   *
+   * Number per page
+   */
+  pageSize: number;
+
+  /**
+   * 取消请求的信号
+   *
+   * AbortSignal to cancel request
+   */
+  signal?: AbortSignal;
+}
+
+export interface WalineUser
+  extends Pick<WalineComment, 'nick' | 'link' | 'avatar' | 'label' | 'level'> {
+  count: number;
+}
+
+export interface GetUserListResponse {
+  errno: number;
+  message: string;
+  data: WalineUser[];
+}
+
+export const getUserList = ({
+  serverURL,
+  signal,
+  pageSize,
+  lang,
+}: GetUserListOptions): Promise<WalineUser[]> =>
+  fetch(`${serverURL}/user?pageSize=${pageSize}&lang=${lang}`, {
+    signal,
+  })
+    .then((resp) => <Promise<GetUserListResponse>>resp.json())
+    .then((resp) => errorCheck(resp, 'user list'))
+    .then((resp) => resp.data);

package/src/api/utils.ts

@@ -1,4 +1,20 @@
-export interface FetchErrorData {
+export interface BaseAPIOptions {
+  /**
+   * Waline 服务端地址
+   *
+   * Waline serverURL
+   */
+  serverURL: string;
+
+  /**
+   * 错误信息所使用的语言
+   *
+   * Language used in error text
+   */
+  lang: string;
+}
+
+export interface APIErrorResponse {
   errno: number;
   errmsg: string;
 }
@@ -9,13 +25,13 @@ export const JSON_HEADERS: Record<string, string> = {
 };
 
 export const errorCheck = <T = unknown>(
-  data: T | FetchErrorData,
+  data: T | APIErrorResponse,
   name = ''
 ): T => {
-  if (typeof data === 'object' && (data as FetchErrorData).errno)
+  if (typeof data === 'object' && (data as APIErrorResponse).errno)
     throw new TypeError(
-      `Fetch ${name} failed with ${(data as FetchErrorData).errno}: ${
-        (data as FetchErrorData).errmsg
+      `Fetch ${name} failed with ${(data as APIErrorResponse).errno}: ${
+        (data as APIErrorResponse).errmsg
       }`
     );
 

package/src/components/ArticleReaction.vue

@@ -27,8 +27,9 @@ import {
   onMounted,
   onUnmounted,
   ref,
+  watch,
 } from 'vue';
-import { fetchArticleCounter, updateArticleCounter } from '../api';
+import { getArticleCounter, updateArticleCounter } from '../api';
 import { VOTE_IDENTIFIER, VOTE_INDEX, useVoteStorage } from '../composables';
 import type { WalineConfig } from '../utils';
 import type { WalineLocale } from '../typings';
@@ -70,7 +71,7 @@ export default defineComponent({
       if (reaction.length) {
         const controller = new AbortController();
 
-        fetchArticleCounter({
+        getArticleCounter({
           serverURL,
           lang,
           paths: [path],
@@ -128,7 +129,15 @@ export default defineComponent({
         voteStorage.value = voteStorage.value.slice(-50);
     };
 
-    onMounted(() => fetchCounter());
+    onMounted(() => {
+      watch(
+        () => [config.value.serverURL, config.value.path],
+        () => {
+          fetchCounter();
+        },
+        { immediate: true }
+      );
+    });
     onUnmounted(() => abort?.());
 
     return {

package/src/components/CommentBox.vue

@@ -36,7 +36,7 @@
       >
         <div v-for="kind in config.meta" :key="kind" class="wl-header-item">
           <label
-            :for="kind"
+            :for="`wl-${kind}`"
             v-text="
               locale[kind] +
               (config.requiredMeta.includes(kind) || !config.requiredMeta.length
@@ -287,7 +287,7 @@ import {
   GifIcon,
 } from './Icons';
 import ImageWall from './ImageWall.vue';
-import { login, postComment } from '../api';
+import { addComment, login } from '../api';
 import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
   getEmojis,
@@ -532,7 +532,7 @@ export default defineComponent({
 
       isSubmitting.value = true;
 
-      postComment({
+      addComment({
         serverURL,
         lang,
         token: userInfo.value?.token,
@@ -590,8 +590,12 @@ export default defineComponent({
       const height = 800;
       const left = (window.innerWidth - width) / 2;
       const top = (window.innerHeight - height) / 2;
+      const query = new URLSearchParams({
+        lng: lang,
+        token: userInfo.value!.token,
+      });
       const handler = window.open(
-        `${serverURL}/ui/profile?lng=${encodeURIComponent(lang)}`,
+        `${serverURL}/ui/profile?${query.toString()}`,
         '_blank',
         `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no`
       );
@@ -668,23 +672,6 @@ export default defineComponent({
       { immediate: true }
     );
 
-    watch(showGif, async (showGif) => {
-      if (!showGif) return;
-
-      const searchOptions = config.value.search as WalineSearchOptions;
-
-      // clear input
-      if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
-
-      searchResults.loading = true;
-
-      searchResults.list = searchOptions.default
-        ? await searchOptions.default()
-        : await searchOptions.search('');
-
-      searchResults.loading = false;
-    });
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onMessageRecive = ({ data }: any): void => {
       if (!data || data.type !== 'profile') return;
@@ -705,6 +692,24 @@ export default defineComponent({
         editor.value = props.edit.orig;
       }
 
+      // watch gif
+      watch(showGif, async (showGif) => {
+        if (!showGif) return;
+
+        const searchOptions = config.value.search as WalineSearchOptions;
+
+        // clear input
+        if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
+
+        searchResults.loading = true;
+
+        searchResults.list = searchOptions.default
+          ? await searchOptions.default()
+          : await searchOptions.search('');
+
+        searchResults.loading = false;
+      });
+
       // watch editor
       watch(
         () => editor.value,

package/src/components/ImageWall.vue

@@ -133,27 +133,27 @@ export default defineComponent({
       window.scrollTo({ top: scrollY });
     };
 
-    const imageLoad = (e: Event) => {
+    const imageLoad = (e: Event): void => {
       state.value[(e.target as HTMLImageElement).src] = true;
     };
 
-    watch(
-      () => [props.items],
-      () => {
-        state.value = {};
-        redraw(true);
-      }
-    );
-    watch(
-      () => [props.columnWidth, props.gap],
-      () => redraw()
-    );
-
     onMounted(() => {
       redraw(true);
-      resizeObserver = new ResizeObserver(() => redraw());
 
+      resizeObserver = new ResizeObserver(() => redraw());
       resizeObserver.observe(wall.value!);
+
+      watch(
+        () => [props.items],
+        () => {
+          state.value = {};
+          redraw(true);
+        }
+      );
+      watch(
+        () => [props.columnWidth, props.gap],
+        () => redraw()
+      );
     });
 
     onBeforeUnmount(() => resizeObserver!.unobserve(wall.value!));

package/src/components/Waline.vue

@@ -81,19 +81,22 @@
 
 <script lang="ts">
 import { useStyleTag } from '@vueuse/core';
-import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  watch,
+} from 'vue';
 import Reaction from './ArticleReaction.vue';
 import CommentBox from './CommentBox.vue';
 import CommentCard from './CommentCard.vue';
 import { LoadingIcon } from './Icons';
 import { useUserInfo, useLikeStorage } from '../composables';
 import { defaultLocales } from '../config';
-import {
-  deleteComment,
-  fetchComment,
-  likeComment,
-  updateComment,
-} from '../api';
+import { deleteComment, getComment, likeComment, updateComment } from '../api';
 import { getConfig, getDarkStyle } from '../utils';
 
 import type { PropType } from 'vue';
@@ -263,8 +266,9 @@ export default defineComponent({
 
   props: SHOULD_VALIDATE ? propsWithValidate : props,
 
-  setup(props) {
-    const config = computed(() => getConfig(props as unknown as WalineProps));
+  setup(_props) {
+    const props = _props as unknown as WalineProps;
+    const config = computed(() => getConfig(props));
 
     const userInfo = useUserInfo();
     const likeStorage = useLikeStorage();
@@ -287,7 +291,7 @@ export default defineComponent({
     // eslint-disable-next-line vue/no-setup-props-destructure
     let abort: () => void;
 
-    const fetchCommentData = (pageNumber: number): void => {
+    const getCommentData = (pageNumber: number): void => {
       const { serverURL, path, pageSize } = config.value;
       const controller = new AbortController();
 
@@ -295,7 +299,7 @@ export default defineComponent({
 
       abort?.();
 
-      fetchComment({
+      getComment({
         serverURL,
         lang: config.value.lang,
         path,
@@ -322,12 +326,12 @@ export default defineComponent({
       abort = controller.abort.bind(controller);
     };
 
-    const loadMore = (): void => fetchCommentData(page.value + 1);
+    const loadMore = (): void => getCommentData(page.value + 1);
 
     const refresh = (): void => {
       count.value = 0;
       data.value = [];
-      fetchCommentData(1);
+      getCommentData(1);
     };
 
     const onSortByChange = (item: SortKeyItems): void => {
@@ -462,9 +466,14 @@ export default defineComponent({
 
     provide('config', config);
 
-    watch(() => (props as unknown as WalineProps).path, refresh);
-
-    onMounted(() => refresh());
+    onMounted(() => {
+      watch(
+        () => [props.serverURL, props.path],
+        () => refresh(),
+        { immediate: true }
+      );
+    });
+    onUnmounted(() => abort?.());
 
     return {
       config,

package/src/composables/userInfo.ts

@@ -10,8 +10,7 @@ export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
 let userInfoStorage: UserInfoRef | null = null;
 
 export const useUserInfo = (): UserInfoRef =>
-  userInfoStorage ||
-  (userInfoStorage = useStorage<UserInfo | Record<string, never>>(
+  (userInfoStorage ??= useStorage<UserInfo | Record<string, never>>(
     USER_KEY,
     {}
   ));

package/src/composables/vote.ts

@@ -17,4 +17,4 @@ export type VoteRef = Ref<VoteLogItem[]>;
 let voteStorage: VoteRef | null = null;
 
 export const useVoteStorage = (): VoteRef =>
-  voteStorage || (voteStorage = useStorage<VoteLogItem[]>(VOTE_KEY, []));
+  (voteStorage ??= useStorage<VoteLogItem[]>(VOTE_KEY, []));

package/src/config/default.ts

@@ -14,9 +14,8 @@ export const defaultLang = 'zh-CN';
 
 export const defaultUploadImage = (file: File): Promise<string> =>
   new Promise((resolve, reject) => {
-    if (file.size > 128 * 1000) {
+    if (file.size > 128 * 1000)
       return reject(new Error('File too large! File size limit 128KB'));
-    }
 
     const reader = new FileReader();
 
@@ -31,43 +30,43 @@ export const defaultTexRenderer = (blockMode: boolean): string =>
     : '<span class="wl-tex">Tex is not available in preview</span>';
 
 export const getDefaultSearchOptions = (lang: string): WalineSearchOptions => {
-  interface Result {
+  interface GifsResult {
+    data: IGif[];
     meta: {
       msg: string;
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       response_id: string;
       status: number;
     };
     pagination: {
       count: number;
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       total_count: number;
       offset: number;
     };
   }
-  interface GifsResult extends Result {
-    data: IGif[];
-  }
 
   const fetchGiphy = async (
     url: string,
     params: Record<string, string> = {}
-  ): Promise<WalineSearchResult> => {
-    const querystring = new URLSearchParams({
-      lang,
-      limit: '20',
-      rating: 'g',
-      api_key: '6CIMLkNMMOhRcXPoMCPkFy4Ybk2XUiMp',
-      ...params,
-    }).toString();
-
-    const resp = await fetch(
-      `https://api.giphy.com/v1/gifs/${url}?${querystring}`
-    ).then((resp) => resp.json() as Promise<GifsResult>);
-
-    return resp.data.map((gif) => ({
-      title: gif.title,
-      src: gif.images.downsized_medium.url,
-    }));
-  };
+  ): Promise<WalineSearchResult> =>
+    fetch(
+      `https://api.giphy.com/v1/gifs/${url}?${new URLSearchParams({
+        lang,
+        limit: '20',
+        rating: 'g',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        api_key: '6CIMLkNMMOhRcXPoMCPkFy4Ybk2XUiMp',
+        ...params,
+      }).toString()}`
+    )
+      .then((resp) => <Promise<GifsResult>>resp.json())
+      .then(({ data }) =>
+        data.map((gif) => ({
+          title: gif.title,
+          src: gif.images.downsized_medium.url,
+        }))
+      );
 
   return {
     search: (word: string): Promise<WalineSearchResult> =>

package/src/pageview.ts

@@ -1,4 +1,4 @@
-import { fetchPageviews, updatePageviews } from './api';
+import { getPageviews, updatePageviews } from './api';
 import { errorHandler, getQuery, getServerURL } from './utils';
 
 import type { WalineAbort } from './typings';
@@ -78,7 +78,7 @@ export const pageviewCount = ({
   };
 
   const fetch = (elements: HTMLElement[]): Promise<void> =>
-    fetchPageviews({
+    getPageviews({
       serverURL: getServerURL(serverURL),
       paths: elements.map((element) => getQuery(element) || path),
       lang,

package/src/styles/index.scss

@@ -9,8 +9,9 @@
 
 @use 'card';
 @use 'layout';
+@use 'reaction';
 
 @use 'highlight';
 
 @use 'recent';
-@use 'reaction';
+@use 'userlist';

package/src/styles/userlist.scss

@@ -0,0 +1,158 @@
+.wl-user-list {
+  padding: 0;
+  list-style: none;
+
+  .wl-user-item {
+    margin: 10px 0;
+
+    &:nth-child(1) .wl-user-badge {
+      background: var(--waline-rank-gold-bgcolor, #fa3939);
+      color: var(--waline-white);
+      font-weight: bold;
+    }
+
+    &:nth-child(2) .wl-user-badge {
+      background: var(--waline-rank-silver-bgcolor, #fb811c);
+      color: var(--waline-white);
+      font-weight: bold;
+    }
+
+    &:nth-child(3) .wl-user-badge {
+      background: var(--waline-rank-copper-bgcolor, #feb207);
+      color: var(--waline-white);
+    }
+  }
+
+  a,
+  a:hover,
+  a:visited {
+    color: var(--waline-color);
+    text-decoration: none;
+  }
+
+  .wl-user-avatar {
+    position: relative;
+
+    display: inline-block;
+
+    overflow: hidden;
+
+    margin-right: 10px;
+    border-radius: 4px;
+
+    line-height: 0;
+
+    > img {
+      width: var(--waline-user-avatar-size, 48px);
+      height: var(--waline-user-avatar-size, 48px);
+    }
+  }
+
+  .wl-user-badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    min-width: 0.7em;
+    height: 1.5em;
+    padding: 0 0.4em;
+    border-radius: 4px;
+
+    background: var(--waline-info-bgcolor);
+    color: var(--waline-info-color);
+
+    font-weight: bold;
+    font-size: 10px;
+    line-height: 1.5em;
+    text-align: center;
+  }
+
+  .wl-user-meta {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .wl-badge {
+    display: inline-block;
+    vertical-align: text-top;
+
+    margin-left: 0.5em;
+    padding: 0 0.3em;
+    border: 1px solid var(--waline-badge-color);
+    border-radius: 4px;
+
+    color: var(--waline-badge-color);
+
+    font-size: var(--waline-badge-font-size);
+  }
+}
+
+.wl-user-wall {
+  padding: 0;
+  list-style: none;
+
+  .wl-user-item {
+    position: relative;
+    display: inline-block;
+    transition: transform ease-in-out 0.2s;
+
+    &::before,
+    &::after {
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      z-index: 10;
+
+      opacity: 0;
+      pointer-events: none;
+
+      transition: all 0.18s ease-out 0.18s;
+      transform: translate(-50%, 4px);
+      transform-origin: top;
+    }
+
+    &::before {
+      content: '';
+
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      border-top-color: rgb(16 16 16 / 95%);
+    }
+
+    &::after {
+      content: attr(aria-label);
+
+      margin-bottom: 10px;
+      padding: 0.5em 1em;
+      border-radius: 2px;
+
+      background: rgb(16 16 16 / 95%);
+      color: #fff;
+
+      font-size: 12px;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      transform: scale(1.1);
+
+      &::before,
+      &::after {
+        opacity: 1;
+        pointer-events: none;
+        transform: translate(-50%, 0);
+      }
+    }
+
+    img {
+      width: var(--waline-user-avatar-size, 48px);
+      height: var(--waline-user-avatar-size, 48px);
+    }
+  }
+
+  .wl-user-badge,
+  .wl-user-meta {
+    display: none;
+  }
+}

package/src/utils/emoji.ts

@@ -22,7 +22,7 @@ const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
   }
 
   return fetch(`${link}/info.json`)
-    .then((resp) => resp.json() as Promise<Omit<WalineEmojiInfo, 'folder'>>)
+    .then((resp) => <Promise<Omit<WalineEmojiInfo, 'folder'>>>resp.json())
     .then((emojiInfo) => {
       const info = {
         folder: link,

package/src/widgets/index.ts

@@ -1 +1,2 @@
 export * from './recentComments';
+export * from './userList';

package/src/widgets/recentComments.ts

@@ -1,4 +1,4 @@
-import { fetchRecentComment } from '../api';
+import { getRecentComment } from '../api';
 import { useUserInfo } from '../composables';
 import { getRoot } from '../utils';
 
@@ -62,7 +62,7 @@ export const RecentComments = ({
   const root = getRoot(el);
   const controller = new AbortController();
 
-  return fetchRecentComment({
+  return getRecentComment({
     serverURL,
     count,
     lang,