-
+
@@ -14,7 +14,6 @@
@@ -78,10 +77,10 @@ export default {
const plugin = {}
addons.plugins.forEach((item) => {
- plugin[item.id] = { width: item.options?.width || 300 }
+ plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'leftTop' }
})
addons.settings.forEach((item) => {
- plugin[item.id] = { width: item.options?.width || 320 }
+ plugin[item.id] = { width: item.options?.width || 320, align: item.options?.align || 'leftTop' }
})
localStorage.setItem('plugin', JSON.stringify(plugin))
diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
index c8a31d698..3090eff8b 100644
--- a/packages/design-core/src/DesignPlugins.vue
+++ b/packages/design-core/src/DesignPlugins.vue
@@ -110,7 +110,7 @@ import { reactive, ref, watch } from 'vue'
import { Popover, Tooltip } from '@opentiny/vue'
import { useLayout, usePage } from '@opentiny/tiny-engine-controller'
import { PublicIcon } from '@opentiny/tiny-engine-common'
-
+import { getPlugin } from '../config/addons.js'
export default {
components: {
TinyPopover: Popover,
@@ -120,14 +120,10 @@ export default {
props: {
renderPanel: {
type: String
- },
- addons: {
- type: Array
}
},
emits: ['click', 'node-click'],
setup(props, { emit }) {
- const plugins = props.addons && props.addons.plugins
const components = {}
const iconComponents = {}
const pluginRef = ref(null)
@@ -136,9 +132,11 @@ export default {
const { isTemporaryPage } = usePage()
const HELP_PLUGIN_ID = 'EditorHelp'
- const { pluginState, registerPluginApi, changeLeftFixedPanels, leftFixedPanelsStorage } = useLayout()
+ const { pluginState, registerPluginApi, changeLeftFixedPanels, leftFixedPanelsStorage, getPluginLayout } =
+ useLayout()
- props.addons.plugins.forEach(({ id, component, api, icon }) => {
+ const plugins = getPluginLayout('all').map((pluginName) => getPlugin(pluginName))
+ plugins.forEach(({ id, component, api, icon }) => {
components[id] = component
iconComponents[id] = icon
if (api) {
@@ -152,9 +150,9 @@ export default {
const state = reactive({
prevIdex: -2,
- topNavLists: plugins.filter((item) => item.align === 'top'),
- bottomNavLists: plugins.filter((item) => item.align === 'bottom'),
- independence: plugins.find((item) => item.align === 'independence')
+ topNavLists: getPluginLayout('leftTop').map((pluginName) => getPlugin(pluginName)),
+ bottomNavLists: getPluginLayout('leftBottom').map((pluginName) => getPlugin(pluginName)),
+ independence: getPluginLayout('independence').map((pluginName) => getPlugin(pluginName))
})
const doCompleted = () => {
diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
index b3546996a..c9a28950f 100644
--- a/packages/design-core/src/DesignSettings.vue
+++ b/packages/design-core/src/DesignSettings.vue
@@ -49,6 +49,7 @@ import { computed, ref, toRefs, watch, reactive } from 'vue'
import { Popover, Tooltip } from '@opentiny/vue'
import { Tabs, TabItem } from '@opentiny/vue'
import { useLayout } from '@opentiny/tiny-engine-controller'
+import { getPlugin } from '../config/addons.js'
export default {
components: {
@@ -60,32 +61,37 @@ export default {
props: {
renderPanel: {
type: String
- },
- addons: {
- type: Array
}
},
setup(props) {
+ const components = {}
+ const iconComponents = {}
const { renderPanel } = toRefs(props)
const {
rightFixedPanelsStorage,
+ registerPluginApi,
changeRightFixedPanels,
+ getPluginLayout,
layoutState: { settings: settingsState }
} = useLayout()
- const settings = props.addons && props.addons.settings
- const components = {}
- const iconComponents = {}
- const activating = computed(() => settingsState.activating) //高亮显示
- const showMask = ref(true)
- props.addons.settings.forEach(({ id, component, icon }) => {
+ const plugins = getPluginLayout('all').map((pluginName) => getPlugin(pluginName))
+ plugins.forEach(({ id, component, api, icon }) => {
components[id] = component
iconComponents[id] = icon
+ if (api) {
+ registerPluginApi({
+ [id]: api
+ })
+ }
})
+ const activating = computed(() => settingsState.activating) //高亮显示
+ const showMask = ref(true)
+
const state = reactive({
- leftList: settings
+ leftList: getPluginLayout('rightTop').map((pluginName) => getPlugin(pluginName))
})
const setRender = (curId) => {
@@ -117,7 +123,6 @@ export default {
return {
state,
showMask,
- settings,
activating,
settingsState,
components,
diff --git a/packages/plugins/block/index.js b/packages/plugins/block/index.js
index 5089a42a7..242858168 100644
--- a/packages/plugins/block/index.js
+++ b/packages/plugins/block/index.js
@@ -17,7 +17,9 @@ export default {
title: '区块管理',
icon: 'plugin-icon-symbol',
align: 'top',
- option: {},
+ option: {
+ align: 'leftTop'
+ },
api,
component
}
diff --git a/packages/plugins/bridge/index.js b/packages/plugins/bridge/index.js
index 2b8b51458..1e4fdcaba 100644
--- a/packages/plugins/bridge/index.js
+++ b/packages/plugins/bridge/index.js
@@ -17,6 +17,8 @@ export default {
title: '资源管理',
icon: 'plugin-icon-sresources',
align: 'top',
- option: {},
+ option: {
+ align: 'leftTop'
+ },
component
}
diff --git a/packages/plugins/data/index.js b/packages/plugins/data/index.js
index bb01a056e..80faedd51 100644
--- a/packages/plugins/data/index.js
+++ b/packages/plugins/data/index.js
@@ -17,6 +17,8 @@ export default {
title: '状态管理',
icon: 'plugin-icon-var',
align: 'top',
- option: {},
+ option: {
+ align: 'leftTop'
+ },
component
}
diff --git a/packages/plugins/datasource/index.js b/packages/plugins/datasource/index.js
index 934167e05..f99738eab 100644
--- a/packages/plugins/datasource/index.js
+++ b/packages/plugins/datasource/index.js
@@ -18,7 +18,9 @@ export default {
title: '数据源',
icon: 'plugin-icon-data',
align: 'top',
- option: {},
+ option: {
+ align: 'leftTop'
+ },
component
}
diff --git a/packages/plugins/help/index.js b/packages/plugins/help/index.js
index 6b29caf7b..32727a315 100644
--- a/packages/plugins/help/index.js
+++ b/packages/plugins/help/index.js
@@ -16,6 +16,8 @@ export default {
id: 'EditorHelp',
title: '',
icon: HelpIcon,
- option: {},
+ options: {
+ align: 'leftBottom'
+ },
align: 'bottom'
}
diff --git a/packages/plugins/i18n/index.js b/packages/plugins/i18n/index.js
index 3d5a71dc3..bf97da16e 100644
--- a/packages/plugins/i18n/index.js
+++ b/packages/plugins/i18n/index.js
@@ -18,7 +18,8 @@ export default {
icon: 'plugin-icon-language',
align: 'top',
options: {
- width: 620
+ width: 620,
+ align: 'leftTop'
},
component
}
diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js
index 7d337ffd6..e9d2b4a76 100644
--- a/packages/plugins/materials/index.js
+++ b/packages/plugins/materials/index.js
@@ -17,7 +17,9 @@ export default {
title: '物料',
icon: 'plugin-icon-materials',
align: 'top',
- options: {},
+ options: {
+ align: 'leftTop'
+ },
component,
api
}
diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
index 9ec63f8a2..a217faefb 100644
--- a/packages/plugins/page/index.js
+++ b/packages/plugins/page/index.js
@@ -17,7 +17,9 @@ export default {
title: '页面管理',
icon: 'plugin-icon-page',
align: 'top',
- option: {},
+ option: {
+ align: 'leftTop'
+ },
api,
component
}
diff --git a/packages/plugins/robot/index.js b/packages/plugins/robot/index.js
index f1fb2ff0a..4aae985e7 100644
--- a/packages/plugins/robot/index.js
+++ b/packages/plugins/robot/index.js
@@ -17,6 +17,8 @@ export default {
title: 'AI对话框',
icon: 'plugin-icon-robot',
align: 'independence',
- option: {},
+ options: {
+ align: 'independence'
+ },
component
}
diff --git a/packages/plugins/schema/index.js b/packages/plugins/schema/index.js
index 79e16fc8e..19f35f8b0 100644
--- a/packages/plugins/schema/index.js
+++ b/packages/plugins/schema/index.js
@@ -18,6 +18,7 @@ export default {
icon: 'plugin-icon-page-schema',
align: 'bottom',
options: {
+ align: 'leftBottom',
width: 1000
},
component
diff --git a/packages/plugins/script/index.js b/packages/plugins/script/index.js
index 6cef9c322..5889a24bf 100644
--- a/packages/plugins/script/index.js
+++ b/packages/plugins/script/index.js
@@ -18,7 +18,8 @@ export default {
icon: 'plugin-icon-js',
align: 'top',
options: {
- width: 1000
+ width: 1000,
+ align: 'leftTop'
},
api,
component,
diff --git a/packages/plugins/tree/index.js b/packages/plugins/tree/index.js
index 633690579..991369582 100644
--- a/packages/plugins/tree/index.js
+++ b/packages/plugins/tree/index.js
@@ -17,6 +17,8 @@ export default {
title: '大纲树',
icon: 'plugin-icon-tree',
align: 'top',
- option: {},
+ option: {
+ align: 'leftTop'
+ },
component
}
diff --git a/packages/settings/events/index.js b/packages/settings/events/index.js
index 5affa33fb..cb9fb31f6 100644
--- a/packages/settings/events/index.js
+++ b/packages/settings/events/index.js
@@ -19,7 +19,8 @@ export default {
icon: 'target',
align: 'top',
options: {
- width: 320
+ width: 320,
+ align: 'rightTop'
},
component
}
diff --git a/packages/settings/props/index.js b/packages/settings/props/index.js
index 32bda9bec..1c8a97859 100644
--- a/packages/settings/props/index.js
+++ b/packages/settings/props/index.js
@@ -22,7 +22,8 @@ export default {
icon: 'form',
align: 'top',
options: {
- width: 320
+ width: 320,
+ align: 'rightTop'
},
component
}
diff --git a/packages/settings/styles/index.js b/packages/settings/styles/index.js
index 1ad4d3e51..fa900fc97 100644
--- a/packages/settings/styles/index.js
+++ b/packages/settings/styles/index.js
@@ -19,7 +19,8 @@ export default {
icon: 'display-inline',
align: 'top',
options: {
- width: 320
+ width: 320,
+ align: 'rightTop'
},
component
}
From e6e7a9db4fa302639ac263ffd848a95e5ff52cf4 Mon Sep 17 00:00:00 2001
From: STATICHIT <2394412110@qq.com>
Date: Thu, 29 Aug 2024 00:34:20 +0800
Subject: [PATCH 2/3] optimize: Deal with comments
---
packages/controller/src/useLayout.js | 6 ++++--
packages/design-core/config/addons.js | 2 +-
packages/design-core/src/App.vue | 8 ++++++--
3 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
index 20a9ffc62..9f43a7465 100644
--- a/packages/controller/src/useLayout.js
+++ b/packages/controller/src/useLayout.js
@@ -173,7 +173,7 @@ export default () => {
//获取某个布局（左上/左下/右上）的插件名称列表
const getPluginLayout = (layout) => {
- const targetLayout = []
+ const targetLayout = layout ? [] : null
// 遍历对象并将 align 值分类到不同的数组中
for (const key in pluginStorageReactive.value) {
if (pluginStorageReactive.value[key].align === layout || layout === 'all') {
@@ -185,7 +185,9 @@ export default () => {
//修改某个插件的布局
const changePluginLayout = (name, layout) => {
- pluginStorageReactive.value[name].align = layout
+ if (pluginStorageReactive.value[name]) {
+ pluginStorageReactive.value[name].align = layout
+ }
}
return {
diff --git a/packages/design-core/config/addons.js b/packages/design-core/config/addons.js
index 2a35a965d..aa37eedcd 100644
--- a/packages/design-core/config/addons.js
+++ b/packages/design-core/config/addons.js
@@ -74,7 +74,7 @@ addons.settings.forEach((item) => {
})
export const getPlugin = (pluginName) => {
- return plugin[pluginName]
+ return plugin[pluginName] || null
}
export default addons
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index 2b39b989f..d8266be74 100644
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@@ -77,10 +77,14 @@ export default {
const plugin = {}
addons.plugins.forEach((item) => {
- plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'leftTop' }
+ if (item.id) {
+ plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'leftTop' }
+ }
})
addons.settings.forEach((item) => {
- plugin[item.id] = { width: item.options?.width || 320, align: item.options?.align || 'leftTop' }
+ if (item.id) {
+ plugin[item.id] = { width: item.options?.width || 320, align: item.options?.align || 'leftTop' }
+ }
})
localStorage.setItem('plugin', JSON.stringify(plugin))
From 27b95ce5f56755d6cfae107a71b75bb9b8c51cae Mon Sep 17 00:00:00 2001
From: STATICHIT <2394412110@qq.com>
Date: Fri, 30 Aug 2024 19:28:02 +0800
Subject: [PATCH 3/3] optimize: Deal with comments2
---
packages/controller/src/useLayout.js | 21 ++++++++++++--------
packages/design-core/config/plugin.js | 13 ++++++++++++
packages/design-core/src/App.vue | 4 ++--
packages/design-core/src/DesignPlugins.vue | 22 +++++++++++++--------
packages/design-core/src/DesignSettings.vue | 9 +++++----
packages/plugins/block/index.js | 2 +-
packages/plugins/bridge/index.js | 2 +-
packages/plugins/data/index.js | 2 +-
packages/plugins/datasource/index.js | 2 +-
packages/plugins/page/index.js | 2 +-
packages/plugins/tree/index.js | 2 +-
11 files changed, 53 insertions(+), 28 deletions(-)
create mode 100644 packages/design-core/config/plugin.js
diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
index 9f43a7465..0c0e47cfd 100644
--- a/packages/controller/src/useLayout.js
+++ b/packages/controller/src/useLayout.js
@@ -37,6 +37,13 @@ const PLUGIN_NAME = {
Style: 'SettingStyles',
Props: 'SettingProps'
}
+const PLUGIN_POSITION = {
+ leftTop: 'leftTop',
+ leftBottom: 'leftBottom',
+ independence: 'independence',
+ rightTop: 'rightTop',
+ rightBottom: 'rightBottom'
+}
const pluginState = reactive({
pluginEvent: 'all'
@@ -172,14 +179,11 @@ export default () => {
}
//获取某个布局（左上/左下/右上）的插件名称列表
- const getPluginLayout = (layout) => {
- const targetLayout = layout ? [] : null
+ const getPluginsByLayout = (layout = 'all') => {
// 遍历对象并将 align 值分类到不同的数组中
- for (const key in pluginStorageReactive.value) {
- if (pluginStorageReactive.value[key].align === layout || layout === 'all') {
- targetLayout.push(key)
- }
- }
+ const targetLayout = Object.keys(pluginStorageReactive.value).filter(
+ (key) => pluginStorageReactive.value[key].align === layout || layout === 'all'
+ )
return targetLayout //这里返回的是只有名字的数组
}
@@ -192,6 +196,7 @@ export default () => {
return {
PLUGIN_NAME,
+ PLUGIN_POSITION,
activeSetting,
activePlugin,
closePlugin,
@@ -211,7 +216,7 @@ export default () => {
rightFixedPanelsStorage,
changeLeftFixedPanels,
changeRightFixedPanels,
- getPluginLayout,
+ getPluginsByLayout,
changePluginLayout
}
}
diff --git a/packages/design-core/config/plugin.js b/packages/design-core/config/plugin.js
new file mode 100644
index 000000000..52ffe486c
--- /dev/null
+++ b/packages/design-core/config/plugin.js
@@ -0,0 +1,13 @@
+import addons from './addons'
+
+const plugin = {}
+addons.plugins.forEach((item) => {
+ plugin[item.id] = item
+})
+addons.settings.forEach((item) => {
+ plugin[item.id] = item
+})
+
+export const getPlugin = (pluginName) => {
+ return plugin[pluginName] || null
+}
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index d8266be74..e2e1e0015 100644
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@@ -78,12 +78,12 @@ export default {
const plugin = {}
addons.plugins.forEach((item) => {
if (item.id) {
- plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'leftTop' }
+ plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'rightTop' }
}
})
addons.settings.forEach((item) => {
if (item.id) {
- plugin[item.id] = { width: item.options?.width || 320, align: item.options?.align || 'leftTop' }
+ plugin[item.id] = { width: item.options?.width || 320, align: item.options?.align || 'rightTop' }
}
})
localStorage.setItem('plugin', JSON.stringify(plugin))
diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
index 3090eff8b..c458eaa8e 100644
--- a/packages/design-core/src/DesignPlugins.vue
+++ b/packages/design-core/src/DesignPlugins.vue
@@ -110,7 +110,7 @@ import { reactive, ref, watch } from 'vue'
import { Popover, Tooltip } from '@opentiny/vue'
import { useLayout, usePage } from '@opentiny/tiny-engine-controller'
import { PublicIcon } from '@opentiny/tiny-engine-common'
-import { getPlugin } from '../config/addons.js'
+import { getPlugin } from '../config/plugin.js'
export default {
components: {
TinyPopover: Popover,
@@ -132,10 +132,16 @@ export default {
const { isTemporaryPage } = usePage()
const HELP_PLUGIN_ID = 'EditorHelp'
- const { pluginState, registerPluginApi, changeLeftFixedPanels, leftFixedPanelsStorage, getPluginLayout } =
- useLayout()
-
- const plugins = getPluginLayout('all').map((pluginName) => getPlugin(pluginName))
+ const {
+ pluginState,
+ registerPluginApi,
+ changeLeftFixedPanels,
+ leftFixedPanelsStorage,
+ getPluginsByLayout,
+ PLUGIN_POSITION
+ } = useLayout()
+
+ const plugins = getPluginsByLayout().map((pluginName) => getPlugin(pluginName))
plugins.forEach(({ id, component, api, icon }) => {
components[id] = component
iconComponents[id] = icon
@@ -150,9 +156,9 @@ export default {
const state = reactive({
prevIdex: -2,
- topNavLists: getPluginLayout('leftTop').map((pluginName) => getPlugin(pluginName)),
- bottomNavLists: getPluginLayout('leftBottom').map((pluginName) => getPlugin(pluginName)),
- independence: getPluginLayout('independence').map((pluginName) => getPlugin(pluginName))
+ topNavLists: getPluginsByLayout(PLUGIN_POSITION.leftTop).map((pluginName) => getPlugin(pluginName)),
+ bottomNavLists: getPluginsByLayout(PLUGIN_POSITION.leftBottom).map((pluginName) => getPlugin(pluginName)),
+ independence: getPluginsByLayout(PLUGIN_POSITION.independence).map((pluginName) => getPlugin(pluginName))
})
const doCompleted = () => {
diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
index c9a28950f..ee6738de5 100644
--- a/packages/design-core/src/DesignSettings.vue
+++ b/packages/design-core/src/DesignSettings.vue
@@ -49,7 +49,7 @@ import { computed, ref, toRefs, watch, reactive } from 'vue'
import { Popover, Tooltip } from '@opentiny/vue'
import { Tabs, TabItem } from '@opentiny/vue'
import { useLayout } from '@opentiny/tiny-engine-controller'
-import { getPlugin } from '../config/addons.js'
+import { getPlugin } from '../config/plugin.js'
export default {
components: {
@@ -69,14 +69,15 @@ export default {
const iconComponents = {}
const { renderPanel } = toRefs(props)
const {
+ PLUGIN_POSITION,
rightFixedPanelsStorage,
registerPluginApi,
changeRightFixedPanels,
- getPluginLayout,
+ getPluginsByLayout,
layoutState: { settings: settingsState }
} = useLayout()
- const plugins = getPluginLayout('all').map((pluginName) => getPlugin(pluginName))
+ const plugins = getPluginsByLayout().map((pluginName) => getPlugin(pluginName))
plugins.forEach(({ id, component, api, icon }) => {
components[id] = component
iconComponents[id] = icon
@@ -91,7 +92,7 @@ export default {
const showMask = ref(true)
const state = reactive({
- leftList: getPluginLayout('rightTop').map((pluginName) => getPlugin(pluginName))
+ leftList: getPluginsByLayout(PLUGIN_POSITION.rightTop).map((pluginName) => getPlugin(pluginName))
})
const setRender = (curId) => {
diff --git a/packages/plugins/block/index.js b/packages/plugins/block/index.js
index 242858168..c2b8699c4 100644
--- a/packages/plugins/block/index.js
+++ b/packages/plugins/block/index.js
@@ -17,7 +17,7 @@ export default {
title: '区块管理',
icon: 'plugin-icon-symbol',
align: 'top',
- option: {
+ options: {
align: 'leftTop'
},
api,
diff --git a/packages/plugins/bridge/index.js b/packages/plugins/bridge/index.js
index 1e4fdcaba..ffba08181 100644
--- a/packages/plugins/bridge/index.js
+++ b/packages/plugins/bridge/index.js
@@ -17,7 +17,7 @@ export default {
title: '资源管理',
icon: 'plugin-icon-sresources',
align: 'top',
- option: {
+ options: {
align: 'leftTop'
},
component
diff --git a/packages/plugins/data/index.js b/packages/plugins/data/index.js
index 80faedd51..c4754cc1a 100644
--- a/packages/plugins/data/index.js
+++ b/packages/plugins/data/index.js
@@ -17,7 +17,7 @@ export default {
title: '状态管理',
icon: 'plugin-icon-var',
align: 'top',
- option: {
+ options: {
align: 'leftTop'
},
component
diff --git a/packages/plugins/datasource/index.js b/packages/plugins/datasource/index.js
index f99738eab..f72422035 100644
--- a/packages/plugins/datasource/index.js
+++ b/packages/plugins/datasource/index.js
@@ -18,7 +18,7 @@ export default {
title: '数据源',
icon: 'plugin-icon-data',
align: 'top',
- option: {
+ options: {
align: 'leftTop'
},
component
diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
index a217faefb..e8c76e342 100644
--- a/packages/plugins/page/index.js
+++ b/packages/plugins/page/index.js
@@ -17,7 +17,7 @@ export default {
title: '页面管理',
icon: 'plugin-icon-page',
align: 'top',
- option: {
+ options: {
align: 'leftTop'
},
api,
diff --git a/packages/plugins/tree/index.js b/packages/plugins/tree/index.js
index 991369582..aca5dcd62 100644
--- a/packages/plugins/tree/index.js
+++ b/packages/plugins/tree/index.js
@@ -17,7 +17,7 @@ export default {
title: '大纲树',
icon: 'plugin-icon-tree',
align: 'top',
- option: {
+ options: {
align: 'leftTop'
},
component