feat: ✨ 新增plop项目模板app

apps/admin/build/utils.ts

@@ -1,9 +1,9 @@
 declare type Recordable<T = any> = Record<string, T>;
 
 interface ViteEnv {
-  VITE_PORT: number
-  VITE_PROXY: [string, string][]
-  VITE_DROP_CONSOLE: boolean
+  VITE_PORT: number;
+  VITE_PROXY: [string, string][];
+  VITE_DROP_CONSOLE: boolean;
 }
 
 // read all environment variable configuration files to process.env

package.json

@@ -19,7 +19,8 @@
     "clean": "pnpm clean:node-modules & pnpm clean:turbo-cache",
     "clean:node-modules": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
     "clean:turbo-cache": "rm -rf ./node_modules/.cache",
-    "reinstall": "pnpm run clean && rm -rf node_modules && rm -rf pnpm-lock.yaml && pnpm run bootstrap"
+    "reinstall": "pnpm run clean && rm -rf node_modules && rm -rf pnpm-lock.yaml && pnpm run bootstrap",
+    "create:app": "plop app"
   },
   "keywords": [],
   "author": "",

plop/app/.eslintrc.js.hbs

@@ -0,0 +1,12 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['gbeata-eslint'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  rules: {
+    '@typescript-eslint/no-unused-expressions': 'off',
+  },
+};

plop/app/build/utils.ts.hbs

@@ -0,0 +1,39 @@
+declare type Recordable<T = any> = Record<string, T>;
+
+interface ViteEnv {
+  VITE_PORT: number;
+  VITE_PROXY: [string, string][];
+  VITE_DROP_CONSOLE: boolean;
+}
+
+// read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const result: any = {};
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, '\n');
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+
+    if (envName === 'VITE_PORT') {
+      realName = Number(realName);
+    }
+
+    if (envName === 'VITE_PROXY' && realName) {
+      try {
+        realName = JSON.parse(realName.replace(/'/g, '"'));
+      } catch (error) {
+        realName = '';
+      }
+    }
+
+    result[envName] = realName;
+
+    if (typeof realName === 'string') {
+      process.env[envName] = realName;
+    } else if (typeof realName === 'object') {
+      process.env[envName] = JSON.stringify(realName);
+    }
+  }
+
+  return result;
+}

plop/app/package.json.hbs

@@ -11,19 +11,26 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
-    "react": "latest",
+    "@ant-design/icons": "^5.2.6",
+    "antd": "^5.12.8",
+    "antd-style": "^3.6.1",
+    "mockjs": "^1.1.0",
     "react": "latest",
     "react-dom": "latest",
     "react-router-dom": "^6.17.0",
-    "mockjs": "^1.1.0",
-    "ui": "workspace:^",
+    "store": "workspace:^",
+    "ui": "workspace:^" 
   },
   "devDependencies": {
     "@types/react": "latest",
     "@types/react-dom": "latest",
+    "classnames": "^2.3.2",
     "eslint-config-gbeata-eslint": "workspace:^",
     "typescript": "latest",
     "vite": "latest",
     "vite-plugin-mock": "2.9.6",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "prettier": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.0"
   }
 }

plop/app/prettier.config.mjs.hbs

@@ -0,0 +1,27 @@
+// 配置文档: https://prettier.nodejs.cn/
+
+/** @type {import('prettier').Config} */
+export default {
+  // 每行最大宽度，超过换行
+  printWidth: 120,
+  // 缩进级别的空格数
+  tabWidth: 2,
+  // 用制表符而不是空格缩进行
+  useTabs: false,
+  // 使用单引号而不是双引号
+  singleQuote: true,
+  // 在 JSX 中使用单引号而不是双引号
+  jsxSingleQuote: true,
+  // 对象字面量中括号之间有空格 { foo: bar }
+  bracketSpacing: true,
+  // 将多行 HTML（HTML、JSX）元素的 > 放在最后一行的末尾，而不是单独放在下一行
+  bracketSameLine: false,
+  // 在唯一的箭头函数参数周围包含括号(avoid：省略括号, always：不省略括号)
+  arrowParens: 'always',
+  // 换行符使用 lf 结尾 可选值 auto|lf|crlf|cr
+  endOfLine: 'lf',
+  objectCurlyNewline: {
+    // 对象大括号换行
+    multiline: true,
+  },
+};

plop/app/src/App.tsx.hbs

@@ -4,7 +4,7 @@ import { HashRouter, RouterProvider } from 'react-router-dom';
 import { useGlobalStore } from 'store';
 import { GlobalConfig } from 'ui';
 
-import router, { Router } from '@/router';
+import router from '@/router/router';
 import CustomGlobal from '@/styles/GlobalPager';
 
 import LoadingPage from './components/LoadingPage';
@@ -25,24 +25,11 @@ function App() {
     };
 
     asyncOperation();
-  }, []); // 仅在组件挂载时执行
+  }, []); 
   return (
     <GlobalConfig>
       <ThemeProvider
         defaultThemeMode='light'
-        theme={{
-          token: {
-            colorPrimary: preset,
-            colorInfo: '#00B8D9',
-            colorSuccess: '#22C55E',
-            colorWarning: '#FFAB00',
-            colorError: '#FF5630',
-            colorLink: preset,
-          },
-        }}
-        customToken={{
-          colorDefault: '#212b36',
-        }}
       >
         <CustomGlobal />
         {loading ? <LoadingPage /> : <RouterProvider router={router} />}

plop/app/src/_createProductionServer.ts.hbs

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
+
+// 获取mock目录data的数据
+
+const modules = import.meta.glob('../mock/data/*.ts', { eager: true }) as Recordable;
+
+const mockModules: any[] = [];
+Object.keys(modules).forEach((key) => {
+  if (key.includes('/_')) return;
+
+  const module = modules[key].default || {};
+  const moduleList = Array.isArray(module) ? [...module] : [module];
+  mockModules.push(...moduleList);
+});
+
+/**
+ * Used in a production environment, need to manually import all modules.
+ */
+export function setupProdMockServer() {
+  console.log(mockModules);
+  createProdMockServer(mockModules);
+}

plop/app/src/components/LazyLoad/index.ts.hbs

@@ -0,0 +1,3 @@
+import LazyLoad from './src/LazyLoad';
+
+export default LazyLoad;

plop/app/src/components/LazyLoad/src/LazyLoad.tsx.hbs

@@ -0,0 +1,20 @@
+import { type ReactNode, Suspense } from 'react';
+
+import Loading from './Loading';
+
+import type { LoadableComponent } from '@loadable/component';
+
+/**
+ * @description 路由懒加载
+ * @param {Element} Component 需要访问的组件
+ * @returns element
+ */
+const LazyLoad = (Component: LoadableComponent<{}>): ReactNode => (
+  <>
+    <Suspense fallback={<Loading />}>
+      <Component />
+    </Suspense>
+  </>
+);
+
+export default LazyLoad;

plop/app/src/components/LazyLoad/src/Loading.tsx.hbs

@@ -0,0 +1,52 @@
+/* HTML: <div class="loader"></div> */
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css, token }) => ({
+  loadingContainer: css`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+  `,
+  loading: css`
+    width: 50px;
+    aspect-ratio: 1;
+    display: grid;
+    border: 4px solid #0000;
+    border-radius: 50%;
+    border-right-color: ${token.colorPrimary};
+    animation: l15 1s infinite linear;
+    &:before,
+    &:after {
+      content: '';
+      grid-area: 1/1;
+      margin: 2px;
+      border: inherit;
+      border-radius: 50%;
+      animation: l15 2s infinite;
+    }
+    &:after {
+      margin: 8px;
+      animation-duration: 3s;
+    }
+    @keyframes l15 {
+      100% {
+        transform: rotate(1turn);
+      }
+    }
+  `,
+}));
+
+const Loading = () => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.loadingContainer}>
+      <div className={styles.loading} />
+    </div>
+  );
+};
+
+export default Loading;

plop/app/src/components/LoadingPage/index.tsx.hbs

@@ -0,0 +1,19 @@
+import SvgIcon from '../SvgIcon';
+import useStyles from './style';
+
+const LoadingPage = () => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles['loading-page']}>
+      <div className='loading-side'></div>
+      <SvgIcon
+        className='
+        loading-logo'
+        name='logo'
+        size={32}
+      />
+      <div className='loading-in'></div>
+    </div>
+  );
+};
+export default LoadingPage;

plop/app/src/components/LoadingPage/style.ts.hbs

@@ -0,0 +1,77 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => ({
+  'loading-page': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100vh',
+    '.loading-logo': {
+      position: 'absolute',
+      color: token.colorPrimary,
+      left: '50%',
+      marginLeft: '-16px',
+      animation: 'loading3 3s linear forwards',
+      transformOrigin: 'center center',
+    },
+    '@keyframes loading3': {
+      '50%': {
+        transform: 'perspective(100px) rotateY(360deg) scale(0.8)',
+        opacity: 0.6,
+      },
+    },
+    '.loading-side': {
+      width: '80px',
+      height: '80px',
+      border: `2px solid ${token.colorPrimaryBorder}`,
+      animation: 'loading 3s linear forwards',
+    },
+    '@keyframes loading': {
+      '25%': {
+        transform: 'rotate(180deg)',
+      },
+      '50%': {
+        opacity: 0.5,
+        borderRadius: '50%',
+        transform: 'scale(0.85)',
+      },
+      '100%': {
+        transform: 'scale(1.15)',
+        opacity: 1,
+        borderRadius: '30%',
+        borderColor: token.colorPrimaryBorderHover,
+      },
+    },
+    '.loading-in': {
+      width: '68px',
+      height: '68px',
+      position: 'absolute',
+      left: '50%',
+      marginLeft: '-38px',
+      border: `4px solid ${token.colorPrimaryBorderHover}`,
+      animation: 'loading1 3s linear forwards',
+    },
+    '@keyframes loading1': {
+      '0%': {
+        transform: 'rotate(45deg)',
+      },
+      '25%': {
+        transform: 'rotate(270deg) ',
+      },
+      '50%': {
+        opacity: 0.5,
+        borderRadius: '50%',
+        transform: 'scale(1.4)',
+      },
+      '100%': {
+        transform: 'scale(0.98)',
+        opacity: 1,
+        borderRadius: '30%',
+        borderColor: token.colorPrimaryBorder,
+      },
+    },
+  },
+}));
+
+export default useStyles;

plop/app/src/components/SvgIcon/index.module.style.ts.hbs

@@ -0,0 +1,11 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(() => ({
+  'svg-icon': {
+    display: 'inline-block',
+    verticalAlign: '-0.15em',
+    fill: 'currentColor',
+    overflow: 'hidden',
+  },
+}));
+export default useStyles;