feat: HomePage of User

apps/api/src/user-course-progress/tests/user-course-progress.e2e-spec.ts

@@ -43,12 +43,14 @@ describe("user-progress e2e", () => {
     const courseIdFirst = createId();
     const coursePackIdSecond = createId();
     const courseIdSecond = createId();
-    await insertUserCourseProgress(db, coursePackIdFirst, courseIdFirst, 0);
-    await insertUserCourseProgress(db, coursePackIdSecond, courseIdSecond, 10);
+    const userId = createId();
+    await insertUserCourseProgress(db, coursePackIdFirst, courseIdFirst, 0, userId);
+    await insertUserCourseProgress(db, coursePackIdSecond, courseIdSecond, 10, userId);
 
     await request(app.getHttpServer())
       .get("/user-course-progress/recent-course-packs")
       .set("Authorization", `Bearer ${token}`)
+      .query({ userId })
       .expect(200)
       .expect(({ body }) => {
         expect(body.length).toBe(2);

apps/api/src/user-course-progress/user-course-progress.controller.ts

@@ -12,11 +12,10 @@ import { UserCourseProgressService } from "./user-course-progress.service";
 export class UserProgressController {
   constructor(private readonly userCourseProgressService: UserCourseProgressService) {}
 
-  @UseGuards(AuthGuard)
   @Get("/recent-course-packs")
-  async getUserRecentCoursePacks(@User() user: UserEntity, @Query("limit") limit: number) {
+  async getUserRecentCoursePacks(@Query("userId") userId?: string, @Query("limit") limit?: number) {
     const recentCoursePacks = await this.userCourseProgressService.getUserRecentCoursePacks(
-      user.userId,
+      userId,
       limit || 3,
     );
     return recentCoursePacks;

apps/api/src/user-learn-record/user-learn-record.controller.ts

@@ -9,9 +9,8 @@ import { UserLearnRecordService } from "./user-learn-record.service";
 export class UserLearnRecordController {
   constructor(private userLearnRecordService: UserLearnRecordService) {}
 
-  @UseGuards(AuthGuard)
   @Get("finishCount")
-  finishCount(@User() user: UserEntity, @Query() dto?: GetUserLearnRecordDto) {
-    return this.userLearnRecordService.find(user.userId, dto);
+  finishCount(@Query("userId") userId: string, @Query() dto?: GetUserLearnRecordDto) {
+    return this.userLearnRecordService.find(userId, dto);
   }
 }

apps/api/src/user/user.controller.ts

@@ -1,4 +1,4 @@
-import { Body, Controller, Get, Patch, Post, UseGuards } from "@nestjs/common";
+import { Body, Controller, Get, Param, Patch, Post, UseGuards } from "@nestjs/common";
 
 import { AuthGuard } from "../guards/auth.guard";
 import { User, UserEntity } from "../user/user.decorators";
@@ -21,6 +21,11 @@ export class UserController {
     return userInfo;
   }
 
+  @Get(":username")
+  getUserByUsername(@Param("username") username: string) {
+    return this.userService.getUserByUsername(username);
+  }
+
   // 给新用户第一次登录使用
   // 目前使用 email 和 github 登录的用户 都不存在 username
   // 所以这个接口有两个目的

apps/api/src/user/user.service.ts

@@ -69,6 +69,21 @@ export class UserService {
       throw new HttpException(e.response.data.message, e.response.status);
     }
   }
+  async getUserByUsername(username: string) {
+    const params = new URLSearchParams([["search.username", username]]).toString();
+
+    try {
+      const res = await this.logtoService.logtoApi.get(`/api/users/?${params}`);
+      if (res.status === 200) {
+        const user = res.data.at(0);
+        return user;
+      } else {
+        return res.data;
+      }
+    } catch (e) {
+      throw new HttpException(e.response.data.message, e.response.status);
+    }
+  }
 
   async setupNewUser(user: UserEntity, dto: { username: string; avatar: string }) {
     if (!dto.avatar) {

apps/api/test/fixture/db.ts

@@ -80,11 +80,12 @@ export async function insertUserCourseProgress(
   coursePackId: string,
   courseId: string,
   statementIndex: number,
+  userId?: string,
 ) {
   const [entity] = await db
     .insert(userCourseProgress)
     .values({
-      userId: getTokenOwner(),
+      userId: userId || getTokenOwner(),
       coursePackId,
       courseId,
       statementIndex,

apps/client/api/user.ts

@@ -18,3 +18,7 @@ export async function fetchCurrentUser() {
     avatar: logtoUserInfo!.picture || "", // 添加 avatar 字段，默认值为 picture （ picture 这个属性不够清晰 不喜欢）
   } as User;
 }
+export async function getUserByUsername(username: string) {
+  // `/user/username/${username}` is better ?
+  return await http.get<unknown, any>(`/user/${username}`);
+}

apps/client/api/userCourseProgress.ts

@@ -26,8 +26,14 @@ export async function fetchUpdateCourseProgress(userProgressUpdate: UserProgress
   );
 }
 
-export async function fetchUserRecentCoursePacks() {
-  return await http.get<UserRecentCoursePackResponse[], UserRecentCoursePackResponse[]>(
+export async function fetchUserRecentCoursePacks(userId: string, limit = 4) {
+  return await http.get<unknown, UserRecentCoursePackResponse[]>(
     `/user-course-progress/recent-course-packs`,
+    {
+      params: {
+        userId,
+        limit,
+      },
+    },
   );
 }

apps/client/api/userLearnRecord.ts

@@ -10,11 +10,8 @@ export interface UserLearnRecordResponse {
   list: Array<{ day: string; count: number }>;
 }
 
-export async function fetchLearnRecord(params: UserLearnRecord) {
-  return await http.get<UserLearnRecordResponse, UserLearnRecordResponse>(
-    `/user-learn-record/finishCount`,
-    {
-      params,
-    },
-  );
+export async function fetchLearnRecord(params: UserLearnRecord & { userId: string }) {
+  return await http.get<unknown, UserLearnRecordResponse>(`/user-learn-record/finishCount`, {
+    params,
+  });
 }

apps/client/components/rank/RankingItem.vue

@@ -6,15 +6,29 @@
       class="w-16"
       :rank="rank"
     />
-    <div class="flex-1 truncate text-center">{{ username || "匿名" }}</div>
+    <div
+      class="tooltip flex-1 cursor-pointer truncate text-center"
+      data-tippy-content="看看这小子最近学了啥"
+      @click="toUserHomePage"
+      @mouseenter="$lazyTippy"
+    >
+      {{ username || "匿名" }}
+    </div>
     <div class="w-16 text-right">{{ count }} 课</div>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import { useRouter } from "nuxt/app";
+
+const props = defineProps({
   rank: Number,
   username: String,
   count: Number,
 });
+const router = useRouter();
+const toUserHomePage = () => {
+  const { href } = router.resolve(`/${props.username}`);
+  window.open(href, "_blank");
+};
 </script>

apps/client/components/Home/RecentCoursePack.vue → apps/client/components/user-home/RecentCoursePack.vue

@@ -29,7 +29,10 @@
             <p class="my-2 line-clamp-2 min-h-[3em] text-sm text-gray-500">
               {{ coursePack.description }}
             </p>
-            <div class="flex justify-between">
+            <div
+              v-if="isSelf"
+              class="flex justify-between"
+            >
               <button
                 class="btn btn-sm tw-btn-blue"
                 @click="handleGotoCourseList(coursePack.coursePackId)"
@@ -61,11 +64,20 @@
 
 <script setup lang="ts">
 import { navigateTo } from "#app";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
+import { useUserStore } from "~/store/user";
 import { useRecentCoursePack } from "./helper";
 
-const { coursePacks, fetchCoursePacks } = useRecentCoursePack();
+const props = defineProps<{
+  userId: string;
+}>();
+
+const { coursePacks, fetchCoursePacks } = useRecentCoursePack({ userId: props.userId });
+
+const userStore = useUserStore();
+
+const isSelf = userStore.isSelf(props.userId);
 
 const isLoading = ref(false);
 

apps/client/components/Home/helper.ts → apps/client/components/user-home/helper.ts

@@ -5,9 +5,16 @@ import { fetchUserRecentCoursePacks } from "~/api/userCourseProgress";
 
 const coursePacks = ref<UserRecentCoursePackResponse[]>([]);
 
-export function useRecentCoursePack() {
+interface UseRecentCoursePackOptions {
+  userId: string;
+  limit?: number;
+}
+
+export function useRecentCoursePack(options: UseRecentCoursePackOptions) {
+  const { userId, limit = 4 } = options || {};
+
   async function fetchCoursePacks() {
-    coursePacks.value = await fetchUserRecentCoursePacks();
+    coursePacks.value = await fetchUserRecentCoursePacks(userId, limit);
   }
 
   return {

apps/client/components/Home/index.vue → apps/client/components/user-home/index.vue

@@ -8,16 +8,13 @@
         <!-- 通过给定高度来自适应拉伸图片，如果图片不存在或者加载失败则显示外层的背景色（没有宽度） -->
         <img
           class="h-full object-cover"
-          :src="userStore.user?.avatar"
+          :src="user?.avatar"
         />
       </div>
       <div class="mt-4 truncate">
-        <div class="flex gap-2">
-          <div class="text-3xl font-medium">{{ userStore.user?.username }}</div>
-          <MembershipBadge></MembershipBadge>
-        </div>
+        <div class="text-3xl font-medium">{{ user?.username }}</div>
         <div class="text-md text-gray-400">
-          {{ userStore.user?.name }}
+          {{ user?.name }}
         </div>
       </div>
       <hr class="my-5 dark:border-gray-700" />
@@ -36,47 +33,46 @@
       <div class="mb-4 flex justify-between border-b pb-2 dark:border-gray-700">
         <div class="text-xl font-medium">最近使用的课程包</div>
         <NuxtLink
+          v-if="isSelf"
           href="/course-pack"
           class="link text-blue-500 no-underline hover:opacity-75"
-          >更多课程包
+        >
+          更多课程包
         </NuxtLink>
       </div>
-      <HomeRecentCoursePack />
-      <HomeCalendarGraph
+      <RecentCoursePack :userId="user?.id" />
+      <CalendarGraph
         class="mt-10"
         :data="learnRecord.list"
         :totalCount="learnRecord.totalCount"
-        @toggleYear="toggleYear"
+        @toggleYear="onToggleYear"
       />
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import { ref } from "vue";
 
+<script setup lang="ts">
+import { getUserByUsername } from "~/api/user";
 import { useLearnRecord } from "~/composables/learnRecord";
-import { type CalendarData } from "~/composables/user/calendarGraph";
 import { useUserStore } from "~/store/user";
+import CalendarGraph from "./CalendarGraph.vue";
+import RecentCoursePack from "./RecentCoursePack.vue";
 
-const userStore = useUserStore();
-const { learnRecord, setupLearnRecord, setQueryYear } = useLearnRecord();
-const { toggleYear } = useCalendarGraph();
+const props = defineProps<{
+  username: string;
+}>();
 
-function useCalendarGraph() {
-  const data = ref<CalendarData[]>([]);
-  const totalCount = ref<number>(0);
+const user = await getUserByUsername(props.username);
 
-  async function toggleYear(year?: number) {
-    setQueryYear(year);
-    setupLearnRecord();
-  }
+const isSelf = useUserStore().isSelf(() => user?.id);
+const { learnRecord, year } = useLearnRecord({ userId: user?.id });
 
-  return {
-    data,
-    totalCount,
-    toggleYear,
-  };
-}
+const onToggleYear = (value?: number) => {
+  if (!value) {
+    return;
+  }
+  year.value = value!;
+};
 </script>
 
 <style scoped></style>

apps/client/composables/learnRecord.ts

@@ -1,46 +1,58 @@
-import { ref } from "vue";
+import type { MaybeRef } from "vue";
+
+import { refDebounced } from "@vueuse/core";
+import { ref, toValue, watch } from "vue";
 
 import type { UserLearnRecordResponse } from "~/api/userLearnRecord";
 import { fetchLearnRecord } from "~/api/userLearnRecord";
+import { useUserStore } from "~/store/user";
 
-let year: number | undefined = 0;
-const learnRecord = ref<UserLearnRecordResponse>({
-  list: [],
-  totalCount: 0,
-});
-let isSetup = false;
-
-export function useLearnRecord() {
-  function setQueryYear(val?: number) {
-    if (year !== val) {
-      year = val;
-      isSetup = false;
-    }
-  }
+interface UseLearnRecordOptions {
+  year?: MaybeRef<number>;
+  /**
+   * @default string current user
+   */
+  userId?: string;
+}
+
+export function useLearnRecord(options: UseLearnRecordOptions) {
+  const userStore = useUserStore();
+  const { userId = userStore.userInfo?.sub! } = options || {};
+
+  const learnRecord = ref<UserLearnRecordResponse>({
+    list: [],
+    totalCount: 0,
+  });
+
+  const year = ref(options?.year || new Date().getFullYear());
+  const debouncedYear = refDebounced(year, 1500);
 
   function getQuery() {
+    const yearStr = toValue(year);
     return {
-      startDate: year ? `${year}-01-01` : undefined,
-      endDate: year ? `${year}-12-31` : undefined,
+      userId,
+      startDate: yearStr ? `${yearStr}-01-01` : undefined,
+      endDate: yearStr ? `${yearStr}-12-31` : undefined,
     };
   }
 
   async function updateLearnRecord() {
     const res = await fetchLearnRecord(getQuery());
     learnRecord.value = res;
   }
-
-  async function setupLearnRecord() {
-    if (isSetup) return;
-    isSetup = true;
-    const res = await fetchLearnRecord(getQuery());
-    learnRecord.value = res;
-  }
+  watch(
+    debouncedYear,
+    () => {
+      updateLearnRecord();
+    },
+    {
+      immediate: true,
+    },
+  );
 
   return {
+    year,
     learnRecord,
     updateLearnRecord,
-    setQueryYear,
-    setupLearnRecord,
   };
 }