@waline/client 2.12.0 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -134,8 +134,8 @@
     "@rollup/plugin-replace": "4.0.0",
     "@types/autosize": "4.0.1",
     "@types/marked": "4.0.7",
-    "@types/node": "18.7.23",
-    "@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",

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

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/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/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 = '';
+      },
+    };
+  });
+};