<script lang="ts" setup>
|
import type { TreeActionType } from '@jnpf/ui';
|
|
import { computed, nextTick, reactive, ref, toRefs, unref } from 'vue';
|
|
import { BasicLeftTree } from '@jnpf/ui';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { usePreferences } from '@vben/preferences';
|
|
import { CodeDiff } from 'v-code-diff';
|
|
import { codePreview } from '#/api/onlineDev/visualDev';
|
import logoImg from '#/assets/images/jnpf.png';
|
import { $t } from '#/locales';
|
|
interface State {
|
treeData: any[];
|
currentId: string;
|
oldFileContent: string;
|
currentContent: string;
|
editorLanguage: string;
|
key: number;
|
fullName: string;
|
}
|
|
defineEmits(['register']);
|
const leftTreeRef = ref<Nullable<TreeActionType>>(null);
|
const { isDark } = usePreferences();
|
const [registerModal, { closeModal, changeLoading }] = useModalInner(init);
|
const state = reactive<State>({
|
treeData: [],
|
currentId: '',
|
oldFileContent: '',
|
currentContent: '',
|
editorLanguage: 'html',
|
key: Date.now(),
|
fullName: '',
|
});
|
const { treeData, oldFileContent, currentContent, editorLanguage, key, fullName } = toRefs(state);
|
|
const getThemeColor = computed(() => (isDark.value ? 'dark' : 'light'));
|
|
function init(data) {
|
state.fullName = data.fullName || '';
|
state.key = Date.now();
|
changeLoading(true);
|
const query = {
|
module: data.module || 'system',
|
description: data.description,
|
modulePackageName: data.modulePackageName || '',
|
enableFlow: data.enableFlow,
|
contrast: true,
|
};
|
codePreview(data.id, query).then((res) => {
|
state.treeData = res.data.list.map((o) => ({ ...o, disabled: true }));
|
state.currentId = state.treeData[0].children[0].id;
|
state.currentContent = state.treeData[0].children[0].fileContent;
|
state.oldFileContent = state.treeData[0].children[0].oldFileContent;
|
state.editorLanguage = getLanguage(state.treeData[0].children[0]);
|
nextTick(() => {
|
const leftTree = unref(leftTreeRef);
|
leftTree?.setSelectedKeys([state.currentId]);
|
changeLoading(false);
|
});
|
});
|
}
|
function handleTreeSelect(id, node) {
|
state.key = Date.now();
|
state.currentId = id;
|
state.currentContent = node.fileContent;
|
state.oldFileContent = node.oldFileContent;
|
state.editorLanguage = getLanguage(node);
|
}
|
function getLanguage(node) {
|
return ['app', 'web'].includes(node.fileType) ? 'html' : ['js', 'ts'].includes(node.folderName) ? 'js' : 'java';
|
}
|
</script>
|
<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="registerModal"
|
default-fullscreen
|
:footer="null"
|
:closable="false"
|
:keyboard="false"
|
class="jnpf-full-modal full-modal designer-modal">
|
<template #title>
|
<div class="jnpf-full-modal-header">
|
<div class="header-title">
|
<img :src="logoImg" class="header-logo" />
|
<span class="header-dot"></span>
|
<a-tooltip :title="fullName">
|
<p class="header-txt">{{ fullName }}</p>
|
</a-tooltip>
|
</div>
|
<a-steps :current="1" type="navigation" size="small" class="header-steps tab-steps">
|
<a-step title="代码预览" />
|
</a-steps>
|
<a-space class="options" :size="10">
|
<a-button @click="closeModal()">{{ $t('common.closeText') }}</a-button>
|
</a-space>
|
</div>
|
</template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-left">
|
<BasicLeftTree :show-search="false" ref="leftTreeRef" :field-names="{ title: 'fileName' }" :tree-data="treeData" @select="handleTreeSelect" />
|
</div>
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content bg-white">
|
<CodeDiff
|
:old-string="oldFileContent"
|
:new-string="currentContent"
|
output-format="side-by-side"
|
:language="editorLanguage"
|
:theme="getThemeColor"
|
:context="99999"
|
:key="key" />
|
</div>
|
</div>
|
</div>
|
</BasicModal>
|
</template>
|
<style lang="scss">
|
.code-diff-view {
|
height: 100% !important;
|
margin-top: unset !important;
|
margin-bottom: unset !important;
|
background-color: var(--component-background) !important;
|
border: unset !important;
|
|
.file-header,
|
.empty-cell {
|
background-color: var(--component-background) !important;
|
}
|
}
|
</style>
|
