100 lines
2.9 KiB
Vue
100 lines
2.9 KiB
Vue
<!-- 右侧工具栏 -->
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue'
|
|
import { useEditorStore } from '@/stores/editor'
|
|
import { storeToRefs } from 'pinia'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const editorStore = useEditorStore()
|
|
const { page } = storeToRefs(editorStore)
|
|
|
|
const visible = ref(false)
|
|
const jsonContent = ref('')
|
|
|
|
const inputRef = useTemplateRef<HTMLInputElement>('inputRef')
|
|
|
|
// 显示 JSON 编辑器
|
|
const showJson = () => {
|
|
visible.value = true
|
|
jsonContent.value = JSON.stringify(page.value, null, 2)
|
|
}
|
|
|
|
// 确认编辑 JSON
|
|
const onConfirm = () => {
|
|
const newPage = JSON.parse(jsonContent.value)
|
|
editorStore.setPage(newPage)
|
|
visible.value = false
|
|
}
|
|
|
|
// 导出文件
|
|
const onExport = () => {
|
|
const json = JSON.stringify(page.value, null, 2)
|
|
const blob = new Blob([json], { type: 'application/json;charset=utf-8' })
|
|
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = 'design.json'
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
// 导入文件
|
|
const onImport = () => {
|
|
inputRef.value?.click()
|
|
}
|
|
|
|
// 文件选择变化处理
|
|
const onFileChange = (e: Event) => {
|
|
const target = e.target as HTMLInputElement
|
|
const file = target.files?.[0]
|
|
if (!file) return
|
|
|
|
const reader = new FileReader()
|
|
// 读取文件完成后的回调
|
|
reader.onload = (e) => {
|
|
const content = e.target?.result as string
|
|
try {
|
|
const newPage = JSON.parse(content)
|
|
editorStore.setPage(newPage)
|
|
ElMessage.success('导入成功')
|
|
} catch (error) {
|
|
console.error('导入的文件不是有效的 JSON 文件', error)
|
|
ElMessage.error('导入的文件不是有效的 JSON 文件')
|
|
}
|
|
}
|
|
// 读取文件内容
|
|
reader.readAsText(file)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-end gap-5">
|
|
<span class="border p-1 rounded-lg"><Icon icon="icon-park-outline:preview-open"></Icon></span>
|
|
<span class="border p-1 rounded-lg" @click="showJson"><Icon icon="si:json-line"></Icon></span>
|
|
<span class="border p-1 rounded-lg"><Icon icon="hugeicons:internet"></Icon></span>
|
|
<span class="border p-1 rounded-lg" @click="onImport" title="导入">
|
|
<Icon icon="lets-icons:import"> </Icon>
|
|
</span>
|
|
<span class="border p-1 rounded-lg" @click="onExport" title="导出">
|
|
<Icon icon="lets-icons:export"> </Icon>
|
|
</span>
|
|
|
|
<input ref="inputRef" type="file" class="hidden" @change="onFileChange" />
|
|
|
|
<el-drawer v-model="visible" title="编辑 JSON" class="json-drawer" destroy-on-close>
|
|
<MonacoEditor v-model="jsonContent" lang="json" />
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<el-button @click="visible = false">取消</el-button>
|
|
<el-button type="primary" @click="onConfirm">确认</el-button>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|