xinyin025/one-api
1
0
Fork 0
mirror of https://github.com/songquanpeng/one-api.git synced 2025-11-14 04:13:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add new theme berry (#860)

Browse Source 
* 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>
This commit is contained in:
Buer
2024-01-07 14:20:07 +08:00
committed by GitHub
parent 6227eee5bc
commit 48989d4a0b
157 changed files with 13979 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
web/berry/src/ui-component/cards/CardSecondaryAction.js Normal file
View File

@@ -0,0 +1,55 @@
import PropTypes from 'prop-types';
import { useTheme } from '@mui/material/styles';
import { ButtonBase, Link, Tooltip } from '@mui/material';
// project imports
import Avatar from '../extended/Avatar';
// ==============================|| CARD SECONDARY ACTION ||============================== //
const CardSecondaryAction = ({ title, link, icon }) => {
const theme = useTheme();
return (
<Tooltip title={title || 'Reference'} placement="left">
<ButtonBase disableRipple>
{!icon && (
<Avatar component={Link} href={link} target="_blank" alt="MUI Logo" size="badge" color="primary" outline>
<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0)">
<path d="M100 260.9V131L212.5 195.95V239.25L137.5 195.95V282.55L100 260.9Z" fill={theme.palette.primary[800]} />
<path
d="M212.5 195.95L325 131V260.9L250 304.2L212.5 282.55L287.5 239.25V195.95L212.5 239.25V195.95Z"
fill={theme.palette.primary.main}
/>
<path d="M212.5 282.55V325.85L287.5 369.15V325.85L212.5 282.55Z" fill={theme.palette.primary[800]} />
<path
d="M287.5 369.15L400 304.2V217.6L362.5 239.25V282.55L287.5 325.85V369.15ZM362.5 195.95V152.65L400 131V174.3L362.5 195.95Z"
fill={theme.palette.primary.main}
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="300" height="238.3" fill="white" transform="translate(100 131)" />
</clipPath>
</defs>
</svg>
</Avatar>
)}
{icon && (
<Avatar component={Link} href={link} target="_blank" size="badge" color="primary" outline>
{icon}
</Avatar>
)}
</ButtonBase>
</Tooltip>
);
};
CardSecondaryAction.propTypes = {
icon: PropTypes.node,
link: PropTypes.string,
title: PropTypes.string
};
export default CardSecondaryAction;

80
web/berry/src/ui-component/cards/MainCard.js Normal file
View File

@@ -0,0 +1,80 @@
import PropTypes from 'prop-types';
import { forwardRef } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
// constant
const headerSX = {
'& .MuiCardHeader-action': { mr: 0 }
};
// ==============================|| CUSTOM MAIN CARD ||============================== //
const MainCard = forwardRef(
(
{
border = true,
boxShadow,
children,
content = true,
contentClass = '',
contentSX = {},
darkTitle,
secondary,
shadow,
sx = {},
title,
...others
},
ref
) => {
const theme = useTheme();
return (
<Card
ref={ref}
{...others}
sx={{
border: border ? '1px solid' : 'none',
borderColor: theme.palette.primary[200] + 25,
':hover': {
boxShadow: boxShadow ? shadow || '0 2px 14px 0 rgb(32 40 45 / 8%)' : 'inherit'
},
...sx
}}
>
{/* card header and action */}
{title && <CardHeader sx={headerSX} title={darkTitle ? <Typography variant="h3">{title}</Typography> : title} action={secondary} />}
{/* content & header divider */}
{title && <Divider />}
{/* card content */}
{content && (
<CardContent sx={contentSX} className={contentClass}>
{children}
</CardContent>
)}
{!content && children}
</Card>
);
}
);
MainCard.propTypes = {
border: PropTypes.bool,
boxShadow: PropTypes.bool,
children: PropTypes.node,
content: PropTypes.bool,
contentClass: PropTypes.string,
contentSX: PropTypes.object,
darkTitle: PropTypes.bool,
secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
shadow: PropTypes.string,
sx: PropTypes.object,
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object])
};
export default MainCard;

32
web/berry/src/ui-component/cards/Skeleton/EarningCard.js Normal file
View File

@@ -0,0 +1,32 @@
// material-ui
import { Card, CardContent, Grid } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
// ==============================|| SKELETON - EARNING CARD ||============================== //
const EarningCard = () => (
<Card>
<CardContent>
<Grid container direction="column">
<Grid item>
<Grid container justifyContent="space-between">
<Grid item>
<Skeleton variant="rectangular" width={44} height={44} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" width={34} height={34} />
</Grid>
</Grid>
</Grid>
<Grid item>
<Skeleton variant="rectangular" sx={{ my: 2 }} height={40} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={30} />
</Grid>
</Grid>
</CardContent>
</Card>
);
export default EarningCard;

8
web/berry/src/ui-component/cards/Skeleton/ImagePlaceholder.js Normal file
View File

@@ -0,0 +1,8 @@
// material-ui
import Skeleton from '@mui/material/Skeleton';
// ==============================|| SKELETON IMAGE CARD ||============================== //
const ImagePlaceholder = ({ ...others }) => <Skeleton variant="rectangular" {...others} animation="wave" />;
export default ImagePlaceholder;

155
web/berry/src/ui-component/cards/Skeleton/PopularCard.js Normal file
View File

@@ -0,0 +1,155 @@
// material-ui
import { Card, CardContent, Grid } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
// project imports
import { gridSpacing } from 'store/constant';
// ==============================|| SKELETON - POPULAR CARD ||============================== //
const PopularCard = () => (
<Card>
<CardContent>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container alignItems="center" justifyContent="space-between" spacing={gridSpacing}>
<Grid item xs zeroMinWidth>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={20} width={20} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Skeleton variant="rectangular" height={150} />
</Grid>
<Grid item xs={12}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item xs={6}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs zeroMinWidth>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={16} width={16} />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item xs={6}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs zeroMinWidth>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={16} width={16} />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item xs={6}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs zeroMinWidth>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={16} width={16} />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item xs={6}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs zeroMinWidth>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={16} width={16} />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item xs={6}>
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
<Grid item xs zeroMinWidth>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={16} width={16} />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Skeleton variant="rectangular" height={20} />
</Grid>
</Grid>
</Grid>
</Grid>
</CardContent>
<CardContent sx={{ p: 1.25, display: 'flex', pt: 0, justifyContent: 'center' }}>
<Skeleton variant="rectangular" height={25} width={75} />
</CardContent>
</Card>
);
export default PopularCard;

44
web/berry/src/ui-component/cards/Skeleton/ProductPlaceholder.js Normal file
View File

@@ -0,0 +1,44 @@
// material-ui
import { CardContent, Grid, Skeleton, Stack } from '@mui/material';
// project import
import MainCard from '../MainCard';
// ===========================|| SKELETON TOTAL GROWTH BAR CHART ||=========================== //
const ProductPlaceholder = () => (
<MainCard content={false} boxShadow>
<Skeleton variant="rectangular" height={220} />
<CardContent sx={{ p: 2 }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Skeleton variant="rectangular" height={20} />
</Grid>
<Grid item xs={12}>
<Skeleton variant="rectangular" height={45} />
</Grid>
<Grid item xs={12} sx={{ pt: '8px !important' }}>
<Stack direction="row" alignItems="center" spacing={1}>
<Skeleton variant="rectangular" height={20} width={90} />
<Skeleton variant="rectangular" height={20} width={38} />
</Stack>
</Grid>
<Grid item xs={12}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Grid container spacing={1}>
<Grid item>
<Skeleton variant="rectangular" height={20} width={40} />
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={17} width={20} />
</Grid>
</Grid>
<Skeleton variant="rectangular" height={32} width={47} />
</Stack>
</Grid>
</Grid>
</CardContent>
</MainCard>
);
export default ProductPlaceholder;

39
web/berry/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js Normal file
View File

@@ -0,0 +1,39 @@
// material-ui
import { Card, CardContent, Grid } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
// project imports
import { gridSpacing } from 'store/constant';
// ==============================|| SKELETON TOTAL GROWTH BAR CHART ||============================== //
const TotalGrowthBarChart = () => (
<Card>
<CardContent>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container alignItems="center" justifyContent="space-between" spacing={gridSpacing}>
<Grid item xs zeroMinWidth>
<Grid container spacing={1}>
<Grid item xs={12}>
<Skeleton variant="text" />
</Grid>
<Grid item xs={12}>
<Skeleton variant="rectangular" height={20} />
</Grid>
</Grid>
</Grid>
<Grid item>
<Skeleton variant="rectangular" height={50} width={80} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Skeleton variant="rectangular" height={530} />
</Grid>
</Grid>
</CardContent>
</Card>
);
export default TotalGrowthBarChart;

19
web/berry/src/ui-component/cards/Skeleton/TotalIncomeCard.js Normal file
View File

@@ -0,0 +1,19 @@
// material-ui
import { Card, List, ListItem, ListItemAvatar, ListItemText, Skeleton } from '@mui/material';
// ==============================|| SKELETON - TOTAL INCOME DARK/LIGHT CARD ||============================== //
const TotalIncomeCard = () => (
<Card sx={{ p: 2 }}>
<List sx={{ py: 0 }}>
<ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
<ListItemAvatar>
<Skeleton variant="rectangular" width={44} height={44} />
</ListItemAvatar>
<ListItemText sx={{ py: 0 }} primary={<Skeleton variant="rectangular" height={20} />} secondary={<Skeleton variant="text" />} />
</ListItem>
</List>
</Card>
);
export default TotalIncomeCard;

72
web/berry/src/ui-component/cards/SubCard.js Normal file
View File

@@ -0,0 +1,72 @@
import PropTypes from 'prop-types';
import { forwardRef } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
// ==============================|| CUSTOM SUB CARD ||============================== //
const SubCard = forwardRef(
({ children, content, contentClass, darkTitle, secondary, sx = {}, contentSX = {}, title, subTitle, ...others }, ref) => {
const theme = useTheme();
return (
<Card
ref={ref}
sx={{
border: '1px solid',
borderColor: theme.palette.primary.light,
':hover': {
boxShadow: '0 2px 14px 0 rgb(32 40 45 / 8%)'
},
...sx
}}
{...others}
>
{/* card header and action */}
{!darkTitle && title && (
<CardHeader sx={{ p: 2.5 }} title={<Typography variant="h5">{title}</Typography>} action={secondary} subheader={subTitle} />
)}
{darkTitle && title && (
<CardHeader sx={{ p: 2.5 }} title={<Typography variant="h4">{title}</Typography>} action={secondary} subheader={subTitle} />
)}
{/* content & header divider */}
{title && (
<Divider
sx={{
opacity: 1,
borderColor: theme.palette.primary.light
}}
/>
)}
{/* card content */}
{content && (
<CardContent sx={{ p: 2.5, ...contentSX }} className={contentClass || ''}>
{children}
</CardContent>
)}
{!content && children}
</Card>
);
}
);
SubCard.propTypes = {
children: PropTypes.node,
content: PropTypes.bool,
contentClass: PropTypes.string,
darkTitle: PropTypes.bool,
secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
sx: PropTypes.object,
contentSX: PropTypes.object,
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object])
};
SubCard.defaultProps = {
content: true
};
export default SubCard;

121
web/berry/src/ui-component/cards/UserCard.js Normal file
View File

@@ -0,0 +1,121 @@
/*
* UserCard.js
*
* This file uses code from the Minimal UI project, available at
* https://github.com/minimal-ui-kit/material-kit-react/blob/main/src/sections/blog/post-card.jsx
*
* Minimal UI is licensed under the MIT License. A copy of the license is included below:
*
* MIT License
*
* Copyright (c) 2021 Minimal UI (https://minimals.cc/)
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import { Box, Avatar } from '@mui/material';
import { alpha } from '@mui/material/styles';
import Card from '@mui/material/Card';
import shapeAvatar from 'assets/images/icons/shape-avatar.svg';
import coverAvatar from 'assets/images/invite/cover.jpg';
import userAvatar from 'assets/images/users/user-round.svg';
import SvgColor from 'ui-component/SvgColor';
import React from 'react';
export default function UserCard({ children }) {
const renderShape = (
<SvgColor
color="paper"
src={shapeAvatar}
sx={{
width: '100%',
height: 62,
zIndex: 10,
bottom: -26,
position: 'absolute',
color: 'background.paper'
}}
/>
);
const renderAvatar = (
<Avatar
src={userAvatar}
sx={{
zIndex: 11,
width: 64,
height: 64,
position: 'absolute',
alignItems: 'center',
marginLeft: 'auto',
marginRight: 'auto',
left: 0,
right: 0,
bottom: (theme) => theme.spacing(-4)
}}
/>
);
const renderCover = (
<Box
component="img"
src={coverAvatar}
sx={{
top: 0,
width: 1,
height: 1,
objectFit: 'cover',
position: 'absolute'
}}
/>
);
return (
<Card>
<Box
sx={{
position: 'relative',
'&:after': {
top: 0,
content: "''",
width: '100%',
height: '100%',
position: 'absolute',
bgcolor: (theme) => alpha(theme.palette.primary.main, 0.42)
},
pt: {
xs: 'calc(100% / 3)',
sm: 'calc(100% / 4.66)'
}
}}
>
{renderShape}
{renderAvatar}
{renderCover}
</Box>
<Box
sx={{
p: (theme) => theme.spacing(4, 3, 3, 3)
}}
>
{children}
</Box>
</Card>
);
}