feat: add JsonPreview component

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/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;
     },