feat: add JsonPreview component

CHANGELOG.zh_CN.md

@@ -4,6 +4,7 @@
 
 - 新增图形编辑器示例
 - 新增代码编辑器(包含 Json 编辑器)
+- 新增 `JsonPreview`Json 数据查看组件
 
 ### ⚡ Performance Improvements
 

build/generate/generateModifyVars.ts

@@ -32,6 +32,6 @@ export function generateModifyVars(dark = false) {
     'font-size-base': '14px', //  Main font size
     'border-radius-base': '2px', //  Component/float fillet
     'link-color': primary, //   Link color
-    'content-background': '#fafafa', //   Link color
+    'app-content-background': '#fafafa', //   Link color
   };
 }

build/vite/plugin/theme.ts

@@ -53,7 +53,7 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
         'border-color-base': '#303030',
         // 'border-color-split': '#30363d',
         'item-active-bg': '#111b26',
-        'content-background': '#ffffff0a', //   Link color
+        'app-content-background': 'rgb(255 255 255 / 4%)',
       },
     }),
   ];

package.json

@@ -35,7 +35,7 @@
     "@iconify/iconify": "^2.0.0-rc.6",
     "@logicflow/core": "^0.3.0",
     "@logicflow/extension": "^0.3.0",
-    "@vueuse/core": "^4.8.1",
+    "@vueuse/core": "^4.8.2",
     "@zxcvbn-ts/core": "^0.3.0",
     "ant-design-vue": "^2.1.2",
     "axios": "^0.21.1",
@@ -120,7 +120,7 @@
     "vite-plugin-style-import": "^0.9.2",
     "vite-plugin-svg-icons": "^0.4.3",
     "vite-plugin-theme": "^0.7.1",
-    "vite-plugin-windicss": "0.14.5",
+    "vite-plugin-windicss": "0.14.6",
     "vue-eslint-parser": "^7.6.0",
     "vue-tsc": "^0.0.24"
   },

src/components/CodeEditor/index.ts

@@ -1,8 +1,15 @@
 import type { App } from 'vue';
 import codeEditor from './src/CodeEditor.vue';
+import jsonPreview from './src/json-preview/JsonPreview.vue';
 
 export const CodeEditor = Object.assign(codeEditor, {
   install(app: App) {
     app.component(codeEditor.name, codeEditor);
   },
 });
+
+export const JsonPreview = Object.assign(jsonPreview, {
+  install(app: App) {
+    app.component(jsonPreview.name, jsonPreview);
+  },
+});

src/components/FlowChart/src/DataDialog.vue → src/components/CodeEditor/src/json-preview/JsonPreview.vue

@@ -7,7 +7,7 @@
   import 'vue-json-pretty/lib/styles.css';
   import { defineComponent } from 'vue';
   export default defineComponent({
-    name: 'DataDialog',
+    name: 'JsonPreview',
     components: {
       VueJsonPretty,
     },

src/components/FlowChart/index.ts

@@ -1,5 +1,4 @@
 import type { App } from 'vue';
-import dataDialog from './src/DataDialog.vue';
 import flowChart from './src/index.vue';
 
 export const FlowChart = Object.assign(flowChart, {
@@ -7,9 +6,3 @@ export const FlowChart = Object.assign(flowChart, {
     app.component(flowChart.name, flowChart);
   },
 });
-
-export const DataDialog = Object.assign(dataDialog, {
-  install(app: App) {
-    app.component(dataDialog.name, dataDialog);
-  },
-});

src/components/FlowChart/src/FlowChartToolbar.vue

@@ -30,6 +30,7 @@
     props: {
       prefixCls: String,
     },
+    emits: ['view-data'],
     setup(_, { emit }) {
       const toolbarItemList = ref<ToolbarConfig[]>([
         {
@@ -112,7 +113,7 @@
             lf.getSnapshot();
             break;
           case ToolbarTypeEnum.VIEW_DATA:
-            emit('catData');
+            emit('view-data');
             break;
         }
       };
@@ -131,12 +132,17 @@
     },
   });
 </script>
-<style lang="less" scoped>
+<style lang="less">
   @prefix-cls: ~'@{namespace}-flow-chart-toolbar';
 
+  html[data-theme='dark'] {
+    .lf-dnd {
+      background: #080808;
+    }
+  }
   .@{prefix-cls} {
     height: 36px;
-    background: @content-background;
+    background-color: @app-content-background;
     border-bottom: 1px solid @border-color-base;
 
     .disabeld {

src/components/FlowChart/src/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="h-full" :class="prefixCls">
-    <FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" />
+    <FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" @view-data="handlePreview" />
     <div ref="lfElRef" class="h-full"></div>
+    <BasicModal @register="register" title="流程数据" width="50%">
+      <JsonPreview :data="graphData" />
+    </BasicModal>
   </div>
 </template>
 <script lang="ts">
@@ -14,15 +17,18 @@
   import { Snapshot, BpmnElement, Menu, DndPanel } from '@logicflow/extension';
 
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { useAppStore } from '/@/store/modules/app';
   import { createFlowChartContext } from './useFlowContext';
 
   import { toLogicFlowData } from './adpterForTurbo';
+  import { useModal, BasicModal } from '/@/components/Modal';
+  import { JsonPreview } from '/@/components/CodeEditor';
 
   import '@logicflow/core/dist/style/index.css';
-  import './index.css';
+  import '@logicflow/extension/lib/style/index.css';
   export default defineComponent({
     name: 'FlowChart',
-    components: { FlowChartToolbar },
+    components: { BasicModal, FlowChartToolbar, JsonPreview },
     props: {
       flowOptions: {
         type: Object as PropType<Definition>,
@@ -41,10 +47,13 @@
     },
     setup(props) {
       const lfElRef = ref<ElRef>(null);
+      const graphData = ref<Recordable>({});
 
       const lfInstance = ref<Nullable<LogicFlow>>(null);
 
       const { prefixCls } = useDesign('flow-chart');
+      const appStore = useAppStore();
+      const [register, { openModal }] = useModal();
       createFlowChartContext({
         logicFlow: (lfInstance as unknown) as LogicFlow,
       });
@@ -55,7 +64,7 @@
         const defaultOptions: Partial<Definition> = {
           grid: true,
           background: {
-            color: '#f7f9ff',
+            color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515',
           },
           keyboard: {
             enabled: true,
@@ -73,12 +82,20 @@
       );
 
       watch(
-        () => props.flowOptions,
+        () => appStore.getDarkMode,
+        () => {
+          init();
+        }
+      );
+
+      watch(
+        () => unref(getFlowOptions),
         (options) => {
           unref(lfInstance)?.updateEditConfig(options);
         }
       );
 
+      let isInit = false;
       // init logicFlow
       async function init() {
         await nextTick();
@@ -87,14 +104,17 @@
         if (!lfEl) {
           return;
         }
+        if (!isInit) {
+          // Canvas configuration
+          LogicFlow.use(Snapshot);
+          // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
+          LogicFlow.use(BpmnElement);
+          // Start the right-click menu
+          LogicFlow.use(Menu);
+          LogicFlow.use(DndPanel);
+          isInit = true;
+        }
 
-        // Canvas configuration
-        LogicFlow.use(Snapshot);
-        // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
-        LogicFlow.use(BpmnElement);
-        // Start the right-click menu
-        LogicFlow.use(Menu);
-        LogicFlow.use(DndPanel);
         lfInstance.value = new LogicFlow({
           ...unref(getFlowOptions),
           container: lfEl,
@@ -113,11 +133,24 @@
         lf.render(lFData);
       }
 
+      function handlePreview() {
+        const lf = unref(lfInstance);
+        if (!lf) {
+          return;
+        }
+        graphData.value = unref(lf).getGraphData();
+
+        openModal();
+      }
+
       onMounted(init);
 
       return {
+        register,
         prefixCls,
         lfElRef,
+        handlePreview,
+        graphData,
       };
     },
   });

src/layouts/default/tabs/index.less

@@ -20,7 +20,7 @@ html[data-theme='light'] {
   z-index: 10;
   height: @multiple-height + 2;
   line-height: @multiple-height + 2;
-  background: @component-background;
+  background-color: @component-background;
   border-bottom: 1px solid @border-color-base;
 
   .ant-tabs-small {
@@ -31,7 +31,7 @@ html[data-theme='light'] {
     .ant-tabs-card-bar {
       height: @multiple-height;
       margin: 0;
-      background: @component-background;
+      background-color: @component-background;
       border: 0;
       box-shadow: none;
 
@@ -45,7 +45,7 @@ html[data-theme='light'] {
         padding-right: 12px;
         line-height: calc(@multiple-height - 2px);
         color: @text-color-base;
-        background: @component-background;
+        background-color: @component-background;
         transition: none;
 
         &:hover {

src/store/modules/app.ts

@@ -33,7 +33,7 @@ export const useAppStore = defineStore({
     getPageLoading() {
       return this.pageLoading;
     },
-    getDarkMode() {
+    getDarkMode(): 'light' | 'dark' | string {
       return this.darkMode || localStorage.getItem(APP_DARK_MODE_KEY_) || darkMode;
     },
 

vite.config.ts

@@ -58,7 +58,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       proxy: createProxy(VITE_PROXY),
     },
     build: {
-      minify: 'esbuild',
       target: 'es2015',
       outDir: OUTPUT_DIR,
       terserOptions: {

yarn.lock

@@ -1713,25 +1713,25 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz#20d22dd0da7d358bb21c17f9bde8628152642c77"
   integrity sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA==
 
-"@vueuse/core@^4.8.1":
-  version "4.8.1"
-  resolved "https://registry.npmjs.org/@vueuse/core/-/core-4.8.1.tgz#d7a7fb2e72610d1962ecb9244bd93dacb96d921c"
-  integrity sha512-oXFEDaKNU69Rj20/Hd7ZlmTpEtA2M19cRkZaL4A0Nl0w5Wb5In/8aK+0vtdi1VyMUXXbq6h1OGKCJcIhg5cziA==
+"@vueuse/core@^4.8.2":
+  version "4.8.2"
+  resolved "https://registry.npmjs.org/@vueuse/core/-/core-4.8.2.tgz#b14e43ae640c38f59591db146d6e15c551368414"
+  integrity sha512-d6SX9YSWC8svdCEZvlKH3zmstPqNS1h1RHgZUbkxAC/zoNIYP88Ivl1pF3SYm0Iksl6D4Zu/oImKXWCBW21r6g==
   dependencies:
-    "@vueuse/shared" "4.8.1"
+    "@vueuse/shared" "4.8.2"
     vue-demi latest
 
-"@vueuse/shared@4.8.1":
-  version "4.8.1"
-  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-4.8.1.tgz#45fd5f64bf4e8944db42a5b72fa2705cfc74608a"
-  integrity sha512-ONKJoIvZPrGCA8loK7dX+ZcjgZLikI+vPiz1lWlXs6+jZiQiZSLkmvg1NjV6Cfb6OqbDCfEScTWLbZHB7EwrRw==
+"@vueuse/shared@4.8.2":
+  version "4.8.2"
+  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-4.8.2.tgz#7c9a738ddba9b60b3eb2e6702d657c2b4c94651c"
+  integrity sha512-Bjy15IHyqUpRbg9cRE9afFwD0gLtGI0tJW7fITWGCwYmSWpBoD+EnGBBGvnoP9pOtxkri9Wte/uKwcVnDos7QA==
   dependencies:
     vue-demi latest
 
-"@windicss/plugin-utils@0.14.5":
-  version "0.14.5"
-  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.14.5.tgz#f41889c866ca9163981276ab9f2903b8bea091e8"
-  integrity sha512-5BFPFGFskNBm9JudAlWJSgk0Pq5H9fmbhY2O2WZzvy0eZCJ9fY3f9lJrUxZElLSP9Tp72r08kV+9x/39X63bsQ==
+"@windicss/plugin-utils@0.14.6":
+  version "0.14.6"
+  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.14.6.tgz#25d3fdda3a8b0a560f3daed6588abd0a4fbef195"
+  integrity sha512-jF+dJ6D4/UqVHSbH5kCdSoPnklLTZDf+seck4unICI0qyzmyPsrO15nmSS/gIvnmCedUfBrQj1MfYOX0tccFjQ==
   dependencies:
     debug "^4.3.2"
     fast-glob "^3.2.5"
@@ -9278,12 +9278,12 @@ vite-plugin-theme@^0.7.1:
     esbuild-plugin-alias "^0.1.2"
     tinycolor2 "^1.4.2"
 
-vite-plugin-windicss@0.14.5:
-  version "0.14.5"
-  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.14.5.tgz#399cbe8964595f02ba9d6d66dc3503f4cf983de0"
-  integrity sha512-TOYb4Bz5FpWfJavzAtvjuhGew6tJnjx1ZxRmEBOG7RUFFdclWG0CRcHXSVvwpigYHl2TaNwkpHmpM8dyhN6Scw==
+vite-plugin-windicss@0.14.6:
+  version "0.14.6"
+  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.14.6.tgz#c17b66b5f35a3b1ffdfc3e969ce28a528305716e"
+  integrity sha512-bFyKfvnsa3nAab9LgrFInzdQhsIJyeNdCczgjrYMxjO8WlgiQuIFyJ1RTYQnYmQRlbvU9jpOL5XDxsFUMKRLUg==
   dependencies:
-    "@windicss/plugin-utils" "0.14.5"
+    "@windicss/plugin-utils" "0.14.6"
     chalk "^4.1.0"
     debug "^4.3.2"
     windicss "^2.5.14"