Dev

frontend/apps/app-pc/package.json

@@ -10,8 +10,11 @@
   },
   "dependencies": {
     "@flow-engine/flow-core": "workspace:*",
-    "@flow-engine/flow-design": "workspace:*",
     "@flow-engine/flow-types": "workspace:*",
+    "@flow-engine/flow-pc-design": "workspace:*",
+    "@flow-engine/flow-pc-ui": "workspace:*",
+    "@flow-engine/flow-pc-form": "workspace:*",
+    "@flow-engine/flow-pc-approval":"workspace:*",
     "antd": "^6.2.1",
     "dayjs": "^1.11.19",
     "react": "^18.3.1",
@@ -21,7 +24,7 @@
   },
   "devDependencies": {
     "@flow-engine/flow-core": "workspace:*",
-    "@flow-engine/flow-design": "workspace:*",
-    "@flow-engine/flow-types": "workspace:*"
+    "@flow-engine/flow-types": "workspace:*",
+    "@flow-engine/flow-pc-design": "workspace:*"
   }
 }

frontend/apps/app-pc/src/config/plugin-view.tsx

@@ -1,4 +1,4 @@
-import {ViewPlugin} from "@flow-engine/flow-design";
-import {LeaveView} from "@/views/leave.tsx";
+import {ViewBindPlugin} from "@flow-engine/flow-types";
+import {FlowFormView} from "@flow-engine/flow-pc-form";
 
-ViewPlugin.getInstance().register('default',LeaveView);
+ViewBindPlugin.getInstance().register('default',FlowFormView);

frontend/apps/app-pc/src/pages/desgin.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DesignList } from '@flow-engine/flow-design';
+import { DesignList } from '@flow-engine/flow-pc-design';
 
 
 const DesignPage: React.FC = () => {

frontend/apps/app-pc/src/pages/todo.tsx

@@ -1,14 +1,10 @@
 import React from "react";
 import {done, list, notify, todo} from "@/api/record.ts";
-import {
-    type ActionType,
-    ApprovalPanelDrawer,
-    Table,
-    type TableProps,
-    WorkflowSelectModal
-} from "@flow-engine/flow-design";
+import {WorkflowSelectModal} from "@flow-engine/flow-pc-design";
+import {type ActionType, Table, type TableProps} from "@flow-engine/flow-pc-ui";
 import {Button, Space, Tabs, type TabsProps} from "antd";
 import dayjs from "dayjs";
+import {ApprovalPanelDrawer} from "@flow-engine/flow-pc-approval";
 
 const TodoPage: React.FC = () => {
 

frontend/apps/app-pc/src/pages/user.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {type ActionType, Table, type TableProps} from "@flow-engine/flow-design";
+import {type ActionType, Table, type TableProps} from "@flow-engine/flow-pc-ui";
 import {Button, Form, Input, message, Modal, Popconfirm, Space, Switch} from "antd";
 import {list, remove, save} from "@/api/user.ts";
 

frontend/package.json

@@ -6,12 +6,17 @@
   "scripts": {
     "build:flow-core": "pnpm -F  @flow-engine/flow-core build",
     "build:flow-types": "pnpm -F  @flow-engine/flow-types build",
-    "build:flow-engine": "pnpm -F  @flow-engine/flow-design build",
-    "build": "pnpm run build:flow-core && pnpm run  build:flow-types && pnpm run build:flow-engine ",
+    "build:flow-pc-design": "pnpm -F  @flow-engine/flow-pc-design build",
+    "build:flow-pc-form": "pnpm -F  @flow-engine/flow-pc-form build",
+    "build:flow-pc-ui": "pnpm -F  @flow-engine/flow-pc-ui build",
+    "build:flow-pc-approval": "pnpm -F  @flow-engine/flow-pc-approval build",
+    "build:flow-pc": "pnpm -F  pnpm run build:flow-pc-ui && pnpm run build:flow-pc-form && pnpm run build:flow-pc-approval && pnpm run build:flow-pc-design",
+    "build": "pnpm run build:flow-core && pnpm run  build:flow-types && pnpm run build:flow-pc ",
     "build:app-pc": "pnpm -F  @flow-engine/app-pc build",
     "dev:app-pc": "pnpm -F  @flow-engine/app-pc dev",
     "dev:app-mobile": "pnpm -F  @flow-engine/app-mobile dev",
-    "watch:flow-design": "pnpm -F  @flow-engine/flow-design dev"
+    "watch:flow-pc-design": "pnpm -F  @flow-engine/flow-pc-design dev",
+    "watch:flow-pc-form": "pnpm -F  @flow-engine/flow-pc-form dev"
   },
   "keywords": [],
   "author": "",

frontend/packages/flow-core/package.json

@@ -21,7 +21,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "axios": "^1.13.3",
+    "axios": "^1.13.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }

frontend/packages/flow-core/src/index.ts

@@ -3,4 +3,5 @@ export * from "./dispatch";
 export * from "./http";
 export * from "./presenter";
 export * from "./hooks.ts";
-export * from "./object.ts";
+export * from "./object.ts";
+export * from "./table.ts";

frontend/packages/flow-core/src/table.ts

@@ -0,0 +1,15 @@
+export interface Result<T> {
+    data:T[]
+    total: number;
+    success: boolean
+}
+
+export interface ActionType {
+    reload(): void;
+}
+
+export interface ParamRequest {
+    current: number;
+    pageSize: number;
+    [key: string]: any;
+}

frontend/packages/flow-pc/flow-pc-approval/.gitignore

@@ -0,0 +1,16 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# Profile
+.rspack-profile-*/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

frontend/packages/flow-pc/flow-pc-approval/AGENTS.md

@@ -0,0 +1,23 @@
+# AGENTS.md
+
+You are an expert in JavaScript, Rsbuild, and web application development. You write maintainable, performant, and accessible code.
+
+## Commands
+
+- `pnpm run dev` - Start the dev server
+- `pnpm run build` - Build the app for production
+- `pnpm run preview` - Preview the production build locally
+
+## Docs
+
+- Rsbuild: https://rsbuild.rs/llms.txt
+- Rspack: https://rspack.rs/llms.txt
+
+- Rstest: https://rstest.rs/llms.txt
+
+## Tools
+
+### Rstest
+
+- Run `pnpm run test` to run tests
+- Run `pnpm run test:watch` to run tests in watch mode

frontend/packages/flow-pc/flow-pc-approval/README.md

@@ -0,0 +1,36 @@
+# Rsbuild project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Start the dev server, and the app will be available at [http://localhost:3000](http://localhost:3000).
+
+```bash
+pnpm run dev
+```
+
+Build the app for production:
+
+```bash
+pnpm run build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm run preview
+```
+
+## Learn more
+
+To learn more about Rsbuild, check out the following resources:
+
+- [Rsbuild documentation](https://rsbuild.rs) - explore Rsbuild features and APIs.
+- [Rsbuild GitHub repository](https://github.com/web-infra-dev/rsbuild) - your feedback and contributions are welcome!

frontend/packages/flow-pc/flow-pc-approval/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@flow-engine/flow-pc-approval",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "test": "rstest"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@ant-design/icons": "~6.1.0",
+    "@flow-engine/flow-core": "workspace:*",
+    "@flow-engine/flow-types": "workspace:*",
+    "@flow-engine/flow-pc-design": "workspace:*",
+    "@flow-engine/flow-pc-ui": "workspace:*",
+    "@reduxjs/toolkit": "^2.11.2",
+    "antd": "^6.2.1",
+    "react-redux": "^9.2.0"
+  },
+  "devDependencies": {
+    "@flow-engine/flow-types": "workspace:*"
+  }
+}

frontend/packages/flow-design/src/components/flow-approval/components/flow-node-history.tsx → frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/flow-node-history.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
-import {ProcessNode} from "@/components/flow-approval/typings";
+import {ProcessNode} from "@flow-engine/flow-types";
 import {Timeline, Tag, Empty, Typography} from "antd";
-import {CheckCircleFilled, ClockCircleOutlined, LoadingOutlined, SyncOutlined} from "@ant-design/icons";
+import {CheckCircleFilled, ClockCircleOutlined, SyncOutlined} from "@ant-design/icons";
 
 const {Text} = Typography;
 

frontend/packages/flow-design/src/components/flow-approval/components/form-view-component.tsx → frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/form-view-component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
-import {ViewPlugin} from "@/plugins/view";
+import {ViewBindPlugin} from "@flow-engine/flow-types";
 import { Form } from "antd";
 
 interface FormViewComponentProps{
@@ -9,7 +9,10 @@ interface FormViewComponentProps{
 
 export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
     const {state, context} = useApprovalContext();
-    const ViewComponent = ViewPlugin.getInstance().get(state.flow?.view || 'default');
+    const ViewComponent = ViewBindPlugin.getInstance().get(state.flow?.view || 'default');
+
+    const formMeta = state.flow?.form;
+
     // 是否可合并审批
     const mergeable = state.flow?.mergeable || false;
     const todos = state.flow?.todos || [];
@@ -41,7 +44,7 @@ export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
         });
     }, []);
 
-    if (ViewComponent) {
+    if (ViewComponent && formMeta) {
         if (mergeable) {
             return (
                 <div>
@@ -54,7 +57,8 @@ export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
                 {viewForms.map((item, index) => (
                     <ViewComponent
                         key={index}
-                        form={item.instance}
+                        meta={formMeta}
+                        form={item.instance as any}
                         onValuesChange={props.onValuesChange}
                     />
                 ))}

frontend/packages/flow-design/src/components/flow-approval/context/index.ts → frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/context/index.ts

@@ -1,8 +1,6 @@
 import React from "react";
-import {ApprovalLayoutProps, State} from "../typings";
+import {State,ApprovalLayoutProps} from "../typings";
 import {Presenter} from "../presenters";
-import {FormActionContext} from "@/components/flow-approval/presenters/form";
-
 
 export class ApprovalContextScope {
     private readonly presenter: Presenter;

frontend/packages/flow-design/src/components/flow-approval/hooks/use-approval-context.ts → frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/hooks/use-approval-context.ts

@@ -4,7 +4,7 @@ import {ApprovalContext, ApprovalContextScope} from "../context";
 import {ApprovalReduxState, updateState} from "../store";
 import {Presenter} from "../presenters";
 import {FlowApprovalApiImpl} from "../model";
-import {ApprovalLayoutProps} from "@/components/flow-approval/typings";
+import {ApprovalLayoutProps} from "../typings";
 
 export const useApprovalContext = () => {
     const context = React.useContext(ApprovalContext);

frontend/packages/flow-design/src/components/flow-approval/index.tsx → frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import {Drawer} from "@/components/ui/drawer";
+import {Drawer} from "@flow-engine/flow-pc-ui";
 import {detail} from "@/api/record";
-import {FlowContent} from "@/components/flow-approval/typings";
+import {FlowContent} from "@flow-engine/flow-types";
 import {ApprovalLayout} from "@/components/flow-approval/layout";
 
 interface ApprovalPanelProps {

frontend/packages/flow-design/src/components/flow-approval/layout/index.tsx → frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/layout/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {ApprovalLayoutProps} from "@/components/flow-approval/typings";
+import {ApprovalLayoutProps} from "../typings";
 import {Provider} from "react-redux";
 import {approvalStore} from "@/components/flow-approval/store";
 import {ApprovalContext} from "@/components/flow-approval/context";