@waline/client 2.11.3 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.11.3",
+  "version": "2.13.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -93,6 +93,17 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite -c config/vite.config.js",
+    "lint": "eslint --ext .ts,.vue .",
+    "prepublishOnly": "pnpm clean && pnpm build",
+    "rollup": "rollup -c ./config/rollup.config.js",
+    "style": "pnpm style:main && pnpm style:meta",
+    "style:main": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed",
+    "style:meta": "sass ./src/styles/meta.scss ./dist/waline-meta.css --style=compressed"
+  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -108,42 +119,33 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.2.0",
+    "@vueuse/core": "^9.3.0",
     "autosize": "^5.0.1",
-    "marked": "^4.1.0",
-    "vue": "^3.2.39"
+    "marked": "^4.1.1",
+    "vue": "^3.2.40"
   },
   "devDependencies": {
-    "@babel/core": "7.19.1",
-    "@babel/preset-env": "7.19.1",
+    "@babel/core": "7.19.3",
+    "@babel/preset-env": "7.19.3",
+    "@giphy/js-types": "4.2.1",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
     "@rollup/plugin-node-resolve": "14.1.0",
     "@rollup/plugin-replace": "4.0.0",
     "@types/autosize": "4.0.1",
     "@types/marked": "4.0.7",
-    "@types/node": "18.7.21",
-    "@vitejs/plugin-vue": "3.1.0",
+    "@types/node": "18.8.2",
+    "@vitejs/plugin-vue": "3.1.2",
     "recaptcha-v3": "1.10.0",
     "rimraf": "3.0.2",
     "rollup": "2.79.1",
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "3.0.2",
-    "typescript": "4.8.3",
-    "vite": "3.1.3"
+    "typescript": "4.8.4",
+    "vite": "3.1.4"
   },
   "engines": {
     "node": ">=14"
-  },
-  "scripts": {
-    "build": "pnpm rollup && pnpm style",
-    "clean": "rimraf ./dist",
-    "dev": "vite -c config/vite.config.js",
-    "lint": "eslint --ext .ts,.vue .",
-    "rollup": "rollup -c ./config/rollup.config.js",
-    "style": "pnpm style:main && pnpm style:meta",
-    "style:main": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed",
-    "style:meta": "sass ./src/styles/meta.scss ./dist/waline-meta.css --style=compressed"
   }
-}
+}

package/src/api/index.ts

@@ -4,3 +4,4 @@ export * from './commentCount';
 export * from './login';
 export * from './pageview';
 export * from './recentComment';
+export * from './user';

package/src/api/user.ts

@@ -0,0 +1,35 @@
+import { WalineComment } from '../typings';
+import { errorCheck } from './utils';
+
+export interface FetchUserListOptions {
+  serverURL: string;
+  pageSize: number;
+  signal: AbortSignal;
+  lang: string;
+}
+
+export interface WalineUser
+  extends Pick<WalineComment, 'nick' | 'link' | 'avatar' | 'label' | 'level'> {
+  count: number;
+}
+
+export const fetchUserList = ({
+  serverURL,
+  signal,
+  pageSize,
+  lang,
+}: FetchUserListOptions): Promise<WalineUser[]> => {
+  return fetch(`${serverURL}/user?pageSize=${pageSize}&lang=${lang}`, {
+    signal,
+  })
+    .then(
+      (resp) =>
+        resp.json() as Promise<{
+          errno: number;
+          message: string;
+          data: WalineUser[];
+        }>
+    )
+    .then((resp) => errorCheck(resp, 'user list'))
+    .then((resp) => resp.data);
+};

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
@@ -624,11 +624,12 @@ export default defineComponent({
 
       searchResults.loading = true;
 
-      searchResults.list.push(
-        ...(searchOptions.more
+      searchResults.list = [
+        ...searchResults.list,
+        ...(searchOptions.more && searchResults.list.length
           ? await searchOptions.more(keyword, searchResults.list.length)
-          : await searchOptions.search(keyword))
-      );
+          : await searchOptions.search(keyword)),
+      ];
 
       searchResults.loading = false;
 

package/src/components/ImageWall.vue

@@ -42,7 +42,7 @@ SOFTWARE. -->
           :src="items[itemIndex].src"
           :title="items[itemIndex].title"
           loading="lazy"
-          @load="state[items[itemIndex].src] = true"
+          @load="imageLoad"
           @click="$emit('insert', `![](${items[itemIndex].src})`)"
         />
       </template>
@@ -133,6 +133,10 @@ export default defineComponent({
       window.scrollTo({ top: scrollY });
     };
 
+    const imageLoad = (e: Event) => {
+      state.value[(e.target as HTMLImageElement).src] = true;
+    };
+
     watch(
       () => [props.items],
       () => {
@@ -158,6 +162,7 @@ export default defineComponent({
       columns,
       state,
       wall,
+      imageLoad,
     };
   },
 });

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

@@ -1,4 +1,9 @@
-import type { WalineMeta, WalineSearchOptions } from '../typings';
+import type { IGif } from '@giphy/js-types';
+import type {
+  WalineMeta,
+  WalineSearchOptions,
+  WalineSearchResult,
+} from '../typings';
 
 const availableMeta: WalineMeta[] = ['nick', 'mail', 'link'];
 
@@ -25,94 +30,51 @@ export const defaultTexRenderer = (blockMode: boolean): string =>
     ? '<p class="wl-tex">Tex is not available in preview</p>'
     : '<span class="wl-tex">Tex is not available in preview</span>';
 
-export const getDefaultSearchOptions = (): WalineSearchOptions => {
-  interface FetchGifRequest {
-    keyword: string;
-    pos?: string;
+export const getDefaultSearchOptions = (lang: string): WalineSearchOptions => {
+  interface Result {
+    meta: {
+      msg: string;
+      response_id: string;
+      status: number;
+    };
+    pagination: {
+      count: number;
+      total_count: number;
+      offset: number;
+    };
   }
-
-  type GifFormat =
-    | 'gif'
-    | 'mediumgif'
-    | 'tinygif'
-    | 'nanogif'
-    | 'mp4'
-    | 'loopedmp4'
-    | 'tinymp4'
-    | 'nanomp4'
-    | 'webm'
-    | 'tinywebm'
-    | 'nanowebm';
-
-  interface MediaObject {
-    preview: string;
-    url: string;
-    dims: number[];
-    size: number;
-  }
-
-  interface GifObject {
-    created: number;
-    hasaudio: boolean;
-    id: string;
-    media: Record<GifFormat, MediaObject>[];
-    tags: string[];
-    title: string;
-    itemurl: string;
-    hascaption: boolean;
-    url: string;
-  }
-
-  interface FetchGifResponse {
-    next: string;
-    results: GifObject[];
+  interface GifsResult extends Result {
+    data: IGif[];
   }
 
-  const state = {
-    next: '',
-  };
-
-  const fetchGif = ({
-    keyword,
-    pos,
-  }: FetchGifRequest): Promise<FetchGifResponse> => {
-    const baseUrl = `https://g.tenor.com/v1/search`;
-    const query = new URLSearchParams('media_filter=minimal');
-
-    query.set('key', 'PAY5JLFIH6V6');
-    query.set('limit', '20');
-    query.set('pos', pos || '');
-    query.set('q', keyword);
-
-    return fetch(`${baseUrl}?${query.toString()}`, {
-      headers: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        'Content-Type': 'application/json',
-      },
-    })
-      .then((resp) => resp.json() as Promise<FetchGifResponse>)
-      .catch(() => ({ next: pos || '', results: [] }));
+  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,
+    }));
   };
 
   return {
-    search: (word = '') =>
-      fetchGif({ keyword: word }).then((resp) => {
-        state.next = resp.next;
-
-        return resp.results.map((item) => ({
-          title: item.title,
-          src: item.media[0].tinygif.url,
-        }));
-      }),
-    more: (word) =>
-      fetchGif({ keyword: word, pos: state.next }).then((resp) => {
-        state.next = resp.next;
-
-        return resp.results.map((item) => ({
-          title: item.title,
-          src: item.media[0].tinygif.url,
-        }));
-      }),
+    search: (word: string): Promise<WalineSearchResult> =>
+      fetchGiphy('search', { q: word, offset: '0' }),
+    default: (): Promise<WalineSearchResult> => fetchGiphy('trending', {}),
+    more: (word: string, offset = 0): Promise<WalineSearchResult> =>
+      fetchGiphy('search', { q: word, offset: offset.toString() }),
   };
 };
 

package/src/entrys/api.ts

@@ -1 +1 @@
-export * from './api';
+export * from '../api';

package/src/styles/index.scss

@@ -13,4 +13,5 @@
 @use 'highlight';
 
 @use 'recent';
+@use 'userlist';
 @use 'reaction';

package/src/styles/userlist.scss

@@ -0,0 +1,116 @@
+:root {
+  --waline-rank-gold-bgcolor: #FA3939;
+  --waline-rank-silver-bgcolor: #FB811C;
+  --waline-rank-copper-bgcolor: #FEB207;
+}
+
+.wl-user-list {
+  list-style: none;
+  padding: 0;
+
+  > li + li {
+    margin-top: 10px;
+  }
+
+  > li, > li > a {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+
+  a,
+  a:hover,
+  a:visited {
+    text-decoration: none;
+    color: var(--waline-color);
+  }
+
+  .wl-user-avatar {
+    position: relative;
+    line-height: 0;
+
+    > i {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      min-width: 1.5em;
+      height: 1.5em;
+      line-height: 1.5em;
+      background: var(--waline-info-bgcolor);
+      text-align: center;
+      font-size: 10px;
+      border-radius: 2px;
+      font-style: normal;
+      color: var(--waline-info-color);
+    }
+  }
+
+  img {
+    width: 48px;
+    height: 48px;
+    border-radius: 2px;
+  }
+
+  .wl-user-name {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+  }
+  .wl-user-tag {
+    padding-bottom: 0;
+    border-bottom: none;
+    width: auto;
+  }
+
+
+  > li:nth-child(1) i {
+    background: var(--waline-rank-gold-bgcolor);
+    color: var(--waline-white);
+    font-weight: bold;
+  }
+
+  > li:nth-child(2) i {
+    background: var(--waline-rank-silver-bgcolor);
+    color: var(--waline-white);
+    font-weight: bold;
+  }
+
+  > li:nth-child(3) i {
+    background: var(--waline-rank-copper-bgcolor);
+    color: var(--waline-white);
+    font-weight: bold;
+  }
+}
+
+.wl-user-wall {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  padding: 0;
+
+  > li {
+    width: 48px;
+    height: 48px;
+    overflow: hidden;
+  }
+
+  > li:hover img {
+    transform: scale(1.25);
+  }
+
+  img {
+    width: 48px;
+    height: 48px;
+    border-radius: 0;
+    transition: transform ease-in-out 400ms;
+  }
+
+  .wl-user-avatar > i,
+  .wl-user-meta {
+    display: none;
+  }
+}
+
+
+

package/src/utils/config.ts

@@ -64,7 +64,7 @@ export const getConfig = ({
   texRenderer,
   copyright = true,
   login = 'enable',
-  search = getDefaultSearchOptions(),
+  search,
   reaction,
   recaptchaV3Key = '',
   ...more
@@ -87,7 +87,7 @@ export const getConfig = ({
   pageSize,
   login,
   copyright,
-  search,
+  search: search || getDefaultSearchOptions(lang),
   recaptchaV3Key,
   reaction: Array.isArray(reaction)
     ? reaction

package/src/widgets/index.ts

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

package/src/widgets/userList.ts

@@ -0,0 +1,138 @@
+import { fetchUserList, WalineUser } from '../api';
+import { defaultLang, defaultLocales } from '../config';
+import { WalineLocale } from '../typings';
+import { getRoot } from '../utils';
+
+export interface WalineUserListOptions {
+  /**
+   * Waline 服务端地址
+   *
+   * Waline serverURL
+   */
+  serverURL: string;
+
+  /**
+   * 获取用户列表的数量
+   *
+   * fetch number of user list
+   */
+  count: number;
+
+  /**
+   * 需要挂载的元素
+   *
+   * Element to be mounted
+   */
+  el?: string | HTMLElement;
+
+  /**
+   * 错误提示消息所使用的语言
+   *
+   * Language of error message
+   *
+   * @default 'zh-CN'
+   */
+  lang?: string;
+
+  /**
+   * 自定义 waline 语言显示
+   *
+   * @see [自定义语言](https://waline.js.org/client/i18n.html)
+   *
+   * Custom display language in waline
+   *
+   * @see [I18n](https://waline.js.org/en/client/i18n.html)
+   */
+  locale?: WalineLocale;
+
+  /**
+   * 列表模式还是头像墙模式
+   *
+   * list mode or avatar wall mode
+   */
+  mode: 'list' | 'wall';
+}
+
+export interface WalineUserListResult {
+  /**
+   * 用户数据
+   *
+   * User Data
+   */
+  users: WalineUser[];
+
+  /**
+   * 取消挂载挂件
+   *
+   * Umount widget
+   */
+  destroy: () => void;
+}
+
+export const UserList = ({
+  el,
+  serverURL,
+  count,
+  locale,
+  lang = defaultLang,
+  mode = 'list',
+}: WalineUserListOptions): Promise<WalineUserListResult> => {
+  const root = getRoot(el);
+  const controller = new AbortController();
+
+  return fetchUserList({
+    serverURL,
+    pageSize: count,
+    lang,
+    signal: controller.signal,
+  }).then((users) => {
+    if (!root || !users.length) {
+      return {
+        users,
+        destroy: (): void => controller.abort(),
+      };
+    }
+
+    locale = {
+      ...(defaultLocales[lang] || defaultLocales[defaultLang]),
+      ...(typeof locale === 'object' ? locale : {}),
+    } as WalineLocale;
+
+    root.innerHTML = `<ul class="wl-user-${mode}">${users
+      .map((user, index) =>
+        [
+          '<li class="wl-user-item">',
+          user.link && `<a href="${user.link}" target="_blank">`,
+          '<div class="wl-user-avatar">',
+          `<img src="${user.avatar}" alt="${user.nick}">`,
+          `<i>${index + 1}</i>`,
+          '</div>',
+          '<div class="wl-user-meta">',
+          `<div class="wl-user-name"><div>${user.nick}</div>`,
+          '<div class="wl-user-tag wl-card">',
+          user.level &&
+            `<span class="wl-badge">${
+              locale ? locale[`level${user.level}`] : `Level ${user.level}`
+            }</span>`,
+          user.label && `<span class="wl-badge">${user.label}</span>`,
+          '</div>',
+          '</div>',
+          user.link && `<span class="wl-user-meta">${user.link}</span>`,
+          '</div>',
+          user.link && '</a>',
+          '</li>',
+        ]
+          .filter((v) => v)
+          .join('')
+      )
+      .join('')}</ul>`;
+
+    return {
+      users,
+      destroy: (): void => {
+        controller.abort();
+        root.innerHTML = '';
+      },
+    };
+  });
+};