refactor(web): 修改AvatarUploader交互，强化上传蒙层显示

web/src/components/AvatarUploader.tsx

@@ -1,9 +1,13 @@
 import { blobUrlToFile } from '@/utils/file-helper';
+import { Icon } from '@iconify/react';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { uploadFile, UploadFileResult, useAsyncRequest } from 'tailchat-shared';
 import { AvatarPicker } from './AvatarPicker';
 
 export const AvatarUploader: React.FC<{
+  circle?: boolean;
+  className?: string;
   onUploadSuccess: (fileInfo: UploadFileResult) => void;
 }> = React.memo((props) => {
   const [uploadProgress, setUploadProgress] = useState(0); // 0 - 100
@@ -31,13 +35,26 @@ export const AvatarUploader: React.FC<{
       disabled={loading}
       onChange={handlePickImage}
     >
-      {props.children}
+      <div className={clsx('group', props.className)}>
-      {loading && (
+        {props.children}
+        {loading && (
+          <div
+            className="absolute bottom-0 left-0 h-1"
+            style={{ width: `${uploadProgress}%` }}
+          />
+        )}
+
         <div
-          className="absolute bottom-0 left-0 h-1"
+          className={clsx(
-          style={{ width: `${uploadProgress}%` }}
+            'absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center transition opacity-0 group-hover:opacity-100',
-        />
+            {
-      )}
+              'rounded-1/2': props.circle,
+            }
+          )}
+        >
+          <Icon icon="mdi:camera-outline" />
+        </div>
+      </div>
     </AvatarPicker>
   );
 });

web/src/components/Modal.tsx

@@ -97,7 +97,7 @@ export const Modal: React.FC<ModalProps> = React.memo((props) => {
           >
             {closable === true && (
               <Icon
-                className="absolute right-2.5 top-3.5 text-xl z-10"
+                className="absolute right-2.5 top-3.5 text-xl z-10 cursor-pointer"
                 icon="mdi:close"
                 onClick={closeModal}
               />

web/src/components/modals/GroupDetail/Summary.tsx

@@ -47,7 +47,11 @@ export const GroupSummary: React.FC<{
 
       <div className="flex">
         <div className="w-1/3">
-          <AvatarUploader onUploadSuccess={handleGroupAvatarChange}>
+          <AvatarUploader
+            className="text-4xl"
+            circle={true}
+            onUploadSuccess={handleGroupAvatarChange}
+          >
             <Avatar size={128} name={groupInfo.name} src={groupInfo.avatar} />
           </AvatarUploader>
         </div>

web/src/components/modals/SettingsView/Account.tsx

@@ -66,7 +66,11 @@ export const SettingsAccount: React.FC = React.memo(() => {
     <div>
       <div className="flex">
         <div className="w-1/3">
-          <AvatarUploader onUploadSuccess={handleUserAvatarChange}>
+          <AvatarUploader
+            className="text-4xl"
+            circle={true}
+            onUploadSuccess={handleUserAvatarChange}
+          >
             <Avatar size={128} src={userInfo.avatar} name={userInfo.nickname} />
           </AvatarUploader>
         </div>