mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into master-fetch-dev

Browse Source
This commit is contained in:
奔跑的面条 2023-03-04 14:42:56 +08:00
commit c31fa20b02
11 changed files with 194 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/enums/editPageEnum.ts
View File

@ -12,7 +12,8 @@ export enum DragKeyEnum {
// 不同页面保存操作
export enum SavePageEnum {
CHART = 'SaveChart',
JSON = 'SaveJSON'
JSON = 'SaveJSON',
CLOSE = 'close'
}
// 操作枚举

13
src/enums/eventEnum.ts
View File

@ -7,15 +7,15 @@ export enum BaseEvent {
// 移入
ON_MOUSE_ENTER = 'mouseenter',
// 移出
ON_MOUSE_LEAVE = 'mouseleave',
ON_MOUSE_LEAVE = 'mouseleave'
}
// vue3 生命周期事件
export enum EventLife {
export enum EventLife {
// 渲染之后
VNODE_MOUNTED = 'vnodeMounted',
// 渲染之前
VNODE_BEFORE_MOUNT = 'vnodeBeforeMount',
VNODE_BEFORE_MOUNT = 'vnodeBeforeMount'
}
// 内置字符串函数对象列表
@ -28,4 +28,9 @@ export const excludeParseEventKeyList = [
BaseEvent.ON_MOUSE_LEAVE,
//过滤器
'filter'
]
]
// 内置字符串函数键值列表
export const excludeParseEventValueList = [
// 请求里的函数语句
'javascript:'
]

2
src/layout/components/LayoutHeader/index.vue
View File

@ -29,7 +29,7 @@ import { ThemeColorSelect } from '@/components/Pages/ThemeColorSelect'
</script>
<style lang="scss" scoped>
$min-width: 400px;
$min-width: 520px;
@include go(header) {
&-box {
display: grid;

7
src/plugins/icon.ts
View File

@ -67,7 +67,8 @@ import {
List as ListIcon,
EyeOutline as EyeOutlineIcon,
EyeOffOutline as EyeOffOutlineIcon,
Albums as AlbumsIcon
Albums as AlbumsIcon,
Analytics as AnalyticsIcon
} from '@vicons/ionicons5'
import {
@ -242,7 +243,9 @@ const ionicons5 = {
EyeOutlineIcon,
EyeOffOutlineIcon,
// 图表列表
AlbumsIcon
AlbumsIcon,
// 分析
AnalyticsIcon
}
const carbon = {

5
src/store/modules/chartEditStore/chartEditStore.d.ts vendored
View File

@ -47,7 +47,8 @@ export enum EditCanvasTypeEnum {
SAVE_STATUS = 'saveStatus',
IS_CREATE = 'isCreate',
IS_DRAG = 'isDrag',
IS_SELECT = 'isSelect'
IS_SELECT = 'isSelect',
IS_CODE_EDIT="isCodeEdit"
}
// 编辑区域（临时）
@ -71,6 +72,8 @@ export type EditCanvasType = {
[EditCanvasTypeEnum.SAVE_STATUS]: SyncEnum
// 框选中
[EditCanvasTypeEnum.IS_SELECT]: boolean
// 代码编辑中
[EditCanvasTypeEnum.IS_CODE_EDIT]: boolean
}
// 画布数据/滤镜/背景色/宽高主题等

4
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -72,7 +72,9 @@ export const useChartEditStore = defineStore({
// 框选中
isSelect: false,
// 同步中
saveStatus: SyncEnum.PENDING
saveStatus: SyncEnum.PENDING,
// 代码编辑中
isCodeEdit: false
},
// 右键菜单
rightMenuShow: false,

15
src/utils/utils.ts
View File

@ -10,7 +10,7 @@ import cloneDeep from 'lodash/cloneDeep'
import { WinKeyboard } from '@/enums/editPageEnum'
import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { excludeParseEventKeyList } from '@/enums/eventEnum'
import { excludeParseEventKeyList, excludeParseEventValueList } from '@/enums/eventEnum'
/**
* * 判断是否是开发环境
@ -297,14 +297,17 @@ export const JSONStringify = <T>(data: T) => {
*/
export const JSONParse = (data: string) => {
return JSON.parse(data, (k, v) => {
// 过滤函数字符串
if (excludeParseEventKeyList.includes(k)) return v
if(typeof v === 'string' && v.indexOf('javascript:') > -1){
//动态请求json中'javascript:'内容会影响模板content解析，直接返回
return v
// 过滤函数值表达式
if (typeof v === 'string') {
const someValue = excludeParseEventValueList.some(excludeValue => v.indexOf(excludeValue) > -1)
if (someValue) return v
}
// 还原函数值
if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) {
return eval(`(function(){return ${v}})()`)
} else if (typeof v === 'string' && v.indexOf && (v.indexOf('return ') > -1)) {
} else if (typeof v === 'string' && v.indexOf && v.indexOf('return ') > -1) {
const baseLeftIndex = v.indexOf('(')
if (baseLeftIndex > -1) {
const newFn = `function ${v.substring(baseLeftIndex)}`
@ -321,4 +324,4 @@ export const JSONParse = (data: string) => {
*/
export const setTitle = (title?: string) => {
title && (document.title = title)
}
}

54
src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
View File

@ -1,49 +1,69 @@
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import throttle from 'lodash/throttle'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { useSync } from '@/views/chart/hooks/useSync.hook'
import { ChartEnum } from '@/enums/pageEnum'
import { SavePageEnum } from '@/enums/editPageEnum'
import { editToJsonInterval } from '@/settings/designSetting'
import { goDialog } from '@/utils'
const { updateComponent, dataSyncUpdate } = useSync()
const chartEditStore = useChartEditStore()
export const syncData = () => {
goDialog({
message: '是否覆盖源视图内容，此操作不可撤回?',
isMaskClosable: true,
transformOrigin: 'center',
onPositiveCallback: async () => {
window['$message'].success('正在同步编辑器...')
dataSyncUpdate && (await dataSyncUpdate())
dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
}
})
}
// 侦听器更新
const useSyncUpdateHandle = () => {
// 定义侦听器变量
let timer: any
const updateFn = (e: any) => updateComponent(e!.detail, true, false)
const syncData = async () => {
dataSyncUpdate && (await dataSyncUpdate())
dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
// 更新处理
const updateFn = (e: any) => {
window['$message'].success('正在进行更新...')
updateComponent(e!.detail, true)
}
// 页面关闭处理
const closeFn = () => {
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CODE_EDIT, false)
}
// 开启侦听
const use = () => {
// // 1、定时同步数据
// 定时同步数据（暂不开启）
// timer = setInterval(() => {
// // 窗口激活并且处于工作台
// document.hasFocus() && syncData()
// }, editToJsonInterval)
// // 1、定时同步数据
// timer = setInterval(() => {
// // 窗口激活并且处于工作台
// document.hasFocus() && syncData()
// }, editToJsonInterval)
// 2、失焦同步数据
addEventListener('blur', syncData)
// 【监听JSON代码 刷新工作台图表】
// 失焦同步数据（暂不开启）
// addEventListener('blur', syncData)
// 监听编辑器保存事件 刷新工作台图表
addEventListener(SavePageEnum.JSON, updateFn)
// 监听编辑页关闭
addEventListener(SavePageEnum.CLOSE, throttle(closeFn, 1000))
}
// 关闭侦听
const unUse = () => {
// clearInterval(timer)
// clearInterval(timer)
// removeEventListener('blur', syncData)
removeEventListener(SavePageEnum.JSON, updateFn)
removeEventListener('blur', syncData)
}
// 路由变更时处理
@ -55,11 +75,11 @@ const useSyncUpdateHandle = () => {
use()
}
}
return watchHandler
}
export const useSyncUpdate = () => {
const routerParamsInfo = useRoute()
watch(() => routerParamsInfo.name, useSyncUpdateHandle(), { immediate: true })
}
}

16
src/views/chart/ContentEdit/components/EditTools/index.vue
View File

@ -66,7 +66,14 @@ import { ref, computed } from 'vue'
import { useSettingStore } from '@/store/modules/settingStore/settingStore'
import { ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { fetchRouteParamsLocation, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import {
fetchRouteParamsLocation,
fetchPathByName,
routerTurnByPath,
setSessionStorage,
getLocalStorage
} from '@/utils'
import { EditEnum } from '@/enums/pageEnum'
import { StorageEnum } from '@/enums/storageEnum'
import { useRoute } from 'vue-router'
@ -137,8 +144,8 @@ const toolsMouseoutHandle = () => {
// 编辑处理
const editHandle = () => {
window['$message'].warning('将开启失焦更新！')
// window['$message'].warning('将开启失焦更新与 5 秒同步更新！')
window['$message'].warning('请通过顶部【同步内容】按钮同步最新数据！')
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CODE_EDIT, true)
setTimeout(() => {
// 获取id路径
const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href')
@ -146,7 +153,7 @@ const editHandle = () => {
const id = fetchRouteParamsLocation()
updateToSession(id)
routerTurnByPath(path, [id], undefined, true)
}, 1000)
}, 2000)
}
// 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
@ -169,7 +176,6 @@ const updateToSession = (id: string) => {
}
}
// 配置列表
const btnList: BtnListType[] = [
{

69
src/views/chart/ContentHeader/headerRightBtn/index.vue
View File

@ -1,12 +1,6 @@
<template>
<n-space>
<n-button
v-for="item in btnList"
:key="item.key"
:type="item.type()"
ghost
@click="item.event"
>
<n-space class="go-mt-0">
<n-button v-for="item in comBtnList" :key="item.key" :type="item.type()" ghost @click="item.event">
<template #icon>
<component :is="item.icon"></component>
</template>
@ -32,9 +26,7 @@
{{ previewPath() }}
</n-alert>
<n-space vertical>
<n-button tertiary type="primary" @click="copyPreviewPath()">
复制地址
</n-button>
<n-button tertiary type="primary" @click="copyPreviewPath()"> 复制地址 </n-button>
<n-button :type="release ? 'warning' : 'primary'" @click="sendHandle">
{{ release ? '取消发布' : '发布大屏' }}
</n-button>
@ -52,13 +44,14 @@
</template>
<script setup lang="ts">
import { ref, shallowReactive, watchEffect } from 'vue'
import { ref, computed, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { useClipboard } from '@vueuse/core'
import { PreviewEnum } from '@/enums/pageEnum'
import { StorageEnum } from '@/enums/storageEnum'
import { ResultEnum } from '@/enums/httpEnum'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { syncData } from '../../ContentEdit/components/EditTools/hooks/useSyncUpdate.hook'
import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { changeProjectReleaseApi } from '@/api/path'
import {
@ -69,11 +62,12 @@ import {
setSessionStorage,
getLocalStorage,
httpErrorHandle,
fetchRouteParamsLocation,
fetchRouteParamsLocation
} from '@/utils'
import { icon } from '@/plugins'
import { cloneDeep } from 'lodash'
const { BrowsersOutlineIcon, SendIcon, CloseIcon } = icon.ionicons5
const { BrowsersOutlineIcon, SendIcon, AnalyticsIcon, CloseIcon } = icon.ionicons5
const chartEditStore = useChartEditStore()
const previewPathRef = ref(previewPath())
@ -101,31 +95,26 @@ const previewHandle = () => {
// id 标识
const previewId = typeof id === 'string' ? id : id[0]
const storageInfo = chartEditStore.getStorageInfo
const sessionStorageInfo =
getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
if (sessionStorageInfo?.length) {
const repeateIndex = sessionStorageInfo.findIndex(
(e: { id: string }) => e.id === previewId
)
const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === previewId)
// 重复替换
if (repeateIndex !== -1) {
sessionStorageInfo.splice(repeateIndex, 1, {
id: previewId,
...storageInfo,
...storageInfo
})
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
} else {
sessionStorageInfo.push({
id: previewId,
...storageInfo,
...storageInfo
})
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
}
} else {
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [
{ id: previewId, ...storageInfo },
])
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id: previewId, ...storageInfo }])
}
// 跳转
routerTurnByPath(path, [previewId], undefined, true)
@ -148,11 +137,11 @@ const copyPreviewPath = (successText?: string, failureText?: string) => {
// 发布
const sendHandle = async () => {
const res = (await changeProjectReleaseApi({
const res = await changeProjectReleaseApi({
id: fetchRouteParamsLocation(),
// 反过来
state: release.value ? -1 : 1,
}))
state: release.value ? -1 : 1
})
if (res && res.code === ResultEnum.SUCCESS) {
modelShowHandle()
@ -167,22 +156,38 @@ const sendHandle = async () => {
}
}
const btnList = shallowReactive([
const btnList = [
{
select: true,
title: () => '同步内容',
type: () => 'primary',
icon: renderIcon(AnalyticsIcon),
event: syncData
},
{
key: 'preview',
title: () => '预览',
type: () => 'default',
icon: renderIcon(BrowsersOutlineIcon),
event: previewHandle,
event: previewHandle
},
{
key: 'release',
title: () => (release.value ? '已发布' : '发布'),
icon: renderIcon(SendIcon),
type: () => (release.value ? 'primary' : 'default'),
event: modelShowHandle,
},
])
event: modelShowHandle
}
]
const comBtnList = computed(() => {
if (chartEditStore.getEditCanvas.isCodeEdit) {
return btnList
}
const cloneList = cloneDeep(btnList)
cloneList.shift()
return cloneList
})
</script>
<style lang="scss" scoped>

107
src/views/edit/index.vue
View File

@ -14,8 +14,17 @@
</n-button>
</div>
<n-space>
<n-tag :bordered="false" type="warning"> 「页面失焦保存」 </n-tag>
<n-tag :bordered="false" type="warning"> 「ctrl + s 保存」 </n-tag>
<!-- 暂时关闭 -->
<!-- <n-tag :bordered="false" type="warning"> 「页面失焦保存」 </n-tag> -->
<n-tag :bordered="false" type="warning"> 「Ctrl + S 更新视图」 </n-tag>
<n-button v-if="showOpenFilePicker" class="go-mr-3" size="medium" @click="updateSync">
<template #icon>
<n-icon>
<analytics-icon></analytics-icon>
</n-icon>
</template>
保存
</n-button>
</n-space>
</n-layout-header>
<n-layout-content>
@ -26,29 +35,34 @@
lineNumbers: 'on',
minimap: { enabled: true }
}"
/>
/>
</n-layout-content>
</n-layout>
</div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ref } from 'vue'
import { MonacoEditor } from '@/components/Pages/MonacoEditor'
import { SavePageEnum } from '@/enums/editPageEnum'
import { getSessionStorageInfo } from '../preview/utils'
import type { ChartEditStorageType } from '../preview/index.d'
import { setSessionStorage, fetchRouteParamsLocation, JSONStringify, JSONParse, setTitle } from '@/utils'
import { setSessionStorage, fetchRouteParamsLocation, JSONStringify, JSONParse, setTitle, goDialog } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
import { icon } from '@/plugins'
import { useSync } from '@/views/chart/hooks/useSync.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import type { ChartEditStorageType } from '../preview/index.d'
const chartEditStore = useChartEditStore()
const { dataSyncUpdate } = useSync()
const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
const { ChevronBackOutlineIcon, DownloadIcon, AnalyticsIcon } = icon.ionicons5
const showOpenFilePicker: Function = (window as any).showOpenFilePicker
const content = ref('')
window['$message'].warning('请不要刷新此窗口！')
// 从sessionStorage 获取数据
async function getDataBySession() {
const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
@ -64,49 +78,80 @@ function back() {
}
// 导入json文本
async function importJSON() {
const files = await showOpenFilePicker()
const file = await files[0].getFile()
const fr = new FileReader()
fr.readAsText(file)
fr.onloadend = () => {
content.value = (fr.result || '').toString()
}
function importJSON() {
goDialog({
message: '导入数据将覆盖内容，此操作不可撤回，是否继续？',
isMaskClosable: true,
transformOrigin: 'center',
onPositiveCallback: async () => {
try {
const files = await showOpenFilePicker()
const file = await files[0].getFile()
const fr = new FileReader()
fr.readAsText(file)
fr.onloadend = () => {
content.value = (fr.result || '').toString()
}
window['$message'].success('导入成功！')
} catch (error) {
window['$message'].error('导入失败，请检查文件是否损坏！')
console.log(error)
}
}
})
}
// 同步 [画布页失去焦点时同步数据到JSON页，JSON页Ctrl+S 时同步数据到画布页]
// 同步数据编辑页
window.opener.addEventListener(SavePageEnum.CHART, (e: any) => {
window['$message'].success('正在进行更新...')
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [e.detail])
content.value = JSONStringify(e.detail)
})
// 窗口失焦 + 保存 => 同步数据
// 保存按钮同步数据
document.addEventListener('keydown', function (e) {
if (e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
e.preventDefault()
updateSync()
}
})
addEventListener('blur', updateSync)
// 失焦保存（暂时关闭）
// addEventListener('blur', updateSync)
// 同步更新
async function updateSync() {
if (!window.opener) {
return window['$message'].error('源窗口已关闭，视图同步失败')
return window['$message'].error('源窗口已关闭，视图同步失败！')
}
try {
const detail = JSONParse(content.value)
delete detail.id
// 保持id不变
// 带后端版本额外处理请求
if (dataSyncUpdate) {
chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
await dataSyncUpdate(false) // JSON界面保存不上传缩略图
goDialog({
message: '是否覆盖源视图内容? 此操作不可撤！',
isMaskClosable: true,
transformOrigin: 'center',
onPositiveCallback: async () => {
try {
const detail = JSONParse(content.value)
delete detail.id
// 保持id不变
// 带后端版本额外处理请求
if (dataSyncUpdate) {
chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
await dataSyncUpdate(false) // JSON界面保存不上传缩略图
}
window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
window['$message'].success('正在同步内容...')
} catch (e) {
window['$message'].error('内容格式有误')
console.log(e)
}
}
window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
} catch (e) {
window['$message'].error('内容格式有误')
console.log(e)
})
}
// 关闭页面发送关闭事件
window.onbeforeunload = () => {
if (window.opener) {
window.opener.dispatchEvent(new CustomEvent(SavePageEnum.CLOSE))
}
}
</script>