feat: add JsonPreview component

Author: anncwb

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);
+  },
+});

…/components/FlowChart/src/DataDialog.vue …eEditor/src/json-preview/JsonPreview.vuesrc/components/FlowChart/src/DataDialog.vue renamed to src/components/CodeEditor/src/json-preview/JsonPreview.vue src/components/FlowChart/src/DataDialog.vue renamed to 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,15 +1,8 @@
 import type { App } from 'vue';
-import dataDialog from './src/DataDialog.vue';
 import flowChart from './src/index.vue';
 
 export const FlowChart = Object.assign(flowChart, {
   install(app: App) {
     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.css

@@ -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,
       };
     },
   });