From e8105fa51e32244eefc63a074fffd77cea22d46f Mon Sep 17 00:00:00 2001
From: zhwcreate <3331598351@qq.com>
Date: Wed, 9 Oct 2024 00:06:52 +0800
Subject: [PATCH] feat: cooperatorAvatarList

---
 .../collaboratorAvatarList/index.tsx          | 37 +++++++++++++++++++
 .../cooperation/cooperationEditor/index.tsx   |  1 +
 src/components/cooperation/header/index.tsx   | 14 ++++++-
 .../cooperation/taskDescription/index.tsx     |  1 +
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/components/cooperation/collaboratorAvatarList/index.tsx

diff --git a/src/components/cooperation/collaboratorAvatarList/index.tsx b/src/components/cooperation/collaboratorAvatarList/index.tsx
new file mode 100644
index 0000000..3dc2949
--- /dev/null
+++ b/src/components/cooperation/collaboratorAvatarList/index.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@/utils';
+
+interface AvatarCirclesProps {
+  className?: string;
+  avatarCount?: number;
+  avatarUrls: string[];
+}
+
+export const CollaboratorAvatarList = ({
+  avatarCount,
+  className,
+  avatarUrls,
+}: AvatarCirclesProps) => {
+  return (
+    <div className={cn('z-10 flex -space-x-3', className)}>
+      {avatarUrls.map((url, index) => (
+        <img
+          key={index}
+          className="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800"
+          src={url}
+          width={40}
+          height={40}
+          alt={`Avatar ${index + 1}`}
+        />
+      ))}
+      {avatarCount && (
+        <span className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black">
+          +{avatarCount}
+        </span>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/cooperation/cooperationEditor/index.tsx b/src/components/cooperation/cooperationEditor/index.tsx
index 4fd2ecf..8a272d4 100644
--- a/src/components/cooperation/cooperationEditor/index.tsx
+++ b/src/components/cooperation/cooperationEditor/index.tsx
@@ -91,6 +91,7 @@ export const CooperationEditor: React.FC<CooperationEditorProps> = ({ roomId })
             fontSize: 14,
             wordWrap: 'on',
             automaticLayout: true,
+            scrollBeyondLastLine: false,
           }}
           loading={<LoadingComponent />}
           onChange={handleEditorChange}
diff --git a/src/components/cooperation/header/index.tsx b/src/components/cooperation/header/index.tsx
index 91f3feb..00f9fe2 100644
--- a/src/components/cooperation/header/index.tsx
+++ b/src/components/cooperation/header/index.tsx
@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import React from 'react';
 
+import { CollaboratorAvatarList } from '@/components/cooperation/collaboratorAvatarList';
+
 interface ProjectInfo {
   [key: string]: any;
 }
@@ -9,9 +11,16 @@ interface HeaderProps {
   roomId: string;
 }
 
+const avatarUrls = [
+  'https://avatars.githubusercontent.com/u/16860528',
+  'https://avatars.githubusercontent.com/u/20110627',
+  'https://avatars.githubusercontent.com/u/106103625',
+  'https://avatars.githubusercontent.com/u/59228569',
+];
+
 export const CooperationHeader: React.FC<HeaderProps> = ({ roomId }) => {
   return (
-    <header className=" relative flex flex-row items-center w-[100vw] justify-between bg-transparent py-4 z-[999]">
+    <header className=" relative flex flex-row items-center w-[100vw] justify-between bg-transparent py-6 z-[999]">
       <Link className=" text-white font-bold ml-3" href="/">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -26,6 +35,9 @@ export const CooperationHeader: React.FC<HeaderProps> = ({ roomId }) => {
       <div className=" flex text-white items-center justify-center w-full absolute leading-[5vh] font-[500] text-[16px] pointer-events-none">
         {roomId}
       </div>
+      <div className=" pr-20">
+        <CollaboratorAvatarList avatarUrls={avatarUrls} />
+      </div>
     </header>
   );
 };
diff --git a/src/components/cooperation/taskDescription/index.tsx b/src/components/cooperation/taskDescription/index.tsx
index f7411b1..51f5665 100644
--- a/src/components/cooperation/taskDescription/index.tsx
+++ b/src/components/cooperation/taskDescription/index.tsx
@@ -37,6 +37,7 @@ export const TaskDescription: React.FC<TaskDescriptionProps> = ({}) => {
             wordWrap: 'on',
             automaticLayout: true,
             readOnly: true,
+            scrollBeyondLastLine: false,
             scrollbar: {
               horizontal: 'hidden',
               horizontalHasArrows: false,