From 0649011eba9b86b543223aca99721da754dcea14 Mon Sep 17 00:00:00 2001 From: Vben Date: Sat, 17 Apr 2021 18:51:19 +0800 Subject: [PATCH] feat: add JsonPreview component --- CHANGELOG.zh_CN.md | 1 + build/generate/generateModifyVars.ts | 2 +- build/vite/plugin/theme.ts | 2 +- package.json | 4 +- src/components/CodeEditor/index.ts | 7 + .../src/json-preview/JsonPreview.vue} | 2 +- src/components/FlowChart/index.ts | 7 - .../FlowChart/src/FlowChartToolbar.vue | 12 +- src/components/FlowChart/src/index.css | 216 ------------------ src/components/FlowChart/src/index.vue | 57 ++++- src/layouts/default/tabs/index.less | 6 +- src/store/modules/app.ts | 2 +- vite.config.ts | 1 - yarn.lock | 36 +-- 14 files changed, 89 insertions(+), 266 deletions(-) rename src/components/{FlowChart/src/DataDialog.vue => CodeEditor/src/json-preview/JsonPreview.vue} (93%) delete mode 100644 src/components/FlowChart/src/index.css diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 0d0a39d6..b73a57c7 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -4,6 +4,7 @@ - 新增图形编辑器示例 - 新增代码编辑器(包含 Json 编辑器) +- 新增 `JsonPreview`Json 数据查看组件 ### ⚡ Performance Improvements diff --git a/build/generate/generateModifyVars.ts b/build/generate/generateModifyVars.ts index bcbc8392..5710a0c0 100644 --- a/build/generate/generateModifyVars.ts +++ b/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 }; } diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts index 9b0eeab4..6b92fc33 100644 --- a/build/vite/plugin/theme.ts +++ b/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%)', }, }), ]; diff --git a/package.json b/package.json index 96559beb..cba7c741 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/CodeEditor/index.ts b/src/components/CodeEditor/index.ts index 4d959333..89aa8a0e 100644 --- a/src/components/CodeEditor/index.ts +++ b/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); + }, +}); diff --git a/src/components/FlowChart/src/DataDialog.vue b/src/components/CodeEditor/src/json-preview/JsonPreview.vue similarity index 93% rename from src/components/FlowChart/src/DataDialog.vue rename to src/components/CodeEditor/src/json-preview/JsonPreview.vue index 71be83c4..7ad99a2d 100644 --- a/src/components/FlowChart/src/DataDialog.vue +++ b/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, }, diff --git a/src/components/FlowChart/index.ts b/src/components/FlowChart/index.ts index 91cb3af0..1dfa98ab 100644 --- a/src/components/FlowChart/index.ts +++ b/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); - }, -}); diff --git a/src/components/FlowChart/src/FlowChartToolbar.vue b/src/components/FlowChart/src/FlowChartToolbar.vue index 9708c211..ea49f896 100644 --- a/src/components/FlowChart/src/FlowChartToolbar.vue +++ b/src/components/FlowChart/src/FlowChartToolbar.vue @@ -30,6 +30,7 @@ props: { prefixCls: String, }, + emits: ['view-data'], setup(_, { emit }) { const toolbarItemList = ref([ { @@ -112,7 +113,7 @@ lf.getSnapshot(); break; case ToolbarTypeEnum.VIEW_DATA: - emit('catData'); + emit('view-data'); break; } }; @@ -131,12 +132,17 @@ }, }); -