feat: plugin flexible layout #1167
Conversation
WalkthroughThe changes enhance UI components across multiple packages by introducing new layout and interaction features. Key modifications include a conditional CSS class based on the drag bar state in Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant VDD as VueDraggableNext
participant DP as DesignPlugins
participant UL as useLayout
U->>VDD: Drag plugin item
VDD->>DP: Trigger @end event
DP->>UL: Call changePluginLayout
UL-->>DP: Update layout state
DP-->>U: Reflect new plugin order
sequenceDiagram
participant U as User
participant PRM as PluginRightMenu
participant E as Event System
U->>PRM: Right-click on plugin
PRM->>PRM: Execute showContextMenu (update state)
PRM-->>U: Display context menu options
U->>PRM: Click outside
PRM->>PRM: Execute hideContextMenu (update state)
PRM-->>U: Hide context menu
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ERR_PNPM_OPTIONAL_DEPS_REQUIRE_PROD_DEPS Optional dependencies cannot be installed without production dependencies 🪧 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 using PR comments)
Other keywords and placeholders
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: 2
🔭 Outside diff range comments (2)
packages/plugins/bridge/src/Main.vue (2)
58-58:⚠️ Potential issueFix logical error in refreshList function
The current implementation uses equality comparison where it likely should be calling a method.
const refreshList = (type) => { - type == utilsRef.value.refresh(type) + type && utilsRef.value.refresh(type) }
62-62:⚠️ Potential issueFix logical error in addResource function
Similar to the refreshList function, this appears to have a logical error with the equality comparison.
const addResource = (type) => { - activedName.value == utilsRef.value.add(type) + utilsRef.value.add(type) }
🧹 Nitpick comments (32)
packages/plugins/datasource/meta.js (1)
5-5: Alignment property updated for consistency across pluginsThe change from
'top'to'leftTop'aligns with the PR's objective to enhance plugin panel functionality and standardize positioning properties across all plugins.This change is part of a broader standardization effort that introduces more flexible plugin positioning. It enables consistent handling of plugin alignment, which will work in conjunction with the new drag-and-drop functionality and plugin panel width adjustment features described in the PR objectives.
packages/settings/events/index.js (1)
23-23: Improved options structure for better modularity.This change flattens the options structure by merging
commonEventswithmetaData.optionsusingObject.assign()instead of nestingcommonEventswithin an object. This approach simplifies access to the configuration and aligns with the plugin panel layout enhancements.Consider using the spread operator for improved readability:
- options: Object.assign({}, commonEvents, metaData.options), + options: { ...commonEvents, ...metaData.options },packages/plugins/materials/src/meta/layout/src/Main.vue (1)
2-7: Plugin panel enhancement with fixed-name and fixedPanels propsThe addition of
:fixed-name="PLUGIN_NAME.Materials"and:fixedPanels="fixedPanels"props to the plugin-panel component improves the panel's integration with the layout system. These props enable the panel to maintain consistent state and positioning within the flexible layout system.This integration with the layout system via fixed-name is a good architectural decision as it creates a consistent identification mechanism across all plugin panels, making them addressable within the layout management system.
packages/plugins/datasource/src/DataSourceForm.vue (1)
100-102: Added layout integration through useLayout hookThe extraction of
PLUGIN_NAMEandgetPluginByLayoutfrom useLayout() and the creation of a computedalignproperty enable dynamic positioning of the plugin panel based on the current layout state.This approach to determining alignment through a computed property is excellent as it ensures the panel's position reactively updates when the layout changes.
packages/plugins/page/src/PageFolderSetting.vue (1)
93-95: Implemented layout integration through useLayout hookThe extraction of
PLUGIN_NAMEandgetPluginByLayoutfrom useLayout() and the creation of a computedalignproperty enable dynamic positioning of the plugin panel based on the layout state.Using a computed property for alignment ensures the panel will automatically reposition itself when layout changes occur, creating a more responsive UI.
packages/plugins/datasource/src/DataSourceRecordList.vue (1)
6-7: Well-structured plugin enhancement with proper layout integration.The addition of
:fixed-nameand:alignprops to the plugin-setting component improves layout management by allowing the component to be positioned according to the layout configuration.Consider adding a documentation comment briefly explaining what values
aligncan have and how it affects the component rendering. For example:+// align: Determines the position of the plugin panel in the layout ('left' | 'right') const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))packages/plugins/tree/src/Main.vue (2)
2-8: Streamlined plugin panel implementation.The plugin-panel component has been refactored to use a more declarative approach with props instead of template elements. This simplifies the component structure and makes it easier to manage.
The class "outlinebox" is very specific - consider using a more generic name like "plugin-panel-container" to improve code readability and maintainability.
59-59: Improved component state management with provide/inject pattern.The setup function now accepts
emitand uses the provide/inject pattern to share the panel state with child components. This is a more robust approach to state management that follows Vue.js best practices.This pattern of providing the emit function via the
panelStateobject is excellent for component communication. Consider adopting this pattern in other plugin components for consistency and to facilitate easier testing.Also applies to: 66-69
packages/plugins/state/src/Main.vue (2)
4-5: Consider making plugin name string a constantThe string "状态管理" (State Management) is directly embedded in the template. For internationalization purposes, this should ideally be extracted to a constant or i18n resource.
- <plugin-panel - title="状态管理" + <plugin-panel + :title="i18n.stateManagement"And in your script section:
// Add to setup() return statement const i18n = { stateManagement: '状态管理' }
147-155: Add error handling forgetPluginWidthandgetPluginByLayoutThe computed properties
firstPanelOffsetandalignStyledon't handle the case where plugin width or layout might be undefined.const firstPanelOffset = computed(() => { - return getPluginWidth(PLUGIN_NAME.State) + return getPluginWidth(PLUGIN_NAME.State) || 0 }) const alignStyle = computed(() => { const panelAlign = getPluginByLayout(PLUGIN_NAME.State) - const align = panelAlign.includes('left') ? 'left' : 'right' + const align = panelAlign && panelAlign.includes('left') ? 'left' : 'right' return `${align}: ${firstPanelOffset.value}px` })packages/common/component/PluginRightMenu.vue (2)
7-7: Consider localizing or externalizing the text.The
<li>element uses the hard-coded text "隐藏". If your application needs to support multiple languages or facilitate user-defined labels in the future, you might consider abstracting this string into a translation file or localization system.
56-60: Constrain the context menu’s X-position to the viewport.Subtracting the
contextMenuWidth(130px) fromxcould shift the context menu partially off-screen if the click occurs close to the screen’s left edge. To improve usability, consider clamping the resultingcontextMenu.xto a non-negative value or dynamically adjusting it based on viewport width.packages/layout/src/DesignSettings.vue (1)
179-188: Review dynamic panel height calculation.Setting the right panel height with
calc(100vh - var(--base-top-panel-height))and therightoffset withvar(--base-nav-panel-width)is a straightforward approach. However, if you anticipate dynamic layout changes (like responsive breakpoints or collapsible sidebars), ensure these custom properties always reflect accurate values.packages/plugins/schema/src/Main.vue (3)
2-9: Refactor for clarity in<plugin-panel>usage.Using
<plugin-panel>with@close="close"and:fixedPanels="fixedPanels"is clear, but consider elaborating in comments or documentation howfixedPanelsintegrates at runtime, especially if new developers need to understand or customize panel behavior quickly.
75-81: Expose or document thepanelStateinjection.You provide
panelStateviaprovide, containing{ emitEvent: emit }. If other components rely on this injection, consider documenting its structure and usage so that future maintainers understand how to consume or extendpanelState.
187-239: Check performance with larger schemas.The editor’s value is stored in a reactive
state.pageData, which can be large if users are handling extensive JSON schemas. If performance becomes an issue, consider strategies such as debouncing updates, using computed properties for partial data, or offloading large text manipulations outside the main reactive pipeline.packages/layout/src/Main.vue (3)
9-16: Ensure consistent panel toggling logic.The new
v-if="leftMenuShownStorage"condition and additional props (ref="left",:plugin-list="pluginList",@changeLeftAlign) appear correct for rendering and possible alignment updates. However, confirm that togglingleftMenuShownStoragedoesn't cause unintended layout shifts or re-renders, especially if the user toggles it repeatedly.
74-75: Refs for child component interaction.Defining
const left = ref(null)andconst right = ref(null)is a suitable method for capturing child component references. Ensure the child components properly expose their methods (e.g.,changeAlign) to avoid runtime errors if refs are undefined.
84-119: Local storage usage & plugin ID uniqueness.Merging plugins and settings into
pluginListand storing details inlocalStorageis fine. However, be aware of:
• Potential collisions ifitem.idis not guaranteed unique.
• SSR scenarios wherelocalStorageis not available.
Otherwise functionally sound.packages/layout/src/DesignPlugins.vue (4)
23-25: Context menu and plugin visibility.Your
@contextmenu.prevent="showContextMenu(...)"andv-if="getPluginShown(item.id)"calls look correct, providing per-item visibility checks. Just ensure the user can't lose track of essential plugins ifgetPluginShownhides them inadvertently.
69-88: Secondary panel toggling states.
<div :class="{ 'not-selected': getMoveDragBarState() }">effectively visually disables interaction while dragging. Consider adding transitions or ARIA states if needed for accessibility.
90-95: PluginRightMenu integration.Good approach for externalizing context menu logic. Using
:list="[...state.topNavLists, ...state.bottomNavLists]"merges the two nav arrays. Test thoroughly for large plugin lists to ensure performance remains acceptable.
149-155: Context menu toggle logic.
showContextMenu(event.clientX, event.clientY, ...)is straightforward. Just keep an eye on large coordinates in multi-monitor setups or special DPI scaling—sometimes bounding to viewport edges is needed.packages/common/component/PluginSetting.vue (2)
41-41: Expanded imports and layout usage.Importing
nextTick, watchEffect, computed, useLayoutis well-aligned with your logic. This sets the stage for reactive style updates and offset calculations.Also applies to: 46-46
102-110: New props for plugin positioning.
fixedNameandalignwith sensible defaults allow fine-tuned control of the panel’s alignment. However, consider enumeratingalignif your code only supports'leftTop'|'leftBottom'|'rightTop'|'rightBottom', to prevent unexpected strings.packages/common/component/PluginPanel.vue (6)
12-22: Ensure tooltip messages are localized or consistent.Displaying
'展开'and'折叠'is fine, but consider supporting multi-language locales.
36-37: Confirm resizer naming consistency.
isLeftResizercontrolling.resizer-rightandisRightResizercontrolling.resizer-leftcan be confusing. Consider clarifying the naming or adding comments to explain this logic.
118-123: Resizing constants and references are straightforward.
MIN_WIDTHandMAX_WIDTHprovide a good boundary. Consider exposing them, or making them configurable if user needs vary.
153-172: In-house throttle implementation.Implementation follows the common pattern. Evaluate whether a well-tested utility library might reduce maintenance.
312-315: .dragging style uses !important.While it offers clarity, consider if using !important is truly necessary for your styles.
339-344: Scroll container logic.Hiding scrollbars can be beneficial for aesthetics but watch out for accessibility.
packages/layout/src/composable/useLayout.js (1)
198-198: getPluginByLayout defaults to 'leftTop'.**Maintains a fallback alignment for unseen plugins.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (53)
packages/canvas/DesignCanvas/src/DesignCanvas.vue(4 hunks)packages/common/component/PluginPanel.vue(5 hunks)packages/common/component/PluginRightMenu.vue(1 hunks)packages/common/component/PluginSetting.vue(9 hunks)packages/common/component/index.js(1 hunks)packages/layout/package.json(1 hunks)packages/layout/src/DesignPlugins.vue(9 hunks)packages/layout/src/DesignSettings.vue(2 hunks)packages/layout/src/Main.vue(4 hunks)packages/layout/src/composable/useLayout.js(5 hunks)packages/plugins/block/meta.js(1 hunks)packages/plugins/block/src/BlockSetting.vue(4 hunks)packages/plugins/block/src/Main.vue(6 hunks)packages/plugins/bridge/meta.js(1 hunks)packages/plugins/bridge/src/BridgeSetting.vue(4 hunks)packages/plugins/bridge/src/Main.vue(4 hunks)packages/plugins/datasource/meta.js(1 hunks)packages/plugins/datasource/src/DataSourceForm.vue(5 hunks)packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue(4 hunks)packages/plugins/datasource/src/DataSourceRecordList.vue(3 hunks)packages/plugins/datasource/src/DataSourceRemotePanel.vue(5 hunks)packages/plugins/datasource/src/Main.vue(6 hunks)packages/plugins/help/meta.js(1 hunks)packages/plugins/help/src/HelpIcon.vue(1 hunks)packages/plugins/i18n/meta.js(1 hunks)packages/plugins/i18n/src/Main.vue(4 hunks)packages/plugins/materials/meta.js(1 hunks)packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue(4 hunks)packages/plugins/materials/src/meta/layout/src/Main.vue(3 hunks)packages/plugins/page/meta.js(1 hunks)packages/plugins/page/src/Main.vue(4 hunks)packages/plugins/page/src/PageFolderSetting.vue(4 hunks)packages/plugins/page/src/PageSetting.vue(4 hunks)packages/plugins/robot/meta.js(1 hunks)packages/plugins/schema/meta.js(1 hunks)packages/plugins/schema/src/Main.vue(5 hunks)packages/plugins/script/meta.js(1 hunks)packages/plugins/script/src/Main.vue(5 hunks)packages/plugins/state/meta.js(1 hunks)packages/plugins/state/src/Main.vue(5 hunks)packages/plugins/tree/meta.js(1 hunks)packages/plugins/tree/src/Main.vue(3 hunks)packages/plugins/tutorial/meta.js(1 hunks)packages/register/src/common.js(2 hunks)packages/register/src/constants.js(1 hunks)packages/settings/events/index.js(1 hunks)packages/settings/events/meta.js(1 hunks)packages/settings/events/src/Main.vue(1 hunks)packages/settings/props/meta.js(1 hunks)packages/settings/props/src/Main.vue(1 hunks)packages/settings/styles/meta.js(1 hunks)packages/settings/styles/src/Main.vue(6 hunks)packages/theme/base/src/page/base-config-page.less(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/register/src/constants.js
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (212)
packages/plugins/page/meta.js (1)
6-6: Alignment update supports flexible positioningThe change from
'top'to'leftTop'aligns with the PR's objective to enhance plugin positioning flexibility within the panel. This modification is part of a broader effort to implement unified logic for floating and fixed plugin states.packages/plugins/schema/meta.js (1)
6-7: Alignment and width properties enhance layout controlThe change from
'bottom'to'leftBottom'improves positioning flexibility, while the newwidthproperty (600px) establishes a default size for the panel. These changes enable the PR's goal of allowing users to adjust panel dimensions through dragging.packages/plugins/script/meta.js (1)
6-7: Updated positioning with width specificationThe modified
alignproperty and newwidthproperty work together to support the more flexible plugin layout system. The explicit width value (600px) provides a consistent default size that users can later adjust through the new dragging functionality.packages/plugins/tree/meta.js (1)
6-6: Consistent alignment update for unified plugin positioningThe change from
'top'to'leftTop'maintains consistency with the alignment updates in other plugin modules. This standardized approach ensures that all plugins follow the same positioning rules in the new flexible layout system.packages/plugins/bridge/meta.js (1)
5-5: Alignment property updated to support new flexible layoutThe change from
'top'to'leftTop'is part of the new plugin panel positioning system that enables more flexible layouts as described in the PR objectives. This change aligns with the standardized positioning implementation across plugins.packages/plugins/state/meta.js (1)
5-5: Alignment property updated for consistency with new layout systemThe change from
'top'to'leftTop'is consistent with the PR's goal to implement a unified positioning logic for plugin panels. This update enables the new flexible layout features including repositioning and visibility toggling.packages/plugins/block/meta.js (1)
5-5: Alignment property updated to support flexible layout systemThe change from
'top'to'leftTop'aligns with the PR objectives to enhance plugin panel positioning. This standardized approach will allow for drag-and-drop repositioning and improved layout control.packages/plugins/robot/meta.js (2)
8-8: Alignment property updated while preserving bottom positioningThe change from
'bottom'to'leftBottom'maintains the original vertical positioning while integrating with the new flexible layout system. This preserves the intended UI position while enabling the new repositioning capabilities.
1-9:❓ Verification inconclusive
Verify consistent import pattern across plugin components
I notice this file imports a Vue component as its icon while other plugins use string identifiers (e.g., 'plugin-icon-symbol'). While this doesn't affect the alignment change, it might be worth verifying that this mixed approach is intentional and doesn't introduce inconsistencies in how icons are rendered.
🏁 Script executed:
#!/bin/bash # Check for inconsistent icon definition patterns across plugin meta files echo "Checking plugin meta files for icon definition patterns:" grep -r "icon:" --include="meta.js" packages/plugins/ | grep -v "plugin-icon" | sort echo -e "\nComparing with standard string-based icons:" grep -r "icon: 'plugin-icon" --include="meta.js" packages/plugins/ | sortLength of output: 1158
Icon Consistency Verification: Confirm Mixed Icon Approach
In the
packages/plugins/robot/meta.jsfile the icon is imported as a Vue component (RobotIcon), which is consistent with what we see inpackages/plugins/help/meta.js. However, the majority of plugins use string-based identifiers (e.g.,'plugin-icon-symbol'). Please verify that this mixed approach is intentional and that both icon patterns are rendered correctly across plugins.
- File:
packages/plugins/robot/meta.js(and similarly,packages/plugins/help/meta.js)- Observation: Some plugins use imported Vue components for icons while others use hardcoded string identifiers.
- Action: Confirm that the divergent icon definition patterns are by design and do not lead to rendering inconsistencies.
packages/plugins/materials/meta.js (1)
6-6: Standardized alignment property nomenclatureThe update from
'top'to'leftTop'is consistent with similar changes across other plugin meta files, establishing a clearer positioning system.The new alignment value provides better semantics about both the horizontal and vertical position of the plugin, which supports the enhanced layout flexibility described in the PR objectives.
packages/plugins/tutorial/meta.js (1)
6-6: Bottom alignment updated to match new naming conventionSimilar to other plugins, this change from
'bottom'to'leftBottom'maintains the tutorial's bottom positioning while adopting the new standardized alignment system.This update preserves the intended position of the tutorial plugin (bottom) while incorporating it into the new, more descriptive alignment naming scheme that specifies both horizontal and vertical positioning.
packages/common/component/index.js (1)
17-17:✅ Verification successful
New PluginRightMenu component exported to support context menu interactions
The addition of this export makes the new context menu component available throughout the application, enabling right-click menu functionality for plugins.
This new component is a key implementation of the PR's objective to allow users to "toggle the visibility of plugins and the plugin bar using the right-click menu." Let's verify that the referenced component exists in the expected location:
🏁 Script executed:
#!/bin/bash # Check if the PluginRightMenu.vue file exists and examine its contents ls -l packages/common/component/PluginRightMenu.vue 2>/dev/null && echo "File exists" || echo "File not found" if [ -f packages/common/component/PluginRightMenu.vue ]; then echo "=== Component content preview ===" head -20 packages/common/component/PluginRightMenu.vue fiLength of output: 998
PluginRightMenu Export Verified
- The
PluginRightMenu.vuefile exists inpackages/common/component/and contains the expected Vue template for a context menu.- The export statement in
packages/common/component/index.jscorrectly exposes the component, enabling right-click menu functionality as intended.packages/layout/package.json (1)
29-30:❓ Verification inconclusive
Adding vue-draggable-next correctly supports the new plugin repositioning feature.
This dependency addition is essential for implementing the drag-and-drop functionality mentioned in the PR objectives. The vue-draggable-next library (v2.1.0) will enable the repositioning of plugins through drag-and-drop interactions, which is one of the key improvements specified in the PR.
🏁 Script executed:
#!/bin/bash # Check if vue-draggable-next is being used in the codebase echo "Checking where vue-draggable-next is being imported..." rg -A 1 "import.*vue-draggable-next" --type vueLength of output: 196
Below is an updated shell script to re‐verify that the new dependency is actually imported. The original command used the “vue” file type, which ripgrep didn’t recognize. Please run this script to search for any occurrences of
"vue-draggable-next"in both Vue and JavaScript files:#!/bin/bash echo "Searching for vue-draggable-next usage in Vue (.vue) files..." rg -A 1 "import.*vue-draggable-next" -g "*.vue" echo "Searching for vue-draggable-next usage in JavaScript (.js) files..." rg -A 1 "import.*vue-draggable-next" -g "*.js"Once you run this updated script, please verify that the dependency is indeed imported where required to support the new drag‐and‐drop repositioning feature. If the dependency isn’t found in the expected locations, confirm manually that it’s being used according to the PR objectives.
Manual verification needed for vue-draggable-next usage.
packages/plugins/i18n/meta.js (1)
5-6:✅ Verification successful
Alignment and width properties have been standardized correctly.
The alignment change from 'top' to 'leftTop' is consistent with the PR's goal of implementing unified logic for plugin panel positioning. The addition of a specific width (600) supports the new ability to control panel dimensions, which aligns with the PR objective of enabling width adjustments.
🏁 Script executed:
#!/bin/bash # Check if the alignment pattern is consistent across other plugin meta files echo "Checking alignment standardization across plugin meta files..." fd -t f "meta.js" packages/plugins | xargs grep -l "align:" | xargs grep "align:" # Check for width property standardization echo -e "\nChecking width property usage across plugin meta files..." fd -t f "meta.js" packages/plugins | xargs grep -l "width:" | xargs grep "width:"Length of output: 1236
Verified: Alignment and Width Standardization Confirmed
The meta file for the i18n plugin now correctly uses:
align: 'leftTop', which is consistent with the intended standard in this context.width: 600, supporting the new functionality for adjusting panel dimensions.The automated checks confirm that in
packages/plugins/i18n/meta.js, these properties are correctly implemented. Although a few other plugins continue to useleftBottomfor alignment, these differences fall outside the scope of this PR. Overall, the changes for the i18n plugin are correct.packages/settings/styles/meta.js (1)
6-7:✅ Verification successful
Settings alignment and icon definition improve user experience.
The alignment change to 'rightTop' properly positions this settings panel on the right side of the interface, while adding a meaningful icon ('display-inline') enhances the visual identification of the styles panel. Both changes support the PR's objective of improving the plugin panel's display logic and organization.
🏁 Script executed:
#!/bin/bash # Check if other settings components use consistent alignment patterns echo "Checking alignment standardization across settings meta files..." fd -t f "meta.js" packages/settings | xargs grep -l "align:" | xargs grep "align:" # Check icon usage across settings echo -e "\nChecking icon usage across settings meta files..." fd -t f "meta.js" packages/settings | xargs grep -l "icon:" | xargs grep "icon:"Length of output: 725
Alignment and Icon Settings Confirmed
The updates in
packages/settings/styles/meta.js—specificallyalign: 'rightTop'andicon: 'display-inline'—are consistent with similar patterns used in the other settings modules (events and props). This alignment ensures the settings panel is correctly positioned, and the unique icon in the styles module appropriately differentiates its purpose. No further adjustments are needed.packages/plugins/help/meta.js (2)
5-5: Adding a proper title improves accessibility and clarity.Adding the title '帮助' (Help) provides better clarity and improves the user experience by making the purpose of this plugin immediately apparent.
8-8:✅ Verification successful
Consistent alignment pattern applied correctly.
The alignment change from 'bottom' to 'leftBottom' maintains the positioning at the bottom while adapting to the new unified positioning system, which is consistent with the PR's goal of standardizing the plugin panel's layout logic.
🏁 Script executed:
#!/bin/bash # Check if other bottom-aligned components use the same convention echo "Checking bottom alignment convention across plugin files..." fd -t f "meta.js" packages/plugins | xargs grep -l "align:" | xargs grep "align:.*Bottom"Length of output: 432
Alignment Pattern Consistency Verified
The alignment change to
'leftBottom'inpackages/plugins/help/meta.jshas been confirmed to match the convention across all related plugin files (e.g.,packages/plugins/robot/meta.js,packages/plugins/schema/meta.js, andpackages/plugins/tutorial/meta.js). The new unified positioning system is correctly applied, and no further changes are necessary.packages/plugins/help/src/HelpIcon.vue (1)
157-157:✅ Verification successful
Update help guide target selector to match new layout structure.
This change aligns with the PR's objective to implement a unified layout for the plugin panel. The component settings guide now targets the new
#rightTopelement instead of the previous right panel.
🏁 Script executed:
#!/bin/bash # Verify the existence of the new rightTop element in the codebase echo "Searching for the new rightTop element..." rg -l "id=['\"]rightTop['\"]" --type html --type vueLength of output: 179
Verification Needed: Confirm Existence of the "#rightTop" Element
The updated code in
packages/plugins/help/src/HelpIcon.vuenow uses the selectordomElement: '#rightTop'as intended. However, our initial verification attempt usingrgfailed because Vue files were not recognized by the tool. To verify this change properly, please run the following updated shell script which adds Vue file support:If this script confirms that the element exists in your unified layout structure—or if you have verified it manually—then the change aligns with the intended design for the plugin panel.
🏁 Script executed:
#!/bin/bash echo "Searching for the new rightTop element in Vue files..." rg --type-add "vue:*.vue" -l "id=['\"]rightTop['\"]"Length of output: 338
Verification Complete: "#rightTop" Element Confirmed
The updated target selector in
packages/plugins/help/src/HelpIcon.vuenow correctly points to#rightTopper the new layout structure. Our verification found that the new element exists inpackages/layout/src/DesignSettings.vue, which confirms that this change aligns with the unified layout implementation for the plugin panel.
- Confirmed the existence of the
#rightTopelement.- No further changes are required.
packages/settings/events/meta.js (2)
5-5: Align events panel to the right top section of the plugin layout.This change is part of the unified logic for the plugin panel positioning, as described in the PR objectives. The alignment is now consistent with the new flexible layout design.
7-7: Add appropriate icon for events settings.Adding the 'target' icon improves visual recognition and consistency in the UI, making it easier for users to identify the events section in the settings panel.
packages/settings/props/meta.js (2)
5-5: Align properties panel to the right top section of the plugin layout.This change is consistent with the events settings alignment change and supports the PR's goal of implementing a unified logic for the plugin panel.
7-7: Add appropriate icon for properties settings.The 'form' icon provides a visual indicator for the properties section, improving user recognition and UI consistency across the plugin panels.
packages/theme/base/src/page/base-config-page.less (1)
43-43:❓ Verification inconclusive
Fine-tune collection panel width calculation to prevent potential layout issues.
Reducing the viewport width from 100vw to 99vw in the calculation helps prevent horizontal scrollbars from appearing and accommodates the new draggable functionality in the plugin panel.
When implementing layouts with viewport percentage units like vw, using 100vw can sometimes cause horizontal scrollbars to appear unexpectedly in certain browsers. This happens because some browsers include the scrollbar width in the viewport calculation while others don't.
To confirm this solves potential layout issues:
🏁 Script executed:
#!/bin/bash # Check for any other instances of 100vw that might need similar adjustment echo "Checking for other uses of 100vw in CSS files:" rg "100vw" --type css --type lessLength of output: 359
Action: Revisit page configuration panel calculation for proper viewport width adjustment.
After verifying with the grep output, it appears that besides the approved change in
base-config-page.less(intended to replace100vwwith99vwin the viewport calculation), the file still contains an instance of"100vw". Please confirm that this is intentional or update the expression accordingly. Additionally, note that"100vw"is also inmockServer/src/assets/css/0.1.20/index.css; if similar adjustments are warranted there, please review that file as well.
- Verify that
packages/theme/base/src/page/base-config-page.lessline 43 shows the intended change (“99vw”) throughout the file.- Confirm whether the
"100vw"usage inmockServer/src/assets/css/0.1.20/index.cssrequires adjustment based on the layout concerns.packages/plugins/block/src/BlockSetting.vue (4)
6-7: Enhances plugin positioning with the new layout system.The addition of
alignandfixed-nameproperties connects this component to the flexible layout system, allowing it to participate in the repositioning capabilities mentioned in the PR objectives.
91-91: Added layout management capabilities.The import of
useLayoutfrom the meta-register provides access to plugin positioning and layout management functions, which is essential for the flexible layout enhancements.
157-158: Properly implements reactive layout positioning.The code correctly sets up the layout integration by:
- Extracting
PLUGIN_NAMEandgetPluginByLayoutfrom theuseLayoutcomposable- Creating a computed property for
alignthat dynamically retrieves the alignment for this specific pluginThis implementation ensures the component responds properly to layout changes.
278-279: Correctly exposes layout properties to the template.Adding
alignandPLUGIN_NAMEto the returned object makes them available in the template, ensuring the layout bindings work properly.packages/register/src/common.js (1)
12-12: Required import for Vue ref handling.This import of
isReffrom Vue is necessary for the enhancement to thegenerateRegistryfunction on line 164.packages/plugins/i18n/src/Main.vue (8)
4-5: Integrates with the flexible layout system.The addition of
fixed-nameandfixedPanelsprops to the plugin-panel connects this component to the flexible layout system:
fixed-nameuniquely identifies this plugin in the layout systemfixedPanelsallows the component to receive information about panel positionsThis implementation supports the PR objective of allowing plugins to be repositioned through drag-and-drop or context menu options.
124-124: Enhanced Vue composition API usage.The expanded import now includes
provide, which is used on lines 171-174 to establish panel state context for child components, supporting the new layout functionality.
129-136: Organized imports with layout functionality.The reorganized imports improve code organization and add the
useLayoutfunction, which is essential for the flexible layout functionality.
156-160: Added props for panel layout configuration.The
fixedPanelsprops definition lets the component receive panel configuration from parent components, supporting the drag-and-drop repositioning feature mentioned in the PR objectives.
161-161: Enhanced setup function with emit access.The updated setup function signature includes access to props and emit, allowing the component to properly handle and emit events related to layout changes.
169-170: Accesses plugin name constants for layout integration.Extracting
PLUGIN_NAMEfromuseLayout()provides access to standardized plugin identifiers used throughout the layout system, ensuring consistent naming across components.
171-174: Implements reactive state with provide/inject pattern.The code sets up a reactive panel state and provides it to child components, establishing a clean communication channel for layout-related events. This is a well-implemented use of Vue's provide/inject pattern.
422-422: Makes plugin identifier available in template.Adding
PLUGIN_NAMEto the returned object ensures it's accessible in the template for binding to thefixed-nameprop, completing the layout integration.packages/plugins/materials/src/meta/layout/src/Main.vue (2)
23-23: Updated import to support plugin layout integrationThe import now includes
META_APP as PLUGIN_NAMEfrom the meta-register, which provides consistent naming for plugins across the application.
83-83: Added PLUGIN_NAME to setup return valuesReturning
PLUGIN_NAMEfrom the setup function makes it accessible in the template, enabling the panel to identify itself within the layout system.packages/canvas/DesignCanvas/src/DesignCanvas.vue (4)
2-2: Enhanced drag interaction with conditional class bindingThe addition of a conditional class
not-selectedbased ongetMoveDragBarState()improves the user experience during drag operations by visually indicating when the canvas is in drag mode.This is an excellent UX improvement that provides visual feedback during drag operations.
70-71: Added layout interaction methodsThe extraction of
getMoveDragBarStatefrom useLayout() provides the necessary function to determine when drag operations are active.
277-277: Exposed getMoveDragBarState for template useMaking this function available in the template enables the conditional styling based on drag state.
289-292: Added protective styling for drag operationsThe
.not-selectedclass disables pointer events and user selection during drag operations, preventing accidental interactions with the canvas while dragging plugin panels.This is a crucial UX improvement that prevents potential conflicts between dragging operations and canvas interactions.
packages/plugins/datasource/src/DataSourceForm.vue (4)
2-8: Enhanced plugin setting with layout integration propsThe addition of
:fixed-name="PLUGIN_NAME.Collections"and:align="align"props enables this component to participate in the flexible layout system, allowing for consistent positioning and state management.
36-36: Added computed import for reactive propertiesThe addition of
computedfrom Vue enables the creation of reactive alignment properties based on the layout state.
50-57: Organized imports for layout integrationThe imports now include
useLayoutalong with other meta-register hooks, providing all necessary tools for layout management.
259-260: Exposed layout properties to templateThe addition of
alignandPLUGIN_NAMEto the setup's return object makes these values available for use in the template, enabling dynamic positioning of the plugin panel.packages/plugins/page/src/PageFolderSetting.vue (4)
2-8: Enhanced plugin setting with layout integrationThe addition of
:fixed-name="PLUGIN_NAME.AppManage"and:align="align"props to the plugin-setting component enables consistent positioning and state management within the flexible layout system.
36-36: Added computed import for reactive propertiesIncluding
computedfrom Vue enables the creation of reactive alignment properties that respond to layout changes.
41-41: Added useLayout import for layout integrationThe addition of
useLayoutto the imports provides access to the layout management functionality.
210-211: Exposed layout properties to templateIncluding
alignandPLUGIN_NAMEin the setup's return object makes these values available in the template, enabling the dynamic positioning features.packages/plugins/block/src/Main.vue (7)
5-6: Adding fixed state integration properties to PluginPanel.These properties connect the panel to the Layout system, allowing it to be part of the flexible layout mechanism. The
fixed-nameproperty uniquely identifies this panel in the system, whilefixedPanelsprovides the array of panels that should be in fixed state.
126-126: Adding provide/reactive support for panel state management.Adding
provideto the imports is necessary for the panel state management functionality introduced below.
220-224: Adding new fixedPanels prop definition.This prop allows the component to receive an array of panels that should be in a fixed state, supporting the flexible layout functionality.
273-274: Importing layout management functionality.The
PLUGIN_NAMEconstant from useLayout provides standardized identifiers for plugin panels across the application.
275-280: Implementing panel state management with provide/inject pattern.Creating a reactive panel state with the emit event handler and providing it to child components establishes a communication channel between the panel and its children. This is essential for coordinating panel behaviors in the flexible layout system.
438-438: Exposing PLUGIN_NAME to the template.Making PLUGIN_NAME available to the template allows binding the fixed-name property, connecting this panel to the layout system.
470-470: Simplifying margin style definition.Changed from
margin: 12px 0;tomargin-bottom: 12px;, removing the top margin while maintaining the bottom spacing. This subtle change improves consistency with other components in the layout system.packages/plugins/page/src/Main.vue (6)
2-9: Enhancing PluginPanel with flexible layout attributes.Added
fixed-nameandfixedPanelsattributes to integrate this panel with the layout management system. These properties allow the panel to participate in the flexible layout mechanism, supporting both fixed and floating states.
46-46: Adding useLayout to manage panel positioning.Importing useLayout provides access to layout management functionality, essential for implementing the flexible panel positioning features.
78-80: Adding fixedPanels prop definition.This prop allows parent components to control which panels should maintain a fixed state, an important part of the flexible layout system.
82-82: Enhancing setup function with props and emit parameters.Accessing props and emit in the setup function enables reactive property management and event handling, necessary for the panel state management.
86-93: Implementing panel state management with provide/inject pattern.Creating a reactive panel state and providing it to child components establishes a communication channel for coordinating panel behaviors in the flexible layout system.
173-173: Exposing PLUGIN_NAME to the template.Making PLUGIN_NAME available to the template allows binding the fixed-name property, connecting this panel to the layout system.
packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue (5)
2-7: Enhancing PluginSetting with alignment and fixed-name properties.Added
:alignand:fixed-nameattributes to integrate the panel with the layout management system. The align property dynamically positions the panel based on the layout configuration, while fixed-name uniquely identifies this panel in the system.
37-37: Adding computed to support dynamic alignment.Including computed in the imports is necessary for the align computed property added below.
43-43: Adding useLayout to manage panel positioning.Importing useLayout provides access to layout management functionality, essential for implementing the flexible panel positioning features.
128-130: Implementing dynamic panel alignment logic.Created a computed property
alignthat uses the getPluginByLayout function to determine the optimal panel position based on the current layout state. This enables responsive positioning of the panel in different UI configurations.
285-292: Exposing alignment and plugin name to the template.Making align and PLUGIN_NAME available to the template allows for dynamic positioning and identification of the panel in the layout system.
packages/plugins/page/src/PageSetting.vue (4)
2-8: Enhancing PluginSetting with alignment and fixed-name properties.Added
:fixed-nameand:alignattributes to integrate the panel with the layout management system. These properties enable the panel to respond to layout changes and maintain a consistent user experience.
63-63: Adding computed to support dynamic alignment.Including computed in the imports is necessary for the align computed property added below.
145-147: Implementing dynamic panel alignment logic.Created a computed property
alignthat uses the getPluginByLayout function to determine the optimal panel position based on the current layout state. This enables responsive positioning of the panel in different UI configurations.
393-394: Exposing alignment and plugin name to the template.Making align and PLUGIN_NAME available to the template allows for dynamic positioning and identification of the panel in the layout system, enhancing the integration with the flexible layout mechanism.
packages/plugins/datasource/src/DataSourceRecordList.vue (2)
127-128: Well implemented layout integration.The use of
useLayouthook to access layout functionality and creating a computedalignproperty is an effective pattern for reactive layout integration. The computed property will automatically update when the layout changes.
565-566: Exposing necessary variables to the template for layout management.Proper exposure of
alignandPLUGIN_NAMEto the template ensures that the component can respond to layout changes and maintain consistent identification within the plugin system.packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue (4)
3-9: Improved plugin-setting layout integration.Adding
:alignand:fixed-nameattributes enhances the component's ability to integrate with the unified layout system. This change is consistent with the pattern applied in other data source components.
29-29: Added necessary imports for layout management.Including
computedfrom Vue anduseLayoutfrom the meta-register module provides the tools needed for implementing reactive layout positioning.Also applies to: 31-31
57-59: Implemented layout management functionality.The use of the
useLayouthook and computed property for determining alignment is consistent with the implementation in other components, ensuring a unified approach to layout management.
98-99: Properly exposed layout variables to the template.Returning
alignandPLUGIN_NAMEfrom the setup function makes them available to the template, allowing the component to react to layout changes.packages/plugins/tree/src/Main.vue (1)
54-57: Added fixedPanels prop for enhanced configurability.This prop allows the component to receive an array of fixed panels, improving its flexibility and reusability.
packages/plugins/datasource/src/DataSourceRemotePanel.vue (4)
7-7: Enhanced plugin-setting with layout awareness.Adding the
:alignattribute to the plugin-setting component allows it to adapt its positioning based on the layout configuration, consistent with other data source components.
56-56: Added necessary imports for layout management.Including
computedfrom Vue anduseLayoutfrom the meta-register module provides the tools needed for implementing reactive layout positioning.Also applies to: 65-65
118-120: Implemented layout management functionality.The extraction of
PLUGIN_NAMEandgetPluginByLayoutfrom theuseLayouthook, and the computation of thealignproperty is consistent with the implementation in other components, ensuring a unified approach to layout management.
226-226: Properly exposed layout state to the template.Including the
alignvariable in the return statement makes it available to the template, allowing the component to adapt its rendering based on layout changes.packages/plugins/state/src/Main.vue (3)
2-76: Structural improvement withplugin-panelimplementationThe refactoring to use
plugin-panelcomponent instead of direct divs provides a more consistent UI structure, aligning with the PR's goal of enhancing plugin panel functionality.
157-161: Good use of Vue's provide/inject patternUsing
provideto share the event emitter with child components is a clean approach for cross-component communication.
44-55:❓ Verification inconclusive
Verify right panel positioning logic
The right panel positioning now uses a dynamic style based on alignment. Ensure this works correctly when the panel is repositioned or when the layout changes.
🏁 Script executed:
#!/bin/bash # Check if the plugin panel component handles alignment consistently ast-grep --pattern 'alignStyle = computed(() => { $$$ })'Length of output: 61
🏁 Script executed:
#!/bin/bash # Search for the computed definition of alignStyle within Main.vue to verify its implementation. rg "alignStyle\s*=\s*computed\s*\(" packages/plugins/state/src/Main.vueLength of output: 113
Right Panel Alignment Logic
- Verified that the computed property
alignStyleis defined inpackages/plugins/state/src/Main.vue.- The dynamic binding of styles via
:style="alignStyle"indicates the right panel's position is intended to adapt based on alignment.- Since static code checks only confirm the property's existence, please manually test the runtime behavior to ensure that the computed style adjusts correctly when the panel is repositioned or the layout changes.
packages/settings/props/src/Main.vue (3)
2-18: Clean plugin panel implementationThe refactoring to use the
plugin-panelcomponent enhances UI consistency and simplifies the template structure.
42-45: Good implementation of provide/inject patternUsing reactive state with the provide/inject pattern is a clean approach for passing the event emitter down to child components.
35-35: Properly updated setup function signatureThe setup function now correctly accepts props and emit, allowing for better component communication.
packages/plugins/script/src/Main.vue (3)
2-30: Improved plugin panel structure with named slotsThe refactoring to use
plugin-panelwith named slots for header and content creates a more modular and maintainable structure.
102-108: Excellent resource cleanupProper cleanup of resources in
onBeforeUnmountprevents memory leaks and follows best practices.
130-151: Good visual feedback for unsaved changesThe red dot indicator provides clear visual feedback to users about unsaved changes.
packages/plugins/bridge/src/Main.vue (2)
2-9: Consistent plugin panel implementationThe plugin panel configuration with fixed-name and fixedPanels aligns with the implementation in other components, maintaining consistency.
48-51: Consistent implementation of panelState provisionThis follows the same pattern used in other plugin components, maintaining consistency.
packages/plugins/datasource/src/Main.vue (9)
2-9: Enhanced plugin panel with proper configuration propertiesThe plugin panel now includes important properties for the flexible layout implementation:
:fixed-namecorrectly identifies this plugin within the layout system:fixedPanelsenables panel position management:docsUrland:isShowDocsIconadd documentation accessibility@closeevent handler appropriately propagates the close actionThese changes align well with the PR goal of enhancing plugin panel functionality.
51-52: Added necessary import for Vue's provide APIGood addition of the
provideimport from Vue, which is needed for the new panel state management system.
58-59: Simplified import statement for common componentsThe import statement has been cleaned up by removing the LinkButton that was previously used, while properly maintaining the required components.
63-64: Added useLayout composable for plugin name managementThe inclusion of
useLayoutcomposable provides a centralized way to access plugin names, which is essential for the flexible layout functionality.
81-85: Added fixedPanels prop for flexible positioningThe new
fixedPanelsprop properly enables the component to receive panel configuration from parent components, supporting the drag-and-drop repositioning feature described in the PR objectives.
86-86: Modernized component setup by accepting props and emitThe setup function now properly accepts props and emit parameters, aligning with Vue 3 best practices for composition API usage.
95-102: Implemented panel state provider patternThe addition of a reactive
panelStateobject and providing it to child components establishes a clean communication channel between the panel and its children. This is a good pattern for state management in a component hierarchy.
152-154: Added PLUGIN_NAME to component exportsPLUGIN_NAME is now properly returned from the setup function, making it accessible in the template, which is needed for the fixed-name property of the plugin panel.
169-171: Fixed width calculation for consistent button displayThe CSS width calculation ensures the button takes up the appropriate space with consistent margins, improving the visual consistency of the UI.
packages/settings/styles/src/Main.vue (13)
2-9: Implemented flexible layout plugin panel structureThe template has been restructured to wrap the entire content in a
plugin-panelcomponent with all necessary properties:
:fixed-namefor unique identification in the layout system:fixed-panelsfor position management:is-show-collapse-iconfor UI flexibility- Event handlers for collapse status updates and close actions
This structure aligns with the PR objective of unified logic for floating and fixed states.
10-77: Preserved style editor functionality while enhancing structureThe content template slot now properly contains all the original style editor functionality while benefiting from the new flexible panel structure. The implementation preserves all the existing features such as inline style configuration and variable configurator.
81-81: Added reactive imports for enhanced state managementThe import now includes all necessary reactive APIs from Vue, supporting the new panel state management approach.
83-84: Added useLayout composable for standardized plugin namingThe useLayout composable provides access to standardized plugin names and layout utilities, ensuring consistent identification across the application.
99-99: Imported PluginPanel component for flexible layoutThe PluginPanel component import enables the new flexible layout functionality described in the PR objectives.
104-104: Added PluginPanel to component registrationThe PluginPanel component is properly registered in the components object, making it available in the template.
120-124: Added fixedPanels prop for panel positioningThe fixedPanels prop allows the component to receive configuration for fixed panel positions, supporting the repositioning functionality mentioned in the PR objectives.
125-125: Updated setup function signature to accept props and emitThe setup function now properly accepts props and emit parameters, following Vue 3 composition API best practices.
138-138: Switched to reactive ref for collapse stateThe isCollapsed state is now managed as a reactive ref, improving reactivity and state management.
145-146: Added PLUGIN_NAME from useLayout for consistent namingThe PLUGIN_NAME constant is obtained from useLayout, ensuring consistent plugin identification across the application.
147-151: Implemented panel state provider patternThe reactive panelState object is created and provided to child components, establishing a clean communication channel in the component hierarchy.
223-226: Added collapse status update handlerThe updateCollapseStatus function properly handles the collapse state updates from the PluginPanel component, enabling the collapsible functionality.
239-240: Updated return statement with new propertiesThe updateCollapseStatus and PLUGIN_NAME properties are correctly added to the return statement, making them available in the template.
packages/settings/events/src/Main.vue (8)
2-8: Implemented plugin panel with flexible layout propertiesThe template has been enhanced with a
plugin-panelcomponent that includes all necessary properties:
titlefor panel identification:fixed-panelsfor position management:fixed-namefor unique identification in the layout system:header-margin-bottomfor consistent spacing@closeevent handler for proper close action propagationThis implementation supports the PR objective of flexible plugin panel positioning.
9-19: Maintained content structure while enhancing containerThe original tiny-collapse component and its contents are properly preserved within the new plugin-panel structure, ensuring that functionality remains intact while adding the flexible layout capabilities.
23-23: Enhanced imports with Vue's reactive and lifecycle APIsThe import statement now includes all the reactive and lifecycle APIs needed for the new component structure and state management approach.
27-28: Added required imports for plugin panel and layout managementThe imports for PluginPanel and useLayout provide the necessary components and utilities for implementing the flexible layout functionality.
31-31: Added PLUGIN_NAME constant for consistent plugin identificationThe PLUGIN_NAME constant from useLayout ensures consistent plugin identification across the application.
33-35: Added fixedPanels prop for panel positioningThe fixedPanels prop defined using defineProps enables the component to receive configuration for panel positioning, supporting the drag-and-drop repositioning feature.
37-41: Set up emit and reactive panel stateThe defineEmits function and reactive panel state properly establish the event handling and state management foundation for the component.
43-43: Implemented panel state provider patternThe panelState is provided to child components, establishing a clean communication channel in the component hierarchy.
packages/plugins/bridge/src/BridgeSetting.vue (4)
2-2: Enhanced plugin setting with alignment and fixed name propertiesThe plugin-setting component now includes:
:alignproperty for dynamic positioning based on layout configuration:fixed-nameproperty for consistent identification within the layout systemThese changes support the PR objective of allowing repositioning of plugins.
115-115: Added useLayout import for layout managementThe useLayout import provides access to the layout management utilities needed for flexible plugin positioning.
154-156: Implemented layout-aware positioningThe code properly:
- Extracts PLUGIN_NAME and getPluginByLayout from useLayout
- Creates a computed alignment property that dynamically responds to layout changes
- Uses the Bridge plugin's name for consistent identification
This implementation supports the flexible positioning feature described in the PR objectives.
279-280: Added layout properties to component return valueThe align and PLUGIN_NAME properties are correctly added to the return statement, making them available in the template for dynamic positioning and identification.
packages/layout/src/DesignSettings.vue (3)
20-36: Ensure drag-and-drop handles edge cases gracefully.When dragging items between different plugin positions or rearranging them, verify that no out-of-bounds array splices occur. Double-check that
settingPluginsis always properly updated even if the user cancels mid-drag (e.g., by pressing Escape).
28-29: Consider validatingiteminshowContextMenu.You call
showContextMenu($event, true, item, index, ...)in the@contextmenuevent. Ensureitemis always defined whentypeis true so you don’t accidentally pass an undefined plugin ID to the context menu.
112-117: Double-check index splicing logic inswitchAlign.Here, you remove an item from
settingPluginsatindex, emitchangeRightAlign, and calldragPluginLayout. Confirm that the new item insertion logic in downstream code handles these parameters consistently, especially ifindexorlistmight differ from their original references.packages/plugins/schema/src/Main.vue (1)
62-67: Provide defaults forfixedPanels.The
fixedPanelsprop is optional, but if it’s essential to your panel layout logic, consider providing a default array or at least validating that it’s defined before usage. This helps prevent runtime errors when parent components omit the prop.packages/layout/src/Main.vue (7)
22-29: Right panel visibility checks.Similarly, showing the
design-settingscomponent based onv-if="rightMenuShownStorage"looks fine, but please verify that rapidly togglingrightMenuShownStoragewon't create flicker or stale state in the right panel when switching plugin contexts.
42-42: Import usage is correct.Your import of
reffrom 'vue' properly supports the new reactive refs (leftandright). No issues noted.
66-68: Effective destructuring for layout state.Using
const { layoutState, ... } = useLayout()is a clean approach to retrieving relevant layout properties. This clarifies your usage withinsetup().
77-82: Cross-component alignment logic.Calling
right.value?.changeAlign(pluginId)inchangeLeftAlignandleft.value?.changeAlign(pluginId)inchangeRightAlignis concise. Consider logging or gracefully handling cases whenright.value/left.valueis unexpectedly null.
121-127: Returning refs and computed values.Exposing these references and computed properties from
setupis straightforward; the approach is clean and maintainable.
164-165: Right wrap flex layout.Switching
.tiny-engine-right-wrapto a flex layout withdisplay: flex; flex-flow: row nowrap;can be beneficial for flexible alignment. Test thoroughly on narrower viewports to ensure no overflow bugs occur.
399-402:.not-selectedusage and accessibility.Applying
pointer-events: noneanduser-select: noneprevents user interaction. Confirm it’s only added temporarily (e.g., during drag or special states) to avoid locking out essential features or harming accessibility.packages/layout/src/DesignPlugins.vue (6)
4-12: Introducing top draggable list.Using
<vue-draggable-next>withv-model="state.topNavLists"for the top icons effectively enables reordering. Confirm thefilter="EditorHelp"property performs as expected if certain elements should not be draggable.
38-66: Bottom draggable nav & context menu area.The second draggable
<vue-draggable-next>block replicates top nav logic for bottom icons. Grouping them under"plugins"is consistent; just confirm that collisions among top and bottom lists won't occur if items share the same group name.
139-145: Decomposing plugin layout logic.Your layout utilities within
useLayout()are used to properly retrieve plugin data. The code remains readable. No major concerns noted.
159-160: Alignment switching.
switchAlignandchangeAlignhelp reposition plugins between top and bottom lists. The approach is solid; just confirm it doesn't break plugin ordering if multiple reassignments happen in quick succession.Also applies to: 163-167, 169-172
246-251: Handling end of drag event.
onEndtriggersclose()if dragging across sides. This logic is clear but test thoroughly to ensure you don’t prematurely close a plugin’s content if re-dragging back.
253-259: Consolidating plugin state in return object.Returning
onEnd,showContextMenu,switchAlign, etc. fromsetup()fosters reusability. Looks good.packages/common/component/PluginSetting.vue (5)
3-10: Flexible alignment classes.Adding
align-right(whenalign.includes('right')) plus:style="alignStyle"is a smooth way to handle dynamic positioning. Confirm usage is consistent with the rest of the plugin layout.
118-118: Computed offsets for multi-panel layouts.
firstPanelOffset,secondPanelAlign, andalignStyleform a robust approach to adjusting multiple stacked panels. This ensures minimal manual positioning.Also applies to: 120-130
132-138: Watch effect triggers DOM updates.Modifying
.second-panelstyle vianextTickis workable but watch for potential race conditions if multiple components share.second-panel. A more scoped class or ID might be safer.
154-155: Exposing computed styles in return.Returning
alignStyleand related values is standard for templates. The overall design remains consistent with the rest of the code.
242-244: Right alignment styling.The
.align-right { right: 0; }rule complements your dynamic approach. Check if any horizontal scrolling is introduced in smaller viewports.packages/common/component/PluginPanel.vue (32)
2-3: Use enforced min/max width logic for consistency.Binding
panelWidthandheaderMarginBottomdirectly is good. Just ensure that external callers understand the enforced min/max width logic in the resizing handlers to avoid confusion about unexpected clamping.
23-28: Fix panel toggle logic.Toggling a "fixed" panel is a great addition. Make sure
fixPanellogic accounts for any previously fixed panels in other parts of the UI to avoid conflicts.
32-34: Scroll container is well-structured.Using a dedicated
.scroll-contentimproves usability. Ensure that large content is tested for scroll performance.
42-42: Vue composition imports look correct.Import statements for
inject,ref, etc., are appropriate.
44-44: SvgButton import is consistent.No issues found with the new import from
@opentiny/tiny-engine-common.
47-47: Tooltip import ensures cohesive styling.Leverages
@opentiny/vueforTinyTooltip. Looks good.
51-51: Registered TinyTooltip correctly.Exposure in
componentsis properly set for usage in the template.
53-54: CloseIcon and SvgButton components are integrated correctly.These are used in the header area. Implementation and ordering are fine.
83-108: Validate newly added props for edge cases.
fixedPanels,fixedName,headerMarginBottom, andisShowCollapseIconare valuable. Consider default values or validations that better communicate usage constraints (especially forfixedPanelsandfixedName).
110-110: New "updateCollapseStatus" event is well-defined.Emitting updates to collapse state helps parent components react accordingly.
124-126: Collapse logic is well-handled.
isCollapsedandsettingIconcomputed usage is straightforward and clean.
129-131: ConfirmpanelStateinjection.Ensure that the parent provides
panelStatewithemitEventcorrectly. Otherwise, calls toemitEventwill fail silently.
134-135: Extract layout functions fromuseLayout.Good approach to keep resizing logic consistent with the global layout state.
136-139: Dynamic alignment detection.
isLeftResizerandisRightResizerare computed from thealign. Double-check logic if the naming might be reversed/misleading.
141-145: Right-side mouse move logic.Using a clamped approach with
Math.max/Math.minis helpful. The single-step approach ofchangePluginWidthis clean.
147-151: Left-side mouse move logic.Mirrors the right-side approach. Looks consistent.
174-176: Throttle usage with 50ms limit.Decent compromise between performance and UX.
177-179: leftResizer/rightResizer references.No issues. Ensure they don’t break if multiple plugin panels exist.
180-186: onMouseUpRight cleans up listeners well.Removes event listeners and toggles cursor class. Good practice.
188-196: onMouseDownRight sets up event listeners and drag state.Implementation is straightforward and consistent.
198-204: onMouseUpLeft logic parallels the right side.Cleaned up event listeners and resets state. Looks fine.
206-214: onMouseDownLeft ensures left-drag logic aligns with onMouseMoveLeft.Consistent with the right-drag approach.
216-219: Initialize resizer DOM references upon mounting.
querySelectorusage is straightforward. Confirm it won’t conflict with repeated plugin panels.
221-224: Collapsing event logic.Propagates collapsed state up via
updateCollapseStatus. Implementation is straightforward.
226-228: onMounted lifecycle usage.Initialize the resizer DOM references after the component fully mounts. Confirm SSR usage is not impacted.
231-241: Returning composition state.All necessary methods and refs are returned for template usage or parent consumption.
261-262: Header style changes.The
border-bottomandmargin-bottomlook consistent with the rest of the design.
300-310: .resizer-right styling.Provides subtle horizontal drag handle. Overriding the width on hover is good for user feedback.
317-320: .resizer-right:hover states.Expanding on hover is consistent with the dragging approach.
322-332: .resizer-left styling.Mirrors
.resizer-rightlogic. No issues found.
334-337: .resizer-left:hover states.**Matches
.resizer-righthover logic. Symmetry is good.
346-347: .scroll-content::-webkit-scrollbar hidden.Ensures a clean UI but again be mindful of accessibility for users who need visual scroll indicators.
packages/layout/src/composable/useLayout.js (30)
14-14: useStorage import is appropriate.Provides a simple way to persist reactive states.
20-27: PLUGIN_POSITION constants improve clarity.Defining explicit panel positions helps keep layout logic organized.
29-31: Reactive pluginState object.Holds pluginEvent state at runtime. Confirm if additional fields are needed.
34-34: isMoveDragBar flag in layoutState.Tracks drag state effectively.
44-44: New fields in layoutState.plugins.
isShow,render,pluginEvent,apiall appear to match usage in the panel. Good synergy.Also applies to: 46-48
53-55: Additional fields for layoutState.settings.Mirrors the plugins structure to handle a separate panel (e.g., design settings).
65-67: getMoveDragBarState accessor.Provides a clean accessor pattern for drag bar state.
68-70: changeMoveDragBarState mutator.Appropriate separation of read vs. write logic.
71-72: Persistent storage forleftMenuShown&rightMenuShown.Simplifies toggling plugin visibility across sessions.
73-84: changeMenuShown with a switch.Straightforward approach. Could be extended if more menu compartments are added.
85-85: leftFixedPanelsStorage usage.Aligned with user preferences for pinned panels.
86-87: rightFixedPanelsStorage usage.Same approach for the right side.
88-92: changeLeftFixedPanels toggles membership.**Implementation uses array filter/spread effectively.
93-97: changeRightFixedPanels symmetrical to left side.**Follows the same toggling pattern.
99-101: registerPluginApi merges plugin interactions.Allows dynamic injection of plugin APIs.
103-107: getPluginApi supports specific or fallback usage.Returns a default or targeted API referencing
layoutState.plugins.api.
133-138: closeSetting forced-closure logic.Prevents forcibly pinned panels from closing unless
forceCloseis set.
164-174: LocalStorage retrieval tries/catches.Graceful fallback for invalid or missing storage data. Good approach.
175-179: Ensuring plugin is an array.Resets to an empty array if the stored data is invalid.
180-181: Reactive plugin storage usage.Saves final plugin data in local storage. Straightforward approach.
183-195: changePluginWidth updates plugin dimension in storage.**Implementation handles partial or initial definitions. Ensure offset property is used consistently or removed if not needed.
200-210: getPluginsByLayout sorts by index.**Allows user-defined ordering. Ensure indexes are assigned consistently when new plugins are added.
212-214: getPluginById picks plugin from list by id.**Works if plugin IDs match the stored data.
216-218: getPluginsByPosition wraps getPluginsByLayout.**Looks good for retrieving a subset of the plugin list.
220-224: changePluginLayout modifies alignment.**Straightforward alignment reassignment.
227-269: dragPluginLayout handles reordering logic.**Adequately shifts indexes. Check for concurrency when multiple drag operations occur simultaneously.
271-280: isSameSide checks alignment grouping.**Applies to left vs. right sets. Straightforward logic.
282-288: getPluginShown / changePluginShown toggles visibility.**Simple boolean flip. Valid usage of local storage.
290-293: initPluginStorageReactive ensures plugin list is saved.**Prevents overwriting if plugin storage is already initialized.
296-331: Exporting newly added functions & constants.Comprehensive approach ensures external usage. Keep the re-exports updated if more logic is added.
| @@ -161,7 +161,7 @@ export const preprocessRegistry = (registry) => { | |||
|
|
|||
| export const generateRegistry = (registry) => { | |||
| Object.entries(registry).forEach(([key, value]) => { | |||
| if (typeof value === 'object' && value) { | |||
| if (typeof value === 'object' && value && !isRef(value)) { | |||
There was a problem hiding this comment.
Critical fix for Vue reactive refs handling.
The addition of !isRef(value) prevents the function from recursively traversing Vue ref objects, which could lead to infinite recursion or unintended behavior when processing the registry. This is an important fix for proper integration with Vue's reactivity system.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/plugins/script/src/Main.vue (2)
55-59: Add validation and default value for fixedPanels prop.The new
fixedPanelsprop lacks type validation beyond Array and doesn't have a default value. Consider adding more specific validation and a default empty array to improve robustness.props: { fixedPanels: { type: Array, + default: () => [], + validator: (value) => Array.isArray(value) } },
67-70: Document the purpose of panelState for maintainability.The reactive
panelStateobject and its provision to child components lacks documentation explaining its purpose and usage. Consider adding a comment to clarify how this state is consumed by child components.+ // Create reactive panel state to share event emitter with child components const panelState = reactive({ emitEvent: emit }) provide('panelState', panelState)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/plugins/script/src/Main.vue(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (8)
packages/plugins/script/src/Main.vue (8)
2-11: Improved component structure using PluginPanel.The refactoring to use the
PluginPanelcomponent with appropriate props provides better structure and reusability. This aligns well with the PR's objective of enhancing the plugin panel's flexibility.
13-16: Well-structured visual indication for unsaved changes.The implementation of the red dot indicator that appears when changes are unsaved is a good UX feature, giving users immediate visual feedback about the state of their work.
34-34: Good use of Vue composables for state management.Adding
reactiveandprovidefrom Vue enhances the component's reactivity system and enables better state management across components.
36-37: Appropriate use of utility hooks for layout management.The imports show a well-structured approach using composable hooks (
useHelp,useLayout) for managing help documentation and layout concerns, which aligns with Vue best practices.
60-60: Resolved unused event issue from previous review.The previous review flagged an unused 'fix-panel' event. This has been addressed by only including the 'close' event which is actually emitted in the template.
129-151: Good styling approach for change indicator.The styling for the change indicator uses relative positioning and appropriate z-index to ensure visibility. The use of CSS variables for colors supports theming capabilities.
4-5:❓ Verification inconclusive
Verify the PLUGIN_NAME constant usage.
The
:fixed-name="PLUGIN_NAME.Page"prop uses a constant fromuseLayout(). Ensure this constant is properly defined and consistent across components to maintain the plugin identification system.
🏁 Script executed:
#!/bin/bash # Check the definition and usage of PLUGIN_NAME.Page echo "Checking PLUGIN_NAME definition:" rg -A 10 "PLUGIN_NAME\s*=\s*" packages/ echo -e "\nChecking usage of PLUGIN_NAME.Page:" rg "PLUGIN_NAME\.Page" packages/Length of output: 528
Double-check the
PLUGIN_NAMEconstant import and definition.
We found thatPLUGIN_NAME.Pageis used consistently in the following files:
packages/settings/events/src/components/BindEventsDialog.vuepackages/settings/events/src/components/BindEvents.vuepackages/plugins/script/src/Main.vueHowever, our repository search didn’t reveal a direct definition for
PLUGIN_NAME(e.g., via a pattern matching its assignment). Please verify thatPLUGIN_NAMEis correctly imported fromuseLayout()or otherwise defined in a central module so that its value is consistent across components.
154-157:❓ Verification inconclusive
Ensure responsive behavior for the editor container.
The padding and height calculations look appropriate, but verify that the editor container adapts well to different screen sizes and panel width adjustments.
🏁 Script executed:
#!/bin/bash # Check if there are any responsive styles or media queries for the editor container echo "Checking for responsive styles in CSS files:" rg -g "*.less" -g "*.css" -g "*.vue" "media|@media" packages/plugins/ echo -e "\nChecking for width adjustments in plugin panels:" rg -g "*.vue" "width|min-width|max-width" packages/plugins/ | grep -E "plugin|panel"Length of output: 11770
Action: Validate Responsive Behavior of the Editor Container
The static padding (
0 12px) and height (calc(100% - 12px)) in the.code-edit-contentrule look correct on their own. However, our search didn’t reveal any explicit media queries or additional responsive rules affecting this container inpackages/plugins/script/src/Main.vue. Please make sure that, either through parent container styles or additional responsive CSS, the editor container adapts gracefully across various screen sizes and during panel width adjustments. It would be helpful to test the layout on different devices and, if necessary, add media queries or flexible layout adjustments to ensure robust responsiveness.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
packages/common/component/PluginRightMenu.vue (7)
1-7: Consider adding accessibility attributes for better screen-reader support.
Using a bare<ul>is convenient for the context menu, but adding ARIA roles and attributes (e.g.,role="menu",aria-labeloraria-haspopup="true") can improve accessibility for keyboard and screen-reader users.
7-10: Verify consistent labeling for context menu options.
"隐藏" and "切换到..." appear to be user-facing text. Double-check for consistent phrasing in all supported locales or languages if the project is internationalized.
11-24: Use descriptive keys for dynamic lists.
When rendering items withv-for, relying on the array index can lead to unexpected re-renders if the array changes order. Consider using a stable unique identifier such asitem.id.- :key="index" + :key="item.id"
44-53: Confirm that the reactive menu fields handle partial updates efficiently.
reactive(contextMenu)is updated frequently during menu interactions. If only a subset of fields need reactivity, using separaterefsor a computed property may reduce overhead.
57-83: Add boundary checks for Y-coordinate as well.
The code adjusts the position when there is insufficient space below, but does not appear to handle extremely tall menus or smaller viewports. Consider similarly bounding to 0 or a margin to keep the menu visible.
116-120: Optimize click-outside logic.
Usingdocument.addEventListener('click', handleClickOutside)is fine, but you may refine this by using Vue directives or event capture phases to optimize performance and define clear scopes for click-outside behavior.
143-153: Confirm styling within various themes or color schemes.
The.plugin-context-menubackground and border colors are hardcoded. If theming is a requirement, consider using CSS variables or a central design token for consistent styling.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/common/component/PluginRightMenu.vue(1 hunks)
🔇 Additional comments (1)
packages/common/component/PluginRightMenu.vue (1)
55-57:❓ Verification inconclusive
Validate horizontal positioning logic.
contextMenuWidthis hard-coded to 130 or 0 based on alignment. Confirm that large plugin titles or screen scaling do not overflow. Consider bounding the X-coordinate to prevent off-screen rendering.
🏁 Script executed:
#!/bin/bash # Attempt to identify large plugin titles or wide context menus. rg -A 3 'contextMenu.item.title'Length of output: 442
Validate Horizontal Positioning for Context Menu Rendering
Please double-check that the fixed width (130px for right-aligned menus) is sufficient for cases with long plugin titles, especially on displays with different scaling. Additionally, ensure that the X-coordinate is properly bounded to prevent the context menu from rendering off-screen.
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
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
Refactor
Style