测试

front-end/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

front-end/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

front-end/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-work",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.21.4",
+    "chinese-lunar-calendar": "^1.0.1",
+    "lunar-javascript": "^1.6.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

front-end/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

front-end/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

front-end/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

front-end/record.txt

@@ -0,0 +1,10 @@
+10.21记录：
+    种植者界面的侧边导航栏跳转有问题，需要改一下
+
+10.22
+  1、区分内联式和外部样式的一些区别，命名、引号、分号
+  
+10.23
+  1、dropdown样式的使用
+  2、理解直接用navigate重定向
+

front-end/src/App.css

@@ -0,0 +1,10 @@
+html,body,#root,.ant-layout{
+  width: 100%;
+  height: 100%;
+}
+
+
+
+.site-layout-background{
+  padding:0 !important;
+}

front-end/src/App.js

@@ -0,0 +1,29 @@
+import logo from './logo.svg';
+import './App.css';
+import {Routes,Route, Navigate} from 'react-router-dom'
+import { adminRoutes } from './routers/routers';
+import Frame from './components/frame/frame';
+import {isLogined } from './utils/auth'
+import Login from './pages/login/login';
+
+//权限判断也放在这里
+function App() {
+  return (isLogined()?
+    <Frame>
+        <Routes>
+          {adminRoutes.map(route => {
+            // return(<Route key={route.path} {...route}/>)
+            return(<Route key={route.path} path={route.path} element={route.element}/>)
+          })}
+           <Route path='/' element={<Navigate to={'/admin/gis'}/>}/>
+          <Route path='/*' element={<Navigate to={'/notfound'}/>}/>
+        </Routes>
+    </Frame>:
+    <Routes>
+      <Route path="/login" element={<Login />}/>
+      <Route path='*' element={<Navigate to={'/login'}/>}/>
+    </Routes>
+  );
+}
+
+export default App;

front-end/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

front-end/src/components/Sidebar/Sidebar.css

@@ -0,0 +1,18 @@
+.change-menu .ant-menu-item-selected {
+    font-size: 23px; 
+    font-weight: 520;
+    background-color: white;
+    color: black;
+  }
+
+.change-menu{
+    
+    font-size: 14px;
+    font-weight:100;
+    padding-top: 15px;
+}
+
+.change-menu .ant-menu-item {
+    padding-top: 30px; /* 控制每个选项上方的间距 */
+    padding-bottom: 25px; /* 控制每个选项下方的间距 */
+  }

front-end/src/components/Sidebar/Sidebar.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Layout, Menu } from "antd";
+import { useNavigate, useLocation } from "react-router-dom";
+import './Sidebar.css'
+
+const { Sider } = Layout;
+
+function Sidebar({ items, basePath }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const selectedKey = location.pathname.replace(basePath, "");
+
+  const menuItems = items.map((item) => ({
+    key: item.path, // 这里的 key 是 item.path
+    label:(<span>• {item.label}</span>) 
+
+  }));
+
+  return (
+    <Sider
+      width={260}
+      style={{
+        background: "#fff",
+        borderRight: "1px solid #d9d9d9",
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+      }}
+    >
+      <Menu
+        mode="inline"
+        selectedKeys={[selectedKey]}
+        style={{ height: "100%", borderRight: 0 }}
+        onClick={(p) => navigate(`${basePath}${p.key}`)}
+        items={menuItems}
+        className="change-menu"
+      />
+    </Sider>
+  );
+}
+
+export default Sidebar;

front-end/src/components/frame/frame.css

@@ -0,0 +1,53 @@
+.site-layout {
+  padding: 0 0px;
+  width: 100%; /* 设置宽度为100% */
+}
+
+.site-layout-background {
+  padding: 24px;
+  min-height: 380px;
+  width: 100%; /* 确保这个div也占满100%宽度 */
+}
+
+.headmenu {
+  background-color: white;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  border-bottom: 1px solid #d9d9d9;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  /* justify-content: space-between;将内容分开对齐 */
+  align-items: center; /*垂直居中对齐*/
+}
+
+.child-box {
+  flex: 1; /* 使每个框占据相等的空间 */
+  min-width: 80px; /* 设置最小宽度 */
+  height: 50px; /* 设置最小 */
+  display: flex; /* 使用flexbox布局 */
+  align-items: center; /* 垂直居中对齐内容 */
+  justify-content: center; /* 水平居中对齐内容 */
+  text-align: center; /* 文本居中 */
+  border: 1px solid #d9d9d9; /* 边框 */
+  padding: 5px; /* 内边距 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  line-height: 1.5; /*行间距*/
+}
+
+/* 右侧个人信息 */
+.ant-dropdown-menu {
+  background-color: #f0f0f0; /* 修改背景颜色 */
+}
+
+.ant-dropdown-menu-item {
+  padding: 10px 20px; /* 修改每个菜单项的内边距 */
+  color: #333; /* 修改字体颜色 */
+}
+
+/* 添加 hover 状态 */
+.ant-dropdown-menu-item:hover {
+  background-color: #e6f7ff; /* 修改悬停时的背景颜色 */
+  color: #1890ff; /* 修改悬停时的字体颜色 */
+}

front-end/src/components/frame/frame.js

@@ -0,0 +1,145 @@
+import { Breadcrumb, Layout, Menu, Dropdown, Button } from "antd";
+import React, { useEffect, useState } from "react";
+import { adminRoutes } from "../../routers/routers";
+import { useNavigate } from "react-router-dom";
+import "./frame.css";
+import { Lunar } from "lunar-javascript";
+import { clearToken } from "../../utils/auth";
+
+const { Header, Content, Footer } = Layout;
+
+const items_header = adminRoutes.map((route) => ({
+  key: "/admin" + route.path,
+  label: route.label,
+}));
+
+
+
+
+function Frame(props) {
+  const navigate = useNavigate();
+
+  const [dateTime, setDateTime] = useState(new Date());
+
+  const [lunarDate, setLunarDate] = useState("");
+  //右边角色信息栏的数据
+  const items = [
+    {
+      key: "myinf",
+      label: <a>我的</a>,
+    },
+    {
+      key: "logout",
+      label: <a
+        onClick={() => {
+          clearToken();
+          navigate('/login');
+        }}
+      >退出登录</a>,
+    },
+  ];
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const now = new Date();
+      setDateTime(now);
+
+      // 创建 Lunar 实例
+      const lunarInfo = Lunar.fromDate(now);
+      setLunarDate(
+        `${lunarInfo.getMonthInChinese()}月${lunarInfo.getDayInChinese()}`
+      );
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
+  };
+
+  const formatTime = (date) => {
+    const days = ["日", "一", "二", "三", "四", "五", "六"];
+    return (
+      <>
+        {date.toLocaleTimeString()} <br />
+        星期{days[date.getDay()]}
+      </>
+    );
+  };
+
+  return (
+    <Layout>
+      <Header className="headmenu">
+        <Menu
+          //   theme="dark"
+          mode="horizontal"
+          defaultSelectedKeys={["2"]}
+          items={items_header}
+          onClick={(p) => {
+            navigate(p.key);
+          }}
+          style={{
+            marginLeft: "15%", // 右移15
+            gap: "20px",
+            // borderBottom: "1px solid #d9d9d9"
+          }}
+        />
+        <div style={{ display: "flex", gap: "10px", marginLeft: "105px" }}>
+          <div className="child-box">
+            阳历
+            <br />
+            {formatDate(dateTime)}
+          </div>
+          <div className="child-box">
+            农历
+            <br />
+            {lunarDate}
+          </div>
+          <div className="child-box">无</div>
+          <div className="child-box">{formatTime(dateTime)}</div>
+        </div>
+        {/* 这里dropdown的使用，显示的仅仅是button，交互之后才会显示dropdown的内容，所以直接修改button */}
+        <Dropdown
+          menu={{
+            items,
+          }}
+          placement="bottom"
+          arrow={{
+            pointAtCenter: true,
+          }}
+        >
+          <Button
+            style={{
+              margin: "60px",
+              borderRadius: "20px",
+              height: "40px",
+              minWidth: "135px",
+              padding: "10px 20px",
+            }}
+          >
+            种植者角色
+          </Button>
+        </Dropdown>
+      </Header>
+      <Content
+        className="site-layout"
+        style={{
+          backgroundColor: "white",
+        }}
+      >
+        <div
+          className="site-layout-background"
+          style={{
+            padding: 24,
+            minHeight: 380,
+          }}
+        >
+          {props.children}
+        </div>
+      </Content>
+    </Layout>
+  );
+}
+
+export default Frame;

front-end/src/components/gisFoot/gisFoot.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function GisFoot() {
+  return (
+    <div>GisFoot</div>
+  )
+}
+
+export default GisFoot

front-end/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

front-end/src/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {HashRouter as Router,Route,Routes, Navigate} from "react-router-dom"
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import {adminRoutes, mainRoutes} from './routers/routers'
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <Router>
+      <Routes>
+        <Route path='/admin/*' element=<App/>/>
+        {
+          mainRoutes.map(route => {
+            return(<Route key={route.path} {...route}/>)
+          })
+        }
+        <Route path='/' element={<Navigate to={'/admin/gis'}/>}/>
+        <Route path='/*' element={<Navigate to={'/notfound'}/>}/>
+      </Routes>
+    </Router>
+  </React.StrictMode>
+);
+
+reportWebVitals();

front-end/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

front-end/src/pages/admin/adminfarm/adminfarm.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import {Routes,Route,Navigate} from "react-router-dom"
+import { adminRoutes } from '../../../routers/routers'
+import Sidebar from '../../../components/Sidebar/Sidebar'
+import { Layout } from 'antd'
+import '../../../App.css'
+import { Content } from 'antd/es/layout/layout'
+
+function AdminFarm() {
+  const adminFarmRoute = adminRoutes.find((route)=>route.path === '/adminfarm/*')
+  const farmChild = adminFarmRoute.children
+  return (
+    <Layout style={{ minHeight: "100vh"}}>
+      <Sidebar items={farmChild} basePath="/admin/adminfarm"/> 
+      <Content           style={{
+            padding: 24,
+            margin: 0,
+            minHeight: 280,
+            background: "#fff",
+          }}>
+      <Routes>
+        {farmChild.map((route)=>{
+          return(<Route key={route.path} path={route.path} element={route.element}/>)
+        })}
+        <Route path='/*' element={<Navigate to='/admin/adminfarm/myfarm'/>}/>
+      </Routes>
+      </Content>
+    </Layout>
+
+  )
+}
+
+export default AdminFarm

front-end/src/pages/admin/adminfarm/myfarm/myfarm.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function MyFarm() {
+  return (
+    <div>我的农场</div>
+  )
+}
+
+export default MyFarm

front-end/src/pages/admin/admingrower/account/account.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Account() {
+  return (
+    <div>种植者员工账号</div>
+  )
+}
+
+export default Account

front-end/src/pages/admin/admingrower/admingrower.js

@@ -0,0 +1,47 @@
+import React from "react";
+import Sidebar from "../../../components/Sidebar/Sidebar";
+import { Layout } from "antd";
+import { Outlet, Routes, Route,Navigate } from "react-router-dom";
+import { adminRoutes } from "../../../routers/routers";
+import '../../../App.css'
+
+const { Content } = Layout;
+
+function AdminGrower() {
+  const growerRoute = adminRoutes.find(
+    (route) => route.path === "/admingrower/*"
+  );
+  const growerChildren  = growerRoute.children;
+
+  return (
+    <Layout style={{ minHeight: "100vh",padding:"0px 0px"}}>
+      {/* 将 children 传递给 Sidebar，生成侧边栏 */}
+      <Sidebar items={growerChildren} basePath="/admin/admingrower" />
+      <Layout style={{ padding: "0 0",height:'100vh'}}>
+        <Content
+          style={{
+            padding: 24,
+            margin: 0,
+            minHeight: 280,
+            background: "#fff",
+          }}
+        >
+          <Routes>
+            {growerChildren.map((route) => (
+              <Route
+                key={route.path}
+                path={route.path}
+                element={route.element}
+              />
+            ))}
+            <Route path='/*' element={<Navigate to="/admin/admingrower/basicinformation"/>} />
+          </Routes>
+        </Content>
+      </Layout>
+    </Layout>
+
+    // <h1>种植者管理11</h1>
+  );
+}
+
+export default AdminGrower;

front-end/src/pages/admin/admingrower/basicinformation/basicinformation.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function BasicInformation() {
+  return (
+    <div>种植者基础信息</div>
+  )
+}
+
+export default BasicInformation

front-end/src/pages/admin/admingrower/changeadmin/changeadmin.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ChangeAdmin() {
+  return (
+    <div>交接管理</div>
+  )
+}
+
+export default ChangeAdmin

front-end/src/pages/admin/admingrower/inviteadmin/inviteadmin.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function InviteAdmin() {
+  return (
+    <div>邀请管理</div>
+  )
+}
+
+export default InviteAdmin

front-end/src/pages/admin/adminproduce/adminproduce.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { adminRoutes } from "../../../routers/routers";
+import Sidebar from "../../../components/Sidebar/Sidebar";
+import { Layout } from "antd";
+import { Content } from "antd/es/layout/layout";
+
+function AdminProduce() {
+  const getProduce = adminRoutes.find(
+    (route) => route.path === "/adminproduce/*"
+  );
+  const produceChildren = getProduce.children;
+
+  return (
+    <Layout style={{ minHeight: "100vh"}}>
+      <Sidebar items={produceChildren} basePath={"/admin/adminproduce/"} />
+      <Content
+        style={{
+          padding: 24,
+          margin: 0,
+          minHeight: 280,
+          background: "#fff",
+        }}
+      >
+        <Routes>
+          {produceChildren.map((route) => (
+            <Route key={route.path} path={route.path} element={route.element} />
+          ))}
+          <Route
+            path="/*"
+            element={<Navigate to="/admin/adminproduce/planning" />}
+          />
+        </Routes>
+      </Content>
+    </Layout>
+  );
+}
+
+export default AdminProduce;

front-end/src/pages/admin/adminproduce/implement/implement.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Implement() {
+  return (
+    <div>实施</div>
+  )
+}
+
+export default Implement

front-end/src/pages/admin/adminproduce/planning/planning.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Planning() {
+  return (
+    <div>种植计划任务</div>
+  )
+}
+
+export default Planning

front-end/src/pages/admin/gis/gis.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { Route, Routes, useNavigate,useLocation,Navigate } from "react-router-dom";
+import { adminRoutes } from "../../../routers/routers";
+import Screen from "./screen/screen";
+import Plotinquiry from "./plotinquiry/plotinquiry";
+import Mapping from "./mapping/mapping";
+import ProduceRecord from "./produceRecord/produceRecord";
+import WeatherData from "./weatherData/weatherData";
+import Satellite from "./satellite/satellite";
+import { Layout, Menu } from "antd";
+
+function Gis() {
+  const navigate = useNavigate();
+  const gisRoute = adminRoutes.find((route) => route.path === "/gis/*");
+  const gisChildren = gisRoute?.children || [];
+  const location = useLocation();
+
+  return (
+    <Layout style={{height:'100vh' ,backgroundColor:"white"}}>
+      {/* <h1>GIS主界面</h1> */}
+      <Routes>
+        {gisChildren.map((child) => (
+          <Route
+            key={child.path}
+            path={child.path.substring(1)}
+            element={child.element}
+          />
+        ))}
+        <Route path="/*" element={<Navigate to="/admin/gis/screen" />}/>
+      </Routes>
+      <Menu
+        mode="horizontal"
+        selectedKeys={[location.pathname.replace('/admin/gis', '')]}
+        onClick={(p) => navigate(`/admin/gis${p.key}`)}
+        items={gisChildren.map((child) => ({
+          key: child.path,
+          label: child.label,
+        }))}
+        style={{
+          position: "fixed", // 固定在页面底部
+          bottom: 0,
+          left: "50%", // 将菜单定位到页面中心
+          transform: "translateX(-50%)", // 使菜单居中
+          zIndex: 1, // 确保菜单在上方
+          display: 'flex', // 使用 flexbox 布局
+          justifyContent: 'center', // 水平居中
+          alignItems: 'center', // 垂直居中
+          lineHeight: '32px', // 确保与菜单高度一致
+          // whiteSpace: 'nowrap', // 避免菜单项换行
+          border: '1px solid #ccc', // 显示边框
+          borderRadius: '4px', // 边框圆角
+          padding: '0 8px', // 内边距调整
+        }}
+      />
+    </Layout>
+  );
+}
+
+export default Gis;

front-end/src/pages/admin/gis/mapping/mapping.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Card } from 'antd'
+
+function Mapping() {
+  return (
+    <Card title="测绘导航" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
+    <p></p>
+    <p></p>
+    <p></p>
+  </Card>
+
+  )
+}
+
+export default Mapping

front-end/src/pages/admin/gis/plotinquiry/plotinquiry.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Card } from 'antd'
+
+function Plotinquiry() {
+  return (
+    <Card title="地块查询" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
+    <p></p>
+    <p></p>
+    <p></p>
+  </Card>
+
+  )
+}
+
+export default Plotinquiry

front-end/src/pages/admin/gis/produceRecord/produceRecord.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Card } from 'antd'
+
+function ProduceRecord() {
+  return (
+    <Card title="生产履历" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
+    <p></p>
+    <p></p>
+    <p></p>
+  </Card>
+
+  )
+}
+
+export default ProduceRecord

front-end/src/pages/admin/gis/satellite/satellite.js

@@ -0,0 +1,15 @@
+import { Card } from 'antd'
+import React from 'react'
+
+function Satellite() {
+  return (
+    <Card title="卫星遥感" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
+      <p></p>
+      <p></p>
+      <p></p>
+    </Card>
+
+  )
+}
+
+export default Satellite

front-end/src/pages/admin/gis/screen/screen.css

@@ -0,0 +1,28 @@
+.topOne{
+    margin-top: 20px;
+    height: 150px;
+    border: 1px solid #787777;
+    position: absolute; /* 设置为绝对定位 */
+    left: 50%; /* 距离左侧50% */
+    transform: translate(-50%, 0%); /* 向上和向左移动自身宽度和高度的一半*/
+    width: 90%; /* 可选：设置一个固定宽度 */
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ant-card-body{
+    padding:0 !important;
+}
+
+.cardOne {
+    height: 120px;
+    background-color: #f0f2f5;
+    border-radius: 0;
+
+    display:flex;
+    align-items:center;
+    padding: 0;
+  }
+  

front-end/src/pages/admin/gis/screen/screen.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Card, Row, Col, Carousel, Button } from "antd";
+import "./screen.css";
+
+function Screen() {
+  const carouselRef = React.useRef(null);
+  return (
+    <Card title="种植大屏" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
+    <p></p>
+    <p></p>
+    <p></p>
+  </Card>
+  );
+  
+}
+
+export default Screen;

front-end/src/pages/admin/gis/weatherData/weatherData.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Card } from 'antd'
+
+function WeatherData() {
+  return (
+    <Card title="气象数据" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
+      <p></p>
+      <p></p>
+      <p></p>
+    </Card>
+  )
+}
+
+export default WeatherData

front-end/src/pages/admin/service/banksv/banksv.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function BankSv() {
+  return (
+    <div>银行</div>
+  )
+}
+
+export default BankSv

front-end/src/pages/admin/service/insurancesv/insurancesv.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function InsuranceSv() {
+  return (
+    <div>保险</div>
+  )
+}
+
+export default InsuranceSv

front-end/src/pages/admin/service/plantsv/plantsv.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function PlantSv() {
+  return (
+    <div>种植服务</div>
+  )
+}
+
+export default PlantSv

front-end/src/pages/admin/service/service.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { adminRoutes } from "../../../routers/routers";
+import { Layout } from "antd";
+import Sider from "antd/es/layout/Sider";
+import Sidebar from "../../../components/Sidebar/Sidebar";
+import { Content } from "antd/es/layout/layout";
+
+function Service() {
+  const getService = adminRoutes.find((route) => route.path === "/service/*");
+  const serviceChildren = getService.children;
+
+  return (
+    <Layout style={{ minHeight: "100vh"}}>
+      <Sidebar items={serviceChildren} basePath={"/admin/service"} />
+      <Content
+        style={{
+          padding: 24,
+          margin: 0,
+          minHeight: 280,
+          background: "#fff",
+        }}
+      >
+        <Routes>
+          {serviceChildren.map((route) => (
+            <Route key={route.path} path={route.path} element={route.element} />
+          ))}
+          {/* 这里有个路径问题，不加/是相对路径，加了是绝对 */}
+          <Route path="/*" element={<Navigate to={"plantsv"} />} />
+        </Routes>
+
+        
+      </Content>
+    </Layout>
+  );
+}
+
+export default Service;

front-end/src/pages/admin/service/testsoilsv/testsoilsv.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function TestsoilSv() {
+  return (
+    <div>测土检验</div>
+  )
+}
+
+export default TestsoilSv

front-end/src/pages/login/login.css

@@ -0,0 +1,23 @@
+.login-form{
+    width: 380px;
+    height: 480px;
+    position:fixed;
+    left:50%;
+    top:50%;
+    transform: translate3d(-50%,-50%,0);
+    border: 1px solid #d8cfcf;
+
+    display:flex;
+    align-items: center;
+    justify-content: center;
+
+}
+  
+  .login-form .ant-form {
+    width: 260px; 
+  }
+
+  .login-form .ant-form-item {
+    margin: 30px 0; /* 调整各表单项之间的垂直间距 */
+    padding: 0; /* 移除内边距 */
+  }

front-end/src/pages/login/login.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { LockOutlined, UserOutlined } from "@ant-design/icons";
+import { Button, Checkbox, Form, Input,Card } from "antd";
+import './login.css'
+import { setToken } from "../../utils/auth";
+import { Navigate, useNavigate } from "react-router-dom";
+// 实际上验证通过之后调接口，这里先直接写存
+
+
+function Login() {
+  const navigate = useNavigate();
+  const onFinish = (values) => {
+    console.log("Received values of form: ", values);
+    // 直接写
+    setToken(values.username);
+    navigate('/admin');
+  };
+  return (
+    <Card
+      className="login-form"
+    >
+      <h2>登录</h2>
+    <Form
+      name="normal_login"
+      
+      initialValues={{
+        remember: true,
+      }}
+      onFinish={onFinish}
+    >
+      <Form.Item
+        name="username"
+        rules={[
+          {
+            required: true,
+            message: "请输入用户名!",
+          },
+        ]}
+      >
+        <Input
+          prefix={<UserOutlined className="site-form-item-icon" />}
+          placeholder="用户名"
+        />
+      </Form.Item>
+      <Form.Item
+        name="password"
+        rules={[
+          {
+            required: true,
+            message: "请输入密码!",
+          },
+        ]}
+      >
+        <Input
+          prefix={<LockOutlined className="site-form-item-icon" />}
+          type="password"
+          placeholder="密码"
+        />
+      </Form.Item>
+      <Form.Item>
+        <Form.Item name="remember" valuePropName="checked" noStyle>
+          <Checkbox>记住密码</Checkbox>
+        </Form.Item>
+
+        {/* <a className="login-form-forgot" href="">
+          Forgot password
+        </a> */}
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit" className="login-form-button">
+          登录
+        </Button>
+      </Form.Item>
+    </Form>
+
+    </Card>
+
+  );
+}
+
+export default Login;

front-end/src/pages/notfound/notfound.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function NotFound() {
+  return (
+    <h1
+      style={{
+        position: 'absolute',
+        left:'50%',
+        transform:'translate(-50%)',
+      }}
+    >NotFound</h1>
+  )
+}
+
+export default NotFound

front-end/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

front-end/src/routers/routers.js

@@ -0,0 +1,92 @@
+import AdminFarm from "../pages/admin/adminfarm/adminfarm";
+import AdminGrower from "../pages/admin/admingrower/admingrower";
+import AdminProduce from "../pages/admin/adminproduce/adminproduce";
+import Gis from "../pages/admin/gis/gis";
+// import Screen from "../pages/admin/gis/screen/screen";
+import Service from "../pages/admin/service/service";
+import Login from "../pages/login/login";
+import NotFound from "../pages/notfound/notfound";
+import Screen from "../pages/admin/gis/screen/screen";
+import Plotinquiry from '../pages/admin/gis/plotinquiry/plotinquiry'
+import Mapping from '../pages/admin/gis/mapping/mapping'
+import ProduceRecord from '../pages/admin/gis/produceRecord/produceRecord'
+import WeatherData from '../pages/admin/gis/weatherData/weatherData'
+import Satellite from '../pages/admin/gis/satellite/satellite'
+import Account from '../pages/admin/admingrower/account/account'
+import ChangeAdmin from "../pages/admin/admingrower/changeadmin/changeadmin";
+import InviteAdmin from "../pages/admin/admingrower/inviteadmin/inviteadmin";
+import BasicInformation from "../pages/admin/admingrower/basicinformation/basicinformation";
+import MyFarm from "../pages/admin/adminfarm/myfarm/myfarm";
+import Planning from "../pages/admin/adminproduce/planning/planning";
+import Implement from "../pages/admin/adminproduce/implement/implement";
+import PlantSv from "../pages/admin/service/plantsv/plantsv";
+import TestsoilSv from "../pages/admin/service/testsoilsv/testsoilsv";
+import BankSv from "../pages/admin/service/banksv/banksv";
+import InsuranceSv from "../pages/admin/service/insurancesv/insurancesv";
+
+
+export const mainRoutes = [
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path:'/notfound',
+    element:<NotFound/>
+  }
+];
+
+export const adminRoutes = [
+  {
+    path: "/gis/*",
+    element: <Gis/>,
+    label:'GIS',
+    children:[
+      {path:'/screen',label:'种植大屏',element:<Screen/>},
+      {path:'/plotinquiry',label:'地块查询',element:<Plotinquiry/>},
+      {path:'/mapping',label:'测绘导航',element:<Mapping/>},
+      {path:'/produceRecord',label:'生产履历',element:<ProduceRecord/>},
+      {path:'/weatherData',label:'气象数据',element:<WeatherData/>},
+      {path:'/satellite',label:'卫星遥感',element:<Satellite/>},
+    ]
+  },
+  {
+    path:"/admingrower/*",
+    element:<AdminGrower/>,
+    label:'种植者管理',
+    children:[
+      {path:'/basicinformation',label:'种植者基础信息',element:<BasicInformation/>},
+      {path:'/account',label:'种植者员工账号',element:<Account/>},
+      {path:'/inviteadmin',label:'邀请管理',element:<InviteAdmin/>},
+      {path:'/changeadmin',label:'交接管理',element:<ChangeAdmin/>},
+    ],
+  },
+  {
+    path:'/adminfarm/*',
+    element:<AdminFarm/>,
+    label:'农场管理',
+    children:[
+      {path:'/myfarm', label:'我的农场',element:<MyFarm/>}
+    ]
+  },
+  {
+    path:'/adminproduce/*',
+    element:<AdminProduce/>,
+    label:'生产管理',
+    children:[
+      {path:'planning', label:'种植计划任务', element:<Planning/>},
+      {path:'implement', label:'种植计划实施', element:<Implement/>}
+    ]
+  },
+  {
+    path:'/service/*',
+    element:<Service/>,
+    label:'服务机构',
+    children:[
+      {path:'/plantsv',label:'种植服务机构',element:<PlantSv/>},
+      {path:'/testsoilsv',label:'测土检验机构',element:<TestsoilSv/>},
+      {path:'/banksv',label:'农业银行机构',element:<BankSv/>},
+      {path:'/insurance',label:'农业保险机构',element:<InsuranceSv/>},
+    ]
+  }
+];

front-end/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

front-end/src/utils/auth.js

@@ -0,0 +1,18 @@
+export const getToken = () => {
+    return localStorage.getItem('token');
+};
+
+export const setToken = (token) => {
+    localStorage.setItem('token',token);
+};
+
+export function isLogined(){
+    if(localStorage.getItem('token')){
+        return true
+    }
+    return false
+}
+
+export function clearToken(){
+    localStorage.removeItem('token');
+}