Skip to content

Commit 49f68c3

Browse files
yy-wowyy-wow
authored
fix: fix materials panel (#909)
* fix: fix materials panel * fix: replace fixed icon * fix: persistent fixed panels * fix: review * fix: review * fix: review * fix: 消除同源设计器storage影响
1 parent f1b3b50 commit 49f68c3

File tree

6 files changed

+59
-36
lines changed

6 files changed

+59
-36
lines changed

‎packages/design-core/assets/fixed-solid.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎packages/layout/src/DesignPlugins.vue‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,11 @@
7474
<script>
7575
import { reactive, ref, watch } from 'vue'
7676
import { Popover, Tooltip } from '@opentiny/vue'
77-
import { useLayout, usePage, META_APP } from '@opentiny/tiny-engine-meta-register'
77+
import { useLayout, usePage, useModal, META_APP } from '@opentiny/tiny-engine-meta-register'
7878
import { PublicIcon } from '@opentiny/tiny-engine-common'
79+
import { constants } from '@opentiny/tiny-engine-utils'
80+
81+
const { STORAGE_KEY_FIXED_PANELS } = constants
7982
8083
export default {
8184
components: {
@@ -98,6 +101,7 @@ export default {
98101
const iconComponents = {}
99102
const pluginRef = ref(null)
100103
const { isTemporaryPage } = usePage()
104+
const { message } = useModal()
101105
const pluginState = useLayout().getPluginState()
102106
103107
props.plugins.forEach(({ id, entry, icon }) => {
@@ -154,8 +158,30 @@ export default {
154158
pluginState.fixedPanels = pluginState.fixedPanels?.includes(pluginName)
155159
? pluginState.fixedPanels?.filter((item) => item !== pluginName)
156160
: [...pluginState.fixedPanels, pluginName]
161+
162+
try {
163+
localStorage.setItem(STORAGE_KEY_FIXED_PANELS, JSON.stringify(pluginState.fixedPanels))
164+
} catch (error) {
165+
message({ message: `'存储固定面板数据失败:'${error}`, status: 'error' })
166+
}
157167
}
158168
169+
const restoreFixedPanels = () => {
170+
try {
171+
const storedPanels = localStorage.getItem(STORAGE_KEY_FIXED_PANELS)
172+
pluginState.fixedPanels = storedPanels ? JSON.parse(storedPanels) : []
173+
174+
if (!Array.isArray(pluginState.fixedPanels)) {
175+
pluginState.fixedPanels = []
176+
}
177+
} catch (error) {
178+
message({ message: `'读取固定面板数据失败:'${error}`, status: 'error' })
179+
pluginState.fixedPanels = []
180+
}
181+
}
182+
183+
restoreFixedPanels()
184+
159185
return {
160186
state,
161187
clickMenu,

‎packages/plugins/materials/src/components/header/Main.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<svg-button
33
class="item icon-sidebar"
4-
:class="[fixedPanels?.includes(PLUGIN_NAME.Materials) && 'active']"
5-
name="fixed"
6-
:tips="!fixedPanels?.includes(PLUGIN_NAME.Materials) ? '固定面板' : '解除固定面板'"
7-
@click="$emit('fixPanel', PLUGIN_NAME.Materials)"
4+
:name="panelFixed ? 'fixed-solid' : 'fixed'"
5+
:tips="panelFixed ? '解除固定面板' : '固定面板'"
6+
@click="$emit('fix-panel', PLUGIN_NAME.Materials)"
87
></svg-button>
98
</template>
109

1110
<script>
11+
import { computed } from 'vue'
1212
import { SvgButton } from '@opentiny/tiny-engine-common'
1313
import { useLayout } from '@opentiny/tiny-engine-meta-register'
1414
@@ -22,11 +22,13 @@ export default {
2222
type: Array
2323
}
2424
},
25-
setup() {
25+
setup(props) {
2626
const { PLUGIN_NAME } = useLayout()
27+
const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.Materials))
2728
2829
return {
29-
PLUGIN_NAME
30+
PLUGIN_NAME,
31+
panelFixed
3032
}
3133
}
3234
}

‎packages/plugins/materials/src/meta/layout/src/Main.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<template>
22
<plugin-panel :title="shortcut ? '' : title" @close="$emit('close')">
33
<template #header>
4-
<component :is="headerComponent" :fixedPanels="fixedPanels"></component>
4+
<component
5+
:is="headerComponent"
6+
:fixedPanels="fixedPanels"
7+
@fix-panel="(id) => $emit('fix-panel', id)"
8+
></component>
59
</template>
610
<template #content>
711
<tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" v-if="!onlyShowDefault">

‎packages/plugins/tree/src/Main.vue‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,11 @@
11
<template>
22
<plugin-panel class="outlinebox" title="大纲树" @close="$emit('close')">
33
<template #header>
4-
<!-- TODO 功能待实现 -->
5-
<!-- <tiny-tooltip class="item" effect="dark" :content="state.expandAll ? '收缩' : '展开'" placement="bottom">
6-
<span class="icon-ex" @click="toggleTree">
7-
<svg-icon v-if="state.expandAll" name="expand"></svg-icon>
8-
<svg-icon v-else name="collapse"></svg-icon>
9-
</span>
10-
</tiny-tooltip> -->
11-
<!-- TODO: 保留备份，确认svg-button写法无问题后删除 -->
12-
<!-- <tiny-tooltip
13-
class="item"
14-
effect="dark"
15-
:content="!fixedPanels?.includes(PLUGIN_NAME.OutlineTree) ? '固定面板' : '解除固定面板'"
16-
placement="bottom"
17-
>
18-
<span
19-
:class="['icon-sidebar', fixedPanels?.includes(PLUGIN_NAME.OutlineTree) && 'active']"
20-
@click="$emit('fixPanel', PLUGIN_NAME.OutlineTree)"
21-
>
22-
<svg-icon name="fixed"></svg-icon>
23-
</span>
24-
</tiny-tooltip> -->
254
<svg-button
265
class="item icon-sidebar"
27-
:class="[fixedPanels?.includes(PLUGIN_NAME.OutlineTree) && 'active']"
28-
:tips="!fixedPanels?.includes(PLUGIN_NAME.OutlineTree) ? '固定面板' : '解除固定面板'"
29-
@click="$emit('fixPanel', PLUGIN_NAME.OutlineTree)"
30-
name="fixed"
6+
:name="panelFixed ? 'fixed-solid' : 'fixed'"
7+
:tips="panelFixed ? '解除固定面板' : '固定面板'"
8+
@click="$emit('fix-panel', PLUGIN_NAME.OutlineTree)"
319
></svg-button>
3210
</template>
3311
<template #content>
@@ -76,7 +54,6 @@ import { Grid, GridColumn } from '@opentiny/vue'
7654
import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
7755
import { constants } from '@opentiny/tiny-engine-utils'
7856
import { IconChevronDown, iconEyeopen, iconEyeclose } from '@opentiny/vue-icon'
79-
// import Sortable from 'sortablejs'
8057
import { useCanvas, useMaterial, useLayout } from '@opentiny/tiny-engine-meta-register'
8158
import { extend } from '@opentiny/vue-renderless/common/object'
8259
import { typeOf } from '@opentiny/vue-renderless/common/type'
@@ -97,9 +74,12 @@ export default {
9774
}
9875
},
9976
emits: ['close', 'fix-panel'],
100-
setup() {
77+
setup(props) {
10178
const { pageState, getInstance } = useCanvas()
10279
const { getMaterial } = useMaterial()
80+
const { PLUGIN_NAME } = useLayout()
81+
82+
const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
10383
10484
const filterSchema = (data) => {
10585
const translateChild = (data) => {
@@ -121,7 +101,6 @@ export default {
121101
122102
return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body' }]
123103
}
124-
const { PLUGIN_NAME } = useLayout()
125104
const state = reactive({
126105
pageSchema: [],
127106
expandAll: true,
@@ -285,6 +264,7 @@ export default {
285264
})
286265
287266
return {
267+
panelFixed,
288268
checkElement,
289269
mouseover,
290270
mouseleave,

‎packages/utils/src/constants/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ export const BROADCAST_CHANNEL = {
9393
SchemaLength: `schema-length-${CHANNEL_UID}`
9494
}
9595

96+
export const STORAGE_KEY_FIXED_PANELS = `tiny-engine-fixed-panels-${CHANNEL_UID}`
97+
9698
export const TYPES = {
9799
ErrorType: 'error',
98100
ObjectType: 'object',

0 commit comments

Comments
 (0)