11 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/components/BlogItem/blogItemLeft.tsx:
--------------------------------------------------------------------------------
1 | import { BlogItemLeftUl } from "./blogItemLeftUl";
2 | import { momentTo } from "utils/time";
3 | import { flexBetween, getClass } from "utils/dom";
4 | import { HomeBlogProps, TypeProps, UserProps } from "types";
5 |
6 | export const BlogItemLeft = (props: HomeBlogProps & TypeProps & UserProps) => {
7 | const { blogTitle, typeContent, blogPreview, blogCreateDate } = props;
8 |
9 | return (
10 |
11 |
12 |
22 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/components/BlogItem/blogItemRight.tsx:
--------------------------------------------------------------------------------
1 | import { Image } from "components/Image";
2 | import { getClass } from "utils/dom";
3 |
4 | import style from "./index.module.scss";
5 |
6 | export const BlogItemRight = ({ src }: { src: string }) => {
7 | return (
8 |
12 |
13 | {blogTitle}
14 |
15 | {momentTo(blogCreateDate)}
16 |
17 |
18 |
19 | {typeContent}
20 |
21 |
22 | {typeContent}
20 |{blogPreview}
23 |
9 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/components/BlogItem/index.module.scss:
--------------------------------------------------------------------------------
1 | .imgHover {
2 | & img {
3 | position: relative;
4 | transition-property: transform;
5 | transition-duration: 0.3s;
6 | }
7 | &:hover {
8 | & img {
9 | transform: scale(1.1, 1.1);
10 | }
11 | }
12 | }
13 |
14 | .ulStyle {
15 | table-layout: fixed;
16 | width: 100%;
17 | }
18 |
19 | .iconTransform {
20 | display: flex;
21 | position: relative;
22 | transition-duration: 0.3s;
23 | transition-property: transform;
24 | &:hover {
25 | transform-origin: 50% 50%;
26 | transform: scale(1.5, 1.5);
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/components/BlogItem/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { BlogItemLeft } from "./blogItemLeft";
3 | import { BlogItemRight } from "./blogItemRight";
4 | import { getClass, flexAround } from "utils/dom";
5 | import type { HomeBlogProps, TypeProps, UserProps } from "types";
6 |
7 | type PropsType = HomeBlogProps & UserProps & TypeProps & { className?: string; _style?: { [props: string]: string } };
8 |
9 | const BlogItem = (props: PropsType) => {
10 | const { blogImgLink, className = "", _style = {} } = props;
11 |
12 | return (
13 |
10 |
12 |
14 |
17 | );
18 | };
19 |
20 | const WithReadBlogItem = (props: PropsType) => {
21 | return (
22 |
23 |
24 |
26 |
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/components/BlogUtils/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/basic.module";
2 |
3 | .btnPosition {
4 | left: calc(100vw - 90px);
5 | bottom: 18px;
6 | z-index: 100;
7 | width: 60px;
8 | opacity: 0.8;
9 | transition-property: opacity;
10 | transition-duration: 0.3s;
11 | &:hover {
12 | opacity: 1;
13 | }
14 | @include mobile {
15 | left: auto;
16 | right: 8px;
17 | bottom: 12px;
18 | & > * {
19 | font-size: 0.85em;
20 | }
21 | }
22 | }
23 |
24 | .menuContent {
25 | font-size: 0.85em;
26 | min-width: 200%;
27 | bottom: 100%;
28 | right: 0%;
29 | background-color: #fff;
30 | }
31 |
32 | .canvasContent {
33 | width: 100px !important;
34 | height: 100px !important;
35 | right: 110%;
36 | top: 26%;
37 | }
38 |
--------------------------------------------------------------------------------
/components/BlogUtils/index.tsx:
--------------------------------------------------------------------------------
1 | // 博客显示的一些工具
2 | import { getClass } from "utils/dom";
3 | import { useAutoShowAndHide } from "hook/useAuto";
4 | import { useAutoScrollTop, useAutoScrollBottom } from "hook/useBlog";
5 | import { BlogMenu } from "./blogMenu";
6 | import { BlogCanvas } from "./blogCanvas";
7 | import { SimpleElement } from "types/components";
8 |
9 | import style from "./index.module.scss";
10 |
11 | export const BlogUtils: SimpleElement = () => {
12 | const divRef = useAutoShowAndHide
20 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import { Loading } from "components/Loading";
3 | import { useBool } from "hook/useData";
4 | import { flexCenter, getClass } from "utils/dom";
5 | import { ButtonType } from "types/components";
6 |
7 | export const Button: ButtonType = ({
8 | request,
9 | type = "button",
10 | disable = false,
11 | value = "确定",
12 | initState = true,
13 | loading = false,
14 | className = "",
15 | _style,
16 | loadingColor,
17 | children,
18 | }) => {
19 | const { bool, show, hide } = useBool({ init: initState });
20 |
21 | const requestCallback = useCallback(() => {
22 | if (request) {
23 | hide();
24 | Promise.resolve().then(request).then(show).catch(show);
25 | }
26 | }, [hide, request, show]);
27 |
28 | return (
29 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/components/CardHead/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { CardHeadType } from "types/components";
3 | import { flexBetween, flexCenter, getClass } from "utils/dom";
4 |
5 | export const CardHead: CardHeadType = ({ icon, content, hrefTo }) => {
6 | return (
7 |
8 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/components/CheckBox/index.module.scss:
--------------------------------------------------------------------------------
1 | .checkbox {
2 | display: block;
3 | position: relative;
4 | width: 2em;
5 | height: 1em;
6 | border: 0.1em solid #aaa;
7 | padding: 0.1em;
8 | border-top-left-radius: 25% 50%;
9 | border-top-right-radius: 25% 50%;
10 | border-bottom-left-radius: 25% 50%;
11 | border-bottom-right-radius: 25% 50%;
12 | cursor: pointer;
13 | box-sizing: content-box;
14 | box-shadow: 0 0 0 0 #49e68c inset;
15 |
16 | transition-property: box-shadow, border;
17 | transition-duration: 0.3s;
18 | &::before {
19 | content: "";
20 | position: absolute;
21 | width: 1em;
22 | height: 1em;
23 | border: 0.1em solid #666;
24 | top: 50%;
25 | transform: translateY(-50%);
26 | border-radius: 50%;
27 | box-sizing: border-box;
28 | transition-duration: 0.3s;
29 | transition-timing-function: cubic-bezier(0.61, -0.13, 0.34, 1.19);
30 | left: 0.1em;
31 | z-index: 1;
32 | background-color: white;
33 | box-shadow: 0 0 0.3em 0.2em rgba(0, 0, 0, 0.2);
34 | }
35 | &::after {
36 | content: "";
37 | position: absolute;
38 | width: 1em;
39 | height: 1em;
40 | border-radius: 50%;
41 | background-color: #49e68c;
42 | box-sizing: border-box;
43 | transition-duration: 0.2s;
44 | transition-timing-function: cubic-bezier(0.61, -0.13, 0.34, 1.19);
45 | }
46 | &.checked {
47 | box-shadow: 0 0 0 1.1em #49e68c inset;
48 | border-color: #49e68c;
49 | }
50 | &.checked::before {
51 | left: 1em;
52 | box-shadow: 0 0 0.3em 0.2em rgba(100, 100, 100, 0.2);
53 | }
54 | &.checked::after {
55 | width: 2em;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/components/CheckBox/index.tsx:
--------------------------------------------------------------------------------
1 | import { useBool } from "hook/useData";
2 | import { getClass } from "utils/dom";
3 | import { CheckBoxType } from "types/components";
4 |
5 | import style from "./index.module.scss";
6 |
7 | export const CheckBox: CheckBoxType = ({ fieldName, _style, type = "radio", initState, className = "" }) => {
8 | const { bool, switchBoolDebounce } = useBool({ init: initState });
9 |
10 | return (
11 |
9 |
10 |
12 | {hrefTo && (
13 |
14 |
15 | more
16 |
17 |
18 |
19 | )}
20 | {content}
11 |
12 |
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/components/Drop/dropContainer.tsx:
--------------------------------------------------------------------------------
1 | import { getClass } from "utils/dom";
2 | import { useAutoSetHeight } from "hook/useAuto";
3 | import { DropContainerType } from "types/components";
4 |
5 | import style from "./index.module.scss";
6 |
7 | export const DropContainer: DropContainerType = ({ bool, children, length, maxHeight }) => {
8 | const [ref, height] = useAutoSetHeight
16 | {children}
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/components/Drop/dropItem.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import { getClass } from "utils/dom";
3 | import { DropItemType } from "types/components";
4 |
5 | import style from "./index.module.scss";
6 |
7 | export const DropItem: DropItemType = ({ clickHandler, value, name, index, checkedIndex }) => {
8 | const clickCallback = useCallback(() => clickHandler && index !== undefined && clickHandler(index), [clickHandler, index]);
9 |
10 | return (
11 |
15 | {name ? name : value}
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/components/Drop/dropSelectItem.tsx:
--------------------------------------------------------------------------------
1 | import { MouseEvent, useCallback } from "react";
2 | import { animateFadeIn, getClass } from "utils/dom";
3 | import { DropSelectItemType } from "types/components";
4 |
5 | import style from "./index.module.scss";
6 |
7 | export const DropSelectItem: DropSelectItemType = ({ idx, name, value, cancel, multiple }) => {
8 | const cancelCallback = useCallback<(e: MouseEvent) => void>(
9 | (e) => {
10 | e.stopPropagation();
11 | cancel(idx);
12 | },
13 | [cancel, idx]
14 | );
15 |
16 | return (
17 |
21 | {name ? name : value}
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/components/Drop/index.module.scss:
--------------------------------------------------------------------------------
1 | .drop {
2 | cursor: pointer;
3 | z-index: 2;
4 | min-width: 120px;
5 | }
6 |
7 | .dropItem {
8 | transition-duration: 0.2s;
9 | transition-property: background;
10 | &:hover {
11 | background-color: rgba(200, 200, 200, 0.5);
12 | }
13 | &_checked {
14 | background-color: rgba(200, 200, 200, 0.5);
15 | }
16 | }
17 |
18 | .dropContainer {
19 | transition-property: height;
20 | transition-duration: 0.22s;
21 | background-color: #fff;
22 | box-shadow: 0 0 3px rgba(20, 20, 20, 0.2);
23 | z-index: 30;
24 | top: calc(100% + 1px);
25 | left: 0;
26 | }
27 |
28 | .drpSelectItem {
29 | position: relative;
30 | &_cancel:hover {
31 | text-decoration: line-through;
32 | color: #9a9a9a;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/components/Footer/footContainerCardMe.tsx:
--------------------------------------------------------------------------------
1 | import { Image } from "components/Image";
2 | import { getClass, flexCenter } from "utils/dom";
3 | import { SimpleElement } from "types/components";
4 |
5 | import style from "./index.module.scss";
6 |
7 | export const FootContainerCardMe: SimpleElement = () => {
8 | return (
9 |
10 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/components/Footer/footContainerContactMe.tsx:
--------------------------------------------------------------------------------
1 | import { getClass, flexCenter } from "utils/dom";
2 | import { footContentLength, footContactMe } from "config/footer";
3 | import { FootContainerContentItem } from "./footContainerContentItem";
4 | import { FootContainerContactMeType } from "types/components";
5 |
6 | import style from "./index.module.scss";
7 |
8 | export const FootContainerContactMe: FootContainerContactMeType = ({ length = footContentLength }) => {
9 | return (
10 |
11 |
13 |
11 |
12 |
13 |
15 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/components/Footer/footContainerContentItem.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { getClass, flexCenter } from "utils/dom";
3 | import { FootContainerContentItemType } from "types/components";
4 |
5 | import style from "./index.module.scss";
6 |
7 | const ColumnItem: FootContainerContentItemType = ({ head, content, title }) => {
8 | return (
9 |
12 |
13 | 联系我
14 |
15 | -
16 | {footContactMe.slice(0, length).map(({ head, content, column }) => (
17 |
-
10 |
- {head} 11 |
- {content} 12 |
11 |
12 |
13 |
15 |
21 | );
22 | };
--------------------------------------------------------------------------------
/components/Footer/footContainerYiYan.tsx:
--------------------------------------------------------------------------------
1 | import { getClass, flexCenter } from "utils/dom";
2 | import { LoadRender } from "components/LoadRender";
3 | import { SimpleElement, YiYanComponent } from "types/components";
4 |
5 | import style from "./index.module.scss";
6 |
7 | const YiYan: YiYanComponent = ({ hitokoto, from_who, from }) => {
8 | return (
9 |
12 |
13 | 推荐
14 |
15 | -
16 | {footRecommendContent.slice(0, length).map(({ content, hrefTo }) => (
17 |
10 |16 | ); 17 | }; 18 | 19 | export const FootContainerYiYan: SimpleElement = () => { 20 | return ( 21 |{hitokoto}
11 | 15 |
22 |
23 |
24 |
26 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/components/Footer/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/basic.module";
2 |
3 | .footFont {
4 | @include mobile {
5 | font-size: 0.95rem;
6 | }
7 | }
8 |
9 | .fontInherit {
10 | @include mobile {
11 | font-size: inherit;
12 | }
13 | }
14 |
15 | .hover {
16 | border-radius: 2px;
17 | transition-duration: 0.3s;
18 | transition-property: background-color, color;
19 | color: #6c757d;
20 | &:hover {
21 | color: rgba(255, 255, 255, 0.75);
22 | background-color: rgba(100, 100, 100, 0.5);
23 | }
24 | }
25 |
26 | .autoHide {
27 | @include mobile {
28 | margin-top: 0.2em;
29 | border-left: none !important;
30 | overflow: hidden;
31 | }
32 | }
33 |
34 | .img {
35 | @include mobile {
36 | height: 75px !important;
37 | width: 75px !important;
38 | }
39 | }
40 |
41 | .yiYanFont {
42 | font-size: 0.95rem;
43 | color: rgba(255, 255, 255, 0.75);
44 | @include mobile {
45 | font-size: inherit;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/components/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | import { getClass, flexCenter } from "utils/dom";
2 | import { FootContainerYiYan } from "./footContainerYiYan";
3 | import { FootContainerCardMe } from "./footContainerCardMe";
4 | import { FootContainerRecommend } from "./footContainerRecommend";
5 | import { FootContainerContactMe } from "./footContainerContactMe";
6 | import { SimpleElement } from "types/components";
7 |
8 | import style from "./index.module.scss";
9 |
10 | export const Footer: SimpleElement = () => {
11 | return (
12 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/components/Head/index.tsx:
--------------------------------------------------------------------------------
1 | // 全局的head组件
2 | import OriginalHead from "next/head";
3 |
4 | // Head 组件
5 | export const Head = ({ title = "Blog" }: { title?: string }) => {
6 | return (
7 |
23 |
24 | 一言
25 |
26 |
17 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/components/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { useBool } from "hook/useData";
3 | import { getClass } from "utils/dom";
4 | import { HeadContainerList } from "./headContainerList";
5 | import { HeadContainerUser } from "./headContainerUser";
6 | import { HeadContainerTagNavBtn } from "./headContainerButton";
7 | import { SimpleElement } from "types/components";
8 |
9 | import style from "./index.module.scss";
10 |
11 | export const Header: SimpleElement = () => {
12 | const { bool, switchBoolDebounce } = useBool();
13 |
14 | return (
15 | -
18 | {HeaderContent.map(({ value, icon, hrefTo }) => (
19 |
9 | {children}
10 |
11 |
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/components/Hover/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/basic.module";
2 |
3 | .hoverTriangle {
4 | width: 20px;
5 | height: 15px;
6 | clip-path: polygon(0 0, 100% 0, 50% 100%);
7 | left: 14px;
8 | bottom: 2px;
9 | }
10 |
11 | .hoverHolder {
12 | height: 15px;
13 | }
14 |
15 | .animatePanel {
16 | display: block;
17 | z-index: 100;
18 | position: absolute;
19 | left: -10px;
20 | bottom: 100%;
21 | filter: drop-shadow(0px 0px 8px rgba(180, 180, 180, 0.5));
22 | }
23 |
--------------------------------------------------------------------------------
/components/Hover/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { getClass } from "utils/dom";
3 | import { useBool } from "hook/useData";
4 | import { useShowAndHideAnimate } from "hook/useAnimate";
5 | import { Animate } from "./animate";
6 | import { HoverType } from "types/components";
7 |
8 | export const Hover: HoverType = ({ className = "", children, hoverItem }) => {
9 | const { bool, boolState, showThrottleState, hideDebounce } = useBool();
10 |
11 | const { animateRef } = useShowAndHideAnimate
23 | {children}
24 | {hoverItem}
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/components/Image/index.tsx:
--------------------------------------------------------------------------------
1 | import OriginalImage, { ImageProps } from "next/image";
2 |
3 | const Image = (props: ImageProps) => {
4 | return
22 | {container &&
24 | {children}
25 |
26 | {container && }
27 |
28 |
5 | loading failed: {error}
6 |
7 | );
8 |
--------------------------------------------------------------------------------
/components/Loading/index.tsx:
--------------------------------------------------------------------------------
1 | import { flexCenter, getClass } from "utils/dom";
2 | import { LoadingType } from "types/components";
3 |
4 | import style from "./index.module.scss";
5 |
6 | export const Loading: LoadingType = ({ _style = {}, className = "", color = "info" }) => {
7 | return (
8 |
9 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/components/LoadingBar/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { useRouter } from "next/dist/client/router";
3 | import { useLoadingBar } from "hook/useLoadingBar";
4 | import { Bar } from "./loadingBar";
5 | import { LoadingBarType } from "types/components";
6 |
7 | export const LoadingBar: LoadingBarType = React.memo(function LoadingBar({ height = 1.5, present = 0 }) {
8 | const router = useRouter();
9 |
10 | const { start, end, ref } = useLoadingBar({ height, present });
11 |
12 | useEffect(() => {
13 | let id: NodeJS.Timeout | null = null;
14 | const delayStart = () => {
15 | id = setTimeout(start, 200);
16 | };
17 | const endNow = () => {
18 | id && clearTimeout(id) && (id = null);
19 | end();
20 | };
21 | router.events.on("routeChangeStart", delayStart);
22 | router.events.on("routeChangeComplete", endNow);
23 | return () => {
24 | router.events.off("routeChangeStart", delayStart);
25 | router.events.off("routeChangeComplete", endNow);
26 | };
27 | }, [end, start]);
28 |
29 | return
10 |
19 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
5 |
6 |
7 | );
8 |
--------------------------------------------------------------------------------
/components/ModuleManager/index.module.scss:
--------------------------------------------------------------------------------
1 | .cover {
2 | left: 0;
3 | top: 0;
4 | z-index: 2;
5 | transition-property: background;
6 | transition-duration: 0.2s;
7 | &_active {
8 | background-color: rgba(40, 40, 40, 0.6);
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/components/Overlay/desktop.tsx:
--------------------------------------------------------------------------------
1 | import { useBodyLock, useOverlayBody } from "hook/useOverlay";
2 | import { useShowAndHideAnimate } from "hook/useAnimate";
3 | import { flexBetween, getClass } from "utils/dom";
4 | import { OverlayType } from "types/components";
5 | import { getScrollBarSize } from "utils/action";
6 |
7 | const Overlay: OverlayType = ({ head, body, foot, closeHandler, showState, className = "", clear }) => {
8 |
9 | const { animateRef: ref } = useShowAndHideAnimate
28 |
37 | );
38 | };
39 |
40 | export default Overlay;
41 |
--------------------------------------------------------------------------------
/components/Overlay/index.module.scss:
--------------------------------------------------------------------------------
1 | .modalContainer {
2 | position: absolute;
3 | width: 100%;
4 | height: 100%;
5 | left: 0;
6 | bottom: 0;
7 | overflow: hidden;
8 | }
9 |
10 | .mobileModal {
11 | width: 100%;
12 | background-color: #fff;
13 | border-radius: 8px 8px 0 0;
14 | overflow: hidden;
15 | filter: drop-shadow(0 0 0.75rem rgba(100, 100, 100, 0.6));
16 | }
17 |
18 | .mobileHead {
19 | height: 18px;
20 | display: flex;
21 | justify-content: center;
22 | align-items: center;
23 | background-color: rgba(220, 220, 220, 0.6);
24 | }
25 |
26 | .indicator {
27 | width: 18px;
28 | height: 4px;
29 | border-radius: 99px;
30 | background-color: rgba(100, 100, 100, 0.6);
31 | &:not(:first-of-type) {
32 | margin-left: 2px;
33 | }
34 | }
35 |
36 | .mobileContent {
37 | // margin-top: 10px;
38 | overflow: auto;
39 | height: calc(100% - 40px);
40 | }
41 |
--------------------------------------------------------------------------------
/components/Overlay/index.tsx:
--------------------------------------------------------------------------------
1 | import DesktopOverlay from "./desktop";
2 | import MobileOverlay from "./mobile";
3 |
4 | export { DesktopOverlay, MobileOverlay };
5 |
--------------------------------------------------------------------------------
/components/PageFoot/index.tsx:
--------------------------------------------------------------------------------
1 | import { flexBetween, getClass } from "utils/dom";
2 | import { FootPageType } from "types/components";
3 |
4 | export const FootPage: FootPageType = ({ page, increaseAble, decreaseAble, increasePage, decreasePage, className = "" }) => {
5 | return (
6 |
29 | {head}
30 |
33 |
34 | {bodyContent}
35 | {foot && {foot}
}
36 |
7 |
10 | {page}
11 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/components/Publish/index.module.scss:
--------------------------------------------------------------------------------
1 | .editor {
2 | overflow: hidden;
3 | font-family: consolas;
4 | position: relative;
5 | }
6 |
--------------------------------------------------------------------------------
/components/Publish/publishEditor.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from "next/dynamic";
2 | import { useCallback } from "react";
3 | import { useEditor } from "hook/useBlog";
4 | import { getClass } from "utils/dom";
5 | import { markNOLineNumber } from "utils/markdown";
6 |
7 | import style from "./index.module.scss";
8 | import "react-markdown-editor-lite/lib/index.css";
9 |
10 | const MdEditor = dynamic(() => import("react-markdown-editor-lite"), {
11 | ssr: false,
12 | });
13 |
14 | export const PublishEditor = ({ blogId, blogContent = "" }: { blogId: string; blogContent?: string }) => {
15 | useEditor(blogId);
16 |
17 | const mdRender = useCallback<(t: string) => string>((text) => markNOLineNumber.render(text), []);
18 |
19 | return (
20 |
21 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/components/Publish/publishHead.tsx:
--------------------------------------------------------------------------------
1 | import { Drop } from "components/Drop";
2 | import { blogOrigin } from "config/publish";
3 | import { BlogProps } from "types";
4 |
5 | export const PublishHead = ({ blogOriginState, blogTitle }: Partial
8 |
9 | fieldName="blogOriginState"
10 | className="col-1 border-info rounded-left"
11 | data={blogOrigin}
12 | initData={blogOriginState !== undefined ? [blogOriginState] : []}
13 | />
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/components/Publish/publishState.tsx:
--------------------------------------------------------------------------------
1 | import { Drop } from "components/Drop";
2 | import { CheckBox } from "components/CheckBox";
3 | import { blogState } from "config/publish";
4 | import { BlogProps } from "types";
5 |
6 | export const PublishState = (props: Partial
14 | {name}
15 | fieldName={fieldName} data={value} className="rounded" _style={{ minWidth: "120px", zIndex: "1" }} initData={init} />
16 |
17 | );
18 | } else {
19 | const init = Boolean(props[fieldName]);
20 | return (
21 |
22 | {name ? name : value}
23 |
25 | );
26 | }
27 | })}
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/components/Publish/publishTag.tsx:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { Drop } from "components/Drop";
3 | import { LoadRender } from "components/LoadRender";
4 | import { ClientTagProps, ServerTagProps } from "types";
5 |
6 | export const PublishTag = ({ tagId }: Partial
9 |
18 | needInitialData
19 | apiPath={apiName.tag}
20 | loaded={(res) => {
21 | const data: { name?: string; value: string }[] = res.map(({ tagContent, tagId }) => {
22 | return { name: tagContent, value: tagId! };
23 | });
24 | const init = tagId !== undefined && data.length ? tagId.map((it) => data.findIndex(({ value }) => value === it)) : [];
25 | return fieldName="tagId" className="form-control" placeHolder="添加标签" data={data} multiple initData={init} />;
26 | }}
27 | />
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/components/Publish/publishType.tsx:
--------------------------------------------------------------------------------
1 | import { Drop } from "components/Drop";
2 | import { LoadRender } from "components/LoadRender";
3 | import { apiName } from "config/api";
4 | import { TypeProps } from "types";
5 |
6 | export const PublishType = ({ typeId }: Partial
10 |
14 | 标签
15 |
16 |
17 |
9 |
18 | needInitialData
19 | apiPath={apiName.type}
20 | loaded={(res) => {
21 | const data: { name?: string; value: string }[] = res.map(({ typeContent, typeId }) => {
22 | return { name: typeContent, value: typeId! };
23 | });
24 | const init = typeId !== undefined && data.length ? [typeId].map((it) => data.findIndex(({ value }) => value === it)) : [];
25 | return maxHeight={200} fieldName="typeId" className="form-control" placeHolder="添加分类" data={data} initData={init} />;
26 | }}
27 | />
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/components/Publish/publishTypeAndTag.tsx:
--------------------------------------------------------------------------------
1 | import { PublishType } from "./publishType";
2 | import { PublishTag } from "./publishTag";
3 | import { ClientTagProps, TypeProps } from "types";
4 |
5 | export const PublishTypeAndTag = ({ typeId, tagId }: Partial
10 |
14 | 分类
15 |
16 |
17 |
8 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/components/Tag/index.module.scss:
--------------------------------------------------------------------------------
1 | .tagItem {
2 | background-color: #eee;
3 | overflow: hidden;
4 | transition-property: background;
5 | transition-duration: 0.2s;
6 | width: 130px;
7 | &__left {
8 | width: 70%;
9 | position: relative;
10 | color: white;
11 | flex-shrink: 0;
12 |
13 | &__icon {
14 | width: 40px;
15 | flex-shrink: 0;
16 | text-align: center;
17 | }
18 |
19 | &__text {
20 | width: calc(100% - 40px);
21 | overflow: hidden;
22 | white-space: nowrap;
23 | text-overflow: ellipsis;
24 | flex-shrink: 0;
25 | }
26 | }
27 |
28 | &__left::before {
29 | content: "";
30 | position: absolute;
31 | width: 60%;
32 | height: 99%;
33 | left: 41%;
34 | background: inherit;
35 | z-index: -1;
36 | }
37 |
38 | &__left::after {
39 | content: "";
40 | vertical-align: middle;
41 | position: absolute;
42 | clip-path: polygon(0 0, 100% 50%, 0 100%);
43 | top: 0;
44 | width: 10px;
45 | height: 100%;
46 | left: calc(100% - 0.22px);
47 | background: inherit;
48 | }
49 |
50 | &__right {
51 | width: 30%;
52 | padding-left: 14px;
53 | }
54 | }
55 |
56 | .hoverItem {
57 | cursor: pointer;
58 | &:hover {
59 | background-color: #ccc;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/components/Tag/index.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import { useTag } from "hook/useTag";
3 | import { flexCenter, getClass } from "utils/dom";
4 | import { TagType } from "types/components";
5 |
6 | import style from "./index.module.scss";
7 |
8 | const Tag: TagType = ({ tagContent, tagCount, className = "", hoverAble = true }) => {
9 | return (
10 |
14 |
20 | );
21 | };
22 |
23 | const WithChangeTag: TagType = ({ tagContent, tagCount, className }) => {
24 | const { changeCurrentTag } = useTag();
25 |
26 | const changeTag = useCallback(() => changeCurrentTag(tagContent), [tagContent]);
27 |
28 | return (
29 |
15 |
16 | {tagContent}
17 |
18 | {tagCount}
19 |
30 |
32 | );
33 | };
34 |
35 | export { Tag, WithChangeTag };
36 |
--------------------------------------------------------------------------------
/components/Toast/index.module.scss:
--------------------------------------------------------------------------------
1 | .toast {
2 | opacity: 1;
3 | min-width: 180px;
4 | }
5 |
6 | .close {
7 | outline: none !important;
8 | transition-property: opacity;
9 | transition-duration: 0.2s;
10 | }
11 |
--------------------------------------------------------------------------------
/components/Type/index.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import { useType } from "hook/useType";
3 | import { getClass } from "utils/dom";
4 | import { TypeType } from "types/components";
5 |
6 | const Type: TypeType = ({ typeCount, typeContent, className = "", hoverAble = true }) => {
7 | return (
8 |
9 | {typeContent}
10 | {typeCount}
11 |
12 | );
13 | };
14 |
15 | const WithChangeType: TypeType = ({ typeCount, typeContent, className }) => {
16 | const { changeCurrentType } = useType();
17 |
18 | const changeType = useCallback(() => changeCurrentType(typeContent), []);
19 |
20 | return (
21 |
22 |
24 | );
25 | };
26 |
27 | export { Type, WithChangeType };
28 |
--------------------------------------------------------------------------------
/components/UserHover/index.module.scss:
--------------------------------------------------------------------------------
1 | .imgHover {
2 | width: 40px;
3 | & img {
4 | // position: relative;
5 | transition-property: transform;
6 | transition-duration: 0.3s;
7 | }
8 | &:hover {
9 | & img {
10 | transform: scale(1.1, 1.1);
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/components/UserHover/index.tsx:
--------------------------------------------------------------------------------
1 | import { Hover } from "components/Hover";
2 | import { UserHoverItem } from "./hoverItem";
3 | import { UserHoverType } from "types/components";
4 |
5 | export const UserHover: UserHoverType = (props) => {
6 | const { userId, children = null } = props;
7 | if (userId && children) {
8 | return (
9 |
11 |
28 | );
29 | };
30 |
31 | const ImgItem = ({ relativeUrl }: { relativeUrl: string }) => {
32 | const [pinchRef, coverRef] = usePinch
12 |
13 | token
14 | apiPath={apiName.allImage}
15 | loaded={(data) => (
16 |
17 | {[process.env.NEXT_PUBLIC_ABOUT].concat(data.map((it) => it.relativeUrl)).map((relativeUrl) => (
18 |
19 |
21 | ))}
22 |
23 | )}
24 | loading={() =>
27 |
36 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/containers/About/aboutRight.tsx:
--------------------------------------------------------------------------------
1 | import { AboutRightLink } from "./aboutRightLink";
2 | import { AboutRightAbout } from "./aboutRightAbout";
3 | import { SimpleElement } from "types/components";
4 |
5 | export const AboutRight: SimpleElement = () => {
6 | return (
7 |
37 |
39 |
8 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/containers/About/aboutRightAbout.tsx:
--------------------------------------------------------------------------------
1 | import { SimpleElement } from "types/components";
2 |
3 | export const AboutRightAbout: SimpleElement = () => {
4 | return (
5 |
9 |
17 |
10 | 关于我
11 |
12 | -
13 |
7 |
17 | 一个小菜鸟, 目标是成为一个全栈大佬.
8 |入门学习:
9 |计算机专业知识 + C Language
10 |后端技术学习:
11 |Java、Sql、Mybatis、SpringMVC、SSM、Node.js...
12 |前端技术学习:
13 |HTML、CSS、JavaScript、TypeScript、React、Vue...
14 |关于这个博客
15 |Express + Next.js博客应用
16 |
8 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/containers/Archive/archiveContent.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { momentTo } from "utils/time";
3 | import { flexBetween, flexCenter, getClass } from "utils/dom";
4 | import { AnimationList } from "components/AnimationList";
5 | import { HomeProps } from "store/reducer/server/action/home";
6 |
7 | import style from "./index.module.scss";
8 |
9 | export const ArchiveContent = ({ year, blogProps }: { year: string; blogProps: HomeProps }) => {
10 | return (
11 | <>
12 | {year}
13 |-
14 |
19 |
20 |
21 | {props.blogTitle}
22 |
23 | {momentTo(props.blogCreateDate!)}
24 |
25 | {props.typeContent}
26 |
27 |
28 | ))}
29 |
9 |
10 | 归档
11 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/containers/Archive/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/basic.module";
2 |
3 | .archivePoint {
4 | font-size: 0.4em;
5 | }
6 |
7 | .archiveTitle {
8 | @include desktop {
9 | font-size: 18px;
10 | max-width: 180px;
11 | }
12 | @include mobile {
13 | font-size: 16px;
14 | max-width: 120px;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/containers/Archive/index.tsx:
--------------------------------------------------------------------------------
1 | import { ArchiveHead } from "./archiveHead";
2 | import { ArchiveContent } from "./archiveContent";
3 | import { Loading } from "components/Loading";
4 | import { useArchive, useAutoLoadArchive } from "hook/useArchive";
5 | import { SimpleElement } from "types/components";
6 |
7 | export const Archive: SimpleElement = () => {
8 | const { value, canLoad, loadMore } = useArchive();
9 |
10 | useAutoLoadArchive({ canLoad, loadMore, breakPoint: 600 });
11 |
12 | return (
13 | <>
14 |
10 | 归档
11 |
12 | 共
13 | {allCount}
14 | 篇博客
15 |
16 |
17 |
16 | {Object.keys(value).map((year) => (
17 |
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/containers/Blog/blogContentBody.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 | import { mark } from "utils/markdown";
3 | import { getClass } from "utils/dom";
4 | import { BlogProps } from "types";
5 |
6 | import style from "./index.module.scss";
7 |
8 | export const BlogContentBody = ({ blogTitle, blogContent }: Pick
13 |
15 | 16 |
17 | {blogTitle}
14 |15 | 16 |
*/}
13 |
*/}
20 |
14 |
19 | {/*
15 | 
*/}
17 |
18 |
22 |
26 |
30 | {blogPriseState ? (
31 |
35 | ) : null}
36 |
37 |
10 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/containers/Blog/blogContentMessage.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import { apiName } from "config/api";
3 | import { flexCenter, getClass } from "utils/dom";
4 | import { useInViewport } from "hook/useInView";
5 | import { LoadRender } from "components/LoadRender";
6 | import { BlogContentPrimaryMessage } from "./blogContentMessagePrimary";
7 | import { BlogProps, PrimaryCommentProps, UserProps } from "types";
8 |
9 | export const BlogContentMessage = ({ blogId }: Pick
11 |
24 |
12 |
17 | 微信打赏
13 |
14 | 
15 |
16 |
18 |
23 | 支付宝打赏
19 |
20 | 
21 |
22 |
17 | >
20 | token
21 | query={{ blogId }}
22 | revalidateOnMount={isInView}
23 | apiPath={apiName.primaryMessage}
24 | loaded={(data) =>
25 | data.length ?
30 | 留言区
18 | {isViewRef.current && ( 19 |暂时没有留言
26 | }
27 | />
28 | )}
29 |
34 |
43 | );
44 | };
45 |
46 | // use memo to prevent render
47 | export const BlogContentMessageMarkdownWithMemo = memo(BlogContentMessageMarkdown);
48 |
--------------------------------------------------------------------------------
/containers/Blog/blogContentTypeAndTag.tsx:
--------------------------------------------------------------------------------
1 | import { blogOrigin } from "config/publish";
2 | import { BlogProps, ClientTagProps, TypeProps } from "types";
3 | import { flexBetween, getClass } from "utils/dom";
4 |
5 | export const BlogContentTypeAndTag = ({
6 | typeContent,
7 | tagContent,
8 | blogOriginState,
9 | }: {
10 | typeContent: TypeProps["typeContent"];
11 | tagContent: ClientTagProps["tagContent"];
12 | blogOriginState: BlogProps["blogOriginState"];
13 | }) => (
14 |
16 |
33 |
17 | 分类 >
18 | {typeContent}
19 | |
20 | 来源 >
21 | {blogOrigin.find((it) => Number(it.value) === blogOriginState)?.name}
22 |
23 |
24 | {tagContent &&
25 | tagContent.length &&
26 | tagContent.map((item, i) => (
27 |
28 | {item}
29 |
30 | ))}
31 |
32 |
20 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/containers/Editor/editorSubmit.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "components/Button";
2 | import { useRouter } from "next/dist/client/router";
3 |
4 | export const EditorSubmit = ({ submit }: { submit: () => Promise-
22 |
9 |
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/containers/Editor/index.tsx:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { PublishHead as EditorHead } from "components/Publish/publishHead";
3 | import { PublishEditor as EditorEditor } from "components/Publish/publishEditor";
4 | import { PublishTypeAndTag as EditorTypeTag } from "components/Publish/publishTypeAndTag";
5 | import { PublishImage as EditorImage } from "containers/Publish/publishImage";
6 | import { PublishState as EditorState } from "components/Publish/publishState";
7 | import { EditorSubmit } from "./editorSubmit";
8 | import { useUserRequest } from "hook/useUser";
9 | import { useUpdateBlog } from "hook/useBlog";
10 | import { BlogProps, ClientTagProps, TypeProps, UserProps } from "types";
11 |
12 | export const Editor = (props: BlogProps & UserProps & TypeProps & ClientTagProps) => {
13 | const request = useUserRequest({ method: "post", apiPath: apiName.updateBlog, header: { apiToken: true }, data: { oldProps: props }, cache: false });
14 |
15 | const [ref, submit] = useUpdateBlog({ request, id: props.blogId });
16 |
17 | return (
18 |
19 |
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/containers/Login/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/basic.module";
2 |
3 | .loginForm {
4 | position: relative;
5 | box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, 0.2);
6 | @include desktop {
7 | width: 50%;
8 | }
9 | @include mobile {
10 | width: 80%;
11 | }
12 | }
13 |
14 | .success {
15 | position: absolute;
16 | font-size: 12px;
17 | color: green;
18 | right: 2px;
19 | top: 50%;
20 | transform: translateY(-50%);
21 | }
22 |
23 | .fail {
24 | position: absolute;
25 | font-size: 12px;
26 | color: red;
27 | right: 2px;
28 | top: 50%;
29 | transform: translateY(-50%);
30 | }
31 |
32 | .back {
33 | right: 10px;
34 | top: 14px;
35 | text-decoration: none !important;
36 | transition-property: color;
37 | transition-duration: 0.2s;
38 | }
39 |
40 | .checkCode {
41 | transition-property: height;
42 | transition-duration: 0.3s;
43 | }
44 |
--------------------------------------------------------------------------------
/containers/Login/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { useState } from "react";
3 | import { LoginUsername } from "./loginUsername";
4 | import { LoginPassword } from "./loginPassword";
5 | import { LoginCheckCode } from "./loginCheckCode";
6 | import { LoginSubmit } from "./loginSubmit";
7 | import { useLogin } from "hook/useUser";
8 | import { flexCenter, getClass } from "utils/dom";
9 | import { SimpleElement } from "types/components";
10 |
11 | import style from "./index.module.scss";
12 |
13 | export const Login: SimpleElement = () => {
14 | const formRef = useLogin();
15 |
16 | const [username, setUsername] = useState
22 |
23 |
24 |
25 | 返回首页
26 |
27 |
28 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/containers/Login/loginCheckCode.tsx:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { AnimationItem } from "components/AnimationList";
3 | import { useAutoLoadCheckCodeImg, useAutoSetHeight } from "hook/useAuto";
4 | import { clearImg } from "utils/image";
5 | import { actionHandler } from "utils/action";
6 | import { flexBetween, getClass } from "utils/dom";
7 |
8 | import style from "./index.module.scss";
9 |
10 | export const LoginCheckCode = ({ show }: { show: boolean }) => {
11 | const [ref, height] = useAutoSetHeight登录
29 | 35 |
22 |
25 |
30 |
26 | ![]()
27 |
28 |
29 |
7 |
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/containers/Login/loginSubmit.tsx:
--------------------------------------------------------------------------------
1 | export const LoginSubmit = ({ enabled }: { enabled: boolean }) => {
2 | return (
3 |
4 |
7 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/containers/Login/loginUsername.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "components/Input";
2 | import { login } from "config/user";
3 |
4 | export const LoginUsername = ({ setState }: { setState: (p: boolean) => void }) => {
5 | return (
6 |
7 |
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/containers/Main/index.tsx:
--------------------------------------------------------------------------------
1 | import { MainLeft } from "./mainLeft";
2 | import { MainRight } from "./mainRight";
3 | import { SimpleElement } from "types/components";
4 |
5 | export const Main: SimpleElement = () => {
6 | return (
7 |
8 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/containers/Main/mainLeft.tsx:
--------------------------------------------------------------------------------
1 | import { MainLeftHead } from "./mainLeftHead";
2 | import { MainLeftFoot } from "./mainLeftFoot";
3 | import { MainLeftContent } from "./mainLeftContent";
4 | import { SimpleElement } from "types/components";
5 |
6 | export const MainLeft: SimpleElement = () => {
7 | return (
8 |
9 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/containers/Main/mainLeftContent.tsx:
--------------------------------------------------------------------------------
1 | import { useHome } from "hook/useHome";
2 | import { WithReadBlogItem as MainLeftItem } from "components/BlogItem";
3 | import { AnimationList } from "components/AnimationList";
4 | import { SimpleElement } from "types/components";
5 |
6 | export const MainLeftContent: SimpleElement = () => {
7 | const { currentPageBlogs } = useHome();
8 |
9 | return (
10 |
10 |
14 |
10 | 博客
11 |
12 | 共{allPage}页
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/containers/Main/mainRight.tsx:
--------------------------------------------------------------------------------
1 | import { mainRight } from "config/home";
2 | import { AnimationItem } from "components/AnimationList";
3 | import { MainRightType } from "./mainRightType";
4 | import { MainRightTag } from "./mainRightTag";
5 | import { MainRightCommend } from "./mainRightCommend";
6 | import { SimpleElement } from "types/components";
7 |
8 | export const MainRight: SimpleElement = () => {
9 | return (
10 |
12 |
16 |
13 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/containers/Main/mainRightCommendItem.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { HomeBlogProps } from "types";
3 |
4 | export const MainRightCommendItem = ({ blogTitle, blogId }: Pick
15 | {commendBlogs.map(({ blogId, blogTitle }) => (
16 |
19 |
17 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/containers/Main/mainRightTagItem.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import Link from "next/link";
3 | import { Tag } from "components/Tag";
4 |
5 | export const MainRightTagItem = ({ tagName, tagCount, changeCurrentTag }: { tagName: string; tagCount: number; changeCurrentTag: (p: string) => void }) => {
6 | const clickHandler = useCallback(() => changeCurrentTag(tagName), [changeCurrentTag, tagName]);
7 |
8 | return (
9 |
10 |
11 |
19 |
20 | needUpdate
21 | needInitialData
22 | initialData={tag}
23 | apiPath={apiName.tag}
24 | loaded={(data) => (
25 |
26 | {data.map(({ tagId, tagContent, tagCount }) => (
27 |
30 | )}
31 | />
32 |
33 |
17 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/containers/Main/mainRightTypeItem.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { useCallback } from "react";
3 | import { flexBetween, getClass } from "utils/dom";
4 |
5 | export const MainRightTypeItem = ({
6 | typeName,
7 | typeCount,
8 | changeCurrentType,
9 | }: {
10 | typeName: string;
11 | typeCount: number;
12 | changeCurrentType: (t: string) => void;
13 | }) => {
14 | const clickHandler = useCallback(() => changeCurrentType(typeName), [changeCurrentType, typeName]);
15 |
16 | return (
17 |
18 |
19 | {typeName}
20 | {typeCount}
21 |
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/containers/Manage/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/variable.module";
2 | @import "../../styles/basic.module";
3 |
4 | .closeIcon {
5 | cursor: pointer;
6 | &:hover {
7 | color: indigo;
8 | }
9 | }
10 |
11 | .item {
12 | min-width: 160px;
13 | }
14 |
15 | .swatchLink {
16 | text-decoration: none !important;
17 | transition-property: color;
18 | transition-duration: 0.2s;
19 | cursor: pointer;
20 | }
21 |
22 | .blogItem {
23 | .caverItem {
24 | position: absolute;
25 | width: 50%;
26 | height: 0;
27 | left: 50%;
28 | top: 0;
29 | overflow: hidden;
30 | background-color: transparent;
31 | transition-property: background;
32 | transition-duration: 0.2s;
33 | }
34 |
35 | &:hover {
36 | .caverItem {
37 | height: 100%;
38 | background-color: rgba(100, 100, 100, 0.6);
39 | }
40 | }
41 | }
42 |
43 | .deleteBlogItem {
44 |
45 | @include desktop {
46 | max-width: 600px;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/containers/Manage/index.tsx:
--------------------------------------------------------------------------------
1 | import { ManageLeft } from "./manageLeft";
2 | import { ManageRight } from "./manageRight";
3 |
4 | export const Manage = ({ userId }: { userId: string }) => {
5 | return (
6 |
19 |
35 |
20 |
21 | needUpdate
22 | needInitialData
23 | initialData={type}
24 | apiPath={apiName.type}
25 | loaded={(data) => (
26 |
27 | {data.map(({ typeId, typeContent, typeCount }) => (
28 |
31 | )}
32 | />
33 |
34 |
7 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/containers/Manage/manageAddModule.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Input } from "components/Input";
3 | import { Button } from "components/Button";
4 | import { addModule } from "config/manage";
5 | import { useAddRequest } from "hook/useManage";
6 | import { AutoRequestType } from "types/utils";
7 | import { apiName } from "config/api";
8 |
9 | export const ManageAddModule = ({
10 | request,
11 | judgeApiName,
12 | fieldName,
13 | successCallback,
14 | }: {
15 | request: AutoRequestType;
16 | judgeApiName: apiName;
17 | fieldName: string;
18 | successCallback: () => void;
19 | }) => {
20 | const [bool, setBool] = useState
29 |
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/containers/Manage/manageAddTagButton.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useMemo } from "react";
2 | import { mutate } from "swr";
3 | import { apiName } from "config/api";
4 | import { ManageAddModule } from "./manageAddModule";
5 | import { createRequest } from "utils/fetcher";
6 | import { useUserRequest } from "hook/useUser";
7 | import { useManageToAddModule } from "hook/useManage";
8 | import { SimpleElement } from "types/components";
9 |
10 | export const ManageAddTagButton: SimpleElement = () => {
11 | const request = useUserRequest({ method: "post", apiPath: apiName.addTag, cache: false });
12 |
13 | const successCallback = useCallback(() => {
14 | const tagRequest = createRequest({ apiPath: apiName.tag });
15 | tagRequest.deleteCache();
16 | mutate(tagRequest.cacheKey);
17 | }, []);
18 |
19 | const body = useMemo(
20 | () =>
18 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/containers/Manage/manageLeft.tsx:
--------------------------------------------------------------------------------
1 | import { ManageSearch } from "./manageSearch";
2 | import { ManageResult } from "./manageResult";
3 | import { UserProps } from "types";
4 |
5 | export const ManageLeft = ({ userId }: Pick删除以下项目：
19 | {deleteItem}
20 |
21 |
22 |
23 |
8 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/containers/Manage/manageResultAll.tsx:
--------------------------------------------------------------------------------
1 | import { FootPage } from "components/PageFoot";
2 | import { WithWriteBlogItem as SearchResult } from "components/BlogItem";
3 | import { useBasePage } from "hook/useBase";
4 | import type { ClientTagProps, HomeBlogProps, TypeProps, UserProps } from "types";
5 |
6 | export const ManageResultAll = ({ data }: { data: Array没有结果显示！
22 | )}
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/containers/Manage/manageResultSearch.tsx:
--------------------------------------------------------------------------------
1 | import { FootPage } from "components/PageFoot";
2 | import { Loading } from "components/Loading";
3 | import { ManageDeleteBlogItem } from "./manageDeleteBlogItem";
4 | import { getClass } from "utils/dom";
5 | import { useBasePage } from "hook/useBase";
6 | import { manageLength } from "config/manage";
7 | import { ClientReducer } from "store/reducer/client/type";
8 | import { actionName } from "config/action";
9 |
10 | import style from "./index.module.scss";
11 |
12 | export const ManageResultSearch = (props: { data?: ClientReducer[actionName.currentResult]["data"]; loading?: boolean } = {}) => {
13 | const { data = [], loading = false } = props;
14 |
15 | const { currentPageData, currentPage, increaseAble, increasePage, decreaseAble, decreasePage } = useBasePage({
16 | data,
17 | pageLength: manageLength,
18 | });
19 |
20 | return (
21 | <>
22 | {loading ? (
23 |
28 |
30 | ))}
31 | 没有搜索结果！
35 | )}
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/containers/Manage/manageRight.tsx:
--------------------------------------------------------------------------------
1 | import { ManageTag } from "./manageTag";
2 | import { ManageType } from "./manageType";
3 | import { ManageAddTagButton } from "./manageAddTagButton";
4 | import { ManageAddTypeButton } from "./manageAddTypeButton";
5 | import { SimpleElement } from "types/components";
6 |
7 | export const ManageRight: SimpleElement = () => {
8 | return (
9 |
10 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/containers/Manage/manageSearch.tsx:
--------------------------------------------------------------------------------
1 | import { Drop } from "components/Drop";
2 | import { Button } from "components/Button";
3 | import { LoadRender } from "components/LoadRender";
4 | import { useSearch } from "hook/useManage";
5 | import { apiName } from "config/api";
6 | import { DropItemProps, SimpleElement } from "types/components";
7 | import { ServerTagProps, TypeProps } from "types";
8 |
9 | export const ManageSearch: SimpleElement = () => {
10 | const [ref, search] = useSearch();
11 |
12 | return (
13 |
11 |
19 |
12 | 标签
13 |
14 |
16 |
18 |
20 |
28 |
21 | 分类
22 |
23 |
25 |
27 |
14 |
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/containers/Manage/manageTag.tsx:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { LoadRender } from "components/LoadRender";
3 | import { ManageDeleteTagItem } from "./manageDeleteTagItem";
4 | import { SimpleElement } from "types/components";
5 | import { ServerTagProps } from "types";
6 |
7 | export const ManageTag: SimpleElement = () => {
8 | return (
9 |
10 |
11 | needUpdate
12 | needInitialData
13 | apiPath={apiName.tag}
14 | loaded={(data) => {
15 | return (
16 | <>
17 | {data.map(({ tagCount, tagContent, tagId, tagState }) => (
18 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/containers/Manage/manageType.tsx:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { LoadRender } from "components/LoadRender";
3 | import { ManageDeleteTypeItem } from "./manageDeleteTypeItem";
4 | import { SimpleElement } from "types/components";
5 | import { TypeProps } from "types";
6 |
7 | export const ManageType: SimpleElement = () => {
8 | return (
9 |
19 |
21 | ))}
22 |
23 | );
24 | }}
25 | />
26 |
10 |
11 | needUpdate
12 | needInitialData
13 | apiPath={apiName.type}
14 | loaded={(data) => {
15 | return (
16 | <>
17 | {data.map(({ typeId, typeContent, typeCount, typeState }) => (
18 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/containers/NotLogin/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { SimpleElement } from "types/components";
3 |
4 | export const NotLogin: SimpleElement = () => {
5 | return (
6 |
17 | );
18 | };
--------------------------------------------------------------------------------
/containers/Publish/index.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/basic.module';
2 |
3 | .btn {
4 | right: 4px;
5 | top: 50%;
6 | z-index: 1;
7 | transform: translateY(-50%);
8 | }
9 |
10 | .imgContainer {
11 | padding-bottom: 56%;
12 | @include desktop {
13 | width: 400px;
14 | }
15 | @include mobile {
16 | width: 100%;
17 | max-width: 400px;
18 | min-width: 300px;
19 | }
20 | }
21 |
22 | .imgItem {
23 | top: 50%;
24 | left: 50%;
25 | transform: translate(-50%, -50%);
26 | cursor: pointer;
27 | }
28 |
29 | .imgLoading {
30 | top: 50%;
31 | left: 50%;
32 | transform: translate(-50%, -50%);
33 | }
34 |
--------------------------------------------------------------------------------
/containers/Publish/index.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 | import { apiName } from "config/api";
3 | import { editorId } from "config/publish";
4 | import { usePublish } from "hook/useBlog";
5 | import { createRequest } from "utils/fetcher";
6 | import { PublishHead } from "components/Publish/publishHead";
7 | import { PublishState } from "components/Publish/publishState";
8 | import { PublishEditor } from "components/Publish/publishEditor";
9 | import { PublishTypeAndTag } from "components/Publish/publishTypeAndTag";
10 | import { PublishImage } from "./publishImage";
11 | import { PublishSubmit } from "./publishSubmit";
12 | import { SimpleElement } from "types/components";
13 |
14 | export const Publish: SimpleElement = () => {
15 | const request = useMemo(() => createRequest({ method: "post", apiPath: apiName.publishBlog, header: { apiToken: true }, cache: false }), []);
16 |
17 | const [ref, submit] = usePublish({ request, id: editorId });
18 |
19 | return (
20 |
19 |
21 | ))}
22 |
23 | );
24 | }}
25 | />
26 |
21 |
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/containers/Publish/publishImage.tsx:
--------------------------------------------------------------------------------
1 | import { RefObject, useCallback } from "react";
2 | import { getClass } from "utils/dom";
3 | import { useInputToImageModule } from "hook/useBlog";
4 | import { PublishImageModule } from "./publishImageModule";
5 | import { BlogProps } from "types";
6 |
7 | import style from "./index.module.scss";
8 |
9 | export const PublishImage = ({ blogImgLink }: Partial
24 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/containers/Publish/publishSubmit.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "components/Button";
2 | import { useRouter } from "next/dist/client/router";
3 |
4 | export const PublishSubmit = ({ submit }: { submit: () => Promise
25 |
29 | 首图
30 |
31 |
32 |
35 |
36 |
9 |
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/containers/ReLogin/index.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import { Button } from "components/Button";
3 | import { useLogout } from "hook/useUser";
4 | import { useRouter } from "next/dist/client/router";
5 | import { flexBetween, getClass } from "utils/dom";
6 | import { SimpleElement } from "types/components";
7 |
8 | export const ReLogin: SimpleElement = () => {
9 | const logout = useLogout();
10 |
11 | const router = useRouter();
12 |
13 | const reLogin = useCallback(() => logout().then(router.reload).catch(router.reload), [router, logout]);
14 |
15 | return (
16 |
17 |
20 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/containers/Tag/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/basic.module";
2 |
3 | .autoHide {
4 | max-height: 206px;
5 | overflow-y: auto;
6 | @include mobile {
7 | display: none;
8 | }
9 | }
10 |
11 | .tagActive {
12 | background-color: #ccc;
13 | & * {
14 | background-color: inherit;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/containers/Tag/index.tsx:
--------------------------------------------------------------------------------
1 | import { TagHead } from "./tagHead";
2 | import { TagFoot } from "./tagFoot";
3 | import { TagContent } from "./tagContent";
4 | import { LoadRender } from "components/LoadRender";
5 | import { useHome } from "hook/useHome";
6 | import { apiName } from "config/api";
7 | import { SimpleElement } from "types/components";
8 | import { HomeProps } from "store/reducer/server/action/home";
9 |
10 | export const Tag: SimpleElement = () => {
11 | const { blogs } = useHome();
12 |
13 | return (
14 | <>
15 | 访问错误！
18 |当前已经是登录状态，不能重复登录！
19 |20 |
点击下面按钮返回，或者点击使用其他身份登录
21 |
22 |
25 |
26 |
27 |
17 |
18 | needUpdate
19 | needInitialData
20 | initialData={blogs}
21 | apiPath={apiName.home}
22 | loaded={(data) => {
23 | return (
24 | <>
25 |
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/containers/Tag/tagFoot.tsx:
--------------------------------------------------------------------------------
1 | import { FootPage } from "components/PageFoot";
2 | import { useTag } from "hook/useTag";
3 | import { HomeProps } from "store/reducer/server/action/home";
4 |
5 | export const TagFoot = ({ blogs }: { blogs: HomeProps }) => {
6 | let { currentPage, increaseAble, decreaseAble, increasePage, decreasePage, currentPageBlogs } = useTag({ blogs });
7 |
8 | return currentPageBlogs.length ? (
9 |
13 |
14 | 标签
15 |
21 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/containers/Type/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/basic.module";
2 |
3 | .autoHide {
4 | max-height: 206px;
5 | overflow-y: auto;
6 | @include mobile {
7 | display: none;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/containers/Type/index.tsx:
--------------------------------------------------------------------------------
1 | import { TypeHead } from "./typeHead";
2 | import { TypeContent } from "./typeContent";
3 | import { TypeFoot } from "./typeFoot";
4 | import { LoadRender } from "components/LoadRender";
5 | import { useHome } from "hook/useHome";
6 | import { apiName } from "config/api";
7 | import { SimpleElement } from "types/components";
8 | import { HomeProps } from "store/reducer/server/action/home";
9 |
10 | export const Type: SimpleElement = () => {
11 | const { blogs } = useHome();
12 |
13 | return (
14 | <>
15 |
14 | 标签
15 |
16 | 共
17 | {tag.length}
18 | 个
19 |
20 |
21 |
22 | {tag.length &&
23 | tag.map(({ tagId, tagContent, tagCount }) => (
24 |
29 |
25 |
27 | ))}
28 |
17 |
18 | needUpdate
19 | needInitialData
20 | initialData={blogs}
21 | apiPath={apiName.home}
22 | loaded={(data) => {
23 | return (
24 | <>
25 |
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/containers/Type/typeFoot.tsx:
--------------------------------------------------------------------------------
1 | import { FootPage } from "components/PageFoot";
2 | import { useType } from "hook/useType";
3 | import { HomeProps } from "store/reducer/server/action/home";
4 |
5 | export const TypeFoot = ({ blogs }: { blogs: HomeProps }) => {
6 | let { currentPage, increaseAble, decreaseAble, increasePage, decreasePage, currentPageBlogs } = useType({ blogs });
7 |
8 | return currentPageBlogs.length ? (
9 |
11 |
12 | 分类
13 |
19 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module NodeJS {
2 | interface Process {
3 | browser: boolean;
4 | }
5 | interface ProcessEnv {
6 | BING_URL: string;
7 | BING_API: string;
8 | DATABASE: string;
9 | COOKIE_PARSER: string;
10 | NEXT_PUBLIC_MAN: string;
11 | NEXT_PUBLIC_WOMEN: string;
12 | NEXT_PUBLIC_ABOUT: string;
13 | NEXT_PUBLIC_ADMIN: string;
14 | NEXT_PUBLIC_ONE_SAY: string;
15 | NEXT_PUBLIC_STRING: string;
16 | NEXT_PUBLIC_API_HOST: string;
17 | NEXT_PUBLIC_API_TOKEN: string;
18 | NEXT_PUBLIC_IP_ADDRESS: string;
19 | }
20 | }
21 |
22 | interface Window {
23 | __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function;
24 | __cache: any
25 | }
26 |
--------------------------------------------------------------------------------
/hook/useHeader.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef } from "react";
2 | import { useRouter } from "next/dist/client/router";
3 | import { actionName } from "config/action";
4 | import { useCurrentState } from "./useBase";
5 | import { setDataSuccess_client } from "store/reducer/client/share/action";
6 |
7 | interface UseHeaderItemType {
8 | (props?: { needInitHead?: boolean }): { currentHeader: string; changeCurrentHeader: (headItem: string) => void };
9 | }
10 |
11 | const useHeaderItem: UseHeaderItemType = (props = {}) => {
12 | const { needInitHead = false } = props;
13 | const { asPath } = useRouter();
14 | const { state: currentHeader, dispatch } = useCurrentState((state) => state.client[actionName.currentHeader]["data"]);
15 | const ref = useRef
12 | 分类
13 |
14 | 共
15 | {type.length}
16 | 个
17 |
18 |
19 |
20 | {type.length ? (
21 | type.map(({ typeId, typeContent, typeCount }) => (
22 |
30 |
23 |
25 | ))
26 | ) : (
27 | nothing to display
28 | )}
29 |
8 |
19 |
20 | );
21 | };
22 |
23 | NotFound.title = "未知页面";
24 |
25 | export default NotFound;
26 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import { NextComponentType } from "next";
3 | import { AppProps } from "next/app";
4 | import { wrapper } from "store";
5 | import { Layout } from "components/Layout";
6 |
7 | import 'animate.css';
8 |
9 | import '@splidejs/react-splide/css';
10 |
11 | import "../styles/globals.css";
12 |
13 | type MyNextComponent
16 |
18 | );
19 | };
20 |
21 | Archive.title = "归档";
22 |
23 | export default Archive;
24 |
25 | export const getServerSideProps = wrapper.getServerSideProps(
26 | autoDispatchTokenHandler(async ({ store }) => {
27 | // action
28 | store.dispatch(getDataAction_Server({ name: apiName.home }));
29 | // end the saga
30 | store.dispatch(END);
31 | // wait saga end
32 | await store.sagaTask?.toPromise();
33 | // add home state
34 | store.dispatch(getDataSuccess_Server({ name: apiName.home, data: store.getState().server[apiName.home]["data"] }));
35 | // 当前页面需要的数据{'2020': [...], '2021': [....]}
36 | const blogs = store.getState().server[apiName.home]["data"];
37 | const groupBlogs = groupBy(blogs, "blogCreateYear");
38 | store.dispatch(setDataSuccess_client({ name: actionName.currentArchive, data: groupBlogs }));
39 | })
40 | );
41 |
--------------------------------------------------------------------------------
/pages/editor/[id].tsx:
--------------------------------------------------------------------------------
1 | import { wrapper } from "store";
2 | import { END } from "redux-saga";
3 | import { apiName } from "config/api";
4 | import { actionName } from "config/action";
5 | import { autoDispatchTokenHandler } from "config/ssr";
6 | import { animateFadeIn, getClass } from "utils/dom";
7 | import { Editor } from "containers/Editor";
8 | import { setDataSuccess_client } from "store/reducer/client/share/action";
9 | import { getDataAction_Server, getDataSuccess_Server } from "store/reducer/server/share/action";
10 | import { MyNextComponent } from "pages/_app";
11 | import { BlogProps, ClientTagProps, TypeProps, UserProps } from "types";
12 |
13 | const EditorContent: MyNextComponent<{ blogContent: BlogProps & TypeProps & ClientTagProps & UserProps }> = ({ blogContent }) => {
14 | return (
15 |
16 |
18 | );
19 | };
20 |
21 | EditorContent.title = "编辑";
22 |
23 | export const getServerSideProps = wrapper.getServerSideProps(
24 | autoDispatchTokenHandler(async ({ store, ...etc }) => {
25 | // 获取当前需要加载的博客详细信息
26 | const {
27 | params: { id },
28 | } = etc;
29 | store.dispatch(setDataSuccess_client({ name: actionName.currentBlogId, data: id }));
30 | store.dispatch(getDataAction_Server({ name: apiName.blog }));
31 | // end the saga
32 | store.dispatch(END);
33 | // wait saga end
34 | await store.sagaTask?.toPromise();
35 | store.dispatch(getDataSuccess_Server({ name: apiName.blog, data: { [id]: store.getState().server[apiName.blog]["data"][id] } }));
36 | return { props: { blogContent: store.getState().server[apiName.blog]["data"][id] } };
37 | })
38 | );
39 |
40 | export default EditorContent;
41 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { wrapper } from "store";
2 | import { END } from "redux-saga";
3 | import { Main } from "containers/Main";
4 | import { MyNextComponent } from "./_app";
5 | import { apiName } from "config/api";
6 | import { autoDispatchTokenHandler } from "config/ssr";
7 | import { animateFadeIn, getClass } from "utils/dom";
8 | import { getDataAction_Server, getDataSuccess_Server } from "store/reducer/server/share/action";
9 |
10 | const Home: MyNextComponent = () => {
11 | return (
12 |
13 |
14 |
15 | );
16 | };
17 |
18 | Home.title = "首页";
19 |
20 | export default Home;
21 |
22 | // 加载home页面数据
23 | export const getServerSideProps = wrapper.getServerSideProps(
24 | autoDispatchTokenHandler(async ({ store }) => {
25 | // action
26 | store.dispatch(getDataAction_Server({ name: apiName.home }));
27 | // end the saga
28 | store.dispatch(END);
29 | // wait saga end
30 | await store.sagaTask?.toPromise();
31 | // dispatch action to change state
32 | store.dispatch(getDataSuccess_Server({ name: apiName.home, data: store.getState().server[apiName.home]["data"] }));
33 | })
34 | );
35 |
--------------------------------------------------------------------------------
/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import { wrapper } from "store";
2 | import { MyNextComponent } from "./_app";
3 | import { Login as LoginContent } from "containers/Login";
4 | import { ReLogin as ReLoginContent } from "containers/ReLogin";
5 | import { autoDispatchTokenHandler } from "config/ssr";
6 | import { animateFadeIn, flexCenter, getClass } from "utils/dom";
7 |
8 | const Login: MyNextComponent<{ isLogin: boolean }> = ({ isLogin }) => {
9 | return {isLogin ?
;
10 | };
11 |
12 | Login.container = false;
13 |
14 | Login.title = "登录";
15 |
16 | // 判断是否已经登录
17 | export const getServerSideProps = wrapper.getServerSideProps(
18 | autoDispatchTokenHandler(async ({ req }) => ({
19 | props: {
20 | isLogin: req.session["userCache"],
21 | },
22 | }))
23 | );
24 |
25 | export default Login;
26 |
--------------------------------------------------------------------------------
/pages/manage.tsx:
--------------------------------------------------------------------------------
1 | import { wrapper } from "store";
2 | import { MyNextComponent } from "./_app";
3 | import { NotLogin } from "containers/NotLogin";
4 | import { Manage as ManageContent } from "containers/Manage";
5 | import { autoDispatchTokenHandler } from "config/ssr";
6 | import { animateFadeIn, getClass } from "utils/dom";
7 |
8 | const Manage: MyNextComponent<{ isLogin: boolean; userId: string }> = ({ isLogin, userId }) => {
9 | return {isLogin ?
;
10 | };
11 |
12 | Manage.title = "管理";
13 |
14 | // 判断是否已经登录
15 | export const getServerSideProps = wrapper.getServerSideProps(
16 | autoDispatchTokenHandler(async ({ req }) => ({
17 | props: {
18 | isLogin: !!req.session["userCache"],
19 | userId: req.session["userCache"]?.userId || null,
20 | },
21 | }))
22 | );
23 |
24 | export default Manage;
25 |
--------------------------------------------------------------------------------
/pages/publish.tsx:
--------------------------------------------------------------------------------
1 | import { wrapper } from "store";
2 | import { NotLogin } from "containers/NotLogin";
3 | import { Publish as PublishContent } from "containers/Publish";
4 | import { animateFadeIn, getClass } from "utils/dom";
5 | import { autoDispatchTokenHandler } from "config/ssr";
6 | import { MyNextComponent } from "./_app";
7 |
8 | const Publish: MyNextComponent<{ isLogin: boolean }> = ({ isLogin }) => {
9 | return {isLogin ?
;
10 | };
11 |
12 | Publish.title = "发布";
13 |
14 | // 判断是否已经登录
15 | export const getServerSideProps = wrapper.getServerSideProps(
16 | autoDispatchTokenHandler(async ({ req }) => ({
17 | props: {
18 | isLogin: !!req.session["userCache"],
19 | },
20 | }))
21 | );
22 |
23 | export default Publish;
24 |
--------------------------------------------------------------------------------
/pages/tag.tsx:
--------------------------------------------------------------------------------
1 | import { wrapper } from "store";
2 | import { END } from "redux-saga";
3 | import { Tag as TagContent } from "containers/Tag";
4 | import { MyNextComponent } from "./_app";
5 | import { apiName } from "config/api";
6 | import { autoDispatchTokenHandler } from "config/ssr";
7 | import { animateFadeIn, getClass } from "utils/dom";
8 | import { getDataAction_Server, getDataSuccess_Server } from "store/reducer/server/share/action";
9 |
10 | const Tag: MyNextComponent = () => {
11 | return (
12 |
13 |
15 | );
16 | };
17 |
18 | Tag.title = "标签";
19 |
20 | export default Tag;
21 |
22 | // 加载tag页面数据
23 | export const getServerSideProps = wrapper.getServerSideProps(
24 | autoDispatchTokenHandler(async ({ store }) => {
25 | // action
26 | store.dispatch(getDataAction_Server({ name: apiName.tag }));
27 | // end the saga
28 | store.dispatch(END);
29 | // wait saga end
30 | await store.sagaTask?.toPromise();
31 | // dispatch action to change tag state
32 | store.dispatch(getDataSuccess_Server({ name: apiName.tag, data: store.getState().server[apiName.tag]["data"] }));
33 | })
34 | );
35 |
--------------------------------------------------------------------------------
/pages/type.tsx:
--------------------------------------------------------------------------------
1 | import { wrapper } from "store";
2 | import { END } from "redux-saga";
3 | import { Type as TypeContent } from "containers/Type";
4 | import { MyNextComponent } from "./_app";
5 | import { apiName } from "config/api";
6 | import { autoDispatchTokenHandler } from "config/ssr";
7 | import { animateFadeIn, getClass } from "utils/dom";
8 | import { getDataAction_Server, getDataSuccess_Server } from "store/reducer/server/share/action";
9 |
10 | const Type: MyNextComponent = () => {
11 | return (
12 |
13 |
15 | );
16 | };
17 |
18 | Type.title = "分类";
19 |
20 | export default Type;
21 |
22 | // 加载type页面数据
23 | export const getServerSideProps = wrapper.getServerSideProps(
24 | autoDispatchTokenHandler(async ({ store }) => {
25 | // action
26 | store.dispatch(getDataAction_Server({ name: apiName.type }));
27 | // end the saga
28 | store.dispatch(END);
29 | // wait saga end
30 | await store.sagaTask?.toPromise();
31 | // dispatch action to change type state
32 | store.dispatch(getDataSuccess_Server({ name: apiName.type, data: store.getState().server[apiName.type]["data"] }));
33 | })
34 | );
35 |
--------------------------------------------------------------------------------
/public/avatar/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/avatar/about.jpg
--------------------------------------------------------------------------------
/public/avatar/admin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/avatar/admin.png
--------------------------------------------------------------------------------
/public/avatar/aliPay.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/avatar/aliPay.jpg
--------------------------------------------------------------------------------
/public/avatar/man.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/avatar/man.jpg
--------------------------------------------------------------------------------
/public/avatar/weichatPay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/avatar/weichatPay.png
--------------------------------------------------------------------------------
/public/avatar/woman.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/avatar/woman.jpeg
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/favicon.ico
--------------------------------------------------------------------------------
/public/font/blog.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/font/blog.ttf
--------------------------------------------------------------------------------
/public/font/测试1.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/public/font/测试1.ttf
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/server/api/3rd/3rd.ts:
--------------------------------------------------------------------------------
1 | import { Method } from "axios";
2 | import { createRequest } from "utils/fetcher";
3 | import { fail, success, wrapperMiddlewareRequest } from "server/middleware/apiHandler";
4 |
5 | const get3rdRequestAction = wrapperMiddlewareRequest({
6 | requestHandler: async function thirdRequest({ req, res }) {
7 | const { path, ...lastQuery } = req.query;
8 | const { data } = req.body;
9 | const { origin, referer, cookie, ...lastHeader } = req.headers;
10 | const request = createRequest({
11 | path: path as string,
12 | method: req.method as Method,
13 | data,
14 | query: lastQuery as { [p: string]: string },
15 | header: lastHeader,
16 | });
17 | await request
18 | .run()
19 | .then((data) => success({ res, resDate: { data } }))
20 | .catch((e) => fail({ res, resDate: { data: e.toString() } }));
21 | },
22 | cacheConfig: { needCache: true, cacheKey: ({ req }) => req.method + ":" + req.query.path },
23 | paramsConfig: { fromQuery: ["path"] },
24 | });
25 |
26 | export { get3rdRequestAction };
27 |
--------------------------------------------------------------------------------
/server/api/3rd/index.ts:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { get3rdRequestAction } from "./3rd";
3 |
4 | const thirdRequestHandler = {
5 | [apiName.thirdPath]: get3rdRequestAction,
6 | };
7 |
8 | export { thirdRequestHandler };
9 |
--------------------------------------------------------------------------------
/server/api/blog/index.ts:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import {
3 | getBlogByBlogIdAction,
4 | deleteBlogByBlogIdAAction,
5 | publishBlogAction,
6 | updateBlogByBlogIdAction,
7 | updateBlogReadAction,
8 | updateBlogByBlogIdAction_v2,
9 | } from "./blog";
10 |
11 | const blogHandler = {
12 | [apiName.blog]: getBlogByBlogIdAction,
13 | [apiName.publishBlog]: publishBlogAction,
14 | [apiName.updateBlog]: updateBlogByBlogIdAction,
15 | [apiName.deleteBlog]: deleteBlogByBlogIdAAction,
16 | [apiName.addBlogRead]: updateBlogReadAction,
17 | [apiName.updateBlog_v2]: updateBlogByBlogIdAction_v2,
18 | };
19 |
20 | export { blogHandler };
21 |
--------------------------------------------------------------------------------
/server/api/home/index.ts:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { getBlogsByParams, getHomeAction, getUserHomeAction } from "./home";
3 |
4 | const homeHandler = {
5 | [apiName.home]: getHomeAction,
6 | [apiName.search]: getBlogsByParams,
7 | [apiName.userHome]: getUserHomeAction,
8 | };
9 |
10 | export { homeHandler };
11 |
--------------------------------------------------------------------------------
/server/api/image/captcha.ts:
--------------------------------------------------------------------------------
1 | import svgCaptcha from "svg-captcha";
2 | import { catchMiddlewareHandler, compose, defaultRunRequestMiddleware, success, wrapperMiddlewareRequest } from "server/middleware/apiHandler";
3 |
4 | // 获取验证码图片
5 | const getCaptchaAction = wrapperMiddlewareRequest(
6 | {
7 | requestHandler: async function getCaptchaAction({ req, res }) {
8 | const captcha = svgCaptcha.create({
9 | noise: 4,
10 | background: "#ffffff",
11 | });
12 | req.session.captcha = captcha.text;
13 | res.type("svg");
14 | res.send(captcha.data);
15 | },
16 | },
17 | compose(catchMiddlewareHandler, defaultRunRequestMiddleware)
18 | );
19 |
20 | // 获取验证码明文
21 | const getCaptchaStrAction = wrapperMiddlewareRequest(
22 | {
23 | requestHandler: function getCaptchaStrAction({ req, res }) {
24 | success({ res, resDate: { data: req.session.captcha } });
25 | },
26 | },
27 | compose(catchMiddlewareHandler, defaultRunRequestMiddleware)
28 | );
29 |
30 | export { getCaptchaAction, getCaptchaStrAction };
31 |
--------------------------------------------------------------------------------
/server/api/image/image.ts:
--------------------------------------------------------------------------------
1 | import { getRandom } from "utils/data";
2 | import { createRequest } from "utils/fetcher";
3 | import { catchMiddlewareHandler, compose, defaultRunRequestMiddleware, success, wrapperMiddlewareRequest } from "server/middleware/apiHandler";
4 |
5 | // 获取图片请求链接
6 | const getImagePath = () => {
7 | const idx = String(getRandom(7));
8 | const n = String(getRandom(1, 7));
9 | let requestUrl = String(process.env.BING_API);
10 | requestUrl = requestUrl.replace("--n--", n);
11 | requestUrl = requestUrl.replace("--idx--", idx);
12 | return requestUrl;
13 | };
14 |
15 | // 获取所有随机图片信息
16 | const getImagesAction = wrapperMiddlewareRequest(
17 | {
18 | requestHandler: async function getImagesAction({ res }) {
19 | let { images } = await createRequest({ path: getImagePath() }).run();
20 | images = images.map((item: { [props: string]: string }) => {
21 | return { ...item, relativeUrl: `${process.env.BING_URL}${item.url}` };
22 | });
23 | success({ res, resDate: { data: images } });
24 | },
25 | },
26 | compose(catchMiddlewareHandler, defaultRunRequestMiddleware)
27 | );
28 |
29 | // 获取随机图片信息
30 | const getRandomImageAction = wrapperMiddlewareRequest(
31 | {
32 | requestHandler: async function getRandomImageAction({ res }) {
33 | const { images } = await createRequest({ path: getImagePath() }).run();
34 | const [{ relativeUrl }] = images.map((item: { [props: string]: string }) => ({ relativeUrl: `${process.env.BING_URL}${item.url}` }));
35 | success({ res, resDate: { data: relativeUrl } });
36 | },
37 | },
38 | compose(catchMiddlewareHandler, defaultRunRequestMiddleware)
39 | );
40 |
41 | export { getImagesAction, getRandomImageAction };
42 |
--------------------------------------------------------------------------------
/server/api/image/index.ts:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { getRandomImageAction, getImagesAction } from "./image";
3 | import { getCaptchaAction, getCaptchaStrAction } from "./captcha";
4 |
5 | const imageHandler = {
6 | [apiName.captcha]: getCaptchaAction,
7 | [apiName.image]: getRandomImageAction,
8 | [apiName.allImage]: getImagesAction,
9 | [apiName.captchaStr]: getCaptchaStrAction,
10 | };
11 |
12 | export { imageHandler };
13 |
--------------------------------------------------------------------------------
/server/api/index.ts:
--------------------------------------------------------------------------------
1 | import { imageHandler } from "./image";
2 | import { homeHandler } from "./home";
3 | import { tagHandler } from "./tag";
4 | import { typeHandler } from "./type";
5 | import { userHandler } from "./user";
6 | import { messageHandler } from "./message";
7 | import { blogHandler } from "./blog";
8 | import { thirdRequestHandler } from "./3rd";
9 | import { testHandler } from "./test";
10 | import { fail } from "server/middleware/apiHandler";
11 | import { Request, Response } from "express";
12 |
13 | const allHandler: { [props: string]: Function } = {
14 | ...imageHandler,
15 | ...homeHandler,
16 | ...tagHandler,
17 | ...typeHandler,
18 | ...userHandler,
19 | ...blogHandler,
20 | ...messageHandler,
21 | ...thirdRequestHandler,
22 | ...testHandler,
23 | };
24 |
25 | const apiHandler = async (req: Request, res: Response) => {
26 | let action = allHandler[req.path.slice(1)];
27 | if (action) {
28 | await action(req, res);
29 | } else {
30 | // 其他api访问转向next api router
31 | // next();
32 | fail({ res, resDate: { state: "api路径不正确", data: `请求: ${req.path}` } });
33 | }
34 | };
35 |
36 | export { apiHandler };
37 |
--------------------------------------------------------------------------------
/server/api/message/index.ts:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import {
3 | deleteChildMessageByCommentIdAction,
4 | getChildMessageByPrimaryIdAction,
5 | publishChildMessageByPrimaryIdAction,
6 | updateChildMessageByCommentIdAction,
7 | } from "./childMessage";
8 | import {
9 | deletePrimaryMessageByCommentIdAction,
10 | getPrimaryMessageByBlogIdAction,
11 | publishPrimaryMessageByBlogIdAction,
12 | updatePrimaryMessageByCommentIdAction,
13 | } from "./primaryMessage";
14 |
15 | const messageHandler = {
16 | [apiName.childMessage]: getChildMessageByPrimaryIdAction,
17 | [apiName.primaryMessage]: getPrimaryMessageByBlogIdAction,
18 | [apiName.putChildMessage]: publishChildMessageByPrimaryIdAction,
19 | [apiName.putPrimaryMessage]: publishPrimaryMessageByBlogIdAction,
20 | [apiName.deleteChildMessage]: deleteChildMessageByCommentIdAction,
21 | [apiName.deletePrimaryMessage]: deletePrimaryMessageByCommentIdAction,
22 | [apiName.updateChildMessage]: updateChildMessageByCommentIdAction,
23 | [apiName.updatePrimaryMessage]: updatePrimaryMessageByCommentIdAction,
24 | };
25 |
26 | export { messageHandler };
27 |
--------------------------------------------------------------------------------
/server/api/tag/index.ts:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { addTagAction, checkTagAction, deleteTagAction, getTagAction } from "./tag";
3 |
4 | const tagHandler = {
5 | [apiName.tag]: getTagAction,
6 | [apiName.addTag]: addTagAction,
7 | [apiName.checkTag]: checkTagAction,
8 | [apiName.deleteTag]: deleteTagAction,
9 | };
10 |
11 | export { tagHandler };
12 |
--------------------------------------------------------------------------------
/server/api/test/index.ts:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import {
3 | test_author,
4 | test_childComment,
5 | test_insertTag,
6 | test_insertType,
7 | test_insertUserEx,
8 | test_primaryComment,
9 | test_publishBlog,
10 | test_publishHome,
11 | test_registerUser,
12 | } from "./test";
13 |
14 | const testHandler = {
15 | [apiName.testBlog]: test_publishBlog,
16 | [apiName.testChild]: test_childComment,
17 | [apiName.testHome]: test_publishHome,
18 | [apiName.testPrimary]: test_primaryComment,
19 | [apiName.testTag]: test_insertTag,
20 | [apiName.testType]: test_insertType,
21 | [apiName.testUser]: test_registerUser,
22 | [apiName.testUserEx]: test_insertUserEx,
23 | [apiName.testAuthor]: test_author,
24 | };
25 |
26 | export { testHandler };
27 |
--------------------------------------------------------------------------------
/server/api/type/index.ts:
--------------------------------------------------------------------------------
1 | import { apiName } from "config/api";
2 | import { addTypeAction, checkTypeAction, deleteTypeAction, getTypeAction } from "./type";
3 |
4 | const typeHandler = {
5 | [apiName.type]: getTypeAction,
6 | [apiName.addType]: addTypeAction,
7 | [apiName.checkType]: checkTypeAction,
8 | [apiName.deleteType]: deleteTypeAction,
9 | };
10 |
11 | export { typeHandler };
12 |
--------------------------------------------------------------------------------
/server/api/user/index.ts:
--------------------------------------------------------------------------------
1 | // 用户信息的操作
2 | import { apiName } from "config/api";
3 | import {
4 | autoLoginAction,
5 | loginAction,
6 | logoutAction,
7 | registerAction,
8 | getUserExByUserIdAction,
9 | getUserByUserIdAction,
10 | getUserByUserNameAction,
11 | getAuthorByUserIdAction,
12 | } from "./user";
13 |
14 | const userHandler = {
15 | [apiName.login]: loginAction,
16 | [apiName.logout]: logoutAction,
17 | [apiName.register]: registerAction,
18 | [apiName.autoLogin]: autoLoginAction,
19 | [apiName.user]: getUserByUserIdAction,
20 | [apiName.userName]: getUserByUserNameAction,
21 | [apiName.userEx]: getUserExByUserIdAction,
22 | [apiName.author]: getAuthorByUserIdAction,
23 | };
24 |
25 | export { userHandler };
26 |
--------------------------------------------------------------------------------
/server/database/server:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrWangJustToDo/ts-next-blog/10cceff01e8575f1ae1c98e1dc95a7fd5f4cbea1/server/database/server
--------------------------------------------------------------------------------
/server/index.ts:
--------------------------------------------------------------------------------
1 | import http from "http";
2 | import next from "next";
3 | import express from "express";
4 | import { log } from "utils/log";
5 | import { setUp } from "./setup";
6 | import { init } from "./init";
7 | import { apiHandler } from "./api";
8 | import { detectionToken, generateToken } from "./check";
9 |
10 | require("dotenv").config();
11 |
12 | const port = process.env.PORT;
13 |
14 | const nextApp = next({ dev: process.env.NODE_ENV !== "production" });
15 |
16 | const handle = nextApp.getRequestHandler();
17 |
18 | const app = express();
19 |
20 | setUp(app);
21 |
22 | init(app);
23 |
24 | app.use("/api", detectionToken);
25 |
26 | app.use(generateToken);
27 |
28 | app.use("/api", apiHandler);
29 |
30 | nextApp.prepare().then(() => {
31 | app.all("*", (req, res) => {
32 | return handle(req, res);
33 | });
34 | http.createServer(app).listen(port, () => log(`=== app run on: http://localhost:${port} ===`, "warn"));
35 | });
36 |
--------------------------------------------------------------------------------
/server/init/index.ts:
--------------------------------------------------------------------------------
1 | import type { Express } from "express";
2 | import { decodeURI, initDBConnect, initSession, initUser } from "./init";
3 |
4 | const init = (expressApp: Express) => {
5 | expressApp.use(decodeURI);
6 | expressApp.use(initDBConnect);
7 | expressApp.use(initSession);
8 | expressApp.use(initUser);
9 | };
10 |
11 | export { init };
12 |
--------------------------------------------------------------------------------
/server/setup/index.ts:
--------------------------------------------------------------------------------
1 | import express, { Express } from "express";
2 | import cors from "cors";
3 | import session from "express-session";
4 | import cookieParser from "cookie-parser";
5 |
6 | const setUp = (expressApp: Express) => {
7 | expressApp.use(
8 | express.static(`${process.cwd()}/public`, {
9 | maxAge: 365 * 24 * 3600000,
10 | })
11 | );
12 |
13 | expressApp.use(express.json({ limit: "5mb" }));
14 |
15 | expressApp.use(express.urlencoded({ extended: true }));
16 |
17 | expressApp.use(cookieParser(process.env.COOKIE_PARSER));
18 |
19 | expressApp.use(
20 | cors({
21 | maxAge: 86400,
22 | origin: "*",
23 | })
24 | );
25 | expressApp.use(
26 | session({
27 | secret: "keyboard cat",
28 | resave: true,
29 | rolling: true,
30 | saveUninitialized: true,
31 | cookie: { maxAge: 600000 },
32 | name: "react-next-blog",
33 | })
34 | );
35 | };
36 |
37 | export { setUp };
38 |
--------------------------------------------------------------------------------
/server/utils/error.ts:
--------------------------------------------------------------------------------
1 | class ServerError extends Error {
2 | constructor(message: string, readonly code: number) {
3 | super(message);
4 | }
5 | }
6 |
7 | export { ServerError };
8 |
--------------------------------------------------------------------------------
/server/utils/merge.ts:
--------------------------------------------------------------------------------
1 | import mergeWith from "lodash/mergeWith";
2 | import cloneDeep from "lodash/cloneDeep";
3 | import { BlogProps, ClientTagProps, HomeBlogProps, ServerTagProps, TypeProps, UserProps } from "types";
4 |
5 | export function mergeTypeTagToBlog(
6 | blog: HomeBlogProps & UserProps,
7 | type: TypeProps[],
8 | tag: ServerTagProps[]
9 | ): HomeBlogProps & UserProps & TypeProps & ClientTagProps;
10 |
11 | export function mergeTypeTagToBlog(blog: BlogProps & UserProps, type: TypeProps[], tag: ServerTagProps[]): BlogProps & UserProps & TypeProps & ClientTagProps;
12 |
13 | export function mergeTypeTagToBlog(blog: (BlogProps & UserProps) | (HomeBlogProps & UserProps), type: TypeProps[], tag: ServerTagProps[]) {
14 | const currentTagArr = cloneDeep(tag);
15 | const currentTypeArr = cloneDeep(type);
16 | const currentType = currentTypeArr.find((it) => blog.typeId === it.typeId);
17 | const currentTagIds = blog.tagId.split(",");
18 | const currentTagArray = currentTagArr.filter((it) => currentTagIds.includes(it.tagId));
19 | let currentTag;
20 | if (currentTagArray.length > 1) {
21 | const head = currentTagArray.pop();
22 | currentTag = mergeWith(head, ...currentTagArray, (res: ServerTagProps[], srcValue: ServerTagProps) => {
23 | if (!Array.isArray(res)) {
24 | res = [res];
25 | }
26 | return res.concat(srcValue);
27 | });
28 | } else if (currentTagArray.length === 1) {
29 | const head = currentTagArray[0] as any;
30 | currentTag = Object.keys(head).reduce