sj-distributor · 0824F · Mar 20, 2024 · Mar 21, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/web/.editorconfig b/web/.editorconfig
@@ -0,0 +1,16 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# https://editorconfig.org/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": ["plugin:@sj-distributor/react/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/web/.gitignore b/web/.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*
diff --git a/web/.prettierignore b/web/.prettierignore
@@ -0,0 +1,2 @@
+*.json
+.history
diff --git a/web/.prettierrc.json b/web/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/web/Dockerfile b/web/Dockerfile
@@ -0,0 +1,11 @@
+FROM nginx:stable-alpine
+COPY /build /usr/share/nginx/html
+
+RUN  sed -i '12a error_page 404 /index.html;' /etc/nginx/conf.d/default.conf
+
+RUN sed -i '/^http {/a \
+    gzip on;\n\
+    gzip_static on;' /etc/nginx/nginx.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/web/README.md b/web/README.md
@@ -0,0 +1,58 @@
+# React TS Boilerplate
+
+## 技术栈
+
+- [Vite](https://vitejs.dev)
+- [React](https://reactjs.org)
+- [TypeScript](https://www.typescriptlang.org)
+- [ReactRouter](https://reactrouter.com/docs/en/v6)
+
+## 快速开始
+
+Install project dependencies
+
+```
+yarn install
+```
+
+Launch the app, it will become available at [http://localhost:3000](http://localhost:3000/)
+
+```
+yarn dev
+```
+
+## 项目规范
+
+- xxx
+- xxx
+- xxx
+
+## 目录结构
+
+`├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc<br>
+`├──`[`public`](./public) — Static assets such as robots.txt, index.html etc<br>
+`├──`[`src/assets`](./src/assets) — Static assets<br>
+`├──`[`src/components`](./src/components) — React public components<br>
+`├──`[`src/hooks`](./src/hooks) — React public hooks<br>
+`├──`[`src/pages`](./src/pages) — Application and page (screen) components<br>
+`├──`[`src/routes`](./src/routes) — Application routes components<br>
+`├──`[`src/theme`](./src/services) — External connection service<br>
+`├──`[`src/utils`](./src/utils) — Utility functions<br>
+
+## 安装以下 vscode 插件方便开发
+
+Tailwind CSS IntelliSense
+
+> https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
+
+Prettier - Code formatter
+
+> https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false#overview
+
+EditorConfig for VS Code
+
+> https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
+
+## 编码约定
+
+> https://github.com/sj-distributor/react-coding-conventions
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./public/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Camera AI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/web/package.json b/web/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.2.6",
+    "ahooks": "^3.7.4",
+    "antd": "^5.12.6",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.10",
+    "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
+    "flv.js": "^1.6.2",
+    "i18next": "^23.7.18",
+    "mpegts.js": "^1.7.3",
+    "qiniu": "^7.11.0",
+    "qiniu-js": "^3.4.1",
+    "query-string": "^8.1.0",
+    "ramda": "^0.29.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.1",
+    "react-router-dom": "^6.19.0",
+    "vite-plugin-cdn-import": "^0.3.5",
+    "vite-plugin-compression": "^0.5.1"
+  },
+  "devDependencies": {
+    "@sj-distributor/eslint-plugin-react": "^0.7.1",
+    "@types/file-saver": "^2.0.7",
+    "@types/ramda": "^0.29.3",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "fs-extra": "^11.1.1",
+    "postcss": "^8.4.21",
+    "prettier": "^2.6.2",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.1.6",
+    "typescript-plugin-css-modules": "^5.0.1",
+    "vite": "^4.4.10"
+  }
+}
diff --git a/web/postcss.config.js b/web/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/web/public/appsetting.json b/web/public/appsetting.json
@@ -0,0 +1,5 @@
+{
+  "serverUrl": "https://testsmarties.yamimeal.ca",
+  "tokenKey": "token",
+  "userNameKey": "userName"
+}
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
diff --git a/web/src/antd.css b/web/src/antd.css
@@ -0,0 +1,94 @@
+.ant-table-wrapper {
+  flex: 1;
+  height: 100%;
+}
+
+.ant-spin-nested-loading {
+  height: 100%;
+}
+
+.ant-spin-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ant-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ant-table-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ant-table-body {
+  flex: 1;
+}
+
+.ant-breadcrumb-separator {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+}
+
+.ant-pagination-total-text {
+  flex: 1 !important;
+}
+
+.ant-pagination {
+  padding: 0 16px;
+}
+
+.abc .ant-modal-content {
+  padding: 20px 0 !important;
+}
+
+.mark .ant-modal-content {
+  padding: 20px 0 !important;
+}
+
+@media (max-width: 575px) {
+  :where(.css-dev-only-do-not-override-i46qwz).ant-form:not(.ant-form-inline)
+    .ant-form-item
+    .ant-form-item-label:not([class*=" ant-col-xs"]) {
+    max-width: none;
+    flex: none;
+  }
+
+  .abc .ant-modal-body {
+    padding: 32px 64px !important;
+  }
+}
+
+.abc .ant-modal-body > .item:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+@media (min-width: 575px) {
+  .abc .ant-modal-body {
+    padding: 32px 128px !important;
+    border-bottom: 1px solid #e9edf2;
+  }
+}
+
+:where(.css-dev-only-do-not-override-i46qwz).ant-menu
+  .ant-menu-item
+  .ant-menu-item-icon {
+  min-width: 0.125rem;
+}
+
+.ant-picker-ranges .ant-picker-ok button {
+  background-color: #1677ff;
+}
+
+.ant-picker-presets li:hover {
+  color: #1677ff;
+}
+
+.ant-pagination .ant-pagination-item {
+  border-radius: 50% !important;
+}
diff --git a/web/src/app.hook.ts b/web/src/app.hook.ts
@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+import { InitialAppSetting } from "./appsetting";
+
+export const useAction = () => {
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
+
+  useEffect(() => {
+    InitialAppSetting().then(() => setIsLoaded(true));
+  }, []);
+
+  return { isLoaded };
+};
diff --git a/web/src/app.tsx b/web/src/app.tsx
@@ -0,0 +1,28 @@
+import "./i18n/i18n";
+
+import { App as MessageApp } from "antd";
+import { BrowserRouter } from "react-router-dom";
+
+import { useAction } from "./app.hook";
+import { AuthProvider } from "./hooks";
+import { Router } from "./routes";
+
+function App() {
+  const { isLoaded } = useAction();
+
+  return (
+    <BrowserRouter>
+      <MessageApp>
+        {isLoaded ? (
+          <AuthProvider>
+            <Router />
+          </AuthProvider>
+        ) : (
+          <></>
+        )}
+      </MessageApp>
+    </BrowserRouter>
+  );
+}
+
+export default App;