iod/AgentCoord
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add backend and frontend

Browse Source
This commit is contained in:
Gk0Wk
2024-04-07 15:04:00 +08:00
parent 49fdd9cc43
commit 84a7cb1b7e
233 changed files with 29927 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/routes/index.scss Normal file
View File

@@ -0,0 +1,28 @@
html,
body,
body > div#root {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
div#root {
position: relative;
}
.side-resize-bar {
transition: all 300ms;
z-index: 1000;
&:hover,
&:active,
&:focus {
background-color: #0093ffcc;
}
}
/*webkit内核*/
::-webkit-scrollbar {
display: none;
}

81
frontend/src/routes/layout.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { observer } from 'mobx-react-lite';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Outlet } from '@modern-js/runtime/router';
import React from 'react';
import FloatWindow from '@/components/FloatWindow';
import { globalStorage } from '@/storage';
import AgentAssignment from '@/components/AgentAssignment';
import TaskModification from '@/components/TaskModification';
import PlanModification from '@/components/PlanModification';
const theme = createTheme({
palette: {
primary: {
main: '#43A8AA',
},
},
});
export default observer(() => {
const [resizePlanOutline, setResizePlanOutline] = React.useState(0);
const [resizeProcessModification, setResizeProcessModification] =
React.useState(0);
return (
<ThemeProvider theme={theme}>
<Outlet />
{globalStorage.planModificationWindow ? (
<FloatWindow
title="Plan Outline Exploration"
onClose={() => (globalStorage.planModificationWindow = false)}
onResize={() => {
setResizePlanOutline(old => (old + 1) % 100);
}}
>
<PlanModification
style={{
height: '100%',
width: '100%',
}}
resizeSignal={resizePlanOutline}
/>
</FloatWindow>
) : (
<></>
)}
{globalStorage.agentAssigmentWindow ? (
<FloatWindow
title="Assignment Exploration"
onClose={() => (globalStorage.agentAssigmentWindow = false)}
>
<AgentAssignment
style={{
height: '100%',
width: '100%',
}}
/>
</FloatWindow>
) : (
<></>
)}
{globalStorage.taskProcessModificationWindow ? (
<FloatWindow
title="Task Process Exploration"
onClose={() => (globalStorage.taskProcessModificationWindow = false)}
onResize={() => {
setResizeProcessModification(old => (old + 1) % 100);
}}
>
<TaskModification
style={{
height: '100%',
width: '100%',
}}
resizeSignal={resizeProcessModification}
/>
</FloatWindow>
) : (
<></>
)}
</ThemeProvider>
);
});

156
frontend/src/routes/page.tsx Normal file
View File

@@ -0,0 +1,156 @@
import React from 'react';
import Box from '@mui/material/Box';
import localForage from 'localforage';
import Drawer from '@mui/material/Drawer';
import { Helmet } from '@modern-js/runtime/head';
import ViewConnector from '@/components/ViewConnector';
import './index.scss';
import ResizeableColumn from '@/components/ResizeableColumn';
import HeadBar from '@/components/HeadBar';
import Outline from '@/components/Outline';
import AgentHiring from '@/components/AgentHiring';
import AgentBoard from '@/components/AgentBoard';
import ProcessRehearsal from '@/components/ProcessRehearsal';
import UserGoalInput from '@/components/UserGoalInput';
import ProcessDiscrption from '@/components/ProcessDiscription';
import { globalStorage } from '@/storage';
// 持久化
localForage.config({
name: 'AgentCoord',
storeName: 'app',
});
export default React.memo(() => {
React.useEffect(() => {
let id: NodeJS.Timer | undefined;
if (!globalStorage.devMode) {
localForage.getItem('globalStorage').then(v => {
if (v) {
globalStorage.load(v);
}
});
id = setInterval(() => {
localForage.setItem('globalStorage', globalStorage.dump());
}, 1000);
}
// globalStorage.getAgents();
const refreshLines = () =>
globalStorage.renderLines({ delay: 0, repeat: 1, interval: 15 });
window.addEventListener('resize', refreshLines);
// window.addEventListener('pointermove', refreshLines);
return () => {
if (id) {
clearInterval(id);
}
// window.removeEventListener('pointermove', refreshLines);
window.removeEventListener('resize', refreshLines);
};
}, []);
const [showAgentHiring, setShowAgentHiring] = React.useState(false);
return (
<>
<Helmet>
<link
rel="stylesheet"
href="/assets/katex.min.css"
type="text/css"
media="all"
/>
<title>AgentCoord</title>
</Helmet>
{/* Columns */}
<Box
sx={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
}}
>
<HeadBar
style={{ height: '40px', flexGrow: 0, flexShrink: 0, zIndex: 2 }}
/>
<Box
sx={{
height: 0,
padding: '0 10px 10px 10px',
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
position: 'relative',
}}
>
<UserGoalInput
style={{
height: '50px',
flexGrow: 0,
flexShrink: 0,
zIndex: 2,
background: '#FFF9',
paddingTop: '10px',
backdropFilter: 'blur(5px)',
}}
/>
<Box sx={{ height: 0, flexGrow: 1, display: 'flex' }}>
<ResizeableColumn columnWidth="25%">
<Outline
style={{
height: '100%',
width: '100%',
marginRight: '6px',
}}
/>
</ResizeableColumn>
<ResizeableColumn columnWidth="25%">
<AgentBoard
style={{
height: '100%',
width: '100%',
marginRight: '6px',
}}
onAddAgent={() => setShowAgentHiring(true)}
/>
</ResizeableColumn>
<ResizeableColumn columnWidth="25%">
<ProcessDiscrption
style={{
height: '100%',
width: '100%',
marginRight: '6px',
}}
/>
</ResizeableColumn>
<ProcessRehearsal
style={{
height: '100%',
flexGrow: 1,
width: '100%',
}}
/>
<ViewConnector />
</Box>
</Box>
</Box>
{/* Drawers */}
<Drawer
anchor="right"
open={showAgentHiring}
onClose={() => setShowAgentHiring(false)}
>
<AgentHiring
style={{
height: '100%',
minWidth: '25vw',
}}
/>
</Drawer>
</>
);
});