:sparkles: 文集人名跳转到个人空间

dashboard/src/components/api/Article.ts

@@ -23,7 +23,24 @@ export interface IAnthologyListApiResponse2 {
 	message: string;
 	data: IAnthologyListApiResponse;
 }
+export interface IAnthologyListApiResponse3 {
+	ok: boolean;
+	message: string;
+	data: {
+		rows: IAnthologyListApiResponse[];
+		count: number;
+	};
+}
+
 export interface IAnthologyStudioListApiResponse {
+	ok: boolean;
+	message: string;
+	data: {
+		count: number;
+		rows: IAnthologyStudioListDataApiResponse[];
+	};
+}
+export interface IAnthologyStudioListDataApiResponse {
 	count: number;
 	studio: IStudioApiResponse;
 }

dashboard/src/components/api/Auth.ts

@@ -1,12 +1,14 @@
 export interface IUserApiResponse {
 	id: string;
-	name: string;
+	userName: string;
+	nickName: string;
 	avatar: string;
 }
 
 export interface IStudioApiResponse {
 	id: string;
-	name: string;
+	nickName: string;
+	studioName: string;
 	avatar: string;
 	owner: IUserApiResponse;
 }

dashboard/src/components/article/AnthologStudioList.tsx

@@ -1,8 +1,10 @@
 import { useState, useEffect } from "react";
 import { List, Space, Card } from "antd";
-import StudioNmae from "../auth/StudioName";
+import StudioName from "../auth/StudioName";
 import type { IAnthologyStudioListApiResponse } from "../api/Article";
 import type { IStudioApiResponse } from "../api/Auth";
+import { get } from "../../request";
+import { Link, useNavigate } from "react-router-dom";
 
 const defaultData: IAnthologyStudioData[] = [];
 
@@ -17,30 +19,25 @@ interface IWidgetAnthologyList {
 */
 const Widget = () => {
 	const [tableData, setTableData] = useState(defaultData);
-
+	const navigate = useNavigate();
 	useEffect(() => {
 		console.log("useEffect");
 		fetchData();
-	}, [setTableData]);
+	}, []);
 
 	function fetchData() {
-		let url = `http://127.0.0.1:8000/api/v2/anthology?view=studio_list`;
-		fetch(url)
-			.then(function (response) {
-				console.log("ajex:", response);
-				return response.json();
-			})
-			.then(function (myJson) {
-				console.log("ajex", myJson);
-
-				let newTree: IAnthologyStudioData[] = myJson.data.rows.map((item: IAnthologyStudioListApiResponse) => {
-					return {
-						count: item.count,
-						studio: item.studio,
-					};
-				});
-				setTableData(newTree);
+		let url = `/v2/anthology?view=studio_list`;
+		get(url).then(function (myJson) {
+			console.log("ajex", myJson);
+			const json = myJson as unknown as IAnthologyStudioListApiResponse;
+			let newTree: IAnthologyStudioData[] = json.data.rows.map((item) => {
+				return {
+					count: item.count,
+					studio: item.studio,
+				};
 			});
+			setTableData(newTree);
+		});
 	}
 
 	return (
@@ -51,10 +48,12 @@ const Widget = () => {
 				dataSource={tableData}
 				renderItem={(item) => (
 					<List.Item>
-						<Space>
-							<StudioNmae data={item.studio} />
-							<span>({item.count})</span>
-						</Space>
+						<Link to={`/blog/${item.studio.studioName}/anthology`}>
+							<Space>
+								<StudioName data={item.studio} />
+								<span>({item.count})</span>
+							</Space>
+						</Link>
 					</List.Item>
 				)}
 			/>

dashboard/src/components/article/AnthologyDetail.tsx

@@ -3,9 +3,12 @@ import { Typography } from "antd";
 import ReactMarkdown from "react-markdown";
 
 import type { IAnthologyData } from "./AnthologyCard";
-import type { IAnthologyListApiResponse, IAnthologyListApiResponse2 } from "../api/Article";
+import type {
+	IAnthologyListApiResponse,
+	IAnthologyListApiResponse2,
+} from "../api/Article";
 import TocTree from "./TocTree";
-import { ApiFetch } from "../../utils";
+import { get } from "../../request";
 
 const { Title, Text } = Typography;
 
@@ -22,16 +25,16 @@ const defaultData: IAnthologyData = {
 	articles: [],
 	studio: {
 		id: "",
-		name: "",
+		studioName: "",
+		nickName: "",
 		avatar: "",
 	},
 	created_at: "",
 	updated_at: "",
 };
-//const defaultTreeData: ListNodeData[] = [];
+
 const Widget = (prop: IWidgetAnthologyDetail) => {
 	const [tableData, setTableData] = useState(defaultData);
-	//const [treeData, setTreeData] = useState(defaultTreeData);
 
 	useEffect(() => {
 		console.log("useEffect");
@@ -39,7 +42,7 @@ const Widget = (prop: IWidgetAnthologyDetail) => {
 	}, [prop.aid]);
 
 	function fetchData(id: string) {
-		ApiFetch(`/anthology/${id}`)
+		get(`/v2/anthology/${id}`)
 			.then((response) => {
 				const json = response as unknown as IAnthologyListApiResponse2;
 

dashboard/src/components/article/AnthologyList.tsx

@@ -2,51 +2,52 @@ import { useState, useEffect } from "react";
 import { List } from "antd";
 import AnthologyCard from "./AnthologyCard";
 import type { IAnthologyData } from "./AnthologyCard";
-import type { IAnthologyListApiResponse } from "../api/Article";
+import type { IAnthologyListApiResponse3 } from "../api/Article";
+import { get } from "../../request";
 
 const defaultData: IAnthologyData[] = [];
-
-const Widget = () => {
+interface IWidgetAnthologyList {
+	view: string;
+	id?: string;
+}
+const Widget = (prop: IWidgetAnthologyList) => {
 	const [tableData, setTableData] = useState(defaultData);
 
 	useEffect(() => {
-		console.log("useEffect");
-		fetchData();
-	}, [setTableData]);
-
-	function fetchData() {
-		let url = `http://127.0.0.1:8000/api/v2/anthology?view=public`;
-		fetch(url)
-			.then(function (response) {
-				console.log("ajex:", response);
-				return response.json();
-			})
-			.then(function (myJson) {
-				console.log("ajex", myJson);
+		console.log("useEffect", prop);
+		if (typeof prop.id === "undefined") {
+			fetchData(prop.view);
+		} else {
+			fetchData(prop.view, prop.id);
+		}
+	}, [prop]);
 
-				let newTree: IAnthologyData[] = myJson.data.rows.map((item: IAnthologyListApiResponse) => {
-					return {
-						id: item.uid,
-						title: item.title,
-						subTitle: item.subtitle,
-						summary: item.summary,
-						articles: item.article_list.map((al) => {
-							return {
-								id: al.article,
-								title: al.title,
-								subTitle: "",
-								summary: "",
-								created_at: "",
-								updated_at: "",
-							};
-						}),
-						studio: item.studio,
-						created_at: item.created_at,
-						updated_at: item.updated_at,
-					};
-				});
-				setTableData(newTree);
+	function fetchData(view: string, id?: string) {
+		let url = `/v2/anthology?view=${view}` + (id ? `&studio=${id}` : "");
+		console.log("get-url", url);
+		get(url).then(function (myJson) {
+			console.log("ajex", myJson);
+			const json = myJson as unknown as IAnthologyListApiResponse3;
+			let newTree: IAnthologyData[] = json.data.rows.map((item) => {
+				return {
+					id: item.uid,
+					title: item.title,
+					subTitle: item.subtitle,
+					summary: item.summary,
+					articles: item.article_list.map((al) => {
+						return {
+							key: al.article,
+							title: al.title,
+							level: parseInt(al.level),
+						};
+					}),
+					studio: item.studio,
+					created_at: item.created_at,
+					updated_at: item.updated_at,
+				};
 			});
+			setTableData(newTree);
+		});
 	}
 
 	return (

dashboard/src/components/auth/SignInAvatar.tsx

@@ -1,33 +1,57 @@
-import { Dropdown, Tooltip } from "antd";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Tooltip } from "antd";
 import { Avatar } from "antd";
+import { Popover } from "antd";
 import { ProCard } from "@ant-design/pro-components";
-import { UserOutlined, HomeOutlined, LogoutOutlined, SettingOutlined } from "@ant-design/icons";
+import {
+	UserOutlined,
+	HomeOutlined,
+	LogoutOutlined,
+	SettingOutlined,
+} from "@ant-design/icons";
 
-const userCard = (
-	<>
-		<ProCard
-			style={{ maxWidth: 500, minWidth: 300 }}
-			actions={[
-				<SettingOutlined key="setting" />,
-				<HomeOutlined key="edit" />,
-				<Tooltip title="退出登录">
-					<LogoutOutlined key="ellipsis" />
-				</Tooltip>,
-			]}
-		>
-			<div>
-				<h2>kosalla</h2>
-				<div>遨游法的海洋</div>
-			</div>
-		</ProCard>
-	</>
-);
 const Widget = () => {
 	// TODO
+	const [userName, setUserName] = useState("Kosalla_China");
+	const [nickName, setNickName] = useState("小僧善巧");
+
+	const userCard = (
+		<>
+			<ProCard
+				style={{ maxWidth: 500, minWidth: 300 }}
+				actions={[
+					<Tooltip title="设置">
+						<SettingOutlined key="setting" />
+					</Tooltip>,
+					<Tooltip title="个人空间">
+						<Link to={`/blog/${userName}/overview`}>
+							<HomeOutlined key="home" />
+						</Link>
+					</Tooltip>,
+					<Tooltip title="退出登录">
+						<LogoutOutlined key="logout" />
+					</Tooltip>,
+				]}
+			>
+				<div>
+					<h2>{nickName}</h2>
+					<div>欢迎遨游法的海洋</div>
+				</div>
+			</ProCard>
+		</>
+	);
 	return (
-		<Dropdown overlay={userCard} placement="bottomRight" arrow={{ pointAtCenter: true }}>
-			<Avatar style={{ backgroundColor: "#87d068" }} icon={<UserOutlined />} />
-		</Dropdown>
+		<>
+			<Popover content={userCard} placement="bottomRight">
+				<Avatar
+					style={{ backgroundColor: "#87d068" }}
+					icon={<UserOutlined />}
+				>
+					{nickName.slice(0, 1)}
+				</Avatar>
+			</Popover>
+		</>
 	);
 };
 

dashboard/src/components/auth/StudioName.tsx

@@ -2,19 +2,27 @@ import { Avatar, Space } from "antd";
 
 export interface IStudio {
 	id: string;
-	name: string;
+	nickName: string;
+	studioName: string;
 	avatar: string;
 }
 interface IWidghtStudio {
 	data: IStudio;
+	onClick?: Function;
 }
 const Widget = (prop: IWidghtStudio) => {
 	// TODO
-	const name = prop.data.name.slice(0, 1);
+	const name = prop.data.nickName.slice(0, 1);
 	return (
-		<Space>
+		<Space
+			onClick={() => {
+				if (typeof prop.onClick !== "undefined") {
+					prop.onClick(prop.data.studioName);
+				}
+			}}
+		>
 			<Avatar size="small">{name}</Avatar>
-			{prop.data.name}
+			{prop.data.nickName}
 		</Space>
 	);
 };

dashboard/src/components/library/HeadBar.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { Layout, Col, Row, Space, Button } from "antd";
+import { Layout, Col, Row, Space } from "antd";
 import { useIntl } from "react-intl";
 import type { MenuProps } from "antd";
 import { Menu } from "antd";
@@ -7,6 +7,7 @@ import { Menu } from "antd";
 import img_banner from "../../assets/library/images/wikipali_logo_library.svg";
 import UiLangSelect from "../general/UiLangSelect";
 import SignInAvatar from "../auth/SignInAvatar";
+import ToStudio from "../auth/ToStudio";
 
 const { Header } = Layout;
 
@@ -23,56 +24,112 @@ const Widget = ({ selectedKeys = "" }: IWidgetHeadBar) => {
 	// TODO
 	const items: MenuProps["items"] = [
 		{
-			label: <Link to="/community/list">{intl.formatMessage({ id: "columns.library.community.title" })}</Link>,
+			label: (
+				<Link to="/community/list">
+					{intl.formatMessage({
+						id: "columns.library.community.title",
+					})}
+				</Link>
+			),
 			key: "community",
 		},
 		{
-			label: <Link to="/palicanon/list">{intl.formatMessage({ id: "columns.library.palicanon.title" })}</Link>,
+			label: (
+				<Link to="/palicanon/list">
+					{intl.formatMessage({
+						id: "columns.library.palicanon.title",
+					})}
+				</Link>
+			),
 			key: "palicanon",
 		},
 		{
-			label: <Link to="/course/list">{intl.formatMessage({ id: "columns.library.course.title" })}</Link>,
+			label: (
+				<Link to="/course/list">
+					{intl.formatMessage({ id: "columns.library.course.title" })}
+				</Link>
+			),
 			key: "course",
 		},
 		{
-			label: <Link to="/dict/recent">{intl.formatMessage({ id: "columns.library.dict.title" })}</Link>,
+			label: (
+				<Link to="/dict/recent">
+					{intl.formatMessage({ id: "columns.library.dict.title" })}
+				</Link>
+			),
 			key: "dict",
 		},
 		{
-			label: <Link to="/anthology/list">{intl.formatMessage({ id: "columns.library.anthology.title" })}</Link>,
+			label: (
+				<Link to="/anthology/list">
+					{intl.formatMessage({
+						id: "columns.library.anthology.title",
+					})}
+				</Link>
+			),
 			key: "anthology",
 		},
 		{
 			label: (
-				<a href="https://asset-hk.wikipali.org/help/zh-Hans" target="_blank" rel="noreferrer">
+				<a
+					href="https://asset-hk.wikipali.org/help/zh-Hans"
+					target="_blank"
+					rel="noreferrer"
+				>
 					{intl.formatMessage({ id: "columns.library.help.title" })}
 				</a>
 			),
 			key: "help",
 		},
 		{
-			label: <Space>{intl.formatMessage({ id: "columns.library.more.title" })}</Space>,
+			label: (
+				<Space>
+					{intl.formatMessage({ id: "columns.library.more.title" })}
+				</Space>
+			),
 			key: "more",
 			children: [
 				{
 					label: (
-						<a href="https://asset-hk.wikipali.org/handbook/zh-Hans" target="_blank" rel="noreferrer">
-							{intl.formatMessage({ id: "columns.library.palihandbook.title" })}
+						<a
+							href="https://asset-hk.wikipali.org/handbook/zh-Hans"
+							target="_blank"
+							rel="noreferrer"
+						>
+							{intl.formatMessage({
+								id: "columns.library.palihandbook.title",
+							})}
 						</a>
 					),
 					key: "palihandbook",
 				},
 				{
-					label: <Link to="/calendar">{intl.formatMessage({ id: "columns.library.calendar.title" })}</Link>,
+					label: (
+						<Link to="/calendar">
+							{intl.formatMessage({
+								id: "columns.library.calendar.title",
+							})}
+						</Link>
+					),
 					key: "calendar",
 				},
 				{
-					label: <Link to="/convertor">{intl.formatMessage({ id: "columns.library.convertor.title" })}</Link>,
+					label: (
+						<Link to="/convertor">
+							{intl.formatMessage({
+								id: "columns.library.convertor.title",
+							})}
+						</Link>
+					),
 					key: "convertor",
 				},
 				{
 					label: (
-						<Link to="/statistics">{intl.formatMessage({ id: "columns.library.statistics.title" })}</Link>
+						<Link to="/statistics">
+							{intl.formatMessage({
+								id: "columns.library.statistics.title",
+							})}
+						</Link>
 					),
 					key: "statistics",
 				},
@@ -84,7 +141,11 @@ const Widget = ({ selectedKeys = "" }: IWidgetHeadBar) => {
 			<Row justify="space-between">
 				<Col flex="100px">
 					<Link to="/">
-						<img alt="code" style={{ height: "3em" }} src={img_banner} />
+						<img
+							alt="code"
+							style={{ height: "3em" }}
+							src={img_banner}
+						/>
 					</Link>
 				</Col>
 				<Col span={8}>
@@ -97,11 +158,11 @@ const Widget = ({ selectedKeys = "" }: IWidgetHeadBar) => {
 					/>
 				</Col>
 				<Col span={4}>
-					<a href="/studio/kosalla/">
-						<Button>译经楼</Button>
-					</a>
-					<SignInAvatar />
-					<UiLangSelect />
+					<Space>
+						<ToStudio />
+						<SignInAvatar />
+						<UiLangSelect />
+					</Space>
 				</Col>
 			</Row>
 		</Header>

dashboard/src/components/studio/HeadBar.tsx

@@ -1,9 +1,10 @@
 import { Link } from "react-router-dom";
-import { Col, Row, Input, Layout, Button } from "antd";
+import { Col, Row, Input, Layout, Space } from "antd";
 
 import img_banner from "../../assets/studio/images/wikipali_banner.svg";
 import UiLangSelect from "../general/UiLangSelect";
 import SignInAvatar from "../auth/SignInAvatar";
+import ToLibaray from "../auth/ToLibaray";
 
 const { Search } = Input;
 const { Header } = Layout;
@@ -16,18 +17,26 @@ const Widget = () => {
 			<Row justify="space-between">
 				<Col flex="80px">
 					<Link to="/">
-						<img alt="code" style={{ height: "3em" }} src={img_banner} />
+						<img
+							alt="code"
+							style={{ height: "3em" }}
+							src={img_banner}
+						/>
 					</Link>
 				</Col>
 				<Col span={8}>
-					<Search placeholder="input search text" onSearch={onSearch} style={{ width: "100%" }} />
+					<Search
+						placeholder="input search text"
+						onSearch={onSearch}
+						style={{ width: "100%" }}
+					/>
 				</Col>
 				<Col span={4}>
-					<Link to="\">
-						<Button>藏经阁</Button>
-					</Link>
-					<SignInAvatar />
-					<UiLangSelect />
+					<Space>
+						<ToLibaray />
+						<SignInAvatar />
+						<UiLangSelect />
+					</Space>
 				</Col>
 			</Row>
 		</Header>

dashboard/src/pages/library/anthology/list.tsx

@@ -11,45 +11,48 @@ const Widget = () => {
 	// TODO
 	const onSearch = (value: string) => console.log(value);
 	return (
-
-			<Layout>
-				<Header style={{ height: 200 }}>
-					<h2>composition</h2>
-					<p>
-						Make the Pāḷi easy to read <br />
-						solution of Pāḷi glossary For translating <br />
-						Pāḷi in Group Show the source reference in Pāḷi
-					</p>
+		<Layout>
+			<Header style={{ height: 200 }}>
+				<h2>composition</h2>
+				<p>
+					Make the Pāḷi easy to read <br />
+					solution of Pāḷi glossary For translating <br />
+					Pāḷi in Group Show the source reference in Pāḷi
+				</p>
+			</Header>
+			<Affix offsetTop={0}>
+				<Header style={{ backgroundColor: "gray", height: "3.5em" }}>
+					<Row style={{ paddingTop: "0.5em" }}>
+						<Col span="8" offset={8}>
+							<Search
+								placeholder="input search text"
+								onSearch={onSearch}
+								style={{ width: "100%" }}
+							/>
+						</Col>
+					</Row>
 				</Header>
-				<Affix offsetTop={0}>
-					<Header style={{ backgroundColor: "gray", height: "3.5em" }}>
-						<Row style={{ paddingTop: "0.5em" }}>
-							<Col span="8" offset={8}>
-								<Search placeholder="input search text" onSearch={onSearch} style={{ width: "100%" }} />
+			</Affix>
+
+			<Content>
+				<Row>
+					<Col flex="auto"></Col>
+					<Col flex="1260px">
+						<Row>
+							<Col span="18">
+								<AnthologyList view="public" />
+							</Col>
+							<Col span="6">
+								<AnthologStudioList />
 							</Col>
 						</Row>
-					</Header>
-				</Affix>
-
-				<Content>
-					<Row>
-						<Col flex="auto"></Col>
-						<Col flex="1260px">
-							<Row>
-								<Col span="18">
-									<AnthologyList />
-								</Col>
-								<Col span="6">
-									<AnthologStudioList />
-								</Col>
-							</Row>
-						</Col>
-						<Col flex="auto"></Col>
-					</Row>
+					</Col>
+					<Col flex="auto"></Col>
+				</Row>
 
-					<Space></Space>
-				</Content>
-			</Layout>
+				<Space></Space>
+			</Content>
+		</Layout>
 	);
 };
 

dashboard/src/pages/library/blog/anthology.tsx

@@ -1,4 +1,5 @@
 import { useParams } from "react-router-dom";
+import AnthologyList from "../../../components/article/AnthologyList";
 import BlogNav from "../../../components/library/blog/BlogNav";
 
 const Widget = () => {
@@ -8,6 +9,7 @@ const Widget = () => {
 	return (
 		<>
 			<BlogNav selectedKey="anthology" studio={studio ? studio : ""} />
+			<AnthologyList view="public_studio" id={studio ? studio : ""} />
 		</>
 	);
 };