列表分为我创建的，我加入的

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

@@ -13,10 +13,21 @@ import { IGroupListResponse } from "../../../components/api/Group";
 import GroupCreate from "../../../components/group/GroupCreate";
 import { RoleValueEnum } from "../../../components/studio/table";
 import { IDeleteResponse } from "../../../components/api/Article";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { renderBadge } from "../channel/list";
+import StudioName, { IStudio } from "../../../components/auth/StudioName";
 
 const { Text } = Typography;
 
+interface IMyNumberResponse {
+  ok: boolean;
+  message: string;
+  data: {
+    my: number;
+    collaboration: number;
+  };
+}
+
 interface DataItem {
   sn: number;
   id: string;
@@ -24,12 +35,31 @@ interface DataItem {
   description: string;
   role: string;
   createdAt: number;
+  studio?: IStudio;
 }
 
 const Widget = () => {
   const intl = useIntl(); //i18n
   const { studioname } = useParams(); //url 参数
   const [openCreate, setOpenCreate] = useState(false);
+  const [activeKey, setActiveKey] = useState<React.Key | undefined>("my");
+  const [myNumber, setMyNumber] = useState<number>(0);
+  const [collaborationNumber, setCollaborationNumber] = useState<number>(0);
+  const [collaborator, setCollaborator] = useState<string>();
+
+  useEffect(() => {
+    /**
+     * 获取各种课程的数量
+     */
+    const url = `/v2/group-my-number?studio=${studioname}`;
+    console.log("url", url);
+    get<IMyNumberResponse>(url).then((json) => {
+      if (json.ok) {
+        setMyNumber(json.data.my);
+        setCollaborationNumber(json.data.collaboration);
+      }
+    });
+  }, [studioname]);
 
   const showDeleteConfirm = (id: string, title: string) => {
     Modal.confirm({
@@ -98,11 +128,31 @@ const Widget = () => {
                       {row.name}
                     </Link>
                   </div>
-                  <Text type="secondary">{row.description}</Text>
+                  <Text type="secondary"></Text>
                 </div>
               );
             },
           },
+          {
+            title: intl.formatMessage({
+              id: "forms.fields.owner.label",
+            }),
+            key: "owner",
+            search: false,
+            render: (text, row, index, action) => {
+              return <StudioName data={row.studio} />;
+            },
+          },
+          {
+            title: intl.formatMessage({
+              id: "forms.fields.description.label",
+            }),
+            dataIndex: "description",
+            key: "description",
+            search: false,
+            tip: "过长会自动收缩",
+            ellipsis: true,
+          },
           {
             title: intl.formatMessage({
               id: "forms.fields.role.label",
@@ -178,7 +228,7 @@ const Widget = () => {
         request={async (params = {}, sorter, filter) => {
           // TODO
           console.log(params, sorter, filter);
-          let url = `/v2/group?view=studio&name=${studioname}`;
+          let url = `/v2/group?view=studio&name=${studioname}&view2=${activeKey}`;
           const offset =
             ((params.current ? params.current : 1) - 1) *
             (params.pageSize ? params.pageSize : 20);
@@ -197,6 +247,7 @@ const Widget = () => {
               description: item.description,
               role: item.role,
               createdAt: date.getTime(),
+              studio: item.studio,
             };
           });
           console.log(items);
@@ -239,6 +290,40 @@ const Widget = () => {
             </Button>
           </Popover>,
         ]}
+        toolbar={{
+          menu: {
+            activeKey,
+            items: [
+              {
+                key: "my",
+                label: (
+                  <span>
+                    此工作室的
+                    {renderBadge(myNumber, activeKey === "my")}
+                  </span>
+                ),
+              },
+              {
+                key: "collaboration",
+                label: (
+                  <span>
+                    协作
+                    {renderBadge(
+                      collaborationNumber,
+                      activeKey === "collaboration"
+                    )}
+                  </span>
+                ),
+              },
+            ],
+            onChange(key) {
+              console.log("show course", key);
+              setActiveKey(key);
+              setCollaborator(undefined);
+              ref.current?.reload();
+            },
+          },
+        }}
       />
     </>
   );