feat: 🚀 initialize the react low code project, improve the dashboardP…

…age, and create components
limuen · May 27, 2024 · 01b8973 · 01b8973
1 parent af5f278
commit 01b8973
Show file tree

Hide file tree

Showing 24 changed files with 6,390 additions and 5,524 deletions.
diff --git a/apps/react-low-code/.env b/apps/react-low-code/.env
@@ -0,0 +1 @@
+VITE_GLOB_APP_TITLE = React-Low-Code
diff --git a/apps/react-low-code/.gitignore b/apps/react-low-code/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/react-low-code/README.md b/apps/react-low-code/README.md
@@ -0,0 +1 @@
+# React + TypeScript + Vite
diff --git a/apps/react-low-code/index.html b/apps/react-low-code/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React-Low-Code</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/react-low-code/package.json b/apps/react-low-code/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "react-low-code",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "antd": "^5.15.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3"
+  },
+  "devDependencies": {
+    "@limuen/tsconfig": "workspace:*",
+    "@limuen/viteconfig": "workspace:*",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/apps/react-low-code/public/vite.svg b/apps/react-low-code/public/vite.svg
diff --git a/apps/react-low-code/src/App.tsx b/apps/react-low-code/src/App.tsx
@@ -0,0 +1,14 @@
+import { RouterProvider } from "react-router-dom";
+import zhCN from "antd/locale/zh_CN";
+import { ConfigProvider } from "antd";
+import router from "./router";
+
+export function App() {
+  return (
+    <ConfigProvider locale={zhCN} prefixCls="ant-prefix">
+      <RouterProvider router={router} />
+    </ConfigProvider>
+  );
+}
+
+export default App;
diff --git a/apps/react-low-code/src/assets/react.svg b/apps/react-low-code/src/assets/react.svg
diff --git a/apps/react-low-code/src/layout/index.tsx b/apps/react-low-code/src/layout/index.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Menu } from "antd";
+
+const Layout: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [selectedKeys, setSelectedKeys] = useState(["/"]);
+  const items: any[] = [
+    {
+      key: "/lowcode/table",
+      label: "表格"
+    },
+    {
+      key: "/lowcode/form",
+      label: "表单"
+    },
+    {
+      key: "/lowcode/modal",
+      label: "弹窗"
+    },
+    {
+      key: "/lowcode/component",
+      label: "组件"
+    },
+    {
+      key: "/dashboard",
+      label: "首页"
+    }
+  ];
+
+  useEffect(() => {
+    setSelectedKeys([location.pathname]);
+  }, []);
+
+  return (
+    <div style={{ display: "flex", overflow: "hidden" }}>
+      <div
+        style={{
+          minHeight: "100vh"
+        }}
+      >
+        <Menu
+          mode="inline"
+          selectedKeys={selectedKeys}
+          items={items}
+          onClick={({ key }: any) => {
+            setSelectedKeys([key]);
+            navigate(key);
+          }}
+          style={{
+            width: 100,
+            height: "100%",
+            transition: "width .3s"
+          }}
+        />
+      </div>
+      <div
+        style={{
+          flex: "auto",
+          boxSizing: "border-box",
+          background: "#fff",
+          minHeight: "100vh",
+          transition: "width .3s"
+        }}
+      >
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/apps/react-low-code/src/main.tsx b/apps/react-low-code/src/main.tsx
@@ -0,0 +1,5 @@
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "antd/dist/reset.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
diff --git a/apps/react-low-code/src/router/index.tsx b/apps/react-low-code/src/router/index.tsx
@@ -0,0 +1,45 @@
+import { RouteObject, createHashRouter, Navigate } from "react-router-dom";
+import Layout from "@/layout";
+import Dashboard from "@/views/dashboard";
+import TableComponent from "@/views/lowCode/table";
+import FormComponent from "@/views/lowCode/form";
+import ModalComponent from "@/views/lowCode/modal";
+import Component from "@/views/lowCode/component";
+
+const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <Navigate to={"/dashboard"} />
+  },
+  {
+    path: "/dashboard",
+    element: <Dashboard />
+  },
+  {
+    path: "/lowcode",
+    element: <Layout />,
+    children: [
+      {
+        path: "/lowcode/table",
+        index: true,
+        element: <TableComponent />
+      },
+      {
+        path: "/lowcode/modal",
+        element: <ModalComponent />
+      },
+      {
+        path: "/lowcode/component",
+        element: <Component />
+      },
+      {
+        path: "/lowcode/form",
+        element: <FormComponent />
+      }
+    ]
+  }
+];
+
+const router = createHashRouter(routes);
+
+export default router;
diff --git a/apps/react-low-code/src/style/index.less b/apps/react-low-code/src/style/index.less
@@ -0,0 +1,26 @@
+/* global */
+
+html,
+body,
+#root,
+.ant-app,
+.watermark-content {
+  height: 100%;
+  background-color: var(--hooks-colorBgContainer);
+}
+
+/* scroll bar */
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--hooks-scrollbarThumb);
+  border-radius: 20px;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
diff --git a/apps/react-low-code/src/views/dashboard/index.less b/apps/react-low-code/src/views/dashboard/index.less
@@ -0,0 +1,66 @@
+.dashboard_wrapper .banner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 470px;
+  padding-bottom: 50px;
+  text-align: center;
+  .title {
+    font-family: Alipuhui;
+    font-size: 60px;
+    line-height: 1.3;
+    color: #333333;
+  }
+  .desciption {
+    margin: 30px auto 40px;
+    font-size: 16px;
+    color: #333333;
+  }
+}
+
+.dashboard_wrapper .part4 {
+  padding: 80px 0 120px;
+  .title {
+    font-family: Alipuhui;
+    font-size: 28px;
+    text-align: center;
+  }
+  .desciption {
+    margin: 20px auto 40px;
+    font-size: 15px;
+    text-align: center;
+  }
+  .inner {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    max-width: 1208px;
+    padding: 0 48px;
+    margin: 0 auto;
+    .base {
+      flex: 1;
+      padding: 0 10px;
+      .base-container {
+        padding: 32px;
+        text-align: center;
+        background-color: #f6f8ff;
+        border-radius: 6px;
+      }
+      .demo {
+        height: 350px;
+      }
+    }
+  }
+}
+
+.dashboard_wrapper footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px 0;
+  font-size: 14px;
+  color: #666666;
+  text-align: center;
+  background-color: #f6f8ff;
+}
diff --git a/apps/react-low-code/src/views/dashboard/index.tsx b/apps/react-low-code/src/views/dashboard/index.tsx
@@ -0,0 +1,44 @@
+import { NavLink } from "react-router-dom";
+import { Button } from "antd";
+import "./index.less";
+
+const Dashboard: React.FC = () => {
+  return (
+    <div className="dashboard_wrapper">
+      <div className="banner">
+        <div className="title">React-Low-Code</div>
+        <div className="desciption">React低代码平台</div>
+        <div className="btn-container">
+          <NavLink to="/lowcode/table">
+            <Button type="primary" size="large">
+              开始上路
+            </Button>
+          </NavLink>
+        </div>
+      </div>
+
+      <section className="part4">
+        <div className="title">好好学习，天天向上</div>
+        <div className="desciption">心愿：掌握资深前端的使用法则，成为更强的开发者</div>
+        <div className="inner">
+          <div className="base">
+            <div className="base-container">React-Low-Code</div>
+          </div>
+          <div className="base">
+            <div className="base-container">使用 Ant Design 组件</div>
+          </div>
+          <div className="base">
+            <div className="base-container">仅需配置即可生成现有代码</div>
+          </div>
+        </div>
+      </section>
+
+      <footer>
+        <div className="auther">@copyright Limuen</div>
+        <div className="desc">React-Low-Code</div>
+      </footer>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/apps/react-low-code/src/views/lowCode/component/index.tsx b/apps/react-low-code/src/views/lowCode/component/index.tsx
@@ -0,0 +1,5 @@
+const Component: React.FC = () => {
+  return <>Component</>;
+};
+
+export default Component;
diff --git a/apps/react-low-code/src/views/lowCode/form/index.tsx b/apps/react-low-code/src/views/lowCode/form/index.tsx
@@ -0,0 +1,5 @@
+const FormComponent: React.FC = () => {
+  return <>FormComponent</>;
+};
+
+export default FormComponent;
diff --git a/apps/react-low-code/src/views/lowCode/modal/index.tsx b/apps/react-low-code/src/views/lowCode/modal/index.tsx
@@ -0,0 +1,5 @@
+const ModalComponent: React.FC = () => {
+  return <>ModalComponent</>;
+};
+
+export default ModalComponent;
diff --git a/apps/react-low-code/src/views/lowCode/table/index.tsx b/apps/react-low-code/src/views/lowCode/table/index.tsx
@@ -0,0 +1,5 @@
+const TableComponent: React.FC = () => {
+  return <>TableComponent</>;
+};
+
+export default TableComponent;
diff --git a/apps/react-low-code/src/vite-env.d.ts b/apps/react-low-code/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/react-low-code/tsconfig.json b/apps/react-low-code/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@limuen/tsconfig/base.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "vite.config.ts"],
+  "exclude": ["node_modules"]
+}