diff --git a/src/editor/panels/material/index.vue b/src/editor/panels/material/index.vue
index c1c098a..c653c1a 100644
--- a/src/editor/panels/material/index.vue
+++ b/src/editor/panels/material/index.vue
@@ -22,7 +22,7 @@ const currentMaterials = computed(() => {
diff --git a/src/editor/panels/property/components/FormCreate.vue b/src/editor/panels/property/components/FormCreate.vue
index 7dff75b..2c44c04 100644
--- a/src/editor/panels/property/components/FormCreate.vue
+++ b/src/editor/panels/property/components/FormCreate.vue
@@ -2,6 +2,10 @@
import { getValue } from '@/utils'
import { ElInput, ElInputNumber, ElColorPicker, ElCheckbox, ElSelect } from 'element-plus'
import { useUndoRedo } from '@/composables/useUndoRedo'
+// 动态 :is 不会走 unplugin 按需样式，需要手动引入
+import 'element-plus/es/components/select/style/css'
+import 'element-plus/es/components/input/style/css'
+import 'element-plus/es/components/checkbox/style/css'
defineProps(['setters', 'formData'])
@@ -32,5 +36,3 @@ const componentMap: Record = {
-
-
diff --git a/src/editor/panels/property/components/NodeProperty.vue b/src/editor/panels/property/components/NodeProperty.vue
index 9855178..7e7939d 100644
--- a/src/editor/panels/property/components/NodeProperty.vue
+++ b/src/editor/panels/property/components/NodeProperty.vue
@@ -3,6 +3,7 @@ import { getMaterialSetters } from '@/materials'
import { useEditorStore } from '@/stores/editor'
import { storeToRefs } from 'pinia'
import FormCreate from './FormCreate.vue'
+import MonacoEditor from '@/components/MonacoEditor/index.vue'
defineOptions({
name: 'NodeProperty',
@@ -41,10 +42,36 @@ const layoutSetters = [
type: 'number',
},
]
+
+const visible = ref(false)
+const jsonContent = ref('')
+// 显示 JSON 编辑器
+const showJson = () => {
+ jsonContent.value = JSON.stringify(selectedNode.value, null, 2)
+ console.log('jsonContent.value', jsonContent.value)
+ visible.value = true
+}
+
+// 确认编辑 JSON
+const onConfirm = () => {
+ // 拿到新的 JSON 内容，更新到节点中
+ const newNode = JSON.parse(jsonContent.value)
+ editorStore.updateNode(selectedNode.value?.id || '', {
+ ...newNode,
+ // 这两个属性不允许被修改
+ id: selectedNode.value?.id || '',
+ type: selectedNode.value?.type || '',
+ })
+ visible.value = false
+}
+
+ {{ selectedNode?.name }}
+
+
@@ -53,5 +80,22 @@ const layoutSetters = [
+
+
+
+
+
+ 取消
+ 确认
+
+
+
+
diff --git a/src/editor/toolbar/ToolbarRight.vue b/src/editor/toolbar/ToolbarRight.vue
index 0613b3d..a5f5d85 100644
--- a/src/editor/toolbar/ToolbarRight.vue
+++ b/src/editor/toolbar/ToolbarRight.vue
@@ -1,16 +1,99 @@
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 取消
+ 确认
+
+
+
-
-
diff --git a/src/materials/charts/area.ts b/src/materials/charts/area.ts
index 3b1fd34..184b24c 100644
--- a/src/materials/charts/area.ts
+++ b/src/materials/charts/area.ts
@@ -163,10 +163,10 @@ export const areaMaterial: MaterialDefinition = {
},
lineStyle: {
width: 3,
- color: '#22d3ee',
+ color: '#ffffff',
},
itemStyle: {
- color: '#22d3ee',
+ color: '#ffffff',
},
areaStyle: {
color: 'rgba(34, 211, 238, 0.25)',
diff --git a/src/materials/charts/bar.ts b/src/materials/charts/bar.ts
index 5f39175..427d677 100644
--- a/src/materials/charts/bar.ts
+++ b/src/materials/charts/bar.ts
@@ -152,7 +152,7 @@ export const barMaterial: MaterialDefinition = {
y: 'sales',
},
itemStyle: {
- color: '#22d3ee',
+ color: '#ffffff',
borderRadius: [4, 4, 0, 0],
},
},
diff --git a/src/materials/charts/pie.ts b/src/materials/charts/pie.ts
index 57003ba..242c2f7 100644
--- a/src/materials/charts/pie.ts
+++ b/src/materials/charts/pie.ts
@@ -59,7 +59,7 @@ export const pieMaterial: MaterialDefinition = {
},
props: {
option: {
- color: ['#22d3ee', '#a78bfa', '#f59e0b', '#34d399', '#fb7185'],
+ color: ['#ffffff', '#a78bfa', '#f59e0b', '#34d399', '#fb7185'],
legend: {
top: 38,
left: 'center',
diff --git a/src/materials/text/index.ts b/src/materials/text/index.ts
index 2ad35c5..ac41d07 100644
--- a/src/materials/text/index.ts
+++ b/src/materials/text/index.ts
@@ -27,10 +27,10 @@ const textMaterial: MaterialDefinition = {
height: 50,
},
style: {
- color: 'red',
+ color: '#fff',
},
props: {
- content: '文本内容123123',
+ content: '文本内容',
},
},
}
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index ffecb93..2ccd5c1 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -23,6 +23,11 @@ export const useEditorStore = defineStore('editor', () => {
nodes: [],
})
+ // 设置页面数据
+ const setPage = (newPage: PageSchema) => {
+ Object.assign(page.value, newPage)
+ }
+
const canvas = toRef(page.value, 'canvas')
// 画布上的节点数据
@@ -108,6 +113,13 @@ export const useEditorStore = defineStore('editor', () => {
applyChange(node, 'locked', !node.locked)
}
+ //
+ function updateNode(nodeId: string, newNode: MaterialSchema) {
+ // 返回新的节点数组，替换掉原来的节点数组
+ const newNodes = nodes.value.map((node) => (node.id === nodeId ? newNode : node))
+ setNodes(newNodes)
+ }
+
return {
panelVisible,
page,
@@ -126,5 +138,7 @@ export const useEditorStore = defineStore('editor', () => {
moveTop,
moveBottom,
toggleLock,
+ updateNode,
+ setPage,
}
})