Merge pull request #1938 from visuddhinanda/agile

添加头像背景色

dashboard/src/components/anthology/AnthologyList.tsx

@@ -21,7 +21,7 @@ import { PublicityValueEnum } from "../../components/studio/table";
 import { useEffect, useRef, useState } from "react";
 import Share, { EResType } from "../share/Share";
 
-import StudioName, { IStudio } from "../auth/StudioName";
+import StudioName, { IStudio } from "../auth/Studio";
 import { IResNumberResponse, renderBadge } from "../channel/ChannelTable";
 import { fullUrl, getSorterUrl } from "../../utils";
 

dashboard/src/components/api/Article.ts

@@ -1,4 +1,4 @@
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { IUser } from "../auth/User";
 import { IChannel } from "../channel/Channel";
 import { ITocPathNode } from "../corpus/TocPath";

dashboard/src/components/api/Channel.ts

@@ -1,4 +1,4 @@
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { TRole } from "./Auth";
 export type TChannelType =
   | "translation"

dashboard/src/components/api/Corpus.ts

@@ -1,4 +1,4 @@
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { IUser } from "../auth/User";
 import { IChannel } from "../channel/Channel";
 import { TContentType } from "../discussion/DiscussionCreate";

dashboard/src/components/api/Course.ts

@@ -1,4 +1,4 @@
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { IUser } from "../auth/User";
 import { IUserRequest, TRole } from "./Auth";
 

dashboard/src/components/api/Dict.ts

@@ -1,4 +1,4 @@
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { IUser } from "../auth/User";
 import { ICaseListData } from "../dict/CaseList";
 

dashboard/src/components/api/Group.ts

@@ -1,4 +1,4 @@
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { IUserRequest, TRole } from "./Auth";
 
 export interface IGroupRequest {

dashboard/src/components/api/Term.ts

@@ -1,4 +1,4 @@
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { IUser } from "../auth/User";
 import { IChannel } from "../channel/Channel";
 import { TRole } from "./Auth";

dashboard/src/components/api/Transfer.ts

@@ -1,4 +1,4 @@
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { IUser } from "../auth/User";
 import { IChannel } from "../channel/Channel";
 import { TResType } from "../discussion/DiscussionListCard";

dashboard/src/components/article/AnthologyCard.tsx

@@ -3,8 +3,8 @@ import { Row, Col } from "antd";
 import { Card } from "antd";
 import { Typography } from "antd";
 
-import StudioName from "../auth/StudioName";
-import type { IStudio } from "../auth/StudioName";
+import StudioName from "../auth/Studio";
+import type { IStudio } from "../auth/Studio";
 import type { ListNodeData } from "./EditableTree";
 
 const { Title, Text } = Typography;

dashboard/src/components/article/AnthologyDetail.tsx

@@ -7,7 +7,7 @@ import type {
   IAnthologyResponse,
 } from "../api/Article";
 import type { IAnthologyData } from "./AnthologyCard";
-import StudioName from "../auth/StudioName";
+import StudioName from "../auth/Studio";
 import TimeShow from "../general/TimeShow";
 import Marked from "../general/Marked";
 import AnthologyTocTree from "../anthology/AnthologyTocTree";

dashboard/src/components/article/AnthologyStudioList.tsx

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { List, Space, Card } from "antd";
 
-import StudioName from "../auth/StudioName";
+import StudioName from "../auth/Studio";
 import type { IAnthologyStudioListApiResponse } from "../api/Article";
 import type { IStudioApiResponse } from "../api/Auth";
 import { get } from "../../request";

dashboard/src/components/article/ArticleEdit.tsx

@@ -21,7 +21,7 @@ import PublicitySelect from "../../components/studio/PublicitySelect";
 
 import MDEditor from "@uiw/react-md-editor";
 import ArticlePrevDrawer from "../../components/article/ArticlePrevDrawer";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 
 interface IFormData {
   uid: string;

dashboard/src/components/article/ArticleList.tsx

@@ -33,7 +33,7 @@ import { ArticleTplModal } from "../template/Builder/ArticleTpl";
 import Share, { EResType } from "../../components/share/Share";
 import AddToAnthology from "../../components/article/AddToAnthology";
 import AnthologySelect from "../../components/anthology/AnthologySelect";
-import StudioName, { IStudio } from "../../components/auth/StudioName";
+import StudioName, { IStudio } from "../auth/Studio";
 import { IUser } from "../../components/auth/User";
 import { getSorterUrl } from "../../utils";
 import TransferCreate from "../transfer/TransferCreate";

dashboard/src/components/article/ArticleListPublic.tsx

@@ -6,7 +6,7 @@ import { ActionType, ProList } from "@ant-design/pro-components";
 import { get } from "../../request";
 import { IArticleListResponse } from "../api/Article";
 
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { IUser } from "../auth/User";
 import TimeShow from "../general/TimeShow";
 

dashboard/src/components/article/ArticleView.tsx

@@ -5,7 +5,7 @@ import TocPath, { ITocPathNode } from "../corpus/TocPath";
 import PaliChapterChannelList from "../corpus/PaliChapterChannelList";
 import { ArticleType } from "./Article";
 import VisibleObserver from "../general/VisibleObserver";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 
 const { Paragraph, Title, Text } = Typography;
 export interface IFirstAnthology {

dashboard/src/components/auth/StudioName.tsx → dashboard/src/components/auth/Studio.tsx

@@ -2,6 +2,7 @@ import { Avatar, Space } from "antd";
 
 import StudioCard from "./StudioCard";
 
+const avatarColor = ["indianred", "blueviolet", "#87d068", "#108ee9"];
 export interface IStudio {
   id: string;
   nickName?: string;
@@ -11,19 +12,23 @@ export interface IStudio {
 }
 interface IWidget {
   data?: IStudio;
-  showAvatar?: boolean;
-  showName?: boolean;
+  hideAvatar?: boolean;
+  hideName?: boolean;
   popOver?: React.ReactNode;
   onClick?: Function;
 }
-const StudioNameWidget = ({
+const StudioWidget = ({
   data,
-  showAvatar = true,
-  showName = true,
+  hideAvatar = false,
+  hideName = false,
   popOver,
   onClick,
 }: IWidget) => {
-  console.debug("studio", data);
+  let colorIndex = 0;
+  if (data?.nickName) {
+    colorIndex = data?.nickName?.charCodeAt(0) % avatarColor.length;
+  }
+
   return (
     <StudioCard popOver={popOver} studio={data}>
       <Space
@@ -33,17 +38,21 @@ const StudioNameWidget = ({
           }
         }}
       >
-        {showAvatar ? (
-          <Avatar size="small" src={data?.avatar}>
+        {hideAvatar ? (
+          <></>
+        ) : (
+          <Avatar
+            size="small"
+            src={data?.avatar}
+            style={{ backgroundColor: avatarColor[colorIndex] }}
+          >
             {data?.nickName?.slice(0, 2)}
           </Avatar>
-        ) : (
-          <></>
         )}
-        {showName ? data?.nickName : ""}
+        {hideName ? "" : data?.nickName}
       </Space>
     </StudioCard>
   );
 };
 
-export default StudioNameWidget;
+export default StudioWidget;

dashboard/src/components/auth/StudioCard.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl";
 import { Popover, Avatar } from "antd";
-import { IStudio } from "./StudioName";
+import { IStudio } from "./Studio";
 import { Link } from "react-router-dom";
 import React from "react";
 
@@ -21,8 +21,12 @@ const StudioCardWidget = ({ studio, children, popOver }: IWidget) => {
           <>
             <div style={{ display: "flex" }}>
               <div style={{ paddingRight: 8 }}>
-                <Avatar style={{ backgroundColor: "#87d068" }} size="small">
-                  {studio?.nickName?.slice(0, 1)}
+                <Avatar
+                  style={{ backgroundColor: "#87d068" }}
+                  size="large"
+                  src={studio?.avatar}
+                >
+                  {studio?.nickName?.slice(0, 2)}
                 </Avatar>
               </div>
               <div>
@@ -43,6 +47,7 @@ const StudioCardWidget = ({ studio, children, popOver }: IWidget) => {
         )
       }
       placement="bottomRight"
+      arrowPointAtCenter
     >
       {children}
     </Popover>

dashboard/src/components/channel/ChannelList.tsx

@@ -6,7 +6,7 @@ import type { IChannelApiData } from "../api/Channel";
 import { IApiResponseChannelList } from "../api/Corpus";
 import { get } from "../../request";
 import ChannelListItem from "./ChannelListItem";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 
 export interface ChannelFilterProps {
   chapterProgress: number;

dashboard/src/components/channel/ChannelListItem.tsx

@@ -2,7 +2,7 @@ import { Space } from "antd";
 import { Avatar } from "antd";
 
 import type { IChannelApiData } from "../api/Channel";
-import { IStudio } from "../auth/StudioName";
+import Studio, { IStudio } from "../auth/Studio";
 
 interface IWidget {
   channel: IChannelApiData;
@@ -17,14 +17,11 @@ const ChannelListItemWidget = ({
   showProgress,
   showLike,
 }: IWidget) => {
-  const studioName = studio.nickName?.slice(0, 2);
   return (
-    <>
-      <Space>
-        <Avatar size="small">{studioName}</Avatar>
-        {channel.name}
-      </Space>
-    </>
+    <Space>
+      <Studio data={studio} hideName />
+      {channel.name}
+    </Space>
   );
 };
 

dashboard/src/components/channel/ChannelMy.tsx

@@ -27,7 +27,7 @@ import {
 } from "../api/Channel";
 import { IItem, IProgressRequest } from "./ChannelPickerTable";
 import { LockIcon } from "../../assets/icon";
-import StudioName from "../auth/StudioName";
+import StudioName from "../auth/Studio";
 import ProgressSvg from "./ProgressSvg";
 
 import { IChannel } from "./Channel";
@@ -377,10 +377,7 @@ const ChannelMy = ({
                       </Space>
                       <Button type="link">
                         <Space>
-                          <StudioName
-                            data={node.channel.studio}
-                            showName={false}
-                          />
+                          <StudioName data={node.channel.studio} hideName />
                           {node.channel.title}
                         </Space>
                       </Button>

dashboard/src/components/channel/ChannelPickerTable.tsx

@@ -14,7 +14,7 @@ import {
 import { IApiResponseChannelList, IFinal, TChannelType } from "../api/Channel";
 import { post } from "../../request";
 import { LockIcon } from "../../assets/icon";
-import StudioName, { IStudio } from "../auth/StudioName";
+import StudioName, { IStudio } from "../auth/Studio";
 import ProgressSvg from "./ProgressSvg";
 import { IChannel } from "./Channel";
 import { ArticleType } from "../article/Article";
@@ -336,7 +336,7 @@ const ChannelPickerTableWidget = ({
                       }}
                     >
                       <Space>
-                        <StudioName data={entity.studio} showName={false} />
+                        <StudioName data={entity.studio} hideName />
                         {entity.title}
                       </Space>
                     </Button>

dashboard/src/components/channel/ChannelSelect.tsx

@@ -5,7 +5,7 @@ import { currentUser } from "../../reducers/current-user";
 
 import { get } from "../../request";
 import { IApiResponseChannelList } from "../api/Channel";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 
 interface IOption {
   value: string;

dashboard/src/components/channel/ChannelTable.tsx

@@ -22,7 +22,7 @@ import { useEffect, useRef, useState } from "react";
 import { TRole } from "../../components/api/Auth";
 import ShareModal from "../../components/share/ShareModal";
 import { EResType } from "../../components/share/Share";
-import StudioName, { IStudio } from "../../components/auth/StudioName";
+import StudioName, { IStudio } from "../auth/Studio";
 import StudioSelect from "../../components/channel/StudioSelect";
 import { IChannel } from "./Channel";
 import { getSorterUrl } from "../../utils";

dashboard/src/components/channel/StudioSelect.tsx

@@ -1,7 +1,7 @@
 import { Select } from "antd";
 import { useEffect, useState } from "react";
 import { get } from "../../request";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 
 interface IStudioListResponse {
   ok: boolean;

dashboard/src/components/corpus/ChapterCard.tsx

@@ -7,7 +7,7 @@ import TocPath from "../corpus/TocPath";
 import TagArea from "../tag/TagArea";
 import type { IChannelApiData } from "../api/Channel";
 import ChannelListItem from "../channel/ChannelListItem";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { ITagData } from "./ChapterTag";
 
 const { Title, Paragraph, Text } = Typography;

dashboard/src/components/corpus/ChapterInChannel.tsx

@@ -8,7 +8,7 @@ import ChannelListItem from "../channel/ChannelListItem";
 import TimeShow from "../general/TimeShow";
 import { useIntl } from "react-intl";
 import { Link, useSearchParams } from "react-router-dom";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import { useState } from "react";
 import { ProgressOutlinedIcon } from "../../assets/icon";
 import { ArticleMode } from "../article/Article";

dashboard/src/components/corpus/SentHistory.tsx

@@ -7,7 +7,7 @@ import { IUser } from "../auth/UserName";
 import TimeShow from "../general/TimeShow";
 import { IChannel } from "../channel/Channel";
 import { MergeIcon2 } from "../../assets/icon";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 
 const { Paragraph } = Typography;
 

dashboard/src/components/home/ChapterNewList.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { get } from "../../request";
 import { IChapterData, IChapterListResponse } from "../api/Corpus";
-import StudioName from "../auth/StudioName";
+import StudioName from "../auth/Studio";
 import { ChapterData } from "../corpus/ChapterCard";
 const { Title, Text, Paragraph } = Typography;
 

dashboard/src/components/template/SentEdit.tsx

@@ -1,6 +1,6 @@
 import { Card } from "antd";
 import { useEffect, useRef, useState } from "react";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 
 import type { IUser } from "../auth/User";
 import { IChannel } from "../channel/Channel";

dashboard/src/components/template/SentEdit/SentCell.tsx

@@ -23,7 +23,7 @@ import { IDeleteResponse } from "../../api/Article";
 import { delete_ } from "../../../request";
 
 import "./style.css";
-import StudioName from "../../auth/StudioName";
+import StudioName from "../../auth/Studio";
 import CopyToModal from "../../channel/CopyToModal";
 import store from "../../../store";
 import { randomString } from "../../../utils";
@@ -291,7 +291,7 @@ const SentCellWidget = ({
             <div style={{ marginRight: 8 }}>
               <StudioName
                 data={sentData.studio}
-                showName={false}
+                hideName
                 popOver={
                   compact ? <Details data={sentData} isPr={isPr} /> : undefined
                 }

dashboard/src/components/term/TermItem.tsx

@@ -11,7 +11,7 @@ import UserName from "../auth/UserName";
 import TimeShow from "../general/TimeShow";
 import TermModal from "./TermModal";
 import { useEffect, useState } from "react";
-import StudioName from "../auth/StudioName";
+import StudioName from "../auth/Studio";
 import { Link, useNavigate } from "react-router-dom";
 import { useAppSelector } from "../../hooks";
 import { click, clickedTerm } from "../../reducers/term-click";

dashboard/src/components/transfer/TransferList.tsx

@@ -6,7 +6,7 @@ import { ActionType, ProList } from "@ant-design/pro-components";
 import { renderBadge } from "../channel/ChannelTable";
 import User, { IUser } from "../auth/User";
 import { IChannel } from "../channel/Channel";
-import { IStudio } from "../auth/StudioName";
+import { IStudio } from "../auth/Studio";
 import UserName from "../auth/UserName";
 import TimeShow from "../general/TimeShow";
 import {

dashboard/src/pages/studio/group/list.tsx

@@ -15,7 +15,7 @@ import { RoleValueEnum } from "../../../components/studio/table";
 import { IDeleteResponse } from "../../../components/api/Article";
 import { useEffect, useRef, useState } from "react";
 
-import StudioName, { IStudio } from "../../../components/auth/StudioName";
+import StudioName, { IStudio } from "../../../components/auth/Studio";
 import { renderBadge } from "../../../components/channel/ChannelTable";
 import { getSorterUrl } from "../../../utils";