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影响
opentiny · Nov 28, 2024 · 49f68c3 · 49f68c3
1 parent f1b3b50
commit 49f68c3
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 36 deletions.
diff --git a/packages/design-core/assets/fixed-solid.svg b/packages/design-core/assets/fixed-solid.svg
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
@@ -74,8 +74,11 @@
 <script>
 import { reactive, ref, watch } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
-import { useLayout, usePage, META_APP } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, usePage, useModal, META_APP } from '@opentiny/tiny-engine-meta-register'
 import { PublicIcon } from '@opentiny/tiny-engine-common'
+import { constants } from '@opentiny/tiny-engine-utils'
+
+const { STORAGE_KEY_FIXED_PANELS } = constants
 
 export default {
   components: {
@@ -98,6 +101,7 @@ export default {
     const iconComponents = {}
     const pluginRef = ref(null)
     const { isTemporaryPage } = usePage()
+    const { message } = useModal()
     const pluginState = useLayout().getPluginState()
 
     props.plugins.forEach(({ id, entry, icon }) => {
@@ -154,8 +158,30 @@ export default {
       pluginState.fixedPanels = pluginState.fixedPanels?.includes(pluginName)
         ? pluginState.fixedPanels?.filter((item) => item !== pluginName)
         : [...pluginState.fixedPanels, pluginName]
+
+      try {
+        localStorage.setItem(STORAGE_KEY_FIXED_PANELS, JSON.stringify(pluginState.fixedPanels))
+      } catch (error) {
+        message({ message: `'存储固定面板数据失败:'${error}`, status: 'error' })
+      }
     }
 
+    const restoreFixedPanels = () => {
+      try {
+        const storedPanels = localStorage.getItem(STORAGE_KEY_FIXED_PANELS)
+        pluginState.fixedPanels = storedPanels ? JSON.parse(storedPanels) : []
+
+        if (!Array.isArray(pluginState.fixedPanels)) {
+          pluginState.fixedPanels = []
+        }
+      } catch (error) {
+        message({ message: `'读取固定面板数据失败:'${error}`, status: 'error' })
+        pluginState.fixedPanels = []
+      }
+    }
+
+    restoreFixedPanels()
+
     return {
       state,
       clickMenu,

diff --git a/packages/plugins/materials/src/components/header/Main.vue b/packages/plugins/materials/src/components/header/Main.vue
@@ -1,14 +1,14 @@
 <template>
   <svg-button
     class="item icon-sidebar"
-    :class="[fixedPanels?.includes(PLUGIN_NAME.Materials) && 'active']"
-    name="fixed"
-    :tips="!fixedPanels?.includes(PLUGIN_NAME.Materials) ? '固定面板' : '解除固定面板'"
-    @click="$emit('fixPanel', PLUGIN_NAME.Materials)"
+    :name="panelFixed ? 'fixed-solid' : 'fixed'"
+    :tips="panelFixed ? '解除固定面板' : '固定面板'"
+    @click="$emit('fix-panel', PLUGIN_NAME.Materials)"
   ></svg-button>
 </template>
 
 <script>
+import { computed } from 'vue'
 import { SvgButton } from '@opentiny/tiny-engine-common'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
 
@@ -22,11 +22,13 @@ export default {
       type: Array
     }
   },
-  setup() {
+  setup(props) {
     const { PLUGIN_NAME } = useLayout()
+    const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.Materials))
 
     return {
-      PLUGIN_NAME
+      PLUGIN_NAME,
+      panelFixed
     }
   }
 }

diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -1,7 +1,11 @@
 <template>
   <plugin-panel :title="shortcut ? '' : title" @close="$emit('close')">
     <template #header>
-      <component :is="headerComponent" :fixedPanels="fixedPanels"></component>
+      <component
+        :is="headerComponent"
+        :fixedPanels="fixedPanels"
+        @fix-panel="(id) => $emit('fix-panel', id)"
+      ></component>
     </template>
     <template #content>
       <tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" v-if="!onlyShowDefault">

diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
@@ -1,33 +1,11 @@
 <template>
   <plugin-panel class="outlinebox" title="大纲树" @close="$emit('close')">
     <template #header>
-      <!-- TODO 功能待实现 -->
-      <!-- <tiny-tooltip class="item" effect="dark" :content="state.expandAll ? '收缩' : '展开'" placement="bottom">
-        <span class="icon-ex" @click="toggleTree">
-          <svg-icon v-if="state.expandAll" name="expand"></svg-icon>
-          <svg-icon v-else name="collapse"></svg-icon>
-        </span>
-      </tiny-tooltip> -->
-      <!-- TODO: 保留备份，确认svg-button写法无问题后删除 -->
-      <!-- <tiny-tooltip
-        class="item"
-        effect="dark"
-        :content="!fixedPanels?.includes(PLUGIN_NAME.OutlineTree) ? '固定面板' : '解除固定面板'"
-        placement="bottom"
-      >
-        <span
-          :class="['icon-sidebar', fixedPanels?.includes(PLUGIN_NAME.OutlineTree) && 'active']"
-          @click="$emit('fixPanel', PLUGIN_NAME.OutlineTree)"
-        >
-          <svg-icon name="fixed"></svg-icon>
-        </span>
-      </tiny-tooltip> -->
       <svg-button
         class="item icon-sidebar"
-        :class="[fixedPanels?.includes(PLUGIN_NAME.OutlineTree) && 'active']"
-        :tips="!fixedPanels?.includes(PLUGIN_NAME.OutlineTree) ? '固定面板' : '解除固定面板'"
-        @click="$emit('fixPanel', PLUGIN_NAME.OutlineTree)"
-        name="fixed"
+        :name="panelFixed ? 'fixed-solid' : 'fixed'"
+        :tips="panelFixed ? '解除固定面板' : '固定面板'"
+        @click="$emit('fix-panel', PLUGIN_NAME.OutlineTree)"
       ></svg-button>
     </template>
     <template #content>
@@ -76,7 +54,6 @@ import { Grid, GridColumn } from '@opentiny/vue'
 import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { IconChevronDown, iconEyeopen, iconEyeclose } from '@opentiny/vue-icon'
-// import Sortable from 'sortablejs'
 import { useCanvas, useMaterial, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
@@ -97,9 +74,12 @@ export default {
     }
   },
   emits: ['close', 'fix-panel'],
-  setup() {
+  setup(props) {
     const { pageState, getInstance } = useCanvas()
     const { getMaterial } = useMaterial()
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
 
     const filterSchema = (data) => {
       const translateChild = (data) => {
@@ -121,7 +101,6 @@ export default {
 
       return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body' }]
     }
-    const { PLUGIN_NAME } = useLayout()
     const state = reactive({
       pageSchema: [],
       expandAll: true,
@@ -285,6 +264,7 @@ export default {
       })
 
     return {
+      panelFixed,
       checkElement,
       mouseover,
       mouseleave,

diff --git a/packages/utils/src/constants/index.js b/packages/utils/src/constants/index.js
@@ -93,6 +93,8 @@ export const BROADCAST_CHANNEL = {
   SchemaLength: `schema-length-${CHANNEL_UID}`
 }
 
+export const STORAGE_KEY_FIXED_PANELS = `tiny-engine-fixed-panels-${CHANNEL_UID}`
+
 export const TYPES = {
   ErrorType: 'error',
   ObjectType: 'object',