setup(frontend): rename frontend-react

frontend-react/src/routes/page.tsx

@@ -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>
+    </>
+  );
+});