create

dashboard-fluent/src/components/api/Article.ts

@@ -0,0 +1,29 @@
+import type { IStudioApiResponse } from "./Auth";
+
+export interface IArticleListApiResponse {
+	article: string;
+	title: string;
+	level: string;
+	children: number;
+}
+//'uid','title','subtitle','article_list','owner','lang','updated_at','created_at'
+export interface IAnthologyListApiResponse {
+	uid: string;
+	title: string;
+	subtitle: string;
+	summary: string;
+	article_list: IArticleListApiResponse[];
+	studio: IStudioApiResponse;
+	lang: string;
+	created_at: string;
+	updated_at: string;
+}
+export interface IAnthologyListApiResponse2 {
+	ok: boolean;
+	message: string;
+	data: IAnthologyListApiResponse;
+}
+export interface IAnthologyStudioListApiResponse {
+	count: number;
+	studio: IStudioApiResponse;
+}

dashboard-fluent/src/components/api/Auth.ts

@@ -0,0 +1,12 @@
+export interface IUserApiResponse {
+	id: string;
+	name: string;
+	avatar: string;
+}
+
+export interface IStudioApiResponse {
+	id: string;
+	name: string;
+	avatar: string;
+	owner: IUserApiResponse;
+}

dashboard-fluent/src/components/api/Channel.ts

@@ -0,0 +1,8 @@
+export type ChannelInfoProps = {
+	ChannelName: string;
+	ChannelId: string;
+	ChannelType: string;
+	StudioName: string;
+	StudioId: string;
+	StudioType: string;
+};

dashboard-fluent/src/components/api/Corpus.ts

@@ -0,0 +1,75 @@
+export interface IApiPaliChapterList {
+	id: string;
+	book: number;
+	paragraph: number;
+	level: number;
+	toc: string;
+	title: string;
+	lenght: number;
+	chapter_len: number;
+	next_chapter: number;
+	prev_chapter: number;
+	parent: number;
+	chapter_strlen: number;
+	path: string;
+}
+
+export interface IApiResponcePaliChapterList {
+	ok: boolean;
+	message: string;
+	data: { rows: IApiPaliChapterList[]; count: number };
+}
+export interface IApiResponcePaliChapter {
+	ok: boolean;
+	message: string;
+	data: IApiPaliChapterList;
+}
+
+export interface IApiResponcePaliPara {
+	book: number;
+	paragraph: number;
+	level: number;
+	class: string;
+	toc: string;
+	text: string;
+	html: string;
+	lenght: number;
+	chapter_len: number;
+	next_chapter: number;
+	prev_chapter: number;
+	parent: number;
+	chapter_strlen: number;
+	path: string;
+}
+
+/**
+ * progress?view=chapter_channels&book=98&par=22
+ */
+export interface IApiChapterChannels {
+	book: number;
+	para: number;
+	uid: string;
+	channel_id: string;
+	progress: number;
+	updated_at: string;
+	views: number;
+	likes: number[];
+	channel: {
+		type: string;
+		owner_uid: string;
+		editor_id: number;
+		name: string;
+		summary: string;
+		lang: string;
+		status: number;
+		created_at: string;
+		updated_at: string;
+		uid: string;
+	};
+}
+
+export interface IApiResponseChapterChannelList {
+	ok: boolean;
+	message: string;
+	data: { rows: IApiChapterChannels[]; count: number };
+}

dashboard-fluent/src/components/library/FooterBar.tsx

@@ -0,0 +1,23 @@
+import { Link } from "react-router-dom";
+import { useIntl } from "react-intl";
+
+const Widget = () => {
+	//Library foot bar
+	const intl = useIntl(); //i18n
+	// TODO
+	return (
+		<div>
+			<div>
+				<div>相关链接</div>
+				<div>
+					问题收集<Link to="/">{intl.formatMessage({ id: "columns.library.palicanon.title" })}</Link>
+				</div>
+			</div>
+			<div>
+				<div>Powered by PCDS</div>
+			</div>
+		</div>
+	);
+};
+
+export default Widget;

dashboard-fluent/src/components/library/HeadBar.tsx

@@ -0,0 +1,145 @@
+import { Link } from "@fluentui/react/lib/Link";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { Layer } from "@fluentui/react/lib/Layer";
+import { DefaultPalette, Stack, IStackStyles, ICommandBarItemProps, CommandBar, IButtonProps } from "@fluentui/react";
+import { IOverflowSetItemProps, OverflowSet } from "@fluentui/react/lib/OverflowSet";
+import { IconButton, IButtonStyles } from "@fluentui/react/lib/Button";
+
+import img_banner from "../../assets/library/images/wikipali_logo_library.svg";
+//import UiLangSelect from "../general/UiLangSelect";
+//import SignInAvatar from "../auth/SignInAvatar";
+
+type IWidgetHeadBar = {
+	selectedKeys?: string;
+};
+const Widget = ({ selectedKeys = "community" }: IWidgetHeadBar) => {
+	//Library head bar
+	const intl = useIntl(); //i18n
+	const navigate = useNavigate();
+	// TODO
+	const items: ICommandBarItemProps[] = [
+		{
+			text: intl.formatMessage({ id: "columns.library.community.title" }),
+			key: "community",
+			onClick: () => navigate("/community/list"),
+		},
+		{
+			text: intl.formatMessage({ id: "columns.library.palicanon.title" }),
+			key: "palicanon",
+			onClick: () => navigate("/palicanon/list"),
+		},
+		{
+			text: intl.formatMessage({ id: "columns.library.course.title" }),
+			key: "course",
+			onClick: () => navigate("/course"),
+		},
+		{
+			text: intl.formatMessage({ id: "columns.library.dict.title" }),
+			key: "dict",
+			onClick: () => navigate("/dict/recent"),
+		},
+		{
+			text: intl.formatMessage({ id: "columns.library.anthology.title" }),
+			key: "anthology",
+			onClick: () => navigate("/anthology"),
+		},
+		{
+			text: intl.formatMessage({ id: "columns.library.help.title" }),
+			key: "help",
+			onClick: () => navigate("https://asset-hk.wikipali.org/help/zh-Hans"),
+		},
+	];
+
+	const overflowItems: ICommandBarItemProps[] = [
+		{
+			text: intl.formatMessage({ id: "columns.library.palihandbook.title" }),
+			key: "palihandbook",
+			onClick: () => navigate("https://asset-hk.wikipali.org/handbook/zh-Hans"),
+		},
+		{
+			text: intl.formatMessage({ id: "columns.library.calendar.title" }),
+			key: "calendar",
+			onClick: () => navigate("/calendar"),
+		},
+		{
+			text: intl.formatMessage({ id: "columns.library.convertor.title" }),
+			key: "convertor",
+			onClick: () => navigate("/convertor"),
+		},
+		{
+			text: intl.formatMessage({ id: "columns.library.statistics.title" }),
+			key: "statistics",
+			onClick: () => navigate("/statistics"),
+		},
+	];
+	// Styles definition
+	const stackStyles: IStackStyles = {
+		root: {
+			background: DefaultPalette.themeDark,
+		},
+	};
+	const itemStyles: React.CSSProperties = {
+		alignItems: "center",
+		color: DefaultPalette.white,
+		display: "flex",
+		height: 50,
+		justifyContent: "center",
+	};
+
+	const itemSelected: React.CSSProperties = {
+		color: DefaultPalette.white,
+		backgroundColor: "gray",
+		padding: 6,
+	};
+
+	const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => {
+		const styles = selectedKeys === item.key ? itemSelected : { padding: 6 };
+		return (
+			<span style={styles} key={item.key} onClick={item.onClick}>
+				{item.text}
+			</span>
+		);
+	};
+
+	const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element => {
+		const buttonStyles: Partial<IButtonStyles> = {
+			root: {
+				minWidth: 0,
+				padding: "0 4px",
+				alignSelf: "stretch",
+				height: "auto",
+			},
+		};
+		return (
+			<IconButton
+				title="More options"
+				styles={buttonStyles}
+				menuIconProps={{ iconName: "More" }}
+				menuProps={{ items: overflowItems! }}
+			/>
+		);
+	};
+	return (
+		<Layer style={{ background: DefaultPalette.themeDarker }}>
+			<Stack horizontal horizontalAlign="space-between" styles={stackStyles}>
+				<span style={itemStyles}>
+					<Link to="/">
+						<img alt="code" style={{ height: "3em" }} src={img_banner} />
+					</Link>
+				</span>
+				<span style={itemStyles}>
+					<OverflowSet
+						items={items}
+						overflowItems={overflowItems}
+						onRenderOverflowButton={onRenderOverflowButton}
+						onRenderItem={onRenderItem}
+					/>
+				</span>
+				<span style={itemStyles}>译经楼</span>
+			</Stack>
+		</Layer>
+	);
+};
+
+export default Widget;