Merge branch 'dev' of codeup.aliyun.com:61c14a7efa282c88e103c23f/oak-cli into dev

lib/template.js

@@ -66,7 +66,6 @@ function packageJsonContent({ name, version, description, cliVersion, cliName, c
         "react-scripts": "5.0.1",
         "rmc-pull-to-refresh": "^1.0.13",
         "tdesign-icons-react": "^0.1.6",
-        "tdesign-mobile-react": "^0.2.0",
         "tdesign-react": "^0.42.2",
         "url": "^0.11.0",
         "uuid": "^8.3.2"

src/template.ts

@@ -73,7 +73,6 @@ export function packageJsonContent({
         "react-scripts": "5.0.1",
         "rmc-pull-to-refresh": "^1.0.13",
         "tdesign-icons-react": "^0.1.6",
-        "tdesign-mobile-react": "^0.2.0",
         "tdesign-react": "^0.42.2",
         "url": "^0.11.0",
         "uuid": "^8.3.2"

template/src/config/styles/_base.less

@@ -1,2 +0,0 @@
-
-@import "@oak-general-business/config/styles/_base.less";

template/src/config/styles/mp/index.less

@@ -0,0 +1,2 @@
+//小程序使用
+@import "@oak-general-business/config/styles/mp/index.less";

template/src/config/styles/web/index.less

@@ -0,0 +1 @@
+@import '@oak-general-business/config/styles/web/index.less'; // 少量公共样式

template/src/config/styles/web/theme.less

@@ -0,0 +1,194 @@
+:root[theme-color=cyan] {
+    --td-brand-color: #0594fa;
+    --td-brand-color-1: #d7eefe;
+    --td-brand-color-2: #aeddfd;
+    --td-brand-color-3: #84cafd;
+    --td-brand-color-4: #58b8fc;
+    --td-brand-color-5: #29a4fb;
+    --td-brand-color-6: #0594fa;
+    --td-brand-color-7: #29a4fb;
+    --td-brand-color-8: #0594fa;
+    --td-brand-color-9: #0378df;
+    --td-brand-color-10: #01409b;
+}
+
+:root[theme-color=green] {
+    --td-brand-color-1: #e8f8f2;
+    --td-brand-color-2: #bcebdc;
+    --td-brand-color-3: #85dbbe;
+    --td-brand-color-4: #48c79c;
+    --td-brand-color-5: #00a870;
+    --td-brand-color-6: #078d5c;
+    --td-brand-color-7: #067945;
+    --td-brand-color-8: #00a870;
+    --td-brand-color-9: #044f2a;
+    --td-brand-color-10: #033017;
+}
+
+:root[theme-color=yellow] {
+    --td-brand-color: #ebb105;
+    --td-brand-color-1: #fde9ab;
+    --td-brand-color-2: #fbd152;
+    --td-brand-color-3: #ebb105;
+    --td-brand-color-4: #dda204;
+    --td-brand-color-5: #ca8d03;
+    --td-brand-color-6: #b67803;
+    --td-brand-color-7: #fbd152;
+    --td-brand-color-8: #ebb105;
+    --td-brand-color-9: #dda204;
+    --td-brand-color-10: #603100;
+}
+
+:root[theme-color=orange] {
+    --td-brand-color-1: #fce5d7;
+    --td-brand-color-2: #f8cdaf;
+    --td-brand-color-3: #f4b285;
+    --td-brand-color-4: #f19659;
+    --td-brand-color-5: #ed7b2f;
+    --td-brand-color-6: #e75510;
+    --td-brand-color-7: #f19659;
+    --td-brand-color-8: #ed7b2f;
+    --td-brand-color-9: #e75510;
+    --td-brand-color-10: #7f0a02;
+    --td-brand-color: #ed7b2f;
+}
+
+:root[theme-color=red] {
+    --td-brand-color: #e34d59;
+    --td-brand-color-1: #fbe5e7;
+    --td-brand-color-2: #f7ccd0;
+    --td-brand-color-3: #f3b2b8;
+    --td-brand-color-4: #ef989f;
+    --td-brand-color-5: #ea7b84;
+    --td-brand-color-6: #e34d59;
+    --td-brand-color-7: #ea7b84;
+    --td-brand-color-8: #e34d59;
+    --td-brand-color-9: #e42c3a;
+    --td-brand-color-10: #8d0309;
+}
+
+:root[theme-color=pink] {
+    --td-brand-color: #ed49b4;
+    --td-brand-color-1: #fce5f4;
+    --td-brand-color-2: #facae9;
+    --td-brand-color-3: #f7aede;
+    --td-brand-color-4: #f491d2;
+    --td-brand-color-5: #f172c5;
+    --td-brand-color-6: #ed49b4;
+    --td-brand-color-7: #f172c5;
+    --td-brand-color-8: #ed49b4;
+    --td-brand-color-9: #e80f9d;
+    --td-brand-color-10: #8f025e;
+}
+
+:root[theme-color=purple] {
+    --td-brand-color: #834ec2;
+    --td-brand-color-1: #eee6f7;
+    --td-brand-color-2: #ddceee;
+    --td-brand-color-3: #ccb6e6;
+    --td-brand-color-4: #bb9edc;
+    --td-brand-color-5: #ab87d5;
+    --td-brand-color-6: #9a6fce;
+    --td-brand-color-7: #9a6fce;
+    --td-brand-color-8: #834ec2;
+    --td-brand-color-9: #783ac3;
+    --td-brand-color-10: #4c1397;
+}
+
+:root[theme-color=cyan][theme-mode=dark] {
+    --td-brand-color: #29a4fb;
+    --td-brand-color-1: #01409b;
+    --td-brand-color-2: #0152b3;
+    --td-brand-color-3: #0264ca;
+    --td-brand-color-4: #0378df;
+    --td-brand-color-5: #0594fa;
+    --td-brand-color-6: #29a4fb;
+    --td-brand-color-7: #0594fa;
+    --td-brand-color-8: #29a4fb;
+    --td-brand-color-9: #58b8fc;
+    --td-brand-color-10: #d7eefe;
+}
+
+:root[theme-color=green][theme-mode=dark] {
+    --td-brand-color: #03a56f;
+    --td-brand-color-1: #024b15;
+    --td-brand-color-2: #03965c;
+    --td-brand-color-3: #03a56f;
+    --td-brand-color-4: #04c383;
+    --td-brand-color-5: #03965c;
+    --td-brand-color-6: #03a56f;
+    --td-brand-color-7: #04c383;
+    --td-brand-color-8: #03a56f;
+    --td-brand-color-9: #05eb9f;
+    --td-brand-color-10: #91fdd9;
+}
+
+:root[theme-color=yellow][theme-mode=dark] {
+    --td-brand-color: #ca8d03;
+    --td-brand-color-1: #603100;
+    --td-brand-color-2: #764101;
+    --td-brand-color-3: #8c5201;
+    --td-brand-color-4: #a16502;
+    --td-brand-color-5: #b67803;
+    --td-brand-color-6: #ca8d03;
+    --td-brand-color-7: #764101;
+    --td-brand-color-8: #ca8d03;
+    --td-brand-color-9: #a16502;
+    --td-brand-color-10: #fde9ab;
+}
+
+:root[theme-color=orange][theme-mode=dark] {
+    --td-brand-color: #ed7b2f;
+    --td-brand-color-1: #692204;
+    --td-brand-color-2: #873105;
+    --td-brand-color-3: #a24006;
+    --td-brand-color-4: #c25110;
+    --td-brand-color-5: #d66724;
+    --td-brand-color-6: #ed8139;
+    --td-brand-color-7: #ff9852;
+    --td-brand-color-8: #ed7b2f;
+    --td-brand-color-9: #ed7b2f;
+    --td-brand-color-10: #fce5d7;
+}
+
+:root[theme-color=red][theme-mode=dark] {
+    --td-brand-color: #fb6e77;
+    --td-brand-color-1: #4f3335;
+    --td-brand-color-2: #960627;
+    --td-brand-color-3: #b01c37;
+    --td-brand-color-4: #c9384a;
+    --td-brand-color-5: #e35661;
+    --td-brand-color-6: #fb6e77;
+    --td-brand-color-7: #ff9195;
+    --td-brand-color-8: #fb6e77;
+    --td-brand-color-9: #ffd6d8;
+    --td-brand-color-10: #fff2f2;
+}
+
+root[theme-color=pink][theme-mode=dark] {
+    --td-brand-color: #ff70cf;
+    --td-brand-color-1: #5b374f;
+    --td-brand-color-2: #9b066d;
+    --td-brand-color-3: #bc088a;
+    --td-brand-color-4: #d435a0;
+    --td-brand-color-5: #ed53b7;
+    --td-brand-color-6: #ff70cf;
+    --td-brand-color-7: #ff99e4;
+    --td-brand-color-8: #ff70cf;
+    --td-brand-color-9: #ffdbfd;
+    --td-brand-color-10: #fff2ff;
+}
+
+root[theme-color=purple][theme-mode=dark] {
+    --td-brand-color: #ab87d5;
+    --td-brand-color-1: #4c1397;
+    --td-brand-color-2: #6325b0;
+    --td-brand-color-3: #783ac3;
+    --td-brand-color-4: #834ec2;
+    --td-brand-color-5: #9a6fce;
+    --td-brand-color-6: #ab87d5;
+    --td-brand-color-7: #ab87d5;
+    --td-brand-color-8: #ab87d5;
+    --td-brand-color-9: #ccb6e6;
+    --td-brand-color-10: #eee6f7;
+}

template/web/src/App.less

@@ -1,2 +1,2 @@
-@import 'tdesign-react/es/style/index.css'; // 少量公共样式
-@import 'tdesign-mobile-react/es/style/index.css'; // 少量公共样式
+@import '@project/config/styles/web/index.less'; // 少量公共样式
+@import '@project/config/styles/web/theme.less';

template/web/src/AppContainer.tsx

@@ -1,5 +1,4 @@
 import React, { lazy } from 'react';
-import Loading from './components/Loading';
 const Message = lazy(() => import('@oak-general-business/components/message'));
 const DebugPanel = lazy(() => import('@oak-general-business/components/func/debugPanel'));
 
@@ -10,11 +9,15 @@ type AppContainerProps = {
 const AppContainer = (props: AppContainerProps) => {
     const { children } = props;
     return (
-        <React.Suspense fallback={<Loading />}>
-            <Message />
+        <React.Fragment>
+            <React.Suspense fallback={<></>}>
+                <Message />
+            </React.Suspense>
             {children}
-            {process.env.NODE_ENV === 'development' && <DebugPanel />}
-        </React.Suspense>
+            <React.Suspense fallback={<></>}>
+                {process.env.NODE_ENV === 'development' && <DebugPanel />}
+            </React.Suspense>
+        </React.Fragment>
     );
 };
 

template/web/src/AppRouter.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Routes, Route, Outlet } from 'react-router-dom';
+import routers, { IRouter, IBrowserRouterProps } from './router/index';
+import Loading from './components/Loading';
+
+type TRenderRoutes = (
+    routes?: IRouter[],
+    breadcrumbs?: string[],
+) => React.ReactNode[] | null;
+
+/**
+ * 渲染应用路由
+ * @param routes
+ * @param breadcrumb
+ */
+const renderRoutes: TRenderRoutes = (
+    routes = [],
+    breadcrumb = [],
+) => {
+    if (routes.length === 0) return null;
+    return routes.map((route, index: number) => {
+        const { Component, children, meta, namespace, isFirst } = route;
+        let currentBreadcrumb = breadcrumb;
+        let props = {};
+        if (isFirst) {
+            props = {
+                index: true,
+            };
+        } else {
+            props = {
+                path: route.path,
+            };
+        }
+        return (
+            <Route
+                {...props}
+                key={index}
+                element={
+                    <Guard
+                        Component={Component}
+                        meta={meta}
+                        namespace={namespace}
+                        breadcrumb={currentBreadcrumb}
+                    />
+                }
+            >
+                {renderRoutes(children, currentBreadcrumb)}
+            </Route>
+        );
+    });
+}
+
+const Guard = React.memo((props: {
+    Component?: React.FC<IBrowserRouterProps> | (() => any);
+    namespace?: string;
+    meta?: Record<string, any>;
+    breadcrumb: string[];
+}) => {
+    const { Component, namespace, meta, breadcrumb } = props;
+    if (meta?.title) {
+        breadcrumb.push(meta?.title);
+        window.document.title = meta?.title;
+    }
+
+    return Component ? (
+        <React.Suspense fallback={<Loading />}>
+            <Component
+                enablePullDownRefresh={meta?.enablePullDownRefresh}
+                namespace={namespace}
+            />
+        </React.Suspense>
+    ) : (
+        <Outlet />
+    );
+});   
+
+const AppRouter = React.memo(() => <Routes>{renderRoutes(routers)}</Routes>);
+
+export default AppRouter;

template/web/src/components/notFound/index.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-
-
-const NotFound = () => {
-    return <div>你来到了未知的区域</div>;
-};
-
-export default NotFound;

template/web/src/router/index.ts

@@ -0,0 +1,72 @@
+import { BrowserRouterProps } from 'react-router-dom';
+export interface IBrowserRouterProps extends BrowserRouterProps {
+    namespace?: string;
+    enablePullDownRefresh?: boolean;
+}
+
+export interface IRouter {
+    path: string;
+    /**
+     * 是否为根路由
+     */
+    isFirst?: boolean;
+    namespace?: string;
+    Component?: React.FC<IBrowserRouterProps> | (() => any);
+    /**
+     * 当前路由是否全屏显示
+     */
+    isFullPage?: boolean;
+    /**
+     * meta
+     */
+    meta?: {
+        title?: string;
+        Icon?: React.FC;
+        /**
+         * 侧边栏隐藏该路由
+         */
+        hidden?: boolean;
+        auth?: boolean;
+        enablePullDownRefresh?: boolean;
+    };
+    children?: IRouter[];
+}
+
+let allRouters: IRouter[] = [];
+// 项目路径别名
+type Project = '@project' | '@oak-general-business';
+//路径path
+type FilePath = '@oak-general-business/pages/result/404';
+// 嵌套路由顶层path
+type Namespaces =
+    | '/console'
+    | '/'
+// 路由path
+type RoutePath = string;
+//禁用 对Project和RouterPath进行组装 默认false，传入true，就不会组装，直接FilePath
+type DisableAssemble = boolean | undefined | null;
+// 设置根路由
+type IsFirst = boolean;
+type Namespace = Array<Namespaces> | [] | undefined | null | '';
+// [路径别名｜路径path， 路由path，[嵌套路由顶层path]，设置根路由, 禁用拼装]
+type Page = [
+    Project | FilePath,
+    RoutePath,
+    Namespace?,
+    IsFirst?,
+    DisableAssemble?
+];
+
+const namespaces: Record<Namespaces, string> = {
+    '/console': './../components/console',
+    '/': './../components/frontend',
+};
+
+const pages: Array<Page> = [
+    ['@oak-general-business', '/login'],
+    ['@project', '/book/list', ['/', '/console']],
+
+    ['@oak-general-business/pages/result/404', '*', undefined, false, true], // 放在数组最后
+];
+
+export default allRouters;