创建

.gitignore

@@ -0,0 +1,9 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/dist
+.swc

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmmirror.com/
+

.umirc.ts

@@ -0,0 +1,52 @@
+import { defineConfig } from "umi";
+
+export default defineConfig({
+  routes: [
+    {
+      path: "/",
+      component: "index",
+      name: "系统首页",
+      wrappers: ["@/wrappers/auth"]
+    },
+    {
+      path: "/login",
+      component: "login",
+      name: "登录",
+      wrappers: ["@/wrappers/auth"]
+    },
+    {
+      path: "/user",
+      component: "user",
+      name: "普通用户",
+      wrappers: ["@/wrappers/auth"]
+    },
+    {
+      path: "/admin",
+      component: "admin",
+      name: "管理用户",
+      wrappers: ["@/wrappers/auth"]
+    },
+    {
+      path: "/tea",
+      component: "tea",
+      name: "茶产品",
+      wrappers: ["@/wrappers/auth"]
+    },
+    {
+      path: "/fruit",
+      component: "fruit",
+      name: "水果茶产品",
+      wrappers: ["@/wrappers/auth"]
+    },
+    {
+      path: "/products",
+      component: "products",
+      name: "茶副产品",
+      wrappers: ["@/wrappers/auth"]
+    },
+    { path: "/*", component: "404" },
+  ],
+  plugins: ["@umijs/plugins/dist/react-query"],
+  reactQuery: {},
+  npmClient: "npm",
+});

config/config.ts

@@ -0,0 +1,11 @@
+import {defineConfig} from 'umi';
+ 
+export default defineConfig({
+  proxy: {
+    "/ball/v1/api": {
+      target: "http://127.0.0.1:13005",
+      changeOrigin: true,
+      // pathRewrite: { "^/api": "" },
+    },
+  },
+});

mock/products.ts

@@ -0,0 +1,39 @@
+import { defineMock } from "umi";
+
+type Product = {
+  id: string;
+  name: string;
+  age: number;
+  address: string;
+  key: string;
+};
+
+let products: Product[] = [
+  {
+    id: "1",
+    key: "1",
+    name: "胡彦斌",
+    age: 32,
+    address: "西湖区湖底公园1号",
+  },
+  {
+    id: "2",
+    key: "2",
+    name: "胡彦祖",
+    age: 42,
+    address: "西湖区湖底公园1号",
+  }
+];
+
+export default defineMock({
+  "GET /api/products": (_, res) => {
+    res.send({
+      status: "ok",
+      data: products,
+    });
+  },
+  "DELETE /api/products/:id": (req, res) => {
+    products = products.filter((item) => item.id !== req.params.id);
+    res.send({ status: "ok" });
+  },
+});

package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "author": "zs <2844379262@qq.com>",
+  "scripts": {
+    "dev": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi setup",
+    "setup": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@ant-design/pro-layout": "^7.16.0",
+    "antd": "^5.7.0",
+    "axios": "^1.4.0",
+    "umi": "^4.0.72"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "@umijs/plugins": "^4.0.72",
+    "typescript": "^5.0.3"
+  }
+}

src/components/Footer/index.tsx

@@ -0,0 +1,9 @@
+const Footer = () => {
+  return (
+    <div>
+      <p>This is umi Footer.</p>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Header/index.tsx

@@ -0,0 +1,9 @@
+const Header = () => {
+  return (
+    <div>
+      <p>This is umi Header.</p>
+    </div>
+  );
+};
+
+export default Header;

src/components/index.less

@@ -0,0 +1,12 @@
+.main{
+  .center{
+    display: flex;
+    .left{
+      height: 800px;
+    }
+    .right{
+      width: 100%;
+      padding: 1vw;
+    }
+  }
+}

src/components/index.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Outlet,Link } from 'umi';
+import { HomeOutlined, UserOutlined, ShoppingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import './index.less';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: 'group',
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = [
+  getItem((<Link to="/">系统首页</Link>), 'admin_1', <HomeOutlined />),
+  getItem('用户管理', 'admin_2', <UserOutlined />, 
+  [
+    getItem((<Link to="/user">普通用户</Link>), 'admin_2_1'),
+    getItem((<Link to="/admin">管理员</Link>), 'admin_2_2'),
+  ]),
+  getItem('产品管理', 'admin_3', <ShoppingOutlined />, 
+  [
+    getItem((<Link to="/tea">茶产品</Link>), 'admin_3_1'),
+    getItem((<Link to="/fruit">水果茶产品</Link>), 'admin_3_2'),
+    getItem((<Link to="/products">茶副产品</Link>), 'admin_3_3'),
+  ]),
+];
+
+// submenu keys of first level
+const rootSubmenuKeys = ['admin_1', 'admin_2', 'admin_3'];
+
+const App: React.FC = () => {
+  const [openKeys, setOpenKeys] = useState(['admin_1']);
+  const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
+    if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
+      setOpenKeys(keys);
+    } else {
+      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
+    }
+  };
+  return (
+    <div className='main'>
+      <div className='top'><Header /></div>
+      <div className='center'>
+        <div className='left'>
+          <Menu
+            mode="inline"
+            defaultSelectedKeys={openKeys}
+            defaultOpenKeys={openKeys}
+            openKeys={openKeys}
+            onOpenChange={onOpenChange}
+            style={{ width: 256 }}
+            items={items}
+          />
+        </div>
+        <div className='right'><Outlet /></div>
+      </div>
+      <div className='down'><Footer /></div>
+    </div>
+  );
+};
+
+export default App;

src/layouts/index.tsx

@@ -0,0 +1,14 @@
+import { Outlet, useLocation } from 'umi';
+import Index from '@/components/index';
+
+export default function Layout() {
+  const location = useLocation();
+  if (location.pathname === '/login') {
+    return <Outlet />
+  }
+  return (
+     <>
+      <Index />
+    </>
+  );
+}

src/pages/404.tsx

@@ -0,0 +1,9 @@
+const Index = () => {
+  return (
+    <div>
+      <p>404</p>
+    </div>
+  );
+};
+
+export default Index;

src/pages/admin/index.tsx

@@ -0,0 +1,9 @@
+const Admin = () => {
+  return (
+    <div>
+      <p>This is umi Admin.</p>
+    </div>
+  );
+};
+
+export default Admin;

src/pages/fruit/index.tsx

@@ -0,0 +1,9 @@
+const Fruit = () => {
+  return (
+    <div>
+      <p>This is umi fruit.</p>
+    </div>
+  );
+};
+
+export default Fruit;

src/pages/index/index.tsx

@@ -0,0 +1,9 @@
+const Index = () => {
+  return (
+    <div>
+      <p>This is umi Index.</p>
+    </div>
+  );
+};
+
+export default Index;

src/pages/login/index.tsx

@@ -0,0 +1,9 @@
+const Poducts = () => {
+  return (
+    <div>
+      <p>This is umi Poducts.</p>
+    </div>
+  );
+};
+
+export default Poducts;

src/pages/products/index.tsx

@@ -0,0 +1,45 @@
+import axios from 'axios';
+import { useMutation, useQuery, useQueryClient } from 'umi';
+import { Table } from 'antd';
+import styles from './index.less';
+
+export default function Page() {
+  const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+ ];
+  const queryClient = useQueryClient();
+  const productsQuery = useQuery(['products'], {
+    queryFn() {
+      return axios.get('/api/products').then((res) => res.data);
+    },
+  });
+  const productsDeleteMutation = useMutation({
+    mutationFn(id: string) {
+      return axios.delete(`/api/products/${id}`);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['products'] });
+    },
+  });
+  if (productsQuery.isLoading) return null;
+  return (
+    <div>
+      <h1 className={styles.title}>Page products</h1>
+      <Table dataSource={productsQuery.data.data} columns={columns} />
+    </div>
+  );
+}

src/pages/tea/index.tsx

@@ -0,0 +1,9 @@
+const Tea = () => {
+  return (
+    <div>
+      <p>This is umi Tea.</p>
+    </div>
+  );
+};
+
+export default Tea;

src/pages/user/index.tsx

@@ -0,0 +1,9 @@
+const User = () => {
+  return (
+    <div>
+      <p>This is umi User.</p>
+    </div>
+  );
+};
+
+export default User;

src/wrappers/auth.tsx

@@ -0,0 +1,16 @@
+import { Navigate, Outlet ,useLocation} from 'umi'
+ 
+export default (props:any) => {
+  const location = useLocation();
+  if (location.pathname != '/login') {
+    const token = localStorage.getItem('token');
+    if (token) {
+      return <Outlet />;
+    } else{
+      return <Outlet />;
+      return <Navigate to="/login" />;
+    }
+  }else{
+    return <Outlet />;
+  }
+}

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}

typings.d.ts

@@ -0,0 +1 @@
+import 'umi/typings';