github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 16:22:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: 修改UI

Browse Source
This commit is contained in:
panjianhua 2022-10-22 21:16:37 +08:00
parent 5dc58362cc
commit fc13c9f7bc
1 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,29 @@
<template> <template>
<div class="go-edit"> <div class="go-edit">
<n-layout has-sider sider-placement="right"> <n-layout>
<n-layout-content> <n-layout-header class="go-edit-header go-px-5 go-flex-items-center" bordered>
<div> <div>
<n-space class="go-mx-1 go-my-1"> <n-text class="go-edit-title go-mr-4">页面在线编辑器</n-text>
<n-button size="medium" @click="back">返回</n-button> <n-button v-if="showOpenFilePicker" class="go-mr-3" size="medium" @click="importJSON">
<n-button v-if="showOpenFilePicker" size="medium" @click="importJSON">导入</n-button> <template #icon>
<!-- <n-button size="medium" type="primary" @click="confirm">覆盖</n-button> --> <n-icon>
</n-space> <download-icon></download-icon>
</n-icon>
</template>
导入
</n-button>
<n-button class="go-mr-4" size="medium" @click="back">
<template #icon>
<n-icon>
<chevron-back-outline-icon></chevron-back-outline-icon>
</n-icon>
</template>
返回工作台
</n-button>
</div> </div>
<n-tag :bordered="false" type="warning"> 「按 ctrl + s 保存/更新」 </n-tag>
</n-layout-header>
<n-layout-content>
<monaco-editor <monaco-editor
v-model:modelValue="content" v-model:modelValue="content"
language="json" language="json"
@ -30,12 +45,14 @@ import { getSessionStorageInfo } from '../preview/utils'
import type { ChartEditStorageType } from '../preview/index.d' import type { ChartEditStorageType } from '../preview/index.d'
import { setSessionStorage } from '@/utils' import { setSessionStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum' import { StorageEnum } from '@/enums/storageEnum'
import { icon } from '@/plugins'
const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
const showOpenFilePicker: Function = (window as any).showOpenFilePicker const showOpenFilePicker: Function = (window as any).showOpenFilePicker
let content = ref('') let content = ref('')
// 从sessionStorage 获取数据 // 从sessionStorage 获取数据
function getDataBySession () { function getDataBySession() {
const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
content.value = JSON.stringify(localStorageInfo, undefined, 2) content.value = JSON.stringify(localStorageInfo, undefined, 2)
} }
@ -47,7 +64,6 @@ function back() {
window.open(opener.location.href, opener.name) window.open(opener.location.href, opener.name)
} }
// 导入json文本 // 导入json文本
async function importJSON() { async function importJSON() {
const files = await showOpenFilePicker() const files = await showOpenFilePicker()
@ -82,7 +98,6 @@ document.addEventListener('keydown', function (e) {
} }
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -90,10 +105,22 @@ document.addEventListener('keydown', function (e) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
} .go-edit-header {
@include deep() { display: flex;
.go-editor-area { align-items: center;
height: calc(100% - 40px) !important; height: 60px;
justify-content: space-between;
.go-edit-title {
position: relative;
bottom: 3px;
font-size: 18px;
font-weight: bold;
}
}
@include deep() {
.go-editor-area {
height: calc(100vh - 60px) !important;
}
} }
} }
</style> </style>