github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-02-02 18:08:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add JsonPreview component

Browse Source
This commit is contained in:
Vben 2021-04-17 18:51:19 +08:00
parent a812685084
commit 0649011eba
14 changed files with 89 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.zh_CN.md
View File

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

2
build/generate/generateModifyVars.ts
View File

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

2
build/vite/plugin/theme.ts
View File

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

4
package.json
View File

@ -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"
},

7
src/components/CodeEditor/index.ts
View File

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

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

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

7
src/components/FlowChart/index.ts
View File

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

12
src/components/FlowChart/src/FlowChartToolbar.vue
View File

@ -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 {

216
src/components/FlowChart/src/index.css
View File

File diff suppressed because one or more lines are too long

45
src/components/FlowChart/src/index.vue
View File

@ -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,7 +104,7 @@
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
@ -95,6 +112,9 @@
// Start the right-click menu
LogicFlow.use(Menu);
LogicFlow.use(DndPanel);
isInit = true;
}
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,
};
},
});

6
src/layouts/default/tabs/index.less
View File

@ -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 {

2
src/store/modules/app.ts
View File

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

1
vite.config.ts
View File

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

36
yarn.lock
View File

@ -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"