This commit is contained in:
quantulr
2023-10-29 22:25:16 +08:00
parent 73bc779168
commit 1090ca0dd0
13 changed files with 118 additions and 91 deletions

1
.idea/caszl-next.iml generated
View File

@ -1,5 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4"> <module type="JAVA_MODULE" version="4">
<component name="Go" enabled="true" />
<component name="NewModuleRootManager" inherit-compiler-output="true"> <component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output /> <exclude-output />
<content url="file://$MODULE_DIR$" /> <content url="file://$MODULE_DIR$" />

View File

@ -1,7 +1,4 @@
import { ReactNode } from "react"; import { ReactNode } from "react";
import circle from "@/app/assets/circle.png";
import Image from "next/image";
import LeftNav from "@/app/components/LeftNav";
import ArticleLayout from "@/app/components/ArticleLayout"; import ArticleLayout from "@/app/components/ArticleLayout";
const navLinks = [ const navLinks = [
@ -20,7 +17,11 @@ const Layout = ({
articleId: string; articleId: string;
}; };
}) => { }) => {
return <ArticleLayout>{children}</ArticleLayout>; return (
<ArticleLayout leftNavTitle={"新闻详情"} navigations={[]}>
{children}
</ArticleLayout>
);
}; };
export default Layout; export default Layout;

View File

@ -9,9 +9,5 @@ export default async function Article({
}; };
}) { }) {
const data = await articleDetail({ id: params.articleId }); const data = await articleDetail({ id: params.articleId });
return ( return <ArticleContent article={data} />;
<div className={"ml-2.5"}>
<ArticleContent article={data} />
</div>
);
} }

View File

@ -0,0 +1,5 @@
const Page = () => {
return <div></div>;
};
export default Page;

View File

@ -0,0 +1,19 @@
import ArticleLayout from "@/app/components/ArticleLayout";
import { ReactNode } from "react";
const navigations = [
{ title: "人才概览", href: "/talents/overview" },
{ title: "两院院士", href: "/talents/academician" },
{ title: "研究员", href: "/talents/researcher" },
{ title: "副研究员", href: "/talents/vice-researcher" },
];
const Layout = ({ children }: { children: ReactNode }) => {
return (
<ArticleLayout leftNavTitle={"人才队伍"} navigations={navigations}>
{children}
</ArticleLayout>
);
};
export default Layout;

View File

@ -0,0 +1,5 @@
const Page = () => {
return <div></div>;
};
export default Page;

View File

@ -0,0 +1,5 @@
const Page = () => {
return <div></div>;
};
export default Page;

View File

@ -3,7 +3,7 @@ import { ArticleDetail } from "@/app/types/article";
const ArticleContent = ({ article }: { article: ArticleDetail }) => { const ArticleContent = ({ article }: { article: ArticleDetail }) => {
return ( return (
<div className={"bg-white px-5 py-4 h-full"}> <div className={"px-5 py-4 h-full"}>
<h1 className={"text-[18px] text-[#054786] text-center font-bold"}> <h1 className={"text-[18px] text-[#054786] text-center font-bold"}>
{article.title} {article.title}
</h1> </h1>

View File

@ -3,17 +3,19 @@ import { ReactNode } from "react";
const ArticleLayout = ({ const ArticleLayout = ({
children, children,
navs, navigations,
leftNavTitle,
}: { }: {
children: ReactNode; children: ReactNode;
navs: any; navigations: any[];
leftNavTitle: string;
}) => { }) => {
return ( return (
<div className={"flex bg-[#6bb7f6] p-2.5"}> <div className={"flex bg-[#6bb7f6] p-2.5"}>
<div className={"left-side w-[325px]"}> <div className={"left-side w-[325px]"}>
<LeftNav /> <LeftNav navigations={navigations} title={leftNavTitle} />
</div> </div>
<div className={"flex-1"}>{children}</div> <div className={"flex-1 ml-3 bg-white"}>{children}</div>
</div> </div>
); );
}; };

View File

@ -1,54 +1,47 @@
"use client";
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import circle from "@/app/assets/circle.png"; import circle from "@/app/assets/circle.png";
import styles from "./LeftNav.module.scss"; import styles from "./LeftNav.module.scss";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation";
const LeftNav = () => { const LeftNav = ({
navigations,
title,
}: {
navigations: any[];
title: string;
}) => {
const pathname = usePathname();
return ( return (
<div className={"left-nav min-h-[600px] bg-[#d7ecfd] rounded shadow"}> <div className={"left-nav min-h-[600px] bg-[#d7ecfd] rounded shadow pt-2"}>
<div className={"flex items-center pl-2"}> <div className={"flex items-center pl-2 h-7"}>
<Image src={circle} alt={"circle icon"} height={16} width={16} /> <Image src={circle} alt={"circle icon"} height={16} width={16} />
<span className={"pl-2"}></span> <span className={"pl-2"}>{title}</span>
</div> </div>
{navigations.length > 0 && (
<div <div
className={`${styles.navContent} mt-3 mx-3 rounded-lg px-2.5 py-[5px]`} className={`${styles.navContent} mt-3 mx-3 rounded-lg px-2.5 py-[5px]`}
> >
<ul className={styles.navItems}> <ul className={styles.navItems}>
<li> {navigations.map((navigation) => (
<li key={navigation.href}>
<Link <Link
className={"text-sm px-[9px] py-[7px] block text-white"} className={`text-sm px-[9px] h-[34px] flex items-center font-bold transition-all hover:text-[#fff176] hover:text-xs ${
href={"/"} navigation.href === pathname
? "text-[#fff176] text-xs"
: "text-white"
}`}
href={navigation.href}
> >
{navigation.title}
</Link>
</li>
<li>
<Link
className={"text-sm px-[9px] py-[7px] block text-white"}
href={"/"}
>
</Link>
</li>
<li>
<Link
className={"text-sm px-[9px] py-[7px] block text-white"}
href={"/"}
>
</Link>
</li>
<li>
<Link
className={"text-sm px-[9px] py-[7px] block text-white"}
href={"/"}
>
</Link> </Link>
</li> </li>
))}
</ul> </ul>
</div> </div>
)}
</div> </div>
); );
}; };

View File

@ -17,7 +17,7 @@ export const metadata: Metadata = {
const navLinks = [ const navLinks = [
{ title: "首页", href: "/" }, { title: "首页", href: "/" },
{ title: "机构设置", href: "#" }, { title: "机构设置", href: "#" },
{ title: "人才队伍", href: "#" }, { title: "人才队伍", href: "/talents/overview" },
{ title: "科研进展", href: "#" }, { title: "科研进展", href: "#" },
{ title: "科技成果", href: "#" }, { title: "科技成果", href: "#" },
{ title: "学术交流", href: "#" }, { title: "学术交流", href: "#" },

View File

@ -12,20 +12,20 @@
"dependencies": { "dependencies": {
"axios": "^1.6.0", "axios": "^1.6.0",
"next": "14.0.0", "next": "14.0.0",
"react": "^18", "react": "^18.2.0",
"react-dom": "^18" "react-dom": "^18.2.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20.8.9",
"@types/react": "^18", "@types/react": "^18.2.33",
"@types/react-dom": "^18", "@types/react-dom": "^18.2.14",
"autoprefixer": "^10", "autoprefixer": "^10.4.16",
"eslint": "^8", "eslint": "^8.52.0",
"eslint-config-next": "14.0.0", "eslint-config-next": "14.0.0",
"postcss": "^8", "postcss": "^8.4.31",
"prettier": "^3.0.3", "prettier": "^3.0.3",
"sass": "^1.69.5", "sass": "^1.69.5",
"tailwindcss": "^3", "tailwindcss": "^3.3.5",
"typescript": "^5" "typescript": "^5.2.2"
} }
} }

48
pnpm-lock.yaml generated
View File

@ -12,33 +12,33 @@ dependencies:
specifier: 14.0.0 specifier: 14.0.0
version: 14.0.0(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) version: 14.0.0(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5)
react: react:
specifier: ^18 specifier: ^18.2.0
version: 18.2.0 version: 18.2.0
react-dom: react-dom:
specifier: ^18 specifier: ^18.2.0
version: 18.2.0(react@18.2.0) version: 18.2.0(react@18.2.0)
devDependencies: devDependencies:
'@types/node': '@types/node':
specifier: ^20 specifier: ^20.8.9
version: 20.8.9 version: 20.8.9
'@types/react': '@types/react':
specifier: ^18 specifier: ^18.2.33
version: 18.2.33 version: 18.2.33
'@types/react-dom': '@types/react-dom':
specifier: ^18 specifier: ^18.2.14
version: 18.2.14 version: 18.2.14
autoprefixer: autoprefixer:
specifier: ^10 specifier: ^10.4.16
version: 10.4.16(postcss@8.4.31) version: 10.4.16(postcss@8.4.31)
eslint: eslint:
specifier: ^8 specifier: ^8.52.0
version: 8.52.0 version: 8.52.0
eslint-config-next: eslint-config-next:
specifier: 14.0.0 specifier: 14.0.0
version: 14.0.0(eslint@8.52.0)(typescript@5.2.2) version: 14.0.0(eslint@8.52.0)(typescript@5.2.2)
postcss: postcss:
specifier: ^8 specifier: ^8.4.31
version: 8.4.31 version: 8.4.31
prettier: prettier:
specifier: ^3.0.3 specifier: ^3.0.3
@ -47,10 +47,10 @@ devDependencies:
specifier: ^1.69.5 specifier: ^1.69.5
version: 1.69.5 version: 1.69.5
tailwindcss: tailwindcss:
specifier: ^3 specifier: ^3.3.5
version: 3.3.5 version: 3.3.5
typescript: typescript:
specifier: ^5 specifier: ^5.2.2
version: 5.2.2 version: 5.2.2
packages: packages:
@ -384,16 +384,16 @@ packages:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: true dev: true
/acorn-jsx@5.3.2(acorn@8.11.1): /acorn-jsx@5.3.2(acorn@8.11.2):
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
peerDependencies: peerDependencies:
acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies: dependencies:
acorn: 8.11.1 acorn: 8.11.2
dev: true dev: true
/acorn@8.11.1: /acorn@8.11.2:
resolution: {integrity: sha512-IJTNCJMRHfRfb8un89z1QtS0x890C2QUrUxFMK8zy+RizcId6mfnqOf68Bu9YkDgpLYuvCm6aYbwDatXVZPjMQ==} resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
engines: {node: '>=0.4.0'} engines: {node: '>=0.4.0'}
hasBin: true hasBin: true
dev: true dev: true
@ -543,7 +543,7 @@ packages:
postcss: ^8.1.0 postcss: ^8.1.0
dependencies: dependencies:
browserslist: 4.22.1 browserslist: 4.22.1
caniuse-lite: 1.0.30001554 caniuse-lite: 1.0.30001557
fraction.js: 4.3.7 fraction.js: 4.3.7
normalize-range: 0.1.2 normalize-range: 0.1.2
picocolors: 1.0.0 picocolors: 1.0.0
@ -603,8 +603,8 @@ packages:
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true hasBin: true
dependencies: dependencies:
caniuse-lite: 1.0.30001554 caniuse-lite: 1.0.30001557
electron-to-chromium: 1.4.568 electron-to-chromium: 1.4.569
node-releases: 2.0.13 node-releases: 2.0.13
update-browserslist-db: 1.0.13(browserslist@4.22.1) update-browserslist-db: 1.0.13(browserslist@4.22.1)
dev: true dev: true
@ -634,8 +634,8 @@ packages:
engines: {node: '>= 6'} engines: {node: '>= 6'}
dev: true dev: true
/caniuse-lite@1.0.30001554: /caniuse-lite@1.0.30001557:
resolution: {integrity: sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==} resolution: {integrity: sha512-91oR7hLNUP3gG6MLU+n96em322a8Xzes8wWdBKhLgUoiJsAF5irZnxSUCbc+qUZXNnPCfUwLOi9ZCZpkvjQajw==}
/chalk@4.1.2: /chalk@4.1.2:
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@ -797,8 +797,8 @@ packages:
esutils: 2.0.3 esutils: 2.0.3
dev: true dev: true
/electron-to-chromium@1.4.568: /electron-to-chromium@1.4.569:
resolution: {integrity: sha512-3TCOv8+BY6Ltpt1/CmGBMups2IdKOyfEmz4J8yIS4xLSeMm0Rf+psSaxLuswG9qMKt+XbNbmADybtXGpTFlbDg==} resolution: {integrity: sha512-LsrJjZ0IbVy12ApW3gpYpcmHS3iRxH4bkKOW98y1/D+3cvDUWGcbzbsFinfUS8knpcZk/PG/2p/RnkMCYN7PVg==}
dev: true dev: true
/emoji-regex@9.2.2: /emoji-regex@9.2.2:
@ -1157,8 +1157,8 @@ packages:
resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==} resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
acorn: 8.11.1 acorn: 8.11.2
acorn-jsx: 5.3.2(acorn@8.11.1) acorn-jsx: 5.3.2(acorn@8.11.2)
eslint-visitor-keys: 3.4.3 eslint-visitor-keys: 3.4.3
dev: true dev: true
@ -1858,7 +1858,7 @@ packages:
'@next/env': 14.0.0 '@next/env': 14.0.0
'@swc/helpers': 0.5.2 '@swc/helpers': 0.5.2
busboy: 1.6.0 busboy: 1.6.0
caniuse-lite: 1.0.30001554 caniuse-lite: 1.0.30001557
postcss: 8.4.31 postcss: 8.4.31
react: 18.2.0 react: 18.2.0
react-dom: 18.2.0(react@18.2.0) react-dom: 18.2.0(react@18.2.0)