refactor: The plugin fixed state is persisted using vueuse.

opentiny · Aug 14, 2024 · 78903ca · 78903ca
1 parent b28884b
commit 78903ca
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 43 deletions.
diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
@@ -97,7 +97,19 @@ const layoutState = reactive({
   },
   pageStatus: ''
 })
+const leftFixedPanelsStorage = useStorage('leftFixedPanels', layoutState.plugins.fixedPanels)
+const rightFixedPanelsStorage = useStorage('rightFixedPanels', layoutState.settings.fixedPanels)
 
+const changeLeftFixedPanels = (pluginName) => {
+  leftFixedPanelsStorage.value = leftFixedPanelsStorage.value?.includes(pluginName)
+    ? leftFixedPanelsStorage.value?.filter((item) => item !== pluginName)
+    : [...leftFixedPanelsStorage.value, pluginName]
+}
+const changeRightFixedPanels = (pluginName) => {
+  rightFixedPanelsStorage.value = rightFixedPanelsStorage.value?.includes(pluginName)
+    ? rightFixedPanelsStorage.value?.filter((item) => item !== pluginName)
+    : [...rightFixedPanelsStorage.value, pluginName]
+}
 const registerPluginApi = (api) => {
   Object.assign(layoutState.plugins.api, api)
 }
@@ -180,6 +192,10 @@ export default () => {
     pluginState,
     isEmptyPage,
     getPluginWidth,
-    changePluginWidth
+    changePluginWidth,
+    leftFixedPanelsStorage,
+    rightFixedPanelsStorage,
+    changeLeftFixedPanels,
+    changeRightFixedPanels
   }
 }
diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
@@ -79,14 +79,14 @@
     <div
       v-show="renderPanel && components[renderPanel]"
       id="tiny-engine-left-panel"
-      :class="[renderPanel, { 'is-fixed': pluginsState.fixedPanels.includes(renderPanel) }]"
+      :class="[renderPanel, { 'is-fixed': leftFixedPanelsStorage.includes(renderPanel) }]"
     >
       <div class="left-panel-wrap">
         <keep-alive>
           <component
             :is="components[renderPanel]"
             ref="pluginRef"
-            :fixed-panels="pluginsState.fixedPanels"
+            :fixed-panels="leftFixedPanelsStorage"
             @close="close"
             @fixPanel="fixPanel"
           ></component>
@@ -134,11 +134,7 @@ export default {
     const { isTemporaryPage } = usePage()
     const HELP_PLUGIN_ID = 'EditorHelp'
 
-    const {
-      pluginState,
-      registerPluginApi,
-      layoutState: { plugins: pluginsState }
-    } = useLayout()
+    const { pluginState, registerPluginApi, changeLeftFixedPanels, leftFixedPanelsStorage } = useLayout()
 
     Addons.plugins.forEach(({ id, component, api, icon }) => {
       components[id] = component
@@ -209,9 +205,7 @@ export default {
 
     //切换面板状态
     const fixPanel = (pluginName) => {
-      pluginsState.fixedPanels = pluginsState.fixedPanels?.includes(pluginName)
-        ? pluginsState.fixedPanels?.filter((item) => item !== pluginName)
-        : [...pluginsState.fixedPanels, pluginName]
+      changeLeftFixedPanels(pluginName)
     }
 
     return {
@@ -223,12 +217,12 @@ export default {
       robotComponent,
       close,
       fixPanel,
-      pluginsState,
       components,
       iconComponents,
       completed,
       doCompleted,
-      pluginState
+      pluginState,
+      leftFixedPanelsStorage
     }
   }
 }

diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
@@ -1,45 +1,46 @@
 <!-- 右侧插件栏-->
 <template>
+  <!-- 插件面板 -->
   <div>
-    <!-- 插件面板 -->
     <div
       v-show="renderPanel && components[renderPanel]"
       id="tiny-engine-right-panel"
-      :class="[renderPanel, { 'is-fixed': settingsState.fixedPanels.includes(renderPanel) }]"
+      :class="[renderPanel, { 'is-fixed': rightFixedPanelsStorage.includes(renderPanel) }]"
     >
       <div class="right-panel-wrap">
         <component
           :is="components[renderPanel]"
-          :fixed-panels="settingsState.fixedPanels"
+          :fixed-panels="rightFixedPanelsStorage"
           @close="close"
           @fixPanel="fixPanel"
         ></component>
         <div v-show="activating" class="active2" />
       </div>
     </div>
-    <div id="tiny-engine-nav-panel">
-      <!-- 图标菜单 -->
-      <ul class="nav-panel-lists">
-        <li
-          v-for="(item, index) in state.leftList"
-          :key="index"
-          :class="{
-            'list-item': true,
-            'first-item': index === 0,
-            active: item.id === renderPanel
-          }"
-          :title="item.title"
-          @click="clickMenu({ item, index })"
-        >
-          <div>
-            <span class="item-icon">
-              <svg-icon v-if="iconComponents[item.id]" :name="iconComponents[item.id]" class="panel-icon"></svg-icon>
-              <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
+  </div>
+
+  <div id="tiny-engine-nav-panel">
+    <!-- 图标菜单 -->
+    <ul class="nav-panel-lists">
+      <li
+        v-for="(item, index) in state.leftList"
+        :key="index"
+        :class="{
+          'list-item': true,
+          'first-item': index === 0,
+          active: item.id === renderPanel
+        }"
+        :title="item.title"
+        @click="clickMenu({ item, index })"
+      >
+        <div>
+          <span class="item-icon">
+            <svg-icon v-if="iconComponents[item.id]" :name="iconComponents[item.id]" class="panel-icon"></svg-icon>
+            <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
+          </span>
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -66,6 +67,8 @@ export default {
   setup(props) {
     const { renderPanel } = toRefs(props)
     const {
+      rightFixedPanelsStorage,
+      changeRightFixedPanels,
       layoutState: { settings: settingsState }
     } = useLayout()
     const settings = Addons && Addons.settings
@@ -106,9 +109,7 @@ export default {
 
     //切换面板状态
     const fixPanel = (pluginName) => {
-      settingsState.fixedPanels = settingsState.fixedPanels?.includes(pluginName)
-        ? settingsState.fixedPanels?.filter((item) => item !== pluginName)
-        : [...settingsState.fixedPanels, pluginName]
+      changeRightFixedPanels(pluginName)
     }
 
     return {
@@ -121,7 +122,8 @@ export default {
       iconComponents,
       clickMenu,
       close,
-      fixPanel
+      fixPanel,
+      rightFixedPanelsStorage
     }
   }
 }