From 45f6ecb31c64a93c37be8174619de99f8ee84541 Mon Sep 17 00:00:00 2001 From: wood chen Date: Fri, 20 Jun 2025 16:25:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E4=B8=BB=E9=A2=98=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E9=9B=86=E6=88=90=20Unsplash=20=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Editor.js | 2 +- src/components/Themes/BasicTheme.js | 82 +++++++++++------ src/components/Themes/MobileMockupTheme.js | 101 ++++++++++++--------- src/components/Themes/ModernTheme.js | 76 +++++++++++----- src/components/Themes/OutlineTheme.js | 76 +++++++++++----- src/components/Themes/PreviewTheme.js | 88 +++++++++++------- src/components/Themes/StylishTheme.js | 51 +++-------- 7 files changed, 292 insertions(+), 184 deletions(-) diff --git a/src/components/Editor.js b/src/components/Editor.js index 4e735f7..8079844 100644 --- a/src/components/Editor.js +++ b/src/components/Editor.js @@ -25,7 +25,7 @@ const defaultSettings = { platform: 'hashnode' }; -const devIconsUrl = "https://mirror.20200511.xyz/https://raw.githubusercontent.com/devicons/devicon/master/devicon.json" +const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json" class Editor extends React.Component { diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js index b5e6041..39d6a32 100644 --- a/src/components/Themes/BasicTheme.js +++ b/src/components/Themes/BasicTheme.js @@ -1,43 +1,71 @@ -import React from 'react'; - +import React, { useContext } from 'react'; +import { ImgContext } from '../../utils/ImgContext'; +import UnsplashSearch from '../UnsplashSearch'; const BasicTheme = ({ config }) => { const { title, bgColor, pattern, author, icon, font, customIcon } = config; + const { unsplashImage, setUnsplashImage } = useContext(ImgContext); return ( -
-
+
- -
-
-
-

{title}

-
-
- -
- { - customIcon ? -
- img +
+
+ {unsplashImage ? +
+
+ preview
- : -
- + +
+ + +
+
+

{title}

+
+ +
+ { + customIcon ? +
+ img +
+ : +
+ +
+ } +

{author}

+
+
+ + +
+ : +
+ +
} - - -

{author}

-
-
-
-
); } diff --git a/src/components/Themes/MobileMockupTheme.js b/src/components/Themes/MobileMockupTheme.js index 826510d..eb8e72c 100644 --- a/src/components/Themes/MobileMockupTheme.js +++ b/src/components/Themes/MobileMockupTheme.js @@ -1,65 +1,80 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; +import { ImgContext } from '../../utils/ImgContext'; +import UnsplashSearch from '../UnsplashSearch'; const MobileMockupTheme = ({ config }) => { const { bgColor, title, font } = config; - - const [image, setImage] = useState() + const { unsplashImage, setUnsplashImage } = useContext(ImgContext); + const [image, setImage] = useState(); return (
- - -
+
+ {unsplashImage ? +
+
+ preview +
+
+ -

{title}

+

{title}

-
-
+
+
+
+
+
+
+
-
+ {image ? +
+ preview + +
+ : +
+ setImage(URL.createObjectURL(e.target.files[0]))} + /> + 点击上传截图 +
+ } +
+
-
-
- -
- - -
- - - - {image ? -
- preview - +
: -
- setImage(URL.createObjectURL(e.target.files[0]))} - /> - 点击上传截图 +
+
- }
- - - - -
- -
); } diff --git a/src/components/Themes/ModernTheme.js b/src/components/Themes/ModernTheme.js index 35205f1..51f43a5 100644 --- a/src/components/Themes/ModernTheme.js +++ b/src/components/Themes/ModernTheme.js @@ -1,39 +1,71 @@ -import React from 'react'; - +import React, { useContext } from 'react'; +import { ImgContext } from '../../utils/ImgContext'; +import UnsplashSearch from '../UnsplashSearch'; const ModernTheme = ({ config }) => { - const { title, bgColor, pattern, author, icon, font, customIcon } = config; + const { unsplashImage, setUnsplashImage } = useContext(ImgContext); return ( -
-
-
+
+
+
+ {unsplashImage ? +
+
+ preview +
- { - customIcon ? -
- img +
+ + +
+ { + customIcon ? +
+ img +
+ : +
+ +
+ } + +
+
+

{title}

+

{author}

+
+
+
+
+ +
: -
- +
+
- } - - -
-
-

{title}

-

{author}

-
+ }
-
-
); } diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js index c1f6866..b3b4b9a 100644 --- a/src/components/Themes/OutlineTheme.js +++ b/src/components/Themes/OutlineTheme.js @@ -1,41 +1,69 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import { ImgContext } from '../../utils/ImgContext'; +import UnsplashSearch from '../UnsplashSearch'; + const OutlineTheme = ({ config }) => { const { title, bgColor, author, icon, font, customIcon } = config; + const { unsplashImage, setUnsplashImage } = useContext(ImgContext); return ( -
- - -
+
+
+
+ {unsplashImage ? +
+
+ preview +
+
+ -
- { - customIcon ? -
- img +
+ { + customIcon ? +
+ img +
+ : +
+ +
+ } +

{title}

+ +
+

{author}

+
+
+
+ +
: -
- +
+
- } -

{title}

- -
- -

{author}

- + }
- - -
- -
); } diff --git a/src/components/Themes/PreviewTheme.js b/src/components/Themes/PreviewTheme.js index 8999d4a..287f018 100644 --- a/src/components/Themes/PreviewTheme.js +++ b/src/components/Themes/PreviewTheme.js @@ -1,53 +1,79 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; +import { ImgContext } from '../../utils/ImgContext'; +import UnsplashSearch from '../UnsplashSearch'; const PreviewTheme = ({ config }) => { const { bgColor, title, font } = config; - - const [image, setImage] = useState() + const { unsplashImage, setUnsplashImage } = useContext(ImgContext); + const [image, setImage] = useState(); return (
- - -
+
+ {unsplashImage ? +
+
+ preview +
-

{title}

+
+ -
-
-
-
-
- -
+
+
+
+
+
+ +
+ {image ? +
+ preview +
+ : +
+ setImage(URL.createObjectURL(e.target.files[0]))} + /> + 点击上传截图 +
+ } +
+
- {image ? -
- preview - +
: -
- setImage(URL.createObjectURL(e.target.files[0]))} - /> - 点击上传截图 +
+
- }
-
-
); } diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js index 50d41d6..33e953f 100644 --- a/src/components/Themes/StylishTheme.js +++ b/src/components/Themes/StylishTheme.js @@ -6,81 +6,60 @@ const StylishTheme = ({ config }) => { const { title, author, font, icon, customIcon, bgColor } = config; const { unsplashImage, setUnsplashImage } = useContext(ImgContext); - return ( -
- - -
+
- -
- -
-
-

{title}

+
+
+
+

{title}

{ customIcon ? -
+
img
:
- +
} -

{author}

- - +

{author}

- - {unsplashImage ? -
- - preview - +
+ preview -
- : -
- +
- } -
- -
-
); }