Merge pull request #3 from ClearXs/0.1.x

0.1.x

Author: ClearXs

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "clearx",
-  "version": "0.1.0.beta.1",
+  "name": "ClearX-Turbo",
+  "version": "0.1.0",
   "description": "Turbo快速开发框架",
   "license": "MIT",
   "author": "[email protected]",
@@ -35,14 +35,14 @@
     "test:cover": "vitest run --coverage"
   },
   "dependencies": {
-    "@designable/core": "0.0.1-beta.13",
-    "@designable/formily-semi": "0.0.1-beta.13",
-    "@designable/formily-setters": "0.0.1-beta.13",
-    "@designable/formily-transformer": "0.0.1-beta.13",
-    "@designable/react": "0.0.1-beta.13",
-    "@designable/react-sandbox": "0.0.1-beta.13",
-    "@designable/react-settings-form": "0.0.1-beta.13",
-    "@designable/shared": "0.0.1-beta.13",
+    "@designable/core": "0.0.1-beta.22",
+    "@designable/formily-semi": "0.0.1-beta.22",
+    "@designable/formily-setters": "0.0.1-beta.22",
+    "@designable/formily-transformer": "0.0.1-beta.22",
+    "@designable/react": "0.0.1-beta.22",
+    "@designable/react-sandbox": "0.0.1-beta.22",
+    "@designable/react-settings-form": "0.0.1-beta.22",
+    "@designable/shared": "0.0.1-beta.22",
     "@douyinfe/semi-icons": "^2.50.0",
     "@douyinfe/semi-illustrations": "^2.50.0",
     "@douyinfe/semi-ui": "^2.50.0",
@@ -61,8 +61,10 @@
     "iconoir": "^7.2.0",
     "iconoir-react": "^7.2.0",
     "lodash": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-cache": "2.0.0-alpha.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -1,24 +1,83 @@
+import '@/pages/developer/editor';
 import { Layout } from '@douyinfe/semi-ui';
 import MotionContent from './components/MotionContent';
 import MotionHeader from './components/MotionHeader';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { GlobalRegistry } from '@designable/core';
+import { SUPPORT_LOCALES } from './components/MotionHeader/Locales';
+import { useLoaderData, useLocation } from 'react-router-dom';
+import { TurboRoute } from './route/AppRouter';
+import { observable } from '@formily/reactive';
+import { findRoute } from './route/util';
+import { AppContext } from './context';
+import { observer } from '@formily/reactive-react';
+import { UserTab } from './components/MotionContent/interface';
+import { createContentTab } from './components/MotionContent/util';
 import './locales';
+import './theme/default.css';
 
-import { SUPPORT_LOCALES } from './components/MotionHeader/Locales';
+export type AppProperty = {
+  // 当前用户route
+  userRoutes: TurboRoute[];
+  // 选择顶部菜单的key
+  selectTopKey: string | undefined;
+  // 选择侧边菜单的key
+  selectSideKey: string | undefined;
+  // 小tab栏
+  userTabs: UserTab[];
+  // 选中的小tab栏
+  selectTabKey: string | undefined;
+};
 
 export default function App(): React.ReactNode {
+  const userRoutes = useLoaderData() as TurboRoute[];
+  const location = useLocation();
+
+  const app = useMemo(() => {
+    const { pathname } = location;
+    const route = findRoute(pathname, userRoutes);
+    const app: AppProperty = observable({
+      userRoutes,
+      selectTopKey: route ? route.topRouteKey || 'home' : 'home',
+      selectSideKey: undefined,
+      userTabs: [],
+      selectTabKey: undefined,
+    });
+    return app;
+  }, []);
+
   useEffect(() => {
     const supportLocales = SUPPORT_LOCALES.map((locales) => locales.value);
     if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
       GlobalRegistry.setDesignerLanguage('zh-cn');
     }
-  }, []);
+    const { pathname } = location;
+    const route = findRoute(pathname, app.userRoutes);
+    if (route) {
+      app.selectTopKey = route.topRouteKey;
+      app.selectSideKey = route.code;
+      const newTabs = createContentTab(
+        app.userTabs,
+        route,
+        route.topRouteKey as string,
+      );
+      if (newTabs) {
+        app.userTabs = newTabs;
+      }
+      app.selectTabKey = route.code;
+    }
+  }, [location]);
 
+  return <AppLayout app={app} />;
+}
+
+const AppLayout: React.FC<{ app: AppProperty }> = observer(({ app }) => {
   return (
     <Layout className="h-100vh w-100vw overflow-hidden">
-      <MotionHeader />
-      <MotionContent />
+      <AppContext.Provider value={app}>
+        <MotionHeader />
+        <MotionContent />
+      </AppContext.Provider>
     </Layout>
   );
-}
+});

src/App.tsx

@@ -31,18 +31,52 @@ export interface Bo extends TenantEntity, CategoryEntity {
 }
 
 export interface BoApi extends GeneralApi<Bo> {
+  check: (boId: string) => Promise<R<boolean>>;
   /**
    * 获取bo schema
    */
   schema: (boId: string) => Promise<R<BoSchema>>;
+
+  /**
+   * 保存bo schema
+   * @param boSchema bo schema
+   * @returns
+   */
+  saveSchema: (boSchema: BoSchema) => Promise<R<boolean>>;
+
+  /**
+   * 物化
+   * @param boId bo id
+   * @returns true if success
+   */
+  materialize: (boId: string) => Promise<R<boolean>>;
 }
 
 class BoApiImpl extends GeneralApiImpl<Bo> implements BoApi {
+  check(boId: string): Promise<R<boolean>> {
+    return this.request.get(this.apiPath + `/check/${boId}`).then((res) => {
+      return res.data;
+    });
+  }
+  materialize(boId: string): Promise<R<boolean>> {
+    return this.request
+      .get(this.apiPath + `/materialize/${boId}`)
+      .then((res) => {
+        return res.data;
+      });
+  }
   schema(boId: string): Promise<R<BoSchema>> {
     return this.request.get(this.apiPath + `/schema/${boId}`).then((res) => {
       return res.data;
     });
   }
+  saveSchema(boSchema: BoSchema): Promise<R<boolean>> {
+    return this.request
+      .post(this.apiPath + '/save-schema', boSchema)
+      .then((res) => {
+        return res.data;
+      });
+  }
 }
 
 export default function useBoApi(): BoApi {

src/api/developer/bo.ts

@@ -0,0 +1,48 @@
+import useRequest from '@/hook/request';
+import {
+  CategoryEntity,
+  GeneralApi,
+  GeneralApiImpl,
+  TenantEntity,
+} from '../interface';
+
+export interface Dataset extends TenantEntity, CategoryEntity {
+  /**
+   * 数据集名称
+   */
+  name: string;
+
+  /**
+   * 数据集编码
+   */
+  code: string;
+
+  /**
+   * 来源
+   */
+  source: string;
+
+  /**
+   * 来源id
+   */
+  sourceId: string;
+
+  /**
+   * 配置信息
+   */
+  advanced: string;
+
+  /**
+   * 分类id
+   */
+  categoryId: string;
+}
+
+export interface DatasetApi extends GeneralApi<Dataset> {}
+
+class DatasetApiImpl extends GeneralApiImpl<Dataset> implements DatesetApi {}
+
+export default function useDatasetApi(): DatasetApi {
+  const request = useRequest();
+  return new DatasetApiImpl('/api/dev/dataset', request);
+}

src/api/developer/dataset.ts

@@ -1,5 +1,5 @@
 import useRequest from '@/hook/request';
-import { GeneralApi, GeneralApiImpl, TenantEntity } from '../interface';
+import { GeneralApi, GeneralApiImpl, R, TenantEntity } from '../interface';
 
 export interface DataSource extends TenantEntity {
   /**
@@ -10,7 +10,7 @@ export interface DataSource extends TenantEntity {
   /**
    * 数据源连接地址
    */
-  url: string;
+  address: string;
 
   /**
    * 连接用户名
@@ -22,17 +22,40 @@ export interface DataSource extends TenantEntity {
    */
   password: string;
 
+  /**
+   * 连接数据库
+   */
+  database: string;
+
   /**
    * 数据源引擎
    */
   engine: string;
 }
 
-export interface DataSourceApi extends GeneralApi<DataSource> {}
+export interface DataSourceApi extends GeneralApi<DataSource> {
+  testConnection: (dataSource: DataSource) => Promise<R<boolean>>;
+  showTables: (id: string) => Promise<R<Record<string, object>>>;
+}
 
 class DataSourceApiImpl
   extends GeneralApiImpl<DataSource>
-  implements DataSourceApi {}
+  implements DataSourceApi
+{
+  testConnection(dataSource: DataSource): Promise<R<boolean>> {
+    return this.request
+      .post(this.apiPath + '/test-connection', dataSource)
+      .then((res) => {
+        return res.data;
+      });
+  }
+
+  showTables(id: string): Promise<R<Record<string, object>>> {
+    return this.request.get(this.apiPath + `/show-tables/${id}`).then((res) => {
+      return res.data;
+    });
+  }
+}
 
 export default function useDataSourceApi(): DataSourceApi {
   const request = useRequest();