:construction: group 基本完成

dashboard/src/components/studio/group/GroupFile.tsx

@@ -0,0 +1,109 @@
+import { useIntl } from "react-intl";
+import { useState } from 'react';
+import { ProList } from '@ant-design/pro-components';
+import { Space, Tag, Button, Layout } from 'antd';
+const {  Content } = Layout;
+
+const defaultData = [
+	{
+	  id: '1',
+	  name: '庄春江工作站',
+	  tag:[{title:"可编辑",color:"success"}],
+	  image:
+		'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+		description: 'IAPT|2022-1-3',
+	},
+	{
+	  id: '2',
+	  name: '元亨寺·CBETA',
+	  tag:[{title:"可编辑",color:"success"}],
+	  image:
+		'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+		description: '我是一条测试的描述',
+	},
+	{
+	  id: '3',
+	  name: '叶均居士',
+	  tag:[{title:"只读",color:"default"}],
+	  image:
+		'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+		description: '我是一条测试的描述',
+	},
+	{
+	  id: '4',
+	  name: '玛欣德尊者',
+	  tag:[{title:"只读",color:"default"}],
+	  image:
+		'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+		description: '我是一条测试的描述',
+	},
+  ];
+  type DataItem = typeof defaultData[number];
+  type IWidgetGroupFile ={
+	groupid?: string
+}
+  const Widget = ({groupid = ''}: IWidgetGroupFile) => {
+	const intl = useIntl();//i18n
+	const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
+
+  return (
+			<Content>
+
+				<Space>{groupid}</Space>
+				<ProList<DataItem>
+					rowKey="id"
+					headerTitle={intl.formatMessage({ id: "group.files" })}
+					dataSource={dataSource}
+					showActions="hover"
+					onDataSourceChange={setDataSource}
+					metas={{
+						title: {
+						dataIndex: 'name',
+						},
+						avatar: {
+						dataIndex: 'image',
+						editable: false,
+						},
+						description: {
+						dataIndex: 'description',
+						},
+						content: {
+							dataIndex: 'content',
+							editable: false,
+						},
+						subTitle: {
+						render: (text, row, index, action) => {
+							const showtag = row.tag.map((item,key) => {
+								return <Tag color={item.color}>{item.title}</Tag>
+							});
+							return (
+							<Space size={0}>
+								{showtag}
+							</Space>
+							);
+						},
+						},
+						actions: {
+						render: (text, row, index, action) => [
+							<Button
+							onClick={() => {
+								action?.startEditable(row.id);
+							}}
+							key="link"
+							>
+							删除
+							</Button>,
+						],
+						},
+					}}
+					pagination={{
+						showQuickJumper: true,
+						showSizeChanger: true,
+					  }}
+				/>			
+			</Content>
+
+  );
+};
+
+export default Widget;

dashboard/src/components/studio/group/GroupMember.tsx

@@ -0,0 +1,101 @@
+import { useIntl } from "react-intl";
+import { useState } from 'react';
+import { ProList } from '@ant-design/pro-components';
+import { Space, Tag, Button, Layout } from 'antd';
+const {  Content } = Layout;
+
+const defaultData = [
+	{
+	  id: '1',
+	  name: '小僧善巧',
+	  tag:[{title:"管理员",color:"success"}],
+	  image:'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+	},
+	{
+	  id: '2',
+	  name: '无语',
+	  tag:[{title:"管理员",color:"success"}],
+	  image:'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+	},
+	{
+	  id: '3',
+	  name: '慧欣',
+	  tag:[],
+	  image:'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+	},
+	{
+	  id: '4',
+	  name: '谭博文',
+	  tag:[],
+	  image:'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+	},
+	{
+		id: '4',
+		name: '豆沙猫',
+		tag:[],
+		image:'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+	},  
+	{
+		id: '4',
+		name: 'visuddhinanda',
+		tag:[],
+		image:'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+	}, 	
+	];
+  type DataItem = typeof defaultData[number];
+  type IWidgetGroupFile ={
+	groupid?: string
+}
+  const Widget = ({groupid = ''}: IWidgetGroupFile) => {
+	const intl = useIntl();//i18n
+	const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
+
+  return (
+			<Content>
+				<Space>{groupid}</Space>
+				<ProList<DataItem>
+					rowKey="id"
+					headerTitle={intl.formatMessage({ id: "group.member" })}
+					dataSource={dataSource}
+					showActions="hover"
+					onDataSourceChange={setDataSource}
+					metas={{
+						title: {
+						dataIndex: 'name',
+						},
+						avatar: {
+						dataIndex: 'image',
+						editable: false,
+						},
+						subTitle: {
+						render: (text, row, index, action) => {
+							const showtag = row.tag.map((item,key) => {
+								return <Tag color={item.color}>{item.title}</Tag>
+							});
+							return (
+							<Space size={0}>
+								{showtag}
+							</Space>
+							);
+						},
+						},
+						actions: {
+						render: (text, row, index, action) => [
+							<Button
+							onClick={() => {
+								action?.startEditable(row.id);
+							}}
+							key="link"
+							>
+							删除
+							</Button>,
+						],
+						},
+					}}
+				/>			
+			</Content>
+
+  );
+};
+
+export default Widget;

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

@@ -1,8 +1,9 @@
 import { useParams,Link } from "react-router-dom";
 import { useIntl } from "react-intl";
+import { useState } from 'react';
 import { ProList } from '@ant-design/pro-components';
 import { Space, Tag, Button, Layout,Breadcrumb } from 'antd';
-import { useState } from 'react';
+
 
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
@@ -54,25 +55,22 @@ const Widget = () => {
 	const linkGroup = `${linkStudio}/group`;
   return (
     <Layout>
-		
 		<HeadBar/>
 		<Layout>
 			<LeftSider selectedKeys="group"/>
 			<Content>
-				<Layout>
-					<Breadcrumb>
-						<Breadcrumb.Item>
-							<Link to={linkStudio}>{intl.formatMessage({ id: "columns.studio.title" })}</Link>
-						</Breadcrumb.Item>
-						<Breadcrumb.Item>
-							{intl.formatMessage({ id: "columns.studio.collaboration.title" })}
-						</Breadcrumb.Item>
-						<Breadcrumb.Item >
-							<Link to={linkGroup}>{intl.formatMessage({ id: "columns.studio.group.title" })}</Link>
-						</Breadcrumb.Item>
-						<Breadcrumb.Item>列表</Breadcrumb.Item>
-					</Breadcrumb>
-				</Layout>
+				<Breadcrumb>
+					<Breadcrumb.Item>
+						<Link to={linkStudio}>{intl.formatMessage({ id: "columns.studio.title" })}</Link>
+					</Breadcrumb.Item>
+					<Breadcrumb.Item>
+						{intl.formatMessage({ id: "columns.studio.collaboration.title" })}
+					</Breadcrumb.Item>
+					<Breadcrumb.Item >
+						<Link to={linkGroup}>{intl.formatMessage({ id: "columns.studio.group.title" })}</Link>
+					</Breadcrumb.Item>
+					<Breadcrumb.Item>列表</Breadcrumb.Item>
+				</Breadcrumb>
 				<Layout>
 					<ProList<DataItem>
 					rowKey="id"
@@ -90,10 +88,8 @@ const Widget = () => {
 						title: {
 						dataIndex: 'name',
 						render: (text, row, index, action) => {
-							let link = `show/${row.id}`;
-
 							return (
-								<Link to ={link}>{row.name}</Link>
+								<Link to ={row.id}>{row.name}</Link>
 							);
 						},
 						},
@@ -137,7 +133,7 @@ const Widget = () => {
 				</Layout>				
 			</Content>
 		</Layout>
-      <Footer/>
+        <Footer/>
     </Layout>
   );
 };

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

@@ -1,24 +1,46 @@
-import { useParams } from "react-router-dom";
+import { useParams,Link } from "react-router-dom";
 import { useIntl } from "react-intl";
-
+import {  Layout,Breadcrumb } from 'antd';
+import { Col, Row} from 'antd';
 import HeadBar from "../../../components/studio/HeadBar";
 import LeftSider from "../../../components/studio/LeftSider";
 import Footer from "../../../components/studio/Footer";
+import GroupFile from "../../../components/studio/group/GroupFile";
+import GroupMember from "../../../components/studio/group/GroupMember";
 
+const {  Content } = Layout;
 
 const Widget = () => {
 	const intl = useIntl();
 	const { studioname,groupid } = useParams();//url 参数
+	const linkStudio = `/studio/${studioname}`;
+	const linkGroup = `${linkStudio}/group`;
   return (
-    <div>
+    <Layout>
 		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.channel.title" })}/show/{groupid}</h2>
-      <div>
-		群组详情
-      </div>
-      <Footer/>
-    </div>
+		<Layout>
+			<LeftSider selectedKeys="group"/>
+			<Content>
+				<Breadcrumb>
+					<Breadcrumb.Item>
+						<Link to={linkStudio}>{intl.formatMessage({ id: "columns.studio.title" })}</Link>
+					</Breadcrumb.Item>
+					<Breadcrumb.Item>
+						{intl.formatMessage({ id: "columns.studio.collaboration.title" })}
+					</Breadcrumb.Item>
+					<Breadcrumb.Item >
+						<Link to={linkGroup}>{intl.formatMessage({ id: "columns.studio.group.title" })}</Link>
+					</Breadcrumb.Item>
+					<Breadcrumb.Item>{groupid}</Breadcrumb.Item>
+				</Breadcrumb>
+				<Row>
+					<Col flex="auto"><GroupFile groupid={groupid}/></Col>
+					<Col flex="400px"><GroupMember groupid={groupid}/></Col>
+				</Row>	
+			</Content>
+		</Layout>
+        <Footer/>
+    </Layout>
   );
 };