setup(frontend): rename frontend-react
This commit is contained in:
Nex Zhu
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import { SxProps } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import AgentIcon, { IAgentIconProps } from '@/components/AgentIcon';
|
||||
|
||||
export interface IHiringCardProps {
|
||||
icon: IAgentIconProps['name'];
|
||||
name: string;
|
||||
profile: string;
|
||||
style?: SxProps;
|
||||
}
|
||||
|
||||
export default React.memo<IHiringCardProps>(
|
||||
({ icon, name, profile, style = {} }) => (
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '6px',
|
||||
display: 'flex',
|
||||
backgroundColor: '#BBB',
|
||||
padding: '8px 4px',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<AgentIcon
|
||||
name={icon}
|
||||
style={{
|
||||
flexGrow: 0,
|
||||
width: '40px',
|
||||
height: 'auto',
|
||||
marginRight: '6px',
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ flexGrow: 1, width: 0, height: '100%', fontSize: '14px' }}>
|
||||
<strong>{name}</strong>: {profile}
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
);
|
||||
@@ -0,0 +1,82 @@
|
||||
import React from 'react';
|
||||
import { SxProps } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import RefreshIcon from '@mui/icons-material/Refresh';
|
||||
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
|
||||
import HiringCard from './HiringCard';
|
||||
import { globalStorage } from '@/storage';
|
||||
import LoadingMask from '@/components/LoadingMask';
|
||||
|
||||
export interface IAgentCartProps {
|
||||
style?: SxProps;
|
||||
}
|
||||
|
||||
export default React.memo<IAgentCartProps>(() => {
|
||||
// const { agents, refreshAgents, refresingAgents } =
|
||||
// React.useContext(GlobalContext);
|
||||
// return (
|
||||
// <>
|
||||
// <Box
|
||||
// sx={{
|
||||
// width: '100%',
|
||||
// opacity: 0.5,
|
||||
// fontWeight: 600,
|
||||
// fontSize: '18px',
|
||||
// userSelect: 'none',
|
||||
// padding: '2px 6px',
|
||||
// }}
|
||||
// >
|
||||
// Agent Cart
|
||||
// </Box>
|
||||
// {refresingAgents ? (
|
||||
// <LoadingMask
|
||||
// style={{
|
||||
// position: 'absolute',
|
||||
// top: 0,
|
||||
// left: 0,
|
||||
// right: 0,
|
||||
// bottom: 0,
|
||||
// }}
|
||||
// />
|
||||
// ) : (
|
||||
// <Stack
|
||||
// spacing={1}
|
||||
// sx={{
|
||||
// position: 'relative',
|
||||
// padding: '6px',
|
||||
// paddingBottom: '44px',
|
||||
// background: '#CCC',
|
||||
// borderRadius: '10px',
|
||||
// }}
|
||||
// >
|
||||
// {agents.map(agent => (
|
||||
// <HiringCard
|
||||
// key={agent.name}
|
||||
// icon={agent.icon}
|
||||
// name={agent.name}
|
||||
// profile={agent.profile}
|
||||
// />
|
||||
// ))}
|
||||
// <IconButton
|
||||
// aria-label="刷新"
|
||||
// onClick={refreshAgents}
|
||||
// disabled={refresingAgents}
|
||||
// sx={{ position: 'absolute', right: '36px', bottom: '2px' }}
|
||||
// >
|
||||
// <RefreshIcon />
|
||||
// </IconButton>
|
||||
// <IconButton
|
||||
// aria-label="提交"
|
||||
// disabled={refresingAgents}
|
||||
// sx={{ position: 'absolute', right: '6px', bottom: '2px' }}
|
||||
// >
|
||||
// <CheckCircleOutlineIcon />
|
||||
// </IconButton>
|
||||
// </Stack>
|
||||
// )}
|
||||
// </>
|
||||
// );
|
||||
return <></>;
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
import { SxProps } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SwapVertIcon from '@mui/icons-material/SwapVert';
|
||||
|
||||
export interface IAgentRepoProps {
|
||||
style?: SxProps;
|
||||
}
|
||||
|
||||
const REPO_COLORS: string[] = [
|
||||
'rgb(172,172,172)',
|
||||
'rgb(165,184,182)',
|
||||
'rgb(159,195,192)',
|
||||
'rgb(153,206,202)',
|
||||
'rgb(107,204,198)',
|
||||
];
|
||||
|
||||
export default React.memo<IAgentRepoProps>(() => {
|
||||
const repos = React.useMemo(
|
||||
() =>
|
||||
Array(30)
|
||||
.fill(0)
|
||||
.map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '50%',
|
||||
background:
|
||||
REPO_COLORS[Math.floor(Math.random() * REPO_COLORS.length)],
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s',
|
||||
filter: 'contrast(1.0)',
|
||||
'&:hover': {
|
||||
filter: 'contrast(1.3)',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)),
|
||||
[],
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
opacity: 0.5,
|
||||
fontWeight: 600,
|
||||
fontSize: '18px',
|
||||
userSelect: 'none',
|
||||
padding: '2px 6px',
|
||||
}}
|
||||
>
|
||||
Agent Repo
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(40px, 1fr))',
|
||||
gap: '6px',
|
||||
padding: '16px 10px',
|
||||
background: '#CCC',
|
||||
borderRadius: '10px',
|
||||
}}
|
||||
>
|
||||
{repos}
|
||||
<IconButton
|
||||
aria-label="提交"
|
||||
sx={{ position: 'absolute', right: '6px', bottom: '2px' }}
|
||||
>
|
||||
<SwapVertIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
import { SxProps } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FilledInput from '@mui/material/FilledInput';
|
||||
import CampaignIcon from '@mui/icons-material/Campaign';
|
||||
|
||||
export interface IHireRequirementProps {
|
||||
style?: SxProps;
|
||||
valueRef?: React.MutableRefObject<string>;
|
||||
onSubmit?: (value: string) => void;
|
||||
onChange?: (value: string) => void;
|
||||
}
|
||||
|
||||
export default React.memo<IHireRequirementProps>(
|
||||
({ style = {}, valueRef, onSubmit, onChange }) => {
|
||||
const [value, setValue] = React.useState('');
|
||||
const handleChange = React.useCallback(
|
||||
(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue(event.target.value);
|
||||
onChange?.(event.target.value);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
const handleSubmit = React.useCallback(() => {
|
||||
onSubmit?.(value);
|
||||
}, [onSubmit, value]);
|
||||
React.useEffect(() => {
|
||||
if (valueRef) {
|
||||
valueRef.current = value;
|
||||
}
|
||||
}, [valueRef, value]);
|
||||
return (
|
||||
<FormControl
|
||||
sx={{
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
opacity: 0.5,
|
||||
fontWeight: 600,
|
||||
fontSize: '18px',
|
||||
userSelect: 'none',
|
||||
padding: '2px 6px',
|
||||
}}
|
||||
>
|
||||
Hire Requirement
|
||||
</Box>
|
||||
<FilledInput
|
||||
placeholder="请输入……"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
size="small"
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
paddingTop: '10px',
|
||||
paddingBottom: '10px',
|
||||
borderRadius: '10px',
|
||||
borderBottom: 'none !important',
|
||||
'&::before': {
|
||||
borderBottom: 'none !important',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
disabled={!value}
|
||||
aria-label="提交"
|
||||
sx={{ position: 'absolute', right: '6px', bottom: '2px' }}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
<CampaignIcon />
|
||||
</IconButton>
|
||||
</FormControl>
|
||||
);
|
||||
},
|
||||
);
|
||||
28
frontend-react/src/components/AgentHiring/index.tsx
Normal file
28
frontend-react/src/components/AgentHiring/index.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { SxProps } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import HireRequirement from './HireRequirement';
|
||||
import AgentRepo from './AgentRepo';
|
||||
import AgentCart from './AgentCart';
|
||||
|
||||
export default React.memo<{ style?: SxProps }>(({ style = {} }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
background: '#F3F3F3',
|
||||
// borderRadius: '10px',
|
||||
padding: '10px',
|
||||
display: 'flex',
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'column',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<HireRequirement />
|
||||
<AgentRepo />
|
||||
<AgentCart />
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user