开始构建我的空间

dashboard/src/components/chapterlistitem.tsx

@@ -0,0 +1,49 @@
+import {Link} from 'umi';
+import { Breadcrumb} from "antd";
+import { WarningOutlined,LoadingOutlined  } from '@ant-design/icons';
+import { Col, Row } from 'antd';
+
+type IWidgetChapterListItem ={
+	title: string,
+	path:string,
+	summary:string,
+	url:string,
+	like:number,
+	hit:number,
+	favorite:number,
+	watch:number,
+	created_at:string,
+	updated_at:string,
+  }
+  
+  export const ChapterListItem = (item: IWidgetChapterListItem) => {
+	let routes = new Array;
+	for (const iterator of JSON.parse(item.path)) {
+		routes.push({
+			path:'/app/article/?view=chapter&book='+iterator.book+'&par='+iterator.paragraph,
+			breadcrumbName:iterator.title,
+		}) ;
+	}
+	function itemRender(route,params,routes,paths){
+		return (
+			<Link to={route.path}>{route.breadcrumbName}</Link>
+		)
+	}
+	return (
+	  <div>
+		<Row>
+			<Col xs={24} xl={14}><Link to={item.url}>{item.title}</Link></Col>
+			<Col xs={0} xl={10}>点赞（1）</Col>
+		</Row>
+		<Row>
+			<Col xs={24} xl={0}>点赞（1）</Col>
+			<Col xs={0} xl={0}></Col>
+		</Row>
+		<Row>
+			<Col xs={24} xl={0}><Breadcrumb itemRender={itemRender} routes={routes} /></Col>
+			<Col xs={0} xl={0}></Col>
+		</Row>
+		<div>{item.summary}</div>
+	  </div>
+	);
+  }

dashboard/src/pages/[username]/index.tsx

@@ -1,10 +1,31 @@
-import {Link} from 'umi';
-
-export default ({match}) => {
-  return (
-    <div>
-      <h1>welcome to  {match.params.username} zone</h1>
-      <Link to="/demo">Go home</Link>
-    </div>
-  )
+import React from 'react';
+import { Affix, Layout, Menu, Breadcrumb, Table, Tag, Space, Pagination, message, notification, Anchor, List, Avatar } from "antd";
+import { Row, Col } from "antd";
+import { UserOutlined, LaptopOutlined, NotificationOutlined } from "@ant-design/icons";
+import { Footer } from "antd/lib/layout/layout";
+import { useState } from 'react';
+import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
+import { Link, history } from 'umi';
+
+const { Header, Content, Sider } = Layout;
+
+export default ({ match }) => {
+	return (
+
+		<Layout>
+			<Layout>
+				<h1>welcome to  {match.params.username} zone</h1>
+			</Layout>
+			<Header className="header">
+				<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
+					<Menu.Item key="1" >首页</Menu.Item>
+					<Menu.Item key="2" onClick={() => history.push('/' + match.params.username + '/translation')}>译文</Menu.Item>
+					<Menu.Item key="3" onClick={() => history.push('/' + match.params.username + '/course')}>课程</Menu.Item>
+					<Menu.Item key="4" onClick={() => history.push('/' + match.params.username + '/article')}>文集</Menu.Item>
+				</Menu>
+			</Header>
+
+		</Layout>
+
+	)
 }

dashboard/src/pages/[username]/translation/index.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect } from 'react';
+import { Affix, Layout, Menu, Breadcrumb, Table, Tag, Space, Pagination, message, notification, Anchor, List, Avatar } from "antd";
+import { Row, Col } from "antd";
+import { UserOutlined, LaptopOutlined, NotificationOutlined } from "@ant-design/icons";
+import { Footer } from "antd/lib/layout/layout";
+import { useState } from 'react';
+import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
+import { Link, history } from 'umi';
+import { ChapterListItem } from '@/components/chapterlistitem'
+
+const { SubMenu } = Menu;
+const { Header, Content, Sider } = Layout;
+
+const it = [
+	{ lable: 'menu1', key: 'menu1' }
+];
+const items = [
+	{
+		label: '经藏',
+		key: 'sutta',
+		tag: 'sutta',
+		children: [
+			{ label: '长部', key: 'sutta-digha', tag: 'sutta,digha' },
+			{ label: '中部', key: 'sutta-majjima', tag: 'sutta,majjima' },
+		]
+	},
+	{
+		label: '律藏',
+		key: 'vinaya',
+		tag: 'vinaya',
+		children: [
+			{ label: '大分别', key: 'vinaya-maha', tag: 'sutta,digha' },
+			{ label: '比库尼分别', key: 'vinaya-bhikkhuni', tag: 'sutta,majjima' },
+		]
+	},
+]
+
+export default ({ match }) => {
+	const [tableData, setTableData] = useState();
+
+
+	function getTableData() {
+		let url = 'http://127.0.0.1:8000/api/v2/progress?view=studio&name=' + match.params.username;
+		fetch(url)
+			.then(function (response) {
+				console.log("ajex:", response);
+				return response.json();
+			})
+			.then(function (myJson) {
+				console.log("ajex", myJson.data);
+				for (let iterator of myJson.data.rows) {
+					if (iterator.title == '') {
+						iterator.title = iterator.toc;
+					}
+					iterator.description = iterator.summary;
+					iterator.href = "/app/article/?view=chapter&book=" + iterator.book + "&par=" + iterator.para + '&channel=' + iterator.channel_id;
+					iterator.avatar = 'https://joeschmoe.io/api/v1/random';
+				}
+				setTableData(myJson.data.rows);
+			});
+	}
+	window.onload = function () {
+		getTableData();
+	}
+	return (
+		<Layout>
+			<Layout>
+				<h1>welcome to  {match.params.username} zone</h1>
+			</Layout>
+			<Header className="header">
+				<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
+					<Menu.Item key="1" onClick={() => history.push('/' + match.params.username)}>首页</Menu.Item>
+					<Menu.Item key="2" >译文</Menu.Item>
+					<Menu.Item key="3" onClick={() => history.push('/' + match.params.username + '/course')}>课程</Menu.Item>
+					<Menu.Item key="4">文集</Menu.Item>
+				</Menu>
+			</Header>
+			<Layout onClick={getTableData}>
+				<Affix offsetTop={0}>
+					<Sider
+						className="site-layout-background"
+						breakpoint="lg"
+						collapsedWidth="0"
+						onBreakpoint={broken => {
+							console.log(broken);
+						}}
+						onCollapse={(collapsed, type) => {
+							console.log(collapsed, type);
+						}}
+					>
+						<Menu
+							mode="inline"
+							defaultSelectedKeys={['1']}
+							defaultOpenKeys={['sub1']}
+							style={{ height: '100%', borderRight: 0 }}
+							items={items}
+						/>
+
+					</Sider>
+				</Affix>
+
+				<List
+					itemLayout="vertical"
+					size="large"
+					pagination={{
+						pageSize: 10,
+					}}
+					dataSource={tableData}
+					renderItem={item => (
+						<List.Item>
+							<ChapterListItem
+								title={item.title}
+								summary={item.summary}
+								path={item.path}
+								url={item.href}
+							/>
+						</List.Item>
+					)
+					}
+					footer={
+						<div>
+							<b>ant design</b> footer part
+						</div>
+					}
+				/>
+
+				<Affix offsetTop={0}>
+					<Sider
+						className="site-layout-background"
+						breakpoint="lg"
+						collapsedWidth="0"
+					>
+					</Sider>
+				</Affix>
+			</Layout>
+		</Layout>
+
+	)
+}

dashboard/src/pages/demo/day-4.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Affix, Layout, Menu, Breadcrumb, Table, Tag, Space, Pagination, message, notification, Anchor,List, Avatar } from "antd";
+import { Affix, Layout, Menu, Breadcrumb, Table, Tag, Space, Pagination, message, notification, Anchor, List, Avatar } from "antd";
 import { Row, Col } from "antd";
 import { UserOutlined, LaptopOutlined, NotificationOutlined } from "@ant-design/icons";
 import { Footer } from "antd/lib/layout/layout";
@@ -17,38 +17,38 @@ message.config({
 });
 
 const data = [
-  {
-    title: '梵网经',
-  },
-  {
-    title: '沙门果经',
-  },
-  {
-    title: '盐块经',
-  },
-  {
-    title: '根修习经',
-  },
+	{
+		title: '梵网经',
+	},
+	{
+		title: '沙门果经',
+	},
+	{
+		title: '盐块经',
+	},
+	{
+		title: '根修习经',
+	},
 ];
 
 const listData = [];
 for (let i = 0; i < 23; i++) {
-  listData.push({
-    href: 'https://ant.design',
-    title: `ant design part ${i}`,
-    avatar: 'https://joeschmoe.io/api/v1/random',
-    description:
-      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
-    content:
-      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
-  });
+	listData.push({
+		href: 'https://ant.design',
+		title: `ant design part ${i}`,
+		avatar: 'https://joeschmoe.io/api/v1/random',
+		description:
+			'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+		content:
+			'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
+	});
 }
 
 const IconText = ({ icon, text }) => (
-  <Space>
-    {React.createElement(icon)}
-    {text}
-  </Space>
+	<Space>
+		{React.createElement(icon)}
+		{text}
+	</Space>
 );
 
 function handleClick(e) {
@@ -80,26 +80,26 @@ export default () => {
 	const [tableData, setTableData] = useState();
 
 
-	function getTableData(e){
-        //let url='https://gorest.co.in/public-api/posts';
-        let url='http://127.0.0.1:8000/api/v2/progress?view=tag';
+	function getTableData(e) {
+		//let url='https://gorest.co.in/public-api/posts';
+		let url = 'http://127.0.0.1:8000/api/v2/progress?view=tag';
 		fetch(url)
 			.then(function (response) {
 				console.log("ajex:", response);
 				return response.json();
 			})
 			.then(function (myJson) {
-				console.log("ajex",myJson.data);
-                for (let iterator of myJson.data.rows) {
-                    if(iterator.title==''){
-                        iterator.title = iterator.toc;
-                    }
-                    iterator.description = iterator.toc;
-                    iterator.href="http://127.0.0.1:8000/app/article/?view=chapter&book="+iterator.book+"&par="+iterator.para+'&channel='+iterator.channel_id;
-                    iterator.avatar = 'https://joeschmoe.io/api/v1/random';
-                }
+				console.log("ajex", myJson.data);
+				for (let iterator of myJson.data.rows) {
+					if (iterator.title == '') {
+						iterator.title = iterator.toc;
+					}
+					iterator.description = iterator.toc;
+					iterator.href = "http://127.0.0.1:8000/app/article/?view=chapter&book=" + iterator.book + "&par=" + iterator.para + '&channel=' + iterator.channel_id;
+					iterator.avatar = 'https://joeschmoe.io/api/v1/random';
+				}
 				setTableData(myJson.data.rows);
-			});		
+			});
 	}
 	function pageChange(page: number, pagesize?: number | undefined) {
 		setcommitTime(page);
@@ -136,25 +136,26 @@ export default () => {
 					</SubMenu>
 				</Menu>
 			</Header>
+			
 			<Layout>
 				<Affix offsetTop={top}>
-					<Sider 
-                        className="site-layout-background"
-                        breakpoint="lg"
-                        collapsedWidth="0"
-                        onBreakpoint={broken => {
-                            console.log(broken);
-                        }}
-                        onCollapse={(collapsed, type) => {
-                            console.log(collapsed, type);
-                        }}
-                    >
+					<Sider
+						className="site-layout-background"
+						breakpoint="lg"
+						collapsedWidth="0"
+						onBreakpoint={broken => {
+							console.log(broken);
+						}}
+						onCollapse={(collapsed, type) => {
+							console.log(collapsed, type);
+						}}
+					>
 						<Menu
 							mode="inline"
 							defaultSelectedKeys={['1']}
 							defaultOpenKeys={['sub1']}
 							style={{ height: '100%', borderRight: 0 }}
-                            onClick={getTableData}
+							onClick={getTableData}
 						>
 							<SubMenu key="sutta" icon={<UserOutlined />} title="经藏">
 								<Menu.Item key="dn">长部</Menu.Item>
@@ -200,61 +201,45 @@ export default () => {
 							width: "100%",
 							overflowX: "auto",
 						}}>
-<List
-    itemLayout="vertical"
-    size="large"
-    pagination={{
-      onChange: page => {
-        console.log(page);
-      },
-      pageSize: 10,
-    }}
-    dataSource={tableData}
-    footer={
-      <div>
-        <b>ant design</b> footer part
-      </div>
-    }
-    renderItem={item => (
-      <List.Item
-        key={item.title}
-        actions={[
-          <IconText icon={StarOutlined} text={item.progress} key="list-vertical-star-o" />,
-          <IconText icon={LikeOutlined} text={item.created_at} key="list-vertical-like-o" />,
-          <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
-        ]}
+						<List
+							itemLayout="vertical"
+							size="large"
+							pagination={{
+								onChange: page => {
+									console.log(page);
+								},
+								pageSize: 10,
+							}}
+							dataSource={tableData}
+							footer={
+								<div>
+									<b>ant design</b> footer part
+								</div>
+							}
 
-      >
-        <List.Item.Meta
-          avatar={<Avatar src={item.avatar} />}
-          title={<a href={item.href} target='_blank'>{item.title}</a>}
-          description={item.description}
-        />
-      </List.Item>
-    )}
-  />
+						/>
 					</Content>
 				</Layout>
 				<Affix offsetTop={top}>
 					<Sider
-                    className="site-layout-background"
-                        breakpoint="lg"
-                        collapsedWidth="0"
-                    >
-<List
-    header={<div>本周最新</div>}
-    itemLayout="horizontal"
-    dataSource={data}
-    renderItem={item => (
-      <List.Item>
-        <List.Item.Meta
-          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
-          title={<a href="https://ant.design">{item.title}</a>}
-          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
-        />
-      </List.Item>
-    )}
-  />
+						className="site-layout-background"
+						breakpoint="lg"
+						collapsedWidth="0"
+					>
+						<List
+							header={<div>本周最新</div>}
+							itemLayout="horizontal"
+							dataSource={data}
+							renderItem={item => (
+								<List.Item>
+									<List.Item.Meta
+										avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+										title={<a href="https://ant.design">{item.title}</a>}
+										description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+									/>
+								</List.Item>
+							)}
+						/>
 					</Sider>
 				</Affix>
 			</Layout>