playground

Author: xlorne

README.md

@@ -1,119 +1,202 @@
-# @codingapi/flow-mobile
+# Flow-Mobile
 
-[English](#english) | [中文](#chinese)
+基于Mobile的流程引擎
 
-## English
-
-A mobile-friendly flow designer component library built with React and TypeScript, based on LogicFlow.
-
-### Installation
+## 安装
 
 ```bash
+# npm
 npm install @codingapi/flow-mobile
-# or
-yarn add @codingapi/flow-mobile
-```
 
-### Features
-
-- 🎯 Mobile-optimized flow designer
-- 📱 Built on LogicFlow core
-- 🎨 Integrated with antd-mobile UI components
-- 🔧 Full TypeScript support
-- ⚡️ Redux state management
-- 🛠 Easy integration with React applications
+# yarn
+yarn add @codingapi/flow-mobile
 
-### Dependencies
+# pnpm
+pnpm add @codingapi/flow-mobile
+```
 
-- React 16.8+ / 17 / 18
-- React DOM 16.8+ / 17 / 18
-- @codingapi/ui-framework
-- @codingapi/form-mobile
-- @logicflow/core
-- @logicflow/extension
-- antd-mobile
+## 使用
 
-### Quick Start
+### 流程审批
 
 ```tsx
-import { FlowDesigner } from '@codingapi/flow-mobile';
-
-function App() {
-  return (
-    <FlowDesigner
-      // Add your flow configuration here
-    />
-  );
+import React from "react";
+import {useLocation, useNavigate} from "react-router";
+import {FlowView} from "@codingapi/flow-mobile";
+import {Result} from "antd-mobile";
+import {flowViews} from "@/config/flows";
+
+const FlowDetailPage = () => {
+
+    const location = useLocation();
+    const state = location.state;
+    const navigate = useNavigate();
+
+    if (state) {
+        return (
+            <>
+                <FlowView
+                    view={flowViews}
+                    id={state.id}
+                    visible={true}
+                    setVisible={()=>{
+                        navigate(-1);
+                    }}
+                />
+            </>
+        )
+    }
+
+    return (
+        <>
+            <Result
+                status={"error"}
+                title={"页面参数错误"}
+            />
+        </>
+    )
 }
-```
-
-### Documentation
 
-For detailed documentation and examples, please visit our [GitHub repository](https://github.com/codingapi/flow-mobile).
+export default FlowDetailPage;
 
-### Contributing
+```
 
-We welcome contributions! Please see our [GitHub Issues](https://github.com/codingapi/flow-mobile/issues) for details.
+### 自定义视图拓展
 
-### License
+* 自定义延期提醒
+```tsx
+import React from "react";
+import {PostponedFormProps} from "@codingapi/ui-framework";
+import Popup from "@/components/popup";
+import {DatePickerView} from "antd-mobile";
+import dayjs from "dayjs";
+import {dateLabelRenderer} from "@codingapi/form-mobile";
+
+const PostponedFormView: React.FC<PostponedFormProps> = (props) => {
+
+    const [value, setValue] = React.useState(new Date());
+    // 获取一小时后的日期
+    const now = dayjs().add(1, 'hour').toDate();
+
+    return (
+        <Popup
+            visible={props.visible}
+            setVisible={props.setVisible}
+            position='bottom'
+            title={"延期截止日期"}
+            bodyStyle={{height: '50vh'}}
+            onOk={() => {
+                const diff = dayjs(value).diff(dayjs(now), 'hour') + 1;
+                props.onFinish(diff);
+            }}
+        >
+            <div>
+                <DatePickerView
+                    precision={"hour"}
+                    renderLabel={dateLabelRenderer}
+                    value={value}
+                    min={now}
+                    onChange={(value) => {
+                        setValue(value);
+                    }}
+                />
+            </div>
+        </Popup>
+    )
+}
 
-Apache-2.0 © CodingAPI
+export default PostponedFormView;
 
----
 
-## Chinese
+```
+添加自定义视图到配置中
+```
+import {PostponedFormViewKey} from "@codingapi/ui-framework";
+import {ComponentBus} from "@codingapi/ui-framework";
+import {FlowApiContent,FlowApi} from "@codingapi/flow-mobile";
+import PostponedFormView from "@/components/flow/PostponedFormView";
 
-一个基于 LogicFlow 的移动端流程设计器组件库，使用 React 和 TypeScript 构建。
+ComponentBus.getInstance().registerComponent(PostponedFormViewKey,PostponedFormView);
+```
+* 自定义选人组件
+```
+import React, {useEffect} from "react";
+import {UserSelectFormProps} from "@codingapi/ui-framework";
+import Popup from "@/components/popup";
+import {Form,FormInput} from "@codingapi/form-mobile";
+
+const UserSelectFormView: React.FC<UserSelectFormProps> = (props) => {
+
+    const formInstance = Form.useForm();
+
+    useEffect(() => {
+        if(props.visible){
+            if(props.specifyUserIds){
+                formInstance.setFieldValue("users", props.specifyUserIds.join(","));
+            }
+        }
+    }, [props.visible]);
+
+    return (
+        <Popup
+            visible={props.visible}
+            setVisible={props.setVisible}
+            position='bottom'
+            title={"选人人员"}
+            bodyStyle={{height: '50vh'}}
+            onOk={() => {
+                const users = formInstance.getFieldValue("users");
+                if(users){
+                    const userIds = Array.of(...users.split(",")).map(item =>{
+                        return {
+                            id: item,
+                            name: item
+                        }
+                    });
+                    props.onFinish(userIds);
+                }
+            }}
+        >
+            <div>
+                <Form
+                    form={formInstance}
+                >
+                    <FormInput
+                        name={"users"}
+                        label={"人员"}
+                        placeholder={"请选择人员"}
+                    />
+                </Form>
+
+            </div>
+        </Popup>
+    )
+}
 
-### 安装
+export default UserSelectFormView;
 
-```bash
-npm install @codingapi/flow-mobile
-# 或
-yarn add @codingapi/flow-mobile
 ```
+然后再注册到配置中。
 
-### 特性
+更多的实例请参考：https://github.com/codingapi/flow-mobile/tree/main/playground
 
-- 🎯 移动端优化的流程设计器
-- 📱 基于 LogicFlow 核心
-- 🎨 集成 antd-mobile UI 组件
-- 🔧 完整的 TypeScript 支持
-- ⚡️ Redux 状态管理
-- 🛠 易于与 React 应用集成
+## 开发
 
-### 依赖
+```bash
+# Install dependencies
+yarn install
 
-- React 16.8+ / 17 / 18
-- React DOM 16.8+ / 17 / 18
-- @codingapi/ui-framework
-- @codingapi/form-mobile
-- @logicflow/core
-- @logicflow/extension
-- antd-mobile
+# Start development server
+yarn dev
 
-### 快速开始
+# Build for production
+yarn build
 
-```tsx
-import { FlowDesigner } from '@codingapi/flow-mobile';
-
-function App() {
-  return (
-    <FlowDesigner
-      // 在这里添加流程配置
-    />
-  );
-}
+# Run tests
+yarn test
 ```
+## 许可
 
-### 文档
-
-详细的文档和示例，请访问我们的 [GitHub 仓库](https://github.com/codingapi/flow-mobile)。
-
-### 贡献
-
-我们欢迎各种形式的贡献！详情请查看我们的 [GitHub Issues](https://github.com/codingapi/flow-mobile/issues)。
+Apache-2.0 © [CodingAPI](https://github.com/codingapi/flow-mobile/blob/main/LICENSE)
 
-### 许可证
 
-Apache-2.0 © CodingAPI

playground/.gitignore

@@ -0,0 +1,26 @@
+# 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*
+
+yarn.lock
+package-lock.json

playground/README.md

@@ -0,0 +1,20 @@
+# playground
+
+
+## 运行步骤
+###  编译flow-mobile
+```
+yarn build
+```
+在flow-mobile目录下执行编译命令，编译完成后会在dist目录下生成flow-mobile的代码包。
+
+### 运行实例
+
+```
+# 开发模式
+yarn start
+# 调试模式
+yarn dev
+# 生产模式
+yarn build
+```

playground/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    moduleNameMapper: {
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    },
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+};

playground/jest.setup.ts

@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom';
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // 旧版 API
+        removeListener: jest.fn(), // 旧版 API
+        addEventListener: jest.fn(), // 新版 API
+        removeEventListener: jest.fn(), // 新版 API
+        dispatchEvent: jest.fn(),
+    })),
+});