feat: add new theme berry (#860)

* feat: add theme berry

* docs: add development notes

* fix: fix blank page

* chore: update implementation

* fix: fix package.json

* chore: update ui copy

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/berry/src/views/Home/baseIndex.js

@@ -0,0 +1,42 @@
+import { Box, Typography, Button, Container, Stack } from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import { GitHub } from '@mui/icons-material';
+
+const BaseIndex = () => (
+  <Box
+    sx={{
+      minHeight: 'calc(100vh - 136px)',
+      backgroundImage: 'linear-gradient(to right, #ff9966, #ff5e62)',
+      color: 'white',
+      p: 4
+    }}
+  >
+    <Container maxWidth="lg">
+      <Grid container columns={12} wrap="nowrap" alignItems="center" sx={{ minHeight: 'calc(100vh - 230px)' }}>
+        <Grid md={7} lg={6}>
+          <Stack spacing={3}>
+            <Typography variant="h1" sx={{ fontSize: '4rem', color: '#fff', lineHeight: 1.5 }}>
+              One API
+            </Typography>
+            <Typography variant="h4" sx={{ fontSize: '1.5rem', color: '#fff', lineHeight: 1.5 }}>
+              All in one 的 OpenAI 接口 <br />
+              整合各种 API 访问方式 <br />
+              一键部署，开箱即用
+            </Typography>
+            <Button
+              variant="contained"
+              startIcon={<GitHub />}
+              href="https://github.com/songquanpeng/one-api"
+              target="_blank"
+              sx={{ backgroundColor: '#24292e', color: '#fff', width: 'fit-content', boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)' }}
+            >
+              GitHub
+            </Button>
+          </Stack>
+        </Grid>
+      </Grid>
+    </Container>
+  </Box>
+);
+
+export default BaseIndex;

web/berry/src/views/Home/index.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { showError, showNotice } from 'utils/common';
+import { API } from 'utils/api';
+import { marked } from 'marked';
+import BaseIndex from './baseIndex';
+import { Box, Container } from '@mui/material';
+
+const Home = () => {
+  const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
+  const [homePageContent, setHomePageContent] = useState('');
+  const displayNotice = async () => {
+    const res = await API.get('/api/notice');
+    const { success, message, data } = res.data;
+    if (success) {
+      let oldNotice = localStorage.getItem('notice');
+      if (data !== oldNotice && data !== '') {
+        const htmlNotice = marked(data);
+        showNotice(htmlNotice, true);
+        localStorage.setItem('notice', data);
+      }
+    } else {
+      showError(message);
+    }
+  };
+
+  const displayHomePageContent = async () => {
+    setHomePageContent(localStorage.getItem('home_page_content') || '');
+    const res = await API.get('/api/home_page_content');
+    const { success, message, data } = res.data;
+    if (success) {
+      let content = data;
+      if (!data.startsWith('https://')) {
+        content = marked.parse(data);
+      }
+      setHomePageContent(content);
+      localStorage.setItem('home_page_content', content);
+    } else {
+      showError(message);
+      setHomePageContent('加载首页内容失败...');
+    }
+    setHomePageContentLoaded(true);
+  };
+
+  useEffect(() => {
+    displayNotice().then();
+    displayHomePageContent().then();
+  }, []);
+
+  return (
+    <>
+      {homePageContentLoaded && homePageContent === '' ? (
+        <BaseIndex />
+      ) : (
+        <>
+          <Box>
+            {homePageContent.startsWith('https://') ? (
+              <iframe title="home_page_content" src={homePageContent} style={{ width: '100%', height: '100vh', border: 'none' }} />
+            ) : (
+              <>
+                <Container>
+                  <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: homePageContent }}></div>
+                </Container>
+              </>
+            )}
+          </Box>
+        </>
+      )}
+    </>
+  );
+};
+
+export default Home;