refactor: The plugin fixed state is persisted using vueuse. #738
Conversation
WalkthroughThe recent changes enhance the management of fixed panels in the layout by introducing dedicated storage variables for the left and right fixed panels. This refactoring streamlines state management through a modular approach, encapsulating panel toggling logic in specific functions. As a result, the design components become more maintainable and responsive to state changes, improving overall performance and clarity. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant Layout
participant Storage
User->>UI: Toggle Left Fixed Panel
UI->>Layout: changeLeftFixedPanels(pluginName)
Layout->>Storage: Update leftFixedPanelsStorage
Storage-->>Layout: State Updated
Layout-->>UI: Refresh UI with new state
UI-->>User: Display updated panel state
sequenceDiagram
participant User
participant UI
participant Layout
participant Storage
User->>UI: Toggle Right Fixed Panel
UI->>Layout: changeRightFixedPanels(pluginName)
Layout->>Storage: Update rightFixedPanelsStorage
Storage-->>Layout: State Updated
Layout-->>UI: Refresh UI with new state
UI-->>User: Display updated panel state
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- packages/controller/src/useLayout.js (2 hunks)
- packages/design-core/src/DesignPlugins.vue (4 hunks)
- packages/design-core/src/DesignSettings.vue (4 hunks)
Additional comments not posted (12)
packages/controller/src/useLayout.js (4)
100-101: Persisting fixed panels state withuseStorage.The introduction of
leftFixedPanelsStorageandrightFixedPanelsStorageusinguseStorageis a good approach for persisting state across sessions. Ensure that the initial values set inlayoutStateare appropriate and that any changes to these states are correctly reflected in the UI.
103-107: Encapsulate logic for changing left fixed panels.The
changeLeftFixedPanelsfunction effectively toggles the presence of apluginNameinleftFixedPanelsStorage. This encapsulation improves code modularity and readability.
108-112: Encapsulate logic for changing right fixed panels.Similarly,
changeRightFixedPanelsencapsulates the logic for toggling thepluginNameinrightFixedPanelsStorage. This approach is consistent with the left panel management and enhances maintainability.
196-199: Export new storage and change functions.The export of
leftFixedPanelsStorage,rightFixedPanelsStorage,changeLeftFixedPanels, andchangeRightFixedPanelsmakes these functionalities available to other parts of the application, promoting reuse and consistency in state management.packages/design-core/src/DesignSettings.vue (4)
8-13: Update class and prop bindings to userightFixedPanelsStorage.The use of
rightFixedPanelsStoragein the:classand:fixed-panelsbindings ensures that the component reflects the persisted state of fixed panels. This change centralizes the state management and improves consistency.
70-71: DestructurerightFixedPanelsStorageandchangeRightFixedPanels.Destructuring these from
useLayoutaligns with the new state management strategy, ensuring that the component uses the centralized state logic.
112-112: UsechangeRightFixedPanelsfor toggling panel state.The
fixPanelmethod now useschangeRightFixedPanels, centralizing the logic for toggling the fixed state. This improves maintainability by reducing inline logic.
125-126: ReturnfixPanelandrightFixedPanelsStorage.Returning these from the setup function makes them available to the template, ensuring that the component can interact with the new state management logic.
packages/design-core/src/DesignPlugins.vue (4)
82-89: Update class and prop bindings to useleftFixedPanelsStorage.The update to use
leftFixedPanelsStoragein the:classand:fixed-panelsbindings ensures that the component reflects the persisted state of left fixed panels. This centralizes the state management and improves consistency.
137-137: DestructurechangeLeftFixedPanelsandleftFixedPanelsStorage.Destructuring these from
useLayoutaligns with the new state management strategy, ensuring that the component uses the centralized state logic.
208-208: UsechangeLeftFixedPanelsfor toggling panel state.The
fixPanelmethod now useschangeLeftFixedPanels, centralizing the logic for toggling the fixed state. This improves maintainability by reducing inline logic.
224-225: ReturnpluginStateandleftFixedPanelsStorage.Returning these from the setup function ensures they are available to the template, allowing interaction with the new state management logic.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/controller/src/useLayout.js (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/controller/src/useLayout.js
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
refactor: The plugin fixed state is persisted using vueuse.
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes
Refactor