weibocom · qdaxb · Apr 18, 2024 · Apr 17, 2024
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
@@ -5,6 +5,8 @@ services:
     depends_on:
       - cache
       - jaeger
+    links:
+      - rill-flow-mysql
     ports:
       - "8080:8080"
     environment:
@@ -20,16 +22,33 @@ services:
   jaeger:
     image: jaegertracing/all-in-one:1.39
     restart: always
+    ports:
+      - "16686:16686"
     environment:
       - COLLECTOR_OTLP_ENABLED=true
   ui:
     image: weibocom/rill-flow-ui
     ports:
-      - "8088:80"
+      - "80:80"
     depends_on:
       - rill-flow
       - jaeger
     environment:
       - BACKEND_SERVER=http://rill-flow:8080
   sample-executor:
     image: weibocom/rill-flow-sample:sample-executor
+  rill-flow-mysql:
+    image: mysql:5.7
+    stdin_open: true
+    tty: true
+    container_name: rill-flow-mysql
+    restart: always
+    command:  --bind-address=0.0.0.0 --default-authentication-plugin=mysql_native_password
+    volumes:
+        - ./setup.sql:/docker-entrypoint-initdb.d/setup.sql
+    ports:
+      - "3306:3306"
+    environment:
+      - MYSQL_ROOT_PASSWORD=secret
+      - MYSQL_DATABASE=rill_flow
+      - MYSQL_ROOT_HOST=%
diff --git a/flow-graph/.env.development b/flow-graph/.env.development
@@ -0,0 +1,2 @@
+VITE_BASE_URL=http://localhost:7001/flow-graph/
+VITE_SERVER_PORT=7001
diff --git a/flow-graph/.env.docker b/flow-graph/.env.docker
@@ -0,0 +1,2 @@
+VITE_BASE_URL="__micro_flow_graph_base_url"
+VITE_SERVER_PORT=80
diff --git a/flow-graph/.gitignore b/flow-graph/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+**.env.production
diff --git a/flow-graph/.npmrc b/flow-graph/.npmrc
@@ -0,0 +1,4 @@
+# pnpm 配置
+shamefully-hoist=true
+auto-install-peers=true
+strict-peer-dependencies=false
diff --git a/flow-graph/Dockerfile b/flow-graph/Dockerfile
@@ -0,0 +1,16 @@
+FROM node:18.12.1-alpine as build-stage
+
+WORKDIR /data/flow-graph
+COPY . ./
+
+RUN npm config set registry https://registry.npm.taobao.org
+RUN npm cache clean --force
+RUN npm config set strict-ssl false
+
+RUN npm install pnpm -g && pnpm install && pnpm build:docker
+
+FROM nginx:1.23.3-alpine as production-stage
+COPY --from=build-stage /data/flow-graph/dist /usr/share/nginx/html/dist
+COPY --from=build-stage /data/flow-graph/deploy/nginx.conf /etc/nginx/nginx.conf.template
+
+CMD /bin/sh -c "envsubst '80' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && nginx -g 'daemon off;'"
diff --git a/flow-graph/README.md b/flow-graph/README.md
@@ -0,0 +1,55 @@
+## Introduction
+
+Flow Graph Frontend is developed based on [Vue3](https://v3.vuejs.org/) and [Graph Editing Engine x6](https://x6.antv.antgroup.com/).
+
+## Prerequisites
+
+- [Node](http://nodejs.org/) and [Git](https://git-scm.com/) - Project development environment 
+- [Vite](https://vitejs.dev/)  - Familiarity with Vite features 
+- [Vue3](https://v3.vuejs.org/) - Familiarity with Vue basic syntax 
+- [TypeScript](https://www.typescriptlang.org/) - Familiarity with basic TypeScript syntax 
+- [Es6+](http://es6.ruanyifeng.com/) - Familiarity with basic ES6 syntax 
+- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - Basic usage of Ant Design Vue UI library 
+- [Graph Editing Engine X6](https://x6.antv.antgroup.com/) - Familiarity with basic X6 syntax
+- [QianKun](https://qiankun.umijs.org/zh/guide) - Basic usage of QianKun
+
+## Installation and Usage
+
+- Install Node version manager nvm[nvm](https://github.com/nvm-sh/nvm)
+
+```shell
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
+```
+
+- Install Node version v18.19.0 and set it as the global default version
+
+```shell
+nvm install v18.19.0
+nvm alias default v18.19.0
+```
+
+- Install pnpm
+
+```shell
+npm install -g pnpm --registry=https://registry.npmmirror.com
+```
+
+- Install dependencies
+```bash
+cd flow-graph
+
+pnpm install
+
+```
+
+- Run
+
+```bash
+pnpm serve
+```
+
+- Build
+
+```bash
+pnpm build:docker
+```
diff --git a/flow-graph/README.zh-CN.md b/flow-graph/README.zh-CN.md
@@ -0,0 +1,54 @@
+## 简介
+
+Flow Graph 前端基于 [Vue3](https://v3.vuejs.org/) 和 [图编辑引擎 x6](https://x6.antv.antgroup.com/) 开发
+
+## 准备
+
+- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
+- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
+- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
+- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
+- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
+- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用
+- [图编辑引擎 X6](https://x6.antv.antgroup.com/) - 熟悉 X6 基本语法
+- [QianKun](https://qiankun.umijs.org/zh/guide) - 熟悉 QianKun 基本使用
+
+## 安装使用
+- 安装 node 版本管理工具[nvm](https://github.com/nvm-sh/nvm)
+
+```shell
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
+```
+
+- 安装版本为 v18.19.0 的 node，并设定为全局默认版本
+
+```shell
+nvm install v18.19.0
+nvm alias default v18.19.0
+```
+
+- 安装pnpm
+
+```shell
+npm install -g pnpm --registry=https://registry.npmmirror.com
+```
+
+- 安装依赖
+```bash
+cd flow-graph
+
+pnpm install
+
+```
+
+- 运行
+
+```bash
+pnpm serve
+```
+
+- 打包
+
+```bash
+pnpm build:docker
+```
diff --git a/flow-graph/deploy/nginx.conf b/flow-graph/deploy/nginx.conf
@@ -0,0 +1,27 @@
+worker_processes 1;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include mime.types;
+    default_type application/octet-stream;
+    server {
+        listen 80;
+
+        location / {
+            root /usr/share/nginx/html/dist;
+            try_files $uri $uri/ /index.html;
+            index index.html;
+            add_header Access-Control-Allow-Origin *;
+            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
+            add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+        }
+
+        location ^~ /flow-graph {
+            rewrite ^/flow-graph(.*)$ /$1 break;
+            proxy_pass http://127.0.0.1:80;
+        }
+    }
+}
diff --git a/flow-graph/index.html b/flow-graph/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FlowGraph</title>
+  </head>
+  <body>
+    <div id="flow-graph" class="flow-graph"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/flow-graph/package.json b/flow-graph/package.json
@@ -0,0 +1,90 @@
+{
+  "name": "flow-graph",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "build:docker": "vite build --mode docker",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
+    "@antv/layout": "^0.3.25",
+    "@antv/x6": "^1.31.0",
+    "@antv/x6-vue-shape": "^1.3.2",
+    "@formily/antdv-x3": "1.0.0-alpha.7",
+    "@formily/core": "^2.3.1",
+    "@formily/vue": "^2.3.1",
+    "@lljj/vue3-form-ant": "^1.19.0",
+    "@purge-icons/generated": "^0.9.0",
+    "ant-design-vue": "^3.2.20",
+    "antd": "^4.23.5",
+    "axios": "^1.4.0",
+    "babel-plugin-import": "^1.13.8",
+    "codemirror": "^5.65.12",
+    "codemirror-editor-vue3": "^2.4.1",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "moment": "^2.29.4",
+    "pinia": "2.1.4",
+    "postcss-loader": "^8.1.1",
+    "postcss-plugin-namespace": "^0.0.3",
+    "postcss-selector-namespace": "^3.0.1",
+    "qiankun": "^2.10.16",
+    "v-code-diff": "^1.9.0",
+    "vite-plugin-qiankun": "^1.0.15",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.2.2",
+    "vue-json-pretty": "^2.2.4",
+    "vue-router": "^4.2.3",
+    "vue-types": "^5.1.0"
+  },
+  "devDependencies": {
+    "@types/codemirror": "^5.60.15",
+    "@types/node": "^16.11.6",
+    "@vitejs/plugin-vue": "^1.9.4",
+    "@vue/compiler-sfc": "^3.2.20",
+    "less": "^4.2.0",
+    "typescript": "^4.3.2",
+    "vite": "^2.6.13",
+    "vue-tsc": "^0.28.10"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
+      "prettier --write--parser json"
+    ],
+    "package.json": [
+      "prettier --write"
+    ],
+    "*.vue": [
+      "prettier --write",
+      "eslint --fix",
+      "stylelint --fix"
+    ],
+    "*.{scss,less,styl,html}": [
+      "prettier --write",
+      "stylelint --fix"
+    ],
+    "*.md": [
+      "prettier --write"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-git"
+    }
+  },
+  "packageManager": "pnpm@9.0.2",
+  "engines": {
+    "node": ">=16.15.1",
+    "pnpm": ">=8.1.0"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_BASE_URL=http://localhost:7001/flow-graph/
		VITE_SERVER_PORT=7001
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_BASE_URL="__micro_flow_graph_base_url"
		VITE_SERVER_PORT=80