Merge pull request #49 from fantasticit/feat/flow

nginx.conf.bak

@@ -82,4 +82,21 @@ server {
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }
+
+  # 静态文件
+  location ^~ /_next {
+    alias /apps/think/packages/client/.next;
+    autoindex on;
+  }
+
+  # next-pwa 生成的静态文件（service-worker.js, workbox-*.js）
+  location ~ /*\.js$ {
+    add_header Content-Type "application/javascript; charset=UTF-8";
+    root /apps/think/packages/client/.next;
+  }
+  
+  # 自定义流程图编辑器的文件
+  location ~ /*\.(gif|png|jpg|jpeg|xml|txt)$ {
+    root /apps/think/packages/client/.next;
+  }
 }

packages/client/copy-diagram-resources.js

@@ -0,0 +1,6 @@
+/**
+ * 将流程图编辑器所需的资源拷贝到 .next 目录中，配合 nginx 运行
+ */
+const fs = require('fs-extra');
+
+fs.copySync('./public', './.next');

packages/client/package.json

@@ -110,7 +110,6 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "fs-extra": "^10.0.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "4.5.5",
+    "typescript": "4.5.5"
-    "workbox-webpack-plugin": "^6.5.3"
   }
 }

packages/client/src/thirtypart/diagram/README.md

@@ -0,0 +1,5 @@
+# 流程图
+
+流程图编辑器来自 [mxgraph](https://github.com/jgraph/mxgraph/tree/master/javascript/examples/grapheditor)。同时对代码进行了整合修改，相应的资源文件在 `public` 目录下，生产环境会复制到 `.next` 目录，需要相应 `nginx` 配置方可运行。
+
+mxgraph 编辑器案例可[点击查看](https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html)。

packages/client/src/thirtypart/kityminder/README.md

@@ -0,0 +1,3 @@
+# 思维导图
+
+思维导图功能来自百度团队的[开源作品](https://github.com/fex-team/kityminder-editor)。

packages/client/src/tiptap/core/wrappers/flow/index.tsx

@@ -3,9 +3,9 @@ import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
 import { Resizeable } from 'components/resizeable';
-import { load, renderXml } from 'diagram';
 import { useToggle } from 'hooks/use-toggle';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { load, renderXml } from 'thirtypart/diagram';
 import { Flow } from 'tiptap/core/extensions/flow';
 import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
 

packages/client/src/tiptap/editor/menus/flow/modal.tsx

@@ -1,7 +1,7 @@
 import { Modal, Spin, Typography } from '@douyinfe/semi-ui';
-import { createEditor, load } from 'diagram';
 import { useToggle } from 'hooks/use-toggle';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { createEditor, load } from 'thirtypart/diagram';
 import { Editor } from 'tiptap/editor';
 
 import { cancelSubject, OPEN_FLOW_SETTING_MODAL, subject } from '../_event';
@@ -58,7 +58,16 @@ export const FlowSettingModal: React.FC<IProps> = ({ editor }) => {
   }, [editor, toggleVisible]);
 
   return (
-    <Modal centered title="流程图" fullScreen visible={visible} onCancel={toggleVisible} onOk={save}>
+    <Modal
+      centered
+      title="流程图"
+      fullScreen
+      visible={visible}
+      onCancel={toggleVisible}
+      onOk={save}
+      okText="保存"
+      cancelText="退出"
+    >
       <div style={{ height: '100%', margin: '0 -24px', border: '1px solid var(--semi-color-border)' }}>
         {loading && (
           <Spin spinning>

packages/client/tsconfig.json

@@ -28,7 +28,6 @@
       "helpers/*": ["helpers/*"],
       "tiptap/*": ["tiptap/*"],
       "event/*": ["event/*"],
-      "diagram/*": ["diagram/*"],
       "thirtypart/*": ["thirtypart/*"]
     }
   },