studio 头部和导航菜单基本完成

dashboard/src/components/studio/HeadBar.tsx

@@ -1,14 +1,23 @@
 import { Link } from "react-router-dom";
-import { Space } from "antd";
+import { Col, Row,Input, Layout } from 'antd';
+const { Search } = Input;
+const { Header } = Layout;
+const onSearch = (value: string) => console.log(value);
 
 const Widget = () => {
   return (
-  	<div>
-		studio head bar
-		<Space>
-			<Link to="/">首页</Link>
-		</Space>
-	</div>
+	<Header className="header">
+		<Row>
+			<Col flex="100px">
+				<Link to="/">studio</Link>
+			</Col>
+			<Col flex="auto">
+				<Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
+			</Col>
+			<Col flex="200px">登录信息</Col>
+		</Row>		
+	</Header>
+
   );
 };
 

dashboard/src/components/studio/LeftSider.tsx

@@ -1,55 +1,116 @@
 import { Link } from "react-router-dom";
-import { Space } from "antd";
 import { useIntl } from "react-intl";
 import { useParams } from "react-router-dom";
+import type { MenuProps } from 'antd';
+import { Affix , Layout} from "antd";
+import { Menu } from 'antd';
+import { AppstoreOutlined, HomeOutlined, TeamOutlined } from '@ant-design/icons';
+
+const { Sider } = Layout;
+
+const onClick: MenuProps['onClick'] = e => {
+    console.log('click ', e);
+  };
+
+  type IWidgetHeadBar ={
+	selectedKeys?: string
+}
+const Widget = ({selectedKeys = ''}: IWidgetHeadBar) => {
+//Library head bar
+const intl = useIntl();//i18n
+const { studioname } = useParams();
+// TODO
+const linkPalicanon = "/studio/"+studioname+"/palicanon";
+const linkRecent = "/studio/"+studioname+"/recent";
+const linkChannel = "/studio/"+studioname+"/channel";
+const linkGroup = "/studio/"+studioname+"/group";
+const linkUserdict = "/studio/"+studioname+"/dict";
+const linkTerm = "/studio/"+studioname+"/term";
+const linkArticle = "/studio/"+studioname+"/article";
+const linkAnthology = "/studio/"+studioname+"/anthology";
+const linkAnalysis = "/studio/"+studioname+"/analysis";
+
+const items: MenuProps['items'] = [
+	{
+		label: "常用",
+		key: 'basic',
+		icon: <HomeOutlined />,
+		children:[
+			{
+				label: (<Link to = {linkPalicanon}>{intl.formatMessage({ id: "columns.studio.palicanon.title" })}</Link>),
+				key: 'palicanon',
+			},
+			{
+				label: (<Link to = {linkRecent}>{intl.formatMessage({ id: "columns.studio.recent.title" })}</Link>),
+				key: 'recent',
+			},
+			{
+				label: (<Link to = {linkChannel}>{intl.formatMessage({ id: "columns.studio.channel.title" })}</Link>),
+				key: 'channel',
+			  },
+			  {
+				label: (<Link to = {linkAnalysis}>{intl.formatMessage({ id: "columns.studio.analysis.title" })}</Link>),
+				key: 'analysis',
+			  },
+				  
+		]
+	  },
+	  {
+		label: "高级",
+		key: 'advance',
+		icon: <AppstoreOutlined/>,
+		children:[
+			{
+				label: (<Link to = {linkUserdict}>{intl.formatMessage({ id: "columns.studio.term.title" })}</Link>),
+				key: 'userdict',
+			  },
+			  {
+				label: (<Link to = {linkTerm}>{intl.formatMessage({ id: "columns.studio.userdict.title" })}</Link>),
+				key: 'term',
+			  },
+			  {
+				label: (<Link to = {linkArticle}>{intl.formatMessage({ id: "columns.studio.article.title" })}</Link>),
+				key: 'article',
+			  },
+			  {
+				label: (<Link to = {linkAnthology}>{intl.formatMessage({ id: "columns.studio.authology.title" })}</Link>),
+				key: 'authology',
+			  },
+		
+		],
+	  },
+	  {
+		label: "协作",
+		key: 'collaboration',
+		icon:<TeamOutlined />,
+		children:[
+			{
+				label: (<Link to = {linkGroup}>{intl.formatMessage({ id: "columns.studio.group.title" })}</Link>),
+				key: 'group',
+			  },
+		
+		]
+	  },
+]
 
-const Widget = () => {
-	//Library head bar
-	const intl = useIntl();//i18n
-	const { studioname } = useParams();
-	// TODO
-	const linkPalicanon = "/studio/"+studioname+"/palicanon";
-	const linkRecent = "/studio/"+studioname+"/recent";
-	const linkChannel = "/studio/"+studioname+"/channel";
-	const linkGroup = "/studio/"+studioname+"/group";
-	const linkUserdict = "/studio/"+studioname+"/dict";
-	const linkTerm = "/studio/"+studioname+"/term";
-	const linkArticle = "/studio/"+studioname+"/article";
-	const linkAnthology = "/studio/"+studioname+"/anthology";
-	const linkAnalysis = "/studio/"+studioname+"/analysis";
   return (
-  <div>
-	<Space>
-		<Link to={linkPalicanon}>
-			{intl.formatMessage({ id: "columns.studio.palicanon.title" })}
-		</Link>
-		<Link to={linkRecent}>
-			{intl.formatMessage({ id: "columns.studio.recent.title" })}
-		</Link>
-		<Link to={linkChannel}>
-			{intl.formatMessage({ id: "columns.studio.channel.title" })}
-		</Link>
-		<Link to={linkGroup}>
-			{intl.formatMessage({ id: "columns.studio.group.title" })}
-		</Link>
-		<Link to={linkUserdict}>
-			{intl.formatMessage({ id: "columns.studio.userdict.title" })}
-		</Link>
-		<Link to={linkTerm}>
-			{intl.formatMessage({ id: "columns.studio.term.title" })}
-		</Link>
-		<Link to={linkArticle}>
-			{intl.formatMessage({ id: "columns.studio.article.title" })}
-		</Link>
-		<Link to={linkAnthology}>
-			{intl.formatMessage({ id: "columns.studio.anthology.title" })}
-		</Link>
-		<Link to={linkAnalysis}>
-			{intl.formatMessage({ id: "columns.studio.analysis.title" })}
-		</Link>
-	</Space>
+	
+	<Affix offsetTop={0} >
+		<Sider 
+		   width={200} 
+		   breakpoint="lg"
+		   className="site-layout-background">
+			<Menu
+			theme="dark"
+			onClick={onClick}
+			defaultSelectedKeys={[selectedKeys]}
+			defaultOpenKeys={['basic','advance','collaboration']}
+			mode="inline"
+			items={items}
+			/>			
+		</Sider>
+	</Affix>
 
-  </div>
   );
 };
 

dashboard/src/locales/zh-Hans/index.ts

@@ -30,6 +30,9 @@ const items = {
   "columns.studio.article.title": "文章",
   "columns.studio.anthology.title": "文集",
   "columns.studio.analysis.title": "分析",
+  "columns.studio.collaboration.title": "协作",
+  "columns.studio.basic.title": "常用",
+  "columns.studio.advance.title": "高级",
   ...buttons,
   ...forms,
   ...tables,

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

@@ -1,28 +1,144 @@
-import { useParams ,Link} from "react-router-dom";
+import { useParams,Link } from "react-router-dom";
 import { useIntl } from "react-intl";
-import { Space } from "antd";
+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";
 import Footer from "../../../components/studio/Footer";
+const {  Content } = Layout;
+
+
+const defaultData = [
+	{
+	  id: '1',
+	  name: 'IAPT巴利语学习营',
+	  tag:[{title:"巴利语",color:"blue"},{title:"大金塔",color:"yellow"},{title:"拥有者",color:"success"}],
+	  image:
+		'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+		description: '我是一条测试的描述',
+	},
+	{
+	  id: '2',
+	  name: '初级巴利语入门',
+	  tag:[{title:"巴利语",color:"blue"},{title:"管理员",color:"processing"}],
+	  image:
+		'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+		description: '我是一条测试的描述',
+	},
+	{
+	  id: '3',
+	  name: '大金塔寺学习小组',
+	  tag:[{title:"大金塔",color:"yellow"},{title:"成员",color:"default"}],
+	  image:
+		'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+		description: '我是一条测试的描述',
+	},
+	{
+	  id: '4',
+	  name: '趣向涅槃之道第一册翻译组',
+	  tag:[{title:"大金塔",color:"yellow"},{title:"成员",color:"default"}],
+	  image:
+		'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+		description: '我是一条测试的描述',
+	},
+  ];
+  type DataItem = typeof defaultData[number];
 
 const Widget = () => {
 	const intl = useIntl();//i18n
 	const { studioname } = useParams();//url 参数
-	const linkEdit = `/studio/${studioname}/group/edit/12345`;
-	const linkShow = `/studio/${studioname}/group/12345`;
+	const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
+	const linkStudio = `/studio/${studioname}`;
+	const linkGroup = `${linkStudio}/group`;
   return (
-    <div>
+    <Layout>
+		
 		<HeadBar/>
-		<LeftSider/>
-      <h2>studio/{studioname}/{intl.formatMessage({ id: "columns.studio.channel.title" })}/版本列表</h2>
-      <div>
-		<Space>
-			<Link to={linkEdit}> group1 edit </Link>
-			<Link to={linkShow}> group1 show </Link>
-		</Space>
-      </div>
+		<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>
+				<Layout>
+					<ProList<DataItem>
+					rowKey="id"
+					headerTitle="群组列表"
+					dataSource={dataSource}
+					showActions="hover"
+					editable={{
+						onSave: async (key, record, originRow) => {
+						console.log(key, record, originRow);
+						return true;
+						},
+					}}
+					onDataSourceChange={setDataSource}
+					metas={{
+						title: {
+						dataIndex: 'name',
+						render: (text, row, index, action) => {
+							let link = `show/${row.id}`;
+
+							return (
+								<Link to ={link}>{row.name}</Link>
+							);
+						},
+						},
+						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>,
+						],
+						},
+					}}
+					/>
+				</Layout>				
+			</Content>
+		</Layout>
       <Footer/>
-    </div>
+    </Layout>
   );
 };